diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts
index e997d86eae..85a8bd9ced 100644
--- a/demo/src/custom-cards/ha-demo-card.ts
+++ b/demo/src/custom-cards/ha-demo-card.ts
@@ -7,7 +7,7 @@ import {
 } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "@polymer/paper-icon-button";
-import "@polymer/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import "../../../src/components/ha-card";
 import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
@@ -85,7 +85,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         </div>
         <div class="actions">
           <a href="https://www.home-assistant.io" target="_blank">
-            <paper-button>Learn more about Home Assistant</paper-button>
+            <mwc-button>Learn more about Home Assistant</mwc-button>
           </a>
         </div>
       </ha-card>
@@ -146,12 +146,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         }
 
         .actions {
-          padding-left: 5px;
-        }
-
-        .actions paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
+          padding-left: 8px;
         }
       `,
     ];
diff --git a/gallery/src/demos/demo-util-long-press.ts b/gallery/src/demos/demo-util-long-press.ts
index d3cd8ddfb0..5f09e3598f 100644
--- a/gallery/src/demos/demo-util-long-press.ts
+++ b/gallery/src/demos/demo-util-long-press.ts
@@ -1,5 +1,5 @@
 import { html, LitElement, TemplateResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import "../../../src/components/ha-card";
 import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
@@ -11,13 +11,13 @@ export class DemoUtilLongPress extends LitElement {
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
-            <paper-button
+            <mwc-button
               @ha-click="${this._handleTap}"
               @ha-hold="${this._handleHold}"
               .longPress="${longPress()}"
             >
               (long) press me!
-            </paper-button>
+            </mwc-button>
 
             <textarea></textarea>
 
@@ -60,11 +60,6 @@ export class DemoUtilLongPress extends LitElement {
           margin-bottom: 16px;
         }
 
-        paper-button {
-          font-weight: bold;
-          color: var(--primary-color);
-        }
-
         textarea {
           height: 50px;
         }
diff --git a/hassio/src/addon-view/hassio-addon-audio.js b/hassio/src/addon-view/hassio-addon-audio.js
index b94fab20ef..d1a4011dda 100644
--- a/hassio/src/addon-view/hassio-addon-audio.js
+++ b/hassio/src/addon-view/hassio-addon-audio.js
@@ -1,6 +1,6 @@
 import "web-animations-js/web-animations-next-lite.min";
 
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -65,7 +65,7 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
           </paper-dropdown-menu>
         </div>
         <div class="card-actions">
-          <paper-button on-click="_saveSettings">Save</paper-button>
+          <mwc-button on-click="_saveSettings">Save</mwc-button>
         </div>
       </paper-card>
     `;
diff --git a/hassio/src/addon-view/hassio-addon-config.js b/hassio/src/addon-view/hassio-addon-config.js
index cdcaf8060d..a4061b8899 100644
--- a/hassio/src/addon-view/hassio-addon-config.js
+++ b/hassio/src/addon-view/hassio-addon-config.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -50,8 +50,8 @@ class HassioAddonConfig extends PolymerElement {
             data="[[resetData]]"
             >Reset to defaults</ha-call-api-button
           >
-          <paper-button on-click="saveTapped" disabled="[[!configParsed]]"
-            >Save</paper-button
+          <mwc-button on-click="saveTapped" disabled="[[!configParsed]]"
+            >Save</mwc-button
           >
         </div>
       </paper-card>
diff --git a/hassio/src/addon-view/hassio-addon-info.js b/hassio/src/addon-view/hassio-addon-info.js
index d4977ecd98..792407116b 100644
--- a/hassio/src/addon-view/hassio-addon-info.js
+++ b/hassio/src/addon-view/hassio-addon-info.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -77,7 +77,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           color: white;
           --paper-card-header-color: white;
         }
