diff --git a/web/package-lock.json b/web/package-lock.json
index 581d0f75..d1c32938 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -18,7 +18,8 @@
         "papaparse": "^5.4.1",
         "socket.io-client": "^4.6.1",
         "vue": "^3.2.47",
-        "vue-router": "^4.1.6"
+        "vue-router": "^4.1.6",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.2.0",
@@ -3187,6 +3188,17 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index 73a1a0c3..1a311e02 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,7 +20,8 @@
     "papaparse": "^5.4.1",
     "socket.io-client": "^4.6.1",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
diff --git a/web/src/main.js b/web/src/main.js
index 46f3b884..e9067112 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createStore } from 'vuex'
 import App from './App.vue'
 import router from './router'
 
@@ -6,6 +7,23 @@ import './assets/tailwind.css'
 
 const app = createApp(App)
 
+// Create a new store instance.
+const store = createStore({
+    state () {
+      return {
+        count: 0,
+        settingsChanged:Boolean
+      }
+    },
+    mutations: {
+      increment (state) {
+        state.count++
+      }
+    }
+  })
+
+
 app.use(router)
+app.use(store)
 
 app.mount('#app')
\ No newline at end of file
diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 496f60e8..54d77bef 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -1150,7 +1150,8 @@ export default {
 
     },
     async activated() {
-
+        
+console.log('settings changed',this.$store.state.settingsChanged)
         // This lifecycle hook runs every time you switch from other page back to this page (vue-router)
         // To fix scrolling back to last message, this hook is needed.
         // If anyone knows hor to fix scroll issue when changing pages, please do fix it :D
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index d5236db1..640fb474 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1632,7 +1632,9 @@ export default {
 
             })
         },
-        settingsChanged() {
+        settingsChanged(val) {
+            this.$store.state.settingsChanged=val
+            //this.$store.settingsChanged=val
             nextTick(() => {
                 feather.replace()