diff --git a/src/main.rs b/src/main.rs
index 4ca2018..b36838c 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -55,15 +55,86 @@ function post_brightness() {
     }
   })
 }
+
+function post_on(state) {
+  fetch("/lights", {
+    method: "POST",
+    body: JSON.stringify({
+      on: state,
+    }),
+    headers: {
+      "Content-type": "application/json; charset=UTF-8"
+    }
+  })
+}
 </script>
 <style>
+body {
+  max-width: 960px;
+  margin: auto;
+  height: 100%;
+  color: #f5c600;
+  background-color: #000000;
+}
+
+button {
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  border-radius: 12px;
+}
+
+.button-on {
+    background-color: #04AA6D;
+}
+
+.button-off {
+    background-color: #f44336;
+}
+
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;  
+  background: #d3d3d3;
+  outline: none;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%; 
+  background: #f5c600;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: #f5c600;
+  cursor: pointer;
+}
 </style>
 </head>
 <body>
-
+<h1>Lichtschirmsteuerung</h1>
+<div>
+<button class="button-on" onclick="post_on(true)">An</button>
+<button class="button-off" onclick="post_on(false)">Aus</button>
+</div>
 <div>
 <h3>Helligkeit</h3>
-<input type="range" id="brightness" name="brightness" min="1" max="255" onmouseup="post_brightness()" ontouchend="post_brightness()" />
+<input type="range" id="brightness" name="brightness" min="1" max="255" class="slider" onmouseup="post_brightness()" ontouchend="post_brightness()" />
 </div>
 
 </body>
