diff --git a/src/shared/preferences/store.ts b/src/shared/preferences/store.ts
index 946bbb8..6902711 100644
--- a/src/shared/preferences/store.ts
+++ b/src/shared/preferences/store.ts
@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { wrapStore } from 'webext-zustand';
 import { create } from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
+import { createJSONStorage, devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { IContent } from '../../popup/hooks/useTransformFormat';
+import { getExtensionStorage } from '../../utils/extensionStorage';
 
 export interface PreferenceState {
   defaultTagsForAssets: string[];
@@ -45,6 +46,7 @@ export const usePreferenceStore = create<PreferenceState & PreferenceActions>()(
       }),
       {
         name: 'preference-storage',
+        storage: createJSONStorage(() => getExtensionStorage('preference-storage')),
       },
     ),
   )),
diff --git a/src/shared/server/store.ts b/src/shared/server/store.ts
index 67878e8..ac2438c 100644
--- a/src/shared/server/store.ts
+++ b/src/shared/server/store.ts
@@ -2,8 +2,9 @@
 import cloneDeepRaw from 'rfdc';
 import { wrapStore } from 'webext-zustand';
 import { create } from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
+import { createJSONStorage, devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import { getExtensionStorage } from '../../utils/extensionStorage';
 
 const cloneDeep = cloneDeepRaw();
 
@@ -49,6 +50,7 @@ export const useServerStore = create<ServerState & ServerActions>()(
         setActive: (id, active) => {
           set((state) => {
             const server = state.servers[id];
+
             if (server) {
               server.active = active;
             }
@@ -95,6 +97,7 @@ export const useServerStore = create<ServerState & ServerActions>()(
       }),
       {
         name: 'server-storage',
+        storage: createJSONStorage(() => getExtensionStorage('server-storage')),
       },
     ),
   )),
diff --git a/src/utils/extensionStorage.ts b/src/utils/extensionStorage.ts
new file mode 100644
index 0000000..ca2b8ed
--- /dev/null
+++ b/src/utils/extensionStorage.ts
@@ -0,0 +1,18 @@
+/* eslint-disable security-node/detect-crlf */
+import { StateStorage } from 'zustand/middleware';
+
+export const getExtensionStorage = (storageName: string): StateStorage => ({
+  getItem: async (key: string): Promise<string | null> => {
+    console.log(key, `has been retrieved in ${storageName}`);
+    const result = await chrome.storage.sync.get(`${storageName}-${key}`);
+    return result[`${storageName}-${key}`] as string | null;
+  },
+  setItem: async (key: string, value: string): Promise<void> => {
+    console.log(key, 'with value', value, `has been saved in ${storageName}`);
+    await chrome.storage.sync.set({ [`${storageName}-${key}`]: value });
+  },
+  removeItem: async (key: string): Promise<void> => {
+    console.log(key, `has been deleted from ${storageName}`);
+    await chrome.storage.sync.remove(`${storageName}-${key}`);
+  },
+});