diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index ad92d4a9f8..77f0ca4199 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -17,6 +17,7 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-tabs/paper-tab";
+import "@polymer/paper-tabs/paper-tabs";
 import {
   css,
   CSSResult,
@@ -381,7 +382,7 @@ class HUIRoot extends LitElement {
           ${this._editMode
             ? html`
                 <div sticky>
-                  <ha-tabs
+                  <paper-tabs
                     scrollable
                     .selected="${this._curView}"
                     @iron-activate="${this._handleViewSelected}"
@@ -461,7 +462,7 @@ class HUIRoot extends LitElement {
                           </mwc-icon-button>
                         `
                       : ""}
-                  </ha-tabs>
+                  </paper-tabs>
                 </div>
               `
             : ""}
@@ -798,13 +799,17 @@ class HUIRoot extends LitElement {
           width: 100%;
           height: 100%;
           margin-left: 4px;
+        }
+        paper-tabs {
+          margin-left: 12px;
+          margin-left: max(env(safe-area-inset-left), 12px);
+          margin-right: env(safe-area-inset-right);
+        }
+        ha-tabs, paper-tabs {
           --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
           text-transform: uppercase;
         }
-        .edit-mode ha-tabs {
-          margin-left: max(env(safe-area-inset-left), 24px);
-          margin-right: max(env(safe-area-inset-right), 24px);
-        }
+
         .edit-mode {
           background-color: var(--dark-color, #455a64);
           color: var(--text-dark-color);