diff --git a/src/panels/config/backup/ha-config-backup-location.ts b/src/panels/config/backup/ha-config-backup-location.ts
index 9968f0bb89ea..1c92b69bfd57 100644
--- a/src/panels/config/backup/ha-config-backup-location.ts
+++ b/src/panels/config/backup/ha-config-backup-location.ts
@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
+import "../../../components/ha-switch";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
@@ -11,12 +12,14 @@ import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
 import type { BackupAgent, BackupConfig } from "../../../data/backup";
 import {
+  CLOUD_AGENT,
   computeBackupAgentName,
   fetchBackupAgentsInfo,
 } from "../../../data/backup";
 import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "./components/ha-backup-data-picker";
+import { showConfirmationDialog } from "../../lovelace/custom-card-helpers";
 
 @customElement("ha-config-backup-location")
 class HaConfigBackupDetails extends LitElement {
@@ -34,6 +37,9 @@ class HaConfigBackupDetails extends LitElement {
 
   @state() private _error?: string;
 
+  // Todo update with api call
+  @state() private _encrypted = true;
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
@@ -49,6 +55,8 @@ class HaConfigBackupDetails extends LitElement {
       return nothing;
     }
 
+    const encrypted = this._encrypted;
+
     return html`
       <hass-subpage
         back-path="/config/backup/settings"
@@ -88,6 +96,66 @@ class HaConfigBackupDetails extends LitElement {
                         "ui.panel.config.backup.location.encryption.title"
                       )}
                     </div>
+                    <div class="card-content">
+                      <ha-md-list>
+                        ${CLOUD_AGENT === this.agentId
+                          ? html`
+                              <ha-md-list-item>
+                                <span slot="headline">
+                                  ${this.hass.localize(
+                                    "ui.panel.config.backup.location.encryption.encryption"
+                                  )}
+                                </span>
+                                <span slot="supporting-text">
+                                  ${this.hass.localize(
+                                    `ui.panel.config.backup.location.encryption.cloud_forced_encryption`
+                                  )}
+                                </span>
+                                <ha-switch
+                                  slot="end"
+                                  checked
+                                  disabled
+                                ></ha-switch>
+                              </ha-md-list-item>
+                            `
+                          : html`
+                              <ha-md-list-item>
+                                <span slot="headline">
+                                  ${this.hass.localize(
+                                    "ui.panel.config.backup.location.encryption.encryption"
+                                  )}
+                                </span>
+                                <span slot="supporting-text">
+                                  ${this.hass.localize(
+                                    `ui.panel.config.backup.location.encryption.encryption_description_${encrypted ? "on" : "off"}`
+                                  )}
+                                </span>
+                                ${encrypted
+                                  ? html`
+                                      <ha-button
+                                        slot="end"
+                                        @click=${this._turnOffEncryption}
+                                        destructive
+                                      >
+                                        ${this.hass.localize(
+                                          "ui.panel.config.backup.location.encryption.encryption_turn_off"
+                                        )}
+                                      </ha-button>
+                                    `
+                                  : html`
+                                      <ha-button
+                                        slot="end"
+                                        @click=${this._turnOnEncryption}
+                                      >
+                                        ${this.hass.localize(
+                                          "ui.panel.config.backup.location.encryption.encryption_turn_on"
+                                        )}
+                                      </ha-button>
+                                    `}
+                              </ha-md-list-item>
+                            `}
+                      </ha-md-list>
+                    </div>
                   </ha-card>
                 `}
         </div>
@@ -112,6 +180,31 @@ class HaConfigBackupDetails extends LitElement {
     }
   }
 
+  private _turnOnEncryption() {
+    this._encrypted = true;
+    // Todo call api
+  }
+
+  private async _turnOffEncryption() {
+    const response = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.backup.location.encryption.encryption_turn_off_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.backup.location.encryption.encryption_turn_off_confirm_text"
+      ),
+      confirmText: this.hass.localize(
+        "ui.panel.config.backup.location.encryption.encryption_turn_off_confirm_action"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+    if (response) {
+      this._encrypted = false;
+      // Todo call api
+    }
+  }
+
   static styles = css`
     .content {
       padding: 28px 20px 0;
diff --git a/src/translations/en.json b/src/translations/en.json
index ecaf419ea35c..787012987b54 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2673,7 +2673,16 @@
             "not_found_description": "Location matching ''{backupId}'' not found",
             "error": "Could not fetch location details",
             "encryption": {
-              "title": "Encryption"
+              "title": "Encryption",
+              "encryption": "Location encryption",
+              "encryption_description_on": "The backups stored in this location are encrypted.",
+              "encryption_description_off": "The backups stored in this location are unencrypted.",
+              "encryption_turn_on": "Turn on",
+              "encryption_turn_off": "Turn off",
+              "encryption_turn_off_confirm_title": "Turn encryption off?",
+              "encryption_turn_off_confirm_text": "All your next backups will not be encrypted on this system and network storager. Please keep your backups private and secure.",
+              "encryption_turn_off_confirm_action": "Turn encryption off",
+              "cloud_forced_encryption": "This backups are forced to be encrypted by Home Assistant Cloud."
             }
           }
         },