diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index a5cf80b41e21..a3110ca39996 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -1438,7 +1438,7 @@
       </div>
       <div class="text">Apply various effects to the custom background.</div>
       <div class="groups">
-        <div class="group blur">
+        <div class="group blur-filter">
           <div class="title">blur</div>
           <div class="value"></div>
           <input type="range" min="0" max="5" value="0" step="0.1" />
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 6a81fb596d29..9d1b742572ce 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -15,8 +15,11 @@
   }
 }
 
+// the screenshotting library has some issues with css layers
+@import "fonts";
+
 @layer custom-styles {
-  @import "buttons", "fonts", "404", "ads", "account", "animations", "caret",
+  @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "inputs", "keymap", "login", "monkey", "nav",
     "notifications", "popups", "profile", "scroll", "settings",
     "account-settings", "leaderboards", "test", "loading", "friends",
diff --git a/frontend/src/styles/vendor.scss b/frontend/src/styles/vendor.scss
index a97b0842ab56..8ce1826bcdb2 100644
--- a/frontend/src/styles/vendor.scss
+++ b/frontend/src/styles/vendor.scss
@@ -1,7 +1,7 @@
-@import "normalize.css" layer(normalize);
+@import "fontawesome-5"; // the screenshotting library has some issues with css layers
 
+@import "normalize.css" layer(normalize);
 @layer vendor {
-  @import "fontawesome-5";
   @import "slim-select/styles";
   @import "balloon-css/src/balloon";
 }
diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 32c4bcee956b..d154f29ed578 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -1,7 +1,8 @@
 import { JSXElement } from "solid-js";
 
-import { getFocus } from "../../../signals/core";
+import { getFocus, getIsScreenshotting } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
+import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
 
 import { Keytips } from "./Keytips";
@@ -10,7 +11,11 @@ import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   return (
-    <footer class="text-sub relative text-xs">
+    <footer
+      class={cn("text-sub relative text-xs", {
+        "opacity-0": getIsScreenshotting(),
+      })}
+    >
       <Keytips />
 
       <div
diff --git a/frontend/src/ts/components/layout/overlays/Overlays.tsx b/frontend/src/ts/components/layout/overlays/Overlays.tsx
index 88aa2b82649c..f57b236c0c3f 100644
--- a/frontend/src/ts/components/layout/overlays/Overlays.tsx
+++ b/frontend/src/ts/components/layout/overlays/Overlays.tsx
@@ -1,6 +1,8 @@
 import { JSXElement } from "solid-js";
 
+import { getIsScreenshotting } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
+import { cn } from "../../../utils/cn";
 import { ScrollToTop } from "../footer/ScrollToTop";
 
 import { Banners } from "./Banners";
@@ -15,7 +17,12 @@ export function Overlays(): JSXElement {
       <button
         type="button"
         id="commandLineMobileButton"
-        class="bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12"
+        class={cn(
+          "bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12",
+          {
+            "opacity-0": getIsScreenshotting(),
+          },
+        )}
         onClick={() => {
           showModal("Commandline");
         }}
diff --git a/frontend/src/ts/elements/custom-background-filter.ts b/frontend/src/ts/elements/custom-background-filter.ts
index 9e056e761c4d..5fc35e809b79 100644
--- a/frontend/src/ts/elements/custom-background-filter.ts
+++ b/frontend/src/ts/elements/custom-background-filter.ts
@@ -55,7 +55,7 @@ export function apply(): void {
 
 function syncSliders(): void {
   section
-    .qs<HTMLInputElement>(".blur input")
+    .qs<HTMLInputElement>(".blur-filter input")
     ?.setValue(filters.blur.value.toString());
   section
     .qs<HTMLInputElement>(".brightness input")
@@ -69,7 +69,7 @@ function syncSliders(): void {
 }
 
 function updateNumbers(): void {
-  section.qs(".blur .value")?.setHtml(filters.blur.value.toFixed(1));
+  section.qs(".blur-filter .value")?.setHtml(filters.blur.value.toFixed(1));
   section
     .qs(".brightness .value")
     ?.setHtml(filters.brightness.value.toFixed(1));
@@ -90,9 +90,9 @@ function loadConfig(config: CustomBackgroundFilter): void {
   updateUI();
 }
 
-section.qs(".blur input")?.on("input", () => {
+section.qs(".blur-filter input")?.on("input", () => {
   filters.blur.value = parseFloat(
-    section.qs<HTMLInputElement>(".blur input")?.getValue() ?? "0",
+    section.qs<HTMLInputElement>(".blur-filter input")?.getValue() ?? "0",
   );
   updateNumbers();
   apply();
diff --git a/frontend/src/ts/modals/quote-search.ts b/frontend/src/ts/modals/quote-search.ts
index f9442110d618..b70941e4470b 100644
--- a/frontend/src/ts/modals/quote-search.ts
+++ b/frontend/src/ts/modals/quote-search.ts
@@ -472,9 +472,9 @@ async function toggleFavoriteForQuote(quoteId: string): Promise<void> {
 
   const alreadyFavorited = QuotesController.isQuoteFavorite(quote);
 
-  const $button = modal
+  const button = modal
     .getModal()
-    .qsr(`.searchResult[data-quote-id=${quoteId}] .textButton.favorite i`);
+    .qsr(`.searchResult[data-quote-id="${quoteId}"] .textButton.favorite i`);
   const dbSnapshot = DB.getSnapshot();
   if (!dbSnapshot) return;
 
@@ -483,7 +483,7 @@ async function toggleFavoriteForQuote(quoteId: string): Promise<void> {
       showLoaderBar();
       await QuotesController.setQuoteFavorite(quote, false);
       hideLoaderBar();
-      $button.removeClass("fas").addClass("far");
+      button.removeClass("fas").addClass("far");
     } catch (e) {
       hideLoaderBar();
       const message = createErrorMessage(
@@ -497,7 +497,7 @@ async function toggleFavoriteForQuote(quoteId: string): Promise<void> {
       showLoaderBar();
       await QuotesController.setQuoteFavorite(quote, true);
       hideLoaderBar();
-      $button.removeClass("far").addClass("fas");
+      button.removeClass("far").addClass("fas");
     } catch (e) {
       hideLoaderBar();
       const message = createErrorMessage(e, "Failed to add quote to favorites");
diff --git a/frontend/src/ts/modals/saved-texts.ts b/frontend/src/ts/modals/saved-texts.ts
index 051b3fb816ec..5f924bb5e40c 100644
--- a/frontend/src/ts/modals/saved-texts.ts
+++ b/frontend/src/ts/modals/saved-texts.ts
@@ -47,7 +47,7 @@ async function fill(): Promise<void> {
   }
   longListEl.setHtml(longList);
 
-  modalEl.qs(".list .savedText .button.delete")?.on("click", (e) => {
+  modalEl.qsa(".list .savedText .button.delete")?.on("click", (e) => {
     const name = (e.target as HTMLElement)
       .closest(".savedText")
       ?.getAttribute("data-name");
@@ -60,7 +60,7 @@ async function fill(): Promise<void> {
     });
   });
 
-  modalEl.qs(".listLong .savedLongText .button.delete")?.on("click", (e) => {
+  modalEl.qsa(".listLong .savedLongText .button.delete")?.on("click", (e) => {
     const name = (e.target as HTMLElement)
       .closest(".savedLongText")
       ?.getAttribute("data-name");
@@ -74,7 +74,7 @@ async function fill(): Promise<void> {
   });
 
   modalEl
-    .qs(".listLong .savedLongText .button.resetProgress")
+    .qsa(".listLong .savedLongText .button.resetProgress")
     ?.on("click", (e) => {
       const name = (e.target as HTMLElement)
         .closest(".savedLongText")
@@ -88,14 +88,14 @@ async function fill(): Promise<void> {
       });
     });
 
-  modalEl.qs(".list .savedText .button.name")?.on("click", (e) => {
+  modalEl.qsa(".list .savedText .button.name")?.on("click", (e) => {
     const name = (e.target as HTMLElement).textContent;
     CustomTextState.setCustomTextName(name, false);
     const text = getSavedText(name, false);
     hide({ modalChainData: { text, long: false } });
   });
 
-  modalEl.qs(".listLong .savedLongText .button.name")?.on("click", (e) => {
+  modalEl.qsa(".listLong .savedLongText .button.name")?.on("click", (e) => {
     const name = (e.target as HTMLElement).textContent;
     CustomTextState.setCustomTextName(name, true);
     const text = getSavedText(name, true);
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index 8204b30eba81..f3c6127b08e0 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -28,3 +28,4 @@ export const [getCommandlineSubgroup, setCommandlineSubgroup] = createSignal<
 
 export const [getFocus, setFocus] = createSignal(false);
 export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
+export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 8da4653d464f..d30d136573c1 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -1409,6 +1409,7 @@ ConfigEvent.subscribe(async ({ key }) => {
     ((ChartController.result.options as PluginChartOptions<"line" | "scatter">)
       .plugins.annotation.annotations as AnnotationOptions<"line">[]) =
       resultAnnotation;
+    ChartController.result.update();
     ChartController.result.resize();
   }
 });
diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts
index 7f2c42630a11..0349011e6cc4 100644
--- a/frontend/src/ts/test/test-screenshot.ts
+++ b/frontend/src/ts/test/test-screenshot.ts
@@ -5,7 +5,7 @@ import { isAuthenticated } from "../firebase";
 import { getActiveFunboxesWithFunction } from "./funbox/list";
 import * as DB from "../db";
 import { format } from "date-fns/format";
-import { getActivePage } from "../signals/core";
+import { getActivePage, setIsScreenshotting } from "../signals/core";
 import { getHtmlByUserFlags } from "../controllers/user-flag-controller";
 import * as Notifications from "../elements/notifications";
 import { convertRemToPixels } from "../utils/numbers";
@@ -17,22 +17,22 @@ let revealReplay = false;
 let revertCookie = false;
 
 function revert(): void {
+  setIsScreenshotting(false);
   hideLoaderBar();
   qs("#ad-result-wrapper")?.show();
   qs("#ad-result-small-wrapper")?.show();
   qs("#testConfig")?.show();
   qs(".pageTest .screenshotSpacer")?.remove();
   qs("#notificationCenter")?.show();
-  qs("#commandLineMobileButton")?.show();
   qs(".pageTest .ssWatermark")?.hide();
   qs(".pageTest .ssWatermark")?.setText("monkeytype.com"); // Reset watermark text
   qs(".pageTest .buttons")?.show();
   qs("noscript")?.show();
   qs("#nocss")?.show();
-  qsa("header, footer")?.removeClass("invisible");
+  qs("header")?.removeClass("invisible");
   qs("#result")?.removeClass("noBalloons");
   qs(".wordInputHighlight")?.show();
-  qs(".highlightContainer")?.show();
+  qsa(".highlightContainer")?.show();
   if (revertCookie) qs("#cookiesModal")?.show();
   if (revealReplay) qs("#resultReplay")?.show();
   if (!isAuthenticated()) {
@@ -84,9 +84,10 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
       .map((el) => `<span>${el}</span>`)
       .join("<span class='pipe'>|</span>"),
   );
+
+  setIsScreenshotting(true);
   qs(".pageTest .buttons")?.hide();
   qs("#notificationCenter")?.hide();
-  qs("#commandLineMobileButton")?.hide();
   qs(".pageTest .loginTip")?.hide();
   qs("noscript")?.hide();
   qs("#nocss")?.hide();
@@ -96,10 +97,10 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
   // Ensure spacer is removed before adding a new one if function is called rapidly
   qs(".pageTest .screenshotSpacer")?.remove();
   qs(".page.pageTest")?.prependHtml("<div class='screenshotSpacer'></div>");
-  qsa("header, footer")?.addClass("invisible");
+  qs("header")?.addClass("invisible");
   qs("#result")?.addClass("noBalloons");
   qs(".wordInputHighlight")?.hide();
-  qs(".highlightContainer")?.hide();
+  qsa(".highlightContainer")?.hide();
   if (revertCookie) qs("#cookiesModal")?.hide();
 
   for (const fb of getActiveFunboxesWithFunction("clearGlobal")) {
@@ -122,8 +123,6 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
   const sourceX = src.screenBounds().left ?? 0;
   const sourceY = src.screenBounds().top ?? 0;
 
-  console.log(sourceX, sourceY);
-
   const sourceWidth = src.getOuterWidth();
   const sourceHeight = src.getOuterHeight();
   const paddingX = convertRemToPixels(2);