diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 55ea01f92bc1..a4e0c0482850 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -65,6 +65,7 @@
 
     <div id="compositionDisplay"></div>
     <mount data-component="keymap"></mount>
+    <mount data-component="monkey"></mount>
 
     <button
       id="restartTestButton"
@@ -81,18 +82,6 @@
         <div class="liveBurst hidden">1</div>
       </div>
     </div>
-    <div id="monkey" class="hidden">
-      <div class="up"></div>
-      <div class="left hidden"></div>
-      <div class="right hidden"></div>
-      <div class="both hidden"></div>
-      <div class="fast">
-        <div class="up"></div>
-        <div class="left hidden"></div>
-        <div class="right hidden"></div>
-        <div class="both hidden"></div>
-      </div>
-    </div>
     <div id="premidTestMode" class="hidden"></div>
     <div id="premidSecondsLeft" class="hidden"></div>
   </div>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index bc08a6267fa6..34df003ff782 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -17,8 +17,8 @@
 
 @layer custom-styles {
   @import "buttons", "ads", "test-activity", "animations", "caret",
-    "commandline", "core", "fonts", "inputs", "monkey", "popups", "scroll",
-    "test", "loading", "media-queries";
+    "commandline", "core", "fonts", "inputs", "popups", "scroll", "test",
+    "loading", "media-queries";
 
   .chartCanvas {
     width: 100% !important;
diff --git a/frontend/src/styles/monkey.scss b/frontend/src/styles/monkey.scss
deleted file mode 100644
index f5d4776d2fdc..000000000000
--- a/frontend/src/styles/monkey.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-#monkey {
-  width: 308px;
-  height: 0;
-  margin: 0 auto;
-  animation: shake 0s infinite;
-  div {
-    height: 200px;
-    width: 308px;
-    position: fixed;
-  }
-  .up {
-    background-image: url("/images/monkey/m3.png");
-  }
-  .left {
-    background-image: url("/images/monkey/m1.png");
-  }
-  .right {
-    background-image: url("/images/monkey/m2.png");
-  }
-  .both {
-    background-image: url("/images/monkey/m4.png");
-  }
-  .fast {
-    .up {
-      background-image: url("/images/monkey/m3_fast.png");
-    }
-    .left {
-      background-image: url("/images/monkey/m1_fast.png");
-    }
-    .right {
-      background-image: url("/images/monkey/m2_fast.png");
-    }
-    .both {
-      background-image: url("/images/monkey/m4_fast.png");
-    }
-  }
-}
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index 566e152a00e2..28f75b14b638 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -120,4 +120,8 @@
       filter: invert(1);
     }
   }
+
+  .animate-shake {
+    animation: shake 0.1s ease-in-out infinite;
+  }
 }
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index d6ca2b10e06d..3b4f88c755c9 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -24,6 +24,7 @@ import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
 import { SettingsPage } from "./pages/settings/SettingsPage";
 import { Keymap } from "./pages/test/Keymap";
 import { TestModesNotice } from "./pages/test/modes-notice/TestModesNotice";
+import { Monkey } from "./pages/test/Monkey";
 import { TestConfig } from "./pages/test/TestConfig";
 import { Popups } from "./popups/Popups";
 
