diff --git a/data/index.html b/data/index.html
index 7f22ee7..cc161e9 100644
--- a/data/index.html
+++ b/data/index.html
@@ -14,31 +14,55 @@
            <span class="heading">Laser</span>
            <div class="content"> 
     	       <ul>
-                    <li class="form-row">
-                		<label>L</label>
+                    <li class="form-row info">
+                		<label>Frequency</label>
+                		<label>123</label>
+                    </li>
+                    <li class="form-row info">
                 		<input type="range" class="laser slider" value="1" min="1" max="128">
                     </li>
-                    <li class="form-row">
-                		<label>M1</label>
+                    <li class="form-row info">
+                		<label>Motor 1</label>
+                		<label>23</label>
+                    </li>
+                    <li class="form-row info">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
                     </li>
+                    <li class="form-row info">
+                		<label>Motor 3</label>
+                		<label>324</label>
+                    </li>
                     <li class="form-row">
-                		<label>M2</label>
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
                     </li>
                     <li class="form-row">
-                		<label>M3</label>
+                		<label>Motor 3</label>
+                		<label>123</label>
+                    </li>
+                    <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
                     </li>
+                    
                 </ul>
             </div>
     	</form>	
-    	<div id="prototypControls" class="container collapsible">
+    	<form id="prototypControls" class="container collapsible">
 	       <span class="heading">Makros</span>
 	       <div class="content">
-	           <button>Submit</button>
+	           <div class="form-row">
+	               <label>Stop</label>
+    	           <button>Run</button>
+	           </div>
+                <div class="form-row">
+	               <label>Preset Mode</label>
+    	           <button>Run</button>
+	           </div>
+   	           <div class="form-row">
+	               <label>Do stuff</label>
+    	           <button>Run</button>
+	           </div>
 	       </div>
-	    </div>
+	    </form>
     	<div class="settings container collapsible">
     	   <span class="heading">WiFi Settings</span>
     	   <div class="content">    	   
@@ -56,7 +80,7 @@
                       <input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
                     </li>
                     <li class="form-row">
-                      <button type="submit">Submit</button>
+                      <button type="submit">Save</button>
                     </li>
                   </ul>
                 </form>
