diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index 99fa0a443d..d5bf01ae11 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -3,8 +3,8 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import "../../../components/ha-list-item";
-import "../../../components/ha-select";
+import "../../../components/ha-md-select";
+import "../../../components/ha-md-select-option";
 import { UNAVAILABLE } from "../../../data/entity";
 import { forwardHaptic } from "../../../data/haptics";
 import type { InputSelectEntity } from "../../../data/input_select";
@@ -57,25 +57,26 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         .config=${this._config}
         hide-name
       >
-        <ha-select
+        <ha-md-select
           .label=${this._config.name || computeStateName(stateObj)}
           .value=${stateObj.state}
-          .options=${stateObj.attributes.options}
           .disabled=${
             stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
           }
           naturalMenuWidth
-          @selected=${this._selectedChanged}
+          @change=${this._selectedChanged}
           @click=${stopPropagation}
           @closed=${stopPropagation}
         >
           ${stateObj.attributes.options
             ? stateObj.attributes.options.map(
                 (option) =>
-                  html`<ha-list-item .value=${option}>${option}</ha-list-item>`
+                  html`<ha-md-select-option .value=${option}>
+                    <div slot="headline">${option}</div>
+                  </ha-md-select-option>`
               )
-            : ""}
-        </ha-select>
+            : nothing}
+        </ha-md-select>
       </hui-generic-entity-row>
     `;
   }
@@ -85,9 +86,8 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
       display: flex;
       align-items: center;
     }
-    ha-select {
+    ha-md-select {
       width: 100%;
-      --ha-select-min-width: 0;
     }
   `;
 
diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts
index d08fdccc1f..9f6cbbd112 100644
--- a/src/state-summary/state-card-input_select.ts
+++ b/src/state-summary/state-card-input_select.ts
@@ -1,11 +1,10 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/entity/state-badge";
-import "../components/ha-list-item";
-import "../components/ha-select";
+import "../components/ha-md-select";
+import "../components/ha-md-select-option";
 import { UNAVAILABLE } from "../data/entity";
 import type { InputSelectEntity } from "../data/input_select";
 import { setInputSelectOption } from "../data/input_select";
@@ -20,23 +19,21 @@ class StateCardInputSelect extends LitElement {
   protected render(): TemplateResult {
     return html`
       <state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge>
-      <ha-select
+      <ha-md-select
         .label=${computeStateName(this.stateObj)}
         .value=${this.stateObj.state}
-        .options=${this.stateObj.attributes.options}
         .disabled=${
           this.stateObj.state === UNAVAILABLE /* UNKNOWN state is allowed */
         }
-        naturalMenuWidth
-        fixedMenuPosition
-        @selected=${this._selectedOptionChanged}
-        @closed=${stopPropagation}
+        @change=${this._selectedOptionChanged}
       >
         ${this.stateObj.attributes.options.map(
           (option) =>
-            html`<ha-list-item .value=${option}>${option}</ha-list-item>`
+            html`<ha-md-select-option .value=${option}>
+              <div slot="headline">${option}</div>
+            </ha-md-select-option>`
         )}
-      </ha-select>
+      </ha-md-select>
     `;
   }
 
@@ -58,7 +55,7 @@ class StateCardInputSelect extends LitElement {
       margin-top: 10px;
     }
 
-    ha-select {
+    ha-md-select {
       width: 100%;
     }
   `;
diff --git a/src/state-summary/state-card-select.ts b/src/state-summary/state-card-select.ts
index 9027a17100..372cfb8c5d 100644
--- a/src/state-summary/state-card-select.ts
+++ b/src/state-summary/state-card-select.ts
@@ -1,11 +1,10 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/entity/state-badge";
-import "../components/ha-list-item";
-import "../components/ha-select";
+import "../components/ha-md-select";
+import "../components/ha-md-select-option";
 import { UNAVAILABLE } from "../data/entity";
 import type { SelectEntity } from "../data/select";
 import { setSelectOption } from "../data/select";
@@ -20,24 +19,22 @@ class StateCardSelect extends LitElement {
   protected render(): TemplateResult {
     return html`
       <state-badge .hass=${this.hass} .stateObj=${this.stateObj}></state-badge>
-      <ha-select
-        .value=${this.stateObj.state}
+      <ha-md-select
         .label=${computeStateName(this.stateObj)}
-        .options=${this.stateObj.attributes.options}
+        .value=${this.stateObj.state}
         .disabled=${this.stateObj.state === UNAVAILABLE}
-        naturalMenuWidth
-        fixedMenuPosition
-        @selected=${this._selectedOptionChanged}
-        @closed=${stopPropagation}
+        @change=${this._selectedOptionChanged}
       >
         ${this.stateObj.attributes.options.map(
           (option) => html`
-            <ha-list-item .value=${option}>
-              ${this.hass.formatEntityState(this.stateObj, option)}
-            </ha-list-item>
+            <ha-md-select-option .value=${option}>
+              <div slot="headline">
+                ${this.hass.formatEntityState(this.stateObj, option)}
+              </div>
+            </ha-md-select-option>
           `
         )}
-      </ha-select>
+      </ha-md-select>
     `;
   }
 
@@ -59,7 +56,7 @@ class StateCardSelect extends LitElement {
       margin-top: 10px;
     }
 
-    ha-select {
+    ha-md-select {
       width: 100%;
     }
   `;