diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts
index 23b05c935d..c614aced17 100644
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -67,7 +67,7 @@ class HassioAddonDashboard extends LitElement {
       addonTabs.push({
         name: "Documentation",
         path: `/hassio/addon/${this.addon.slug}/documentation`,
-        icon: "mdi:text-box",
+        icon: "mdi:file-document",
       });
     }
 
diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts
index a6f8bd9ca4..63a8aad5f0 100644
--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -32,7 +32,7 @@ import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import "../../src/resources/ha-style";
 import { HomeAssistant } from "../../src/types";
 // Don't codesplit it, that way the dashboard always loads fast.
-import "./hassio-pages-with-tabs";
+import "./hassio-panel";
 
 // The register callback of the IronA11yKeysBehavior inside paper-icon-button
 // is not called, causing _keyBindings to be uninitiliazed for paper-icon-button,
@@ -55,7 +55,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
     showLoading: true,
     routes: {
       dashboard: {
-        tag: "hassio-pages-with-tabs",
+        tag: "hassio-panel",
         cache: true,
       },
       snapshots: "dashboard",
@@ -132,8 +132,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
 
   protected updatePageEl(el) {
     // the tabs page does its own routing so needs full route.
-    const route =
-      el.nodeName === "HASSIO-PAGES-WITH-TABS" ? this.route : this.routeTail;
+    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
 
     if ("setProperties" in el) {
       // As long as we have Polymer pages
diff --git a/hassio/src/hassio-pages-with-tabs.ts b/hassio/src/hassio-pages-with-tabs.ts
deleted file mode 100644
index ba646f42a1..0000000000
--- a/hassio/src/hassio-pages-with-tabs.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-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-icon-button/paper-icon-button";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import scrollToTarget from "../../src/common/dom/scroll-to-target";
-import { navigate } from "../../src/common/navigate";
-import "../../src/components/ha-menu-button";
-import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
-import {
-  HassioHomeAssistantInfo,
-  HassioSupervisorInfo,
-} from "../../src/data/hassio/supervisor";
-import "../../src/resources/ha-style";
-import { haStyle } from "../../src/resources/styles";
-import { HomeAssistant, Route } from "../../src/types";
-import "./hassio-tabs-router";
-
-const HAS_REFRESH_BUTTON = ["store", "snapshots"];
-
-@customElement("hassio-pages-with-tabs")
-class HassioPagesWithTabs extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public narrow!: boolean;
-
-  @property() public route!: Route;
-
-  @property() public supervisorInfo!: HassioSupervisorInfo;
-
-  @property() public hostInfo!: HassioHostInfo;
-
-  @property() public hassInfo!: HassioHomeAssistantInfo;
-
-  @property() public hassOsInfo!: HassioHassOSInfo;
-
-  protected render(): TemplateResult {
-    const page = this._page;
-    return html`
-      <app-header-layout has-scrolling-region>
-        <app-header fixed slot="header">
-          <app-toolbar>
-            <ha-menu-button
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-              hassio
-            ></ha-menu-button>
-            <div main-title>Supervisor</div>
-            ${HAS_REFRESH_BUTTON.includes(page)
-              ? html`
-                  <paper-icon-button
-                    icon="hassio:refresh"
-                    @click=${this.refreshClicked}
-                  ></paper-icon-button>
-                `
-              : undefined}
-          </app-toolbar>
-          <paper-tabs
-            scrollable
-            attr-for-selected="page-name"
-            .selected=${page}
-            @iron-activate=${this.handlePageSelected}
-          >
-            <paper-tab page-name="dashboard">Dashboard</paper-tab>
-            <paper-tab page-name="snapshots">Snapshots</paper-tab>
-            <paper-tab page-name="store">Add-on store</paper-tab>
-            <paper-tab page-name="system">System</paper-tab>
-          </paper-tabs>
-        </app-header>
-        <hassio-tabs-router
-          .route=${this.route}
-          .hass=${this.hass}
-          .supervisorInfo=${this.supervisorInfo}
-          .hostInfo=${this.hostInfo}
-          .hassInfo=${this.hassInfo}
-          .hassOsInfo=${this.hassOsInfo}
-        ></hassio-tabs-router>
-      </app-header-layout>
-    `;
-  }
-
-  private handlePageSelected(ev) {
-    const newPage = ev.detail.item.getAttribute("page-name");
-    if (newPage !== this._page) {
-      navigate(this, `/hassio/${newPage}`);
-    }
-
-    scrollToTarget(
-      this,
-      // @ts-ignore
-      this.shadowRoot!.querySelector("app-header-layout").header.scrollTarget
-    );
-  }
-
-  private refreshClicked() {
-    if (this._page === "snapshots") {
-      // @ts-ignore
-      this.shadowRoot.querySelector("hassio-snapshots").refreshData();
-    } else {
-      // @ts-ignore
-      this.shadowRoot.querySelector("hassio-addon-store").refreshData();
-    }
-  }
-
-  private get _page() {
-    return this.route.path.substr(1);
-  }
-
-  static get styles(): CSSResultArray {
-    return [
-      haStyle,
-      css`
-        :host {
-          color: var(--primary-text-color);
-          --paper-card-header-color: var(--primary-text-color);
-        }
-        paper-tabs {
-          margin-left: 12px;
-          --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
-          text-transform: uppercase;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-pages-with-tabs": HassioPagesWithTabs;
-  }
-}
diff --git a/hassio/src/hassio-tabs-router.ts b/hassio/src/hassio-panel-router.ts
similarity index 53%
rename from hassio/src/hassio-tabs-router.ts
rename to hassio/src/hassio-panel-router.ts
index dd4a66c270..fbfcda1b4b 100644
--- a/hassio/src/hassio-tabs-router.ts
+++ b/hassio/src/hassio-panel-router.ts
@@ -1,4 +1,3 @@
-import { PolymerElement } from "@polymer/polymer";
 import { customElement, property } from "lit-element";
 import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
 import {
@@ -17,29 +16,29 @@ import "./dashboard/hassio-dashboard";
 import "./snapshots/hassio-snapshots";
 import "./system/hassio-system";
 
-@customElement("hassio-tabs-router")
-class HassioTabsRouter extends HassRouterPage {
-  @property() public hass!: HomeAssistant;
+@customElement("hassio-panel-router")
+class HassioPanelRouter extends HassRouterPage {
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo: HassioSupervisorInfo;
+  @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
 
-  @property() public hostInfo: HassioHostInfo;
+  @property({ attribute: false }) public hostInfo: HassioHostInfo;
 
-  @property() public hassInfo: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
 
-  @property() public hassOsInfo!: HassioHassOSInfo;
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 
   protected routerOptions: RouterOptions = {
     routes: {
       dashboard: {
         tag: "hassio-dashboard",
       },
-      snapshots: {
-        tag: "hassio-snapshots",
-      },
       store: {
         tag: "hassio-addon-store",
       },
+      snapshots: {
+        tag: "hassio-snapshots",
+      },
       system: {
         tag: "hassio-system",
       },
@@ -47,27 +46,16 @@ class HassioTabsRouter extends HassRouterPage {
   };
 
   protected updatePageEl(el) {
-    if ("setProperties" in el) {
-      // As long as we have Polymer pages
-      (el as PolymerElement).setProperties({
-        hass: this.hass,
-        supervisorInfo: this.supervisorInfo,
-        hostInfo: this.hostInfo,
-        hassInfo: this.hassInfo,
-        hassOsInfo: this.hassOsInfo,
-      });
-    } else {
-      el.hass = this.hass;
-      el.supervisorInfo = this.supervisorInfo;
-      el.hostInfo = this.hostInfo;
-      el.hassInfo = this.hassInfo;
-      el.hassOsInfo = this.hassOsInfo;
-    }
+    el.hass = this.hass;
+    el.supervisorInfo = this.supervisorInfo;
+    el.hostInfo = this.hostInfo;
+    el.hassInfo = this.hassInfo;
+    el.hassOsInfo = this.hassOsInfo;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hassio-tabs-router": HassioTabsRouter;
+    "hassio-panel-router": HassioPanelRouter;
   }
 }
diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts
new file mode 100644
index 0000000000..16a75af7ff
--- /dev/null
+++ b/hassio/src/hassio-panel.ts
@@ -0,0 +1,85 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
+import {
+  HassioHomeAssistantInfo,
+  HassioSupervisorInfo,
+} from "../../src/data/hassio/supervisor";
+import "../../src/resources/ha-style";
+import { HomeAssistant, Route } from "../../src/types";
+import "./hassio-panel-router";
+import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
+import "../../src/layouts/hass-tabs-subpage";
+
+@customElement("hassio-panel")
+class HassioPanel extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
+
+  @property({ attribute: false }) public hostInfo!: HassioHostInfo;
+
+  @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
+
+  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
+
+  protected render(): TemplateResult {
+    const supervisorTabs: PageNavigation[] = [
+      {
+        name: "Dashboard",
+        path: `/hassio/dashboard`,
+        icon: "mdi:view-dashboard",
+      },
+      {
+        name: "Add-on store",
+        path: `/hassio/store`,
+        icon: "mdi:store",
+      },
+      {
+        name: "Snapshots",
+        path: `/hassio/snapshots`,
+        icon: "mdi:backup-restore",
+      },
+      {
+        name: "System",
+        path: `/hassio/system`,
+        icon: "mdi:cogs",
+      },
+    ];
+
+    return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${supervisorTabs}
+      >
+        <span slot="header">Supervisor</span>
+        <hassio-panel-router
+          .route=${this.route}
+          .hass=${this.hass}
+          .supervisorInfo=${this.supervisorInfo}
+          .hostInfo=${this.hostInfo}
+          .hassInfo=${this.hassInfo}
+          .hassOsInfo=${this.hassOsInfo}
+        ></hassio-panel-router>
+      </hass-tabs-subpage>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-panel": HassioPanel;
+  }
+}