diff --git a/public/index.html b/public/index.html
index 9ee5c5c65..ad772202c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1168,28 +1168,28 @@
             <h1>timer/progress style</h1>
             <div class="text">Change the style of the timer/progress during a timed test.</div>
             <div class="buttons">
-              <div class="button" timer="bar" tabindex="0" onclick="this.blur();">bar</div>
-              <div class="button" timer="text" tabindex="0" onclick="this.blur();">text</div>
+              <div class="button" timerStyle="bar" tabindex="0" onclick="this.blur();">bar</div>
+              <div class="button" timerStyle="text" tabindex="0" onclick="this.blur();">text</div>
             </div>
           </div>
           <div class="section timerColor" section="">
             <h1>timer/progress color</h1>
             <div class="text">Change the color of the timer/progress number/bar and live wpm number.</div>
             <div class="buttons">
-              <div class="button" color="black" tabindex="0" onclick="this.blur();">black</div>
-              <div class="button" color="sub" tabindex="0" onclick="this.blur();">sub</div>
-              <div class="button" color="text" tabindex="0" onclick="this.blur();">text</div>
-              <div class="button" color="main" tabindex="0" onclick="this.blur();">main</div>
+              <div class="button" timerColor="black" tabindex="0" onclick="this.blur();">black</div>
+              <div class="button" timerColor="sub" tabindex="0" onclick="this.blur();">sub</div>
+              <div class="button" timerColor="text" tabindex="0" onclick="this.blur();">text</div>
+              <div class="button" timerColor="main" tabindex="0" onclick="this.blur();">main</div>
             </div>
           </div>
           <div class="section timerOpacity" section="">
             <h1>timer/progress opacity</h1>
             <div class="text">Change the opacity of the timer/progress number/bar and live wpm number.</div>
             <div class="buttons">
-              <div class="button" opacity="0.25" tabindex="0" onclick="this.blur();">0.25</div>
-              <div class="button" opacity="0.5" tabindex="0" onclick="this.blur();">0.5</div>
-              <div class="button" opacity="0.75" tabindex="0" onclick="this.blur();">0.75</div>
-              <div class="button" opacity="1" tabindex="0" onclick="this.blur();">1</div>
+              <div class="button" timerOpacity="0.25" tabindex="0" onclick="this.blur();">0.25</div>
+              <div class="button" timerOpacity="0.5" tabindex="0" onclick="this.blur();">0.5</div>
+              <div class="button" timerOpacity="0.75" tabindex="0" onclick="this.blur();">0.75</div>
+              <div class="button" timerOpacity="1" tabindex="0" onclick="this.blur();">1</div>
             </div>
           </div>
           <div class="section smoothLineScroll">
diff --git a/public/js/settings.js b/public/js/settings.js
index c67c046a0..9a899ebef 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -201,7 +201,7 @@ function updateSettingsPage() {
   Object.keys(layouts).forEach((layout) => {
     if (layout.toString() != "default") {
       keymapEl.append(
-        `<div class="layout button" layout='${layout}'>${layout.replace(
+        `<div class="layout button" keymapLayout='${layout}'>${layout.replace(
           "_",
           " "
         )}</div>`