diff --git a/app/css/app.css b/app/css/app.css
index a978b14..a5f4cfa 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -22,6 +22,34 @@ footer {
   width: 100%;
   height: 150px;
 }
+button {
+  display: block;
+  border-radius: 5px;
+  border: 2px solid #fff;
+  text-align: center;
+  background: transparent;
+  color: #fff;
+  padding: 8px 0;
+  font-size: 12px;
+  font-weight: 400;
+  display: inline-block;
+  padding: 4px 16px;
+  font-size: 14px;
+}
+button span {
+  display: block;
+  font-size: 16px;
+  font-weight: 200;
+}
+button:active,
+button .active {
+  background: #fff;
+  color: #272b30;
+  outline: none;
+}
+button:focus {
+  outline: none;
+}
 #colors-tabs {
   width: 411px;
 }
@@ -307,105 +335,6 @@ footer {
   left: 16px;
   color: #fff;
 }
-#log {
-  position: fixed;
-  width: 100%;
-  height: 150px;
-}
-#screens {
-  overflow-x: hidden;
-}
-.screen {
-  display: none;
-}
-#w2ui-popup .swatch {
-  cursor: pointer;
-  width: 50px;
-  height: 50px;
-  display: inline-block;
-  margin: 3px;
-  box-sizing: border-box;
-  border: 1px solid #fff;
-}
-#w2ui-popup .swatch.default {
-  border-color: #9ecaed;
-  box-shadow: 0 0 10px #9ecaed;
-}
-#w2ui-popup #new-swatch {
-  display: none;
-}
-#preview-wrap {
-  margin-top: 140px;
-}
-#preview-wrap h4 {
-  display: inline-block;
-  margin: 0;
-  margin-left: 123px;
-  margin-right: 10px;
-  width: 81px;
-  height: 30px;
-}
-#preview-wrap h4 span {
-  display: block;
-  margin-top: 6px;
-  position: absolute;
-}
-#rgb {
-  border: 0;
-  border-radius: 0;
-  width: 411px;
-  font-size: 12px;
-  text-align: center;
-}
-#color {
-  width: 100px;
-  height: 100px;
-  margin: 0 50px;
-  background-color: #000;
-  float: right;
-}
-#counters .cam,
-#counters_2 .cam,
-#counters .proj,
-#counters_2 .proj {
-  width: 50%;
-  padding-bottom: 25px;
-}
-#counters .cam label,
-#counters_2 .cam label,
-#counters .proj label,
-#counters_2 .proj label {
-  text-align: center;
-  font-size: 24px;
-  display: block;
-}
-#counters .cam input,
-#counters_2 .cam input,
-#counters .proj input,
-#counters_2 .proj input {
-  background: rgba(255, 255, 255, 0.05);
-  color: #fff;
-  padding: 6px 12px;
-  font-size: 21px;
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-  font-family: 'Menlo', monospace;
-}
-#counters .cam input.changed,
-#counters_2 .cam input.changed,
-#counters .proj input.changed,
-#counters_2 .proj input.changed {
-  color: #DAE035;
-}
-#counters .cam,
-#counters_2 .cam {
-  float: left;
-}
-#counters .proj,
-#counters_2 .proj {
-  float: right;
-}
 #seq_scroll {
   width: 100%;
   overflow-x: scroll;
@@ -465,34 +394,6 @@ footer {
   margin-top: 10px;
   padding: 6px 12px;
 }
-button {
-  display: block;
-  border-radius: 5px;
-  border: 2px solid #fff;
-  text-align: center;
-  background: transparent;
-  color: #fff;
-  padding: 8px 0;
-  font-size: 12px;
-  font-weight: 400;
-  display: inline-block;
-  padding: 4px 16px;
-  font-size: 14px;
-}
-button span {
-  display: block;
-  font-size: 16px;
-  font-weight: 200;
-}
-button:active,
-button .active {
-  background: #fff;
-  color: #272b30;
-  outline: none;
-}
-button:focus {
-  outline: none;
-}
 #sequence {
   width: 970px;
   padding-bottom: 21px;
