diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index 0457ac9..009c080 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -23,6 +23,7 @@
           <button>⏭️</button>
         </div>
         <div>
+          <label for="progress"></label>
           <input type="range" id="progress" name="progress" min="0" max="100" value="0">
         </div>
       </div>
@@ -50,7 +51,8 @@
           </div>
         </div>
         <div id="volume-control">
-          <input id="volume" name="volume" type="range" min="1" max="100" value="50">
+          <label for="volume"></label>
+          <input id="volume" name="volume" type="range" min="1" max="100">
         </div>
       </div>
       <div class="track-info">
diff --git a/static/flexbox/rangeinput.css b/static/flexbox/rangeinput.css
index 2f554d6..73a4ffd 100644
--- a/static/flexbox/rangeinput.css
+++ b/static/flexbox/rangeinput.css
@@ -20,6 +20,7 @@ input[type="range"]:focus {
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
   height: 5px;
+  width: 70px;
   border: 1px solid #1a2445;
   border-right-color: #3a506b;
   border-bottom-color: #3a506b;
@@ -44,21 +45,18 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {
-  border: 1px solid #21110f;
-  border-right-color: #812b25;
-  border-bottom-color: #812b25;
+ border: 1px solid #21110f;
+ border-right-color: #812b25;
+ border-bottom-color: #812b25;
 }
 
 /******** Firefox styles ********/
 
 /* slider track */
 input[type="range"]::-moz-range-track {
-  height: 5px;
-  border: 1px solid #1a2445;
-  border-right-color: #3a506b;
-  border-bottom-color: #3a506b;
-  background-color: #2e2e27;
-  background-repeat: repeat-x;
+  background-color: #053a5f;
+  border-radius: 0.5rem;
+  height: 0.5rem;
 }
 
 /* slider thumb */
@@ -67,17 +65,13 @@ input[type="range"]::-moz-range-thumb {
   border-radius: 0; /*Removes default border-radius that FF applies*/
 
   /* custom styles */
-  height: 11px;
-  margin-top: -4px;
-  width: 5px;
-  background: #640000;
-  border: 1px solid #812b25;
-  border-right-color: #21110f;
-  border-bottom-color: #21110f;
+  background-color: #5cd5eb;
+  height: 2rem;
+  width: 1rem;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
-  border: 1px solid #053a5f;
-  outline: 3px solid #053a5f;
-  outline-offset: 0.125rem;
+ border: 1px solid #053a5f;
+ outline: 3px solid #053a5f;
+ outline-offset: 0.125rem;
 }
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 15773e7..7d77655 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -15,23 +15,11 @@ div {
 button {
   background-color: #28374a;
   color: #bbb;
-
-  border-left-color: #545454;
-  border-top-color: #545454;
-  border-right-color: #3a3a3a;
-  border-bottom-color: #3A3A3A;
 }
 
-input[type=text] {
+input {
   background-color: #28374a;
   color: white;
-
-  border: 1px solid black;
-
-  border-left-color: black;
-  border-top-color: black;
-  border-right-color:#545454;
-  border-bottom-color: #545454;
 }
 
 table {
@@ -132,12 +120,10 @@ td.playing {
 
 #progress {
   margin-left: 10px;
-  width: 90%;
 }
 
 #volume {
   margin-left: 10px;
-  width: 90%;
 }
 
 #queue-volume-controls {