diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 4d03b81b9c..06d748a275 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -96,7 +96,6 @@ export const computeStateDisplay = (
     return legacyComputeStateDisplay(localize, stateObj, language);
   }
 
-  // Real code.
   if (stateObj.state === UNKNOWN || stateObj.state === UNAVAILABLE) {
     return localize(`state.default.${stateObj.state}`);
   }
@@ -141,9 +140,15 @@ export const computeStateDisplay = (
     return formatDateTime(date, language);
   }
 
-  const deviceClass = stateObj.attributes.device_class || "_";
   return (
-    localize(`component.${domain}.state.${deviceClass}.${stateObj.state}`) ||
+    // Return device class translation
+    (stateObj.attributes.device_class &&
+      localize(
+        `component.${domain}.state.${stateObj.attributes.device_class}.${stateObj.state}`
+      )) ||
+    // Return default translation
+    localize(`component.${domain}.state._.${stateObj.state}`) ||
+    // We don't know! Return the raw state.
     stateObj.state
   );
 };
diff --git a/src/components/ha-climate-state.js b/src/components/ha-climate-state.js
index 76002a1f91..eb961cce4c 100644
--- a/src/components/ha-climate-state.js
+++ b/src/components/ha-climate-state.js
@@ -110,7 +110,7 @@ class HaClimateState extends LocalizeMixin(PolymerElement) {
   }
 
   _localizeState(localize, stateObj) {
-    const stateString = localize(`state.climate.${stateObj.state}`);
+    const stateString = localize(`component.climate.state._.${stateObj.state}`);
     return stateObj.attributes.hvac_action
       ? `${localize(
           `state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`
diff --git a/src/components/ha-vacuum-state.js b/src/components/ha-vacuum-state.js
index 4688224380..da4ab54acd 100644
--- a/src/components/ha-vacuum-state.js
+++ b/src/components/ha-vacuum-state.js
@@ -76,7 +76,7 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
       ? this.localize(
           `ui.card.vacuum.actions.${STATES_INTERCEPTABLE[state].action}`
         )
-      : this.localize(`state.vacuum.${state}`);
+      : this.localize(`component.vacuum._.${state}`);
   }
 
   _callService(ev) {
diff --git a/src/components/ha-water_heater-state.js b/src/components/ha-water_heater-state.js
index 39766d0620..7cbe8b10c3 100644
--- a/src/components/ha-water_heater-state.js
+++ b/src/components/ha-water_heater-state.js
@@ -2,6 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import LocalizeMixin from "../mixins/localize-mixin";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -32,7 +33,7 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
       </style>
 
       <div class="target">
-        <span class="state-label"> [[_localizeState(stateObj.state)]] </span>
+        <span class="state-label"> [[_localizeState(stateObj)]] </span>
         [[computeTarget(hass, stateObj)]]
       </div>
 
@@ -67,8 +68,8 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
     return "";
   }
 
-  _localizeState(state) {
-    return this.localize(`state.water_heater.${state}`) || state;
+  _localizeState(stateObj) {
+    return computeStateDisplay(this.hass.localize, stateObj);
   }
 }
 customElements.define("ha-water_heater-state", HaWaterHeaterState);
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index be4526fd8f..71a5d5ba55 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -185,7 +185,7 @@ class MoreInfoClimate extends LitElement {
                   .map(
                     (mode) => html`
                       <paper-item item-name=${mode}>
-                        ${hass.localize(`state.climate.${mode}`)}
+                        ${hass.localize(`component.climate.state._.${mode}`)}
                       </paper-item>
                     `
                   )}
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.js b/src/dialogs/more-info/controls/more-info-water_heater.js
index ce1c5e2994..5caf3122e6 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@@ -246,7 +246,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
   }
 
   _localizeOperationMode(localize, mode) {
-    return localize(`state.water_heater.${mode}`) || mode;
+    return localize(`component.water_heater.state._.${mode}`) || mode;
   }
 }
 
diff --git a/src/dialogs/notifications/configurator-notification-item.ts b/src/dialogs/notifications/configurator-notification-item.ts
index 178ebeff97..5be796cdc2 100644
--- a/src/dialogs/notifications/configurator-notification-item.ts
+++ b/src/dialogs/notifications/configurator-notification-item.ts
@@ -11,6 +11,7 @@ import { PersitentNotificationEntity } from "../../data/persistent_notification"
 import { HomeAssistant } from "../../types";
 import "./notification-item-template";
 import { domainToName } from "../../data/integration";
+import { computeStateDisplay } from "../../common/entity/compute_state_display";
 
 @customElement("configurator-notification-item")
 export class HuiConfiguratorNotificationItem extends LitElement {
@@ -38,8 +39,10 @@ export class HuiConfiguratorNotificationItem extends LitElement {
         </div>
 
         <mwc-button slot="actions" @click="${this._handleClick}"
-          >${this.hass.localize(
-            `state.configurator.${this.notification.state}`
+          >${computeStateDisplay(
+            this.hass.localize,
+            this.notification,
+            this.hass.language
           )}</mwc-button
         >
       </notification-item-template>
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 230b86700c..aeec4d36fe 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -165,7 +165,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       <ha-card
         .header="${this._config.name ||
         stateObj.attributes.friendly_name ||
-        this._label(stateObj.state)}"
+        this._stateDisplay(stateObj.state)}"
       >
         <ha-label-badge
           class="${classMap({ [stateObj.state]: true })}"
@@ -184,7 +184,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
                 @click="${this._handleActionClick}"
                 outlined
               >
-                ${this._label(state)}
+                ${this._stateDisplay(state)}
               </mwc-button>
             `;
           })}
