diff --git a/include/http/index.html b/include/http/index.html
index 6dbf624..5b851ad 100644
--- a/include/http/index.html
+++ b/include/http/index.html
@@ -3,37 +3,34 @@
   <head>
     <title>ESP8266 Treppenlicht</title>
     <!-- main style sheet -->
-    <link href="/favicon.png" rel="icon" type="image/png" sizes="16x16">
+    <link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
     <link href="/style.css" rel="stylesheet" type="text/css">
-
   </head>
   <body>
-    <div class="topbar">
-      ESP8266 Treppenlicht Controller
+    <div class="kopfzeile"
+          style="text-align: center;">
+          <b>Treppenlicht</b>
     </div>
-    <div class="control">
-      <div class="brightness">
-      </div>
-      <div class="onoff">
-        toggle all
-        <label id="l_onoff"></label>
-        <label class="switch">
-          <input type="checkbox">
-          <span class="slider round"></span>
+
+    <div class="ueberschrift">
+    <center>Helligkeit</center>
+      <div class="slider">
+        <label id="label_pwm">
         </label>
+        <input type="range" class="testregler" min="0" max="100">
       </div>
-      <div class="pwm">
-        <label id="label_pwm"></label>
-        <input type="range" min="1" max="100" value="50" class="rangeslider" id="range1">
-      </div>
-      <div class="timer">
-        <label id="label_timer"></label>
-        <input type="range" min="1" max="100" value="50" class="rangeslider" id="timer_range">
+    </div>
+<br>
+    <div class="ueberschrift">
+    <center>Laufgeschwindigkeit</center>
+      <div class="slider">
+        <label id="label_geschwindigkeit">
+        </label>
+        <input type="range" class="testregler" min="0" max="100">
       </div>
     </div>
     
-   
-  </body>
+  </body> 
 
   <script src="/input.js"></script>
 
diff --git a/include/http/light.png b/include/http/light.png
new file mode 100644
index 0000000..9c6e3f4
Binary files /dev/null and b/include/http/light.png differ
diff --git a/include/http/style.css b/include/http/style.css
index f4edb62..e981cb1 100644
--- a/include/http/style.css
+++ b/include/http/style.css
@@ -1,7 +1,7 @@
 html {
-  font-size: 10px;
+  font-size: 16px;
   font-family: sans-serif, Arial, Helvetica;
-  background-color: #b3b3b3;
+  background-color: #d4d4d4;
 }
 
 .topbar {
@@ -17,6 +17,45 @@ html {
   padding: 1em;
 }
 
+.ueberschrift{
+  color: #ffffff;
+  font-size: 50px;
+  width: 40%;
+  background-color: #5f5f5f;
+}
+
+.testregler{
+  -webkit-appearance: none;
+  height: 20px;
+  width: 98%;
+  border-radius: 20px;
+  outline: black;
+  background-color: rgb(176, 188, 228);
+}
+.testregler::-webkit-slider-thumb{
+  -webkit-appearance: none;
+  appearance: none;
+  width: 5%;
+  height: 20px;
+  border-radius: 10px;
+  background-color: rgb(107, 122, 192);
+  cursor:pointer;
+}
+.st{ 
+  position: relative;
+  left: 1.5em;
+  color: #b91111;
+  font-size: 80px;
+  width: 100%;
+}
+
+.kopfzeile{
+  color: #1f1f1f;
+  font-size: 50px;
+  width: 100%;
+  background-color: #8d8a8a;
+
+}
 p, li {
   font-size: 16px;
   line-height: 2;
@@ -26,7 +65,7 @@ p, li {
 
 body {
   margin: 0 auto;
-  border: 1px solid black;
+  border: none;
   border-radius: 3;
 }
 
@@ -49,18 +88,10 @@ body {
 
 /* The slider */
 .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  width: 100%;
 }
 
-.slider:before {
+/*.slider:before {
   position: absolute;
   content: "";
   height: 26px;
@@ -70,7 +101,7 @@ body {
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
-}
+}*/
 
 input:checked + .slider {
   background-color: #04AA6D;
@@ -94,8 +125,6 @@ input:checked + .slider:before {
 }
 
 
-
-
 /* The slider itself */
 .rangeslider {
   -webkit-appearance: none;  /* Override default CSS styles */
