diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 8c5145f1fe09..f2e1644aaafa 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -1,121 +1,155 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
-<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
-<link rel='import' href='../components/ha-card.html'>
+import '@polymer/iron-icon/iron-icon.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-<link rel='import' href='../util/hass-mixins.html'>
+import '../components/ha-card.js';
 
-<dom-module id='ha-weather-card'>
-  <template>
-    <style>
-      :host {
-        cursor: pointer;
-      }
-
-      .content {
-        padding: 0 20px 20px;
-      }
-
-      iron-icon {
-        color: var(--paper-item-icon-color);
-      }
-
-      .now {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .state {
-        --iron-icon-height: 72px;
-        --iron-icon-width: 72px;
-        font-size: 52px;
-      }
-
-      .now-text {
-        font-size: 24px;
-      }
-
-      .forecast {
-        margin-top: 24px;
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .forecast div {
-        flex: 0 0 auto;
-        text-align: center;
-      }
-
-      .forecast .icon {
-        margin: 8px 0;
-        text-align: center;
-      }
-
-      .weekday {
-        font-weight: bold;
-      }
+import EventsMixin from '../mixins/events-mixin.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
 
-      .attributes,
-      .templow {
-        color: var(--secondary-text-color);
-      }
-    </style>
-    <ha-card header='[[stateObj.attributes.friendly_name]]'>
-      <div class='content'>
-        <div class="now">
-          <div class="state">
-            <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
-              <iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
-            </template>
-            [[getTemperature(stateObj.attributes.temperature)]]
-          </div>
-          <div class="attributes">
-            <div>
-              [[localize('ui.card.weather.attributes.humidity')]]:
-              [[stateObj.attributes.humidity]] %
-            </div>
-            <template is="dom-if" if="[[stateObj.attributes.visibility]]">
-              <div>
-                [[localize('ui.card.weather.attributes.visibility')]]:
-                [[getVisibilty(stateObj.attributes.visibility)]]
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaWeatherCard extends
+  LocalizeMixin(EventsMixin(PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          cursor: pointer;
+        }
+
+        .content {
+          padding: 0 20px 20px;
+        }
+
+        iron-icon {
+          color: var(--paper-item-icon-color);
+        }
+
+        .now {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+        }
+
+        .main {
+          display: flex;
+          align-items: center;
+          margin-right: 32px;
+        }
+
+        .main iron-icon {
+          --iron-icon-height: 72px;
+          --iron-icon-width: 72px;
+          margin-right: 8px;
+        }
+
+        .main .temp {
+          font-size: 52px;
+          line-height: 1em;
+          position: relative;
+        }
+
+        .main .temp span {
+          font-size: 24px;
+          line-height: 1em;
+          position: absolute;
+          top: 4px;
+        }
+
+        .now-text {
+          font-size: 24px;
+        }
+
+        .forecast {
+          margin-top: 24px;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .forecast div {
+          flex: 0 0 auto;
+          text-align: center;
+        }
+
+        .forecast .icon {
+          margin: 8px 0;
+          text-align: center;
+        }
+
+        .weekday {
+          font-weight: bold;
+        }
+
+        .attributes,
+        .templow,
+        .precipitation {      {
+          color: var(--secondary-text-color);
+        }
+      </style>
+      <ha-card header="[[stateObj.attributes.friendly_name]]">
+        <div class="content">
+          <div class="now">
+            <div class="main">
+              <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
+                <iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
+              </template>
+              <div class="temp">
+                [[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
               </div>
-            </template>
-            <div>
-              [[localize('ui.card.weather.attributes.wind_speed')]]:
-              [[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
+            </div>
+            <div class="attributes">
+              <template is="dom-if" if="[[_showValue(stateObj.attributes.pressure)]]">
+                <div>
+                  [[localize('ui.card.weather.attributes.air_pressure')]]:
+                  [[stateObj.attributes.pressure]] hPa
+                </div>
+              </template>
+              <template is="dom-if" if="[[_showValue(stateObj.attributes.humidity)]]">
+                <div>
+                  [[localize('ui.card.weather.attributes.humidity')]]:
+                  [[stateObj.attributes.humidity]] %
+                </div>
+              </template>
+              <template is="dom-if" if="[[_showValue(stateObj.attributes.humidity)]]">
+                <div>
+                  [[localize('ui.card.weather.attributes.wind_speed')]]:
+                  [[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
+                </div>
+              </template>
             </div>
           </div>
-        </div>
-        <div class="now-text">[[computeState(stateObj.state, localize)]]</div>
-        <template is="dom-if" if="[[forecast]]">
-          <div class="forecast">
-            <template is='dom-repeat' items='[[forecast]]'>
-              <div>
-                <div class="weekday">[[computeDateTime(item.datetime)]]</div>
-                <template is="dom-if" if="[[item.condition]]">
-                  <div class="icon">
-                    <iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
-                  </div>
-                </template>
-                <div class="temp">[[item.temperature]]°</div>
-                <template is="dom-if" if="[[item.templow]]">
-                  <div class="templow">[[item.templow]]°</div>
-                </template>
-              </div>
-            </template>
+          <div class="now-text">
+            [[computeState(stateObj.state, localize)]]
           </div>
-        </template>
-      </div>
-    </ha-card>
-  </template>
-</dom-module>
+          <template is="dom-if" if="[[forecast]]">
+            <div class="forecast">
+              <template is="dom-repeat" items="[[forecast]]">
+                <div>
+                  <div class="weekday">[[computeDateTime(item.datetime)]]</div>
+                  <template is="dom-if" if="[[item.condition]]">
+                    <div class="icon">
+                      <iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
+                    </div>
+                  </template>
+                  <div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
+                  <template is="dom-if" if="[[_showValue(item.templow)]]">
+                    <div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
+                  </template>
+                  <template is="dom-if" if="[[_showValue(item.precipitation)]]">
+                    <div class="precipitation">[[item.precipitation]] [[getUnit('precipitation')]]</div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+        </div>
+      </ha-card>
+    `;
+  }
 
-<script>
-/*
- * @appliesMixin window.hassMixins.LocalizeMixin
- */
-class HaWeatherCard extends
-  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
-  static get is() { return 'ha-weather-card'; }
   static get properties() {
     return {
       hass: Object,
@@ -134,20 +168,20 @@
       'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'
     ];
     this.weatherIcons = {
-      'clear-night': 'mdi:weather-night',
-      cloudy: 'mdi:weather-cloudy',
-      fog: 'mdi:weather-fog',
-      hail: 'mdi:weather-hail',
+      'clear-night': 'hass:weather-night',
+      cloudy: 'hass:weather-cloudy',
+      fog: 'hass:weather-fog',
+      hail: 'hass:weather-hail',
       lightning: 'mid:weather-lightning',
-      'lightning-rainy': 'mdi:weather-lightning-rainy',
-      partlycloudy: 'mdi:weather-partlycloudy',
-      pouring: 'mdi:weather-pouring',
-      rainy: 'mdi:weather-rainy',
-      snowy: 'mdi:weather-snowy',
-      'snowy-rainy': 'mdi:weather-snowy-rainy',
-      sunny: 'mdi:weather-sunny',
-      windy: 'mdi:weather-windy',
-      'windy-variant': 'mdi:weather-windy-variant'
+      'lightning-rainy': 'hass:weather-lightning-rainy',
+      partlycloudy: 'hass:weather-partlycloudy',
+      pouring: 'hass:weather-pouring',
+      rainy: 'hass:weather-rainy',
+      snowy: 'hass:weather-snowy',
+      'snowy-rainy': 'hass:weather-snowy-rainy',
+      sunny: 'hass:weather-sunny',
+      windy: 'hass:weather-windy',
+      'windy-variant': 'hass:weather-windy-variant'
     };
   }
 
@@ -161,11 +195,14 @@
   }
 
   computeForecast(forecast) {
-    return forecast && forecast.slice(0, 7);
+    return forecast && forecast.slice(0, 5);
   }
 
-  getUnit(unit) {
-    return this.hass.config.core.unit_system[unit] || '';
+  getUnit(measure) {
+    if (measure === 'precipitation') {
+      return this.getUnit('length') === 'km' ? 'mm' : 'in';
+    }
+    return this.hass.config.core.unit_system[measure] || '';
   }
 
   computeState(state, localize) {
@@ -180,10 +217,6 @@
     return this.weatherIcons[condition];
   }
 
-  getTemperature(temp) {
-    return `${temp}${this.getUnit('temperature')}`;
-  }
-
   windBearingToText(degree) {
     const degreenum = parseInt(degree);
     if (isFinite(degreenum)) {
@@ -195,13 +228,13 @@
   getWind(speed, bearing, localize) {
     if (bearing != null) {
       const cardinalDirection = this.windBearingToText(bearing);
-      return `${speed} ${this.getUnit('length')}/h (${localize(cardinalDirection.toLowerCase()) || cardinalDirection})`;
+      return `${speed} ${this.getUnit('length')}/h (${localize(`ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`) || cardinalDirection})`;
     }
     return `${speed} ${this.getUnit('length')}/h`;
   }
 
-  getVisibilty(visibilty) {
-    return `${visibilty} ${this.getUnit('length')}`;
+  _showValue(item) {
+    return typeof item !== 'undefined' && item !== null;
   }
 
   computeDateTime(data) {
@@ -216,5 +249,4 @@
     return date.toLocaleDateString(this.hass.selectedLanguage || this.hass.language, { weekday: 'short' });
   }
 }
-customElements.define(HaWeatherCard.is, HaWeatherCard);
-</script>
+customElements.define('ha-weather-card', HaWeatherCard);