diff --git a/eventPage.js b/eventPage.js
index 1b708f05..5a994e64 100755
--- a/eventPage.js
+++ b/eventPage.js
@@ -10,8 +10,8 @@ function startApplication() {
         id: 'main-window',
         frame: 'chrome',
         innerBounds: {
-            minWidth: 1150, // changed from 960
-            minHeight: 700 //  changed from 625
+            minWidth: 960,
+            minHeight: 625
         }
     }, function (createdWindow) {
         createdWindow.contentWindow.addEventListener('load', function () {
diff --git a/images/CF_settings_black.svg b/images/CF_settings_black.svg
new file mode 100644
index 00000000..8b7f9291
--- /dev/null
+++ b/images/CF_settings_black.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0"
+	 id="svg5730" sodipodi:docname="ic_settings_24px.svg" inkscape:version="0.48.5 r10040" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-59 59.7 22 22"
+	 enable-background="new -59 59.7 22 22" xml:space="preserve">
+<title  id="title5799">CF_Settings_Icon</title>
+<sodipodi:namedview  id="namedview5733" inkscape:window-width="1061" inkscape:window-y="0" inkscape:window-x="0" inkscape:pageopacity="0" fit-margin-right="0" inkscape:pageshadow="2" inkscape:window-height="855" inkscape:current-layer="svg5730" fit-margin-bottom="0" inkscape:window-maximized="0" gridtolerance="10" inkscape:zoom="19.072019" fit-margin-left="0" bordercolor="#666666" inkscape:cx="10.164105" inkscape:cy="10.532446" fit-margin-top="0" borderopacity="1" objecttolerance="10" guidetolerance="10" showgrid="false" pagecolor="#ffffff">
+	</sodipodi:namedview>
+<g>
+	<path d="M-45.4,68.9l-0.4-0.9c0,0,0.9-2,0.8-2.1l-1.2-1.2c-0.1-0.1-2.1,0.9-2.1,0.9l-0.9-0.4c0,0-0.8-2.1-1-2.1h-1.7
+		c-0.1,0-0.9,2.1-0.9,2.1l-0.9,0.4c0,0-2.1-0.9-2.2-0.8l-1.2,1.2c-0.1,0.1,0.9,2.1,0.9,2.1l-0.4,0.9c0,0-2.1,0.8-2.1,0.9v1.7
+		c0,0.1,2.1,0.9,2.1,0.9l0.4,0.9c0,0-0.9,2.1-0.8,2.1l1.2,1.2c0.1,0.1,2.1-0.9,2.1-0.9l0.9,0.4c0,0,0.8,2.1,1,2.1h1.7
+		c0.1,0,0.9-2.1,0.9-2.1l0.9-0.4c0,0,2.1,0.9,2.2,0.8l1.2-1.2c0.1-0.1-0.9-2.1-0.9-2.1l0.4-0.9c0,0,2.1-0.8,2.1-0.9v-1.7
+		C-43.3,69.6-45.4,68.9-45.4,68.9z M-51,73c-1.4,0-2.5-1.1-2.5-2.4c0-1.3,1.1-2.4,2.5-2.4c1.4,0,2.5,1.1,2.5,2.4
+		C-48.5,71.9-49.7,73-51,73z"/>
+	<path d="M-38.3,66.9l0-0.5c0,0,0.8-0.7,0.8-0.8l-0.3-0.8c0-0.1-1.1,0-1.1,0l-0.3-0.4c0,0,0-1.1,0-1.1l-0.7-0.3
+		c-0.1,0-0.8,0.7-0.8,0.7l-0.5,0c0,0-0.7-0.8-0.8-0.8l-0.8,0.3c-0.1,0,0,1.1,0,1.1l-0.4,0.3c0,0-1.1-0.1-1.1,0l-0.3,0.7
+		c0,0.1,0.8,0.8,0.8,0.8l0,0.5c0,0-0.8,0.7-0.8,0.8l0.3,0.8c0,0.1,1.1,0,1.1,0l0.3,0.4c0,0,0,1.1,0,1.1l0.7,0.3
+		c0.1,0,0.8-0.7,0.8-0.7l0.5,0c0,0,0.7,0.8,0.8,0.8l0.8-0.3c0.1,0,0-1.1,0-1.1l0.4-0.3c0,0,1.1,0.1,1.1,0l0.3-0.7
+		C-37.5,67.7-38.3,66.9-38.3,66.9z M-40,67.1c-0.3,0.6-1,0.8-1.6,0.6c-0.6-0.3-0.9-1-0.6-1.6c0.3-0.6,1-0.8,1.6-0.6
+		C-40,65.8-39.8,66.5-40,67.1z"/>
+</g>
+</svg>
diff --git a/images/CF_settings_white.svg b/images/CF_settings_white.svg
new file mode 100644
index 00000000..58d66d1d
--- /dev/null
+++ b/images/CF_settings_white.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0"
+	 id="svg5730" sodipodi:docname="ic_settings_24px.svg" inkscape:version="0.48.5 r10040" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 141.7 141.7"
+	 enable-background="new 0 0 141.7 141.7" xml:space="preserve">
+<title  id="title5799">CF_Settings_Icon</title>
+<sodipodi:namedview  id="namedview5733" inkscape:window-width="1061" inkscape:window-y="0" inkscape:window-x="0" inkscape:pageopacity="0" fit-margin-right="0" inkscape:pageshadow="2" inkscape:window-height="855" inkscape:current-layer="svg5730" fit-margin-bottom="0" inkscape:window-maximized="0" gridtolerance="10" inkscape:zoom="19.072019" fit-margin-left="0" bordercolor="#666666" inkscape:cx="10.164105" inkscape:cy="10.532446" fit-margin-top="0" borderopacity="1" objecttolerance="10" guidetolerance="10" showgrid="false" pagecolor="#ffffff">
+	</sodipodi:namedview>
+<g>
+	<path fill="#FFFFFF" d="M88.6,67L86,61.2c0,0,5.8-12.9,5.2-13.5L83.5,40C82.9,39.4,70,45.8,70,45.8l-5.8-2.6c0,0-5.2-13.5-6.4-13.5
+		h-11c-0.6,0-5.8,13.5-5.8,13.5l-5.8,2.6c0,0-13.5-5.8-14.2-5.2l-7.7,7.7C12.6,48.9,19,61.8,19,61.8l-2.6,5.8c0,0-13.5,5.2-13.5,5.8
+		v11c0,0.6,13.5,5.8,13.5,5.8L19,96c0,0-5.8,13.5-5.2,13.5l7.7,7.7c0.6,0.6,13.5-5.8,13.5-5.8l5.8,2.6c0,0,5.2,13.5,6.4,13.5h11
+		c0.6,0,5.8-13.5,5.8-13.5l5.8-2.6c0,0,13.5,5.8,14.2,5.2l7.7-7.7c0.6-0.6-5.8-13.5-5.8-13.5l2.6-5.8c0,0,13.5-5.2,13.5-5.8v-11
+		C102.1,71.5,88.6,67,88.6,67z M52.5,93.4c-9,0-16.1-7.1-16.1-15.5s7.1-15.5,16.1-15.5s16.1,7.1,16.1,15.5S60.9,93.4,52.5,93.4z"/>
+	<path fill="#FFFFFF" d="M134.4,54.1v-3.2c0,0,5.2-4.5,5.2-5.2l-1.9-5.2c0-0.6-7.1,0-7.1,0l-1.9-2.6v-7.1L124,29
+		c-0.6,0-5.2,4.5-5.2,4.5h-3.2c0,0-4.5-5.2-5.2-5.2l-5.2,1.9c-0.6,0,0,7.1,0,7.1l-2.6,1.9c0,0-7.1-0.6-7.1,0l-1.9,4.5
+		c0,0.6,5.2,5.2,5.2,5.2v3.2c0,0-5.2,4.5-5.2,5.2l1.9,5.2c0,0.6,7.1,0,7.1,0l1.9,2.6v7.1l4.5,1.9c0.6,0,5.2-4.5,5.2-4.5h3.2
+		c0,0,4.5,5.2,5.2,5.2l5.2-1.9c0.6,0,0-7.1,0-7.1l2.6-1.9c0,0,7.1,0.6,7.1,0l1.9-4.5C139.5,59.2,134.4,54.1,134.4,54.1z M123.4,55.4
+		c-1.9,3.9-6.4,5.2-10.3,3.9c-3.9-1.9-5.8-6.4-3.9-10.3c1.9-3.9,6.4-5.2,10.3-3.9C123.4,47,124.7,51.5,123.4,55.4z"/>
+</g>
+</svg>
diff --git a/images/icons/cf_icon_welcome_grey.svg b/images/icons/cf_icon_welcome_grey.svg
index af3cc352..0051c183 100644
--- a/images/icons/cf_icon_welcome_grey.svg
+++ b/images/icons/cf_icon_welcome_grey.svg
@@ -2,8 +2,12 @@
 <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.0" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
-<path fill="#818181" d="M106.2,45.3L93.8,45H39.7c-8.3,0-15.2,3.6-20.8,10.2L7.3,74.9C3.1,81.5,0.9,86,0.9,88.7
-	c0.3,1.4,0.3,2.2,0.6,2.5c0.8,2.8,3.6,4.2,8,4.2h6.4l1.7,0.3l1.9-0.3h27.4c0.3,0,2.8-4.2,7.2-12.5h-0.3l-0.3-0.3H25l-1.9,0.3
-	l-0.6-0.3c-1.7,0-2.8-0.8-3-2.8c0-1.7,1.7-4.7,4.7-9.7C28.6,61.9,33,57.7,38,57.7h37.8L54.2,95.4v0.3h14.1c5-8.3,8.9-14.9,11.3-19.9
-	H89l16.9-9.7v-0.3H85.7c3-5.3,4.4-7.7,4.7-7.7h29.3l20.8-12.5v-0.3H106.2z"/>
+<g>
+	<path fill="#818181" d="M65,82.3c-2.8,7.3-7.1,13.3-12.8,17.8c-8.1,6.4-16.7,9.6-25.9,9.6c-9.3,0-16.2-3-20.5-9.1
+		c-2.9-4-4.3-8.7-4.2-13.8c0.1-5.2,1.2-11.6,3.4-19.2c2.1-7.6,4.6-14,7.4-19.2c2.8-5.2,6.8-9.8,11.9-13.8c7.8-6.1,16.3-9.2,25.6-9.2
+		c9.4,0,16.3,3.1,20.6,9.4c3.2,4.5,4.1,10.4,2.9,17.6H58.2c0.6-3.1,0.1-6-1.3-8.6c-1.7-3.4-5.4-5-10.9-5c-5,0-9.6,1.8-14,5.4
+		c-2.3,1.8-4.3,4.3-6,7.3c-1.7,3.1-2.9,5.6-3.6,7.7c-0.7,2.1-1.5,4.9-2.5,8.4c-1,3.5-1.7,6.3-2.2,8.4c-0.5,2.1-0.7,4.6-0.7,7.7
+		c0,3.1,0.7,5.5,1.9,7.3c2.4,3.6,6,5.4,11,5.4c5.4,0,10-1.7,13.7-5.2c2.9-2.6,4.9-5.6,6.2-8.9H65z"/>
+	<path fill="#818181" d="M136.7,40.3H95.4l-6.1,21.8h36.9l-3.7,13.4H85.5l-9.1,32.7H61.6l22.7-81.2h56.1L136.7,40.3z"/>
+</g>
 </svg>
diff --git a/images/icons/cf_icon_welcome_white.svg b/images/icons/cf_icon_welcome_white.svg
index 9d62af88..879f963d 100644
--- a/images/icons/cf_icon_welcome_white.svg
+++ b/images/icons/cf_icon_welcome_white.svg
@@ -2,8 +2,12 @@
 <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.0" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
-<path fill="#FFFFFF" d="M104,46.7l-11.8-0.3H40.9c-7.9,0-14.4,3.4-19.7,9.7l-11,18.6c-3.9,6.3-6,10.5-6,13.1
-	c0.3,1.3,0.3,2.1,0.5,2.4c0.8,2.6,3.4,3.9,7.6,3.9h6l1.6,0.3l1.8-0.3h26c0.3,0,2.6-3.9,6.8-11.8h-0.3L54,82.1H27l-1.8,0.3l-0.5-0.3
-	c-1.6,0-2.6-0.8-2.9-2.6c0-1.6,1.6-4.5,4.5-9.2c4.2-7.9,8.4-11.8,13.1-11.8h35.8L54.6,94.2v0.3H68c4.7-7.9,8.4-14.2,10.8-18.9h8.9
-	l16-9.2v-0.3H84.6c2.9-5,4.2-7.3,4.5-7.3h27.8L136.5,47v-0.3H104z"/>
+<g>
+	<path fill="#FFFFFF" d="M65,82.3c-2.8,7.3-7.1,13.3-12.8,17.8c-8.1,6.4-16.7,9.6-25.9,9.6c-9.3,0-16.2-3-20.5-9.1
+		c-2.9-4-4.3-8.7-4.2-13.8c0.1-5.2,1.2-11.6,3.4-19.2c2.1-7.6,4.6-14,7.4-19.2c2.8-5.2,6.8-9.8,11.9-13.8c7.8-6.1,16.3-9.2,25.6-9.2
+		c9.4,0,16.3,3.1,20.6,9.4c3.2,4.5,4.1,10.4,2.9,17.6H58.2c0.6-3.1,0.1-6-1.3-8.6c-1.7-3.4-5.4-5-10.9-5c-5,0-9.6,1.8-14,5.4
+		c-2.3,1.8-4.3,4.3-6,7.3c-1.7,3.1-2.9,5.6-3.6,7.7c-0.7,2.1-1.5,4.9-2.5,8.4c-1,3.5-1.7,6.3-2.2,8.4c-0.5,2.1-0.7,4.6-0.7,7.7
+		c0,3.1,0.7,5.5,1.9,7.3c2.4,3.6,6,5.4,11,5.4c5.4,0,10-1.7,13.7-5.2c2.9-2.6,4.9-5.6,6.2-8.9H65z"/>
+	<path fill="#FFFFFF" d="M136.7,40.3H95.4l-6.1,21.8h36.9l-3.7,13.4H85.5l-9.1,32.7H61.6l22.7-81.2h56.1L136.7,40.3z"/>
+</g>
 </svg>
diff --git a/main.css b/main.css
index e25b6571..8b2f6be5 100755
--- a/main.css
+++ b/main.css
@@ -122,7 +122,6 @@ input[type="number"]::-webkit-inner-spin-button {
 #logo {
     position: relative;
 	float:left;    
-	width: 260px;
 	height:70px;
     z-index: 0;
     background-image: url("images/light-wide-2.svg");
@@ -205,33 +204,54 @@ input[type="number"]::-webkit-inner-spin-button {
 */
 
 
+#header_dataflash { 
+	display:none; }
+
+
 #sensor-status {
+	margin-top:20px;
     float: right;
     margin-right: 10px;
-    height: 22px;
-    line-height: 22px;
-}
+    line-height: 2px;
+	height:67px;
+	border-radius:3px;
+	border:1px solid #272727;
+	box-shadow: 0px 2px 0px rgba(92,92,92,0.5);
+	background-color: #434343;
+	background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
 
-#header_dataflash { 
-	display:none; }
 
+}
 
 #sensor-status li {
     float: left;
     padding: 0 12px 0 12px;
-    height: 18px;
+    height:67px;
+	width:45px;
     line-height: 18px;
     color: white;
     text-align: center;
-    border: 1px solid #c0c0c0;
-    border-right: 0;
-    background-color: #e32424;
+	border-top:1px solid #373737;
+	border-bottom:1px solid #1a1a1a;
+	border-left:1px solid #373737;
+	border-right:1px solid #222222;
+
+
 }
 #sensor-status li:last-child {
-    border-right: 1px solid #c0c0c0;
+    border-right: 0px solid #c0c0c0;
+	border-top-right-radius:3px;
+	border-bottom-right-radius:3px;
+}
+
+#sensor-status li:first-child {
+    border-left: 0px solid #c0c0c0;
+	border-top-left-radius:3px;
+	border-bottom-left-radius:3px;
 }
 #sensor-status .on {
     background-color: #b8cf02;
+	background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.55));
 }
 
 
@@ -259,32 +279,34 @@ input[type="number"]::-webkit-inner-spin-button {
 */
 #options {
     float: right;
-    width: 20px;
-    height: 20px;
-    background-image: url('./images/ic_settings_24px.svg');
+    width: 25px;
+    height: 25px;
+	margin-top:10px;
+	margin-right:10px;
+    background-image: url('./images/CF_settings_white.svg');
     background-position: -1px -1px;
     background-repeat: no-repeat;
-
-    opacity: 0.6;
+    opacity: 0.4;
 }
 #options:hover {
-    opacity: 0.7;
+    opacity: 0.65;
 }
 #options.active {
-    opacity: 0.7;
+    opacity: 0.65;
 }
 #options.active:hover {
-    opacity: 0.85;
+    opacity: 0.75;
 }
 #options-window {
     display: none;
     position: fixed;
