diff --git a/src/Infiltration/ui/GameTimer.tsx b/src/Infiltration/ui/GameTimer.tsx
index 7bd25e563..335fe4925 100644
--- a/src/Infiltration/ui/GameTimer.tsx
+++ b/src/Infiltration/ui/GameTimer.tsx
@@ -1,19 +1,8 @@
-import { LinearProgress, Paper } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import withStyles from "@mui/styles/withStyles";
+import { Paper } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
 import { use } from "../../ui/Context";
-
-const TimerProgress = withStyles((theme: Theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-  bar: {
-    transition: "none",
-    backgroundColor: theme.palette.primary.main,
-  },
-}))(LinearProgress);
+import { ProgressBar } from "../../ui/React/Progress";
 
 interface IProps {
   millis: number;
@@ -43,10 +32,10 @@ export function GameTimer(props: IProps): React.ReactElement {
   // TODO(hydroflame): there's like a bug where it triggers the end before the
   // bar physically reaches the end
   return props.noPaper ? (
-    <TimerProgress variant="determinate" value={v} color="primary" />
+    <ProgressBar variant="determinate" value={v} color="primary" />
   ) : (
     <Paper sx={{ p: 1, mb: 1 }}>
-      <TimerProgress variant="determinate" value={v} color="primary" />
+      <ProgressBar variant="determinate" value={v} color="primary" />
     </Paper>
   );
 }
diff --git a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
index ec43ce05d..82a98a706 100644
--- a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
+++ b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
@@ -1,23 +1,19 @@
+import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
 import React, { useState } from "react";
-
-import { Box, Paper, Typography, Button, Tooltip } from "@mui/material";
-
 import { CONSTANTS } from "../../../Constants";
 import { Crimes } from "../../../Crime/Crimes";
-import { numeralWrapper } from "../../../ui/numeralFormat";
-import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
-import { use } from "../../../ui/Context";
 import { FactionWorkType } from "../../../Faction/FactionWorkTypeEnum";
-
+import { use } from "../../../ui/Context";
+import { numeralWrapper } from "../../../ui/numeralFormat";
+import { ProgressBar } from "../../../ui/React/Progress";
 import { Sleeve } from "../Sleeve";
 import { SleeveTaskType } from "../SleeveTaskTypesEnum";
-
-import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
-import { TravelModal } from "./TravelModal";
-import { StatsElement, EarningsElement } from "./StatsElement";
-import { MoreStatsModal } from "./MoreStatsModal";
 import { MoreEarningsModal } from "./MoreEarningsModal";
+import { MoreStatsModal } from "./MoreStatsModal";
+import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
+import { EarningsElement, StatsElement } from "./StatsElement";
 import { TaskSelector } from "./TaskSelector";
+import { TravelModal } from "./TravelModal";
 
 interface IProps {
   sleeve: Sleeve;
@@ -131,74 +127,70 @@ export function SleeveElem(props: IProps): React.ReactElement {
   }
 
   return (
-    <Box component={Paper} sx={{ width: "auto" }}>
-      <Box sx={{ m: 1 }}>
-        <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%", gap: 1 }}>
-          <Box>
-            <StatsElement sleeve={props.sleeve} />
-            <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
-              <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
-              <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
-              <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
-                <span>
-                  <Button
-                    onClick={() => setTravelOpen(true)}
-                    disabled={player.money < CONSTANTS.TravelCost}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Travel
-                  </Button>
-                </span>
-              </Tooltip>
-              <Tooltip
-                title={
-                  props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""
-                }
-              >
-                <span>
-                  <Button
-                    onClick={() => setAugmentationsOpen(true)}
-                    disabled={props.sleeve.shock < 100}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Manage Augmentations
-                  </Button>
-                </span>
-              </Tooltip>
-            </Box>
+    <>
+      <Paper sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 1fr", width: "auto", gap: 1 }}>
+        <span>
+          <StatsElement sleeve={props.sleeve} />
+          <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
+            <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
+            <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
+            <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
+              <span>
+                <Button
+                  onClick={() => setTravelOpen(true)}
+                  disabled={player.money < CONSTANTS.TravelCost}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Travel
+                </Button>
+              </span>
+            </Tooltip>
+            <Tooltip
+              title={props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""}
+            >
+              <span>
+                <Button
+                  onClick={() => setAugmentationsOpen(true)}
+                  disabled={props.sleeve.shock < 100}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Manage Augmentations
+                </Button>
+              </span>
+            </Tooltip>
           </Box>
-          <Box>
-            <EarningsElement sleeve={props.sleeve} />
-            <Box>
-              <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
-              <Button onClick={setTask} sx={{ width: "100%" }}>
-                Set Task
-              </Button>
-              <Typography>{desc}</Typography>
-              <Typography>
-                {props.sleeve.currentTask === SleeveTaskType.Crime &&
-                  createProgressBarText({
-                    progress: props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime,
-                    totalTicks: 25,
-                  })}
-              </Typography>
-            </Box>
-          </Box>
-          <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
-          <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
-          <TravelModal
-            open={travelOpen}
-            onClose={() => setTravelOpen(false)}
-            sleeve={props.sleeve}
-            rerender={props.rerender}
-          />
-          <SleeveAugmentationsModal
-            open={augmentationsOpen}
-            onClose={() => setAugmentationsOpen(false)}
-            sleeve={props.sleeve}
-          />
-        </Box>
-      </Box>
-    </Box>
+        </span>
+        <span>
+          <EarningsElement sleeve={props.sleeve} />
+          <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
+          <Button onClick={setTask} sx={{ width: "100%" }}>
+            Set Task
+          </Button>
+          <Typography>{desc}</Typography>
+          <Typography>
+            {props.sleeve.currentTask === SleeveTaskType.Crime && (
+              <ProgressBar
+                variant="determinate"
+                value={(props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime) * 100}
+                color="primary"
+              />
+            )}
+          </Typography>
+        </span>
+      </Paper>
+      <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
+      <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
+      <TravelModal
+        open={travelOpen}
+        onClose={() => setTravelOpen(false)}
+        sleeve={props.sleeve}
+        rerender={props.rerender}
+      />
+      <SleeveAugmentationsModal
+        open={augmentationsOpen}
+        onClose={() => setAugmentationsOpen(false)}
+        sleeve={props.sleeve}
+      />
+    </>
   );
 }
diff --git a/src/ui/React/Progress.tsx b/src/ui/React/Progress.tsx
new file mode 100644
index 000000000..0a29ae311
--- /dev/null
+++ b/src/ui/React/Progress.tsx
@@ -0,0 +1,13 @@
+import LinearProgress from "@mui/material/LinearProgress";
+import { Theme } from "@mui/material/styles";
+import withStyles from "@mui/styles/withStyles";
+
+export const ProgressBar = withStyles((theme: Theme) => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  bar: {
+    transition: "none",
+    backgroundColor: theme.palette.primary.main,
+  },
+}))(LinearProgress);
diff --git a/src/ui/React/StatsRow.tsx b/src/ui/React/StatsRow.tsx
index 405abcc26..030670791 100644
--- a/src/ui/React/StatsRow.tsx
+++ b/src/ui/React/StatsRow.tsx
@@ -16,19 +16,21 @@ interface IProps {
   name: string;
   color: string;
   classes?: any;
-  data: ITableRowData;
+  data?: ITableRowData;
   children?: React.ReactElement;
 }
 
 export const StatsRow = ({ name, color, classes = useStyles(), children, data }: IProps): React.ReactElement => {
-  let content;
+  let content = "";
 
-  if (data.content !== undefined) {
-    content = data.content;
-  } else if (data.level !== undefined && data.exp !== undefined) {
-    content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
-  } else if (data.level !== undefined && data.exp === undefined) {
-    content = `${formatNumber(data.level, 0)}`;
+  if (data) {
+    if (data.content !== undefined) {
+      content = data.content;
+    } else if (data.level !== undefined && data.exp !== undefined) {
+      content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
+    } else if (data.level !== undefined && data.exp === undefined) {
+      content = `${formatNumber(data.level, 0)}`;
+    }
   }
 
   return (
diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index cce3a056c..bc266c22d 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -1,26 +1,46 @@
-import React, { useState, useEffect } from "react";
-import { use } from "./Context";
+import { Box, Container, Paper, Table, TableBody, Tooltip } from "@mui/material";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import { uniqueId } from "lodash";
+import React, { useEffect, useState } from "react";
+import { Companies } from "../Company/Companies";
+import { Company } from "../Company/Company";
 import { CONSTANTS } from "../Constants";
+import { Factions } from "../Faction/Factions";
+import { LocationName } from "../Locations/data/LocationNames";
+import { Locations } from "../Locations/Locations";
+import { Settings } from "../Settings/Settings";
+import { convertTimeMsToTimeElapsedString } from "../utils/StringHelperFunctions";
+import { use } from "./Context";
 import { numeralWrapper } from "./numeralFormat";
+import { Money } from "./React/Money";
+import { MoneyRate } from "./React/MoneyRate";
+import { ProgressBar } from "./React/Progress";
 import { Reputation } from "./React/Reputation";
 import { ReputationRate } from "./React/ReputationRate";
-import { MoneyRate } from "./React/MoneyRate";
-import { Money } from "./React/Money";
-import { convertTimeMsToTimeElapsedString } from "../utils/StringHelperFunctions";
-import { Factions } from "../Faction/Factions";
-import { Company } from "../Company/Company";
-import { Companies } from "../Company/Companies";
-import { Locations } from "../Locations/Locations";
-import { LocationName } from "../Locations/data/LocationNames";
-
-import Typography from "@mui/material/Typography";
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
-
-import { createProgressBarText } from "../utils/helpers/createProgressBarText";
+import { StatsRow } from "./React/StatsRow";
 
 const CYCLES_PER_SEC = 1000 / CONSTANTS.MilliPerCycle;
 
+interface IWorkInfo {
+  buttons: {
+    cancel: () => void;
+    unfocus?: () => void;
+  };
+  title: string | React.ReactElement;
+
+  description?: string | React.ReactElement;
+  gains?: (string | React.ReactElement)[];
+  progress?: {
+    elapsed?: number;
+    remaining?: number;
+    percentage?: number;
+  };
+
+  stopText: string;
+  stopTooltip?: string | React.ReactElement;
+}
+
 export function WorkInProgressRoot(): React.ReactElement {
   const setRerender = useState(false)[1];
   function rerender(): void {
@@ -35,499 +55,521 @@ export function WorkInProgressRoot(): React.ReactElement {
   const player = use.Player();
   const router = use.Router();
 
-  if (player.workType == CONSTANTS.WorkTypeFaction) {
-    const faction = Factions[player.currentWorkFactionName];
-    if (!faction) {
-      return (
-        <>
-          <Typography variant="h4" color="primary">
-            You have not joined {player.currentWorkFactionName || "(Faction not found)"} yet or cannot work at this
-            time, please try again if you think this should have worked
-          </Typography>
-          <Button onClick={() => router.toFactions()}>Back to Factions</Button>
-        </>
-      );
-    }
+  const expGains = [
+    player.workHackExpGained > 0 ? (
+      <StatsRow
+        name="Hacking Exp"
+        color={Settings.theme.hack}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workHackExpGained)} (${numeralWrapper.formatExp(
+            player.workHackExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workStrExpGained > 0 ? (
+      <StatsRow
+        name="Strength Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workStrExpGained)} (${numeralWrapper.formatExp(
+            player.workStrExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workDefExpGained > 0 ? (
+      <StatsRow
+        name="Defense Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workDefExpGained)} (${numeralWrapper.formatExp(
+            player.workDefExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workDexExpGained > 0 ? (
+      <StatsRow
+        name="Dexterity Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workDexExpGained)} (${numeralWrapper.formatExp(
+            player.workDexExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workAgiExpGained > 0 ? (
+      <StatsRow
+        name="Agility Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workAgiExpGained)} (${numeralWrapper.formatExp(
+            player.workAgiExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workChaExpGained > 0 ? (
+      <StatsRow
+        name="Charisma Exp"
+        color={Settings.theme.cha}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workChaExpGained)} (${numeralWrapper.formatExp(
+            player.workChaExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+  ];
 
-    function cancel(): void {
-      router.toFaction(faction);
-      player.finishFactionWork(true);
-    }
-    function unfocus(): void {
-      router.toFaction(faction);
-      player.stopFocusing();
-    }
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently {player.currentWorkFactionDescription} for your faction {faction.name}
-            <br />
-            (Current Faction Reputation: <Reputation reputation={faction.playerReputation} />
-            ). <br />
-            You have been doing this for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            You have earned: <br />
-            <br />
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />) reputation for this faction <br />
-            <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
-              </>
-            )}
-            <br />
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
-              </>
-            )}
-            <br />
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br />
-              </>
-            )}
-            <br />
-            You will automatically finish after working for 20 hours. You can cancel earlier if you wish.
-            <br />
-            There is no penalty for cancelling earlier.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Stop Faction Work
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
+  let workInfo: IWorkInfo | null;
 
-  const className = player.className;
-  if (player.className !== "") {
-    function cancel(): void {
-      player.finishClass(true);
-      router.toCity();
-    }
+  switch (player.workType) {
+    case CONSTANTS.WorkTypeFaction: {
+      const faction = Factions[player.currentWorkFactionName];
+      if (!faction) {
+        workInfo = {
+          buttons: {
+            cancel: () => router.toFactions(),
+          },
+          title:
+            `You have not joined ${player.currentWorkFactionName || "(Faction not found)"} at this time,` +
+            " please try again if you think this should have worked",
 
-    function unfocus(): void {
-      router.toCity();
-      player.stopFocusing();
-    }
+          stopText: "Back to Factions",
+        };
+      }
 
-    let stopText = "";
-    if (
-      className == CONSTANTS.ClassGymStrength ||
-      className == CONSTANTS.ClassGymDefense ||
-      className == CONSTANTS.ClassGymDexterity ||
-      className == CONSTANTS.ClassGymAgility
-    ) {
-      stopText = "Stop training at gym";
-    } else {
-      stopText = "Stop taking course";
-    }
+      function cancel(): void {
+        router.toFaction(faction);
+        player.finishFactionWork(true);
+      }
+      function unfocus(): void {
+        router.toFaction(faction);
+        player.stopFocusing();
+      }
 
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You have been {className} for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            This has cost you: <br />
-            <Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
-            You have gained: <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
-              </>
-            )}
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
-              </>
-            )}
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br />
-              </>
-            )}
-            You may cancel at any time
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            {stopText}
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
-
-  if (player.workType == CONSTANTS.WorkTypeCompany) {
-    const comp = Companies[player.companyName];
-    if (comp == null || !(comp instanceof Company)) {
-      return (
-        <>
-          <Typography variant="h4" color="primary">
-            You cannot work for {player.companyName || "(Company not found)"} at this time, please try again if you
-            think this should have worked
-          </Typography>
-          <Button onClick={() => router.toTerminal()}>Back to Terminal</Button>
-        </>
-      );
-    }
-
-    const companyRep = comp.playerReputation;
-
-    function cancel(): void {
-      player.finishWork(true);
-      router.toJob();
-    }
-    function unfocus(): void {
-      player.stopFocusing();
-      router.toJob();
-    }
-
-    const position = player.jobs[player.companyName];
-
-    const penalty = player.cancelationPenalty();
-
-    const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
-            <Reputation reputation={companyRep} />)<br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            You have earned: <br />
-            <br />
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />) reputation for this company <br />
-            <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) hacking exp <br />
-              </>
-            )}
-            <br />
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) agility exp <br />
-              </>
-            )}
-            <br />
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) charisma exp <br />
-              </>
-            )}
-            <br />
-            You will automatically finish after working for 8 hours. You can cancel earlier if you wish, but you will
-            only gain {penaltyString} of the reputation you've earned so far.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Stop Working
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
-
-  if (player.workType == CONSTANTS.WorkTypeCompanyPartTime) {
-    function cancel(): void {
-      player.finishWorkPartTime(true);
-      router.toJob();
-    }
-    function unfocus(): void {
-      player.stopFocusing();
-      router.toJob();
-    }
-    const comp = Companies[player.companyName];
-    let companyRep = 0;
-    if (comp == null || !(comp instanceof Company)) {
-      throw new Error(`Could not find Company: ${player.companyName}`);
-    }
-    companyRep = comp.playerReputation;
-
-    const position = player.jobs[player.companyName];
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
-            <Reputation reputation={companyRep} />)<br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            You have earned: <br />
-            <br />
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />
-            ) reputation for this company <br />
-            <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) hacking exp <br />
-              </>
-            )}
-            <br />
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) agility exp <br />
-              </>
-            )}
-            <br />
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) charisma exp <br />
-              </>
-            )}
-            <br />
-            You will automatically finish after working for 8 hours. You can cancel earlier if you wish, and there will
-            be no penalty because this is a part-time job.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Stop Working
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
-
-  if (player.crimeType !== "") {
-    const percent = Math.round((player.timeWorked / player.timeNeededToCompleteWork) * 100);
-    let numBars = Math.round(percent / 5);
-    if (numBars < 0) {
-      numBars = 0;
-    }
-    if (numBars > 20) {
-      numBars = 20;
-    }
-    // const progressBar = "[" + Array(numBars + 1).join("|") + Array(20 - numBars + 1).join(" ") + "]";
-    const progressBar = createProgressBarText({ progress: (numBars + 1) / 20, totalTicks: 20 });
-
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            <Typography>You are attempting to {player.crimeType}.</Typography>
-            <br />
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently {player.currentWorkFactionDescription} for your faction <b>{faction.name}</b>
+          </>
+        ),
 
