diff --git a/package.json b/package.json
index 4084e0036b..a6c8f904ef 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
     "@polymer/iron-image": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
     "@polymer/iron-label": "^3.0.1",
-    "@polymer/iron-media-query": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.2",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 7caed9a7ee..5055c7d258 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -2,7 +2,6 @@ import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";
 import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
-import "@polymer/iron-media-query/iron-media-query";
 import {
   css,
   CSSResult,
@@ -13,10 +12,10 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
+import { listenMediaQuery } from "../common/dom/media_query";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
-import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
 
@@ -51,11 +50,6 @@ class HomeAssistantMain extends LitElement {
       !sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
 
     return html`
-      <iron-media-query
-        query="(max-width: 870px)"
-        @query-matches-changed=${this._narrowChanged}
-      ></iron-media-query>
-
       <app-drawer-layout
         fullbleed
         .forceNarrow=${sidebarNarrow}
@@ -110,6 +104,10 @@ class HomeAssistantMain extends LitElement {
         narrow: this.narrow!,
       });
     });
+
+    listenMediaQuery("(max-width: 870px)", (matches) => {
+      this.narrow = matches;
+    });
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -133,10 +131,6 @@ class HomeAssistantMain extends LitElement {
     }
   }
 
-  private _narrowChanged(ev: PolymerChangedEvent<boolean>) {
-    this.narrow = ev.detail.value;
-  }
-
   private get _sidebarNarrow() {
     return this.narrow || this.hass.dockedSidebar === "always_hidden";
   }
diff --git a/yarn.lock b/yarn.lock
index 73b25d5b77..c28fd8e410 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1982,7 +1982,7 @@
   dependencies:
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/iron-media-query@^3.0.0", "@polymer/iron-media-query@^3.0.0-pre.26", "@polymer/iron-media-query@^3.0.1":
+"@polymer/iron-media-query@^3.0.0", "@polymer/iron-media-query@^3.0.0-pre.26":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/iron-media-query/-/iron-media-query-3.0.1.tgz#5cd8a1c1e8c9b8bafd3dd5da14e0f8d2cfa76d83"
   integrity sha512-czUX1pm1zfmfcZtq5J57XFkcobBv08Y50exp0/3v8Bos5VL/jv2tU0RwiTfDBxUMhjicGbgwEBFQPY2V5DMzyw==