diff --git a/src/panels/config/backup/components/config/ha-backup-config-agents.ts b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
index f808d3fe99..686d6bd0a5 100644
--- a/src/panels/config/backup/components/config/ha-backup-config-agents.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-agents.ts
@@ -31,7 +31,7 @@ const DEFAULT_AGENTS = [];
 class HaBackupConfigAgents extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public cloudStatus!: CloudStatus;
+  @property({ attribute: false }) public cloudStatus?: CloudStatus;
 
   @property({ attribute: false }) public agents: BackupAgent[] = [];
 
@@ -48,7 +48,10 @@ class HaBackupConfigAgents extends LitElement {
 
   private _description(agentId: string) {
     if (agentId === CLOUD_AGENT) {
-      if (this.cloudStatus.logged_in && !this.cloudStatus.active_subscription) {
+      if (
+        this.cloudStatus?.logged_in &&
+        !this.cloudStatus.active_subscription
+      ) {
         return this.hass.localize(
           "ui.panel.config.backup.agents.cloud_agent_no_subcription"
         );
@@ -106,17 +109,17 @@ class HaBackupConfigAgents extends LitElement {
   }
 
   private _availableAgents = memoizeOne(
-    (agents: BackupAgent[], cloudStatus: CloudStatus) =>
+    (agents: BackupAgent[], cloudStatus?: CloudStatus) =>
       agents.filter(
-        (agent) => agent.agent_id !== CLOUD_AGENT || cloudStatus.logged_in
+        (agent) => agent.agent_id !== CLOUD_AGENT || cloudStatus?.logged_in
       )
   );
 
   private _unavailableAgents = memoizeOne(
     (
       agents: BackupAgent[],
-      cloudStatus: CloudStatus,
-      selectedAgentIds: string[]
+      selectedAgentIds: string[],
+      cloudStatus?: CloudStatus
     ) => {
       const availableAgentIds = this._availableAgents(agents, cloudStatus).map(
         (agent) => agent.agent_id
@@ -167,8 +170,8 @@ class HaBackupConfigAgents extends LitElement {
     );
     const unavailableAgents = this._unavailableAgents(
       this.agents,
-      this.cloudStatus,
-      this._value
+      this._value,
+      this.cloudStatus
     );
 
     const allAgents = [...availableAgents, ...unavailableAgents];
@@ -187,7 +190,7 @@ class HaBackupConfigAgents extends LitElement {
                 const description = this._description(agentId);
                 const noCloudSubscription =
                   agentId === CLOUD_AGENT &&
-                  this.cloudStatus.logged_in &&
+                  this.cloudStatus?.logged_in &&
                   !this.cloudStatus.active_subscription;
 
                 return html`
diff --git a/src/panels/config/backup/ha-config-backup-settings.ts b/src/panels/config/backup/ha-config-backup-settings.ts
index 422f96d69c..c7e0bf0f28 100644
--- a/src/panels/config/backup/ha-config-backup-settings.ts
+++ b/src/panels/config/backup/ha-config-backup-settings.ts
@@ -41,7 +41,7 @@ import { brandsUrl } from "../../../util/brands-url";
 class HaConfigBackupSettings extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public cloudStatus!: CloudStatus;
+  @property({ attribute: false }) public cloudStatus?: CloudStatus;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -244,7 +244,7 @@ class HaConfigBackupSettings extends LitElement {
                   `
                 : nothing}
             </div>
-            ${!this.cloudStatus.logged_in
+            ${!this.cloudStatus?.logged_in
               ? html`<ha-card class="cloud-info">
                   <div class="cloud-header">
                     <img
@@ -316,7 +316,7 @@ class HaConfigBackupSettings extends LitElement {
             </div>
           </ha-card>
           ${supervisor
-            ? html` <ha-card>
+            ? html`<ha-card>
                 <div class="card-header">
                   ${this.hass.localize(
                     "ui.panel.config.backup.settings.addon_update_backup.title"