diff --git a/app/.meteor/packages b/app/.meteor/packages
index ff36c66b..ac4c83dd 100644
--- a/app/.meteor/packages
+++ b/app/.meteor/packages
@@ -49,3 +49,4 @@ littledata:synced-cron
 mdg:meteor-apm-agent
 typescript@4.5.4
 seba:minifiers-autoprefixer
+mixmax:smart-disconnect
diff --git a/app/.meteor/versions b/app/.meteor/versions
index 3f632f0b..8f0370a5 100644
--- a/app/.meteor/versions
+++ b/app/.meteor/versions
@@ -66,6 +66,7 @@ mikowals:batch-insert@1.3.0
 minifier-css@1.6.1
 minifier-js@2.7.5
 minimongo@1.9.0
+mixmax:smart-disconnect@0.0.5
 mobile-experience@1.1.0
 mobile-status-bar@1.1.0
 modern-browsers@0.1.9
diff --git a/app/imports/client/ui/layouts/AppLayout.vue b/app/imports/client/ui/layouts/AppLayout.vue
index a8d3f6bf..4312d456 100644
--- a/app/imports/client/ui/layouts/AppLayout.vue
+++ b/app/imports/client/ui/layouts/AppLayout.vue
@@ -49,6 +49,7 @@
       </v-fade-transition>
     </v-app-bar>
     <v-main>
+      <connection-banner />
       <v-fade-transition mode="out-in">
         <router-view />
       </v-fade-transition>
@@ -66,12 +67,14 @@ import DialogStack from '/imports/client/ui/dialogStack/DialogStack.vue';
 import { mapMutations } from 'vuex';
 import SnackbarQueue from '/imports/client/ui/components/snackbars/SnackbarQueue.vue';
 import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+import ConnectionBanner from '/imports/client/ui/layouts/ConnectionBanner.vue';
 
 export default {
   components: {
     Sidebar,
     DialogStack,
     SnackbarQueue,
+    ConnectionBanner,
   },
   data() {
     return {
diff --git a/app/imports/client/ui/layouts/ConnectionBanner.vue b/app/imports/client/ui/layouts/ConnectionBanner.vue
new file mode 100644
index 00000000..ea33b5c3
--- /dev/null
+++ b/app/imports/client/ui/layouts/ConnectionBanner.vue
@@ -0,0 +1,45 @@
+<template>
+  <v-banner
+    v-if="!connected"
+    sticky
+    single-line
+    :icon="icon"
+    :color="color"
+    style="top: 96px;"
+  >
+    {{ status }}
+  </v-banner>
+</template>
+
+<script lang="js">
+export default {
+  meteor: {
+    status() {
+      return Meteor.status().status;
+    },
+    connected() {
+      return Meteor.status().connected;
+    },
+  },
+  computed: {
+    icon() {
+      switch (this.status) {
+        case 'connecting': return 'mdi-connection';
+        case 'offline': return 'mdi-close-outline';
+        case 'waiting': return 'mdi-timer-sand-empty';
+        case 'failed': return 'mdi-alert-circle';
+        default: return 'mdi-close-outline';
+      }
+    },
+    color() {
+      switch (this.status) {
+        case 'connecting': return 'warning';
+        case 'offline': return 'error';
+        case 'waiting': return 'error';
+        case 'failed': return 'error';
+        default: return 'info';
+      }
+    },
+  }
+}
+</script>
\ No newline at end of file