diff --git a/tabs/motors.css b/tabs/motors.css
index 9da3ef82..f3432b16 100644
--- a/tabs/motors.css
+++ b/tabs/motors.css
@@ -1,12 +1,15 @@
 .tab-motors .modelAndAccel {
     float: left;
     width: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 0px;
+}
+.tab-motors .spacer {
+    width: calc(100% - 34px);
+	margin:10px;
 }
-
 .tab-motors #accel {
     float: left;
-    width: calc(100% - 282px);
+    width: calc(100% - 292px);
 }
 
 .tab-motors .mixerPreview {
@@ -16,85 +19,132 @@
 .tab-motors .mixerPreview img {
     width: 120px;
     height: 120px;
+	margin-top: 18px;
+	margin-left:10px;
 }
 
 .tab-motors .plot_control {
-    float: left;
-
-    width: 158px;
-
-    border: 1px solid silver;
+    float: right;
+    width: 160px;
+    /* border: 1px solid silver; */
+    height: 100%;
+    height: 160px;
+    margin: 0px;
+    background-color: #ECECEC;
+	border-top-right-radius: 3px;
+    border-bottom-right-radius:3px;
 }
+
 .tab-motors .plot_control .title {
     line-height: 20px;
     font-weight: bold;
-    text-align: center;
+    padding-left:10px;
+    padding-top:10px;
+    text-align: left;
+}
 
-    border-bottom: 1px solid silver;
-    background-color: #ececec;
-}
-.tab-motors .plot_control .title a:hover {
-    text-decoration: underline;
-}
 .tab-motors .plot_control dl {
-    padding: 5px 5px 0 5px;
+    padding: 10px 10px 0 10px;
     line-height: 22px;
+    float:left;
 }
+
 .tab-motors .plot_control dt {
     float: left;
-
     width: 60px;
     height: 22px;
-
     font-weight: bold;
 }
+
 .tab-motors .plot_control dd {
-    height: 22px;
+    /* margin-left: 20px; */
+    height: 25px;
+    float: right;
+    width: 73px;
 }
+
 .tab-motors .plot_control select {
     float: right;
-
     width: 80px;
     border: 1px solid silver;
 }
+
 .tab-motors .plot_control .x {
-    color: #00A8F0;
+    background-color: #00A8F0;
+    padding:3px;
+    color: #fff;
+	height: 12px;   
+	float: right;
+    border-radius: 3px;
+    line-height: 12px;
+    margin-bottom: 2px;
+	text-align:right;
 }
+	
 .tab-motors .plot_control .y {
-    color: #C0D800;
+    background-color: #C0D800;
+    padding:3px;
+    color: #fff;
+	height: 12px;	
+	float: right;
+    border-radius: 3px;
+    line-height: 12px; 
+    margin-bottom: 2px;
+	text-align:right;
 }
+
 .tab-motors .plot_control .z {
-    color: #CB4B4B;
+    background-color: #CB4B4B;
+    padding:3px;
+    color: #fff;
+	height: 12px;
+	float: right;
+    border-radius: 3px;
+    line-height: 12px; 
+    margin-bottom: 2px;
+	text-align:right;
 }
-.tab-motors .plot_control .x, .tab-motors .plot_control .y, .tab-motors .plot_control .z {
+
+.tab-motors .plot_control .x, .tab-sensors .plot_control .y, .tab-sensors .plot_control .z {
     text-align: right;
 }
+
+.tab-motors .plot_control .title a:hover {
+    text-decoration: underline;
+}
+
 .tab-motors svg {
     float: left;
-
     width: calc(100% - 168px); /* - (plot control, margin)*/
     height: 140px;
-
-    margin-bottom: 10px;
+    margin-top: 10px;
 }
+
 .tab-motors .grid .tick {
     stroke: silver;
     stroke-width: 1px;
     shape-rendering: crispEdges;
 }
+
 .tab-motors .grid path {
     stroke-width: 0;
 }
+
 .tab-motors .data .line {
     stroke-width: 2px;
     fill: none;
 }
 .tab-motors .axis path, .tab-motors .axis line {
     fill: none;
-    stroke: #000000;
+    stroke: #ccc;
     stroke-width: 1px;
     shape-rendering: crispEdges;
 }
+.tab-motors text {
+    stroke: none;
+	fill: #828885;
+	font-size:10px;
+}
 .tab-motors .line:nth-child(1) {
     stroke: #00A8F0;
 }
@@ -105,22 +155,33 @@
     stroke: #CB4B4B;
 }
 
