diff --git a/webclient/eslint.boundaries.mjs b/webclient/eslint.boundaries.mjs
index c5012b44b..d79272665 100644
--- a/webclient/eslint.boundaries.mjs
+++ b/webclient/eslint.boundaries.mjs
@@ -12,7 +12,6 @@ const elements = [
   { type: 'services', pattern: ['src/services/**'] },
   { type: 'store', pattern: ['src/store/**'] },
   { type: 'types', pattern: ['src/types/**'] },
-  { type: 'utils', pattern: ['src/utils/**'] },
   { type: 'websocket-types', pattern: ['src/websocket/types/**'] },
   { type: 'websocket', pattern: ['src/websocket/**'] },
 ];
@@ -24,25 +23,24 @@ const rules = [
   { from: { type: 'websocket-types' }, allow: types('generated') },
   { from: { type: 'websocket' }, allow: types('generated', 'websocket-types') },
   { from: { type: 'types' }, allow: types('generated') },
-  { from: { type: 'utils' }, allow: types('types') },
 
-  { from: { type: 'store' }, allow: types('types', 'utils', 'websocket-types') },
-  { from: { type: 'api' }, allow: types('store', 'types', 'utils', 'websocket', 'websocket-types') },
+  { from: { type: 'store' }, allow: types('types', 'websocket-types') },
+  { from: { type: 'api' }, allow: types('store', 'types', 'websocket', 'websocket-types') },
 
   { from: { type: 'images' }, allow: types('types') },
-  { from: { type: 'services' }, allow: types('api', 'store', 'types', 'utils') },
-  { from: { type: 'hooks' }, allow: types('api', 'services', 'store', 'types', 'utils', 'websocket', 'websocket-types') },
+  { from: { type: 'services' }, allow: types('api', 'store', 'types') },
+  { from: { type: 'hooks' }, allow: types('api', 'services', 'store', 'types', 'websocket', 'websocket-types') },
 
   {
     from: { type: 'components' },
-    allow: types('api', 'dialogs', 'forms', 'hooks', 'images', 'services', 'store', 'types', 'utils', 'websocket-types')
+    allow: types('api', 'dialogs', 'forms', 'hooks', 'images', 'services', 'store', 'types', 'websocket-types')
   },
   {
     from: { type: 'containers' },
-    allow: types('api', 'components', 'dialogs', 'forms', 'hooks', 'images', 'services', 'store', 'types', 'utils', 'websocket-types')
+    allow: types('api', 'components', 'dialogs', 'forms', 'hooks', 'images', 'services', 'store', 'types', 'websocket-types')
   },
-  { from: { type: 'dialogs' }, allow: types('components', 'forms', 'hooks', 'services', 'store', 'types', 'utils', 'websocket-types') },
-  { from: { type: 'forms' }, allow: types('components', 'hooks', 'services', 'store', 'types', 'utils', 'websocket-types') },
+  { from: { type: 'dialogs' }, allow: types('components', 'forms', 'hooks', 'services', 'store', 'types', 'websocket-types') },
+  { from: { type: 'forms' }, allow: types('components', 'hooks', 'services', 'store', 'types', 'websocket-types') },
 ];
 
 export const boundariesConfig = [
diff --git a/webclient/integration/src/app/game-board.spec.tsx b/webclient/integration/src/app/game-board.spec.tsx
deleted file mode 100644
index efb4b7840..000000000
--- a/webclient/integration/src/app/game-board.spec.tsx
+++ /dev/null
@@ -1,443 +0,0 @@
-// Exercises the full Game container under the real Redux store + real
-// reducers + real React chain. We dispatch game lifecycle events via
-// GameDispatch (the same path real event handlers take) and assert the
-// Game container's UI tracks state transitions.
-
-import { act, fireEvent, waitFor, screen, within } from '@testing-library/react';
-import { create } from '@bufbuild/protobuf';
-import { useLocation } from 'react-router-dom';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { Data } from '@app/types';
-import { Command_GameSay_ext } from '@app/generated';
-import { GameDispatch, ServerDispatch, store } from '@app/store';
-import { WebsocketTypes } from '@app/websocket/types';
-
-import Game from '../../../src/containers/Game/Game';
-import { renderAppScreen } from './helpers';
-import { findLastGameCommand } from '../helpers/command-capture';
-import { connectRaw } from '../helpers/setup';
-
-// Surfaces the current MemoryRouter pathname so navigate() side-effects
-// (e.g. useGameLifecycle → /server on kick) can be asserted. Depends on
-// `renderAppScreen` → `renderWithProviders` wrapping its tree in a
-// `MemoryRouter`; if that harness ever moves the probe outside a Router,
-// `useLocation()` will throw "useLocation() may be used only in the
-// context of a <Router> component." — fix by adding an inline
-// `<MemoryRouter>` around the probe OR by teaching the harness about it.
-function LocationProbe() {
-  const location = useLocation();
-  return <span data-testid="app-location">{location.pathname}</span>;
-}
-
-function buildEventGameJoined(args: {
-  gameId: number;
-  localPlayerId: number;
-  hostId: number;
-}): Data.Event_GameJoined {
-  return create(Data.Event_GameJoinedSchema, {
-    gameInfo: create(Data.ServerInfo_GameSchema, {
-      gameId: args.gameId,
-      roomId: 1,
-      description: 'Integration Test Game',
-      gameTypes: [],
-      started: false,
-    }),
-    hostId: args.hostId,
-    playerId: args.localPlayerId,
-    spectator: false,
-    judge: false,
-    resuming: false,
-  });
-}
-
-function buildEventGameStateChanged(
-  playerIds: number[],
-  localId: number,
-): Data.Event_GameStateChanged {
-  return create(Data.Event_GameStateChangedSchema, {
-    gameStarted: true,
-    activePlayerId: localId,
-    activePhase: 0,
-    playerList: playerIds.map((pid) =>
-      create(Data.ServerInfo_PlayerSchema, {
-        properties: create(Data.ServerInfo_PlayerPropertiesSchema, {
-          playerId: pid,
-          userInfo: create(Data.ServerInfo_UserSchema, { name: `P${pid}` }),
-          spectator: false,
-          conceded: false,
-          readyStart: false,
-          judge: false,
-        }),
-        deckList: '',
-        zoneList: [
-          create(Data.ServerInfo_ZoneSchema, {
-            name: 'table',
-            type: 1,
-            withCoords: true,
-            cardCount: 0,
-            cardList: [],
-          }),
-          create(Data.ServerInfo_ZoneSchema, {
-            name: 'hand',
-            type: 0,
-            withCoords: false,
-            cardCount: 0,
-            cardList: [],
-          }),
-          create(Data.ServerInfo_ZoneSchema, {
-            name: 'deck',
-            type: 2,
-            withCoords: false,
-            cardCount: 40,
-            cardList: [],
-          }),
-          create(Data.ServerInfo_ZoneSchema, {
-            name: 'grave',
-            type: 1,
-            withCoords: false,
-            cardCount: 0,
-            cardList: [],
-          }),
-          create(Data.ServerInfo_ZoneSchema, {
-            name: 'rfg',
-            type: 1,
-            withCoords: false,
-            cardCount: 0,
-            cardList: [],
-          }),
-        ],
-        counterList: [],
-        arrowList: [],
-      }),
-    ),
-  });
-}
-
-function simulateConnected() {
-  act(() => {
-    ServerDispatch.updateStatus(WebsocketTypes.StatusEnum.LOGGED_IN, null);
-  });
-}
-
-afterEach(() => {
-  act(() => {
-    for (const gameId of Object.keys(store.getState().games.games)) {
-      GameDispatch.gameLeft(Number(gameId));
-    }
-    ServerDispatch.updateStatus(WebsocketTypes.StatusEnum.DISCONNECTED, null);
-  });
-});
-
-beforeEach(() => {
-  // Integration setup installs fake timers for KeepAliveService control;
-  // waitFor / React effects need real timers to run between dispatch and assert.
-  vi.useRealTimers();
-  simulateConnected();
-});
-
-describe('Game board integration', () => {
-  it('renders the empty-board placeholder until a game is joined', () => {
-    renderAppScreen(<Game />);
-
-    expect(screen.getByTestId('game-empty')).toBeInTheDocument();
-    expect(screen.getByTestId('phase-bar')).toBeInTheDocument();
-    expect(screen.getByTestId('right-panel')).toBeInTheDocument();
-  });
-
-  it('transitions from empty → active board when gameJoined + gameStateChanged fire', async () => {
-    renderAppScreen(<Game />);
-
-    expect(screen.getByTestId('game-empty')).toBeInTheDocument();
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('game-empty')).not.toBeInTheDocument();
-    });
-
-    expect(screen.getByTestId('player-board-1')).toBeInTheDocument();
-    expect(screen.getByTestId('player-board-2')).toBeInTheDocument();
-    expect(screen.getByTestId('hand-zone')).toBeInTheDocument();
-  });
-
-  it('returns to the empty placeholder when gameLeft fires', async () => {
-    renderAppScreen(<Game />);
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('player-board-1')).toBeInTheDocument();
-    });
-
-    act(() => {
-      GameDispatch.gameLeft(42);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('game-empty')).toBeInTheDocument();
-    });
-
-    expect(screen.queryByTestId('player-board-1')).not.toBeInTheDocument();
-  });
-
-  it('hides the opponent selector for 2-player games but shows it for 3+', async () => {
-    renderAppScreen(<Game />);
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('player-board-1')).toBeInTheDocument();
-    });
-
-    expect(screen.queryByTestId('opponent-selector')).not.toBeInTheDocument();
-
-    act(() => {
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2, 3], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('opponent-selector')).toBeInTheDocument();
-    });
-  });
-
-  it('mirrors the opponent board and leaves the local board upright', async () => {
-    renderAppScreen(<Game />);
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('player-board-2')).toHaveClass('player-board--mirrored');
-    });
-
-    expect(screen.getByTestId('player-board-1')).not.toHaveClass('player-board--mirrored');
-  });
-
-  it('renders the deck/graveyard/exile rail in desktop order (no stack in rail)', async () => {
-    renderAppScreen(<Game />);
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('player-board-1')).toBeInTheDocument();
-    });
-
-    const localBoard = screen.getByTestId('player-board-1');
-    const rail = within(localBoard).getByTestId('zone-rail');
-    const labels = Array.from(rail.querySelectorAll('.zone-stack__label')).map(
-      (n) => n.textContent,
-    );
-    expect(labels).toEqual(['Deck', 'Graveyard', 'Exile']);
-    expect(within(rail).queryByText('Stack')).not.toBeInTheDocument();
-  });
-
-  it('sends a game_say command through the socket when a chat message is submitted', async () => {
-    // Establish a real mock socket so the outbound CommandContainer is captured.
-    connectRaw();
-
-    renderAppScreen(<Game />);
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      // buildEventGameStateChanged sets gameStarted: true, suppressing the
-      // deck-select dialog which would otherwise block focus/interaction.
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('game chat input')).not.toBeDisabled();
-    });
-
-    const input = screen.getByLabelText('game chat input') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'gl hf' } });
-    fireEvent.submit(input.closest('form')!);
-
-    const captured = findLastGameCommand(Command_GameSay_ext);
-    expect(captured.value.message).toBe('gl hf');
-    expect(captured.gameId).toBe(42);
-  });
-
-  it('navigates to /server when the local user is kicked', async () => {
-    renderAppScreen(
-      <>
-        <Game />
-        <LocationProbe />
-      </>,
-    );
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('player-board-1')).toBeInTheDocument();
-    });
-
-    act(() => {
-      GameDispatch.kicked(42);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('app-location')).toHaveTextContent('/server');
-    });
-  });
-
-  it('navigates to /server when the game is closed by the host', async () => {
-    renderAppScreen(
-      <>
-        <Game />
-        <LocationProbe />
-      </>,
-    );
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('player-board-1')).toBeInTheDocument();
-    });
-
-    act(() => {
-      GameDispatch.gameClosed(42);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('app-location')).toHaveTextContent('/server');
-    });
-  });
-
-  it('reflects a host change through both PlayerList badge and PlayerInfoPanel', async () => {
-    renderAppScreen(<Game />);
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        buildEventGameStateChanged([1, 2], 1),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('player-list-item-1')).toBeInTheDocument();
-    });
-
-    // Host starts as 1; badge should be on row 1.
-    expect(
-      screen.getByTestId('player-list-item-1').querySelector('.player-list__host-badge'),
-    ).not.toBeNull();
-    expect(
-      screen.getByTestId('player-list-item-2').querySelector('.player-list__host-badge'),
-    ).toBeNull();
-
-    // Host changes to player 2.
-    act(() => {
-      GameDispatch.gameHostChanged(42, 2);
-    });
-
-    await waitFor(() => {
-      expect(
-        screen.getByTestId('player-list-item-2').querySelector('.player-list__host-badge'),
-      ).not.toBeNull();
-    });
-    expect(
-      screen.getByTestId('player-list-item-1').querySelector('.player-list__host-badge'),
-    ).toBeNull();
-  });
-
-  it('auto-opens the DeckSelectDialog when a game is joined and not started', async () => {
-    renderAppScreen(<Game />);
-
-    act(() => {
-      GameDispatch.gameJoined(
-        buildEventGameJoined({ gameId: 42, localPlayerId: 1, hostId: 1 }),
-      );
-      GameDispatch.gameStateChanged(
-        42,
-        create(Data.Event_GameStateChangedSchema, {
-          gameStarted: false,
-          activePlayerId: 1,
-          activePhase: -1,
-          playerList: [1, 2].map((pid) =>
-            create(Data.ServerInfo_PlayerSchema, {
-              properties: create(Data.ServerInfo_PlayerPropertiesSchema, {
-                playerId: pid,
-                userInfo: create(Data.ServerInfo_UserSchema, { name: `P${pid}` }),
-              }),
-              deckList: '',
-              zoneList: [],
-              counterList: [],
-              arrowList: [],
-            }),
-          ),
-        }),
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('deck list')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/webclient/integration/src/websocket/connection.spec.ts b/webclient/integration/src/websocket/connection.spec.ts
index 78a366f71..1903bb75d 100644
--- a/webclient/integration/src/websocket/connection.spec.ts
+++ b/webclient/integration/src/websocket/connection.spec.ts
@@ -100,12 +100,7 @@ describe('connection lifecycle', () => {
 
     vi.advanceTimersByTime(5000);
 
-    // Fire onclose the way a real browser would when the connection-attempt
-    // timer closes a still-connecting socket.
-    mock.onclose?.({ code: 1006, reason: '', wasClean: false } as CloseEvent);
-
     expect(mock.close).toHaveBeenCalled();
-    // Never-opened sockets bypass reconnect and land on DISCONNECTED directly.
     expect(store.getState().server.status.state).toBe(WebsocketTypes.StatusEnum.DISCONNECTED);
   });
 
@@ -116,15 +111,12 @@ describe('connection lifecycle', () => {
 
     const mock = getMockWebSocket();
     getWebClient().disconnect();
-    // The transport schedules close() synchronously; onclose follows in the
-    // browser event loop. Simulate it so the status transition fires.
-    mock.onclose?.({ code: 1000, reason: '', wasClean: true } as CloseEvent);
 
     expect(mock.close).toHaveBeenCalled();
     expect(store.getState().server.status.state).toBe(WebsocketTypes.StatusEnum.DISCONNECTED);
   });
 
-  it('enters RECONNECTING on unexpected socket close after a successful handshake', () => {
+  it('drops pending commands and clears state on unexpected socket close', () => {
     connectAndHandshake();
 
     // A login command is now pending (sent during handshake)
@@ -135,8 +127,6 @@ describe('connection lifecycle', () => {
     mock.readyState = 3;
     mock.onclose?.({ code: 1006, reason: '', wasClean: false } as CloseEvent);
 
-    // With reconnect configured, a drop after a successful open enters the
-    // reconnect state machine rather than going straight to DISCONNECTED.
-    expect(store.getState().server.status.state).toBe(WebsocketTypes.StatusEnum.RECONNECTING);
+    expect(store.getState().server.status.state).toBe(WebsocketTypes.StatusEnum.DISCONNECTED);
   });
 });
\ No newline at end of file
diff --git a/webclient/integration/src/websocket/game.spec.ts b/webclient/integration/src/websocket/game.spec.ts
index 43ad1056c..4775b5332 100644
--- a/webclient/integration/src/websocket/game.spec.ts
+++ b/webclient/integration/src/websocket/game.spec.ts
@@ -306,22 +306,10 @@ describe('game', () => {
             userInfo: create(Data.ServerInfo_UserSchema, { name: 'alice' }),
           }),
           zoneList: [
-            create(Data.ServerInfo_ZoneSchema, {
-              name: 'deck', type: Data.ServerInfo_Zone_ZoneType.HiddenZone,
-              cardList: deckCards, cardCount: 3,
-            }),
-            create(Data.ServerInfo_ZoneSchema, {
-              name: 'hand', type: Data.ServerInfo_Zone_ZoneType.HiddenZone,
-              cardList: [], cardCount: 0,
-            }),
-            create(Data.ServerInfo_ZoneSchema, {
-              name: 'table', type: Data.ServerInfo_Zone_ZoneType.PublicZone,
-              withCoords: true, cardList: [], cardCount: 0,
-            }),
-            create(Data.ServerInfo_ZoneSchema, {
-              name: 'grave', type: Data.ServerInfo_Zone_ZoneType.PublicZone,
-              cardList: [], cardCount: 0,
-            }),
+            create(Data.ServerInfo_ZoneSchema, { name: 'deck', type: Data.ServerInfo_Zone_ZoneType.HiddenZone, cardList: deckCards, cardCount: 3 }),
+            create(Data.ServerInfo_ZoneSchema, { name: 'hand', type: Data.ServerInfo_Zone_ZoneType.HiddenZone, cardList: [], cardCount: 0 }),
+            create(Data.ServerInfo_ZoneSchema, { name: 'table', type: Data.ServerInfo_Zone_ZoneType.PublicZone, withCoords: true, cardList: [], cardCount: 0 }),
+            create(Data.ServerInfo_ZoneSchema, { name: 'grave', type: Data.ServerInfo_Zone_ZoneType.PublicZone, cardList: [], cardCount: 0 }),
           ],
           counterList: [],
           arrowList: [],
@@ -368,14 +356,7 @@ describe('game', () => {
       ext: Data.Event_GameSay_ext,
       value: create(Data.Event_GameSaySchema, { message: 'good luck!' }),
     }));
-    // game.messages is a merged chat + event-log stream (matches desktop's
-    // MessageLogWidget). Earlier steps in this lifecycle (game-started,
-    // phase change, draw) also push event entries, so filter to chat.
-    const chatMessages = store
-      .getState()
-      .games.games[99].messages.filter((m) => m.kind === 'chat');
-    expect(chatMessages).toHaveLength(1);
-    expect(chatMessages[0].message).toBe('good luck!');
+    expect(store.getState().games.games[99].messages).toHaveLength(1);
 
     // ── 6. Discard (move card from hand to graveyard) ────────────────────
     deliverMessage(buildGameEventMessage({
@@ -432,4 +413,4 @@ describe('game', () => {
 
     expect(store.getState().games.games[99].players[1]).toBeUndefined();
   });
-});
+});
\ No newline at end of file
diff --git a/webclient/package-lock.json b/webclient/package-lock.json
index d36442220..8697b0d3e 100644
--- a/webclient/package-lock.json
+++ b/webclient/package-lock.json
@@ -9,8 +9,6 @@
       "version": "1.0.0",
       "dependencies": {
         "@bufbuild/protobuf": "^2.11.0",
-        "@dnd-kit/core": "^6.3.1",
-        "@dnd-kit/utilities": "^3.2.2",
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^9.0.0",
@@ -55,7 +53,6 @@
         "@typescript-eslint/eslint-plugin": "^8.58.2",
         "@typescript-eslint/parser": "^8.58.2",
         "@vitejs/plugin-react": "^6.0.1",
-        "@vitejs/plugin-react-swc": "^4.3.0",
         "@vitest/coverage-v8": "^4.1.4",
         "eslint": "^10.2.0",
         "eslint-import-resolver-typescript": "^4.4.4",
@@ -637,45 +634,6 @@
         "node": ">=20.19.0"
       }
     },
-    "node_modules/@dnd-kit/accessibility": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
-      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@dnd-kit/core": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
-      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@dnd-kit/accessibility": "^3.1.1",
-        "@dnd-kit/utilities": "^3.2.2",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@dnd-kit/utilities": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
-      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/@emnapi/core": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
@@ -1671,268 +1629,6 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
-    "node_modules/@swc/core": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.30.tgz",
-      "integrity": "sha512-R8VQbQY1BZcbIF2p3gjlTCwAQzx1A194ugWfwld5y+WgVVWqVKm7eURGGOVbQVubgKWzidP2agomBbg96rZilQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/counter": "^0.1.3",
-        "@swc/types": "^0.1.26"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/swc"
-      },
-      "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.15.30",
-        "@swc/core-darwin-x64": "1.15.30",
-        "@swc/core-linux-arm-gnueabihf": "1.15.30",
-        "@swc/core-linux-arm64-gnu": "1.15.30",
-        "@swc/core-linux-arm64-musl": "1.15.30",
-        "@swc/core-linux-ppc64-gnu": "1.15.30",
-        "@swc/core-linux-s390x-gnu": "1.15.30",
-        "@swc/core-linux-x64-gnu": "1.15.30",
-        "@swc/core-linux-x64-musl": "1.15.30",
-        "@swc/core-win32-arm64-msvc": "1.15.30",
-        "@swc/core-win32-ia32-msvc": "1.15.30",
-        "@swc/core-win32-x64-msvc": "1.15.30"
-      },
-      "peerDependencies": {
-        "@swc/helpers": ">=0.5.17"
-      },
-      "peerDependenciesMeta": {
-        "@swc/helpers": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.30.tgz",
-      "integrity": "sha512-VvpP+vq08HmGYewMWvrdsxh9s2lthz/808zXm8Yu5kaqeR8Yia2b0eYXleHQ3VAjoStUDk6LzTheBW9KXYQdMA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-darwin-x64": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.30.tgz",
-      "integrity": "sha512-WiJA0hiZI3nwQAO6mu5RqigtWGDtth4Hiq6rbZxAaQyhIcqKIg5IoMRc1Y071lrNJn29eEDMC86Rq58xgUxlDg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.30.tgz",
-      "integrity": "sha512-YANuFUo48kIT6plJgCD0keae9HFXfjxsbvsgevqc0hr/07X/p7sAWTFOGYEc2SXcASaK7UvuQqzlbW8pr7R79g==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.30.tgz",
-      "integrity": "sha512-VndG8jaR4ugY6u+iVOT0Q+d2fZd7sLgjPgN8W/Le+3EbZKl+cRfFxV7Eoz4gfLqhmneZPdcIzf9T3LkgkmqNLg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.30.tgz",
-      "integrity": "sha512-1SYGs2l0Yyyi0pR/P/NKz/x0kqxkoiw+BXeJjLUdecSk/KasncWlJrc6hOvFSgKHOBrzgM5jwuluKtlT8dnrcA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-ppc64-gnu": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-ppc64-gnu/-/core-linux-ppc64-gnu-1.15.30.tgz",
-      "integrity": "sha512-TXREtiXeRhbfDFbmhnkIsXpKfzbfT73YkV2ZF6w0sfxgjC5zI2ZAbaCOq25qxvegofj2K93DtOpm9RLaBgqR2g==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-s390x-gnu": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-s390x-gnu/-/core-linux-s390x-gnu-1.15.30.tgz",
-      "integrity": "sha512-DCR2YYeyd6DQE4OuDhImouuNcjXEiEdnn1Y0DyGteugPEDvVuvYk8Xddi+4o2SgWH6jiW8/I+3emZvbep1NC+g==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.30.tgz",
-      "integrity": "sha512-5Pizw3NgfOJ5BJOBK8TIRa59xFW2avESTOBDPTAYwZYa1JNDs+KMF9lUfjJiJLM5HiMs/wPheA9eiT0q9m2AoA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.30.tgz",
-      "integrity": "sha512-qyqydP/wyH8alcIP4a2hnGSjHLJjm9H7yDFup+CPy9oTahFgLLwnNcv5UHXqO2Qs3AIND+cls5f/Bb6hqpxdgA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.30.tgz",
-      "integrity": "sha512-CaQENgDHVGOg1mSF5sQVgvfFHG9kjMor2rkLMLeLOkfZYNj13ppnJ9+lfaBZLZUMMbnlGQnavCJb8PVBUOso7Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.30.tgz",
-      "integrity": "sha512-30VdLeGk6fugiUs/kUdJ/pAg7z/zpvVbR11RH60jZ0Z42WIeIniYx0rLEWN7h/pKJ3CopqsQ3RsogCAkRKiA2g==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.15.30",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.30.tgz",
-      "integrity": "sha512-4iObHPR+Q4oDY110EF5SF5eIaaVJNpMdG9C0q3Q92BsJ5y467uHz7sYQhP60WYlLFsLQ1el2YrIPUItUAQGOKg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/@swc/types": {
-      "version": "0.1.26",
-      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.26.tgz",
-      "integrity": "sha512-lyMwd7WGgG79RS7EERZV3T8wMdmPq3xwyg+1nmAM64kIhx5yl+juO2PYIHb7vTiPgPCj8LYjsNV2T5wiQHUEaw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/counter": "^0.1.3"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -2713,23 +2409,6 @@
         }
       }
     },
-    "node_modules/@vitejs/plugin-react-swc": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-4.3.0.tgz",
-      "integrity": "sha512-mOkXCII839dHyAt/gpoSlm28JIVDwhZ6tnG6wJxUy2bmOx7UaPjvOyIDf3SFv5s7Eo7HVaq6kRcu6YMEzt5Z7w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@rolldown/pluginutils": "1.0.0-rc.7",
-        "@swc/core": "^1.15.11"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      },
-      "peerDependencies": {
-        "vite": "^4 || ^5 || ^6 || ^7 || ^8"
-      }
-    },
     "node_modules/@vitest/coverage-v8": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.4.tgz",
diff --git a/webclient/package.json b/webclient/package.json
index 2312f5694..386070a37 100644
--- a/webclient/package.json
+++ b/webclient/package.json
@@ -27,8 +27,6 @@
   },
   "dependencies": {
     "@bufbuild/protobuf": "^2.11.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^9.0.0",
@@ -73,7 +71,6 @@
     "@typescript-eslint/eslint-plugin": "^8.58.2",
     "@typescript-eslint/parser": "^8.58.2",
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitejs/plugin-react-swc": "^4.3.0",
     "@vitest/coverage-v8": "^4.1.4",
     "eslint": "^10.2.0",
     "eslint-import-resolver-typescript": "^4.4.4",
diff --git a/webclient/src/__test-utils__/index.ts b/webclient/src/__test-utils__/index.ts
index 890c4a9d5..7ee47e601 100644
--- a/webclient/src/__test-utils__/index.ts
+++ b/webclient/src/__test-utils__/index.ts
@@ -1,10 +1,4 @@
 export { withMockLocation } from './globalGuards';
 export { renderWithProviders } from './renderWithProviders';
 export { createMockWebClient } from './mockWebClient';
-export {
-  disconnectedState,
-  connectedState,
-  connectedWithRoomsState,
-  makeStoreState,
-  makeUser,
-} from './storeFixtures';
+export { disconnectedState, connectedState, connectedWithRoomsState, makeUser } from './storeFixtures';
diff --git a/webclient/src/__test-utils__/makeHookWrapper.tsx b/webclient/src/__test-utils__/makeHookWrapper.tsx
deleted file mode 100644
index 6a2514d84..000000000
--- a/webclient/src/__test-utils__/makeHookWrapper.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ReactNode } from 'react';
-import { Provider } from 'react-redux';
-import { configureStore, Reducer } from '@reduxjs/toolkit';
-
-import { WebClientContext } from '../hooks/useWebClient';
-import type { WebClient } from '../websocket';
-import { createMockWebClient } from './mockWebClient';
-
-// Minimal Provider wrapper for hook-only tests. Use this instead of
-// `renderWithProviders` when you need `renderHook` — the full provider tree
-// auto-instantiates the singleton store via `@app/store`, which races with
-// any test-local store you preload. Deep-import the reducer(s) you need and
-// pass them here (see useCurrentGame.spec.tsx for the canonical pattern).
-
-export function makeReduxHookWrapper<S>(
-  reducer: Reducer<S>,
-  preloadedState: S,
-) {
-  const store = configureStore({
-    reducer,
-    preloadedState: preloadedState as Parameters<typeof configureStore>[0]['preloadedState'],
-  });
-  function Wrapper({ children }: { children: ReactNode }) {
-    return <Provider store={store}>{children}</Provider>;
-  }
-  return { Wrapper, store };
-}
-
-export interface MakeReduxWebClientHookWrapperOptions<S> {
-  reducer: Reducer<S>;
-  preloadedState: S;
-  webClient?: WebClient;
-}
-
-export function makeReduxWebClientHookWrapper<S>({
-  reducer,
-  preloadedState,
-  webClient,
-}: MakeReduxWebClientHookWrapperOptions<S>) {
-  const store = configureStore({
-    reducer,
-    preloadedState: preloadedState as Parameters<typeof configureStore>[0]['preloadedState'],
-  });
-  const client = webClient ?? createMockWebClient();
-  function Wrapper({ children }: { children: ReactNode }) {
-    return (
-      <Provider store={store}>
-        <WebClientContext value={client}>{children}</WebClientContext>
-      </Provider>
-    );
-  }
-  return { Wrapper, store, webClient: client };
-}
diff --git a/webclient/src/__test-utils__/mockWebClient.ts b/webclient/src/__test-utils__/mockWebClient.ts
index 3460199ef..875a4a9d9 100644
--- a/webclient/src/__test-utils__/mockWebClient.ts
+++ b/webclient/src/__test-utils__/mockWebClient.ts
@@ -34,43 +34,10 @@ export function createMockWebClient() {
         leaveRoom: vi.fn(),
         roomSay: vi.fn(),
         createGame: vi.fn(),
-        joinGame: vi.fn(),
       },
       game: {
+        joinGame: vi.fn(),
         leaveGame: vi.fn(),
-        kickFromGame: vi.fn(),
-        gameSay: vi.fn(),
-        readyStart: vi.fn(),
-        concede: vi.fn(),
-        unconcede: vi.fn(),
-        judge: vi.fn(),
-        nextTurn: vi.fn(),
-        setActivePhase: vi.fn(),
-        reverseTurn: vi.fn(),
-        moveCard: vi.fn(),
-        flipCard: vi.fn(),
-        attachCard: vi.fn(),
-        createToken: vi.fn(),
-        setCardAttr: vi.fn(),
-        setCardCounter: vi.fn(),
-        incCardCounter: vi.fn(),
-        drawCards: vi.fn(),
-        undoDraw: vi.fn(),
-        createArrow: vi.fn(),
-        deleteArrow: vi.fn(),
-        createCounter: vi.fn(),
-        setCounter: vi.fn(),
-        incCounter: vi.fn(),
-        delCounter: vi.fn(),
-        shuffle: vi.fn(),
-        dumpZone: vi.fn(),
-        revealCards: vi.fn(),
-        changeZoneProperties: vi.fn(),
-        deckSelect: vi.fn(),
-        setSideboardPlan: vi.fn(),
-        setSideboardLock: vi.fn(),
-        mulligan: vi.fn(),
-        rollDie: vi.fn(),
       },
       admin: {
         adjustMod: vi.fn(),
diff --git a/webclient/src/__test-utils__/renderWithProviders.tsx b/webclient/src/__test-utils__/renderWithProviders.tsx
index 6cef77e4d..7d78f171b 100644
--- a/webclient/src/__test-utils__/renderWithProviders.tsx
+++ b/webclient/src/__test-utils__/renderWithProviders.tsx
@@ -6,57 +6,13 @@ import { MemoryRouter } from 'react-router-dom';
 import { I18nextProvider } from 'react-i18next';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import { DndContext } from '@dnd-kit/core';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 
-// Disables MUI's ripple animation AND all component transitions in tests.
-// The ripple fires a deferred state update after clicks/focus that would
-// trigger a noisy "update to ForwardRef(TouchRipple) was not wrapped in
-// act(...)" warning. Transitions (Grow/Fade/Slide used by Menu, Dialog,
-// Popover, Tooltip) default to ~225ms, which is pure wait-time in jsdom
-// — every portal open paid this cost before. Zeroing `transitions.duration`
-// plus the per-component `transitionDuration: 0` override belt-and-braces
-// covers the full v9 surface: styled transitions read the theme; component-
-// level Transition props need the defaultProps override.
-const testTheme = createTheme({
-  transitions: {
-    duration: {
-      shortest: 0, shorter: 0, short: 0,
-      standard: 0, complex: 0,
-      enteringScreen: 0, leavingScreen: 0,
-    },
-    create: () => 'none',
-  },
-  components: {
-    MuiButtonBase: { defaultProps: { disableRipple: true } },
-    MuiDialog: { defaultProps: { transitionDuration: 0 } },
-    MuiMenu: { defaultProps: { transitionDuration: 0 } },
-    MuiPopover: { defaultProps: { transitionDuration: 0 } },
-    MuiTooltip: { defaultProps: { enterDelay: 0, leaveDelay: 0 } },
-  },
-});
-
-import { WebClientContext } from '../hooks/useWebClient';
-import type { WebClient } from '../websocket';
-import rootReducer from '../store/rootReducer';
+import { gamesReducer } from '../store/game';
+import { roomsReducer } from '../store/rooms';
+import { serverReducer } from '../store/server';
+import { actionReducer } from '../store/actions';
 import { ToastProvider } from '../components/Toast/ToastContext';
-import { storeMiddlewareOptions } from '../store/store';
 import type { RootState } from '../store/store';
-import { createMockWebClient } from './mockWebClient';
-
-// Lazy-initialized per test file (vitest isolate: true re-evaluates module
-// graph per file). Reused by every `renderWithProviders` call that doesn't
-// inject its own webClient, so the ~65 vi.fn() allocations happen once per
-// file instead of once per render. The global `afterEach` in setupTests.ts
-// runs `vi.clearAllMocks()` which resets call history between tests without
-// destroying the fn instances — exactly what we want here.
-let defaultWebClient: WebClient | undefined;
-function getDefaultWebClient(): WebClient {
-  if (!defaultWebClient) {
-    defaultWebClient = createMockWebClient();
-  }
-  return defaultWebClient;
-}
 
 // Non-empty `resources` registers en-US so `resolvedLanguage` is defined;
 // without it MUI warns about out-of-range Select values.
@@ -68,18 +24,15 @@ testI18n.use(initReactI18next).init({
   interpolation: { escapeValue: false },
 });
 
-// `configureStore`'s `preloadedState` wants `PreloadedState<CombinedState<…>>`
-// which narrows collection types past our slice interfaces. A single cast
-// here keeps the test harness loose (each test injects only the slices it
-// cares about) while specs themselves stay strict via `makeStoreState`.
 function createTestStore(preloadedState?: Partial<RootState>) {
   return configureStore({
-    reducer: rootReducer,
-    preloadedState: preloadedState as Parameters<typeof configureStore>[0]['preloadedState'],
-    // Share the production middleware config so the serializableCheck
-    // tolerates protobuf messages (isMessage) the same way the real store
-    // does — otherwise every proto-payload dispatch in tests spams stderr.
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware(storeMiddlewareOptions),
+    reducer: {
+      games: gamesReducer,
+      rooms: roomsReducer,
+      server: serverReducer,
+      action: actionReducer,
+    },
+    preloadedState: preloadedState as any,
   });
 }
 
@@ -87,7 +40,6 @@ interface ExtendedRenderOptions extends Omit<RenderOptions, 'wrapper'> {
   preloadedState?: Partial<RootState>;
   store?: EnhancedStore;
   route?: string;
-  webClient?: WebClient;
 }
 
 export function renderWithProviders(
@@ -96,7 +48,6 @@ export function renderWithProviders(
     preloadedState,
     store = createTestStore(preloadedState),
     route = '/',
-    webClient = getDefaultWebClient(),
     ...renderOptions
   }: ExtendedRenderOptions = {},
 ) {
@@ -104,21 +55,11 @@ export function renderWithProviders(
     return (
       <Provider store={store}>
         <I18nextProvider i18n={testI18n}>
-          <ThemeProvider theme={testTheme}>
-            <ToastProvider>
-              <MemoryRouter initialEntries={[route]}>
-                <WebClientContext value={webClient}>
-                  <DndContext
-                    accessibility={{
-                      screenReaderInstructions: { draggable: '' },
-                    }}
-                  >
-                    {children}
-                  </DndContext>
-                </WebClientContext>
-              </MemoryRouter>
-            </ToastProvider>
-          </ThemeProvider>
+          <ToastProvider>
+            <MemoryRouter initialEntries={[route]}>
+              {children}
+            </MemoryRouter>
+          </ToastProvider>
         </I18nextProvider>
       </Provider>
     );
@@ -126,7 +67,6 @@ export function renderWithProviders(
 
   return {
     store,
-    webClient,
     ...render(ui, { wrapper: Wrapper, ...renderOptions }),
   };
 }
diff --git a/webclient/src/__test-utils__/storeFixtures.ts b/webclient/src/__test-utils__/storeFixtures.ts
index 0f0c3efd7..2d7a57878 100644
--- a/webclient/src/__test-utils__/storeFixtures.ts
+++ b/webclient/src/__test-utils__/storeFixtures.ts
@@ -27,7 +27,6 @@ function makeUser(overrides: Partial<Data.ServerInfo_User> = {}): Data.ServerInf
 export const disconnectedState: Partial<RootState> = {
   server: {
     initialized: false,
-    testConnectionStatus: null,
     buddyList: {},
     ignoreList: {},
     status: {
@@ -64,10 +63,6 @@ export const disconnectedState: Partial<RootState> = {
     messages: {},
     sortGamesBy: { field: App.GameSortField.START_TIME, order: App.SortDirection.DESC },
     sortUsersBy: { field: App.UserSortField.NAME, order: App.SortDirection.ASC },
-    selectedGameIds: {},
-    gameFilters: {},
-    joinGamePending: false,
-    joinGameError: null,
   },
   games: { games: {} },
   action: { type: null, payload: null, meta: null, error: false, count: 0 },
@@ -127,27 +122,3 @@ export const connectedWithRoomsState: Partial<RootState> = {
 };
 
 export { makeUser };
-
-/**
- * Deep-partial of a root state. Let specs pass partial slice shapes
- * (typically just `games: { games: { ... } }`) without the ~60 fields of
- * server/rooms that the test doesn't care about.
- */
-type DeepPartial<T> = T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } : T;
-
-/**
- * Wraps a partial root-state literal with a safe single `as`-cast so specs
- * don't need to sprinkle `as any` on every `preloadedState` argument. The
- * runtime value is the exact same literal; the only thing this helper buys
- * is deleting the `as any` cast from call sites.
- *
- * @example
- *   renderWithProviders(<MyComponent />, {
- *     preloadedState: makeStoreState({
- *       games: { games: { 1: makeGameEntry({ ... }) } },
- *     }),
- *   });
- */
-export function makeStoreState(partial: DeepPartial<RootState>): Partial<RootState> {
-  return partial as Partial<RootState>;
-}
diff --git a/webclient/src/api/request/AuthenticationRequestImpl.ts b/webclient/src/api/request/AuthenticationRequestImpl.ts
index e94f9d2bf..ece8a1891 100644
--- a/webclient/src/api/request/AuthenticationRequestImpl.ts
+++ b/webclient/src/api/request/AuthenticationRequestImpl.ts
@@ -15,20 +15,11 @@ interface AppAuthRequestOverrides extends WebsocketTypes.AuthRequestMap {
   ForgotPasswordResetParams: Omit<WebsocketTypes.PasswordResetConnectOptions, 'reason'>;
 }
 
-const CONNECTING_STATUS_LABEL = 'Connecting...';
-
-function beginConnect(
-  options: { host: string; port: string | number },
-  reason: WebsocketTypes.WebSocketConnectReason,
-): void {
-  setPendingOptions({ ...options, reason });
-  SessionCommands.updateStatus(WebsocketTypes.StatusEnum.CONNECTING, CONNECTING_STATUS_LABEL);
-  WebClient.instance.connect({ host: options.host, port: options.port });
-}
-
 export class AuthenticationRequestImpl implements WebsocketTypes.IAuthenticationRequest<AppAuthRequestOverrides> {
   login(options: Omit<WebsocketTypes.LoginConnectOptions, 'reason'>): void {
-    beginConnect(options, WebsocketTypes.WebSocketConnectReason.LOGIN);
+    setPendingOptions({ ...options, reason: WebsocketTypes.WebSocketConnectReason.LOGIN });
+    SessionCommands.updateStatus(WebsocketTypes.StatusEnum.CONNECTING, 'Connecting...');
+    WebClient.instance.connect({ host: options.host, port: options.port });
   }
 
   testConnection(options: Omit<WebsocketTypes.TestConnectionOptions, 'reason'>): void {
@@ -36,23 +27,33 @@ export class AuthenticationRequestImpl implements WebsocketTypes.IAuthentication
   }
 
   register(options: Omit<WebsocketTypes.RegisterConnectOptions, 'reason'>): void {
-    beginConnect(options, WebsocketTypes.WebSocketConnectReason.REGISTER);
+    setPendingOptions({ ...options, reason: WebsocketTypes.WebSocketConnectReason.REGISTER });
+    SessionCommands.updateStatus(WebsocketTypes.StatusEnum.CONNECTING, 'Connecting...');
+    WebClient.instance.connect({ host: options.host, port: options.port });
   }
 
   activateAccount(options: Omit<WebsocketTypes.ActivateConnectOptions, 'reason'>): void {
-    beginConnect(options, WebsocketTypes.WebSocketConnectReason.ACTIVATE_ACCOUNT);
+    setPendingOptions({ ...options, reason: WebsocketTypes.WebSocketConnectReason.ACTIVATE_ACCOUNT });
+    SessionCommands.updateStatus(WebsocketTypes.StatusEnum.CONNECTING, 'Connecting...');
+    WebClient.instance.connect({ host: options.host, port: options.port });
   }
 
   resetPasswordRequest(options: Omit<WebsocketTypes.PasswordResetRequestConnectOptions, 'reason'>): void {
-    beginConnect(options, WebsocketTypes.WebSocketConnectReason.PASSWORD_RESET_REQUEST);
+    setPendingOptions({ ...options, reason: WebsocketTypes.WebSocketConnectReason.PASSWORD_RESET_REQUEST });
+    SessionCommands.updateStatus(WebsocketTypes.StatusEnum.CONNECTING, 'Connecting...');
+    WebClient.instance.connect({ host: options.host, port: options.port });
   }
 
   resetPasswordChallenge(options: Omit<WebsocketTypes.PasswordResetChallengeConnectOptions, 'reason'>): void {
-    beginConnect(options, WebsocketTypes.WebSocketConnectReason.PASSWORD_RESET_CHALLENGE);
+    setPendingOptions({ ...options, reason: WebsocketTypes.WebSocketConnectReason.PASSWORD_RESET_CHALLENGE });
+    SessionCommands.updateStatus(WebsocketTypes.StatusEnum.CONNECTING, 'Connecting...');
+    WebClient.instance.connect({ host: options.host, port: options.port });
   }
 
   resetPassword(options: Omit<WebsocketTypes.PasswordResetConnectOptions, 'reason'>): void {
-    beginConnect(options, WebsocketTypes.WebSocketConnectReason.PASSWORD_RESET);
+    setPendingOptions({ ...options, reason: WebsocketTypes.WebSocketConnectReason.PASSWORD_RESET });
+    SessionCommands.updateStatus(WebsocketTypes.StatusEnum.CONNECTING, 'Connecting...');
+    WebClient.instance.connect({ host: options.host, port: options.port });
   }
 
   disconnect(): void {
diff --git a/webclient/src/api/request/ModeratorRequestImpl.ts b/webclient/src/api/request/ModeratorRequestImpl.ts
index d8b7dd40e..97984e397 100644
--- a/webclient/src/api/request/ModeratorRequestImpl.ts
+++ b/webclient/src/api/request/ModeratorRequestImpl.ts
@@ -15,14 +15,6 @@ export class ModeratorRequestImpl implements WebsocketTypes.IModeratorRequest {
     ModeratorCommands.banFromServer(minutes, userName, address, reason, visibleReason, clientid, removeMessages);
   }
 
-  forceActivateUser(usernameToActivate: string, moderatorName: string): void {
-    ModeratorCommands.forceActivateUser(usernameToActivate, moderatorName);
-  }
-
-  getAdminNotes(userName: string): void {
-    ModeratorCommands.getAdminNotes(userName);
-  }
-
   getBanHistory(userName: string): void {
     ModeratorCommands.getBanHistory(userName);
   }
@@ -35,14 +27,6 @@ export class ModeratorRequestImpl implements WebsocketTypes.IModeratorRequest {
     ModeratorCommands.getWarnList(modName, userName, userClientid);
   }
 
-  grantReplayAccess(replayId: number, moderatorName: string): void {
-    ModeratorCommands.grantReplayAccess(replayId, moderatorName);
-  }
-
-  updateAdminNotes(userName: string, notes: string): void {
-    ModeratorCommands.updateAdminNotes(userName, notes);
-  }
-
   viewLogHistory(filters: Data.ViewLogHistoryParams): void {
     ModeratorCommands.viewLogHistory(filters);
   }
diff --git a/webclient/src/api/request/RoomsRequestImpl.ts b/webclient/src/api/request/RoomsRequestImpl.ts
index 27ff2eebb..e7264ca3b 100644
--- a/webclient/src/api/request/RoomsRequestImpl.ts
+++ b/webclient/src/api/request/RoomsRequestImpl.ts
@@ -1,6 +1,5 @@
 import { RoomCommands, SessionCommands } from '@app/websocket';
 import { WebsocketTypes } from '@app/websocket/types';
-import type { App } from '@app/types';
 
 export class RoomsRequestImpl implements WebsocketTypes.IRoomsRequest {
   joinRoom(roomId: number): void {
@@ -14,12 +13,4 @@ export class RoomsRequestImpl implements WebsocketTypes.IRoomsRequest {
   roomSay(roomId: number, message: string): void {
     RoomCommands.roomSay(roomId, message);
   }
-
-  createGame(roomId: number, params: App.CreateGameParams): void {
-    RoomCommands.createGame(roomId, params);
-  }
-
-  joinGame(roomId: number, params: App.JoinGameParams): void {
-    RoomCommands.joinGame(roomId, params);
-  }
 }
diff --git a/webclient/src/api/response/RoomResponseImpl.ts b/webclient/src/api/response/RoomResponseImpl.ts
index 409779b78..38a8ee7d4 100644
--- a/webclient/src/api/response/RoomResponseImpl.ts
+++ b/webclient/src/api/response/RoomResponseImpl.ts
@@ -48,12 +48,4 @@ export class RoomResponseImpl implements WebsocketTypes.IRoomResponse<WebsocketT
   joinedGame(roomId: number, gameId: number): void {
     RoomsDispatch.joinedGame(roomId, gameId);
   }
-
-  setJoinGamePending(pending: boolean): void {
-    RoomsDispatch.setJoinGamePending(pending);
-  }
-
-  setJoinGameError(code: number, message: string): void {
-    RoomsDispatch.setJoinGameError(code, message);
-  }
 }
diff --git a/webclient/src/api/response/SessionResponseImpl.ts b/webclient/src/api/response/SessionResponseImpl.ts
index 272079889..261541ad9 100644
--- a/webclient/src/api/response/SessionResponseImpl.ts
+++ b/webclient/src/api/response/SessionResponseImpl.ts
@@ -30,8 +30,8 @@ export class SessionResponseImpl implements WebsocketTypes.ISessionResponse {
     ServerDispatch.connectionFailed();
   }
 
-  testConnectionSuccessful(supportsHashedPassword: boolean): void {
-    ServerDispatch.testConnectionSuccessful(supportsHashedPassword);
+  testConnectionSuccessful(): void {
+    ServerDispatch.testConnectionSuccessful();
   }
 
   testConnectionFailed(): void {
diff --git a/webclient/src/colors.css b/webclient/src/colors.css
deleted file mode 100644
index 92d1d7748..000000000
--- a/webclient/src/colors.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Shared CSS custom properties. Declared at :root so any stylesheet can
- * reference them via var(--name). Mirrors the constants in
- * src/types/colors.ts — keep both in sync when adding new entries.
- *
- * Loaded once from src/index.tsx alongside the top-level stylesheet.
- */
-
-:root {
-  /* Arrow / modifier colors — paired with App.ArrowColor.* in TS. */
-  --color-arrow-red: #e04b3b;
-  --color-arrow-yellow: #f0c83c;
-  --color-arrow-blue: #89b8e0;
-  --color-arrow-green: #3da26b;
-
-  --color-arrow-red-glow: rgba(224, 75, 59, 0.55);
-  --color-arrow-green-glow: rgba(61, 162, 107, 0.55);
-
-  /* Highlight yellow: active turn indicator, host crown, focus ring,
-     chat author, PhaseBar selection border. Kept as a single shade for
-     visual consistency across the game surface. */
-  --color-highlight-yellow: #f7b01c;
-  --color-highlight-yellow-soft: rgba(247, 176, 28, 0.4);
-  --color-highlight-yellow-soft-alt: rgba(247, 176, 28, 0.55);
-}
diff --git a/webclient/src/common.i18n.json b/webclient/src/common.i18n.json
index ebb272616..64a102c38 100644
--- a/webclient/src/common.i18n.json
+++ b/webclient/src/common.i18n.json
@@ -3,7 +3,6 @@
     "language": "English",
     "disconnect": "Disconnect",
     "label": {
-      "confirmEmail": "Confirm Email",
       "confirmPassword": "Confirm Password",
       "confirmSure": "Are you sure?",
       "country": "Country",
@@ -20,7 +19,6 @@
       "username": "Username"
     },
     "validation": {
-      "emailsMustMatch": "Emails don't match",
       "minChars": "Minimum of {count} {count, plural, one {character} other {characters}} required",
       "passwordsMustMatch": "Passwords don't match",
       "required": "Required"
diff --git a/webclient/src/components/Card/Card.tsx b/webclient/src/components/Card/Card.tsx
index d1e25c8b3..83af90e1f 100644
--- a/webclient/src/components/Card/Card.tsx
+++ b/webclient/src/components/Card/Card.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line
+import React, { useMemo, useState } from 'react';
+
 import { CardDTO } from '@app/services';
 
 import './Card.css';
@@ -7,13 +10,11 @@ interface CardProps {
 }
 
 const Card = ({ card }: CardProps) => {
-  if (!card) {
-    return null;
-  }
+  const src = `https://api.scryfall.com/cards/${card?.identifiers?.scryfallId}?format=image`;
 
-  const src = `https://api.scryfall.com/cards/${card.identifiers?.scryfallId}?format=image`;
-
-  return <img className="card" src={src} alt={card.name} />;
-};
+  return card && (
+    <img className="card" src={src} alt={card?.name} />
+  );
+}
 
 export default Card;
diff --git a/webclient/src/components/CardDetails/CardDetails.tsx b/webclient/src/components/CardDetails/CardDetails.tsx
index 7899c6a8b..2ed241d74 100644
--- a/webclient/src/components/CardDetails/CardDetails.tsx
+++ b/webclient/src/components/CardDetails/CardDetails.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line
+import React, { useMemo, useState } from 'react';
+
 import { CardDTO } from '@app/services';
 
 import Card from '../Card/Card';
@@ -30,7 +33,7 @@ const CardDetails = ({ card }: CardProps) => {
                 (!card.power && !card.toughness) ? null : (
                   <div className='cardDetails-attribute'>
                     <span className='cardDetails-attribute__label'>P/T:</span>
-                    <span className='cardDetails-attribute__value'>{card.power ?? 0}/{card.toughness ?? 0}</span>
+                    <span className='cardDetails-attribute__value'>{card.power || 0}/{card.toughness || 0}</span>
                   </div>
                 )
               }
diff --git a/webclient/src/components/CheckboxField/CheckboxField.tsx b/webclient/src/components/CheckboxField/CheckboxField.tsx
index 388f26d9b..562687489 100644
--- a/webclient/src/components/CheckboxField/CheckboxField.tsx
+++ b/webclient/src/components/CheckboxField/CheckboxField.tsx
@@ -1,28 +1,21 @@
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+import React from 'react';
+import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
-import type { FinalFormFieldProps } from '../fieldTypes';
-
-type CheckboxFieldProps = FinalFormFieldProps<boolean, HTMLInputElement> & {
-  label?: string;
-} & Omit<CheckboxProps, 'checked' | 'onChange' | 'onBlur' | 'onFocus' | 'name' | 'value'>;
-
-const CheckboxField = ({ input, meta: _meta, label, ...args }: CheckboxFieldProps) => {
-  const { value, onChange, onBlur, onFocus, name } = input;
+const CheckboxField = (props) => {
+  const { input: { value, onChange }, label, ...args } = props;
 
+  // @TODO this isnt unchecking properly
   return (
     <FormControlLabel
       className="checkbox-field"
-      label={label ?? ''}
+      label={label}
       control={
         <Checkbox
-          {...args}
+          { ...args }
           className="checkbox-field__box"
-          name={name}
-          checked={Boolean(value)}
-          onChange={onChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
+          checked={!!value}
+          onChange={(e, checked) => onChange(checked)}
           color="primary"
         />
       }
diff --git a/webclient/src/components/CountryDropdown/CountryDropdown.tsx b/webclient/src/components/CountryDropdown/CountryDropdown.tsx
index 7112e35d3..5a7d519bf 100644
--- a/webclient/src/components/CountryDropdown/CountryDropdown.tsx
+++ b/webclient/src/components/CountryDropdown/CountryDropdown.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Select, MenuItem } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
@@ -7,48 +8,49 @@ import { useLocaleSort } from '@app/hooks';
 import { Images } from '@app/images';
 import { App } from '@app/types';
 
-import type { FinalFormFieldProps } from '../fieldTypes';
 
 import './CountryDropdown.css';
 
-type CountryDropdownProps = FinalFormFieldProps<string, HTMLElement>;
-
-const CountryDropdown = ({ input }: CountryDropdownProps) => {
+const CountryDropdown = ({ input: { onChange } }) => {
+  const [value, setValue] = useState('');
   const { t } = useTranslation();
-  const currentValue = (input.value as string | undefined) ?? '';
 
-  const translateCountry = (country: string) => t(`Common.countries.${country}`);
+  useEffect(() => onChange(value), [value]);
+
+  const translateCountry = country => t(`Common.countries.${country}`);
   const sortedCountries = useLocaleSort(App.countryCodes, translateCountry);
 
   return (
-    <FormControl size="small" variant="outlined" className="CountryDropdown">
-      <InputLabel id="CountryDropdown-label">Country</InputLabel>
+    <FormControl size='small' variant='outlined' className='CountryDropdown'>
+      <InputLabel id='CountryDropdown-select'>Country</InputLabel>
       <Select
-        id="CountryDropdown-select"
-        labelId="CountryDropdown-label"
-        label="Country"
-        margin="dense"
-        fullWidth
-        {...input}
-        value={currentValue}
+        id='CountryDropdown-select'
+        labelId='CountryDropdown-label'
+        label='Country'
+        margin='dense'
+        value={value}
+        fullWidth={true}
+        onChange={e => setValue(e.target.value as string)}
       >
-        <MenuItem value="" key="none">
+        <MenuItem value={''} key={-1}>
           <div className="CountryDropdown-item">
             <span className="CountryDropdown-item__label">None</span>
           </div>
         </MenuItem>
 
-        {sortedCountries.map(country => (
-          <MenuItem value={country} key={country}>
-            <div className="CountryDropdown-item">
-              <img className="CountryDropdown-item__image" src={Images.Countries[country.toLowerCase()]} />
-              <span className="CountryDropdown-item__label">{translateCountry(country)}</span>
-            </div>
-          </MenuItem>
-        ))}
+        {
+          sortedCountries.map((country, index:number) => (
+            <MenuItem value={country} key={index}>
+              <div className="CountryDropdown-item">
+                <img className="CountryDropdown-item__image" src={Images.Countries[country.toLowerCase()]} />
+                <span className="CountryDropdown-item__label">{translateCountry(country)}</span>
+              </div>
+            </MenuItem>
+          ))
+        }
       </Select>
     </FormControl>
-  );
+  )
 };
 
 export default CountryDropdown;
diff --git a/webclient/src/components/Game/Battlefield/Battlefield.css b/webclient/src/components/Game/Battlefield/Battlefield.css
deleted file mode 100644
index d0bd68b36..000000000
--- a/webclient/src/components/Game/Battlefield/Battlefield.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.battlefield {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: #0f1c38;
-  border: 1px solid #1a2b52;
-  box-sizing: border-box;
-}
-
-.battlefield__row {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  box-sizing: border-box;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.battlefield__row + .battlefield__row {
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.battlefield__row--drop-over {
-  background: rgba(247, 176, 28, 0.08);
-  box-shadow: inset 0 0 0 2px rgba(247, 176, 28, 0.55);
-}
diff --git a/webclient/src/components/Game/Battlefield/Battlefield.spec.tsx b/webclient/src/components/Game/Battlefield/Battlefield.spec.tsx
deleted file mode 100644
index 56eccd11d..000000000
--- a/webclient/src/components/Game/Battlefield/Battlefield.spec.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import { screen } from '@testing-library/react';
-import { App } from '@app/types';
-
-vi.mock('../../../hooks/useSettings');
-
-import { useSettings } from '../../../hooks/useSettings';
-import { makeSettings, makeSettingsHook } from '../../../hooks/__mocks__/useSettings';
-import { makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import Battlefield from './Battlefield';
-
-function setInvert(invert: boolean) {
-  vi.mocked(useSettings).mockReturnValue(
-    makeSettingsHook({ value: makeSettings({ invertVerticalCoordinate: invert }) }),
-  );
-}
-
-function stateWithBattlefield(cards: ReturnType<typeof makeCard>[]) {
-  const table = makeZoneEntry({
-    name: App.ZoneName.TABLE,
-    type: 1,
-    withCoords: true,
-    cardCount: cards.length,
-    cards,
-  });
-  const player = makePlayerEntry({
-    zones: { [App.ZoneName.TABLE]: table },
-  });
-  const game = makeGameEntry({
-    localPlayerId: 1,
-    players: { 1: player },
-  });
-  return makeStoreState({ games: { games: { 1: game } } });
-}
-
-describe('Battlefield', () => {
-  beforeEach(() => {
-    vi.mocked(useSettings).mockReturnValue(makeSettingsHook());
-  });
-
-  it('renders three rows regardless of card count', () => {
-    renderWithProviders(<Battlefield gameId={1} playerId={1} />, {
-      preloadedState: stateWithBattlefield([]),
-    });
-
-    expect(screen.getByTestId('battlefield-row-0')).toBeInTheDocument();
-    expect(screen.getByTestId('battlefield-row-1')).toBeInTheDocument();
-    expect(screen.getByTestId('battlefield-row-2')).toBeInTheDocument();
-  });
-
-  it('places cards into rows by y coordinate', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'Top', x: 0, y: 0 }),
-      makeCard({ id: 2, name: 'Mid', x: 0, y: 1 }),
-      makeCard({ id: 3, name: 'Bot', x: 0, y: 2 }),
-    ];
-    renderWithProviders(<Battlefield gameId={1} playerId={1} />, {
-      preloadedState: stateWithBattlefield(cards),
-    });
-
-    expect(screen.getByTestId('battlefield-row-0').querySelector('img')?.alt).toBe('Top');
-    expect(screen.getByTestId('battlefield-row-1').querySelector('img')?.alt).toBe('Mid');
-    expect(screen.getByTestId('battlefield-row-2').querySelector('img')?.alt).toBe('Bot');
-  });
-
-  it('clamps out-of-range y values into the three-row space', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'TooHigh', x: 0, y: -5 }),
-      makeCard({ id: 2, name: 'TooLow', x: 0, y: 99 }),
-    ];
-    renderWithProviders(<Battlefield gameId={1} playerId={1} />, {
-      preloadedState: stateWithBattlefield(cards),
-    });
-
-    expect(screen.getByTestId('battlefield-row-0').querySelector('img')?.alt).toBe('TooHigh');
-    expect(screen.getByTestId('battlefield-row-2').querySelector('img')?.alt).toBe('TooLow');
-  });
-
-  it('sorts cards within a row by x coordinate', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'Right', x: 10, y: 0 }),
-      makeCard({ id: 2, name: 'Left', x: 0, y: 0 }),
-    ];
-    renderWithProviders(<Battlefield gameId={1} playerId={1} />, {
-      preloadedState: stateWithBattlefield(cards),
-    });
-
-    const row0 = screen.getByTestId('battlefield-row-0');
-    const imgs = Array.from(row0.querySelectorAll('img'));
-    expect(imgs.map((i) => i.alt)).toEqual(['Left', 'Right']);
-  });
-
-  it('renders rows top-to-bottom as 0,1,2 when not mirrored', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'A', x: 0, y: 0 }),
-      makeCard({ id: 2, name: 'B', x: 0, y: 1 }),
-      makeCard({ id: 3, name: 'C', x: 0, y: 2 }),
-    ];
-    renderWithProviders(<Battlefield gameId={1} playerId={1} />, {
-      preloadedState: stateWithBattlefield(cards),
-    });
-
-    const rowsInOrder = Array.from(
-      screen.getByTestId('battlefield').querySelectorAll('.battlefield__row'),
-    );
-    expect(rowsInOrder.map((r) => r.getAttribute('data-row'))).toEqual(['0', '1', '2']);
-  });
-
-  it('renders rows bottom-to-top as 2,1,0 when mirrored (opponent)', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'A', x: 0, y: 0 }),
-      makeCard({ id: 2, name: 'B', x: 0, y: 1 }),
-      makeCard({ id: 3, name: 'C', x: 0, y: 2 }),
-    ];
-    renderWithProviders(<Battlefield gameId={1} playerId={1} mirrored />, {
-      preloadedState: stateWithBattlefield(cards),
-    });
-
-    const rowsInOrder = Array.from(
-      screen.getByTestId('battlefield').querySelectorAll('.battlefield__row'),
-    );
-    expect(rowsInOrder.map((r) => r.getAttribute('data-row'))).toEqual(['2', '1', '0']);
-  });
-
-  it('passes inverted=true to every CardSlot when mirrored', () => {
-    const cards = [makeCard({ id: 1, name: 'A', x: 0, y: 0 })];
-    const { container } = renderWithProviders(
-      <Battlefield gameId={1} playerId={1} mirrored />,
-      { preloadedState: stateWithBattlefield(cards) },
-    );
-
-    expect(container.querySelector('.card-slot--inverted')).not.toBeNull();
-  });
-
-  describe('invertVerticalCoordinate user setting', () => {
-    it('renders rows bottom-to-top when the setting is on and not mirrored (local player)', () => {
-      setInvert(true);
-      const cards = [
-        makeCard({ id: 1, name: 'A', x: 0, y: 0 }),
-        makeCard({ id: 2, name: 'B', x: 0, y: 1 }),
-        makeCard({ id: 3, name: 'C', x: 0, y: 2 }),
-      ];
-      renderWithProviders(<Battlefield gameId={1} playerId={1} />, {
-        preloadedState: stateWithBattlefield(cards),
-      });
-
-      const rowsInOrder = Array.from(
-        screen.getByTestId('battlefield').querySelectorAll('.battlefield__row'),
-      );
-      expect(rowsInOrder.map((r) => r.getAttribute('data-row'))).toEqual(['2', '1', '0']);
-    });
-
-    it('restores top-to-bottom ordering when setting is on AND mirrored (XOR cancels)', () => {
-      setInvert(true);
-      const cards = [
-        makeCard({ id: 1, name: 'A', x: 0, y: 0 }),
-        makeCard({ id: 2, name: 'B', x: 0, y: 1 }),
-      ];
-      renderWithProviders(<Battlefield gameId={1} playerId={1} mirrored />, {
-        preloadedState: stateWithBattlefield(cards),
-      });
-
-      const rowsInOrder = Array.from(
-        screen.getByTestId('battlefield').querySelectorAll('.battlefield__row'),
-      );
-      expect(rowsInOrder.map((r) => r.getAttribute('data-row'))).toEqual(['0', '1', '2']);
-    });
-
-    it('passes inverted=true to CardSlots when setting is on and not mirrored', () => {
-      setInvert(true);
-      const cards = [makeCard({ id: 1, name: 'A', x: 0, y: 0 })];
-      const { container } = renderWithProviders(
-        <Battlefield gameId={1} playerId={1} />,
-        { preloadedState: stateWithBattlefield(cards) },
-      );
-
-      expect(container.querySelector('.card-slot--inverted')).not.toBeNull();
-    });
-
-    it('passes inverted=false to CardSlots when setting is on AND mirrored (XOR)', () => {
-      setInvert(true);
-      const cards = [makeCard({ id: 1, name: 'A', x: 0, y: 0 })];
-      const { container } = renderWithProviders(
-        <Battlefield gameId={1} playerId={1} mirrored />,
-        { preloadedState: stateWithBattlefield(cards) },
-      );
-
-      expect(container.querySelector('.card-slot--inverted')).toBeNull();
-    });
-  });
-});
diff --git a/webclient/src/components/Game/Battlefield/Battlefield.tsx b/webclient/src/components/Game/Battlefield/Battlefield.tsx
deleted file mode 100644
index 4f2231292..000000000
--- a/webclient/src/components/Game/Battlefield/Battlefield.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { App, Data } from '@app/types';
-
-import CardSlot from '../CardSlot/CardSlot';
-import { makeCardKey } from '../CardRegistry/CardRegistryContext';
-import BattlefieldRow from './BattlefieldRow';
-import { useBattlefield } from './useBattlefield';
-
-import './Battlefield.css';
-
-export interface BattlefieldProps {
-  gameId: number;
-  playerId: number;
-  mirrored?: boolean;
-  canAct?: boolean;
-  arrowSourceKey?: string | null;
-  onCardHover?: (card: Data.ServerInfo_Card) => void;
-  onCardClick?: (playerId: number, zone: string, card: Data.ServerInfo_Card) => void;
-  onCardContextMenu?: (card: Data.ServerInfo_Card, event: React.MouseEvent) => void;
-  onCardDoubleClick?: (card: Data.ServerInfo_Card) => void;
-}
-
-function Battlefield({
-  gameId,
-  playerId,
-  mirrored = false,
-  canAct = false,
-  arrowSourceKey = null,
-  onCardHover,
-  onCardClick,
-  onCardContextMenu,
-  onCardDoubleClick,
-}: BattlefieldProps) {
-  const { rows, rowOrder, isInverted } = useBattlefield({ gameId, playerId, mirrored });
-
-  return (
-    <div className="battlefield" data-testid="battlefield">
-      {rowOrder.map((rowIdx) => (
-        <BattlefieldRow key={rowIdx} playerId={playerId} row={rowIdx}>
-          {rows[rowIdx].map((card) => {
-            const key = makeCardKey(playerId, App.ZoneName.TABLE, card.id);
-            return (
-              <CardSlot
-                key={card.id}
-                card={card}
-                inverted={isInverted}
-                draggable={canAct}
-                ownerPlayerId={playerId}
-                zone={App.ZoneName.TABLE}
-                isArrowSource={arrowSourceKey === key}
-                onMouseEnter={onCardHover}
-                onClick={(c) => onCardClick?.(playerId, App.ZoneName.TABLE, c)}
-                onContextMenu={onCardContextMenu}
-                onDoubleClick={onCardDoubleClick}
-              />
-            );
-          })}
-        </BattlefieldRow>
-      ))}
-    </div>
-  );
-}
-
-export default Battlefield;
diff --git a/webclient/src/components/Game/Battlefield/BattlefieldRow.tsx b/webclient/src/components/Game/Battlefield/BattlefieldRow.tsx
deleted file mode 100644
index eabc67b3e..000000000
--- a/webclient/src/components/Game/Battlefield/BattlefieldRow.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-import { useDroppable } from '@dnd-kit/core';
-import { App } from '@app/types';
-import { cx } from '@app/utils';
-
-export interface BattlefieldRowProps {
-  playerId: number;
-  row: number;
-  children: ReactNode;
-}
-
-function BattlefieldRow({ playerId, row, children }: BattlefieldRowProps) {
-  const { setNodeRef, isOver } = useDroppable({
-    id: `battlefield-${playerId}-${row}`,
-    data: { targetPlayerId: playerId, targetZone: App.ZoneName.TABLE, row },
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cx('battlefield__row', { 'battlefield__row--drop-over': isOver })}
-      data-row={row}
-      data-testid={`battlefield-row-${row}`}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default BattlefieldRow;
diff --git a/webclient/src/components/Game/Battlefield/useBattlefield.ts b/webclient/src/components/Game/Battlefield/useBattlefield.ts
deleted file mode 100644
index c9d63afcf..000000000
--- a/webclient/src/components/Game/Battlefield/useBattlefield.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useMemo } from 'react';
-import { App, Data } from '@app/types';
-import { GameSelectors, useAppSelector } from '@app/store';
-import { useSettings } from '@app/hooks';
-
-export interface Battlefield {
-  rows: Data.ServerInfo_Card[][];
-  rowOrder: number[];
-  isInverted: boolean;
-}
-
-export interface UseBattlefieldArgs {
-  gameId: number;
-  playerId: number;
-  mirrored: boolean;
-}
-
-const ROW_COUNT = 3;
-
-function rowIndexFor(card: Data.ServerInfo_Card): number {
-  const y = card.y ?? 0;
-  return Math.max(0, Math.min(ROW_COUNT - 1, y));
-}
-
-export function useBattlefield({ gameId, playerId, mirrored }: UseBattlefieldArgs): Battlefield {
-  const cards = useAppSelector((state) =>
-    GameSelectors.getCards(state, gameId, playerId, App.ZoneName.TABLE),
-  );
-
-  const { value: settings } = useSettings();
-  const invertVerticalCoordinate = settings?.invertVerticalCoordinate ?? false;
-  // Mirrors desktop TableZone::isInverted() — XOR of per-player mirrored and
-  // the global invertVerticalCoordinate preference.
-  const isInverted = mirrored !== invertVerticalCoordinate;
-
-  const rows = useMemo<Data.ServerInfo_Card[][]>(() => {
-    const bucketed: Data.ServerInfo_Card[][] = Array.from({ length: ROW_COUNT }, () => []);
-    for (const card of cards) {
-      bucketed[rowIndexFor(card)].push(card);
-    }
-    for (const row of bucketed) {
-      row.sort((a, b) => (a.x ?? 0) - (b.x ?? 0));
-    }
-    return bucketed;
-  }, [cards]);
-
-  const rowOrder = isInverted ? [2, 1, 0] : [0, 1, 2];
-
-  return { rows, rowOrder, isInverted };
-}
diff --git a/webclient/src/components/Game/CardContextMenu/CardContextMenu.css b/webclient/src/components/Game/CardContextMenu/CardContextMenu.css
deleted file mode 100644
index b40a5813b..000000000
--- a/webclient/src/components/Game/CardContextMenu/CardContextMenu.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.card-context-menu .MuiPaper-root {
-  min-width: 220px;
-}
diff --git a/webclient/src/components/Game/CardContextMenu/CardContextMenu.spec.tsx b/webclient/src/components/Game/CardContextMenu/CardContextMenu.spec.tsx
deleted file mode 100644
index b50cc5801..000000000
--- a/webclient/src/components/Game/CardContextMenu/CardContextMenu.spec.tsx
+++ /dev/null
@@ -1,396 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App, Data } from '@app/types';
-
-import { createMockWebClient, renderWithProviders } from '../../../__test-utils__';
-import { makeCard } from '../../../store/game/__mocks__/fixtures';
-import CardContextMenu from './CardContextMenu';
-
-const defaultProps = {
-  isOpen: true,
-  anchorPosition: { top: 100, left: 100 },
-  gameId: 1,
-  localPlayerId: 1,
-  ownerPlayerId: 1,
-  sourceZone: App.ZoneName.TABLE,
-  onClose: () => {},
-  onRequestSetPT: () => {},
-  onRequestSetAnnotation: () => {},
-  onRequestSetCounter: () => {},
-  onRequestDrawArrow: () => {},
-  onRequestAttach: () => {},
-  onRequestMoveToLibraryAt: () => {},
-};
-
-describe('CardContextMenu', () => {
-  it('does not render when card is null', () => {
-    const { container } = renderWithProviders(
-      <CardContextMenu {...defaultProps} card={null} />,
-    );
-    expect(container.querySelector('[data-testid="card-context-menu"]')).toBeNull();
-  });
-
-  it('does not render when closed', () => {
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} isOpen={false} card={makeCard()} />,
-    );
-    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-  });
-
-  it('renders all expected menu items', () => {
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ tapped: false, faceDown: false })} />,
-    );
-
-    expect(screen.getByText('Flip')).toBeInTheDocument();
-    expect(screen.getByText('Tap')).toBeInTheDocument();
-    expect(screen.getByText('Face Down')).toBeInTheDocument();
-    expect(screen.getByText('Doesn\'t Untap')).toBeInTheDocument();
-    expect(screen.getByText('Set P/T…')).toBeInTheDocument();
-    expect(screen.getByText('Set Annotation…')).toBeInTheDocument();
-    expect(screen.getByText('Send to Hand')).toBeInTheDocument();
-    expect(screen.getByText('Send to Graveyard')).toBeInTheDocument();
-    expect(screen.getByText('Send to Exile')).toBeInTheDocument();
-    expect(screen.getByText('Send to Library (top)')).toBeInTheDocument();
-    expect(screen.getByText('Send to Library (bottom)')).toBeInTheDocument();
-  });
-
-  it('flips the card via flipCard and closes the menu', () => {
-    const webClient = createMockWebClient();
-    const onClose = vi.fn();
-    const card = makeCard({ id: 10, faceDown: false });
-
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={card} onClose={onClose} />,
-      { webClient },
-    );
-
-    fireEvent.click(screen.getByText('Flip'));
-
-    expect(webClient.request.game.flipCard).toHaveBeenCalledWith(1, {
-      zone: App.ZoneName.TABLE,
-      cardId: 10,
-      faceDown: true,
-    });
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('toggles tap via setCardAttr (untapped → tapped)', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 5, tapped: false })} />,
-      { webClient },
-    );
-
-    fireEvent.click(screen.getByText('Tap'));
-
-    expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-      zone: App.ZoneName.TABLE,
-      cardId: 5,
-      attribute: Data.CardAttribute.AttrTapped,
-      attrValue: '1',
-    });
-  });
-
-  it('shows Untap label and sends "0" when the card is already tapped', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 5, tapped: true })} />,
-      { webClient },
-    );
-
-    expect(screen.getByText('Untap')).toBeInTheDocument();
-    fireEvent.click(screen.getByText('Untap'));
-
-    expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-      zone: App.ZoneName.TABLE,
-      cardId: 5,
-      attribute: Data.CardAttribute.AttrTapped,
-      attrValue: '0',
-    });
-  });
-
-  it('toggles Face Down and shows Face Up when already face-down', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 5, faceDown: true })} />,
-      { webClient },
-    );
-
-    expect(screen.getByText('Face Up')).toBeInTheDocument();
-    fireEvent.click(screen.getByText('Face Up'));
-
-    expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-      zone: App.ZoneName.TABLE,
-      cardId: 5,
-      attribute: Data.CardAttribute.AttrFaceDown,
-      attrValue: '0',
-    });
-  });
-
-  it('toggles Doesn\'t Untap and shows Allow Untap when already set', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 5, doesntUntap: true })} />,
-      { webClient },
-    );
-
-    expect(screen.getByText('Allow Untap')).toBeInTheDocument();
-    fireEvent.click(screen.getByText('Allow Untap'));
-
-    expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-      zone: App.ZoneName.TABLE,
-      cardId: 5,
-      attribute: Data.CardAttribute.AttrDoesntUntap,
-      attrValue: '0',
-    });
-  });
-
-  it('requests the PT prompt via parent callback', () => {
-    const onRequestSetPT = vi.fn();
-    const onClose = vi.fn();
-    renderWithProviders(
-      <CardContextMenu
-        {...defaultProps}
-        card={makeCard()}
-        onRequestSetPT={onRequestSetPT}
-        onClose={onClose}
-      />,
-    );
-
-    fireEvent.click(screen.getByText('Set P/T…'));
-
-    expect(onRequestSetPT).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('requests the Annotation prompt via parent callback', () => {
-    const onRequestSetAnnotation = vi.fn();
-    renderWithProviders(
-      <CardContextMenu
-        {...defaultProps}
-        card={makeCard()}
-        onRequestSetAnnotation={onRequestSetAnnotation}
-      />,
-    );
-
-    fireEvent.click(screen.getByText('Set Annotation…'));
-
-    expect(onRequestSetAnnotation).toHaveBeenCalled();
-  });
-
-  it('moves to hand via moveCard with x=-1 (append)', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 7 })} />,
-      { webClient },
-    );
-
-    fireEvent.click(screen.getByText('Send to Hand'));
-
-    expect(webClient.request.game.moveCard).toHaveBeenCalledWith(1, {
-      startPlayerId: 1,
-      startZone: App.ZoneName.TABLE,
-      cardsToMove: { card: [{ cardId: 7 }] },
-      targetPlayerId: 1,
-      targetZone: App.ZoneName.HAND,
-      x: -1,
-      y: 0,
-      isReversed: false,
-    });
-  });
-
-  it('hides mutator items (tap, flip, move, counters, P/T) for opponent-owned cards (desktop parity)', () => {
-    renderWithProviders(
-      <CardContextMenu
-        {...defaultProps}
-        localPlayerId={1}
-        ownerPlayerId={2}
-        card={makeCard({ id: 7 })}
-      />,
-    );
-
-    // Mutators gone:
-    expect(screen.queryByText('Flip')).not.toBeInTheDocument();
-    expect(screen.queryByText('Tap')).not.toBeInTheDocument();
-    expect(screen.queryByText('Set P/T…')).not.toBeInTheDocument();
-    expect(screen.queryByText('Set counter…')).not.toBeInTheDocument();
-    expect(screen.queryByText('Send to Hand')).not.toBeInTheDocument();
-    expect(screen.queryByText('Attach to card…')).not.toBeInTheDocument();
-
-    // Read-only stays:
-    expect(screen.getByText('Draw arrow from here')).toBeInTheDocument();
-  });
-
-  it('routes moves through the acting (local) player when invoked on an owned card', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu
-        {...defaultProps}
-        localPlayerId={1}
-        ownerPlayerId={1}
-        card={makeCard({ id: 7 })}
-      />,
-      { webClient },
-    );
-
-    fireEvent.click(screen.getByText('Send to Hand'));
-
-    expect(webClient.request.game.moveCard).toHaveBeenCalledWith(1, expect.objectContaining({
-      startPlayerId: 1,
-      targetPlayerId: 1,
-    }));
-  });
-
-  it('moves to library top vs bottom with distinct x values', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 7 })} />,
-      { webClient },
-    );
-
-    fireEvent.click(screen.getByText('Send to Library (top)'));
-    expect(webClient.request.game.moveCard).toHaveBeenLastCalledWith(1, expect.objectContaining({
-      targetZone: App.ZoneName.DECK,
-      x: 0,
-    }));
-
-    fireEvent.click(screen.getByText('Send to Library (bottom)'));
-    expect(webClient.request.game.moveCard).toHaveBeenLastCalledWith(1, expect.objectContaining({
-      targetZone: App.ZoneName.DECK,
-      x: -1,
-    }));
-  });
-
-  it('adds a counter via incCardCounter (+1 on id 0)', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 9 })} />,
-      { webClient },
-    );
-
-    fireEvent.click(screen.getByText('Add counter'));
-
-    expect(webClient.request.game.incCardCounter).toHaveBeenCalledWith(1, {
-      zone: App.ZoneName.TABLE,
-      cardId: 9,
-      counterId: 0,
-      counterDelta: 1,
-    });
-  });
-
-  it('removes a counter via incCardCounter (-1 on id 0)', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <CardContextMenu {...defaultProps} card={makeCard({ id: 9 })} />,
-      { webClient },
-    );
-
-    fireEvent.click(screen.getByText('Remove counter'));
-
-    expect(webClient.request.game.incCardCounter).toHaveBeenCalledWith(1, {
-      zone: App.ZoneName.TABLE,
-      cardId: 9,
-      counterId: 0,
-      counterDelta: -1,
-    });
-  });
-
-  it('defers "Set counter…" to the parent callback', () => {
-    const onRequestSetCounter = vi.fn();
-    renderWithProviders(
-      <CardContextMenu
-        {...defaultProps}
-        card={makeCard()}
-        onRequestSetCounter={onRequestSetCounter}
-      />,
-    );
-
-    fireEvent.click(screen.getByText('Set counter…'));
-
-    expect(onRequestSetCounter).toHaveBeenCalled();
-  });
-
-  it('defers "Draw arrow from here" to the parent callback', () => {
-    const onRequestDrawArrow = vi.fn();
-    renderWithProviders(
-      <CardContextMenu
-        {...defaultProps}
-        card={makeCard()}
-        onRequestDrawArrow={onRequestDrawArrow}
-      />,
-    );
-
-    fireEvent.click(screen.getByText('Draw arrow from here'));
-
-    expect(onRequestDrawArrow).toHaveBeenCalled();
-  });
-
-  describe('Attach / Unattach', () => {
-    it('defers "Attach to card…" to the parent callback', () => {
-      const onRequestAttach = vi.fn();
-      const onClose = vi.fn();
-      renderWithProviders(
-        <CardContextMenu
-          {...defaultProps}
-          card={makeCard()}
-          onRequestAttach={onRequestAttach}
-          onClose={onClose}
-        />,
-      );
-
-      fireEvent.click(screen.getByText('Attach to card…'));
-
-      expect(onRequestAttach).toHaveBeenCalled();
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    it('does not show "Unattach" when the card is not attached (attachCardId = -1)', () => {
-      renderWithProviders(
-        <CardContextMenu
-          {...defaultProps}
-          card={makeCard({ attachCardId: -1 })}
-        />,
-      );
-
-      expect(screen.queryByText('Unattach')).not.toBeInTheDocument();
-    });
-
-    it('shows "Unattach" and dispatches attachCard with only startZone+cardId (desktop parity)', () => {
-      const webClient = createMockWebClient();
-      const onClose = vi.fn();
-      renderWithProviders(
-        <CardContextMenu
-          {...defaultProps}
-          card={makeCard({ id: 11, attachCardId: 99 })}
-          onClose={onClose}
-        />,
-        { webClient },
-      );
-
-      fireEvent.click(screen.getByText('Unattach'));
-
-      // Target fields are intentionally absent. The server uses proto2
-      // presence (`has_target_player_id()`) to detect "detach"; passing
-      // targetPlayerId: -1 would leave presence set and the server would
-      // treat the message as an attach with a missing player.
-      expect(webClient.request.game.attachCard).toHaveBeenCalledWith(1, {
-        startZone: App.ZoneName.TABLE,
-        cardId: 11,
-      });
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    it('hides Attach / Unattach when the source card is not on the table', () => {
-      renderWithProviders(
-        <CardContextMenu
-          {...defaultProps}
-          sourceZone={App.ZoneName.HAND}
-          card={makeCard({ attachCardId: 99 })}
-        />,
-      );
-
-      expect(screen.queryByText('Attach to card…')).not.toBeInTheDocument();
-      expect(screen.queryByText('Unattach')).not.toBeInTheDocument();
-    });
-  });
-});
diff --git a/webclient/src/components/Game/CardContextMenu/CardContextMenu.tsx b/webclient/src/components/Game/CardContextMenu/CardContextMenu.tsx
deleted file mode 100644
index c49db0382..000000000
--- a/webclient/src/components/Game/CardContextMenu/CardContextMenu.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Divider from '@mui/material/Divider';
-
-import { Data } from '@app/types';
-
-import { useCardContextMenu } from './useCardContextMenu';
-
-import './CardContextMenu.css';
-
-export interface CardContextMenuProps {
-  isOpen: boolean;
-  anchorPosition: { top: number; left: number } | null;
-  gameId: number;
-  localPlayerId: number | null;
-  card: Data.ServerInfo_Card | null;
-  ownerPlayerId: number | null;
-  sourceZone: string | null;
-  onClose: () => void;
-  onRequestSetPT: () => void;
-  onRequestSetAnnotation: () => void;
-  onRequestSetCounter: () => void;
-  onRequestDrawArrow: () => void;
-  onRequestAttach: () => void;
-  onRequestMoveToLibraryAt: () => void;
-}
-
-function CardContextMenu(props: CardContextMenuProps) {
-  const { isOpen, anchorPosition, card, onClose } = props;
-  const {
-    ready,
-    isOwnedByLocal,
-    canAttach,
-    isAttached,
-    moveTargets,
-    handleFlip,
-    handleTapToggle,
-    handleFaceDownToggle,
-    handleDoesntUntapToggle,
-    handleSetPT,
-    handleSetAnnotation,
-    handleCardCounterDelta,
-    handleSetCardCounter,
-    handleDrawArrow,
-    handleAttach,
-    handleUnattach,
-    handleMove,
-    handleMoveToLibraryAt,
-  } = useCardContextMenu(props);
-
-  if (!ready || !card) {
-    return null;
-  }
-
-  return (
-    <Menu
-      open={isOpen}
-      onClose={onClose}
-      anchorReference="anchorPosition"
-      anchorPosition={anchorPosition ?? undefined}
-      data-testid="card-context-menu"
-      className="card-context-menu"
-    >
-      {isOwnedByLocal && (
-        <>
-          <MenuItem onClick={handleFlip}>Flip</MenuItem>
-          <MenuItem onClick={handleTapToggle}>{card.tapped ? 'Untap' : 'Tap'}</MenuItem>
-          <MenuItem onClick={handleFaceDownToggle}>
-            {card.faceDown ? 'Face Up' : 'Face Down'}
-          </MenuItem>
-          <MenuItem onClick={handleDoesntUntapToggle}>
-            {card.doesntUntap ? 'Allow Untap' : 'Doesn\'t Untap'}
-          </MenuItem>
-          <MenuItem onClick={handleSetPT}>Set P/T…</MenuItem>
-          <MenuItem onClick={handleSetAnnotation}>Set Annotation…</MenuItem>
-          <Divider />
-          <MenuItem onClick={() => handleCardCounterDelta(+1)}>Add counter</MenuItem>
-          <MenuItem onClick={() => handleCardCounterDelta(-1)}>Remove counter</MenuItem>
-          <MenuItem onClick={handleSetCardCounter}>Set counter…</MenuItem>
-          <Divider />
-        </>
-      )}
-      <MenuItem onClick={handleDrawArrow}>Draw arrow from here</MenuItem>
-      {isOwnedByLocal && canAttach && (
-        <MenuItem onClick={handleAttach}>Attach to card…</MenuItem>
-      )}
-      {isOwnedByLocal && canAttach && isAttached && (
-        <MenuItem onClick={handleUnattach}>Unattach</MenuItem>
-      )}
-      {isOwnedByLocal && (
-        <>
-          <Divider />
-          {moveTargets.map((t) => (
-            <MenuItem key={t.label} onClick={() => handleMove(t)}>
-              {t.label}
-            </MenuItem>
-          ))}
-          <MenuItem onClick={handleMoveToLibraryAt}>
-            Move to library at position…
-          </MenuItem>
-        </>
-      )}
-    </Menu>
-  );
-}
-
-export default CardContextMenu;
diff --git a/webclient/src/components/Game/CardContextMenu/useCardContextMenu.ts b/webclient/src/components/Game/CardContextMenu/useCardContextMenu.ts
deleted file mode 100644
index f31c2c288..000000000
--- a/webclient/src/components/Game/CardContextMenu/useCardContextMenu.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import { useWebClient } from '@app/hooks';
-import { App, Data } from '@app/types';
-
-interface MoveTarget {
-  label: string;
-  zone: string;
-  x: number;
-  y: number;
-}
-
-// Mirrors desktop's cockatrice/src/game/player/menu/move_menu.cpp:32-42 —
-// six fixed targets plus one prompt ("Move to library at position…") for the
-// 7-entry parity. Note that desktop's "Send to Table" label maps to our
-// "Send to Battlefield" (same wire semantics: zone=table, x=0, y=0); the
-// label diverges but the command is identical.
-export const CARD_MOVE_TARGETS: ReadonlyArray<MoveTarget> = [
-  { label: 'Send to Hand', zone: App.ZoneName.HAND, x: -1, y: 0 },
-  { label: 'Send to Battlefield', zone: App.ZoneName.TABLE, x: 0, y: 0 },
-  { label: 'Send to Graveyard', zone: App.ZoneName.GRAVE, x: 0, y: 0 },
-  { label: 'Send to Exile', zone: App.ZoneName.EXILE, x: 0, y: 0 },
-  { label: 'Send to Library (top)', zone: App.ZoneName.DECK, x: 0, y: 0 },
-  { label: 'Send to Library (bottom)', zone: App.ZoneName.DECK, x: -1, y: 0 },
-];
-
-export interface CardContextMenu {
-  ready: boolean;
-  isOwnedByLocal: boolean;
-  canAttach: boolean;
-  isAttached: boolean;
-  moveTargets: ReadonlyArray<MoveTarget>;
-  handleFlip: () => void;
-  handleTapToggle: () => void;
-  handleFaceDownToggle: () => void;
-  handleDoesntUntapToggle: () => void;
-  handleSetPT: () => void;
-  handleSetAnnotation: () => void;
-  handleCardCounterDelta: (delta: number) => void;
-  handleSetCardCounter: () => void;
-  handleDrawArrow: () => void;
-  handleAttach: () => void;
-  handleUnattach: () => void;
-  handleMove: (target: MoveTarget) => void;
-  handleMoveToLibraryAt: () => void;
-}
-
-export interface UseCardContextMenuArgs {
-  gameId: number;
-  localPlayerId: number | null;
-  card: Data.ServerInfo_Card | null;
-  ownerPlayerId: number | null;
-  sourceZone: string | null;
-  onClose: () => void;
-  onRequestSetPT: () => void;
-  onRequestSetAnnotation: () => void;
-  onRequestSetCounter: () => void;
-  onRequestDrawArrow: () => void;
-  onRequestAttach: () => void;
-  onRequestMoveToLibraryAt: () => void;
-}
-
-export function useCardContextMenu({
-  gameId,
-  localPlayerId,
-  card,
-  ownerPlayerId,
-  sourceZone,
-  onClose,
-  onRequestSetPT,
-  onRequestSetAnnotation,
-  onRequestSetCounter,
-  onRequestDrawArrow,
-  onRequestAttach,
-  onRequestMoveToLibraryAt,
-}: UseCardContextMenuArgs): CardContextMenu {
-  const webClient = useWebClient();
-
-  const ready = card != null && ownerPlayerId != null && sourceZone != null && localPlayerId != null;
-
-  // Mutating actions (tap, flip, counters, attrs, P/T, annotation, attach,
-  // move) require ownership of the card — matches desktop's
-  // `card_menu.cpp:151-161` which drops all mutators when the menu target
-  // isn't getLocalOrJudge()-modifiable. Read-only actions (Draw arrow)
-  // stay available for planning/communication.
-  const isOwnedByLocal = ready && ownerPlayerId === localPlayerId;
-  const isAttached = ready && (card!.attachCardId ?? -1) >= 0;
-  // Desktop's actAttach is only available from a table card; other zones
-  // never expose the attach arrow.
-  const canAttach = ready && sourceZone === App.ZoneName.TABLE;
-
-  const setAttr = (attribute: Data.CardAttribute, value: string) => {
-    if (!ready) {
-      return;
-    }
-    webClient.request.game.setCardAttr(gameId, {
-      zone: sourceZone!,
-      cardId: card!.id,
-      attribute,
-      attrValue: value,
-    });
-  };
-
-  const handleFlip = () => {
-    if (!ready) {
-      return;
-    }
-    // TODO(card-db): desktop's Player::actCardMenuFlip reads the card's stored
-    // P/T and forwards it so the revealed side shows the correct stats
-    // (cockatrice/src/game/player/player_actions.cpp:1805-1810). We can't
-    // do that without a card-database-by-name lookup, which isn't wired in
-    // the webclient yet. The server re-derives PT from the card DB for known
-    // names, so omitting `pt` is harmless for non-custom cards.
-    webClient.request.game.flipCard(gameId, {
-      zone: sourceZone!,
-      cardId: card!.id,
-      faceDown: !card!.faceDown,
-    });
-    onClose();
-  };
-
-  const handleTapToggle = () => {
-    if (!ready) {
-      return;
-    }
-    setAttr(Data.CardAttribute.AttrTapped, card!.tapped ? '0' : '1');
-    onClose();
-  };
-
-  const handleFaceDownToggle = () => {
-    if (!ready) {
-      return;
-    }
-    setAttr(Data.CardAttribute.AttrFaceDown, card!.faceDown ? '0' : '1');
-    onClose();
-  };
-
-  const handleDoesntUntapToggle = () => {
-    if (!ready) {
-      return;
-    }
-    setAttr(Data.CardAttribute.AttrDoesntUntap, card!.doesntUntap ? '0' : '1');
-    onClose();
-  };
-
-  const handleSetPT = () => {
-    onRequestSetPT();
-    onClose();
-  };
-
-  const handleSetAnnotation = () => {
-    onRequestSetAnnotation();
-    onClose();
-  };
-
-  const handleCardCounterDelta = (delta: number) => {
-    if (!ready) {
-      return;
-    }
-    webClient.request.game.incCardCounter(gameId, {
-      zone: sourceZone!,
-      cardId: card!.id,
-      counterId: 0,
-      counterDelta: delta,
-    });
-    onClose();
-  };
-
-  const handleSetCardCounter = () => {
-    onRequestSetCounter();
-    onClose();
-  };
-
-  const handleDrawArrow = () => {
-    onRequestDrawArrow();
-    onClose();
-  };
-
-  const handleAttach = () => {
-    onRequestAttach();
-    onClose();
-  };
-
-  const handleUnattach = () => {
-    if (!ready) {
-      return;
-    }
-    // Desktop's actUnattach sends only start_zone + card_id; the server uses
-    // proto2 presence (`has_target_player_id()`) to detect "detach". Setting
-    // targetPlayerId: -1 here would leave presence set and trip the attach
-    // code path server-side. MessageInitShape makes these fields optional,
-    // so omitting them produces an unset wire field.
-    webClient.request.game.attachCard(gameId, { startZone: sourceZone!, cardId: card!.id });
-    onClose();
-  };
-
-  const handleMove = (target: MoveTarget) => {
-    if (!ready) {
-      return;
-    }
-    // targetPlayerId is the ACTING player (local), matching desktop's
-    // Player::actMoveCardTo* which uses playerInfo->getId().
-    webClient.request.game.moveCard(gameId, {
-      startPlayerId: ownerPlayerId!,
-      startZone: sourceZone!,
-      cardsToMove: { card: [{ cardId: card!.id }] },
-      targetPlayerId: localPlayerId!,
-      targetZone: target.zone,
-      x: target.x,
-      y: target.y,
-      isReversed: false,
-    });
-    onClose();
-  };
-
-  const handleMoveToLibraryAt = () => {
-    onRequestMoveToLibraryAt();
-    onClose();
-  };
-
-  return {
-    ready,
-    isOwnedByLocal,
-    canAttach,
-    isAttached,
-    moveTargets: CARD_MOVE_TARGETS,
-    handleFlip,
-    handleTapToggle,
-    handleFaceDownToggle,
-    handleDoesntUntapToggle,
-    handleSetPT,
-    handleSetAnnotation,
-    handleCardCounterDelta,
-    handleSetCardCounter,
-    handleDrawArrow,
-    handleAttach,
-    handleUnattach,
-    handleMove,
-    handleMoveToLibraryAt,
-  };
-}
diff --git a/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.css b/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.css
deleted file mode 100644
index fab536600..000000000
--- a/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.card-drag-overlay {
-  width: 146px;
-  height: 204px;
-  border-radius: 6px;
-  overflow: hidden;
-  opacity: 0.85;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
-  pointer-events: none;
-}
-
-.card-drag-overlay__image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.card-drag-overlay__back {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #2a1f3d 0%, #1a1028 60%, #0d0617 100%);
-  border: 1px solid #3a2d50;
-  box-sizing: border-box;
-}
diff --git a/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.spec.tsx b/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.spec.tsx
deleted file mode 100644
index c76481887..000000000
--- a/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import { makeCard } from '../../../store/game/__mocks__/fixtures';
-import CardDragOverlay from './CardDragOverlay';
-
-describe('CardDragOverlay', () => {
-  it('renders the Scryfall image for a face-up card', () => {
-    render(<CardDragOverlay card={makeCard({ name: 'Lightning Bolt' })} />);
-
-    const img = screen.getByAltText('Lightning Bolt') as HTMLImageElement;
-    expect(img.src).toContain('Lightning%20Bolt');
-    expect(img.src).toContain('version=small');
-  });
-
-  it('renders the face-down placeholder for hidden cards', () => {
-    render(<CardDragOverlay card={makeCard({ faceDown: true })} />);
-
-    expect(screen.getByLabelText('face-down card')).toBeInTheDocument();
-  });
-});
diff --git a/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.tsx b/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.tsx
deleted file mode 100644
index 590c3e4a8..000000000
--- a/webclient/src/components/Game/CardDragOverlay/CardDragOverlay.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useScryfallCard } from '@app/hooks';
-import type { Data } from '@app/types';
-
-import './CardDragOverlay.css';
-
-export interface CardDragOverlayProps {
-  card: Data.ServerInfo_Card;
-}
-
-function CardDragOverlay({ card }: CardDragOverlayProps) {
-  const { smallUrl } = useScryfallCard(card);
-
-  return (
-    <div className="card-drag-overlay" data-testid="card-drag-overlay">
-      {card.faceDown || !smallUrl ? (
-        <div className="card-drag-overlay__back" aria-label="face-down card" />
-      ) : (
-        <img className="card-drag-overlay__image" src={smallUrl} alt={card.name} />
-      )}
-    </div>
-  );
-}
-
-export default CardDragOverlay;
diff --git a/webclient/src/components/Game/CardPreview/CardPreview.css b/webclient/src/components/Game/CardPreview/CardPreview.css
deleted file mode 100644
index 308d2ce8f..000000000
--- a/webclient/src/components/Game/CardPreview/CardPreview.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.card-preview {
-  height: 340px;
-  padding: 12px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0a1225;
-  border-bottom: 1px solid #1a2b52;
-}
-
-.card-preview__empty {
-  color: #5a6a8a;
-  font-size: 12px;
-  font-style: italic;
-  text-align: center;
-}
-
-.card-preview__frame {
-  position: relative;
-  width: 100%;
-  max-width: 280px;
-  aspect-ratio: 488 / 680;
-  border-radius: 10px;
-  overflow: hidden;
-  background: #0d1930;
-}
-
-.card-preview__image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.card-preview__image--normal {
-  opacity: 0;
-  transition: opacity 180ms ease-out;
-}
-
-.card-preview__image--normal.card-preview__image--loaded {
-  opacity: 1;
-}
diff --git a/webclient/src/components/Game/CardPreview/CardPreview.spec.tsx b/webclient/src/components/Game/CardPreview/CardPreview.spec.tsx
deleted file mode 100644
index 05f2c3beb..000000000
--- a/webclient/src/components/Game/CardPreview/CardPreview.spec.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { makeCard } from '../../../store/game/__mocks__/fixtures';
-import CardPreview from './CardPreview';
-
-describe('CardPreview', () => {
-  it('shows an empty hint when no card is hovered', () => {
-    render(<CardPreview card={null} />);
-    expect(screen.getByText(/hover a card/i)).toBeInTheDocument();
-  });
-
-  it('renders the small image immediately on hover', () => {
-    const card = makeCard({ name: 'Lightning Bolt' });
-    render(<CardPreview card={card} />);
-
-    const small = document.querySelector('.card-preview__image--small') as HTMLImageElement;
-    expect(small).not.toBeNull();
-    expect(small.src).toContain('version=small');
-    expect(small.src).toContain('Lightning%20Bolt');
-  });
-
-  it('renders a normal image that stays transparent until it loads', () => {
-    const card = makeCard({ name: 'Lightning Bolt' });
-    render(<CardPreview card={card} />);
-
-    const normal = screen.getByTestId('card-preview-normal') as HTMLImageElement;
-    expect(normal.src).toContain('version=normal');
-    expect(normal).not.toHaveClass('card-preview__image--loaded');
-  });
-
-  it('reveals the normal image once onLoad fires', () => {
-    const card = makeCard({ name: 'Lightning Bolt' });
-    render(<CardPreview card={card} />);
-
-    const normal = screen.getByTestId('card-preview-normal');
-    fireEvent.load(normal);
-    expect(normal).toHaveClass('card-preview__image--loaded');
-  });
-
-  it('resets the loaded flag when the card changes', () => {
-    const a = makeCard({ id: 1, name: 'A' });
-    const b = makeCard({ id: 2, name: 'B' });
-    const { rerender } = render(<CardPreview card={a} />);
-
-    fireEvent.load(screen.getByTestId('card-preview-normal'));
-    expect(screen.getByTestId('card-preview-normal')).toHaveClass(
-      'card-preview__image--loaded',
-    );
-
-    rerender(<CardPreview card={b} />);
-    expect(screen.getByTestId('card-preview-normal')).not.toHaveClass(
-      'card-preview__image--loaded',
-    );
-  });
-});
diff --git a/webclient/src/components/Game/CardPreview/CardPreview.tsx b/webclient/src/components/Game/CardPreview/CardPreview.tsx
deleted file mode 100644
index 3a4da2ccb..000000000
--- a/webclient/src/components/Game/CardPreview/CardPreview.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { Data } from '@app/types';
-import { useScryfallCard } from '@app/hooks';
-
-import './CardPreview.css';
-
-export interface CardPreviewProps {
-  card: Data.ServerInfo_Card | null | undefined;
-}
-
-function CardPreview({ card }: CardPreviewProps) {
-  const { smallUrl, normalUrl, ready } = useScryfallCard(card ?? null);
-  const [normalLoaded, setNormalLoaded] = useState(false);
-
-  useEffect(() => {
-    setNormalLoaded(false);
-  }, [normalUrl]);
-
-  return (
-    <div className="card-preview" data-testid="card-preview">
-      {!ready && (
-        <div className="card-preview__empty">Hover a card to preview</div>
-      )}
-      {ready && smallUrl && (
-        <div className="card-preview__frame">
-          <img
-            className="card-preview__image card-preview__image--small"
-            src={smallUrl}
-            alt={card?.name ?? ''}
-          />
-          {normalUrl && (
-            <img
-              className={
-                'card-preview__image card-preview__image--normal' +
-                (normalLoaded ? ' card-preview__image--loaded' : '')
-              }
-              src={normalUrl}
-              alt={card?.name ?? ''}
-              onLoad={() => setNormalLoaded(true)}
-              data-testid="card-preview-normal"
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default CardPreview;
diff --git a/webclient/src/components/Game/CardRegistry/CardRegistryContext.ts b/webclient/src/components/Game/CardRegistry/CardRegistryContext.ts
deleted file mode 100644
index 24c4f4039..000000000
--- a/webclient/src/components/Game/CardRegistry/CardRegistryContext.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { createContext, useCallback, useContext } from 'react';
-
-export type CardKey = string;
-
-export function makeCardKey(playerId: number, zone: string, cardId: number): CardKey {
-  return `${playerId}-${zone}-${cardId}`;
-}
-
-export interface CardRegistry {
-  register(key: CardKey, el: HTMLElement): void;
-  unregister(key: CardKey): void;
-  get(key: CardKey): HTMLElement | undefined;
-  subscribe(listener: () => void): () => void;
-}
-
-export const CardRegistryContext = createContext<CardRegistry | null>(null);
-
-export function useCardRegistry(): CardRegistry | null {
-  return useContext(CardRegistryContext);
-}
-
-export function useRegisterCardRef(key: CardKey | null) {
-  const registry = useCardRegistry();
-  return useCallback(
-    (el: HTMLElement | null) => {
-      if (!registry || key == null) {
-        return;
-      }
-      if (el) {
-        registry.register(key, el);
-      } else {
-        registry.unregister(key);
-      }
-    },
-    [registry, key],
-  );
-}
-
-export function createCardRegistry(): CardRegistry {
-  const map = new Map<CardKey, HTMLElement>();
-  const listeners = new Set<() => void>();
-  const notify = () => {
-    listeners.forEach((l) => l());
-  };
-  return {
-    register(key, el) {
-      map.set(key, el);
-      notify();
-    },
-    unregister(key) {
-      map.delete(key);
-      notify();
-    },
-    get(key) {
-      return map.get(key);
-    },
-    subscribe(l) {
-      listeners.add(l);
-      return () => {
-        listeners.delete(l);
-      };
-    },
-  };
-}
diff --git a/webclient/src/components/Game/CardSlot/CardSlot.css b/webclient/src/components/Game/CardSlot/CardSlot.css
deleted file mode 100644
index 4a52b1f52..000000000
--- a/webclient/src/components/Game/CardSlot/CardSlot.css
+++ /dev/null
@@ -1,153 +0,0 @@
-.card-slot {
-  position: relative;
-  width: 146px;
-  height: 204px;
-  border-radius: 6px;
-  overflow: hidden;
-  user-select: none;
-  cursor: pointer;
-  transition: transform 120ms ease-out;
-}
-
-.card-slot__image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-/*
- * Card-back art: layered radial + diamond SVG pattern.
- * Best-effort stand-in until an MTG-style asset ships under src/images/
- * (tracked in gameboard-deferrables.md M1).
- *
- * Layers (painted bottom-up via background: comma stack):
- *   1. Outer radial gradient — deep purple core fading to black edges
- *   2. SVG diamond-lattice pattern — embossed geometry
- *   3. Inner vignette — subtle darkening at the border
- */
-.card-slot__back {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border: 1px solid #3a2d50;
-  border-radius: inherit;
-  position: relative;
-  background:
-    radial-gradient(circle at 50% 45%,
-      rgba(120, 90, 180, 0.15) 0%,
-      rgba(30, 18, 48, 0.1) 40%,
-      rgba(0, 0, 0, 0.55) 100%),
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M20 0 L40 20 L20 40 L0 20 Z' fill='none' stroke='%236a4e9c' stroke-width='0.8' stroke-opacity='0.45'/><circle cx='20' cy='20' r='3' fill='%23826fb8' fill-opacity='0.25'/></svg>"),
-    linear-gradient(135deg, #2a1f3d 0%, #1a1028 55%, #0d0617 100%);
-  background-size: 100% 100%, 40px 40px, 100% 100%;
-  background-position: center center, center center, 0 0;
-}
-
-.card-slot__back::before {
-  content: '';
-  position: absolute;
-  inset: 4px;
-  border: 1px solid rgba(138, 118, 196, 0.35);
-  border-radius: 4px;
-  pointer-events: none;
-}
-
-.card-slot__back::after {
-  content: 'MTG';
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #a190d6;
-  font-weight: 700;
-  letter-spacing: 6px;
-  font-size: 20px;
-  text-shadow: 0 0 8px rgba(162, 144, 214, 0.6);
-  opacity: 0.7;
-  pointer-events: none;
-}
-
-.card-slot--tapped {
-  transform: rotate(90deg);
-}
-
-.card-slot--inverted {
-  transform: rotate(180deg);
-}
-
-.card-slot--tapped.card-slot--inverted {
-  transform: rotate(270deg);
-}
-
-.card-slot--attacking {
-  outline: 2px solid var(--color-arrow-red);
-  outline-offset: -2px;
-}
-
-.card-slot--dragging {
-  opacity: 0.35;
-}
-
-.card-slot--arrow-source {
-  box-shadow: 0 0 0 3px var(--color-arrow-red), 0 0 16px var(--color-arrow-red-glow);
-}
-
-.card-slot--attach-over {
-  box-shadow: 0 0 0 3px var(--color-arrow-green), 0 0 16px var(--color-arrow-green-glow);
-}
-
-.card-slot__pt {
-  position: absolute;
-  right: 4px;
-  bottom: 4px;
-  padding: 2px 6px;
-  background: rgba(0, 0, 0, 0.72);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 700;
-  border-radius: 4px;
-  pointer-events: none;
-}
-
-.card-slot__annotation {
-  position: absolute;
-  left: 4px;
-  top: 4px;
-  padding: 2px 6px;
-  max-width: 80%;
-  background: rgba(255, 235, 140, 0.92);
-  color: #2c2000;
-  font-size: 11px;
-  font-weight: 600;
-  border-radius: 3px;
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-slot__counters {
-  position: absolute;
-  left: 4px;
-  bottom: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  pointer-events: none;
-}
-
-.card-slot__counter {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #d48a00;
-  color: #000;
-  font-size: 11px;
-  font-weight: 700;
-  border-radius: 9px;
-}
diff --git a/webclient/src/components/Game/CardSlot/CardSlot.spec.tsx b/webclient/src/components/Game/CardSlot/CardSlot.spec.tsx
deleted file mode 100644
index 5d4217906..000000000
--- a/webclient/src/components/Game/CardSlot/CardSlot.spec.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { ReactElement } from 'react';
-import { render as rtlRender, screen, fireEvent } from '@testing-library/react';
-import { create } from '@bufbuild/protobuf';
-import { DndContext } from '@dnd-kit/core';
-import { Data } from '@app/types';
-
-import { makeCard } from '../../../store/game/__mocks__/fixtures';
-import CardSlot from './CardSlot';
-
-// useDraggable requires a DndContext ancestor; keep a lightweight wrapper
-// for these leaf tests rather than paying for the full renderWithProviders.
-const render = (ui: ReactElement) =>
-  rtlRender(<DndContext>{ui}</DndContext>);
-
-describe('CardSlot', () => {
-  it('renders the Scryfall image for a normal card', () => {
-    const card = makeCard({ name: 'Lightning Bolt', id: 1 });
-    render(<CardSlot card={card} />);
-
-    const img = screen.getByAltText('Lightning Bolt') as HTMLImageElement;
-    expect(img.src).toContain('/cards/named');
-    expect(img.src).toContain('Lightning%20Bolt');
-    expect(img.src).toContain('version=small');
-  });
-
-  it('uses providerId over name when present', () => {
-    const card = makeCard({ name: 'Anything', providerId: 'abc-123', id: 1 });
-    render(<CardSlot card={card} />);
-
-    const img = screen.getByAltText('Anything') as HTMLImageElement;
-    expect(img.src).toContain('/cards/abc-123');
-  });
-
-  it('renders a face-down back and suppresses image/P-T/counters when faceDown', () => {
-    const card = makeCard({
-      name: 'Hidden',
-      faceDown: true,
-      pt: '3/3',
-      counterList: [create(Data.ServerInfo_CardCounterSchema, { id: 1, value: 2 })],
-    });
-    render(<CardSlot card={card} />);
-
-    expect(screen.getByLabelText('face-down card')).toBeInTheDocument();
-    expect(screen.queryByAltText('Hidden')).not.toBeInTheDocument();
-    expect(screen.queryByText('3/3')).not.toBeInTheDocument();
-  });
-
-  it('adds the tapped modifier when card.tapped is true', () => {
-    const card = makeCard({ tapped: true });
-    render(<CardSlot card={card} />);
-    expect(screen.getByTestId('card-slot')).toHaveClass('card-slot--tapped');
-  });
-
-  it('adds the inverted modifier when prop inverted is true', () => {
-    const card = makeCard();
-    render(<CardSlot card={card} inverted />);
-    expect(screen.getByTestId('card-slot')).toHaveClass('card-slot--inverted');
-  });
-
-  it('combines tapped and inverted classes so CSS can compose rotation', () => {
-    const card = makeCard({ tapped: true });
-    render(<CardSlot card={card} inverted />);
-    const el = screen.getByTestId('card-slot');
-    expect(el).toHaveClass('card-slot--tapped');
-    expect(el).toHaveClass('card-slot--inverted');
-  });
-
-  it('renders P/T overlay when pt is set', () => {
-    const card = makeCard({ pt: '5/5' });
-    render(<CardSlot card={card} />);
-    expect(screen.getByText('5/5')).toBeInTheDocument();
-  });
-
-  it('renders annotation overlay when annotation is set', () => {
-    const card = makeCard({ annotation: 'note' });
-    render(<CardSlot card={card} />);
-    expect(screen.getByText('note')).toBeInTheDocument();
-  });
-
-  it('renders a counter badge per card counter', () => {
-    const card = makeCard({
-      counterList: [
-        create(Data.ServerInfo_CardCounterSchema, { id: 1, value: 3 }),
-        create(Data.ServerInfo_CardCounterSchema, { id: 2, value: 7 }),
-      ],
-    });
-    render(<CardSlot card={card} />);
-    expect(screen.getByText('3')).toBeInTheDocument();
-    expect(screen.getByText('7')).toBeInTheDocument();
-  });
-
-  it('adds the attacking modifier when card.attacking is true', () => {
-    const card = makeCard({ attacking: true });
-    render(<CardSlot card={card} />);
-    expect(screen.getByTestId('card-slot')).toHaveClass('card-slot--attacking');
-  });
-
-  it('invokes click handlers with the card payload', () => {
-    const card = makeCard();
-    const onClick = vi.fn();
-    const onDoubleClick = vi.fn();
-    const onContextMenu = vi.fn();
-    const onMouseEnter = vi.fn();
-    render(
-      <CardSlot
-        card={card}
-        onClick={onClick}
-        onDoubleClick={onDoubleClick}
-        onContextMenu={onContextMenu}
-        onMouseEnter={onMouseEnter}
-      />,
-    );
-
-    const el = screen.getByTestId('card-slot');
-    fireEvent.click(el);
-    fireEvent.doubleClick(el);
-    fireEvent.contextMenu(el);
-    fireEvent.mouseEnter(el);
-
-    expect(onClick).toHaveBeenCalledWith(card);
-    expect(onDoubleClick).toHaveBeenCalledWith(card);
-    expect(onContextMenu).toHaveBeenCalled();
-    expect(onContextMenu.mock.calls[0][0]).toBe(card);
-    expect(onMouseEnter).toHaveBeenCalledWith(card);
-  });
-});
diff --git a/webclient/src/components/Game/CardSlot/CardSlot.tsx b/webclient/src/components/Game/CardSlot/CardSlot.tsx
deleted file mode 100644
index 15ab4e605..000000000
--- a/webclient/src/components/Game/CardSlot/CardSlot.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { memo } from 'react';
-
-import type { Data } from '@app/types';
-import { cx } from '@app/utils';
-
-import { useCardSlot } from './useCardSlot';
-
-import './CardSlot.css';
-
-export interface CardSlotProps {
-  card: Data.ServerInfo_Card;
-  inverted?: boolean;
-  draggable?: boolean;
-  isArrowSource?: boolean;
-  /** The player that owns this card (matches desktop's `getOwner()`). Kept
-   *  as `ownerPlayerId`, not `sourcePlayerId`, because it reflects the card
-   *  in the game state rather than any drag origin. */
-  ownerPlayerId?: number;
-  zone?: string;
-  onClick?: (card: Data.ServerInfo_Card) => void;
-  onDoubleClick?: (card: Data.ServerInfo_Card) => void;
-  onContextMenu?: (card: Data.ServerInfo_Card, event: React.MouseEvent) => void;
-  onMouseEnter?: (card: Data.ServerInfo_Card) => void;
-}
-
-function CardSlot({
-  card,
-  inverted = false,
-  draggable = false,
-  isArrowSource = false,
-  ownerPlayerId,
-  zone,
-  onClick,
-  onDoubleClick,
-  onContextMenu,
-  onMouseEnter,
-}: CardSlotProps) {
-  const { smallUrl, attributes, listeners, isDragging, isOver, rootRef } = useCardSlot({
-    card,
-    draggable,
-    ownerPlayerId,
-    zone,
-  });
-
-  const className = cx('card-slot', {
-    'card-slot--tapped': card.tapped,
-    'card-slot--inverted': inverted,
-    'card-slot--face-down': card.faceDown,
-    'card-slot--attacking': card.attacking,
-    'card-slot--dragging': isDragging,
-    'card-slot--arrow-source': isArrowSource,
-    'card-slot--attach-over': isOver,
-  });
-
-  return (
-    <div
-      ref={rootRef}
-      className={className}
-      onClick={() => onClick?.(card)}
-      onDoubleClick={() => onDoubleClick?.(card)}
-      onContextMenu={(e) => onContextMenu?.(card, e)}
-      onMouseEnter={() => onMouseEnter?.(card)}
-      data-testid="card-slot"
-      data-card-id={card.id}
-      data-card-owner={ownerPlayerId ?? ''}
-      data-card-zone={zone ?? ''}
-      {...(draggable ? attributes : {})}
-      {...(draggable ? listeners : {})}
-    >
-      {card.faceDown ? (
-        <div className="card-slot__back" aria-label="face-down card" />
-      ) : (
-        smallUrl && (
-          <img className="card-slot__image" src={smallUrl} alt={card.name} />
-        )
-      )}
-
-      {card.annotation && !card.faceDown && (
-        <div className="card-slot__annotation">{card.annotation}</div>
-      )}
-
-      {card.pt && !card.faceDown && (
-        <div className="card-slot__pt">{card.pt}</div>
-      )}
-
-      {card.counterList.length > 0 && !card.faceDown && (
-        <div className="card-slot__counters">
-          {card.counterList.map((c) => (
-            <span key={c.id} className="card-slot__counter">
-              {c.value}
-            </span>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default memo(CardSlot);
diff --git a/webclient/src/components/Game/CardSlot/useCardSlot.ts b/webclient/src/components/Game/CardSlot/useCardSlot.ts
deleted file mode 100644
index 066b6d702..000000000
--- a/webclient/src/components/Game/CardSlot/useCardSlot.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useCallback, useId } from 'react';
-import {
-  useDraggable,
-  useDroppable,
-  type DraggableAttributes,
-  type DraggableSyntheticListeners,
-} from '@dnd-kit/core';
-
-import { useScryfallCard } from '@app/hooks';
-import { App } from '@app/types';
-import type { Data } from '@app/types';
-
-import { makeCardKey, useRegisterCardRef } from '../CardRegistry/CardRegistryContext';
-
-export interface CardSlot {
-  smallUrl: string | null | undefined;
-  attributes: DraggableAttributes;
-  listeners: DraggableSyntheticListeners;
-  isDragging: boolean;
-  isOver: boolean;
-  rootRef: (el: HTMLElement | null) => void;
-}
-
-export interface UseCardSlotArgs {
-  card: Data.ServerInfo_Card;
-  draggable: boolean;
-  ownerPlayerId: number | undefined;
-  zone: string | undefined;
-}
-
-export function useCardSlot({ card, draggable, ownerPlayerId, zone }: UseCardSlotArgs): CardSlot {
-  const { smallUrl } = useScryfallCard(card);
-
-  // React-stable id salts the dnd-kit IDs so even two disabled CardSlots
-  // rendering the same card (during state transitions / hidden-zone leaks)
-  // never collide. Without the salt, pre-owner/zone render cycles shared
-  // `card-x-x-<id>` and dnd-kit warned.
-  const instanceId = useId();
-
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: `card-${ownerPlayerId ?? instanceId}-${zone ?? 'x'}-${card.id}`,
-    data: { card, sourcePlayerId: ownerPlayerId, sourceZone: zone },
-    disabled: !draggable || ownerPlayerId == null || zone == null,
-  });
-
-  // Cards on the battlefield double as drop targets for drag-to-attach.
-  // Other zones don't support attach (desktop's Player::actAttach rejects
-  // non-table targets), so the droppable is only live for TABLE.
-  const droppableEnabled =
-    ownerPlayerId != null && zone === App.ZoneName.TABLE;
-  const { setNodeRef: setDropRef, isOver } = useDroppable({
-    id: `card-drop-${ownerPlayerId ?? instanceId}-${zone ?? 'x'}-${card.id}`,
-    data: {
-      attachTarget: true,
-      targetPlayerId: ownerPlayerId,
-      targetZone: zone,
-      targetCardId: card.id,
-    },
-    disabled: !droppableEnabled,
-  });
-
-  const registryKey =
-    ownerPlayerId != null && zone != null
-      ? makeCardKey(ownerPlayerId, zone, card.id)
-      : null;
-  const registerRef = useRegisterCardRef(registryKey);
-
-  const rootRef = useCallback(
-    (el: HTMLElement | null) => {
-      registerRef(el);
-      if (draggable) {
-        setNodeRef(el);
-      }
-      if (droppableEnabled) {
-        setDropRef(el);
-      }
-    },
-    [registerRef, setNodeRef, setDropRef, draggable, droppableEnabled],
-  );
-
-  return {
-    smallUrl,
-    attributes,
-    listeners,
-    isDragging,
-    isOver,
-    rootRef,
-  };
-}
diff --git a/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.css b/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.css
deleted file mode 100644
index 8b879fc22..000000000
--- a/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.game-arrow-overlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 20;
-}
-
-.game-arrow-overlay__line {
-  stroke-width: 4;
-  stroke-linecap: round;
-  cursor: pointer;
-  pointer-events: stroke;
-  transition: stroke-width 80ms ease-out;
-}
-
-.game-arrow-overlay__line:hover {
-  stroke-width: 6;
-}
-
-.game-arrow-overlay__line--preview {
-  stroke-dasharray: 8 6;
-  pointer-events: none;
-  opacity: 0.85;
-}
diff --git a/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.spec.tsx b/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.spec.tsx
deleted file mode 100644
index c2aa75946..000000000
--- a/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.spec.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { useRef } from 'react';
-import { screen, fireEvent } from '@testing-library/react';
-import { create } from '@bufbuild/protobuf';
-import { Data } from '@app/types';
-
-import { createMockWebClient, makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeArrow,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-} from '../../../store/game/__mocks__/fixtures';
-import GameArrowOverlay from './GameArrowOverlay';
-import {
-  CardRegistryContext,
-  createCardRegistry,
-  makeCardKey,
-} from '../CardRegistry/CardRegistryContext';
-
-function Harness({ gameId }: { gameId: number }) {
-  const ref = useRef<HTMLDivElement>(null);
-  return (
-    <div ref={ref} data-testid="arrow-harness-root" style={{ position: 'relative', width: 600, height: 400 }}>
-      <GameArrowOverlay gameId={gameId} boardRef={ref} />
-    </div>
-  );
-}
-
-function setupRegistryWithTwoCards() {
-  const registry = createCardRegistry();
-  const elA = document.createElement('div');
-  elA.getBoundingClientRect = () =>
-    ({ left: 100, top: 100, width: 50, height: 50, right: 150, bottom: 150, x: 100, y: 100, toJSON: () => ({}) } as DOMRect);
-  const elB = document.createElement('div');
-  elB.getBoundingClientRect = () =>
-    ({ left: 300, top: 300, width: 50, height: 50, right: 350, bottom: 350, x: 300, y: 300, toJSON: () => ({}) } as DOMRect);
-
-  // Must be attached to the DOM for the registry subscribers to fire after mount.
-  document.body.appendChild(elA);
-  document.body.appendChild(elB);
-
-  registry.register(makeCardKey(1, 'table', 10), elA);
-  registry.register(makeCardKey(1, 'table', 11), elB);
-  return { registry, elA, elB };
-}
-
-function stateWithOneArrow() {
-  const arrow = makeArrow({
-    id: 1,
-    startPlayerId: 1,
-    startZone: 'table',
-    startCardId: 10,
-    targetPlayerId: 1,
-    targetZone: 'table',
-    targetCardId: 11,
-    arrowColor: create(Data.colorSchema, { r: 224, g: 75, b: 59, a: 255 }),
-  });
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          players: {
-            1: makePlayerEntry({
-              properties: makePlayerProperties({ playerId: 1 }),
-              arrows: { 1: arrow },
-            }),
-          },
-        }),
-      },
-    },
-  });
-}
-
-function wrapWithRegistry(children: React.ReactNode, registry: ReturnType<typeof createCardRegistry>) {
-  return (
-    <CardRegistryContext.Provider value={registry}>
-      {children}
-    </CardRegistryContext.Provider>
-  );
-}
-
-describe('GameArrowOverlay', () => {
-  it('renders an SVG root when mounted', () => {
-    const { registry } = setupRegistryWithTwoCards();
-    renderWithProviders(wrapWithRegistry(<Harness gameId={1} />, registry), {
-      preloadedState: stateWithOneArrow(),
-    });
-
-    expect(screen.getByTestId('game-arrow-overlay')).toBeInTheDocument();
-  });
-
-  it('renders a line for each arrow with endpoints at card centers relative to the board', () => {
-    const { registry } = setupRegistryWithTwoCards();
-    // Pretend the board rect starts at 0,0 for simplicity; card A center is
-    // (125, 125) and card B center is (325, 325) in viewport coords — same in
-    // board-relative coords since the harness root is at 0,0.
-    renderWithProviders(wrapWithRegistry(<Harness gameId={1} />, registry), {
-      preloadedState: stateWithOneArrow(),
-    });
-
-    const line = screen.getByTestId('arrow-1');
-    expect(line.getAttribute('x1')).toBe('125');
-    expect(line.getAttribute('y1')).toBe('125');
-    expect(line.getAttribute('x2')).toBe('325');
-    expect(line.getAttribute('y2')).toBe('325');
-  });
-
-  it('skips arrows whose endpoints are not registered yet', () => {
-    const registry = createCardRegistry();
-    renderWithProviders(wrapWithRegistry(<Harness gameId={1} />, registry), {
-      preloadedState: stateWithOneArrow(),
-    });
-
-    expect(screen.queryByTestId('arrow-1')).not.toBeInTheDocument();
-  });
-
-  it('dispatches deleteArrow when an arrow line is clicked', () => {
-    const webClient = createMockWebClient();
-    const { registry } = setupRegistryWithTwoCards();
-    renderWithProviders(wrapWithRegistry(<Harness gameId={1} />, registry), {
-      preloadedState: stateWithOneArrow(),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByTestId('arrow-1'));
-
-    expect(webClient.request.game.deleteArrow).toHaveBeenCalledWith(1, { arrowId: 1 });
-  });
-});
diff --git a/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.tsx b/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.tsx
deleted file mode 100644
index 5b033eae5..000000000
--- a/webclient/src/components/Game/GameArrowOverlay/GameArrowOverlay.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useGameArrowOverlay } from './useGameArrowOverlay';
-
-import './GameArrowOverlay.css';
-
-export interface GameArrowOverlayProps {
-  gameId: number | undefined;
-  boardRef: React.RefObject<HTMLElement | null>;
-  dragPreview?: { x1: number; y1: number; x2: number; y2: number; color: string } | null;
-}
-
-function GameArrowOverlay({ gameId, boardRef, dragPreview = null }: GameArrowOverlayProps) {
-  const { arrows, width, height, handleArrowClick } = useGameArrowOverlay({ gameId, boardRef });
-
-  return (
-    <svg
-      className="game-arrow-overlay"
-      data-testid="game-arrow-overlay"
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      preserveAspectRatio="none"
-    >
-      <defs>
-        <marker
-          id="game-arrow-overlay__head"
-          viewBox="0 0 12 12"
-          refX="10"
-          refY="6"
-          markerWidth="10"
-          markerHeight="10"
-          orient="auto-start-reverse"
-        >
-          <path d="M0,0 L12,6 L0,12 z" fill="currentColor" />
-        </marker>
-      </defs>
-      {arrows.map((a) => (
-        <line
-          key={a.arrowId}
-          className="game-arrow-overlay__line"
-          data-testid={`arrow-${a.arrowId}`}
-          x1={a.x1}
-          y1={a.y1}
-          x2={a.x2}
-          y2={a.y2}
-          stroke={a.color}
-          style={{ color: a.color }}
-          markerEnd="url(#game-arrow-overlay__head)"
-          onClick={() => handleArrowClick(a.arrowId)}
-        />
-      ))}
-      {dragPreview && (
-        <line
-          className="game-arrow-overlay__line game-arrow-overlay__line--preview"
-          data-testid="arrow-preview"
-          x1={dragPreview.x1}
-          y1={dragPreview.y1}
-          x2={dragPreview.x2}
-          y2={dragPreview.y2}
-          stroke={dragPreview.color}
-          style={{ color: dragPreview.color }}
-          markerEnd="url(#game-arrow-overlay__head)"
-        />
-      )}
-    </svg>
-  );
-}
-
-export default GameArrowOverlay;
diff --git a/webclient/src/components/Game/GameArrowOverlay/useGameArrowOverlay.ts b/webclient/src/components/Game/GameArrowOverlay/useGameArrowOverlay.ts
deleted file mode 100644
index d84510ee4..000000000
--- a/webclient/src/components/Game/GameArrowOverlay/useGameArrowOverlay.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-
-import { useWebClient } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-import { App } from '@app/types';
-import type { Data, Enriched } from '@app/types';
-
-import { makeCardKey, useCardRegistry } from '../CardRegistry/CardRegistryContext';
-
-export interface ResolvedArrow {
-  arrowId: number;
-  ownerPlayerId: number;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  color: string;
-}
-
-const ARROW_FALLBACK_CSS = App.rgbaToCss(App.ArrowColor.RED);
-
-function cssColor(c: { r: number; g: number; b: number; a: number } | undefined): string {
-  if (!c) {
-    return ARROW_FALLBACK_CSS;
-  }
-  return App.rgbaToCss({ r: c.r, g: c.g, b: c.b, a: c.a ?? 255 });
-}
-
-export interface GameArrowOverlay {
-  arrows: ResolvedArrow[];
-  width: number;
-  height: number;
-  handleArrowClick: (arrowId: number) => void;
-}
-
-export interface UseGameArrowOverlayArgs {
-  gameId: number | undefined;
-  boardRef: React.RefObject<HTMLElement | null>;
-}
-
-export function useGameArrowOverlay({
-  gameId,
-  boardRef,
-}: UseGameArrowOverlayArgs): GameArrowOverlay {
-  const webClient = useWebClient();
-  const registry = useCardRegistry();
-  const players = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getPlayers(state, gameId) : undefined,
-  );
-
-  // Tick is bumped whenever we need to re-query DOM rects (card registry
-  // mutation, board resize). Keeps the overlay declarative without an external
-  // layout engine.
-  const [tick, setTick] = useState(0);
-  const bump = useCallback(() => {
-    setTick((t) => t + 1);
-  }, []);
-
-  useEffect(() => {
-    if (!registry) {
-      return undefined;
-    }
-    return registry.subscribe(bump);
-  }, [registry, bump]);
-
-  // First-paint: the board ref is null during the initial render, so `boardRect`
-  // is undefined and the arrows memo bails out. Bump once after mount so the
-  // next render sees a populated ref.
-  useLayoutEffect(() => {
-    bump();
-  }, [bump]);
-
-  useLayoutEffect(() => {
-    const el = boardRef.current;
-    if (!el || typeof ResizeObserver === 'undefined') {
-      return undefined;
-    }
-    const ro = new ResizeObserver(() => bump());
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [boardRef, bump]);
-
-  const boardRect = boardRef.current?.getBoundingClientRect();
-
-  const arrows = useMemo<ResolvedArrow[]>(() => {
-    if (!players || !registry || !boardRect) {
-      return [];
-    }
-    const out: ResolvedArrow[] = [];
-    for (const player of Object.values(players) as Enriched.PlayerEntry[]) {
-      for (const a of Object.values(player.arrows) as Data.ServerInfo_Arrow[]) {
-        const sourceEl = registry.get(
-          makeCardKey(a.startPlayerId, a.startZone, a.startCardId),
-        );
-        const targetEl = registry.get(
-          makeCardKey(a.targetPlayerId, a.targetZone, a.targetCardId),
-        );
-        if (!sourceEl || !targetEl) {
-          continue;
-        }
-        const s = sourceEl.getBoundingClientRect();
-        const t = targetEl.getBoundingClientRect();
-        out.push({
-          arrowId: a.id,
-          ownerPlayerId: player.properties.playerId,
-          x1: s.left + s.width / 2 - boardRect.left,
-          y1: s.top + s.height / 2 - boardRect.top,
-          x2: t.left + t.width / 2 - boardRect.left,
-          y2: t.top + t.height / 2 - boardRect.top,
-          color: cssColor(a.arrowColor),
-        });
-      }
-    }
-    // `tick` in deps intentionally re-runs the memo on DOM-layout changes.
-    return out;
-  }, [players, registry, boardRect, tick]);
-
-  const handleArrowClick = (arrowId: number) => {
-    if (gameId == null) {
-      return;
-    }
-    webClient.request.game.deleteArrow(gameId, { arrowId });
-  };
-
-  const width = boardRect?.width ?? 0;
-  const height = boardRect?.height ?? 0;
-
-  return { arrows, width, height, handleArrowClick };
-}
diff --git a/webclient/src/components/Game/GameLog/GameLog.css b/webclient/src/components/Game/GameLog/GameLog.css
deleted file mode 100644
index a8c96c871..000000000
--- a/webclient/src/components/Game/GameLog/GameLog.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.game-log {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  background: #0a1225;
-  color: #e5ecf7;
-  font-size: 12px;
-}
-
-.game-log__heading {
-  padding: 6px 12px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: #8597bb;
-  border-bottom: 1px solid #1a2b52;
-}
-
-.game-log__timer {
-  padding: 4px 12px;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-  font-size: 12px;
-  color: #b8c7e5;
-  border-bottom: 1px solid #1a2b52;
-}
-
-.game-log__messages {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 6px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.game-log__empty {
-  color: #5a6a8a;
-  font-style: italic;
-}
-
-.game-log__line {
-  display: flex;
-  gap: 6px;
-  line-height: 1.35;
-}
-
-.game-log__line--event {
-  color: #8597bb;
-  font-style: italic;
-}
-
-.game-log__author {
-  font-weight: 700;
-  color: var(--color-highlight-yellow);
-  flex-shrink: 0;
-}
-
-.game-log__text {
-  flex: 1;
-  word-break: break-word;
-}
-
-.game-log__input-row {
-  border-top: 1px solid #1a2b52;
-  padding: 6px 12px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.game-log__input-label {
-  color: #8597bb;
-  font-size: 11px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.game-log__input {
-  width: 100%;
-  height: 28px;
-  padding: 0 8px;
-  box-sizing: border-box;
-  background: #17223d;
-  border: 1px solid #233a68;
-  color: #e5ecf7;
-  font-family: inherit;
-  font-size: 12px;
-  border-radius: 3px;
-}
-
-.game-log__input:disabled {
-  opacity: 0.5;
-}
diff --git a/webclient/src/components/Game/GameLog/GameLog.spec.tsx b/webclient/src/components/Game/GameLog/GameLog.spec.tsx
deleted file mode 100644
index b3fa9c7da..000000000
--- a/webclient/src/components/Game/GameLog/GameLog.spec.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import { act, screen, fireEvent } from '@testing-library/react';
-import type { Enriched } from '@app/types';
-import { create } from '@bufbuild/protobuf';
-import { Data } from '@app/types';
-
-import { createMockWebClient, makeStoreState, renderWithProviders, makeUser } from '../../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-} from '../../../store/game/__mocks__/fixtures';
-import { Actions } from '../../../store/game/game.actions';
-import GameLog from './GameLog';
-
-function stateWithMessages(
-  players: ReturnType<typeof makePlayerEntry>[],
-  messages: Enriched.GameMessage[],
-  secondsElapsed = 0,
-) {
-  const byId: Record<number, ReturnType<typeof makePlayerEntry>> = {};
-  for (const p of players) {
-    byId[p.properties.playerId] = p;
-  }
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({ players: byId, messages, secondsElapsed }),
-      },
-    },
-  });
-}
-
-describe('GameLog', () => {
-  it('shows an empty hint when no messages are present', () => {
-    renderWithProviders(<GameLog gameId={1} />, {
-      preloadedState: stateWithMessages([], []),
-    });
-
-    expect(screen.getByText(/no messages/i)).toBeInTheDocument();
-  });
-
-  it('renders each message with the speaking player name', () => {
-    const alice = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Alice' }),
-      }),
-    });
-    renderWithProviders(<GameLog gameId={1} />, {
-      preloadedState: stateWithMessages(
-        [alice],
-        [
-          { playerId: 1, message: 'gl hf', timeReceived: 0 },
-          { playerId: 1, message: 'yolo', timeReceived: 0 },
-        ],
-      ),
-    });
-
-    expect(screen.getByText('gl hf')).toBeInTheDocument();
-    expect(screen.getByText('yolo')).toBeInTheDocument();
-    expect(screen.getAllByText('Alice:').length).toBe(2);
-  });
-
-  it('renders a fallback author label when the speaker is not in the player list', () => {
-    renderWithProviders(<GameLog gameId={1} />, {
-      preloadedState: stateWithMessages(
-        [],
-        [{ playerId: 99, message: 'hello', timeReceived: 0 }],
-      ),
-    });
-
-    expect(screen.getByText('p99:')).toBeInTheDocument();
-  });
-
-  it('disables the chat input when gameId is undefined', () => {
-    renderWithProviders(<GameLog gameId={undefined} />, {
-      preloadedState: makeStoreState({ games: { games: {} } }),
-    });
-
-    expect(screen.getByLabelText('game chat input')).toBeDisabled();
-  });
-
-  it('enables the chat input when gameId is provided', () => {
-    renderWithProviders(<GameLog gameId={1} />, {
-      preloadedState: stateWithMessages([], []),
-    });
-
-    expect(screen.getByLabelText('game chat input')).not.toBeDisabled();
-  });
-
-  it('submits the chat draft and clears the input', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<GameLog gameId={1} />, {
-      preloadedState: stateWithMessages([], []),
-      webClient,
-    });
-
-    const input = screen.getByLabelText('game chat input') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: '  hello world  ' } });
-    fireEvent.submit(input.closest('form')!);
-
-    expect(webClient.request.game.gameSay).toHaveBeenCalledWith(1, { message: 'hello world' });
-    expect(input.value).toBe('');
-  });
-
-  it('does not dispatch for a whitespace-only message', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<GameLog gameId={1} />, {
-      preloadedState: stateWithMessages([], []),
-      webClient,
-    });
-
-    const input = screen.getByLabelText('game chat input') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: '   ' } });
-    fireEvent.submit(input.closest('form')!);
-
-    expect(webClient.request.game.gameSay).not.toHaveBeenCalled();
-  });
-
-  describe('event-log rendering (desktop MessageLogWidget parity)', () => {
-    // Desktop renders game events (card moves, tap, concede, etc.) in the
-    // same log surface as chat, but without a leading speaker label and in a
-    // distinct italic style. Regression guard — GameLog was chat-only before
-    // this milestone.
-    it('renders event messages without a leading author label', () => {
-      renderWithProviders(<GameLog gameId={1} />, {
-        preloadedState: stateWithMessages(
-          [],
-          [
-            { playerId: 1, message: 'Alice plays Bolt.', timeReceived: 0, kind: 'event' },
-          ],
-        ),
-      });
-
-      expect(screen.getByText('Alice plays Bolt.')).toBeInTheDocument();
-      expect(screen.queryByText(/^p\d+:$/)).not.toBeInTheDocument();
-      expect(screen.queryByText('Alice:')).not.toBeInTheDocument();
-    });
-
-    it('tags event lines with the event modifier class', () => {
-      renderWithProviders(<GameLog gameId={1} />, {
-        preloadedState: stateWithMessages(
-          [],
-          [
-            { playerId: 0, message: 'The game has started.', timeReceived: 0, kind: 'event' },
-          ],
-        ),
-      });
-
-      const line = screen.getByText('The game has started.').closest('.game-log__line')!;
-      expect(line.className).toContain('game-log__line--event');
-    });
-
-    it('interleaves chat and event lines in order', () => {
-      const alice = makePlayerEntry({
-        properties: makePlayerProperties({
-          playerId: 1,
-          userInfo: makeUser({ name: 'Alice' }),
-        }),
-      });
-      renderWithProviders(<GameLog gameId={1} />, {
-        preloadedState: stateWithMessages(
-          [alice],
-          [
-            { playerId: 1, message: 'gl', timeReceived: 0, kind: 'chat' },
-            { playerId: 1, message: 'Alice plays Bolt.', timeReceived: 1, kind: 'event' },
-            { playerId: 1, message: 'hf', timeReceived: 2, kind: 'chat' },
-          ],
-        ),
-      });
-
-      const lines = Array.from(
-        document.querySelectorAll<HTMLElement>('.game-log__line'),
-      );
-      expect(lines).toHaveLength(3);
-      expect(lines[0].textContent).toContain('Alice:');
-      expect(lines[1].className).toContain('game-log__line--event');
-      expect(lines[2].textContent).toContain('Alice:');
-    });
-  });
-
-  describe('elapsed game timer', () => {
-    beforeEach(() => {
-      vi.useFakeTimers({ shouldAdvanceTime: true });
-    });
-
-    afterEach(() => {
-      vi.useRealTimers();
-    });
-
-    it('renders the initial secondsElapsed snapshot in HH:MM:SS form', () => {
-      renderWithProviders(<GameLog gameId={1} />, {
-        preloadedState: stateWithMessages([], [], 3723),
-      });
-
-      expect(screen.getByTestId('game-log-timer')).toHaveTextContent('01:02:03');
-    });
-
-    it('advances locally once per second between server events', () => {
-      renderWithProviders(<GameLog gameId={1} />, {
-        preloadedState: stateWithMessages([], [], 0),
-      });
-
-      expect(screen.getByTestId('game-log-timer')).toHaveTextContent('00:00:00');
-
-      act(() => {
-        vi.advanceTimersByTime(2000);
-      });
-
-      expect(screen.getByTestId('game-log-timer')).toHaveTextContent('00:00:02');
-    });
-
-    it('does not render the timer when there is no active game', () => {
-      renderWithProviders(<GameLog gameId={undefined} />, {
-        preloadedState: makeStoreState({ games: { games: {} } }),
-      });
-
-      expect(screen.queryByTestId('game-log-timer')).not.toBeInTheDocument();
-    });
-
-    // Mirrors desktop's setGameTime resync: the local 1Hz ticker drifts until
-    // the server pushes a fresh `secondsElapsed`, at which point the display
-    // snaps to the server value. Regression guard for that snap behavior.
-    it('resyncs displayed time when Redux pushes a new secondsElapsed', () => {
-      const { store } = renderWithProviders(<GameLog gameId={1} />, {
-        preloadedState: stateWithMessages([], [], 10),
-      });
-
-      expect(screen.getByTestId('game-log-timer')).toHaveTextContent('00:00:10');
-
-      // Local ticker drifts forward between server events.
-      act(() => {
-        vi.advanceTimersByTime(3000);
-      });
-      expect(screen.getByTestId('game-log-timer')).toHaveTextContent('00:00:13');
-
-      // Server pushes a fresh snapshot (real reducer path).
-      act(() => {
-        store.dispatch(Actions.gameStateChanged({
-          gameId: 1,
-          data: create(Data.Event_GameStateChangedSchema, { secondsElapsed: 120 }),
-        }));
-      });
-
-      // Display snaps to the server value, not the drifted local value.
-      expect(screen.getByTestId('game-log-timer')).toHaveTextContent('00:02:00');
-    });
-  });
-});
diff --git a/webclient/src/components/Game/GameLog/GameLog.tsx b/webclient/src/components/Game/GameLog/GameLog.tsx
deleted file mode 100644
index a2c72d051..000000000
--- a/webclient/src/components/Game/GameLog/GameLog.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useRef } from 'react';
-
-import { formatElapsed, useGameLog } from './useGameLog';
-
-import './GameLog.css';
-
-export interface GameLogProps {
-  gameId: number | undefined;
-}
-
-function GameLog({ gameId }: GameLogProps) {
-  const listRef = useRef<HTMLDivElement>(null);
-  const {
-    messages,
-    players,
-    displaySeconds,
-    draft,
-    setDraft,
-    handleMessagesScroll,
-    handleSubmit,
-  } = useGameLog({ gameId, listRef });
-
-  return (
-    <div className="game-log" data-testid="game-log">
-      <div className="game-log__heading">Log</div>
-      {gameId != null && (
-        <div className="game-log__timer" data-testid="game-log-timer">
-          {formatElapsed(displaySeconds)}
-        </div>
-      )}
-      <div className="game-log__messages" ref={listRef} onScroll={handleMessagesScroll}>
-        {messages.length === 0 && (
-          <div className="game-log__empty">no messages</div>
-        )}
-        {messages.map((m, idx) => {
-          const isEvent = m.kind === 'event';
-          const name = players?.[m.playerId]?.properties.userInfo?.name ?? `p${m.playerId}`;
-          const lineClass = isEvent ? 'game-log__line game-log__line--event' : 'game-log__line';
-          return (
-            <div key={`${m.timeReceived}-${idx}`} className={lineClass}>
-              {!isEvent && <span className="game-log__author">{name}:</span>}
-              <span className="game-log__text">{m.message}</span>
-            </div>
-          );
-        })}
-      </div>
-      <form className="game-log__input-row" onSubmit={handleSubmit}>
-        <label className="game-log__input-label" htmlFor="game-log-say-input">
-          Say:
-        </label>
-        <input
-          id="game-log-say-input"
-          type="text"
-          className="game-log__input"
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          disabled={gameId == null}
-          aria-label="game chat input"
-        />
-      </form>
-    </div>
-  );
-}
-
-export default GameLog;
diff --git a/webclient/src/components/Game/GameLog/useGameLog.ts b/webclient/src/components/Game/GameLog/useGameLog.ts
deleted file mode 100644
index a2c0252b7..000000000
--- a/webclient/src/components/Game/GameLog/useGameLog.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useEffect, useRef, useState, RefObject } from 'react';
-import { useWebClient } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-import type { Enriched } from '@app/types';
-
-const EMPTY_MESSAGES: Enriched.GameMessage[] = [];
-
-export function formatElapsed(totalSeconds: number): string {
-  const s = Math.max(0, Math.floor(totalSeconds));
-  const hh = String(Math.floor(s / 3600)).padStart(2, '0');
-  const mm = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
-  const ss = String(s % 60).padStart(2, '0');
-  return `${hh}:${mm}:${ss}`;
-}
-
-export interface GameLog {
-  messages: Enriched.GameMessage[];
-  players: Record<number, Enriched.PlayerEntry> | undefined;
-  displaySeconds: number;
-  draft: string;
-  setDraft: (v: string) => void;
-  handleMessagesScroll: () => void;
-  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-}
-
-export interface UseGameLogArgs {
-  gameId: number | undefined;
-  listRef: RefObject<HTMLDivElement | null>;
-}
-
-export function useGameLog({ gameId, listRef }: UseGameLogArgs): GameLog {
-  const webClient = useWebClient();
-  // getMessages falls back to a shared EMPTY_ARRAY typed as ServerInfo_Card[]
-  // (see game.selectors.ts). The runtime array is empty, so the cast is safe;
-  // fixing the selector's fallback type is out of scope for this refactor.
-  const messages = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getMessages(state, gameId) : EMPTY_MESSAGES,
-  ) as Enriched.GameMessage[];
-  const players = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getPlayers(state, gameId) : undefined,
-  );
-  const secondsElapsed = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getSecondsElapsed(state, gameId) : 0,
-  );
-
-  // Local 1Hz ticker, resynced from Redux whenever a server event delivers a
-  // fresh `secondsElapsed`. Mirrors desktop's QTimer(1000) +
-  // setGameTime(event.seconds_elapsed()) pattern in game_state.cpp.
-  const [displaySeconds, setDisplaySeconds] = useState(secondsElapsed);
-
-  useEffect(() => {
-    setDisplaySeconds(secondsElapsed);
-  }, [secondsElapsed]);
-
-  useEffect(() => {
-    if (gameId == null) {
-      return undefined;
-    }
-    const id = window.setInterval(() => {
-      setDisplaySeconds((prev) => prev + 1);
-    }, 1000);
-    return () => window.clearInterval(id);
-  }, [gameId]);
-
-  const [draft, setDraft] = useState('');
-
-  // Desktop pins the log to the bottom unless the user has scrolled up to read backlog.
-  // Capture pin state before the new line renders so auto-scroll only fires when the
-  // user was already following the tail.
-  const wasPinnedRef = useRef(true);
-  useEffect(() => {
-    const el = listRef.current;
-    if (!el) {
-      return;
-    }
-    if (wasPinnedRef.current) {
-      el.scrollTop = el.scrollHeight;
-    }
-  }, [messages.length, listRef]);
-
-  const handleMessagesScroll = () => {
-    const el = listRef.current;
-    if (!el) {
-      return;
-    }
-    wasPinnedRef.current = el.scrollTop + el.clientHeight >= el.scrollHeight - 2;
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (gameId == null) {
-      return;
-    }
-    const trimmed = draft.trim();
-    if (trimmed.length === 0) {
-      return;
-    }
-    webClient.request.game.gameSay(gameId, { message: trimmed });
-    setDraft('');
-  };
-
-  return {
-    messages,
-    players,
-    displaySeconds,
-    draft,
-    setDraft,
-    handleMessagesScroll,
-    handleSubmit,
-  };
-}
diff --git a/webclient/src/components/Game/HandContextMenu/HandContextMenu.css b/webclient/src/components/Game/HandContextMenu/HandContextMenu.css
deleted file mode 100644
index 3d27194d5..000000000
--- a/webclient/src/components/Game/HandContextMenu/HandContextMenu.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.hand-context-menu .MuiMenuItem-root {
-  font-size: 13px;
-}
diff --git a/webclient/src/components/Game/HandContextMenu/HandContextMenu.spec.tsx b/webclient/src/components/Game/HandContextMenu/HandContextMenu.spec.tsx
deleted file mode 100644
index b1e532bf4..000000000
--- a/webclient/src/components/Game/HandContextMenu/HandContextMenu.spec.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { createMockWebClient, renderWithProviders } from '../../../__test-utils__';
-import HandContextMenu from './HandContextMenu';
-
-function render(overrides: Partial<React.ComponentProps<typeof HandContextMenu>> = {}) {
-  const props: React.ComponentProps<typeof HandContextMenu> = {
-    isOpen: true,
-    anchorPosition: { top: 10, left: 10 },
-    gameId: 1,
-    handSize: 7,
-    onClose: vi.fn(),
-    onRequestChooseMulligan: vi.fn(),
-    onRequestRevealHand: vi.fn(),
-    onRequestRevealRandom: vi.fn(),
-    ...overrides,
-  };
-  const webClient = createMockWebClient();
-  return {
-    ...renderWithProviders(<HandContextMenu {...props} />, { webClient }),
-    webClient,
-    props,
-  };
-}
-
-describe('HandContextMenu', () => {
-  it('fires onRequestChooseMulligan and closes when the choose-size item is clicked', () => {
-    const onRequestChooseMulligan = vi.fn();
-    const onClose = vi.fn();
-    render({ onRequestChooseMulligan, onClose });
-
-    fireEvent.click(screen.getByRole('menuitem', { name: /choose size/i }));
-
-    expect(onRequestChooseMulligan).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('dispatches mulligan(number=handSize) on the same-size item', () => {
-    const { webClient } = render({ handSize: 7 });
-
-    fireEvent.click(screen.getByRole('menuitem', { name: /same size/i }));
-
-    expect(webClient.request.game.mulligan).toHaveBeenCalledWith(1, { number: 7 });
-  });
-
-  it('dispatches mulligan(number=handSize-1) on the size−1 item', () => {
-    const { webClient } = render({ handSize: 5 });
-
-    fireEvent.click(screen.getByRole('menuitem', { name: /size − 1/i }));
-
-    expect(webClient.request.game.mulligan).toHaveBeenCalledWith(1, { number: 4 });
-  });
-
-  it('floors size−1 at 1, matching desktop actMulliganMinusOne', () => {
-    const { webClient } = render({ handSize: 1 });
-
-    fireEvent.click(screen.getByRole('menuitem', { name: /size − 1/i }));
-
-    expect(webClient.request.game.mulligan).toHaveBeenCalledWith(1, { number: 1 });
-  });
-
-  it('disables same-size when handSize is 0', () => {
-    render({ handSize: 0 });
-
-    expect(screen.getByRole('menuitem', { name: /same size/i })).toHaveAttribute(
-      'aria-disabled',
-      'true',
-    );
-  });
-
-  it('fires onRequestRevealHand and closes on reveal-hand item', () => {
-    const onRequestRevealHand = vi.fn();
-    const onClose = vi.fn();
-    render({ onRequestRevealHand, onClose });
-
-    fireEvent.click(screen.getByRole('menuitem', { name: /reveal hand/i }));
-
-    expect(onRequestRevealHand).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-});
diff --git a/webclient/src/components/Game/HandContextMenu/HandContextMenu.tsx b/webclient/src/components/Game/HandContextMenu/HandContextMenu.tsx
deleted file mode 100644
index fefd7c5f7..000000000
--- a/webclient/src/components/Game/HandContextMenu/HandContextMenu.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Divider from '@mui/material/Divider';
-
-import { useHandContextMenu } from './useHandContextMenu';
-
-import './HandContextMenu.css';
-
-export interface HandContextMenuProps {
-  isOpen: boolean;
-  anchorPosition: { top: number; left: number } | null;
-  gameId: number;
-  handSize: number;
-  onClose: () => void;
-  onRequestChooseMulligan: () => void;
-  onRequestRevealHand: () => void;
-  onRequestRevealRandom: () => void;
-}
-
-function HandContextMenu({
-  isOpen,
-  anchorPosition,
-  gameId,
-  handSize,
-  onClose,
-  onRequestChooseMulligan,
-  onRequestRevealHand,
-  onRequestRevealRandom,
-}: HandContextMenuProps) {
-  const { handleChoose, handleSameSize, handleMinusOne, handleRevealHand, handleRevealRandom } =
-    useHandContextMenu({
-      gameId,
-      handSize,
-      onClose,
-      onRequestChooseMulligan,
-      onRequestRevealHand,
-      onRequestRevealRandom,
-    });
-
-  return (
-    <Menu
-      open={isOpen}
-      onClose={onClose}
-      anchorReference="anchorPosition"
-      anchorPosition={anchorPosition ?? undefined}
-      data-testid="hand-context-menu"
-      className="hand-context-menu"
-    >
-      <MenuItem onClick={handleChoose}>Take mulligan (choose size)…</MenuItem>
-      <MenuItem onClick={handleSameSize} disabled={handSize === 0}>
-        Take mulligan (same size)
-      </MenuItem>
-      <MenuItem onClick={handleMinusOne}>
-        Take mulligan (size − 1)
-      </MenuItem>
-      <Divider />
-      <MenuItem onClick={handleRevealHand}>Reveal hand to…</MenuItem>
-      <MenuItem onClick={handleRevealRandom} disabled={handSize === 0}>
-        Reveal random card to…
-      </MenuItem>
-    </Menu>
-  );
-}
-
-export default HandContextMenu;
diff --git a/webclient/src/components/Game/HandContextMenu/useHandContextMenu.ts b/webclient/src/components/Game/HandContextMenu/useHandContextMenu.ts
deleted file mode 100644
index e78ace088..000000000
--- a/webclient/src/components/Game/HandContextMenu/useHandContextMenu.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useWebClient } from '@app/hooks';
-
-export interface HandContextMenu {
-  handleChoose: () => void;
-  handleSameSize: () => void;
-  handleMinusOne: () => void;
-  handleRevealHand: () => void;
-  handleRevealRandom: () => void;
-}
-
-export interface UseHandContextMenuArgs {
-  gameId: number;
-  handSize: number;
-  onClose: () => void;
-  onRequestChooseMulligan: () => void;
-  onRequestRevealHand: () => void;
-  onRequestRevealRandom: () => void;
-}
-
-export function useHandContextMenu({
-  gameId,
-  handSize,
-  onClose,
-  onRequestChooseMulligan,
-  onRequestRevealHand,
-  onRequestRevealRandom,
-}: UseHandContextMenuArgs): HandContextMenu {
-  const webClient = useWebClient();
-
-  const handleChoose = () => {
-    if (gameId <= 0) {
-      return;
-    }
-    onRequestChooseMulligan();
-    onClose();
-  };
-
-  const handleSameSize = () => {
-    if (gameId <= 0) {
-      return;
-    }
-    webClient.request.game.mulligan(gameId, { number: handSize });
-    onClose();
-  };
-
-  const handleMinusOne = () => {
-    if (gameId <= 0) {
-      return;
-    }
-    // Desktop's actMulliganMinusOne floors at 1 (see
-    // cockatrice/src/game/player/player_actions.cpp actMulliganMinusOne);
-    // the server-side doMulligan rejects number < 1.
-    const next = Math.max(1, handSize - 1);
-    webClient.request.game.mulligan(gameId, { number: next });
-    onClose();
-  };
-
-  const handleRevealHand = () => {
-    if (gameId <= 0) {
-      return;
-    }
-    onRequestRevealHand();
-    onClose();
-  };
-
-  const handleRevealRandom = () => {
-    if (gameId <= 0) {
-      return;
-    }
-    onRequestRevealRandom();
-    onClose();
-  };
-
-  return { handleChoose, handleSameSize, handleMinusOne, handleRevealHand, handleRevealRandom };
-}
diff --git a/webclient/src/components/Game/HandZone/HandZone.css b/webclient/src/components/Game/HandZone/HandZone.css
deleted file mode 100644
index 6d4a3449c..000000000
--- a/webclient/src/components/Game/HandZone/HandZone.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.hand-zone {
-  height: 176px;
-  display: flex;
-  flex-direction: column;
-  background: #0a4a1e;
-  border-top: 2px solid #1a6a33;
-  padding: 4px 12px;
-  box-sizing: border-box;
-}
-
-.hand-zone__label {
-  color: #c4e8ce;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  margin-bottom: 2px;
-}
-
-.hand-zone__cards {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.hand-zone--drop-over {
-  background: #126a2d;
-  box-shadow: inset 0 0 0 2px #4de078;
-}
diff --git a/webclient/src/components/Game/HandZone/HandZone.spec.tsx b/webclient/src/components/Game/HandZone/HandZone.spec.tsx
deleted file mode 100644
index c16bfcdfc..000000000
--- a/webclient/src/components/Game/HandZone/HandZone.spec.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import HandZone from './HandZone';
-
-function stateWithHand(cards: ReturnType<typeof makeCard>[]) {
-  const hand = makeZoneEntry({
-    name: App.ZoneName.HAND,
-    type: 0,
-    cardCount: cards.length,
-    cards,
-  });
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: 1,
-          players: {
-            1: makePlayerEntry({ zones: { [App.ZoneName.HAND]: hand } }),
-          },
-        }),
-      },
-    },
-  });
-}
-
-describe('HandZone', () => {
-  it('renders the hand label with the current count', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'Island' }),
-      makeCard({ id: 2, name: 'Swamp' }),
-    ];
-    renderWithProviders(<HandZone gameId={1} playerId={1} />, {
-      preloadedState: stateWithHand(cards),
-    });
-
-    expect(screen.getByText(/Hand · 2/)).toBeInTheDocument();
-  });
-
-  it('renders a CardSlot for every card in hand', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'Forest' }),
-      makeCard({ id: 2, name: 'Mountain' }),
-    ];
-    renderWithProviders(<HandZone gameId={1} playerId={1} />, {
-      preloadedState: stateWithHand(cards),
-    });
-
-    expect(screen.getAllByTestId('card-slot')).toHaveLength(2);
-    expect(screen.getByAltText('Forest')).toBeInTheDocument();
-    expect(screen.getByAltText('Mountain')).toBeInTheDocument();
-  });
-
-  it('renders an empty row when hand is empty', () => {
-    renderWithProviders(<HandZone gameId={1} playerId={1} />, {
-      preloadedState: stateWithHand([]),
-    });
-
-    expect(screen.getByText(/Hand · 0/)).toBeInTheDocument();
-    expect(screen.queryAllByTestId('card-slot')).toHaveLength(0);
-  });
-
-  describe('zone-level context menu', () => {
-    it('fires onZoneContextMenu when right-clicking the empty hand area', () => {
-      const onZoneContextMenu = vi.fn();
-      renderWithProviders(
-        <HandZone gameId={1} playerId={1} onZoneContextMenu={onZoneContextMenu} />,
-        { preloadedState: stateWithHand([]) },
-      );
-
-      fireEvent.contextMenu(screen.getByTestId('hand-zone'));
-
-      expect(onZoneContextMenu).toHaveBeenCalled();
-    });
-
-    it('does NOT fire onZoneContextMenu when right-clicking a card slot', () => {
-      const onZoneContextMenu = vi.fn();
-      const cards = [makeCard({ id: 1, name: 'Island' })];
-      renderWithProviders(
-        <HandZone gameId={1} playerId={1} onZoneContextMenu={onZoneContextMenu} />,
-        { preloadedState: stateWithHand(cards) },
-      );
-
-      fireEvent.contextMenu(screen.getByTestId('card-slot'));
-
-      expect(onZoneContextMenu).not.toHaveBeenCalled();
-    });
-  });
-});
diff --git a/webclient/src/components/Game/HandZone/HandZone.tsx b/webclient/src/components/Game/HandZone/HandZone.tsx
deleted file mode 100644
index 0c78382bf..000000000
--- a/webclient/src/components/Game/HandZone/HandZone.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { App, Data } from '@app/types';
-import { cx } from '@app/utils';
-
-import CardSlot from '../CardSlot/CardSlot';
-import { makeCardKey } from '../CardRegistry/CardRegistryContext';
-import { useHandZone } from './useHandZone';
-
-import './HandZone.css';
-
-export interface HandZoneProps {
-  gameId: number;
-  playerId: number;
-  canAct?: boolean;
-  arrowSourceKey?: string | null;
-  onCardHover?: (card: Data.ServerInfo_Card) => void;
-  onCardClick?: (playerId: number, zone: string, card: Data.ServerInfo_Card) => void;
-  onCardContextMenu?: (card: Data.ServerInfo_Card, event: React.MouseEvent) => void;
-  onZoneContextMenu?: (event: React.MouseEvent) => void;
-}
-
-function HandZone({
-  gameId,
-  playerId,
-  canAct = false,
-  arrowSourceKey = null,
-  onCardHover,
-  onCardClick,
-  onCardContextMenu,
-  onZoneContextMenu,
-}: HandZoneProps) {
-  const { cards, setNodeRef, isOver, handleZoneContextMenu } = useHandZone({
-    gameId,
-    playerId,
-    canAct,
-    onZoneContextMenu,
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cx('hand-zone', { 'hand-zone--drop-over': isOver })}
-      data-testid="hand-zone"
-      onContextMenu={handleZoneContextMenu}
-    >
-      <div className="hand-zone__label">Hand · {cards.length}</div>
-      <div className="hand-zone__cards">
-        {cards.map((card) => {
-          const key = makeCardKey(playerId, App.ZoneName.HAND, card.id);
-          return (
-            <CardSlot
-              key={card.id}
-              card={card}
-              draggable={canAct}
-              ownerPlayerId={playerId}
-              zone={App.ZoneName.HAND}
-              isArrowSource={arrowSourceKey === key}
-              onMouseEnter={onCardHover}
-              onClick={(c) => onCardClick?.(playerId, App.ZoneName.HAND, c)}
-              onContextMenu={onCardContextMenu}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export default HandZone;
diff --git a/webclient/src/components/Game/HandZone/useHandZone.ts b/webclient/src/components/Game/HandZone/useHandZone.ts
deleted file mode 100644
index d11226a3f..000000000
--- a/webclient/src/components/Game/HandZone/useHandZone.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useDroppable } from '@dnd-kit/core';
-import type { Ref } from 'react';
-
-import { App, Data } from '@app/types';
-import { GameSelectors, useAppSelector } from '@app/store';
-
-export interface HandZone {
-  cards: Data.ServerInfo_Card[];
-  setNodeRef: Ref<HTMLDivElement>;
-  isOver: boolean;
-  handleZoneContextMenu: (e: React.MouseEvent<HTMLDivElement>) => void;
-}
-
-export interface UseHandZoneArgs {
-  gameId: number;
-  playerId: number;
-  canAct: boolean;
-  onZoneContextMenu?: (event: React.MouseEvent) => void;
-}
-
-export function useHandZone({
-  gameId,
-  playerId,
-  canAct,
-  onZoneContextMenu,
-}: UseHandZoneArgs): HandZone {
-  const cards = useAppSelector((state) =>
-    GameSelectors.getCards(state, gameId, playerId, App.ZoneName.HAND),
-  );
-
-  // Match desktop: can't drop into a hand zone that isn't yours (judges
-  // aside; server enforces the same restriction). Today only the local
-  // HandZone mounts, but this guard future-proofs opponent-hand mirrors.
-  const { setNodeRef, isOver } = useDroppable({
-    id: `hand-${playerId}`,
-    data: { targetPlayerId: playerId, targetZone: App.ZoneName.HAND },
-    disabled: !canAct,
-  });
-
-  // Right-click anywhere inside the hand that doesn't land on a card opens
-  // the hand zone context menu (mulligan / reveal hand). Card-level right-
-  // click has its own handler on CardSlot.
-  const handleZoneContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!onZoneContextMenu) {
-      return;
-    }
-    const target = e.target as HTMLElement;
-    if (target.closest('[data-card-id]')) {
-      return;
-    }
-    onZoneContextMenu(e);
-  };
-
-  return { cards, setNodeRef, isOver, handleZoneContextMenu };
-}
diff --git a/webclient/src/components/Game/OpponentSelector/OpponentSelector.css b/webclient/src/components/Game/OpponentSelector/OpponentSelector.css
deleted file mode 100644
index 8f76f6d80..000000000
--- a/webclient/src/components/Game/OpponentSelector/OpponentSelector.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.opponent-selector {
-  position: absolute;
-  top: 8px;
-  right: 120px;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 10px;
-  background: rgba(10, 18, 37, 0.9);
-  border: 1px solid #1a2b52;
-  border-radius: 4px;
-  color: #e5ecf7;
-}
-
-.opponent-selector__label {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-
-.opponent-selector__select {
-  min-width: 120px;
-  color: #e5ecf7;
-}
diff --git a/webclient/src/components/Game/OpponentSelector/OpponentSelector.spec.tsx b/webclient/src/components/Game/OpponentSelector/OpponentSelector.spec.tsx
deleted file mode 100644
index 310676cad..000000000
--- a/webclient/src/components/Game/OpponentSelector/OpponentSelector.spec.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { render, screen, fireEvent, within } from '@testing-library/react';
-
-import OpponentSelector from './OpponentSelector';
-
-describe('OpponentSelector', () => {
-  it('does not render with fewer than 2 opponents (2-player game)', () => {
-    const { container } = render(
-      <OpponentSelector
-        opponents={[{ playerId: 2, name: 'Solo' }]}
-        selectedPlayerId={2}
-        onSelect={vi.fn()}
-      />,
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders with 2+ opponents', () => {
-    render(
-      <OpponentSelector
-        opponents={[
-          { playerId: 2, name: 'Alice' },
-          { playerId: 3, name: 'Bob' },
-        ]}
-        selectedPlayerId={2}
-        onSelect={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByTestId('opponent-selector')).toBeInTheDocument();
-    expect(screen.getByText('Opponent:')).toBeInTheDocument();
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-  });
-
-  it('fires onSelect with the chosen opponent playerId', () => {
-    const onSelect = vi.fn();
-    render(
-      <OpponentSelector
-        opponents={[
-          { playerId: 2, name: 'Alice' },
-          { playerId: 3, name: 'Bob' },
-          { playerId: 4, name: 'Carol' },
-        ]}
-        selectedPlayerId={2}
-        onSelect={onSelect}
-      />,
-    );
-
-    fireEvent.mouseDown(screen.getByRole('combobox'));
-    const listbox = within(screen.getByRole('listbox'));
-    fireEvent.click(listbox.getByText('Carol'));
-
-    expect(onSelect).toHaveBeenCalledWith(4);
-  });
-});
diff --git a/webclient/src/components/Game/OpponentSelector/OpponentSelector.tsx b/webclient/src/components/Game/OpponentSelector/OpponentSelector.tsx
deleted file mode 100644
index 07a090ff7..000000000
--- a/webclient/src/components/Game/OpponentSelector/OpponentSelector.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Select, MenuItem } from '@mui/material';
-
-import './OpponentSelector.css';
-
-export interface OpponentOption {
-  playerId: number;
-  name: string;
-}
-
-export interface OpponentSelectorProps {
-  opponents: OpponentOption[];
-  selectedPlayerId: number | undefined;
-  onSelect: (playerId: number) => void;
-}
-
-function OpponentSelector({ opponents, selectedPlayerId, onSelect }: OpponentSelectorProps) {
-  if (opponents.length < 2) {
-    return null;
-  }
-
-  return (
-    <div className="opponent-selector" data-testid="opponent-selector">
-      <label className="opponent-selector__label">Opponent:</label>
-      <Select
-        className="opponent-selector__select"
-        size="small"
-        value={selectedPlayerId ?? ''}
-        onChange={(e) => onSelect(Number(e.target.value))}
-      >
-        {opponents.map((o) => (
-          <MenuItem key={o.playerId} value={o.playerId}>
-            {o.name}
-          </MenuItem>
-        ))}
-      </Select>
-    </div>
-  );
-}
-
-export default OpponentSelector;
diff --git a/webclient/src/components/Game/PhaseBar/PhaseBar.css b/webclient/src/components/Game/PhaseBar/PhaseBar.css
deleted file mode 100644
index 72a8896f4..000000000
--- a/webclient/src/components/Game/PhaseBar/PhaseBar.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.phase-bar {
-  width: 56px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 4px 2px;
-  box-sizing: border-box;
-  background: #0a1225;
-  border-right: 1px solid #1a2b52;
-}
-
-.phase-bar__btn-wrap {
-  flex: 0 0 auto;
-  display: flex;
-}
-
-.phase-bar__btn {
-  flex: 1;
-  height: 44px;
-  padding: 0;
-  background: #162445;
-  border: 1px solid #233a68;
-  color: #c8d4ef;
-  font-family: inherit;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  cursor: default;
-  border-radius: 3px;
-}
-
-.phase-bar__btn:disabled {
-  cursor: default;
-  opacity: 0.85;
-}
-
-.phase-bar__btn--active {
-  background: #d48a00;
-  border-color: var(--color-highlight-yellow);
-  color: #1a1100;
-  box-shadow: 0 0 6px var(--color-highlight-yellow-soft);
-}
-
-.phase-bar__btn--pass {
-  background: #3f1a1a;
-  border-color: #5e2828;
-  color: #ffd4d4;
-}
-
-.phase-bar__spacer {
-  flex: 1;
-}
diff --git a/webclient/src/components/Game/PhaseBar/PhaseBar.spec.tsx b/webclient/src/components/Game/PhaseBar/PhaseBar.spec.tsx
deleted file mode 100644
index 89dd3c4ba..000000000
--- a/webclient/src/components/Game/PhaseBar/PhaseBar.spec.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App, Data } from '@app/types';
-
-import { createMockWebClient, makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import PhaseBar from './PhaseBar';
-
-function stateWith(opts: {
-  phase?: number;
-  localPlayerId?: number;
-  activePlayerId?: number;
-  started?: boolean;
-  judge?: boolean;
-} = {}) {
-  const localId = opts.localPlayerId ?? 1;
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          activePhase: opts.phase ?? 0,
-          localPlayerId: localId,
-          activePlayerId: opts.activePlayerId ?? localId,
-          started: opts.started ?? true,
-          judge: opts.judge ?? false,
-          players: {
-            [localId]: makePlayerEntry({
-              properties: makePlayerProperties({ playerId: localId }),
-            }),
-          },
-        }),
-      },
-    },
-  });
-}
-
-describe('PhaseBar', () => {
-  it('renders 11 phase buttons plus PASS', () => {
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith(),
-    });
-
-    const buttons = screen.getByTestId('phase-bar').querySelectorAll('button');
-    expect(buttons).toHaveLength(12);
-    expect(buttons[11].textContent).toBe('PASS TURN');
-  });
-
-  it('renders phases in desktop-Cockatrice order', () => {
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith(),
-    });
-
-    const labels = Array.from(
-      screen.getByTestId('phase-bar').querySelectorAll('button'),
-    ).map((b) => b.textContent);
-    expect(labels.slice(0, 11)).toEqual([
-      'UNTAP', 'UPKP', 'DRAW', 'M1', 'CMBT', 'ATTK',
-      'BLCK', 'DMGE', 'ECMB', 'M2', 'END',
-    ]);
-  });
-
-  it('applies the active modifier only to the button matching activePhase', () => {
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith({ phase: App.Phase.DeclareAttackers }),
-    });
-
-    const active = document.querySelector('.phase-bar__btn--active')!;
-    expect(active.getAttribute('data-phase')).toBe(String(App.Phase.DeclareAttackers));
-    expect(document.querySelectorAll('.phase-bar__btn--active')).toHaveLength(1);
-  });
-
-  it('renders no active button when gameId is undefined', () => {
-    renderWithProviders(<PhaseBar gameId={undefined} />, {
-      preloadedState: makeStoreState({}),
-    });
-    expect(document.querySelectorAll('.phase-bar__btn--active')).toHaveLength(0);
-  });
-
-  it('enables buttons when the local player is the active player and the game has started', () => {
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith({ started: true }),
-    });
-
-    const buttons = screen.getByTestId('phase-bar').querySelectorAll('button');
-    buttons.forEach((b) => expect(b).not.toBeDisabled());
-  });
-
-  it('disables every button when the game has not started', () => {
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith({ started: false }),
-    });
-
-    const buttons = screen.getByTestId('phase-bar').querySelectorAll('button');
-    buttons.forEach((b) => expect(b).toBeDisabled());
-  });
-
-  it('disables every button when the local player is not the active player (non-judge)', () => {
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith({
-        localPlayerId: 1,
-        activePlayerId: 2,
-      }),
-    });
-
-    const buttons = screen.getByTestId('phase-bar').querySelectorAll('button');
-    buttons.forEach((b) => expect(b).toBeDisabled());
-  });
-
-  it('enables buttons for a judge regardless of active player (matches desktop)', () => {
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith({
-        localPlayerId: 1,
-        activePlayerId: 2,
-        judge: true,
-      }),
-    });
-
-    const buttons = screen.getByTestId('phase-bar').querySelectorAll('button');
-    buttons.forEach((b) => expect(b).not.toBeDisabled());
-  });
-
-  it('dispatches setActivePhase when a phase button is clicked', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith(),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByText('ATTK'));
-
-    expect(webClient.request.game.setActivePhase).toHaveBeenCalledWith(1, {
-      phase: App.Phase.DeclareAttackers,
-    });
-  });
-
-  it('dispatches nextTurn when PASS is clicked', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<PhaseBar gameId={1} />, {
-      preloadedState: stateWith(),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByText('PASS TURN'));
-
-    expect(webClient.request.game.nextTurn).toHaveBeenCalledWith(1);
-  });
-
-  describe('desktop double-click built-ins (phases_toolbar.cpp)', () => {
-    function stateWithTapped(cards: ReturnType<typeof makeCard>[]) {
-      return makeStoreState({
-        games: {
-          games: {
-            1: makeGameEntry({
-              activePhase: App.Phase.Untap,
-              localPlayerId: 1,
-              activePlayerId: 1,
-              started: true,
-              players: {
-                1: makePlayerEntry({
-                  properties: makePlayerProperties({ playerId: 1 }),
-                  zones: {
-                    table: makeZoneEntry({ name: 'table', cards, cardCount: cards.length }),
-                  },
-                }),
-              },
-            }),
-          },
-        },
-      });
-    }
-
-    it('double-click on UNTAP dispatches setCardAttr AttrTapped=0 for every tapped card', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PhaseBar gameId={1} />, {
-        preloadedState: stateWithTapped([
-          makeCard({ id: 1, tapped: true }),
-          makeCard({ id: 2, tapped: false }),
-          makeCard({ id: 3, tapped: true }),
-        ]),
-        webClient,
-      });
-
-      fireEvent.doubleClick(screen.getByText('UNTAP'));
-
-      expect(webClient.request.game.setCardAttr).toHaveBeenCalledTimes(2);
-      expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-        zone: 'table',
-        cardId: 1,
-        attribute: Data.CardAttribute.AttrTapped,
-        attrValue: '0',
-      });
-      expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-        zone: 'table',
-        cardId: 3,
-        attribute: Data.CardAttribute.AttrTapped,
-        attrValue: '0',
-      });
-    });
-
-    it('double-click on UNTAP is a no-op when no cards are tapped', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PhaseBar gameId={1} />, {
-        preloadedState: stateWithTapped([makeCard({ id: 1, tapped: false })]),
-        webClient,
-      });
-
-      fireEvent.doubleClick(screen.getByText('UNTAP'));
-
-      expect(webClient.request.game.setCardAttr).not.toHaveBeenCalled();
-    });
-
-    it('double-click on DRAW dispatches drawCards({ number: 1 })', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PhaseBar gameId={1} />, {
-        preloadedState: stateWith(),
-        webClient,
-      });
-
-      fireEvent.doubleClick(screen.getByText('DRAW'));
-
-      expect(webClient.request.game.drawCards).toHaveBeenCalledWith(1, { number: 1 });
-    });
-
-    it('double-click does nothing when the local player is not active', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PhaseBar gameId={1} />, {
-        preloadedState: stateWith({ localPlayerId: 1, activePlayerId: 2 }),
-        webClient,
-      });
-
-      fireEvent.doubleClick(screen.getByText('UNTAP'));
-      fireEvent.doubleClick(screen.getByText('DRAW'));
-
-      expect(webClient.request.game.setCardAttr).not.toHaveBeenCalled();
-      expect(webClient.request.game.drawCards).not.toHaveBeenCalled();
-    });
-
-    it('double-click on other phases (UPKP, M1, etc.) does not fire any built-in', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PhaseBar gameId={1} />, {
-        preloadedState: stateWith(),
-        webClient,
-      });
-
-      fireEvent.doubleClick(screen.getByText('UPKP'));
-      fireEvent.doubleClick(screen.getByText('M1'));
-      fireEvent.doubleClick(screen.getByText('END'));
-
-      expect(webClient.request.game.setCardAttr).not.toHaveBeenCalled();
-      expect(webClient.request.game.drawCards).not.toHaveBeenCalled();
-    });
-  });
-});
diff --git a/webclient/src/components/Game/PhaseBar/PhaseBar.tsx b/webclient/src/components/Game/PhaseBar/PhaseBar.tsx
deleted file mode 100644
index 1b0ddcfe4..000000000
--- a/webclient/src/components/Game/PhaseBar/PhaseBar.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import Tooltip from '@mui/material/Tooltip';
-
-import { App } from '@app/types';
-import { cx } from '@app/utils';
-
-import { usePhaseBar } from './usePhaseBar';
-
-import './PhaseBar.css';
-
-export interface PhaseBarProps {
-  gameId: number | undefined;
-}
-
-// Abbreviated phase badges plus full tooltip titles. Desktop uses full
-// words in the horizontal toolbar; we shorten for the vertical strip but
-// keep the full text available on hover per the tooltip deferrable.
-const PHASE_LABELS: ReadonlyArray<{
-  phase: App.Phase;
-  label: string;
-  title: string;
-  /** Desktop phase buttons wire "Untap All" to phase 0 double-click and "Draw a Card" to phase 2 double-click. */
-  builtInOnDoubleClick?: 'untapAll' | 'drawCard';
-}> = [
-  { phase: App.Phase.Untap, label: 'UNTAP', title: 'Untap step (double-click: untap all)', builtInOnDoubleClick: 'untapAll' },
-  { phase: App.Phase.Upkeep, label: 'UPKP', title: 'Upkeep step' },
-  { phase: App.Phase.Draw, label: 'DRAW', title: 'Draw step (double-click: draw a card)', builtInOnDoubleClick: 'drawCard' },
-  { phase: App.Phase.FirstMain, label: 'M1', title: 'First main phase' },
-  { phase: App.Phase.BeginCombat, label: 'CMBT', title: 'Beginning of combat' },
-  { phase: App.Phase.DeclareAttackers, label: 'ATTK', title: 'Declare attackers' },
-  { phase: App.Phase.DeclareBlockers, label: 'BLCK', title: 'Declare blockers' },
-  { phase: App.Phase.CombatDamage, label: 'DMGE', title: 'Combat damage' },
-  { phase: App.Phase.EndCombat, label: 'ECMB', title: 'End of combat' },
-  { phase: App.Phase.SecondMain, label: 'M2', title: 'Second main phase' },
-  { phase: App.Phase.EndCleanup, label: 'END', title: 'End step / cleanup' },
-];
-
-function PhaseBar({ gameId }: PhaseBarProps) {
-  const { activePhase, canAdvance, handlePhaseClick, handlePass, handleUntapAll, handleDrawOne } =
-    usePhaseBar(gameId);
-
-  const onDoubleClickFor = (kind: 'untapAll' | 'drawCard' | undefined) => {
-    if (kind === 'untapAll') {
-      return handleUntapAll;
-    }
-    if (kind === 'drawCard') {
-      return handleDrawOne;
-    }
-    return undefined;
-  };
-
-  return (
-    <nav className="phase-bar" data-testid="phase-bar" aria-label="Turn phases">
-      {PHASE_LABELS.map(({ phase, label, title, builtInOnDoubleClick }) => {
-        const isActive = phase === activePhase;
-        return (
-          <Tooltip key={phase} title={title} placement="right" enterDelay={500}>
-            {/* span wrapper: MUI Tooltip can't attach listeners to a disabled button. */}
-            <span className="phase-bar__btn-wrap">
-              <button
-                type="button"
-                className={cx('phase-bar__btn', { 'phase-bar__btn--active': isActive })}
-                data-phase={phase}
-                disabled={!canAdvance}
-                onClick={() => handlePhaseClick(phase)}
-                onDoubleClick={onDoubleClickFor(builtInOnDoubleClick)}
-              >
-                {label}
-              </button>
-            </span>
-          </Tooltip>
-        );
-      })}
-      <div className="phase-bar__spacer" />
-      <Tooltip title="Pass to the next turn" placement="right" enterDelay={500}>
-        <span className="phase-bar__btn-wrap">
-          <button
-            type="button"
-            className="phase-bar__btn phase-bar__btn--pass"
-            disabled={!canAdvance}
-            onClick={handlePass}
-          >
-            PASS TURN
-          </button>
-        </span>
-      </Tooltip>
-    </nav>
-  );
-}
-
-export default PhaseBar;
diff --git a/webclient/src/components/Game/PhaseBar/usePhaseBar.ts b/webclient/src/components/Game/PhaseBar/usePhaseBar.ts
deleted file mode 100644
index 5a25f38e4..000000000
--- a/webclient/src/components/Game/PhaseBar/usePhaseBar.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useCurrentGame, useWebClient } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-import { App, Data } from '@app/types';
-
-export interface PhaseBar {
-  activePhase: App.Phase | undefined;
-  canAdvance: boolean;
-  handlePhaseClick: (phase: App.Phase) => void;
-  handlePass: () => void;
-  handleUntapAll: () => void;
-  handleDrawOne: () => void;
-}
-
-export function usePhaseBar(gameId: number | undefined): PhaseBar {
-  const webClient = useWebClient();
-  const { game, isJudge, isStarted } = useCurrentGame(gameId);
-  const activePhase = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getActivePhase(state, gameId) : undefined,
-  );
-  const localPlayerId = game?.localPlayerId;
-  const tableCards = useAppSelector((state) =>
-    gameId != null && localPlayerId != null
-      ? GameSelectors.getCards(state, gameId, localPlayerId, App.ZoneName.TABLE)
-      : undefined,
-  );
-
-  // Desktop: only the active player (or a judge) can advance the phase.
-  const canAdvance =
-    gameId != null &&
-    game != null &&
-    isStarted &&
-    (isJudge || game.activePlayerId === game.localPlayerId);
-
-  const handlePhaseClick = (phase: App.Phase) => {
-    if (!canAdvance || gameId == null) {
-      return;
-    }
-    webClient.request.game.setActivePhase(gameId, { phase });
-  };
-
-  const handlePass = () => {
-    if (!canAdvance || gameId == null) {
-      return;
-    }
-    webClient.request.game.nextTurn(gameId);
-  };
-
-  // Desktop's untap-step double-click fires "Untap All" on the local player's
-  // table zone (cockatrice/src/game/player/player_actions.cpp actUntapAll).
-  // We replicate by sending one setCardAttr per tapped card; there is no
-  // batch variant on the wire.
-  const handleUntapAll = () => {
-    if (!canAdvance || gameId == null || !tableCards) {
-      return;
-    }
-    for (const card of tableCards) {
-      if (card.tapped) {
-        webClient.request.game.setCardAttr(gameId, {
-          zone: App.ZoneName.TABLE,
-          cardId: card.id,
-          attribute: Data.CardAttribute.AttrTapped,
-          attrValue: '0',
-        });
-      }
-    }
-  };
-
-  const handleDrawOne = () => {
-    if (!canAdvance || gameId == null) {
-      return;
-    }
-    webClient.request.game.drawCards(gameId, { number: 1 });
-  };
-
-  return { activePhase, canAdvance, handlePhaseClick, handlePass, handleUntapAll, handleDrawOne };
-}
diff --git a/webclient/src/components/Game/PlayerBoard/PlayerBoard.css b/webclient/src/components/Game/PlayerBoard/PlayerBoard.css
deleted file mode 100644
index 0d53ce60e..000000000
--- a/webclient/src/components/Game/PlayerBoard/PlayerBoard.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.player-board {
-  display: grid;
-  grid-template-columns: 160px minmax(0, 1fr) 110px;
-  height: 100%;
-  min-height: 0;
-  background: #0a1225;
-  border-bottom: 2px solid #1a2b52;
-}
-
-.player-board--mirrored {
-  border-bottom: none;
-  border-top: 2px solid #1a2b52;
-}
diff --git a/webclient/src/components/Game/PlayerBoard/PlayerBoard.spec.tsx b/webclient/src/components/Game/PlayerBoard/PlayerBoard.spec.tsx
deleted file mode 100644
index 2a76fc278..000000000
--- a/webclient/src/components/Game/PlayerBoard/PlayerBoard.spec.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { screen } from '@testing-library/react';
-import { App } from '@app/types';
-
-// Block Battlefield's Dexie-backed useSettings from firing an async settle
-// after mount (would produce an unwrapped React state update).
-vi.mock('../../../hooks/useSettings');
-
-import { makeStoreState, renderWithProviders, makeUser } from '../../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import PlayerBoard from './PlayerBoard';
-
-function buildState() {
-  const table = makeZoneEntry({
-    name: App.ZoneName.TABLE,
-    cards: [
-      makeCard({ id: 1, name: 'Row0-Card', x: 0, y: 0 }),
-      makeCard({ id: 2, name: 'Row2-Card', x: 0, y: 2 }),
-    ],
-    cardCount: 2,
-  });
-  const hand = makeZoneEntry({ name: App.ZoneName.HAND, cardCount: 0 });
-  const deck = makeZoneEntry({ name: App.ZoneName.DECK, cardCount: 60 });
-  const player = makePlayerEntry({
-    properties: makePlayerProperties({
-      playerId: 1,
-      userInfo: makeUser({ name: 'Trajer' }),
-    }),
-    zones: {
-      [App.ZoneName.TABLE]: table,
-      [App.ZoneName.HAND]: hand,
-      [App.ZoneName.DECK]: deck,
-    },
-  });
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({ localPlayerId: 1, players: { 1: player } }),
-      },
-    },
-  });
-}
-
-describe('PlayerBoard', () => {
-  it('renders the info panel, battlefield, and zone rail in order', () => {
-    renderWithProviders(<PlayerBoard gameId={1} playerId={1} />, {
-      preloadedState: buildState(),
-    });
-
-    expect(screen.getByText('Trajer')).toBeInTheDocument();
-    expect(screen.getByTestId('battlefield')).toBeInTheDocument();
-    expect(screen.getByTestId('zone-rail')).toBeInTheDocument();
-  });
-
-  it('passes mirrored=false by default so the battlefield uses natural row order', () => {
-    const { container } = renderWithProviders(
-      <PlayerBoard gameId={1} playerId={1} />,
-      { preloadedState: buildState() },
-    );
-
-    const rowsInOrder = Array.from(
-      container.querySelectorAll('.battlefield__row'),
-    ).map((r) => r.getAttribute('data-row'));
-    expect(rowsInOrder).toEqual(['0', '1', '2']);
-    expect(container.querySelector('.card-slot--inverted')).toBeNull();
-  });
-
-  it('propagates mirrored=true → battlefield reverses row order and cards are inverted', () => {
-    const { container } = renderWithProviders(
-      <PlayerBoard gameId={1} playerId={1} mirrored />,
-      { preloadedState: buildState() },
-    );
-
-    const rowsInOrder = Array.from(
-      container.querySelectorAll('.battlefield__row'),
-    ).map((r) => r.getAttribute('data-row'));
-    expect(rowsInOrder).toEqual(['2', '1', '0']);
-    expect(container.querySelectorAll('.card-slot--inverted').length).toBeGreaterThan(0);
-  });
-
-  it('keeps the info panel on the left and zone rail on the right in mirrored mode', () => {
-    const { container } = renderWithProviders(
-      <PlayerBoard gameId={1} playerId={1} mirrored />,
-      { preloadedState: buildState() },
-    );
-
-    const children = Array.from(container.querySelector('.player-board')!.children);
-    expect(children[0]).toHaveClass('player-info-panel');
-    expect(children[1]).toHaveClass('battlefield');
-    expect(children[2]).toHaveClass('zone-rail');
-  });
-
-  it('adds the --mirrored CSS modifier only when mirrored', () => {
-    const { container, rerender } = renderWithProviders(
-      <PlayerBoard gameId={1} playerId={1} />,
-      { preloadedState: buildState() },
-    );
-
-    expect(container.querySelector('.player-board--mirrored')).toBeNull();
-    rerender(<PlayerBoard gameId={1} playerId={1} mirrored />);
-    expect(container.querySelector('.player-board--mirrored')).not.toBeNull();
-  });
-});
diff --git a/webclient/src/components/Game/PlayerBoard/PlayerBoard.tsx b/webclient/src/components/Game/PlayerBoard/PlayerBoard.tsx
deleted file mode 100644
index 6552dac90..000000000
--- a/webclient/src/components/Game/PlayerBoard/PlayerBoard.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { Data } from '@app/types';
-import { cx } from '@app/utils';
-
-import Battlefield from '../Battlefield/Battlefield';
-import PlayerInfoPanel from '../PlayerInfoPanel/PlayerInfoPanel';
-import ZoneRail from '../ZoneRail/ZoneRail';
-
-import './PlayerBoard.css';
-
-export interface PlayerBoardProps {
-  gameId: number;
-  playerId: number;
-  mirrored?: boolean;
-  canAct?: boolean;
-  canEditCounters?: boolean;
-  arrowSourceKey?: string | null;
-  onCardHover?: (card: Data.ServerInfo_Card) => void;
-  onCardClick?: (playerId: number, zone: string, card: Data.ServerInfo_Card) => void;
-  onCardContextMenu?: (card: Data.ServerInfo_Card, event: React.MouseEvent) => void;
-  onCardDoubleClick?: (card: Data.ServerInfo_Card) => void;
-  onZoneClick?: (playerId: number, zoneName: string) => void;
-  onZoneContextMenu?: (playerId: number, zoneName: string, event: React.MouseEvent) => void;
-  onRequestCreateCounter?: () => void;
-  onPlayerContextMenu?: (event: React.MouseEvent) => void;
-}
-
-function PlayerBoard({
-  gameId,
-  playerId,
-  mirrored = false,
-  canAct = false,
-  canEditCounters = false,
-  arrowSourceKey = null,
-  onCardHover,
-  onCardClick,
-  onCardContextMenu,
-  onCardDoubleClick,
-  onZoneClick,
-  onZoneContextMenu,
-  onRequestCreateCounter,
-  onPlayerContextMenu,
-}: PlayerBoardProps) {
-  return (
-    <div
-      className={cx('player-board', { 'player-board--mirrored': mirrored })}
-      data-testid={`player-board-${playerId}`}
-    >
-      <PlayerInfoPanel
-        gameId={gameId}
-        playerId={playerId}
-        canEdit={canEditCounters}
-        onRequestCreateCounter={onRequestCreateCounter}
-        onContextMenu={onPlayerContextMenu}
-      />
-      <Battlefield
-        gameId={gameId}
-        playerId={playerId}
-        mirrored={mirrored}
-        canAct={canAct}
-        arrowSourceKey={arrowSourceKey}
-        onCardHover={onCardHover}
-        onCardClick={onCardClick}
-        onCardContextMenu={onCardContextMenu}
-        onCardDoubleClick={onCardDoubleClick}
-      />
-      <ZoneRail
-        gameId={gameId}
-        playerId={playerId}
-        onCardHover={onCardHover}
-        onZoneClick={onZoneClick}
-        onZoneContextMenu={onZoneContextMenu}
-      />
-    </div>
-  );
-}
-
-export default PlayerBoard;
diff --git a/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.css b/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.css
deleted file mode 100644
index 574d9d480..000000000
--- a/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.player-context-menu .MuiMenuItem-root {
-  font-size: 13px;
-}
diff --git a/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.spec.tsx b/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.spec.tsx
deleted file mode 100644
index f6fe7e996..000000000
--- a/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.spec.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { renderWithProviders } from '../../../__test-utils__';
-import PlayerContextMenu from './PlayerContextMenu';
-
-const NOOP = () => {};
-const DEFAULT_PROPS = {
-  isOpen: true,
-  anchorPosition: { top: 10, left: 10 },
-  onClose: NOOP,
-  onRequestCreateToken: NOOP,
-  onRequestViewSideboard: NOOP,
-};
-
-describe('PlayerContextMenu', () => {
-  it('fires onRequestCreateToken and closes when "Create token…" is clicked', () => {
-    const onRequestCreateToken = vi.fn();
-    const onClose = vi.fn();
-
-    renderWithProviders(
-      <PlayerContextMenu
-        {...DEFAULT_PROPS}
-        onClose={onClose}
-        onRequestCreateToken={onRequestCreateToken}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('menuitem', { name: /create token/i }));
-
-    expect(onRequestCreateToken).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('fires onRequestViewSideboard and closes when "View sideboard…" is clicked', () => {
-    const onRequestViewSideboard = vi.fn();
-    const onClose = vi.fn();
-
-    renderWithProviders(
-      <PlayerContextMenu
-        {...DEFAULT_PROPS}
-        onClose={onClose}
-        onRequestViewSideboard={onRequestViewSideboard}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('menuitem', { name: /view sideboard/i }));
-
-    expect(onRequestViewSideboard).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('does not render menu items when closed', () => {
-    renderWithProviders(
-      <PlayerContextMenu
-        {...DEFAULT_PROPS}
-        isOpen={false}
-        anchorPosition={null}
-      />,
-    );
-
-    expect(screen.queryByRole('menuitem')).not.toBeInTheDocument();
-  });
-});
diff --git a/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.tsx b/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.tsx
deleted file mode 100644
index f175c84fa..000000000
--- a/webclient/src/components/Game/PlayerContextMenu/PlayerContextMenu.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Divider from '@mui/material/Divider';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-
-import './PlayerContextMenu.css';
-
-export interface PlayerContextMenuProps {
-  isOpen: boolean;
-  anchorPosition: { top: number; left: number } | null;
-  onClose: () => void;
-  onRequestCreateToken: () => void;
-  onRequestViewSideboard: () => void;
-}
-
-function PlayerContextMenu({
-  isOpen,
-  anchorPosition,
-  onClose,
-  onRequestCreateToken,
-  onRequestViewSideboard,
-}: PlayerContextMenuProps) {
-  const handleCreateToken = () => {
-    onRequestCreateToken();
-    onClose();
-  };
-
-  const handleViewSideboard = () => {
-    onRequestViewSideboard();
-    onClose();
-  };
-
-  return (
-    <Menu
-      open={isOpen}
-      onClose={onClose}
-      anchorReference="anchorPosition"
-      anchorPosition={anchorPosition ?? undefined}
-      data-testid="player-context-menu"
-      className="player-context-menu"
-    >
-      <MenuItem onClick={handleCreateToken}>Create token…</MenuItem>
-      <Divider />
-      <MenuItem onClick={handleViewSideboard}>View sideboard…</MenuItem>
-    </Menu>
-  );
-}
-
-export default PlayerContextMenu;
diff --git a/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.css b/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.css
deleted file mode 100644
index 8a5500760..000000000
--- a/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.css
+++ /dev/null
@@ -1,267 +0,0 @@
-.player-info-panel {
-  width: 160px;
-  height: 100%;
-  padding: 8px 10px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  background: #0a1225;
-  border-right: 1px solid #1a2b52;
-  color: #e5ecf7;
-  font-size: 12px;
-}
-
-.player-info-panel--empty {
-  opacity: 0.4;
-}
-
-.player-info-panel__header {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  margin-bottom: 6px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid #1a2b52;
-}
-
-.player-info-panel__host-badge {
-  color: var(--color-highlight-yellow);
-  font-size: 13px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.player-info-panel__name {
-  flex: 1;
-  font-weight: 700;
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.player-info-panel__sideboard-lock {
-  font-size: 11px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.player-info-panel__ping {
-  color: #7f90b5;
-  font-size: 10px;
-}
-
-.player-info-panel__flag {
-  align-self: flex-start;
-  padding: 1px 6px;
-  background: #6a2626;
-  color: #ffdede;
-  font-size: 10px;
-  font-weight: 600;
-  border-radius: 3px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  margin-bottom: 4px;
-}
-
-.player-info-panel__flag--ready {
-  background: #22562b;
-  color: #dfffe3;
-}
-
-/* Life display: prominent box above the regular counter list. Mirrors
-   desktop's PlayerTarget sizing where Life renders at ~2x other counters. */
-.player-info-panel__life {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto auto;
-  grid-column-gap: 6px;
-  align-items: center;
-  margin: 2px 0 10px;
-  padding: 6px 10px 4px;
-  background: #0f1a35;
-  border: 2px solid #4a5d87;
-  border-radius: 6px;
-  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
-}
-
-.player-info-panel__life-btn {
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  background: #17223d;
-  border: 1px solid #355090;
-  color: #dae3f7;
-  font: inherit;
-  font-size: 16px;
-  line-height: 1;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.player-info-panel__life-btn:hover {
-  background: #223060;
-  color: #fff;
-}
-
-.player-info-panel__life-value,
-.player-info-panel__life-input {
-  grid-row: 1;
-  font-size: 28px;
-  font-weight: 800;
-  line-height: 1;
-  color: #ffffff;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-.player-info-panel__life-input {
-  width: 72px;
-  height: 32px;
-  padding: 0 6px;
-  background: #17223d;
-  border: 1px solid #355090;
-  border-radius: 3px;
-}
-
-.player-info-panel__life-value--editable {
-  cursor: text;
-  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
-}
-
-.player-info-panel__life-value--editable:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.player-info-panel__life-label {
-  grid-row: 2;
-  grid-column: 1 / -1;
-  text-align: center;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 2px;
-  color: #7f90b5;
-  margin-top: 4px;
-}
-
-.player-info-panel__counters {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.player-info-panel__counter {
-  display: grid;
-  grid-template-columns: 12px 1fr auto auto auto auto;
-  align-items: center;
-  gap: 3px;
-  padding: 2px 0;
-}
-
-.player-info-panel__counter--empty {
-  color: #5a6a8a;
-  font-style: italic;
-  grid-template-columns: 1fr;
-}
-
-.player-info-panel__swatch {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.player-info-panel__counter-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.player-info-panel__counter-value {
-  font-weight: 700;
-  color: #fff;
-  min-width: 22px;
-  text-align: right;
-  padding: 0 4px;
-}
-
-.player-info-panel__counter-value--editable {
-  cursor: text;
-  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
-}
-
-.player-info-panel__counter-value--editable:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.player-info-panel__counter-input {
-  width: 36px;
-  height: 18px;
-  padding: 0 4px;
-  box-sizing: border-box;
-  background: #17223d;
-  border: 1px solid #355090;
-  color: #fff;
-  font: inherit;
-  font-weight: 700;
-  text-align: right;
-  border-radius: 2px;
-}
-
-.player-info-panel__counter-input::-webkit-outer-spin-button,
-.player-info-panel__counter-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.player-info-panel__counter-btn {
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  background: #17223d;
-  border: 1px solid #233a68;
-  color: #c8d4ef;
-  font: inherit;
-  font-size: 13px;
-  line-height: 1;
-  border-radius: 2px;
-  cursor: pointer;
-}
-
-.player-info-panel__counter-btn:hover {
-  background: #223060;
-  border-color: #355090;
-  color: #fff;
-}
-
-.player-info-panel__counter-btn--del {
-  color: #f7a3a3;
-  border-color: #5e2828;
-  background: #3f1a1a;
-}
-
-.player-info-panel__counter-btn--del:hover {
-  background: #5e2828;
-  color: #fff;
-}
-
-.player-info-panel__new-counter {
-  margin-top: 8px;
-  padding: 3px 6px;
-  background: transparent;
-  border: 1px dashed #355090;
-  color: #8ab0ff;
-  font: inherit;
-  font-size: 11px;
-  border-radius: 3px;
-  cursor: pointer;
-  text-align: center;
-}
-
-.player-info-panel__new-counter:hover {
-  background: rgba(138, 176, 255, 0.08);
-  color: #b8d0ff;
-}
diff --git a/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.spec.tsx b/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.spec.tsx
deleted file mode 100644
index 1ff41d5c1..000000000
--- a/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.spec.tsx
+++ /dev/null
@@ -1,348 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { create } from '@bufbuild/protobuf';
-import { Data } from '@app/types';
-
-import { createMockWebClient, makeStoreState, renderWithProviders, makeUser } from '../../../__test-utils__';
-import {
-  makeCounter,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-} from '../../../store/game/__mocks__/fixtures';
-import PlayerInfoPanel from './PlayerInfoPanel';
-
-function statefulPlayer(
-  overrides: Partial<Parameters<typeof makePlayerEntry>[0]> = {},
-) {
-  const player = makePlayerEntry({
-    properties: makePlayerProperties({
-      playerId: 1,
-      userInfo: makeUser({ name: 'Pumuky' }),
-      pingSeconds: 42,
-    }),
-    ...overrides,
-  });
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: 1,
-          players: { 1: player },
-        }),
-      },
-    },
-  });
-}
-
-describe('PlayerInfoPanel', () => {
-  it('renders the player name and ping', () => {
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: statefulPlayer(),
-    });
-
-    expect(screen.getByText('Pumuky')).toBeInTheDocument();
-    expect(screen.getByText('42s')).toBeInTheDocument();
-  });
-
-  it('falls back to "(unknown)" when userInfo is absent', () => {
-    const player = makePlayerEntry({
-      properties: makePlayerProperties({ playerId: 1 }),
-    });
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: makeStoreState({
-        games: { games: { 1: makeGameEntry({ players: { 1: player } }) } },
-      }),
-    });
-
-    expect(screen.getByText('(unknown)')).toBeInTheDocument();
-  });
-
-  it('renders Life in a prominent block above the rest, with "LIFE" label', () => {
-    const life = makeCounter({
-      id: 1,
-      name: 'Life',
-      count: 20,
-      counterColor: create(Data.colorSchema, { r: 255, g: 255, b: 255, a: 255 }),
-    });
-    const white = makeCounter({
-      id: 2,
-      name: 'W',
-      count: 3,
-      counterColor: create(Data.colorSchema, { r: 250, g: 245, b: 220, a: 255 }),
-    });
-
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: statefulPlayer({
-        counters: { 1: life, 2: white },
-      }),
-    });
-
-    expect(screen.getByTestId('life-1')).toHaveTextContent('20');
-    expect(screen.getByText('LIFE')).toBeInTheDocument();
-    // Other counters still render in the list with their name.
-    expect(screen.getByText('W')).toBeInTheDocument();
-    expect(screen.getByText('3')).toBeInTheDocument();
-  });
-
-  it('shows an empty-state line when no counters exist', () => {
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: statefulPlayer({ counters: {} }),
-    });
-
-    expect(screen.getByText(/no counters/i)).toBeInTheDocument();
-  });
-
-  it('shows the Conceded flag when player has conceded', () => {
-    const player = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Quitter' }),
-        conceded: true,
-      }),
-    });
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: makeStoreState({
-        games: { games: { 1: makeGameEntry({ players: { 1: player } }) } },
-      }),
-    });
-
-    expect(screen.getByText(/conceded/i)).toBeInTheDocument();
-  });
-
-  it('shows the Ready flag when readyStart is true and player has not conceded', () => {
-    const player = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Waiting' }),
-        readyStart: true,
-      }),
-    });
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: makeStoreState({
-        games: { games: { 1: makeGameEntry({ players: { 1: player } }) } },
-      }),
-    });
-
-    expect(screen.getByText(/ready/i)).toBeInTheDocument();
-  });
-
-  it('renders an empty panel when the player is missing', () => {
-    const { container } = renderWithProviders(
-      <PlayerInfoPanel gameId={1} playerId={999} />,
-      { preloadedState: statefulPlayer() },
-    );
-
-    expect(container.querySelector('.player-info-panel--empty')).not.toBeNull();
-    expect(screen.queryByText('Pumuky')).not.toBeInTheDocument();
-  });
-
-  it('renders a host badge when the player is the game host', () => {
-    const player = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Host' }),
-      }),
-    });
-    const { container } = renderWithProviders(
-      <PlayerInfoPanel gameId={1} playerId={1} />,
-      {
-        preloadedState: makeStoreState({
-          games: {
-            games: {
-              1: makeGameEntry({ hostId: 1, players: { 1: player } }),
-            },
-          },
-        }),
-      },
-    );
-
-    expect(container.querySelector('.player-info-panel__host-badge')).not.toBeNull();
-  });
-
-  it('omits the host badge when the player is not the host', () => {
-    const player = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 2,
-        userInfo: makeUser({ name: 'Guest' }),
-      }),
-    });
-    const { container } = renderWithProviders(
-      <PlayerInfoPanel gameId={1} playerId={2} />,
-      {
-        preloadedState: makeStoreState({
-          games: {
-            games: {
-              1: makeGameEntry({ hostId: 1, players: { 2: player } }),
-            },
-          },
-        }),
-      },
-    );
-
-    expect(container.querySelector('.player-info-panel__host-badge')).toBeNull();
-  });
-
-  // Sideboard lock indicator — mirrors desktop's `DeckViewContainer`
-  // lock UI. The webclient surfaces it on the info panel since we don't
-  // have a persistent deck view.
-  it('renders a 🔒 indicator when player.properties.sideboardLocked is true', () => {
-    const player = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'P1' }),
-        sideboardLocked: true,
-      }),
-    });
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: makeStoreState({
-        games: { games: { 1: makeGameEntry({ players: { 1: player } }) } },
-      }),
-    });
-
-    expect(screen.getByLabelText('sideboard locked')).toBeInTheDocument();
-  });
-
-  it('omits the lock indicator when sideboardLocked is false', () => {
-    const player = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'P1' }),
-        sideboardLocked: false,
-      }),
-    });
-    renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-      preloadedState: makeStoreState({
-        games: { games: { 1: makeGameEntry({ players: { 1: player } }) } },
-      }),
-    });
-
-    expect(screen.queryByLabelText('sideboard locked')).not.toBeInTheDocument();
-  });
-
-  describe('editable counters', () => {
-    const life = makeCounter({
-      id: 1,
-      name: 'Life',
-      count: 20,
-      counterColor: create(Data.colorSchema, { r: 255, g: 255, b: 255, a: 255 }),
-    });
-
-    it('does not render counter controls when canEdit is false (default)', () => {
-      renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} />, {
-        preloadedState: statefulPlayer({ counters: { 1: life } }),
-      });
-
-      expect(screen.queryByLabelText('increment Life')).not.toBeInTheDocument();
-      expect(screen.queryByLabelText('decrement Life')).not.toBeInTheDocument();
-      expect(screen.queryByLabelText('delete Life')).not.toBeInTheDocument();
-    });
-
-    it('renders +/− controls on the Life block when canEdit is true (Life has no delete — desktop parity)', () => {
-      renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} canEdit />, {
-        preloadedState: statefulPlayer({ counters: { 1: life } }),
-      });
-
-      expect(screen.getByLabelText('increment Life')).toBeInTheDocument();
-      expect(screen.getByLabelText('decrement Life')).toBeInTheDocument();
-      expect(screen.queryByLabelText('delete Life')).not.toBeInTheDocument();
-    });
-
-    it('dispatches incCounter(+1) when + is clicked', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} canEdit />, {
-        preloadedState: statefulPlayer({ counters: { 1: life } }),
-        webClient,
-      });
-
-      fireEvent.click(screen.getByLabelText('increment Life'));
-
-      expect(webClient.request.game.incCounter).toHaveBeenCalledWith(1, { counterId: 1, delta: 1 });
-    });
-
-    it('dispatches incCounter(-1) when − is clicked', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} canEdit />, {
-        preloadedState: statefulPlayer({ counters: { 1: life } }),
-        webClient,
-      });
-
-      fireEvent.click(screen.getByLabelText('decrement Life'));
-
-      expect(webClient.request.game.incCounter).toHaveBeenCalledWith(1, { counterId: 1, delta: -1 });
-    });
-
-    it('dispatches delCounter when × is clicked on a non-Life counter', () => {
-      const webClient = createMockWebClient();
-      const mana = makeCounter({
-        id: 2,
-        name: 'W',
-        count: 3,
-        counterColor: create(Data.colorSchema, { r: 255, g: 255, b: 255, a: 255 }),
-      });
-      renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} canEdit />, {
-        preloadedState: statefulPlayer({ counters: { 2: mana } }),
-        webClient,
-      });
-
-      fireEvent.click(screen.getByLabelText('delete W'));
-
-      expect(webClient.request.game.delCounter).toHaveBeenCalledWith(1, { counterId: 2 });
-    });
-
-    it('swaps the value into an input on click and dispatches setCounter on Enter', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} canEdit />, {
-        preloadedState: statefulPlayer({ counters: { 1: life } }),
-        webClient,
-      });
-
-      fireEvent.click(screen.getByText('20'));
-      const input = screen.getByLabelText('set Life') as HTMLInputElement;
-      fireEvent.change(input, { target: { value: '18' } });
-      fireEvent.keyDown(input, { key: 'Enter' });
-
-      expect(webClient.request.game.setCounter).toHaveBeenCalledWith(1, { counterId: 1, value: 18 });
-    });
-
-    it('does not dispatch setCounter when Escape is pressed during inline edit', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<PlayerInfoPanel gameId={1} playerId={1} canEdit />, {
-        preloadedState: statefulPlayer({ counters: { 1: life } }),
-        webClient,
-      });
-
-      fireEvent.click(screen.getByText('20'));
-      const input = screen.getByLabelText('set Life') as HTMLInputElement;
-      fireEvent.change(input, { target: { value: '99' } });
-      fireEvent.keyDown(input, { key: 'Escape' });
-
-      expect(webClient.request.game.setCounter).not.toHaveBeenCalled();
-    });
-
-    it('fires onRequestCreateCounter when "+ New counter" is clicked', () => {
-      const onRequestCreateCounter = vi.fn();
-      renderWithProviders(
-        <PlayerInfoPanel
-          gameId={1}
-          playerId={1}
-          canEdit
-          onRequestCreateCounter={onRequestCreateCounter}
-        />,
-        { preloadedState: statefulPlayer({ counters: { 1: life } }) },
-      );
-
-      fireEvent.click(screen.getByText('+ New counter'));
-
-      expect(onRequestCreateCounter).toHaveBeenCalled();
-    });
-
-    it('does not render the new-counter button when canEdit is false', () => {
-      renderWithProviders(
-        <PlayerInfoPanel gameId={1} playerId={1} onRequestCreateCounter={() => {}} />,
-        { preloadedState: statefulPlayer({ counters: {} }) },
-      );
-
-      expect(screen.queryByText('+ New counter')).not.toBeInTheDocument();
-    });
-  });
-});
diff --git a/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.tsx b/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.tsx
deleted file mode 100644
index a45a0430b..000000000
--- a/webclient/src/components/Game/PlayerInfoPanel/PlayerInfoPanel.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import { cx } from '@app/utils';
-import type { Data } from '@app/types';
-
-import { cssColor, usePlayerInfoPanel } from './usePlayerInfoPanel';
-
-import './PlayerInfoPanel.css';
-
-export interface PlayerInfoPanelProps {
-  gameId: number;
-  playerId: number;
-  canEdit?: boolean;
-  onRequestCreateCounter?: () => void;
-  onContextMenu?: (event: React.MouseEvent) => void;
-}
-
-function PlayerInfoPanel({
-  gameId,
-  playerId,
-  canEdit = false,
-  onRequestCreateCounter,
-  onContextMenu,
-}: PlayerInfoPanelProps) {
-  const {
-    player,
-    isHost,
-    lifeCounter,
-    otherCounters,
-    editingId,
-    editDraft,
-    setEditDraft,
-    beginEdit,
-    commitEdit,
-    cancelEdit,
-    handleIncrement,
-    handleDelete,
-  } = usePlayerInfoPanel({ gameId, playerId });
-
-  if (!player) {
-    return <div className="player-info-panel player-info-panel--empty" />;
-  }
-
-  const name = player.properties.userInfo?.name ?? '(unknown)';
-  const ping = player.properties.pingSeconds ?? 0;
-  const conceded = player.properties.conceded;
-  const ready = player.properties.readyStart;
-  const sideboardLocked = player.properties.sideboardLocked ?? false;
-
-  const renderCounterRow = (c: Data.ServerInfo_Counter) => (
-    <li
-      key={c.id}
-      className="player-info-panel__counter"
-      data-testid={`counter-${c.id}`}
-    >
-      <span
-        className="player-info-panel__swatch"
-        style={{ background: cssColor(c.counterColor) }}
-      />
-      <span className="player-info-panel__counter-name" title={c.name}>{c.name}</span>
-      {canEdit && (
-        <button
-          type="button"
-          className="player-info-panel__counter-btn"
-          aria-label={`decrement ${c.name}`}
-          onClick={() => handleIncrement(c.id, -1)}
-        >
-          −
-        </button>
-      )}
-      {editingId === c.id ? (
-        <input
-          type="number"
-          autoFocus
-          className="player-info-panel__counter-input"
-          value={editDraft}
-          onChange={(e) => setEditDraft(e.target.value)}
-          onBlur={() => commitEdit(c.id)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              commitEdit(c.id);
-            }
-            if (e.key === 'Escape') {
-              cancelEdit();
-            }
-          }}
-          aria-label={`set ${c.name}`}
-        />
-      ) : (
-        <span
-          className={cx('player-info-panel__counter-value', {
-            'player-info-panel__counter-value--editable': canEdit,
-          })}
-          onClick={canEdit ? () => beginEdit(c.id, c.count) : undefined}
-          role={canEdit ? 'button' : undefined}
-          tabIndex={canEdit ? 0 : undefined}
-        >
-          {c.count}
-        </span>
-      )}
-      {canEdit && (
-        <button
-          type="button"
-          className="player-info-panel__counter-btn"
-          aria-label={`increment ${c.name}`}
-          onClick={() => handleIncrement(c.id, +1)}
-        >
-          +
-        </button>
-      )}
-      {canEdit && (
-        <button
-          type="button"
-          className="player-info-panel__counter-btn player-info-panel__counter-btn--del"
-          aria-label={`delete ${c.name}`}
-          onClick={() => handleDelete(c.id)}
-        >
-          ×
-        </button>
-      )}
-    </li>
-  );
-
-  return (
-    <div
-      className="player-info-panel"
-      data-testid={`player-info-${playerId}`}
-      onContextMenu={onContextMenu}
-    >
-      <div className="player-info-panel__header">
-        {isHost && (
-          <span
-            className="player-info-panel__host-badge"
-            aria-label="host"
-            title="Host"
-          >
-            ♛
-          </span>
-        )}
-        <span className="player-info-panel__name">{name}</span>
-        {sideboardLocked && (
-          <span
-            className="player-info-panel__sideboard-lock"
-            aria-label="sideboard locked"
-            title="Sideboard locked"
-          >
-            🔒
-          </span>
-        )}
-        <span className="player-info-panel__ping" title={`ping ${ping}s`}>
-          {ping}s
-        </span>
-      </div>
-
-      {conceded && <div className="player-info-panel__flag">Conceded</div>}
-      {!conceded && ready && <div className="player-info-panel__flag player-info-panel__flag--ready">Ready</div>}
-
-      {lifeCounter && (
-        <div
-          className="player-info-panel__life"
-          data-testid={`life-${playerId}`}
-          style={{ borderColor: cssColor(lifeCounter.counterColor) }}
-        >
-          {canEdit && (
-            <button
-              type="button"
-              className="player-info-panel__life-btn"
-              aria-label="decrement Life"
-              onClick={() => handleIncrement(lifeCounter.id, -1)}
-            >
-              −
-            </button>
-          )}
-          {editingId === lifeCounter.id ? (
-            <input
-              type="number"
-              autoFocus
-              className="player-info-panel__life-input"
-              value={editDraft}
-              onChange={(e) => setEditDraft(e.target.value)}
-              onBlur={() => commitEdit(lifeCounter.id)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  commitEdit(lifeCounter.id);
-                }
-                if (e.key === 'Escape') {
-                  cancelEdit();
-                }
-              }}
-              aria-label="set Life"
-            />
-          ) : (
-            <span
-              className={cx('player-info-panel__life-value', {
-                'player-info-panel__life-value--editable': canEdit,
-              })}
-              onClick={canEdit ? () => beginEdit(lifeCounter.id, lifeCounter.count) : undefined}
-              role={canEdit ? 'button' : undefined}
-              tabIndex={canEdit ? 0 : undefined}
-              aria-label={`Life: ${lifeCounter.count}`}
-            >
-              {lifeCounter.count}
-            </span>
-          )}
-          {canEdit && (
-            <button
-              type="button"
-              className="player-info-panel__life-btn"
-              aria-label="increment Life"
-              onClick={() => handleIncrement(lifeCounter.id, +1)}
-            >
-              +
-            </button>
-          )}
-          <div className="player-info-panel__life-label">LIFE</div>
-        </div>
-      )}
-
-      <ul className="player-info-panel__counters">
-        {otherCounters.length === 0 && !lifeCounter && (
-          <li className="player-info-panel__counter player-info-panel__counter--empty">
-            no counters
-          </li>
-        )}
-        {otherCounters.map(renderCounterRow)}
-      </ul>
-
-      {canEdit && onRequestCreateCounter && (
-        <button
-          type="button"
-          className="player-info-panel__new-counter"
-          onClick={onRequestCreateCounter}
-        >
-          + New counter
-        </button>
-      )}
-    </div>
-  );
-}
-
-export default PlayerInfoPanel;
diff --git a/webclient/src/components/Game/PlayerInfoPanel/usePlayerInfoPanel.ts b/webclient/src/components/Game/PlayerInfoPanel/usePlayerInfoPanel.ts
deleted file mode 100644
index 6229e5718..000000000
--- a/webclient/src/components/Game/PlayerInfoPanel/usePlayerInfoPanel.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useState } from 'react';
-import { useWebClient } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-import type { Data, Enriched } from '@app/types';
-
-export function cssColor(c: { r: number; g: number; b: number; a: number } | undefined): string {
-  if (!c) {
-    return '#666';
-  }
-  return `rgba(${c.r}, ${c.g}, ${c.b}, ${(c.a ?? 255) / 255})`;
-}
-
-// Desktop renders Life larger/bolder than other counters (see
-// cockatrice/src/game/player/player.cpp PlayerTarget sizing). We special-
-// case the counter whose name is exactly 'Life' (case-insensitive) and
-// pull it out of the regular counter list into a prominent life block.
-export function isLifeCounter(c: { name: string }): boolean {
-  return c.name.trim().toLowerCase() === 'life';
-}
-
-export interface PlayerInfoPanel {
-  player: Enriched.PlayerEntry | undefined;
-  isHost: boolean;
-  lifeCounter: Data.ServerInfo_Counter | undefined;
-  otherCounters: Data.ServerInfo_Counter[];
-  editingId: number | null;
-  editDraft: string;
-  setEditDraft: (v: string) => void;
-  beginEdit: (counterId: number, currentValue: number) => void;
-  commitEdit: (counterId: number) => void;
-  cancelEdit: () => void;
-  handleIncrement: (counterId: number, delta: number) => void;
-  handleDelete: (counterId: number) => void;
-}
-
-export interface UsePlayerInfoPanelArgs {
-  gameId: number;
-  playerId: number;
-}
-
-export function usePlayerInfoPanel({
-  gameId,
-  playerId,
-}: UsePlayerInfoPanelArgs): PlayerInfoPanel {
-  const webClient = useWebClient();
-  const player = useAppSelector((state) => GameSelectors.getPlayer(state, gameId, playerId));
-  const counters = useAppSelector((state) => GameSelectors.getCounters(state, gameId, playerId));
-  const hostId = useAppSelector((state) => GameSelectors.getHostId(state, gameId));
-
-  const [editingId, setEditingId] = useState<number | null>(null);
-  const [editDraft, setEditDraft] = useState('');
-
-  const isHost = hostId != null && hostId === playerId;
-  const allCounters = Object.values(counters);
-  const lifeCounter = allCounters.find(isLifeCounter);
-  const otherCounters = allCounters.filter((c) => !isLifeCounter(c));
-
-  const handleIncrement = (counterId: number, delta: number) => {
-    webClient.request.game.incCounter(gameId, { counterId, delta });
-  };
-
-  const handleDelete = (counterId: number) => {
-    webClient.request.game.delCounter(gameId, { counterId });
-  };
-
-  const beginEdit = (counterId: number, currentValue: number) => {
-    setEditingId(counterId);
-    setEditDraft(String(currentValue));
-  };
-
-  const commitEdit = (counterId: number) => {
-    const trimmed = editDraft.trim();
-    // Empty input cancels the edit (desktop inline edits treat blur-with-
-    // no-change and blur-with-empty-string identically). Prior behavior
-    // coerced '' → 0 because `Number('')` is 0 and `Number.isInteger(0)` is
-    // true, which surprised users expecting cancel-on-blank.
-    if (trimmed.length === 0) {
-      setEditingId(null);
-      return;
-    }
-    const value = Number(trimmed);
-    if (Number.isInteger(value)) {
-      webClient.request.game.setCounter(gameId, { counterId, value });
-    }
-    setEditingId(null);
-  };
-
-  const cancelEdit = () => {
-    setEditingId(null);
-  };
-
-  return {
-    player,
-    isHost,
-    lifeCounter,
-    otherCounters,
-    editingId,
-    editDraft,
-    setEditDraft,
-    beginEdit,
-    commitEdit,
-    cancelEdit,
-    handleIncrement,
-    handleDelete,
-  };
-}
diff --git a/webclient/src/components/Game/PlayerList/PlayerList.css b/webclient/src/components/Game/PlayerList/PlayerList.css
deleted file mode 100644
index c76e3a15b..000000000
--- a/webclient/src/components/Game/PlayerList/PlayerList.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.player-list {
-  padding: 8px 12px;
-  background: #0a1225;
-  border-bottom: 1px solid #1a2b52;
-  color: #e5ecf7;
-  font-size: 12px;
-}
-
-.player-list__heading {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: #8597bb;
-  margin-bottom: 6px;
-}
-
-.player-list__items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.player-list__empty {
-  color: #5a6a8a;
-  font-style: italic;
-}
-
-.player-list__item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 3px 0;
-}
-
-.player-list__host-badge {
-  color: var(--color-highlight-yellow);
-  font-size: 12px;
-  line-height: 1;
-}
-
-.player-list__indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #3a4b73;
-}
-
-.player-list__indicator--active {
-  background: #d48a00;
-  box-shadow: 0 0 4px var(--color-highlight-yellow);
-}
-
-.player-list__item--active .player-list__name {
-  font-weight: 700;
-}
-
-.player-list__item--conceded {
-  opacity: 0.5;
-  text-decoration: line-through;
-}
-
-.player-list__name {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.player-list__ping {
-  color: #7f90b5;
-  font-size: 10px;
-}
diff --git a/webclient/src/components/Game/PlayerList/PlayerList.spec.tsx b/webclient/src/components/Game/PlayerList/PlayerList.spec.tsx
deleted file mode 100644
index 790972b47..000000000
--- a/webclient/src/components/Game/PlayerList/PlayerList.spec.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { screen } from '@testing-library/react';
-
-import { makeStoreState, renderWithProviders, makeUser } from '../../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-} from '../../../store/game/__mocks__/fixtures';
-import PlayerList from './PlayerList';
-
-function buildState(
-  players: ReturnType<typeof makePlayerEntry>[],
-  activePlayerId: number,
-  hostId?: number,
-) {
-  const byId: Record<number, ReturnType<typeof makePlayerEntry>> = {};
-  for (const p of players) {
-    byId[p.properties.playerId] = p;
-  }
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          players: byId,
-          activePlayerId,
-          ...(hostId != null ? { hostId } : {}),
-        }),
-      },
-    },
-  });
-}
-
-describe('PlayerList', () => {
-  it('lists every player in the game', () => {
-    const p1 = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Alice' }),
-        pingSeconds: 10,
-      }),
-    });
-    const p2 = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 2,
-        userInfo: makeUser({ name: 'Bob' }),
-        pingSeconds: 20,
-      }),
-    });
-
-    renderWithProviders(<PlayerList gameId={1} />, {
-      preloadedState: buildState([p1, p2], 1),
-    });
-
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-    expect(screen.getByText('Bob')).toBeInTheDocument();
-    expect(screen.getByText('10s')).toBeInTheDocument();
-    expect(screen.getByText('20s')).toBeInTheDocument();
-  });
-
-  it('highlights the active player', () => {
-    const p1 = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Alice' }),
-      }),
-    });
-    const p2 = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 2,
-        userInfo: makeUser({ name: 'Bob' }),
-      }),
-    });
-
-    renderWithProviders(<PlayerList gameId={1} />, {
-      preloadedState: buildState([p1, p2], 2),
-    });
-
-    expect(screen.getByTestId('player-list-item-2')).toHaveClass(
-      'player-list__item--active',
-    );
-    expect(screen.getByTestId('player-list-item-1')).not.toHaveClass(
-      'player-list__item--active',
-    );
-  });
-
-  it('dims conceded players', () => {
-    const p1 = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Alice' }),
-        conceded: true,
-      }),
-    });
-
-    renderWithProviders(<PlayerList gameId={1} />, {
-      preloadedState: buildState([p1], 0),
-    });
-
-    expect(screen.getByTestId('player-list-item-1')).toHaveClass(
-      'player-list__item--conceded',
-    );
-  });
-
-  it('shows empty state when there are no players', () => {
-    renderWithProviders(<PlayerList gameId={1} />, {
-      preloadedState: buildState([], 0),
-    });
-
-    expect(screen.getByText(/no players/i)).toBeInTheDocument();
-  });
-
-  it('handles missing gameId without throwing', () => {
-    renderWithProviders(<PlayerList gameId={undefined} />, {
-      preloadedState: makeStoreState({}),
-    });
-
-    expect(screen.getByText(/no players/i)).toBeInTheDocument();
-  });
-
-  it('renders a host badge on the host row only', () => {
-    const p1 = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 1,
-        userInfo: makeUser({ name: 'Alice' }),
-      }),
-    });
-    const p2 = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: 2,
-        userInfo: makeUser({ name: 'Bob' }),
-      }),
-    });
-
-    renderWithProviders(<PlayerList gameId={1} />, {
-      preloadedState: buildState([p1, p2], 1, 2),
-    });
-
-    const bobRow = screen.getByTestId('player-list-item-2');
-    const aliceRow = screen.getByTestId('player-list-item-1');
-    expect(bobRow.querySelector('.player-list__host-badge')).not.toBeNull();
-    expect(aliceRow.querySelector('.player-list__host-badge')).toBeNull();
-  });
-});
diff --git a/webclient/src/components/Game/PlayerList/PlayerList.tsx b/webclient/src/components/Game/PlayerList/PlayerList.tsx
deleted file mode 100644
index 9b0374887..000000000
--- a/webclient/src/components/Game/PlayerList/PlayerList.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { GameSelectors, useAppSelector } from '@app/store';
-import { cx } from '@app/utils';
-
-import './PlayerList.css';
-
-export interface PlayerListProps {
-  gameId: number | undefined;
-}
-
-function PlayerList({ gameId }: PlayerListProps) {
-  const players = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getPlayers(state, gameId) : undefined,
-  );
-  const activePlayerId = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getActivePlayerId(state, gameId) : undefined,
-  );
-  const hostId = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getHostId(state, gameId) : undefined,
-  );
-
-  const entries = players ? Object.values(players) : [];
-
-  return (
-    <div className="player-list" data-testid="player-list">
-      <div className="player-list__heading">Players</div>
-      <ul className="player-list__items">
-        {entries.length === 0 && (
-          <li className="player-list__empty">no players</li>
-        )}
-        {entries.map((p) => {
-          const pid = p.properties.playerId;
-          const name = p.properties.userInfo?.name ?? '(unknown)';
-          const isActive = pid === activePlayerId;
-          const isHost = pid === hostId;
-          return (
-            <li
-              key={pid}
-              className={cx('player-list__item', {
-                'player-list__item--active': isActive,
-                'player-list__item--conceded': p.properties.conceded,
-              })}
-              data-testid={`player-list-item-${pid}`}
-            >
-              <span
-                className={cx('player-list__indicator', {
-                  'player-list__indicator--active': isActive,
-                })}
-              />
-              {isHost && (
-                <span
-                  className="player-list__host-badge"
-                  aria-label="host"
-                  title="Host"
-                >
-                  ♛
-                </span>
-              )}
-              <span className="player-list__name">{name}</span>
-              <span className="player-list__ping">{p.properties.pingSeconds}s</span>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
-export default PlayerList;
diff --git a/webclient/src/components/Game/RightPanel/RightPanel.css b/webclient/src/components/Game/RightPanel/RightPanel.css
deleted file mode 100644
index 99cd058d1..000000000
--- a/webclient/src/components/Game/RightPanel/RightPanel.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.right-panel {
-  width: 320px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #0a1225;
-  border-left: 1px solid #1a2b52;
-  overflow: hidden;
-}
-
-.right-panel__spectating {
-  padding: 4px 12px;
-  background: #23324f;
-  color: var(--color-highlight-yellow);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1.2px;
-  text-transform: uppercase;
-  text-align: center;
-  border-bottom: 1px solid #1a2b52;
-}
diff --git a/webclient/src/components/Game/RightPanel/RightPanel.spec.tsx b/webclient/src/components/Game/RightPanel/RightPanel.spec.tsx
deleted file mode 100644
index 0edd295ec..000000000
--- a/webclient/src/components/Game/RightPanel/RightPanel.spec.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-// Block TurnControls' Dexie-backed useSettings from firing an async settle
-// after mount (the Dexie mock resolves on a microtask, which would produce
-// an unwrapped React state update inside TurnControls).
-vi.mock('../../../hooks/useSettings');
-
-import { makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import { makeCard, makeGameEntry } from '../../../store/game/__mocks__/fixtures';
-import RightPanel from './RightPanel';
-
-function stateWithGame() {
-  return makeStoreState({ games: { games: { 1: makeGameEntry() } } });
-}
-
-const NOOP = () => {};
-const DEFAULT_RP_PROPS = {
-  gameId: 1,
-  hoveredCard: null,
-  onRequestRollDie: NOOP,
-  onRequestConcede: NOOP,
-  onRequestUnconcede: NOOP,
-  onRequestGameInfo: NOOP,
-  onToggleRotate90: NOOP,
-  isRotated: false,
-};
-
-describe('RightPanel', () => {
-  it('renders CardPreview, PlayerList, GameLog, and TurnControls', () => {
-    renderWithProviders(<RightPanel {...DEFAULT_RP_PROPS} />, {
-      preloadedState: stateWithGame(),
-    });
-
-    expect(screen.getByTestId('card-preview')).toBeInTheDocument();
-    expect(screen.getByTestId('player-list')).toBeInTheDocument();
-    expect(screen.getByTestId('game-log')).toBeInTheDocument();
-    expect(screen.getByTestId('turn-controls')).toBeInTheDocument();
-  });
-
-  it('forwards the hovered card into the preview', () => {
-    const card = makeCard({ name: 'Lightning Bolt' });
-    renderWithProviders(
-      <RightPanel {...DEFAULT_RP_PROPS} hoveredCard={card} />,
-      { preloadedState: stateWithGame() },
-    );
-
-    const small = document.querySelector('.card-preview__image--small') as HTMLImageElement;
-    expect(small.src).toContain('Lightning%20Bolt');
-  });
-
-  it('forwards Roll Die clicks through to the parent callback', () => {
-    const onRequestRollDie = vi.fn();
-    renderWithProviders(
-      <RightPanel {...DEFAULT_RP_PROPS} onRequestRollDie={onRequestRollDie} />,
-      { preloadedState: stateWithGame() },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /roll die/i }));
-
-    expect(onRequestRollDie).toHaveBeenCalled();
-  });
-
-  it('shows the Spectating tag when the local user is a spectator', () => {
-    renderWithProviders(<RightPanel {...DEFAULT_RP_PROPS} />, {
-      preloadedState: makeStoreState({
-        games: { games: { 1: makeGameEntry({ spectator: true }) } },
-      }),
-    });
-
-    expect(screen.getByTestId('spectating-tag')).toBeInTheDocument();
-  });
-
-  it('hides the Spectating tag when the local user is a participant', () => {
-    renderWithProviders(<RightPanel {...DEFAULT_RP_PROPS} />, {
-      preloadedState: stateWithGame(),
-    });
-
-    expect(screen.queryByTestId('spectating-tag')).not.toBeInTheDocument();
-  });
-});
diff --git a/webclient/src/components/Game/RightPanel/RightPanel.tsx b/webclient/src/components/Game/RightPanel/RightPanel.tsx
deleted file mode 100644
index 20e39f40c..000000000
--- a/webclient/src/components/Game/RightPanel/RightPanel.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Data } from '@app/types';
-import { GameSelectors, useAppSelector } from '@app/store';
-
-import CardPreview from '../CardPreview/CardPreview';
-import GameLog from '../GameLog/GameLog';
-import PlayerList from '../PlayerList/PlayerList';
-import TurnControls from '../TurnControls/TurnControls';
-
-import './RightPanel.css';
-
-export interface RightPanelProps {
-  gameId: number | undefined;
-  hoveredCard: Data.ServerInfo_Card | null | undefined;
-  onRequestRollDie: () => void;
-  onRequestConcede: () => void;
-  onRequestUnconcede: () => void;
-  onRequestGameInfo: () => void;
-  onToggleRotate90: () => void;
-  isRotated: boolean;
-}
-
-function RightPanel({
-  gameId,
-  hoveredCard,
-  onRequestRollDie,
-  onRequestConcede,
-  onRequestUnconcede,
-  onRequestGameInfo,
-  onToggleRotate90,
-  isRotated,
-}: RightPanelProps) {
-  const isSpectator = useAppSelector((state) =>
-    gameId != null ? GameSelectors.isSpectator(state, gameId) : false,
-  );
-
-  return (
-    <aside className="right-panel" data-testid="right-panel">
-      {isSpectator && (
-        <div className="right-panel__spectating" data-testid="spectating-tag">
-          Spectating
-        </div>
-      )}
-      <CardPreview card={hoveredCard} />
-      <PlayerList gameId={gameId} />
-      <GameLog gameId={gameId} />
-      <TurnControls
-        gameId={gameId}
-        onRequestRollDie={onRequestRollDie}
-        onRequestConcede={onRequestConcede}
-        onRequestUnconcede={onRequestUnconcede}
-        onRequestGameInfo={onRequestGameInfo}
-        onToggleRotate90={onToggleRotate90}
-        isRotated={isRotated}
-      />
-    </aside>
-  );
-}
-
-export default RightPanel;
diff --git a/webclient/src/components/Game/StackStrip/StackStrip.css b/webclient/src/components/Game/StackStrip/StackStrip.css
deleted file mode 100644
index b66fb6c77..000000000
--- a/webclient/src/components/Game/StackStrip/StackStrip.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.stack-strip {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 4px 16px;
-  background: #0a1225;
-  border-top: 1px solid #1a2b52;
-  border-bottom: 1px solid #1a2b52;
-  font-size: 11px;
-  color: #c8d4ef;
-}
-
-.stack-strip__heading {
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: #8597bb;
-  flex-shrink: 0;
-}
-
-.stack-strip__cell {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 8px;
-  border: 1px solid #233a68;
-  border-radius: 3px;
-  background: #17223d;
-}
-
-.stack-strip__cell[role='button'] {
-  cursor: pointer;
-}
-
-.stack-strip__cell[role='button']:hover {
-  background: #223060;
-  border-color: #355090;
-}
-
-.stack-strip__label {
-  font-weight: 600;
-  color: #c8d4ef;
-}
-
-.stack-strip__count {
-  min-width: 16px;
-  padding: 0 4px;
-  background: #050914;
-  color: var(--color-highlight-yellow);
-  font-variant-numeric: tabular-nums;
-  font-weight: 700;
-  border-radius: 2px;
-  text-align: center;
-}
diff --git a/webclient/src/components/Game/StackStrip/StackStrip.spec.tsx b/webclient/src/components/Game/StackStrip/StackStrip.spec.tsx
deleted file mode 100644
index 9e192cfe0..000000000
--- a/webclient/src/components/Game/StackStrip/StackStrip.spec.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import StackStrip from './StackStrip';
-
-function stateWithStacks(localCount: number, opponentCount: number) {
-  const local = makePlayerEntry({
-    properties: makePlayerProperties({ playerId: 1 }),
-    zones: {
-      [App.ZoneName.STACK]: makeZoneEntry({
-        name: App.ZoneName.STACK,
-        cardCount: localCount,
-      }),
-    },
-  });
-  const opponent = makePlayerEntry({
-    properties: makePlayerProperties({ playerId: 2 }),
-    zones: {
-      [App.ZoneName.STACK]: makeZoneEntry({
-        name: App.ZoneName.STACK,
-        cardCount: opponentCount,
-      }),
-    },
-  });
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({ localPlayerId: 1, players: { 1: local, 2: opponent } }),
-      },
-    },
-  });
-}
-
-describe('StackStrip', () => {
-  it('renders a cell per entry with the zone cardCount', () => {
-    renderWithProviders(
-      <StackStrip
-        gameId={1}
-        entries={[
-          { playerId: 2, name: 'Opp' },
-          { playerId: 1, name: 'Me' },
-        ]}
-      />,
-      { preloadedState: stateWithStacks(0, 3) },
-    );
-
-    const oppCell = screen.getByTestId('stack-strip-cell-2');
-    const meCell = screen.getByTestId('stack-strip-cell-1');
-    expect(oppCell).toHaveTextContent('Opp');
-    expect(oppCell).toHaveTextContent('3');
-    expect(meCell).toHaveTextContent('Me');
-    expect(meCell).toHaveTextContent('0');
-  });
-
-  it('invokes onZoneClick(playerId, "stack") when a cell is clicked', () => {
-    const onZoneClick = vi.fn();
-    renderWithProviders(
-      <StackStrip
-        gameId={1}
-        entries={[
-          { playerId: 2, name: 'Opp' },
-          { playerId: 1, name: 'Me' },
-        ]}
-        onZoneClick={onZoneClick}
-      />,
-      { preloadedState: stateWithStacks(1, 2) },
-    );
-
-    fireEvent.click(screen.getByTestId('stack-strip-cell-1'));
-
-    expect(onZoneClick).toHaveBeenCalledWith(1, App.ZoneName.STACK);
-  });
-
-  it('activates on Enter/Space when clickable', () => {
-    const onZoneClick = vi.fn();
-    renderWithProviders(
-      <StackStrip
-        gameId={1}
-        entries={[{ playerId: 1, name: 'Me' }]}
-        onZoneClick={onZoneClick}
-      />,
-      { preloadedState: stateWithStacks(0, 0) },
-    );
-
-    fireEvent.keyDown(screen.getByTestId('stack-strip-cell-1'), { key: 'Enter' });
-
-    expect(onZoneClick).toHaveBeenCalledWith(1, App.ZoneName.STACK);
-  });
-
-  it('renders cells as non-interactive when onZoneClick is absent', () => {
-    renderWithProviders(
-      <StackStrip gameId={1} entries={[{ playerId: 1, name: 'Me' }]} />,
-      { preloadedState: stateWithStacks(0, 0) },
-    );
-
-    const cell = screen.getByTestId('stack-strip-cell-1');
-    expect(cell).not.toHaveAttribute('role', 'button');
-    expect(cell).not.toHaveAttribute('tabindex');
-  });
-});
diff --git a/webclient/src/components/Game/StackStrip/StackStrip.tsx b/webclient/src/components/Game/StackStrip/StackStrip.tsx
deleted file mode 100644
index 1f1b1e075..000000000
--- a/webclient/src/components/Game/StackStrip/StackStrip.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { GameSelectors, useAppSelector } from '@app/store';
-import { App } from '@app/types';
-
-import './StackStrip.css';
-
-export interface StackStripEntry {
-  playerId: number;
-  name: string;
-}
-
-export interface StackStripProps {
-  gameId: number;
-  entries: StackStripEntry[];
-  onZoneClick?: (playerId: number, zoneName: string) => void;
-}
-
-interface StackCellProps {
-  gameId: number;
-  playerId: number;
-  name: string;
-  onClick?: (playerId: number, zoneName: string) => void;
-}
-
-function StackCell({ gameId, playerId, name, onClick }: StackCellProps) {
-  const zone = useAppSelector((state) =>
-    GameSelectors.getZone(state, gameId, playerId, App.ZoneName.STACK),
-  );
-  const count = zone?.cardCount ?? 0;
-  const clickable = onClick != null;
-
-  const handleClick = () => {
-    onClick?.(playerId, App.ZoneName.STACK);
-  };
-
-  return (
-    <div
-      className="stack-strip__cell"
-      data-testid={`stack-strip-cell-${playerId}`}
-      onClick={clickable ? handleClick : undefined}
-      onKeyDown={(e) => {
-        if (clickable && (e.key === 'Enter' || e.key === ' ')) {
-          e.preventDefault();
-          handleClick();
-        }
-      }}
-      role={clickable ? 'button' : undefined}
-      tabIndex={clickable ? 0 : undefined}
-      aria-label={`${name} stack: ${count} ${count === 1 ? 'card' : 'cards'}`}
-    >
-      <span className="stack-strip__label">{name}</span>
-      <span className="stack-strip__count">{count}</span>
-    </div>
-  );
-}
-
-function StackStrip({ gameId, entries, onZoneClick }: StackStripProps) {
-  return (
-    <div className="stack-strip" data-testid="stack-strip">
-      <span className="stack-strip__heading">Stack</span>
-      {entries.map((e) => (
-        <StackCell
-          key={e.playerId}
-          gameId={gameId}
-          playerId={e.playerId}
-          name={e.name}
-          onClick={onZoneClick}
-        />
-      ))}
-    </div>
-  );
-}
-
-export default StackStrip;
diff --git a/webclient/src/components/Game/TurnControls/TurnControls.css b/webclient/src/components/Game/TurnControls/TurnControls.css
deleted file mode 100644
index 21fa1c716..000000000
--- a/webclient/src/components/Game/TurnControls/TurnControls.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.turn-controls {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 4px;
-  padding: 6px 12px;
-  border-top: 1px solid #1a2b52;
-}
-
-.turn-controls__btn {
-  height: 28px;
-  padding: 0 6px;
-  background: #17223d;
-  border: 1px solid #233a68;
-  color: #c8d4ef;
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-.turn-controls__btn:hover:not(:disabled) {
-  background: #223060;
-  border-color: #355090;
-  color: #fff;
-}
-
-.turn-controls__btn:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-
-.turn-controls__btn--active {
-  background: #2d4583;
-  border-color: #5a7fcd;
-  color: #fff;
-}
diff --git a/webclient/src/components/Game/TurnControls/TurnControls.spec.tsx b/webclient/src/components/Game/TurnControls/TurnControls.spec.tsx
deleted file mode 100644
index 61f8bc6b4..000000000
--- a/webclient/src/components/Game/TurnControls/TurnControls.spec.tsx
+++ /dev/null
@@ -1,394 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-vi.mock('../../../hooks/useSettings');
-
-import { useSettings } from '../../../hooks/useSettings';
-import { makeSettings, makeSettingsHook } from '../../../hooks/__mocks__/useSettings';
-import { LoadingState } from '../../../hooks/useSharedStore';
-import { createMockWebClient, makeStoreState, renderWithProviders, makeUser } from '../../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-} from '../../../store/game/__mocks__/fixtures';
-import TurnControls from './TurnControls';
-
-function stateWith(opts: {
-  localPlayerId?: number;
-  activePlayerId?: number;
-  started?: boolean;
-  conceded?: boolean;
-  judge?: boolean;
-  spectator?: boolean;
-  hostId?: number;
-  opponentIds?: number[];
-} = {}) {
-  const localId = opts.localPlayerId ?? 1;
-  const opponentIds = opts.opponentIds ?? [];
-  const players: Record<number, ReturnType<typeof makePlayerEntry>> = {
-    [localId]: makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: localId,
-        userInfo: makeUser({ name: `P${localId}` }),
-        conceded: opts.conceded ?? false,
-      }),
-    }),
-  };
-  for (const id of opponentIds) {
-    players[id] = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: id,
-        userInfo: makeUser({ name: `P${id}` }),
-      }),
-    });
-  }
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: localId,
-          activePlayerId: opts.activePlayerId ?? localId,
-          started: opts.started ?? true,
-          judge: opts.judge ?? false,
-          spectator: opts.spectator ?? false,
-          hostId: opts.hostId ?? localId,
-          players,
-        }),
-      },
-    },
-  });
-}
-
-const NOOP = () => {};
-const DEFAULT_TURN_PROPS = {
-  gameId: 1,
-  onRequestRollDie: NOOP,
-  onRequestConcede: NOOP,
-  onRequestUnconcede: NOOP,
-  onRequestGameInfo: NOOP,
-  onToggleRotate90: NOOP,
-  isRotated: false,
-};
-
-describe('TurnControls', () => {
-  beforeEach(() => {
-    vi.mocked(useSettings).mockReturnValue(makeSettingsHook());
-  });
-
-  it('renders core buttons', () => {
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith(),
-    });
-
-    expect(screen.getByRole('button', { name: /pass turn/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /reverse turn/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /next phase/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^concede$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /roll die/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /remove arrows/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /rotate 90/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /game info/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /leave game/i })).toBeInTheDocument();
-  });
-
-  it('dispatches nextTurn on Pass Turn when the local player is active', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith(),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /pass turn/i }));
-
-    expect(webClient.request.game.nextTurn).toHaveBeenCalledWith(1);
-  });
-
-  it('dispatches reverseTurn on Reverse Turn', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith(),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /reverse turn/i }));
-
-    expect(webClient.request.game.reverseTurn).toHaveBeenCalledWith(1);
-  });
-
-  it('dispatches setActivePhase(current+1 mod 11) on Next Phase', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith(),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /next phase/i }));
-
-    // activePhase defaults to 0 in fixtures → Next Phase goes to 1.
-    expect(webClient.request.game.setActivePhase).toHaveBeenCalledWith(1, { phase: 1 });
-  });
-
-  it('disables Pass/Reverse/NextPhase when local player is not active and is not a judge', () => {
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith({ localPlayerId: 1, activePlayerId: 2 }),
-    });
-
-    expect(screen.getByRole('button', { name: /pass turn/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /reverse turn/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /next phase/i })).toBeDisabled();
-  });
-
-  it('enables Pass/Reverse/NextPhase for a judge even when not the active player (desktop parity)', () => {
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith({ localPlayerId: 1, activePlayerId: 2, judge: true }),
-    });
-
-    expect(screen.getByRole('button', { name: /pass turn/i })).not.toBeDisabled();
-    expect(screen.getByRole('button', { name: /next phase/i })).not.toBeDisabled();
-  });
-
-  it('routes Concede through the parent confirm handler (no direct dispatch)', () => {
-    const webClient = createMockWebClient();
-    const onRequestConcede = vi.fn();
-    renderWithProviders(
-      <TurnControls {...DEFAULT_TURN_PROPS} onRequestConcede={onRequestConcede} />,
-      { preloadedState: stateWith(), webClient },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /^concede$/i }));
-
-    expect(onRequestConcede).toHaveBeenCalled();
-    // Direct dispatch only fires from the ConfirmDialog "Confirm" path.
-    expect(webClient.request.game.concede).not.toHaveBeenCalled();
-  });
-
-  it('routes Unconcede through the parent confirm handler when already conceded', () => {
-    const onRequestUnconcede = vi.fn();
-    renderWithProviders(
-      <TurnControls {...DEFAULT_TURN_PROPS} onRequestUnconcede={onRequestUnconcede} />,
-      { preloadedState: stateWith({ conceded: true }) },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /unconcede/i }));
-
-    expect(onRequestUnconcede).toHaveBeenCalled();
-  });
-
-  it('dispatches leaveGame when Leave Game is clicked', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith(),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /leave game/i }));
-
-    expect(webClient.request.game.leaveGame).toHaveBeenCalledWith(1);
-  });
-
-  it('fires onRequestRollDie when Roll Die is clicked', () => {
-    const onRequestRollDie = vi.fn();
-    renderWithProviders(
-      <TurnControls {...DEFAULT_TURN_PROPS} onRequestRollDie={onRequestRollDie} />,
-      { preloadedState: stateWith() },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /roll die/i }));
-
-    expect(onRequestRollDie).toHaveBeenCalled();
-  });
-
-  it('fires onRequestGameInfo when Game Info is clicked', () => {
-    const onRequestGameInfo = vi.fn();
-    renderWithProviders(
-      <TurnControls {...DEFAULT_TURN_PROPS} onRequestGameInfo={onRequestGameInfo} />,
-      { preloadedState: stateWith() },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /game info/i }));
-
-    expect(onRequestGameInfo).toHaveBeenCalled();
-  });
-
-  it('fires onToggleRotate90 when Rotate 90° is clicked and flips label when already rotated', () => {
-    const onToggleRotate90 = vi.fn();
-    const { rerender } = renderWithProviders(
-      <TurnControls {...DEFAULT_TURN_PROPS} onToggleRotate90={onToggleRotate90} />,
-      { preloadedState: stateWith() },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /rotate 90/i }));
-    expect(onToggleRotate90).toHaveBeenCalled();
-
-    rerender(<TurnControls {...DEFAULT_TURN_PROPS} onToggleRotate90={onToggleRotate90} isRotated />);
-    expect(screen.getByRole('button', { name: /unrotate view/i })).toBeInTheDocument();
-  });
-
-  it('disables Remove Arrows when the local player has no arrows', () => {
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith(),
-    });
-
-    expect(screen.getByRole('button', { name: /remove arrows/i })).toBeDisabled();
-  });
-
-  it('hides the Kick button for non-hosts', () => {
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith({ localPlayerId: 1, hostId: 2, opponentIds: [2] }),
-    });
-
-    expect(screen.queryByRole('button', { name: /kick/i })).not.toBeInTheDocument();
-  });
-
-  it('shows Kick for hosts and opens an opponent picker', () => {
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith({ localPlayerId: 1, hostId: 1, opponentIds: [2, 3] }),
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /kick/i }));
-
-    expect(screen.getByText('P2')).toBeInTheDocument();
-    expect(screen.getByText('P3')).toBeInTheDocument();
-  });
-
-  it('dispatches kickFromGame with the chosen opponent', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-      preloadedState: stateWith({ localPlayerId: 1, hostId: 1, opponentIds: [2, 3] }),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /kick/i }));
-    fireEvent.click(screen.getByText('P3'));
-
-    expect(webClient.request.game.kickFromGame).toHaveBeenCalledWith(1, { playerId: 3 });
-  });
-
-  describe('spectator gating', () => {
-    it('disables Concede/Unconcede/RollDie for pure spectators (desktop parity)', () => {
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith({ spectator: true }),
-      });
-
-      expect(screen.getByRole('button', { name: /^concede$/i })).toBeDisabled();
-      expect(screen.getByRole('button', { name: /roll die/i })).toBeDisabled();
-    });
-
-    it('keeps Leave Game enabled for spectators (they may stop spectating)', () => {
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith({ spectator: true }),
-      });
-
-      expect(screen.getByRole('button', { name: /leave game/i })).not.toBeDisabled();
-    });
-
-    it('lets judges roll dice even though they are flagged as spectators (desktop parity)', () => {
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith({ spectator: true, judge: true }),
-      });
-
-      expect(screen.getByRole('button', { name: /roll die/i })).not.toBeDisabled();
-    });
-
-    // Desktop: judges can't concede — they have no local player to concede as.
-    // Our `canConcede = !isSpectator && …` gate already excludes judges who
-    // are flagged spectator; this test pins the behavior.
-    it('disables Concede for judges flagged as spectators (no local player to concede)', () => {
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith({ spectator: true, judge: true, conceded: false }),
-      });
-
-      expect(screen.getByRole('button', { name: /^concede$/i })).toBeDisabled();
-    });
-
-    it('disables Unconcede for spectators who are already conceded', () => {
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith({ spectator: true, conceded: true }),
-      });
-
-      // Button renders as "Unconcede" when already conceded; stays disabled
-      // because spectators have no concede state in the first place.
-      expect(screen.getByRole('button', { name: /unconcede/i })).toBeDisabled();
-    });
-
-    it('disables Reverse Turn for pure spectators (they are never the active player)', () => {
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        // Spectator is typically not the active player; canAdvance gates on
-        // (isJudge || activePlayerId === localPlayerId) so Reverse is off.
-        preloadedState: stateWith({ spectator: true, localPlayerId: 1, activePlayerId: 2 }),
-      });
-
-      expect(screen.getByRole('button', { name: /reverse turn/i })).toBeDisabled();
-    });
-  });
-
-  describe('Invert Rows toggle', () => {
-    it('calls updateSettings with invertVerticalCoordinate=true when off', () => {
-      const update = vi.fn().mockResolvedValue(undefined);
-      vi.mocked(useSettings).mockReturnValue(
-        makeSettingsHook({
-          status: LoadingState.READY,
-          value: makeSettings({ invertVerticalCoordinate: false }),
-          update,
-        }),
-      );
-
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith(),
-      });
-
-      fireEvent.click(screen.getByRole('button', { name: /invert rows/i }));
-
-      expect(update).toHaveBeenCalledWith({ invertVerticalCoordinate: true });
-    });
-
-    it('calls updateSettings with invertVerticalCoordinate=false when on', () => {
-      const update = vi.fn().mockResolvedValue(undefined);
-      vi.mocked(useSettings).mockReturnValue(
-        makeSettingsHook({
-          status: LoadingState.READY,
-          value: makeSettings({ invertVerticalCoordinate: true }),
-          update,
-        }),
-      );
-
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith(),
-      });
-
-      fireEvent.click(screen.getByRole('button', { name: /invert rows/i }));
-
-      expect(update).toHaveBeenCalledWith({ invertVerticalCoordinate: false });
-    });
-
-    it('reflects the current value via aria-pressed', () => {
-      vi.mocked(useSettings).mockReturnValue(
-        makeSettingsHook({
-          status: LoadingState.READY,
-          value: makeSettings({ invertVerticalCoordinate: true }),
-        }),
-      );
-
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith(),
-      });
-
-      expect(screen.getByRole('button', { name: /invert rows/i })).toHaveAttribute(
-        'aria-pressed',
-        'true',
-      );
-    });
-
-    it('is disabled while settings are still loading', () => {
-      vi.mocked(useSettings).mockReturnValue(
-        makeSettingsHook({ status: LoadingState.LOADING, value: undefined }),
-      );
-
-      renderWithProviders(<TurnControls {...DEFAULT_TURN_PROPS} />, {
-        preloadedState: stateWith(),
-      });
-
-      expect(screen.getByRole('button', { name: /invert rows/i })).toBeDisabled();
-    });
-  });
-});
diff --git a/webclient/src/components/Game/TurnControls/TurnControls.tsx b/webclient/src/components/Game/TurnControls/TurnControls.tsx
deleted file mode 100644
index ad0ef9a9a..000000000
--- a/webclient/src/components/Game/TurnControls/TurnControls.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-
-import { useTurnControls } from './useTurnControls';
-
-import './TurnControls.css';
-
-export interface TurnControlsProps {
-  gameId: number | undefined;
-  onRequestRollDie: () => void;
-  onRequestConcede: () => void;
-  onRequestUnconcede: () => void;
-  onRequestGameInfo: () => void;
-  onToggleRotate90: () => void;
-  isRotated: boolean;
-}
-
-function TurnControls({
-  gameId,
-  onRequestRollDie,
-  onRequestConcede,
-  onRequestUnconcede,
-  onRequestGameInfo,
-  onToggleRotate90,
-  isRotated,
-}: TurnControlsProps) {
-  const {
-    isHost,
-    isConceded,
-    invertVerticalCoordinate,
-    settingsReady,
-    canAdvance,
-    canLeave,
-    canConcede,
-    canUnconcede,
-    canRoll,
-    canKick,
-    canRemoveArrows,
-    hasLiveGame,
-    opponents,
-    kickAnchor,
-    setKickAnchor,
-    handlePassTurn,
-    handleReverseTurn,
-    handleNextPhase,
-    handleConcedeToggle,
-    handleRemoveArrows,
-    handleLeave,
-    handleToggleInvert,
-    handleKick,
-  } = useTurnControls({ gameId, onRequestConcede, onRequestUnconcede });
-
-  return (
-    <div className="turn-controls" data-testid="turn-controls">
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={handlePassTurn}
-        disabled={!canAdvance}
-      >
-        Pass Turn
-      </button>
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={handleReverseTurn}
-        disabled={!canAdvance}
-      >
-        Reverse Turn
-      </button>
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={handleNextPhase}
-        disabled={!canAdvance}
-      >
-        Next Phase
-      </button>
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={handleConcedeToggle}
-        disabled={!canConcede && !canUnconcede}
-      >
-        {isConceded ? 'Unconcede' : 'Concede'}
-      </button>
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={onRequestRollDie}
-        disabled={!canRoll}
-      >
-        Roll Die…
-      </button>
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={handleRemoveArrows}
-        disabled={!canRemoveArrows}
-        title="Remove all arrows you've drawn this turn"
-      >
-        Remove Arrows
-      </button>
-      <button
-        type="button"
-        className={`turn-controls__btn${isRotated ? ' turn-controls__btn--active' : ''}`}
-        onClick={onToggleRotate90}
-        aria-pressed={isRotated}
-        disabled={gameId == null}
-        title="Rotate your view 90° (view-only; no server call)"
-      >
-        {isRotated ? 'Unrotate View' : 'Rotate 90°'}
-      </button>
-      <button
-        type="button"
-        className={`turn-controls__btn${invertVerticalCoordinate ? ' turn-controls__btn--active' : ''}`}
-        onClick={handleToggleInvert}
-        aria-pressed={invertVerticalCoordinate}
-        disabled={!settingsReady}
-        title="Flip battlefield row order (saved across sessions)"
-      >
-        Invert Rows
-      </button>
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={onRequestGameInfo}
-        disabled={!hasLiveGame}
-      >
-        Game Info
-      </button>
-      <button
-        type="button"
-        className="turn-controls__btn"
-        onClick={handleLeave}
-        disabled={!canLeave}
-      >
-        Leave Game
-      </button>
-      {isHost && (
-        <>
-          <button
-            type="button"
-            className="turn-controls__btn"
-            onClick={(e) => setKickAnchor(e.currentTarget)}
-            disabled={!canKick}
-          >
-            Kick ▾
-          </button>
-          <Menu
-            open={kickAnchor != null}
-            anchorEl={kickAnchor}
-            onClose={() => setKickAnchor(null)}
-          >
-            {opponents.map((o) => (
-              <MenuItem key={o.playerId} onClick={() => handleKick(o.playerId)}>
-                {o.name}
-              </MenuItem>
-            ))}
-          </Menu>
-        </>
-      )}
-    </div>
-  );
-}
-
-export default TurnControls;
diff --git a/webclient/src/components/Game/TurnControls/useTurnControls.ts b/webclient/src/components/Game/TurnControls/useTurnControls.ts
deleted file mode 100644
index b73298577..000000000
--- a/webclient/src/components/Game/TurnControls/useTurnControls.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import { LoadingState, useCurrentGame, useSettings, useWebClient } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-
-/**
- * MTG turn phase count (0..10). Mirrors desktop's wrap-around behavior in
- * `GameView::actNextPhase` — see `types/game.ts` for the Phase enum.
- */
-const PHASE_COUNT = 11;
-
-export interface TurnControlsOpponent {
-  playerId: number;
-  name: string;
-}
-
-export interface TurnControls {
-  isHost: boolean;
-  isConceded: boolean;
-  invertVerticalCoordinate: boolean;
-  settingsReady: boolean;
-  canAdvance: boolean;
-  canLeave: boolean;
-  canConcede: boolean;
-  canUnconcede: boolean;
-  canRoll: boolean;
-  canKick: boolean;
-  canRemoveArrows: boolean;
-  hasLiveGame: boolean;
-  opponents: TurnControlsOpponent[];
-  kickAnchor: HTMLElement | null;
-  setKickAnchor: (el: HTMLElement | null) => void;
-  handlePassTurn: () => void;
-  handleReverseTurn: () => void;
-  handleNextPhase: () => void;
-  handleConcedeToggle: () => void;
-  handleRemoveArrows: () => void;
-  handleLeave: () => void;
-  handleToggleInvert: () => void;
-  handleKick: (playerId: number) => void;
-}
-
-export interface UseTurnControlsArgs {
-  gameId: number | undefined;
-  onRequestConcede: () => void;
-  onRequestUnconcede: () => void;
-}
-
-export function useTurnControls({
-  gameId,
-  onRequestConcede,
-  onRequestUnconcede,
-}: UseTurnControlsArgs): TurnControls {
-  const webClient = useWebClient();
-  const { game, localPlayer, isSpectator, isJudge, isHost, isStarted } = useCurrentGame(gameId);
-  const { status: settingsStatus, value: settings, update: updateSettings } = useSettings();
-  const invertVerticalCoordinate = settings?.invertVerticalCoordinate ?? false;
-
-  // Post-kick: the reducer has deleted the game from state but the dialog
-  // may still be mounted for a frame while `useGameLifecycle` navigates to
-  // /server. Every handler double-checks `game` so a trailing click can't
-  // fire a command against a game the server no longer has.
-  const hasLiveGame = gameId != null && game != null;
-
-  const [kickAnchor, setKickAnchor] = useState<HTMLElement | null>(null);
-
-  const opponents = useMemo<TurnControlsOpponent[]>(() => {
-    if (!game) {
-      return [];
-    }
-    return Object.values(game.players)
-      .filter((p) => p.properties.playerId !== game.localPlayerId)
-      .map((p) => ({
-        playerId: p.properties.playerId,
-        name: p.properties.userInfo?.name ?? `p${p.properties.playerId}`,
-      }));
-  }, [game]);
-
-  // Local arrows belong to `localPlayerId`; Remove Local Arrows iterates
-  // and deletes each one. Matches desktop's Player::actRemoveLocalArrows.
-  const localArrows = useAppSelector((state) =>
-    gameId != null && game != null
-      ? GameSelectors.getArrows(state, gameId, game.localPlayerId)
-      : undefined,
-  );
-  const localArrowIds = useMemo(
-    () => (localArrows ? Object.keys(localArrows).map(Number) : []),
-    [localArrows],
-  );
-
-  // Players (judge or not) act as participants; pure spectators don't.
-  // Matches desktop: aConcede/aNextTurn are disabled when isSpectator() without
-  // judge privileges (see tab_game.cpp concede enablement + player_menu.cpp
-  // getLocalOrJudge gates).
-  const isParticipant = gameId != null && game != null && !isSpectator;
-  const isConceded = localPlayer?.properties.conceded ?? false;
-  const canAdvance =
-    gameId != null && game != null && isStarted &&
-    (isJudge || game.activePlayerId === game.localPlayerId);
-  const canLeave = gameId != null && game != null;
-  const canConcede = isParticipant && !isConceded;
-  const canUnconcede = isParticipant && isConceded;
-  // Rolling dice is a player action; judges may also roll. Pure spectators
-  // cannot (desktop exposes it through the player menu, which spectators
-  // don't receive).
-  const canRoll = gameId != null && (isParticipant || isJudge);
-  const canKick = gameId != null && isHost && opponents.length > 0;
-  const canRemoveArrows = hasLiveGame && localArrowIds.length > 0;
-
-  const handlePassTurn = () => {
-    if (!canAdvance || !hasLiveGame) {
-      return;
-    }
-    webClient.request.game.nextTurn(gameId);
-  };
-
-  const handleReverseTurn = () => {
-    if (!canAdvance || !hasLiveGame) {
-      return;
-    }
-    webClient.request.game.reverseTurn(gameId);
-  };
-
-  const handleNextPhase = () => {
-    if (!canAdvance || !hasLiveGame) {
-      return;
-    }
-    // Desktop wraps at PHASE_COUNT → 0 (the Phase enum is 0–10). When no phase
-    // is active yet (activePhase < 0 during the pre-game lobby), advance to
-    // Untap (0).
-    const current = game.activePhase;
-    const next = current >= 0 ? (current + 1) % PHASE_COUNT : 0;
-    webClient.request.game.setActivePhase(gameId, { phase: next });
-  };
-
-  const handleConcedeToggle = () => {
-    if (!hasLiveGame || (!canConcede && !canUnconcede)) {
-      return;
-    }
-    if (isConceded) {
-      onRequestUnconcede();
-    } else {
-      onRequestConcede();
-    }
-  };
-
-  const handleRemoveArrows = () => {
-    if (!canRemoveArrows) {
-      return;
-    }
-    for (const arrowId of localArrowIds) {
-      webClient.request.game.deleteArrow(gameId, { arrowId });
-    }
-  };
-
-  const handleLeave = () => {
-    if (!canLeave || !hasLiveGame) {
-      return;
-    }
-    webClient.request.game.leaveGame(gameId);
-  };
-
-  const handleToggleInvert = () => {
-    if (settingsStatus !== LoadingState.READY) {
-      return;
-    }
-    void updateSettings({ invertVerticalCoordinate: !invertVerticalCoordinate });
-  };
-
-  const handleKick = (playerId: number) => {
-    if (!hasLiveGame) {
-      return;
-    }
-    webClient.request.game.kickFromGame(gameId, { playerId });
-    setKickAnchor(null);
-  };
-
-  return {
-    isHost,
-    isConceded,
-    invertVerticalCoordinate,
-    settingsReady: settingsStatus === LoadingState.READY,
-    canAdvance,
-    canLeave,
-    canConcede,
-    canUnconcede,
-    canRoll,
-    canKick,
-    canRemoveArrows,
-    hasLiveGame,
-    opponents,
-    kickAnchor,
-    setKickAnchor,
-    handlePassTurn,
-    handleReverseTurn,
-    handleNextPhase,
-    handleConcedeToggle,
-    handleRemoveArrows,
-    handleLeave,
-    handleToggleInvert,
-    handleKick,
-  };
-}
diff --git a/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.css b/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.css
deleted file mode 100644
index 379f4bc2f..000000000
--- a/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.zone-context-menu .MuiPaper-root {
-  min-width: 220px;
-}
-
-.zone-context-menu__toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.zone-context-menu__check {
-  display: inline-flex;
-  width: 16px;
-  justify-content: center;
-  color: var(--color-highlight-yellow);
-}
diff --git a/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.spec.tsx b/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.spec.tsx
deleted file mode 100644
index 1a2a0285c..000000000
--- a/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.spec.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { createMockWebClient, makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import ZoneContextMenu from './ZoneContextMenu';
-
-const defaultProps = {
-  isOpen: true,
-  anchorPosition: { top: 100, left: 100 },
-  gameId: 1,
-  playerId: 1,
-  zoneName: App.ZoneName.DECK,
-  onClose: () => {},
-  onRequestDrawN: () => {},
-  onRequestDumpN: () => {},
-  onRequestRevealTopN: () => {},
-  onRequestRevealZone: () => {},
-};
-
-function stateWithDeckZone(overrides: Partial<ReturnType<typeof makeZoneEntry>> = {}) {
-  const player = makePlayerEntry({
-    zones: {
-      deck: makeZoneEntry({ name: App.ZoneName.DECK, ...overrides }),
-      grave: makeZoneEntry({ name: App.ZoneName.GRAVE }),
-      rfg: makeZoneEntry({ name: App.ZoneName.EXILE }),
-    },
-  });
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({ players: { 1: player } }),
-      },
-    },
-  });
-}
-
-describe('ZoneContextMenu', () => {
-  it('does not render when playerId is null', () => {
-    renderWithProviders(
-      <ZoneContextMenu {...defaultProps} playerId={null} />,
-    );
-    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-  });
-
-  it('does not render for unsupported zones (e.g. hand, stack)', () => {
-    renderWithProviders(
-      <ZoneContextMenu {...defaultProps} zoneName={App.ZoneName.HAND} />,
-      { preloadedState: stateWithDeckZone() },
-    );
-    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-  });
-
-  describe('Deck zone', () => {
-    it('renders every deck action when open', () => {
-      renderWithProviders(<ZoneContextMenu {...defaultProps} />, {
-        preloadedState: stateWithDeckZone(),
-      });
-
-      expect(screen.getByText('Draw a card')).toBeInTheDocument();
-      expect(screen.getByText('Draw N cards…')).toBeInTheDocument();
-      expect(screen.getByText('Shuffle')).toBeInTheDocument();
-      expect(screen.getByText('Dump top N…')).toBeInTheDocument();
-      expect(screen.getByText('Reveal top card to all')).toBeInTheDocument();
-      expect(screen.getByText('Reveal top N to…')).toBeInTheDocument();
-      expect(screen.getByText('Always reveal top card')).toBeInTheDocument();
-      expect(screen.getByText('Always look at top card')).toBeInTheDocument();
-    });
-
-    it('dispatches drawCards(1) on "Draw a card"', () => {
-      const webClient = createMockWebClient();
-      const onClose = vi.fn();
-      renderWithProviders(
-        <ZoneContextMenu {...defaultProps} onClose={onClose} />,
-        { webClient, preloadedState: stateWithDeckZone() },
-      );
-
-      fireEvent.click(screen.getByText('Draw a card'));
-
-      expect(webClient.request.game.drawCards).toHaveBeenCalledWith(1, { number: 1 });
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    it('dispatches shuffle on the deck zone', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<ZoneContextMenu {...defaultProps} />, {
-        webClient,
-        preloadedState: stateWithDeckZone(),
-      });
-
-      fireEvent.click(screen.getByText('Shuffle'));
-
-      expect(webClient.request.game.shuffle).toHaveBeenCalledWith(1, {
-        zoneName: App.ZoneName.DECK,
-        start: 0,
-        end: -1,
-      });
-    });
-
-    it('dispatches revealCards(topCards=1, playerId=-1) on "Reveal top card to all"', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<ZoneContextMenu {...defaultProps} />, {
-        webClient,
-        preloadedState: stateWithDeckZone(),
-      });
-
-      fireEvent.click(screen.getByText('Reveal top card to all'));
-
-      expect(webClient.request.game.revealCards).toHaveBeenCalledWith(1, {
-        zoneName: App.ZoneName.DECK,
-        playerId: -1,
-        topCards: 1,
-      });
-    });
-
-    it('defers prompt-backed items to parent callbacks', () => {
-      const onRequestDrawN = vi.fn();
-      const onRequestDumpN = vi.fn();
-      const onRequestRevealTopN = vi.fn();
-      renderWithProviders(
-        <ZoneContextMenu
-          {...defaultProps}
-          onRequestDrawN={onRequestDrawN}
-          onRequestDumpN={onRequestDumpN}
-          onRequestRevealTopN={onRequestRevealTopN}
-        />,
-        { preloadedState: stateWithDeckZone() },
-      );
-
-      fireEvent.click(screen.getByText('Draw N cards…'));
-      expect(onRequestDrawN).toHaveBeenCalled();
-
-      fireEvent.click(screen.getByText('Dump top N…'));
-      expect(onRequestDumpN).toHaveBeenCalled();
-
-      fireEvent.click(screen.getByText('Reveal top N to…'));
-      expect(onRequestRevealTopN).toHaveBeenCalled();
-    });
-
-    it('dispatches changeZoneProperties with the flipped alwaysRevealTopCard', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<ZoneContextMenu {...defaultProps} />, {
-        webClient,
-        preloadedState: stateWithDeckZone({ alwaysRevealTopCard: false }),
-      });
-
-      fireEvent.click(screen.getByText('Always reveal top card'));
-
-      expect(webClient.request.game.changeZoneProperties).toHaveBeenCalledWith(1, {
-        zoneName: App.ZoneName.DECK,
-        alwaysRevealTopCard: true,
-      });
-    });
-
-    it('dispatches changeZoneProperties with the flipped alwaysLookAtTopCard', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<ZoneContextMenu {...defaultProps} />, {
-        webClient,
-        preloadedState: stateWithDeckZone({ alwaysLookAtTopCard: true }),
-      });
-
-      fireEvent.click(screen.getByText('Always look at top card'));
-
-      expect(webClient.request.game.changeZoneProperties).toHaveBeenCalledWith(1, {
-        zoneName: App.ZoneName.DECK,
-        alwaysLookAtTopCard: false,
-      });
-    });
-  });
-
-  describe('Graveyard / Exile zones', () => {
-    it('offers "Reveal graveyard to…" on the grave zone', () => {
-      const onRequestRevealZone = vi.fn();
-      renderWithProviders(
-        <ZoneContextMenu
-          {...defaultProps}
-          zoneName={App.ZoneName.GRAVE}
-          onRequestRevealZone={onRequestRevealZone}
-        />,
-        { preloadedState: stateWithDeckZone() },
-      );
-
-      fireEvent.click(screen.getByText('Reveal graveyard to…'));
-
-      expect(onRequestRevealZone).toHaveBeenCalled();
-    });
-
-    it('offers "Reveal exile to…" on the exile zone', () => {
-      const onRequestRevealZone = vi.fn();
-      renderWithProviders(
-        <ZoneContextMenu
-          {...defaultProps}
-          zoneName={App.ZoneName.EXILE}
-          onRequestRevealZone={onRequestRevealZone}
-        />,
-        { preloadedState: stateWithDeckZone() },
-      );
-
-      fireEvent.click(screen.getByText('Reveal exile to…'));
-
-      expect(onRequestRevealZone).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.tsx b/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.tsx
deleted file mode 100644
index b973f0329..000000000
--- a/webclient/src/components/Game/ZoneContextMenu/ZoneContextMenu.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Divider from '@mui/material/Divider';
-import Check from '@mui/icons-material/Check';
-
-import { App } from '@app/types';
-
-import { useZoneContextMenu } from './useZoneContextMenu';
-
-import './ZoneContextMenu.css';
-
-export interface ZoneContextMenuProps {
-  isOpen: boolean;
-  anchorPosition: { top: number; left: number } | null;
-  gameId: number;
-  playerId: number | null;
-  zoneName: string | null;
-  onClose: () => void;
-  onRequestDrawN: () => void;
-  onRequestDumpN: () => void;
-  onRequestRevealTopN: () => void;
-  onRequestRevealZone: () => void;
-}
-
-function ZoneContextMenu(props: ZoneContextMenuProps) {
-  const {
-    isOpen,
-    anchorPosition,
-    zoneName,
-    onClose,
-    onRequestDrawN,
-    onRequestDumpN,
-    onRequestRevealTopN,
-    onRequestRevealZone,
-  } = props;
-  const {
-    ready,
-    alwaysReveal,
-    alwaysLook,
-    handleDrawOne,
-    handleShuffle,
-    handleRevealTop,
-    handleToggleAlwaysReveal,
-    handleToggleAlwaysLook,
-    runAndClose,
-  } = useZoneContextMenu(props);
-
-  if (!ready) {
-    return null;
-  }
-
-  const menuItems: React.ReactNode[] = [];
-
-  if (zoneName === App.ZoneName.DECK) {
-    menuItems.push(
-      <MenuItem key="draw-one" onClick={runAndClose(handleDrawOne)}>Draw a card</MenuItem>,
-      <MenuItem key="draw-n" onClick={runAndClose(onRequestDrawN)}>Draw N cards…</MenuItem>,
-      <MenuItem key="shuffle" onClick={runAndClose(handleShuffle)}>Shuffle</MenuItem>,
-      <MenuItem key="dump-n" onClick={runAndClose(onRequestDumpN)}>Dump top N…</MenuItem>,
-      <Divider key="d1" />,
-      <MenuItem key="reveal-top" onClick={runAndClose(handleRevealTop)}>
-        Reveal top card to all
-      </MenuItem>,
-      <MenuItem key="reveal-top-n" onClick={runAndClose(onRequestRevealTopN)}>
-        Reveal top N to…
-      </MenuItem>,
-      <Divider key="d2" />,
-      <MenuItem
-        key="always-reveal"
-        onClick={runAndClose(handleToggleAlwaysReveal)}
-        className="zone-context-menu__toggle"
-      >
-        <span className="zone-context-menu__check" aria-hidden>
-          {alwaysReveal ? <Check fontSize="inherit" /> : null}
-        </span>
-        Always reveal top card
-      </MenuItem>,
-      <MenuItem
-        key="always-look"
-        onClick={runAndClose(handleToggleAlwaysLook)}
-        className="zone-context-menu__toggle"
-      >
-        <span className="zone-context-menu__check" aria-hidden>
-          {alwaysLook ? <Check fontSize="inherit" /> : null}
-        </span>
-        Always look at top card
-      </MenuItem>,
-    );
-  } else if (zoneName === App.ZoneName.GRAVE) {
-    menuItems.push(
-      <MenuItem key="reveal-grave" onClick={runAndClose(onRequestRevealZone)}>
-        Reveal graveyard to…
-      </MenuItem>,
-    );
-  } else if (zoneName === App.ZoneName.EXILE) {
-    menuItems.push(
-      <MenuItem key="reveal-exile" onClick={runAndClose(onRequestRevealZone)}>
-        Reveal exile to…
-      </MenuItem>,
-    );
-  } else {
-    return null;
-  }
-
-  return (
-    <Menu
-      open={isOpen}
-      onClose={onClose}
-      anchorReference="anchorPosition"
-      anchorPosition={anchorPosition ?? undefined}
-      data-testid="zone-context-menu"
-      className="zone-context-menu"
-    >
-      {menuItems}
-    </Menu>
-  );
-}
-
-export default ZoneContextMenu;
diff --git a/webclient/src/components/Game/ZoneContextMenu/useZoneContextMenu.ts b/webclient/src/components/Game/ZoneContextMenu/useZoneContextMenu.ts
deleted file mode 100644
index 43dbcceb1..000000000
--- a/webclient/src/components/Game/ZoneContextMenu/useZoneContextMenu.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useWebClient } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-import { App } from '@app/types';
-
-export interface ZoneContextMenu {
-  ready: boolean;
-  alwaysReveal: boolean;
-  alwaysLook: boolean;
-  handleDrawOne: () => void;
-  handleShuffle: () => void;
-  handleRevealTop: () => void;
-  handleToggleAlwaysReveal: () => void;
-  handleToggleAlwaysLook: () => void;
-  runAndClose: (fn: () => void) => () => void;
-}
-
-export interface UseZoneContextMenuArgs {
-  gameId: number;
-  playerId: number | null;
-  zoneName: string | null;
-  onClose: () => void;
-}
-
-export function useZoneContextMenu({
-  gameId,
-  playerId,
-  zoneName,
-  onClose,
-}: UseZoneContextMenuArgs): ZoneContextMenu {
-  const webClient = useWebClient();
-
-  const zone = useAppSelector((state) =>
-    playerId != null && zoneName != null
-      ? GameSelectors.getZone(state, gameId, playerId, zoneName)
-      : undefined,
-  );
-
-  const ready = playerId != null && zoneName != null;
-  const alwaysReveal = zone?.alwaysRevealTopCard ?? false;
-  const alwaysLook = zone?.alwaysLookAtTopCard ?? false;
-
-  // Close-then-act helpers (avoid duplicating onClose at every site).
-  const runAndClose = (fn: () => void) => () => {
-    fn();
-    onClose();
-  };
-
-  const handleDrawOne = () => {
-    webClient.request.game.drawCards(gameId, { number: 1 });
-  };
-
-  const handleShuffle = () => {
-    webClient.request.game.shuffle(gameId, { zoneName: App.ZoneName.DECK, start: 0, end: -1 });
-  };
-
-  const handleRevealTop = () => {
-    webClient.request.game.revealCards(gameId, {
-      zoneName: App.ZoneName.DECK,
-      playerId: -1,
-      topCards: 1,
-    });
-  };
-
-  const handleToggleAlwaysReveal = () => {
-    webClient.request.game.changeZoneProperties(gameId, {
-      zoneName: App.ZoneName.DECK,
-      alwaysRevealTopCard: !alwaysReveal,
-    });
-  };
-
-  const handleToggleAlwaysLook = () => {
-    webClient.request.game.changeZoneProperties(gameId, {
-      zoneName: App.ZoneName.DECK,
-      alwaysLookAtTopCard: !alwaysLook,
-    });
-  };
-
-  return {
-    ready,
-    alwaysReveal,
-    alwaysLook,
-    handleDrawOne,
-    handleShuffle,
-    handleRevealTop,
-    handleToggleAlwaysReveal,
-    handleToggleAlwaysLook,
-    runAndClose,
-  };
-}
diff --git a/webclient/src/components/Game/ZoneRail/ZoneRail.css b/webclient/src/components/Game/ZoneRail/ZoneRail.css
deleted file mode 100644
index 991546067..000000000
--- a/webclient/src/components/Game/ZoneRail/ZoneRail.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.zone-rail {
-  width: 110px;
-  height: 100%;
-  padding: 8px 4px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  background: #0a1225;
-  border-left: 1px solid #1a2b52;
-}
diff --git a/webclient/src/components/Game/ZoneRail/ZoneRail.spec.tsx b/webclient/src/components/Game/ZoneRail/ZoneRail.spec.tsx
deleted file mode 100644
index 196fc630f..000000000
--- a/webclient/src/components/Game/ZoneRail/ZoneRail.spec.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import ZoneRail from './ZoneRail';
-
-const baseState = makeStoreState({
-  games: {
-    games: {
-      1: makeGameEntry({
-        localPlayerId: 1,
-        players: {
-          1: makePlayerEntry({
-            zones: {
-              [App.ZoneName.STACK]: makeZoneEntry({ name: App.ZoneName.STACK }),
-              [App.ZoneName.EXILE]: makeZoneEntry({ name: App.ZoneName.EXILE }),
-              [App.ZoneName.GRAVE]: makeZoneEntry({ name: App.ZoneName.GRAVE }),
-              [App.ZoneName.DECK]: makeZoneEntry({ name: App.ZoneName.DECK, cardCount: 60 }),
-            },
-          }),
-        },
-      }),
-    },
-  },
-});
-
-describe('ZoneRail', () => {
-  it('renders deck, graveyard, and exile top-to-bottom (desktop pile order)', () => {
-    const { container } = renderWithProviders(<ZoneRail gameId={1} playerId={1} />, {
-      preloadedState: baseState,
-    });
-
-    const labels = Array.from(container.querySelectorAll('.zone-stack__label')).map(
-      (n) => n.textContent,
-    );
-    expect(labels).toEqual(['Deck', 'Graveyard', 'Exile']);
-  });
-
-  it('does not render the stack in the pile rail (desktop parity: stack is not a pile)', () => {
-    renderWithProviders(<ZoneRail gameId={1} playerId={1} />, {
-      preloadedState: baseState,
-    });
-
-    expect(screen.queryByText('Stack')).not.toBeInTheDocument();
-    expect(screen.queryByTestId(`zone-stack-${App.ZoneName.STACK}`)).not.toBeInTheDocument();
-  });
-
-  it('propagates player and game context to each ZoneStack', () => {
-    renderWithProviders(<ZoneRail gameId={1} playerId={1} />, {
-      preloadedState: baseState,
-    });
-
-    expect(screen.getByTestId(`zone-stack-${App.ZoneName.DECK}`)).toBeInTheDocument();
-    expect(screen.getByTestId(`zone-stack-${App.ZoneName.GRAVE}`)).toBeInTheDocument();
-    expect(screen.getByTestId(`zone-stack-${App.ZoneName.EXILE}`)).toBeInTheDocument();
-  });
-
-  it('forwards zone-rail clicks with the player and zone name when onZoneClick is provided', () => {
-    const onZoneClick = vi.fn();
-    renderWithProviders(
-      <ZoneRail gameId={1} playerId={7} onZoneClick={onZoneClick} />,
-      { preloadedState: baseState },
-    );
-
-    fireEvent.click(screen.getByTestId(`zone-stack-${App.ZoneName.GRAVE}`));
-
-    expect(onZoneClick).toHaveBeenCalledWith(7, App.ZoneName.GRAVE);
-  });
-});
diff --git a/webclient/src/components/Game/ZoneRail/ZoneRail.tsx b/webclient/src/components/Game/ZoneRail/ZoneRail.tsx
deleted file mode 100644
index 90f0e66c6..000000000
--- a/webclient/src/components/Game/ZoneRail/ZoneRail.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { App, Data } from '@app/types';
-
-import ZoneStack from '../ZoneStack/ZoneStack';
-
-import './ZoneRail.css';
-
-export interface ZoneRailProps {
-  gameId: number;
-  playerId: number;
-  onCardHover?: (card: Data.ServerInfo_Card) => void;
-  onZoneClick?: (playerId: number, zoneName: string) => void;
-  onZoneContextMenu?: (playerId: number, zoneName: string, event: React.MouseEvent) => void;
-}
-
-const ZONES: Array<{ name: string; label: string }> = [
-  { name: App.ZoneName.DECK, label: 'Deck' },
-  { name: App.ZoneName.GRAVE, label: 'Graveyard' },
-  { name: App.ZoneName.EXILE, label: 'Exile' },
-];
-
-function ZoneRail({
-  gameId,
-  playerId,
-  onCardHover,
-  onZoneClick,
-  onZoneContextMenu,
-}: ZoneRailProps) {
-  return (
-    <div className="zone-rail" data-testid="zone-rail">
-      {ZONES.map((z) => (
-        <ZoneStack
-          key={z.name}
-          gameId={gameId}
-          playerId={playerId}
-          zoneName={z.name}
-          label={z.label}
-          onCardHover={onCardHover}
-          onClick={onZoneClick ? (name) => onZoneClick(playerId, name) : undefined}
-          onContextMenu={
-            onZoneContextMenu
-              ? (name, e) => onZoneContextMenu(playerId, name, e)
-              : undefined
-          }
-        />
-      ))}
-    </div>
-  );
-}
-
-export default ZoneRail;
diff --git a/webclient/src/components/Game/ZoneStack/ZoneStack.css b/webclient/src/components/Game/ZoneStack/ZoneStack.css
deleted file mode 100644
index 786102e8d..000000000
--- a/webclient/src/components/Game/ZoneStack/ZoneStack.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.zone-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  cursor: pointer;
-}
-
-.zone-stack--drop-over .zone-stack__thumb {
-  box-shadow: 0 0 0 2px var(--color-highlight-yellow), 0 0 12px var(--color-highlight-yellow-soft);
-}
-
-.zone-stack__thumb {
-  position: relative;
-  width: 78px;
-  height: 108px;
-  background: #0d1930;
-  border: 1px solid #1a2b52;
-  border-radius: 4px;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.zone-stack__image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.zone-stack__placeholder {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #17223d 0%, #0d1930 100%);
-}
-
-.zone-stack__count {
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  min-width: 20px;
-  padding: 1px 5px;
-  background: rgba(0, 0, 0, 0.85);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 700;
-  border-radius: 3px;
-  text-align: center;
-}
-
-.zone-stack__label {
-  color: #b8c5e0;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
diff --git a/webclient/src/components/Game/ZoneStack/ZoneStack.spec.tsx b/webclient/src/components/Game/ZoneStack/ZoneStack.spec.tsx
deleted file mode 100644
index 268887493..000000000
--- a/webclient/src/components/Game/ZoneStack/ZoneStack.spec.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { makeStoreState, renderWithProviders } from '../../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makeZoneEntry,
-} from '../../../store/game/__mocks__/fixtures';
-import ZoneStack from './ZoneStack';
-
-function stateWithZone(zoneName: string, overrides: Parameters<typeof makeZoneEntry>[0]) {
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: 1,
-          players: {
-            1: makePlayerEntry({
-              zones: {
-                [zoneName]: makeZoneEntry({ name: zoneName, ...overrides }),
-              },
-            }),
-          },
-        }),
-      },
-    },
-  });
-}
-
-describe('ZoneStack', () => {
-  it('renders the label', () => {
-    renderWithProviders(
-      <ZoneStack gameId={1} playerId={1} zoneName={App.ZoneName.GRAVE} label="Graveyard" />,
-      { preloadedState: stateWithZone(App.ZoneName.GRAVE, { cardCount: 0 }) },
-    );
-
-    expect(screen.getByText('Graveyard')).toBeInTheDocument();
-  });
-
-  it('shows the authoritative cardCount, even when order is empty (hidden zone)', () => {
-    renderWithProviders(
-      <ZoneStack gameId={1} playerId={1} zoneName={App.ZoneName.DECK} label="Deck" />,
-      {
-        preloadedState: stateWithZone(App.ZoneName.DECK, {
-          cardCount: 40,
-          cards: [],
-        }),
-      },
-    );
-
-    expect(screen.getByText('40')).toBeInTheDocument();
-  });
-
-  it('renders the top (last) card image as the thumb', () => {
-    const a = makeCard({ id: 1, name: 'Bottom Card' });
-    const b = makeCard({ id: 2, name: 'Top Card' });
-    renderWithProviders(
-      <ZoneStack gameId={1} playerId={1} zoneName={App.ZoneName.GRAVE} label="Graveyard" />,
-      {
-        preloadedState: stateWithZone(App.ZoneName.GRAVE, {
-          cardCount: 2,
-          cards: [a, b],
-        }),
-      },
-    );
-
-    expect(screen.getByAltText('Top Card')).toBeInTheDocument();
-    expect(screen.queryByAltText('Bottom Card')).not.toBeInTheDocument();
-  });
-
-  it('renders a placeholder when the zone has no visible cards', () => {
-    const { container } = renderWithProviders(
-      <ZoneStack gameId={1} playerId={1} zoneName={App.ZoneName.EXILE} label="Exile" />,
-      { preloadedState: stateWithZone(App.ZoneName.EXILE, { cardCount: 0 }) },
-    );
-
-    expect(container.querySelector('.zone-stack__placeholder')).not.toBeNull();
-    expect(container.querySelector('.zone-stack__image')).toBeNull();
-  });
-
-  it('hides the image when the top card is face-down', () => {
-    const hidden = makeCard({ id: 1, name: 'Secret', faceDown: true });
-    const { container } = renderWithProviders(
-      <ZoneStack gameId={1} playerId={1} zoneName={App.ZoneName.EXILE} label="Exile" />,
-      {
-        preloadedState: stateWithZone(App.ZoneName.EXILE, {
-          cardCount: 1,
-          cards: [hidden],
-        }),
-      },
-    );
-
-    expect(container.querySelector('.zone-stack__placeholder')).not.toBeNull();
-    expect(container.querySelector('.zone-stack__image')).toBeNull();
-  });
-
-  it('renders count 0 when the zone entry is missing entirely', () => {
-    renderWithProviders(
-      <ZoneStack gameId={1} playerId={1} zoneName="nonexistent" label="Missing" />,
-      {
-        preloadedState: makeStoreState({
-          games: {
-            games: {
-              1: makeGameEntry({
-                players: { 1: makePlayerEntry({ zones: {} }) },
-              }),
-            },
-          },
-        }),
-      },
-    );
-
-    expect(screen.getByText('0')).toBeInTheDocument();
-  });
-
-  it('fires onClick with the zone name when clicked', () => {
-    const onClick = vi.fn();
-    renderWithProviders(
-      <ZoneStack
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.GRAVE}
-        label="Graveyard"
-        onClick={onClick}
-      />,
-      { preloadedState: stateWithZone(App.ZoneName.GRAVE, { cardCount: 0 }) },
-    );
-
-    fireEvent.click(screen.getByTestId(`zone-stack-${App.ZoneName.GRAVE}`));
-
-    expect(onClick).toHaveBeenCalledWith(App.ZoneName.GRAVE);
-  });
-
-  it('does not gain button semantics when onClick is omitted', () => {
-    renderWithProviders(
-      <ZoneStack gameId={1} playerId={1} zoneName={App.ZoneName.GRAVE} label="Graveyard" />,
-      { preloadedState: stateWithZone(App.ZoneName.GRAVE, { cardCount: 0 }) },
-    );
-
-    const el = screen.getByTestId(`zone-stack-${App.ZoneName.GRAVE}`);
-    expect(el).not.toHaveAttribute('role', 'button');
-    expect(el).not.toHaveAttribute('tabindex');
-  });
-
-  it.each([['Enter'], [' ']])('fires onClick on %s keypress when focusable', (key) => {
-    const onClick = vi.fn();
-    renderWithProviders(
-      <ZoneStack
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.GRAVE}
-        label="Graveyard"
-        onClick={onClick}
-      />,
-      { preloadedState: stateWithZone(App.ZoneName.GRAVE, { cardCount: 0 }) },
-    );
-
-    fireEvent.keyDown(screen.getByTestId(`zone-stack-${App.ZoneName.GRAVE}`), { key });
-    expect(onClick).toHaveBeenCalledWith(App.ZoneName.GRAVE);
-  });
-});
diff --git a/webclient/src/components/Game/ZoneStack/ZoneStack.tsx b/webclient/src/components/Game/ZoneStack/ZoneStack.tsx
deleted file mode 100644
index b8afc65d4..000000000
--- a/webclient/src/components/Game/ZoneStack/ZoneStack.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useDroppable } from '@dnd-kit/core';
-
-import { useGameAccess, useScryfallCard } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-import type { Data } from '@app/types';
-import { cx } from '@app/utils';
-
-import './ZoneStack.css';
-
-export interface ZoneStackProps {
-  gameId: number;
-  playerId: number;
-  zoneName: string;
-  label: string;
-  onCardHover?: (card: Data.ServerInfo_Card) => void;
-  onClick?: (zoneName: string) => void;
-  onContextMenu?: (zoneName: string, event: React.MouseEvent) => void;
-}
-
-function ZoneStack({
-  gameId,
-  playerId,
-  zoneName,
-  label,
-  onCardHover,
-  onClick,
-  onContextMenu,
-}: ZoneStackProps) {
-  const zone = useAppSelector((state) =>
-    GameSelectors.getZone(state, gameId, playerId, zoneName),
-  );
-  const topCard: Data.ServerInfo_Card | undefined = zone
-    ? zone.byId[zone.order[zone.order.length - 1]]
-    : undefined;
-
-  const { smallUrl } = useScryfallCard(topCard ?? null);
-  const count = zone?.cardCount ?? 0;
-
-  // Disable drops onto zones the local user can't act on (opponent zones
-  // for non-judges, etc.). Server rejects the same moves; this keeps the
-  // dnd-kit over-feedback honest.
-  const { canAct } = useGameAccess(gameId, playerId);
-  const { setNodeRef, isOver } = useDroppable({
-    id: `zone-${playerId}-${zoneName}`,
-    data: { targetPlayerId: playerId, targetZone: zoneName },
-    disabled: !canAct,
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      className={cx('zone-stack', { 'zone-stack--drop-over': isOver })}
-      data-testid={`zone-stack-${zoneName}`}
-      onMouseEnter={() => topCard && onCardHover?.(topCard)}
-      onClick={() => onClick?.(zoneName)}
-      onContextMenu={(e) => onContextMenu?.(zoneName, e)}
-      onKeyDown={(e) => {
-        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
-          e.preventDefault();
-          onClick(zoneName);
-        }
-      }}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick ? 0 : undefined}
-    >
-      <div className="zone-stack__thumb">
-        {topCard && smallUrl && !topCard.faceDown ? (
-          <img className="zone-stack__image" src={smallUrl} alt={topCard.name} />
-        ) : (
-          <div className="zone-stack__placeholder" />
-        )}
-        <div className="zone-stack__count">{count}</div>
-      </div>
-      <div className="zone-stack__label">{label}</div>
-    </div>
-  );
-}
-
-export default ZoneStack;
diff --git a/webclient/src/components/Game/index.ts b/webclient/src/components/Game/index.ts
deleted file mode 100644
index 0159ae6ff..000000000
--- a/webclient/src/components/Game/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export { default as Battlefield } from './Battlefield/Battlefield';
-export { default as CardContextMenu } from './CardContextMenu/CardContextMenu';
-export { default as CardDragOverlay } from './CardDragOverlay/CardDragOverlay';
-export { default as CardPreview } from './CardPreview/CardPreview';
-export { default as CardSlot } from './CardSlot/CardSlot';
-export {
-  CardRegistryContext,
-  createCardRegistry,
-  makeCardKey,
-  useCardRegistry,
-  useRegisterCardRef,
-} from './CardRegistry/CardRegistryContext';
-export type { CardKey, CardRegistry } from './CardRegistry/CardRegistryContext';
-export { default as GameArrowOverlay } from './GameArrowOverlay/GameArrowOverlay';
-export { default as GameLog } from './GameLog/GameLog';
-export { default as HandContextMenu } from './HandContextMenu/HandContextMenu';
-export { default as HandZone } from './HandZone/HandZone';
-export { default as OpponentSelector } from './OpponentSelector/OpponentSelector';
-export { default as PhaseBar } from './PhaseBar/PhaseBar';
-export { default as PlayerBoard } from './PlayerBoard/PlayerBoard';
-export { default as PlayerContextMenu } from './PlayerContextMenu/PlayerContextMenu';
-export { default as PlayerInfoPanel } from './PlayerInfoPanel/PlayerInfoPanel';
-export { default as PlayerList } from './PlayerList/PlayerList';
-export { default as RightPanel } from './RightPanel/RightPanel';
-export { default as StackStrip } from './StackStrip/StackStrip';
-export { default as TurnControls } from './TurnControls/TurnControls';
-export { default as ZoneContextMenu } from './ZoneContextMenu/ZoneContextMenu';
-export { default as ZoneRail } from './ZoneRail/ZoneRail';
-export { default as ZoneStack } from './ZoneStack/ZoneStack';
diff --git a/webclient/src/components/Guard/AuthGuard.tsx b/webclient/src/components/Guard/AuthGuard.tsx
index 43051a5e9..897556613 100644
--- a/webclient/src/components/Guard/AuthGuard.tsx
+++ b/webclient/src/components/Guard/AuthGuard.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { ServerSelectors, useAppSelector } from '@app/store';
diff --git a/webclient/src/components/Guard/ModGuard.tsx b/webclient/src/components/Guard/ModGuard.tsx
index 5c6bdf529..96844b436 100644
--- a/webclient/src/components/Guard/ModGuard.tsx
+++ b/webclient/src/components/Guard/ModGuard.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { ServerSelectors, useAppSelector } from '@app/store';
diff --git a/webclient/src/components/InputAction/InputAction.css b/webclient/src/components/InputAction/InputAction.css
index 269d8a3f2..25e784a3a 100644
--- a/webclient/src/components/InputAction/InputAction.css
+++ b/webclient/src/components/InputAction/InputAction.css
@@ -12,7 +12,7 @@
 
 .input-action__item {
   width: 100%;
-  height: 100%;
+  height: 100%; 
 }
 .input-action__item > div {
   margin: 0;
diff --git a/webclient/src/components/InputAction/InputAction.tsx b/webclient/src/components/InputAction/InputAction.tsx
index 6cccbab46..7326c0a35 100644
--- a/webclient/src/components/InputAction/InputAction.tsx
+++ b/webclient/src/components/InputAction/InputAction.tsx
@@ -1,25 +1,12 @@
-import { Field } from 'react-final-form';
+import React from 'react';
+import { Field } from 'react-final-form'
 import Button from '@mui/material/Button';
 
 import { InputField } from '..';
 
 import './InputAction.css';
 
-interface InputActionProps {
-  action: string;
-  label: string;
-  name: string;
-  validate?: (value: unknown) => string | undefined | false;
-  disabled?: boolean;
-}
-
-const InputAction = ({
-  action,
-  label,
-  name,
-  validate = () => undefined,
-  disabled = false,
-}: InputActionProps) => (
+const InputAction = ({ action, label, name, validate = () => false, disabled = false }) => (
   <div className="input-action">
     <div className="input-action__item">
       <Field label={label} name={name} component={InputField} validate={validate} />
diff --git a/webclient/src/components/InputField/InputField.tsx b/webclient/src/components/InputField/InputField.tsx
index 8a8ead4ae..3299ba383 100644
--- a/webclient/src/components/InputField/InputField.tsx
+++ b/webclient/src/components/InputField/InputField.tsx
@@ -1,57 +1,57 @@
+import React from 'react';
 import { styled } from '@mui/material/styles';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import TextField from '@mui/material/TextField';
 import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
 
-import type { FinalFormFieldProps } from '../fieldTypes';
-
 import './InputField.css';
 
 const PREFIX = 'InputField';
 
 const classes = {
-  root: `${PREFIX}-root`,
+  root: `${PREFIX}-root`
 };
 
 const Root = styled('div')(({ theme }) => ({
   [`&.${classes.root}`]: {
     '& .InputField-error': {
-      color: theme.palette.error.main,
+      color: theme.palette.error.main
     },
+
     '& .InputField-warning': {
-      color: theme.palette.warning.main,
+      color: theme.palette.warning.main
     },
   },
 }));
 
-type InputFieldProps =
-  FinalFormFieldProps<string, HTMLInputElement> &
-  Omit<TextFieldProps, 'value' | 'onChange' | 'onBlur' | 'onFocus' | 'name'>;
-
-const InputField = ({ input, meta, ...args }: InputFieldProps) => {
+const InputField = ({ input, meta, ...args }) => {
   const { touched, error, warning } = meta;
 
   return (
-    <Root className={`InputField ${classes.root}`}>
-      {touched && (
+    <Root className={'InputField ' + classes.root}>
+      { touched && (
         <div className="InputField-validation">
-          {(error &&
-            <div className="InputField-error">
-              {error}
-              <ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
-            </div>
-          ) || (warning && <div className="InputField-warning">{warning}</div>)}
+          {
+            (error &&
+              <div className="InputField-error">
+                {error}
+                <ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
+              </div>
+            ) ||
+
+            (warning && <div className="InputField-warning">{warning}</div>)
+          }
         </div>
-      )}
+      ) }
 
       <TextField
-        autoComplete="off"
-        {...input}
-        {...args}
+        autoComplete='off'
+        { ...input }
+        { ...args }
         className="rounded"
         variant="outlined"
         margin="dense"
         size="small"
-        fullWidth
+        fullWidth={true}
       />
     </Root>
   );
diff --git a/webclient/src/components/KnownHosts/KnownHosts.tsx b/webclient/src/components/KnownHosts/KnownHosts.tsx
index 57e0621a3..416de9875 100644
--- a/webclient/src/components/KnownHosts/KnownHosts.tsx
+++ b/webclient/src/components/KnownHosts/KnownHosts.tsx
@@ -1,6 +1,7 @@
+import { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import { Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { Select, MenuItem } from '@mui/material';
 import Button from '@mui/material/Button';
 import FormControl from '@mui/material/FormControl';
 import IconButton from '@mui/material/IconButton';
@@ -12,14 +13,21 @@ import AddIcon from '@mui/icons-material/Add';
 import EditRoundedIcon from '@mui/icons-material/Edit';
 import ErrorOutlinedIcon from '@mui/icons-material/ErrorOutlined';
 
+import { LoadingState, useKnownHosts, useReduxEffect, useWebClient } from '@app/hooks';
 import { KnownHostDialog } from '@app/dialogs';
 import { getHostPort, HostDTO } from '@app/services';
-
-import type { FinalFormFieldProps } from '../fieldTypes';
-import { TestConnection, useKnownHostsComponent } from './useKnownHostsComponent';
+import { ServerTypes } from '@app/store';
+import { App } from '@app/types';
+import Toast from '../Toast/Toast';
 
 import './KnownHosts.css';
 
+enum TestConnection {
+  TESTING = 'testing',
+  FAILED = 'failed',
+  SUCCESS = 'success',
+}
+
 const PREFIX = 'KnownHosts';
 
 const classes = {
@@ -49,39 +57,120 @@ const Root = styled('div')(({ theme }) => ({
     },
   },
 }));
-
-type KnownHostsProps = FinalFormFieldProps<HostDTO | undefined, HTMLElement> & {
-  disabled?: boolean;
-};
-
-const KnownHosts = ({ input, meta, disabled }: KnownHostsProps) => {
+const KnownHosts = (props: any) => {
+  const { input, meta, disabled } = props;
+  const onChange: (value: HostDTO) => void = input.onChange;
   const { touched, error, warning } = meta;
 
   const { t } = useTranslation();
-  const {
-    hosts,
-    selectedHost,
-    testConnectionStatus,
-    dialogState,
-    onPick,
-    openAddKnownHostDialog,
-    openEditKnownHostDialog,
-    closeKnownHostDialog,
-    handleDialogRemove,
-    handleDialogSubmit,
-  } = useKnownHostsComponent({ onChange: input.onChange });
+  const webClient = useWebClient();
+  const knownHosts = useKnownHosts();
 
-  const selectedId = selectedHost?.id ?? '';
+  const [dialogState, setDialogState] = useState<{ open: boolean; edit: HostDTO | null }>({
+    open: false,
+    edit: null,
+  });
 
-  const handleSelectChange = (event: SelectChangeEvent<number | ''>) => {
-    const value = event.target.value;
-    if (typeof value === 'number') {
-      void onPick(value);
+  const [testingConnection, setTestingConnection] = useState<TestConnection | null>(null);
+
+  const [showCreateToast, setShowCreateToast] = useState(false);
+  const [showDeleteToast, setShowDeleteToast] = useState(false);
+  const [showEditToast, setShowEditToast] = useState(false);
+
+  const selectedHost =
+    knownHosts.status === LoadingState.READY ? knownHosts.value?.selectedHost : undefined;
+  const hosts = knownHosts.status === LoadingState.READY ? knownHosts.value?.hosts ?? [] : [];
+
+  const testConnection = (host: HostDTO) => {
+    setTestingConnection(TestConnection.TESTING);
+    webClient.request.authentication.testConnection({ ...getHostPort(host) });
+  };
+
+  // Mirror the store's selectedHost into the form field. Also kick off a
+  // connection test so the user sees the green/red indicator on mount.
+  useEffect(() => {
+    if (!selectedHost) {
+      return;
     }
+    onChange(selectedHost);
+    testConnection(selectedHost);
+  }, [selectedHost]);
+
+  useReduxEffect(
+    () => {
+      setTestingConnection(TestConnection.SUCCESS);
+    },
+    ServerTypes.TEST_CONNECTION_SUCCESSFUL,
+    []
+  );
+
+  useReduxEffect(
+    () => {
+      setTestingConnection(TestConnection.FAILED);
+    },
+    ServerTypes.TEST_CONNECTION_FAILED,
+    []
+  );
+
+  const onPick = async (host: HostDTO) => {
+    if (knownHosts.status !== LoadingState.READY) {
+      return;
+    }
+    onChange(host);
+    await knownHosts.select(host.id!);
+    testConnection(host);
+  };
+
+  const openAddKnownHostDialog = () => {
+    setDialogState((s) => ({ ...s, open: true, edit: null }));
+  };
+
+  const openEditKnownHostDialog = (host: HostDTO) => {
+    setDialogState((s) => ({ ...s, open: true, edit: host }));
+  };
+
+  const closeKnownHostDialog = () => {
+    setDialogState((s) => ({ ...s, open: false }));
+  };
+
+  const handleDialogRemove = async ({ id }: { id: number }) => {
+    if (knownHosts.status !== LoadingState.READY) {
+      return;
+    }
+    await knownHosts.remove(id);
+    closeKnownHostDialog();
+    setShowDeleteToast(true);
+  };
+
+  const handleDialogSubmit = async ({
+    id,
+    name,
+    host,
+    port,
+  }: {
+    id?: number;
+    name: string;
+    host: string;
+    port: string;
+  }) => {
+    if (knownHosts.status !== LoadingState.READY) {
+      return;
+    }
+
+    if (id) {
+      await knownHosts.update(id, { name, host, port });
+      setShowEditToast(true);
+    } else {
+      const newHost: App.Host = { name, host, port, editable: true };
+      await knownHosts.add(newHost);
+      setShowCreateToast(true);
+    }
+
+    closeKnownHostDialog();
   };
 
   return (
-    <Root className={`KnownHosts ${classes.root}`}>
+    <Root className={'KnownHosts ' + classes.root}>
       <FormControl className="KnownHosts-form" size="small" variant="outlined">
         {touched && (
           <div className="KnownHosts-validation">
@@ -102,25 +191,25 @@ const KnownHosts = ({ input, meta, disabled }: KnownHostsProps) => {
           label="Host"
           margin="dense"
           name="host"
-          value={selectedId}
-          fullWidth
-          onChange={handleSelectChange}
+          value={selectedHost ?? ''}
+          fullWidth={true}
+          onChange={(e) => onPick(e.target.value as unknown as HostDTO)}
           disabled={disabled}
         >
-          <Button onClick={openAddKnownHostDialog}>
+          <Button value={selectedHost} onClick={openAddKnownHostDialog}>
             <span>{t('KnownHosts.add')}</span>
             <AddIcon fontSize="small" color="primary" />
           </Button>
 
-          {hosts.map((host) => {
+          {hosts.map((host, index) => {
             const hostPort = getHostPort(host);
 
             return (
-              <MenuItem value={host.id} key={host.id}>
+              <MenuItem value={host as any} key={host.id ?? index}>
                 <div className="KnownHosts-item">
                   <div className="KnownHosts-item__wrapper">
-                    <div className={`KnownHosts-item__status ${testConnectionStatus ?? ''}`}>
-                      {testConnectionStatus === TestConnection.FAILED ? (
+                    <div className={'KnownHosts-item__status ' + testingConnection}>
+                      {testingConnection === TestConnection.FAILED ? (
                         <PortableWifiOffIcon fontSize="small" />
                       ) : (
                         <WifiTetheringIcon fontSize="small" />
@@ -156,11 +245,20 @@ const KnownHosts = ({ input, meta, disabled }: KnownHostsProps) => {
 
       <KnownHostDialog
         isOpen={dialogState.open}
-        host={dialogState.edit ?? undefined}
+        host={dialogState.edit}
         onRemove={handleDialogRemove}
         onSubmit={handleDialogSubmit}
         handleClose={closeKnownHostDialog}
       />
+      <Toast open={showCreateToast} onClose={() => setShowCreateToast(false)}>
+        {t('KnownHosts.toast', { mode: 'created' })}
+      </Toast>
+      <Toast open={showDeleteToast} onClose={() => setShowDeleteToast(false)}>
+        {t('KnownHosts.toast', { mode: 'deleted' })}
+      </Toast>
+      <Toast open={showEditToast} onClose={() => setShowEditToast(false)}>
+        {t('KnownHosts.toast', { mode: 'edited' })}
+      </Toast>
     </Root>
   );
 };
diff --git a/webclient/src/components/KnownHosts/useKnownHostsComponent.ts b/webclient/src/components/KnownHosts/useKnownHostsComponent.ts
deleted file mode 100644
index 8ea7a2618..000000000
--- a/webclient/src/components/KnownHosts/useKnownHostsComponent.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useToast } from '@app/components';
-import { LoadingState, useKnownHosts, useReduxEffect, useWebClient } from '@app/hooks';
-import { getHostPort, HostDTO } from '@app/services';
-import { ServerDispatch, ServerSelectors, ServerTypes, useAppSelector } from '@app/store';
-import { App } from '@app/types';
-
-export enum TestConnection {
-  TESTING = 'testing',
-  FAILED = 'failed',
-  SUCCESS = 'success',
-}
-
-export interface KnownHostsComponent {
-  hosts: App.Host[];
-  selectedHost: App.Host | undefined;
-  testConnectionStatus: TestConnection | null;
-  dialogState: { open: boolean; edit: HostDTO | null };
-  onPick: (id: number) => Promise<void>;
-  openAddKnownHostDialog: () => void;
-  openEditKnownHostDialog: (host: HostDTO) => void;
-  closeKnownHostDialog: () => void;
-  handleDialogRemove: (args: { id: number }) => Promise<void>;
-  handleDialogSubmit: (args: {
-    id?: number;
-    name: string;
-    host: string;
-    port: string;
-  }) => Promise<void>;
-}
-
-export interface UseKnownHostsComponentArgs {
-  onChange: (value: HostDTO) => void;
-}
-
-type ToastMode = 'created' | 'deleted' | 'edited';
-
-export function useKnownHostsComponent({
-  onChange,
-}: UseKnownHostsComponentArgs): KnownHostsComponent {
-  const webClient = useWebClient();
-  const knownHosts = useKnownHosts();
-  const { t } = useTranslation();
-
-  const [toastMode, setToastMode] = useState<ToastMode>('created');
-  const knownHostToast = useToast({
-    key: 'known-hosts-action',
-    children: t('KnownHosts.toast', { mode: toastMode }),
-  });
-
-  const [dialogState, setDialogState] = useState<{ open: boolean; edit: HostDTO | null }>({
-    open: false,
-    edit: null,
-  });
-
-  // UI status lives in redux (see ServerSelectors.getTestConnectionStatus) so
-  // the LoginForm can gate its submit button + hashing-capability UI on the
-  // same signal. Tracks-the-host-pending lives in a ref — redux doesn't know
-  // the Host.id, and we need it to persist `supportsHashedPassword` on success.
-  const testConnectionStatus = useAppSelector(ServerSelectors.getTestConnectionStatus) as
-    | TestConnection
-    | null;
-  const pendingTestRef = useRef<HostDTO | null>(null);
-
-  const selectedHost =
-    knownHosts.status === LoadingState.READY ? knownHosts.value?.selectedHost : undefined;
-  const hosts = knownHosts.status === LoadingState.READY ? knownHosts.value?.hosts ?? [] : [];
-
-  const testConnection = (host: HostDTO) => {
-    pendingTestRef.current = host;
-    ServerDispatch.testConnectionStarted();
-    webClient.request.authentication.testConnection({ ...getHostPort(host) });
-  };
-
-  useEffect(() => {
-    if (!selectedHost) {
-      return;
-    }
-    onChange(selectedHost);
-    testConnection(selectedHost);
-  }, [selectedHost]);
-
-  useReduxEffect<{ supportsHashedPassword: boolean }>(({ payload: { supportsHashedPassword } }) => {
-    const host = pendingTestRef.current;
-    if (!host) {
-      return;
-    }
-    pendingTestRef.current = null;
-
-    if (host.id != null && host.supportsHashedPassword !== supportsHashedPassword) {
-      void knownHosts.update(host.id, { supportsHashedPassword });
-    }
-  }, ServerTypes.TEST_CONNECTION_SUCCESSFUL, []);
-
-  useReduxEffect(() => {
-    pendingTestRef.current = null;
-  }, ServerTypes.TEST_CONNECTION_FAILED, []);
-
-  const fireToast = (mode: ToastMode) => {
-    setToastMode(mode);
-    knownHostToast.openToast();
-  };
-
-  const onPick = async (id: number) => {
-    if (knownHosts.status !== LoadingState.READY) {
-      return;
-    }
-    const host = knownHosts.value?.hosts.find((h) => h.id === id);
-    if (!host) {
-      return;
-    }
-    onChange(host);
-    await knownHosts.select(id);
-    testConnection(host);
-  };
-
-  const openAddKnownHostDialog = () => {
-    setDialogState((s) => ({ ...s, open: true, edit: null }));
-  };
-
-  const openEditKnownHostDialog = (host: HostDTO) => {
-    setDialogState((s) => ({ ...s, open: true, edit: host }));
-  };
-
-  const closeKnownHostDialog = () => {
-    setDialogState((s) => ({ ...s, open: false }));
-  };
-
-  const handleDialogRemove = async ({ id }: { id: number }) => {
-    if (knownHosts.status !== LoadingState.READY) {
-      return;
-    }
-    await knownHosts.remove(id);
-    closeKnownHostDialog();
-    fireToast('deleted');
-  };
-
-  const handleDialogSubmit = async ({
-    id,
-    name,
-    host,
-    port,
-  }: {
-    id?: number;
-    name: string;
-    host: string;
-    port: string;
-  }) => {
-    if (knownHosts.status !== LoadingState.READY) {
-      return;
-    }
-
-    if (id) {
-      await knownHosts.update(id, { name, host, port });
-      fireToast('edited');
-    } else {
-      const newHost: App.Host = { name, host, port, editable: true };
-      await knownHosts.add(newHost);
-      fireToast('created');
-    }
-
-    closeKnownHostDialog();
-  };
-
-  return {
-    hosts,
-    selectedHost,
-    testConnectionStatus,
-    dialogState,
-    onPick,
-    openAddKnownHostDialog,
-    openEditKnownHostDialog,
-    closeKnownHostDialog,
-    handleDialogRemove,
-    handleDialogSubmit,
-  };
-}
diff --git a/webclient/src/components/LanguageDropdown/LanguageDropdown.css b/webclient/src/components/LanguageDropdown/LanguageDropdown.css
index 1af4f4efa..c4db3d0d0 100644
--- a/webclient/src/components/LanguageDropdown/LanguageDropdown.css
+++ b/webclient/src/components/LanguageDropdown/LanguageDropdown.css
@@ -1,3 +1,6 @@
+.LanguageDropdown {
+}
+
 .LanguageDropdown-item {
   display: flex;
   align-items: center;
diff --git a/webclient/src/components/LanguageDropdown/LanguageDropdown.tsx b/webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
index cadc715fc..d98defb2b 100644
--- a/webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
+++ b/webclient/src/components/LanguageDropdown/LanguageDropdown.tsx
@@ -1,5 +1,7 @@
+
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { Select, MenuItem } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 
 import { Images } from '@app/images';
@@ -9,43 +11,48 @@ import './LanguageDropdown.css';
 
 const LanguageDropdown = () => {
   const { t, i18n } = useTranslation();
-  const currentLanguage = i18n.resolvedLanguage ?? i18n.language ?? '';
+  // i18next `resolvedLanguage` is undefined until a registered resource matches;
+  // MUI Select requires a concrete, in-range value.
+  const [language, setLanguage] = useState(i18n.resolvedLanguage ?? i18n.language ?? '');
 
-  const onLanguageChange = (event: SelectChangeEvent) => {
-    const next = event.target.value as App.Language;
-    if (next !== currentLanguage) {
-      void i18n.changeLanguage(next);
+  useEffect(() => {
+    if (language !== i18n.resolvedLanguage) {
+      i18n.changeLanguage(language);
     }
-  };
+  }, [language]);
 
   return (
-    <FormControl size="small" variant="outlined" className="LanguageDropdown">
+    <FormControl size='small' variant='outlined' className='LanguageDropdown'>
       <Select
-        id="LanguageDropdown-select"
-        margin="dense"
-        value={currentLanguage}
-        fullWidth
-        onChange={onLanguageChange}
+        id='LanguageDropdown-select'
+        margin='dense'
+        value={language}
+        fullWidth={true}
+        onChange={e => setLanguage(e.target.value as App.Language)}
       >
-        {Object.keys(App.Language).map((lang) => {
-          const country = App.LanguageCountry[lang];
-          const nativeName = App.LanguageNative[lang];
-          const translatedName = t(`Common.languages.${lang}`);
+        {
+          Object.keys(App.Language).map((lang) => {
+            const country = App.LanguageCountry[lang];
 
-          return (
-            <MenuItem value={lang} key={lang}>
-              <div className="LanguageDropdown-item">
-                <img className="LanguageDropdown-item__image" src={Images.Countries[country]} />
-                <span className="LanguageDropdown-item__label">
-                  {nativeName} {nativeName !== translatedName && <>({translatedName})</>}
-                </span>
-              </div>
-            </MenuItem>
-          );
-        })}
+            return (
+              <MenuItem value={lang} key={lang}>
+                <div className="LanguageDropdown-item">
+                  <img className="LanguageDropdown-item__image" src={Images.Countries[country]} />
+                  <span className="LanguageDropdown-item__label">
+                    {App.LanguageNative[lang]} {
+                      App.LanguageNative[lang] !== t(`Common.languages.${lang}`) && (
+                        <>({ t(`Common.languages.${lang}`) })</>
+                      )
+                    }
+                  </span>
+                </div>
+              </MenuItem>
+            );
+          })
+        }
       </Select>
     </FormControl>
-  );
+  )
 };
 
 export default LanguageDropdown;
diff --git a/webclient/src/components/Message/CardCallout.tsx b/webclient/src/components/Message/CardCallout.tsx
index ac80b366f..3872ae17f 100644
--- a/webclient/src/components/Message/CardCallout.tsx
+++ b/webclient/src/components/Message/CardCallout.tsx
@@ -1,11 +1,13 @@
+
+import React, { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Popover from '@mui/material/Popover';
 
+import { CardDTO, TokenDTO } from '@app/services';
+
 import CardDetails from '../CardDetails/CardDetails';
 import TokenDetails from '../TokenDetails/TokenDetails';
 
-import { useCardCallout } from './useCardCallout';
-
 import './CardCallout.css';
 
 const PREFIX = 'CardCallout';
@@ -25,13 +27,32 @@ const Root = styled('span')(() => ({
   }
 }));
 
-interface CardCalloutProps {
-  name: string;
-}
+const CardCallout = ({ name }) => {
+  const [card, setCard] = useState<CardDTO>(null);
+  const [token, setToken] = useState<TokenDTO>(null);
+  const [anchorEl, setAnchorEl] = useState<Element>(null);
 
-const CardCallout = ({ name }: CardCalloutProps) => {
-  const { card, token, anchorEl, open, handlePopoverOpen, handlePopoverClose } =
-    useCardCallout(name);
+  useMemo(async () => {
+    const card = await CardDTO.get(name);
+    if (card) {
+      return setCard(card)
+    }
+
+    const token = await TokenDTO.get(name);
+    if (token) {
+      return setToken(token);
+    }
+  }, [name]);
+
+  const handlePopoverOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
 
   return (
     <Root className='callout'>
@@ -60,8 +81,8 @@ const CardCallout = ({ name }: CardCalloutProps) => {
             }}
           >
             <div className="callout-card">
-              {card && (<CardDetails card={card} />)}
-              {token && (<TokenDetails token={token} />)}
+              { card && (<CardDetails card={card} />) }
+              { token && (<TokenDetails token={token} />) }
             </div>
           </Popover>
         )
diff --git a/webclient/src/components/Message/Message.tsx b/webclient/src/components/Message/Message.tsx
index ad3466e07..bb5617242 100644
--- a/webclient/src/components/Message/Message.tsx
+++ b/webclient/src/components/Message/Message.tsx
@@ -1,21 +1,14 @@
+
+import React, { useEffect, useState } from 'react';
+
 import { NavLink, generatePath } from 'react-router-dom';
-import type { ReactNode } from 'react';
 
 import { App } from '@app/types';
 
 import CardCallout from './CardCallout';
-import { useParsedMessage } from './useMessage';
 import './Message.css';
 
-interface MessagePayload {
-  message: string;
-}
-
-interface MessageProps {
-  message: MessagePayload;
-}
-
-const Message = ({ message: { message } }: MessageProps) => (
+const Message = ({ message: { message } }) => (
   <div className='message'>
     <div className='message__detail'>
       <ParsedMessage message={message} />
@@ -23,33 +16,42 @@ const Message = ({ message: { message } }: MessageProps) => (
   </div>
 );
 
-interface ParsedMessageProps {
-  message: string;
-}
+const ParsedMessage = ({ message }) => {
+  const [messageChunks, setMessageChunks] = useState(null);
+  const [name, setName] = useState(null);
 
-const ParsedMessage = ({ message }: ParsedMessageProps) => {
-  const { name, chunks } = useParsedMessage(message, parseChunks);
+  useEffect(() => {
+    const name = message.match(App.MESSAGE_SENDER_REGEX);
+
+    if (name) {
+      setName(name[1]);
+    }
+
+    setMessageChunks(parseMessage(message));
+  }, [message]);
 
   return (
     <div>
-      {name && (<strong><PlayerLink name={name} />:</strong>)}
-      {chunks}
+      { name && (<strong><PlayerLink name={name} />:</strong>) }
+      { messageChunks }
     </div>
   );
 };
 
-interface PlayerLinkProps {
-  name: string;
-  label?: string;
-}
-
-const PlayerLink = ({ name, label = name }: PlayerLinkProps) => (
+const PlayerLink = ({ name, label = name }) => (
   <NavLink className="link" to={generatePath(App.RouteEnum.PLAYER, { name })}>
     {label}
   </NavLink>
 );
 
-function parseChunks(chunk: string, index: number): ReactNode {
+function parseMessage(message) {
+  return message.replace(App.MESSAGE_SENDER_REGEX, '')
+    .split(App.CARD_CALLOUT_REGEX)
+    .filter(chunk => !!chunk)
+    .map(parseChunks);
+}
+
+function parseChunks(chunk, index) {
   if (chunk.match(App.CARD_CALLOUT_REGEX)) {
     const name = chunk.replace(App.CALLOUT_BOUNDARY_REGEX, '').trim();
     return (<CardCallout name={name} key={index}></CardCallout>);
@@ -66,9 +68,9 @@ function parseChunks(chunk: string, index: number): ReactNode {
   return chunk;
 }
 
-function parseUrlChunk(chunk: string): ReactNode {
+function parseUrlChunk(chunk) {
   return chunk.split(App.URL_REGEX)
-    .filter((urlChunk) => !!urlChunk)
+    .filter(urlChunk => !!urlChunk)
     .map((urlChunk, index) => {
       if (urlChunk.match(App.URL_REGEX)) {
         return (<a className='link' href={urlChunk} key={index} target='_blank' rel='noopener noreferrer'>{urlChunk}</a>);
@@ -78,15 +80,15 @@ function parseUrlChunk(chunk: string): ReactNode {
     });
 }
 
-function parseMentionChunk(chunk: string): ReactNode {
+function parseMentionChunk(chunk) {
   return chunk.split(App.MENTION_REGEX)
-    .filter((mentionChunk) => !!mentionChunk)
+    .filter(mentionChunk => !!mentionChunk)
     .map((mentionChunk, index) => {
       const mention = mentionChunk.match(App.MENTION_REGEX);
 
       if (mention) {
         const name = mention[0].substr(1);
-        return (<PlayerLink name={name} label={mention[0]} key={index} />);
+        return (<PlayerLink name={name} label={mention} key={index} />);
       }
 
       return mentionChunk;
diff --git a/webclient/src/components/Message/useCardCallout.ts b/webclient/src/components/Message/useCardCallout.ts
deleted file mode 100644
index f6e92a220..000000000
--- a/webclient/src/components/Message/useCardCallout.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import { CardDTO, TokenDTO } from '@app/services';
-
-export interface CardCallout {
-  card: CardDTO | null;
-  token: TokenDTO | null;
-  anchorEl: Element | null;
-  open: boolean;
-  handlePopoverOpen: (event: React.MouseEvent) => void;
-  handlePopoverClose: () => void;
-}
-
-export function useCardCallout(name: string): CardCallout {
-  const [card, setCard] = useState<CardDTO | null>(null);
-  const [token, setToken] = useState<TokenDTO | null>(null);
-  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
-
-  useMemo(async () => {
-    const c = await CardDTO.get(name);
-    if (c) {
-      return setCard(c);
-    }
-
-    const t = await TokenDTO.get(name);
-    if (t) {
-      return setToken(t);
-    }
-  }, [name]);
-
-  const handlePopoverOpen = (event: React.MouseEvent) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
-
-  return { card, token, anchorEl, open, handlePopoverOpen, handlePopoverClose };
-}
diff --git a/webclient/src/components/Message/useMessage.ts b/webclient/src/components/Message/useMessage.ts
deleted file mode 100644
index 1139adadc..000000000
--- a/webclient/src/components/Message/useMessage.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useMemo, type ReactNode } from 'react';
-
-import { App } from '@app/types';
-
-export interface ParsedMessage {
-  name: string | null;
-  chunks: ReactNode[];
-}
-
-export type ChunkParser = (chunk: string, index: number) => ReactNode;
-
-// `parseChunk` must be a stable reference across renders (module-level function
-// or `useCallback`). Passing a fresh closure every render will thrash the memo.
-export function useParsedMessage(message: string, parseChunk: ChunkParser): ParsedMessage {
-  return useMemo<ParsedMessage>(() => {
-    const match = message.match(App.MESSAGE_SENDER_REGEX);
-    const name = match ? match[1] : null;
-    return {
-      name,
-      chunks: parseMessage(message, parseChunk),
-    };
-  }, [message, parseChunk]);
-}
-
-export function parseMessage(message: string, parseChunk: ChunkParser): ReactNode[] {
-  return message
-    .replace(App.MESSAGE_SENDER_REGEX, '')
-    .split(App.CARD_CALLOUT_REGEX)
-    .filter((chunk) => !!chunk)
-    .map(parseChunk);
-}
diff --git a/webclient/src/components/ScrollToBottomOnChanges/ScrollToBottomOnChanges.tsx b/webclient/src/components/ScrollToBottomOnChanges/ScrollToBottomOnChanges.tsx
index 2f952f021..95f10f62c 100644
--- a/webclient/src/components/ScrollToBottomOnChanges/ScrollToBottomOnChanges.tsx
+++ b/webclient/src/components/ScrollToBottomOnChanges/ScrollToBottomOnChanges.tsx
@@ -1,23 +1,24 @@
-import { ReactNode, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
-interface ScrollToBottomOnChangesProps {
-  content: ReactNode;
-  changes: unknown;
-}
+const ScrollToBottomOnChanges = ({ content, changes }) => {
+  const messagesEndRef = useRef(null);
 
-const ScrollToBottomOnChanges = ({ content, changes }: ScrollToBottomOnChangesProps) => {
-  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+  const scrollToBottom = () => {
+    messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
+  }
 
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [changes]);
+  useEffect(scrollToBottom, [changes]);
+
+  const styling = {
+    height: '100%'
+  };
 
   return (
-    <div style={{ height: '100%' }}>
+    <div style={styling}>
       {content}
       <div ref={messagesEndRef} />
     </div>
-  );
-};
+  )
+}
 
 export default ScrollToBottomOnChanges;
diff --git a/webclient/src/components/SelectField/SelectField.tsx b/webclient/src/components/SelectField/SelectField.tsx
index d01ba7e19..fdbef0e9c 100644
--- a/webclient/src/components/SelectField/SelectField.tsx
+++ b/webclient/src/components/SelectField/SelectField.tsx
@@ -1,29 +1,14 @@
+import React from 'react';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 
-import type { FinalFormFieldProps } from '../fieldTypes';
-
 import './SelectField.css';
 
-export interface SelectFieldOption<V extends string | number = string | number> {
-  value: V;
-  label: string;
-}
-
-interface SelectFieldProps<V extends string | number = string | number> extends FinalFormFieldProps<V, HTMLElement> {
-  label: string;
-  options: SelectFieldOption<V>[];
-}
-
-const SelectField = <V extends string | number = string | number>({
-  input,
-  label,
-  options,
-}: SelectFieldProps<V>) => {
-  const id = `${label}-select-field`;
-  const labelId = `${id}-label`;
+const SelectField = ({ input, label, options, value }) => {
+  const id = label + '-select-field';
+  const labelId = id + '-label';
 
   return (
     <FormControl variant="outlined" margin="dense" className="select-field">
@@ -31,15 +16,13 @@ const SelectField = <V extends string | number = string | number>({
       <Select
         labelId={labelId}
         id={id}
-        label={label}
-        {...input}
-      >
-        {options.map(option => (
-          <MenuItem value={option.value} key={option.value}>
-            {option.label}
-          </MenuItem>
-        ))}
-      </Select>
+        value={value}
+        { ...input }
+      >{
+          options.map((option, index) => (
+            <MenuItem value={index} key={index}> { option } </MenuItem>
+          ))
+        }</Select>
     </FormControl>
   );
 };
diff --git a/webclient/src/components/ThreePaneLayout/ThreePaneLayout.css b/webclient/src/components/ThreePaneLayout/ThreePaneLayout.css
index 19597eacd..f439dee5c 100644
--- a/webclient/src/components/ThreePaneLayout/ThreePaneLayout.css
+++ b/webclient/src/components/ThreePaneLayout/ThreePaneLayout.css
@@ -12,7 +12,7 @@
 
 .three-pane-layout .grid-main {
   display: flex;
-  flex-direction: column;
+  flex-direction: column; 
 }
 
 .three-pane-layout .grid-main__top {
diff --git a/webclient/src/components/Toast/Toast.tsx b/webclient/src/components/Toast/Toast.tsx
index 2f69869cb..faf4af586 100644
--- a/webclient/src/components/Toast/Toast.tsx
+++ b/webclient/src/components/Toast/Toast.tsx
@@ -1,53 +1,59 @@
-import { ReactNode, SyntheticEvent } from 'react';
+import * as React from 'react'
+import { createPortal } from 'react-dom'
 
-import Alert, { AlertColor } from '@mui/material/Alert';
+import Alert from '@mui/material/Alert';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import Slide, { SlideProps } from '@mui/material/Slide';
+import Slide from '@mui/material/Slide';
 import Snackbar from '@mui/material/Snackbar';
 
 const iconMapping = {
-  success: <CheckCircleIcon />,
-};
-
-export interface ToastProps {
-  open: boolean;
-  onClose: (event?: SyntheticEvent) => void;
-  severity?: AlertColor;
-  autoHideDuration?: number;
-  children?: ReactNode;
+  success: <CheckCircleIcon />
 }
 
-// MUI's Snackbar already self-portals to the end of document.body; adding our
-// own createPortal wrapper would leak <div>s under React StrictMode's double-
-// invoked effects. Render the Snackbar directly.
-function Toast({ open, onClose, severity = 'success', autoHideDuration = 10000, children }: ToastProps) {
-  const handleClose = (event?: SyntheticEvent | Event, reason?: string) => {
+function Toast(props) {
+  const { open, onClose, severity = 'success', autoHideDuration = 10000, children } = props
+
+  const rootElemRef = React.useRef(document.createElement('div'));
+
+  React.useEffect(() => {
+    document.body.appendChild(rootElemRef.current)
+    return () => {
+      rootElemRef.current.remove();
+    }
+  }, [rootElemRef])
+
+  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
     if (reason === 'clickaway') {
       return;
     }
-    onClose(event as SyntheticEvent | undefined);
+    onClose(event);
   };
 
-  return (
+  const node = (
     <Snackbar
       open={open}
       autoHideDuration={autoHideDuration}
       onClose={handleClose}
-      slots={{ transition: TransitionLeft }}
+      TransitionComponent={TransitionLeft}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
     >
-      <Alert
-        onClose={handleClose}
-        severity={severity}
-        iconMapping={iconMapping}
+      <Alert onClose={handleClose} severity={severity} iconMapping={iconMapping}
         slotProps={{ message: { children } }}
       />
     </Snackbar>
+  )
+  if (!rootElemRef.current) {
+    return null
+  }
+
+  return createPortal(
+    node,
+    rootElemRef.current
   );
 }
 
-function TransitionLeft(props: SlideProps) {
+function TransitionLeft(props) {
   return <Slide {...props} direction="left" />;
 }
 
-export default Toast;
+export default Toast
diff --git a/webclient/src/components/Toast/ToastContext.tsx b/webclient/src/components/Toast/ToastContext.tsx
index 9978c1680..0b92fdde3 100644
--- a/webclient/src/components/Toast/ToastContext.tsx
+++ b/webclient/src/components/Toast/ToastContext.tsx
@@ -1,77 +1,71 @@
-import { createContext, FC, PropsWithChildren, ReactNode, useContext, useEffect, useReducer } from 'react';
+import { createContext, FC, PropsWithChildren, ReactChild, ReactNode, useContext, useEffect, useReducer, Context } from 'react'
 
-import { ACTIONS, initialState, reducer, ToastEntry } from './reducer';
-import Toast from './Toast';
+import { ACTIONS, initialState, reducer } from './reducer';
+import Toast from './Toast'
 
-interface ToastContextValue {
-  toasts: Record<string, ToastEntry>;
-  addToast: (key: string, children: ReactNode) => void;
-  openToast: (key: string) => void;
-  closeToast: (key: string) => void;
-  removeToast: (key: string) => void;
+interface ToastEntry {
+  isOpen: boolean,
+  children: ReactChild,
 }
 
-const ToastContext = createContext<ToastContextValue>({
-  toasts: {},
-  addToast: () => {},
-  openToast: () => {},
-  closeToast: () => {},
-  removeToast: () => {},
+interface ToastState {
+    toasts: Map<string, ToastEntry>,
+    addToast: (key, children) => void,
+    openToast: (key) => void,
+    closeToast: (key) => void,
+    removeToast: (key) => void,
+}
+
+const ToastContext: Context<any> = createContext<ToastState>({
+  toasts: new Map<string, ToastEntry>(),
+  addToast: (_key, _children) => {},
+  openToast: (_key) => {},
+  closeToast: (_key) => {},
+  removeToast: (_key) => {},
 });
 
-export const ToastProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const providerState: ToastContextValue = {
+export const ToastProvider: FC<PropsWithChildren> = (props) => {
+  const { children } = props
+  const [state, dispatch] = useReducer(reducer, initialState)
+  const providerState = {
     toasts: state.toasts,
-    addToast: (key, toastChildren) => dispatch({ type: ACTIONS.ADD_TOAST, payload: { key, children: toastChildren } }),
-    openToast: (key) => dispatch({ type: ACTIONS.OPEN_TOAST, payload: { key } }),
-    closeToast: (key) => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: { key } }),
-    removeToast: (key) => dispatch({ type: ACTIONS.REMOVE_TOAST, payload: { key } }),
-  };
+    addToast: (key, children) => dispatch({ type: ACTIONS.ADD_TOAST, payload: { key, children } }),
+    openToast: key => dispatch({ type: ACTIONS.OPEN_TOAST, payload: { key } }),
+    closeToast: key => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: { key } }),
+    removeToast: key => dispatch({ type: ACTIONS.REMOVE_TOAST, payload: { key } }),
+  }
   return (
     <ToastContext.Provider value={providerState}>
       {children}
       <div>
-        {Object.entries(state.toasts).map(([key, entry]) => (
-          <Toast
-            key={key}
-            open={entry.isOpen}
-            onClose={() => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: { key } })}
-          >
-            {entry.children}
-          </Toast>
-        ))}
+        {Array.from(state.toasts).map(([key, value]) => {
+          const { isOpen, children } = value;
+          return (
+            <Toast key={key} open={isOpen} onClose={() => dispatch({ type: ACTIONS.CLOSE_TOAST, payload: { key } })}>
+              {children}
+            </Toast>
+          )
+        })}
       </div>
     </ToastContext.Provider>
-  );
-};
+  )
+}
 
 export interface ToastHookOptions {
-  key: string;
-  children: ReactNode;
+  key: string,
+  children: ReactNode
 }
 
-export interface ToastHandle {
-  openToast: () => void;
-  closeToast: () => void;
-  removeToast: () => void;
-}
+export function useToast({ key, children }) {
+  const { addToast, openToast, closeToast, removeToast } = useContext(ToastContext)
 
-export function useToast({ key, children }: ToastHookOptions): ToastHandle {
-  const { addToast, openToast, closeToast, removeToast } = useContext(ToastContext);
-
-  // Toast children are captured at registration; re-registering every render
-  // would churn provider state. Intentional mount/unmount-only effect keyed on `key`.
   useEffect(() => {
-    addToast(key, children);
-    return () => {
-      removeToast(key);
-    };
-  }, [key]);
+    addToast(key, children)
+  }, [])
 
   return {
     openToast: () => openToast(key),
     closeToast: () => closeToast(key),
     removeToast: () => removeToast(key),
-  };
+  }
 }
diff --git a/webclient/src/components/Toast/reducer.ts b/webclient/src/components/Toast/reducer.ts
index e7b1da72f..3f600db52 100644
--- a/webclient/src/components/Toast/reducer.ts
+++ b/webclient/src/components/Toast/reducer.ts
@@ -1,88 +1,61 @@
-import type { ReactNode } from 'react';
-
 export const ACTIONS = {
   ADD_TOAST: 'ADD_TOAST',
   OPEN_TOAST: 'OPEN_TOAST',
   CLOSE_TOAST: 'CLOSE_TOAST',
   REMOVE_TOAST: 'REMOVE_TOAST',
-} as const;
-
-export interface ToastEntry {
-  isOpen: boolean;
-  children: ReactNode;
-  // Refcount of active registrants for this key. Incremented on ADD, decremented on REMOVE.
-  // Prevents two mounted callers sharing a key from stomping each other's registration.
-  refs: number;
 }
 
-export interface ToastState {
-  toasts: Record<string, ToastEntry>;
+export const initialState = {
+  toasts: {}
 }
 
-export const initialState: ToastState = {
-  toasts: {},
-};
+export function reducer(state, { type, payload }) {
+  const { key, children } = payload;
 
-export type ToastAction =
-  | { type: typeof ACTIONS.ADD_TOAST; payload: { key: string; children: ReactNode } }
-  | { type: typeof ACTIONS.OPEN_TOAST; payload: { key: string } }
-  | { type: typeof ACTIONS.CLOSE_TOAST; payload: { key: string } }
-  | { type: typeof ACTIONS.REMOVE_TOAST; payload: { key: string } };
-
-export function reducer(state: ToastState, action: ToastAction): ToastState {
-  switch (action.type) {
+  switch (type) {
     case ACTIONS.ADD_TOAST: {
-      const { key, children } = action.payload;
-      const existing = state.toasts[key];
       return {
         ...state,
         toasts: {
           ...state.toasts,
-          [key]: existing
-            ? { ...existing, refs: existing.refs + 1 }
-            : { isOpen: false, children, refs: 1 },
+          [key]: {
+            isOpen: false,
+            children,
+          },
         },
       };
     }
     case ACTIONS.OPEN_TOAST: {
-      const { key } = action.payload;
-      const existing = state.toasts[key];
-      if (!existing) {
-        return state;
-      }
       return {
         ...state,
-        toasts: { ...state.toasts, [key]: { ...existing, isOpen: true } },
+        toasts: {
+          ...state.toasts,
+          [key]: {
+            ...state.toasts[key],
+            isOpen: true,
+          },
+        },
       };
     }
     case ACTIONS.CLOSE_TOAST: {
-      const { key } = action.payload;
-      const existing = state.toasts[key];
-      if (!existing) {
-        return state;
-      }
       return {
         ...state,
-        toasts: { ...state.toasts, [key]: { ...existing, isOpen: false } },
+        toasts: {
+          ...state.toasts,
+          [key]: {
+            ...state.toasts[key],
+            isOpen: false,
+          },
+        },
       };
     }
     case ACTIONS.REMOVE_TOAST: {
-      const { key } = action.payload;
-      const existing = state.toasts[key];
-      if (!existing) {
-        return state;
-      }
-      if (existing.refs > 1) {
-        return {
-          ...state,
-          toasts: { ...state.toasts, [key]: { ...existing, refs: existing.refs - 1 } },
-        };
-      }
-      const nextToasts = { ...state.toasts };
-      delete nextToasts[key];
-      return { ...state, toasts: nextToasts };
+      const newState = { ...state };
+      delete newState.toasts[key];
+
+      return newState;
     }
     default:
-      return state;
+      throw Error('Please pick an available action')
   }
 }
diff --git a/webclient/src/components/Token/Token.tsx b/webclient/src/components/Token/Token.tsx
index 5daa4e2a9..9a9b4768d 100644
--- a/webclient/src/components/Token/Token.tsx
+++ b/webclient/src/components/Token/Token.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line
+import React, { useMemo, useState } from 'react';
+
 import { TokenDTO } from '@app/services';
 
 import './Token.css';
@@ -7,11 +10,10 @@ interface TokenProps {
 }
 
 const Token = ({ token }: TokenProps) => {
-  if (!token) {
-    return null;
-  }
-  const set = Array.isArray(token.set) ? token.set[0] : token.set;
-  return <img className="token" src={set?.picURL} alt={token.name?.value} />;
-};
+  const set = Array.isArray(token?.set) ? token?.set[0] : token?.set;
+  return token && (
+    <img className="token" src={set?.picURL} alt={token?.name?.value} />
+  );
+}
 
 export default Token;
diff --git a/webclient/src/components/TokenDetails/TokenDetails.tsx b/webclient/src/components/TokenDetails/TokenDetails.tsx
index 460173627..9166a554f 100644
--- a/webclient/src/components/TokenDetails/TokenDetails.tsx
+++ b/webclient/src/components/TokenDetails/TokenDetails.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line
+import React, { useMemo, useState } from 'react';
+
 import { TokenDTO } from '@app/services';
 
 import Token from '../Token/Token';
@@ -18,7 +21,7 @@ const TokenDetails = ({ token }: TokenProps) => {
       </div>
 
       {
-        token && props && (
+        token && (
           <div>
             <div className='tokenDetails-attributes'>
               <div className='tokenDetails-attribute'>
@@ -26,42 +29,52 @@ const TokenDetails = ({ token }: TokenProps) => {
                 <span className='tokenDetails-attribute__value'>{token.name?.value}</span>
               </div>
 
-              {props.pt?.value && (
-                <div className='tokenDetails-attribute'>
-                  <span className='tokenDetails-attribute__label'>P/T:</span>
-                  <span className='tokenDetails-attribute__value'>{props.pt.value}</span>
-                </div>
-              )}
+              {
+                (!props.pt?.value) ? null : (
+                  <div className='tokenDetails-attribute'>
+                    <span className='tokenDetails-attribute__label'>P/T:</span>
+                    <span className='tokenDetails-attribute__value'>{props.pt.value}</span>
+                  </div>
+                )
+              }
 
-              {props.colors?.value && (
-                <div className='tokenDetails-attribute'>
-                  <span className='tokenDetails-attribute__label'>Color(s):</span>
-                  <span className='tokenDetails-attribute__value'>{props.colors.value}</span>
-                </div>
-              )}
+              {
+                !props.colors?.value ? null : (
+                  <div className='cardDetails-attribute'>
+                    <span className='cardDetails-attribute__label'>Color(s):</span>
+                    <span className='cardDetails-attribute__value'>{props.colors.value}</span>
+                  </div>
+                )
+              }
 
-              {props.maintype?.value && (
-                <div className='tokenDetails-attribute'>
-                  <span className='tokenDetails-attribute__label'>Main Type:</span>
-                  <span className='tokenDetails-attribute__value'>{props.maintype.value}</span>
-                </div>
-              )}
+              {
+                !props.maintype?.value ? null : (
+                  <div className='cardDetails-attribute'>
+                    <span className='cardDetails-attribute__label'>Main Type:</span>
+                    <span className='cardDetails-attribute__value'>{props.maintype.value}</span>
+                  </div>
+                )
+              }
 
-              {props.type?.value && (
-                <div className='tokenDetails-attribute'>
-                  <span className='tokenDetails-attribute__label'>Type:</span>
-                  <span className='tokenDetails-attribute__value'>{props.type.value}</span>
-                </div>
-              )}
+              {
+                !props.type?.value ? null : (
+                  <div className='cardDetails-attribute'>
+                    <span className='cardDetails-attribute__label'>Type:</span>
+                    <span className='cardDetails-attribute__value'>{props.type.value}</span>
+                  </div>
+                )
+              }
             </div>
 
-            {token.text?.value && (
-              <div className='tokenDetails-text'>
-                <div className='tokenDetails-text__current'>
-                  {token.text.value}
+            {
+              !token.text?.value ? null : (
+                <div className='tokenDetails-text'>
+                  <div className='tokenDetails-text__current'>
+                    {token.text.value}
+                  </div>
                 </div>
-              </div>
-            )}
+              )
+            }
           </div>
         )
       }
diff --git a/webclient/src/components/UserDisplay/UserDisplay.tsx b/webclient/src/components/UserDisplay/UserDisplay.tsx
index 994ae8d99..c3d46446e 100644
--- a/webclient/src/components/UserDisplay/UserDisplay.tsx
+++ b/webclient/src/components/UserDisplay/UserDisplay.tsx
@@ -1,38 +1,59 @@
+
+import React, { useState } from 'react';
 import { NavLink, generatePath } from 'react-router-dom';
 
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 
 import { Images } from '@app/images';
+import { useWebClient } from '@app/hooks';
+import { ServerSelectors } from '@app/store';
 import { App, Data } from '@app/types';
-
-import { useUserDisplay } from './useUserDisplay';
+import { useAppSelector } from '@app/store';
 
 import './UserDisplay.css';
 
-interface UserDisplayProps {
-  user: Data.ServerInfo_User;
-}
 
 const UserDisplay = ({ user }: UserDisplayProps) => {
+  const buddyList = useAppSelector(state => ServerSelectors.getBuddyList(state));
+  const ignoreList = useAppSelector(state => ServerSelectors.getIgnoreList(state));
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
+  const webClient = useWebClient();
+
   const { name, country } = user;
-  const {
-    position,
-    isABuddy,
-    isIgnored,
-    handleClick,
-    handleClose,
-    onAddBuddy,
-    onRemoveBuddy,
-    onAddIgnore,
-    onRemoveIgnore,
-  } = useUserDisplay(name);
+
+  const handleClick = (event) => {
+    event.preventDefault();
+    setPosition({ x: event.clientX + 2, y: event.clientY + 4 });
+  };
+
+  const handleClose = () => setPosition(null);
+
+  const isABuddy = Boolean(buddyList[user.name]);
+  const isIgnored = Boolean(ignoreList[user.name]);
+
+  const onAddBuddy = () => {
+    webClient.request.session.addToBuddyList(user.name);
+    handleClose();
+  };
+  const onRemoveBuddy = () => {
+    webClient.request.session.removeFromBuddyList(user.name);
+    handleClose();
+  };
+  const onAddIgnore = () => {
+    webClient.request.session.addToIgnoreList(user.name);
+    handleClose();
+  };
+  const onRemoveIgnore = () => {
+    webClient.request.session.removeFromIgnoreList(user.name);
+    handleClose();
+  };
 
   return (
     <div className="user-display">
       <NavLink to={generatePath(App.RouteEnum.PLAYER, { name })} className="plain-link">
         <div className="user-display__details" onContextMenu={handleClick}>
-          <img className="user-display__country" src={Images.Countries[country]} alt={country} />
+          <img className="user-display__country" src={Images.Countries[country]} alt={country}></img>
           <div className="user-display__name single-line-ellipsis">{name}</div>
         </div>
       </NavLink>
@@ -66,4 +87,8 @@ const UserDisplay = ({ user }: UserDisplayProps) => {
   );
 };
 
+interface UserDisplayProps {
+  user: Data.ServerInfo_User;
+}
+
 export default UserDisplay;
diff --git a/webclient/src/components/UserDisplay/useUserDisplay.ts b/webclient/src/components/UserDisplay/useUserDisplay.ts
deleted file mode 100644
index 92e27e665..000000000
--- a/webclient/src/components/UserDisplay/useUserDisplay.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useState } from 'react';
-
-import { useWebClient } from '@app/hooks';
-import { ServerSelectors, useAppSelector } from '@app/store';
-
-export interface UserDisplay {
-  position: { x: number; y: number } | null;
-  isABuddy: boolean;
-  isIgnored: boolean;
-  handleClick: (event: React.MouseEvent) => void;
-  handleClose: () => void;
-  onAddBuddy: () => void;
-  onRemoveBuddy: () => void;
-  onAddIgnore: () => void;
-  onRemoveIgnore: () => void;
-}
-
-export function useUserDisplay(userName: string): UserDisplay {
-  const buddyList = useAppSelector((state) => ServerSelectors.getBuddyList(state));
-  const ignoreList = useAppSelector((state) => ServerSelectors.getIgnoreList(state));
-  const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
-  const webClient = useWebClient();
-
-  const handleClick = (event: React.MouseEvent) => {
-    event.preventDefault();
-    setPosition({ x: event.clientX + 2, y: event.clientY + 4 });
-  };
-
-  const handleClose = () => setPosition(null);
-
-  const isABuddy = Boolean(buddyList[userName]);
-  const isIgnored = Boolean(ignoreList[userName]);
-
-  const onAddBuddy = () => {
-    webClient.request.session.addToBuddyList(userName);
-    handleClose();
-  };
-  const onRemoveBuddy = () => {
-    webClient.request.session.removeFromBuddyList(userName);
-    handleClose();
-  };
-  const onAddIgnore = () => {
-    webClient.request.session.addToIgnoreList(userName);
-    handleClose();
-  };
-  const onRemoveIgnore = () => {
-    webClient.request.session.removeFromIgnoreList(userName);
-    handleClose();
-  };
-
-  return {
-    position,
-    isABuddy,
-    isIgnored,
-    handleClick,
-    handleClose,
-    onAddBuddy,
-    onRemoveBuddy,
-    onAddIgnore,
-    onRemoveIgnore,
-  };
-}
diff --git a/webclient/src/components/VirtualList/VirtualList.tsx b/webclient/src/components/VirtualList/VirtualList.tsx
index da9bf8e64..90c15436e 100644
--- a/webclient/src/components/VirtualList/VirtualList.tsx
+++ b/webclient/src/components/VirtualList/VirtualList.tsx
@@ -1,16 +1,12 @@
-import { ReactNode } from 'react';
+// eslint-disable-next-line
+import React from "react";
+
 import { List, RowComponentProps } from 'react-window';
 
 import './VirtualList.css';
 
 interface RowData {
-  items: ReactNode[];
-}
-
-interface VirtualListProps {
-  items: ReactNode[];
-  className?: string;
-  size?: number;
+  items: any[];
 }
 
 const Row = ({ index, style, items }: RowComponentProps<RowData>) => (
@@ -19,7 +15,7 @@ const Row = ({ index, style, items }: RowComponentProps<RowData>) => (
   </div>
 );
 
-const VirtualList = ({ items, className = '', size = 30 }: VirtualListProps) => (
+const VirtualList = ({ items, className = '', size = 30 }) => (
   <div className="virtual-list">
     <List<RowData>
       className={`virtual-list__list ${className}`}
diff --git a/webclient/src/components/fieldTypes.ts b/webclient/src/components/fieldTypes.ts
deleted file mode 100644
index 43af60a13..000000000
--- a/webclient/src/components/fieldTypes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { FieldRenderProps } from 'react-final-form';
-
-export type FinalFormFieldProps<T, E extends HTMLElement = HTMLElement> = FieldRenderProps<T, E>;
diff --git a/webclient/src/components/index.ts b/webclient/src/components/index.ts
index e8a52ca6e..5337b3b10 100644
--- a/webclient/src/components/index.ts
+++ b/webclient/src/components/index.ts
@@ -1,5 +1,3 @@
-export type { FinalFormFieldProps } from './fieldTypes';
-
 // Common components
 export { default as Card } from './Card/Card';
 export { default as CardDetails } from './CardDetails/CardDetails';
@@ -22,6 +20,3 @@ export { default as ModGuard } from './Guard/ModGuard';
 
 // Toast
 export { default as Toast, useToast, ToastProvider } from './Toast';
-
-// Game board
-export * from './Game';
diff --git a/webclient/src/containers/Account/Account.tsx b/webclient/src/containers/Account/Account.tsx
index 556ff442d..3902b31d6 100644
--- a/webclient/src/containers/Account/Account.tsx
+++ b/webclient/src/containers/Account/Account.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@mui/material/Button';
@@ -5,27 +6,49 @@ import ListItemButton from '@mui/material/ListItemButton';
 import Paper from '@mui/material/Paper';
 
 import { UserDisplay, VirtualList, AuthGuard, LanguageDropdown } from '@app/components';
+import { useWebClient } from '@app/hooks';
+import { ServerSelectors } from '@app/store';
 import Layout from '../Layout/Layout';
+import { useAppSelector } from '@app/store';
 
-import AddUserForm from './AddUserForm';
-import { useAccount } from './useAccount';
+import AddToBuddies from './AddToBuddies';
+import AddToIgnore from './AddToIgnore';
 
 import './Account.css';
 
 const Account = () => {
+  const buddyList = useAppSelector(state => ServerSelectors.getSortedBuddyList(state));
+  const ignoreList = useAppSelector(state => ServerSelectors.getSortedIgnoreList(state));
+  const serverName = useAppSelector(state => ServerSelectors.getName(state));
+  const serverVersion = useAppSelector(state => ServerSelectors.getVersion(state));
+  const user = useAppSelector(state => ServerSelectors.getUser(state));
+  const webClient = useWebClient();
+  const { country, realName, name, userLevel, accountageSecs, avatarBmp } = user || {};
+
+  const avatarUrl = useMemo(() => {
+    if (!avatarBmp) {
+      return '';
+    }
+    return URL.createObjectURL(new Blob([avatarBmp as BlobPart], { type: 'image/png' }));
+  }, [avatarBmp]);
+
+  useEffect(() => {
+    return () => {
+      if (avatarUrl) {
+        URL.revokeObjectURL(avatarUrl);
+      }
+    };
+  }, [avatarUrl]);
+
   const { t } = useTranslation();
-  const {
-    buddyList,
-    ignoreList,
-    serverName,
-    serverVersion,
-    user,
-    avatarUrl,
-    handleAddToBuddies,
-    handleAddToIgnore,
-    handleDisconnect,
-  } = useAccount();
-  const { country, realName, name, userLevel, accountageSecs } = user || {};
+
+  const handleAddToBuddies = ({ userName }) => {
+    webClient.request.session.addToBuddyList(userName);
+  };
+
+  const handleAddToIgnore = ({ userName }) => {
+    webClient.request.session.addToIgnoreList(userName);
+  };
 
   return (
     <Layout className="account">
@@ -36,14 +59,14 @@ const Account = () => {
             Buddies Online: ?/{buddyList.length}
           </div>
           <VirtualList
-            items={buddyList.map(user => (
+            items={ buddyList.map(user => (
               <ListItemButton key={user.name} dense>
                 <UserDisplay user={user} />
               </ListItemButton>
-            ))}
+            )) }
           />
           <div style={{ borderTop: '1px solid' }}>
-            <AddUserForm label="Add to Buddies" onSubmit={handleAddToBuddies} />
+            <AddToBuddies onSubmit={handleAddToBuddies} />
           </div>
         </Paper>
       </div>
@@ -53,20 +76,20 @@ const Account = () => {
             Ignored Users Online: ?/{ignoreList.length}
           </div>
           <VirtualList
-            items={ignoreList.map(user => (
+            items={ ignoreList.map(user => (
               <ListItemButton key={user.name} dense>
                 <UserDisplay user={user} />
               </ListItemButton>
-            ))}
+            )) }
           />
           <div style={{ borderTop: '1px solid' }}>
-            <AddUserForm label="Add to Ignore" onSubmit={handleAddToIgnore} />
+            <AddToIgnore onSubmit={handleAddToIgnore} />
           </div>
         </Paper>
       </div>
       <div className="account-column overflow-scroll">
         <Paper className="account-details" style={{ margin: '0 0 5px 0' }}>
-          {avatarUrl && <img src={avatarUrl} alt={name} />}
+          { avatarUrl && <img src={avatarUrl} alt={name} /> }
           <p><strong>{name}</strong></p>
           <p>Location: ({country?.toUpperCase()})</p>
           <p>User Level: {userLevel}</p>
@@ -82,8 +105,12 @@ const Account = () => {
         <Paper className="account-details">
           <p>Server Name: {serverName}</p>
           <p>Server Version: {serverVersion}</p>
-          <Button color="primary" variant="contained" onClick={handleDisconnect}>
-            {t('Common.disconnect')}
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={() => webClient.request.authentication.disconnect()}
+          >
+            { t('Common.disconnect') }
           </Button>
 
           <div className="account-details__lang">
@@ -92,7 +119,7 @@ const Account = () => {
         </Paper>
       </div>
     </Layout>
-  );
-};
+  )
+}
 
 export default Account;
diff --git a/webclient/src/containers/Account/AddToBuddies.tsx b/webclient/src/containers/Account/AddToBuddies.tsx
new file mode 100644
index 000000000..7fb05859d
--- /dev/null
+++ b/webclient/src/containers/Account/AddToBuddies.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'react-final-form'
+
+import { InputAction } from '@app/components';
+
+const AddToBuddies = ({ onSubmit }) => (
+  <Form onSubmit={values => onSubmit(values)}>
+    {({ handleSubmit }) => (
+      <form onSubmit={handleSubmit}>
+        <InputAction action="Add" label="Add to Buddies" name="userName" />
+      </form>
+    )}
+  </Form>
+);
+
+export default AddToBuddies;
diff --git a/webclient/src/containers/Account/AddToIgnore.tsx b/webclient/src/containers/Account/AddToIgnore.tsx
new file mode 100644
index 000000000..5149de0f5
--- /dev/null
+++ b/webclient/src/containers/Account/AddToIgnore.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Form } from 'react-final-form'
+
+import { InputAction } from '@app/components';
+
+const AddToIgnore = ({ onSubmit }) => (
+  <Form onSubmit={values => onSubmit(values)}>
+    {({ handleSubmit }) => (
+      <form onSubmit={handleSubmit}>
+        <InputAction action="Add" label="Add to Ignore" name="userName" />
+      </form>
+    )}
+  </Form>
+);
+
+export default AddToIgnore;
diff --git a/webclient/src/containers/Account/AddUserForm.tsx b/webclient/src/containers/Account/AddUserForm.tsx
deleted file mode 100644
index 4c75597a5..000000000
--- a/webclient/src/containers/Account/AddUserForm.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Form } from 'react-final-form';
-
-import { InputAction } from '@app/components';
-
-interface AddUserFormValues {
-  userName: string;
-}
-
-interface AddUserFormProps {
-  label: string;
-  onSubmit: (values: AddUserFormValues) => void;
-}
-
-const AddUserForm = ({ label, onSubmit }: AddUserFormProps) => (
-  <Form<AddUserFormValues> onSubmit={(values) => onSubmit(values)}>
-    {({ handleSubmit }) => (
-      <form onSubmit={handleSubmit}>
-        <InputAction action="Add" label={label} name="userName" />
-      </form>
-    )}
-  </Form>
-);
-
-export default AddUserForm;
diff --git a/webclient/src/containers/Account/useAccount.ts b/webclient/src/containers/Account/useAccount.ts
deleted file mode 100644
index e67f8acd4..000000000
--- a/webclient/src/containers/Account/useAccount.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useEffect, useMemo } from 'react';
-
-import { useWebClient } from '@app/hooks';
-import { ServerSelectors, useAppSelector } from '@app/store';
-import { Data } from '@app/types';
-
-export interface Account {
-  buddyList: Data.ServerInfo_User[];
-  ignoreList: Data.ServerInfo_User[];
-  serverName: string | undefined;
-  serverVersion: string | undefined;
-  user: Data.ServerInfo_User | null;
-  avatarUrl: string;
-  handleAddToBuddies: (args: { userName: string }) => void;
-  handleAddToIgnore: (args: { userName: string }) => void;
-  handleDisconnect: () => void;
-}
-
-export function useAccount(): Account {
-  const buddyList = useAppSelector((state) => ServerSelectors.getSortedBuddyList(state));
-  const ignoreList = useAppSelector((state) => ServerSelectors.getSortedIgnoreList(state));
-  const serverName = useAppSelector((state) => ServerSelectors.getName(state));
-  const serverVersion = useAppSelector((state) => ServerSelectors.getVersion(state));
-  const user = useAppSelector((state) => ServerSelectors.getUser(state));
-  const webClient = useWebClient();
-  const avatarBmp = user?.avatarBmp;
-
-  const avatarUrl = useMemo(() => {
-    if (!avatarBmp) {
-      return '';
-    }
-    return URL.createObjectURL(new Blob([avatarBmp], { type: 'image/png' }));
-  }, [avatarBmp]);
-
-  useEffect(() => {
-    return () => {
-      if (avatarUrl) {
-        URL.revokeObjectURL(avatarUrl);
-      }
-    };
-  }, [avatarUrl]);
-
-  const handleAddToBuddies = ({ userName }: { userName: string }) => {
-    webClient.request.session.addToBuddyList(userName);
-  };
-
-  const handleAddToIgnore = ({ userName }: { userName: string }) => {
-    webClient.request.session.addToIgnoreList(userName);
-  };
-
-  const handleDisconnect = () => {
-    webClient.request.authentication.disconnect();
-  };
-
-  return {
-    buddyList,
-    ignoreList,
-    serverName,
-    serverVersion,
-    user,
-    avatarUrl,
-    handleAddToBuddies,
-    handleAddToIgnore,
-    handleDisconnect,
-  };
-}
diff --git a/webclient/src/containers/App/AppShell.tsx b/webclient/src/containers/App/AppShell.tsx
index dedb5c63b..4a0856bc5 100644
--- a/webclient/src/containers/App/AppShell.tsx
+++ b/webclient/src/containers/App/AppShell.tsx
@@ -8,22 +8,23 @@ import FeatureDetection from './FeatureDetection';
 
 import './AppShell.css';
 
-import { ToastProvider } from '@app/components';
+import { ToastProvider } from '@app/components'
 
 function AppShell() {
   useEffect(() => {
     window.onbeforeunload = () => true;
-    return () => {
-      window.onbeforeunload = null;
-    };
   }, []);
 
+  const handleContextMenu = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <Suspense fallback="loading">
       <Provider store={store}>
         <CssBaseline />
         <ToastProvider>
-          <div className="AppShell">
+          <div className="AppShell" onContextMenu={handleContextMenu}>
             <Router>
               <FeatureDetection />
               <Routes />
diff --git a/webclient/src/containers/App/AppShellRoutes.tsx b/webclient/src/containers/App/AppShellRoutes.tsx
index 2f4fb2f76..fc097ffd4 100644
--- a/webclient/src/containers/App/AppShellRoutes.tsx
+++ b/webclient/src/containers/App/AppShellRoutes.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import { App } from '@app/types';
diff --git a/webclient/src/containers/Decks/Decks.tsx b/webclient/src/containers/Decks/Decks.tsx
index 5050a2535..e5856eaeb 100644
--- a/webclient/src/containers/Decks/Decks.tsx
+++ b/webclient/src/containers/Decks/Decks.tsx
@@ -7,7 +7,7 @@ function Decks() {
   return (
     <Layout>
       <AuthGuard />
-      <span>Decks</span>
+      <span>"Decks"</span>
     </Layout>
   );
 }
diff --git a/webclient/src/containers/Game/Game.css b/webclient/src/containers/Game/Game.css
index ba86773c2..e69de29bb 100644
--- a/webclient/src/containers/Game/Game.css
+++ b/webclient/src/containers/Game/Game.css
@@ -1,67 +0,0 @@
-.game {
-  display: grid;
-  grid-template-columns: 56px minmax(0, 1fr) 320px;
-  grid-template-rows: 1fr;
-  height: 100%;
-  min-height: 0;
-  background: #050914;
-  color: #e5ecf7;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.game__board {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.game__board-inner {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) 176px;
-}
-
-/* Rotate 90°: view-only transform on the whole board. Mirrors desktop's
-   Player::actRotateLocal which applies a QGraphicsView transform with no
-   server call. */
-.game__board-inner--rotated {
-  transform: rotate(90deg);
-  transform-origin: center center;
-}
-
-.game__empty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #5a6a8a;
-  font-size: 14px;
-  font-style: italic;
-}
-
-/* A11y: keyboard-focus ring on the board's interactive surfaces. Scoped
-   to specific classes (not `.game *`) so MUI's own focus styles inside
-   portaled menus/dialogs aren't overwritten. */
-.card-slot:focus-visible,
-.zone-stack:focus-visible,
-.battlefield__row:focus-visible,
-.hand-zone:focus-visible,
-.game-log__input:focus-visible,
-.turn-controls__btn:focus-visible,
-.phase-bar__btn:focus-visible,
-.player-info-panel__counter-value--editable:focus-visible,
-.player-info-panel__counter-input:focus-visible,
-.player-info-panel__counter-btn:focus-visible,
-.player-info-panel__life-value--editable:focus-visible,
-.player-info-panel__life-input:focus-visible,
-.player-info-panel__life-btn:focus-visible,
-.player-info-panel__new-counter:focus-visible,
-.opponent-selector__button:focus-visible {
-  outline: 2px solid var(--color-highlight-yellow);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
diff --git a/webclient/src/containers/Game/Game.dragdrop.spec.tsx b/webclient/src/containers/Game/Game.dragdrop.spec.tsx
deleted file mode 100644
index 64a7a8672..000000000
--- a/webclient/src/containers/Game/Game.dragdrop.spec.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-// Phase 4 G — drag-drop orchestration coverage.
-//
-// dnd-kit's PointerSensor doesn't work reliably in jsdom (no layout,
-// getBoundingClientRect returns zeros, elementFromPoint returns null).
-// The KeyboardSensor is far more jsdom-friendly: it uses focus + keyboard
-// codes to traverse draggables/droppables, so we can drive a full drag
-// cycle end-to-end without a real browser.
-//
-// Full pointer-driven drag-drop coverage (activation distance, pointer
-// collision detection) needs Playwright — documented in the M3 deferrable
-// as a later-milestone item.
-
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { App, Data } from '@app/types';
-
-vi.mock('../Layout/Layout', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-vi.mock('../../hooks/useSettings');
-
-import { createMockWebClient, makeStoreState, renderWithProviders, connectedState, makeUser } from '../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from '../../store/game/__mocks__/fixtures';
-import Game from './Game';
-
-function buildGame(card: Data.ServerInfo_Card) {
-  const local = makePlayerEntry({
-    properties: makePlayerProperties({
-      playerId: 1,
-      userInfo: makeUser({ name: 'P1' }),
-    }),
-    zones: {
-      [App.ZoneName.TABLE]: makeZoneEntry({
-        name: App.ZoneName.TABLE,
-        cards: [card],
-        cardCount: 1,
-      }),
-      [App.ZoneName.HAND]: makeZoneEntry({ name: App.ZoneName.HAND }),
-      [App.ZoneName.DECK]: makeZoneEntry({ name: App.ZoneName.DECK, cardCount: 40 }),
-      [App.ZoneName.GRAVE]: makeZoneEntry({ name: App.ZoneName.GRAVE }),
-      [App.ZoneName.EXILE]: makeZoneEntry({ name: App.ZoneName.EXILE }),
-    },
-  });
-  const opponent = makePlayerEntry({
-    properties: makePlayerProperties({ playerId: 2, userInfo: makeUser({ name: 'P2' }) }),
-    zones: {
-      [App.ZoneName.TABLE]: makeZoneEntry({ name: App.ZoneName.TABLE }),
-      [App.ZoneName.HAND]: makeZoneEntry({ name: App.ZoneName.HAND }),
-      [App.ZoneName.DECK]: makeZoneEntry({ name: App.ZoneName.DECK }),
-      [App.ZoneName.GRAVE]: makeZoneEntry({ name: App.ZoneName.GRAVE }),
-      [App.ZoneName.EXILE]: makeZoneEntry({ name: App.ZoneName.EXILE }),
-    },
-  });
-  return makeStoreState({
-    ...connectedState,
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: 1,
-          started: true,
-          activePlayerId: 1,
-          players: { 1: local, 2: opponent },
-        }),
-      },
-    },
-  });
-}
-
-describe('Game drag-drop (keyboard sensor)', () => {
-  // The keyboard-sensor traversal in jsdom depends on the browser's real
-  // layout for ranking droppables, which jsdom doesn't provide. That makes
-  // full keyboard drags flaky here. We keep the shape of the test so the
-  // wiring (draggable CardSlot, droppable ZoneStack) is exercised on mount,
-  // and assert on the static prerequisites — the pointer-driven end-to-end
-  // path is the Playwright deferrable.
-  it('exposes the local battlefield card as a focusable draggable', () => {
-    const card = makeCard({ id: 42, name: 'Bolt', x: 0, y: 0 });
-    renderWithProviders(<Game />, { preloadedState: buildGame(card) });
-
-    const slot = screen
-      .getByTestId('player-board-1')
-      .querySelector('[data-testid="card-slot"]') as HTMLElement;
-
-    expect(slot).not.toBeNull();
-    expect(slot.getAttribute('tabindex')).not.toBeNull();
-    // dnd-kit attaches a role="button" and aria attributes to draggable items.
-    expect(slot.getAttribute('aria-roledescription')).toMatch(/draggable/i);
-  });
-
-  it('exposes the local graveyard as a keyboard-addressable droppable', () => {
-    const card = makeCard({ id: 42, name: 'Bolt', x: 0, y: 0 });
-    renderWithProviders(<Game />, { preloadedState: buildGame(card) });
-
-    const grave = screen
-      .getByTestId('player-board-1')
-      .querySelector(`[data-testid="zone-stack-${App.ZoneName.GRAVE}"]`) as HTMLElement;
-
-    expect(grave).not.toBeNull();
-    expect(grave.getAttribute('tabindex')).toBe('0');
-    expect(grave.getAttribute('role')).toBe('button');
-  });
-
-  it('routes a full drag cycle through handleDragEnd and dispatches moveCard', async () => {
-    // This test drives a complete keyboard drag: focus source → Space to
-    // pick up → Tab cycles to a droppable → Space to drop. dnd-kit's own
-    // keyboard coordinate-getter falls back to the focused droppable when
-    // layout is missing, so jsdom can resolve the target by focus alone.
-    const card = makeCard({ id: 42, name: 'Bolt', x: 0, y: 0 });
-    const webClient = createMockWebClient();
-    renderWithProviders(<Game />, { preloadedState: buildGame(card), webClient });
-
-    const slot = screen
-      .getByTestId('player-board-1')
-      .querySelector('[data-testid="card-slot"]') as HTMLElement;
-    slot.focus();
-    fireEvent.keyDown(slot, { key: ' ', code: 'Space' });
-
-    // Tab to the graveyard droppable and drop.
-    const grave = screen
-      .getByTestId('player-board-1')
-      .querySelector(`[data-testid="zone-stack-${App.ZoneName.GRAVE}"]`) as HTMLElement;
-    grave.focus();
-    fireEvent.keyDown(grave, { key: ' ', code: 'Space' });
-
-    // If jsdom layout isn't enough to resolve the drop target, the handler
-    // will no-op. We assert loosely: either moveCard fired, or nothing did
-    // — no other command should leak through a drag-cycle attempt.
-    await waitFor(() => {
-      // Be tolerant — jsdom's lack of layout means dnd-kit may not resolve
-      // the drop. The primary invariant we pin here is "no unrelated
-      // commands fire during an attempted drag cycle."
-      expect(webClient.request.game.drawCards).not.toHaveBeenCalled();
-      expect(webClient.request.game.shuffle).not.toHaveBeenCalled();
-      expect(webClient.request.game.flipCard).not.toHaveBeenCalled();
-    });
-  });
-});
diff --git a/webclient/src/containers/Game/Game.orchestration.spec.tsx b/webclient/src/containers/Game/Game.orchestration.spec.tsx
deleted file mode 100644
index 0d6c03be5..000000000
--- a/webclient/src/containers/Game/Game.orchestration.spec.tsx
+++ /dev/null
@@ -1,356 +0,0 @@
-// M4–M6 orchestration tests — extracted from Game.spec.tsx so they run in
-// their own vitest worker slot (pool: 'threads'). Each of these goes through
-// the Game.tsx state wiring between a trigger component and the dialog/menu
-// it opens; individual handlers are tested in child specs. This suite pins
-// the end-to-end dispatch so a regression that disconnects state from its
-// consumers is caught even when both sides still pass in isolation.
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { createMockWebClient, makeStoreState, renderWithProviders, connectedState, makeUser } from '../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from '../../store/game/__mocks__/fixtures';
-import Game from './Game';
-
-// Layout pulls in LeftNav which is not under test here; stub to a no-op.
-vi.mock('../Layout/Layout', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-// Block TurnControls' / Battlefield's Dexie-backed useSettings from firing
-// an async settle after mount (would produce an unwrapped React state update).
-vi.mock('../../hooks/useSettings');
-
-interface BuildGameOpts {
-  localId: number;
-  opponentIds: number[];
-  tableCards?: ReturnType<typeof makeCard>[];
-  started?: boolean;
-  spectator?: boolean;
-  judge?: boolean;
-  localReadyStart?: boolean;
-  graveCards?: ReturnType<typeof makeCard>[];
-}
-
-function buildGame({
-  localId,
-  opponentIds,
-  tableCards = [],
-  started = true,
-  spectator = false,
-  judge = false,
-  localReadyStart = false,
-  graveCards = [],
-}: BuildGameOpts) {
-  const players: Record<number, ReturnType<typeof makePlayerEntry>> = {};
-  const playerIds = [localId, ...opponentIds];
-  for (const pid of playerIds) {
-    players[pid] = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: pid,
-        userInfo: makeUser({ name: `P${pid}` }),
-        readyStart: pid === localId ? localReadyStart : false,
-      }),
-      zones: {
-        [App.ZoneName.TABLE]: makeZoneEntry({
-          name: App.ZoneName.TABLE,
-          cards: pid === localId ? tableCards : [],
-          cardCount: pid === localId ? tableCards.length : 0,
-        }),
-        [App.ZoneName.HAND]: makeZoneEntry({ name: App.ZoneName.HAND }),
-        [App.ZoneName.DECK]: makeZoneEntry({ name: App.ZoneName.DECK, cardCount: 40 }),
-        [App.ZoneName.GRAVE]: makeZoneEntry({
-          name: App.ZoneName.GRAVE,
-          cards: pid === localId ? graveCards : [],
-          cardCount: pid === localId ? graveCards.length : 0,
-        }),
-        [App.ZoneName.EXILE]: makeZoneEntry({ name: App.ZoneName.EXILE }),
-      },
-    });
-  }
-  return makeStoreState({
-    ...connectedState,
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: localId,
-          spectator,
-          judge,
-          started,
-          players,
-        }),
-      },
-    },
-  });
-}
-
-describe('Game orchestration (M4–M6)', () => {
-  it('Roll Die: TurnControls → RollDieDialog → rollDie dispatch', async () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /roll die/i }));
-    const sides = await screen.findByLabelText('Sides') as HTMLInputElement;
-    const count = screen.getByLabelText('Count') as HTMLInputElement;
-    fireEvent.change(sides, { target: { value: '20' } });
-    fireEvent.change(count, { target: { value: '2' } });
-    fireEvent.click(screen.getByRole('button', { name: /^roll$/i }));
-
-    expect(webClient.request.game.rollDie).toHaveBeenCalledWith(1, { sides: 20, count: 2 });
-  });
-
-  it('Kick: TurnControls host menu → kickFromGame with chosen opponent', async () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<Game />, {
-      // localId 1 is the host by fixture default (hostId: 1).
-      preloadedState: buildGame({ localId: 1, opponentIds: [2, 3] }),
-      webClient,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /kick/i }));
-    // P3 also appears in the OpponentSelector; pick the one inside the
-    // MUI Menu popup.
-    const menuItem = (await screen.findAllByText('P3')).find((el) => el.closest('[role="menuitem"]'));
-    fireEvent.click(menuItem!);
-
-    expect(webClient.request.game.kickFromGame).toHaveBeenCalledWith(1, { playerId: 3 });
-  });
-
-  it('Create Token: PlayerContextMenu → CreateTokenDialog → createToken', async () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      webClient,
-    });
-
-    fireEvent.contextMenu(screen.getByTestId('player-info-1'));
-    fireEvent.click(await screen.findByText('Create token…'));
-
-    const nameInput = await screen.findByLabelText('Token name');
-    fireEvent.change(nameInput, { target: { value: 'Goblin' } });
-    fireEvent.click(screen.getByRole('button', { name: /^create$/i }));
-
-    expect(webClient.request.game.createToken).toHaveBeenCalledWith(
-      1,
-      expect.objectContaining({ cardName: 'Goblin', zone: App.ZoneName.TABLE }),
-    );
-  });
-
-  it('Mulligan same-size: HandContextMenu → mulligan with current hand count', async () => {
-    const webClient = createMockWebClient();
-    const state = buildGame({ localId: 1, opponentIds: [2] });
-    // Seed the local hand with 5 cards so "same size" sends number: 5.
-    const localPlayer = state.games.games[1].players[1];
-    localPlayer.zones[App.ZoneName.HAND] = makeZoneEntry({
-      name: App.ZoneName.HAND,
-      cards: Array.from({ length: 5 }, (_, i) => makeCard({ id: 100 + i })),
-      cardCount: 5,
-    });
-    renderWithProviders(<Game />, { preloadedState: state, webClient });
-
-    fireEvent.contextMenu(screen.getByTestId('hand-zone'));
-    fireEvent.click(await screen.findByText(/take mulligan \(same size\)/i));
-
-    expect(webClient.request.game.mulligan).toHaveBeenCalledWith(1, { number: 5 });
-  });
-
-  it('Mulligan choose-size: negative input is translated to handSize + input', async () => {
-    // Desktop's actMulligan (player_actions.cpp:308-354) treats 0 and
-    // negative inputs as "relative to current hand size" before dispatching
-    // Command_Mulligan. Regression guard for that convention.
-    const webClient = createMockWebClient();
-    const state = buildGame({ localId: 1, opponentIds: [2] });
-    const localPlayer = state.games.games[1].players[1];
-    localPlayer.zones[App.ZoneName.HAND] = makeZoneEntry({
-      name: App.ZoneName.HAND,
-      cards: Array.from({ length: 7 }, (_, i) => makeCard({ id: 100 + i })),
-      cardCount: 7,
-    });
-    localPlayer.zones[App.ZoneName.DECK] = makeZoneEntry({
-      name: App.ZoneName.DECK, cards: [], cardCount: 53,
-    });
-    renderWithProviders(<Game />, { preloadedState: state, webClient });
-
-    fireEvent.contextMenu(screen.getByTestId('hand-zone'));
-    fireEvent.click(await screen.findByText(/take mulligan \(choose size\)/i));
-
-    expect(
-      await screen.findByText('0 and lower are in comparison to current hand size.'),
-    ).toBeInTheDocument();
-
-    const input = screen.getByLabelText('New hand size');
-    fireEvent.change(input, { target: { value: '-1' } });
-    fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-
-    expect(webClient.request.game.mulligan).toHaveBeenCalledWith(1, { number: 6 });
-  });
-
-  it('Mulligan choose-size: positive integer passes through unchanged', async () => {
-    const webClient = createMockWebClient();
-    const state = buildGame({ localId: 1, opponentIds: [2] });
-    const localPlayer = state.games.games[1].players[1];
-    localPlayer.zones[App.ZoneName.HAND] = makeZoneEntry({
-      name: App.ZoneName.HAND,
-      cards: Array.from({ length: 7 }, (_, i) => makeCard({ id: 100 + i })),
-      cardCount: 7,
-    });
-    localPlayer.zones[App.ZoneName.DECK] = makeZoneEntry({
-      name: App.ZoneName.DECK, cards: [], cardCount: 53,
-    });
-    renderWithProviders(<Game />, { preloadedState: state, webClient });
-
-    fireEvent.contextMenu(screen.getByTestId('hand-zone'));
-    fireEvent.click(await screen.findByText(/take mulligan \(choose size\)/i));
-
-    const input = await screen.findByLabelText('New hand size');
-    fireEvent.change(input, { target: { value: '4' } });
-    fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-
-    expect(webClient.request.game.mulligan).toHaveBeenCalledWith(1, { number: 4 });
-  });
-
-  it('Arrow-from-hand auto-plays the source card instead of sending a stale createArrow', async () => {
-    // Desktop parity (card_item.cpp:243-250): dragging an arrow from a
-    // local-hand card to a target outside the hand auto-plays the card.
-    // The server re-keys the card id on the move, so sending createArrow
-    // with the old hand cardId would be rejected. We resolve this as a
-    // play-card intent and skip the arrow command.
-    const webClient = createMockWebClient();
-    const state = buildGame({
-      localId: 1,
-      opponentIds: [2],
-      tableCards: [makeCard({ id: 50, name: 'Bear' })],
-    });
-    const localPlayer = state.games.games[1].players[1];
-    localPlayer.zones[App.ZoneName.HAND] = makeZoneEntry({
-      name: App.ZoneName.HAND,
-      cards: [makeCard({ id: 10, name: 'Lightning Bolt' })],
-      cardCount: 1,
-    });
-    renderWithProviders(<Game />, { preloadedState: state, webClient });
-
-    const handCard = document.querySelector('[data-card-zone="hand"][data-card-id="10"]')!;
-    fireEvent.contextMenu(handCard);
-
-    const drawArrowItem = await screen.findByText('Draw arrow from here');
-    fireEvent.click(drawArrowItem);
-
-    const tableCard = document.querySelector('[data-card-zone="table"][data-card-id="50"]')!;
-    fireEvent.click(tableCard);
-
-    await waitFor(() => {
-      expect(webClient.request.game.moveCard).toHaveBeenCalledWith(
-        1,
-        expect.objectContaining({
-          startPlayerId: 1,
-          startZone: App.ZoneName.HAND,
-          targetPlayerId: 1,
-          targetZone: App.ZoneName.TABLE,
-          cardsToMove: { card: [{ cardId: 10 }] },
-        }),
-      );
-    });
-    expect(webClient.request.game.createArrow).not.toHaveBeenCalled();
-  });
-
-  it('Mulligan choose-size: value outside [-handSize, handSize+deckSize] is rejected', async () => {
-    const webClient = createMockWebClient();
-    const state = buildGame({ localId: 1, opponentIds: [2] });
-    const localPlayer = state.games.games[1].players[1];
-    localPlayer.zones[App.ZoneName.HAND] = makeZoneEntry({
-      name: App.ZoneName.HAND,
-      cards: Array.from({ length: 7 }, (_, i) => makeCard({ id: 100 + i })),
-      cardCount: 7,
-    });
-    localPlayer.zones[App.ZoneName.DECK] = makeZoneEntry({
-      name: App.ZoneName.DECK, cards: [], cardCount: 53,
-    });
-    renderWithProviders(<Game />, { preloadedState: state, webClient });
-
-    fireEvent.contextMenu(screen.getByTestId('hand-zone'));
-    fireEvent.click(await screen.findByText(/take mulligan \(choose size\)/i));
-
-    const input = await screen.findByLabelText('New hand size');
-    fireEvent.change(input, { target: { value: '-99' } });
-    fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-
-    expect(webClient.request.game.mulligan).not.toHaveBeenCalled();
-    expect(screen.getByText(/between -7 and 60/i)).toBeInTheDocument();
-  });
-
-  it('Sideboard: PlayerContextMenu → SideboardDialog → setSideboardPlan with the accumulated moveList', async () => {
-    const webClient = createMockWebClient();
-    const state = buildGame({ localId: 1, opponentIds: [2] });
-    const localPlayer = state.games.games[1].players[1];
-    localPlayer.zones[App.ZoneName.DECK] = makeZoneEntry({
-      name: App.ZoneName.DECK,
-      cards: [makeCard({ id: 100, name: 'Island' })],
-      cardCount: 1,
-    });
-    localPlayer.zones[App.ZoneName.SIDEBOARD] = makeZoneEntry({
-      name: App.ZoneName.SIDEBOARD,
-      cards: [makeCard({ id: 200, name: 'Counterspell' })],
-      cardCount: 1,
-    });
-    renderWithProviders(<Game />, { preloadedState: state, webClient });
-
-    fireEvent.contextMenu(screen.getByTestId('player-info-1'));
-    fireEvent.click(await screen.findByText(/view sideboard/i));
-    fireEvent.click(await screen.findByRole('button', { name: /move Island to sideboard/i }));
-    fireEvent.click(screen.getByRole('button', { name: /apply plan/i }));
-
-    expect(webClient.request.game.setSideboardPlan).toHaveBeenCalledWith(
-      1,
-      expect.objectContaining({
-        moveList: [
-          { cardName: 'Island', startZone: App.ZoneName.DECK, targetZone: App.ZoneName.SIDEBOARD },
-        ],
-      }),
-    );
-  });
-
-  it('Sideboard lock: toggling Lock sideboard dispatches setSideboardLock', async () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      webClient,
-    });
-
-    fireEvent.contextMenu(screen.getByTestId('player-info-1'));
-    fireEvent.click(await screen.findByText(/view sideboard/i));
-    fireEvent.click(await screen.findByLabelText('Lock sideboard'));
-
-    expect(webClient.request.game.setSideboardLock).toHaveBeenCalledWith(1, { locked: true });
-  });
-
-  it('changeZoneProperties: toggling "Always reveal top card" on local deck dispatches the command', async () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      webClient,
-    });
-
-    fireEvent.contextMenu(
-      screen
-        .getByTestId('player-board-1')
-        .querySelector(`[data-testid="zone-stack-${App.ZoneName.DECK}"]`)!,
-    );
-    fireEvent.click(await screen.findByText(/always reveal top card/i));
-
-    expect(webClient.request.game.changeZoneProperties).toHaveBeenCalledWith(
-      1,
-      expect.objectContaining({
-        zoneName: App.ZoneName.DECK,
-        alwaysRevealTopCard: true,
-      }),
-    );
-  });
-});
diff --git a/webclient/src/containers/Game/Game.spec.tsx b/webclient/src/containers/Game/Game.spec.tsx
deleted file mode 100644
index b65e081c4..000000000
--- a/webclient/src/containers/Game/Game.spec.tsx
+++ /dev/null
@@ -1,466 +0,0 @@
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { Data } from '@app/types';
-
-import { createMockWebClient, makeStoreState, renderWithProviders, connectedState, makeUser } from '../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from '../../store/game/__mocks__/fixtures';
-import Game from './Game';
-
-// Layout pulls in LeftNav which is not under test here; stub to a no-op.
-vi.mock('../Layout/Layout', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-// Block TurnControls' / Battlefield's Dexie-backed useSettings from firing
-// an async settle after mount (would produce an unwrapped React state update).
-vi.mock('../../hooks/useSettings');
-
-interface BuildGameOpts {
-  localId: number;
-  opponentIds: number[];
-  tableCards?: ReturnType<typeof makeCard>[];
-  started?: boolean;
-  spectator?: boolean;
-  judge?: boolean;
-  localReadyStart?: boolean;
-  graveCards?: ReturnType<typeof makeCard>[];
-}
-
-function buildGame({
-  localId,
-  opponentIds,
-  tableCards = [],
-  started = true,
-  spectator = false,
-  judge = false,
-  localReadyStart = false,
-  graveCards = [],
-}: BuildGameOpts) {
-  const players: Record<number, ReturnType<typeof makePlayerEntry>> = {};
-  const playerIds = [localId, ...opponentIds];
-  for (const pid of playerIds) {
-    players[pid] = makePlayerEntry({
-      properties: makePlayerProperties({
-        playerId: pid,
-        userInfo: makeUser({ name: `P${pid}` }),
-        readyStart: pid === localId ? localReadyStart : false,
-      }),
-      zones: {
-        [App.ZoneName.TABLE]: makeZoneEntry({
-          name: App.ZoneName.TABLE,
-          cards: pid === localId ? tableCards : [],
-          cardCount: pid === localId ? tableCards.length : 0,
-        }),
-        [App.ZoneName.HAND]: makeZoneEntry({ name: App.ZoneName.HAND }),
-        [App.ZoneName.DECK]: makeZoneEntry({ name: App.ZoneName.DECK, cardCount: 40 }),
-        [App.ZoneName.GRAVE]: makeZoneEntry({
-          name: App.ZoneName.GRAVE,
-          cards: pid === localId ? graveCards : [],
-          cardCount: pid === localId ? graveCards.length : 0,
-        }),
-        [App.ZoneName.EXILE]: makeZoneEntry({ name: App.ZoneName.EXILE }),
-      },
-    });
-  }
-  return makeStoreState({
-    ...connectedState,
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: localId,
-          spectator,
-          judge,
-          started,
-          players,
-        }),
-      },
-    },
-  });
-}
-
-describe('Game container', () => {
-  it('shows the empty-game placeholder when no game is active', () => {
-    renderWithProviders(<Game />, {
-      preloadedState: makeStoreState({
-        ...connectedState,
-        games: { games: {} },
-      }),
-    });
-
-    expect(screen.getByTestId('game-empty')).toBeInTheDocument();
-    expect(screen.getByTestId('phase-bar')).toBeInTheDocument();
-    expect(screen.getByTestId('right-panel')).toBeInTheDocument();
-  });
-
-  it('renders both player boards and the hand when a 2-player game is active', () => {
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-    });
-
-    expect(screen.getByTestId('player-board-1')).toBeInTheDocument();
-    expect(screen.getByTestId('player-board-2')).toBeInTheDocument();
-    expect(screen.getByTestId('hand-zone')).toBeInTheDocument();
-    expect(screen.queryByTestId('game-empty')).not.toBeInTheDocument();
-  });
-
-  it('does not render the opponent selector in a 2-player game', () => {
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-    });
-
-    expect(screen.queryByTestId('opponent-selector')).not.toBeInTheDocument();
-  });
-
-  it('renders the opponent selector in a 3+ player game', () => {
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2, 3] }),
-    });
-
-    expect(screen.getByTestId('opponent-selector')).toBeInTheDocument();
-  });
-
-  it('defaults to showing the first opponent', () => {
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2, 3] }),
-    });
-
-    expect(screen.getByTestId('player-board-2')).toBeInTheDocument();
-    expect(screen.queryByTestId('player-board-3')).not.toBeInTheDocument();
-  });
-
-  it('mirrors the opponent board and leaves the local board upright', () => {
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-    });
-
-    expect(screen.getByTestId('player-board-2')).toHaveClass('player-board--mirrored');
-    expect(screen.getByTestId('player-board-1')).not.toHaveClass('player-board--mirrored');
-  });
-
-  it('lifts card-hover state into the right panel preview', () => {
-    const card = makeCard({ id: 7, name: 'Lightning Bolt', x: 0, y: 0 });
-    renderWithProviders(<Game />, {
-      preloadedState: buildGame({
-        localId: 1,
-        opponentIds: [2],
-        tableCards: [card],
-      }),
-    });
-
-    const small = document.querySelector('.card-preview__image--small') as HTMLImageElement | null;
-    expect(small).toBeNull();
-
-    const slot = screen.getAllByTestId('card-slot')[0];
-    fireEvent.mouseEnter(slot);
-
-    const afterHover = document.querySelector('.card-preview__image--small') as HTMLImageElement;
-    expect(afterHover.src).toContain('Lightning%20Bolt');
-  });
-
-  it('keeps the phase bar and right panel visible when no game is joined', () => {
-    renderWithProviders(<Game />, {
-      preloadedState: makeStoreState({
-        ...connectedState,
-        games: { games: {} },
-      }),
-    });
-
-    expect(screen.getByTestId('phase-bar')).toBeInTheDocument();
-    expect(screen.getByTestId('right-panel')).toBeInTheDocument();
-  });
-
-  describe('DeckSelectDialog auto-open', () => {
-    it('opens automatically when game is not started and local player is not ready', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          started: false,
-          localReadyStart: false,
-        }),
-      });
-
-      expect(screen.getByRole('dialog')).toBeInTheDocument();
-      expect(screen.getByLabelText('deck list')).toBeInTheDocument();
-    });
-
-    it('stays closed when the game has already started', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          started: true,
-          localReadyStart: false,
-        }),
-      });
-
-      expect(screen.queryByLabelText('deck list')).not.toBeInTheDocument();
-    });
-
-    it('stays closed once the local player is ready', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          started: false,
-          localReadyStart: true,
-        }),
-      });
-
-      expect(screen.queryByLabelText('deck list')).not.toBeInTheDocument();
-    });
-
-    it('stays closed for spectators', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          started: false,
-          spectator: true,
-        }),
-      });
-
-      expect(screen.queryByLabelText('deck list')).not.toBeInTheDocument();
-    });
-
-    it('stays closed for judges', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          started: false,
-          judge: true,
-        }),
-      });
-
-      expect(screen.queryByLabelText('deck list')).not.toBeInTheDocument();
-    });
-
-    // Judges on Servatrice are flagged spectator on the wire. Both gates
-    // independently suppress the deck-select dialog; this pins that either
-    // one alone is sufficient.
-    it('stays closed for judges who are also flagged as spectators', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          started: false,
-          judge: true,
-          spectator: true,
-        }),
-      });
-
-      expect(screen.queryByLabelText('deck list')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('ZoneViewDialog', () => {
-    it('is closed by default', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      });
-
-      expect(screen.queryByRole('button', { name: /close zone view/i })).not.toBeInTheDocument();
-    });
-
-    it('opens when a zone-rail entry is clicked, showing the cards in that zone', () => {
-      const graveCard = makeCard({ id: 77, name: 'Final Card' });
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          graveCards: [graveCard],
-        }),
-      });
-
-      const localBoard = screen.getByTestId('player-board-1');
-      const graveStack = localBoard.querySelector(`[data-testid="zone-stack-${App.ZoneName.GRAVE}"]`)!;
-      fireEvent.click(graveStack);
-
-      expect(screen.getByRole('button', { name: /close zone view/i })).toBeInTheDocument();
-      expect(screen.getAllByAltText('Final Card').length).toBeGreaterThan(0);
-    });
-
-    it('closes when the close button is clicked', async () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      });
-
-      const graveStack = screen
-        .getByTestId('player-board-1')
-        .querySelector(`[data-testid="zone-stack-${App.ZoneName.GRAVE}"]`)!;
-      fireEvent.click(graveStack);
-      fireEvent.click(screen.getByRole('button', { name: /close zone view/i }));
-
-      await waitFor(() => {
-        expect(screen.queryByRole('button', { name: /close zone view/i })).not.toBeInTheDocument();
-      });
-    });
-
-    // Click propagation from the opponent's grave uses the same handler as
-    // the local grave; M2 deferrable wanted this pinned explicitly so a
-    // regression that scopes the click to the local board only is caught.
-    it('opens the opponent-owned grave and titles the panel with the opponent name', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      });
-
-      const opponentBoard = screen.getByTestId('player-board-2');
-      const graveStack = opponentBoard.querySelector(`[data-testid="zone-stack-${App.ZoneName.GRAVE}"]`)!;
-      fireEvent.click(graveStack);
-
-      const panel = screen.getByTestId('zone-view-dialog');
-      expect(panel).toHaveAttribute('aria-label', expect.stringMatching(/P2 Graveyard/));
-    });
-  });
-
-  describe('Card interactions (M3)', () => {
-    it('double-clicking a battlefield card toggles tap via setCardAttr', () => {
-      const webClient = createMockWebClient();
-      const card = makeCard({ id: 7, name: 'Creature', x: 0, y: 0, tapped: false });
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          tableCards: [card],
-        }),
-        webClient,
-      });
-
-      const localBoard = screen.getByTestId('player-board-1');
-      const slot = localBoard.querySelector('[data-testid="card-slot"]')!;
-      fireEvent.doubleClick(slot);
-
-      expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-        zone: App.ZoneName.TABLE,
-        cardId: 7,
-        attribute: Data.CardAttribute.AttrTapped,
-        attrValue: '1',
-      });
-    });
-
-    it('right-clicking a local card opens the card context menu', () => {
-      const card = makeCard({ id: 7, name: 'Creature', x: 0, y: 0 });
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          tableCards: [card],
-        }),
-      });
-
-      const slot = screen.getByTestId('player-board-1').querySelector('[data-testid="card-slot"]')!;
-      fireEvent.contextMenu(slot);
-
-      expect(screen.getByText('Flip')).toBeInTheDocument();
-      expect(screen.getByText('Tap')).toBeInTheDocument();
-    });
-
-    it('right-clicking the local deck opens the zone context menu', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      });
-
-      const localDeck = screen
-        .getByTestId('player-board-1')
-        .querySelector(`[data-testid="zone-stack-${App.ZoneName.DECK}"]`)!;
-      fireEvent.contextMenu(localDeck);
-
-      expect(screen.getByText('Draw a card')).toBeInTheDocument();
-      expect(screen.getByText('Shuffle')).toBeInTheDocument();
-    });
-
-    it('does NOT open a zone context menu for the opponent deck', () => {
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-      });
-
-      const opponentDeck = screen
-        .getByTestId('player-board-2')
-        .querySelector(`[data-testid="zone-stack-${App.ZoneName.DECK}"]`)!;
-      fireEvent.contextMenu(opponentDeck);
-
-      expect(screen.queryByText('Draw a card')).not.toBeInTheDocument();
-    });
-
-    it('opening a card menu closes an already-open zone menu', () => {
-      const card = makeCard({ id: 7, x: 0, y: 0 });
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          tableCards: [card],
-        }),
-      });
-
-      const localDeck = screen
-        .getByTestId('player-board-1')
-        .querySelector(`[data-testid="zone-stack-${App.ZoneName.DECK}"]`)!;
-      fireEvent.contextMenu(localDeck);
-      expect(screen.getByText('Draw a card')).toBeInTheDocument();
-
-      const slot = screen.getByTestId('player-board-1').querySelector('[data-testid="card-slot"]')!;
-      fireEvent.contextMenu(slot);
-
-      expect(screen.queryByText('Draw a card')).not.toBeInTheDocument();
-      expect(screen.getByText('Flip')).toBeInTheDocument();
-    });
-
-    it('dispatches drawCards(1) when "Draw a card" is chosen from the deck menu', () => {
-      const webClient = createMockWebClient();
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({ localId: 1, opponentIds: [2] }),
-        webClient,
-      });
-
-      fireEvent.contextMenu(
-        screen.getByTestId('player-board-1').querySelector(`[data-testid="zone-stack-${App.ZoneName.DECK}"]`)!,
-      );
-      fireEvent.click(screen.getByText('Draw a card'));
-
-      expect(webClient.request.game.drawCards).toHaveBeenCalledWith(1, { number: 1 });
-    });
-
-    it('opens a PromptDialog when "Set P/T…" is chosen and dispatches setCardAttr on submit', () => {
-      const webClient = createMockWebClient();
-      const card = makeCard({ id: 7, x: 0, y: 0, pt: '' });
-      renderWithProviders(<Game />, {
-        preloadedState: buildGame({
-          localId: 1,
-          opponentIds: [2],
-          tableCards: [card],
-        }),
-        webClient,
-      });
-
-      fireEvent.contextMenu(
-        screen.getByTestId('player-board-1').querySelector('[data-testid="card-slot"]')!,
-      );
-      fireEvent.click(screen.getByText('Set P/T…'));
-
-      const input = screen.getByLabelText('P/T (e.g. 3/3)');
-      fireEvent.change(input, { target: { value: '3/3' } });
-      fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-
-      expect(webClient.request.game.setCardAttr).toHaveBeenCalledWith(1, {
-        zone: App.ZoneName.TABLE,
-        cardId: 7,
-        attribute: Data.CardAttribute.AttrPT,
-        attrValue: '3/3',
-      });
-    });
-  });
-
-  // M4–M6 orchestration tests live in Game.orchestration.spec.tsx — that
-  // file pins the end-to-end dispatch flows (dialog/menu → command) that go
-  // through Game.tsx state wiring. Splitting them out lets vitest's threads
-  // pool run them in parallel with the unit-style tests in this file.
-
-});
diff --git a/webclient/src/containers/Game/Game.tsx b/webclient/src/containers/Game/Game.tsx
index 622c4c43f..139147ab1 100644
--- a/webclient/src/containers/Game/Game.tsx
+++ b/webclient/src/containers/Game/Game.tsx
@@ -1,338 +1,13 @@
-import { DndContext, DragOverlay } from '@dnd-kit/core';
-
-import {
-  AuthGuard,
-  CardContextMenu,
-  CardDragOverlay,
-  CardRegistryContext,
-  GameArrowOverlay,
-  HandContextMenu,
-  HandZone,
-  OpponentSelector,
-  PhaseBar,
-  PlayerBoard,
-  PlayerContextMenu,
-  RightPanel,
-  StackStrip,
-  ZoneContextMenu,
-} from '@app/components';
-import {
-  ConfirmDialog,
-  CreateCounterDialog,
-  CreateTokenDialog,
-  DeckSelectDialog,
-  GameInfoDialog,
-  PromptDialog,
-  RevealCardsDialog,
-  RollDieDialog,
-  SideboardDialog,
-  cardsFromZone,
-  ZoneViewDialog,
-} from '@app/dialogs';
-import { App } from '@app/types';
-
+import { AuthGuard } from '@app/components';
 import Layout from '../Layout/Layout';
 
-import { useGame } from './useGame';
-
 import './Game.css';
 
 function Game() {
-  const g = useGame();
-  const {
-    gameId,
-    game,
-    localPlayer,
-    boardRef,
-    cardRegistry,
-    sensors,
-    hoveredCard,
-    setHoveredCard,
-    isRotated,
-    toggleRotated,
-    localAccess,
-    opponentAccess,
-    deckSelectOpen,
-    opponents,
-    arrows,
-    dialogs,
-    dnd,
-  } = g;
-
   return (
     <Layout>
       <AuthGuard />
-      <CardRegistryContext.Provider value={cardRegistry}>
-        <DndContext
-          sensors={sensors}
-          onDragStart={dnd.handleDragStart}
-          onDragEnd={dnd.handleDragEnd}
-          onDragCancel={dnd.handleDragCancel}
-        >
-          <div className="game" data-testid="game-container">
-            <PhaseBar gameId={gameId} />
-
-            <div
-              className="game__board"
-              ref={boardRef}
-              onMouseDown={arrows.handleBoardMouseDown}
-            >
-              <OpponentSelector
-                opponents={opponents.opponents}
-                selectedPlayerId={opponents.shownOpponentId}
-                onSelect={opponents.setSelectedOpponentId}
-              />
-
-              {!game && (
-                <div className="game__empty" data-testid="game-empty">
-                  No active game. Join a game from a room to see the board.
-                </div>
-              )}
-
-              {game && opponents.shownOpponentId != null && (
-                <div
-                  className={
-                    'game__board-inner' +
-                    (isRotated ? ' game__board-inner--rotated' : '')
-                  }
-                >
-                  <PlayerBoard
-                    gameId={gameId!}
-                    playerId={opponents.shownOpponentId}
-                    mirrored
-                    canAct={opponentAccess.canAct}
-                    canEditCounters={opponentAccess.canAct}
-                    arrowSourceKey={arrows.arrowSourceKey}
-                    onCardHover={setHoveredCard}
-                    onCardClick={arrows.handleCardClick}
-                    onCardContextMenu={(card, e) =>
-                      dialogs.handleCardContextMenu(opponents.shownOpponentId!, App.ZoneName.TABLE, card, e)
-                    }
-                    onCardDoubleClick={(card) =>
-                      arrows.handleCardDoubleClick(App.ZoneName.TABLE, card)
-                    }
-                    onZoneClick={dialogs.handleZoneClick}
-                    onZoneContextMenu={dialogs.handleZoneContextMenu}
-                  />
-                  <StackStrip
-                    gameId={gameId!}
-                    entries={[
-                      {
-                        playerId: opponents.shownOpponentId,
-                        name:
-                          opponents.opponents.find((o) => o.playerId === opponents.shownOpponentId)?.name ??
-                          `p${opponents.shownOpponentId}`,
-                      },
-                      {
-                        playerId: game.localPlayerId,
-                        name:
-                          localPlayer?.properties.userInfo?.name ??
-                          `p${game.localPlayerId}`,
-                      },
-                    ]}
-                    onZoneClick={dialogs.handleZoneClick}
-                  />
-                  <PlayerBoard
-                    gameId={gameId!}
-                    playerId={game.localPlayerId}
-                    canAct={localAccess.canAct}
-                    canEditCounters={localAccess.canAct}
-                    arrowSourceKey={arrows.arrowSourceKey}
-                    onCardHover={setHoveredCard}
-                    onCardClick={arrows.handleCardClick}
-                    onCardContextMenu={(card, e) =>
-                      dialogs.handleCardContextMenu(game.localPlayerId, App.ZoneName.TABLE, card, e)
-                    }
-                    onCardDoubleClick={(card) =>
-                      arrows.handleCardDoubleClick(App.ZoneName.TABLE, card)
-                    }
-                    onZoneClick={dialogs.handleZoneClick}
-                    onZoneContextMenu={dialogs.handleZoneContextMenu}
-                    onRequestCreateCounter={dialogs.openCreateCounter}
-                    onPlayerContextMenu={dialogs.handlePlayerContextMenu}
-                  />
-                  {localPlayer && (
-                    <HandZone
-                      gameId={gameId!}
-                      playerId={game.localPlayerId}
-                      canAct={localAccess.canAct}
-                      arrowSourceKey={arrows.arrowSourceKey}
-                      onCardHover={setHoveredCard}
-                      onCardClick={arrows.handleCardClick}
-                      onCardContextMenu={(card, e) =>
-                        dialogs.handleCardContextMenu(game.localPlayerId, App.ZoneName.HAND, card, e)
-                      }
-                      onZoneContextMenu={dialogs.handleHandContextMenu}
-                    />
-                  )}
-                </div>
-              )}
-
-              <GameArrowOverlay gameId={gameId} boardRef={boardRef} dragPreview={arrows.dragPreview} />
-            </div>
-
-            <RightPanel
-              gameId={gameId}
-              hoveredCard={hoveredCard}
-              onRequestRollDie={dialogs.openRollDie}
-              onRequestConcede={dialogs.openConcede}
-              onRequestUnconcede={dialogs.openUnconcede}
-              onRequestGameInfo={dialogs.openGameInfo}
-              onToggleRotate90={toggleRotated}
-              isRotated={isRotated}
-            />
-
-            <DeckSelectDialog isOpen={deckSelectOpen} gameId={gameId} />
-
-            {dialogs.zoneViews.map((v, idx) => (
-              <ZoneViewDialog
-                key={`${v.playerId}-${v.zoneName}`}
-                isOpen
-                gameId={gameId}
-                playerId={v.playerId}
-                zoneName={v.zoneName}
-                handleClose={() => dialogs.handleCloseZoneView(v.playerId, v.zoneName)}
-                initialPosition={{ x: 80 + idx * 36, y: 80 + idx * 36 }}
-              />
-            ))}
-
-            <CardContextMenu
-              isOpen={dialogs.cardMenu != null}
-              anchorPosition={dialogs.cardMenu?.anchorPosition ?? null}
-              gameId={gameId ?? 0}
-              localPlayerId={game?.localPlayerId ?? null}
-              card={dialogs.cardMenu?.card ?? null}
-              ownerPlayerId={dialogs.cardMenu?.sourcePlayerId ?? null}
-              sourceZone={dialogs.cardMenu?.sourceZone ?? null}
-              onClose={dialogs.closeCardMenu}
-              onRequestSetPT={dialogs.handleRequestSetPT}
-              onRequestSetAnnotation={dialogs.handleRequestSetAnnotation}
-              onRequestSetCounter={dialogs.handleRequestSetCardCounter}
-              onRequestDrawArrow={dialogs.handleRequestDrawArrow}
-              onRequestAttach={dialogs.handleRequestAttach}
-              onRequestMoveToLibraryAt={dialogs.handleRequestMoveToLibraryAt}
-            />
-
-            <ZoneContextMenu
-              isOpen={dialogs.zoneMenu != null}
-              anchorPosition={dialogs.zoneMenu?.anchorPosition ?? null}
-              gameId={gameId ?? 0}
-              playerId={dialogs.zoneMenu?.playerId ?? null}
-              zoneName={dialogs.zoneMenu?.zoneName ?? null}
-              onClose={dialogs.closeZoneMenu}
-              onRequestDrawN={dialogs.handleRequestDrawN}
-              onRequestDumpN={dialogs.handleRequestDumpN}
-              onRequestRevealTopN={dialogs.handleRequestRevealTopN}
-              onRequestRevealZone={dialogs.handleRequestRevealZone}
-            />
-
-            <PlayerContextMenu
-              isOpen={dialogs.playerMenu != null}
-              anchorPosition={dialogs.playerMenu}
-              onClose={dialogs.closePlayerMenu}
-              onRequestCreateToken={dialogs.openCreateToken}
-              onRequestViewSideboard={dialogs.openSideboard}
-            />
-
-            <HandContextMenu
-              isOpen={dialogs.handMenu != null}
-              anchorPosition={dialogs.handMenu}
-              gameId={gameId ?? 0}
-              handSize={localPlayer?.zones[App.ZoneName.HAND]?.cardCount ?? 0}
-              onClose={dialogs.closeHandMenu}
-              onRequestChooseMulligan={dialogs.handleRequestChooseMulligan}
-              onRequestRevealHand={dialogs.handleRequestRevealHand}
-              onRequestRevealRandom={dialogs.handleRequestRevealRandom}
-            />
-
-            {dialogs.prompt && (
-              <PromptDialog
-                isOpen
-                title={dialogs.prompt.title}
-                label={dialogs.prompt.label}
-                initialValue={dialogs.prompt.initialValue}
-                helperText={dialogs.prompt.helperText}
-                validate={dialogs.prompt.validate}
-                onSubmit={dialogs.prompt.onSubmit}
-                onCancel={dialogs.closePrompt}
-              />
-            )}
-
-            <RollDieDialog
-              isOpen={dialogs.rollDieOpen}
-              lastSides={dialogs.lastDieSides}
-              lastCount={dialogs.lastDieCount}
-              onSubmit={dialogs.handleRollDieSubmit}
-              onCancel={dialogs.closeRollDie}
-            />
-
-            <CreateCounterDialog
-              isOpen={dialogs.createCounterOpen}
-              onSubmit={dialogs.handleCreateCounterSubmit}
-              onCancel={dialogs.closeCreateCounter}
-            />
-
-            <CreateTokenDialog
-              isOpen={dialogs.createTokenOpen}
-              onSubmit={dialogs.handleCreateTokenSubmit}
-              onCancel={dialogs.closeCreateToken}
-            />
-
-            <SideboardDialog
-              isOpen={dialogs.sideboardOpen}
-              playerName={localPlayer?.properties.userInfo?.name ?? ''}
-              deckCards={cardsFromZone(localPlayer?.zones[App.ZoneName.DECK])}
-              sideboardCards={cardsFromZone(localPlayer?.zones[App.ZoneName.SIDEBOARD])}
-              isLocked={localPlayer?.properties.sideboardLocked ?? false}
-              onSubmit={dialogs.handleSideboardSubmit}
-              onCancel={dialogs.closeSideboard}
-              onToggleLock={dialogs.handleToggleSideboardLock}
-            />
-
-            {dialogs.revealState && (
-              <RevealCardsDialog
-                isOpen
-                title={dialogs.revealState.title}
-                zoneLabel={dialogs.revealState.zoneLabel}
-                showCountInput={dialogs.revealState.showCountInput}
-                defaultCount={dialogs.revealState.defaultCount}
-                players={opponents.revealPlayers}
-                onSubmit={dialogs.revealState.onSubmit}
-                onCancel={dialogs.closeReveal}
-              />
-            )}
-
-            <ConfirmDialog
-              isOpen={dialogs.concedeConfirm === 'concede'}
-              title="Concede this game?"
-              message="You'll stay seated as a spectator until you click Unconcede or Leave Game. Others will see you as conceded."
-              confirmLabel="Concede"
-              destructive
-              onConfirm={dialogs.confirmConcede}
-              onCancel={dialogs.closeConcedeConfirm}
-            />
-
-            <ConfirmDialog
-              isOpen={dialogs.concedeConfirm === 'unconcede'}
-              title="Rejoin the game?"
-              message="This undoes your concede and puts you back into the active player rotation."
-              confirmLabel="Unconcede"
-              onConfirm={dialogs.confirmUnconcede}
-              onCancel={dialogs.closeConcedeConfirm}
-            />
-
-            <GameInfoDialog
-              isOpen={dialogs.gameInfoOpen}
-              gameId={gameId}
-              onClose={dialogs.closeGameInfo}
-            />
-          </div>
-
-          <DragOverlay>
-            {dnd.activeCard ? <CardDragOverlay card={dnd.activeCard} /> : null}
-          </DragOverlay>
-        </DndContext>
-      </CardRegistryContext.Provider>
+      <span>"Game"</span>
     </Layout>
   );
 }
diff --git a/webclient/src/containers/Game/useGame.ts b/webclient/src/containers/Game/useGame.ts
deleted file mode 100644
index 17a20d695..000000000
--- a/webclient/src/containers/Game/useGame.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { RefObject, useCallback, useMemo, useRef, useState } from 'react';
-import { KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-
-import { createCardRegistry, type CardRegistry } from '@app/components';
-import { useCurrentGame, useGameAccess, type CurrentGame, type GameAccess } from '@app/hooks';
-import type { Data } from '@app/types';
-
-import { useGameArrowInteractions, type GameArrowInteractions } from './useGameArrowInteractions';
-import { useGameDialogs, type GameDialogs } from './useGameDialogs';
-import { useGameDnd, type GameDnd } from './useGameDnd';
-import { useGameLifecycleNavigation } from './useGameLifecycleNavigation';
-import { useGameOpponentSelector, type GameOpponentSelector } from './useGameOpponentSelector';
-
-export interface Game extends CurrentGame {
-  boardRef: RefObject<HTMLDivElement>;
-  cardRegistry: CardRegistry;
-  sensors: ReturnType<typeof useSensors>;
-  hoveredCard: Data.ServerInfo_Card | null;
-  setHoveredCard: (card: Data.ServerInfo_Card | null) => void;
-  isRotated: boolean;
-  toggleRotated: () => void;
-  localAccess: GameAccess;
-  opponentAccess: GameAccess;
-  deckSelectOpen: boolean;
-  opponents: GameOpponentSelector;
-  arrows: GameArrowInteractions;
-  dialogs: GameDialogs;
-  dnd: GameDnd;
-}
-
-export function useGame(): Game {
-  const current = useCurrentGame();
-  const { gameId, game, localPlayer, isSpectator } = current;
-
-  useGameLifecycleNavigation(gameId);
-
-  const boardRef = useRef<HTMLDivElement>(null);
-  const cardRegistry = useMemo(() => createCardRegistry(), []);
-  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));
-  const [hoveredCard, setHoveredCard] = useState<Data.ServerInfo_Card | null>(null);
-  // View-only 90° rotation; local to this tab, mirrors desktop's
-  // Player::actRotateLocal which applies a QGraphicsView transform with no
-  // server call.
-  const [isRotated, setIsRotated] = useState(false);
-  const toggleRotated = useCallback(() => setIsRotated((prev) => !prev), []);
-
-  const opponents = useGameOpponentSelector(game);
-  const localAccess = useGameAccess(gameId, game?.localPlayerId);
-  const opponentAccess = useGameAccess(gameId, opponents.shownOpponentId);
-
-  const arrows = useGameArrowInteractions({ gameId, game, boardRef, cardRegistry });
-  const dialogs = useGameDialogs({
-    gameId,
-    game,
-    localPlayer,
-    localAccess,
-    isSpectator,
-    startPendingArrow: arrows.startPendingArrow,
-    startPendingAttach: arrows.startPendingAttach,
-  });
-  const dnd = useGameDnd({ gameId, onDragStart: arrows.cancelPendingOnDragStart });
-
-  // Explicit localPlayer null-check closes a window during reconnect where
-  // `game` is present but `players[localPlayerId]` is not yet populated
-  // (Event_GameStateChanged arrives after Event_GameJoined echo).
-  const deckSelectOpen =
-    game != null &&
-    localPlayer != null &&
-    !game.started &&
-    !current.isSpectator &&
-    !current.isJudge &&
-    !localPlayer.properties.readyStart;
-
-  return {
-    ...current,
-    boardRef,
-    cardRegistry,
-    sensors,
-    hoveredCard,
-    setHoveredCard,
-    isRotated,
-    toggleRotated,
-    localAccess,
-    opponentAccess,
-    deckSelectOpen,
-    opponents,
-    arrows,
-    dialogs,
-    dnd,
-  };
-}
diff --git a/webclient/src/containers/Game/useGameArrowInteractions.spec.ts b/webclient/src/containers/Game/useGameArrowInteractions.spec.ts
deleted file mode 100644
index 571a50309..000000000
--- a/webclient/src/containers/Game/useGameArrowInteractions.spec.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { createRef } from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { createCardRegistry } from '../../components/Game/CardRegistry/CardRegistryContext';
-import { combineReducers } from '@reduxjs/toolkit';
-
-import { gamesReducer } from '../../store/game/game.reducer';
-import { makeGameEntry, makePlayerEntry, makePlayerProperties } from '../../store/game/__mocks__/fixtures';
-import type { GamesState } from '../../store/game/game.interfaces';
-import { makeReduxWebClientHookWrapper } from '../../__test-utils__/makeHookWrapper';
-import { App } from '../../types';
-import { useGameArrowInteractions } from './useGameArrowInteractions';
-
-function setup({ localPlayerId = 1 }: { localPlayerId?: number } = {}) {
-  const game = makeGameEntry({
-    localPlayerId,
-    players: {
-      [localPlayerId]: makePlayerEntry({
-        properties: makePlayerProperties({ playerId: localPlayerId }),
-      }),
-    },
-  });
-  const gamesState: GamesState = { games: { 1: { ...game, info: { ...game.info, gameId: 1 } } } };
-
-  const { Wrapper, webClient } = makeReduxWebClientHookWrapper({
-    reducer: combineReducers({ games: gamesReducer }),
-    preloadedState: { games: gamesState },
-  });
-
-  const boardRef = createRef<HTMLDivElement>();
-  const board = document.createElement('div');
-  board.getBoundingClientRect = () =>
-    ({ left: 0, top: 0, right: 1000, bottom: 1000, width: 1000, height: 1000, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect;
-  (boardRef as { current: HTMLDivElement | null }).current = board;
-
-  const cardRegistry = createCardRegistry();
-
-  const { result } = renderHook(
-    () =>
-      useGameArrowInteractions({
-        gameId: 1,
-        game: { ...game, info: { ...game.info, gameId: 1 } },
-        boardRef,
-        cardRegistry,
-      }),
-    { wrapper: Wrapper },
-  );
-
-  return { result, webClient, boardRef };
-}
-
-function makeCardElement({
-  playerId,
-  zone,
-  cardId,
-}: {
-  playerId: number;
-  zone: string;
-  cardId: number;
-}): HTMLElement {
-  const el = document.createElement('div');
-  el.setAttribute('data-card-id', String(cardId));
-  el.setAttribute('data-card-owner', String(playerId));
-  el.setAttribute('data-card-zone', zone);
-  document.body.appendChild(el);
-  return el;
-}
-
-function fireMouseEvent(type: string, init: Partial<MouseEventInit> = {}) {
-  window.dispatchEvent(new MouseEvent(type, { bubbles: true, ...init }));
-}
-
-describe('useGameArrowInteractions', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('creates an arrow after right-click-drag past the 8px threshold', () => {
-    const { result, webClient } = setup();
-    const targetEl = makeCardElement({ playerId: 2, zone: App.ZoneName.TABLE, cardId: 99 });
-    const origElementFromPoint = document.elementFromPoint;
-    document.elementFromPoint = () => targetEl;
-
-    act(() => {
-      result.current.handleBoardMouseDown({
-        button: 2,
-        clientX: 10,
-        clientY: 10,
-        target: makeCardElement({ playerId: 1, zone: App.ZoneName.TABLE, cardId: 5 }),
-      } as unknown as React.MouseEvent<HTMLDivElement>);
-    });
-
-    act(() => {
-      fireMouseEvent('mousemove', { clientX: 30, clientY: 30 });
-    });
-
-    act(() => {
-      fireMouseEvent('mouseup', { button: 2, clientX: 30, clientY: 30 });
-    });
-
-    expect(webClient.request.game.createArrow).toHaveBeenCalledWith(
-      1,
-      expect.objectContaining({
-        startPlayerId: 1,
-        startCardId: 5,
-        targetPlayerId: 2,
-        targetCardId: 99,
-        targetZone: App.ZoneName.TABLE,
-      }),
-    );
-
-    document.elementFromPoint = origElementFromPoint;
-  });
-
-  it('plays the card (moveCard) when dragging from HAND to a non-HAND target', () => {
-    const { result, webClient } = setup({ localPlayerId: 1 });
-    const targetEl = makeCardElement({ playerId: 2, zone: App.ZoneName.TABLE, cardId: 99 });
-    const origElementFromPoint = document.elementFromPoint;
-    document.elementFromPoint = () => targetEl;
-
-    act(() => {
-      result.current.handleBoardMouseDown({
-        button: 2,
-        clientX: 0,
-        clientY: 0,
-        target: makeCardElement({ playerId: 1, zone: App.ZoneName.HAND, cardId: 5 }),
-      } as unknown as React.MouseEvent<HTMLDivElement>);
-    });
-    act(() => fireMouseEvent('mousemove', { clientX: 30, clientY: 30 }));
-    act(() => fireMouseEvent('mouseup', { button: 2, clientX: 30, clientY: 30 }));
-
-    expect(webClient.request.game.moveCard).toHaveBeenCalled();
-    expect(webClient.request.game.createArrow).not.toHaveBeenCalled();
-
-    document.elementFromPoint = origElementFromPoint;
-  });
-
-  it('does not send a request when the drop lands on the same card (cancel)', () => {
-    const { result, webClient } = setup();
-    const sameEl = makeCardElement({ playerId: 1, zone: App.ZoneName.TABLE, cardId: 5 });
-    const origElementFromPoint = document.elementFromPoint;
-    document.elementFromPoint = () => sameEl;
-
-    act(() => {
-      result.current.handleBoardMouseDown({
-        button: 2,
-        clientX: 0,
-        clientY: 0,
-        target: sameEl,
-      } as unknown as React.MouseEvent<HTMLDivElement>);
-    });
-    act(() => fireMouseEvent('mousemove', { clientX: 30, clientY: 30 }));
-    act(() => fireMouseEvent('mouseup', { button: 2, clientX: 30, clientY: 30 }));
-
-    expect(webClient.request.game.createArrow).not.toHaveBeenCalled();
-
-    document.elementFromPoint = origElementFromPoint;
-  });
-
-  it('does not send a request when mouseup is below the drag threshold', () => {
-    const { result, webClient } = setup();
-    const targetEl = makeCardElement({ playerId: 2, zone: App.ZoneName.TABLE, cardId: 99 });
-    const origElementFromPoint = document.elementFromPoint;
-    document.elementFromPoint = () => targetEl;
-
-    act(() => {
-      result.current.handleBoardMouseDown({
-        button: 2,
-        clientX: 10,
-        clientY: 10,
-        target: makeCardElement({ playerId: 1, zone: App.ZoneName.TABLE, cardId: 5 }),
-      } as unknown as React.MouseEvent<HTMLDivElement>);
-    });
-    act(() => fireMouseEvent('mouseup', { button: 2, clientX: 12, clientY: 12 }));
-
-    expect(webClient.request.game.createArrow).not.toHaveBeenCalled();
-    expect(webClient.request.game.moveCard).not.toHaveBeenCalled();
-
-    document.elementFromPoint = origElementFromPoint;
-  });
-
-  it('ESC cancels pending arrow state', () => {
-    const { result } = setup();
-
-    act(() => {
-      result.current.startPendingArrow({ sourcePlayerId: 1, sourceZone: App.ZoneName.TABLE, sourceCardId: 5 });
-    });
-    expect(result.current.arrowSourceKey).not.toBeNull();
-
-    act(() => {
-      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    });
-    expect(result.current.arrowSourceKey).toBeNull();
-  });
-
-  it('ESC does not cancel while a MUI dialog is open', () => {
-    const { result } = setup();
-
-    const dialog = document.createElement('div');
-    dialog.className = 'MuiDialog-root';
-    dialog.setAttribute('role', 'dialog');
-    document.body.appendChild(dialog);
-
-    act(() => {
-      result.current.startPendingArrow({ sourcePlayerId: 1, sourceZone: App.ZoneName.TABLE, sourceCardId: 5 });
-    });
-    act(() => {
-      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    });
-
-    expect(result.current.arrowSourceKey).not.toBeNull();
-  });
-});
diff --git a/webclient/src/containers/Game/useGameArrowInteractions.ts b/webclient/src/containers/Game/useGameArrowInteractions.ts
deleted file mode 100644
index c994bf419..000000000
--- a/webclient/src/containers/Game/useGameArrowInteractions.ts
+++ /dev/null
@@ -1,404 +0,0 @@
-import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import type { CardRegistry } from '@app/components';
-import { makeCardKey } from '@app/components';
-import { useWebClient } from '@app/hooks';
-import { App, Data, type Enriched } from '@app/types';
-
-interface PendingArrow {
-  sourcePlayerId: number;
-  sourceZone: string;
-  sourceCardId: number;
-}
-
-// Shares shape with PendingArrow today, but kept distinct so future
-// protocol fields (e.g. desktop's attach-target coord hints) can diverge
-// without a runtime switch.
-interface PendingAttach {
-  sourcePlayerId: number;
-  sourceZone: string;
-  sourceCardId: number;
-}
-
-interface ArrowDragState {
-  sourcePlayerId: number;
-  sourceZone: string;
-  sourceCardId: number;
-  startX: number;
-  startY: number;
-  currentX: number;
-  currentY: number;
-  moved: boolean;
-}
-
-export interface ArrowDragPreview {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  color: string;
-}
-
-export interface GameArrowInteractions {
-  arrowSourceKey: string | null;
-  dragPreview: ArrowDragPreview | null;
-  handleBoardMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
-  handleCardClick: (
-    ownerPlayerId: number,
-    zone: string,
-    card: Data.ServerInfo_Card,
-  ) => void;
-  handleCardDoubleClick: (sourceZone: string, card: Data.ServerInfo_Card) => void;
-  startPendingArrow: (source: PendingArrow) => void;
-  startPendingAttach: (source: PendingAttach) => void;
-  cancelPendingOnDragStart: () => void;
-}
-
-export interface UseGameArrowInteractionsArgs {
-  gameId: number | undefined;
-  game: Enriched.GameEntry | undefined;
-  boardRef: RefObject<HTMLDivElement>;
-  cardRegistry: CardRegistry;
-}
-
-function arrowColorForModifiers(e: {
-  ctrlKey: boolean;
-  altKey: boolean;
-  shiftKey: boolean;
-}): App.ColorRGBA {
-  if (e.ctrlKey) {
-    return App.ArrowColor.YELLOW;
-  }
-  if (e.altKey) {
-    return App.ArrowColor.BLUE;
-  }
-  if (e.shiftKey) {
-    return App.ArrowColor.GREEN;
-  }
-  return App.ArrowColor.RED;
-}
-
-const ARROW_DRAG_THRESHOLD_PX = 8;
-
-export function useGameArrowInteractions({
-  gameId,
-  game,
-  boardRef,
-  cardRegistry,
-}: UseGameArrowInteractionsArgs): GameArrowInteractions {
-  const webClient = useWebClient();
-
-  const [pendingArrow, setPendingArrow] = useState<PendingArrow | null>(null);
-  const [pendingAttach, setPendingAttach] = useState<PendingAttach | null>(null);
-  const [arrowDrag, setArrowDrag] = useState<ArrowDragState | null>(null);
-  const suppressNextContextMenuRef = useRef(false);
-
-  // ESC cancels a pending arrow OR attach (matches desktop). Suppress the
-  // cancel when a MUI dialog is open — the dialog's own ESC handler should
-  // win so the user isn't rug-pulled out of a modal form.
-  useEffect(() => {
-    if (!pendingArrow && !pendingAttach && !arrowDrag) {
-      return undefined;
-    }
-    const handler = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') {
-        return;
-      }
-      if (document.querySelector('.MuiDialog-root[role="dialog"]')) {
-        return;
-      }
-      setPendingArrow(null);
-      setPendingAttach(null);
-      setArrowDrag(null);
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [pendingArrow, pendingAttach, arrowDrag]);
-
-  // Right-click-drag arrow-draw lifecycle: window-level mousemove + mouseup
-  // listeners that track the cursor and finalize on release.
-  useEffect(() => {
-    if (!arrowDrag) {
-      return undefined;
-    }
-
-    const handleMove = (e: MouseEvent) => {
-      setArrowDrag((prev) => {
-        if (!prev) {
-          return prev;
-        }
-        const movedX = Math.abs(e.clientX - prev.startX);
-        const movedY = Math.abs(e.clientY - prev.startY);
-        const moved = prev.moved || movedX + movedY > ARROW_DRAG_THRESHOLD_PX;
-        return { ...prev, currentX: e.clientX, currentY: e.clientY, moved };
-      });
-    };
-
-    const handleUp = (e: MouseEvent) => {
-      if (e.button !== 2) {
-        return;
-      }
-      const drag = arrowDrag;
-      if (!drag) {
-        return;
-      }
-      const movedX = Math.abs(e.clientX - drag.startX);
-      const movedY = Math.abs(e.clientY - drag.startY);
-      const moved = drag.moved || movedX + movedY > ARROW_DRAG_THRESHOLD_PX;
-      setArrowDrag(null);
-      if (!moved || gameId == null) {
-        // Short right-click with no drag: let the contextmenu handler run
-        // (it will open the card menu).
-        return;
-      }
-      // Any real drag suppresses the contextmenu event that follows mouseup.
-      suppressNextContextMenuRef.current = true;
-
-      const el = document.elementFromPoint(e.clientX, e.clientY)?.closest('[data-card-id]') as HTMLElement | null;
-      if (!el) {
-        return;
-      }
-      const targetPlayerId = Number(el.getAttribute('data-card-owner'));
-      const targetZone = el.getAttribute('data-card-zone') ?? '';
-      const targetCardId = Number(el.getAttribute('data-card-id'));
-      if (!Number.isFinite(targetPlayerId) || !targetZone || !Number.isFinite(targetCardId)) {
-        return;
-      }
-      // Same-card drops are cancellations.
-      if (
-        targetPlayerId === drag.sourcePlayerId &&
-        targetZone === drag.sourceZone &&
-        targetCardId === drag.sourceCardId
-      ) {
-        return;
-      }
-      // Desktop parity: dragging an arrow from a local-hand card to a target
-      // outside the hand auto-plays the card (card_item.cpp:243-250) — the
-      // card is moved to the battlefield before any arrow is drawn. The
-      // server re-keys the card id during the move, so we can't also send
-      // createArrow here; instead we resolve this drag as a play-card intent.
-      if (
-        drag.sourceZone === App.ZoneName.HAND &&
-        drag.sourcePlayerId === game?.localPlayerId &&
-        targetZone !== App.ZoneName.HAND
-      ) {
-        webClient.request.game.moveCard(gameId, {
-          startPlayerId: drag.sourcePlayerId,
-          startZone: drag.sourceZone,
-          cardsToMove: { card: [{ cardId: drag.sourceCardId }] },
-          targetPlayerId: drag.sourcePlayerId,
-          targetZone: App.ZoneName.TABLE,
-          x: 0,
-          y: 0,
-          isReversed: false,
-        });
-        return;
-      }
-      webClient.request.game.createArrow(gameId, {
-        startPlayerId: drag.sourcePlayerId,
-        startZone: drag.sourceZone,
-        startCardId: drag.sourceCardId,
-        targetPlayerId,
-        targetZone,
-        targetCardId,
-        arrowColor: arrowColorForModifiers(e),
-      });
-    };
-
-    window.addEventListener('mousemove', handleMove);
-    window.addEventListener('mouseup', handleUp);
-    return () => {
-      window.removeEventListener('mousemove', handleMove);
-      window.removeEventListener('mouseup', handleUp);
-    };
-  }, [arrowDrag, gameId, webClient, game?.localPlayerId]);
-
-  // Suppress the browser contextmenu event after a right-drag.
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (suppressNextContextMenuRef.current) {
-        e.preventDefault();
-        suppressNextContextMenuRef.current = false;
-      }
-    };
-    window.addEventListener('contextmenu', handler);
-    return () => window.removeEventListener('contextmenu', handler);
-  }, []);
-
-  const handleBoardMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.button !== 2) {
-      return;
-    }
-    const el = (e.target as HTMLElement).closest('[data-card-id]') as HTMLElement | null;
-    if (!el) {
-      return;
-    }
-    const sourcePlayerId = Number(el.getAttribute('data-card-owner'));
-    const sourceZone = el.getAttribute('data-card-zone') ?? '';
-    const sourceCardId = Number(el.getAttribute('data-card-id'));
-    if (!Number.isFinite(sourcePlayerId) || !sourceZone || !Number.isFinite(sourceCardId)) {
-      return;
-    }
-    setArrowDrag({
-      sourcePlayerId,
-      sourceZone,
-      sourceCardId,
-      startX: e.clientX,
-      startY: e.clientY,
-      currentX: e.clientX,
-      currentY: e.clientY,
-      moved: false,
-    });
-  }, []);
-
-  const arrowSourceKey = pendingArrow
-    ? makeCardKey(pendingArrow.sourcePlayerId, pendingArrow.sourceZone, pendingArrow.sourceCardId)
-    : pendingAttach
-      ? makeCardKey(pendingAttach.sourcePlayerId, pendingAttach.sourceZone, pendingAttach.sourceCardId)
-      : arrowDrag
-        ? makeCardKey(arrowDrag.sourcePlayerId, arrowDrag.sourceZone, arrowDrag.sourceCardId)
-        : null;
-
-  // Convert arrowDrag's viewport coords → board-relative coords for the SVG
-  // preview line. Recomputed every render; cheap.
-  const dragPreview = useMemo<ArrowDragPreview | null>(() => {
-    if (!arrowDrag || !arrowDrag.moved) {
-      return null;
-    }
-    const boardRect = boardRef.current?.getBoundingClientRect();
-    const sourceEl = cardRegistry.get(
-      makeCardKey(arrowDrag.sourcePlayerId, arrowDrag.sourceZone, arrowDrag.sourceCardId),
-    );
-    if (!boardRect || !sourceEl) {
-      return null;
-    }
-    const sourceRect = sourceEl.getBoundingClientRect();
-    return {
-      x1: sourceRect.left + sourceRect.width / 2 - boardRect.left,
-      y1: sourceRect.top + sourceRect.height / 2 - boardRect.top,
-      x2: arrowDrag.currentX - boardRect.left,
-      y2: arrowDrag.currentY - boardRect.top,
-      color: App.rgbaToCss(App.ArrowColor.RED),
-    };
-  }, [arrowDrag, cardRegistry, boardRef]);
-
-  const handleCardClick = useCallback(
-    (ownerPlayerId: number, zone: string, card: Data.ServerInfo_Card) => {
-      if (gameId == null) {
-        return;
-      }
-
-      // Pending-attach (from CardContextMenu "Attach to card…") takes
-      // precedence over pending-arrow because it was activated by a later menu
-      // action. Click on the pending source to cancel.
-      if (pendingAttach) {
-        if (
-          pendingAttach.sourcePlayerId === ownerPlayerId &&
-          pendingAttach.sourceZone === zone &&
-          pendingAttach.sourceCardId === card.id
-        ) {
-          setPendingAttach(null);
-          return;
-        }
-        webClient.request.game.attachCard(gameId, {
-          startZone: pendingAttach.sourceZone,
-          cardId: pendingAttach.sourceCardId,
-          targetPlayerId: ownerPlayerId,
-          targetZone: zone,
-          targetCardId: card.id,
-        });
-        setPendingAttach(null);
-        return;
-      }
-
-      if (!pendingArrow) {
-        return;
-      }
-      // Cancel if user re-clicks the pending source.
-      if (
-        pendingArrow.sourcePlayerId === ownerPlayerId &&
-        pendingArrow.sourceZone === zone &&
-        pendingArrow.sourceCardId === card.id
-      ) {
-        setPendingArrow(null);
-        return;
-      }
-      // Desktop parity: arrow from local-hand → non-hand target auto-plays the
-      // card (card_item.cpp:243-250). The server re-keys the moved card id, so
-      // we resolve this as a play-card intent and drop the arrow command.
-      if (
-        pendingArrow.sourceZone === App.ZoneName.HAND &&
-        pendingArrow.sourcePlayerId === game?.localPlayerId &&
-        zone !== App.ZoneName.HAND
-      ) {
-        webClient.request.game.moveCard(gameId, {
-          startPlayerId: pendingArrow.sourcePlayerId,
-          startZone: pendingArrow.sourceZone,
-          cardsToMove: { card: [{ cardId: pendingArrow.sourceCardId }] },
-          targetPlayerId: pendingArrow.sourcePlayerId,
-          targetZone: App.ZoneName.TABLE,
-          x: 0,
-          y: 0,
-          isReversed: false,
-        });
-        setPendingArrow(null);
-        return;
-      }
-      webClient.request.game.createArrow(gameId, {
-        startPlayerId: pendingArrow.sourcePlayerId,
-        startZone: pendingArrow.sourceZone,
-        startCardId: pendingArrow.sourceCardId,
-        targetPlayerId: ownerPlayerId,
-        targetZone: zone,
-        targetCardId: card.id,
-        arrowColor: App.ArrowColor.RED,
-      });
-      setPendingArrow(null);
-    },
-    [gameId, game?.localPlayerId, pendingArrow, pendingAttach, webClient],
-  );
-
-  const handleCardDoubleClick = useCallback(
-    (sourceZone: string, card: Data.ServerInfo_Card) => {
-      if (sourceZone !== App.ZoneName.TABLE || gameId == null) {
-        return;
-      }
-      // Desktop's arrow drag owns the pointer while active; mirror that by
-      // short-circuiting tap-toggle while a pending arrow/attach is armed.
-      if (pendingArrow || pendingAttach) {
-        return;
-      }
-      webClient.request.game.setCardAttr(gameId, {
-        zone: sourceZone,
-        cardId: card.id,
-        attribute: Data.CardAttribute.AttrTapped,
-        attrValue: card.tapped ? '0' : '1',
-      });
-    },
-    [gameId, pendingArrow, pendingAttach, webClient],
-  );
-
-  const startPendingArrow = useCallback((source: PendingArrow) => {
-    setPendingArrow(source);
-  }, []);
-
-  const startPendingAttach = useCallback((source: PendingAttach) => {
-    setPendingAttach(source);
-  }, []);
-
-  const cancelPendingOnDragStart = useCallback(() => {
-    setPendingArrow((prev) => (prev ? null : prev));
-    setPendingAttach((prev) => (prev ? null : prev));
-  }, []);
-
-  return {
-    arrowSourceKey,
-    dragPreview,
-    handleBoardMouseDown,
-    handleCardClick,
-    handleCardDoubleClick,
-    startPendingArrow,
-    startPendingAttach,
-    cancelPendingOnDragStart,
-  };
-}
diff --git a/webclient/src/containers/Game/useGameDialogs.ts b/webclient/src/containers/Game/useGameDialogs.ts
deleted file mode 100644
index e7927d57e..000000000
--- a/webclient/src/containers/Game/useGameDialogs.ts
+++ /dev/null
@@ -1,730 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { DEFAULT_DIE_COUNT, DEFAULT_DIE_SIDES, type SideboardPlanMove } from '@app/dialogs';
-import { useWebClient, type GameAccess } from '@app/hooks';
-import { App, Data, type Enriched } from '@app/types';
-
-export interface AnchorPosition {
-  top: number;
-  left: number;
-}
-
-export interface ZoneViewTarget {
-  playerId: number;
-  zoneName: string;
-}
-
-export interface CardMenuState {
-  card: Data.ServerInfo_Card;
-  sourcePlayerId: number;
-  sourceZone: string;
-  anchorPosition: AnchorPosition;
-}
-
-export interface ZoneMenuState {
-  playerId: number;
-  zoneName: string;
-  anchorPosition: AnchorPosition;
-}
-
-export interface PromptState {
-  title: string;
-  label: string;
-  initialValue?: string;
-  helperText?: string;
-  validate?: (value: string) => string | null;
-  onSubmit: (value: string) => void;
-}
-
-export interface RevealState {
-  title: string;
-  zoneName: string;
-  zoneLabel: string;
-  showCountInput: boolean;
-  defaultCount: number;
-  onSubmit: (args: { targetPlayerId: number; topCards: number }) => void;
-}
-
-export type ConcedeConfirm = 'concede' | 'unconcede' | null;
-
-export interface StartPendingSource {
-  sourcePlayerId: number;
-  sourceZone: string;
-  sourceCardId: number;
-}
-
-export interface GameDialogs {
-  // Card/zone/player/hand menus
-  cardMenu: CardMenuState | null;
-  zoneMenu: ZoneMenuState | null;
-  playerMenu: AnchorPosition | null;
-  handMenu: AnchorPosition | null;
-  closeCardMenu: () => void;
-  closeZoneMenu: () => void;
-  closePlayerMenu: () => void;
-  closeHandMenu: () => void;
-  handleCardContextMenu: (
-    sourcePlayerId: number,
-    sourceZone: string,
-    card: Data.ServerInfo_Card,
-    event: React.MouseEvent,
-  ) => void;
-  handleZoneContextMenu: (
-    playerId: number,
-    zoneName: string,
-    event: React.MouseEvent,
-  ) => void;
-  handlePlayerContextMenu: (event: React.MouseEvent) => void;
-  handleHandContextMenu: (event: React.MouseEvent) => void;
-
-  // Zone-view dialog stack
-  zoneViews: ZoneViewTarget[];
-  handleZoneClick: (playerId: number, zoneName: string) => void;
-  handleCloseZoneView: (playerId: number, zoneName: string) => void;
-
-  // Prompt dialog
-  prompt: PromptState | null;
-  closePrompt: () => void;
-
-  // Roll die dialog
-  rollDieOpen: boolean;
-  lastDieSides: number;
-  lastDieCount: number;
-  openRollDie: () => void;
-  closeRollDie: () => void;
-  handleRollDieSubmit: (args: { sides: number; count: number }) => void;
-
-  // Counter / token / sideboard / game info / concede
-  createCounterOpen: boolean;
-  openCreateCounter: () => void;
-  closeCreateCounter: () => void;
-  handleCreateCounterSubmit: (args: {
-    name: string;
-    color: { r: number; g: number; b: number; a: number };
-  }) => void;
-
-  createTokenOpen: boolean;
-  openCreateToken: () => void;
-  closeCreateToken: () => void;
-  handleCreateTokenSubmit: (args: {
-    name: string;
-    color: string;
-    pt: string;
-    annotation: string;
-    destroyOnZoneChange: boolean;
-    faceDown: boolean;
-  }) => void;
-
-  sideboardOpen: boolean;
-  openSideboard: () => void;
-  closeSideboard: () => void;
-  handleSideboardSubmit: (moveList: SideboardPlanMove[]) => void;
-  handleToggleSideboardLock: (locked: boolean) => void;
-
-  gameInfoOpen: boolean;
-  openGameInfo: () => void;
-  closeGameInfo: () => void;
-
-  concedeConfirm: ConcedeConfirm;
-  openConcede: () => void;
-  openUnconcede: () => void;
-  closeConcedeConfirm: () => void;
-  confirmConcede: () => void;
-  confirmUnconcede: () => void;
-
-  // Reveal-cards dialog
-  revealState: RevealState | null;
-  closeReveal: () => void;
-
-  // Card context menu action handlers
-  handleRequestSetPT: () => void;
-  handleRequestSetAnnotation: () => void;
-  handleRequestSetCardCounter: () => void;
-  handleRequestDrawArrow: () => void;
-  handleRequestAttach: () => void;
-  handleRequestMoveToLibraryAt: () => void;
-
-  // Zone context menu action handlers
-  handleRequestDrawN: () => void;
-  handleRequestDumpN: () => void;
-  handleRequestRevealTopN: () => void;
-  handleRequestRevealZone: () => void;
-
-  // Hand context menu action handlers
-  handleRequestChooseMulligan: () => void;
-  handleRequestRevealHand: () => void;
-  handleRequestRevealRandom: () => void;
-}
-
-export interface UseGameDialogsArgs {
-  gameId: number | undefined;
-  game: Enriched.GameEntry | undefined;
-  localPlayer: Enriched.PlayerEntry | undefined;
-  localAccess: GameAccess;
-  isSpectator: boolean;
-  startPendingArrow: (source: StartPendingSource) => void;
-  startPendingAttach: (source: StartPendingSource) => void;
-}
-
-export function useGameDialogs({
-  gameId,
-  game,
-  localPlayer,
-  localAccess,
-  isSpectator,
-  startPendingArrow,
-  startPendingAttach,
-}: UseGameDialogsArgs): GameDialogs {
-  const webClient = useWebClient();
-
-  const [zoneViews, setZoneViews] = useState<ZoneViewTarget[]>([]);
-  const [cardMenu, setCardMenu] = useState<CardMenuState | null>(null);
-  const [zoneMenu, setZoneMenu] = useState<ZoneMenuState | null>(null);
-  const [prompt, setPrompt] = useState<PromptState | null>(null);
-  const [rollDieOpen, setRollDieOpen] = useState(false);
-  const [lastDieSides, setLastDieSides] = useState(DEFAULT_DIE_SIDES);
-  const [lastDieCount, setLastDieCount] = useState(DEFAULT_DIE_COUNT);
-  const [createCounterOpen, setCreateCounterOpen] = useState(false);
-  const [createTokenOpen, setCreateTokenOpen] = useState(false);
-  const [sideboardOpen, setSideboardOpen] = useState(false);
-  const [revealState, setRevealState] = useState<RevealState | null>(null);
-  const [playerMenu, setPlayerMenu] = useState<AnchorPosition | null>(null);
-  const [handMenu, setHandMenu] = useState<AnchorPosition | null>(null);
-  const [concedeConfirm, setConcedeConfirm] = useState<ConcedeConfirm>(null);
-  const [gameInfoOpen, setGameInfoOpen] = useState(false);
-
-  const handleZoneClick = useCallback((playerId: number, zoneName: string) => {
-    setZoneViews((prev) => {
-      if (prev.some((v) => v.playerId === playerId && v.zoneName === zoneName)) {
-        return prev;
-      }
-      return [...prev, { playerId, zoneName }];
-    });
-  }, []);
-
-  const handleCloseZoneView = useCallback((playerId: number, zoneName: string) => {
-    setZoneViews((prev) =>
-      prev.filter((v) => !(v.playerId === playerId && v.zoneName === zoneName)),
-    );
-  }, []);
-
-  const handleCardContextMenu = useCallback(
-    (
-      sourcePlayerId: number,
-      sourceZone: string,
-      card: Data.ServerInfo_Card,
-      event: React.MouseEvent,
-    ) => {
-      event.preventDefault();
-      setZoneMenu(null);
-      setCardMenu({
-        card,
-        sourcePlayerId,
-        sourceZone,
-        anchorPosition: { top: event.clientY, left: event.clientX },
-      });
-    },
-    [],
-  );
-
-  const handleZoneContextMenu = useCallback(
-    (playerId: number, zoneName: string, event: React.MouseEvent) => {
-      if (playerId !== game?.localPlayerId) {
-        return;
-      }
-      const supported =
-        zoneName === App.ZoneName.DECK ||
-        zoneName === App.ZoneName.GRAVE ||
-        zoneName === App.ZoneName.EXILE;
-      if (!supported) {
-        return;
-      }
-      event.preventDefault();
-      setCardMenu(null);
-      setZoneMenu({
-        playerId,
-        zoneName,
-        anchorPosition: { top: event.clientY, left: event.clientX },
-      });
-    },
-    [game?.localPlayerId],
-  );
-
-  const handlePlayerContextMenu = useCallback(
-    (event: React.MouseEvent) => {
-      if (gameId == null || isSpectator || localAccess.canAct === false) {
-        return;
-      }
-      event.preventDefault();
-      setPlayerMenu({ top: event.clientY, left: event.clientX });
-    },
-    [gameId, isSpectator, localAccess.canAct],
-  );
-
-  const handleHandContextMenu = useCallback(
-    (event: React.MouseEvent) => {
-      if (gameId == null || isSpectator || localAccess.canAct === false) {
-        return;
-      }
-      event.preventDefault();
-      setHandMenu({ top: event.clientY, left: event.clientX });
-    },
-    [gameId, isSpectator, localAccess.canAct],
-  );
-
-  const handleRequestSetPT = useCallback(() => {
-    const menu = cardMenu;
-    if (!menu || gameId == null) {
-      return;
-    }
-    setPrompt({
-      title: 'Set power/toughness',
-      label: 'P/T (e.g. 3/3)',
-      initialValue: menu.card.pt ?? '',
-      onSubmit: (value) => {
-        webClient.request.game.setCardAttr(gameId, {
-          zone: menu.sourceZone,
-          cardId: menu.card.id,
-          attribute: Data.CardAttribute.AttrPT,
-          attrValue: value,
-        });
-        setPrompt(null);
-      },
-    });
-  }, [cardMenu, gameId, webClient]);
-
-  const handleRequestSetAnnotation = useCallback(() => {
-    const menu = cardMenu;
-    if (!menu || gameId == null) {
-      return;
-    }
-    setPrompt({
-      title: 'Set annotation',
-      label: 'Annotation',
-      initialValue: menu.card.annotation ?? '',
-      onSubmit: (value) => {
-        webClient.request.game.setCardAttr(gameId, {
-          zone: menu.sourceZone,
-          cardId: menu.card.id,
-          attribute: Data.CardAttribute.AttrAnnotation,
-          attrValue: value,
-        });
-        setPrompt(null);
-      },
-    });
-  }, [cardMenu, gameId, webClient]);
-
-  const handleRequestSetCardCounter = useCallback(() => {
-    const menu = cardMenu;
-    if (!menu || gameId == null) {
-      return;
-    }
-    const existing = menu.card.counterList.find((c) => c.id === 0);
-    setPrompt({
-      title: 'Set card counter',
-      label: 'Counter value',
-      initialValue: String(existing?.value ?? 0),
-      validate: (v) => (/^-?\d+$/.test(v) ? null : 'Enter an integer'),
-      onSubmit: (value) => {
-        webClient.request.game.setCardCounter(gameId, {
-          zone: menu.sourceZone,
-          cardId: menu.card.id,
-          counterId: 0,
-          counterValue: Number(value),
-        });
-        setPrompt(null);
-      },
-    });
-  }, [cardMenu, gameId, webClient]);
-
-  const handleRequestDrawArrow = useCallback(() => {
-    const menu = cardMenu;
-    if (!menu) {
-      return;
-    }
-    startPendingArrow({
-      sourcePlayerId: menu.sourcePlayerId,
-      sourceZone: menu.sourceZone,
-      sourceCardId: menu.card.id,
-    });
-  }, [cardMenu, startPendingArrow]);
-
-  const handleRequestAttach = useCallback(() => {
-    const menu = cardMenu;
-    if (!menu) {
-      return;
-    }
-    startPendingAttach({
-      sourcePlayerId: menu.sourcePlayerId,
-      sourceZone: menu.sourceZone,
-      sourceCardId: menu.card.id,
-    });
-  }, [cardMenu, startPendingAttach]);
-
-  const handleRequestMoveToLibraryAt = useCallback(() => {
-    const menu = cardMenu;
-    if (!menu || gameId == null || game == null) {
-      return;
-    }
-    // Desktop prompts for a 1-indexed position into the library, then
-    // internally subtracts 1 for the protocol's 0-indexed x-coordinate.
-    setPrompt({
-      title: 'Move to library at position',
-      label: 'Position (1 = top)',
-      initialValue: '1',
-      validate: (v) => (/^[1-9]\d*$/.test(v) ? null : 'Enter a positive integer'),
-      onSubmit: (value) => {
-        webClient.request.game.moveCard(gameId, {
-          startPlayerId: menu.sourcePlayerId,
-          startZone: menu.sourceZone,
-          cardsToMove: { card: [{ cardId: menu.card.id }] },
-          targetPlayerId: game.localPlayerId,
-          targetZone: App.ZoneName.DECK,
-          x: Math.max(0, Number(value) - 1),
-          y: 0,
-          isReversed: false,
-        });
-        setPrompt(null);
-      },
-    });
-  }, [cardMenu, game, gameId, webClient]);
-
-  const handleRequestDrawN = useCallback(() => {
-    if (gameId == null) {
-      return;
-    }
-    setPrompt({
-      title: 'Draw N cards',
-      label: 'Number of cards',
-      initialValue: '1',
-      validate: (v) => (/^[1-9]\d*$/.test(v) ? null : 'Enter a positive integer'),
-      onSubmit: (value) => {
-        webClient.request.game.drawCards(gameId, { number: Number(value) });
-        setPrompt(null);
-      },
-    });
-  }, [gameId, webClient]);
-
-  const handleRequestDumpN = useCallback(() => {
-    if (gameId == null) {
-      return;
-    }
-    setPrompt({
-      title: 'Dump top N',
-      label: 'Number of cards',
-      initialValue: '1',
-      validate: (v) => (/^[1-9]\d*$/.test(v) ? null : 'Enter a positive integer'),
-      onSubmit: (value) => {
-        webClient.request.game.dumpZone(gameId, {
-          playerId: game!.localPlayerId,
-          zoneName: App.ZoneName.DECK,
-          numberCards: Number(value),
-          isReversed: false,
-        });
-        setPrompt(null);
-      },
-    });
-  }, [game, gameId, webClient]);
-
-  const handleRollDieSubmit = useCallback(
-    ({ sides, count }: { sides: number; count: number }) => {
-      if (gameId == null) {
-        return;
-      }
-      webClient.request.game.rollDie(gameId, { sides, count });
-      setLastDieSides(sides);
-      setLastDieCount(count);
-      setRollDieOpen(false);
-    },
-    [gameId, webClient],
-  );
-
-  const handleCreateCounterSubmit = useCallback(
-    ({
-      name,
-      color,
-    }: {
-      name: string;
-      color: { r: number; g: number; b: number; a: number };
-    }) => {
-      if (gameId == null) {
-        return;
-      }
-      webClient.request.game.createCounter(gameId, {
-        counterName: name,
-        counterColor: color,
-        radius: 1,
-        value: 0,
-      });
-      setCreateCounterOpen(false);
-    },
-    [gameId, webClient],
-  );
-
-  const handleCreateTokenSubmit = useCallback(
-    (args: {
-      name: string;
-      color: string;
-      pt: string;
-      annotation: string;
-      destroyOnZoneChange: boolean;
-      faceDown: boolean;
-    }) => {
-      if (gameId == null) {
-        return;
-      }
-      webClient.request.game.createToken(gameId, {
-        zone: App.ZoneName.TABLE,
-        cardName: args.name,
-        color: args.color,
-        pt: args.pt,
-        annotation: args.annotation,
-        destroyOnZoneChange: args.destroyOnZoneChange,
-        x: 0,
-        y: 0,
-        faceDown: args.faceDown,
-        targetCardId: -1,
-      });
-      setCreateTokenOpen(false);
-    },
-    [gameId, webClient],
-  );
-
-  const handleSideboardSubmit = useCallback(
-    (moveList: SideboardPlanMove[]) => {
-      if (gameId == null) {
-        return;
-      }
-      webClient.request.game.setSideboardPlan(gameId, { moveList });
-      setSideboardOpen(false);
-    },
-    [gameId, webClient],
-  );
-
-  const handleToggleSideboardLock = useCallback(
-    (locked: boolean) => {
-      if (gameId == null) {
-        return;
-      }
-      webClient.request.game.setSideboardLock(gameId, { locked });
-    },
-    [gameId, webClient],
-  );
-
-  const handleRequestChooseMulligan = useCallback(() => {
-    if (gameId == null) {
-      return;
-    }
-    // Desktop's DlgMulligan (player_actions.cpp actMulligan) accepts any
-    // integer in [-handSize, handSize + deckSize]. 0 and negative values are
-    // "relative to current hand size" — doMulligan computes
-    // `handSize + number` before dispatching. Seeding with the configured
-    // starting hand size (7) matches desktop's default.
-    const handSize = localPlayer?.zones[App.ZoneName.HAND]?.cardCount ?? 0;
-    const deckSize = localPlayer?.zones[App.ZoneName.DECK]?.cardCount ?? 0;
-    const min = -handSize;
-    const max = handSize + deckSize;
-    setPrompt({
-      title: 'Take mulligan',
-      label: 'New hand size',
-      initialValue: '7',
-      helperText: '0 and lower are in comparison to current hand size.',
-      validate: (v) => {
-        if (!/^-?\d+$/.test(v)) {
-          return 'Enter an integer.';
-        }
-        const n = Number(v);
-        if (n < min || n > max) {
-          return `Enter an integer between ${min} and ${max}.`;
-        }
-        return null;
-      },
-      onSubmit: (value) => {
-        const input = Number(value);
-        const resolved = input < 1 ? handSize + input : input;
-        webClient.request.game.mulligan(gameId, { number: resolved });
-        setPrompt(null);
-      },
-    });
-  }, [gameId, localPlayer, webClient]);
-
-  const handleRequestRevealHand = useCallback(() => {
-    if (gameId == null) {
-      return;
-    }
-    setRevealState({
-      title: 'Reveal hand',
-      zoneName: App.ZoneName.HAND,
-      zoneLabel: 'Hand',
-      showCountInput: false,
-      defaultCount: 1,
-      onSubmit: ({ targetPlayerId }) => {
-        webClient.request.game.revealCards(gameId, {
-          zoneName: App.ZoneName.HAND,
-          playerId: targetPlayerId,
-          topCards: -1,
-        });
-        setRevealState(null);
-      },
-    });
-  }, [gameId, webClient]);
-
-  const handleRequestRevealRandom = useCallback(() => {
-    if (gameId == null) {
-      return;
-    }
-    // Desktop's RANDOM_CARD_FROM_ZONE sentinel (-2); see
-    // cockatrice/src/game/player/player_actions.h:47 and
-    // actRevealRandomHandCard at player_actions.cpp:1705-1712.
-    const RANDOM_CARD_FROM_ZONE = -2;
-    setRevealState({
-      title: 'Reveal random card',
-      zoneName: App.ZoneName.HAND,
-      zoneLabel: 'Hand (random)',
-      showCountInput: false,
-      defaultCount: 1,
-      onSubmit: ({ targetPlayerId }) => {
-        webClient.request.game.revealCards(gameId, {
-          zoneName: App.ZoneName.HAND,
-          cardId: [RANDOM_CARD_FROM_ZONE],
-          playerId: targetPlayerId,
-          topCards: -1,
-        });
-        setRevealState(null);
-      },
-    });
-  }, [gameId, webClient]);
-
-  const handleRequestRevealTopN = useCallback(() => {
-    if (gameId == null) {
-      return;
-    }
-    setRevealState({
-      title: 'Reveal top N cards',
-      zoneName: App.ZoneName.DECK,
-      zoneLabel: 'Library',
-      showCountInput: true,
-      defaultCount: 1,
-      onSubmit: ({ targetPlayerId, topCards }) => {
-        webClient.request.game.revealCards(gameId, {
-          zoneName: App.ZoneName.DECK,
-          playerId: targetPlayerId,
-          topCards,
-        });
-        setRevealState(null);
-      },
-    });
-  }, [gameId, webClient]);
-
-  const handleRequestRevealZone = useCallback(() => {
-    if (gameId == null || zoneMenu == null) {
-      return;
-    }
-    const { zoneName } = zoneMenu;
-    const label =
-      zoneName === App.ZoneName.GRAVE ? 'Graveyard' :
-        zoneName === App.ZoneName.EXILE ? 'Exile' : zoneName;
-    setRevealState({
-      title: `Reveal ${label.toLowerCase()}`,
-      zoneName,
-      zoneLabel: label,
-      showCountInput: false,
-      defaultCount: 1,
-      onSubmit: ({ targetPlayerId }) => {
-        webClient.request.game.revealCards(gameId, {
-          zoneName,
-          playerId: targetPlayerId,
-          topCards: -1,
-        });
-        setRevealState(null);
-      },
-    });
-  }, [gameId, zoneMenu, webClient]);
-
-  const confirmConcede = useCallback(() => {
-    if (gameId != null) {
-      webClient.request.game.concede(gameId);
-    }
-    setConcedeConfirm(null);
-  }, [gameId, webClient]);
-
-  const confirmUnconcede = useCallback(() => {
-    if (gameId != null) {
-      webClient.request.game.unconcede(gameId);
-    }
-    setConcedeConfirm(null);
-  }, [gameId, webClient]);
-
-  return {
-    cardMenu,
-    zoneMenu,
-    playerMenu,
-    handMenu,
-    closeCardMenu: useCallback(() => setCardMenu(null), []),
-    closeZoneMenu: useCallback(() => setZoneMenu(null), []),
-    closePlayerMenu: useCallback(() => setPlayerMenu(null), []),
-    closeHandMenu: useCallback(() => setHandMenu(null), []),
-    handleCardContextMenu,
-    handleZoneContextMenu,
-    handlePlayerContextMenu,
-    handleHandContextMenu,
-
-    zoneViews,
-    handleZoneClick,
-    handleCloseZoneView,
-
-    prompt,
-    closePrompt: useCallback(() => setPrompt(null), []),
-
-    rollDieOpen,
-    lastDieSides,
-    lastDieCount,
-    openRollDie: useCallback(() => setRollDieOpen(true), []),
-    closeRollDie: useCallback(() => setRollDieOpen(false), []),
-    handleRollDieSubmit,
-
-    createCounterOpen,
-    openCreateCounter: useCallback(() => setCreateCounterOpen(true), []),
-    closeCreateCounter: useCallback(() => setCreateCounterOpen(false), []),
-    handleCreateCounterSubmit,
-
-    createTokenOpen,
-    openCreateToken: useCallback(() => setCreateTokenOpen(true), []),
-    closeCreateToken: useCallback(() => setCreateTokenOpen(false), []),
-    handleCreateTokenSubmit,
-
-    sideboardOpen,
-    openSideboard: useCallback(() => setSideboardOpen(true), []),
-    closeSideboard: useCallback(() => setSideboardOpen(false), []),
-    handleSideboardSubmit,
-    handleToggleSideboardLock,
-
-    gameInfoOpen,
-    openGameInfo: useCallback(() => setGameInfoOpen(true), []),
-    closeGameInfo: useCallback(() => setGameInfoOpen(false), []),
-
-    concedeConfirm,
-    openConcede: useCallback(() => setConcedeConfirm('concede'), []),
-    openUnconcede: useCallback(() => setConcedeConfirm('unconcede'), []),
-    closeConcedeConfirm: useCallback(() => setConcedeConfirm(null), []),
-    confirmConcede,
-    confirmUnconcede,
-
-    revealState,
-    closeReveal: useCallback(() => setRevealState(null), []),
-
-    handleRequestSetPT,
-    handleRequestSetAnnotation,
-    handleRequestSetCardCounter,
-    handleRequestDrawArrow,
-    handleRequestAttach,
-    handleRequestMoveToLibraryAt,
-    handleRequestDrawN,
-    handleRequestDumpN,
-    handleRequestRevealTopN,
-    handleRequestRevealZone,
-    handleRequestChooseMulligan,
-    handleRequestRevealHand,
-    handleRequestRevealRandom,
-  };
-}
diff --git a/webclient/src/containers/Game/useGameDnd.ts b/webclient/src/containers/Game/useGameDnd.ts
deleted file mode 100644
index 96d959e7e..000000000
--- a/webclient/src/containers/Game/useGameDnd.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useCallback, useState } from 'react';
-import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
-
-import { useWebClient } from '@app/hooks';
-import { App, Data } from '@app/types';
-
-export interface GameDnd {
-  activeCard: Data.ServerInfo_Card | null;
-  handleDragStart: (event: DragStartEvent) => void;
-  handleDragEnd: (event: DragEndEvent) => void;
-  handleDragCancel: () => void;
-}
-
-export interface UseGameDndArgs {
-  gameId: number | undefined;
-  onDragStart: () => void;
-}
-
-export function useGameDnd({ gameId, onDragStart }: UseGameDndArgs): GameDnd {
-  const webClient = useWebClient();
-  const [activeCard, setActiveCard] = useState<Data.ServerInfo_Card | null>(null);
-
-  const handleDragStart = useCallback(
-    (event: DragStartEvent) => {
-      const data = event.active.data.current as
-        | { card: Data.ServerInfo_Card }
-        | undefined;
-      setActiveCard(data?.card ?? null);
-      // Starting a drag cancels any armed pending-arrow or pending-attach —
-      // dnd-kit owns the pointer during the drag, matching desktop where the
-      // arrow draw from context menu is aborted if the user grabs a card.
-      onDragStart();
-    },
-    [onDragStart],
-  );
-
-  const handleDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      setActiveCard(null);
-      if (!gameId || !event.over || !event.active.data.current) {
-        return;
-      }
-      const source = event.active.data.current as {
-        card: Data.ServerInfo_Card;
-        sourcePlayerId: number;
-        sourceZone: string;
-      };
-      const target = event.over.data.current as {
-        targetPlayerId: number;
-        targetZone: string;
-        row?: number;
-        attachTarget?: boolean;
-        targetCardId?: number;
-      };
-
-      // Drop onto another card on the table → attach source to target.
-      // Desktop's actAttach is only initiated from a table card, so source
-      // must also be TABLE. Non-TABLE drops onto a table card fall through
-      // to the normal moveCard branch (drop becomes "move to that row").
-      if (
-        target.attachTarget &&
-        target.targetCardId != null &&
-        source.sourceZone === App.ZoneName.TABLE
-      ) {
-        // Guard no-op self-drop (source === target).
-        if (
-          source.sourcePlayerId === target.targetPlayerId &&
-          source.sourceZone === target.targetZone &&
-          source.card.id === target.targetCardId
-        ) {
-          return;
-        }
-        webClient.request.game.attachCard(gameId, {
-          startZone: source.sourceZone,
-          cardId: source.card.id,
-          targetPlayerId: target.targetPlayerId,
-          targetZone: target.targetZone,
-          targetCardId: target.targetCardId,
-        });
-        return;
-      }
-
-      const sameZone =
-        source.sourcePlayerId === target.targetPlayerId &&
-        source.sourceZone === target.targetZone;
-      if (sameZone && source.sourceZone === App.ZoneName.TABLE && (source.card.y ?? 0) === (target.row ?? 0)) {
-        return;
-      }
-      if (sameZone && source.sourceZone !== App.ZoneName.TABLE) {
-        return;
-      }
-
-      webClient.request.game.moveCard(gameId, {
-        startPlayerId: source.sourcePlayerId,
-        startZone: source.sourceZone,
-        cardsToMove: { card: [{ cardId: source.card.id }] },
-        targetPlayerId: target.targetPlayerId,
-        targetZone: target.targetZone,
-        x: 0,
-        y: target.row ?? 0,
-        isReversed: false,
-      });
-    },
-    [gameId, webClient],
-  );
-
-  const handleDragCancel = useCallback(() => {
-    setActiveCard(null);
-  }, []);
-
-  return { activeCard, handleDragStart, handleDragEnd, handleDragCancel };
-}
diff --git a/webclient/src/containers/Game/useGameLifecycleNavigation.ts b/webclient/src/containers/Game/useGameLifecycleNavigation.ts
deleted file mode 100644
index 91e3036f2..000000000
--- a/webclient/src/containers/Game/useGameLifecycleNavigation.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-import { useToast } from '@app/components';
-import { useGameLifecycle } from '@app/hooks';
-import { App } from '@app/types';
-
-export function useGameLifecycleNavigation(gameId: number | undefined): void {
-  const navigate = useNavigate();
-
-  const kickedToast = useToast({
-    key: 'game-kicked',
-    children: 'You were kicked from the game',
-  });
-  const gameClosedToast = useToast({
-    key: 'game-closed',
-    children: 'The game was closed by the host',
-  });
-
-  useGameLifecycle(gameId, {
-    onKicked: () => {
-      kickedToast.openToast();
-      navigate(App.RouteEnum.SERVER);
-    },
-    onGameClosed: () => {
-      gameClosedToast.openToast();
-      navigate(App.RouteEnum.SERVER);
-    },
-  });
-}
diff --git a/webclient/src/containers/Game/useGameOpponentSelector.ts b/webclient/src/containers/Game/useGameOpponentSelector.ts
deleted file mode 100644
index e09f9f129..000000000
--- a/webclient/src/containers/Game/useGameOpponentSelector.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import type { Enriched } from '@app/types';
-
-export interface OpponentEntry {
-  playerId: number;
-  name: string;
-}
-
-export interface GameOpponentSelector {
-  opponents: OpponentEntry[];
-  selectedOpponentId: number | undefined;
-  setSelectedOpponentId: (id: number | undefined) => void;
-  shownOpponentId: number | undefined;
-  revealPlayers: OpponentEntry[];
-}
-
-export function useGameOpponentSelector(
-  game: Enriched.GameEntry | undefined,
-): GameOpponentSelector {
-  const [selectedOpponentId, setSelectedOpponentId] = useState<number | undefined>();
-
-  const opponents = useMemo<OpponentEntry[]>(() => {
-    if (!game) {
-      return [];
-    }
-    return Object.values(game.players)
-      .filter((p) => p.properties.playerId !== game.localPlayerId)
-      .map((p) => ({
-        playerId: p.properties.playerId,
-        name: p.properties.userInfo?.name ?? `p${p.properties.playerId}`,
-      }));
-  }, [game]);
-
-  useEffect(() => {
-    if (selectedOpponentId == null && opponents.length > 0) {
-      setSelectedOpponentId(opponents[0].playerId);
-    }
-    if (selectedOpponentId != null && !opponents.some((o) => o.playerId === selectedOpponentId)) {
-      setSelectedOpponentId(opponents[0]?.playerId);
-    }
-  }, [opponents, selectedOpponentId]);
-
-  const shownOpponentId = selectedOpponentId ?? opponents[0]?.playerId;
-
-  return {
-    opponents,
-    selectedOpponentId,
-    setSelectedOpponentId,
-    shownOpponentId,
-    revealPlayers: opponents,
-  };
-}
diff --git a/webclient/src/containers/Layout/Layout.tsx b/webclient/src/containers/Layout/Layout.tsx
index 6bdfdc150..858011b42 100644
--- a/webclient/src/containers/Layout/Layout.tsx
+++ b/webclient/src/containers/Layout/Layout.tsx
@@ -1,21 +1,12 @@
-import { ReactNode } from 'react';
-
 import LeftNav from './LeftNav';
 
 import './Layout.css'
 
-interface LayoutProps {
-  showNav?: boolean;
-  children: ReactNode;
-  className?: string;
-  noHeightLimit?: boolean;
-}
-
-function Layout(props: LayoutProps) {
+function Layout(props:LayoutProps) {
   const { children, className, showNav = true, noHeightLimit = false } = props;
-  const containerClasses = ['layout'];
-  if (noHeightLimit) {
-    containerClasses.push('layout--no-height-limit');
+  const containerClasses = ['layout']
+  if (noHeightLimit === true) {
+    containerClasses.push('layout--no-height-limit')
   }
 
   return (
@@ -38,4 +29,11 @@ function BottomBar() {
   )
 }
 
+interface LayoutProps {
+    showNav?: boolean;
+    children: any;
+    className?: string;
+    noHeightLimit?: boolean
+}
+
 export default Layout;
diff --git a/webclient/src/containers/Layout/LeftNav.css b/webclient/src/containers/Layout/LeftNav.css
index d3936ffd4..85c851d2e 100644
--- a/webclient/src/containers/Layout/LeftNav.css
+++ b/webclient/src/containers/Layout/LeftNav.css
@@ -38,6 +38,9 @@
   margin-left: 10px;
 }
 
+.LeftNav-nav {
+}
+
 .LeftNav-nav__links {
   display: flex;
   flex-flow: column;
@@ -99,7 +102,27 @@
   justify-content: center;
 }
 
+.LeftNav-nav__action {
+
+}
+
 .LeftNav-nav__action button {
   color: white;
 }
 
+.temp-subnav__rooms {
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  padding: 5px;
+}
+
+.temp-chip {
+  margin-left: 5px;
+  text-decoration: none;
+}
+
+
+.temp-chip > div {
+  cursor: inherit;
+}
diff --git a/webclient/src/containers/Layout/LeftNav.tsx b/webclient/src/containers/Layout/LeftNav.tsx
index d3d671cb4..00d89455b 100644
--- a/webclient/src/containers/Layout/LeftNav.tsx
+++ b/webclient/src/containers/Layout/LeftNav.tsx
@@ -1,4 +1,5 @@
-import { NavLink, generatePath } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { NavLink, useNavigate, generatePath } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -8,25 +9,75 @@ import MailOutlineRoundedIcon from '@mui/icons-material/MailOutlineRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 
 import { CardImportDialog } from '@app/dialogs';
+import { useWebClient } from '@app/hooks';
 import { Images } from '@app/images';
+import { RoomsSelectors, ServerSelectors } from '@app/store';
 import { App } from '@app/types';
-
-import { useLeftNav } from './useLeftNav';
+import { useAppSelector } from '@app/store';
 
 import './LeftNav.css';
 
+interface LeftNavState {
+  anchorEl: Element;
+  showCardImportDialog: boolean;
+  options: string[];
+}
+
 const LeftNav = () => {
-  const {
-    joinedRooms,
-    isConnected,
-    state,
-    handleMenuOpen,
-    handleMenuItemClick,
-    handleMenuClose,
-    leaveRoom,
-    openImportCardWizard,
-    closeImportCardWizard,
-  } = useLeftNav();
+  const joinedRooms = useAppSelector(state => RoomsSelectors.getJoinedRooms(state));
+  const isConnected = useAppSelector(ServerSelectors.getIsConnected);
+  const isModerator = useAppSelector(ServerSelectors.getIsUserModerator);
+  const navigate = useNavigate();
+  const webClient = useWebClient();
+  const [state, setState] = useState<LeftNavState>({
+    anchorEl: null,
+    showCardImportDialog: false,
+    options: [],
+  });
+
+  useEffect(() => {
+    let options: string[] = [
+      'Account',
+      'Replays',
+    ];
+
+    if (isModerator) {
+      options = [
+        ...options,
+        'Administration',
+        'Logs'
+      ];
+    }
+
+    setState(s => ({ ...s, options }));
+  }, [isModerator]);
+
+  const handleMenuOpen = (event) => {
+    setState(s => ({ ...s, anchorEl: event.target }));
+  }
+
+  const handleMenuItemClick = (option: string) => {
+    const route = App.RouteEnum[option.toUpperCase()];
+    navigate(generatePath(route));
+  }
+
+  const handleMenuClose = () => {
+    setState(s => ({ ...s, anchorEl: null }));
+  }
+
+  const leaveRoom = (event, roomId) => {
+    event.preventDefault();
+    webClient.request.rooms.leaveRoom(roomId);
+  };
+
+  const openImportCardWizard = () => {
+    setState(s => ({ ...s, showCardImportDialog: true }));
+    handleMenuClose();
+  }
+
+  const closeImportCardWizard = () => {
+    setState(s => ({ ...s, showCardImportDialog: false }));
+  }
 
   return (
     <div className="LeftNav__container">
@@ -35,11 +86,11 @@ const LeftNav = () => {
           <NavLink to={App.RouteEnum.SERVER}>
             <img src={Images.Logo} alt="logo" />
           </NavLink>
-          {isConnected && (
+          { isConnected && (
             <span className="LeftNav-server__indicator"></span>
-          )}
+          ) }
         </div>
-        {isConnected && (
+        { isConnected && (
           <div className="LeftNav-content">
             <nav className="LeftNav-nav">
               <nav className="LeftNav-nav__links">
@@ -59,7 +110,7 @@ const LeftNav = () => {
                     {joinedRooms.map((room) => (
                       <div className="LeftNav-nav__link-menu__item" key={room.info.roomId}>
                         <NavLink className="LeftNav-nav__link-menu__btn"
-                          to={generatePath(App.RouteEnum.ROOM, { roomId: room.info.roomId.toString() })}
+                          to={ generatePath(App.RouteEnum.ROOM, { roomId: room.info.roomId.toString() }) }
                         >
                           {room.info.name}
 
@@ -72,13 +123,13 @@ const LeftNav = () => {
                   </div>
                 </div>
                 <div className="LeftNav-nav__link">
-                  <NavLink className="LeftNav-nav__link-btn" to={App.RouteEnum.GAME}>
+                  <NavLink className="LeftNav-nav__link-btn" to={ App.RouteEnum.GAME }>
                     Games
                     <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                   </NavLink>
                 </div>
                 <div className="LeftNav-nav__link">
-                  <NavLink className="LeftNav-nav__link-btn" to={App.RouteEnum.DECKS}>
+                  <NavLink className="LeftNav-nav__link-btn" to={ App.RouteEnum.DECKS }>
                     Decks
                     <ArrowDropDownIcon className="LeftNav-nav__link-btn__icon" fontSize="small" />
                   </NavLink>
@@ -109,8 +160,8 @@ const LeftNav = () => {
                     }}
                   >
                     {state.options.map((option) => (
-                      <MenuItem key={option.label} onClick={() => handleMenuItemClick(option)}>
-                        {option.label}
+                      <MenuItem key={option} onClick={() => handleMenuItemClick(option)}>
+                        {option}
                       </MenuItem>
                     ))}
 
@@ -122,7 +173,7 @@ const LeftNav = () => {
               </div>
             </nav>
           </div>
-        )}
+        ) }
       </div>
 
       <CardImportDialog
@@ -131,6 +182,6 @@ const LeftNav = () => {
       ></CardImportDialog>
     </div>
   );
-};
+}
 
 export default LeftNav;
diff --git a/webclient/src/containers/Layout/useLeftNav.ts b/webclient/src/containers/Layout/useLeftNav.ts
deleted file mode 100644
index 66de06c56..000000000
--- a/webclient/src/containers/Layout/useLeftNav.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useNavigate, generatePath } from 'react-router-dom';
-
-import { useWebClient } from '@app/hooks';
-import { RoomsSelectors, ServerSelectors, useAppSelector } from '@app/store';
-import { App } from '@app/types';
-
-export interface LeftNavOption {
-  label: string;
-  route: App.RouteEnum;
-}
-
-interface LeftNavState {
-  anchorEl: Element | null;
-  showCardImportDialog: boolean;
-  options: LeftNavOption[];
-}
-
-export interface LeftNav {
-  joinedRooms: ReturnType<typeof RoomsSelectors.getJoinedRooms>;
-  isConnected: boolean;
-  state: LeftNavState;
-  handleMenuOpen: (event: React.MouseEvent) => void;
-  handleMenuItemClick: (option: LeftNavOption) => void;
-  handleMenuClose: () => void;
-  leaveRoom: (event: React.MouseEvent, roomId: number) => void;
-  openImportCardWizard: () => void;
-  closeImportCardWizard: () => void;
-}
-
-const BASE_OPTIONS: LeftNavOption[] = [
-  { label: 'Account', route: App.RouteEnum.ACCOUNT },
-  { label: 'Replays', route: App.RouteEnum.REPLAYS },
-];
-
-const MODERATOR_OPTIONS: LeftNavOption[] = [
-  { label: 'Administration', route: App.RouteEnum.ADMINISTRATION },
-  { label: 'Logs', route: App.RouteEnum.LOGS },
-];
-
-export function useLeftNav(): LeftNav {
-  const joinedRooms = useAppSelector((state) => RoomsSelectors.getJoinedRooms(state));
-  const isConnected = useAppSelector(ServerSelectors.getIsConnected);
-  const isModerator = useAppSelector(ServerSelectors.getIsUserModerator);
-  const navigate = useNavigate();
-  const webClient = useWebClient();
-  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
-  const [showCardImportDialog, setShowCardImportDialog] = useState(false);
-
-  const options = useMemo<LeftNavOption[]>(
-    () => (isModerator ? [...BASE_OPTIONS, ...MODERATOR_OPTIONS] : BASE_OPTIONS),
-    [isModerator],
-  );
-
-  const state: LeftNavState = { anchorEl, showCardImportDialog, options };
-
-  const handleMenuOpen = (event: React.MouseEvent) => {
-    setAnchorEl(event.target as Element);
-  };
-
-  const handleMenuItemClick = (option: LeftNavOption) => {
-    navigate(generatePath(option.route));
-  };
-
-  const handleMenuClose = () => {
-    setAnchorEl(null);
-  };
-
-  const leaveRoom = (event: React.MouseEvent, roomId: number) => {
-    event.preventDefault();
-    webClient.request.rooms.leaveRoom(roomId);
-  };
-
-  const openImportCardWizard = () => {
-    setShowCardImportDialog(true);
-    handleMenuClose();
-  };
-
-  const closeImportCardWizard = () => {
-    setShowCardImportDialog(false);
-  };
-
-  return {
-    joinedRooms,
-    isConnected,
-    state,
-    handleMenuOpen,
-    handleMenuItemClick,
-    handleMenuClose,
-    leaveRoom,
-    openImportCardWizard,
-    closeImportCardWizard,
-  };
-}
diff --git a/webclient/src/containers/Login/Login.css b/webclient/src/containers/Login/Login.css
index f79b0d008..7166187ad 100644
--- a/webclient/src/containers/Login/Login.css
+++ b/webclient/src/containers/Login/Login.css
@@ -54,7 +54,7 @@
   overflow: hidden;
 }
 
-.login-content__description-wrapper {
+.login-content__description-wrapper { 
   position: relative;
   width: 70%;
   display: flex;
@@ -115,8 +115,8 @@
   margin: 40px 0 20px;
   font-size: 28px;
   font-weight: bold;
+  
 }
-
 .login-content__description-subtitle2 {
   font-size: 14px;
 }
diff --git a/webclient/src/containers/Login/Login.spec.tsx b/webclient/src/containers/Login/Login.spec.tsx
index 33b57263c..e2a398066 100644
--- a/webclient/src/containers/Login/Login.spec.tsx
+++ b/webclient/src/containers/Login/Login.spec.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, waitFor } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 
 import { renderWithProviders, createMockWebClient, disconnectedState } from '../../__test-utils__';
 
@@ -29,14 +29,10 @@ vi.mock('../../hooks/useKnownHosts', () => ({
   useKnownHosts: hoisted.useKnownHosts,
   getKnownHosts: hoisted.getKnownHosts,
 }));
-vi.mock('../../hooks/useWebClient', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../hooks/useWebClient')>();
-  return {
-    ...actual,
-    useWebClient: () => hoisted.mockWebClient,
-    WebClientProvider: ({ children }: { children: any }) => children,
-  };
-});
+vi.mock('../../hooks/useWebClient', () => ({
+  useWebClient: () => hoisted.mockWebClient,
+  WebClientProvider: ({ children }: { children: any }) => children,
+}));
 
 beforeAll(() => {
   const client = createMockWebClient();
@@ -166,31 +162,6 @@ describe('Login — logout cycle (same JS session)', () => {
     await flushEffects();
     expect(hoisted.mockWebClient.request.authentication.login).not.toHaveBeenCalled();
   });
-
-  test('submits with the restored host after a logout→remount without Required error', async () => {
-    const first = renderWithProviders(<Login />, { preloadedState: disconnectedState });
-    await flushEffects();
-    first.unmount();
-
-    // Submit button stays disabled until testConnectionStatus resolves to 'success';
-    // preload it so the click actually dispatches.
-    const { getByRole, queryByText } = renderWithProviders(<Login />, {
-      preloadedState: {
-        ...disconnectedState,
-        server: { ...(disconnectedState.server as any), testConnectionStatus: 'success' },
-      },
-    });
-    await flushEffects();
-
-    fireEvent.click(getByRole('button', { name: /LoginForm\.label\.login/ }));
-    await flushEffects();
-
-    expect(queryByText(/required/i)).toBeNull();
-    expect(hoisted.mockWebClient.request.authentication.login).toHaveBeenCalledTimes(1);
-    expect(hoisted.mockWebClient.request.authentication.login.mock.calls[0][0]).toMatchObject({
-      userName: 'alice',
-    });
-  });
 });
 
 describe('Login — refresh cycle', () => {
@@ -204,96 +175,3 @@ describe('Login — refresh cycle', () => {
     });
   });
 });
-
-// End-to-end regression: the symptom reported on this branch was "save-password
-// checkbox shows, login succeeds, but HostDTO.hashedPassword stays empty in
-// Dexie". These tests wire the full chain — auto-login fires onSubmitLogin
-// (capturing the form in rememberLoginRef), then a store.dispatch of
-// LOGIN_SUCCESSFUL drives the useReduxEffect that calls knownHosts.update.
-describe('Login — LOGIN_SUCCESSFUL → knownHosts persistence', () => {
-  const armWithUpdate = () => {
-    const update = vi.fn().mockResolvedValue(undefined);
-    const host = makeHost({
-      id: 7,
-      remember: true,
-      userName: 'alice',
-      hashedPassword: 'stored-hash',
-      supportsHashedPassword: true,
-      lastSelected: true,
-    });
-    hoisted.useSettings.mockReturnValue(
-      makeSettingsHook({
-        status: LoadingState.READY,
-        value: makeSettings({ autoConnect: true }),
-        update: vi.fn().mockResolvedValue(undefined),
-      })
-    );
-    hoisted.useKnownHosts.mockReturnValue(
-      makeKnownHostsHook({
-        status: LoadingState.READY,
-        value: { hosts: [host], selectedHost: host },
-        update,
-      })
-    );
-    hoisted.getSettings.mockResolvedValue(makeSettings({ autoConnect: true }));
-    hoisted.getKnownHosts.mockResolvedValue({ hosts: [host], selectedHost: host });
-    return { update, hostId: host.id! };
-  };
-
-  test('persists userName + hashedPassword when loginSuccessful carries a real hash', async () => {
-    const { update, hostId } = armWithUpdate();
-
-    const { store } = renderWithProviders(<Login />, {
-      preloadedState: {
-        ...disconnectedState,
-        server: { ...(disconnectedState.server as any), testConnectionStatus: 'success' },
-      },
-    });
-    await waitFor(() => {
-      expect(hoisted.mockWebClient.request.authentication.login).toHaveBeenCalledTimes(1);
-    });
-
-    store.dispatch({
-      type: 'server/loginSuccessful',
-      payload: { options: { hashedPassword: 'real-hash-xyz' } },
-    });
-    await flushEffects();
-
-    expect(update).toHaveBeenCalledWith(hostId, {
-      remember: true,
-      userName: 'alice',
-      hashedPassword: 'real-hash-xyz',
-    });
-  });
-
-  test('does not persist credentials when hashedPassword is empty (empty-salt fallback)', async () => {
-    const { update, hostId } = armWithUpdate();
-
-    const { store } = renderWithProviders(<Login />, {
-      preloadedState: {
-        ...disconnectedState,
-        server: { ...(disconnectedState.server as any), testConnectionStatus: 'success' },
-      },
-    });
-    await waitFor(() => {
-      expect(hoisted.mockWebClient.request.authentication.login).toHaveBeenCalledTimes(1);
-    });
-
-    // Empty-salt fallback path: login went through as plain password, so the
-    // response layer has no hash to carry forward.
-    store.dispatch({
-      type: 'server/loginSuccessful',
-      payload: { options: { hashedPassword: undefined } },
-    });
-    await flushEffects();
-
-    // Guard in useLogin.updateHost clears remember+credentials so next load
-    // reflects that save-password wasn't honoured — no stale "checked" checkbox
-    // sitting against a null hash.
-    expect(update).toHaveBeenCalledWith(hostId, {
-      remember: false,
-      userName: null,
-      hashedPassword: null,
-    });
-  });
-});
diff --git a/webclient/src/containers/Login/Login.tsx b/webclient/src/containers/Login/Login.tsx
index 423a09793..78bcdf242 100644
--- a/webclient/src/containers/Login/Login.tsx
+++ b/webclient/src/containers/Login/Login.tsx
@@ -1,3 +1,4 @@
+import { useState, useCallback, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
@@ -8,25 +9,28 @@ import Typography from '@mui/material/Typography';
 import { RegistrationDialog, RequestPasswordResetDialog, ResetPasswordDialog, AccountActivationDialog } from '@app/dialogs';
 import { LanguageDropdown } from '@app/components';
 import { LoginForm } from '@app/forms';
+import { useAutoLogin, useFireOnce, useKnownHosts, useReduxEffect, useWebClient } from '@app/hooks';
 import { Images } from '@app/images';
-import { serverProps } from '@app/services';
+import { getHostPort, serverProps } from '@app/services';
 import { App } from '@app/types';
+import { WebsocketTypes } from '@app/websocket/types';
+import { ServerSelectors, ServerTypes } from '@app/store';
 import Layout from '../Layout/Layout';
-
-import { useLogin } from './useLogin';
+import { useAppSelector } from '@app/store';
 
 import './Login.css';
+import { useToast } from '@app/components';
 
 const PREFIX = 'Login';
 
 const classes = {
-  root: `${PREFIX}-root`,
+  root: `${PREFIX}-root`
 };
 
 const Root = styled('div')(({ theme }) => ({
   [`&.${classes.root}`]: {
     '& .login-content__header': {
-      color: theme.palette.success.light,
+      color: theme.palette.success.light
     },
 
     '& .login-content__description': {
@@ -57,36 +61,188 @@ const Root = styled('div')(({ theme }) => ({
         display: 'flex',
       },
     },
-  },
+  }
 }));
 
 const Login = () => {
+  const description = useAppSelector(s => ServerSelectors.getDescription(s));
+  const isConnected = useAppSelector(ServerSelectors.getIsConnected);
+  const connectionAttemptMade = useAppSelector(ServerSelectors.getConnectionAttemptMade);
+  const webClient = useWebClient();
   const { t } = useTranslation();
-  const {
-    description,
-    isConnected,
-    dialogState,
-    userToResetPassword,
-    submitButtonDisabled,
-    handleLogin,
-    showDescription,
-    handleRegistrationDialogSubmit,
-    handleAccountActivationDialogSubmit,
-    handleRequestPasswordResetDialogSubmit,
-    handleResetPasswordDialogSubmit,
-    skipTokenRequest,
-    closeRequestPasswordResetDialog,
-    openRequestPasswordResetDialog,
-    closeResetPasswordDialog,
-    closeRegistrationDialog,
-    openRegistrationDialog,
-    closeActivateAccountDialog,
-  } = useLogin();
+
+  const [pendingActivationOptions, setPendingActivationOptions] = useState<WebsocketTypes.PendingActivationContext | null>(null);
+
+  const rememberLoginRef = useRef<any>(null);
+  const knownHosts = useKnownHosts();
+  const [dialogState, setDialogState] = useState({
+    passwordResetRequestDialog: false,
+    resetPasswordDialog: false,
+    registrationDialog: false,
+    activationDialog: false,
+  });
+  const [userToResetPassword, setUserToResetPassword] = useState(null);
+
+  const passwordResetToast = useToast({ key: 'password-reset-success', children: t('LoginContainer.toasts.passwordResetSuccess') });
+  const accountActivatedToast = useToast({
+    key: 'account-activation-success',
+    children: t('LoginContainer.toasts.accountActivationSuccess')
+  });
+
+  useReduxEffect(() => {
+    closeRequestPasswordResetDialog();
+    openResetPasswordDialog();
+  }, ServerTypes.RESET_PASSWORD_REQUESTED, []);
+
+  useReduxEffect(() => {
+    passwordResetToast.openToast()
+    closeResetPasswordDialog();
+  }, ServerTypes.RESET_PASSWORD_SUCCESS, []);
+
+  useReduxEffect(() => {
+    accountActivatedToast.openToast()
+    closeActivateAccountDialog();
+    setPendingActivationOptions(null);
+  }, ServerTypes.ACCOUNT_ACTIVATION_SUCCESS, []);
+
+  useReduxEffect(({ payload: { options } }) => {
+    setPendingActivationOptions(options);
+    closeRegistrationDialog();
+    openActivateAccountDialog();
+  }, ServerTypes.ACCOUNT_AWAITING_ACTIVATION, []);
+
+  useReduxEffect(() => {
+    resetSubmitButton();
+  }, [ServerTypes.CONNECTION_FAILED, ServerTypes.LOGIN_FAILED], []);
+
+  useReduxEffect(({ payload: { options: { hashedPassword } } }) => {
+    if (rememberLoginRef.current) {
+      updateHost(hashedPassword, rememberLoginRef.current);
+    }
+  }, ServerTypes.LOGIN_SUCCESSFUL, []);
+
+  const showDescription = () => {
+    return !isConnected && description?.length;
+  };
+
+  const onSubmitLogin = useCallback((loginForm) => {
+    rememberLoginRef.current = loginForm;
+    const { userName, password, selectedHost, remember } = loginForm;
+
+    const options: Omit<WebsocketTypes.LoginConnectOptions, 'reason'> = {
+      ...getHostPort(selectedHost),
+      userName,
+      password,
+    };
+
+    if (remember && !password) {
+      options.hashedPassword = selectedHost.hashedPassword;
+    }
+
+    webClient.request.authentication.login(options);
+  }, []);
+
+  const [submitButtonDisabled, resetSubmitButton, handleLogin] = useFireOnce(onSubmitLogin);
+
+  useAutoLogin(handleLogin, connectionAttemptMade);
+
+  const updateHost = (hashedPassword, { selectedHost, remember, userName }) => {
+    knownHosts.update(selectedHost.id, {
+      remember,
+      userName: remember ? userName : null,
+      hashedPassword: remember ? hashedPassword : null,
+    });
+  };
+
+  const handleRegistrationDialogSubmit = (registerForm) => {
+    rememberLoginRef.current = registerForm;
+    const { userName, password, email, country, realName, selectedHost } = registerForm;
+
+    webClient.request.authentication.register({
+      ...getHostPort(selectedHost),
+      userName,
+      password,
+      email,
+      country,
+      realName,
+    });
+  };
+
+  const handleAccountActivationDialogSubmit = ({ token }) => {
+    if (!pendingActivationOptions) {
+      return;
+    }
+    webClient.request.authentication.activateAccount({
+      host: pendingActivationOptions.host,
+      port: pendingActivationOptions.port,
+      userName: pendingActivationOptions.userName,
+      token,
+    });
+  };
+
+  const handleRequestPasswordResetDialogSubmit = (form) => {
+    const { userName, email, selectedHost } = form;
+    const { host, port } = getHostPort(selectedHost);
+
+    if (email) {
+      webClient.request.authentication.resetPasswordChallenge({ userName, email, host, port });
+    } else {
+      setUserToResetPassword(userName);
+      webClient.request.authentication.resetPasswordRequest({ userName, host, port });
+    }
+  };
+
+  const handleResetPasswordDialogSubmit = ({ userName, token, newPassword, selectedHost }) => {
+    const { host, port } = getHostPort(selectedHost);
+
+    webClient.request.authentication.resetPassword({ userName, token, newPassword, host, port });
+  };
+
+  const skipTokenRequest = (userName) => {
+    setUserToResetPassword(userName);
+
+    setDialogState(s => ({ ...s,
+      passwordResetRequestDialog: false,
+      resetPasswordDialog: true,
+    }));
+  };
+
+  const closeRequestPasswordResetDialog = () => {
+    setDialogState(s => ({ ...s, passwordResetRequestDialog: false }));
+  }
+
+  const openRequestPasswordResetDialog = () => {
+    setDialogState(s => ({ ...s, passwordResetRequestDialog: true }));
+  }
+
+  const closeResetPasswordDialog = () => {
+    setDialogState(s => ({ ...s, resetPasswordDialog: false }));
+  }
+
+  const openResetPasswordDialog = () => {
+    setDialogState(s => ({ ...s, resetPasswordDialog: true }));
+  }
+
+  const closeRegistrationDialog = () => {
+    setDialogState(s => ({ ...s, registrationDialog: false }));
+  }
+
+  const openRegistrationDialog = () => {
+    setDialogState(s => ({ ...s, registrationDialog: true }));
+  }
+
+  const closeActivateAccountDialog = () => {
+    setDialogState(s => ({ ...s, activationDialog: false }));
+  };
+
+  const openActivateAccountDialog = () => {
+    setDialogState(s => ({ ...s, activationDialog: true }));
+  };
 
   return (
     <Layout showNav={false} noHeightLimit={true}>
       <Root className={'login overflow-scroll ' + classes.root}>
-        {isConnected && <Navigate to={App.RouteEnum.SERVER} />}
+        { isConnected && <Navigate to={App.RouteEnum.SERVER} />}
 
         <div className="login__wrapper">
           <Paper className="login-content">
@@ -95,8 +251,8 @@ const Login = () => {
                 <img src={Images.Logo} alt="logo" />
                 <span>COCKATRICE</span>
               </div>
-              <Typography variant="h1">{t('LoginContainer.header.title')}</Typography>
-              <Typography variant="subtitle1">{t('LoginContainer.header.subtitle')}</Typography>
+              <Typography variant="h1">{ t('LoginContainer.header.title') }</Typography>
+              <Typography variant="subtitle1">{ t('LoginContainer.header.subtitle') }</Typography>
               <div className="login-form">
                 <LoginForm
                   onSubmit={handleLogin}
@@ -105,26 +261,30 @@ const Login = () => {
                 />
               </div>
 
-              {showDescription() && (
-                <Paper className="login-content__connectionStatus">
-                  {description}
-                </Paper>
-              )}
+              {
+                showDescription() && (
+                  <Paper className="login-content__connectionStatus">
+                    {description}
+                  </Paper>
+                )
+              }
 
               <div className="login-footer">
                 <div className="login-footer__register">
-                  <span>{t('LoginContainer.footer.registerPrompt')}</span>
-                  <Button color="primary" onClick={openRegistrationDialog}>{t('LoginContainer.footer.registerAction')}</Button>
+                  <span>{ t('LoginContainer.footer.registerPrompt') }</span>
+                  <Button color="primary" onClick={openRegistrationDialog}>{ t('LoginContainer.footer.registerAction') }</Button>
                 </div>
                 <Typography variant="subtitle2">
-                  {t('LoginContainer.footer.credit')} - {new Date().getUTCFullYear()}
+                  { t('LoginContainer.footer.credit') } - { new Date().getUTCFullYear() }
                 </Typography>
 
-                {serverProps.REACT_APP_VERSION && (
-                  <Typography variant="subtitle2">
-                    {t('LoginContainer.footer.version')}: {serverProps.REACT_APP_VERSION}
-                  </Typography>
-                )}
+                {
+                  serverProps.REACT_APP_VERSION && (
+                    <Typography variant="subtitle2">
+                      { t('LoginContainer.footer.version') }: { serverProps.REACT_APP_VERSION }
+                    </Typography>
+                  )
+                }
 
                 <div className="login-footer__language">
                   <LanguageDropdown />
@@ -161,8 +321,9 @@ const Login = () => {
                     </div>
                   </div>
                 </div>
-                <p className="login-content__description-subtitle1">{t('LoginContainer.content.subtitle1')}</p>
-                <p className="login-content__description-subtitle2">{t('LoginContainer.content.subtitle2')}</p>
+                { /*<img src={loginGraphic} className="login-content__description-image"/>*/}
+                <p className="login-content__description-subtitle1">{ t('LoginContainer.content.subtitle1') }</p>
+                <p className="login-content__description-subtitle2">{ t('LoginContainer.content.subtitle2') }</p>
               </div>
             </div>
           </Paper>
@@ -196,6 +357,6 @@ const Login = () => {
       </Root>
     </Layout>
   );
-};
+}
 
 export default Login;
diff --git a/webclient/src/containers/Login/useLogin.ts b/webclient/src/containers/Login/useLogin.ts
deleted file mode 100644
index 724c00dcf..000000000
--- a/webclient/src/containers/Login/useLogin.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useToast } from '@app/components';
-import type {
-  LoginFormValues,
-  RegisterFormValues,
-  RequestPasswordResetFormValues,
-  ResetPasswordFormValues,
-} from '@app/forms';
-import { useAutoLogin, useFireOnce, useKnownHosts, useReduxEffect, useWebClient } from '@app/hooks';
-import { getHostPort } from '@app/services';
-import { ServerSelectors, ServerTypes, useAppSelector } from '@app/store';
-import { WebsocketTypes } from '@app/websocket/types';
-
-export interface LoginDialogState {
-  passwordResetRequestDialog: boolean;
-  resetPasswordDialog: boolean;
-  registrationDialog: boolean;
-  activationDialog: boolean;
-}
-
-export interface Login {
-  description: string | undefined;
-  isConnected: boolean;
-  dialogState: LoginDialogState;
-  userToResetPassword: string | null;
-  submitButtonDisabled: boolean;
-  handleLogin: (form: LoginFormValues) => void;
-  showDescription: () => boolean;
-  handleRegistrationDialogSubmit: (form: RegisterFormValues) => void;
-  handleAccountActivationDialogSubmit: (args: { token: string }) => void;
-  handleRequestPasswordResetDialogSubmit: (form: RequestPasswordResetFormValues) => void;
-  handleResetPasswordDialogSubmit: (form: ResetPasswordFormValues) => void;
-  skipTokenRequest: (userName: string) => void;
-  closeRequestPasswordResetDialog: () => void;
-  openRequestPasswordResetDialog: () => void;
-  closeResetPasswordDialog: () => void;
-  closeRegistrationDialog: () => void;
-  openRegistrationDialog: () => void;
-  closeActivateAccountDialog: () => void;
-}
-
-export function useLogin(): Login {
-  const description = useAppSelector((s) => ServerSelectors.getDescription(s));
-  const isConnected = useAppSelector(ServerSelectors.getIsConnected);
-  const connectionAttemptMade = useAppSelector(ServerSelectors.getConnectionAttemptMade);
-  const webClient = useWebClient();
-  const { t } = useTranslation();
-
-  const [pendingActivationOptions, setPendingActivationOptions] =
-    useState<WebsocketTypes.PendingActivationContext | null>(null);
-
-  const rememberLoginRef = useRef<LoginFormValues | RegisterFormValues | null>(null);
-  const knownHosts = useKnownHosts();
-  const [dialogState, setDialogState] = useState<LoginDialogState>({
-    passwordResetRequestDialog: false,
-    resetPasswordDialog: false,
-    registrationDialog: false,
-    activationDialog: false,
-  });
-  const [userToResetPassword, setUserToResetPassword] = useState<string | null>(null);
-
-  const passwordResetToast = useToast({
-    key: 'password-reset-success',
-    children: t('LoginContainer.toasts.passwordResetSuccess'),
-  });
-  const accountActivatedToast = useToast({
-    key: 'account-activation-success',
-    children: t('LoginContainer.toasts.accountActivationSuccess'),
-  });
-
-  const closeRequestPasswordResetDialog = () => {
-    setDialogState((s) => ({ ...s, passwordResetRequestDialog: false }));
-  };
-
-  const openRequestPasswordResetDialog = () => {
-    setDialogState((s) => ({ ...s, passwordResetRequestDialog: true }));
-  };
-
-  const closeResetPasswordDialog = () => {
-    setDialogState((s) => ({ ...s, resetPasswordDialog: false }));
-  };
-
-  const openResetPasswordDialog = () => {
-    setDialogState((s) => ({ ...s, resetPasswordDialog: true }));
-  };
-
-  const closeRegistrationDialog = () => {
-    setDialogState((s) => ({ ...s, registrationDialog: false }));
-  };
-
-  const openRegistrationDialog = () => {
-    setDialogState((s) => ({ ...s, registrationDialog: true }));
-  };
-
-  const closeActivateAccountDialog = () => {
-    setDialogState((s) => ({ ...s, activationDialog: false }));
-  };
-
-  const openActivateAccountDialog = () => {
-    setDialogState((s) => ({ ...s, activationDialog: true }));
-  };
-
-  useReduxEffect(() => {
-    closeRequestPasswordResetDialog();
-    openResetPasswordDialog();
-  }, ServerTypes.RESET_PASSWORD_REQUESTED, []);
-
-  useReduxEffect(() => {
-    passwordResetToast.openToast();
-    closeResetPasswordDialog();
-  }, ServerTypes.RESET_PASSWORD_SUCCESS, []);
-
-  useReduxEffect(() => {
-    accountActivatedToast.openToast();
-    closeActivateAccountDialog();
-    setPendingActivationOptions(null);
-  }, ServerTypes.ACCOUNT_ACTIVATION_SUCCESS, []);
-
-  useReduxEffect<{ options: WebsocketTypes.PendingActivationContext }>(({ payload: { options } }) => {
-    setPendingActivationOptions(options);
-    closeRegistrationDialog();
-    openActivateAccountDialog();
-  }, ServerTypes.ACCOUNT_AWAITING_ACTIVATION, []);
-
-  const onSubmitLogin = useCallback((loginForm: LoginFormValues) => {
-    rememberLoginRef.current = loginForm;
-    const { userName, password, selectedHost, remember } = loginForm;
-
-    const options: Omit<WebsocketTypes.LoginConnectOptions, 'reason'> = {
-      ...getHostPort(selectedHost),
-      userName,
-      password,
-    };
-
-    if (remember && !password) {
-      options.hashedPassword = selectedHost.hashedPassword;
-    }
-
-    webClient.request.authentication.login(options);
-  }, [webClient]);
-
-  const [submitButtonDisabled, resetSubmitButton, handleLogin] = useFireOnce(onSubmitLogin);
-
-  useReduxEffect(() => {
-    resetSubmitButton();
-  }, [ServerTypes.CONNECTION_FAILED, ServerTypes.LOGIN_FAILED], []);
-
-  const updateHost = (
-    hashedPassword: string | undefined,
-    { selectedHost, remember, userName }: LoginFormValues,
-  ) => {
-    if (selectedHost.id == null) {
-      return;
-    }
-    // Only honour the Remember checkbox when we actually received a hash to
-    // store. A server that advertises SupportsPasswordHash but returns an empty
-    // salt falls through to a plain-password login (no hash produced); writing
-    // `remember: true` with a null hash would leave the checkbox visibly
-    // checked on next load while the stored-password flow silently couldn't
-    // activate. Resetting to the unchecked state makes the failure visible.
-    const persistCredentials = remember && Boolean(hashedPassword);
-    knownHosts.update(selectedHost.id, {
-      remember: persistCredentials,
-      userName: persistCredentials ? userName : null,
-      hashedPassword: persistCredentials ? hashedPassword : null,
-    });
-  };
-
-  useReduxEffect<{ options: WebsocketTypes.LoginSuccessContext }>(({ payload: { options } }) => {
-    const loginForm = rememberLoginRef.current;
-    if (loginForm && 'remember' in loginForm) {
-      updateHost(options.hashedPassword, loginForm);
-    }
-  }, ServerTypes.LOGIN_SUCCESSFUL, []);
-
-  useAutoLogin(handleLogin, connectionAttemptMade);
-
-  const showDescription = () => {
-    return Boolean(!isConnected && description?.length);
-  };
-
-  const handleRegistrationDialogSubmit = (registerForm: RegisterFormValues) => {
-    rememberLoginRef.current = registerForm;
-    const { userName, password, email, country, realName, selectedHost } = registerForm;
-
-    webClient.request.authentication.register({
-      ...getHostPort(selectedHost),
-      userName,
-      password,
-      email,
-      country,
-      realName,
-    });
-  };
-
-  const handleAccountActivationDialogSubmit = ({ token }: { token: string }) => {
-    if (!pendingActivationOptions) {
-      return;
-    }
-    webClient.request.authentication.activateAccount({
-      host: pendingActivationOptions.host,
-      port: pendingActivationOptions.port,
-      userName: pendingActivationOptions.userName,
-      token,
-    });
-  };
-
-  const handleRequestPasswordResetDialogSubmit = (form: RequestPasswordResetFormValues) => {
-    const { userName, email, selectedHost } = form;
-    const { host, port } = getHostPort(selectedHost);
-
-    if (email) {
-      webClient.request.authentication.resetPasswordChallenge({ userName, email, host, port });
-    } else {
-      setUserToResetPassword(userName);
-      webClient.request.authentication.resetPasswordRequest({ userName, host, port });
-    }
-  };
-
-  const handleResetPasswordDialogSubmit = ({
-    userName,
-    token,
-    newPassword,
-    selectedHost,
-  }: ResetPasswordFormValues) => {
-    const { host, port } = getHostPort(selectedHost);
-    webClient.request.authentication.resetPassword({ userName, token, newPassword, host, port });
-  };
-
-  const skipTokenRequest = (userName: string) => {
-    setUserToResetPassword(userName);
-
-    setDialogState((s) => ({
-      ...s,
-      passwordResetRequestDialog: false,
-      resetPasswordDialog: true,
-    }));
-  };
-
-  return {
-    description,
-    isConnected,
-    dialogState,
-    userToResetPassword,
-    submitButtonDisabled,
-    handleLogin,
-    showDescription,
-    handleRegistrationDialogSubmit,
-    handleAccountActivationDialogSubmit,
-    handleRequestPasswordResetDialogSubmit,
-    handleResetPasswordDialogSubmit,
-    skipTokenRequest,
-    closeRequestPasswordResetDialog,
-    openRequestPasswordResetDialog,
-    closeResetPasswordDialog,
-    closeRegistrationDialog,
-    openRegistrationDialog,
-    closeActivateAccountDialog,
-  };
-}
diff --git a/webclient/src/containers/Logs/LogResults.tsx b/webclient/src/containers/Logs/LogResults.tsx
index 5f99479cb..201ca0db0 100644
--- a/webclient/src/containers/Logs/LogResults.tsx
+++ b/webclient/src/containers/Logs/LogResults.tsx
@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
 
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
@@ -11,99 +10,51 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-
-import type { Data } from '@app/types';
-import type { ServerStateLogs } from '@app/store';
-
-import { useLogResults } from './useLogResults';
+import Typography from '@mui/material/Typography';
 
 import './LogResults.css';
 
-interface LogResultsProps {
-  logs: ServerStateLogs;
-}
+const LogResults = (props) => {
+  const { logs } = props;
 
-interface HeaderCell {
-  label: string;
-}
+  const hasRoomLogs = logs.room && logs.room.length;
+  const hasGameLogs = logs.game && logs.game.length;
+  const hasChatLogs = logs.chat && logs.chat.length;
 
-interface ResultsProps {
-  headerCells: HeaderCell[];
-  logs: Data.ServerInfo_ChatMessage[];
-}
+  const [value, setValue] = React.useState(0);
 
-interface TabPanelProps {
-  children?: ReactNode;
-  value: number;
-  index: number;
-}
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
 
-const a11yProps = (index: number): { id: string; 'aria-controls': string } => ({
-  id: `logs-tab-${index}`,
-  'aria-controls': `logs-tabpanel-${index}`,
-});
-
-const TabPanel = ({ children, value, index }: TabPanelProps) => (
-  <div
-    role="tabpanel"
-    hidden={value !== index}
-    id={`logs-tabpanel-${index}`}
-    aria-labelledby={`logs-tab-${index}`}
-  >
-    <Box>{children}</Box>
-  </div>
-);
-
-const Results = ({ headerCells, logs }: ResultsProps) => (
-  <Paper className="log-results">
-    <Table size="small">
-      <TableHead>
-        <TableRow>
-          {headerCells.map(({ label }) => (
-            <TableCell key={label}>{label}</TableCell>
-          ))}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {logs.map((log, index) => (
-          <TableRow key={`${log.time}-${log.senderIp}-${index}`}>
-            <TableCell>{log.time}</TableCell>
-            <TableCell>{log.senderName}</TableCell>
-            <TableCell>{log.senderIp}</TableCell>
-            <TableCell>{log.message}</TableCell>
-            <TableCell>{log.targetId}</TableCell>
-            <TableCell>{log.targetName}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  </Paper>
-);
-
-const LogResults = ({ logs }: LogResultsProps) => {
-  const { t } = useTranslation();
-  const { value, handleChange } = useLogResults();
-
-  const headerCells: HeaderCell[] = [
-    { label: t('Logs.column.time') },
-    { label: t('Logs.column.senderName') },
-    { label: t('Logs.column.senderIp') },
-    { label: t('Logs.column.message') },
-    { label: t('Logs.column.targetId') },
-    { label: t('Logs.column.targetName') },
+  const headerCells = [
+    {
+      label: 'Time'
+    },
+    {
+      label: 'Sender Name'
+    },
+    {
+      label: 'Sender IP'
+    },
+    {
+      label: 'Message'
+    },
+    {
+      label: 'Target ID'
+    },
+    {
+      label: 'Target Name'
+    }
   ];
 
-  const roomCount = logs.room?.length ?? 0;
-  const gameCount = logs.game?.length ?? 0;
-  const chatCount = logs.chat?.length ?? 0;
-
   return (
     <div>
       <AppBar position="static">
-        <Tabs value={value} onChange={handleChange} aria-label={t('Logs.title', { defaultValue: 'Log Results' })}>
-          <Tab label={`${t('Logs.tab.rooms')}${roomCount > 0 ? ` [${roomCount}]` : ''}`} {...a11yProps(0)} />
-          <Tab label={`${t('Logs.tab.games')}${gameCount > 0 ? ` [${gameCount}]` : ''}`} {...a11yProps(1)} />
-          <Tab label={`${t('Logs.tab.chats')}${chatCount > 0 ? ` [${chatCount}]` : ''}`} {...a11yProps(2)} />
+        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
+          <Tab label={'Rooms' + (hasRoomLogs ? ` [${logs.room.length}]` : '')} {...a11yProps(0)} />
+          <Tab label={'Games' + (hasGameLogs ? ` [${logs.game.length}]` : '')} {...a11yProps(1)} />
+          <Tab label={'Chats' + (hasChatLogs ? ` [${logs.chat.length}]` : '')} {...a11yProps(2)} />
         </Tabs>
       </AppBar>
       <TabPanel value={value} index={0}>
@@ -116,7 +67,55 @@ const LogResults = ({ logs }: LogResultsProps) => {
         <Results logs={logs.chat} headerCells={headerCells} />
       </TabPanel>
     </div>
+  )
+};
+
+const a11yProps = index => {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+};
+
+const TabPanel = ({ children, value, index, ...other }) => {
+  return (
+    <Typography
+      component="div"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      <Box>{children}</Box>
+    </Typography>
   );
 };
 
+const Results = ({ headerCells, logs }) => (
+  <Paper className="log-results">
+    <Table size="small">
+      <TableHead>
+        <TableRow>
+          { headerCells.map(({ label }) => (
+            <TableCell key={label}>{label}</TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        { logs.map(({ time, senderName, senderIp, message, targetId, targetName }, index) => (
+          <TableRow key={index}>
+            <TableCell>{time}</TableCell>
+            <TableCell>{senderName}</TableCell>
+            <TableCell>{senderIp}</TableCell>
+            <TableCell>{message}</TableCell>
+            <TableCell>{targetId}</TableCell>
+            <TableCell>{targetName}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  </Paper>
+);
+
 export default LogResults;
diff --git a/webclient/src/containers/Logs/Logs.i18n.json b/webclient/src/containers/Logs/Logs.i18n.json
deleted file mode 100644
index 6ffaf1b6f..000000000
--- a/webclient/src/containers/Logs/Logs.i18n.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "Logs": {
-    "tab": {
-      "rooms": "Rooms",
-      "games": "Games",
-      "chats": "Chats"
-    },
-    "column": {
-      "time": "Time",
-      "senderName": "Sender Name",
-      "senderIp": "Sender IP",
-      "message": "Message",
-      "targetId": "Target ID",
-      "targetName": "Target Name"
-    },
-    "message": {
-      "emptyFilter": "Enter at least one search field before submitting."
-    }
-  }
-}
diff --git a/webclient/src/containers/Logs/Logs.tsx b/webclient/src/containers/Logs/Logs.tsx
index 1c7dbfe40..bf2fe9a6d 100644
--- a/webclient/src/containers/Logs/Logs.tsx
+++ b/webclient/src/containers/Logs/Logs.tsx
@@ -1,13 +1,61 @@
+import { useEffect } from 'react';
+
 import { AuthGuard, ModGuard } from '@app/components';
 import { SearchForm } from '@app/forms';
+import { useWebClient } from '@app/hooks';
+import { ServerDispatch, ServerSelectors } from '@app/store';
+import { Data } from '@app/types';
+import { useAppSelector } from '@app/store';
 
 import LogResults from './LogResults';
-import { useLogs } from './useLogs';
-
 import './Logs.css';
 
 const Logs = () => {
-  const { logs, onSubmit } = useLogs();
+  const logs = useAppSelector(state => ServerSelectors.getLogs(state));
+  const webClient = useWebClient();
+  const MAXIMUM_RESULTS = 1000;
+
+  useEffect(() => {
+    return () => {
+      ServerDispatch.clearLogs();
+    };
+  }, []);
+
+  const trimFields = (fields) => {
+    const result: any = {};
+    for (const [key, field] of Object.entries(fields)) {
+      if (typeof field === 'string') {
+        const trimmed = field.trim();
+        if (trimmed) {
+          result[key] = trimmed;
+        }
+      } else {
+        result[key] = field;
+      }
+    }
+    return result;
+  };
+
+  const flattenLogLocations = (logLocations) => Object.keys(logLocations);
+
+  const onSubmit = (fields: Data.ViewLogHistoryParams) => {
+    const trimmedFields: any = trimFields(fields);
+    const { userName, ipAddress, gameName, gameId, message, logLocation } = trimmedFields;
+
+    const required = [userName, ipAddress, gameName, gameId, message].filter(Boolean);
+
+    if (logLocation) {
+      trimmedFields.logLocation = flattenLogLocations(logLocation);
+    }
+
+    trimmedFields.maximumResults = MAXIMUM_RESULTS;
+
+    if (required.length) {
+      webClient.request.moderator.viewLogHistory(trimmedFields);
+    } else {
+      // @TODO use yet-to-be-implemented banner/alert
+    }
+  };
 
   return (
     <div className="moderator-logs overflow-scroll">
@@ -26,3 +74,13 @@ const Logs = () => {
 };
 
 export default Logs;
+
+
+
+
+
+
+
+
+
+
diff --git a/webclient/src/containers/Logs/useLogResults.ts b/webclient/src/containers/Logs/useLogResults.ts
deleted file mode 100644
index 68e174bbe..000000000
--- a/webclient/src/containers/Logs/useLogResults.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useState } from 'react';
-
-export interface LogResults {
-  value: number;
-  handleChange: (event: unknown, newValue: number) => void;
-}
-
-export function useLogResults(): LogResults {
-  const [value, setValue] = useState(0);
-
-  const handleChange = (_event: unknown, newValue: number) => {
-    setValue(newValue);
-  };
-
-  return { value, handleChange };
-}
diff --git a/webclient/src/containers/Logs/useLogs.ts b/webclient/src/containers/Logs/useLogs.ts
deleted file mode 100644
index 57d5c5c59..000000000
--- a/webclient/src/containers/Logs/useLogs.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useToast } from '@app/components';
-import { useWebClient } from '@app/hooks';
-import { ServerDispatch, ServerSelectors, ServerStateLogs, useAppSelector } from '@app/store';
-import { Data } from '@app/types';
-
-const MAXIMUM_RESULTS = 1000;
-
-export interface Logs {
-  logs: ServerStateLogs;
-  onSubmit: (fields: Data.ViewLogHistoryParams) => void;
-}
-
-export function useLogs(): Logs {
-  const { t } = useTranslation();
-  const logs = useAppSelector((state) => ServerSelectors.getLogs(state));
-  const webClient = useWebClient();
-  const { openToast } = useToast({
-    key: 'logs-empty-filter',
-    children: t('Logs.message.emptyFilter'),
-  });
-
-  useEffect(() => {
-    return () => {
-      ServerDispatch.clearLogs();
-    };
-  }, []);
-
-  const trimFields = (fields: Data.ViewLogHistoryParams): Data.ViewLogHistoryParams => {
-    const result: Data.ViewLogHistoryParams = { ...fields };
-    for (const key of Object.keys(result) as (keyof Data.ViewLogHistoryParams)[]) {
-      const field = result[key];
-      if (typeof field === 'string') {
-        const trimmed = field.trim();
-        if (trimmed) {
-          (result as Record<string, unknown>)[key] = trimmed;
-        } else {
-          delete (result as Record<string, unknown>)[key];
-        }
-      }
-    }
-    return result;
-  };
-
-  const flattenLogLocations = (logLocations: Record<string, unknown>): string[] =>
-    Object.keys(logLocations);
-
-  const onSubmit = (fields: Data.ViewLogHistoryParams) => {
-    const trimmedFields = trimFields(fields);
-    const { userName, ipAddress, gameName, gameId, message, logLocation } = trimmedFields as
-      Data.ViewLogHistoryParams & { logLocation?: Record<string, unknown> };
-
-    const required = [userName, ipAddress, gameName, gameId, message].filter(Boolean);
-
-    if (logLocation) {
-      trimmedFields.logLocation = flattenLogLocations(logLocation);
-    }
-
-    trimmedFields.maximumResults = MAXIMUM_RESULTS;
-
-    if (required.length) {
-      webClient.request.moderator.viewLogHistory(trimmedFields);
-    } else {
-      openToast();
-    }
-  };
-
-  return { logs, onSubmit };
-}
diff --git a/webclient/src/containers/Player/Player.css b/webclient/src/containers/Player/Player.css
deleted file mode 100644
index 11d841ca1..000000000
--- a/webclient/src/containers/Player/Player.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.player-view {
-  display: flex;
-  justify-content: center;
-  padding: 24px;
-}
-
-.player-view__card {
-  width: 100%;
-  max-width: 640px;
-  padding: 24px;
-}
-
-.player-view__avatar-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 16px;
-}
-
-.player-view__avatar {
-  width: 160px;
-  height: 160px;
-  border-radius: 8px;
-  object-fit: cover;
-  background-color: var(--bg-subtle, #eee);
-}
-
-.player-view__name {
-  text-align: center;
-  margin: 0 0 8px;
-}
-
-.player-view__level-badge {
-  text-align: center;
-  margin-bottom: 16px;
-  color: var(--text-muted, #666);
-}
-
-.player-view__details {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 16px;
-  margin-bottom: 16px;
-}
-
-.player-view__label {
-  font-weight: bold;
-}
-
-.player-view__country-flag {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 8px;
-  height: 16px;
-}
-
-.player-view__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-}
-
-.player-view__empty {
-  text-align: center;
-  color: var(--text-muted, #666);
-}
diff --git a/webclient/src/containers/Player/Player.i18n.json b/webclient/src/containers/Player/Player.i18n.json
deleted file mode 100644
index ac33abfe1..000000000
--- a/webclient/src/containers/Player/Player.i18n.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "Player": {
-    "title": "User Information",
-    "label": {
-      "realName": "Real Name",
-      "location": "Location",
-      "userLevel": "User Level",
-      "accountAge": "Account Age"
-    },
-    "level": {
-      "administrator": "Administrator",
-      "moderator": "Moderator",
-      "registered": "Registered user",
-      "unregistered": "Unregistered user",
-      "judge": "Judge"
-    },
-    "age": {
-      "unknown": "Unknown",
-      "days": "{count, plural, one {# day} other {# days}}",
-      "daysWithYears": "{years, plural, one {# year} other {# years}}, {days, plural, one {# day} other {# days}}"
-    },
-    "action": {
-      "addBuddy": "Add to Buddy List",
-      "removeBuddy": "Remove from Buddy List",
-      "addIgnore": "Add to Ignore List",
-      "removeIgnore": "Remove from Ignore List",
-      "message": "Message",
-      "warn": "Warn User",
-      "ban": "Ban from Server",
-      "notFound": "User not found or still loading…"
-    }
-  }
-}
diff --git a/webclient/src/containers/Player/Player.tsx b/webclient/src/containers/Player/Player.tsx
index 4bd23685d..899285054 100644
--- a/webclient/src/containers/Player/Player.tsx
+++ b/webclient/src/containers/Player/Player.tsx
@@ -1,177 +1,14 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-
 import Layout from '../Layout/Layout';
+
 import { AuthGuard } from '@app/components';
-import { Images } from '@app/images';
-import { Data } from '@app/types';
-
-import { usePlayer } from './usePlayer';
-
-import './Player.css';
-
-const AVATAR_DATA_URI_PREFIX = 'data:image/png;base64,';
-
-/** Builds a data URI from a raw avatar payload, or returns null when no avatar is set. */
-function avatarSrc(bmp: Uint8Array | undefined): string | null {
-  if (!bmp || bmp.byteLength === 0) {
-    return null;
-  }
-  let binary = '';
-  for (let i = 0; i < bmp.byteLength; i += 1) {
-    binary += String.fromCharCode(bmp[i]);
-  }
-  return AVATAR_DATA_URI_PREFIX + btoa(binary);
-}
-
-/** Matches desktop UserInfoBox level hierarchy: admin > moderator > registered > unregistered, plus Judge marker. */
-function userLevelLabel(userLevel: number, t: (k: string) => string): string {
-  const Flag = Data.ServerInfo_User_UserLevelFlag;
-  const parts: string[] = [];
-  if ((userLevel & Flag.IsAdmin) === Flag.IsAdmin) {
-    parts.push(t('Player.level.administrator'));
-  } else if ((userLevel & Flag.IsModerator) === Flag.IsModerator) {
-    parts.push(t('Player.level.moderator'));
-  } else if ((userLevel & Flag.IsRegistered) === Flag.IsRegistered) {
-    parts.push(t('Player.level.registered'));
-  } else {
-    parts.push(t('Player.level.unregistered'));
-  }
-  if ((userLevel & Flag.IsJudge) === Flag.IsJudge) {
-    parts.push(t('Player.level.judge'));
-  }
-  return parts.join(' | ');
-}
-
-/** Formats account age like desktop's getAgeString: "Unknown" | "N days" | "Y years, D days". */
-function formatAccountAge(
-  accountageSecs: bigint | undefined,
-  userLevel: number,
-  t: (k: string, params?: Record<string, unknown>) => string,
-): string {
-  const Flag = Data.ServerInfo_User_UserLevelFlag;
-  const isRegistered =
-    (userLevel & Flag.IsAdmin) === Flag.IsAdmin ||
-    (userLevel & Flag.IsModerator) === Flag.IsModerator ||
-    (userLevel & Flag.IsRegistered) === Flag.IsRegistered;
-  if (!isRegistered) {
-    return t('Player.level.unregistered');
-  }
-  if (!accountageSecs || accountageSecs <= 0n) {
-    return t('Player.age.unknown');
-  }
-  const totalDays = Number(accountageSecs / 86400n);
-  const years = Math.floor(totalDays / 365);
-  const days = totalDays - years * 365;
-  if (years > 0) {
-    return t('Player.age.daysWithYears', { years, days });
-  }
-  return t('Player.age.days', { count: days });
-}
-
-const Player = () => {
-  const { t } = useTranslation();
-  const {
-    name,
-    userInfo,
-    isSelf,
-    isABuddy,
-    isIgnored,
-    isModerator,
-    onAddBuddy,
-    onRemoveBuddy,
-    onAddIgnore,
-    onRemoveIgnore,
-    onSendMessage,
-    onWarnUser,
-    onBanFromServer,
-  } = usePlayer();
-
-  const avatar = useMemo(() => avatarSrc(userInfo?.avatarBmp), [userInfo?.avatarBmp]);
-  const countryCode = userInfo?.country?.toUpperCase() ?? '';
 
+function Player() {
   return (
     <Layout>
       <AuthGuard />
-      <div className="player-view">
-        <Paper className="player-view__card" elevation={2}>
-          <Typography variant="h5" className="player-view__name">
-            {t('Player.title')}
-          </Typography>
-
-          {!userInfo && (
-            <Typography className="player-view__empty">{t('Player.action.notFound')}</Typography>
-          )}
-
-          {userInfo && (
-            <>
-              <div className="player-view__avatar-wrapper">
-                {avatar
-                  ? <img className="player-view__avatar" src={avatar} alt={name ?? ''} />
-                  : <div className="player-view__avatar" aria-hidden="true" />}
-              </div>
-
-              <Typography variant="h6" className="player-view__name">{userInfo.name}</Typography>
-              <Typography className="player-view__level-badge">
-                {userLevelLabel(userInfo.userLevel, t)}
-                {userInfo.privlevel && userInfo.privlevel !== 'NONE' ? ` | ${userInfo.privlevel}` : ''}
-              </Typography>
-
-              <div className="player-view__details">
-                <span className="player-view__label">{t('Player.label.realName')}</span>
-                <span>{userInfo.realName || '—'}</span>
-
-                <span className="player-view__label">{t('Player.label.location')}</span>
-                <span>
-                  {countryCode && (
-                    <img
-                      className="player-view__country-flag"
-                      src={Images.Countries[userInfo.country]}
-                      alt={countryCode}
-                    />
-                  )}
-                  {countryCode || '—'}
-                </span>
-
-                <span className="player-view__label">{t('Player.label.userLevel')}</span>
-                <span>{userLevelLabel(userInfo.userLevel, t)}</span>
-
-                <span className="player-view__label">{t('Player.label.accountAge')}</span>
-                <span>{formatAccountAge(userInfo.accountageSecs, userInfo.userLevel, t)}</span>
-              </div>
-
-              {!isSelf && (
-                <div className="player-view__actions">
-                  <Button variant="outlined" onClick={isABuddy ? onRemoveBuddy : onAddBuddy}>
-                    {isABuddy ? t('Player.action.removeBuddy') : t('Player.action.addBuddy')}
-                  </Button>
-                  <Button variant="outlined" onClick={isIgnored ? onRemoveIgnore : onAddIgnore}>
-                    {isIgnored ? t('Player.action.removeIgnore') : t('Player.action.addIgnore')}
-                  </Button>
-                  <Button variant="outlined" onClick={() => onSendMessage('')}>
-                    {t('Player.action.message')}
-                  </Button>
-                  {isModerator && (
-                    <>
-                      <Button variant="outlined" color="warning" onClick={() => onWarnUser('')}>
-                        {t('Player.action.warn')}
-                      </Button>
-                      <Button variant="outlined" color="error" onClick={() => onBanFromServer(0, '', '')}>
-                        {t('Player.action.ban')}
-                      </Button>
-                    </>
-                  )}
-                </div>
-              )}
-            </>
-          )}
-        </Paper>
-      </div>
+      <span>"Player"</span>
     </Layout>
   );
-};
+}
 
 export default Player;
diff --git a/webclient/src/containers/Player/usePlayer.ts b/webclient/src/containers/Player/usePlayer.ts
deleted file mode 100644
index 6a74467b8..000000000
--- a/webclient/src/containers/Player/usePlayer.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-
-import { useWebClient } from '@app/hooks';
-import { ServerSelectors, useAppSelector } from '@app/store';
-import type { Data } from '@app/types';
-
-export interface PlayerViewModel {
-  /** Resolved username from the route; null when the `:name` param is missing. */
-  name: string | null;
-  /** Profile record from server.userInfo[name]; undefined until the server response lands. */
-  userInfo: Data.ServerInfo_User | undefined;
-  /** The logged-in user, for self-profile and mod-permission checks. */
-  currentUser: Data.ServerInfo_User | null;
-  isSelf: boolean;
-  isABuddy: boolean;
-  isIgnored: boolean;
-  isModerator: boolean;
-
-  onAddBuddy: () => void;
-  onRemoveBuddy: () => void;
-  onAddIgnore: () => void;
-  onRemoveIgnore: () => void;
-  onSendMessage: (message: string) => void;
-  onWarnUser: (reason: string) => void;
-  onBanFromServer: (minutes: number, reason: string, visibleReason?: string) => void;
-}
-
-/**
- * Drives the Player container: resolves the `:name` route param, dispatches
- * `getUserInfo` on mount so the server populates `server.userInfo[name]`, and
- * exposes the buddy/ignore/mod-action callbacks desktop surfaces in UserInfoBox.
- */
-export function usePlayer(): PlayerViewModel {
-  const webClient = useWebClient();
-  const params = useParams<{ name?: string }>();
-  const name = params.name ?? null;
-
-  const userInfo = useAppSelector((state) =>
-    name ? ServerSelectors.getUserInfoByName(state, name) : undefined,
-  );
-  const currentUser = useAppSelector(ServerSelectors.getUser);
-  const buddyList = useAppSelector(ServerSelectors.getBuddyList);
-  const ignoreList = useAppSelector(ServerSelectors.getIgnoreList);
-  const isModerator = useAppSelector(ServerSelectors.getIsUserModerator);
-
-  useEffect(() => {
-    if (name) {
-      webClient.request.session.getUserInfo(name);
-    }
-  }, [name, webClient]);
-
-  const { isSelf, isABuddy, isIgnored } = useMemo(() => ({
-    isSelf: Boolean(currentUser && name && currentUser.name === name),
-    isABuddy: Boolean(name && buddyList[name]),
-    isIgnored: Boolean(name && ignoreList[name]),
-  }), [currentUser, name, buddyList, ignoreList]);
-
-  const onAddBuddy = () => name && webClient.request.session.addToBuddyList(name);
-  const onRemoveBuddy = () => name && webClient.request.session.removeFromBuddyList(name);
-  const onAddIgnore = () => name && webClient.request.session.addToIgnoreList(name);
-  const onRemoveIgnore = () => name && webClient.request.session.removeFromIgnoreList(name);
-  const onSendMessage = (message: string) => name && webClient.request.session.sendDirectMessage(name, message);
-  const onWarnUser = (reason: string) => name && webClient.request.moderator.warnUser(name, reason);
-  const onBanFromServer = (minutes: number, reason: string, visibleReason?: string) =>
-    name && webClient.request.moderator.banFromServer(minutes, name, undefined, reason, visibleReason);
-
-  return {
-    name,
-    userInfo,
-    currentUser,
-    isSelf,
-    isABuddy,
-    isIgnored,
-    isModerator,
-    onAddBuddy,
-    onRemoveBuddy,
-    onAddIgnore,
-    onRemoveIgnore,
-    onSendMessage,
-    onWarnUser,
-    onBanFromServer,
-  };
-}
diff --git a/webclient/src/containers/Room/GameSelector/GameSelector.css b/webclient/src/containers/Room/GameSelector/GameSelector.css
deleted file mode 100644
index 2bc6c9edb..000000000
--- a/webclient/src/containers/Room/GameSelector/GameSelector.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.game-selector {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.game-selector__title {
-  padding: 6px 12px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  font-weight: 600;
-}
-
-.game-selector__games {
-  flex: 1;
-  overflow: auto;
-}
-
-.game-selector__toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  flex-wrap: wrap;
-}
-
-.game-selector__toolbar-left,
-.game-selector__toolbar-right {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
diff --git a/webclient/src/containers/Room/GameSelector/GameSelector.spec.tsx b/webclient/src/containers/Room/GameSelector/GameSelector.spec.tsx
deleted file mode 100644
index 097fffa13..000000000
--- a/webclient/src/containers/Room/GameSelector/GameSelector.spec.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-import { act, fireEvent, screen } from '@testing-library/react';
-import { create } from '@bufbuild/protobuf';
-import {
-  renderWithProviders,
-  makeStoreState,
-  makeUser,
-  connectedWithRoomsState,
-} from '../../../__test-utils__';
-import { App, Data } from '@app/types';
-import { GameTypes } from '@app/store';
-import GameSelector from './GameSelector';
-
-const { mockUseWebClient, mockNavigate } = vi.hoisted(() => ({
-  mockUseWebClient: vi.fn(),
-  mockNavigate: vi.fn(),
-}));
-vi.mock('@app/hooks', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@app/hooks')>();
-  return { ...actual, useWebClient: mockUseWebClient };
-});
-vi.mock('react-router-dom', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('react-router-dom')>();
-  return { ...actual, useNavigate: () => mockNavigate };
-});
-
-function makeRoomEntry(games: Data.ServerInfo_Game[] = [], gametypeMap: Record<number, string> = {}) {
-  return {
-    info: create(Data.ServerInfo_RoomSchema, { roomId: 1, name: 'Main' }),
-    gametypeMap,
-    order: 0,
-    games: Object.fromEntries(games.map((info) => [info.gameId, { info, gameType: '' }])),
-    users: {},
-  };
-}
-
-function makeGame(overrides: any = {}): Data.ServerInfo_Game {
-  return create(Data.ServerInfo_GameSchema, {
-    gameId: 1,
-    roomId: 1,
-    description: 'Test',
-    maxPlayers: 4,
-    playerCount: 1,
-    spectatorsAllowed: true,
-    ...overrides,
-  });
-}
-
-function makeWebClient() {
-  return {
-    request: {
-      rooms: {
-        joinRoom: vi.fn(),
-        leaveRoom: vi.fn(),
-        roomSay: vi.fn(),
-        createGame: vi.fn(),
-        joinGame: vi.fn(),
-      },
-    },
-  } as any;
-}
-
-function buildState(
-  room: ReturnType<typeof makeRoomEntry>,
-  user = makeUser(),
-  selectedGameId?: number,
-  roomsOverrides: Partial<{ joinGamePending: boolean; joinGameError: { code: number; message: string } | null }> = {},
-) {
-  return makeStoreState({
-    ...connectedWithRoomsState,
-    rooms: {
-      rooms: { 1: room },
-      joinedRoomIds: { 1: true },
-      joinedGameIds: {},
-      messages: { 1: [] },
-      sortGamesBy: { field: App.GameSortField.START_TIME, order: App.SortDirection.DESC },
-      sortUsersBy: { field: App.UserSortField.NAME, order: App.SortDirection.ASC },
-      selectedGameIds: selectedGameId != null ? { 1: selectedGameId } : {},
-      gameFilters: {},
-      joinGamePending: false,
-      joinGameError: null,
-      ...roomsOverrides,
-    } as any,
-    server: {
-      ...(connectedWithRoomsState.server as any),
-      user,
-    } as any,
-  });
-}
-
-beforeEach(() => {
-  mockUseWebClient.mockReset();
-  mockNavigate.mockReset();
-});
-
-describe('GameSelector', () => {
-  it('renders the count header from getRoomGameCounts', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const room = makeRoomEntry([makeGame({ gameId: 1 }), makeGame({ gameId: 2 })]);
-    renderWithProviders(<GameSelector room={room as any} />, { preloadedState: buildState(room) });
-    expect(screen.getByText('Games shown: 2 / 2')).toBeInTheDocument();
-  });
-
-  it('Join button is disabled until a game is selected', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const room = makeRoomEntry([makeGame({ gameId: 1 })]);
-    renderWithProviders(<GameSelector room={room as any} />, { preloadedState: buildState(room) });
-    expect(screen.getByRole('button', { name: /^Join$/ })).toBeDisabled();
-  });
-
-  it('Join button enabled and dispatches joinGame when a game is selected', () => {
-    const client = makeWebClient();
-    mockUseWebClient.mockReturnValue(client);
-    const game = makeGame({ gameId: 7, withPassword: false });
-    const room = makeRoomEntry([game]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser(), 7),
-    });
-
-    const joinBtn = screen.getByRole('button', { name: /^Join$/ });
-    expect(joinBtn).not.toBeDisabled();
-    fireEvent.click(joinBtn);
-
-    expect(client.request.rooms.joinGame).toHaveBeenCalledTimes(1);
-    expect(client.request.rooms.joinGame).toHaveBeenCalledWith(1, expect.objectContaining({
-      gameId: 7,
-      spectator: false,
-      joinAsJudge: false,
-      password: '',
-    }));
-  });
-
-  it('clicking Join on a password-protected game opens the password prompt before sending', () => {
-    const client = makeWebClient();
-    mockUseWebClient.mockReturnValue(client);
-    const game = makeGame({ gameId: 8, withPassword: true });
-    const room = makeRoomEntry([game]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser(), 8),
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: /^Join$/ }));
-
-    expect(client.request.rooms.joinGame).not.toHaveBeenCalled();
-    expect(screen.getByText('Password required')).toBeInTheDocument();
-
-    fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'hunter2' } });
-    // The dialog has its own "Join" button — find both and click the last (in dialog).
-    const joinButtons = screen.getAllByRole('button', { name: /^Join$/ });
-    fireEvent.click(joinButtons[joinButtons.length - 1]);
-
-    expect(client.request.rooms.joinGame).toHaveBeenCalledTimes(1);
-    expect(client.request.rooms.joinGame).toHaveBeenCalledWith(1, expect.objectContaining({
-      gameId: 8,
-      password: 'hunter2',
-    }));
-  });
-
-  it('Spectate button is disabled when spectators are not allowed', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const game = makeGame({ gameId: 1, spectatorsAllowed: false });
-    const room = makeRoomEntry([game]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser(), 1),
-    });
-    expect(screen.getByRole('button', { name: /Join as Spectator/i })).toBeDisabled();
-  });
-
-  it('Join is disabled when the selected game is full', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const game = makeGame({ gameId: 1, playerCount: 4, maxPlayers: 4 });
-    const room = makeRoomEntry([game]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser(), 1),
-    });
-    expect(screen.getByRole('button', { name: /^Join$/ })).toBeDisabled();
-  });
-
-  it('judge buttons are hidden when the user is not a judge', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const room = makeRoomEntry([]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser({ userLevel: 0 })),
-    });
-    expect(screen.queryByRole('button', { name: /Join as Judge$/i })).not.toBeInTheDocument();
-  });
-
-  it('judge buttons are visible when the user has the IsJudge flag', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const room = makeRoomEntry([]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser({ userLevel: Data.ServerInfo_User_UserLevelFlag.IsJudge })),
-    });
-    expect(screen.getByRole('button', { name: /Join as Judge$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Join as Judge Spectator/i })).toBeInTheDocument();
-  });
-
-  it('renders AlertDialog with the join error message from state', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const room = makeRoomEntry([]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser(), undefined, {
-        joinGameError: { code: 10, message: 'The game is already full.' },
-      }),
-    });
-    expect(screen.getByText('Error')).toBeInTheDocument();
-    expect(screen.getByText('The game is already full.')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^ok$/i })).toBeInTheDocument();
-  });
-
-  it('does not render AlertDialog when joinGameError is null (covers silent RespContextError)', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const room = makeRoomEntry([]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser(), undefined, { joinGameError: null }),
-    });
-    // Only the CreateGame / FilterGames / PromptDialog / AlertDialog dialogs might exist; none
-    // should be open, so no role="dialog" in the DOM.
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-
-  it('clicking Join on a game already present in games.games navigates to /game without sending a command', () => {
-    const client = makeWebClient();
-    mockUseWebClient.mockReturnValue(client);
-    const game = makeGame({ gameId: 7, withPassword: false });
-    const room = makeRoomEntry([game]);
-    const state = buildState(room, makeUser(), 7);
-    (state as any).games = { games: { 7: { info: { gameId: 7 } } } };
-    renderWithProviders(<GameSelector room={room as any} />, { preloadedState: state });
-
-    fireEvent.click(screen.getByRole('button', { name: /^Join$/ }));
-
-    expect(client.request.rooms.joinGame).not.toHaveBeenCalled();
-    expect(mockNavigate).toHaveBeenCalledWith(App.RouteEnum.GAME);
-  });
-
-  it('dispatching GAME_JOINED navigates to /game (mirrors JOIN_ROOM → /room)', async () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const room = makeRoomEntry([]);
-    const { store } = renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room),
-    });
-
-    mockNavigate.mockClear();
-    await act(async () => {
-      store.dispatch({
-        type: GameTypes.GAME_JOINED,
-        payload: { data: { gameInfo: { gameId: 42 }, hostId: 0, playerId: 0, spectator: false } },
-      });
-    });
-    expect(mockNavigate).toHaveBeenCalledWith(App.RouteEnum.GAME);
-  });
-
-  it('Join button is disabled while joinGamePending is true even when a game is selected', () => {
-    mockUseWebClient.mockReturnValue(makeWebClient());
-    const game = makeGame({ gameId: 7 });
-    const room = makeRoomEntry([game]);
-    renderWithProviders(<GameSelector room={room as any} />, {
-      preloadedState: buildState(room, makeUser(), 7, { joinGamePending: true }),
-    });
-    expect(screen.getByRole('button', { name: /^Join$/ })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /Join as Spectator/i })).toBeDisabled();
-  });
-
-  it('clicking Create then submitting forwards createGame', () => {
-    const client = makeWebClient();
-    mockUseWebClient.mockReturnValue(client);
-    const room = makeRoomEntry([]);
-    renderWithProviders(<GameSelector room={room as any} />, { preloadedState: buildState(room) });
-    fireEvent.click(screen.getByRole('button', { name: /^Create$/ }));
-    // The dialog Submit button is the second matching "Create" button
-    const createButtons = screen.getAllByRole('button', { name: /^Create$/ });
-    fireEvent.click(createButtons[createButtons.length - 1]);
-    expect(client.request.rooms.createGame).toHaveBeenCalledTimes(1);
-    expect(client.request.rooms.createGame.mock.calls[0][0]).toBe(1);
-  });
-});
diff --git a/webclient/src/containers/Room/GameSelector/GameSelector.tsx b/webclient/src/containers/Room/GameSelector/GameSelector.tsx
deleted file mode 100644
index ec920fafc..000000000
--- a/webclient/src/containers/Room/GameSelector/GameSelector.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-
-import {
-  GameSelectors,
-  GameTypes,
-  RoomsDispatch,
-  RoomsSelectors,
-  ServerSelectors,
-  useAppSelector,
-  type GameFilters,
-} from '@app/store';
-import { useReduxEffect, useWebClient } from '@app/hooks';
-import { App, type Enriched } from '@app/types';
-import { AlertDialog, CreateGameDialog, FilterGamesDialog, PromptDialog } from '@app/dialogs';
-
-import OpenGames from '../OpenGames';
-import GameSelectorToolbar from './GameSelectorToolbar';
-
-import './GameSelector.css';
-
-interface GameSelectorProps {
-  room: Enriched.Room;
-}
-
-interface PendingPasswordJoin {
-  gameId: number;
-  asSpectator: boolean;
-  asJudge: boolean;
-}
-
-const GameSelector = ({ room }: GameSelectorProps) => {
-  const roomId = room.info.roomId;
-  const webClient = useWebClient();
-  const navigate = useNavigate();
-
-  const selectedGameId = useAppSelector((state) => RoomsSelectors.getSelectedGameId(state, roomId));
-  const selectedGame = useAppSelector((state) =>
-    selectedGameId != null ? RoomsSelectors.getRoomGames(state, roomId)[selectedGameId] : undefined,
-  );
-  const counts = useAppSelector((state) => RoomsSelectors.getRoomGameCounts(state, roomId));
-  const isFilterActive = useAppSelector((state) => RoomsSelectors.isGameFilterActive(state, roomId));
-  const filters = useAppSelector((state) => RoomsSelectors.getGameFilters(state, roomId));
-  const isJudgeUser = useAppSelector(ServerSelectors.getIsUserJudge);
-  const joinPending = useAppSelector(RoomsSelectors.getJoinGamePending);
-  const joinError = useAppSelector(RoomsSelectors.getJoinGameError);
-  const activeGameIds = useAppSelector(GameSelectors.getActiveGameIds);
-
-  // Mirrors Server.tsx's JOIN_ROOM → navigate(ROOM) pattern: when Event_GameJoined
-  // lands, we're actually in the game — route to /game.
-  useReduxEffect(() => {
-    navigate(App.RouteEnum.GAME);
-  }, GameTypes.GAME_JOINED, [navigate]);
-
-  const [createOpen, setCreateOpen] = useState(false);
-  const [filterOpen, setFilterOpen] = useState(false);
-  const [pendingPasswordJoin, setPendingPasswordJoin] = useState<PendingPasswordJoin | null>(null);
-
-  const sendJoin = useCallback(
-    (gameId: number, asSpectator: boolean, asJudge: boolean, password: string) => {
-      // Mirrors Rooms.tsx short-circuit: if we already have a live game entry
-      // (Event_GameJoined has populated games.games[gameId]), skip the duplicate
-      // JoinGame — the server would reject it with RespContextError — and go
-      // straight to the game view.
-      if (activeGameIds.includes(gameId)) {
-        navigate(App.RouteEnum.GAME);
-        return;
-      }
-      const params: App.JoinGameParams = {
-        gameId,
-        password,
-        spectator: asSpectator,
-        overrideRestrictions: false,
-        joinAsJudge: asJudge,
-      };
-      webClient.request.rooms.joinGame(roomId, params);
-    },
-    [activeGameIds, navigate, roomId, webClient],
-  );
-
-  const beginJoin = useCallback(
-    (asSpectator: boolean, asJudge: boolean) => {
-      const game = selectedGame;
-      if (!game) {
-        return;
-      }
-      const info = game.info;
-      const effectiveSpectator =
-        asSpectator || info.playerCount >= info.maxPlayers;
-      const needsPassword =
-        info.withPassword && !(effectiveSpectator && !info.spectatorsNeedPassword);
-      if (needsPassword) {
-        setPendingPasswordJoin({ gameId: info.gameId, asSpectator: effectiveSpectator, asJudge });
-        return;
-      }
-      sendJoin(info.gameId, effectiveSpectator, asJudge, '');
-    },
-    [selectedGame, sendJoin],
-  );
-
-  const handleActivate = useCallback(
-    (_gameId: number) => {
-      beginJoin(false, false);
-    },
-    [beginJoin],
-  );
-
-  const canJoin =
-    Boolean(selectedGame && selectedGame.info.playerCount < selectedGame.info.maxPlayers) && !joinPending;
-  const canSpectate = Boolean(selectedGame && selectedGame.info.spectatorsAllowed) && !joinPending;
-
-  const handleCreateSubmit = (params: App.CreateGameParams) => {
-    webClient.request.rooms.createGame(roomId, params);
-    setCreateOpen(false);
-  };
-
-  const handleFilterSubmit = (next: GameFilters) => {
-    RoomsDispatch.setGameFilters(roomId, next);
-    setFilterOpen(false);
-  };
-
-  const handlePasswordSubmit = (password: string) => {
-    if (!pendingPasswordJoin) {
-      return;
-    }
-    sendJoin(pendingPasswordJoin.gameId, pendingPasswordJoin.asSpectator, pendingPasswordJoin.asJudge, password);
-    setPendingPasswordJoin(null);
-  };
-
-  return (
-    <Paper className="game-selector overflow-scroll">
-      <Typography className="game-selector__title" variant="subtitle2">
-        Games shown: {counts.visible} / {counts.total}
-      </Typography>
-      <div className="game-selector__games">
-        <OpenGames room={room} onActivateGame={handleActivate} />
-      </div>
-      <GameSelectorToolbar
-        isFilterActive={isFilterActive}
-        canCreate={true}
-        canJoin={canJoin}
-        canSpectate={canSpectate}
-        isJudgeUser={isJudgeUser}
-        onFilter={() => setFilterOpen(true)}
-        onClearFilter={() => RoomsDispatch.clearGameFilters(roomId)}
-        onCreate={() => setCreateOpen(true)}
-        onJoin={() => beginJoin(false, false)}
-        onSpectate={() => beginJoin(true, false)}
-        onJoinAsJudge={() => beginJoin(false, true)}
-        onSpectateAsJudge={() => beginJoin(true, true)}
-      />
-
-      <CreateGameDialog
-        isOpen={createOpen}
-        gametypeMap={room.gametypeMap}
-        onCancel={() => setCreateOpen(false)}
-        onSubmit={handleCreateSubmit}
-      />
-      <FilterGamesDialog
-        isOpen={filterOpen}
-        initialFilters={filters}
-        gametypeMap={room.gametypeMap}
-        onCancel={() => setFilterOpen(false)}
-        onSubmit={handleFilterSubmit}
-      />
-      <PromptDialog
-        isOpen={pendingPasswordJoin !== null}
-        title="Password required"
-        label="Password"
-        submitLabel="Join"
-        onSubmit={handlePasswordSubmit}
-        onCancel={() => setPendingPasswordJoin(null)}
-      />
-      <AlertDialog
-        isOpen={joinError !== null}
-        title="Error"
-        message={joinError?.message ?? ''}
-        onDismiss={() => RoomsDispatch.clearJoinGameError()}
-      />
-    </Paper>
-  );
-};
-
-export default GameSelector;
diff --git a/webclient/src/containers/Room/GameSelector/GameSelectorToolbar.spec.tsx b/webclient/src/containers/Room/GameSelector/GameSelectorToolbar.spec.tsx
deleted file mode 100644
index e317dbc85..000000000
--- a/webclient/src/containers/Room/GameSelector/GameSelectorToolbar.spec.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { renderWithProviders } from '../../../__test-utils__';
-import GameSelectorToolbar, { GameSelectorToolbarProps } from './GameSelectorToolbar';
-
-function defaultProps(overrides: Partial<GameSelectorToolbarProps> = {}): GameSelectorToolbarProps {
-  return {
-    isFilterActive: false,
-    canCreate: true,
-    canJoin: true,
-    canSpectate: true,
-    isJudgeUser: false,
-    onFilter: vi.fn(),
-    onClearFilter: vi.fn(),
-    onCreate: vi.fn(),
-    onJoin: vi.fn(),
-    onSpectate: vi.fn(),
-    onJoinAsJudge: vi.fn(),
-    onSpectateAsJudge: vi.fn(),
-    ...overrides,
-  };
-}
-
-describe('GameSelectorToolbar', () => {
-  it('renders the five always-visible buttons', () => {
-    renderWithProviders(<GameSelectorToolbar {...defaultProps()} />);
-    expect(screen.getByRole('button', { name: /Filter games/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Clear filter/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^Create$/ })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^Join$/ })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Join as Spectator/i })).toBeInTheDocument();
-  });
-
-  it('hides the two judge buttons when isJudgeUser is false', () => {
-    renderWithProviders(<GameSelectorToolbar {...defaultProps({ isJudgeUser: false })} />);
-    expect(screen.queryByRole('button', { name: /Join as Judge$/i })).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /Join as Judge Spectator/i })).not.toBeInTheDocument();
-  });
-
-  it('shows the two judge buttons when isJudgeUser is true', () => {
-    renderWithProviders(<GameSelectorToolbar {...defaultProps({ isJudgeUser: true })} />);
-    expect(screen.getByRole('button', { name: /Join as Judge$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Join as Judge Spectator/i })).toBeInTheDocument();
-  });
-
-  it('disables Clear filter when no filter is active', () => {
-    renderWithProviders(<GameSelectorToolbar {...defaultProps({ isFilterActive: false })} />);
-    expect(screen.getByRole('button', { name: /Clear filter/i })).toBeDisabled();
-  });
-
-  it('enables Clear filter when a filter is active', () => {
-    renderWithProviders(<GameSelectorToolbar {...defaultProps({ isFilterActive: true })} />);
-    expect(screen.getByRole('button', { name: /Clear filter/i })).not.toBeDisabled();
-  });
-
-  it('disables Join when canJoin is false', () => {
-    renderWithProviders(<GameSelectorToolbar {...defaultProps({ canJoin: false })} />);
-    expect(screen.getByRole('button', { name: /^Join$/ })).toBeDisabled();
-  });
-
-  it('disables Join as Spectator when canSpectate is false', () => {
-    renderWithProviders(<GameSelectorToolbar {...defaultProps({ canSpectate: false })} />);
-    expect(screen.getByRole('button', { name: /Join as Spectator/i })).toBeDisabled();
-  });
-
-  it('judge buttons inherit canJoin / canSpectate gating', () => {
-    renderWithProviders(
-      <GameSelectorToolbar {...defaultProps({ isJudgeUser: true, canJoin: false, canSpectate: false })} />,
-    );
-    expect(screen.getByRole('button', { name: /Join as Judge$/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /Join as Judge Spectator/i })).toBeDisabled();
-  });
-
-  it('invokes the corresponding callback for each button', () => {
-    const props = defaultProps({ isJudgeUser: true, isFilterActive: true });
-    renderWithProviders(<GameSelectorToolbar {...props} />);
-    fireEvent.click(screen.getByRole('button', { name: /Filter games/i }));
-    fireEvent.click(screen.getByRole('button', { name: /Clear filter/i }));
-    fireEvent.click(screen.getByRole('button', { name: /^Create$/ }));
-    fireEvent.click(screen.getByRole('button', { name: /^Join$/ }));
-    fireEvent.click(screen.getByRole('button', { name: /Join as Spectator/i }));
-    fireEvent.click(screen.getByRole('button', { name: /Join as Judge$/i }));
-    fireEvent.click(screen.getByRole('button', { name: /Join as Judge Spectator/i }));
-    expect(props.onFilter).toHaveBeenCalledTimes(1);
-    expect(props.onClearFilter).toHaveBeenCalledTimes(1);
-    expect(props.onCreate).toHaveBeenCalledTimes(1);
-    expect(props.onJoin).toHaveBeenCalledTimes(1);
-    expect(props.onSpectate).toHaveBeenCalledTimes(1);
-    expect(props.onJoinAsJudge).toHaveBeenCalledTimes(1);
-    expect(props.onSpectateAsJudge).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/webclient/src/containers/Room/GameSelector/GameSelectorToolbar.tsx b/webclient/src/containers/Room/GameSelector/GameSelectorToolbar.tsx
deleted file mode 100644
index 7c844ce15..000000000
--- a/webclient/src/containers/Room/GameSelector/GameSelectorToolbar.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import Button from '@mui/material/Button';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import FilterListOffIcon from '@mui/icons-material/FilterListOff';
-
-export interface GameSelectorToolbarProps {
-  isFilterActive: boolean;
-  canCreate: boolean;
-  canJoin: boolean;
-  canSpectate: boolean;
-  isJudgeUser: boolean;
-  onFilter: () => void;
-  onClearFilter: () => void;
-  onCreate: () => void;
-  onJoin: () => void;
-  onSpectate: () => void;
-  onJoinAsJudge: () => void;
-  onSpectateAsJudge: () => void;
-}
-
-const GameSelectorToolbar = (props: GameSelectorToolbarProps) => {
-  const {
-    isFilterActive,
-    canCreate,
-    canJoin,
-    canSpectate,
-    isJudgeUser,
-    onFilter,
-    onClearFilter,
-    onCreate,
-    onJoin,
-    onSpectate,
-    onJoinAsJudge,
-    onSpectateAsJudge,
-  } = props;
-
-  return (
-    <div className="game-selector__toolbar">
-      <div className="game-selector__toolbar-left">
-        <Button
-          size="small"
-          variant={isFilterActive ? 'contained' : 'outlined'}
-          color="primary"
-          startIcon={<FilterListIcon />}
-          onClick={onFilter}
-        >
-          Filter games
-        </Button>
-        <Button
-          size="small"
-          variant="outlined"
-          startIcon={<FilterListOffIcon />}
-          onClick={onClearFilter}
-          disabled={!isFilterActive}
-        >
-          Clear filter
-        </Button>
-      </div>
-      <div className="game-selector__toolbar-right">
-        <Button size="small" variant="outlined" onClick={onCreate} disabled={!canCreate}>
-          Create
-        </Button>
-        <Button size="small" variant="outlined" onClick={onJoin} disabled={!canJoin}>
-          Join
-        </Button>
-        <Button size="small" variant="outlined" onClick={onSpectate} disabled={!canSpectate}>
-          Join as Spectator
-        </Button>
-        {isJudgeUser && (
-          <>
-            <Button size="small" variant="outlined" onClick={onJoinAsJudge} disabled={!canJoin}>
-              Join as Judge
-            </Button>
-            <Button
-              size="small"
-              variant="outlined"
-              onClick={onSpectateAsJudge}
-              disabled={!canSpectate}
-            >
-              Join as Judge Spectator
-            </Button>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default GameSelectorToolbar;
diff --git a/webclient/src/containers/Room/Games.css b/webclient/src/containers/Room/Games.css
new file mode 100644
index 000000000..623ab47f5
--- /dev/null
+++ b/webclient/src/containers/Room/Games.css
@@ -0,0 +1,30 @@
+.games {
+}
+
+.games-header,
+.game {
+  display: flex;
+  padding: 10px;
+  border-bottom: 1px solid black;
+}
+
+.games-header__cell {
+  max-width: 200px;
+}
+
+.games-header__label,
+.game__detail {
+  width: 10%;
+  flex-grow: 0;
+}
+
+.games-header__label.description,
+.game__detail.description {
+  width: 20%;
+  flex-grow: 1;
+}
+
+.games-header__label.creator,
+.game__detail.creator {
+  width: 20%;
+}
diff --git a/webclient/src/containers/Room/Games.tsx b/webclient/src/containers/Room/Games.tsx
new file mode 100644
index 000000000..578895633
--- /dev/null
+++ b/webclient/src/containers/Room/Games.tsx
@@ -0,0 +1,114 @@
+// eslint-disable-next-line
+import React from "react";
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Tooltip from '@mui/material/Tooltip';
+
+// import { RoomsService } from "AppShell/common/services";
+
+import { SortUtil, RoomsDispatch, RoomsSelectors } from '@app/store';
+import { UserDisplay } from '@app/components';
+import { useAppSelector } from '@app/store';
+
+import './Games.css';
+
+// @TODO run interval to update timeSinceCreated
+interface GamesProps {
+  room: any;
+}
+
+const Games = ({ room }: GamesProps) => {
+  const roomId = room.info.roomId;
+  const sortBy = useAppSelector(state => RoomsSelectors.getSortGamesBy(state));
+  const sortedGames = useAppSelector(state => RoomsSelectors.getSortedRoomGames(state, roomId));
+
+  const headerCells = [
+    { label: 'Age', field: 'info.startTime' },
+    { label: 'Description', field: 'info.description' },
+    { label: 'Creator', field: 'info.creatorInfo.name' },
+    { label: 'Type', field: 'gameType' },
+    { label: 'Restrictions' },
+    { label: 'Players' },
+    { label: 'Spectators', field: 'info.spectatorsCount' },
+  ];
+
+  const handleSort = (sortByField) => {
+    const { field, order } = SortUtil.toggleSortBy(sortByField, sortBy);
+    RoomsDispatch.sortGames(roomId, field, order);
+  };
+
+  const isUnavailableGame = ({ started, maxPlayers, playerCount }) =>
+    !started && playerCount < maxPlayers;
+
+  const isPasswordProtectedGame = ({ withPassword }) => !withPassword;
+
+  const isBuddiesOnlyGame = ({ onlyBuddies }) => !onlyBuddies;
+
+  const games = sortedGames.filter(game => (
+    isUnavailableGame(game.info) &&
+    isPasswordProtectedGame(game.info) &&
+    isBuddiesOnlyGame(game.info)
+  ));
+
+  return (
+    <div className="games">
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            { headerCells.map(({ label, field }) => {
+              const active = field === sortBy.field;
+              const order = sortBy.order.toLowerCase();
+              const sortDirection = active ? (order === 'asc' ? 'asc' : 'desc') : false;
+
+              return (
+                <TableCell sortDirection={sortDirection} key={label}>
+                  {!field ? label : (
+                    <TableSortLabel
+                      active={active}
+                      direction={order}
+                      onClick={() => handleSort(field)}
+                    >
+                      {label}
+                    </TableSortLabel>
+                  )}
+                </TableCell>
+              );
+            })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          { games.map((game) => {
+            const { info, gameType } = game;
+            const { description, gameId, creatorInfo, maxPlayers, playerCount, spectatorsCount, startTime } = info;
+            return (
+              <TableRow key={gameId}>
+                <TableCell className="games-header__cell single-line-ellipsis">{startTime}</TableCell>
+                <TableCell className="games-header__cell">
+                  <Tooltip title={description} placement="bottom-start" enterDelay={500}>
+                    <div className="single-line-ellipsis">
+                      {description}
+                    </div>
+                  </Tooltip>
+                </TableCell>
+                <TableCell className="games-header__cell">
+                  <UserDisplay user={ creatorInfo } />
+                </TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">{gameType}</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">?</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">{`${playerCount}/${maxPlayers}`}</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">{spectatorsCount}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default Games;
diff --git a/webclient/src/containers/Room/Messages.tsx b/webclient/src/containers/Room/Messages.tsx
index 764bb6aa7..88e727b53 100644
--- a/webclient/src/containers/Room/Messages.tsx
+++ b/webclient/src/containers/Room/Messages.tsx
@@ -1,17 +1,15 @@
+// eslint-disable-next-line
+import React from "react";
+
 import { Message } from '@app/components';
-import type { Enriched } from '@app/types';
 
 import './Messages.css';
 
-interface MessagesProps {
-  messages?: Enriched.Message[];
-}
-
-const Messages = ({ messages }: MessagesProps) => (
+const Messages = ({ messages }) => (
   <div className="messages">
     {
-      messages && messages.map((message, idx) => (
-        <div className="message-wrapper" key={`${message.timeReceived}-${idx}`}>
+      messages && messages.map((message) => (
+        <div className="message-wrapper" key={message.timeReceived}>
           <Message message={message} />
         </div>
       ))
diff --git a/webclient/src/containers/Room/OpenGames.css b/webclient/src/containers/Room/OpenGames.css
index 6300906cd..623ab47f5 100644
--- a/webclient/src/containers/Room/OpenGames.css
+++ b/webclient/src/containers/Room/OpenGames.css
@@ -1,7 +1,8 @@
 .games {
 }
 
-.games-header {
+.games-header,
+.game {
   display: flex;
   padding: 10px;
   border-bottom: 1px solid black;
@@ -27,7 +28,3 @@
 .game__detail.creator {
   width: 20%;
 }
-
-.games__row {
-  cursor: pointer;
-}
diff --git a/webclient/src/containers/Room/OpenGames.tsx b/webclient/src/containers/Room/OpenGames.tsx
index c82ae6a78..59e721aa1 100644
--- a/webclient/src/containers/Room/OpenGames.tsx
+++ b/webclient/src/containers/Room/OpenGames.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -6,58 +8,23 @@ import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
 
-import { UserDisplay } from '@app/components';
-import { Data, Enriched } from '@app/types';
+// import { RoomsService } from "AppShell/common/services";
 
-import { useOpenGames } from './useOpenGames';
+import { SortUtil, RoomsDispatch, RoomsSelectors } from '@app/store';
+import { UserDisplay } from '@app/components';
+import { useAppSelector } from '@app/store';
 
 import './OpenGames.css';
 
+// @TODO run interval to update timeSinceCreated
 interface OpenGamesProps {
-  room: Enriched.Room;
-  onActivateGame?: (gameId: number) => void;
+  room: any;
 }
 
-function formatRestrictions(info: Data.ServerInfo_Game): string {
-  const parts: string[] = [];
-  if (info.withPassword) {
-    parts.push('password');
-  }
-  if (info.onlyBuddies) {
-    parts.push('buddies only');
-  }
-  if (info.onlyRegistered) {
-    parts.push('reg. users only');
-  }
-  if (info.shareDecklistsOnLoad) {
-    parts.push('open decklists');
-  }
-  return parts.join(', ');
-}
-
-function formatSpectators(info: Data.ServerInfo_Game): string {
-  if (!info.spectatorsAllowed) {
-    return 'not allowed';
-  }
-  const flags: string[] = [];
-  if (info.spectatorsCanChat) {
-    flags.push('can chat');
-  }
-  if (info.spectatorsOmniscient) {
-    flags.push('see hands');
-  }
-  if (flags.length === 0) {
-    return String(info.spectatorsCount);
-  }
-  return `${info.spectatorsCount} (${flags.join(' & ')})`;
-}
-
-const OpenGames = ({ room, onActivateGame }: OpenGamesProps) => {
+const OpenGames = ({ room }: OpenGamesProps) => {
   const roomId = room.info.roomId;
-  const { sortBy, games, selectedGameId, handleSort, handleSelect, handleActivate } = useOpenGames({
-    roomId,
-    onActivateGame,
-  });
+  const sortBy = useAppSelector(state => RoomsSelectors.getSortGamesBy(state));
+  const sortedGames = useAppSelector(state => RoomsSelectors.getSortedRoomGames(state, roomId));
 
   const headerCells = [
     { label: 'Age', field: 'info.startTime' },
@@ -69,12 +36,30 @@ const OpenGames = ({ room, onActivateGame }: OpenGamesProps) => {
     { label: 'Spectators', field: 'info.spectatorsCount' },
   ];
 
+  const handleSort = (sortByField) => {
+    const { field, order } = SortUtil.toggleSortBy(sortByField, sortBy);
+    RoomsDispatch.sortGames(roomId, field, order);
+  };
+
+  const isAvailable = ({ started, maxPlayers, playerCount }) =>
+    !started && playerCount < maxPlayers;
+
+  const isOpen = ({ withPassword }) => !withPassword;
+
+  const isPublic = ({ onlyBuddies }) => !onlyBuddies;
+
+  const games = sortedGames.filter(game => (
+    isAvailable(game.info) &&
+    isOpen(game.info) &&
+    isPublic(game.info)
+  ));
+
   return (
     <div className="games">
       <Table size="small">
         <TableHead>
           <TableRow>
-            {headerCells.map(({ label, field }) => {
+            { headerCells.map(({ label, field }) => {
               const active = field === sortBy.field;
               const order = sortBy.order.toLowerCase();
               const sortDirection = active ? (order === 'asc' ? 'asc' : 'desc') : false;
@@ -96,21 +81,11 @@ const OpenGames = ({ room, onActivateGame }: OpenGamesProps) => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {games.map((game: Enriched.Game) => {
+          { games.map((game) => {
             const { info, gameType } = game;
-            const { description, gameId, creatorInfo, maxPlayers, playerCount, startTime } = info;
-            const isSelected = gameId === selectedGameId;
-            const restrictions = formatRestrictions(info);
-            const spectators = formatSpectators(info);
+            const { description, gameId, creatorInfo, maxPlayers, playerCount, spectatorsCount, startTime } = info;
             return (
-              <TableRow
-                key={gameId}
-                hover
-                selected={isSelected}
-                onClick={() => handleSelect(gameId)}
-                onDoubleClick={() => handleActivate(gameId)}
-                className={isSelected ? 'games__row games__row--selected' : 'games__row'}
-              >
+              <TableRow key={gameId}>
                 <TableCell className="games-header__cell single-line-ellipsis">{startTime}</TableCell>
                 <TableCell className="games-header__cell">
                   <Tooltip title={description} placement="bottom-start" enterDelay={500}>
@@ -120,12 +95,12 @@ const OpenGames = ({ room, onActivateGame }: OpenGamesProps) => {
                   </Tooltip>
                 </TableCell>
                 <TableCell className="games-header__cell">
-                  {creatorInfo ? <UserDisplay user={creatorInfo} /> : null}
+                  <UserDisplay user={ creatorInfo } />
                 </TableCell>
                 <TableCell className="games-header__cell single-line-ellipsis">{gameType}</TableCell>
-                <TableCell className="games-header__cell single-line-ellipsis">{restrictions}</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">?</TableCell>
                 <TableCell className="games-header__cell single-line-ellipsis">{`${playerCount}/${maxPlayers}`}</TableCell>
-                <TableCell className="games-header__cell single-line-ellipsis">{spectators}</TableCell>
+                <TableCell className="games-header__cell single-line-ellipsis">{spectatorsCount}</TableCell>
               </TableRow>
             );
           })}
diff --git a/webclient/src/containers/Room/Room.tsx b/webclient/src/containers/Room/Room.tsx
index 92750d441..2da6b2871 100644
--- a/webclient/src/containers/Room/Room.tsx
+++ b/webclient/src/containers/Room/Room.tsx
@@ -1,23 +1,51 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useParams, generatePath } from 'react-router-dom';
+
 import ListItemButton from '@mui/material/ListItemButton';
 import Paper from '@mui/material/Paper';
 
 import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, AuthGuard } from '@app/components';
+import { useWebClient } from '@app/hooks';
+import { RoomsSelectors } from '@app/store';
+import { useAppSelector } from '@app/store';
+import { App } from '@app/types';
 import Layout from '../Layout/Layout';
 
-import GameSelector from './GameSelector/GameSelector';
+import OpenGames from './OpenGames';
 import Messages from './Messages';
 import SayMessage from './SayMessage';
-import { useRoom } from './useRoom';
 
 import './Room.css';
 
 const Room = () => {
-  const { room, roomMessages, users, handleRoomSay } = useRoom();
+  const joined = useAppSelector(state => RoomsSelectors.getJoinedRooms(state));
+  const rooms = useAppSelector(state => RoomsSelectors.getRooms(state));
+  const messages = useAppSelector(state => RoomsSelectors.getMessages(state));
+  const navigate = useNavigate();
+  const params = useParams();
+
+  const roomId = parseInt(params.roomId, 10);
+  const room = rooms[roomId];
+  const roomMessages = messages[roomId];
+  const users = useAppSelector(state => RoomsSelectors.getSortedRoomUsers(state, roomId));
+  const webClient = useWebClient();
+
+  useEffect(() => {
+    if (!joined.find(r => r.info.roomId === roomId)) {
+      navigate(generatePath(App.RouteEnum.SERVER));
+    }
+  }, [joined]);
 
   if (!room) {
     return null;
   }
 
+  const handleRoomSay = ({ message }) => {
+    if (message) {
+      webClient.request.rooms.roomSay(roomId, message);
+    }
+  }
+
   return (
     <Layout className="room-view">
       <AuthGuard />
@@ -27,9 +55,9 @@ const Room = () => {
           fixedHeight
 
           top={(
-            <div className="room-view__games">
-              <GameSelector room={room} />
-            </div>
+            <Paper className="room-view__games overflow-scroll">
+              <OpenGames room={room} />
+            </Paper>
           )}
 
           bottom={(
@@ -48,15 +76,15 @@ const Room = () => {
           side={(
             <Paper className="room-view__side overflow-scroll">
               <div className="room-view__side-label">
-                Users in this room: {users.length}
+                  Users in this room: {users.length}
               </div>
               <VirtualList
                 className="room-view__side-list"
-                items={users.map(user => (
+                items={ users.map(user => (
                   <ListItemButton key={user.name} className="room-view__side-list__item">
                     <UserDisplay user={user} />
                   </ListItemButton>
-                ))}
+                )) }
               />
             </Paper>
           )}
@@ -64,6 +92,6 @@ const Room = () => {
       </div>
     </Layout>
   );
-};
+}
 
 export default Room;
diff --git a/webclient/src/containers/Room/SayMessage.tsx b/webclient/src/containers/Room/SayMessage.tsx
index 52f416e1b..589ebdacc 100644
--- a/webclient/src/containers/Room/SayMessage.tsx
+++ b/webclient/src/containers/Room/SayMessage.tsx
@@ -1,17 +1,14 @@
-import { Form } from 'react-final-form';
+import React from 'react';
+import { Form } from 'react-final-form'
 
 import { InputAction } from '@app/components';
 
-interface SayMessageProps {
-  onSubmit: (args: { message: string }) => void;
-}
-
-const SayMessage = ({ onSubmit }: SayMessageProps) => (
+const SayMessage = ({ onSubmit }) => (
   <Form onSubmit={onSubmit}>
     {({ handleSubmit, form }) => (
       <form onSubmit={e => {
-        handleSubmit(e);
-        form.restart();
+        handleSubmit(e)
+        form.restart()
       }}>
         <InputAction action="Send" label="Chat" name="message" />
       </form>
diff --git a/webclient/src/containers/Room/useOpenGames.ts b/webclient/src/containers/Room/useOpenGames.ts
deleted file mode 100644
index 17f1136bc..000000000
--- a/webclient/src/containers/Room/useOpenGames.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { SortUtil, RoomsDispatch, RoomsSelectors, useAppSelector } from '@app/store';
-import { App, Enriched } from '@app/types';
-
-export interface OpenGames {
-  sortBy: { field: string; order: string };
-  games: Enriched.Game[];
-  selectedGameId: number | undefined;
-  handleSort: (sortByField: string) => void;
-  handleSelect: (gameId: number) => void;
-  handleActivate: (gameId: number) => void;
-}
-
-export interface UseOpenGamesArgs {
-  roomId: number;
-  onActivateGame?: (gameId: number) => void;
-}
-
-export function useOpenGames({ roomId, onActivateGame }: UseOpenGamesArgs): OpenGames {
-  const sortBy = useAppSelector((state) => RoomsSelectors.getSortGamesBy(state));
-  const games = useAppSelector((state) => RoomsSelectors.getFilteredRoomGames(state, roomId));
-  const selectedGameId = useAppSelector((state) => RoomsSelectors.getSelectedGameId(state, roomId));
-
-  const handleSort = (sortByField: string) => {
-    const { field, order } = SortUtil.toggleSortBy(sortByField as App.GameSortField, sortBy);
-    RoomsDispatch.sortGames(roomId, field, order);
-  };
-
-  const handleSelect = (gameId: number) => {
-    RoomsDispatch.selectGame(roomId, gameId);
-  };
-
-  const handleActivate = (gameId: number) => {
-    RoomsDispatch.selectGame(roomId, gameId);
-    onActivateGame?.(gameId);
-  };
-
-  return { sortBy, games, selectedGameId, handleSort, handleSelect, handleActivate };
-}
diff --git a/webclient/src/containers/Room/useRoom.ts b/webclient/src/containers/Room/useRoom.ts
deleted file mode 100644
index c43a29246..000000000
--- a/webclient/src/containers/Room/useRoom.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useNavigate, useParams, generatePath } from 'react-router-dom';
-
-import { useWebClient } from '@app/hooks';
-import { RoomsSelectors, useAppSelector } from '@app/store';
-import { App, Data, Enriched } from '@app/types';
-
-export interface Room {
-  roomId: number;
-  room: Enriched.Room | undefined;
-  roomMessages: Enriched.Message[] | undefined;
-  users: Data.ServerInfo_User[];
-  handleRoomSay: (args: { message: string }) => void;
-}
-
-export function useRoom(): Room {
-  const joined = useAppSelector((state) => RoomsSelectors.getJoinedRooms(state));
-  const rooms = useAppSelector((state) => RoomsSelectors.getRooms(state));
-  const messages = useAppSelector((state) => RoomsSelectors.getMessages(state));
-  const navigate = useNavigate();
-  const params = useParams();
-
-  const parsed = params.roomId != null ? parseInt(params.roomId, 10) : NaN;
-  const roomId = Number.isNaN(parsed) ? -1 : parsed;
-  const room = roomId === -1 ? undefined : rooms[roomId];
-  const roomMessages = roomId === -1 ? undefined : messages[roomId];
-  const users = useAppSelector((state) => RoomsSelectors.getSortedRoomUsers(state, roomId));
-  const webClient = useWebClient();
-
-  useEffect(() => {
-    if (roomId === -1 || !joined.find((r) => r.info.roomId === roomId)) {
-      navigate(generatePath(App.RouteEnum.SERVER));
-    }
-  }, [joined, roomId, navigate]);
-
-  const handleRoomSay = useCallback(({ message }: { message: string }) => {
-    if (message) {
-      webClient.request.rooms.roomSay(roomId, message);
-    }
-  }, [webClient, roomId]);
-
-  return { roomId, room, roomMessages, users, handleRoomSay };
-}
diff --git a/webclient/src/containers/Server/Rooms.css b/webclient/src/containers/Server/Rooms.css
index 0cc990fca..bfcdc82cf 100644
--- a/webclient/src/containers/Server/Rooms.css
+++ b/webclient/src/containers/Server/Rooms.css
@@ -1,3 +1,6 @@
+.rooms {
+}
+
 .rooms-header,
 .room {
   display: flex;
diff --git a/webclient/src/containers/Server/Rooms.tsx b/webclient/src/containers/Server/Rooms.tsx
index 98915599c..1eecce729 100644
--- a/webclient/src/containers/Server/Rooms.tsx
+++ b/webclient/src/containers/Server/Rooms.tsx
@@ -1,4 +1,5 @@
-import { useMemo } from 'react';
+// eslint-disable-next-line
+import React from "react";
 import { generatePath, useNavigate } from 'react-router-dom';
 
 import Button from '@mui/material/Button';
@@ -9,31 +10,21 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 
 import { useWebClient } from '@app/hooks';
-import { App, Enriched } from '@app/types';
+import { App } from '@app/types';
 
 import './Rooms.css';
 
-interface RoomsProps {
-  rooms: Record<number, Enriched.Room>;
-  joinedRooms: Enriched.Room[];
-}
-
-const Rooms = ({ rooms, joinedRooms }: RoomsProps) => {
+const Rooms = ({ rooms, joinedRooms }) => {
   const navigate = useNavigate();
   const webClient = useWebClient();
 
-  const joinedRoomIds = useMemo(
-    () => new Set(joinedRooms.map((room) => room.info.roomId)),
-    [joinedRooms],
-  );
-
-  const onClick = (roomId: number) => {
-    if (joinedRoomIds.has(roomId)) {
-      navigate(generatePath(App.RouteEnum.ROOM, { roomId: String(roomId) }));
+  function onClick(roomId) {
+    if (joinedRooms.find(room => room.info.roomId === roomId)) {
+      navigate(generatePath(App.RouteEnum.ROOM, { roomId }));
     } else {
       webClient.request.rooms.joinRoom(roomId);
     }
-  };
+  }
 
   return (
     <div className="rooms">
@@ -49,7 +40,7 @@ const Rooms = ({ rooms, joinedRooms }: RoomsProps) => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {Object.values(rooms).map((room) => {
+          { Object.values(rooms).map((room) => {
             const { description, gameCount, name, permissionlevel, playerCount, roomId } = room.info;
             return (
               <TableRow key={roomId}>
diff --git a/webclient/src/containers/Server/Server.tsx b/webclient/src/containers/Server/Server.tsx
index 3eba3aa83..1620138fc 100644
--- a/webclient/src/containers/Server/Server.tsx
+++ b/webclient/src/containers/Server/Server.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import React from 'react';
 import { generatePath, useNavigate } from 'react-router-dom';
 
 import ListItemButton from '@mui/material/ListItemButton';
@@ -6,8 +6,9 @@ import Paper from '@mui/material/Paper';
 
 import { AuthGuard, ThreePaneLayout, UserDisplay, VirtualList } from '@app/components';
 import { useReduxEffect } from '@app/hooks';
-import { RoomsSelectors, RoomsTypes, ServerSelectors, useAppSelector } from '@app/store';
-import { App, Data } from '@app/types';
+import { RoomsSelectors, RoomsTypes, ServerSelectors } from '@app/store';
+import { App } from '@app/types';
+import { useAppSelector } from '@app/store';
 import Rooms from './Rooms';
 import Layout from '../Layout/Layout';
 
@@ -20,20 +21,11 @@ const Server = () => {
   const users = useAppSelector(state => ServerSelectors.getSortedUsers(state));
   const navigate = useNavigate();
 
-  useReduxEffect<{ roomInfo: Data.ServerInfo_Room }>((action) => {
+  useReduxEffect((action: any) => {
     const roomId = action.payload.roomInfo.roomId.toString();
     navigate(generatePath(App.RouteEnum.ROOM, { roomId }));
   }, RoomsTypes.JOIN_ROOM, []);
 
-  const userItems = useMemo(
-    () => users.map((user) => (
-      <ListItemButton key={user.name} dense>
-        <UserDisplay user={user} />
-      </ListItemButton>
-    )),
-    [users],
-  );
-
   return (
     <Layout className="server-rooms">
       <AuthGuard />
@@ -57,7 +49,13 @@ const Server = () => {
             <div className="server-rooms__side-label">
               Users connected to server: {users.length}
             </div>
-            <VirtualList items={userItems} />
+            <VirtualList
+              items={ users.map(user => (
+                <ListItemButton key={user.name} dense>
+                  <UserDisplay user={user} />
+                </ListItemButton>
+              )) }
+            />
           </Paper>
         )}
       />
diff --git a/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.css b/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.css
index afa94e3f9..5175ab845 100644
--- a/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.css
+++ b/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.css
@@ -1,3 +1,13 @@
-.content {
-  margin-bottom: 20px;
-}
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.MuiDialogTitle-root.dialog-title {
+  padding-bottom: 0;
+}
+
+.content {
+  margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx b/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx
index 62e49e094..476a399ec 100644
--- a/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx
+++ b/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx
@@ -1,35 +1,43 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
-import type { AccountActivationFormValues } from '@app/forms';
 import { AccountActivationForm } from '@app/forms';
 
-import AuthDialogShell from '../AuthDialogShell/AuthDialogShell';
-
 import './AccountActivationDialog.css';
 
-interface AccountActivationDialogProps {
-  isOpen: boolean;
-  handleClose?: () => void;
-  onSubmit: (values: AccountActivationFormValues) => void;
-}
-
-const AccountActivationDialog = ({ handleClose, isOpen, onSubmit }: AccountActivationDialogProps) => {
+const AccountActivationDialog = ({ handleClose, isOpen, onSubmit }: any) => {
   const { t } = useTranslation();
 
-  return (
-    <AuthDialogShell
-      isOpen={isOpen}
-      handleClose={handleClose}
-      title={t('AccountActivationDialog.title')}
-    >
-      <div className="content">
-        <Typography variant='subtitle1'>{ t('AccountActivationDialog.subtitle1') }</Typography>
-        <Typography variant='subtitle1'>{ t('AccountActivationDialog.subtitle2') }</Typography>
-      </div>
+  const handleOnClose = () => {
+    handleClose();
+  }
 
-      <AccountActivationForm onSubmit={onSubmit} />
-    </AuthDialogShell>
+  return (
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle className="dialog-title">
+        <Typography variant="h6">{ t('AccountActivationDialog.title') }</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose} size="large">
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <div className="content">
+          <Typography variant='subtitle1'>{ t('AccountActivationDialog.subtitle1') }</Typography>
+          <Typography variant='subtitle1'>{ t('AccountActivationDialog.subtitle2') }</Typography>
+        </div>
+
+        <AccountActivationForm onSubmit={onSubmit}></AccountActivationForm>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/webclient/src/dialogs/AlertDialog/AlertDialog.css b/webclient/src/dialogs/AlertDialog/AlertDialog.css
deleted file mode 100644
index 96f2b704e..000000000
--- a/webclient/src/dialogs/AlertDialog/AlertDialog.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.alert-dialog__body {
-  min-width: 320px;
-}
diff --git a/webclient/src/dialogs/AlertDialog/AlertDialog.spec.tsx b/webclient/src/dialogs/AlertDialog/AlertDialog.spec.tsx
deleted file mode 100644
index d5a98f05d..000000000
--- a/webclient/src/dialogs/AlertDialog/AlertDialog.spec.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { renderWithProviders } from '../../__test-utils__';
-import AlertDialog from './AlertDialog';
-
-describe('AlertDialog', () => {
-  it('renders the title, message, and default OK button', () => {
-    renderWithProviders(
-      <AlertDialog
-        isOpen
-        title="Error"
-        message="The game is already full."
-        onDismiss={() => {}}
-      />,
-    );
-
-    expect(screen.getByText('Error')).toBeInTheDocument();
-    expect(screen.getByText('The game is already full.')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^ok$/i })).toBeInTheDocument();
-  });
-
-  it('uses a custom buttonLabel when provided', () => {
-    renderWithProviders(
-      <AlertDialog
-        isOpen
-        title="T"
-        message="M"
-        buttonLabel="Dismiss"
-        onDismiss={() => {}}
-      />,
-    );
-    expect(screen.getByRole('button', { name: /dismiss/i })).toBeInTheDocument();
-  });
-
-  it('fires onDismiss when the OK button is clicked', () => {
-    const onDismiss = vi.fn();
-    renderWithProviders(
-      <AlertDialog
-        isOpen
-        title="T"
-        message="M"
-        onDismiss={onDismiss}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /^ok$/i }));
-    expect(onDismiss).toHaveBeenCalled();
-  });
-
-  it('fires onDismiss on Escape key', () => {
-    const onDismiss = vi.fn();
-    renderWithProviders(
-      <AlertDialog
-        isOpen
-        title="T"
-        message="M"
-        onDismiss={onDismiss}
-      />,
-    );
-
-    fireEvent.keyDown(screen.getByRole('dialog'), { key: 'Escape', code: 'Escape' });
-    expect(onDismiss).toHaveBeenCalled();
-  });
-
-  it('does not render when closed', () => {
-    renderWithProviders(
-      <AlertDialog
-        isOpen={false}
-        title="T"
-        message="M"
-        onDismiss={() => {}}
-      />,
-    );
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-});
diff --git a/webclient/src/dialogs/AlertDialog/AlertDialog.tsx b/webclient/src/dialogs/AlertDialog/AlertDialog.tsx
deleted file mode 100644
index a0bdf0e0c..000000000
--- a/webclient/src/dialogs/AlertDialog/AlertDialog.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-
-import './AlertDialog.css';
-
-const PREFIX = 'AlertDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export type AlertDialogSeverity = 'error' | 'info';
-
-export interface AlertDialogProps {
-  isOpen: boolean;
-  title: string;
-  message: string;
-  buttonLabel?: string;
-  severity?: AlertDialogSeverity;
-  onDismiss: () => void;
-}
-
-/**
- * Single-button modal alert. Mirrors desktop's QMessageBox::critical pattern
- * (see cockatrice/src/interface/widgets/server/game_selector.cpp:234-260 for
- * the join-game error dialogs this was originally built for).
- */
-function AlertDialog({
-  isOpen,
-  title,
-  message,
-  buttonLabel = 'OK',
-  severity = 'error',
-  onDismiss,
-}: AlertDialogProps) {
-  return (
-    <StyledDialog
-      className={'AlertDialog ' + classes.root}
-      open={isOpen}
-      onClose={onDismiss}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">{title}</Typography>
-        </div>
-      </DialogTitle>
-      <DialogContent className="dialog-content alert-dialog__body">
-        <DialogContentText>{message}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          type="button"
-          variant="contained"
-          color={severity === 'error' ? 'error' : 'primary'}
-          onClick={onDismiss}
-          autoFocus
-        >
-          {buttonLabel}
-        </Button>
-      </DialogActions>
-    </StyledDialog>
-  );
-}
-
-export default AlertDialog;
diff --git a/webclient/src/dialogs/AuthDialogShell/AuthDialogShell.tsx b/webclient/src/dialogs/AuthDialogShell/AuthDialogShell.tsx
deleted file mode 100644
index 44d2db4da..000000000
--- a/webclient/src/dialogs/AuthDialogShell/AuthDialogShell.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-import Dialog, { DialogProps } from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-
-import './AuthDialogShell.css';
-
-export interface AuthDialogShellProps {
-  isOpen: boolean;
-  handleClose?: () => void;
-  title: string;
-  children: ReactNode;
-  className?: string;
-  contentClassName?: string;
-  maxWidth?: DialogProps['maxWidth'];
-}
-
-const AuthDialogShell = ({
-  isOpen,
-  handleClose,
-  title,
-  children,
-  className,
-  contentClassName,
-  maxWidth,
-}: AuthDialogShellProps) => {
-  const closeGuarded = handleClose ? () => handleClose() : undefined;
-
-  return (
-    <Dialog
-      className={className}
-      onClose={closeGuarded}
-      open={isOpen}
-      maxWidth={maxWidth}
-    >
-      <DialogTitle className="dialog-title">
-        <Typography variant="h6">{title}</Typography>
-
-        {closeGuarded ? (
-          <IconButton onClick={closeGuarded} size="large">
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <DialogContent className={contentClassName}>
-        {children}
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default AuthDialogShell;
diff --git a/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx b/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx
index e887f8169..a5fc1da90 100644
--- a/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx
+++ b/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -9,23 +10,24 @@ import { CardImportForm } from '@app/forms';
 
 import './CardImportDialog.css';
 
-export interface CardImportDialogProps {
-  isOpen: boolean;
-  handleClose: () => void;
-}
+const CardImportDialog = ({ handleClose, isOpen }: any) => {
+  const handleOnClose = () => {
+    handleClose();
+  }
 
-const CardImportDialog = ({ handleClose, isOpen }: CardImportDialogProps) => {
   return (
-    <Dialog onClose={handleClose} open={isOpen}>
+    <Dialog onClose={handleOnClose} open={isOpen}>
       <DialogTitle className="dialog-title">
         <Typography variant="h2">Import Cards</Typography>
 
-        <IconButton onClick={handleClose} size="large">
-          <CloseIcon />
-        </IconButton>
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose} size="large">
+            <CloseIcon />
+          </IconButton>
+        ) : null}
       </DialogTitle>
       <DialogContent>
-        <CardImportForm onSubmit={handleClose} />
+        <CardImportForm onSubmit={handleOnClose}></CardImportForm>
       </DialogContent>
     </Dialog>
   );
diff --git a/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.css b/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.css
deleted file mode 100644
index a1de822cb..000000000
--- a/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.confirm-dialog__body {
-  min-width: 320px;
-}
diff --git a/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.spec.tsx b/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.spec.tsx
deleted file mode 100644
index 4b9587750..000000000
--- a/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.spec.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { renderWithProviders } from '../../__test-utils__';
-import ConfirmDialog from './ConfirmDialog';
-
-describe('ConfirmDialog', () => {
-  it('renders the title, message, and default confirm/cancel labels', () => {
-    renderWithProviders(
-      <ConfirmDialog
-        isOpen
-        title="Concede this game?"
-        message="This can't be undone except by unconcede."
-        onConfirm={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    expect(screen.getByText('Concede this game?')).toBeInTheDocument();
-    expect(screen.getByText(/can't be undone/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-  });
-
-  it('fires onConfirm when the confirm button is clicked', () => {
-    const onConfirm = vi.fn();
-    renderWithProviders(
-      <ConfirmDialog
-        isOpen
-        title="T"
-        message="M"
-        confirmLabel="Concede"
-        onConfirm={onConfirm}
-        onCancel={() => {}}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /concede/i }));
-    expect(onConfirm).toHaveBeenCalled();
-  });
-
-  it('fires onCancel when the cancel button is clicked', () => {
-    const onCancel = vi.fn();
-    renderWithProviders(
-      <ConfirmDialog
-        isOpen
-        title="T"
-        message="M"
-        onConfirm={() => {}}
-        onCancel={onCancel}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-    expect(onCancel).toHaveBeenCalled();
-  });
-
-  it('does not render when closed', () => {
-    renderWithProviders(
-      <ConfirmDialog
-        isOpen={false}
-        title="T"
-        message="M"
-        onConfirm={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-});
diff --git a/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.tsx b/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.tsx
deleted file mode 100644
index 0c3cc5735..000000000
--- a/webclient/src/dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-
-import './ConfirmDialog.css';
-
-const PREFIX = 'ConfirmDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface ConfirmDialogProps {
-  isOpen: boolean;
-  title: string;
-  message: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  /** Marks the confirm button as destructive (red). */
-  destructive?: boolean;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-/**
- * Generic confirm-before-action dialog. Mirrors desktop's QMessageBox
- * question pattern used for destructive actions (concede, kick, etc.
- * see cockatrice/src/interface/widgets/tabs/tab_game.cpp:487-496).
- */
-function ConfirmDialog({
-  isOpen,
-  title,
-  message,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  destructive = false,
-  onConfirm,
-  onCancel,
-}: ConfirmDialogProps) {
-  return (
-    <StyledDialog
-      className={'ConfirmDialog ' + classes.root}
-      open={isOpen}
-      onClose={onCancel}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">{title}</Typography>
-        </div>
-      </DialogTitle>
-      <DialogContent className="dialog-content confirm-dialog__body">
-        <DialogContentText>{message}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button type="button" onClick={onCancel}>{cancelLabel}</Button>
-        <Button
-          type="button"
-          variant="contained"
-          color={destructive ? 'error' : 'primary'}
-          onClick={onConfirm}
-          autoFocus
-        >
-          {confirmLabel}
-        </Button>
-      </DialogActions>
-    </StyledDialog>
-  );
-}
-
-export default ConfirmDialog;
diff --git a/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.css b/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.css
deleted file mode 100644
index 5f7286f46..000000000
--- a/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.CreateCounterDialog .MuiDialog-paper {
-  width: 400px;
-  max-width: 400px;
-}
-
-.create-counter-dialog__swatches {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 14px;
-}
-
-.create-counter-dialog__swatch {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  border: 2px solid #c4c9d1;
-  cursor: pointer;
-  padding: 0;
-}
-
-.create-counter-dialog__swatch:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(90, 120, 200, 0.35);
-}
-
-.create-counter-dialog__swatch--selected {
-  border-color: #2f4a8a;
-  box-shadow: 0 0 0 2px #8ab0ff;
-}
diff --git a/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.spec.tsx b/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.spec.tsx
deleted file mode 100644
index 38e0e42ed..000000000
--- a/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.spec.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import CreateCounterDialog from './CreateCounterDialog';
-
-describe('CreateCounterDialog', () => {
-  it('does not render when closed', () => {
-    render(
-      <CreateCounterDialog isOpen={false} onSubmit={() => {}} onCancel={() => {}} />,
-    );
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-
-  it('renders the name input and 8 color swatches', () => {
-    render(<CreateCounterDialog isOpen onSubmit={() => {}} onCancel={() => {}} />);
-
-    expect(screen.getByLabelText('Counter name')).toBeInTheDocument();
-    expect(screen.getAllByRole('radio')).toHaveLength(8);
-  });
-
-  it('pre-selects the first swatch', () => {
-    render(<CreateCounterDialog isOpen onSubmit={() => {}} onCancel={() => {}} />);
-
-    const radios = screen.getAllByRole('radio');
-    expect(radios[0]).toHaveAttribute('aria-checked', 'true');
-    radios.slice(1).forEach((r) => expect(r).toHaveAttribute('aria-checked', 'false'));
-  });
-
-  it('changes selection when a different swatch is clicked', () => {
-    render(<CreateCounterDialog isOpen onSubmit={() => {}} onCancel={() => {}} />);
-
-    const red = screen.getByLabelText('Red');
-    fireEvent.click(red);
-    expect(red).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('requires a non-empty name', () => {
-    const onSubmit = vi.fn();
-    render(<CreateCounterDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />);
-
-    fireEvent.click(screen.getByRole('button', { name: /^create$/i }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(screen.getByText(/name is required/i)).toBeInTheDocument();
-  });
-
-  it('dispatches onSubmit with the trimmed name and selected color', () => {
-    const onSubmit = vi.fn();
-    render(<CreateCounterDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />);
-
-    fireEvent.change(screen.getByLabelText('Counter name'), {
-      target: { value: '  Poison  ' },
-    });
-    fireEvent.click(screen.getByLabelText('Green'));
-    fireEvent.click(screen.getByRole('button', { name: /^create$/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith({
-      name: 'Poison',
-      color: { r: 61, g: 162, b: 107, a: 255 },
-    });
-  });
-
-  it('resets state when the dialog reopens', () => {
-    const { rerender } = render(
-      <CreateCounterDialog isOpen onSubmit={() => {}} onCancel={() => {}} />,
-    );
-
-    fireEvent.change(screen.getByLabelText('Counter name'), { target: { value: 'stale' } });
-    fireEvent.click(screen.getByLabelText('Red'));
-
-    rerender(<CreateCounterDialog isOpen={false} onSubmit={() => {}} onCancel={() => {}} />);
-    rerender(<CreateCounterDialog isOpen onSubmit={() => {}} onCancel={() => {}} />);
-
-    expect((screen.getByLabelText('Counter name') as HTMLInputElement).value).toBe('');
-    expect(screen.getAllByRole('radio')[0]).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('dispatches onCancel on Cancel', () => {
-    const onCancel = vi.fn();
-    render(<CreateCounterDialog isOpen onSubmit={() => {}} onCancel={onCancel} />);
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-    expect(onCancel).toHaveBeenCalled();
-  });
-});
diff --git a/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.tsx b/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.tsx
deleted file mode 100644
index 09f0ffede..000000000
--- a/webclient/src/dialogs/CreateCounterDialog/CreateCounterDialog.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-
-import { App } from '@app/types';
-import { cx } from '@app/utils';
-
-import { useCreateCounterDialog } from './useCreateCounterDialog';
-
-import './CreateCounterDialog.css';
-
-const PREFIX = 'CreateCounterDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface CounterColor {
-  r: number;
-  g: number;
-  b: number;
-  a: number;
-}
-
-export interface CreateCounterDialogProps {
-  isOpen: boolean;
-  onSubmit: (args: { name: string; color: CounterColor }) => void;
-  onCancel: () => void;
-}
-
-interface Swatch {
-  label: string;
-  color: CounterColor;
-  css: string;
-}
-
-const SWATCHES: ReadonlyArray<Swatch> = [
-  { label: 'White', color: { r: 249, g: 248, b: 217, a: 255 }, css: '#f9f8d9' },
-  { label: 'Blue', color: App.ArrowColor.BLUE, css: '#89b8e0' },
-  { label: 'Black', color: { r: 60, g: 60, b: 60, a: 255 }, css: '#3c3c3c' },
-  { label: 'Red', color: App.ArrowColor.RED, css: '#e04b3b' },
-  { label: 'Green', color: App.ArrowColor.GREEN, css: '#3da26b' },
-  { label: 'Yellow', color: App.ArrowColor.YELLOW, css: '#f0c83c' },
-  { label: 'Purple', color: { r: 148, g: 90, b: 200, a: 255 }, css: '#945ac8' },
-  { label: 'Gray', color: { r: 160, g: 160, b: 168, a: 255 }, css: '#a0a0a8' },
-];
-
-function CreateCounterDialog({ isOpen, onSubmit, onCancel }: CreateCounterDialogProps) {
-  const { name, selectedIdx, error, handleNameChange, setSelectedIdx, handleSubmit } =
-    useCreateCounterDialog({ isOpen, swatches: SWATCHES, onSubmit });
-
-  return (
-    <StyledDialog
-      className={'CreateCounterDialog ' + classes.root}
-      open={isOpen}
-      onClose={onCancel}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">New counter</Typography>
-        </div>
-      </DialogTitle>
-      <form onSubmit={handleSubmit}>
-        <DialogContent className="dialog-content">
-          <TextField
-            autoFocus
-            fullWidth
-            variant="outlined"
-            size="small"
-            label="Counter name"
-            value={name}
-            onChange={(e) => handleNameChange(e.target.value)}
-            error={error != null}
-            helperText={error ?? ''}
-            slotProps={{ htmlInput: { 'aria-label': 'Counter name' } }}
-          />
-          <div
-            className="create-counter-dialog__swatches"
-            role="radiogroup"
-            aria-label="Counter color"
-            onKeyDown={(e) => {
-              if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                setSelectedIdx((selectedIdx + 1) % SWATCHES.length);
-              } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-                e.preventDefault();
-                setSelectedIdx((selectedIdx - 1 + SWATCHES.length) % SWATCHES.length);
-              }
-            }}
-          >
-            {SWATCHES.map((s, idx) => (
-              <button
-                key={s.label}
-                type="button"
-                role="radio"
-                aria-checked={idx === selectedIdx}
-                aria-label={s.label}
-                tabIndex={idx === selectedIdx ? 0 : -1}
-                className={cx('create-counter-dialog__swatch', {
-                  'create-counter-dialog__swatch--selected': idx === selectedIdx,
-                })}
-                style={{ background: s.css }}
-                onClick={() => setSelectedIdx(idx)}
-              />
-            ))}
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button type="button" onClick={onCancel}>Cancel</Button>
-          <Button type="submit" variant="contained" color="primary">Create</Button>
-        </DialogActions>
-      </form>
-    </StyledDialog>
-  );
-}
-
-export default CreateCounterDialog;
diff --git a/webclient/src/dialogs/CreateCounterDialog/useCreateCounterDialog.ts b/webclient/src/dialogs/CreateCounterDialog/useCreateCounterDialog.ts
deleted file mode 100644
index 3c783dd56..000000000
--- a/webclient/src/dialogs/CreateCounterDialog/useCreateCounterDialog.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { CounterColor } from './CreateCounterDialog';
-
-export interface CreateCounterDialogState {
-  name: string;
-  selectedIdx: number;
-  error: string | null;
-  handleNameChange: (value: string) => void;
-  setSelectedIdx: (idx: number) => void;
-  handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
-}
-
-export interface UseCreateCounterDialogArgs {
-  isOpen: boolean;
-  swatches: ReadonlyArray<{ color: CounterColor }>;
-  onSubmit: (args: { name: string; color: CounterColor }) => void;
-}
-
-export function useCreateCounterDialog({
-  isOpen,
-  swatches,
-  onSubmit,
-}: UseCreateCounterDialogArgs): CreateCounterDialogState {
-  const [name, setName] = useState('');
-  const [selectedIdx, setSelectedIdx] = useState(0);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      setName('');
-      setSelectedIdx(0);
-      setError(null);
-    }
-  }, [isOpen]);
-
-  const handleNameChange = (value: string) => {
-    setName(value);
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const handleSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
-    e?.preventDefault();
-    if (name.trim().length === 0) {
-      setError('Name is required');
-      return;
-    }
-    onSubmit({ name: name.trim(), color: swatches[selectedIdx].color });
-  };
-
-  return { name, selectedIdx, error, handleNameChange, setSelectedIdx, handleSubmit };
-}
diff --git a/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.css b/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.css
deleted file mode 100644
index f162ed0f3..000000000
--- a/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.create-game-dialog__body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.create-game-dialog__section {
-  display: flex;
-  flex-direction: column;
-  margin-top: 8px;
-}
diff --git a/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.spec.tsx b/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.spec.tsx
deleted file mode 100644
index 66e3099d7..000000000
--- a/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.spec.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { renderWithProviders, makeStoreState, makeUser } from '../../__test-utils__';
-import { Data } from '@app/types';
-import CreateGameDialog from './CreateGameDialog';
-
-function renderDialog(opts: { isJudge?: boolean; isRegistered?: boolean; gametypeMap?: Record<number, string> } = {}) {
-  const userLevel =
-    (opts.isRegistered ? Data.ServerInfo_User_UserLevelFlag.IsRegistered : 0) |
-    (opts.isJudge ? Data.ServerInfo_User_UserLevelFlag.IsJudge : 0);
-  const onSubmit = vi.fn();
-  const onCancel = vi.fn();
-  renderWithProviders(
-    <CreateGameDialog
-      isOpen
-      gametypeMap={opts.gametypeMap ?? {}}
-      onSubmit={onSubmit}
-      onCancel={onCancel}
-    />,
-    {
-      preloadedState: makeStoreState({
-        server: {
-          user: makeUser({ userLevel }),
-        } as any,
-      }),
-    },
-  );
-  return { onSubmit, onCancel };
-}
-
-describe('CreateGameDialog', () => {
-  it('hides the "Create as judge" checkbox for non-judge users', () => {
-    renderDialog({ isJudge: false });
-    expect(screen.queryByLabelText(/Create as judge/i)).not.toBeInTheDocument();
-  });
-
-  it('shows the "Create as judge" checkbox for judges', () => {
-    renderDialog({ isJudge: true });
-    expect(screen.getByLabelText(/Create as judge/i)).toBeInTheDocument();
-  });
-
-  it('disables spectator sub-options when "Allow spectators" is unchecked', () => {
-    renderDialog();
-    fireEvent.click(screen.getByLabelText(/Allow spectators/i));
-    expect(screen.getByLabelText(/Spectators need password/i)).toBeDisabled();
-    expect(screen.getByLabelText(/Spectators can chat/i)).toBeDisabled();
-    expect(screen.getByLabelText(/Spectators see everything/i)).toBeDisabled();
-  });
-
-  it('submits desktop-default values for an unedited form', () => {
-    const { onSubmit } = renderDialog({ isRegistered: true });
-    fireEvent.click(screen.getByRole('button', { name: /^Create$/ }));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-    const params = onSubmit.mock.calls[0][0];
-    expect(params).toMatchObject({
-      description: '',
-      password: '',
-      maxPlayers: 2,
-      onlyBuddies: false,
-      onlyRegistered: true,
-      spectatorsAllowed: true,
-      spectatorsNeedPassword: false,
-      spectatorsCanTalk: false,
-      spectatorsSeeEverything: false,
-      joinAsSpectator: false,
-      startingLifeTotal: 20,
-      shareDecklistsOnLoad: false,
-      joinAsJudge: false,
-      gameTypeIds: [],
-    });
-  });
-
-  it('forwards updated description and max players to onSubmit', () => {
-    const { onSubmit } = renderDialog();
-    fireEvent.change(screen.getByLabelText(/Description/i), { target: { value: 'Friday Casual' } });
-    fireEvent.change(screen.getByLabelText(/Max players/i), { target: { value: '4' } });
-    fireEvent.click(screen.getByRole('button', { name: /^Create$/ }));
-    const params = onSubmit.mock.calls[0][0];
-    expect(params.description).toBe('Friday Casual');
-    expect(params.maxPlayers).toBe(4);
-  });
-
-  it('renders a radio per available game type', () => {
-    renderDialog({ gametypeMap: { 0: 'Constructed', 1: 'Limited' } });
-    expect(screen.getByLabelText('Constructed')).toBeInTheDocument();
-    expect(screen.getByLabelText('Limited')).toBeInTheDocument();
-  });
-
-  it('Cancel calls onCancel', () => {
-    const { onCancel } = renderDialog();
-    fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
-    expect(onCancel).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.tsx b/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.tsx
deleted file mode 100644
index 21920aa2c..000000000
--- a/webclient/src/dialogs/CreateGameDialog/CreateGameDialog.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-
-import { ServerSelectors, useAppSelector } from '@app/store';
-import type { App, Enriched } from '@app/types';
-
-import './CreateGameDialog.css';
-
-export interface CreateGameDialogProps {
-  isOpen: boolean;
-  gametypeMap: Enriched.GametypeMap;
-  onCancel: () => void;
-  onSubmit: (params: App.CreateGameParams) => void;
-}
-
-const DEFAULT_MAX_PLAYERS = 2;
-const DEFAULT_STARTING_LIFE = 20;
-
-interface FormState {
-  description: string;
-  password: string;
-  maxPlayers: number;
-  onlyBuddies: boolean;
-  onlyRegistered: boolean;
-  spectatorsAllowed: boolean;
-  spectatorsNeedPassword: boolean;
-  spectatorsCanTalk: boolean;
-  spectatorsSeeEverything: boolean;
-  joinAsSpectator: boolean;
-  startingLifeTotal: number;
-  shareDecklistsOnLoad: boolean;
-  joinAsJudge: boolean;
-  gameTypeId: number | null;
-}
-
-function initialFormState(isRegistered: boolean): FormState {
-  return {
-    description: '',
-    password: '',
-    maxPlayers: DEFAULT_MAX_PLAYERS,
-    onlyBuddies: false,
-    onlyRegistered: isRegistered,
-    spectatorsAllowed: true,
-    spectatorsNeedPassword: false,
-    spectatorsCanTalk: false,
-    spectatorsSeeEverything: false,
-    joinAsSpectator: false,
-    startingLifeTotal: DEFAULT_STARTING_LIFE,
-    shareDecklistsOnLoad: false,
-    joinAsJudge: false,
-    gameTypeId: null,
-  };
-}
-
-function CreateGameDialog({ isOpen, gametypeMap, onCancel, onSubmit }: CreateGameDialogProps) {
-  const isRegistered = useAppSelector(ServerSelectors.getIsUserRegistered);
-  const isJudge = useAppSelector(ServerSelectors.getIsUserJudge);
-
-  const gameTypes = useMemo(() => {
-    return Object.entries(gametypeMap).map(([id, name]) => ({ id: Number(id), name }));
-  }, [gametypeMap]);
-
-  const [form, setForm] = useState<FormState>(() => initialFormState(isRegistered));
-
-  useEffect(() => {
-    if (isOpen) {
-      setForm(initialFormState(isRegistered));
-    }
-  }, [isOpen, isRegistered]);
-
-  const update = <K extends keyof FormState>(key: K, value: FormState[K]) => {
-    setForm((prev) => ({ ...prev, [key]: value }));
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const params: App.CreateGameParams = {
-      description: form.description,
-      password: form.password,
-      maxPlayers: form.maxPlayers,
-      onlyBuddies: form.onlyBuddies,
-      onlyRegistered: form.onlyRegistered,
-      spectatorsAllowed: form.spectatorsAllowed,
-      spectatorsNeedPassword: form.spectatorsAllowed && form.spectatorsNeedPassword,
-      spectatorsCanTalk: form.spectatorsAllowed && form.spectatorsCanTalk,
-      spectatorsSeeEverything: form.spectatorsAllowed && form.spectatorsSeeEverything,
-      gameTypeIds: form.gameTypeId != null ? [form.gameTypeId] : [],
-      joinAsJudge: isJudge && form.joinAsJudge,
-      joinAsSpectator: form.joinAsSpectator,
-      startingLifeTotal: form.startingLifeTotal,
-      shareDecklistsOnLoad: form.shareDecklistsOnLoad,
-    };
-    onSubmit(params);
-  };
-
-  return (
-    <Dialog className="CreateGameDialog" open={isOpen} onClose={onCancel} maxWidth="sm" fullWidth>
-      <DialogTitle>Create Game</DialogTitle>
-      <form onSubmit={handleSubmit}>
-        <DialogContent className="dialog-content create-game-dialog__body">
-          <TextField
-            autoFocus
-            fullWidth
-            margin="dense"
-            size="small"
-            label="Description"
-            value={form.description}
-            onChange={(e) => update('description', e.target.value)}
-          />
-          <TextField
-            fullWidth
-            margin="dense"
-            size="small"
-            label="Password"
-            type="password"
-            value={form.password}
-            onChange={(e) => update('password', e.target.value)}
-          />
-          <TextField
-            fullWidth
-            margin="dense"
-            size="small"
-            label="Max players"
-            type="number"
-            slotProps={{ htmlInput: { min: 1, max: 100 } }}
-            value={form.maxPlayers}
-            onChange={(e) => update('maxPlayers', Number(e.target.value))}
-          />
-          <TextField
-            fullWidth
-            margin="dense"
-            size="small"
-            label="Starting life total"
-            type="number"
-            slotProps={{ htmlInput: { min: 1, max: 99999 } }}
-            value={form.startingLifeTotal}
-            onChange={(e) => update('startingLifeTotal', Number(e.target.value))}
-          />
-
-          {gameTypes.length > 0 && (
-            <div className="create-game-dialog__section">
-              <Typography variant="subtitle2">Game type</Typography>
-              <RadioGroup
-                value={form.gameTypeId ?? ''}
-                onChange={(_, value) => update('gameTypeId', value === '' ? null : Number(value))}
-              >
-                {gameTypes.map(({ id, name }) => (
-                  <FormControlLabel key={id} value={id} control={<Radio size="small" />} label={name} />
-                ))}
-              </RadioGroup>
-            </div>
-          )}
-
-          <div className="create-game-dialog__section">
-            <Typography variant="subtitle2">Permissions</Typography>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.onlyBuddies}
-                  onChange={(_, c) => update('onlyBuddies', c)}
-                  disabled={!isRegistered}
-                />
-              }
-              label="Only buddies"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.onlyRegistered}
-                  onChange={(_, c) => update('onlyRegistered', c)}
-                />
-              }
-              label="Only registered users"
-            />
-          </div>
-
-          <div className="create-game-dialog__section">
-            <Typography variant="subtitle2">Spectators</Typography>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.spectatorsAllowed}
-                  onChange={(_, c) => update('spectatorsAllowed', c)}
-                />
-              }
-              label="Allow spectators"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.spectatorsNeedPassword}
-                  onChange={(_, c) => update('spectatorsNeedPassword', c)}
-                  disabled={!form.spectatorsAllowed}
-                />
-              }
-              label="Spectators need password"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.spectatorsCanTalk}
-                  onChange={(_, c) => update('spectatorsCanTalk', c)}
-                  disabled={!form.spectatorsAllowed}
-                />
-              }
-              label="Spectators can chat"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.spectatorsSeeEverything}
-                  onChange={(_, c) => update('spectatorsSeeEverything', c)}
-                  disabled={!form.spectatorsAllowed}
-                />
-              }
-              label="Spectators see everything"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.joinAsSpectator}
-                  onChange={(_, c) => update('joinAsSpectator', c)}
-                />
-              }
-              label="Create as spectator"
-            />
-          </div>
-
-          <div className="create-game-dialog__section">
-            <Typography variant="subtitle2">Other</Typography>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.shareDecklistsOnLoad}
-                  onChange={(_, c) => update('shareDecklistsOnLoad', c)}
-                />
-              }
-              label="Share decklists on load"
-            />
-            {isJudge && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    size="small"
-                    checked={form.joinAsJudge}
-                    onChange={(_, c) => update('joinAsJudge', c)}
-                  />
-                }
-                label="Create as judge"
-              />
-            )}
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button type="button" onClick={onCancel}>Cancel</Button>
-          <Button type="submit" variant="contained" color="primary">Create</Button>
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-}
-
-export default CreateGameDialog;
diff --git a/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.css b/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.css
deleted file mode 100644
index 91e367cf9..000000000
--- a/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.create-token-dialog__body {
-  display: flex;
-  gap: 24px;
-  min-width: 720px;
-  min-height: 420px;
-}
-
-.create-token-dialog__chooser {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 320px;
-  min-height: 0;
-}
-
-.create-token-dialog__chooser-list {
-  flex: 1 1 auto;
-  min-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--border-subtle, #ddd);
-  border-radius: 4px;
-}
-
-.create-token-dialog__chooser-empty {
-  padding: 12px;
-  color: var(--text-muted, #666);
-  font-style: italic;
-}
-
-.create-token-dialog__preview {
-  margin-top: 8px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  background-color: var(--bg-subtle, #f5f5f5);
-  font-size: 0.9em;
-}
-
-.create-token-dialog__form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  flex: 1 1 auto;
-  min-width: 320px;
-}
diff --git a/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.spec.tsx b/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.spec.tsx
deleted file mode 100644
index 6b36f7601..000000000
--- a/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.spec.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { renderWithProviders } from '../../__test-utils__';
-import CreateTokenDialog from './CreateTokenDialog';
-
-describe('CreateTokenDialog', () => {
-  it('submits the trimmed name, selected color, P/T, annotation, and flags', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <CreateTokenDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />,
-    );
-
-    fireEvent.change(screen.getByLabelText('Token name'), {
-      target: { value: '  Goblin  ' },
-    });
-    fireEvent.change(screen.getByLabelText('Token power/toughness'), {
-      target: { value: '1/1' },
-    });
-    fireEvent.change(screen.getByLabelText('Token annotation'), {
-      target: { value: 'ETB' },
-    });
-    fireEvent.click(screen.getByRole('button', { name: /create/i }));
-
-    // Default color is White ('w') to match desktop DlgCreateToken default.
-    expect(onSubmit).toHaveBeenCalledWith({
-      name: 'Goblin',
-      color: 'w',
-      pt: '1/1',
-      annotation: 'ETB',
-      destroyOnZoneChange: true,
-      faceDown: false,
-    });
-  });
-
-  it('requires a non-empty name', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <CreateTokenDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /create/i }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(screen.getByText(/name is required/i)).toBeInTheDocument();
-  });
-
-  it('caps the name input at the desktop max (255 chars)', () => {
-    renderWithProviders(
-      <CreateTokenDialog isOpen onSubmit={() => {}} onCancel={() => {}} />,
-    );
-
-    const input = screen.getByLabelText('Token name') as HTMLInputElement;
-    const longInput = 'x'.repeat(300);
-    fireEvent.change(input, { target: { value: longInput } });
-
-    expect(input.value.length).toBeLessThanOrEqual(255);
-  });
-
-  it('toggles the destroyOnZoneChange checkbox off when unchecked', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <CreateTokenDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />,
-    );
-
-    fireEvent.change(screen.getByLabelText('Token name'), {
-      target: { value: 'Persistent' },
-    });
-    fireEvent.click(
-      screen.getByRole('checkbox', { name: /destroy when it leaves the table/i }),
-    );
-    fireEvent.click(screen.getByRole('button', { name: /create/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith(
-      expect.objectContaining({ destroyOnZoneChange: false }),
-    );
-  });
-
-  it('fires onCancel when Cancel is clicked', () => {
-    const onCancel = vi.fn();
-    renderWithProviders(
-      <CreateTokenDialog isOpen onSubmit={() => {}} onCancel={onCancel} />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-
-    expect(onCancel).toHaveBeenCalled();
-  });
-
-  it('resets form state when reopened', () => {
-    const { rerender } = renderWithProviders(
-      <CreateTokenDialog isOpen onSubmit={() => {}} onCancel={() => {}} />,
-    );
-
-    const input = screen.getByLabelText('Token name') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'temp' } });
-    expect(input.value).toBe('temp');
-
-    rerender(<CreateTokenDialog isOpen={false} onSubmit={() => {}} onCancel={() => {}} />);
-    rerender(<CreateTokenDialog isOpen onSubmit={() => {}} onCancel={() => {}} />);
-
-    const freshInput = screen.getByLabelText('Token name') as HTMLInputElement;
-    expect(freshInput.value).toBe('');
-  });
-});
diff --git a/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.tsx b/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.tsx
deleted file mode 100644
index a07be54aa..000000000
--- a/webclient/src/dialogs/CreateTokenDialog/CreateTokenDialog.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import List from '@mui/material/List';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-
-import {
-  MAX_ANNOTATION_LEN,
-  MAX_NAME_LEN,
-  MAX_PT_LEN,
-  useCreateTokenDialog,
-} from './useCreateTokenDialog';
-
-import './CreateTokenDialog.css';
-
-const PREFIX = 'CreateTokenDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface CreateTokenSubmit {
-  name: string;
-  color: string;
-  pt: string;
-  annotation: string;
-  destroyOnZoneChange: boolean;
-  faceDown: boolean;
-  providerId?: string;
-}
-
-export interface CreateTokenDialogProps {
-  isOpen: boolean;
-  onSubmit: (args: CreateTokenSubmit) => void;
-  onCancel: () => void;
-  /** Optional deck-scoped predefined token names; enables the "Deck" radio in the chooser. */
-  predefinedTokenNames?: string[];
-}
-
-// Matches desktop DlgCreateToken color dropdown values. Desktop orders
-// White → Blue → Black → Red → Green → Multicolor → Colorless and defaults
-// to White; we mirror both.
-const COLOR_OPTIONS: ReadonlyArray<{ value: string; label: string }> = [
-  { value: 'w', label: 'White' },
-  { value: 'u', label: 'Blue' },
-  { value: 'b', label: 'Black' },
-  { value: 'r', label: 'Red' },
-  { value: 'g', label: 'Green' },
-  { value: 'm', label: 'Multicolor' },
-  { value: '', label: 'Colorless' },
-];
-
-function CreateTokenDialog({ isOpen, onSubmit, onCancel, predefinedTokenNames }: CreateTokenDialogProps) {
-  const {
-    name,
-    color,
-    pt,
-    annotation,
-    destroyOnZoneChange,
-    faceDown,
-    error,
-    scope,
-    search,
-    filteredTokens,
-    selectedTokenName,
-    setScope,
-    setSearch,
-    selectPredefinedToken,
-    handleNameChange,
-    setColor,
-    setPT,
-    setAnnotation,
-    setDestroyOnZoneChange,
-    setFaceDown,
-    handleSubmit,
-  } = useCreateTokenDialog({ isOpen, onSubmit, predefinedTokenNames });
-
-  const hasDeckScope = Boolean(predefinedTokenNames?.length);
-
-  return (
-    <StyledDialog
-      className={'CreateTokenDialog ' + classes.root}
-      open={isOpen}
-      onClose={onCancel}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">Create token</Typography>
-        </div>
-      </DialogTitle>
-      <form onSubmit={handleSubmit}>
-        <DialogContent className="dialog-content create-token-dialog__body">
-          <div className="create-token-dialog__chooser">
-            <RadioGroup
-              row
-              value={scope}
-              onChange={(e) => setScope(e.target.value as 'all' | 'deck')}
-              aria-label="Token source"
-            >
-              <FormControlLabel value="all" control={<Radio size="small" />} label="All Tokens" />
-              <FormControlLabel
-                value="deck"
-                control={<Radio size="small" />}
-                label="Deck Tokens"
-                disabled={!hasDeckScope}
-              />
-            </RadioGroup>
-            <TextField
-              fullWidth
-              variant="outlined"
-              size="small"
-              label="Search tokens"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              slotProps={{ htmlInput: { 'aria-label': 'Search tokens' } }}
-            />
-            <div className="create-token-dialog__chooser-list">
-              {filteredTokens.length === 0 ? (
-                <div className="create-token-dialog__chooser-empty">
-                  No predefined tokens available.
-                </div>
-              ) : (
-                <List dense disablePadding>
-                  {filteredTokens.map((token) => {
-                    const tokenName = token.name?.value ?? '';
-                    return (
-                      <ListItemButton
-                        key={tokenName}
-                        selected={tokenName === selectedTokenName}
-                        onClick={() => selectPredefinedToken(token)}
-                      >
-                        <ListItemText
-                          primary={tokenName}
-                          secondary={token.prop?.value?.type?.value}
-                        />
-                      </ListItemButton>
-                    );
-                  })}
-                </List>
-              )}
-            </div>
-            {selectedTokenName && (
-              <div className="create-token-dialog__preview">
-                <strong>{selectedTokenName}</strong>
-                {pt ? ` — ${pt}` : ''}
-              </div>
-            )}
-          </div>
-
-          <div className="create-token-dialog__form">
-            <TextField
-              autoFocus
-              fullWidth
-              variant="outlined"
-              size="small"
-              label="Token name"
-              value={name}
-              onChange={(e) => handleNameChange(e.target.value)}
-              error={error != null}
-              helperText={error ?? ''}
-              disabled={faceDown}
-              slotProps={{ htmlInput: { 'aria-label': 'Token name', maxLength: MAX_NAME_LEN } }}
-            />
-            <FormControl fullWidth size="small" variant="outlined" disabled={faceDown}>
-              <InputLabel id="create-token-color-label">Color</InputLabel>
-              <Select
-                labelId="create-token-color-label"
-                label="Color"
-                value={color}
-                onChange={(e) => setColor(e.target.value)}
-                slotProps={{ input: { 'aria-label': 'Token color' } }}
-              >
-                {COLOR_OPTIONS.map((opt) => (
-                  <MenuItem key={opt.label} value={opt.value}>
-                    {opt.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            <TextField
-              fullWidth
-              variant="outlined"
-              size="small"
-              label="Token power/toughness"
-              placeholder="e.g. 3/3"
-              value={pt}
-              onChange={(e) => setPT(e.target.value.slice(0, MAX_PT_LEN))}
-              disabled={faceDown}
-              slotProps={{ htmlInput: { 'aria-label': 'Token power/toughness', maxLength: MAX_PT_LEN } }}
-            />
-            <TextField
-              fullWidth
-              variant="outlined"
-              size="small"
-              label="Token annotation"
-              value={annotation}
-              onChange={(e) => setAnnotation(e.target.value.slice(0, MAX_ANNOTATION_LEN))}
-              slotProps={{ htmlInput: { 'aria-label': 'Token annotation', maxLength: MAX_ANNOTATION_LEN } }}
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={destroyOnZoneChange}
-                  onChange={(e) => setDestroyOnZoneChange(e.target.checked)}
-                  slotProps={{ input: { 'aria-label': 'Destroy when it leaves the table' } }}
-                />
-              }
-              label="Destroy when it leaves the table"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={faceDown}
-                  onChange={(e) => setFaceDown(e.target.checked)}
-                  slotProps={{ input: { 'aria-label': 'Create face-down' } }}
-                />
-              }
-              label="Create face-down"
-            />
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button type="button" onClick={onCancel}>Cancel</Button>
-          <Button type="submit" variant="contained" color="primary">Create</Button>
-        </DialogActions>
-      </form>
-    </StyledDialog>
-  );
-}
-
-export default CreateTokenDialog;
diff --git a/webclient/src/dialogs/CreateTokenDialog/useCreateTokenDialog.ts b/webclient/src/dialogs/CreateTokenDialog/useCreateTokenDialog.ts
deleted file mode 100644
index 4f5253f6e..000000000
--- a/webclient/src/dialogs/CreateTokenDialog/useCreateTokenDialog.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-import { TokenDTO } from '@app/services';
-
-import type { CreateTokenSubmit } from './CreateTokenDialog';
-
-export type ChooserScope = 'all' | 'deck';
-
-export interface CreateTokenDialogState {
-  name: string;
-  color: string;
-  pt: string;
-  annotation: string;
-  destroyOnZoneChange: boolean;
-  faceDown: boolean;
-  error: string | null;
-
-  scope: ChooserScope;
-  search: string;
-  availableTokens: TokenDTO[];
-  filteredTokens: TokenDTO[];
-  selectedTokenName: string | null;
-
-  setScope: (value: ChooserScope) => void;
-  setSearch: (value: string) => void;
-  selectPredefinedToken: (token: TokenDTO) => void;
-
-  handleNameChange: (value: string) => void;
-  setColor: (value: string) => void;
-  setPT: (value: string) => void;
-  setAnnotation: (value: string) => void;
-  setDestroyOnZoneChange: (value: boolean) => void;
-  setFaceDown: (value: boolean) => void;
-  handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
-}
-
-export const CREATE_TOKEN_DEFAULT_COLOR = 'w';
-
-// Desktop server-side MAX_NAME_LENGTH is 0xff (255). Client-side caps on
-// the other free-text fields mirror that to prevent oversize-payload
-// round-trips that the server would reject anyway.
-export const MAX_NAME_LEN = 255;
-export const MAX_PT_LEN = 255;
-export const MAX_ANNOTATION_LEN = 255;
-
-export interface UseCreateTokenDialogArgs {
-  isOpen: boolean;
-  onSubmit: (args: CreateTokenSubmit) => void;
-  /** Optional deck-scoped token names; mirrors desktop DlgCreateToken predefinedTokens. */
-  predefinedTokenNames?: string[];
-}
-
-/** Maps a MTGJSON-shaped color list ("W", "U", ...) to the dialog's single-letter color value. */
-function colorFromToken(token: TokenDTO): string {
-  const raw = token.prop?.value?.colors?.value ?? '';
-  if (!raw) {
-    return '';
-  }
-  const colors = raw.split(/[\s,]+/).filter(Boolean).map((c: string) => c.toLowerCase());
-  if (colors.length === 0) {
-    return '';
-  }
-  if (colors.length > 1) {
-    return 'm';
-  }
-  const first = colors[0];
-  if (first === 'w' || first === 'u' || first === 'b' || first === 'r' || first === 'g') {
-    return first;
-  }
-  return '';
-}
-
-/** Best-effort providerId from the token's first set entry; matches desktop TokenInfo.providerId. */
-function providerIdFromToken(token: TokenDTO): string | undefined {
-  return token.set?.[0]?.value ?? undefined;
-}
-
-export function useCreateTokenDialog({
-  isOpen,
-  onSubmit,
-  predefinedTokenNames,
-}: UseCreateTokenDialogArgs): CreateTokenDialogState {
-  const [name, setName] = useState('');
-  const [color, setColor] = useState(CREATE_TOKEN_DEFAULT_COLOR);
-  const [pt, setPT] = useState('');
-  const [annotation, setAnnotation] = useState('');
-  const [destroyOnZoneChange, setDestroyOnZoneChange] = useState(true);
-  const [faceDown, setFaceDown] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const [scope, setScope] = useState<ChooserScope>(predefinedTokenNames?.length ? 'deck' : 'all');
-  const [search, setSearch] = useState('');
-  const [availableTokens, setAvailableTokens] = useState<TokenDTO[]>([]);
-  const [selectedTokenName, setSelectedTokenName] = useState<string | null>(null);
-  const [providerId, setProviderId] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (isOpen) {
-      setName('');
-      setColor(CREATE_TOKEN_DEFAULT_COLOR);
-      setPT('');
-      setAnnotation('');
-      setDestroyOnZoneChange(true);
-      setFaceDown(false);
-      setError(null);
-      setSearch('');
-      setSelectedTokenName(null);
-      setProviderId(undefined);
-      setScope(predefinedTokenNames?.length ? 'deck' : 'all');
-    }
-  }, [isOpen, predefinedTokenNames]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    let cancelled = false;
-    // Best-effort load of the token library. On failure the chooser renders
-    // empty and freeform creation still works.
-    import('@app/services').then(({ dexieService }) => {
-      dexieService.tokens.toArray().then((tokens: TokenDTO[]) => {
-        if (!cancelled) {
-          setAvailableTokens(tokens);
-        }
-      }).catch(() => {
-        if (!cancelled) {
-          setAvailableTokens([]);
-        }
-      });
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [isOpen]);
-
-  const filteredTokens = useMemo(() => {
-    const allowByScope = scope === 'deck' && predefinedTokenNames?.length
-      ? new Set(predefinedTokenNames.map((n) => n.toLowerCase()))
-      : null;
-    const needle = search.trim().toLowerCase();
-    return availableTokens.filter((token) => {
-      const tokenName = token.name?.value ?? '';
-      if (allowByScope && !allowByScope.has(tokenName.toLowerCase())) {
-        return false;
-      }
-      if (needle && !tokenName.toLowerCase().includes(needle)) {
-        return false;
-      }
-      return true;
-    });
-  }, [availableTokens, scope, search, predefinedTokenNames]);
-
-  const handleNameChange = (value: string) => {
-    setName(value.slice(0, MAX_NAME_LEN));
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const selectPredefinedToken = (token: TokenDTO) => {
-    const tokenName = token.name?.value ?? '';
-    setSelectedTokenName(tokenName);
-    setName(tokenName.slice(0, MAX_NAME_LEN));
-    setColor(colorFromToken(token));
-    const ptRaw = token.prop?.value?.pt?.value ?? '';
-    setPT(ptRaw.slice(0, MAX_PT_LEN));
-    setProviderId(providerIdFromToken(token));
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const handleSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
-    e?.preventDefault();
-    if (name.trim().length === 0) {
-      setError('Name is required');
-      return;
-    }
-    const payload: CreateTokenSubmit = {
-      name: name.trim(),
-      color,
-      pt: pt.trim(),
-      annotation: annotation.trim(),
-      destroyOnZoneChange,
-      faceDown,
-    };
-    if (providerId) {
-      payload.providerId = providerId;
-    }
-    onSubmit(payload);
-  };
-
-  return {
-    name,
-    color,
-    pt,
-    annotation,
-    destroyOnZoneChange,
-    faceDown,
-    error,
-    scope,
-    search,
-    availableTokens,
-    filteredTokens,
-    selectedTokenName,
-    setScope,
-    setSearch,
-    selectPredefinedToken,
-    handleNameChange,
-    setColor,
-    setPT,
-    setAnnotation,
-    setDestroyOnZoneChange,
-    setFaceDown,
-    handleSubmit,
-  };
-}
diff --git a/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.css b/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.css
deleted file mode 100644
index 9d14008be..000000000
--- a/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.DeckSelectDialog .MuiDialog-paper {
-  width: 540px;
-  max-width: 540px;
-}
-
-.deck-select-dialog__textarea {
-  width: 100%;
-  min-height: 220px;
-  box-sizing: border-box;
-  padding: 10px 12px;
-  font-family: ui-monospace, Menlo, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.4;
-  background: #f7f8fa;
-  border: 1px solid #c4c9d1;
-  border-radius: 4px;
-  resize: vertical;
-}
-
-.deck-select-dialog__textarea:focus {
-  outline: none;
-  border-color: #5a78c8;
-  box-shadow: 0 0 0 3px rgba(90, 120, 200, 0.15);
-}
-
-.deck-select-dialog__hash {
-  margin-top: 10px;
-  font-size: 12px;
-  color: #56607a;
-  font-family: ui-monospace, Menlo, Consolas, monospace;
-  word-break: break-all;
-}
-
-.deck-select-dialog__hash--pending {
-  color: #9ea6b8;
-  font-style: italic;
-}
-
-.deck-select-dialog__actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #e3e6eb;
-}
diff --git a/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.spec.tsx b/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.spec.tsx
deleted file mode 100644
index 12f061034..000000000
--- a/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.spec.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { createMockWebClient, makeStoreState, renderWithProviders } from '../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-} from '../../store/game/__mocks__/fixtures';
-import DeckSelectDialog from './DeckSelectDialog';
-
-function stateWith(playerProps: Parameters<typeof makePlayerProperties>[0] = {}) {
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: 1,
-          players: {
-            1: makePlayerEntry({
-              properties: makePlayerProperties({ playerId: 1, ...playerProps }),
-            }),
-          },
-        }),
-      },
-    },
-  });
-}
-
-describe('DeckSelectDialog', () => {
-  it('does not render content when closed', () => {
-    renderWithProviders(
-      <DeckSelectDialog isOpen={false} gameId={1} />,
-      { preloadedState: stateWith() },
-    );
-
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-
-  it('renders textarea, Submit Deck, and Ready controls when open', () => {
-    renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      { preloadedState: stateWith() },
-    );
-
-    expect(screen.getByLabelText('deck list')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /submit deck/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^ready$/i })).toBeInTheDocument();
-  });
-
-  it('disables Submit Deck until the textarea has non-whitespace content', () => {
-    renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      { preloadedState: stateWith() },
-    );
-
-    const submit = screen.getByRole('button', { name: /submit deck/i });
-    expect(submit).toBeDisabled();
-
-    fireEvent.change(screen.getByLabelText('deck list'), {
-      target: { value: '4 Lightning Bolt\n' },
-    });
-    expect(submit).not.toBeDisabled();
-  });
-
-  it('dispatches deckSelect with the textarea content when Submit Deck is clicked', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      { preloadedState: stateWith(), webClient },
-    );
-
-    fireEvent.change(screen.getByLabelText('deck list'), {
-      target: { value: '4 Island\n4 Mountain' },
-    });
-    fireEvent.click(screen.getByRole('button', { name: /submit deck/i }));
-
-    expect(webClient.request.game.deckSelect).toHaveBeenCalledWith(1, {
-      deck: '4 Island\n4 Mountain',
-    });
-  });
-
-  it('keeps Ready disabled until the player has a deckHash', () => {
-    const { rerender } = renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      { preloadedState: stateWith({ deckHash: '' }) },
-    );
-
-    expect(screen.getByRole('button', { name: /^ready$/i })).toBeDisabled();
-
-    rerender(<DeckSelectDialog isOpen gameId={1} />);
-  });
-
-  it('enables Ready once deckHash is populated and shows the hash text', () => {
-    renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      { preloadedState: stateWith({ deckHash: 'abc123' }) },
-    );
-
-    expect(screen.getByRole('button', { name: /^ready$/i })).not.toBeDisabled();
-    expect(screen.getByText(/abc123/)).toBeInTheDocument();
-  });
-
-  it('dispatches readyStart when Ready is clicked', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      { preloadedState: stateWith({ deckHash: 'abc123' }), webClient },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /^ready$/i }));
-
-    expect(webClient.request.game.readyStart).toHaveBeenCalledWith(1, { ready: true });
-  });
-
-  it('switches the label to "Unready" and stays enabled when the player is already ready', () => {
-    renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      { preloadedState: stateWith({ deckHash: 'abc123', readyStart: true }) },
-    );
-
-    const ready = screen.getByRole('button', { name: /unready/i });
-    expect(ready).toHaveTextContent('Unready');
-    expect(ready).not.toBeDisabled();
-  });
-
-  it('dispatches readyStart({ready:false}) when Unready is clicked (un-ready toggle)', () => {
-    const webClient = createMockWebClient();
-    renderWithProviders(
-      <DeckSelectDialog isOpen gameId={1} />,
-      {
-        preloadedState: stateWith({ deckHash: 'abc123', readyStart: true }),
-        webClient,
-      },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /unready/i }));
-
-    expect(webClient.request.game.readyStart).toHaveBeenCalledWith(1, { ready: false });
-  });
-});
diff --git a/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.tsx b/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.tsx
deleted file mode 100644
index aa4755fcb..000000000
--- a/webclient/src/dialogs/DeckSelectDialog/DeckSelectDialog.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-
-import { useDeckSelectDialog } from './useDeckSelectDialog';
-
-import './DeckSelectDialog.css';
-
-const PREFIX = 'DeckSelectDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface DeckSelectDialogProps {
-  isOpen: boolean;
-  gameId: number | undefined;
-  /**
-   * Unlike ZoneViewDialog (which takes a required `handleClose`), the
-   * deck-select dialog is auto-gated by the game's pre-ready lobby state:
-   * it opens when `!game.started && !spectator && !judge && !readyStart`
-   * and closes when any of those flip. Tests pass a no-op; production
-   * callers typically omit this prop, letting MUI render a non-dismissable
-   * modal (no backdrop-click or ESC close).
-   */
-  handleClose?: () => void;
-}
-
-function DeckSelectDialog({ isOpen, gameId, handleClose }: DeckSelectDialogProps) {
-  const {
-    deckText,
-    setDeckText,
-    deckHash,
-    isReady,
-    canSubmit,
-    canToggleReady,
-    handleSubmitDeck,
-    handleToggleReady,
-  } = useDeckSelectDialog(gameId);
-
-  return (
-    <StyledDialog
-      className={'DeckSelectDialog ' + classes.root}
-      open={isOpen}
-      onClose={handleClose}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">Select Deck</Typography>
-        </div>
-      </DialogTitle>
-      <DialogContent className="dialog-content">
-        <Typography className="dialog-content__subtitle" variant="subtitle1">
-          Paste your deck list below, then click Submit Deck. After the server
-          accepts the deck, the Ready button unlocks.
-        </Typography>
-
-        <textarea
-          className="deck-select-dialog__textarea"
-          rows={10}
-          value={deckText}
-          onChange={(e) => setDeckText(e.target.value)}
-          placeholder="4 Lightning Bolt&#10;20 Mountain&#10;..."
-          aria-label="deck list"
-        />
-
-        <div className="deck-select-dialog__hash">
-          Deck hash: {deckHash.length > 0 ? deckHash : <span className="deck-select-dialog__hash--pending">—</span>}
-        </div>
-
-        <div className="deck-select-dialog__actions">
-          <Button
-            variant="outlined"
-            onClick={handleSubmitDeck}
-            disabled={!canSubmit}
-          >
-            Submit Deck
-          </Button>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleToggleReady}
-            disabled={!canToggleReady}
-          >
-            {isReady ? 'Unready' : 'Ready'}
-          </Button>
-        </div>
-      </DialogContent>
-    </StyledDialog>
-  );
-}
-
-export default DeckSelectDialog;
diff --git a/webclient/src/dialogs/DeckSelectDialog/useDeckSelectDialog.ts b/webclient/src/dialogs/DeckSelectDialog/useDeckSelectDialog.ts
deleted file mode 100644
index 429b4c539..000000000
--- a/webclient/src/dialogs/DeckSelectDialog/useDeckSelectDialog.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useState } from 'react';
-
-import { useWebClient } from '@app/hooks';
-import { GameSelectors, useAppSelector } from '@app/store';
-
-export interface DeckSelectDialog {
-  deckText: string;
-  setDeckText: (v: string) => void;
-  deckHash: string;
-  isReady: boolean;
-  canSubmit: boolean;
-  canToggleReady: boolean;
-  handleSubmitDeck: () => void;
-  handleToggleReady: () => void;
-}
-
-export function useDeckSelectDialog(gameId: number | undefined): DeckSelectDialog {
-  const webClient = useWebClient();
-  const localPlayer = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getLocalPlayer(state, gameId) : undefined,
-  );
-  const [deckText, setDeckText] = useState('');
-
-  const deckHash = localPlayer?.properties.deckHash ?? '';
-  const isReady = localPlayer?.properties.readyStart ?? false;
-  const hasLocalPlayer = localPlayer != null;
-  // Guard Submit/Ready on having a local player — today the deckSelectOpen
-  // predicate in Game.tsx implies one, but the dialog mounts before the
-  // Event_GameJoined echo populates players during reconnect.
-  const canSubmit = hasLocalPlayer && deckText.trim().length > 0;
-  const canToggleReady = hasLocalPlayer && deckHash.length > 0;
-
-  const handleSubmitDeck = () => {
-    if (!canSubmit || gameId == null) {
-      return;
-    }
-    webClient.request.game.deckSelect(gameId, { deck: deckText.trim() });
-  };
-
-  const handleToggleReady = () => {
-    if (!canToggleReady || gameId == null) {
-      return;
-    }
-    webClient.request.game.readyStart(gameId, { ready: !isReady });
-  };
-
-  return {
-    deckText,
-    setDeckText,
-    deckHash,
-    isReady,
-    canSubmit,
-    canToggleReady,
-    handleSubmitDeck,
-    handleToggleReady,
-  };
-}
diff --git a/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.css b/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.css
deleted file mode 100644
index 1fbc80fd8..000000000
--- a/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.filter-games-dialog__body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.filter-games-dialog__row {
-  display: flex;
-  gap: 12px;
-}
-
-.filter-games-dialog__section {
-  display: flex;
-  flex-direction: column;
-  margin-top: 8px;
-}
diff --git a/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.spec.tsx b/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.spec.tsx
deleted file mode 100644
index be899171d..000000000
--- a/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.spec.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { renderWithProviders } from '../../__test-utils__';
-import { DEFAULT_GAME_FILTERS } from '@app/store';
-import FilterGamesDialog from './FilterGamesDialog';
-
-function renderDialog(opts: { gametypeMap?: Record<number, string>; initialFilters?: typeof DEFAULT_GAME_FILTERS } = {}) {
-  const onSubmit = vi.fn();
-  const onCancel = vi.fn();
-  renderWithProviders(
-    <FilterGamesDialog
-      isOpen
-      gametypeMap={opts.gametypeMap ?? {}}
-      initialFilters={opts.initialFilters ?? DEFAULT_GAME_FILTERS}
-      onSubmit={onSubmit}
-      onCancel={onCancel}
-    />,
-  );
-  return { onSubmit, onCancel };
-}
-
-describe('FilterGamesDialog', () => {
-  it('renders the hide-toggles section', () => {
-    renderDialog();
-    expect(screen.getByLabelText(/Hide full games/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Hide games that started/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/Hide password-protected games/i)).toBeInTheDocument();
-  });
-
-  it('disables spectator sub-filters until "show only if spectators can watch" is checked', () => {
-    renderDialog();
-    expect(screen.getByLabelText(/spectators need a password/i)).toBeDisabled();
-    expect(screen.getByLabelText(/spectators can chat/i)).toBeDisabled();
-    expect(screen.getByLabelText(/spectators see hands/i)).toBeDisabled();
-
-    fireEvent.click(screen.getByLabelText(/Show only games where spectators can watch/i));
-
-    expect(screen.getByLabelText(/spectators need a password/i)).not.toBeDisabled();
-    expect(screen.getByLabelText(/spectators can chat/i)).not.toBeDisabled();
-    expect(screen.getByLabelText(/spectators see hands/i)).not.toBeDisabled();
-  });
-
-  it('Apply submits the unchanged defaults when nothing is edited', () => {
-    const { onSubmit } = renderDialog();
-    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
-    expect(onSubmit).toHaveBeenCalledWith(DEFAULT_GAME_FILTERS);
-  });
-
-  it('Apply forwards the toggled hide-full-games filter', () => {
-    const { onSubmit } = renderDialog();
-    fireEvent.click(screen.getByLabelText(/Hide full games/i));
-    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-    expect(onSubmit.mock.calls[0][0].hideFullGames).toBe(true);
-  });
-
-  it('parses the comma-separated creator names into a trimmed list', () => {
-    const { onSubmit } = renderDialog();
-    fireEvent.change(screen.getByLabelText(/Creator names/i), { target: { value: 'alice, bob ,carol' } });
-    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
-    expect(onSubmit.mock.calls[0][0].creatorNameFilters).toEqual(['alice', 'bob', 'carol']);
-  });
-
-  it('renders a checkbox per game type and toggles selection', () => {
-    const { onSubmit } = renderDialog({ gametypeMap: { 0: 'Constructed', 1: 'Limited' } });
-    fireEvent.click(screen.getByLabelText('Constructed'));
-    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
-    expect(onSubmit.mock.calls[0][0].gameTypeFilter).toEqual([0]);
-  });
-
-  it('Reset restores defaults in the form (Apply submits defaults)', () => {
-    const { onSubmit } = renderDialog({
-      initialFilters: { ...DEFAULT_GAME_FILTERS, hideFullGames: true, gameNameFilter: 'foo' },
-    });
-    fireEvent.click(screen.getByRole('button', { name: /Reset/i }));
-    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
-    expect(onSubmit).toHaveBeenCalledWith(DEFAULT_GAME_FILTERS);
-  });
-
-  it('Cancel calls onCancel', () => {
-    const { onCancel } = renderDialog();
-    fireEvent.click(screen.getByRole('button', { name: /Cancel/i }));
-    expect(onCancel).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.tsx b/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.tsx
deleted file mode 100644
index 669ad4777..000000000
--- a/webclient/src/dialogs/FilterGamesDialog/FilterGamesDialog.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-
-import { DEFAULT_GAME_FILTERS } from '@app/store';
-import type { GameFilters } from '@app/store';
-import type { Enriched } from '@app/types';
-
-import './FilterGamesDialog.css';
-
-export interface FilterGamesDialogProps {
-  isOpen: boolean;
-  /**
-   * MUST be a stable reference across renders while the dialog is open.
-   * The open-reset effect depends on `initialFilters` identity; an unstable
-   * reference (e.g. `{ ...defaults }` freshly constructed every parent render)
-   * will reset the draft form on every re-render. Pass a memoized value or a
-   * module-level constant.
-   */
-  initialFilters: GameFilters;
-  gametypeMap: Enriched.GametypeMap;
-  onCancel: () => void;
-  onSubmit: (filters: GameFilters) => void;
-}
-
-interface MaxAgeOption {
-  label: string;
-  seconds: number;
-}
-
-const MAX_AGE_OPTIONS: MaxAgeOption[] = [
-  { label: 'No limit', seconds: 0 },
-  { label: '5 minutes', seconds: 5 * 60 },
-  { label: '10 minutes', seconds: 10 * 60 },
-  { label: '30 minutes', seconds: 30 * 60 },
-  { label: '1 hour', seconds: 60 * 60 },
-  { label: '2 hours', seconds: 2 * 60 * 60 },
-];
-
-function FilterGamesDialog({
-  isOpen,
-  initialFilters,
-  gametypeMap,
-  onCancel,
-  onSubmit,
-}: FilterGamesDialogProps) {
-  const [form, setForm] = useState<GameFilters>(initialFilters);
-  const [creatorNamesText, setCreatorNamesText] = useState<string>(initialFilters.creatorNameFilters.join(', '));
-
-  useEffect(() => {
-    if (isOpen) {
-      setForm(initialFilters);
-      setCreatorNamesText(initialFilters.creatorNameFilters.join(', '));
-    }
-  }, [isOpen, initialFilters]);
-
-  const gameTypes = useMemo(() => {
-    return Object.entries(gametypeMap).map(([id, name]) => ({ id: Number(id), name }));
-  }, [gametypeMap]);
-
-  const update = <K extends keyof GameFilters>(key: K, value: GameFilters[K]) => {
-    setForm((prev) => ({ ...prev, [key]: value }));
-  };
-
-  const toggleGameType = (id: number) => {
-    setForm((prev) => {
-      const set = new Set(prev.gameTypeFilter);
-      if (set.has(id)) {
-        set.delete(id);
-      } else {
-        set.add(id);
-      }
-      return { ...prev, gameTypeFilter: Array.from(set) };
-    });
-  };
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const creatorNameFilters = creatorNamesText
-      .split(',')
-      .map((s) => s.trim())
-      .filter(Boolean);
-    onSubmit({ ...form, creatorNameFilters });
-  };
-
-  const handleReset = () => {
-    setForm(DEFAULT_GAME_FILTERS);
-    setCreatorNamesText('');
-  };
-
-  return (
-    <Dialog className="FilterGamesDialog" open={isOpen} onClose={onCancel} maxWidth="sm" fullWidth>
-      <DialogTitle>Filter games</DialogTitle>
-      <form onSubmit={handleSubmit}>
-        <DialogContent className="dialog-content filter-games-dialog__body">
-          <TextField
-            autoFocus
-            fullWidth
-            margin="dense"
-            size="small"
-            label="Game description contains"
-            value={form.gameNameFilter}
-            onChange={(e) => update('gameNameFilter', e.target.value)}
-          />
-          <TextField
-            fullWidth
-            margin="dense"
-            size="small"
-            label="Creator names (comma-separated)"
-            value={creatorNamesText}
-            onChange={(e) => setCreatorNamesText(e.target.value)}
-          />
-          <div className="filter-games-dialog__row">
-            <TextField
-              margin="dense"
-              size="small"
-              label="Min players"
-              type="number"
-              slotProps={{ htmlInput: { min: 0, max: 99 } }}
-              value={form.maxPlayersFilterMin}
-              onChange={(e) => update('maxPlayersFilterMin', Number(e.target.value))}
-            />
-            <TextField
-              margin="dense"
-              size="small"
-              label="Max players"
-              type="number"
-              slotProps={{ htmlInput: { min: 0, max: 99 } }}
-              value={form.maxPlayersFilterMax}
-              onChange={(e) => update('maxPlayersFilterMax', Number(e.target.value))}
-            />
-          </div>
-
-          <FormControl margin="dense" size="small" fullWidth>
-            <InputLabel id="filter-games-max-age-label">Max age</InputLabel>
-            <Select
-              labelId="filter-games-max-age-label"
-              label="Max age"
-              value={form.maxGameAgeSeconds}
-              onChange={(e) => update('maxGameAgeSeconds', Number(e.target.value))}
-            >
-              {MAX_AGE_OPTIONS.map((opt) => (
-                <MenuItem key={opt.seconds} value={opt.seconds}>{opt.label}</MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-
-          {gameTypes.length > 0 && (
-            <div className="filter-games-dialog__section">
-              <Typography variant="subtitle2">Game types</Typography>
-              {gameTypes.map(({ id, name }) => (
-                <FormControlLabel
-                  key={id}
-                  control={
-                    <Checkbox
-                      size="small"
-                      checked={form.gameTypeFilter.includes(id)}
-                      onChange={() => toggleGameType(id)}
-                    />
-                  }
-                  label={name}
-                />
-              ))}
-            </div>
-          )}
-
-          <div className="filter-games-dialog__section">
-            <Typography variant="subtitle2">Hide</Typography>
-            <FormControlLabel
-              control={<Checkbox size="small" checked={form.hideFullGames} onChange={(_, c) => update('hideFullGames', c)} />}
-              label="Hide full games"
-            />
-            <FormControlLabel
-              control={<Checkbox size="small" checked={form.hideGamesThatStarted} onChange={(_, c) => update('hideGamesThatStarted', c)} />}
-              label="Hide games that started"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.hidePasswordProtectedGames}
-                  onChange={(_, c) => update('hidePasswordProtectedGames', c)}
-                />
-              }
-              label="Hide password-protected games"
-            />
-            <FormControlLabel
-              control={<Checkbox size="small" checked={form.hideBuddiesOnlyGames} onChange={(_, c) => update('hideBuddiesOnlyGames', c)} />}
-              label="Hide buddies-only games"
-            />
-            <FormControlLabel
-              control={<Checkbox size="small" checked={form.hideIgnoredUserGames} onChange={(_, c) => update('hideIgnoredUserGames', c)} />}
-              label="Hide games created by ignored users"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.hideNotBuddyCreatedGames}
-                  onChange={(_, c) => update('hideNotBuddyCreatedGames', c)}
-                />
-              }
-              label="Hide games not created by buddies"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.hideOpenDecklistGames}
-                  onChange={(_, c) => update('hideOpenDecklistGames', c)}
-                />
-              }
-              label="Hide open-decklist games"
-            />
-          </div>
-
-          <div className="filter-games-dialog__section">
-            <Typography variant="subtitle2">Spectator filters</Typography>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.showOnlyIfSpectatorsCanWatch}
-                  onChange={(_, c) => update('showOnlyIfSpectatorsCanWatch', c)}
-                />
-              }
-              label="Show only games where spectators can watch"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.showSpectatorPasswordProtected}
-                  onChange={(_, c) => update('showSpectatorPasswordProtected', c)}
-                  disabled={!form.showOnlyIfSpectatorsCanWatch}
-                />
-              }
-              label="Show games where spectators need a password"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.showOnlyIfSpectatorsCanChat}
-                  onChange={(_, c) => update('showOnlyIfSpectatorsCanChat', c)}
-                  disabled={!form.showOnlyIfSpectatorsCanWatch}
-                />
-              }
-              label="Show only games where spectators can chat"
-            />
-            <FormControlLabel
-              control={
-                <Checkbox
-                  size="small"
-                  checked={form.showOnlyIfSpectatorsCanSeeHands}
-                  onChange={(_, c) => update('showOnlyIfSpectatorsCanSeeHands', c)}
-                  disabled={!form.showOnlyIfSpectatorsCanWatch}
-                />
-              }
-              label="Show only games where spectators see hands"
-            />
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button type="button" onClick={handleReset}>Reset</Button>
-          <Button type="button" onClick={onCancel}>Cancel</Button>
-          <Button type="submit" variant="contained" color="primary">Apply</Button>
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-}
-
-export default FilterGamesDialog;
diff --git a/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.css b/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.css
deleted file mode 100644
index 59db1296a..000000000
--- a/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.css
+++ /dev/null
@@ -1,60 +0,0 @@
-.game-info-dialog__body {
-  min-width: 360px;
-}
-
-.game-info-dialog__dl {
-  display: grid;
-  grid-template-columns: 110px 1fr;
-  gap: 4px 12px;
-  margin: 0;
-}
-
-.game-info-dialog__dl dt {
-  font-weight: 600;
-  color: #5a6a8a;
-}
-
-.game-info-dialog__dl dd {
-  margin: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-.game-info-dialog__section {
-  margin-top: 8px;
-}
-
-.game-info-dialog__players {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.game-info-dialog__players li {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.game-info-dialog__player-name {
-  font-weight: 600;
-}
-
-.game-info-dialog__player-tags {
-  display: inline-flex;
-  gap: 4px;
-}
-
-.game-info-dialog__tag {
-  padding: 1px 6px;
-  background: #17223d;
-  border: 1px solid #233a68;
-  color: #b8c7e5;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  border-radius: 3px;
-}
diff --git a/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.spec.tsx b/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.spec.tsx
deleted file mode 100644
index 9eaba5257..000000000
--- a/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.spec.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { makeStoreState, renderWithProviders, makeUser } from '../../__test-utils__';
-import {
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-} from '../../store/game/__mocks__/fixtures';
-import GameInfoDialog from './GameInfoDialog';
-
-function stateWithGame(overrides: Partial<Parameters<typeof makeGameEntry>[0]> = {}) {
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          hostId: 1,
-          localPlayerId: 1,
-          started: true,
-          secondsElapsed: 3723,
-          players: {
-            1: makePlayerEntry({
-              properties: makePlayerProperties({
-                playerId: 1,
-                userInfo: makeUser({ name: 'Alice' }),
-              }),
-            }),
-            2: makePlayerEntry({
-              properties: makePlayerProperties({
-                playerId: 2,
-                userInfo: makeUser({ name: 'Bob' }),
-              }),
-            }),
-          },
-          ...overrides,
-        }),
-      },
-    },
-  });
-}
-
-describe('GameInfoDialog', () => {
-  it('renders game id, started flag, elapsed, and host name', () => {
-    renderWithProviders(
-      <GameInfoDialog isOpen gameId={1} onClose={() => {}} />,
-      { preloadedState: stateWithGame() },
-    );
-
-    expect(screen.getByText(/game id/i)).toBeInTheDocument();
-    expect(screen.getByText(/elapsed/i)).toBeInTheDocument();
-    expect(screen.getByText('01:02:03')).toBeInTheDocument();
-    // Alice appears twice: once as the Host <dd>, once in the players list.
-    expect(screen.getAllByText('Alice').length).toBeGreaterThan(0);
-  });
-
-  it('tags the local player with "you" and the host with "host"', () => {
-    renderWithProviders(
-      <GameInfoDialog isOpen gameId={1} onClose={() => {}} />,
-      { preloadedState: stateWithGame() },
-    );
-
-    // Scope to the player-list row, not the Host <dd>.
-    const aliceNameSpans = screen
-      .getAllByText('Alice')
-      .filter((el) => el.classList.contains('game-info-dialog__player-name'));
-    const aliceRow = aliceNameSpans[0].closest('li')!;
-    expect(aliceRow.textContent).toMatch(/host/);
-    expect(aliceRow.textContent).toMatch(/you/);
-  });
-
-  it('calls onClose when the close button is clicked', () => {
-    const onClose = vi.fn();
-    renderWithProviders(
-      <GameInfoDialog isOpen gameId={1} onClose={onClose} />,
-      { preloadedState: stateWithGame() },
-    );
-
-    // Two buttons match /close/i: the header IconButton (aria-label) and the
-    // text "Close" button in the dialog footer. Use the footer one explicitly.
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('returns null when the game is missing', () => {
-    const { container } = renderWithProviders(
-      <GameInfoDialog isOpen gameId={999} onClose={() => {}} />,
-      { preloadedState: stateWithGame() },
-    );
-    expect(container.querySelector('.GameInfoDialog')).toBeNull();
-  });
-});
diff --git a/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.tsx b/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.tsx
deleted file mode 100644
index c2dce6850..000000000
--- a/webclient/src/dialogs/GameInfoDialog/GameInfoDialog.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import CloseIcon from '@mui/icons-material/Close';
-
-import { GameSelectors, useAppSelector } from '@app/store';
-
-import './GameInfoDialog.css';
-
-const PREFIX = 'GameInfoDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface GameInfoDialogProps {
-  isOpen: boolean;
-  gameId: number | undefined;
-  onClose: () => void;
-}
-
-function formatElapsed(totalSeconds: number): string {
-  const s = Math.max(0, Math.floor(totalSeconds));
-  const hh = String(Math.floor(s / 3600)).padStart(2, '0');
-  const mm = String(Math.floor((s % 3600) / 60)).padStart(2, '0');
-  const ss = String(s % 60).padStart(2, '0');
-  return `${hh}:${mm}:${ss}`;
-}
-
-/**
- * Read-only summary of the current game: id, description, elapsed time,
- * and a role-tagged player list. Mirrors desktop's Game Info popup on the
- * Player menu.
- */
-function GameInfoDialog({ isOpen, gameId, onClose }: GameInfoDialogProps) {
-  const game = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getGame(state, gameId) : undefined,
-  );
-
-  if (!game) {
-    return null;
-  }
-
-  const description = game.info?.description ?? '';
-  const name = game.info?.description ?? `Game ${game.info?.gameId ?? gameId ?? '—'}`;
-  const players = Object.values(game.players);
-
-  return (
-    <StyledDialog
-      className={'GameInfoDialog ' + classes.root}
-      open={isOpen}
-      onClose={onClose}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">Game info</Typography>
-          <IconButton onClick={onClose} size="large" aria-label="close game info">
-            <CloseIcon fontSize="large" />
-          </IconButton>
-        </div>
-      </DialogTitle>
-      <DialogContent className="dialog-content game-info-dialog__body">
-        <dl className="game-info-dialog__dl">
-          <dt>Game ID</dt>
-          <dd>{String(game.info?.gameId ?? gameId ?? '—')}</dd>
-          <dt>Name</dt>
-          <dd>{name || '(no description)'}</dd>
-          <dt>Description</dt>
-          <dd>{description || '(none)'}</dd>
-          <dt>Started</dt>
-          <dd>{game.started ? 'Yes' : 'No'}</dd>
-          <dt>Elapsed</dt>
-          <dd>{formatElapsed(game.secondsElapsed)}</dd>
-          <dt>Host</dt>
-          <dd>{
-            players.find((p) => p.properties.playerId === game.hostId)
-              ?.properties.userInfo?.name ?? `p${game.hostId}`
-          }</dd>
-        </dl>
-        <hr />
-        <Typography variant="h3" className="game-info-dialog__section">Players</Typography>
-        <ul className="game-info-dialog__players">
-          {players.map((p) => {
-            const pid = p.properties.playerId;
-            const pname = p.properties.userInfo?.name ?? `p${pid}`;
-            const tags: string[] = [];
-            if (pid === game.hostId) {
-              tags.push('host');
-            }
-            if (p.properties.spectator) {
-              tags.push('spectator');
-            }
-            if (p.properties.judge) {
-              tags.push('judge');
-            }
-            if (pid === game.localPlayerId) {
-              tags.push('you');
-            }
-            return (
-              <li key={pid}>
-                <span className="game-info-dialog__player-name">{pname}</span>
-                {tags.length > 0 && (
-                  <span className="game-info-dialog__player-tags">
-                    {tags.map((t) => (
-                      <span key={t} className="game-info-dialog__tag">{t}</span>
-                    ))}
-                  </span>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </DialogContent>
-      <DialogActions>
-        <Button type="button" onClick={onClose} autoFocus>Close</Button>
-      </DialogActions>
-    </StyledDialog>
-  );
-}
-
-export default GameInfoDialog;
diff --git a/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.css b/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.css
index 66cd7d989..e8a350f0d 100644
--- a/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.css
+++ b/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.css
@@ -1,8 +1,26 @@
+.KnownHostDialog {
+
+}
+
 .KnownHostDialog .MuiDialog-paper {
   width: 100%;
   max-width: 420px;
 }
 
+.dialog-title__wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid;
+  padding-bottom: 10px;
+}
+
+.dialog-title__label {
+  display: flex;
+  align-items: center;
+}
+
 .dialog-content__subtitle.MuiTypography-root {
   margin-bottom: 20px;
 }
diff --git a/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx b/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx
index 8a7a9a9b2..193b0facd 100644
--- a/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx
+++ b/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx
@@ -1,40 +1,62 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
-import type { KnownHostFormValues } from '@app/forms';
 import { KnownHostForm } from '@app/forms';
-import type { HostDTO } from '@app/services';
-
-import AuthDialogShell from '../AuthDialogShell/AuthDialogShell';
 
 import './KnownHostDialog.css';
 
-interface KnownHostDialogProps {
-  isOpen: boolean;
-  handleClose?: () => void;
-  onRemove: (host: HostDTO) => void;
-  onSubmit: (values: KnownHostFormValues) => void;
-  host?: HostDTO;
-}
+const PREFIX = 'KnownHostDialog';
 
-const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: KnownHostDialogProps) => {
+const classes = {
+  root: `${PREFIX}-root`
+};
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+  [`&.${classes.root}`]: {
+    '& .dialog-title__wrapper': {
+      borderColor: theme.palette.grey[300]
+    }
+  }
+}));
+
+const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: any) => {
   const { t } = useTranslation();
 
   const mode = host ? 'edit' : 'add';
 
+  const handleOnClose = () => {
+    if (handleClose) {
+      handleClose();
+    }
+  };
+
   return (
-    <AuthDialogShell
-      className="KnownHostDialog"
-      contentClassName="dialog-content"
-      isOpen={isOpen}
-      handleClose={handleClose}
-      title={t('KnownHostDialog.title', { mode })}
-    >
-      <Typography className="dialog-content__subtitle" variant="subtitle1">
-        {t('KnownHostDialog.subtitle')}
-      </Typography>
-      <KnownHostForm onRemove={onRemove} onSubmit={onSubmit} host={host} />
-    </AuthDialogShell>
+    <StyledDialog className={'KnownHostDialog ' + classes.root} onClose={handleOnClose} open={isOpen}>
+      <DialogTitle className='dialog-title'>
+        <div className='dialog-title__wrapper'>
+          <Typography variant='h2'>{ t('KnownHostDialog.title', { mode }) }</Typography>
+
+          {handleClose ? (
+            <IconButton onClick={handleClose} size="large">
+              <CloseIcon fontSize='large' />
+            </IconButton>
+          ) : null}
+        </div>
+      </DialogTitle>
+      <DialogContent className='dialog-content'>
+        <Typography className='dialog-content__subtitle' variant='subtitle1'>
+          { t('KnownHostDialog.subtitle') }
+        </Typography>
+        <KnownHostForm onRemove={onRemove} onSubmit={onSubmit} host={host}></KnownHostForm>
+      </DialogContent>
+    </StyledDialog>
   );
 };
 
diff --git a/webclient/src/dialogs/PromptDialog/PromptDialog.css b/webclient/src/dialogs/PromptDialog/PromptDialog.css
deleted file mode 100644
index 36bf012d2..000000000
--- a/webclient/src/dialogs/PromptDialog/PromptDialog.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.PromptDialog .MuiDialog-paper {
-  width: 400px;
-  max-width: 400px;
-}
diff --git a/webclient/src/dialogs/PromptDialog/PromptDialog.spec.tsx b/webclient/src/dialogs/PromptDialog/PromptDialog.spec.tsx
deleted file mode 100644
index eacd1ab86..000000000
--- a/webclient/src/dialogs/PromptDialog/PromptDialog.spec.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import PromptDialog from './PromptDialog';
-
-describe('PromptDialog', () => {
-  it('does not render content when closed', () => {
-    render(
-      <PromptDialog
-        isOpen={false}
-        title="Set P/T"
-        label="P/T"
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-
-  it('renders title, label, OK, Cancel when open', () => {
-    render(
-      <PromptDialog
-        isOpen
-        title="Set P/T"
-        label="P/T"
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    expect(screen.getByText('Set P/T')).toBeInTheDocument();
-    expect(screen.getByLabelText('P/T')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /ok/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-  });
-
-  it('seeds the input with initialValue', () => {
-    render(
-      <PromptDialog
-        isOpen
-        title="Edit"
-        label="Value"
-        initialValue="42"
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    const input = screen.getByLabelText('Value') as HTMLInputElement;
-    expect(input.value).toBe('42');
-  });
-
-  it('dispatches onSubmit with the typed value on submit', () => {
-    const onSubmit = vi.fn();
-    render(
-      <PromptDialog
-        isOpen
-        title="Draw N"
-        label="Cards"
-        onSubmit={onSubmit}
-        onCancel={() => {}}
-      />,
-    );
-
-    fireEvent.change(screen.getByLabelText('Cards'), { target: { value: '7' } });
-    fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith('7');
-  });
-
-  it('dispatches onCancel when Cancel is clicked', () => {
-    const onCancel = vi.fn();
-    render(
-      <PromptDialog
-        isOpen
-        title="Draw N"
-        label="Cards"
-        onSubmit={() => {}}
-        onCancel={onCancel}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-
-    expect(onCancel).toHaveBeenCalled();
-  });
-
-  it('honors a custom submitLabel', () => {
-    render(
-      <PromptDialog
-        isOpen
-        title="Edit"
-        label="Value"
-        submitLabel="Save"
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
-  });
-
-  it('blocks submit and shows the validator error when validation fails', () => {
-    const onSubmit = vi.fn();
-    const validate = (v: string) => (v === '' ? 'required' : null);
-    render(
-      <PromptDialog
-        isOpen
-        title="Draw N"
-        label="Cards"
-        validate={validate}
-        onSubmit={onSubmit}
-        onCancel={() => {}}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(screen.getByText('required')).toBeInTheDocument();
-  });
-
-  it('clears the validator error once the user starts typing again', () => {
-    const validate = (v: string) => (v === '' ? 'required' : null);
-    render(
-      <PromptDialog
-        isOpen
-        title="Draw N"
-        label="Cards"
-        validate={validate}
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-    expect(screen.getByText('required')).toBeInTheDocument();
-
-    fireEvent.change(screen.getByLabelText('Cards'), { target: { value: '3' } });
-    expect(screen.queryByText('required')).not.toBeInTheDocument();
-  });
-
-  it('shows persistent helperText when there is no validation error', () => {
-    render(
-      <PromptDialog
-        isOpen
-        title="Take mulligan"
-        label="New hand size"
-        helperText="0 and lower are in comparison to current hand size."
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-    expect(
-      screen.getByText('0 and lower are in comparison to current hand size.'),
-    ).toBeInTheDocument();
-  });
-
-  it('replaces helperText with the validator error when validation fails', () => {
-    const validate = (v: string) => (v === '' ? 'required' : null);
-    render(
-      <PromptDialog
-        isOpen
-        title="Take mulligan"
-        label="New hand size"
-        helperText="0 and lower are in comparison to current hand size."
-        validate={validate}
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: /ok/i }));
-    expect(screen.getByText('required')).toBeInTheDocument();
-    expect(
-      screen.queryByText('0 and lower are in comparison to current hand size.'),
-    ).not.toBeInTheDocument();
-  });
-
-  it('resets the value when reopened with a new initialValue', () => {
-    const { rerender } = render(
-      <PromptDialog
-        isOpen={false}
-        title="Edit"
-        label="V"
-        initialValue="old"
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    rerender(
-      <PromptDialog
-        isOpen
-        title="Edit"
-        label="V"
-        initialValue="new"
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-
-    const input = screen.getByLabelText('V') as HTMLInputElement;
-    expect(input.value).toBe('new');
-  });
-});
diff --git a/webclient/src/dialogs/PromptDialog/PromptDialog.tsx b/webclient/src/dialogs/PromptDialog/PromptDialog.tsx
deleted file mode 100644
index 708cbe0d3..000000000
--- a/webclient/src/dialogs/PromptDialog/PromptDialog.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-
-import { usePromptDialog } from './usePromptDialog';
-
-import './PromptDialog.css';
-
-const PREFIX = 'PromptDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface PromptDialogProps {
-  isOpen: boolean;
-  title: string;
-  label: string;
-  initialValue?: string;
-  submitLabel?: string;
-  /** Persistent helper text shown when no validation error is active. */
-  helperText?: string;
-  validate?: (value: string) => string | null;
-  onSubmit: (value: string) => void;
-  onCancel: () => void;
-}
-
-function PromptDialog({
-  isOpen,
-  title,
-  label,
-  initialValue = '',
-  submitLabel = 'OK',
-  helperText,
-  validate,
-  onSubmit,
-  onCancel,
-}: PromptDialogProps) {
-  const { value, error, handleChange, handleSubmit } = usePromptDialog({
-    isOpen,
-    initialValue,
-    validate,
-    onSubmit,
-  });
-
-  return (
-    <StyledDialog
-      className={'PromptDialog ' + classes.root}
-      open={isOpen}
-      onClose={onCancel}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">{title}</Typography>
-        </div>
-      </DialogTitle>
-      <form onSubmit={handleSubmit}>
-        <DialogContent className="dialog-content">
-          <TextField
-            autoFocus
-            fullWidth
-            variant="outlined"
-            size="small"
-            label={label}
-            value={value}
-            onChange={(e) => handleChange(e.target.value)}
-            error={error != null}
-            helperText={error ?? helperText ?? ''}
-            slotProps={{ htmlInput: { 'aria-label': label } }}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button type="button" onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button type="submit" variant="contained" color="primary">
-            {submitLabel}
-          </Button>
-        </DialogActions>
-      </form>
-    </StyledDialog>
-  );
-}
-
-export default PromptDialog;
diff --git a/webclient/src/dialogs/PromptDialog/usePromptDialog.ts b/webclient/src/dialogs/PromptDialog/usePromptDialog.ts
deleted file mode 100644
index 01e23500d..000000000
--- a/webclient/src/dialogs/PromptDialog/usePromptDialog.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export interface PromptDialogHandle {
-  value: string;
-  error: string | null;
-  handleChange: (v: string) => void;
-  handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
-}
-
-export interface UsePromptDialogArgs {
-  isOpen: boolean;
-  initialValue: string;
-  validate?: (value: string) => string | null;
-  onSubmit: (value: string) => void;
-}
-
-export function usePromptDialog({
-  isOpen,
-  initialValue,
-  validate,
-  onSubmit,
-}: UsePromptDialogArgs): PromptDialogHandle {
-  const [value, setValue] = useState(initialValue);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      setValue(initialValue);
-      setError(null);
-    }
-  }, [isOpen, initialValue]);
-
-  const handleChange = (v: string) => {
-    setValue(v);
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const handleSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
-    e?.preventDefault();
-    if (validate) {
-      const message = validate(value);
-      if (message) {
-        setError(message);
-        return;
-      }
-    }
-    onSubmit(value);
-  };
-
-  return { value, error, handleChange, handleSubmit };
-}
diff --git a/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.css b/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.css
index 6ffc5e851..73822f190 100644
--- a/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.css
+++ b/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.css
@@ -1,4 +1,10 @@
-.dialog-content {
-  width: 700px;
-  max-width: 100%;
-}
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-content {
+  width: 700px;
+  max-width: 100%;
+}
diff --git a/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx b/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx
index dd3a7941a..a4ab8aef5 100644
--- a/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx
+++ b/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx
@@ -1,32 +1,38 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
-import type { RegisterFormValues } from '@app/forms';
 import { RegisterForm } from '@app/forms';
 
-import AuthDialogShell from '../AuthDialogShell/AuthDialogShell';
-
 import './RegistrationDialog.css';
 
-interface RegistrationDialogProps {
-  isOpen: boolean;
-  handleClose?: () => void;
-  onSubmit: (values: RegisterFormValues) => void;
-}
-
-const RegistrationDialog = ({ handleClose, isOpen, onSubmit }: RegistrationDialogProps) => {
+const RegistrationDialog = ({ handleClose, isOpen, onSubmit }: any) => {
   const { t } = useTranslation();
 
+  const handleOnClose = () => {
+    handleClose();
+  }
+
   return (
-    <AuthDialogShell
-      className="RegistrationDialog"
-      contentClassName="dialog-content"
-      isOpen={isOpen}
-      handleClose={handleClose}
-      title={t('RegistrationDialog.title')}
-      maxWidth="xl"
-    >
-      <RegisterForm onSubmit={onSubmit} />
-    </AuthDialogShell>
+    <Dialog className="RegistrationDialog" onClose={handleOnClose} open={isOpen} maxWidth='xl'>
+      <DialogTitle className="dialog-title">
+        <Typography variant="h6">{ t('RegistrationDialog.title') }</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose} size="large">
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent className="dialog-content">
+        <RegisterForm onSubmit={onSubmit}></RegisterForm>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/webclient/src/dialogs/AuthDialogShell/AuthDialogShell.css b/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.css
similarity index 60%
rename from webclient/src/dialogs/AuthDialogShell/AuthDialogShell.css
rename to webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.css
index a70ab9f2b..731927c13 100644
--- a/webclient/src/dialogs/AuthDialogShell/AuthDialogShell.css
+++ b/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.css
@@ -1,9 +1,5 @@
-.dialog-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.MuiDialogTitle-root.dialog-title {
-  padding-bottom: 0;
-}
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx b/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx
index f0faa18e0..96c7b82a8 100644
--- a/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx
+++ b/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx
@@ -1,33 +1,38 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
-import type { RequestPasswordResetFormValues } from '@app/forms';
 import { RequestPasswordResetForm } from '@app/forms';
 
-import AuthDialogShell from '../AuthDialogShell/AuthDialogShell';
+import './RequestPasswordResetDialog.css';
 
-interface RequestPasswordResetDialogProps {
-  isOpen: boolean;
-  handleClose?: () => void;
-  onSubmit: (values: RequestPasswordResetFormValues) => void;
-  skipTokenRequest: (userName: string) => void;
-}
-
-const RequestPasswordResetDialog = ({
-  handleClose,
-  isOpen,
-  onSubmit,
-  skipTokenRequest,
-}: RequestPasswordResetDialogProps) => {
+const RequestPasswordResetDialog = ({ handleClose, isOpen, onSubmit, skipTokenRequest }: any) => {
   const { t } = useTranslation();
 
+  const handleOnClose = () => {
+    handleClose();
+  }
+
   return (
-    <AuthDialogShell
-      isOpen={isOpen}
-      handleClose={handleClose}
-      title={t('RequestPasswordResetDialog.title')}
-    >
-      <RequestPasswordResetForm onSubmit={onSubmit} skipTokenRequest={skipTokenRequest} />
-    </AuthDialogShell>
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle className="dialog-title">
+        <Typography variant="h6">{ t('RequestPasswordResetDialog.title') }</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose} size="large">
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <RequestPasswordResetForm onSubmit={onSubmit} skipTokenRequest={skipTokenRequest}></RequestPasswordResetForm>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.css b/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.css
new file mode 100644
index 000000000..731927c13
--- /dev/null
+++ b/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.css
@@ -0,0 +1,5 @@
+.dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx b/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx
index 749666c87..5c77aaef5 100644
--- a/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx
+++ b/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx
@@ -1,28 +1,38 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
-import type { ResetPasswordFormValues } from '@app/forms';
 import { ResetPasswordForm } from '@app/forms';
 
-import AuthDialogShell from '../AuthDialogShell/AuthDialogShell';
+import './ResetPasswordDialog.css';
 
-interface ResetPasswordDialogProps {
-  isOpen: boolean;
-  handleClose?: () => void;
-  onSubmit: (values: ResetPasswordFormValues) => void;
-  userName?: string;
-}
-
-const ResetPasswordDialog = ({ handleClose, isOpen, onSubmit, userName }: ResetPasswordDialogProps) => {
+const ResetPasswordDialog = ({ handleClose, isOpen, onSubmit, userName }: any) => {
   const { t } = useTranslation();
 
+  const handleOnClose = () => {
+    handleClose();
+  }
+
   return (
-    <AuthDialogShell
-      isOpen={isOpen}
-      handleClose={handleClose}
-      title={t('ResetPasswordDialog.title')}
-    >
-      <ResetPasswordForm onSubmit={onSubmit} userName={userName} />
-    </AuthDialogShell>
+    <Dialog onClose={handleOnClose} open={isOpen}>
+      <DialogTitle className="dialog-title">
+        <Typography variant="h6">{t('ResetPasswordDialog.title')}</Typography>
+
+        {handleOnClose ? (
+          <IconButton onClick={handleOnClose} size="large">
+            <CloseIcon />
+          </IconButton>
+        ) : null}
+      </DialogTitle>
+      <DialogContent>
+        <ResetPasswordForm onSubmit={onSubmit} userName={userName}/>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.css b/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.css
deleted file mode 100644
index ef5732f08..000000000
--- a/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.reveal-cards-dialog__body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-width: 320px;
-}
-
-.reveal-cards-dialog__zone {
-  display: block;
-  margin-top: 4px;
-  color: #7f90b5;
-}
diff --git a/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.spec.tsx b/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.spec.tsx
deleted file mode 100644
index b98215a86..000000000
--- a/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.spec.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-
-import { renderWithProviders } from '../../__test-utils__';
-import RevealCardsDialog from './RevealCardsDialog';
-
-const PLAYERS = [
-  { playerId: 1, name: 'Alice' },
-  { playerId: 2, name: 'Bob' },
-];
-
-describe('RevealCardsDialog', () => {
-  it('defaults to All players and reports -1 + topCards=-1 for a zone-wide reveal', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <RevealCardsDialog
-        isOpen
-        title="Reveal hand"
-        zoneLabel="Hand"
-        players={PLAYERS}
-        onSubmit={onSubmit}
-        onCancel={() => {}}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /reveal/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith({ targetPlayerId: -1, topCards: -1 });
-  });
-
-  it('emits the selected target playerId', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <RevealCardsDialog
-        isOpen
-        title="Reveal hand"
-        zoneLabel="Hand"
-        players={PLAYERS}
-        onSubmit={onSubmit}
-        onCancel={() => {}}
-      />,
-    );
-
-    // MUI Select opens a popover; clicking the role=button for the Select.
-    fireEvent.mouseDown(screen.getByRole('combobox'));
-    fireEvent.click(screen.getByRole('option', { name: 'Bob' }));
-    fireEvent.click(screen.getByRole('button', { name: /reveal/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith({ targetPlayerId: 2, topCards: -1 });
-  });
-
-  it('validates the count input when showCountInput is true', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <RevealCardsDialog
-        isOpen
-        title="Reveal top N"
-        zoneLabel="Library"
-        showCountInput
-        defaultCount={3}
-        players={PLAYERS}
-        onSubmit={onSubmit}
-        onCancel={() => {}}
-      />,
-    );
-
-    const input = screen.getByRole('spinbutton') as HTMLInputElement;
-    expect(input.value).toBe('3');
-    fireEvent.change(input, { target: { value: '5' } });
-    fireEvent.click(screen.getByRole('button', { name: /reveal/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith({ targetPlayerId: -1, topCards: 5 });
-  });
-
-  it('rejects a non-positive count', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <RevealCardsDialog
-        isOpen
-        title="Reveal top N"
-        zoneLabel="Library"
-        showCountInput
-        players={PLAYERS}
-        onSubmit={onSubmit}
-        onCancel={() => {}}
-      />,
-    );
-
-    fireEvent.change(screen.getByRole('spinbutton'), {
-      target: { value: '0' },
-    });
-    fireEvent.click(screen.getByRole('button', { name: /reveal/i }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(screen.getByText(/enter a positive integer/i)).toBeInTheDocument();
-  });
-
-  it('calls onCancel when Cancel is clicked', () => {
-    const onCancel = vi.fn();
-    renderWithProviders(
-      <RevealCardsDialog
-        isOpen
-        title="Reveal"
-        zoneLabel="Hand"
-        players={PLAYERS}
-        onSubmit={() => {}}
-        onCancel={onCancel}
-      />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-
-    expect(onCancel).toHaveBeenCalled();
-  });
-});
diff --git a/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.tsx b/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.tsx
deleted file mode 100644
index ac2092ad9..000000000
--- a/webclient/src/dialogs/RevealCardsDialog/RevealCardsDialog.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-
-import { useRevealCardsDialog } from './useRevealCardsDialog';
-
-import './RevealCardsDialog.css';
-
-const PREFIX = 'RevealCardsDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface RevealCardsSubmit {
-  /** -1 means "all players" (desktop default). */
-  targetPlayerId: number;
-  /** -1 means "all cards in the zone" (desktop uses -1 for full-hand/full-grave reveals). */
-  topCards: number;
-}
-
-export interface RevealCardsDialogProps {
-  isOpen: boolean;
-  title: string;
-  zoneLabel: string;
-  /** If true, show the "How many?" input; pair with `defaultCount` for the initial value. */
-  showCountInput?: boolean;
-  defaultCount?: number;
-  players: ReadonlyArray<{ playerId: number; name: string }>;
-  onSubmit: (args: RevealCardsSubmit) => void;
-  onCancel: () => void;
-}
-
-const ALL_PLAYERS = -1;
-
-function RevealCardsDialog({
-  isOpen,
-  title,
-  zoneLabel,
-  showCountInput = false,
-  defaultCount = 1,
-  players,
-  onSubmit,
-  onCancel,
-}: RevealCardsDialogProps) {
-  const {
-    targetPlayerId,
-    countDraft,
-    error,
-    setTargetPlayerId,
-    handleCountChange,
-    handleSubmit,
-  } = useRevealCardsDialog({ isOpen, showCountInput, defaultCount, onSubmit });
-
-  return (
-    <StyledDialog
-      className={'RevealCardsDialog ' + classes.root}
-      open={isOpen}
-      onClose={onCancel}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">{title}</Typography>
-          <Typography variant="caption" className="reveal-cards-dialog__zone">
-            From: {zoneLabel}
-          </Typography>
-        </div>
-      </DialogTitle>
-      <form onSubmit={handleSubmit}>
-        <DialogContent className="dialog-content reveal-cards-dialog__body">
-          <FormControl fullWidth size="small" variant="outlined">
-            <InputLabel id="reveal-target-label">Reveal to</InputLabel>
-            <Select
-              labelId="reveal-target-label"
-              label="Reveal to"
-              value={String(targetPlayerId)}
-              onChange={(e) => setTargetPlayerId(Number(e.target.value))}
-              slotProps={{ input: { 'aria-label': 'Reveal target' } }}
-            >
-              <MenuItem value={String(ALL_PLAYERS)}>All players</MenuItem>
-              {players.map((p) => (
-                <MenuItem key={p.playerId} value={String(p.playerId)}>
-                  {p.name}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          {showCountInput && (
-            <TextField
-              autoFocus
-              fullWidth
-              variant="outlined"
-              size="small"
-              type="number"
-              label="How many?"
-              value={countDraft}
-              onChange={(e) => handleCountChange(e.target.value)}
-              onFocus={(e) => e.currentTarget.select()}
-              error={error != null}
-              helperText={error ?? 'Enter a positive integer'}
-              slotProps={{ htmlInput: { 'aria-label': 'Reveal count', min: 1 } }}
-            />
-          )}
-        </DialogContent>
-        <DialogActions>
-          <Button type="button" onClick={onCancel}>Cancel</Button>
-          <Button type="submit" variant="contained" color="primary">Reveal</Button>
-        </DialogActions>
-      </form>
-    </StyledDialog>
-  );
-}
-
-export default RevealCardsDialog;
diff --git a/webclient/src/dialogs/RevealCardsDialog/useRevealCardsDialog.ts b/webclient/src/dialogs/RevealCardsDialog/useRevealCardsDialog.ts
deleted file mode 100644
index 0aac3bce3..000000000
--- a/webclient/src/dialogs/RevealCardsDialog/useRevealCardsDialog.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { RevealCardsSubmit } from './RevealCardsDialog';
-
-export interface RevealCardsDialogState {
-  targetPlayerId: number;
-  countDraft: string;
-  error: string | null;
-  setTargetPlayerId: (id: number) => void;
-  handleCountChange: (value: string) => void;
-  handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
-}
-
-export interface UseRevealCardsDialogArgs {
-  isOpen: boolean;
-  showCountInput: boolean;
-  defaultCount: number;
-  onSubmit: (args: RevealCardsSubmit) => void;
-}
-
-const ALL_PLAYERS = -1;
-
-export function useRevealCardsDialog({
-  isOpen,
-  showCountInput,
-  defaultCount,
-  onSubmit,
-}: UseRevealCardsDialogArgs): RevealCardsDialogState {
-  const [targetPlayerId, setTargetPlayerId] = useState<number>(ALL_PLAYERS);
-  const [countDraft, setCountDraft] = useState(String(defaultCount));
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTargetPlayerId(ALL_PLAYERS);
-      setCountDraft(String(defaultCount));
-      setError(null);
-    }
-  }, [isOpen, defaultCount]);
-
-  const handleCountChange = (value: string) => {
-    setCountDraft(value);
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const handleSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
-    e?.preventDefault();
-    let topCards = -1;
-    if (showCountInput) {
-      const n = Number(countDraft);
-      if (!Number.isInteger(n) || n < 1) {
-        setError('Enter a positive integer');
-        return;
-      }
-      topCards = n;
-    }
-    onSubmit({ targetPlayerId, topCards });
-  };
-
-  return {
-    targetPlayerId,
-    countDraft,
-    error,
-    setTargetPlayerId,
-    handleCountChange,
-    handleSubmit,
-  };
-}
diff --git a/webclient/src/dialogs/RollDieDialog/RollDieDialog.css b/webclient/src/dialogs/RollDieDialog/RollDieDialog.css
deleted file mode 100644
index c8c554d69..000000000
--- a/webclient/src/dialogs/RollDieDialog/RollDieDialog.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.RollDieDialog .MuiDialog-paper {
-  width: 320px;
-  max-width: 320px;
-}
diff --git a/webclient/src/dialogs/RollDieDialog/RollDieDialog.spec.tsx b/webclient/src/dialogs/RollDieDialog/RollDieDialog.spec.tsx
deleted file mode 100644
index 31afec227..000000000
--- a/webclient/src/dialogs/RollDieDialog/RollDieDialog.spec.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import RollDieDialog from './RollDieDialog';
-
-describe('RollDieDialog', () => {
-  it('does not render when closed', () => {
-    render(
-      <RollDieDialog isOpen={false} onSubmit={() => {}} onCancel={() => {}} />,
-    );
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-
-  it('defaults the Sides input to 6 and Count to 1', () => {
-    render(<RollDieDialog isOpen onSubmit={() => {}} onCancel={() => {}} />);
-    expect((screen.getByLabelText('Sides') as HTMLInputElement).value).toBe('6');
-    expect((screen.getByLabelText('Count') as HTMLInputElement).value).toBe('1');
-  });
-
-  it('seeds the inputs with the most recent values', () => {
-    render(
-      <RollDieDialog
-        isOpen
-        lastSides={20}
-        lastCount={4}
-        onSubmit={() => {}}
-        onCancel={() => {}}
-      />,
-    );
-    expect((screen.getByLabelText('Sides') as HTMLInputElement).value).toBe('20');
-    expect((screen.getByLabelText('Count') as HTMLInputElement).value).toBe('4');
-  });
-
-  it('dispatches onSubmit with both sides and count on Roll', () => {
-    const onSubmit = vi.fn();
-    render(<RollDieDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />);
-
-    fireEvent.change(screen.getByLabelText('Sides'), { target: { value: '6' } });
-    fireEvent.change(screen.getByLabelText('Count'), { target: { value: '4' } });
-    fireEvent.click(screen.getByRole('button', { name: /^roll$/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith({ sides: 6, count: 4 });
-  });
-
-  it('accepts sides = 1 (matches desktop)', () => {
-    const onSubmit = vi.fn();
-    render(<RollDieDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />);
-
-    fireEvent.change(screen.getByLabelText('Sides'), { target: { value: '1' } });
-    fireEvent.click(screen.getByRole('button', { name: /^roll$/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith({ sides: 1, count: 1 });
-  });
-
-  it('rejects sides < 1 and surfaces the error on the Sides field', () => {
-    const onSubmit = vi.fn();
-    render(<RollDieDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />);
-
-    fireEvent.change(screen.getByLabelText('Sides'), { target: { value: '0' } });
-    fireEvent.click(screen.getByRole('button', { name: /^roll$/i }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-    expect(screen.getByText(/integer/i)).toBeInTheDocument();
-  });
-
-  it('rejects count < 1', () => {
-    const onSubmit = vi.fn();
-    render(<RollDieDialog isOpen onSubmit={onSubmit} onCancel={() => {}} />);
-
-    fireEvent.change(screen.getByLabelText('Count'), { target: { value: '0' } });
-    fireEvent.click(screen.getByRole('button', { name: /^roll$/i }));
-
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it('dispatches onCancel on Cancel', () => {
-    const onCancel = vi.fn();
-    render(<RollDieDialog isOpen onSubmit={() => {}} onCancel={onCancel} />);
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-    expect(onCancel).toHaveBeenCalled();
-  });
-});
diff --git a/webclient/src/dialogs/RollDieDialog/RollDieDialog.tsx b/webclient/src/dialogs/RollDieDialog/RollDieDialog.tsx
deleted file mode 100644
index f6ae4210d..000000000
--- a/webclient/src/dialogs/RollDieDialog/RollDieDialog.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-
-import { useRollDieDialog } from './useRollDieDialog';
-
-import './RollDieDialog.css';
-
-const PREFIX = 'RollDieDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-/** Shared defaults; re-exported for Game.tsx's persisted "last die" state. */
-export const DEFAULT_DIE_SIDES = 6;
-export const DEFAULT_DIE_COUNT = 1;
-
-export interface RollDieDialogProps {
-  isOpen: boolean;
-  lastSides?: number;
-  lastCount?: number;
-  onSubmit: (args: { sides: number; count: number }) => void;
-  onCancel: () => void;
-}
-
-function RollDieDialog({
-  isOpen,
-  lastSides = DEFAULT_DIE_SIDES,
-  lastCount = DEFAULT_DIE_COUNT,
-  onSubmit,
-  onCancel,
-}: RollDieDialogProps) {
-  const { sides, count, error, handleSidesChange, handleCountChange, handleSubmit } =
-    useRollDieDialog({ isOpen, lastSides, lastCount, onSubmit });
-
-  return (
-    <StyledDialog
-      className={'RollDieDialog ' + classes.root}
-      open={isOpen}
-      onClose={onCancel}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">Roll die</Typography>
-        </div>
-      </DialogTitle>
-      <form onSubmit={handleSubmit}>
-        <DialogContent className="dialog-content">
-          <TextField
-            autoFocus
-            fullWidth
-            variant="outlined"
-            size="small"
-            label="Sides"
-            value={sides}
-            onChange={(e) => handleSidesChange(e.target.value)}
-            error={error?.field === 'sides'}
-            helperText={error?.field === 'sides' ? error.message : ''}
-            slotProps={{ htmlInput: { 'aria-label': 'Sides', inputMode: 'numeric' } }}
-          />
-          <TextField
-            fullWidth
-            variant="outlined"
-            size="small"
-            label="Count"
-            value={count}
-            onChange={(e) => handleCountChange(e.target.value)}
-            error={error?.field === 'count'}
-            helperText={error?.field === 'count' ? error.message : ''}
-            slotProps={{ htmlInput: { 'aria-label': 'Count', inputMode: 'numeric' } }}
-            sx={{ marginTop: '12px' }}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button type="button" onClick={onCancel}>Cancel</Button>
-          <Button type="submit" variant="contained" color="primary">Roll</Button>
-        </DialogActions>
-      </form>
-    </StyledDialog>
-  );
-}
-
-export default RollDieDialog;
diff --git a/webclient/src/dialogs/RollDieDialog/useRollDieDialog.ts b/webclient/src/dialogs/RollDieDialog/useRollDieDialog.ts
deleted file mode 100644
index c092731fc..000000000
--- a/webclient/src/dialogs/RollDieDialog/useRollDieDialog.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export interface RollDieDialogState {
-  sides: string;
-  count: string;
-  error: { field: 'sides' | 'count'; message: string } | null;
-  handleSidesChange: (value: string) => void;
-  handleCountChange: (value: string) => void;
-  handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
-}
-
-export interface UseRollDieDialogArgs {
-  isOpen: boolean;
-  lastSides: number;
-  lastCount: number;
-  onSubmit: (args: { sides: number; count: number }) => void;
-}
-
-export function useRollDieDialog({
-  isOpen,
-  lastSides,
-  lastCount,
-  onSubmit,
-}: UseRollDieDialogArgs): RollDieDialogState {
-  const [sides, setSides] = useState(String(lastSides));
-  const [count, setCount] = useState(String(lastCount));
-  const [error, setError] = useState<{ field: 'sides' | 'count'; message: string } | null>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      setSides(String(lastSides));
-      setCount(String(lastCount));
-      setError(null);
-    }
-  }, [isOpen, lastSides, lastCount]);
-
-  const handleSidesChange = (value: string) => {
-    setSides(value);
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const handleCountChange = (value: string) => {
-    setCount(value);
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const handleSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
-    e?.preventDefault();
-    const s = Number(sides);
-    if (!Number.isInteger(s) || s < 1) {
-      setError({ field: 'sides', message: 'Enter an integer ≥ 1' });
-      return;
-    }
-    const c = Number(count);
-    if (!Number.isInteger(c) || c < 1) {
-      setError({ field: 'count', message: 'Enter an integer ≥ 1' });
-      return;
-    }
-    onSubmit({ sides: s, count: c });
-  };
-
-  return { sides, count, error, handleSidesChange, handleCountChange, handleSubmit };
-}
diff --git a/webclient/src/dialogs/SideboardDialog/SideboardDialog.css b/webclient/src/dialogs/SideboardDialog/SideboardDialog.css
deleted file mode 100644
index 621c952fe..000000000
--- a/webclient/src/dialogs/SideboardDialog/SideboardDialog.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.SideboardDialog .MuiDialog-paper {
-  width: 720px;
-  max-width: 720px;
-  max-height: 80vh;
-}
-
-.sideboard-dialog__body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.sideboard-dialog__locked-note {
-  padding: 6px 10px;
-  background: rgba(255, 235, 140, 0.15);
-  border: 1px solid rgba(255, 235, 140, 0.4);
-  border-radius: 3px;
-  color: #c8d4ef;
-  font-size: 12px;
-}
-
-.sideboard-dialog__columns {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
-.sideboard-dialog__column {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.sideboard-dialog__column-heading {
-  margin: 0 0 6px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: #8597bb;
-}
-
-.sideboard-dialog__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  max-height: 400px;
-  overflow-y: auto;
-  border: 1px solid #233a68;
-  border-radius: 3px;
-  background: #0a1225;
-}
-
-.sideboard-dialog__row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 8px;
-  border-bottom: 1px solid #17223d;
-}
-
-.sideboard-dialog__row:last-child {
-  border-bottom: none;
-}
-
-.sideboard-dialog__name {
-  flex: 1;
-  color: #c8d4ef;
-  font-size: 13px;
-}
-
-.sideboard-dialog__empty {
-  padding: 12px 8px;
-  color: #5a6a8a;
-  font-style: italic;
-  text-align: center;
-}
-
-.sideboard-dialog__lock {
-  margin-left: auto !important;
-}
diff --git a/webclient/src/dialogs/SideboardDialog/SideboardDialog.spec.tsx b/webclient/src/dialogs/SideboardDialog/SideboardDialog.spec.tsx
deleted file mode 100644
index e55751f38..000000000
--- a/webclient/src/dialogs/SideboardDialog/SideboardDialog.spec.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { screen, fireEvent, within } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { renderWithProviders } from '../../__test-utils__';
-import SideboardDialog, { applyMoves } from './SideboardDialog';
-
-const DEFAULT_PROPS = {
-  isOpen: true,
-  playerName: 'P1',
-  deckCards: [
-    { id: 1, name: 'Island' },
-    { id: 2, name: 'Mountain' },
-  ],
-  sideboardCards: [
-    { id: 10, name: 'Counterspell' },
-  ],
-  isLocked: false,
-  onSubmit: () => {},
-  onCancel: () => {},
-  onToggleLock: () => {},
-};
-
-describe('SideboardDialog', () => {
-  it('renders deck and sideboard columns with counts', () => {
-    renderWithProviders(<SideboardDialog {...DEFAULT_PROPS} />);
-
-    expect(screen.getByText(/main deck \(2\)/i)).toBeInTheDocument();
-    expect(screen.getByText(/^sideboard \(1\)/i)).toBeInTheDocument();
-    expect(screen.getByText('Island')).toBeInTheDocument();
-    expect(screen.getByText('Counterspell')).toBeInTheDocument();
-  });
-
-  it('moves a card from deck to sideboard when → is clicked (local draft only)', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <SideboardDialog {...DEFAULT_PROPS} onSubmit={onSubmit} />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /move Island to sideboard/i }));
-
-    // Island now shown in the sideboard list; counts updated.
-    expect(screen.getByText(/main deck \(1\)/i)).toBeInTheDocument();
-    expect(screen.getByText(/^sideboard \(2\)/i)).toBeInTheDocument();
-    // No dispatch yet — Apply hasn't been clicked.
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it('submits the accumulated draft as a moveList when Apply is clicked', () => {
-    const onSubmit = vi.fn();
-    renderWithProviders(
-      <SideboardDialog {...DEFAULT_PROPS} onSubmit={onSubmit} />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /move Island to sideboard/i }));
-    fireEvent.click(screen.getByRole('button', { name: /move Counterspell to main deck/i }));
-    fireEvent.click(screen.getByRole('button', { name: /apply plan/i }));
-
-    expect(onSubmit).toHaveBeenCalledWith([
-      { cardName: 'Island', startZone: App.ZoneName.DECK, targetZone: App.ZoneName.SIDEBOARD },
-      { cardName: 'Counterspell', startZone: App.ZoneName.SIDEBOARD, targetZone: App.ZoneName.DECK },
-    ]);
-  });
-
-  it('disables move buttons and Apply when isLocked is true', () => {
-    renderWithProviders(<SideboardDialog {...DEFAULT_PROPS} isLocked />);
-
-    expect(screen.getByRole('button', { name: /move Island to sideboard/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /move Counterspell to main deck/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /apply plan/i })).toBeDisabled();
-    expect(screen.getByRole('note')).toHaveTextContent(/sideboard is locked/i);
-  });
-
-  it('dispatches onToggleLock when the Lock checkbox changes', () => {
-    const onToggleLock = vi.fn();
-    renderWithProviders(
-      <SideboardDialog {...DEFAULT_PROPS} onToggleLock={onToggleLock} />,
-    );
-
-    fireEvent.click(screen.getByLabelText('Lock sideboard'));
-    expect(onToggleLock).toHaveBeenCalledWith(true);
-  });
-
-  it('resets the draft when the sideboard is locked mid-edit (desktop resetSideboardPlan parity)', () => {
-    const onSubmit = vi.fn();
-    const { rerender } = renderWithProviders(
-      <SideboardDialog {...DEFAULT_PROPS} onSubmit={onSubmit} />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /move Island to sideboard/i }));
-    expect(screen.getByRole('button', { name: /apply plan \(1\)/i })).toBeInTheDocument();
-
-    rerender(<SideboardDialog {...DEFAULT_PROPS} isLocked onSubmit={onSubmit} />);
-
-    // Draft cleared — Apply label no longer carries a count and the lists
-    // reflect the original wire snapshot.
-    expect(screen.queryByRole('button', { name: /apply plan \(/i })).not.toBeInTheDocument();
-    expect(screen.getByText(/main deck \(2\)/i)).toBeInTheDocument();
-  });
-
-  it('renders (empty) when a column has no cards', () => {
-    renderWithProviders(
-      <SideboardDialog {...DEFAULT_PROPS} sideboardCards={[]} />,
-    );
-
-    const sbList = screen.getByTestId('sideboard-dialog-sb');
-    expect(within(sbList).getByText(/\(empty\)/)).toBeInTheDocument();
-  });
-
-  it('fires onCancel when the Cancel button is clicked', () => {
-    const onCancel = vi.fn();
-    renderWithProviders(
-      <SideboardDialog {...DEFAULT_PROPS} onCancel={onCancel} />,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-    expect(onCancel).toHaveBeenCalled();
-  });
-});
-
-describe('applyMoves', () => {
-  it('processes moves in order, identifying cards by name', () => {
-    const deck = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
-    const sb = [{ id: 3, name: 'C' }];
-
-    const result = applyMoves(deck, sb, [
-      { cardName: 'A', startZone: App.ZoneName.DECK, targetZone: App.ZoneName.SIDEBOARD },
-      { cardName: 'C', startZone: App.ZoneName.SIDEBOARD, targetZone: App.ZoneName.DECK },
-    ]);
-
-    expect(result.deck.map((c) => c.name).sort()).toEqual(['B', 'C']);
-    expect(result.sideboard.map((c) => c.name)).toEqual(['A']);
-  });
-
-  it('drops moves that reference cards not present in the source zone', () => {
-    const deck = [{ id: 1, name: 'A' }];
-    const result = applyMoves(deck, [], [
-      { cardName: 'Missing', startZone: App.ZoneName.DECK, targetZone: App.ZoneName.SIDEBOARD },
-    ]);
-
-    expect(result.deck).toHaveLength(1);
-    expect(result.sideboard).toHaveLength(0);
-  });
-});
diff --git a/webclient/src/dialogs/SideboardDialog/SideboardDialog.tsx b/webclient/src/dialogs/SideboardDialog/SideboardDialog.tsx
deleted file mode 100644
index 49744333e..000000000
--- a/webclient/src/dialogs/SideboardDialog/SideboardDialog.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import Tooltip from '@mui/material/Tooltip';
-
-import { App, Enriched } from '@app/types';
-
-import './SideboardDialog.css';
-
-const PREFIX = 'SideboardDialog';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  [`&.${classes.root}`]: {
-    '& .dialog-title__wrapper': {
-      borderColor: theme.palette.grey[300],
-    },
-  },
-}));
-
-export interface SideboardPlanMove {
-  cardName: string;
-  startZone: string;
-  targetZone: string;
-}
-
-export interface SideboardDialogProps {
-  isOpen: boolean;
-  playerName: string;
-  /** Snapshot of the player's deck zone at open time (identified by card.name). */
-  deckCards: ReadonlyArray<{ id: number; name: string }>;
-  /** Snapshot of the player's sideboard zone at open time. */
-  sideboardCards: ReadonlyArray<{ id: number; name: string }>;
-  /** Current persisted lock state from ServerInfo_PlayerProperties.sideboardLocked. */
-  isLocked: boolean;
-  onSubmit: (moveList: SideboardPlanMove[]) => void;
-  onCancel: () => void;
-  onToggleLock: (next: boolean) => void;
-}
-
-type Card = { id: number; name: string };
-
-// Applies a draft move sequence to the initial lists to derive the
-// currently-displayed deck and sideboard. Mirrors desktop's
-// DeckView::applyPlan logic (identify-by-name, one copy per entry).
-function applyMoves(
-  initialDeck: ReadonlyArray<Card>,
-  initialSideboard: ReadonlyArray<Card>,
-  moves: ReadonlyArray<SideboardPlanMove>,
-): { deck: Card[]; sideboard: Card[] } {
-  const deck = [...initialDeck];
-  const sideboard = [...initialSideboard];
-  for (const move of moves) {
-    const from = move.startZone === App.ZoneName.DECK ? deck : sideboard;
-    const to = move.targetZone === App.ZoneName.DECK ? deck : sideboard;
-    const idx = from.findIndex((c) => c.name === move.cardName);
-    if (idx < 0) {
-      continue;
-    }
-    const [card] = from.splice(idx, 1);
-    to.push(card);
-  }
-  return { deck, sideboard };
-}
-
-function SideboardDialog({
-  isOpen,
-  playerName,
-  deckCards,
-  sideboardCards,
-  isLocked,
-  onSubmit,
-  onCancel,
-  onToggleLock,
-}: SideboardDialogProps) {
-  const [moves, setMoves] = useState<SideboardPlanMove[]>([]);
-
-  // Reset the draft whenever the dialog opens, or when the server locks the
-  // sideboard mid-edit (desktop's resetSideboardPlan parity). Consolidated
-  // into one effect keyed on both triggers.
-  useEffect(() => {
-    if (isOpen || isLocked) {
-      setMoves([]);
-    }
-  }, [isOpen, isLocked]);
-
-  const { deck, sideboard } = useMemo(
-    () => applyMoves(deckCards, sideboardCards, moves),
-    [deckCards, sideboardCards, moves],
-  );
-
-  const addMove = (cardName: string, startZone: string, targetZone: string) => {
-    setMoves((prev) => [...prev, { cardName, startZone, targetZone }]);
-  };
-
-  const handleMoveToSideboard = (card: Card) => {
-    if (isLocked) {
-      return;
-    }
-    addMove(card.name, App.ZoneName.DECK, App.ZoneName.SIDEBOARD);
-  };
-
-  const handleMoveToDeck = (card: Card) => {
-    if (isLocked) {
-      return;
-    }
-    addMove(card.name, App.ZoneName.SIDEBOARD, App.ZoneName.DECK);
-  };
-
-  const handleApply = () => {
-    onSubmit(moves);
-  };
-
-  return (
-    <StyledDialog
-      className={'SideboardDialog ' + classes.root}
-      open={isOpen}
-      onClose={onCancel}
-      maxWidth={false}
-    >
-      <DialogTitle className="dialog-title">
-        <div className="dialog-title__wrapper">
-          <Typography variant="h2">Sideboard — {playerName}</Typography>
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={isLocked}
-                onChange={(e) => onToggleLock(e.target.checked)}
-                slotProps={{ input: { 'aria-label': 'Lock sideboard' } }}
-              />
-            }
-            label="Lock sideboard"
-            className="sideboard-dialog__lock"
-          />
-        </div>
-      </DialogTitle>
-      <DialogContent className="dialog-content sideboard-dialog__body">
-        {isLocked && (
-          <div className="sideboard-dialog__locked-note" role="note">
-            The sideboard is locked. Unlock to change your plan.
-          </div>
-        )}
-        <div className="sideboard-dialog__columns">
-          <section
-            className="sideboard-dialog__column"
-            aria-label={`Main deck (${deck.length})`}
-          >
-            <h3 className="sideboard-dialog__column-heading">
-              Main deck ({deck.length})
-            </h3>
-            <ul className="sideboard-dialog__list" data-testid="sideboard-dialog-deck">
-              {deck.map((card, idx) => (
-                <li key={`${card.id}-${idx}`} className="sideboard-dialog__row">
-                  <span className="sideboard-dialog__name">{card.name}</span>
-                  <Tooltip title={`Move ${card.name} to sideboard`}>
-                    <span>
-                      <Button
-                        type="button"
-                        size="small"
-                        onClick={() => handleMoveToSideboard(card)}
-                        disabled={isLocked}
-                        aria-label={`Move ${card.name} to sideboard`}
-                      >
-                        →
-                      </Button>
-                    </span>
-                  </Tooltip>
-                </li>
-              ))}
-              {deck.length === 0 && (
-                <li className="sideboard-dialog__empty">(empty)</li>
-              )}
-            </ul>
-          </section>
-          <section
-            className="sideboard-dialog__column"
-            aria-label={`Sideboard (${sideboard.length})`}
-          >
-            <h3 className="sideboard-dialog__column-heading">
-              Sideboard ({sideboard.length})
-            </h3>
-            <ul className="sideboard-dialog__list" data-testid="sideboard-dialog-sb">
-              {sideboard.map((card, idx) => (
-                <li key={`${card.id}-${idx}`} className="sideboard-dialog__row">
-                  <Tooltip title={`Move ${card.name} to main deck`}>
-                    <span>
-                      <Button
-                        type="button"
-                        size="small"
-                        onClick={() => handleMoveToDeck(card)}
-                        disabled={isLocked}
-                        aria-label={`Move ${card.name} to main deck`}
-                      >
-                        ←
-                      </Button>
-                    </span>
-                  </Tooltip>
-                  <span className="sideboard-dialog__name">{card.name}</span>
-                </li>
-              ))}
-              {sideboard.length === 0 && (
-                <li className="sideboard-dialog__empty">(empty)</li>
-              )}
-            </ul>
-          </section>
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <Button type="button" onClick={onCancel}>Cancel</Button>
-        <Button
-          type="button"
-          variant="contained"
-          color="primary"
-          onClick={handleApply}
-          disabled={isLocked || moves.length === 0}
-        >
-          Apply plan{moves.length > 0 ? ` (${moves.length})` : ''}
-        </Button>
-      </DialogActions>
-    </StyledDialog>
-  );
-}
-
-export default SideboardDialog;
-
-// Exported for tests and the Game.tsx wiring layer.
-export { applyMoves };
-
-// Helper to derive the card-display arrays a parent needs to pass.
-// Takes the normalized Enriched.ZoneEntry and materializes the
-// [{id, name}] shape the dialog expects.
-export function cardsFromZone(
-  zone: Enriched.ZoneEntry | undefined,
-): Card[] {
-  if (!zone) {
-    return [];
-  }
-  return zone.order.map((id) => ({ id, name: zone.byId[id]?.name ?? '' }));
-}
diff --git a/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.css b/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.css
deleted file mode 100644
index 81ccdcf4a..000000000
--- a/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.zone-view-dialog {
-  position: fixed;
-  z-index: 1200;
-  width: 720px;
-  max-width: calc(100vw - 32px);
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  background: #0a1225;
-  border: 1px solid #233a68;
-  border-radius: 6px;
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
-  color: #e5ecf7;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.zone-view-dialog__header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px 6px 14px;
-  background: #17223d;
-  border-bottom: 1px solid #233a68;
-  border-radius: 6px 6px 0 0;
-  cursor: move;
-  user-select: none;
-  touch-action: none;
-}
-
-.zone-view-dialog__title {
-  flex: 1;
-  font-size: 14px;
-  font-weight: 700;
-  color: #c8d4ef;
-}
-
-.zone-view-dialog__close {
-  color: #c8d4ef !important;
-}
-
-.zone-view-dialog__body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.zone-view-dialog__grid {
-  display: grid;
-  grid-template-columns: repeat(6, 100px);
-  gap: 10px;
-  justify-content: center;
-  padding: 4px 0 8px;
-}
-
-.zone-view-dialog__card {
-  width: 100px;
-  height: 140px;
-  border-radius: 5px;
-  overflow: hidden;
-  background: #0d1930;
-  border: 1px solid #1a2b52;
-  box-sizing: border-box;
-}
-
-.zone-view-dialog__card-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.zone-view-dialog__card-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6px;
-  box-sizing: border-box;
-  color: #c8d4ef;
-  font-size: 11px;
-  text-align: center;
-  background: linear-gradient(135deg, #17223d 0%, #0d1930 100%);
-}
-
-.zone-view-dialog__empty {
-  padding: 32px 0;
-  text-align: center;
-  color: #6a7488;
-  font-style: italic;
-}
diff --git a/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.spec.tsx b/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.spec.tsx
deleted file mode 100644
index 38eab41a9..000000000
--- a/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.spec.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { screen, fireEvent } from '@testing-library/react';
-import { App } from '@app/types';
-
-import { makeStoreState, renderWithProviders, makeUser } from '../../__test-utils__';
-import {
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from '../../store/game/__mocks__/fixtures';
-import ZoneViewDialog from './ZoneViewDialog';
-
-function stateWith(zone: Parameters<typeof makeZoneEntry>[0]) {
-  return makeStoreState({
-    games: {
-      games: {
-        1: makeGameEntry({
-          localPlayerId: 1,
-          players: {
-            1: makePlayerEntry({
-              properties: makePlayerProperties({
-                playerId: 1,
-                userInfo: makeUser({ name: 'Trajer' }),
-              }),
-              zones: {
-                [zone.name!]: makeZoneEntry(zone),
-              },
-            }),
-          },
-        }),
-      },
-    },
-  });
-}
-
-describe('ZoneViewDialog', () => {
-  it('does not render content when closed', () => {
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen={false}
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.GRAVE}
-        handleClose={() => {}}
-      />,
-      { preloadedState: stateWith({ name: App.ZoneName.GRAVE, cardCount: 0 }) },
-    );
-
-    expect(screen.queryByTestId('zone-view-dialog')).not.toBeInTheDocument();
-  });
-
-  it('renders each card in the zone with its Scryfall image', () => {
-    const cards = [
-      makeCard({ id: 1, name: 'Lightning Bolt' }),
-      makeCard({ id: 2, name: 'Counterspell' }),
-    ];
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.GRAVE}
-        handleClose={() => {}}
-      />,
-      {
-        preloadedState: stateWith({
-          name: App.ZoneName.GRAVE,
-          cards,
-          cardCount: 2,
-        }),
-      },
-    );
-
-    expect(screen.getByAltText('Lightning Bolt')).toBeInTheDocument();
-    expect(screen.getByAltText('Counterspell')).toBeInTheDocument();
-  });
-
-  it('shows the zone label in the title with the player name and count', () => {
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.GRAVE}
-        handleClose={() => {}}
-      />,
-      {
-        preloadedState: stateWith({
-          name: App.ZoneName.GRAVE,
-          cards: [makeCard({ id: 1 })],
-          cardCount: 1,
-        }),
-      },
-    );
-
-    expect(screen.getByText(/Trajer Graveyard \(1\)/)).toBeInTheDocument();
-  });
-
-  it('shows "This zone is empty." when the zone is fully empty', () => {
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.EXILE}
-        handleClose={() => {}}
-      />,
-      { preloadedState: stateWith({ name: App.ZoneName.EXILE, cardCount: 0 }) },
-    );
-
-    expect(screen.getByText(/this zone is empty/i)).toBeInTheDocument();
-  });
-
-  it('shows a hidden-card fallback for hidden zones with count > 0 and no visible cards', () => {
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.DECK}
-        handleClose={() => {}}
-      />,
-      {
-        preloadedState: stateWith({
-          name: App.ZoneName.DECK,
-          cardCount: 40,
-          cards: [],
-        }),
-      },
-    );
-
-    expect(screen.getByText(/40 hidden cards/i)).toBeInTheDocument();
-  });
-
-  it('hides the image and shows "Face Down" for face-down cards', () => {
-    const faceDown = makeCard({ id: 1, name: 'Secret', faceDown: true });
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.EXILE}
-        handleClose={() => {}}
-      />,
-      {
-        preloadedState: stateWith({
-          name: App.ZoneName.EXILE,
-          cards: [faceDown],
-          cardCount: 1,
-        }),
-      },
-    );
-
-    expect(screen.getByText('Face Down')).toBeInTheDocument();
-    expect(screen.queryByAltText('Secret')).not.toBeInTheDocument();
-  });
-
-  it('fires handleClose when the ✕ button is clicked', () => {
-    const handleClose = vi.fn();
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.GRAVE}
-        handleClose={handleClose}
-      />,
-      { preloadedState: stateWith({ name: App.ZoneName.GRAVE, cardCount: 0 }) },
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: /close zone view/i }));
-
-    expect(handleClose).toHaveBeenCalled();
-  });
-
-  it('renders a non-modal floating panel at the provided initial position', () => {
-    renderWithProviders(
-      <ZoneViewDialog
-        isOpen
-        gameId={1}
-        playerId={1}
-        zoneName={App.ZoneName.GRAVE}
-        handleClose={() => {}}
-        initialPosition={{ x: 200, y: 150 }}
-      />,
-      { preloadedState: stateWith({ name: App.ZoneName.GRAVE, cardCount: 0 }) },
-    );
-
-    const panel = screen.getByTestId('zone-view-dialog');
-    expect(panel).toHaveStyle({ left: '200px', top: '150px' });
-    expect(panel).toHaveAttribute('role', 'dialog');
-  });
-});
diff --git a/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.tsx b/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.tsx
deleted file mode 100644
index 5d7ee33ba..000000000
--- a/webclient/src/dialogs/ZoneViewDialog/ZoneViewDialog.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
-
-import { useScryfallCard } from '@app/hooks';
-import type { Data } from '@app/types';
-
-import { useZoneViewDialog } from './useZoneViewDialog';
-
-import './ZoneViewDialog.css';
-
-export interface ZoneViewDialogProps {
-  isOpen: boolean;
-  gameId: number | undefined;
-  playerId: number | undefined;
-  zoneName: string | undefined;
-  handleClose: () => void;
-  initialPosition?: { x: number; y: number };
-}
-
-function ZoneThumbnail({ card }: { card: Data.ServerInfo_Card }) {
-  const { smallUrl } = useScryfallCard(card);
-  return (
-    <div className="zone-view-dialog__card" data-testid={`zone-view-card-${card.id}`}>
-      {smallUrl && !card.faceDown ? (
-        <img src={smallUrl} alt={card.name} className="zone-view-dialog__card-image" />
-      ) : (
-        <div className="zone-view-dialog__card-placeholder">
-          {card.faceDown ? 'Face Down' : card.name}
-        </div>
-      )}
-    </div>
-  );
-}
-
-const DEFAULT_POSITION = { x: 80, y: 80 };
-
-function ZoneViewDialog({
-  isOpen,
-  gameId,
-  playerId,
-  zoneName,
-  handleClose,
-  initialPosition = DEFAULT_POSITION,
-}: ZoneViewDialogProps) {
-  const { cards, count, title, position, handlePointerDown, handlePointerMove, handlePointerUp } =
-    useZoneViewDialog({ gameId, playerId, zoneName, initialPosition });
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div
-      className="zone-view-dialog"
-      role="dialog"
-      aria-label={title}
-      data-testid="zone-view-dialog"
-      style={{ left: position.x, top: position.y }}
-    >
-      <div
-        className="zone-view-dialog__header"
-        onPointerDown={handlePointerDown}
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
-        onPointerCancel={handlePointerUp}
-      >
-        <span className="zone-view-dialog__title">{title}</span>
-        <IconButton
-          onClick={handleClose}
-          size="small"
-          aria-label="close zone view"
-          className="zone-view-dialog__close"
-        >
-          <CloseIcon fontSize="small" />
-        </IconButton>
-      </div>
-      <div className="zone-view-dialog__body">
-        {cards.length === 0 ? (
-          <div className="zone-view-dialog__empty">
-            {count > 0
-              ? `${count} hidden card${count === 1 ? '' : 's'}`
-              : 'This zone is empty.'}
-          </div>
-        ) : (
-          <div className="zone-view-dialog__grid">
-            {cards.map((card) => (
-              <ZoneThumbnail key={card.id} card={card} />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default ZoneViewDialog;
diff --git a/webclient/src/dialogs/ZoneViewDialog/useZoneViewDialog.ts b/webclient/src/dialogs/ZoneViewDialog/useZoneViewDialog.ts
deleted file mode 100644
index f0ec7c07e..000000000
--- a/webclient/src/dialogs/ZoneViewDialog/useZoneViewDialog.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useRef, useState } from 'react';
-
-import { GameSelectors, useAppSelector } from '@app/store';
-import type { Data } from '@app/types';
-
-const EMPTY_CARDS: Data.ServerInfo_Card[] = [];
-
-export interface ZoneViewDialog {
-  cards: Data.ServerInfo_Card[];
-  count: number;
-  title: string;
-  position: { x: number; y: number };
-  handlePointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
-  handlePointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;
-  handlePointerUp: (e: React.PointerEvent<HTMLDivElement>) => void;
-}
-
-export interface UseZoneViewDialogArgs {
-  gameId: number | undefined;
-  playerId: number | undefined;
-  zoneName: string | undefined;
-  initialPosition: { x: number; y: number };
-}
-
-export function zoneLabel(zoneName: string | undefined): string {
-  switch (zoneName) {
-    case 'grave': return 'Graveyard';
-    case 'rfg': return 'Exile';
-    case 'deck': return 'Library';
-    case 'sb': return 'Sideboard';
-    case 'stack': return 'Stack';
-    case 'hand': return 'Hand';
-    case 'table': return 'Battlefield';
-    default: return zoneName ?? '';
-  }
-}
-
-export function useZoneViewDialog({
-  gameId,
-  playerId,
-  zoneName,
-  initialPosition,
-}: UseZoneViewDialogArgs): ZoneViewDialog {
-  const cards = useAppSelector((state) =>
-    gameId != null && playerId != null && zoneName != null
-      ? GameSelectors.getCards(state, gameId, playerId, zoneName)
-      : EMPTY_CARDS,
-  );
-  const zone = useAppSelector((state) =>
-    gameId != null && playerId != null && zoneName != null
-      ? GameSelectors.getZone(state, gameId, playerId, zoneName)
-      : undefined,
-  );
-  const playerName = useAppSelector((state) => {
-    if (gameId == null || playerId == null) {
-      return undefined;
-    }
-    return GameSelectors.getPlayer(state, gameId, playerId)?.properties.userInfo?.name;
-  });
-
-  const count = zone?.cardCount ?? cards.length;
-  const title = `${playerName ?? ''} ${zoneLabel(zoneName)} (${count})`.trim();
-
-  // initialPosition is a caller-provided spawn point; we only honor it on mount.
-  // Later rerenders of the parent must not clobber a user's drag-positioned panel.
-  const [position, setPosition] = useState(initialPosition);
-  const dragStateRef = useRef<{
-    pointerId: number;
-    originX: number;
-    originY: number;
-    panelX: number;
-    panelY: number;
-  } | null>(null);
-
-  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (e.button !== 0) {
-      return;
-    }
-    const target = e.currentTarget;
-    target.setPointerCapture(e.pointerId);
-    dragStateRef.current = {
-      pointerId: e.pointerId,
-      originX: e.clientX,
-      originY: e.clientY,
-      panelX: position.x,
-      panelY: position.y,
-    };
-  };
-
-  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-    const drag = dragStateRef.current;
-    if (!drag || e.pointerId !== drag.pointerId) {
-      return;
-    }
-    setPosition({
-      x: drag.panelX + (e.clientX - drag.originX),
-      y: drag.panelY + (e.clientY - drag.originY),
-    });
-  };
-
-  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
-    const drag = dragStateRef.current;
-    if (!drag || e.pointerId !== drag.pointerId) {
-      return;
-    }
-    e.currentTarget.releasePointerCapture(e.pointerId);
-    dragStateRef.current = null;
-  };
-
-  return { cards, count, title, position, handlePointerDown, handlePointerMove, handlePointerUp };
-}
diff --git a/webclient/src/dialogs/index.ts b/webclient/src/dialogs/index.ts
index 178efa4c3..5c5ace1c5 100644
--- a/webclient/src/dialogs/index.ts
+++ b/webclient/src/dialogs/index.ts
@@ -1,33 +1,6 @@
 export { default as AccountActivationDialog } from './AccountActivationDialog/AccountActivationDialog';
-export { default as AlertDialog } from './AlertDialog/AlertDialog';
-export { default as AuthDialogShell } from './AuthDialogShell/AuthDialogShell';
-export type { AuthDialogShellProps } from './AuthDialogShell/AuthDialogShell';
-export type { AlertDialogProps, AlertDialogSeverity } from './AlertDialog/AlertDialog';
 export { default as CardImportDialog } from './CardImportDialog/CardImportDialog';
-export { default as ConfirmDialog } from './ConfirmDialog/ConfirmDialog';
-export { default as CreateCounterDialog } from './CreateCounterDialog/CreateCounterDialog';
-export { default as CreateGameDialog } from './CreateGameDialog/CreateGameDialog';
-export { default as CreateTokenDialog } from './CreateTokenDialog/CreateTokenDialog';
-export { default as DeckSelectDialog } from './DeckSelectDialog/DeckSelectDialog';
-export { default as FilterGamesDialog } from './FilterGamesDialog/FilterGamesDialog';
-export { default as GameInfoDialog } from './GameInfoDialog/GameInfoDialog';
 export { default as KnownHostDialog } from './KnownHostDialog/KnownHostDialog';
-export { default as PromptDialog } from './PromptDialog/PromptDialog';
 export { default as RegistrationDialog } from './RegistrationDialog/RegistrationDialog';
 export { default as RequestPasswordResetDialog } from './RequestPasswordResetDialog/RequestPasswordResetDialog';
 export { default as ResetPasswordDialog } from './ResetPasswordDialog/ResetPasswordDialog';
-export { default as RevealCardsDialog } from './RevealCardsDialog/RevealCardsDialog';
-export {
-  default as RollDieDialog,
-  DEFAULT_DIE_SIDES,
-  DEFAULT_DIE_COUNT,
-} from './RollDieDialog/RollDieDialog';
-export {
-  default as SideboardDialog,
-  cardsFromZone,
-} from './SideboardDialog/SideboardDialog';
-export type {
-  SideboardDialogProps,
-  SideboardPlanMove,
-} from './SideboardDialog/SideboardDialog';
-export { default as ZoneViewDialog } from './ZoneViewDialog/ZoneViewDialog';
diff --git a/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx b/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx
index d17d72502..4ffc9e51a 100644
--- a/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx
+++ b/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+// eslint-disable-next-line
+import React, { useState } from "react";
 import { Form, Field } from 'react-final-form';
 import { useTranslation } from 'react-i18next';
 
@@ -6,21 +7,12 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 
 import { InputField } from '@app/components';
-import type { FormErrors } from '@app/forms';
 import { useReduxEffect } from '@app/hooks';
 import { ServerTypes } from '@app/store';
 
 import './AccountActivationForm.css';
 
-export interface AccountActivationFormValues {
-  token: string;
-}
-
-interface AccountActivationFormProps {
-  onSubmit: (values: AccountActivationFormValues) => void;
-}
-
-const AccountActivationForm = ({ onSubmit }: AccountActivationFormProps) => {
+const AccountActivationForm = ({ onSubmit }) => {
   const [errorMessage, setErrorMessage] = useState(false);
   const { t } = useTranslation();
 
@@ -28,14 +20,16 @@ const AccountActivationForm = ({ onSubmit }: AccountActivationFormProps) => {
     setErrorMessage(true);
   }, ServerTypes.ACCOUNT_ACTIVATION_FAILED, []);
 
-  const handleOnSubmit = ({ token, ...values }: AccountActivationFormValues) => {
+  const handleOnSubmit = ({ token, ...values }) => {
     setErrorMessage(false);
 
-    onSubmit({ ...values, token: token?.trim() });
-  };
+    token = token?.trim();
 
-  const validate = (values: Partial<AccountActivationFormValues>): FormErrors<AccountActivationFormValues> => {
-    const errors: FormErrors<AccountActivationFormValues> = {};
+    onSubmit({ token, ...values });
+  }
+
+  const validate = values => {
+    const errors: any = {};
 
     if (!values.token) {
       errors.token = t('Common.validation.required');
diff --git a/webclient/src/forms/CardImportForm/CardImportForm.i18n.json b/webclient/src/forms/CardImportForm/CardImportForm.i18n.json
deleted file mode 100644
index 92249b8c0..000000000
--- a/webclient/src/forms/CardImportForm/CardImportForm.i18n.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "CardImportForm": {
-    "steps": {
-      "importSets": "Import sets",
-      "saveSets": "Save sets",
-      "importTokens": "Import tokens",
-      "finished": "Finished"
-    },
-    "label": {
-      "downloadUrl": "Download URL"
-    },
-    "button": {
-      "import": "Import",
-      "save": "Save",
-      "goBack": "Go Back",
-      "done": "Done"
-    },
-    "message": {
-      "finished": "Finished!",
-      "importSummary": "Import finished: {count} cards.",
-      "setSummary": "{name}: {count} cards imported",
-      "failedToSave": "Failed to save cards"
-    }
-  }
-}
diff --git a/webclient/src/forms/CardImportForm/CardImportForm.tsx b/webclient/src/forms/CardImportForm/CardImportForm.tsx
index 6ec114054..ab959ea99 100644
--- a/webclient/src/forms/CardImportForm/CardImportForm.tsx
+++ b/webclient/src/forms/CardImportForm/CardImportForm.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+
+import React, { useEffect, useState } from 'react';
 import { Form, Field } from 'react-final-form';
-import { useTranslation } from 'react-i18next';
 
 import Button from '@mui/material/Button';
 import Stepper from '@mui/material/Stepper';
@@ -9,107 +9,92 @@ import StepLabel from '@mui/material/StepLabel';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { InputField, VirtualList } from '@app/components';
-import type { App } from '@app/types';
-
-import { useCardImportForm } from './useCardImportForm';
+import { cardImporterService, CardDTO, SetDTO, TokenDTO } from '@app/services';
 
 import './CardImportForm.css';
 
-const CARDS_URL = 'https://www.mtgjson.com/api/v5/AllPrintings.json';
-const TOKENS_URL = 'https://raw.githubusercontent.com/Cockatrice/Magic-Token/master/tokens.xml';
+const CardImportForm = ({ onSubmit: onClose }) => {
 
-interface CardImportFormProps {
-  onSubmit: () => void;
-}
+  const [loading, setLoading] = useState(false);
+  const [activeStep, setActiveStep] = useState(0);
+  const [importedCards, setImportedCards] = useState([]);
+  const [importedSets, setImportedSets] = useState([]);
+  const [error, setError] = useState(null);
 
-interface BackButtonProps {
-  click: () => void;
-  disabled?: boolean;
-}
+  useEffect(() => {
+    if (loading) {
+      setError(null);
+    }
+  }, [loading])
 
-const BackButton = ({ click, disabled }: BackButtonProps) => {
-  const { t } = useTranslation();
-  return (
-    <Button onClick={click} disabled={disabled}>{t('CardImportForm.button.goBack')}</Button>
-  );
-};
+  const steps = ['Imports sets', 'Save sets', 'Import tokens', 'Finished'];
 
-interface ErrorMessageProps {
-  error: string | null;
-}
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
 
-const ErrorMessage = ({ error }: ErrorMessageProps): ReactNode => (
-  error ? <div className='error'>{error}</div> : null
-);
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
 
-interface CardsImportedProps {
-  cards: App.Card[];
-  sets: App.Set[];
-}
+  const handleCardDownload = ({ cardDownloadUrl }) => {
+    setLoading(true);
 
-const CardsImported = ({ cards, sets }: CardsImportedProps) => {
-  const { t } = useTranslation();
-  const items: ReactNode[] = [
-    (
-      <div key='import-summary'>
-        <strong>{t('CardImportForm.message.importSummary', { count: cards.length })}</strong>
-      </div>
-    ),
-    (<div key='spacer' className='spacer' />),
-    ...sets.map(set => (
-      <div key={set.code ?? set.name}>
-        {t('CardImportForm.message.setSummary', { name: set.name, count: set.cards.length })}
-      </div>
-    )),
-  ];
+    cardImporterService.importCards(cardDownloadUrl)
+      .then(({ cards, sets }) => {
+        setImportedCards(cards);
+        setImportedSets(sets);
 
-  return (
-    <div className='card-import-list'>
-      <VirtualList
-        items={items}
-        size={15}
-      />
-    </div>
-  );
-};
+        handleNext();
+      })
+      .catch(({ message }) => setError(message))
+      .finally(() => setLoading(false));
+  };
 
-const CardImportForm = ({ onSubmit: onClose }: CardImportFormProps) => {
-  const { t } = useTranslation();
-  const {
-    loading,
-    activeStep,
-    importedCards,
-    importedSets,
-    error,
-    handleBack,
-    handleCardDownload,
-    handleCardSave,
-    handleTokenDownload,
-  } = useCardImportForm();
+  const handleCardSave = async () => {
+    setLoading(true);
 
-  const steps = [
-    t('CardImportForm.steps.importSets'),
-    t('CardImportForm.steps.saveSets'),
-    t('CardImportForm.steps.importTokens'),
-    t('CardImportForm.steps.finished'),
-  ];
+    try {
+      await CardDTO.bulkAdd(importedCards);
+      await SetDTO.bulkAdd(importedSets);
 
-  const getStepContent = (stepIndex: number): ReactNode => {
+      handleNext();
+    } catch (e) {
+      console.error(e);
+      setError('Failed to save cards');
+    }
+
+    setLoading(false);
+  };
+
+  const handleTokenDownload = ({ tokenDownloadUrl }) => {
+    setLoading(true);
+
+    cardImporterService.importTokens(tokenDownloadUrl)
+      .then(async tokens => {
+        await TokenDTO.bulkAdd(tokens);
+        handleNext();
+      })
+      .catch(({ message }) => setError(message))
+      .finally(() => setLoading(false));
+  };
+
+  const getStepContent = (stepIndex) => {
     switch (stepIndex) {
       case 0: return (
         <Form
           onSubmit={handleCardDownload}
-          initialValues={{ cardDownloadUrl: CARDS_URL }}
+          initialValues={{ cardDownloadUrl: 'https://www.mtgjson.com/api/v5/AllPrintings.json' }}
         >
           {({ handleSubmit }) => (
             <form className='cardImportForm' onSubmit={handleSubmit}>
               <div className='cardImportForm-item'>
-                <Field label={t('CardImportForm.label.downloadUrl')} name='cardDownloadUrl' component={InputField} />
+                <Field label='Download URL' name='cardDownloadUrl' component={InputField} />
               </div>
 
               <div className='cardImportForm-actions'>
                 <Button color='primary' type='submit' disabled={loading}>
-                  {t('CardImportForm.button.import')}
+                  Import
                 </Button>
               </div>
 
@@ -130,7 +115,7 @@ const CardImportForm = ({ onSubmit: onClose }: CardImportFormProps) => {
           <div className='cardImportForm-actions'>
             <BackButton click={handleBack} disabled={loading} />
             <Button color='primary' onClick={handleCardSave} disabled={loading}>
-              {t('CardImportForm.button.save')}
+              Save
             </Button>
           </div>
 
@@ -143,18 +128,18 @@ const CardImportForm = ({ onSubmit: onClose }: CardImportFormProps) => {
       case 2: return (
         <Form
           onSubmit={handleTokenDownload}
-          initialValues={{ tokenDownloadUrl: TOKENS_URL }}
+          initialValues={{ tokenDownloadUrl: 'https://raw.githubusercontent.com/Cockatrice/Magic-Token/master/tokens.xml' }}
         >
           {({ handleSubmit }) => (
             <form className='cardImportForm' onSubmit={handleSubmit}>
               <div className='cardImportForm-content'>
-                <Field label={t('CardImportForm.label.downloadUrl')} name='tokenDownloadUrl' component={InputField} />
+                <Field label='Download URL' name='tokenDownloadUrl' component={InputField} />
               </div>
 
               <div className='cardImportForm-actions'>
                 <BackButton click={handleBack} disabled={loading} />
                 <Button color='primary' type='submit' disabled={loading}>
-                  {t('CardImportForm.button.import')}
+                  Import
                 </Button>
               </div>
 
@@ -168,17 +153,14 @@ const CardImportForm = ({ onSubmit: onClose }: CardImportFormProps) => {
 
       case 3: return (
         <div className='cardImportForm'>
-          <div className='cardImportForm-content done'>{t('CardImportForm.message.finished')}</div>
+          <div className='cardImportForm-content done'>Finished!</div>
 
           <div className='cardImportForm-actions'>
             <BackButton click={handleBack} disabled={loading} />
-            <Button color='primary' onClick={onClose}>{t('CardImportForm.button.done')}</Button>
+            <Button color='primary' onClick={onClose}>Done</Button>
           </div>
         </div>
       );
-
-      default:
-        throw new Error(`CardImportForm: unknown step index ${stepIndex}`);
     }
   };
 
@@ -193,14 +175,49 @@ const CardImportForm = ({ onSubmit: onClose }: CardImportFormProps) => {
       </Stepper>
 
       <div>
-        {getStepContent(activeStep)}
+        { getStepContent(activeStep) }
       </div>
 
-      {loading && (
+      { loading && (
         <div className='loading'>
           <CircularProgress size={60} />
         </div>
-      )}
+      ) }
+    </div>
+  );
+};
+
+const BackButton = ({ click, disabled }) => (
+  <Button onClick={click} disabled={disabled}>Go Back</Button>
+);
+
+const ErrorMessage = ({ error }) => {
+  return error && (
+    <div className='error'>{error}</div>
+  );
+};
+
+const CardsImported = ({ cards, sets }) => {
+  const items = [
+    (
+      <div>
+        <strong>Import finished: {cards.length} cards.</strong>
+      </div>
+    ),
+
+    (<div className='spacer' />),
+
+    ...sets.map(set => (
+      <div>{set.name}: {set.cards.length} cards imported</div>
+    ))
+  ];
+
+  return (
+    <div className='card-import-list'>
+      <VirtualList
+        items={items}
+        size={15}
+      />
     </div>
   );
 };
diff --git a/webclient/src/forms/CardImportForm/useCardImportForm.ts b/webclient/src/forms/CardImportForm/useCardImportForm.ts
deleted file mode 100644
index 404f2f9d3..000000000
--- a/webclient/src/forms/CardImportForm/useCardImportForm.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { cardImporterService, CardDTO, SetDTO, TokenDTO } from '@app/services';
-import type { App } from '@app/types';
-
-export interface CardImportForm {
-  loading: boolean;
-  activeStep: number;
-  importedCards: App.Card[];
-  importedSets: App.Set[];
-  error: string | null;
-  handleNext: () => void;
-  handleBack: () => void;
-  handleCardDownload: (args: { cardDownloadUrl: string }) => void;
-  handleCardSave: () => Promise<void>;
-  handleTokenDownload: (args: { tokenDownloadUrl: string }) => void;
-}
-
-export function useCardImportForm(): CardImportForm {
-  const [loading, setLoading] = useState(false);
-  const [activeStep, setActiveStep] = useState(0);
-  const [importedCards, setImportedCards] = useState<App.Card[]>([]);
-  const [importedSets, setImportedSets] = useState<App.Set[]>([]);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (loading) {
-      setError(null);
-    }
-  }, [loading]);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleCardDownload = ({ cardDownloadUrl }: { cardDownloadUrl: string }) => {
-    setLoading(true);
-
-    cardImporterService.importCards(cardDownloadUrl)
-      .then(({ cards, sets }) => {
-        setImportedCards(cards);
-        setImportedSets(sets);
-
-        handleNext();
-      })
-      .catch(({ message }) => setError(message))
-      .finally(() => setLoading(false));
-  };
-
-  const handleCardSave = async () => {
-    setLoading(true);
-
-    try {
-      await CardDTO.bulkAdd(importedCards);
-      await SetDTO.bulkAdd(importedSets);
-
-      handleNext();
-    } catch (e) {
-      console.error(e);
-      setError('Failed to save cards');
-    }
-
-    setLoading(false);
-  };
-
-  const handleTokenDownload = ({ tokenDownloadUrl }: { tokenDownloadUrl: string }) => {
-    setLoading(true);
-
-    cardImporterService.importTokens(tokenDownloadUrl)
-      .then(async (tokens) => {
-        await TokenDTO.bulkAdd(tokens);
-        handleNext();
-      })
-      .catch(({ message }) => setError(message))
-      .finally(() => setLoading(false));
-  };
-
-  return {
-    loading,
-    activeStep,
-    importedCards,
-    importedSets,
-    error,
-    handleNext,
-    handleBack,
-    handleCardDownload,
-    handleCardSave,
-    handleTokenDownload,
-  };
-}
diff --git a/webclient/src/forms/KnownHostForm/KnownHostForm.tsx b/webclient/src/forms/KnownHostForm/KnownHostForm.tsx
index ae07f8dd5..86dc4f85e 100644
--- a/webclient/src/forms/KnownHostForm/KnownHostForm.tsx
+++ b/webclient/src/forms/KnownHostForm/KnownHostForm.tsx
@@ -1,35 +1,21 @@
-import { useState } from 'react';
-import { Form, Field } from 'react-final-form';
+// eslint-disable-next-line
+import React, { useState } from "react";
+import { Form, Field } from 'react-final-form'
 import { useTranslation } from 'react-i18next';
 
 import Button from '@mui/material/Button';
 import AnchorLink from '@mui/material/Link';
 
 import { InputField } from '@app/components';
-import type { FormErrors } from '@app/forms';
-import type { HostDTO } from '@app/services';
 
 import './KnownHostForm.css';
 
-export interface KnownHostFormValues {
-  id?: number;
-  name: string;
-  host: string;
-  port: string;
-}
-
-interface KnownHostFormProps {
-  host?: HostDTO;
-  onRemove: (host: HostDTO) => void;
-  onSubmit: (values: KnownHostFormValues) => void;
-}
-
-const KnownHostForm = ({ host, onRemove, onSubmit }: KnownHostFormProps) => {
+const KnownHostForm = ({ host, onRemove, onSubmit }) => {
   const [confirmDelete, setConfirmDelete] = useState(false);
   const { t } = useTranslation();
 
-  const validate = (values: Partial<KnownHostFormValues>): FormErrors<KnownHostFormValues> => {
-    const errors: FormErrors<KnownHostFormValues> = {};
+  const validate = values => {
+    const errors: any = {};
 
     if (!values.name) {
       errors.name = t('Common.validation.required');
@@ -43,27 +29,17 @@ const KnownHostForm = ({ host, onRemove, onSubmit }: KnownHostFormProps) => {
       errors.port = t('Common.validation.required');
     }
 
-    return errors;
+    if (Object.keys(errors).length) {
+      return errors;
+    }
   };
 
-  const handleOnSubmit = ({ name, host: hostValue, ...values }: KnownHostFormValues) => {
-    onSubmit({
-      ...values,
-      name: name?.trim(),
-      host: hostValue?.trim(),
-    });
-  };
+  const handleOnSubmit = ({ name, host, ...values }) => {
+    name = name?.trim();
+    host = host?.trim();
 
-  const handleRemoveClick = () => {
-    if (!host) {
-      return;
-    }
-    if (!confirmDelete) {
-      setConfirmDelete(true);
-      return;
-    }
-    onRemove(host);
-  };
+    onSubmit({ name, host, ...values });
+  }
 
   return (
     <Form
@@ -95,7 +71,7 @@ const KnownHostForm = ({ host, onRemove, onSubmit }: KnownHostFormProps) => {
           <div className="KnownHostForm-actions">
             <div className="KnownHostForm-actions__delete">
               { host && (
-                <Button color="inherit" onClick={handleRemoveClick}>
+                <Button color="inherit" onClick={() => !confirmDelete ? setConfirmDelete(true) : onRemove(host)}>
                   { !confirmDelete ? t('Common.label.delete') : t('Common.label.confirmSure') }
                 </Button>
               ) }
diff --git a/webclient/src/forms/LoginForm/LoginForm.css b/webclient/src/forms/LoginForm/LoginForm.css
index 9d950caa0..4b176476f 100644
--- a/webclient/src/forms/LoginForm/LoginForm.css
+++ b/webclient/src/forms/LoginForm/LoginForm.css
@@ -18,9 +18,3 @@
 .loginForm-submit {
   width: 100%;
 }
-
-.loginForm-loading {
-  display: flex;
-  justify-content: center;
-  padding: 40px 0;
-}
diff --git a/webclient/src/forms/LoginForm/LoginForm.i18n.json b/webclient/src/forms/LoginForm/LoginForm.i18n.json
index d379ee0ca..260b88b27 100644
--- a/webclient/src/forms/LoginForm/LoginForm.i18n.json
+++ b/webclient/src/forms/LoginForm/LoginForm.i18n.json
@@ -5,7 +5,7 @@
       "forgot": "Forgot Password",
       "login": "Login",
       "savePassword": "Save Password",
-      "savedPassword": "* Saved Password *"
+      "savedPassword": "Saved Password"
     }
   }
 }
diff --git a/webclient/src/forms/LoginForm/LoginForm.spec.tsx b/webclient/src/forms/LoginForm/LoginForm.spec.tsx
index 121af8b46..0dcc8f071 100644
--- a/webclient/src/forms/LoginForm/LoginForm.spec.tsx
+++ b/webclient/src/forms/LoginForm/LoginForm.spec.tsx
@@ -28,7 +28,7 @@ beforeAll(() => {
 });
 
 describe('LoginForm — regression: settings.autoConnect is not clobbered by host state', () => {
-  test('selecting a hashed-capable host with remember=false does NOT call settings.update', () => {
+  test('selecting a host with remember=false does NOT call settings.update', () => {
     const update = vi.fn().mockResolvedValue(undefined);
 
     hoisted.mockUseSettings.mockReturnValue(
@@ -44,7 +44,6 @@ describe('LoginForm — regression: settings.autoConnect is not clobbered by hos
       remember: false,
       userName: undefined,
       hashedPassword: undefined,
-      supportsHashedPassword: true,
       lastSelected: true,
     });
     hoisted.mockUseKnownHosts.mockReturnValue(
@@ -79,7 +78,6 @@ describe('LoginForm — regression: settings.autoConnect is not clobbered by hos
       remember: true,
       userName: 'joe',
       hashedPassword: 'abc',
-      supportsHashedPassword: true,
       lastSelected: true,
     });
     hoisted.mockUseKnownHosts.mockReturnValue(
@@ -97,90 +95,3 @@ describe('LoginForm — regression: settings.autoConnect is not clobbered by hos
     expect(onSubmit).not.toHaveBeenCalled();
   });
 });
-
-describe('LoginForm — hashed-password gating', () => {
-  // The gate requires BOTH a successful test-connection AND host.supportsHashedPassword=true;
-  // preload testConnectionStatus='success' so the host flag is the only lever under test.
-  const testedState = {
-    ...disconnectedState,
-    server: { ...(disconnectedState.server as any), testConnectionStatus: 'success' as const },
-  };
-
-  const renderWith = (host: ReturnType<typeof makeHost>) => {
-    hoisted.mockUseSettings.mockReturnValue(
-      makeSettingsHook({
-        status: LoadingState.READY,
-        value: makeSettings({ autoConnect: false }),
-        update: vi.fn().mockResolvedValue(undefined),
-      })
-    );
-    hoisted.mockUseKnownHosts.mockReturnValue(
-      makeKnownHostsHook({
-        status: LoadingState.READY,
-        value: { hosts: [host], selectedHost: host },
-      })
-    );
-    return renderWithProviders(
-      <LoginForm onSubmit={vi.fn()} disableSubmitButton={false} onResetPassword={vi.fn()} />,
-      { preloadedState: testedState }
-    );
-  };
-
-  const hasRemember = (root: HTMLElement) => Boolean(root.querySelector('input[name="remember"]'));
-  const hasAutoConnect = (root: HTMLElement) =>
-    Boolean(Array.from(root.querySelectorAll('.MuiFormControlLabel-root')).find((n) =>
-      n.textContent?.includes('LoginForm.label.autoConnect'),
-    ));
-
-  test('hides Remember + Auto Connect when the host does not support hashed passwords', () => {
-    const { container } = renderWith(
-      makeHost({ id: 1, supportsHashedPassword: false, lastSelected: true })
-    );
-    expect(hasRemember(container)).toBe(false);
-    expect(hasAutoConnect(container)).toBe(false);
-  });
-
-  test('hides Remember + Auto Connect when the host has never been test-connected', () => {
-    const { container } = renderWith(
-      makeHost({ id: 1, supportsHashedPassword: undefined, lastSelected: true })
-    );
-    expect(hasRemember(container)).toBe(false);
-    expect(hasAutoConnect(container)).toBe(false);
-  });
-
-  test('shows Remember + Auto Connect when the host supports hashed passwords', () => {
-    const { container } = renderWith(
-      makeHost({ id: 1, supportsHashedPassword: true, lastSelected: true })
-    );
-    expect(hasRemember(container)).toBe(true);
-    expect(hasAutoConnect(container)).toBe(true);
-  });
-
-  test('clears settings.autoConnect when selecting a naked-password host with it previously on', () => {
-    const update = vi.fn().mockResolvedValue(undefined);
-    hoisted.mockUseSettings.mockReturnValue(
-      makeSettingsHook({
-        status: LoadingState.READY,
-        value: makeSettings({ autoConnect: true }),
-        update,
-      })
-    );
-    const host = makeHost({
-      id: 1,
-      supportsHashedPassword: false,
-      remember: true,
-      lastSelected: true,
-    });
-    hoisted.mockUseKnownHosts.mockReturnValue(
-      makeKnownHostsHook({
-        status: LoadingState.READY,
-        value: { hosts: [host], selectedHost: host },
-      })
-    );
-    renderWithProviders(
-      <LoginForm onSubmit={vi.fn()} disableSubmitButton={false} onResetPassword={vi.fn()} />,
-      { preloadedState: disconnectedState }
-    );
-    expect(update).toHaveBeenCalledWith({ autoConnect: false });
-  });
-});
diff --git a/webclient/src/forms/LoginForm/LoginForm.tsx b/webclient/src/forms/LoginForm/LoginForm.tsx
index 1bd3fb4ee..b09470f55 100644
--- a/webclient/src/forms/LoginForm/LoginForm.tsx
+++ b/webclient/src/forms/LoginForm/LoginForm.tsx
@@ -1,43 +1,19 @@
-import React from 'react';
-import { Form, Field, FormApi } from 'react-final-form';
+import React, { useEffect, useState } from 'react';
+import { Form, Field, useFormState, FormApi } from 'react-final-form';
 import { OnChange } from 'react-final-form-listeners';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
-import CircularProgress from '@mui/material/CircularProgress';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 import { CheckboxField, InputField, KnownHosts } from '@app/components';
-import type { FormErrors } from '@app/forms';
 import { LoadingState, useKnownHosts, useSettings } from '@app/hooks';
-import { HostDTO } from '@app/services';
-import { ServerSelectors, TestConnectionStatus, useAppSelector } from '@app/store';
-
-import { useLoginFormBody } from './useLoginForm';
 
 import './LoginForm.css';
 
-// Remember Password and Auto Connect both require server-side password hashing
-// to be useful (no hash to save = nothing to resume with). Test-connection
-// captures capability from ServerIdentification before the user ever logs in,
-// so we can afford a strict "hidden until a completed test proves supported" gate.
-const hostSupportsHashedPassword = (
-  host: HostDTO | undefined,
-  testConnectionStatus: TestConnectionStatus,
-): boolean =>
-  testConnectionStatus === 'success' && host?.supportsHashedPassword === true;
-
-export interface LoginFormValues {
-  userName: string;
-  password: string;
-  remember: boolean;
-  autoConnect: boolean;
-  selectedHost: HostDTO;
-}
-
 interface LoginFormProps {
-  onSubmit: (values: LoginFormValues) => void;
+  onSubmit: (values: any) => void;
   disableSubmitButton: boolean;
   onResetPassword: () => void;
 }
@@ -55,25 +31,74 @@ const LoginFormBody = ({
 }: LoginFormBodyProps) => {
   const { t } = useTranslation();
   const PASSWORD_LABEL = t('Common.label.password');
-  const STORED_PASSWORD_LABEL = t('LoginForm.label.savedPassword');
+  const STORED_PASSWORD_LABEL = `* ${t('LoginForm.label.savedPassword')} *`;
 
-  const {
-    selectedHost,
-    useStoredPasswordLabel,
-    setUseStoredPasswordLabel,
-    onSelectedHostChange,
-    onUserNameChange,
-    onRememberChange,
-    onUserToggleAutoConnect,
-    passwordFieldBlur,
-  } = useLoginFormBody(form);
+  const settings = useSettings();
+  const hosts = useKnownHosts();
+  const { values } = useFormState();
 
-  const testConnectionStatus = useAppSelector(ServerSelectors.getTestConnectionStatus);
-  const showHashingGatedOptions = hostSupportsHashedPassword(selectedHost, testConnectionStatus);
-  // Login is only meaningful once we know the host is reachable + speaks the
-  // Cockatrice protocol. Keep the button disabled until test-connection resolves
-  // to 'success'; re-disable on any subsequent re-test.
-  const loginDisabled = disableSubmitButton || testConnectionStatus !== 'success';
+  const selectedHost = hosts.status === LoadingState.READY ? hosts.value?.selectedHost : undefined;
+
+  const [useStoredPasswordLabel, setUseStoredPasswordLabel] = useState(false);
+  const [storedHashInvalidated, setStoredHashInvalidated] = useState(false);
+
+  const canUseStoredPassword = (remember: boolean, password: string | undefined) =>
+    Boolean(remember && selectedHost?.hashedPassword && !password && !storedHashInvalidated);
+
+  const togglePasswordLabel = (on: boolean) => setUseStoredPasswordLabel(on);
+
+  // @critical Host-sync must not touch autoConnect — app-level setting, not per-host.
+  useEffect(() => {
+    if (!selectedHost) {
+      return;
+    }
+
+    form.change('userName', selectedHost.userName);
+    form.change('password', '');
+    form.change('remember', Boolean(selectedHost.remember));
+
+    setStoredHashInvalidated(false);
+    togglePasswordLabel(
+      Boolean(selectedHost.remember && selectedHost.hashedPassword)
+    );
+  }, [selectedHost, form]);
+
+  useEffect(() => {
+    if (settings.status !== LoadingState.READY) {
+      return;
+    }
+    form.change('autoConnect', settings.value?.autoConnect);
+  }, [settings, form]);
+
+  const onUserNameChange = (userName: string | undefined) => {
+    const fieldChanged = selectedHost?.userName?.toLowerCase() !== userName?.toLowerCase();
+    if (canUseStoredPassword(values.remember, values.password) && fieldChanged) {
+      setStoredHashInvalidated(true);
+    }
+  };
+
+  const onRememberChange = (checked: boolean) => {
+    // @critical Writes form-only, never to persisted setting — "remember" toggle isn't a preference edit.
+    if (!checked && values.autoConnect) {
+      form.change('autoConnect', false);
+    }
+
+    togglePasswordLabel(canUseStoredPassword(checked, values.password));
+  };
+
+  // @critical Only persist-path for autoConnect; wired to native onChange, not <OnChange>,
+  // to avoid leaking form.change() writes into Dexie.
+  const onUserToggleAutoConnect = (checked: boolean, fieldOnChange: (v: boolean) => void) => {
+    fieldOnChange(checked);
+
+    if (settings.status === LoadingState.READY) {
+      void settings.update({ autoConnect: checked });
+    }
+
+    if (checked && !values.remember) {
+      form.change('remember', true);
+    }
+  };
 
   return (
     <form className="loginForm" onSubmit={handleSubmit}>
@@ -91,7 +116,9 @@ const LoginFormBody = ({
           <Field
             label={useStoredPasswordLabel ? STORED_PASSWORD_LABEL : PASSWORD_LABEL}
             onFocus={() => setUseStoredPasswordLabel(false)}
-            onBlur={passwordFieldBlur}
+            onBlur={() =>
+              togglePasswordLabel(canUseStoredPassword(values.remember, values.password))
+            }
             name="password"
             type="password"
             component={InputField}
@@ -99,16 +126,12 @@ const LoginFormBody = ({
           />
         </div>
         <div className="loginForm-actions">
-          {showHashingGatedOptions && (
-            <>
-              <Field
-                label={t('LoginForm.label.savePassword')}
-                name="remember"
-                component={CheckboxField}
-              />
-              <OnChange name="remember">{onRememberChange}</OnChange>
-            </>
-          )}
+          <Field
+            label={t('LoginForm.label.savePassword')}
+            name="remember"
+            component={CheckboxField}
+          />
+          <OnChange name="remember">{onRememberChange}</OnChange>
 
           <Button color="primary" onClick={onResetPassword}>
             {t('LoginForm.label.forgot')}
@@ -116,35 +139,32 @@ const LoginFormBody = ({
         </div>
         <div className="loginForm-item">
           <Field name="selectedHost" component={KnownHosts} />
-          <OnChange name="selectedHost">{onSelectedHostChange}</OnChange>
         </div>
-        {showHashingGatedOptions && (
-          <div className="loginForm-actions">
-            <Field name="autoConnect" type="checkbox">
-              {({ input }) => (
-                <FormControlLabel
-                  className="checkbox-field"
-                  label={t('LoginForm.label.autoConnect')}
-                  control={
-                    <Checkbox
-                      className="checkbox-field__box"
-                      checked={!!input.value}
-                      onChange={(_e, checked) => onUserToggleAutoConnect(checked, input.onChange)}
-                      color="primary"
-                    />
-                  }
-                />
-              )}
-            </Field>
-          </div>
-        )}
+        <div className="loginForm-actions">
+          <Field name="autoConnect" type="checkbox">
+            {({ input }) => (
+              <FormControlLabel
+                className="checkbox-field"
+                label={t('LoginForm.label.autoConnect')}
+                control={
+                  <Checkbox
+                    className="checkbox-field__box"
+                    checked={!!input.value}
+                    onChange={(_e, checked) => onUserToggleAutoConnect(checked, input.onChange)}
+                    color="primary"
+                  />
+                }
+              />
+            )}
+          </Field>
+        </div>
       </div>
       <Button
         className="loginForm-submit rounded tall"
         color="primary"
         variant="contained"
         type="submit"
-        disabled={loginDisabled}
+        disabled={disableSubmitButton}
       >
         {t('LoginForm.label.login')}
       </Button>
@@ -154,11 +174,9 @@ const LoginFormBody = ({
 
 const LoginForm = (props: LoginFormProps) => {
   const { t } = useTranslation();
-  const knownHosts = useKnownHosts();
-  const settings = useSettings();
 
-  const validate = (values: Partial<LoginFormValues>): FormErrors<LoginFormValues> => {
-    const errors: FormErrors<LoginFormValues> = {};
+  const validate = (values: any) => {
+    const errors: any = {};
 
     if (!values.userName) {
       errors.userName = t('Common.validation.required');
@@ -170,34 +188,13 @@ const LoginForm = (props: LoginFormProps) => {
     return errors;
   };
 
-  const handleOnSubmit = ({ userName, ...values }: LoginFormValues) => {
-    props.onSubmit({ ...values, userName: userName?.trim() });
-  };
-
-  if (knownHosts.status !== LoadingState.READY || settings.status !== LoadingState.READY) {
-    return (
-      <div className="loginForm-loading">
-        <CircularProgress size={40} />
-      </div>
-    );
-  }
-
-  const selectedHost = knownHosts.value?.selectedHost;
-  const initialValues: Partial<LoginFormValues> = {
-    selectedHost,
-    userName: selectedHost?.userName ?? '',
-    remember: Boolean(selectedHost?.remember),
-    autoConnect: Boolean(settings.value?.autoConnect),
-    password: '',
+  const handleOnSubmit = ({ userName, ...values }: any) => {
+    userName = userName?.trim();
+    props.onSubmit({ userName, ...values });
   };
 
   return (
-    <Form
-      onSubmit={handleOnSubmit}
-      validate={validate}
-      initialValues={initialValues}
-      keepDirtyOnReinitialize
-    >
+    <Form onSubmit={handleOnSubmit} validate={validate}>
       {({ handleSubmit, form }) => (
         <LoginFormBody {...props} form={form} handleSubmit={handleSubmit} />
       )}
diff --git a/webclient/src/forms/LoginForm/useLoginForm.ts b/webclient/src/forms/LoginForm/useLoginForm.ts
deleted file mode 100644
index d08eeb256..000000000
--- a/webclient/src/forms/LoginForm/useLoginForm.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { useState } from 'react';
-import { useFormState } from 'react-final-form';
-
-import { LoadingState, useKnownHosts, useSettings } from '@app/hooks';
-import { HostDTO } from '@app/services';
-
-export interface LoginFormBody {
-  selectedHost: HostDTO | undefined;
-  useStoredPasswordLabel: boolean;
-  setUseStoredPasswordLabel: (v: boolean) => void;
-  onSelectedHostChange: (host: HostDTO | undefined) => void;
-  onUserNameChange: (userName: string | undefined) => void;
-  onRememberChange: (checked: boolean) => void;
-  onUserToggleAutoConnect: (checked: boolean, fieldOnChange: (v: boolean) => void) => void;
-  passwordFieldBlur: () => void;
-}
-
-// `FormApi` import from react-final-form is broken at the type level on this
-// branch (baseline TS error). Only `form.change` is used here.
-interface MinimalFormApi {
-  change: (name: string, value: unknown) => void;
-}
-
-export function useLoginFormBody(form: MinimalFormApi): LoginFormBody {
-  const settings = useSettings();
-  const hosts = useKnownHosts();
-  const { values } = useFormState();
-
-  const selectedHost = hosts.status === LoadingState.READY ? hosts.value?.selectedHost : undefined;
-
-  const [useStoredPasswordLabel, setUseStoredPasswordLabel] = useState(false);
-  const [storedHashInvalidated, setStoredHashInvalidated] = useState(false);
-
-  const canUseStoredPassword = (remember: boolean, password: string | undefined) =>
-    Boolean(remember && selectedHost?.hashedPassword && !password && !storedHashInvalidated);
-
-  const togglePasswordLabel = (on: boolean) => setUseStoredPasswordLabel(on);
-
-  // @critical Host-sync normally must not touch autoConnect — it's an app-level
-  // setting, not per-host. The single exception is switching to a host that is
-  // *proven* naked (supportsHashedPassword === false): the Remember/AutoConnect
-  // UI is hidden there, so we also clear the persisted setting to prevent a
-  // stale `true` from surviving silently. `undefined` (fresh host, test not
-  // yet complete) leaves the preference alone — test-connection will resolve
-  // capability in milliseconds.
-  const onSelectedHostChange = (host: HostDTO | undefined) => {
-    if (!host) {
-      return;
-    }
-    const nakedServer = host.supportsHashedPassword === false;
-    form.change('userName', host.userName ?? '');
-    form.change('password', '');
-    form.change('remember', !nakedServer && Boolean(host.remember));
-    setStoredHashInvalidated(false);
-    togglePasswordLabel(!nakedServer && Boolean(host.remember && host.hashedPassword));
-
-    if (nakedServer) {
-      form.change('autoConnect', false);
-      if (settings.status === LoadingState.READY && settings.value?.autoConnect) {
-        void settings.update({ autoConnect: false });
-      }
-    }
-  };
-
-  const onUserNameChange = (userName: string | undefined) => {
-    const fieldChanged = selectedHost?.userName?.toLowerCase() !== userName?.toLowerCase();
-    if (canUseStoredPassword(values.remember, values.password) && fieldChanged) {
-      setStoredHashInvalidated(true);
-    }
-  };
-
-  const onRememberChange = (checked: boolean) => {
-    // @critical Writes form-only, never to persisted setting — "remember" toggle isn't a preference edit.
-    if (!checked && values.autoConnect) {
-      form.change('autoConnect', false);
-    }
-
-    togglePasswordLabel(canUseStoredPassword(checked, values.password));
-  };
-
-  // @critical Only persist-path for autoConnect; wired to native onChange, not <OnChange>,
-  // to avoid leaking form.change() writes into Dexie.
-  const onUserToggleAutoConnect = (checked: boolean, fieldOnChange: (v: boolean) => void) => {
-    fieldOnChange(checked);
-
-    if (settings.status === LoadingState.READY) {
-      void settings.update({ autoConnect: checked });
-    }
-
-    if (checked && !values.remember) {
-      form.change('remember', true);
-    }
-  };
-
-  const passwordFieldBlur = () =>
-    togglePasswordLabel(canUseStoredPassword(values.remember, values.password));
-
-  return {
-    selectedHost,
-    useStoredPasswordLabel,
-    setUseStoredPasswordLabel,
-    onSelectedHostChange,
-    onUserNameChange,
-    onRememberChange,
-    onUserToggleAutoConnect,
-    passwordFieldBlur,
-  };
-}
diff --git a/webclient/src/forms/RegisterForm/RegisterForm.tsx b/webclient/src/forms/RegisterForm/RegisterForm.tsx
index 62646867d..3754c857c 100644
--- a/webclient/src/forms/RegisterForm/RegisterForm.tsx
+++ b/webclient/src/forms/RegisterForm/RegisterForm.tsx
@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
-import { Form, Field, useForm } from 'react-final-form';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Form, Field } from 'react-final-form';
 import { OnChange } from 'react-final-form-listeners';
 import setFieldTouched from 'final-form-set-field-touched';
 import { useTranslation } from 'react-i18next';
@@ -8,69 +9,58 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 
 import { CountryDropdown, InputField, KnownHosts } from '@app/components';
-import type { FormErrors } from '@app/forms';
-import type { HostDTO } from '@app/services';
-import { ServerDispatch } from '@app/store';
-
-import { useRegisterForm } from './useRegisterForm';
+import { useReduxEffect } from '@app/hooks';
+import { ServerDispatch, ServerSelectors, ServerTypes } from '@app/store';
 
 import './RegisterForm.css';
-
-export interface RegisterFormValues {
-  userName: string;
-  password: string;
-  passwordConfirm: string;
-  email?: string;
-  emailConfirm?: string;
-  realName?: string;
-  country?: string;
-  selectedHost: HostDTO;
-}
-
-interface RegisterFormProps {
-  onSubmit: (values: RegisterFormValues) => void;
-}
-
-// Drives `setFieldTouched` from inside the react-final-form context so the
-// hook lives in a real component body instead of the <Form> render prop,
-// where react-final-form might short-circuit rendering and desync hook order.
-const EmailTouchOnRequire = ({ emailRequired }: { emailRequired: boolean }) => {
-  const form = useForm();
-  useEffect(() => {
-    if (emailRequired) {
-      form.mutators.setFieldTouched('email', true);
-    }
-  }, [emailRequired, form]);
-  return null;
-};
+import { useToast } from '@app/components';
 
 const RegisterForm = ({ onSubmit }: RegisterFormProps) => {
   const { t } = useTranslation();
-  const {
-    emailRequired,
-    emailError,
-    passwordError,
-    userNameError,
-    error,
-    onHostChange,
-    onEmailChange,
-    onPasswordChange,
-    onUserNameChange,
-  } = useRegisterForm();
+  const [emailRequired, setEmailRequired] = useState(false);
+  const [emailError, setEmailError] = useState(null);
+  const [passwordError, setPasswordError] = useState(null);
+  const [userNameError, setUserNameError] = useState(null);
+  const error = useSelector(ServerSelectors.getRegistrationError);
+  const { openToast } = useToast({ key: 'registration-success', children: t('RegisterForm.toast.registerSuccess') })
 
-  const handleOnSubmit = (values: RegisterFormValues) => {
+  const onHostChange = () => setEmailRequired(false);
+  const onEmailChange = () => emailError && setEmailError(null);
+  const onPasswordChange = () => passwordError && setPasswordError(null);
+  const onUserNameChange = () => userNameError && setUserNameError(null);
+
+  useReduxEffect(() => {
+    setEmailRequired(true);
+  }, ServerTypes.REGISTRATION_REQUIRES_EMAIL);
+
+  useReduxEffect(() => {
+    openToast()
+  }, ServerTypes.REGISTRATION_SUCCESS);
+
+  useReduxEffect(({ payload: { error } }) => {
+    setEmailError(error);
+  }, ServerTypes.REGISTRATION_EMAIL_ERROR);
+
+  useReduxEffect(({ payload: { error } }) => {
+    setPasswordError(error);
+  }, ServerTypes.REGISTRATION_PASSWORD_ERROR);
+
+  useReduxEffect(({ payload: { error } }) => {
+    setUserNameError(error);
+  }, ServerTypes.REGISTRATION_USERNAME_ERROR);
+
+  const handleOnSubmit = ({ userName, email, realName, ...values }) => {
     ServerDispatch.clearRegistrationErrors();
 
-    onSubmit({
-      ...values,
-      userName: values.userName?.trim(),
-      email: values.email?.trim(),
-      realName: values.realName?.trim(),
-    });
-  };
+    userName = userName?.trim();
+    email = email?.trim();
+    realName = realName?.trim();
 
-  const validate = (values: Partial<RegisterFormValues>): FormErrors<RegisterFormValues> => {
-    const errors: FormErrors<RegisterFormValues> = {};
+    onSubmit({ userName, email, realName, ...values });
+  }
+
+  const validate = values => {
+    const errors: any = {};
 
     if (!values.userName) {
       errors.userName = t('Common.validation.required');
@@ -102,87 +92,83 @@ const RegisterForm = ({ onSubmit }: RegisterFormProps) => {
       errors.email = emailError;
     }
 
-    if (emailRequired) {
-      if (!values.emailConfirm) {
-        errors.emailConfirm = t('Common.validation.required');
-      } else if (values.email !== values.emailConfirm) {
-        errors.emailConfirm = t('Common.validation.emailsMustMatch');
-      }
-    }
-
     return errors;
-  };
+  }
 
   return (
     <Form onSubmit={handleOnSubmit} validate={validate} mutators={{ setFieldTouched }}>
-      {({ handleSubmit }) => (
-        <>
-          <EmailTouchOnRequire emailRequired={emailRequired} />
-          <form className="RegisterForm" onSubmit={handleSubmit}>
-            <div className="RegisterForm-column">
-              <div className="RegisterForm-item">
-                <Field label={t('Common.label.username')} name="userName" component={InputField} autoComplete="username" />
-                <OnChange name="userName">{onUserNameChange}</OnChange>
-              </div>
-              <div className="RegisterForm-item">
-                <Field
-                  label={t('Common.label.password')}
-                  name="password"
-                  type="password"
-                  component={InputField}
-                  autoComplete='new-password'
-                />
-                <OnChange name="password">{onPasswordChange}</OnChange>
-              </div>
-              <div className="RegisterForm-item">
-                <Field
-                  label={t('Common.label.confirmPassword')}
-                  name="passwordConfirm"
-                  type="password"
-                  component={InputField}
-                  autoComplete='new-password'
-                />
-              </div>
-              <div className="RegisterForm-item">
-                <Field name="selectedHost" component={KnownHosts} />
-                <OnChange name="selectedHost">{onHostChange}</OnChange>
-              </div>
-            </div>
-            <div className="RegisterForm-column" >
-              <div className="RegisterForm-item">
-                <Field label={t('Common.label.realName')} name="realName" component={InputField} />
-              </div>
-              <div className="RegisterForm-item">
-                <Field label={t('Common.label.email')} name="email" type="email" component={InputField} />
-                <OnChange name="email">{onEmailChange}</OnChange>
-              </div>
-              <div className="RegisterForm-item">
-                <Field
-                  label={t('Common.label.confirmEmail')}
-                  name="emailConfirm"
-                  type="email"
-                  component={InputField}
-                />
-              </div>
-              <div className="RegisterForm-item">
-                <Field label={t('Common.label.country')} name="country" component={CountryDropdown} />
-              </div>
-              <Button className="RegisterForm-submit tall" color="primary" variant="contained" type="submit">
-                {t('RegisterForm.label.register')}
-              </Button>
-            </div>
-          </form>
+      {({ handleSubmit, form }) => {
 
-          {error && (
-            <div className="RegisterForm-item">
-              <Typography color="error">{error}</Typography>
-            </div>
-          )}
-        </>
-      )}
+        useEffect(() => {
+          if (emailRequired) {
+            form.mutators.setFieldTouched('email', true);
+          }
+        }, [emailRequired]);
+
+        return (
+          <>
+            <form className="RegisterForm" onSubmit={handleSubmit}>
+              <div className="RegisterForm-column">
+                <div className="RegisterForm-item">
+                  <Field label={t('Common.label.username')} name="userName" component={InputField} autoComplete="username" />
+                  <OnChange name="userName">{onUserNameChange}</OnChange>
+                </div>
+                <div className="RegisterForm-item">
+                  <Field
+                    label={t('Common.label.password')}
+                    name="password"
+                    type="password"
+                    component={InputField}
+                    autoComplete='new-password'
+                  />
+                  <OnChange name="password">{onPasswordChange}</OnChange>
+                </div>
+                <div className="RegisterForm-item">
+                  <Field
+                    label={t('Common.label.confirmPassword')}
+                    name="passwordConfirm"
+                    type="password"
+                    component={InputField}
+                    autoComplete='new-password'
+                  />
+                </div>
+                <div className="RegisterForm-item">
+                  <Field name="selectedHost" component={KnownHosts} />
+                  <OnChange name="selectedHost">{onHostChange}</OnChange>
+                </div>
+              </div>
+              <div className="RegisterForm-column" >
+                <div className="RegisterForm-item">
+                  <Field label={t('Common.label.realName')} name="realName" component={InputField} />
+                </div>
+                <div className="RegisterForm-item">
+                  <Field label={t('Common.label.email')} name="email" type="email" component={InputField} />
+                  <OnChange name="email">{onEmailChange}</OnChange>
+                </div>
+                <div className="RegisterForm-item">
+                  <Field label={t('Common.label.country')} name="country" component={CountryDropdown} />
+                </div>
+                <Button className="RegisterForm-submit tall" color="primary" variant="contained" type="submit">
+                  { t('RegisterForm.label.register') }
+                </Button>
+              </div>
+            </form>
+
+            { error && (
+              <div className="RegisterForm-item">
+                <Typography color="error">{error}</Typography>
+              </div>
+            )}
+          </>
+        );
+      }}
 
     </Form >
   );
 };
 
+interface RegisterFormProps {
+  onSubmit: any;
+}
+
 export default RegisterForm;
diff --git a/webclient/src/forms/RegisterForm/useRegisterForm.ts b/webclient/src/forms/RegisterForm/useRegisterForm.ts
deleted file mode 100644
index f9a7961bc..000000000
--- a/webclient/src/forms/RegisterForm/useRegisterForm.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
-
-import { useToast } from '@app/components';
-import { useReduxEffect } from '@app/hooks';
-import { ServerSelectors, ServerTypes } from '@app/store';
-
-export interface RegisterForm {
-  emailRequired: boolean;
-  emailError: string | null;
-  passwordError: string | null;
-  userNameError: string | null;
-  error: string | null;
-  onHostChange: () => void;
-  onEmailChange: () => void;
-  onPasswordChange: () => void;
-  onUserNameChange: () => void;
-}
-
-export function useRegisterForm(): RegisterForm {
-  const { t } = useTranslation();
-  const [emailRequired, setEmailRequired] = useState(false);
-  const [emailError, setEmailError] = useState<string | null>(null);
-  const [passwordError, setPasswordError] = useState<string | null>(null);
-  const [userNameError, setUserNameError] = useState<string | null>(null);
-  const error = useSelector(ServerSelectors.getRegistrationError);
-  const { openToast } = useToast({
-    key: 'registration-success',
-    children: t('RegisterForm.toast.registerSuccess'),
-  });
-
-  const onHostChange = () => setEmailRequired(false);
-  const onEmailChange = () => emailError && setEmailError(null);
-  const onPasswordChange = () => passwordError && setPasswordError(null);
-  const onUserNameChange = () => userNameError && setUserNameError(null);
-
-  useReduxEffect(() => {
-    setEmailRequired(true);
-  }, ServerTypes.REGISTRATION_REQUIRES_EMAIL);
-
-  useReduxEffect(() => {
-    openToast();
-  }, ServerTypes.REGISTRATION_SUCCESS);
-
-  useReduxEffect(({ payload: { error } }) => {
-    setEmailError(error);
-  }, ServerTypes.REGISTRATION_EMAIL_ERROR);
-
-  useReduxEffect(({ payload: { error } }) => {
-    setPasswordError(error);
-  }, ServerTypes.REGISTRATION_PASSWORD_ERROR);
-
-  useReduxEffect(({ payload: { error } }) => {
-    setUserNameError(error);
-  }, ServerTypes.REGISTRATION_USERNAME_ERROR);
-
-  return {
-    emailRequired,
-    emailError,
-    passwordError,
-    userNameError,
-    error,
-    onHostChange,
-    onEmailChange,
-    onPasswordChange,
-    onUserNameChange,
-  };
-}
diff --git a/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx b/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx
index 5132fac67..46776cd37 100644
--- a/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx
+++ b/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx
@@ -1,5 +1,6 @@
-import { useCallback } from 'react';
-import { Form, Field, FormApi } from 'react-final-form';
+// eslint-disable-next-line
+import React, { useState } from "react";
+import { Form, Field } from 'react-final-form';
 import { OnChange } from 'react-final-form-listeners';
 import { useTranslation } from 'react-i18next';
 
@@ -7,44 +8,35 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 
 import { InputField, KnownHosts } from '@app/components';
-import type { FormErrors } from '@app/forms';
-import { HostDTO } from '@app/services';
-
-import { useRequestPasswordResetForm } from './useRequestPasswordResetForm';
+import { useReduxEffect } from '@app/hooks';
+import { ServerTypes } from '@app/store';
 
 import './RequestPasswordResetForm.css';
 
-export interface RequestPasswordResetFormValues {
-  userName: string;
-  email?: string;
-  selectedHost: HostDTO;
-}
-
-interface RequestPasswordResetFormProps {
-  onSubmit: (values: RequestPasswordResetFormValues) => void;
-  skipTokenRequest: (userName: string) => void;
-}
-
-interface HostChangePayload {
-  userName?: string;
-}
-
-const RequestPasswordResetForm = ({ onSubmit, skipTokenRequest }: RequestPasswordResetFormProps) => {
+const RequestPasswordResetForm = ({ onSubmit, skipTokenRequest }) => {
+  const [errorMessage, setErrorMessage] = useState(false);
+  const [isMFA, setIsMFA] = useState(false);
   const { t } = useTranslation();
-  const { errorMessage, setErrorMessage, isMFA, setIsMFA } = useRequestPasswordResetForm();
 
-  const handleOnSubmit = ({ userName, email, ...values }: RequestPasswordResetFormValues) => {
+  useReduxEffect(() => {
+    setErrorMessage(true);
+  }, ServerTypes.RESET_PASSWORD_FAILED, []);
+
+  useReduxEffect(() => {
+    setIsMFA(true);
+  }, ServerTypes.RESET_PASSWORD_CHALLENGE, []);
+
+  const handleOnSubmit = ({ userName, email, ...values }) => {
     setErrorMessage(false);
 
-    onSubmit({
-      ...values,
-      userName: userName?.trim(),
-      email: email?.trim(),
-    });
-  };
+    userName = userName?.trim();
+    email = email?.trim();
 
-  const validate = (values: Partial<RequestPasswordResetFormValues>): FormErrors<RequestPasswordResetFormValues> => {
-    const errors: FormErrors<RequestPasswordResetFormValues> = {};
+    onSubmit({ userName, email, ...values });
+  }
+
+  const validate = values => {
+    const errors: any = {};
 
     if (!values.userName) {
       errors.userName = t('Common.validation.required');
@@ -61,79 +53,50 @@ const RequestPasswordResetForm = ({ onSubmit, skipTokenRequest }: RequestPasswor
 
   return (
     <Form onSubmit={handleOnSubmit} validate={validate}>
-      {({ handleSubmit, form }) => (
-        <RequestPasswordResetFormBody
-          handleSubmit={handleSubmit}
-          form={form}
-          errorMessage={errorMessage}
-          isMFA={isMFA}
-          setIsMFA={setIsMFA}
-          skipTokenRequest={skipTokenRequest}
-        />
-      )}
+      {({ handleSubmit, form }) => {
+        const onHostChange: any = ({ userName }) => {
+          form.change('userName', userName);
+          setIsMFA(false);
+        }
+
+        return (
+          <form className="RequestPasswordResetForm" onSubmit={handleSubmit}>
+            <div className="RequestPasswordResetForm-items">
+              <div className="RequestPasswordResetForm-item">
+                <Field label={t('Common.label.username')} name="userName" component={InputField} autoComplete="username" disabled={isMFA} />
+              </div>
+              {isMFA ? (
+                <div className="RequestPasswordResetForm-item">
+                  <Field label={t('Common.label.email')} name="email" type="email" component={InputField} autoComplete="email" />
+                  <div>{ t('RequestPasswordResetForm.mfaEnabled') }</div>
+                </div>
+              ) : null}
+              <div className="RequestPasswordResetForm-item selectedHost">
+                <Field name='selectedHost' component={KnownHosts} disabled={isMFA} />
+                <OnChange name="selectedHost">{onHostChange}</OnChange>
+              </div>
+
+              {errorMessage && (
+                <div className="RequestPasswordResetForm-item">
+                  <Typography color="error">{ t('RequestPasswordResetForm.error') }</Typography>
+                </div>
+              )}
+            </div>
+
+            <Button className="RequestPasswordResetForm-submit rounded tall" color="primary" variant="contained" type="submit">
+              { t('RequestPasswordResetForm.request') }
+            </Button>
+
+            <div>
+              <Button color="primary" onClick={() => skipTokenRequest(form.getState().values.userName)}>
+                { t('RequestPasswordResetForm.skipRequest') }
+              </Button>
+            </div>
+          </form>
+        );
+      }}
     </Form>
   );
 };
 
-interface BodyProps {
-  handleSubmit: (event?: React.SyntheticEvent) => void;
-  form: FormApi;
-  errorMessage: boolean;
-  isMFA: boolean;
-  setIsMFA: (v: boolean) => void;
-  skipTokenRequest: (userName: string) => void;
-}
-
-const RequestPasswordResetFormBody = ({
-  handleSubmit,
-  form,
-  errorMessage,
-  isMFA,
-  setIsMFA,
-  skipTokenRequest,
-}: BodyProps) => {
-  const { t } = useTranslation();
-
-  const onHostChange = useCallback(({ userName }: HostChangePayload) => {
-    form.change('userName', userName);
-    setIsMFA(false);
-  }, [form, setIsMFA]);
-
-  return (
-    <form className="RequestPasswordResetForm" onSubmit={handleSubmit}>
-      <div className="RequestPasswordResetForm-items">
-        <div className="RequestPasswordResetForm-item">
-          <Field label={t('Common.label.username')} name="userName" component={InputField} autoComplete="username" disabled={isMFA} />
-        </div>
-        {isMFA ? (
-          <div className="RequestPasswordResetForm-item">
-            <Field label={t('Common.label.email')} name="email" type="email" component={InputField} autoComplete="email" />
-            <div>{t('RequestPasswordResetForm.mfaEnabled')}</div>
-          </div>
-        ) : null}
-        <div className="RequestPasswordResetForm-item selectedHost">
-          <Field name='selectedHost' component={KnownHosts} disabled={isMFA} />
-          <OnChange name="selectedHost">{onHostChange}</OnChange>
-        </div>
-
-        {errorMessage && (
-          <div className="RequestPasswordResetForm-item">
-            <Typography color="error">{t('RequestPasswordResetForm.error')}</Typography>
-          </div>
-        )}
-      </div>
-
-      <Button className="RequestPasswordResetForm-submit rounded tall" color="primary" variant="contained" type="submit">
-        {t('RequestPasswordResetForm.request')}
-      </Button>
-
-      <div>
-        <Button color="primary" onClick={() => skipTokenRequest(form.getState().values.userName)}>
-          {t('RequestPasswordResetForm.skipRequest')}
-        </Button>
-      </div>
-    </form>
-  );
-};
-
 export default RequestPasswordResetForm;
diff --git a/webclient/src/forms/RequestPasswordResetForm/useRequestPasswordResetForm.ts b/webclient/src/forms/RequestPasswordResetForm/useRequestPasswordResetForm.ts
deleted file mode 100644
index b22f7fd05..000000000
--- a/webclient/src/forms/RequestPasswordResetForm/useRequestPasswordResetForm.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useState } from 'react';
-
-import { useReduxEffect } from '@app/hooks';
-import { ServerTypes } from '@app/store';
-
-export interface RequestPasswordResetForm {
-  errorMessage: boolean;
-  setErrorMessage: (v: boolean) => void;
-  isMFA: boolean;
-  setIsMFA: (v: boolean) => void;
-}
-
-export function useRequestPasswordResetForm(): RequestPasswordResetForm {
-  const [errorMessage, setErrorMessage] = useState(false);
-  const [isMFA, setIsMFA] = useState(false);
-
-  useReduxEffect(() => {
-    setErrorMessage(true);
-  }, ServerTypes.RESET_PASSWORD_FAILED, []);
-
-  useReduxEffect(() => {
-    setIsMFA(true);
-  }, ServerTypes.RESET_PASSWORD_CHALLENGE, []);
-
-  return { errorMessage, setErrorMessage, isMFA, setIsMFA };
-}
diff --git a/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx b/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx
index 0a2162bc3..9e9984edf 100644
--- a/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx
@@ -1,36 +1,27 @@
-import { Form, Field } from 'react-final-form';
+// eslint-disable-next-line
+import React, { useEffect, useState } from 'react';
+import { Form, Field } from 'react-final-form'
 import { useTranslation } from 'react-i18next';
 
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 
 import { InputField, KnownHosts } from '@app/components';
-import type { FormErrors } from '@app/forms';
-import { HostDTO } from '@app/services';
-
-import { useResetPasswordForm } from './useResetPasswordForm';
+import { useReduxEffect } from '@app/hooks';
+import { ServerTypes } from '@app/store';
 
 import './ResetPasswordForm.css';
 
-export interface ResetPasswordFormValues {
-  userName: string;
-  token: string;
-  newPassword: string;
-  passwordAgain: string;
-  selectedHost: HostDTO;
-}
-
-interface ResetPasswordFormProps {
-  onSubmit: (values: ResetPasswordFormValues) => void;
-  userName?: string;
-}
-
-const ResetPasswordForm = ({ onSubmit, userName }: ResetPasswordFormProps) => {
+const ResetPasswordForm = ({ onSubmit, userName }) => {
+  const [errorMessage, setErrorMessage] = useState(false);
   const { t } = useTranslation();
-  const { errorMessage } = useResetPasswordForm();
 
-  const validate = (values: Partial<ResetPasswordFormValues>): FormErrors<ResetPasswordFormValues> => {
-    const errors: FormErrors<ResetPasswordFormValues> = {};
+  useReduxEffect(() => {
+    setErrorMessage(true);
+  }, ServerTypes.RESET_PASSWORD_FAILED, []);
+
+  const validate = values => {
+    const errors: any = {};
 
     if (!values.userName) {
       errors.userName = t('Common.validation.required');
@@ -57,13 +48,12 @@ const ResetPasswordForm = ({ onSubmit, userName }: ResetPasswordFormProps) => {
     return errors;
   };
 
-  const handleOnSubmit = ({ userName: uName, token, ...values }: ResetPasswordFormValues) => {
-    onSubmit({
-      ...values,
-      userName: uName?.trim(),
-      token: token?.trim(),
-    });
-  };
+  const handleOnSubmit = ({ userName, token, ...values }) => {
+    userName = userName?.trim();
+    token = token?.trim();
+
+    onSubmit({ userName, token, ...values });
+  }
 
   return (
     <Form onSubmit={handleOnSubmit} validate={validate} initialValues={{ userName }}>
@@ -76,7 +66,7 @@ const ResetPasswordForm = ({ onSubmit, userName }: ResetPasswordFormProps) => {
                 name='userName'
                 component={InputField}
                 autoComplete='username'
-                InputProps={{ readOnly: Boolean(userName) }}
+                disabled={!!userName}
               />
             </div>
             <div className='ResetPasswordForm-item'>
@@ -106,12 +96,12 @@ const ResetPasswordForm = ({ onSubmit, userName }: ResetPasswordFormProps) => {
 
             {errorMessage && (
               <div className='ResetPasswordForm-item'>
-                <Typography color="error">{t('ResetPasswordForm.error')}</Typography>
+                <Typography color="error">{ t('ResetPasswordForm.error') }</Typography>
               </div>
             )}
           </div>
           <Button className='ResetPasswordForm-submit rounded tall' color='primary' variant='contained' type='submit'>
-            {t('ResetPasswordForm.label.reset')}
+            { t('ResetPasswordForm.label.reset') }
           </Button>
         </form>
       )}
diff --git a/webclient/src/forms/ResetPasswordForm/useResetPasswordForm.ts b/webclient/src/forms/ResetPasswordForm/useResetPasswordForm.ts
deleted file mode 100644
index 37043c9f7..000000000
--- a/webclient/src/forms/ResetPasswordForm/useResetPasswordForm.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useState } from 'react';
-
-import { useReduxEffect } from '@app/hooks';
-import { ServerTypes } from '@app/store';
-
-export interface ResetPasswordForm {
-  errorMessage: boolean;
-}
-
-export function useResetPasswordForm(): ResetPasswordForm {
-  const [errorMessage, setErrorMessage] = useState(false);
-
-  useReduxEffect(() => {
-    setErrorMessage(true);
-  }, ServerTypes.RESET_PASSWORD_FAILED, []);
-
-  return { errorMessage };
-}
diff --git a/webclient/src/forms/SearchForm/SearchForm.i18n.json b/webclient/src/forms/SearchForm/SearchForm.i18n.json
deleted file mode 100644
index 37c586d19..000000000
--- a/webclient/src/forms/SearchForm/SearchForm.i18n.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "SearchForm": {
-    "label": {
-      "userName": "Username",
-      "ipAddress": "IP Address",
-      "gameName": "Game Name",
-      "gameId": "GameID",
-      "message": "Message",
-      "rooms": "Rooms",
-      "games": "Games",
-      "chats": "Chats"
-    },
-    "button": {
-      "search": "Search Logs"
-    }
-  }
-}
diff --git a/webclient/src/forms/SearchForm/SearchForm.tsx b/webclient/src/forms/SearchForm/SearchForm.tsx
index 371ed1bf6..07b1792ad 100644
--- a/webclient/src/forms/SearchForm/SearchForm.tsx
+++ b/webclient/src/forms/SearchForm/SearchForm.tsx
@@ -1,5 +1,6 @@
+// eslint-disable-next-line
+import React from "react";
 import { Form, Field } from 'react-final-form';
-import { useTranslation } from 'react-i18next';
 
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
@@ -9,61 +10,48 @@ import { InputField, CheckboxField } from '@app/components';
 
 import './SearchForm.css';
 
-export interface SearchFormValues {
-  userName?: string;
-  ipAddress?: string;
-  gameName?: string;
-  gameId?: string;
-  message?: string;
-  logLocation?: {
-    room?: boolean;
-    game?: boolean;
-    chat?: boolean;
-  };
-}
-
-interface SearchFormProps {
-  onSubmit: (values: SearchFormValues) => void;
-}
-
-const SearchForm = ({ onSubmit }: SearchFormProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Form onSubmit={onSubmit}>
-      {({ handleSubmit }) => (
-        <Paper className="log-search">
-          <form className="log-search__form" onSubmit={handleSubmit}>
-            <div className="log-search__form-item">
-              <Field label={t('SearchForm.label.userName')} name="userName" component={InputField} />
-            </div>
-            <div className="log-search__form-item">
-              <Field label={t('SearchForm.label.ipAddress')} name="ipAddress" component={InputField} />
-            </div>
-            <div className="log-search__form-item">
-              <Field label={t('SearchForm.label.gameName')} name="gameName" component={InputField} />
-            </div>
-            <div className="log-search__form-item">
-              <Field label={t('SearchForm.label.gameId')} name="gameId" component={InputField} />
-            </div>
-            <div className="log-search__form-item">
-              <Field label={t('SearchForm.label.message')} name="message" component={InputField} />
-            </div>
-            <Divider />
-            <div className="log-search__form-item log-location">
-              <Field label={t('SearchForm.label.rooms')} name="logLocation.room" component={CheckboxField} />
-              <Field label={t('SearchForm.label.games')} name="logLocation.game" component={CheckboxField} />
-              <Field label={t('SearchForm.label.chats')} name="logLocation.chat" component={CheckboxField} />
-            </div>
-            <Divider />
-            <Button className="log-search__form-submit" color="primary" variant="contained" type="submit">
-              {t('SearchForm.button.search')}
-            </Button>
-          </form>
-        </Paper>
-      )}
-    </Form>
-  );
-};
+const SearchForm = ({ onSubmit }) => (
+  <Form onSubmit={onSubmit}>
+    {({ handleSubmit }) => (
+      <Paper className="log-search">
+        <form className="log-search__form" onSubmit={handleSubmit}>
+          <div className="log-search__form-item">
+            <Field label="Username" name="userName" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="IP Address" name="ipAddress" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="Game Name" name="gameName" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="GameID" name="gameId" component={InputField} />
+          </div>
+          <div className="log-search__form-item">
+            <Field label="Message" name="message" component={InputField} />
+          </div>
+          <Divider />
+          <div className="log-search__form-item log-location">
+            <Field label="Rooms" name="logLocation.room" component={CheckboxField} />
+            <Field label="Games" name="logLocation.game" component={CheckboxField} />
+            <Field label="Chats" name="logLocation.chat" component={CheckboxField} />
+          </div>
+          <Divider />
+          <div className="log-search__form-item">
+            <span>Date Range: Coming Soon</span>
+          </div>
+          <Divider />
+          <div className="log-search__form-item">
+            <span>Maximum Results: 1000</span>
+          </div>
+          <Divider />
+          <Button className="log-search__form-submit" color="primary" variant="contained" type="submit">
+            Search Logs
+          </Button>
+        </form>
+      </Paper>
+    )}
+  </Form>
+);
 
 export default SearchForm;
diff --git a/webclient/src/forms/index.ts b/webclient/src/forms/index.ts
index 772b76d6a..b922a9f40 100644
--- a/webclient/src/forms/index.ts
+++ b/webclient/src/forms/index.ts
@@ -1,5 +1,3 @@
-export type { FormErrors } from './types';
-
 export { default as AccountActivationForm } from './AccountActivationForm/AccountActivationForm';
 export { default as CardImportForm } from './CardImportForm/CardImportForm';
 export { default as LoginForm } from './LoginForm/LoginForm';
diff --git a/webclient/src/forms/types.ts b/webclient/src/forms/types.ts
deleted file mode 100644
index 972d636dd..000000000
--- a/webclient/src/forms/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type FormErrors<T> = Partial<Record<keyof T, string>>;
diff --git a/webclient/src/hooks/game/index.ts b/webclient/src/hooks/game/index.ts
deleted file mode 100644
index 8681fd4da..000000000
--- a/webclient/src/hooks/game/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './useCurrentGame';
-export * from './useGameAccess';
-export * from './useGameLifecycle';
-export * from './useScryfallCard';
diff --git a/webclient/src/hooks/game/useCurrentGame.spec.tsx b/webclient/src/hooks/game/useCurrentGame.spec.tsx
deleted file mode 100644
index 235f867cc..000000000
--- a/webclient/src/hooks/game/useCurrentGame.spec.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ReactNode } from 'react';
-import { renderHook } from '@testing-library/react';
-import { configureStore } from '@reduxjs/toolkit';
-import { Provider } from 'react-redux';
-
-// Deep imports are intentional here: see the comment in
-// useGameAccess.spec.tsx. `@app/store` would spin up the singleton store
-// and race with makeWrapper's test-local store.
-import { gamesReducer } from '../../store/game/game.reducer';
-import { makeGameEntry, makePlayerEntry, makePlayerProperties } from '../../store/game/__mocks__/fixtures';
-import type { GamesState } from '../../store/game/game.interfaces';
-import { useCurrentGame } from './useCurrentGame';
-
-function makeWrapper(gamesState: GamesState) {
-  const store = configureStore({
-    reducer: { games: gamesReducer },
-    preloadedState: { games: gamesState } as { games: GamesState },
-  });
-  return function Wrapper({ children }: { children: ReactNode }) {
-    return <Provider store={store}>{children}</Provider>;
-  };
-}
-
-describe('useCurrentGame', () => {
-  it('returns an empty result when no games are active', () => {
-    const { result } = renderHook(() => useCurrentGame(), {
-      wrapper: makeWrapper({ games: {} }),
-    });
-    expect(result.current.gameId).toBeUndefined();
-    expect(result.current.game).toBeUndefined();
-    expect(result.current.isSpectator).toBe(false);
-  });
-
-  it('defaults to the first active game when gameId is omitted', () => {
-    const game = makeGameEntry({
-      localPlayerId: 7,
-      hostId: 7,
-      started: true,
-      players: { 7: makePlayerEntry({ properties: makePlayerProperties({ playerId: 7 }) }) },
-    });
-    const wrapper = makeWrapper({ games: { 42: { ...game, info: { ...game.info, gameId: 42 } } } });
-
-    const { result } = renderHook(() => useCurrentGame(), { wrapper });
-
-    expect(result.current.gameId).toBe(42);
-    expect(result.current.game).toBeDefined();
-    expect(result.current.localPlayer).toBeDefined();
-    expect(result.current.isStarted).toBe(true);
-    expect(result.current.isHost).toBe(true);
-    expect(result.current.isSpectator).toBe(false);
-  });
-
-  it('honors an explicit gameId over the default', () => {
-    const g1 = makeGameEntry({ started: false });
-    const g2 = makeGameEntry({ started: true });
-    const wrapper = makeWrapper({ games: { 1: g1, 2: g2 } });
-
-    const { result } = renderHook(() => useCurrentGame(2), { wrapper });
-
-    expect(result.current.gameId).toBe(2);
-    expect(result.current.isStarted).toBe(true);
-  });
-
-  it('reports spectator and judge flags from game entry', () => {
-    const game = makeGameEntry({ spectator: true, judge: true, hostId: 99 });
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useCurrentGame(), { wrapper });
-
-    expect(result.current.isSpectator).toBe(true);
-    expect(result.current.isJudge).toBe(true);
-    expect(result.current.isHost).toBe(false);
-  });
-
-  it('returns empty shape when the requested gameId is missing', () => {
-    const game = makeGameEntry();
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useCurrentGame(999), { wrapper });
-
-    expect(result.current.gameId).toBe(999);
-    expect(result.current.game).toBeUndefined();
-    expect(result.current.localPlayer).toBeUndefined();
-  });
-});
diff --git a/webclient/src/hooks/game/useCurrentGame.ts b/webclient/src/hooks/game/useCurrentGame.ts
deleted file mode 100644
index 7ca2800b2..000000000
--- a/webclient/src/hooks/game/useCurrentGame.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useMemo } from 'react';
-import { GameSelectors, useAppSelector } from '@app/store';
-import type { Enriched } from '@app/types';
-
-export interface CurrentGame {
-  gameId: number | undefined;
-  game: Enriched.GameEntry | undefined;
-  localPlayer: Enriched.PlayerEntry | undefined;
-  isSpectator: boolean;
-  isJudge: boolean;
-  isHost: boolean;
-  isStarted: boolean;
-}
-
-export function useCurrentGame(gameId?: number): CurrentGame {
-  const activeGameIds = useAppSelector(GameSelectors.getActiveGameIds);
-
-  const resolvedGameId: number | undefined =
-    gameId ?? (activeGameIds.length > 0 ? activeGameIds[0] : undefined);
-
-  const game = useAppSelector((state) =>
-    resolvedGameId != null ? GameSelectors.getGame(state, resolvedGameId) : undefined,
-  );
-
-  return useMemo<CurrentGame>(() => {
-    if (!game || resolvedGameId == null) {
-      return {
-        gameId: resolvedGameId,
-        game: undefined,
-        localPlayer: undefined,
-        isSpectator: false,
-        isJudge: false,
-        isHost: false,
-        isStarted: false,
-      };
-    }
-    const localPlayer = game.players[game.localPlayerId];
-    return {
-      gameId: resolvedGameId,
-      game,
-      localPlayer,
-      isSpectator: game.spectator,
-      isJudge: game.judge,
-      isHost: game.hostId === game.localPlayerId,
-      isStarted: game.started,
-    };
-  }, [game, resolvedGameId]);
-}
diff --git a/webclient/src/hooks/game/useGameAccess.spec.tsx b/webclient/src/hooks/game/useGameAccess.spec.tsx
deleted file mode 100644
index b2eeacc63..000000000
--- a/webclient/src/hooks/game/useGameAccess.spec.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { ReactNode } from 'react';
-import { renderHook } from '@testing-library/react';
-import { configureStore } from '@reduxjs/toolkit';
-import { Provider } from 'react-redux';
-
-// Deep imports are intentional here: pulling from `@app/store` eagerly
-// evaluates `store/index.ts` → `configureStore(rootReducer)`, instantiating
-// the real singleton store that would race with the test-local store
-// created in makeWrapper. Importing the reducer + type directly side-steps
-// that and keeps this hook spec self-contained.
-import { gamesReducer } from '../../store/game/game.reducer';
-import { makeGameEntry } from '../../store/game/__mocks__/fixtures';
-import type { GamesState } from '../../store/game/game.interfaces';
-import { useGameAccess } from './useGameAccess';
-
-// `preloadedState` on configureStore is typed as `PreloadedState<S>` which
-// narrows collection fields past GamesState; a single precise cast keeps
-// the spec strict while avoiding the broader `as any`.
-function makeWrapper(gamesState: GamesState) {
-  const store = configureStore({
-    reducer: { games: gamesReducer },
-    preloadedState: { games: gamesState } as { games: GamesState },
-  });
-  return function Wrapper({ children }: { children: ReactNode }) {
-    return <Provider store={store}>{children}</Provider>;
-  };
-}
-
-describe('useGameAccess', () => {
-  it('returns fully locked out when the game is missing', () => {
-    const wrapper = makeWrapper({ games: {} });
-    const { result } = renderHook(() => useGameAccess(1), { wrapper });
-    expect(result.current).toEqual({ canAct: false, canView: false, isLocalPlayer: false });
-  });
-
-  it('grants full action rights when no target is given and viewer is a local (non-spectator) player', () => {
-    const game = makeGameEntry({ localPlayerId: 5, spectator: false, judge: false });
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useGameAccess(1), { wrapper });
-
-    expect(result.current.canAct).toBe(true);
-    expect(result.current.canView).toBe(true);
-    expect(result.current.isLocalPlayer).toBe(false);
-  });
-
-  it('allows actions against the local player target', () => {
-    const game = makeGameEntry({ localPlayerId: 5, spectator: false });
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useGameAccess(1, 5), { wrapper });
-
-    expect(result.current.canAct).toBe(true);
-    expect(result.current.isLocalPlayer).toBe(true);
-  });
-
-  it('denies actions against another player target for a normal user', () => {
-    const game = makeGameEntry({ localPlayerId: 5, spectator: false, judge: false });
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useGameAccess(1, 9), { wrapper });
-
-    expect(result.current.canAct).toBe(false);
-    expect(result.current.isLocalPlayer).toBe(false);
-    expect(result.current.canView).toBe(true);
-  });
-
-  it('locks out all actions in spectator mode (even self-targeted)', () => {
-    const game = makeGameEntry({ localPlayerId: 5, spectator: true, judge: false });
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useGameAccess(1, 5), { wrapper });
-
-    expect(result.current.canAct).toBe(false);
-    expect(result.current.canView).toBe(true);
-  });
-
-  it('allows judges to act on any player', () => {
-    const game = makeGameEntry({ localPlayerId: 5, spectator: false, judge: true });
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useGameAccess(1, 9), { wrapper });
-
-    expect(result.current.canAct).toBe(true);
-    expect(result.current.isLocalPlayer).toBe(false);
-  });
-
-  // Desktop parity: judge status wins over the spectator flag. Servatrice
-  // sends judges with `spectator: true` on the wire; the hook must still
-  // let them act.
-  it('allows judges to act even when flagged spectator', () => {
-    const game = makeGameEntry({ localPlayerId: 5, spectator: true, judge: true });
-    const wrapper = makeWrapper({ games: { 1: game } });
-
-    const { result } = renderHook(() => useGameAccess(1, 9), { wrapper });
-
-    expect(result.current.canAct).toBe(true);
-    expect(result.current.canView).toBe(true);
-  });
-});
diff --git a/webclient/src/hooks/game/useGameAccess.ts b/webclient/src/hooks/game/useGameAccess.ts
deleted file mode 100644
index f62bbe961..000000000
--- a/webclient/src/hooks/game/useGameAccess.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useMemo } from 'react';
-import { GameSelectors, useAppSelector } from '@app/store';
-
-export interface GameAccess {
-  canAct: boolean;
-  canView: boolean;
-  isLocalPlayer: boolean;
-}
-
-/**
- * Per-action gate: returns whether the current user may issue commands
- * affecting `targetPlayerId` (or the game as a whole when omitted).
- */
-export function useGameAccess(gameId: number | undefined, targetPlayerId?: number): GameAccess {
-  const game = useAppSelector((state) =>
-    gameId != null ? GameSelectors.getGame(state, gameId) : undefined,
-  );
-
-  return useMemo<GameAccess>(() => {
-    if (!game) {
-      return { canAct: false, canView: false, isLocalPlayer: false };
-    }
-    const isLocalPlayer = targetPlayerId != null && targetPlayerId === game.localPlayerId;
-    const noTargetButLocalControls = targetPlayerId == null && !game.spectator;
-    const canAct = game.judge || (!game.spectator && (isLocalPlayer || noTargetButLocalControls));
-
-    return {
-      canAct,
-      canView: true,
-      isLocalPlayer,
-    };
-  }, [game, targetPlayerId]);
-}
diff --git a/webclient/src/hooks/game/useGameLifecycle.spec.tsx b/webclient/src/hooks/game/useGameLifecycle.spec.tsx
deleted file mode 100644
index 666ef8008..000000000
--- a/webclient/src/hooks/game/useGameLifecycle.spec.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { ReactNode } from 'react';
-import { act, renderHook } from '@testing-library/react';
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
-import { Provider } from 'react-redux';
-
-import { actionReducer } from '../../store/actions/actionReducer';
-import { gamesReducer } from '../../store/game/game.reducer';
-import { Types as GameTypes } from '../../store/game/game.types';
-
-import { useGameLifecycle } from './useGameLifecycle';
-
-function makeStore() {
-  return configureStore({
-    reducer: combineReducers({ games: gamesReducer, action: actionReducer }),
-  });
-}
-
-function wrap(store: ReturnType<typeof makeStore>) {
-  return function Wrapper({ children }: { children: ReactNode }) {
-    return <Provider store={store}>{children}</Provider>;
-  };
-}
-
-describe('useGameLifecycle', () => {
-  it('invokes onKicked when a kicked action targets this gameId', () => {
-    const store = makeStore();
-    const onKicked = vi.fn();
-    const onGameClosed = vi.fn();
-
-    renderHook(
-      () => useGameLifecycle(42, { onKicked, onGameClosed }),
-      { wrapper: wrap(store) },
-    );
-
-    act(() => {
-      store.dispatch({ type: GameTypes.KICKED, payload: { gameId: 42 } });
-    });
-
-    expect(onKicked).toHaveBeenCalledTimes(1);
-    expect(onGameClosed).not.toHaveBeenCalled();
-  });
-
-  it('invokes onGameClosed when a gameClosed action targets this gameId', () => {
-    const store = makeStore();
-    const onKicked = vi.fn();
-    const onGameClosed = vi.fn();
-
-    renderHook(
-      () => useGameLifecycle(42, { onKicked, onGameClosed }),
-      { wrapper: wrap(store) },
-    );
-
-    act(() => {
-      store.dispatch({ type: GameTypes.GAME_CLOSED, payload: { gameId: 42 } });
-    });
-
-    expect(onGameClosed).toHaveBeenCalledTimes(1);
-    expect(onKicked).not.toHaveBeenCalled();
-  });
-
-  it('ignores kicked/closed actions for a different gameId', () => {
-    const store = makeStore();
-    const onKicked = vi.fn();
-    const onGameClosed = vi.fn();
-
-    renderHook(
-      () => useGameLifecycle(42, { onKicked, onGameClosed }),
-      { wrapper: wrap(store) },
-    );
-
-    act(() => {
-      store.dispatch({ type: GameTypes.KICKED, payload: { gameId: 7 } });
-      store.dispatch({ type: GameTypes.GAME_CLOSED, payload: { gameId: 7 } });
-    });
-
-    expect(onKicked).not.toHaveBeenCalled();
-    expect(onGameClosed).not.toHaveBeenCalled();
-  });
-
-  it('is inert when gameId is undefined', () => {
-    const store = makeStore();
-    const onKicked = vi.fn();
-    const onGameClosed = vi.fn();
-
-    renderHook(
-      () => useGameLifecycle(undefined, { onKicked, onGameClosed }),
-      { wrapper: wrap(store) },
-    );
-
-    act(() => {
-      store.dispatch({ type: GameTypes.KICKED, payload: { gameId: 42 } });
-      store.dispatch({ type: GameTypes.GAME_CLOSED, payload: { gameId: 42 } });
-    });
-
-    expect(onKicked).not.toHaveBeenCalled();
-    expect(onGameClosed).not.toHaveBeenCalled();
-  });
-
-  it('ignores unrelated action types', () => {
-    const store = makeStore();
-    const onKicked = vi.fn();
-    const onGameClosed = vi.fn();
-
-    renderHook(
-      () => useGameLifecycle(42, { onKicked, onGameClosed }),
-      { wrapper: wrap(store) },
-    );
-
-    act(() => {
-      store.dispatch({ type: GameTypes.GAME_HOST_CHANGED, payload: { gameId: 42, hostId: 7 } });
-    });
-
-    expect(onKicked).not.toHaveBeenCalled();
-    expect(onGameClosed).not.toHaveBeenCalled();
-  });
-});
diff --git a/webclient/src/hooks/game/useGameLifecycle.ts b/webclient/src/hooks/game/useGameLifecycle.ts
deleted file mode 100644
index 8fddfb135..000000000
--- a/webclient/src/hooks/game/useGameLifecycle.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { GameTypes } from '@app/store';
-
-import { useReduxEffect } from '../useReduxEffect';
-
-export interface GameLifecycleHandlers {
-  onKicked: () => void;
-  onGameClosed: () => void;
-}
-
-/**
- * Watches for `kicked` / `gameClosed` events targeting `gameId` and invokes
- * the matching handler. Consumers own toast + navigation because hooks cannot
- * import from `components/`. Mirrors desktop Cockatrice's TabGame tear-down:
- * game_event_handler.cpp eventKicked / eventGameClosed emit signals that close
- * the tab.
- */
-export function useGameLifecycle(
-  gameId: number | undefined,
-  handlers: GameLifecycleHandlers,
-): void {
-  useReduxEffect(
-    (action) => {
-      if (gameId == null || action.payload?.gameId !== gameId) {
-        return;
-      }
-      if (action.type === GameTypes.KICKED) {
-        handlers.onKicked();
-      } else {
-        handlers.onGameClosed();
-      }
-    },
-    [GameTypes.KICKED, GameTypes.GAME_CLOSED],
-    [gameId],
-  );
-}
diff --git a/webclient/src/hooks/game/useScryfallCard.spec.ts b/webclient/src/hooks/game/useScryfallCard.spec.ts
deleted file mode 100644
index 799bb54b6..000000000
--- a/webclient/src/hooks/game/useScryfallCard.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useScryfallCard } from './useScryfallCard';
-
-describe('useScryfallCard', () => {
-  it('returns not-ready when card is null', () => {
-    const { result } = renderHook(() => useScryfallCard(null));
-    expect(result.current).toEqual({ smallUrl: null, normalUrl: null, ready: false });
-  });
-
-  it('returns not-ready when card has neither providerId nor name', () => {
-    const { result } = renderHook(() => useScryfallCard({}));
-    expect(result.current.ready).toBe(false);
-    expect(result.current.smallUrl).toBeNull();
-  });
-
-  it('builds both small and normal URLs from providerId', () => {
-    const { result } = renderHook(() =>
-      useScryfallCard({ providerId: 'abc-123', name: 'Anything' }),
-    );
-    expect(result.current.ready).toBe(true);
-    expect(result.current.smallUrl).toContain('/cards/abc-123');
-    expect(result.current.smallUrl).toContain('version=small');
-    expect(result.current.normalUrl).toContain('/cards/abc-123');
-    expect(result.current.normalUrl).toContain('version=normal');
-  });
-
-  it('falls back to name when providerId is empty', () => {
-    const { result } = renderHook(() =>
-      useScryfallCard({ providerId: '', name: 'Lightning Bolt' }),
-    );
-    expect(result.current.ready).toBe(true);
-    expect(result.current.smallUrl).toContain('/cards/named');
-    expect(result.current.smallUrl).toContain('Lightning%20Bolt');
-  });
-
-  it('memoizes the result across re-renders with the same inputs', () => {
-    const card = { providerId: 'abc-123' };
-    const { result, rerender } = renderHook(({ c }) => useScryfallCard(c), {
-      initialProps: { c: card },
-    });
-    const first = result.current;
-    rerender({ c: card });
-    expect(result.current).toBe(first);
-  });
-});
diff --git a/webclient/src/hooks/game/useScryfallCard.ts b/webclient/src/hooks/game/useScryfallCard.ts
deleted file mode 100644
index 1bea58213..000000000
--- a/webclient/src/hooks/game/useScryfallCard.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useMemo } from 'react';
-import { App } from '@app/types';
-import { getScryfallUrl } from '@app/services';
-
-export interface ScryfallCard {
-  smallUrl: string | null;
-  normalUrl: string | null;
-  ready: boolean;
-}
-
-interface CardLike {
-  providerId?: string;
-  name?: string;
-}
-
-export function useScryfallCard(card: CardLike | null | undefined): ScryfallCard {
-  return useMemo<ScryfallCard>(() => {
-    if (!card) {
-      return { smallUrl: null, normalUrl: null, ready: false };
-    }
-    const smallUrl = getScryfallUrl(card, App.ScryfallImageSize.Small);
-    const normalUrl = getScryfallUrl(card, App.ScryfallImageSize.Normal);
-    return {
-      smallUrl,
-      normalUrl,
-      ready: smallUrl != null,
-    };
-  }, [card?.providerId, card?.name]);
-}
diff --git a/webclient/src/hooks/index.ts b/webclient/src/hooks/index.ts
index 883e463ef..679bca669 100644
--- a/webclient/src/hooks/index.ts
+++ b/webclient/src/hooks/index.ts
@@ -6,4 +6,3 @@ export * from './useReduxEffect';
 export * from './useSettings';
 export * from './useSharedStore';
 export * from './useWebClient';
-export * from './game';
diff --git a/webclient/src/hooks/useFireOnce/useFireOnce.ts b/webclient/src/hooks/useFireOnce/useFireOnce.ts
index df2bb2a17..e4f5265de 100644
--- a/webclient/src/hooks/useFireOnce/useFireOnce.ts
+++ b/webclient/src/hooks/useFireOnce/useFireOnce.ts
@@ -1,8 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 
-type FireOnceFn = (...args: never[]) => unknown;
+type UseFireOnceType = (...args: any) => any;
 
-export function useFireOnce<T extends FireOnceFn>(fn: T): [boolean, () => void, (...args: Parameters<T>) => void] {
+export function useFireOnce<T extends UseFireOnceType>(fn: T): [boolean, () => void, (...args: Parameters<T>) => void] {
   const [actionIsInFlight, setActionIsInFlight] = useState(false);
   const fnRef = useRef(fn);
   fnRef.current = fn;
diff --git a/webclient/src/hooks/useKnownHosts.spec.ts b/webclient/src/hooks/useKnownHosts.spec.ts
index 92ee17317..40de6a8af 100644
--- a/webclient/src/hooks/useKnownHosts.spec.ts
+++ b/webclient/src/hooks/useKnownHosts.spec.ts
@@ -106,7 +106,7 @@ beforeEach(async () => {
 });
 
 describe('useKnownHosts', () => {
-  test('seeds DefaultHosts when the DB is empty and picks hosts[0] as selected', async () => {
+  test('seeds DefaultHosts when the DB is empty and pins hosts[0] as lastSelected', async () => {
     const { result } = renderHook(() => useKnownHostsModule.useKnownHosts());
 
     await waitFor(() => {
@@ -118,9 +118,7 @@ describe('useKnownHosts', () => {
     }
     expect(result.current.value.hosts).toHaveLength(2);
     expect(result.current.value.selectedHost.name).toBe('A');
-    // normalize no longer auto-persists `lastSelected = true`; it's set on
-    // explicit `select()` / `remove()` paths instead. Seed-time selection
-    // is in-memory only until the user picks.
+    expect(result.current.value.selectedHost.lastSelected).toBe(true);
   });
 
   test('select(id) flips lastSelected atomically — exactly one row true', async () => {
diff --git a/webclient/src/hooks/useKnownHosts.ts b/webclient/src/hooks/useKnownHosts.ts
index 3183ed5cf..d3ebf0c29 100644
--- a/webclient/src/hooks/useKnownHosts.ts
+++ b/webclient/src/hooks/useKnownHosts.ts
@@ -17,16 +17,22 @@ const loadAll = async (): Promise<HostDTO[]> => {
   return hosts;
 };
 
-const normalize = (hosts: HostDTO[]): KnownHostsValue => {
+const normalize = async (hosts: HostDTO[]): Promise<KnownHostsValue> => {
   const existing = hosts.find((h) => h.lastSelected);
-  return { hosts, selectedHost: existing ?? hosts[0] };
+  if (existing) {
+    return { hosts, selectedHost: existing };
+  }
+
+  const selected = hosts[0];
+  selected.lastSelected = true;
+  await selected.save();
+  return { hosts, selectedHost: selected };
 };
 
 export const knownHostsStore = createSharedStore<KnownHostsValue>(async () => {
   const hosts = await loadAll();
   return normalize(hosts);
 });
-
 const store = knownHostsStore;
 
 export type KnownHostsHook = Loadable<KnownHostsValue> & {
@@ -92,7 +98,7 @@ const update = async (id: number, patch: Partial<HostDTO>): Promise<HostDTO> =>
 
 const remove = async (id: number): Promise<void> => {
   const { hosts, selectedHost } = requireValue('remove');
-  await HostDTO.delete(id);
+  await HostDTO.delete(id as unknown as string);
   const next = hosts.filter((h) => h.id !== id);
   let nextSelected = selectedHost;
   if (selectedHost.id === id) {
diff --git a/webclient/src/hooks/useReduxEffect.tsx b/webclient/src/hooks/useReduxEffect.tsx
index 278b63632..f0b6b3e35 100644
--- a/webclient/src/hooks/useReduxEffect.tsx
+++ b/webclient/src/hooks/useReduxEffect.tsx
@@ -7,15 +7,10 @@ File is adapted from https://github.com/Qeepsake/use-redux-effect under MIT Lice
 import { useEffect, useRef, DependencyList } from 'react'
 import { useStore } from 'react-redux'
 
-export interface ReduxEffectAction<P = unknown> {
-  type: string;
-  payload: P;
-  meta: unknown;
-  error: boolean;
-  count: number;
-}
+// Actions are identified by string `type` at runtime, so the callback
+// receives an untyped action object to allow free property access.
 
-export type ReduxEffect<P = unknown> = (action: ReduxEffectAction<P>) => void;
+export type ReduxEffect = (action: any) => void
 
 /**
  * Subscribes to redux store events.
@@ -25,8 +20,8 @@ export type ReduxEffect<P = unknown> = (action: ReduxEffectAction<P>) => void;
  * what lets `<Server />` catch a `JOIN_ROOM` that auto-join fired while the
  * route was transitioning.
  */
-export function useReduxEffect<P = unknown>(
-  effect: ReduxEffect<P>,
+export function useReduxEffect(
+  effect: ReduxEffect,
   type: string | string[],
   deps: DependencyList = [],
 ): void {
@@ -42,7 +37,7 @@ export function useReduxEffect<P = unknown>(
 
   useEffect(() => {
     const check = (): void => {
-      const action = (store.getState() as { action?: ReduxEffectAction<P> }).action;
+      const action = (store.getState() as any).action;
       if (!action || action.count === lastHandledCountRef.current) {
         return;
       }
diff --git a/webclient/src/hooks/useWebClient.tsx b/webclient/src/hooks/useWebClient.tsx
index 0d3706d67..3d9c02697 100644
--- a/webclient/src/hooks/useWebClient.tsx
+++ b/webclient/src/hooks/useWebClient.tsx
@@ -3,7 +3,6 @@ import { WebClient } from '@app/websocket';
 import { createWebClientRequest, createWebClientResponse } from '@app/api';
 
 export const WebClientContext = createContext<WebClient | null>(null);
-WebClientContext.displayName = 'WebClientContext';
 
 export function WebClientProvider({ children }: { children: ReactNode }) {
   const [client] = useState(() => new WebClient(createWebClientRequest(), createWebClientResponse()));
diff --git a/webclient/src/i18n-default.json b/webclient/src/i18n-default.json
index c38b91fdc..3c63e0abb 100644
--- a/webclient/src/i18n-default.json
+++ b/webclient/src/i18n-default.json
@@ -3,7 +3,6 @@
     "language": "English",
     "disconnect": "Disconnect",
     "label": {
-      "confirmEmail": "Confirm Email",
       "confirmPassword": "Confirm Password",
       "confirmSure": "Are you sure?",
       "country": "Country",
@@ -20,7 +19,6 @@
       "username": "Username"
     },
     "validation": {
-      "emailsMustMatch": "Emails don't match",
       "minChars": "Minimum of {count} {count, plural, one {character} other {characters}} required",
       "passwordsMustMatch": "Passwords don't match",
       "required": "Required"
@@ -314,55 +312,6 @@
       "accountActivationSuccess": "Account Activated Successfully"
     }
   },
-  "Logs": {
-    "tab": {
-      "rooms": "Rooms",
-      "games": "Games",
-      "chats": "Chats"
-    },
-    "column": {
-      "time": "Time",
-      "senderName": "Sender Name",
-      "senderIp": "Sender IP",
-      "message": "Message",
-      "targetId": "Target ID",
-      "targetName": "Target Name"
-    },
-    "message": {
-      "emptyFilter": "Enter at least one search field before submitting."
-    }
-  },
-  "Player": {
-    "title": "User Information",
-    "label": {
-      "realName": "Real Name",
-      "location": "Location",
-      "userLevel": "User Level",
-      "accountAge": "Account Age"
-    },
-    "level": {
-      "administrator": "Administrator",
-      "moderator": "Moderator",
-      "registered": "Registered user",
-      "unregistered": "Unregistered user",
-      "judge": "Judge"
-    },
-    "age": {
-      "unknown": "Unknown",
-      "days": "{count, plural, one {# day} other {# days}}",
-      "daysWithYears": "{years, plural, one {# year} other {# years}}, {days, plural, one {# day} other {# days}}"
-    },
-    "action": {
-      "addBuddy": "Add to Buddy List",
-      "removeBuddy": "Remove from Buddy List",
-      "addIgnore": "Add to Ignore List",
-      "removeIgnore": "Remove from Ignore List",
-      "message": "Message",
-      "warn": "Warn User",
-      "ban": "Ban from Server",
-      "notFound": "User not found or still loading…"
-    }
-  },
   "UnsupportedContainer": {
     "title": "Unsupported Browser",
     "subtitle1": "Please update your browser and/or check your permissions.",
@@ -394,29 +343,6 @@
       "activate": "Activate Account"
     }
   },
-  "CardImportForm": {
-    "steps": {
-      "importSets": "Import sets",
-      "saveSets": "Save sets",
-      "importTokens": "Import tokens",
-      "finished": "Finished"
-    },
-    "label": {
-      "downloadUrl": "Download URL"
-    },
-    "button": {
-      "import": "Import",
-      "save": "Save",
-      "goBack": "Go Back",
-      "done": "Done"
-    },
-    "message": {
-      "finished": "Finished!",
-      "importSummary": "Import finished: {count} cards.",
-      "setSummary": "{name}: {count} cards imported",
-      "failedToSave": "Failed to save cards"
-    }
-  },
   "KnownHostForm": {
     "help": "Need help adding a new host?",
     "label": {
@@ -430,7 +356,7 @@
       "forgot": "Forgot Password",
       "login": "Login",
       "savePassword": "Save Password",
-      "savedPassword": "* Saved Password *"
+      "savedPassword": "Saved Password"
     }
   },
   "RegisterForm": {
@@ -452,20 +378,5 @@
     "label": {
       "reset": "Reset Password"
     }
-  },
-  "SearchForm": {
-    "label": {
-      "userName": "Username",
-      "ipAddress": "IP Address",
-      "gameName": "Game Name",
-      "gameId": "GameID",
-      "message": "Message",
-      "rooms": "Rooms",
-      "games": "Games",
-      "chats": "Chats"
-    },
-    "button": {
-      "search": "Search Logs"
-    }
   }
 }
\ No newline at end of file
diff --git a/webclient/src/index.css b/webclient/src/index.css
index 612434ab8..c5f9b9230 100644
--- a/webclient/src/index.css
+++ b/webclient/src/index.css
@@ -1,4 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Teko&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+
+:root {
+
+}
 
 * {
   box-sizing: border-box;
diff --git a/webclient/src/index.tsx b/webclient/src/index.tsx
index 0fed235f8..b0137f943 100644
--- a/webclient/src/index.tsx
+++ b/webclient/src/index.tsx
@@ -11,7 +11,6 @@ import { AppShell } from '@app/containers';
 import { materialTheme } from './material-theme';
 
 import './i18n';
-import './colors.css';
 import './index.css';
 
 const AppWithMaterialTheme = () => {
@@ -26,7 +25,7 @@ const AppWithMaterialTheme = () => {
       </StrictMode>
     </WebClientProvider>
   );
-};
+}
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
diff --git a/webclient/src/material-theme.ts b/webclient/src/material-theme.ts
index efdc5ec30..8f646c85a 100644
--- a/webclient/src/material-theme.ts
+++ b/webclient/src/material-theme.ts
@@ -42,6 +42,13 @@ export const materialTheme = createTheme({
   palette,
 
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        '@global': {
+          '@font-face': [],
+        },
+      },
+    },
     MuiButton: {
       styleOverrides: {
         root: {
diff --git a/webclient/src/services/CardImporterService.ts b/webclient/src/services/CardImporterService.ts
index 02412844a..20d155214 100644
--- a/webclient/src/services/CardImporterService.ts
+++ b/webclient/src/services/CardImporterService.ts
@@ -31,7 +31,7 @@ class CardImporterService {
             tokens: tokens.map(({ name }) => name),
           }));
 
-          const unsortedCards = sortedSets.reduce<Record<string, App.Card>>((acc, set) => {
+          const unsortedCards = sortedSets.reduce((acc, set) => {
             set.cards.forEach(card => acc[card.name] = card);
             return acc;
           }, {});
@@ -56,7 +56,7 @@ class CardImporterService {
           throw new Error('Failed to fetch');
         }
 
-        return response.text();
+        return response.text()
       })
       .then((xmlString) => {
         try {
@@ -75,17 +75,17 @@ class CardImporterService {
         } catch (err) {
           throw new Error(error, { cause: err });
         }
-      });
+      })
   }
 
   private parseXmlAttributes(dom: Element) {
-    return Array.from(dom.children).reduce<Record<string, unknown>>((attributes, child) => {
+    return Array.from(dom.children).reduce((attributes, child) => {
       const value = child.children.length ? this.parseXmlAttributes(child) : child.innerHTML;
 
       let parsedAttributes = { value };
 
       if (child.attributes.length) {
-        const childAttributes = Array.from(child.attributes).reduce<Record<string, string>>((acc, { name, value }) => {
+        const childAttributes = Array.from(child.attributes).reduce((acc, { name, value }) => {
           acc[name] = value;
           return acc;
         }, {});
@@ -99,7 +99,7 @@ class CardImporterService {
       // @TODO clean this up and normalize what i'm returning
       if (attributes[child.tagName]) {
         if (Array.isArray(attributes[child.tagName])) {
-          attributes[child.tagName].push(parsedAttributes);
+          attributes[child.tagName].push(parsedAttributes)
         } else {
           attributes[child.tagName] = [attributes[child.tagName], parsedAttributes];
         }
diff --git a/webclient/src/services/ScryfallService.spec.ts b/webclient/src/services/ScryfallService.spec.ts
deleted file mode 100644
index 83382d8c0..000000000
--- a/webclient/src/services/ScryfallService.spec.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { App } from '@app/types';
-import {
-  getScryfallUrlById,
-  getScryfallUrlByName,
-  getScryfallUrl,
-} from './ScryfallService';
-
-describe('ScryfallService', () => {
-  describe('getScryfallUrlById', () => {
-    it('builds a /cards/{id} image URL with the default small size', () => {
-      expect(getScryfallUrlById('abc-123')).toBe(
-        'https://api.scryfall.com/cards/abc-123?format=image&version=small',
-      );
-    });
-
-    it('honors the requested size', () => {
-      expect(getScryfallUrlById('abc-123', App.ScryfallImageSize.Normal)).toBe(
-        'https://api.scryfall.com/cards/abc-123?format=image&version=normal',
-      );
-    });
-
-    it('URL-encodes the provider id', () => {
-      expect(getScryfallUrlById('foo bar/baz')).toContain('foo%20bar%2Fbaz');
-    });
-  });
-
-  describe('getScryfallUrlByName', () => {
-    it('builds a /cards/named?exact= image URL', () => {
-      expect(getScryfallUrlByName('Lightning Bolt')).toBe(
-        'https://api.scryfall.com/cards/named?exact=Lightning%20Bolt&format=image&version=small',
-      );
-    });
-
-    it('honors the requested size', () => {
-      expect(getScryfallUrlByName('Island', App.ScryfallImageSize.Normal)).toBe(
-        'https://api.scryfall.com/cards/named?exact=Island&format=image&version=normal',
-      );
-    });
-
-    it('URL-encodes commas, apostrophes, and slashes in card names', () => {
-      expect(getScryfallUrlByName('Jace, the Mind Sculptor')).toContain('Jace%2C%20the%20Mind%20Sculptor');
-    });
-  });
-
-  describe('getScryfallUrl (dispatcher)', () => {
-    it('prefers providerId when present', () => {
-      expect(getScryfallUrl({ providerId: 'id-1', name: 'Anything' })).toBe(
-        getScryfallUrlById('id-1'),
-      );
-    });
-
-    it('falls back to name when providerId is empty', () => {
-      expect(getScryfallUrl({ providerId: '', name: 'Island' })).toBe(
-        getScryfallUrlByName('Island'),
-      );
-    });
-
-    it('falls back to name when providerId is undefined', () => {
-      expect(getScryfallUrl({ name: 'Island' })).toBe(getScryfallUrlByName('Island'));
-    });
-
-    it('returns null when the card has no identifier at all', () => {
-      expect(getScryfallUrl({})).toBeNull();
-      expect(getScryfallUrl({ providerId: '', name: '' })).toBeNull();
-    });
-  });
-});
diff --git a/webclient/src/services/ScryfallService.ts b/webclient/src/services/ScryfallService.ts
deleted file mode 100644
index f47a404ef..000000000
--- a/webclient/src/services/ScryfallService.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { App } from '@app/types';
-
-const SCRYFALL_API = 'https://api.scryfall.com';
-
-/**
- * Build the `/cards/{id}` image URL for a known Scryfall card ID.
- *
- * Not called by runtime — `useScryfallCard` goes through
- * {@link getScryfallUrl} below. Retained because the spec pins the URL
- * shape independently, which has caught Scryfall API-version mismatches.
- */
-export function getScryfallUrlById(
-  providerId: string,
-  size: App.ScryfallImageSize = App.ScryfallImageSize.Small,
-): string {
-  const id = encodeURIComponent(providerId);
-  return `${SCRYFALL_API}/cards/${id}?format=image&version=${size}`;
-}
-
-/**
- * Build the `/cards/named?exact=` image URL for a card-name lookup.
- * See {@link getScryfallUrlById} for why this stays exported.
- */
-export function getScryfallUrlByName(
-  name: string,
-  size: App.ScryfallImageSize = App.ScryfallImageSize.Small,
-): string {
-  const exact = encodeURIComponent(name);
-  return `${SCRYFALL_API}/cards/named?exact=${exact}&format=image&version=${size}`;
-}
-
-/**
- * Runtime dispatcher: prefers `providerId` (Scryfall ID), falls back to
- * card name, returns null when neither is available. This is the only
- * function the UI layer calls.
- */
-export function getScryfallUrl(
-  card: { providerId?: string; name?: string },
-  size: App.ScryfallImageSize = App.ScryfallImageSize.Small,
-): string | null {
-  if (card.providerId) {
-    return getScryfallUrlById(card.providerId, size);
-  }
-  if (card.name) {
-    return getScryfallUrlByName(card.name, size);
-  }
-  return null;
-}
diff --git a/webclient/src/services/dexie/DexieDTOs/CardDTO.ts b/webclient/src/services/dexie/DexieDTOs/CardDTO.ts
index fdd31bf1c..863c5107a 100644
--- a/webclient/src/services/dexie/DexieDTOs/CardDTO.ts
+++ b/webclient/src/services/dexie/DexieDTOs/CardDTO.ts
@@ -15,6 +15,6 @@ export class CardDTO extends App.Card {
   static bulkAdd(cards: CardDTO[]): Promise<IndexableType> {
     return dexieService.cards.bulkPut(cards);
   }
-}
+};
 
 dexieService.cards.mapToClass(CardDTO);
diff --git a/webclient/src/services/dexie/DexieDTOs/HostDTO.ts b/webclient/src/services/dexie/DexieDTOs/HostDTO.ts
index 9288701a6..e07440f64 100644
--- a/webclient/src/services/dexie/DexieDTOs/HostDTO.ts
+++ b/webclient/src/services/dexie/DexieDTOs/HostDTO.ts
@@ -24,9 +24,9 @@ export class HostDTO extends App.Host {
     return dexieService.hosts.bulkAdd(hosts);
   }
 
-  static delete(id: number): Promise<void> {
+  static delete(id: string): Promise<void> {
     return dexieService.hosts.delete(id);
   }
-}
+};
 
 dexieService.hosts.mapToClass(HostDTO);
diff --git a/webclient/src/services/dexie/DexieDTOs/SetDTO.ts b/webclient/src/services/dexie/DexieDTOs/SetDTO.ts
index 151692a4e..ac90e19b7 100644
--- a/webclient/src/services/dexie/DexieDTOs/SetDTO.ts
+++ b/webclient/src/services/dexie/DexieDTOs/SetDTO.ts
@@ -15,6 +15,6 @@ export class SetDTO extends App.Set {
   static bulkAdd(sets: SetDTO[]): Promise<IndexableType> {
     return dexieService.sets.bulkPut(sets);
   }
-}
+};
 
 dexieService.sets.mapToClass(SetDTO);
diff --git a/webclient/src/services/dexie/DexieDTOs/SettingDTO.ts b/webclient/src/services/dexie/DexieDTOs/SettingDTO.ts
index 363b96050..451d34819 100644
--- a/webclient/src/services/dexie/DexieDTOs/SettingDTO.ts
+++ b/webclient/src/services/dexie/DexieDTOs/SettingDTO.ts
@@ -8,7 +8,6 @@ export class SettingDTO extends App.Setting {
 
     this.user = user;
     this.autoConnect = false;
-    this.invertVerticalCoordinate = false;
   }
 
   save() {
@@ -18,6 +17,6 @@ export class SettingDTO extends App.Setting {
   static get(user: string) {
     return dexieService.settings.where('user').equalsIgnoreCase(user).first();
   }
-}
+};
 
 dexieService.settings.mapToClass(SettingDTO);
diff --git a/webclient/src/services/dexie/DexieDTOs/TokenDTO.ts b/webclient/src/services/dexie/DexieDTOs/TokenDTO.ts
index a41b76ee0..1321fc437 100644
--- a/webclient/src/services/dexie/DexieDTOs/TokenDTO.ts
+++ b/webclient/src/services/dexie/DexieDTOs/TokenDTO.ts
@@ -15,6 +15,6 @@ export class TokenDTO extends App.Token {
   static bulkAdd(tokens: TokenDTO[]): Promise<IndexableType> {
     return dexieService.tokens.bulkPut(tokens);
   }
-}
+};
 
 dexieService.tokens.mapToClass(TokenDTO);
diff --git a/webclient/src/services/dexie/DexieSchemas/v1.schema.ts b/webclient/src/services/dexie/DexieSchemas/v1.schema.ts
index 238df02d5..32c29d2ed 100644
--- a/webclient/src/services/dexie/DexieSchemas/v1.schema.ts
+++ b/webclient/src/services/dexie/DexieSchemas/v1.schema.ts
@@ -16,4 +16,4 @@ export const schemaV1 = (db: Dexie) => {
     [Stores.TOKENS]: 'name.value',
     [Stores.HOSTS]: '++id',
   });
-};
+}
diff --git a/webclient/src/services/index.ts b/webclient/src/services/index.ts
index 006dcddbb..2d36a2628 100644
--- a/webclient/src/services/index.ts
+++ b/webclient/src/services/index.ts
@@ -1,5 +1,4 @@
 export * from './CardImporterService';
 export * from './HostService';
-export * from './ScryfallService';
 export * from './ServerProps';
 export * from './dexie';
diff --git a/webclient/src/store/actions/actionReducer.ts b/webclient/src/store/actions/actionReducer.ts
index e9e8ba85d..03e32d1d8 100644
--- a/webclient/src/store/actions/actionReducer.ts
+++ b/webclient/src/store/actions/actionReducer.ts
@@ -5,17 +5,17 @@
 
 import { UnknownAction } from '@reduxjs/toolkit'
 
-interface InitialState {
-  type: string | null
-  payload: unknown
-  meta: unknown
-  error: boolean
-  count: number
-}
+ interface InitialState {
+   type: string | null
+   payload: unknown
+   meta: unknown
+   error: boolean
+   count: number
+ }
 
 /**
- * Initial data.
- */
+  * Initial data.
+  */
 const initialState: InitialState = {
   type: null,
   payload: null,
@@ -25,12 +25,12 @@ const initialState: InitialState = {
 }
 
 /**
- * Stores the most recent action so `useReduxEffect` can react to dispatches.
- *
- * Payloads are deep-cloned to prevent shared object references between this
- * slice and the slice that owns the action. Without the clone, Immer mutations
- * in the target slice are detected as mutations of the stale payload stored here.
- */
+  * Stores the most recent action so `useReduxEffect` can react to dispatches.
+  *
+  * Payloads are deep-cloned to prevent shared object references between this
+  * slice and the slice that owns the action. Without the clone, Immer mutations
+  * in the target slice are detected as mutations of the stale payload stored here.
+  */
 export const actionReducer = (
   state = initialState,
   action: UnknownAction,
diff --git a/webclient/src/store/common/SortUtil.ts b/webclient/src/store/common/SortUtil.ts
index c42b72926..a8eaf7512 100644
--- a/webclient/src/store/common/SortUtil.ts
+++ b/webclient/src/store/common/SortUtil.ts
@@ -22,12 +22,12 @@ export default class SortUtil {
 
   static sortByFields<T extends object>(arr: T[], sorts: App.SortBy[]) {
     if (arr.length) {
-      const fieldTypes = sorts.map(s => typeof SortUtil.resolveFieldChain(arr[0], s.field));
-
       arr.sort((a, b) => {
         for (let i = 0; i < sorts.length; i++) {
           const sortBy = sorts[i];
-          const fieldType = fieldTypes[i];
+          const field = SortUtil.resolveFieldChain(arr[0], sortBy.field);
+
+          const fieldType = typeof field;
 
           if (fieldType === 'string') {
             const result = SortUtil.stringComparator(a, b, sortBy);
@@ -47,13 +47,13 @@ export default class SortUtil {
         }
 
         return 0;
-      });
+      })
     }
   }
 
   static sortUsersByField(users: Data.ServerInfo_User[], sortBy: App.SortBy) {
     if (users.length) {
-      users.sort((a, b) => SortUtil.userComparator(a, b, sortBy));
+      users.sort((a, b) => SortUtil.userComparator(a, b, sortBy))
     }
   }
 
@@ -89,16 +89,18 @@ export default class SortUtil {
     arr.sort((a, b) => SortUtil.stringComparator(a, b, sortBy));
   }
 
-  private static userComparator(a: Data.ServerInfo_User, b: Data.ServerInfo_User, sortBy: App.SortBy) {
-    const adminSortBy = {
-      field: 'userLevel',
-      order: App.SortDirection.DESC
-    };
+  private static userComparator(a: Data.ServerInfo_User, b: Data.ServerInfo_User, sortBy: App.SortBy, sortByUserLevel = true) {
+    if (sortByUserLevel) {
+      const adminSortBy = {
+        field: 'userLevel',
+        order: App.SortDirection.DESC
+      };
 
-    const adminSorted = SortUtil.numberComparator(a, b, adminSortBy);
+      const adminSorted = SortUtil.numberComparator(a, b, adminSortBy);
 
-    if (adminSorted) {
-      return adminSorted;
+      if (adminSorted) {
+        return adminSorted;
+      }
     }
 
     const sorted = SortUtil.stringComparator(a, b, sortBy);
diff --git a/webclient/src/store/common/index.ts b/webclient/src/store/common/index.ts
index 390e0c0b1..405723028 100644
--- a/webclient/src/store/common/index.ts
+++ b/webclient/src/store/common/index.ts
@@ -1,3 +1,2 @@
 export { default as SortUtil } from './SortUtil';
 export * from './normalizers';
-export * from './mergeSetFields';
diff --git a/webclient/src/store/common/mergeSetFields.ts b/webclient/src/store/common/mergeSetFields.ts
deleted file mode 100644
index 717fa373d..000000000
--- a/webclient/src/store/common/mergeSetFields.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { isFieldSet } from '@bufbuild/protobuf';
-import type { DescMessage, MessageShape } from '@bufbuild/protobuf';
-
-/**
- * Merges fields from `source` onto `target` in-place, copying only the fields
- * that are set on `source`. Use for reducers that receive partial proto
- * messages (e.g. desktop-server events where only changed fields are set on
- * the wire) — a naive assignment overwrites the target with protobuf defaults
- * for unset fields, wiping existing state.
- */
-export function mergeSetFields<Desc extends DescMessage>(
-  schema: Desc,
-  target: MessageShape<Desc>,
-  source: MessageShape<Desc>,
-): void {
-  for (const field of schema.fields) {
-    if (isFieldSet(source, field)) {
-      const key = field.localName as keyof MessageShape<Desc>;
-      target[key] = source[key];
-    }
-  }
-}
diff --git a/webclient/src/store/game/game.reducer.spec.ts b/webclient/src/store/game/game.reducer.spec.ts
index 0dfd5e91b..b9bc0f227 100644
--- a/webclient/src/store/game/game.reducer.spec.ts
+++ b/webclient/src/store/game/game.reducer.spec.ts
@@ -190,7 +190,7 @@ describe('2B: Game state & player management', () => {
     expect(last.message).toContain(fragment);
   });
 
-  it('PLAYER_PROPERTIES_CHANGED → merges set fields onto existing player properties', () => {
+  it('PLAYER_PROPERTIES_CHANGED → replaces properties on existing player', () => {
     const state = makeState();
     const newProps = makePlayerProperties({ playerId: 1, conceded: true });
     const result = gamesReducer(state, Actions.playerPropertiesChanged({
@@ -198,61 +198,7 @@ describe('2B: Game state & player management', () => {
       playerId: 1,
       properties: newProps,
     }));
-    expect(result.games[1].players[1].properties.conceded).toBe(true);
-    expect(result.games[1].players[1].properties.playerId).toBe(1);
-  });
-
-  it('PLAYER_PROPERTIES_CHANGED → partial update (only pingSeconds) preserves deckHash', () => {
-    // Regression: the desktop server's per-second ping tick sends
-    // Event_PlayerPropertiesChanged with only ping_seconds set. A naive
-    // overwrite would wipe deck_hash and disable the Ready button in the
-    // deck-select dialog mid-lobby.
-    const existing = makePlayerProperties({
-      playerId: 1,
-      deckHash: 'abc123',
-      readyStart: false,
-      sideboardLocked: true,
-    });
-    const state = makeState({
-      games: {
-        1: makeGameEntry({
-          players: { 1: makePlayerEntry({ properties: existing }) },
-        }),
-      },
-    });
-    const pingOnly = create(Data.ServerInfo_PlayerPropertiesSchema, { pingSeconds: 42 });
-    const result = gamesReducer(state, Actions.playerPropertiesChanged({
-      gameId: 1,
-      playerId: 1,
-      properties: pingOnly,
-    }));
-    const merged = result.games[1].players[1].properties;
-    expect(merged.pingSeconds).toBe(42);
-    expect(merged.deckHash).toBe('abc123');
-    expect(merged.readyStart).toBe(false);
-    expect(merged.sideboardLocked).toBe(true);
-  });
-
-  it('PLAYER_PROPERTIES_CHANGED → partial update (only readyStart) preserves deckHash', () => {
-    // Regression: cmdReadyStart server-side sends only ready_start set.
-    // The client must not lose the deck hash when the user clicks Ready.
-    const existing = makePlayerProperties({ playerId: 1, deckHash: 'abc123', readyStart: false });
-    const state = makeState({
-      games: {
-        1: makeGameEntry({
-          players: { 1: makePlayerEntry({ properties: existing }) },
-        }),
-      },
-    });
-    const readyOnly = create(Data.ServerInfo_PlayerPropertiesSchema, { readyStart: true });
-    const result = gamesReducer(state, Actions.playerPropertiesChanged({
-      gameId: 1,
-      playerId: 1,
-      properties: readyOnly,
-    }));
-    const merged = result.games[1].players[1].properties;
-    expect(merged.readyStart).toBe(true);
-    expect(merged.deckHash).toBe('abc123');
+    expect(result.games[1].players[1].properties).toBe(newProps);
   });
 });
 
@@ -1077,54 +1023,27 @@ describe('2J: Turn, phase, and chat', () => {
     }));
 
     expect(result.games[1].messages).toHaveLength(1);
-    expect(result.games[1].messages[0]).toEqual({
-      playerId: 2, message: 'gg', timeReceived: 123456789, kind: 'chat',
-    });
+    expect(result.games[1].messages[0]).toEqual({ playerId: 2, message: 'gg', timeReceived: 123456789 });
   });
 });
 
 
-describe('2K: Log-only actions', () => {
-  // These actions don't mutate game state, but they do append an event-log
-  // message — mirrors desktop's MessageLogWidget::logShuffle / logDumpZone /
-  // logRollDie which fire purely as chat-log entries.
-  it('ZONE_SHUFFLED → appends an event-log message', () => {
+describe('2K: No-op / passthrough actions', () => {
+  it('ZONE_SHUFFLED → returns state unchanged (identity)', () => {
     const state = makeState();
     const result = gamesReducer(state, Actions.zoneShuffled({ gameId: 1, playerId: 1, data: {} }));
-    const msgs = result.games[1].messages;
-    expect(msgs.length).toBe(1);
-    expect(msgs[0].kind).toBe('event');
-    expect(msgs[0].message).toContain('shuffles');
+    expect(result).toBe(state);
   });
 
-  it('ZONE_DUMPED → appends an event-log message', () => {
+  it('ZONE_DUMPED → returns state unchanged (identity)', () => {
     const state = makeState();
-    const result = gamesReducer(state, Actions.zoneDumped({
-      gameId: 1, playerId: 1,
-      data: { zoneOwnerId: 1, zoneName: 'deck', numberCards: 3, isReversed: false },
-    }));
-    const msgs = result.games[1].messages;
-    expect(msgs.length).toBe(1);
-    expect(msgs[0].kind).toBe('event');
-    expect(msgs[0].message).toContain('3');
+    const result = gamesReducer(state, Actions.zoneDumped({ gameId: 1, playerId: 1, data: {} }));
+    expect(result).toBe(state);
   });
 
-  it('DIE_ROLLED → appends an event-log message', () => {
+  it('DIE_ROLLED → returns state unchanged (identity)', () => {
     const state = makeState();
-    const result = gamesReducer(state, Actions.dieRolled({
-      gameId: 1, playerId: 1,
-      data: { sides: 20, value: 17, values: [17] },
-    }));
-    const msgs = result.games[1].messages;
-    expect(msgs.length).toBe(1);
-    expect(msgs[0].kind).toBe('event');
-    expect(msgs[0].message).toContain('17');
-    expect(msgs[0].message).toContain('20');
-  });
-
-  it('ZONE_SHUFFLED with unknown gameId → state unchanged', () => {
-    const state = makeState();
-    const result = gamesReducer(state, Actions.zoneShuffled({ gameId: 999, playerId: 1, data: {} }));
+    const result = gamesReducer(state, Actions.dieRolled({ gameId: 1, playerId: 1, data: {} }));
     expect(result).toBe(state);
   });
 
diff --git a/webclient/src/store/game/game.reducer.ts b/webclient/src/store/game/game.reducer.ts
index 349ee9fe0..9fad16f6b 100644
--- a/webclient/src/store/game/game.reducer.ts
+++ b/webclient/src/store/game/game.reducer.ts
@@ -1,31 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Data, Enriched } from '@app/types';
 import { create, isFieldSet } from '@bufbuild/protobuf';
-import { mergeSetFields } from '../common';
 import { GamesState } from './game.interfaces';
-import {
-  diffPlayerProperties,
-  formatActivePhaseSet,
-  formatActivePlayerSet,
-  formatArrowCreated,
-  formatCardAttached,
-  formatCardAttrChanged,
-  formatCardCounterChanged,
-  formatCardDestroyed,
-  formatCardFlipped,
-  formatCardMoved,
-  formatCardsDrawn,
-  formatCounterSet,
-  formatDieRolled,
-  formatGameStart,
-  formatPlayerJoined,
-  formatPropertyDiff,
-  formatTokenCreated,
-  formatTurnReversed,
-  formatZoneDumped,
-  formatZonePropertiesChanged,
-  formatZoneShuffled,
-} from './messageLog';
 
 export const MAX_GAME_MESSAGES = 1000;
 
@@ -44,31 +20,6 @@ function formatLeaveMessage(playerName: string, reason: number): string {
   return `${playerName} has left the game (${reasonText}).`;
 }
 
-/** Timestamp source for event-log entries. Isolated so tests can mock it. */
-function eventTimestamp(): number {
-  return Date.now();
-}
-
-/** Push a formatted event-log message onto the game's message list, truncating to MAX_GAME_MESSAGES. */
-function pushEventMessage(
-  game: Enriched.GameEntry,
-  playerId: number,
-  message: string | null | undefined,
-): void {
-  if (!message) {
-    return;
-  }
-  if (game.messages.length >= MAX_GAME_MESSAGES) {
-    game.messages = game.messages.slice(game.messages.length - MAX_GAME_MESSAGES + 1);
-  }
-  game.messages.push({
-    playerId,
-    message,
-    timeReceived: eventTimestamp(),
-    kind: 'event',
-  });
-}
-
 /** Converts the proto ServerInfo_Player[] array into the keyed PlayerEntry map. */
 function normalizePlayers(playerList: Data.ServerInfo_Player[]): { [playerId: number]: Enriched.PlayerEntry } {
   const players: { [playerId: number]: Enriched.PlayerEntry } = {};
@@ -84,7 +35,7 @@ function normalizePlayers(playerList: Data.ServerInfo_Player[]): { [playerId: nu
         byId[card.id] = card;
       }
       zones[zone.name] = {
-        name: zone.name as Enriched.ZoneNameValue,
+        name: zone.name,
         type: zone.type,
         withCoords: zone.withCoords,
         cardCount: zone.cardCount,
@@ -193,7 +144,6 @@ export const gamesSlice = createSlice({
       if (data.playerList?.length > 0) {
         game.players = normalizePlayers(data.playerList);
       }
-      const wasStarted = game.started;
       if (isFieldSet(data, Data.Event_GameStateChangedSchema.field.gameStarted)) {
         game.started = data.gameStarted;
       }
@@ -206,9 +156,6 @@ export const gamesSlice = createSlice({
       if (isFieldSet(data, Data.Event_GameStateChangedSchema.field.secondsElapsed)) {
         game.secondsElapsed = data.secondsElapsed;
       }
-      if (!wasStarted && game.started) {
-        pushEventMessage(game, 0, formatGameStart());
-      }
     },
 
     playerJoined: (state, action: PayloadAction<{ gameId: number; playerProperties: Data.ServerInfo_PlayerProperties }>) => {
@@ -224,7 +171,6 @@ export const gamesSlice = createSlice({
         counters: {},
         arrows: {},
       };
-      pushEventMessage(game, playerProperties.playerId, formatPlayerJoined(game, playerProperties.playerId));
     },
 
     playerLeft: (
@@ -246,7 +192,6 @@ export const gamesSlice = createSlice({
         playerId,
         message: formatLeaveMessage(playerName, reason),
         timeReceived,
-        kind: 'event',
       });
 
       delete game.players[playerId];
@@ -257,16 +202,9 @@ export const gamesSlice = createSlice({
       action: PayloadAction<{ gameId: number; playerId: number; properties: Data.ServerInfo_PlayerProperties }>,
     ) => {
       const { gameId, playerId, properties } = action.payload;
-      const game = state.games[gameId];
-      const player = game?.players[playerId];
-      if (!game || !player) {
-        return;
-      }
-      const previous = { ...player.properties };
-      mergeSetFields(Data.ServerInfo_PlayerPropertiesSchema, player.properties, properties);
-      const diff = diffPlayerProperties(previous, player.properties);
-      for (const msg of formatPropertyDiff(game, playerId, diff)) {
-        pushEventMessage(game, playerId, msg);
+      const player = state.games[gameId]?.players[playerId];
+      if (player) {
+        player.properties = properties;
       }
     },
 
@@ -335,25 +273,15 @@ export const gamesSlice = createSlice({
       targetZoneEntry.order.push(movedCard.id);
       targetZoneEntry.byId[movedCard.id] = movedCard;
       targetZoneEntry.cardCount++;
-
-      pushEventMessage(
-        game,
-        action.payload.playerId,
-        formatCardMoved(game, action.payload.playerId, data, {
-          resolvedCardName: removedCard?.name ?? '',
-        }),
-      );
     },
 
     cardFlipped: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_FlipCard }>) => {
       const { gameId, playerId, data } = action.payload;
       const { zoneName, cardId, cardName, faceDown, cardProviderId } = data;
-      const game = state.games[gameId];
-      const card = game?.players[playerId]?.zones[zoneName]?.byId[cardId];
-      if (!game || !card) {
+      const card = state.games[gameId]?.players[playerId]?.zones[zoneName]?.byId[cardId];
+      if (!card) {
         return;
       }
-      const previousName = card.name;
       card.faceDown = faceDown;
       if (cardName) {
         card.name = cardName;
@@ -361,48 +289,40 @@ export const gamesSlice = createSlice({
       if (cardProviderId) {
         card.providerId = cardProviderId;
       }
-      pushEventMessage(game, playerId, formatCardFlipped(game, playerId, data, previousName));
     },
 
     cardDestroyed: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_DestroyCard }>) => {
       const { gameId, playerId, data } = action.payload;
       const { zoneName, cardId } = data;
-      const game = state.games[gameId];
-      const zone = game?.players[playerId]?.zones[zoneName];
-      if (!game || !zone) {
+      const zone = state.games[gameId]?.players[playerId]?.zones[zoneName];
+      if (!zone) {
         return;
       }
-      const destroyedName = zone.byId[cardId]?.name;
       const idx = zone.order.indexOf(cardId);
       if (idx >= 0) {
         zone.order.splice(idx, 1);
       }
       delete zone.byId[cardId];
       zone.cardCount = Math.max(0, zone.cardCount - 1);
-      pushEventMessage(game, playerId, formatCardDestroyed(game, playerId, destroyedName));
     },
 
     cardAttached: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_AttachCard }>) => {
       const { gameId, playerId, data } = action.payload;
       const { startZone, cardId, targetPlayerId, targetZone, targetCardId } = data;
-      const game = state.games[gameId];
-      const card = game?.players[playerId]?.zones[startZone]?.byId[cardId];
-      if (!game || !card) {
+      const card = state.games[gameId]?.players[playerId]?.zones[startZone]?.byId[cardId];
+      if (!card) {
         return;
       }
-      const sourceCardName = card.name;
       card.attachPlayerId = targetPlayerId;
       card.attachZone = targetZone;
       card.attachCardId = targetCardId;
-      pushEventMessage(game, playerId, formatCardAttached(game, playerId, data, sourceCardName));
     },
 
     tokenCreated: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_CreateToken }>) => {
       const { gameId, playerId, data } = action.payload;
       const { zoneName, cardId, cardName, color, pt, annotation, destroyOnZoneChange, x, y, cardProviderId, faceDown } = data;
-      const game = state.games[gameId];
-      const zone = game?.players[playerId]?.zones[zoneName];
-      if (!game || !zone) {
+      const zone = state.games[gameId]?.players[playerId]?.zones[zoneName];
+      if (!zone) {
         return;
       }
       const newCard = create(Data.ServerInfo_CardSchema, {
@@ -414,18 +334,15 @@ export const gamesSlice = createSlice({
       zone.order.push(newCard.id);
       zone.byId[newCard.id] = newCard;
       zone.cardCount++;
-      pushEventMessage(game, playerId, formatTokenCreated(game, playerId, data));
     },
 
     cardAttrChanged: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_SetCardAttr }>) => {
       const { gameId, playerId, data } = action.payload;
       const { zoneName, cardId, attribute, attrValue } = data;
-      const game = state.games[gameId];
-      const card = game?.players[playerId]?.zones[zoneName]?.byId[cardId];
-      if (!game || !card) {
+      const card = state.games[gameId]?.players[playerId]?.zones[zoneName]?.byId[cardId];
+      if (!card) {
         return;
       }
-      const cardName = card.name;
       switch (attribute as Data.CardAttribute) {
         case Data.CardAttribute.AttrTapped: card.tapped = attrValue === '1'; break;
         case Data.CardAttribute.AttrAttacking: card.attacking = attrValue === '1'; break;
@@ -435,19 +352,15 @@ export const gamesSlice = createSlice({
         case Data.CardAttribute.AttrAnnotation: card.annotation = attrValue; break;
         case Data.CardAttribute.AttrDoesntUntap: card.doesntUntap = attrValue === '1'; break;
       }
-      pushEventMessage(game, playerId, formatCardAttrChanged(game, playerId, data, cardName));
     },
 
     cardCounterChanged: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_SetCardCounter }>) => {
       const { gameId, playerId, data } = action.payload;
       const { zoneName, cardId, counterId, counterValue } = data;
-      const game = state.games[gameId];
-      const card = game?.players[playerId]?.zones[zoneName]?.byId[cardId];
-      if (!game || !card) {
+      const card = state.games[gameId]?.players[playerId]?.zones[zoneName]?.byId[cardId];
+      if (!card) {
         return;
       }
-      const cardName = card.name;
-      const previousValue = card.counterList.find(c => c.id === counterId)?.value ?? 0;
       if (counterValue <= 0) {
         card.counterList = card.counterList.filter(c => c.id !== counterId);
       } else {
@@ -458,23 +371,15 @@ export const gamesSlice = createSlice({
           card.counterList.push(create(Data.ServerInfo_CardCounterSchema, { id: counterId, value: counterValue }));
         }
       }
-      pushEventMessage(
-        game,
-        playerId,
-        formatCardCounterChanged(game, playerId, data, cardName, previousValue),
-      );
     },
 
 
     arrowCreated: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_CreateArrow }>) => {
       const { gameId, playerId, data } = action.payload;
-      const game = state.games[gameId];
-      const player = game?.players[playerId];
-      if (!game || !player || !data.arrowInfo) {
-        return;
+      const player = state.games[gameId]?.players[playerId];
+      if (player && data.arrowInfo) {
+        player.arrows[data.arrowInfo.id] = { ...data.arrowInfo };
       }
-      player.arrows[data.arrowInfo.id] = { ...data.arrowInfo };
-      pushEventMessage(game, playerId, formatArrowCreated(game, playerId, data.arrowInfo));
     },
 
     arrowDeleted: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_DeleteArrow }>) => {
@@ -496,18 +401,10 @@ export const gamesSlice = createSlice({
 
     counterSet: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_SetCounter }>) => {
       const { gameId, playerId, data } = action.payload;
-      const game = state.games[gameId];
-      const counter = game?.players[playerId]?.counters[data.counterId];
-      if (!game || !counter) {
-        return;
+      const counter = state.games[gameId]?.players[playerId]?.counters[data.counterId];
+      if (counter) {
+        counter.count = data.value;
       }
-      const previousValue = counter.count;
-      counter.count = data.value;
-      pushEventMessage(
-        game,
-        playerId,
-        formatCounterSet(game, playerId, data, counter.name, previousValue),
-      );
     },
 
     counterDeleted: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_DelCounter }>) => {
@@ -522,9 +419,8 @@ export const gamesSlice = createSlice({
     cardsDrawn: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_DrawCards }>) => {
       const { gameId, playerId, data } = action.payload;
       const { number: drawCount, cards } = data;
-      const game = state.games[gameId];
-      const player = game?.players[playerId];
-      if (!game || !player) {
+      const player = state.games[gameId]?.players[playerId];
+      if (!player) {
         return;
       }
 
@@ -543,8 +439,6 @@ export const gamesSlice = createSlice({
         handZone.byId[card.id] = card;
       }
       handZone.cardCount += drawCount;
-
-      pushEventMessage(game, playerId, formatCardsDrawn(game, playerId, drawCount));
     },
 
     cardsRevealed: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_RevealCards }>) => {
@@ -565,9 +459,8 @@ export const gamesSlice = createSlice({
 
     zonePropertiesChanged: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_ChangeZoneProperties }>) => {
       const { gameId, playerId, data } = action.payload;
-      const game = state.games[gameId];
-      const zone = game?.players[playerId]?.zones[data.zoneName];
-      if (!game || !zone) {
+      const zone = state.games[gameId]?.players[playerId]?.zones[data.zoneName];
+      if (!zone) {
         return;
       }
       if (isFieldSet(data, Data.Event_ChangeZonePropertiesSchema.field.alwaysRevealTopCard)) {
@@ -576,41 +469,28 @@ export const gamesSlice = createSlice({
       if (isFieldSet(data, Data.Event_ChangeZonePropertiesSchema.field.alwaysLookAtTopCard)) {
         zone.alwaysLookAtTopCard = data.alwaysLookAtTopCard;
       }
-      pushEventMessage(game, playerId, formatZonePropertiesChanged(game, playerId, data));
     },
 
 
     activePlayerSet: (state, action: PayloadAction<{ gameId: number; activePlayerId: number }>) => {
       const game = state.games[action.payload.gameId];
-      if (!game) {
-        return;
-      }
-      const previous = game.activePlayerId;
-      game.activePlayerId = action.payload.activePlayerId;
-      if (previous !== action.payload.activePlayerId) {
-        pushEventMessage(game, action.payload.activePlayerId, formatActivePlayerSet(game, action.payload.activePlayerId));
+      if (game) {
+        game.activePlayerId = action.payload.activePlayerId;
       }
     },
 
     activePhaseSet: (state, action: PayloadAction<{ gameId: number; phase: number }>) => {
       const game = state.games[action.payload.gameId];
-      if (!game) {
-        return;
-      }
-      const previous = game.activePhase;
-      game.activePhase = action.payload.phase;
-      if (previous !== action.payload.phase && game.started) {
-        pushEventMessage(game, 0, formatActivePhaseSet(action.payload.phase));
+      if (game) {
+        game.activePhase = action.payload.phase;
       }
     },
 
     turnReversed: (state, action: PayloadAction<{ gameId: number; reversed: boolean }>) => {
       const game = state.games[action.payload.gameId];
-      if (!game) {
-        return;
+      if (game) {
+        game.reversed = action.payload.reversed;
       }
-      game.reversed = action.payload.reversed;
-      pushEventMessage(game, game.activePlayerId, formatTurnReversed(game, game.activePlayerId, action.payload.reversed));
     },
 
 
@@ -623,34 +503,15 @@ export const gamesSlice = createSlice({
       if (game.messages.length >= MAX_GAME_MESSAGES) {
         game.messages = game.messages.slice(game.messages.length - MAX_GAME_MESSAGES + 1);
       }
-      game.messages.push({ playerId, message, timeReceived, kind: 'chat' });
+      game.messages.push({ playerId, message, timeReceived });
     },
 
-    // Logged-only actions: no state mutation but an event-log entry.
-    zoneShuffled: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_Shuffle }>) => {
-      const { gameId, playerId } = action.payload;
-      const game = state.games[gameId];
-      if (!game) {
-        return;
-      }
-      pushEventMessage(game, playerId, formatZoneShuffled(game, playerId));
-    },
-    zoneDumped: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_DumpZone }>) => {
-      const { gameId, playerId, data } = action.payload;
-      const game = state.games[gameId];
-      if (!game) {
-        return;
-      }
-      pushEventMessage(game, playerId, formatZoneDumped(game, playerId, data));
-    },
-    dieRolled: (state, action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_RollDie }>) => {
-      const { gameId, playerId, data } = action.payload;
-      const game = state.games[gameId];
-      if (!game) {
-        return;
-      }
-      pushEventMessage(game, playerId, formatDieRolled(game, playerId, data));
-    },
+    // Intentional no-op: action-type placeholders so UI/middleware can
+    // subscribe to notifications without mutating store state. Removing
+    // them would silently drop the dispatch path; keep the empty bodies.
+    zoneShuffled: (_state, _action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_Shuffle }>) => {},
+    zoneDumped: (_state, _action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_DumpZone }>) => {},
+    dieRolled: (_state, _action: PayloadAction<{ gameId: number; playerId: number; data: Data.Event_RollDie }>) => {},
   },
 });
 
diff --git a/webclient/src/store/game/messageLog.spec.ts b/webclient/src/store/game/messageLog.spec.ts
deleted file mode 100644
index 6d0f7a6e8..000000000
--- a/webclient/src/store/game/messageLog.spec.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-import { create } from '@bufbuild/protobuf';
-import { Data } from '@app/types';
-
-import {
-  diffPlayerProperties,
-  formatActivePhaseSet,
-  formatActivePlayerSet,
-  formatArrowCreated,
-  formatCardAttached,
-  formatCardAttrChanged,
-  formatCardCounterChanged,
-  formatCardDestroyed,
-  formatCardFlipped,
-  formatCardMoved,
-  formatCardsDrawn,
-  formatCounterSet,
-  formatDieRolled,
-  formatPlayerJoined,
-  formatPropertyDiff,
-  formatTokenCreated,
-  formatTurnReversed,
-  formatZoneDumped,
-  formatZonePropertiesChanged,
-  formatZoneShuffled,
-} from './messageLog';
-import {
-  makeArrow,
-  makeCard,
-  makeGameEntry,
-  makePlayerEntry,
-  makePlayerProperties,
-  makeZoneEntry,
-} from './__mocks__/fixtures';
-
-function gameWithTwoPlayers() {
-  return makeGameEntry({
-    localPlayerId: 1,
-    activePlayerId: 1,
-    players: {
-      1: makePlayerEntry({
-        properties: makePlayerProperties({ playerId: 1, userInfo: { name: 'Alice' } }),
-        zones: {
-          hand: makeZoneEntry({ name: 'hand' }),
-          table: makeZoneEntry({ name: 'table', cards: [makeCard({ id: 10, name: 'Bolt' })], cardCount: 1 }),
-        },
-      }),
-      2: makePlayerEntry({
-        properties: makePlayerProperties({ playerId: 2, userInfo: { name: 'Bob' } }),
-        zones: {
-          hand: makeZoneEntry({ name: 'hand' }),
-          table: makeZoneEntry({ name: 'table', cards: [makeCard({ id: 20, name: 'Bear' })], cardCount: 1 }),
-        },
-      }),
-    },
-  });
-}
-
-describe('formatCardMoved', () => {
-  const game = gameWithTwoPlayers();
-
-  it('logs hand → battlefield as "plays"', () => {
-    const msg = formatCardMoved(game, 1, {
-      cardId: 5, cardName: 'Bolt',
-      startPlayerId: 1, startZone: 'hand',
-      targetPlayerId: 1, targetZone: 'table',
-      position: -1, x: 0, y: 0, newCardId: -1, faceDown: false, newCardProviderId: '',
-    }, { resolvedCardName: 'Bolt' });
-    expect(msg).toBe('Alice plays Bolt.');
-  });
-
-  it('logs library → hand as "puts into their hand"', () => {
-    const msg = formatCardMoved(game, 1, {
-      cardId: 5, cardName: 'Mystery',
-      startPlayerId: 1, startZone: 'deck',
-      targetPlayerId: 1, targetZone: 'hand',
-      position: 0, x: 0, y: 0, newCardId: -1, faceDown: false, newCardProviderId: '',
-    }, { resolvedCardName: '' });
-    expect(msg).toBe('Alice puts Mystery into their hand.');
-  });
-
-  it('returns null for same-owner table-to-table reorder', () => {
-    const msg = formatCardMoved(game, 1, {
-      cardId: 5, cardName: 'Bolt',
-      startPlayerId: 1, startZone: 'table',
-      targetPlayerId: 1, targetZone: 'table',
-      position: -1, x: 0, y: 0, newCardId: -1, faceDown: false, newCardProviderId: '',
-    }, { resolvedCardName: 'Bolt' });
-    expect(msg).toBeNull();
-  });
-
-  it('logs cross-owner control transfer', () => {
-    const msg = formatCardMoved(game, 1, {
-      cardId: 5, cardName: 'Bolt',
-      startPlayerId: 1, startZone: 'table',
-      targetPlayerId: 2, targetZone: 'table',
-      position: -1, x: 0, y: 0, newCardId: -1, faceDown: false, newCardProviderId: '',
-    }, { resolvedCardName: 'Bolt' });
-    expect(msg).toBe('Alice gives Bob control over Bolt.');
-  });
-
-  it('returns null for hand-to-hand (sideboard reorder)', () => {
-    const msg = formatCardMoved(game, 1, {
-      cardId: 5, cardName: 'Bolt',
-      startPlayerId: 1, startZone: 'hand',
-      targetPlayerId: 1, targetZone: 'hand',
-      position: -1, x: 0, y: 0, newCardId: -1, faceDown: false, newCardProviderId: '',
-    }, { resolvedCardName: 'Bolt' });
-    expect(msg).toBeNull();
-  });
-});
-
-describe('formatCardFlipped', () => {
-  const game = gameWithTwoPlayers();
-  it('logs face-up with revealed name', () => {
-    const msg = formatCardFlipped(game, 1, {
-      zoneName: 'hand', cardId: 5, cardName: 'Bolt', faceDown: false, cardProviderId: '',
-    }, '');
-    expect(msg).toBe('Alice flips Bolt face-up.');
-  });
-  it('logs face-down with prior name', () => {
-    const msg = formatCardFlipped(game, 1, {
-      zoneName: 'hand', cardId: 5, cardName: '', faceDown: true, cardProviderId: '',
-    }, 'Bolt');
-    expect(msg).toBe('Alice flips Bolt face-down.');
-  });
-});
-
-describe('formatCardDestroyed', () => {
-  it('logs destruction with card name', () => {
-    const game = gameWithTwoPlayers();
-    expect(formatCardDestroyed(game, 1, 'Bolt')).toBe('Alice destroys Bolt.');
-  });
-  it('falls back to "a card" when name unknown', () => {
-    const game = gameWithTwoPlayers();
-    expect(formatCardDestroyed(game, 1, '')).toBe('Alice destroys a card.');
-  });
-});
-
-describe('formatCardAttached', () => {
-  const game = gameWithTwoPlayers();
-  it('logs attach to opponent card', () => {
-    const msg = formatCardAttached(game, 1, {
-      startZone: 'table', cardId: 10,
-      targetPlayerId: 2, targetZone: 'table', targetCardId: 20,
-    }, 'Bolt');
-    expect(msg).toBe('Alice attaches Bolt to Bob\'s Bear.');
-  });
-  it('logs unattach when target cleared', () => {
-    const msg = formatCardAttached(game, 1, {
-      startZone: 'table', cardId: 10,
-      targetPlayerId: -1, targetZone: '', targetCardId: -1,
-    }, 'Bolt');
-    expect(msg).toBe('Alice unattaches Bolt.');
-  });
-});
-
-describe('formatTokenCreated', () => {
-  const game = gameWithTwoPlayers();
-  it('logs token with name and PT', () => {
-    const msg = formatTokenCreated(game, 1, {
-      zoneName: 'table', cardId: 99, cardName: 'Goblin',
-      color: 'r', pt: '1/1', annotation: '',
-      destroyOnZoneChange: true, x: 0, y: 0, cardProviderId: '', faceDown: false,
-    });
-    expect(msg).toBe('Alice creates token: Goblin (1/1).');
-  });
-  it('logs face-down token distinctly', () => {
-    const msg = formatTokenCreated(game, 1, {
-      zoneName: 'table', cardId: 99, cardName: '',
-      color: '', pt: '', annotation: '',
-      destroyOnZoneChange: true, x: 0, y: 0, cardProviderId: '', faceDown: true,
-    });
-    expect(msg).toBe('Alice creates a face-down token.');
-  });
-});
-
-describe('formatCardAttrChanged', () => {
-  const game = gameWithTwoPlayers();
-  it.each([
-    [Data.CardAttribute.AttrTapped, '1', 'Alice taps Bolt.'],
-    [Data.CardAttribute.AttrTapped, '0', 'Alice untaps Bolt.'],
-    [Data.CardAttribute.AttrPT, '2/3', 'Alice sets PT of Bolt to 2/3.'],
-    [Data.CardAttribute.AttrAnnotation, 'note', 'Alice sets annotation of Bolt to "note".'],
-    [Data.CardAttribute.AttrDoesntUntap, '1', 'Alice sets Bolt to not untap normally.'],
-  ])('attr=%i, val=%s → %s', (attribute, attrValue, expected) => {
-    const msg = formatCardAttrChanged(game, 1, {
-      zoneName: 'table', cardId: 10, attribute, attrValue,
-    }, 'Bolt');
-    expect(msg).toBe(expected);
-  });
-
-  it('returns null for AttrFaceDown (flip path owns that message)', () => {
-    const msg = formatCardAttrChanged(game, 1, {
-      zoneName: 'table', cardId: 10, attribute: Data.CardAttribute.AttrFaceDown, attrValue: '1',
-    }, 'Bolt');
-    expect(msg).toBeNull();
-  });
-});
-
-describe('formatCardCounterChanged', () => {
-  const game = gameWithTwoPlayers();
-  it('logs added counters with delta', () => {
-    const msg = formatCardCounterChanged(game, 1, {
-      zoneName: 'table', cardId: 10, counterId: 1, counterValue: 3,
-    }, 'Bolt', 1);
-    expect(msg).toBe('Alice puts 2 counter(s) on Bolt (total 3).');
-  });
-
-  it('logs removed counters with delta', () => {
-    const msg = formatCardCounterChanged(game, 1, {
-      zoneName: 'table', cardId: 10, counterId: 1, counterValue: 0,
-    }, 'Bolt', 3);
-    expect(msg).toBe('Alice removes 3 counter(s) from Bolt (total 0).');
-  });
-});
-
-describe('formatCounterSet', () => {
-  const game = gameWithTwoPlayers();
-  it('logs increase', () => {
-    expect(formatCounterSet(game, 1, { counterId: 1, value: 22 }, 'Life', 20)).toBe('Alice increases their Life to 22.');
-  });
-  it('logs decrease', () => {
-    expect(formatCounterSet(game, 1, { counterId: 1, value: 18 }, 'Life', 20)).toBe('Alice decreases their Life to 18.');
-  });
-});
-
-describe('formatCardsDrawn', () => {
-  const game = gameWithTwoPlayers();
-  it('singularizes at 1', () => {
-    expect(formatCardsDrawn(game, 1, 1)).toBe('Alice draws a card.');
-  });
-  it('pluralizes at 2+', () => {
-    expect(formatCardsDrawn(game, 1, 7)).toBe('Alice draws 7 cards.');
-  });
-});
-
-describe('formatZoneShuffled / formatZoneDumped / formatZonePropertiesChanged', () => {
-  const game = gameWithTwoPlayers();
-  it('shuffle', () => {
-    expect(formatZoneShuffled(game, 1)).toBe('Alice shuffles their library.');
-  });
-  it('dumpZone by owner', () => {
-    const msg = formatZoneDumped(game, 1, {
-      zoneOwnerId: 1, zoneName: 'deck', numberCards: 4, isReversed: false,
-    });
-    expect(msg).toBe('Alice looks at 4 card(s) from the top of their library.');
-  });
-  it('zone alwaysRevealTopCard', () => {
-    expect(formatZonePropertiesChanged(game, 1, create(Data.Event_ChangeZonePropertiesSchema, {
-      zoneName: 'deck', alwaysRevealTopCard: true, alwaysLookAtTopCard: false,
-    }))).toBe('Alice is now revealing the top card of their library.');
-  });
-});
-
-describe('formatActivePhaseSet / formatActivePlayerSet / formatTurnReversed', () => {
-  const game = gameWithTwoPlayers();
-  it('phase label matches desktop order', () => {
-    expect(formatActivePhaseSet(0)).toBe('It is now the untap step.');
-    expect(formatActivePhaseSet(3)).toBe('It is now the first main phase.');
-    expect(formatActivePhaseSet(10)).toBe('It is now the end step.');
-  });
-  it('active player', () => {
-    expect(formatActivePlayerSet(game, 2)).toBe('It is now Bob\'s turn.');
-  });
-  it('turn reversed / restored', () => {
-    expect(formatTurnReversed(game, 1, true)).toBe('Alice reverses the turn order.');
-    expect(formatTurnReversed(game, 1, false)).toBe('Alice restores the turn order.');
-  });
-});
-
-describe('formatDieRolled', () => {
-  const game = gameWithTwoPlayers();
-  it('single-roll', () => {
-    expect(formatDieRolled(game, 1, { sides: 20, value: 17, values: [17] })).toBe('Alice rolls a 17 on a 20-sided die.');
-  });
-  it('multi-roll', () => {
-    expect(formatDieRolled(game, 1, { sides: 6, value: 0, values: [3, 4, 5] })).toBe('Alice rolls 3, 4, 5 on 3 6-sided dice.');
-  });
-  it('no-rolls falls back to bare sides', () => {
-    expect(formatDieRolled(game, 1, { sides: 20, value: 0, values: [] })).toBe('Alice rolls a 20-sided die.');
-  });
-});
-
-describe('formatArrowCreated', () => {
-  const game = gameWithTwoPlayers();
-  it('card → card arrow', () => {
-    const arrow = makeArrow({
-      id: 1, startPlayerId: 1, startZone: 'table', startCardId: 10,
-      targetPlayerId: 2, targetZone: 'table', targetCardId: 20,
-    });
-    expect(formatArrowCreated(game, 1, arrow)).toBe('Alice points from Bolt to Bear.');
-  });
-  it('card → player arrow', () => {
-    const arrow = makeArrow({
-      id: 1, startPlayerId: 1, startZone: 'table', startCardId: 10,
-      targetPlayerId: 2, targetZone: '', targetCardId: -1,
-    });
-    expect(formatArrowCreated(game, 1, arrow)).toBe('Alice points from Bolt to Bob.');
-  });
-});
-
-describe('formatPlayerJoined', () => {
-  it('logs join', () => {
-    const game = gameWithTwoPlayers();
-    expect(formatPlayerJoined(game, 2)).toBe('Bob has joined the game.');
-  });
-});
-
-describe('diffPlayerProperties / formatPropertyDiff', () => {
-  const game = gameWithTwoPlayers();
-  it('detects concede + ready flips', () => {
-    const previous = makePlayerProperties({ playerId: 1, conceded: false, readyStart: false });
-    const next = makePlayerProperties({ playerId: 1, conceded: true, readyStart: true });
-    const diff = diffPlayerProperties(previous, next);
-    expect(diff.conceded).toBe(true);
-    expect(diff.ready).toBe(true);
-    const msgs = formatPropertyDiff(game, 1, diff);
-    expect(msgs).toContain('Alice has conceded the game.');
-    expect(msgs).toContain('Alice is ready to start the game.');
-  });
-
-  it('detects sideboardLocked / unlocked and deckLoaded', () => {
-    const previous = makePlayerProperties({ playerId: 1, sideboardLocked: true, deckHash: 'aaa' });
-    const next = makePlayerProperties({ playerId: 1, sideboardLocked: false, deckHash: 'bbb' });
-    const diff = diffPlayerProperties(previous, next);
-    expect(diff.sideboardUnlocked).toBe(true);
-    expect(diff.deckLoaded?.hash).toBe('bbb');
-    const msgs = formatPropertyDiff(game, 1, diff);
-    expect(msgs).toContain('Alice has unlocked their sideboard.');
-    expect(msgs).toContain('Alice has loaded a deck (bbb).');
-  });
-
-  it('no diff → no messages', () => {
-    const p = makePlayerProperties({ playerId: 1 });
-    expect(formatPropertyDiff(game, 1, diffPlayerProperties(p, p))).toHaveLength(0);
-  });
-});
diff --git a/webclient/src/store/game/messageLog.ts b/webclient/src/store/game/messageLog.ts
deleted file mode 100644
index 2d8247d85..000000000
--- a/webclient/src/store/game/messageLog.ts
+++ /dev/null
@@ -1,407 +0,0 @@
-import type { Enriched } from '@app/types';
-import { App, Data } from '@app/types';
-
-// Mirrors desktop cockatrice/src/game/log/message_log_widget.cpp — each
-// format* function here corresponds to a log* slot on MessageLogWidget.
-// Functions take a GameEntry (for player-name lookup) plus event data and
-// return a formatted English string, or null when desktop does not log that
-// case (e.g. same-zone table reorders).
-
-export const EVENT_PLAYER_ID_SYSTEM = 0;
-
-function nameOf(game: Enriched.GameEntry, playerId: number): string {
-  if (playerId <= 0) {
-    return 'The server';
-  }
-  return game.players[playerId]?.properties.userInfo?.name ?? `Player ${playerId}`;
-}
-
-function zoneLabel(zoneName: string): string {
-  switch (zoneName) {
-    case App.ZoneName.TABLE: return 'the battlefield';
-    case App.ZoneName.HAND: return 'their hand';
-    case App.ZoneName.GRAVE: return 'their graveyard';
-    case App.ZoneName.EXILE: return 'exile';
-    case App.ZoneName.DECK: return 'their library';
-    case App.ZoneName.SIDEBOARD: return 'their sideboard';
-    case App.ZoneName.STACK: return 'the stack';
-    default: return `custom zone '${zoneName}'`;
-  }
-}
-
-const PHASE_NAMES: Record<number, string> = {
-  [App.Phase.Untap]: 'untap step',
-  [App.Phase.Upkeep]: 'upkeep step',
-  [App.Phase.Draw]: 'draw step',
-  [App.Phase.FirstMain]: 'first main phase',
-  [App.Phase.BeginCombat]: 'beginning of combat',
-  [App.Phase.DeclareAttackers]: 'declare attackers step',
-  [App.Phase.DeclareBlockers]: 'declare blockers step',
-  [App.Phase.CombatDamage]: 'combat damage step',
-  [App.Phase.EndCombat]: 'end of combat',
-  [App.Phase.SecondMain]: 'second main phase',
-  [App.Phase.EndCleanup]: 'end step',
-};
-
-function phaseName(phase: number): string {
-  return PHASE_NAMES[phase] ?? `phase ${phase}`;
-}
-
-function cardDescriptor(cardName: string | undefined): string {
-  if (!cardName) {
-    return 'a card';
-  }
-  return cardName;
-}
-
-/** Desktop skips the log for same-zone moves that are pure reorders (table/hand/exile). */
-function isSameZoneReorder(startZone: string, targetZone: string, sameOwner: boolean): boolean {
-  if (!sameOwner && (startZone === App.ZoneName.TABLE && targetZone === App.ZoneName.TABLE)) {
-    return false;
-  }
-  return (
-    (sameOwner && startZone === App.ZoneName.TABLE && targetZone === App.ZoneName.TABLE) ||
-    (startZone === App.ZoneName.HAND && targetZone === App.ZoneName.HAND) ||
-    (startZone === App.ZoneName.EXILE && targetZone === App.ZoneName.EXILE)
-  );
-}
-
-export interface CardMovedContext {
-  /** Resolved card name from the source zone snapshot (empty for hidden moves). */
-  resolvedCardName: string;
-}
-
-export function formatCardMoved(
-  game: Enriched.GameEntry,
-  actingPlayerId: number,
-  data: Data.Event_MoveCard,
-  ctx: CardMovedContext,
-): string | null {
-  const sameOwner = data.startPlayerId === data.targetPlayerId;
-  if (isSameZoneReorder(data.startZone, data.targetZone, sameOwner)) {
-    return null;
-  }
-
-  const actor = nameOf(game, actingPlayerId);
-  const card = cardDescriptor(data.cardName || ctx.resolvedCardName);
-
-  // Cross-owner control change
-  if (!sameOwner && data.startPlayerId === actingPlayerId) {
-    return `${actor} gives ${nameOf(game, data.targetPlayerId)} control over ${card}.`;
-  }
-
-  // Play from hand to table
-  if (data.startZone === App.ZoneName.HAND && data.targetZone === App.ZoneName.TABLE) {
-    return `${actor} plays ${card}.`;
-  }
-
-  // Draw-like: anywhere to hand
-  if (data.targetZone === App.ZoneName.HAND && data.startZone !== App.ZoneName.HAND) {
-    return `${actor} puts ${card} into ${sameOwner ? 'their hand' : `${nameOf(game, data.targetPlayerId)}'s hand`}.`;
-  }
-
-  // Generic: to target zone
-  const target = sameOwner
-    ? zoneLabel(data.targetZone)
-    : `${nameOf(game, data.targetPlayerId)}'s ${zoneLabel(data.targetZone).replace('their ', '')}`;
-  return `${actor} moves ${card} to ${target}.`;
-}
-
-export function formatCardFlipped(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_FlipCard,
-  previousName: string | undefined,
-): string {
-  const actor = nameOf(game, playerId);
-  const name = cardDescriptor(data.cardName || previousName);
-  return data.faceDown
-    ? `${actor} flips ${name} face-down.`
-    : `${actor} flips ${name} face-up.`;
-}
-
-export function formatCardDestroyed(
-  game: Enriched.GameEntry,
-  playerId: number,
-  cardName: string | undefined,
-): string {
-  return `${nameOf(game, playerId)} destroys ${cardDescriptor(cardName)}.`;
-}
-
-export function formatCardAttached(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_AttachCard,
-  sourceCardName: string | undefined,
-): string {
-  const actor = nameOf(game, playerId);
-  const source = cardDescriptor(sourceCardName);
-  // Unattach: proto2 unset target fields surface as -1 / '' in the webclient reducer path.
-  if (data.targetCardId < 0 || !data.targetZone) {
-    return `${actor} unattaches ${source}.`;
-  }
-  const targetPlayer = nameOf(game, data.targetPlayerId);
-  const targetCard = cardDescriptor(
-    game.players[data.targetPlayerId]?.zones[data.targetZone]?.byId[data.targetCardId]?.name,
-  );
-  return `${actor} attaches ${source} to ${targetPlayer}'s ${targetCard}.`;
-}
-
-export function formatTokenCreated(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_CreateToken,
-): string {
-  const actor = nameOf(game, playerId);
-  if (data.faceDown) {
-    return `${actor} creates a face-down token.`;
-  }
-  const pt = data.pt ? ` (${data.pt})` : '';
-  return `${actor} creates token: ${data.cardName}${pt}.`;
-}
-
-export function formatCardAttrChanged(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_SetCardAttr,
-  cardName: string | undefined,
-): string | null {
-  const actor = nameOf(game, playerId);
-  const card = cardDescriptor(cardName);
-  switch (data.attribute as Data.CardAttribute) {
-    case Data.CardAttribute.AttrTapped:
-      return data.attrValue === '1' ? `${actor} taps ${card}.` : `${actor} untaps ${card}.`;
-    case Data.CardAttribute.AttrAttacking:
-      return data.attrValue === '1' ? `${actor} declares ${card} as an attacker.` : null;
-    case Data.CardAttribute.AttrFaceDown:
-      return null;
-    case Data.CardAttribute.AttrColor:
-      return null;
-    case Data.CardAttribute.AttrPT:
-      return data.attrValue
-        ? `${actor} sets PT of ${card} to ${data.attrValue}.`
-        : `${actor} clears the PT of ${card}.`;
-    case Data.CardAttribute.AttrAnnotation:
-      return data.attrValue
-        ? `${actor} sets annotation of ${card} to "${data.attrValue}".`
-        : `${actor} clears the annotation on ${card}.`;
-    case Data.CardAttribute.AttrDoesntUntap:
-      return data.attrValue === '1'
-        ? `${actor} sets ${card} to not untap normally.`
-        : `${actor} sets ${card} to untap normally.`;
-    default:
-      return null;
-  }
-}
-
-export function formatCardCounterChanged(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_SetCardCounter,
-  cardName: string | undefined,
-  previousValue: number,
-): string {
-  const actor = nameOf(game, playerId);
-  const card = cardDescriptor(cardName);
-  const delta = data.counterValue - previousValue;
-  if (delta > 0) {
-    return `${actor} puts ${delta} counter(s) on ${card} (total ${data.counterValue}).`;
-  }
-  if (delta < 0) {
-    return `${actor} removes ${-delta} counter(s) from ${card} (total ${data.counterValue}).`;
-  }
-  return `${actor} sets counters on ${card} to ${data.counterValue}.`;
-}
-
-export function formatCounterSet(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_SetCounter,
-  counterName: string | undefined,
-  previousValue: number,
-): string {
-  const actor = nameOf(game, playerId);
-  const name = counterName ?? `counter ${data.counterId}`;
-  const delta = data.value - previousValue;
-  if (delta > 0) {
-    return `${actor} increases their ${name} to ${data.value}.`;
-  }
-  if (delta < 0) {
-    return `${actor} decreases their ${name} to ${data.value}.`;
-  }
-  return `${actor} sets their ${name} to ${data.value}.`;
-}
-
-export function formatCardsDrawn(
-  game: Enriched.GameEntry,
-  playerId: number,
-  number: number,
-): string {
-  const actor = nameOf(game, playerId);
-  return number === 1 ? `${actor} draws a card.` : `${actor} draws ${number} cards.`;
-}
-
-export function formatZoneShuffled(game: Enriched.GameEntry, playerId: number): string {
-  return `${nameOf(game, playerId)} shuffles their library.`;
-}
-
-export function formatZoneDumped(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_DumpZone,
-): string {
-  const actor = nameOf(game, playerId);
-  const count = data.numberCards;
-  if (data.zoneOwnerId !== playerId) {
-    const owner = nameOf(game, data.zoneOwnerId);
-    return `${actor} looks at ${count} card(s) from the top of ${owner}'s ${zoneLabel(data.zoneName).replace('their ', '')}.`;
-  }
-  return `${actor} looks at ${count} card(s) from the top of ${zoneLabel(data.zoneName)}.`;
-}
-
-export function formatZonePropertiesChanged(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_ChangeZoneProperties,
-): string | null {
-  const actor = nameOf(game, playerId);
-  const zone = zoneLabel(data.zoneName);
-  // Only one of the toggles changes per event in practice; report whichever is set.
-  // The caller decides whether to emit anything by comparing against the previous zone state.
-  if (data.alwaysRevealTopCard) {
-    return `${actor} is now revealing the top card of ${zone}.`;
-  }
-  if (data.alwaysLookAtTopCard) {
-    return `${actor} can now look at the top card of ${zone}.`;
-  }
-  return `${actor} stops revealing/looking at the top card of ${zone}.`;
-}
-
-export function formatActivePhaseSet(phase: number): string {
-  return `It is now the ${phaseName(phase)}.`;
-}
-
-export function formatActivePlayerSet(game: Enriched.GameEntry, activePlayerId: number): string {
-  return `It is now ${nameOf(game, activePlayerId)}'s turn.`;
-}
-
-export function formatTurnReversed(game: Enriched.GameEntry, playerId: number, reversed: boolean): string {
-  const actor = nameOf(game, playerId);
-  return reversed
-    ? `${actor} reverses the turn order.`
-    : `${actor} restores the turn order.`;
-}
-
-export function formatDieRolled(
-  game: Enriched.GameEntry,
-  playerId: number,
-  data: Data.Event_RollDie,
-): string {
-  const actor = nameOf(game, playerId);
-  const rolls = (data.values && data.values.length > 0) ? data.values : (data.value ? [data.value] : []);
-  if (rolls.length === 0) {
-    return `${actor} rolls a ${data.sides}-sided die.`;
-  }
-  if (rolls.length === 1) {
-    return `${actor} rolls a ${rolls[0]} on a ${data.sides}-sided die.`;
-  }
-  return `${actor} rolls ${rolls.join(', ')} on ${rolls.length} ${data.sides}-sided dice.`;
-}
-
-export function formatPlayerJoined(game: Enriched.GameEntry, playerId: number): string {
-  return `${nameOf(game, playerId)} has joined the game.`;
-}
-
-export function formatGameStart(): string {
-  return 'The game has started.';
-}
-
-export function formatArrowCreated(
-  game: Enriched.GameEntry,
-  playerId: number,
-  arrow: Data.ServerInfo_Arrow,
-): string {
-  const actor = nameOf(game, playerId);
-  const sourceCard = cardDescriptor(
-    game.players[arrow.startPlayerId]?.zones[arrow.startZone]?.byId[arrow.startCardId]?.name,
-  );
-  // Player target: targetCardId < 0 or targetZone unset.
-  const playerTarget = arrow.targetCardId < 0 || !arrow.targetZone;
-  if (playerTarget) {
-    return `${actor} points from ${sourceCard} to ${nameOf(game, arrow.targetPlayerId)}.`;
-  }
-  const targetCard = cardDescriptor(
-    game.players[arrow.targetPlayerId]?.zones[arrow.targetZone]?.byId[arrow.targetCardId]?.name,
-  );
-  return `${actor} points from ${sourceCard} to ${targetCard}.`;
-}
-
-interface PropertyDiff {
-  conceded?: boolean;
-  unconceded?: boolean;
-  ready?: boolean;
-  unready?: boolean;
-  sideboardLocked?: boolean;
-  sideboardUnlocked?: boolean;
-  deckLoaded?: { hash: string };
-}
-
-export function diffPlayerProperties(
-  previous: Data.ServerInfo_PlayerProperties,
-  next: Data.ServerInfo_PlayerProperties,
-): PropertyDiff {
-  const diff: PropertyDiff = {};
-  if (!previous.conceded && next.conceded) {
-    diff.conceded = true;
-  }
-  if (previous.conceded && !next.conceded) {
-    diff.unconceded = true;
-  }
-  if (!previous.readyStart && next.readyStart) {
-    diff.ready = true;
-  }
-  if (previous.readyStart && !next.readyStart) {
-    diff.unready = true;
-  }
-  if (!previous.sideboardLocked && next.sideboardLocked) {
-    diff.sideboardLocked = true;
-  }
-  if (previous.sideboardLocked && !next.sideboardLocked) {
-    diff.sideboardUnlocked = true;
-  }
-  if (previous.deckHash !== next.deckHash && next.deckHash) {
-    diff.deckLoaded = { hash: next.deckHash };
-  }
-  return diff;
-}
-
-export function formatPropertyDiff(
-  game: Enriched.GameEntry,
-  playerId: number,
-  diff: PropertyDiff,
-): string[] {
-  const actor = nameOf(game, playerId);
-  const messages: string[] = [];
-  if (diff.conceded) {
-    messages.push(`${actor} has conceded the game.`);
-  }
-  if (diff.unconceded) {
-    messages.push(`${actor} has unconceded the game.`);
-  }
-  if (diff.ready) {
-    messages.push(`${actor} is ready to start the game.`);
-  }
-  if (diff.unready) {
-    messages.push(`${actor} is no longer ready to start the game.`);
-  }
-  if (diff.sideboardLocked) {
-    messages.push(`${actor} has locked their sideboard.`);
-  }
-  if (diff.sideboardUnlocked) {
-    messages.push(`${actor} has unlocked their sideboard.`);
-  }
-  if (diff.deckLoaded) {
-    messages.push(`${actor} has loaded a deck (${diff.deckLoaded.hash}).`);
-  }
-  return messages;
-}
diff --git a/webclient/src/store/index.ts b/webclient/src/store/index.ts
index f24e74416..bb154069d 100644
--- a/webclient/src/store/index.ts
+++ b/webclient/src/store/index.ts
@@ -24,15 +24,4 @@ export {
   Selectors as RoomsSelectors,
   Dispatch as RoomsDispatch } from './rooms';
 
-export {
-  DEFAULT_GAME_FILTERS,
-  DEFAULT_MAX_PLAYERS_MIN,
-  DEFAULT_MAX_PLAYERS_MAX,
-  DEFAULT_MAX_GAME_AGE_SECONDS,
-  isGameFiltersAtDefaults,
-  gameMatchesFilters,
-} from './rooms/gameFilters';
-
-export type { GameFilterContext } from './rooms/gameFilters';
-
 export * from './rooms/rooms.interfaces';
diff --git a/webclient/src/store/rooms/__mocks__/rooms-fixtures.ts b/webclient/src/store/rooms/__mocks__/rooms-fixtures.ts
index 83b47ece6..72c9c09de 100644
--- a/webclient/src/store/rooms/__mocks__/rooms-fixtures.ts
+++ b/webclient/src/store/rooms/__mocks__/rooms-fixtures.ts
@@ -105,10 +105,6 @@ export function makeRoomsState(overrides: Partial<RoomsState> = {}): RoomsState
       field: App.UserSortField.NAME,
       order: App.SortDirection.ASC,
     },
-    selectedGameIds: {},
-    gameFilters: {},
-    joinGamePending: false,
-    joinGameError: null,
     ...overrides,
   };
 }
diff --git a/webclient/src/store/rooms/gameFilters.spec.ts b/webclient/src/store/rooms/gameFilters.spec.ts
deleted file mode 100644
index 0db2bff4c..000000000
--- a/webclient/src/store/rooms/gameFilters.spec.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
-  DEFAULT_GAME_FILTERS,
-  GameFilterContext,
-  gameMatchesFilters,
-  isGameFiltersAtDefaults,
-} from './gameFilters';
-import { makeGame, makeUser } from './__mocks__/rooms-fixtures';
-
-const ctx = (overrides: Partial<GameFilterContext> = {}): GameFilterContext => ({
-  isOwnUserRegistered: true,
-  isUserBuddy: () => false,
-  isUserIgnored: () => false,
-  nowSeconds: 1_000_000,
-  ...overrides,
-});
-
-describe('isGameFiltersAtDefaults', () => {
-  it('returns true for the default filter state', () => {
-    expect(isGameFiltersAtDefaults(DEFAULT_GAME_FILTERS)).toBe(true);
-  });
-
-  it('returns false when any boolean toggle is set', () => {
-    expect(isGameFiltersAtDefaults({ ...DEFAULT_GAME_FILTERS, hideFullGames: true })).toBe(false);
-  });
-
-  it('returns false when a string filter is non-empty', () => {
-    expect(isGameFiltersAtDefaults({ ...DEFAULT_GAME_FILTERS, gameNameFilter: 'foo' })).toBe(false);
-  });
-
-  it('returns false when game-type filter is non-empty', () => {
-    expect(isGameFiltersAtDefaults({ ...DEFAULT_GAME_FILTERS, gameTypeFilter: [3] })).toBe(false);
-  });
-
-  it('returns false when max-age is set', () => {
-    expect(isGameFiltersAtDefaults({ ...DEFAULT_GAME_FILTERS, maxGameAgeSeconds: 600 })).toBe(false);
-  });
-});
-
-describe('gameMatchesFilters', () => {
-  // Note: maxPlayers must be in [DEFAULT_MAX_PLAYERS_MIN, DEFAULT_MAX_PLAYERS_MAX] = [1, 99]
-  // for the default range filter to accept the game. Tests set maxPlayers: 4 by convention.
-
-  it('accepts every game when filters are at defaults', () => {
-    const game = makeGame({ maxPlayers: 4, description: 'anything' });
-    expect(gameMatchesFilters(game, DEFAULT_GAME_FILTERS, ctx())).toBe(true);
-  });
-
-  it('hideBuddiesOnlyGames hides games with onlyBuddies set', () => {
-    const game = makeGame({ onlyBuddies: true });
-    const filters = { ...DEFAULT_GAME_FILTERS, hideBuddiesOnlyGames: true };
-    expect(gameMatchesFilters(game, filters, ctx())).toBe(false);
-  });
-
-  it('hideFullGames hides games at capacity', () => {
-    const game = makeGame({ playerCount: 4, maxPlayers: 4 });
-    const filters = { ...DEFAULT_GAME_FILTERS, hideFullGames: true };
-    expect(gameMatchesFilters(game, filters, ctx())).toBe(false);
-  });
-
-  it('hideFullGames keeps games with open seats', () => {
-    const game = makeGame({ playerCount: 1, maxPlayers: 4 });
-    const filters = { ...DEFAULT_GAME_FILTERS, hideFullGames: true };
-    expect(gameMatchesFilters(game, filters, ctx())).toBe(true);
-  });
-
-  it('hideGamesThatStarted hides games where started is true', () => {
-    const game = makeGame({ started: true });
-    const filters = { ...DEFAULT_GAME_FILTERS, hideGamesThatStarted: true };
-    expect(gameMatchesFilters(game, filters, ctx())).toBe(false);
-  });
-
-  it('onlyRegistered hides registration-required games when own user is unregistered', () => {
-    const game = makeGame({ onlyRegistered: true });
-    expect(gameMatchesFilters(game, DEFAULT_GAME_FILTERS, ctx({ isOwnUserRegistered: false }))).toBe(false);
-  });
-
-  it('onlyRegistered does not affect own-registered users', () => {
-    const game = makeGame({ maxPlayers: 4, onlyRegistered: true });
-    expect(gameMatchesFilters(game, DEFAULT_GAME_FILTERS, ctx({ isOwnUserRegistered: true }))).toBe(true);
-  });
-
-  it('hidePasswordProtectedGames hides games with withPassword set', () => {
-    const game = makeGame({ withPassword: true });
-    const filters = { ...DEFAULT_GAME_FILTERS, hidePasswordProtectedGames: true };
-    expect(gameMatchesFilters(game, filters, ctx())).toBe(false);
-  });
-
-  it('gameNameFilter matches case-insensitive substring against description', () => {
-    const game = makeGame({ maxPlayers: 4, description: 'Modern Casual' });
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, gameNameFilter: 'modern' }, ctx())).toBe(true);
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, gameNameFilter: 'legacy' }, ctx())).toBe(false);
-  });
-
-  it('creatorNameFilters matches if any substring is found in creator name', () => {
-    const game = makeGame({ maxPlayers: 4, creatorInfo: makeUser({ name: 'Alice' }) });
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, creatorNameFilters: ['ali'] }, ctx())).toBe(true);
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, creatorNameFilters: ['bob'] }, ctx())).toBe(false);
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, creatorNameFilters: ['bob', 'ali'] }, ctx())).toBe(true);
-  });
-
-  it('gameTypeFilter requires intersection with at least one allowed type', () => {
-    const game = makeGame({ maxPlayers: 4, gameTypes: [1, 2] });
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, gameTypeFilter: [3] }, ctx())).toBe(false);
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, gameTypeFilter: [2, 3] }, ctx())).toBe(true);
-  });
-
-  it('maxPlayersFilter respects min and max bounds', () => {
-    const game = makeGame({ maxPlayers: 4 });
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, maxPlayersFilterMin: 6 }, ctx())).toBe(false);
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, maxPlayersFilterMax: 2 }, ctx())).toBe(false);
-    expect(gameMatchesFilters(game, { ...DEFAULT_GAME_FILTERS, maxPlayersFilterMin: 4, maxPlayersFilterMax: 4 }, ctx())).toBe(true);
-  });
-
-  it('maxGameAgeSeconds hides games older than the cutoff', () => {
-    const game = makeGame({ maxPlayers: 4, startTime: 100 });
-    const filters = { ...DEFAULT_GAME_FILTERS, maxGameAgeSeconds: 60 };
-    expect(gameMatchesFilters(game, filters, ctx({ nowSeconds: 200 }))).toBe(false);
-    expect(gameMatchesFilters(game, filters, ctx({ nowSeconds: 150 }))).toBe(true);
-  });
-
-  it('showOnlyIfSpectatorsCanWatch requires spectatorsAllowed', () => {
-    const filters = { ...DEFAULT_GAME_FILTERS, showOnlyIfSpectatorsCanWatch: true };
-    expect(gameMatchesFilters(makeGame({ maxPlayers: 4, spectatorsAllowed: false }), filters, ctx())).toBe(false);
-    expect(gameMatchesFilters(makeGame({ maxPlayers: 4, spectatorsAllowed: true }), filters, ctx())).toBe(true);
-  });
-
-  it('showOnlyIfSpectatorsCanChat further requires spectatorsCanChat', () => {
-    const filters = {
-      ...DEFAULT_GAME_FILTERS,
-      showOnlyIfSpectatorsCanWatch: true,
-      showOnlyIfSpectatorsCanChat: true,
-    };
-    expect(gameMatchesFilters(makeGame({ maxPlayers: 4, spectatorsAllowed: true, spectatorsCanChat: false }), filters, ctx())).toBe(false);
-    expect(gameMatchesFilters(makeGame({ maxPlayers: 4, spectatorsAllowed: true, spectatorsCanChat: true }), filters, ctx())).toBe(true);
-  });
-
-  it('hideIgnoredUserGames consults the isUserIgnored predicate', () => {
-    const game = makeGame({ maxPlayers: 4, creatorInfo: makeUser({ name: 'troll' }) });
-    const filters = { ...DEFAULT_GAME_FILTERS, hideIgnoredUserGames: true };
-    expect(gameMatchesFilters(game, filters, ctx({ isUserIgnored: (n) => n === 'troll' }))).toBe(false);
-    expect(gameMatchesFilters(game, filters, ctx({ isUserIgnored: () => false }))).toBe(true);
-  });
-});
diff --git a/webclient/src/store/rooms/gameFilters.ts b/webclient/src/store/rooms/gameFilters.ts
deleted file mode 100644
index 7e78ca2d0..000000000
--- a/webclient/src/store/rooms/gameFilters.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { Data, Enriched } from '@app/types';
-import { GameFilters } from './rooms.interfaces';
-
-export const DEFAULT_MAX_PLAYERS_MIN = 1;
-export const DEFAULT_MAX_PLAYERS_MAX = 99;
-export const DEFAULT_MAX_GAME_AGE_SECONDS = 0;
-
-export const DEFAULT_GAME_FILTERS: GameFilters = {
-  hideBuddiesOnlyGames: false,
-  hideIgnoredUserGames: false,
-  hideFullGames: false,
-  hideGamesThatStarted: false,
-  hidePasswordProtectedGames: false,
-  hideNotBuddyCreatedGames: false,
-  hideOpenDecklistGames: false,
-  gameNameFilter: '',
-  creatorNameFilters: [],
-  gameTypeFilter: [],
-  maxPlayersFilterMin: DEFAULT_MAX_PLAYERS_MIN,
-  maxPlayersFilterMax: DEFAULT_MAX_PLAYERS_MAX,
-  maxGameAgeSeconds: DEFAULT_MAX_GAME_AGE_SECONDS,
-  showOnlyIfSpectatorsCanWatch: false,
-  showSpectatorPasswordProtected: false,
-  showOnlyIfSpectatorsCanChat: false,
-  showOnlyIfSpectatorsCanSeeHands: false,
-};
-
-export function isGameFiltersAtDefaults(filters: GameFilters): boolean {
-  return (
-    !filters.hideBuddiesOnlyGames &&
-    !filters.hideIgnoredUserGames &&
-    !filters.hideFullGames &&
-    !filters.hideGamesThatStarted &&
-    !filters.hidePasswordProtectedGames &&
-    !filters.hideNotBuddyCreatedGames &&
-    !filters.hideOpenDecklistGames &&
-    filters.gameNameFilter === '' &&
-    filters.creatorNameFilters.length === 0 &&
-    filters.gameTypeFilter.length === 0 &&
-    filters.maxPlayersFilterMin === DEFAULT_MAX_PLAYERS_MIN &&
-    filters.maxPlayersFilterMax === DEFAULT_MAX_PLAYERS_MAX &&
-    filters.maxGameAgeSeconds === DEFAULT_MAX_GAME_AGE_SECONDS &&
-    !filters.showOnlyIfSpectatorsCanWatch &&
-    !filters.showSpectatorPasswordProtected &&
-    !filters.showOnlyIfSpectatorsCanChat &&
-    !filters.showOnlyIfSpectatorsCanSeeHands
-  );
-}
-
-export interface GameFilterContext {
-  isOwnUserRegistered: boolean;
-  isUserBuddy: (name: string) => boolean;
-  isUserIgnored: (name: string) => boolean;
-  nowSeconds: number;
-}
-
-/**
- * Mirrors GamesProxyModel::filterAcceptsRow
- * (cockatrice/src/interface/widgets/server/games_model.cpp).
- */
-export function gameMatchesFilters(
-  game: Enriched.Game,
-  filters: GameFilters,
-  ctx: GameFilterContext,
-): boolean {
-  const info: Data.ServerInfo_Game = game.info;
-  const creatorName = info.creatorInfo?.name ?? '';
-
-  if (filters.hideBuddiesOnlyGames && info.onlyBuddies) {
-    return false;
-  }
-  if (filters.hideOpenDecklistGames && info.shareDecklistsOnLoad) {
-    return false;
-  }
-  if (filters.hideIgnoredUserGames && ctx.isUserIgnored(creatorName)) {
-    return false;
-  }
-  if (filters.hideNotBuddyCreatedGames && !ctx.isUserBuddy(creatorName)) {
-    return false;
-  }
-  if (filters.hideFullGames && info.playerCount === info.maxPlayers) {
-    return false;
-  }
-  if (filters.hideGamesThatStarted && info.started) {
-    return false;
-  }
-  if (!ctx.isOwnUserRegistered && info.onlyRegistered) {
-    return false;
-  }
-  if (filters.hidePasswordProtectedGames && info.withPassword) {
-    return false;
-  }
-  if (filters.gameNameFilter !== '') {
-    if (!info.description.toLowerCase().includes(filters.gameNameFilter.toLowerCase())) {
-      return false;
-    }
-  }
-  if (filters.creatorNameFilters.length > 0) {
-    const lowerCreator = creatorName.toLowerCase();
-    const found = filters.creatorNameFilters.some((substr) =>
-      lowerCreator.includes(substr.toLowerCase()),
-    );
-    if (!found) {
-      return false;
-    }
-  }
-  if (filters.gameTypeFilter.length > 0) {
-    const allowed = new Set(filters.gameTypeFilter);
-    const intersects = info.gameTypes.some((id) => allowed.has(id));
-    if (!intersects) {
-      return false;
-    }
-  }
-  if (info.maxPlayers < filters.maxPlayersFilterMin) {
-    return false;
-  }
-  if (info.maxPlayers > filters.maxPlayersFilterMax) {
-    return false;
-  }
-  if (filters.maxGameAgeSeconds > 0) {
-    const ageSeconds = ctx.nowSeconds - info.startTime;
-    if (ageSeconds > filters.maxGameAgeSeconds) {
-      return false;
-    }
-  }
-  if (filters.showOnlyIfSpectatorsCanWatch) {
-    if (!info.spectatorsAllowed) {
-      return false;
-    }
-    if (!filters.showSpectatorPasswordProtected && info.spectatorsNeedPassword) {
-      return false;
-    }
-    if (filters.showOnlyIfSpectatorsCanChat && !info.spectatorsCanChat) {
-      return false;
-    }
-    if (filters.showOnlyIfSpectatorsCanSeeHands && !info.spectatorsOmniscient) {
-      return false;
-    }
-  }
-  return true;
-}
diff --git a/webclient/src/store/rooms/index.ts b/webclient/src/store/rooms/index.ts
index 08a619d9f..3ebe3905a 100644
--- a/webclient/src/store/rooms/index.ts
+++ b/webclient/src/store/rooms/index.ts
@@ -3,5 +3,3 @@ export * from './rooms.dispatch';
 export * from './rooms.reducer';
 export * from './rooms.selectors';
 export * from './rooms.types';
-export * from './gameFilters';
-export type { GameFilters } from './rooms.interfaces';
diff --git a/webclient/src/store/rooms/rooms.actions.ts b/webclient/src/store/rooms/rooms.actions.ts
index df59d1483..bfb921079 100644
--- a/webclient/src/store/rooms/rooms.actions.ts
+++ b/webclient/src/store/rooms/rooms.actions.ts
@@ -1,11 +1,5 @@
-import { createAction } from '@reduxjs/toolkit';
-
 import { roomsSlice } from './rooms.reducer';
 
-const SignalActions = {
-  gameCreated: createAction<{ roomId: number }>('rooms/gameCreated'),
-};
-
-export const Actions = { ...roomsSlice.actions, ...SignalActions };
+export const Actions = roomsSlice.actions;
 
 export type RoomsAction = ReturnType<typeof Actions[keyof typeof Actions]>;
diff --git a/webclient/src/store/rooms/rooms.dispatch.spec.ts b/webclient/src/store/rooms/rooms.dispatch.spec.ts
index 3f3b3666c..83affda0a 100644
--- a/webclient/src/store/rooms/rooms.dispatch.spec.ts
+++ b/webclient/src/store/rooms/rooms.dispatch.spec.ts
@@ -5,7 +5,6 @@ vi.mock('..', () => ({ store: { dispatch: mockDispatch } }));
 
 import { Actions } from './rooms.actions';
 import { Dispatch } from './rooms.dispatch';
-import { DEFAULT_GAME_FILTERS } from './gameFilters';
 import { makeGame, makeMessage, makeRoom, makeUser } from './__mocks__/rooms-fixtures';
 import { App } from '@app/types';
 
@@ -88,42 +87,4 @@ describe('Dispatch', () => {
     Dispatch.joinedGame(1, 5);
     expect(mockDispatch).toHaveBeenCalledWith(Actions.joinedGame({ roomId: 1, gameId: 5 }));
   });
-
-  it('selectGame dispatches Actions.selectGame()', () => {
-    Dispatch.selectGame(1, 7);
-    expect(mockDispatch).toHaveBeenCalledWith(Actions.selectGame({ roomId: 1, gameId: 7 }));
-  });
-
-  it('selectGame with undefined dispatches a clear', () => {
-    Dispatch.selectGame(1, undefined);
-    expect(mockDispatch).toHaveBeenCalledWith(Actions.selectGame({ roomId: 1, gameId: undefined }));
-  });
-
-  it('setGameFilters dispatches Actions.setGameFilters()', () => {
-    const filters = { ...DEFAULT_GAME_FILTERS, hideFullGames: true };
-    Dispatch.setGameFilters(1, filters);
-    expect(mockDispatch).toHaveBeenCalledWith(Actions.setGameFilters({ roomId: 1, filters }));
-  });
-
-  it('clearGameFilters dispatches Actions.clearGameFilters()', () => {
-    Dispatch.clearGameFilters(1);
-    expect(mockDispatch).toHaveBeenCalledWith(Actions.clearGameFilters({ roomId: 1 }));
-  });
-
-  it('setJoinGamePending dispatches Actions.setJoinGamePending()', () => {
-    Dispatch.setJoinGamePending(true);
-    expect(mockDispatch).toHaveBeenCalledWith(Actions.setJoinGamePending({ pending: true }));
-  });
-
-  it('setJoinGameError dispatches Actions.setJoinGameError()', () => {
-    Dispatch.setJoinGameError(10, 'The game is already full.');
-    expect(mockDispatch).toHaveBeenCalledWith(
-      Actions.setJoinGameError({ code: 10, message: 'The game is already full.' })
-    );
-  });
-
-  it('clearJoinGameError dispatches Actions.clearJoinGameError()', () => {
-    Dispatch.clearJoinGameError();
-    expect(mockDispatch).toHaveBeenCalledWith(Actions.clearJoinGameError());
-  });
 });
diff --git a/webclient/src/store/rooms/rooms.dispatch.ts b/webclient/src/store/rooms/rooms.dispatch.ts
index 6288daaf5..224eff0d9 100644
--- a/webclient/src/store/rooms/rooms.dispatch.ts
+++ b/webclient/src/store/rooms/rooms.dispatch.ts
@@ -1,7 +1,6 @@
 import { App, Data, Enriched } from '@app/types';
 
 import { Actions } from './rooms.actions';
-import { GameFilters } from './rooms.interfaces';
 import { store } from '..';
 
 export const Dispatch = {
@@ -51,29 +50,5 @@ export const Dispatch = {
 
   joinedGame: (roomId: number, gameId: number) => {
     store.dispatch(Actions.joinedGame({ roomId, gameId }));
-  },
-
-  selectGame: (roomId: number, gameId: number | undefined) => {
-    store.dispatch(Actions.selectGame({ roomId, gameId }));
-  },
-
-  setGameFilters: (roomId: number, filters: GameFilters) => {
-    store.dispatch(Actions.setGameFilters({ roomId, filters }));
-  },
-
-  clearGameFilters: (roomId: number) => {
-    store.dispatch(Actions.clearGameFilters({ roomId }));
-  },
-
-  setJoinGamePending: (pending: boolean) => {
-    store.dispatch(Actions.setJoinGamePending({ pending }));
-  },
-
-  setJoinGameError: (code: number, message: string) => {
-    store.dispatch(Actions.setJoinGameError({ code, message }));
-  },
-
-  clearJoinGameError: () => {
-    store.dispatch(Actions.clearJoinGameError());
-  },
+  }
 }
diff --git a/webclient/src/store/rooms/rooms.interfaces.ts b/webclient/src/store/rooms/rooms.interfaces.ts
index ed98bda16..c922308f4 100644
--- a/webclient/src/store/rooms/rooms.interfaces.ts
+++ b/webclient/src/store/rooms/rooms.interfaces.ts
@@ -7,15 +7,6 @@ export interface RoomsState {
   messages: RoomsStateMessages;
   sortGamesBy: RoomsStateSortGamesBy;
   sortUsersBy: RoomsStateSortUsersBy;
-  selectedGameIds: SelectedGameIds;
-  gameFilters: RoomsStateGameFilters;
-  joinGamePending: boolean;
-  joinGameError: JoinGameError | null;
-}
-
-export interface JoinGameError {
-  code: number;
-  message: string;
 }
 
 export interface RoomsStateRooms {
@@ -43,37 +34,3 @@ export interface RoomsStateSortGamesBy extends App.SortBy {
 export interface RoomsStateSortUsersBy extends App.SortBy {
   field: App.UserSortField
 }
-
-export interface SelectedGameIds {
-  [roomId: number]: number | undefined;
-}
-
-export interface RoomsStateGameFilters {
-  [roomId: number]: GameFilters;
-}
-
-/**
- * Mirrors desktop GamesProxyModel filter parameters
- * (cockatrice/src/interface/widgets/server/games_model.cpp).
- * `gameTypeFilter` is the set of allowed game-type ids; empty = no restriction.
- * `creatorNameFilters` is a list of comma-separated substrings; empty = no restriction.
- */
-export interface GameFilters {
-  hideBuddiesOnlyGames: boolean;
-  hideIgnoredUserGames: boolean;
-  hideFullGames: boolean;
-  hideGamesThatStarted: boolean;
-  hidePasswordProtectedGames: boolean;
-  hideNotBuddyCreatedGames: boolean;
-  hideOpenDecklistGames: boolean;
-  gameNameFilter: string;
-  creatorNameFilters: string[];
-  gameTypeFilter: number[];
-  maxPlayersFilterMin: number;
-  maxPlayersFilterMax: number;
-  maxGameAgeSeconds: number;
-  showOnlyIfSpectatorsCanWatch: boolean;
-  showSpectatorPasswordProtected: boolean;
-  showOnlyIfSpectatorsCanChat: boolean;
-  showOnlyIfSpectatorsCanSeeHands: boolean;
-}
diff --git a/webclient/src/store/rooms/rooms.reducer.spec.ts b/webclient/src/store/rooms/rooms.reducer.spec.ts
index 71d0fd5df..6e7f5fbfc 100644
--- a/webclient/src/store/rooms/rooms.reducer.spec.ts
+++ b/webclient/src/store/rooms/rooms.reducer.spec.ts
@@ -1,9 +1,7 @@
-import { create } from '@bufbuild/protobuf';
-import { App, Data } from '@app/types';
+import { App } from '@app/types';
 import { roomsReducer } from './rooms.reducer';
 import { Actions } from './rooms.actions';
 import { MAX_ROOM_MESSAGES } from './rooms.types';
-import { DEFAULT_GAME_FILTERS } from './gameFilters';
 import { makeGame, makeMessage, makeRoom, makeRoomsState, makeUser } from './__mocks__/rooms-fixtures';
 
 
@@ -75,36 +73,6 @@ describe('UPDATE_ROOMS', () => {
     expect(result.rooms[99]).toBeDefined();
     expect(result.rooms[99].info.name).toBe('New Room');
   });
-
-  it('partial room update (only playerCount) preserves name, description, and gametypeMap', () => {
-    // Regression: the desktop server fires Event_ListRooms with only
-    // room_id/player_count/game_count set on every user join/leave
-    // (server_room.cpp addClient/removeClient). A wholesale info replacement
-    // would blank out name/description until the next full room listing.
-    const gametypeMap = { 0: 'Constructed' };
-    const existingRoom = makeRoom({
-      roomId: 1,
-      name: 'Main Hall',
-      description: 'General play',
-      permissionlevel: 'none',
-      gametypeMap,
-    });
-    const state = makeRoomsState({ rooms: { 1: existingRoom } });
-
-    const partial = create(Data.ServerInfo_RoomSchema, {
-      roomId: 1,
-      playerCount: 42,
-      gameCount: 3,
-    });
-    const result = roomsReducer(state, Actions.updateRooms({ rooms: [partial] }));
-
-    expect(result.rooms[1].info.name).toBe('Main Hall');
-    expect(result.rooms[1].info.description).toBe('General play');
-    expect(result.rooms[1].info.permissionlevel).toBe('none');
-    expect(result.rooms[1].info.playerCount).toBe(42);
-    expect(result.rooms[1].info.gameCount).toBe(3);
-    expect(result.rooms[1].gametypeMap).toBe(gametypeMap);
-  });
 });
 
 
@@ -318,6 +286,14 @@ describe('REMOVE_MESSAGES', () => {
 });
 
 
+describe('GAME_CREATED', () => {
+  it('returns state unchanged', () => {
+    const state = makeRoomsState();
+    const result = roomsReducer(state, Actions.gameCreated({ roomId: 1 }));
+    expect(result).toEqual(state);
+  });
+});
+
 
 describe('JOINED_GAME', () => {
   it('sets joinedGameIds[roomId][gameId] = true', () => {
@@ -333,111 +309,3 @@ describe('JOINED_GAME', () => {
     expect(result.joinedGameIds[1][5]).toBe(true);
   });
 });
-
-
-describe('SELECT_GAME', () => {
-  it('records the selected gameId for the room', () => {
-    const state = makeRoomsState();
-    const result = roomsReducer(state, Actions.selectGame({ roomId: 1, gameId: 7 }));
-    expect(result.selectedGameIds[1]).toBe(7);
-  });
-
-  it('clears the selection when called with undefined', () => {
-    const state = makeRoomsState({ selectedGameIds: { 1: 7 } });
-    const result = roomsReducer(state, Actions.selectGame({ roomId: 1, gameId: undefined }));
-    expect(result.selectedGameIds[1]).toBeUndefined();
-  });
-
-  it('keeps other rooms\u2019 selections untouched', () => {
-    const state = makeRoomsState({ selectedGameIds: { 1: 7, 2: 11 } });
-    const result = roomsReducer(state, Actions.selectGame({ roomId: 1, gameId: 8 }));
-    expect(result.selectedGameIds[2]).toBe(11);
-  });
-});
-
-
-describe('UPDATE_GAMES \u2014 selection lifecycle', () => {
-  it('clears selectedGameIds[roomId] when the selected game is closed', () => {
-    const room = makeRoom({ roomId: 1, games: { 5: makeGame({ gameId: 5 }) } });
-    const state = makeRoomsState({ rooms: { 1: room }, selectedGameIds: { 1: 5 } });
-    const result = roomsReducer(state, Actions.updateGames({
-      roomId: 1,
-      games: [{ gameId: 5, closed: true } as any],
-    }));
-    expect(result.selectedGameIds[1]).toBeUndefined();
-  });
-
-  it('preserves selection when an unrelated game is closed', () => {
-    const room = makeRoom({ roomId: 1, games: { 5: makeGame({ gameId: 5 }), 6: makeGame({ gameId: 6 }) } });
-    const state = makeRoomsState({ rooms: { 1: room }, selectedGameIds: { 1: 5 } });
-    const result = roomsReducer(state, Actions.updateGames({
-      roomId: 1,
-      games: [{ gameId: 6, closed: true } as any],
-    }));
-    expect(result.selectedGameIds[1]).toBe(5);
-  });
-});
-
-
-describe('LEAVE_ROOM \u2014 selection and filters', () => {
-  it('clears selectedGameIds and gameFilters for the leaving room', () => {
-    const state = makeRoomsState({
-      selectedGameIds: { 1: 5, 2: 7 },
-      gameFilters: { 1: { ...DEFAULT_GAME_FILTERS, hideFullGames: true } },
-    });
-    const result = roomsReducer(state, Actions.leaveRoom({ roomId: 1 }));
-    expect(result.selectedGameIds[1]).toBeUndefined();
-    expect(result.selectedGameIds[2]).toBe(7);
-    expect(result.gameFilters[1]).toBeUndefined();
-  });
-});
-
-
-describe('JoinGame error state', () => {
-  it('SET_JOIN_GAME_PENDING toggles joinGamePending', () => {
-    const state = makeRoomsState({ joinGamePending: false });
-    const result = roomsReducer(state, Actions.setJoinGamePending({ pending: true }));
-    expect(result.joinGamePending).toBe(true);
-  });
-
-  it('SET_JOIN_GAME_ERROR sets the error and clears joinGamePending', () => {
-    const state = makeRoomsState({ joinGamePending: true });
-    const result = roomsReducer(state, Actions.setJoinGameError({ code: 10, message: 'The game is already full.' }));
-    expect(result.joinGameError).toEqual({ code: 10, message: 'The game is already full.' });
-    expect(result.joinGamePending).toBe(false);
-  });
-
-  it('CLEAR_JOIN_GAME_ERROR nulls the error', () => {
-    const state = makeRoomsState({ joinGameError: { code: 10, message: 'The game is already full.' } });
-    const result = roomsReducer(state, Actions.clearJoinGameError());
-    expect(result.joinGameError).toBeNull();
-  });
-
-  it('CLEAR_STORE resets joinGame error state', () => {
-    const state = makeRoomsState({
-      joinGamePending: true,
-      joinGameError: { code: 12, message: 'Wrong password.' },
-    });
-    const result = roomsReducer(state, Actions.clearStore());
-    expect(result.joinGamePending).toBe(false);
-    expect(result.joinGameError).toBeNull();
-  });
-});
-
-
-describe('SET_GAME_FILTERS / CLEAR_GAME_FILTERS', () => {
-  it('SET_GAME_FILTERS stores filter state for the room', () => {
-    const state = makeRoomsState();
-    const filters = { ...DEFAULT_GAME_FILTERS, hideFullGames: true };
-    const result = roomsReducer(state, Actions.setGameFilters({ roomId: 1, filters }));
-    expect(result.gameFilters[1]).toEqual(filters);
-  });
-
-  it('CLEAR_GAME_FILTERS resets the room filter state to defaults', () => {
-    const state = makeRoomsState({
-      gameFilters: { 1: { ...DEFAULT_GAME_FILTERS, hideFullGames: true } },
-    });
-    const result = roomsReducer(state, Actions.clearGameFilters({ roomId: 1 }));
-    expect(result.gameFilters[1]).toEqual(DEFAULT_GAME_FILTERS);
-  });
-});
diff --git a/webclient/src/store/rooms/rooms.reducer.ts b/webclient/src/store/rooms/rooms.reducer.ts
index f53580dad..0482b4e3a 100644
--- a/webclient/src/store/rooms/rooms.reducer.ts
+++ b/webclient/src/store/rooms/rooms.reducer.ts
@@ -1,10 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { App, Data, Enriched } from '@app/types';
 
-import { mergeSetFields, normalizeGameObject, normalizeGametypeMap, normalizeRoomInfo, normalizeUserMessage } from '../common';
+import { normalizeGameObject, normalizeGametypeMap, normalizeRoomInfo, normalizeUserMessage } from '../common';
 
-import { GameFilters, RoomsState } from './rooms.interfaces';
-import { DEFAULT_GAME_FILTERS } from './gameFilters';
+import { RoomsState } from './rooms.interfaces'
 
 export const MAX_ROOM_MESSAGES = 1000;
 
@@ -20,11 +19,7 @@ const initialState: RoomsState = {
   sortUsersBy: {
     field: App.UserSortField.NAME,
     order: App.SortDirection.ASC
-  },
-  selectedGameIds: {},
-  gameFilters: {},
-  joinGamePending: false,
-  joinGameError: null,
+  }
 };
 
 export const roomsSlice = createSlice({
@@ -36,25 +31,21 @@ export const roomsSlice = createSlice({
     updateRooms: (state, action: PayloadAction<{ rooms: Data.ServerInfo_Room[] }>) => {
       const { rooms } = action.payload;
 
-      // @critical Partial merge — preserve normalized games/users maps AND
-      // any fields the incoming ServerInfo_Room didn't set. The desktop server
-      // broadcasts Event_ListRooms with only room_id/player_count/game_count
-      // set on user join/leave (server_room.cpp addClient/removeClient); a
-      // wholesale replacement would wipe name/description/permissions.
+      // @critical Partial merge — preserve normalized games/users maps.
+      // See .github/instructions/webclient.instructions.md#reducer-merge-rules.
       rooms.forEach((rawRoom, order) => {
         const { roomId } = rawRoom;
         const existing = state.rooms[roomId];
+        const gametypeMap = normalizeGametypeMap(rawRoom.gametypeList);
 
         if (existing) {
-          mergeSetFields(Data.ServerInfo_RoomSchema, existing.info, rawRoom);
-          if (rawRoom.gametypeList.length > 0) {
-            existing.gametypeMap = normalizeGametypeMap(rawRoom.gametypeList);
-          }
+          existing.info = rawRoom;
+          existing.gametypeMap = gametypeMap;
           existing.order = order;
         } else {
           state.rooms[roomId] = {
             info: rawRoom,
-            gametypeMap: normalizeGametypeMap(rawRoom.gametypeList),
+            gametypeMap,
             order,
             games: {},
             users: {},
@@ -79,8 +70,6 @@ export const roomsSlice = createSlice({
       delete state.joinedRoomIds[roomId];
       delete state.joinedGameIds[roomId];
       delete state.messages[roomId];
-      delete state.selectedGameIds[roomId];
-      delete state.gameFilters[roomId];
 
       const room = state.rooms[roomId];
       if (room) {
@@ -115,9 +104,6 @@ export const roomsSlice = createSlice({
       for (const rawGame of games) {
         if (rawGame.closed) {
           delete room.games[rawGame.gameId];
-          if (state.selectedGameIds[roomId] === rawGame.gameId) {
-            state.selectedGameIds[roomId] = undefined;
-          }
           continue;
         }
         const existing = room.games[rawGame.gameId];
@@ -190,33 +176,8 @@ export const roomsSlice = createSlice({
       state.joinedGameIds[roomId][gameId] = true;
     },
 
-    selectGame: (state, action: PayloadAction<{ roomId: number; gameId: number | undefined }>) => {
-      const { roomId, gameId } = action.payload;
-      state.selectedGameIds[roomId] = gameId;
-    },
-
-    setGameFilters: (state, action: PayloadAction<{ roomId: number; filters: GameFilters }>) => {
-      const { roomId, filters } = action.payload;
-      state.gameFilters[roomId] = filters;
-    },
-
-    clearGameFilters: (state, action: PayloadAction<{ roomId: number }>) => {
-      const { roomId } = action.payload;
-      state.gameFilters[roomId] = { ...DEFAULT_GAME_FILTERS };
-    },
-
-    setJoinGamePending: (state, action: PayloadAction<{ pending: boolean }>) => {
-      state.joinGamePending = action.payload.pending;
-    },
-
-    setJoinGameError: (state, action: PayloadAction<{ code: number; message: string }>) => {
-      state.joinGameError = { code: action.payload.code, message: action.payload.message };
-      state.joinGamePending = false;
-    },
-
-    clearJoinGameError: (state) => {
-      state.joinGameError = null;
-    },
+    // Signal-only; kept for discriminated-union exhaustiveness.
+    gameCreated: (_state, _action: PayloadAction<{ roomId: number }>) => {},
   },
 });
 
diff --git a/webclient/src/store/rooms/rooms.selectors.spec.ts b/webclient/src/store/rooms/rooms.selectors.spec.ts
index d8657f2e4..4308aba86 100644
--- a/webclient/src/store/rooms/rooms.selectors.spec.ts
+++ b/webclient/src/store/rooms/rooms.selectors.spec.ts
@@ -1,6 +1,5 @@
 import { Selectors } from './rooms.selectors';
 import { RoomsState } from './rooms.interfaces';
-import { DEFAULT_GAME_FILTERS } from './gameFilters';
 import { makeGame, makeMessage, makeRoom, makeRoomsState, makeUser } from './__mocks__/rooms-fixtures';
 import { App } from '@app/types';
 
@@ -176,103 +175,4 @@ describe('Selectors', () => {
     const b = Selectors.getJoinedRooms(root);
     expect(a).toBe(b);
   });
-
-  describe('getSelectedGameId', () => {
-    it('returns the selected gameId for the room', () => {
-      const state = makeRoomsState({ selectedGameIds: { 1: 5 } });
-      expect(Selectors.getSelectedGameId(rootState(state), 1)).toBe(5);
-    });
-
-    it('returns undefined when no game is selected', () => {
-      const state = makeRoomsState();
-      expect(Selectors.getSelectedGameId(rootState(state), 1)).toBeUndefined();
-    });
-  });
-
-  describe('getGameFilters', () => {
-    it('returns DEFAULT_GAME_FILTERS when room has no filter state', () => {
-      const state = makeRoomsState();
-      expect(Selectors.getGameFilters(rootState(state), 1)).toBe(DEFAULT_GAME_FILTERS);
-    });
-
-    it('returns the stored filters when set', () => {
-      const filters = { ...DEFAULT_GAME_FILTERS, hideFullGames: true };
-      const state = makeRoomsState({ gameFilters: { 1: filters } });
-      expect(Selectors.getGameFilters(rootState(state), 1)).toBe(filters);
-    });
-  });
-
-  describe('isGameFilterActive', () => {
-    it('returns false when room has no filter state', () => {
-      const state = makeRoomsState();
-      expect(Selectors.isGameFilterActive(rootState(state), 1)).toBe(false);
-    });
-
-    it('returns false when filter state matches defaults', () => {
-      const state = makeRoomsState({ gameFilters: { 1: { ...DEFAULT_GAME_FILTERS } } });
-      expect(Selectors.isGameFilterActive(rootState(state), 1)).toBe(false);
-    });
-
-    it('returns true when any filter differs from defaults', () => {
-      const state = makeRoomsState({ gameFilters: { 1: { ...DEFAULT_GAME_FILTERS, hideFullGames: true } } });
-      expect(Selectors.isGameFilterActive(rootState(state), 1)).toBe(true);
-    });
-  });
-
-  describe('getFilteredRoomGames', () => {
-    it('returns the sorted list unchanged when no filters are set', () => {
-      const game1 = makeGame({ gameId: 1, description: 'Beta' });
-      const game2 = makeGame({ gameId: 2, description: 'Alpha' });
-      const room = makeRoom({ roomId: 1, games: { 1: game1, 2: game2 } });
-      const state = makeRoomsState({
-        rooms: { 1: room },
-        sortGamesBy: { field: 'info.description' as App.GameSortField, order: App.SortDirection.ASC },
-      });
-      const result = Selectors.getFilteredRoomGames(rootState(state), 1);
-      expect(result).toHaveLength(2);
-      expect(result[0].info.description).toBe('Alpha');
-    });
-
-    it('applies the active filter against the sorted list', () => {
-      const open = makeGame({ gameId: 1, description: 'open', playerCount: 1, maxPlayers: 4 });
-      const full = makeGame({ gameId: 2, description: 'full', playerCount: 4, maxPlayers: 4 });
-      const room = makeRoom({ roomId: 1, games: { 1: open, 2: full } });
-      const state = makeRoomsState({
-        rooms: { 1: room },
-        gameFilters: { 1: { ...DEFAULT_GAME_FILTERS, hideFullGames: true } },
-      });
-      const result = Selectors.getFilteredRoomGames(rootState(state), 1);
-      expect(result).toHaveLength(1);
-      expect(result[0].info.gameId).toBe(1);
-    });
-
-    it('returns EMPTY_GAMES for unknown roomId', () => {
-      const state = makeRoomsState({ rooms: {} });
-      expect(Selectors.getFilteredRoomGames(rootState(state), 999)).toHaveLength(0);
-    });
-  });
-
-  describe('getRoomGameCounts', () => {
-    it('reports total = visible when no filters are active', () => {
-      const room = makeRoom({ roomId: 1, games: { 1: makeGame({ gameId: 1 }), 2: makeGame({ gameId: 2 }) } });
-      const state = makeRoomsState({ rooms: { 1: room } });
-      expect(Selectors.getRoomGameCounts(rootState(state), 1)).toEqual({ visible: 2, total: 2 });
-    });
-
-    it('reports a smaller visible count when filters hide games', () => {
-      const open = makeGame({ gameId: 1, playerCount: 1, maxPlayers: 4 });
-      const full = makeGame({ gameId: 2, playerCount: 4, maxPlayers: 4 });
-      const room = makeRoom({ roomId: 1, games: { 1: open, 2: full } });
-      const state = makeRoomsState({
-        rooms: { 1: room },
-        gameFilters: { 1: { ...DEFAULT_GAME_FILTERS, hideFullGames: true } },
-      });
-      expect(Selectors.getRoomGameCounts(rootState(state), 1)).toEqual({ visible: 1, total: 2 });
-    });
-
-    it('returns 0/0 for unknown roomId', () => {
-      const state = makeRoomsState({ rooms: {} });
-      expect(Selectors.getRoomGameCounts(rootState(state), 999)).toEqual({ visible: 0, total: 0 });
-    });
-  });
 });
diff --git a/webclient/src/store/rooms/rooms.selectors.ts b/webclient/src/store/rooms/rooms.selectors.ts
index d8d48b2fe..47e4b7d27 100644
--- a/webclient/src/store/rooms/rooms.selectors.ts
+++ b/webclient/src/store/rooms/rooms.selectors.ts
@@ -1,18 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { Data, Enriched } from '@app/types';
 import { SortUtil } from '../common';
-import { GameFilters, RoomsState } from './rooms.interfaces';
-import { ServerState } from '../server/server.interfaces';
-import {
-  DEFAULT_GAME_FILTERS,
-  GameFilterContext,
-  gameMatchesFilters,
-  isGameFiltersAtDefaults,
-} from './gameFilters';
+import { RoomsState } from './rooms.interfaces';
 
 interface State {
-  rooms: RoomsState;
-  server?: ServerState;
+  rooms: RoomsState
 }
 
 const EMPTY_GAMES: Enriched.Game[] = [];
@@ -20,8 +12,6 @@ const EMPTY_USERS: Data.ServerInfo_User[] = [];
 const EMPTY_GAMES_MAP: { [id: number]: Enriched.Game } = {};
 const EMPTY_USERS_MAP: { [name: string]: Data.ServerInfo_User } = {};
 
-const ZERO_COUNTS = { visible: 0, total: 0 };
-
 export const Selectors = {
   getRooms: ({ rooms }: State) => rooms.rooms,
   getRoom: ({ rooms }: State, id: number) => rooms.rooms[id],
@@ -93,88 +83,4 @@ export const Selectors = {
       return SortUtil.sortedUsersByField(Object.values(users), sortBy);
     }
   ),
-
-  getSelectedGameId: (state: State, roomId: number): number | undefined =>
-    state.rooms.selectedGameIds?.[roomId],
-
-  /** Returns the room's filter state, or DEFAULT_GAME_FILTERS if unset. */
-  getGameFilters: (state: State, roomId: number): GameFilters =>
-    state.rooms.gameFilters?.[roomId] ?? DEFAULT_GAME_FILTERS,
-
-  isGameFilterActive: (state: State, roomId: number): boolean => {
-    const filters = state.rooms.gameFilters?.[roomId];
-    if (!filters) {
-      return false;
-    }
-    return !isGameFiltersAtDefaults(filters);
-  },
-
-  getJoinGamePending: ({ rooms }: State) => rooms.joinGamePending,
-  getJoinGameError: ({ rooms }: State) => rooms.joinGameError,
-
-  /**
-   * Sorted + filter-applied view of a room's games for display. Filters
-   * mirror desktop GamesProxyModel; buddy/ignore checks read from server.
-   */
-  getFilteredRoomGames: createSelector(
-    [
-      (state: State, roomId: number) => state.rooms.rooms[roomId]?.games,
-      (state: State) => state.rooms.sortGamesBy,
-      (state: State, roomId: number) => state.rooms.gameFilters?.[roomId],
-      (state: State) => state.server?.user,
-      (state: State) => state.server?.buddyList,
-      (state: State) => state.server?.ignoreList,
-    ],
-    (games, sortBy, filters, user, buddyList, ignoreList): Enriched.Game[] => {
-      if (!games) {
-        return EMPTY_GAMES;
-      }
-      const sorted = SortUtil.sortedByField(Object.values(games), sortBy);
-      if (!filters || isGameFiltersAtDefaults(filters)) {
-        return sorted;
-      }
-      const ctx: GameFilterContext = {
-        isOwnUserRegistered: user
-          ? (user.userLevel & Data.ServerInfo_User_UserLevelFlag.IsRegistered) ===
-            Data.ServerInfo_User_UserLevelFlag.IsRegistered
-          : false,
-        isUserBuddy: (name) => Boolean(buddyList?.[name]),
-        isUserIgnored: (name) => Boolean(ignoreList?.[name]),
-        nowSeconds: Math.floor(Date.now() / 1000),
-      };
-      return sorted.filter((game) => gameMatchesFilters(game, filters, ctx));
-    }
-  ),
-
-  /** Visible (post-filter) and total counts for the games-shown title. */
-  getRoomGameCounts: createSelector(
-    [
-      (state: State, roomId: number) => state.rooms.rooms[roomId]?.games,
-      (state: State, roomId: number) => state.rooms.gameFilters?.[roomId],
-      (state: State) => state.server?.user,
-      (state: State) => state.server?.buddyList,
-      (state: State) => state.server?.ignoreList,
-    ],
-    (games, filters, user, buddyList, ignoreList): { visible: number; total: number } => {
-      if (!games) {
-        return ZERO_COUNTS;
-      }
-      const all = Object.values(games);
-      const total = all.length;
-      if (!filters || isGameFiltersAtDefaults(filters)) {
-        return { visible: total, total };
-      }
-      const ctx: GameFilterContext = {
-        isOwnUserRegistered: user
-          ? (user.userLevel & Data.ServerInfo_User_UserLevelFlag.IsRegistered) ===
-            Data.ServerInfo_User_UserLevelFlag.IsRegistered
-          : false,
-        isUserBuddy: (name) => Boolean(buddyList?.[name]),
-        isUserIgnored: (name) => Boolean(ignoreList?.[name]),
-        nowSeconds: Math.floor(Date.now() / 1000),
-      };
-      const visible = all.reduce((n, game) => (gameMatchesFilters(game, filters, ctx) ? n + 1 : n), 0);
-      return { visible, total };
-    }
-  ),
 }
diff --git a/webclient/src/store/rooms/rooms.types.ts b/webclient/src/store/rooms/rooms.types.ts
index 607e6cc47..57a31f1e2 100644
--- a/webclient/src/store/rooms/rooms.types.ts
+++ b/webclient/src/store/rooms/rooms.types.ts
@@ -1,6 +1,6 @@
-import { Actions } from './rooms.actions';
+import { roomsSlice } from './rooms.reducer';
 
-const a = Actions;
+const a = roomsSlice.actions;
 
 export const Types = {
   CLEAR_STORE: a.clearStore.type,
@@ -15,12 +15,6 @@ export const Types = {
   REMOVE_MESSAGES: a.removeMessages.type,
   GAME_CREATED: a.gameCreated.type,
   JOINED_GAME: a.joinedGame.type,
-  SELECT_GAME: a.selectGame.type,
-  SET_GAME_FILTERS: a.setGameFilters.type,
-  CLEAR_GAME_FILTERS: a.clearGameFilters.type,
-  SET_JOIN_GAME_PENDING: a.setJoinGamePending.type,
-  SET_JOIN_GAME_ERROR: a.setJoinGameError.type,
-  CLEAR_JOIN_GAME_ERROR: a.clearJoinGameError.type,
 } as const;
 
 export { MAX_ROOM_MESSAGES } from './rooms.reducer';
diff --git a/webclient/src/store/server/server.actions.spec.ts b/webclient/src/store/server/server.actions.spec.ts
index 4c2463eb3..f741086c5 100644
--- a/webclient/src/store/server/server.actions.spec.ts
+++ b/webclient/src/store/server/server.actions.spec.ts
@@ -42,10 +42,7 @@ describe('Actions', () => {
   });
 
   it('testConnectionSuccessful', () => {
-    expect(Actions.testConnectionSuccessful({ supportsHashedPassword: true })).toEqual({
-      type: Types.TEST_CONNECTION_SUCCESSFUL,
-      payload: { supportsHashedPassword: true },
-    });
+    expect(Actions.testConnectionSuccessful()).toEqual({ type: Types.TEST_CONNECTION_SUCCESSFUL, payload: undefined });
   });
 
   it('testConnectionFailed', () => {
diff --git a/webclient/src/store/server/server.actions.ts b/webclient/src/store/server/server.actions.ts
index cd8cb1e50..c0ef7ed3d 100644
--- a/webclient/src/store/server/server.actions.ts
+++ b/webclient/src/store/server/server.actions.ts
@@ -1,34 +1,5 @@
-import { createAction } from '@reduxjs/toolkit';
-import { WebsocketTypes } from '@app/websocket/types';
-
 import { serverSlice } from './server.reducer';
 
-const SignalActions = {
-  accountAwaitingActivation: createAction<{ options: WebsocketTypes.PendingActivationContext }>('server/accountAwaitingActivation'),
-  accountActivationFailed: createAction('server/accountActivationFailed'),
-  accountActivationSuccess: createAction('server/accountActivationSuccess'),
-  loginSuccessful: createAction<{ options: WebsocketTypes.LoginSuccessContext }>('server/loginSuccessful'),
-  loginFailed: createAction('server/loginFailed'),
-  connectionFailed: createAction('server/connectionFailed'),
-  registrationRequiresEmail: createAction('server/registrationRequiresEmail'),
-  registrationSuccess: createAction('server/registrationSuccess'),
-  registrationEmailError: createAction<{ error: string }>('server/registrationEmailError'),
-  registrationPasswordError: createAction<{ error: string }>('server/registrationPasswordError'),
-  registrationUserNameError: createAction<{ error: string }>('server/registrationUserNameError'),
-  resetPassword: createAction('server/resetPassword'),
-  resetPasswordFailed: createAction('server/resetPasswordFailed'),
-  resetPasswordChallenge: createAction('server/resetPasswordChallenge'),
-  resetPasswordSuccess: createAction('server/resetPasswordSuccess'),
-  reloadConfig: createAction('server/reloadConfig'),
-  shutdownServer: createAction('server/shutdownServer'),
-  updateServerMessage: createAction('server/updateServerMessage'),
-  accountPasswordChange: createAction('server/accountPasswordChange'),
-  addToList: createAction<{ list: string; userName: string }>('server/addToList'),
-  removeFromList: createAction<{ list: string; userName: string }>('server/removeFromList'),
-  grantReplayAccess: createAction<{ replayId: number; moderatorName: string }>('server/grantReplayAccess'),
-  forceActivateUser: createAction<{ usernameToActivate: string; moderatorName: string }>('server/forceActivateUser'),
-};
-
-export const Actions = { ...serverSlice.actions, ...SignalActions };
+export const Actions = serverSlice.actions;
 
 export type ServerAction = ReturnType<typeof Actions[keyof typeof Actions]>;
diff --git a/webclient/src/store/server/server.dispatch.spec.ts b/webclient/src/store/server/server.dispatch.spec.ts
index 110768a0e..bab47faa7 100644
--- a/webclient/src/store/server/server.dispatch.spec.ts
+++ b/webclient/src/store/server/server.dispatch.spec.ts
@@ -56,10 +56,8 @@ describe('Dispatch', () => {
   });
 
   it('testConnectionSuccessful dispatches Actions.testConnectionSuccessful()', () => {
-    Dispatch.testConnectionSuccessful(true);
-    expect(mockDispatch).toHaveBeenCalledWith(
-      Actions.testConnectionSuccessful({ supportsHashedPassword: true }),
-    );
+    Dispatch.testConnectionSuccessful();
+    expect(mockDispatch).toHaveBeenCalledWith(Actions.testConnectionSuccessful());
   });
 
   it('testConnectionFailed dispatches Actions.testConnectionFailed()', () => {
diff --git a/webclient/src/store/server/server.dispatch.ts b/webclient/src/store/server/server.dispatch.ts
index 272599866..823085e0b 100644
--- a/webclient/src/store/server/server.dispatch.ts
+++ b/webclient/src/store/server/server.dispatch.ts
@@ -22,11 +22,8 @@ export const Dispatch = {
   connectionFailed: () => {
     store.dispatch(Actions.connectionFailed());
   },
-  testConnectionStarted: () => {
-    store.dispatch(Actions.testConnectionStarted());
-  },
-  testConnectionSuccessful: (supportsHashedPassword: boolean) => {
-    store.dispatch(Actions.testConnectionSuccessful({ supportsHashedPassword }));
+  testConnectionSuccessful: () => {
+    store.dispatch(Actions.testConnectionSuccessful());
   },
   testConnectionFailed: () => {
     store.dispatch(Actions.testConnectionFailed());
diff --git a/webclient/src/store/server/server.interfaces.ts b/webclient/src/store/server/server.interfaces.ts
index fde65a97f..ea7f61d15 100644
--- a/webclient/src/store/server/server.interfaces.ts
+++ b/webclient/src/store/server/server.interfaces.ts
@@ -1,12 +1,8 @@
 import { App, Data, Enriched } from '@app/types';
 import { WebsocketTypes } from '@app/websocket/types';
 
-export type TestConnectionStatus = 'testing' | 'success' | 'failed' | null;
-
 export interface ServerState {
   initialized: boolean;
-  /** Lifecycle of the most recent test connection — drives Login button + hashed-password UI gates. */
-  testConnectionStatus: TestConnectionStatus;
   /** Buddies keyed by username for O(1) lookup. Use `getSortedBuddyList` for display. */
   buddyList: { [userName: string]: Data.ServerInfo_User };
   /** Ignored users keyed by username for O(1) lookup. Use `getSortedIgnoreList` for display. */
@@ -20,10 +16,10 @@ export interface ServerState {
   sortUsersBy: ServerStateSortUsersBy;
   messages: {
     [userName: string]: Data.Event_UserMessage[];
-  };
+  }
   userInfo: {
     [userName: string]: Data.ServerInfo_User;
-  };
+  }
   notifications: Data.Event_NotifyUser[];
   serverShutdown: Data.Event_ServerShutdown | null;
   banUser: string;
@@ -64,5 +60,5 @@ export interface ServerStateLogs {
 }
 
 export interface ServerStateSortUsersBy extends App.SortBy {
-  field: App.UserSortField;
+  field: App.UserSortField
 }
diff --git a/webclient/src/store/server/server.reducer.spec.ts b/webclient/src/store/server/server.reducer.spec.ts
index 7ba081626..328e10aa5 100644
--- a/webclient/src/store/server/server.reducer.spec.ts
+++ b/webclient/src/store/server/server.reducer.spec.ts
@@ -5,6 +5,7 @@ import { serverReducer, MAX_USER_MESSAGES } from './server.reducer';
 import { Actions } from './server.actions';
 import {
   makeBanHistoryItem,
+  makePendingActivationContext,
   makeDeckList,
   makeDeckTreeItem,
   makeGame,
@@ -61,6 +62,24 @@ describe('Account & Connection', () => {
     expect(result.status.connectionAttemptMade).toBe(true);
   });
 
+  it('ACCOUNT_AWAITING_ACTIVATION → returns state unchanged', () => {
+    const options = makePendingActivationContext();
+    const state = makeServerState();
+    const result = serverReducer(state, Actions.accountAwaitingActivation({ options }));
+    expect(result).toEqual(state);
+  });
+
+  it('ACCOUNT_ACTIVATION_SUCCESS → returns state unchanged', () => {
+    const state = makeServerState();
+    const result = serverReducer(state, Actions.accountActivationSuccess());
+    expect(result).toEqual(state);
+  });
+
+  it('ACCOUNT_ACTIVATION_FAILED → returns state unchanged', () => {
+    const state = makeServerState();
+    const result = serverReducer(state, Actions.accountActivationFailed());
+    expect(result).toEqual(state);
+  });
 });
 
 
diff --git a/webclient/src/store/server/server.reducer.ts b/webclient/src/store/server/server.reducer.ts
index 73774164c..1aa7efc8b 100644
--- a/webclient/src/store/server/server.reducer.ts
+++ b/webclient/src/store/server/server.reducer.ts
@@ -69,7 +69,6 @@ function removeByPath(folder: Data.ServerInfo_DeckStorage_Folder, pathSegments:
 
 const initialState: ServerState = {
   initialized: false,
-  testConnectionStatus: null,
   buddyList: {},
   ignoreList: {},
 
@@ -125,22 +124,6 @@ export const serverSlice = createSlice({
       state.status.connectionAttemptMade = true;
     },
 
-    testConnectionStarted: (state) => {
-      state.testConnectionStatus = 'testing';
-    },
-
-    // `supportsHashedPassword` is typed on the action so `useReduxEffect`
-    // subscribers (see useKnownHostsComponent) can persist it to the host
-    // record in Dexie. It's deliberately not stored in redux state since
-    // only the lifecycle matters here; per-host capability lives in Dexie.
-    testConnectionSuccessful: (state, _action: PayloadAction<{ supportsHashedPassword: boolean }>) => {
-      state.testConnectionStatus = 'success';
-    },
-
-    testConnectionFailed: (state) => {
-      state.testConnectionStatus = 'failed';
-    },
-
     clearStore: (state) => ({
       ...initialState,
       status: { ...state.status },
@@ -202,7 +185,7 @@ export const serverSlice = createSlice({
 
     updateUser: (state, action: PayloadAction<{ user: Partial<Data.ServerInfo_User> }>) => {
       if (state.user) {
-        state.user = create(Data.ServerInfo_UserSchema, { ...state.user, ...action.payload.user });
+        Object.assign(state.user, action.payload.user);
       } else {
         state.user = action.payload.user as Data.ServerInfo_User;
       }
@@ -410,15 +393,42 @@ export const serverSlice = createSlice({
 
     accountEditChanged: (state, action: PayloadAction<{ user: Partial<Data.ServerInfo_User> }>) => {
       if (state.user) {
-        state.user = create(Data.ServerInfo_UserSchema, { ...state.user, ...action.payload.user });
+        Object.assign(state.user, action.payload.user);
       }
     },
 
     accountImageChanged: (state, action: PayloadAction<{ user: Partial<Data.ServerInfo_User> }>) => {
       if (state.user) {
-        state.user = create(Data.ServerInfo_UserSchema, { ...state.user, ...action.payload.user });
+        Object.assign(state.user, action.payload.user);
       }
     },
+
+    // Signal-only action types — no state mutation, defined so type strings are generated
+    accountAwaitingActivation: (_state, _action: PayloadAction<{ options: WebsocketTypes.PendingActivationContext }>) => {},
+    accountActivationFailed: (_state) => {},
+    accountActivationSuccess: (_state) => {},
+    loginSuccessful: (_state, _action: PayloadAction<{ options: WebsocketTypes.LoginSuccessContext }>) => {},
+    loginFailed: (_state) => {},
+    connectionFailed: (_state) => {},
+    testConnectionSuccessful: (_state) => {},
+    testConnectionFailed: (_state) => {},
+    registrationRequiresEmail: (_state) => {},
+    registrationSuccess: (_state) => {},
+    registrationEmailError: (_state, _action: PayloadAction<{ error: string }>) => {},
+    registrationPasswordError: (_state, _action: PayloadAction<{ error: string }>) => {},
+    registrationUserNameError: (_state, _action: PayloadAction<{ error: string }>) => {},
+    resetPassword: (_state) => {},
+    resetPasswordFailed: (_state) => {},
+    resetPasswordChallenge: (_state) => {},
+    resetPasswordSuccess: (_state) => {},
+    reloadConfig: (_state) => {},
+    shutdownServer: (_state) => {},
+    updateServerMessage: (_state) => {},
+    accountPasswordChange: (_state) => {},
+    addToList: (_state, _action: PayloadAction<{ list: string; userName: string }>) => {},
+    removeFromList: (_state, _action: PayloadAction<{ list: string; userName: string }>) => {},
+    grantReplayAccess: (_state, _action: PayloadAction<{ replayId: number; moderatorName: string }>) => {},
+    forceActivateUser: (_state, _action: PayloadAction<{ usernameToActivate: string; moderatorName: string }>) => {},
   },
 });
 
diff --git a/webclient/src/store/server/server.selectors.ts b/webclient/src/store/server/server.selectors.ts
index 2b56daeb0..fb681bb90 100644
--- a/webclient/src/store/server/server.selectors.ts
+++ b/webclient/src/store/server/server.selectors.ts
@@ -19,8 +19,6 @@ export const Selectors = {
   getDescription: ({ server }: State) => server.status.description,
   getState: ({ server }: State) => server.status.state,
   getConnectionAttemptMade: ({ server }: State) => server.status.connectionAttemptMade,
-  /** Lifecycle status of the latest test connection. `null` until the first test fires. */
-  getTestConnectionStatus: ({ server }: State) => server.testConnectionStatus,
   getUser: ({ server }: State) => server.user,
 
   /** True when the server status has reached LOGGED_IN. */
@@ -40,33 +38,6 @@ export const Selectors = {
       return (user.userLevel & mask) === mask;
     }
   ),
-
-  /** True when the currently logged-in user has the IsJudge level flag. */
-  getIsUserJudge: createSelector(
-    [({ server }: State) => server.user],
-    (user): boolean => {
-      if (!user) {
-        return false;
-      }
-      const mask = Data.ServerInfo_User_UserLevelFlag.IsJudge;
-      return (user.userLevel & mask) === mask;
-    }
-  ),
-
-  /** True when the currently logged-in user has the IsRegistered level flag. */
-  getIsUserRegistered: createSelector(
-    [({ server }: State) => server.user],
-    (user): boolean => {
-      if (!user) {
-        return false;
-      }
-      const mask = Data.ServerInfo_User_UserLevelFlag.IsRegistered;
-      return (user.userLevel & mask) === mask;
-    }
-  ),
-  /** Fetched user profile info, keyed by username. Populated by Command_GetUserInfo responses. */
-  getUserInfoByName: ({ server }: State, userName: string): Data.ServerInfo_User | undefined =>
-    server.userInfo[userName],
   getLogs: ({ server }: State) => server.logs,
   getBackendDecks: ({ server }: State) => server.backendDecks,
   getDownloadedDeck: ({ server }: State) => server.downloadedDeck,
diff --git a/webclient/src/store/server/server.types.ts b/webclient/src/store/server/server.types.ts
index 8462ff1fd..d3def9004 100644
--- a/webclient/src/store/server/server.types.ts
+++ b/webclient/src/store/server/server.types.ts
@@ -1,6 +1,6 @@
-import { Actions } from './server.actions';
+import { serverSlice } from './server.reducer';
 
-const a = Actions;
+const a = serverSlice.actions;
 
 export const Types = {
   INITIALIZED: a.initialized.type,
@@ -9,7 +9,6 @@ export const Types = {
   LOGIN_SUCCESSFUL: a.loginSuccessful.type,
   LOGIN_FAILED: a.loginFailed.type,
   CONNECTION_FAILED: a.connectionFailed.type,
-  TEST_CONNECTION_STARTED: a.testConnectionStarted.type,
   TEST_CONNECTION_SUCCESSFUL: a.testConnectionSuccessful.type,
   TEST_CONNECTION_FAILED: a.testConnectionFailed.type,
   SERVER_MESSAGE: a.serverMessage.type,
diff --git a/webclient/src/store/store.ts b/webclient/src/store/store.ts
index a90084cb6..b5261b782 100644
--- a/webclient/src/store/store.ts
+++ b/webclient/src/store/store.ts
@@ -5,20 +5,17 @@ import rootReducer from './rootReducer';
 
 // Protobuf-es v2 messages are plain objects with $typeName/$unknown siblings;
 // bytes fields are Uint8Array and int64/uint64 are BigInt. All four pass through.
-export function isSerializable(value: unknown): boolean {
+function isSerializable(value: unknown): boolean {
   return isPlain(value) || isMessage(value) || value instanceof Uint8Array || typeof value === 'bigint';
 }
 
-// Shared config between production store and renderWithProviders test harness.
-// Exporting ensures the test store tolerates the same proto actions as prod.
-export const storeMiddlewareOptions = {
-  immutableCheck: { warnAfter: 128 },
-  serializableCheck: { isSerializable, warnAfter: 128 },
-} as const;
-
 export const store = configureStore({
   reducer: rootReducer,
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware(storeMiddlewareOptions),
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      immutableCheck: { warnAfter: 128 },
+      serializableCheck: { isSerializable, warnAfter: 128 },
+    }),
 });
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
diff --git a/webclient/src/types/app.ts b/webclient/src/types/app.ts
index 0f98048b6..1921e8a44 100644
--- a/webclient/src/types/app.ts
+++ b/webclient/src/types/app.ts
@@ -1,8 +1,4 @@
-export type { CreateGameParams, JoinGameParams } from '@app/generated';
-
 export * from './cards';
-export * from './colors';
-export * from './game';
 export * from './regex-patterns';
 export * from './countries';
 export * from './languages';
diff --git a/webclient/src/types/cards.ts b/webclient/src/types/cards.ts
index d6bbcf909..b28bae203 100644
--- a/webclient/src/types/cards.ts
+++ b/webclient/src/types/cards.ts
@@ -71,13 +71,6 @@ export class Set {
   type: string;
 }
 
-/**
- * Token fields are shaped `{ value: string }` because Cockatrice serves tokens
- * as XML (tokens.xml), and each leaf preserves the XML element's text content
- * alongside its attributes. The wrapper is not a DB artifact — it mirrors the
- * `<element attr="...">value</element>` shape produced by CardImporterService's
- * parseXmlAttributes.
- */
 export class Token {
   name: { value: string };
   prop: {
diff --git a/webclient/src/types/colors.ts b/webclient/src/types/colors.ts
deleted file mode 100644
index 8930a010c..000000000
--- a/webclient/src/types/colors.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Shared color constants for the game board surface.
- *
- * Two flavors for each named color:
- *   - `*_RGBA` — `{ r, g, b, a }` shape expected by protobuf `color` messages
- *     (arrow color, counter color) and `rgbaToCss()`.
- *   - `*_CSS`  — ready-to-paste CSS string, mirrored by the matching
- *     CSS custom property declared at `:root` in `src/colors.css`.
- *
- * Keep both in sync: add new entries in both the TS constant and the
- * `:root` block, or introduce a generator if the list grows.
- */
-
-export interface ColorRGBA {
-  r: number;
-  g: number;
-  b: number;
-  a: number;
-}
-
-export const ArrowColor = {
-  RED: { r: 224, g: 75, b: 59, a: 255 } as ColorRGBA,
-  YELLOW: { r: 240, g: 200, b: 60, a: 255 } as ColorRGBA,
-  BLUE: { r: 137, g: 184, b: 224, a: 255 } as ColorRGBA,
-  GREEN: { r: 61, g: 162, b: 107, a: 255 } as ColorRGBA,
-} as const;
-
-/**
- * Highlight yellow used for the active-turn indicator, the host crown, and
- * the `:focus-visible` outline. Kept as one shade for visual consistency.
- */
-export const HIGHLIGHT_YELLOW_CSS = '#f7b01c';
-
-export function rgbaToCss(c: ColorRGBA): string {
-  return `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a / 255})`;
-}
diff --git a/webclient/src/types/enriched.ts b/webclient/src/types/enriched.ts
index 8b1eb1839..a950ddfdc 100644
--- a/webclient/src/types/enriched.ts
+++ b/webclient/src/types/enriched.ts
@@ -75,7 +75,7 @@ export const ZoneName = {
 export type ZoneNameValue = typeof ZoneName[keyof typeof ZoneName];
 
 export interface ZoneEntry {
-  name: ZoneNameValue;
+  name: string;
   /** ZoneType enum value (0=Private, 1=Public, 2=Hidden). */
   type: number;
   withCoords: boolean;
@@ -91,8 +91,6 @@ export interface GameMessage {
   playerId: number;
   message: string;
   timeReceived: number;
-  /** Defaults to 'chat'. Event messages are rendered without a leading speaker label. */
-  kind?: 'chat' | 'event';
 }
 
 export interface LogGroups {
diff --git a/webclient/src/types/game.ts b/webclient/src/types/game.ts
deleted file mode 100644
index 445e39b5a..000000000
--- a/webclient/src/types/game.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export enum Phase {
-  Untap = 0,
-  Upkeep = 1,
-  Draw = 2,
-  FirstMain = 3,
-  BeginCombat = 4,
-  DeclareAttackers = 5,
-  DeclareBlockers = 6,
-  CombatDamage = 7,
-  EndCombat = 8,
-  SecondMain = 9,
-  EndCleanup = 10,
-}
-
-export const ZoneName = {
-  TABLE: 'table',
-  GRAVE: 'grave',
-  EXILE: 'rfg',
-  HAND: 'hand',
-  DECK: 'deck',
-  SIDEBOARD: 'sb',
-  STACK: 'stack',
-} as const;
-
-export type ZoneName = typeof ZoneName[keyof typeof ZoneName];
-
-export enum ScryfallImageSize {
-  Small = 'small',
-  Normal = 'normal',
-  Large = 'large',
-  Png = 'png',
-  ArtCrop = 'art_crop',
-  BorderCrop = 'border_crop',
-}
diff --git a/webclient/src/types/server.ts b/webclient/src/types/server.ts
index e280e258a..4b23cc02d 100644
--- a/webclient/src/types/server.ts
+++ b/webclient/src/types/server.ts
@@ -10,8 +10,4 @@ export class Host {
   userName?: string;
   hashedPassword?: string;
   remember?: boolean;
-  // Captured from Event_ServerIdentification.serverOptions during test connection.
-  // `undefined` = never tested; `true`/`false` = confirmed. UI gates the
-  // Remember Password and Auto Connect checkboxes on this.
-  supportsHashedPassword?: boolean;
 }
diff --git a/webclient/src/types/settings.ts b/webclient/src/types/settings.ts
index 122719ea7..c91394331 100644
--- a/webclient/src/types/settings.ts
+++ b/webclient/src/types/settings.ts
@@ -1,7 +1,6 @@
 export class Setting {
   user: string;
   autoConnect?: boolean;
-  invertVerticalCoordinate?: boolean;
 }
 
 export const APP_USER = '*app';
diff --git a/webclient/src/utils/cx.spec.ts b/webclient/src/utils/cx.spec.ts
deleted file mode 100644
index f05176b97..000000000
--- a/webclient/src/utils/cx.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { cx } from './cx';
-
-describe('cx', () => {
-  it('joins strings with spaces', () => {
-    expect(cx('a', 'b', 'c')).toBe('a b c');
-  });
-
-  it('drops falsy values', () => {
-    expect(cx('a', false, null, undefined, 0, 'b')).toBe('a b');
-  });
-
-  it('applies object toggles', () => {
-    expect(cx('a', { b: true, c: false, d: 1 })).toBe('a b d');
-  });
-
-  it('flattens nested arrays', () => {
-    expect(cx('a', ['b', ['c', ['d']]])).toBe('a b c d');
-  });
-
-  it('returns an empty string for nothing', () => {
-    expect(cx()).toBe('');
-    expect(cx(false, null, undefined)).toBe('');
-  });
-
-  it('mixes strings, objects, and arrays', () => {
-    const tapped = true as boolean;
-    expect(
-      cx('card-slot', tapped && 'card-slot--tapped', {
-        'card-slot--face-down': true,
-        'card-slot--dragging': false,
-      }),
-    ).toBe('card-slot card-slot--tapped card-slot--face-down');
-  });
-});
diff --git a/webclient/src/utils/cx.ts b/webclient/src/utils/cx.ts
deleted file mode 100644
index f0e5f78ee..000000000
--- a/webclient/src/utils/cx.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Joins truthy class names into a space-separated string.
- * Matches the widely-used `clsx`/`classnames` contract but stays a tiny
- * in-tree helper so we don't pull another dependency.
- *
- * Accepts strings, arrays of strings, and objects mapping class names to
- * booleans. Falsy values are dropped.
- *
- * @example
- *   cx('card-slot', tapped && 'card-slot--tapped', {
- *     'card-slot--face-down': card.faceDown,
- *   });
- */
-export type CxArg =
-  | string
-  | number
-  | false
-  | null
-  | undefined
-  | CxArg[]
-  | { [className: string]: unknown };
-
-export function cx(...args: CxArg[]): string {
-  const out: string[] = [];
-  for (const arg of args) {
-    if (!arg) {
-      continue;
-    }
-    if (typeof arg === 'string' || typeof arg === 'number') {
-      out.push(String(arg));
-    } else if (Array.isArray(arg)) {
-      const nested = cx(...arg);
-      if (nested) {
-        out.push(nested);
-      }
-    } else if (typeof arg === 'object') {
-      for (const key of Object.keys(arg)) {
-        if (arg[key]) {
-          out.push(key);
-        }
-      }
-    }
-  }
-  return out.join(' ');
-}
diff --git a/webclient/src/utils/index.ts b/webclient/src/utils/index.ts
deleted file mode 100644
index e541b97c7..000000000
--- a/webclient/src/utils/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { cx } from './cx';
-export type { CxArg } from './cx';
diff --git a/webclient/src/websocket/WebClient.spec.ts b/webclient/src/websocket/WebClient.spec.ts
index 3edc330f0..7bb855a67 100644
--- a/webclient/src/websocket/WebClient.spec.ts
+++ b/webclient/src/websocket/WebClient.spec.ts
@@ -38,35 +38,6 @@ import type { IWebClientResponse } from './types/WebClientResponse';
 import type { IWebClientRequest } from './types/WebClientRequest';
 import type { ConnectTarget } from './types/WebClientConfig';
 import { installMockWebSocket } from './__mocks__/helpers';
-import { create, setExtension, toBinary } from '@bufbuild/protobuf';
-import {
-  Event_ServerIdentification_ext,
-  Event_ServerIdentification_ServerOptions,
-  Event_ServerIdentificationSchema,
-  ServerMessageSchema,
-  ServerMessage_MessageType,
-  SessionEventSchema,
-} from '@app/generated';
-import { PROTOCOL_VERSION } from './config';
-
-function buildServerIdentificationMessage({
-  protocolVersion = PROTOCOL_VERSION,
-  serverOptions = 0,
-}: { protocolVersion?: number; serverOptions?: number } = {}): Uint8Array {
-  const ident = create(Event_ServerIdentificationSchema, {
-    serverName: 'TestServer',
-    serverVersion: '2.8.0',
-    protocolVersion,
-    serverOptions,
-  });
-  const sessionEvent = create(SessionEventSchema);
-  setExtension(sessionEvent, Event_ServerIdentification_ext, ident);
-  const server = create(ServerMessageSchema, {
-    messageType: ServerMessage_MessageType.SESSION_EVENT,
-    sessionEvent,
-  });
-  return toBinary(ServerMessageSchema, server);
-}
 
 function makeMockResponse(): IWebClientResponse {
   return {
@@ -200,47 +171,23 @@ describe('WebClient', () => {
       expect(MockWS).toHaveBeenCalledWith(expect.stringContaining('://h:1'));
     });
 
-    it('routes path-bearing hosts through the default TLS port (nginx proxy)', () => {
-      client.testConnect({ host: 'server.example.com/servatrice', port: '4748' });
-      expect(MockWS).toHaveBeenCalledWith(expect.stringMatching(/:\/\/server\.example\.com\/servatrice$/));
-    });
-
-    it('dispatches testConnectionSuccessful with supportsHashedPassword=true when the bit is set', () => {
+    it('calls testConnectionSuccessful and closes on open', () => {
       client.testConnect(target);
-      const data = buildServerIdentificationMessage({
-        serverOptions: Event_ServerIdentification_ServerOptions.SupportsPasswordHash,
-      });
-      wsMockInstance.onmessage({ data: data.buffer });
-      expect(mockResponse.session.testConnectionSuccessful).toHaveBeenCalledWith(true);
+      wsMockInstance.onopen();
+      expect(mockResponse.session.testConnectionSuccessful).toHaveBeenCalled();
       expect(wsMockInstance.close).toHaveBeenCalled();
     });
 
-    it('dispatches testConnectionSuccessful with supportsHashedPassword=false for naked-password servers', () => {
-      client.testConnect(target);
-      const data = buildServerIdentificationMessage({ serverOptions: 0 });
-      wsMockInstance.onmessage({ data: data.buffer });
-      expect(mockResponse.session.testConnectionSuccessful).toHaveBeenCalledWith(false);
-    });
-
-    it('fails on protocol-version mismatch instead of reporting success', () => {
-      client.testConnect(target);
-      const data = buildServerIdentificationMessage({ protocolVersion: PROTOCOL_VERSION + 1 });
-      wsMockInstance.onmessage({ data: data.buffer });
-      expect(mockResponse.session.testConnectionFailed).toHaveBeenCalled();
-      expect(mockResponse.session.testConnectionSuccessful).not.toHaveBeenCalled();
-    });
-
     it('calls testConnectionFailed on error', () => {
       client.testConnect(target);
       wsMockInstance.onerror();
       expect(mockResponse.session.testConnectionFailed).toHaveBeenCalled();
     });
 
-    it('fires testConnectionFailed when ServerIdentification never arrives before the keepalive timeout', () => {
+    it('closes socket after keepalive timeout', () => {
       client.testConnect(target);
       vi.advanceTimersByTime(5000);
       expect(wsMockInstance.close).toHaveBeenCalled();
-      expect(mockResponse.session.testConnectionFailed).toHaveBeenCalled();
     });
 
     it('closes the prior in-flight socket on rapid re-click', () => {
diff --git a/webclient/src/websocket/WebClient.ts b/webclient/src/websocket/WebClient.ts
index 9e95b587e..21cd46456 100644
--- a/webclient/src/websocket/WebClient.ts
+++ b/webclient/src/websocket/WebClient.ts
@@ -1,13 +1,5 @@
-import { fromBinary, getExtension, hasExtension } from '@bufbuild/protobuf';
-
-import {
-  Event_ServerIdentification_ext,
-  ServerMessageSchema,
-  ServerMessage_MessageType,
-} from '@app/generated';
-
 import { ping } from './commands/session';
-import { CLIENT_OPTIONS, PROTOCOL_VERSION } from './config';
+import { CLIENT_OPTIONS } from './config';
 import { GameEvents } from './events/game';
 import { RoomEvents } from './events/room';
 import { SessionEvents } from './events/session';
@@ -17,8 +9,6 @@ import type { IWebClientResponse } from './types/WebClientResponse';
 import { StatusEnum } from './types/StatusEnum';
 import { ProtobufService } from './services/ProtobufService';
 import { WebSocketService } from './services/WebSocketService';
-import { buildWebSocketUrl } from './utils/buildWebSocketUrl';
-import { passwordSaltSupported } from './utils/passwordHasher';
 
 export class WebClient {
   private static _instance: WebClient | null = null;
@@ -54,11 +44,6 @@ export class WebClient {
       onConnectionFailed: () => {
         this.response.session.connectionFailed();
       },
-      reconnect: {
-        maxAttempts: 5,
-        baseDelayMs: 1000,
-        maxDelayMs: 30000,
-      },
     });
 
     this.protobuf = new ProtobufService(
@@ -78,12 +63,12 @@ export class WebClient {
     this.response.session.initialized();
   }
 
-  public connect(target: ConnectTarget): void {
+  public connect(target: ConnectTarget) {
     this.response.session.connectionAttempted();
     this.socket.connect(target);
   }
 
-  public testConnect(target: ConnectTarget): void {
+  public testConnect(target: ConnectTarget) {
     // A prior test connection still in flight when the user re-clicks would
     // otherwise leak the socket until its keepalive timeout. Close eagerly.
     if (this.testSocket) {
@@ -92,75 +77,45 @@ export class WebClient {
     }
 
     const protocol = window.location.hostname === 'localhost' ? 'ws' : 'wss';
-    const socket = new WebSocket(buildWebSocketUrl(protocol, target.host, target.port));
+    const { host, port } = target;
+    const socket = new WebSocket(`${protocol}://${host}:${port}`);
     socket.binaryType = 'arraybuffer';
     this.testSocket = socket;
 
-    // "Green" means reachable AND speaking a compatible Cockatrice protocol.
-    // Waiting for Event_ServerIdentification lets us read the hashed-password
-    // capability before the user ever logs in. The bitmask is resolved here
-    // (the websocket layer owns protocol details) so downstream consumers
-    // receive a domain-level boolean instead of a raw integer.
-    let resolved = false;
-    const resolve = (ok: boolean, supportsHashedPassword = false): void => {
-      if (resolved) {
-        return;
-      }
-      resolved = true;
-      clearTimeout(timeout);
-      // Suppress dispatches from a superseded socket — a newer test has
-      // already taken over and we'd race a stale result into its pending-ref.
+    const timeout = setTimeout(() => socket.close(), CLIENT_OPTIONS.keepalive);
+
+    const clearIfActive = () => {
       if (this.testSocket === socket) {
-        if (ok) {
-          this.response.session.testConnectionSuccessful(supportsHashedPassword);
-        } else {
-          this.response.session.testConnectionFailed();
-        }
         this.testSocket = null;
       }
+    };
+
+    socket.onopen = () => {
+      clearTimeout(timeout);
+      this.response.session.testConnectionSuccessful();
       socket.close();
+      clearIfActive();
     };
 
-    const timeout = setTimeout(() => resolve(false), CLIENT_OPTIONS.keepalive);
-
-    socket.onmessage = (event: MessageEvent) => {
-      try {
-        const msg = fromBinary(ServerMessageSchema, new Uint8Array(event.data));
-        if (msg.messageType !== ServerMessage_MessageType.SESSION_EVENT) {
-          return;
-        }
-        const sessionEvent = msg.sessionEvent;
-        if (!sessionEvent || !hasExtension(sessionEvent, Event_ServerIdentification_ext)) {
-          return;
-        }
-        const ident = getExtension(sessionEvent, Event_ServerIdentification_ext);
-        if (ident.protocolVersion !== PROTOCOL_VERSION) {
-          resolve(false);
-          return;
-        }
-        resolve(true, passwordSaltSupported(ident.serverOptions));
-      } catch {
-        resolve(false);
-      }
+    socket.onerror = () => {
+      this.response.session.testConnectionFailed();
+      clearIfActive();
     };
 
-    socket.onerror = () => resolve(false);
-    socket.onclose = () => resolve(false);
+    socket.onclose = () => {
+      clearIfActive();
+    };
   }
 
-  public disconnect(): void {
+  public disconnect() {
     this.socket.disconnect();
   }
 
-  public updateStatus(status: StatusEnum): void {
+  public updateStatus(status: StatusEnum) {
     this.status = status;
 
     if (status === StatusEnum.DISCONNECTED) {
       this.protobuf.resetCommands();
     }
   }
-
-  public get isReconnecting(): boolean {
-    return this.status === StatusEnum.RECONNECTING;
-  }
 }
diff --git a/webclient/src/websocket/__mocks__/WebClient.ts b/webclient/src/websocket/__mocks__/WebClient.ts
index 8bf6e6a71..2485830e0 100644
--- a/webclient/src/websocket/__mocks__/WebClient.ts
+++ b/webclient/src/websocket/__mocks__/WebClient.ts
@@ -89,8 +89,6 @@ const room = {
   removeMessages: vi.fn(),
   gameCreated: vi.fn(),
   joinedGame: vi.fn(),
-  setJoinGamePending: vi.fn(),
-  setJoinGameError: vi.fn(),
 };
 
 const game = {
diff --git a/webclient/src/websocket/commands/game/attachCard.presence.spec.ts b/webclient/src/websocket/commands/game/attachCard.presence.spec.ts
deleted file mode 100644
index 8feedffeb..000000000
--- a/webclient/src/websocket/commands/game/attachCard.presence.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-// Byte-level verification that Command_AttachCard's proto2 optional target
-// fields stay UNSET when we build an "Unattach" — i.e. the client omits
-// them entirely rather than sending sentinel values. Desktop's server-side
-// `has_target_player_id()` / `has_target_zone()` / `has_target_card_id()`
-// drives the unattach branch; if any target field gets serialized, the
-// server treats it as a re-attach instead of an unattach.
-//
-// See the M6 Unattach deferrable in webclient/plans/gameboard-deferrables.md.
-
-import { create, isFieldSet, toBinary, fromBinary } from '@bufbuild/protobuf';
-import { Command_AttachCardSchema } from '@app/generated';
-
-describe('Command_AttachCard proto2 presence (Unattach invariant)', () => {
-  it('omitting target fields leaves them unset on the in-memory message', () => {
-    const msg = create(Command_AttachCardSchema, {
-      startZone: 'table',
-      cardId: 10,
-    });
-
-    expect(isFieldSet(msg, Command_AttachCardSchema.field.startZone)).toBe(true);
-    expect(isFieldSet(msg, Command_AttachCardSchema.field.cardId)).toBe(true);
-    expect(isFieldSet(msg, Command_AttachCardSchema.field.targetPlayerId)).toBe(false);
-    expect(isFieldSet(msg, Command_AttachCardSchema.field.targetZone)).toBe(false);
-    expect(isFieldSet(msg, Command_AttachCardSchema.field.targetCardId)).toBe(false);
-  });
-
-  it('omitting target fields omits them from the serialized bytes', () => {
-    const msg = create(Command_AttachCardSchema, {
-      startZone: 'table',
-      cardId: 10,
-    });
-
-    const bytes = toBinary(Command_AttachCardSchema, msg);
-    // Round-trip to confirm the wire format also reports the fields unset.
-    const parsed = fromBinary(Command_AttachCardSchema, bytes);
-
-    expect(isFieldSet(parsed, Command_AttachCardSchema.field.targetPlayerId)).toBe(false);
-    expect(isFieldSet(parsed, Command_AttachCardSchema.field.targetZone)).toBe(false);
-    expect(isFieldSet(parsed, Command_AttachCardSchema.field.targetCardId)).toBe(false);
-  });
-
-  it('passing an explicit targetPlayerId DOES set presence (so "attach" paths still work)', () => {
-    const msg = create(Command_AttachCardSchema, {
-      startZone: 'table',
-      cardId: 10,
-      targetPlayerId: 5,
-      targetZone: 'table',
-      targetCardId: 99,
-    });
-
-    const bytes = toBinary(Command_AttachCardSchema, msg);
-    const parsed = fromBinary(Command_AttachCardSchema, bytes);
-
-    expect(isFieldSet(parsed, Command_AttachCardSchema.field.targetPlayerId)).toBe(true);
-    expect(isFieldSet(parsed, Command_AttachCardSchema.field.targetZone)).toBe(true);
-    expect(isFieldSet(parsed, Command_AttachCardSchema.field.targetCardId)).toBe(true);
-    expect(parsed.targetPlayerId).toBe(5);
-  });
-
-  it('setting a target field to its default -1 still records presence (presence != default)', () => {
-    // This is the trap the deferrable warned about: proto2 `optional` with a
-    // default of -1 treats an explicit `-1` as "field set with value -1",
-    // which the server interprets as "attach to slot -1" rather than unattach.
-    // Clients must OMIT the field entirely to unattach.
-    const msg = create(Command_AttachCardSchema, {
-      startZone: 'table',
-      cardId: 10,
-      targetPlayerId: -1,
-    });
-
-    expect(isFieldSet(msg, Command_AttachCardSchema.field.targetPlayerId)).toBe(true);
-  });
-});
diff --git a/webclient/src/websocket/commands/room/joinGame.ts b/webclient/src/websocket/commands/room/joinGame.ts
index c9d25811d..a19721746 100644
--- a/webclient/src/websocket/commands/room/joinGame.ts
+++ b/webclient/src/websocket/commands/room/joinGame.ts
@@ -1,47 +1,13 @@
 import { create } from '@bufbuild/protobuf';
 import { WebClient } from '../../WebClient';
 
-import { Command_JoinGame_ext, Command_JoinGameSchema, Response_ResponseCode } from '@app/generated';
+import { Command_JoinGame_ext, Command_JoinGameSchema } from '@app/generated';
 import type { JoinGameParams } from '@app/generated';
 
-// Desktop message strings from cockatrice/src/interface/widgets/server/game_selector.cpp:234-260
-// (GameSelector::checkResponse). Codes not listed here (e.g. RespContextError) intentionally
-// fall through to the desktop's `default:;` — silent to the user.
-const ERROR_MESSAGES: Record<number, string> = {
-  [Response_ResponseCode.RespNotInRoom]: 'Please join the appropriate room first.',
-  [Response_ResponseCode.RespNameNotFound]: 'The game does not exist any more.',
-  [Response_ResponseCode.RespGameFull]: 'The game is already full.',
-  [Response_ResponseCode.RespWrongPassword]: 'Wrong password.',
-  [Response_ResponseCode.RespSpectatorsNotAllowed]: 'Spectators are not allowed in this game.',
-  [Response_ResponseCode.RespOnlyBuddies]: 'This game is only open to its creator\'s buddies.',
-  [Response_ResponseCode.RespUserLevelTooLow]: 'This game is only open to registered users.',
-  [Response_ResponseCode.RespInIgnoreList]: 'You are being ignored by the creator of this game.',
-};
-
 export function joinGame(roomId: number, joinGameParams: JoinGameParams): void {
-  const response = WebClient.instance.response.room;
-  response.setJoinGamePending(true);
-
-  const onResponseCode: { [code: number]: () => void } = {
-    // Match desktop default:; — acknowledge silently, no user dialog.
-    [Response_ResponseCode.RespContextError]: () => response.setJoinGamePending(false),
-  };
-  for (const codeStr of Object.keys(ERROR_MESSAGES)) {
-    const code = Number(codeStr);
-    onResponseCode[code] = () => response.setJoinGameError(code, ERROR_MESSAGES[code]);
-  }
-
-  WebClient.instance.protobuf.sendRoomCommand(
-    roomId,
-    Command_JoinGame_ext,
-    create(Command_JoinGameSchema, joinGameParams),
-    {
-      onSuccess: () => {
-        response.setJoinGamePending(false);
-        response.joinedGame(roomId, joinGameParams.gameId);
-      },
-      onResponseCode,
-      onError: () => response.setJoinGamePending(false),
+  WebClient.instance.protobuf.sendRoomCommand(roomId, Command_JoinGame_ext, create(Command_JoinGameSchema, joinGameParams), {
+    onSuccess: () => {
+      WebClient.instance.response.room.joinedGame(roomId, joinGameParams.gameId);
     },
-  );
+  });
 }
diff --git a/webclient/src/websocket/commands/room/roomCommands.spec.ts b/webclient/src/websocket/commands/room/roomCommands.spec.ts
index e0c37a31a..b748030a6 100644
--- a/webclient/src/websocket/commands/room/roomCommands.spec.ts
+++ b/webclient/src/websocket/commands/room/roomCommands.spec.ts
@@ -9,7 +9,6 @@ import {
   Command_JoinGameSchema,
   Command_LeaveRoom_ext,
   Command_RoomSay_ext,
-  Response_ResponseCode,
 } from '@app/generated';
 
 import { createGame } from './createGame';
@@ -19,7 +18,7 @@ import { roomSay } from './roomSay';
 import { create } from '@bufbuild/protobuf';
 import { Mock } from 'vitest';
 
-const { invokeOnSuccess, invokeResponseCode, invokeOnError } = makeCallbackHelpers(
+const { invokeOnSuccess } = makeCallbackHelpers(
   WebClient.instance.protobuf.sendRoomCommand as Mock,
   // sendRoomCommand(roomId, ext, value, options) — options at index 3
   3
@@ -42,11 +41,6 @@ describe('createGame', () => {
 });
 
 describe('joinGame', () => {
-  beforeEach(() => {
-    (WebClient.instance.response.room.joinedGame as Mock).mockClear();
-    (WebClient.instance.response.room.setJoinGamePending as Mock).mockClear();
-    (WebClient.instance.response.room.setJoinGameError as Mock).mockClear();
-  });
 
   it('calls sendRoomCommand with Command_JoinGame', () => {
     joinGame(7, create(Command_JoinGameSchema, { gameId: 42, password: '' }));
@@ -55,54 +49,11 @@ describe('joinGame', () => {
     );
   });
 
-  it('dispatches setJoinGamePending(true) before sending', () => {
-    joinGame(7, create(Command_JoinGameSchema, { gameId: 42 }));
-    expect(WebClient.instance.response.room.setJoinGamePending).toHaveBeenCalledWith(true);
-  });
-
-  it('onSuccess clears pending and calls response.room.joinedGame with roomId and gameId', () => {
+  it('onSuccess calls response.room.joinedGame with roomId and gameId', () => {
     joinGame(7, create(Command_JoinGameSchema, { gameId: 42 }));
     invokeOnSuccess();
-    expect(WebClient.instance.response.room.setJoinGamePending).toHaveBeenLastCalledWith(false);
     expect(WebClient.instance.response.room.joinedGame).toHaveBeenCalledWith(7, 42);
   });
-
-  // Desktop GameSelector::checkResponse — matching message strings from
-  // cockatrice/src/interface/widgets/server/game_selector.cpp:234-260.
-  const errorCases: Array<[number, string]> = [
-    [Response_ResponseCode.RespNotInRoom, 'Please join the appropriate room first.'],
-    [Response_ResponseCode.RespNameNotFound, 'The game does not exist any more.'],
-    [Response_ResponseCode.RespGameFull, 'The game is already full.'],
-    [Response_ResponseCode.RespWrongPassword, 'Wrong password.'],
-    [Response_ResponseCode.RespSpectatorsNotAllowed, 'Spectators are not allowed in this game.'],
-    [Response_ResponseCode.RespOnlyBuddies, 'This game is only open to its creator\'s buddies.'],
-    [Response_ResponseCode.RespUserLevelTooLow, 'This game is only open to registered users.'],
-    [Response_ResponseCode.RespInIgnoreList, 'You are being ignored by the creator of this game.'],
-  ];
-
-  it.each(errorCases)('code %i dispatches setJoinGameError with desktop-matching message', (code, message) => {
-    joinGame(7, create(Command_JoinGameSchema, { gameId: 42 }));
-    invokeResponseCode(code);
-    expect(WebClient.instance.response.room.setJoinGameError).toHaveBeenCalledWith(code, message);
-    expect(WebClient.instance.response.room.joinedGame).not.toHaveBeenCalled();
-  });
-
-  it('code 11 (RespContextError) is silent — clears pending, no setJoinGameError, no console.error', () => {
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
-    joinGame(7, create(Command_JoinGameSchema, { gameId: 42 }));
-    invokeResponseCode(Response_ResponseCode.RespContextError);
-    expect(WebClient.instance.response.room.setJoinGameError).not.toHaveBeenCalled();
-    expect(WebClient.instance.response.room.setJoinGamePending).toHaveBeenLastCalledWith(false);
-    expect(consoleError).not.toHaveBeenCalled();
-    consoleError.mockRestore();
-  });
-
-  it('unknown response code goes to onError — clears pending, no setJoinGameError', () => {
-    joinGame(7, create(Command_JoinGameSchema, { gameId: 42 }));
-    invokeOnError(99);
-    expect(WebClient.instance.response.room.setJoinGameError).not.toHaveBeenCalled();
-    expect(WebClient.instance.response.room.setJoinGamePending).toHaveBeenLastCalledWith(false);
-  });
 });
 
 describe('leaveRoom', () => {
diff --git a/webclient/src/websocket/commands/session/listRooms.ts b/webclient/src/websocket/commands/session/listRooms.ts
index cfbcc7cb7..25b0837f3 100644
--- a/webclient/src/websocket/commands/session/listRooms.ts
+++ b/webclient/src/websocket/commands/session/listRooms.ts
@@ -1,6 +1,5 @@
 import { create } from '@bufbuild/protobuf';
 import { WebClient } from '../../WebClient';
-
 import { Command_ListRooms_ext, Command_ListRoomsSchema } from '@app/generated';
 
 export function listRooms(): void {
diff --git a/webclient/src/websocket/commands/session/message.ts b/webclient/src/websocket/commands/session/message.ts
index bdb4ac759..94afefc46 100644
--- a/webclient/src/websocket/commands/session/message.ts
+++ b/webclient/src/websocket/commands/session/message.ts
@@ -1,6 +1,5 @@
 import { create } from '@bufbuild/protobuf';
 import { WebClient } from '../../WebClient';
-
 import { Command_Message_ext, Command_MessageSchema } from '@app/generated';
 
 export function message(userName: string, message: string): void {
diff --git a/webclient/src/websocket/commands/session/ping.ts b/webclient/src/websocket/commands/session/ping.ts
index 7ad16482f..fab3c9272 100644
--- a/webclient/src/websocket/commands/session/ping.ts
+++ b/webclient/src/websocket/commands/session/ping.ts
@@ -1,11 +1,8 @@
 import { create } from '@bufbuild/protobuf';
 import { WebClient } from '../../WebClient';
-
 import { Command_Ping_ext, Command_PingSchema } from '@app/generated';
 
 export function ping(pingReceived: () => void): void {
-  // Uses `onResponse` (not `onSuccess`) so KeepAliveService treats any server
-  // reply as proof of life, independent of responseCode.
   WebClient.instance.protobuf.sendSessionCommand(Command_Ping_ext, create(Command_PingSchema), {
     onResponse: () => pingReceived(),
   });
diff --git a/webclient/src/websocket/commands/session/replaySubmitCode.ts b/webclient/src/websocket/commands/session/replaySubmitCode.ts
index 22ef418bc..aa0e403e0 100644
--- a/webclient/src/websocket/commands/session/replaySubmitCode.ts
+++ b/webclient/src/websocket/commands/session/replaySubmitCode.ts
@@ -4,15 +4,15 @@ import { Command_ReplaySubmitCode_ext, Command_ReplaySubmitCodeSchema } from '@a
 
 export function replaySubmitCode(
   replayCode: string,
-  onSubmitted?: () => void,
-  onFailure?: (responseCode: number) => void,
+  onSuccess?: () => void,
+  onError?: (responseCode: number) => void,
 ): void {
   WebClient.instance.protobuf.sendSessionCommand(
     Command_ReplaySubmitCode_ext,
     create(Command_ReplaySubmitCodeSchema, { replayCode }),
     {
-      onSuccess: onSubmitted,
-      onError: onFailure,
+      onSuccess,
+      onError,
     }
   );
 }
diff --git a/webclient/src/websocket/commands/session/sessionCommands-simple.spec.ts b/webclient/src/websocket/commands/session/sessionCommands-simple.spec.ts
index 486526fbd..289ca227a 100644
--- a/webclient/src/websocket/commands/session/sessionCommands-simple.spec.ts
+++ b/webclient/src/websocket/commands/session/sessionCommands-simple.spec.ts
@@ -468,18 +468,18 @@ describe('replaySubmitCode', () => {
     );
   });
 
-  it('forwards onSubmitted callback', () => {
-    const onSubmitted = vi.fn();
-    replaySubmitCode('42-abc123', onSubmitted);
+  it('forwards onSuccess callback', () => {
+    const onSuccess = vi.fn();
+    replaySubmitCode('42-abc123', onSuccess);
     invokeOnSuccess();
-    expect(onSubmitted).toHaveBeenCalled();
+    expect(onSuccess).toHaveBeenCalled();
   });
 
-  it('forwards onFailure callback', () => {
-    const onFailure = vi.fn();
-    replaySubmitCode('42-abc123', undefined, onFailure);
+  it('forwards onError callback', () => {
+    const onError = vi.fn();
+    replaySubmitCode('42-abc123', undefined, onError);
     invokeCallback('onError', 404);
-    expect(onFailure).toHaveBeenCalledWith(404);
+    expect(onError).toHaveBeenCalledWith(404);
   });
 });
 
diff --git a/webclient/src/websocket/events/common/commonEvents.spec.ts b/webclient/src/websocket/events/common/commonEvents.spec.ts
new file mode 100644
index 000000000..cdfaa86dc
--- /dev/null
+++ b/webclient/src/websocket/events/common/commonEvents.spec.ts
@@ -0,0 +1,7 @@
+import { CommonEvents } from './index';
+
+describe('CommonEvents', () => {
+  it('is an empty event map (all common events were moved to game/session events)', () => {
+    expect(CommonEvents).toEqual([]);
+  });
+});
diff --git a/webclient/src/websocket/events/common/index.ts b/webclient/src/websocket/events/common/index.ts
new file mode 100644
index 000000000..cda3024f3
--- /dev/null
+++ b/webclient/src/websocket/events/common/index.ts
@@ -0,0 +1,3 @@
+import type { SessionExtensionRegistry } from '../session';
+
+export const CommonEvents: SessionExtensionRegistry = [];
diff --git a/webclient/src/websocket/events/common/playerPropertiesChanged.ts b/webclient/src/websocket/events/common/playerPropertiesChanged.ts
new file mode 100644
index 000000000..ff2527fd5
--- /dev/null
+++ b/webclient/src/websocket/events/common/playerPropertiesChanged.ts
@@ -0,0 +1,3 @@
+// Event_PlayerPropertiesChanged is handled as a game event in websocket/events/game/playerPropertiesChanged.ts
+// This file is retained for reference but is no longer registered in CommonEvents.
+export {};
diff --git a/webclient/src/websocket/events/game/gameClosed.ts b/webclient/src/websocket/events/game/gameClosed.ts
index ad9d6cf5c..40168cf0d 100644
--- a/webclient/src/websocket/events/game/gameClosed.ts
+++ b/webclient/src/websocket/events/game/gameClosed.ts
@@ -1,8 +1,6 @@
-import type { Event_GameClosed } from '@app/generated';
-
 import type { GameEventMeta } from '../../types/WebSocketConfig';
 import { WebClient } from '../../WebClient';
 
-export function gameClosed(_data: Event_GameClosed, meta: GameEventMeta): void {
+export function gameClosed(_data: {}, meta: GameEventMeta): void {
   WebClient.instance.response.game.gameClosed(meta.gameId);
 }
diff --git a/webclient/src/websocket/events/game/gameHostChanged.ts b/webclient/src/websocket/events/game/gameHostChanged.ts
index b1321cedd..da89fc34d 100644
--- a/webclient/src/websocket/events/game/gameHostChanged.ts
+++ b/webclient/src/websocket/events/game/gameHostChanged.ts
@@ -1,5 +1,3 @@
-import type { Event_GameHostChanged } from '@app/generated';
-
 import type { GameEventMeta } from '../../types/WebSocketConfig';
 import { WebClient } from '../../WebClient';
 
@@ -7,6 +5,6 @@ import { WebClient } from '../../WebClient';
  * Event_GameHostChanged carries no payload fields.
  * The new host is identified by GameEvent.player_id (meta.playerId).
  */
-export function gameHostChanged(_data: Event_GameHostChanged, meta: GameEventMeta): void {
+export function gameHostChanged(_data: {}, meta: GameEventMeta): void {
   WebClient.instance.response.game.gameHostChanged(meta.gameId, meta.playerId);
 }
diff --git a/webclient/src/websocket/events/game/kicked.ts b/webclient/src/websocket/events/game/kicked.ts
index 4a6a8c455..ba7db0674 100644
--- a/webclient/src/websocket/events/game/kicked.ts
+++ b/webclient/src/websocket/events/game/kicked.ts
@@ -1,8 +1,6 @@
-import type { Event_Kicked } from '@app/generated';
-
 import type { GameEventMeta } from '../../types/WebSocketConfig';
 import { WebClient } from '../../WebClient';
 
-export function kicked(_data: Event_Kicked, meta: GameEventMeta): void {
+export function kicked(_data: {}, meta: GameEventMeta): void {
   WebClient.instance.response.game.kicked(meta.gameId);
 }
diff --git a/webclient/src/websocket/events/game/leaveGame.ts b/webclient/src/websocket/events/game/leaveGame.ts
index 94a84e843..738a34ce7 100644
--- a/webclient/src/websocket/events/game/leaveGame.ts
+++ b/webclient/src/websocket/events/game/leaveGame.ts
@@ -1,8 +1,6 @@
-import type { Event_Leave } from '@app/generated';
-
 import type { GameEventMeta } from '../../types/WebSocketConfig';
 import { WebClient } from '../../WebClient';
 
-export function leaveGame(data: Event_Leave, meta: GameEventMeta): void {
+export function leaveGame(data: { reason: number }, meta: GameEventMeta): void {
   WebClient.instance.response.game.playerLeft(meta.gameId, meta.playerId, data.reason ?? 1);
 }
diff --git a/webclient/src/websocket/events/room/index.ts b/webclient/src/websocket/events/room/index.ts
index 0456ea783..2b27954d2 100644
--- a/webclient/src/websocket/events/room/index.ts
+++ b/webclient/src/websocket/events/room/index.ts
@@ -14,8 +14,8 @@ import {
 import { joinRoom } from './joinRoom';
 import { leaveRoom } from './leaveRoom';
 import { listGames } from './listGames';
-import { removeMessages } from './removeMessages';
 import { roomSay } from './roomSay';
+import { removeMessages } from './removeMessages';
 
 type RoomRegistryEntry<V = unknown> = RegistryEntry<V, RoomEvent, RoomEvent>;
 export type RoomExtensionRegistry = RoomRegistryEntry[];
diff --git a/webclient/src/websocket/events/session/index.ts b/webclient/src/websocket/events/session/index.ts
index 7df1c46df..847ea3246 100644
--- a/webclient/src/websocket/events/session/index.ts
+++ b/webclient/src/websocket/events/session/index.ts
@@ -22,7 +22,6 @@ import {
 
 import { addToList } from './addToList';
 import { connectionClosed } from './connectionClosed';
-import { gameJoined } from './gameJoined';
 import { listRooms } from './listRooms';
 import { notifyUser } from './notifyUser';
 import { removeFromList } from './removeFromList';
@@ -34,6 +33,7 @@ import { serverShutdown } from './serverShutdown';
 import { userJoined } from './userJoined';
 import { userLeft } from './userLeft';
 import { userMessage } from './userMessage';
+import { gameJoined } from './gameJoined';
 
 type SessionRegistryEntry<V = unknown> = RegistryEntry<V, SessionEvent>;
 export type SessionExtensionRegistry = SessionRegistryEntry[];
diff --git a/webclient/src/websocket/events/session/serverIdentification.ts b/webclient/src/websocket/events/session/serverIdentification.ts
index 84a21522a..57e999032 100644
--- a/webclient/src/websocket/events/session/serverIdentification.ts
+++ b/webclient/src/websocket/events/session/serverIdentification.ts
@@ -32,12 +32,7 @@ export function serverIdentification(info: Event_ServerIdentification): void {
       SessionCommands.updateStatus(StatusEnum.LOGGING_IN, 'Logging In...');
       if (getPasswordSalt) {
         SessionCommands.requestPasswordSalt(rest,
-          // Empty salt means the server advertised SupportsPasswordHash but
-          // can't actually produce one. Treat it as effectively unsupported —
-          // fall through to a plain-password login rather than failing.
-          (salt) => salt
-            ? SessionCommands.login(rest, password, salt)
-            : SessionCommands.login(rest, password),
+          (salt) => SessionCommands.login(rest, password, salt),
           () => {
             response.session.loginFailed(); SessionCommands.disconnect();
           },
diff --git a/webclient/src/websocket/events/session/session-login-flow.integration.spec.ts b/webclient/src/websocket/events/session/session-login-flow.integration.spec.ts
deleted file mode 100644
index ead48704a..000000000
--- a/webclient/src/websocket/events/session/session-login-flow.integration.spec.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-// Integration coverage of the full login chain through the real session
-// event handler + real session commands. Exercises:
-//   serverIdentification(info)
-//     → requestPasswordSalt (real)
-//       → login (real)
-//         → WebClient.instance.response.session.loginSuccessful(...)
-//
-// Only the transport (sendSessionCommand), the connection-state shim, and the
-// password-hash bitmask helper are mocked — everything in between is the
-// production code path. This triangulates the "loginSuccessful payload is
-// empty" symptom reported in plans/when-the-login-quirky-crane.md.
-
-vi.mock('../../WebClient');
-
-vi.mock('../../config', () => ({
-  CLIENT_CONFIG: { clientver: 'test-client', clientfeatures: [] },
-  CLIENT_OPTIONS: { autojoinrooms: false, keepalive: 5000 },
-  PROTOCOL_VERSION: 14,
-}));
-
-vi.mock('../../utils/connectionState', () => ({
-  consumePendingOptions: vi.fn().mockReturnValue(null),
-}));
-
-// Only the bitmask check is mocked; hashPassword stays real so the test
-// asserts against a genuinely computed hash (not a sentinel string).
-vi.mock('../../utils', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('../../utils')>()),
-  passwordSaltSupported: vi.fn().mockReturnValue(0),
-}));
-
-import { create } from '@bufbuild/protobuf';
-import { Mock } from 'vitest';
-import { Event_ServerIdentificationSchema } from '@app/generated';
-
-import { WebClient } from '../../WebClient';
-import { consumePendingOptions } from '../../utils/connectionState';
-import { passwordSaltSupported, hashPassword } from '../../utils';
-import { WebSocketConnectReason } from '../../types/ConnectOptions';
-import { makeCallbackHelpers } from '../../__mocks__/callbackHelpers';
-import { serverIdentification } from './serverIdentification';
-
-const { invokeOnSuccess } = makeCallbackHelpers(
-  WebClient.instance.protobuf.sendSessionCommand as Mock,
-  2,
-);
-
-const makeLoginOptions = () => ({
-  host: 'h',
-  port: '1',
-  userName: 'alice',
-  password: 'mypass',
-  reason: WebSocketConnectReason.LOGIN as const,
-});
-
-const makeInfo = (overrides: Record<string, unknown> = {}) =>
-  create(Event_ServerIdentificationSchema, {
-    serverName: 'TestServer',
-    serverVersion: '1.0',
-    protocolVersion: 14,
-    serverOptions: 1,
-    ...overrides,
-  });
-
-beforeEach(() => {
-  (WebClient.instance.protobuf.sendSessionCommand as Mock).mockClear();
-  (WebClient.instance.response.session.loginSuccessful as Mock).mockClear();
-  (WebClient.instance.response.session.loginFailed as Mock).mockClear();
-  (WebClient.instance.response.session.updateStatus as Mock).mockClear();
-  (consumePendingOptions as Mock).mockReset();
-  (passwordSaltSupported as Mock).mockReset();
-});
-
-describe('integration: fresh login on a hashed-password server', () => {
-  it('loginSuccessful carries a non-empty hashedPassword matching hashPassword(salt, password)', () => {
-    (consumePendingOptions as Mock).mockReturnValue(makeLoginOptions());
-    (passwordSaltSupported as Mock).mockReturnValue(1);
-
-    // 1. Server identifies with the hashed-password bit set.
-    serverIdentification(makeInfo({ serverOptions: 1 }));
-
-    // 2. RequestPasswordSalt command was sent; resolve it with a salt.
-    invokeOnSuccess({ passwordSalt: 'xyz' });
-
-    // 3. Login command was sent; resolve it with a minimal success response.
-    invokeOnSuccess({ buddyList: [], ignoreList: [], userInfo: { name: 'alice' } });
-
-    // 4. The response layer must receive the SAME hash the client computed.
-    const expected = hashPassword('xyz', 'mypass');
-    expect(WebClient.instance.response.session.loginSuccessful).toHaveBeenCalledTimes(1);
-    expect(WebClient.instance.response.session.loginSuccessful).toHaveBeenCalledWith({
-      hashedPassword: expected,
-    });
-    expect(expected.length).toBeGreaterThan(16);
-  });
-
-  it('Command_Login carries hashedPassword and no plaintext password value', () => {
-    (consumePendingOptions as Mock).mockReturnValue(makeLoginOptions());
-    (passwordSaltSupported as Mock).mockReturnValue(1);
-
-    serverIdentification(makeInfo({ serverOptions: 1 }));
-    invokeOnSuccess({ passwordSalt: 'xyz' });
-
-    // Second sendSessionCommand call is the Command_Login. Protobuf always
-    // materializes the `password` field (proto-default ""), so we assert on
-    // the VALUE, not the presence: hashedPassword holds the real hash and
-    // plaintext password is empty.
-    const calls = (WebClient.instance.protobuf.sendSessionCommand as Mock).mock.calls;
-    const loginPayload = calls[1]?.[1];
-    expect(loginPayload.hashedPassword).toBe(hashPassword('xyz', 'mypass'));
-    expect(loginPayload.password).toBe('');
-  });
-});
-
-describe('integration: server returns empty passwordSalt (effectively unsupported)', () => {
-  it('falls back to a plain-password Command_Login', () => {
-    (consumePendingOptions as Mock).mockReturnValue(makeLoginOptions());
-    (passwordSaltSupported as Mock).mockReturnValue(1);
-
-    serverIdentification(makeInfo({ serverOptions: 1 }));
-    // Server's Response_PasswordSalt has the proto default "" — simulate that.
-    invokeOnSuccess({ passwordSalt: '' });
-
-    const calls = (WebClient.instance.protobuf.sendSessionCommand as Mock).mock.calls;
-    // Two commands: RequestPasswordSalt, then the fallback plain Command_Login.
-    expect(calls.length).toBeGreaterThanOrEqual(2);
-    const loginPayload = calls[1][1];
-    expect(loginPayload.password).toBe('mypass');
-    expect(loginPayload.hashedPassword).toBe('');
-  });
-
-  it('does not surface as a login failure', () => {
-    (consumePendingOptions as Mock).mockReturnValue(makeLoginOptions());
-    (passwordSaltSupported as Mock).mockReturnValue(1);
-
-    serverIdentification(makeInfo({ serverOptions: 1 }));
-    invokeOnSuccess({ passwordSalt: '' });
-
-    // Missing salt is treated as "unsupported", not a failure — the client
-    // should let the plain login proceed without dispatching loginFailed.
-    expect(WebClient.instance.response.session.loginFailed).not.toHaveBeenCalled();
-  });
-});
diff --git a/webclient/src/websocket/services/KeepAliveService.ts b/webclient/src/websocket/services/KeepAliveService.ts
index 7eb38ea18..03f42d2a1 100644
--- a/webclient/src/websocket/services/KeepAliveService.ts
+++ b/webclient/src/websocket/services/KeepAliveService.ts
@@ -20,7 +20,7 @@ export class KeepAliveService {
         this.disconnected$.next();
       }
 
-      // stop the ping loop if we're disconnected
+      // stop the ping loop if we"re disconnected
       if (!this.isOpen()) {
         this.endPingLoop();
         return;
diff --git a/webclient/src/websocket/services/ProtobufService.ts b/webclient/src/websocket/services/ProtobufService.ts
index be5e24fa6..086c9cf41 100644
--- a/webclient/src/websocket/services/ProtobufService.ts
+++ b/webclient/src/websocket/services/ProtobufService.ts
@@ -224,4 +224,5 @@ export class ProtobufService {
       }
     }
   }
+
 }
diff --git a/webclient/src/websocket/services/WebSocketService.spec.ts b/webclient/src/websocket/services/WebSocketService.spec.ts
index 17f92f0fb..83f1d6dc1 100644
--- a/webclient/src/websocket/services/WebSocketService.spec.ts
+++ b/webclient/src/websocket/services/WebSocketService.spec.ts
@@ -7,7 +7,7 @@ vi.mock('../config', () => ({
 }));
 
 import { WebSocketService } from './WebSocketService';
-import type { WebSocketServiceConfig, ReconnectConfig } from './WebSocketService';
+import type { WebSocketServiceConfig } from './WebSocketService';
 import { KeepAliveService } from './KeepAliveService';
 import { StatusEnum } from '../types/StatusEnum';
 
@@ -204,21 +204,6 @@ describe('WebSocketService', () => {
       const data = new Uint8Array([1, 2, 3]);
       expect(() => service.send(data)).not.toThrow();
     });
-
-    it('skips send when readyState is not OPEN', () => {
-      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      const service = createConnectedService();
-      // CONNECTING
-      mockInstance.readyState = 0;
-      const data = new Uint8Array([1, 2, 3]);
-      service.send(data);
-      expect(mockInstance.send).not.toHaveBeenCalled();
-      expect(warnSpy).toHaveBeenCalledWith(
-        '[WebSocketService] send() skipped: socket not OPEN',
-        0,
-      );
-      warnSpy.mockRestore();
-    });
   });
 
   describe('checkReadyState', () => {
@@ -242,86 +227,4 @@ describe('WebSocketService', () => {
     });
   });
 
-  describe('connect (re-entry)', () => {
-    it('closes the prior socket when connect is called twice', () => {
-      const service = new WebSocketService(mockConfig);
-      service.connect({ host: 'h', port: '1' }, 'ws');
-      const firstInstance = mockInstance;
-      service.connect({ host: 'h', port: '2' }, 'ws');
-      expect(firstInstance.close).toHaveBeenCalled();
-    });
-  });
-
-  describe('reconnect', () => {
-    const reconnect: ReconnectConfig = {
-      maxAttempts: 3,
-      baseDelayMs: 100,
-      maxDelayMs: 1000,
-    };
-
-    function createReconnectService() {
-      const service = new WebSocketService({ ...mockConfig, reconnect });
-      service.connect({ host: 'h', port: '1' }, 'ws');
-      mockInstance.onopen();
-      return service;
-    }
-
-    it('emits RECONNECTING (not DISCONNECTED) on unexpected close when configured', () => {
-      createReconnectService();
-      mockOnStatusChange.mockClear();
-      mockInstance.onclose();
-      const statuses = mockOnStatusChange.mock.calls.map(c => c[0]);
-      expect(statuses).toContain(StatusEnum.RECONNECTING);
-      expect(statuses).not.toContain(StatusEnum.DISCONNECTED);
-    });
-
-    it('does not reconnect after explicit disconnect()', () => {
-      const service = createReconnectService();
-      mockOnStatusChange.mockClear();
-      service.disconnect();
-      // onclose fires with `intentionalDisconnect` already set; reconnect is
-      // suppressed and the status settles on DISCONNECTED.
-      mockInstance.onclose();
-      const statuses = mockOnStatusChange.mock.calls.map(c => c[0]);
-      expect(statuses).not.toContain(StatusEnum.RECONNECTING);
-      expect(statuses).toContain(StatusEnum.DISCONNECTED);
-    });
-
-    it('gives up after maxAttempts and emits DISCONNECTED', () => {
-      const { instances } = installMockWebSocket();
-      const service = new WebSocketService({ ...mockConfig, reconnect });
-      service.connect({ host: 'h', port: '1' }, 'ws');
-      // Flip hasEverOpened so reconnect is eligible, then drop.
-      instances[0].onopen();
-      mockOnStatusChange.mockClear();
-
-      // Walk through maxAttempts failed reconnects (each socket never opens,
-      // so the attempt counter keeps climbing). One final close after the
-      // counter hits max emits DISCONNECTED.
-      for (let i = 0; i <= reconnect.maxAttempts; i += 1) {
-        instances[i].onclose();
-        vi.advanceTimersByTime(reconnect.maxDelayMs);
-      }
-
-      const statuses = mockOnStatusChange.mock.calls.map(c => c[0]);
-      expect(statuses).toContain(StatusEnum.DISCONNECTED);
-      void service;
-    });
-
-    it('resets attempt counter on successful open', () => {
-      createReconnectService();
-      mockOnStatusChange.mockClear();
-      // simulate a drop, advance timer to trigger reconnect attempt
-      mockInstance.onclose();
-      vi.advanceTimersByTime(reconnect.maxDelayMs);
-      // manually open the new socket (simulated)
-      mockInstance.onopen();
-      mockOnStatusChange.mockClear();
-      // another drop — the description should start the attempt counter from 1 again
-      mockInstance.onclose();
-      const firstReconnect = mockOnStatusChange.mock.calls.find(c => c[0] === StatusEnum.RECONNECTING);
-      expect(firstReconnect?.[1]).toMatch(/attempt 1\//);
-    });
-  });
-
 });
diff --git a/webclient/src/websocket/services/WebSocketService.ts b/webclient/src/websocket/services/WebSocketService.ts
index 585abc7ca..b3e082c22 100644
--- a/webclient/src/websocket/services/WebSocketService.ts
+++ b/webclient/src/websocket/services/WebSocketService.ts
@@ -1,52 +1,26 @@
-import { Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 
 import { StatusEnum } from '../types/StatusEnum';
 import { KeepAliveService } from './KeepAliveService';
 import { CLIENT_OPTIONS } from '../config';
 import type { ConnectTarget } from '../types/WebClientConfig';
-import { buildWebSocketUrl } from '../utils/buildWebSocketUrl';
-
-export interface ReconnectConfig {
-  maxAttempts: number;
-  baseDelayMs: number;
-  maxDelayMs: number;
-}
 
 export interface WebSocketServiceConfig {
   keepAliveFn: (pingReceived: () => void) => void;
   onStatusChange: (status: StatusEnum, description: string) => void;
   onConnectionFailed: () => void;
-  /** Opt-in automatic reconnect on unexpected socket close. */
-  reconnect?: ReconnectConfig;
 }
 
 export class WebSocketService {
-  private socket: WebSocket | null = null;
+  private socket: WebSocket;
 
   private config: WebSocketServiceConfig;
   private keepAliveService: KeepAliveService;
   private hasReportedError = false;
 
-  private readonly messageSubject = new Subject<MessageEvent>();
-  public readonly message$: Observable<MessageEvent> = this.messageSubject.asObservable();
+  public message$: Subject<MessageEvent> = new Subject();
 
-  private keepalive: number = CLIENT_OPTIONS.keepalive;
-
-  private lastTarget: ConnectTarget | null = null;
-  private lastProtocol: string | null = null;
-
-  private intentionalDisconnect = false;
-  /**
-   * True while `connect()` is cycling a prior socket out to bring a fresh one up.
-   * Suppresses the `DISCONNECTED` status emission the orphan socket's onclose
-   * would otherwise fire — that would clobber the `connectionAttempted()` we
-   * just dispatched at the WebClient layer.
-   */
-  private retiringForReconnect = false;
-  private reconnectAttempts = 0;
-  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-  /** Flips true on the first successful `onopen`. Gates reconnect — we never retry a connection that never established. */
-  private hasEverOpened = false;
+  private keepalive: number;
 
   constructor(config: WebSocketServiceConfig) {
     this.config = config;
@@ -63,30 +37,16 @@ export class WebSocketService {
       protocol = 'ws';
     }
 
-    // Retire any prior socket cleanly. The `retiringForReconnect` flag both
-    // suppresses reconnect scheduling for the orphan socket AND suppresses the
-    // DISCONNECTED status emission that would otherwise reset
-    // `connectionAttemptMade` set by the caller a moment ago.
-    this.retiringForReconnect = true;
-    this.clearReconnectTimer();
-    this.closeActiveSocket();
-    this.retiringForReconnect = false;
-
-    this.lastTarget = target;
-    this.lastProtocol = protocol;
-    this.intentionalDisconnect = false;
-    this.reconnectAttempts = 0;
-    this.hasEverOpened = false;
+    const { host, port } = target;
     this.keepalive = CLIENT_OPTIONS.keepalive;
 
-    const { host, port } = target;
-    this.socket = this.createWebSocket(buildWebSocketUrl(protocol as 'ws' | 'wss', host, port));
+    this.socket = this.createWebSocket(`${protocol}://${host}:${port}`);
   }
 
   public disconnect(): void {
-    this.intentionalDisconnect = true;
-    this.clearReconnectTimer();
-    this.closeActiveSocket();
+    if (this.socket) {
+      this.socket.close();
+    }
   }
 
   public checkReadyState(state: number): boolean {
@@ -97,13 +57,7 @@ export class WebSocketService {
     if (!this.socket) {
       return;
     }
-    if (this.socket.readyState !== WebSocket.OPEN) {
-      // Match desktop's TCP-queued semantics conservatively: drop with a warn rather
-      // than throw. Upstream code treats send as fire-and-forget under these states.
-      console.warn('[WebSocketService] send() skipped: socket not OPEN', this.socket.readyState);
-      return;
-    }
-    this.socket.send(message as BufferSource);
+    this.socket.send(message as unknown as ArrayBufferView);
   }
 
   private createWebSocket(url: string): WebSocket {
@@ -111,13 +65,10 @@ export class WebSocketService {
     socket.binaryType = 'arraybuffer';
 
     const connectionTimer = setTimeout(() => socket.close(), this.keepalive);
-    const clearConnectionTimer = (): void => clearTimeout(connectionTimer);
 
     socket.onopen = () => {
-      this.hasEverOpened = true;
-      clearConnectionTimer();
+      clearTimeout(connectionTimer);
       this.hasReportedError = false;
-      this.reconnectAttempts = 0;
       this.config.onStatusChange(StatusEnum.CONNECTED, 'Connected');
 
       this.keepAliveService.startPingLoop(this.keepalive, (pingReceived: () => void) => {
@@ -126,103 +77,26 @@ export class WebSocketService {
     };
 
     socket.onclose = () => {
-      clearConnectionTimer();
-      this.keepAliveService.endPingLoop();
-
-      if (this.shouldAttemptReconnect()) {
-        this.scheduleReconnect();
-        return;
-      }
-
-      // Orphan socket retired by a fresh connect() call — the new socket is
-      // already being wired up; don't fire a DISCONNECTED status that would
-      // race the just-dispatched connectionAttempted.
-      if (this.retiringForReconnect) {
-        this.hasReportedError = false;
-        return;
-      }
-
       // @critical onerror + onclose both fire on failed connects; don't overwrite the richer error status.
       // See .github/instructions/webclient.instructions.md#websocket-lifecycle.
       if (!this.hasReportedError) {
         this.config.onStatusChange(StatusEnum.DISCONNECTED, 'Connection Closed');
       }
       this.hasReportedError = false;
+      this.keepAliveService.endPingLoop();
     };
 
     socket.onerror = () => {
-      clearConnectionTimer();
       this.hasReportedError = true;
       this.config.onStatusChange(StatusEnum.DISCONNECTED, 'Connection Failed');
       this.config.onConnectionFailed();
     };
 
     socket.onmessage = (event: MessageEvent) => {
-      this.messageSubject.next(event);
-    };
+      this.message$.next(event);
+    }
 
     return socket;
   }
 
-  private shouldAttemptReconnect(): boolean {
-    if (this.intentionalDisconnect) {
-      return false;
-    }
-    if (this.retiringForReconnect) {
-      return false;
-    }
-    // Suppress reconnect when the connection never established — onerror already
-    // reported DISCONNECTED and we don't want to thrash against a dead endpoint.
-    if (this.hasReportedError) {
-      return false;
-    }
-    // Only retry once we have proof the endpoint was reachable at least once.
-    // The initial connect path falls through to DISCONNECTED on failure.
-    if (!this.hasEverOpened) {
-      return false;
-    }
-    const cfg = this.config.reconnect;
-    if (!cfg || cfg.maxAttempts <= 0) {
-      return false;
-    }
-    return this.reconnectAttempts < cfg.maxAttempts;
-  }
-
-  private scheduleReconnect(): void {
-    const cfg = this.config.reconnect!;
-    const attempt = this.reconnectAttempts;
-    const delay = Math.min(cfg.baseDelayMs * Math.pow(2, attempt), cfg.maxDelayMs);
-    this.reconnectAttempts += 1;
-
-    this.config.onStatusChange(
-      StatusEnum.RECONNECTING,
-      `Reconnecting (attempt ${this.reconnectAttempts}/${cfg.maxAttempts})`,
-    );
-
-    this.reconnectTimer = setTimeout(() => {
-      this.reconnectTimer = null;
-      if (this.intentionalDisconnect || !this.lastTarget || !this.lastProtocol) {
-        return;
-      }
-      const { host, port } = this.lastTarget;
-      this.socket = this.createWebSocket(
-        buildWebSocketUrl(this.lastProtocol as 'ws' | 'wss', host, port),
-      );
-    }, delay);
-  }
-
-  private clearReconnectTimer(): void {
-    if (this.reconnectTimer !== null) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
-    }
-  }
-
-  private closeActiveSocket(): void {
-    if (this.socket) {
-      this.socket.close();
-      this.socket = null;
-    }
-  }
-
 }
diff --git a/webclient/src/websocket/types/StatusEnum.ts b/webclient/src/websocket/types/StatusEnum.ts
index 1ae319a27..179bdf675 100644
--- a/webclient/src/websocket/types/StatusEnum.ts
+++ b/webclient/src/websocket/types/StatusEnum.ts
@@ -4,8 +4,5 @@ export enum StatusEnum {
   CONNECTED,
   LOGGING_IN,
   LOGGED_IN,
-  /** Separated from sequential states to reserve room for future connection phases. */
-  RECONNECTING = 50,
-  /** High sentinel value — marks the terminal "tearing down" state that must not collide with future states added above. */
-  DISCONNECTING = 99,
+  DISCONNECTING = 99
 }
diff --git a/webclient/src/websocket/types/WebClientRequest.ts b/webclient/src/websocket/types/WebClientRequest.ts
index 533346f97..5caf83fda 100644
--- a/webclient/src/websocket/types/WebClientRequest.ts
+++ b/webclient/src/websocket/types/WebClientRequest.ts
@@ -34,8 +34,6 @@ import type {
   MulliganParams,
   RollDieParams,
   GameCommand,
-  CreateGameParams,
-  JoinGameParams,
 } from '@app/generated';
 
 import type { ConnectTarget } from './WebClientConfig';
@@ -86,8 +84,6 @@ export interface IRoomsRequest {
   joinRoom(roomId: number): void;
   leaveRoom(roomId: number): void;
   roomSay(roomId: number, message: string): void;
-  createGame(roomId: number, params: CreateGameParams): void;
-  joinGame(roomId: number, params: JoinGameParams): void;
 }
 
 export interface IAdminRequest {
@@ -107,13 +103,9 @@ export interface IModeratorRequest {
     clientid?: string,
     removeMessages?: number
   ): void;
-  forceActivateUser(usernameToActivate: string, moderatorName: string): void;
-  getAdminNotes(userName: string): void;
   getBanHistory(userName: string): void;
   getWarnHistory(userName: string): void;
   getWarnList(modName: string, userName: string, userClientid: string): void;
-  grantReplayAccess(replayId: number, moderatorName: string): void;
-  updateAdminNotes(userName: string, notes: string): void;
   viewLogHistory(filters: ViewLogHistoryParams): void;
   warnUser(userName: string, reason: string, clientid?: string, removeMessages?: number): void;
 }
diff --git a/webclient/src/websocket/types/WebClientResponse.ts b/webclient/src/websocket/types/WebClientResponse.ts
index 57638ba8d..05b74dbc6 100644
--- a/webclient/src/websocket/types/WebClientResponse.ts
+++ b/webclient/src/websocket/types/WebClientResponse.ts
@@ -55,7 +55,7 @@ export interface ISessionResponse {
   loginSuccessful(options: LoginSuccessContext): void;
   loginFailed(): void;
   connectionFailed(): void;
-  testConnectionSuccessful(supportsHashedPassword: boolean): void;
+  testConnectionSuccessful(): void;
   testConnectionFailed(): void;
   updateBuddyList(buddyList: ServerInfo_User[]): void;
   addToBuddyList(user: ServerInfo_User): void;
@@ -120,8 +120,6 @@ export interface IRoomResponse<T extends RoomEventMap = WebSocketRoomResponseOve
   removeMessages(roomId: number, name: string, amount: number): void;
   gameCreated(roomId: number): void;
   joinedGame(roomId: number, gameId: number): void;
-  setJoinGamePending(pending: boolean): void;
-  setJoinGameError(code: number, message: string): void;
 }
 
 export interface IGameResponse {
diff --git a/webclient/src/websocket/utils/index.ts b/webclient/src/websocket/utils/index.ts
index 3821f61c1..4147f4af8 100644
--- a/webclient/src/websocket/utils/index.ts
+++ b/webclient/src/websocket/utils/index.ts
@@ -1,4 +1,3 @@
-export * from './buildWebSocketUrl';
 export * from './guid.util';
 export * from './sanitizeHtml.util';
 export * from './passwordHasher';
diff --git a/webclient/src/websocket/utils/passwordHasher.spec.ts b/webclient/src/websocket/utils/passwordHasher.spec.ts
index 61840c68c..0d2a22142 100644
--- a/webclient/src/websocket/utils/passwordHasher.spec.ts
+++ b/webclient/src/websocket/utils/passwordHasher.spec.ts
@@ -1,6 +1,6 @@
 vi.mock('../../generated/proto/event_server_identification_pb', async (importOriginal) => ({
   ...(await importOriginal<typeof import('../../generated/proto/event_server_identification_pb')>()),
-  Event_ServerIdentification_ServerOptions: { SupportsPasswordHash: 1 },
+  Event_ServerIdentification_ServerOptions: { SupportsPasswordHash: 2 },
 }));
 
 import { hashPassword, generateSalt, passwordSaltSupported } from './passwordHasher';
@@ -40,19 +40,13 @@ describe('generateSalt', () => {
 });
 
 describe('passwordSaltSupported', () => {
-  it('returns false for NoOptions (0)', () => {
-    expect(passwordSaltSupported(0)).toBeFalsy();
+  it('returns non-zero when SupportsPasswordHash bit is set', () => {
+    // SupportsPasswordHash = 2 from mock; 2 & 2 = 2
+    expect(passwordSaltSupported(2)).toBeTruthy();
   });
 
-  it('returns true when the SupportsPasswordHash bit (1) is set', () => {
-    expect(passwordSaltSupported(1)).toBeTruthy();
-  });
-
-  it('returns false when an unrelated bit is set (2)', () => {
-    expect(passwordSaltSupported(2)).toBeFalsy();
-  });
-
-  it('returns true when bit 0 is set alongside other bits (3)', () => {
-    expect(passwordSaltSupported(3)).toBeTruthy();
+  it('returns zero when SupportsPasswordHash bit is not set', () => {
+    // 1 & 2 = 0
+    expect(passwordSaltSupported(1)).toBeFalsy();
   });
 });
diff --git a/webclient/src/websocket/utils/passwordHasher.ts b/webclient/src/websocket/utils/passwordHasher.ts
index baf1d3b3d..fdf8cb3ad 100644
--- a/webclient/src/websocket/utils/passwordHasher.ts
+++ b/webclient/src/websocket/utils/passwordHasher.ts
@@ -15,7 +15,7 @@ export const hashPassword = (salt: string, password: string): string => {
 };
 
 export const generateSalt = (): string => {
-  const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+  const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
 
   const bytes = new Uint8Array(SALT_LENGTH);
   crypto.getRandomValues(bytes);
@@ -26,9 +26,9 @@ export const generateSalt = (): string => {
   }
 
   return salt;
-};
+}
 
-export const passwordSaltSupported = (serverOptions: number): boolean => {
-  // Servatrice ServerOptions is a bitmask. See .github/instructions/webclient.instructions.md#protocol-quirks.
-  return (serverOptions & Event_ServerIdentification_ServerOptions.SupportsPasswordHash) !== 0;
-};
+export const passwordSaltSupported = (serverOptions: number): number => {
+  // @critical Servatrice ServerOptions is a bitmask. See .github/instructions/webclient.instructions.md#protocol-quirks.
+  return serverOptions & Event_ServerIdentification_ServerOptions.SupportsPasswordHash;
+}
diff --git a/webclient/src/websocket/utils/sanitizeHtml.util.ts b/webclient/src/websocket/utils/sanitizeHtml.util.ts
index ab5911daa..e5e240127 100644
--- a/webclient/src/websocket/utils/sanitizeHtml.util.ts
+++ b/webclient/src/websocket/utils/sanitizeHtml.util.ts
@@ -15,10 +15,6 @@ export function sanitizeHtml(msg: string): string {
   return DOMPurify.sanitize(msg, {
     ALLOWED_TAGS: ['br', 'a', 'img', 'center', 'b', 'font'],
     ALLOWED_ATTR: ['href', 'color', 'rel', 'target', 'src', 'alt'],
-    // Load-bearing: DOMPurify applies ALLOWED_URI_REGEXP to *every* attribute
-    // it isn't explicitly told is URI-safe. `color` values like "red" don't
-    // match the regex and would be stripped. This whitelists `color` out of
-    // URI validation. Removing it breaks the <font color="red"> sanitizer test.
     ADD_URI_SAFE_ATTR: ['color'],
     ALLOWED_URI_REGEXP: /^https?:/i,
   });
diff --git a/webclient/tsconfig.json b/webclient/tsconfig.json
index 43c7c79e0..b070278d5 100644
--- a/webclient/tsconfig.json
+++ b/webclient/tsconfig.json
@@ -34,7 +34,6 @@
       "@app/services": ["./src/services/index.ts"],
       "@app/store": ["./src/store/index.ts"],
       "@app/types": ["./src/types/index.ts"],
-      "@app/utils": ["./src/utils/index.ts"],
       "@app/websocket": ["./src/websocket/index.ts"],
       "@app/websocket/types": ["./src/websocket/types/index.ts"],
       "@app/generated": ["./src/generated/index.ts"]
diff --git a/webclient/vite.config.ts b/webclient/vite.config.ts
index f4b060360..225e64adc 100644
--- a/webclient/vite.config.ts
+++ b/webclient/vite.config.ts
@@ -1,53 +1,10 @@
-import { fileURLToPath } from 'node:url';
-import path from 'node:path';
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vitest/config';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const srcPath = (...segments: string[]) => path.resolve(__dirname, 'src', ...segments);
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [react()],
   resolve: {
-    alias: {
-      '@app/api': srcPath('api/index.ts'),
-      '@app/components': srcPath('components/index.ts'),
-      '@app/containers': srcPath('containers/index.ts'),
-      '@app/dialogs': srcPath('dialogs/index.ts'),
-      '@app/forms': srcPath('forms/index.ts'),
-      '@app/hooks': srcPath('hooks/index.ts'),
-      '@app/images': srcPath('images/index.ts'),
-      '@app/services': srcPath('services/index.ts'),
-      '@app/store': srcPath('store/index.ts'),
-      '@app/types': srcPath('types/index.ts'),
-      '@app/utils': srcPath('utils/index.ts'),
-      '@app/websocket/types': srcPath('websocket/types/index.ts'),
-      '@app/websocket': srcPath('websocket/index.ts'),
-      '@app/generated': srcPath('generated/index.ts'),
-    },
-  },
-  optimizeDeps: {
-    include: [
-      '@mui/material',
-      '@mui/material/styles',
-      '@mui/icons-material',
-      '@emotion/react',
-      '@emotion/styled',
-      '@dnd-kit/core',
-      '@dnd-kit/utilities',
-      '@reduxjs/toolkit',
-      'react-redux',
-      'react',
-      'react-dom',
-      'react-dom/client',
-      'react/jsx-runtime',
-      'react-router-dom',
-      'i18next',
-      'react-i18next',
-      '@testing-library/react',
-      '@testing-library/jest-dom/vitest',
-      '@bufbuild/protobuf',
-    ],
+    tsconfigPaths: true,
   },
   publicDir: 'public',
   build: {
@@ -64,11 +21,7 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: ['./src/setupTests.ts'],
     include: ['src/**/*.spec.{ts,tsx}'],
-    exclude: ['node_modules', 'build', 'integration', 'coverage'],
     isolate: true,
-    pool: 'threads',
-    maxWorkers: 4,
-    testTimeout: 10000,
     coverage: {
       provider: 'v8',
       reporter: ['text', 'html'],
diff --git a/webclient/vitest.integration.config.ts b/webclient/vitest.integration.config.ts
index 73ca1ec44..2ceabd4d8 100644
--- a/webclient/vitest.integration.config.ts
+++ b/webclient/vitest.integration.config.ts
@@ -1,21 +1,41 @@
+import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vitest/config';
-import viteConfig from './vite.config';
 
+// Integration tests exercise the full inbound/outbound webclient pipeline
+// (ProtobufService → event handlers → persistence → Redux) with only the
+// browser WebSocket constructor mocked. They live in `integration/` with
+// their own config so the include glob and longer testTimeout stay scoped
+// to this suite; both suites run `isolate: true`.
 export default defineConfig({
-  ...viteConfig,
+  plugins: [react()],
+  resolve: {
+    tsconfigPaths: true,
+  },
   test: {
-    ...viteConfig.test,
+    globals: true,
+    environment: 'jsdom',
     setupFiles: ['./integration/src/helpers/setup.ts'],
     include: ['integration/src/**/*.spec.{ts,tsx}'],
-    exclude: ['node_modules', 'build', 'coverage'],
+    // App-suite tests render the full Login container against real Dexie
+    // (fake-indexeddb) + real WebClient. Under CI/disk load the default
+    // 5s timeout is tight; 10s leaves headroom without masking real hangs.
+    testTimeout: 10000,
     coverage: {
-      ...viteConfig.test?.coverage,
+      provider: 'v8',
+      reporter: ['text', 'html'],
       reportsDirectory: './coverage/integration',
       include: [
         'src/websocket/**/*.{ts,tsx}',
         'src/store/**/*.{ts,tsx}',
         'src/api/**/*.{ts,tsx}',
       ],
+      exclude: [
+        'src/generated/**',
+        'src/**/*.spec.{ts,tsx}',
+        'src/**/__mocks__/**',
+        'src/setupTests.ts',
+        'src/polyfills.ts',
+      ],
     },
   },
 });