+        description: (
+          <>
+            Current Faction Reputation: <Reputation reputation={faction.playerReputation} />
+          </>
+        ),
+        gains: [
+          player.workMoneyGained > 0 ? (
+            <StatsRow name="Money" color={Settings.theme.money}>
+              <Typography>
+                <Money money={player.workMoneyGained} /> (
+                <MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+              </Typography>
+            </StatsRow>
+          ) : (
+            <></>
+          ),
+          <StatsRow name="Faction Reputation" color={Settings.theme.rep}>
             <Typography>
-              Time remaining: {convertTimeMsToTimeElapsedString(player.timeNeededToCompleteWork - player.timeWorked)}
+              <Reputation reputation={player.workRepGained} /> (
+              <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
             </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
 
-            <br />
-            <pre>{progressBar}</pre>
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button
-            onClick={() => {
-              router.toLocation(Locations[LocationName.Slums]);
-              player.finishCrime(true);
-            }}
-          >
-            Cancel crime
-          </Button>
-        </Grid>
-      </Grid>
-    );
+        stopText: "Stop Faction work",
+      };
+
+      break;
+    }
+
+    case CONSTANTS.WorkTypeStudyClass: {
+      const className = player.className;
+      function cancel(): void {
+        player.finishClass(true);
+        router.toCity();
+      }
+
+      function unfocus(): void {
+        router.toCity();
+        player.stopFocusing();
+      }
+
+      let stopText = "";
+      if (
+        className === CONSTANTS.ClassGymStrength ||
+        className === CONSTANTS.ClassGymDefense ||
+        className === CONSTANTS.ClassGymDexterity ||
+        className === CONSTANTS.ClassGymAgility
+      ) {
+        stopText = "Stop training at gym";
+      } else {
+        stopText = "Stop taking course";
+      }
+
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently <b>{className}</b>
+          </>
+        ),
+
+        gains: [
+          <StatsRow name="Total Cost" color={Settings.theme.money}>
+            <Typography>
+              <Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />
+              )
+            </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
+
+        stopText: stopText,
+      };
+
+      break;
+    }
+
+    case CONSTANTS.WorkTypeCompany: {
+      const comp = Companies[player.companyName];
+      if (comp == null || !(comp instanceof Company)) {
+        workInfo = {
+          buttons: {
+            cancel: () => router.toTerminal(),
+          },
+          title:
+            `You cannot work for ${player.companyName || "(Company not found)"} at this time,` +
+            " please try again if you think this should have worked",
+
+          stopText: "Back to Terminal",
+        };
+      }
+
+      const companyRep = comp.playerReputation;
+
+      function cancel(): void {
+        player.finishWork(true);
+        router.toJob();
+      }
+      function unfocus(): void {
+        player.stopFocusing();
+        router.toJob();
+      }
+
+      const position = player.jobs[player.companyName];
+
+      const penalty = player.cancelationPenalty();
+
+      const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
+
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
+          </>
+        ),
+
+        description: (
+          <>
+            Current Company Reputation: <Reputation reputation={companyRep} />
+          </>
+        ),
+        gains: [
+          <StatsRow name="Money" color={Settings.theme.money}>
+            <Typography>
+              <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          <StatsRow name="Company Reputation" color={Settings.theme.rep}>
+            <Typography>
+              <Reputation reputation={player.workRepGained} /> (
+              <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
+
+        stopText: "Stop working",
+        stopTooltip:
+          "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
+          ` but you will only gain ${penaltyString} of the reputation you've earned so far.`,
+      };
+
+      break;
+    }
+
+    case CONSTANTS.WorkTypeCompanyPartTime: {
+      function cancel(): void {
+        player.finishWorkPartTime(true);
+        router.toJob();
+      }
+      function unfocus(): void {
+        player.stopFocusing();
+        router.toJob();
+      }
+      const comp = Companies[player.companyName];
+      let companyRep = 0;
+      if (comp == null || !(comp instanceof Company)) {
+        throw new Error(`Could not find Company: ${player.companyName}`);
+      }
+      companyRep = comp.playerReputation;
+
+      const position = player.jobs[player.companyName];
+
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
+          </>
+        ),
+
+        description: (
+          <>
+            Current Company Reputation: <Reputation reputation={companyRep} />
+          </>
+        ),
+        gains: [
+          <StatsRow name="Money" color={Settings.theme.money}>
+            <Typography>
+              <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          <StatsRow name="Company Reputation" color={Settings.theme.rep}>
+            <Typography>
+              <Reputation reputation={player.workRepGained} /> (
+              <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
+
+        stopText: "Stop working",
+        stopTooltip:
+          "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
+          " and there will be no penalty because this is a part-time job.",
+      };
+
+      break;
+    }
+
+    case CONSTANTS.WorkTypeCrime: {
+      const completion = Math.round((player.timeWorked / player.timeNeededToCompleteWork) * 100);
+
+      workInfo = {
+        buttons: {
+          cancel: () => {
+            router.toLocation(Locations[LocationName.Slums]);
+            player.finishCrime(true);
+          },
+        },
+        title: `You are attempting to ${player.crimeType}`,
+
+        progress: {
+          remaining: player.timeNeededToCompleteWork - player.timeWorked,
+          percentage: completion,
+        },
+
+        stopText: "Cancel crime",
+      };
+
+      break;
+    }
+
+    case CONSTANTS.WorkTypeCreateProgram: {
+      function cancel(): void {
+        player.finishCreateProgramWork(true);
+        router.toTerminal();
+      }
+      function unfocus(): void {
+        router.toTerminal();
+        player.stopFocusing();
+      }
+
+      const completion = (player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100;
+
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently working on coding <b>{player.createProgramName}</b>
+          </>
+        ),
+
+        progress: {
+          elapsed: player.timeWorked,
+          percentage: completion,
+        },
+
+        stopText: "Stop creating program",
+        stopTooltip: "Your work will be saved and you can return to complete the program later.",
+      };
+
+      break;
+    }
+
+    case CONSTANTS.WorkTypeGraftAugmentation: {
+      function cancel(): void {
+        player.finishGraftAugmentationWork(true);
+        router.toTerminal();
+      }
+      function unfocus(): void {
+        router.toTerminal();
+        player.stopFocusing();
+      }
+
+      const completion = (player.timeWorkedGraftAugmentation / player.timeNeededToCompleteWork) * 100;
+
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently working on grafting <b>{player.graftAugmentationName}</b>
+          </>
+        ),
+
+        progress: {
+          elapsed: player.timeWorked,
+          percentage: completion,
+        },
+
+        stopText: "Stop grafting",
+        stopTooltip: (
+          <>
+            If you cancel, your work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned
+          </>
+        ),
+      };
+
+      break;
+    }
+
+    default:
+      router.toTerminal();
+      workInfo = null;
   }
 
