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