diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 7a3e01117..3a677f3e8 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -306,6 +306,14 @@
     // }
   }
 
+  &.hideExtraLetters {
+    .word {
+      & letter.extra {
+        display: none;
+      }
+    }
+  }
+
   &.flipped {
     --correct-letter-color: var(--sub-color);
     --untyped-letter-color: var(--text-color);
diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
index a3a8bc07d..e0365fcb4 100644
--- a/frontend/src/ts/controllers/input-controller.ts
+++ b/frontend/src/ts/controllers/input-controller.ts
@@ -731,27 +731,25 @@ function handleChar(
   )?.offsetTop as number;
   void TestUI.updateWordElement();
 
-  if (!Config.hideExtraLetters) {
-    const newActiveTop = document.querySelector<HTMLElement>(
-      "#words .word.active"
-    )?.offsetTop as number;
-    //stop the word jump by slicing off the last character, update word again
-    if (
-      activeWordTopBeforeJump < newActiveTop &&
-      !TestUI.lineTransition &&
-      TestInput.input.current.length > 1
-    ) {
-      if (Config.mode === "zen") {
-        const currentTop = Math.floor(
-          document.querySelectorAll<HTMLElement>("#words .word")[
-            TestUI.currentWordElementIndex - 1
-          ]?.offsetTop ?? 0
-        );
-        if (!Config.showAllLines) TestUI.lineJump(currentTop);
-      } else {
-        TestInput.input.current = TestInput.input.current.slice(0, -1);
-        void TestUI.updateWordElement();
-      }
+  const newActiveTop = document.querySelector<HTMLElement>(
+    "#words .word.active"
+  )?.offsetTop as number;
+  //stop the word jump by slicing off the last character, update word again
+  if (
+    activeWordTopBeforeJump < newActiveTop &&
+    !TestUI.lineTransition &&
+    TestInput.input.current.length > 1
+  ) {
+    if (Config.mode === "zen") {
+      const currentTop = Math.floor(
+        document.querySelectorAll<HTMLElement>("#words .word")[
+          TestUI.currentWordElementIndex - 1
+        ]?.offsetTop ?? 0
+      );
+      if (!Config.showAllLines) TestUI.lineJump(currentTop);
+    } else {
+      TestInput.input.current = TestInput.input.current.slice(0, -1);
+      void TestUI.updateWordElement();
     }
   }
 
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index e43e6ce7e..dda24feb6 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -164,9 +164,13 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
   }
 
   if (
-    ["highlightMode", "blindMode", "indicateTypos", "tapeMode"].includes(
-      eventKey
-    )
+    [
+      "highlightMode",
+      "blindMode",
+      "indicateTypos",
+      "tapeMode",
+      "hideExtraLetters",
+    ].includes(eventKey)
   ) {
     updateWordWrapperClasses();
   }
@@ -366,6 +370,14 @@ function updateWordWrapperClasses(): void {
     $("#wordsWrapper").removeClass("indicateTyposBelow");
   }
 
+  if (Config.hideExtraLetters) {
+    $("#words").addClass("hideExtraLetters");
+    $("#wordsWrapper").addClass("hideExtraLetters");
+  } else {
+    $("#words").removeClass("hideExtraLetters");
+    $("#wordsWrapper").removeClass("hideExtraLetters");
+  }
+
   const existing =
     $("#words")
       ?.attr("class")
@@ -851,13 +863,11 @@ export async function updateWordElement(inputOverride?: string): Promise<void> {
             : currentLetter
         }</letter>`;
       } else if (currentLetter === undefined) {
-        if (!Config.hideExtraLetters) {
-          let letter = input[i];
-          if (letter === " " || letter === "\t" || letter === "\n") {
-            letter = "_";
-          }
-          ret += `<letter class="incorrect extra ${tabChar}${nlChar}">${letter}</letter>`;
+        let letter = input[i];
+        if (letter === " " || letter === "\t" || letter === "\n") {
+          letter = "_";
         }
+        ret += `<letter class="incorrect extra ${tabChar}${nlChar}">${letter}</letter>`;
       } else {
         ret +=
           `<letter class="incorrect ${tabChar}${nlChar}">` +
@@ -890,7 +900,7 @@ export async function updateWordElement(inputOverride?: string): Promise<void> {
       }
     }
 
-    if (Config.highlightMode === "letter" && Config.hideExtraLetters) {
+    if (Config.highlightMode === "letter") {
       if (input.length > currentWord.length && !Config.blindMode) {
         wordAtIndex.classList.add("error");
       } else if (input.length === currentWord.length) {
@@ -951,7 +961,12 @@ export function scrollTape(): void {
       if (!letters) return;
       for (let i = 0; i < TestInput.input.current.length; i++) {
         const letter = letters[i] as HTMLElement;
-        if (Config.blindMode && letter.classList.contains("extra")) continue;
+        if (
+          (Config.blindMode || Config.hideExtraLetters) &&
+          letter.classList.contains("extra")
+        ) {
+          continue;
+        }
         currentWordWidth += $(letter).outerWidth(true) ?? 0;
       }
     }