@@ -50,6 +51,7 @@ const components: Record<string, () => JSXElement> = {
   notfoundpage: () => <NotFoundPage />,
   accountsettingspage: () => <AccountSettingsPage />,
   keymap: () => <Keymap />,
+  monkey: () => <Monkey />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/test/Monkey.tsx b/frontend/src/ts/components/pages/test/Monkey.tsx
new file mode 100644
index 000000000000..32ca0e1492ac
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/Monkey.tsx
@@ -0,0 +1,68 @@
+import { mapRange } from "@monkeytype/util/numbers";
+import { Show } from "solid-js";
+
+import { getConfig } from "../../../config/store";
+import { getMonkeyState } from "../../../states/monkey";
+import { currentLiveStats, isTestActive } from "../../../states/test";
+
+const MIN_WPM = 130;
+const MAX_WPM = 180;
+
+export function Monkey() {
+  const speed = () =>
+    (getConfig.blindMode ? currentLiveStats.raw : currentLiveStats.wpm) ?? 0;
+
+  const fastOpacity = () => mapRange(speed(), MIN_WPM, MAX_WPM, 0, 1);
+
+  const animDuration = () => {
+    const duration = mapRange(speed(), MIN_WPM, MAX_WPM, 0.25, 0.01);
+    return duration === 0.25 ? 0 : duration;
+  };
+
+  const state = () => {
+    const { left, right } = getMonkeyState();
+    if (left && !right) return "left" as const;
+    if (right && !left) return "right" as const;
+    if (!left && !right) return "none" as const;
+    return "both" as const;
+  };
+
+  const monkeyImages = (suffix?: string) => {
+    const cur = state();
+    return [
+      <img
+        src={`/images/monkey/m1${suffix ?? ""}.png`}
+        class={cur === "left" ? "visible" : "hidden"}
+      />,
+      <img
+        src={`/images/monkey/m2${suffix ?? ""}.png`}
+        class={cur === "right" ? "visible" : "hidden"}
+      />,
+      <img
+        src={`/images/monkey/m3${suffix ?? ""}.png`}
+        class={cur === "none" ? "visible" : "hidden"}
+      />,
+      <img
+        src={`/images/monkey/m4${suffix ?? ""}.png`}
+        class={cur === "both" ? "visible" : "hidden"}
+      />,
+    ];
+  };
+
+  return (
+    <Show when={getConfig.monkey && isTestActive()}>
+      <div
+        class="animate-shake flex w-full justify-center"
+        style={{ "animation-duration": `${animDuration()}s` }}
+      >
+        {monkeyImages()}
+        <div
+          class="fixed transition-all duration-1000"
+          style={{ opacity: fastOpacity() }}
+        >
+          {monkeyImages("_fast")}
+        </div>
+      </div>
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/config/setters.ts b/frontend/src/ts/config/setters.ts
index de181296161f..505f009e2b12 100644
--- a/frontend/src/ts/config/setters.ts
+++ b/frontend/src/ts/config/setters.ts
@@ -9,11 +9,11 @@ import {
   canSetConfigWithCurrentFunboxes,
   canSetFunboxWithConfig,
 } from "./funbox-validation";
-import * as TestState from "../test/test-state";
 import { typedKeys, triggerResize, escapeHTML } from "../utils/misc";
 import { camelCaseToWords, capitalizeFirstLetter } from "../utils/strings";
 import { Config, setConfigStore } from "./store";
 import { FunboxName } from "@monkeytype/schemas/configs";
+import { isTestActive } from "../states/test";
 
 export function setConfig<T extends keyof ConfigSchemas.Config>(
   key: T,
@@ -40,7 +40,7 @@ export function setConfig<T extends keyof ConfigSchemas.Config>(
 
   if (
     metadata.changeRequiresRestart &&
-    TestState.isActive &&
+    isTestActive() &&
     Config.funbox.includes("no_quit")
   ) {
     showNoticeNotification(
@@ -153,7 +153,7 @@ export function setQuoteLengthAll(nosave?: boolean): boolean {
 }
 
 export function toggleFunbox(funbox: FunboxName, nosave?: boolean): boolean {
-  if (TestState.isActive && Config.funbox.includes("no_quit")) {
+  if (isTestActive() && Config.funbox.includes("no_quit")) {
     showNoticeNotification(
       "No quit funbox is active. Please finish the test.",
       {
diff --git a/frontend/src/ts/controllers/ad-controller.ts b/frontend/src/ts/controllers/ad-controller.ts
index f8f471827be8..9c1e3cb1c3c4 100644
--- a/frontend/src/ts/controllers/ad-controller.ts
+++ b/frontend/src/ts/controllers/ad-controller.ts
@@ -2,10 +2,10 @@
 import { debounce } from "throttle-debounce";
 import { configEvent } from "../events/config";
 import { Config } from "../config/store";
-import * as TestState from "../test/test-state";
 import * as EG from "./eg-ad-controller";
 import * as PW from "./pw-ad-controller";
 import { onDOMReady, qs } from "../utils/dom";
+import { isTestActive } from "../states/test";
 // import { createEffect } from "solid-js";
 
 const breakpoint = 900;
@@ -41,7 +41,7 @@ function init(): void {
   }
 
   setInterval(() => {
-    if (TestState.isActive) {
+    if (isTestActive()) {
       return;
     }
     if (choice === "eg") {
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index a704fa59c514..dc9b533426c9 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -7,6 +7,7 @@ import * as TestState from "../test/test-state";
 import { showNoticeNotification } from "../states/notifications";
 import { navigationEvent, type NavigateOptions } from "../events/navigation";
 import { authEvent } from "../events/auth";
+import { isTestActive } from "../states/test";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -176,7 +177,7 @@ export async function navigate(
   }
 
   const noQuit = isFunboxActive("no_quit");
-  if (TestState.isActive && noQuit) {
+  if (isTestActive() && noQuit) {
     showNoticeNotification(
       "No quit funbox is active. Please finish the test.",
       {
diff --git a/frontend/src/ts/input/handlers/before-delete.ts b/frontend/src/ts/input/handlers/before-delete.ts
index 50d84df13ea0..b9fd550211da 100644
--- a/frontend/src/ts/input/handlers/before-delete.ts
+++ b/frontend/src/ts/input/handlers/before-delete.ts
@@ -5,9 +5,10 @@ import { getInputElementValue } from "../input-element";
 import * as TestUI from "../../test/test-ui";
 import { isAwaitingNextWord } from "../state";
 import { getInputForWord } from "../../test/events/data";
+import { isTestActive } from "../../states/test";
 
 export function onBeforeDelete(event: InputEvent): void {
-  if (!TestState.isActive) {
+  if (!isTestActive()) {
     event.preventDefault();
     return;
   }
diff --git a/frontend/src/ts/input/handlers/insert-text.ts b/frontend/src/ts/input/handlers/insert-text.ts
index 03289668628b..ff99c205ff6d 100644
--- a/frontend/src/ts/input/handlers/insert-text.ts
+++ b/frontend/src/ts/input/handlers/insert-text.ts
@@ -38,6 +38,7 @@ import {
   shouldInsertSpaceCharacter,
 } from "../helpers/validation";
 import { getCurrentInput, logTestEvent } from "../../test/events/data";
+import { isTestActive } from "../../states/test";
 
 const charOverrides = new Map<string, string>([
   ["…", "..."],
@@ -139,7 +140,7 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
   const data = normalizedData ?? options.data;
 
   // start if needed
-  if (!TestState.isActive) {
+  if (!isTestActive()) {
     TestLogic.startTest(now);
   }
 
diff --git a/frontend/src/ts/input/handlers/keydown.ts b/frontend/src/ts/input/handlers/keydown.ts
index c63b94a503bf..bc6ce4fbfcee 100644
--- a/frontend/src/ts/input/handlers/keydown.ts
+++ b/frontend/src/ts/input/handlers/keydown.ts
@@ -1,7 +1,6 @@
 import { Config } from "../../config/store";
 import * as TestLogic from "../../test/test-logic";
 import { getCharFromEvent } from "../../test/layout-emulator";
-import * as Monkey from "../../test/monkey";
 import { emulateInsertText } from "./insert-text";
 import * as TestState from "../../test/test-state";
 import {
@@ -155,14 +154,6 @@ export async function onKeydown(event: KeyboardEvent): Promise<void> {
     return;
   }
 
-  if (!event.repeat) {
-    //delaying because type() is called before show()
-    // meaning the first keypress of the test is not animated
-    setTimeout(() => {
-      Monkey.type(event);
-    }, 0);
-  }
-
   if (Config.layout !== "default") {
     const emulatedChar = await getCharFromEvent(event);
     if (emulatedChar !== null) {
diff --git a/frontend/src/ts/input/handlers/keyup.ts b/frontend/src/ts/input/handlers/keyup.ts
index 2652404fe493..3b55fa514baa 100644
--- a/frontend/src/ts/input/handlers/keyup.ts
+++ b/frontend/src/ts/input/handlers/keyup.ts
@@ -1,5 +1,4 @@
 import { Config } from "../../config/store";
-import * as Monkey from "../../test/monkey";
 import { logTestEvent } from "../../test/events/data";
 import { getTestEventCode } from "../../test/events/helpers";
 
@@ -25,8 +24,4 @@ export async function onKeyup(event: KeyboardEvent): Promise<void> {
     event.preventDefault();
     return;
   }
-
-  setTimeout(() => {
-    Monkey.stop(event);
-  }, 0);
 }
diff --git a/frontend/src/ts/input/listeners/composition.ts b/frontend/src/ts/input/listeners/composition.ts
index c144fe3bd334..8f7272543782 100644
--- a/frontend/src/ts/input/listeners/composition.ts
+++ b/frontend/src/ts/input/listeners/composition.ts
@@ -6,6 +6,7 @@ import { setLastInsertCompositionTextData } from "../state";
 import * as CompositionDisplay from "../../elements/composition-display";
 import { onInsertText } from "../handlers/insert-text";
 import { logTestEvent } from "../../test/events/data";
+import { isTestActive } from "../../states/test";
 
 const inputEl = getInputElement();
 
@@ -21,7 +22,7 @@ inputEl.addEventListener("compositionstart", (event) => {
   CompositionState.setComposing(true);
   CompositionState.setData("");
   setLastInsertCompositionTextData("");
-  if (!TestState.isActive) {
+  if (!isTestActive()) {
     TestLogic.startTest(now);
   }
 
diff --git a/frontend/src/ts/legacy-states/connection.ts b/frontend/src/ts/legacy-states/connection.ts
index a3a6e3dfc3c4..f9facc27f102 100644
--- a/frontend/src/ts/legacy-states/connection.ts
+++ b/frontend/src/ts/legacy-states/connection.ts
@@ -1,9 +1,9 @@
 import { debounce } from "throttle-debounce";
 import { showSuccessNotification } from "../states/notifications";
 import { connectionEvent } from "../events/connection";
-import * as TestState from "../test/test-state";
 import { onDOMReady } from "../utils/dom";
 import { addBanner, removeBanner } from "../states/banners";
+import { isTestActive } from "../states/test";
 
 let state = navigator.onLine;
 
@@ -38,7 +38,7 @@ const throttledHandleState = debounce(5000, () => {
       noInternetBannerId = undefined;
     }
     bannerAlreadyClosed = false;
-  } else if (!TestState.isActive) {
+  } else if (!isTestActive()) {
     showOfflineBanner();
   }
 });
diff --git a/frontend/src/ts/states/monkey.ts b/frontend/src/ts/states/monkey.ts
new file mode 100644
index 000000000000..1058de6ac004
--- /dev/null
+++ b/frontend/src/ts/states/monkey.ts
@@ -0,0 +1,95 @@
+import { createEffect, createSignal } from "solid-js";
+import { getActivePage } from "./core";
+import { keycodeToKeyboardSide } from "../utils/key-converter";
+import { Keycode } from "../constants/keys";
+import { getConfig } from "../config/store";
+
+const [getMonkeyState, setMonkeyState] = createSignal<{
+  left: boolean;
+  right: boolean;
+}>({ left: false, right: false });
+
+export { getMonkeyState };
+
+const listeners: Array<{ remove: () => void }> = [];
+
+createEffect(() => {
+  for (const listener of listeners) {
+    listener.remove();
+  }
+  listeners.length = 0;
+
+  setMonkeyState({ left: false, right: false });
+
+  if (getActivePage() === "test" && getConfig.monkey) {
+    const onKeyDown = (e: KeyboardEvent): void => handleKey(e, true);
+    const onKeyUp = (e: KeyboardEvent): void => handleKey(e, false);
+
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keyup", onKeyUp);
+
+    listeners.push(
+      {
+        remove: (): void => document.removeEventListener("keydown", onKeyDown),
+      },
+      { remove: (): void => document.removeEventListener("keyup", onKeyUp) },
+    );
+  }
+});
+
+const middleKeysState = { left: false, right: false, last: "right" };
+function handleKey(event: KeyboardEvent, isKeyDown: boolean): void {
+  const { leftSide, rightSide } = keycodeToKeyboardSide(event.code as Keycode);
+  let { left, right } = getMonkeyState();
+
+  if (isKeyDown) {
+    if (leftSide && rightSide) {
+      // if its a middle key handle special case
+      if (middleKeysState.last === "left") {
+        if (!right) {
+          right = true;
+          middleKeysState.last = "right";
+          middleKeysState.right = true;
+        } else if (!left) {
+          left = true;
+          middleKeysState.last = "left";
+          middleKeysState.left = true;
+        }
+      } else {
+        if (!left) {
+          left = true;
+          middleKeysState.last = "left";
+          middleKeysState.left = true;
+        } else if (!right) {
+          right = true;
+          middleKeysState.last = "right";
+          middleKeysState.right = true;
+        }
+      }
+    } else {
+      // normal key set hand
+      left = left || leftSide;
+      right = right || rightSide;
+    }
+  } else {
+    //key up event
+    if (leftSide && rightSide) {
+      // if middle key handle special case
+      if (middleKeysState.left && middleKeysState.last === "left") {
+        left = false;
+        middleKeysState.left = false;
+      } else if (middleKeysState.right && middleKeysState.last === "right") {
+        right = false;
+        middleKeysState.right = false;
+      } else {
+        left = left && !middleKeysState.left;
+        right = right && !middleKeysState.right;
+      }
+    } else {
+      // normal key unset hand
+      left = left && !leftSide;
+      right = right && !rightSide;
+    }
+  }
+  setMonkeyState({ left, right });
+}
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 1c438c2ad88c..900bc10714f9 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -55,6 +55,15 @@ export const [getPaceCaretWpm, setPaceCaretWpm] = createSignal<
 export const [getCurrentQuote, setCurrentQuote] =
   createSignal<QuoteWithTextSplit | null>(null);
 
+export const [isTestActive, setTestActive] = createSignal(false);
+export const [currentLiveStats, setCurrentLiveStats] = createStore<{
+  wpm?: number;
+  acc?: number;
+  raw?: number;
+}>({});
+export const resetCurrentLiveStats = (): void =>
+  setCurrentLiveStats({ wpm: undefined, acc: undefined, raw: undefined });
+
 createEffect(() => {
   getActivePage(); // depend on active page
   setIsLongTest(
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
index a340772b89f3..db091352ae06 100644
--- a/frontend/src/ts/test/live-acc.ts
+++ b/frontend/src/ts/test/live-acc.ts
@@ -1,9 +1,9 @@
 import { Config } from "../config/store";
-import * as TestState from "../test/test-state";
 import { configEvent } from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { qs } from "../utils/dom";
+import { isTestActive } from "../states/test";
 
 const textEl = qs("#liveStatsTextBottom .liveAcc");
 const miniEl = qs("#liveStatsMini .acc");
@@ -30,7 +30,7 @@ let state = false;
 
 export function show(): void {
   if (Config.liveAccStyle === "off") return;
-  if (!TestState.isActive) return;
+  if (!isTestActive()) return;
   if (state) return;
   requestDebouncedAnimationFrame("live-acc.show", () => {
     if (Config.liveAccStyle === "mini") {
diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
index 9ed2ebac2025..8f3d79cc0f50 100644
--- a/frontend/src/ts/test/live-burst.ts
+++ b/frontend/src/ts/test/live-burst.ts
@@ -1,10 +1,10 @@
 import { Config } from "../config/store";
-import * as TestState from "../test/test-state";
 import { configEvent } from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { qs } from "../utils/dom";
+import { isTestActive } from "../states/test";
 
 const textEl = qs("#liveStatsTextBottom .liveBurst");
 const miniEl = qs("#liveStatsMini .burst");
@@ -28,7 +28,7 @@ let state = false;
 
 export function show(): void {
   if (Config.liveBurstStyle === "off") return;
-  if (!TestState.isActive) return;
+  if (!isTestActive()) return;
   if (state) return;
   requestDebouncedAnimationFrame("live-burst.show", () => {
     if (Config.liveBurstStyle === "mini") {
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
index 34a963359d9a..1016c399ee8d 100644
--- a/frontend/src/ts/test/live-speed.ts
+++ b/frontend/src/ts/test/live-speed.ts
@@ -1,10 +1,10 @@
 import { Config } from "../config/store";
-import * as TestState from "./test-state";
 import { configEvent } from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { qs } from "../utils/dom";
+import { isTestActive } from "../states/test";
 
 const textElement = qs("#liveStatsTextBottom .liveSpeed");
 const miniElement = qs("#liveStatsMini .speed");
@@ -32,7 +32,7 @@ let state = false;
 
 export function show(): void {
   if (Config.liveSpeedStyle === "off") return;
-  if (!TestState.isActive) return;
+  if (!isTestActive()) return;
   if (state) return;
   requestDebouncedAnimationFrame("live-speed.show", () => {
     if (Config.liveSpeedStyle === "mini") {
diff --git a/frontend/src/ts/test/monkey.ts b/frontend/src/ts/test/monkey.ts
deleted file mode 100644
index bd9af20b4173..000000000000
--- a/frontend/src/ts/test/monkey.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { mapRange } from "@monkeytype/util/numbers";
-import { Config } from "../config/store";
-import { configEvent } from "../events/config";
-import * as TestState from "../test/test-state";
-import * as KeyConverter from "../utils/key-converter";
-import { qs } from "../utils/dom";
-import { Keycode } from "../constants/keys";
-
-const monkeyEl = qs("#monkey");
-const monkeyFastEl = qs("#monkey .fast");
-
-configEvent.subscribe(({ key }) => {
-  if (key === "monkey" && TestState.isActive) {
-    if (Config.monkey) {
-      monkeyEl?.show();
-    } else {
-      monkeyEl?.hide();
-    }
-  }
-});
-
-let left = false;
-let right = false;
-const middleKeysState = { left: false, right: false, last: "right" };
-
-const upEls = monkeyEl?.qsa(".up");
-const rightEls = monkeyEl?.qsa(".right");
-const leftEls = monkeyEl?.qsa(".left");
-const bothEls = monkeyEl?.qsa(".both");
-
-function update(): void {
-  if (!Config.monkey) return;
-  if (!monkeyEl?.hasClass("hidden")) {
-    upEls?.hide();
-    rightEls?.hide();
-    leftEls?.hide();
-    bothEls?.hide();
-
-    if (left && right) {
-      bothEls?.show();
-    } else if (right) {
-      rightEls?.show();
-    } else if (left) {
-      leftEls?.show();
-    } else {
-      upEls?.show();
-    }
-  }
-}
-
-export function updateFastOpacity(num: number): void {
-  if (!Config.monkey) return;
-  const opacity = mapRange(num, 130, 180, 0, 1);
-  monkeyFastEl?.animate({
-    opacity: opacity,
-    duration: 1000,
-  });
-  let animDuration = mapRange(num, 130, 180, 0.25, 0.01);
-  if (animDuration === 0.25) animDuration = 0;
-  monkeyEl?.setStyle({ animationDuration: `${animDuration}s` });
-}
-
-export function type(event: KeyboardEvent): void {
-  if (!Config.monkey) return;
-
-  const { leftSide, rightSide } = KeyConverter.keycodeToKeyboardSide(
-    event.code as Keycode,
-  );
-  if (leftSide && rightSide) {
-    // if its a middle key handle special case
-    if (middleKeysState.last === "left") {
-      if (!right) {
-        right = true;
-        middleKeysState.last = "right";
-        middleKeysState.right = true;
-      } else if (!left) {
-        left = true;
-        middleKeysState.last = "left";
-        middleKeysState.left = true;
-      }
-    } else {
-      if (!left) {
-        left = true;
-        middleKeysState.last = "left";
-        middleKeysState.left = true;
-      } else if (!right) {
-        right = true;
-        middleKeysState.last = "right";
-        middleKeysState.right = true;
-      }
-    }
-  } else {
-    // normal key set hand
-    left = left || leftSide;
-    right = right || rightSide;
-  }
-
-  update();
-}
-
-export function stop(event: KeyboardEvent): void {
-  if (!Config.monkey) return;
-
-  const { leftSide, rightSide } = KeyConverter.keycodeToKeyboardSide(
-    event.code as Keycode,
-  );
-  if (leftSide && rightSide) {
-    // if middle key handle special case
-    if (middleKeysState.left && middleKeysState.last === "left") {
-      left = false;
-      middleKeysState.left = false;
-    } else if (middleKeysState.right && middleKeysState.last === "right") {
-      right = false;
-      middleKeysState.right = false;
-    } else {
-      left = left && !middleKeysState.left;
-      right = right && !middleKeysState.right;
-    }
-  } else {
-    // normal key unset hand
-    left = left && !leftSide;
-    right = right && !rightSide;
-  }
-
-  update();
-}
-
-export function show(): void {
-  if (!Config.monkey) return;
-  monkeyEl?.show();
-  monkeyEl?.animate({
-    opacity: [0, 1],
-    duration: 125,
-  });
-}
-
-export function hide(): void {
-  monkeyEl?.animate({
-    opacity: [1, 0],
-    duration: 125,
-    onComplete: () => {
-      monkeyEl?.hide();
-      monkeyEl?.setStyle({ animationDuration: "0s" });
-      monkeyFastEl?.setStyle({ opacity: "0" });
-    },
-  });
-}
-
-export function instantHide(): void {
-  monkeyEl?.hide();
-  monkeyEl?.setStyle({ opacity: "0" });
-  monkeyEl?.setStyle({ animationDuration: "0s" });
-  monkeyFastEl?.setStyle({ opacity: "0" });
-}
diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts
index f6047268d80d..57dc36b2472c 100644
--- a/frontend/src/ts/test/pace-caret.ts
+++ b/frontend/src/ts/test/pace-caret.ts
@@ -12,7 +12,12 @@ import {
   getUserAverage10Once,
   getUserDailyBestOnce,
 } from "../collections/results";
-import { getCurrentQuote, isPaceRepeat, setPaceCaretWpm } from "../states/test";
+import {
+  getCurrentQuote,
+  isPaceRepeat,
+  isTestActive,
+  setPaceCaretWpm,
+} from "../states/test";
 
 type Settings = {
   wpm: number;
@@ -116,11 +121,7 @@ export async function init(): Promise<void> {
 
 export async function update(expectedStepEnd: number): Promise<void> {
   const currentSettings = settings;
-  if (
-    currentSettings === null ||
-    !TestState.isActive ||
-    TestState.resultVisible
-  ) {
+  if (currentSettings === null || !isTestActive() || TestState.resultVisible) {
     return;
   }
 
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 786078de305e..d0c0728c8e0c 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -34,6 +34,7 @@ import {
   getRestartCount,
   isPaceRepeat,
   isRepeated,
+  isTestActive,
   pushIncompleteTest,
   resetIncompleteTests,
   setIsPaceRepeat,
@@ -41,6 +42,7 @@ import {
   setIsTestInvalid,
   setLastResult,
   setResultVisible,
+  setTestActive,
   setWordsHaveNewline,
   setWordsHaveNumbers,
   setWordsHaveTab,
@@ -187,7 +189,7 @@ export function startTest(now: number): boolean {
     void AnalyticsController.log("testStartedNoLogin");
   }
 
-  TestState.setActive(true);
+  setTestActive(true);
   Time.set(0);
   TestTimer.clear();
 
@@ -230,7 +232,7 @@ export function restart(options = {} as RestartOptions): void {
   const animationTime = options.noAnim ? 0 : Misc.applyReducedMotion(125);
 
   const noQuit = isFunboxActive("no_quit");
-  if (TestState.isActive && noQuit) {
+  if (isTestActive() && noQuit) {
     showNoticeNotification(
       "No quit funbox is active. Please finish the test.",
       {
@@ -245,7 +247,7 @@ export function restart(options = {} as RestartOptions): void {
     options.event?.preventDefault();
     return;
   }
-  if (TestState.isActive) {
+  if (isTestActive()) {
     if (options.isQuickRestart) {
       if (Config.mode !== "zen") options.event?.preventDefault();
       if (
@@ -299,7 +301,7 @@ export function restart(options = {} as RestartOptions): void {
     currentQuote !== null &&
     Config.language.startsWith(currentQuote.language) &&
     Config.repeatQuotes === "typing" &&
-    (TestState.isActive || failReason !== "")
+    (isTestActive() || failReason !== "")
   ) {
     options.withSameWordset = true;
   }
@@ -335,7 +337,7 @@ export function restart(options = {} as RestartOptions): void {
   setIsTestInvalid(false);
   resetModifierState();
   Caret.hide();
-  TestState.setActive(false);
+  setTestActive(false);
   Replay.pauseReplay();
   TestState.setBailedOut(false);
   Caret.resetPosition();
@@ -885,7 +887,7 @@ function buildCompletedEvent(
 }
 
 export async function finish(difficultyFailed = false): Promise<void> {
-  if (!TestState.isActive) return;
+  if (!isTestActive()) return;
   TestState.setResultCalculating(true);
   const now = performance.now();
   TestTimer.clear(true, now);
@@ -911,7 +913,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
 
   setResultVisible(true);
   TestState.setResultVisible(true);
-  TestState.setActive(false);
+  setTestActive(false);
 
   cleanupData();
 
@@ -1333,7 +1335,7 @@ qs(".pageTest")?.onChild("click", "#testInitFailed button.restart", () => {
 qs(".pageTest")?.onChild("click", "#restartTestButton", () => {
   if (TestState.resultCalculating) return;
   if (
-    TestState.isActive &&
+    isTestActive() &&
     Config.repeatQuotes === "typing" &&
     Config.mode === "quote"
   ) {
@@ -1368,7 +1370,7 @@ qs(".pageTest")?.onChild("click", "#restartTestButtonWithSameWordset", () => {
 // little roadblock for basic cheating
 window.addEventListener("focus", () => {
   if (
-    !TestState.isActive &&
+    !isTestActive() &&
     !TestState.resultVisible &&
     (Config.mode === "time" || Config.mode === "words")
   ) {
@@ -1382,7 +1384,7 @@ window.addEventListener("focus", () => {
 document.addEventListener("visibilitychange", () => {
   if (document.visibilityState !== "visible") return;
   if (
-    !TestState.isActive &&
+    !isTestActive() &&
     !TestState.resultVisible &&
     (Config.mode === "time" || Config.mode === "words")
   ) {
diff --git a/frontend/src/ts/test/test-state.ts b/frontend/src/ts/test/test-state.ts
index 59628dca46bf..1417615b7f27 100644
--- a/frontend/src/ts/test/test-state.ts
+++ b/frontend/src/ts/test/test-state.ts
@@ -1,7 +1,6 @@
 import { promiseWithResolvers } from "../utils/misc";
 import { EventLog } from "./events/types";
 
-export let isActive = false;
 export let bailedOut = false;
 export let selectedQuoteId =
   parseInt(localStorage.getItem("selectedQuoteId") ?? "1", 10) || 1;
@@ -28,10 +27,6 @@ export function setKoreanStatus(val: boolean): void {
   koreanStatus = val;
 }
 
-export function setActive(tf: boolean): void {
-  isActive = tf;
-}
-
 export function setBailedOut(tf: boolean): void {
   bailedOut = tf;
 }
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 022f3673bd3f..56d92b21d235 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -7,7 +7,6 @@ import * as CustomText from "./custom-text";
 import * as TimerProgress from "./timer-progress";
 import * as LiveSpeed from "./live-speed";
 import * as TestWords from "./test-words";
-import * as Monkey from "./monkey";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -33,6 +32,7 @@ import {
 } from "./events/live-cache";
 import { getChars } from "./events/stats";
 import { calculateWpm } from "../utils/numbers";
+import { isTestActive, setCurrentLiveStats } from "../states/test";
 
 let timerStartMs = 0;
 let stopped = true;
@@ -146,13 +146,6 @@ function premid(): void {
   if (timerDebug) console.timeEnd("premid");
 }
 
-function monkey(wpmAndRaw: { wpm: number; raw: number }): void {
-  if (timerDebug) console.time("update monkey");
-  const num = Config.blindMode ? wpmAndRaw.raw : wpmAndRaw.wpm;
-  Monkey.updateFastOpacity(num);
-  if (timerDebug) console.timeEnd("update monkey");
-}
-
 function layoutfluid(): void {
   if (timerDebug) console.time("layoutfluid");
   if (Config.funbox.includes("layoutfluid") && Config.mode === "time") {
@@ -310,12 +303,12 @@ function timerStep(now: number, catchingUp: boolean): void {
     //ui updates
     requestDebouncedAnimationFrame("test-timer.timerStep", () => {
       premid();
-      monkey(wpmAndRaw);
     });
 
     // already using raf
     TimerProgress.update();
     LiveSpeed.update(wpmAndRaw.wpm, wpmAndRaw.raw);
+    setCurrentLiveStats({ wpm: wpmAndRaw.wpm, acc, raw: wpmAndRaw.raw });
 
     //logic
     if (Config.playTimeWarning !== "off") playTimeWarning();
@@ -402,7 +395,7 @@ async function _startOld(now: number): Promise<void> {
     const drift = roundTo2(Math.abs(interval - delay));
     checkIfTimerIsSlow(drift);
     timer = setTimeout(function () {
-      if (!TestState.isActive) {
+      if (!isTestActive()) {
         if (timer !== null) clearTimeout(timer);
         SlowTimer.clear();
         slowTimerCount = 0;
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 4ff359869972..cf28f7205fb6 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -41,7 +41,6 @@ import * as Focus from "../test/focus";
 import * as TimerProgress from "../test/timer-progress";
 import * as LiveBurst from "./live-burst";
 import * as LiveSpeed from "./live-speed";
-import * as Monkey from "./monkey";
 import {
   blurInputElement,
   focusInputElement,
@@ -65,7 +64,12 @@ import {
 } from "../utils/dom";
 import { getTheme } from "../states/theme";
 import { skipBreakdownEvent } from "../states/header";
-import { getCurrentQuote, wordsHaveNewline } from "../states/test";
+import {
+  getCurrentQuote,
+  isTestActive,
+  resetCurrentLiveStats,
+  wordsHaveNewline,
+} from "../states/test";
 import {
   getCorrectedWordsHistory,
   getInputHistory,
@@ -93,7 +97,7 @@ export function focusWords(force = false): void {
     blurInputElement();
   }
   focusInputElement(true);
-  if (TestState.isActive) {
+  if (isTestActive()) {
     keepWordsInputInTheCenter(true);
   } else {
     const typingTest = document.querySelector<HTMLElement>("#typingTest");
@@ -1895,7 +1899,6 @@ export async function afterTestWordChange(
 
 export function onTestStart(): void {
   Focus.set(true);
-  Monkey.show();
   TimerProgress.show();
   LiveSpeed.show();
   LiveAcc.show();
@@ -1916,7 +1919,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   LiveAcc.reset();
   TimerProgress.instantHide();
   TimerProgress.reset();
-  Monkey.instantHide();
+  resetCurrentLiveStats();
   LayoutfluidFunboxTimer.instantHide();
   updatePremid();
   focusWords(true);
@@ -1954,7 +1957,6 @@ export function onTestFinish(): void {
   LiveBurst.hide();
   TimerProgress.hide();
   OutOfFocus.hide();
-  Monkey.hide();
   if (Config.playSoundOnClick === "16") {
     void SoundController.playFartReverb();
   }
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 4e8063cd0752..ca15f28d2940 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -8,7 +8,7 @@ import { configEvent } from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { animate } from "animejs";
-import { getCurrentQuote } from "../states/test";
+import { getCurrentQuote, isTestActive } from "../states/test";
 
 const barEl = document.querySelector("#barTimerProgress .bar") as HTMLElement;
 const barOpacityEl = document.querySelector(
@@ -30,7 +30,7 @@ function showElement(el: HTMLElement): void {
 }
 
 export function show(): void {
-  if (!TestState.isActive) return;
+  if (!isTestActive()) return;
   requestDebouncedAnimationFrame("timer-progress.show", () => {
     if (Config.mode !== "zen" && Config.timerStyle === "bar") {
       showElement(barOpacityEl);
@@ -246,7 +246,7 @@ export function update(): void {
 }
 
 export function updateStyle(): void {
-  if (!TestState.isActive) return;
+  if (!isTestActive()) return;
   hide();
   update();
   if (Config.timerStyle === "off") return;
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 2283c1870186..aa460fee676f 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -17,6 +17,7 @@ import { qs, qsr } from "./utils/dom";
 import { createEffect } from "solid-js";
 import fileStorage from "./utils/file-storage";
 import { convertRemToPixels } from "./utils/numbers";
+import { isTestActive } from "./states/test";
 
 let isPreviewingFont = false;
 export function previewFontFamily(font: FontName): void {
@@ -94,7 +95,7 @@ window.addEventListener("beforeunload", (event) => {
   ) {
     //ignore
   } else {
-    if (TestState.isActive) {
+    if (isTestActive()) {
       event.preventDefault();
       // Included for legacy support, e.g. Chrome/Edge < 119
       // oxlint-disable-next-line no-deprecated