diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index 85025733a5..b8122c4c2f 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -13,6 +13,14 @@
       transition: max-height .5s ease-in;
     }
 
+    .color_temp {
+      margin-bottom: 8px;
+
+      max-height: 0px;
+      overflow: hidden;
+      transition: max-height .5s ease-in;
+    }
+
     ha-color-picker {
       display: block;
       width: 350px;
@@ -27,6 +35,10 @@
       max-height: 40px;
     }
 
+    .has-color_temp .color_temp {
+      max-height: 40px;
+    }
+
     .has-xy_color ha-color-picker {
       max-height: 500px;
     }
@@ -40,15 +52,13 @@
           on-change='brightnessSliderChanged' class='flex'>
         </paper-slider>
       </div>
-      <template is="dom-if" if="{{ctSliderValue}}">
-        <div class='brightness center horizontal layout'>
-          <div>Color temperature</div>
-          <paper-slider min="154" max="500"
-            id='ct' value='{{ctSliderValue}}'
-            on-change='ctSliderChanged' class='flex'>
-          </paper-slider>
-        </div>
-      </template>
+      <div class='color_temp center horizontal layout'>
+        <div>Color temperature</div>
+        <paper-slider min="154" max="500"
+          id='color_temp' value='{{ctSliderValue}}'
+          on-change='ctSliderChanged' class='flex'>
+        </paper-slider>
+      </div>
 
       <ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
       </ha-color-picker>
diff --git a/src/more-infos/more-info-light.js b/src/more-infos/more-info-light.js
index c938c83c2d..a37dbaa690 100644
--- a/src/more-infos/more-info-light.js
+++ b/src/more-infos/more-info-light.js
@@ -5,7 +5,7 @@ import attributeClassNames from '../util/attribute-class-names';
 
 require('../components/ha-color-picker');
 
-const ATTRIBUTE_CLASSES = ['brightness', 'xy_color', 'ct_color'];
+const ATTRIBUTE_CLASSES = ['brightness', 'xy_color', 'color_temp'];
 
 export default new Polymer({
   is: 'more-info-light',
@@ -30,7 +30,7 @@ export default new Polymer({
   stateObjChanged(newVal) {
     if (newVal && newVal.state === 'on') {
       this.brightnessSliderValue = newVal.attributes.brightness;
-      this.ctSliderValue = newVal.attributes.ct_color;
+      this.ctSliderValue = newVal.attributes.color_temp;
     }
 
     this.async(() => this.fire('iron-resize'), 500);
@@ -62,7 +62,7 @@ export default new Polymer({
 
     serviceActions.callService('light', 'turn_on', {
       entity_id: this.stateObj.entityId,
-      ct_color: ct,
+      color_temp: ct,
     });
   },