diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 77eecb94..6e61600d 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -13,11 +13,11 @@ jobs:
       packages: write
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org
           node-version: 20
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 16749d17..3aafa510 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -20,11 +20,11 @@ jobs:
         working-directory: ./lib/nextjs-themes
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org
           node-version: 20
@@ -45,3 +45,10 @@ jobs:
       - run: node lite.js && pnpm build && pnpm publish-package && node scope.js && pnpm publish-package
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+
+      - name: Mark scoped package as deprecated
+        run: |
+          npm deprecate @mayank1513/nextjs-themes "Please use https://www.npmjs.com/package/nextjs-themes instead. We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist."
+          npm deprecate @mayank1513/nextjs-themes-lite "Please use https://www.npmjs.com/package/nextjs-themes-lite instead. We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist."
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 3bfed44f..d041d1b6 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -14,8 +14,8 @@ jobs:
       run:
         working-directory: ./lib/nextjs-themes
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org
@@ -24,7 +24,7 @@ jobs:
       - name: Test
         run: npm test
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
       - uses: paambaati/codeclimate-action@v5.0.0
diff --git a/.prettierignore b/.prettierignore
index 827d3cea..d7acc479 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,2 @@
-*lock.*
\ No newline at end of file
+*lock.*
+docs
diff --git a/.prettierrc b/.prettierrc
index c2ff9e22..c61b6738 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,5 +3,6 @@
   "printWidth": 120,
   "tabWidth": 2,
   "arrowParens": "avoid",
-  "jsxBracketSameLine": true
+  "jsxBracketSameLine": true,
+  "bracketSameLine": true
 }
