diff --git a/hassio/advanced/hassio-advanced.html b/hassio/advanced/hassio-advanced.html
deleted file mode 100644
index 0923bce48d..0000000000
--- a/hassio/advanced/hassio-advanced.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-
-<link rel="import" href="./hassio-host-info.html">
-<link rel="import" href="./hassio-hass-info.html">
-<link rel="import" href="./hassio-supervisor-info.html">
-
-<dom-module id="hassio-advanced">
-  <template>
-    <style include="iron-flex ha-style">
-      .content {
-        padding: 24px 0 32px;
-        max-width: 600px;
-        margin: 0 auto;
-      }
-      .status {
-        @apply(--layout-horizontal);
-        margin-bottom: 24px;
-      }
-      .status > * {
-        @apply(--layout-flex);
-      }
-
-      .status > *:first-child {
-        margin-right: 24px;
-      }
-    </style>
-    <div class='content'>
-      <div class='status'>
-        <hassio-supervisor-info
-          hass='[[hass]]'
-          data='[[supervisorInfo]]'
-        ></hassio-supervisor-info>
-
-        <hassio-host-info
-          hass='[[hass]]'
-          data='[[hostInfo]]'
-        ></hassio-host-info>
-      </div>
-      <div class='status'>
-        <hassio-hass-info
-          hass='[[hass]]'
-          data='[[hassInfo]]'
-        ></hassio-hass-info>
-        <div></div>
-      </div>
-    </div>
-  </template>
-</dom-module>
-
-<script>
-class HassioAdvanced extends Polymer.Element {
-  static get is() { return 'hassio-advanced'; }
-
-  static get properties() {
-    return {
-      hass: Object,
-      supervisorInfo: Object,
-      hostInfo: Object,
-      hassInfo: Object,
-    };
-  }
-}
-
-customElements.define(HassioAdvanced.is, HassioAdvanced);
-</script>
diff --git a/hassio/advanced/hassio-hass-info.html b/hassio/advanced/hassio-hass-info.html
deleted file mode 100644
index d38843961b..0000000000
--- a/hassio/advanced/hassio-hass-info.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-
-<link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
-
-<dom-module id="hassio-hass-info">
-  <template>
-    <style include="iron-flex ha-style">
-      paper-card {
-        display: block;
-        height: 100%;
-      }
-      .info {
-        width: 100%;
-      }
-      .info td:nth-child(2) {
-        text-align: right;
-      }
-      .errors {
-        color: var(--google-red-500);
-        margin-top: 16px;
-      }
-    </style>
-
-    <paper-card heading="Home Assistant">
-      <div class="card-content">
-        <table class='info'>
-          <tr>
-            <td>Current version</td>
-            <td>[[data.version]]</td>
-          </tr>
-          <tr>
-            <td>Latest version</td>
-            <td>[[data.last_version]]</td>
-          </tr>
-        </table>
-        <template is='dom-if' if='[[errors]]'>
-          <div class='errors'>Error: [[errors]]</div>
-        </template>
-      </div>
-      <div class="card-actions">
-        <template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
-          <ha-call-api-button
-            hass='[[hass]]'
-            path="hassio/homeassistant/update"
-          >Update</ha-call-api-button>
-        </template>
-        <ha-call-api-button
-          class="warning"
-          hass="[[hass]]"
-          path="hassio/homeassistant/restart"
-        >Restart</ha-call-api-button>
-      </div>
-    </paper-card>
-  </template>
-</dom-module>
-
-<script>
-class HassioHassInfo extends Polymer.Element {
-  static get is() { return 'hassio-hass-info'; }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      data: {
-        type: Object,
-        value: {},
-      },
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
-  }
-
-  apiCalled(ev) {
-    if (ev.detail.success) {
-      this.errors = null;
-      return;
-    }
-
-    var response = ev.detail.response;
-
-    if (typeof response.body === 'object') {
-      this.errors = response.body.message || 'Unknown error';
-    } else {
-      this.errors = response.body;
-    }
-  }
-
-  computeUpdateAvailable(data) {
-    return data.version !== data.last_version;
-  }
-}
-
-customElements.define(HassioHassInfo.is, HassioHassInfo);
-</script>
diff --git a/hassio/hassio-pages-with-tabs.html b/hassio/hassio-pages-with-tabs.html
index d2d7851ca9..0c05d765f8 100644
--- a/hassio/hassio-pages-with-tabs.html
+++ b/hassio/hassio-pages-with-tabs.html
@@ -68,7 +68,6 @@
           hass='[[hass]]'
           supervisor-info='[[supervisorInfo]]'
           host-info='[[hostInfo]]'
-          hass-info='[[hassInfo]]'
         ></hassio-system>
       </template>
     </app-header-layout>
