diff --git a/package.json b/package.json
index 1792a5057..d6c06194f 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "description": "Tools for music game tournaments and training",
   "engines": {
-    "node": "^18.16.0"
+    "node": "^18.15.0"
   },
   "scripts": {
     "start": "webpack serve --env dev=true",
@@ -45,10 +45,10 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
     "@types/better-sqlite3": "^7.6.0",
     "@types/fuzzy-search": "^2.1.0",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.11",
-    "autoprefixer": "^10.4.14",
-    "babel-loader": "^9.1.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^9.0.0",
     "better-sqlite3": "^8.0.0",
     "cacheable-lookup": "^7.0.0",
     "classnames": "^2.3.1",
@@ -72,17 +72,19 @@
     "json-schema-to-typescript": "^12.0.0",
     "jsonschema": "^1.4.1",
     "mini-css-extract-plugin": "^2.7.6",
+    "nanoid": "^4.0.0",
     "node-fetch": "^2.6.7",
     "normalize.css": "^8.0.1",
     "p-queue": "^6.0.0",
+    "peerjs": "^2.0.0-beta.3",
     "postcss": "^8.4.4",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.8.0",
     "query-string": "^6.13.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-feather": "^2.0.9",
-    "react-intl": "^6.3.0",
+    "react-intl": "^6.0.0",
     "react-refresh": "^0.14.0",
     "sanitize-filename": "^1.6.3",
     "simfile-parser": "^0.4.0",
@@ -95,14 +97,16 @@
     "webpack-sources": "^3.2.1",
     "xml2js": "^0.5.0",
     "zip-webpack-plugin": "^4.0.0",
-    "zustand": "^3.6.4"
+    "zustand": "^4.1.0"
   },
   "resolutions": {
     "loader-utils": "^2.0.0",
     "xml2js": "^0.5.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "@vercel/analytics": "^1.0.1",
+    "react-redux": "^8.0.5",
     "web-vitals": "^3.3.1"
   }
 }
diff --git a/src/app.css b/src/app.css
index b2e262316..2cbecbc51 100644
--- a/src/app.css
+++ b/src/app.css
@@ -14,6 +14,10 @@ body:global(.bp4-dark) {
   background-color: #222;
 }
 
+:global(.bp4-dark) :global(.bp4-navbar) {
+  box-shadow: none;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -38,7 +42,7 @@ input[type="number"],
 input[type="password"],
 input[type="search"],
 input[type="tel"],
-input[type="text"],
+input[type="text"]:not(:global(.bp4-editable-text-input)),
 input[type="time"],
 input[type="url"],
 input[type="week"],
diff --git a/src/assets/i18n.json b/src/assets/i18n.json
index 2a8c3cf31..6f8654473 100644
--- a/src/assets/i18n.json
+++ b/src/assets/i18n.json
@@ -86,7 +86,8 @@
       "ban": "Veto",
       "pocketPick": "Pocket Pick",
       "reset": "Reset",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "winner": "Pick Winner"
     },
     "noValidCharts": "No valid charts",
     "showSongPool": "Show eligible charts",
@@ -179,7 +180,8 @@
       "ban": "Veto",
       "pocketPick": "Pocket Pick",
       "reset": "Reset",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "winner": "Pick Winner"
     },
     "noValidCharts": "No valid charts",
     "showSongPool": "Show eligible charts",
diff --git a/src/card-draw.ts b/src/card-draw.ts
index 4d55d9c23..47b953365 100644
--- a/src/card-draw.ts
+++ b/src/card-draw.ts
@@ -1,9 +1,16 @@
+import { nanoid } from "nanoid";
 import { GameData, Song, Chart } from "./models/SongData";
 import { times } from "./utils";
-import { DrawnChart, Drawing } from "./models/Drawing";
+import { DrawnChart, EligibleChart, Drawing } from "./models/Drawing";
 import { ConfigState } from "./config-state";
