diff --git a/package.json b/package.json
index 242fc7b1be..9f61f7eba7 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,9 @@
     "@material/mwc-menu": "^0.17.2",
     "@material/mwc-ripple": "^0.17.2",
     "@material/mwc-switch": "^0.17.2",
+    "@material/mwc-tab": "^0.17.2",
+    "@material/mwc-tab-bar": "^0.17.2",
+    "@material/top-app-bar": "=8.0.0-canary.a78ceb112.0",
     "@mdi/js": "5.3.45",
     "@mdi/svg": "5.3.45",
     "@polymer/app-layout": "^3.0.2",
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 0bbcfd8307..03472c6495 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -57,7 +57,7 @@ export class HaDialog extends MwcDialog {
         .header_button {
           position: absolute;
           right: 16px;
-          top: 12px;
+          top: 10px;
           text-decoration: none;
           color: inherit;
         }
diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts
new file mode 100644
index 0000000000..946c1979de
--- /dev/null
+++ b/src/components/ha-header-bar.ts
@@ -0,0 +1,47 @@
+import { customElement, LitElement, html, unsafeCSS, css } from "lit-element";
+// @ts-ignore
+import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
+
+@customElement("ha-header-bar")
+export class HaHeaderBar extends LitElement {
+  protected render() {
+    return html`<header class="mdc-top-app-bar">
+      <div class="mdc-top-app-bar__row">
+        <section
+          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
+          id="navigation"
+        >
+          <slot name="navigationIcon"></slot>
+          <span class="mdc-top-app-bar__title">
+            <slot name="title"></slot>
+          </span>
+        </section>
+        <section
+          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
+          id="actions"
+          role="toolbar"
+        >
+          <slot name="actionItems"></slot>
+        </section>
+      </div>
+    </header>`;
+  }
+
+  static get styles() {
+    return [
+      unsafeCSS(topAppBarStyles),
+      css`
+        .mdc-top-app-bar {
+          position: static;
+          color: var(--mdc-theme-on-primary, #fff);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-header-bar": HaHeaderBar;
+  }
+}
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 9c4370397b..2ce4617e80 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -1,7 +1,6 @@
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "../../components/ha-header-bar";
 import "../../components/ha-dialog";
 import "../../components/ha-svg-icon";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@@ -94,18 +93,20 @@ export class MoreInfoDialog extends LitElement {
         hideActions
         data-domain=${domain}
       >
-        <app-toolbar slot="heading">
+        <ha-header-bar slot="heading">
           <mwc-icon-button
+            slot="navigationIcon"
             .label=${this.hass.localize("ui.dialogs.more_info_control.dismiss")}
             dialogAction="cancel"
           >
             <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
           </mwc-icon-button>
-          <div class="main-title" main-title @click=${this._enlarge}>
+          <div slot="title" class="main-title" @click=${this._enlarge}>
             ${computeStateName(stateObj)}
           </div>
           ${this.hass.user!.is_admin
             ? html`<mwc-icon-button
+                slot="actionItems"
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.settings"
                 )}
@@ -119,6 +120,7 @@ export class MoreInfoDialog extends LitElement {
             stateObj.attributes.id) ||
             EDITABLE_DOMAINS.includes(domain))
             ? html` <mwc-icon-button
+                slot="actionItems"
                 .label=${this.hass.localize(
                   "ui.dialogs.more_info_control.edit"
                 )}
@@ -127,7 +129,7 @@ export class MoreInfoDialog extends LitElement {
                 <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
               </mwc-icon-button>`
             : ""}
