diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 5ca3d77d73..33a80d7d16 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
@@ -133,6 +134,8 @@ class HassioAddonStore extends LitElement {
               </div>
             `
           : ""}
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }
diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts
index 4e11853aca..b8d9876759 100644
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import {
   mdiCogs,
   mdiFileDocument,
@@ -129,6 +130,8 @@ class HassioAddonDashboard extends LitElement {
           .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-router>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }
@@ -177,8 +180,9 @@ class HassioAddonDashboard extends LitElement {
       const requestedAddon = extractSearchParam("addon");
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-        const validAddon = addonsInfo.addons
-          .some((addon) => addon.slug === requestedAddon);
+        const validAddon = addonsInfo.addons.some(
+          (addon) => addon.slug === requestedAddon
+        );
         if (!validAddon) {
           this._error = this.supervisor.localize("my.error_addon_not_found");
         } else {
diff --git a/hassio/src/components/supervisor-connectivity.ts b/hassio/src/components/supervisor-connectivity.ts
new file mode 100644
index 0000000000..e1d8fee5f6
--- /dev/null
+++ b/hassio/src/components/supervisor-connectivity.ts
@@ -0,0 +1,57 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { haStyle } from "../../../src/resources/styles";
+
+@customElement("supervisor-connectivity")
+class SupervisorConnectivity extends LitElement {
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  protected render(): TemplateResult {
+    if (
+      !this.supervisor.network.host_internet &&
+      this.supervisor.network.supervisor_internet
+    ) {
+      return html``;
+    }
+
+    return html`<div class="connectivity">
+      <span>The supervisor has lost connectivity.</span>
+    </div>`;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .connectivity {
+          position: fixed;
+          bottom: 0;
+          height: 32px;
+          width: 100vw;
+          background-color: var(--error-color);
+          color: var(--primary-text-color);
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+        }
+        span {
+          padding-left: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-connectivity": SupervisorConnectivity;
+  }
+}
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index 1a4c373eda..04ea15d656 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import {
   css,
   CSSResult,
@@ -49,6 +50,8 @@ class HassioDashboard extends LitElement {
             .supervisor=${this.supervisor}
           ></hassio-addons>
         </div>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index 8081525d5f..65133f480d 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
@@ -269,6 +270,8 @@ class HassioSnapshots extends LitElement {
                 )}
           </div>
         </div>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }
diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts
index d992539a97..19a26e0167 100644
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -1,3 +1,4 @@
+import "../components/supervisor-connectivity";
 import {
   css,
   CSSResult,
@@ -62,6 +63,8 @@ class HassioSystem extends LitElement {
             .supervisor=${this.supervisor}
           ></hassio-supervisor-log>
         </div>
+        <supervisor-connectivity .supervisor=${this.supervisor}>
+        </supervisor-connectivity>
       </hass-tabs-subpage>
     `;
   }
diff --git a/src/data/hassio/network.ts b/src/data/hassio/network.ts
index 5aef6cc336..ea5feaa78c 100644
--- a/src/data/hassio/network.ts
+++ b/src/data/hassio/network.ts
@@ -50,6 +50,8 @@ export interface WifiConfiguration {
 export interface NetworkInfo {
   interfaces: NetworkInterface[];
   docker: DockerNetwork;
+  supervisor_internet: boolean;
+  host_internet: boolean | null;
 }
 
 export const fetchNetworkInfo = async (