diff --git a/app/components/league/DraftSpeedPicker.stories.tsx b/app/components/league/DraftSpeedPicker.stories.tsx
new file mode 100644
index 0000000..033b5a9
--- /dev/null
+++ b/app/components/league/DraftSpeedPicker.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DraftSpeedPicker } from "./DraftSpeedPicker";
+
+const meta: Meta<typeof DraftSpeedPicker> = {
+  title: "League/DraftSpeedPicker",
+  component: DraftSpeedPicker,
+  parameters: { layout: "padded" },
+  args: { onChange: () => {} },
+};
+
+export default meta;
+type Story = StoryObj<typeof DraftSpeedPicker>;
+
+export const StandardPreset: Story = {
+  args: { timerMode: "standard", value: "90" },
+};
+
+export const StandardCustom: Story = {
+  args: { timerMode: "standard", value: "300" },
+};
+
+export const ChessClockStandard: Story = {
+  args: { timerMode: "chess_clock", value: "standard" },
+};
+
+export const ChessClockSlow: Story = {
+  args: { timerMode: "chess_clock", value: "slow" },
+};
+
+export const ChessClockCustom: Story = {
+  args: { timerMode: "chess_clock", value: "custom:7200:900" },
+};
+
+export const Disabled: Story = {
+  args: { timerMode: "chess_clock", value: "standard", disabled: true },
+};
diff --git a/app/components/league/DraftSpeedPicker.tsx b/app/components/league/DraftSpeedPicker.tsx
new file mode 100644
index 0000000..a65a634
--- /dev/null
+++ b/app/components/league/DraftSpeedPicker.tsx
@@ -0,0 +1,281 @@
+import { Coffee, Snail, Timer, Zap, type LucideIcon } from "lucide-react";
+import { GradientIcon } from "~/components/ui/GradientIcon";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { cn } from "~/lib/utils";
+
+// ─── Types & constants ────────────────────────────────────────────────────────
+
+type TimeUnit = "sec" | "min" | "hr";
+
+export const STANDARD_PRESETS: { value: string; label: string }[] = [
+  { value: "15", label: "15 sec" },
+  { value: "30", label: "30 sec" },
+  { value: "60", label: "1 min" },
+  { value: "90", label: "90 sec" },
+  { value: "120", label: "2 min" },
+  { value: "900", label: "15 min" },
+  { value: "3600", label: "1 hr" },
+  { value: "7200", label: "2 hr" },
+  { value: "14400", label: "4 hr" },
+  { value: "28800", label: "8 hr" },
+  { value: "43200", label: "12 hr" },
+];
+
+export const CHESS_PRESETS: {
+  value: string;
+  label: string;
+  icon: LucideIcon;
+  desc: string;
+  bankSec: number;
+  incrSec: number;
+}[] = [
+  { value: "fast",      label: "Fast",      icon: Zap,    desc: "~1 hour",     bankSec: 60,    incrSec: 10   },
+  { value: "standard",  label: "Standard",  icon: Timer,  desc: "~90 minutes", bankSec: 120,   incrSec: 15   },
+  { value: "slow",      label: "Slow",      icon: Coffee, desc: "~1 week",     bankSec: 28800, incrSec: 3600 },
+  { value: "very-slow", label: "Very Slow", icon: Snail,  desc: "~2 weeks",    bankSec: 43200, incrSec: 3600 },
+];
+
+export function isSlowPreset(s: string): boolean {
+  return s === "slow" || s === "very-slow";
+}
+
+// ─── Internal helpers ─────────────────────────────────────────────────────────
+
+function secToDisplay(sec: number): [number, TimeUnit] {
+  if (sec >= 3600 && sec % 3600 === 0) return [sec / 3600, "hr"];
+  if (sec >= 60 && sec % 60 === 0) return [sec / 60, "min"];
+  return [sec, "sec"];
+}
+
+function displayToSec(amount: string, unit: TimeUnit): number {
+  const n = parseFloat(amount) || 0;
+  if (unit === "hr") return Math.round(n * 3600);
+  if (unit === "min") return Math.round(n * 60);
+  return Math.round(n);
+}
+
+export function formatSec(sec: number): string {
+  if (sec >= 3600 && sec % 3600 === 0) return `${sec / 3600} hr`;
+  if (sec >= 60 && sec % 60 === 0) return `${sec / 60} min`;
+  return `${sec} sec`;
+}
+
+export function formatDraftSpeed(speed: string, mode: "chess_clock" | "standard"): string {
+  if (mode === "standard") {
+    const s = parseInt(speed, 10);
+    if (s >= 3600) return `${s / 3600} hr`;
+    if (s >= 60) return `${s / 60} min`;
+    return `${s} sec`;
+  }
+  if (speed.startsWith("custom:")) {
+    const [, b, i] = speed.split(":");
+    return `Custom (${formatSec(parseInt(b, 10))} bank + ${formatSec(parseInt(i, 10))} / pick)`;
+  }
+  const map: Record<string, string> = {
+    fast: "Fast (1 min + 10 sec)",
+    standard: "Standard (2 min + 15 sec)",
+    slow: "Slow (8 hr + 1 hr)",
+    "very-slow": "Very Slow (12 hr + 1 hr)",
+  };
+  return map[speed] ?? speed;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export interface DraftSpeedPickerProps {
+  timerMode: "chess_clock" | "standard";
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+}
+
+export function DraftSpeedPicker({ timerMode, value, onChange, disabled }: DraftSpeedPickerProps) {
+  const isStdPreset = STANDARD_PRESETS.some((p) => p.value === value);
+  const isChessPreset = CHESS_PRESETS.some((p) => p.value === value);
+  const isCustom = timerMode === "standard" ? !isStdPreset : !isChessPreset;
+
+  // Derive display values from value prop so they always stay in sync.
+  const stdCustomSec = timerMode === "standard" && isCustom ? (parseInt(value, 10) || 90) : 90;
+  const [stdCustomAmt, stdCustomUnit] = secToDisplay(stdCustomSec);
+
+  const chessCustomParts = value.startsWith("custom:") ? value.split(":") : [];
+  const bankSec = chessCustomParts.length === 3 ? (parseInt(chessCustomParts[1], 10) || 120) : 120;
+  const incrSec = chessCustomParts.length === 3 ? (parseInt(chessCustomParts[2], 10) || 15) : 15;
+  const [bankAmt, bankUnit] = secToDisplay(bankSec);
+  const [incrAmt, incrUnit] = secToDisplay(incrSec);
+
+  if (timerMode === "standard") {
+    return (
+      <div className="space-y-3">
+        <div className="grid grid-cols-3 gap-2">
+          {STANDARD_PRESETS.map((p) => (
+            <button
+              key={p.value}
+              type="button"
+              disabled={disabled}
+              onClick={() => onChange(p.value)}
+              className={cn(
+                "py-2.5 rounded-lg border-2 text-sm font-semibold transition-all",
+                value === p.value ? "border-primary" : "border-border hover:border-primary/60",
+                disabled && "opacity-50 cursor-not-allowed"
+              )}
+            >
+              {p.label}
+            </button>
+          ))}
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={() => onChange(isCustom ? value : "90")}
+            className={cn(
+              "py-2.5 rounded-lg border-2 text-sm font-semibold transition-all",
+              isCustom ? "border-primary" : "border-border hover:border-primary/60",
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            Custom
+          </button>
+        </div>
+        {isCustom && (
+          <div className="flex items-center gap-2 pt-1">
+            <Input
+              type="number"
+              min={1}
+              value={stdCustomAmt}
+              disabled={disabled}
+              onChange={(e) => onChange(String(displayToSec(e.target.value, stdCustomUnit) || 90))}
+              className="w-24"
+            />
+            <UnitSelect
+              value={stdCustomUnit}
+              onChange={(u) => onChange(String(displayToSec(String(stdCustomAmt), u) || 90))}
+              disabled={disabled}
+            />
+            <span className="text-sm text-muted-foreground">per pick</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col gap-2">
+        {CHESS_PRESETS.map((p) => {
+          const selected = value === p.value;
+          return (
+            <button
+              key={p.value}
+              type="button"
+              disabled={disabled}
+              onClick={() => onChange(p.value)}
+              className={cn(
+                "w-full flex items-center justify-between px-4 py-3 rounded-lg border-2 transition-all",
+                selected ? "border-primary" : "border-border hover:border-primary/60",
+                disabled && "opacity-50 cursor-not-allowed"
+              )}
+            >
+              <div className="flex items-center gap-3">
+                <GradientIcon
+                  icon={p.icon}
+                  className="h-5 w-5 shrink-0"
+                  style={selected ? undefined : { stroke: "var(--muted-foreground)" }}
+                />
+                <div className="text-left">
+                  <p className="font-semibold text-sm">{p.label}</p>
+                  <p className="text-xs text-muted-foreground">{p.desc}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <div className="text-right">
+                  <p className="text-xs uppercase tracking-wider text-muted-foreground">Bank</p>
+                  <p className="text-base font-bold">{formatSec(p.bankSec)}</p>
+                </div>
+                <div className="w-px h-8 bg-border" />
+                <div className="text-right">
+                  <p className="text-xs uppercase tracking-wider text-muted-foreground">+/Pick</p>
+                  <p className="text-base font-bold text-primary">{formatSec(p.incrSec)}</p>
+                </div>
+              </div>
+            </button>
+          );
+        })}
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => onChange(isCustom ? value : `custom:${bankSec}:${incrSec}`)}
+          className={cn(
+            "w-full py-2.5 rounded-lg border-2 text-sm font-semibold transition-all",
+            isCustom ? "border-primary" : "border-border hover:border-primary/60",
+            disabled && "opacity-50 cursor-not-allowed"
+          )}
+        >
+          Custom
+        </button>
+      </div>
+      {isCustom && (
+        <div className="grid grid-cols-2 gap-3 pt-1">
+          <div className="space-y-1">
+            <Label className="text-xs">Time Bank</Label>
+            <div className="flex gap-2">
+              <Input
+                type="number"
+                min={1}
+                value={bankAmt}
+                disabled={disabled}
+                onChange={(e) => onChange(`custom:${displayToSec(e.target.value, bankUnit) || 120}:${incrSec}`)}
+                className="w-20"
+              />
+              <UnitSelect
+                value={bankUnit}
+                onChange={(u) => onChange(`custom:${displayToSec(String(bankAmt), u) || 120}:${incrSec}`)}
+                disabled={disabled}
+              />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Per-pick Increment</Label>
+            <div className="flex gap-2">
+              <Input
+                type="number"
+                min={1}
+                value={incrAmt}
+                disabled={disabled}
+                onChange={(e) => onChange(`custom:${bankSec}:${displayToSec(e.target.value, incrUnit) || 15}`)}
+                className="w-20"
+              />
+              <UnitSelect
+                value={incrUnit}
+                onChange={(u) => onChange(`custom:${bankSec}:${displayToSec(String(incrAmt), u) || 15}`)}
+                disabled={disabled}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function UnitSelect({ value, onChange, disabled }: { value: TimeUnit; onChange: (v: TimeUnit) => void; disabled?: boolean }) {
+  return (
+    <Select value={value} onValueChange={(v) => onChange(v as TimeUnit)} disabled={disabled}>
+      <SelectTrigger className="w-24">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="sec">sec</SelectItem>
+        <SelectItem value="min">min</SelectItem>
+        <SelectItem value="hr">hr</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/app/components/league/OvernightPauseSettings.stories.tsx b/app/components/league/OvernightPauseSettings.stories.tsx
new file mode 100644
index 0000000..8f893cf
--- /dev/null
+++ b/app/components/league/OvernightPauseSettings.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { OvernightPauseSettings } from "./OvernightPauseSettings";
+
+const meta: Meta<typeof OvernightPauseSettings> = {
+  title: "League/OvernightPauseSettings",
+  component: OvernightPauseSettings,
+  parameters: { layout: "padded" },
+  args: {
+    onModeChange: () => {},
+    onStartChange: () => {},
+    onEndChange: () => {},
+    onTimezoneChange: () => {},
+    start: "23:00",
+    end: "07:00",
+    timezone: "America/Chicago",
+    commishTimezone: "America/Chicago",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OvernightPauseSettings>;
+
+export const Hidden: Story = {
+  args: { show: false, mode: "none" },
+};
+
+export const ModeNone: Story = {
+  args: { show: true, mode: "none" },
+};
+
+export const ModeLeague: Story = {
+  args: { show: true, mode: "league" },
+};
+
+export const ModePerUser: Story = {
+  args: { show: true, mode: "per_user" },
+};
+
+export const ModePerUserNoCommishTimezone: Story = {
+  args: { show: true, mode: "per_user", commishTimezone: null },
+};
+
+export const Disabled: Story = {
+  args: { show: true, mode: "league", disabled: true },
+};
diff --git a/app/components/league/OvernightPauseSettings.tsx b/app/components/league/OvernightPauseSettings.tsx
new file mode 100644
index 0000000..a1a8f61
--- /dev/null
+++ b/app/components/league/OvernightPauseSettings.tsx
@@ -0,0 +1,121 @@
+import { Ban, Globe, Moon, Sun, Users } from "lucide-react";
+import { GradientIcon } from "~/components/ui/GradientIcon";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { TimezoneSelect } from "~/components/league/TimezoneSelect";
+import { cn } from "~/lib/utils";
+
+export interface OvernightPauseSettingsProps {
+  show: boolean;
+  mode: "none" | "league" | "per_user";
+  onModeChange: (v: "none" | "league" | "per_user") => void;
+  start: string;
+  onStartChange: (v: string) => void;
+  end: string;
+  onEndChange: (v: string) => void;
+  timezone: string;
+  onTimezoneChange: (v: string) => void;
+  commishTimezone?: string | null;
+  disabled?: boolean;
+}
+
+const PAUSE_MODES = [
+  { value: "none"     as const, icon: Ban,   label: "No Pause",   sub: "Timer always runs" },
+  { value: "league"   as const, icon: Globe, label: "League",     sub: "Same pause for everyone" },
+  { value: "per_user" as const, icon: Users, label: "Per Player", sub: "Pauses in each player's timezone" },
+];
+
+export function OvernightPauseSettings({
+  show,
+  mode,
+  onModeChange,
+  start,
+  onStartChange,
+  end,
+  onEndChange,
+  timezone,
+  onTimezoneChange,
+  commishTimezone,
+  disabled,
+}: OvernightPauseSettingsProps) {
+  if (!show) return null;
+
+  return (
+    <div className="space-y-4">
+      <Label>Overnight Pause</Label>
+
+      <div className="grid grid-cols-3 gap-2">
+        {PAUSE_MODES.map(({ value, icon: Icon, label, sub }) => {
+          const selected = mode === value;
+          return (
+            <button
+              key={value}
+              type="button"
+              disabled={disabled}
+              onClick={() => onModeChange(value)}
+              className={cn(
+                "flex flex-col items-center gap-1 py-3 px-2 rounded-lg border-2 transition-all",
+                selected ? "border-primary" : "border-border hover:border-primary/60",
+                disabled && "opacity-50 cursor-not-allowed"
+              )}
+            >
+              <GradientIcon
+                icon={Icon}
+                className="h-5 w-5"
+                style={selected ? undefined : { stroke: "var(--muted-foreground)" }}
+              />
+              <span className="text-xs font-semibold">{label}</span>
+              <span className="text-xs text-muted-foreground text-center leading-tight">{sub}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {mode !== "none" && (
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <div className="flex items-center gap-1.5">
+                <Moon className="h-3.5 w-3.5 text-indigo-400 shrink-0" />
+                <Label className="text-xs">Draft pauses</Label>
+              </div>
+              <Input
+                type="time"
+                value={start}
+                disabled={disabled}
+                onChange={(e) => onStartChange(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <div className="flex items-center gap-1.5">
+                <Sun className="h-3.5 w-3.5 text-yellow-400 shrink-0" />
+                <Label className="text-xs">Draft resumes</Label>
+              </div>
+              <Input
+                type="time"
+                value={end}
+                disabled={disabled}
+                onChange={(e) => onEndChange(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <Label className="text-sm">
+              {mode === "per_user" ? "Default Timezone" : "Timezone"}
+            </Label>
+            {mode === "per_user" && (
+              <p className="text-xs text-muted-foreground">
+                Each player&apos;s profile timezone is used. Players without one fall back to the timezone below.
+                {!commishTimezone && (
+                  <> You haven&apos;t set your timezone yet — <a href="/profile" className="font-medium underline underline-offset-2">set it in your profile</a>.</>
+                )}
+              </p>
+            )}
+            <TimezoneSelect value={timezone} onChange={onTimezoneChange} disabled={disabled} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/league/ReviewSection.stories.tsx b/app/components/league/ReviewSection.stories.tsx
new file mode 100644
index 0000000..a6725a3
--- /dev/null
+++ b/app/components/league/ReviewSection.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Trophy } from "lucide-react";
+import { ReviewSection } from "./ReviewSection";
+
+const meta: Meta<typeof ReviewSection> = {
+  title: "League/ReviewSection",
+  component: ReviewSection,
+  parameters: { layout: "centered" },
+  args: {
+    icon: Trophy,
+    title: "Sports",
+    onEdit: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ReviewSection>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <ul className="space-y-1 text-sm">
+        <li>NBA 2025</li>
+        <li>NFL 2025</li>
+      </ul>
+    ),
+  },
+};
diff --git a/app/components/league/ReviewSection.tsx b/app/components/league/ReviewSection.tsx
new file mode 100644
index 0000000..8fe2d26
--- /dev/null
+++ b/app/components/league/ReviewSection.tsx
@@ -0,0 +1,28 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { Button } from "~/components/ui/button";
+import { GradientIcon } from "~/components/ui/GradientIcon";
+
+export interface ReviewSectionProps {
+  icon: LucideIcon;
+  title: string;
+  onEdit: () => void;
+  children: ReactNode;
+}
+
+export function ReviewSection({ icon, title, onEdit, children }: ReviewSectionProps) {
+  return (
+    <div className="rounded-lg border border-border p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold flex items-center gap-2">
+          <GradientIcon icon={icon} className="h-4 w-4" />
+          {title}
+        </h3>
+        <Button type="button" variant="outline" size="sm" onClick={onEdit} className="h-7 text-xs px-3">
+          Edit
+        </Button>
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/app/components/league/ScoringPresetPicker.stories.tsx b/app/components/league/ScoringPresetPicker.stories.tsx
new file mode 100644
index 0000000..bfae84e
--- /dev/null
+++ b/app/components/league/ScoringPresetPicker.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ScoringPresetPicker, OMNIFANTASY_SCORING } from "./ScoringPresetPicker";
+import { DEFAULT_SCORING_RULES } from "~/lib/scoring-types";
+
+const meta: Meta<typeof ScoringPresetPicker> = {
+  title: "League/ScoringPresetPicker",
+  component: ScoringPresetPicker,
+  parameters: { layout: "padded" },
+  args: { onPresetChange: () => {}, onRulesChange: () => {} },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScoringPresetPicker>;
+
+export const BracktDefault: Story = {
+  args: { preset: "brackt", rules: { ...DEFAULT_SCORING_RULES } },
+};
+
+export const OmnifantasyDefault: Story = {
+  args: { preset: "omnifantasy", rules: { ...OMNIFANTASY_SCORING } },
+};
+
+export const Custom: Story = {
+  args: {
+    preset: "custom",
+    rules: { pointsFor1st: 120, pointsFor2nd: 60, pointsFor3rd: 40, pointsFor4th: 30, pointsFor5th: 20, pointsFor6th: 15, pointsFor7th: 10, pointsFor8th: 5 },
+  },
+};
+
+export const Disabled: Story = {
+  args: { preset: "brackt", rules: { ...DEFAULT_SCORING_RULES }, disabled: true },
+};
diff --git a/app/components/league/ScoringPresetPicker.tsx b/app/components/league/ScoringPresetPicker.tsx
new file mode 100644
index 0000000..daac0ec
--- /dev/null
+++ b/app/components/league/ScoringPresetPicker.tsx
@@ -0,0 +1,108 @@
+import { cn } from "~/lib/utils";
+import { DEFAULT_SCORING_RULES, type ScoringRules } from "~/lib/scoring-types";
+
+export const OMNIFANTASY_SCORING: ScoringRules = {
+  pointsFor1st: 80,
+  pointsFor2nd: 50,
+  pointsFor3rd: 30,
+  pointsFor4th: 30,
+  pointsFor5th: 20,
+  pointsFor6th: 20,
+  pointsFor7th: 20,
+  pointsFor8th: 20,
+};
+
+export const PLACEMENT_LABELS = [
+  { key: "pointsFor1st" as const, label: "1st", color: "text-yellow-500" },
+  { key: "pointsFor2nd" as const, label: "2nd", color: "text-slate-400" },
+  { key: "pointsFor3rd" as const, label: "3rd", color: "text-orange-400" },
+  { key: "pointsFor4th" as const, label: "4th", color: "text-sky-400" },
+  { key: "pointsFor5th" as const, label: "5th", color: "text-green-500" },
+  { key: "pointsFor6th" as const, label: "6th", color: "text-green-500" },
+  { key: "pointsFor7th" as const, label: "7th", color: "text-emerald-400" },
+  { key: "pointsFor8th" as const, label: "8th", color: "text-emerald-400" },
+];
+
+export interface ScoringPresetPickerProps {
+  preset: "brackt" | "omnifantasy" | "custom";
+  onPresetChange: (v: "brackt" | "omnifantasy" | "custom") => void;
+  rules: ScoringRules;
+  onRulesChange: (r: ScoringRules) => void;
+  disabled?: boolean;
+}
+
+export function ScoringPresetPicker({
+  preset,
+  onPresetChange,
+  rules,
+  onRulesChange,
+  disabled,
+}: ScoringPresetPickerProps) {
+  const maxPoints = Math.max(...Object.values(rules));
+
+  function applyPreset(p: "brackt" | "omnifantasy") {
+    onPresetChange(p);
+    onRulesChange(p === "brackt" ? { ...DEFAULT_SCORING_RULES } : { ...OMNIFANTASY_SCORING });
+  }
+
+  function handleFieldChange(key: keyof ScoringRules, raw: string) {
+    const val = parseInt(raw, 10);
+    if (!isNaN(val) && val >= 0 && val <= 1000) {
+      onPresetChange("custom");
+      onRulesChange({ ...rules, [key]: val });
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Preset tabs */}
+      <div className="flex rounded-lg border border-border overflow-hidden">
+        {(["brackt", "omnifantasy", "custom"] as const).map((p) => (
+          <button
+            key={p}
+            type="button"
+            disabled={disabled}
+            onClick={() => p !== "custom" ? applyPreset(p) : onPresetChange("custom")}
+            className={cn(
+              "flex-1 py-2 text-sm font-medium transition-colors",
+              preset === p
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:bg-accent",
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            {p === "brackt" ? "Brackt Default" : p === "omnifantasy" ? "Omnifantasy Default" : "Custom"}
+          </button>
+        ))}
+      </div>
+
+      {/* Placement fields */}
+      <div className="space-y-3">
+        {PLACEMENT_LABELS.map(({ key, label, color }) => {
+          const val = rules[key];
+          const barWidth = maxPoints > 0 ? (val / maxPoints) * 100 : 0;
+          return (
+            <div key={key} className="flex items-center gap-3">
+              <span className={cn("text-sm font-medium w-8 shrink-0", color)}>{label}</span>
+              <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary rounded-full transition-all duration-200"
+                  style={{ width: `${barWidth}%` }}
+                />
+              </div>
+              <input
+                type="number"
+                value={val}
+                disabled={disabled}
+                onChange={(e) => handleFieldChange(key, e.target.value)}
+                min={0}
+                max={1000}
+                className="w-14 h-8 text-center text-sm font-semibold border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none disabled:opacity-50"
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/league/SportIcon.stories.tsx b/app/components/league/SportIcon.stories.tsx
new file mode 100644
index 0000000..7fef42b
--- /dev/null
+++ b/app/components/league/SportIcon.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SportIcon } from "./SportIcon";
+
+const meta: Meta<typeof SportIcon> = {
+  title: "League/SportIcon",
+  component: SportIcon,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof SportIcon>;
+
+// Icons are uploaded at runtime via the admin panel and are not committed to the
+// repo, so we use a data-URI placeholder here instead of a real file path.
+const PLACEHOLDER_SVG =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234f46e5'/%3E%3C/svg%3E";
+
+export const WithIcon: Story = {
+  args: {
+    sport: { name: "NBA", iconUrl: PLACEHOLDER_SVG },
+  },
+};
+
+export const Fallback: Story = {
+  args: {
+    sport: { name: "Unknown Sport", iconUrl: null },
+  },
+};
+
+export const SmallWithIcon: Story = {
+  args: {
+    sport: { name: "NFL", iconUrl: PLACEHOLDER_SVG },
+    size: "sm",
+  },
+};
+
+export const SmallFallback: Story = {
+  args: {
+    sport: { name: "Unknown Sport", iconUrl: null },
+    size: "sm",
+  },
+};
diff --git a/app/components/league/SportIcon.tsx b/app/components/league/SportIcon.tsx
new file mode 100644
index 0000000..f66e600
--- /dev/null
+++ b/app/components/league/SportIcon.tsx
@@ -0,0 +1,20 @@
+export interface SportIconProps {
+  sport: { name: string; iconUrl: string | null };
+  size?: "sm" | "md";
+}
+
+export function SportIcon({ sport, size = "md" }: SportIconProps) {
+  const cls = size === "sm" ? "w-4 h-4" : "w-5 h-5";
+  if (sport.iconUrl) {
+    const isAbsolute = sport.iconUrl.startsWith("data:") || sport.iconUrl.startsWith("http") || sport.iconUrl.startsWith("/");
+    const src = isAbsolute ? sport.iconUrl : `/sports-icons/${sport.iconUrl}`;
+    return (
+      <img
+        src={src}
+        alt={sport.name}
+        className={`${cls} object-contain shrink-0`}
+      />
+    );
+  }
+  return <span className={`${cls} rounded-sm bg-muted shrink-0 inline-block`} aria-hidden />;
+}
diff --git a/app/components/league/StepperInput.stories.tsx b/app/components/league/StepperInput.stories.tsx
new file mode 100644
index 0000000..6ea481d
--- /dev/null
+++ b/app/components/league/StepperInput.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StepperInput } from "./StepperInput";
+
+const meta: Meta<typeof StepperInput> = {
+  title: "League/StepperInput",
+  component: StepperInput,
+  parameters: { layout: "centered" },
+  args: {
+    min: 6,
+    max: 16,
+    onChange: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StepperInput>;
+
+export const Middle: Story = {
+  args: { value: 10 },
+};
+
+export const AtMinimum: Story = {
+  args: { value: 6 },
+};
+
+export const AtMaximum: Story = {
+  args: { value: 16 },
+};
diff --git a/app/components/league/StepperInput.tsx b/app/components/league/StepperInput.tsx
new file mode 100644
index 0000000..c98d685
--- /dev/null
+++ b/app/components/league/StepperInput.tsx
@@ -0,0 +1,41 @@
+export interface StepperInputProps {
+  value: number;
+  min: number;
+  max: number;
+  onChange: (v: number) => void;
+  decrementLabel?: string;
+  incrementLabel?: string;
+}
+
+export function StepperInput({
+  value,
+  min,
+  max,
+  onChange,
+  decrementLabel = "Decrease",
+  incrementLabel = "Increase",
+}: StepperInputProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        type="button"
+        onClick={() => onChange(Math.max(min, value - 1))}
+        className="w-9 h-9 rounded-md border border-input flex items-center justify-center text-lg font-medium hover:bg-accent transition-colors"
+        aria-label={decrementLabel}
+        disabled={value <= min}
+      >
+        −
+      </button>
+      <span className="w-10 text-center text-lg font-semibold tabular-nums">{value}</span>
+      <button
+        type="button"
+        onClick={() => onChange(Math.min(max, value + 1))}
+        className="w-9 h-9 rounded-md border border-input flex items-center justify-center text-lg font-medium hover:bg-accent transition-colors"
+        aria-label={incrementLabel}
+        disabled={value >= max}
+      >
+        +
+      </button>
+    </div>
+  );
+}
diff --git a/app/components/league/TimerModeSelector.stories.tsx b/app/components/league/TimerModeSelector.stories.tsx
new file mode 100644
index 0000000..158883c
--- /dev/null
+++ b/app/components/league/TimerModeSelector.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { TimerModeSelector } from "./TimerModeSelector";
+
+const meta: Meta<typeof TimerModeSelector> = {
+  title: "League/TimerModeSelector",
+  component: TimerModeSelector,
+  parameters: { layout: "padded" },
+  args: { onChange: () => {} },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimerModeSelector>;
+
+export const ChessClockSelected: Story = {
+  args: { value: "chess_clock" },
+};
+
+export const StandardSelected: Story = {
+  args: { value: "standard" },
+};
+
+export const Disabled: Story = {
+  args: { value: "chess_clock", disabled: true },
+};
diff --git a/app/components/league/TimerModeSelector.tsx b/app/components/league/TimerModeSelector.tsx
new file mode 100644
index 0000000..8df9365
--- /dev/null
+++ b/app/components/league/TimerModeSelector.tsx
@@ -0,0 +1,59 @@
+import { ChessPawn, Hourglass } from "lucide-react";
+import { GradientIcon } from "~/components/ui/GradientIcon";
+import { cn } from "~/lib/utils";
+
+export interface TimerModeSelectorProps {
+  value: "chess_clock" | "standard";
+  onChange: (v: "chess_clock" | "standard") => void;
+  disabled?: boolean;
+}
+
+const MODES = [
+  {
+    value: "chess_clock" as const,
+    label: "Chess Clock",
+    icon: ChessPawn,
+    desc: "Time bank + bonus per pick; bank early to save time for tough decisions",
+  },
+  {
+    value: "standard" as const,
+    label: "Standard",
+    icon: Hourglass,
+    desc: "Traditional fixed timer; each pick gets the same amount of time, no banking or carry-over",
+  },
+];
+
+export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelectorProps) {
+  return (
+    <div className="grid grid-cols-2 gap-3">
+      {MODES.map((mode) => {
+        const selected = value === mode.value;
+        return (
+          <button
+            key={mode.value}
+            type="button"
+            onClick={() => onChange(mode.value)}
+            disabled={disabled}
+            className={cn(
+              "flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all",
+              selected ? "border-primary" : "border-border hover:border-primary/60",
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            <GradientIcon
+              icon={mode.icon}
+              className="h-7 w-7"
+              style={selected ? undefined : { stroke: "var(--muted-foreground)" }}
+            />
+            <span className={cn("text-sm font-semibold", !selected && "text-muted-foreground")}>
+              {mode.label}
+            </span>
+            <span className="text-xs text-muted-foreground text-center leading-tight">
+              {mode.desc}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/app/components/league/WizardAuthForm.stories.tsx b/app/components/league/WizardAuthForm.stories.tsx
new file mode 100644
index 0000000..bc8af75
--- /dev/null
+++ b/app/components/league/WizardAuthForm.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { WizardAuthForm } from "./WizardAuthForm";
+
+const meta: Meta<typeof WizardAuthForm> = {
+  title: "League/WizardAuthForm",
+  component: WizardAuthForm,
+  parameters: { layout: "centered" },
+  decorators: [
+    (Story) => (
+      <div className="w-[420px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    setAuthTab: () => {},
+    displayName: "",
+    setDisplayName: () => {},
+    authEmail: "",
+    setAuthEmail: () => {},
+    authPassword: "",
+    setAuthPassword: () => {},
+    userTimezone: "America/New_York",
+    setUserTimezone: () => {},
+    onSocialLogin: () => {},
+    submitting: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WizardAuthForm>;
+
+export const CreateTab: Story = {
+  args: { authTab: "create" },
+};
+
+export const LoginTab: Story = {
+  args: { authTab: "login" },
+};
+
+export const Submitting: Story = {
+  args: { authTab: "create", submitting: true },
+};
diff --git a/app/components/league/WizardAuthForm.tsx b/app/components/league/WizardAuthForm.tsx
new file mode 100644
index 0000000..d40fa78
--- /dev/null
+++ b/app/components/league/WizardAuthForm.tsx
@@ -0,0 +1,157 @@
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { TimezoneSelect } from "~/components/league/TimezoneSelect";
+import { cn } from "~/lib/utils";
+
+export interface WizardAuthFormProps {
+  authTab: "create" | "login";
+  setAuthTab: (v: "create" | "login") => void;
+  displayName: string;
+  setDisplayName: (v: string) => void;
+  authEmail: string;
+  setAuthEmail: (v: string) => void;
+  authPassword: string;
+  setAuthPassword: (v: string) => void;
+  userTimezone: string;
+  setUserTimezone: (v: string) => void;
+  onSocialLogin: (provider: "google" | "discord") => void;
+  submitting: boolean;
+}
+
+export function WizardAuthForm({
+  authTab,
+  setAuthTab,
+  displayName,
+  setDisplayName,
+  authEmail,
+  setAuthEmail,
+  authPassword,
+  setAuthPassword,
+  userTimezone,
+  setUserTimezone,
+  onSocialLogin,
+  submitting,
+}: WizardAuthFormProps) {
+  return (
+    <div className="border-t pt-4">
+      <h3 className="text-base font-semibold mb-3">Your Account</h3>
+
+      <div className="flex rounded-lg border border-border overflow-hidden mb-4">
+        <button
+          type="button"
+          onClick={() => setAuthTab("create")}
+          className={cn(
+            "flex-1 py-2 text-sm font-medium transition-colors",
+            authTab === "create" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
+          )}
+        >
+          Create Account
+        </button>
+        <button
+          type="button"
+          onClick={() => setAuthTab("login")}
+          className={cn(
+            "flex-1 py-2 text-sm font-medium transition-colors",
+            authTab === "login" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
+          )}
+        >
+          Log In
+        </button>
+      </div>
+
+      <div className="space-y-2 mb-4">
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full flex items-center gap-2"
+          onClick={() => onSocialLogin("discord")}
+          disabled={submitting}
+        >
+          <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.002.022.015.043.032.055a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/>
+          </svg>
+          {authTab === "create" ? "Create Account & League with Discord" : "Log in with Discord & Create League"}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full flex items-center gap-2"
+          onClick={() => onSocialLogin("google")}
+          disabled={submitting}
+        >
+          <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24">
+            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
+            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+          </svg>
+          {authTab === "create" ? "Create Account & League with Google" : "Log in with Google & Create League"}
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <div className="flex-1 border-t border-border" />
+        <span className="text-xs text-muted-foreground">or</span>
+        <div className="flex-1 border-t border-border" />
+      </div>
+
+      <div className="space-y-3">
+        {authTab === "create" && (
+          <div className="space-y-2">
+            <Label htmlFor="displayName">Display Name</Label>
+            <Input
+              id="displayName"
+              type="text"
+              placeholder="Your name in the league"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              autoComplete="name"
+            />
+          </div>
+        )}
+        <div className="space-y-2">
+          <Label htmlFor="authEmail">Email</Label>
+          <Input
+            id="authEmail"
+            type="email"
+            placeholder="you@example.com"
+            value={authEmail}
+            onChange={(e) => setAuthEmail(e.target.value)}
+            autoComplete="email"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="authPassword">Password</Label>
+          <Input
+            id="authPassword"
+            type="password"
+            placeholder={authTab === "create" ? "Choose a strong password" : "Your password"}
+            value={authPassword}
+            onChange={(e) => setAuthPassword(e.target.value)}
+            autoComplete={authTab === "create" ? "new-password" : "current-password"}
+            minLength={authTab === "create" ? 8 : undefined}
+          />
+        </div>
+        {authTab === "create" && (
+          <div className="space-y-2">
+            <Label htmlFor="userTimezone">Timezone</Label>
+            <TimezoneSelect
+              value={userTimezone}
+              onChange={setUserTimezone}
+              name="userTimezone"
+            />
+          </div>
+        )}
+      </div>
+
+      {authTab === "create" && (
+        <p className="text-xs text-muted-foreground mt-2">
+          By creating an account you agree to the{" "}
+          <a href="/terms" className="underline">Terms of Service</a> and{" "}
+          <a href="/privacy" className="underline">Privacy Policy</a>.
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/league/WizardStepper.stories.tsx b/app/components/league/WizardStepper.stories.tsx
new file mode 100644
index 0000000..1c440af
--- /dev/null
+++ b/app/components/league/WizardStepper.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { WizardStepper } from "./WizardStepper";
+
+const meta: Meta<typeof WizardStepper> = {
+  title: "League/WizardStepper",
+  component: WizardStepper,
+  parameters: { layout: "padded" },
+  args: {
+    steps: ["Basics", "Sports", "Draft", "Scoring", "Review"],
+    onStepClick: () => {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WizardStepper>;
+
+export const Step1: Story = {
+  args: { currentStep: 1 },
+};
+
+export const Step3: Story = {
+  args: { currentStep: 3 },
+};
+
+export const LastStep: Story = {
+  args: { currentStep: 5 },
+};
diff --git a/app/components/league/WizardStepper.tsx b/app/components/league/WizardStepper.tsx
new file mode 100644
index 0000000..cc57415
--- /dev/null
+++ b/app/components/league/WizardStepper.tsx
@@ -0,0 +1,63 @@
+import { Fragment } from "react";
+import { Check } from "lucide-react";
+import { cn } from "~/lib/utils";
+
+export interface WizardStepperProps {
+  currentStep: number;
+  steps: string[];
+  onStepClick: (n: number) => void;
+}
+
+export function WizardStepper({ currentStep, steps, onStepClick }: WizardStepperProps) {
+  return (
+    <div className="mb-6">
+      <div className="flex items-center">
+        {steps.map((label, i) => {
+          const n = i + 1;
+          const done = n < currentStep;
+          const active = n === currentStep;
+          return (
+            <Fragment key={label}>
+              {i > 0 && (
+                <div className={cn("flex-1 h-0.5 transition-colors", done ? "bg-primary" : "bg-border")} />
+              )}
+              <button
+                type="button"
+                onClick={() => done && onStepClick(n)}
+                className={cn(
+                  "shrink-0 w-9 h-9 rounded-full border-2 flex items-center justify-center text-sm font-semibold bg-background transition-colors",
+                  done && "bg-primary border-primary text-primary-foreground",
+                  active && !done && "border-primary text-primary",
+                  !done && !active && "border-border text-muted-foreground",
+                  done ? "cursor-pointer" : "cursor-default"
+                )}
+              >
+                {done ? <Check className="h-4 w-4" /> : n}
+              </button>
+            </Fragment>
+          );
+        })}
+      </div>
+      <div className="flex mt-1.5">
+        {steps.map((label, i) => {
+          const n = i + 1;
+          const done = n < currentStep;
+          const active = n === currentStep;
+          return (
+            <Fragment key={label}>
+              {i > 0 && <div className="flex-1" />}
+              <div className="shrink-0 w-9 flex justify-center">
+                <span className={cn(
+                  "text-xs hidden sm:block whitespace-nowrap",
+                  active ? "text-primary font-medium" : done ? "text-foreground" : "text-muted-foreground"
+                )}>
+                  {label}
+                </span>
+              </div>
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/app/lib/draft-timer.ts b/app/lib/draft-timer.ts
index 832675f..63a0455 100644
--- a/app/lib/draft-timer.ts
+++ b/app/lib/draft-timer.ts
@@ -10,6 +10,16 @@
  *   - Between turns: all other teams' banks are left untouched.
  */
 
+/**
+ * Formats a HH:MM time string as 12-hour time with AM/PM.
+ * e.g. "23:00" → "11:00 PM", "07:30" → "7:30 AM"
+ */
+export function formatTime12h(t: string): string {
+  const [h, m] = t.split(":").map(Number);
+  const ap = (h || 0) >= 12 ? "PM" : "AM";
+  return `${(h || 0) % 12 || 12}:${String(m || 0).padStart(2, "0")} ${ap}`;
+}
+
 /**
  * Formats a seconds value for display.
  *   undefined  → "--:--"
@@ -57,6 +67,12 @@ export function parseDraftSpeed(
     return { draftInitialTime: time, draftIncrementTime: time };
   }
 
+  if (draftSpeed?.startsWith("custom:")) {
+    const [, bankStr, incrStr] = draftSpeed.split(":");
+    const bank = parseInt(bankStr ?? "", 10);
+    const incr = parseInt(incrStr ?? "", 10);
+    if (!isNaN(bank) && !isNaN(incr)) return { draftInitialTime: bank, draftIncrementTime: incr };
+  }
   switch (draftSpeed) {
     case "fast":
       return { draftInitialTime: 60, draftIncrementTime: 10 };
diff --git a/app/lib/wizard-state.ts b/app/lib/wizard-state.ts
new file mode 100644
index 0000000..7c26476
--- /dev/null
+++ b/app/lib/wizard-state.ts
@@ -0,0 +1,71 @@
+import type { ScoringRules } from "~/lib/scoring-types";
+
+export const WIZARD_SS_KEY = "brackt_new_league_wizard";
+
+export type WizardSnapshot = {
+  leagueName: string;
+  teamCount: number;
+  joinAsPlayer: boolean;
+  selectedTemplate: string;
+  selectedSports: string[];
+  draftRounds: number;
+  draftDate: string;
+  draftTime: string;
+  timerMode: "chess_clock" | "standard";
+  draftSpeed: string;
+  overnightMode: "none" | "league" | "per_user";
+  overnightStart: string;
+  overnightEnd: string;
+  overnightTimezone: string;
+  scoringPreset: "brackt" | "omnifantasy" | "custom";
+  scoringRules: ScoringRules;
+  userTimezone: string;
+};
+
+type SS = { getItem(k: string): string | null; setItem(k: string, v: string): void; removeItem(k: string): void };
+
+function ss(): SS | null {
+  const g = globalThis as Record<string, unknown>;
+  return (typeof g["sessionStorage"] !== "undefined" ? g["sessionStorage"] : null) as SS | null;
+}
+
+export function saveWizardState(snapshot: WizardSnapshot) {
+  try { ss()?.setItem(WIZARD_SS_KEY, JSON.stringify(snapshot)); } catch {}
+}
+
+export function loadWizardState(): WizardSnapshot | null {
+  try {
+    const raw = ss()?.getItem(WIZARD_SS_KEY);
+    return raw ? (JSON.parse(raw) as WizardSnapshot) : null;
+  } catch { return null; }
+}
+
+export function clearWizardState() {
+  try { ss()?.removeItem(WIZARD_SS_KEY); } catch {}
+}
+
+export function buildFormDataFromSnapshot(s: WizardSnapshot): FormData {
+  const fd = new FormData();
+  fd.append("name", s.leagueName);
+  fd.append("teamCount", s.teamCount.toString());
+  fd.append("templateId", s.selectedTemplate);
+  fd.append("draftRounds", s.draftRounds.toString());
+  if (s.draftDate && s.draftTime) {
+    fd.append("draftDateTime", new Date(`${s.draftDate}T${s.draftTime}`).toISOString());
+  }
+  fd.append("draftTimerMode", s.timerMode);
+  fd.append("draftSpeed", s.draftSpeed);
+  fd.append("overnightPauseMode", s.overnightMode);
+  if (s.overnightMode !== "none") {
+    fd.append("overnightPauseStart", s.overnightStart);
+    fd.append("overnightPauseEnd", s.overnightEnd);
+    fd.append("overnightPauseTimezone", s.overnightTimezone);
+  }
+  (["pointsFor1st", "pointsFor2nd", "pointsFor3rd", "pointsFor4th",
+    "pointsFor5th", "pointsFor6th", "pointsFor7th", "pointsFor8th"] as const
+  ).forEach((k) => fd.append(k, s.scoringRules[k].toString()));
+  for (const id of s.selectedSports) fd.append("sportsSeasons", id);
+  if (s.joinAsPlayer) fd.append("joinAsPlayer", "on");
+  if (s.userTimezone) fd.append("userTimezone", s.userTimezone);
+  return fd;
+}
diff --git a/app/models/__tests__/sports-season.test.ts b/app/models/__tests__/sports-season.test.ts
index 34c71ff..5b04078 100644
--- a/app/models/__tests__/sports-season.test.ts
+++ b/app/models/__tests__/sports-season.test.ts
@@ -36,12 +36,12 @@ const pastStart = "2020-01-01";
 const pastEnd = "2020-12-31";
 
 const mockSeasons = [
-  { id: "season-1", name: "2025 NBA Playoffs", draftOn: today, draftOff: future, year: 2025, status: "upcoming", sport: { name: "NBA" } },
-  { id: "season-2", name: "2025 F1 Season", draftOn: today, draftOff: future, year: 2025, status: "upcoming", sport: { name: "F1" } },
-  { id: "season-3", name: "2024 Old Golf", draftOn: pastStart, draftOff: pastEnd, year: 2024, status: "completed", sport: { name: "Golf" } },
+  { id: "season-1", name: "2025 NBA Playoffs", draftOn: today, draftOff: future, year: 2025, status: "upcoming", sport: { name: "NBA" }, participants: [] },
+  { id: "season-2", name: "2025 F1 Season", draftOn: today, draftOff: future, year: 2025, status: "upcoming", sport: { name: "F1" }, participants: [] },
+  { id: "season-3", name: "2024 Old Golf", draftOn: pastStart, draftOff: pastEnd, year: 2024, status: "completed", sport: { name: "Golf" }, participants: [] },
 ];
 
-function makeMockDb(seasons: typeof mockSeasons) {
+function makeMockDb(seasons: Record<string, unknown>[]) {
   return {
     query: {
       sportsSeasons: {
diff --git a/app/models/sports-season.ts b/app/models/sports-season.ts
index e6a5e17..ccb6470 100644
--- a/app/models/sports-season.ts
+++ b/app/models/sports-season.ts
@@ -122,10 +122,10 @@ export async function findAllSportsSeasons(): Promise<SportsSeasonListItem[]> {
   });
 }
 
-export async function findDraftableSportsSeasons(): Promise<SportsSeason[]> {
+export async function findDraftableSportsSeasons() {
   const db = database();
   const today = sql`CURRENT_DATE`;
-  return await db.query.sportsSeasons.findMany({
+  const seasons = await db.query.sportsSeasons.findMany({
     where: (ss, { and }) =>
       and(
         lte(ss.draftOn, today),
@@ -134,8 +134,13 @@ export async function findDraftableSportsSeasons(): Promise<SportsSeason[]> {
     orderBy: (sportsSeasons, { desc, asc }) => [desc(sportsSeasons.year), asc(sportsSeasons.name)],
     with: {
       sport: true,
+      participants: { columns: { id: true } },
     },
   });
+  return seasons.map(({ participants, ...s }) => ({
+    ...s,
+    participantCount: participants.length,
+  }));
 }
 
 export async function updateSportsSeason(
diff --git a/app/routes.ts b/app/routes.ts
index 5d20319..8a28d70 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -4,6 +4,7 @@ export default [
   index("routes/home.tsx"),
   route("i/:inviteCode", "routes/i.$inviteCode.tsx"),
   route("leagues/new", "routes/leagues/new.tsx"),
+  route("leagues/creating", "routes/leagues/creating.tsx"),
   route("leagues/:leagueId", "routes/leagues/$leagueId.tsx"),
   route("leagues/:leagueId/settings", "routes/leagues/$leagueId.settings.tsx"),
   route("leagues/:leagueId/audit-log", "routes/leagues/$leagueId.audit-log.tsx"),
diff --git a/app/routes/leagues/$leagueId.settings.tsx b/app/routes/leagues/$leagueId.settings.tsx
index d473ee3..1b5e74d 100644
--- a/app/routes/leagues/$leagueId.settings.tsx
+++ b/app/routes/leagues/$leagueId.settings.tsx
@@ -27,6 +27,7 @@ import { clearAllQueuesForSeason } from "~/models/draft-queue";
 import { deleteSeasonTimers } from "~/models/draft-timer";
 import { logCommissionerAction } from "~/models/audit-log";
 import { parseDraftSpeed } from "~/lib/draft-timer";
+import { type ScoringRules, DEFAULT_SCORING_RULES } from "~/lib/scoring-types";
 import type { Route } from "./+types/$leagueId.settings";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
@@ -65,7 +66,10 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "~/components/ui/alert-dialog";
-import { ScoringRulesEditor } from "~/components/scoring/ScoringRulesEditor";
+import { TimerModeSelector } from "~/components/league/TimerModeSelector";
+import { DraftSpeedPicker } from "~/components/league/DraftSpeedPicker";
+import { OvernightPauseSettings } from "~/components/league/OvernightPauseSettings";
+import { ScoringPresetPicker, OMNIFANTASY_SCORING } from "~/components/league/ScoringPresetPicker";
 import { toast } from "sonner";
 
 function isValidHHMM(s: string): boolean {
@@ -315,42 +319,6 @@ export async function action(args: Route.ActionArgs) {
     return { error: "No active season found" };
   }
 
-  if (intent === "update-sports") {
-    if (season.status !== "pre_draft") {
-      return { error: "Cannot modify sports after draft has started" };
-    }
-
-    const selectedSports = formData.getAll("sportsSeasons");
-    const currentSportIds = new Set(
-      season.seasonSports?.map((s) => s.sportsSeason.id) || []
-    );
-    const newSportIds = new Set(selectedSports as string[]);
-
-    // Remove sports that are no longer selected
-    for (const sportId of currentSportIds) {
-      if (!newSportIds.has(sportId)) {
-        await unlinkSportFromSeason(season.id, sportId);
-      }
-    }
-
-    // Add newly selected sports
-    const sportsToAdd = [];
-    for (const sportId of newSportIds) {
-      if (!currentSportIds.has(sportId)) {
-        sportsToAdd.push({
-          seasonId: season.id,
-          sportsSeasonId: sportId as string,
-        });
-      }
-    }
-
-    if (sportsToAdd.length > 0) {
-      await linkMultipleSportsToSeason(sportsToAdd);
-    }
-
-    return { success: true };
-  }
-
   if (intent === "set-draft-order") {
     if (season.status !== "pre_draft") {
       return { error: "Cannot modify draft order after draft has started" };
@@ -857,6 +825,43 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [timerMode, setTimerMode] = useState<"chess_clock" | "standard">(season?.draftTimerMode ?? "chess_clock");
   const [overnightMode, setOvernightMode] = useState<"none" | "league" | "per_user">(season?.overnightPauseMode ?? "none");
+  const [overnightStart, setOvernightStart] = useState(season?.overnightPauseStart ?? "23:00");
+  const [overnightEnd, setOvernightEnd] = useState(season?.overnightPauseEnd ?? "07:00");
+  const [overnightTimezone, setOvernightTimezone] = useState(season?.overnightPauseTimezone ?? commishTimezone ?? "");
+  const [scoringPreset, setScoringPreset] = useState<"brackt" | "omnifantasy" | "custom">(() => {
+    const r: ScoringRules = {
+      pointsFor1st: season?.pointsFor1st ?? DEFAULT_SCORING_RULES.pointsFor1st,
+      pointsFor2nd: season?.pointsFor2nd ?? DEFAULT_SCORING_RULES.pointsFor2nd,
+      pointsFor3rd: season?.pointsFor3rd ?? DEFAULT_SCORING_RULES.pointsFor3rd,
+      pointsFor4th: season?.pointsFor4th ?? DEFAULT_SCORING_RULES.pointsFor4th,
+      pointsFor5th: season?.pointsFor5th ?? DEFAULT_SCORING_RULES.pointsFor5th,
+      pointsFor6th: season?.pointsFor6th ?? DEFAULT_SCORING_RULES.pointsFor6th,
+      pointsFor7th: season?.pointsFor7th ?? DEFAULT_SCORING_RULES.pointsFor7th,
+      pointsFor8th: season?.pointsFor8th ?? DEFAULT_SCORING_RULES.pointsFor8th,
+    };
+    if (Object.entries(DEFAULT_SCORING_RULES).every(([k, v]) => r[k as keyof ScoringRules] === v)) return "brackt";
+    if (Object.entries(OMNIFANTASY_SCORING).every(([k, v]) => r[k as keyof ScoringRules] === v)) return "omnifantasy";
+    return "custom";
+  });
+  const [scoringRules, setScoringRules] = useState<ScoringRules>({
+    pointsFor1st: season?.pointsFor1st ?? DEFAULT_SCORING_RULES.pointsFor1st,
+    pointsFor2nd: season?.pointsFor2nd ?? DEFAULT_SCORING_RULES.pointsFor2nd,
+    pointsFor3rd: season?.pointsFor3rd ?? DEFAULT_SCORING_RULES.pointsFor3rd,
+    pointsFor4th: season?.pointsFor4th ?? DEFAULT_SCORING_RULES.pointsFor4th,
+    pointsFor5th: season?.pointsFor5th ?? DEFAULT_SCORING_RULES.pointsFor5th,
+    pointsFor6th: season?.pointsFor6th ?? DEFAULT_SCORING_RULES.pointsFor6th,
+    pointsFor7th: season?.pointsFor7th ?? DEFAULT_SCORING_RULES.pointsFor7th,
+    pointsFor8th: season?.pointsFor8th ?? DEFAULT_SCORING_RULES.pointsFor8th,
+  });
+  const initTimerMode = season?.draftTimerMode ?? "chess_clock";
+  const [draftSpeed, setDraftSpeed] = useState(() => {
+    if (initTimerMode === "standard") return season?.draftIncrementTime?.toString() ?? "90";
+    if (season?.draftInitialTime === 60 && season?.draftIncrementTime === 10) return "fast";
+    if (season?.draftInitialTime === 120 && season?.draftIncrementTime === 15) return "standard";
+    if (season?.draftInitialTime === 28800 && season?.draftIncrementTime === 3600) return "slow";
+    if (season?.draftInitialTime === 43200 && season?.draftIncrementTime === 3600) return "very-slow";
+    return "standard";
+  });
   const [selectedSports, setSelectedSports] = useState<Set<string>>(
     new Set(season?.seasonSports?.map((s) => s.sportsSeason.id) || [])
   );
@@ -1194,76 +1199,15 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="draftTimerMode">Timer Mode</Label>
-              <select
-                id="draftTimerMode"
-                name="draftTimerMode"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                value={timerMode}
-                onChange={(e) => setTimerMode(e.target.value as "chess_clock" | "standard")}
-                disabled={!canEditDraftRounds}
-                required
-              >
-                <option value="chess_clock">Chess Clock (accumulating bank)</option>
-                <option value="standard">Standard (per-pick countdown)</option>
-              </select>
-              <p className="text-sm text-muted-foreground">
-                Chess Clock: unused time carries over between picks. Standard: timer resets each pick.
-              </p>
+              <Label>Timer Mode</Label>
+              <TimerModeSelector value={timerMode} onChange={setTimerMode} disabled={!canEditDraftRounds} />
+              <input type="hidden" name="draftTimerMode" value={timerMode} />
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="draftSpeed">Draft Speed</Label>
-              <select
-                id="draftSpeed"
-                name="draftSpeed"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                defaultValue={
-                  timerMode === "standard"
-                    ? (season?.draftIncrementTime?.toString() ?? "90")
-                    : season?.draftInitialTime === 60 && season?.draftIncrementTime === 10
-                    ? "fast"
-                    : season?.draftInitialTime === 120 && season?.draftIncrementTime === 15
-                    ? "standard"
-                    : season?.draftInitialTime === 28800 && season?.draftIncrementTime === 3600
-                    ? "slow"
-                    : season?.draftInitialTime === 43200 && season?.draftIncrementTime === 3600
-                    ? "very-slow"
-                    : "standard"
-                }
-                key={timerMode}
-                disabled={!canEditDraftRounds}
-                required
-              >
-                {timerMode === "standard" ? (
-                  <>
-                    <option value="15">15 seconds</option>
-                    <option value="30">30 seconds</option>
-                    <option value="60">1 minute</option>
-                    <option value="90">90 seconds (default)</option>
-                    <option value="120">2 minutes</option>
-                    <option value="900">15 minutes</option>
-                    <option value="3600">1 hour</option>
-                    <option value="7200">2 hours</option>
-                    <option value="14400">4 hours</option>
-                    <option value="28800">8 hours</option>
-                    <option value="43200">12 hours</option>
-                  </>
-                ) : (
-                  <>
-                    <option value="fast">Fast (1 min + 10 sec)</option>
-                    <option value="standard">Standard (2 min + 15 sec)</option>
-                    <option value="slow">Slow (8 hours + 1 hour)</option>
-                    <option value="very-slow">Very Slow (12 hours + 1 hour)</option>
-                  </>
-                )}
-              </select>
-              <p className="text-sm text-muted-foreground">
-                {timerMode === "standard"
-                  ? "Time per pick — resets to this value after each selection"
-                  : "Initial time bank + increment added after each pick"}
-              </p>
-
+              <Label>Draft Speed</Label>
+              <DraftSpeedPicker timerMode={timerMode} value={draftSpeed} onChange={setDraftSpeed} disabled={!canEditDraftRounds} />
+              <input type="hidden" name="draftSpeed" value={draftSpeed} />
             </div>
           </CardContent>
         </Card>
@@ -1277,142 +1221,48 @@ export default function LeagueSettings({ loaderData, actionData }: Route.Compone
               Autodraft will still fire for teams that have it enabled.
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="overnightPauseMode">Pause Mode</Label>
-              <select
-                id="overnightPauseMode"
-                name="overnightPauseMode"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                value={overnightMode}
-                onChange={(e) => setOvernightMode(e.target.value as "none" | "league" | "per_user")}
-                disabled={!canEditDraftRounds}
-              >
-                <option value="none">No pause — timer always runs</option>
-                <option value="league">League-wide — one timezone for everyone</option>
-                <option value="per_user">Per-user — each player&apos;s own timezone</option>
-              </select>
-              <p className="text-sm text-muted-foreground">
-                Per-user mode: each player sets their timezone in their profile. League-wide mode: one timezone applies to all teams.
-              </p>
-              {overnightMode === "per_user" && (
-                <div className={`rounded-md border px-3 py-2.5 text-sm space-y-1 ${commishTimezone ? "border-border bg-muted/40 text-muted-foreground" : "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400"}`}>
-                  <p>Each player&apos;s profile timezone is used to determine their overnight window. Players without one set fall back to the timezone below.</p>
-                  {!commishTimezone && (
-                    <p>
-                      You haven&apos;t set your timezone yet —{" "}
-                      <a href="/profile" className="font-medium underline underline-offset-2">
-                        set it in your profile
-                      </a>
-                      .
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="overnightPauseStart">Pause starts at</Label>
-                <input
-                  id="overnightPauseStart"
-                  name="overnightPauseStart"
-                  type="time"
-                  defaultValue={season?.overnightPauseStart ?? "23:00"}
-                  disabled={!canEditDraftRounds}
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="overnightPauseEnd">Pause ends at</Label>
-                <input
-                  id="overnightPauseEnd"
-                  name="overnightPauseEnd"
-                  type="time"
-                  defaultValue={season?.overnightPauseEnd ?? "07:00"}
-                  disabled={!canEditDraftRounds}
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="overnightPauseTimezone">
-                Timezone
-                <span className="text-muted-foreground font-normal ml-1">
-                  (league mode) or fallback for users without one set (per-user mode)
-                </span>
-              </Label>
-              <select
-                id="overnightPauseTimezone"
-                name="overnightPauseTimezone"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                defaultValue={season?.overnightPauseTimezone ?? commishTimezone ?? ""}
-                disabled={!canEditDraftRounds}
-              >
-                <option value="">Select a timezone…</option>
-                <optgroup label="North America">
-                  <option value="America/New_York">Eastern Time (ET)</option>
-                  <option value="America/Chicago">Central Time (CT)</option>
-                  <option value="America/Denver">Mountain Time (MT)</option>
-                  <option value="America/Phoenix">Mountain Time – Arizona (no DST)</option>
-                  <option value="America/Los_Angeles">Pacific Time (PT)</option>
-                  <option value="America/Anchorage">Alaska Time (AKT)</option>
-                  <option value="Pacific/Honolulu">Hawaii Time (HT)</option>
-                  <option value="America/Toronto">Eastern Time – Toronto</option>
-                  <option value="America/Vancouver">Pacific Time – Vancouver</option>
-                  <option value="America/Winnipeg">Central Time – Winnipeg</option>
-                  <option value="America/Halifax">Atlantic Time – Halifax</option>
-                  <option value="America/Mexico_City">Central Time – Mexico City</option>
-                </optgroup>
-                <optgroup label="South America">
-                  <option value="America/Sao_Paulo">Brasília Time (BRT)</option>
-                  <option value="America/Argentina/Buenos_Aires">Argentina Time (ART)</option>
-                  <option value="America/Bogota">Colombia Time (COT)</option>
-                  <option value="America/Santiago">Chile Time (CLT)</option>
-                </optgroup>
-                <optgroup label="Europe">
-                  <option value="Europe/London">GMT / British Time (GMT/BST)</option>
-                  <option value="Europe/Dublin">Irish Time (GMT/IST)</option>
-                  <option value="Europe/Paris">Central European Time (CET/CEST)</option>
-                  <option value="Europe/Berlin">Central European Time – Berlin</option>
-                  <option value="Europe/Moscow">Moscow Time (MSK)</option>
-                </optgroup>
-                <optgroup label="Asia / Middle East">
-                  <option value="Asia/Dubai">Gulf Standard Time (GST)</option>
-                  <option value="Asia/Kolkata">India Standard Time (IST)</option>
-                  <option value="Asia/Singapore">Singapore Time (SGT)</option>
-                  <option value="Asia/Shanghai">China Standard Time (CST)</option>
-                  <option value="Asia/Tokyo">Japan Standard Time (JST)</option>
-                  <option value="Asia/Seoul">Korea Standard Time (KST)</option>
-                </optgroup>
-                <optgroup label="Oceania">
-                  <option value="Australia/Sydney">Australian Eastern Time (AEST/AEDT)</option>
-                  <option value="Australia/Perth">Australian Western Time (AWST)</option>
-                  <option value="Pacific/Auckland">New Zealand Time (NZST/NZDT)</option>
-                </optgroup>
-                <optgroup label="UTC">
-                  <option value="UTC">UTC (Coordinated Universal Time)</option>
-                </optgroup>
-              </select>
-            </div>
+          <CardContent>
+            <OvernightPauseSettings
+              show={true}
+              mode={overnightMode}
+              onModeChange={setOvernightMode}
+              start={overnightStart}
+              onStartChange={setOvernightStart}
+              end={overnightEnd}
+              onEndChange={setOvernightEnd}
+              timezone={overnightTimezone}
+              onTimezoneChange={setOvernightTimezone}
+              commishTimezone={commishTimezone}
+              disabled={!canEditDraftRounds}
+            />
+            <input type="hidden" name="overnightPauseMode" value={overnightMode} />
+            <input type="hidden" name="overnightPauseStart" value={overnightStart} />
+            <input type="hidden" name="overnightPauseEnd" value={overnightEnd} />
+            <input type="hidden" name="overnightPauseTimezone" value={overnightTimezone} />
           </CardContent>
         </Card>
 
         {/* Scoring Rules */}
-        <ScoringRulesEditor
-          scoringRules={season ? {
-            pointsFor1st: season.pointsFor1st,
-            pointsFor2nd: season.pointsFor2nd,
-            pointsFor3rd: season.pointsFor3rd,
-            pointsFor4th: season.pointsFor4th,
-            pointsFor5th: season.pointsFor5th,
-            pointsFor6th: season.pointsFor6th,
-            pointsFor7th: season.pointsFor7th,
-            pointsFor8th: season.pointsFor8th,
-          } : undefined}
-          disabled={!season || season.status !== "pre_draft"}
-        />
+        <Card>
+          <CardHeader>
+            <CardTitle>Scoring Rules</CardTitle>
+            <CardDescription>
+              Points awarded for each finishing position in each sports season.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ScoringPresetPicker
+              preset={scoringPreset}
+              onPresetChange={setScoringPreset}
+              rules={scoringRules}
+              onRulesChange={setScoringRules}
+              disabled={!season || season.status !== "pre_draft"}
+            />
+            {(Object.entries(scoringRules) as [string, number][]).map(([k, v]) => (
+              <input key={k} type="hidden" name={k} value={v} />
+            ))}
+          </CardContent>
+        </Card>
 
         {/* Sports Seasons */}
         <Card>
diff --git a/app/routes/leagues/$leagueId.standings.$seasonId.tsx b/app/routes/leagues/$leagueId.standings.$seasonId.tsx
index 6144bd5..c21bede 100644
--- a/app/routes/leagues/$leagueId.standings.$seasonId.tsx
+++ b/app/routes/leagues/$leagueId.standings.$seasonId.tsx
@@ -103,11 +103,10 @@ export async function loader(args: Route.LoaderArgs) {
       recentScoreEvents: enrichedScoreEvents,
     };
   } catch (error) {
+    if (error instanceof Response) {
+      throw error;
+    }
     logger.error("Error loading standings:", error);
-    logger.error("Error details:", {
-      message: error instanceof Error ? error.message : String(error),
-      stack: error instanceof Error ? error.stack : undefined,
-    });
     throw error;
   }
 }
diff --git a/app/routes/leagues/creating.tsx b/app/routes/leagues/creating.tsx
new file mode 100644
index 0000000..644b296
--- /dev/null
+++ b/app/routes/leagues/creating.tsx
@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+import { redirect, useFetcher } from "react-router";
+import { Loader2 } from "lucide-react";
+import { auth } from "~/lib/auth.server";
+import { loadWizardState, clearWizardState, buildFormDataFromSnapshot } from "~/lib/wizard-state";
+import type { Route } from "./+types/creating";
+
+export async function loader(args: Route.LoaderArgs) {
+  const session = await auth.api.getSession({ headers: args.request.headers });
+  if (!session?.user) return redirect("/leagues/new");
+  return null;
+}
+
+export function meta(): Route.MetaDescriptors {
+  return [{ title: "Creating League… - Brackt" }];
+}
+
+export default function CreatingLeague() {
+  const fetcher = useFetcher();
+
+  useEffect(() => {
+    const saved = loadWizardState();
+    if (!saved) {
+      window.location.replace("/leagues/new");
+      return;
+    }
+    fetcher.submit(buildFormDataFromSnapshot(saved), { method: "post", action: "/leagues/new" });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Clear saved state only after a confirmed failure so the user can retry if
+  // the server returns an error (a successful submit navigates away immediately).
+  useEffect(() => {
+    if (fetcher.state === "idle" && fetcher.data !== null && fetcher.data !== undefined) {
+      clearWizardState();
+    }
+  }, [fetcher.state, fetcher.data]);
+
+  const submitError =
+    fetcher.data && typeof fetcher.data === "object" && "error" in fetcher.data
+      ? String((fetcher.data as { error: unknown }).error)
+      : null;
+
+  if (submitError) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center space-y-4 max-w-sm px-4">
+          <p className="text-destructive font-medium">{submitError}</p>
+          <a href="/leagues/new" className="text-sm underline text-muted-foreground">
+            Go back and try again
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center">
+      <div className="text-center space-y-4">
+        <Loader2 className="h-10 w-10 animate-spin mx-auto text-primary" />
+        <div>
+          <p className="text-lg font-semibold">Creating your league…</p>
+          <p className="text-sm text-muted-foreground mt-1">Logged in successfully. Just a moment.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/routes/leagues/new.tsx b/app/routes/leagues/new.tsx
index eb79e39..9744b08 100644
--- a/app/routes/leagues/new.tsx
+++ b/app/routes/leagues/new.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
-import { Form, redirect, Link } from "react-router";
+import { redirect, useFetcher } from "react-router";
 import { auth } from "~/lib/auth.server";
+import { authClient } from "~/lib/auth-client";
 import type { Route } from "./+types/new";
 
 import { logger } from "~/lib/logger";
@@ -11,44 +12,87 @@ import { linkMultipleSportsToSeason } from "~/models/season-sport";
 import { createManyTeams } from "~/models/team";
 import { findActiveSeasonTemplates, findSeasonTemplateWithSportsSeasons } from "~/models/season-template";
 import { findDraftableSportsSeasons } from "~/models/sports-season";
-import { findUserById } from "~/models/user";
+import { findUserById, updateUser } from "~/models/user";
 import { generateUniqueTeamNames } from "~/utils/team-names";
 import { format } from "date-fns";
-import { CalendarIcon, Check } from "lucide-react";
-import { Button } from "~/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
+import { CalendarClock, Check, Star, Swords, Trophy } from "lucide-react";
 import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { Checkbox } from "~/components/ui/checkbox";
-import { Calendar } from "~/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/ui/popover";
 import { cn } from "~/lib/utils";
-import { parseDraftSpeed } from "~/lib/draft-timer";
-import { ScoringRulesEditor } from "~/components/scoring/ScoringRulesEditor";
-import { TimezoneSelect } from "~/components/league/TimezoneSelect";
+import { parseDraftSpeed, formatTime12h } from "~/lib/draft-timer";
+import { TIMEZONE_OPTIONS } from "~/components/league/TimezoneSelect";
+import { saveWizardState, buildFormDataFromSnapshot } from "~/lib/wizard-state";
+import { type ScoringRules, DEFAULT_SCORING_RULES } from "~/lib/scoring-types";
+import { SportIcon } from "~/components/league/SportIcon";
+import { TimerModeSelector } from "~/components/league/TimerModeSelector";
+import { DraftSpeedPicker, formatDraftSpeed, isSlowPreset } from "~/components/league/DraftSpeedPicker";
+import { OvernightPauseSettings } from "~/components/league/OvernightPauseSettings";
+import { ScoringPresetPicker, PLACEMENT_LABELS } from "~/components/league/ScoringPresetPicker";
+import { WizardStepper } from "~/components/league/WizardStepper";
+import { ReviewSection } from "~/components/league/ReviewSection";
+import { StepperInput } from "~/components/league/StepperInput";
+import { WizardAuthForm } from "~/components/league/WizardAuthForm";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type SportSeason = {
+  id: string;
+  name: string;
+  year: number;
+  scoringType: string;
+  sport: { id: string; name: string; type: string; slug: string; iconUrl: string | null };
+  participantCount: number;
+};
+
+type Template = {
+  id: string;
+  name: string;
+  year: number;
+  description: string | null;
+  sportsSeasonIds: string[];
+};
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const CATEGORY_ORDER = [
+  "Basketball", "Football", "Baseball", "Hockey",
+  "Soccer", "Motorsport", "Golf", "Tennis", "Other",
+];
+
+function defaultRounds(count: number): number {
+  if (count <= 0) return 3;
+  const pct = count >= 20 ? 1.25 : 1.33;
+  return Math.max(count + 3, Math.ceil(count * pct));
+}
+
+
+
+
+function getSportCategory(sportName: string): string {
+  const n = sportName.toLowerCase();
+  if (n.includes("basketball") || n === "nba" || n === "wnba" || n === "euroleague" || n.includes("ncaa")) return "Basketball";
+  if (n === "nfl" || n === "cfl" || n === "xfl" || (n.includes("football") && !n.includes("soccer"))) return "Football";
+  if (n === "mlb" || n.includes("baseball") || n === "kbo" || n === "npb" || n.includes("little league")) return "Baseball";
+  if (n === "nhl" || n === "ahl" || n === "pwhl" || n.includes("hockey") || n.includes("iihf")) return "Hockey";
+  if (n.includes("soccer") || n.includes("mls") || n.includes("premier") || n.includes("champions")) return "Soccer";
+  if (n === "f1" || n.includes("formula") || n.includes("indy") || n.includes("nascar") || n.includes("racing")) return "Motorsport";
+  if (n.includes("golf") || n.includes("pga")) return "Golf";
+  if (n.includes("tennis") || n.includes("atp") || n.includes("wta")) return "Tennis";
+  return "Other";
+}
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
 
 export function meta(): Route.MetaDescriptors {
   return [{ title: "New League - Brackt" }];
 }
 
+// ─── Loader ───────────────────────────────────────────────────────────────────
+
 export async function loader(args: Route.LoaderArgs) {
   const session = await auth.api.getSession({ headers: args.request.headers });
   const userId = session?.user.id ?? null;
@@ -58,12 +102,12 @@ export async function loader(args: Route.LoaderArgs) {
 
   const templatesWithSports = await Promise.all(
     templates.map(async (template) => {
-      const templateWithSports = await findSeasonTemplateWithSportsSeasons(template.id);
+      const t = await findSeasonTemplateWithSportsSeasons(template.id);
       return {
         ...template,
-        sportsSeasonIds: templateWithSports?.seasonTemplateSports?.map(
+        sportsSeasonIds: t?.seasonTemplateSports?.map(
           (ts: { sportsSeason: { id: string } }) => ts.sportsSeason.id
-        ) || []
+        ) ?? [],
       };
     })
   );
@@ -73,12 +117,15 @@ export async function loader(args: Route.LoaderArgs) {
     : null;
 
   return {
-    templates: templatesWithSports,
-    allSportsSeasons: allSportsSeasons as Array<typeof allSportsSeasons[0] & { sport: { id: string; name: string; type: string; slug: string } }>,
+    templates: templatesWithSports as Template[],
+    allSportsSeasons: allSportsSeasons as SportSeason[],
     commishTimezone,
+    isAuthenticated: userId !== null,
   };
 }
 
+// ─── Action ───────────────────────────────────────────────────────────────────
+
 export async function action(args: Route.ActionArgs) {
   const session = await auth.api.getSession({ headers: args.request.headers });
   const userId = session?.user.id ?? null;
@@ -208,6 +255,11 @@ export async function action(args: Route.ActionArgs) {
 
     await createManyTeams(teams);
 
+    const userTimezone = formData.get("userTimezone");
+    if (typeof userTimezone === "string" && userTimezone) {
+      await updateUser(userId, { timezone: userTimezone });
+    }
+
     return redirect(`/leagues/${league.id}`);
   } catch (error) {
     logger.error("Error creating league:", error);
@@ -215,437 +267,1014 @@ export async function action(args: Route.ActionArgs) {
   }
 }
 
-export default function NewLeague({ loaderData, actionData }: Route.ComponentProps) {
-  const { templates, allSportsSeasons, commishTimezone } = loaderData;
-  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
-  const [selectedSports, setSelectedSports] = useState<Set<string>>(new Set());
-  const [draftRounds, setDraftRounds] = useState<number>(20);
-  const [draftDate, setDraftDate] = useState<Date>();
-  const [draftTime, setDraftTime] = useState<string>("");
-  const [timerMode, setTimerMode] = useState<"chess_clock" | "standard">("chess_clock");
-  const [overnightMode, setOvernightMode] = useState<"none" | "league" | "per_user">("none");
-  const [overnightTimezone, setOvernightTimezone] = useState<string>(commishTimezone ?? "");
+// ─── Step 1: League Basics ────────────────────────────────────────────────────
 
-  useEffect(() => {
-    if (!overnightTimezone) {
-      const detected = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      if (detected) setOvernightTimezone(detected);
-    }
-  }, [overnightTimezone]);
-
-  const handleSportToggle = (sportId: string) => {
-    const newSelected = new Set(selectedSports);
-    if (newSelected.has(sportId)) {
-      newSelected.delete(sportId);
-    } else {
-      newSelected.add(sportId);
-    }
-    setSelectedSports(newSelected);
-  };
-
-  const handleTemplateClick = (templateId: string, sportsSeasonIds: string[]) => {
-    setSelectedTemplate(templateId);
-    setSelectedSports(new Set(sportsSeasonIds));
-  };
-
-  const sportsCount = selectedSports.size;
-  const minRounds = sportsCount;
-  const recommendedRounds = Math.ceil(sportsCount * 1.25);
-  const flexSpots = Math.max(0, draftRounds - sportsCount);
+function Step1LeagueBasics({
+  leagueName,
+  setLeagueName,
+  teamCount,
+  setTeamCount,
+  joinAsPlayer,
+  setJoinAsPlayer,
+  error,
+  onNext,
+}: {
+  leagueName: string;
+  setLeagueName: (v: string) => void;
+  teamCount: number;
+  setTeamCount: (v: number) => void;
+  joinAsPlayer: boolean;
+  setJoinAsPlayer: (v: boolean) => void;
+  error: string | null;
+  onNext: () => void;
+}) {
+  const [nameTouched, setNameTouched] = useState(false);
+  const nameInvalid = nameTouched && !leagueName.trim();
 
   return (
-    <div className="container max-w-2xl mx-auto py-8 px-4">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-3xl">Start a New League</CardTitle>
-          <CardDescription>
-            Create your fantasy league and invite your friends to compete.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form method="post" className="space-y-6">
-            <div className="space-y-2">
-              <Label htmlFor="name">League Name</Label>
-              <Input
-                id="name"
-                name="name"
-                type="text"
-                placeholder="Enter league name"
-                required
-                minLength={3}
-                maxLength={50}
-              />
-            </div>
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold flex items-center gap-2">
+          <span className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold shrink-0">1</span>
+          League Basics
+        </h2>
+      </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="teamCount">Number of Teams</Label>
-              <Select name="teamCount" defaultValue="12" required>
-                <SelectTrigger id="teamCount">
-                  <SelectValue placeholder="Select number of teams" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="6">6 Teams</SelectItem>
-                  <SelectItem value="7">7 Teams</SelectItem>
-                  <SelectItem value="8">8 Teams</SelectItem>
-                  <SelectItem value="9">9 Teams</SelectItem>
-                  <SelectItem value="10">10 Teams</SelectItem>
-                  <SelectItem value="11">11 Teams</SelectItem>
-                  <SelectItem value="12">12 Teams</SelectItem>
-                  <SelectItem value="13">13 Teams</SelectItem>
-                  <SelectItem value="14">14 Teams</SelectItem>
-                  <SelectItem value="15">15 Teams</SelectItem>
-                  <SelectItem value="16">16 Teams</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-sm text-muted-foreground">
-                Choose between 6 and 16 teams
-              </p>
-            </div>
+      <div className="space-y-2">
+        <Label htmlFor="name">League Name <span className="text-destructive">*</span></Label>
+        <Input
+          id="name"
+          type="text"
+          placeholder="e.g. Friday Night Drafters"
+          value={leagueName}
+          onChange={(e) => setLeagueName(e.target.value)}
+          onBlur={() => setNameTouched(true)}
+          minLength={3}
+          maxLength={50}
+          required
+          aria-invalid={nameInvalid || undefined}
+        />
+      </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="draftRounds">Draft Rounds</Label>
-              <Select
-                name="draftRounds"
-                value={draftRounds.toString()}
-                onValueChange={(value) => setDraftRounds(parseInt(value))}
-                required
-              >
-                <SelectTrigger id="draftRounds">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {Array.from({ length: 50 }, (_, i) => i + 1)
-                    .filter(num => num >= minRounds)
-                    .map((num) => (
-                      <SelectItem
-                        key={num}
-                        value={num.toString()}
-                      >
-                        {num} Round{num !== 1 ? 's' : ''}
-                        {num === recommendedRounds && ' (recommended)'}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
-              <div className="space-y-1">
-                <p className="text-sm text-muted-foreground">
-                  Minimum: {minRounds} (number of sports selected)
-                  {recommendedRounds > minRounds && ` • Recommended: ${recommendedRounds}`}
-                </p>
-                {sportsCount > 0 && draftRounds < sportsCount && (
-                  <p className="text-sm font-medium text-destructive">
-                    ⚠️ You need at least {sportsCount} rounds for the {sportsCount} sports selected
-                  </p>
-                )}
-                {sportsCount > 0 && draftRounds >= sportsCount && (
-                  <p className="text-sm font-medium text-primary">
-                    Flex Spots: {flexSpots}
-                  </p>
-                )}
-              </div>
-            </div>
+      <div className="space-y-2">
+        <Label>Number of Teams</Label>
+        <StepperInput
+          value={teamCount}
+          min={6}
+          max={16}
+          onChange={setTeamCount}
+          decrementLabel="Decrease team count"
+          incrementLabel="Increase team count"
+        />
+        <p className="text-sm text-muted-foreground">Choose between 6 and 16 teams</p>
+      </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="draftDate">Draft Date & Time</Label>
-              <div className="grid gap-2 sm:grid-cols-2">
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant={"outline"}
-                      className={cn(
-                        "justify-start text-left font-normal",
-                        !draftDate && "text-muted-foreground"
-                      )}
-                    >
-                      <CalendarIcon className="mr-2 h-4 w-4" />
-                      {draftDate ? format(draftDate, "PPP") : <span>Pick a date</span>}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-auto p-0">
-                    <Calendar
-                      mode="single"
-                      selected={draftDate}
-                      onSelect={setDraftDate}
-                      initialFocus
-                      disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
-                    />
-                  </PopoverContent>
-                </Popover>
-                <Input
-                  type="time"
-                  value={draftTime}
-                  onChange={(e) => setDraftTime(e.target.value)}
-                  placeholder="Select time"
-                />
-              </div>
-              {draftDate && draftTime && (
-                <input
-                  type="hidden"
-                  name="draftDateTime"
-                  value={new Date(`${format(draftDate, "yyyy-MM-dd")}T${draftTime}`).toISOString()}
-                />
-              )}
-              <p className="text-sm text-muted-foreground">
-                You must set a draft date and time before starting the draft
-              </p>
-            </div>
+      <div className="flex items-center gap-3">
+        <Checkbox
+          id="commissionerOnly"
+          checked={!joinAsPlayer}
+          onCheckedChange={(v) => setJoinAsPlayer(v !== true)}
+        />
+        <Label htmlFor="commissionerOnly" className="font-normal cursor-pointer text-muted-foreground">
+          Commissioner only — I won&apos;t be managing a team
+        </Label>
+      </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="draftTimerMode">Timer Mode</Label>
-              <select
-                id="draftTimerMode"
-                name="draftTimerMode"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                value={timerMode}
-                onChange={(e) => setTimerMode(e.target.value as "chess_clock" | "standard")}
-                required
-              >
-                <option value="chess_clock">Chess Clock (accumulating bank)</option>
-                <option value="standard">Standard (per-pick countdown)</option>
-              </select>
-              <p className="text-sm text-muted-foreground">
-                Chess Clock: unused time carries over between picks. Standard: timer resets each pick.
-              </p>
-            </div>
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
 
-            <div className="space-y-2">
-              <Label htmlFor="draftSpeed">Draft Speed</Label>
-              <select
-                id="draftSpeed"
-                name="draftSpeed"
-                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                defaultValue={timerMode === "standard" ? "90" : "standard"}
-                key={timerMode}
-                required
-              >
-                {timerMode === "standard" ? (
-                  <>
-                    <option value="15">15 seconds</option>
-                    <option value="30">30 seconds</option>
-                    <option value="60">1 minute</option>
-                    <option value="90">90 seconds (default)</option>
-                    <option value="120">2 minutes</option>
-                    <option value="900">15 minutes</option>
-                    <option value="3600">1 hour</option>
-                    <option value="7200">2 hours</option>
-                    <option value="14400">4 hours</option>
-                    <option value="28800">8 hours</option>
-                    <option value="43200">12 hours</option>
-                  </>
-                ) : (
-                  <>
-                    <option value="fast">Fast (1 min + 10 sec)</option>
-                    <option value="standard">Standard (2 min + 15 sec)</option>
-                    <option value="slow">Slow (8 hours + 1 hour)</option>
-                    <option value="very-slow">Very Slow (12 hours + 1 hour)</option>
-                  </>
-                )}
-              </select>
-              <p className="text-sm text-muted-foreground">
-                {timerMode === "standard"
-                  ? "Time per pick — resets to this value after each selection"
-                  : "Initial time bank + increment added after each pick"}
-              </p>
-            </div>
+      <div className="grid grid-cols-2 gap-3 pt-2">
+        <Button type="button" variant="outline" disabled className="w-full">
+          ← Back
+        </Button>
+        <Button type="button" onClick={onNext} className="w-full" disabled={!leagueName.trim()}>
+          NEXT →
+        </Button>
+      </div>
 
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="overnightPauseMode">Overnight Pause</Label>
-                <select
-                  id="overnightPauseMode"
-                  name="overnightPauseMode"
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                  value={overnightMode}
-                  onChange={(e) => setOvernightMode(e.target.value as "none" | "league" | "per_user")}
-                >
-                  <option value="none">No pause — timer always runs</option>
-                  <option value="league">League-wide — one timezone for everyone</option>
-                  <option value="per_user">Per-user — each player&apos;s own timezone</option>
-                </select>
-                <p className="text-sm text-muted-foreground">
-                  Protect players from having their pick timer expire while they&apos;re asleep. Autodraft still fires normally.
-                </p>
-              </div>
-
-              {overnightMode === "per_user" && (
-                <div className={`rounded-md border px-3 py-2.5 text-sm space-y-1 ${commishTimezone ? "border-border bg-muted/40 text-muted-foreground" : "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400"}`}>
-                  <p>Each player&apos;s profile timezone is used to determine their overnight window. Players without one set fall back to the timezone below.</p>
-                  {!commishTimezone && (
-                    <p>
-                      You haven&apos;t set your timezone yet —{" "}
-                      <a href="/profile" className="font-medium underline underline-offset-2">
-                        set it in your profile
-                      </a>
-                      .
-                    </p>
-                  )}
-                </div>
-              )}
-
-              {overnightMode !== "none" && (
-                <>
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="overnightPauseStart">Pause starts at</Label>
-                      <input
-                        id="overnightPauseStart"
-                        name="overnightPauseStart"
-                        type="time"
-                        defaultValue="23:00"
-                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="overnightPauseEnd">Pause ends at</Label>
-                      <input
-                        id="overnightPauseEnd"
-                        name="overnightPauseEnd"
-                        type="time"
-                        defaultValue="07:00"
-                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="overnightPauseTimezone">
-                      Timezone
-                      {overnightMode === "per_user" && (
-                        <span className="text-muted-foreground font-normal ml-1">
-                          (fallback for users without one set)
-                        </span>
-                      )}
-                    </Label>
-                    <TimezoneSelect
-                      value={overnightTimezone}
-                      onChange={setOvernightTimezone}
-                      name="overnightPauseTimezone"
-                    />
-                    {overnightMode === "per_user" && (
-                      <p className="text-sm text-muted-foreground">
-                        Each player sets their timezone in their profile. This is used as a fallback if they haven&apos;t set one.
-                      </p>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-
-            <ScoringRulesEditor disabled={false} />
-
-            <div className="space-y-4">
-              <Label>Sports Selection</Label>
-              <p className="text-sm text-muted-foreground">
-                Choose a template to auto-select sports, or manually select your own
-              </p>
-
-              <input type="hidden" name="templateId" value={selectedTemplate} />
-
-              {templates.length > 0 && (
-                <div className="grid gap-3">
-                  {templates.map((template) => (
-                    <Card
-                      key={template.id}
-                      className={`cursor-pointer transition-all ${
-                        selectedTemplate === template.id
-                          ? "ring-2 ring-primary"
-                          : "hover:border-primary/50"
-                      }`}
-                      onClick={() => handleTemplateClick(template.id, template.sportsSeasonIds)}
-                    >
-                      <CardHeader className="pb-3">
-                        <div className="flex items-start justify-between">
-                          <div className="flex-1">
-                            <CardTitle className="text-lg">{template.name}</CardTitle>
-                            <CardDescription>{template.year}</CardDescription>
-                          </div>
-                          {selectedTemplate === template.id && (
-                            <div className="rounded-full bg-primary text-primary-foreground p-1">
-                              <Check className="h-4 w-4" />
-                            </div>
-                          )}
-                        </div>
-                      </CardHeader>
-                      {template.description && (
-                        <CardContent className="pt-0">
-                          <p className="text-sm text-muted-foreground">{template.description}</p>
-                        </CardContent>
-                      )}
-                    </Card>
-                  ))}
-                </div>
-              )}
-
-              <div className="space-y-3">
-                <div className="bg-muted/50 border border-muted-foreground/20 rounded-md p-3">
-                  <p className="text-sm text-muted-foreground">
-                    <strong>Recommendation:</strong> Select 16-20 sports seasons for optimal league balance and variety.
-                  </p>
-                </div>
-                <div className="space-y-2">
-                  <Label className="text-sm font-medium">
-                    Sports Seasons ({selectedSports.size} selected)
-                  </Label>
-                  <div className="max-h-64 overflow-y-auto border rounded-md p-3 space-y-2">
-                    {allSportsSeasons.length > 0 ? (
-                      allSportsSeasons.map((season) => (
-                        <div key={season.id} className="flex items-center space-x-2">
-                          <Checkbox
-                            id={season.id}
-                            name="sportsSeasons"
-                            value={season.id}
-                            checked={selectedSports.has(season.id)}
-                            onCheckedChange={() => handleSportToggle(season.id)}
-                          />
-                          <Label
-                            htmlFor={season.id}
-                            className="font-normal cursor-pointer flex-1"
-                          >
-                            <span className="font-medium">{season.sport.name}</span> - {season.name} ({season.year})
-                            <Badge variant="outline" className="ml-2 text-xs">
-                              {season.scoringType.replace("_", " ")}
-                            </Badge>
-                          </Label>
-                        </div>
-                      ))
-                    ) : (
-                      <p className="text-sm text-muted-foreground">
-                        No sports seasons available
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="joinAsPlayer"
-                name="joinAsPlayer"
-                defaultChecked={true}
-              />
-              <Label htmlFor="joinAsPlayer" className="font-normal cursor-pointer">
-                I want to play in this league (claim a team)
-              </Label>
-            </div>
-
-            {actionData?.error && (
-              <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
-                {actionData.error}
-              </div>
-            )}
-
-            <div className="flex gap-4">
-              <Button type="submit" className="flex-1">
-                Create League
-              </Button>
-              <Button type="button" variant="outline" asChild>
-                <Link to="/">Cancel</Link>
-              </Button>
-            </div>
-          </Form>
-        </CardContent>
-      </Card>
+    </div>
+  );
+}
+
+// ─── Step 2: Sports ───────────────────────────────────────────────────────────
+
+function Step2Sports({
+  templates,
+  allSportsSeasons,
+  teamCount,
+  selectedTemplate,
+  setSelectedTemplate,
+  selectedSports,
+  setSelectedSports,
+  error,
+  onNext,
+  onBack,
+}: {
+  templates: Template[];
+  allSportsSeasons: SportSeason[];
+  teamCount: number;
+  selectedTemplate: string;
+  setSelectedTemplate: (v: string) => void;
+  selectedSports: Set<string>;
+  setSelectedSports: (v: Set<string>) => void;
+  error: string | null;
+  onNext: () => void;
+  onBack: () => void;
+}) {
+  const toggleSport = (id: string) => {
+    const next = new Set(selectedSports);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    setSelectedSports(next);
+  };
+
+  const handleTemplateClick = (id: string, sportsSeasonIds: string[]) => {
+    setSelectedTemplate(id);
+    setSelectedSports(new Set(sportsSeasonIds));
+  };
+
+  // When a named template is selected, only show that template's seasons
+  // Always exclude seasons with fewer participants than the league's team count
+  const activeTemplate = templates.find((t) => t.id === selectedTemplate);
+  const eligibleSeasons = allSportsSeasons.filter((s) => s.participantCount >= teamCount);
+  const displaySeasons = selectedTemplate === "customize" || !activeTemplate
+    ? eligibleSeasons
+    : eligibleSeasons.filter((s) => activeTemplate.sportsSeasonIds.includes(s.id));
+
+  // Group sports by category
+  const grouped: { category: string; seasons: SportSeason[] }[] = CATEGORY_ORDER
+    .map((cat) => ({
+      category: cat,
+      seasons: displaySeasons.filter((s) => getSportCategory(s.sport.name) === cat),
+    }))
+    .filter(({ seasons }) =>
+      seasons.length > 0
+    );
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <h2 className="text-xl font-semibold flex items-center gap-2">
+          <span className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold shrink-0">2</span>
+          Sports
+        </h2>
+      </div>
+
+      {templates.length > 0 && (
+        <div className="space-y-2">
+          {templates.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              onClick={() => handleTemplateClick(t.id, t.sportsSeasonIds)}
+              className={cn(
+                "w-full text-left rounded-lg border-2 px-4 py-3 flex items-center justify-between transition-all hover:border-primary/60",
+                selectedTemplate === t.id ? "border-primary" : "border-border"
+              )}
+            >
+              <div>
+                <p className="font-semibold text-sm">{t.name}</p>
+                {t.description && (
+                  <p className="text-xs text-muted-foreground mt-0.5">{t.description}</p>
+                )}
+              </div>
+              <div className="flex items-center gap-3 shrink-0 ml-4">
+                <span className="text-xs text-muted-foreground">
+                  {new Set(allSportsSeasons.filter(s => t.sportsSeasonIds.includes(s.id)).map(s => s.sport.name)).size} sports
+                </span>
+                {selectedTemplate === t.id && (
+                  <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
+                    <Check className="h-3 w-3 text-primary-foreground" />
+                  </div>
+                )}
+              </div>
+            </button>
+          ))}
+          <button
+            type="button"
+            onClick={() => setSelectedTemplate("customize")}
+            className={cn(
+              "w-full text-left rounded-lg border-2 px-4 py-3 flex items-center justify-between transition-all hover:border-primary/60",
+              selectedTemplate === "customize" ? "border-primary" : "border-border"
+            )}
+          >
+            <div>
+              <p className="font-semibold text-sm">Customize</p>
+              <p className="text-xs text-muted-foreground mt-0.5">Pick your own sports seasons</p>
+            </div>
+            {selectedTemplate === "customize" && (
+              <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center shrink-0 ml-4">
+                <Check className="h-3 w-3 text-primary-foreground" />
+              </div>
+            )}
+          </button>
+        </div>
+      )}
+
+      {/* Named template: read-only alphabetical sport list */}
+      {selectedTemplate !== "" && selectedTemplate !== "customize" && (
+        <div className="space-y-3">
+          <ul className="space-y-1">
+            {Object.values(
+              displaySeasons.reduce<Record<string, SportSeason["sport"]>>((acc, s) => {
+                acc[s.sport.name] = s.sport;
+                return acc;
+              }, {})
+            ).toSorted((a, b) => a.name.localeCompare(b.name)).map((sport) => (
+              <li key={sport.name} className="flex items-center gap-2 text-sm">
+                <SportIcon sport={sport} />
+                <span>{sport.name}</span>
+              </li>
+            ))}
+          </ul>
+          <p className="text-xs text-muted-foreground">
+            These are the sport seasons included in this template. Switch to Customize to adjust your selection.
+          </p>
+        </div>
+      )}
+
+      {/* Customize: full interactive selector */}
+      {selectedTemplate === "customize" && (
+        <div className="space-y-3">
+          {/* Selected chips */}
+          {selectedSports.size > 0 && (
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between">
+                <p className="text-xs text-muted-foreground">{selectedSports.size} selected</p>
+                <button
+                  type="button"
+                  onClick={() => setSelectedSports(new Set())}
+                  className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
+                >
+                  Clear all
+                </button>
+              </div>
+              <div className="flex flex-wrap gap-1.5">
+                {allSportsSeasons
+                  .filter((s) => selectedSports.has(s.id))
+                  .toSorted((a, b) => a.sport.name.localeCompare(b.sport.name))
+                  .map((s) => (
+                    <span
+                      key={s.id}
+                      className="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-md bg-primary/10 border border-primary text-primary text-sm font-medium"
+                    >
+                      <SportIcon sport={s.sport} />
+                      {s.sport.name} <span className="text-xs opacity-70">{s.year}</span>
+                      <button
+                        type="button"
+                        onClick={() => toggleSport(s.id)}
+                        className="ml-0.5 hover:text-primary/60 transition-colors"
+                        aria-label={`Remove ${s.sport.name}`}
+                      >
+                        ×
+                      </button>
+                    </span>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          {/* Full sport picker */}
+          <div className="relative">
+            <div className="space-y-4 max-h-72 overflow-y-auto pr-1">
+              {grouped.map(({ category, seasons }) => (
+                <div key={category}>
+                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                    {category}
+                  </p>
+                  <div className="flex flex-col gap-1">
+                    {seasons.map((s) => {
+                      const selected = selectedSports.has(s.id);
+                      return (
+                        <button
+                          key={s.id}
+                          type="button"
+                          onClick={() => toggleSport(s.id)}
+                          className={cn(
+                            "w-full flex items-center justify-between px-3 py-2 rounded-md text-sm border transition-colors",
+                            selected
+                              ? "bg-primary/10 border-primary text-primary font-medium"
+                              : "bg-muted border-border text-foreground hover:border-primary/50"
+                          )}
+                        >
+                          <span className="flex items-center gap-2">
+                            <SportIcon sport={s.sport} />
+                            {s.sport.name} <span className="text-xs opacity-70">{s.year}</span>
+                          </span>
+                          <span className="text-xs font-semibold">{selected ? "Remove" : "Add"}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))}
+              {grouped.length === 0 && (
+                <p className="text-sm text-muted-foreground">No sports seasons available.</p>
+              )}
+            </div>
+            <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-card to-transparent" />
+          </div>
+        </div>
+      )}
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      <div className="grid grid-cols-2 gap-3 pt-2">
+        <Button type="button" variant="outline" onClick={onBack} className="w-full">
+          ← Back
+        </Button>
+        <Button type="button" onClick={onNext} className="w-full">
+          NEXT →
+        </Button>
+      </div>
+
+      {selectedSports.size === 0 && (
+        <p className="text-center text-sm text-muted-foreground">
+          Select at least one sport season to continue.
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ─── Step 3: Draft Settings ───────────────────────────────────────────────────
+
+function Step3DraftSettings({
+  draftRounds,
+  setDraftRounds,
+  draftDate,
+  setDraftDate,
+  draftTime,
+  setDraftTime,
+  timerMode,
+  setTimerMode,
+  draftSpeed,
+  setDraftSpeed,
+  overnightMode,
+  setOvernightMode,
+  overnightStart,
+  setOvernightStart,
+  overnightEnd,
+  setOvernightEnd,
+  overnightTimezone,
+  setOvernightTimezone,
+  commishTimezone,
+  sportsCount,
+  error,
+  onNext,
+  onBack,
+}: {
+  draftRounds: number;
+  setDraftRounds: (v: number) => void;
+  draftDate: string;
+  setDraftDate: (v: string) => void;
+  draftTime: string;
+  setDraftTime: (v: string) => void;
+  timerMode: "chess_clock" | "standard";
+  setTimerMode: (v: "chess_clock" | "standard") => void;
+  draftSpeed: string;
+  setDraftSpeed: (v: string) => void;
+  overnightMode: "none" | "league" | "per_user";
+  setOvernightMode: (v: "none" | "league" | "per_user") => void;
+  overnightStart: string;
+  setOvernightStart: (v: string) => void;
+  overnightEnd: string;
+  setOvernightEnd: (v: string) => void;
+  overnightTimezone: string;
+  setOvernightTimezone: (v: string) => void;
+  commishTimezone: string | null;
+  sportsCount: number;
+  error: string | null;
+  onNext: () => void;
+  onBack: () => void;
+}) {
+  const minRounds = sportsCount;
+  const flexSpots = Math.max(0, draftRounds - sportsCount);
+  const { draftInitialTime, draftIncrementTime } = parseDraftSpeed(draftSpeed, timerMode);
+  const showOvernightPause = draftInitialTime >= 3600 || draftIncrementTime >= 600;
+
+  useEffect(() => {
+    if (!showOvernightPause) setOvernightMode("none");
+  }, [showOvernightPause]); // eslint-disable-line react-hooks/exhaustive-deps
+
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="text-xl font-semibold flex items-center gap-2">
+          <span className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold shrink-0">3</span>
+          Draft Settings
+        </h2>
+      </div>
+
+      {/* Draft Rounds */}
+      <div className="space-y-2">
+        <Label>Draft Rounds</Label>
+        <StepperInput
+          value={draftRounds}
+          min={Math.max(1, minRounds)}
+          max={50}
+          onChange={setDraftRounds}
+          decrementLabel="Decrease rounds"
+          incrementLabel="Increase rounds"
+        />
+        <p className="text-sm text-muted-foreground">
+          Minimum: {minRounds} (based on sports selected)
+          {sportsCount > 0 && ` · Flex spots: ${flexSpots}`}
+        </p>
+      </div>
+
+      {/* Draft Date & Time */}
+      <div className="space-y-2">
+        <Label>Draft Date &amp; Time</Label>
+        <div className="grid grid-cols-2 gap-2">
+          <Input
+            type="date"
+            value={draftDate}
+            onChange={(e) => setDraftDate(e.target.value)}
+            min={new Date().toISOString().slice(0, 10)}
+          />
+          <Input
+            type="time"
+            value={draftTime}
+            onChange={(e) => setDraftTime(e.target.value)}
+          />
+        </div>
+        <p className="text-sm text-muted-foreground">
+          This can be changed before the draft starts.
+        </p>
+      </div>
+
+      {/* Timer Mode */}
+      <div className="space-y-2">
+        <Label>Timer Mode</Label>
+        <TimerModeSelector value={timerMode} onChange={setTimerMode} />
+      </div>
+
+      {/* Draft Speed */}
+      <div className="space-y-2">
+        <Label>Draft Speed</Label>
+        <DraftSpeedPicker timerMode={timerMode} value={draftSpeed} onChange={setDraftSpeed} />
+      </div>
+
+      {/* Overnight Pause */}
+      <OvernightPauseSettings
+        show={showOvernightPause}
+        mode={overnightMode}
+        onModeChange={setOvernightMode}
+        start={overnightStart}
+        onStartChange={setOvernightStart}
+        end={overnightEnd}
+        onEndChange={setOvernightEnd}
+        timezone={overnightTimezone}
+        onTimezoneChange={setOvernightTimezone}
+        commishTimezone={commishTimezone}
+      />
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      <div className="grid grid-cols-2 gap-3 pt-2">
+        <Button type="button" variant="outline" onClick={onBack} className="w-full">
+          ← Back
+        </Button>
+        <Button type="button" onClick={onNext} className="w-full" disabled={!draftDate || !draftTime}>
+          NEXT →
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 4: Scoring ──────────────────────────────────────────────────────────
+
+function Step4Scoring({
+  scoringPreset,
+  setScoringPreset,
+  scoringRules,
+  setScoringRules,
+  onNext,
+  onBack,
+}: {
+  scoringPreset: "brackt" | "omnifantasy" | "custom";
+  setScoringPreset: (v: "brackt" | "omnifantasy" | "custom") => void;
+  scoringRules: ScoringRules;
+  setScoringRules: (v: ScoringRules) => void;
+  onNext: () => void;
+  onBack: () => void;
+}) {
+  return (
+    <div className="space-y-5">
+      <div>
+        <h2 className="text-xl font-semibold flex items-center gap-2">
+          <span className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold shrink-0">4</span>
+          Scoring
+        </h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Points awarded to teams based on how their drafted participants finish in each sport&apos;s season.
+        </p>
+      </div>
+
+      <ScoringPresetPicker
+        preset={scoringPreset}
+        onPresetChange={setScoringPreset}
+        rules={scoringRules}
+        onRulesChange={setScoringRules}
+      />
+
+      <div className="grid grid-cols-2 gap-3 pt-2">
+        <Button type="button" variant="outline" onClick={onBack} className="w-full">
+          ← Back
+        </Button>
+        <Button type="button" onClick={onNext} className="w-full">
+          NEXT →
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 5: Review ───────────────────────────────────────────────────────────
+
+function StepReview({
+  leagueName,
+  teamCount,
+  joinAsPlayer,
+  selectedSports,
+  allSportsSeasons,
+  draftRounds,
+  draftDate,
+  draftTime,
+  timerMode,
+  draftSpeed,
+  overnightMode,
+  overnightStart,
+  overnightEnd,
+  overnightTimezone,
+  scoringPreset,
+  scoringRules,
+  isAuthenticated,
+  authTab,
+  setAuthTab,
+  displayName,
+  setDisplayName,
+  authEmail,
+  setAuthEmail,
+  authPassword,
+  setAuthPassword,
+  userTimezone,
+  setUserTimezone,
+  onSocialLogin,
+  error,
+  submitting,
+  onSubmit,
+  onBack,
+  onEditStep,
+}: {
+  leagueName: string;
+  teamCount: number;
+  joinAsPlayer: boolean;
+  selectedSports: Set<string>;
+  allSportsSeasons: SportSeason[];
+  draftRounds: number;
+  draftDate: string;
+  draftTime: string;
+  timerMode: "chess_clock" | "standard";
+  draftSpeed: string;
+  overnightMode: "none" | "league" | "per_user";
+  overnightStart: string;
+  overnightEnd: string;
+  overnightTimezone: string;
+  scoringPreset: "brackt" | "omnifantasy" | "custom";
+  scoringRules: ScoringRules;
+  isAuthenticated: boolean;
+  authTab: "create" | "login";
+  setAuthTab: (v: "create" | "login") => void;
+  displayName: string;
+  setDisplayName: (v: string) => void;
+  authEmail: string;
+  setAuthEmail: (v: string) => void;
+  authPassword: string;
+  setAuthPassword: (v: string) => void;
+  userTimezone: string;
+  setUserTimezone: (v: string) => void;
+  onSocialLogin: (provider: "google" | "discord") => void;
+  error: string | null;
+  submitting: boolean;
+  onSubmit: () => void;
+  onBack: () => void;
+  onEditStep: (n: number) => void;
+}) {
+  const selectedSeasons = allSportsSeasons.filter((s) => selectedSports.has(s.id));
+
+  const draftDateTimeStr =
+    draftDate && draftTime
+      ? `${format(new Date(draftDate + "T00:00:00"), "MMMM do, yyyy")} at ${formatTime12h(draftTime)}`
+      : "Not set (required before starting draft)";
+
+  const tzLabel = TIMEZONE_OPTIONS.flatMap((g) => g.zones).find((z) => z.value === overnightTimezone)?.label ?? overnightTimezone;
+  const overnightModeLine = overnightMode === "none" ? "None" : overnightMode === "league" ? "League-wide" : "Per user";
+  const overnightTimeLine = overnightMode !== "none" ? `${formatTime12h(overnightStart)} – ${formatTime12h(overnightEnd)} (${tzLabel})` : null;
+
+  const maxPoints = Math.max(...PLACEMENT_LABELS.map(({ key }) => scoringRules[key]));
+  const uniqueSportsCount = new Set(selectedSeasons.map((s) => s.sport.id)).size;
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-xl font-semibold flex items-center gap-2">
+          <span className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-sm font-bold shrink-0">5</span>
+          Review
+        </h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Everything look good? You can edit any section before creating.
+        </p>
+      </div>
+
+      <ReviewSection icon={Swords} title="League Basics" onEdit={() => onEditStep(1)}>
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-lg font-bold text-foreground truncate">{leagueName}</p>
+          <div className="flex items-center gap-2 shrink-0">
+            <Badge variant="secondary">{teamCount} teams</Badge>
+            {!joinAsPlayer && <Badge variant="default">Commish only</Badge>}
+          </div>
+        </div>
+      </ReviewSection>
+
+      <ReviewSection icon={Trophy} title="Sports" onEdit={() => onEditStep(2)}>
+        <p className="text-sm text-muted-foreground">
+          <span className="text-primary font-semibold">{uniqueSportsCount} sport{uniqueSportsCount !== 1 ? "s" : ""}</span>
+        </p>
+        <ul className="mt-1 space-y-1">
+          {selectedSeasons.toSorted((a, b) => a.sport.name.localeCompare(b.sport.name)).map((s) => (
+            <li key={s.id} className="flex items-center gap-2 text-sm text-foreground">
+              <SportIcon sport={s.sport} />
+              {s.sport.name} {s.year}
+            </li>
+          ))}
+        </ul>
+      </ReviewSection>
+
+      <ReviewSection icon={CalendarClock} title="Draft Settings" onEdit={() => onEditStep(3)}>
+        <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+          <dt className="text-muted-foreground">Rounds</dt>
+          <dd className="text-foreground">{draftRounds}</dd>
+          <dt className="text-muted-foreground">Date &amp; Time</dt>
+          <dd className="text-primary font-medium">{draftDateTimeStr}</dd>
+          <dt className="text-muted-foreground">Timer</dt>
+          <dd className="text-foreground">{timerMode === "chess_clock" ? "Chess Clock" : "Standard"}</dd>
+          <dt className="text-muted-foreground">Speed</dt>
+          <dd className="text-foreground">{formatDraftSpeed(draftSpeed, timerMode)}</dd>
+          <dt className="text-muted-foreground">Pause</dt>
+          <dd className="text-foreground">
+            {overnightModeLine}
+            {overnightTimeLine && <div className="text-muted-foreground text-xs mt-0.5">{overnightTimeLine}</div>}
+          </dd>
+        </dl>
+      </ReviewSection>
+
+      <ReviewSection icon={Star} title="Scoring" onEdit={() => onEditStep(4)}>
+        <p className="text-xs text-muted-foreground mb-2">
+          {scoringPreset === "brackt" ? "Brackt Default" : scoringPreset === "omnifantasy" ? "Omnifantasy Default" : "Custom"}
+        </p>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2">
+          {PLACEMENT_LABELS.map(({ key, label, color }) => {
+            const val = scoringRules[key];
+            const pct = maxPoints > 0 ? (val / maxPoints) * 100 : 0;
+            return (
+              <div key={key} className="flex items-center gap-2">
+                <span className={cn("text-xs font-semibold w-6 shrink-0", color)}>{label}</span>
+                <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                  <div className="h-full bg-primary rounded-full" style={{ width: `${pct}%` }} />
+                </div>
+                <span className="text-xs font-semibold w-6 text-right shrink-0">{val}</span>
+              </div>
+            );
+          })}
+        </div>
+      </ReviewSection>
+
+      {!isAuthenticated && (
+        <WizardAuthForm
+          authTab={authTab}
+          setAuthTab={setAuthTab}
+          displayName={displayName}
+          setDisplayName={setDisplayName}
+          authEmail={authEmail}
+          setAuthEmail={setAuthEmail}
+          authPassword={authPassword}
+          setAuthPassword={setAuthPassword}
+          userTimezone={userTimezone}
+          setUserTimezone={setUserTimezone}
+          onSocialLogin={onSocialLogin}
+          submitting={submitting}
+        />
+      )}
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+
+      <div className="grid grid-cols-2 gap-3 pt-2">
+        <Button type="button" variant="outline" onClick={onBack} disabled={submitting} className="w-full">
+          ← Back
+        </Button>
+        <Button type="button" onClick={onSubmit} disabled={submitting} className="w-full">
+          {submitting
+            ? "Creating…"
+            : isAuthenticated
+            ? "CREATE LEAGUE"
+            : authTab === "create"
+            ? "CREATE ACCOUNT & LEAGUE"
+            : "LOG IN & CREATE LEAGUE"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export default function NewLeague({ loaderData }: Route.ComponentProps) {
+  const { templates, allSportsSeasons, commishTimezone, isAuthenticated } = loaderData;
+  const fetcher = useFetcher();
+
+  // Wizard
+  const [step, setStep] = useState(1);
+
+  // Step-level validation error
+  const [stepError, setStepError] = useState<string | null>(null);
+
+  // Step 1
+  const [leagueName, setLeagueName] = useState("");
+  const [teamCount, setTeamCount] = useState(12);
+  const [joinAsPlayer, setJoinAsPlayer] = useState(true);
+
+  // Step 2
+  const [selectedTemplate, setSelectedTemplate] = useState("");
+  const [selectedSports, setSelectedSports] = useState<Set<string>>(new Set());
+
+  // Step 3
+  const [draftRounds, setDraftRounds] = useState(20);
+  const [draftDate, setDraftDate] = useState("");
+  const [draftTime, setDraftTime] = useState("");
+  const [timerMode, setTimerMode] = useState<"chess_clock" | "standard">("chess_clock");
+  const [draftSpeed, setDraftSpeed] = useState("standard");
+  const [overnightMode, setOvernightMode] = useState<"none" | "league" | "per_user">("none");
+  const [overnightStart, setOvernightStart] = useState("23:00");
+  const [overnightEnd, setOvernightEnd] = useState("07:00");
+  const [overnightTimezone, setOvernightTimezone] = useState(commishTimezone ?? "");
+
+  // Step 4
+  const [scoringPreset, setScoringPreset] = useState<"brackt" | "omnifantasy" | "custom">("brackt");
+  const [scoringRules, setScoringRules] = useState<ScoringRules>({ ...DEFAULT_SCORING_RULES });
+
+  // Step 5
+  const [authTab, setAuthTab] = useState<"create" | "login">("create");
+  const [displayName, setDisplayName] = useState("");
+  const [authEmail, setAuthEmail] = useState("");
+  const [authPassword, setAuthPassword] = useState("");
+  const [authError, setAuthError] = useState<string | null>(null);
+  const [authLoading, setAuthLoading] = useState(false);
+  const [userTimezone, setUserTimezone] = useState("");
+
+  // Detect browser timezone on mount
+  useEffect(() => {
+    const detected = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (!overnightTimezone) setOvernightTimezone(detected);
+    setUserTimezone(detected);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Recalculate default rounds whenever sports count changes
+  const sportsCount = selectedSports.size;
+  useEffect(() => {
+    setDraftRounds(defaultRounds(sportsCount));
+  }, [sportsCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isSubmitting = fetcher.state !== "idle" || authLoading;
+  const submitError =
+    fetcher.data && typeof fetcher.data === "object" && "error" in fetcher.data
+      ? String((fetcher.data as { error: unknown }).error)
+      : null;
+
+  function buildFormData(): FormData {
+    return buildFormDataFromSnapshot({
+      leagueName, teamCount, joinAsPlayer, selectedTemplate,
+      selectedSports: [...selectedSports],
+      draftRounds, draftDate, draftTime, timerMode, draftSpeed,
+      overnightMode, overnightStart, overnightEnd, overnightTimezone,
+      scoringPreset, scoringRules, userTimezone,
+    });
+  }
+
+  async function handleFinalSubmit() {
+    if (isAuthenticated) {
+      fetcher.submit(buildFormData(), { method: "post" });
+      return;
+    }
+
+    setAuthError(null);
+    setAuthLoading(true);
+
+    if (authTab === "create") {
+      const { error } = await authClient.signUp.email({
+        name: displayName,
+        email: authEmail,
+        password: authPassword,
+      });
+      if (error) {
+        setAuthError(error.message ?? "Registration failed. Please try again.");
+        setAuthLoading(false);
+        return;
+      }
+    } else {
+      const { error } = await authClient.signIn.email({
+        email: authEmail,
+        password: authPassword,
+      });
+      if (error) {
+        setAuthError(error.message ?? "Sign in failed. Please check your credentials.");
+        setAuthLoading(false);
+        return;
+      }
+    }
+
+    fetcher.submit(buildFormData(), { method: "post" });
+    setAuthLoading(false);
+  }
+
+  async function handleSocialLogin(provider: "google" | "discord") {
+    saveWizardState({
+      leagueName, teamCount, joinAsPlayer, selectedTemplate,
+      selectedSports: [...selectedSports],
+      draftRounds, draftDate, draftTime, timerMode, draftSpeed,
+      overnightMode, overnightStart, overnightEnd, overnightTimezone,
+      scoringPreset, scoringRules, userTimezone,
+    });
+    await authClient.signIn.social({ provider, callbackURL: "/leagues/creating" });
+  }
+
+  function goNext() {
+    setStepError(null);
+    if (step === 1 && leagueName.trim().length < 3) {
+      setStepError("League name must be at least 3 characters.");
+      return;
+    }
+    if (step === 2 && selectedSports.size === 0) {
+      setStepError("Please select at least one sport season.");
+      return;
+    }
+    if (step === 3 && (!draftDate || !draftTime)) {
+      setStepError("Please set a draft date and time.");
+      return;
+    }
+    if (step === 3 && draftRounds < sportsCount) {
+      setStepError(`Draft rounds must be at least ${sportsCount} (number of sports selected).`);
+      return;
+    }
+    setStep((s) => s + 1);
+  }
+
+  function goBack() {
+    setStepError(null);
+    setStep((s) => s - 1);
+  }
+
+  function goToStep(n: number) {
+    if (n < step) {
+      setStepError(null);
+      setStep(n);
+    }
+  }
+
+  const STEPS = ["Basics", "Sports", "Draft Settings", "Scoring", "Review"];
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-lg mx-auto px-4 py-4">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">Start a New League</h1>
+          <p className="text-muted-foreground mt-1">
+            Create your fantasy league and invite your friends to compete.
+          </p>
+        </div>
+
+        <WizardStepper currentStep={step} steps={STEPS} onStepClick={goToStep} />
+
+        <Card className="py-0">
+          <CardContent className="p-5">
+            {step === 1 && (
+              <Step1LeagueBasics
+                leagueName={leagueName}
+                setLeagueName={setLeagueName}
+                teamCount={teamCount}
+                setTeamCount={setTeamCount}
+                joinAsPlayer={joinAsPlayer}
+                setJoinAsPlayer={setJoinAsPlayer}
+                error={stepError}
+                onNext={goNext}
+              />
+            )}
+            {step === 2 && (
+              <Step2Sports
+                templates={templates}
+                allSportsSeasons={allSportsSeasons}
+                teamCount={teamCount}
+                selectedTemplate={selectedTemplate}
+                setSelectedTemplate={setSelectedTemplate}
+                selectedSports={selectedSports}
+                setSelectedSports={setSelectedSports}
+                error={stepError}
+                onNext={goNext}
+                onBack={goBack}
+              />
+            )}
+            {step === 3 && (
+              <Step3DraftSettings
+                draftRounds={draftRounds}
+                setDraftRounds={setDraftRounds}
+                draftDate={draftDate}
+                setDraftDate={setDraftDate}
+                draftTime={draftTime}
+                setDraftTime={setDraftTime}
+                timerMode={timerMode}
+                setTimerMode={(mode) => {
+                  setTimerMode(mode);
+                  setDraftSpeed(mode === "chess_clock" ? "standard" : "90");
+                }}
+                draftSpeed={draftSpeed}
+                setDraftSpeed={(newSpeed) => {
+                  if (isSlowPreset(newSpeed) && !isSlowPreset(draftSpeed)) {
+                    setOvernightMode("league");
+                    setOvernightStart("23:00");
+                    setOvernightEnd("07:00");
+                  }
+                  setDraftSpeed(newSpeed);
+                }}
+                overnightMode={overnightMode}
+                setOvernightMode={setOvernightMode}
+                overnightStart={overnightStart}
+                setOvernightStart={setOvernightStart}
+                overnightEnd={overnightEnd}
+                setOvernightEnd={setOvernightEnd}
+                overnightTimezone={overnightTimezone}
+                setOvernightTimezone={setOvernightTimezone}
+                commishTimezone={commishTimezone}
+                sportsCount={sportsCount}
+                error={stepError}
+                onNext={goNext}
+                onBack={goBack}
+              />
+            )}
+            {step === 4 && (
+              <Step4Scoring
+                scoringPreset={scoringPreset}
+                setScoringPreset={setScoringPreset}
+                scoringRules={scoringRules}
+                setScoringRules={setScoringRules}
+                onNext={goNext}
+                onBack={goBack}
+              />
+            )}
+            {step === 5 && (
+              <StepReview
+                leagueName={leagueName}
+                teamCount={teamCount}
+                joinAsPlayer={joinAsPlayer}
+                selectedSports={selectedSports}
+                allSportsSeasons={allSportsSeasons}
+                draftRounds={draftRounds}
+                draftDate={draftDate}
+                draftTime={draftTime}
+                timerMode={timerMode}
+                draftSpeed={draftSpeed}
+                overnightMode={overnightMode}
+                overnightStart={overnightStart}
+                overnightEnd={overnightEnd}
+                overnightTimezone={overnightTimezone}
+                scoringPreset={scoringPreset}
+                scoringRules={scoringRules}
+                isAuthenticated={isAuthenticated}
+                authTab={authTab}
+                setAuthTab={setAuthTab}
+                displayName={displayName}
+                setDisplayName={setDisplayName}
+                authEmail={authEmail}
+                setAuthEmail={setAuthEmail}
+                authPassword={authPassword}
+                setAuthPassword={setAuthPassword}
+                userTimezone={userTimezone}
+                setUserTimezone={setUserTimezone}
+                onSocialLogin={handleSocialLogin}
+                error={submitError ?? authError}
+                submitting={isSubmitting}
+                onSubmit={handleFinalSubmit}
+                onBack={goBack}
+                onEditStep={goToStep}
+              />
+            )}
+          </CardContent>
+        </Card>
+
+      </div>
     </div>
   );
 }