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