diff --git a/public/css/style.scss b/public/css/style.scss
index 9e6c39128..0a480517b 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -28,6 +28,7 @@ body {
   background: var(--bg-color);
   font-family: "Roboto Mono";
   color: var(--main-color);
+  transition: .25s;
 }
 
 html { overflow-y: scroll; }
@@ -140,6 +141,7 @@ a:hover {
   display: none;
   position: absolute;
   width: min-content;
+  width: -moz-min-content;
   white-space: nowrap;
   padding: 0.5rem;
   border-radius: 0.25rem;
@@ -329,7 +331,7 @@ a:hover {
   line-height: 2.3rem;
   font-size: 2.3rem;
   /* text-align: center; */
-  transition: 0.5s;
+  transition: 0.25s;
   padding: 0 5px;
   display: grid;
   grid-auto-flow: column;
@@ -362,6 +364,7 @@ a:hover {
   grid-auto-flow: row;
   grid-gap: 0.2rem;
   width: min-content;
+  width: -moz-min-content;
   transition: 0.25s;
   /*   margin-bottom: 0.1rem; */
   grid-column: 3/4;
@@ -421,6 +424,7 @@ a:hover {
   grid-auto-flow: column;
   grid-gap: 1rem;
   width: min-content;
+  width: -moz-min-content;
   transition: 0.25s;
   grid-column: 3/4;
   grid-row: 1/2;
@@ -729,6 +733,70 @@ key {
   }
 }
 
+.pageSettings{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  .tip{
+    color: var(--sub-color);
+  }
+  .section{
+    display: grid;
+    gap: .5rem;
+    grid-template-rows: auto 1fr auto;
+    h1{
+      font-size: 1rem;
+      line-height: 1rem;
+      color: var(--sub-color);
+      margin: 0;
+    }
+    .button{
+      color: var(--sub-color);
+      cursor: pointer;
+      transition: .25s;
+      padding: .2rem .5rem;
+      border-radius: var(--roundness);
+      &:hover{
+        color: var(--main-color);
+      }
+      &.active{
+        color: var(--main-color);
+      }
+      &:focus{
+        background: var(--sub-color);
+        color: var(--bg-color);
+        border: none;
+        outline: none;
+      }
+    }
+    .buttons{
+      display: grid;
+      grid-auto-flow: column;
+      gap: 1rem;
+      width: min-content;
+      width: -moz-min-content;
+    }
+    .themes{
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      // gap: 1rem;
+      .theme{
+        // padding: 1rem 2rem;
+        text-align: center;
+        color: var(--sub-color);
+        transition: .25s;
+        cursor: pointer;
+        &:hover{
+          color: var(--main-color);
+        }
+        &.active{
+          color: var(--main-color);
+        }
+      }
+    }
+  }
+}
+
 .pageAccount{
   display: grid;
   gap: 1rem;
diff --git a/public/index.html b/public/index.html
index 17ada00c5..af1a5acbb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -199,7 +199,39 @@
         </div>
       </div>
       <div class="page pageSettings hidden">
-
+        <div class="tip" style="grid-column: 1/3;">tip: You can also change all these settings quickly using the command line (<key>esc</key>)</div>
+        <div class="section smoothCaret" section="">
+          <h1>smooth caret</h1>
+          <div class="text">The caret will move smoothly between letters and words.</div>
+          <div class="buttons"><div class="button on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
+        </div>
+        <div class="section quickTab">
+          <h1>quick tab mode</h1>
+          <div class="text">Press <key>tab</key> to quickly restart the test. This function disables tab navigation on some parts of the website.</div>
+          <div class="buttons"><div class="button on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
+        </div>
+        <div class="section liveWpm">
+          <h1>live wpm</h1>
+          <div class="text">Displays a live WPM speed during the test. Updates once every second.</div>
+          <div class="buttons"><div class="button on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
+        </div>
+        <div class="section keyTips">
+          <h1>show key tips</h1>
+          <div class="text">Shows the keybind tips at the bottom of the page.</div>
+          <div class="buttons"><div class="button on" tabindex="0">show</div><div class="button off" tabindex="0">hide</div></div>
+        </div>
+        <div class="section" style="grid-column: 1/3;">
+          <h1>theme</h1>
+          <div class="themes">
+            <div class="theme">light</div>
+            <div class="theme active">dark</div>
+            <div class="theme">light</div>
+            <div class="theme">light</div>
+            <div class="theme">light</div>
+            <div class="theme">light</div>
+            
+          </div>
+        </div>
       </div>
       <div class="page pageLogin hidden">
         <div class="preloader hidden"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
@@ -304,6 +336,7 @@
 
 <script src="js/db.js"></script>
 <script src="js/commandline.js"></script>
+<script src="js/settings.js"></script>
 <script src="js/userconfig.js"></script>
 <script src="js/words.js"></script>
 <script src="js/script.js"></script>
diff --git a/public/js/script.js b/public/js/script.js
index 4bfef1260..ff1787f19 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -606,7 +606,8 @@ function changePage(page) {
     swapElements(activePage, $(".page.pageAbout"), 250);
     history.pushState('about', null, 'about');
     $('.config').css('opacity', 0);
-  }  else if (page == "settings") {
+  } else if (page == "settings") {
+    updateSettingsPage()
     $(".page.pageSettings").addClass('active');
     swapElements(activePage, $(".page.pageSettings"), 250);
     history.pushState('settings', null, 'settings');
diff --git a/public/js/settings.js b/public/js/settings.js
new file mode 100644
index 000000000..01423bd55
--- /dev/null
+++ b/public/js/settings.js
@@ -0,0 +1,113 @@
+function updateSettingsPage(){
+
+    let themesEl = $(".pageSettings .section .themes").empty();
+
+    $.getJSON("themes/list.json", function(data) {
+        commandsThemes.list = [];
+        data.forEach(theme => {
+            if (config.theme == 'theme') {
+                themesEl.append(`<div class="theme active" theme='${theme}'>${theme.replace('_', ' ')}</div>`);     
+            } else {
+                themesEl.append(`<div class="theme" theme='${theme}'>${theme.replace('_', ' ')}</div>`); 
+            }
+        })
+    });
+
+
+
+    setSettingsButton('smoothCaret', config.smoothCaret);
+    setSettingsButton('quickTab', config.quickTab);
+    setSettingsButton('liveWpm', config.showLiveWpm);
+    setSettingsButton('keyTips', config.showKeyTips);
+
+    if (config.showKeyTips) {
+        $(".pageSettings .tip").removeClass('hidden');
+    } else {
+        $(".pageSettings .tip").addClass('hidden');
+    }
+
+
+}
+
+function setSettingsButton(buttonSection,tf) {
+    if (tf) {
+        $(".pageSettings .section."+buttonSection+" .buttons .button.on").addClass('active');
+        $(".pageSettings .section."+buttonSection+" .buttons .button.off").removeClass('active');
+    } else {
+        $(".pageSettings .section."+buttonSection+" .buttons .button.off").addClass('active');
+        $(".pageSettings .section."+buttonSection+" .buttons .button.on").removeClass('active');
+    }
+}
+
+
+//smooth caret
+$(".pageSettings .section.smoothCaret .buttons .button.on").click(e => {
+    setSmoothCaret(true);
+    showNotification('Smooth caret on', 1000);
+    setSettingsButton('smoothCaret', config.smoothCaret);
+})
+$(".pageSettings .section.smoothCaret .buttons .button.off").click(e => {
+    setSmoothCaret(false);
+    showNotification('Smooth caret off', 1000);
+    setSettingsButton('smoothCaret', config.smoothCaret);
+})
+
+//quick tab
+$(".pageSettings .section.quickTab .buttons .button.on").click(e => {
+    setQuickTabMode(true);
+    showNotification('Quick tab on', 1000);
+    setSettingsButton('quickTab', config.quickTab);
+})
+$(".pageSettings .section.quickTab .buttons .button.off").click(e => {
+    setQuickTabMode(false);
+    showNotification('Quick tab off', 1000);
+    setSettingsButton('quickTab', config.quickTab);
+})
+
+//live wpm
+$(".pageSettings .section.liveWpm .buttons .button.on").click(e => {
+    config.showLiveWpm = true;
+    showNotification('Live WPM on', 1000);
+    setSettingsButton('liveWpm', config.showLiveWpm);
+})
+$(".pageSettings .section.liveWpm .buttons .button.off").click(e => {
+    config.showLiveWpm = false;
+    showNotification('Live WPM off', 1000);
+    setSettingsButton('liveWpm', config.showLiveWpm);
+})
+
+//keytips
+$(".pageSettings .section.keyTips .buttons .button.on").click(e => {
+    setKeyTips(true);
+    showNotification('Key tips on', 1000);
+    setSettingsButton('keyTips', config.showKeyTips);
+    if (config.showKeyTips) {
+        $(".pageSettings .tip").removeClass('hidden');
+    } else {
+        $(".pageSettings .tip").addClass('hidden');
+    }
+})
+$(".pageSettings .section.keyTips .buttons .button.off").click(e => {
+    setKeyTips(false);
+    showNotification('Key tips off', 1000);
+    setSettingsButton('keyTips', config.showKeyTips);
+    if (config.showKeyTips) {
+        $(".pageSettings .tip").removeClass('hidden');
+    } else {
+        $(".pageSettings .tip").addClass('hidden');
+    }
+})
+
+$(document).on("mouseover",".pageSettings .section .themes .theme", (e) => {
+    let theme = $(e.currentTarget).attr('theme');
+    previewTheme(theme);
+})
+
+$(document).on("click",".pageSettings .section .themes .theme", (e) => {
+    let theme = $(e.currentTarget).attr('theme');
+    setTheme(theme);
+})
+
+$(document).on("mouseleave",".pageSettings .section .themes", (e) => {
+    setTheme(config.theme);
+})
\ No newline at end of file
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 0d40d7859..41bfe5c5d 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -55,6 +55,11 @@ function toggleKeyTips() {
 }
 
 //caret
+function setSmoothCaret(mode) {
+    config.smoothCaret = mode;
+    saveConfigToCookie();
+}
+
 function toggleSmoothCaret() {
     config.smoothCaret = !config.smoothCaret;
     saveConfigToCookie();