diff --git a/.tkb b/.tkb
new file mode 100644
index 00000000..bce46ab5
--- /dev/null
+++ b/.tkb
@@ -0,0 +1,36 @@
+{
+  "scope": "Workspace",
+  "tasks": {
+    "task-hlCkRvoudoMFloe9AQamt": {
+      "id": "task-hlCkRvoudoMFloe9AQamt",
+      "description": "Add persistence and cookies\n",
+      "columnId": "column-done"
+    },
+    "Ls_zB0mgomuqP75XrrxOe": {
+      "id": "Ls_zB0mgomuqP75XrrxOe",
+      "description": "Add support for CSS modules / scoped styles -- v3.1",
+      "columnId": "column-todo"
+    }
+  },
+  "columns": [
+    {
+      "id": "column-todo",
+      "title": "To do",
+      "tasksIds": [
+        "Ls_zB0mgomuqP75XrrxOe"
+      ]
+    },
+    {
+      "id": "column-doing",
+      "title": "Doing",
+      "tasksIds": []
+    },
+    {
+      "id": "column-done",
+      "title": "Done",
+      "tasksIds": [
+        "task-hlCkRvoudoMFloe9AQamt"
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index fe5bd20a..a782489e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
     "editor.formatOnSave": true,
-    "editor.formatOnPaste": true
+    "editor.formatOnPaste": true,
+    "mayank1513.trello-kanban.Workspace.filePath": ".tkb"
 }
\ No newline at end of file
diff --git a/README.md b/README.md
index 8d6e192d..d4f774af 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
 
 [![test](https://github.com/react18-tools/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/nextjs-themes/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/149263e95a1388369bb9/maintainability)](https://codeclimate.com/github/react18-tools/nextjs-themes/maintainability) [![codecov](https://codecov.io/gh/mayank1513/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/mayank1513/nextjs-themes) [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes)](https://www.npmjs.com/package/nextjs-themes) [![Contact me on Codementor](https://www.codementor.io/m-badges/mayank1513/get-help.svg)](https://www.codementor.io/@mayank1513?refer=badge)
 
-> This is a sister package of [react18-themes](https://github.com/react18-tools/react18-themes/). Initially we targeted only Next.js and thus this package was named `nextjs-themes`. However, we have expanded support for `Vite` and `Remix` as well. And thus published a package with more generic name, `react18-themes`.
+> We are launching version 3.0 with minor API changes and major performance improvement and fixes.
+> We have tried our best to ensure minimum changes to existing APIs.
+> For most users we recommend using [nthul](https://github.com/react18-tools/nextjs-themes-ultralight) package.
 
 > We recommend using [react18-themes](https://github.com/react18-tools/react18-themes/) for Remix. This package is maintained with specific focus on Next.js and Vite. Most of the functionality of this package along with extended support for other build tools is available in [react18-themes](https://github.com/react18-tools/react18-themes/)
 
@@ -221,9 +223,6 @@ In case your components need to know the current theme and be able to change it.
 import { useTheme } from "nextjs-themes";
 
 const ThemeChanger = () => {
-  /* you can also improve performance by using selectors
-   * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
-   */
   const { theme, setTheme } = useTheme();
 
   return (
diff --git a/examples/app-router/CHANGELOG.md b/examples/app-router/CHANGELOG.md
index fd13545c..19341c26 100644
--- a/examples/app-router/CHANGELOG.md
+++ b/examples/app-router/CHANGELOG.md
@@ -1,5 +1,14 @@
 # app-router
 
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - nextjs-themes@3.0.0
+  - shared-ui@1.0.2
+
 ## 0.0.18
 
 ### Patch Changes
diff --git a/examples/app-router/package.json b/examples/app-router/package.json
index bc016aaf..6d43cd7f 100644
--- a/examples/app-router/package.json
+++ b/examples/app-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-router",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3002",
@@ -18,8 +18,8 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.0",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
diff --git a/examples/pages-router/CHANGELOG.md b/examples/pages-router/CHANGELOG.md
index 7d6a3bd1..8d9e7dac 100644
--- a/examples/pages-router/CHANGELOG.md
+++ b/examples/pages-router/CHANGELOG.md
@@ -1,5 +1,14 @@
 # nextjs-pages-router
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - nextjs-themes@3.0.0
+  - shared-ui@1.0.2
+
 ## 1.0.13
 
 ### Patch Changes
diff --git a/examples/pages-router/package.json b/examples/pages-router/package.json
index 00306151..cf1ce40b 100644
--- a/examples/pages-router/package.json
+++ b/examples/pages-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pages-router",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3003",
@@ -16,8 +16,8 @@
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
diff --git a/examples/simple-multi-theme/CHANGELOG.md b/examples/simple-multi-theme/CHANGELOG.md
index 1efe40fc..19bb4580 100644
--- a/examples/simple-multi-theme/CHANGELOG.md
+++ b/examples/simple-multi-theme/CHANGELOG.md
@@ -1,5 +1,14 @@
 # simple-multi-theme
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - nextjs-themes@3.0.0
+  - shared-ui@1.0.2
+
 ## 1.0.13
 
 ### Patch Changes
diff --git a/examples/simple-multi-theme/app/ThemeSelector.tsx b/examples/simple-multi-theme/app/ThemeSelector.tsx
index 7a9e08e3..bd7ef91e 100644
--- a/examples/simple-multi-theme/app/ThemeSelector.tsx
+++ b/examples/simple-multi-theme/app/ThemeSelector.tsx
@@ -4,7 +4,7 @@ import { darkThemes, lightThemes } from "shared-ui";
 import styles from "shared-ui/src/root-layout.module.css";
 
 export default function ThemeSelector() {
-  const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
+  const { theme, setTheme } = useTheme();
   return (
     <p className={styles.center}>
       <select value={theme} onChange={e => setTheme(e.target.value)}>
diff --git a/examples/simple-multi-theme/package.json b/examples/simple-multi-theme/package.json
index 0c3128b5..3b05aa87 100644
--- a/examples/simple-multi-theme/package.json
+++ b/examples/simple-multi-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-multi-theme",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",
@@ -16,8 +16,8 @@
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",
diff --git a/examples/tailwind/CHANGELOG.md b/examples/tailwind/CHANGELOG.md
index 6334cf35..d9f79b42 100644
--- a/examples/tailwind/CHANGELOG.md
+++ b/examples/tailwind/CHANGELOG.md
@@ -1,5 +1,13 @@
 # tailwind
 
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - nextjs-themes@3.0.0
+
 ## 0.1.7
 
 ### Patch Changes
diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
index 0ccb117b..afd5d7d0 100644
--- a/examples/tailwind/package.json
+++ b/examples/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,11 +16,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md
index a06e7ae4..0c7a1b4c 100644
--- a/examples/vite/CHANGELOG.md
+++ b/examples/vite/CHANGELOG.md
@@ -1,5 +1,14 @@
 # vite-example
 
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - nextjs-themes@3.0.0
+  - shared-ui@1.0.2
+
 ## 0.0.18
 
 ### Patch Changes
diff --git a/examples/vite/package.json b/examples/vite/package.json
index 77a272d1..265f0de3 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-example",
   "private": true,
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3001",
@@ -18,15 +18,15 @@
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.3.3",
-    "vite": "^5.1.3"
+    "vite": "^5.1.4"
   }
 }
diff --git a/lib/nextjs-themes/CHANGELOG.md b/lib/nextjs-themes/CHANGELOG.md
index 15a784e6..82697214 100644
--- a/lib/nextjs-themes/CHANGELOG.md
+++ b/lib/nextjs-themes/CHANGELOG.md
@@ -1,5 +1,20 @@
 # nextjs-themes
 
+## 3.0.0
+
+### Major Changes
+
+- 9f30638: Replaced Zustand with r18gs. Added more functionality and perfomance improvements. Minor changes to existing APIs.
+
+  better support for tree-shaking
+  reduced package size
+  improved performance
+  Ability to create localized themes
+
+### Patch Changes
+
+- 9f30638: Create cookies only if ServerTarget is used.
+
 ## 2.1.2
 
 ### Patch Changes
diff --git a/lib/nextjs-themes/__mocks__/vitest-env.d.ts b/lib/nextjs-themes/__mocks__/vitest-env.d.ts
deleted file mode 100644
index 97ce4524..00000000
--- a/lib/nextjs-themes/__mocks__/vitest-env.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vitest/globals" />
diff --git a/lib/nextjs-themes/__mocks__/zustand.ts b/lib/nextjs-themes/__mocks__/zustand.ts
deleted file mode 100644
index 9db14ec3..00000000
--- a/lib/nextjs-themes/__mocks__/zustand.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type * as zustand from "zustand";
-import { act } from "@testing-library/react";
-import { afterEach, vi } from "vitest";
-
-const { create: actualCreate, createStore: actualCreateStore } = await vi.importActual<typeof zustand>("zustand");
-
-// a variable to hold reset functions for all stores declared in the app
-export const storeResetFns = new Set<() => void>();
-
-const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
-  const store = actualCreate(stateCreator);
-  const initialState = store.getState();
-  storeResetFns.add(() => {
-    store.setState(initialState, true);
-  });
-  return store;
-};
-
-// when creating a store, we get its initial state, create a reset function and add it in the set
-export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
-  // to support curried version of create
-  return typeof stateCreator === "function" ? createUncurried(stateCreator) : createUncurried;
-}) as typeof zustand.create;
-
-const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
-  const store = actualCreateStore(stateCreator);
-  const initialState = store.getState();
-  storeResetFns.add(() => {
-    store.setState(initialState, true);
-  });
-  return store;
-};
-
-// when creating a store, we get its initial state, create a reset function and add it in the set
-export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
-  // to support curried version of createStore
-  return typeof stateCreator === "function" ? createStoreUncurried(stateCreator) : createStoreUncurried;
-}) as typeof zustand.createStore;
-
-// reset all stores after each test run
-afterEach(() => {
-  act(() => {
-    storeResetFns.forEach(resetFn => {
-      resetFn();
-    });
-  });
-});
diff --git a/lib/nextjs-themes/lite.js b/lib/nextjs-themes/lite.js
index b6bae508..1850b551 100644
--- a/lib/nextjs-themes/lite.js
+++ b/lib/nextjs-themes/lite.js
@@ -6,7 +6,7 @@ const path = require("node:path");
 const packageJson = require(path.resolve(__dirname, "package.json"));
 
 const ref = packageJson.name;
-packageJson.peerDependencies.zustand = "^3 || ^4";
+packageJson.peerDependencies.r18gs = "^0";
 packageJson.name = `${packageJson.name}-lite`;
 
 fs.writeFileSync(path.resolve(__dirname, "package.json"), JSON.stringify(packageJson, null, 2));
@@ -18,4 +18,5 @@ const owner = process.env.OWNER;
 readMe = readMe.replace(new RegExp(`$${owner}/${ref}`, "g"), tmp);
 readMe = readMe.replace(new RegExp(ref, "g"), packageJson.name);
 readMe = readMe.replace(new RegExp(tmp, "g"), `$${owner}/${ref}`);
+readMe = readMe.replace(/## Want Lite Version(.|\n|\r)*You need r18gs as a peer-dependency/m, "");
 fs.writeFileSync(readMePath, readMe);
diff --git a/lib/nextjs-themes/package.json b/lib/nextjs-themes/package.json
index 1321d885..7e9d9365 100644
--- a/lib/nextjs-themes/package.json
+++ b/lib/nextjs-themes/package.json
@@ -2,7 +2,7 @@
   "name": "nextjs-themes",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "2.1.2",
+  "version": "3.0.0",
   "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -26,15 +26,12 @@
   "devDependencies": {
     "@testing-library/react": "^14.2.1",
     "@turbo/gen": "^1.12.4",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.3.0",
-    "esbuild-plugin-ignoretests": "^0.0.7",
+    "@vitest/coverage-v8": "^1.3.1",
     "esbuild-plugin-react18": "^0.0.7",
-    "esbuild-plugin-removetestid": "^0.0.5",
-    "esbuild-react18-useclient": "^1.0.7",
     "eslint-config-custom": "workspace:*",
     "jsdom": "^24.0.0",
     "next": "^14.1.0",
@@ -45,11 +42,10 @@
     "typedoc": "^0.25.8",
     "typescript": "5.3.3",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.3.0"
+    "vitest": "^1.3.1"
   },
   "dependencies": {
-    "persist-and-sync": "^1.2.1",
-    "zustand": "^4.5.1"
+    "r18gs": "^0.0.5"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 18",
diff --git a/lib/nextjs-themes/src/client/color-switch/color-switch.test.tsx b/lib/nextjs-themes/src/client/color-switch/color-switch.test.tsx
index 4298e3c4..ad553107 100644
--- a/lib/nextjs-themes/src/client/color-switch/color-switch.test.tsx
+++ b/lib/nextjs-themes/src/client/color-switch/color-switch.test.tsx
@@ -1,6 +1,6 @@
 import { act, cleanup, fireEvent, render, renderHook, screen } from "@testing-library/react";
 import { ColorSwitch } from "./color-switch";
-import { useTheme } from "../../store";
+import { useTheme } from "../../hooks";
 
 describe("color-switch", () => {
   afterEach(cleanup);
diff --git a/lib/nextjs-themes/src/client/color-switch/color-switch.tsx b/lib/nextjs-themes/src/client/color-switch/color-switch.tsx
index cddec46b..9471bf4b 100644
--- a/lib/nextjs-themes/src/client/color-switch/color-switch.tsx
+++ b/lib/nextjs-themes/src/client/color-switch/color-switch.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTheme } from "../../store";
+import { useTheme } from "../../hooks";
 
 export interface ColorSwitchProps {
   /** Diameter of the color switch */
@@ -23,7 +23,7 @@ export interface ColorSwitchProps {
  * ```
  */
 export function ColorSwitch({ size = 25, skipSystem }: ColorSwitchProps) {
-  const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]);
+  const { colorSchemePref, setColorSchemePref } = useTheme();
   const toggleColorScheme = () => {
     switch (colorSchemePref) {
       case "":
diff --git a/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.test.tsx b/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.test.tsx
index ef3be6b1..d6fefe65 100644
--- a/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.test.tsx
+++ b/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.test.tsx
@@ -1,6 +1,6 @@
 import { act, cleanup, render, renderHook } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
-import { useTheme } from "../../store";
+import { useTheme } from "../../hooks";
 import { ForceColorScheme } from "./force-color-scheme";
 
 describe.concurrent("force-color-scheme", () => {
diff --git a/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.tsx b/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.tsx
index fad2c778..5aa2e51e 100644
--- a/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.tsx
+++ b/lib/nextjs-themes/src/client/force-color-scheme/force-color-scheme.tsx
@@ -1,16 +1,16 @@
 "use client";
 import * as React from "react";
 import { useEffect } from "react";
-import type { ColorSchemeType } from "../../store";
-import { useTheme } from "../../store";
+import type { ColorSchemeType } from "../../constants";
+import { useTheme } from "../../hooks";
 
 export function ForceColorScheme(props: { colorScheme: ColorSchemeType }) {
-  const [setForcedColorScheme] = useTheme(state => [state.setForcedColorScheme]);
+  const { setForcedColorScheme } = useTheme();
   useEffect(() => {
     setForcedColorScheme(props.colorScheme);
     return () => {
       setForcedColorScheme(undefined);
     };
-  }, [props.colorScheme, setForcedColorScheme]);
+  }, [props.colorScheme]);
   return null;
 }
diff --git a/lib/nextjs-themes/src/client/force-theme/force-theme.test.tsx b/lib/nextjs-themes/src/client/force-theme/force-theme.test.tsx
index e9e729d2..1520a0a2 100644
--- a/lib/nextjs-themes/src/client/force-theme/force-theme.test.tsx
+++ b/lib/nextjs-themes/src/client/force-theme/force-theme.test.tsx
@@ -1,6 +1,6 @@
 import { act, cleanup, render, renderHook } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
-import { useTheme } from "../../store";
+import { useTheme } from "../../hooks";
 import { ForceTheme } from "./force-theme";
 
 describe.concurrent("force-color-scheme", () => {
diff --git a/lib/nextjs-themes/src/client/force-theme/force-theme.tsx b/lib/nextjs-themes/src/client/force-theme/force-theme.tsx
index 892b4c30..da10db80 100644
--- a/lib/nextjs-themes/src/client/force-theme/force-theme.tsx
+++ b/lib/nextjs-themes/src/client/force-theme/force-theme.tsx
@@ -1,15 +1,15 @@
 "use client";
 import * as React from "react";
 import { useEffect } from "react";
-import { useTheme } from "../../store";
+import { useTheme } from "../../hooks";
 
 export function ForceTheme(props: { theme: string }) {
-  const [setForcedTheme] = useTheme(state => [state.setForcedTheme]);
+  const { setForcedTheme } = useTheme();
   useEffect(() => {
     setForcedTheme(props.theme);
     return () => {
       setForcedTheme(undefined);
     };
-  }, [props.theme, setForcedTheme]);
+  }, [props.theme]);
   return null;
 }
diff --git a/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx b/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx
index 006f176d..88f519eb 100644
--- a/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx
+++ b/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx
@@ -1,26 +1,48 @@
-import { act, cleanup, render, renderHook } from "@testing-library/react";
-import { afterEach, describe, test } from "vitest";
-import { useTheme } from "../../store";
+import { RenderHookResult, act, cleanup, fireEvent, render, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, test } from "vitest";
+import { useTheme } from "../../hooks";
 import { ThemeSwitcher } from "./theme-switcher";
-import { getResolvedColorScheme, getResolvedTheme } from "../../utils";
+import { encodeState, getResolvedColorScheme, getResolvedTheme } from "../../utils";
+import useRGS, { SetterArgType } from "r18gs";
+import { DEFAULT_ID, ThemeStoreType, initialState } from "../../constants";
 
 /**
  * -> concurrency is not feasible because of global store conflicts
  */
 describe("theme-switcher", () => {
-  afterEach(cleanup);
+  afterEach(() => {
+    cleanup();
+  });
+
+  let rgsHook: RenderHookResult<[ThemeStoreType, (val: SetterArgType<ThemeStoreType>) => void], unknown>;
 
-  test("Test defaultDark and defaultLight themes", async ({ expect }) => {
+  beforeEach(() => {
+    render(<ThemeSwitcher />);
+    rgsHook = renderHook(() => useRGS<ThemeStoreType>(DEFAULT_ID));
+    act(() => rgsHook.result.current[1](initialState));
+  });
+
+  test("Test defaultLight theme", async ({ expect }) => {
+    const lightTheme = "light1";
+    /** simulate changing lightTheme by another component in useEffect */
     const { result } = renderHook(() => useTheme());
-    act(() => result.current.setDarkTheme("dark1"));
-    act(() => result.current.setLightTheme("light1"));
-    window.media = "dark";
-    await act(() => render(<ThemeSwitcher />));
-    expect(getResolvedTheme()).toBe("dark1");
-    window.media = "light";
-    await act(() => render(<ThemeSwitcher />));
-    expect(getResolvedTheme()).toBe("light1");
-    expect(getResolvedColorScheme()).toBe("light");
+    act(() => result.current.setLightTheme(lightTheme));
+    /** await for the first time delay for setting state */
+    await new Promise(res => setTimeout(res, 350));
+    expect(getResolvedTheme()).toBe(lightTheme);
+  });
+
+  test("Test defaultDark theme", async ({ expect }) => {
+    const darkTheme = "dark1";
+    /** simulate system dark mode */
+    act(() => rgsHook.result.current[1](state => ({ ...state, systemColorScheme: "dark" })));
+    /** simulate changing darkTheme by another component by user */
+    await new Promise(res => setTimeout(res, 350));
+    const { result } = renderHook(() => useTheme());
+    act(() => result.current.setDarkTheme(darkTheme));
+    /** await for the first time delay for setting state */
+    await new Promise(res => setTimeout(res, 250));
+    expect(getResolvedTheme()).toBe(darkTheme);
   });
 
   // colorScheme has higher preference
@@ -28,7 +50,7 @@ describe("theme-switcher", () => {
     const { result } = renderHook(() => useTheme());
     act(() => result.current.setColorSchemePref(""));
     act(() => result.current.setTheme("blue"));
-    await act(() => render(<ThemeSwitcher />));
+    await new Promise(res => setTimeout(res, 250));
     expect(getResolvedTheme()).toBe("blue");
   });
 
@@ -36,12 +58,12 @@ describe("theme-switcher", () => {
     const { result } = renderHook(() => useTheme());
     act(() => result.current.setColorSchemePref("light"));
     act(() => result.current.setLightTheme("yellow"));
+    act(() => result.current.setDarkTheme("dark-blue"));
     act(() => result.current.setTheme("blue"));
-    await act(() => render(<ThemeSwitcher />));
+    await new Promise(res => setTimeout(res, 250));
     expect(getResolvedTheme()).toBe("yellow");
-    act(() => result.current.setDarkTheme("dark-blue"));
     act(() => result.current.setColorSchemePref("dark"));
-    await act(() => render(<ThemeSwitcher />));
+    /** note we do not require to await second time -- ?? what is user is setting theme from multuple useEffects? */
     expect(getResolvedTheme()).toBe("dark-blue");
   });
 
@@ -51,7 +73,7 @@ describe("theme-switcher", () => {
     act(() => result.current.setForcedColorScheme("dark"));
     act(() => result.current.setColorSchemePref("light"));
     act(() => result.current.setTheme("f1"));
-    await act(() => render(<ThemeSwitcher />));
+    await new Promise(res => setTimeout(res, 250));
     expect(getResolvedTheme()).toBe("forced1");
   });
 
@@ -63,10 +85,36 @@ describe("theme-switcher", () => {
     act(() => result.current.setTheme("f1"));
     act(() => result.current.setLightTheme("yellow"));
     act(() => result.current.setDarkTheme("black"));
-    await act(() => render(<ThemeSwitcher />));
+    await new Promise(res => setTimeout(res, 250));
     expect(getResolvedTheme()).toBe("");
     act(() => result.current.setForcedTheme(undefined));
     expect(getResolvedTheme()).toBe("black");
+    expect(getResolvedColorScheme()).toBe("dark");
+  });
+
+  test("Storage event", async ({ expect }) => {
+    const hook = renderHook(() => useTheme());
+    const MY_THEME = "my-theme-update";
+    await act(() =>
+      fireEvent(
+        window,
+        new StorageEvent("storage", { key: DEFAULT_ID, newValue: encodeState({ ...initialState, theme: MY_THEME }) }),
+      ),
+    );
+    expect(hook.result.current.theme).toBe(MY_THEME);
+  });
+});
+
+describe("theme-switcher with props", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  let rgsHook: RenderHookResult<[ThemeStoreType, (val: SetterArgType<ThemeStoreType>) => void], unknown>;
+
+  beforeEach(() => {
+    rgsHook = renderHook(() => useRGS<ThemeStoreType>(DEFAULT_ID));
+    act(() => rgsHook.result.current[1](initialState));
   });
 
   test("forced theme prop", async ({ expect }) => {
diff --git a/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx b/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx
index c65c527b..0245fe7f 100644
--- a/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx
+++ b/lib/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx
@@ -1,20 +1,49 @@
 import * as React from "react";
 import { useEffect } from "react";
-import type { ColorSchemeType } from "../../store";
-import { useTheme } from "../../store";
-import { resolveTheme } from "../../utils";
-import { StorageType } from "persist-and-sync";
+import { resolveTheme, parseState, encodeState } from "../../utils";
+import { ColorSchemeType, DEFAULT_ID, ThemeStoreType, initialState } from "../../constants";
+import useRGS, { SetStateAction } from "r18gs";
 
+/** todo - set persistance and cookies */
 export interface ThemeSwitcherProps {
   forcedTheme?: string;
   forcedColorScheme?: ColorSchemeType;
   targetSelector?: string;
   themeTransition?: string;
-  /**
-   * defaultValue `"cookies"`
-   * set storage to `localStorage` or `sessionsStorage` when using only client side or when you must avoid using cookies
-   */
-  storage?: StorageType;
+}
+
+function useMediaQuery(setThemeState: SetStateAction<ThemeStoreType>) {
+  React.useEffect(() => {
+    // set event listener for media
+    const media = matchMedia("(prefers-color-scheme: dark)");
+    const updateSystemColorScheme = () => {
+      setThemeState(state => ({ ...state, systemColorScheme: media.matches ? "dark" : "light" }));
+    };
+    updateSystemColorScheme();
+    media.addEventListener("change", updateSystemColorScheme);
+    return () => {
+      media.removeEventListener("change", updateSystemColorScheme);
+    };
+  }, [setThemeState]);
+}
+
+let tInit = 0;
+function useLoadSyncedState(setThemeState: SetStateAction<ThemeStoreType>, targetSelector?: string) {
+  React.useEffect(() => {
+    tInit = Date.now();
+    const key = targetSelector ?? DEFAULT_ID;
+    const storedState = parseState(localStorage.getItem(key));
+    // @ts-expect-error -- using only as a partial
+    delete storedState.systemColorScheme;
+    setThemeState(state => ({ ...state, ...storedState }));
+    const storageListener = (e: StorageEvent) => {
+      if (e.key === key) setThemeState(state => ({ ...state, ...parseState(e.newValue) }));
+    };
+    window.addEventListener("storage", storageListener);
+    return () => {
+      window.removeEventListener("storage", storageListener);
+    };
+  }, [targetSelector]);
 }
 
 export interface DataProps {
@@ -34,10 +63,11 @@ export interface UpdateProps {
 
 const updateDOM = (
   { resolvedTheme, resolvedColorScheme, resolvedColorSchemePref, th }: UpdateProps,
-  isSystemDark: boolean,
   targetSelector?: string,
 ) => {
-  [document.querySelector(targetSelector || "#nextjs-themes"), document.documentElement].forEach(target => {
+  const target = document.querySelector(targetSelector || `#${DEFAULT_ID}`);
+  /** don't apply theme to documentElement for localized targets */
+  [target, targetSelector && target ? null : document.documentElement].forEach(target => {
     /** ensuring that class 'dark' is always present when dark color scheme is applied to support Tailwind  */
     if (target)
       target.className = `${resolvedColorScheme} theme-${resolvedTheme} th-${th} csp-${resolvedColorSchemePref}`;
@@ -46,14 +76,14 @@ const updateDOM = (
     target?.setAttribute("data-color-scheme", resolvedColorScheme);
     target?.setAttribute("data-csp", resolvedColorSchemePref); /** color-scheme-preference */
   });
-
-  /** store system preference for computing data-theme on server side */
-  document.cookie = `data-color-scheme-system=${isSystemDark ? "dark" : "light"}`;
+  const shouldCreateCookie = target?.getAttribute("data-nth") === "next";
+  return shouldCreateCookie;
 };
 
 const disableAnimation = (themeTransition = "none") => {
   const css = document.createElement("style");
-  const transition = `transition: ${themeTransition} !important;`;
+  /** split by ';' to prevent CSS injection */
+  const transition = `transition: ${themeTransition.split(";")[0]} !important;`;
   css.appendChild(
     document.createTextNode(`*{-webkit-${transition}-moz-${transition}-o-${transition}-ms-${transition}${transition}}`),
   );
@@ -74,39 +104,23 @@ const disableAnimation = (themeTransition = "none") => {
  * Please note that you need to add "use client" on top of the component in which you are using this hook.
  */
 export function useThemeSwitcher(props: ThemeSwitcherProps) {
-  const [setStorage, ...depArray] = useTheme(state => [
-    state.setStorage,
-    state.theme,
-    state.darkTheme,
-    state.lightTheme,
-    state.colorSchemePref,
-    state.forcedColorScheme,
-    state.forcedTheme,
-  ]);
+  const [themeState, setThemeState] = useRGS<ThemeStoreType>(props.targetSelector ?? DEFAULT_ID, initialState);
 
+  useMediaQuery(setThemeState);
+  useLoadSyncedState(setThemeState, props.targetSelector);
   useEffect(() => {
-    setStorage(props.storage ?? "cookies");
-  }, [props.storage]);
-
-  useEffect(() => {
-    const themeState = useTheme.getState();
-    const media = matchMedia("(prefers-color-scheme: dark)");
-    const updateTheme = () => {
-      const restoreTransitions = disableAnimation(props.themeTransition);
+    const restoreTransitions = disableAnimation(props.themeTransition);
 
-      const resolvedData = resolveTheme(media.matches, themeState, props);
-      themeState.setResolved(resolvedData);
-      updateDOM(resolvedData, media.matches, props.targetSelector);
-
-      restoreTransitions();
-    };
-
-    media.addEventListener("change", updateTheme);
-    updateTheme();
-    return () => {
-      media.removeEventListener("change", updateTheme);
-    };
-  }, [props.forcedColorScheme, props.forcedTheme, props.targetSelector, ...depArray]);
+    const resolvedData = resolveTheme(themeState, props);
+    const shouldCreateCookie = updateDOM(resolvedData, props.targetSelector);
+    if (tInit < Date.now() - 300) {
+      const stateStr = encodeState(themeState);
+      const key = props.targetSelector || DEFAULT_ID;
+      localStorage.setItem(key, stateStr);
+      if (shouldCreateCookie) document.cookie = `${key}=${stateStr}; max-age=31536000; SameSite=Strict;`;
+    }
+    restoreTransitions();
+  }, [props, themeState]);
 }
 
 /**
diff --git a/lib/nextjs-themes/src/constants.ts b/lib/nextjs-themes/src/constants.ts
new file mode 100644
index 00000000..136769c2
--- /dev/null
+++ b/lib/nextjs-themes/src/constants.ts
@@ -0,0 +1,32 @@
+/** shared constants -- keep in separate files for better tree-shaking and dependency injection */
+export const DEFAULT_ID = "nth";
+
+export type ColorSchemeType = "" | "system" | "dark" | "light";
+
+export interface ThemeStoreType {
+  theme: string;
+  darkTheme: string;
+  lightTheme: string;
+  colorSchemePref: ColorSchemeType;
+  systemColorScheme: "dark" | "light";
+  forcedTheme?: string;
+  forcedColorScheme?: ColorSchemeType;
+}
+
+export type ThemeStoreActionsType = {
+  setTheme: (theme: string) => void;
+  setDarkTheme: (darkTheme: string) => void;
+  setLightTheme: (lightTheme: string) => void;
+  setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void;
+  setColorSchemePref: (colorSchemePref: ColorSchemeType) => void;
+  setForcedTheme: (forcedTheme?: string) => void;
+  setForcedColorScheme: (forcedColorScheme?: ColorSchemeType) => void;
+};
+
+export const initialState: ThemeStoreType = {
+  theme: "",
+  darkTheme: "dark",
+  lightTheme: "",
+  colorSchemePref: "system",
+  systemColorScheme: "light",
+};
diff --git a/lib/nextjs-themes/src/hooks/index.ts b/lib/nextjs-themes/src/hooks/index.ts
new file mode 100644
index 00000000..767b68bf
--- /dev/null
+++ b/lib/nextjs-themes/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./use-theme";
diff --git a/lib/nextjs-themes/src/hooks/use-theme.ts b/lib/nextjs-themes/src/hooks/use-theme.ts
new file mode 100644
index 00000000..7ef90467
--- /dev/null
+++ b/lib/nextjs-themes/src/hooks/use-theme.ts
@@ -0,0 +1,40 @@
+import useRGS, { SetStateAction } from "r18gs";
+import { ColorSchemeType, DEFAULT_ID, ThemeStoreType, initialState } from "../constants";
+import { resolveTheme } from "../utils";
+import { useCallback, useMemo } from "react";
+
+const DELAY = 200; // ms - delay to allow reading from localStorage so that local storage does not override the new state
+const map: Record<string, Function | number> = {};
+function createSetterWithFirstTimeDelay(setThemeState: SetStateAction<ThemeStoreType>) {
+  return <T>(key: string) => {
+    if (map[key] === undefined) {
+      map[key] = 1;
+      return (arg: T) => setTimeout(() => setThemeState(state => ({ ...state, [key]: arg })), DELAY);
+    } else if (map[key] === 1) {
+      const fn = (arg: T) => setThemeState(state => ({ ...state, [key]: arg }));
+      map[key] = fn;
+    }
+    return map[key] as (arg: T) => void;
+  };
+}
+
+export function useTheme(targetId?: string) {
+  const [themeState, setThemeState] = useRGS<ThemeStoreType>(targetId ?? DEFAULT_ID, initialState);
+  const { resolvedColorScheme, resolvedTheme } = resolveTheme(themeState);
+  const setterWithFirstTimeDelay = useMemo(() => createSetterWithFirstTimeDelay(setThemeState), []);
+  return {
+    ...themeState,
+    resolvedColorScheme,
+    resolvedTheme,
+    setTheme: setterWithFirstTimeDelay<string>("theme"),
+    setDarkTheme: setterWithFirstTimeDelay<string>("darkTheme"),
+    setLightTheme: setterWithFirstTimeDelay<string>("lightTheme"),
+    setThemeSet: useCallback(
+      (themeSet: { darkTheme: string; lightTheme: string }) => setThemeState(state => ({ ...state, ...themeSet })),
+      [],
+    ),
+    setColorSchemePref: setterWithFirstTimeDelay<ColorSchemeType>("colorSchemePref"),
+    setForcedTheme: setterWithFirstTimeDelay<string | undefined>("forcedTheme"),
+    setForcedColorScheme: setterWithFirstTimeDelay<ColorSchemeType | undefined>("forcedColorScheme"),
+  };
+}
diff --git a/lib/nextjs-themes/src/index.ts b/lib/nextjs-themes/src/index.ts
index 10a110c9..86094999 100644
--- a/lib/nextjs-themes/src/index.ts
+++ b/lib/nextjs-themes/src/index.ts
@@ -1,4 +1,5 @@
 "use client";
 // client component exports
 export * from "./client";
-export * from "./store";
+export * from "./hooks";
+export * from "./constants";
diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx
index 79a0a21a..af518be3 100644
--- a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx
+++ b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx
@@ -1,21 +1,23 @@
 import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, test } from "vitest";
+import { afterEach, describe, test, beforeEach } from "vitest";
 import { NextJsSSGThemeSwitcher, ServerSideWrapper } from ".";
+import { DEFAULT_ID } from "../../../constants";
+import { encodeState } from "../../../utils";
 
 describe("server-side-target", () => {
   afterEach(cleanup);
 
   beforeEach(() => {
     globalThis.cookies = {
-      "nextjs-themes": {
-        value: JSON.stringify({
+      [DEFAULT_ID]: {
+        value: encodeState({
           theme: "yellow",
           darkTheme: "dark-blue",
           lightTheme: "light-yellow",
           colorSchemePref: "dark",
+          systemColorScheme: "dark"
         }),
       },
-      "data-color-scheme-system": { value: "dark" },
     };
     globalThis.path = "";
   });
@@ -61,6 +63,7 @@ describe("server-side-target", () => {
     );
     expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("light-yellow");
   });
+
   test("forced color scheme system", ({ expect }) => {
     globalThis.path = "/forced-color-scheme/system";
     render(
@@ -70,6 +73,7 @@ describe("server-side-target", () => {
     );
     expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("dark-blue");
   });
+
   test("force disable color scheme", ({ expect }) => {
     globalThis.path = "/forced-color-scheme";
     render(
diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
index 0063ac66..2866c6e9 100644
--- a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
+++ b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import { cookies, headers } from "next/headers";
-import type { ColorSchemeType, ThemeStoreType } from "../../../store";
-import { resolveTheme } from "../../../utils";
+import { DEFAULT_ID, type ColorSchemeType, type ThemeStoreType } from "../../../constants";
+import { parseState, resolveTheme } from "../../../utils";
 import { DataProps, UpdateProps } from "../../../client";
 
 export type ForcedPage =
@@ -14,30 +14,32 @@ export interface NextJsSSRThemeSwitcherProps extends HTMLProps<HTMLElement> {
   /** @defaultValue 'div' */
   tag?: keyof JSX.IntrinsicElements;
   forcedPages?: ForcedPage[];
+  /** id of target element to apply classes to. This is useful when you want to apply theme only to specific container. */
+  targetId?: string;
 }
 
 function sharedServerComponentRenderer(
-  { children, tag, forcedPages, ...props }: NextJsSSRThemeSwitcherProps,
+  { children, tag, forcedPages, targetId, ...props }: NextJsSSRThemeSwitcherProps,
   defaultTag: "div" | "html",
 ) {
   const Tag: keyof JSX.IntrinsicElements = tag || defaultTag;
-  const state = cookies().get("nextjs-themes")?.value;
+  const state = cookies().get(DEFAULT_ID)?.value;
 
   const path = headers().get("referer");
-  const forcedPage = forcedPages?.find(
-    forcedPage => path?.match(Array.isArray(forcedPage) ? forcedPage[0] : forcedPage.pathMatcher),
+  const forcedPage = forcedPages?.find(forcedPage =>
+    path?.match(Array.isArray(forcedPage) ? forcedPage[0] : forcedPage.pathMatcher),
   );
   const forcedPageProps = Array.isArray(forcedPage)
     ? { forcedTheme: forcedPage[1].theme, forcedColorScheme: forcedPage[1].colorScheme }
     : forcedPage?.props;
-  const themeState = state ? (JSON.parse(state) as ThemeStoreType) : undefined;
-  const isSystemDark = cookies().get("data-color-scheme-system")?.value === "dark";
-  const resolvedData = resolveTheme(isSystemDark, themeState, forcedPageProps);
+  const themeState = state ? (parseState(state) as ThemeStoreType) : undefined;
+  const resolvedData = resolveTheme(themeState, forcedPageProps);
   const dataProps = getDataProps(resolvedData);
+  if(targetId) dataProps.className += " nth-scoped";
 
   return (
     // @ts-expect-error -> svg props and html element props conflict
-    <Tag id="nextjs-themes" {...dataProps} {...props} data-testid="server-side-target">
+    <Tag id={targetId || DEFAULT_ID} {...dataProps} {...props} data-nth="next" data-testid="server-side-target">
       {children}
     </Tag>
   );
diff --git a/lib/nextjs-themes/src/store.ts b/lib/nextjs-themes/src/store.ts
deleted file mode 100644
index 0390eecd..00000000
--- a/lib/nextjs-themes/src/store.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { create } from "zustand";
-import { PersistNSyncOptionsType, StorageType, persistNSync } from "persist-and-sync";
-
-export type ColorSchemeType = "" | "system" | "dark" | "light";
-
-export type ThemeStoreType = {
-  theme: string;
-  darkTheme: string;
-  lightTheme: string;
-  colorSchemePref: ColorSchemeType;
-  resolvedTheme: string;
-  resolvedColorScheme: ColorSchemeType;
-  forcedTheme?: string;
-  forcedColorScheme?: ColorSchemeType;
-  __persistNSyncOptions: PersistNSyncOptionsType;
-};
-
-export type ThemeStoreActionsType = {
-  setTheme: (theme: string) => void;
-  setDarkTheme: (darkTheme: string) => void;
-  setLightTheme: (lightTheme: string) => void;
-  setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void;
-  setColorSchemePref: (colorSchemePref: ColorSchemeType) => void;
-  setForcedTheme: (forcedTheme?: string) => void;
-  setForcedColorScheme: (forcedColorScheme?: ColorSchemeType) => void;
-  setResolved: (resolved: { resolvedTheme: string; resolvedColorScheme: ColorSchemeType }) => void;
-  setStorage: (storage: StorageType) => void;
-};
-
-const storeOptions: PersistNSyncOptionsType = {
-  name: "nextjs-themes",
-  exclude: [/forced/, /resolved/, /^__/],
-  storage: "cookies",
-};
-
-export const initialState: ThemeStoreType = {
-  theme: "",
-  resolvedTheme: "",
-  darkTheme: "dark",
-  lightTheme: "",
-  colorSchemePref: "system",
-  resolvedColorScheme: "system",
-  __persistNSyncOptions: storeOptions,
-};
-
-export const useTheme = create<ThemeStoreType & ThemeStoreActionsType>()(
-  persistNSync(
-    (set, get) => ({
-      ...initialState,
-      setTheme: theme => set({ ...get(), theme }),
-      setDarkTheme: darkTheme => set({ ...get(), darkTheme }),
-      setLightTheme: lightTheme => set({ ...get(), lightTheme }),
-      setForcedTheme: forcedTheme => set({ ...get(), forcedTheme }),
-      setForcedColorScheme: forcedColorScheme => set({ ...get(), forcedColorScheme }),
-      setColorSchemePref: colorSchemePref => set({ ...get(), colorSchemePref }),
-      setResolved: ({ resolvedColorScheme, resolvedTheme }) => set({ ...get(), resolvedColorScheme, resolvedTheme }),
-      setThemeSet: ({ lightTheme, darkTheme }) => set({ ...get(), lightTheme, darkTheme }),
-      setStorage: storage => set({ ...get(), __persistNSyncOptions: { ...storeOptions, storage } }),
-    }),
-    storeOptions,
-  ),
-);
diff --git a/lib/nextjs-themes/src/styles.css b/lib/nextjs-themes/src/styles.css
index d3c06f95..f1f150d6 100644
--- a/lib/nextjs-themes/src/styles.css
+++ b/lib/nextjs-themes/src/styles.css
@@ -34,6 +34,7 @@
   box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;
   border: none;
   background: transparent;
+  animation: swing linear 0.5s;
 }
 
 [data-csp="light"] .nextjs-themes--color-switch,
@@ -43,3 +44,18 @@
   background-color: yellow;
   border: 1px solid orangered;
 }
+
+@keyframes swing {
+  40% {
+    transform: rotate(-15deg);
+  }
+
+  80% {
+    transform: rotate(10deg);
+  }
+
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+}
diff --git a/lib/nextjs-themes/src/utils.ts b/lib/nextjs-themes/src/utils.ts
index 8800be6f..0078b198 100644
--- a/lib/nextjs-themes/src/utils.ts
+++ b/lib/nextjs-themes/src/utils.ts
@@ -1,13 +1,15 @@
 import { ThemeSwitcherProps, UpdateProps } from "./client";
-import type { ThemeStoreType } from "./store";
+import { ColorSchemeType, ThemeStoreType, initialState } from "./constants";
 
-export function resolveTheme(isSystemDark: boolean, state?: ThemeStoreType, props?: ThemeSwitcherProps): UpdateProps {
+export function resolveTheme(state?: ThemeStoreType, props?: ThemeSwitcherProps): UpdateProps {
   const resolvedForcedTheme = props?.forcedTheme === undefined ? state?.forcedTheme : props.forcedTheme;
   const resolvedForcedColorScheme =
     props?.forcedColorScheme === undefined ? state?.forcedColorScheme : props.forcedColorScheme;
   const resolvedColorSchemePref =
     (resolvedForcedColorScheme === undefined ? state?.colorSchemePref : resolvedForcedColorScheme) || "";
 
+  const isSystemDark = state?.systemColorScheme === "dark";
+
   let resolvedColorScheme: "dark" | "light" = isSystemDark ? "dark" : "light";
   let resolvedTheme = resolvedForcedTheme === undefined ? state?.theme || "" : resolvedForcedTheme;
 
@@ -35,3 +37,15 @@ export function getResolvedTheme() {
 export function getResolvedColorScheme() {
   return document.documentElement.getAttribute("data-color-scheme");
 }
+
+export function encodeState(themeState: ThemeStoreType) {
+  const { colorSchemePref, systemColorScheme, darkTheme, lightTheme, theme } = themeState;
+  return [colorSchemePref, systemColorScheme, darkTheme, lightTheme, theme].join(",");
+}
+
+export function parseState(str?: string | null): ThemeStoreType {
+  if(!str) return initialState;
+  type StrSplitType = [ColorSchemeType, "dark" | "light", string, string, string];
+  const [colorSchemePref, systemColorScheme, darkTheme, lightTheme, theme] = str.split(",") as StrSplitType;
+  return { colorSchemePref, systemColorScheme, darkTheme, lightTheme, theme };
+}
diff --git a/lib/nextjs-themes/turbo/generators/config.ts b/lib/nextjs-themes/turbo/generators/config.ts
index 997d0661..f883cfc9 100644
--- a/lib/nextjs-themes/turbo/generators/config.ts
+++ b/lib/nextjs-themes/turbo/generators/config.ts
@@ -4,104 +4,104 @@ import type { PlopTypes } from "@turbo/gen";
 
 // eslint-disable-next-line import/no-default-export -- export default is required for config files
 export default function generator(plop: PlopTypes.NodePlopAPI): void {
-	// A simple generator to add a new React component to the internal UI library
-	plop.setGenerator("react-component", {
-		description: "Adds a new react component",
-		prompts: [
-			{
-				type: "input",
-				name: "name",
-				message: "What is the name of the component?",
-			},
-			{
-				type: "confirm",
-				name: "isClient",
-				message: 'Is this a client component? (Should we add "use client" directive?)',
-			},
-			{
-				type: "input",
-				name: "description",
-				message: "Describe your component. (This will be added as js-doc comment.)",
-			},
-		],
-		actions: data => (data ? getActions(data as InquirerDataType) : []),
-	});
+  // A simple generator to add a new React component to the internal UI library
+  plop.setGenerator("react-component", {
+    description: "Adds a new react component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is the name of the component?",
+      },
+      {
+        type: "confirm",
+        name: "isClient",
+        message: 'Is this a client component? (Should we add "use client" directive?)',
+      },
+      {
+        type: "input",
+        name: "description",
+        message: "Describe your component. (This will be added as js-doc comment.)",
+      },
+    ],
+    actions: data => (data ? getActions(data as InquirerDataType) : []),
+  });
 }
 
 interface InquirerDataType {
-	isClient: boolean;
-	name: string;
+  isClient: boolean;
+  name: string;
 }
 
 function getActions(data: InquirerDataType) {
-	const { nestedRouteActions, root } = getNestedRouteActions(data);
-	return nestedRouteActions.concat([
-		{
-			type: "add",
-			path: `${root}{{kebabCase name}}/index.ts`,
-			template: `${data.isClient ? '"use client";\n\n' : ""}export * from "./{{kebabCase name}}";\n`,
-		},
-		{
-			type: "add",
-			path: `${root}{{kebabCase name}}/{{kebabCase name}}.tsx`,
-			templateFile: "templates/component.hbs",
-		},
-		{
-			type: "add",
-			path: `${root}{{kebabCase name}}/{{kebabCase name}}.test.tsx`,
-			templateFile: "templates/component.test.hbs",
-		},
-		{
-			type: "append",
-			path: `${root}index.ts`,
-			pattern: /(?<insertion> component exports)/g,
-			template: 'export * from "./{{kebabCase name}}";',
-		},
-	]);
+  const { nestedRouteActions, root } = getNestedRouteActions(data);
+  return nestedRouteActions.concat([
+    {
+      type: "add",
+      path: `${root}{{kebabCase name}}/index.ts`,
+      template: `${data.isClient ? '"use client";\n\n' : ""}export * from "./{{kebabCase name}}";\n`,
+    },
+    {
+      type: "add",
+      path: `${root}{{kebabCase name}}/{{kebabCase name}}.tsx`,
+      templateFile: "templates/component.hbs",
+    },
+    {
+      type: "add",
+      path: `${root}{{kebabCase name}}/{{kebabCase name}}.test.tsx`,
+      templateFile: "templates/component.test.hbs",
+    },
+    {
+      type: "append",
+      path: `${root}index.ts`,
+      pattern: /(?<insertion> component exports)/g,
+      template: 'export * from "./{{kebabCase name}}";',
+    },
+  ]);
 }
 
 function getNestedRouteActions(data: InquirerDataType) {
-	const { isClient, name } = data;
-	const root = isClient ? "src/client/" : "src/server/";
-	const nestedRouteActions: PlopTypes.ActionType[] = [];
+  const { isClient, name } = data;
+  const root = isClient ? "src/client/" : "src/server/";
+  const nestedRouteActions: PlopTypes.ActionType[] = [];
 
-	/** Return early if no nested routes */
-	if (!name.includes("/")) return { nestedRouteActions, root };
+  /** Return early if no nested routes */
+  if (!name.includes("/")) return { nestedRouteActions, root };
 
-	const lastSlashInd = name.lastIndexOf("/") || name.lastIndexOf("\\");
-	/** following is required to make sure appropreate name is used while creating components */
-	data.name = name.slice(lastSlashInd + 1);
+  const lastSlashInd = name.lastIndexOf("/") || name.lastIndexOf("\\");
+  /** following is required to make sure appropreate name is used while creating components */
+  data.name = name.slice(lastSlashInd + 1);
 
-	const directories = name.slice(0, lastSlashInd).split(/\/|\\/);
-	const rootSegments = [...root.split(/\/|\\/)];
+  const directories = name.slice(0, lastSlashInd).split(/\/|\\/);
+  const rootSegments = [...root.split(/\/|\\/)];
 
-	for (let i = 1; i <= directories.length; i++)
-		updateIndexFilesIfNeeded(nestedRouteActions, rootSegments, directories.slice(0, i), isClient);
+  for (let i = 1; i <= directories.length; i++)
+    updateIndexFilesIfNeeded(nestedRouteActions, rootSegments, directories.slice(0, i), isClient);
 
-	return { nestedRouteActions, root: `${root + directories.join("/")}/` };
+  return { nestedRouteActions, root: `${root + directories.join("/")}/` };
 }
 
 function updateIndexFilesIfNeeded(
-	nestedRouteActions: PlopTypes.ActionType[],
-	rootSegments: string[],
-	currentDirSegments: string[],
-	isClient: boolean,
+  nestedRouteActions: PlopTypes.ActionType[],
+  rootSegments: string[],
+  currentDirSegments: string[],
+  isClient: boolean,
 ) {
-	const indexFilePath = path.resolve(process.cwd(), "..", "..", ...rootSegments, ...currentDirSegments, "index.ts");
-	const root = rootSegments.join("/");
-	if (!fs.existsSync(indexFilePath)) {
-		const content = `${isClient ? '"use client";\n' : ""}// ${currentDirSegments.join("/")} component exports\n`;
-		nestedRouteActions.push({
-			type: "add",
-			path: `${root + currentDirSegments.join("/")}/index.ts`,
-			template: content,
-		});
-		const length = currentDirSegments.length;
-		nestedRouteActions.push({
-			type: "append",
-			pattern: /(?<insertion> component exports)/g,
-			path: `${root + (length === 1 ? "" : `${currentDirSegments.slice(0, length - 1).join("/")}/`)}index.ts`,
-			template: `export * from "./${currentDirSegments[length - 1]}"`,
-		});
-	}
+  const indexFilePath = path.resolve(process.cwd(), "..", "..", ...rootSegments, ...currentDirSegments, "index.ts");
+  const root = rootSegments.join("/");
+  if (!fs.existsSync(indexFilePath)) {
+    const content = `${isClient ? '"use client";\n' : ""}// ${currentDirSegments.join("/")} component exports\n`;
+    nestedRouteActions.push({
+      type: "add",
+      path: `${root + currentDirSegments.join("/")}/index.ts`,
+      template: content,
+    });
+    const length = currentDirSegments.length;
+    nestedRouteActions.push({
+      type: "append",
+      pattern: /(?<insertion> component exports)/g,
+      path: `${root + (length === 1 ? "" : `${currentDirSegments.slice(0, length - 1).join("/")}/`)}index.ts`,
+      template: `export * from "./${currentDirSegments[length - 1]}"`,
+    });
+  }
 }
diff --git a/lib/nextjs-themes/vitest.setup.ts b/lib/nextjs-themes/vitest.setup.ts
index 66e8293e..6480d5d5 100644
--- a/lib/nextjs-themes/vitest.setup.ts
+++ b/lib/nextjs-themes/vitest.setup.ts
@@ -1,4 +1,7 @@
-import { vi } from "vitest";
+import useRGS from "r18gs";
+import { vi, beforeEach } from "vitest";
+import { DEFAULT_ID, initialState } from "./src/constants";
+import { act, renderHook } from "@testing-library/react";
 
 // mock matchMedia
 Object.defineProperty(window, "matchMedia", {
@@ -32,5 +35,3 @@ vi.mock("next/headers", () => ({
   cookies: () => ({ get: (cookieName: string) => globalThis.cookies[cookieName] }),
   headers: () => ({ get: (h: string) => globalThis.path }),
 }));
-
-vi.mock("zustand");
diff --git a/packages/shared-ui/package.json b/packages/shared-ui/package.json
index 7cc1f9d8..74235d7b 100644
--- a/packages/shared-ui/package.json
+++ b/packages/shared-ui/package.json
@@ -11,8 +11,8 @@
   },
   "devDependencies": {
     "@mayank1513/fork-me": "^2.0.1",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "next": "^14.1.0",
@@ -22,6 +22,6 @@
     "typescript": "5.3.3"
   },
   "dependencies": {
-    "eslint": "^8.56.0"
+    "eslint": "^8.57.0"
   }
 }
diff --git a/packages/shared-ui/src/root/description.tsx b/packages/shared-ui/src/root/description.tsx
index 6f4c4767..2bacac94 100644
--- a/packages/shared-ui/src/root/description.tsx
+++ b/packages/shared-ui/src/root/description.tsx
@@ -1,4 +1,3 @@
-import type { HTMLProps } from "react";
 import { Logo } from "../common/logo";
 import styles from "../root-layout.module.css";
 
@@ -9,8 +8,7 @@ export function Description() {
         className={styles.logo}
         href="https://github.com/react18-tools/nextjs-themes"
         rel="noopener noreferrer"
-        target="_blank"
-      >
+        target="_blank">
         <p>
           <Logo className={styles.code} />
         </p>
diff --git a/packages/shared-ui/src/theme-controller/color-scheme-preference.tsx b/packages/shared-ui/src/theme-controller/color-scheme-preference.tsx
index be89a1d0..dbd90515 100644
--- a/packages/shared-ui/src/theme-controller/color-scheme-preference.tsx
+++ b/packages/shared-ui/src/theme-controller/color-scheme-preference.tsx
@@ -8,7 +8,7 @@ import styles from "../root-layout.module.css";
 const colorSchemes: ColorSchemeType[] = ["", "system", "light", "dark"];
 
 export function ColorSchemePreference() {
-  const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]);
+  const { colorSchemePref, setColorSchemePref } = useTheme();
   const handleChange: (e: ChangeEvent<HTMLSelectElement>) => void = e =>
     setColorSchemePref(e.target.value as ColorSchemeType);
 
diff --git a/packages/shared-ui/src/theme-controller/theme-selector.tsx b/packages/shared-ui/src/theme-controller/theme-selector.tsx
index 8e1c74e2..5f6897fc 100644
--- a/packages/shared-ui/src/theme-controller/theme-selector.tsx
+++ b/packages/shared-ui/src/theme-controller/theme-selector.tsx
@@ -45,15 +45,13 @@ function getClassName(scope: ThemeSelectorProps["scope"], colorSchemePref: Color
 }
 
 function useThemeStates(scope: ThemeSelectorProps["scope"]) {
-  const [colorSchemePref, theme, setTheme] = useTheme(state => {
-    switch (scope) {
-      case "":
-        return [state.colorSchemePref, state.theme, state.setTheme];
-      case "dark":
-        return [state.colorSchemePref, state.darkTheme, state.setDarkTheme];
-      case "light":
-        return [state.colorSchemePref, state.lightTheme, state.setLightTheme];
-    }
-  });
-  return { colorSchemePref, theme, setTheme };
+  const { colorSchemePref, theme, darkTheme, lightTheme, setTheme, setDarkTheme, setLightTheme } = useTheme();
+  switch (scope) {
+    case "":
+      return { colorSchemePref, theme, setTheme };
+    case "dark":
+      return { colorSchemePref, theme: darkTheme, setTheme: setDarkTheme };
+    case "light":
+      return { colorSchemePref, theme: lightTheme, setTheme: setLightTheme };
+  }
 }
diff --git a/turbo.json b/turbo.json
index 6dbcaeed..df95eaab 100644
--- a/turbo.json
+++ b/turbo.json
@@ -3,7 +3,6 @@
   "globalDependencies": ["**/.env.*local"],
   "pipeline": {
     "build": {
-      "dependsOn": ["^build"],
       "outputs": [".next/**", "!.next/cache/**", "dist/**"]
     },
     "nextjs-themes#build": {