diff --git a/app/components/color-picker.js b/app/components/color-picker.js
index 7513c3c..1ad03c9 100644
--- a/app/components/color-picker.js
+++ b/app/components/color-picker.js
@@ -4,11 +4,6 @@ export default Em.Component.extend({
   classNames:['colorpicker'],
 
   rgb: null,
-  xy: function() {
-    var rgb = this.get('rgb');
-
-    return this.rgbToXy(rgb[0], rgb[1], rgb[2]);
-  }.property('rgb'),
 
   canvas: null,
   canvasContext: null,
@@ -22,7 +17,7 @@ export default Em.Component.extend({
       var imageData = this.get('canvasContext').getImageData(canvasX, canvasY, 1, 1);
       var pixel = imageData.data;
 
-      if( pixel[0] !== 0 && pixel[1] !== 0 && pixel[2] !== 0 ) {
+      if( !(pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0) ) {
         this.set('rgb', [pixel[0], pixel[1], pixel[2]]);
       }
     }
@@ -44,54 +39,5 @@ export default Em.Component.extend({
       canvas: canvas,
       canvasContext: canvasContext
     });
-  },
-
-  // http://www.developers.meethue.com/documentation/color-conversions-rgb-xy
-  rgbToXy: function(red, green, blue){
-    var X, Y, Z, x, y;
-
-    // normalize
-    red = Number((red/255).toFixed(2));
-    green = Number((green/255).toFixed(2));
-    blue = Number((blue/255).toFixed(2));
-
-    // gamma correction
-    red = (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
-    green = (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
-    blue = (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92);
-
-    // RGB to XYZ
-    X = red * 0.664511 + green * 0.154324 + blue * 0.162028;
-    Y = red * 0.283881 + green * 0.668433 + blue * 0.047685;
-    Z = red * 0.000088 + green * 0.072310 + blue * 0.986039;
-
-    x = X / (X + Y + Z);
-    y = Y / (X + Y + Z);
-
-    console.log('[x,y]: ' + x + ', ' + y );
-    return [x,y];
-  },
-
-  xyTorgb: function(x, y){
-    var r, g, b, X, Y, Z, z, activeLights = this.get('activeLights'), lightsData = this.get('lightsData');
-
-    z = 1 - x - y;
-    Y = lightsData[activeLights[0]].state.bri;
-    X = (Y / y) * x;
-    Z = (Y / y) * z;
-
-    r =  X * 1.656492 - Y * 0.354851 - Z * 0.255038;
-    g = -X * 0.707196 + Y * 1.655397 + Z * 0.036152;
-    b =  X * 0.051713 - Y * 0.121364 + Z * 1.011530;
-
-    r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
-    g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
-    b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
-
-    r = Math.floor(r * 255);
-    g = Math.floor(g * 255);
-    b = Math.floor(b * 255);
-
-    return [r, g, b];
   }
 });
diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js
index 4aed906..0d7227b 100644
--- a/app/components/controls/light-control.js
+++ b/app/components/controls/light-control.js
@@ -40,7 +40,18 @@ export default Em.Component.extend({
 
   rgb: [255, 255, 255],
   rgbPreview: function() {
-    var rgb = this.get('rgb');
+    var rgb = this.get('rgb'),
+      self = this,
+      xy = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
+
+    this.get('activeLights').forEach(function (light) {
+      Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
+        data: JSON.stringify({"xy": xy}),
+        contentType: 'application/json',
+        type: 'PUT'
+      });
+    });
+
     Em.$('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')');
   }.observes('rgb'),
 
@@ -51,24 +62,12 @@ export default Em.Component.extend({
     if(this.get('strobeOn')){
       return false;
     }
-
+    this.get('color');
     return this.get('activeLights').some(function(light) {
       return lightsData[light].state.on === true;
     });
   }.property('lightsData', 'activeLights', 'strobeOn'),
 
-  // color of the lights in the group
-  color: function(){
-    var lightsData = this.get('lightsData'),
-      color = [0,0,0];
-
-    if(this.get('strobeOn') || this.get('activeLights').length === 0){
-      return color;
-    }
-
-    return [lightsData[0].state.hue, lightsData[0].state.sat, lightsData[0].state.bri];
-  }.property('lightsData', 'activeLights', 'strobeOn'),
-
   // determines the average brightness of the hue system for the brightness slider
   lightsBrightness: function(){
     var lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), lightsBrightness = 0;
@@ -199,7 +198,54 @@ export default Em.Component.extend({
 
   strobeOnTxt: function () {
     return this.get('strobeOn') ? 'On' : 'Off';
-  }.property('strobeOn')
+  }.property('strobeOn'),
 
   // **************** STROBE LIGHT FINISH ****************
+  // http://www.developers.meethue.com/documentation/color-conversions-rgb-xy
+  rgbToXy: function(red, green, blue){
+    var X, Y, Z, x, y;
+
+    // normalize
+    red = Number((red/255));
+    green = Number((green/255));
+    blue = Number((blue/255));
+
+    // gamma correction
+    red = (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
+    green = (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
+    blue = (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92);
+
+    // RGB to XYZ
+    X = red * 0.664511 + green * 0.154324 + blue * 0.162028;
+    Y = red * 0.283881 + green * 0.668433 + blue * 0.047685;
+    Z = red * 0.000088 + green * 0.072310 + blue * 0.986039;
+
+    x = X / (X + Y + Z);
+    y = Y / (X + Y + Z);
+
+    return [x,y];
+  },
+
+  xyToRgb: function(x, y){
+    var r, g, b, X, Y, Z, activeLights = this.get('activeLights'), lightsData = this.get('lightsData');
+
+    Y = lightsData[activeLights[1]].state.bri;
+    X = ((Y / y) * x)/100;
+    Z = ((Y / y) * (1 - x - y))/100;
+    Y = Y/100;
+
+    r = X * 3.2406 + Y * -1.5372 + Z * -0.4986;
+    g = X * -0.9689 + Y * 1.8758 + Z * 0.0415;
+    b = X * 0.0557 + Y * -0.2040 + Z * 1.0570;
+
+    r = (r <= 0.0031308) ? 12.92 * r : 1.055 * Math.pow(r, (1.0 / 2.4)) - 0.055;
+    g = (g <= 0.0031308) ? 12.92 * g : 1.055 * Math.pow(g, (1.0 / 2.4)) - 0.055;
+    b = (b <= 0.0031308) ? 12.92 * b : 1.055 * Math.pow(b, (1.0 / 2.4)) - 0.055;
+
+    r = Math.floor(r * 255);
+    g = Math.floor(g * 255);
+    b = Math.floor(b * 255);
+
+    return [r, g, b];
+  }
 });
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 798c372..bde89c2 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -25,15 +25,12 @@ body {
   position: relative;
 }
 
-#settings {
-}
-
 .settingsItem {
   margin-left: 15px;
   position: relative;
 }
 
-.settingsItem md-icon::before {
+.settingsItem .settings::before, .settingsItem .group::before {
   font-size: 28px;
   transition: 0.1s all ease-in-out;
 }
@@ -41,6 +38,7 @@ body {
 .appSettingsItem {
   padding: 10px;
   transition: 0.1s all ease-in-out;
+  cursor: pointer;
 }
 
 .appSettingsItem.warn {
@@ -58,11 +56,13 @@ body {
   background: darken(white, 20%);
 }
 
-.settingsItem.on md-icon.md-default-theme.group  {
+.settingsItem.on md-icon.md-default-theme.group,
+.settingsItem.on md-icon.md-default-theme.settings {
   color: #F12B24 !important;
 }
 
-.settingsItem:hover md-icon {
+.settingsItem:hover md-icon.group,
+.settingsItem:hover md-icon.settings {
   color: black !important;
 }
 
@@ -139,6 +139,11 @@ md-progress-linear {
   right: 0;
 }
 
+.bootstrapTooltip md-icon {
+  cursor: pointer;
+}
+
+
 md-list {
   padding: 0;
 }
@@ -222,6 +227,7 @@ md-slider.md-default-theme .md-thumb:after {
   background-color: white;
   max-height: 400px;
   overflow: auto;
+  text-align: left;
 }
 
 .lightGroup {
@@ -230,6 +236,9 @@ md-slider.md-default-theme .md-thumb:after {
     margin-top: -10px;
     margin-left: -3px;
   }
+  div {
+    display: inline-block;
+  }
 }
 
 .hueLight {
@@ -256,12 +265,12 @@ md-slider.md-default-theme .md-thumb:after {
 
 .horizontalLightGroup {
   .lightInactive::before {
-    top: -21px;
+    top: -9px;
     left: 6px;
   }
   .tooltip.top {
-    margin-top: 6px;
-    margin-left: -5px;
+    margin-top: 2px;
+    margin-left: -2px;
   }
 }
 
@@ -299,12 +308,13 @@ md-icon {
 }
 
 .removeButton {
-  margin: 10px 0 10px 50px;
+  margin: 10px 0 10px 60px;
 }
 
 .sideNavTitle {
   margin-left: 16px;
   margin-top: 10px;
+  text-align: left;
 }
 
 md-toolbar {
@@ -378,6 +388,7 @@ md-switch.md-default-theme.md-checked .md-bar {
 md-switch.md-default-theme.md-checked .md-thumb{
   background-color: #F12B24;
 }
+
 #playerControls {
   opacity: 0;
   transition: all 0.2s ease-in-out;
@@ -410,7 +421,6 @@ md-switch.md-default-theme.md-checked .md-thumb{
   color: $playerDefaultIconColor !important;
   transition-duration: 0.1s;
   margin-right: 0.208em;
-  cursor: pointer;
 }
 
 .playerControllIcon.active {
diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs
index 363e243..d34c452 100644
--- a/app/templates/components/bridge-controls.hbs
+++ b/app/templates/components/bridge-controls.hbs
@@ -6,12 +6,11 @@
       {{/each}}
     </div>
 
-    <div id="settings" class="col-sm-3 col-xs-3">
-      <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl"}}>
+    <div class="col-sm-3 col-xs-3">
+      <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl" bubbles=false}}>
         <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups">{{paper-icon icon="group"}}</span>
-
-        {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
       </span>
+      {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
 
       <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}"  {{action "toggleAppSettings"}}>
         <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings">{{paper-icon icon="settings"}}</span>
diff --git a/app/templates/components/controls/light-control.hbs b/app/templates/components/controls/light-control.hbs
index bbd9bed..918f351 100644
--- a/app/templates/components/controls/light-control.hbs
+++ b/app/templates/components/controls/light-control.hbs
@@ -22,7 +22,7 @@
   {{/paper-item}}
   <div class="relative">
     {{#if colorPickerDisplayed}}
-      {{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb xy=xy}}
+      {{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
     {{/if}}
   </div>
 
diff --git a/app/templates/components/light-group.hbs b/app/templates/components/light-group.hbs
index 9fd39a0..284007a 100644
--- a/app/templates/components/light-group.hbs
+++ b/app/templates/components/light-group.hbs
@@ -1,5 +1,5 @@
 {{#each lightsList as |light|}}
-    <span class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
+    <div class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
           <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
-  </span>
+  </div>
 {{/each}}
\ No newline at end of file