diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
new file mode 100644
index 00000000..b600b63b
--- /dev/null
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -0,0 +1,57 @@
+<template>
+  <label
+    class="BooleanSetting"
+  >
+    <Checkbox
+      :checked="state"
+      @change="update"
+      :disabled="disabled"
+    >
+      <span
+        v-if="!!$slots.default"
+        class="label"
+        >
+        <slot />
+      </span>
+      <ModifiedIndicator :changed="isChanged" />
+    </Checkbox>
+  </label>
+</template>
+
+<script>
+import { get, set } from 'lodash'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  props: [
+    'path',
+    'disabled'
+  ],
+  components: {
+    Checkbox,
+    ModifiedIndicator
+  },
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.BooleanSetting {
+}
+</style>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
new file mode 100644
index 00000000..b75a2811
--- /dev/null
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="changed"
+    class="ModifiedIndicator"
+    >
+    <Popover
+      trigger="hover"
+      >
+      <span slot="trigger">
+        &nbsp;
+          <FAIcon
+            icon="wrench"
+          />
+      </span>
+      <div
+        class="modified-tooltip"
+        slot="content"
+        >
+      {{ $t('settings.setting_changed') }}
+      </div>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench
+)
+
+export default {
+  props: ['changed'],
+  components: { Popover }
+}
+</script>
+
+<style lang="scss">
+.ModifiedIndicator {
+  display: inline-block;
+  position: relative;
+
+  .modified-tooltip {
+    margin: 0.5em 1em;
+    min-width: 10em;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 86703697..2c833c0c 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,29 +1,15 @@
-import {
-  instanceDefaultProperties,
-  multiChoiceProperties,
-  defaultState as configDefaultState
-} from 'src/modules/config.js'
+import { defaultState as configDefaultState } from 'src/modules/config.js'
 
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Getting localized values for instance-default properties
-  ...instanceDefaultProperties
-    .filter(key => multiChoiceProperties.includes(key))
+  // Getting values for default properties
+  ...Object.keys(configDefaultState)
     .map(key => [
       key + 'DefaultValue',
       function () {
-        return this.$store.getters.instanceDefaultConfig[key]
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...instanceDefaultProperties
-    .filter(key => !multiChoiceProperties.includes(key))
-    .map(key => [
-      key + 'LocalizedValue',
-      function () {
-        return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
+        return this.$store.getters.defaultConfig[key]
       }
     ])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 5f38a5ae..6e95f7af 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,5 +1,5 @@
 import { filter, trim } from 'lodash'
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -18,7 +18,7 @@ const FilteringTab = {
     }
   },
   components: {
-    Checkbox
+    BooleanSetting
   },
   computed: {
     ...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 8f850c8b..18dd4be9 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -5,34 +5,34 @@
         <span class="label">{{ $t('settings.notification_visibility') }}</span>
         <ul class="option-list">
           <li>
-            <Checkbox v-model="notificationVisibility.likes">
+            <BooleanSetting path="notificationVisibility.likes">
               {{ $t('settings.notification_visibility_likes') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.repeats">
+            <BooleanSetting path="notificationVisibility.repeats">
               {{ $t('settings.notification_visibility_repeats') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.follows">
+            <BooleanSetting path="notificationVisibility.follows">
               {{ $t('settings.notification_visibility_follows') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.mentions">
+            <BooleanSetting path="notificationVisibility.mentions">
               {{ $t('settings.notification_visibility_mentions') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.moves">
+            <BooleanSetting path="notificationVisibility.moves">
               {{ $t('settings.notification_visibility_moves') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.emojiReactions">
+            <BooleanSetting path="notificationVisibility.emojiReactions">
               {{ $t('settings.notification_visibility_emoji_reactions') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
         </ul>
       </div>
@@ -60,14 +60,14 @@
         </label>
       </div>
       <div>
-        <Checkbox v-model="hidePostStats">
-          {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
-        </Checkbox>
+        <BooleanSetting path="hidePostStats">
+          {{ $t('settings.hide_post_stats') }}
+        </BooleanSetting>
       </div>
       <div>
-        <Checkbox v-model="hideUserStats">
-          {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
-        </Checkbox>
+        <BooleanSetting path="hideUserStats">
+          {{ $t('settings.hide_user_stats') }}
+        </BooleanSetting>
       </div>
     </div>
     <div class="setting-item">
@@ -80,9 +80,9 @@
         />
       </div>
       <div>
-        <Checkbox v-model="hideFilteredStatuses">
-          {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
-        </Checkbox>
+        <BooleanSetting path="hideFilteredStatuses">
+          {{ $t('settings.hide_filtered_statuses') }}
+        </BooleanSetting>
       </div>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 029ee7a1..2db523be 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,4 +1,4 @@
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -26,7 +26,7 @@ const GeneralTab = {
     }
   },
   components: {
-    Checkbox,
+    BooleanSetting,
     InterfaceLanguageSwitcher
   },
   computed: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index a9081793..f93f4ea0 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -7,14 +7,14 @@
           <interface-language-switcher />
         </li>
         <li v-if="instanceSpecificPanelPresent">
-          <Checkbox v-model="hideISP">
+          <BooleanSetting path="hideISP">
             {{ $t('settings.hide_isp') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li v-if="instanceWallpaperUsed">
-          <Checkbox v-model="hideInstanceWallpaper">
+          <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -22,51 +22,51 @@
       <h2>{{ $t('nav.timeline') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideMutedPosts">
-            {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="hideMutedPosts">
+            {{ $t('settings.hide_muted_posts') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="collapseMessageWithSubject">
-            {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="streaming">
+          <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
-                v-model="pauseOnUnfocused"
+              <BooleanSetting
+                path="pauseOnUnfocused"
                 :disabled="!streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
-              </Checkbox>
+              </BooleanSetting>
             </li>
           </ul>
         </li>
         <li>
-          <Checkbox v-model="useStreamingApi">
+          <BooleanSetting path="useStreamingApi">
             {{ $t('settings.useStreamingApi') }}
             <br>
             <small>
               {{ $t('settings.useStreamingApiWarning') }}
             </small>
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="emojiReactionsOnTimeline">
+          <BooleanSetting path="emojiReactionsOnTimeline">
             {{ $t('settings.emoji_reactions_on_timeline') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="virtualScrolling">
+          <BooleanSetting path="virtualScrolling">
             {{ $t('settings.virtual_scrolling') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -75,14 +75,14 @@
       <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="scopeCopy">
-            {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="scopeCopy">
+            {{ $t('settings.scope_copy') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="alwaysShowSubjectInput">
-            {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="alwaysShowSubjectInput">
+            {{ $t('settings.subject_input_always_show') }}
+          </BooleanSetting>
         </li>
         <li>
           <div>
@@ -143,19 +143,19 @@
           </div>
         </li>
         <li>
-          <Checkbox v-model="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="minimalScopesMode">
+            {{ $t('settings.minimal_scopes_mode') }} {{ minimalScopesModeDefaultValue }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="autohideFloatingPostButton">
+          <BooleanSetting path="autohideFloatingPostButton">
             {{ $t('settings.autohide_floating_post_button') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="padEmoji">
+          <BooleanSetting path="padEmoji">
             {{ $t('settings.pad_emoji') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -164,14 +164,14 @@
       <h2>{{ $t('settings.attachments') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideAttachments">
+          <BooleanSetting path="hideAttachments">
             {{ $t('settings.hide_attachments_in_tl') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="hideAttachmentsInConv">
+          <BooleanSetting path="hideAttachmentsInConv">
             {{ $t('settings.hide_attachments_in_convo') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
           <label for="maxThumbnails">
@@ -179,7 +179,7 @@
           </label>
           <input
             id="maxThumbnails"
-            v-model.number="maxThumbnails"
+            path.number="maxThumbnails"
             class="number-input"
             type="number"
             min="0"
@@ -187,48 +187,48 @@
           >
         </li>
         <li>
-          <Checkbox v-model="hideNsfw">
+          <BooleanSetting path="hideNsfw">
             {{ $t('settings.nsfw_clickthrough') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <ul class="setting-list suboptions">
           <li>
-            <Checkbox
-              v-model="preloadImage"
+            <BooleanSetting
+              path="preloadImage"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.preload_images') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox
-              v-model="useOneClickNsfw"
+            <BooleanSetting
+              path="useOneClickNsfw"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
         </ul>
         <li>
-          <Checkbox v-model="stopGifs">
+          <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="loopVideo">
+          <BooleanSetting path="loopVideo">
             {{ $t('settings.loop_video') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
-                v-model="loopVideoSilentOnly"
+              <BooleanSetting
+                path="loopVideoSilentOnly"
                 :disabled="!loopVideo || !loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
-              </Checkbox>
+              </BooleanSetting>
               <div
                 v-if="!loopSilentAvailable"
                 class="unavailable"
@@ -239,14 +239,14 @@
           </ul>
         </li>
         <li>
-          <Checkbox v-model="playVideosInModal">
+          <BooleanSetting path="playVideosInModal">
             {{ $t('settings.play_videos_in_modal') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="useContainFit">
+          <BooleanSetting path="useContainFit">
             {{ $t('settings.use_contain_fit') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -255,9 +255,9 @@
       <h2>{{ $t('settings.notifications') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="webPushNotifications">
+          <BooleanSetting path="webPushNotifications">
             {{ $t('settings.enable_web_push_notifications') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -266,9 +266,9 @@
       <h2>{{ $t('settings.fun') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="greentext">
-            {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="greentext">
+            {{ $t('settings.greentext') }}
+          </BooleanSetting>
         </li>
       </ul>
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 16a368b1..1d087bbd 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -242,6 +242,7 @@
   "settings": {
     "app_name": "App name",
     "security": "Security",
+    "setting_changed": "Setting is different from default",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "mfa": {
       "otp": "OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index cd088737..f992519e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -76,18 +76,22 @@ export const instanceDefaultProperties = Object.entries(defaultState)
   .map(([key, value]) => key)
 
 const config = {
-  state: defaultState,
+  state: { ...defaultState },
   getters: {
-    mergedConfig (state, getters, rootState, rootGetters) {
+    defaultConfig (state, getters, rootState, rootGetters) {
       const { instance } = rootState
       return {
-        ...state,
-        ...instanceDefaultProperties
-          .map(key => [key, state[key] === undefined
-            ? instance[key]
-            : state[key]
-          ])
-          .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+        ...defaultState,
+        ...Object.fromEntries(
+          instanceDefaultProperties.map(key => [key, instance[key]])
+        )
+      }
+    },
+    mergedConfig (state, getters, rootState, rootGetters) {
+      const { defaultConfig } = rootGetters
+      return {
+        ...defaultConfig,
+        ...state
       }
     }
   },