diff --git a/src/index.js b/src/index.js
index 07a780c..ea1596d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -301,9 +301,9 @@ class BannerCard extends LitElement {
     const htmlContent = this.renderValue(
       { ...data, value, unit, click: action },
       () => html`
-        <mwc-button ?dense=${true} @click=${action}>
+        <ha-button ?dense=${true} @click=${action}>
           ${value} ${unit}
-        </mwc-button>
+        </ha-button>
       `
     );
     return html`
@@ -338,16 +338,19 @@ class BannerCard extends LitElement {
               icon="mdi:skip-previous"
               role="button"
               @click=${this._service(domain, "media_previous_track", entity)}
+              ><ha-icon icon="mdi:skip-previous"></ha-icon
             ></ha-icon-button>
             <ha-icon-button
               icon="${isPlaying ? "mdi:stop" : "mdi:play"}"
               role="button"
               @click=${this._service(domain, action, entity)}
+              ><ha-icon icon="${isPlaying ? "mdi:stop" : "mdi:play"}"></ha-icon
             ></ha-icon-button>
             <ha-icon-button
               icon="mdi:skip-next"
               role="button"
               @click=${this._service(domain, "media_next_track", entity)}
+              ><ha-icon icon="mdi:skip-next"></ha-icon
             ></ha-icon-button>
           </div>
         </div>
@@ -381,12 +384,12 @@ class BannerCard extends LitElement {
       <div class="entity-state" style="${this.grid(size)}">
         ${entityName(name, onClick)}
         <span class="entity-value">
-          <mwc-switch
+          <ha-switch
             style="--mdc-theme-secondary: ${color};"
             ?checked=${state === "on"}
             @click=${this._service(domain, "toggle", entity)}
           >
-          </mwc-switch>
+          </ha-switch>
         </span>
       </div>
     `;
@@ -404,17 +407,20 @@ class BannerCard extends LitElement {
             icon="hass:arrow-up"
             role="button"
             @click=${this._service("cover", "open_cover", entity)}
+            ><ha-icon ?disabled=${isopen} icon="hass:arrow-up"></ha-icon
           ></ha-icon-button>
           <ha-icon-button
             icon="hass:stop"
             role="button"
             @click=${this._service("cover", "stop_cover", entity)}
+            ><ha-icon icon="hass:stop"></ha-icon
           ></ha-icon-button>
           <ha-icon-button
             ?disabled=${isclosed}
             icon="hass:arrow-down"
             role="button"
             @click=${this._service("cover", "close_cover", entity)}
+            ><ha-icon ?disabled=${isclosed} icon="hass:arrow-down"></ha-icon
           ></ha-icon-button>
         </span>
       </div>
diff --git a/src/styles.js b/src/styles.js
index 275db38..ef0dece 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -130,7 +130,7 @@ export default css`
     width: 90%;
   }
 
-  .entity-value ha-icon {
+  .entity-value ha-icon:not([disabled]) {
     color: white;
   }