-    right: 30px;
-    top: 15px;
+    right: 35px;
+    top: 25px;
     padding: 5px;
     line-height: 20px;
     border: 1px solid silver;
     background-color: white;
+	border-radius:5px;
 }
 #options-window input {
     float: left;
@@ -382,7 +404,7 @@ margin-right:20px;
 
 .tab_container {
 	float:left; 
-	height:100%; 
+	height:calc(100% - 20px);	
 	width:210px; 
 	border-right: 4px solid #59aa29;
 	}
@@ -392,6 +414,7 @@ margin-right:20px;
     position: relative;
     float: left;
 	width:100%;
+	height:calc(100% - 20px);	
     padding-top: 0px; 
     padding-bottom: 0px;
     margin-top:0px;
@@ -401,6 +424,8 @@ margin-right:20px;
 }
 
 #tabs ul {
+	height:100%;
+	float:left;
 	margin-top:0px;
     overflow: hidden;
 	 /* Cause the height to expand to contain its floated contents */
@@ -483,7 +508,6 @@ margin-right:20px;
 	
 li.active .ic_setup {
 	background-image:url(images/icons/cf_icon_setup_white.svg);
-		color: #fff;
 	}
 .ic_ports {
 	background-image:url(images/icons/cf_icon_ports_grey.svg);
@@ -491,7 +515,6 @@ li.active .ic_setup {
 	
 li.active .ic_ports {
 	background-image:url(images/icons/cf_icon_ports_white.svg);
-		color: #fff;
 	}
 .ic_config {
 	background-image:url(images/icons/cf_icon_config_grey.svg);
@@ -499,7 +522,6 @@ li.active .ic_ports {
 	
 li.active .ic_config {
 	background-image:url(images/icons/cf_icon_config_white.svg);
-		color: #fff;
 	}
 .ic_pid {
 	background-image:url(images/icons/cf_icon_pid_grey.svg);
@@ -507,7 +529,6 @@ li.active .ic_config {
 	
 li.active .ic_pid {
 	background-image:url(images/icons/cf_icon_pid_white.svg);
-		color: #fff;
 	}
 .ic_rx {
 	background-image:url(images/icons/cf_icon_rx_grey.svg);
@@ -515,7 +536,6 @@ li.active .ic_pid {
 	
 li.active .ic_rx {
 	background-image:url(images/icons/cf_icon_rx_white.svg);
-		color: #fff;
 	}
 .ic_modes {
 	background-image:url(images/icons/cf_icon_modes_grey.svg);
@@ -523,7 +543,6 @@ li.active .ic_rx {
 	
 li.active .ic_modes {
 	background-image:url(images/icons/cf_icon_modes_white.svg);
-		color: #fff;
 	}
 .ic_adjust {
 	background-image:url(images/icons/cf_icon_adjust_grey.svg);
@@ -531,7 +550,6 @@ li.active .ic_modes {
 	
 li.active .ic_adjust {
 	background-image:url(images/icons/cf_icon_adjust_white.svg);
-		color: #fff;
 	}
 .ic_servo {
 	background-image:url(images/icons/cf_icon_servo_grey.svg);
@@ -539,7 +557,6 @@ li.active .ic_adjust {
 	
 li.active .ic_servo {
 	background-image:url(images/icons/cf_icon_servo_white.svg);
-		color: #fff;
 	}
 .ic_gps{
 	background-image:url(images/icons/cf_icon_gps_grey.svg);
@@ -547,7 +564,6 @@ li.active .ic_servo {
 	
 li.active .ic_gps{
 	background-image:url(images/icons/cf_icon_gps_white.svg);
-		color: #fff;
 	}
 
 .ic_led{
@@ -556,7 +572,6 @@ li.active .ic_gps{
 	
 li.active .ic_led {
 	background-image:url(images/icons/cf_icon_led_white.svg);
-		color: #fff;
 	}
 	
 .ic_sensors {
@@ -565,7 +580,6 @@ li.active .ic_led {
 	
 li.active .ic_sensors {
 	background-image:url(images/icons/cf_icon_sensors_white.svg);
-		color: #fff;
 	}
 .ic_log {
 	background-image:url(images/icons/cf_icon_sensors_grey.svg);
@@ -573,7 +587,6 @@ li.active .ic_sensors {
 	
 li.active .ic_log {
 	background-image:url(images/icons/cf_icon_log_white.svg);
-		color: #fff;
 	}
 
 .ic_data {
@@ -582,7 +595,6 @@ li.active .ic_log {
 	
 li.active .ic_data{
 	background-image:url(images/icons/cf_icon_log_white.svg);
-		color: #fff;
 	}
 .ic_cli {
 	background-image:url(images/icons/cf_icon_cli_grey.svg);
@@ -590,7 +602,6 @@ li.active .ic_data{
 	
 li.active .ic_cli {
 	background-image:url(images/icons/cf_icon_cli_white.svg);
-		color: #fff;
 	}
 
 .ic_motor {
@@ -599,7 +610,6 @@ li.active .ic_cli {
 	
 li.active .ic_motor {
 	background-image:url(images/icons/cf_icon_motor_white.svg);
-		color: #fff;
 	}
 	
 
@@ -609,7 +619,6 @@ li.active .ic_motor {
 	
 li.active .ic_welcome {
 	background-image:url(images/icons/cf_icon_welcome_white.svg);
-		color: #fff;
 	}
 	
 .ic_help {
@@ -618,7 +627,6 @@ li.active .ic_welcome {
 	
 li.active .ic_help {
 	background-image:url(images/icons/cf_icon_help_white.svg);
-		color: #fff;
 	}
 	
 	
@@ -628,7 +636,6 @@ li.active .ic_help {
 	
 li.active .ic_flasher {
 	background-image:url(images/icons/cf_icon_flasher_white.svg);
-		color: #fff;
 	}
 		
 	
@@ -644,7 +651,6 @@ li.active .ic_flasher {
 	
 li.active .ic_backup {
 	background-image:url(images/icons/cf_icon_backup_white.svg);
-		color: #fff;
 	}
 .ic_wizzard {
 	background-image:url(images/icons/cf_icon_wizard_grey.svg);
@@ -652,7 +658,6 @@ li.active .ic_backup {
 	
 li.active .ic_wizard {
 	background-image:url(images/icons/cf_icon_wizard_white.svg);
-		color: #fff;
 	}
 .ic_advanced {
 	background-image:url(images/icons/cf_icon_advanced_grey.svg);
@@ -660,7 +665,6 @@ li.active .ic_wizard {
 	
 li.active .ic_advanced {
 	background-image:url(images/icons/cf_icon_advanced_white.svg);
-		color: #fff;
 	}
 .ic_mission {
 	background-image:url(images/icons/cf_icon_mission_grey.svg);
@@ -668,7 +672,6 @@ li.active .ic_advanced {
 	
 li.active .ic_mission {
 	background-image:url(images/icons/cf_icon_mission_white.svg);
-		color: #fff;
 	}
 	
 	
diff --git a/main.html b/main.html
index b9515f25..c19b0311 100755
--- a/main.html
+++ b/main.html
@@ -4,7 +4,9 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="author" content="cTn" />
 
-        <link type="text/css" rel="stylesheet" href="./main.css" media="all" />
+        <link type="text/css" rel="stylesheet" href="./main2.css" media="all" />
+        <link type="text/css" rel="stylesheet" href="./main.css" media="all" id="default" />
+
         <link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.min.css">
         <link type="text/css" rel="stylesheet" href="./js/libraries/jquery.nouislider.pips.min.css">
         <link type="text/css" rel="stylesheet" href="./js/libraries/flightindicators.css">
@@ -83,7 +85,7 @@
         <script type="text/javascript" src="./tabs/logging.js"></script>
         <script type="text/javascript" src="./tabs/dataflash.js"></script>
         <script type="text/javascript" src="./tabs/firmware_flasher.js"></script>
-        
+
         <script type="text/javascript" src="./js/libraries/switchery/switchery.js"></script>
 
     </head>
@@ -143,7 +145,7 @@
     
             <a id="options" href="#" i18n_title="options_title"></a>
             
-             <div class="tab-dataflash" id="flashstate" style="width:120px; float:right; height:12px;"
+             <div class="tab-dataflash" id="flashstate" style="width:120px; float:right; height:12px; display:none;"
 >
     <div class="require-dataflash" id="header_dataflash">
         <ul class="dataflash-contents" style="height:7px; margin:12px;">
@@ -189,6 +191,8 @@
                     <li id="tab_help"><a href="#" i18n="tabHelp" class="tabicon ic_help"></a></li>
                     <li id="tab_firmware_flasher"><a href="#" i18n="tabFirmwareFlasher" class="tabicon ic_flasher"></a></li>
                 </ul>
+                
+              
                 <ul class="mode-connected">
                     <li id="tab_setup"><a href="#" i18n="tabSetup" class="tabicon ic_setup"></a></li>
                     <li id="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports"></a></li>
diff --git a/main.js b/main.js
index 9304b6c2..1efd5537 100755
--- a/main.js
+++ b/main.js
@@ -221,7 +221,22 @@ $(document).ready(function () {
                         });
                     }
                 }
+				
+				
+				
+				
+ // TEST
+var css = $("#default");
+$("div#options-window #remove").click(function(){
+    css.remove();
+});
 
+$("div#options-window #restore").click(function(){
+    $("head").append(css);
+});
+   // TEST
+   
+   
                 $(document).bind('click keyup', close_and_cleanup);
 
                 $(this).slideDown(250);
diff --git a/main2.css b/main2.css
new file mode 100755
index 00000000..3fc9db57
--- /dev/null
+++ b/main2.css
@@ -0,0 +1,1135 @@
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    list-style: none;
+    outline: none;
+}
+
+html, body {
+    height: 100%;
+	
+}
+body {
+    font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif;
+    font-size: 12px;
+    color: #303030;
+	background-color:#dfddd0;
+	margin:0px;
+	padding:0px;
+}
+
+a {
+	text-decoration:none;
+	color:#000;
+	font-family: 'open_sanssemibold', Arial;
+	}
+
+a:hover {
+	text-decoration: none;
+
+
+	}
+	
+
+/* Help-Icon  */
+
+.helpicon {
+	float:right;
+	margin-top:-18px;
+	margin-right:7px;
+	display:block;
+	height:14px;
+	width:14px;
+	opacity: 0.2;
+	background-image:url(images/icons/cf_icon_info_grey.svg);
+	background-size:contain;
+	background-position:center;
+
+}
+
+
+.helpicon:hover {
+	opacity: 1.0;
+	background-image:url(images/icons/cf_icon_info_green.svg);
+}
+
+
+
+/* Change here the content of the documentation button in all tabs!!!  */
+
+.cf_doc_version_bt a:before {
+	content:"Documentation 1.10";
+	}
+
+.cf_doc_version_bt a {
+	padding:1px 9px 1px 9px;
+	margin-top: -25px;
+	background-color:#59aa29;
+	border-radius:3px;
+	border: 1px solid #4c8829;
+	color:#fff;
+	float:right;
+	font-family: 'open_sansbold', Arial;
+	font-size:10px;
+	line-height:17px;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+	text-transform:uppercase;
+	letter-spacing: 0.03em;
+	display:block;
+
+	}
+	
+.cf_doc_version_bt a:hover {
+	background-color:#6ac435;
+		transition: all ease 0.2s;
+
+	}
+	
+	
+/* documentation button end  */
+
+
+
+	
+input[type="number"]::-webkit-inner-spin-button {
+    opacity: 1; /* required for chromium 33+ beta */
+    margin-left: 5px;
+}
+.clear-both {
+    clear: both;
+}
+.left {
+    float: left;
+}
+.right {
+    float: right;
+}
+#main-wrapper {
+    padding: 0px 0px 0 0px; /*   padding: 5px 5px 0 5px; */
+    height: calc(100% - 7px);
+	
+}
+
+.headerbar {
+	height:110px;
+	width:100%;
+	float:left;
+  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
+}
+
+
+
+#logo {
+    position: relative;
+	float:left;    
+	height:70px;
+    z-index: 0;
+    background-image: url("images/light-wide-2.svg");
+    background-repeat: no-repeat;
+    width: 340px;
+    background-position:left center;
+    background-size: contain;
+	margin-left:15px;
+	margin-top:15px;
+}
+
+#port-picker { /*  */
+    float: left;
+    margin-top: 20px;
+    margin-left: 20px;
+	width:180px;
+}
+
+#port-picker li {
+    float: left;
+} /* 
+#port-picker select {
+    height: 20px;
+    line-height: 20px;
+    float: left;
+    margin-right: 5px;
+    border: 1px solid silver;
+}
+#port-picker #port {
+    width: 130px;
+}
+#port-picker #baud {
+    width: 80px;
+}
+#port-picker #delay {
+    width: 60px;
+}
+#port-picker #port-override{
+    height: 18px;
+    line-height: 20px;
+    margin-right: 5px;
+    width: 120px;
+    padding: 0 5px;
+    border: 1px solid silver;
+}
+
+#port-picker a {
+    float: left;
+    display: block;
+    width: 80px;
+    height: 18px;
+    border: 1px solid silver;
+    line-height: 18px;
+    text-align: center;
+}
+#port-picker a.connect {
+    margin-right: 10px;
+    background-color: #be2222;
+    color: white;
+    font-weight: bold;
+}
+#port-picker a.connect:hover {
+    text-decoration: none;
+    background-color: #ea3131;
+}
+#port-picker a.connect.active {
+    background-color: #0fab16;
+}
+#port-picker a.connect.active:hover {
+    background-color: #13d81d;
+}
+#port-picker input.auto_connect {
+    float: left;
+    margin-top: 4px;
+}
+#port-picker span.auto_connect {
+    float: left;
+    margin: 3px 0 0 5px;
+}
+*/
+
+
+#sensor-status {
+    float: right;
+    margin-right: 10px;
+    height: 22px;
+    line-height: 22px;
+}
+
+#header_dataflash { 
+	display:none; }
+
+
+#sensor-status li {
+    float: left;
+    padding: 0 12px 0 12px;
+    height: 18px;
+    line-height: 18px;
+    color: white;
+    text-align: center;
+    border: 1px solid #c0c0c0;
+    border-right: 0;
+    background-color: #e32424;
+}
+#sensor-status li:last-child {
+    border-right: 1px solid #c0c0c0;
+}
+#sensor-status .on {
+    background-color: #b8cf02;
+}
+
+
+
+/* 
+#documentation-controls {
+    float: right;
+    height: 22px;
+    line-height: 22px;
+    margin-right: 10px;
+}
+
+ 
+#button-documentation {
+    float: left;
+    padding: 0 12px 0 12px;
+    height: 18px;
+    line-height: 18px;
+    background-color: #ffcb18;
+    color: #000;
+    font-weight: bold;
+    border: solid 1px #c0c0c0;
+    display: none;
+}
+*/
+#options {
+    float: right;
+    width: 25px;
+    height: 25px;
+	margin-top:10px;
+	margin-right:10px;
+    background-image: url('./images/CF_settings_white.svg');
+    background-position: -1px -1px;
+    background-repeat: no-repeat;
+    opacity: 0.4;
+}
+#options:hover {
+    opacity: 0.65;
+}
+#options.active {
+    opacity: 0.65;
+}
+#options.active:hover {
+    opacity: 0.75;
+}
+#options-window {
+    display: none;
+    position: fixed;
+    right: 35px;
+    top: 25px;
+    padding: 5px;
+    line-height: 20px;
+    border: 1px solid silver;
+    background-color: white;
+	border-radius:5px;
+}
+#options-window input {
+    float: left;
+	margin-top: 3px;
+    margin-right: 5px;
+}
+
+
+/* Log setup*/
+
+
+#log {
+    margin-bottom: 0px;
+    border: 0px solid silver; /* was 1px*/
+    background-color:#242424;
+    color:rgba(255,255,255,0.60);
+    line-height: 21px;
+	height: 27px; /* was 65*/
+	overflow-y: hidden; /* scroll*/
+}
+
+
+
+#scrollicon {
+position:fixed;
+right:10px;
+top:113px;
+height:27px;
+width:27px;
+background-image:url(images/icons/scroll.svg);
+background-repeat:no-repeat;
+background-size:100%;
+opacity:0.0;
+transition: all ease 1s;
+
+}
+
+
+#scrollicon.active {
+height:110px;
+margin-top:10px;
+margin-right:20px;
+	width:110px;
+	opacity:0.15;
+	background-image:url(images/icons/scroll.svg);
+	background-size:80%;
+	box-shadow: inset 0 0 5px #000000;
+
+	transition: all ease 2s;
+}
+
+
+#log.active {
+    overflow-y: scroll; /* scroll*/
+	box-shadow: inset 0 0 15px #000000;
+}
+
+
+#log .wrapper {
+    padding: 5px;   /* was 5*/
+    padding-left:10px;
+	padding-bottom:4px;
+    -webkit-user-select: text;
+	position:relative;
+	bottom:0px;
+
+}
+
+#log a {
+    font-weight: regular;
+	color:#59aa29;
+}
+
+#log a:hover {
+    text-decoration: underline;
+}
+
+	/* Log switch */
+	
+	
+	.logswitch {
+		position:fixed;
+		right: 7px;
+		margin-top:-1px;
+		float:right;
+		padding:5px;
+		z-index:10;
+		}
+	.logswitch a {
+	color:#656565;
+
+		}
+
+
+
+.tab_container {
+	float:left; 
+	height:100%; 
+	width:210px; 
+	border-right: 4px solid #59aa29;
+	}
+	
+	
+#tabs {
+    position: relative;
+    float: left;
+	width:100%;
+    padding-top: 0px; 
+    padding-bottom: 0px;
+    margin-top:0px;
+    z-index: 10;
+    font-weight: regular;
+	font-size:13px;
+}
+
+#tabs ul {
+	margin-top:0px;
+    overflow: hidden;
+	 /* Cause the height to expand to contain its floated contents */
+}
+
+#tabs ul.mode-connected {
+    display: none;
+}
+
+#tabs li {
+	width:100%;
+    float: left;
+    border-bottom: 1px solid rgba(0,0,0,0.30);
+	border-top: 1px solid #404040;
+	height:29px;
+
+}
+
+#tabs li:first-child {
+	border-top: 0px;
+
+}
+
+#tabs li:last-child {
+    border-bottom: 0px;
+
+}
+
+
+#tabs li a {
+	font-family: 'open_sansregular', Arial;
+	padding-left:33px;
+	padding-top:5px;
+	padding-bottom:3px;
+    background-color: transparent;
+	color:#999999;
+	width:100%;
+	height:23px;
+	display:block;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.45);
+	transition: none;
+}
+
+
+#tabs li a:hover {
+    text-decoration: none;
+    background-color: rgba(0,0,0,0.20);
+}
+#tabs li.active {
+	color: #fff;
+	transition: none;
+
+
+}
+#tabs li.active a {
+    background-color: #59aa29;
+	color: #fff;
+	transition: none;
+}
+
+
+#tabs li.active a:hover {
+    cursor: default;
+    background-color:#59aa29;
+}
+
+
+.tabicon {
+	background-repeat: no-repeat;
+	background-size:15px;
+	background-position:13px 7px;
+}
+
+
+/* Tab-Icons */
+
+.ic_setup {
+	background-image:url(images/icons/cf_icon_setup_grey.svg);
+	}
+	
+li.active .ic_setup {
+	background-image:url(images/icons/cf_icon_setup_white.svg);
+		color: #fff;
+	}
+.ic_ports {
+	background-image:url(images/icons/cf_icon_ports_grey.svg);
+	}
+	
+li.active .ic_ports {
+	background-image:url(images/icons/cf_icon_ports_white.svg);
+		color: #fff;
+	}
+.ic_config {
+	background-image:url(images/icons/cf_icon_config_grey.svg);
+	}
+	
+li.active .ic_config {
+	background-image:url(images/icons/cf_icon_config_white.svg);
+		color: #fff;
+	}
+.ic_pid {
+	background-image:url(images/icons/cf_icon_pid_grey.svg);
+	}
+	
+li.active .ic_pid {
+	background-image:url(images/icons/cf_icon_pid_white.svg);
+		color: #fff;
+	}
+.ic_rx {
+	background-image:url(images/icons/cf_icon_rx_grey.svg);
+	}
+	
+li.active .ic_rx {
+	background-image:url(images/icons/cf_icon_rx_white.svg);
+		color: #fff;
+	}
+.ic_modes {
+	background-image:url(images/icons/cf_icon_modes_grey.svg);
+	}
+	
+li.active .ic_modes {
+	background-image:url(images/icons/cf_icon_modes_white.svg);
+		color: #fff;
+	}
+.ic_adjust {
+	background-image:url(images/icons/cf_icon_adjust_grey.svg);
+	}
+	
+li.active .ic_adjust {
+	background-image:url(images/icons/cf_icon_adjust_white.svg);
+		color: #fff;
+	}
+.ic_servo {
+	background-image:url(images/icons/cf_icon_servo_grey.svg);
+	}
+	
+li.active .ic_servo {
+	background-image:url(images/icons/cf_icon_servo_white.svg);
+		color: #fff;
+	}
+.ic_gps{
+	background-image:url(images/icons/cf_icon_gps_grey.svg);
+	}
+	
+li.active .ic_gps{
+	background-image:url(images/icons/cf_icon_gps_white.svg);
+		color: #fff;
+	}
+
+.ic_led{
+	background-image:url(images/icons/cf_icon_led_grey.svg);
+	}
+	
+li.active .ic_led {
+	background-image:url(images/icons/cf_icon_led_white.svg);
+		color: #fff;
+	}
+	
+.ic_sensors {
+	background-image:url(images/icons/cf_icon_sensors_grey.svg);
+	}
+	
+li.active .ic_sensors {
+	background-image:url(images/icons/cf_icon_sensors_white.svg);
+		color: #fff;
+	}
+.ic_log {
+	background-image:url(images/icons/cf_icon_sensors_grey.svg);
+	}
+	
+li.active .ic_log {
+	background-image:url(images/icons/cf_icon_log_white.svg);
+		color: #fff;
+	}
+
+.ic_data {
+	background-image:url(images/icons/cf_icon_log_grey.svg);
+	}
+	
+li.active .ic_data{
+	background-image:url(images/icons/cf_icon_log_white.svg);
+		color: #fff;
+	}
+.ic_cli {
+	background-image:url(images/icons/cf_icon_cli_grey.svg);
+	}
+	
+li.active .ic_cli {
+	background-image:url(images/icons/cf_icon_cli_white.svg);
+		color: #fff;
+	}
+
+.ic_motor {
+	background-image:url(images/icons/cf_icon_motor_grey.svg);
+	}
+	
+li.active .ic_motor {
+	background-image:url(images/icons/cf_icon_motor_white.svg);
+		color: #fff;
+	}
+	
+
+.ic_welcome {
+	background-image:url(images/icons/cf_icon_welcome_grey.svg);
+	}
+	
+li.active .ic_welcome {
+	background-image:url(images/icons/cf_icon_welcome_white.svg);
+		color: #fff;
+	}
+	
+.ic_help {
+	background-image:url(images/icons/cf_icon_help_grey.svg);
+	}
+	
+li.active .ic_help {
+	background-image:url(images/icons/cf_icon_help_white.svg);
+		color: #fff;
+	}
+	
+	
+	.ic_flasher {
+	background-image:url(images/icons/cf_icon_flasher_grey.svg);
+	}
+	
+li.active .ic_flasher {
+	background-image:url(images/icons/cf_icon_flasher_white.svg);
+		color: #fff;
+	}
+		
+	
+	
+	
+		/* SPARE Tab-Icons */
+	
+	
+	
+.ic_backup {
+	background-image:url(images/icons/cf_icon_backup_grey.svg);
+	}
+	
+li.active .ic_backup {
+	background-image:url(images/icons/cf_icon_backup_white.svg);
+		color: #fff;
+	}
+.ic_wizzard {
+	background-image:url(images/icons/cf_icon_wizard_grey.svg);
+	}
+	
+li.active .ic_wizard {
+	background-image:url(images/icons/cf_icon_wizard_white.svg);
+		color: #fff;
+	}
+.ic_advanced {
+	background-image:url(images/icons/cf_icon_advanced_grey.svg);
+	}
+	
+li.active .ic_advanced {
+	background-image:url(images/icons/cf_icon_advanced_white.svg);
+		color: #fff;
+	}
+.ic_mission {
+	background-image:url(images/icons/cf_icon_mission_grey.svg);
+	}
+	
+li.active .ic_mission {
+	background-image:url(images/icons/cf_icon_mission_white.svg);
+		color: #fff;
+	}
+	
+	
+	
+	
+	
+	
+	
+
+
+#content {
+    margin-top: 0px;  /* 31 */
+    padding: 10px; /* 10 */
+    height:calc(100% - 170px); /*  (port picker 105px, log 25px, tab 0px, status bar: 20px) - was: calc(100% - 171px)*/
+	
+    background-color: white;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 0px solid #848484; /* 1px solid #848484; */
+    -webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
+}
+#status-bar {
+    position: fixed;
+    bottom: 0px;
+    width: calc(100% - 20px);
+    height: 20px;
+    line-height: 20px;
+    padding: 0 10px 0 10px;
+    border-top: 1px solid #7d7d79;
+    background-color: #bfbeb5;
+}
+#status-bar div {
+    float: left;
+
+    padding-right: 10px;
+    margin-right: 10px;
+    border-right: 1px solid #7d7d79;
+}
+#status-bar .version {
+    float: right;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+#cache {
+    display: none;
+}
+.data-loading {
+    width: 100%;
+    height: 100%;
+    background-image: url('../images/loading-bars.svg');
+    background-repeat: no-repeat;
+    background-position: center 45%;
+}
+.data-loading p {
+    position: relative;
+    top: calc(45% + 45px);
+    text-align: center;
+    font-weight: bold;
+}
+
+dialog {
+    background-color: white;
+    padding: 1em;
+    height: auto;
+    margin: auto auto;
+    position: absolute;
+    width: 50%;
+    border-radius: 3px;
+    border: 1px solid silver;
+}
+
+/* Border of the Tab */
+
+
+	
+	
+	
+	/* Tab Title */
+.tab_title {
+	float:left;
+	width:100%;
+	border-bottom:1px solid #59aa29;
+	font-size:20px;
+	line-height:24px;
+	height:30px;	
+	font-family: 'open_sanslight', Arial;
+	margin-bottom:7px;
+	}
+	
+/* Note */
+.note {
+	float:left;
+	background-color:#fff7cd;
+	border:1px solid #ffe55f;
+	margin-bottom:7px;
+	margin-top:3px;
+	width:100%;
+	border-radius: 3px;
+	font-size:11px;
+	}
+
+.note_spacer {
+	padding:5px 7px 5px 7px;
+	}
+	
+
+
+	
+	.tab_wrapper {
+		padding-left:20px;
+		padding-right:15px;
+		padding-top:15px;
+		padding-bottom:15px;
+}
+
+/* Columns  END> */
+
+/* Spacers */
+
+.spacer {
+	padding-left:7px;
+	padding-right:7px;
+
+	}
+	
+
+.spacer_left {
+	padding-left:7px;
+
+	}
+
+.spacer_right {
+	padding-right:7px;
+
+	}
+
+/* Standard GUI BOX */
+.gui_box {
+	border: 1px solid #e4e4e4;
+	border-radius:5px;
+	background-color:#FFFFFF;
+	float:left;
+	width:100%;
+	margin-bottom:10px;
+	}
+	
+.grey {
+	background-color:#f5f5f5;
+	
+	}
+	
+.gui_box_titlebar {
+	background-color:#e4e4e4;
+	border-radius:3px 3px 0px 0px;
+	font-size:14px;
+	width:100%;
+	height:25px;
+	padding-bottom:0px;
+	float:left;
+	margin-bottom:7px;
+	}
+
+.spacer_box {
+	padding:10px;
+	margin-bottom:3px;
+	}
+	
+.spacer_box_title {
+	padding-left:10px;
+	padding-right:10px;
+	padding-top:4px;
+	margin-bottom:0px;
+
+	}
+	
+	
+/* Fixed area at the Bottom */
+
+
+.fixed_band {
+	height: 50px;
+	position:fixed;
+	background-color:#e4e4e4;
+	width:100%;
+	margin-left:-20px;
+	box-shadow:rgba(0,0,0,0.20) 0 -3px 8px ;
+	bottom: 0px;
+	z-index:1000;
+	}	
+	
+	
+.save_btn a {
+	padding:3px 13px 5px 13px;
+	margin-top: 10px;
+	margin-right:15px;
+	background-color:#59aa29;
+	border-radius:3px;
+	border: 1px solid #4c8829;
+	color:#fff;
+	float:right;
+	font-family: 'open_sansbold', Arial;
+	font-size:12px;
+	line-height:20px;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+	display:block;
+	cursor:pointer;
+		transition: all ease 0.2s;
+
+	}
+	
+.save_btn a:hover {
+	background-color:#6ac435;
+		transition: all ease 0.2s;
+
+	}
+	
+	
+/* DIfferent buttons */
+
+
+
+.default_btn {
+	width:100%;
+	position:relative;
+	margin-bottom:7px;
+	margin-top:0px;
+	float:left;
+
+	}
+	
+	
+.default_btn a {
+	padding:5px 0px 5px 0px;
+	text-align:center;
+	background-color:#fff;
+	border-radius:4px;
+	border: 1px solid #59aa29;
+	color:#59aa29;
+	font-family: 'open_sanssemibold', Arial;
+	font-size:12px;
+	line-height:13px;
+	display:block;
+		transition: all ease 0.2s;
+
+	}
+	
+.default_btn a:hover {
+	background-color:#6ac435;
+	color:#fff;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+		transition: all ease 0.2s;
+
+	}
+
+.default_btn a:active {
+	background-color:#4d9324;
+	transition: all ease 0.0s;
+	box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.35);
+
+	}
+
+.small {
+	width:auto;
+	position:relative;
+	margin-bottom:7px;
+	margin-top:0px;
+	margin-right:5px;
+	float:left;
+
+	}
+	
+	.small a {
+	padding:3px 4px 4px 4px;
+	text-align:center;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+	background-color:#acacac;
+	border-radius:3px;
+	border: 1px solid #949494;
+	color:#fff;
+	font-family: 'open_sanssemibold', Arial;
+	font-size:11px;
+	line-height:11px;
+	display:block;
+		transition: all ease 0.2s;
+
+	}
+	
+.small a:hover {
+	background-color:#6ac435;
+	color:#fff;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+	border: 1px solid #59aa29;
+		transition: all ease 0.2s;
+
+
+	}
+
+.small a:active {
+	background-color:#878787;
+	transition: all ease 0.0s;
+	box-shadow:inset 0px 1px 5px rgba(0, 0, 0, 0.35);
+	}
+	
+	
+	.green a {
+	background-color:#59aa29;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+	color:#fff;
+		border: 1px solid #59aa29;
+			transition: all ease 0.2s;
+
+
+	}
+	
+	.green a:hover {
+	background-color:#6ac435;
+	border: 1px solid #4d9324;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+	color:#fff;
+		transition: all ease 0.2s;
+
+	}
+	
+	
+	
+
+/* Table styling */
+
+
+.cf_table {
+	margin-bottom:5px;
+	float:left;
+	margin-top:-5px;
+	font-size:11px;
+	}
+
+.cf_table td {
+	border:0px;
+	border-bottom: solid 1px #ccc;
+	padding-top:4px;
+	padding-bottom:4px;
+	border-style: dotted;
+
+}
+
+.noboarder td{
+	border:none;
+
+}
+
+.cf_table td:last-child {
+	text-align:right;
+}
+
+.gps_false {
+	background-color:#FF0004;
+	padding:1px 7px 2px 7px;
+	border-radius:3px;
+	color:#FFFFFF;
+	font-size:11px;
+	margin-left:3px;
+}
+
+.gps_true {
+	background-color:#59aa29;
+	padding:1px 7px 2px 7px;
+	border-radius:3px;
+	color:#FFFFFF;
+	font-size:11px;
+	margin-left:3px;
+}
+
+/* connect button */
+
+
+.connect_contols {
+	position:absolute;
+	left:585px;
+	top:19px;
+	height:70px;
+	width:60px;
+	}
+	
+	
+	
+.connect_b {
+	float:left;
+	
+	}
+	
+	
+	.connect_b a  {
+	height:50px;
+	width:50px;
+	border-radius:100px;
+	box-shadow:0px 1px 2px rgba(0, 0, 0, 0.35);
+	float:left;
+	margin-left: 5px;
+	margin-bottom:7px;
+				transition: none;
+
+	}
+	
+	
+	.connect_b a.connect  {
+	background-color:#56ac1d;
+	border:1px solid #5bbb1b;
+	background-image:url(images/icons/cf_icon_usb2_white.svg);
+	background-repeat:no-repeat;
+	background-size:44px;
+	background-position:center 6px;
+				transition: none;
+
+	}
+	
+	.connect_b a.connect.active  {
+background-color:#e60000;
+	border:1px solid #fe0000;
+	background-image:url(images/icons/cf_icon_usb1_white.svg);
+			transition: none;
+
+
+	}
+	
+	
+	.connect_state {
+	float:left;
+	height:20px;
+	width:100%;
+	text-align:center;
+	color:#fff;
+	font-size:12px;
+	font-family: 'open_sansregular', Arial;
+	text-shadow:0px 1px rgba(0, 0, 0, 0.25);
+
+
+	}
+	
+/* fixing padding for all Tabs*/
+
+.tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-dataflash, .tab-firmware_flasher, .tab-gps, .tab-help, .tab-led-strip, .tab-logging, .tab-modes, .tab-motors, .tab-pid_tuning, .tab-ports, .tab-receiver, .tab-sensors, .tab-servos {
+	padding:;
+	}
+	
+
+/* fixing logging tab*/
+.properties {
+	width:800px;
+	}
+	
+	
+	.properties dl {
+	width:200px;
+	}
+	
+	
+	.properties dd {
+	width:400px;
+	height:auto !important;
+	}
+	
\ No newline at end of file
diff --git a/tabs/options.html b/tabs/options.html
index 4e6cd9e9..f6fed5b6 100644
--- a/tabs/options.html
+++ b/tabs/options.html
@@ -3,4 +3,16 @@
 </div>
 <div class="statistics">
     <label><input type="checkbox" /><span i18n="options_improve_configurator"></span></label>
+</div>
+
+
+
+<div class="appearance">
+ <label>
+    <input type="radio" name="RadioGroup1" value="1" id="restore">
+    Dark Theme</label>
+  <br>
+  <label>
+    <input type="radio" name="RadioGroup1" value="2" id="remove">
+    Light Theme</label>
 </div>
\ No newline at end of file