diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts
index 06abd3e4d5..52f7a70e70 100644
--- a/hassio/src/dashboard/hassio-addons.ts
+++ b/hassio/src/dashboard/hassio-addons.ts
@@ -18,6 +18,23 @@ class HassioAddons extends LitElement {
   @property({ attribute: false }) public supervisor!: Supervisor;
 
   protected render(): TemplateResult {
+    return html`<ha-card
+      .header=${this.supervisor.localize("dashboard.addons")}
+    >
+      <div class="addons">
+        ${this.supervisor.supervisor.addons.map(
+          (addon) => html`<div class="addon">
+            <div class="icon">
+              ${addon.icon && atLeastVersion(this.hass.config.version, 0, 105)
+                ? html`<img src="/api/hassio/addons/${addon.slug}/icon" />`
+                : html`<ha-svg-icon .path=${mdiPuzzle}></ha-svg-icon>`}
+              <div class="overlay"></div>
+            </div>
+            <div class="name">${addon.name}</div>
+          </div>`
+        )}
+      </div>
+    </ha-card>`;
     return html`
       <div class="content">
         <h1>${this.supervisor.localize("dashboard.addons")}</h1>
@@ -88,8 +105,21 @@ class HassioAddons extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        ha-card {
-          cursor: pointer;
+        :root {
+          display: block;
+          max-width: 400px;
+        }
+        .addon {
+          text-align: center;
+          max-width: 100px;
+        }
+        .icon > *:not(.overlay) {
+          position: relative;
+          max-height: 60px;
+          max-width: 60px;
+          margin: auto;
+          --mdc-icon-size: 60px;
+          display: flex;
         }
       `,
     ];
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index f228c295c2..d62c407cd8 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -54,12 +54,14 @@ class HassioDashboard extends LitElement {
       hassioStyle,
       css`
         .content {
+          margin: 4px;
           display: flex;
           max-width: 1500px;
         }
         .content > * {
           display: block;
           min-width: 500px;
+          margin: 4px;
         }
       `,
     ];
diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts
index 671e45f84a..fb2ef491c5 100644
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@@ -47,7 +47,8 @@ export class HassioUpdate extends LitElement {
       Object.keys(supervisor).filter(
         (value) => supervisor[value].update_available
       ).length +
-      supervisor.addon.addons.filter((addon) => addon.update_available).length
+      supervisor.supervisor.addons.filter((addon) => addon.update_available)
+        .length
   );
 
   protected render(): TemplateResult {
@@ -134,7 +135,7 @@ export class HassioUpdate extends LitElement {
     return html`<div class="update-row">
       <paper-icon-item>
         <div class="icon" slot="item-icon">
-          ${options.image
+          ${options.image && atLeastVersion(this.hass.config.version, 0, 104)
             ? html`<img src="${options.image}" />`
             : options.icon
             ? html`<ha-svg-icon .path=${options.icon}></ha-svg-icon>`