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..acb085dde0 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,5 +1,4 @@
-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";
@@ -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);
 
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/panels/lovelace/tile-features/hui-alarm-modes-tile-feature.ts b/src/panels/lovelace/tile-features/hui-alarm-modes-tile-feature.ts
index 350af66ff1..ce2e43b5f4 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,6 +1,6 @@
 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";
@@ -8,11 +8,11 @@ import { computeAttributeNameDisplay } from "../../../common/entity/compute_attr
 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,
@@ -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,
     });