diff --git a/src/components/ha-climate-state.html b/src/components/ha-climate-state.html
new file mode 100644
index 0000000000..a42ce41a2a
--- /dev/null
+++ b/src/components/ha-climate-state.html
@@ -0,0 +1,56 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+
+<dom-module id="ha-climate-state">
+  <template>
+    <style>
+      .target {
+        color: var(--primary-text-color);
+      }
+
+      .current {
+        color: var(--secondary-text-color);
+      }
+
+      .state-label {
+        font-weight: bold;
+        text-transform: capitalize;
+      }
+    </style>
+
+    <div class='target'>
+      <span class="state-label">
+        [[stateObj.state]]
+      </span>
+      [[computeTargetTemperature(stateObj)]]
+    </div>
+
+    <div class='current'>
+      Currently: [[stateObj.attributes.current_temperature]]
+      [[stateObj.attributes.unit_of_measurement]]
+    </div>
+  </template>
+</dom-module>
+
+<script>
+class HaClimateState extends Polymer.Element {
+  static get is() { return 'ha-climate-state'; }
+
+  static get properties() {
+    return {
+      stateObj: Object,
+    };
+  }
+
+  computeTargetTemperature(stateObj) {
+    if (stateObj.attributes.target_temp_low &&
+        stateObj.attributes.target_temp_high) {
+      return `${stateObj.attributes.target_temp_low} - ${stateObj.attributes.target_temp_high} ${stateObj.attributes.unit_of_measurement}`;
+    } else if (stateObj.attributes.temperature) {
+      return `${stateObj.attributes.temperature} ${stateObj.attributes.unit_of_measurement}`;
+    }
+
+    return '';
+  }
+}
+customElements.define(HaClimateState.is, HaClimateState);
+</script>
diff --git a/src/state-summary/state-card-climate.html b/src/state-summary/state-card-climate.html
index f33498a8ed..252257fff8 100644
--- a/src/state-summary/state-card-climate.html
+++ b/src/state-summary/state-card-climate.html
@@ -2,6 +2,7 @@
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
+<link rel="import" href="../components/ha-climate-state.html">
 <link rel="import" href="../components/entity/state-info.html">
 
 <dom-module id="state-card-climate">
@@ -13,44 +14,15 @@
         line-height: 1.5;
       }
 
-      .state {
+      ha-climate-state {
         margin-left: 16px;
         text-align: right;
       }
-
-      .target {
-        color: var(--primary-text-color);
-      }
-
-      .current {
-        color: var(--secondary-text-color);
-      }
-
-      .state-label {
-        font-weight: bold;
-        text-transform: capitalize;
-      }
     </style>
 
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <div class='state'>
-        <div class='target'>
-          <span class="state-label">
-            [[stateObj.state]]
-          </span>
-          <span>
-            [[computeTargetTemperature(stateObj)]]
-          </span>
-        </div>
-
-        <div class='current'>
-          <span>Currently: </span>
-          <span>[[stateObj.attributes.current_temperature]]</span>
-          <span> </span>
-          <span>[[stateObj.attributes.unit_of_measurement]]</span>
-        </div>
-      </div>
+      <ha-climate-state state-obj="[[stateObj]]"></ha-climate-state>
     </div>
   </template>
 </dom-module>
@@ -68,22 +40,6 @@ class StateCardClimate extends Polymer.Element {
       },
     };
   }
-
-  computeTargetTemperature(stateObj) {
-    var stateTemp = '';
-
-    if (stateObj.attributes.target_temp_low &&
-        stateObj.attributes.target_temp_high) {
-      stateTemp = stateObj.attributes.target_temp_low + ' - ' +
-        stateObj.attributes.target_temp_high + ' ' +
-        stateObj.attributes.unit_of_measurement;
-    } else if (stateObj.attributes.temperature) {
-      stateTemp = stateObj.attributes.temperature + ' ' +
-      stateObj.attributes.unit_of_measurement;
-    }
-
-    return stateTemp;
-  }
 }
 customElements.define(StateCardClimate.is, StateCardClimate);
 </script>