diff --git a/www/index.html b/www/index.html
index fdfa812..520a180 100644
--- a/www/index.html
+++ b/www/index.html
@@ -19,17 +19,17 @@
             <h2>LucalEncoded?</h2>
             <input type="checkbox" id="lucalEncodedInput">
             <h2>Shock</h2>
-            <input type="range" min="0" max="99" id="shockIntensity" oninput="document.getElementById('sliderValueFirst').value = this.value" class="sliderInput">
+            <input type="range" min="0" max="99" value="0" id="shockIntensity" oninput="document.getElementById('sliderValueFirst').value = this.value" class="sliderInput">
             <br>
-            <output id="sliderValueFirst">0</output>
+            <output id="sliderValueFirst" class="sliderValue">0</output>
             <br>
-            <button onclick="shock();">Shock!</button>
+            <button onclick="shock();" class="sliderButton">Shock!</button>
             <h2>Vibrate</h2>
-            <input type="range" min="0" max="99" id="vibrateIntensity" oninput="document.getElementById('sliderValueSecond').value = this.value" class="sliderInput">
+            <input type="range" min="0" max="99" value="0" id="vibrateIntensity" oninput="document.getElementById('sliderValueSecond').value = this.value" class="sliderInput">
             <br>
-            <output id="sliderValueSecond">0</output>
+            <output id="sliderValueSecond" class="sliderValue">0</output>
             <br>
-            <button onclick="vibrate();">Vibrate!</button>
+            <button onclick="vibrate();" class="sliderButton">Vibrate!</button>
         </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/www/styles.css b/www/styles.css
index 150f883..884deb3 100644
--- a/www/styles.css
+++ b/www/styles.css
@@ -33,4 +33,15 @@ body {
 
 .sliderInput{
     width: 90%;
+}
+
+.sliderValue{
+    background-color: rgb(31, 31, 31);
+    padding-left: 3%;
+    padding-right: 3%;
+    border-radius: 15px;
+}
+
+.sliderButton{
+    margin: 1%;
 }
\ No newline at end of file