@@ -591,6 +492,9 @@ button:focus {
   color: #DAE035;
   opacity: 1;
 }
+.spacer {
+  margin-top: 15px;
+}
 #seq_labels {
   font-family: 'Menlo', monospace;
   background-color: #272b30;
@@ -634,6 +538,105 @@ button:focus {
   background: black;
   color: #fff;
 }
+#log {
+  position: fixed;
+  width: 100%;
+  height: 150px;
+}
+#screens {
+  overflow-x: hidden;
+}
+.screen {
+  display: none;
+}
+#w2ui-popup .swatch {
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  margin: 3px;
+  box-sizing: border-box;
+  border: 1px solid #fff;
+}
+#w2ui-popup .swatch.default {
+  border-color: #9ecaed;
+  box-shadow: 0 0 10px #9ecaed;
+}
+#w2ui-popup #new-swatch {
+  display: none;
+}
+#preview-wrap {
+  margin-top: 140px;
+}
+#preview-wrap h4 {
+  display: inline-block;
+  margin: 0;
+  margin-left: 123px;
+  margin-right: 10px;
+  width: 81px;
+  height: 30px;
+}
+#preview-wrap h4 span {
+  display: block;
+  margin-top: 6px;
+  position: absolute;
+}
+#rgb {
+  border: 0;
+  border-radius: 0;
+  width: 411px;
+  font-size: 12px;
+  text-align: center;
+}
+#color {
+  width: 100px;
+  height: 100px;
+  margin: 0 50px;
+  background-color: #000;
+  float: right;
+}
+#counters .cam,
+#counters_2 .cam,
+#counters .proj,
+#counters_2 .proj {
+  width: 50%;
+  padding-bottom: 25px;
+}
+#counters .cam label,
+#counters_2 .cam label,
+#counters .proj label,
+#counters_2 .proj label {
+  text-align: center;
+  font-size: 24px;
+  display: block;
+}
+#counters .cam input,
+#counters_2 .cam input,
+#counters .proj input,
+#counters_2 .proj input {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  padding: 6px 12px;
+  font-size: 21px;
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  font-family: 'Menlo', monospace;
+}
+#counters .cam input.changed,
+#counters_2 .cam input.changed,
+#counters .proj input.changed,
+#counters_2 .proj input.changed {
+  color: #DAE035;
+}
+#counters .cam,
+#counters_2 .cam {
+  float: left;
+}
+#counters .proj,
+#counters_2 .proj {
+  float: right;
+}
 #overlay {
   position: fixed;
   top: 0;
@@ -645,9 +648,6 @@ button:focus {
   background: rgba(0, 0, 0, 0.4);
   display: none;
 }
-.spacer {
-  margin-top: 15px;
-}
 .cp-app {
   position: relative !important;
   border-radius: 0px !important;
diff --git a/app/less/app.less b/app/less/app.less
index d5430b2..48666ff 100644
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -1,62 +1,10 @@
 @import "./variables.less";
+@import "./mixins.less";
 
-.monospace () {
-	font-family: 'Menlo', monospace;
-}
-
-.button (@color: @COMMON) {
-	display: block;
-	border-radius: 5px;
-	border: 2px solid @color;
-	text-align: center;
-	background: transparent;
-	color: @color;
-	padding: 8px 0;
-	font-size: 12px;
-	font-weight: 400;
-	span{
-		display: block;
-		font-size: 16px;
-		font-weight: 200;
-	}
-	&:active,.active{
-		background: @color;
-		color: @BG;
-		outline: none;
-	}
-	&:focus{
-		outline: none;
-	}
-}
-
-*{
-	cursor: default;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-}
-
-html, body{
-	-webkit-overflow-scrolling: auto;
-	overflow-x: hidden;
-}
-
-input {
-	background: @INPUT_BG;
-	color: @COMMON;
-	border-color: @COMMON;
-	&:focus{
-		outline: none !important;
-	}
-}
-
-footer{
-	position: fixed;
-    bottom: 0;
-    width: 100%;
-    height: @FOOTER_H;
-}
-
+@import "./core.less";
 @import "./light.less";
+@import "./seq.less";
+@import "./cmd.less";
 
 #log{
 	position: fixed;
@@ -155,213 +103,6 @@ footer{
 		float: right;
 	}
 }