@@ -212,7 +212,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
                           outlined
                         >
                           ${value === "clear"
-                            ? this._label("clear_code")
+                            ? this.hass!.localize(
+                                `ui.card.alarm_control_panel.clear_code`
+                              )
                             : value}
                         </mwc-button>
                       `;
@@ -232,10 +234,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       : stateLabel;
   }
 
-  private _label(state: string): string {
-    return (
-      this.hass!.localize(`state.alarm_control_panel.${state}`) ||
-      this.hass!.localize(`ui.card.alarm_control_panel.${state}`)
+  private _stateDisplay(state: string): string {
+    return this.hass!.localize(
+      `component.alarm_control_panel.state._.${state}`
     );
   }
 
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index e161b87bdf..2c44e818a3 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -29,6 +29,7 @@ import {
 } from "../types";
 import { HuiErrorCard } from "./hui-error-card";
 import { EntityCardConfig } from "./types";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-entity-card")
 export class HuiEntityCard extends LitElement implements LovelaceCard {
@@ -128,13 +129,11 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
               >${"attribute" in this._config
                 ? stateObj.attributes[this._config.attribute!] ||
                   this.hass.localize("state.default.unknown")
-                : this.hass.localize(`state.default.${stateObj.state}`) ||
-                  this.hass.localize(
-                    `state.${this._config.entity.split(".")[0]}.${
-                      stateObj.state
-                    }`
-                  ) ||
-                  stateObj.state}</span
+                : computeStateDisplay(
+                    this.hass.localize,
+                    stateObj,
+                    this.hass.language
+                  )}</span
             >${showUnit
               ? html`
                   <span class="measurement"
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index d25f460255..41d815a3eb 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -30,6 +30,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LightCardConfig } from "./types";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-light-card")
 export class HuiLightCard extends LitElement implements LovelaceCard {
@@ -154,8 +155,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
             ${UNAVAILABLE_STATES.includes(stateObj.state)
               ? html`
                   <div>
-                    ${this.hass.localize(`state.default.${stateObj.state}`) ||
-                    stateObj.state}
+                    ${computeStateDisplay(
+                      this.hass.localize,
+                      stateObj,
+                      this.hass.language
+                    )}
                   </div>
                 `
               : html`
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index a625062ea4..04f0e76ab6 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -195,7 +195,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
                 ? this.hass!.localize(
                     `state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`
                   )
-                : this.hass!.localize(`state.climate.${stateObj.state}`)
+                : this.hass!.localize(
+                    `component.climate.state._.${stateObj.state}`
+                  )
             }
             ${
               stateObj.attributes.preset_mode &&
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 023633dd17..0f5c9c249c 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -32,6 +32,7 @@ import {
   weatherImages,
 } from "../../../data/weather";
 import { stateIcon } from "../../../common/entity/state_icon";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 const DAY_IN_MILLISECONDS = 86400000;
 
@@ -185,8 +186,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                 ${this._config.name || computeStateName(stateObj)}
               </div>
               <div class="state">
-                ${this.hass.localize(`state.weather.${stateObj.state}`) ||
-                stateObj.state}
+                ${computeStateDisplay(
+                  this.hass.localize,
+                  stateObj,
+                  this.hass.language
+                )}
               </div>
             </div>
           </div>
diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
index dc1e526322..a5a0b9bf90 100644
--- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
@@ -20,6 +20,7 @@ import { HomeAssistant, WeatherEntity } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { LovelaceRow } from "./types";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-weather-entity-row")
 class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
@@ -69,8 +70,11 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
         <div class="attributes">
           <div>
             ${UNAVAILABLE_STATES.includes(stateObj.state)
-              ? this.hass.localize(`state.default.${stateObj.state}`) ||
-                stateObj.state
+              ? computeStateDisplay(
+                  this.hass.localize,
+                  stateObj,
+                  this.hass.language
+                )
               : html`
                   ${stateObj.attributes.temperature}
                   ${getWeatherUnit(this.hass, "temperature")}
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index fe6199c9c3..5029173578 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -5,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../components/entity/state-info";
 import LocalizeMixin from "../mixins/localize-mixin";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -24,7 +25,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
         <mwc-button hidden$="[[inDialog]]"
-          >[[_localizeState(stateObj.state)]]</mwc-button
+          >[[_localizeState(stateObj)]]</mwc-button
         >
       </div>
 
@@ -56,8 +57,12 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
     };
   }
 
-  _localizeState(state) {
-    return this.localize(`state.configurator.${state}`);
+  _localizeState(stateObj) {
+    return computeStateDisplay(
+      this.hass.localize,
+      stateObj,
+      this.hass.language
+    );
   }
 }
 customElements.define("state-card-configurator", StateCardConfigurator);
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index 048034be74..457236bc84 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../components/entity/state-info";
 import LocalizeMixin from "../mixins/localize-mixin";
 import HassMediaPlayerEntity from "../util/hass-media-player-model";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -85,9 +86,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
   computePrimaryText(localize, playerObj) {
     return (
       playerObj.primaryTitle ||
-      localize(`state.media_player.${playerObj.stateObj.state}`) ||
-      localize(`state.default.${playerObj.stateObj.state}`) ||
-      playerObj.stateObj.state
+      computeStateDisplay(localize, playerObj.stateObj, this.hass.language)
     );
   }
 }