diff --git a/package.json b/package.json
index 24efbc6e82..c72077d252 100644
--- a/package.json
+++ b/package.json
@@ -184,8 +184,8 @@
     "@types/sortablejs": "1.15.1",
     "@types/tar": "6.1.4",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "5.56.0",
-    "@typescript-eslint/parser": "5.56.0",
+    "@typescript-eslint/eslint-plugin": "5.57.0",
+    "@typescript-eslint/parser": "5.57.0",
     "@web/dev-server": "0.1.36",
     "@web/dev-server-rollup": "0.4.0",
     "babel-loader": "9.1.2",
diff --git a/pyproject.toml b/pyproject.toml
index cbb6b9d813..d550f7471a 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230330.0"
+version      = "20230331.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
diff --git a/src/common/entity/get_states.ts b/src/common/entity/get_states.ts
index f79a16e5e2..c98501092d 100644
--- a/src/common/entity/get_states.ts
+++ b/src/common/entity/get_states.ts
@@ -118,24 +118,40 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
       "window",
     ],
   },
+  device_tracker: {
+    source_type: ["bluetooth", "bluetooth_le", "gps", "router"],
+  },
+  fan: {
+    direction: ["forward", "reverse"],
+  },
   humidifier: {
     device_class: ["humidifier", "dehumidifier"],
   },
   media_player: {
     device_class: ["tv", "speaker", "receiver"],
     media_content_type: [
+      "album",
       "app",
+      "artist",
       "channel",
+      "channels",
+      "composer",
+      "contibuting_artist",
       "episode",
       "game",
+      "genre",
       "image",
       "movie",
       "music",
       "playlist",
+      "podcast",
+      "season",
+      "track",
       "tvshow",
       "url",
       "video",
     ],
+    repeat: ["off", "one", "all"],
   },
   number: {
     device_class: ["temperature"],
diff --git a/src/components/ha-control-select.ts b/src/components/ha-control-select.ts
index 6330ef4e9e..c2e56a5e73 100644
--- a/src/components/ha-control-select.ts
+++ b/src/components/ha-control-select.ts
@@ -25,8 +25,6 @@ export type ControlSelectOption = {
 export class HaControlSelect extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  @property() public label?: string;
-
   @property() public options?: ControlSelectOption[];
 
   @property() public value?: string;
@@ -305,6 +303,14 @@ export class HaControlSelect extends LitElement {
         justify-content: center;
         flex-direction: column;
         text-align: center;
+        padding: 2px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .option .content span {
+        display: block;
+        width: 100%;
+        hyphens: auto;
       }
       :host([vertical]) {
         width: var(--control-select-thickness);
diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts
index 2d55a1998d..3bb3ed1bd6 100644
--- a/src/components/ha-header-bar.ts
+++ b/src/components/ha-header-bar.ts
@@ -33,7 +33,7 @@ export class HaHeaderBar extends LitElement {
       unsafeCSS(topAppBarStyles),
       css`
         .mdc-top-app-bar__row {
-          height: var(--header-bar-height, 64px);
+          height: var(--header-height);
         }
         .mdc-top-app-bar {
           position: static;
diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts
index 7c36f13338..fc822203e0 100644
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -92,7 +92,7 @@ export class HaSettingsRow extends LitElement {
       ::slotted(ha-switch) {
         padding: 16px 0;
       }
-      div[secondary] {
+      .secondary {
         white-space: normal;
       }
       .prefix-wrap {
diff --git a/src/dialogs/more-info/components/alarm_control_panel/ha-more-info-alarm_control_panel-modes.ts b/src/dialogs/more-info/components/alarm_control_panel/ha-more-info-alarm_control_panel-modes.ts
index 2a95653f04..4e3ade78e1 100644
--- a/src/dialogs/more-info/components/alarm_control_panel/ha-more-info-alarm_control_panel-modes.ts
+++ b/src/dialogs/more-info/components/alarm_control_panel/ha-more-info-alarm_control_panel-modes.ts
@@ -1,9 +1,7 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
 import { stateColorCss } from "../../../../common/entity/state_color";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import "../../../../components/ha-control-select";
@@ -14,6 +12,7 @@ import {
   AlarmMode,
   ALARM_MODES,
 } from "../../../../data/alarm_control_panel";
+import { UNAVAILABLE } from "../../../../data/entity";
 import { HomeAssistant } from "../../../../types";
 import { showEnterCodeDialogDialog } from "./show-enter-code-dialog";
 
@@ -33,14 +32,10 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
     });
   });
 
-  protected updated(changedProp: Map<string | number | symbol, unknown>): void {
-    super.updated(changedProp);
-    if (changedProp.has("stateObj") && this.stateObj) {
-      const oldStateObj = changedProp.get("stateObj") as HassEntity | undefined;
-
-      if (!oldStateObj || this.stateObj.state !== oldStateObj.state) {
-        this._currentMode = this._getCurrentMode(this.stateObj);
-      }
+  protected willUpdate(changedProp: PropertyValues): void {
+    super.willUpdate(changedProp);
+    if (changedProp.has("stateObj")) {
+      this._currentMode = this._getCurrentMode(this.stateObj);
     }
   }
 
@@ -50,53 +45,59 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
     );
   }
 
-  private async _valueChanged(ev: CustomEvent) {
-    const mode = (ev.detail as any).value as AlarmMode;
-
-    const { state: modeState, service } = ALARM_MODES[mode];
-
-    if (modeState === this.stateObj.state) return;
-
-    // Force ha-control-select to previous mode because we don't known if the service call will succeed due to code check
-    this._currentMode = mode;
-    await this.requestUpdate("_currentMode");
-    this._currentMode = this._getCurrentMode(this.stateObj!);
+  private async _setMode(mode: AlarmMode) {
+    const { service } = ALARM_MODES[mode];
 
     let code: string | undefined;
 
     if (
       (mode !== "disarmed" &&
-        this.stateObj.attributes.code_arm_required &&
-        this.stateObj.attributes.code_format) ||
-      (mode === "disarmed" && this.stateObj.attributes.code_format)
+        this.stateObj!.attributes.code_arm_required &&
+        this.stateObj!.attributes.code_format) ||
+      (mode === "disarmed" && this.stateObj!.attributes.code_format)
     ) {
       const disarm = mode === "disarmed";
 
       const response = await showEnterCodeDialogDialog(this, {
-        codeFormat: this.stateObj.attributes.code_format,
-        title: this.hass.localize(
+        codeFormat: this.stateObj!.attributes.code_format,
+        title: this.hass!.localize(
           `ui.dialogs.more_info_control.alarm_control_panel.${
             disarm ? "disarm_title" : "arm_title"
           }`
         ),
-        submitText: this.hass.localize(
+        submitText: this.hass!.localize(
           `ui.dialogs.more_info_control.alarm_control_panel.${
             disarm ? "disarm_action" : "arm_action"
           }`
         ),
       });
-      if (!response) {
-        return;
+      if (response == null) {
+        throw new Error("cancel");
       }
       code = response;
     }
 
-    await this.hass.callService("alarm_control_panel", service, {
+    await this.hass!.callService("alarm_control_panel", service, {
       entity_id: this.stateObj!.entity_id,
       code,
     });
   }
 
+  private async _valueChanged(ev: CustomEvent) {
+    const mode = (ev.detail as any).value as AlarmMode;
+
+    if (ALARM_MODES[mode].state === this.stateObj!.state) return;
+
+    const oldMode = this._getCurrentMode(this.stateObj!);
+    this._currentMode = mode;
+
+    try {
+      await this._setMode(mode);
+    } catch (err) {
+      this._currentMode = oldMode;
+    }
+  }
+
   protected render() {
     const color = stateColorCss(this.stateObj);
 
@@ -116,16 +117,14 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
         .options=${options}
         .value=${this._currentMode}
         @value-changed=${this._valueChanged}
-        .label=${computeAttributeNameDisplay(
-          this.hass.localize,
-          this.stateObj,
-          this.hass.entities,
-          "percentage"
+        .ariaLabel=${this.hass.localize(
+          "ui.dialogs.more_info_control.alarm_control_panel.modes_label"
         )}
         style=${styleMap({
           "--control-select-color": color,
           "--modes-count": modes.length.toString(),
         })}
+        .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
     `;
diff --git a/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts b/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts
index 54bc13b937..4762796e1b 100644
--- a/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts
+++ b/src/dialogs/more-info/components/fan/ha-more-info-fan-speed.ts
@@ -108,6 +108,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
           style=${styleMap({
             "--control-select-color": color,
           })}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
         >
         </ha-control-select>
       `;
@@ -116,9 +117,9 @@ export class HaMoreInfoFanSpeed extends LitElement {
     return html`
       <ha-control-slider
         vertical
-        .value=${this.value}
         min="0"
         max="100"
+        .value=${this.value}
         .step=${this.stateObj.attributes.percentage_step ?? 1}
         @value-changed=${this._valueChanged}
         .ariaLabel=${computeAttributeNameDisplay(
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
index 02ed0296cf..67951ab9bb 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
@@ -31,7 +31,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
           "ui.dialogs.more_info_control.alarm_control_panel.disarm_action"
         ),
       });
-      if (!response) {
+      if (response == null) {
         return;
       }
       code = response;
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 456abaebe7..8512a382e1 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -478,7 +478,7 @@ export class MoreInfoDialog extends LitElement {
 
         @media all and (max-width: 450px) {
           .child-view > * {
-            min-height: calc(100vh - 56px);
+            min-height: calc(100vh - var(--header-height));
           }
         }
 
diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts
index 858d0110bc..f789ad64a7 100644
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -90,7 +90,7 @@ export class MoreInfoInfo extends LitElement {
 
       @media all and (max-width: 450px) {
         .container {
-          min-height: calc(100vh - 56px);
+          min-height: calc(100vh - var(--header-height));
         }
       }
 
diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts
index 15b39e54e0..ccbb0b2533 100644
--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/src/dialogs/notifications/notification-drawer.ts
@@ -152,7 +152,6 @@ export class HuiNotificationDrawer extends LitElement {
       --mdc-theme-primary: var(--primary-background-color);
       border-bottom: 1px solid var(--divider-color);
       display: block;
-      --header-bar-height: var(--header-height);
     }
 
     .notifications {
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 12b72f9b1d..b9c53375d0 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -755,6 +755,9 @@ export class QuickBar extends LitElement {
       haStyleScrollbar,
       haStyleDialog,
       css`
+        mwc-list {
+          --mdc-list-vertical-padding: 0;
+        }
         .heading {
           display: flex;
           align-items: center;
diff --git a/src/external_app/external_app_entrypoint.ts b/src/external_app/external_app_entrypoint.ts
index 0f059a11ae..e39ca5b566 100644
--- a/src/external_app/external_app_entrypoint.ts
+++ b/src/external_app/external_app_entrypoint.ts
@@ -44,6 +44,22 @@ const handleExternalMessage = (
       success: true,
       result: null,
     });
+  } else if (msg.command === "sidebar/toggle") {
+    fireEvent(hassMainEl, "hass-toggle-menu");
+    bus.fireMessage({
+      id: msg.id,
+      type: "result",
+      success: true,
+      result: null,
+    });
+  } else if (msg.command === "sidebar/show") {
+    fireEvent(hassMainEl, "hass-toggle-menu", { open: true });
+    bus.fireMessage({
+      id: msg.id,
+      type: "result",
+      success: true,
+      result: null,
+    });
   } else {
     return false;
   }
diff --git a/src/external_app/external_messaging.ts b/src/external_app/external_messaging.ts
index 87663cc9d5..3cc58ffcee 100644
--- a/src/external_app/external_messaging.ts
+++ b/src/external_app/external_messaging.ts
@@ -121,9 +121,23 @@ interface EMIncomingMessageShowNotifications {
   command: "notifications/show";
 }
 
+interface EMIncomingMessageToggleSidebar {
+  id: number;
+  type: "command";
+  command: "sidebar/toggle";
+}
+
+interface EMIncomingMessageShowSidebar {
+  id: number;
+  type: "command";
+  command: "sidebar/show";
+}
+
 export type EMIncomingMessageCommands =
   | EMIncomingMessageRestart
-  | EMIncomingMessageShowNotifications;
+  | EMIncomingMessageShowNotifications
+  | EMIncomingMessageToggleSidebar
+  | EMIncomingMessageShowSidebar;
 
 type EMIncomingMessage =
   | EMMessageResultSuccess
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 23e4617b36..32e9503956 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -19,12 +19,13 @@ import "./partial-panel-resolver";
 declare global {
   // for fire event
   interface HASSDomEvents {
-    "hass-toggle-menu": undefined;
+    "hass-toggle-menu": undefined | { open?: boolean };
     "hass-edit-sidebar": EditSideBarEvent;
     "hass-show-notifications": undefined;
   }
   interface HTMLElementEventMap {
     "hass-edit-sidebar": HASSDomEvent<EditSideBarEvent>;
+    "hass-toggle-menu": HASSDomEvent<HASSDomEvents["hass-toggle-menu"]>;
   }
 }
 
@@ -107,7 +108,7 @@ export class HomeAssistantMain extends LitElement {
       }
     );
 
-    this.addEventListener("hass-toggle-menu", () => {
+    this.addEventListener("hass-toggle-menu", (ev) => {
       if (this._sidebarEditMode) {
         return;
       }
@@ -118,10 +119,16 @@ export class HomeAssistantMain extends LitElement {
         return;
       }
       if (this._sidebarNarrow) {
-        this._drawerOpen = !this._drawerOpen;
+        this._drawerOpen = ev.detail?.open ?? !this._drawerOpen;
       } else {
         fireEvent(this, "hass-dock-sidebar", {
-          dock: this.hass.dockedSidebar === "auto" ? "docked" : "auto",
+          dock: ev.detail?.open
+            ? "docked"
+            : ev.detail?.open === false
+            ? "auto"
+            : this.hass.dockedSidebar === "auto"
+            ? "docked"
+            : "auto",
         });
       }
     });
diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts
index 682bb01f7c..8ff9e0da71 100644
--- a/src/panels/config/automation/ha-automation-trace.ts
+++ b/src/panels/config/automation/ha-automation-trace.ts
@@ -520,7 +520,7 @@ export class HaAutomationTrace extends LitElement {
         }
 
         .main {
-          height: calc(100% - 56px);
+          height: calc(100% - var(--header-height));
           display: flex;
           background-color: var(--card-background-color);
           direction: ltr;
diff --git a/src/panels/config/script/ha-script-trace.ts b/src/panels/config/script/ha-script-trace.ts
index c8082dace5..5f7f1980b2 100644
--- a/src/panels/config/script/ha-script-trace.ts
+++ b/src/panels/config/script/ha-script-trace.ts
@@ -508,7 +508,7 @@ export class HaScriptTrace extends LitElement {
         }
 
         .main {
-          height: calc(100% - 56px);
+          height: calc(100% - var(--header-height));
           display: flex;
           background-color: var(--card-background-color);
         }
diff --git a/src/panels/lovelace/tile-features/hui-alarm-modes-tile-feature.ts b/src/panels/lovelace/tile-features/hui-alarm-modes-tile-feature.ts
index 350af66ff1..3fee95942b 100644
--- a/src/panels/lovelace/tile-features/hui-alarm-modes-tile-feature.ts
+++ b/src/panels/lovelace/tile-features/hui-alarm-modes-tile-feature.ts
@@ -1,23 +1,23 @@
 import { mdiShieldOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import "../../../components/ha-control-slider";
-import "../../../components/ha-control-button";
-import "../../../components/ha-control-button-group";
 import {
   AlarmControlPanelEntity,
   AlarmMode,
   ALARM_MODES,
 } from "../../../data/alarm_control_panel";
+import { UNAVAILABLE } from "../../../data/entity";
 import { showEnterCodeDialogDialog } from "../../../dialogs/more-info/components/alarm_control_panel/show-enter-code-dialog";
 import { HomeAssistant } from "../../../types";
 import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
@@ -67,14 +67,10 @@ class HuiAlarmModeTileFeature
     this._config = config;
   }
 
-  protected updated(changedProp: Map<string | number | symbol, unknown>): void {
-    super.updated(changedProp);
+  protected willUpdate(changedProp: PropertyValues): void {
+    super.willUpdate(changedProp);
     if (changedProp.has("stateObj") && this.stateObj) {
-      const oldStateObj = changedProp.get("stateObj") as HassEntity | undefined;
-
-      if (!oldStateObj || this.stateObj.state !== oldStateObj.state) {
-        this._currentMode = this._getCurrentMode(this.stateObj);
-      }
+      this._currentMode = this._getCurrentMode(this.stateObj);
     }
   }
 
@@ -108,12 +104,14 @@ class HuiAlarmModeTileFeature
 
     if (ALARM_MODES[mode].state === this.stateObj!.state) return;
 
-    // Force ha-control-select to previous mode because we don't known if the service call will succeed due to code check
+    const oldMode = this._getCurrentMode(this.stateObj!);
     this._currentMode = mode;
-    await this.requestUpdate("_currentMode");
-    this._currentMode = this._getCurrentMode(this.stateObj!);
 
-    this._setMode(mode);
+    try {
+      await this._setMode(mode);
+    } catch (err) {
+      this._currentMode = oldMode;
+    }
   }
 
   private async _disarm() {
@@ -146,13 +144,13 @@ class HuiAlarmModeTileFeature
           }`
         ),
       });
-      if (!response) {
-        return;
+      if (response == null) {
+        throw new Error("cancel");
       }
       code = response;
     }
 
-    this.hass!.callService("alarm_control_panel", service, {
+    await this.hass!.callService("alarm_control_panel", service, {
       entity_id: this.stateObj!.entity_id,
       code,
     });
@@ -201,16 +199,14 @@ class HuiAlarmModeTileFeature
           .value=${this._currentMode}
           @value-changed=${this._valueChanged}
           hide-label
-          .label=${computeAttributeNameDisplay(
-            this.hass.localize,
-            this.stateObj,
-            this.hass.entities,
-            "percentage"
+          .ariaLabel=${this.hass.localize(
+            "ui.dialogs.more_info_control.alarm_control_panel.modes_label"
           )}
           style=${styleMap({
             "--control-select-color": color,
             "--modes-count": modes.length.toString(),
           })}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
       </div>
diff --git a/src/panels/lovelace/tile-features/hui-fan-speed-tile-feature.ts b/src/panels/lovelace/tile-features/hui-fan-speed-tile-feature.ts
index 5a67ea5bf1..1cca802015 100644
--- a/src/panels/lovelace/tile-features/hui-fan-speed-tile-feature.ts
+++ b/src/panels/lovelace/tile-features/hui-fan-speed-tile-feature.ts
@@ -100,12 +100,13 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
             .value=${speed}
             @value-changed=${this._speedValueChanged}
             hide-label
-            .label=${computeAttributeNameDisplay(
+            .ariaLabel=${computeAttributeNameDisplay(
               this.hass.localize,
               this.stateObj,
               this.hass.entities,
               "percentage"
             )}
+            .disabled=${this.stateObj!.state === UNAVAILABLE}
           >
           </ha-control-select>
         </div>
@@ -124,14 +125,14 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
           min="0"
           max="100"
           .step=${this.stateObj.attributes.percentage_step ?? 1}
-          .disabled=${this.stateObj!.state === UNAVAILABLE}
           @value-changed=${this._valueChanged}
-          .label=${computeAttributeNameDisplay(
+          .ariaLabel=${computeAttributeNameDisplay(
             this.hass.localize,
             this.stateObj,
             this.hass.entities,
             "percentage"
           )}
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
         ></ha-control-slider>
       </div>
     `;
diff --git a/src/translations/en.json b/src/translations/en.json
index f72f6330e7..f3c01350f1 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -929,6 +929,7 @@
           }
         },
         "alarm_control_panel": {
+          "modes_label": "Modes",
           "modes": {
             "away": "Away",
             "home": "Home",
@@ -4463,7 +4464,7 @@
                   },
                   "alarm-modes": {
                     "label": "Alarm modes",
-                    "modes": "Modes",
+                    "modes": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes_label%]",
                     "modes_list": {
                       "away": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::away%]",
                       "home": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::home%]",
diff --git a/yarn.lock b/yarn.lock
index 1a9cf379bd..7441d01ce8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4505,14 +4505,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.56.0"
+"@typescript-eslint/eslint-plugin@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.57.0"
   dependencies:
     "@eslint-community/regexpp": ^4.4.0
-    "@typescript-eslint/scope-manager": 5.56.0
-    "@typescript-eslint/type-utils": 5.56.0
-    "@typescript-eslint/utils": 5.56.0
+    "@typescript-eslint/scope-manager": 5.57.0
+    "@typescript-eslint/type-utils": 5.57.0
+    "@typescript-eslint/utils": 5.57.0
     debug: ^4.3.4
     grapheme-splitter: ^1.0.4
     ignore: ^5.2.0
@@ -4525,43 +4525,43 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 2eed4a4ed8279950ad553252e8623e947ffdee39b0d677a13f6e4e2d863ea1cbc5d683ff189e55d0de6fd5a25afd72d3c3a9ab7ae417d5405a21ead907e1b154
+  checksum: be13aa74ee6f15f0ae67781c625d9dcf3ce8a3feca2b125eef0cfee850b7f9f0cec23fc56a729ef25926298fe3ea51603ebeee2b93fc9b73fce1410638707177
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/parser@npm:5.56.0"
+"@typescript-eslint/parser@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/parser@npm:5.57.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.56.0
-    "@typescript-eslint/types": 5.56.0
-    "@typescript-eslint/typescript-estree": 5.56.0
+    "@typescript-eslint/scope-manager": 5.57.0
+    "@typescript-eslint/types": 5.57.0
+    "@typescript-eslint/typescript-estree": 5.57.0
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: eb25490290bd5e22f9c42603dedc0d2d8ee845553e3cf48ea377bd5dc22440d3463f8b84be637b6a2b37cd9ea56b21e4e43007a0a69998948d9c8965c03fe1aa
+  checksum: b7e8345631911f721591ba970fea5c888f0f3bf2e2ea2dbc3e5b0dc345c0776b62b92c534edfde1379b4b182958a421f35ac26d84705fe6ae7dd37aa675d9493
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.56.0"
+"@typescript-eslint/scope-manager@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.57.0"
   dependencies:
-    "@typescript-eslint/types": 5.56.0
-    "@typescript-eslint/visitor-keys": 5.56.0
-  checksum: bacac255ee52148cee6622be2811c0d7e25419058b89f1a11f4c1303faef4535a0a1237549f9556ec1d7a297c640ce4357183a1a8465d72e1393b7d8fb43874b
+    "@typescript-eslint/types": 5.57.0
+    "@typescript-eslint/visitor-keys": 5.57.0
+  checksum: 4a851f23da2adbf6341b04c1e3f19fcb66415683f26805d3123725d18845bd4a150bd182de0a91279d5682f2568bb5dd831d4ad0bdb70f49d9ca7381cec4dd17
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/type-utils@npm:5.56.0"
+"@typescript-eslint/type-utils@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/type-utils@npm:5.57.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.56.0
-    "@typescript-eslint/utils": 5.56.0
+    "@typescript-eslint/typescript-estree": 5.57.0
+    "@typescript-eslint/utils": 5.57.0
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -4569,23 +4569,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3dd1fcfadad18790b900a3d90f6617904adb6b0e2bd1e1edb6ebf239e1399865ca9098647405385feb4252d8b2b4577883e6fd3ef8d00bdd521d6070972d486b
+  checksum: 649d000edabfe4e567b8a384d0012c56396e40ce2123a78857d4b8da6bf2288627dc355745bd7d4a2877d4cc8a26e1d1dbfc422e6382ac3d3ab431b92eb5b852
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/types@npm:5.56.0"
-  checksum: 82ca11553bbb1bbfcaf7e7760b03c0d898940238dc002552c21af3e58f7d482c64c3c6cf0666521aff2a1e7b4b58bb6e4d9a00b1e4998a16b5039f5d288d003a
+"@typescript-eslint/types@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/types@npm:5.57.0"
+  checksum: 79a100fb650965f63c01c20e6abd79ca0d2043c3a329b9fef89917d6b9ba3c0f946dca3f14f2975ee6349daadd6ce0e98fde3aafe4b710e5a27abe1adc590c85
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.56.0"
+"@typescript-eslint/typescript-estree@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.57.0"
   dependencies:
-    "@typescript-eslint/types": 5.56.0
-    "@typescript-eslint/visitor-keys": 5.56.0
+    "@typescript-eslint/types": 5.57.0
+    "@typescript-eslint/visitor-keys": 5.57.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -4594,35 +4594,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: ec3e85201786aa9adddba7cb834a9f330a7f55c729ee9ccf847dbdc2f7437b760f3774152ccad6d0aa48d13fd78df766c880e3a7ca42e01a20aba0e1a1ed61c5
+  checksum: 648b88f88ea6cc293ec67b4c0f4f3c2bf733be7e0f2eee08aadbaec6939fd724a6c287decc336abbf67b9e366cc2c48f2e0e48d8302b533e783f798332a06e83
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/utils@npm:5.56.0"
+"@typescript-eslint/utils@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/utils@npm:5.57.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.56.0
-    "@typescript-eslint/types": 5.56.0
-    "@typescript-eslint/typescript-estree": 5.56.0
+    "@typescript-eslint/scope-manager": 5.57.0
+    "@typescript-eslint/types": 5.57.0
+    "@typescript-eslint/typescript-estree": 5.57.0
     eslint-scope: ^5.1.1
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 413e8d4bf7023ee5ba4f695b62e796a1f94930bb92fe5aa0cee58f63b9837116c23f618825a9c671f610e50f5630188b6059b4ed6b05a2a3336f01d8e977becb
+  checksum: 461258e1194d24c5e642c65ba1afd612712fa8e617ac85cfbbe3dde2557fe4abadedbce19a6954ae0cccbfb92b8a09f38d65a3eedca0394861a5d1c4c893c5ed
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.56.0":
-  version: 5.56.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.56.0"
+"@typescript-eslint/visitor-keys@npm:5.57.0":
+  version: 5.57.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.57.0"
   dependencies:
-    "@typescript-eslint/types": 5.56.0
+    "@typescript-eslint/types": 5.57.0
     eslint-visitor-keys: ^3.3.0
-  checksum: 568fda40134e153d7befb59b55698f7919ba780d2d3431d8745feabf2e0fbb8aa7a02173b3c467dd20a0f6594e5248a1f82bb25d6c37827716d77452e86cad29
+  checksum: 77d53f74648e48bf1c6313cd60568c2b1539157ac13945f26204a54beb156666c24f3d033dd0db8ed5d1d4595ee63c072732b17132e4488b46763bf8fdcefa49
   languageName: node
   linkType: hard
 
@@ -9492,8 +9492,8 @@ __metadata:
     "@types/sortablejs": 1.15.1
     "@types/tar": 6.1.4
     "@types/webspeechapi": 0.0.29
-    "@typescript-eslint/eslint-plugin": 5.56.0
-    "@typescript-eslint/parser": 5.56.0
+    "@typescript-eslint/eslint-plugin": 5.57.0
+    "@typescript-eslint/parser": 5.57.0
     "@vaadin/combo-box": 23.3.9
     "@vaadin/vaadin-themable-mixin": 23.3.9
     "@vibrant/color": 3.2.1-alpha.1