-#seq_scroll{
-	width: 100%;
-	overflow-x: scroll;
-	>div>div>div{
-		float: left;
-		input{
-			float: none;
-		}
-	}
-}
-#numbers{
-	div{
-		font-size: 10px;
-		text-align: center;
-		color: rgb(220, 220, 220);
-	}
-}
-#actions{
-	padding: 8px 0 0 55px;
-	input[type=number] {
-		background: @INPUT_BG;
-	    border: 2px solid @COMMON;
-	    color: @COMMON;
-	    padding: 6px;
-	    border-radius: 5px;
-	    float: right;
-	    width: 90px;
-	    margin-right: 60px;
-	}
-}
-#seq_stats{
-	width: 40%;
-	float: right;
-	padding: 20px 61px 0 0;
-	h3{
-		font-size: 20px;
-		margin: 16px 0 3px;
-	}
-	span{
-		font-weight: 600;
-		float: right;
-	}
-	.timing{
-	}
-}
-#seq_loop{
-	width: 40%;
-	float: left;
-	padding: 0 0 0 56px;
-	h3{
-		font-size: 20px;
-		margin: 12px 0 3px;
-	}
-	input{
-		.monospace();
-		background: @INPUT_BG;
-    	color: @COMMON;
-    	font-size: 21px;
-		width: 121px;
-		margin-top: 10px;
-		padding: 6px 12px;
-	}
-}
-button{
-	.button();
-	display: inline-block;
-	padding: 4px 16px;
-	font-size: 14px;
-}
-
-#sequencer{
-
-}
-#sequence{
-	width: 970px;
-	padding-bottom: 21px;
-	padding-left: 70px;
-	#cam_forward,
-	#proj_forward,
-	#black_forward{
-		clear: both;
-		input[type=checkbox]{
-			border: 2px solid @FORWARD;
-			&:checked{
-				background: @FORWARD;
-				//background: radial-gradient(circle at 25px 25px, #00C4A0, #343434);
-			}
-		}
-		>div{
-			color: @FORWARD;
-		}
-	}
-	#cam_backward,
-	#proj_backward,
-	#black_backward{
-		clear: both;
-		input[type=checkbox]{
-			border: 2px solid @BACKWARD;
-			&:checked{
-				background: @BACKWARD;
-				//background: radial-gradient(circle at 25px 25px, #AB1A25, #343434);
-			}
-		}
-		>div{
-			color: @BACKWARD;
-		}
-	}
-	input[type=checkbox]{
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		background: transparent;
-		outline: none;
-		width: 35px;
-		height: 35px;
-		border-radius: 5px;
-		margin: 0;
-		margin-bottom: 3px;
-		margin-right: 3px;
-    	display: inline-block;
-		box-sizing: border-box;
-		cursor: pointer;
-	}
-	.L{
-		display: inline-block;
-		width: 35px;
-		height: 35px;
-		border-radius: 35px;
-		margin: 0;
-		margin-bottom: 3px;
-		margin-right: 3px;
-		border: 2px solid @COMMON;
-		opacity: 0.5;
-		cursor: pointer;
-		&.a{
-			opacity: 1;
-		}
-	}
-	input.h{
-		//background: @SELECTED !important;
-		border-color: @SELECTED !important;
-		&:checked{
-			background: @SELECTED !important;
-		}
-	}
-	#numbers{
-		clear: both;
-		> div{
-			width: 35px;
-			color: @COMMON;
-			font-family: monospace;
-			float: left;
-			margin-right: 3px;
-			text-align: center;
-			opacity: 0.5;
-			&.h{
-				color: @SELECTED;
-				opacity: 1;
-			}
-		}
-	}
-}
-#seq_labels{
-	.monospace();
-	background-color: #272b30;
-	position: absolute;
-	top: 128px;
-	padding-top: 2px;
-	padding-bottom: 15px;
-	width: 54px;
-	div{
-		height: 43px;
-		line-height: 35px;
-	}
-	span{
-		text-indent: 7px;
-    	display: inline-block;
-    	margin-right: 5px;
-	}
-}
-
-#loop_current{
-    margin-top: 54px;
-    width: 121px;
-    text-align: center;
-    color: @SELECTED;
-}
-
-#console{
-	background: #000;
-	border-top: 2px solid rgba(255, 255, 255, 0.3);
-	textarea{
-		.monospace();
-		font-size: 12px;
-		line-height: 17px;
-		outline: none !important;
-		border: none;
-		box-sizing: border-box;
-		margin: 0;
-		padding: 20px;
-		width: 100%;
-		height: @FOOTER_H;
-		display: block;
-		background: black;
-		color: @COMMON;
-	}
-}
 
 #overlay{
 	position: fixed;