-        paper-card.warning paper-button {
+        paper-card.warning mwc-button {
           color: white !important;
         }
         .warning {
@@ -169,7 +169,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
               >Update</ha-call-api-button
             >
             <template is="dom-if" if="[[addon.changelog]]">
-              <paper-button on-click="openChangelog">Changelog</paper-button>
+              <mwc-button on-click="openChangelog">Changelog</mwc-button>
             </template>
           </div>
         </paper-card>
@@ -219,7 +219,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 Protection mode on this addon is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this addon.
               </div>
               <div class="card-actions">
-                  <paper-button on-click="protectionToggled">Enable Protection mode</paper-button>
+                  <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
                 </div>
               </div>
             </paper-card>
@@ -250,7 +250,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 <ha-label-badge
                 on-click="showMoreInfo"
                 id="full_access"
-                icon="hassio:chip"  
+                icon="hassio:chip"
                 label="hardware"
                 description=""
                 ></ha-label-badge>
@@ -337,8 +337,8 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
         </div>
         <div class="card-actions">
           <template is="dom-if" if="[[addon.version]]">
-            <paper-button class="warning" on-click="_unistallClicked"
-              >Uninstall</paper-button
+            <mwc-button class="warning" on-click="_unistallClicked"
+              >Uninstall</mwc-button
             >
             <template is="dom-if" if="[[addon.build]]">
               <ha-call-api-button
@@ -378,7 +378,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 tabindex="-1"
                 target="_blank"
                 class="right"
-                ><paper-button>Open web UI</paper-button></a
+                ><mwc-button>Open web UI</mwc-button></a
               >
             </template>
           </template>
diff --git a/hassio/src/addon-view/hassio-addon-logs.js b/hassio/src/addon-view/hassio-addon-logs.js
index d93be1750e..154630b01e 100644
--- a/hassio/src/addon-view/hassio-addon-logs.js
+++ b/hassio/src/addon-view/hassio-addon-logs.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -24,7 +24,7 @@ class HassioAddonLogs extends PolymerElement {
       <paper-card heading="Log">
         <div class="card-content" id="content"></div>
         <div class="card-actions">
-          <paper-button on-click="refresh">Refresh</paper-button>
+          <mwc-button on-click="refresh">Refresh</mwc-button>
         </div>
       </paper-card>
     `;
diff --git a/hassio/src/addon-view/hassio-addon-network.js b/hassio/src/addon-view/hassio-addon-network.js
index 7cfb15f5a0..569972c81f 100644
--- a/hassio/src/addon-view/hassio-addon-network.js
+++ b/hassio/src/addon-view/hassio-addon-network.js
@@ -60,7 +60,7 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
             data="[[resetData]]"
             >Reset to defaults</ha-call-api-button
           >
-          <paper-button on-click="saveTapped">Save</paper-button>
+          <mwc-button on-click="saveTapped">Save</mwc-button>
         </div>
       </paper-card>
     `;
diff --git a/hassio/src/dashboard/hassio-hass-update.js b/hassio/src/dashboard/hassio-hass-update.js
index 20c224cb3e..aff95e523a 100644
--- a/hassio/src/dashboard/hassio-hass-update.js
+++ b/hassio/src/dashboard/hassio-hass-update.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -56,7 +56,7 @@ class HassioHassUpdate extends PolymerElement {
                 <a
                   href="https://github.com/home-assistant/home-assistant/releases"
                   target="_blank"
-                  ><paper-button>Release notes</paper-button></a
+                  ><mwc-button>Release notes</mwc-button></a
                 >
               </div>
             </paper-card>
diff --git a/hassio/src/snapshots/hassio-snapshot.js b/hassio/src/snapshots/hassio-snapshot.js
index e36c4c1b5b..8ea0c0e4a6 100644
--- a/hassio/src/snapshots/hassio-snapshot.js
+++ b/hassio/src/snapshots/hassio-snapshot.js
@@ -1,5 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
@@ -123,12 +123,12 @@ class HassioSnapshot extends PolymerElement {
             class="download"
             title="Download snapshot"
           ></paper-icon-button>
-          <paper-button on-click="_partialRestoreClicked"
-            >Restore selected</paper-button
+          <mwc-button on-click="_partialRestoreClicked"
+            >Restore selected</mwc-button
           >
           <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
-            <paper-button on-click="_fullRestoreClicked"
-              >Wipe &amp; restore</paper-button
+            <mwc-button on-click="_fullRestoreClicked"
+              >Wipe &amp; restore</mwc-button
             >
           </template>
         </div>
diff --git a/hassio/src/snapshots/hassio-snapshots.js b/hassio/src/snapshots/hassio-snapshots.js
index 1318853856..6bacf798a1 100644
--- a/hassio/src/snapshots/hassio-snapshots.js
+++ b/hassio/src/snapshots/hassio-snapshots.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
@@ -90,10 +90,10 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
               </template>
             </div>
             <div class="card-actions">
-              <paper-button
+              <mwc-button
                 disabled="[[creatingSnapshot]]"
                 on-click="_createSnapshot"
-                >Create</paper-button
+                >Create</mwc-button
               >
             </div>
           </paper-card>
diff --git a/hassio/src/system/hassio-host-info.js b/hassio/src/system/hassio-host-info.js
index 0b650e3e48..ac19fcb519 100644
--- a/hassio/src/system/hassio-host-info.js
+++ b/hassio/src/system/hassio-host-info.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -39,7 +39,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
           color: var(--google-red-500);
           margin-top: 16px;
         }
-        paper-button.info {
+        mwc-button.info {
           max-width: calc(50% - 12px);
         }
         table.info {
@@ -67,13 +67,13 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
               </template>
             </tbody>
           </table>
-          <paper-button raised on-click="_showHardware" class="info">
+          <mwc-button raised on-click="_showHardware" class="info">
             Hardware
-          </paper-button>
+          </mwc-button>
           <template is="dom-if" if="[[_featureAvailable(data, 'hostname')]]">
-            <paper-button raised on-click="_changeHostnameClicked" class="info">
+            <mwc-button raised on-click="_changeHostnameClicked" class="info">
               Change hostname
-            </paper-button>
+            </mwc-button>
           </template>
           <template is="dom-if" if="[[errors]]">
             <div class="errors">Error: [[errors]]</div>
diff --git a/hassio/src/system/hassio-supervisor-info.js b/hassio/src/system/hassio-supervisor-info.js
index 9671d016e8..88a2f58f72 100644
--- a/hassio/src/system/hassio-supervisor-info.js
+++ b/hassio/src/system/hassio-supervisor-info.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -80,11 +80,11 @@ class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
             >
           </template>
           <template is="dom-if" if='[[_equals(data.channel, "stable")]]'>
-            <paper-button
+            <mwc-button
               on-click="_joinBeta"
               class="warning"
               title="Get beta updates for Home Assistant (RCs), supervisor and host"
-              >Join beta channel</paper-button
+              >Join beta channel</mwc-button
             >
           </template>
         </div>
diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js
index 985cc2372c..e9b48c2e48 100644
--- a/hassio/src/system/hassio-supervisor-log.js
+++ b/hassio/src/system/hassio-supervisor-log.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -24,7 +24,7 @@ class HassioSupervisorLog extends PolymerElement {
       <paper-card>
         <div class="card-content" id="content"></div>
         <div class="card-actions">
-          <paper-button on-click="refresh">Refresh</paper-button>
+          <mwc-button on-click="refresh">Refresh</mwc-button>
         </div>
       </paper-card>
     `;
diff --git a/package.json b/package.json
index 111db689f4..4577c34aed 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
+    "@material/mwc-button": "^0.3.6",
+    "@material/mwc-ripple": "^0.3.6",
     "@mdi/svg": "^3.0.39",
     "@polymer/app-layout": "^3.0.1",
     "@polymer/app-localize-behavior": "^3.0.1",
@@ -35,7 +37,6 @@
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/neon-animation": "^3.0.1",
-    "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.0.1",
     "@polymer/paper-dialog": "^3.0.1",
diff --git a/src/auth/ha-auth-flow.js b/src/auth/ha-auth-flow.js
index 2e964fa161..100b76beab 100644
--- a/src/auth/ha-auth-flow.js
+++ b/src/auth/ha-auth-flow.js
@@ -1,5 +1,5 @@
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import "../components/ha-form";
 import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
@@ -55,8 +55,8 @@ class HaAuthFlow extends localizeLiteMixin(PolymerElement) {
             ></ha-form>
           </template>
           <div class="action">
-            <paper-button raised on-click="_handleSubmit"
-              >[[_computeSubmitCaption(_step.type)]]</paper-button
+            <mwc-button raised on-click="_handleSubmit"
+              >[[_computeSubmitCaption(_step.type)]]</mwc-button
             >
           </div>
         </template>
diff --git a/src/cards/ha-persistent_notification-card.js b/src/cards/ha-persistent_notification-card.js
index af594cd851..bea39bbf97 100644
--- a/src/cards/ha-persistent_notification-card.js
+++ b/src/cards/ha-persistent_notification-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -38,7 +38,7 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
         ha-markdown img {
           max-width: 100%;
         }
-        paper-button {
+        mwc-button {
           margin: 8px;
           font-weight: 500;
         }
@@ -46,8 +46,8 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
 
       <ha-card header="[[computeTitle(stateObj)]]">
         <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
-        <paper-button on-click="dismissTap"
-          >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
+        <mwc-button on-click="dismissTap"
+          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
         >
       </ha-card>
     `;
diff --git a/src/components/buttons/ha-progress-button.js b/src/components/buttons/ha-progress-button.js
index f7b6faccec..9f14d21d18 100644
--- a/src/components/buttons/ha-progress-button.js
+++ b/src/components/buttons/ha-progress-button.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -12,26 +12,22 @@ class HaProgressButton extends PolymerElement {
           display: inline-block;
         }
 
-        paper-button {
+        mwc-button {
           transition: all 1s;
         }
 
-        .success paper-button {
-          color: white;
+        .success mwc-button {
+          --mdc-theme-primary: white;
           background-color: var(--google-green-500);
           transition: none;
         }
 
-        .error paper-button {
-          color: white;
+        .error mwc-button {
+          --mdc-theme-primary: white;
           background-color: var(--google-red-500);
           transition: none;
         }
 
-        paper-button[disabled] {
-          color: #c8c8c8;
-        }
-
         .progress {
           @apply --layout;
           @apply --layout-center-center;
@@ -43,13 +39,13 @@ class HaProgressButton extends PolymerElement {
         }
       </style>
       <div class="container" id="container">
-        <paper-button
+        <mwc-button
           id="button"
           disabled="[[computeDisabled(disabled, progress)]]"
           on-click="buttonTapped"
         >
           <slot></slot>
-        </paper-button>
+        </mwc-button>
         <template is="dom-if" if="[[progress]]">
           <div class="progress"><paper-spinner active=""></paper-spinner></div>
         </template>
diff --git a/src/components/ha-vacuum-state.js b/src/components/ha-vacuum-state.js
index fd8c9d7db7..5dc82224dd 100644
--- a/src/components/ha-vacuum-state.js
+++ b/src/components/ha-vacuum-state.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -38,21 +38,21 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
           height: 37px;
           margin-right: -0.57em;
         }
-        paper-button[disabled] {
+        mwc-button[disabled] {
           background-color: transparent;
           color: var(--secondary-text-color);
         }
       </style>
 
-      <paper-button on-click="_callService" disabled="[[!_interceptable]]"
-        >[[_computeLabel(stateObj.state, _interceptable)]]</paper-button
+      <mwc-button on-click="_callService" disabled="[[!_interceptable]]"
+        >[[_computeLabel(stateObj.state, _interceptable)]]</mwc-button
       >
     `;
   }
diff --git a/src/dialogs/ha-store-auth-card.js b/src/dialogs/ha-store-auth-card.js
index 2fb802650a..d63d805498 100644
--- a/src/dialogs/ha-store-auth-card.js
+++ b/src/dialogs/ha-store-auth-card.js
@@ -37,11 +37,11 @@ class HaStoreAuth extends LocalizeMixin(PolymerElement) {
       <paper-card elevation="4">
         <div class="card-content">[[localize('ui.auth_store.ask')]]</div>
         <div class="card-actions">
-          <paper-button on-click="_done"
-            >[[localize('ui.auth_store.decline')]]</paper-button
+          <mwc-button on-click="_done"
+            >[[localize('ui.auth_store.decline')]]</mwc-button
           >
-          <paper-button primary on-click="_save"
-            >[[localize('ui.auth_store.confirm')]]</paper-button
+          <mwc-button raised on-click="_save"
+            >[[localize('ui.auth_store.confirm')]]</mwc-button
           >
         </div>
       </paper-card>
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
index 5f1d186474..4628041974 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -27,15 +27,15 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
           display: flex;
           flex-direction: column;
         }
-        .pad paper-button {
+        .pad mwc-button {
           width: 80px;
         }
-        .actions paper-button {
+        .actions mwc-button {
           min-width: 160px;
           margin-bottom: 16px;
           color: var(--primary-color);
         }
-        paper-button.disarm {
+        mwc-button.disarm {
           color: var(--google-red-500);
         }
       </style>
@@ -51,87 +51,87 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
         <template is="dom-if" if="[[_isNumber(_codeFormat)]]">
           <div class="pad">
             <div>
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="1"
                 raised
-                >1</paper-button
+                >1</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="4"
                 raised
-                >4</paper-button
+                >4</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="7"
                 raised
-                >7</paper-button
+                >7</mwc-button
               >
             </div>
             <div>
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="2"
                 raised
-                >2</paper-button
+                >2</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="5"
                 raised
-                >5</paper-button
+                >5</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="8"
                 raised
-                >8</paper-button
+                >8</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="0"
                 raised
-                >0</paper-button
+                >0</mwc-button
               >
             </div>
             <div>
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="3"
                 raised
-                >3</paper-button
+                >3</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="6"
                 raised
-                >6</paper-button
+                >6</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="9"
                 raised
-                >9</paper-button
+                >9</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_clearEnteredCode"
                 disabled="[[!_inputEnabled]]"
                 raised
               >
                 [[localize('ui.card.alarm_control_panel.clear_code')]]
-              </paper-button>
+              </mwc-button>
             </div>
           </div>
         </template>
@@ -139,7 +139,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
 
       <div class="layout horizontal center-justified actions">
         <template is="dom-if" if="[[_disarmVisible]]">
-          <paper-button
+          <mwc-button
             raised
             class="disarm"
             on-click="_callService"
@@ -147,25 +147,25 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
             disabled="[[!_codeValid]]"
           >
             [[localize('ui.card.alarm_control_panel.disarm')]]
-          </paper-button>
+          </mwc-button>
         </template>
         <template is="dom-if" if="[[_armVisible]]">
-          <paper-button
+          <mwc-button
             raised
             on-click="_callService"
             data-service="alarm_arm_home"
             disabled="[[!_codeValid]]"
           >
             [[localize('ui.card.alarm_control_panel.arm_home')]]
-          </paper-button>
-          <paper-button
+          </mwc-button>
+          <mwc-button
             raised
             on-click="_callService"
             data-service="alarm_arm_away"
             disabled="[[!_codeValid]]"
           >
             [[localize('ui.card.alarm_control_panel.arm_away')]]
-          </paper-button>
+          </mwc-button>
         </template>
       </div>
     `;
diff --git a/src/dialogs/more-info/controls/more-info-automation.js b/src/dialogs/more-info/controls/more-info-automation.js
index d65471f87d..9b06dc218c 100644
--- a/src/dialogs/more-info/controls/more-info-automation.js
+++ b/src/dialogs/more-info/controls/more-info-automation.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -10,7 +10,7 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }
@@ -33,9 +33,9 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
       </div>
 
       <div class="actions">
-        <paper-button on-click="handleTriggerTapped">
+        <mwc-button on-click="handleTriggerTapped">
           [[localize('ui.card.automation.trigger')]]
-        </paper-button>
+        </mwc-button>
       </div>
     `;
   }
diff --git a/src/dialogs/more-info/controls/more-info-configurator.js b/src/dialogs/more-info/controls/more-info-configurator.js
index 2e30502c45..6e8b060c1e 100644
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ b/src/dialogs/more-info/controls/more-info-configurator.js
@@ -1,6 +1,6 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-input/iron-input";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -69,7 +69,7 @@ class MoreInfoConfigurator extends PolymerElement {
           </template>
 
           <p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
-            <paper-button
+            <mwc-button
               raised=""
               disabled="[[isConfiguring]]"
               on-click="submitClicked"
@@ -80,7 +80,7 @@ class MoreInfoConfigurator extends PolymerElement {
                 alt="Configuring"
               ></paper-spinner>
               [[stateObj.attributes.submit_caption]]
-            </paper-button>
+            </mwc-button>
           </p>
         </template>
       </div>
diff --git a/src/dialogs/more-info/controls/more-info-lock.js b/src/dialogs/more-info/controls/more-info-lock.js
index 859bb8f7a2..f5577eb06c 100644
--- a/src/dialogs/more-info/controls/more-info-lock.js
+++ b/src/dialogs/more-info/controls/more-info-lock.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -26,17 +26,17 @@ class MoreInfoLock extends LocalizeMixin(PolymerElement) {
           pattern="[[stateObj.attributes.code_format]]"
           type="password"
         ></paper-input>
-        <paper-button
+        <mwc-button
           on-click="callService"
           data-service="unlock"
           hidden$="[[!isLocked]]"
-          >[[localize('ui.card.lock.unlock')]]</paper-button
+          >[[localize('ui.card.lock.unlock')]]</mwc-button
         >
-        <paper-button
+        <mwc-button
           on-click="callService"
           data-service="lock"
           hidden$="[[isLocked]]"
-          >[[localize('ui.card.lock.lock')]]</paper-button
+          >[[localize('ui.card.lock.lock')]]</mwc-button
         >
       </template>
       <ha-attributes
diff --git a/src/dialogs/more-info/more-info-settings.js b/src/dialogs/more-info/more-info-settings.js
index 878b3a2b8c..cac25ab0d7 100644
--- a/src/dialogs/more-info/more-info-settings.js
+++ b/src/dialogs/more-info/more-info-settings.js
@@ -1,5 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -33,7 +33,7 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
           @apply --ha-more-info-app-toolbar-title;
         }
 
-        app-toolbar paper-button {
+        app-toolbar mwc-button {
           font-size: 0.8em;
           margin: 0;
         }
@@ -49,8 +49,8 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
           on-click="_backTapped"
         ></paper-icon-button>
         <div main-title="">[[_computeStateName(stateObj)]]</div>
-        <paper-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
-          >[[localize('ui.dialogs.more_info_settings.save')]]</paper-button
+        <mwc-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
+          >[[localize('ui.dialogs.more_info_settings.save')]]</mwc-button
         >
       </app-toolbar>
 
diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts
index f935abe1d9..3fe02fa785 100644
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,5 +1,5 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import {
   LitElement,
@@ -28,7 +28,7 @@ class HaInitPage extends LitElement {
         ${this.error
           ? html`
               Unable to connect to Home Assistant.
-              <paper-button @click=${this._retry}>Retry</paper-button>
+              <mwc-button @click=${this._retry}>Retry</mwc-button>
             `
           : "Loading data"}
       </div>
@@ -51,10 +51,6 @@ class HaInitPage extends LitElement {
       paper-spinner-lite {
         margin-bottom: 10px;
       }
-      paper-button {
-        font-weight: 500;
-        color: var(--primary-color);
-      }
     `;
   }
 }
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
index db5138b38c..ac382d2b37 100644
--- a/src/layouts/hass-error-screen.ts
+++ b/src/layouts/hass-error-screen.ts
@@ -7,6 +7,7 @@ import {
   property,
   customElement,
 } from "lit-element";
+import "@material/mwc-button";
 import "./hass-subpage";
 
 @customElement("hass-error-screen")
@@ -20,7 +21,7 @@ class HassErrorScreen extends LitElement {
         <div class="content">
           <h3>${this.error}</h3>
           <slot>
-            <paper-button @click=${this._backTapped}>go back</paper-button>
+            <mwc-button @click=${this._backTapped}>go back</mwc-button>
           </slot>
         </div>
       </hass-subpage>
@@ -41,11 +42,6 @@ class HassErrorScreen extends LitElement {
           justify-content: center;
           flex-direction: column;
         }
-
-        paper-button {
-          font-weight: bold;
-          color: var(--primary-color);
-        }
       `,
     ];
   }
diff --git a/src/onboarding/ha-onboarding.js b/src/onboarding/ha-onboarding.js
index ec9d8b2149..c2cd056a55 100644
--- a/src/onboarding/ha-onboarding.js
+++ b/src/onboarding/ha-onboarding.js
@@ -1,7 +1,7 @@
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
@@ -64,9 +64,9 @@ class HaOnboarding extends localizeLiteMixin(PolymerElement) {
 
       <template is='dom-if' if='[[!_loading]]'>
         <p class='action'>
-          <paper-button raised on-click='_submitForm'>
+          <mwc-button raised on-click='_submitForm'>
             [[localize('ui.panel.page-onboarding.user.create_account')]]
-          </paper-button>
+          </mwc-button>
         </p>
       </template>
     </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 6a777ba1f3..3ccc56eec5 100644
--- a/src/panels/config/area_registry/dialog-area-registry-detail.ts
+++ b/src/panels/config/area_registry/dialog-area-registry-detail.ts
@@ -77,18 +77,18 @@ class DialogAreaDetail extends LitElement {
         <div class="paper-dialog-buttons">
           ${this._params.entry
             ? html`
-                <paper-button
-                  class="danger"
+                <mwc-button
+                  class="warning"
                   @click="${this._deleteEntry}"
                   .disabled=${this._submitting}
                 >
                   ${this.hass.localize(
                     "ui.panel.config.area_registry.editor.delete"
                   )}
-                </paper-button>
+                </mwc-button>
               `
             : html``}
-          <paper-button
+          <mwc-button
             @click="${this._updateEntry}"
             .disabled=${nameInvalid || this._submitting}
           >
@@ -99,7 +99,7 @@ class DialogAreaDetail extends LitElement {
               : this.hass.localize(
                   "ui.panel.config.area_registry.editor.create"
                 )}
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -156,13 +156,7 @@ class DialogAreaDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        paper-button {
-          font-weight: 500;
-        }
-        paper-button.danger {
-          font-weight: 500;
-          color: var(--google-red-500);
-          margin-left: -12px;
+        mwc-button.warning {
           margin-right: auto;
         }
         .error {
diff --git a/src/panels/config/area_registry/ha-config-area-registry.ts b/src/panels/config/area_registry/ha-config-area-registry.ts
index 43fb8bdc6f..dbca7d6ba9 100644
--- a/src/panels/config/area_registry/ha-config-area-registry.ts
+++ b/src/panels/config/area_registry/ha-config-area-registry.ts
@@ -79,11 +79,11 @@ class HaConfigAreaRegistry extends LitElement {
                     ${this.hass.localize(
                       "ui.panel.config.area_registry.picker.no_areas"
                     )}
-                    <paper-button @click=${this._createArea}>
+                    <mwc-button @click=${this._createArea}>
                       ${this.hass.localize(
                         "ui.panel.config.area_registry.picker.create_area"
                       )}
-                    </paper-button>
+                    </mwc-button>
                   </div>
                 `
               : html``}
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 02d50e67f5..b2f0e237dd 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -242,7 +242,7 @@ class HaAutomationEditor extends LitElement {
         .script paper-card {
           margin-top: 16px;
         }
-        .add-card paper-button {
+        .add-card mwc-button {
           display: block;
           text-align: center;
         }
diff --git a/src/panels/config/cloud/cloud-alexa-pref.ts b/src/panels/config/cloud/cloud-alexa-pref.ts
index 0572a01e25..22b9d31d51 100644
--- a/src/panels/config/cloud/cloud-alexa-pref.ts
+++ b/src/panels/config/cloud/cloud-alexa-pref.ts
@@ -4,7 +4,7 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
diff --git a/src/panels/config/cloud/cloud-google-pref.ts b/src/panels/config/cloud/cloud-google-pref.ts
index df7d633743..a621ca0b8d 100644
--- a/src/panels/config/cloud/cloud-google-pref.ts
+++ b/src/panels/config/cloud/cloud-google-pref.ts
@@ -4,7 +4,7 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
diff --git a/src/panels/config/cloud/cloud-webhook-manage-dialog.ts b/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
index 9b6baa4309..a012de9b4f 100644
--- a/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
+++ b/src/panels/config/cloud/cloud-webhook-manage-dialog.ts
@@ -6,7 +6,7 @@ import {
   CSSResult,
 } from "lit-element";
 
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
@@ -69,9 +69,9 @@ export class CloudWebhookManageDialog extends LitElement {
 
         <div class="paper-dialog-buttons">
           <a href="${docsUrl}" target="_blank"
-            ><paper-button>VIEW DOCUMENTATION</paper-button></a
+            ><mwc-button>VIEW DOCUMENTATION</mwc-button></a
           >
-          <paper-button @click="${this._closeDialog}">CLOSE</paper-button>
+          <mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -129,7 +129,7 @@ export class CloudWebhookManageDialog extends LitElement {
         button.link {
           color: var(--primary-color);
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }
diff --git a/src/panels/config/cloud/cloud-webhooks.ts b/src/panels/config/cloud/cloud-webhooks.ts
index 910fdeab7a..d494b5bcfe 100644
--- a/src/panels/config/cloud/cloud-webhooks.ts
+++ b/src/panels/config/cloud/cloud-webhooks.ts
@@ -122,8 +122,8 @@ export class CloudWebhooks extends LitElement {
               `
             : this._cloudHooks![entry.webhook_id]
             ? html`
-                <paper-button @click="${this._handleManageButton}"
-                  >Manage</paper-button
+                <mwc-button @click="${this._handleManageButton}"
+                  >Manage</mwc-button
                 >
               `
             : html`
@@ -226,7 +226,7 @@ export class CloudWebhooks extends LitElement {
           flex-direction: column;
           justify-content: center;
         }
-        paper-button {
+        mwc-button {
           font-weight: 500;
           color: var(--primary-color);
         }
diff --git a/src/panels/config/cloud/ha-config-cloud-account.js b/src/panels/config/cloud/ha-config-cloud-account.js
index ff8998ee41..f673d74f93 100644
--- a/src/panels/config/cloud/ha-config-cloud-account.js
+++ b/src/panels/config/cloud/ha-config-cloud-account.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-toggle-button/paper-toggle-button";
@@ -48,7 +48,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           display: flex;
           padding: 0 16px;
         }
-        paper-button {
+        mwc-button {
           align-self: center;
         }
         .soon {
@@ -66,7 +66,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           text-transform: capitalize;
           padding: 16px;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }
@@ -100,10 +100,10 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
               <div class="card-actions">
                 <a href="https://account.nabucasa.com" target="_blank"
-                  ><paper-button>Manage Account</paper-button></a
+                  ><mwc-button>Manage Account</mwc-button></a
                 >
-                <paper-button style="float: right" on-click="handleLogout"
-                  >Sign out</paper-button
+                <mwc-button style="float: right" on-click="handleLogout"
+                  >Sign out</mwc-button
                 >
               </div>
             </paper-card>
diff --git a/src/panels/config/cloud/ha-config-cloud-login.js b/src/panels/config/cloud/ha-config-cloud-login.js
index 17a47c497d..ae607aabd1 100644
--- a/src/panels/config/cloud/ha-config-cloud-login.js
+++ b/src/panels/config/cloud/ha-config-cloud-login.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
diff --git a/src/panels/config/config-entries/ha-config-entries-dashboard.js b/src/panels/config/config-entries/ha-config-entries-dashboard.js
index b75f072688..c89e5f3b7f 100644
--- a/src/panels/config/config-entries/ha-config-entries-dashboard.js
+++ b/src/panels/config/config-entries/ha-config-entries-dashboard.js
@@ -1,6 +1,6 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-tooltip/paper-tooltip";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-item/paper-item";
@@ -29,7 +29,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
   static get template() {
     return html`
       <style include="iron-flex ha-style">
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -65,8 +65,8 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                   <paper-item-body>
                     [[_computeIntegrationTitle(localize, item.handler)]]
                   </paper-item-body>
-                  <paper-button on-click="_continueFlow"
-                    >[[localize('ui.panel.config.integrations.configure')]]</paper-button
+                  <mwc-button on-click="_continueFlow"
+                    >[[localize('ui.panel.config.integrations.configure')]]</mwc-button
                   >
                 </div>
               </template>
@@ -128,8 +128,8 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                 <paper-item-body>
                   [[_computeIntegrationTitle(localize, item)]]
                 </paper-item-body>
-                <paper-button on-click="_createFlow"
-                  >[[localize('ui.panel.config.integrations.configure')]]</paper-button
+                <mwc-button on-click="_createFlow"
+                  >[[localize('ui.panel.config.integrations.configure')]]</mwc-button
                 >
               </div>
             </template>
diff --git a/src/panels/config/config-entries/ha-config-flow.js b/src/panels/config/config-entries/ha-config-flow.js
index 58a4263efe..fdb37c66ef 100644
--- a/src/panels/config/config-entries/ha-config-flow.js
+++ b/src/panels/config/config-entries/ha-config-flow.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-tooltip/paper-tooltip";
@@ -102,10 +102,10 @@ class HaConfigFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </paper-dialog-scrollable>
         <div class="buttons">
           <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
-            <paper-button on-click="_flowDone">Close</paper-button>
+            <mwc-button on-click="_flowDone">Close</mwc-button>
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
-            <paper-button on-click="_flowDone">Close</paper-button>
+            <mwc-button on-click="_flowDone">Close</mwc-button>
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
             <template is="dom-if" if="[[_loading]]">
@@ -115,8 +115,8 @@ class HaConfigFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </template>
             <template is="dom-if" if="[[!_loading]]">
               <div>
-                <paper-button on-click="_submitStep" disabled="[[!_canSubmit]]"
-                  >Submit</paper-button
+                <mwc-button on-click="_submitStep" disabled="[[!_canSubmit]]"
+                  >Submit</mwc-button
                 >
                 <template is="dom-if" if="[[!_canSubmit]]">
                   <paper-tooltip position="left">
diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js
index 33cd8a72a4..ee9c3547d0 100644
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/src/panels/config/core/ha-config-section-core.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -40,7 +40,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
           font-weight: 500;
         }
 
-        .config-invalid paper-button {
+        .config-invalid mwc-button {
           float: right;
         }
 
@@ -70,9 +70,9 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
                       [[localize('ui.panel.config.core.section.core.validation.valid')]]
                     </div>
                   </template>
-                  <paper-button raised="" on-click="validateConfig">
+                  <mwc-button raised="" on-click="validateConfig">
                     [[localize('ui.panel.config.core.section.core.validation.check_config')]]
-                  </paper-button>
+                  </mwc-button>
                 </template>
                 <template is="dom-if" if="[[validating]]">
                   <paper-spinner active=""></paper-spinner>
@@ -84,9 +84,9 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
                 <span class="text">
                   [[localize('ui.panel.config.core.section.core.validation.invalid')]]
                 </span>
-                <paper-button raised="" on-click="validateConfig">
+                <mwc-button raised="" on-click="validateConfig">
                   [[localize('ui.panel.config.core.section.core.validation.check_config')]]
-                </paper-button>
+                </mwc-button>
               </div>
               <div id="configLog" class="validate-log">[[validateLog]]</div>
             </template>
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 0ac6567823..d8f7a9be34 100644
--- a/src/panels/config/entity_registry/dialog-entity-registry-detail.ts
+++ b/src/panels/config/entity_registry/dialog-entity-registry-detail.ts
@@ -98,23 +98,23 @@ class DialogEntityRegistryDetail extends LitElement {
           </div>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button
-            class="danger"
+          <mwc-button
+            class="warning"
             @click="${this._deleteEntry}"
             .disabled=${this._submitting}
           >
             ${this.hass.localize(
               "ui.panel.config.entity_registry.editor.delete"
             )}
-          </paper-button>
-          <paper-button
+          </mwc-button>
+          <mwc-button
             @click="${this._updateEntry}"
             .disabled=${invalidDomainUpdate || this._submitting}
           >
             ${this.hass.localize(
               "ui.panel.config.entity_registry.editor.update"
             )}
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -172,13 +172,7 @@ class DialogEntityRegistryDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        paper-button {
-          font-weight: 500;
-        }
-        paper-button.danger {
-          font-weight: 500;
-          color: var(--google-red-500);
-          margin-left: -12px;
+        mwc-button.warning {
           margin-right: auto;
         }
         .error {
diff --git a/src/panels/config/ha-entity-config.js b/src/panels/config/ha-entity-config.js
index f0c8a539dc..f2e0386871 100644
--- a/src/panels/config/ha-entity-config.js
+++ b/src/panels/config/ha-entity-config.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -75,17 +75,17 @@ class HaEntityConfig extends PolymerElement {
           </div>
         </div>
         <div class="card-actions">
-          <paper-button
+          <mwc-button
             on-click="saveEntity"
             disabled="[[computeShowPlaceholder(formState)]]"
-            >SAVE</paper-button
+            >SAVE</mwc-button
           >
           <template is="dom-if" if="[[allowDelete]]">
-            <paper-button
+            <mwc-button
               class="warning"
               on-click="deleteEntity"
               disabled="[[computeShowPlaceholder(formState)]]"
-              >DELETE</paper-button
+              >DELETE</mwc-button
             >
           </template>
         </div>
diff --git a/src/panels/config/js/condition/index.js b/src/panels/config/js/condition/index.js
index b568c9e63e..0bd419b52d 100644
--- a/src/panels/config/js/condition/index.js
+++ b/src/panels/config/js/condition/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
 import "@polymer/paper-card/paper-card";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import ConditionRow from "./condition_row";
 
@@ -46,9 +46,9 @@ export default class Condition extends Component {
         ))}
         <paper-card>
           <div class="card-actions add-card">
-            <paper-button onTap={this.addCondition}>
+            <mwc-button onTap={this.addCondition}>
               {localize("ui.panel.config.automation.editor.conditions.add")}
-            </paper-button>
+            </mwc-button>
           </div>
         </paper-card>
       </div>
diff --git a/src/panels/config/js/script/index.js b/src/panels/config/js/script/index.js
index 1874115c53..e04addcf52 100644
--- a/src/panels/config/js/script/index.js
+++ b/src/panels/config/js/script/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
 import "@polymer/paper-card/paper-card";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import ActionRow from "./action_row";
 
@@ -46,9 +46,9 @@ export default class Script extends Component {
         ))}
         <paper-card>
           <div class="card-actions add-card">
-            <paper-button onTap={this.addAction}>
+            <mwc-button onTap={this.addAction}>
               {localize("ui.panel.config.automation.editor.actions.add")}
-            </paper-button>
+            </mwc-button>
           </div>
         </paper-card>
       </div>
diff --git a/src/panels/config/js/trigger/index.js b/src/panels/config/js/trigger/index.js
index 6ae1411d16..fc4b8290de 100644
--- a/src/panels/config/js/trigger/index.js
+++ b/src/panels/config/js/trigger/index.js
@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
 import "@polymer/paper-card/paper-card";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import TriggerRow from "./trigger_row";
 import StateTrigger from "./state";
@@ -47,9 +47,9 @@ export default class Trigger extends Component {
         ))}
         <paper-card>
           <div class="card-actions add-card">
-            <paper-button onTap={this.addTrigger}>
+            <mwc-button onTap={this.addTrigger}>
               {localize("ui.panel.config.automation.editor.triggers.add")}
-            </paper-button>
+            </mwc-button>
           </div>
         </paper-card>
       </div>
diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts
index 4497f6204d..d44eeb8436 100644
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@@ -83,21 +83,21 @@ class DialogPersonDetail extends LitElement {
         <div class="paper-dialog-buttons">
           ${this._params.entry
             ? html`
-                <paper-button
-                  class="danger"
+                <mwc-button
+                  class="warning"
                   @click="${this._deleteEntry}"
                   .disabled=${this._submitting}
                 >
                   DELETE
-                </paper-button>
+                </mwc-button>
               `
             : html``}
-          <paper-button
+          <mwc-button
             @click="${this._updateEntry}"
             .disabled=${nameInvalid || this._submitting}
           >
             ${this._params.entry ? "UPDATE" : "CREATE"}
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -162,13 +162,7 @@ class DialogPersonDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        paper-button {
-          font-weight: 500;
-        }
-        paper-button.danger {
-          font-weight: 500;
-          color: var(--google-red-500);
-          margin-left: -12px;
+        mwc-button.warning {
           margin-right: auto;
         }
         .error {
diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index 07cc69e63e..06367c1e62 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -82,8 +82,8 @@ class HaConfigPerson extends LitElement {
               ? html`
                   <div class="empty">
                     Looks like you have no people yet!
-                    <paper-button @click=${this._createPerson}>
-                      CREATE PERSON</paper-button
+                    <mwc-button @click=${this._createPerson}>
+                      CREATE PERSON</mwc-button
                     >
                   </div>
                 `
diff --git a/src/panels/config/script/ha-script-editor.js b/src/panels/config/script/ha-script-editor.js
index 120b461a36..0104f398e9 100644
--- a/src/panels/config/script/ha-script-editor.js
+++ b/src/panels/config/script/ha-script-editor.js
@@ -47,7 +47,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         .script paper-card {
           margin-top: 16px;
         }
-        .add-card paper-button {
+        .add-card mwc-button {
           display: block;
           text-align: center;
         }
diff --git a/src/panels/config/users/ha-dialog-add-user.js b/src/panels/config/users/ha-dialog-add-user.js
index 1610d4c628..781e166055 100644
--- a/src/panels/config/users/ha-dialog-add-user.js
+++ b/src/panels/config/users/ha-dialog-add-user.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+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";
@@ -71,7 +71,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
             </div>
           </template>
           <template is="dom-if" if="[[!_loading]]">
-            <paper-button on-click="_createUser">Create</paper-button>
+            <mwc-button on-click="_createUser">Create</mwc-button>
           </template>
         </div>
       </paper-dialog>
diff --git a/src/panels/config/users/ha-user-editor.js b/src/panels/config/users/ha-user-editor.js
index 7344715fc7..9efa032a6d 100644
--- a/src/panels/config/users/ha-user-editor.js
+++ b/src/panels/config/users/ha-user-editor.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -18,7 +18,7 @@ class HaUserEditor extends EventsMixin(
 ) {
   static get template() {
     return html`
-      <style>
+      <style include="ha-style">
         paper-card {
           display: block;
           max-width: 600px;
@@ -58,12 +58,13 @@ class HaUserEditor extends EventsMixin(
         </paper-card>
         <paper-card>
           <div class="card-actions">
-            <paper-button
+            <mwc-button
+              class="warning"
               on-click="_deleteUser"
               disabled="[[user.system_generated]]"
             >
               [[localize('ui.panel.config.users.editor.delete_user')]]
-            </paper-button>
+            </mwc-button>
             <template is="dom-if" if="[[user.system_generated]]">
               Unable to remove system generated users.
             </template>
diff --git a/src/panels/config/zha/zha-cluster-attributes.ts b/src/panels/config/zha/zha-cluster-attributes.ts
index 165e336dbe..fb48bf5006 100644
--- a/src/panels/config/zha/zha-cluster-attributes.ts
+++ b/src/panels/config/zha/zha-cluster-attributes.ts
@@ -7,7 +7,7 @@ import {
   CSSResult,
   css,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "../../../components/buttons/ha-call-service-button";
@@ -145,8 +145,8 @@ export class ZHAClusterAttributes extends LitElement {
         ></paper-input>
       </div>
       <div class="card-actions">
-        <paper-button @click="${this._onGetZigbeeAttributeClick}"
-          >Get Zigbee Attribute</paper-button
+        <mwc-button @click="${this._onGetZigbeeAttributeClick}"
+          >Get Zigbee Attribute</mwc-button
         >
         <ha-call-service-button
           .hass="${this.hass}"
diff --git a/src/panels/config/zha/zha-network.ts b/src/panels/config/zha/zha-network.ts
index 55cb4a4da3..ed3370a740 100644
--- a/src/panels/config/zha/zha-network.ts
+++ b/src/panels/config/zha/zha-network.ts
@@ -6,7 +6,7 @@ import {
   CSSResult,
   css,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "../../../components/buttons/ha-call-service-button";
diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts
index 1dd11c8c0a..bc5643480b 100644
--- a/src/panels/config/zha/zha-node.ts
+++ b/src/panels/config/zha/zha-node.ts
@@ -7,7 +7,7 @@ import {
   PropertyValues,
   css,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
@@ -142,8 +142,8 @@ export class ZHANode extends LitElement {
   private _renderNodeActions(): TemplateResult {
     return html`
       <div class="card-actions">
-        <paper-button @click="${this._onReconfigureNodeClick}"
-          >Reconfigure Node</paper-button
+        <mwc-button @click="${this._onReconfigureNodeClick}"
+          >Reconfigure Node</mwc-button
         >
         ${this._showHelp
           ? html`
diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js
index dc82a3ca2b..da3a8f1c12 100644
--- a/src/panels/config/zwave/ha-config-zwave.js
+++ b/src/panels/config/zwave/ha-config-zwave.js
@@ -236,8 +236,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
                   hidden$="[[!showHelp]]"
                 >
                 </ha-service-description>
-                <paper-button on-click="_nodeMoreInfo"
-                  >Node Information</paper-button
+                <mwc-button on-click="_nodeMoreInfo"
+                  >Node Information</mwc-button
                 >
               </div>
 
@@ -277,8 +277,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
                     hidden$="[[!showHelp]]"
                   >
                   </ha-service-description>
-                  <paper-button on-click="_entityMoreInfo"
-                    >Entity Information</paper-button
+                  <mwc-button on-click="_entityMoreInfo"
+                    >Entity Information</mwc-button
                   >
                 </div>
                 <div class="form-group">
diff --git a/src/panels/config/zwave/zwave-log.js b/src/panels/config/zwave/zwave-log.js
index 3c3269e31c..a0524d08a9 100644
--- a/src/panels/config/zwave/zwave-log.js
+++ b/src/panels/config/zwave/zwave-log.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
@@ -42,8 +42,8 @@ class OzwLog extends EventsMixin(PolymerElement) {
           </paper-input>
         </div>
         <div class="card-actions">
-          <paper-button raised="true" on-click="_openLogWindow">Load</paper-button>
-          <paper-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</paper-button>
+          <mwc-button raised="true" on-click="_openLogWindow">Load</mwc-button>
+          <mwc-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</mwc-button>
       </paper-card>
     </ha-config-section>
 `;
diff --git a/src/panels/dev-event/ha-panel-dev-event.js b/src/panels/dev-event/ha-panel-dev-event.js
index 9fddd75adf..8ad0511d49 100644
--- a/src/panels/dev-event/ha-panel-dev-event.js
+++ b/src/panels/dev-event/ha-panel-dev-event.js
@@ -2,7 +2,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -68,9 +68,7 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
                 label="Event Data (JSON, optional)"
                 value="{{eventData}}"
               ></paper-textarea>
-              <paper-button on-click="fireEvent" raised
-                >Fire Event</paper-button
-              >
+              <mwc-button on-click="fireEvent" raised>Fire Event</mwc-button>
             </div>
           </div>
 
diff --git a/src/panels/dev-info/error-log-card.ts b/src/panels/dev-info/error-log-card.ts
index 88e3208c7d..46b4274492 100644
--- a/src/panels/dev-info/error-log-card.ts
+++ b/src/panels/dev-info/error-log-card.ts
@@ -7,7 +7,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { HomeAssistant } from "../../types";
 import { fetchErrorLog } from "../../data/error_log";
@@ -34,9 +34,9 @@ class ErrorLogCard extends LitElement {
               ></paper-icon-button>
             `
           : html`
-              <paper-button raised @click=${this._refreshErrorLog}>
+              <mwc-button raised @click=${this._refreshErrorLog}>
                 Load Full Home Assistant Log
-              </paper-button>
+              </mwc-button>
             `}
       </p>
       <div class="error-log">${this._errorLog}</div>
diff --git a/src/panels/dev-info/ha-panel-dev-info.ts b/src/panels/dev-info/ha-panel-dev-info.ts
index b19a134cf5..80e5aea5c2 100644
--- a/src/panels/dev-info/ha-panel-dev-info.ts
+++ b/src/panels/dev-info/ha-panel-dev-info.ts
@@ -138,9 +138,9 @@ class HaPanelDevInfo extends LitElement {
             </p>
             <p>
               <a href="${nonDefaultLink}">${nonDefaultLinkText}</a><br />
-              <paper-button @click="${this._toggleDefaultPage}" raised>
+              <mwc-button @click="${this._toggleDefaultPage}" raised>
                 ${defaultPageText}
-              </paper-button>
+              </mwc-button>
             </p>
           </div>
           <system-health-card .hass=${this.hass}></system-health-card>
diff --git a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
index 2d8647179e..7d539f1eb4 100644
--- a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
+++ b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
@@ -33,7 +33,7 @@ class HaPanelDevMqtt extends PolymerElement {
           display: block;
         }
 
-        paper-button {
+        mwc-button {
           background-color: white;
         }
       </style>
@@ -69,7 +69,7 @@ class HaPanelDevMqtt extends PolymerElement {
               ></paper-textarea>
             </div>
             <div class="card-actions">
-              <paper-button on-click="_publish">Publish</paper-button>
+              <mwc-button on-click="_publish">Publish</mwc-button>
             </div>
           </paper-card>
         </div>
diff --git a/src/panels/dev-service/ha-panel-dev-service.js b/src/panels/dev-service/ha-panel-dev-service.js
index f249a5de69..6505f1dc02 100644
--- a/src/panels/dev-service/ha-panel-dev-service.js
+++ b/src/panels/dev-service/ha-panel-dev-service.js
@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-textarea";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -131,11 +131,8 @@ class HaPanelDevService extends PolymerElement {
               autocomplete="off"
               spellcheck="false"
             ></paper-textarea>
-            <paper-button
-              on-click="_callService"
-              raised
-              disabled="[[!validJSON]]"
-              >Call Service</paper-button
+            <mwc-button on-click="_callService" raised disabled="[[!validJSON]]"
+              >Call Service</mwc-button
             >
             <template is="dom-if" if="[[!validJSON]]">
               <span class="error">Invalid JSON</span>
diff --git a/src/panels/dev-state/ha-panel-dev-state.js b/src/panels/dev-state/ha-panel-dev-state.js
index c0d495f5a9..3d51cdd7d1 100644
--- a/src/panels/dev-state/ha-panel-dev-state.js
+++ b/src/panels/dev-state/ha-panel-dev-state.js
@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
@@ -111,9 +111,7 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
               spellcheck="false"
               value="{{_stateAttributes}}"
             ></paper-textarea>
-            <paper-button on-click="handleSetState" raised
-              >Set State</paper-button
-            >
+            <mwc-button on-click="handleSetState" raised>Set State</mwc-button>
           </div>
 
           <h1>Current entities</h1>
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 8311aec7ad..d4b1a1753d 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -130,12 +130,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
             : ["disarm"]
           ).map((state) => {
             return html`
-              <paper-button
-                noink
-                raised
-                .action="${state}"
-                @click="${this._handleActionClick}"
-                >${this._label(state)}</paper-button
+              <mwc-button .action="${state}" @click="${this._handleActionClick}"
+                >${this._label(state)}</mwc-button
               >
             `;
           })}
@@ -156,17 +152,17 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
                 ${BUTTONS.map((value) => {
                   return value === ""
                     ? html`
-                        <paper-button disabled></paper-button>
+                        <mwc-button disabled></mwc-button>
                       `
                     : html`
-                        <paper-button
+                        <mwc-button
                           noink
                           raised
                           .value="${value}"
                           @click="${this._handlePadClick}"
                           >${value === "clear"
                             ? this._label("clear_code")
-                            : value}</paper-button
+                            : value}</mwc-button
                         >
                       `;
                 })}
@@ -275,7 +271,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           margin: auto;
           width: 300px;
         }
-        #keypad paper-button {
+        #keypad mwc-button {
           margin-bottom: 5%;
           width: 30%;
           padding: calc(var(--base-unit));
@@ -289,11 +285,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           justify-content: center;
           font-size: calc(var(--base-unit) * 1);
         }
-        .actions paper-button {
+        .actions mwc-button {
           min-width: calc(var(--base-unit) * 9);
           color: var(--primary-color);
         }
-        paper-button#disarm {
+        mwc-button#disarm {
           color: var(--google-red-500);
         }
       `,
diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts
index aedc6773da..3479d51db3 100644
--- a/src/panels/lovelace/cards/hui-empty-state-card.ts
+++ b/src/panels/lovelace/cards/hui-empty-state-card.ts
@@ -53,11 +53,11 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
         </div>
         <div class="card-actions">
           <a href="/config/integrations">
-            <paper-button>
+            <mwc-button>
               ${this.hass.localize(
                 "ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
               )}
-            </paper-button>
+            </mwc-button>
           </a>
         </div>
       </paper-card>
@@ -71,7 +71,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
         padding: 16px;
       }
 
-      paper-button {
+      mwc-button {
         margin-left: -8px;
         font-weight: 500;
         color: var(--primary-color);
diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts
index a20e91cbf7..3ca969886c 100644
--- a/src/panels/lovelace/cards/hui-entity-button-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-button-card.ts
@@ -4,9 +4,12 @@ import {
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import { HassEntity } from "home-assistant-js-websocket";
 import { styleMap } from "lit-html/directives/style-map";
+import "@material/mwc-ripple";
 
 import "../../../components/ha-card";
 
@@ -86,37 +89,33 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     }
     const stateObj = this.hass.states[this._config.entity];
 
+    if (!stateObj) {
+      return html`
+        <div class="not-found">
+          Entity not available: ${this._config.entity}
+        </div>
+      `;
+    }
+
     return html`
-      ${this.renderStyle()}
       <ha-card
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
       >
-        ${!stateObj
-          ? html`
-              <div class="not-found">
-                Entity not available: ${this._config.entity}
-              </div>
-            `
-          : html`
-              <paper-button>
-                <div>
-                  <ha-icon
-                    data-domain="${computeStateDomain(stateObj)}"
-                    data-state="${stateObj.state}"
-                    .icon="${this._config.icon || stateIcon(stateObj)}"
-                    style="${styleMap({
-                      filter: this._computeBrightness(stateObj),
-                      color: this._computeColor(stateObj),
-                    })}"
-                  ></ha-icon>
-                  <span>
-                    ${this._config.name || computeStateName(stateObj)}
-                  </span>
-                </div>
-              </paper-button>
-            `}
+        <ha-icon
+          data-domain="${computeStateDomain(stateObj)}"
+          data-state="${stateObj.state}"
+          .icon="${this._config.icon || stateIcon(stateObj)}"
+          style="${styleMap({
+            filter: this._computeBrightness(stateObj),
+            color: this._computeColor(stateObj),
+          })}"
+        ></ha-icon>
+        <span>
+          ${this._config.name || computeStateName(stateObj)}
+        </span>
+        <mwc-ripple></mwc-ripple>
       </ha-card>
     `;
   }
@@ -132,43 +131,36 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        ha-icon {
-          display: flex;
-          margin: auto;
-          width: 40%;
-          height: 40%;
-          color: var(--paper-item-icon-color, #44739e);
-        }
-        ha-icon[data-domain="light"][data-state="on"],
-        ha-icon[data-domain="switch"][data-state="on"],
-        ha-icon[data-domain="binary_sensor"][data-state="on"],
-        ha-icon[data-domain="fan"][data-state="on"],
-        ha-icon[data-domain="sun"][data-state="above_horizon"] {
-          color: var(--paper-item-icon-active-color, #fdd835);
-        }
-        ha-icon[data-state="unavailable"] {
-          color: var(--state-icon-unavailable-color);
-        }
-        state-badge {
-          display: flex;
-          margin: auto;
-          width: 40%;
-          height: 40%;
-        }
-        paper-button {
-          display: flex;
-          margin: auto;
-          text-align: center;
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
+  static get styles(): CSSResult {
+    return css`
+      ha-card {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 4% 0;
+        font-size: 1.2rem;
+      }
+      ha-icon {
+        width: 40%;
+        height: auto;
+        color: var(--paper-item-icon-color, #44739e);
+      }
+      ha-icon[data-domain="light"][data-state="on"],
+      ha-icon[data-domain="switch"][data-state="on"],
+      ha-icon[data-domain="binary_sensor"][data-state="on"],
+      ha-icon[data-domain="fan"][data-state="on"],
+      ha-icon[data-domain="sun"][data-state="above_horizon"] {
+        color: var(--paper-item-icon-active-color, #fdd835);
+      }
+      ha-icon[data-state="unavailable"] {
+        color: var(--state-icon-unavailable-color);
+      }
+      .not-found {
+        flex: 1;
+        background-color: yellow;
+        padding: 8px;
+      }
     `;
   }
 
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 52ed479310..fcc0652418 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyDeclarations } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
@@ -42,7 +42,7 @@ export class HuiCardOptions extends LitElement {
           flex: 4;
           text-align: right;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }
@@ -69,10 +69,10 @@ export class HuiCardOptions extends LitElement {
       <slot></slot>
       <div class="options">
         <div class="primary-actions">
-          <paper-button @click="${this._editCard}"
+          <mwc-button @click="${this._editCard}"
             >${this.hass!.localize(
               "ui.panel.lovelace.editor.edit_card.edit"
-            )}</paper-button
+            )}</mwc-button
           >
         </div>
         <div class="secondary-actions">
diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts
index 98bc7687ad..318e42add8 100644
--- a/src/panels/lovelace/components/hui-theme-select-editor.ts
+++ b/src/panels/lovelace/components/hui-theme-select-editor.ts
@@ -4,7 +4,7 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { HomeAssistant } from "../../../types";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
diff --git a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
index 0a480f4332..020a4b2821 100644
--- a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -23,8 +23,8 @@ export class HuiConfiguratorNotificationItem extends EventsMixin(
 
         <div>[[_getMessage(notification)]]</div>
 
-        <paper-button slot="actions" class="primary" on-click="_handleClick"
-          >[[_localizeState(notification.state)]]</paper-button
+        <mwc-button slot="actions" on-click="_handleClick"
+          >[[_localizeState(notification.state)]]</mwc-button
         >
       </hui-notification-item-template>
     `;
diff --git a/src/panels/lovelace/components/notifications/hui-notification-drawer.js b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
index dc561fa06d..5b3aa7037b 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-drawer.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.js b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
index f949c9e749..a7b091849a 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item-template.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";
diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.js b/src/panels/lovelace/components/notifications/hui-notifications-button.js
index ddd8cc8ad6..6ecf1ec920 100644
--- a/src/panels/lovelace/components/notifications/hui-notifications-button.js
+++ b/src/panels/lovelace/components/notifications/hui-notifications-button.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 
diff --git a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
index b4db796b4c..d763ab3838 100644
--- a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-tooltip/paper-tooltip";
 
@@ -49,8 +49,8 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(
           </span>
         </div>
 
-        <paper-button slot="actions" class="primary" on-click="_handleDismiss"
-          >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
+        <mwc-button slot="actions" on-click="_handleDismiss"
+          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
         >
       </hui-notification-item-template>
     `;
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index cf6c230559..869a376f54 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -1,5 +1,5 @@
 import { html, css, LitElement, TemplateResult, CSSResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -45,12 +45,9 @@ export class HuiCardPicker extends LitElement {
       <div class="cards-container">
         ${cards.map((card) => {
           return html`
-            <paper-button
-              raised
-              @click="${this._cardPicked}"
-              .type="${card.type}"
-              >${card.name}</paper-button
-            >
+            <mwc-button @click="${this._cardPicked}" .type="${card.type}">
+              ${card.name}
+            </mwc-button>
           `;
         })}
       </div>
@@ -65,11 +62,13 @@ export class HuiCardPicker extends LitElement {
           flex-wrap: wrap;
           margin-bottom: 10px;
         }
-        .cards-container paper-button {
+        .cards-container mwc-button {
           flex: 1 0 25%;
+          margin: 4px;
         }
+
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          .cards-container paper-button {
+          .cards-container mwc-button {
             flex: 1 0 33%;
           }
         }
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 fa1b628d39..ded2d651b8 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
@@ -41,7 +41,7 @@ export class HuiDialogPickCard extends LitElement {
           ></hui-card-picker>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button @click="${this._skipPick}">MANUAL CARD</paper-button>
+          <mwc-button @click="${this._skipPick}">MANUAL CARD</mwc-button>
         </div>
       </paper-dialog>
     `;
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 1e08ff49dd..6b1a65a5cc 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -17,7 +17,7 @@ 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 "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -160,7 +160,7 @@ export class HuiEditCard extends LitElement {
         ${!this._loading
           ? html`
               <div class="paper-dialog-buttons">
-                <paper-button
+                <mwc-button
                   class="toggle-button"
                   ?hidden="${!this._configValue || !this._configValue.value}"
                   ?disabled="${this._configElement === null ||
@@ -168,12 +168,12 @@ export class HuiEditCard extends LitElement {
                   @click="${this._toggleEditor}"
                   >${this.hass!.localize(
                     "ui.panel.lovelace.editor.edit_card.toggle_editor"
-                  )}</paper-button
+                  )}</mwc-button
                 >
-                <paper-button @click="${this.closeDialog}"
-                  >${this.hass!.localize("ui.common.cancel")}</paper-button
+                <mwc-button @click="${this.closeDialog}"
+                  >${this.hass!.localize("ui.common.cancel")}</mwc-button
                 >
-                <paper-button
+                <mwc-button
                   ?hidden="${!this._configValue || !this._configValue.value}"
                   ?disabled="${this._saving || this._configState !== "OK"}"
                   @click="${this._save}"
@@ -182,7 +182,7 @@ export class HuiEditCard extends LitElement {
                     ?active="${this._saving}"
                     alt="Saving"
                   ></paper-spinner>
-                  ${this.hass!.localize("ui.common.save")}</paper-button
+                  ${this.hass!.localize("ui.common.save")}</mwc-button
                 >
               </div>
             `
@@ -469,7 +469,7 @@ export class HuiEditCard extends LitElement {
         .margin-bot {
           margin-bottom: 24px;
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index f93662bb99..1b1f15c2df 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -12,7 +12,7 @@ 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 "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { haStyleDialog } from "../../../resources/ha-style";
 
@@ -65,22 +65,19 @@ export class HuiSaveConfig extends LitElement {
           </p>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button @click="${this._closeDialog}"
+          <mwc-button @click="${this._closeDialog}"
             >${this.hass!.localize(
               "ui.panel.lovelace.editor.save_config.cancel"
-            )}</paper-button
-          >
-          <paper-button
-            ?disabled="${this._saving}"
-            @click="${this._saveConfig}"
+            )}</mwc-button
           >
+          <mwc-button ?disabled="${this._saving}" @click="${this._saveConfig}">
             <paper-spinner
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
             ${this.hass!.localize(
               "ui.panel.lovelace.editor.save_config.save"
-            )}</paper-button
+            )}</mwc-button
           >
         </div>
       </paper-dialog>
@@ -133,7 +130,7 @@ export class HuiSaveConfig extends LitElement {
         paper-spinner[active] {
           display: block;
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;
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 eb8d89deb4..8b743e13ea 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
@@ -11,7 +11,7 @@ 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 "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
 import { haStyleDialog } from "../../../../resources/ha-style";
@@ -67,10 +67,10 @@ export class HuiDialogEditLovelace extends LitElement {
           ></hui-lovelace-editor
         ></paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button @click="${this._closeDialog}"
-            >${this.hass!.localize("ui.common.cancel")}</paper-button
+          <mwc-button @click="${this._closeDialog}"
+            >${this.hass!.localize("ui.common.cancel")}</mwc-button
           >
-          <paper-button
+          <mwc-button
             ?disabled="${!this._config || this._saving}"
             @click="${this._save}"
           >
@@ -78,7 +78,7 @@ export class HuiDialogEditLovelace extends LitElement {
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
-            ${this.hass!.localize("ui.common.save")}</paper-button
+            ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
       </paper-dialog>
@@ -147,7 +147,7 @@ export class HuiDialogEditLovelace extends LitElement {
         paper-dialog {
           max-width: 650px;
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;
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 767f86e88c..d95a5c4d12 100644
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@@ -15,7 +15,7 @@ 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 "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
 import { haStyleDialog } from "../../../../resources/ha-style";
@@ -144,10 +144,10 @@ export class HuiEditView extends LitElement {
                 ></paper-icon-button>
               `
             : ""}
-          <paper-button @click="${this._closeDialog}"
-            >${this.hass!.localize("ui.common.cancel")}</paper-button
+          <mwc-button @click="${this._closeDialog}"
+            >${this.hass!.localize("ui.common.cancel")}</mwc-button
           >
-          <paper-button
+          <mwc-button
             ?disabled="${!this._config || this._saving}"
             @click="${this._save}"
           >
@@ -155,7 +155,7 @@ export class HuiEditView extends LitElement {
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
-            ${this.hass!.localize("ui.common.save")}</paper-button
+            ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
       </paper-dialog>
@@ -288,7 +288,7 @@ export class HuiEditView extends LitElement {
           text-transform: uppercase;
           border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;
diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
index 268458ef26..420185b4d8 100644
--- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
@@ -47,11 +47,11 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
     return html`
       ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
-        <paper-button @click="${this._callService}">
+        <mwc-button @click="${this._callService}">
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")
             : this.hass!.localize("ui.card.lock.lock")}
-        </paper-button>
+        </mwc-button>
       </hui-generic-entity-row>
     `;
   }
@@ -59,7 +59,7 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
   protected renderStyle(): TemplateResult {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;
diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
index b285565395..045dba7df9 100644
--- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
@@ -56,9 +56,9 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
               ></ha-entity-toggle>
             `
           : html`
-              <paper-button @click="${this._callService}">
+              <mwc-button @click="${this._callService}">
                 ${this.hass!.localize("ui.card.scene.activate")}
-              </paper-button>
+              </mwc-button>
             `}
       </hui-generic-entity-row>
     `;
@@ -67,7 +67,7 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
   protected renderStyle(): TemplateResult {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;
diff --git a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts
index ed4d9273cd..3a31251d14 100644
--- a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts
@@ -56,9 +56,9 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
               ></ha-entity-toggle>
             `
           : html`
-              <paper-button @click="${this._callService}">
+              <mwc-button @click="${this._callService}">
                 ${this.hass!.localize("ui.card.script.execute")}
-              </paper-button>
+              </mwc-button>
             `}
       </hui-generic-entity-row>
     `;
@@ -67,7 +67,7 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
   protected renderStyle(): TemplateResult {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;
diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index d95a95f9b1..ff7b39ab10 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { fetchConfig, LovelaceConfig, saveConfig } from "../../data/lovelace";
 import "../../layouts/hass-loading-screen";
@@ -74,7 +74,7 @@ class LovelacePanel extends LitElement {
     if (state === "error") {
       return html`
         <style>
-          paper-button {
+          mwc-button {
             color: var(--primary-color);
             font-weight: 500;
           }
@@ -85,9 +85,7 @@ class LovelacePanel extends LitElement {
           .narrow="${this.narrow}"
           .showMenu="${this.showMenu}"
         >
-          <paper-button on-click="_forceFetchConfig"
-            >Reload Lovelace</paper-button
-          >
+          <mwc-button on-click="_forceFetchConfig">Reload Lovelace</mwc-button>
         </hass-error-screen>
       `;
     }
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index f92de99ca8..5b00147096 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -5,7 +5,7 @@ import yaml from "js-yaml";
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-spinner/paper-spinner";
 
@@ -53,7 +53,7 @@ class LovelaceFullConfigEditor extends LitElement {
               @click="${this._closeEditor}"
             ></paper-icon-button>
             <div main-title>Edit Config</div>
-            <paper-button @click="${this._handleSave}">Save</paper-button>
+            <mwc-button raised @click="${this._handleSave}">Save</mwc-button>
             <ha-icon
               class="save-button
             ${classMap({
@@ -92,9 +92,7 @@ class LovelaceFullConfigEditor extends LitElement {
         app-header-layout {
           height: 100vh;
         }
-        paper-button {
-          font-size: 16px;
-        }
+
         app-toolbar {
           background-color: var(--dark-background-color, #455a64);
           color: var(--dark-text-color);
@@ -114,8 +112,8 @@ class LovelaceFullConfigEditor extends LitElement {
 
         .save-button {
           opacity: 0;
-          margin-left: -16px;
-          margin-top: -4px;
+          margin-left: -21px;
+          margin-top: -1px;
           transition: opacity 1.5s;
         }
 
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 3c07001b5f..25dadaebb3 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -14,7 +14,7 @@ import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/app-route/app-route";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-menu-button/paper-menu-button";
@@ -296,14 +296,14 @@ class HUIRoot extends LitElement {
                     )}
                     ${this._editMode
                       ? html`
-                          <paper-button id="add-view" @click="${this._addView}">
-                            <ha-icon
-                              title="${this.hass!.localize(
-                                "ui.panel.lovelace.editor.edit_view.add"
-                              )}"
-                              icon="hass:plus"
-                            ></ha-icon>
-                          </paper-button>
+                          <paper-icon-button
+                            id="add-view"
+                            @click="${this._addView}"
+                            title="${this.hass!.localize(
+                              "ui.panel.lovelace.editor.edit_view.add"
+                            )}"
+                            icon="hass:plus"
+                          ></paper-icon-button>
                         `
                       : ""}
                   </paper-tabs>
@@ -371,7 +371,7 @@ class HUIRoot extends LitElement {
         app-toolbar a {
           color: var(--text-primary-color, white);
         }
-        paper-button.warning:not([disabled]) {
+        mwc-button.warning:not([disabled]) {
           color: var(--google-red-500);
         }
         #view {
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.ts b/src/panels/lovelace/special-rows/hui-call-service-row.ts
index 608016e217..0302a6bdeb 100644
--- a/src/panels/lovelace/special-rows/hui-call-service-row.ts
+++ b/src/panels/lovelace/special-rows/hui-call-service-row.ts
@@ -1,5 +1,5 @@
 import { html, LitElement, TemplateResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import "../../../components/ha-icon";
 
@@ -36,8 +36,8 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
       <ha-icon .icon="${this._config.icon}"></ha-icon>
       <div class="flex">
         <div>${this._config.name}</div>
-        <paper-button @click="${this._callService}"
-          >${this._config.action_name}</paper-button
+        <mwc-button @click="${this._callService}"
+          >${this._config.action_name}</mwc-button
         >
       </div>
     `;
@@ -67,7 +67,7 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
           overflow: hidden;
           text-overflow: ellipsis;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;
diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js
index c105f1f73a..6ac06c5c8a 100644
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+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";
diff --git a/src/panels/mailbox/ha-panel-mailbox.js b/src/panels/mailbox/ha-panel-mailbox.js
index 2d10df3961..9a75bb124f 100644
--- a/src/panels/mailbox/ha-panel-mailbox.js
+++ b/src/panels/mailbox/ha-panel-mailbox.js
@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item-body";
diff --git a/src/panels/profile/ha-change-password-card.js b/src/panels/profile/ha-change-password-card.js
index 75e7c45d68..8164f93fa5 100644
--- a/src/panels/profile/ha-change-password-card.js
+++ b/src/panels/profile/ha-change-password-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-card/paper-card";
@@ -78,8 +78,8 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
               <div><paper-spinner active></paper-spinner></div>
             </template>
             <template is="dom-if" if="[[!_loading]]">
-              <paper-button on-click="_changePassword"
-                >[[localize('ui.panel.profile.change_password.submit')]]</paper-button
+              <mwc-button on-click="_changePassword"
+                >[[localize('ui.panel.profile.change_password.submit')]]</mwc-button
               >
             </template>
           </div>
diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.js b/src/panels/profile/ha-long-lived-access-tokens-card.js
index 3493bc20bd..3a582d993f 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.js
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -61,9 +61,9 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
           </ha-settings-row>
         </template>
         <div class="card-actions">
-          <paper-button on-click="_handleCreate">
+          <mwc-button on-click="_handleCreate">
             [[localize('ui.panel.profile.long_lived_access_tokens.create')]]
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-card>
     `;
diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js
index 27f7da490e..f8feef4a72 100644
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
@@ -107,13 +107,13 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </paper-dialog-scrollable>
         <div class="buttons">
           <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
-            <paper-button on-click="_flowDone"
-              >[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button
+            <mwc-button on-click="_flowDone"
+              >[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
             >
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
-            <paper-button on-click="_flowDone"
-              >[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button
+            <mwc-button on-click="_flowDone"
+              >[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
             >
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
@@ -123,8 +123,8 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
               </div>
             </template>
             <template is="dom-if" if="[[!_loading]]">
-              <paper-button on-click="_submitStep"
-                >[[localize('ui.panel.profile.mfa_setup.submit')]]</paper-button
+              <mwc-button on-click="_submitStep"
+                >[[localize('ui.panel.profile.mfa_setup.submit')]]</mwc-button
               >
             </template>
           </template>
diff --git a/src/panels/profile/ha-mfa-modules-card.js b/src/panels/profile/ha-mfa-modules-card.js
index 50d07606f5..bae240bbf5 100644
--- a/src/panels/profile/ha-mfa-modules-card.js
+++ b/src/panels/profile/ha-mfa-modules-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
@@ -36,7 +36,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           max-width: 600px;
           margin: 16px auto;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;
@@ -50,13 +50,13 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
               <div secondary="">[[module.id]]</div>
             </paper-item-body>
             <template is="dom-if" if="[[module.enabled]]">
-              <paper-button on-click="_disable"
-                >[[localize('ui.panel.profile.mfa.disable')]]</paper-button
+              <mwc-button on-click="_disable"
+                >[[localize('ui.panel.profile.mfa.disable')]]</mwc-button
               >
             </template>
             <template is="dom-if" if="[[!module.enabled]]">
-              <paper-button on-click="_enable"
-                >[[localize('ui.panel.profile.mfa.enable')]]</paper-button
+              <mwc-button on-click="_enable"
+                >[[localize('ui.panel.profile.mfa.enable')]]</mwc-button
               >
             </template>
           </paper-item>
diff --git a/src/panels/profile/ha-panel-profile.js b/src/panels/profile/ha-panel-profile.js
index b07f16b943..f6672183c5 100644
--- a/src/panels/profile/ha-panel-profile.js
+++ b/src/panels/profile/ha-panel-profile.js
@@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -86,8 +86,8 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
             ></ha-push-notifications-row>
 
             <div class="card-actions">
-              <paper-button class="warning" on-click="_handleLogOut"
-                >[[localize('ui.panel.profile.logout')]]</paper-button
+              <mwc-button class="warning" on-click="_handleLogOut"
+                >[[localize('ui.panel.profile.logout')]]</mwc-button
               >
             </div>
           </paper-card>
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 8d903f96cc..fa9902c0cb 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -43,23 +43,8 @@ export const haStyle = css`
     text-decoration: none;
   }
 
-  .card-actions paper-button:not([disabled]),
-  .card-actions ha-progress-button:not([disabled]),
-  .card-actions ha-call-api-button:not([disabled]),
-  .card-actions ha-call-service-button:not([disabled]) {
-    color: var(--primary-color);
-    font-weight: 500;
-  }
-
-  .card-actions paper-button.warning:not([disabled]),
-  .card-actions ha-call-api-button.warning:not([disabled]),
-  .card-actions ha-call-service-button.warning:not([disabled]) {
-    color: var(--google-red-500);
-  }
-
-  .card-actions paper-button[primary] {
-    background-color: var(--primary-color);
-    color: var(--text-primary-color);
+  .card-actions .warning {
+    --mdc-theme-primary: var(--google-red-500);
   }
 `;
 
@@ -78,6 +63,16 @@ export const haStyleDialog = css`
     }
   }
 
+  .paper-dialog-buttons {
+    height: 56px;
+    align-items: flex-end;
+    padding: 8px;
+  }
+
+  .paper-dialog-buttons .warning {
+    --mdc-theme-primary: var(--google-red-500);
+  }
+
   @media all and (max-width: 450px), all and (max-height: 500px) {
     paper-dialog {
       margin: 0;
@@ -213,6 +208,9 @@ documentContainer.innerHTML = `<custom-style>
       --paper-slider-secondary-color: var(--slider-secondary-color);
       --paper-slider-container-color: var(--slider-bar-color);
       --ha-paper-slider-pin-font-size: 15px;
+
+      /* mwc */
+      --mdc-theme-primary: var(--primary-color);
     }
   </style>
 
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 4b8449ff40..daacf85736 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -15,7 +15,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -26,8 +26,8 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <paper-button hidden$="[[inDialog]]"
-          >[[_localizeState(stateObj.state)]]</paper-button
+        <mwc-button hidden$="[[inDialog]]"
+          >[[_localizeState(stateObj.state)]]</mwc-button
         >
       </div>
 
diff --git a/src/state-summary/state-card-lock.js b/src/state-summary/state-card-lock.js
index d3fa3c4c0d..63fbb5da19 100644
--- a/src/state-summary/state-card-lock.js
+++ b/src/state-summary/state-card-lock.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -15,7 +15,7 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -26,17 +26,17 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <paper-button
+        <mwc-button
           on-click="_callService"
           data-service="unlock"
           hidden$="[[!isLocked]]"
-          >[[localize('ui.card.lock.unlock')]]</paper-button
+          >[[localize('ui.card.lock.unlock')]]</mwc-button
         >
-        <paper-button
+        <mwc-button
           on-click="_callService"
           data-service="lock"
           hidden$="[[isLocked]]"
-          >[[localize('ui.card.lock.lock')]]</paper-button
+          >[[localize('ui.card.lock.lock')]]</mwc-button
         >
       </div>
     `;
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
index 02ab4491d6..c7fe6bac67 100644
--- a/src/state-summary/state-card-scene.js
+++ b/src/state-summary/state-card-scene.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -14,7 +14,7 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -25,8 +25,8 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <paper-button on-click="activateScene"
-          >[[localize('ui.card.scene.activate')]]</paper-button
+        <mwc-button on-click="activateScene"
+          >[[localize('ui.card.scene.activate')]]</mwc-button
         >
       </div>
     `;
diff --git a/src/state-summary/state-card-script.js b/src/state-summary/state-card-script.js
index d74b04f890..cb130da21e 100644
--- a/src/state-summary/state-card-script.js
+++ b/src/state-summary/state-card-script.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -16,7 +16,7 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -38,8 +38,8 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
           ></ha-entity-toggle>
         </template>
         <template is="dom-if" if="[[!stateObj.attributes.can_cancel]]">
-          <paper-button on-click="fireScript"
-            >[[localize('ui.card.script.execute')]]</paper-button
+          <mwc-button on-click="fireScript"
+            >[[localize('ui.card.script.execute')]]</mwc-button
           >
         </template>
       </div>
diff --git a/src/util/show-new-frontend-toast.js b/src/util/show-new-frontend-toast.js
index 11c54cc41c..af27ddbab1 100644
--- a/src/util/show-new-frontend-toast.js
+++ b/src/util/show-new-frontend-toast.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "../components/ha-toast";
 
 export default (installingWorker) => {
@@ -7,7 +7,7 @@ export default (installingWorker) => {
   toast.text = "A new version of the frontend is available.";
   toast.duration = 0;
 
-  const button = document.createElement("paper-button");
+  const button = document.createElement("mwc-button");
   button.addEventListener("click", () =>
     installingWorker.postMessage({ type: "skipWaiting" })
   );
diff --git a/yarn.lock b/yarn.lock
index 17185f5b93..318b196f2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -728,6 +728,99 @@
     log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
+"@material/animation@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-0.40.1.tgz#c5ff31e7d7e17324a0045e889d3530b150b9fcec"
+  integrity sha512-HtxFUw04EHg4S6pXfTA3Z0wKxnNDNcDhe1Np2Y2geo+lAk2Hb7m8yCL/GaL9o2I/eRYsgUXC0U7+Mk74GCz3zw==
+
+"@material/base@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-0.40.1.tgz#a0d8e19cee98dae0f96dbf0887a14b3f7acd2aac"
+  integrity sha512-vrbOK8hONVCYgURQ9h7nkXvMdYnZVVNmAfFFijF8fbWQdwnoPcNTdqV6RoQlhBEqHYHQqLNfdUDlznAPKLclGQ==
+
+"@material/button@^0.40.0":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/button/-/button-0.40.1.tgz#b5a8657f7d3783d7fc0936f95d0187bdb0319eae"
+  integrity sha512-xLNjq9zySnpZAP4UynyeXnnlLXf3iIA/6ilecwgF4d2ooUmNXcRdlRa8wGYT36JHsCfsP3AeZOjoTZUcmaiejw==
+  dependencies:
+    "@material/elevation" "^0.40.1"
+    "@material/ripple" "^0.40.1"
+    "@material/rtl" "^0.40.1"
+    "@material/shape" "^0.40.1"
+    "@material/theme" "^0.40.1"
+    "@material/typography" "^0.40.1"
+
+"@material/elevation@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-0.40.1.tgz#beb17eb90bde94459c41cd826c2de13f13b10b25"
+  integrity sha512-VD9ii90WzI+t4df08A9hQIsYLH/N+85a2Mqo10CNVZLZYW5fDOwFH/h7553aNoAuSHKPcGCLdyav9J9oC6TSaQ==
+  dependencies:
+    "@material/animation" "^0.40.1"
+    "@material/theme" "^0.40.1"
+
+"@material/mwc-base@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-base/-/mwc-base-0.3.6.tgz#44382945509602adc3ba07b554e81e0f24810873"
+  integrity sha512-DVwsTJYCMSgIXzh7yGdn0CW11qz7/QaimPGbQ1jo4zyV/aizbetpKwFlkJj9Ut45/cCqZMlXIU2valjoO0dU8g==
+  dependencies:
+    lit-element "^2.0.0-rc.2"
+    lit-html "^1.0.0-rc.2"
+
+"@material/mwc-button@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-button/-/mwc-button-0.3.6.tgz#86a05fe27ad365fd5f7d98d4840ef0def5f72096"
+  integrity sha512-ueIyVqSklgMFvlVJFszzlQSwDBvCQtM7FXWBpMGPiUFbzyESb1Wy3e7K0RaeHWzWolUrq9INl9Tt+15i1hnBhA==
+  dependencies:
+    "@material/button" "^0.40.0"
+    "@material/mwc-base" "^0.3.6"
+    "@material/mwc-icon" "^0.3.6"
+    "@material/mwc-ripple" "^0.3.6"
+
+"@material/mwc-icon@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-icon/-/mwc-icon-0.3.6.tgz#0a4fe6984300f240b0a3371e037c9fd59957c40f"
+  integrity sha512-ssdZSY1z2i9n974iXZiy26wZzMAd4/LkPCbHtpUAOqxWLq+8r3djmPuoKhIdiI4YCarpBOpgm8HQEuHdvClkGw==
+  dependencies:
+    "@material/mwc-base" "^0.3.6"
+
+"@material/mwc-ripple@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-ripple/-/mwc-ripple-0.3.6.tgz#27d7748e6d1cf45e2ce299d0786440217bf0b3c9"
+  integrity sha512-fCqIoHX5M7qW2iOitEIlJF0TBl1IhzHpXb1lroXBv1JlGGYWWSd5m+v7ZSJU3Apc8s/IkPsDDCk1vSHv6VyOwA==
+  dependencies:
+    "@material/mwc-base" "^0.3.6"
+    "@material/ripple" "^0.40.0"
+    lit-html "^1.0.0"
+
+"@material/ripple@^0.40.0", "@material/ripple@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-0.40.1.tgz#57cbc689303b48282229cb9b62556af7442e852a"
+  integrity sha512-sndeTS4VHa0v1UGj7MNcxMCuO9LJ1DjoL1EjE6BH3Lm3M1MnXJHdsBo2CgPbU/FI84tt6+eyHGOYPdPrEDJhCA==
+  dependencies:
+    "@material/animation" "^0.40.1"
+    "@material/base" "^0.40.1"
+    "@material/theme" "^0.40.1"
+
+"@material/rtl@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-0.40.1.tgz#5b0d973e3c6f8e2ea3656c06ada37ba2fedfa206"
+  integrity sha512-Pk6Iw1/KrhWZoZtkDsPMDUW0bm7Z1zeXb3MTQRCFmjf1wU5cRxgOTtuoZLcJqlcKGppLAzJL/TJV3E7KEiuL0A==
+
+"@material/shape@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/shape/-/shape-0.40.1.tgz#bd4224902896c3d45fab353d788fe6c4866483a8"
+  integrity sha512-o1pw5+s/jWqsKbUAkCCaEcB8XLqJ4FlZhYfSvxZ88WRw9zoWOt9iQMMP82wLWhUX1DSzpNRI8BAD7aNLK6yRlA==
+
+"@material/theme@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-0.40.1.tgz#3cc3f1bf87ee9581df03e347a1979e53ae617221"
+  integrity sha512-cH1CsGIDisEQ2oroZhLTypV0Ir00x3WIwFXnPo7qv3832tuIDkZY623U3rUax6KNPz4Hh1j0tNpTwgrNZwvwWA==
+
+"@material/typography@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-0.40.1.tgz#68ecb767f7c54ca2f4053cccdd1c4a0198e60f9b"
+  integrity sha512-LkW2tAsId8zGKxGA5VIFXV/D1h4vCHQIuALRMaDpHbNGffgr2ubtJNvCh2EQkm19MTv4igVLEjn1Svh0dXcTpA==
+
 "@mdi/svg@^3.0.39":
   version "3.3.92"
   resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-3.3.92.tgz#40a12670c46ed7673943b219e8410f90d0996e64"
@@ -1065,16 +1158,6 @@
     "@polymer/paper-ripple" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/paper-button@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-button/-/paper-button-3.0.1.tgz#f13b019137e3f6ccc4d04d0b1f27f4830ea5774d"
-  integrity sha512-JRNBc+Oj9EWnmyLr7FcCr8T1KAnEHPh6mosln9BUdkM+qYaYsudSICh3cjTIbnj6AuF5OJidoLkM1dlyj0j6Zg==
-  dependencies:
-    "@polymer/iron-flex-layout" "^3.0.0-pre.26"
-    "@polymer/paper-behaviors" "^3.0.0-pre.27"
-    "@polymer/paper-styles" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/paper-card@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/paper-card/-/paper-card-3.0.1.tgz#fb5960b3e55fab56d20b7c1c3dee08f0d052ff2a"
@@ -8695,14 +8778,14 @@ listr@^0.14.2:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
-lit-element@^2.0.0:
+lit-element@^2.0.0, lit-element@^2.0.0-rc.2:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.0.1.tgz#9ec5871d3b64487f432c7c071df80ef031d7091b"
   integrity sha512-2bu3B2ZYUZgntvOgu3i5mRK8geo45CLUwxwJEYK54hyednoJasjiTZPB13NBg1D+hNM2JfmWTWJnh1QEUQv7zw==
   dependencies:
     lit-html "^1.0.0"
 
-lit-html@^1.0.0:
+lit-html@^1.0.0, lit-html@^1.0.0-rc.2:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.0.0.tgz#3dc3781a8ca68a9b5c2ff2a61e263662b9b2267b"
   integrity sha512-oeWlpLmBW3gFl7979Wol2LKITpmKTUFNn7PnFbh6YNynF61W74l6x5WhwItAwPRSATpexaX1egNnRzlN4GOtfQ==