diff --git a/src/renderer/components/Preferences/Account.vue b/src/renderer/components/Preferences/Account.vue
index 2084e03b..57c407b5 100644
--- a/src/renderer/components/Preferences/Account.vue
+++ b/src/renderer/components/Preferences/Account.vue
@@ -1,63 +1,60 @@
 <template>
-<div id="account">
-  <h2>{{ $t('preferences.account.title') }}</h2>
-  <el-form class="connected-account section" size="small">
-    <h3>{{ $t('preferences.account.connected') }}</h3>
-    <el-form-item>
-      <el-table
-        :data="accounts"
-        tooltip-effect="dark"
-        empty-text="No accounts"
-        style="width: 100%"
-        v-loading="accountLoading">
-        <el-table-column
-          prop="username"
-          :label="$t('preferences.account.username')">
-        </el-table-column>
-        <el-table-column
-          prop="domain"
-          :label="$t('preferences.account.domain')">
-        </el-table-column>
-        <el-table-column
-          :label="$t('preferences.account.association')">
-          <template slot-scope="scope">
-            <el-button
-              @click.native.prevent="removeAccount(scope.$index, accounts)"
-              type="text"
-              class="action">
-              <i class="el-icon-close"></i> {{ $t('preferences.account.remove_association') }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          :label="$t('preferences.account.order')"
-          width="60">
-          <template slot-scope="scope">
-            <div class="allow-up">
-              <el-button class="arrow-up action" type="text" icon="el-icon-arrow-up" @click.native.prevent="forward(scope.$index, accounts)"></el-button>
-            </div>
-            <div class="allow-down">
-              <el-button class="arrow-down action" type="text" icon="el-icon-arrow-down" @click.native.prevent="backward(scope.$index, accounts)"></el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-form-item>
-    <el-form-item>
-      <el-popover
-        placement="top"
-        width="160"
-        v-model="deletePopoverVisible">
-        <p>{{ $t('preferences.account.confirm_message') }}</p>
-        <div style="text-align: right; margin: 0">
-          <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
-          <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
-        </div>
-        <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
-      </el-popover>
-    </el-form-item>
-  </el-form>
-</div>
+  <div id="account">
+    <h2>{{ $t('preferences.account.title') }}</h2>
+    <el-form class="connected-account section" size="small">
+      <h3>{{ $t('preferences.account.connected') }}</h3>
+      <el-form-item>
+        <el-table
+          :data="accounts"
+          tooltip-effect="dark"
+          empty-text="No accounts"
+          style="width: 100%"
+          v-loading="accountLoading"
+          :element-loading-background="backgroundColor"
+        >
+          <el-table-column prop="username" :label="$t('preferences.account.username')"> </el-table-column>
+          <el-table-column prop="domain" :label="$t('preferences.account.domain')"> </el-table-column>
+          <el-table-column :label="$t('preferences.account.association')">
+            <template slot-scope="scope">
+              <el-button @click.native.prevent="removeAccount(scope.$index, accounts)" type="text" class="action">
+                <i class="el-icon-close"></i> {{ $t('preferences.account.remove_association') }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('preferences.account.order')" width="60">
+            <template slot-scope="scope">
+              <div class="allow-up">
+                <el-button
+                  class="arrow-up action"
+                  type="text"
+                  icon="el-icon-arrow-up"
+                  @click.native.prevent="forward(scope.$index, accounts)"
+                ></el-button>
+              </div>
+              <div class="allow-down">
+                <el-button
+                  class="arrow-down action"
+                  type="text"
+                  icon="el-icon-arrow-down"
+                  @click.native.prevent="backward(scope.$index, accounts)"
+                ></el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item>
+        <el-popover placement="top" width="160" v-model="deletePopoverVisible">
+          <p>{{ $t('preferences.account.confirm_message') }}</p>
+          <div style="text-align: right; margin: 0">
+            <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
+            <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
+          </div>
+          <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
+        </el-popover>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
@@ -65,7 +62,7 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'account',
-  data () {
+  data() {
     return {
       openRemoveDialog: false,
       deletePopoverVisible: false
@@ -75,13 +72,16 @@ export default {
     ...mapState({
       accounts: state => state.Preferences.Account.accounts,
       accountLoading: state => state.Preferences.Account.accountLoading
+    }),
+    ...mapState({
+      backgroundColor: state => state.App.theme.background_color
     })
   },
-  created () {
+  created() {
     this.loadAccounts()
   },
   methods: {
-    async loadAccounts () {
+    async loadAccounts() {
       this.$store.commit('Preferences/Account/updateAccountLoading', true)
       try {
         await this.$store.dispatch('Preferences/Account/loadAccounts')
@@ -94,8 +94,9 @@ export default {
         this.$store.commit('Preferences/Account/updateAccountLoading', false)
       }
     },
-    removeAccount (index, accounts) {
-      this.$store.dispatch('Preferences/Account/removeAccount', accounts[index])
+    removeAccount(index, accounts) {
+      this.$store
+        .dispatch('Preferences/Account/removeAccount', accounts[index])
         .then(() => {
           this.loadAccounts()
         })
@@ -106,24 +107,21 @@ export default {
           })
         })
     },
-    forward (index, accounts) {
-      this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index])
-        .then(() => {
-          this.loadAccounts()
-        })
+    forward(index, accounts) {
+      this.$store.dispatch('Preferences/Account/forwardAccount', accounts[index]).then(() => {
+        this.loadAccounts()
+      })
     },
-    backward (index, accounts) {
-      this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index])
-        .then(() => {
-          this.loadAccounts()
-        })
+    backward(index, accounts) {
+      this.$store.dispatch('Preferences/Account/backwardAccount', accounts[index]).then(() => {
+        this.loadAccounts()
+      })
     },
-    removeAllAssociations () {
+    removeAllAssociations() {
       this.deletePopoverVisible = false
-      this.$store.dispatch('Preferences/Account/removeAllAccounts')
-        .then(() => {
-          this.$router.push('/login')
-        })
+      this.$store.dispatch('Preferences/Account/removeAllAccounts').then(() => {
+        this.$router.push('/login')
+      })
     }
   }
 }
@@ -164,5 +162,4 @@ export default {
     }
   }
 }
-
 </style>
diff --git a/src/renderer/components/Preferences/General.vue b/src/renderer/components/Preferences/General.vue
index 48307c71..49178059 100644
--- a/src/renderer/components/Preferences/General.vue
+++ b/src/renderer/components/Preferences/General.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="general" v-loading="loading">
+  <div id="general" v-loading="loading" :element-loading-background="backgroundColor">
     <h2>{{ $t('preferences.general.title') }}</h2>
     <el-form class="sounds section" label-position="right" label-width="250px" size="small">
       <h3>{{ $t('preferences.general.sounds.title') }}</h3>
@@ -42,6 +42,9 @@ export default {
     ...mapState('Preferences/General', {
       loading: state => state.loading
     }),
+    ...mapState({
+      backgroundColor: state => state.App.theme.background_color
+    }),
     ...mapGetters('Preferences/General', ['notDarwin']),
     sound_fav_rb: {
       get() {