diff --git a/src/cards/chips-card/chips/weather-chip.ts b/src/cards/chips-card/chips/weather-chip.ts
index 22e6a7fd3..f4174d0d5 100644
--- a/src/cards/chips-card/chips/weather-chip.ts
+++ b/src/cards/chips-card/chips/weather-chip.ts
@@ -95,7 +95,7 @@ export class WeatherChip extends LitElement implements LovelaceChip {
       >
         ${weatherIcon}
         ${displayLabels.length > 0
-          ? html`<span>${displayLabels.join(" / ")}</span>`
+          ? html`<span>${displayLabels.join(" ⸱ ")}</span>`
           : nothing}
       </mushroom-chip>
     `;
diff --git a/src/cards/climate-card/climate-card.ts b/src/cards/climate-card/climate-card.ts
index a8a836adb..52fc59ab0 100644
--- a/src/cards/climate-card/climate-card.ts
+++ b/src/cards/climate-card/climate-card.ts
@@ -172,7 +172,7 @@ export class ClimateCard
         stateObj,
         "current_temperature"
       );
-      stateDisplay += ` - ${temperature}`;
+      stateDisplay += ` ⸱ ${temperature}`;
     }
     const rtl = computeRTL(this.hass);
 
diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts
index 2285182f5..8769f283f 100644
--- a/src/cards/cover-card/cover-card.ts
+++ b/src/cards/cover-card/cover-card.ts
@@ -12,7 +12,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   CoverEntity,
   handleAction,
@@ -196,7 +195,12 @@ export class CoverCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.position) {
-      stateDisplay += ` - ${this.position}${blankBeforePercent(this.hass.locale)}%`;
+      const position = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "current_position",
+        this.position
+      );
+      stateDisplay += ` ⸱ ${position}`;
     }
 
     const rtl = computeRTL(this.hass);
diff --git a/src/cards/fan-card/fan-card.ts b/src/cards/fan-card/fan-card.ts
index ee8e3d068..8f6fd3805 100644
--- a/src/cards/fan-card/fan-card.ts
+++ b/src/cards/fan-card/fan-card.ts
@@ -13,7 +13,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -138,7 +137,12 @@ export class FanCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.percentage != null && stateObj.state === "on") {
-      stateDisplay = `${this.percentage}${blankBeforePercent(this.hass.locale)}%`;
+      const percentage = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "percentage",
+        this.percentage
+      );
+      stateDisplay = percentage;
     }
 
     const rtl = computeRTL(this.hass);
diff --git a/src/cards/humidifier-card/humidifier-card.ts b/src/cards/humidifier-card/humidifier-card.ts
index 59eaf921d..3dac3656f 100644
--- a/src/cards/humidifier-card/humidifier-card.ts
+++ b/src/cards/humidifier-card/humidifier-card.ts
@@ -4,7 +4,6 @@ import { classMap } from "lit/directives/class-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -111,7 +110,12 @@ export class HumidifierCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.humidity) {
-      stateDisplay = `${this.humidity}${blankBeforePercent(this.hass.locale)}%`;
+      const humidity = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "current_humidity",
+        this.humidity
+      );
+      stateDisplay = humidity;
     }
 
     const rtl = computeRTL(this.hass);
diff --git a/src/cards/light-card/light-card.ts b/src/cards/light-card/light-card.ts
index bee9469c7..0a0ed1d4e 100644
--- a/src/cards/light-card/light-card.ts
+++ b/src/cards/light-card/light-card.ts
@@ -12,7 +12,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -45,7 +44,6 @@ import "./controls/light-color-control";
 import "./controls/light-color-temp-control";
 import { LightCardConfig } from "./light-card-config";
 import {
-  getBrightness,
   getRGBColor,
   isColorLight,
   isColorSuperLight,
@@ -157,12 +155,12 @@ export class LightCard
     const stateObj = this._stateObj;
 
     if (!stateObj) return;
-    this.brightness = getBrightness(stateObj);
+    this.brightness = stateObj.attributes.brightness;
   }
 
   private onCurrentBrightnessChange(e: CustomEvent<{ value?: number }>): void {
     if (e.detail.value != null) {
-      this.brightness = e.detail.value;
+      this.brightness = (e.detail.value * 255) / 100;
     }
   }
 
@@ -197,7 +195,12 @@ export class LightCard
 
     let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.brightness != null) {
-      stateDisplay = `${this.brightness}${blankBeforePercent(this.hass.locale)}%`;
+      const brightness = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "brightness",
+        this.brightness
+      );
+      stateDisplay = brightness;
     }
 
     const rtl = computeRTL(this.hass);
diff --git a/src/cards/media-player-card/media-player-card.ts b/src/cards/media-player-card/media-player-card.ts
index 4c14ba10c..93b8009a5 100644
--- a/src/cards/media-player-card/media-player-card.ts
+++ b/src/cards/media-player-card/media-player-card.ts
@@ -11,7 +11,6 @@ import { classMap } from "lit/directives/class-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
   handleAction,
   hasAction,
@@ -45,7 +44,6 @@ import {
   computeMediaIcon,
   computeMediaNameDisplay,
   computeMediaStateDisplay,
-  getVolumeLevel,
 } from "./utils";
 
 type MediaPlayerCardControl = "media_control" | "volume_control";
@@ -137,13 +135,12 @@ export class MediaPlayerCard
     const stateObj = this._stateObj;
 
     if (!stateObj) return;
-    const volume = getVolumeLevel(stateObj);
-    this.volume = volume != null ? Math.round(volume) : volume;
+    this.volume = stateObj.attributes.volume_level;
   }
 
   private onCurrentVolumeChange(e: CustomEvent<{ value?: number }>): void {
     if (e.detail.value != null) {
-      this.volume = e.detail.value;
+      this.volume = e.detail.value / 100;
     }
   }
 
@@ -173,18 +170,22 @@ export class MediaPlayerCard
 
     const icon = computeMediaIcon(this._config, stateObj);
     const nameDisplay = computeMediaNameDisplay(this._config, stateObj);
-    const stateDisplay = computeMediaStateDisplay(
+    const appearance = computeAppearance(this._config);
+    const picture = computeEntityPicture(stateObj, appearance.icon_type);
+    let stateDisplay = computeMediaStateDisplay(
       this._config,
       stateObj,
       this.hass
     );
-    const appearance = computeAppearance(this._config);
-    const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
-    const stateValue =
-      this.volume != null && this._config.show_volume_level
-        ? `${stateDisplay} - ${this.volume}${blankBeforePercent(this.hass.locale)}%`
-        : stateDisplay;
+    if (this.volume != null && this._config.show_volume_level) {
+      const volume = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "volume_level",
+        this.volume
+      );
+      stateDisplay += ` ⸱ ${volume}`;
+    }
 
     const rtl = computeRTL(this.hass);
 
@@ -216,7 +217,7 @@ export class MediaPlayerCard
               stateObj,
               appearance,
               nameDisplay,
-              stateValue
+              stateDisplay
             )};
           </mushroom-state-item>
           ${isControlVisible
diff --git a/src/ha/common/translations/blank_before_percent.ts b/src/ha/common/translations/blank_before_percent.ts
deleted file mode 100644
index 4c489c96c..000000000
--- a/src/ha/common/translations/blank_before_percent.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FrontendLocaleData } from "../../data/translation";
-
-// Logic based on https://en.wikipedia.org/wiki/Percent_sign#Form_and_spacing
-export const blankBeforePercent = (
-  localeOptions: FrontendLocaleData
-): string => {
-  switch (localeOptions.language) {
-    case "cz":
-    case "de":
-    case "fi":
-    case "fr":
-    case "sk":
-    case "sv":
-      return " ";
-    default:
-      return "";
-  }
-};
diff --git a/src/ha/index.ts b/src/ha/index.ts
index 081ea8f24..b0ba350f6 100644
--- a/src/ha/index.ts
+++ b/src/ha/index.ts
@@ -8,7 +8,6 @@ export * from "./common/number/clamp";
 export * from "./common/number/format_number";
 export * from "./common/number/round";
 export * from "./common/structs/handle-errors";
-export * from "./common/translations/blank_before_percent";
 export * from "./common/translations/localize";
 export * from "./common/util/compute_rtl";
 export * from "./common/util/debounce";
diff --git a/src/ha/types.ts b/src/ha/types.ts
index 1b8282f24..5511dcc0f 100644
--- a/src/ha/types.ts
+++ b/src/ha/types.ts
@@ -224,7 +224,7 @@ export interface HomeAssistant {
   formatEntityAttributeValue(
     stateObj: HassEntity,
     attribute: string,
-    value?: string
+    value?: any
   ): string;
   formatEntityAttributeName(stateObj: HassEntity, attribute: string): string;
 }