diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index f3f5b76da..b6ebc4364 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -18,6 +18,7 @@ import UserPopover from '../user_popover/user_popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -184,7 +185,7 @@ const Notification = {
     userStyle() {
       const highlight = useSyncConfigStore().mergedConfig.highlight
       const user = this.notification.from_profile
-      return highlightStyle(highlight[user.screen_name])
+      return highlightStyle(useUserHighlightStore().get(user))
     },
     expandable() {
       return new Set(['like', 'pleroma:emoji_reaction', 'repeat', 'poll']).has(
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 634e74f5e..46f1cb623 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -23,6 +23,7 @@ import UserPopover from '../user_popover/user_popover.vue'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -199,16 +200,14 @@ const Status = {
     },
     repeaterStyle() {
       const user = this.statusoid.user
-      const highlight = this.mergedConfig.highlight
-      return highlightStyle(highlight[user.screen_name])
+      return highlightStyle(useUserHighlightStore().get(user.screen_name))
     },
     userStyle() {
       if (this.noHeading) return
       const user = this.retweet
         ? this.statusoid.retweeted_status.user
         : this.statusoid.user
-      const highlight = this.mergedConfig.highlight
-      return highlightStyle(highlight[user.screen_name])
+      return highlightStyle(useUserHighlightStore().get(user.screen_name))
     },
     userProfileLink() {
       return this.generateUserProfileLink(
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 15f2d8e86..491238937 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -29,6 +29,7 @@ import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { usePostStatusStore } from 'src/stores/post_status'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 import localeService from 'src/services/locale/locale.service.js'
@@ -226,39 +227,28 @@ export default {
       }))
     },
     userHighlightType: {
-      get() {
-        const data =
-          useSyncConfigStore().mergedConfig.highlight[this.user.screen_name]
-        return (data && data.type) || 'disabled'
+      get () {
+        return useUserHighlightStore().get(this.user.screen_name).type
       },
-      set(type) {
-        const data =
-          useSyncConfigStore().mergedConfig.highlight[this.user.screen_name]
+      set (type) {
         if (type !== 'disabled') {
-          this.$store.dispatch('setHighlight', {
+          useUserHighlightStore().setAndSave({
             user: this.user.screen_name,
-            color: (data && data.color) || '#FFFFFF',
-            type,
+            value: { type }
           })
         } else {
-          this.$store.dispatch('setHighlight', {
-            user: this.user.screen_name,
-            color: undefined,
-          })
+          useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
         }
       },
-      ...mapState(useSyncConfigStore, ['mergedConfig']),
     },
     userHighlightColor: {
       get() {
-        const data =
-          useSyncConfigStore().mergedConfig.highlight[this.user.screen_name]
-        return data && data.color
+        return useUserHighlightStore().get(this.user.screen_name).color
       },
       set(color) {
-        this.$store.dispatch('setHighlight', {
+        useUserHighlightStore().setAndSave({
           user: this.user.screen_name,
-          color,
+          value: { color }
         })
       },
     },
diff --git a/src/modules/users.js b/src/modules/users.js
index d3e6eae7c..ffc40ff25 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -27,6 +27,7 @@ import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.j
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import { declarations } from 'src/modules/config_declaration'
 
@@ -701,7 +702,8 @@ const users = {
               user.domainMutes = []
               commit('setCurrentUser', user)
 
-              useSyncConfigStore().setSyncConfig(user)
+              useSyncConfigStore().initSyncConfig(user)
+              useUserHighlightStore().initHighlight(user)
               commit('addNewUsers', [user])
 
               useEmojiStore().fetchEmoji()
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 62d7fa855..0135d1651 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -117,6 +117,7 @@ export const parseUser = (data) => {
     if (data.pleroma) {
       if (data.pleroma.settings_store) {
         output.storage = data.pleroma.settings_store['pleroma-fe']
+        output.user_highlight = data.pleroma.settings_store['user_highlight']
       }
       const relationship = data.pleroma.relationship
 
diff --git a/src/stores/sync_config.js b/src/stores/sync_config.js
index b915018d3..057fb86ea 100644
--- a/src/stores/sync_config.js
+++ b/src/stores/sync_config.js
@@ -605,7 +605,8 @@ export const useSyncConfigStore = defineStore('sync_config', {
       this.raw.prefsStorage._journal = []
       this.pushSyncConfig()
     },
-    setSyncConfig(userData) {
+    initSyncConfig(userData) {
+      console.log(userData)
       const live = userData.storage
       this.raw = live
       let cache = this.cache
@@ -682,7 +683,7 @@ export const useSyncConfigStore = defineStore('sync_config', {
       window.vuex.state.api.backendInteractor
         .updateProfileJSON({ params })
         .then((user) => {
-          this.setSyncConfig(user)
+          this.initSyncConfig(user)
           this.dirty = false
         })
     },
diff --git a/test/unit/specs/stores/sync_config.spec.js b/test/unit/specs/stores/sync_config.spec.js
index 561f6dcbb..5ae4ab9cc 100644
--- a/test/unit/specs/stores/sync_config.spec.js
+++ b/test/unit/specs/stores/sync_config.spec.js
@@ -22,7 +22,7 @@ describe('The SyncConfig module', () => {
   })
 
   describe('mutations', () => {
-    describe('setSyncConfig', () => {
+    describe('initSyncConfig', () => {
       const user = {
         created_at: new Date('1999-02-09'),
         storage: {},
@@ -30,7 +30,7 @@ describe('The SyncConfig module', () => {
 
       it('should initialize storage if none present', () => {
         const store = useSyncConfigStore()
-        store.setSyncConfig({ ...user })
+        store.initSyncConfig({ ...user })
         expect(store.cache._version).to.eql(VERSION)
         expect(store.cache._timestamp).to.be.a('number')
         expect(store.cache.flagStorage).to.eql(defaultState.flagStorage)
@@ -39,7 +39,7 @@ describe('The SyncConfig module', () => {
 
       it('should initialize storage with proper flags for new users if none present', () => {
         const store = useSyncConfigStore()
-        store.setSyncConfig({ ...user, created_at: new Date() })
+        store.initSyncConfig({ ...user, created_at: new Date() })
         expect(store.cache._version).to.eql(VERSION)
         expect(store.cache._timestamp).to.be.a('number')
         expect(store.cache.flagStorage).to.eql(newUserFlags)
@@ -54,7 +54,7 @@ describe('The SyncConfig module', () => {
           ...cloneDeep(defaultState),
         }
 
-        store.setSyncConfig({
+        store.initSyncConfig({
           ...user,
           storage: {
             _timestamp: 123,
@@ -79,7 +79,7 @@ describe('The SyncConfig module', () => {
         const store = useSyncConfigStore()
         store.cache = null
 
-        store.setSyncConfig({
+        store.initSyncConfig({
           ...user,
           storage: {
             _timestamp: 123,
@@ -97,7 +97,7 @@ describe('The SyncConfig module', () => {
 
       it('should use remote version if local missing', () => {
         const store = useSyncConfigStore()
-        store.setSyncConfig(store, user)
+        store.initSyncConfig(store, user)
         expect(store.cache._version).to.eql(VERSION)
         expect(store.cache._timestamp).to.be.a('number')
         expect(store.cache.flagStorage).to.eql(defaultState.flagStorage)