diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts
index 722697ecd2..895b729973 100644
--- a/hassio/src/addon-store/hassio-addon-repository.ts
+++ b/hassio/src/addon-store/hassio-addon-repository.ts
@@ -42,46 +42,45 @@ class HassioAddonRepositoryEl extends LitElement {
 
     if (this.filter && addons.length < 1) {
       return html`
-        <div class="card-group">
-          <div class="title">
-            <div class="description">
-              No results found in "${repo.name}"
-            </div>
-          </div>
+        <div class="content">
+          <p class="description">
+            No results found in "${repo.name}"
+          </p>
         </div>
       `;
     }
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           ${repo.name}
-          <div class="description">
-            Maintained by ${repo.maintainer}<br />
-            <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
-          </div>
+        </h1>
+        <p class="description">
+          Maintained by ${repo.maintainer}<br />
+          <a class="repo" href=${repo.url} target="_blank">${repo.url}</a>
+        </p>
+        <div class="card-group">
+          ${addons.map(
+            (addon) => html`
+              <paper-card
+                .addon=${addon}
+                class=${addon.available ? "" : "not_available"}
+                @click=${this.addonTapped}
+              >
+                <div class="card-content">
+                  <hassio-card-content
+                    .hass=${this.hass}
+                    .title=${addon.name}
+                    .description=${addon.description}
+                    .available=${addon.available}
+                    .icon=${this.computeIcon(addon)}
+                    .iconTitle=${this.computeIconTitle(addon)}
+                    .iconClass=${this.computeIconClass(addon)}
+                  ></hassio-card-content>
+                </div>
+              </paper-card>
+            `
+          )}
         </div>
-
-        ${addons.map(
-          (addon) => html`
-            <paper-card
-              .addon=${addon}
-              class=${addon.available ? "" : "not_available"}
-              @click=${this.addonTapped}
-            >
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${addon.name}
-                  .description=${addon.description}
-                  .available=${addon.available}
-                  .icon=${this.computeIcon(addon)}
-                  .iconTitle=${this.computeIconTitle(addon)}
-                  .iconClass=${this.computeIconClass(addon)}
-                ></hassio-card-content>
-              </div>
-            </paper-card>
-          `
-        )}
       </div>
     `;
   }
diff --git a/hassio/src/addon-store/hassio-repositories-editor.ts b/hassio/src/addon-store/hassio-repositories-editor.ts
index 5110a77c45..27241482b4 100644
--- a/hassio/src/addon-store/hassio-repositories-editor.ts
+++ b/hassio/src/addon-store/hassio-repositories-editor.ts
@@ -36,61 +36,63 @@ class HassioRepositoriesEditor extends LitElement {
   protected render(): TemplateResult {
     const repos = this._sortedRepos(this.repos);
     return html`
-      <div class="card-group">
-        <div class="title">
+      <div class="content">
+        <h1>
           Repositories
-          <div class="description">
-            Configure which add-on repositories to fetch data from:
-          </div>
-        </div>
-        ${// Use repeat so that the fade-out from call-service-api-button
-        // stays with the correct repo after we add/delete one.
-        repeat(
-          repos,
-          (repo) => repo.slug,
-          (repo) => html`
-            <paper-card>
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${repo.name}
-                  .description=${repo.url}
-                  icon="hassio:github-circle"
-                ></hassio-card-content>
-              </div>
-              <div class="card-actions">
-                <ha-call-api-button
-                  path="hassio/supervisor/options"
-                  .hass=${this.hass}
-                  .data=${this.computeRemoveRepoData(repos, repo.url)}
-                  class="warning"
-                >
-                  Remove
-                </ha-call-api-button>
-              </div>
-            </paper-card>
-          `
-        )}
+        </h1>
+        <p class="description">
+          Configure which add-on repositories to fetch data from:
+        </p>
+        <div class="card-group">
+          ${// Use repeat so that the fade-out from call-service-api-button
+          // stays with the correct repo after we add/delete one.
+          repeat(
+            repos,
+            (repo) => repo.slug,
+            (repo) => html`
+              <paper-card>
+                <div class="card-content">
+                  <hassio-card-content
+                    .hass=${this.hass}
+                    .title=${repo.name}
+                    .description=${repo.url}
+                    icon="hassio:github-circle"
+                  ></hassio-card-content>
+                </div>
+                <div class="card-actions">
+                  <ha-call-api-button
+                    path="hassio/supervisor/options"
+                    .hass=${this.hass}
+                    .data=${this.computeRemoveRepoData(repos, repo.url)}
+                    class="warning"
+                  >
+                    Remove
+                  </ha-call-api-button>
+                </div>
+              </paper-card>
+            `
+          )}
 
-        <paper-card>
-          <div class="card-content add">
-            <iron-icon icon="hassio:github-circle"></iron-icon>
-            <paper-input
-              label="Add new repository by URL"
-              .value=${this._repoUrl}
-              @value-changed=${this._urlChanged}
-            ></paper-input>
-          </div>
-          <div class="card-actions">
-            <ha-call-api-button
-              path="hassio/supervisor/options"
-              .hass=${this.hass}
-              .data=${this.computeAddRepoData(repos, this._repoUrl)}
-            >
-              Add
-            </ha-call-api-button>
-          </div>
-        </paper-card>
+          <paper-card>
+            <div class="card-content add">
+              <iron-icon icon="hassio:github-circle"></iron-icon>
+              <paper-input
+                label="Add new repository by URL"
+                .value=${this._repoUrl}
+                @value-changed=${this._urlChanged}
+              ></paper-input>
+            </div>
+            <div class="card-actions">
+              <ha-call-api-button
+                path="hassio/supervisor/options"
+                .hass=${this.hass}
+                .data=${this.computeAddRepoData(repos, this._repoUrl)}
+              >
+                Add
+              </ha-call-api-button>
+            </div>
+          </paper-card>
+        </div>
       </div>
     `;
   }
diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts
index 3d21fc9ea4..e0403b4cf2 100644
--- a/hassio/src/dashboard/hassio-addons.ts
+++ b/hassio/src/dashboard/hassio-addons.ts
@@ -23,37 +23,39 @@ class HassioAddons extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="content card-group">
-        <div class="title">Add-ons</div>
-        ${!this.addons
-          ? html`
-              <paper-card>
-                <div class="card-content">
-                  You don't have any add-ons installed yet. Head over to
-                  <a href="#" @click=${this._openStore}>the add-on store</a> to
-                  get started!
-                </div>
-              </paper-card>
-            `
-          : this.addons
-              .sort((a, b) => (a.name > b.name ? 1 : -1))
-              .map(
-                (addon) => html`
-                  <paper-card .addon=${addon} @click=${this._addonTapped}>
-                    <div class="card-content">
-                      <hassio-card-content
-                        .hass=${this.hass}
-                        title=${addon.name}
-                        description=${addon.description}
-                        ?available=${addon.available}
-                        icon=${this._computeIcon(addon)}
-                        .iconTitle=${this._computeIconTitle(addon)}
-                        .iconClass=${this._computeIconClass(addon)}
-                      ></hassio-card-content>
-                    </div>
-                  </paper-card>
-                `
-              )}
+      <div class="content">
+        <h1>Add-ons</h1>
+        <div class="card-group">
+          ${!this.addons
+            ? html`
+                <paper-card>
+                  <div class="card-content">
+                    You don't have any add-ons installed yet. Head over to
+                    <a href="#" @click=${this._openStore}>the add-on store</a>
+                    to get started!
+                  </div>
+                </paper-card>
+              `
+            : this.addons
+                .sort((a, b) => (a.name > b.name ? 1 : -1))
+                .map(
+                  (addon) => html`
+                    <paper-card .addon=${addon} @click=${this._addonTapped}>
+                      <div class="card-content">
+                        <hassio-card-content
+                          .hass=${this.hass}
+                          title=${addon.name}
+                          description=${addon.description}
+                          ?available=${addon.available}
+                          icon=${this._computeIcon(addon)}
+                          .iconTitle=${this._computeIconTitle(addon)}
+                          .iconClass=${this._computeIconClass(addon)}
+                        ></hassio-card-content>
+                      </div>
+                    </paper-card>
+                  `
+                )}
+        </div>
       </div>
     `;
   }
diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts
index e9d699c669..17f37b083f 100644
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@@ -38,7 +38,12 @@ export class HassioUpdate extends LitElement {
       this.supervisorInfo,
       this.hassOsInfo,
     ].filter((value) => {
-      return !!value && value.version !== value.last_version;
+      return (
+        !!value &&
+        (value.last_version
+          ? value.version !== value.last_version
+          : value.version !== value.version_latest)
+      );
     }).length;
 
     if (!updatesAvailable) {
@@ -52,12 +57,12 @@ export class HassioUpdate extends LitElement {
               <div class="error">Error: ${this._error}</div>
             `
           : ""}
+        <h1>
+          ${updatesAvailable > 1
+            ? "Updates Available 🎉"
+            : "Update Available 🎉"}
+        </h1>
         <div class="card-group">
-          <div class="title">
-            ${updatesAvailable > 1
-              ? "Updates Available 🎉"
-              : "Update Available 🎉"}
-          </div>
           ${this._renderUpdateCard(
             "Home Assistant",
             this.hassInfo.version,
@@ -149,13 +154,6 @@ export class HassioUpdate extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        :host {
-          width: 33%;
-        }
-        paper-card {
-          display: inline-block;
-          margin-bottom: 32px;
-        }
         .icon {
           --iron-icon-height: 48px;
           --iron-icon-width: 48px;
@@ -170,6 +168,10 @@ export class HassioUpdate extends LitElement {
         .warning {
           color: var(--secondary-text-color);
         }
+        .card-content {
+          height: calc(100% - 47px);
+          box-sizing: border-box;
+        }
         .card-actions {
           text-align: right;
         }
diff --git a/hassio/src/hassio-pages-with-tabs.ts b/hassio/src/hassio-pages-with-tabs.ts
index 9bb5eca5cd..a34eb11666 100644
--- a/hassio/src/hassio-pages-with-tabs.ts
+++ b/hassio/src/hassio-pages-with-tabs.ts
@@ -123,7 +123,7 @@ class HassioPagesWithTabs extends LitElement {
         }
         paper-tabs {
           margin-left: 12px;
-          --paper-tabs-selection-bar-color: #fff;
+          --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
           text-transform: uppercase;
         }
         app-header,
diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts
index 6eb6c2340a..fa33f100b3 100644
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -4,45 +4,36 @@ const documentContainer = document.createElement("template");
 documentContainer.setAttribute("style", "display: none;");
 
 export const hassioStyle = css`
-  .card-group {
-    margin-top: 24px;
+  .content {
+    margin: 8px;
   }
-  .card-group .title {
+  h1 {
     color: var(--primary-text-color);
     font-size: 2em;
-    padding-left: 8px;
     margin-bottom: 8px;
+    font-family: var(--paper-font-headline_-_font-family);
+    -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
+    font-size: var(--paper-font-headline_-_font-size);
+    font-weight: var(--paper-font-headline_-_font-weight);
+    letter-spacing: var(--paper-font-headline_-_letter-spacing);
+    line-height: var(--paper-font-headline_-_line-height);
+    padding-left: 16px;
   }
-  .card-group .description {
-    font-size: 0.5em;
-    font-weight: 500;
+  .description {
     margin-top: 4px;
+    padding-left: 16px;
   }
-  .card-group paper-card {
-    --card-group-columns: 4;
-    width: calc(
-      (100% - 12px * var(--card-group-columns)) / var(--card-group-columns)
-    );
-    margin: 4px;
-    vertical-align: top;
+  .card-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 8px;
   }
-  @media screen and (max-width: 1200px) and (min-width: 901px) {
-    .card-group paper-card {
-      --card-group-columns: 3;
-    }
+  .card-group > * {
+    max-width: 450px;
   }
-  @media screen and (max-width: 900px) and (min-width: 601px) {
-    .card-group paper-card {
-      --card-group-columns: 2;
-    }
-  }
-  @media screen and (max-width: 600px) and (min-width: 0) {
-    .card-group paper-card {
-      width: 100%;
-      margin: 4px 0;
-    }
-    .content {
-      padding: 0;
+  @media screen and (max-width: 800px) {
+    .card-group > * {
+      max-width: 100%;
     }
   }
   ha-call-api-button {
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index db8d047cd7..90116dbb5e 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -79,14 +79,14 @@ class HassioSnapshots extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="content">
+        <h1>
+          Create snapshot
+        </h1>
+        <p class="description">
+          Snapshots allow you to easily backup and restore all data of your
+          Hass.io instance.
+        </p>
         <div class="card-group">
-          <div class="title">
-            Create snapshot
-            <div class="description">
-              Snapshots allow you to easily backup and restore all data of your
-              Hass.io instance.
-            </div>
-          </div>
           <paper-card>
             <div class="card-content">
               <paper-input
@@ -173,8 +173,8 @@ class HassioSnapshots extends LitElement {
           </paper-card>
         </div>
 
+        <h1>Available snapshots</h1>
         <div class="card-group">
-          <div class="title">Available snapshots</div>
           ${this._snapshots === undefined
             ? undefined
             : this._snapshots.length === 0
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index b02dbf1b92..bdaaecbcfa 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -126,23 +126,13 @@ class HassioHostInfo extends LitElement {
       hassioStyle,
       css`
         paper-card {
-          display: inline-block;
-          width: 400px;
-          margin-left: 8px;
+          height: 100%;
+          width: 100%;
         }
         .card-content {
-          height: 200px;
           color: var(--primary-text-color);
-        }
-        @media screen and (max-width: 830px) {
-          paper-card {
-            margin-top: 8px;
-            margin-left: 0;
-            width: 100%;
-          }
-          .card-content {
-            height: auto;
-          }
+          box-sizing: border-box;
+          height: calc(100% - 47px);
         }
         .info {
           width: 100%;
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index 91854c0952..2ff33b4bae 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -103,20 +103,13 @@ class HassioSupervisorInfo extends LitElement {
       hassioStyle,
       css`
         paper-card {
-          display: inline-block;
-          width: 400px;
+          height: 100%;
+          width: 100%;
         }
         .card-content {
-          height: 200px;
           color: var(--primary-text-color);
-        }
-        @media screen and (max-width: 830px) {
-          paper-card {
-            width: 100%;
-          }
-          .card-content {
-            height: auto;
-          }
+          box-sizing: border-box;
+          height: calc(100% - 47px);
         }
         .info {
           width: 100%;
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts
index 9524aac54c..a111969bb7 100644
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -50,6 +50,9 @@ class HassioSupervisorLog extends LitElement {
       hassioStyle,
       ANSI_HTML_STYLE,
       css`
+        paper-card {
+          width: 100%;
+        }
         pre {
           white-space: pre-wrap;
         }
diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts
index 5fbff5de08..fb9c4c192f 100644
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -32,17 +32,19 @@ class HassioSystem extends LitElement {
   public render(): TemplateResult | void {
     return html`
       <div class="content">
-        <div class="title">Information</div>
-        <hassio-supervisor-info
-          .hass=${this.hass}
-          .supervisorInfo=${this.supervisorInfo}
-        ></hassio-supervisor-info>
-        <hassio-host-info
-          .hass=${this.hass}
-          .hostInfo=${this.hostInfo}
-          .hassOsInfo=${this.hassOsInfo}
-        ></hassio-host-info>
-        <div class="title">System log</div>
+        <h1>Information</h1>
+        <div class="side-by-side">
+          <hassio-supervisor-info
+            .hass=${this.hass}
+            .supervisorInfo=${this.supervisorInfo}
+          ></hassio-supervisor-info>
+          <hassio-host-info
+            .hass=${this.hass}
+            .hostInfo=${this.hostInfo}
+            .hassOsInfo=${this.hassOsInfo}
+          ></hassio-host-info>
+        </div>
+        <h1>System log</h1>
         <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
       </div>
     `;
@@ -54,7 +56,7 @@ class HassioSystem extends LitElement {
       hassioStyle,
       css`
         .content {
-          margin: 4px;
+          margin: 8px;
           color: var(--primary-text-color);
         }
         .title {
@@ -64,6 +66,14 @@ class HassioSystem extends LitElement {
           padding-left: 8px;
           margin-bottom: 8px;
         }
+        .side-by-side {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+          grid-gap: 8px;
+        }
+        hassio-supervisor-log {
+          width: 100%;
+        }
       `,
     ];
   }