diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index c74afcb7c..500208b8c 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -351,7 +351,7 @@ key {
   color: var(--sub-color);
   cursor: pointer;
   transition: background 0.125s, color 0.125s;
-  padding: 0.5rem;
+  padding: 0.5em;
   border-radius: var(--roundness);
   text-align: center;
   user-select: none;
@@ -359,16 +359,16 @@ key {
   align-content: center;
   height: min-content;
   height: -moz-min-content;
-  line-height: 1.25rem;
+  line-height: 1.25em;
   appearance: none;
   border: none;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 1em;
   width: max-content;
   width: -moz-max-content;
   display: grid;
   grid-auto-flow: column;
-  gap: 0.25rem;
+  gap: 0.25em;
   text-decoration: none;
 
   .fas,
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 1152c79b0..b6dff1d9b 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -982,6 +982,41 @@
   }
 }
 
+.newTestConfig {
+  display: grid;
+  font-size: 0.75rem;
+  gap: 0.5rem;
+  grid-auto-flow: column;
+  height: max-content;
+  width: 100%;
+  justify-content: space-around;
+  .row {
+    display: flex;
+    padding: 0.25rem 1rem;
+    background: var(--sub-alt-color);
+    border-radius: var(--roundness);
+    // width: max-content;
+  }
+  .spacer {
+    height: 75%;
+    width: 0.25rem;
+    border-radius: calc(var(--roundness) / 2);
+    background: var(--bg-color);
+    margin: auto 1rem;
+  }
+}
+
+.pageTest {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr auto 1fr;
+}
+
+#menu {
+  width: 100%;
+  grid-template-columns: auto auto auto 1fr auto;
+}
+
 .pageTest {
   #wordsWrapper {
     position: relative;
diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html
index 03a332515..8cdf4769c 100644
--- a/frontend/static/html/pages/test.html
+++ b/frontend/static/html/pages/test.html
@@ -1,4 +1,118 @@
 <div class="page pageTest hidden">
+  <div class="newTestConfig">
+    <div class="row">
+      <div class="textButton">
+        <span
+          class="punc"
+          style="
+            font-weight: 900;
+            width: 1.25rem;
+            text-align: center;
+            display: inline-block;
+            letter-spacing: -0.1rem;
+          "
+        >
+          !?
+        </span>
+        punctuation
+      </div>
+      <div class="textButton">
+        <span
+          class="punc"
+          style="
+            font-weight: 900;
+            width: 1.25rem;
+            text-align: center;
+            display: inline-block;
+            letter-spacing: -0.1rem;
+          "
+        >
+          15
+        </span>
+        numbers
+      </div>
+      <div class="spacer"></div>
+      <div class="textButton active">
+        <i class="fas fa-fw fa-clock"></i>
+        time
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-font"></i>
+        words
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-quote-left"></i>
+        quote
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-mountain"></i>
+        zen
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-wrench"></i>
+        custom
+      </div>
+      <div class="spacer"></div>
+
+      <div class="textButton active">15</div>
+      <div class="textButton">30</div>
+      <div class="textButton">60</div>
+      <div class="textButton">120</div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-tools"></i>
+      </div>
+    </div>
+    <!-- <div class="row">
+      <div class="textButton">
+        <i class="fas fa-fw fa-exclamation"></i>
+        punctuation
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-sort-numeric-down"></i>
+        numbers
+      </div>
+    </div>
+    <div class="row">
+      <div class="textButton active">
+        <i class="fas fa-fw fa-clock"></i>
+        time
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-font"></i>
+        words
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-quote-left"></i>
+        quote
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-mountain"></i>
+        zen
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-wrench"></i>
+        custom
+      </div>
+      <div class="spacer"></div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-exclamation"></i>
+        punctuation
+      </div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-sort-numeric-down"></i>
+        numbers
+      </div>
+    </div>
+    <div class="row">
+      <div class="textButton active">15</div>
+      <div class="textButton">30</div>
+      <div class="textButton">60</div>
+      <div class="textButton">120</div>
+      <div class="textButton">
+        <i class="fas fa-fw fa-tools"></i>
+      </div>
+    </div> -->
+  </div>
   <div id="typingTest">
     <div id="capsWarning" class="hidden">
       <i class="fas fa-lock"></i>
@@ -322,4 +436,5 @@
     </div>
     <div class="ssWatermark hidden">monkeytype.com</div>
   </div>
+  <div></div>
 </div>
diff --git a/frontend/static/html/top.html b/frontend/static/html/top.html
index 84c963d03..b58da10b3 100644
--- a/frontend/static/html/top.html
+++ b/frontend/static/html/top.html
@@ -99,6 +99,7 @@
         <i class="fas fa-fw fa-cog"></i>
       </div>
     </a>
+    <div></div>
     <a
       class="textButton hidden account view-account"
       tabindex="2"
@@ -131,98 +132,35 @@
         <i class="far fa-fw fa-user"></i>
       </div>
     </a>
+    <a
+      class="textButton view-settings"
+      tabindex="2"
+      href="/settings"
+      onclick="this.blur();"
+      data-link
+    >
+      <div class="icon">
+        <i class="fas fa-fw fa-bell"></i>
+      </div>
+    </a>
+    <a
+      class="textButton view-settings"
+      tabindex="2"
+      href="/settings"
+      onclick="this.blur();"
+      data-link
+    >
+      <div class="icon">
+        <i class="fas fa-fw fa-sign-out-alt"></i>
+      </div>
+    </a>
   </div>
-
-  <div class="config hidden">
-    <div class="mobileConfig">
-      <div class="textButton">
-        <i class="fas fa-bars"></i>
-      </div>
-    </div>
-    <div class="desktopConfig">
-      <div
-        class="puncAndNum"
-        style="display: grid; grid-auto-flow: column; padding-top: 0.1rem"
-      >
-        <div class="group punctuationMode">
-          <!--           <div class="title">time</div> -->
-          <div class="buttons">
-            <div class="textButton toggleButton" tabindex="2">punctuation</div>
-          </div>
-        </div>
-        <div class="group numbersMode">
-          <!--           <div class="title">time</div> -->
-          <div class="buttons">
-            <div class="textButton toggleButton" tabindex="2">numbers</div>
-          </div>
-        </div>
-      </div>
-      <div class="group mode">
-        <!--           <div class="title">mode</div> -->
-        <div class="buttons">
-          <div class="textButton active" mode="time" tabindex="2">time</div>
-          <div class="textButton" mode="words" tabindex="2">words</div>
-          <div class="textButton" mode="quote" tabindex="2">quote</div>
-          <div class="textButton" mode="zen" tabindex="2">zen</div>
-          <div class="textButton" mode="custom" tabindex="2">custom</div>
-        </div>
-      </div>
-      <div class="group wordCount hidden">
-        <!--           <div class="title">words</div> -->
-        <div class="buttons">
-          <div class="textButton" wordCount="10" tabindex="2">10</div>
-          <div class="textButton" wordCount="25" tabindex="2">25</div>
-          <div class="textButton active" wordCount="50" tabindex="2">50</div>
-          <div class="textButton" wordCount="100" tabindex="2">100</div>
-          <div class="textButton" wordCount="custom" tabindex="2">
-            <i class="fas fa-tools"></i>
-          </div>
-        </div>
-      </div>
-      <div class="group time">
-        <!--           <div class="title">time</div> -->
-        <div class="buttons">
-          <div class="textButton" timeConfig="15" tabindex="2">15</div>
-          <div class="textButton active" timeConfig="30" tabindex="2">30</div>
-          <div class="textButton" timeConfig="60" tabindex="2">60</div>
-          <div class="textButton" timeConfig="120" tabindex="2">120</div>
-          <div class="textButton" timeConfig="custom" tabindex="2">
-            <i class="fas fa-tools"></i>
-          </div>
-        </div>
-      </div>
-      <div class="group quoteLength hidden">
-        <!--           <div class="title">time</div> -->
-        <div class="buttons">
-          <div class="textButton" quoteLength="-1" tabindex="2">all</div>
-          <div class="textButton" quoteLength="0" tabindex="2">short</div>
-          <div class="textButton active" quoteLength="1" tabindex="2">
-            medium
-          </div>
-          <div class="textButton" quoteLength="2" tabindex="2">long</div>
-          <div class="textButton" quoteLength="3" tabindex="2">thicc</div>
-          <div class="textButton hidden favorite" quoteLength="-3" tabindex="2">
-            <i class="fas fa-heart"></i>
-          </div>
-          <div class="textButton" quoteLength="-2" tabindex="2">
-            <i class="fas fa-search"></i>
-          </div>
-        </div>
-      </div>
-      <div class="group customText hidden">
-        <!--           <div class="title">time</div> -->
-        <div class="buttons">
-          <div class="textButton">change</div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
+  <!-- <div
     class="signOut hidden"
     style="grid-column: 3/4; grid-row: 1/2"
     tabindex="0"
   >
     <i class="fas fa-sign-out-alt"></i>
     sign out
-  </div>
+  </div> -->
 </div>
diff --git a/frontend/static/main.html b/frontend/static/main.html
index e107c8d55..4002051db 100644
--- a/frontend/static/main.html
+++ b/frontend/static/main.html
@@ -39,7 +39,7 @@
       </div>
       <div id="centerContent" class="hidden">
         <%= compilation.assets["html/top.html"].source() %>
-        <div id="middle">
+        <div id="middle" style="height: 100%">
           <%= compilation.assets["html/pages/loading.html"].source() %> <%=
           compilation.assets["html/pages/test.html"].source() %> <%=
           compilation.assets["html/pages/about.html"].source() %> <%=