diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index 5f90390161..922ec18a55 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -27,7 +27,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { contrast } from "../common/color/contrast";
 import { findEntities } from "../common/find-entites";
 import { LovelaceConfig } from "../../../data/lovelace";
-import { UNAVAILABLE } from "../../../data/entity";
+import { UNAVAILABLE, UNKNOWN } from "../../../data/entity";
 import {
   OFF_STATES,
   SUPPORT_PAUSE,
@@ -165,12 +165,17 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       width: `${this._cardHeight}px`,
     };
 
+    const isOffState = OFF_STATES.includes(stateObj.state);
+    const isUnavailable =
+      stateObj.state === UNAVAILABLE || stateObj.state === UNKNOWN;
+    const hasNoImage = !this._image;
+
     return html`
       <ha-card>
         <div
           class="background ${classMap({
-            "no-image": !this._image,
-            off: OFF_STATES.includes(stateObj.state),
+            "no-image": hasNoImage,
+            off: isOffState || isUnavailable,
           })}"
         >
           <div
@@ -182,7 +187,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
             style="background-color: ${this._backgroundColor}"
           ></div>
           <div class="image" style=${styleMap(imageStyle)}></div>
-          ${!this._image
+          ${hasNoImage
             ? ""
             : html`
                 <div
@@ -193,12 +198,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         </div>
         <div
           class="player ${classMap({
-            "no-image": !this._image,
+            "no-image": hasNoImage,
             narrow: this._narrow && !this._veryNarrow,
-            off: OFF_STATES.includes(stateObj.state),
+            off: isOffState || isUnavailable,
             "no-progress": !this._showProgressBar && !this._veryNarrow,
           })}"
-          style="color: ${this._foregroundColor}"
+          style=${styleMap({ color: this._foregroundColor! })}
         >
           <div class="top-info">
             <div class="icon-name">
@@ -216,101 +221,121 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
               ></paper-icon-button>
             </div>
           </div>
