diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 00000000..39bf3efc
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,69 @@
+name: CI
+
+on:
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: '24'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Unit tests
+        run: npm test
+
+      - name: Deploy Convex preview
+        run: |
+          npx convex deploy \
+            --preview-create "pr-${{ github.event.pull_request.number }}-${{ github.run_attempt }}" \
+            --cmd-url-env-var-name VITE_CONVEX_URL \
+            --cmd 'echo "VITE_CONVEX_URL=$VITE_CONVEX_URL" >> "$GITHUB_ENV"'
+        env:
+          CONVEX_DEPLOY_KEY: ${{ secrets.CONVEX_DEPLOY_KEY }}
+
+      - name: Configure preview deployment environment
+        run: |
+          PREVIEW="pr-${{ github.event.pull_request.number }}-${{ github.run_attempt }}"
+          npx convex env set --preview-name "$PREVIEW" -- JWT_PRIVATE_KEY "$JWT_PRIVATE_KEY"
+          npx convex env set --preview-name "$PREVIEW" -- JWKS "$JWKS"
+          npx convex env set --preview-name "$PREVIEW" -- AUTH_RESEND_KEY "$AUTH_RESEND_KEY"
+          npx convex env set --preview-name "$PREVIEW" -- SITE_URL "http://localhost:5173"
+        env:
+          CONVEX_DEPLOY_KEY: ${{ secrets.CONVEX_DEPLOY_KEY }}
+          JWT_PRIVATE_KEY: ${{ secrets.CONVEX_JWT_PRIVATE_KEY }}
+          JWKS: ${{ secrets.CONVEX_JWKS }}
+          AUTH_RESEND_KEY: ${{ secrets.CONVEX_AUTH_RESEND_KEY }}
+
+      - name: Install Playwright browsers
+        run: npx playwright install firefox --with-deps
+
+      - name: E2E tests
+        run: npm run test:e2e
+        env:
+          CONVEX_DEPLOY_KEY: ${{ secrets.CONVEX_DEPLOY_KEY }}
+          CONVEX_PREVIEW_NAME: pr-${{ github.event.pull_request.number }}-${{ github.run_attempt }}
+
+      - name: Upload Playwright report
+        if: failure()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
diff --git a/.gitignore b/.gitignore
index 575b20b5..6cbd4973 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,9 @@ pnpm-debug.log*
 lerna-debug.log*
 
 coverage
+playwright-report
+test-results
+test/.auth
 node_modules
 dist
 dist-ssr
diff --git a/convex/_fixtures/createMockTournament.ts b/convex/_fixtures/createMockTournament.ts
index 7cdcd9f0..96a4befd 100644
--- a/convex/_fixtures/createMockTournament.ts
+++ b/convex/_fixtures/createMockTournament.ts
@@ -2,10 +2,12 @@ import {
   CurrencyCode,
   GameSystem,
   getGameSystem,
-  tournamentPairingConfig,
 } from '@ianpaschal/combat-command-game-systems/common';
 
 import { Doc } from '../_generated/dataModel';
+import {
+  defaultValues as tournamentPairingConfigDefaultValues,
+} from '../_model/common/tournamentPairingConfig';
 import { RankingFactor } from '../_model/common/types';
 
 const DAY_LENGTH_MS = 172800000;
@@ -46,7 +48,10 @@ export const createMockTournament = (
       currency: CurrencyCode.EUR,
     },
     roundCount: 5,
-    pairingConfig: tournamentPairingConfig.defaultValues,
+    pairingConfig: {
+      ...tournamentPairingConfigDefaultValues,
+      tableCount: Math.ceil((overrides?.maxCompetitors ?? 48) / 2),
+    },
     gameSystemConfig: gameSystemConfig.defaultValues,
     startsAt: Date.now() + (DAY_LENGTH_MS * 3),
     endsAt: Date.now() + (DAY_LENGTH_MS * 5),
diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts
index 319b1146..0a721b5b 100644
--- a/convex/_generated/api.d.ts
+++ b/convex/_generated/api.d.ts
@@ -11,6 +11,10 @@
 import type * as _fixtures_createMockTournament from "../_fixtures/createMockTournament.js";
 import type * as _fixtures_createMockTournamentCompetitor from "../_fixtures/createMockTournamentCompetitor.js";
 import type * as _fixtures_fowV4_createMockFowV4MatchResultData from "../_fixtures/fowV4/createMockFowV4MatchResultData.js";
+import type * as _model__test__helpers_testUsers from "../_model/_test/_helpers/testUsers.js";
+import type * as _model__test_actions_populateUsers from "../_model/_test/actions/populateUsers.js";
+import type * as _model__test_index from "../_model/_test/index.js";
+import type * as _model__test_mutations_cleanUp from "../_model/_test/mutations/cleanUp.js";
 import type * as _model_common_VisibilityLevel from "../_model/common/VisibilityLevel.js";
 import type * as _model_common__helpers_buildFilteredQuery from "../_model/common/_helpers/buildFilteredQuery.js";
 import type * as _model_common__helpers_checkAuth from "../_model/common/_helpers/checkAuth.js";
@@ -192,6 +196,7 @@ import type * as _model_tournamentRegistrations__helpers_deepenTournamentRegistr
 import type * as _model_tournamentRegistrations__helpers_getAvailableActions from "../_model/tournamentRegistrations/_helpers/getAvailableActions.js";
 import type * as _model_tournamentRegistrations__helpers_getCreateSuccessMessage from "../_model/tournamentRegistrations/_helpers/getCreateSuccessMessage.js";
 import type * as _model_tournamentRegistrations__helpers_getDeleteSuccessMessage from "../_model/tournamentRegistrations/_helpers/getDeleteSuccessMessage.js";
+import type * as _model_tournamentRegistrations__helpers_sortTournamentCompetitorsByName from "../_model/tournamentRegistrations/_helpers/sortTournamentCompetitorsByName.js";
 import type * as _model_tournamentRegistrations_index from "../_model/tournamentRegistrations/index.js";
 import type * as _model_tournamentRegistrations_mutations_createTournamentRegistration from "../_model/tournamentRegistrations/mutations/createTournamentRegistration.js";
 import type * as _model_tournamentRegistrations_mutations_deleteTournamentRegistration from "../_model/tournamentRegistrations/mutations/deleteTournamentRegistration.js";
@@ -233,6 +238,7 @@ import type * as _model_tournaments__helpers_deepenTournament from "../_model/to
 import type * as _model_tournaments__helpers_extractSearchTokens from "../_model/tournaments/_helpers/extractSearchTokens.js";
 import type * as _model_tournaments__helpers_getAvailableActions from "../_model/tournaments/_helpers/getAvailableActions.js";
 import type * as _model_tournaments__helpers_getDisplayName from "../_model/tournaments/_helpers/getDisplayName.js";
+import type * as _model_tournaments__helpers_getLastVisibleRound from "../_model/tournaments/_helpers/getLastVisibleRound.js";
 import type * as _model_tournaments__helpers_getTournamentDeep from "../_model/tournaments/_helpers/getTournamentDeep.js";
 import type * as _model_tournaments__helpers_getTournamentNextRound from "../_model/tournaments/_helpers/getTournamentNextRound.js";
 import type * as _model_tournaments__helpers_getTournamentPlayerUserIds from "../_model/tournaments/_helpers/getTournamentPlayerUserIds.js";
@@ -249,6 +255,7 @@ import type * as _model_tournaments_mutations_startTournamentRound from "../_mod
 import type * as _model_tournaments_mutations_toggleTournamentAlignmentsRevealed from "../_model/tournaments/mutations/toggleTournamentAlignmentsRevealed.js";
 import type * as _model_tournaments_mutations_toggleTournamentListsRevealed from "../_model/tournaments/mutations/toggleTournamentListsRevealed.js";
 import type * as _model_tournaments_mutations_updateTournament from "../_model/tournaments/mutations/updateTournament.js";
+import type * as _model_tournaments_mutations_updateTournamentPairingConfig from "../_model/tournaments/mutations/updateTournamentPairingConfig.js";
 import type * as _model_tournaments_queries_getTournament from "../_model/tournaments/queries/getTournament.js";
 import type * as _model_tournaments_queries_getTournamentByTournamentPairing from "../_model/tournaments/queries/getTournamentByTournamentPairing.js";
 import type * as _model_tournaments_queries_getTournamentOpenRound from "../_model/tournaments/queries/getTournamentOpenRound.js";
@@ -288,11 +295,11 @@ import type * as _model_users_queries_getUsers from "../_model/users/queries/get
 import type * as _model_users_queries_internal_getUserByClaimToken from "../_model/users/queries/internal/getUserByClaimToken.js";
 import type * as _model_users_queries_internal_getUserByEmail from "../_model/users/queries/internal/getUserByEmail.js";
 import type * as _model_users_queries_internal_getUserById from "../_model/users/queries/internal/getUserById.js";
+import type * as _model_users_queries_internal_getUserByUsername from "../_model/users/queries/internal/getUserByUsername.js";
 import type * as _model_users_table from "../_model/users/table.js";
-import type * as _model_utils__helpers_testUsers from "../_model/utils/_helpers/testUsers.js";
-import type * as _model_utils_actions_populateUsers from "../_model/utils/actions/populateUsers.js";
 import type * as _model_utils_createTestTournament from "../_model/utils/createTestTournament.js";
 import type * as _model_utils_createTestTournamentMatchResults from "../_model/utils/createTestTournamentMatchResults.js";
+import type * as _model_utils_createTestTournamentPairings from "../_model/utils/createTestTournamentPairings.js";
 import type * as _model_utils_deleteTestTournament from "../_model/utils/deleteTestTournament.js";
 import type * as _model_utils_getTournamentOrganizerList from "../_model/utils/getTournamentOrganizerList.js";
 import type * as _model_utils_getTournamentRegistrationsCsv from "../_model/utils/getTournamentRegistrationsCsv.js";
@@ -321,6 +328,7 @@ import type * as matchResults from "../matchResults.js";
 import type * as migrations from "../migrations.js";
 import type * as photos from "../photos.js";
 import type * as scheduledTasks from "../scheduledTasks.js";
+import type * as test from "../test.js";
 import type * as tournamentCompetitors from "../tournamentCompetitors.js";
 import type * as tournamentPairings from "../tournamentPairings.js";
 import type * as tournamentRegistrations from "../tournamentRegistrations.js";
@@ -349,6 +357,10 @@ declare const fullApi: ApiFromModules<{
   "_fixtures/createMockTournament": typeof _fixtures_createMockTournament;
   "_fixtures/createMockTournamentCompetitor": typeof _fixtures_createMockTournamentCompetitor;
   "_fixtures/fowV4/createMockFowV4MatchResultData": typeof _fixtures_fowV4_createMockFowV4MatchResultData;
+  "_model/_test/_helpers/testUsers": typeof _model__test__helpers_testUsers;
+  "_model/_test/actions/populateUsers": typeof _model__test_actions_populateUsers;
+  "_model/_test/index": typeof _model__test_index;
+  "_model/_test/mutations/cleanUp": typeof _model__test_mutations_cleanUp;
   "_model/common/VisibilityLevel": typeof _model_common_VisibilityLevel;
   "_model/common/_helpers/buildFilteredQuery": typeof _model_common__helpers_buildFilteredQuery;
   "_model/common/_helpers/checkAuth": typeof _model_common__helpers_checkAuth;
@@ -530,6 +542,7 @@ declare const fullApi: ApiFromModules<{
   "_model/tournamentRegistrations/_helpers/getAvailableActions": typeof _model_tournamentRegistrations__helpers_getAvailableActions;
   "_model/tournamentRegistrations/_helpers/getCreateSuccessMessage": typeof _model_tournamentRegistrations__helpers_getCreateSuccessMessage;
   "_model/tournamentRegistrations/_helpers/getDeleteSuccessMessage": typeof _model_tournamentRegistrations__helpers_getDeleteSuccessMessage;
+  "_model/tournamentRegistrations/_helpers/sortTournamentCompetitorsByName": typeof _model_tournamentRegistrations__helpers_sortTournamentCompetitorsByName;
   "_model/tournamentRegistrations/index": typeof _model_tournamentRegistrations_index;
   "_model/tournamentRegistrations/mutations/createTournamentRegistration": typeof _model_tournamentRegistrations_mutations_createTournamentRegistration;
   "_model/tournamentRegistrations/mutations/deleteTournamentRegistration": typeof _model_tournamentRegistrations_mutations_deleteTournamentRegistration;
@@ -571,6 +584,7 @@ declare const fullApi: ApiFromModules<{
   "_model/tournaments/_helpers/extractSearchTokens": typeof _model_tournaments__helpers_extractSearchTokens;
   "_model/tournaments/_helpers/getAvailableActions": typeof _model_tournaments__helpers_getAvailableActions;
   "_model/tournaments/_helpers/getDisplayName": typeof _model_tournaments__helpers_getDisplayName;
+  "_model/tournaments/_helpers/getLastVisibleRound": typeof _model_tournaments__helpers_getLastVisibleRound;
   "_model/tournaments/_helpers/getTournamentDeep": typeof _model_tournaments__helpers_getTournamentDeep;
   "_model/tournaments/_helpers/getTournamentNextRound": typeof _model_tournaments__helpers_getTournamentNextRound;
   "_model/tournaments/_helpers/getTournamentPlayerUserIds": typeof _model_tournaments__helpers_getTournamentPlayerUserIds;
@@ -587,6 +601,7 @@ declare const fullApi: ApiFromModules<{
   "_model/tournaments/mutations/toggleTournamentAlignmentsRevealed": typeof _model_tournaments_mutations_toggleTournamentAlignmentsRevealed;
   "_model/tournaments/mutations/toggleTournamentListsRevealed": typeof _model_tournaments_mutations_toggleTournamentListsRevealed;
   "_model/tournaments/mutations/updateTournament": typeof _model_tournaments_mutations_updateTournament;
+  "_model/tournaments/mutations/updateTournamentPairingConfig": typeof _model_tournaments_mutations_updateTournamentPairingConfig;
   "_model/tournaments/queries/getTournament": typeof _model_tournaments_queries_getTournament;
   "_model/tournaments/queries/getTournamentByTournamentPairing": typeof _model_tournaments_queries_getTournamentByTournamentPairing;
   "_model/tournaments/queries/getTournamentOpenRound": typeof _model_tournaments_queries_getTournamentOpenRound;
@@ -626,11 +641,11 @@ declare const fullApi: ApiFromModules<{
   "_model/users/queries/internal/getUserByClaimToken": typeof _model_users_queries_internal_getUserByClaimToken;
   "_model/users/queries/internal/getUserByEmail": typeof _model_users_queries_internal_getUserByEmail;
   "_model/users/queries/internal/getUserById": typeof _model_users_queries_internal_getUserById;
+  "_model/users/queries/internal/getUserByUsername": typeof _model_users_queries_internal_getUserByUsername;
   "_model/users/table": typeof _model_users_table;
-  "_model/utils/_helpers/testUsers": typeof _model_utils__helpers_testUsers;
-  "_model/utils/actions/populateUsers": typeof _model_utils_actions_populateUsers;
   "_model/utils/createTestTournament": typeof _model_utils_createTestTournament;
   "_model/utils/createTestTournamentMatchResults": typeof _model_utils_createTestTournamentMatchResults;
+  "_model/utils/createTestTournamentPairings": typeof _model_utils_createTestTournamentPairings;
   "_model/utils/deleteTestTournament": typeof _model_utils_deleteTestTournament;
   "_model/utils/getTournamentOrganizerList": typeof _model_utils_getTournamentOrganizerList;
   "_model/utils/getTournamentRegistrationsCsv": typeof _model_utils_getTournamentRegistrationsCsv;
@@ -659,6 +674,7 @@ declare const fullApi: ApiFromModules<{
   migrations: typeof migrations;
   photos: typeof photos;
   scheduledTasks: typeof scheduledTasks;
+  test: typeof test;
   tournamentCompetitors: typeof tournamentCompetitors;
   tournamentPairings: typeof tournamentPairings;
   tournamentRegistrations: typeof tournamentRegistrations;
diff --git a/convex/_model/utils/_helpers/testUsers.ts b/convex/_model/_test/_helpers/testUsers.ts
similarity index 100%
rename from convex/_model/utils/_helpers/testUsers.ts
rename to convex/_model/_test/_helpers/testUsers.ts
diff --git a/convex/_model/utils/actions/populateUsers.ts b/convex/_model/_test/actions/populateUsers.ts
similarity index 100%
rename from convex/_model/utils/actions/populateUsers.ts
rename to convex/_model/_test/actions/populateUsers.ts
diff --git a/convex/_model/_test/index.ts b/convex/_model/_test/index.ts
new file mode 100644
index 00000000..b79fe703
--- /dev/null
+++ b/convex/_model/_test/index.ts
@@ -0,0 +1,2 @@
+export * from './actions/populateUsers';
+export * from './mutations/cleanUp';
diff --git a/convex/_model/_test/mutations/cleanUp.ts b/convex/_model/_test/mutations/cleanUp.ts
new file mode 100644
index 00000000..656a0f28
--- /dev/null
+++ b/convex/_model/_test/mutations/cleanUp.ts
@@ -0,0 +1,24 @@
+import type { TableNamesInDataModel } from 'convex/server';
+import { Infer, v } from 'convex/values';
+
+import type { DataModel } from '../../../_generated/dataModel';
+import type { MutationCtx } from '../../../_generated/server';
+import schema from '../../../schema';
+
+type TableName = TableNamesInDataModel<DataModel>;
+
+export const cleanUpArgs = v.object({
+  preservedTables: v.array(v.string()),
+});
+
+export const cleanUp = async (
+  ctx: MutationCtx,
+  args: Infer<typeof cleanUpArgs>,
+): Promise<void> => {
+  const preserved = new Set(args.preservedTables);
+  const tables = (Object.keys(schema.tables) as TableName[]).filter((t) => !preserved.has(t));
+  for (const table of tables) {
+    const docs = await ctx.db.query(table).collect();
+    await Promise.all(docs.map((doc) => ctx.db.delete(doc._id)));
+  }
+};
diff --git a/convex/_model/common/errors.ts b/convex/_model/common/errors.ts
index e3d2e9b7..252f9c00 100644
--- a/convex/_model/common/errors.ts
+++ b/convex/_model/common/errors.ts
@@ -110,11 +110,9 @@ export const errors = {
   CANNOT_ADD_PAIRINGS_TO_ARCHIVED_TOURNAMENT: 'Cannot add pairings to an archived tournament.',
   CANNOT_ADD_PAIRINGS_TO_DRAFT_TOURNAMENT: 'Cannot add pairings to a draft tournament.',
   CANNOT_ADD_PAIRINGS_TO_IN_PROGRESS_ROUND: 'Cannot add pairings while round is already in-progress.',
-  CANNOT_ADD_PAIRINGS_TO_PUBLISHED_TOURNAMENT: 'Cannot add pairings to a tournament that hasn\'t started yet.',
   CANNOT_DELETE_PAIRINGS_FROM_ARCHIVED_TOURNAMENT: 'Cannot delete pairings from an archived tournament.',
   CANNOT_DELETE_PAIRINGS_FROM_DRAFT_TOURNAMENT: 'Cannot delete pairings from a draft tournament.',
   CANNOT_DELETE_PAIRINGS_FROM_IN_PROGRESS_ROUND: 'Cannot delete pairings while round is in-progress.',
-  CANNOT_DELETE_PAIRINGS_FROM_PUBLISHED_TOURNAMENT: 'Cannot delete pairings from a tournament that hasn\'t started yet.',
   CANNOT_ADD_TOO_MANY_PAIRINGS: 'Cannot add more pairings than the tournament is set-up for.',
   TOURNAMENT_ALREADY_HAS_PAIRINGS_FOR_ROUND: 'Tournament already has pairings for this round.',
 
diff --git a/convex/_model/common/tournamentPairingConfig.ts b/convex/_model/common/tournamentPairingConfig.ts
index 20730f1d..d1ee1451 100644
--- a/convex/_model/common/tournamentPairingConfig.ts
+++ b/convex/_model/common/tournamentPairingConfig.ts
@@ -1,4 +1,36 @@
-import { tournamentPairingConfig as config } from '@ianpaschal/combat-command-game-systems/common';
+import { TournamentPairingPolicy } from '@ianpaschal/combat-command-game-systems/common';
+import { createEnumSchema } from '@ianpaschal/combat-command-game-systems/utils';
 import { zodToConvex } from 'convex-helpers/server/zod';
+import { z } from 'zod';
 
-export const tournamentPairingConfig = zodToConvex(config.schema);
+import { Id } from '../../_generated/dataModel';
+
+export const schema = z.object({
+  orderBy: z.union([z.literal('ranking'), z.literal('random')]),
+  policies: z.object({
+    sameAlignment: createEnumSchema(TournamentPairingPolicy),
+    repeat: createEnumSchema(TournamentPairingPolicy),
+  }),
+  tableCount: z.optional(z.number().min(1)), // TODO: REMOVE POST MIGRATION
+});
+
+export const generationSchema = schema.extend({
+  include: z.array(z.string()).transform((val): Id<'tournamentCompetitors'>[] => val as Id<'tournamentCompetitors'>[]),
+});
+
+export type TournamentPairingConfig = z.infer<typeof schema>;
+
+export type TournamentPairingPolicies = Partial<TournamentPairingConfig['policies']>;
+
+export const defaultValues = {
+  orderBy: 'ranking',
+  policies: {
+    sameAlignment: TournamentPairingPolicy.Allow,
+    repeat: TournamentPairingPolicy.Block,
+  },
+  tableCount: 1,
+} satisfies TournamentPairingConfig;
+
+export const tournamentPairingConfig = zodToConvex(schema);
+
+export const tournamentPairingInput = zodToConvex(generationSchema);
diff --git a/convex/_model/tournamentCompetitors/mutations/createTournamentCompetitor.ts b/convex/_model/tournamentCompetitors/mutations/createTournamentCompetitor.ts
index fcb7ff4c..eea5e72e 100644
--- a/convex/_model/tournamentCompetitors/mutations/createTournamentCompetitor.ts
+++ b/convex/_model/tournamentCompetitors/mutations/createTournamentCompetitor.ts
@@ -36,7 +36,7 @@ export const createTournamentCompetitor = async (
     throw new ConvexError(getErrorMessage('CANNOT_MODIFY_ARCHIVED_TOURNAMENT'));
   }
   const tournamentCompetitors = await ctx.db.query('tournamentCompetitors')
-    .withIndex('by_tournament_id', (q) => q.eq('tournamentId', args.tournamentId))
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', args.tournamentId))
     .collect();
   const existingTeamNames = tournamentCompetitors.map((item) => item.teamName);
   if (args.teamName && existingTeamNames.includes(args.teamName)) {
diff --git a/convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts b/convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts
index 2a44b051..66b1caac 100644
--- a/convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts
+++ b/convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts
@@ -16,10 +16,14 @@ export const getTournamentCompetitorsByTournament = async (
   ctx: QueryCtx,
   args: Infer<typeof getTournamentCompetitorsByTournamentArgs>,
 ): Promise<DeepTournamentCompetitor[]> => {
-  const tournamentCompetitors = await ctx.db.query('tournamentCompetitors')
-    .withIndex('by_tournament_id', (q) => q.eq('tournamentId', args.tournamentId))
+  const results = await ctx.db.query('tournamentCompetitors')
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', args.tournamentId))
     .collect();
-  return (await Promise.all(tournamentCompetitors.map(async (item) => (
+  const deepened = await Promise.all(results.map(async (item) => (
     await deepenTournamentCompetitor(ctx, item, args.rankingRound)
-  )))).sort(sortTournamentCompetitorsByName);
+  )));
+  if (args.rankingRound !== undefined) {
+    return deepened.sort((a, b) => a.rank - b.rank);
+  }
+  return deepened.sort(sortTournamentCompetitorsByName);
 };
diff --git a/convex/_model/tournamentCompetitors/table.ts b/convex/_model/tournamentCompetitors/table.ts
index 6b015cd4..3a212142 100644
--- a/convex/_model/tournamentCompetitors/table.ts
+++ b/convex/_model/tournamentCompetitors/table.ts
@@ -22,4 +22,4 @@ export default defineTable({
   ...editableFields,
   ...computedFields,
 })
-  .index('by_tournament_id', ['tournamentId']);
+  .index('by_tournament', ['tournamentId']);
diff --git a/convex/_model/tournamentPairings/_helpers/assignTables.test.ts b/convex/_model/tournamentPairings/_helpers/assignTables.test.ts
index 9afb9e33..e52b5208 100644
--- a/convex/_model/tournamentPairings/_helpers/assignTables.test.ts
+++ b/convex/_model/tournamentPairings/_helpers/assignTables.test.ts
@@ -13,6 +13,11 @@ import { assignTables } from './assignTables';
 
 const createMockTournament = (competitorCount: number): TournamentDeep => ({
   competitorCount,
+  pairingConfig: {
+    tableCount: Math.ceil(competitorCount / 2),
+    orderBy: 'ranking',
+    policies: { repeat: 'block', sameAlignment: 'allow' },
+  },
 }) as TournamentDeep;
 
 const createMockData = (
diff --git a/convex/_model/tournamentPairings/_helpers/assignTables.ts b/convex/_model/tournamentPairings/_helpers/assignTables.ts
index 5fd2628f..566947ce 100644
--- a/convex/_model/tournamentPairings/_helpers/assignTables.ts
+++ b/convex/_model/tournamentPairings/_helpers/assignTables.ts
@@ -20,7 +20,7 @@ export const assignTables = (
   );
   playedTablesMap.set(null, []);
 
-  const tableCount = (data.tournament?.competitorCount ?? 2) / 2; // TODO: Use actual table count
+  const tableCount = data.tournament.pairingConfig.tableCount!; // TODO remove assertion post MIGRATION
 
   const draftPairings = pairings.map((p) => ({
     ...p,
diff --git a/convex/_model/tournamentPairings/actions/generateDraftTournamentPairings.ts b/convex/_model/tournamentPairings/actions/generateDraftTournamentPairings.ts
index ef1eca59..1dd0dd56 100644
--- a/convex/_model/tournamentPairings/actions/generateDraftTournamentPairings.ts
+++ b/convex/_model/tournamentPairings/actions/generateDraftTournamentPairings.ts
@@ -1,6 +1,7 @@
 import { Infer, v } from 'convex/values';
 
 import { api } from '../../../_generated/api';
+import { Id } from '../../../_generated/dataModel';
 import { ActionCtx } from '../../../_generated/server';
 import { tournamentPairingConfig } from '../../common/tournamentPairingConfig';
 import { DeepTournamentCompetitor } from '../../tournamentCompetitors';
@@ -17,11 +18,14 @@ export const generateDraftTournamentPairingsArgs = v.object({
   tournamentId: v.id('tournaments'),
   round: v.number(),
   config: tournamentPairingConfig,
+  include: v.array(v.id('tournamentCompetitors')),
 });
 
+export type GenerateDraftTournamentPairingsArgs = Infer<typeof generateDraftTournamentPairingsArgs>;
+
 export const generateDraftTournamentPairings = async (
   ctx: ActionCtx,
-  args: Infer<typeof generateDraftTournamentPairingsArgs>,
+  args: GenerateDraftTournamentPairingsArgs,
 ): Promise<DraftTournamentPairing[]> => {
 
   const tournamentCompetitors = await ctx.runQuery(
@@ -30,7 +34,9 @@ export const generateDraftTournamentPairings = async (
     },
   );
 
-  const activeCompetitors = tournamentCompetitors.filter(({ active }) => active);
+  const include = new Set<Id<'tournamentCompetitors'>>(args.include);
+
+  const activeCompetitors = tournamentCompetitors.filter((c) => include.has(c._id));
 
   const orderedCompetitors: DeepTournamentCompetitor[] = [];
   if (args.config.orderBy === 'ranking') {
diff --git a/convex/_model/tournamentPairings/index.ts b/convex/_model/tournamentPairings/index.ts
index c48dddca..8234915e 100644
--- a/convex/_model/tournamentPairings/index.ts
+++ b/convex/_model/tournamentPairings/index.ts
@@ -8,7 +8,9 @@ export {
   deepenTournamentPairing,
   type TournamentPairingDeep,
 } from './_helpers/deepenTournamentPairing';
-export { generateDraftPairings } from './_helpers/generateDraftPairings';
+export {
+  generateDraftPairings,
+} from './_helpers/generateDraftPairings';
 export { TournamentPairingActionKey } from './_helpers/getAvailableActions';
 export { getTournamentPairingDeep } from './_helpers/getTournamentPairingDeep';
 export { getTournamentPairingShallow } from './_helpers/getTournamentPairingShallow';
@@ -24,6 +26,7 @@ export type {
 // Actions
 export {
   generateDraftTournamentPairings,
+  type GenerateDraftTournamentPairingsArgs,
   generateDraftTournamentPairingsArgs,
 } from './actions/generateDraftTournamentPairings';
 export {
diff --git a/convex/_model/tournamentPairings/mutations/createTournamentPairings.ts b/convex/_model/tournamentPairings/mutations/createTournamentPairings.ts
index edab209d..014473b4 100644
--- a/convex/_model/tournamentPairings/mutations/createTournamentPairings.ts
+++ b/convex/_model/tournamentPairings/mutations/createTournamentPairings.ts
@@ -35,9 +35,6 @@ export const createTournamentPairings = async (
   if (tournament.status === 'draft') {
     throw new ConvexError(getErrorMessage('CANNOT_ADD_PAIRINGS_TO_DRAFT_TOURNAMENT'));
   }
-  if (tournament.status === 'published') {
-    throw new ConvexError(getErrorMessage('CANNOT_ADD_PAIRINGS_TO_PUBLISHED_TOURNAMENT'));
-  }
   if (tournament.status === 'archived') {
     throw new ConvexError(getErrorMessage('CANNOT_ADD_PAIRINGS_TO_ARCHIVED_TOURNAMENT'));
   }
@@ -77,9 +74,6 @@ export const createTournamentPairings = async (
         if (!competitor) {
           throw new ConvexError(getErrorMessage('CANNOT_ADD_PAIRING_FOR_MISSING_COMPETITOR'));
         }
-        if (!competitor.active) {
-          throw new ConvexError(getErrorMessage('CANNOT_ADD_PAIRING_FOR_INACTIVE_COMPETITOR'));
-        }
         if (pairedCompetitorIds.has(id)) {
           throw new ConvexError(getErrorMessage('CANNOT_ADD_PAIRING_FOR_ALREADY_PAIRED_COMPETITOR'));
         }
diff --git a/convex/_model/tournamentPairings/mutations/deleteTournamentPairings.ts b/convex/_model/tournamentPairings/mutations/deleteTournamentPairings.ts
index 4bfee889..109937ee 100644
--- a/convex/_model/tournamentPairings/mutations/deleteTournamentPairings.ts
+++ b/convex/_model/tournamentPairings/mutations/deleteTournamentPairings.ts
@@ -30,11 +30,6 @@ export const deleteTournamentPairings = async (
     throw new ConvexError(getErrorMessage('CANNOT_DELETE_PAIRINGS_FROM_DRAFT_TOURNAMENT'));
   }
 
-  // TODO: Technically not really needed...
-  if (tournament.status === 'published') {
-    throw new ConvexError(getErrorMessage('CANNOT_DELETE_PAIRINGS_FROM_PUBLISHED_TOURNAMENT'));
-  }
-
   // TODO: Replace with generic 'archived' error:
   if (tournament.status === 'archived') {
     throw new ConvexError(getErrorMessage('CANNOT_DELETE_PAIRINGS_FROM_ARCHIVED_TOURNAMENT'));
diff --git a/convex/_model/tournamentRegistrations/_helpers/deepenTournamentRegistration.ts b/convex/_model/tournamentRegistrations/_helpers/deepenTournamentRegistration.ts
index c2e3e1d5..e60aa56a 100644
--- a/convex/_model/tournamentRegistrations/_helpers/deepenTournamentRegistration.ts
+++ b/convex/_model/tournamentRegistrations/_helpers/deepenTournamentRegistration.ts
@@ -7,6 +7,7 @@ import { getDocStrict } from '../../common/_helpers/getDocStrict';
 import { getErrorMessage } from '../../common/errors';
 import { getListsByTournamentRegistration } from '../../lists';
 import { checkUserIsTournamentOrganizer } from '../../tournamentOrganizers';
+import { getTournamentResultsByUser } from '../../tournamentResults';
 import { getUser } from '../../users';
 import { getAvailableActions } from './getAvailableActions';
 
@@ -14,6 +15,7 @@ import { getAvailableActions } from './getAvailableActions';
 export const deepenTournamentRegistration = async (
   ctx: QueryCtx,
   doc: Doc<'tournamentRegistrations'>,
+  round?: number,
 ) => {
   const userId = await getAuthUserId(ctx);
   const { details, ...restDoc } = doc;
@@ -25,6 +27,11 @@ export const deepenTournamentRegistration = async (
 
   const tournament = await getDocStrict(ctx, doc.tournamentId);
 
+  const results = await getTournamentResultsByUser(ctx, {
+    userId: doc.userId,
+    tournamentId: doc.tournamentId,
+    round: round ?? tournament?.lastRound ?? 0,
+  });
   const availableActions = await getAvailableActions(ctx, doc);
 
   const isOrganizer = await checkUserIsTournamentOrganizer(ctx, tournament._id, userId);
@@ -43,6 +50,7 @@ export const deepenTournamentRegistration = async (
 
   return {
     ...restDoc,
+    ...results,
     availableActions,
     details: visibleDetails,
     user,
diff --git a/convex/_model/tournamentRegistrations/_helpers/sortTournamentCompetitorsByName.ts b/convex/_model/tournamentRegistrations/_helpers/sortTournamentCompetitorsByName.ts
new file mode 100644
index 00000000..97777b20
--- /dev/null
+++ b/convex/_model/tournamentRegistrations/_helpers/sortTournamentCompetitorsByName.ts
@@ -0,0 +1,6 @@
+import { DeepTournamentRegistration } from './deepenTournamentRegistration';
+
+export const sortTournamentRegistrationsByName = (
+  a: DeepTournamentRegistration,
+  b: DeepTournamentRegistration,
+): number => a.displayName.localeCompare(b.displayName);
diff --git a/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationByTournamentUser.ts b/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationByTournamentUser.ts
index 22d2a7ef..b32f16bf 100644
--- a/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationByTournamentUser.ts
+++ b/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationByTournamentUser.ts
@@ -19,5 +19,9 @@ export const getTournamentRegistrationByTournamentUser = async (
   if (!doc) {
     return null;
   }
+  const tournament = await ctx.db.get(doc.tournamentId);
+  if (!tournament) {
+    return null;
+  }
   return await deepenTournamentRegistration(ctx, doc);
 };
diff --git a/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationsByTournament.ts b/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationsByTournament.ts
index fe14488c..e4702ce8 100644
--- a/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationsByTournament.ts
+++ b/convex/_model/tournamentRegistrations/queries/getTournamentRegistrationsByTournament.ts
@@ -5,19 +5,21 @@ import {
   deepenTournamentRegistration,
   DeepTournamentRegistration,
 } from '../_helpers/deepenTournamentRegistration';
+import { sortTournamentRegistrationsByName } from '../_helpers/sortTournamentCompetitorsByName';
 
 export const getTournamentRegistrationsByTournamentArgs = v.object({
   tournamentId: v.id('tournaments'),
+  rankingRound: v.optional(v.number()),
 });
 
 export const getTournamentRegistrationsByTournament = async (
   ctx: QueryCtx,
   args: Infer<typeof getTournamentRegistrationsByTournamentArgs>,
 ): Promise<DeepTournamentRegistration[]> => {
-  const tournamentRegistrations = await ctx.db.query('tournamentRegistrations')
+  const results = await ctx.db.query('tournamentRegistrations')
     .withIndex('by_tournament', (q) => q.eq('tournamentId', args.tournamentId))
     .collect();
-  return await Promise.all(
-    tournamentRegistrations.map(async (registration) => await deepenTournamentRegistration(ctx, registration)),
-  );
+  return (await Promise.all(results.map(async (item) => (
+    await deepenTournamentRegistration(ctx, item, args.rankingRound)
+  )))).sort(sortTournamentRegistrationsByName);
 };
diff --git a/convex/_model/tournamentResults/_helpers/aggregateTournamentData.ts b/convex/_model/tournamentResults/_helpers/aggregateTournamentData.ts
index 7f5b21f6..00d5254b 100644
--- a/convex/_model/tournamentResults/_helpers/aggregateTournamentData.ts
+++ b/convex/_model/tournamentResults/_helpers/aggregateTournamentData.ts
@@ -28,7 +28,7 @@ export const aggregateTournamentData = async (
     .withIndex('by_tournament', (q) => q.eq('tournamentId', tournament._id))
     .collect();
   const tournamentCompetitors = await ctx.db.query('tournamentCompetitors')
-    .withIndex('by_tournament_id', (q) => q.eq('tournamentId', tournament._id))
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', tournament._id))
     .collect();
   const tournamentPairings = await ctx.db.query('tournamentPairings')
     .withIndex('by_tournament_id', (q) => q.eq('tournamentId', tournament._id))
diff --git a/convex/_model/tournamentResults/mutations/refreshTournamentResult.ts b/convex/_model/tournamentResults/mutations/refreshTournamentResult.ts
index 2e96e9a8..cb5275ff 100644
--- a/convex/_model/tournamentResults/mutations/refreshTournamentResult.ts
+++ b/convex/_model/tournamentResults/mutations/refreshTournamentResult.ts
@@ -29,7 +29,7 @@ export const refreshTournamentResult = async (
     throw new ConvexError(getErrorMessage('TOURNAMENT_NOT_FOUND'));
   }
   const tournamentCompetitors = await ctx.db.query('tournamentCompetitors')
-    .withIndex('by_tournament_id', (q) => q.eq('tournamentId', args.tournamentId))
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', args.tournamentId))
     .collect();
   const tournamentRegistrations = await ctx.db.query('tournamentRegistrations')
     .withIndex('by_tournament', (q) => q.eq('tournamentId', args.tournamentId))
diff --git a/convex/_model/tournaments/_helpers/deepenTournament.ts b/convex/_model/tournaments/_helpers/deepenTournament.ts
index 8f6e9ca6..af2d669b 100644
--- a/convex/_model/tournaments/_helpers/deepenTournament.ts
+++ b/convex/_model/tournaments/_helpers/deepenTournament.ts
@@ -9,6 +9,7 @@ import {
 } from '../../tournamentOrganizers';
 import { getAvailableActions } from './getAvailableActions';
 import { getDisplayName } from './getDisplayName';
+import { getLastVisibleRound } from './getLastVisibleRound';
 import { getTournamentNextRound } from './getTournamentNextRound';
 
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
@@ -24,43 +25,45 @@ import { getTournamentNextRound } from './getTournamentNextRound';
  */
 export const deepenTournament = async (
   ctx: QueryCtx,
-  tournament: Doc<'tournaments'>,
+  doc: Doc<'tournaments'>,
 ) => {
   const userId = await getAuthUserId(ctx);
-  const logoUrl = await getStorageUrl(ctx, tournament.logoStorageId);
-  const bannerUrl = await getStorageUrl(ctx, tournament.bannerStorageId);
-  const availableActions = await getAvailableActions(ctx, tournament);
+  const logoUrl = await getStorageUrl(ctx, doc.logoStorageId);
+  const bannerUrl = await getStorageUrl(ctx, doc.bannerStorageId);
+  const availableActions = await getAvailableActions(ctx, doc);
   const tournamentOrganizers = await getTournamentOrganizersByTournament(ctx, {
-    tournamentId: tournament._id,
+    tournamentId: doc._id,
   });
-  const isOrganizer = await checkUserIsTournamentOrganizer(ctx, tournament._id, userId);
+  const lastVisibleRound = await getLastVisibleRound(ctx, doc);
+  const isOrganizer = await checkUserIsTournamentOrganizer(ctx, doc._id, userId);
   const tournamentCompetitors = await ctx.db.query('tournamentCompetitors')
-    .withIndex('by_tournament_id', (q) => q.eq('tournamentId', tournament._id))
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', doc._id))
     .collect();
   const tournamentRegistrations = await ctx.db.query('tournamentRegistrations')
-    .withIndex('by_tournament', (q) => q.eq('tournamentId', tournament._id))
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', doc._id))
     .collect();
 
   const playerUserIds = tournamentRegistrations.map((r) => r.userId);
   const activePlayerUserIds = tournamentRegistrations.filter((r) => r.active).map((p) => p.userId);
 
   return {
-    ...tournament,
+    ...doc,
     activePlayerCount: activePlayerUserIds.length,
     activePlayerUserIds,
-    alignmentsVisible: isOrganizer || tournament.alignmentsRevealed,
+    alignmentsVisible: isOrganizer || doc.alignmentsRevealed,
     availableActions,
     bannerUrl,
     competitorCount: tournamentCompetitors.length,
-    displayName: getDisplayName(tournament),
-    factionsVisible: isOrganizer || tournament.factionsRevealed,
+    displayName: getDisplayName(doc),
+    factionsVisible: isOrganizer || doc.factionsRevealed,
+    lastRound: lastVisibleRound,
     logoUrl,
-    maxPlayers : tournament.maxCompetitors * tournament.competitorSize,
-    nextRound: getTournamentNextRound(tournament),
+    maxPlayers : doc.maxCompetitors * doc.competitorSize,
+    nextRound: getTournamentNextRound(doc),
     organizers: tournamentOrganizers,
     playerCount: playerUserIds.length,
     playerUserIds,
-    useTeams: tournament.competitorSize > 1,
+    useTeams: doc.competitorSize > 1,
   };
 };
 
diff --git a/convex/_model/tournaments/_helpers/getAvailableActions.ts b/convex/_model/tournaments/_helpers/getAvailableActions.ts
index fc2dc300..a854ff8f 100644
--- a/convex/_model/tournaments/_helpers/getAvailableActions.ts
+++ b/convex/_model/tournaments/_helpers/getAvailableActions.ts
@@ -36,11 +36,6 @@ export enum TournamentActionKey {
 
   ToggleListsRevealed = 'toggleListsRevealed',
 
-  /** Set a published Tournament's status to 'active'. */
-  Start = 'start',
-
-  // TODO: UndoStart
-
   /** Create TournamentPairings for a given round. */
   ConfigureRound = 'configureRound',
 
@@ -135,15 +130,11 @@ export const getAvailableActions = async (
     actions.push(TournamentActionKey.ToggleListsRevealed);
   }
  
-  if (isOrganizer && doc.status === 'published') { // TODO: Check for at least 2 competitors
-    actions.push(TournamentActionKey.Start);
-  }
- 
-  if (isOrganizer && doc.status === 'active' && !hasCurrentRound && hasNextRound) {
+  if (isOrganizer && doc.status !== 'draft' && !hasCurrentRound && hasNextRound) {
     actions.push(TournamentActionKey.ConfigureRound);
   }
  
-  if (isOrganizer && doc.status === 'active' && !hasCurrentRound && hasNextRound && nextRoundPairingCount > 0) {
+  if (isOrganizer && doc.status !== 'draft' && !hasCurrentRound && hasNextRound && nextRoundPairingCount > 0) {
     actions.push(TournamentActionKey.StartRound);
   }
  
diff --git a/convex/_model/tournaments/_helpers/getLastVisibleRound.test.ts b/convex/_model/tournaments/_helpers/getLastVisibleRound.test.ts
new file mode 100644
index 00000000..902cbbd2
--- /dev/null
+++ b/convex/_model/tournaments/_helpers/getLastVisibleRound.test.ts
@@ -0,0 +1,143 @@
+import { GameSystem } from '@ianpaschal/combat-command-game-systems/common';
+import { convexTest } from 'convex-test';
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest';
+
+import { createMockTournament } from '../../../_fixtures/createMockTournament';
+import schema from '../../../schema';
+import { getLastVisibleRound } from './getLastVisibleRound';
+
+describe('getLastVisibleRound', () => {
+  it('returns last round when not final round.', async () => {
+    const t = convexTest(schema);
+
+    const result = await t.run(async (ctx) => {
+      const tournamentId = await ctx.db.insert('tournaments', createMockTournament(GameSystem.FlamesOfWarV4, {
+        lastRound: 1,
+        roundCount: 3,
+        status: 'active',
+      }));
+      const doc = await ctx.db.get(tournamentId);
+      return await getLastVisibleRound(ctx, doc!);
+    });
+
+    expect(result).toBe(1);
+  });
+
+  it('returns last round after the final round, when user is a TO.', async () => {
+    const t = convexTest(schema);
+
+    const { userId, tournamentId } = await t.run(async (ctx) => {
+      const userId = await ctx.db.insert('users', {
+        email: 'to@test.com',
+        username: 'to_test',
+        locationVisibility: 0,
+        nameVisibility: 0,
+      });
+      const tournamentId = await ctx.db.insert('tournaments', createMockTournament(GameSystem.FlamesOfWarV4, {
+        lastRound: 2,
+        roundCount: 3,
+        status: 'active',
+      }));
+      await ctx.db.insert('tournamentOrganizers', { tournamentId, userId });
+      return { userId, tournamentId };
+    });
+
+    const result = await t.withIdentity({ subject: `${userId}|session` }).run(async (ctx) => {
+      const doc = await ctx.db.get(tournamentId);
+      return await getLastVisibleRound(ctx, doc!);
+    });
+
+    expect(result).toBe(2);
+  });
+
+  it('returns round before last after the final round, when user is not a TO.', async () => {
+    const t = convexTest(schema);
+
+    const { userId, tournamentId } = await t.run(async (ctx) => {
+      const userId = await ctx.db.insert('users', {
+        email: 'user@test.com',
+        username: 'user_test',
+        locationVisibility: 0,
+        nameVisibility: 0,
+      });
+      const tournamentId = await ctx.db.insert('tournaments', createMockTournament(GameSystem.FlamesOfWarV4, {
+        lastRound: 2,
+        roundCount: 3,
+        status: 'active',
+      }));
+      return { userId, tournamentId };
+    });
+
+    const result = await t.withIdentity({ subject: `${userId}|session` }).run(async (ctx) => {
+      const doc = await ctx.db.get(tournamentId);
+      return await getLastVisibleRound(ctx, doc!);
+    });
+
+    expect(result).toBe(1);
+  });
+
+  it('returns round before last after the final round, when user is not authenticated.', async () => {
+    const t = convexTest(schema);
+
+    const result = await t.run(async (ctx) => {
+      const tournamentId = await ctx.db.insert('tournaments', createMockTournament(GameSystem.FlamesOfWarV4, {
+        lastRound: 2,
+        roundCount: 3,
+        status: 'active',
+      }));
+      const doc = await ctx.db.get(tournamentId);
+      return await getLastVisibleRound(ctx, doc!);
+    });
+
+    expect(result).toBe(1);
+  });
+
+  it('does not return negative values on first round.', async () => {
+    const t = convexTest(schema);
+
+    const result = await t.run(async (ctx) => {
+      const tournamentId = await ctx.db.insert('tournaments', createMockTournament(GameSystem.FlamesOfWarV4, {
+        lastRound: 0,
+        roundCount: 1,
+        status: 'active',
+      }));
+      const doc = await ctx.db.get(tournamentId);
+      return await getLastVisibleRound(ctx, doc!);
+    });
+
+    expect(result).toBe(0);
+  });
+
+  it('returns undefined when lastRound is not set.', async () => {
+    const t = convexTest(schema);
+
+    await t.run(async (ctx) => {
+      const tournamentId = await ctx.db.insert('tournaments', createMockTournament(GameSystem.FlamesOfWarV4, {
+        roundCount: 3,
+        status: 'active',
+      }));
+      const doc = await ctx.db.get(tournamentId);
+      expect(await getLastVisibleRound(ctx, doc!)).toBeUndefined();
+    });
+  });
+
+  it('returns last round when tournament is archived.', async () => {
+    const t = convexTest(schema);
+
+    const result = await t.run(async (ctx) => {
+      const tournamentId = await ctx.db.insert('tournaments', createMockTournament(GameSystem.FlamesOfWarV4, {
+        lastRound: 2,
+        roundCount: 3,
+        status: 'archived',
+      }));
+      const doc = await ctx.db.get(tournamentId);
+      return await getLastVisibleRound(ctx, doc!);
+    });
+
+    expect(result).toBe(2);
+  });
+});
diff --git a/convex/_model/tournaments/_helpers/getLastVisibleRound.ts b/convex/_model/tournaments/_helpers/getLastVisibleRound.ts
new file mode 100644
index 00000000..643bab1c
--- /dev/null
+++ b/convex/_model/tournaments/_helpers/getLastVisibleRound.ts
@@ -0,0 +1,30 @@
+import { getAuthUserId } from '@convex-dev/auth/server';
+
+import { Doc } from '../../../_generated/dataModel';
+import { QueryCtx } from '../../../_generated/server';
+import { checkUserIsTournamentOrganizer } from '../../tournamentOrganizers';
+
+/**
+ * Determines the last tournament round visible to the current user.
+ * Non-organizers cannot view final round rankings until the tournament is archived.
+ * @returns The last round which should be visible to the current user
+ */
+export const getLastVisibleRound = async (
+  ctx: QueryCtx,
+  doc: Doc<'tournaments'>,
+): Promise<number | undefined> => {
+  const userId = await getAuthUserId(ctx);
+  const isOrganizer = await checkUserIsTournamentOrganizer(ctx, doc._id, userId);
+
+  // Always show true last round to organizers or if the tournament has ended:
+  if (isOrganizer || doc.status === 'archived') {
+    return doc.lastRound;
+  }
+
+  // Show penultimate round to players if last round has been completed:
+  if (doc.lastRound !== undefined && doc.lastRound + 1 === doc.roundCount) {
+    return Math.max(doc.lastRound - 1, 0);
+  }
+
+  return doc.lastRound;
+};
diff --git a/convex/_model/tournaments/index.ts b/convex/_model/tournaments/index.ts
index f5ed1b01..3f54696c 100644
--- a/convex/_model/tournaments/index.ts
+++ b/convex/_model/tournaments/index.ts
@@ -62,6 +62,10 @@ export {
   updateTournament,
   updateTournamentArgs,
 } from './mutations/updateTournament';
+export {
+  updateTournamentPairingConfig,
+  updateTournamentPairingConfigArgs,
+} from './mutations/updateTournamentPairingConfig';
 
 // Queries
 export {
diff --git a/convex/_model/tournaments/mutations/deleteTournament.ts b/convex/_model/tournaments/mutations/deleteTournament.ts
index b4a7c5e3..ccbba7ae 100644
--- a/convex/_model/tournaments/mutations/deleteTournament.ts
+++ b/convex/_model/tournaments/mutations/deleteTournament.ts
@@ -43,7 +43,7 @@ export const deleteTournament = async (
 
   // Cascade to Tournament Competitors:
   const tournamentCompetitors = await ctx.db.query('tournamentCompetitors')
-    .withIndex('by_tournament_id', (q) => q.eq('tournamentId', args.id))
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', args.id))
     .collect();
   for (const record of tournamentCompetitors) {
     await ctx.db.delete(record._id);
diff --git a/convex/_model/tournaments/mutations/startTournamentRound.ts b/convex/_model/tournaments/mutations/startTournamentRound.ts
index b118370c..fe38a2a9 100644
--- a/convex/_model/tournaments/mutations/startTournamentRound.ts
+++ b/convex/_model/tournaments/mutations/startTournamentRound.ts
@@ -34,9 +34,6 @@ export const startTournamentRound = async (
   if (tournament.status === 'draft') {
     throw new ConvexError(getErrorMessage('CANNOT_OPEN_ROUND_ON_DRAFT_TOURNAMENT'));
   }
-  if (tournament.status === 'published') {
-    throw new ConvexError(getErrorMessage('CANNOT_OPEN_ROUND_ON_PUBLISHED_TOURNAMENT'));
-  }
   if (tournament.status === 'archived') {
     throw new ConvexError(getErrorMessage('CANNOT_OPEN_ROUND_ON_ARCHIVED_TOURNAMENT'));
   }
@@ -53,8 +50,9 @@ export const startTournamentRound = async (
     round: nextRound,
   });
 
-  // Open the round:
+  // Open the round (and activate the tournament if it's still in published state):
   await ctx.db.patch(args.id, {
     currentRound: nextRound,
+    status: 'active',
   });
 };
diff --git a/convex/_model/tournaments/mutations/updateTournamentPairingConfig.ts b/convex/_model/tournaments/mutations/updateTournamentPairingConfig.ts
new file mode 100644
index 00000000..d2ea0c6b
--- /dev/null
+++ b/convex/_model/tournaments/mutations/updateTournamentPairingConfig.ts
@@ -0,0 +1,23 @@
+import { Infer, v } from 'convex/values';
+
+import { MutationCtx } from '../../../_generated/server';
+import { tournamentPairingConfig } from '../../common/tournamentPairingConfig';
+import { checkTournamentAuth } from '../_helpers/checkTournamentAuth';
+import { getTournamentShallow } from '../_helpers/getTournamentShallow';
+
+export const updateTournamentPairingConfigArgs = v.object({
+  tournamentId: v.id('tournaments'),
+  pairingConfig: tournamentPairingConfig,
+});
+
+export const updateTournamentPairingConfig = async (
+  ctx: MutationCtx,
+  args: Infer<typeof updateTournamentPairingConfigArgs>,
+): Promise<void> => {
+  const tournament = await getTournamentShallow(ctx, args.tournamentId);
+  checkTournamentAuth(ctx, tournament);
+  await ctx.db.patch(args.tournamentId, {
+    pairingConfig: args.pairingConfig,
+    modifiedAt: Date.now(),
+  });
+};
diff --git a/convex/_model/tournaments/queries/getTournamentOpenRound.ts b/convex/_model/tournaments/queries/getTournamentOpenRound.ts
index c37f4dae..250ac45e 100644
--- a/convex/_model/tournaments/queries/getTournamentOpenRound.ts
+++ b/convex/_model/tournaments/queries/getTournamentOpenRound.ts
@@ -1,7 +1,6 @@
 import { Infer, v } from 'convex/values';
 
 import { QueryCtx } from '../../../_generated/server';
-import { getTournamentShallow } from '../_helpers/getTournamentShallow';
 
 export const getTournamentOpenRoundArgs = v.object({
   id: v.id('tournaments'),
@@ -23,7 +22,10 @@ export const getTournamentOpenRound = async (
   ctx: QueryCtx,
   args: Infer<typeof getTournamentOpenRoundArgs>,
 ) => {
-  const tournament = await getTournamentShallow(ctx, args.id);
+  const tournament = await ctx.db.get(args.id);
+  if (!tournament) {
+    return null;
+  }
   
   if (tournament.status !== 'active' || tournament.currentRound === undefined) {
     return null;
diff --git a/convex/_model/users/actions/internal/setUserDefaultAvatar.ts b/convex/_model/users/actions/internal/setUserDefaultAvatar.ts
index c1fee2d9..de8301a7 100644
--- a/convex/_model/users/actions/internal/setUserDefaultAvatar.ts
+++ b/convex/_model/users/actions/internal/setUserDefaultAvatar.ts
@@ -23,7 +23,7 @@ export const setUserDefaultAvatar = async (
   }
 
   // Fetch avatar
-  const avatarUrl = `https://api.dicebear.com/7.x/bottts-neutral/svg?seed=${Math.random()}&scale=75`;
+  const avatarUrl = `https://api.dicebear.com/7.x/bottts-neutral/svg?seed=${encodeURIComponent(user.username)}&scale=75`;
   const avatarResponse = await fetch(avatarUrl);
   if (!avatarResponse.ok) {
     throw new Error('Failed to fetch avatar');
diff --git a/convex/_model/users/actions/inviteUser.ts b/convex/_model/users/actions/inviteUser.ts
index 90fc104d..088e8380 100644
--- a/convex/_model/users/actions/inviteUser.ts
+++ b/convex/_model/users/actions/inviteUser.ts
@@ -14,6 +14,7 @@ import { checkAuth } from '../../common/_helpers/checkAuth';
 import { getErrorMessage } from '../../common/errors';
 import { VisibilityLevel } from '../../common/VisibilityLevel';
 import { createClaimToken } from '../_helpers/createClaimToken';
+import { generateUsername } from '../_helpers/generateUsername';
 import { hashClaimToken } from '../_helpers/hashClaimToken';
 
 export const inviteUserArgs = v.object({
@@ -55,12 +56,17 @@ export const inviteUser = async (
     });
     user = existingUser;
   } else {
+    let username = generateUsername();
+    while (await ctx.runQuery(internal.users.getUserByUsername, { username })) {
+      username = generateUsername();
+    }
     const { user: createdUser } = await createAccount(ctx, {
       provider: 'password',
       account: { id: email },
       profile: {
         ...restArgs,
         email,
+        username,
         locationVisibility: VisibilityLevel.Hidden,
         nameVisibility: VisibilityLevel.Tournaments,
         claimTokenHash: await hashClaimToken(claimToken),
diff --git a/convex/_model/users/index.ts b/convex/_model/users/index.ts
index dda7ac3c..3c55e067 100644
--- a/convex/_model/users/index.ts
+++ b/convex/_model/users/index.ts
@@ -78,3 +78,7 @@ export {
   getUserById,
   getUserByIdArgs,
 } from './queries/internal/getUserById';
+export {
+  getUserByUsername,
+  getUserByUsernameArgs,
+} from './queries/internal/getUserByUsername';
diff --git a/convex/_model/users/queries/internal/getUserByUsername.ts b/convex/_model/users/queries/internal/getUserByUsername.ts
new file mode 100644
index 00000000..448e74f0
--- /dev/null
+++ b/convex/_model/users/queries/internal/getUserByUsername.ts
@@ -0,0 +1,15 @@
+import { Infer, v } from 'convex/values';
+
+import { Doc } from '../../../../_generated/dataModel';
+import { QueryCtx } from '../../../../_generated/server';
+
+export const getUserByUsernameArgs = v.object({
+  username: v.string(),
+});
+
+export const getUserByUsername = async (
+  ctx: QueryCtx,
+  args: Infer<typeof getUserByUsernameArgs>,
+): Promise<Doc<'users'> | null> => await ctx.db.query('users')
+  .withIndex('by_username', (q) => q.eq('username', args.username))
+  .first();
diff --git a/convex/_model/users/table.ts b/convex/_model/users/table.ts
index e7787922..b4a4bbf3 100644
--- a/convex/_model/users/table.ts
+++ b/convex/_model/users/table.ts
@@ -8,7 +8,7 @@ export const editableFields = {
   givenName: v.optional(v.string()),
   locationVisibility: v.number(), 
   nameVisibility: v.number(), 
-  username: v.optional(v.string()),
+  username: v.string(),
 };
 
 export const computedFields = {
diff --git a/convex/_model/utils/createTestTournament.ts b/convex/_model/utils/createTestTournament.ts
index 7d78d4b4..5b0149ec 100644
--- a/convex/_model/utils/createTestTournament.ts
+++ b/convex/_model/utils/createTestTournament.ts
@@ -2,6 +2,7 @@ import { GameSystem } from '@ianpaschal/combat-command-game-systems/common';
 import { Infer, v } from 'convex/values';
 
 import { createMockTournament } from '../../_fixtures/createMockTournament';
+import { Id } from '../../_generated/dataModel';
 import { MutationCtx } from '../../_generated/server';
 import { getStaticEnumConvexValidator } from '../common/_helpers/getStaticEnumConvexValidator';
 import { tournamentStatus } from '../common/tournamentStatus';
@@ -37,8 +38,8 @@ export const createTestTournament = async (
     gameSystem,
     competitorCount,
   }: Infer<typeof createTestTournamentArgs>,
-): Promise<void> => {
-  const maxCompetitors = competitorCount ?? useTeams ? 12 : 24;
+): Promise<Id<'tournaments'>> => {
+  const maxCompetitors = competitorCount ?? (useTeams ? 12 : 24);
   const competitorSize = useTeams ? 3 : 1;
 
   // 1. Gather users
@@ -106,4 +107,6 @@ export const createTestTournament = async (
       }
     }
   }
+
+  return tournamentId;
 };
diff --git a/convex/_model/utils/createTestTournamentPairings.ts b/convex/_model/utils/createTestTournamentPairings.ts
new file mode 100644
index 00000000..2e8555fd
--- /dev/null
+++ b/convex/_model/utils/createTestTournamentPairings.ts
@@ -0,0 +1,38 @@
+import { Infer, v } from 'convex/values';
+
+import { Id } from '../../_generated/dataModel';
+import { MutationCtx } from '../../_generated/server';
+import { defaultValues } from '../common/tournamentPairingConfig';
+import { getTournamentCompetitorsByTournament } from '../tournamentCompetitors';
+import { generateDraftPairings } from '../tournamentPairings/_helpers/generateDraftPairings';
+
+export const createTestTournamentPairingsArgs = v.object({
+  tournamentId: v.id('tournaments'),
+  round: v.number(),
+});
+
+export const createTestTournamentPairings = async (
+  ctx: MutationCtx,
+  { tournamentId, round }: Infer<typeof createTestTournamentPairingsArgs>,
+): Promise<Id<'tournamentPairings'>[]> => {
+  const competitors = await getTournamentCompetitorsByTournament(ctx, { tournamentId });
+  const activeCompetitors = competitors.filter((c) => c.active);
+
+  const pairs = generateDraftPairings(activeCompetitors, defaultValues.policies);
+
+  const pairingIds: Id<'tournamentPairings'>[] = [];
+  let tableNumber = 1;
+
+  for (const [competitor0, competitor1] of pairs) {
+    const id = await ctx.db.insert('tournamentPairings', {
+      tournamentId,
+      round,
+      tournamentCompetitor0Id: competitor0._id,
+      tournamentCompetitor1Id: competitor1?._id ?? null,
+      table: competitor1 ? tableNumber++ : null,
+    });
+    pairingIds.push(id);
+  }
+
+  return pairingIds;
+};
diff --git a/convex/_model/utils/deleteTestTournament.ts b/convex/_model/utils/deleteTestTournament.ts
index c503d384..cf81a9f9 100644
--- a/convex/_model/utils/deleteTestTournament.ts
+++ b/convex/_model/utils/deleteTestTournament.ts
@@ -16,7 +16,7 @@ export const deleteTestTournament = async (
 
   // 2. Delete competitors
   const competitors = await ctx.db.query('tournamentCompetitors')
-    .withIndex('by_tournament_id', (q) => q.eq('tournamentId', id))
+    .withIndex('by_tournament', (q) => q.eq('tournamentId', id))
     .collect();
   competitors.forEach(async ({ _id }) => {
     await ctx.db.delete(_id);
diff --git a/convex/_model/utils/index.ts b/convex/_model/utils/index.ts
index 9899c6b5..7a2f1992 100644
--- a/convex/_model/utils/index.ts
+++ b/convex/_model/utils/index.ts
@@ -1,6 +1,3 @@
-export {
-  populateUsers,
-} from './actions/populateUsers';
 export {
   createTestTournament,
   createTestTournamentArgs,
@@ -9,6 +6,10 @@ export {
   createTestTournamentMatchResults,
   createTestTournamentMatchResultsArgs,
 } from './createTestTournamentMatchResults';
+export {
+  createTestTournamentPairings,
+  createTestTournamentPairingsArgs,
+} from './createTestTournamentPairings';
 export {
   deleteTestTournament,
   deleteTestTournamentArgs,
diff --git a/convex/migrations.ts b/convex/migrations.ts
index 4e1e8d09..49fbd94a 100644
--- a/convex/migrations.ts
+++ b/convex/migrations.ts
@@ -80,7 +80,7 @@ export const moveSoloCompetitorScoreAdjustments = migrations.define({
 
     // Find all competitors for this tournament that have adjustments to migrate:
     const competitors = await ctx.db.query('tournamentCompetitors')
-      .withIndex('by_tournament_id', (q) => q.eq('tournamentId', doc._id))
+      .withIndex('by_tournament', (q) => q.eq('tournamentId', doc._id))
       .collect();
 
     let anyMoved = false;
@@ -135,6 +135,21 @@ export const backfillListSubmittedAt = migrations.define({
   },
 });
 
+export const addTableCountToPairingConfig = migrations.define({
+  table: 'tournaments',
+  migrateOne: async (ctx, doc) => {
+    if (doc.pairingConfig.tableCount != null) {
+      return;
+    }
+    await ctx.db.patch(doc._id, {
+      pairingConfig: {
+        ...doc.pairingConfig,
+        tableCount: Math.ceil(doc.maxCompetitors / 2),
+      },
+    });
+  },
+});
+
 export const convertPlayedAt = migrations.define({
   table: 'matchResults',
   migrateOne: async (ctx, doc) => {
diff --git a/convex/test.ts b/convex/test.ts
new file mode 100644
index 00000000..e7f79c97
--- /dev/null
+++ b/convex/test.ts
@@ -0,0 +1,11 @@
+import { internalAction, internalMutation } from './_generated/server';
+import * as model from './_model/_test';
+
+export const cleanUp = internalMutation({
+  args: model.cleanUpArgs,
+  handler: model.cleanUp,
+});
+
+export const populateUsers = internalAction({
+  handler: model.populateUsers,
+});
diff --git a/convex/tournaments.ts b/convex/tournaments.ts
index f9496111..0228306f 100644
--- a/convex/tournaments.ts
+++ b/convex/tournaments.ts
@@ -35,6 +35,11 @@ export const updateTournament = mutationWithTrigger({
   handler: model.updateTournament,
 });
 
+export const updateTournamentPairingConfig = mutation({
+  args: model.updateTournamentPairingConfigArgs,
+  handler: model.updateTournamentPairingConfig,
+});
+
 export const deleteTournament = mutation({
   args: model.deleteTournamentArgs,
   handler: model.deleteTournament,
diff --git a/convex/users.ts b/convex/users.ts
index d7d6fbd8..b58ea8a0 100644
--- a/convex/users.ts
+++ b/convex/users.ts
@@ -35,6 +35,11 @@ export const getUserById = internalQuery({
   handler: model.getUserById,
 });
 
+export const getUserByUsername = internalQuery({
+  args: model.getUserByUsernameArgs,
+  handler: model.getUserByUsername,
+});
+
 export const updateUserEmail = internalMutation({
   args: model.updateUserEmailArgs,
   handler: model.updateUserEmail,
diff --git a/convex/utils.ts b/convex/utils.ts
index 66f7101c..b0f23e7b 100644
--- a/convex/utils.ts
+++ b/convex/utils.ts
@@ -1,5 +1,4 @@
 import {
-  internalAction,
   internalMutation,
   internalQuery,
   mutation,
@@ -16,6 +15,11 @@ export const createTestTournamentMatchResults = mutation({
   handler: model.createTestTournamentMatchResults,
 });
 
+export const createTestTournamentPairings = mutation({
+  args: model.createTestTournamentPairingsArgs,
+  handler: model.createTestTournamentPairings,
+});
+
 export const deleteTestTournament = mutation({
   args: model.deleteTestTournamentArgs,
   handler: model.deleteTestTournament,
@@ -31,10 +35,6 @@ export const revealTournamentPlayerNames = internalMutation({
   handler: model.revealTournamentPlayerNames,
 });
 
-export const populateUsers = internalAction({
-  handler: model.populateUsers,
-});
-
 export const refreshSearchIndex = internalMutation({
   args: model.refreshSearchIndexArgs,
   handler: model.refreshSearchIndex,
diff --git a/package-lock.json b/package-lock.json
index 9bb7271f..852a266b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,7 @@
         "@edge-runtime/vm": "^5.0.0",
         "@faker-js/faker": "^9.6.0",
         "@ianpaschal/eslint-config": "^1.0.1",
+        "@playwright/test": "^1.60.0",
         "@stylistic/stylelint-config": "^2.0.0",
         "@stylistic/stylelint-plugin": "^3.1.0",
         "@testing-library/jest-dom": "^6.9.1",
@@ -2983,6 +2984,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@radix-ui/colors": {
       "version": "3.0.0",
       "license": "MIT"
@@ -10169,6 +10186,53 @@
         "node": ">=6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "dev": true,
diff --git a/package.json b/package.json
index f4b57d93..b3e77ea1 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "lint:scss": "stylelint '**/*.scss'",
     "prepare": "husky",
     "test": "vitest --run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:slow": "SLOW_MO=500 playwright test --headed",
     "gen:component": "node scripts/generateComponent.js",
     "release:prepare": "node scripts/prepareRelease.js",
     "release:finish": "node scripts/finishRelease.js"
@@ -84,6 +86,7 @@
     "@edge-runtime/vm": "^5.0.0",
     "@faker-js/faker": "^9.6.0",
     "@ianpaschal/eslint-config": "^1.0.1",
+    "@playwright/test": "^1.60.0",
     "@stylistic/stylelint-config": "^2.0.0",
     "@stylistic/stylelint-plugin": "^3.1.0",
     "@testing-library/jest-dom": "^6.9.1",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 00000000..f128d6a7
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,48 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const LOCAL_CONVEX_DEPLOYMENT = 'local:local-ian_paschal-combat_command-1';
+const LOCAL_CONVEX_URL = 'http://127.0.0.1:3210';
+
+if (!process.env.CI) {
+  process.env.CONVEX_DEPLOYMENT = LOCAL_CONVEX_DEPLOYMENT;
+  process.env.VITE_CONVEX_URL = LOCAL_CONVEX_URL;
+}
+
+export default defineConfig({
+  testDir: './test',
+  globalSetup: './test/globalSetup.ts',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: process.env.CI ? 'html' : 'list',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+  webServer: [
+
+    // In CI the backend is a Convex preview deployment already running in the cloud —
+    // only start the local dev server when running tests locally.
+    ...(!process.env.CI ? [{
+      command: 'npx convex dev --tail-logs disable > /dev/null 2>&1',
+      url: LOCAL_CONVEX_URL,
+      reuseExistingServer: false,
+      timeout: 60000,
+    }] : []),
+    {
+      command: 'npm run dev:frontend > /dev/null 2>&1',
+      url: 'http://localhost:5173',
+      reuseExistingServer: !process.env.CI,
+    },
+  ],
+  projects: [
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        launchOptions: { slowMo: process.env.SLOW_MO ? parseInt(process.env.SLOW_MO) : 0 },
+      },
+    },
+  ],
+});
diff --git a/src/api.ts b/src/api.ts
index c7b3e924..1c220fb2 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -11,6 +11,12 @@ export {
 export {
   type Faction,
 } from '../convex/_model/common/faction';
+export {
+  type TournamentPairingConfig,
+  defaultValues as tournamentPairingConfigDefaultValues,
+  schema as tournamentPairingConfigSchema,
+  type TournamentPairingPolicies,
+} from '../convex/_model/common/tournamentPairingConfig';
 export type {
   RankingFactor,
   TournamentStatus,
@@ -86,6 +92,7 @@ export {
 // Tournament Pairings
 export {
   type DraftTournamentPairing,
+  type GenerateDraftTournamentPairingsArgs,
   type ShallowTournamentPairing,
   type TournamentPairingDeep as TournamentPairing,
   TournamentPairingActionKey,
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index 4b587572..5a943d84 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -10,6 +10,7 @@ import { Ellipsis } from 'lucide-react';
 import { DeviceSize, useDeviceSize } from '~/hooks/useDeviceSize';
 
 export interface ContextMenuProps {
+  'aria-label'?: string;
   className?: string;
   actions: MenuItem[],
   size?: ElementSize;
@@ -17,6 +18,7 @@ export interface ContextMenuProps {
 }
 
 export const ContextMenu = ({
+  'aria-label': ariaLabel,
   className,
   actions,
   size = 'normal',
@@ -27,6 +29,7 @@ export const ContextMenu = ({
   return (
     <Menu items={actions} mobile={isMobile}>
       <Button
+        aria-label={ariaLabel}
         className={className}
         icon={<Ellipsis />}
         size={size}
diff --git a/src/components/FactionIndicator/FactionIndicator.tsx b/src/components/FactionIndicator/FactionIndicator.tsx
index 4cb8e7ce..6b885e6f 100644
--- a/src/components/FactionIndicator/FactionIndicator.tsx
+++ b/src/components/FactionIndicator/FactionIndicator.tsx
@@ -1,30 +1,31 @@
 import { getAlignmentDisplayName } from '@ianpaschal/combat-command-game-systems/common';
 import clsx from 'clsx';
 
-import { Alignment, Faction } from '~/api';
+import { Alignment } from '~/api';
 import { InfoPopover } from '~/components/generic/InfoPopover';
 import { getAlignmentColor } from './FactionIndicator.utils';
 
 import styles from './FactionIndicator.module.scss';
 
 export interface FactionIndicatorProps {
-  alignments: Alignment[];
-  factions: Faction[];
+  alignment: Alignment | Alignment[] | null;
+
+  // factions: Faction[];
   className?: string;
 }
 
 export const FactionIndicator = ({
-  alignments,
+  alignment,
 
   // factions,
   className,
 }: FactionIndicatorProps): JSX.Element => {
 
   // FIXME: Be smarter about showing competitors (teams) with multiple alignments
-  const primaryAlignment = alignments[0];
+  const primaryAlignment = Array.isArray(alignment) ? (alignment.length ? alignment[0] : null) : (alignment ?? null);
 
   const color = getAlignmentColor(primaryAlignment);
-  const displayName = getAlignmentDisplayName(primaryAlignment) ?? 'Unknown Alignment';
+  const displayName = primaryAlignment && getAlignmentDisplayName(primaryAlignment) || 'Unknown Alignment';
 
   return (
     <InfoPopover content={displayName}>
diff --git a/src/components/FactionIndicator/FactionIndicator.utils.ts b/src/components/FactionIndicator/FactionIndicator.utils.ts
index ac64e25a..b34b2d50 100644
--- a/src/components/FactionIndicator/FactionIndicator.utils.ts
+++ b/src/components/FactionIndicator/FactionIndicator.utils.ts
@@ -4,8 +4,11 @@ import { Alignment as TeamYankeeV2 } from '@ianpaschal/combat-command-game-syste
 import { Alignment } from '~/api';
 
 export const getAlignmentColor = (
-  alignment?: Alignment,
-): 'red' | 'blue' | 'mixed' => {
+  alignment?: Alignment | null,
+): 'red' | 'blue' | 'gray' | 'mixed' => {
+  if (alignment === null || alignment === undefined) {
+    return 'gray';
+  }
   if (alignment === FlamesOfWarV4.Allies) {
     return 'blue';
   }
diff --git a/src/components/FooterBar/FooterBar.tsx b/src/components/FooterBar/FooterBar.tsx
index 99eb124d..9c6b5e77 100644
--- a/src/components/FooterBar/FooterBar.tsx
+++ b/src/components/FooterBar/FooterBar.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { sx } from '@ianpaschal/combat-command-components';
 import clsx from 'clsx';
 
 import { MAX_WIDTH } from '~/settings';
@@ -16,7 +17,7 @@ export const FooterBar = ({
   children,
   className,
 }: FooterBarProps): JSX.Element => (
-  <div className={styles.Root}>
+  <div className={sx({ variant: 'surface', border: 'top' })}>
     <div className={clsx(styles.Content, className)} style={{ maxWidth }}>
       {children}
     </div>
diff --git a/src/components/PageWrapper/PageWrapper.module.scss b/src/components/PageWrapper/PageWrapper.module.scss
index d48987e0..021c8286 100644
--- a/src/components/PageWrapper/PageWrapper.module.scss
+++ b/src/components/PageWrapper/PageWrapper.module.scss
@@ -1,5 +1,6 @@
 @use "/src/style/variables";
 @use "/src/style/flex";
+@use "/src/style/text";
 @use "/src/style/backgrounds";
 
 $header-height: 2.5rem;
@@ -63,19 +64,22 @@ $header-height: 2.5rem;
 
   &_Header {
     display: grid;
-    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
+    grid-template-columns: 1fr min-content 1fr;
     align-items: center;
-    justify-items: center;
-
     min-height: $header-height;
 
     h1 {
+      @include text.single-line;
+
       grid-column: 2;
     }
-  }
 
-  &_ContextMenu {
-    grid-column: 3;
+    &_Right {
+      display: flex;
+      grid-column: 3;
+      gap: 1rem;
+      justify-content: flex-end;
+    }
   }
 
   &_Body {
diff --git a/src/components/PageWrapper/PageWrapper.tsx b/src/components/PageWrapper/PageWrapper.tsx
index 8b3d3dc6..ef8bcbe7 100644
--- a/src/components/PageWrapper/PageWrapper.tsx
+++ b/src/components/PageWrapper/PageWrapper.tsx
@@ -1,9 +1,4 @@
-import {
-  cloneElement,
-  ReactElement,
-  ReactNode,
-  useEffect,
-} from 'react';
+import { ReactNode, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Button, ScrollArea } from '@ianpaschal/combat-command-components';
 import clsx from 'clsx';
@@ -23,7 +18,7 @@ export interface PageWrapperProps {
   title?: string;
   hideTitle?: boolean;
   banner?: ReactNode;
-  contextMenu?: ReactElement;
+  actions?: ReactNode;
 }
 
 export const PageWrapper = ({
@@ -35,7 +30,7 @@ export const PageWrapper = ({
   title,
   hideTitle = false,
   banner,
-  contextMenu,
+  actions,
 }: PageWrapperProps): JSX.Element => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -67,9 +62,9 @@ export const PageWrapper = ({
               {title && (
                 <h1>{title}</h1>
               )}
-              {contextMenu && cloneElement(contextMenu, {
-                className: clsx(contextMenu.props.className, styles.PageWrapper_ContextMenu),
-              })}
+              <div className={styles.PageWrapper_Header_Right}>
+                {actions}
+              </div>
             </div>
           )}
           <div className={styles.PageWrapper_Body}>
diff --git a/src/components/ScoreAdjustmentFields/ScoreAdjustmentFields.tsx b/src/components/ScoreAdjustmentFields/ScoreAdjustmentFields.tsx
index 040c24d0..e1473656 100644
--- a/src/components/ScoreAdjustmentFields/ScoreAdjustmentFields.tsx
+++ b/src/components/ScoreAdjustmentFields/ScoreAdjustmentFields.tsx
@@ -39,7 +39,7 @@ export const ScoreAdjustmentFields = ({
 
   const safeValue = result.success ? result.data : undefined;
 
-  const roundOptions = getRoundOptions(tournament.roundCount);
+  const roundOptions = getRoundOptions(tournament);
 
   const { getRankingFactorOptions } = getGameSystem(tournament.gameSystem);
   const factorOptions = getRankingFactorOptions().filter(({ value }) => (
diff --git a/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.module.scss b/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.module.scss
index 9637dabe..631c94d9 100644
--- a/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.module.scss
+++ b/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.module.scss
@@ -1,10 +1,16 @@
 @use "/src/style/flex";
 
 .TournamentCompetitorIdentity {
+  // <TournamentCompetitorIdentity/> has an sx variant applied, and thus an invisible border:
+  --padding: 0.5rem;
+  --padding-end: 1rem;
+
   @include flex.row($gap: 0.75rem);
 
-  margin: -0.5rem;
-  padding: 0.5rem;
+  margin: calc(-1 * var(--padding));
+  margin-right: calc(-1 * var(--padding-end));
+  padding: calc(var(--padding) - var(--border-width));
+  padding-right: calc(var(--padding-end) - var(--border-width));
 
   &[data-clickable="false"] {
     pointer-events: none;
diff --git a/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.tsx b/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.tsx
index e88005af..37fddad4 100644
--- a/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.tsx
+++ b/src/components/TournamentCompetitorIdentity/TournamentCompetitorIdentity.tsx
@@ -1,21 +1,19 @@
-import { MouseEvent, ReactElement } from 'react';
+import { MouseEvent } from 'react';
 import { getStyleClassNames } from '@ianpaschal/combat-command-components';
 import clsx from 'clsx';
-import { Ghost, Users } from 'lucide-react';
 
 import { TournamentCompetitor, TournamentCompetitorId } from '~/api';
 import { Avatar } from '~/components/generic/Avatar';
 import { TournamentCompetitorAvatar } from '~/components/IdentityBadge';
-import { useGetTournamentCompetitor } from '~/services/tournamentCompetitors';
 
 import styles from './TournamentCompetitorIdentity.module.scss';
 
 export interface TournamentCompetitorIdentityProps {
   className?: string;
   loading?: boolean;
+  disabled?: boolean;
   placeholder?: Pick<TournamentCompetitor, 'displayName'>;
-  tournamentCompetitor?: TournamentCompetitor | null;
-  tournamentCompetitorId?: TournamentCompetitorId;
+  subject?: TournamentCompetitor | null;
   onClick?: (id?: TournamentCompetitorId) => void;
   size?: 'small' | 'normal' | 'large';
 }
@@ -23,49 +21,19 @@ export interface TournamentCompetitorIdentityProps {
 export const TournamentCompetitorIdentity = ({
   className,
   loading = false,
+  disabled = false,
   placeholder,
-  tournamentCompetitor,
-  tournamentCompetitorId,
+  subject,
   onClick,
   size = 'normal',
 }: TournamentCompetitorIdentityProps): JSX.Element => {
-  const fetch = !tournamentCompetitor && tournamentCompetitorId;
-  const { data, loading: dataLoading } = useGetTournamentCompetitor(fetch ? {
-    id: tournamentCompetitorId,
-  } : 'skip');
-
-  const showLoading = dataLoading || loading;
-
-  const { displayName } = tournamentCompetitor ?? data ?? placeholder ?? { displayName: 'Unknown Competitor', details: { alignments: [], factions: [] } };
-
-  let avatar: ReactElement | null;
-
-  if (tournamentCompetitor || data) {
-    avatar = (
-      <TournamentCompetitorAvatar
-        className={clsx(getStyleClassNames({ size: size }), styles.TournamentCompetitorIdentity_Avatar)}
-        data-size={size}
-        tournamentCompetitor={tournamentCompetitor ?? data}
-      />
-    );
-  } else {
-    avatar = (
-      <Avatar
-        className={clsx(getStyleClassNames({ size: size }), styles.TournamentCompetitorIdentity_Avatar)}
-        data-size={size}
-        icon={placeholder ? <Users /> : <Ghost />}
-        muted
-      />
-    );
-  }
-
-  const showDisabled = !tournamentCompetitor && !data;
-
+  const { displayName } = subject ?? placeholder ?? { displayName: 'Unknown Competitor', details: { alignments: [], factions: [] } };
   const handleClick = (e: MouseEvent): void => {
     e.preventDefault(); // Prevent submit if in a form
-    onClick?.(tournamentCompetitor?._id ?? data?._id);
+    if (subject && onClick) {
+      onClick(subject._id);
+    }
   };
-
   return (
     <button
       type="button"
@@ -74,13 +42,13 @@ export const TournamentCompetitorIdentity = ({
         corners: 'normal',
       }), styles.TournamentCompetitorIdentity, className)}
       onClick={handleClick}
-      disabled={showDisabled}
+      disabled={disabled}
       data-clickable={!!onClick}
     >
-      {showLoading ? (
+      {loading ? (
         <>
           <Avatar
-            className={clsx(getStyleClassNames({ size: size }), styles.TournamentCompetitorIdentity_Avatar)}
+            className={clsx(getStyleClassNames({ size }), styles.TournamentCompetitorIdentity_Avatar)}
             loading
             data-size={size}
           />
@@ -88,7 +56,11 @@ export const TournamentCompetitorIdentity = ({
         </>
       ) : (
         <>
-          {avatar}
+          <TournamentCompetitorAvatar
+            className={clsx(getStyleClassNames({ size }), styles.TournamentCompetitorIdentity_Avatar)}
+            data-size={size}
+            tournamentCompetitor={subject}
+          />
           <span>{displayName}</span>
         </>
       )}
diff --git a/src/components/TournamentCompetitorIdentity/index.ts b/src/components/TournamentCompetitorIdentity/index.ts
index 8142de02..cedd04ad 100644
--- a/src/components/TournamentCompetitorIdentity/index.ts
+++ b/src/components/TournamentCompetitorIdentity/index.ts
@@ -1,4 +1 @@
-export {
-  TournamentCompetitorIdentity,
-  type TournamentCompetitorIdentityProps,
-} from './TournamentCompetitorIdentity';
+export * from './TournamentCompetitorIdentity';
diff --git a/src/components/TournamentForm/TournamentForm.schema.ts b/src/components/TournamentForm/TournamentForm.schema.ts
index 0848dd9f..8718d49b 100644
--- a/src/components/TournamentForm/TournamentForm.schema.ts
+++ b/src/components/TournamentForm/TournamentForm.schema.ts
@@ -1,13 +1,17 @@
 import {
   CurrencyCode,
   GameSystem,
-  tournamentPairingConfig,
   TournamentPairingPolicy,
 } from '@ianpaschal/combat-command-game-systems/common';
 import { RankingFactor } from '@ianpaschal/combat-command-game-systems/flamesOfWarV4';
 import { z } from 'zod';
 
-import { StorageId, TournamentEditableFields } from '~/api';
+import {
+  StorageId,
+  TournamentEditableFields,
+  tournamentPairingConfigDefaultValues,
+  tournamentPairingConfigSchema,
+} from '~/api';
 import {
   gameSystemConfig,
   getGameSystemConfigDefaultValues,
@@ -83,7 +87,7 @@ export const createSchema = (config: CreateSchemaConfig) => z.object({
     setUpTime: z.coerce.number().min(0).max(30),
     playingTime: z.coerce.number().min(0).max(240),
   }),
-  pairingConfig: tournamentPairingConfig.schema,
+  pairingConfig: tournamentPairingConfigSchema,
   rankingFactors: z.array(z.string().transform((val) => val as RankingFactor)),
 
   // Game Config
@@ -121,7 +125,7 @@ export const defaultValues: Omit<z.infer<ReturnType<typeof createSchema>>, 'loca
   description: '',
   roundCount: 3,
   rulesPackUrl: '',
-  pairingConfig: tournamentPairingConfig.defaultValues,
+  pairingConfig: tournamentPairingConfigDefaultValues,
   title: '',
   gameSystem: GameSystem.FlamesOfWarV4,
   gameSystemConfig: getGameSystemConfigDefaultValues(GameSystem.FlamesOfWarV4),
diff --git a/src/components/TournamentForm/components/PairingFields.tsx b/src/components/TournamentForm/components/PairingFields.tsx
index 57c7458b..cd8dfd7a 100644
--- a/src/components/TournamentForm/components/PairingFields.tsx
+++ b/src/components/TournamentForm/components/PairingFields.tsx
@@ -5,7 +5,7 @@ import { TournamentPairingPolicy } from '@ianpaschal/combat-command-game-systems
 import { Label } from '~/components/generic/Label';
 import { RankingFactorFields } from '~/components/TournamentForm/components/RankingFactorFields';
 import { TournamentFormData } from '~/components/TournamentForm/TournamentForm.schema';
-import { TournamentPairingConfigFields } from '~/components/TournamentPairingConfigForm';
+import { TournamentPairingConfigFields } from '~/components/TournamentPairingGenerationForm';
 import { ALLOWED_EDIT_STATUSES } from '../TournamentForm.utils';
 
 import styles from './PairingFields.module.scss';
@@ -19,6 +19,7 @@ export const PairingFields = ({
 }: PairingFieldsProps): JSX.Element => {
   const { watch, setValue } = useFormContext<TournamentFormData>();
   const pairingConfig = watch('pairingConfig');
+  const maxCompetitors = watch('maxCompetitors');
 
   useEffect(() => {
     if (pairingConfig.policies.sameAlignment !== TournamentPairingPolicy.Allow) {
@@ -26,13 +27,17 @@ export const PairingFields = ({
     }
   }, [pairingConfig, setValue]);
 
+  useEffect(() => {
+    setValue('pairingConfig.tableCount', Math.ceil(maxCompetitors / 2));
+  }, [maxCompetitors, setValue]);
+
   const disabled = !ALLOWED_EDIT_STATUSES.includes(status);
 
   return (
     <div className={styles.PairingFields}>
       <div className={styles.PairingFields_Config}>
         <Label>Pairing Method</Label>
-        <TournamentPairingConfigFields path="pairingConfig" disabled={disabled} />
+        <TournamentPairingConfigFields path="pairingConfig" disabled={disabled} tableCountDisabled />
       </div>
       <div className={styles.PairingFields_RankingFactors}>
         <Label>Ranking Factors</Label>
diff --git a/src/components/TournamentPairingConfigForm/index.ts b/src/components/TournamentPairingConfigForm/index.ts
deleted file mode 100644
index 90b4c014..00000000
--- a/src/components/TournamentPairingConfigForm/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export {
-  TournamentPairingConfigFields,
-} from './TournamentPairingConfigFields';
-export {
-  TournamentPairingConfigForm,
-} from './TournamentPairingConfigForm';
diff --git a/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.module.scss b/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.module.scss
new file mode 100644
index 00000000..f79917a0
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.module.scss
@@ -0,0 +1,9 @@
+@use "/src/style/flex";
+@use "/src/style/variables";
+
+.TournamentPairingGenerationForm {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  gap: 1rem;
+}
diff --git a/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.schema.ts b/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.schema.ts
new file mode 100644
index 00000000..1fc0ab30
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.schema.ts
@@ -0,0 +1,22 @@
+import { z } from 'zod';
+
+import { tournamentPairingConfigSchema } from '~/api';
+import { Id } from '../../../convex/_generated/dataModel';
+
+export const schema = z.object({
+  tournamentId: z.string().transform((val) => val as Id<'tournaments'>),
+  round: z.number(),
+  config: tournamentPairingConfigSchema,
+  include: z.array(z.string()).transform((val) => val as Id<'tournamentCompetitors'>[]),
+}).superRefine((data, ctx) => {
+  const requiredTableCount = Math.ceil(data.include.length / 2);
+  if (requiredTableCount >= 1 && data.config.tableCount! < requiredTableCount) { // TODO: REmove assertion post migration
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `Table count must be at least ${requiredTableCount} for ${data.include.length} competitor${data.include.length === 1 ? '' : 's'}.`,
+      path: ['config', 'tableCount'],
+    });
+  }
+});
+
+export type TournamentPairingGenerationFormData = z.infer<typeof schema>;
diff --git a/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.tsx b/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.tsx
new file mode 100644
index 00000000..3a900179
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/TournamentPairingGenerationForm.tsx
@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Spinner } from '@ianpaschal/combat-command-components';
+import clsx from 'clsx';
+import { merge } from 'lodash';
+
+import {
+  GenerateDraftTournamentPairingsArgs,
+  Tournament,
+  TournamentCompetitor,
+  tournamentPairingConfigDefaultValues,
+} from '~/api';
+import { Form, FormField } from '~/components/generic/Form';
+import { TournamentProvider } from '~/components/TournamentProvider';
+import { validateForm } from '~/utils/validateForm';
+import { TournamentCompetitorChecklist } from './components/TournamentCompetitorChecklist';
+import {
+  TournamentPairingConfigFields,
+} from './components/TournamentPairingConfigFields/TournamentPairingConfigFields';
+import { schema } from './TournamentPairingGenerationForm.schema';
+
+import styles from './TournamentPairingGenerationForm.module.scss';
+
+export interface TournamentPairingGenerationFormProps {
+  className?: string;
+  disabled?: boolean;
+  forcedValues?: Partial<GenerateDraftTournamentPairingsArgs>;
+  existingValues?: Partial<GenerateDraftTournamentPairingsArgs>;
+  id?: string;
+  loading?: boolean;
+  onSubmit?: (data: GenerateDraftTournamentPairingsArgs) => void;
+  setDirty?: (dirty: boolean) => void;
+  tournament?: Tournament | null;
+  tournamentCompetitors?: TournamentCompetitor[];
+}
+
+export const TournamentPairingGenerationForm = ({
+  className,
+  disabled = false,
+  forcedValues,
+  existingValues,
+  id,
+  loading = false,
+  onSubmit,
+  setDirty,
+  tournament,
+  tournamentCompetitors = [],
+}: TournamentPairingGenerationFormProps): JSX.Element => {
+  const form = useForm<GenerateDraftTournamentPairingsArgs>({
+    defaultValues: merge({}, {
+      config: tournamentPairingConfigDefaultValues,
+      tournamentId: tournament?._id,
+      round: 0,
+      include: [],
+    }, existingValues, forcedValues),
+    mode: 'onSubmit',
+  });
+
+  // Track form dirty state and notify parent:
+  useEffect(() => {
+    setDirty?.(form.formState.isDirty);
+  }, [form.formState.isDirty, setDirty]);
+
+  const handleSubmit: SubmitHandler<GenerateDraftTournamentPairingsArgs> = async (formData): Promise<void> => {
+    const validFormData = validateForm(schema, merge({}, formData, forcedValues), form);
+    if (validFormData) {
+      onSubmit?.(validFormData);
+    }
+  };
+
+  const showLoading = !tournament || [
+    loading,
+  ].some((l) => !!l);
+
+  return (
+    <Form
+      id={id}
+      form={form}
+      className={clsx(styles.TournamentPairingGenerationForm, className)}
+      onSubmit={handleSubmit}
+      disabled={disabled || showLoading}
+    >
+      {showLoading ? (
+
+        /* TODO: Skeleton loading */
+        <Spinner size={64} />
+      ) : (
+        <TournamentProvider tournament={tournament}>
+          <TournamentPairingConfigFields path="config" loading={loading} />
+          <FormField name="include" label="Include">
+            <TournamentCompetitorChecklist tournament={tournament} tournamentCompetitors={tournamentCompetitors} />
+          </FormField>
+        </TournamentProvider>
+      )}
+    </Form>
+  );
+};
diff --git a/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/TournamentCompetitorChecklist.module.scss b/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/TournamentCompetitorChecklist.module.scss
new file mode 100644
index 00000000..94ba73ac
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/TournamentCompetitorChecklist.module.scss
@@ -0,0 +1,13 @@
+@use "/src/style/flex";
+@use "/src/style/variables";
+
+.TournamentCompetitorChecklist {
+  min-height: 12rem;
+}
+
+.IdentityHeader {
+  @include flex.row($gap: 0.5rem);
+
+  overflow: visible;
+  align-items: center;
+}
diff --git a/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/TournamentCompetitorChecklist.tsx b/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/TournamentCompetitorChecklist.tsx
new file mode 100644
index 00000000..1ec76125
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/TournamentCompetitorChecklist.tsx
@@ -0,0 +1,120 @@
+import {
+  Checkbox,
+  ColumnDef,
+  sx,
+  Table,
+} from '@ianpaschal/combat-command-components';
+
+import {
+  Tournament,
+  TournamentCompetitor,
+  TournamentCompetitorId,
+} from '~/api';
+import { FactionIndicator } from '~/components/FactionIndicator';
+import { Tag } from '~/components/generic/Tag';
+import { TournamentCompetitorIdentity } from '~/components/TournamentCompetitorIdentity';
+import { TournamentCompetitorPlayerCount } from '~/components/TournamentCompetitorProvider';
+
+import styles from './TournamentCompetitorChecklist.module.scss';
+
+export interface TournamentCompetitorChecklistProps {
+  className?: string;
+  disabled?: boolean;
+  value?: TournamentCompetitorId[];
+  id?: string;
+  loading?: boolean;
+  onChange?: (value: TournamentCompetitorId[]) => void;
+  tournament: Tournament;
+  tournamentCompetitors: TournamentCompetitor[];
+}
+
+export const TournamentCompetitorChecklist = ({
+  className,
+
+  // disabled = false,
+  value = [],
+
+  // id,
+  // loading = false,
+  tournament,
+  tournamentCompetitors,
+  onChange,
+}: TournamentCompetitorChecklistProps): JSX.Element => {
+  const selected = new Set<TournamentCompetitorId>(value);
+  const allSelected = tournamentCompetitors.length > 0 && tournamentCompetitors.every((c) => selected.has(c._id));
+  const someSelected = !allSelected && tournamentCompetitors.some((c) => selected.has(c._id));
+
+  const handleChange = (id: TournamentCompetitorId, checked: boolean): void => {
+    if (checked) {
+      selected.add(id);
+    } else {
+      selected.delete(id);
+    }
+    onChange?.(Array.from(selected));
+  };
+
+  const handleSelectAll = (checked: boolean): void => {
+    onChange?.(checked ? tournamentCompetitors.map((c) => c._id) : []);
+  };
+
+  // const showLoading = [
+  //   loading,
+  // ].some((l) => !!l);
+
+  const columns: ColumnDef<TournamentCompetitor>[] = [
+    {
+      key: 'active',
+      xAlign: 'center',
+      width: 'min-content',
+      renderCell: (r) => (
+        <Checkbox aria-label={r.displayName} value={selected.has(r._id)} onChange={(checked) => handleChange(r._id, checked)} />
+      ),
+      renderHeader: () => (
+        <Checkbox
+          aria-label="Select all"
+          value={allSelected}
+          indeterminate={someSelected}
+          onChange={handleSelectAll}
+        />
+      ),
+    },
+    {
+      key: 'identity',
+      xAlign: 'left',
+      renderHeader: () => (
+        <h3 className={styles.IdentityHeader}>
+          {tournament.useTeams ? 'Team' : 'Player'}
+          <Tag>{selected.size} / {tournamentCompetitors.length}</Tag>
+        </h3>
+      ),
+      renderCell: (r) => (
+        <TournamentCompetitorIdentity subject={r} size="small" />
+      ),
+    },
+    ...(tournament.alignmentsVisible ? [{
+      key: 'alignments',
+      xAlign: 'center',
+      renderCell: (r) => (
+        <FactionIndicator alignment={r.details.alignments} />
+      ),
+    } as ColumnDef<TournamentCompetitor>] : []),
+    ...(tournament.useTeams ? [{
+      key: 'players',
+      label: 'Players',
+      xAlign: 'left',
+      renderCell: (r) => (
+        <TournamentCompetitorPlayerCount tournamentCompetitor={r} />
+      ),
+    } as ColumnDef<TournamentCompetitor>] : []),
+
+  ];
+  const rows = (tournamentCompetitors || []);
+
+  return (
+    <Table
+      className={sx({ border: true, variant: 'surface', corners: 'normal' }, styles.TournamentCompetitorChecklist, className)}
+      columns={columns}
+      rows={rows}
+    />
+  );
+};
diff --git a/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/index.ts b/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/index.ts
new file mode 100644
index 00000000..f7cf1fba
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/components/TournamentCompetitorChecklist/index.ts
@@ -0,0 +1 @@
+export * from './TournamentCompetitorChecklist';
diff --git a/src/components/TournamentPairingConfigForm/TournamentPairingConfigFields.hooks.ts b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/TournamentPairingConfigFields.hooks.ts
similarity index 100%
rename from src/components/TournamentPairingConfigForm/TournamentPairingConfigFields.hooks.ts
rename to src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/TournamentPairingConfigFields.hooks.ts
diff --git a/src/components/TournamentPairingConfigForm/TournamentPairingConfigFields.module.scss b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/TournamentPairingConfigFields.module.scss
similarity index 100%
rename from src/components/TournamentPairingConfigForm/TournamentPairingConfigFields.module.scss
rename to src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/TournamentPairingConfigFields.module.scss
diff --git a/src/components/TournamentPairingConfigForm/TournamentPairingConfigFields.tsx b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/TournamentPairingConfigFields.tsx
similarity index 89%
rename from src/components/TournamentPairingConfigForm/TournamentPairingConfigFields.tsx
rename to src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/TournamentPairingConfigFields.tsx
index bd3f9dfa..59f69ceb 100644
--- a/src/components/TournamentPairingConfigForm/TournamentPairingConfigFields.tsx
+++ b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/TournamentPairingConfigFields.tsx
@@ -20,6 +20,7 @@ import {
 import clsx from 'clsx';
 
 import { FormField } from '~/components/generic/Form';
+import { InputNumber } from '~/components/generic/InputNumber';
 import { Warning } from '~/components/generic/Warning';
 import { usePresetField } from './TournamentPairingConfigFields.hooks';
 
@@ -35,6 +36,8 @@ export interface TournamentPairingConfigFieldsProps<TFormValues extends FieldVal
   disabled?: boolean;
   loading?: boolean;
   path?: FieldPathByValue<TFormValues, TournamentPairingConfig>;
+  defaultView?: 'preset' | 'advanced';
+  tableCountDisabled?: boolean;
 }
 
 export const TournamentPairingConfigFields = <TFormValues extends FieldValues>({
@@ -42,9 +45,11 @@ export const TournamentPairingConfigFields = <TFormValues extends FieldValues>({
   disabled = false,
   loading = false,
   path,
+  defaultView = 'preset',
+  tableCountDisabled = false,
 }: TournamentPairingConfigFieldsProps<TFormValues>): JSX.Element => {
   const { formState: { errors } } = useFormContext();
-  const [tab, setTab] = useState<string>('preset');
+  const [tab, setTab] = useState<string>(defaultView);
 
   const presetFieldProps = usePresetField(path);
 
@@ -100,6 +105,9 @@ export const TournamentPairingConfigFields = <TFormValues extends FieldValues>({
         <TabsList />
         <TabsPanel />
       </Tabs>
+      <FormField label="Table Count" name={pathPrefix('tableCount')} disabled={disabled || tableCountDisabled} loading={loading}>
+        <InputNumber />
+      </FormField>
       {errorMessage && <Warning intent="danger" description={errorMessage} />}
     </div>
   );
diff --git a/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/index.ts b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/index.ts
new file mode 100644
index 00000000..d7cb56f3
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigFields/index.ts
@@ -0,0 +1 @@
+export * from './TournamentPairingConfigFields';
diff --git a/src/components/TournamentPairingConfigForm/TournamentPairingConfigForm.tsx b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigForm/TournamentPairingConfigForm.tsx
similarity index 80%
rename from src/components/TournamentPairingConfigForm/TournamentPairingConfigForm.tsx
rename to src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigForm/TournamentPairingConfigForm.tsx
index 84fd9b86..536b94e9 100644
--- a/src/components/TournamentPairingConfigForm/TournamentPairingConfigForm.tsx
+++ b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigForm/TournamentPairingConfigForm.tsx
@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { merge } from 'lodash';
+
 import {
   TournamentPairingConfig,
-  tournamentPairingConfig,
+  tournamentPairingConfigDefaultValues,
   tournamentPairingConfigSchema,
-} from '@ianpaschal/combat-command-game-systems/common';
-import { merge } from 'lodash';
-
+} from '~/api';
 import { Form } from '~/components/generic/Form';
 import { validateForm } from '~/utils/validateForm';
-import { TournamentPairingConfigFields } from './TournamentPairingConfigFields';
+import { TournamentPairingConfigFields } from '../TournamentPairingConfigFields';
 
 export interface TournamentPairingConfigFormProps {
   className?: string;
@@ -33,7 +33,7 @@ export const TournamentPairingConfigForm = ({
   setDirty,
 }: TournamentPairingConfigFormProps): JSX.Element => {
   const form = useForm<TournamentPairingConfig>({
-    defaultValues: merge({}, tournamentPairingConfig.defaultValues, existingValues, forcedValues),
+    defaultValues: merge({}, tournamentPairingConfigDefaultValues, existingValues, forcedValues),
     mode: 'onSubmit',
   });
 
@@ -47,6 +47,10 @@ export const TournamentPairingConfigForm = ({
     if (validFormData) {
       onSubmit?.(validFormData);
     }
+    onSubmit?.({
+      ...formData,
+      ...forcedValues,
+    });
   };
 
   const showLoading = [
@@ -61,7 +65,7 @@ export const TournamentPairingConfigForm = ({
       onSubmit={handleSubmit}
       disabled={disabled || showLoading}
     >
-      <TournamentPairingConfigFields path="" loading={loading} />
+      <TournamentPairingConfigFields path="" loading={loading} defaultView="advanced" />
     </Form>
   );
 };
diff --git a/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigForm/index.ts b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigForm/index.ts
new file mode 100644
index 00000000..a0cafbca
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/components/TournamentPairingConfigForm/index.ts
@@ -0,0 +1 @@
+export * from './TournamentPairingConfigForm';
diff --git a/src/components/TournamentPairingGenerationForm/index.ts b/src/components/TournamentPairingGenerationForm/index.ts
new file mode 100644
index 00000000..8cf4ced4
--- /dev/null
+++ b/src/components/TournamentPairingGenerationForm/index.ts
@@ -0,0 +1,3 @@
+export * from './components/TournamentCompetitorChecklist';
+export * from './components/TournamentPairingConfigFields';
+export * from './TournamentPairingGenerationForm';
diff --git a/src/components/TournamentPairingRow/TournamentPairingRow.tsx b/src/components/TournamentPairingRow/TournamentPairingRow.tsx
index 1b89e647..a590a4b6 100644
--- a/src/components/TournamentPairingRow/TournamentPairingRow.tsx
+++ b/src/components/TournamentPairingRow/TournamentPairingRow.tsx
@@ -34,6 +34,10 @@ export const TournamentPairingRow = ({
     <div
       className={clsx(styles.TournamentPairingRow, className)}
       data-orientation={orientation}
+      data-testid="pairing-row"
+      data-table={pairing?.table ?? ''}
+      data-competitor0-id={pairing?.tournamentCompetitor0?._id ?? ''}
+      data-competitor1-id={pairing?.tournamentCompetitor1?._id ?? ''}
     >
       <IdentityBadge
         className={styles.TournamentPairingRow_Competitor0}
diff --git a/src/components/TournamentProvider/TournamentContextMenu.tsx b/src/components/TournamentProvider/TournamentContextMenu.tsx
index 3ab0fade..98c47476 100644
--- a/src/components/TournamentProvider/TournamentContextMenu.tsx
+++ b/src/components/TournamentProvider/TournamentContextMenu.tsx
@@ -14,6 +14,7 @@ export const TournamentContextMenu = ({
   return (
     <ContextMenu
       {...restProps}
+      aria-label="Tournament Actions"
       actions={[
 
         // CRUD
@@ -25,7 +26,6 @@ export const TournamentContextMenu = ({
         actions[TournamentActionKey.Cancel],
         actions[TournamentActionKey.ToggleAlignmentsRevealed],
         actions[TournamentActionKey.ToggleListsRevealed],
-        actions[TournamentActionKey.Start],
         actions[TournamentActionKey.ConfigureRound],
         actions[TournamentActionKey.StartRound],
         actions[TournamentActionKey.UndoStartRound],
diff --git a/src/components/TournamentProvider/TournamentProvider.hooks.tsx b/src/components/TournamentProvider/TournamentProvider.hooks.tsx
index 8f796422..d5b20620 100644
--- a/src/components/TournamentProvider/TournamentProvider.hooks.tsx
+++ b/src/components/TournamentProvider/TournamentProvider.hooks.tsx
@@ -11,7 +11,6 @@ import { useEndRoundAction } from './actions/useEndRoundAction';
 import { useJoinAction } from './actions/useJoinAction';
 import { useLeaveAction } from './actions/useLeaveAction';
 import { usePublishAction } from './actions/usePublishAction';
-import { useStartAction } from './actions/useStartAction';
 import { useStartRoundAction } from './actions/useStartRoundAction';
 import { useToggleAlignmentsRevealedAction } from './actions/useToggleAlignmentsRevealedAction';
 import { useToggleListsRevealedAction } from './actions/useToggleListsRevealedAction';
@@ -38,7 +37,6 @@ export const useActions = (
   usePublishAction(subject),
   useToggleAlignmentsRevealedAction(subject),
   useToggleListsRevealedAction(subject),
-  useStartAction(subject),
   useConfigureRoundAction(subject),
   useStartRoundAction(subject),
   useUndoStartRoundAction(subject),
diff --git a/src/components/TournamentProvider/actions/useConfigureRoundAction.tsx b/src/components/TournamentProvider/actions/useConfigureRoundAction.tsx
index 5d9ede9c..bb2e4d9f 100644
--- a/src/components/TournamentProvider/actions/useConfigureRoundAction.tsx
+++ b/src/components/TournamentProvider/actions/useConfigureRoundAction.tsx
@@ -2,14 +2,7 @@ import { generatePath, useNavigate } from 'react-router-dom';
 
 import { Tournament, TournamentActionKey } from '~/api';
 import { ActionDefinition } from '~/components/ContextMenu/ContextMenu.types';
-import { Warning } from '~/components/generic/Warning';
-import { toast } from '~/components/ToastProvider';
-import { useDialogInstance } from '~/hooks/useDialogInstance';
-import { useGetTournamentCompetitorsByTournament } from '~/services/tournamentCompetitors';
 import { PATHS } from '~/settings';
-import { validateConfigureRound } from '../utils/validateConfigureRound';
-
-import styles from '../actions/shared.module.scss';
 
 const KEY = TournamentActionKey.ConfigureRound;
 
@@ -19,48 +12,14 @@ export const useConfigureRoundAction = (
   const navigate = useNavigate();
   const nextRoundLabel = (subject.nextRound ?? 0) + 1;
   const label = `Configure Round ${nextRoundLabel}`;
-  const { open, close } = useDialogInstance();
-  const { data: tournamentCompetitors } = useGetTournamentCompetitorsByTournament({
-    tournamentId: subject._id,
-  });
-  const onConfirm = (): void => {
-    navigate(generatePath(PATHS.tournamentPairings, { id: subject._id }));
-  };
+
   if (subject.availableActions.includes(KEY)) {
     return {
       key: KEY,
       label,
-      handler: () => {
-        const { errors, warnings } = validateConfigureRound(subject, tournamentCompetitors);
-        if (errors.length) {
-          return toast.error('Cannot Configure Round', {
-            description: errors,
-          });
-        }
-        if (warnings.length) {
-          open({
-            title: `Configure Round ${nextRoundLabel}`,
-            content: (
-              <div className={styles.Action_DialogContent}>
-                {warnings.map((warning, i) => (
-                  <Warning key={i}>{warning}</Warning>
-                ))}
-              </div>
-            ),
-            actions: [
-              {
-                onClick: () => {
-                  onConfirm();
-                  close();
-                },
-                text: 'Proceed',
-              },
-            ],
-          });
-        } else {
-          onConfirm();
-        }
-      },
+      handler: () => navigate(generatePath(PATHS.tournamentPairings, {
+        id: subject._id,
+      })),
     };
   }
   return null;
diff --git a/src/components/TournamentProvider/actions/useStartAction.tsx b/src/components/TournamentProvider/actions/useStartAction.tsx
deleted file mode 100644
index 0c04f90e..00000000
--- a/src/components/TournamentProvider/actions/useStartAction.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Tournament, TournamentActionKey } from '~/api';
-import { ActionDefinition } from '~/components/ContextMenu/ContextMenu.types';
-import { toast } from '~/components/ToastProvider';
-import { useStartTournament } from '~/services/tournaments';
-
-const LABEL = 'Start';
-const KEY = TournamentActionKey.Start;
-
-export const useStartAction = (
-  subject: Tournament,
-): ActionDefinition<TournamentActionKey> | null => {
-  const { mutation } = useStartTournament({
-    onSuccess: (): void => {
-      toast.success(`${subject.displayName} started!`);
-    },
-  });
-  if (subject.availableActions.includes(KEY)) {
-    return {
-      key: KEY,
-      label: LABEL,
-      handler: () => mutation({ id: subject._id }),
-    };
-  }
-  return null;
-};
diff --git a/src/components/TournamentProvider/index.ts b/src/components/TournamentProvider/index.ts
index 14305a5f..0f331723 100644
--- a/src/components/TournamentProvider/index.ts
+++ b/src/components/TournamentProvider/index.ts
@@ -7,7 +7,6 @@ export { useEndRoundAction } from './actions/useEndRoundAction';
 export { useExportDataAction } from './actions/useExportDataAction';
 export { useJoinAction } from './actions/useJoinAction';
 export { usePublishAction } from './actions/usePublishAction';
-export { useStartAction } from './actions/useStartAction';
 export { useStartRoundAction } from './actions/useStartRoundAction';
 export { useSubmitMatchResultAction } from './actions/useSubmitMatchResultAction';
 export { useToggleAlignmentsRevealedAction } from './actions/useToggleAlignmentsRevealedAction';
diff --git a/src/components/TournamentRegistrationIdentity/TournamentRegistrationIdentity.module.scss b/src/components/TournamentRegistrationIdentity/TournamentRegistrationIdentity.module.scss
new file mode 100644
index 00000000..c2e3d47d
--- /dev/null
+++ b/src/components/TournamentRegistrationIdentity/TournamentRegistrationIdentity.module.scss
@@ -0,0 +1,27 @@
+@use "/src/style/flex";
+
+.TournamentRegistrationIdentity {
+  // <TournamentRegistrationIdentity/> has an sx variant applied, and thus an invisible border:
+  --padding: calc(0.5rem - var(--border-width));
+  --padding-end: calc(1rem - var(--border-width));
+
+  @include flex.row($gap: 0.75rem);
+
+  margin: calc(-1 * var(--padding));
+  margin-right: calc(-1 * var(--padding-end));
+  padding: var(--padding);
+  padding-right: var(--padding-end);
+
+  &[data-clickable="false"] {
+    pointer-events: none;
+  }
+
+  &_Avatar {
+    flex: 0 auto;
+    padding: 0;
+  }
+
+  span {
+    flex-shrink: 0;
+  }
+}
diff --git a/src/components/TournamentRegistrationIdentity/TournamentRegistrationIdentity.tsx b/src/components/TournamentRegistrationIdentity/TournamentRegistrationIdentity.tsx
new file mode 100644
index 00000000..b5b56c92
--- /dev/null
+++ b/src/components/TournamentRegistrationIdentity/TournamentRegistrationIdentity.tsx
@@ -0,0 +1,58 @@
+import { MouseEvent } from 'react';
+import { getStyleClassNames } from '@ianpaschal/combat-command-components';
+import clsx from 'clsx';
+
+import { TournamentRegistration, TournamentRegistrationId } from '~/api';
+import { Avatar } from '~/components/generic/Avatar';
+
+import styles from './TournamentRegistrationIdentity.module.scss';
+
+export interface TournamentRegistrationIdentityProps {
+  className?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  placeholder?: Pick<TournamentRegistration, 'displayName'>;
+  subject?: TournamentRegistration | null;
+  onClick?: (id?: TournamentRegistrationId) => void;
+  size?: 'small' | 'normal' | 'large';
+}
+
+export const TournamentRegistrationIdentity = ({
+  className,
+  loading = false,
+  disabled = false,
+  placeholder,
+  subject,
+  onClick,
+  size = 'normal',
+}: TournamentRegistrationIdentityProps): JSX.Element => {
+  const { displayName } = subject ?? placeholder ?? {
+    displayName: 'Unknown Competitor',
+  };
+  const handleClick = (e: MouseEvent): void => {
+    e.preventDefault(); // Prevent submit if in a form
+    if (subject?._id && onClick) {
+      onClick(subject._id);
+    }
+  };
+  return (
+    <button
+      type="button"
+      className={clsx(...getStyleClassNames({
+        variant: 'ghost',
+        corners: 'normal',
+      }), styles.TournamentRegistrationIdentity, className)}
+      onClick={handleClick}
+      disabled={disabled}
+      data-clickable={!!onClick}
+    >
+      <Avatar
+        className={clsx(getStyleClassNames({ size }), styles.TournamentRegistrationIdentity_Avatar)}
+        loading={loading}
+        data-size={size}
+        url={subject?.user.avatarUrl}
+      />
+      <span>{loading ? 'Loading...' : displayName}</span>
+    </button>
+  );
+};
diff --git a/src/components/TournamentRegistrationIdentity/index.ts b/src/components/TournamentRegistrationIdentity/index.ts
new file mode 100644
index 00000000..9831bf30
--- /dev/null
+++ b/src/components/TournamentRegistrationIdentity/index.ts
@@ -0,0 +1 @@
+export * from './TournamentRegistrationIdentity';
diff --git a/src/components/generic/Form/FormField.tsx b/src/components/generic/Form/FormField.tsx
index 58055059..4147efb4 100644
--- a/src/components/generic/Form/FormField.tsx
+++ b/src/components/generic/Form/FormField.tsx
@@ -72,7 +72,6 @@ export const FormField = ({
                 } : {}),
                 className: styles.Input,
                 'aria-invalid': showErrorState,
-                'aria-label': name,
                 disabled: formDisabled || disabled,
                 loading,
               })
diff --git a/src/hooks/useAsyncState.ts b/src/hooks/useAsyncState.ts
index f659afae..76c0241a 100644
--- a/src/hooks/useAsyncState.ts
+++ b/src/hooks/useAsyncState.ts
@@ -2,20 +2,22 @@ import {
   Dispatch,
   SetStateAction,
   useEffect,
+  useRef,
   useState,
 } from 'react';
-import isEqual from 'fast-deep-equal/es6';
 
 export const useAsyncState = <T>(
   defaultValue: T,
   asyncValue?: T,
 ): [T, Dispatch<SetStateAction<T>>] => {
   const [value, setValue] = useState<T>(asyncValue ?? defaultValue);
+  const initialized = useRef(asyncValue !== undefined);
   useEffect(() => {
-    if (asyncValue && !isEqual(asyncValue, value)) {
+    if (!initialized.current && asyncValue !== undefined) {
+      initialized.current = true;
       setValue(asyncValue);
     }
-  }, [value, asyncValue]);
+  }, [asyncValue]);
   return [
     value,
     setValue,
diff --git a/src/hooks/useFormDialog.tsx b/src/hooks/useFormDialog.tsx
index 7e6c45b9..e4b8f7af 100644
--- a/src/hooks/useFormDialog.tsx
+++ b/src/hooks/useFormDialog.tsx
@@ -1,11 +1,12 @@
 import {
   cloneElement,
   ReactElement,
+  useCallback,
   useRef,
 } from 'react';
 import { DialogProps, useDialogManager } from '@ianpaschal/combat-command-components';
 
-type UseFormDialogProps = Pick<DialogProps, 'title' | 'disablePadding' | 'disableScroll' | 'fullHeight' | 'fullWidth' | 'maxHeight' | 'maxWidth'> & {
+type UseFormDialogProps = Pick<DialogProps, 'title' | 'disablePadding' | 'disableScroll' | 'fullHeight' | 'fullWidth' | 'maxHeight' | 'maxWidth' | 'actions'> & {
   content: ReactElement;
   disableForm?: boolean;
   formId: string;
@@ -17,6 +18,7 @@ type UseFormDialogResult = {
 };
 
 export const useFormDialog = ({
+  actions,
   content,
   disableForm = false,
   formId,
@@ -25,17 +27,22 @@ export const useFormDialog = ({
 }: UseFormDialogProps): UseFormDialogResult => {
   const { open, close, setDirty } = useDialogManager();
   const dialogId = useRef<string | undefined>(undefined);
-  return {
-    open: () => dialogId.current = open({
-      ...props,
-      content: cloneElement(content, {
+  const contentRef = useRef(content);
+  contentRef.current = content;
+  const propsRef = useRef(props);
+  propsRef.current = props;
+
+  const stableOpen = useCallback(() => {
+    dialogId.current = open({
+      ...propsRef.current,
+      content: cloneElement(contentRef.current, {
         id: formId,
         setDirty: (dirty: boolean): void => {
           if (dialogId.current) {
             setDirty(dialogId.current, dirty);
           }
         },
-        disabled: disableForm || content.props.disabled,
+        disabled: disableForm || contentRef.current.props.disabled,
       }),
       onCancel: (dirty: boolean): void => {
         if (dirty) {
@@ -65,13 +72,16 @@ export const useFormDialog = ({
         text: submitLabel,
         type: 'submit',
         disabled: disableForm,
-      }],
-    }),
-    close: () => {
-      if (dialogId.current) {
-        close(dialogId.current);
-        dialogId.current = undefined;
-      }
-    },
-  };
+      }, ...(actions ?? [])],
+    });
+  }, [open, close, setDirty, formId, submitLabel, disableForm, actions]);
+
+  const stableClose = useCallback(() => {
+    if (dialogId.current) {
+      close(dialogId.current);
+      dialogId.current = undefined;
+    }
+  }, [close]);
+
+  return { open: stableOpen, close: stableClose };
 };
diff --git a/src/pages/MatchResultDetailPage/MatchResultDetailPage.tsx b/src/pages/MatchResultDetailPage/MatchResultDetailPage.tsx
index 565b7079..fc3978de 100644
--- a/src/pages/MatchResultDetailPage/MatchResultDetailPage.tsx
+++ b/src/pages/MatchResultDetailPage/MatchResultDetailPage.tsx
@@ -48,7 +48,7 @@ export const MatchResultDetailPage = (): JSX.Element => {
         showBackButton
         maxWidth={!hasPhotos ? 688 : undefined}
         fitToWindow={fitToWindow}
-        contextMenu={<MatchResultContextMenu matchResult={matchResult} />}
+        actions={<MatchResultContextMenu matchResult={matchResult} />}
       >
         {matchResult && (
           <div className={styles.MatchResultDetailPage} data-photos={hasPhotos}>
diff --git a/src/pages/TournamentCompetitorDetailPage/TournamentCompetitorDetailPage.tsx b/src/pages/TournamentCompetitorDetailPage/TournamentCompetitorDetailPage.tsx
index eac9a73c..c59629eb 100644
--- a/src/pages/TournamentCompetitorDetailPage/TournamentCompetitorDetailPage.tsx
+++ b/src/pages/TournamentCompetitorDetailPage/TournamentCompetitorDetailPage.tsx
@@ -95,7 +95,7 @@ export const TournamentCompetitorDetailPage = ({
           maxWidth={MAX_WIDTH_NARROW}
           showBackButton
           title={tournamentCompetitor.displayName}
-          contextMenu={tournament.useTeams ? (
+          actions={tournament.useTeams ? (
             <TournamentCompetitorContextMenu
               tournamentCompetitor={tournamentCompetitor}
               variant="solid"
diff --git a/src/pages/TournamentDetailPage/TournamentDetailPage.tsx b/src/pages/TournamentDetailPage/TournamentDetailPage.tsx
index e01edf56..f42228a3 100644
--- a/src/pages/TournamentDetailPage/TournamentDetailPage.tsx
+++ b/src/pages/TournamentDetailPage/TournamentDetailPage.tsx
@@ -24,11 +24,10 @@ import { TournamentContextMenu, TournamentProvider } from '~/components/Tourname
 import { DeviceSize, useDeviceSize } from '~/hooks/useDeviceSize';
 import { useGetTournamentCompetitorsByTournament } from '~/services/tournamentCompetitors';
 import { useGetTournament } from '~/services/tournaments';
+import { TournamentCompetitorsCard } from './components/TournamentCompetitorsCard';
 import { TournamentInfoCard } from './components/TournamentInfoCard';
 import { TournamentMatchResultsCard } from './components/TournamentMatchResultsCard';
 import { TournamentPairingsCard } from './components/TournamentPairingsCard';
-import { TournamentRankingsCard } from './components/TournamentRankingsCard';
-import { TournamentRosterCard } from './components/TournamentRosterCard';
 import { TournamentStatsCard } from './components/TournamentStatsCard';
 
 import styles from './TournamentDetailPage.module.scss';
@@ -62,10 +61,10 @@ export const TournamentDetailPage = (): JSX.Element => {
       content: <TournamentInfoCard />,
     },
     {
-      value: 'roster',
-      title: 'Roster',
-      icon: <Users />,
-      content: <TournamentRosterCard />,
+      value: 'competitors',
+      title: tournament?.lastRound !== undefined ? 'Rankings' : 'Roster',
+      icon: tournament?.lastRound !== undefined ? <Trophy /> : <Users />,
+      content: <TournamentCompetitorsCard />,
     },
     {
       value: 'pairings',
@@ -73,12 +72,6 @@ export const TournamentDetailPage = (): JSX.Element => {
       icon: <Zap />,
       content: <TournamentPairingsCard />,
     },
-    {
-      value: 'rankings',
-      title: 'Rankings',
-      icon: <Trophy />,
-      content: <TournamentRankingsCard />,
-    },
     {
       value: 'matchResults',
       title: 'Match Results',
@@ -96,23 +89,13 @@ export const TournamentDetailPage = (): JSX.Element => {
     tabs.splice(tabs.findIndex((tab) => tab.value === 'info'), 1);
   }
   const getDefaultTab = (): string => {
-    if (tournament?.status === 'archived') {
-      return 'rankings';
-    }
-    if (tournament?.status === 'active') {
-      if (tournament.currentRound !== undefined) {
-        return 'pairings';
-      } else {
-        return 'rankings';
-      }
-    }
     if (tournament?.status === 'published') {
       if (showInfoSidebar) {
-        return 'roster';
+        return 'competitors';
       }
       return 'info';
     }
-    return 'roster';
+    return 'competitors';
   };
   const activeTab = !queryTab || tabs.findIndex((tab) => tab.value === queryTab) === -1 ? getDefaultTab() : queryTab;
 
@@ -120,8 +103,8 @@ export const TournamentDetailPage = (): JSX.Element => {
 
   useEffect(() => {
 
-    /* Only do this when loading. Otherwise since the first render happens before we know the
-   * tournament status, getDefaultTab ALWAYS returns 'roster'. */
+    /* Only sync when not loading. The first render happens before tournament status is known,
+     * so getDefaultTab may not yet return the correct default tab. */
     if (activeTab !== queryTab && !loading) {
       handleTabChange(activeTab);
     }
diff --git a/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/TournamentCompetitorTable.module.scss b/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/TournamentCompetitorTable.module.scss
new file mode 100644
index 00000000..14a85a62
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/TournamentCompetitorTable.module.scss
@@ -0,0 +1,16 @@
+@use "/src/style/variables";
+@use "/src/style/flex";
+@use "/src/style/text";
+
+.TournamentCompetitorTable {
+  --table-padding: var(--container-padding-x);
+  --cell-padding-y: 1rem;
+
+  &_EmptyState {
+    @include flex.stretchy;
+    @include flex.centered;
+    @include text.ui($muted: true);
+
+    padding-bottom: 4rem;
+  }
+}
diff --git a/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/TournamentCompetitorTable.tsx b/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/TournamentCompetitorTable.tsx
new file mode 100644
index 00000000..bfe3c42e
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/TournamentCompetitorTable.tsx
@@ -0,0 +1,105 @@
+import { ReactElement } from 'react';
+import { generatePath, useNavigate } from 'react-router-dom';
+import { ColumnDef, Table } from '@ianpaschal/combat-command-components';
+import { getGameSystem } from '@ianpaschal/combat-command-game-systems/common';
+import clsx from 'clsx';
+import { Trophy } from 'lucide-react';
+
+import { TournamentCompetitor } from '~/api';
+import { EmptyState } from '~/components/EmptyState';
+import { FactionIndicator } from '~/components/FactionIndicator';
+import { InfoPopover } from '~/components/generic/InfoPopover';
+import { TournamentCompetitorIdentity } from '~/components/TournamentCompetitorIdentity';
+import { TournamentCompetitorPlayerCount } from '~/components/TournamentCompetitorProvider';
+import { useTournament } from '~/components/TournamentProvider';
+import { PATHS } from '~/settings';
+
+import styles from './TournamentCompetitorTable.module.scss';
+
+export interface TournamentCompetitorTableProps {
+  className?: string;
+  competitors?: TournamentCompetitor[];
+  loading?: boolean;
+  round?: number;
+}
+
+export const TournamentCompetitorTable = ({
+  className,
+  competitors,
+  loading,
+  round,
+}: TournamentCompetitorTableProps): ReactElement => {
+  const navigate = useNavigate();
+  const tournament = useTournament();
+  const { getRankingFactorDisplayName } = getGameSystem(tournament.gameSystem);
+
+  const columns: ColumnDef<TournamentCompetitor>[] = [
+    ...(round !== undefined ? [{
+      key: 'rank',
+      xAlign: 'center',
+      renderCell: (r) => r.rank + 1,
+    } as ColumnDef<TournamentCompetitor>] : []),
+    {
+      key: 'identity',
+      label: tournament.useTeams ? 'Team' : 'Player',
+      renderCell: (r) => (
+        <TournamentCompetitorIdentity
+          subject={r}
+          onClick={() => navigate(generatePath(PATHS.tournamentCompetitorDetails, {
+            tournamentId: tournament._id,
+            tournamentCompetitorId: r._id,
+          }))}
+        />
+      ),
+    },
+    ...(tournament.alignmentsVisible ? [{
+      key: 'alignments',
+      xAlign: 'center',
+      renderCell: (r) => (
+        <FactionIndicator alignment={r.details.alignments} />
+      ),
+    } as ColumnDef<TournamentCompetitor>] : []),
+    ...(tournament.useTeams ? [{
+      key: 'teams',
+      xAlign: 'center',
+      renderCell: (r) => (
+        <TournamentCompetitorPlayerCount tournamentCompetitor={r} />
+      ),
+    } as ColumnDef<TournamentCompetitor>] : []),
+    {
+      key: 'spacer',
+      width: '1fr',
+    },
+    ...(round !== undefined ? tournament.rankingFactors.map((key): ColumnDef<TournamentCompetitor> => ({
+      key,
+      width: 40,
+      xAlign: 'center',
+      renderCell: (r) => r.rankingFactors[key],
+      renderHeader: () => {
+        const long = getRankingFactorDisplayName(key);
+        const short = getRankingFactorDisplayName(key, true);
+        return (
+          <InfoPopover key={key} content={long ?? 'Unknown Factor'}>
+            <h3>{short ?? '?'}</h3>
+          </InfoPopover>
+        );
+      },
+    })) : []),
+  ];
+
+  return loading ? (
+    <div className={clsx(styles.TournamentCompetitorTable_EmptyState, className)}>
+      Loading...
+    </div>
+  ) : (
+    !competitors?.length ? (
+      <EmptyState icon={<Trophy />} />
+    ) : (
+      <Table
+        className={clsx(styles.TournamentCompetitorTable, className)}
+        columns={columns}
+        rows={competitors}
+      />
+    )
+  );
+};
diff --git a/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/index.ts b/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/index.ts
new file mode 100644
index 00000000..e3853cc3
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentCompetitorTable/index.ts
@@ -0,0 +1 @@
+export * from './TournamentCompetitorTable';
diff --git a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.module.scss b/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/TournamentCompetitorsCard.module.scss
similarity index 79%
rename from src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.module.scss
rename to src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/TournamentCompetitorsCard.module.scss
index 9aa7ccc6..b36e5962 100644
--- a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.module.scss
+++ b/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/TournamentCompetitorsCard.module.scss
@@ -2,11 +2,15 @@
 @use "/src/style/flex";
 @use "/src/style/text";
 
-.TournamentRankingsCard {
+.TournamentCompetitorsCard {
   &_Filters {
     @include flex.row;
   }
 
+  &_Graphs {
+    padding: 0 var(--container-padding-x);
+  }
+
   &_EmptyState {
     @include flex.stretchy;
     @include flex.centered;
diff --git a/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/TournamentCompetitorsCard.tsx b/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/TournamentCompetitorsCard.tsx
new file mode 100644
index 00000000..d0ca1ada
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/TournamentCompetitorsCard.tsx
@@ -0,0 +1,98 @@
+import { ReactElement, useState } from 'react';
+import { Button, Select } from '@ianpaschal/combat-command-components';
+import clsx from 'clsx';
+
+import { TournamentActionKey } from '~/api';
+import { AlignmentGraph } from '~/components/AlignmentGraph';
+import { useActions, useTournament } from '~/components/TournamentProvider';
+import { useGetTournamentCompetitorsByTournament } from '~/services/tournamentCompetitors';
+import { useGetTournamentRegistrationsByTournament } from '~/services/tournamentRegistrations';
+import { getRoundOptions } from '~/utils/common/getRoundOptions';
+import { TournamentCompetitorTable } from '../TournamentCompetitorTable';
+import { TournamentDetailCard } from '../TournamentDetailCard';
+import { TournamentRegistrationTable } from '../TournamentRegistrationTable';
+
+import styles from './TournamentCompetitorsCard.module.scss';
+
+export interface TournamentCompetitorsCardProps {
+  className?: string;
+}
+
+export const TournamentCompetitorsCard = ({
+  className,
+}: TournamentCompetitorsCardProps): JSX.Element => {
+  const tournament = useTournament();
+  const actions = useActions(tournament);
+
+  const [round, setRound] = useState<number | undefined>(tournament.lastRound);
+  const [view, setView] = useState<'competitors' | 'registrations'>('competitors');
+
+  const { data: competitors, loading: competitorsLoading } = useGetTournamentCompetitorsByTournament({
+    tournamentId: tournament._id,
+    rankingRound: tournament.lastRound !== undefined ? round : undefined,
+  });
+
+  const { data: registrations, loading: registrationsLoading } = useGetTournamentRegistrationsByTournament({
+    tournamentId: tournament._id,
+    rankingRound: tournament.lastRound !== undefined ? round : undefined,
+  });
+
+  const showEmptyState = !(competitors ?? []).length;
+  const showLoadingState = competitorsLoading || registrationsLoading;
+
+  const roundOptions = getRoundOptions(tournament, true);
+  const viewOptions = [
+    { label: 'Players', value: 'registrations' },
+    { label: 'Teams', value: 'competitors' },
+  ];
+
+  const getPrimaryButtons = (): ReactElement[] => [
+    ...(tournament.useTeams ? [
+      <Select
+        options={viewOptions}
+        value={view}
+        onChange={(selected) => setView(selected as 'registrations' | 'competitors')}
+      />,
+    ] : []),
+    ...(roundOptions.length ? [
+      <Select
+        options={roundOptions}
+        value={round}
+        onChange={(selected) => setRound(selected as number)}
+        disabled={showLoadingState || showEmptyState}
+      />,
+    ] : []),
+    ...[
+      TournamentActionKey.AddPlayer,
+      TournamentActionKey.Join,
+      TournamentActionKey.Leave,
+    ].reduce((acc, key) => actions[key] ? [...acc, (
+      <Button
+        key={key}
+        text={actions[key].label}
+        onClick={() => actions[key].handler()}
+        icon={actions[key].icon}
+      />
+    )] : acc, [] as ReactElement[]),
+  ];
+
+  return (
+    <TournamentDetailCard
+      className={clsx(className)}
+      title={tournament.lastRound !== undefined ? 'Rankings' : 'Roster'}
+      buttons={getPrimaryButtons()}
+    >
+      {tournament.lastRound === undefined && (tournament.alignmentsVisible || tournament.factionsVisible) && (
+        <div className={styles.TournamentCompetitorsCard_Graphs}>
+          {tournament.alignmentsVisible && <AlignmentGraph />}
+        </div>
+      )}
+      {view === 'competitors' && (
+        <TournamentCompetitorTable competitors={competitors} loading={competitorsLoading} round={round} />
+      )}
+      {view === 'registrations' && (
+        <TournamentRegistrationTable registrations={registrations} loading={registrationsLoading} round={round} />
+      )}
+    </TournamentDetailCard>
+  );
+};
diff --git a/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/index.ts b/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/index.ts
new file mode 100644
index 00000000..fa5d7e54
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentCompetitorsCard/index.ts
@@ -0,0 +1 @@
+export * from './TournamentCompetitorsCard';
diff --git a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.tsx b/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.tsx
deleted file mode 100644
index 9926291f..00000000
--- a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
-  ReactElement,
-  useMemo,
-  useState,
-} from 'react';
-import { Select, Table } from '@ianpaschal/combat-command-components';
-import clsx from 'clsx';
-import { Trophy } from 'lucide-react';
-
-import { TournamentRegistration } from '~/api';
-import { useAuth } from '~/components/AuthProvider';
-import { EmptyState } from '~/components/EmptyState';
-import { useTournamentCompetitors } from '~/components/TournamentCompetitorsProvider';
-import { useTournament } from '~/components/TournamentProvider';
-import {
-  getTournamentRankingTableConfig,
-  RankingRow,
-} from '~/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.utils';
-import { useGetTournamentResultsByRound } from '~/services/tournamentResults';
-import { getLastVisibleTournamentRound } from '~/utils/common/getLastVisibleTournamentRound';
-import { getRoundOptions } from '~/utils/common/getRoundOptions';
-import { TournamentDetailCard } from '../TournamentDetailCard';
-
-import styles from './TournamentRankingsCard.module.scss';
-
-export interface TournamentRankingsCardProps {
-  className?: string;
-}
-
-export const TournamentRankingsCard = ({
-  className,
-}: TournamentRankingsCardProps): JSX.Element => {
-  const tournament = useTournament();
-  const user = useAuth();
-  const competitors = useTournamentCompetitors();
-  const lastVisibleRound = getLastVisibleTournamentRound(tournament, user);
-  const [round, setRound] = useState<number>(lastVisibleRound);
-  const [view, setView] = useState<'competitors' | 'registrations'>('competitors');
-
-  const { data: results, loading } = useGetTournamentResultsByRound({
-    tournamentId: tournament._id,
-    round,
-  });
-
-  const registrations: TournamentRegistration[] = useMemo(() => competitors.reduce((acc, c) => [
-    ...acc,
-    ...c.registrations,
-  ], [] as TournamentRegistration[]), [
-    competitors,
-  ]);
-
-  const columns = getTournamentRankingTableConfig({
-    view,
-    tournament,
-    competitors,
-    registrations,
-  });
-
-  // TODO: Move rows into the config util
-  const competitorRows: RankingRow[] = (results?.competitors || []).map((competitor) => ({
-    id: competitor.id,
-    rank: competitor.rank,
-    rankingFactors: competitor.rankingFactors,
-  }));
-  const registrationRows: RankingRow[] = (results?.registrations || []).map((registration) => ({
-    id: registration.id,
-    rank: registration.rank,
-    rankingFactors: registration.rankingFactors,
-  }));
-  const rows = view === 'registrations' ? registrationRows : competitorRows;
-
-  const showEmptyState = tournament.lastRound === undefined || !(results?.[view] ?? []).length;
-  const showLoadingState = loading;
-
-  const roundOptions = getRoundOptions(lastVisibleRound);
-  const viewOptions = [
-    { label: 'Players', value: 'registrations' },
-    { label: 'Teams', value: 'competitors' },
-  ];
-
-  const getPrimaryButtons = (): ReactElement[] => [
-    ...(tournament.useTeams ? [
-      <Select
-        options={viewOptions}
-        value={view}
-
-        onChange={(selected) => setView(selected as 'registrations' | 'competitors')}
-        disabled={showLoadingState || showEmptyState}
-      />,
-    ] : []),
-    <Select
-      options={roundOptions}
-      value={round}
-      onChange={(selected) => setRound(selected as number)}
-      disabled={showLoadingState || showEmptyState}
-    />,
-  ];
-
-  return (
-    <TournamentDetailCard
-      className={clsx(className)}
-      title="Rankings"
-      buttons={getPrimaryButtons()}
-    >
-      {showLoadingState ? (
-        <div className={styles.TournamentRankingsCard_EmptyState}>
-          Loading...
-        </div>
-      ) : (
-        showEmptyState ? (
-          <EmptyState icon={<Trophy />} />
-        ) : (
-          <Table className={styles.TournamentRankingsCard_Table} columns={columns} rows={rows} />
-        )
-      )}
-    </TournamentDetailCard>
-  );
-};
diff --git a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.utils.tsx b/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.utils.tsx
deleted file mode 100644
index caed3be4..00000000
--- a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/TournamentRankingsCard.utils.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { ColumnDef } from '@ianpaschal/combat-command-components';
-import { getRankingFactorDisplayName } from '@ianpaschal/combat-command-game-systems/flamesOfWarV4';
-
-import {
-  RankingFactor,
-  Tournament,
-  TournamentCompetitor,
-  TournamentCompetitorId,
-  TournamentRegistration,
-  TournamentRegistrationId,
-} from '~/api';
-import { FactionIndicator } from '~/components/FactionIndicator';
-import { InfoPopover } from '~/components/generic/InfoPopover';
-import { IdentityBadge } from '~/components/IdentityBadge';
-
-import styles from './TournamentRankingsCard.module.scss';
-
-export type RankingRow = {
-  id: TournamentCompetitorId | TournamentRegistrationId;
-  rank: number;
-  rankingFactors: Record<RankingFactor, number>;
-};
-
-export type UseTournamentRankingColumnsConfig = {
-  view: 'competitors' | 'registrations';
-  tournament: Tournament;
-  competitors: TournamentCompetitor[];
-  registrations: TournamentRegistration[];
-};
-
-export const getTournamentRankingTableConfig = (
-  config: UseTournamentRankingColumnsConfig,
-): ColumnDef<RankingRow>[] => ([
-  {
-    key: 'rank',
-    xAlign: 'center',
-    renderCell: (r) => (
-      <div className={styles.TournamentRankingsCard_RankCell}>
-        {r.rank + 1}
-      </div>
-    ),
-  },
-  {
-    key: 'identity',
-    label: config.view === 'competitors' ? (config.tournament.useTeams ? 'Team' : 'Player') : 'Player',
-    renderCell: (r) => {
-      const competitor = config.competitors.find((c) => c._id === r.id);
-      const registration = config.registrations.find((c) => c._id === r.id);
-      if (config.view === 'competitors' && competitor) {
-        return (
-          <IdentityBadge
-            size="small"
-            competitor={competitor}
-            className={styles.TournamentRankingsCard_IdentityBadge}
-          />
-        );
-      }
-      if (config.view === 'registrations' && registration) {
-        return (
-          <IdentityBadge
-            size="small"
-            user={registration.user}
-            className={styles.TournamentRankingsCard_IdentityBadge}
-          />
-        );
-      }
-      return null;
-    },
-  },
-  ...(config.tournament.alignmentsVisible ? [{
-    key: 'alignments',
-    xAlign: 'center',
-    renderCell: (r) => {
-      const competitor = config.competitors.find((c) => c._id === r.id);
-      const registration = config.registrations.find((c) => c._id === r.id);
-      if (config.view === 'competitors' && competitor) {
-        return (
-          <FactionIndicator {...competitor.details} />
-        );
-      }
-      if (config.view === 'registrations' && registration) {
-        return (
-          <FactionIndicator {...registration} />
-        );
-      }
-      return null;
-    },
-  } as ColumnDef<RankingRow>] : []),
-  {
-    key: 'spacer',
-    width: '1fr',
-  },
-  ...config.tournament.rankingFactors.map((key): ColumnDef<RankingRow> => ({
-    key,
-    width: 40,
-    xAlign: 'center',
-    renderCell: (r) => r.rankingFactors[key],
-    renderHeader: () => {
-      const long = getRankingFactorDisplayName(key);
-      const short = getRankingFactorDisplayName(key, true);
-      return (
-        <InfoPopover key={key} content={long ?? 'Unknown Factor'}>
-          <h3>{short ?? '?'}</h3>
-        </InfoPopover>
-      );
-    },
-  })),
-]);
diff --git a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/index.ts b/src/pages/TournamentDetailPage/components/TournamentRankingsCard/index.ts
deleted file mode 100644
index f0d7619c..00000000
--- a/src/pages/TournamentDetailPage/components/TournamentRankingsCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { TournamentRankingsCard } from './TournamentRankingsCard';
diff --git a/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/TournamentRegistrationTable.module.scss b/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/TournamentRegistrationTable.module.scss
new file mode 100644
index 00000000..66f2f16b
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/TournamentRegistrationTable.module.scss
@@ -0,0 +1,16 @@
+@use "/src/style/variables";
+@use "/src/style/flex";
+@use "/src/style/text";
+
+.TournamentRegistrationTable {
+  --table-padding: var(--container-padding-x);
+  --cell-padding-y: 1rem;
+
+  &_EmptyState {
+    @include flex.stretchy;
+    @include flex.centered;
+    @include text.ui($muted: true);
+
+    padding-bottom: 4rem;
+  }
+}
diff --git a/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/TournamentRegistrationTable.tsx b/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/TournamentRegistrationTable.tsx
new file mode 100644
index 00000000..8c4b532e
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/TournamentRegistrationTable.tsx
@@ -0,0 +1,97 @@
+import { ReactElement } from 'react';
+import { generatePath, useNavigate } from 'react-router-dom';
+import { ColumnDef, Table } from '@ianpaschal/combat-command-components';
+import { getGameSystem } from '@ianpaschal/combat-command-game-systems/common';
+import clsx from 'clsx';
+import { Trophy } from 'lucide-react';
+
+import { TournamentRegistration } from '~/api';
+import { EmptyState } from '~/components/EmptyState';
+import { FactionIndicator } from '~/components/FactionIndicator';
+import { InfoPopover } from '~/components/generic/InfoPopover';
+import { useTournament } from '~/components/TournamentProvider';
+import { TournamentRegistrationIdentity } from '~/components/TournamentRegistrationIdentity';
+import { PATHS } from '~/settings';
+
+import styles from './TournamentRegistrationTable.module.scss';
+
+export interface TournamentRegistrationTableProps {
+  className?: string;
+  loading?: boolean;
+  registrations?: TournamentRegistration[];
+  round?: number;
+}
+
+export const TournamentRegistrationTable = ({
+  className,
+  loading,
+  registrations,
+  round,
+}: TournamentRegistrationTableProps): ReactElement => {
+  const navigate = useNavigate();
+  const tournament = useTournament();
+  const { getRankingFactorDisplayName } = getGameSystem(tournament.gameSystem);
+
+  const columns: ColumnDef<TournamentRegistration>[] = [
+    ...(round !== undefined ? [{
+      key: 'rank',
+      xAlign: 'center',
+      renderCell: (r) => r.rank + 1,
+    } as ColumnDef<TournamentRegistration>] : []),
+    {
+      key: 'identity',
+      label: 'Player',
+      renderCell: (r) => (
+        <TournamentRegistrationIdentity
+          subject={r}
+          onClick={() => navigate(generatePath(PATHS.tournamentCompetitorDetails, {
+            tournamentId: tournament._id,
+            tournamentCompetitorId: r.tournamentCompetitorId,
+          }))}
+        />
+      ),
+    },
+    ...(tournament.alignmentsVisible ? [{
+      key: 'alignments',
+      xAlign: 'center',
+      renderCell: (r) => (
+        <FactionIndicator alignment={r.details.alignment} />
+      ),
+    } as ColumnDef<TournamentRegistration>] : []),
+    {
+      key: 'spacer',
+      width: '1fr',
+    },
+    ...(round !== undefined ? tournament.rankingFactors.map((key): ColumnDef<TournamentRegistration> => ({
+      key,
+      width: 40,
+      xAlign: 'center',
+      renderCell: (r) => r.rankingFactors[key],
+      renderHeader: () => {
+        const long = getRankingFactorDisplayName(key);
+        const short = getRankingFactorDisplayName(key, true);
+        return (
+          <InfoPopover key={key} content={long ?? 'Unknown Factor'}>
+            <h3>{short ?? '?'}</h3>
+          </InfoPopover>
+        );
+      },
+    })) : []),
+  ];
+
+  return loading ? (
+    <div className={clsx(styles.TournamentRegistrationTable_EmptyState, className)}>
+      Loading...
+    </div>
+  ) : (
+    !registrations?.length ? (
+      <EmptyState icon={<Trophy />} />
+    ) : (
+      <Table
+        className={clsx(styles.TournamentRegistrationTable, className)}
+        columns={columns}
+        rows={registrations}
+      />
+    )
+  );
+};
diff --git a/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/index.ts b/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/index.ts
new file mode 100644
index 00000000..dea5e96a
--- /dev/null
+++ b/src/pages/TournamentDetailPage/components/TournamentRegistrationTable/index.ts
@@ -0,0 +1 @@
+export * from './TournamentRegistrationTable';
diff --git a/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.module.scss b/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.module.scss
deleted file mode 100644
index f43fe683..00000000
--- a/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@use "/src/style/flex";
-@use "/src/style/variables";
-@use "/src/style/text";
-
-.TournamentRosterCard {
-  &_Filters {
-    @include flex.row;
-  }
-
-  &_EmptyState {
-    @include flex.stretchy;
-    @include flex.centered;
-    @include text.ui($muted: true);
-
-    padding: 4rem;
-  }
-
-  &_Graphs {
-    padding: 0 var(--container-padding-x);
-  }
-
-  &_Table {
-    --table-padding: var(--container-padding-x);
-    --cell-padding-y: 1rem;
-  }
-
-  &_ReadyIndicatorIcon {
-    @include text.ui;
-
-    height: 1.5rem;
-  }
-}
diff --git a/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.tsx b/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.tsx
deleted file mode 100644
index 31d223fc..00000000
--- a/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { ReactElement } from 'react';
-import { generatePath, useNavigate } from 'react-router-dom';
-import { Button, Table } from '@ianpaschal/combat-command-components';
-import clsx from 'clsx';
-import {
-  EyeOff,
-  Link,
-  Users,
-} from 'lucide-react';
-
-import { TournamentActionKey } from '~/api';
-import { AlignmentGraph } from '~/components/AlignmentGraph';
-import { useAuth } from '~/components/AuthProvider';
-import { EmptyState } from '~/components/EmptyState';
-import { Tag } from '~/components/generic/Tag';
-import { toast } from '~/components/ToastProvider';
-import { useActions, useTournament } from '~/components/TournamentProvider';
-import { useGetTournamentCompetitorsByTournament } from '~/services/tournamentCompetitors';
-import { usePublishTournament } from '~/services/tournaments';
-import { PATHS } from '~/settings';
-import { isUserTournamentOrganizer } from '~/utils/common/isUserTournamentOrganizer';
-import { TournamentDetailCard } from '../TournamentDetailCard';
-import { getTournamentCompetitorTableConfig } from './TournamentRosterCard.utils';
-
-import styles from './TournamentRosterCard.module.scss';
-
-export interface TournamentRosterCardProps {
-  className?: string;
-}
-
-export const TournamentRosterCard = ({
-  className,
-}: TournamentRosterCardProps): JSX.Element => {
-  const navigate = useNavigate();
-  const user = useAuth();
-  const tournament = useTournament();
-  const actions = useActions(tournament);
-
-  const { data: tournamentCompetitors, loading } = useGetTournamentCompetitorsByTournament({ tournamentId: tournament._id });
-
-  const { mutation: publishTournament } = usePublishTournament({
-    successMessage: `${tournament.title} is now live!`,
-  });
-  const columns = getTournamentCompetitorTableConfig(navigate, tournament);
-  const rows = (tournamentCompetitors || []);
-
-  const showLoadingState = loading;
-  const showEmptyState = !loading && !tournamentCompetitors?.length;
-
-  const isOrganizer = isUserTournamentOrganizer(user, tournament);
-
-  const getControls = (): ReactElement[] => [
-    TournamentActionKey.AddPlayer,
-    TournamentActionKey.Join,
-    TournamentActionKey.Leave,
-  ].reduce((acc, key) => actions[key] ? [...acc, (
-    <Button
-      key={key}
-      text={actions[key].label}
-      onClick={() => actions[key].handler()}
-      icon={actions[key].icon}
-    />
-  )] : acc, [] as ReactElement[]);
-
-  const handlePublish = (): void => {
-    publishTournament({ id: tournament._id });
-  };
-
-  const handleCopyLink = async (): Promise<void> => {
-    try {
-      const detailsPath = generatePath(PATHS.tournamentDetails, { id: tournament._id });
-      await navigator.clipboard.writeText(`${window.location.origin}${detailsPath}?tab=roster`);
-      toast.info('Copied to clipboard!');
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const emptyStateProps = tournament.status === 'draft' && isOrganizer ? {
-    icon: <EyeOff />,
-    message: 'Your tournament is not yet visible.',
-    children: <Button text="Publish" onClick={handlePublish} />,
-  } : {
-    icon: <Users />,
-    message: 'No competitors registered yet.',
-    children: <Button icon={<Link />} text="Copy Link" onClick={handleCopyLink} />,
-  };
-
-  return (
-    <TournamentDetailCard
-      className={clsx(className)}
-      title={(
-        <>
-          <span>Roster</span>
-          <Tag>
-            <Users />{`${tournament.playerCount}/${tournament.maxPlayers}`}
-          </Tag>
-        </>
-      )}
-      buttons={getControls()}
-    >
-      {
-        showLoadingState ? (
-          <div className={styles.TournamentRosterCard_EmptyState} >
-            Loading...
-          </div>
-        ) : (
-          showEmptyState ? (
-            <EmptyState {...emptyStateProps} />
-          ) : (
-            <>
-              {(tournament.alignmentsVisible || tournament.factionsVisible) && (
-                <div className={styles.TournamentRosterCard_Graphs}>
-                  {tournament.alignmentsVisible && (
-                    <AlignmentGraph />
-                  )}
-                </div>
-              )}
-              <Table className={styles.TournamentRosterCard_Table} columns={columns} rows={rows} />
-            </>
-          )
-        )}
-    </TournamentDetailCard >
-  );
-};
diff --git a/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.utils.tsx b/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.utils.tsx
deleted file mode 100644
index e4073a1f..00000000
--- a/src/pages/TournamentDetailPage/components/TournamentRosterCard/TournamentRosterCard.utils.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { generatePath, NavigateFunction } from 'react-router-dom';
-import { Button, ColumnDef } from '@ianpaschal/combat-command-components';
-import { ChevronRight } from 'lucide-react';
-
-import { Tournament, TournamentCompetitor } from '~/api';
-import { FactionIndicator } from '~/components/FactionIndicator';
-import { TournamentCompetitorIdentity } from '~/components/TournamentCompetitorIdentity';
-import {
-  TournamentCompetitorActiveToggle,
-  TournamentCompetitorPlayerCount,
-} from '~/components/TournamentCompetitorProvider';
-import { PATHS } from '~/settings';
-
-export const getTournamentCompetitorTableConfig = (
-  navigate: NavigateFunction,
-  tournament: Tournament,
-): ColumnDef<TournamentCompetitor>[] => ([
-  {
-    key: 'identity',
-    label: tournament.useTeams ? 'Team' : 'Player',
-    xAlign: 'left',
-    renderCell: (r) => (
-      <TournamentCompetitorIdentity tournamentCompetitor={r} />
-    ),
-  },
-  ...(tournament.alignmentsVisible ? [{
-    key: 'alignments',
-    xAlign: 'center',
-    renderCell: (r) => (
-      <FactionIndicator {...r.details} />
-    ),
-  } as ColumnDef<TournamentCompetitor>] : []),
-  { key: 'spacer', width: '1fr' },
-  ...(tournament.useTeams ? [{
-    key: 'players',
-    label: 'Players',
-    xAlign: 'left',
-    renderCell: (r) => (
-      <TournamentCompetitorPlayerCount tournamentCompetitor={r} />
-    ),
-  } as ColumnDef<TournamentCompetitor>] : []),
-  ...(tournament.status === 'active' ? [{
-    key: 'active',
-    label: 'Ready',
-    xAlign: 'center',
-    renderCell: (r) => (
-      <TournamentCompetitorActiveToggle tournamentCompetitor={r} />
-    ),
-  } as ColumnDef<TournamentCompetitor>] : []),
-  {
-    key: 'viewDetails',
-    xAlign: 'center',
-    renderCell: ({ _id: tournamentCompetitorId, tournamentId }) => (
-      <Button
-        icon={<ChevronRight />}
-        intent="secondary"
-        onClick={() => navigate(generatePath(PATHS.tournamentCompetitorDetails, {
-          tournamentId,
-          tournamentCompetitorId,
-        }))}
-      />
-    ),
-    renderHeader: () => null,
-  },
-]);
diff --git a/src/pages/TournamentDetailPage/components/TournamentRosterCard/index.ts b/src/pages/TournamentDetailPage/components/TournamentRosterCard/index.ts
deleted file mode 100644
index d8ede6d6..00000000
--- a/src/pages/TournamentDetailPage/components/TournamentRosterCard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { TournamentRosterCard } from './TournamentRosterCard';
diff --git a/src/pages/TournamentPairingDetailPage/TournamentPairingDetailPage.tsx b/src/pages/TournamentPairingDetailPage/TournamentPairingDetailPage.tsx
index 3a20b595..2bba2c9c 100644
--- a/src/pages/TournamentPairingDetailPage/TournamentPairingDetailPage.tsx
+++ b/src/pages/TournamentPairingDetailPage/TournamentPairingDetailPage.tsx
@@ -72,7 +72,7 @@ export const TournamentPairingDetailPage = (): JSX.Element => {
           showBackButton
           maxWidth={540}
           title="Pairing Details"
-          contextMenu={(
+          actions={(
             <TournamentPairingContextMenu
               tournamentPairing={tournamentPairing}
               variant="solid"
diff --git a/src/pages/TournamentPairingsPage/TournamentPairingsPage.module.scss b/src/pages/TournamentPairingsPage/TournamentPairingsPage.module.scss
index 8eb95fcc..296c8a78 100644
--- a/src/pages/TournamentPairingsPage/TournamentPairingsPage.module.scss
+++ b/src/pages/TournamentPairingsPage/TournamentPairingsPage.module.scss
@@ -1,123 +1,4 @@
-@use "/src/style/flex";
 @use "/src/style/variables";
-@use "/src/style/borders";
-@use "/src/style/corners";
-@use "/src/style/shadows";
-@use "/src/style/text";
-@use "/src/style/variants";
-
-.TournamentPairingsPage {
-  @include flex.column;
-
-  &_Config {
-    @include flex.column($gap: 1.5rem);
-    @include variants.card;
-
-    grid-area: config;
-    padding: var(--container-padding-y) var(--container-padding-x);
-
-    &_Submit {
-      align-self: flex-end;
-    }
-  }
-
-  &_Pairings {
-    @include flex.column($gap: 1.5rem);
-    @include variants.card;
-
-    grid-area: pairings;
-    padding: var(--container-padding-y) var(--container-padding-x);
-
-    &_Grid {
-      display: grid;
-      grid-template-areas:
-        ". tableHeader competitorsHeader"
-        "alerts tableInputs competitorsGrid";
-      grid-template-columns: auto 6rem 1fr;
-      grid-template-rows: auto auto;
-      flex-grow: 1;
-      gap: 1rem;
-    }
-
-    &_Alerts {
-      display: grid;
-      grid-area: alerts;
-      gap: 0.5rem;
-      place-items: center;
-      justify-content: center;
-
-      width: 1.5rem;
-    }
-
-    &_TableHeader {
-      grid-area: tableHeader;
-    }
-
-    &_CompetitorsHeader {
-      grid-area: competitorsHeader;
-    }
-
-    &_CompetitorsGrid {
-      grid-area: competitorsGrid;
-    }
-
-    &_CompetitorCard {
-      display: grid;
-      grid-template-areas: "rank identity faction";
-      grid-template-columns: 1.25rem 1fr 2.5rem;
-      grid-template-rows: auto;
-      gap: 0.75rem;
-      align-items: center;
-
-      width: 100%;
-      height: 100%;
-      padding: 0.5rem;
-
-      &_Identity {
-        grid-area: identity;
-      }
-
-      &_Rank {
-        grid-area: rank;
-        align-self: center;
-        justify-self: center;
-        text-align: center;
-      }
-    }
-
-    &_TableInputs {
-      display: grid;
-      grid-area: tableInputs;
-      gap: 0.5rem;
-    }
-
-    &_TableInput {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      button {
-        width: 100%;
-      }
-    }
-  }
-}
-
-// 3 x 320px + 4 x 16px
-@media (width >= 1024px) {
-  .TournamentPairingsPage {
-    display: grid;
-    grid-template-areas: "config pairings pairings";
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: auto;
-    gap: 1rem;
-    align-items: start;
-  }
-}
-
-.DetailsScrollArea {
-  @include flex.stretchy;
-}
 
 .ConfirmPairingsDialog {
   padding-bottom: var(--container-padding-y);
@@ -126,46 +7,8 @@
     margin: 0 var(--container-padding-x);
   }
 
-  &_Filters {
-    @include flex.row;
-  }
-
-  &_EmptyState {
-    @include flex.stretchy;
-    @include flex.centered;
-    @include text.ui($muted: true);
-
-    padding-bottom: 4rem;
-  }
-
-  &_FirstColumn {
-    padding-left: var(--container-padding-x);
-  }
-
-  &_LastColumn {
-    padding-right: var(--container-padding-x);
-  }
-
   &_Table {
     --cell-padding-y: 1rem;
     --table-padding: var(--container-padding-x);
   }
-
-  &_TableNumber {
-    @include text.ui;
-
-    font-size: 1.5rem;
-    font-weight: 300;
-    line-height: 1.75rem;
-  }
-
-  &_MatchIndicatorIcon {
-    width: 1.25rem;
-    height: 1.25rem;
-    stroke: currentcolor;
-  }
-
-  &_MatchIndicatorInner {
-    @include text.ui;
-  }
 }
diff --git a/src/pages/TournamentPairingsPage/TournamentPairingsPage.schema.ts b/src/pages/TournamentPairingsPage/TournamentPairingsPage.schema.ts
index a4f9e738..e8d60c1f 100644
--- a/src/pages/TournamentPairingsPage/TournamentPairingsPage.schema.ts
+++ b/src/pages/TournamentPairingsPage/TournamentPairingsPage.schema.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { TournamentCompetitorId } from '~/api';
+import { TournamentCompetitorId, TournamentPairingStatus } from '~/api';
 
 const tournamentCompetitorIdSchema = z.union([
   z.string().transform((val) => val as TournamentCompetitorId),
@@ -8,19 +8,16 @@ const tournamentCompetitorIdSchema = z.union([
 ]);
 
 export const draftTournamentPairingSchema = z.object({
-  table: z.union([z.number(), z.null()]),
+  table: z.union([z.number(), z.null()]).transform((val) => val === null ? -1 : val),
   tournamentCompetitor0Id: tournamentCompetitorIdSchema,
   tournamentCompetitor1Id: tournamentCompetitorIdSchema,
 });
 
-export type TournamentPairingFormItem = z.infer<typeof draftTournamentPairingSchema>;
-
-export const schema = z.object({
-  pairings: z.array(draftTournamentPairingSchema),
-});
-
-export type FormData = z.infer<typeof schema>;
+export type TournamentPairingFormItem = z.infer<typeof draftTournamentPairingSchema> & { id: string; status?: TournamentPairingStatus };
 
 export const sanitize = (
   pairings: unknown[] = [],
-): TournamentPairingFormItem[] => pairings.map((p) => draftTournamentPairingSchema.parse(p));
+): TournamentPairingFormItem[] => pairings.map((p) => ({
+  ...draftTournamentPairingSchema.parse(p),
+  id: crypto.randomUUID(),
+}));
diff --git a/src/pages/TournamentPairingsPage/TournamentPairingsPage.tsx b/src/pages/TournamentPairingsPage/TournamentPairingsPage.tsx
index 0c597b48..9dd20907 100644
--- a/src/pages/TournamentPairingsPage/TournamentPairingsPage.tsx
+++ b/src/pages/TournamentPairingsPage/TournamentPairingsPage.tsx
@@ -1,181 +1,173 @@
-import { MouseEvent } from 'react';
 import {
-  useFieldArray,
-  useForm,
-  useWatch,
-} from 'react-hook-form';
+  MouseEvent,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   generatePath,
   useNavigate,
   useParams,
 } from 'react-router-dom';
-import { UniqueIdentifier } from '@dnd-kit/core';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  Button,
-  Select,
-  Table,
-} from '@ianpaschal/combat-command-components';
+import { Button, Table } from '@ianpaschal/combat-command-components';
+import { Cog, WandSparkles } from 'lucide-react';
+
 import {
+  DraftTournamentPairing,
+  GenerateDraftTournamentPairingsArgs,
+  TournamentCompetitorId,
+  TournamentId,
   TournamentPairingConfig,
-  TournamentPairingPolicy,
-} from '@ianpaschal/combat-command-game-systems/common';
-
-import { DraftTournamentPairing, TournamentId } from '~/api';
-import { InfoPopover } from '~/components/generic/InfoPopover';
-import { Label } from '~/components/generic/Label';
-import { Pulsar } from '~/components/generic/Pulsar';
-import { SortableGrid } from '~/components/generic/SortableGrid';
-import { Warning } from '~/components/generic/Warning';
+  tournamentPairingConfigDefaultValues,
+} from '~/api';
 import { PageWrapper } from '~/components/PageWrapper';
 import { toast } from '~/components/ToastProvider';
 import { TournamentCompetitorsProvider } from '~/components/TournamentCompetitorsProvider';
-import { TournamentPairingConfigForm } from '~/components/TournamentPairingConfigForm';
+import { TournamentPairingGenerationForm } from '~/components/TournamentPairingGenerationForm';
+import {
+  TournamentPairingConfigForm,
+} from '~/components/TournamentPairingGenerationForm/components/TournamentPairingConfigForm';
 import { TournamentProvider } from '~/components/TournamentProvider';
 import { useAsyncState } from '~/hooks/useAsyncState';
 import { useDialogInstance } from '~/hooks/useDialogInstance';
+import { useFormDialog } from '~/hooks/useFormDialog';
 import { useGetTournamentCompetitorsByTournament } from '~/services/tournamentCompetitors';
 import {
   useCreateTournamentPairings,
   useGenerateDraftTournamentPairings,
   useGenerateTableAssignments,
+  useGetTournamentPairings,
 } from '~/services/tournamentPairings';
-import { useGetTournament } from '~/services/tournaments';
+import { useGetTournament, useUpdateTournamentPairingConfig } from '~/services/tournaments';
 import { MAX_WIDTH, PATHS } from '~/settings';
-import { FormData, schema } from './TournamentPairingsPage.schema';
+import { PairingsGrid } from './components/PairingsGrid';
+import { sanitize, TournamentPairingFormItem } from './TournamentPairingsPage.schema';
 import {
-  flattenPairings,
   getConfirmDialogTableColumns,
   getPairingsStatuses,
-  renderCompetitorCard,
-  updatePairings,
+  pairingsMatch,
 } from './TournamentPairingsPage.utils';
 
 import styles from './TournamentPairingsPage.module.scss';
 
-const STATUS_COLORS: Record<'error' | 'warning' | 'ok', 'red' | 'yellow' | 'green'> = {
-  error: 'red',
-  warning: 'yellow',
-  ok: 'green',
-};
-
 export const TournamentPairingsPage = (): JSX.Element => {
   const params = useParams();
   const navigate = useNavigate();
 
   const tournamentId = params.id! as TournamentId; // Must exist or else how did we get to this route?
-  const { data: tournament } = useGetTournament({ id: tournamentId });
+
+  const { data: tournament, loading: tournamentLoading } = useGetTournament({ id: tournamentId });
   const lastRound = tournament?.lastRound ?? -1;
   const nextRound = lastRound + 1;
 
-  const [pairingConfig, setPairingConfig] = useAsyncState<TournamentPairingConfig>({
-    orderBy: 'ranking',
-    policies: {
-      sameAlignment: TournamentPairingPolicy.Allow,
-      repeat: TournamentPairingPolicy.Block,
-    },
-  }, tournament?.pairingConfig);
-
-  const { open: openConfirmRegenerateDialog, close: closeConfirmRegenerateDialog } = useDialogInstance();
-  const { open: openConfirmCancelDialog } = useDialogInstance();
-  const { open: openConfirmCreateDialog } = useDialogInstance();
-
-  const { data: tournamentCompetitors } = useGetTournamentCompetitorsByTournament({
+  const {
+    data: tournamentCompetitors,
+    loading: tournamentCompetitorsLoading,
+  } = useGetTournamentCompetitorsByTournament({
     tournamentId,
     rankingRound: lastRound,
   });
 
-  const { action: generateTournamentPairings } = useGenerateDraftTournamentPairings({
-    onSuccess: (pairings): void => form.reset({ pairings }),
-  });
-  const { action: generateTableAssignments } = useGenerateTableAssignments({
-    onSuccess: (pairings): void => openConfirmCreateDialog({
-      title: 'Confirm Pairings',
-      disablePadding: true,
-      content: (
-        <>
-          <p className={styles.ConfirmPairingsDialog_Content}>
-            The following pairings will be created:
-          </p>
-          <Table
-            className={styles.ConfirmPairingsDialog_Table}
-            columns={getConfirmDialogTableColumns(tournamentCompetitors ?? [])}
-            rows={pairings}
-          />
-          <Warning className={styles.ConfirmPairingsDialog_Content}>
-            Once created, pairings cannot be edited. Please ensure all competitors are present and ready to play!
-          </Warning>
-        </>
-      ),
-      actions: [{
-        text: 'Create',
-        onClick: () => handleConfirmCreate(pairings),
-      }],
-    }),
-  });
-  const { mutation: createTournamentPairings } = useCreateTournamentPairings({
-    onSuccess: (): void => {
-      toast.success(`Round ${nextRound + 1} pairings created!`);
-      navigate(`${generatePath(PATHS.tournamentDetails, { id: tournamentId })}?tab=pairings`);
-    },
+  const {
+    data: tournamentPairings,
+    loading: tournamentPairingsLoading,
+  } = useGetTournamentPairings({
+    tournamentId,
+    round: nextRound,
   });
+  const existingPairings = useMemo(() => sanitize(tournamentPairings), [tournamentPairings]);
 
-  const form = useForm<FormData>({
-    resolver: zodResolver(schema),
-    defaultValues: {
-      pairings: [],
-    },
-    mode: 'onSubmit',
-  });
-  const { fields } = useFieldArray({
-    control: form.control,
-    name: 'pairings',
-  });
-  const pairings = useWatch({
-    control: form.control,
-    name: 'pairings',
-  });
+  const {
+    data: previousTournamentPairings,
+    loading: previousTournamentPairingsLoading,
+  } = useGetTournamentPairings(lastRound >= 0 ? {
+    tournamentId,
+    round: lastRound,
+  } : 'skip');
 
-  if (!tournament || !tournamentCompetitors) {
-    return <div>Loading...</div>;
-  }
+  const loading = [
+    tournamentLoading,
+    tournamentCompetitorsLoading,
+    tournamentPairingsLoading,
+    previousTournamentPairingsLoading,
+  ].some(Boolean);
+
+  // State:
+  const [draftPairings, setDraftPairings] = useState<TournamentPairingFormItem[]>([]);
+  useEffect(() => {
+    if (!draftPairings.length && existingPairings.length) {
+      setDraftPairings(existingPairings);
+    }
+  }, [existingPairings, draftPairings, setDraftPairings]);
+  const [config, setConfig] = useAsyncState<TournamentPairingConfig>(
+    tournamentPairingConfigDefaultValues,
+    tournament?.pairingConfig,
+  );
+  useEffect(() => {
+    setDraftPairings((current) => current.map(({ table, ...p }) => ({
+      ...p,
+      table: table !== -1 && table >= config.tableCount! ? -1 : table, // TODO MIGRATION REMOVE ASSERTION
+    })));
+  }, [config, setDraftPairings]);
+
+  // Derived:
+  const isDirty = draftPairings.length && existingPairings.length && (
+    draftPairings.some((p) => !existingPairings.some((sp) => pairingsMatch(p, sp)))
+  );
 
-  const tableCount = Math.ceil(tournament.maxCompetitors / 2);
-  const tableOptions = [
-    ...Array.from({ length: tableCount }).map((_, i) => ({
-      label: String(i + 1),
-      value: i,
-    })),
-    { label: 'Auto', value: -1 },
-  ];
+  const { included, excluded } = useMemo(() => {
+    const source = draftPairings.length > 0 ? draftPairings : (previousTournamentPairings ?? []);
 
-  const handleChange = (items: UniqueIdentifier[]): void => {
-    updatePairings(items, form.reset);
+    const included = new Set<TournamentCompetitorId>();
+    const excluded = new Set((tournamentCompetitors ?? []).map(({ _id }) => _id));
+
+    for (const { tournamentCompetitor0Id, tournamentCompetitor1Id } of source) {
+      if (tournamentCompetitor0Id) {
+        included.add(tournamentCompetitor0Id as TournamentCompetitorId);
+        excluded.delete(tournamentCompetitor0Id as TournamentCompetitorId);
+      }
+      if (tournamentCompetitor1Id) {
+        included.add(tournamentCompetitor1Id as TournamentCompetitorId);
+        excluded.delete(tournamentCompetitor1Id as TournamentCompetitorId);
+      }
+    }
+    return {
+      included: Array.from(included),
+      excluded: Array.from(excluded),
+    };
+  }, [draftPairings, previousTournamentPairings, tournamentCompetitors]);
+
+  const pairingsWithStatuses = useMemo(() => {
+    const statuses = getPairingsStatuses(config, tournamentCompetitors ?? [], draftPairings);
+    return draftPairings.map((p, i) => ({ ...p, status: statuses[i] }));
+  }, [config, tournamentCompetitors, draftPairings]);
+
+  // Handlers:
+  const handleChangeConfig = async (data: TournamentPairingConfig): Promise<void> => {
+    setConfig(data);
+    await updatePairingConfig({ tournamentId, pairingConfig: data });
+    closeConfigureDialog();
   };
 
-  const handleRegenerate = async (config: TournamentPairingConfig): Promise<void> => {
+  const handleGenerate = (data: GenerateDraftTournamentPairingsArgs): void => {
     const onConfirm = async (): Promise<void> => {
-      setPairingConfig(config);
-      await generateTournamentPairings({
-        tournamentId: tournament._id,
-        round: nextRound,
-        config,
-      });
+      setConfig(data.config);
+      await updatePairingConfig({ tournamentId, pairingConfig: data.config });
+      await generateTournamentPairings(data);
+      closeGenerationDialog();
     };
-    if (form.formState.isDirty) {
-      openConfirmRegenerateDialog({
-        title: 'Regenerate Pairings',
-        content: 'Your current pairings will be lost. Are you sure you want to regenerate?',
-        actions: [
-          {
-            intent: 'danger',
-            onClick: () => {
-              closeConfirmRegenerateDialog();
-              onConfirm();
-            },
-            text: 'Regenerate',
+    if (draftPairings.length > 0) {
+      openConfirmGenerateDialog({
+        title: 'Are you sure you want to auto-generate?',
+        content: 'Your current pairings will be replaced.',
+        actions: [{
+          intent: 'danger',
+          onClick: () => {
+            closeConfirmGenerateDialog();
+            onConfirm();
           },
-        ],
+          text: 'Replace',
+        }],
       });
     } else {
       onConfirm();
@@ -184,17 +176,15 @@ export const TournamentPairingsPage = (): JSX.Element => {
 
   const handleCancel = (_e: MouseEvent): void => {
     const onConfirm = () => navigate(-1);
-    if (form.formState.isDirty) {
+    if (isDirty) {
       openConfirmCancelDialog({
         title: 'Are you sure you want to cancel?',
-        content: 'Your current pairings will be lost.',
-        actions: [
-          {
-            intent: 'danger',
-            onClick: onConfirm,
-            text: 'Cancel',
-          },
-        ],
+        content: 'Your current changes will be lost.',
+        actions: [{
+          intent: 'danger',
+          onClick: onConfirm,
+          text: 'Cancel',
+        }],
       });
     } else {
       onConfirm();
@@ -204,100 +194,154 @@ export const TournamentPairingsPage = (): JSX.Element => {
   const handleProceed = async (_: MouseEvent): Promise<void> => {
     await generateTableAssignments({
       tournamentId,
-      pairings,
+      pairings: draftPairings.map(({ table, tournamentCompetitor0Id, tournamentCompetitor1Id }) => ({
+        table,
+        tournamentCompetitor0Id,
+        tournamentCompetitor1Id,
+      })),
     });
   };
 
   const handleConfirmCreate = async (pairings: DraftTournamentPairing[]): Promise<void> => {
     await createTournamentPairings({
-      tournamentId: tournament._id,
+      tournamentId,
       round: nextRound,
       pairings,
     });
   };
 
-  const pairingStatuses = getPairingsStatuses(pairingConfig, tournamentCompetitors, pairings);
+  // Dialogs:
+  const { open: openConfirmCancelDialog } = useDialogInstance();
+  const { open: openConfirmCreateDialog } = useDialogInstance();
+  const { open: openConfirmGenerateDialog, close: closeConfirmGenerateDialog } = useDialogInstance();
+  const { open: openConfigureDialog, close: closeConfigureDialog } = useFormDialog({
+    formId: 'configure-tournament-pairings',
+    title: 'Configure Pairing Rules',
+    submitLabel: 'Done',
+    maxWidth: 480,
+    content: (
+      <TournamentPairingConfigForm
+        existingValues={config}
+        onSubmit={handleChangeConfig}
+      />
+    ),
+  });
+  const { open: openGenerationDialog, close: closeGenerationDialog } = useFormDialog({
+    formId: 'auto-generate-tournament-pairings',
+    title: 'Auto-Generate Pairings',
+    submitLabel: 'Generate',
+    maxWidth: 480,
+    content: (
+      <TournamentPairingGenerationForm
+        existingValues={{
+          config,
+          include: included,
+        }}
+        forcedValues={{
+          tournamentId,
+          round: nextRound,
+        }}
+        onSubmit={handleGenerate}
+        tournament={tournament}
+        tournamentCompetitors={tournamentCompetitors}
+      />
+    ),
+  });
 
-  return (
-    <PageWrapper
-      title={`Set Up Round ${nextRound + 1}`}
-      maxWidth={MAX_WIDTH}
-      showBackButton
-      footer={
+  // Network:
+  const { mutation: updatePairingConfig } = useUpdateTournamentPairingConfig();
+  const { action: generateTournamentPairings } = useGenerateDraftTournamentPairings({
+    onSuccess: (result): void => setDraftPairings(sanitize(result)),
+  });
+
+  useEffect(() => {
+    if (!loading && existingPairings.length === 0) {
+      openGenerationDialog();
+    }
+  }, [loading, existingPairings, openGenerationDialog]);
+
+  const { action: generateTableAssignments } = useGenerateTableAssignments({
+    onSuccess: (pairings): void => openConfirmCreateDialog({
+      title: 'Confirm Pairings',
+      disablePadding: true,
+      content: (
         <>
-          <Button
-            key="cancel"
-            text="Cancel"
-            variant="shaded"
-            intent="secondary"
-            onClick={handleCancel}
-          />
-          <Button
-            key="proceed"
-            text="Proceed"
-            onClick={handleProceed}
-            disabled={pairings.length < 1}
+          <p className={styles.ConfirmPairingsDialog_Content}>
+            The following pairings will be created:
+          </p>
+          <Table
+            className={styles.ConfirmPairingsDialog_Table}
+            columns={getConfirmDialogTableColumns(tournamentCompetitors ?? [])}
+            rows={pairings}
           />
         </>
-      }
-    >
-      <TournamentProvider tournament={tournament}>
-        <TournamentCompetitorsProvider tournamentCompetitors={tournamentCompetitors}>
-          <div className={styles.TournamentPairingsPage}>
-            <div className={styles.TournamentPairingsPage_Config}>
-              <h2>Configuration</h2>
-              <TournamentPairingConfigForm
-                id="tournament-pairing-config-form"
-                existingValues={pairingConfig}
-                onSubmit={handleRegenerate}
-              />
-              <Button
-                className={styles.TournamentPairingsPage_Config_Submit}
-                text={form.formState.isDirty ? 'Regenerate' : 'Generate'}
-                variant="solid"
-                type="submit"
-                form="tournament-pairing-config-form"
-              />
-            </div>
-            <div className={styles.TournamentPairingsPage_Pairings}>
-              <h2>Pairings</h2>
-              <div className={styles.TournamentPairingsPage_Pairings_Grid}>
-                <div className={styles.TournamentPairingsPage_Pairings_Alerts}>
-                  {fields.map((field, i) => {
-                    const { status, message } = pairingStatuses[i] ?? { status: 'ok' as const, message: '' };
-                    return (
-                      <InfoPopover key={field.id} content={message} orientation="horizontal">
-                        <Pulsar pulse={status !== 'ok'} color={STATUS_COLORS[status]} size={12} />
-                      </InfoPopover>
-                    );
-                  })}
-                </div>
-                <Label className={styles.TournamentPairingsPage_Pairings_TableHeader}>Table</Label>
-                <div className={styles.TournamentPairingsPage_Pairings_TableInputs}>
-                  {fields.map((field, i) => (
-                    <div key={field.id} className={styles.TournamentPairingsPage_Pairings_TableInput}>
-                      <Select
-                        options={tableOptions}
-                        name={`pairings.${i}.table`}
-                        value={pairings[i]?.table ?? -1}
-                        onChange={(value) => form.setValue(`pairings.${i}.table`, value as number, { shouldDirty: true })}
-                      />
-                    </div>
-                  ))}
-                </div>
-                <Label className={styles.TournamentPairingsPage_Pairings_CompetitorsHeader}>Opponents</Label>
-                <SortableGrid
-                  className={styles.TournamentPairingsPage_Pairings_CompetitorsGrid}
-                  items={flattenPairings(pairings)}
-                  columns={2}
-                  onChange={handleChange}
-                  renderItem={(id, state) => renderCompetitorCard(id, state, tournamentCompetitors)}
-                />
-              </div>
-            </div>
-          </div>
-        </TournamentCompetitorsProvider>
-      </TournamentProvider>
-    </PageWrapper>
+      ),
+      actions: [{
+        text: 'Create',
+        onClick: () => handleConfirmCreate(pairings),
+      }],
+    }),
+  });
+  const { mutation: createTournamentPairings } = useCreateTournamentPairings({
+    onSuccess: (): void => {
+      toast.success(`Round ${nextRound + 1} pairings created!`);
+      navigate(`${generatePath(PATHS.tournamentDetails, { id: tournamentId })}?tab=pairings`);
+    },
+  });
+
+  // Rendering
+  if (loading || !tournament || !tournamentCompetitors) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <TournamentProvider tournament={tournament}>
+      <TournamentCompetitorsProvider tournamentCompetitors={tournamentCompetitors}>
+        <PageWrapper
+          title={`Set Up Round ${nextRound + 1}`}
+          maxWidth={MAX_WIDTH}
+          showBackButton
+          actions={[
+            <Button
+              aria-label="Configure"
+              icon={<Cog />}
+              intent="secondary"
+              key="configure"
+              onClick={openConfigureDialog}
+            />,
+            <Button
+              icon={<WandSparkles />}
+              iconPosition="end"
+              intent="primary"
+              key="generate"
+              onClick={openGenerationDialog}
+              text="Generate"
+            />,
+          ]}
+          footer={[
+            <Button
+              key="cancel"
+              text="Cancel"
+              variant="shaded"
+              intent="secondary"
+              onClick={handleCancel}
+            />,
+            <Button
+              key="proceed"
+              text="Proceed"
+              onClick={handleProceed}
+              disabled={draftPairings.length < 1}
+            />,
+          ]}
+        >
+          <PairingsGrid
+            config={config}
+            excludedCompetitorIds={excluded}
+            onChange={setDraftPairings}
+            pairings={pairingsWithStatuses}
+          />
+        </PageWrapper>
+      </TournamentCompetitorsProvider>
+    </TournamentProvider>
   );
 };
diff --git a/src/pages/TournamentPairingsPage/TournamentPairingsPage.utils.tsx b/src/pages/TournamentPairingsPage/TournamentPairingsPage.utils.tsx
index b4b609c7..2224349c 100644
--- a/src/pages/TournamentPairingsPage/TournamentPairingsPage.utils.tsx
+++ b/src/pages/TournamentPairingsPage/TournamentPairingsPage.utils.tsx
@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import { UseFormReset } from 'react-hook-form';
 import { UniqueIdentifier } from '@dnd-kit/core';
 import { ColumnDef } from '@ianpaschal/combat-command-components';
 import { TournamentPairingConfig } from '@ianpaschal/combat-command-game-systems/common';
@@ -15,25 +14,33 @@ import { FactionIndicator } from '~/components/FactionIndicator';
 import { IdentityBadge } from '~/components/IdentityBadge';
 import { TournamentCompetitorIdentity } from '~/components/TournamentCompetitorIdentity';
 import { TournamentPairingRow } from '~/components/TournamentPairingRow';
-import { FormData, TournamentPairingFormItem } from './TournamentPairingsPage.schema';
+import { TournamentPairingFormItem } from './TournamentPairingsPage.schema';
 
 import styles from './TournamentPairingsPage.module.scss';
 
 const isBye = (id: UniqueIdentifier): boolean => typeof id === 'string' && id.startsWith('bye_');
 
-export const updatePairings = (items: UniqueIdentifier[], reset: UseFormReset<FormData>): void => reset(({ pairings }) => ({
-  pairings: pairings.map((p, i) => {
-    const tournamentCompetitor0Id = isBye(items[i * 2]) ? null : items[i * 2] as TournamentCompetitorId;
-    const tournamentCompetitor1Id = isBye(items[i * 2 + 1]) ? null : items[i * 2 + 1] as TournamentCompetitorId;
-    return {
-      ...p,
-      tournamentCompetitor0Id,
-      tournamentCompetitor1Id,
-    };
-  }),
-}), {
-  keepDefaultValues: true,
-});
+export const pairingsMatch = (
+  a: Omit<TournamentPairingFormItem, 'id'>,
+  b: Omit<TournamentPairingFormItem, 'id'>,
+): boolean => (
+  a.table === b.table && (
+    (a.tournamentCompetitor0Id === b.tournamentCompetitor0Id && a.tournamentCompetitor1Id === b.tournamentCompetitor1Id) ||
+    (a.tournamentCompetitor0Id === b.tournamentCompetitor1Id && a.tournamentCompetitor1Id === b.tournamentCompetitor0Id)
+  )
+);
+
+export const updatePairings = (
+  items: UniqueIdentifier[],
+  pairings: TournamentPairingFormItem[],
+  setPairings: (pairings: TournamentPairingFormItem[]) => void,
+): void => {
+  setPairings(pairings.map((p, i) => ({
+    ...p,
+    tournamentCompetitor0Id: isBye(items[i * 2]) ? null : items[i * 2] as TournamentCompetitorId,
+    tournamentCompetitor1Id: isBye(items[i * 2 + 1]) ? null : items[i * 2 + 1] as TournamentCompetitorId,
+  })));
+};
 
 /**
  * 
@@ -69,15 +76,15 @@ export const getPairingsStatuses = (
   // First pass: Count table numbers:
   for (const pairing of pairings) {
 
-    // Count up table assignments which are not null or "auto" (-1):
-    if (pairing.table !== null && pairing.table !== -1) {
+    // Count up table assignments which are not "auto" (-1):
+    if (pairing.table !== -1) {
       tableCount[pairing.table] = (tableCount[pairing.table] || 0) + 1;
     }
   }
 
   // Second pass: Mark duplicates:
   const hasDuplicateTableAssignments = pairings.map((pairing) => (
-    pairing.table !== null && tableCount[pairing.table] > 1
+    pairing.table !== -1 && tableCount[pairing.table] > 1
   ));
 
   return pairings.map((pairing, i) => {
@@ -143,9 +150,9 @@ export const renderCompetitorCard = (
       </div>
       <TournamentCompetitorIdentity
         className={styles.TournamentPairingsPage_Pairings_CompetitorCard_Identity}
-        tournamentCompetitor={rankedCompetitor}
+        subject={rankedCompetitor}
       />
-      <FactionIndicator {...rankedCompetitor.details} />
+      <FactionIndicator alignment={rankedCompetitor.details.alignments} />
     </div>
   );
 };
@@ -161,8 +168,8 @@ export const getConfirmDialogTableColumns = (competitors: TournamentCompetitor[]
       width: 'auto',
       xAlign: 'center',
       renderCell: (r) => (
-        <div className={styles.ConfirmPairingsDialog_TableNumber}>
-          {r.table === null ? '-' : r.table + 1}
+        <div data-testid="confirm-pairing-table-number" className={styles.ConfirmPairingsDialog_TableNumber}>
+          {(r.table === null || r.table === -1) ? '-' : r.table + 1}
         </div>
       ),
     },
diff --git a/src/pages/TournamentPairingsPage/components/Draggable/Draggable.module.scss b/src/pages/TournamentPairingsPage/components/Draggable/Draggable.module.scss
new file mode 100644
index 00000000..c0f2b4b4
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/Draggable/Draggable.module.scss
@@ -0,0 +1,64 @@
+$shadow-elevation-1:
+  0 1px 2px 0 rgb(0 0 0 / 5%),
+  0 1px 2px 0 rgb(0 0 0 / 0%);
+$shadow-elevation-5:
+  0 10px 38px -10px rgb(0 0 0 / 35%),
+  0 10px 20px -15px rgb(0 0 0 / 20%);
+
+.Draggable {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+
+  width: 100%;
+  height: 4rem;
+  padding: calc(0.375rem - var(--border-width));
+  padding-left: calc(0.75rem - var(--border-width));
+
+  box-shadow: $shadow-elevation-1;
+
+  transition: background-color 400ms ease;
+  animation: pop-in 150ms ease-in;
+
+  &[data-dragging="true"] {
+    cursor: grabbing;
+    opacity: 0;
+    transition: none;
+  }
+
+  &[data-overlay="true"] {
+    box-shadow: $shadow-elevation-5;
+    animation: lift 400ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  }
+
+  &_Handle {
+    cursor: grab;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: var(--color-text-muted);
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+@keyframes lift {
+  from {
+    box-shadow: $shadow-elevation-1;
+  }
+
+  to {
+    box-shadow: $shadow-elevation-5;
+  }
+}
+
+@keyframes pop-in {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
diff --git a/src/pages/TournamentPairingsPage/components/Draggable/Draggable.tsx b/src/pages/TournamentPairingsPage/components/Draggable/Draggable.tsx
new file mode 100644
index 00000000..0de9a32f
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/Draggable/Draggable.tsx
@@ -0,0 +1,43 @@
+import { useDraggable } from '@dnd-kit/core';
+import { sx } from '@ianpaschal/combat-command-components';
+import { GripVertical } from 'lucide-react';
+
+import { TournamentCompetitorId } from '~/api';
+import { TournamentCompetitorIdentity } from '~/components/TournamentCompetitorIdentity';
+import { useTournamentCompetitors } from '~/components/TournamentCompetitorsProvider';
+
+import styles from './Draggable.module.scss';
+
+interface DraggableProps<T> {
+  value: T;
+  overlay?: boolean;
+}
+
+export const Draggable = ({
+  value,
+  overlay = false,
+}: DraggableProps<TournamentCompetitorId>): JSX.Element => {
+  const competitors = useTournamentCompetitors();
+  const competitor = competitors.find((c) => c._id === value) ?? null;
+
+  const { attributes, isDragging, listeners, setNodeRef } = useDraggable({ id: value });
+
+  return (
+    <div
+      className={sx({ variant: 'surface', border: true, corners: 'normal' }, styles.Draggable)}
+      data-dragging={isDragging && !overlay}
+      data-overlay={overlay}
+      ref={overlay ? undefined : setNodeRef}
+    >
+      <TournamentCompetitorIdentity subject={competitor} />
+      <button
+        aria-label="Drag Handle"
+        className={sx({ variant: 'ghost', corners: 'normal' }, styles.Draggable_Handle)}
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical />
+      </button>
+    </div>
+  );
+};
diff --git a/src/pages/TournamentPairingsPage/components/Draggable/index.ts b/src/pages/TournamentPairingsPage/components/Draggable/index.ts
new file mode 100644
index 00000000..23885818
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/Draggable/index.ts
@@ -0,0 +1 @@
+export * from './Draggable';
diff --git a/src/pages/TournamentPairingsPage/components/Droppable/Droppable.module.scss b/src/pages/TournamentPairingsPage/components/Droppable/Droppable.module.scss
new file mode 100644
index 00000000..d9f01cd1
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/Droppable/Droppable.module.scss
@@ -0,0 +1,18 @@
+.Droppable {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+
+  padding: calc(0.5rem - var(--border-width));
+
+  background-color: var(--color-page-bg);
+  box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / var(--shadow-strength));
+
+  transition: background-color 400ms ease;
+
+  &[data-over="true"] {
+    background-color: var(--color-ghost-secondary-bg-hover);
+  }
+}
diff --git a/src/pages/TournamentPairingsPage/components/Droppable/Droppable.tsx b/src/pages/TournamentPairingsPage/components/Droppable/Droppable.tsx
new file mode 100644
index 00000000..1d1d34b2
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/Droppable/Droppable.tsx
@@ -0,0 +1,41 @@
+import { ReactElement } from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import { sx } from '@ianpaschal/combat-command-components';
+
+import { TournamentCompetitorId } from '~/api';
+import { Draggable } from '~/pages/TournamentPairingsPage/components/Draggable';
+
+import styles from './Droppable.module.scss';
+
+interface DroppableProps<T> {
+  id: string;
+  renderEmpty: () => ReactElement;
+  value: T | T[] | null;
+}
+
+export const Droppable = ({
+  id,
+  renderEmpty,
+  value,
+}: DroppableProps<TournamentCompetitorId>): ReactElement => {
+  const { isOver, setNodeRef } = useDroppable({ id });
+  const isEmpty = !value || Array.isArray(value) && !value.length;
+  return (
+    <div
+      className={sx({ variant: 'surface', border: true, corners: 'wide' }, styles.Droppable)}
+      data-over={isOver}
+      data-value={Array.isArray(value) ? value.join(',') : (value ?? '')}
+      ref={setNodeRef}
+    >
+      {isEmpty ? (
+        renderEmpty()
+      ) : (
+        Array.isArray(value) ? (
+          value.map((v) => <Draggable key={v} value={v} />)
+        ) : (
+          <Draggable key={value} value={value} />
+        )
+      )}
+    </div>
+  );
+};
diff --git a/src/pages/TournamentPairingsPage/components/Droppable/index.ts b/src/pages/TournamentPairingsPage/components/Droppable/index.ts
new file mode 100644
index 00000000..60def1d0
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/Droppable/index.ts
@@ -0,0 +1 @@
+export * from './Droppable';
diff --git a/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.hooks.ts b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.hooks.ts
new file mode 100644
index 00000000..fc6cb4b4
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.hooks.ts
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import {
+  CollisionDetection,
+  DragEndEvent,
+  DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  pointerWithin,
+  UniqueIdentifier,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+
+import { TournamentCompetitorId } from '~/api';
+import { TournamentPairingFormItem } from '../../TournamentPairingsPage.schema';
+import { computeDragResult } from './PairingsGrid.utils';
+
+interface UsePairingsGridReturn {
+  contextProps: {
+    collisionDetection: CollisionDetection;
+    onDragCancel: () => void;
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragStart: (event: DragStartEvent) => void;
+    sensors: ReturnType<typeof useSensors>;
+  }
+
+  // ID of the competitor currently being dragged, or null when idle.
+  activeId: UniqueIdentifier | null;
+
+  handleAddSlot: () => void;
+  handleDestroySlot: (id: string) => void;
+  handleChangeTable: (id: string, table: number) => void;
+}
+
+/**
+ * Manages all state and event handlers for the pairings drag-and-drop grid.
+ *
+ * Encapsulates dnd-kit sensor setup, drag lifecycle, slot management (add/remove),
+ * table assignment, and a convenience status lookup map.
+ */
+export const usePairingsGrid = (
+  pairings: TournamentPairingFormItem[],
+  onChange: (pairings: TournamentPairingFormItem[]) => void,
+): UsePairingsGridReturn => {
+  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+
+      // Cypress doesn't support smooth scrolling, so we fall back to 'auto':
+      scrollBehavior: 'Cypress' in window ? 'auto' : undefined,
+    }),
+  );
+
+  return {
+    contextProps: {
+      collisionDetection: pointerWithin,
+      onDragCancel: (): void => {
+        setActiveId(null);
+      },
+      onDragEnd: ({ active, over }: DragEndEvent): void => {
+        setActiveId(null);
+        if (!over || active.id === over.id) {
+          return;
+        }
+        const result = computeDragResult(pairings, active.id as TournamentCompetitorId, over.id as string);
+        if (result !== null) {
+          onChange(result);
+        }
+      },
+      onDragStart: ({ active }: DragStartEvent): void => {
+        setActiveId(active.id);
+      },
+      sensors,
+    },
+    activeId,
+    handleAddSlot: (): void => {
+      onChange([...pairings, {
+        id: crypto.randomUUID(),
+        table: -1,
+        tournamentCompetitor0Id: null,
+        tournamentCompetitor1Id: null,
+      }]);
+    },
+    handleDestroySlot: (id: string): void => {
+      onChange(pairings.filter((p) => p.id !== id));
+    },
+    handleChangeTable: (id: string, table: number): void => {
+      onChange(pairings.map((p) => p.id === id ? { ...p, table } : p));
+    },
+  };
+};
diff --git a/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.module.scss b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.module.scss
new file mode 100644
index 00000000..7d9ceb78
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.module.scss
@@ -0,0 +1,78 @@
+@use "/src/style/flex";
+@use "/src/style/variables";
+
+.PairingsGrid {
+  @include flex.column;
+
+  &_Unpaired {
+    @include flex.column($gap: 1.5rem);
+
+    grid-area: config;
+    padding: var(--container-padding-y) var(--container-padding-x);
+
+    &_Submit {
+      align-self: flex-end;
+    }
+  }
+
+  &_Pairings {
+    @include flex.column($gap: 1.5rem);
+
+    grid-area: pairings;
+    padding: var(--container-padding-y) var(--container-padding-x);
+  }
+
+  &_EmptyState {
+    pointer-events: none;
+    user-select: none;
+
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    align-items: center;
+
+    width: 100%;
+    height: 4rem;
+    padding: calc(0.5rem - var(--border-width));
+
+    border: dashed 1px var(--color-text-muted);
+  }
+
+  &_PairingItem {
+    --gap: 0.5rem;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(max(280px, calc(50% - var(--gap) / 2)), 1fr));
+    grid-template-rows: auto 1fr;
+    gap: var(--gap);
+
+    &_Controls {
+      display: flex;
+      grid-column: 1/-1;
+      flex-direction: row;
+      gap: 1rem;
+      align-items: center;
+      justify-content: left;
+
+      &_TableSelect {
+        max-width: 6rem;
+      }
+
+      &_DeleteButton {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
+// 3 x 320px + 4 x 16px
+@media (width >= 1024px) {
+  .PairingsGrid {
+    display: grid;
+    grid-template-areas: "config pairings pairings";
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto;
+    gap: 1rem;
+    align-items: start;
+  }
+}
diff --git a/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.tsx b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.tsx
new file mode 100644
index 00000000..7a2db957
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.tsx
@@ -0,0 +1,167 @@
+import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  defaultDropAnimationSideEffects,
+  DndContext,
+  DragOverlay,
+} from '@dnd-kit/core';
+import {
+  Button,
+  Card,
+  Select,
+  SelectOption,
+  sx,
+} from '@ianpaschal/combat-command-components';
+import {
+  Ghost,
+  Plus,
+  Trash2,
+} from 'lucide-react';
+
+import { TournamentCompetitorId, TournamentPairingConfig } from '~/api';
+import { InfoPopover } from '~/components/generic/InfoPopover';
+import { Label } from '~/components/generic/Label';
+import { Pulsar } from '~/components/generic/Pulsar';
+import { useTournament } from '~/components/TournamentProvider';
+import { Droppable } from '~/pages/TournamentPairingsPage/components/Droppable';
+import { TournamentPairingFormItem } from '../../TournamentPairingsPage.schema';
+import { Draggable } from '../Draggable/Draggable';
+import { usePairingsGrid } from './PairingsGrid.hooks';
+
+import styles from './PairingsGrid.module.scss';
+
+const STATUS_COLORS: Record<'error' | 'warning' | 'ok', 'red' | 'yellow' | 'green'> = {
+  error: 'red',
+  warning: 'yellow',
+  ok: 'green',
+};
+
+export interface PairingsGridProps {
+  config: TournamentPairingConfig;
+  excludedCompetitorIds: TournamentCompetitorId[];
+  onChange: (pairings: TournamentPairingFormItem[]) => void;
+  pairings: TournamentPairingFormItem[];
+}
+
+export const PairingsGrid = ({
+  config,
+  excludedCompetitorIds,
+  onChange,
+  pairings,
+}: PairingsGridProps): JSX.Element => {
+  const tournament = useTournament();
+  const {
+    activeId,
+    contextProps,
+    handleAddSlot,
+    handleDestroySlot,
+    handleChangeTable,
+  } = usePairingsGrid(pairings, onChange);
+
+  const tableOptions: SelectOption[] = useMemo(() => ([
+    ...Array.from({ length: config.tableCount! }).map((_, i) => ({ // TODO MIGRATION REMOVE ASSERTION
+      label: String(i + 1),
+      value: i,
+    })),
+    { label: 'Auto', value: -1 },
+  ]), [config.tableCount]);
+
+  return (
+    <DndContext {...contextProps}>
+      <div className={styles.PairingsGrid}>
+        <Card className={styles.PairingsGrid_Unpaired}>
+          <h2>Excluded</h2>
+          <div>
+            {`These ${tournament.useTeams ? 'Teams' : 'Players'} will be excluded from the round. If you would like them to receive a bye (and a score with it), put them to a pairing by themselves.`}
+          </div>
+          <Droppable
+            id="excluded"
+            value={excludedCompetitorIds}
+            renderEmpty={() => (
+              <div className={sx({ corners: 'normal' }, styles.PairingsGrid_EmptyState)}>
+                Drag competitors here to exclude them from this round.
+              </div>
+            )}
+          />
+        </Card>
+        <Card className={styles.PairingsGrid_Pairings}>
+          <h2>Pairings</h2>
+          {pairings.map((pairing) => {
+            const { status, message } = pairing.status ?? { status: 'ok' as const, message: '' };
+            return (
+              <div
+                key={pairing.id}
+                className={styles.PairingsGrid_PairingItem}
+                data-testid="pairing-item"
+                data-table={pairing.table ?? ''}
+                data-competitor0-id={pairing.tournamentCompetitor0Id ?? ''}
+                data-competitor1-id={pairing.tournamentCompetitor1Id ?? ''}
+              >
+                <div className={styles.PairingsGrid_PairingItem_Controls}>
+                  <Label>Table</Label>
+                  <Select
+                    aria-label="Table Assignment"
+                    className={styles.PairingsGrid_PairingItem_Controls_TableSelect}
+                    options={tableOptions}
+                    name={`pairings.${pairing.id}.table`}
+                    value={pairing.table}
+                    onChange={(value) => handleChangeTable(pairing.id, value as number)}
+                  />
+                  <InfoPopover content={message} orientation="horizontal">
+                    <Pulsar pulse={status !== 'ok'} color={STATUS_COLORS[status]} size={12} />
+                  </InfoPopover>
+                  <Button
+                    aria-label="Remove Pairing"
+                    className={styles.PairingsGrid_PairingItem_Controls_DeleteButton}
+                    icon={<Trash2 />}
+                    intent="danger"
+                    variant="ghost"
+                    onClick={() => handleDestroySlot(pairing.id)}
+                  />
+                </div>
+                <Droppable
+                  id={`slot:${pairing.id}:0`}
+                  value={pairing.tournamentCompetitor0Id}
+                  renderEmpty={() => (
+                    <div className={sx({ corners: 'normal' }, styles.PairingsGrid_EmptyState)}>
+                      <Ghost size={20} />
+                      <span>{pairing.tournamentCompetitor1Id !== null ? 'Bye' : 'Empty'}</span>
+                    </div>
+                  )}
+                />
+                <Droppable
+                  id={`slot:${pairing.id}:1`}
+                  value={pairing.tournamentCompetitor1Id}
+                  renderEmpty={() => (
+                    <div className={sx({ corners: 'normal' }, styles.PairingsGrid_EmptyState)}>
+                      <Ghost size={20} />
+                      <span>{pairing.tournamentCompetitor0Id !== null ? 'Bye' : 'Empty'}</span>
+                    </div>
+                  )}
+                />
+              </div>
+            );
+          })}
+          <Button
+            icon={<Plus />}
+            iconPosition="start"
+            intent="secondary"
+            onClick={handleAddSlot}
+            text="Add Pairing Slot"
+          />
+        </Card>
+      </div>
+      {createPortal((
+        <DragOverlay dropAnimation={{
+          sideEffects: defaultDropAnimationSideEffects({
+            styles: { active: { opacity: '0' } },
+          }),
+        }}>
+          {activeId != null && (
+            <Draggable value={activeId as TournamentCompetitorId} overlay />
+          )}
+        </DragOverlay>
+      ), document.body)}
+    </DndContext>
+  );
+};
diff --git a/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.utils.ts b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.utils.ts
new file mode 100644
index 00000000..f3273678
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/PairingsGrid/PairingsGrid.utils.ts
@@ -0,0 +1,84 @@
+import { TournamentCompetitorId } from '~/api';
+import { TournamentPairingFormItem } from '../../TournamentPairingsPage.schema';
+
+/**
+ * Computes the updated pairings list after a drag-and-drop operation.
+ *
+ * `overId` identifies the drop target and takes one of two forms:
+ *   - `"slot:{pairingId}:{slotIndex}"` — a specific slot (0 or 1) within a pairing row
+ *   - `"excluded"` — the excluded-competitors area outside any pairing
+ *
+ * Returns the updated pairings array, or `null` if the drag had no effect
+ * (e.g. dropped onto the same slot it came from, or an unrecognized target).
+ *
+ * When swapping into an occupied slot, the existing occupant is moved back to
+ * the dragged competitor's original slot (or simply removed if dragging from
+ * the excluded area).
+ */
+export const computeDragResult = (
+  pairings: TournamentPairingFormItem[],
+  draggedId: TournamentCompetitorId,
+  overId: string,
+): TournamentPairingFormItem[] | null => {
+  const sourcePairingIndex = pairings.findIndex((p) => p.tournamentCompetitor0Id === draggedId || p.tournamentCompetitor1Id === draggedId);
+
+  // A value of -1 means the dragged competitor is currently in the excluded area.
+  const isFromExcluded = sourcePairingIndex === -1;
+
+  const newPairings = pairings.map((p) => ({ ...p }));
+
+  // Returns which slot (0 or 1) the dragged competitor currently occupies.
+  const getSourceSlot = (): 0 | 1 => (
+    pairings[sourcePairingIndex].tournamentCompetitor0Id === draggedId ? 0 : 1
+  );
+
+  const setSlot = (pairingIndex: number, slotIndex: 0 | 1, id: TournamentCompetitorId | null): void => {
+    if (slotIndex === 0) {
+      newPairings[pairingIndex].tournamentCompetitor0Id = id;
+    } else {
+      newPairings[pairingIndex].tournamentCompetitor1Id = id;
+    }
+  };
+
+  // Clears the source slot, optionally replacing it with another competitor
+  // (used when swapping an existing occupant back to the vacated slot).
+  const clearSource = (replacement: TournamentCompetitorId | null = null): void => {
+    if (isFromExcluded) {
+
+      // Nothing to clear — the dragged competitor had no pairing slot.
+      return;
+    }
+    setSlot(sourcePairingIndex, getSourceSlot(), replacement);
+  };
+
+  if (overId.startsWith('slot:')) {
+    const parts = overId.split(':');
+    const destPairingIndex = pairings.findIndex((p) => p.id === parts[1]);
+    if (destPairingIndex === -1) {
+      return null;
+    }
+    const destSlotIndex = Number(parts[2]) as 0 | 1;
+    const destOccupant = destSlotIndex === 0 ? pairings[destPairingIndex].tournamentCompetitor0Id : pairings[destPairingIndex].tournamentCompetitor1Id;
+
+    // Dropped onto the same slot — no change.
+    if (destOccupant === draggedId) {
+      return null;
+    }
+
+    // Move the destination's current occupant (if any) back to the source slot,
+    // then place the dragged competitor in the destination slot.
+    clearSource(destOccupant);
+    setSlot(destPairingIndex, destSlotIndex, draggedId);
+  } else if (overId === 'excluded') {
+
+    // Dropped into the excluded area — just vacate the source slot.
+    if (isFromExcluded) {
+      return null;
+    }
+    clearSource();
+  } else {
+    return null;
+  }
+
+  return newPairings;
+};
diff --git a/src/pages/TournamentPairingsPage/components/PairingsGrid/index.ts b/src/pages/TournamentPairingsPage/components/PairingsGrid/index.ts
new file mode 100644
index 00000000..182756bf
--- /dev/null
+++ b/src/pages/TournamentPairingsPage/components/PairingsGrid/index.ts
@@ -0,0 +1 @@
+export * from './PairingsGrid';
diff --git a/src/services/tournaments.ts b/src/services/tournaments.ts
index cc6cfd11..86a353df 100644
--- a/src/services/tournaments.ts
+++ b/src/services/tournaments.ts
@@ -16,6 +16,8 @@ export const useCreateTournament = createMutationHook(api.tournaments.createTour
 export const useUpdateTournament = createMutationHook(api.tournaments.updateTournament);
 export const useDeleteTournament = createMutationHook(api.tournaments.deleteTournament);
 
+export const useUpdateTournamentPairingConfig = createMutationHook(api.tournaments.updateTournamentPairingConfig);
+
 // Special Mutations
 export const useEndTournament = createMutationHook(api.tournaments.endTournament);
 export const useEndTournamentRound = createMutationHook(api.tournaments.endTournamentRound);
diff --git a/src/utils/common/getRoundOptions.ts b/src/utils/common/getRoundOptions.ts
index fd77a069..daed8f75 100644
--- a/src/utils/common/getRoundOptions.ts
+++ b/src/utils/common/getRoundOptions.ts
@@ -1,8 +1,20 @@
 import { SelectOption } from '@ianpaschal/combat-command-components';
 
-export const getRoundOptions = (limit: number = 0): SelectOption[] => (
-  Array.from({ length: limit + 1 }, (_, i) => i).map((round) => ({
-    label: `Round ${round + 1}`,
-    value: round,
-  }))
-);
+import { Tournament } from '~/api';
+
+export const getRoundOptions = (tournament?: Tournament, limitByVisibility = false): SelectOption[] => {
+  if (!tournament) {
+    return [];
+  }
+
+  if (limitByVisibility && tournament.lastRound === undefined) {
+    return [];
+  }
+
+  const length = limitByVisibility ? tournament.lastRound! + 1 : tournament.roundCount;
+
+  return Array.from({ length }, (_, i) => ({
+    label: `Round ${i + 1}`,
+    value: i,
+  }));
+};
diff --git a/test/README.md b/test/README.md
new file mode 100644
index 00000000..a4e48800
--- /dev/null
+++ b/test/README.md
@@ -0,0 +1,35 @@
+# E2E Tests
+
+## Prerequisites
+
+### 1. Install Playwright browsers
+
+```bash
+npx playwright install firefox
+```
+
+### 2. Configure a local Convex deployment
+
+```bash
+npx convex dev --configure existing --dev-deployment local
+```
+
+### 3. Set the JWT private key (one-time per local deployment)
+
+```bash
+npx convex env set JWT_PRIVATE_KEY "$(npx @convex-dev/auth genkey)"
+```
+
+This key persists on your local deployment and does not need to be regenerated between runs.
+
+## Running the tests
+
+```bash
+npx playwright test
+```
+
+This will automatically start the Convex backend and Vite frontend, wipe the database, seed test users, and run the tests.
+
+## CI
+
+Set `JWT_PRIVATE_KEY` as a secret in your CI provider. It must be a valid ES256 private key — generate one with `npx @convex-dev/auth genkey` and store it permanently as a secret. Do not regenerate it between runs.
diff --git a/test/fixtures.ts b/test/fixtures.ts
new file mode 100644
index 00000000..8e098a5b
--- /dev/null
+++ b/test/fixtures.ts
@@ -0,0 +1,82 @@
+// Playwright requires empty-object-pattern
+/* eslint-disable no-empty-pattern */
+import { GameSystem } from '@ianpaschal/combat-command-game-systems/common';
+import { test as base } from '@playwright/test';
+import { ConvexHttpClient } from 'convex/browser';
+import * as dotenv from 'dotenv';
+import fs from 'fs';
+import path from 'path';
+
+import { api } from '../convex/_generated/api';
+import type { Id } from '../convex/_generated/dataModel';
+
+dotenv.config({ path: '.env.local' });
+
+const convexUrl = process.env.VITE_CONVEX_URL;
+if (!convexUrl) {
+  throw new Error('VITE_CONVEX_URL is not set — check .env.local');
+}
+
+const authDir = path.join(import.meta.dirname, '.auth');
+const stateFile = path.join(authDir, 'state.json');
+const userFile = path.join(authDir, 'user.json');
+
+type Fixtures = {
+  convex: ConvexHttpClient;
+  organizerUserId: Id<'users'>;
+  tournamentId: Id<'tournaments'>;
+};
+
+export const test = base.extend<Fixtures>({
+
+  /*
+   * We override the built-in `page` fixture rather than using `storageState` in the config because
+   * auth is per-suite — different suites can sign in as different users. Each suite's `beforeAll`
+   * signs in and writes state.json; this fixture picks it up so every test starts authenticated.
+   * Falls back to a plain unauthenticated context if state.json doesn't exist.
+   */
+  page: async ({ browser }, use) => {
+    const context = await browser.newContext(
+      fs.existsSync(stateFile) ? { storageState: stateFile } : {},
+    );
+    const page = await context.newPage();
+    await use(page);
+    await context.close();
+  },
+
+  /*
+   * The JWT is extracted from state.json (the same file the browser storageState is loaded from) so
+   * both the browser and the API client always authenticate as the same user.
+   */
+  convex: async ({}, use) => {
+    const client = new ConvexHttpClient(convexUrl!);
+    const state = JSON.parse(fs.readFileSync(stateFile, 'utf-8'));
+    const jwtEntry = (state.origins ?? [])
+      .flatMap((origin: { localStorage: { name: string; value: string }[] }) => origin.localStorage ?? [])
+      .find((item: { name: string }) => item.name.startsWith('__convexAuthJWT_'));
+    if (!jwtEntry) {
+      throw new Error('No __convexAuthJWT_ entry found in auth state — re-run auth setup');
+    }
+    client.setAuth(jwtEntry.value);
+    await use(client);
+  },
+
+  organizerUserId: async ({}, use) => {
+    const { userId } = JSON.parse(fs.readFileSync(userFile, 'utf-8')) as { userId: string };
+    await use(userId as Id<'users'>);
+  },
+
+  tournamentId: async ({ convex, organizerUserId }, use) => {
+    const id = await convex.mutation(api.utils.createTestTournament, {
+      organizerUserId,
+      useTeams: false,
+      status: 'active',
+      useNationalTeams: false,
+      gameSystem: GameSystem.FlamesOfWarV4,
+    });
+    await use(id);
+    await convex.mutation(api.utils.deleteTestTournament, { id });
+  },
+});
+
+export { expect } from '@playwright/test';
diff --git a/test/globalSetup.ts b/test/globalSetup.ts
new file mode 100644
index 00000000..ec8b3d88
--- /dev/null
+++ b/test/globalSetup.ts
@@ -0,0 +1,54 @@
+import { execFileSync } from 'child_process';
+import { ConvexHttpClient } from 'convex/browser';
+import * as dotenv from 'dotenv';
+
+import { api } from '../convex/_generated/api';
+
+dotenv.config({ path: '.env.local' });
+
+const convexUrl = process.env.VITE_CONVEX_URL;
+if (!convexUrl) {
+  throw new Error('VITE_CONVEX_URL is not set — check .env.local');
+}
+
+/*
+ * Runs once before all test suites (configured as `globalSetup` in playwright.config.ts).
+ *
+ * We use `execFileSync` with the Convex CLI rather than the HTTP client because `populateUsers` is
+ * an internalAction (only callable by an authenticated deployment owner, not via HTTP). Locally
+ * you're authenticated via `npx convex dev`; in CI pass CONVEX_DEPLOY_KEY as an env var.
+ *
+ * If users exist, we preserve auth tables so that state.json written by prior sign-ins stays valid,
+ * avoiding redundant browser sign-ins on each run. With no users, we wipe everything and re-seed.
+ */
+export default async function globalSetup(): Promise<void> {
+  const previewArgs = process.env.CONVEX_PREVIEW_NAME ? [
+    '--preview-name',
+    process.env.CONVEX_PREVIEW_NAME,
+  ] : [];
+
+  const client = new ConvexHttpClient(convexUrl!);
+  const { page: users } = await client.query(api.users.getUsers, {
+    paginationOpts: { numItems: 1, cursor: null },
+  });
+  const usersExist = users.length > 0;
+
+  const cleanUpArgs = {
+    preservedTables: usersExist ? [
+      'authAccounts',
+      'authSessions',
+      'authRefreshTokens',
+      'authVerificationCodes',
+      'authVerifiers',
+      'authRateLimits',
+      'users',
+      'userPreferences',
+    ] : [],
+  };
+
+  execFileSync('npx', ['convex', 'run', ...previewArgs, 'test:cleanUp', JSON.stringify(cleanUpArgs)], { stdio: 'inherit' });
+
+  if (!usersExist) {
+    execFileSync('npx', ['convex', 'run', ...previewArgs, 'test:populateUsers'], { stdio: 'inherit' });
+  }
+}
diff --git a/test/helpers/dragTo.ts b/test/helpers/dragTo.ts
new file mode 100644
index 00000000..8246d9a4
--- /dev/null
+++ b/test/helpers/dragTo.ts
@@ -0,0 +1,37 @@
+import { type Locator, type Page } from '@playwright/test';
+
+// dnd-kit's MouseSensor activates on mousedown then attaches window-level mousemove listeners.
+// A small pause + initial nudge after mousedown gives the sensor time to initialize before
+// Playwright begins the main move — without this, the moves arrive before listeners attach.
+export async function dragTo(page: Page, source: Locator, target: Locator): Promise<void> {
+  await source.scrollIntoViewIfNeeded();
+  const sourceBox = await source.boundingBox();
+  if (!sourceBox) {
+    throw new Error('Could not resolve source bounding box for drag!');
+  }
+
+  const sourceX = sourceBox.x + sourceBox.width / 2;
+  const sourceY = sourceBox.y + sourceBox.height / 2;
+
+  await page.mouse.move(sourceX, sourceY);
+  await page.mouse.down();
+  await page.waitForTimeout(100);
+  await page.mouse.move(sourceX + 5, sourceY + 5);
+
+  // Scroll the target into view while the drag is already active so that the source
+  // doesn't get pushed off-screen before the pointer-down registers with the sensor.
+  await target.scrollIntoViewIfNeeded();
+  const targetBox = await target.boundingBox();
+  if (!targetBox) {
+    throw new Error('Could not resolve target bounding box for drag!');
+  }
+
+  await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2, {
+    steps: 15,
+  });
+  await page.mouse.up();
+
+  // Wait for dnd-kit's drop animation to finish. The DragOverlay (data-overlay="true") persists
+  // during the animation — starting a new drag while it's active prevents it from registering.
+  await page.locator('[data-overlay="true"]').waitFor({ state: 'hidden' });
+}
diff --git a/test/helpers/signIn.ts b/test/helpers/signIn.ts
new file mode 100644
index 00000000..31a76e4e
--- /dev/null
+++ b/test/helpers/signIn.ts
@@ -0,0 +1,27 @@
+import { type Page } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+const authDir = path.join(import.meta.dirname, '../.auth');
+const stateFile = path.join(authDir, 'state.json');
+const userFile = path.join(authDir, 'user.json');
+
+export async function signIn(page: Page, email: string, password: string): Promise<void> {
+  fs.mkdirSync(authDir, { recursive: true });
+
+  await page.goto('/auth/sign-in');
+  await page.getByLabel('Email').fill(email);
+  await page.getByLabel('Password').fill(password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+  await page.waitForURL('/dashboard');
+
+  // TODO: Verify the AccountMenu trigger selector if this fails.
+  await page.locator('[class*="AccountMenu_Trigger"]').click();
+  await page.getByRole('menuitem', { name: 'Profile' }).click();
+  await page.waitForURL(/\/users\/.+/);
+
+  const userId = page.url().split('/users/')[1].split('?')[0];
+  fs.writeFileSync(userFile, JSON.stringify({ userId }));
+
+  await page.context().storageState({ path: stateFile });
+}
diff --git a/test/helpers/snapshotPairings.ts b/test/helpers/snapshotPairings.ts
new file mode 100644
index 00000000..91412058
--- /dev/null
+++ b/test/helpers/snapshotPairings.ts
@@ -0,0 +1,20 @@
+import { type Locator } from '@playwright/test';
+
+import { DraftTournamentPairing } from '../../convex/_model/tournamentPairings';
+
+export async function snapshotPairings(rows: Locator): Promise<DraftTournamentPairing[]> {
+  const count = await rows.count();
+  const result: DraftTournamentPairing[] = [];
+  for (let i = 0; i < count; i++) {
+    const row = rows.nth(i);
+    const table = await row.getAttribute('data-table');
+    const id0 = await row.getAttribute('data-competitor0-id');
+    const id1 = await row.getAttribute('data-competitor1-id');
+    result.push({
+      table: table !== null && table !== '' ? parseInt(table, 10) : null,
+      tournamentCompetitor0Id: (id0 || null) as DraftTournamentPairing['tournamentCompetitor0Id'],
+      tournamentCompetitor1Id: (id1 || null) as DraftTournamentPairing['tournamentCompetitor1Id'],
+    });
+  }
+  return result;
+}
diff --git a/test/tournament-pairings.spec.ts b/test/tournament-pairings.spec.ts
new file mode 100644
index 00000000..125cb967
--- /dev/null
+++ b/test/tournament-pairings.spec.ts
@@ -0,0 +1,340 @@
+import { type Locator } from '@playwright/test';
+
+import { dragTo } from './helpers/dragTo';
+import { signIn } from './helpers/signIn';
+import { snapshotPairings } from './helpers/snapshotPairings';
+import { api } from '../convex/_generated/api';
+import { DraftTournamentPairing } from '../convex/_model/tournamentPairings';
+import { expect, test } from './fixtures';
+
+test.describe('Tournament Pairing Creation', () => {
+
+  /*
+   * `page` is test-scoped and cannot be used in `beforeAll`. We use `browser` (worker-scoped) to
+   * create a temporary page just for sign-in, which writes state.json. The `page` fixture picks
+   * it up so each test in this suite starts authenticated without repeating the sign-in.
+   */
+  test.beforeAll(async ({ browser }) => {
+    const page = await browser.newPage();
+    await signIn(page, 'alex.carter.cc.3phf3@passmail.net', 'test1234');
+    await page.close();
+  });
+
+  test('Automated Flow', async ({ page, tournamentId }) => {
+    await page.goto(`/tournaments/${tournamentId}`);
+
+    // Navigate to the pairing creation page:
+    await page.getByRole('button', { name: 'Tournament Actions' }).click();
+    await page.getByRole('menuitem', { name: 'Configure Round 1' }).click();
+    await page.waitForURL(`/tournaments/${tournamentId}/pairings`);
+
+    // Dialog auto-opens on load when there are no existing pairings:
+    const dialog = page.getByRole('dialog', { name: 'Auto-Generate Pairings' });
+    await expect(dialog).toBeVisible();
+
+    // Select all competitors, then deselect 2 so 22 are included → 11 pairings needed:
+    await dialog.getByRole('checkbox', { name: 'Select all' }).check();
+    await dialog.getByRole('checkbox', { name: 'Alex Carter' }).uncheck();
+    await dialog.getByRole('checkbox', { name: 'Alice Clark' }).uncheck();
+
+    // Set table count to 10 (below the 11 needed) so that generating fails:
+    await dialog.getByLabel('Table Count').fill('10');
+    await dialog.getByRole('button', { name: 'Generate' }).click();
+
+    // Client-side validation blocks submission and shows a field error:
+    await expect(dialog.getByText('Table count must be at least 11 for 22 competitors.')).toBeVisible();
+
+    // Set table count to 11 to match the number of pairings & generate:
+    await dialog.getByLabel('Table Count').fill('11');
+    await dialog.getByRole('button', { name: 'Generate' }).click();
+    await expect(dialog).not.toBeVisible();
+
+    // Verify parings are created and unassigned:
+    const pairingRows = page.getByTestId('pairing-item');
+    await expect(pairingRows).toHaveCount(11);
+    await expect(pairingRows.getByLabel('Table Assignment')).toContainText(Array(11).fill('Auto'));
+
+    // Confirm pairings with table assignments:
+    await page.getByRole('button', { name: 'Proceed' }).click();
+    const confirmDialog = page.getByRole('dialog', { name: 'Confirm Pairings' });
+    await expect(confirmDialog).toBeVisible();
+    await expect(confirmDialog.getByText('The following pairings will be created:')).toBeVisible();
+
+    // Create pairings and return to the tournament detail page:
+    await confirmDialog.getByRole('button', { name: 'Create' }).click();
+    await page.waitForURL(/\/tournaments\/.+\?tab=pairings/);
+    await expect(page.getByRole('tab', { name: 'Pairings' })).toBeVisible();
+    await expect(page.getByTestId('pairing-row')).toHaveCount(11);
+  });
+
+  test('Manual Flow', async ({ page, tournamentId }) => {
+    await page.goto(`/tournaments/${tournamentId}`);
+
+    // Navigate to the pairing creation page:
+    await page.getByRole('button', { name: 'Tournament Actions' }).click();
+    await page.getByRole('menuitem', { name: 'Configure Round 1' }).click();
+    await page.waitForURL(`/tournaments/${tournamentId}/pairings`);
+
+    // Dialog auto-opens — dismiss it to proceed with manual pairing:
+    const generateDialog = page.getByRole('dialog', { name: 'Auto-Generate Pairings' });
+    await expect(generateDialog).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(generateDialog).not.toBeVisible();
+
+    // With no previous round, all competitors appear in the excluded area:
+    const excludedArea = page.getByRole('heading', { name: 'Excluded' }).locator('../..');
+
+    // Expect included area to have no rows:
+    const rows = page.getByTestId('pairing-item');
+    await expect(rows).toHaveCount(0);
+
+    // Open the 'Configure' dialog:
+    await page.getByRole('button', { name: 'Configure' }).click();
+    const dialog = page.getByRole('dialog', { name: 'Configure Pairing Rules' });
+    await expect(dialog).toBeVisible();
+
+    // Adjust table count to 3:
+    await dialog.getByLabel('Table Count').fill('3');
+    await dialog.getByRole('button', { name: 'Done' }).click();
+    await expect(dialog).not.toBeVisible();
+
+    // Add three pairing rows:
+    const addButton = page.getByRole('button', { name: 'Add Pairing Slot' });
+    await addButton.click();
+    await addButton.click();
+    await addButton.click();
+    await expect(rows).toHaveCount(3);
+
+    // Create the first pairing by dragging 2 competitors into the slots:
+    await dragTo(
+      page,
+      excludedArea.locator('[aria-roledescription="draggable"]').first(),
+      rows.nth(0).locator('[data-over]').nth(0),
+    );
+    await dragTo(
+      page,
+      excludedArea.locator('[aria-roledescription="draggable"]').first(),
+      rows.nth(0).locator('[data-over]').nth(1),
+    );
+
+    // Verify the table options are 1–3 + 'Auto' (4 total) & assign table 3 to the first pairing:
+    await rows.first().getByRole('combobox', { name: 'Table Assignment' }).click();
+    await expect(page.getByRole('option')).toHaveCount(4);
+    await page.getByRole('option', { name: '3' }).click();
+
+    // Create the second pairing by dragging 1 competitor into a slot:
+    await dragTo(
+      page,
+      excludedArea.locator('[aria-roledescription="draggable"]').first(),
+      rows.nth(1).locator('[data-over]').nth(0),
+    );
+    await expect(rows.nth(1).getByText('Bye')).toBeVisible();
+
+    // Remove the unused third row:
+    await rows.nth(2).getByRole('button', { name: 'Remove Pairing' }).click();
+    await expect(rows).toHaveCount(2);
+
+    // Confirm pairings with table assignments:
+    await page.getByRole('button', { name: 'Proceed' }).click();
+    const confirmDialog = page.getByRole('dialog', { name: 'Confirm Pairings' });
+    await expect(confirmDialog).toBeVisible();
+    await expect(confirmDialog.getByText('The following pairings will be created:')).toBeVisible();
+
+    // Verify that the manually assigned table was respected:
+    await expect(confirmDialog.getByTestId('confirm-pairing-table-number').filter({ hasText: /^3$/ })).toBeVisible();
+
+    // Create pairings and return to the tournament detail page:
+    await confirmDialog.getByRole('button', { name: 'Create' }).click();
+    await page.waitForURL(/\/tournaments\/.+\?tab=pairings/);
+    await expect(page.getByRole('tab', { name: 'Pairings' })).toBeVisible();
+    await expect(page.getByTestId('pairing-row')).toHaveCount(2);
+  });
+
+  test('Editing Flow', async ({ convex, page, tournamentId }) => {
+    await convex.mutation(api.utils.createTestTournamentPairings, { tournamentId, round: 0 });
+    await page.goto(`/tournaments/${tournamentId}`);
+
+    // Navigate to the pairing creation page:
+    await page.getByRole('button', { name: 'Tournament Actions' }).click();
+    await page.getByRole('menuitem', { name: 'Configure Round 1' }).click();
+    await page.waitForURL(`/tournaments/${tournamentId}/pairings`);
+    await expect(page.getByRole('heading', { name: 'Set Up Round 1' })).toBeVisible();
+
+    // Verify that existing pairings are present:
+    const pairingRows = page.getByTestId('pairing-item');
+    await expect(pairingRows).not.toHaveCount(0);
+
+    // Open the 'Configure' dialog:
+    await page.getByRole('button', { name: 'Configure' }).click();
+    const configDialog = page.getByRole('dialog', { name: 'Configure Pairing Rules' });
+    await expect(configDialog).toBeVisible();
+
+    // Adjust table count to 5 so that pairings 6-12 switch to 'Auto' table assignment:
+    await configDialog.getByLabel('Table Count').fill('5');
+    await configDialog.getByRole('button', { name: 'Done' }).click();
+    await expect(configDialog).not.toBeVisible();
+    const autoCount = await pairingRows.getByRole('combobox', { name: 'Table Assignment' }).filter({ hasText: 'Auto' }).count();
+    expect(autoCount).toBeGreaterThan(0);
+
+    // Make a manual edit: Remove a competitor:
+    const excludedDroppable = page.getByRole('heading', { name: 'Excluded' }).locator('..').locator('[data-over]');
+    await dragTo(
+      page,
+      pairingRows.first().locator('[aria-roledescription="draggable"]').first(),
+      excludedDroppable,
+    );
+
+    // Make a manual edit: Change a table assignment:
+    await pairingRows.nth(1).getByRole('combobox', { name: 'Table Assignment' }).click();
+    await page.getByRole('option', { name: '1' }).click();
+
+    // Snapshot semantic pairing data before opening Generate, to verify nothing changes on cancel:
+    const pairingsBeforeGenerate = await snapshotPairings(pairingRows);
+
+    // Open the 'Generate' dialog:
+    await page.getByRole('button', { name: 'Generate' }).click();
+    const generateDialog = page.getByRole('dialog', { name: 'Auto-Generate Pairings' });
+    await expect(generateDialog).toBeVisible();
+
+    // Set table count to 12 to match the number of pairings & generate:
+    await generateDialog.getByLabel('Table Count').fill('12');
+    await generateDialog.getByRole('button', { name: 'Generate' }).click();
+
+    // Expect to see the confirmation dialog prior to replace:
+    const confirmReplaceDialog = page.getByRole('dialog', { name: 'Are you sure you want to auto-generate?' });
+    await expect(confirmReplaceDialog).toBeVisible();
+    await expect(confirmReplaceDialog.getByText('Your current pairings will be replaced.')).toBeVisible();
+
+    // Cancel, and expect pairings to remain unchanged, and the generate dialog still open:
+    await confirmReplaceDialog.getByRole('button', { name: 'Cancel' }).click();
+    await expect(confirmReplaceDialog).not.toBeVisible();
+    await expect(generateDialog).toBeVisible();
+
+    // Verify the semantic pairing state is identical after cancel:
+    expect(await snapshotPairings(pairingRows)).toEqual(pairingsBeforeGenerate);
+
+    // Generate again and confirm the replacement:
+    await generateDialog.getByRole('button', { name: 'Generate' }).click();
+    await expect(confirmReplaceDialog).toBeVisible();
+    await confirmReplaceDialog.getByRole('button', { name: 'Replace' }).click();
+    await expect(confirmReplaceDialog).not.toBeVisible();
+    await expect(generateDialog).not.toBeVisible();
+    await expect(pairingRows).not.toHaveCount(0);
+
+    // Confirm pairings with table assignments:
+    await page.getByRole('button', { name: 'Proceed' }).click();
+    const confirmDialog = page.getByRole('dialog', { name: 'Confirm Pairings' });
+    await expect(confirmDialog).toBeVisible();
+    await expect(confirmDialog.getByText('The following pairings will be created:')).toBeVisible();
+
+    // Capture the pairings shown in the 'Confirm' dialog to validate:
+    const confirmedPairings = await snapshotPairings(confirmDialog.getByTestId('pairing-row'));
+    expect(confirmedPairings.length).toBeGreaterThan(0);
+
+    // Create pairings and return to the tournament detail page:
+    await confirmDialog.getByRole('button', { name: 'Create' }).click();
+    await page.waitForURL(/\/tournaments\/.+\?tab=pairings/);
+    await expect(page.getByRole('tab', { name: 'Pairings' })).toBeVisible();
+
+    // Verify the results page shows exactly the pairings that were confirmed:
+    await expect(page.getByTestId('pairing-row')).toHaveCount(confirmedPairings.length);
+    const savedPairings = await snapshotPairings(page.getByTestId('pairing-row'));
+    const pairingKey = (p: DraftTournamentPairing) => `${p.table}|${p.tournamentCompetitor0Id}|${p.tournamentCompetitor1Id}`;
+    const byKey = (a: DraftTournamentPairing, b: DraftTournamentPairing) => pairingKey(a).localeCompare(pairingKey(b));
+    expect(savedPairings.sort(byKey)).toEqual(confirmedPairings.sort(byKey));
+  });
+
+  test('Subsequent Round Flow', async ({ convex, page, tournamentId }) => {
+
+    // Seed and complete round 0 so competitors carry history into round 1 setup:
+    await convex.mutation(api.utils.createTestTournamentPairings, { tournamentId, round: 0 });
+    await convex.mutation(api.tournaments.startTournamentRound, { id: tournamentId });
+    await convex.mutation(api.utils.createTestTournamentMatchResults, { tournamentId });
+    await convex.mutation(api.tournaments.endTournamentRound, { id: tournamentId });
+
+    // Find a known round-0 opponent pair:
+    const round0Pairings = await convex.query(api.tournamentPairings.getTournamentPairings, {
+      tournamentId,
+      round: 0,
+    });
+    const completePairing = round0Pairings.find(
+      (p) => p.tournamentCompetitor0 && p.tournamentCompetitor1,
+    );
+    if (!completePairing) {
+      throw new Error('No complete round 0 pairing found');
+    }
+
+    const idA = completePairing.tournamentCompetitor0!._id;
+    const idB = completePairing.tournamentCompetitor1!._id;
+
+    await page.goto(`/tournaments/${tournamentId}`);
+
+    // Navigate to the pairing creation page:
+    await page.getByRole('button', { name: 'Tournament Actions' }).click();
+    await page.getByRole('menuitem', { name: 'Configure Round 2' }).click();
+    await page.waitForURL(`/tournaments/${tournamentId}/pairings`);
+
+    // Dialog auto-opens with all round-0 participants pre-selected:
+    const generateDialog = page.getByRole('dialog', { name: 'Auto-Generate Pairings' });
+    await expect(generateDialog).toBeVisible();
+
+    // All round-0 participants (24 competitors → 12 pairings) should be pre-selected:
+    await generateDialog.getByLabel('Table Count').fill('12');
+    await generateDialog.getByRole('button', { name: 'Generate' }).click();
+    await expect(generateDialog).not.toBeVisible();
+
+    const rows = page.getByTestId('pairing-item');
+    await expect(rows).toHaveCount(12);
+
+    // Returns the grip button for a given competitor ID by checking which slot (0 or 1)
+    // they occupy in their pairing row, using data attributes:
+    const gripFor = async (id: string): Promise<Locator> => {
+      const isSlot0 = (await page.locator(`[data-testid="pairing-item"][data-competitor0-id="${id}"]`).count()) > 0;
+      return page
+        .locator(`[data-testid="pairing-item"][data-competitor${isSlot0 ? '0' : '1'}-id="${id}"]`)
+        .locator('[aria-roledescription="draggable"]')
+        .nth(isSlot0 ? 0 : 1);
+    };
+
+    const excludedDroppable = page.getByRole('heading', { name: 'Excluded' }).locator('..').locator('[data-over]');
+
+    // Add a new pairing slot:
+    const newRowIndex = await rows.count();
+    await page.getByRole('button', { name: 'Add Pairing Slot' }).click();
+    const newRow = rows.nth(newRowIndex);
+
+    // ---- Repeat opponent → red ----
+    // Drag idA and idB from their generated rows into the new empty slot:
+    await dragTo(page, await gripFor(idA), newRow.locator('[data-over]').nth(0));
+    await dragTo(page, await gripFor(idB), newRow.locator('[data-over]').nth(1));
+    await expect(newRow.locator('[data-color="red"]')).toBeVisible();
+
+    // ---- Repeat table → yellow ----
+    // Move idB back to excluded, replace with a third competitor (first available from remaining rows):
+    await dragTo(
+      page,
+      newRow.locator('[aria-roledescription="draggable"]').nth(1),
+      excludedDroppable,
+    );
+    await dragTo(
+      page,
+      rows.nth(0).locator('[aria-roledescription="draggable"]').first(),
+      newRow.locator('[data-over]').nth(1),
+    );
+
+    // Assign a table idA played in round 0 (tables are assigned starting at stored value 1,
+    // displayed as "2" since the dropdown labels are value + 1):
+    await newRow.getByRole('combobox', { name: 'Table Assignment' }).click();
+    await page.getByRole('option', { name: '2', exact: true }).click();
+    await expect(newRow.locator('[data-color="yellow"]')).toBeVisible();
+
+    // ---- Duplicate table → both red ----
+    const lastRowIndex = await rows.count();
+    await page.getByRole('button', { name: 'Add Pairing Slot' }).click();
+    const lastRow = rows.nth(lastRowIndex);
+    await lastRow.getByRole('combobox', { name: 'Table Assignment' }).click();
+    await page.getByRole('option', { name: '2', exact: true }).click();
+    await expect(newRow.locator('[data-color="red"]')).toBeVisible();
+    await expect(lastRow.locator('[data-color="red"]')).toBeVisible();
+  });
+});