diff --git a/src/sass/media-queries.scss b/src/sass/media-queries.scss
new file mode 100644
index 000000000..7b80efa38
--- /dev/null
+++ b/src/sass/media-queries.scss
@@ -0,0 +1,237 @@
+
+@media only screen and (max-width: 1050px) {
+  #centerContent {
+    .pageSettings .section.themes .buttons,
+    .pageSettings .section.language .buttons,
+    .pageSettings .section.layout .buttons,
+    .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
+    .pageSettings .section.fontFamily .buttons,
+    .pageSettings .section.funbox .buttons,
+    .pageSettings .section.keymapStyle .buttons,
+    .pageSettings .section.languageGroups .buttons
+     {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    #result .morestats {
+      gap: 1rem;
+      grid-template-rows: 1fr 1fr;
+    }
+  }
+  #supportMe {
+    width: 90vw !important;
+    .buttons {
+      .button {
+        .icon {
+          font-size: 3rem !important;
+          line-height: 3rem !important;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .settingsGroup.quickNav{
+    display: none;
+  }
+  #centerContent {
+    #top {
+      grid-template-areas:
+        "logo config"
+        "menu config";
+      .logo {
+        margin-bottom: 0;
+      }
+    }
+
+    #menu {
+      gap: 0.5rem;
+      font-size: 0.8rem;
+      line-height: 0.8rem;
+
+      .icon-button {
+        padding: 0.25rem;
+      }
+    }
+  }
+  #bottom{
+    .leftright{
+      .left{
+        gap: 0.25rem 1rem;
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        grid-auto-flow: column;
+      }
+      .right{
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        gap: 0.25rem 1rem;
+      }
+    }
+  }
+
+  .pageAbout .section .supporters, .pageAbout .section .contributors{
+    grid-template-columns: 1fr 1fr 1fr;
+
+  }
+
+  .pageSettings .section.customBackgroundFilter {
+    .groups {
+      grid-template-columns: 1fr;
+    }
+    .saveContainer {
+      grid-column: -1/-2;
+    }
+  }
+
+  #commandLine,
+  #commandLineInput {
+    width: 500px !important;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  .pageSettings .section {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "title title"
+      "text text"
+      "buttons buttons";
+
+    & > .text {
+      margin-bottom: 1rem;
+    }
+  }
+
+  #result {
+    .buttons {
+      grid-template-rows: 1fr 1fr;
+      #nextTestButton {
+        grid-column: 1/5;
+        width: 100%;
+        text-align: center;
+      }
+    }
+  }
+
+  #supportMe {
+    width: 80vw !important;
+    .buttons {
+      grid-template-columns: none !important;
+      .button {
+        grid-template-columns: auto auto;
+        align-items: center;
+        .icon {
+          font-size: 2rem !important;
+          line-height: 2rem !important;
+        }
+      }
+    }
+  }
+
+  #commandLine,
+  #commandLineInput {
+    width: 400px !important;
+  }
+
+  #centerContent {
+    .pageSettings .section.themes .buttons,
+    .pageSettings .section.language .buttons,
+    .pageSettings .section.layout .buttons,
+    .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.keymapLegendStyle .buttons,
+    .pageSettings .section.fontFamily .buttons,
+    .pageSettings .section.funbox .buttons,
+    .pageSettings .section.keymapStyle .buttons,
+    .pageSettings .section.languageGroups .buttons {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .pageAbout .section .supporters, .pageAbout .section .contributors{
+    grid-template-columns: 1fr 1fr;
+  }
+  #middle {
+    #result {
+      grid-template-areas:
+        "stats stats"
+        "chart chart"
+        "morestats morestats";
+      .stats {
+        grid-template-areas: "wpm acc";
+        gap: 4rem;
+      }
+      .stats.morestats {
+        grid-template-rows: 1fr 1fr 1fr;
+        gap: 1rem;
+      }
+    }
+  }
+}
+
+
+@media only screen and (max-width: 500px) {
+
+  .pageAbout .section .supporters, .pageAbout .section .contributors{
+    grid-template-columns: 1fr 1fr;
+  }
+
+  #top {
+    align-items: self-end;
+    .logo {
+      .bottom {
+        font-size: 1.75rem;
+        line-height: 1.75rem;
+        margin-top: 0.5rem;
+      }
+      .top {
+        display: none;
+      }
+    }
+    #menu {
+      .icon-button {
+        padding: 0;
+      }
+    }
+  }
+  #bottom{
+    .leftright{
+      .left{
+        gap: 0.25rem 1rem;
+        display: grid;
+        grid-template-rows: 1fr 1fr 1fr;
+        grid-auto-flow: column;
+      }
+      .right{
+        display: grid;
+        grid-template-rows: 1fr 1fr 1fr;
+        gap: 0.25rem 1rem;
+      }
+    }
+  }
+  #centerContent {
+    padding: 1rem;
+  }
+  #result {
+    .buttons {
+      grid-template-rows: 1fr 1fr 1fr;
+      #nextTestButton {
+        grid-column: 1/3;
+        width: 100%;
+        text-align: center;
+      }
+    }
+  }
+}
+
+
+
+@media (hover: none) and (pointer: coarse) {
+  #commandLineMobileButton {
+    display: block;
+  }
+}
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 7808d86d6..c823b261d 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -3568,196 +3568,6 @@ key {
   transition: 0.25s;
 }
 
