diff --git a/app/imports/ui/layouts/AppLayout.vue b/app/imports/ui/layouts/AppLayout.vue
index 3098a9bf..8d958e86 100644
--- a/app/imports/ui/layouts/AppLayout.vue
+++ b/app/imports/ui/layouts/AppLayout.vue
@@ -72,6 +72,7 @@
   import DialogStack from '/imports/ui/dialogStack/DialogStack.vue';
   import { mapMutations } from 'vuex';
   import SnackbarQueue from '/imports/ui/components/snackbars/SnackbarQueue.vue';
+  import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 
   export default {
     components: {
@@ -96,7 +97,9 @@
 		meteor: {
 			darkMode(){
 				let user = Meteor.user();
-				return user && user.darkMode;
+        if (!user) return;
+        let tier = getUserTier(user);
+				return tier.paidBenefits && user.darkMode;
 			},
 		},
 		watch: {
diff --git a/app/imports/ui/pages/Account.vue b/app/imports/ui/pages/Account.vue
index f09d1d51..122ae952 100644
--- a/app/imports/ui/pages/Account.vue
+++ b/app/imports/ui/pages/Account.vue
@@ -15,6 +15,8 @@
           <smart-switch
             :value="darkMode"
             label="Dark mode"
+            :disabled="!tier.paidBenefits"
+            :error-messages="tier.paidBenefits ? undefined : 'Patreon reward'"
             @change="setDarkMode"
           />
         </v-list-item>
@@ -188,7 +190,7 @@
         return user && user.emails;
       },
       darkMode(){
-        return this.user && this.user.darkMode;
+        return this.user && this.tier.paidBenefits && this.user.darkMode;
       },
       invites(){
         let usernames = {};
@@ -220,6 +222,7 @@
         return getEntitledCents(this.user);
       },
       tier(){
+        if (!this.user) return {};
         return getUserTier(this.user);
       },
     },