diff --git a/src/data/media-player.ts b/src/data/media-player.ts
index 95b5156c33..143b7e1bf0 100644
--- a/src/data/media-player.ts
+++ b/src/data/media-player.ts
@@ -292,9 +292,11 @@ export const computeMediaControls = (
           ? "hass:pause"
           : "hass:stop",
       action:
-        state === "playing" && !supportsFeature(stateObj, SUPPORT_PAUSE)
-          ? "media_stop"
-          : "media_play_pause",
+        state !== "playing"
+          ? "media_play"
+          : supportsFeature(stateObj, SUPPORT_PAUSE)
+          ? "media_pause"
+          : "media_stop",
     });
   }
 
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index cd53ba0f4b..c1fd6788d9 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -666,6 +666,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       ha-icon-button[action="media_play"],
       ha-icon-button[action="media_play_pause"],
+      ha-icon-button[action="media_pause"],
       ha-icon-button[action="media_stop"],
       ha-icon-button[action="turn_on"],
       ha-icon-button[action="turn_off"] {
@@ -743,6 +744,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       .narrow ha-icon-button[action="media_play"],
       .narrow ha-icon-button[action="media_play_pause"],
+      .narrow ha-icon-button[action="media_pause"],
       .narrow ha-icon-button[action="turn_on"] {
         --mdc-icon-button-size: 50px;
         --mdc-icon-size: 36px;
diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
index f252ea2b88..f92f5eadfe 100644
--- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
@@ -115,7 +115,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
         ? html`
             <ha-icon-button
               icon=${this._computeControlIcon(stateObj)}
-              @click=${this._playPause}
+              @click=${this._playPauseStop}
             ></ha-icon-button>
           `
         : ""}
@@ -256,8 +256,17 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     );
   }
 
-  private _playPause(): void {
-    this.hass!.callService("media_player", "media_play_pause", {
+  private _playPauseStop(): void {
+    const stateObj = this.hass!.states[this._config!.entity];
+
+    const service =
+      stateObj.state !== "playing"
+        ? "media_play"
+        : supportsFeature(stateObj, SUPPORT_PAUSE)
+        ? "media_pause"
+        : "media_stop";
+
+    this.hass!.callService("media_player", service, {
       entity_id: this._config!.entity,
     });
   }