-          <div
-            class="title-controls"
-            style="padding-right: ${OFF_STATES.includes(stateObj.state)
-              ? 0
-              : this._cardHeight - 40}px"
-          >
-            ${OFF_STATES.includes(stateObj.state)
-              ? ""
-              : html`
-                  <div class="media-info">
-                    <div class="title">
-                      ${stateObj.attributes.media_title ||
-                        computeMediaDescription(stateObj)}
-                    </div>
-                    ${!stateObj.attributes.media_title
-                      ? ""
-                      : computeMediaDescription(stateObj)}
-                  </div>
-                `}
-            ${this._veryNarrow && !OFF_STATES.includes(stateObj.state)
-              ? ""
-              : html`
-                  <div class="controls">
-                    <div>
-                      ${(stateObj.state === "off" &&
-                        !supportsFeature(stateObj, SUPPORT_TURN_ON)) ||
-                      !OFF_STATES.includes(stateObj.state)
-                        ? ""
-                        : html`
-                            <paper-icon-button
-                              icon="hass:power"
-                              .action=${stateObj.state === "off"
-                                ? "turn_on"
-                                : "turn_off"}
-                              @click=${this._handleClick}
-                            ></paper-icon-button>
-                          `}
-                    </div>
-                    ${OFF_STATES.includes(stateObj.state)
-                      ? ""
-                      : html`
-                          <div class="playback-controls">
-                            ${!supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)
+          ${isUnavailable ||
+          (isOffState && !supportsFeature(stateObj, SUPPORT_TURN_ON))
+            ? ""
+            : html`
+                <div
+                  class="title-controls"
+                  style=${styleMap({
+                    paddingRight: isOffState
+                      ? "0"
+                      : `${this._cardHeight - 40}px`,
+                  })}
+                >
+                  ${isOffState
+                    ? ""
+                    : html`
+                        <div class="media-info">
+                          <div class="title">
+                            ${stateObj.attributes.media_title ||
+                              computeMediaDescription(stateObj)}
+                          </div>
+                          ${!stateObj.attributes.media_title
+                            ? ""
+                            : computeMediaDescription(stateObj)}
+                        </div>
+                      `}
+                  ${this._veryNarrow && !isOffState
+                    ? ""
+                    : html`
+                        <div class="controls">
+                          <div>
+                            ${(stateObj.state === "off" &&
+                              !supportsFeature(stateObj, SUPPORT_TURN_ON)) ||
+                            !isOffState
                               ? ""
                               : html`
                                   <paper-icon-button
-                                    icon="hass:skip-previous"
-                                    .action=${"media_previous_track"}
-                                    @click=${this._handleClick}
-                                  ></paper-icon-button>
-                                `}
-                            ${(stateObj.state !== "playing" &&
-                              !supportsFeature(stateObj, SUPPORTS_PLAY)) ||
-                            stateObj.state === UNAVAILABLE ||
-                            (stateObj.state === "playing" &&
-                              !supportsFeature(stateObj, SUPPORT_PAUSE) &&
-                              !supportsFeature(stateObj, SUPPORT_STOP))
-                              ? ""
-                              : html`
-                                  <paper-icon-button
-                                    class="playPauseButton"
-                                    .icon=${stateObj.state !== "playing"
-                                      ? "hass:play"
-                                      : supportsFeature(stateObj, SUPPORT_PAUSE)
-                                      ? "hass:pause"
-                                      : "hass:stop"}
-                                    .action=${"media_play_pause"}
-                                    @click=${this._handleClick}
-                                  ></paper-icon-button>
-                                `}
-                            ${!supportsFeature(stateObj, SUPPORT_NEXT_TRACK)
-                              ? ""
-                              : html`
-                                  <paper-icon-button
-                                    icon="hass:skip-next"
-                                    .action=${"media_next_track"}
+                                    icon="hass:power"
+                                    .action=${stateObj.state === "off"
+                                      ? "turn_on"
+                                      : "turn_off"}
                                     @click=${this._handleClick}
                                   ></paper-icon-button>
                                 `}
                           </div>
-                        `}
-                  </div>
-                `}
-          </div>
-          ${!this._showProgressBar
-            ? ""
-            : html`
-                <paper-progress
-                  .max="${stateObj.attributes.media_duration}"
-                  .value="${getCurrentProgress(stateObj)}"
-                  class="progress"
-                  style="--paper-progress-active-color: ${this
-                    ._foregroundColor || "var(--accent-color)"}"
-                  @click=${(e: MouseEvent) => this._handleSeek(e, stateObj)}
-                ></paper-progress>
+                          ${isOffState
+                            ? ""
+                            : html`
+                                <div class="playback-controls">
+                                  ${!supportsFeature(
+                                    stateObj,
+                                    SUPPORT_PREVIOUS_TRACK
+                                  )
+                                    ? ""
+                                    : html`
+                                        <paper-icon-button
+                                          icon="hass:skip-previous"
+                                          .action=${"media_previous_track"}
+                                          @click=${this._handleClick}
+                                        ></paper-icon-button>
+                                      `}
+                                  ${(stateObj.state !== "playing" &&
+                                    !supportsFeature(
+                                      stateObj,
+                                      SUPPORTS_PLAY
+                                    )) ||
+                                  stateObj.state === UNAVAILABLE ||
+                                  (stateObj.state === "playing" &&
+                                    !supportsFeature(stateObj, SUPPORT_PAUSE) &&
+                                    !supportsFeature(stateObj, SUPPORT_STOP))
+                                    ? ""
+                                    : html`
+                                        <paper-icon-button
+                                          class="playPauseButton"
+                                          .icon=${stateObj.state !== "playing"
+                                            ? "hass:play"
+                                            : supportsFeature(
+                                                stateObj,
+                                                SUPPORT_PAUSE
+                                              )
+                                            ? "hass:pause"
+                                            : "hass:stop"}
+                                          .action=${"media_play_pause"}
+                                          @click=${this._handleClick}
+                                        ></paper-icon-button>
+                                      `}
+                                  ${!supportsFeature(
+                                    stateObj,
+                                    SUPPORT_NEXT_TRACK
+                                  )
+                                    ? ""
+                                    : html`
+                                        <paper-icon-button
+                                          icon="hass:skip-next"
+                                          .action=${"media_next_track"}
+                                          @click=${this._handleClick}
+                                        ></paper-icon-button>
+                                      `}
+                                </div>
+                              `}
+                        </div>
+                      `}
+                </div>
+                ${!this._showProgressBar
+                  ? ""
+                  : html`
+                      <paper-progress
+                        .max="${stateObj.attributes.media_duration}"
+                        .value="${getCurrentProgress(stateObj)}"
+                        class="progress"
+                        style="--paper-progress-active-color: ${this
+                          ._foregroundColor || "var(--accent-color)"}"
+                        @click=${(e: MouseEvent) =>
+                          this._handleSeek(e, stateObj)}
+                      ></paper-progress>
+                    `}
               `}
         </div>
       </ha-card>
@@ -687,7 +712,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       .off.player,
       .narrow.player {
-        padding-bottom: 8px !important;
+        padding-bottom: 16px !important;
       }
 
       .narrow .controls,