diff --git a/hassio/src/hassio-markdown-dialog.js b/hassio/src/hassio-markdown-dialog.js
index 63e7655e92..be7f2d000a 100644
--- a/hassio/src/hassio-markdown-dialog.js
+++ b/hassio/src/hassio-markdown-dialog.js
@@ -1,18 +1,18 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../src/components/ha-markdown";
 import "../../src/resources/ha-style";
+import "../../src/components/dialog/ha-paper-dialog";
 
 class HassioMarkdownDialog extends PolymerElement {
   static get template() {
     return html`
       <style include="ha-style-dialog">
-        paper-dialog {
+        ha-paper-dialog {
           min-width: 350px;
           font-size: 14px;
           border-radius: 2px;
@@ -31,10 +31,10 @@ class HassioMarkdownDialog extends PolymerElement {
           margin: 4px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
           }
-          paper-dialog::before {
+          ha-paper-dialog::before {
             content: "";
             position: fixed;
             z-index: -1;
@@ -50,7 +50,7 @@ class HassioMarkdownDialog extends PolymerElement {
           }
         }
       </style>
-      <paper-dialog id="dialog" with-backdrop="">
+      <ha-paper-dialog id="dialog" with-backdrop="">
         <app-toolbar>
           <paper-icon-button
             icon="hassio:close"
@@ -61,7 +61,7 @@ class HassioMarkdownDialog extends PolymerElement {
         <paper-dialog-scrollable>
           <ha-markdown content="[[content]]"></ha-markdown>
         </paper-dialog-scrollable>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
diff --git a/hassio/src/snapshots/hassio-snapshot.js b/hassio/src/snapshots/hassio-snapshot.js
index 8ea0c0e4a6..6ade909c43 100644
--- a/hassio/src/snapshots/hassio-snapshot.js
+++ b/hassio/src/snapshots/hassio-snapshot.js
@@ -2,7 +2,6 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -10,12 +9,13 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { getSignedPath } from "../../../src/auth/data";
 
 import "../../../src/resources/ha-style";
+import "../../../src/components/dialog/ha-paper-dialog";
 
 class HassioSnapshot extends PolymerElement {
   static get template() {
     return html`
       <style include="ha-style-dialog">
-        paper-dialog {
+        ha-paper-dialog {
           min-width: 350px;
           font-size: 14px;
           border-radius: 2px;
@@ -29,7 +29,7 @@ class HassioSnapshot extends PolymerElement {
         app-toolbar [main-title] {
           margin-left: 16px;
         }
-        paper-dialog-scrollable {
+        ha-paper-dialog-scrollable {
           margin: 0;
         }
         paper-checkbox {
@@ -37,7 +37,7 @@ class HassioSnapshot extends PolymerElement {
           margin: 4px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
             height: 100%;
           }
@@ -57,7 +57,7 @@ class HassioSnapshot extends PolymerElement {
           color: var(--google-red-500);
         }
       </style>
-      <paper-dialog
+      <ha-paper-dialog
         id="dialog"
         with-backdrop=""
         on-iron-overlay-closed="_dialogClosed"
@@ -132,7 +132,7 @@ class HassioSnapshot extends PolymerElement {
             >
           </template>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
diff --git a/src/panels/lovelace/components/dialog/ha-iron-focusables-helper.js b/src/components/dialog/ha-iron-focusables-helper.js
similarity index 100%
rename from src/panels/lovelace/components/dialog/ha-iron-focusables-helper.js
rename to src/components/dialog/ha-iron-focusables-helper.js
diff --git a/src/panels/lovelace/components/dialog/ha-dialog.ts b/src/components/dialog/ha-paper-dialog.ts
similarity index 75%
rename from src/panels/lovelace/components/dialog/ha-dialog.ts
rename to src/components/dialog/ha-paper-dialog.ts
index 25be5b934e..7ddef793c6 100644
--- a/src/panels/lovelace/components/dialog/ha-dialog.ts
+++ b/src/components/dialog/ha-paper-dialog.ts
@@ -1,6 +1,8 @@
 import "@polymer/paper-dialog/paper-dialog";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { HaIronFocusablesHelper } from "./ha-iron-focusables-helper.js";
+// tslint:disable-next-line
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 
 const paperDialogClass = customElements.get("paper-dialog");
 
@@ -13,10 +15,10 @@ const haTabFixBehaviorImpl = {
 
 // paper-dialog that uses the haTabFixBehaviorImpl behvaior
 // export class HaPaperDialog extends paperDialogClass {}
-export class HaPaperDialog extends mixinBehaviors(
-  [haTabFixBehaviorImpl],
-  paperDialogClass
-) {}
+// @ts-ignore
+export class HaPaperDialog
+  extends mixinBehaviors([haTabFixBehaviorImpl], paperDialogClass)
+  implements PaperDialogElement {}
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/src/dialogs/config-flow/dialog-config-flow.ts b/src/dialogs/config-flow/dialog-config-flow.ts
index 9a98881ab5..37c1b1b7d6 100644
--- a/src/dialogs/config-flow/dialog-config-flow.ts
+++ b/src/dialogs/config-flow/dialog-config-flow.ts
@@ -12,14 +12,14 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "@polymer/paper-spinner/paper-spinner";
-import "@polymer/paper-dialog/paper-dialog";
-// Not duplicate, is for typing
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 
 import "../../components/ha-form";
 import "../../components/ha-markdown";
 import "../../resources/ha-style";
+import "../../components/dialog/ha-paper-dialog";
+// Not duplicate, is for typing
+// tslint:disable-next-line
+import { HaPaperDialog } from "../../components/dialog/ha-paper-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import {
   fetchConfigFlow,
@@ -108,7 +108,11 @@ class ConfigFlowDialog extends LitElement {
     }
 
     return html`
-      <paper-dialog with-backdrop opened @opened-changed=${this._openedChanged}>
+      <ha-paper-dialog
+        with-backdrop
+        opened
+        @opened-changed=${this._openedChanged}
+      >
         ${this._loading
           ? html`
               <step-flow-loading></step-flow-loading>
@@ -144,7 +148,7 @@ class ConfigFlowDialog extends LitElement {
                 .areas=${this._areas}
               ></step-flow-create-entry>
             `}
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -166,8 +170,8 @@ class ConfigFlowDialog extends LitElement {
     }
   }
 
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   private async _fetchDevices(configEntryId) {
@@ -226,10 +230,10 @@ class ConfigFlowDialog extends LitElement {
     return [
       haStyleDialog,
       css`
-        paper-dialog {
+        ha-paper-dialog {
           max-width: 500px;
         }
-        paper-dialog > * {
+        ha-paper-dialog > * {
           margin: 0;
           display: block;
           padding: 0;
diff --git a/src/dialogs/config-flow/step-flow-abort.ts b/src/dialogs/config-flow/step-flow-abort.ts
index ecd05fe2b5..b338d26fbc 100644
--- a/src/dialogs/config-flow/step-flow-abort.ts
+++ b/src/dialogs/config-flow/step-flow-abort.ts
@@ -33,20 +33,17 @@ class StepFlowAbort extends LitElement {
     );
 
     return html`
-        <h2>Aborted</h2>
-        <div class="content">
-          ${
-            description
-              ? html`
-                  <ha-markdown .content=${description} allow-svg></ha-markdown>
-                `
-              : ""
-          }
-        </div>
-        <div class="buttons">
-          <mwc-button @click="${this._flowDone}">Close</mwc-button>
-        </div>
-      </paper-dialog>
+      <h2>Aborted</h2>
+      <div class="content">
+        ${description
+          ? html`
+              <ha-markdown .content=${description} allow-svg></ha-markdown>
+            `
+          : ""}
+      </div>
+      <div class="buttons">
+        <mwc-button @click="${this._flowDone}">Close</mwc-button>
+      </div>
     `;
   }
 
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index 0935ef5d5f..be4b268389 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -52,71 +52,61 @@ class StepFlowCreateEntry extends LitElement {
     );
 
     return html`
-        <h2>Success!</h2>
-        <div class="content">
-          ${
-            description
-              ? html`
-                  <ha-markdown .content=${description} allow-svg></ha-markdown>
-                `
-              : ""
-          }
-          <p>Created config for ${step.title}.</p>
-          ${
-            this.devices.length === 0
-              ? ""
-              : html`
-                  <p>We found the following devices:</p>
-                  <div class="devices">
-                    ${this.devices.map(
-                      (device) =>
-                        html`
-                          <div class="device">
-                            <b>${device.name}</b><br />
-                            ${device.model} (${device.manufacturer})
+      <h2>Success!</h2>
+      <div class="content">
+        ${description
+          ? html`
+              <ha-markdown .content=${description} allow-svg></ha-markdown>
+            `
+          : ""}
+        <p>Created config for ${step.title}.</p>
+        ${this.devices.length === 0
+          ? ""
+          : html`
+              <p>We found the following devices:</p>
+              <div class="devices">
+                ${this.devices.map(
+                  (device) =>
+                    html`
+                      <div class="device">
+                        <b>${device.name}</b><br />
+                        ${device.model} (${device.manufacturer})
 
-                            <paper-dropdown-menu-light
-                              label="Area"
-                              .device=${device.id}
-                              @selected-item-changed=${this._handleAreaChanged}
-                            >
-                              <paper-listbox
-                                slot="dropdown-content"
-                                selected="0"
-                              >
-                                <paper-item>
-                                  ${localize(
-                                    "ui.panel.config.integrations.config_entry.no_area"
-                                  )}
+                        <paper-dropdown-menu-light
+                          label="Area"
+                          .device=${device.id}
+                          @selected-item-changed=${this._handleAreaChanged}
+                        >
+                          <paper-listbox slot="dropdown-content" selected="0">
+                            <paper-item>
+                              ${localize(
+                                "ui.panel.config.integrations.config_entry.no_area"
+                              )}
+                            </paper-item>
+                            ${this.areas.map(
+                              (area) => html`
+                                <paper-item .area=${area.area_id}>
+                                  ${area.name}
                                 </paper-item>
-                                ${this.areas.map(
-                                  (area) => html`
-                                    <paper-item .area=${area.area_id}>
-                                      ${area.name}
-                                    </paper-item>
-                                  `
-                                )}
-                              </paper-listbox>
-                            </paper-dropdown-menu-light>
-                          </div>
-                        `
-                    )}
-                  </div>
-                `
-          }
-        </div>
-        <div class="buttons">
-          ${
-            this.devices.length > 0
-              ? html`
-                  <mwc-button @click="${this._addArea}">Add Area</mwc-button>
-                `
-              : ""
-          }
+                              `
+                            )}
+                          </paper-listbox>
+                        </paper-dropdown-menu-light>
+                      </div>
+                    `
+                )}
+              </div>
+            `}
+      </div>
+      <div class="buttons">
+        ${this.devices.length > 0
+          ? html`
+              <mwc-button @click="${this._addArea}">Add Area</mwc-button>
+            `
+          : ""}
 
-          <mwc-button @click="${this._flowDone}">Finish</mwc-button>
-        </div>
-      </paper-dialog>
+        <mwc-button @click="${this._flowDone}">Finish</mwc-button>
+      </div>
     `;
   }
 
diff --git a/src/panels/config/area_registry/dialog-area-registry-detail.ts b/src/panels/config/area_registry/dialog-area-registry-detail.ts
index 3119d74ba7..f2703018c9 100644
--- a/src/panels/config/area_registry/dialog-area-registry-detail.ts
+++ b/src/panels/config/area_registry/dialog-area-registry-detail.ts
@@ -6,10 +6,10 @@ import {
   CSSResult,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 
+import "../../../components/dialog/ha-paper-dialog";
 import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
@@ -47,7 +47,7 @@ class DialogAreaDetail extends LitElement {
     const entry = this._params.entry;
     const nameInvalid = this._name.trim() === "";
     return html`
-      <paper-dialog
+      <ha-paper-dialog
         with-backdrop
         opened
         @opened-changed="${this._openedChanged}"
@@ -108,7 +108,7 @@ class DialogAreaDetail extends LitElement {
                 )}
           </mwc-button>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -157,7 +157,7 @@ class DialogAreaDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        paper-dialog {
+        ha-paper-dialog {
           min-width: 400px;
         }
         .form {
diff --git a/src/panels/config/cloud/cloud-webhook-manage-dialog.ts b/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
index f32298c047..03e8d1240e 100644
--- a/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
+++ b/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
@@ -9,10 +9,10 @@ import {
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
+import "../../../components/dialog/ha-paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 // tslint:disable-next-line
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 
@@ -49,7 +49,7 @@ export class CloudWebhookManageDialog extends LitElement {
         ? "https://www.home-assistant.io/docs/automation/trigger/#webhook-trigger"
         : `https://www.home-assistant.io/components/${webhook.domain}/`;
     return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
         <h2>Webhook for ${webhook.name}</h2>
         <div>
           <p>The webhook is available at the following url:</p>
@@ -80,12 +80,12 @@ export class CloudWebhookManageDialog extends LitElement {
           >
           <mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   private get _paperInput(): PaperInputElement {
@@ -127,7 +127,7 @@ export class CloudWebhookManageDialog extends LitElement {
     return [
       haStyle,
       css`
-        paper-dialog {
+        ha-paper-dialog {
           width: 650px;
         }
         paper-input {
diff --git a/src/panels/config/cloud/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate.ts
index a5d86e81e0..1c3f210542 100644
--- a/src/panels/config/cloud/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate.ts
@@ -8,10 +8,10 @@ import {
 } from "lit-element";
 
 import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
+import "../../../components/dialog/ha-paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 
 import { HomeAssistant } from "../../../types";
 import { haStyle } from "../../../resources/styles";
@@ -39,7 +39,7 @@ class DialogCloudCertificate extends LitElement {
     const { certificateInfo } = this._params;
 
     return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
         <h2>Certificate Information</h2>
         <div>
           <p>
@@ -58,12 +58,12 @@ class DialogCloudCertificate extends LitElement {
         <div class="paper-dialog-buttons">
           <mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   private _closeDialog() {
@@ -74,7 +74,7 @@ class DialogCloudCertificate extends LitElement {
     return [
       haStyle,
       css`
-        paper-dialog {
+        ha-paper-dialog {
           width: 535px;
         }
       `,
diff --git a/src/panels/config/entity_registry/dialog-entity-registry-detail.ts b/src/panels/config/entity_registry/dialog-entity-registry-detail.ts
index a3db216236..391e72d16c 100644
--- a/src/panels/config/entity_registry/dialog-entity-registry-detail.ts
+++ b/src/panels/config/entity_registry/dialog-entity-registry-detail.ts
@@ -6,10 +6,11 @@ import {
   CSSResult,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 
+import "../../../components/dialog/ha-paper-dialog";
+
 import { EntityRegistryDetailDialogParams } from "./show-dialog-entity-registry-detail";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
@@ -56,7 +57,7 @@ class DialogEntityRegistryDetail extends LitElement {
       computeDomain(this._params.entry.entity_id);
 
     return html`
-      <paper-dialog
+      <ha-paper-dialog
         with-backdrop
         opened
         @opened-changed="${this._openedChanged}"
@@ -116,7 +117,7 @@ class DialogEntityRegistryDetail extends LitElement {
             )}
           </mwc-button>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -166,7 +167,7 @@ class DialogEntityRegistryDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        paper-dialog {
+        ha-paper-dialog {
           min-width: 400px;
         }
         .form {
diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts
index 17a9b8db14..6a191e72a0 100644
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@@ -6,11 +6,12 @@ import {
   TemplateResult,
   property,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import "@material/mwc-button";
 
+import "../../../components/dialog/ha-paper-dialog";
+
 import "../../../components/entity/ha-entities-picker";
 import "../../../components/user/ha-user-picker";
 import { PersonDetailDialogParams } from "./show-dialog-person-detail";
@@ -49,7 +50,7 @@ class DialogPersonDetail extends LitElement {
     }
     const nameInvalid = this._name.trim() === "";
     return html`
-      <paper-dialog
+      <ha-paper-dialog
         with-backdrop
         opened
         @opened-changed="${this._openedChanged}"
@@ -114,7 +115,7 @@ class DialogPersonDetail extends LitElement {
             ${this._params.entry ? "UPDATE" : "CREATE"}
           </mwc-button>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -175,7 +176,7 @@ class DialogPersonDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        paper-dialog {
+        ha-paper-dialog {
           min-width: 400px;
         }
         .form {
diff --git a/src/panels/config/users/ha-dialog-add-user.js b/src/panels/config/users/ha-dialog-add-user.js
index da5f7d6c55..08c0319919 100644
--- a/src/panels/config/users/ha-dialog-add-user.js
+++ b/src/panels/config/users/ha-dialog-add-user.js
@@ -1,9 +1,9 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/dialog/ha-paper-dialog";
 import "../../../resources/ha-style";
 
 import LocalizeMixin from "../../../mixins/localize-mixin";
@@ -18,14 +18,14 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
         .error {
           color: red;
         }
-        paper-dialog {
+        ha-paper-dialog {
           max-width: 500px;
         }
         .username {
           margin-top: -8px;
         }
       </style>
-      <paper-dialog
+      <ha-paper-dialog
         id="dialog"
         with-backdrop
         opened="{{_opened}}"
@@ -76,7 +76,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
             >
           </template>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
diff --git a/src/panels/config/zwave/zwave-log-dialog.js b/src/panels/config/zwave/zwave-log-dialog.js
index 799234ccdf..f99925e367 100644
--- a/src/panels/config/zwave/zwave-log-dialog.js
+++ b/src/panels/config/zwave/zwave-log-dialog.js
@@ -1,8 +1,8 @@
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../../components/dialog/ha-paper-dialog";
 import "../../../resources/ha-style";
 
 import EventsMixin from "../../../mixins/events-mixin";
@@ -12,12 +12,12 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) {
     return html`
     <style include="ha-style-dialog">
     </style>
-      <paper-dialog id="pwaDialog" with-backdrop="" opened="{{_opened}}">
+      <ha-paper-dialog id="pwaDialog" with-backdrop="" opened="{{_opened}}">
         <h2>OpenZwave internal logfile</h2>
         <paper-dialog-scrollable>
           <pre>[[_ozwLog]]</pre>
         <paper-dialog-scrollable>
-      </paper-dialog>
+      </ha-paper-dialog>
       `;
   }
 
diff --git a/src/panels/config/zwave/zwave-log.js b/src/panels/config/zwave/zwave-log.js
index a0524d08a9..716d962812 100644
--- a/src/panels/config/zwave/zwave-log.js
+++ b/src/panels/config/zwave/zwave-log.js
@@ -2,8 +2,6 @@ import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import EventsMixin from "../../../mixins/events-mixin";
diff --git a/src/panels/dev-info/dialog-system-log-detail.ts b/src/panels/dev-info/dialog-system-log-detail.ts
index 4e817632c7..6ec2299a1b 100644
--- a/src/panels/dev-info/dialog-system-log-detail.ts
+++ b/src/panels/dev-info/dialog-system-log-detail.ts
@@ -6,9 +6,10 @@ import {
   CSSResult,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
+import "../../components/dialog/ha-paper-dialog";
+
 import { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
@@ -34,7 +35,7 @@ class DialogSystemLogDetail extends LitElement {
     const item = this._params.item;
 
     return html`
-      <paper-dialog
+      <ha-paper-dialog
         with-backdrop
         opened
         @opened-changed="${this._openedChanged}"
@@ -53,7 +54,7 @@ class DialogSystemLogDetail extends LitElement {
               `
             : html``}
         </paper-dialog-scrollable>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -67,7 +68,7 @@ class DialogSystemLogDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        paper-dialog {
+        ha-paper-dialog {
           direction: ltr;
         }
       `,
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
index 1cd86ebee7..9e860a75e0 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts
@@ -7,10 +7,10 @@ import {
   css,
   CSSResult,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-item/paper-item";
+import "../../../../components/dialog/ha-paper-dialog";
 // tslint:disable-next-line:no-duplicate-imports
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 
 import { moveCard } from "../config-util";
 import { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
@@ -30,7 +30,7 @@ export class HuiDialogMoveCardView extends LitElement {
       return html``;
     }
     return html`
-      <paper-dialog
+      <ha-paper-dialog
         with-backdrop
         opened
         @opened-changed="${this._openedChanged}"
@@ -46,7 +46,7 @@ export class HuiDialogMoveCardView extends LitElement {
             >
           `;
         })}
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -76,8 +76,8 @@ export class HuiDialogMoveCardView extends LitElement {
     `;
   }
 
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   private _moveCard(e: Event): void {
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
index c8a293925b..49d80a6fd7 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
@@ -6,9 +6,10 @@ import {
   CSSResult,
   customElement,
 } from "lit-element";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
+import "../../../../components/dialog/ha-paper-dialog";
+
 import { haStyleDialog } from "../../../../resources/styles";
 
 import "./hui-card-picker";
@@ -23,7 +24,7 @@ export class HuiDialogPickCard extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <paper-dialog
+      <ha-paper-dialog
         with-backdrop
         opened
         @opened-changed="${this._openedChanged}"
@@ -40,7 +41,7 @@ export class HuiDialogPickCard extends LitElement {
         <div class="paper-dialog-buttons">
           <mwc-button @click="${this._skipPick}">MANUAL CARD</mwc-button>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -60,19 +61,19 @@ export class HuiDialogPickCard extends LitElement {
       css`
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
             height: 100%;
           }
         }
 
         @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
             width: 650px;
           }
         }
 
-        paper-dialog {
+        ha-paper-dialog {
           max-width: 650px;
         }
       `,
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index ad741cea7c..efe7ce09ac 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -15,10 +15,10 @@ import { haStyleDialog } from "../../../../resources/styles";
 
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-dialog/paper-dialog";
-import "../../components/dialog/ha-dialog";
+import "../../../../components/dialog/ha-paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
-import { HaPaperDialog } from "../../components/dialog/ha-dialog";
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { HomeAssistant } from "../../../../types";
@@ -428,7 +428,7 @@ export class HuiEditCard extends LitElement {
         }
 
         @media (min-width: 1200px) {
-          paper-dialog {
+          ha-paper-dialog {
             max-width: none;
             width: 1000px;
           }
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index cb8942fae4..b50e6552fe 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -8,10 +8,9 @@ import {
   property,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
-import "@polymer/paper-dialog/paper-dialog";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import "../../../components/dialog/ha-paper-dialog";
+// tslint:disable-next-line:no-duplicate-imports
+import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
 
 import { haStyleDialog } from "../../../resources/styles";
@@ -37,13 +36,13 @@ export class HuiSaveConfig extends LitElement {
     this._dialog.open();
   }
 
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   protected render(): TemplateResult | void {
     return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
         <h2>
           ${this.hass!.localize("ui.panel.lovelace.editor.save_config.header")}
         </h2>
@@ -73,7 +72,7 @@ export class HuiSaveConfig extends LitElement {
             )}</mwc-button
           >
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -104,17 +103,17 @@ export class HuiSaveConfig extends LitElement {
       css`
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
             height: 100%;
           }
         }
         @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
             width: 650px;
           }
         }
-        paper-dialog {
+        ha-paper-dialog {
           max-width: 650px;
         }
         paper-spinner {
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
index 2b62748c09..f7ebfb0fb4 100644
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -8,10 +8,9 @@ import {
   property,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
-import "@polymer/paper-dialog/paper-dialog";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import "../../../../components/dialog/ha-paper-dialog";
+// tslint:disable-next-line:no-duplicate-imports
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
@@ -49,13 +48,13 @@ export class HuiDialogEditLovelace extends LitElement {
     this._dialog.open();
   }
 
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   protected render(): TemplateResult | void {
     return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
         <h2>Edit Lovelace</h2>
         <paper-dialog-scrollable>
           <hui-lovelace-editor
@@ -79,7 +78,7 @@ export class HuiDialogEditLovelace extends LitElement {
             ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -132,17 +131,17 @@ export class HuiDialogEditLovelace extends LitElement {
       css`
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
             height: 100%;
           }
         }
         @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
             width: 650px;
           }
         }
-        paper-dialog {
+        ha-paper-dialog {
           max-width: 650px;
         }
         mwc-button paper-spinner {
diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
index ff115e7cf5..4af79771f3 100644
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@@ -11,11 +11,10 @@ import {
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-icon-button/paper-icon-button.js";
-// This is not a duplicate import, one is for types, one is for element.
-// tslint:disable-next-line
-import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import "../../../../components/dialog/ha-paper-dialog";
+// tslint:disable-next-line:no-duplicate-imports
+import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
@@ -84,8 +83,8 @@ export class HuiEditView extends LitElement {
     this._dialog.open();
   }
 
-  private get _dialog(): PaperDialogElement {
-    return this.shadowRoot!.querySelector("paper-dialog")!;
+  private get _dialog(): HaPaperDialog {
+    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
 
   protected render(): TemplateResult | void {
@@ -116,7 +115,7 @@ export class HuiEditView extends LitElement {
         break;
     }
     return html`
-      <paper-dialog with-backdrop>
+      <ha-paper-dialog with-backdrop>
         <h2>
           ${this.hass!.localize("ui.panel.lovelace.editor.edit_view.header")}
         </h2>
@@ -155,7 +154,7 @@ export class HuiEditView extends LitElement {
             ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
@@ -184,7 +183,7 @@ export class HuiEditView extends LitElement {
 
   private async _resizeDialog(): Promise<void> {
     await this.updateComplete;
-    fireEvent(this._dialog, "iron-resize");
+    fireEvent(this._dialog as HTMLElement, "iron-resize");
   }
 
   private _closeDialog(): void {
@@ -267,17 +266,17 @@ export class HuiEditView extends LitElement {
       css`
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
-          paper-dialog {
+          ha-paper-dialog {
             max-height: 100%;
             height: 100%;
           }
         }
         @media all and (min-width: 660px) {
-          paper-dialog {
+          ha-paper-dialog {
             width: 650px;
           }
         }
-        paper-dialog {
+        ha-paper-dialog {
           max-width: 650px;
         }
         paper-tabs {
diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js
index 6ac06c5c8a..c381c00e2d 100644
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@@ -1,10 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../resources/ha-style";
+import "../../components/dialog/ha-paper-dialog";
 
 import LocalizeMixin from "../../mixins/localize-mixin";
 
@@ -19,7 +19,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
           color: red;
         }
         @media all and (max-width: 500px) {
-          paper-dialog {
+          ha-paper-dialog {
             margin: 0;
             width: 100%;
             max-height: calc(100% - 64px);
@@ -34,10 +34,10 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
           }
         }
 
-        paper-dialog {
+        ha-paper-dialog {
           border-radius: 2px;
         }
-        paper-dialog p {
+        ha-paper-dialog p {
           color: var(--secondary-text-color);
         }
 
@@ -45,7 +45,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
           float: right;
         }
       </style>
-      <paper-dialog
+      <ha-paper-dialog
         id="mp3dialog"
         with-backdrop
         opened="{{_opened}}"
@@ -73,7 +73,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
             <source id="mp3src" src="" type="audio/mpeg" />
           </audio>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }
 
diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js
index f8feef4a72..cee65656a5 100644
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -1,10 +1,10 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-form";
 import "../../components/ha-markdown";
 import "../../resources/ha-style";
@@ -25,7 +25,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
         .error {
           color: red;
         }
-        paper-dialog {
+        ha-paper-dialog {
           max-width: 500px;
         }
         ha-markdown img:first-child:last-child,
@@ -44,7 +44,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
           margin-right: 16px;
         }
       </style>
-      <paper-dialog
+      <ha-paper-dialog
         id="dialog"
         with-backdrop=""
         opened="{{_opened}}"
@@ -129,7 +129,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </template>
           </template>
         </div>
-      </paper-dialog>
+      </ha-paper-dialog>
     `;
   }