diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 7e4106ed..da6f66d6 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -2,6 +2,16 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="GrazieInspection" enabled="false" level="GRAMMAR_ERROR" enabled_by_default="false" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="mode" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HttpUrlsUsage" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="LanguageDetectionInspection" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
diff --git a/index.html b/index.html
index 681f4135..0e9c8fc6 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!-- DEMO -->
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -7,9 +8,9 @@
   <title>SpessaSynth SoundFont MIDI Player Online</title>
   <link rel="stylesheet" href='src/website/css/style.css'>
   <link rel="stylesheet" href='src/website/css/sequencer_ui.css'>
-  <link rel="stylesheet" href='src/website/css/keyboard_ui.css'>
-  <link rel="stylesheet" href='src/website/css/synthesizer_ui.css'>
+  <link rel="stylesheet" href='src/website/css/synthesizer_ui/synthesizer_ui.css'>
   <link rel="stylesheet" href='src/website/css/keyboard.css'>
+  <link rel='stylesheet' href='src/website/css/settings.css'>
 
   <style>
     a{
@@ -44,8 +45,9 @@ <h1 id="title">SpessaSynth: Online Demo</h1>
       </div>
     </div>
 
-    <div id="keyboard_selector">
+    <div id="settings_div">
     </div>
+
   </div>
   <canvas id="note_canvas"></canvas>
   <div id='keyboard'></div>
diff --git a/src/spessasynth_lib/synthetizer/worklet_system/worklet_channel.js b/src/spessasynth_lib/synthetizer/worklet_system/worklet_channel.js
index 85674cb5..8d6e9914 100644
--- a/src/spessasynth_lib/synthetizer/worklet_system/worklet_channel.js
+++ b/src/spessasynth_lib/synthetizer/worklet_system/worklet_channel.js
@@ -681,14 +681,7 @@ export class WorkletChannel {
                     // coarse tuning
                     case 0x0002:
                         // semitones
-                        this.channelTuningSemitones = dataValue - 64;
-                        console.log(`%cChannel ${this.channelNumber} tuning. Semitones: %c${this.channelTuningSemitones}`,
-                            consoleColors.info,
-                            consoleColors.value);
-                        this.post({
-                            messageType: workletMessageType.ccChange,
-                            messageData: [NON_CC_INDEX_OFFSET + modulatorSources.channelTuning, (this.channelTuningSemitones) * 100]
-                        });
+                        this.setChannelTuning(dataValue - 64);
                         break;
 
                     case 0x3FFF:
@@ -700,6 +693,22 @@ export class WorkletChannel {
         }
     }
 
+    /**
+     * Sets the channel's tuning
+     * @param semitones {number}
+     */
+    setChannelTuning(semitones)
+    {
+        this.channelTuningSemitones = semitones;
+        console.log(`%cChannel ${this.channelNumber} tuning. Semitones: %c${this.channelTuningSemitones}`,
+            consoleColors.info,
+            consoleColors.value);
+        this.post({
+            messageType: workletMessageType.ccChange,
+            messageData: [NON_CC_INDEX_OFFSET + modulatorSources.channelTuning, (this.channelTuningSemitones) * 100]
+        });
+    }
+
     stopAll(force=false)
     {
         this.post({
diff --git a/src/website/OpenSans-Light.ttf b/src/website/OpenSans-Light.ttf
deleted file mode 100644
index 0d381897..00000000
Binary files a/src/website/OpenSans-Light.ttf and /dev/null differ
diff --git a/src/website/css/keyboard.css b/src/website/css/keyboard.css
index bc3e876c..3014942c 100644
--- a/src/website/css/keyboard.css
+++ b/src/website/css/keyboard.css
@@ -4,6 +4,7 @@
     flex-wrap: nowrap;
     align-items: stretch;
     min-height: 7vw;
+    background: black;
 }
 #keyboard .key
 {
diff --git a/src/website/css/keyboard_ui.css b/src/website/css/keyboard_ui.css
deleted file mode 100644
index 02b5ebda..00000000
--- a/src/website/css/keyboard_ui.css
+++ /dev/null
@@ -1,29 +0,0 @@
-#keyboard_selector select option
-{
-    background-color: var(--top-color);
-    text-align: center;
-    line-height: 50px;
-}
-
-#keyboard_selector select
-{
-    font-size: 20px;
-    display: block;
-    border: none;
-    background: var(--top-color);
-    text-align: center;
-    margin: auto;
-}
-
-.kebui_button
-{
-    font-size: 20px;
-    background: var(--top-color);
-    margin: auto;
-}
-
-.kebui_button:hover
-{
-    cursor: pointer;
-    text-shadow: 0 0 5px white;
-}
diff --git a/src/website/css/sequencer_ui.css b/src/website/css/sequencer_ui.css
index b68dc4e5..ea77199d 100644
--- a/src/website/css/sequencer_ui.css
+++ b/src/website/css/sequencer_ui.css
@@ -10,13 +10,17 @@
 #sequencer_controls #note_progress
 {
     border-radius: var(--progress-bar-height);
-    background-color: #406;
+    background: linear-gradient(95deg, #306, #406);
     height: var(--progress-bar-height);
     padding: 5px;
     transition: all 100ms linear;
     position: absolute;
 }
 
+#sequencer_controls .note_progress_light{
+    filter: brightness(3);
+}
+
 #sequencer_controls #note_time
 {
     position: relative;
@@ -46,13 +50,18 @@
 #sequencer_controls #note_progress_background
 {
     border-radius: var(--progress-bar-height);
-    background-color: #343434;
+    background: linear-gradient(90deg, #454545, #343434);
     height: var(--progress-bar-height);
     position: absolute;
     padding: 5px;
     width: 100%;
 }
 
+#sequencer_controls .note_progress_background_light
+{
+    background: linear-gradient(90deg, #ddd, #bbb) !important;
+}
+
 #sequencer_controls .lyrics{
     position: fixed;
     top:0;
@@ -64,7 +73,7 @@
     z-index: 256;
     display: block;
     opacity: 0;
-    backdrop-filter: blur(2px) brightness(0.5);
+    backdrop-filter: blur(5px) brightness(0.5);
     background-color: rgba(3, 3, 3, 0.3);
     transition: opacity 100ms ease-in-out;
     scroll-behavior: smooth;
@@ -73,21 +82,25 @@
     border-radius: 10px;
 }
 
+#sequencer_controls .lyrics_light{
+    backdrop-filter: blur(5px) brightness(1.5);
+    background-color: rgba(250, 250, 250, 0.8);
+}
+
 .lyrics_title{
     position: sticky;
     top: 2px;
-    background-color: rgba(3, 3, 3);
     border-radius: 10px;
 }
 
 .lyrics_selector{
     position: sticky;
     top: 2em;
-    background-color: rgba(3, 3, 3);
     width: 100%;
     border: none;
     font-size: 16px;
     padding: 5px;
+    background: transparent;
 }
 
 .lyrics_show{
diff --git a/src/website/css/settings.css b/src/website/css/settings.css
new file mode 100644
index 00000000..31b3d01b
--- /dev/null
+++ b/src/website/css/settings.css
@@ -0,0 +1,130 @@
+.seamless_button{
+    font-size: larger;
+    background: transparent;
+    margin: auto;
+    border: none;
+    user-select: none;
+}
+
+.settings_button
+{
+    display: flex;
+    align-items: center;
+}
+
+.seamless_button:hover
+{
+    cursor: pointer;
+    text-shadow: 0 0 5px white;
+}
+
+
+.gear {
+    transition: all 0.3s ease;
+    padding: 5px;
+    align-content: center;
+    display: flex;
+}
+
+.settings_button:hover .gear{
+    transform: rotate(45deg);
+}
+
+.settings_menu{
+    position: absolute;
+    overflow: scroll;
+    top: 100%;
+    right: 0;
+    width: 30em;
+    min-width: 30%;
+    max-width: 100%;
+    min-height: 100%;
+    z-index: 256;
+    display: block;
+    opacity: 0;
+    backdrop-filter: blur(2px) brightness(0.5);
+    background: rgba(3, 3, 3, 0.8);
+    transition: opacity 100ms ease-in-out;
+    scroll-behavior: smooth;
+    overflow-y: auto;
+    visibility: hidden;
+    border-radius: 10px;
+}
+
+.settings_menu_light{
+    backdrop-filter: blur(2px) brightness(1.5);
+    background: linear-gradient(45deg, rgba(230, 230, 230, 0.8), rgba(255, 255, 255, 0.8));
+}
+
+.settings_menu_show{
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+.settings_slider {
+    height: 31px;
+    -webkit-appearance: none;
+    margin: 10px 0;
+    background: transparent;
+    flex-grow: 1;
+}
+.settings_slider:focus {
+    outline: none;
+}
+
+.settings_slider::-webkit-slider-runnable-track {
+    height: 10px;
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000;
+    background: #510087;
+    border-radius: 5px;
+    border: 1px solid #000000;
+}
+.settings_slider::-webkit-slider-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 0 solid #000000;
+    height: 24px;
+    width: 16px;
+    border-radius: 50px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -7.5px;
+    background: transparent;
+}
+.settings_slider:focus::-webkit-slider-runnable-track {
+    background: #510087;
+}
+.settings_slider::-moz-range-track {
+    height: 10px;
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000;
+    background: #510087;
+    border-radius: 5px;
+    border: 1px solid #000000;
+}
+.settings_slider::-moz-range-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 0 solid #000000;
+    height: 24px;
+    width: 16px;
+    border-radius: 50px;
+    cursor: pointer;
+}
+
+.settings_menu select{
+    background: transparent;
+    border: none;
+    font-size: larger;
+}
+
+.settings_menu select:hover{
+    cursor: pointer;
+    text-shadow: 0 0 5px white;
+}
+
+.settings_group{
+    border-radius: 10px;
+    border: solid #333 1px;
+    margin: 10px;
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/src/website/css/style.css b/src/website/css/style.css
index 8dd2629b..7bfa9e7a 100644
--- a/src/website/css/style.css
+++ b/src/website/css/style.css
@@ -1,11 +1,7 @@
-@font-face {
-    font-family: "Sans";
-    src: url("../OpenSans-Light.ttf");
-}
-
 * {
     --font-color: #ccc;
-    font-family: "Sans", serif;
+    --top-buttons-color: linear-gradient(201deg, #222, #333);
+    font-family: "Open Sans Light", sans-serif;
     color: var(--font-color);
     text-align: center;
     margin: 0;
@@ -13,7 +9,7 @@
 html, body {
     height: 100%;
     width: 100%;
-    background-color: black;
+    background: black;
     overflow-x: clip;
 }
 
@@ -42,9 +38,9 @@ a{
 /*Top*/
 .top_part
 {
-    --top-color: #101010;
+    --top-color: linear-gradient(31deg, #101010, #212121);
     position: relative;
-    background-color: var(--top-color);
+    background: var(--top-color);
     border-radius: 0 0 15px 15px;
     padding: 3px;
     display: flex;
@@ -54,6 +50,10 @@ a{
     align-items: center;
 }
 
+.top_part_light{
+    --top-color: linear-gradient(20deg, #bbb, #ddd) !important;
+}
+
 input[type="file"] {
     display: none;
 }
@@ -72,7 +72,7 @@ input[type="file"] {
 
 #progress_bar
 {
-    background-color: #206;
+    background: #206;
     display: block;
     position: absolute;
     width: 0;
@@ -104,14 +104,14 @@ input[type="file"] {
     padding: 6px;
     border-radius: 5px;
     cursor: pointer;
-    background-color: #222;
+    background: var(--top-buttons-color);
     font-weight: bolder;
     margin: 5px;
 }
 
 #sf_selector option
 {
-    background-color: var(--top-color);
+    background: var(--top-color);
     text-align: center;
 }
 
@@ -120,7 +120,7 @@ input[type="file"] {
     display: block;
     border: none;
     font-size: 15px;
-    background: #222;
+    background: var(--top-buttons-color);
     text-align: center;
     margin: 5px;
     padding: 6px;
@@ -139,8 +139,16 @@ input[type="file"] {
     height: 1px; /*I have absolutely no idea how this works but whatever ¯\_(ツ)_/¯*/
 }
 
+#note_canvas.light_mode{
+    background: linear-gradient(45deg, #ccc, #fff);
+}
+
 /*Bottom*/
 
 .bottom_part{
     margin-top: 5px;
 }
+
+button{
+    user-select: none;
+}
\ No newline at end of file
diff --git a/src/website/css/synthesizer_ui.css b/src/website/css/synthesizer_ui.css
deleted file mode 100644
index 7f9d800a..00000000
--- a/src/website/css/synthesizer_ui.css
+++ /dev/null
@@ -1,189 +0,0 @@
-#synthetizer_controls
-{
-    --voice-meter-height: 2.5em;
-}
-
-.wrapper{
-    height: 80%;
-    padding: 2%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-}
-
-.controls_wrapper{
-    display: none;
-    flex-wrap: wrap;
-    align-items: stretch;
-    justify-content: center;
-    margin: 1em;
-}
-
-.controls_wrapper_show{
-    display: flex !important;
-}
-
-.controller_element
-{
-    position: relative;
-    height: var(--voice-meter-height);
-    flex: 1;
-    border-radius: 5px;
-    margin: 2px;
-}
-
-.voice_meter{
-    cursor: not-allowed;
-    border: solid 1px rgba(1, 1, 1, 0.5);
-    min-width: 7em;
-}
-
-.voice_meter.editable{
-    cursor: col-resize;
-}
-
-.voice_meter .voice_meter_bar{
-    position: relative;
-    display: block;
-    height: 100%;
-    border-radius: 3px;
-    margin-top: auto;
-    background-color: #406;
-}
-
-.voice_meter_bar_smooth{
-    transition: width ease-in-out 100ms;
-}
-
-.voice_meter .voice_meter_text{
-    position: absolute;
-    z-index: 1;
-    height: var(--voice-meter-height);
-    line-height: var(--voice-meter-height);
-    top: 0;
-    width: 100%;
-    text-align: center;
-    text-shadow: 1px 1px 2px #000;
-    user-select: none;
-    white-space: nowrap;
-}
-
-.synthui_controller{
-    left: 0;
-    display: none;
-    position: absolute;
-    backdrop-filter: blur(2px) brightness(0.5);
-    background-color: rgba(3, 3, 3, 0.3);
-    top: 100%;
-    border-radius: 15px;
-    width: 100%;
-    z-index: 127;
-}
-
-.synthui_controller_show{
-    display: block !important;
-}
-
-.channel_controller{
-    display: flex;
-    align-items: stretch;
-    flex-wrap: wrap;
-}
-
-.no_voices {
-    filter: brightness(80%);
-}
-
-.voice_selector{
-    border: #777 1px solid;
-    line-height: var(--voice-meter-height);
-    background-color: rgba(1, 1, 1, 0.5);
-    font-size: 16px;
-    font-weight: bold;
-    min-width: 8em;
-}
-
-.voice_selector .selector_option{
-    padding: 5px;
-    background-color: #111;
-    text-align: left;
-}
-
-.voice_selector optgroup{
-    font-weight: bolder;
-    background-color: #141414;
-    text-align: left;
-}
-
-.voice_selector .selector_option:hover
-{
-    background-color: #222;
-    cursor: pointer;
-
-}
-
-.selector_options:hover{
-    display: block;
-}
-
-.mute_button
-{
-    flex: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: #777 1px solid;
-    min-width: var(--voice-meter-height);
-}
-
-.mute_button:hover{
-    cursor: pointer;
-
-}
-
-.voice_reset{
-    flex: 0;
-    min-width: 0;
-    display: flex;
-    visibility: hidden;
-    justify-content: center;
-    align-items: center;
-    border: #777 1px solid;
-    transition: min-width 50ms ease;
-}
-
-.voice_reset:hover{
-    visibility: visible;
-    min-width: var(--voice-meter-height);
-    cursor: pointer;
-}
-
-.locked_selector{
-    color: red;
-}
-
-.locked_selector:hover + .voice_reset{
-    visibility: visible;
-    min-width: var(--voice-meter-height);
-}
-
-.synthui_button
-{
-    background: #000;
-    border: 1px #333 solid;
-    margin: 2px;
-    border-radius: 5px;
-    font-size: 16px;
-    display: block;
-    min-height: var(--voice-meter-height);
-    white-space: nowrap;
-    color: var(--font-color);
-    flex: 1;
-}
-.synthui_button:hover
-{
-    cursor: pointer;
-    background: #111;
-    color: #fff;
-    text-shadow: 0 0 5px white;
-}
diff --git a/src/website/css/synthesizer_ui/synthesizer_ui.css b/src/website/css/synthesizer_ui/synthesizer_ui.css
new file mode 100644
index 00000000..4a00f107
--- /dev/null
+++ b/src/website/css/synthesizer_ui/synthesizer_ui.css
@@ -0,0 +1,109 @@
+@import "voice_meter.css";
+@import "voice_selector.css";
+@import "synthui_button.css";
+
+#synthetizer_controls
+{
+    --voice-meter-height: 2.5em;
+}
+
+.wrapper{
+    height: 80%;
+    padding: 2%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.controls_wrapper{
+    display: none;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: center;
+    margin: 1em;
+}
+
+.controls_wrapper_show{
+    display: flex !important;
+}
+
+.controller_element
+{
+    position: relative;
+    height: var(--voice-meter-height);
+    flex: 1;
+    border-radius: 5px;
+    margin: 2px;
+}
+
+.synthui_controller{
+    left: 0;
+    display: none;
+    position: absolute;
+    backdrop-filter: blur(2px) brightness(0.5);
+    background: rgba(3, 3, 3, 0.3);
+    top: 100%;
+    border-radius: 15px;
+    width: 100%;
+    z-index: 127;
+}
+
+.synthui_controller_light
+{
+    backdrop-filter: blur(2px) brightness(1.5) !important;
+    background: linear-gradient(115deg, rgba(200, 200, 200, 0.7), rgba(255, 255, 255, 0.7), rgba(200, 200, 200, 0.7)) !important;
+}
+
+.synthui_controller_show{
+    display: block !important;
+}
+
+.channel_controller{
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+}
+
+.no_voices {
+    filter: brightness(80%);
+}
+
+.mute_button
+{
+    flex: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: #777 1px solid;
+    min-width: var(--voice-meter-height);
+}
+
+.mute_button_light * {
+    color: black;
+}
+
+.mute_button:hover{
+    cursor: pointer;
+
+}
+
+.voice_reset{
+    flex: 0;
+    min-width: 0;
+    display: flex;
+    visibility: hidden;
+    justify-content: center;
+    align-items: center;
+    border: #777 1px solid;
+    transition: min-width 50ms ease;
+}
+
+.voice_reset_light * {
+    color: black;
+}
+
+.voice_reset:hover{
+    visibility: visible;
+    min-width: var(--voice-meter-height);
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/website/css/synthesizer_ui/synthui_button.css b/src/website/css/synthesizer_ui/synthui_button.css
new file mode 100644
index 00000000..66b5476c
--- /dev/null
+++ b/src/website/css/synthesizer_ui/synthui_button.css
@@ -0,0 +1,41 @@
+.synthui_button
+{
+    background: #000;
+    border: 1px #333 solid;
+    margin: 2px;
+    border-radius: 5px;
+    font-size: 16px;
+    display: block;
+    min-height: var(--voice-meter-height);
+    white-space: nowrap;
+    color: var(--font-color);
+    flex: 1;
+}
+.synthui_button:hover
+{
+    cursor: pointer;
+    background: #111;
+    color: #fff;
+    text-shadow: 0 0 5px white;
+}
+
+.synthui_button_light{
+    background: #fff;
+    border: 1px #ccc solid;
+    margin: 2px;
+    border-radius: 5px;
+    font-size: 16px;
+    display: block;
+    min-height: var(--voice-meter-height);
+    white-space: nowrap;
+    color: #333;
+    flex: 1;
+    text-shadow: 1px 1px 2px #000;
+}
+
+.synthui_button_light:hover
+{
+    cursor: pointer;
+    color: #666;
+    text-shadow: 0 0 5px #666;
+}
\ No newline at end of file
diff --git a/src/website/css/synthesizer_ui/voice_meter.css b/src/website/css/synthesizer_ui/voice_meter.css
new file mode 100644
index 00000000..c6fd3ec5
--- /dev/null
+++ b/src/website/css/synthesizer_ui/voice_meter.css
@@ -0,0 +1,43 @@
+.voice_meter{
+    cursor: not-allowed;
+    border: solid 1px rgba(1, 1, 1, 0.5);
+    min-width: 7em;
+}
+
+.voice_meter.editable{
+    cursor: col-resize;
+}
+
+.voice_meter .voice_meter_bar{
+    position: relative;
+    display: block;
+    height: 100%;
+    border-radius: 3px;
+    margin-top: auto;
+    background-color: #406;
+}
+
+.voice_meter_light_color{
+    filter: brightness(3);
+}
+
+.voice_meter_bar_smooth{
+    transition: width ease-in-out 100ms;
+}
+
+.voice_meter .voice_meter_text{
+    position: absolute;
+    z-index: 1;
+    height: var(--voice-meter-height);
+    line-height: var(--voice-meter-height);
+    top: 0;
+    width: 100%;
+    text-align: center;
+    text-shadow: 1px 1px 2px #000;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.voice_meter .voice_meter_text_light{
+    color: black;
+}
\ No newline at end of file
diff --git a/src/website/css/synthesizer_ui/voice_selector.css b/src/website/css/synthesizer_ui/voice_selector.css
new file mode 100644
index 00000000..3c07a3be
--- /dev/null
+++ b/src/website/css/synthesizer_ui/voice_selector.css
@@ -0,0 +1,58 @@
+.voice_selector{
+    border: #777 1px solid;
+    line-height: var(--voice-meter-height);
+    background-color: rgba(1, 1, 1, 0.5);
+    font-size: 16px;
+    font-weight: bold;
+    min-width: 8em;
+}
+
+.voice_selector_light{
+    border: #111 1px solid;
+    background: linear-gradient(170deg, #bbb, #fff);
+    color: black;
+}
+
+.voice_selector:hover{
+    cursor: pointer;
+    background: #111;
+    color: #fff;
+    text-shadow: 0 0 5px white;
+}
+
+.voice_selector_light:hover{
+    background: #fff;
+    color: #444;
+}
+
+.voice_selector .selector_option{
+    padding: 5px;
+    background-color: #111;
+    text-align: left;
+}
+
+.voice_selector optgroup{
+    font-weight: bolder;
+    background-color: #141414;
+    text-align: left;
+}
+
+.voice_selector .selector_option:hover
+{
+    background-color: #222;
+    cursor: pointer;
+
+}
+
+.selector_options:hover{
+    display: block;
+}
+
+.locked_selector{
+    color: red;
+}
+
+.locked_selector:hover + .voice_reset{
+    visibility: visible;
+    min-width: var(--voice-meter-height);
+}
\ No newline at end of file
diff --git a/src/website/index.html b/src/website/index.html
index 03a4cc72..1569df0b 100644
--- a/src/website/index.html
+++ b/src/website/index.html
@@ -7,9 +7,9 @@
   <title>SpessaSynth Local Edition</title>
   <link rel="stylesheet" href='website/css/style.css'>
   <link rel="stylesheet" href='website/css/sequencer_ui.css'>
-  <link rel="stylesheet" href='website/css/keyboard_ui.css'>
-  <link rel="stylesheet" href='website/css/synthesizer_ui.css'>
+  <link rel="stylesheet" href='website/css/synthesizer_ui/synthesizer_ui.css'>
   <link rel="stylesheet" href='website/css/keyboard.css'>
+  <link rel='stylesheet' href='website/css/settings.css'>
 </head>
 <body>
   <div class='spessasynth_main'>
@@ -27,7 +27,7 @@ <h1 id="title">SpessaSynth: SoundFont2 Javascript Synthetizer</h1>
         </div>
       </div>
 
-      <div id="keyboard_selector">
+      <div id='settings_div'>
       </div>
     </div>
     <canvas id="note_canvas"></canvas>
diff --git a/src/website/main.js b/src/website/main.js
index 58cae68a..534b1e08 100644
--- a/src/website/main.js
+++ b/src/website/main.js
@@ -102,6 +102,7 @@ async function startMidi(midiFiles)
         fName += ` and ${midiFiles.length - 1} others`;
     }
     document.getElementById("file_upload").innerText = fName;
+    document.getElementById("file_upload").title = midiFiles[0].name;
     /**
      * @type {MIDI[]}
      */
diff --git a/src/website/manager.js b/src/website/manager.js
index ff013b48..a84107e1 100644
--- a/src/website/manager.js
+++ b/src/website/manager.js
@@ -9,6 +9,7 @@ import {SynthetizerUI} from "./ui/synthesizer_ui/synthetizer_ui.js";
 import { MIDIDeviceHandler } from '../spessasynth_lib/midi_handler/midi_handler.js'
 import { WebMidiLinkHandler } from '../spessasynth_lib/midi_handler/web_midi_link.js'
 import { Sequencer } from '../spessasynth_lib/sequencer/sequencer.js'
+import { Settings } from './ui/settings_ui/settings.js'
 
 export class Manager {
     channelColors = [
@@ -62,7 +63,7 @@ export class Manager {
         this.wml = new WebMidiLinkHandler(this.synth);
 
         // set up keyboard
-        this.keyboard = new MidiKeyboard(this.channelColors, this.synth, this.midHandler);
+        this.keyboard = new MidiKeyboard(this.channelColors, this.synth);
 
         // set up renderer
         const canvas = document.getElementById("note_canvas");
@@ -79,12 +80,22 @@ export class Manager {
         this.renderer.render(true);
 
         // set up synth UI
-        this.synthUI = new SynthetizerUI(this.channelColors);
+        this.synthUI = new SynthetizerUI(this.channelColors, document.getElementById("synthetizer_controls"));
         this.synthUI.connectSynth(this.synth);
 
         // create an UI for sequencer
-        this.seqUI = new SequencerUI();
-
+        this.seqUI = new SequencerUI(document.getElementById("sequencer_controls"));
+
+        // set up settings UI
+        this.settingsUI = new Settings(
+            document.getElementById("settings_div"),
+            this.synthUI,
+            this.seqUI,
+            this.renderer,
+            this.keyboard,
+            this.midHandler);
+
+        // add keypresses
         document.addEventListener("keypress", e => {
             switch (e.key.toLowerCase()) {
                 case "c":
@@ -134,6 +145,5 @@ export class Manager {
 
         // play the midi
         this.seq.play(true);
-        this.keyboard.createMIDIOutputSelector(this.seq);
     }
 }
\ No newline at end of file
diff --git a/src/website/ui/icons.js b/src/website/ui/icons.js
index dfa55b8c..0bb03ad9 100644
--- a/src/website/ui/icons.js
+++ b/src/website/ui/icons.js
@@ -105,4 +105,11 @@ export function getNoteSvg(size)
   <path fill-rule="evenodd" d="M9 3v10H8V3h1z"/>
   <path d="M8 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 13 2.22V4L8 5V2.82z"/>
 </svg>`;
+}
+
+export function getGearSvg(size)
+{
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+  <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+</svg>`;
 }
\ No newline at end of file
diff --git a/src/website/ui/midi_keyboard.js b/src/website/ui/midi_keyboard.js
index cb321978..5c61d428 100644
--- a/src/website/ui/midi_keyboard.js
+++ b/src/website/ui/midi_keyboard.js
@@ -1,5 +1,4 @@
 import {Synthetizer} from "../../spessasynth_lib/synthetizer/synthetizer.js";
-import { MIDIDeviceHandler } from '../../spessasynth_lib/midi_handler/midi_handler.js'
 import { midiControllers } from '../../spessasynth_lib/midi_parser/midi_message.js'
 
 const KEYBOARD_VELOCITY = 100;
@@ -11,9 +10,8 @@ export class MidiKeyboard
      * Creates a new midi keyboard(keyboard)
      * @param channelColors {Array<string>}
      * @param synth {Synthetizer}
-     * @param handler {MIDIDeviceHandler}
      */
-    constructor(channelColors, synth, handler) {
+    constructor(channelColors, synth) {
         this.mouseHeld = false;
         this.heldKeys = [];
         /**
@@ -147,70 +145,6 @@ export class MidiKeyboard
             this.keys.push(keyElement);
         }
 
-        this.selectorMenu = document.getElementById("keyboard_selector");
-        // dark mode toggle
-        const modeToggler = document.createElement("div");
-        modeToggler.innerText = "Toggle Dark Keyboard";
-        modeToggler.classList.add("kebui_button");
-        modeToggler.onclick = this.toggleMode.bind(this);
-
-        this.selectorMenu.appendChild(modeToggler);
-
-        // channel selector
-        const channelSelector = document.createElement("select");
-        channelSelector.classList.add("kebui_button");
-
-        let channelNumber = 0;
-        for(const channel of this.synth.midiChannels)
-        {
-            const option = document.createElement("option");
-
-            option.value = channelNumber.toString();
-            option.innerText = `Channel ${channelNumber + 1}`;
-
-            option.style.background = channelColors[channelNumber];
-            option.style.color = "rgb(0, 0, 0)";
-
-            channelSelector.appendChild(option);
-            channelNumber++;
-        }
-        channelSelector.onchange = () => {
-            this.selectChannel(parseInt(channelSelector.value));
-        }
-        this.selectorMenu.appendChild(channelSelector);
-
-        this.handler = handler;
-        handler.createMIDIDeviceHandler().then(() => {
-            // input selector
-            if(handler.inputs.length < 1)
-            {
-                return;
-            }
-            const inputSelector = document.createElement("select");
-            inputSelector.classList.add("kebui_button");
-            // no device
-            inputSelector.innerHTML = "<option value='-1' selected>No input selected</option>";
-            for(const input of handler.inputs)
-            {
-                const option = document.createElement("option");
-                option.value = input[0];
-                option.innerText = input[1].name;
-                inputSelector.appendChild(option);
-            }
-            inputSelector.onchange = () => {
-                if(inputSelector.value === "-1")
-                {
-                    handler.disconnectAllDevicesFromSynth();
-                }
-                else
-                {
-                    handler.connectDeviceToSynth(handler.inputs.get(inputSelector.value), this.synth);
-                }
-            }
-
-            this.selectorMenu.appendChild(inputSelector);
-        });
-
         // connect the synth to keyboard
         this.synth.eventHandler.addEvent("noteon", "keyboard-note-on", e => {
             this.pressNote(e.midiNote, e.channel, e.velocity, e.channelVolume, e.channelExpression);
@@ -223,19 +157,6 @@ export class MidiKeyboard
         this.synth.eventHandler.addEvent("stopall", "keyboard-stop-all", () => {
             this.clearNotes();
         });
-
-        this.synth.eventHandler.addEvent("newchannel", "keyboard-new-channel",  () => {
-            const option = document.createElement("option");
-
-            option.value = channelNumber.toString();
-            option.innerText = `Channel ${channelNumber + 1}`;
-
-            option.style.background = channelColors[channelNumber % channelColors.length];
-            option.style.color = "rgb(0, 0, 0)";
-
-            channelSelector.appendChild(option);
-            channelNumber++
-        });
     }
 
     toggleMode()
@@ -256,42 +177,6 @@ export class MidiKeyboard
         })
     }
 
-    createMIDIOutputSelector(seq)
-    {
-        if(!this.handler.outputs)
-        {
-            return;
-        }
-        if(this.handler.inputs.length < 1)
-        {
-            return;
-        }
-        // output selector
-        const outputSelector = document.createElement("select");
-        // no device
-        outputSelector.innerHTML = "<option value='-1' selected>No output selected</option>";
-        for(const output of this.handler.outputs)
-        {
-            const option = document.createElement("option");
-            option.value = output[0];
-            option.innerText = output[1].name;
-            outputSelector.appendChild(option);
-        }
-
-        outputSelector.onchange = () => {
-            if(outputSelector.value === "-1")
-            {
-                this.handler.disconnectSeqFromMIDI(seq);
-            }
-            else
-            {
-                this.handler.connectMIDIOutputToSeq(this.handler.outputs.get(outputSelector.value), seq);
-            }
-        }
-
-        this.selectorMenu.appendChild(outputSelector);
-    }
-
     /**
      * Selects the channel from synth
      * @param channel {number} 0-15
diff --git a/src/website/ui/renderer.js b/src/website/ui/renderer.js
index 3e2c07fa..386b1626 100644
--- a/src/website/ui/renderer.js
+++ b/src/website/ui/renderer.js
@@ -6,11 +6,12 @@ import { Sequencer } from '../../spessasynth_lib/sequencer/sequencer.js';
 const CHANNEL_ANALYSER_FFT = 512;
 const DRUMS_ANALYSER_FFT = 2048;
 const WAVE_MULTIPLIER = 2;
+const ANALYSER_STROKE = 2;
 
 // note rendering
 const DARKER_MULTIPLIER = 0.6;
 const GRADIENT_DARKEN = 0.5;
-const STROKE_THICKNESS = 0.5;
+const STROKE_THICKNESS = 1;
 const NOTE_MARGIN = 1;
 const FONT_SIZE = 16;
 const STROKE_COLOR = "#000";
@@ -32,11 +33,14 @@ export class Renderer
         // variables
         this.noteFallingTimeMs = 1000;
         this.noteAfterTriggerTimeMs = 0;
+        this.lineThickness = ANALYSER_STROKE;
+
 
         // booleans
         this.renderBool = true;
         this.renderAnalysers = true;
         this.renderNotes = true;
+        this.drawActiveNotes = true;
 
         /**
          * canvas
@@ -79,6 +83,11 @@ export class Renderer
         this.connectChannelAnalysers(synth);
     }
 
+    toggleDarkMode()
+    {
+        this.canvas.classList.toggle("light_mode");
+    }
+
     /**
      * Connect the 16 channels to their respective analysers
      * @param synth {Synthetizer}
@@ -233,7 +242,7 @@ export class Renderer
                             }
                             else {
                                 // save the notes to draw
-                                if (note.start > currentSeqTime || noteSum < currentSeqTime) {
+                                if ((note.start > currentSeqTime || noteSum < currentSeqTime) && this.drawActiveNotes) {
                                     notesToDraw.push({
                                         x: xPos,
                                         y: yPos,
@@ -312,6 +321,7 @@ export class Renderer
         const multiplier = WAVE_MULTIPLIER * waveHeight;
 
         // draw
+        this.drawingContext.lineWidth = this.lineThickness;
         this.drawingContext.strokeStyle = this.channelColors[channelNumber];
 
         const path = new Path2D();
diff --git a/src/website/ui/sequencer_ui/sequencer_ui.js b/src/website/ui/sequencer_ui/sequencer_ui.js
index b4f04dbe..7565a474 100644
--- a/src/website/ui/sequencer_ui/sequencer_ui.js
+++ b/src/website/ui/sequencer_ui/sequencer_ui.js
@@ -14,15 +14,39 @@ const DEFAULT_ENCODING = "Shift_JIS";
 export class SequencerUI{
     /**
      * Creates a new User Interface for the given MidiSequencer
+     * @param element {HTMLElement} the element to create sequi in
      */
-    constructor() {
-        this.controls = document.getElementById("sequencer_controls");
+    constructor(element) {
+        this.controls = element;
         this.encoding = DEFAULT_ENCODING;
         this.decoder = new TextDecoder(this.encoding);
         this.encoder = new TextEncoder(this.encoding);
         this.text = "";
         this.rawText = [];
         this.titles = [""];
+        this.mode = "dark";
+    }
+
+    toggleDarkMode()
+    {
+        if(this.mode === "dark")
+        {
+            this.mode = "light";
+        }
+        else
+        {
+            this.mode = "dark";
+        }
+        if(!this.seq)
+        {
+            this.requiresThemeUpdate = true;
+            return;
+        }
+        this.progressBar.classList.toggle("note_progress_light");
+        this.progressBarBackground.classList.toggle("note_progress_background_light");
+        this.lyricsElement.mainDiv.classList.toggle("lyrics_light");
+        this.lyricsElement.text.classList.toggle("lyrics_light");
+        this.lyricsElement.selector.classList.toggle("lyrics_light");
     }
 
     createNavigatorHandler()
@@ -147,6 +171,17 @@ export class SequencerUI{
             this.text = "";
             this.rawText = [];
         }
+
+        if(this.requiresThemeUpdate)
+        {
+            if(this.mode === "light")
+            {
+                // change to dark and then switch
+                this.mode = "dark";
+                this.toggleDarkMode();
+            }
+            // otherwise we're already dark
+        }
     }
 
     changeEncoding(encoding)
@@ -208,6 +243,7 @@ export class SequencerUI{
         mainLyricsDiv.appendChild(text);
         this.lyricsElement.text = text;
         this.lyricsElement.mainDiv = mainLyricsDiv;
+        this.lyricsElement.selector = encodingSelector;
         this.controls.appendChild(mainLyricsDiv);
         setInterval(() => {
             if(this.lyricsElement.text.innerText !== this.text) this.lyricsElement.text.innerText = this.text;
@@ -217,6 +253,7 @@ export class SequencerUI{
         // background bar
         const progressBarBg = document.createElement("div");
         progressBarBg.id = "note_progress_background";
+        this.progressBarBackground = progressBarBg;
 
 
         // foreground bar
diff --git a/src/website/ui/settings_ui/settings.js b/src/website/ui/settings_ui/settings.js
new file mode 100644
index 00000000..4463688a
--- /dev/null
+++ b/src/website/ui/settings_ui/settings.js
@@ -0,0 +1,301 @@
+import { settingsHtml } from './settings_html.js'
+import { getGearSvg } from '../icons.js'
+export class Settings
+{
+    /**
+     * Creates a new instance of synthetizer UI
+     * @param element {HTMLElement} the element to create the settings in
+     * @param sythui {SynthetizerUI}
+     * @param sequi {SequencerUI}
+     * @param renderer {Renderer}
+     * @param midiKeyboard {MidiKeyboard}
+     * @param midiDeviceHandler {MIDIDeviceHandler}
+     */
+    constructor(element, sythui, sequi, renderer, midiKeyboard, midiDeviceHandler) {
+        let settingsWrapper = element;
+        settingsWrapper.style.minWidth = "7em";
+        this.mode = "dark";
+
+        const settingsButton = document.createElement("div");
+        settingsButton.style.position = "relative";
+        settingsButton.classList.add("seamless_button");
+        settingsButton.classList.add("settings_button");
+        settingsWrapper.insertBefore(settingsButton, settingsWrapper.firstChild);
+
+        let text = document.createElement('span');
+        text.innerText = "Settings";
+        text.style.fontSize = "larger";
+        text.style.minWidth = "7em";
+
+        let gear = document.createElement('div');
+        gear.innerHTML = getGearSvg(32);
+        gear.classList.add("gear");
+
+        settingsButton.appendChild(text);
+        settingsButton.appendChild(gear);
+
+        this.mainDiv = document.createElement("div");
+        this.mainDiv.classList.add("settings_menu");
+        settingsButton.onclick = e => {
+            this.mainDiv.classList.toggle("settings_menu_show");
+            e.stopPropagation();
+        }
+        settingsWrapper.appendChild(this.mainDiv);
+
+        // stop propagation to disable hide on click outside
+        this.mainDiv.onclick = e => e.stopPropagation();
+
+        // hide if clicked outside
+        document.addEventListener("click", () => {
+            this.mainDiv.classList.remove("settings_menu_show")
+        })
+
+        // load the html
+        this.mainDiv.innerHTML = settingsHtml;
+
+        // create handlers for all settings
+        this._createRendererHandler(renderer,
+            document.getElementById("note_time_slider"),
+            document.getElementById("analyser_toggler"),
+            document.getElementById("note_toggler"),
+            document.getElementById("active_note_toggler"),
+            document.getElementById("analyser_thickness_slider"));
+
+        this._createMidiSettingsHandler(document.getElementById("midi_input_selector"),
+            document.getElementById("midi_output_selector"),
+            midiDeviceHandler,
+            sequi,
+            sythui);
+
+        this._createKeyboardHandler(document.getElementById("channel_selector"),
+            midiKeyboard,
+            sythui,
+            document.getElementById("mode_selector"));
+
+        this._createLightModeHandler(document.getElementById("toggle_mode_button"), sythui, sequi, renderer);
+
+        // key bind is "R"
+        document.addEventListener("keydown", e => {
+            if(e.key.toLowerCase() === "r")
+            {
+                this.mainDiv.classList.toggle("settings_menu_show");
+            }
+        })
+    }
+
+    /**
+     * @param button {HTMLButtonElement}
+     * @param synthui {SynthetizerUI}
+     * @param sequi {SequencerUI}
+     * @param renderer {Renderer}
+     * @private
+     */
+    _createLightModeHandler(button, synthui, sequi, renderer)
+    {
+        button.onclick = () => {
+            if(button.innerText === "Mode: Dark")
+            {
+                this.mode = "light";
+                button.innerText = "Mode: Light";
+                renderer.drawActiveNotes = false;
+            }
+            else
+            {
+                renderer.drawActiveNotes = true;
+                this.mode = "dark";
+                button.innerText = "Mode: Dark";
+            }
+            renderer.toggleDarkMode();
+            synthui.toggleDarkMode();
+            sequi.toggleDarkMode()
+
+            // top part
+            document.getElementsByClassName("top_part")[0].classList.toggle("top_part_light");
+
+            // settings
+            this.mainDiv.classList.toggle("settings_menu_light");
+
+            // rest
+            // things get hacky here: change the global (*) --font-color to black:
+            document.styleSheets[0].cssRules[0].style.setProperty("--font-color",  this.mode === "dark" ? "#ccc" : "#333");
+            document.styleSheets[0].cssRules[0].style.setProperty("--top-buttons-color",  this.mode === "dark" ? "#222" : "linear-gradient(270deg, #ddd, #fff)");
+            document.body.style.background = this.mode === "dark" ? "black" : "white";
+        }
+    }
+
+    /**
+     * @param inputSelect {HTMLSelectElement}
+     * @param outputSelect {HTMLSelectElement}
+     * @param handler {MIDIDeviceHandler}
+     * @param sequi {SequencerUI}
+     * @param synthui {SynthetizerUI}
+     * @private
+     */
+    _createMidiSettingsHandler(inputSelect, outputSelect, handler, sequi, synthui)
+    {
+        handler.createMIDIDeviceHandler().then(() => {
+            this._createMidiInputHandler(inputSelect, handler, synthui.synth)
+            this._createMidiOutputHandler(outputSelect, handler, sequi);
+        });
+    }
+
+    /**
+     * @param select {HTMLSelectElement}
+     * @param handler {MIDIDeviceHandler}
+     * @param synth {Synthetizer}
+     * @private
+     */
+    _createMidiInputHandler(select, handler, synth)
+    {
+        // input selector
+        if(handler.inputs.length < 1)
+        {
+            return;
+        }
+        // no device
+        select.innerHTML = "<option value='-1' selected>Disabled</option>";
+        for(const input of handler.inputs)
+        {
+            const option = document.createElement("option");
+            option.value = input[0];
+            option.innerText = input[1].name;
+            select.appendChild(option);
+        }
+        select.onchange = () => {
+            if(select.value === "-1")
+            {
+                handler.disconnectAllDevicesFromSynth();
+            }
+            else
+            {
+                handler.connectDeviceToSynth(handler.inputs.get(select.value), synth);
+            }
+        }
+    }
+
+    /**
+     * note that using sequi allows us to obtain the sequencer after it has been created
+     * @param select {HTMLSelectElement}
+     * @param handler {MIDIDeviceHandler}
+     * @param sequi {SequencerUI}
+     * @private
+     */
+    _createMidiOutputHandler(select, handler, sequi)
+    {
+        if(!handler.outputs)
+        {
+            setTimeout(() => {
+                this._createMidiOutputHandler(select, handler, sequi);
+            }, 1000);
+            return;
+        }
+        if(handler.outputs.length < 1)
+        {
+            return;
+        }
+        // no device
+        select.innerHTML = "<option value='-1' selected>Use SpessaSynth</option>";
+        for(const output of handler.outputs)
+        {
+            const option = document.createElement("option");
+            option.value = output[0];
+            option.innerText = output[1].name;
+            select.appendChild(option);
+        }
+
+        select.onchange = () => {
+            if(!sequi.seq)
+            {
+                return;
+            }
+            if(select.value === "-1")
+            {
+                handler.disconnectSeqFromMIDI(sequi.seq);
+            }
+            else
+            {
+                handler.connectMIDIOutputToSeq(handler.outputs.get(select.value), sequi.seq);
+            }
+        }
+    }
+
+    /**
+     * The channel colors are taken from synthui
+     * @param select {HTMLSelectElement}
+     * @param keyboard {MidiKeyboard}
+     * @param synthui {SynthetizerUI}
+     * @param button {HTMLButtonElement}
+     * @private
+     */
+    _createKeyboardHandler(select, keyboard, synthui, button)
+    {
+        let channelNumber = 0;
+
+        function createChannel()
+        {
+            const option = document.createElement("option");
+
+            option.value = channelNumber.toString();
+            option.innerText = `Channel ${channelNumber + 1}`;
+
+            option.style.background = synthui.channelColors[channelNumber % synthui.channelColors.length];
+            option.style.color = "rgb(0, 0, 0)";
+
+            select.appendChild(option);
+            channelNumber++;
+        }
+
+        // create the initial synth channels+
+        for(const channel of synthui.synth.midiChannels)
+        {
+            createChannel();
+        }
+        select.onchange = () => {
+            keyboard.selectChannel(parseInt(select.value));
+        }
+
+        // listen for new channels
+        synthui.synth.eventHandler.addEvent("newchannel", "settings-new-channel",  () => {
+            createChannel();
+        });
+
+        // dark mode toggle
+        button.onclick = () => {
+            keyboard.toggleMode();
+            if(button.innerText === "Mode: Black")
+            {
+                button.innerText = "Mode: White";
+            }
+            else
+            {
+                button.innerText = "Mode: Black";
+            }
+        }
+    }
+
+    /**
+     * @param renderer {Renderer}
+     * @param slider {HTMLInputElement}
+     * @param analyser {HTMLButtonElement}
+     * @param note {HTMLButtonElement}
+     * @param activeNote {HTMLButtonElement}
+     * @param analyserSlider {HTMLInputElement}
+     * @private
+     */
+    _createRendererHandler(renderer, slider, analyser, note, activeNote, analyserSlider)
+    {
+        slider.oninput = () => {
+            renderer.noteFallingTimeMs = slider.value;
+            slider.nextElementSibling.innerText = `${slider.value}ms`
+        }
+
+        analyserSlider.oninput = () => {
+            renderer.lineThickness = analyserSlider.value;
+            analyserSlider.nextElementSibling.innerText = `${analyserSlider.value}px`;
+        }
+
+        analyser.onclick = () => renderer.renderAnalysers = !renderer.renderAnalysers;
+        note.onclick = () => renderer.renderNotes = !renderer.renderNotes;
+        activeNote.onclick = () => renderer.drawActiveNotes = !renderer.drawActiveNotes;
+    }
+}
\ No newline at end of file
diff --git a/src/website/ui/settings_ui/settings_html.js b/src/website/ui/settings_ui/settings_html.js
new file mode 100644
index 00000000..0d72594a
--- /dev/null
+++ b/src/website/ui/settings_ui/settings_html.js
@@ -0,0 +1,55 @@
+export const settingsHtml = `
+<h1>Program settings</h1>
+
+<div class='settings_group'>
+    <h2>Renderer settings</h2>
+    <label title='How fast the notes fall (visually)'> Note falling time (milisseconds) </label>
+    <p style='display: flex; align-items: center; width: 100%; justify-content: center'>
+        <input type='range' min='1' max='9999' value='1000' class='settings_slider' id='note_time_slider'>
+        <span>1000ms</span>
+        </span>
+    </p>
+    
+    <label title='How thick the analyser lines are'> Waveform line thickness (px) </label>
+    <p style='display: flex; align-items: center; width: 100%; justify-content: center'>
+        <input type='range' min='0' max='10' value='2' class='settings_slider' id='analyser_thickness_slider'>
+        <span>2px</span>
+        </span>
+    </p>
+    
+    <button class='seamless_button' id='analyser_toggler' title='Toggle rendering of the waveforms of the channels'>Toggle waveforms rendering</button>
+    <br/>
+    <button class='seamless_button' id='note_toggler' title='Toggle rendering of the notes when playing a MIDI file'>Toggle notes rendering</button>
+    <br/>
+    <button class='seamless_button' id='active_note_toggler' title='Toggle notes "lighting up" when they get active'>Toggle drawing active notes</button>
+</div>
+
+<div class='settings_group'>
+    <h2>Keyboard settings</h2>
+    <p title='The channel keyboard sends messages to'>Selected channel:</p>
+    <select id='channel_selector'>
+    </select>
+    <br/>
+    <button class='seamless_button' id='mode_selector' title='Toggle the keyboard thee'>Mode: White</button>
+</div>
+
+<div class='settings_group'>
+    <h2>MIDI Settings</h2>
+    <p title='The port to listen on for MIDI messages'>MIDI Input</p>
+    <select id='midi_input_selector'>
+        <option value='-1'>Disabled</option>
+    </select>
+    
+    <br/>
+    <br/>
+    <p title='The port to play the MIDI file to'>MIDI Output</p>
+    <select id='midi_output_selector'>
+        <option value='-1'>Use SpessaSynth</option>
+    </select>
+</div>
+
+<div class='settings_group'>
+    <h2>Interface Settings</h2>
+    <button class='seamless_button' id='toggle_mode_button' title='Toggle the interface theme'>Mode: Dark</button>
+</div>
+`;
\ No newline at end of file
diff --git a/src/website/ui/synthesizer_ui/synthetizer_ui.js b/src/website/ui/synthesizer_ui/synthetizer_ui.js
index 0e0b7046..7167396c 100644
--- a/src/website/ui/synthesizer_ui/synthetizer_ui.js
+++ b/src/website/ui/synthesizer_ui/synthetizer_ui.js
@@ -4,7 +4,6 @@ import { getDrumsSvg, getLoopSvg, getMuteSvg, getNoteSvg, getVolumeSvg } from '.
 import { ShiftableByteArray } from '../../../spessasynth_lib/utils/shiftable_array.js';
 import { Meter } from './synthui_meter.js'
 import { Selector } from './synthui_selector.js'
-import { midiPatchNames } from '../../../spessasynth_lib/utils/other.js'
 import { midiControllers } from '../../../spessasynth_lib/midi_parser/midi_message.js'
 
 export class SynthetizerUI
@@ -12,10 +11,11 @@ export class SynthetizerUI
     /**
      * Creates a new instance of synthetizer UI
      * @param colors {string[]}
+     * @param element {HTMLElement} the element to create synthui in
      */
-    constructor(colors) {
+    constructor(colors, element) {
         this.channelColors = colors;
-        const wrapper = document.getElementById("synthetizer_controls");
+        const wrapper = element;
         this.uiDiv = document.createElement("div");
         this.uiDiv.classList.add("wrapper");
         wrapper.appendChild(this.uiDiv);
@@ -23,6 +23,78 @@ export class SynthetizerUI
         this.isShown = false;
     }
 
+    toggleDarkMode()
+    {
+        this.mainControllerDiv.classList.toggle("synthui_controller_light");
+        this.mainButtons.forEach(b => {
+            b.classList.toggle("synthui_button");
+            b.classList.toggle("synthui_button_light");
+        })
+
+        this.mainMeters.forEach(meter => {
+            meter.toggleMode(true);
+        });
+
+        this.controllers.forEach(controller => {
+            controller.voiceMeter.toggleMode();
+            controller.pitchWheel.toggleMode();
+            controller.pan.toggleMode();
+            controller.expression.toggleMode();
+            controller.volume.toggleMode();
+            controller.mod.toggleMode();
+            controller.chorus.toggleMode();
+            controller.preset.toggleMode();
+            controller.presetReset.classList.toggle("voice_reset_light");
+            controller.drumsToggle.classList.toggle("mute_button_light");
+            controller.muteButton.classList.toggle("mute_button_light");
+        })
+    }
+
+    /**
+     * Connects the synth to UI
+     * @param synth {Synthetizer}
+     */
+    connectSynth(synth)
+    {
+        this.synth = synth;
+
+        this.getInstrumentList();
+
+        this.createMainSynthController();
+        this.createChannelControllers();
+
+        document.addEventListener("keydown", e => {
+            switch (e.key.toLowerCase())
+            {
+                case "s":
+                    e.preventDefault();
+                    const controller = this.uiDiv.getElementsByClassName("synthui_controller")[0];
+                    controller.classList.toggle("synthui_controller_show");
+                    controller.getElementsByClassName("controls_wrapper")[0].classList.toggle("controls_wrapper_show");
+                    this.isShown = !this.isShown;
+                    if(this.isShown)
+                    {
+                        this.showControllers();
+                    }
+                    else
+                    {
+                        this.hideControllers()
+                    }
+                    break;
+
+                case "b":
+                    e.preventDefault();
+                    this.synth.highPerformanceMode = !this.synth.highPerformanceMode;
+                    break;
+
+                case "backspace":
+                    e.preventDefault();
+                    this.synth.stopAll(true);
+                    break;
+            }
+        })
+    }
+
     createMainSynthController()
     {
         // controls wrapper
@@ -154,31 +226,30 @@ export class SynthetizerUI
         controlsWrapper.appendChild(resetCCButton);
         controlsWrapper.appendChild(highPerfToggle);
         controlsWrapper.appendChild(vibratoReset);
+
+        /**
+         * @type {Meter[]}
+         */
+        this.mainMeters = [
+            this.volumeController,
+            this.panController,
+            this.transposeController,
+            this.voiceMeter,
+        ];
+        /**
+         * @type {HTMLElement[]}
+         */
+        this.mainButtons = [
+            midiPanicButton,
+            resetCCButton,
+            highPerfToggle,
+            vibratoReset,
+            showControllerButton];
         // main synth div
         this.uiDiv.appendChild(this.voiceMeter.div);
         this.uiDiv.appendChild(showControllerButton);
         controller.appendChild(controlsWrapper);
-    }
-
-    updateVoicesAmount()
-    {
-        this.voiceMeter.update(this.synth.voicesAmount);
-
-        this.controllers.forEach((controller, i) => {
-            // update channel
-            let voices = this.synth.midiChannels[i].voicesAmount;
-            controller.voiceMeter.update(voices);
-            if(voices < 1 && this.synth.voicesAmount > 0)
-            {
-                controller.controller.classList.add("no_voices");
-            }
-            else
-            {
-                controller.controller.classList.remove("no_voices");
-            }
-        });
-        this.volumeController.update((this.synth.volumeController.gain.value * (1 / DEFAULT_GAIN)) * 100);
-        this.panController.update(this.synth.panController.pan.value);
+        this.mainControllerDiv = controller;
     }
 
     createChannelControllers()
@@ -202,105 +273,6 @@ export class SynthetizerUI
         this.hideControllers();
     }
 
-    setEventListeners()
-    {
-        const dropdownDiv = this.uiDiv.getElementsByClassName("synthui_controller")[0];
-        // add event listeners
-        this.synth.eventHandler.addEvent("programchange", "synthui-program-change", e =>
-        {
-            if(this.synth.midiChannels[e.channel].lockPreset)
-            {
-                return;
-            }
-            this.controllers[e.channel].preset.set(JSON.stringify([e.preset.bank, e.preset.program]));
-        });
-
-        this.synth.eventHandler.addEvent("controllerchange", "synthui-controller-change",e => {
-            const controller = e.controllerNumber;
-            const channel = e.channel;
-            const value = e.controllerValue;
-            switch (controller)
-            {
-                default:
-                    break;
-
-                case midiControllers.expressionController:
-                    // expression
-                    this.controllers[channel].expression.update(Math.round(value));
-                    break;
-
-                case midiControllers.mainVolume:
-                    // volume
-                    this.controllers[channel].volume.update(Math.round(value));
-                    break;
-
-                case midiControllers.pan:
-                    // pan
-                    this.controllers[channel].pan.update((value - 63) / 64);
-                    break;
-
-                case midiControllers.modulationWheel:
-                    // mod wheel
-                    this.controllers[channel].mod.update(value);
-                    break;
-
-                case midiControllers.effects3Depth:
-                    // chorus
-                    this.controllers[channel].chorus.update(value);
-                    break;
-            }
-        });
-
-        this.synth.eventHandler.addEvent("pitchwheel", "synthui-pitch-wheel", e => {
-            const val = (e.MSB << 7) | e.LSB;
-            // pitch wheel
-            this.controllers[e.channel].pitchWheel.update(val - 8192);
-        });
-
-        this.synth.eventHandler.addEvent("drumchange", "synthui-drum-change", e => {
-            if(this.synth.midiChannels[e.channel].lockPreset)
-            {
-                return;
-            }
-            this.controllers[e.channel].drumsToggle.innerHTML = (e.isDrumChannel ? getDrumsSvg(32) : getNoteSvg(32));
-            this.controllers[e.channel].preset.reload(e.isDrumChannel ? this.percussionList : this.instrumentList);
-        });
-
-        this.synth.eventHandler.addEvent("newchannel", "synthui-new-channel", channel => {
-            const controller = this.createChannelController(channel, this.controllers.length);
-            this.controllers.push(controller);
-            dropdownDiv.appendChild(controller.controller);
-            this.hideControllers();
-        });
-    }
-
-    hideControllers()
-    {
-        this.controllers.forEach(c => {
-            c.voiceMeter.hide();
-            c.pitchWheel.hide();
-            c.pan.hide();
-            c.expression.hide();
-            c.volume.hide();
-            c.mod.hide();
-            c.chorus.hide();
-            c.preset.hide();
-        })
-    }
-    showControllers()
-    {
-        this.controllers.forEach(c => {
-            c.voiceMeter.show();
-            c.pitchWheel.show();
-            c.pan.show();
-            c.expression.show();
-            c.volume.show();
-            c.mod.show();
-            c.chorus.show();
-            c.preset.show();
-        })
-    }
-
     /**
      * @typedef {{
      *     controller: HTMLDivElement,
@@ -313,7 +285,8 @@ export class SynthetizerUI
      *     chorus: Meter,
      *     preset: Selector,
      *     presetReset: HTMLDivElement,
-     *     drumsToggle: HTMLDivElement
+     *     drumsToggle: HTMLDivElement,
+     *     muteButton: HTMLDivElement
      * }} ChannelController
      */
 
@@ -334,7 +307,7 @@ export class SynthetizerUI
             "Voices: ",
             0,
             100,
-            "The current amount of voices playing");
+            `The current amount of voices playing on channel ${channelNumber + 1}`);
         voiceMeter.bar.classList.add("voice_meter_bar_smooth");
         controller.appendChild(voiceMeter.div);
 
@@ -343,7 +316,7 @@ export class SynthetizerUI
             "Pitch: ",
             -8192,
             8192,
-            "The current pitch bend of the channel",
+            `The current pitch bend of channel ${channelNumber + 1}`,
             true,
             val => {
                 val = Math.round(val) + 8192;
@@ -351,7 +324,7 @@ export class SynthetizerUI
                 const msb = val >> 7;
                 const lsb = val & 0x7F;
                 this.synth.pitchWheel(channelNumber, msb, lsb);
-        });
+            });
         pitchWheel.update(0);
         controller.appendChild(pitchWheel.div);
 
@@ -360,7 +333,7 @@ export class SynthetizerUI
             "Pan: ",
             -1,
             1,
-            "The current stereo panning of the channel",
+            `The current stereo panning of channel ${channelNumber + 1}`,
             true,
             val => {
                 this.synth.controllerChange(channelNumber, midiControllers.pan, (val / 2 + 0.5) * 127);
@@ -373,7 +346,7 @@ export class SynthetizerUI
             "Expression: ",
             0,
             127,
-            "The current expression (loudness) of the channel",
+            `The current expression (loudness) of channel ${channelNumber + 1}`,
             true,
             val => {
                 this.synth.controllerChange(channelNumber, midiControllers.expressionController, val);
@@ -387,11 +360,11 @@ export class SynthetizerUI
             "Volume: ",
             0,
             127,
-            "The current volume of the channel",
+            `The current volume of channel ${channelNumber + 1}`,
             true,
             val => {
-            this.synth.controllerChange(channelNumber, midiControllers.mainVolume, val);
-            volume.update(Math.round(val));
+                this.synth.controllerChange(channelNumber, midiControllers.mainVolume, val);
+                volume.update(Math.round(val));
             });
         volume.update(100);
         controller.appendChild(volume.div);
@@ -401,7 +374,7 @@ export class SynthetizerUI
             "Mod Wheel: ",
             0,
             127,
-            "The current modulation (vibrato) depth of the channel",
+            `The current modulation (vibrato) depth of channel ${channelNumber + 1}`,
             true,
             val => {
                 this.synth.controllerChange(channelNumber, midiControllers.modulationWheel, val);
@@ -413,8 +386,7 @@ export class SynthetizerUI
         const chorus = new Meter(this.channelColors[channelNumber % this.channelColors.length],
             "Chorus: ",
             0,
-            127,
-            "The current level of chorus effect applied to the channel",
+            127, `The current level of chorus effect applied to channel ${channelNumber + 1}`,
             true,
             val => {
                 this.synth.controllerChange(channelNumber, midiControllers.effects3Depth, val);
@@ -427,27 +399,26 @@ export class SynthetizerUI
 
         // preset controller
         const presetSelector = new Selector((
-            channel.percussionChannel ? this.percussionList : this.instrumentList
-        ),
-            "Change the instrument that this channels is using",
+                channel.percussionChannel ? this.percussionList : this.instrumentList
+            ),
+            `Change the instrument that channel ${channelNumber + 1} is using`,
             presetName => {
-            const data = JSON.parse(presetName);
-            this.synth.midiChannels[channelNumber].lockPreset = false;
-            const sys = this.synth.system;
-            this.synth.system = "gs";
-            this.synth.controllerChange(channelNumber, midiControllers.bankSelect, data[0]);
-            this.synth.programChange(channelNumber, data[1]);
-            presetSelector.mainDiv.classList.add("locked_selector");
-            this.synth.midiChannels[channelNumber].lockPreset = true;
-            this.synth.system = sys;
-        }
+                const data = JSON.parse(presetName);
+                this.synth.midiChannels[channelNumber].lockPreset = false;
+                const sys = this.synth.system;
+                this.synth.system = "gs";
+                this.synth.controllerChange(channelNumber, midiControllers.bankSelect, data[0]);
+                this.synth.programChange(channelNumber, data[1]);
+                presetSelector.mainDiv.classList.add("locked_selector");
+                this.synth.midiChannels[channelNumber].lockPreset = true;
+                this.synth.system = sys;
+            }
         );
-        presetSelector.title = "Change the instrument that the channel is using";
         controller.appendChild(presetSelector.mainDiv);
 
         // preset reset
         presetReset.innerHTML = getLoopSvg(32);
-        presetReset.title = "Unlock the channel to allow program changes"
+        presetReset.title = `Unlock channel ${channelNumber + 1} to allow program changes`
         presetReset.classList.add("controller_element");
         presetReset.classList.add("voice_reset");
         presetReset.onclick = () => {
@@ -459,7 +430,7 @@ export class SynthetizerUI
         // mute button
         const muteButton = document.createElement("div");
         muteButton.innerHTML = getVolumeSvg(32);
-        muteButton.title = "Mute the channel"
+        muteButton.title = `Mute channel ${channelNumber + 1}`;
         muteButton.classList.add("controller_element");
         muteButton.classList.add("mute_button");
         muteButton.onclick = () => {
@@ -479,7 +450,7 @@ export class SynthetizerUI
         // drums toggle
         const drumsToggle = document.createElement("div");
         drumsToggle.innerHTML = channelNumber === DEFAULT_PERCUSSION ? getDrumsSvg(32) : getNoteSvg(32);
-        drumsToggle.title = "Toggle drums on this channel";
+        drumsToggle.title = `Toggle drums on channel ${channelNumber + 1}`;
         drumsToggle.classList.add("controller_element");
         drumsToggle.classList.add("mute_button");
         drumsToggle.onclick = () => {
@@ -511,53 +482,129 @@ export class SynthetizerUI
             chorus: chorus,
             preset: presetSelector,
             presetReset: presetReset,
-            drumsToggle: drumsToggle
+            drumsToggle: drumsToggle,
+            muteButton: muteButton
         };
 
     }
 
-    /**
-     * Connects the synth to UI
-     * @param synth {Synthetizer}
-     */
-    connectSynth(synth)
+    updateVoicesAmount()
     {
-        this.synth = synth;
+        this.voiceMeter.update(this.synth.voicesAmount);
 
-        this.getInstrumentList();
+        this.controllers.forEach((controller, i) => {
+            // update channel
+            let voices = this.synth.midiChannels[i].voicesAmount;
+            controller.voiceMeter.update(voices);
+            if(voices < 1 && this.synth.voicesAmount > 0)
+            {
+                controller.controller.classList.add("no_voices");
+            }
+            else
+            {
+                controller.controller.classList.remove("no_voices");
+            }
+        });
+        this.volumeController.update((this.synth.volumeController.gain.value * (1 / DEFAULT_GAIN)) * 100);
+        this.panController.update(this.synth.panController.pan.value);
+    }
 
-        this.createMainSynthController();
-        this.createChannelControllers();
+    setEventListeners()
+    {
+        const dropdownDiv = this.uiDiv.getElementsByClassName("synthui_controller")[0];
+        // add event listeners
+        this.synth.eventHandler.addEvent("programchange", "synthui-program-change", e =>
+        {
+            if(this.synth.midiChannels[e.channel].lockPreset)
+            {
+                return;
+            }
+            this.controllers[e.channel].preset.set(JSON.stringify([e.preset.bank, e.preset.program]));
+        });
 
-        document.addEventListener("keydown", e => {
-            switch (e.key.toLowerCase())
+        this.synth.eventHandler.addEvent("controllerchange", "synthui-controller-change",e => {
+            const controller = e.controllerNumber;
+            const channel = e.channel;
+            const value = e.controllerValue;
+            switch (controller)
             {
-                case "s":
-                    e.preventDefault();
-                    const controller = this.uiDiv.getElementsByClassName("synthui_controller")[0];
-                    controller.classList.toggle("synthui_controller_show");
-                    controller.getElementsByClassName("controls_wrapper")[0].classList.toggle("controls_wrapper_show");
-                    this.isShown = !this.isShown;
-                    if(this.isShown)
-                    {
-                        this.showControllers();
-                    }
-                    else
-                    {
-                        this.hideControllers()
-                    }
+                default:
                     break;
 
-                case "b":
-                    e.preventDefault();
-                    this.synth.highPerformanceMode = !this.synth.highPerformanceMode;
+                case midiControllers.expressionController:
+                    // expression
+                    this.controllers[channel].expression.update(Math.round(value));
                     break;
 
-                case "backspace":
-                    e.preventDefault();
-                    this.synth.stopAll(true);
+                case midiControllers.mainVolume:
+                    // volume
+                    this.controllers[channel].volume.update(Math.round(value));
+                    break;
+
+                case midiControllers.pan:
+                    // pan
+                    this.controllers[channel].pan.update((value - 63) / 64);
+                    break;
+
+                case midiControllers.modulationWheel:
+                    // mod wheel
+                    this.controllers[channel].mod.update(value);
+                    break;
+
+                case midiControllers.effects3Depth:
+                    // chorus
+                    this.controllers[channel].chorus.update(value);
                     break;
             }
+        });
+
+        this.synth.eventHandler.addEvent("pitchwheel", "synthui-pitch-wheel", e => {
+            const val = (e.MSB << 7) | e.LSB;
+            // pitch wheel
+            this.controllers[e.channel].pitchWheel.update(val - 8192);
+        });
+
+        this.synth.eventHandler.addEvent("drumchange", "synthui-drum-change", e => {
+            if(this.synth.midiChannels[e.channel].lockPreset)
+            {
+                return;
+            }
+            this.controllers[e.channel].drumsToggle.innerHTML = (e.isDrumChannel ? getDrumsSvg(32) : getNoteSvg(32));
+            this.controllers[e.channel].preset.reload(e.isDrumChannel ? this.percussionList : this.instrumentList);
+        });
+
+        this.synth.eventHandler.addEvent("newchannel", "synthui-new-channel", channel => {
+            const controller = this.createChannelController(channel, this.controllers.length);
+            this.controllers.push(controller);
+            dropdownDiv.appendChild(controller.controller);
+            this.hideControllers();
+        });
+    }
+
+    hideControllers()
+    {
+        this.controllers.forEach(c => {
+            c.voiceMeter.hide();
+            c.pitchWheel.hide();
+            c.pan.hide();
+            c.expression.hide();
+            c.volume.hide();
+            c.mod.hide();
+            c.chorus.hide();
+            c.preset.hide();
+        })
+    }
+    showControllers()
+    {
+        this.controllers.forEach(c => {
+            c.voiceMeter.show();
+            c.pitchWheel.show();
+            c.pan.show();
+            c.expression.show();
+            c.volume.show();
+            c.mod.show();
+            c.chorus.show();
+            c.preset.show();
         })
     }
 
diff --git a/src/website/ui/synthesizer_ui/synthui_meter.js b/src/website/ui/synthesizer_ui/synthui_meter.js
index 05da5c64..0980c4fd 100644
--- a/src/website/ui/synthesizer_ui/synthui_meter.js
+++ b/src/website/ui/synthesizer_ui/synthui_meter.js
@@ -90,6 +90,16 @@ export class Meter
         }
     }
 
+    toggleMode(updateColor=false)
+    {
+        if(updateColor)
+        {
+            this.bar.classList.toggle("voice_meter_light_color");
+            this.div.classList.toggle("voice_meter_light_color");
+        }
+        this.text.classList.toggle("voice_meter_text_light");
+    }
+
     show()
     {
         this.isShown = true;
diff --git a/src/website/ui/synthesizer_ui/synthui_selector.js b/src/website/ui/synthesizer_ui/synthui_selector.js
index 8b10112a..eaf9bef6 100644
--- a/src/website/ui/synthesizer_ui/synthui_selector.js
+++ b/src/website/ui/synthesizer_ui/synthui_selector.js
@@ -37,6 +37,11 @@ export class Selector
         this.mainDiv.onchange = () => editCallback(this.mainDiv.value);
     }
 
+    toggleMode()
+    {
+        this.mainDiv.classList.toggle("voice_selector_light")
+    }
+
     /**
      * @param elements {{name: string, program: number, bank: number}[]}
      */