diff --git a/hassio/supervisor/hassio-supervisor.html b/hassio/supervisor/hassio-supervisor.html
deleted file mode 100644
index 54e8cec6d0..0000000000
--- a/hassio/supervisor/hassio-supervisor.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-
-<dom-module id="hassio-supervisor">
-  <template>
-    <style include="iron-flex ha-style">
-      .content {
-        padding: 16px;
-        margin: 0;
-        white-space: pre-wrap;
-      }
-      paper-icon-button {
-        color: var(--primary-color);
-        position: sticky;
-        top: 0;
-        float: right;
-      }
-    </style>
-    <paper-icon-button
-      icon='mdi:refresh'
-      on-tap='refreshTapped'
-    ></paper-icon-button>
-    <pre class='content'>[[log]]</pre>
-  </template>
-</dom-module>
-
-<script>
-class HassioSupervisor extends Polymer.Element {
-  static get is() { return 'hassio-supervisor'; }
-
-  static get properties() {
-    return {
-      hass: Object,
-      log: String,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.loadData();
-  }
-
-  loadData() {
-    this.hass.callApi('get', 'hassio/supervisor/logs')
-      .then((info) => {
-        this.log = info;
-      }, () => {
-        this.log = 'Error fetching logs';
-      });
-  }
-
-  refreshTapped() {
-    this.loadData();
-  }
-}
-
-customElements.define(HassioSupervisor.is, HassioSupervisor);
-</script>
diff --git a/hassio/advanced/hassio-host-info.html b/hassio/system/hassio-host-info.html
similarity index 79%
rename from hassio/advanced/hassio-host-info.html
rename to hassio/system/hassio-host-info.html
index 0c84e4c52d..86a1454626 100644
--- a/hassio/advanced/hassio-host-info.html
+++ b/hassio/system/hassio-host-info.html
@@ -7,8 +7,21 @@
   <template>
     <style include="iron-flex ha-style">
       paper-card {
-        display: block;
-        height: 100%;
+        display: inline-block;
+        width: 350px;
+      }
+      .card-content {
+        height: 110px;
+      }
+      @media screen and (max-width: 730px) {
+        paper-card {
+          margin-top: 8px;     
+          width: 100%;
+          height: 100%;
+        }
+        .card-content {
+          height: 100%;
+        }
       }
       .info {
         width: 100%;
@@ -21,27 +34,19 @@
         margin-top: 16px;
       }
     </style>
-    <paper-card heading="Host OS">
+    <paper-card heading="Host system">
       <div class="card-content">
         <table class='info'>
-          <tr>
-            <td>Hostname</td>
-            <td>[[data.hostname]]</td>
-          </tr>
           <tr>
             <td>Type</td>
-            <td>[[data.type]]</td>
+            <td>[[data.type]] ([[data.os]])</td>
           </tr>
           <tr>
-            <td>OS</td>
-            <td>[[data.os]]</td>
-          </tr>
-          <tr>
-            <td>Host Control version</td>
+            <td>Host controller version</td>
             <td>[[data.version]]</td>
           </tr>
           <tr>
-            <td>Latest available version</td>
+            <td>Latest version</td>
             <td>[[data.last_version]]</td>
           </tr>
         </table>
@@ -81,15 +86,8 @@ class HassioHostInfo extends Polymer.Element {
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-      },
-
-      data: {
-        type: Object,
-        value: {},
-      },
-
+      hass: Object,
+      data: Object,
       errors: String,
     };
   }
@@ -119,13 +117,13 @@ class HassioHostInfo extends Polymer.Element {
   }
 
   computeRebootAvailable(data) {
-    return data.features && data.features.indexOf('reboot') !== -1;
+    return data.features && data.features.includes('reboot');
   }
 
   computeShutdownAvailable(data) {
-    return data.features && data.features.indexOf('shutdown') !== -1;
+    return data.features && data.features.includes('shutdown');
   }
 }
 
 customElements.define(HassioHostInfo.is, HassioHostInfo);
-</script>
+</script>
\ No newline at end of file
diff --git a/hassio/advanced/hassio-supervisor-info.html b/hassio/system/hassio-supervisor-info.html
similarity index 78%
rename from hassio/advanced/hassio-supervisor-info.html
rename to hassio/system/hassio-supervisor-info.html
index babac87922..548c078eae 100644
--- a/hassio/advanced/hassio-supervisor-info.html
+++ b/hassio/system/hassio-supervisor-info.html
@@ -8,8 +8,19 @@
   <template>
     <style include="iron-flex ha-style">
       paper-card {
-        display: block;
-        height: 100%;
+        display: inline-block;
+        width: 350px;
+      }
+      .card-content {
+        height: 110px;
+      }
+      @media screen and (max-width: 730px) {
+        paper-card {
+          width: 100%;          
+        }
+        .card-content {
+          height: 100%;
+        }
       }
       .info {
         width: 100%;
@@ -22,19 +33,20 @@
         margin-top: 16px;
       }
     </style>