-        </app-toolbar>
+        </ha-header-bar>
         <div class="content">
           ${DOMAINS_NO_INFO.includes(domain)
             ? ""
@@ -247,29 +249,19 @@ export class MoreInfoDialog extends LitElement {
           --dialog-content-position: static;
         }
 
-        app-toolbar {
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--card-background-color);
           flex-shrink: 0;
-          color: var(--primary-text-color);
-          background-color: var(--secondary-background-color);
-        }
-
-        app-toolbar [main-title] {
-          /* Design guideline states 24px, changed to 16 to align with state info */
-          margin-left: 16px;
-          line-height: 1.3em;
-          max-height: 2.6em;
-          overflow: hidden;
-          /* webkit and blink still support simple multiline text-overflow */
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          text-overflow: ellipsis;
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          app-toolbar {
-            background-color: var(--app-header-background-color);
-            color: var(--app-header-text-color, white);
+          ha-header-bar {
+            --mdc-theme-primary: var(--app-header-background-color);
+            --mdc-theme-on-primary: var(--app-header-text-color, white);
+            border-bottom: none;
           }
         }
 
@@ -287,7 +279,6 @@ export class MoreInfoDialog extends LitElement {
           }
 
           .main-title {
-            pointer-events: auto;
             cursor: default;
           }
 
diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts
index 41fdcc279d..4dbbb5b607 100644
--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/src/panels/config/entities/dialog-entity-editor.ts
@@ -1,6 +1,5 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
+import "@material/mwc-tab-bar";
+import "@material/mwc-tab";
 import "@material/mwc-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
@@ -17,6 +16,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/ha-dialog";
+import "../../../components/ha-header-bar";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-related-items";
 import {
@@ -51,7 +51,7 @@ export class DialogEntityEditor extends LitElement {
     | ExtEntityRegistryEntry
     | null;
 
-  @property() private _curTab?: string;
+  @property() private _curTab = "tab-settings";
 
   @property() private _extraTabs: Tabs = {};
 
@@ -92,19 +92,21 @@ export class DialogEntityEditor extends LitElement {
         @close-dialog=${this.closeDialog}
       >
         <div slot="heading">
-          <app-toolbar>
+          <ha-header-bar>
             <mwc-icon-button
+              slot="navigationIcon"
               .label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
               dialogAction="cancel"
             >
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
             </mwc-icon-button>
-            <div class="main-title" main-title>
+            <span slot="title">
               ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
-            </div>
+            </span>
             ${stateObj
               ? html`
                   <mwc-icon-button
+                    slot="actionItems"
                     .label=${this.hass.localize(
                       "ui.dialogs.entity_registry.control"
                     )}
@@ -114,25 +116,34 @@ export class DialogEntityEditor extends LitElement {
                   </mwc-icon-button>
                 `
               : ""}
-          </app-toolbar>
-          <paper-tabs
-            .selected=${this._curTabIndex}
-            @selected-item-changed=${this._handleTabSelected}
+          </ha-header-bar>
+          <mwc-tab-bar
+            .activeIndex=${this._curTabIndex}
+            @MDCTabBar:activated=${this._handleTabActivated}
+            @MDCTab:interacted=${this._handleTabInteracted}
           >
-            <paper-tab id="tab-settings">
-              ${this.hass.localize("ui.dialogs.entity_registry.settings")}
-            </paper-tab>
+            <mwc-tab
+              id="tab-settings"
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.settings"
+              )}
+            >
+            </mwc-tab>
             ${Object.entries(this._extraTabs).map(
               ([key, tab]) => html`
-                <paper-tab id=${key}>
-                  ${this.hass.localize(tab.translationKey) || key}
-                </paper-tab>
+                <mwc-tab
+                  id=${key}
+                  .label=${this.hass.localize(tab.translationKey) || key}
+                >
+                </mwc-tab>
               `
             )}
-            <paper-tab id="tab-related">
-              ${this.hass.localize("ui.dialogs.entity_registry.related")}
-            </paper-tab>
-          </paper-tabs>
+            <mwc-tab
+              id="tab-related"
+              .label=${this.hass.localize("ui.dialogs.entity_registry.related")}
+            >
+            </mwc-tab>
+          </mwc-tab-bar>
         </div>
         <div class="wrapper">
           ${cache(this._renderTab())}
@@ -187,11 +198,12 @@ export class DialogEntityEditor extends LitElement {
     }
   }
 
-  private _handleTabSelected(ev: CustomEvent): void {
-    if (!ev.detail.value) {
-      return;
-    }
-    this._curTab = ev.detail.value.id;
+  private _handleTabActivated(ev: CustomEvent): void {
+    this._curTabIndex = ev.detail.index;
+  }
+
+  private _handleTabInteracted(ev: CustomEvent): void {
+    this._curTab = ev.detail.tabId;
   }
 
   private async _loadPlatformSettingTabs(): Promise<void> {
@@ -220,24 +232,15 @@ export class DialogEntityEditor extends LitElement {
     return [
       haStyleDialog,
       css`
-        app-toolbar {
-          color: var(--primary-text-color);
-          background-color: var(--secondary-background-color);
-          margin: 0;
-          padding: 0 16px;
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--card-background-color);
+          flex-shrink: 0;
         }
 
-        app-toolbar [main-title] {
-          /* Design guideline states 24px, changed to 16 to align with state info */
-          margin-left: 16px;
-          line-height: 1.3em;
-          max-height: 2.6em;
-          overflow: hidden;
-          /* webkit and blink still support simple multiline text-overflow */
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          text-overflow: ellipsis;
+        mwc-tab-bar {
+          border-bottom: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
         ha-dialog {
@@ -245,10 +248,6 @@ export class DialogEntityEditor extends LitElement {
         }
 
         @media all and (min-width: 451px) and (min-height: 501px) {
-          .main-title {
-            pointer-events: auto;
-            cursor: default;
-          }
           .wrapper {
             width: 400px;
           }
@@ -261,9 +260,9 @@ export class DialogEntityEditor extends LitElement {
 
         /* overrule the ha-style-dialog max-height on small screens */
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          app-toolbar {
-            background-color: var(--app-header-background-color);
-            color: var(--app-header-text-color, white);
+          ha-header-bar {
+            --mdc-theme-primary: var(--app-header-background-color);
+            --mdc-theme-on-primary: var(--app-header-text-color, white);
           }
         }
 
@@ -275,15 +274,6 @@ export class DialogEntityEditor extends LitElement {
           direction: rtl;
           text-align: right;
         }
-        :host {
-          --paper-font-title_-_white-space: normal;
-        }
-        paper-tabs {
-          --paper-tabs-selection-bar-color: var(--primary-color);
-          text-transform: uppercase;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-          margin-top: 0;
-        }
       `,
     ];
   }
diff --git a/yarn.lock b/yarn.lock
index 632e037d05..9701db610f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1658,6 +1658,54 @@
     lit-element "^2.3.0"
     tslib "^1.10.0"
 
+"@material/mwc-tab-bar@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-bar/-/mwc-tab-bar-0.17.2.tgz#d89a290d4dda5f854ee51a539b69020c6634d1db"
+  integrity sha512-QsHOmxj6FM7jKYM9Dt6u7jKQv8r13z7/ryocQAAqyd13+LwAc+ec2o0hE6lTFpqNPAdlIhosip5Y3GDHdoKT5w==
+  dependencies:
+    "@material/mwc-base" "^0.17.2"
+    "@material/mwc-tab" "^0.17.2"
+    "@material/mwc-tab-scroller" "^0.17.2"
+    "@material/tab" "=8.0.0-canary.a78ceb112.0"
+    "@material/tab-bar" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    tslib "^1.10.0"
+
+"@material/mwc-tab-indicator@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-indicator/-/mwc-tab-indicator-0.17.2.tgz#fc3ac2c7a53df20acc99e71599dd38e8abbc2cda"
+  integrity sha512-JaAyWLhU/FO1v0wX1LLk4nTph13kFla14tYzMNg1rK6DcHdU19FgpjO7T1D61AJXQUmOMJ5q1qX/8dWd7BLlXg==
+  dependencies:
+    "@material/mwc-base" "^0.17.2"
+    "@material/tab-indicator" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    lit-html "^1.1.2"
+    tslib "^1.10.0"
+
+"@material/mwc-tab-scroller@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-scroller/-/mwc-tab-scroller-0.17.2.tgz#1f90691fe1bb91058cb884a72056951484967654"
+  integrity sha512-T03XsOQH457yhqeoZojMb2cfBshnBYCW4KIF8h2XqZiL9d47/E1OQqpWT/r1BbSZ7ysVhpH0TiwHvIaPzNW4ZA==
+  dependencies:
+    "@material/dom" "=8.0.0-canary.a78ceb112.0"
+    "@material/mwc-base" "^0.17.2"
+    "@material/tab-scroller" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    tslib "^1.10.0"
+
+"@material/mwc-tab@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab/-/mwc-tab-0.17.2.tgz#5629164b9099acd6d3d1109232b99ff23088f0ba"
+  integrity sha512-M8+T4jXL/noG3MAoxXNuN/or2Ky3Zozxa9XsgK4vGHK3rN5tB1w0t2ZMjmVgp8qJ4JIqgnYtsiM0Z1P/MLV4lw==
+  dependencies:
+    "@material/mwc-base" "^0.17.2"
+    "@material/mwc-ripple" "^0.17.2"
+    "@material/mwc-tab-indicator" "^0.17.2"
+    "@material/tab" "=8.0.0-canary.a78ceb112.0"
+    lit-element "^2.3.0"
+    lit-html "^1.1.2"
+    tslib "^1.10.0"
+
 "@material/progress-indicator@8.0.0-canary.a78ceb112.0":
   version "8.0.0-canary.a78ceb112.0"
   resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-8.0.0-canary.a78ceb112.0.tgz#70a769d413910daf8ea1c4d51712487e381eaeab"
@@ -1724,6 +1772,56 @@
     "@material/theme" "8.0.0-canary.a78ceb112.0"
     tslib "^1.9.3"
 
+"@material/tab-bar@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-bar/-/tab-bar-8.0.0-canary.a78ceb112.0.tgz#f15dc55be11dbfe9d42d5a924e5ebe0e122fd430"
+  integrity sha512-OrrieVHPPdBPm7Nsc2rdjLWIH5S1+immZxDe3zmn8eX0kw+EZf1HucFUwPWYFVTj1bFQfAk+P5AOHbrpu0UeAA==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/density" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/tab" "8.0.0-canary.a78ceb112.0"
+    "@material/tab-scroller" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
+"@material/tab-indicator@8.0.0-canary.a78ceb112.0", "@material/tab-indicator@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a78ceb112.0.tgz#24ad5d88b9fd652c91cfdb0c4f86eae7b7f48c4f"
+  integrity sha512-LPh3RZwzbyoaCnCkRw2GvEdH1m3m49H+jzJaA56vP7XCrSqlFD0UvGHM622ObkFbJb3xV+SKtq+jcRzHcSlQQw==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/theme" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
+"@material/tab-scroller@8.0.0-canary.a78ceb112.0", "@material/tab-scroller@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a78ceb112.0.tgz#393b79ed32bb6ceda87be8d4a6f64506b35e009d"
+  integrity sha512-of9L0foIN+jec1QRDnygTJ2vbK6MLGcJV1kPAFxBehObXo7MMisP8jZtxLCLaV5sdPpVvfIPdGdvvemYWUsysw==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/dom" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/tab" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
+"@material/tab@8.0.0-canary.a78ceb112.0", "@material/tab@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/tab/-/tab-8.0.0-canary.a78ceb112.0.tgz#0591ce259891e2a6b121af40b9fb182da2911ad6"
+  integrity sha512-lExmfj6Hw2Q9rSVTmjc+ruipoFZIgta9CAATRgxbuhCapXO7BUDkBihQbcxwTqH6qe4G80hRnUcsqm2PzsAEVA==
+  dependencies:
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
+    "@material/ripple" "8.0.0-canary.a78ceb112.0"
+    "@material/rtl" "8.0.0-canary.a78ceb112.0"
+    "@material/tab-indicator" "8.0.0-canary.a78ceb112.0"
+    "@material/theme" "8.0.0-canary.a78ceb112.0"
+    "@material/typography" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
 "@material/theme@8.0.0-canary.a78ceb112.0":
   version "8.0.0-canary.a78ceb112.0"
   resolved "https://registry.yarnpkg.com/@material/theme/-/theme-8.0.0-canary.a78ceb112.0.tgz#0a32294d806f16ebfab42025d35056a6954863a0"
@@ -1731,6 +1829,21 @@
   dependencies:
     "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
 
+"@material/top-app-bar@=8.0.0-canary.a78ceb112.0":
+  version "8.0.0-canary.a78ceb112.0"
+  resolved "https://registry.yarnpkg.com/@material/top-app-bar/-/top-app-bar-8.0.0-canary.a78ceb112.0.tgz#d84baf4a91cbaaf83b4bc7e798cbae0adff1b1b9"
+  integrity sha512-27bm0xPxepKSVh04FK7m0zUSP9FveIXv/qa2vJI3XTZWkFiNPrF+MGwkMPo83Z5TMqMFDRhDcjzSJlo9H4IrOg==
+  dependencies:
+    "@material/animation" "8.0.0-canary.a78ceb112.0"
+    "@material/base" "8.0.0-canary.a78ceb112.0"
+    "@material/elevation" "8.0.0-canary.a78ceb112.0"
+    "@material/ripple" "8.0.0-canary.a78ceb112.0"
+    "@material/rtl" "8.0.0-canary.a78ceb112.0"
+    "@material/shape" "8.0.0-canary.a78ceb112.0"
+    "@material/theme" "8.0.0-canary.a78ceb112.0"
+    "@material/typography" "8.0.0-canary.a78ceb112.0"
+    tslib "^1.9.3"
+
 "@material/touch-target@8.0.0-canary.a78ceb112.0":
   version "8.0.0-canary.a78ceb112.0"
   resolved "https://registry.yarnpkg.com/@material/touch-target/-/touch-target-8.0.0-canary.a78ceb112.0.tgz#dcacd182c99e3eae5547ffe26bc758fca252cfae"