diff --git a/data/scripts.js b/data/scripts.js
index 4468284..5f0ecc3 100644
--- a/data/scripts.js
+++ b/data/scripts.js
@@ -163,11 +163,10 @@ var $ = function(selector){
         }
     };Sui.ready(() => {
     let debugResponse = (data) => {
-        $('#response').html(data);
+        document.querySelector('#response').html(data);
     };
     Sui.select('.collapsible').forEach((container) => {
         container.querySelector('.heading').addEventListener('click', (item) => {
-            console.log(container);
             container.classList.toggle('open');
         });
     });
diff --git a/data/styles.css b/data/styles.css
index 4c4dc7a..5b24a93 100644
--- a/data/styles.css
+++ b/data/styles.css
@@ -8,11 +8,15 @@ form .form-row > label {
   padding: .5em 1em .5em 0;
   flex: 1;
 }
+form .form-row > label + label {
+  flex: 0;
+}
 form .form-row > input {
   flex: 2;
 }
 form .form-row > span {
   flex: 2;
+  text-align: right;
 }
 form .form-row input[type="checkbox"] {
   margin-top: 12px;
@@ -38,6 +42,7 @@ form .form-row input[type="checkbox"] {
 .sui {
   background: #000000;
   color: #0eb8c0;
+  font-family: "Open Sans";
 }
 .sui * {
   margin: 0;
@@ -49,10 +54,12 @@ form .form-row input[type="checkbox"] {
 .sui .shown {
   display: block;
 }
-.sui input,
-.sui button {
+.sui input {
   padding: .5em;
 }
+.sui button {
+  padding: .8em;
+}
 .sui > .content {
   padding: 16px;
 }
@@ -74,15 +81,18 @@ form .form-row input[type="checkbox"] {
 .sui > .content .container.collapsible > .heading:hover {
   cursor: pointer;
 }
-.sui > .content .container.collapsible .content {
+.sui > .content .container.collapsible > .content {
   display: none;
 }
 .sui > .content .container.collapsible.open > .heading {
   margin-bottom: 16px;
 }
-.sui > .content .container.collapsible.open .content {
+.sui > .content .container.collapsible.open > .content {
   display: block;
 }
+.sui > .content label {
+  color: #b3b2b2;
+}
 .sui > .content input[type="text"],
 .sui > .content input[type="password"] {
   height: 16px;
@@ -101,6 +111,9 @@ form .form-row input[type="checkbox"] {
 .sui > .content input[type="checkbox"] {
   transform: scale(2);
 }
+.sui > .content input[type="range"] {
+  padding: 0;
+}
 .sui > .content button {
   background: #097479;
   color: white;
diff --git a/frontend/pages/index.html b/frontend/pages/index.html
index 7f22ee7..cc161e9 100644
--- a/frontend/pages/index.html
+++ b/frontend/pages/index.html
@@ -14,31 +14,55 @@
            <span class="heading">Laser</span>
            <div class="content"> 
     	       <ul>
-                    <li class="form-row">
-                		<label>L</label>
+                    <li class="form-row info">
+                		<label>Frequency</label>
+                		<label>123</label>
+                    </li>
+                    <li class="form-row info">
                 		<input type="range" class="laser slider" value="1" min="1" max="128">
                     </li>
-                    <li class="form-row">
-                		<label>M1</label>
+                    <li class="form-row info">
+                		<label>Motor 1</label>
+                		<label>23</label>
+                    </li>
+                    <li class="form-row info">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
                     </li>
+                    <li class="form-row info">
+                		<label>Motor 3</label>
+                		<label>324</label>
+                    </li>
                     <li class="form-row">
-                		<label>M2</label>
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
                     </li>
                     <li class="form-row">
-                		<label>M3</label>
+                		<label>Motor 3</label>
+                		<label>123</label>
+                    </li>
+                    <li class="form-row">
                 		<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
                     </li>
+                    
                 </ul>
             </div>
     	</form>	
-    	<div id="prototypControls" class="container collapsible">
+    	<form id="prototypControls" class="container collapsible">
 	       <span class="heading">Makros</span>
 	       <div class="content">
-	           <button>Submit</button>
+	           <div class="form-row">
+	               <label>Stop</label>
+    	           <button>Run</button>
+	           </div>
+                <div class="form-row">
+	               <label>Preset Mode</label>
+    	           <button>Run</button>
+	           </div>
+   	           <div class="form-row">
+	               <label>Do stuff</label>
+    	           <button>Run</button>
+	           </div>
 	       </div>
-	    </div>
+	    </form>
     	<div class="settings container collapsible">
     	   <span class="heading">WiFi Settings</span>
     	   <div class="content">    	   
@@ -56,7 +80,7 @@
                       <input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
                     </li>
                     <li class="form-row">
-                      <button type="submit">Submit</button>
+                      <button type="submit">Save</button>
                     </li>
                   </ul>
                 </form>
diff --git a/frontend/scripts/zMain.js b/frontend/scripts/zMain.js
index ef53a94..829863b 100644
--- a/frontend/scripts/zMain.js
+++ b/frontend/scripts/zMain.js
@@ -1,10 +1,9 @@
 Sui.ready(() => {
     let debugResponse = (data) => {
-        $('#response').html(data);
+        document.querySelector('#response').html(data);
     };
     Sui.select('.collapsible').forEach((container) => {
         container.querySelector('.heading').addEventListener('click', (item) => {
-            console.log(container);
             container.classList.toggle('open');
         });
     });
diff --git a/frontend/styles/form.less b/frontend/styles/form.less
index f6a3b6d..32ddf1e 100644
--- a/frontend/styles/form.less
+++ b/frontend/styles/form.less
@@ -10,12 +10,16 @@ form {
     padding: .5em 1em .5em 0;
     flex: 1;
   }
+  .form-row > label + label {
+      flex: 0;
+  }
   .form-row > input {
     flex: 2;
 
   }
   .form-row > span {
       flex: 2;
+      text-align: right;
   }
   .form-row input[type="checkbox"] {
       margin-top: 12px;
diff --git a/frontend/styles/main.less b/frontend/styles/main.less
index 75888c8..374a170 100644
--- a/frontend/styles/main.less
+++ b/frontend/styles/main.less
@@ -1,7 +1,10 @@
 @import "form.less";
 
+@default-font: "Open Sans";
+
 @color-black: #000000;
 @color-white: #eeeeee;
+@color-grey: #b3b2b2;
 @color-main: #097479;
 @color-main-light: #0eb8c0;
 @color-container: #333333;
@@ -18,6 +21,7 @@
 .sui {
     background: @color-black;
     color: @color-main-light;
+    font-family: @default-font;
     
     * {
         margin: 0;
@@ -31,11 +35,14 @@
         display: block;
     }
     
-    input,
-    button {
+    input {
         padding: .5em;
     }
     
+    button {
+        padding: .8em;
+    }
+    
     > .content {
         padding: @default-padding;
         .heading {
@@ -56,19 +63,22 @@
                         cursor: pointer;
                     }
                 }
-                .content {
+                > .content {
                     .hidden;
                 }
                 &.open {                
                     > .heading {
                         margin-bottom: @default-margin;
                     }
-                    .content {
+                    > .content {
                         .shown;
                     }
                 }
             }
         }
+        label {
+            color: @color-grey;
+        }
         input[type="text"], input[type="password"] {
             height: @input-text-height;
             background: transparent;
@@ -83,6 +93,9 @@
         input[type="checkbox"] {
             transform: scale(@input-checkbox-scale);
         }
+        input[type="range"] {
+            padding: 0;
+        }
         button {
            background: @color-main;
            color: white;
@@ -91,3 +104,8 @@
         
     }
 }
+
+.spiro-control {
+    .form-row .info {
+    }
+}
\ No newline at end of file