-@media only screen and (max-width: 1050px) {
-  #centerContent {
-    .pageSettings .section.themes .buttons,
-    .pageSettings .section.language .buttons,
-    .pageSettings .section.layout .buttons,
-    .pageSettings .section.keymapLayout .buttons,
-    .pageSettings .section.keymapLegendStyle .buttons,
-    .pageSettings .section.fontFamily .buttons,
-    .pageSettings .section.funbox .buttons,
-    .pageSettings .section.keymapStyle .buttons {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    #result .morestats {
-      gap: 1rem;
-      grid-template-rows: 1fr 1fr;
-    }
-  }
-  #supportMe {
-    width: 90vw !important;
-    .buttons {
-      .button {
-        .icon {
-          font-size: 3rem !important;
-          line-height: 3rem !important;
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 800px) {
-  #centerContent {
-    #top {
-      grid-template-areas:
-        "logo config"
-        "menu config";
-      .logo {
-        margin-bottom: 0;
-      }
-    }
-
-    #menu {
-      gap: 0.5rem;
-      font-size: 0.8rem;
-      line-height: 0.8rem;
-
-      .icon-button {
-        padding: 0.25rem;
-      }
-    }
-  }
-
-  .centerContent .bottom .leftright{
-    .left{
-      gap: 0.25rem 1rem;
-      display: grid;
-      grid-template-rows: 1fr 1fr;
-      grid-auto-flow: column;
-    }
-    .right{
-      display: grid;
-      gap: 0.25rem 1rem;
-    }
-  }
-
-  .pageSettings .section.customBackgroundFilter {
-    .groups {
-      grid-template-columns: 1fr;
-    }
-    .saveContainer {
-      grid-column: -1/-2;
-    }
-  }
-
-  #commandLine,
-  #commandLineInput {
-    width: 500px !important;
-  }
-}
-
-@media only screen and (max-width: 650px) {
-  .pageSettings .section {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "title title"
-      "text text"
-      "buttons buttons";
-
-    & > .text {
-      margin-bottom: 1rem;
-    }
-  }
-
-  #result {
-    .buttons {
-      grid-template-rows: 1fr 1fr;
-      #nextTestButton {
-        grid-column: 1/5;
-        width: 100%;
-        text-align: center;
-      }
-    }
-  }
-
-  #supportMe {
-    width: 80vw !important;
-    .buttons {
-      grid-template-columns: none !important;
-      .button {
-        grid-template-columns: auto auto;
-        align-items: center;
-        .icon {
-          font-size: 2rem !important;
-          line-height: 2rem !important;
-        }
-      }
-    }
-  }
-
-  #commandLine,
-  #commandLineInput {
-    width: 400px !important;
-  }
-
-  #centerContent {
-    .pageSettings .section.themes .buttons,
-    .pageSettings .section.language .buttons,
-    .pageSettings .section.layout .buttons,
-    .pageSettings .section.keymapLayout .buttons,
-    .pageSettings .section.keymapLegendStyle .buttons,
-    .pageSettings .section.fontFamily .buttons,
-    .pageSettings .section.funbox .buttons,
-    .pageSettings .section.keymapStyle .buttons {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  #middle {
-    #result {
-      grid-template-areas:
-        "stats stats"
-        "chart chart"
-        "morestats morestats";
-      .stats {
-        grid-template-areas: "wpm acc";
-        gap: 4rem;
-      }
-      .stats.morestats {
-        grid-template-rows: 1fr 1fr 1fr;
-        gap: 1rem;
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  #top {
-    .logo {
-      .bottom {
-        font-size: 1.75rem;
-        line-height: 1.75rem;
-        margin-top: 0.5rem;
-      }
-      .top {
-        display: none;
-      }
-    }
-    #menu {
-      .icon-button {
-        padding: 0;
-      }
-    }
-  }
-  #centerContent {
-    padding: 1rem;
-  }
-  #result {
-    .buttons {
-      grid-template-rows: 1fr 1fr 1fr;
-      #nextTestButton {
-        grid-column: 1/3;
-        width: 100%;
-        text-align: center;
-      }
-    }
-  }
-}
 
 .keymap {
   display: grid;
@@ -3945,11 +3755,10 @@ key {
   // }
 }
 
-// .matrix {
-//   display: flex;
-//   justify-content: left;
-//   margin-left: 4.51rem;
-// }
+#nitropay_ad_left,
+#nitropay_ad_right {
+  margin-top: 1rem;
+}
 
 .keymap {
   &.matrix {
@@ -4063,34 +3872,3 @@ key {
     }
   }
 }
-
-@media (hover: none) and (pointer: coarse) {
-  #commandLineMobileButton {
-    display: block;
-  }
-}
-
-#nitropay_ad_left,
-#nitropay_ad_right {
-  margin-top: 1rem;
-}
-
-// .adcontainer{
-//   position: relative;
-//   &>div{
-//     top: 0px;
-//     left: 0px;
-//     position: absolute;
-//   }
-//   .bg{
-//     background: var(--bg-color);
-//     color: var(--sub-color);
-//     display: grid;
-//     align-items: center;
-//     justify-content: center;
-//     height: 100%;
-//     width: 100%;
-//     font-size: .75rem;
-//     user-select: none;
-//   }
-// }
diff --git a/static/index.html b/static/index.html
index 0a5ec8ec9..fe8aecea6 100644
--- a/static/index.html
+++ b/static/index.html
@@ -11,6 +11,7 @@
     />
     <link rel="stylesheet" href="css/balloon.css" />
     <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/media-queries.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
     <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />