diff --git a/hassio/src/components/supervisor-metric.ts b/hassio/src/components/supervisor-metric.ts
index 116b137e0f..25eabcdf60 100644
--- a/hassio/src/components/supervisor-metric.ts
+++ b/hassio/src/components/supervisor-metric.ts
@@ -28,7 +28,7 @@ class SupervisorMetric extends LitElement {
       </span>
       <div slot="description" .title=${this.tooltip ?? ""}>
         <span class="value">
-          ${roundedValue}%
+          ${roundedValue} %
         </span>
         <ha-bar
           class="${classMap({
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index 2abc9c1652..09e363c1c1 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -154,8 +154,8 @@ class HassioHostInfo extends LitElement {
                     )}
                   </span>
                   <span slot="description">
-                    ${this.supervisor.host.disk_life_time - 10}% -
-                    ${this.supervisor.host.disk_life_time}%
+                    ${this.supervisor.host.disk_life_time - 10} % -
+                    ${this.supervisor.host.disk_life_time} %
                   </span>
                 </ha-settings-row>`
               : ""}
diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts
index 9b46f6cdb8..19a8bc0b68 100644
--- a/src/components/ha-climate-state.ts
+++ b/src/components/ha-climate-state.ts
@@ -101,7 +101,7 @@ class HaClimateState extends LitElement {
       )}-${formatNumber(
         this.stateObj.attributes.target_humidity_high,
         this.hass!.language
-      )}%`;
+      )} %`;
     }
 
     if (this.stateObj.attributes.humidity != null) {
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts
index 1e862c474a..945f0d75e4 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.ts
+++ b/src/dialogs/more-info/controls/more-info-vacuum.ts
@@ -123,7 +123,7 @@ class MoreInfoVacuum extends LitElement {
               <div>
                 <span>
                   <ha-icon .icon=${stateObj.attributes.battery_icon}></ha-icon>
-                  ${stateObj.attributes.battery_level}%
+                  ${stateObj.attributes.battery_level} %
                 </span>
               </div>
             `
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index aa988682a3..3d7129e354 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -226,7 +226,7 @@ export class HaConfigDevicePage extends LitElement {
                     batteryState
                       ? html`
                           <div class="battery">
-                            ${batteryIsBinary ? "" : batteryState.state + "%"}
+                            ${batteryIsBinary ? "" : batteryState.state + " %"}
                             <ha-battery-icon
                               .hass=${this.hass!}
                               .batteryStateObj=${batteryState}
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 3c09085b28..3f4f74dfc6 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -283,8 +283,8 @@ export class HaConfigDeviceDashboard extends LitElement {
         title: this.hass.localize("ui.panel.config.devices.data_table.battery"),
         sortable: true,
         type: "numeric",
-        width: narrow ? "90px" : "15%",
-        maxWidth: "90px",
+        width: narrow ? "95px" : "15%",
+        maxWidth: "95px",
         template: (batteryEntityPair: DeviceRowData["battery_entity"]) => {
           const battery =
             batteryEntityPair && batteryEntityPair[0]
@@ -298,7 +298,7 @@ export class HaConfigDeviceDashboard extends LitElement {
             battery && computeStateDomain(battery) === "binary_sensor";
           return battery && (batteryIsBinary || !isNaN(battery.state as any))
             ? html`
-                ${batteryIsBinary ? "" : battery.state + "%"}
+                ${batteryIsBinary ? "" : battery.state + " %"}
                 <ha-battery-icon
                   .hass=${this.hass!}
                   .batteryStateObj=${battery}
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 8bf4b1abbd..ed1aca3efa 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -129,7 +129,7 @@ class HuiGenericEntityRow extends LitElement {
                     stateObj.attributes.brightness
                   ? html`${Math.round(
                       (stateObj.attributes.brightness / 255) * 100
-                    )}%`
+                    )} %`
                   : "")}
               </div>
             `
diff --git a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts
index 7a2e1a12b6..f9e54b8b04 100644
--- a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts
@@ -52,7 +52,7 @@ class HuiHumidifierEntityRow extends LitElement implements LovelaceRow {
         .config=${this._config}
         .secondaryText=${stateObj.attributes.humidity
           ? `${this.hass!.localize("ui.card.humidifier.humidity")}:
-            ${stateObj.attributes.humidity}%${
+            ${stateObj.attributes.humidity} %${
               stateObj.attributes.mode
                 ? ` (${
                     this.hass!.localize(