@@ -375,9 +116,6 @@ button{
 	display: none;
 	//z-index: 1200;
 }
-.spacer{
-	margin-top: 15px;
-}
 
 .cp-app{
 	position: relative !important;
diff --git a/app/less/core.less b/app/less/core.less
new file mode 100644
index 0000000..5d25642
--- /dev/null
+++ b/app/less/core.less
@@ -0,0 +1,33 @@
+*{
+	cursor: default;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+}
+
+html, body{
+	-webkit-overflow-scrolling: auto;
+	overflow-x: hidden;
+}
+
+input {
+	background: @INPUT_BG;
+	color: @COMMON;
+	border-color: @COMMON;
+	&:focus{
+		outline: none !important;
+	}
+}
+
+footer{
+	position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: @FOOTER_H;
+}
+
+button{
+	.button();
+	display: inline-block;
+	padding: 4px 16px;
+	font-size: 14px;
+}
\ No newline at end of file
diff --git a/app/less/light.less b/app/less/light.less
index a378119..ae72aba 100644
--- a/app/less/light.less
+++ b/app/less/light.less
@@ -1,3 +1,5 @@
+//LIGHT UI
+
 #colors-tabs{
 	width: 411px;
 }
diff --git a/app/less/mixins.less b/app/less/mixins.less
new file mode 100644
index 0000000..5658868
--- /dev/null
+++ b/app/less/mixins.less
@@ -0,0 +1,28 @@
+.monospace () {
+	font-family: 'Menlo', monospace;
+}
+
+.button (@color: @COMMON) {
+	display: block;
+	border-radius: 5px;
+	border: 2px solid @color;
+	text-align: center;
+	background: transparent;
+	color: @color;
+	padding: 8px 0;
+	font-size: 12px;
+	font-weight: 400;
+	span{
+		display: block;
+		font-size: 16px;
+		font-weight: 200;
+	}
+	&:active,.active{
+		background: @color;
+		color: @BG;
+		outline: none;
+	}
+	&:focus{
+		outline: none;
+	}
+}
\ No newline at end of file
diff --git a/app/less/seq.less b/app/less/seq.less
new file mode 100644
index 0000000..f30e847
--- /dev/null
+++ b/app/less/seq.less
@@ -0,0 +1,207 @@
+//SEQUENCER UI
+
+#seq_scroll{
+	width: 100%;
+	overflow-x: scroll;
+	>div>div>div{
+		float: left;
+		input{
+			float: none;
+		}
+	}
+}
+#numbers{
+	div{
+		font-size: 10px;
+		text-align: center;
+		color: rgb(220, 220, 220);
+	}
+}
+#actions{
+	padding: 8px 0 0 55px;
+	input[type=number] {
+		background: @INPUT_BG;
+	    border: 2px solid @COMMON;
+	    color: @COMMON;
+	    padding: 6px;
+	    border-radius: 5px;
+	    float: right;
+	    width: 90px;
+	    margin-right: 60px;
+	}
+}
+#seq_stats{
+	width: 40%;
+	float: right;
+	padding: 20px 61px 0 0;
+	h3{
+		font-size: 20px;
+		margin: 16px 0 3px;
+	}
+	span{
+		font-weight: 600;
+		float: right;
+	}
+	.timing{
+	}
+}
+#seq_loop{
+	width: 40%;
+	float: left;
+	padding: 0 0 0 56px;
+	h3{
+		font-size: 20px;
+		margin: 12px 0 3px;
+	}
+	input{
+		.monospace();
+		background: @INPUT_BG;
+    	color: @COMMON;
+    	font-size: 21px;
+		width: 121px;
+		margin-top: 10px;
+		padding: 6px 12px;
+	}
+}
+
+#sequencer{
+
+}
+#sequence{
+	width: 970px;
+	padding-bottom: 21px;
+	padding-left: 70px;
+	#cam_forward,
+	#proj_forward,
+	#black_forward{
+		clear: both;
+		input[type=checkbox]{
+			border: 2px solid @FORWARD;
+			&:checked{
+				background: @FORWARD;
+				//background: radial-gradient(circle at 25px 25px, #00C4A0, #343434);
+			}
+		}
+		>div{
+			color: @FORWARD;
+		}
+	}
+	#cam_backward,
+	#proj_backward,
+	#black_backward{
+		clear: both;
+		input[type=checkbox]{
+			border: 2px solid @BACKWARD;
+			&:checked{
+				background: @BACKWARD;
+				//background: radial-gradient(circle at 25px 25px, #AB1A25, #343434);
+			}
+		}
+		>div{
+			color: @BACKWARD;
+		}
+	}
+	input[type=checkbox]{
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		background: transparent;
+		outline: none;
+		width: 35px;
+		height: 35px;
+		border-radius: 5px;
+		margin: 0;
+		margin-bottom: 3px;
+		margin-right: 3px;
+    	display: inline-block;
+		box-sizing: border-box;
+		cursor: pointer;
+	}
+	.L{
+		display: inline-block;
+		width: 35px;
+		height: 35px;
+		border-radius: 35px;
+		margin: 0;
+		margin-bottom: 3px;
+		margin-right: 3px;
+		border: 2px solid @COMMON;
+		opacity: 0.5;
+		cursor: pointer;
+		&.a{
+			opacity: 1;
+		}
+	}
+	input.h{
+		//background: @SELECTED !important;
+		border-color: @SELECTED !important;
+		&:checked{
+			background: @SELECTED !important;
+		}
+	}
+	#numbers{
+		clear: both;
+		> div{
+			width: 35px;
+			color: @COMMON;
+			font-family: monospace;
+			float: left;
+			margin-right: 3px;
+			text-align: center;
+			opacity: 0.5;
+			&.h{
+				color: @SELECTED;
+				opacity: 1;
+			}
+		}
+	}
+}
+
+.spacer{
+	margin-top: 15px;
+}
+#seq_labels{
+	.monospace();
+	background-color: #272b30;
+	position: absolute;
+	top: 128px;
+	padding-top: 2px;
+	padding-bottom: 15px;
+	width: 54px;
+	div{
+		height: 43px;
+		line-height: 35px;
+	}
+	span{
+		text-indent: 7px;
+    	display: inline-block;
+    	margin-right: 5px;
+	}
+}
+
+#loop_current{
+    margin-top: 54px;
+    width: 121px;
+    text-align: center;
+    color: @SELECTED;
+}
+
+#console{
+	background: #000;
+	border-top: 2px solid rgba(255, 255, 255, 0.3);
+	textarea{
+		.monospace();
+		font-size: 12px;
+		line-height: 17px;
+		outline: none !important;
+		border: none;
+		box-sizing: border-box;
+		margin: 0;
+		padding: 20px;
+		width: 100%;
+		height: @FOOTER_H;
+		display: block;
+		background: black;
+		color: @COMMON;
+	}
+}
\ No newline at end of file