-    <paper-card heading="Supervisor">
+    <paper-card heading="Hass.io supervisor">
       <div class="card-content">
         <table class='info'>
           <tr>
             <td>Version</td>
-            <td>[[data.version]]</td>
+            <td>
+              [[data.version]]
+              <template is='dom-if' if='[[data.beta_channel]]'>
+                (Beta)
+              </template>
+            </td>
           </tr>
           <tr>
-            <td>Beta channel</td>
-            <td>[[data.beta_channel]]</td>
-          </tr>
-          <tr>
-            <td>Latest available version</td>
+            <td>Latest version</td>
             <td>[[data.last_version]]</td>
           </tr>
         </table>
@@ -43,7 +55,6 @@
         </template>
       </div>
       <div class="card-actions">
-        <paper-button on-tap='supervisorLogsTapped'>View logs</paper-button>
         <template is='dom-if' if='[[computeUpdateAvailable(data)]]'>
           <ha-call-api-button
             hass='[[hass]]'
@@ -66,15 +77,8 @@ class HassioSupervisorInfo extends window.hassMixins.EventsMixin(Polymer.Element
 
   static get properties() {
     return {
-      hass: {
-        type: Object,
-      },
-
-      data: {
-        type: Object,
-        value: {},
-      },
-
+      hass: Object,
+      data: Object,
       errors: String,
     };
   }
@@ -102,12 +106,7 @@ class HassioSupervisorInfo extends window.hassMixins.EventsMixin(Polymer.Element
   computeUpdateAvailable(data) {
     return data.version !== data.last_version;
   }
-
-  supervisorLogsTapped() {
-    history.pushState(null, null, '/hassio/supervisor');
-    this.fire('location-changed');
-  }
 }
 
 customElements.define(HassioSupervisorInfo.is, HassioSupervisorInfo);
-</script>
+</script>
\ No newline at end of file
diff --git a/hassio/system/hassio-supervisor-log.html b/hassio/system/hassio-supervisor-log.html
new file mode 100644
index 0000000000..49551a82a0
--- /dev/null
+++ b/hassio/system/hassio-supervisor-log.html
@@ -0,0 +1,54 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel='import' href='../../bower_components/paper-card/paper-card.html'>
+<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+
+<dom-module id="hassio-supervisor-log">
+  <template>
+    <style include="ha-style">
+      paper-card {
+        display: block;
+      }
+    </style>
+    <paper-card>
+      <div class='card-content'>
+        <pre>[[log]]</pre>
+      </div>
+      <div class='card-actions'>
+        <paper-button on-tap='refreshTapped'>Refresh</paper-button>
+      </div>
+    </paper-card>
+  </template>
+</dom-module>
+
+<script>
+class HassioSupervisorLog extends Polymer.Element {
+  static get is() { return 'hassio-supervisor-log'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      log: String,
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.loadData();
+  }
+
+  loadData() {
+    this.hass.callApi('get', 'hassio/supervisor/logs')
+      .then((info) => {
+        this.log = info;
+      }, () => {
+        this.log = 'Error fetching logs';
+      });
+  }
+
+  refreshTapped() {
+    this.loadData();
+  }
+}
+
+customElements.define(HassioSupervisorLog.is, HassioSupervisorLog);
+</script>
\ No newline at end of file
diff --git a/hassio/system/hassio-system.html b/hassio/system/hassio-system.html
new file mode 100644
index 0000000000..ba62bacf3d
--- /dev/null
+++ b/hassio/system/hassio-system.html
@@ -0,0 +1,54 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+
+<link rel="import" href="./hassio-host-info.html">
+<link rel="import" href="./hassio-supervisor-info.html">
+<link rel='import' href='./hassio-supervisor-log.html'>
+
+<dom-module id="hassio-system">
+  <template>
+    <style include="iron-flex ha-style">
+      .content {
+        margin: 4px;
+      }
+      .title {
+        margin-top: 24px;
+        color: var(--primary-text-color);
+        font-size: 2em;
+        padding-left: 8px;
+        margin-bottom: 8px;
+      }
+    </style>
+    <div class='content'>
+      <div class='title'>Information</div>
+      <hassio-supervisor-info
+        hass='[[hass]]'
+        data='[[supervisorInfo]]'
+      ></hassio-supervisor-info>
+      <hassio-host-info
+        hass='[[hass]]'
+        data='[[hostInfo]]'
+      ></hassio-host-info>
+      <div class='title'>System log</div>
+      <hassio-supervisor-log
+        hass='[[hass]]'
+      ></hassio-supervisor-log>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+class HassioSystem extends Polymer.Element {
+  static get is() { return 'hassio-system'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      supervisorInfo: Object,
+      hostInfo: Object,
+    };
+  }
+}
+
+customElements.define(HassioSystem.is, HassioSystem);
+</script>
\ No newline at end of file