diff --git a/app/css/app.css b/app/css/app.css
index ad8dfe8..866928f 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -162,23 +162,23 @@ footer {
 }
 .dial-wrapper {
   position: absolute;
-  width: 5.5em;
-  height: 5.5em;
+  width: 80px;
+  height: 80px;
 }
 .dial-wrapper:after {
   content: "";
   background: #272b30;
   border-radius: 50%;
-  width: 5em;
-  height: 5em;
+  width: 66px;
+  height: 66px;
   position: absolute;
-  top: 0.25em;
-  left: 0.25em;
+  top: 7px;
+  left: 7px;
 }
 .dial-wrapper input {
-  margin-top: 6em;
-  width: 4.5em;
-  margin-left: 0.5em;
+  margin-top: 94px;
+  width: 52px;
+  margin-left: 14px;
   background: #272b30;
   border: 1px solid;
   text-align: center;
@@ -188,14 +188,14 @@ footer {
   top: 0;
   bottom: 0;
   overflow: hidden;
-  width: 2.75em;
+  width: 40px;
 }
 .dial-container.dial-container1 {
-  left: 2.75em;
+  left: 40px;
 }
 .dial-container.dial-container1 .dial-wedge {
-  transform: rotateZ(360deg);
-  border-radius: 0 5.5em 5.5em 0;
+  transform: rotateZ(0deg);
+  border-radius: 0 80px 80px 0;
   left: 0;
   transform-origin: 0 50%;
 }
@@ -203,25 +203,25 @@ footer {
   left: 0;
 }
 .dial-container.dial-container2 .dial-wedge {
-  transform: rotateZ(0);
-  border-radius: 5.5em 0 0 5.5em;
-  transform-origin: 5.5em 5.5em;
+  transform: rotateZ(0deg);
+  border-radius: 80px 0 0 80px;
+  transform-origin: 40px 40px;
 }
 .dial-wedge {
-  height: 5.5em;
-  width: 2.75em;
+  height: 80px;
+  width: 40px;
 }
 .dial-marker {
   border-radius: 50%;
-  height: 0.25em;
-  width: 0.25em;
+  height: 7px;
+  width: 7px;
   position: absolute;
   top: 0;
-  left: calc(49%);
+  left: calc(22%);
 }
 .dial-end {
-  transform: rotateZ(360deg);
-  transform-origin: 50% 2.75em;
+  transform: rotateZ(0deg);
+  transform-origin: 50% 40px;
 }
 #cmy-preview {
   position: absolute;
diff --git a/app/css/app.less b/app/css/app.less
index d95fa8b..f4796c6 100644
--- a/app/css/app.less
+++ b/app/css/app.less
@@ -163,8 +163,11 @@ footer{
 	color: @BG;
 }
 
-@dial_size : 5.5em;
-@dial_thickness : 0.5em;
+//@dial_size : 5.5em;
+//@dial_thickness : 0.5em;
+@dial_size : 80px;
+@dial_thickness : 14px;
+
 @dial_cyan : #00FFFF;
 @dial_magenta : #FF00FF;
 @dial_yellow : #FFFF00;
@@ -187,7 +190,6 @@ footer{
 
 #dial-c {
 	.dial-class(@dial_cyan, 0);
-
 }
 #dial-m {
 	.dial-class(@dial_magenta, 1);
@@ -218,9 +220,9 @@ footer{
 		left: @dial_thickness / 2;
 	}
 	input{
-		margin-top: @dial_size + 0.5em;
-	    width: @dial_size - 1em;
-		margin-left: 0.5em;
+		margin-top: @dial_size + @dial_thickness;
+	    width: @dial_size - (@dial_thickness * 2);
+		margin-left: @dial_thickness;
 		background: @BG;
 		border: 1px solid;
 		text-align: center;
@@ -235,7 +237,7 @@ footer{
 	&.dial-container1 {
 		left: @dial_size / 2;
 		.dial-wedge {
-			transform: rotateZ(360deg);
+			transform: rotateZ(0deg);
 			border-radius: 0 @dial_size @dial_size 0;
 			left: 0;
 			transform-origin: 0 50%;
@@ -244,9 +246,9 @@ footer{
 	&.dial-container2 {
 	  	left: 0;
 		.dial-wedge {
-			transform: rotateZ(0);
+			transform: rotateZ(0deg);
 			border-radius: @dial_size 0 0 @dial_size;
-			transform-origin: @dial_size @dial_size;
+			transform-origin: @dial_size/2 @dial_size/2;
 		}
 	}
 }
@@ -263,9 +265,10 @@ footer{
 	left: calc(50% - (@dial_thickness * 2));
 }
 .dial-end {
-  transform: rotateZ(360deg);
-  transform-origin: 50% @dial_size / 2;
+  transform: rotateZ(0deg);
+  transform-origin: 50% (@dial_size/2);
 }
+
 #cmy-preview {
 	position: absolute;
     margin-top: 220px;
diff --git a/app/lib/light-ui.js b/app/lib/light-ui.js
index a3942aa..f3ddf1e 100644
--- a/app/lib/light-ui.js
+++ b/app/lib/light-ui.js
@@ -74,11 +74,14 @@ light.colorPickers = function () {
 			$('#' + event.target + '-page').show();
 			if (event.target === 'rgb') {
 				light.rgb.page();
+			} else if (event.target) {
+				light.cmy.page();
 			}
 		}
 	});
 	light.rgb.init();
 	light.kelvin.init();
+	light.cmy.init();
 };
 light.set = function (rgb, callback) { //rgb = [0,0,0]
 	'use strict';
@@ -249,25 +252,87 @@ light.kelvin.click = function (t, e) {
 light.cmy = {};
 light.cmy.init = function () {
 	'use strict';
-
+	$('.dial-wrapper input').on('input', function () {
+		light.cmy.change(this);
+	});
+	$('.dial-wrapper input').on('change',  function () {
+		light.cmy.change(this);
+	});
 };
 
-light.cmy.set = function (rgb) {
+light.cmy.page = function () {
+	'use strict';
+	light.cmy.fromRgb(light.color);
+};
 
+light.cmy.change = function (t) {
+	'use strict';
+	var id = $(t).parent().attr('id').split('-')[1],
+		val = $(t).val(),
+		cmy = [];
+
+	cmy[0] = $('#dial-c input').val();
+	cmy[1] = $('#dial-m input').val();
+	cmy[2] = $('#dial-y input').val();
+	cmy[3] = $('#dial-k input').val();
+
+	light.cmy.setDial(id, val);
+	light.cmy.preview(cmy);
+};
+
+light.cmy.fromRgb = function (rgb) {
+	'use strict';
+	var cmy = chroma.rgb(rgb).cmyk();
+	light.cmy.set(cmy);
+};
+
+light.cmy.set = function (cmy) {
+	'use strict';
+	light.cmy.setDial('c', cmy[0]);
+	light.cmy.setDial('m', cmy[1]);
+	light.cmy.setDial('y', cmy[2]);
+	light.cmy.setDial('k', cmy[3]);
+
+	light.cmy.preview(cmy);
 };
 
 light.cmy.setDial = function (dial, val) {
 	'use strict';
 	var elem = $('#dial-' + dial),
-		angle = Math.floor(360 * val);
-	elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + angle + 'deg)');
-	elem.find('.dial-end').css('transform', 'rotateZ(' + angle + 'deg)');
+		angle = Math.floor(360 * val),
+		container1 = 0,
+		container2 = 0;
+		elem.find('.dial-end').hide();
+	if (angle === 0) {
+		container1 = 180;
+		container2 = 180;
+	} else if (angle < 180) {
+		container1 = 180;
+		container2 = 180 - angle;
+	} else if (angle === 180) {
+		container1 = 180;
+		container2 = 0;
+	} else if (angle > 180 && angle < 360) {
+		container1 = 180 - (angle - 180);
+		container2 = 0;
+	} else if (angle === 360) {
+		//
+	}
+
+	if (angle !== 0) {
+		elem.find('.dial-end').show();
+	}
+
+	elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + container1 + 'deg)');
+	elem.find('.dial-container2 .dial-wedge').css('transform', 'rotateZ(' + container2 + 'deg)');
+	elem.find('.dial-end').css('transform', 'rotateZ(' + (360 - angle) + 'deg)');
+	elem.find('input').val(val);
 };
 
-light.cmy.preview = function (rgb_float) {
+light.cmy.preview = function (cmy) {
 	'use strict';
 	var elem = $('#cmy-preview'),
-		rgb = light.rgb.floor(rgb_float),
+		rgb = light.rgb.floor(chroma.cmyk(cmy).rgb()),
 		rgb_str = 'rgb(' + rgb.join(', ') + ')';
 	elem.css('background', rgb_str);
 	elem.text(rgb_str);
@@ -362,6 +427,8 @@ light.swatch.init = function () {
 			$(this).addClass('default set');
 			if (w2ui['colors'].active === 'rgb') {
 				light.rgb.set(light.color);
+			} else if (w2ui['colors'].active === 'cmy') {
+				light.cmy.fromRgb(light.color);
 			}
 			light.preview(rgb);
 		}