diff --git a/homeassistant/components/http/frontend.py b/homeassistant/components/http/frontend.py
index ec1497e48f2..c6093c2354a 100644
--- a/homeassistant/components/http/frontend.py
+++ b/homeassistant/components/http/frontend.py
@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "52df22ae159b45a14b265b26a6f4ff55"
+VERSION = "eabfdd5cb0e712c8d6d5d837fb9bfeb9"
diff --git a/homeassistant/components/http/www_static/frontend.html b/homeassistant/components/http/www_static/frontend.html
index ccb73c5b245..afb1cbd11a2 100644
--- a/homeassistant/components/http/www_static/frontend.html
+++ b/homeassistant/components/http/www_static/frontend.html
@@ -17810,7 +17810,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </style>
 
     <div horizontal="" layout="" center="">
-      <domain-icon id="icon" domain="{{stateObj.domain}}" state="{{stateObj.state}}">
+      <domain-icon id="icon" domain="{{stateObj.domain}}" data-domain="{{stateObj.domain}}" state="{{stateObj.state}}" data-state="{{stateObj.state}}">
       </domain-icon>
       <div fit="" id="picture"></div>
     </div>
@@ -17819,26 +17819,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script>
   Polymer('state-badge',{
     observe: {
-      'stateObj.state': 'stateChanged',
+      'stateObj.state': 'updateIconColor',
+      'stateObj.attributes.brightness': 'updateIconColor',
+      'stateObj.attributes.xy_color[0]': 'updateIconColor',
+      'stateObj.attributes.xy_color[1]': 'updateIconColor',
       'stateObj.attributes.entity_picture': 'entityPictureChanged'
     },
 
-    stateChanged: function(oldVal, newVal) {
+    /**
+     * Called when an attribute changes that influences the color of the icon.
+     */
+    updateIconColor: function(oldVal, newVal) {
       var state = this.stateObj;
 
       // for domain light, set color of icon to light color if available
-      if(state.domain == "light" && newVal == "on" &&
+      if(state.domain == "light" && state.state == "on" &&
          state.attributes.brightness && state.attributes.xy_color) {
 
         var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
                                   state.attributes.xy_color[1],
                                   state.attributes.brightness);
-        this.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
+        this.$.icon.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
       } else {
-        this.style.color = 'white';
+        this.$.icon.style.color = null;
       }
     },
 
+    /**
+     * Called when the attribute for entity_picture has changed.
+     */
     entityPictureChanged: function(oldVal, newVal) {
       if(newVal) {
         this.$.picture.style.backgroundImage = 'url(' + newVal + ')';
@@ -18066,14 +18075,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       }
 
       state-card {
-        width: calc(50% - 42px);
+        width: calc(50% - 44px);
         margin: 8px 0 0 8px;
       }
     }
 
     @media all and (min-width: 1100px) {
       state-card {
-        width: calc(33% - 37px);
+        width: calc(33% - 38px);
+
+      }
+    }
+
+    @media all and (min-width: 1450px) {
+      state-card {
+        width: calc(25% - 42px);
 
       }
     }