diff --git a/src/panels/config/backup/ha-config-backup-details.ts b/src/panels/config/backup/ha-config-backup-details.ts
index 5c8f2ea510..158573bb88 100644
--- a/src/panels/config/backup/ha-config-backup-details.ts
+++ b/src/panels/config/backup/ha-config-backup-details.ts
@@ -142,31 +142,38 @@ class HaConfigBackupDetails extends LitElement {
                       )}
                     </div>
                     <div class="card-content">
-                      <ha-md-list>
+                      <ha-md-list class="summary">
                         <ha-md-list-item>
                           <span slot="headline">
-                            ${bytesToString(this._backup.size)}
-                          </span>
-                          <span slot="supporting-text">
                             ${this.hass.localize(
                               "ui.panel.config.backup.details.summary.size"
                             )}
                           </span>
+                          <span slot="supporting-text">
+                            ${bytesToString(this._backup.size)}
+                          </span>
                         </ha-md-list-item>
                         <ha-md-list-item>
-                          ${formatDateTime(
-                            new Date(this._backup.date),
-                            this.hass.locale,
-                            this.hass.config
-                          )}
-                          <span slot="supporting-text">
+                          <span slot="headline">
                             ${this.hass.localize(
                               "ui.panel.config.backup.details.summary.created"
                             )}
                           </span>
+                          <span slot="supporting-text">
+                            ${formatDateTime(
+                              new Date(this._backup.date),
+                              this.hass.locale,
+                              this.hass.config
+                            )}
+                          </span>
                         </ha-md-list-item>
                         <ha-md-list-item>
                           <span slot="headline">
+                            ${this.hass.localize(
+                              "ui.panel.config.backup.details.summary.protection"
+                            )}
+                          </span>
+                          <span slot="supporting-text">
                             ${this._backup.protected
                               ? this.hass.localize(
                                   "ui.panel.config.backup.details.summary.protected_encrypted_aes_128"
@@ -175,11 +182,6 @@ class HaConfigBackupDetails extends LitElement {
                                   "ui.panel.config.backup.details.summary.protected_not_encrypted"
                                 )}
                           </span>
-                          <span slot="supporting-text">
-                            ${this.hass.localize(
-                              "ui.panel.config.backup.details.summary.protected"
-                            )}
-                          </span>
                         </ha-md-list-item>
                       </ha-md-list>
                     </div>
@@ -433,6 +435,13 @@ class HaConfigBackupDetails extends LitElement {
       --mdc-icon-size: 48px;
       color: var(--primary-text-color);
     }
+    ha-md-list.summary ha-md-list-item {
+      --md-list-item-supporting-text-size: 1rem;
+      --md-list-item-label-text-size: 0.875rem;
+
+      --md-list-item-label-text-color: var(--secondary-text-color);
+      --md-list-item-supporting-text-color: var(--primary-text-color);
+    }
     .warning {
       color: var(--error-color);
     }
diff --git a/src/translations/en.json b/src/translations/en.json
index ababc5e566..06b7954e62 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2600,7 +2600,7 @@
               "title": "Backup",
               "size": "Size",
               "created": "Created",
-              "protected": "Protected",
+              "protection": "Protection",
               "protected_encrypted_aes_128": "Encrypted AES-128",
               "protected_not_encrypted": "Not encrypted"
             },