diff --git a/src/composables/useBrowserStorage.ts b/src/composables/useBrowserStorage.ts
index 1521a4f..e83b828 100644
--- a/src/composables/useBrowserStorage.ts
+++ b/src/composables/useBrowserStorage.ts
@@ -4,14 +4,17 @@ function mergeDeep(defaults: any, source: any): any {
   const output = { ...defaults } // Start with defaults
 
   Object.keys(defaults).forEach((key) => {
-    if (isObject(defaults[key]) && source?.[key] != null) {
+    const defaultValue = defaults[key]
+    const sourceValue = source?.[key]
+
+    if (isObject(defaultValue) && sourceValue != null) {
       // Recursively merge nested objects
-      output[key] = mergeDeep(defaults[key], source[key])
-    } else if (checkType(defaults[key], source?.[key])) {
-      output[key] = source[key]
+      output[key] = mergeDeep(defaultValue, sourceValue)
+    } else if (checkType(defaultValue, sourceValue)) {
+      output[key] = sourceValue
     } else {
       // If the type is different, use the default value
-      output[key] = defaults[key]
+      output[key] = defaultValue
     }
   })
 
@@ -33,6 +36,8 @@ function isObject(value: any): boolean {
 
 export function useBrowserSyncStorage<T>(key: string, defaultValue: T) {
   const data = ref<T>(defaultValue)
+  // Blocking setting storage if it is updating from storage
+  let isUpdatingFromStorage = false
   // Initialize storage with the value from chrome.storage.sync
   chrome.storage.sync.get(key, (result) => {
     if (result?.[key] !== undefined) {
@@ -48,15 +53,29 @@ export function useBrowserSyncStorage<T>(key: string, defaultValue: T) {
   watch(
     data,
     (newValue) => {
-      chrome.storage.sync.set({ [key]: toRaw(newValue) })
+      if (!isUpdatingFromStorage)
+        chrome.storage.sync.set({ [key]: toRaw(newValue) })
     },
     { deep: true },
   )
+  // Add the onChanged listener here
+  chrome.storage.sync.onChanged.addListener(function (changes) {
+    if (changes?.[key]) {
+      isUpdatingFromStorage = true
+      const { oldValue, newValue } = changes.settings
+      data.value = newValue
+      setTimeout(() => {
+        isUpdatingFromStorage = false
+      }, 5)
+    }
+  })
   return data
 }
 
 export function useBrowserLocalStorage<T>(key: string, defaultValue: T) {
   const data = ref<T>(defaultValue)
+  // Blocking setting storage if it is updating from storage
+  let isUpdatingFromStorage = false
   // Initialize storage with the value from chrome.storage.local
   chrome.storage.local.get(key, (result) => {
     if (result?.[key] !== undefined) {
@@ -72,9 +91,21 @@ export function useBrowserLocalStorage<T>(key: string, defaultValue: T) {
   watch(
     data,
     (newValue) => {
-      chrome.storage.local.set({ [key]: toRaw(newValue) })
+      if (!isUpdatingFromStorage)
+        chrome.storage.local.set({ [key]: toRaw(newValue) })
     },
     { deep: true },
   )
+  // Add the onChanged listener here
+  chrome.storage.local.onChanged.addListener(function (changes) {
+    if (changes?.[key]) {
+      isUpdatingFromStorage = true
+      const { oldValue, newValue } = changes.settings
+      data.value = newValue
+      setTimeout(() => {
+        isUpdatingFromStorage = false
+      }, 5)
+    }
+  })
   return data
 }