diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts
index def2f3d9bc..c4b3a25f11 100644
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -24,6 +24,10 @@ const MANUAL_SCHEMA = [
   { name: "media_content_type", required: false, selector: { text: {} } },
 ] as const;
 
+const INCLUDE_DOMAINS = ["media_player"];
+
+const EMPTY_FORM = {};
+
 @customElement("ha-selector-media")
 export class HaMediaSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -84,7 +88,7 @@ export class HaMediaSelector extends LitElement {
       (stateObj &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
 
-    const hasAccept = this.selector.media?.accept?.length;
+    const hasAccept = this.selector?.media?.accept?.length;
 
     return html`
       ${hasAccept
@@ -100,7 +104,7 @@ export class HaMediaSelector extends LitElement {
               .disabled=${this.disabled}
               .helper=${this.helper}
               .required=${this.required}
-              include-domains='["media_player"]'
+              .includeDomains=${INCLUDE_DOMAINS}
               allow-custom-entity
               @value-changed=${this._entityChanged}
             ></ha-entity-picker>
@@ -114,7 +118,7 @@ export class HaMediaSelector extends LitElement {
             </ha-alert>
             <ha-form
               .hass=${this.hass}
-              .data=${this.value}
+              .data=${this.value || EMPTY_FORM}
               .schema=${MANUAL_SCHEMA}
               .computeLabel=${this._computeLabelCallback}
             ></ha-form>
@@ -122,63 +126,62 @@ export class HaMediaSelector extends LitElement {
         : html`
             <ha-card
               outlined
+              tabindex="0"
+              role="button"
+              aria-label=${!this.value?.media_content_id
+                ? this.hass.localize("ui.components.selectors.media.pick_media")
+                : this.value.metadata?.title || this.value.media_content_id}
               @click=${this._pickMedia}
+              @keydown=${this._handleKeyDown}
               class=${this.disabled || (!this.value?.entity_id && !hasAccept)
                 ? "disabled"
                 : ""}
             >
-              <div
-                class="thumbnail ${classMap({
-                  portrait:
-                    !!this.value?.metadata?.media_class &&
-                    MediaClassBrowserSettings[
-                      this.value.metadata.children_media_class ||
-                        this.value.metadata.media_class
-                    ].thumbnail_ratio === "portrait",
-                })}"
-              >
-                ${this.value?.metadata?.thumbnail
-                  ? html`
-                      <div
-                        class="${classMap({
-                          "centered-image":
-                            !!this.value.metadata.media_class &&
-                            ["app", "directory"].includes(
-                              this.value.metadata.media_class
-                            ),
-                        })}
-                        image"
-                        style=${this._thumbnailUrl
-                          ? `background-image: url(${this._thumbnailUrl});`
-                          : ""}
-                      ></div>
-                    `
-                  : html`
-                      <div class="icon-holder image">
-                        <ha-svg-icon
-                          class="folder"
-                          .path=${!this.value?.media_content_id
-                            ? mdiPlus
-                            : this.value?.metadata?.media_class
-                              ? MediaClassBrowserSettings[
-                                  this.value.metadata.media_class ===
-                                  "directory"
-                                    ? this.value.metadata
-                                        .children_media_class ||
-                                      this.value.metadata.media_class
-                                    : this.value.metadata.media_class
-                                ].icon
-                              : mdiPlayBox}
-                        ></ha-svg-icon>
-                      </div>
-                    `}
-              </div>
-              <div class="title">
-                ${!this.value?.media_content_id
-                  ? this.hass.localize(
-                      "ui.components.selectors.media.pick_media"
-                    )
-                  : this.value.metadata?.title || this.value.media_content_id}
+              <div class="content-container">
+                <div class="thumbnail">
+                  ${this.value?.metadata?.thumbnail
+                    ? html`
+                        <div
+                          class="${classMap({
+                            "centered-image":
+                              !!this.value.metadata.media_class &&
+                              ["app", "directory"].includes(
+                                this.value.metadata.media_class
+                              ),
+                          })}
+                          image"
+                          style=${this._thumbnailUrl
+                            ? `background-image: url(${this._thumbnailUrl});`
+                            : ""}
+                        ></div>
+                      `
+                    : html`
+                        <div class="icon-holder image">
+                          <ha-svg-icon
+                            class="folder"
+                            .path=${!this.value?.media_content_id
+                              ? mdiPlus
+                              : this.value?.metadata?.media_class
+                                ? MediaClassBrowserSettings[
+                                    this.value.metadata.media_class ===
+                                    "directory"
+                                      ? this.value.metadata
+                                          .children_media_class ||
+                                        this.value.metadata.media_class
+                                      : this.value.metadata.media_class
+                                  ].icon
+                                : mdiPlayBox}
+                          ></ha-svg-icon>
+                        </div>
+                      `}
+                </div>
+                <div class="title">
+                  ${!this.value?.media_content_id
+                    ? this.hass.localize(
+                        "ui.components.selectors.media.pick_media"
+                      )
+                    : this.value.metadata?.title || this.value.media_content_id}
+                </div>
               </div>
             </ha-card>
           `}
@@ -229,6 +232,13 @@ export class HaMediaSelector extends LitElement {
     });
   }
 
+  private _handleKeyDown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      this._pickMedia();
+    }
+  }
+
   static styles = css`
     ha-entity-picker {
       display: block;
@@ -243,41 +253,52 @@ export class HaMediaSelector extends LitElement {
     }
     ha-card {
       position: relative;
-      width: 200px;
+      width: 100%;
       box-sizing: border-box;
       cursor: pointer;
+      transition: background-color 180ms ease-in-out;
+      min-height: 56px;
+    }
+    ha-card:hover:not(.disabled),
+    ha-card:focus:not(.disabled) {
+      background-color: var(--state-icon-hover-color, rgba(0, 0, 0, 0.04));
+    }
+    ha-card:focus {
+      outline: none;
     }
     ha-card.disabled {
       pointer-events: none;
       color: var(--disabled-text-color);
     }
+    .content-container {
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      gap: 12px;
+    }
     ha-card .thumbnail {
-      width: 100%;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
       position: relative;
       box-sizing: border-box;
-      transition: padding-bottom 0.1s ease-out;
-      padding-bottom: 100%;
-    }
-    ha-card .thumbnail.portrait {
-      padding-bottom: 150%;
+      border-radius: 8px;
+      overflow: hidden;
     }
     ha-card .image {
-      border-radius: 3px 3px 0 0;
+      border-radius: 8px;
     }
     .folder {
-      --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
+      --mdc-icon-size: 24px;
     }
     .title {
-      font-size: var(--ha-font-size-l);
-      padding-top: 16px;
+      font-size: var(--ha-font-size-m);
       overflow: hidden;
       text-overflow: ellipsis;
-      margin-bottom: 16px;
-      padding-left: 16px;
-      padding-right: 4px;
-      padding-inline-start: 16px;
-      padding-inline-end: 4px;
       white-space: nowrap;
+      line-height: 1.4;
+      flex: 1;
+      min-width: 0;
     }
     .image {
       position: absolute;
@@ -290,13 +311,15 @@ export class HaMediaSelector extends LitElement {
       background-position: center;
     }
     .centered-image {
-      margin: 0 8px;
+      margin: 4px;
       background-size: contain;
     }
     .icon-holder {
       display: flex;
       justify-content: center;
       align-items: center;
+      width: 100%;
+      height: 100%;
     }
   `;
 }