diff --git a/hassio/src/addon-view/data/hassio-addon-sections.ts b/hassio/src/addon-view/data/hassio-addon-sections.ts
new file mode 100644
index 000000000000..a6f03fa2607e
--- /dev/null
+++ b/hassio/src/addon-view/data/hassio-addon-sections.ts
@@ -0,0 +1,64 @@
+import memoizeOne from "memoize-one";
+
+import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { PageNavigation } from "../../../../src/layouts/hass-tabs-subpage";
+
+export const getAddonSections = memoizeOne(
+  (addon: HassioAddonDetails): PageNavigation[] => {
+    const sections: PageNavigation[] = [
+      {
+        component: "hassio-addon-info",
+        name: "Details",
+        path: `/hassio/addon/${addon.slug}/info`,
+        icon: "hassio:information-outline",
+        core: true,
+      },
+    ];
+
+    if (addon && addon.version) {
+      if (addon.documentation) {
+        sections.push({
+          component: "hassio-addon-docs",
+          name: "Documentation",
+          path: `/hassio/addon/${addon.slug}/docs`,
+          icon: "hassio:book-outline",
+          core: true,
+        });
+      }
+      sections.push({
+        component: "hassio-addon-config",
+        name: "Configuration",
+        path: `/hassio/addon/${addon.slug}/config`,
+        icon: "hassio:settings-outline",
+        core: true,
+      });
+      if (addon.audio) {
+        sections.push({
+          component: "hassio-addon-audio",
+          name: "Audio",
+          path: `/hassio/addon/${addon.slug}/audio`,
+          icon: "hassio:speaker",
+          core: true,
+        });
+      }
+      if (addon.network) {
+        sections.push({
+          component: "hassio-addon-network",
+          name: "Network",
+          path: `/hassio/addon/${addon.slug}/network`,
+          icon: "hassio:lan",
+          core: true,
+        });
+      }
+      sections.push({
+        component: "hassio-addon-logs",
+        name: "Logs",
+        path: `/hassio/addon/${addon.slug}/logs`,
+        icon: "hassio:text",
+        core: true,
+      });
+    }
+
+    return sections;
+  }
+);
diff --git a/hassio/src/addon-view/hassio-addon-audio.ts b/hassio/src/addon-view/hassio-addon-audio.ts
index eeda1084a5a2..ef4c8cfec0b9 100644
--- a/hassio/src/addon-view/hassio-addon-audio.ts
+++ b/hassio/src/addon-view/hassio-addon-audio.ts
@@ -16,7 +16,7 @@ import {
   TemplateResult,
 } from "lit-element";
 
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
 import {
   HassioAddonDetails,
   setHassioAddonOption,
@@ -28,11 +28,19 @@ import {
 } from "../../../src/data/hassio/hardware";
 import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+
+import "../../../src/layouts/hass-tabs-subpage";
 
 @customElement("hassio-addon-audio")
 class HassioAddonAudio extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public addon!: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public route!: Route;
+  @property() public sections!: PageNavigation[];
   @property() private _error?: string;
   @property() private _inputDevices?: HassioHardwareAudioDevice[];
   @property() private _outputDevices?: HassioHardwareAudioDevice[];
@@ -41,57 +49,69 @@ class HassioAddonAudio extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-card heading="Audio">
-        <div class="card-content">
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-
-          <paper-dropdown-menu
-            label="Input"
-            @iron-select=${this._setInputDevice}
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedInput}
-            >
-              ${this._inputDevices &&
-                this._inputDevices.map((item) => {
-                  return html`
-                    <paper-item device=${item.device || ""}
-                      >${item.name}</paper-item
-                    >
-                  `;
-                })}
-            </paper-listbox>
-          </paper-dropdown-menu>
-          <paper-dropdown-menu
-            label="Output"
-            @iron-select=${this._setOutputDevice}
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedOutput}
-            >
-              ${this._outputDevices &&
-                this._outputDevices.map((item) => {
-                  return html`
-                    <paper-item device=${item.device || ""}
-                      >${item.name}</paper-item
-                    >
-                  `;
-                })}
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-        <div class="card-actions">
-          <mwc-button @click=${this._saveSettings}>Save</mwc-button>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${this.sections}
+        hassio
+      >
+        <div class="container">
+          <div class="content">
+            <paper-card heading="Audio">
+              <div class="card-content">
+                ${this._error
+                  ? html`
+                      <div class="errors">${this._error}</div>
+                    `
+                  : ""}
+
+                <paper-dropdown-menu
+                  label="Input"
+                  @iron-select=${this._setInputDevice}
+                >
+                  <paper-listbox
+                    slot="dropdown-content"
+                    attr-for-selected="device"
+                    .selected=${this._selectedInput}
+                  >
+                    ${this._inputDevices &&
+                      this._inputDevices.map((item) => {
+                        return html`
+                          <paper-item device=${item.device || ""}
+                            >${item.name}</paper-item
+                          >
+                        `;
+                      })}
+                  </paper-listbox>
+                </paper-dropdown-menu>
+                <paper-dropdown-menu
+                  label="Output"
+                  @iron-select=${this._setOutputDevice}
+                >
+                  <paper-listbox
+                    slot="dropdown-content"
+                    attr-for-selected="device"
+                    .selected=${this._selectedOutput}
+                  >
+                    ${this._outputDevices &&
+                      this._outputDevices.map((item) => {
+                        return html`
+                          <paper-item device=${item.device || ""}
+                            >${item.name}</paper-item
+                          >
+                        `;
+                      })}
+                  </paper-listbox>
+                </paper-dropdown-menu>
+              </div>
+              <div class="card-actions">
+                <mwc-button @click=${this._saveSettings}>Save</mwc-button>
+              </div>
+            </paper-card>
+          </div>
         </div>