-  if (player.createProgramName !== "") {
-    function cancel(): void {
-      player.finishCreateProgramWork(true);
-      router.toTerminal();
-    }
-    function unfocus(): void {
-      router.toTerminal();
-      player.stopFocusing();
-    }
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently working on coding {player.createProgramName}.<br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            The program is {((player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100).toFixed(2)}
-            % complete. <br />
-            If you cancel, your work will be saved and you can come back to complete the program later.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Cancel work on creating program
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
+  if (workInfo === null) {
+    return <></>;
   }
 
-  if (player.graftAugmentationName !== "") {
-    function cancel(): void {
-      player.finishGraftAugmentationWork(true);
-      router.toTerminal();
-    }
-    function unfocus(): void {
-      router.toTerminal();
-      player.stopFocusing();
-    }
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently working on grafting {player.graftAugmentationName}.
-            <br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            The augmentation is{" "}
-            {((player.timeWorkedGraftAugmentation / player.timeNeededToCompleteWork) * 100).toFixed(2)}% done being
-            crafted.
-            <br />
-            If you cancel, your work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Cancel work on grafting Augmentation
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
+  const tooltipInfo =
+    typeof workInfo?.stopTooltip === "string" ? (
+      <Typography>{workInfo.stopTooltip}</Typography>
+    ) : (
+      workInfo.stopTooltip || <></>
     );
-  }
 
-  if (!player.workType) router.toTerminal();
+  return (
+    <Container
+      maxWidth="md"
+      sx={{ display: "flex", flexDirection: "column", justifyContent: "center", height: "calc(100vh - 16px)" }}
+    >
+      <Paper sx={{ p: 1, mb: 1 }}>
+        <Typography variant="h6">{workInfo.title}</Typography>
+        <Typography>{workInfo.description}</Typography>
+        {workInfo.gains && (
+          <Table sx={{ mt: 1 }}>
+            <TableBody>
+              {workInfo.gains.map((row) => (
+                <React.Fragment key={uniqueId()}>{row}</React.Fragment>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </Paper>
+      <Paper sx={{ mb: 1, p: 1 }}>
+        {workInfo.progress !== undefined && (
+          <Box sx={{ mb: 1 }}>
+            <Box
+              display="grid"
+              sx={{
+                gridTemplateColumns: `repeat(${Object.keys(workInfo.progress).length}, 1fr)`,
+                width: "100%",
+                justifyItems: "center",
+                textAlign: "center",
+              }}
+            >
+              {workInfo.progress.elapsed !== undefined && (
+                <Typography>{convertTimeMsToTimeElapsedString(workInfo.progress.elapsed)} elapsed</Typography>
+              )}
+              {workInfo.progress.remaining !== undefined && (
+                <Typography>{convertTimeMsToTimeElapsedString(workInfo.progress.remaining)} remaining</Typography>
+              )}
+              {workInfo.progress.percentage !== undefined && (
+                <Typography>{workInfo.progress.percentage.toFixed(2)}% done</Typography>
+              )}
+            </Box>
+            {workInfo.progress.percentage !== undefined && (
+              <ProgressBar variant="determinate" value={workInfo.progress.percentage} color="primary" />
+            )}
+          </Box>
+        )}
 
-  return <></>;
+        <Box display="grid" sx={{ gridTemplateColumns: `repeat(${Object.keys(workInfo.buttons).length}, 1fr)` }}>
+          {workInfo.stopTooltip ? (
+            <Tooltip title={tooltipInfo}>
+              <Button onClick={workInfo.buttons.cancel}>{workInfo.stopText}</Button>
+            </Tooltip>
+          ) : (
+            <Button onClick={workInfo.buttons.cancel}>{workInfo.stopText}</Button>
+          )}
+          {workInfo.buttons.unfocus && (
+            <Button onClick={workInfo.buttons.unfocus}>Do something else simultaneously</Button>
+          )}
+        </Box>
+      </Paper>
+    </Container>
+  );
 }