From 2f8e408fe02ab65aef36046b8cb26caed8557a39 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 2 Mar 2026 18:29:45 +0100
Subject: [PATCH 1/3] chore: add workflow to check for added todos in a pr

---
 .github/workflows/check-todo.yml | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 .github/workflows/check-todo.yml

diff --git a/.github/workflows/check-todo.yml b/.github/workflows/check-todo.yml
new file mode 100644
index 000000000000..34ee698deace
--- /dev/null
+++ b/.github/workflows/check-todo.yml
@@ -0,0 +1,20 @@
+name: PR Todo Checker
+
+on:
+  pull_request_review_comment:
+    types: [edited, deleted]
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  find_todos:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Check for Todos
+        uses: phntmxyz/pr_todo_checker@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

From 1f5255c3f12e628e594d2a845129632d1a142f2a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 2 Mar 2026 22:04:21 +0100
Subject: [PATCH 2/3] fix: permissions to post comments

---
 .github/workflows/check-todo.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/check-todo.yml b/.github/workflows/check-todo.yml
index 34ee698deace..fe5bc3036ea4 100644
--- a/.github/workflows/check-todo.yml
+++ b/.github/workflows/check-todo.yml
@@ -9,6 +9,9 @@ on:
 jobs:
   find_todos:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write # to comment on PRs
+      contents: read
 
     steps:
       - name: Checkout code

From 17fc4be02c109e53155e63d76d6664070fca8d98 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Mon, 2 Mar 2026 22:12:50 +0100
Subject: [PATCH 3/3] impr: use data-nav-item to address navigation items
 (@fehmer) (#7558)

Co-authored-by: Jack <jack@monkeytype.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/html/header.html               | 12 ++-
 frontend/static/themes/9009.css             | 10 ++-
 frontend/static/themes/aether.css           | 13 ++--
 frontend/static/themes/aurora.css           |  3 +-
 frontend/static/themes/beach.css            |  7 +-
 frontend/static/themes/bingsu.css           |  6 +-
 frontend/static/themes/catppuccin.css       | 14 ++--
 frontend/static/themes/chaos_theory.css     | 64 ++++++++--------
 frontend/static/themes/cheesecake.css       |  2 +-
 frontend/static/themes/desert_oasis.css     | 19 +----
 frontend/static/themes/dmg.css              | 27 +++++--
 frontend/static/themes/dots.css             | 85 +++++----------------
 frontend/static/themes/dracula.css          | 16 ++--
 frontend/static/themes/dualshot.css         | 16 ++--
 frontend/static/themes/fire.css             |  3 +-
 frontend/static/themes/froyo.css            | 13 ++--
 frontend/static/themes/fruit_chew.css       | 13 ++--
 frontend/static/themes/future_funk.css      | 13 ++--
 frontend/static/themes/graen.css            |  7 +-
 frontend/static/themes/grape.css            |  3 +-
 frontend/static/themes/horizon.css          | 13 ++--
 frontend/static/themes/lavender.css         | 19 ++++-
 frontend/static/themes/lil_dragon.css       |  4 +-
 frontend/static/themes/metropolis.css       | 21 +----
 frontend/static/themes/milkshake.css        | 16 ++--
 frontend/static/themes/modern_ink.css       | 17 +----
 frontend/static/themes/moonlight.css        | 36 ++++-----
 frontend/static/themes/mr_sleeves.css       | 21 -----
 frontend/static/themes/oblivion.css         | 13 ++--
 frontend/static/themes/phantom.css          |  3 +-
 frontend/static/themes/retrocast.css        | 19 ++---
 frontend/static/themes/rgb.css              |  3 +-
 frontend/static/themes/sewing_tin.css       |  4 +-
 frontend/static/themes/sewing_tin_light.css |  4 +-
 frontend/static/themes/shadow.css           |  3 +-
 frontend/static/themes/snes.css             | 62 ++++++---------
 frontend/static/themes/stealth.css          |  2 +-
 frontend/static/themes/suisei.css           | 20 +++--
 frontend/static/themes/sunset.css           | 16 ++--
 frontend/static/themes/taro.css             |  8 +-
 frontend/static/themes/terrazzo.css         | 24 +++---
 frontend/static/themes/trackday.css         | 10 +--
 frontend/static/themes/trance.css           |  3 +-
 43 files changed, 288 insertions(+), 399 deletions(-)

diff --git a/frontend/src/html/header.html b/frontend/src/html/header.html
index 7836586376fc..f064e13b3922 100644
--- a/frontend/src/html/header.html
+++ b/frontend/src/html/header.html
@@ -49,6 +49,7 @@ <h1 class="text">
     <a
       id="startTestButton"
       class="textButton view-start"
+      data-nav-item="test"
       href="/"
       onclick="this.blur()"
       router-link
@@ -60,6 +61,7 @@ <h1 class="text">
     </a>
     <a
       class="textButton view-leaderboards"
+      data-nav-item="leaderboards"
       href="/leaderboards"
       onclick="this.blur()"
       router-link
@@ -71,6 +73,7 @@ <h1 class="text">
     </a>
     <a
       class="textButton view-about"
+      data-nav-item="about"
       href="/about"
       onclick="this.blur()"
       router-link
@@ -82,6 +85,7 @@ <h1 class="text">
     </a>
     <a
       class="textButton view-settings"
+      data-nav-item="settings"
       href="/settings"
       onclick="this.blur()"
       router-link
@@ -92,7 +96,11 @@ <h1 class="text">
       </div>
     </a>
     <div class="spacer"></div>
-    <button class="text showAlerts" onclick="this.blur()">
+    <button
+      class="text showAlerts"
+      onclick="this.blur()"
+      data-nav-item="alerts"
+    >
       <div class="icon">
         <i class="fas fa-fw fa-bell"></i>
       </div>
@@ -100,6 +108,7 @@ <h1 class="text">
     </button>
     <a
       class="textButton view-login"
+      data-nav-item="login"
       href="/login"
       onclick="this.blur()"
       router-link
@@ -109,6 +118,7 @@ <h1 class="text">
     <div class="accountButtonAndMenu hidden">
       <a
         class="textButton view-account"
+        data-nav-item="account"
         href="/account"
         onclick="this.blur()"
         router-link
diff --git a/frontend/static/themes/9009.css b/frontend/static/themes/9009.css
index 9c7cb7549656..64d74cdb1e1f 100644
--- a/frontend/static/themes/9009.css
+++ b/frontend/static/themes/9009.css
@@ -3,14 +3,18 @@ kbd {
   background-color: var(--main-color);
 }
 
-nav > .textButton {
+[data-nav-item] {
   color: var(--main-color);
 }
 
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: var(--error-color);
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="alerts"] {
+  color: var(--color-alt);
+}
+
+[data-nav-item="settings"] {
   color: var(--caret-color);
 }
diff --git a/frontend/static/themes/aether.css b/frontend/static/themes/aether.css
index d1e05f8ed290..006cfc771721 100644
--- a/frontend/static/themes/aether.css
+++ b/frontend/static/themes/aether.css
@@ -1,20 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #e4002b;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #c53562;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #95549e;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #6744a1;
 }
 
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #393c73;
 }
diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css
index 2e22ecfa0e8e..8faf3c82c0c8 100644
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@@ -50,8 +50,7 @@ header .button.discord.dotHidden::after {
 #logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-nav .textButton:hover,
-nav button.text:hover,
+[data-nav-item]:hover,
 header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
diff --git a/frontend/static/themes/beach.css b/frontend/static/themes/beach.css
index 8ed2f112d56f..33d916cb1b6d 100644
--- a/frontend/static/themes/beach.css
+++ b/frontend/static/themes/beach.css
@@ -1,8 +1,3 @@
-nav > .textButton:nth-child(1),
-nav > .textButton:nth-child(2),
-nav > .textButton:nth-child(3),
-nav > .textButton:nth-child(4),
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item] {
   color: #ff6f69;
 }
diff --git a/frontend/static/themes/bingsu.css b/frontend/static/themes/bingsu.css
index fa16bdd1ef2b..664786834d40 100644
--- a/frontend/static/themes/bingsu.css
+++ b/frontend/static/themes/bingsu.css
@@ -1,7 +1,3 @@
-/* .word.error{
-  border-bottom: double 4px var(--error-color);
-} */
-
-nav .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: var(--caret-color);
 }
diff --git a/frontend/static/themes/catppuccin.css b/frontend/static/themes/catppuccin.css
index d3768ebccf6c..b197eed19b3b 100644
--- a/frontend/static/themes/catppuccin.css
+++ b/frontend/static/themes/catppuccin.css
@@ -1,27 +1,27 @@
-nav .view-start {
+[data-nav-item="test"] {
   color: #f38ba8;
 }
 
-nav .view-leaderboards {
+[data-nav-item="leaderboards"] {
   color: #fab387;
 }
 
-nav .view-about {
+[data-nav-item="about"] {
   color: #f9e2af;
 }
 
-nav .view-settings {
+[data-nav-item="settings"] {
   color: #a6e3a1;
 }
 
-nav .view-account {
+[data-nav-item="account"] {
   color: #89dceb;
 }
 
-nav .showAlerts {
+[data-nav-item="alerts"] {
   color: #89b4fa;
 }
 
-nav .signInOut {
+[data-nav-item="login"] {
   color: #b4befe;
 }
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index 9f8eb838c9ef..a7d25e112171 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -59,7 +59,7 @@ header #logo .icon {
   align-content: right;
 }
 
-header.focus nav .textButton,
+header.focus [data-nav-item],
 header.focus nav:before,
 header.focus nav:after {
   background: var(--sub-color);
@@ -94,107 +94,103 @@ nav {
   gap: 0.5rem;
 }
 
-nav > .textButton {
+[data-nav-item] {
   border-radius: 10rem i !important;
   color: var(--bg-color);
   transition: 0.5s;
 }
 
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   background: #ab92e1;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   background: #f3ea5d;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   background: #7ae1bf;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   background: #ff5869;
 }
 
-nav > .textButton:nth-child(5) {
+[data-nav-item="account"] {
   background: #fc76d9;
 }
 
-nav > .textButton:nth-child(6) {
-  background: #fc76d9;
+nav .notificationBubble {
+  box-shadow: none;
+  background: var(--color-bg);
+  padding-right: 0.2em;
+  right: 0.85em;
+  left: 2.75em;
 }
 
-nav > .textButton:nth-child(7) {
-  background: #ab92e1;
+nav .level {
+  background: var(--color-bg);
+  color: var(--main-color);
 }
 
-nav > .textButton:nth-child(8) {
-  background: #f3ea5d;
+[data-nav-item="alerts"] {
+  background: #fc76d9;
+}
+
+[data-nav-item="login"] {
+  background: #ab92e1;
 }
 
-body.crtmode nav .textButton:nth-child(1) {
+body.crtmode [data-nav-item="test"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
     -3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav .textButton:nth-child(2) {
+body.crtmode [data-nav-item="leaderboards"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
     -3px 0 color-mix(in srgb, #f3ea5d 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav .textButton:nth-child(3) {
+body.crtmode [data-nav-item="about"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
     -3px 0 color-mix(in srgb, #7ae1bf 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav .textButton:nth-child(4) {
+body.crtmode [data-nav-item="settings"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
     -3px 0 color-mix(in srgb, #ff5869 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav .textButton:nth-child(5) {
+body.crtmode [data-nav-item="account"],
+body.crtmode [data-nav-item="alerts"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
     -3px 0 color-mix(in srgb, #fc76d9 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav .textButton:nth-child(6) {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-    -3px 0 color-mix(in srgb, #fc76d9 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode nav .textButton:nth-child(7) {
+body.crtmode [data-nav-item="login"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
     -3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav .textButton:nth-child(8) {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-    -3px 0 color-mix(in srgb, #f3ea5d 30%, transparent),
-    0 0 3px;
-}
-
 body.crtmode #caret {
   box-shadow: none !important;
   filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
     drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
 }
 
-body.crtmode header.focus nav .textButton {
+body.crtmode header.focus [data-nav-item] {
   box-shadow:
     3px 0 1px var(--crt-sub-color-glow),
     -3px 0 var(--crt-sub-color-glow);
diff --git a/frontend/static/themes/cheesecake.css b/frontend/static/themes/cheesecake.css
index 661de9d00804..1cc659ebb702 100644
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@@ -31,6 +31,6 @@
   }
 }
 
-header > div#logo > div.icon > svg path {
+header .icon > svg path {
   animation: 10s linear infinite 0.1s cheesecake;
 }
diff --git a/frontend/static/themes/desert_oasis.css b/frontend/static/themes/desert_oasis.css
index ade5493f55c3..5ed8f6a608db 100644
--- a/frontend/static/themes/desert_oasis.css
+++ b/frontend/static/themes/desert_oasis.css
@@ -1,20 +1,3 @@
-nav > .textButton:nth-child(1) {
-  color: #76bb40;
-}
-
-nav > .textButton:nth-child(2) {
-  color: #76bb40;
-}
-
-nav > .textButton:nth-child(3) {
-  color: #76bb40;
-}
-
-nav > .textButton:nth-child(4) {
-  color: #76bb40;
-}
-
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item] {
   color: #76bb40;
 }
diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css
index 342d5acc11b9..781b438656e5 100644
--- a/frontend/static/themes/dmg.css
+++ b/frontend/static/themes/dmg.css
@@ -2,12 +2,12 @@ nav {
   gap: 0.5rem;
 }
 
-header.focus nav > .textButton {
+header.focus [data-nav-item] {
   background: var(--bg-color);
   size: 1rem;
 }
 
-header.focus nav > .textButton:nth-child(1) {
+header.focus [data-nav-item="test"] {
   background: #e34c6c;
 }
 
@@ -16,25 +16,38 @@ header.focus nav:after {
   background: var(--sub-color);
 }
 
-nav > .textButton {
+[data-nav-item] {
   border-radius: 10rem !important;
   color: var(--bg-color);
   background: var(--main-color);
 }
 
-body.crtmode nav > .textButton {
+nav .notificationBubble {
+  box-shadow: none;
+  background: var(--color-sub);
+  padding-right: 0.2em;
+  right: 0.85em;
+  left: 2.75em;
+}
+
+nav .level {
+  background: var(--color-bg);
+  color: var(--main-color);
+}
+
+body.crtmode [data-nav-item] {
   box-shadow:
     3px 0 1px var(--crt-main-color-glow),
     -3px 0 var(--crt-main-color-glow),
     0 0 3px;
 }
 
-body.crtmode header.focus nav > .textButton,
-body.crtmode nav > .textButton:hover {
+body.crtmode header.focus [data-nav-item],
+body.crtmode [data-nav-item]:hover {
   box-shadow: none;
 }
 
-body.crtmode header.focus nav > .textButton:nth-child(1) {
+body.crtmode header.focus [data-nav-item="test"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
     -3px 0 color-mix(in srgb, #e34c6c 30%, transparent),
diff --git a/frontend/static/themes/dots.css b/frontend/static/themes/dots.css
index 4c6c27df26a7..9204dd4b9a51 100644
--- a/frontend/static/themes/dots.css
+++ b/frontend/static/themes/dots.css
@@ -2,131 +2,88 @@ nav {
   gap: 0.5rem;
 }
 
-header.focus nav > .textButton,
+header.focus [data-nav-item],
 header.focus nav:before,
 header.focus nav:after {
   background: var(--sub-color);
 }
 
-nav > .textButton {
+[data-nav-item] {
   border-radius: 10rem !important;
   color: #121520;
 }
 
-/* nav:before{
-    content: "";
-    background: #f94348;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: .5rem;
-    border-radius: 10rem;
-} */
-
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   background: #f94348;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   background: #9261ff;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   background: #3cc5f8;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   background: #4acb8a;
 }
 
-header.focus nav > .textButton:nth-child(6) {
+header.focus [data-nav-item="login"],
+header.focus [data-nav-item="account"] {
   background: transparent !important;
 }
 
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="login"],
+[data-nav-item="account"] {
   color: var(--sub-color);
 }
 
-nav > .textButton:nth-child(6):hover {
+[data-nav-item="alerts"]:hover,
+[data-nav-item="login"]:hover,
+[data-nav-item="account"]:hover {
   color: var(--text-color);
 }
 
-nav > .textButton:nth-child(7) {
-  background: #ffd543;
-}
-
-nav > .textButton:nth-child(8) {
-  background: #ff9349;
-}
-
-/* nav > .textButton:nth-child(8) {
-  background: #f94348;
-} */
-
-/* nav:after{
-    content: "";
-    background: #ff9349;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: .5rem;
-    border-radius: 10rem;
-} */
-
-header.focus nav > .textButton.discord::after {
-  border-color: transparent;
-}
-
-nav > .textButton.view-account .xpBar {
+[data-nav-item="account"] .xpBar {
   bottom: -0.75rem !important;
 }
 
-body.crtmode nav > .textButton:nth-child(1) {
+body.crtmode [data-nav-item="test"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
     -3px 0 color-mix(in srgb, #f94348 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(2) {
+body.crtmode [data-nav-item="leaderboards"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
     -3px 0 color-mix(in srgb, #9261ff 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(3) {
+body.crtmode [data-nav-item="about"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
     -3px 0 color-mix(in srgb, #3cc5f8 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(4) {
+body.crtmode [data-nav-item="settings"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
     -3px 0 color-mix(in srgb, #4acb8a 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(7) {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #ffd543 20%, transparent),
-    -3px 0 color-mix(in srgb, #ffd543 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode nav > .textButton:nth-child(8) {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #ff9349 20%, transparent),
-    -3px 0 color-mix(in srgb, #ff9349 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode header.focus nav > .textButton {
+body.crtmode header.focus [data-nav-item] {
   box-shadow:
     3px 0 1px var(--crt-sub-color-glow),
     -3px 0 var(--crt-sub-color-glow);
 }
 
-body.crtmode header.focus nav > .textButton.view-account {
+body.crtmode header.focus [data-nav-item="account"] {
   box-shadow: none;
 }
diff --git a/frontend/static/themes/dracula.css b/frontend/static/themes/dracula.css
index 67871079376b..280443a728df 100644
--- a/frontend/static/themes/dracula.css
+++ b/frontend/static/themes/dracula.css
@@ -1,23 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #ec75c4;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #8be9fd;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #50fa7b;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #f1fa8c;
 }
 
-nav > .textButton:nth-child(5) {
-  color: #ffb86c;
-}
-
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #ffb86c;
 }
diff --git a/frontend/static/themes/dualshot.css b/frontend/static/themes/dualshot.css
index a33e7487807d..68c5d1f6dae7 100644
--- a/frontend/static/themes/dualshot.css
+++ b/frontend/static/themes/dualshot.css
@@ -1,23 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #2884bb;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #25a5a9;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #de9c24;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #d82231;
 }
 
-nav > .textButton:nth-child(5) {
-  color: #212222;
-}
-
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #212222;
 }
diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css
index 2b93ce928502..e94d02b9afde 100644
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@@ -50,8 +50,7 @@ header .button.discord.dotHidden::after {
 #logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-nav .textButton:hover,
-nav button.text:hover,
+[data-nav-item]:hover,
 header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
diff --git a/frontend/static/themes/froyo.css b/frontend/static/themes/froyo.css
index 62d3fd73822a..051d8e103320 100644
--- a/frontend/static/themes/froyo.css
+++ b/frontend/static/themes/froyo.css
@@ -1,20 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #ff7e73;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #f5c370;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #08d9a3;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #0ca5e2;
 }
 
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #875ac6;
 }
diff --git a/frontend/static/themes/fruit_chew.css b/frontend/static/themes/fruit_chew.css
index e62daddc3e19..d6471c6f39e5 100644
--- a/frontend/static/themes/fruit_chew.css
+++ b/frontend/static/themes/fruit_chew.css
@@ -1,20 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #a6bf50;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #c3921a;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #b92221;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #88b6ce;
 }
 
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #661968;
 }
diff --git a/frontend/static/themes/future_funk.css b/frontend/static/themes/future_funk.css
index 2be582304cb0..df3f607f7175 100644
--- a/frontend/static/themes/future_funk.css
+++ b/frontend/static/themes/future_funk.css
@@ -1,20 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #f04e98;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #f8bed6;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #f6eb61;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #a4dbe8;
 }
 
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #a266ed;
 }
diff --git a/frontend/static/themes/graen.css b/frontend/static/themes/graen.css
index ba4b2cc72b00..6e10ab6c4c8a 100644
--- a/frontend/static/themes/graen.css
+++ b/frontend/static/themes/graen.css
@@ -1,8 +1,3 @@
-nav > .textButton:nth-child(1),
-nav > .textButton:nth-child(2),
-nav > .textButton:nth-child(3),
-nav > .textButton:nth-child(4),
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item] {
   color: #601420;
 }
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index aae91a27b7e7..100d24cfa22a 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -50,8 +50,7 @@ header .button.discord.dotHidden::after {
 #logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-nav .textButton:hover,
-nav button.text:hover,
+[data-nav-item]:hover,
 header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
diff --git a/frontend/static/themes/horizon.css b/frontend/static/themes/horizon.css
index b430fa2d3a05..f48f53692e62 100644
--- a/frontend/static/themes/horizon.css
+++ b/frontend/static/themes/horizon.css
@@ -1,20 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #d55170;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #e4a88a;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #db886f;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #db887a;
 }
 
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #ffc819;
 }
diff --git a/frontend/static/themes/lavender.css b/frontend/static/themes/lavender.css
index 3b95e05fe667..fd5c6a8357f5 100644
--- a/frontend/static/themes/lavender.css
+++ b/frontend/static/themes/lavender.css
@@ -1,15 +1,28 @@
-nav .textButton {
+[data-nav-item] {
   border-radius: 10rem !important;
   background: var(--text-color);
   color: var(--main-color);
 }
 
-nav .textButton:hover {
+[data-nav-item]:hover {
   color: var(--bg-color);
   background: var(--text-color);
 }
 
-body.crtmode nav .textButton {
+nav .notificationBubble {
+  box-shadow: none;
+  background: var(--color-bg);
+  padding-right: 0.2em;
+  right: 0.85em;
+  left: 2.75em;
+}
+
+nav .level {
+  background: var(--color-bg);
+  color: var(--text-color);
+}
+
+body.crtmode [data-nav-item] {
   box-shadow:
     3px 0 1px var(--crt-text-color-glow),
     -3px 0 var(--crt-text-color-glow),
diff --git a/frontend/static/themes/lil_dragon.css b/frontend/static/themes/lil_dragon.css
index aeb13923bc6d..0299b9b98937 100644
--- a/frontend/static/themes/lil_dragon.css
+++ b/frontend/static/themes/lil_dragon.css
@@ -1,7 +1,7 @@
-nav .textButton {
+[data-nav-item] {
   color: #ba96db;
 }
 
-nav .textButton:hover {
+[data-nav-item]:hover {
   color: #212b43;
 }
diff --git a/frontend/static/themes/metropolis.css b/frontend/static/themes/metropolis.css
index 829a0637ffb8..27ef783c69e8 100644
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@@ -2,22 +2,9 @@ header #logo .bottom {
   color: #f4bc46;
 }
 
-nav > .textButton:nth-child(1) {
-  color: #d44729;
-}
-
-nav > .textButton:nth-child(2) {
-  color: #d44729;
-}
-
-nav > .textButton:nth-child(3) {
-  color: #d44729;
-}
-
-nav > .textButton:nth-child(4) {
-  color: #d44729;
-}
-
-nav > .textButton:nth-child(5) {
+[data-nav-item="test"],
+[data-nav-item="leaderboards"],
+[data-nav-item="about"],
+[data-nav-item="settings"] {
   color: #d44729;
 }
diff --git a/frontend/static/themes/milkshake.css b/frontend/static/themes/milkshake.css
index 214f374f92d9..b5d50d86e722 100644
--- a/frontend/static/themes/milkshake.css
+++ b/frontend/static/themes/milkshake.css
@@ -1,23 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #f19dac;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #f6f4a0;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #73e4d0;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #61cfe6;
 }
 
-nav > .textButton:nth-child(5) {
-  color: #ba96db;
-}
-
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #ba96db;
 }
diff --git a/frontend/static/themes/modern_ink.css b/frontend/static/themes/modern_ink.css
index f36f904cbf12..d877c2cdb282 100644
--- a/frontend/static/themes/modern_ink.css
+++ b/frontend/static/themes/modern_ink.css
@@ -1,20 +1,9 @@
-nav .textButton:nth-child(1) {
+[data-nav-item="test"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #ff0000;
 }
 
-nav .textButton:nth-child(5) {
-  color: #ff0000;
-}
-
-/* kinda confusing to type with this */
-/* .word letter.incorrect {
-  -webkit-transform: scale(0.5) translate(-100%, -100%);
-}
-
-.word letter.incorrect.extra {
-  -webkit-transform: scale(0.5);
-} */
-
 .word.error {
   border-bottom: solid 2px #ff0000;
 }
diff --git a/frontend/static/themes/moonlight.css b/frontend/static/themes/moonlight.css
index f9991696c686..d46c47423296 100644
--- a/frontend/static/themes/moonlight.css
+++ b/frontend/static/themes/moonlight.css
@@ -4,47 +4,39 @@ nav {
   gap: 0.5rem;
 }
 
-header.focus nav > .textButton,
+header.focus [data-nav-item],
 header.focus nav:before,
 header.focus nav:after {
   background: var(--bg-color);
 }
 
-nav > .textButton:nth-child(1),
-nav > .textButton:nth-child(2),
-nav > .textButton:nth-child(3),
-nav > .textButton:nth-child(4) {
+[data-nav-item="test"],
+[data-nav-item="leaderboards"],
+[data-nav-item="about"],
+[data-nav-item="settings"] {
   border-radius: rem !important;
   color: #191f28 !important;
   background: #c69f68;
 }
-
-nav > .textButton:nth-child(1):hover,
-nav
-  > .textButton:nth-child(2):hover
-  nav
-  > .textButton:nth-child(3):hover
-  nav
-  > .textButton:nth-child(4):hover {
+[data-nav-item="test"]:hover,
+[data-nav-item="leaderboards"]:hover,
+[data-nav-item="about"]:hover,
+[data-nav-item="settings"]:hover {
   border-radius: rem !important;
   color: #4b5975 !important;
   transition: 0.25s;
 }
 
-header.focus nav > .textButton.discord::after {
-  border-color: transparent;
-}
-
-body.crtmode nav > .textButton:nth-child(1),
-body.crtmode nav > .textButton:nth-child(2),
-body.crtmode nav > .textButton:nth-child(3),
-body.crtmode nav > .textButton:nth-child(4) {
+body.crtmode [data-nav-item="test"],
+body.crtmode [data-nav-item="leaderboards"],
+body.crtmode [data-nav-item="about"],
+body.crtmode [data-nav-item="settings"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
     -3px 0 color-mix(in srgb, #c69f68 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode header.focus nav > .textButton {
+body.crtmode header.focus [data-nav-item] {
   box-shadow: none;
 }
diff --git a/frontend/static/themes/mr_sleeves.css b/frontend/static/themes/mr_sleeves.css
index 231c2cc78082..632664de107b 100644
--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@@ -1,24 +1,3 @@
 header #logo .bottom {
   color: #8fadc9;
 }
-
-header .config .group .buttons .textButton.active {
-  color: #daa99b;
-}
-
-/* nav .textButton:nth-child(1){
-    color: #daa99b;
-}
-
-nav .textButton:nth-child(2){
-    color: #daa99b;
-}
-
-nav .textButton:nth-child(3){
-    color: #8fadc9;
-}
-
-nav .textButton:nth-child(4),
-nav .textButton:nth-child(5){
-    color: #8fadc9;
-} */
diff --git a/frontend/static/themes/oblivion.css b/frontend/static/themes/oblivion.css
index 70923f48f5ba..183ecf525289 100644
--- a/frontend/static/themes/oblivion.css
+++ b/frontend/static/themes/oblivion.css
@@ -1,20 +1,21 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #9a90b4;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   color: #8db14b;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   color: #fca321;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #2984a5;
 }
 
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #dd452e;
 }
diff --git a/frontend/static/themes/phantom.css b/frontend/static/themes/phantom.css
index eba732d3098e..5f85e363fed7 100644
--- a/frontend/static/themes/phantom.css
+++ b/frontend/static/themes/phantom.css
@@ -110,8 +110,7 @@ input[type="submit"]:hover {
 #logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-nav .textButton:hover,
-nav button.text:hover,
+[data-nav-item]:hover,
 header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
diff --git a/frontend/static/themes/retrocast.css b/frontend/static/themes/retrocast.css
index f8b8e4159189..d87cc521d717 100644
--- a/frontend/static/themes/retrocast.css
+++ b/frontend/static/themes/retrocast.css
@@ -1,20 +1,15 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"],
+[data-nav-item="leaderboards"],
+[data-nav-item="about"] {
   color: #88dbdf;
 }
 
-nav > .textButton:nth-child(2) {
-  color: #88dbdf;
-}
-
-nav > .textButton:nth-child(3) {
-  color: #88dbdf;
-}
-
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #ff585d;
 }
 
-nav > .textButton:nth-child(5),
-nav > .textButton:nth-child(6) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   color: #f3e03b;
 }
diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css
index 4e3f9af09641..23cccad92c50 100644
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@@ -80,8 +80,7 @@ header .button.discord.dotHidden::after {
 #logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-nav .textButton:hover,
-nav button.text:hover,
+[data-nav-item]:hover,
 header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
diff --git a/frontend/static/themes/sewing_tin.css b/frontend/static/themes/sewing_tin.css
index 3b0574b50b41..77b9315c2662 100644
--- a/frontend/static/themes/sewing_tin.css
+++ b/frontend/static/themes/sewing_tin.css
@@ -1,7 +1,7 @@
-nav > .textButton {
+[data-nav-item] {
   color: #f2ce83;
 }
 
-nav > .textButton:hover {
+[data-nav-item]:hover {
   color: #c6915e;
 }
diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css
index 1e4fe75292d7..c11d563aeafd 100644
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@@ -1,8 +1,8 @@
-nav > .textButton {
+[data-nav-item] {
   color: #f2ce83;
 }
 
-nav > .textButton:hover {
+[data-nav-item]:hover {
   color: #c6915e;
 }
 
diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css
index 87db97316095..7e186fdad682 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -28,8 +28,7 @@ header #logo .text {
 
 header .config .group .buttons .textButton.active,
 #result .stats .group,
-nav .textButton:hover,
-nav button.text:hover,
+[data-nav-item]:hover,
 header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,
diff --git a/frontend/static/themes/snes.css b/frontend/static/themes/snes.css
index 2466c7b7d7f0..2bec7c474d5c 100644
--- a/frontend/static/themes/snes.css
+++ b/frontend/static/themes/snes.css
@@ -2,101 +2,89 @@ nav {
   gap: 0.5rem;
 }
 
-header.focus nav > .textButton,
+header.focus [data-nav-item],
 header.focus nav:before,
 header.focus nav:after {
   background: #99989f;
 }
 
-nav > .textButton {
+[data-nav-item] {
   border-radius: 10rem !important;
   color: var(--bg-color);
 }
 
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   background: #553d94;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   background: #6851a4;
 }
 
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   background: #7962b3;
 }
 
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   background: #8c76c3;
 }
 
-nav > .textButton:nth-child(5) {
+[data-nav-item="alerts"],
+[data-nav-item="account"],
+[data-nav-item="login"] {
   background: #9f8ad4;
 }
 
-nav > .textButton:nth-child(6),
-nav > .textButton:nth-child(7) {
-  background: #9f8ad4;
-}
-
-nav > .textButton:nth-child(8) {
-  background: #a692d7;
+nav .notificationBubble {
+  box-shadow: none;
+  padding-right: 0.2em;
+  right: 0.85em;
+  left: 2.75em;
 }
 
-header.focus nav > .textButton.discord::after {
-  border-color: transparent;
+nav .level {
+  background: var(--color-bg);
+  color: var(--main-color);
 }
 
-body.crtmode nav > .textButton:nth-child(1) {
+body.crtmode [data-nav-item="test"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
     -3px 0 color-mix(in srgb, #553d94 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(2) {
+body.crtmode [data-nav-item="leaderboards"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
     -3px 0 color-mix(in srgb, #6851a4 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(3) {
+body.crtmode [data-nav-item="about"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
     -3px 0 color-mix(in srgb, #7962b3 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(4) {
+body.crtmode [data-nav-item="settings"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
     -3px 0 color-mix(in srgb, #8c76c3 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(5) {
+body.crtmode [data-nav-item="alerts"],
+body.crtmode [data-nav-item="account"],
+body.crtmode [data-nav-item="login"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
     -3px 0 color-mix(in srgb, #9f8ad4 30%, transparent),
     0 0 3px;
 }
 
-body.crtmode nav > .textButton:nth-child(6),
-body.crtmode nav > .textButton:nth-child(7) {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-    -3px 0 color-mix(in srgb, #9f8ad4 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode nav > .textButton:nth-child(8) {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #a692d7 20%, transparent),
-    -3px 0 color-mix(in srgb, #a692d7 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode header.focus nav > .textButton {
+body.crtmode header.focus [data-nav-item] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
     -3px 0 color-mix(in srgb, #99989f 30%, transparent),
diff --git a/frontend/static/themes/stealth.css b/frontend/static/themes/stealth.css
index 83c919f8986e..eab4ed4318d5 100644
--- a/frontend/static/themes/stealth.css
+++ b/frontend/static/themes/stealth.css
@@ -1,4 +1,4 @@
-nav .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   color: #e25303;
 }
 #liveStatsTextTop {
diff --git a/frontend/static/themes/suisei.css b/frontend/static/themes/suisei.css
index 4f7af8777a88..f24cdc685fd3 100644
--- a/frontend/static/themes/suisei.css
+++ b/frontend/static/themes/suisei.css
@@ -37,23 +37,27 @@ header.focus #logo .text {
   color: transparent;
   padding-bottom: 0.1em;
 }
-header.focus nav > .textButton,
-header.focus nav > .showAlerts {
+header.focus [data-nav-item] {
   background: none;
 }
-header nav > .textButton,
-header nav > .showAlerts {
+[data-nav-item] {
   border-radius: 150px 150px 32px 32px;
   background-color: var(--sub-alt-color);
   color: var(--main-color);
 }
-header nav > .textButton:hover,
-header nav > .showAlerts:hover {
+[data-nav-item]:hover {
   animation: suisei-pulse 800ms ease-out infinite;
   color: var(--main-color);
   background-color: var(--sub-alt-color);
 }
-header nav > .view-leaderboards,
-header nav > .view-leaderboards:hover {
+
+[data-nav-item="leaderboards"],
+[data-nav-item="leaderboards"]:hover {
+  color: var(--sub-color);
+}
+
+[data-nav-item="account"],
+[data-nav-item="account"]:hover {
+  background: none;
   color: var(--sub-color);
 }
diff --git a/frontend/static/themes/sunset.css b/frontend/static/themes/sunset.css
index a8b8d238f1aa..14eb74444983 100644
--- a/frontend/static/themes/sunset.css
+++ b/frontend/static/themes/sunset.css
@@ -1,13 +1,13 @@
-nav > .textButton:nth-child(1),
-nav > .textButton:nth-child(2),
-nav > .textButton:nth-child(3),
-nav > .textButton:nth-child(4) {
+[data-nav-item="test"],
+[data-nav-item="leaderboards"],
+[data-nav-item="about"],
+[data-nav-item="settings"] {
   color: #f79777;
 }
 
-nav > .textButton:nth-child(1):hover,
-nav > .textButton:nth-child(2):hover,
-nav > .textButton:nth-child(3):hover,
-nav > .textButton:nth-child(4):hover {
+[data-nav-item="test"]:hover,
+[data-nav-item="leaderboards"]:hover,
+[data-nav-item="about"]:hover,
+[data-nav-item="settings"]:hover {
   color: #ffca99;
 }
diff --git a/frontend/static/themes/taro.css b/frontend/static/themes/taro.css
index 85ae4b6eb01b..026de5ce55b9 100644
--- a/frontend/static/themes/taro.css
+++ b/frontend/static/themes/taro.css
@@ -2,23 +2,23 @@
   border-bottom: dotted 2px var(--text-color);
 }
 
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   background: var(--caret-color);
   border-radius: 50%;
 }
 
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   background: var(--error-color);
   border-radius: 50%;
 }
 
-body.crtmode nav > .textButton:nth-child(1) {
+body.crtmode [data-nav-item="test"] {
   box-shadow:
     3px 0 1px var(--crt-caret-color-glow),
     -3px 0 var(--crt-caret-color-glow);
 }
 
-body.crtmode nav > .textButton:nth-child(2) {
+body.crtmode [data-nav-item="leaderboards"] {
   box-shadow:
     3px 0 1px var(--crt-error-color-glow),
     -3px 0 var(--crt-error-color-glow);
diff --git a/frontend/static/themes/terrazzo.css b/frontend/static/themes/terrazzo.css
index 141625d9ef04..710e3a71e0c0 100644
--- a/frontend/static/themes/terrazzo.css
+++ b/frontend/static/themes/terrazzo.css
@@ -3,59 +3,59 @@ header.focus nav > .textButton {
   background: none;
 }
 
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   background: var(--sub-color);
   color: var(--bg-color);
   border-radius: calc(var(--roundness) * 2) calc(var(--roundness) * 1.3)
     calc(var(--roundness) * 1.7) calc(var(--roundness) * 1);
 }
-nav > .textButton:nth-child(2) {
+[data-nav-item="leaderboards"] {
   background: #9a7a61;
   color: var(--bg-color);
   border-radius: calc(var(--roundness) * 1.2) calc(var(--roundness) * 1.7)
     calc(var(--roundness) * 2.1) calc(var(--roundness) * 1);
   transform: rotateY(9deg);
 }
-nav > .textButton:nth-child(3) {
+[data-nav-item="about"] {
   background: var(--main-color);
   color: var(--bg-color);
   border-radius: calc(var(--roundness) * 2.8) calc(var(--roundness) * 0.6)
     calc(var(--roundness) * 2) calc(var(--roundness) * 1.6);
   transform: rotateY(-3deg);
 }
-nav > .textButton:nth-child(4) {
+[data-nav-item="settings"] {
   background: var(--text-color);
   color: var(--bg-color);
   border-radius: calc(var(--roundness) * 0.8) calc(var(--roundness) * 2.4)
     calc(var(--roundness) * 0.8) calc(var(--roundness) * 2.8);
 }
 
-nav > .textButton:nth-child(1):hover,
-nav > .textButton:nth-child(2):hover,
-nav > .textButton:nth-child(3):hover,
-nav > .textButton:nth-child(4):hover {
+[data-nav-item="test"]:hover,
+[data-nav-item="leaderboards"]:hover,
+[data-nav-item="about"]:hover,
+[data-nav-item="settings"]:hover {
   opacity: 0.8;
 }
 
-body.crtmode nav > .textButton:nth-child(1) {
+body.crtmode [data-nav-item="test"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, var(--sub-color) 20%, transparent),
     -3px 0 color-mix(in srgb, var(--sub-color) 30%, transparent),
     0 0 3px;
 }
-body.crtmode nav > .textButton:nth-child(2) {
+body.crtmode [data-nav-item="leaderboards"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, #9a7a61 20%, transparent),
     -3px 0 color-mix(in srgb, #9a7a61 30%, transparent),
     0 0 3px;
 }
-body.crtmode nav > .textButton:nth-child(3) {
+body.crtmode [data-nav-item="about"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, var(--main-color) 20%, transparent),
     -3px 0 color-mix(in srgb, var(--main-color) 30%, transparent),
     0 0 3px;
 }
-body.crtmode nav > .textButton:nth-child(4) {
+body.crtmode [data-nav-item="settings"] {
   box-shadow:
     3px 0 1px color-mix(in srgb, var(--text-color) 20%, transparent),
     -3px 0 color-mix(in srgb, var(--text-color) 30%, transparent),
diff --git a/frontend/static/themes/trackday.css b/frontend/static/themes/trackday.css
index d972d8b1f488..783eb9a48a38 100644
--- a/frontend/static/themes/trackday.css
+++ b/frontend/static/themes/trackday.css
@@ -1,11 +1,11 @@
-nav > .textButton:nth-child(1) {
+[data-nav-item="test"] {
   color: #e0513e;
 }
 
-nav > .textButton:nth-child(3) {
-  color: #cfcfcf;
+[data-nav-item="leaderboards"] {
+  color: #ccc500;
 }
 
-nav > .textButton:nth-child(2) {
-  color: #ccc500;
+[data-nav-item="about"] {
+  color: #cfcfcf;
 }
diff --git a/frontend/static/themes/trance.css b/frontend/static/themes/trance.css
index 9d314fe4418d..c41881454f69 100644
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@@ -38,8 +38,7 @@ header .button.discord.dotHidden::after {
 #logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-nav .textButton:hover,
-nav button.text:hover,
+[data-nav-item]:hover,
 header .config .group .buttons .textButton:hover,
 footer .textButton:hover,
 footer button.text:hover,