-      </paper-card>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -100,7 +120,24 @@ class HassioAddonAudio extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        :host,
+        .container {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+        }
+        .content {
+          display: flex;
+          width: 600px;
+          margin-bottom: 24px;
+          padding: 24px 0 32px;
+          flex-direction: column;
+        }
+        @media only screen and (max-width: 600px) {
+          .content {
+            max-width: 100%;
+            min-width: 100%;
+          }
+        }
         paper-card,
         paper-dropdown-menu {
           display: block;
diff --git a/hassio/src/addon-view/hassio-addon-config.ts b/hassio/src/addon-view/hassio-addon-config.ts
index 1a91052163b2..ac76b1c0936c 100644
--- a/hassio/src/addon-view/hassio-addon-config.ts
+++ b/hassio/src/addon-view/hassio-addon-config.ts
@@ -13,7 +13,7 @@ import {
   query,
 } from "lit-element";
 
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
 import {
   HassioAddonDetails,
   setHassioAddonOption,
@@ -26,11 +26,19 @@ import "../../../src/components/ha-yaml-editor";
 // tslint:disable-next-line: no-duplicate-imports
 import { HaYamlEditor } from "../../../src/components/ha-yaml-editor";
 import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+
+import "../../../src/layouts/hass-tabs-subpage";
 
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public addon!: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public route!: Route;
+  @property() public sections!: PageNavigation[];
   @property() private _error?: string;
   @property({ type: Boolean }) private _configHasChanged = false;
 
@@ -42,34 +50,46 @@ class HassioAddonConfig extends LitElement {
     const valid = editor ? editor.isValid : true;
 
     return html`
-      <paper-card heading="Config">
-        <div class="card-content">
-          <ha-yaml-editor
-            @value-changed=${this._configChanged}
-          ></ha-yaml-editor>
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-          ${valid
-            ? ""
-            : html`
-                <div class="errors">Invalid YAML</div>
-              `}
-        </div>
-        <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
-          </mwc-button>
-          <mwc-button
-            @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !valid}
-          >
-            Save
-          </mwc-button>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${this.sections}
+        hassio
+      >
+        <div class="container">
+          <div class="content">
+            <paper-card heading="Config">
+              <div class="card-content">
+                <ha-yaml-editor
+                  @value-changed=${this._configChanged}
+                ></ha-yaml-editor>
+                ${this._error
+                  ? html`
+                      <div class="errors">${this._error}</div>
+                    `
+                  : ""}
+                ${valid
+                  ? ""
+                  : html`
+                      <div class="errors">Invalid YAML</div>
+                    `}
+              </div>
+              <div class="card-actions">
+                <mwc-button class="warning" @click=${this._resetTapped}>
+                  Reset to defaults
+                </mwc-button>
+                <mwc-button
+                  @click=${this._saveTapped}
+                  .disabled=${!this._configHasChanged || !valid}
+                >
+                  Save
+                </mwc-button>
+              </div>
+            </paper-card>
+          </div>
         </div>
-      </paper-card>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -78,8 +98,23 @@ class HassioAddonConfig extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        :host {
-          display: block;
+        .container {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+        }
+        .content {
+          display: flex;
+          width: 600px;
+          margin-bottom: 24px;
+          padding: 24px 0 32px;
+          flex-direction: column;
+        }
+        @media only screen and (max-width: 600px) {
+          .content {
+            max-width: 100%;
+            min-width: 100%;
+          }
         }
         paper-card {
           display: block;
diff --git a/hassio/src/addon-view/hassio-addon-docs.ts b/hassio/src/addon-view/hassio-addon-docs.ts
new file mode 100644
index 000000000000..2495f3b8435e
--- /dev/null
+++ b/hassio/src/addon-view/hassio-addon-docs.ts
@@ -0,0 +1,121 @@
+import "@material/mwc-button";
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-tooltip/paper-tooltip";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+import {
+  HassioAddonDetails,
+  fetchHassioAddonDocumentation,
+} from "../../../src/data/hassio/addon";
+import { hassioStyle } from "../resources/hassio-style";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant, Route } from "../../../src/types";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+
+import "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/components/ha-markdown";
+
+@customElement("hassio-addon-docs")
+class HassioAddonDocs extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public addon!: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public route!: Route;
+  @property() public sections!: PageNavigation[];
+
+  private _documentation?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${this.sections}
+        hassio
+      >
+        <div class="container">
+          <div class="content">
+            ${this._documentation
+              ? html`
+                  <paper-card heading="Documentation">
+                    <div class="card-content">
+                      <ha-markdown
+                        .content=${this._documentation}
+                      ></ha-markdown>
+                    </div>
+                  </paper-card>
+                `
+              : ""}
+          </div>
+        </div>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        .container {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+        }
+        .content {
+          display: flex;
+          width: 600px;
+          margin-bottom: 24px;
+          padding: 24px 0 32px;
+          flex-direction: column;
+        }
+        @media only screen and (max-width: 600px) {
+          .content {
+            max-width: 100%;
+            min-width: 100%;
+          }
+        }
+        .card-content {
+          padding: 0 16px 16px;
+        }
+        paper-card {
+          display: block;
+          margin-bottom: 16px;
+        }
+      `,
+    ];
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._loadDocumentation();
+  }
+
+  private async _loadDocumentation(): Promise<void> {
+    if (this.addon.documentation) {
+      const documentation = await fetchHassioAddonDocumentation(
+        this.hass,
+        this.addon.slug
+      );
+      this._documentation = String(documentation);
+      this.requestUpdate();
+    }
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-docs": HassioAddonDocs;
+  }
+}
diff --git a/hassio/src/addon-view/hassio-addon-info.ts b/hassio/src/addon-view/hassio-addon-info.ts
index 04b736f34f7f..78bb44863246 100644
--- a/hassio/src/addon-view/hassio-addon-info.ts
+++ b/hassio/src/addon-view/hassio-addon-info.ts
@@ -13,30 +13,32 @@ import {
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 
-import "../../../src/components/buttons/ha-call-api-button";
-import "../../../src/components/buttons/ha-progress-button";
-import "../../../src/components/ha-label-badge";
-import "../../../src/components/ha-markdown";
-import "../../../src/components/ha-switch";
-import "../components/hassio-card-content";
-
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
+  fetchHassioAddonChangelog,
+  installHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
   uninstallHassioAddon,
-  installHassioAddon,
-  fetchHassioAddonChangelog,
 } from "../../../src/data/hassio/addon";
 import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
 import { navigate } from "../../../src/common/navigate";
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 import { atLeastVersion } from "../../../src/common/config/version";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+
+import "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-label-badge";
+import "../../../src/components/ha-markdown";
+import "../../../src/components/ha-switch";
+import "../components/hassio-card-content";
 
 const PERMIS_DESC = {
   rating: {
@@ -95,53 +97,68 @@ const PERMIS_DESC = {
 class HassioAddonInfo extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public addon!: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public route!: Route;
+  @property() public sections!: PageNavigation[];
   @property() private _error?: string;
   @property({ type: Boolean }) private _installing = false;
 
   protected render(): TemplateResult {
     return html`
-      ${this._computeUpdateAvailable
-        ? html`
-            <paper-card heading="Update available! 🎉">
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title="${this.addon.name} ${this.addon
-                    .version_latest} is available"
-                  .description="You are currently running version ${this.addon
-                    .version}"
-                  icon="hassio:arrow-up-bold-circle"
-                  iconClass="update"
-                ></hassio-card-content>
-                ${!this.addon.available
-                  ? html`
-                      <p>
-                        This update is no longer compatible with your system.
-                      </p>
-                    `
-                  : ""}
-              </div>
-              <div class="card-actions">
-                <ha-call-api-button
-                  .hass=${this.hass}
-                  .disabled=${!this.addon.available}
-                  path="hassio/addons/${this.addon.slug}/update"
-                >
-                  Update
-                </ha-call-api-button>
-                ${this.addon.changelog
-                  ? html`
-                      <mwc-button @click=${this._openChangelog}>
-                        Changelog
-                      </mwc-button>
-                    `
-                  : ""}
-              </div>
-            </paper-card>
-          `
-        : ""}
-      ${!this.addon.protected
-        ? html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${this.sections}
+        hassio
+      >
+        <div class="container">
+          <div class="content">
+            ${this._computeUpdateAvailable
+              ? html`
+                  <paper-card heading="Update available! 🎉">
+                    <div class="card-content">
+                      <hassio-card-content
+                        .hass=${this.hass}
+                        .title="${this.addon.name} ${this.addon
+                          .version_latest} is available"
+                        .description="You are currently running version ${this
+                          .addon.version}"
+                        icon="hassio:arrow-up-bold-circle"
+                        iconClass="update"
+                      ></hassio-card-content>
+                      ${!this.addon.available
+                        ? html`
+                            <p>
+                              This update is no longer compatible with your
+                              system.
+                            </p>
+                          `
+                        : ""}
+                    </div>
+                    <div class="card-actions">
+                      <ha-call-api-button
+                        .hass=${this.hass}
+                        .disabled=${!this.addon.available}
+                        path="hassio/addons/${this.addon.slug}/update"
+                      >
+                        Update
+                      </ha-call-api-button>
+                      ${this.addon.changelog
+                        ? html`
+                            <mwc-button @click=${this._openChangelog}>
+                              Changelog
+                            </mwc-button>
+                          `
+                        : ""}
+                    </div>
+                  </paper-card>
+                `
+              : ""}
+            ${!this.addon.protected
+              ? html`
         <paper-card heading="Warning: Protection mode is disabled!" class="warning">
           <div class="card-content">
             Protection mode on this add-on 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 add-on.
@@ -152,334 +169,344 @@ class HassioAddonInfo extends LitElement {
           </div>
         </paper-card>
       `
-        : ""}
-
-      <paper-card>
-        <div class="card-content">
-          <div class="addon-header">
-            ${this.addon.name}
-            <div class="addon-version light-color">
-              ${this.addon.version
-                ? html`
-                    ${this.addon.version}
-                    ${this._computeIsRunning
+              : ""}
+            <paper-card>
+              <div class="card-content">
+                <div class="addon-header">
+                  ${this.addon.name}
+                  <div class="addon-version light-color">
+                    ${this.addon.version
                       ? html`
-                          <iron-icon
-                            title="Add-on is running"
-                            class="running"
-                            icon="hassio:circle"
-                          ></iron-icon>
+                          ${this.addon.version}
+                          ${this._computeIsRunning
+                            ? html`
+                                <iron-icon
+                                  title="Add-on is running"
+                                  class="running"
+                                  icon="hassio:circle"
+                                ></iron-icon>
+                              `
+                            : html`
+                                <iron-icon
+                                  title="Add-on is stopped"
+                                  class="stopped"
+                                  icon="hassio:circle"
+                                ></iron-icon>
+                              `}
                         `
                       : html`
-                          <iron-icon
-                            title="Add-on is stopped"
-                            class="stopped"
-                            icon="hassio:circle"
-                          ></iron-icon>
+                          ${this.addon.version_latest}
                         `}
-                  `
-                : html`
-                    ${this.addon.version_latest}
-                  `}
-            </div>
-          </div>
-          <div class="description light-color">
-            ${this.addon.description}.<br />
-            Visit
-            <a href="${this.addon.url}" target="_blank" rel="noreferrer">
-              ${this.addon.name} page</a
-            >
-            for details.
-          </div>
-          ${this.addon.logo
-            ? html`
-                <a
-                  href="${this.addon.url}"
-                  target="_blank"
-                  class="logo"
-                  rel="noreferrer"
-                >
-                  <img src="/api/hassio/addons/${this.addon.slug}/logo" />
-                </a>
-              `
-            : ""}
-          <div class="security">
-            <ha-label-badge
-              class=${classMap({
-                green: [5, 6].includes(Number(this.addon.rating)),
-                yellow: [3, 4].includes(Number(this.addon.rating)),
-                red: [1, 2].includes(Number(this.addon.rating)),
-              })}
-              @click=${this._showMoreInfo}
-              id="rating"
-              .value=${this.addon.rating}
-              label="rating"
-              description=""
-            ></ha-label-badge>
-            ${this.addon.host_network
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="host_network"
-                    icon="hassio:network"
-                    label="host"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.full_access
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="full_access"
-                    icon="hassio:chip"
-                    label="hardware"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.homeassistant_api
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="homeassistant_api"
-                    icon="hassio:home-assistant"
-                    label="hass"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this._computeHassioApi
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="hassio_api"
-                    icon="hassio:home-assistant"
-                    label="hassio"
-                    .description=${this.addon.hassio_role}
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.docker_api
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="docker_api"
-                    icon="hassio:docker"
-                    label="docker"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.host_pid
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="host_pid"
-                    icon="hassio:pound"
-                    label="host pid"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.apparmor
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    class=${this._computeApparmorClassName}
-                    id="apparmor"
-                    icon="hassio:shield"
-                    label="apparmor"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.auth_api
-              ? html`
-                  <ha-label-badge
-                    @click=${this._showMoreInfo}
-                    id="auth_api"
-                    icon="hassio:key"
-                    label="auth"
-                    description=""
-                  ></ha-label-badge>
-                `
-              : ""}
-            ${this.addon.ingress
-              ? html`
+                  </div>
+                </div>
+                <div class="description light-color">
+                  ${this.addon.description}.<br />
+                  Visit
+                  <a href="${this.addon.url}" target="_blank" rel="noreferrer">
+                    ${this.addon.name} page</a
+                  >
+                  for details.
+                </div>
+                ${this.addon.logo
+                  ? html`
+                      <a
+                        href="${this.addon.url}"
+                        target="_blank"
+                        class="logo"
+                        rel="noreferrer"
+                      >
+                        <img src="/api/hassio/addons/${this.addon.slug}/logo" />
+                      </a>
+                    `
+                  : ""}
+                <div class="security">
                   <ha-label-badge
+                    class=${classMap({
+                      green: [5, 6].includes(Number(this.addon.rating)),
+                      yellow: [3, 4].includes(Number(this.addon.rating)),
+                      red: [1, 2].includes(Number(this.addon.rating)),
+                    })}
                     @click=${this._showMoreInfo}
-                    id="ingress"
-                    icon="hassio:cursor-default-click-outline"
-                    label="ingress"
+                    id="rating"
+                    .value=${this.addon.rating}
+                    label="rating"
                     description=""
                   ></ha-label-badge>
-                `
-              : ""}
-          </div>
-
-          ${this.addon.version
-            ? html`
-                <div class="state">
-                  <div>Start on boot</div>
-                  <ha-switch
-                    @change=${this._startOnBootToggled}
-                    .checked=${this.addon.boot === "auto"}
-                    haptic
-                  ></ha-switch>
+                  ${this.addon.host_network
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="host_network"
+                          icon="hassio:network"
+                          label="host"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this.addon.full_access
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="full_access"
+                          icon="hassio:chip"
+                          label="hardware"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this.addon.homeassistant_api
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="homeassistant_api"
+                          icon="hassio:home-assistant"
+                          label="hass"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this._computeHassioApi
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="hassio_api"
+                          icon="hassio:home-assistant"
+                          label="hassio"
+                          .description=${this.addon.hassio_role}
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this.addon.docker_api
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="docker_api"
+                          icon="hassio:docker"
+                          label="docker"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this.addon.host_pid
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="host_pid"
+                          icon="hassio:pound"
+                          label="host pid"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this.addon.apparmor
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          class=${this._computeApparmorClassName}
+                          id="apparmor"
+                          icon="hassio:shield"
+                          label="apparmor"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this.addon.auth_api
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="auth_api"
+                          icon="hassio:key"
+                          label="auth"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
+                  ${this.addon.ingress
+                    ? html`
+                        <ha-label-badge
+                          @click=${this._showMoreInfo}
+                          id="ingress"
+                          icon="hassio:cursor-default-click-outline"
+                          label="ingress"
+                          description=""
+                        ></ha-label-badge>
+                      `
+                    : ""}
                 </div>
-                <div class="state">
-                  <div>Auto update</div>
-                  <ha-switch
-                    @change=${this._autoUpdateToggled}
-                    .checked=${this.addon.auto_update}
-                    haptic
-                  ></ha-switch>
-                </div>
-                ${this.addon.ingress
+
+                ${this.addon.version
                   ? html`
                       <div class="state">
-                        <div>Show in sidebar</div>
+                        <div>Start on boot</div>
                         <ha-switch
-                          @change=${this._panelToggled}
-                          .checked=${this.addon.ingress_panel}
-                          .disabled=${this._computeCannotIngressSidebar}
+                          @change=${this._startOnBootToggled}
+                          .checked=${this.addon.boot === "auto"}
                           haptic
                         ></ha-switch>
-                        ${this._computeCannotIngressSidebar
-                          ? html`
-                              <span>
-                                This option requires Home Assistant 0.92 or
-                                later.
-                              </span>
-                            `
-                          : ""}
                       </div>
-                    `
-                  : ""}
-                ${this._computeUsesProtectedOptions
-                  ? html`
                       <div class="state">
-                        <div>
-                          Protection mode
-                          <span>
-                            <iron-icon icon="hassio:information"></iron-icon>
-                            <paper-tooltip>
-                              Grant the add-on elevated system access.
-                            </paper-tooltip>
-                          </span>
-                        </div>
+                        <div>Auto update</div>
                         <ha-switch
-                          @change=${this._protectionToggled}
-                          .checked=${this.addon.protected}
+                          @change=${this._autoUpdateToggled}
+                          .checked=${this.addon.auto_update}
                           haptic
                         ></ha-switch>
                       </div>
+                      ${this.addon.ingress
+                        ? html`
+                            <div class="state">
+                              <div>Show in sidebar</div>
+                              <ha-switch
+                                @change=${this._panelToggled}
+                                .checked=${this.addon.ingress_panel}
+                                .disabled=${this._computeCannotIngressSidebar}
+                                haptic
+                              ></ha-switch>
+                              ${this._computeCannotIngressSidebar
+                                ? html`
+                                    <span>
+                                      This option requires Home Assistant 0.92
+                                      or later.
+                                    </span>
+                                  `
+                                : ""}
+                            </div>
+                          `
+                        : ""}
+                      ${this._computeUsesProtectedOptions
+                        ? html`
+                            <div class="state">
+                              <div>
+                                Protection mode
+                                <span>
+                                  <iron-icon
+                                    icon="hassio:information"
+                                  ></iron-icon>
+                                  <paper-tooltip>
+                                    Grant the add-on elevated system access.
+                                  </paper-tooltip>
+                                </span>
+                              </div>
+                              <ha-switch
+                                @change=${this._protectionToggled}
+                                .checked=${this.addon.protected}
+                                haptic
+                              ></ha-switch>
+                            </div>
+                          `
+                        : ""}
                     `
                   : ""}
-              `
-            : ""}
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-        </div>
-        <div class="card-actions">
-          ${this.addon.version
-            ? html`
-                <mwc-button class="warning" @click=${this._uninstallClicked}>
-                  Uninstall
-                </mwc-button>
-                ${this.addon.build
+                ${this._error
                   ? html`
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/rebuild"
-                      >
-                        Rebuild
-                      </ha-call-api-button>
+                      <div class="errors">${this._error}</div>
                     `
                   : ""}
-                ${this._computeIsRunning
+              </div>
+              <div class="card-actions">
+                ${this.addon.version
                   ? html`
-                      <ha-call-api-button
+                      <mwc-button
                         class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/restart"
+                        @click=${this._uninstallClicked}
                       >
-                        Restart
-                      </ha-call-api-button>
-                      <ha-call-api-button
-                        class="warning"
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/stop"
-                      >
-                        Stop
-                      </ha-call-api-button>
+                        Uninstall
+                      </mwc-button>
+                      ${this.addon.build
+                        ? html`
+                            <ha-call-api-button
+                              class="warning"
+                              .hass=${this.hass}
+                              .path="hassio/addons/${this.addon.slug}/rebuild"
+                            >
+                              Rebuild
+                            </ha-call-api-button>
+                          `
+                        : ""}
+                      ${this._computeIsRunning
+                        ? html`
+                            <ha-call-api-button
+                              class="warning"
+                              .hass=${this.hass}
+                              .path="hassio/addons/${this.addon.slug}/restart"
+                            >
+                              Restart
+                            </ha-call-api-button>
+                            <ha-call-api-button
+                              class="warning"
+                              .hass=${this.hass}
+                              .path="hassio/addons/${this.addon.slug}/stop"
+                            >
+                              Stop
+                            </ha-call-api-button>
+                          `
+                        : html`
+                            <ha-call-api-button
+                              .hass=${this.hass}
+                              .path="hassio/addons/${this.addon.slug}/start"
+                            >
+                              Start
+                            </ha-call-api-button>
+                          `}
+                      ${this._computeShowWebUI
+                        ? html`
+                            <a
+                              .href=${this._pathWebui}
+                              tabindex="-1"
+                              target="_blank"
+                              class="right"
+                              rel="noopener"
+                            >
+                              <mwc-button>
+                                Open Web UI
+                              </mwc-button>
+                            </a>
+                          `
+                        : ""}
+                      ${this._computeShowIngressUI
+                        ? html`
+                            <mwc-button
+                              class="right"
+                              @click=${this._openIngress}
+                            >
+                              Open Web UI
+                            </mwc-button>
+                          `
+                        : ""}
                     `
                   : html`
-                      <ha-call-api-button
-                        .hass=${this.hass}
-                        .path="hassio/addons/${this.addon.slug}/start"
+                      ${!this.addon.available
+                        ? html`
+                            <p class="warning">
+                              This add-on is not available on your system.
+                            </p>
+                          `
+                        : ""}
+                      <ha-progress-button
+                        .disabled=${!this.addon.available || this._installing}
+                        .progress=${this._installing}
+                        @click=${this._installClicked}
                       >
-                        Start
-                      </ha-call-api-button>
+                        Install
+                      </ha-progress-button>
                     `}
-                ${this._computeShowWebUI
-                  ? html`
-                      <a
-                        .href=${this._pathWebui}
-                        tabindex="-1"
-                        target="_blank"
-                        class="right"
-                        rel="noopener"
-                      >
-                        <mwc-button>
-                          Open web UI
-                        </mwc-button>
-                      </a>
-                    `
-                  : ""}
-                ${this._computeShowIngressUI
-                  ? html`
-                      <mwc-button class="right" @click=${this._openIngress}>
-                        Open web UI
-                      </mwc-button>
-                    `
-                  : ""}
-              `
-            : html`
-                ${!this.addon.available
-                  ? html`
-                      <p class="warning">
-                        This add-on is not available on your system.
-                      </p>
-                    `
-                  : ""}
-                <ha-progress-button
-                  .disabled=${!this.addon.available || this._installing}
-                  .progress=${this._installing}
-                  @click=${this._installClicked}
-                >
-                  Install
-                </ha-progress-button>
-              `}
-        </div>
-      </paper-card>
-
-      ${this.addon.long_description
-        ? html`
-            <paper-card>
-              <div class="card-content">
-                <ha-markdown
-                  .content=${this.addon.long_description}
-                ></ha-markdown>
               </div>
             </paper-card>
-          `
-        : ""}
+
+            ${this.addon.long_description
+              ? html`
+                  <paper-card>
+                    <div class="card-content">
+                      <ha-markdown
+                        .content=${this.addon.long_description}
+                      ></ha-markdown>
+                    </div>
+                  </paper-card>
+                `
+              : ""}
+          </div>
+        </div>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -488,8 +515,23 @@ class HassioAddonInfo extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        :host {
-          display: block;
+        .container {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+        }
+        .content {
+          display: flex;
+          width: 600px;
+          margin-bottom: 24px;
+          padding: 24px 0 32px;
+          flex-direction: column;
+        }
+        @media only screen and (max-width: 600px) {
+          .content {
+            max-width: 100%;
+            min-width: 100%;
+          }
         }
         paper-card {
           display: block;
diff --git a/hassio/src/addon-view/hassio-addon-logs.ts b/hassio/src/addon-view/hassio-addon-logs.ts
index 0f568df2c774..8cc2c8153e15 100644
--- a/hassio/src/addon-view/hassio-addon-logs.ts
+++ b/hassio/src/addon-view/hassio-addon-logs.ts
@@ -10,7 +10,7 @@ import {
   TemplateResult,
   query,
 } from "lit-element";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
 import {
   HassioAddonDetails,
   fetchHassioAddonLogs,
@@ -18,11 +18,19 @@ import {
 import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html";
 import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+
+import "../../../src/layouts/hass-tabs-subpage";
 
 @customElement("hassio-addon-logs")
 class HassioAddonLogs extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public addon!: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public route!: Route;
+  @property() public sections!: PageNavigation[];
   @property() private _error?: string;
   @query("#content") private _logContent!: any;
 
@@ -33,17 +41,30 @@ class HassioAddonLogs extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-card heading="Log">
-        ${this._error
-          ? html`
-              <div class="errors">${this._error}</div>
-            `
-          : ""}
-        <div class="card-content" id="content"></div>
-        <div class="card-actions">
-          <mwc-button @click=${this._refresh}>Refresh</mwc-button>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${this.sections}
+        hassio
+      >
+        <div class="container">
+          <div class="content">
+            <paper-card heading="Log">
+              <div class="card-content" id="content">
+                ${this._error
+                  ? html`
+                      <div class="errors">${this._error}</div>
+                    `
+                  : ""}
+              </div>
+              <div class="card-actions">
+                <mwc-button @click=${this._refresh}>Refresh</mwc-button>
+              </div>
+            </paper-card>
+          </div>
         </div>
-      </paper-card>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -53,11 +74,30 @@ class HassioAddonLogs extends LitElement {
       hassioStyle,
       ANSI_HTML_STYLE,
       css`
-        :host,
+        .container {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+        }
+        .content {
+          display: flex;
+          min-width: 600px;
+          max-width: calc(100% - 8px);
+          margin-bottom: 24px;
+          padding: 24px 0 32px;
+          flex-direction: column;
+        }
+        @media only screen and (max-width: 600px) {
+          .content {
+            max-width: 100%;
+            min-width: 100%;
+          }
+        }
         paper-card {
           display: block;
         }
         pre {
+          margin: 0;
           overflow-x: auto;
           white-space: pre-wrap;
           overflow-wrap: break-word;
diff --git a/hassio/src/addon-view/hassio-addon-network.ts b/hassio/src/addon-view/hassio-addon-network.ts
index 2ad9e008a7c4..ed4d8d3048a4 100644
--- a/hassio/src/addon-view/hassio-addon-network.ts
+++ b/hassio/src/addon-view/hassio-addon-network.ts
@@ -12,7 +12,7 @@ import {
 
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -21,6 +21,9 @@ import {
 import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+
+import "../../../src/layouts/hass-tabs-subpage";
 
 interface NetworkItem {
   description: string;
@@ -36,6 +39,11 @@ interface NetworkItemInput extends PaperInputElement {
 class HassioAddonNetwork extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public addon!: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public route!: Route;
+  @property() public sections!: PageNavigation[];
   @property() private _error?: string;
   @property() private _config?: NetworkItem[];
 
@@ -45,53 +53,65 @@ class HassioAddonNetwork extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (!this._config) {
-      return html``;
-    }
-
     return html`
-      <paper-card heading="Network">
-        <div class="card-content">
-          ${this._error
-            ? html`
-                <div class="errors">${this._error}</div>
-              `
-            : ""}
-
-          <table>
-            <tbody>
-              <tr>
-                <th>Container</th>
-                <th>Host</th>
-                <th>Description</th>
-              </tr>
-              ${this._config!.map((item) => {
-                return html`
-                  <tr>
-                    <td>${item.container}</td>
-                    <td>
-                      <paper-input
-                        @value-changed=${this._configChanged}
-                        placeholder="disabled"
-                        .value=${item.host}
-                        .container=${item.container}
-                        no-label-float
-                      ></paper-input>
-                    </td>
-                    <td>${item.description}</td>
-                  </tr>
-                `;
-              })}
-            </tbody>
-          </table>
-        </div>
-        <div class="card-actions">
-          <mwc-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
-          </mwc-button>
-          <mwc-button @click=${this._saveTapped}>Save</mwc-button>
-        </div>
-      </paper-card>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${this.sections}
+        hassio
+      >
+        ${this._config
+          ? html`
+              <div class="container">
+                <div class="content">
+                  <paper-card heading="Network">
+                    <div class="card-content">
+                      ${this._error
+                        ? html`
+                            <div class="errors">${this._error}</div>
+                          `
+                        : ""}
+
+                      <table>
+                        <tbody>
+                          <tr>
+                            <th>Container</th>
+                            <th>Host</th>
+                            <th>Description</th>
+                          </tr>
+                          ${this._config!.map((item) => {
+                            return html`
+                              <tr>
+                                <td>${item.container}</td>
+                                <td>
+                                  <paper-input
+                                    @value-changed=${this._configChanged}
+                                    placeholder="disabled"
+                                    .value=${item.host}
+                                    .container=${item.container}
+                                    no-label-float
+                                  ></paper-input>
+                                </td>
+                                <td>${item.description}</td>
+                              </tr>
+                            `;
+                          })}
+                        </tbody>
+                      </table>
+                    </div>
+                    <div class="card-actions">
+                      <mwc-button class="warning" @click=${this._resetTapped}>
+                        Reset to defaults
+                      </mwc-button>
+                      <mwc-button @click=${this._saveTapped}>Save</mwc-button>
+                    </div>
+                  </paper-card>
+                </div>
+              </div>
+            `
+          : ""}
+      </hass-tabs-subpage>
     `;
   }
 
@@ -100,8 +120,23 @@ class HassioAddonNetwork extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        :host {
-          display: block;
+        .container {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+        }
+        .content {
+          display: flex;
+          width: 600px;
+          margin-bottom: 24px;
+          padding: 24px 0 32px;
+          flex-direction: column;
+        }
+        @media only screen and (max-width: 600px) {
+          .content {
+            max-width: 100%;
+            min-width: 100%;
+          }
         }
         paper-card {
           display: block;
diff --git a/hassio/src/addon-view/hassio-addon-router.ts b/hassio/src/addon-view/hassio-addon-router.ts
new file mode 100644
index 000000000000..ab02153ab8dc
--- /dev/null
+++ b/hassio/src/addon-view/hassio-addon-router.ts
@@ -0,0 +1,87 @@
+import "@polymer/app-route/app-route";
+import { property, customElement } from "lit-element";
+
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../../src/layouts/hass-router-page";
+import { HomeAssistant, Route } from "../../../src/types";
+import { HassioAddonDetails } from "../../../src/data/hassio/addon";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+
+@customElement("hassio-addon-router")
+class HaAddonRouter extends HassRouterPage {
+  @property() public hass!: HomeAssistant;
+  @property() public addon!: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
+  @property() public route!: Route;
+  @property() public sections!: PageNavigation[];
+
+  protected routerOptions: RouterOptions = {
+    defaultPage: "info",
+    preloadAll: true,
+    showLoading: true,
+    routes: {
+      info: {
+        tag: "hassio-addon-info",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-info" */ "./hassio-addon-info"
+          ),
+      },
+      docs: {
+        tag: "hassio-addon-docs",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-docs" */ "./hassio-addon-docs"
+          ),
+      },
+      config: {
+        tag: "hassio-addon-config",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-config" */ "./hassio-addon-config"
+          ),
+      },
+      audio: {
+        tag: "hassio-addon-audio",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-audio" */ "./hassio-addon-audio"
+          ),
+      },
+      network: {
+        tag: "hassio-addon-network",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-network" */ "./hassio-addon-network"
+          ),
+      },
+      logs: {
+        tag: "hassio-addon-logs",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-logs" */ "./hassio-addon-logs"
+          ),
+      },
+    },
+  };
+
+  protected updatePageEl(pageEl) {
+    pageEl.hass = this.hass;
+    pageEl.addon = this.addon;
+    pageEl.narrow = this.narrow;
+    pageEl.isWide = this.isWide;
+    pageEl.showAdvanced = this.showAdvanced;
+    pageEl.route = this.routeTail;
+    pageEl.sections = this.sections;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hassio-addon-router": HaAddonRouter;
+  }
+}
diff --git a/hassio/src/addon-view/hassio-addon-view.ts b/hassio/src/addon-view/hassio-addon-view.ts
index 4f5b2cfd70c7..9068cc123810 100644
--- a/hassio/src/addon-view/hassio-addon-view.ts
+++ b/hassio/src/addon-view/hassio-addon-view.ts
@@ -20,18 +20,19 @@ import {
 } from "../../../src/data/hassio/addon";
 import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+import { getAddonSections } from "./data/hassio-addon-sections";
 
-import "./hassio-addon-audio";
-import "./hassio-addon-config";
-import "./hassio-addon-info";
-import "./hassio-addon-logs";
-import "./hassio-addon-network";
+import "./hassio-addon-router";
 
 @customElement("hassio-addon-view")
 class HassioAddonView extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public route!: Route;
   @property() public addon?: HassioAddonDetails;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public showAdvanced!: boolean;
 
   protected render(): TemplateResult {
     if (!this.addon) {
@@ -39,46 +40,26 @@ class HassioAddonView extends LitElement {
         <paper-spinner-lite active></paper-spinner-lite>
       `;
     }
-    return html`
-      <hass-subpage header="Hass.io: add-on details" hassio>
-        <div class="content">
-          <hassio-addon-info
-            .hass=${this.hass}
-            .addon=${this.addon}
-          ></hassio-addon-info>
 
-          ${this.addon && this.addon.version
-            ? html`
-                <hassio-addon-config
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-config>
+    const route: Route = {
+      prefix: `${this.route.prefix}/${this.addon.slug}`,
+      path: this.addon
+        ? this.route.path.substr(1).replace(this.addon.slug, "")
+        : "",
+    };
 
-                ${this.addon.audio
-                  ? html`
-                      <hassio-addon-audio
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-audio>
-                    `
-                  : ""}
-                ${this.addon.network
-                  ? html`
-                      <hassio-addon-network
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-network>
-                    `
-                  : ""}
+    const sections: PageNavigation[] = getAddonSections(this.addon);
 
-                <hassio-addon-logs
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-logs>
-              `
-            : ""}
-        </div>
-      </hass-subpage>
+    return html`
+      <hassio-addon-router
+        .hass=${this.hass}
+        .sections=${sections}
+        .route=${route}
+        .addon=${this.addon}
+        .narrow=${this.narrow}
+        .isWide=${this.isWide}
+        .showAdvanced=${this.showAdvanced}
+      ></hassio-addon-router>
     `;
   }
 
@@ -91,32 +72,10 @@ class HassioAddonView extends LitElement {
           color: var(--primary-text-color);
           --paper-card-header-color: var(--primary-text-color);
         }
-        .content {
-          padding: 24px 0 32px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-        hassio-addon-info,
-        hassio-addon-network,
-        hassio-addon-audio,
-        hassio-addon-config {
-          margin-bottom: 24px;
-          width: 600px;
-        }
-        hassio-addon-logs {
-          max-width: calc(100% - 8px);
-          min-width: 600px;
-        }
-        @media only screen and (max-width: 600px) {
-          hassio-addon-info,
-          hassio-addon-network,
-          hassio-addon-audio,
-          hassio-addon-config,
-          hassio-addon-logs {
-            max-width: 100%;
-            min-width: 100%;
-          }
+        paper-spinner-lite {
+          position: absolute;
+          top: calc(50% - 14px);
+          left: calc(50% - 14px);
         }
       `,
     ];
@@ -142,7 +101,10 @@ class HassioAddonView extends LitElement {
   }
 
   private async _routeDataChanged(routeData: Route): Promise<void> {
-    const addon = routeData.path.substr(1);
+    let addon = routeData.path.substr(1);
+    if (addon.includes("/")) {
+      addon = addon.substring(0, addon.indexOf("/"));
+    }
     try {
       const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
       this.addon = addoninfo;
diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts
index 5599913bb8e3..8f01c8be9381 100644
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -70,6 +70,7 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   ingress_panel: boolean;
   ingress_entry: null | string;
   ingress_url: null | string;
+  documentation: boolean;
 }
 
 export interface HassioAddonsInfo {
@@ -99,11 +100,15 @@ export interface HassioAddonSetOptionParams {
   network?: object | null;
 }
 
-export const reloadHassioAddons = async (hass: HomeAssistant) => {
+export const reloadHassioAddons = async (
+  hass: HomeAssistant
+): Promise<void> => {
   await hass.callApi<HassioResponse<void>>("POST", `hassio/addons/reload`);
 };
 
-export const fetchHassioAddonsInfo = async (hass: HomeAssistant) => {
+export const fetchHassioAddonsInfo = async (
+  hass: HomeAssistant
+): Promise<HassioAddonsInfo> => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioAddonsInfo>>("GET", `hassio/addons`)
   );
@@ -112,7 +117,7 @@ export const fetchHassioAddonsInfo = async (hass: HomeAssistant) => {
 export const fetchHassioAddonInfo = async (
   hass: HomeAssistant,
   slug: string
-) => {
+): Promise<HassioAddonDetails> => {
   return hassioApiResultExtractor(
     await hass.callApi<HassioResponse<HassioAddonDetails>>(
       "GET",
@@ -121,17 +126,24 @@ export const fetchHassioAddonInfo = async (
   );
 };
 
+export const fetchHassioAddonDocumentation = async (
+  hass: HomeAssistant,
+  slug: string
+): Promise<string> => {
+  return hass.callApi<string>("GET", `hassio/addons/${slug}/documentation`);
+};
+
 export const fetchHassioAddonChangelog = async (
   hass: HomeAssistant,
   slug: string
-) => {
+): Promise<string> => {
   return hass.callApi<string>("GET", `hassio/addons/${slug}/changelog`);
 };
 
 export const fetchHassioAddonLogs = async (
   hass: HomeAssistant,
   slug: string
-) => {
+): Promise<string> => {
   return hass.callApi<string>("GET", `hassio/addons/${slug}/logs`);
 };
 
@@ -151,7 +163,7 @@ export const setHassioAddonSecurity = async (
   hass: HomeAssistant,
   slug: string,
   data: HassioAddonSetSecurityParams
-) => {
+): Promise<void> => {
   await hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/security`,
@@ -159,7 +171,10 @@ export const setHassioAddonSecurity = async (
   );
 };
 
-export const installHassioAddon = async (hass: HomeAssistant, slug: string) => {
+export const installHassioAddon = async (
+  hass: HomeAssistant,
+  slug: string
+): Promise<HassioResponse<void>> => {
   return hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/install`
@@ -169,7 +184,7 @@ export const installHassioAddon = async (hass: HomeAssistant, slug: string) => {
 export const uninstallHassioAddon = async (
   hass: HomeAssistant,
   slug: string
-) => {
+): Promise<void> => {
   await hass.callApi<HassioResponse<void>>(
     "POST",
     `hassio/addons/${slug}/uninstall`
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 2198acf49b9a..fdac62351405 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -76,7 +76,7 @@ class HassTabsSubpage extends LitElement {
                     <span class="name"
                       >${page.translationKey
                         ? this.hass.localize(page.translationKey)
-                        : name}</span
+                        : page.name}</span
                     >
                   `
                 : ""}