diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts
index ba1da0e6a9c4..21530a8a4cfc 100644
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -129,6 +129,9 @@ export class HaEntityToggle extends LitElement {
     } else if (stateDomain === "cover") {
       serviceDomain = "cover";
       service = turnOn ? "open_cover" : "close_cover";
+    } else if (stateDomain === "valve") {
+      serviceDomain = "valve";
+      service = turnOn ? "open_valve" : "close_valve";
     } else if (stateDomain === "group") {
       serviceDomain = "homeassistant";
       service = turnOn ? "turn_on" : "turn_off";
diff --git a/src/panels/lovelace/entity-rows/hui-valve-entity-row.ts b/src/panels/lovelace/entity-rows/hui-valve-entity-row.ts
index 1d836e2ddb45..16e770b30c4e 100644
--- a/src/panels/lovelace/entity-rows/hui-valve-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-valve-entity-row.ts
@@ -1,14 +1,7 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  nothing,
-} from "lit";
+import { LitElement, PropertyValues, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-valve-controls";
-import { ValveEntity } from "../../../data/valve";
+import { isUnavailableState } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
@@ -37,7 +30,7 @@ class HuiValveEntityRow extends LitElement implements LovelaceRow {
       return nothing;
     }
 
-    const stateObj = this.hass.states[this._config.entity] as ValveEntity;
+    const stateObj = this.hass.states[this._config.entity];
 
     if (!stateObj) {
       return html`
@@ -47,23 +40,32 @@ class HuiValveEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
+    const showToggle =
+      stateObj.state === "open" ||
+      stateObj.state === "closed" ||
+      isUnavailableState(stateObj.state);
+
     return html`
-      <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <ha-valve-controls
-          .hass=${this.hass}
-          .stateObj=${stateObj}
-        ></ha-valve-controls>
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+        .catchInteraction=${!showToggle}
+      >
+        ${showToggle
+          ? html`
+              <ha-entity-toggle
+                .hass=${this.hass}
+                .stateObj=${stateObj}
+              ></ha-entity-toggle>
+            `
+          : html`
+              <div class="text-content">
+                ${this.hass.formatEntityState(stateObj)}
+              </div>
+            `}
       </hui-generic-entity-row>
     `;
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-valve-controls {
-        margin-right: -0.57em;
-      }
-    `;
-  }
 }
 
 declare global {