diff --git a/src/shared/form/mushroom-select.ts b/src/shared/form/mushroom-select.ts
index 1fe8adbf..49ef466e 100644
--- a/src/shared/form/mushroom-select.ts
+++ b/src/shared/form/mushroom-select.ts
@@ -2,7 +2,10 @@ import { SelectBase } from "@material/mwc-select/mwc-select-base";
 import { styles } from "@material/mwc-select/mwc-select.css";
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import {classMap} from 'lit/directives/class-map.js';
 import { debounce, nextRender } from "../../ha";
+import './mushroom-select-menu.js'
+
 
 @customElement("mushroom-select")
 export class MushroomSelect extends SelectBase {
@@ -17,6 +20,27 @@ export class MushroomSelect extends SelectBase {
         return html`<span class="mdc-select__icon"><slot name="icon"></slot></span>`;
     }
 
+    override renderMenu() {
+        const classes = this.getMenuClasses();
+        // swap out mwc-menu for mushroom-select-menu. Bindings and template taken from source.
+        return html`
+          <mushroom-select-menu
+            innerRole="listbox"
+            wrapFocus
+            class=" ${classMap(classes)}"
+            activatable
+            .fullwidth=${this.fixedMenuPosition ? false : !this.naturalMenuWidth}
+            .open=${this.menuOpen}
+            .anchor=${this.anchorElement}
+            @selected=${this.onSelected}
+            @opened=${this.onOpened}
+            @closed=${this.onClosed}
+            @items-updated=${this.onItemsUpdated}
+            @keydown=${this.handleTypeahead}>
+          ${this.renderMenuContent()}
+        </mushroom-select-menu>`;
+    }
+
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener("translations-updated", this._translationsUpdated);
@@ -47,3 +71,4 @@ declare global {
         "mushroom-select": MushroomSelect;
     }
 }
+