-
-export function getDrawnChart(currentSong: Song, chart: Chart): DrawnChart {
+import { getDifficultyColor } from "./hooks/useDifficultyColor";
+import { getDiffAbbr } from "./game-data-utils";
+
+export function getDrawnChart(
+  gameData: GameData,
+  currentSong: Song,
+  chart: Chart
+): EligibleChart {
   return {
     name: currentSong.name,
     jacket: chart.jacket || currentSong.jacket,
@@ -11,18 +18,15 @@ export function getDrawnChart(currentSong: Song, chart: Chart): DrawnChart {
     artist: currentSong.artist,
     artistTranslation: currentSong.artist_translation,
     bpm: currentSong.bpm,
-    difficultyClass: chart.diffClass,
     level: chart.lvl,
     flags: (chart.flags || []).concat(currentSong.flags || []),
     song: currentSong,
+    // Fill in variant data per game
+    diffAbbr: getDiffAbbr(gameData, chart.diffClass),
+    diffColor: getDifficultyColor(gameData, chart.diffClass),
   };
 }
 
-/**
- * Used to give each drawing an auto-incrementing id
- */
-let drawingID = 0;
-
 /** returns true if song matches configured flags */
 export function songIsValid(
   config: ConfigState,
@@ -53,8 +57,8 @@ export function chartIsValid(
   );
 }
 
-export function* eligibleCharts(config: ConfigState, songs: Song[]) {
-  for (const currentSong of songs) {
+export function* eligibleCharts(config: ConfigState, gameData: GameData) {
+  for (const currentSong of gameData.songs) {
     if (!songIsValid(config, currentSong)) {
       continue;
     }
@@ -66,7 +70,7 @@ export function* eligibleCharts(config: ConfigState, songs: Song[]) {
       }
 
       // add chart to deck
-      yield getDrawnChart(currentSong, chart);
+      yield getDrawnChart(gameData, currentSong, chart);
     }
   }
 }
@@ -88,12 +92,12 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
     weights,
   } = configData;
 
-  const validCharts: Record<string, Array<DrawnChart>> = {};
+  const validCharts: Record<string, Array<EligibleChart>> = {};
   times(gameData.meta.lvlMax, (n) => {
     validCharts[n.toString()] = [];
   });
 
-  for (const chart of eligibleCharts(configData, gameData.songs)) {
+  for (const chart of eligibleCharts(configData, gameData)) {
     validCharts[chart.level].push(chart);
   }
 
@@ -159,10 +163,12 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
     const randomChart = selectableCharts[randomIndex];
 
     if (randomChart) {
-      // Give this random chart a unique id within this drawing
-      randomChart.id = drawnCharts.length;
       // Save it in our list of drawn charts
-      drawnCharts.push(randomChart);
+      drawnCharts.push({
+        ...randomChart,
+        // Give this random chart a unique id within this drawing
+        id: drawnCharts.length,
+      });
       // remove drawn chart from deck so it cannot be re-drawn
       selectableCharts.splice(randomIndex, 1);
       if (!difficultyCounts[chosenDifficulty]) {
@@ -184,12 +190,12 @@ export function draw(gameData: GameData, configData: ConfigState): Drawing {
     }
   }
 
-  drawingID += 1;
   return {
-    id: drawingID,
+    id: nanoid(10),
     charts: drawnCharts,
     bans: [],
     protects: [],
     pocketPicks: [],
+    winners: [],
   };
 }
diff --git a/src/config-state.tsx b/src/config-state.tsx
index 20314bb6b..e42ce36dc 100644
--- a/src/config-state.tsx
+++ b/src/config-state.tsx
@@ -1,4 +1,4 @@
-import createStore, { SetState } from "zustand";
+import createStore, { StoreApi } from "zustand";
 
 export interface ConfigState {
   chartCount: number;
@@ -6,6 +6,7 @@ export interface ConfigState {
   lowerBound: number;
   useWeights: boolean;
   orderByAction: boolean;
+  showVeto: boolean;
   weights: number[];
   forceDistribution: boolean;
   constrainPocketPicks: boolean;
@@ -13,7 +14,7 @@ export interface ConfigState {
   difficulties: ReadonlySet<string>;
   flags: ReadonlySet<string>;
   showPool: boolean;
-  update: SetState<ConfigState>;
+  update: StoreApi<ConfigState>["setState"];
 }
 
 export const useConfigState = createStore<ConfigState>((set, get) => ({
@@ -21,6 +22,7 @@ export const useConfigState = createStore<ConfigState>((set, get) => ({
   upperBound: 0,
   lowerBound: 0,
   useWeights: false,
+  showVeto: true,
   orderByAction: true,
   weights: [],
   forceDistribution: true,
diff --git a/src/controls/controls.css b/src/controls/controls.css
index c54d21aa4..419e47d28 100644
--- a/src/controls/controls.css
+++ b/src/controls/controls.css
@@ -1,15 +1,9 @@
-.form {
+.drawer {
   padding: 1em 1.5em;
   overflow-y: auto;
 }
 
-.form hr {
-  border-color: rgba(17, 20, 24, 0.8);
-  border-style: solid;
-  border-bottom-width: 0;
-}
-
-.form label {
+.drawer label {
   user-select: none;
 }
 
diff --git a/src/controls/index.tsx b/src/controls/index.tsx
index fd71d280b..f044b62fd 100644
--- a/src/controls/index.tsx
+++ b/src/controls/index.tsx
@@ -19,12 +19,19 @@ import {
   Switch,
   NavbarDivider,
   DrawerSize,
+  Divider,
+  Tabs,
+  Tab,
+  Icon,
 } from "@blueprintjs/core";
 import { Tooltip2 } from "@blueprintjs/popover2";
 import { IconNames } from "@blueprintjs/icons";
 import { useIsNarrow } from "../hooks/useMediaQuery";
-import { EligibleChartsListFilter } from "../eligible-charts-list";
+import { EligibleChartsListFilter } from "../eligible-charts/filter";
 import shallow from "zustand/shallow";
+import { TournamentModeToggle } from "../tournament-mode/tournament-mode-toggle";
+import { RemotePeerControls } from "../tournament-mode/remote-peer-menu";
+import { useRemotePeers } from "../tournament-mode/remote-peers";
 
 function getAvailableDifficulties(gameData: GameData, selectedStyle: string) {
   let s = new Set<string>();
@@ -100,10 +107,7 @@ export function HeaderControls() {
 
   function handleDraw() {
     useConfigState.setState({ showPool: false });
-    const couldDraw = drawSongs(useConfigState.getState());
-    if (couldDraw !== !lastDrawFailed) {
-      setLastDrawFailed(!couldDraw);
-    }
+    drawSongs(useConfigState.getState());
   }
 
   function openSettings() {
@@ -119,13 +123,10 @@ export function HeaderControls() {
         size={isNarrow ? DrawerSize.LARGE : "500px"}
         onClose={() => setSettingsOpen(false)}
         title={
-          <FormattedMessage
-            id="settings.title"
-            defaultMessage="Card Draw Options"
-          />
+          <FormattedMessage id="settings.title" defaultMessage="Settings" />
         }
       >
-        <Controls />
+        <ControlsDrawer />
       </Drawer>
       {!isNarrow && (
         <>
@@ -158,7 +159,28 @@ export function HeaderControls() {
   );
 }
 
-function Controls() {
+function ControlsDrawer() {
+  const isConnected = useRemotePeers((r) => !!r.thisPeer);
+  const hasPeers = useRemotePeers((r) => !!r.remotePeers.size);
+  return (
+    <div className={styles.drawer}>
+      <Tabs id="settings" large>
+        <Tab id="general" panel={<GeneralSettings />}>
+          <Icon icon={IconNames.Settings} /> General
+        </Tab>
+        <Tab id="network" panel={<RemotePeerControls />}>
+          <Icon
+            icon={hasPeers ? IconNames.ThirdParty : IconNames.GlobeNetwork}
+            intent={isConnected ? "success" : "none"}
+          />{" "}
+          Networking
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}
+
+function GeneralSettings() {
   const { t } = useIntl();
   const [dataSetName, gameData] = useDrawState(
     (s) => [s.dataSetName, s.gameData],
@@ -169,6 +191,7 @@ function Controls() {
     useWeights,
     constrainPocketPicks,
     orderByAction,
+    showVeto,
     lowerBound,
     upperBound,
     update: updateState,
@@ -209,7 +232,7 @@ function Controls() {
   };
 
   return (
-    <form className={styles.form} onSubmit={(e) => e.preventDefault()}>
+    <>
       {isNarrow && (
         <>
           <FormGroup>
@@ -220,7 +243,7 @@ function Controls() {
               <EligibleChartsListFilter />
             </FormGroup>
           )}
-          <hr />
+          <Divider />
         </>
       )}
       <div className={isNarrow ? undefined : styles.inlineControls}>
@@ -358,6 +381,15 @@ function Controls() {
           }}
           label={t("orderByAction")}
         />
+        <Checkbox
+          id="showVeto"
+          checked={showVeto}
+          onChange={(e) => {
+            const next = !!e.currentTarget.checked;
+            updateState({ showVeto: next });
+          }}
+          label={t("showVeto", undefined, "Show vetoed charts")}
+        />
         <Checkbox
           id="constrainPocketPicks"
           checked={constrainPocketPicks}
@@ -367,6 +399,7 @@ function Controls() {
           }}
           label={t("constrainPocketPicks")}
         />
+        <TournamentModeToggle />
         <Checkbox
           id="weighted"
           checked={useWeights}
@@ -378,6 +411,6 @@ function Controls() {
         />
         {useWeights && <WeightsControls high={upperBound} low={lowerBound} />}
       </FormGroup>
-    </form>
+    </>
   );
 }
diff --git a/src/controls/input-button-pair.tsx b/src/controls/input-button-pair.tsx
new file mode 100644
index 000000000..c3177154f
--- /dev/null
+++ b/src/controls/input-button-pair.tsx
@@ -0,0 +1,40 @@
+import { ControlGroup, InputGroup, Button } from "@blueprintjs/core";
+import { InputHTMLAttributes, ReactNode, useRef } from "react";
+
+interface Props {
+  placeholder?: string;
+  value?: string;
+  rightElement?: JSX.Element;
+  disableInput?: boolean;
+  disableButton?: boolean;
+  /** called when the user clicks the button or presses the enter key */
+  onClick(value: string, element: HTMLInputElement): void;
+  buttonLabel: ReactNode;
+  enterKeyHint?: InputHTMLAttributes<unknown>["enterKeyHint"];
+}
+
+export function InputButtonPair(props: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleClick = () =>
+    props.onClick(inputRef.current!.value, inputRef.current!);
+  return (
+    <ControlGroup>
+      <InputGroup
+        readOnly={props.disableInput}
+        inputRef={inputRef}
+        placeholder={props.placeholder}
+        value={props.value}
+        rightElement={props.rightElement}
+        onKeyDown={(e) => {
+          if (e.code === "Enter") {
+            handleClick();
+          }
+        }}
+        enterKeyHint={props.enterKeyHint}
+      />
+      <Button disabled={props.disableButton} onClick={handleClick}>
+        {props.buttonLabel}
+      </Button>
+    </ControlGroup>
+  );
+}
diff --git a/src/draw-state.tsx b/src/draw-state.tsx
index a55ba868e..b3d9b4e73 100644
--- a/src/draw-state.tsx
+++ b/src/draw-state.tsx
@@ -12,8 +12,11 @@ import { IntlProvider } from "./intl-provider";
 import * as qs from "query-string";
 import createStore from "zustand";
 import shallow from "zustand/shallow";
+import { DataConnection } from "peerjs";
+import { initShareWithPeer } from "./zustand/shared-zustand";
 
 interface DrawState {
+  tournamentMode: boolean;
   gameData: GameData | null;
   fuzzySearch: FuzzySearch<Song> | null;
   drawings: Drawing[];
@@ -22,14 +25,20 @@ interface DrawState {
   loadGameData(dataSetName: string): Promise<GameData>;
   /** returns false if no songs could be drawn */
   drawSongs(config: ConfigState): boolean;
+  toggleTournamentMode(): void;
+  injectRemoteDrawing(d: Drawing, syncWithPeer?: DataConnection): void;
 }
 
 export const useDrawState = createStore<DrawState>((set, get) => ({
+  tournamentMode: true,
   gameData: null,
   fuzzySearch: null,
   drawings: [],
   dataSetName: "",
   lastDrawFailed: false,
+  toggleTournamentMode() {
+    set((prev) => ({ tournamentMode: !prev.tournamentMode }));
+  },
   async loadGameData(dataSetName: string) {
     const state = get();
     if (state.dataSetName === dataSetName && state.gameData) {
@@ -84,12 +93,32 @@ export const useDrawState = createStore<DrawState>((set, get) => ({
       return false;
     }
 
-    set((prevState) => ({
-      drawings: [drawing, ...prevState.drawings].filter(Boolean),
-      lastDrawFailed: false,
-    }));
+    set((prevState) => {
+      return {
+        drawings: [drawing, ...prevState.drawings].filter(Boolean),
+        lastDrawFailed: false,
+      };
+    });
     return true;
   },
+  injectRemoteDrawing(drawing, syncWithPeer) {
+    set((prevState) => {
+      const currentDrawing = prevState.drawings.find(
+        (d) => d.id === drawing.id
+      );
+      const newDrawings = prevState.drawings.filter((d) => d.id !== drawing.id);
+      newDrawings.unshift(drawing);
+      if (currentDrawing) {
+        drawing.__syncPeer = currentDrawing.__syncPeer;
+      }
+      if (syncWithPeer) {
+        drawing.__syncPeer = syncWithPeer;
+      }
+      return {
+        drawings: newDrawings,
+      };
+    });
+  },
 }));
 
 interface Props {
diff --git a/src/drawing-context.tsx b/src/drawing-context.tsx
new file mode 100644
index 000000000..65d3646a8
--- /dev/null
+++ b/src/drawing-context.tsx
@@ -0,0 +1,155 @@
+import { ReactNode } from "react";
+import { draw } from "./card-draw";
+import { useConfigState } from "./config-state";
+import { createContextualStore } from "./zustand/contextual-zustand";
+import { useDrawState } from "./draw-state";
+import {
+  Drawing,
+  EligibleChart,
+  PlayerActionOnChart,
+  PocketPick,
+} from "./models/Drawing";
+import { SerializibleStore } from "./zustand/shared-zustand";
+
+const stubDrawing: Drawing = {
+  id: "stub",
+  charts: [],
+  bans: [],
+  pocketPicks: [],
+  protects: [],
+  winners: [],
+};
+
+interface DrawingProviderProps {
+  initialDrawing: Drawing;
+  children?: ReactNode;
+}
+
+export interface DrawingContext extends Drawing, SerializibleStore<Drawing> {
+  updateDrawing: (d: Partial<Drawing>) => void;
+  redrawChart(chartId: number): void;
+  resetChart(chartId: number): void;
+  /**
+   * handles any of the protect/pocket-pick/ban actions a user may take on a drawn chart
+   * @param action type of action being performed
+   * @param chartId id of the chart being acted upon
+   * @param player the player acting on the chart, 1 or 2
+   * @param chart new chart being pocket picked, if this is a pocket pick action
+   */
+  handleBanProtectReplace(
+    action: "ban" | "protect" | "pocket",
+    chartId: number,
+    player: 1 | 2,
+    chart?: EligibleChart
+  ): void;
+  setWinner(chartId: number, p: 1 | 2 | null): void;
+}
+
+function keyFromAction(action: "ban" | "protect" | "pocket") {
+  switch (action) {
+    case "ban":
+      return "bans";
+    case "protect":
+      return "protects";
+    case "pocket":
+      return "pocketPicks";
+  }
+}
+
+const {
+  Provider: DrawingProvider,
+  useContextValue: useDrawing,
+  StoreIndex: allDrawingStores,
+  useStore: useDrawingStore,
+} = createContextualStore<DrawingContext, DrawingProviderProps>(
+  (props, set, get) => ({
+    ...props.initialDrawing,
+    updateDrawing: set,
+    resetChart(chartId) {
+      set((d) => ({
+        bans: d.bans.filter((p) => p.chartId !== chartId),
+        protects: d.protects.filter((p) => p.chartId !== chartId),
+        pocketPicks: d.pocketPicks.filter((p) => p.chartId !== chartId),
+        winners: d.pocketPicks.filter((p) => p.chartId !== chartId),
+      }));
+    },
+    redrawChart(chartId) {
+      const newChart = draw(useDrawState.getState().gameData!, {
+        ...useConfigState.getState(),
+        chartCount: 1,
+      }).charts[0];
+      set((d) => ({
+        charts: d.charts.map((chart) => {
+          if (chart.id === chartId) {
+            newChart.id = chartId;
+            return newChart;
+          }
+          return chart;
+        }),
+      }));
+    },
+    handleBanProtectReplace(action, chartId, player, newChart) {
+      const drawing = get();
+      const charts = drawing.charts.slice();
+      const key = keyFromAction(action);
+      const arr = drawing[key].slice() as PlayerActionOnChart[] | PocketPick[];
+
+      if (useConfigState.getState().orderByAction) {
+        const indexToCut = charts.findIndex((chart) => chart.id === chartId);
+        const [shiftedChart] = charts.splice(indexToCut, 1);
+        if (action === "ban") {
+          // insert at tail of list
+          const insertPoint = charts.length;
+          charts.splice(insertPoint, 0, shiftedChart);
+        } else {
+          // insert at head of list, behind other picks
+          const insertPoint =
+            drawing.protects.length + drawing.pocketPicks.length;
+          charts.splice(insertPoint, 0, shiftedChart);
+        }
+        set({
+          charts,
+        });
+      }
+
+      const existingIndex = arr.findIndex((b) => b.chartId === chartId);
+      if (existingIndex >= 0) {
+        arr.splice(existingIndex, 1);
+      } else {
+        arr.push({ player, pick: newChart!, chartId });
+      }
+      set({
+        [key]: arr,
+      });
+    },
+    serializeSyncFields() {
+      return Object.entries(get()).reduce((ret: Partial<Drawing>, [k, v]) => {
+        if (typeof v === "function") {
+          return ret;
+        }
+        if (k.startsWith("__")) {
+          return ret;
+        }
+        ret[k as keyof Drawing] = v;
+        return ret;
+      }, {}) as Drawing;
+    },
+    setWinner(chartId, player) {
+      const arr = get().winners.slice();
+      const existingIndex = arr.findIndex((b) => b.chartId === chartId);
+      if (existingIndex >= 0) {
+        arr.splice(existingIndex, 1);
+      }
+      if (player) {
+        arr.push({ player, chartId });
+      }
+      set({
+        winners: arr,
+      });
+    },
+  }),
+  (p) => p.initialDrawing.id,
+  { initialDrawing: stubDrawing }
+);
+
+export { useDrawing, DrawingProvider, allDrawingStores, useDrawingStore };
diff --git a/src/drawing-list.tsx b/src/drawing-list.tsx
index 19bd673e0..ae4859e2f 100644
--- a/src/drawing-list.tsx
+++ b/src/drawing-list.tsx
@@ -1,29 +1,34 @@
-import { memo } from "react";
-import { DrawnSet } from "./drawn-set";
+import { lazy, memo, useDeferredValue } from "react";
 import styles from "./drawing-list.css";
 import { useDrawState } from "./draw-state";
-import { Drawing } from "./models/Drawing";
 import { useConfigState } from "./config-state";
-import { EligibleChartsList } from "./eligible-charts-list";
 import { Callout, NonIdealState } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import logo from "./assets/ddr-tools-256.png";
 
-const renderDrawing = (drawing: Drawing) => (
-  <DrawnSet key={drawing.id} drawing={drawing} />
-);
+const EligibleChartsList = lazy(() => import("./eligible-charts"));
+const DrawnSet = lazy(() => import("./drawn-set"));
 
-const ScrollableDrawings = memo((props: { drawings: Drawing[] }) => {
-  return <div>{props.drawings.map(renderDrawing)}</div>;
+const ScrollableDrawings = memo(() => {
+  const drawings = useDeferredValue(useDrawState((s) => s.drawings));
+  return (
+    <div>
+      {drawings.map((d) => (
+        <DrawnSet key={d.id} drawing={d} />
+      ))}
+    </div>
+  );
 });
 
 export function DrawingList() {
-  const drawings = useDrawState((s) => s.drawings);
-  const showPool = useConfigState((cfg) => cfg.showPool);
+  const hasDrawings = useDeferredValue(
+    useDrawState((s) => !!s.drawings.length)
+  );
+  const showPool = useDeferredValue(useConfigState((cfg) => cfg.showPool));
   if (showPool) {
     return <EligibleChartsList />;
   }
-  if (!drawings.length) {
+  if (!hasDrawings) {
     return (
       <div className={styles.empty}>
         <NonIdealState
@@ -31,14 +36,14 @@ export function DrawingList() {
           title="DDR Tools"
           description="Click 'Draw' above to draw some songs at random. Chose from other games in the top left menu."
           action={
-            <Callout intent="primary" icon={IconNames.WRENCH}>
-              DDR Card Draw now has a new name and URL. Look for more new
-              features coming soon!
+            <Callout intent="primary" icon={IconNames.ThirdParty}>
+              Networking features now available! Start with the new tab in
+              settings.
             </Callout>
           }
         />
       </div>
     );
   }
-  return <ScrollableDrawings drawings={drawings} />;
+  return <ScrollableDrawings />;
 }
diff --git a/src/drawn-set.css b/src/drawn-set.css
index bb2f3e173..c9b7707c1 100644
--- a/src/drawn-set.css
+++ b/src/drawn-set.css
@@ -1,6 +1,20 @@
+:root {
+  --drawing-grad-saturation: 40%;
+  --drawing-grad-lightness: 85%;
+}
+
+body:global(.bp4-dark) {
+  --drawing-grad-saturation: 25%;
+  --drawing-grad-lightness: 15%;
+}
+
 .chartList {
   display: flex;
   padding: 10px;
   overflow: hidden;
   flex-wrap: wrap;
 }
+
+.drawing {
+  position: relative;
+}
diff --git a/src/drawn-set.tsx b/src/drawn-set.tsx
index 3494bdb42..096101f76 100644
--- a/src/drawn-set.tsx
+++ b/src/drawn-set.tsx
@@ -1,23 +1,18 @@
 import { memo, useState } from "react";
 import { SongCard } from "./song-card";
 import styles from "./drawn-set.css";
-import {
-  Drawing,
-  DrawnChart,
-  PlayerActionOnChart,
-  PocketPick,
-} from "./models/Drawing";
-import { useConfigState } from "./config-state";
-import { useForceUpdate } from "./hooks/useForceUpdate";
-import { draw } from "./card-draw";
-import { useDrawState } from "./draw-state";
+import { Drawing } from "./models/Drawing";
+import { SetLabels } from "./tournament-mode/drawing-labels";
+import { DrawingProvider, useDrawing } from "./drawing-context";
+import { NetworkingActions } from "./tournament-mode/networking-actions";
+import { SyncWithPeers } from "./tournament-mode/sync-with-peers";
 
 const HUE_STEP = (255 / 8) * 3;
 let hue = Math.floor(Math.random() * 255);
 
 function getRandomGradiant() {
   hue += HUE_STEP;
-  return `linear-gradient(hsl(${hue}, 40%, 80%), transparent, transparent)`;
+  return `linear-gradient(hsl(${hue}, var(--drawing-grad-saturation), var(--drawing-grad-lightness)), transparent, transparent)`;
 }
 
 interface Props {
@@ -25,117 +20,63 @@ interface Props {
 }
 
 function DrawnSetImpl({ drawing }: Props) {
-  const forceUpdate = useForceUpdate();
-  const gameData = useDrawState((s) => s.gameData);
   const [backgroundImage] = useState(getRandomGradiant());
 
-  function renderChart(chart: DrawnChart) {
-    const veto = drawing.bans.find((b) => b.chartId === chart.id);
-    const protect = drawing.protects.find((b) => b.chartId === chart.id);
-    const pocketPick = drawing.pocketPicks.find((b) => b.chartId === chart.id);
-    return (
-      <SongCard
-        key={chart.id}
-        iconCallbacks={{
-          onVeto: handleBanProtectReplace.bind(
-            undefined,
-            drawing.bans,
-            chart.id!
-          ),
-          onProtect: handleBanProtectReplace.bind(
-            undefined,
-            drawing.protects,
-            chart.id!
-          ),
-          onReplace: handleBanProtectReplace.bind(
-            undefined,
-            drawing.pocketPicks,
-            chart.id!
-          ),
-          onRedraw: handleRedraw.bind(undefined, chart.id!),
-          onReset: handleReset.bind(undefined, chart.id!),
-        }}
-        vetoedBy={veto && veto.player}
-        protectedBy={protect && protect.player}
-        replacedBy={pocketPick && pocketPick.player}
-        replacedWith={pocketPick && pocketPick.pick}
-        chart={chart}
-      />
-    );
-  }
-
-  /**
-   * handles any of the protect/pocket-pick/ban actions a user may take on a drawn chart
-   * @param arr array containing any previous actions of this type, to be mutated
-   * @param chartId id of the chart being acted upon
-   * @param player the player acting on the chart, 1 or 2
-   * @param chart new chart being pocket picked, if this is a pocket pick action
-   */
-  function handleBanProtectReplace(
-    arr: Array<PlayerActionOnChart> | Array<PocketPick>,
-    chartId: number,
-    player: 1 | 2,
-    chart?: DrawnChart
-  ) {
-    if (useConfigState.getState().orderByAction) {
-      const indexToCut = drawing.charts.findIndex(
-        (chart) => chart.id === chartId
-      );
-      const [shiftedChart] = drawing.charts.splice(indexToCut, 1);
-      if (arr === drawing.bans) {
-        // insert at tail of list
-        const insertPoint = drawing.charts.length;
-        drawing.charts.splice(insertPoint, 0, shiftedChart);
-      } else {
-        // insert at head of list, behind other picks
-        const insertPoint =
-          drawing.protects.length + drawing.pocketPicks.length;
-        drawing.charts.splice(insertPoint, 0, shiftedChart);
-      }
-    }
-
-    const existingBanIndex = arr.findIndex((b) => b.chartId === chart?.id);
-    if (existingBanIndex >= 0) {
-      arr.splice(existingBanIndex, 1);
-    } else {
-      arr.push({ player, pick: chart!, chartId });
-    }
-    forceUpdate();
-  }
+  return (
+    <DrawingProvider initialDrawing={drawing}>
+      <SyncWithPeers />
+      <div
+        key={drawing.id}
+        style={{ backgroundImage }}
+        className={styles.drawing}
+      >
+        <SetLabels />
+        <NetworkingActions />
+        <ChartList />
+      </div>
+    </DrawingProvider>
+  );
+}
 
-  function handleRedraw(chartId: number) {
-    const newDrawing = draw(gameData!, {
-      ...useConfigState.getState(),
-      chartCount: 1,
-    });
-    newDrawing.charts[0].id = chartId;
-    drawing.charts = drawing.charts.map((chart) => {
-      if (chart.id === chartId) {
-        return newDrawing.charts[0];
-      }
-      return chart;
-    });
-    forceUpdate();
-  }
+function ChartList() {
+  const charts = useDrawing((d) => d.charts);
+  return (
+    <div className={styles.chartList}>
+      {charts.map((c) => (
+        <ChartFromContext key={c.id} chartId={c.id} />
+      ))}
+    </div>
+  );
+}
 
-  function handleReset(chartId: number) {
-    drawing.bans = drawing.bans.filter((p) => p.chartId !== chartId);
-    drawing.protects = drawing.protects.filter((p) => p.chartId !== chartId);
-    drawing.pocketPicks = drawing.pocketPicks.filter(
-      (p) => p.chartId !== chartId
-    );
-    forceUpdate();
+function ChartFromContext({ chartId }: { chartId: number }) {
+  const chart = useDrawing((d) => d.charts.find((c) => c.id === chartId));
+  const veto = useDrawing((d) => d.bans.find((b) => b.chartId === chartId));
+  const protect = useDrawing((d) =>
+    d.protects.find((b) => b.chartId === chartId)
+  );
+  const pocketPick = useDrawing((d) =>
+    d.pocketPicks.find((b) => b.chartId === chartId)
+  );
+  const winner = useDrawing((d) =>
+    d.winners.find((b) => b.chartId === chartId)
+  );
+  if (!chart) {
+    return null;
   }
-
   return (
-    <div
-      key={drawing.id}
-      className={styles.chartList}
-      style={{ backgroundImage }}
-    >
-      {drawing.charts.map(renderChart)}
-    </div>
+    <SongCard
+      vetoedBy={veto?.player}
+      protectedBy={protect?.player}
+      replacedBy={pocketPick?.player}
+      replacedWith={pocketPick?.pick}
+      winner={winner?.player}
+      chart={chart}
+      actionsEnabled
+    />
   );
 }
 
-export const DrawnSet = memo(DrawnSetImpl);
+const DrawnSet = memo(DrawnSetImpl);
+
+export default DrawnSet;
diff --git a/src/eligible-charts-list.tsx b/src/eligible-charts-list.tsx
deleted file mode 100644
index 0c1f4dd40..000000000
--- a/src/eligible-charts-list.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { eligibleCharts } from "./card-draw";
-import { useConfigState } from "./config-state";
-import { useDrawState } from "./draw-state";
-import { SongCard } from "./song-card";
-import styles from "./drawing-list.css";
-import { DrawnChart } from "./models/Drawing";
-import {
-  HTMLSelect,
-  Navbar,
-  NavbarGroup,
-  NavbarDivider,
-  Spinner,
-} from "@blueprintjs/core";
-import { useIntl } from "./hooks/useIntl";
-import { useIsNarrow } from "./hooks/useMediaQuery";
-import { atom, useAtom } from "jotai";
-import { DiffHistogram } from "./histogram";
-
-function songKeyFromChart(chart: DrawnChart) {
-  return `${chart.name}:${chart.artist}`;
-}
-
-const currentTabAtom = atom("all");
-
-export function EligibleChartsListFilter() {
-  const { t } = useIntl();
-  const [currentTab, setCurrentTab] = useAtom(currentTabAtom);
-  const selectedFlags = Array.from(useConfigState((cfg) => cfg.flags));
-
-  if (!selectedFlags.length) {
-    return null;
-  }
-
-  selectedFlags.unshift("all");
-
-  return (
-    <HTMLSelect
-      value={currentTab}
-      onChange={(e) => setCurrentTab(e.currentTarget.value)}
-      options={Array.from(selectedFlags).map((flag) => ({
-        value: flag,
-        label: flag === "all" ? "All charts" : t(`meta.${flag}`),
-      }))}
-    />
-  );
-}
-
-export function EligibleChartsList() {
-  const [currentTab] = useAtom(currentTabAtom);
-  const gameData = useDrawState((s) => s.gameData);
-  const configState = useConfigState();
-  const isNarrow = useIsNarrow();
-  const isDisplayFiltered = currentTab !== "all";
-
-  if (!gameData) {
-    return <Spinner />;
-  }
-  let charts = Array.from(eligibleCharts(configState, gameData.songs));
-  const songs = new Set<string>();
-  const filteredCharts = charts.filter((chart) => {
-    songs.add(songKeyFromChart(chart));
-    if (isDisplayFiltered && chart.flags.every((f) => f !== currentTab)) {
-      return false;
-    }
-    return true;
-  });
-
-  return (
-    <>
-      <Navbar
-        style={{
-          position: "sticky",
-          top: "50px",
-        }}
-      >
-        <NavbarGroup>
-          {charts.length} eligible charts from {songs.size} songs (of{" "}
-          {gameData.songs.length} total)
-        </NavbarGroup>
-        {configState.flags.size > 0 && !isNarrow && (
-          <NavbarGroup>
-            <NavbarDivider />
-            <EligibleChartsListFilter />
-          </NavbarGroup>
-        )}
-      </Navbar>
-      <DiffHistogram charts={filteredCharts} />
-      <div className={styles.chartList}>
-        {filteredCharts.map((chart, idx) => (
-          <SongCard chart={chart} key={idx} />
-        ))}
-      </div>
-    </>
-  );
-}
diff --git a/src/eligible-charts/filter.tsx b/src/eligible-charts/filter.tsx
new file mode 100644
index 000000000..ca1a2ad5e
--- /dev/null
+++ b/src/eligible-charts/filter.tsx
@@ -0,0 +1,29 @@
+import { HTMLSelect } from "@blueprintjs/core";
+import { atom, useAtom } from "jotai";
+import { useConfigState } from "../config-state";
+import { useIntl } from "../hooks/useIntl";
+
+export const currentTabAtom = atom("all");
+
+export function EligibleChartsListFilter() {
+  const { t } = useIntl();
+  const [currentTab, setCurrentTab] = useAtom(currentTabAtom);
+  const selectedFlags = Array.from(useConfigState((cfg) => cfg.flags));
+
+  if (!selectedFlags.length) {
+    return null;
+  }
+
+  selectedFlags.unshift("all");
+
+  return (
+    <HTMLSelect
+      value={currentTab}
+      onChange={(e) => setCurrentTab(e.currentTarget.value)}
+      options={Array.from(selectedFlags).map((flag) => ({
+        value: flag,
+        label: flag === "all" ? "All charts" : t(`meta.${flag}`),
+      }))}
+    />
+  );
+}
diff --git a/src/histogram.tsx b/src/eligible-charts/histogram.tsx
similarity index 77%
rename from src/histogram.tsx
rename to src/eligible-charts/histogram.tsx
index 21ecd0392..f3dfcc35c 100644
--- a/src/histogram.tsx
+++ b/src/eligible-charts/histogram.tsx
@@ -1,4 +1,4 @@
-import { DrawnChart } from "./models/Drawing";
+import { EligibleChart } from "../models/Drawing";
 import {
   VictoryChart,
   VictoryBar,
@@ -8,15 +8,15 @@ import {
   VictoryLabel,
 } from "victory";
 import { useMemo } from "react";
-import { CountingSet } from "./utils";
-import { useDrawState } from "./draw-state";
-import { useIntl } from "./hooks/useIntl";
-import { getMetaString } from "./game-data-utils";
-import { Theme, useTheme } from "./theme-toggle";
-import { useIsNarrow } from "./hooks/useMediaQuery";
+import { CountingSet } from "../utils";
+import { useDrawState } from "../draw-state";
+import { useIntl } from "../hooks/useIntl";
+import { getDiffClass, getMetaString } from "../game-data-utils";
+import { Theme, useTheme } from "../theme-toggle";
+import { useIsNarrow } from "../hooks/useMediaQuery";
 
 interface Props {
-  charts: DrawnChart[];
+  charts: EligibleChart[];
 }
 
 export function DiffHistogram({ charts }: Props) {
@@ -29,15 +29,15 @@ export function DiffHistogram({ charts }: Props) {
     let maxBar = 0;
     const allLevels = new CountingSet<number>();
     for (const chart of charts) {
-      if (!countByClassAndLvl[chart.difficultyClass]) {
-        countByClassAndLvl[chart.difficultyClass] = new CountingSet();
+      if (!countByClassAndLvl[chart.diffAbbr]) {
+        countByClassAndLvl[chart.diffAbbr] = new CountingSet();
       }
-      countByClassAndLvl[chart.difficultyClass].add(chart.level);
+      countByClassAndLvl[chart.diffAbbr].add(chart.level);
       maxBar = Math.max(maxBar, allLevels.add(chart.level));
     }
     const orderedLevels = Array.from(allLevels.values()).sort((a, b) => a - b);
     const difficulties = allDiffs
-      .filter((d) => !!countByClassAndLvl[d.key])
+      .filter((d) => !!countByClassAndLvl[getDiffClass(t, d.key)])
       .reverse();
     const dataPerDiff = difficulties.map((diff) => ({
       color: diff.color,
@@ -45,7 +45,7 @@ export function DiffHistogram({ charts }: Props) {
       label: getMetaString(t, diff.key),
       data: orderedLevels.map((lvl) => ({
         level: lvl,
-        count: countByClassAndLvl[diff.key].get(lvl) || 0,
+        count: countByClassAndLvl[getDiffClass(t, diff.key)].get(lvl) || 0,
       })),
     }));
     return [
diff --git a/src/eligible-charts/index.tsx b/src/eligible-charts/index.tsx
new file mode 100644
index 000000000..4d6df2a09
--- /dev/null
+++ b/src/eligible-charts/index.tsx
@@ -0,0 +1,69 @@
+import { eligibleCharts } from "../card-draw";
+import { useConfigState } from "../config-state";
+import { useDrawState } from "../draw-state";
+import { SongCard } from "../song-card";
+import styles from "../drawing-list.css";
+import { EligibleChart } from "../models/Drawing";
+import { Navbar, NavbarGroup, NavbarDivider, Spinner } from "@blueprintjs/core";
+import { useIsNarrow } from "../hooks/useMediaQuery";
+import { useAtom } from "jotai";
+import { useDeferredValue, useMemo } from "react";
+import { currentTabAtom, EligibleChartsListFilter } from "./filter";
+import { DiffHistogram } from "./histogram";
+
+function songKeyFromChart(chart: EligibleChart) {
+  return `${chart.name}:${chart.artist}`;
+}
+
+export default function EligibleChartsList() {
+  const gameData = useDrawState((s) => s.gameData);
+  const [currentTab] = useDeferredValue(useAtom(currentTabAtom));
+  const configState = useDeferredValue(useConfigState());
+  const isNarrow = useIsNarrow();
+  const isDisplayFiltered = currentTab !== "all";
+
+  if (!gameData) {
+    return <Spinner />;
+  }
+  const charts = Array.from(eligibleCharts(configState, gameData));
+  const songs = new Set<string>();
+  const filteredCharts = useMemo(
+    () =>
+      charts.filter((chart) => {
+        songs.add(songKeyFromChart(chart));
+        if (isDisplayFiltered && chart.flags.every((f) => f !== currentTab)) {
+          return false;
+        }
+        return true;
+      }),
+    [currentTab, charts]
+  );
+
+  return (
+    <>
+      <Navbar
+        style={{
+          position: "sticky",
+          top: "50px",
+        }}
+      >
+        <NavbarGroup>
+          {charts.length} eligible charts from {songs.size} songs (of{" "}
+          {gameData.songs.length} total)
+        </NavbarGroup>
+        {configState.flags.size > 0 && !isNarrow && (
+          <NavbarGroup>
+            <NavbarDivider />
+            <EligibleChartsListFilter />
+          </NavbarGroup>
+        )}
+      </Navbar>
+      <DiffHistogram charts={filteredCharts} />
+      <div className={styles.chartList}>
+        {filteredCharts.map((chart, idx) => (
+          <SongCard chart={chart} key={idx} />
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/game-data-utils.tsx b/src/game-data-utils.tsx
index afa11710a..f82a496a4 100644
--- a/src/game-data-utils.tsx
+++ b/src/game-data-utils.tsx
@@ -1,4 +1,5 @@
 import { useIntl } from "./hooks/useIntl";
+import { GameData, I18NDict } from "./models/SongData";
 
 export function getMetaString(t: (key: string) => string, key: string) {
   return t("meta." + key);
@@ -21,3 +22,9 @@ export function AbbrDifficulty({ diffClass }: AbbrProps) {
   const { t } = useIntl();
   return <>{getDiffClass(t, diffClass)}</>;
 }
+
+export function getDiffAbbr(gameData: GameData, diffClass: string) {
+  return ((gameData.i18n.en as I18NDict)["$abbr"] as I18NDict)[
+    diffClass
+  ] as string;
+}
diff --git a/src/hooks/useDifficultyColor.ts b/src/hooks/useDifficultyColor.ts
index fc0b18724..4d46903cc 100644
--- a/src/hooks/useDifficultyColor.ts
+++ b/src/hooks/useDifficultyColor.ts
@@ -1,12 +1,14 @@
-import { useDrawState } from "../draw-state";
+import { GameData } from "../models/SongData";
 
 /**
  * Returns the CSS color specified in the game file metadata for a given difficulty
  */
-export function useDifficultyColor(difficultyClass: string): string {
-  const gameData = useDrawState((s) => s.gameData);
-  const diffAccentColor =
-    gameData?.meta.difficulties.find((d) => d.key === difficultyClass)?.color ||
-    "";
-  return diffAccentColor;
+export function getDifficultyColor(
+  gameData: GameData,
+  difficultyClass: string
+): string {
+  return (
+    gameData.meta.difficulties.find((d) => d.key === difficultyClass)?.color ||
+    ""
+  );
 }
diff --git a/src/hooks/useIntl.ts b/src/hooks/useIntl.ts
index f4fb0babe..17042a97c 100644
--- a/src/hooks/useIntl.ts
+++ b/src/hooks/useIntl.ts
@@ -7,8 +7,11 @@ export function useIntl() {
   const { formatMessage } = useReactIntl();
   return useMemo(
     () => ({
-      t: (id: string, values?: Record<string, Primitive>) =>
-        formatMessage({ id }, values),
+      t: (
+        id: string,
+        values?: Record<string, Primitive>,
+        defaultMessage?: string
+      ) => formatMessage({ id, defaultMessage }, values),
     }),
     [formatMessage]
   );
diff --git a/src/index.tsx b/src/index.tsx
index 5e86ab088..d4f3f0cd7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,11 @@
 import { App } from "./app";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import styles from "./app.css";
 const appRoot = document.createElement("main");
 document.body.prepend(appRoot);
 appRoot.className = styles.container;
-render(<App />, appRoot);
+const root = createRoot(appRoot);
+root.render(<App />);
 
 import("./vitals")
   .then((v) => v.webVitals())
diff --git a/src/models/Drawing.ts b/src/models/Drawing.ts
index 5935228b1..0cf9aa40d 100644
--- a/src/models/Drawing.ts
+++ b/src/models/Drawing.ts
@@ -1,17 +1,22 @@
+import { DataConnection } from "peerjs";
 import { Song } from "./SongData";
 
-export interface DrawnChart {
+export interface EligibleChart {
   name: string;
   jacket: string;
   nameTranslation?: string;
   artist: string;
   artistTranslation?: string;
   bpm: string;
-  difficultyClass: string;
+  diffAbbr: string;
+  diffColor: string;
   level: number;
   flags: string[];
   song: Song;
-  id?: number;
+}
+
+export interface DrawnChart extends EligibleChart {
+  id: number;
 }
 
 export interface PlayerActionOnChart {
@@ -20,13 +25,19 @@ export interface PlayerActionOnChart {
 }
 
 export interface PocketPick extends PlayerActionOnChart {
-  pick: DrawnChart;
+  pick: EligibleChart;
 }
 
 export interface Drawing {
-  id: number;
+  id: string;
+  title?: string;
+  player1?: string;
+  player2?: string;
   charts: DrawnChart[];
   bans: Array<PlayerActionOnChart>;
   protects: Array<PlayerActionOnChart>;
+  winners: Array<PlayerActionOnChart>;
   pocketPicks: Array<PocketPick>;
+  /** __ prefix avoids serializing this field during sync */
+  __syncPeer?: DataConnection;
 }
diff --git a/src/song-card/card-label.css b/src/song-card/card-label.css
index 5198dd136..633d48aae 100644
--- a/src/song-card/card-label.css
+++ b/src/song-card/card-label.css
@@ -6,6 +6,11 @@
   text-shadow: none;
 }
 
+.cardLabel.winner {
+  top: unset;
+  bottom: 2.5em;
+}
+
 .cardLabel > span {
   border: 2px solid white;
   border-radius: 0.5em;
diff --git a/src/song-card/card-label.tsx b/src/song-card/card-label.tsx
index 185270ca3..5d65b5660 100644
--- a/src/song-card/card-label.tsx
+++ b/src/song-card/card-label.tsx
@@ -1,12 +1,15 @@
+import classNames from "classnames";
 import React from "react";
 import { Intent, Tag } from "@blueprintjs/core";
 import styles from "./card-label.css";
 import { IconNames } from "@blueprintjs/icons";
+import { usePlayerLabel } from "./use-player-label";
 
 export enum LabelType {
   Protect = 1,
   Ban,
   Pocket,
+  Winner,
 }
 
 interface Props {
@@ -23,6 +26,8 @@ function getIntent(type: LabelType) {
       return Intent.DANGER;
     case LabelType.Protect:
       return Intent.SUCCESS;
+    case LabelType.Winner:
+      return Intent.WARNING;
   }
 }
 
@@ -34,19 +39,26 @@ function getIcon(type: LabelType) {
       return IconNames.BAN_CIRCLE;
     case LabelType.Protect:
       return IconNames.LOCK;
+    case LabelType.Winner:
+      return IconNames.Crown;
   }
 }
 
 export function CardLabel({ player, type, onRemove }: Props) {
+  const label = usePlayerLabel(player);
+
+  const rootClassname = classNames(styles.cardLabel, {
+    [styles.winner]: type === LabelType.Winner,
+  });
   return (
-    <div className={styles.cardLabel}>
+    <div className={rootClassname}>
       <Tag
         intent={getIntent(type)}
         icon={getIcon(type)}
         large
         onRemove={onRemove}
       >
-        P{player}
+        {label}
       </Tag>
     </div>
   );
diff --git a/src/song-card/icon-menu.tsx b/src/song-card/icon-menu.tsx
index b98ad0c7f..cc815314b 100644
--- a/src/song-card/icon-menu.tsx
+++ b/src/song-card/icon-menu.tsx
@@ -1,38 +1,57 @@
 import { useIntl } from "../hooks/useIntl";
 import { IconNames, IconName } from "@blueprintjs/icons";
 import { Menu, MenuItem, MenuDivider } from "@blueprintjs/core";
+import { usePlayerLabel } from "./use-player-label";
 
 interface Props {
-  onStartPocketPick: (p: 1 | 2) => void;
-  onVeto: (p: 1 | 2) => void;
-  onProtect: (p: 1 | 2) => void;
-  onRedraw: () => void;
+  onStartPocketPick?: (p: 1 | 2) => void;
+  onVeto?: (p: 1 | 2) => void;
+  onProtect?: (p: 1 | 2) => void;
+  onRedraw?: () => void;
+  onSetWinner?: (p: 1 | 2 | null) => void;
 }
 
 export function IconMenu(props: Props) {
-  const { onStartPocketPick, onVeto, onProtect, onRedraw } = props;
+  const { onStartPocketPick, onVeto, onProtect, onRedraw, onSetWinner } = props;
 
   const { t } = useIntl();
 
   return (
     <Menu>
-      <MenuPair
-        icon={IconNames.LOCK}
-        text={t("songAction.lock")}
-        onClick={onProtect}
-      />
-      <MenuPair
-        icon={IconNames.INHERITANCE}
-        text={t("songAction.pocketPick")}
-        onClick={onStartPocketPick}
-      />
-      <MenuPair
-        icon={IconNames.BAN_CIRCLE}
-        text={t("songAction.ban")}
-        onClick={onVeto}
-      />
-      <MenuDivider />
-      <MenuItem text="Redraw" icon={IconNames.REFRESH} onClick={onRedraw} />
+      {onProtect && (
+        <MenuPair
+          icon={IconNames.LOCK}
+          text={t("songAction.lock")}
+          onClick={onProtect}
+        />
+      )}
+      {onStartPocketPick && (
+        <MenuPair
+          icon={IconNames.INHERITANCE}
+          text={t("songAction.pocketPick")}
+          onClick={onStartPocketPick}
+        />
+      )}
+      {onVeto && (
+        <MenuPair
+          icon={IconNames.BAN_CIRCLE}
+          text={t("songAction.ban")}
+          onClick={onVeto}
+        />
+      )}
+      {onSetWinner && (
+        <MenuPair
+          icon={IconNames.CROWN}
+          text={t("songAction.winner")}
+          onClick={onSetWinner}
+        />
+      )}
+      {onRedraw && (
+        <>
+          <MenuDivider />
+          <MenuItem text="Redraw" icon={IconNames.REFRESH} onClick={onRedraw} />
+        </>
+      )}
     </Menu>
   );
 }
@@ -46,8 +65,16 @@ interface IconRowProps {
 function MenuPair({ icon, text, onClick }: IconRowProps) {
   return (
     <MenuItem icon={icon} text={text}>
-      <MenuItem text="P1" onClick={() => onClick(1)} icon={IconNames.PERSON} />
-      <MenuItem text="P2" onClick={() => onClick(2)} icon={IconNames.PERSON} />
+      <MenuItem
+        text={usePlayerLabel(1)}
+        onClick={() => onClick(1)}
+        icon={IconNames.PERSON}
+      />
+      <MenuItem
+        text={usePlayerLabel(2)}
+        onClick={() => onClick(2)}
+        icon={IconNames.PERSON}
+      />
     </MenuItem>
   );
 }
diff --git a/src/song-card/song-card.css b/src/song-card/song-card.css
index 3c3fc4995..f040356a0 100644
--- a/src/song-card/song-card.css
+++ b/src/song-card/song-card.css
@@ -119,3 +119,7 @@
   border-color: cornflowerblue;
   box-shadow: 0px 0px 5px cornflowerblue;
 }
+
+.hideVeto.vetoed {
+  display: none !important;
+}
diff --git a/src/song-card/song-card.tsx b/src/song-card/song-card.tsx
index cb9f2a145..98457ef12 100644
--- a/src/song-card/song-card.tsx
+++ b/src/song-card/song-card.tsx
@@ -1,15 +1,16 @@
 import classNames from "classnames";
 import { detectedLanguage } from "../utils";
 import styles from "./song-card.css";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { IconMenu } from "./icon-menu";
 import { CardLabel, LabelType } from "./card-label";
-import { DrawnChart } from "../models/Drawing";
-import { AbbrDifficulty } from "../game-data-utils";
-import { useDifficultyColor } from "../hooks/useDifficultyColor";
+import { DrawnChart, EligibleChart } from "../models/Drawing";
 import { ShockBadge } from "./shock-badge";
 import { Popover2 } from "@blueprintjs/popover2";
 import { SongSearch } from "../song-search";
+import shallow from "zustand/shallow";
+import { useDrawing } from "../drawing-context";
+import { useConfigState } from "../config-state";
 
 const isJapanese = detectedLanguage === "ja";
 
@@ -18,18 +19,44 @@ type Player = 1 | 2;
 interface IconCallbacks {
   onVeto: (p: Player) => void;
   onProtect: (p: Player) => void;
-  onReplace: (p: Player, chart: DrawnChart) => void;
+  onReplace: (p: Player, chart: EligibleChart) => void;
   onRedraw: () => void;
   onReset: () => void;
+  onSetWinner: (p: Player | null) => void;
 }
 
 interface Props {
-  chart: DrawnChart;
+  chart: DrawnChart | EligibleChart;
   vetoedBy?: Player;
   protectedBy?: Player;
   replacedBy?: Player;
-  replacedWith?: DrawnChart;
-  iconCallbacks?: IconCallbacks;
+  winner?: Player;
+  replacedWith?: EligibleChart;
+  actionsEnabled?: boolean;
+}
+
+function useIconCallbacksForChart(chartId: number): IconCallbacks {
+  const [handleBanPickPocket, redrawChart, resetChart, setWinner] = useDrawing(
+    (d) => [
+      d.handleBanProtectReplace,
+      d.redrawChart,
+      d.resetChart,
+      d.setWinner,
+    ],
+    shallow
+  );
+
+  return useMemo(
+    () => ({
+      onVeto: handleBanPickPocket.bind(undefined, "ban", chartId),
+      onProtect: handleBanPickPocket.bind(undefined, "protect", chartId),
+      onReplace: handleBanPickPocket.bind(undefined, "pocket", chartId),
+      onRedraw: redrawChart.bind(undefined, chartId),
+      onReset: resetChart.bind(undefined, chartId),
+      onSetWinner: setWinner.bind(undefined, chartId),
+    }),
+    [handleBanPickPocket, redrawChart, resetChart, chartId]
+  );
 }
 
 export function SongCard(props: Props) {
@@ -39,14 +66,18 @@ export function SongCard(props: Props) {
     protectedBy,
     replacedBy,
     replacedWith,
-    iconCallbacks,
+    winner,
+    actionsEnabled,
   } = props;
+  const showVeto = useConfigState((s) => s.showVeto);
 
-  const [showingIconMenu, setShowIconMenu] = useState(false);
-  const showIcons = () => setShowIconMenu(true);
-  const hideIcons = () => setShowIconMenu(false);
+  const [showingContextMenu, setContextMenuOpen] = useState(false);
+  const showMenu = () => setContextMenuOpen(true);
+  const hideMenu = () => setContextMenuOpen(false);
 
-  const [pocketPickForPlayer, setPocketPickForPlayer] = useState<0 | 1 | 2>(0);
+  const [pocketPickPendingForPlayer, setPocketPickPendingForPlayer] = useState<
+    0 | 1 | 2
+  >(0);
 
   const {
     name,
@@ -54,22 +85,15 @@ export function SongCard(props: Props) {
     artist,
     artistTranslation,
     bpm,
-    difficultyClass,
+    diffAbbr,
+    diffColor,
     level,
     jacket,
     flags,
   } = replacedWith || chart;
-  const diffAccentColor = useDifficultyColor(difficultyClass);
 
   const hasLabel = !!(vetoedBy || protectedBy || replacedBy);
 
-  const rootClassname = classNames(styles.chart, {
-    [styles.vetoed]: vetoedBy,
-    [styles.protected]: protectedBy,
-    [styles.replaced]: replacedBy,
-    [styles.clickable]: !!iconCallbacks && !hasLabel,
-  });
-
   let jacketBg = {};
   if (jacket) {
     jacketBg = {
@@ -77,36 +101,51 @@ export function SongCard(props: Props) {
     };
   }
 
+  let iconCallbacks = useIconCallbacksForChart((chart as DrawnChart).id);
+
   let menuContent: undefined | JSX.Element;
-  if (iconCallbacks) {
-    menuContent = (
-      <IconMenu
-        onProtect={iconCallbacks.onProtect}
-        onStartPocketPick={setPocketPickForPlayer}
-        onVeto={iconCallbacks.onVeto}
-        onRedraw={iconCallbacks.onRedraw}
-      />
-    );
+  if (actionsEnabled && !winner) {
+    if (!hasLabel) {
+      menuContent = (
+        <IconMenu
+          onProtect={iconCallbacks.onProtect}
+          onStartPocketPick={setPocketPickPendingForPlayer}
+          onVeto={iconCallbacks.onVeto}
+          onRedraw={iconCallbacks.onRedraw}
+          onSetWinner={iconCallbacks.onSetWinner}
+        />
+      );
+    } else if (!vetoedBy) {
+      menuContent = <IconMenu onSetWinner={iconCallbacks.onSetWinner} />;
+    }
   }
 
+  const rootClassname = classNames(styles.chart, {
+    [styles.vetoed]: vetoedBy,
+    [styles.protected]: protectedBy,
+    [styles.replaced]: replacedBy,
+    [styles.clickable]: !!menuContent,
+    [styles.hideVeto]: !showVeto,
+  });
+
   return (
     <div
       className={rootClassname}
       onClick={
-        showingIconMenu || hasLabel || pocketPickForPlayer
+        !menuContent || showingContextMenu || pocketPickPendingForPlayer
           ? undefined
-          : showIcons
+          : showMenu
       }
     >
       <SongSearch
-        isOpen={!!pocketPickForPlayer}
+        isOpen={!!pocketPickPendingForPlayer}
         onSongSelect={(song, chart) => {
-          iconCallbacks &&
+          actionsEnabled &&
             chart &&
-            iconCallbacks.onReplace(pocketPickForPlayer as 1 | 2, chart);
-          setPocketPickForPlayer(0);
+            iconCallbacks.onReplace(pocketPickPendingForPlayer as 1 | 2, chart);
+          setPocketPickPendingForPlayer(0);
         }}
-        onCancel={() => setPocketPickForPlayer(0)}
+        onCancel={() => setPocketPickPendingForPlayer(0)}
       />
       {vetoedBy && (
         <CardLabel
@@ -129,6 +168,13 @@ export function SongCard(props: Props) {
           onRemove={iconCallbacks?.onReset}
         />
       )}
+      {winner && (
+        <CardLabel
+          player={winner}
+          type={LabelType.Winner}
+          onRemove={() => iconCallbacks?.onSetWinner(null)}
+        />
+      )}
       <div className={styles.cardCenter} style={jacketBg}>
         <div className={styles.name} title={nameTranslation}>
           {name}
@@ -143,8 +189,8 @@ export function SongCard(props: Props) {
 
       <Popover2
         content={menuContent}
-        isOpen={showingIconMenu}
-        onClose={hideIcons}
+        isOpen={showingContextMenu}
+        onClose={hideMenu}
         placement="top"
         modifiers={{
           offset: { options: { offset: [0, 35] } },
@@ -152,12 +198,12 @@ export function SongCard(props: Props) {
       >
         <div
           className={styles.cardFooter}
-          style={{ backgroundColor: diffAccentColor }}
+          style={{ backgroundColor: diffColor }}
         >
           <div className={styles.bpm}>{bpm} BPM</div>
           {flags.includes("shock") && <ShockBadge />}
           <div className={styles.difficulty}>
-            <AbbrDifficulty diffClass={difficultyClass} /> {level}
+            {diffAbbr} {level}
           </div>
         </div>
       </Popover2>
diff --git a/src/song-card/use-player-label.ts b/src/song-card/use-player-label.ts
new file mode 100644
index 000000000..55f413614
--- /dev/null
+++ b/src/song-card/use-player-label.ts
@@ -0,0 +1,5 @@
+import { useDrawing } from "../drawing-context";
+
+export function usePlayerLabel(n: 1 | 2) {
+  return useDrawing((d) => d[`player${n}`] || `P${n}`);
+}
diff --git a/src/song-jacket.tsx b/src/song-jacket.tsx
index 3a74c3223..62da9128f 100644
--- a/src/song-jacket.tsx
+++ b/src/song-jacket.tsx
@@ -1,5 +1,6 @@
 import { Song } from "./models/SongData";
-import { Music } from "react-feather";
+import { Icon } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
 
 interface Props {
   song: Song;
@@ -19,7 +20,7 @@ export function SongJacket(props: Props) {
   }
   return (
     <div className={props.className}>
-      <Music size={props.height} />
+      <Icon icon={IconNames.MUSIC} size={props.height} />
     </div>
   );
 }
diff --git a/src/song-search/index.tsx b/src/song-search/index.tsx
index 040c16e22..40db0ef7c 100644
--- a/src/song-search/index.tsx
+++ b/src/song-search/index.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { chartIsValid, getDrawnChart, songIsValid } from "../card-draw";
 import { useConfigState } from "../config-state";
 import { useDrawState } from "../draw-state";
-import { DrawnChart } from "../models/Drawing";
+import { EligibleChart } from "../models/Drawing";
 import { Song } from "../models/SongData";
 import { SearchResult, SearchResultData } from "./search-result";
 import { Omnibar } from "@blueprintjs/select";
@@ -10,7 +10,7 @@ import styles from "./song-search.css";
 
 interface Props {
   isOpen: boolean;
-  onSongSelect(song: Song, chart?: DrawnChart): void;
+  onSongSelect(song: Song, chart?: EligibleChart): void;
   onCancel(): void;
 }
 
@@ -51,7 +51,11 @@ export function SongSearch(props: Props) {
           item.song,
           item.chart === "none" || !item.chart
             ? undefined
-            : getDrawnChart(item.song, item.chart)
+            : getDrawnChart(
+                useDrawState.getState().gameData!,
+                item.song,
+                item.chart
+              )
         )
       }
       items={items}
@@ -61,7 +65,6 @@ export function SongSearch(props: Props) {
       className={styles.songSearch}
       itemRenderer={(data, itemProps) => (
         <SearchResult
-          config={config}
           data={data}
           selected={itemProps.modifiers.active}
           handleClick={itemProps.handleClick}
diff --git a/src/song-search/search-result.tsx b/src/song-search/search-result.tsx
index 3aac7822a..d8afb8d83 100644
--- a/src/song-search/search-result.tsx
+++ b/src/song-search/search-result.tsx
@@ -1,7 +1,5 @@
 import { AbbrDifficulty } from "../game-data-utils";
-import { useDifficultyColor } from "../hooks/useDifficultyColor";
 import { useIntl } from "../hooks/useIntl";
-import { ConfigState } from "../config-state";
 import { Song, Chart } from "../models/SongData";
 import { SongJacket } from "../song-jacket";
 import styles from "./song-search.css";
@@ -12,39 +10,13 @@ export interface SearchResultData {
   chart?: Chart | "none";
 }
 
-interface ChartOptionProps {
-  chart: Chart;
-  onClick: () => void;
-}
-
-function ChartOption({ chart, onClick }: ChartOptionProps) {
-  const bg = useDifficultyColor(chart.diffClass);
-  return (
-    <div
-      className={styles.chart}
-      style={{ backgroundColor: bg }}
-      onClick={onClick}
-    >
-      <AbbrDifficulty diffClass={chart.diffClass} />
-      <br />
-      {chart.lvl}
-    </div>
-  );
-}
-
 interface ResultsProps {
   data: SearchResultData;
   selected: boolean;
   handleClick: React.MouseEventHandler<HTMLElement>;
-  config: ConfigState;
 }
 
-export function SearchResult({
-  data,
-  selected,
-  handleClick,
-  config,
-}: ResultsProps) {
+export function SearchResult({ data, selected, handleClick }: ResultsProps) {
   const song = data.song;
   const { t } = useIntl();
   let label: string | JSX.Element;
diff --git a/src/theme-toggle.tsx b/src/theme-toggle.tsx
index a5d83af6d..91497ee16 100644
--- a/src/theme-toggle.tsx
+++ b/src/theme-toggle.tsx
@@ -21,7 +21,7 @@ export function useThemePref() {
     : Theme.Light;
 }
 
-function applyTheme(theme: Theme) {
+function applyThemeBodyClass(theme: Theme) {
   document.body.classList.toggle(Classes.DARK, theme === Theme.Dark);
 }
 
@@ -54,7 +54,7 @@ export function ThemeSyncWidget() {
   const themeState = useThemeStore();
   const browserPref = useThemePref();
   useEffect(() => {
-    applyTheme(themeState.resolved);
+    applyThemeBodyClass(themeState.resolved);
   }, [themeState.resolved]);
   useEffect(() => {
     themeState.updateBrowserPref(browserPref);
diff --git a/src/toaster.tsx b/src/toaster.tsx
index 134b06831..430bf3a95 100644
--- a/src/toaster.tsx
+++ b/src/toaster.tsx
@@ -1,3 +1,15 @@
 import { Toaster } from "@blueprintjs/core";
+import { createRoot } from "react-dom/client";
 
-export const toaster = Toaster.create({ position: "bottom" });
+export let toaster: Toaster;
+
+const toasterRoot = document.createElement("div");
+document.body.appendChild(toasterRoot);
+createRoot(toasterRoot).render(
+  <Toaster
+    position="bottom"
+    ref={(instance) => {
+      toaster = instance!;
+    }}
+  />
+);
diff --git a/src/tournament-mode/RoundSelect.tsx b/src/tournament-mode/RoundSelect.tsx
new file mode 100644
index 000000000..ed27b5f4f
--- /dev/null
+++ b/src/tournament-mode/RoundSelect.tsx
@@ -0,0 +1,55 @@
+import { MenuItem } from "@blueprintjs/core";
+import { Suggest2 } from "@blueprintjs/select";
+
+import { filterRoundLabel, renderRoundLabel, roundLabels } from "./round-label";
+import { useDrawing } from "../drawing-context";
+
+const RoundLabel = Suggest2.ofType<string>();
+
+function identity<T>(input: T): T {
+  return input;
+}
+
+export function RoundSelect() {
+  const updateDrawing = useDrawing((d) => d.updateDrawing);
+  const tournamentTitle = useDrawing((d) => d.title);
+
+  return (
+    <RoundLabel
+      inputProps={{
+        large: true,
+        style: {
+          boxShadow: "none",
+          textAlign: "center",
+          width: "300px",
+        },
+        placeholder: "Round Title",
+      }}
+      items={roundLabels}
+      createNewItemPosition="first"
+      createNewItemFromQuery={identity}
+      inputValueRenderer={identity}
+      createNewItemRenderer={(query, active, handleClick) => (
+        <MenuItem
+          active={active}
+          key={query}
+          onClick={handleClick}
+          text={query}
+          icon="new-text-box"
+          roleStructure="listoption"
+        />
+      )}
+      itemPredicate={filterRoundLabel}
+      itemRenderer={renderRoundLabel}
+      noResults={
+        <MenuItem
+          disabled={true}
+          text="No results."
+          roleStructure="listoption"
+        />
+      }
+      onItemSelect={(title) => updateDrawing({ title })}
+      selectedItem={tournamentTitle || null}
+    />
+  );
+}
diff --git a/src/tournament-mode/drawing-labels.css b/src/tournament-mode/drawing-labels.css
new file mode 100644
index 000000000..20152dfbc
--- /dev/null
+++ b/src/tournament-mode/drawing-labels.css
@@ -0,0 +1,28 @@
+.headers {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 200%;
+  padding-top: 8px;
+  position: relative;
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  max-width: 500px;
+}
+
+.versus {
+  height: 0px;
+}
+
+.players {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  max-width: 600px;
+  width: 100%;
+}
diff --git a/src/tournament-mode/drawing-labels.tsx b/src/tournament-mode/drawing-labels.tsx
new file mode 100644
index 000000000..15ce24445
--- /dev/null
+++ b/src/tournament-mode/drawing-labels.tsx
@@ -0,0 +1,51 @@
+import { EditableText } from "@blueprintjs/core";
+import { useCallback } from "react";
+import { useDrawState } from "../draw-state";
+import { useDrawing } from "../drawing-context";
+import styles from "./drawing-labels.css";
+
+import { RoundSelect } from "./RoundSelect";
+
+export function SetLabels() {
+  const tournamentMode = useDrawState((s) => s.tournamentMode);
+  if (!tournamentMode) {
+    return null;
+  }
+
+  return (
+    <div className={styles.headers}>
+      <div className={styles.title}>
+        <RoundSelect />
+      </div>
+      <div className={styles.versus}>vs</div>
+      <div className={styles.players}>
+        <EditableDrawingField placeholder="Player 1" field="player1" />
+        <EditableDrawingField placeholder="Player 2" field="player2" />
+      </div>
+    </div>
+  );
+}
+
+function EditableDrawingField({
+  field,
+  placeholder,
+}: {
+  field: "title" | "player1" | "player2";
+  placeholder: string;
+}) {
+  const updateDrawing = useDrawing((s) => s.updateDrawing);
+  const value = useDrawing((s) => s[field]);
+  const handleChange = useCallback(
+    (value: string) => {
+      updateDrawing({ [field]: value });
+    },
+    [updateDrawing, field]
+  );
+  return (
+    <EditableText
+      placeholder={placeholder}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+}
diff --git a/src/tournament-mode/networking-actions.css b/src/tournament-mode/networking-actions.css
new file mode 100644
index 000000000..70e5ba864
--- /dev/null
+++ b/src/tournament-mode/networking-actions.css
@@ -0,0 +1,5 @@
+.sendButton {
+  position: absolute;
+  top: 0;
+  right: 5px;
+}
diff --git a/src/tournament-mode/networking-actions.tsx b/src/tournament-mode/networking-actions.tsx
new file mode 100644
index 000000000..cae2ad6ba
--- /dev/null
+++ b/src/tournament-mode/networking-actions.tsx
@@ -0,0 +1,86 @@
+import { Button, Icon, Menu, MenuItem } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+import { Popover2, Tooltip2 } from "@blueprintjs/popover2";
+import { ReactNode } from "react";
+import { useDrawState } from "../draw-state";
+import { useDrawing, useDrawingStore } from "../drawing-context";
+import { firstOf } from "../utils";
+import styles from "./networking-actions.css";
+import { CurrentPeersMenu } from "./remote-peer-menu";
+import { displayFromPeerId, useRemotePeers } from "./remote-peers";
+
+export function NetworkingActions() {
+  const getDrawing = useDrawing((s) => s.serializeSyncFields);
+  const syncPeer = useDrawing((s) => s.__syncPeer);
+  const isConnected = useRemotePeers((s) => !!s.thisPeer);
+  const remotePeers = useRemotePeers((s) => s.remotePeers);
+  const sendDrawing = useRemotePeers((s) => s.sendDrawing);
+  const syncDrawing = useRemotePeers((s) => s.beginSyncWithPeer);
+  const drawingStore = useDrawingStore();
+  const tournamentMode = useDrawState((s) => s.tournamentMode);
+
+  if (!isConnected) {
+    return null;
+  }
+
+  let remoteActions: JSX.Element | undefined = undefined;
+
+  if (remotePeers.size === 1) {
+    const peerId = displayFromPeerId(firstOf(remotePeers.values())!.peer);
+    remoteActions = (
+      <Menu>
+        <MenuItem
+          icon={IconNames.SendMessage}
+          text={`Send to ${peerId}`}
+          onClick={() => sendDrawing(getDrawing())}
+        />
+        <MenuItem
+          icon={IconNames.Changes}
+          text={`Start sync with ${peerId}`}
+          onClick={() => syncDrawing(drawingStore)}
+        />
+      </Menu>
+    );
+  } else if (remotePeers.size > 1) {
+    remoteActions = (
+      <Menu>
+        <MenuItem icon={IconNames.SendMessage} text="Send to...">
+          <CurrentPeersMenu
+            disabled={syncPeer ? [syncPeer.peer] : false}
+            onClickPeer={(peerId) => sendDrawing(getDrawing(), peerId)}
+          />
+        </MenuItem>
+        <MenuItem icon={IconNames.Changes} text="Start sync with...">
+          <CurrentPeersMenu
+            disabled={syncPeer ? [syncPeer.peer] : false}
+            onClickPeer={(peerId) => syncDrawing(drawingStore, peerId)}
+          />
+        </MenuItem>
+      </Menu>
+    );
+  } else if (syncPeer) {
+    remoteActions = undefined;
+  }
+
+  const button = (
+    <Button
+      minimal
+      text={<Icon icon={IconNames.Share} />}
+      disabled={!remotePeers.size}
+    />
+  );
+
+  return (
+    <>
+      <div className={styles.sendButton}>
+        {syncPeer && <Icon icon={IconNames.Changes} intent="success" />}
+        {remotePeers.size ? (
+          <Popover2 content={remoteActions}>{button}</Popover2>
+        ) : (
+          <Tooltip2 content="Connect to a peer to share">{button}</Tooltip2>
+        )}
+      </div>
+      {!tournamentMode && <div style={{ height: "15px" }} />}
+    </>
+  );
+}
diff --git a/src/tournament-mode/remote-peer-menu.tsx b/src/tournament-mode/remote-peer-menu.tsx
new file mode 100644
index 000000000..48ed6cbd9
--- /dev/null
+++ b/src/tournament-mode/remote-peer-menu.tsx
@@ -0,0 +1,147 @@
+import {
+  Tag,
+  FormGroup,
+  MenuItem,
+  Icon,
+  Collapse,
+  Button,
+  Intent,
+} from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+import { InputButtonPair } from "../controls/input-button-pair";
+import { toaster } from "../toaster";
+import { displayFromPeerId, useRemotePeers } from "./remote-peers";
+
+export function RemotePeerControls() {
+  const peers = useRemotePeers();
+
+  let displayName = "(no name set)";
+  if (peers.thisPeer) {
+    displayName = displayFromPeerId(peers.thisPeer.id);
+  }
+
+  let coreControl: JSX.Element;
+  // Copied to keyboard success toaster
+  function copyToaster() {
+    navigator.clipboard.writeText(displayName);
+    toaster.show({
+      message: "Hostname copied to clipboard",
+      intent: Intent.SUCCESS,
+      icon: IconNames.Clipboard,
+    });
+  }
+  // Copy to keyboard button
+  let copyButton = (
+    <Button
+      minimal
+      icon={IconNames.Duplicate}
+      onClick={() => {
+        copyToaster();
+      }}
+    />
+  );
+
+  if (peers.thisPeer) {
+    coreControl = (
+      <InputButtonPair
+        key="connectedName"
+        disableInput
+        value={displayFromPeerId(peers.thisPeer.id)}
+        rightElement={copyButton}
+        buttonLabel="Disconnect"
+        onClick={() => peers.setName("")}
+      />
+    );
+  } else {
+    coreControl = (
+      <InputButtonPair
+        placeholder="pick host name"
+        onClick={peers.setName}
+        buttonLabel="Listen"
+        enterKeyHint="go"
+      />
+    );
+  }
+
+  return (
+    <>
+      <FormGroup
+        label="Hostname"
+        subLabel="Connect from other devices using this name"
+      >
+        {coreControl}
+      </FormGroup>
+      <Collapse isOpen={!!peers.thisPeer}>
+        <FormGroup label="Connect to peer">
+          <InputButtonPair
+            placeholder="enter host name"
+            buttonLabel="Connect"
+            enterKeyHint="go"
+            onClick={(v, input) => {
+              peers.connect(v);
+              input.value = "";
+              input.blur();
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Current Peers">
+          {peers.remotePeers.size > 0 ? (
+            Array.from(peers.remotePeers).map(([_, p]) => (
+              <Tag minimal large key={p.peer} onRemove={() => p.close()}>
+                {displayFromPeerId(p.peer)}
+              </Tag>
+            ))
+          ) : (
+            <span className="bp4-text-disabled">
+              <Icon icon={IconNames.HeartBroken} /> No connections
+            </span>
+          )}
+        </FormGroup>
+      </Collapse>
+    </>
+  );
+}
+
+interface PeerMenuProps {
+  header?: string;
+  disabled?: boolean | Array<string>;
+  onClickPeer?(peerId: string): void;
+  emptyState?: JSX.Element;
+}
+
+export function CurrentPeersMenu({
+  disabled,
+  onClickPeer,
+  emptyState,
+  header,
+}: PeerMenuProps) {
+  const peers = useRemotePeers((s) => s.remotePeers);
+
+  if (!peers.size) {
+    return emptyState || null;
+  }
+
+  let allDisabled = false;
+  if (disabled === true) {
+    allDisabled = true;
+  }
+
+  let disableById: string[] = [];
+  if (Array.isArray(disabled)) {
+    disableById = disabled;
+  }
+
+  return (
+    <>
+      {!!header && <MenuItem text={header} disabled />}
+      {Array.from(peers).map(([_, dc]) => (
+        <MenuItem
+          key={dc.peer}
+          text={displayFromPeerId(dc.peer)}
+          disabled={allDisabled || disableById.includes(dc.peer)}
+          onClick={onClickPeer && (() => onClickPeer(dc.peer))}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/src/tournament-mode/remote-peers.ts b/src/tournament-mode/remote-peers.ts
new file mode 100644
index 000000000..cd314422d
--- /dev/null
+++ b/src/tournament-mode/remote-peers.ts
@@ -0,0 +1,252 @@
+import createStore, { StoreApi } from "zustand";
+import type { Peer, DataConnection } from "peerjs";
+import { Drawing } from "../models/Drawing";
+import { useDrawState } from "../draw-state";
+import { toaster } from "../toaster";
+import { Intent } from "@blueprintjs/core";
+import {
+  acceptIncomingSyncedStores,
+  initShareWithPeer,
+} from "../zustand/shared-zustand";
+import type { DrawingContext } from "../drawing-context";
+import { firstOf } from "../utils";
+
+interface SharedDrawingMessage {
+  type: "drawing";
+  body: Drawing;
+}
+
+type PeerMessages = SharedDrawingMessage;
+
+const REMOTE_STORE_TYPE = "DRAWING";
+
+interface RemotePeerStore {
+  instanceName: string;
+  instancePin: string;
+  thisPeer: Peer | null;
+  remotePeers: Map<string, DataConnection>;
+  connect(peerId: string | null): Promise<void>;
+  setName(newName: string): Promise<void>;
+  /** sends to the first peer if not specified */
+  sendDrawing(drawing: Drawing, peerId?: string): void;
+  /** syncs with first peer if not specified */
+  beginSyncWithPeer(drawing: StoreApi<DrawingContext>, peerId?: string): void;
+}
+
+function genPin() {
+  let pin = Math.floor(Math.random() * 10000).toString(10);
+  while (pin.length < 4) {
+    pin = "0" + pin;
+  }
+  return pin;
+}
+
+function peerIdFromDisplay(display: string) {
+  return `ddr-tools ${display.replace("#", "_")}`;
+}
+
+export function displayFromPeerId(id: string) {
+  return id.replace("ddr-tools ", "").replace("_", "#");
+}
+
+function peerId(name: string, pin: string) {
+  return `ddr-tools ${name}_${pin}`;
+}
+
+function bindPeer(peer: Peer, resolve: Function, reject: Function) {
+  peer.on("open", (id) => {
+    console.log("connected to peer signaling server with id", id);
+    toaster.show({
+      message: `Available for connections as ${displayFromPeerId(id)}`,
+      intent: Intent.SUCCESS,
+    });
+    resolve();
+  });
+  peer.on("close", () => {
+    console.log("peer has been closed");
+    cleanup();
+  });
+  peer.on("disconnected", () => {
+    console.log("disconnected from signaling server, reconnecting in 1s");
+    setTimeout(() => {
+      if (peer.disconnected && !peer.destroyed) {
+        peer.reconnect();
+      }
+    }, 1000);
+  });
+  peer.on("error", (err) => {
+    console.log("likely fatal error from peerjs", err);
+    cleanup();
+    reject();
+  });
+
+  peer.on("connection", (conn) => {
+    console.log("new connection from peer", conn.peer, conn.metadata);
+    toaster.show({
+      message: `Remote peer ${displayFromPeerId(conn.peer)} connected`,
+      intent: Intent.SUCCESS,
+    });
+    bindPeerConn(conn);
+  });
+
+  useRemotePeers.setState({
+    thisPeer: peer,
+  });
+  function cleanup() {
+    useRemotePeers.setState({
+      thisPeer: null,
+      remotePeers: new Map(),
+    });
+  }
+}
+
+function bindPeerConn(conn: DataConnection) {
+  conn.on("close", () => {
+    console.log("remote peer connection closed", conn.peer);
+    removePeer();
+  });
+  conn.on("error", (err) => {
+    console.log("likely fatal error from remote peer", err, conn.peer);
+    removePeer();
+  });
+
+  conn.on("data", (data: PeerMessages) => {
+    switch (data.type) {
+      case "drawing":
+        console.log("received drawing from peer", data.body);
+        useDrawState.getState().injectRemoteDrawing(data.body);
+        break;
+      default:
+        console.log("received unknown data from remote peer", data, conn.peer);
+    }
+  });
+
+  acceptIncomingSyncedStores<Drawing>(
+    REMOTE_STORE_TYPE,
+    conn,
+    (initialState) => {
+      useDrawState.getState().injectRemoteDrawing(initialState, conn);
+    }
+  );
+
+  useRemotePeers.setState((prev) => {
+    const rp = new Map(prev.remotePeers);
+    rp.set(conn.peer, conn);
+    return {
+      remotePeers: rp,
+    };
+  });
+
+  function removePeer() {
+    toaster.show(
+      {
+        message: `Remote peer ${displayFromPeerId(conn.peer)} disconnected`,
+        intent: Intent.WARNING,
+      },
+      "removePeer"
+    );
+    const rp = new Map(useRemotePeers.getState().remotePeers);
+    if (rp.delete(conn.peer)) {
+      useRemotePeers.setState({
+        remotePeers: rp,
+      });
+    }
+  }
+}
+
+export const useRemotePeers = createStore<RemotePeerStore>((set, get) => ({
+  instanceName: "",
+  instancePin: "",
+  thisPeer: null,
+  remotePeers: new Map(),
+  connect(peerId) {
+    const { thisPeer } = get();
+    if (!thisPeer) {
+      return Promise.reject("connection to server not established");
+    }
+    if (!peerId) {
+      return Promise.reject("invalid peer id");
+    }
+    return new Promise((res) => {
+      const conn = thisPeer.connect(peerIdFromDisplay(peerId));
+      conn.on("open", () => {
+        bindPeerConn(conn);
+        toaster.show({
+          message: `Connected to remote peer ${displayFromPeerId(conn.peer)}`,
+          intent: Intent.SUCCESS,
+        });
+        res();
+      });
+    });
+  },
+  async setName(newName) {
+    if (!newName) {
+      const state = get();
+      if (state.thisPeer) {
+        state.thisPeer.destroy();
+      }
+      set({
+        thisPeer: null,
+        instanceName: "",
+      });
+    } else {
+      const peerLib = await import("peerjs");
+      return new Promise((res, rej) => {
+        const newPin = genPin();
+        const peer = new peerLib.Peer(peerId(newName, newPin));
+        bindPeer(peer, res, rej);
+        set({
+          instanceName: newName,
+          instancePin: newPin,
+          thisPeer: peer,
+        });
+      });
+    }
+  },
+  sendDrawing(drawing, peerId) {
+    const state = get();
+    let targetPeer: DataConnection;
+    if (!peerId) {
+      const result = firstOf(state.remotePeers.values());
+      if (!result) {
+        console.error("tried to send drawing when no peers are connected");
+        return;
+      }
+      targetPeer = result;
+    } else {
+      const foundPeer = state.remotePeers.get(peerId);
+      if (!foundPeer) {
+        console.error("tried to send to non-existent peer");
+        return;
+      }
+      targetPeer = foundPeer;
+    }
+    targetPeer.send(<SharedDrawingMessage>{
+      type: "drawing",
+      body: drawing,
+    });
+  },
+  beginSyncWithPeer(drawingStore, peerId) {
+    const state = get();
+    let targetPeer: DataConnection;
+    if (!peerId) {
+      const result = firstOf(state.remotePeers.values());
+      if (!result) {
+        console.error("tried to send drawing when no peers are connected");
+        return;
+      }
+      targetPeer = result;
+    } else {
+      const foundPeer = state.remotePeers.get(peerId);
+      if (!foundPeer) {
+        console.error("tried to send to non-existent peer");
+        return;
+      }
+      targetPeer = foundPeer;
+    }
+    initShareWithPeer(REMOTE_STORE_TYPE, drawingStore, targetPeer);
+    drawingStore.setState({
+      __syncPeer: targetPeer,
+    });
+  },
+}));
diff --git a/src/tournament-mode/round-label.tsx b/src/tournament-mode/round-label.tsx
new file mode 100644
index 000000000..0f3ddb5d2
--- /dev/null
+++ b/src/tournament-mode/round-label.tsx
@@ -0,0 +1,87 @@
+import { MenuItem } from "@blueprintjs/core";
+import { ItemPredicate, ItemRenderer } from "@blueprintjs/select";
+import React from "react";
+
+export const roundLabels = [
+  "Winner's Bracket",
+  "Winner's Round",
+  "Winner's Round 1",
+  "Winner's Round 2",
+  "Winner's Round 3",
+  "Winner's Round 4",
+  "Winner's Round 5",
+  "Winner's Quarterfinals",
+  "Winner's Semifinals",
+  "Winner's Finals",
+  "Loser's Bracket",
+  "Loser's Round",
+  "Loser's Round 1",
+  "Loser's Round 2",
+  "Loser's Round 3",
+  "Loser's Round 4",
+  "Loser's Round 5",
+  "Loser's Quarterfinals",
+  "Loser's Semifinals",
+  "Loser's Finals",
+  "Casuals",
+  "Warmup",
+  "Freeplay",
+];
+
+export const renderRoundLabel: ItemRenderer<string> = (
+  roundLabel,
+  { handleClick, modifiers, query }
+) => {
+  if (!modifiers.matchesPredicate) {
+    return null;
+  }
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={roundLabel}
+      onClick={handleClick}
+      text={highlightText(roundLabel, query)}
+      roleStructure="listoption"
+    />
+  );
+};
+
+export const filterRoundLabel: ItemPredicate<string> = (query, roundLabel) => {
+  return `${roundLabel.toLowerCase()}`.indexOf(query.toLowerCase()) >= 0;
+};
+
+function highlightText(text: string, query: string) {
+  let lastIndex = 0;
+  const words = query
+    .split(/\s+/)
+    .filter((word) => word.length > 0)
+    .map(escapeRegExpChars);
+  if (words.length === 0) {
+    return [text];
+  }
+  const regexp = new RegExp(words.join("|"), "gi");
+  const tokens: React.ReactNode[] = [];
+  while (true) {
+    const match = regexp.exec(text);
+    if (!match) {
+      break;
+    }
+    const length = match[0].length;
+    const before = text.slice(lastIndex, regexp.lastIndex - length);
+    if (before.length > 0) {
+      tokens.push(before);
+    }
+    lastIndex = regexp.lastIndex;
+    tokens.push(<strong key={lastIndex}>{match[0]}</strong>);
+  }
+  const rest = text.slice(lastIndex);
+  if (rest.length > 0) {
+    tokens.push(rest);
+  }
+  return tokens;
+}
+
+function escapeRegExpChars(text: string) {
+  return text.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+}
diff --git a/src/tournament-mode/sync-with-peers.ts b/src/tournament-mode/sync-with-peers.ts
new file mode 100644
index 000000000..2ae599b9f
--- /dev/null
+++ b/src/tournament-mode/sync-with-peers.ts
@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useDrawing, useDrawingStore } from "../drawing-context";
+import { syncStoreWithPeer } from "../zustand/shared-zustand";
+import { useRemotePeers } from "./remote-peers";
+
+export function SyncWithPeers() {
+  const drawing = useDrawing();
+  const store = useDrawingStore();
+  const remotePeer = useRemotePeers((s) => {
+    if (drawing.__syncPeer) return s.remotePeers.get(drawing.__syncPeer.peer);
+  });
+
+  useEffect(() => {
+    if (!remotePeer && drawing.__syncPeer) {
+      drawing.updateDrawing({ __syncPeer: undefined });
+    }
+  }, [remotePeer]);
+
+  useEffect(() => {
+    if (drawing.__syncPeer) {
+      return syncStoreWithPeer(store, drawing.__syncPeer);
+    }
+  }, [drawing.__syncPeer]);
+
+  return null;
+}
diff --git a/src/tournament-mode/tournament-mode-toggle.tsx b/src/tournament-mode/tournament-mode-toggle.tsx
new file mode 100644
index 000000000..604bf4328
--- /dev/null
+++ b/src/tournament-mode/tournament-mode-toggle.tsx
@@ -0,0 +1,17 @@
+import { Checkbox } from "@blueprintjs/core";
+import { useDrawState } from "../draw-state";
+import { useIntl } from "../hooks/useIntl";
+
+export function TournamentModeToggle() {
+  const toggle = useDrawState((s) => s.toggleTournamentMode);
+  const enabled = useDrawState((s) => s.tournamentMode);
+  const { t } = useIntl();
+
+  return (
+    <Checkbox
+      checked={enabled}
+      onChange={toggle}
+      label={t("toggleTournamentMode", undefined, "Show tournament labels")}
+    />
+  );
+}
diff --git a/src/update-manager.tsx b/src/update-manager.tsx
index a1a833b23..658d70b1f 100644
--- a/src/update-manager.tsx
+++ b/src/update-manager.tsx
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { toaster } from "./toaster";
 import { Intent } from "@blueprintjs/core";
 import { useIntl } from "./hooks/useIntl";
+import { IconNames } from "@blueprintjs/icons";
 
 export function UpdateManager() {
   const { t } = useIntl();
@@ -24,6 +25,7 @@ export function UpdateManager() {
           toaster.show(
             {
               message: t("updateReady"),
+              icon: IconNames.OUTDATED,
               intent: Intent.SUCCESS,
               timeout: 0,
               action: {
diff --git a/src/utils.ts b/src/utils.ts
index 26e6ce25b..b7fc1df5d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -40,6 +40,7 @@ export function* flattenedKeys(
   }
 }
 
+/** ordered list of all available game data files */
 export const availableGameData = (
   process.env.DATA_FILES as unknown as Array<{
     name: string;
@@ -47,6 +48,13 @@ export const availableGameData = (
   }>
 ).sort((a, b) => (a.display < b.display ? -1 : 1));
 
+export function firstOf<T>(iter: IterableIterator<T>): T | undefined {
+  const next = iter.next();
+  if (!next.done) {
+    return next.value;
+  }
+}
+
 /**
  * Data structure to count the number of times a given item is added
  */
diff --git a/src/zustand/contextual-zustand.ts b/src/zustand/contextual-zustand.ts
new file mode 100644
index 000000000..bac51f044
--- /dev/null
+++ b/src/zustand/contextual-zustand.ts
@@ -0,0 +1,69 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useState,
+  createElement,
+  useEffect,
+} from "react";
+import { StoreApi, useStore, createStore } from "zustand";
+
+export function createContextualStore<
+  StoreValue,
+  ProviderProps extends { children?: ReactNode }
+>(
+  /** returns initial store state for given props */
+  creator: (
+    p: ProviderProps,
+    set: StoreApi<StoreValue>["setState"],
+    get: StoreApi<StoreValue>["getState"]
+  ) => StoreValue,
+  /** returns a unique id for a given set of props */
+  getUniqueId: (p: ProviderProps) => string,
+  globalProps: ProviderProps
+) {
+  const globalStore = createStore(creator.bind(undefined, globalProps));
+  const context = createContext(globalStore);
+  const StoreIndex = new Map<string, StoreApi<StoreValue>>();
+
+  const Provider = (props: ProviderProps) => {
+    const [localStore] = useState(() =>
+      createStore(creator.bind(undefined, props))
+    );
+    useEffect(() => {
+      const thisId = getUniqueId(props);
+      StoreIndex.set(thisId, localStore);
+      return () => {
+        StoreIndex.delete(thisId);
+        localStore.destroy();
+      };
+    }, []);
+    return createElement(
+      context.Provider,
+      { value: localStore },
+      props.children
+    );
+  };
+
+  const useThisStore = () => useContext(context);
+
+  function useContextValue(): StoreValue;
+  function useContextValue<Slice>(
+    selector: (state: StoreValue) => Slice,
+    equalityFn?: (a: Slice, b: Slice) => boolean
+  ): Slice;
+  function useContextValue<Slice>(
+    selector?: (state: StoreValue) => Slice,
+    equalityFn?: (a: Slice, b: Slice) => boolean
+  ) {
+    const store = useThisStore();
+    return selector ? useStore(store, selector, equalityFn) : useStore(store);
+  }
+
+  return {
+    Provider,
+    useContextValue,
+    StoreIndex,
+    useStore: useThisStore,
+  };
+}
diff --git a/src/zustand/shared-zustand.ts b/src/zustand/shared-zustand.ts
new file mode 100644
index 000000000..02442b62e
--- /dev/null
+++ b/src/zustand/shared-zustand.ts
@@ -0,0 +1,118 @@
+import { DataConnection } from "peerjs";
+import type { StoreApi } from "zustand";
+
+export interface SerializibleStore<ReducedState> {
+  id: string;
+  serializeSyncFields(): ReducedState;
+}
+
+type SyncMessages<T> = InitSync<T> | StateUpdate<T> | { type: "other" };
+
+interface InitSync<State> {
+  type: "syncedStore.init";
+  storeType: string;
+  storeId: string;
+  timestamp: number;
+  state: State;
+}
+
+interface StateUpdate<State> {
+  type: "syncedStore.stateUpdate";
+  storeId: string;
+  timestamp: number;
+  state: State;
+}
+
+export function acceptIncomingSyncedStores<SharedState>(
+  storeType: string,
+  peer: DataConnection,
+  handleNewStore: (initialState: SharedState) => void
+) {
+  const handlePeerMessage = (evt: SyncMessages<SharedState>) => {
+    if (evt.type !== "syncedStore.init") {
+      return;
+    }
+    if (evt.storeType !== storeType) {
+      return;
+    }
+    handleNewStore(evt.state);
+  };
+
+  peer.on("data", handlePeerMessage);
+
+  return () => {
+    peer.off("data", handlePeerMessage);
+  };
+}
+
+export function initShareWithPeer(
+  storeType: string,
+  store: StoreApi<SerializibleStore<unknown>>,
+  peer: DataConnection
+) {
+  const state = store.getState();
+  sendMessage(peer, {
+    type: "syncedStore.init",
+    storeType,
+    storeId: state.id,
+    state: state.serializeSyncFields(),
+    timestamp: 0,
+  });
+}
+
+function sendMessage(peer: DataConnection, msg: SyncMessages<unknown>) {
+  peer.send(msg);
+}
+
+/**
+ * Based on https://github.com/Tom-Julux/shared-zustand
+ * @returns unsync function
+ */
+export function syncStoreWithPeer<State extends SerializibleStore<unknown>>(
+  store: StoreApi<State>,
+  peer: DataConnection
+) {
+  const storeId = store.getState().id;
+  let externalUpdate = false;
+  let timestamp = 0;
+
+  const handleStoreUpdate = (state: State) => {
+    if (!externalUpdate) {
+      timestamp = Date.now();
+      sendMessage(peer, {
+        type: "syncedStore.stateUpdate",
+        storeId: state.id,
+        timestamp,
+        state: state.serializeSyncFields(),
+      });
+    }
+    externalUpdate = false;
+  };
+
+  const handlePeerMessage = (evt: SyncMessages<State>) => {
+    switch (evt.type) {
+      case "syncedStore.stateUpdate":
+        if (evt.storeId !== storeId) {
+          return;
+        }
+        break;
+      default:
+        return;
+    }
+
+    if (evt.timestamp <= timestamp) {
+      return;
+    }
+    externalUpdate = true;
+    timestamp = evt.timestamp;
+    store.setState(evt.state);
+  };
+
+  const unsubscribeFromStore = store.subscribe(handleStoreUpdate);
+  peer.on("data", handlePeerMessage);
+
+  return () => {
+    peer.off("data", handlePeerMessage);
+    unsubscribeFromStore();
+  };
+}
diff --git a/tsconfig.json b/tsconfig.json
index f748f10b2..0181188d8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
     // "composite": true,                     /* Enable project compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
     // "removeComments": true,                /* Do not emit comments to output. */
-    // "noEmit": true,                        /* Do not emit outputs. */
+    "noEmit": true /* Do not emit outputs. */,
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
diff --git a/webpack.config.js b/webpack.config.js
index a088cac7f..b7b7a210f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,19 +23,19 @@ module.exports = function (env = {}, argv = {}) {
   const zip = !!env.zip;
 
   return {
+    target: "browserslist: >1%",
     mode: isProd ? "production" : "development",
-    devtool: isProd ? false : "eval-cheap-module-source-map",
+    devtool: isProd ? false : "inline-cheap-module-source-map",
     devServer: !serve
       ? undefined
       : {
           static: "./dist",
           hot: true,
-          // host: "0.0.0.0"
+          host: "0.0.0.0",
         },
     entry: "./src/index.tsx",
     output: {
       filename: "[name].[chunkhash:5].js",
-      chunkFilename: "[name].[chunkhash:5].js",
       path: resolve(__dirname, "./dist"),
     },
     optimization: {
@@ -54,6 +54,9 @@ module.exports = function (env = {}, argv = {}) {
     },
     resolve: {
       extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".json"],
+      alias: {
+        peerjs$: resolve(__dirname, "node_modules/peerjs/dist/peerjs.esm.js"),
+      },
     },
     module: {
       rules: [
@@ -62,12 +65,12 @@ module.exports = function (env = {}, argv = {}) {
           test: /\.tsx?$/,
           exclude: /node_modules/,
           use: {
-            loader: "babel-loader?cacheDirectory",
+            loader: "babel-loader",
             options: {
               presets: [
                 [
                   require("@babel/preset-env"),
-                  { targets: { browsers: [">2%"] } },
+                  { targets: { browsers: [">1%"] } },
                 ],
                 require("@babel/preset-typescript"),
               ],
@@ -82,6 +85,7 @@ module.exports = function (env = {}, argv = {}) {
                 require("@babel/plugin-transform-react-jsx-source"),
                 !isProd ? require("react-refresh/babel") : null,
               ].filter(Boolean),
+              cacheDirectory: true,
             },
           },
         },
@@ -155,8 +159,7 @@ module.exports = function (env = {}, argv = {}) {
         ),
       }),
       new MiniCssExtractPlugin({
-        filename: "[name].[contenthash:5].css",
-        chunkFilename: "[id].[chunkhash:5].js",
+        filename: "[name].[chunkhash:5].css",
       }),
       new FaviconsWebpackPlugin({
         logo: "./src/assets/ddr-tools-256.png",
diff --git a/yarn.lock b/yarn.lock
index 57feb715f..924bfed5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -986,7 +986,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb"
   integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==
@@ -1037,18 +1037,18 @@
     call-me-maybe "^1.0.1"
     js-yaml "^4.1.0"
 
-"@blueprintjs/colors@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.1.0.tgz#6715062ff4c51667726ba690b49cafe14ace687a"
-  integrity sha512-aXgkEBg2oEz6lCE/sidvREUzQF7eJq2R8BvfOcQ1ICV4r/KVFszee6seA12ZtVaphfvuR4EE/raH6F1d0f4y7g==
+"@blueprintjs/colors@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.1.5.tgz#e01f4cf9e93b2c4f517ea14ab2cf9abc31da160c"
+  integrity sha512-OeQJedtUpJierCR2wueifrLqWb3c7K78XE/2achGvk0GJT4eOedHbS3PlaBJTc7oTpaNdGMazAM3WhCbiHVmtA==
 
-"@blueprintjs/core@^4.0.0", "@blueprintjs/core@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.2.0.tgz#3a5996e82081cb12d160669ad49b8e158520f79f"
-  integrity sha512-/bQN8mukY6VdeB1Bv2j/GQmJILe+drTNT4cO958QwGvPaJWLLD2Z/XdfTj8ffoWtYMrDLvVKkXKHt99gOnlUJQ==
+"@blueprintjs/core@^4.0.0", "@blueprintjs/core@^4.9.3":
+  version "4.9.3"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.9.3.tgz#70642933c19c0f18698d4ae93af5a40aeb1df8fe"
+  integrity sha512-8a0oBn7tMIcVkSH1SbcbdVD+UCRhigA1dvZe6C6D6i2FbfmEwR1glizuv1j9UBHFyHoE1EkPPlH/y7KIwhhMtQ==
   dependencies:
-    "@blueprintjs/colors" "^4.1.0"
-    "@blueprintjs/icons" "^4.2.3"
+    "@blueprintjs/colors" "^4.1.5"
+    "@blueprintjs/icons" "^4.4.1"
     "@juggle/resize-observer" "^3.3.1"
     "@types/dom4" "^2.0.1"
     classnames "^2.2"
@@ -1059,21 +1059,21 @@
     react-transition-group "^4.4.1"
     tslib "~2.3.1"
 
-"@blueprintjs/icons@^4.0.0", "@blueprintjs/icons@^4.2.3":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.2.3.tgz#f522fa4d565d649dd860419a4316bd75fc936335"
-  integrity sha512-6xPneQo7bCkO96q9zOhXVh7/6QkIb8weHIwH5uyt5rmvq9/QTYcw0T2hOKiqqmDCvzv5OlZpY9QC+8deKVWWpQ==
+"@blueprintjs/icons@^4.0.0", "@blueprintjs/icons@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.4.1.tgz#48d1568a97075db1080dcbb96e7c27ccadc111bb"
+  integrity sha512-+xwY7IYsmT9wdphzr9mIv/qsao6rP0yceMPTc1Lyz65uVZSIKNjpkaBN/LzcF+JneTW85paXbNTk4gxWkpqrig==
   dependencies:
     change-case "^4.1.2"
     classnames "^2.2"
     tslib "~2.3.1"
 
-"@blueprintjs/popover2@^1.0.0":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.1.3.tgz#5389cb8a141f38877fb934ae8eb734eadc3f2621"
-  integrity sha512-opNfSn3EGcQ5hJBfxQyZ19zst/74pQbNteDs1VaZrFQ1QfG2I43Gl6+8IqnYClWOxLh4zA7eW044MKWnvOm04A==
+"@blueprintjs/popover2@^1.0.0", "@blueprintjs/popover2@^1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.6.3.tgz#ebc50f03c7375a97fa589e8e6f1207c0f9f4b0dd"
+  integrity sha512-Ga7R+af8fgROHZBG9Mp1RhlzjpZaMiKZSxcvcd6d5IJ9TPNPyLp5SN90eODGtienV+JWugxqo/2xlAU6vnZf0g==
   dependencies:
-    "@blueprintjs/core" "^4.2.0"
+    "@blueprintjs/core" "^4.9.3"
     "@juggle/resize-observer" "^3.3.1"
     "@popperjs/core" "^2.5.4"
     classnames "^2.2"
@@ -1082,11 +1082,12 @@
     tslib "~2.3.1"
 
 "@blueprintjs/select@^4.0.0":
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-4.1.3.tgz#03535e318ec3454f621a8dc655493cd1bbf94ccc"
-  integrity sha512-NxUOgCVhcDGPI26pTCgUg0Ib14gN1IJ3fpwsiREDgXbFksmwKKctGgfmoCvnm3PraBbWOKNJGyYICHRa26hyCQ==
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-4.6.3.tgz#9b47d22c1efaff160b1b0b2b6f7152e57ed2d9e8"
+  integrity sha512-kRcYaysbpRVX9k2HIPzCeCSx4ggnTKMd9YaA4JDPvMKw+Oyw1n182J1jx8feeLqxpLgjFKKAnA3jhYklbGmTsw==
   dependencies:
-    "@blueprintjs/core" "^4.2.0"
+    "@blueprintjs/core" "^4.9.3"
+    "@blueprintjs/popover2" "^1.6.3"
     classnames "^2.2"
     tslib "~2.3.1"
 
@@ -1127,75 +1128,75 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.41.0.tgz#080321c3b68253522f7646b55b577dd99d2950b3"
   integrity sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==
 
-"@formatjs/ecma402-abstract@1.14.3":
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz#6428f243538a11126180d121ce8d4b2f17465738"
-  integrity sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==
+"@formatjs/ecma402-abstract@1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.12.0.tgz#2fb5e8983d5fae2fad9ec6c77aec1803c2b88d8e"
+  integrity sha512-0/wm9b7brUD40kx7KSE0S532T8EfH06Zc41rGlinoNyYXnuusR6ull2x63iFJgVXgwahm42hAW7dcYdZ+llZzA==
   dependencies:
-    "@formatjs/intl-localematcher" "0.2.32"
-    tslib "^2.4.0"
+    "@formatjs/intl-localematcher" "0.2.31"
+    tslib "2.4.0"
 
-"@formatjs/fast-memoize@2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.0.1.tgz#f15aaa73caad5562899c69bdcad8db82adcd3b0b"
-  integrity sha512-M2GgV+qJn5WJQAYewz7q2Cdl6fobQa69S1AzSM2y0P68ZDbK5cWrJIcPCO395Of1ksftGZoOt4LYCO/j9BKBSA==
+"@formatjs/fast-memoize@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.6.tgz#a442970db7e9634af556919343261a7bbe5e88c3"
+  integrity sha512-9CWZ3+wCkClKHX+i5j+NyoBVqGf0pIskTo6Xl6ihGokYM2yqSSS68JIgeo+99UIHc+7vi9L3/SDSz/dWI9SNlA==
   dependencies:
-    tslib "^2.4.0"
+    tslib "2.4.0"
 
-"@formatjs/icu-messageformat-parser@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz#8e8fd577c3e39454ef14bba4963f2e1d5f2cc46c"
-  integrity sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ==
+"@formatjs/icu-messageformat-parser@2.1.7":
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.7.tgz#35dc556c13a0544cc730300c8ddb730ba7f44bd4"
+  integrity sha512-KM4ikG5MloXMulqn39Js3ypuVzpPKq/DDplvl01PE2qD9rAzFO8YtaUCC9vr9j3sRXwdHPeTe8r3J/8IJgvYEQ==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.14.3"
-    "@formatjs/icu-skeleton-parser" "1.3.18"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "1.12.0"
+    "@formatjs/icu-skeleton-parser" "1.3.13"
+    tslib "2.4.0"
 
-"@formatjs/icu-skeleton-parser@1.3.18":
-  version "1.3.18"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz#7aed3d60e718c8ad6b0e64820be44daa1e29eeeb"
-  integrity sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==
+"@formatjs/icu-skeleton-parser@1.3.13":
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.13.tgz#f7e186e72ed73c3272d22a3aacb646e77368b099"
+  integrity sha512-qb1kxnA4ep76rV+d9JICvZBThBpK5X+nh1dLmmIReX72QyglicsaOmKEcdcbp7/giCWfhVs6CXPVA2JJ5/ZvAw==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.14.3"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "1.12.0"
+    tslib "2.4.0"
 
-"@formatjs/intl-displaynames@6.2.6":
-  version "6.2.6"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.2.6.tgz#6bc02fe0bf6571391aac0e01e74ecbf38542ff32"
-  integrity sha512-scf5AQTk9EjpvPhboo5sizVOvidTdMOnajv9z+0cejvl7JNl9bl/aMrNBgC72UH+bP3l45usPUKAGskV6sNIrA==
+"@formatjs/intl-displaynames@6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.1.2.tgz#b722b82975ca5f5f86e8e382cf5484f342df75f4"
+  integrity sha512-JbZANoYwNXNy+6NlicVe1/tpiyp+NKJD0WTHgp14aQbMaAg66VVPNAruFmhfhkIABF4jGvc4tdKYAANmWD8W6w==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.14.3"
-    "@formatjs/intl-localematcher" "0.2.32"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "1.12.0"
+    "@formatjs/intl-localematcher" "0.2.31"
+    tslib "2.4.0"
 
-"@formatjs/intl-listformat@7.1.9":
-  version "7.1.9"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.1.9.tgz#0c2ce67b610054f215dd2635a6da7da308cfbe3d"
-  integrity sha512-5YikxwRqRXTVWVujhswDOTCq6gs+m9IcNbNZLa6FLtyBStAjEsuE2vAU+lPsbz9ZTST57D5fodjIh2JXT6sMWQ==
+"@formatjs/intl-listformat@7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.1.2.tgz#3c5145436434795fa834150d0b6b6dc577aa6964"
+  integrity sha512-WfWkJ8k41jZIhXgBtC2T1SpTSKYig99g9MVqrVRco4kduv/6GUWq1eMjk84qZfbU4rwdwc8qct+/gB6DTS17+w==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.14.3"
-    "@formatjs/intl-localematcher" "0.2.32"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "1.12.0"
+    "@formatjs/intl-localematcher" "0.2.31"
+    tslib "2.4.0"
 
-"@formatjs/intl-localematcher@0.2.32":
-  version "0.2.32"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz#00d4d307cd7d514b298e15a11a369b86c8933ec1"
-  integrity sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ==
+"@formatjs/intl-localematcher@0.2.31":
+  version "0.2.31"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.31.tgz#aada2b1e58211460cedba56889e3c489117eb6eb"
+  integrity sha512-9QTjdSBpQ7wHShZgsNzNig5qT3rCPvmZogS/wXZzKotns5skbXgs0I7J8cuN0PPqXyynvNVuN+iOKhNS2eb+ZA==
   dependencies:
-    tslib "^2.4.0"
+    tslib "2.4.0"
 
-"@formatjs/intl@2.6.9":
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.6.9.tgz#d4bdd8c21888f579a95341580141d0aafe761610"
-  integrity sha512-EtcMZ9O24YSASu/jGOaTQtArx7XROjlKiO4KmkxJ/3EyAQLCr5hrS+KKvNud0a7GIwBucOb3IFrZ7WiSm2A/Cw==
+"@formatjs/intl@2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.4.0.tgz#fb3db7901bd3f4de0cb95565d952444526dc1724"
+  integrity sha512-6b3ex1nz9ZET+Jx/ApYhX62Q/SvZvNK81qG1XAFUKWylJUIFd/bm8hG6CMgh7QVzAeFPa3LIf1y0BkNAQ9VYEw==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.14.3"
-    "@formatjs/fast-memoize" "2.0.1"
-    "@formatjs/icu-messageformat-parser" "2.3.0"
-    "@formatjs/intl-displaynames" "6.2.6"
-    "@formatjs/intl-listformat" "7.1.9"
-    intl-messageformat "10.3.3"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "1.12.0"
+    "@formatjs/fast-memoize" "1.2.6"
+    "@formatjs/icu-messageformat-parser" "2.1.7"
+    "@formatjs/intl-displaynames" "6.1.2"
+    "@formatjs/intl-listformat" "7.1.2"
+    intl-messageformat "10.1.4"
+    tslib "2.4.0"
 
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
@@ -1552,9 +1553,9 @@
   integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
 
 "@juggle/resize-observer@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
-  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
 "@lcdp/offline-plugin@^5.0.7":
   version "5.1.1"
@@ -1613,6 +1614,16 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7"
   integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==
 
+"@reduxjs/toolkit@^1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4"
+  integrity sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==
+  dependencies:
+    immer "^9.0.21"
+    redux "^4.2.1"
+    redux-thunk "^2.4.2"
+    reselect "^4.1.8"
+
 "@sinclair/typebox@^0.25.16":
   version "0.25.24"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
@@ -1879,17 +1890,17 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^17.0.11":
-  version "17.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53"
-  integrity sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==
+"@types/react-dom@^18.0.0":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
   dependencies:
-    "@types/react" "^17"
+    "@types/react" "*"
 
-"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^17", "@types/react@^17.0.34":
-  version "17.0.54"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.54.tgz#3ce9ab14e10e6bd1b02e3953b0c9d41e8161e0d7"
-  integrity sha512-yBon9aJ+pVyP0dzfs4sR2DOseDi6fDnZQHqFaprzDzFgxDLkUhL/Frjf2egvpdlVtssWH8k3YAgvaGQXFu+4Kw==
+"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^18.0.0":
+  version "18.0.18"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.18.tgz#9f16f33d57bc5d9dca848d12c3572110ff9429ac"
+  integrity sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -1935,6 +1946,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/ws@^8.5.1":
   version "8.5.4"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
@@ -2270,7 +2286,7 @@ author-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/author-regex/-/author-regex-1.0.0.tgz#d08885be6b9bbf9439fe087c76287245f0a81450"
   integrity sha1-0IiFvmubv5Q5/gh8dihyRfCoFFA=
 
-autoprefixer@^10.4.14:
+autoprefixer@^10.4.0:
   version "10.4.14"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
   integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
@@ -2282,7 +2298,7 @@ autoprefixer@^10.4.14:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-babel-loader@^9.1.2:
+babel-loader@^9.0.0:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
   integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
@@ -3580,6 +3596,11 @@ event-emitter@^0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
+eventemitter3@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -4286,6 +4307,11 @@ image-q@^4.0.0:
   dependencies:
     "@types/node" "16.9.1"
 
+immer@^9.0.21:
+  version "9.0.21"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
+  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -4361,15 +4387,15 @@ interpret@^3.1.1:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
   integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
-intl-messageformat@10.3.3:
-  version "10.3.3"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.3.3.tgz#576798d31c9f8d90f9beadaa5a3878b8d30177a2"
-  integrity sha512-un/f07/g2e/3Q8e1ghDKET+el22Bi49M7O/rHxd597R+oLpPOMykSv5s51cABVfu3FZW+fea4hrzf2MHu1W4hw==
+intl-messageformat@10.1.4:
+  version "10.1.4"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.1.4.tgz#bf5ad48e357e3f3ab6559599296f54c175b22a92"
+  integrity sha512-tXCmWCXhbeHOF28aIf5b9ce3kwdwGyIiiSXVZsyDwksMiGn5Tp0MrMvyeuHuz4uN1UL+NfGOztHmE+6aLFp1wQ==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.14.3"
-    "@formatjs/fast-memoize" "2.0.1"
-    "@formatjs/icu-messageformat-parser" "2.3.0"
-    tslib "^2.4.0"
+    "@formatjs/ecma402-abstract" "1.12.0"
+    "@formatjs/fast-memoize" "1.2.6"
+    "@formatjs/icu-messageformat-parser" "2.1.7"
+    tslib "2.4.0"
 
 ipaddr.js@1.9.1:
   version "1.9.1"
@@ -5066,6 +5092,11 @@ nanoid@^3.3.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
+nanoid@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-4.0.0.tgz#6e144dee117609232c3f415c34b0e550e64999a5"
+  integrity sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==
+
 napi-build-utils@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
@@ -5178,9 +5209,9 @@ object-assign@^4.0.1, object-assign@^4.1.1:
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
 object-inspect@^1.9.0:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
-  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
 object-is@^1.0.1:
   version "1.1.5"
@@ -5466,6 +5497,19 @@ peek-readable@^4.1.0:
   resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-4.1.0.tgz#4ece1111bf5c2ad8867c314c81356847e8a62e72"
   integrity sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==
 
+peerjs-js-binarypack@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/peerjs-js-binarypack/-/peerjs-js-binarypack-1.0.1.tgz#80fa2b61c794a6b16d64253700405e476ada29be"
+  integrity sha512-N6aeia3NhdpV7kiGxJV5xQiZZCVEEVjRz2T2C6UZQiBkHWHzUv/oWA4myQLcwBwO8LUoR1KWW5oStvwVesmfCg==
+
+peerjs@^2.0.0-beta.3:
+  version "2.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/peerjs/-/peerjs-2.0.0-beta.3.tgz#b0da7a5f8176e5d04ce4668f37197f543afe3da4"
+  integrity sha512-crxVb3o2JrBcSFXmtYrWgcxhVm5G36SM2jolnj50SqiADkomiDA9ITaj6VBZ6S9MIx0FSwgPjTSEEK+1HbG4Tw==
+  dependencies:
+    eventemitter3 "^3.1.2"
+    peerjs-js-binarypack "1.0.1"
+
 phin@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
@@ -5928,14 +5972,13 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
   version "3.2.0"
@@ -5949,27 +5992,32 @@ react-feather@^2.0.9:
   dependencies:
     prop-types "^15.7.2"
 
-react-intl@^6.3.0:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.3.2.tgz#0816f0943690dbc6186ab1a2968eb378ba9c99f7"
-  integrity sha512-NT03zOHRAFGcZdTx4cXcVKZtnWBOM6RfLPK8Q67eA+Ba+pHdYb+cmrahncqAnevZKgO1r/nEauiVFKwQeudLIw==
-  dependencies:
-    "@formatjs/ecma402-abstract" "1.14.3"
-    "@formatjs/icu-messageformat-parser" "2.3.0"
-    "@formatjs/intl" "2.6.9"
-    "@formatjs/intl-displaynames" "6.2.6"
-    "@formatjs/intl-listformat" "7.1.9"
+react-intl@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.1.0.tgz#3f986b9daa76a5c2273e93ef15ea00a57ae7290c"
+  integrity sha512-aNy7wX/ZfKgpTv2x27E1sio50fnTrSWD96yfQdVfUfvZrIed6rVPccVxfAtLnIK/M9L1TGrckne3kwFj3Ipikg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.12.0"
+    "@formatjs/icu-messageformat-parser" "2.1.7"
+    "@formatjs/intl" "2.4.0"
+    "@formatjs/intl-displaynames" "6.1.2"
+    "@formatjs/intl-listformat" "7.1.2"
     "@types/hoist-non-react-statics" "^3.3.1"
     "@types/react" "16 || 17 || 18"
     hoist-non-react-statics "^3.3.2"
-    intl-messageformat "10.3.3"
-    tslib "^2.4.0"
+    intl-messageformat "10.1.4"
+    tslib "2.4.0"
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-popper@^1.3.7:
   version "1.3.11"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
@@ -5984,35 +6032,46 @@ react-popper@^1.3.7:
     warning "^4.0.2"
 
 react-popper@^2.2.4:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
-  integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
   dependencies:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-redux@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
+  integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
 react-transition-group@^4.4.1:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 readable-stream@^2.0.1:
   version "2.3.8"
@@ -6057,6 +6116,18 @@ rechoir@^0.8.0:
   dependencies:
     resolve "^1.20.0"
 
+redux-thunk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+
+redux@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -6135,6 +6206,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+reselect@^4.1.8:
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
+  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -6251,13 +6327,12 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.1.2:
   version "3.1.2"
@@ -6818,7 +6893,12 @@ truncate-utf8-bytes@^1.0.0:
   dependencies:
     utf8-byte-length "^1.0.1"
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tslib@^2.0.3, tslib@^2.1.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.2.tgz#1b6f07185c881557b0ffa84b111a0106989e8338"
   integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==
@@ -6955,6 +7035,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 utf8-byte-length@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"
@@ -7638,7 +7723,9 @@ zip-webpack-plugin@^4.0.0:
   dependencies:
     yazl "^2.5.1"
 
-zustand@^3.6.4:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
-  integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
+zustand@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.1.tgz#5a61cc755a002df5f041840a414ae6e9a99ee22b"
+  integrity sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==
+  dependencies:
+    use-sync-external-store "1.2.0"