diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index 22c48f291796..dfe7224b4a1a 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -15,6 +15,7 @@ import {
 } from "lit-element";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
+import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
@@ -108,12 +109,12 @@ class HassioHostInfo extends LitElement {
             ${this.hostInfo.version !== this.hostInfo.version_latest &&
             this.hostInfo.features.includes("hassos")
               ? html`
-                  <mwc-button
+                  <ha-progress-button
                     title="Update the host OS"
-                    label="Update"
                     @click=${this._osUpdate}
                   >
-                  </mwc-button>
+                    Update
+                  </ha-progress-button>
                 `
               : ""}
           </ha-settings-row>
@@ -141,24 +142,24 @@ class HassioHostInfo extends LitElement {
         <div class="card-actions">
           ${this.hostInfo.features.includes("reboot")
             ? html`
-                <mwc-button
+                <ha-progress-button
                   title="Reboot the host OS"
-                  label="Reboot"
                   class="warning"
                   @click=${this._hostReboot}
                 >
-                </mwc-button>
+                  Reboot
+                </ha-progress-button>
               `
             : ""}
           ${this.hostInfo.features.includes("shutdown")
             ? html`
-                <mwc-button
+                <ha-progress-button
                   title="Shutdown the host OS"
-                  label="Shutdown"
                   class="warning"
                   @click=${this._hostShutdown}
                 >
-                </mwc-button>
+                  Shutdown
+                </ha-progress-button>
               `
             : ""}
 
@@ -185,62 +186,6 @@ class HassioHostInfo extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        ha-card {
-          height: 100%;
-          justify-content: space-between;
-          flex-direction: column;
-          display: flex;
-        }
-        .card-actions {
-          height: 48px;
-          border-top: none;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        ha-settings-row {
-          padding: 0;
-          height: 54px;
-          width: 100%;
-        }
-        ha-settings-row[three-line] {
-          height: 74px;
-        }
-        ha-settings-row > span[slot="description"] {
-          white-space: normal;
-          color: var(--secondary-text-color);
-        }
-
-        .warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
-        ha-button-menu {
-          color: var(--secondary-text-color);
-          --mdc-menu-min-width: 200px;
-        }
-        @media (min-width: 563px) {
-          paper-listbox {
-            max-height: 150px;
-            overflow: auto;
-          }
-        }
-        paper-item {
-          cursor: pointer;
-          min-height: 35px;
-        }
-        mwc-list-item ha-svg-icon {
-          color: var(--secondary-text-color);
-        }
-      `,
-    ];
-  }
-
   protected firstUpdated(): void {
     this._loadData();
   }
@@ -281,7 +226,10 @@ class HassioHostInfo extends LitElement {
     }
   }
 
-  private async _hostReboot(): Promise<void> {
+  private async _hostReboot(ev: CustomEvent): Promise<void> {
+    const button = ev.target as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: "Reboot",
       text: "Are you sure you want to reboot the host?",
@@ -290,6 +238,7 @@ class HassioHostInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
@@ -302,9 +251,13 @@ class HassioHostInfo extends LitElement {
           typeof err === "object" ? err.body?.message || "Unkown error" : err,
       });
     }
+    button.progress = false;
   }
 
-  private async _hostShutdown(): Promise<void> {
+  private async _hostShutdown(ev: CustomEvent): Promise<void> {
+    const button = ev.target as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: "Shutdown",
       text: "Are you sure you want to shutdown the host?",
@@ -313,6 +266,7 @@ class HassioHostInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
@@ -325,9 +279,13 @@ class HassioHostInfo extends LitElement {
           typeof err === "object" ? err.body?.message || "Unkown error" : err,
       });
     }
+    button.progress = false;
   }
 
-  private async _osUpdate(): Promise<void> {
+  private async _osUpdate(ev: CustomEvent): Promise<void> {
+    const button = ev.target as any;
+    button.progress = true;
+
     const confirmed = await showConfirmationDialog(this, {
       title: "Update",
       text: "Are you sure you want to update the OS?",
@@ -336,6 +294,7 @@ class HassioHostInfo extends LitElement {
     });
 
     if (!confirmed) {
+      button.progress = false;
       return;
     }
 
@@ -348,6 +307,7 @@ class HassioHostInfo extends LitElement {
           typeof err === "object" ? err.body?.message || "Unkown error" : err,
       });
     }
+    button.progress = false;
   }
 
   private async _changeNetworkClicked(): Promise<void> {
@@ -396,6 +356,62 @@ class HassioHostInfo extends LitElement {
   private async _loadData(): Promise<void> {
     this._networkInfo = await fetchNetworkInfo(this.hass);
   }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        ha-card {
+          height: 100%;
+          justify-content: space-between;
+          flex-direction: column;
+          display: flex;
+        }
+        .card-actions {
+          height: 48px;
+          border-top: none;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        ha-settings-row {
+          padding: 0;
+          height: 54px;
+          width: 100%;
+        }
+        ha-settings-row[three-line] {
+          height: 74px;
+        }
+        ha-settings-row > span[slot="description"] {
+          white-space: normal;
+          color: var(--secondary-text-color);
+        }
+
+        .warning {
+          --mdc-theme-primary: var(--error-color);
+        }
+
+        ha-button-menu {
+          color: var(--secondary-text-color);
+          --mdc-menu-min-width: 200px;
+        }
+        @media (min-width: 563px) {
+          paper-listbox {
+            max-height: 150px;
+            overflow: auto;
+          }
+        }
+        paper-item {
+          cursor: pointer;
+          min-height: 35px;
+        }
+        mwc-list-item ha-svg-icon {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {