diff --git a/src/Go/boardState/goStyles.ts b/src/Go/boardState/goStyles.ts
index 6c6eb7b1b..ad29e2808 100644
--- a/src/Go/boardState/goStyles.ts
+++ b/src/Go/boardState/goStyles.ts
@@ -1,9 +1,31 @@
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
+import { keyframes } from "tss-react";
 
-export const pointStyle = makeStyles((theme: Theme) =>
-  createStyles({
+type Size = "fiveByFive" | "sevenBySeven" | "nineByNine" | "thirteenByThirteen" | "nineteenByNineteen";
+type Point =
+  | "blackPoint"
+  | "whitePoint"
+  | "innerPoint"
+  | "filledPoint"
+  | "emptyPoint"
+  | "broken"
+  | "tradStone"
+  | "priorStoneTrad";
+type Structure = "coordinates" | "liberty" | "northLiberty" | "eastLiberty" | "westLiberty" | "southLiberty";
+type Highlight = "hover" | "valid" | "priorPoint";
+
+const fadeLoop = keyframes`
+    0% {
+        opacity: 0.4;
+    }
+    100% {
+        opacity: 1;
+    }
+`;
+
+export const pointStyle = makeStyles<void, Size | Point | Structure | Highlight>({ uniqId: "pointStyle" })(
+  (theme: Theme, _, classes) => ({
     hover: {},
     valid: {},
     priorPoint: {},
@@ -12,24 +34,24 @@ export const pointStyle = makeStyles((theme: Theme) =>
       height: "100%",
       width: "100%",
 
-      "&$hover$valid:hover $innerPoint": {
+      [`&.${classes.hover}.${classes.valid}:hover .${classes.innerPoint}`]: {
         outlineColor: theme.colors.white,
       },
-      "&$hover$priorPoint $innerPoint": {
+      [`&.${classes.hover}.${classes.priorPoint} .${classes.innerPoint}`]: {
         outlineColor: theme.colors.white,
       },
-      "&$hover$priorPoint $priorStoneTrad$blackPoint": {
+      [`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.blackPoint}`]: {
         outlineColor: theme.colors.white,
         display: "block",
       },
-      "&$hover$priorPoint $priorStoneTrad$whitePoint": {
+      [`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.whitePoint}`]: {
         outlineColor: theme.colors.black,
         display: "block",
       },
-      "&$hover:hover $coordinates": {
+      [`&.${classes.hover}:hover .${classes.coordinates}`]: {
         display: "block",
       },
-      "&:hover $broken": {
+      [`&:hover .${classes.broken}`]: {
         opacity: "0.4",
       },
     },
@@ -43,7 +65,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
       width: "83%",
       height: "83%",
       transition: "all 0.3s",
-      "& $coordinates": {
+      [`& .${classes.coordinates}`]: {
         fontSize: "10px",
       },
     },
@@ -59,142 +81,143 @@ export const pointStyle = makeStyles((theme: Theme) =>
       overflow: "hidden",
     },
     traditional: {
-      "& $innerPoint": {
+      [`& .${classes.innerPoint}`]: {
         display: "none",
       },
-      "& $broken": {
+      [`& .${classes.broken}`]: {
         backgroundImage: "none",
         backgroundColor: theme.colors.black,
       },
-      "& $tradStone": {
+      [`& .${classes.tradStone}`]: {
         display: "block",
       },
-      "& $liberty": {
+      [`& .${classes.liberty}`]: {
         backgroundColor: theme.colors.black,
         transition: "none",
-        "&:not($northLiberty):not($southLiberty):not($eastLiberty):not($westLiberty)": {
-          width: 0,
-          height: 0,
-        },
+        [`&:not(.${classes.northLiberty}):not(.${classes.southLiberty}):not(.${classes.eastLiberty}):not(.${classes.westLiberty})`]:
+          {
+            width: 0,
+            height: 0,
+          },
       },
-      "& $northLiberty, & $southLiberty": {
+      [`& .${classes.northLiberty}, & .${classes.southLiberty}`]: {
         width: "0.9px",
       },
-      "& $eastLiberty, & $westLiberty": {
+      [`& .${classes.eastLiberty}, & .${classes.westLiberty}`]: {
         height: "0.9px",
       },
-      "&$nineteenByNineteen": {
-        "& $blackPoint": {
+      [`&.${classes.nineteenByNineteen}`]: {
+        [`& .${classes.blackPoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(30px, 5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
           },
         },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(30px, 5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
           },
         },
-        "& $coordinates": {
+        [`& .${classes.coordinates}`]: {
           fontSize: "0.9vw",
         },
       },
-      "&$thirteenByThirteen": {
-        "& $blackPoint": {
+      [`&.${classes.thirteenByThirteen}`]: {
+        [`& .${classes.blackPoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(40px, 6vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
           },
         },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(40px, 6vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
           },
         },
-        "& $coordinates": {
+        [`& .${classes.coordinates}`]: {
           fontSize: "0.9vw",
         },
       },
-      "&$nineByNine": {
-        "& $blackPoint": {
+      [`&.${classes.nineByNine}`]: {
+        [`& .${classes.blackPoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(60px, 7vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
           },
         },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(60px, 7vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
           },
         },
       },
-      "&$sevenBySeven": {
-        "& $blackPoint": {
+      [`&.${classes.sevenBySeven}`]: {
+        [`& .${classes.blackPoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(80px, 8vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
           },
         },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
           "&:before": {
             backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(80px, 8vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
           },
         },
       },
-      "& $coordinates": {
+      [`& .${classes.coordinates}`]: {
         color: "black",
         left: "15%",
       },
-      "& $blackPoint ~ $coordinates": {
+      [`& .${classes.blackPoint} ~ .${classes.coordinates}`]: {
         color: theme.colors.white,
       },
     },
     fiveByFive: {
-      "& $blackPoint": {
+      [`& .${classes.blackPoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(35px, 4vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
       },
-      "& $whitePoint": {
+      [`& .${classes.whitePoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(35px, 4vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
       },
     },
     sevenBySeven: {
-      "& $blackPoint": {
+      [`& .${classes.blackPoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(23px, 3vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
       },
-      "& $whitePoint": {
+      [`& .${classes.whitePoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(25px, 3vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
       },
     },
     nineByNine: {
-      "& $filledPoint": {
+      [`& .${classes.filledPoint}`]: {
         boxShadow: "0px 0px 30px hsla(0, 100%, 100%, 0.48)",
       },
-      "& $blackPoint": {
+      [`& .${classes.blackPoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(15px, 2vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
       },
-      "& $whitePoint": {
+      [`& .${classes.whitePoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(15px, 2vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
       },
     },
     thirteenByThirteen: {
-      "& $filledPoint": {
+      [`& .${classes.filledPoint}`]: {
         boxShadow: "0px 0px 18px hsla(0, 100%, 100%, 0.48)",
       },
-      "& $blackPoint": {
+      [`& .${classes.blackPoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
       },
-      "& $whitePoint": {
+      [`& .${classes.whitePoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
       },
     },
     nineteenByNineteen: {
-      "& $filledPoint": {
+      [`& .${classes.filledPoint}`]: {
         boxShadow: "0px 0px 18px hsla(0, 100%, 100%, 0.48)",
       },
-      "& $blackPoint": {
+      [`& .${classes.blackPoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
       },
-      "& $whitePoint": {
+      [`& .${classes.whitePoint}`]: {
         backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
       },
 
-      "& $innerPoint": {
+      [`& .${classes.innerPoint}`]: {
         width: "70%",
         height: "70%",
         margin: "15%",
@@ -229,7 +252,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
         top: 0,
       },
 
-      "&$blackPoint": {
+      [`&.${classes.blackPoint}`]: {
         position: "static",
         outlineWidth: 0,
         width: 0,
@@ -241,7 +264,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
           backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(150px, 11vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
         },
       },
-      "&$whitePoint": {
+      [`&.${classes.whitePoint}`]: {
         backgroundColor: "transparent",
         width: 0,
         height: 0,
@@ -252,7 +275,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
           backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(150px, 11vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
         },
       },
-      "&$emptyPoint": {
+      [`&.${classes.emptyPoint}`]: {
         width: 0,
         height: 0,
         margin: 0,
@@ -305,15 +328,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
       outlineColor: theme.colors.white,
     },
     fadeLoopAnimation: {
-      animation: `$fadeLoop 800ms ${theme.transitions.easing.easeInOut} infinite alternate`,
-    },
-    "@keyframes fadeLoop": {
-      "0%": {
-        opacity: 0.4,
-      },
-      "100%": {
-        opacity: 1,
-      },
+      animation: `${fadeLoop} 800ms ${theme.transitions.easing.easeInOut} infinite alternate`,
     },
     liberty: {
       position: "absolute",
@@ -381,8 +396,8 @@ export const pointStyle = makeStyles((theme: Theme) =>
   }),
 );
 
-export const boardStyles = makeStyles((theme: Theme) =>
-  createStyles({
+export const boardStyles = makeStyles<void, Size | "background">({ uniqId: "boardStyles" })(
+  (theme: Theme, _, classes) => ({
     tab: {
       paddingTop: 0,
       paddingBottom: 0,
@@ -469,15 +484,7 @@ export const boardStyles = makeStyles((theme: Theme) =>
       borderColor: theme.colors.success,
       padding: "0 12px",
       width: "200px",
-      animation: `$fadeLoop 600ms ${theme.transitions.easing.easeInOut} infinite alternate`,
-    },
-    "@keyframes fadeLoop": {
-      "0%": {
-        opacity: 0.6,
-      },
-      "100%": {
-        opacity: 1,
-      },
+      animation: `${fadeLoop} 600ms ${theme.transitions.easing.easeInOut} infinite alternate`,
     },
     scoreBox: {
       display: "inline-flex",
@@ -491,35 +498,35 @@ export const boardStyles = makeStyles((theme: Theme) =>
     },
     fiveByFive: {
       height: "20%",
-      "& $fiveByFive": {
+      [`& .${classes.fiveByFive}`]: {
         width: "20%",
         height: "100%",
       },
     },
     sevenBySeven: {
       height: "14%",
-      "& $sevenBySeven": {
+      [`& .${classes.sevenBySeven}`]: {
         width: "14%",
         height: "100%",
       },
     },
     nineByNine: {
       height: "11%",
-      "& $nineByNine": {
+      [`& .${classes.nineByNine}`]: {
         width: "11%",
         height: "100%",
       },
     },
     thirteenByThirteen: {
       height: "7.5%",
-      "& $thirteenByThirteen": {
+      [`& .${classes.thirteenByThirteen}`]: {
         width: "7.5%",
         height: "100%",
       },
     },
     nineteenByNineteen: {
       height: "5.2%",
-      "& $nineteenByNineteen": {
+      [`& .${classes.nineteenByNineteen}`]: {
         width: "5.2%",
         height: "100%",
       },
@@ -535,7 +542,7 @@ export const boardStyles = makeStyles((theme: Theme) =>
       paddingTop: "15px",
     },
     bitverseBackground: {
-      "&$background": {
+      [`&.${classes.background}`]: {
         fontSize: "calc(min(.83vh - 1px, 0.72vw, 7.856px))",
         opacity: 0.11,
       },
diff --git a/src/Go/ui/GoGameboard.tsx b/src/Go/ui/GoGameboard.tsx
index 1b07d659c..7f369f82d 100644
--- a/src/Go/ui/GoGameboard.tsx
+++ b/src/Go/ui/GoGameboard.tsx
@@ -27,7 +27,7 @@ export function GoGameboard({ boardState, traditional, clickHandler, hover }: Go
   }
 
   const boardSize = boardState.board[0].length;
-  const classes = boardStyles();
+  const { classes } = boardStyles();
 
   return (
     <Grid container id="goGameboard" className={`${classes.board} ${traditional ? classes.traditional : ""}`}>
diff --git a/src/Go/ui/GoGameboardWrapper.tsx b/src/Go/ui/GoGameboardWrapper.tsx
index 6c2e76072..a89f6a6d1 100644
--- a/src/Go/ui/GoGameboardWrapper.tsx
+++ b/src/Go/ui/GoGameboardWrapper.tsx
@@ -46,7 +46,7 @@ export function GoGameboardWrapper({ showInstructions }: GoGameboardWrapperProps
   const [scoreOpen, setScoreOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
 
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const boardSize = boardState.board[0].length;
   const currentPlayer = boardState.previousPlayer === GoColor.white ? GoColor.black : GoColor.white;
   const waitingOnAI = boardState.previousPlayer === GoColor.black && boardState.ai !== GoOpponent.none;
diff --git a/src/Go/ui/GoHistoryPage.tsx b/src/Go/ui/GoHistoryPage.tsx
index 43e0c0e8b..13d416bdc 100644
--- a/src/Go/ui/GoHistoryPage.tsx
+++ b/src/Go/ui/GoHistoryPage.tsx
@@ -16,7 +16,7 @@ import { getRecordKeys } from "../../Types/Record";
 
 export const GoHistoryPage = (): React.ReactElement => {
   useRerender(400);
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const priorBoard = Go.previousGame ?? getNewBoardState(7);
   const score = getScore(priorBoard);
   const opponent = priorBoard.ai;
diff --git a/src/Go/ui/GoInstructionsPage.tsx b/src/Go/ui/GoInstructionsPage.tsx
index df40e917d..7ea4ed27f 100644
--- a/src/Go/ui/GoInstructionsPage.tsx
+++ b/src/Go/ui/GoInstructionsPage.tsx
@@ -70,7 +70,7 @@ const makeTwoEyesChallenge = (
 );
 
 export const GoInstructionsPage = (): React.ReactElement => {
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   return (
     <div className={classes.instructionScroller}>
       <>
@@ -80,6 +80,16 @@ export const GoInstructionsPage = (): React.ReactElement => {
           In late 2070, the .org bubble burst, and most of the newly-implemented IPvGO 'net collapsed overnight. Since
           then, various factions have been fighting over small subnets to control their computational power. These
           subnets are very valuable in the right hands, if you can wrest them from their current owners.
+          <br />
+          <br />
+          (For details about how to automate with the API, and for a working starter script, visit the IPvGO section of
+          the in-game{" "}
+          <Link
+            style={{ cursor: "pointer" }}
+            onClick={() => Router.toPage(Page.Documentation, { docPage: "programming/go_algorithms.md" })}
+          >
+            Bitburner Documentation)
+          </Link>
         </Typography>
         <br />
         <br />
diff --git a/src/Go/ui/GoPoint.tsx b/src/Go/ui/GoPoint.tsx
index 5e67346e9..6c5e944f3 100644
--- a/src/Go/ui/GoPoint.tsx
+++ b/src/Go/ui/GoPoint.tsx
@@ -1,12 +1,11 @@
 import type { BoardState } from "../Types";
 
 import React from "react";
-import { ClassNameMap } from "@mui/styles";
 
 import { GoColor } from "@enums";
 import { columnIndexes } from "../Constants";
 import { findNeighbors } from "../boardState/boardState";
-import { pointStyle } from "../boardState/goStyles";
+import { boardStyles, pointStyle } from "../boardState/goStyles";
 import { findAdjacentLibertiesAndAlliesForPoint, getColorOnBoardString } from "../boardAnalysis/boardAnalysis";
 
 interface GoPointProps {
@@ -20,7 +19,7 @@ interface GoPointProps {
 }
 
 export function GoPoint({ state, x, y, traditional, hover, valid, emptyPointOwner }: GoPointProps): React.ReactElement {
-  const classes = pointStyle();
+  const { classes } = pointStyle();
 
   const currentPoint = state.board[x]?.[y];
   const player = currentPoint?.color;
@@ -89,10 +88,7 @@ export function GoPoint({ state, x, y, traditional, hover, valid, emptyPointOwne
   );
 }
 
-export function getSizeClass(
-  size: number,
-  classes: ClassNameMap<"fiveByFive" | "sevenBySeven" | "nineByNine" | "thirteenByThirteen" | "nineteenByNineteen">,
-) {
+export function getSizeClass(size: number, classes: ReturnType<typeof boardStyles | typeof pointStyle>["classes"]) {
   switch (size) {
     case 5:
       return classes.fiveByFive;
diff --git a/src/Go/ui/GoRoot.tsx b/src/Go/ui/GoRoot.tsx
index 157666512..a4d64e3af 100644
--- a/src/Go/ui/GoRoot.tsx
+++ b/src/Go/ui/GoRoot.tsx
@@ -9,7 +9,7 @@ import { GoGameboardWrapper } from "./GoGameboardWrapper";
 import { boardStyles } from "../boardState/goStyles";
 
 export function GoRoot(): React.ReactElement {
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const [value, setValue] = React.useState(0);
 
   function handleChange(event: React.SyntheticEvent, tab: number): void {
diff --git a/src/Go/ui/GoScoreModal.tsx b/src/Go/ui/GoScoreModal.tsx
index 8c428e93e..94bc2ba49 100644
--- a/src/Go/ui/GoScoreModal.tsx
+++ b/src/Go/ui/GoScoreModal.tsx
@@ -17,7 +17,7 @@ interface Props {
 }
 
 export const GoScoreModal = ({ open, onClose, finalScore, newSubnet, opponent }: Props): React.ReactElement => {
-  const classes = boardStyles();
+  const { classes } = boardStyles();
 
   const blackScore = finalScore[GoColor.black];
   const whiteScore = finalScore[GoColor.white];
diff --git a/src/Go/ui/GoScorePowerSummary.tsx b/src/Go/ui/GoScorePowerSummary.tsx
index 042e920e6..e102e3815 100644
--- a/src/Go/ui/GoScorePowerSummary.tsx
+++ b/src/Go/ui/GoScorePowerSummary.tsx
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export const GoScorePowerSummary = ({ finalScore, opponent }: Props) => {
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const status = getOpponentStats(opponent);
   const winStreak = status.winStreak;
   const oldWinStreak = status.winStreak;
diff --git a/src/Go/ui/GoScoreSummaryTable.tsx b/src/Go/ui/GoScoreSummaryTable.tsx
index 8118780aa..f89429704 100644
--- a/src/Go/ui/GoScoreSummaryTable.tsx
+++ b/src/Go/ui/GoScoreSummaryTable.tsx
@@ -12,7 +12,7 @@ interface GoScoreSummaryTableProps {
 }
 
 export const GoScoreSummaryTable = ({ score, opponent }: GoScoreSummaryTableProps) => {
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const blackScore = score[GoColor.black];
   const whiteScore = score[GoColor.white];
   const blackPlayerName = opponent === GoOpponent.none ? GoColor.black : "You";
diff --git a/src/Go/ui/GoStatusPage.tsx b/src/Go/ui/GoStatusPage.tsx
index 2848c3f7c..0ea2c48f8 100644
--- a/src/Go/ui/GoStatusPage.tsx
+++ b/src/Go/ui/GoStatusPage.tsx
@@ -13,7 +13,7 @@ import { GoOpponent } from "@enums";
 
 export const GoStatusPage = (): React.ReactElement => {
   useRerender(400);
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const score = getScore(Go.currentGame);
   const opponent = Go.currentGame.ai;
   const playedOpponentList = getRecordKeys(Go.stats).filter((o) => o !== GoOpponent.none);
diff --git a/src/Go/ui/GoSubnetSearch.tsx b/src/Go/ui/GoSubnetSearch.tsx
index 40ad0be59..ac73081b1 100644
--- a/src/Go/ui/GoSubnetSearch.tsx
+++ b/src/Go/ui/GoSubnetSearch.tsx
@@ -21,7 +21,7 @@ interface IProps {
 const boardSizeOptions = boardSizes.filter((size) => size !== 19);
 
 export const GoSubnetSearch = ({ open, search, cancel, showInstructions }: IProps): React.ReactElement => {
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const [opponent, setOpponent] = useState<GoOpponent>(Go.currentGame?.ai ?? GoOpponent.SlumSnakes);
   const preselectedBoardSize =
     opponent === GoOpponent.w0r1d_d43m0n ? 19 : Math.min(Go.currentGame?.board?.[0]?.length ?? 7, 13);
diff --git a/src/Go/ui/GoTutorialChallenge.tsx b/src/Go/ui/GoTutorialChallenge.tsx
index e416642c2..53186223e 100644
--- a/src/Go/ui/GoTutorialChallenge.tsx
+++ b/src/Go/ui/GoTutorialChallenge.tsx
@@ -33,7 +33,7 @@ export function GoTutorialChallenge({
   incorrectText2,
 }: IProps): React.ReactElement {
   const stateRef = useRef(getStateCopy(state));
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   const [displayText, setDisplayText] = useState(description);
   const [showReset, setShowReset] = useState(false);