diff --git a/hassio/src/addon-store/hassio-addon-repository.js b/hassio/src/addon-store/hassio-addon-repository.js
index 6498f8d71e..4b3c0d537f 100644
--- a/hassio/src/addon-store/hassio-addon-repository.js
+++ b/hassio/src/addon-store/hassio-addon-repository.js
@@ -30,7 +30,7 @@ class HassioAddonRepository extends NavigateMixin(PolymerElement) {
         <template is="dom-repeat" items="[[addons]]" as="addon" sort="sortAddons">
           <paper-card on-click="addonTapped">
             <div class="card-content">
-              <hassio-card-content title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
+              <hassio-card-content hass="[[hass]]" title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
             </div>
           </paper-card>
         </template>
@@ -41,6 +41,7 @@ class HassioAddonRepository extends NavigateMixin(PolymerElement) {
 
   static get properties() {
     return {
+      hass: Object,
       repo: Object,
       addons: Array,
     };
diff --git a/hassio/src/addon-store/hassio-addon-store.js b/hassio/src/addon-store/hassio-addon-store.js
index c3b52c77e0..e9e550d69c 100644
--- a/hassio/src/addon-store/hassio-addon-store.js
+++ b/hassio/src/addon-store/hassio-addon-store.js
@@ -15,7 +15,7 @@ class HassioAddonStore extends PolymerElement {
     <hassio-repositories-editor hass="[[hass]]" repos="[[repos]]"></hassio-repositories-editor>
 
     <template is="dom-repeat" items="[[repos]]" as="repo" sort="sortRepos">
-      <hassio-addon-repository repo="[[repo]]" addons="[[computeAddons(repo.slug)]]"></hassio-addon-repository>
+      <hassio-addon-repository hass="[[hass]]" repo="[[repo]]" addons="[[computeAddons(repo.slug)]]"></hassio-addon-repository>
     </template>
 `;
   }
diff --git a/hassio/src/addon-store/hassio-repositories-editor.js b/hassio/src/addon-store/hassio-repositories-editor.js
index 3ecbc8917a..268fd374f7 100644
--- a/hassio/src/addon-store/hassio-repositories-editor.js
+++ b/hassio/src/addon-store/hassio-repositories-editor.js
@@ -35,7 +35,7 @@ class HassioRepositoriesEditor extends PolymerElement {
       <template id="list" is="dom-repeat" items="[[repoList]]" as="repo" sort="sortRepos">
         <paper-card>
           <div class="card-content">
-            <hassio-card-content title="[[repo.name]]" description="[[repo.url]]" icon="hassio:github-circle"></hassio-card-content>
+            <hassio-card-content hass="[[hass]]" title="[[repo.name]]" description="[[repo.url]]" icon="hassio:github-circle"></hassio-card-content>
           </div>
           <div class="card-actions">
             <ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[computeRemoveRepoData(repoList, repo.url)]]" class="warning">Remove</ha-call-api-button>
diff --git a/hassio/src/addon-view/hassio-addon-info.js b/hassio/src/addon-view/hassio-addon-info.js
index 50e73db38a..1b319c64eb 100644
--- a/hassio/src/addon-view/hassio-addon-info.js
+++ b/hassio/src/addon-view/hassio-addon-info.js
@@ -66,7 +66,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
     <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
       <paper-card heading="Update available! 🎉">
         <div class="card-content">
-          <hassio-card-content title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="hassio:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
+          <hassio-card-content hass="[[hass]]" title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="hassio:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
         </div>
         <div class="card-actions">
           <ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/update">Update</ha-call-api-button>
diff --git a/hassio/src/components/hassio-card-content.js b/hassio/src/components/hassio-card-content.js
index ba8a28ffa4..98c56d3dc3 100644
--- a/hassio/src/components/hassio-card-content.js
+++ b/hassio/src/components/hassio-card-content.js
@@ -50,7 +50,7 @@ class HassioCardContent extends PolymerElement {
           [[description]]
         </template>
         <template is="dom-if" if="[[datetime]]">
-          <ha-relative-time class="addition" datetime="[[datetime]]"></ha-relative-time>
+          <ha-relative-time hass="[[hass]]" class="addition" datetime="[[datetime]]"></ha-relative-time>
         </template>
       </div>
     </div>
@@ -59,6 +59,7 @@ class HassioCardContent extends PolymerElement {
 
   static get properties() {
     return {
+      hass: Object,
       title: String,
       description: String,
       datetime: String,
diff --git a/hassio/src/dashboard/hassio-addons.js b/hassio/src/dashboard/hassio-addons.js
index d487e33e8a..02d031e833 100644
--- a/hassio/src/dashboard/hassio-addons.js
+++ b/hassio/src/dashboard/hassio-addons.js
@@ -26,7 +26,7 @@ class HassioAddons extends NavigateMixin(PolymerElement) {
       <template is="dom-repeat" items="[[addons]]" as="addon" sort="sortAddons">
         <paper-card on-click="addonTapped">
           <div class="card-content">
-            <hassio-card-content title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
+            <hassio-card-content hass="[[hass]]" title="[[addon.name]]" description="[[addon.description]]" icon="[[computeIcon(addon)]]" icon-title="[[computeIconTitle(addon)]]" icon-class="[[computeIconClass(addon)]]"></hassio-card-content>
           </div>
         </paper-card>
       </template>
diff --git a/hassio/src/dashboard/hassio-hass-update.js b/hassio/src/dashboard/hassio-hass-update.js
index 33a40210ba..773b9851c3 100644
--- a/hassio/src/dashboard/hassio-hass-update.js
+++ b/hassio/src/dashboard/hassio-hass-update.js
@@ -27,7 +27,7 @@ class HassioHassUpdate extends PolymerElement {
           <div class="title">Update available! 🎉</div>
           <paper-card>
             <div class="card-content">
-              <hassio-card-content title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="hassio:home-assistant" icon-class="hassupdate"></hassio-card-content>
+              <hassio-card-content hass="[[hass]]" title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="hassio:home-assistant" icon-class="hassupdate"></hassio-card-content>
               <template is="dom-if" if="[[error]]">
                 <div class="error">Error: [[error]]</div>
               </template>
diff --git a/hassio/src/snapshots/hassio-snapshots.js b/hassio/src/snapshots/hassio-snapshots.js
index 7e783a9f90..0eb0fffbe7 100644
--- a/hassio/src/snapshots/hassio-snapshots.js
+++ b/hassio/src/snapshots/hassio-snapshots.js
@@ -91,7 +91,7 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
         <template is="dom-repeat" items="[[snapshots]]" as="snapshot" sort="_sortSnapshots">
           <paper-card class="pointer" on-click="_snapshotClicked">
             <div class="card-content">
-              <hassio-card-content title="[[_computeName(snapshot)]]" description="[[_computeDetails(snapshot)]]" datetime="[[snapshot.date]]" icon="[[_computeIcon(snapshot.type)]]" icon-class="snapshot"></hassio-card-content>
+              <hassio-card-content hass="[[hass]]" title="[[_computeName(snapshot)]]" description="[[_computeDetails(snapshot)]]" datetime="[[snapshot.date]]" icon="[[_computeIcon(snapshot.type)]]" icon-class="snapshot"></hassio-card-content>
             </div>
           </paper-card>
         </template>
diff --git a/src/common/datetime/relative_time.js b/src/common/datetime/relative_time.js
index c1029e9e4d..6cdb739a01 100644
--- a/src/common/datetime/relative_time.js
+++ b/src/common/datetime/relative_time.js
@@ -11,21 +11,26 @@ const tests = [
 
 export default function relativeTime(dateObj) {
   let delta = (new Date() - dateObj) / 1000;
-  const format = delta >= 0 ? '%s ago' : 'in %s';
+  const tense = delta >= 0 ? 'past' : 'future';
   delta = Math.abs(delta);
 
   for (let i = 0; i < tests.length; i += 2) {
     if (delta < tests[i]) {
       delta = Math.floor(delta);
-      return format.replace(
-        '%s',
-        delta === 1 ? '1 ' + tests[i + 1] : delta + ' ' + tests[i + 1] + 's'
-      );
+      return {
+        tense,
+        value: delta,
+        unit: tests[i + 1]
+      };
     }
 
     delta /= tests[i];
   }
 
   delta = Math.floor(delta);
-  return format.replace('%s', delta === 1 ? '1 week' : delta + ' weeks');
+  return {
+    tense,
+    value: delta,
+    unit: 'week'
+  };
 }
diff --git a/src/components/entity/state-info.js b/src/components/entity/state-info.js
index 069b50f58c..6de7f8d8f2 100644
--- a/src/components/entity/state-info.js
+++ b/src/components/entity/state-info.js
@@ -62,7 +62,7 @@ class StateInfo extends PolymerElement {
 
       <template is="dom-if" if="[[inDialog]]">
         <div class="time-ago">
-          <ha-relative-time datetime="[[stateObj.last_changed]]"></ha-relative-time>
+          <ha-relative-time hass="[[hass]]" datetime="[[stateObj.last_changed]]"></ha-relative-time>
         </div>
       </template>
       <template is="dom-if" if="[[!inDialog]]">
@@ -80,14 +80,9 @@ class StateInfo extends PolymerElement {
         type: Boolean,
         value: false,
       },
-
-      stateObj: {
-        type: Object,
-      },
-
-      inDialog: {
-        type: Boolean,
-      },
+      hass: Object,
+      stateObj: Object,
+      inDialog: Boolean
     };
   }
 
diff --git a/src/components/ha-relative-time.js b/src/components/ha-relative-time.js
index 43cea0ae71..9359f0598e 100644
--- a/src/components/ha-relative-time.js
+++ b/src/components/ha-relative-time.js
@@ -3,9 +3,15 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import relativeTime from '../common/datetime/relative_time.js';
 
-class HaRelativeTime extends PolymerElement {
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaRelativeTime extends LocalizeMixin(PolymerElement) {
   static get properties() {
     return {
+      hass: Object,
       datetime: {
         type: String,
         observer: 'datetimeChanged',
@@ -16,9 +22,7 @@ class HaRelativeTime extends PolymerElement {
         observer: 'datetimeObjChanged',
       },
 
-      parsedDateTime: {
-        type: Object,
-      },
+      parsedDateTime: Object
     };
   }
 
@@ -51,9 +55,15 @@ class HaRelativeTime extends PolymerElement {
   }
 
   updateRelative() {
-    var root = dom(this);
-    root.innerHTML = this.parsedDateTime ?
-      relativeTime(this.parsedDateTime) : 'never';
+    const root = dom(this);
+    if (!this.parsedDateTime) {
+      root.innerHTML = this.localize('ui.components.relative_time.never');
+    } else {
+      const rel = relativeTime(this.parsedDateTime);
+      const time = this.localize(`ui.duration.${rel.unit}`, 'count', rel.value);
+      const relTime = this.localize(`ui.components.relative_time.${rel.tense}`, 'time', time);
+      root.innerHTML = relTime;
+    }
   }
 }
 
diff --git a/src/dialogs/more-info/controls/more-info-automation.js b/src/dialogs/more-info/controls/more-info-automation.js
index fe92758cb5..335708a047 100644
--- a/src/dialogs/more-info/controls/more-info-automation.js
+++ b/src/dialogs/more-info/controls/more-info-automation.js
@@ -28,7 +28,7 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
         <div>
           [[localize('ui.card.automation.last_triggered')]]:
         </div>
-        <ha-relative-time datetime="[[stateObj.attributes.last_triggered]]"></ha-relative-time>
+        <ha-relative-time hass="[[hass]]" datetime="[[stateObj.attributes.last_triggered]]"></ha-relative-time>
       </div>
 
       <div class="actions">
diff --git a/src/dialogs/more-info/controls/more-info-sun.js b/src/dialogs/more-info/controls/more-info-sun.js
index 4e0fe88e2e..f1cb2dcb25 100644
--- a/src/dialogs/more-info/controls/more-info-sun.js
+++ b/src/dialogs/more-info/controls/more-info-sun.js
@@ -15,7 +15,7 @@ class MoreInfoSun extends PolymerElement {
       <div class="data-entry layout justified horizontal">
         <div class="key">
           <span>[[itemCaption(item)]]</span>
-          <ha-relative-time datetime-obj="[[itemDate(item)]]"></ha-relative-time>
+          <ha-relative-time hass="[[hass]]" datetime-obj="[[itemDate(item)]]"></ha-relative-time>
         </div>
         <div class="value">[[itemValue(item)]]</div>
       </div>
@@ -29,10 +29,8 @@ class MoreInfoSun extends PolymerElement {
 
   static get properties() {
     return {
-      stateObj: {
-        type: Object,
-      },
-
+      hass: Object,
+      stateObj: Object,
       risingDate: {
         type: Object,
         computed: 'computeRising(stateObj)',
diff --git a/src/state-summary/state-card-climate.js b/src/state-summary/state-card-climate.js
index 2670ac9e67..db0d4cb555 100644
--- a/src/state-summary/state-card-climate.js
+++ b/src/state-summary/state-card-climate.js
@@ -30,12 +30,13 @@ class StateCardClimate extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
   static get properties() {
     return {
+      hass: Object,
       stateObj: Object,
       inDialog: {
         type: Boolean,
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index e58c4e3565..d3a643969e 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -33,12 +33,13 @@ class StateCardConfigurator extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
   static get properties() {
     return {
+      hass: Object,
       stateObj: Object,
       inDialog: {
         type: Boolean,
diff --git a/src/state-summary/state-card-cover.js b/src/state-summary/state-card-cover.js
index 1ea2eb3bf0..6b9f8864bb 100644
--- a/src/state-summary/state-card-cover.js
+++ b/src/state-summary/state-card-cover.js
@@ -29,7 +29,7 @@ class StateCardCover extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js
index f233f1d215..dbfd09728e 100644
--- a/src/state-summary/state-card-display.js
+++ b/src/state-summary/state-card-display.js
@@ -46,7 +46,7 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/state-summary/state-card-input_number.js b/src/state-summary/state-card-input_number.js
index d8011ba1f6..cd0fca15e5 100644
--- a/src/state-summary/state-card-input_number.js
+++ b/src/state-summary/state-card-input_number.js
@@ -51,7 +51,7 @@ class StateCardInputNumber extends mixinBehaviors([
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/state-summary/state-card-input_text.js b/src/state-summary/state-card-input_text.js
index 6dcc6e4ebf..8e8a298216 100644
--- a/src/state-summary/state-card-input_text.js
+++ b/src/state-summary/state-card-input_text.js
@@ -25,7 +25,7 @@ class StateCardInputText extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
@@ -44,14 +44,8 @@ class StateCardInputText extends PolymerElement {
         observer: 'stateObjectChanged',
       },
 
-      pattern: {
-        type: String,
-      },
-
-      value: {
-        type: String,
-      }
-
+      pattern: String,
+      value: String
     };
   }
 
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index 2d2bc3b1d2..462093263c 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -53,7 +53,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
index 2bfcca15b5..f2fe51b612 100644
--- a/src/state-summary/state-card-scene.js
+++ b/src/state-summary/state-card-scene.js
@@ -32,7 +32,7 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/state-summary/state-card-script.js b/src/state-summary/state-card-script.js
index 889c5dfe44..0ca95df3c1 100644
--- a/src/state-summary/state-card-script.js
+++ b/src/state-summary/state-card-script.js
@@ -43,7 +43,7 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/state-summary/state-card-timer.js b/src/state-summary/state-card-timer.js
index e430c7d766..8ef22b5c36 100644
--- a/src/state-summary/state-card-timer.js
+++ b/src/state-summary/state-card-timer.js
@@ -36,7 +36,7 @@ class StateCardTimer extends LocalizeMixin(PolymerElement) {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/state-summary/state-card-toggle.js b/src/state-summary/state-card-toggle.js
index 5eb44f935c..a62bb114de 100644
--- a/src/state-summary/state-card-toggle.js
+++ b/src/state-summary/state-card-toggle.js
@@ -25,7 +25,7 @@ class StateCardToggle extends PolymerElement {
 
   static get stateInfoTemplate() {
     return html`
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    <state-info hass="[[hass]]" state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
 `;
   }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index 00aa80f5e3..3645f4bae8 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -377,12 +377,19 @@
           "entity": "Entity"
         }
       },
+      "relative_time": {
+        "past": "{time} ago",
+        "future": "In {time}",
+        "never": "Never"
+      },
       "service-picker": {
         "service": "Service"
       }
     },
     "duration": {
       "second": "{count} {count, plural,\n  one {second}\n  other {seconds}\n}",
+      "minute": "{count} {count, plural,\n  one {minute}\n  other {minutes}\n}",
+      "hour": "{count} {count, plural,\n  one {hour}\n  other {hours}\n}",
       "day": "{count} {count, plural,\n  one {day}\n  other {days}\n}",
       "week": "{count} {count, plural,\n  one {week}\n  other {weeks}\n}"
     },
diff --git a/test/state-info-test.html b/test/state-info-test.html
index 979af79337..f13e177998 100644
--- a/test/state-info-test.html
+++ b/test/state-info-test.html
@@ -8,12 +8,12 @@
 <body>
   <test-fixture id="stateInfoSecondaryLine">
     <template>
-      <state-info secondary-line><my-elem>text</my-elem></state-info>
+      <state-info hass="[[hass]]" secondary-line><my-elem>text</my-elem></state-info>
     </template>
   </test-fixture>
   <test-fixture id="stateInfo">
     <template>
-      <state-info></state-info>
+      <state-info hass="[[hass]]"></state-info>
     </template>
   </test-fixture>