diff --git a/src/more-infos/more-info-climate.html b/src/more-infos/more-info-climate.html
index 4f5930dc64..6a197bea39 100644
--- a/src/more-infos/more-info-climate.html
+++ b/src/more-infos/more-info-climate.html
@@ -35,11 +35,12 @@
 
       .has-away_mode .container-away_mode,
       .has-aux_heat .container-aux_heat,
-      .has-temperature .container-temperature,
-      .has-humidity .container-humidity,
-      .has-operation_list .container-operation_list,
-      .has-fan_list .container-fan_list,
-      .has-swing_list .container-swing_list {
+      .has-target_temperature .container-temperature,
+      .has-target_humidity .container-humidity,
+      .has-operation_mode .container-operation_list,
+      .has-fan_mode .container-fan_list,
+      .has-swing_list .container-swing_list,
+      .has-swing_mode .container-swing_list {
         display: block;
       }
 
@@ -278,10 +279,30 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   computeClassNames(stateObj) {
-    return 'more-info-climate ' + window.hassUtil.attributeClassNames(stateObj, [
-      'away_mode', 'aux_heat', 'temperature', 'humidity', 'operation_list',
-      'fan_list', 'swing_list',
-    ]);
+    const featureClassNames = {
+      1: 'has-target_temperature',
+      2: 'has-target_temperature_high',
+      4: 'has-target_temperature_low',
+      8: 'has-target_humidity',
+      16: 'has-target_humidity_high',
+      32: 'has-target_humidity_low',
+      64: 'has-fan_mode',
+      128: 'has-operation_mode',
+      256: 'has-hold_mode',
+      512: 'has-swing_mode',
+      1024: 'has-away_mode',
+      2048: 'has-aux_heat',
+    };
+
+
+    var classes = [
+      window.hassUtil.attributeClassNames(stateObj, ['current_temperature', 'current_humidity']),
+      window.hassUtil.featureClassNames(stateObj, featureClassNames),
+    ];
+
+    classes.push('more-info-climate');
+
+    return classes.join(' ');
   }
 
   targetTemperatureChanged(ev) {