+
+.tab-motors .motorblock {
+	margin-bottom:0px; 
+	background-color: #ECECEC;
+	/*background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));*/
+	}
 .tab-motors .left.motors {
     float: left;
-
     width: calc(50% - 50px);
 }
 .tab-motors .right.servos {
     float: right;
-
     width: 50%;
 }
 .tab-motors .title {
     padding-bottom: 2px;
-
     text-align: center;
     font-weight: bold;
 }
+
+.tab-motors .title2 {
+    padding-bottom: 2px;
+    text-align: center;
+	font-size:12px;
+	font-family: 'open_sanslight', Arial;
+	}
+
 .tab-motors .titles {
     height: 20px;
 }
@@ -129,14 +190,11 @@
 
     width: calc((100% / 9) - 10px);
     margin-right: 10px;
-
     text-align: center;
 }
 .tab-motors .servos .titles li {
     float: right;
-
     width: calc((100% / 8) - 10px);
-
     margin: 0 0 0 10px;
 }
 .tab-motors .titles .active {
@@ -144,28 +202,29 @@
 }
 .tab-motors .m-block {
     float: left;
-
-    width: calc((100% / 9) - 12px);
+    width: calc((100% / 9) - 10px);
     height: 100px;
-
     margin-right: 10px;
-
     text-align: center;
-
-    border: 1px solid silver;
     background-color: #f4f4f4;
+	border-radius:3px;
+	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
 }
 .tab-motors .m-block .meter-bar {
     position: relative;
-
     width: 100%;
     height: 100px;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background-color: #E0E0E0;
+    border-radius: 3px;
+    border: 1px solid #F5F5F5;
+	
+
 }
 .tab-motors .m-block .label {
     position: absolute;
     width: 100%;
     bottom: 45px;
-
     text-align: center;
     font-weight: bold;
     color: #474747;
@@ -175,18 +234,18 @@
 }
 .tab-motors .servos .m-block {
     float: right;
-
-    width: calc((100% / 8) - 12px);
-
+    width: calc((100% / 8) - 10px);
     margin: 0 0 0 10px;
+	border-radius:3px;
+
 }
 .tab-motors .indicator {
     position: absolute;
     overflow: hidden;
-
     width: 100%;
-
     text-align: center;
+	border-radius:2px;
+
 }
 .tab-motors .motor_testing {
     margin-top: 15px;
@@ -197,10 +256,8 @@
 
 .tab-motors .motor_testing .sliders input {
     -webkit-appearance: slider-vertical;
-
     width: calc((100% / 9) - 13px);
-    height: 100px;
-
+    height: 73px;
     margin-left: 10px;
 }
 .tab-motors .motor_testing .sliders input:first-child {
@@ -217,20 +274,18 @@
 
 .tab-motors .motor_testing .values li {
     float: left;
-
     width: calc((100% / 9) - 10px);
     margin-left: 10px;
-
     text-align: center;
 }
 .tab-motors .motor_testing .notice {
     float: right;
-
-    width: calc(50% - 22px);
-
+    width: calc(50% - 24px);
     padding: 5px;
-
-    border: 1px dotted silver;
+    border: 2px solid #ccc;
+    border-radius: 3px;
+    background-color: #FFFFFF;
+	font-size:11px;
 }
 
 .tab-motors .motor_testing .notice p {
diff --git a/tabs/motors.html b/tabs/motors.html
index 69d1d18d..08ecd06d 100644
--- a/tabs/motors.html
+++ b/tabs/motors.html
@@ -4,6 +4,9 @@
   	<div class="cf_doc_version_bt">
     	<a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
   	</div>
+    
+       <div class="gui_box grey" style="margin-bottom: 15px;">
+
 	<div class="wrapper modelAndAccel">
         <div class="mixerPreview">
             <img src="./resources/motor_order/custom.svg" />
@@ -51,9 +54,12 @@
             </dl>
         </div>
     </div>
-
+    
+</div>
+       <div class="gui_box motorblock">
+   <div class="spacer">
     <div class="left motors">
-        <div class="title">Motors</div>
+        <div class="title2">Motors</div>
         <ul class="titles">
             <li title="Motor - 1">1</li>
             <li title="Motor - 2">2</li>
@@ -68,7 +74,7 @@
         </div>
     </div>
     <div class="right servos">
-        <div class="title">Servos</div>
+        <div class="title2">Servos</div>
         <ul class="titles">
             <li title="Servo - 8">8</li>
             <li title="Servo - 7">7</li>
@@ -116,5 +122,5 @@
         </div>
         <div class="cler-both"></div>
     </div>
-</div>
+</div></div></div>
 </div>
diff --git a/tabs/motors.js b/tabs/motors.js
index 475d7b57..17507077 100644
--- a/tabs/motors.js
+++ b/tabs/motors.js
@@ -161,7 +161,19 @@ TABS.motors.initialize = function (callback) {
         documentationButton.html("Documentation for "+CONFIG.flightControllerVersion);
         documentationButton.attr("href","https://github.com/cleanflight/cleanflight/tree/v{0}/docs".format(CONFIG.flightControllerVersion));
 
-        $('#motorsEnableTestMode').prop('disabled', 'true');
+		// load switchery
+		var elems = Array.prototype.slice.call(document.querySelectorAll('#motorsEnableTestMode'));
+		elems.forEach(function(html) {
+  		var switchery = new Switchery(html,
+  		{
+   		color: '#59aa29',
+		size: 'small', 
+    	secondaryColor: '#c4c4c4' 
+		});
+  		});
+		
+		
+		        $('#motorsEnableTestMode').prop('disabled', 'true');
 
         update_model(CONFIG.multiType);
         
@@ -434,10 +446,10 @@ TABS.motors.initialize = function (callback) {
                 var data = MOTOR_DATA[i] - MISC.mincommand,
                     margin_top = block_height - (data * (block_height / full_block_scale)).clamp(0, block_height),
                     height = (data * (block_height / full_block_scale)).clamp(0, block_height),
-                    color = parseInt(data * 0.256);
+                    color = parseInt(data * 0.01);
 
                 $('.motor-' + i + ' .label', motors_wrapper).text(MOTOR_DATA[i]);
-                $('.motor-' + i + ' .indicator', motors_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgb(' + color + ',0,0)'});
+                $('.motor-' + i + ' .indicator', motors_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgba(89,170,41,0.'+ color +')'});
             }
 
             // servo indicators are still using old (not flexible block scale), it will be changed in the future accordingly
@@ -445,10 +457,10 @@ TABS.motors.initialize = function (callback) {
                 var data = SERVO_DATA[i] - 1000,
                     margin_top = block_height - (data * (block_height / 1000)).clamp(0, block_height),
                     height = (data * (block_height / 1000)).clamp(0, block_height),
-                    color = parseInt(data * 0.256);
+                    color = parseInt(data * 0.01);
 
                 $('.servo-' + i + ' .label', servos_wrapper).text(SERVO_DATA[i]);
-                $('.servo-' + i + ' .indicator', servos_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgb(' + color + ',0,0)'});
+                $('.servo-' + i + ' .indicator', servos_wrapper).css({'margin-top' : margin_top + 'px', 'height' : height + 'px', 'background-color' : 'rgba(89,170,41,0.'+ color +')'});
             }
         }
 
diff --git a/tabs/receiver.css b/tabs/receiver.css
index 72106c84..c8528483 100644
--- a/tabs/receiver.css
+++ b/tabs/receiver.css
@@ -256,7 +256,7 @@
     float: right;
     position: relative;
     margin: 0px 0px 10px 0;
-	width:calc(70% - 3px);
+	width:calc(70% - 0px);
 	border-top-left-radius: 5px;
 	border-bottom-left-radius: 5px;
 	background-color:#DEDEDE;
diff --git a/testing.html b/testing.html
deleted file mode 100644
index 0f900790..00000000
--- a/testing.html
+++ /dev/null
@@ -1,161 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Unbenanntes Dokument</title>
- 
-                <link type="text/css" rel="stylesheet" href="./js/libraries/switchery/dist/switchery.css" media="all" />
-
-                
-    <link type="text/css" rel="stylesheet" href="./main.css" media="all" />
-    <link rel="stylesheet" type="text/css" href="./js/libraries/jbox/jBox.css" />
-
-        
-        
-	<script type="text/javascript" src="./js/libraries/jquery-ui-1.11.2.min.js"></script>
-	<script type="text/javascript" src="./js/libraries/jquery-2.1.4.min.js"></script>
-
-	<script type="text/javascript" src="./js/libraries/switchery/dist/switchery.js"></script>
-	<script type="text/javascript" src="./js/libraries/jbox/jBox.js"></script>
-
-        <style>
-		body {
-
-}
-#fixed_band {
-  color: #c00;
-  font: bold 15px arial;
-  padding: 10px;
-  margin: 10px;
-  border: 1px solid #c00;
-  width: 200px;
-  top: 0px;
-  position:absolute;
-}
-</style>
-        </head>
-
-<body>
-
-<div class="option">
-            <label>
-                <input class="porttoggle"/>
-                <span i18n="firmwareFlasherNoReboot"></span>
-            </label>
-           
-           <label>
-                <input  class="porttoggle" type="checkbox" />
-                <span i18n="firmwareFlasherNoReboot"></span>
-            </label>
-            <span class="description" i18n="firmwareFlasherNoRebootDescription"></span>
-
-        </div>
-        
-
-<div id="fixed_band">This div is going to be fixed</div>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-d<br>
-<br>
-<br>
-<br>
-<br><span class="fixfalse">False</span>
-<br>
-<br><span class="fixtrue">True</span>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-d<br><a href="#" class="cf_tip" title="Tooltip-test">Tooltip Test</a>
-<br>
-d<br><a href="#" class="cf_tip" title="Tooltip-test2">Tooltip Test2</a>
-<br>
-<br>
-d<br><a href="#" class="cf_tip" title="Tooltip-test3">Tooltip Test3</a>
-<br>
-<br>
-<br>
-<br>
-<br>
-d<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-<br>
-d        
-<script>
-var elems = Array.prototype.slice.call(document.querySelectorAll('.porttoggle'));
-
-elems.forEach(function(html) {
-  var switchery = new Switchery(html,
-  {
-    color: '#59aa29', 
-    secondaryColor: '#c4c4c4' 
-});
-  
-});
-
-
-
-
-</script>
-<script>
-
-function relative_sticky(id, topSpacing){
-
-if(!topSpacing){ var topSpacing = 0; }
-
-var el_top = parseFloat(document.getElementById(id).getBoundingClientRect().top);
-    el_top = el_top - parseFloat(document.getElementById(id).style.top);
-    el_top = el_top * (-1);
-    el_top = el_top + topSpacing;
-
-    if(el_top > 0){
-    document.getElementById(id).style.top = el_top + "px";
-    } else{
-    document.getElementById(id).style.top = "0px";
-    }
-}
-
-window.onscroll = function(){
-
-    relative_sticky("fixed_band", 200);
-}
-</script>
-
-<script>
-// loading tooltips
-
-
-
-$('.cf_tip').jBox('Tooltip', {
-	delayOpen: 100,
-    delayClose: 100,
-	position: {
-        x: 'right',
-        y: 'center'
-    },
-	outside: 'x'
-});
-</script>
-
-
-</body>
-</html>