diff --git a/.changeset/late-rivers-kick.md b/.changeset/late-rivers-kick.md
new file mode 100644
index 00000000..986aba71
--- /dev/null
+++ b/.changeset/late-rivers-kick.md
@@ -0,0 +1,5 @@
+---
+"react18-themes": major
+---
+
+Do not export force-theme and force-color-scheme components from the root.
diff --git a/.changeset/popular-otters-whisper.md b/.changeset/popular-otters-whisper.md
new file mode 100644
index 00000000..c69d40d1
--- /dev/null
+++ b/.changeset/popular-otters-whisper.md
@@ -0,0 +1,5 @@
+---
+"react18-themes": major
+---
+
+Remove support for passing styles object from CSS modules or CSS-in-JS for the theme classes.
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 00000000..fd76f852
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,18 @@
+{
+  "mode": "exit",
+  "tag": "alpha",
+  "initialVersions": {
+    "@example/app": "0.0.0",
+    "@example/pages": "0.0.0",
+    "@example/vite": "0.0.0",
+    "react18-themes": "4.0.0-alpha.0",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/shared": "0.0.2-alpha.0",
+    "@repo/scripts": "0.0.0"
+  },
+  "changesets": [
+    "late-rivers-kick",
+    "popular-otters-whisper"
+  ]
+}
diff --git a/README.md b/README.md
index aa6f7dad..73a03c36 100644
--- a/README.md
+++ b/README.md
@@ -221,7 +221,7 @@ interface UseThemeYield {
 ### Next.js App Router
 
 ```tsx
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 function MyPage() {
   return (
diff --git a/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx b/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx
index deb9558e..6ab12160 100644
--- a/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx
+++ b/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx
@@ -1,5 +1,5 @@
 import type { ColorSchemeType } from "react18-themes";
-import { ForceColorScheme } from "react18-themes";
+import { ForceColorScheme } from "react18-themes/force-color-scheme";
 
 interface PageWithForcedColorSchemeProps {
   params: { colorScheme: ColorSchemeType };
diff --git a/examples/app-router/src/app/forced-color-scheme/page.tsx b/examples/app-router/src/app/forced-color-scheme/page.tsx
index e3dc4a5c..d0cc5fda 100644
--- a/examples/app-router/src/app/forced-color-scheme/page.tsx
+++ b/examples/app-router/src/app/forced-color-scheme/page.tsx
@@ -1,4 +1,4 @@
-import { ForceColorScheme } from "react18-themes";
+import { ForceColorScheme } from "react18-themes/force-color-scheme";
 
 export default function PageWithForcedColorScheme(): JSX.Element {
   return (
diff --git a/examples/app-router/src/app/themed-page/[theme]/page.tsx b/examples/app-router/src/app/themed-page/[theme]/page.tsx
index 66945890..93bc00c0 100644
--- a/examples/app-router/src/app/themed-page/[theme]/page.tsx
+++ b/examples/app-router/src/app/themed-page/[theme]/page.tsx
@@ -1,4 +1,4 @@
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 interface PageProps {
   params: { theme: string };
diff --git a/examples/app-router/src/app/themed-page/page.tsx b/examples/app-router/src/app/themed-page/page.tsx
index 13f8d750..aa97870a 100644
--- a/examples/app-router/src/app/themed-page/page.tsx
+++ b/examples/app-router/src/app/themed-page/page.tsx
@@ -1,4 +1,4 @@
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 export default function PageWithForcedTheme(): JSX.Element {
   return (
diff --git a/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx b/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx
index 42cbf60f..feda127a 100644
--- a/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx
+++ b/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx
@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
-import { ColorSchemeType, ForceColorScheme } from "react18-themes";
+import { ColorSchemeType } from "react18-themes";
+import { ForceColorScheme } from "react18-themes/client/force-color-scheme";
 
 export default function PageWithForcedColorScheme() {
   const router = useRouter();
diff --git a/examples/pages-router/src/pages/themed-page/[theme].tsx b/examples/pages-router/src/pages/themed-page/[theme].tsx
index f5e02b9a..92f97a08 100644
--- a/examples/pages-router/src/pages/themed-page/[theme].tsx
+++ b/examples/pages-router/src/pages/themed-page/[theme].tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 export default function PageWithForcedTheme() {
   const router = useRouter();
diff --git a/examples/vite/src/app/forced-color-scheme-page.tsx b/examples/vite/src/app/forced-color-scheme-page.tsx
index a0ba9a6e..9c9bfbdc 100644
--- a/examples/vite/src/app/forced-color-scheme-page.tsx
+++ b/examples/vite/src/app/forced-color-scheme-page.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { ColorSchemeType, ForceColorScheme } from "react18-themes";
+import { ColorSchemeType } from "react18-themes";
 import { Link, useParams } from "react-router-dom";
 import { Header } from "@repo/shared";
+import { ForceColorScheme } from "react18-themes/client/force-color-scheme";
 
 export default function ForcedColorSchemePage() {
   const { colorScheme } = useParams();
diff --git a/examples/vite/src/app/themed-page.tsx b/examples/vite/src/app/themed-page.tsx
index 3830d5c7..e8816c31 100644
--- a/examples/vite/src/app/themed-page.tsx
+++ b/examples/vite/src/app/themed-page.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Link, useParams } from "react-router-dom";
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 import { Header } from "@repo/shared";
 
 export default function ThemedPage() {
diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md
index ee22cfd9..ced05b83 100644
--- a/lib/CHANGELOG.md
+++ b/lib/CHANGELOG.md
@@ -1,5 +1,12 @@
 # react18-themes
 
+## 4.0.0-alpha.0
+
+### Major Changes
+
+- a4b539b: Do not export force-theme and force-color-scheme components from the root.
+- 88f5f17: Remove support for passing styles object from CSS modules or CSS-in-JS for the theme classes.
+
 ## 3.2.0
 
 ### Minor Changes
diff --git a/lib/README.md b/lib/README.md
index aa6f7dad..73a03c36 100644
--- a/lib/README.md
+++ b/lib/README.md
@@ -221,7 +221,7 @@ interface UseThemeYield {
 ### Next.js App Router
 
 ```tsx
-import { ForceTheme } from "react18-themes";
+import { ForceTheme } from "react18-themes/force-theme";
 
 function MyPage() {
   return (
diff --git a/lib/package.json b/lib/package.json
index 02e5fa04..5ea2135e 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -2,7 +2,7 @@
   "name": "react18-themes",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "3.2.0",
+  "version": "4.0.0-alpha.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.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",
@@ -46,6 +46,26 @@
       "import": "./dist/client/theme-switcher/index.mjs",
       "types": "./dist/client/theme-switcher/index.d.ts"
     },
+    "./client/force-color-scheme": {
+      "require": "./dist/client/force-color-scheme/index.js",
+      "import": "./dist/client/force-color-scheme/index.mjs",
+      "types": "./dist/client/force-color-scheme/index.d.ts"
+    },
+    "./force-color-scheme": {
+      "require": "./dist/client/force-color-scheme/index.js",
+      "import": "./dist/client/force-color-scheme/index.mjs",
+      "types": "./dist/client/force-color-scheme/index.d.ts"
+    },
+    "./client/force-theme": {
+      "require": "./dist/client/force-theme/index.js",
+      "import": "./dist/client/force-theme/index.mjs",
+      "types": "./dist/client/force-theme/index.d.ts"
+    },
+    "./force-theme": {
+      "require": "./dist/client/force-theme/index.js",
+      "import": "./dist/client/force-theme/index.mjs",
+      "types": "./dist/client/force-theme/index.d.ts"
+    },
     "./server": {
       "require": "./dist/server/index.js",
       "import": "./dist/server/index.mjs",
@@ -81,9 +101,9 @@
       "import": "./dist/hooks/index.mjs",
       "types": "./dist/hooks/index.d.ts"
     },
-    "./styles.css": "./dist/index.css",
-    "./styles": "./dist/index.css",
-    "./css": "./dist/index.css"
+    "./styles.css": "./dist/client/color-switch/index.css",
+    "./styles": "./dist/client/color-switch/index.css",
+    "./css": "./dist/client/color-switch/index.css"
   },
   "scripts": {
     "build": "tsup && tsc -p tsconfig-build.json",
diff --git a/lib/src/client/color-switch/color-switch.module.scss b/lib/src/client/color-switch/color-switch.module.scss
index 8a10d3f1..d0a27ad4 100644
--- a/lib/src/client/color-switch/color-switch.module.scss
+++ b/lib/src/client/color-switch/color-switch.module.scss
@@ -1,4 +1,4 @@
-.color-switch {
+.s {
   all: unset;
   position: relative;
   box-shadow: none;
@@ -6,46 +6,46 @@
   border-radius: 50%;
   border: 1px dashed gray;
   cursor: pointer;
-  --size: 25px;
-  height: var(--size);
-  width: var(--size);
+  --s: 25px;
+  height: var(--s);
+  width: var(--s);
   transition: all 0.3s ease-in-out 0s !important;
 }
 
-[data-csp="system"] .color-switch::after,
-[data-csp="system"] ~ .color-switch::after,
-[data-csp="system"] ~ * .color-switch::after {
+[data-csp="system"] .s::after,
+[data-csp="system"] ~ .s::after,
+[data-csp="system"] ~ * .s::after {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   font-weight: 600;
-  font-size: calc(1 * var(--size) / 2);
+  font-size: calc(1 * var(--s) / 2);
   display: flex;
   align-items: center;
   justify-content: center;
   content: "A";
 }
 
-[data-csp="dark"] .color-switch,
-[data-csp="dark"] ~ .color-switch,
-[data-csp="dark"] ~ * .color-switch {
-  box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff;
+[data-csp="dark"] .s,
+[data-csp="dark"] ~ .s,
+[data-csp="dark"] ~ * .s {
+  box-shadow: calc(var(--s) / 4) calc(var(--s) / -4) calc(var(--s) / 8) inset #fff;
   border: none;
   background: transparent;
-  animation: swing linear 0.5s;
+  animation: a linear 0.5s;
 }
 
-[data-csp="light"] .color-switch,
-[data-csp="light"] ~ .color-switch,
-[data-csp="light"] ~ * .color-switch {
+[data-csp="light"] .s,
+[data-csp="light"] ~ .s,
+[data-csp="light"] ~ * .s {
   box-shadow: 0 0 50px 10px yellow;
   background-color: yellow;
   border: 1px solid orangered;
 }
 
-@keyframes swing {
+@keyframes a {
   40% {
     transform: rotate(-15deg);
   }
diff --git a/lib/src/client/color-switch/color-switch.tsx b/lib/src/client/color-switch/color-switch.tsx
index 1d21cd7f..0cd64b34 100644
--- a/lib/src/client/color-switch/color-switch.tsx
+++ b/lib/src/client/color-switch/color-switch.tsx
@@ -7,7 +7,6 @@ export interface ColorSwitchProps extends HTMLProps<HTMLButtonElement> {
   size?: number;
   /** Skip system colorScheme while toggling */
   skipSystem?: boolean;
-  targetSelector?: string;
 }
 
 /**
@@ -24,16 +23,10 @@ export interface ColorSwitchProps extends HTMLProps<HTMLButtonElement> {
  * <ColorSwitch size={20} skipSystem />
  * ```
  */
-export const ColorSwitch = ({
-  size = 25,
-  skipSystem,
-  targetSelector,
-  className,
-  ...props
-}: ColorSwitchProps) => {
-  const { toggleColorScheme } = useTheme(targetSelector);
+export const ColorSwitch = ({ size = 25, skipSystem, className, ...props }: ColorSwitchProps) => {
+  const { toggleColorScheme } = useTheme();
 
-  const cls = [styles["color-switch"], className].join(" ");
+  const cls = [styles.s, className].join(" ");
   return (
     <button
       className={cls}
@@ -41,7 +34,7 @@ export const ColorSwitch = ({
       // skipcq: JS-0417
       onClick={() => toggleColorScheme(skipSystem)}
       // @ts-expect-error -- setting custom attribute
-      style={{ "--size": `${size}px` }}
+      style={{ "--s": `${size}px` }}
       {...props}
     />
   );
diff --git a/lib/src/client/index.ts b/lib/src/client/index.ts
index cabdc792..beb807bf 100644
--- a/lib/src/client/index.ts
+++ b/lib/src/client/index.ts
@@ -6,6 +6,4 @@
 
 // client component exports
 export * from "./color-switch";
-export * from "./force-color-scheme";
-export * from "./force-theme";
 export * from "./theme-switcher";
diff --git a/lib/src/client/theme-switcher/no-fouc.ts b/lib/src/client/theme-switcher/no-fouc.ts
index 56f98585..514ade99 100644
--- a/lib/src/client/theme-switcher/no-fouc.ts
+++ b/lib/src/client/theme-switcher/no-fouc.ts
@@ -28,7 +28,6 @@ declare global {
 export const noFOUCScript = (
   key: string,
   initialState: ThemeStoreType,
-  styles?: Record<string, string>,
   forcedTheme_?: string,
   forcedColorScheme_?: ColorSchemeType,
 ) => {
@@ -42,7 +41,6 @@ export const noFOUCScript = (
       el.setAttribute(`data-${key}`, values[index]);
     });
     classes[0] = values[0];
-    if (styles) classes = classes.map(cls => styles[cls] ?? cls);
     el.className = classes.join(" ");
   };
 
diff --git a/lib/src/client/theme-switcher/theme-switcher.test.tsx b/lib/src/client/theme-switcher/theme-switcher.test.tsx
index c93359e0..10a5d38e 100644
--- a/lib/src/client/theme-switcher/theme-switcher.test.tsx
+++ b/lib/src/client/theme-switcher/theme-switcher.test.tsx
@@ -15,7 +15,7 @@ import { noFOUCScript } from "./no-fouc";
 import { initialState, ThemeStoreType } from "../../store";
 
 const MEDIA = "(prefers-color-scheme: dark)";
-const storageKey = `#${DEFAULT_ID}`;
+const storageKey = DEFAULT_ID;
 
 /** get dom attribute */
 const getResolvedTheme = () => document.documentElement.getAttribute("data-theme");
diff --git a/lib/src/client/theme-switcher/theme-switcher.tsx b/lib/src/client/theme-switcher/theme-switcher.tsx
index 56d98697..64927744 100644
--- a/lib/src/client/theme-switcher/theme-switcher.tsx
+++ b/lib/src/client/theme-switcher/theme-switcher.tsx
@@ -1,4 +1,4 @@
-import { memo, useEffect } from "react";
+import { useEffect } from "react";
 import { ColorSchemeType } from "../../types";
 import { ResolveFunc, UpdateDOMFunc, UpdateForcedPropsFunc, noFOUCScript } from "./no-fouc";
 import { initialState, useForcedStore, useThemeStore } from "../../store";
@@ -7,50 +7,34 @@ import { DARK, DEFAULT_ID, LIGHT } from "../../constants";
 export interface ThemeSwitcherProps {
   forcedTheme?: string;
   forcedColorScheme?: ColorSchemeType;
-  targetSelector?: string;
   themeTransition?: string;
-  /** provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules. */
-  styles?: Record<string, string>;
   /** The nonce value for your Content Security Policy. */
   nonce?: string;
 }
 
-interface ScriptProps {
-  /** key */
-  k: string;
-  /** nonce */
-  n?: string;
-  /** styles */
-  s?: Record<string, string>;
-  /** forcedTheme */
-  t?: string;
-  /** forcedColorScheme */
-  c?: ColorSchemeType;
-}
-
 let media: MediaQueryList;
 let updateDOM: UpdateDOMFunc;
 let resolveTheme: ResolveFunc;
 let updateForcedProps: UpdateForcedPropsFunc;
 let updateForcedState: UpdateForcedPropsFunc;
 
-const Script = memo(
-  ({ k, n = "", s, t, c }: ScriptProps) => {
-    if (typeof m !== "undefined")
-      [media, updateDOM, resolveTheme, updateForcedProps, updateForcedState] = [m, u, r, f, g];
-    return (
-      <script
-        suppressHydrationWarning
-        // skipcq: JS-0440
-        dangerouslySetInnerHTML={{
-          __html: `(${noFOUCScript.toString()})(${JSON.stringify([k, initialState, s, t, c]).slice(1, -1)})`,
-        }}
-        nonce={n}
-      />
-    );
-  },
-  () => true,
-);
+const Script = ({ nonce, forcedTheme, forcedColorScheme }: ThemeSwitcherProps) => {
+  // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
+  if (typeof window !== "undefined" && !window.m)
+    noFOUCScript(DEFAULT_ID, initialState, forcedTheme, forcedColorScheme);
+  if (typeof m !== "undefined")
+    [media, updateDOM, resolveTheme, updateForcedProps, updateForcedState] = [m, u, r, f, g];
+  return (
+    <script
+      suppressHydrationWarning
+      // skipcq: JS-0440
+      dangerouslySetInnerHTML={{
+        __html: `(${noFOUCScript.toString()})(${JSON.stringify([DEFAULT_ID, initialState, forcedTheme, forcedColorScheme]).slice(1, -1)})`,
+      }}
+      nonce={nonce}
+    />
+  );
+};
 
 /** disable transition while switching theme */
 const modifyTransition = (themeTransition = "none") => {
@@ -67,38 +51,17 @@ const modifyTransition = (themeTransition = "none") => {
   };
 };
 
-/**
- *
- *
- * @example
- * ```tsx
- * <ThemeSwitcher />
- * ```
- *
- * @source - Source code
- */
-export const ThemeSwitcher = ({
-  forcedTheme,
-  forcedColorScheme,
-  targetSelector,
-  themeTransition,
-  styles,
-  nonce,
-}: ThemeSwitcherProps) => {
-  const k = targetSelector || `#${DEFAULT_ID}`;
-  // handle client side exceptions when script is not run. <- for client side apps like vite or CRA
-  if (typeof window !== "undefined" && !window.m)
-    noFOUCScript(k, initialState, styles, forcedTheme, forcedColorScheme);
-
-  const [state, setState] = useThemeStore(targetSelector);
-  const [forced] = useForcedStore(targetSelector);
+const Switcher = ({ forcedTheme, forcedColorScheme, themeTransition }: ThemeSwitcherProps) => {
+  const [state, setState] = useThemeStore();
+  const [forced] = useForcedStore();
 
   useEffect(() => {
     media.addEventListener("change", () =>
       setState(state => ({ ...state, s: media.matches ? DARK : LIGHT })),
     );
     addEventListener("storage", e => {
-      if (e.key === k) setState(state => ({ ...state, ...JSON.parse(e.newValue || "{}") }));
+      if (e.key === DEFAULT_ID)
+        setState(state => ({ ...state, ...JSON.parse(e.newValue || "{}") }));
     });
   }, []);
 
@@ -106,7 +69,7 @@ export const ThemeSwitcher = ({
     const restoreThansitions = modifyTransition(themeTransition);
     updateDOM(resolveTheme(state));
     restoreThansitions();
-    localStorage.setItem(k, JSON.stringify(state));
+    localStorage.setItem(DEFAULT_ID, JSON.stringify(state));
   }, [state]);
 
   useEffect(() => {
@@ -118,6 +81,22 @@ export const ThemeSwitcher = ({
     updateForcedState(forced.f, forced.fc);
     updateDOM(resolveTheme(state));
   }, [forced]);
+  return null;
+};
 
-  return <Script {...{ k, n: nonce, s: styles, t: forcedTheme, c: forcedColorScheme }} />;
+/**
+ *
+ *
+ * @example
+ * ```tsx
+ * <ThemeSwitcher />
+ * ```
+ */
+export const ThemeSwitcher = (props: ThemeSwitcherProps) => {
+  return (
+    <>
+      <Script {...props} />
+      <Switcher {...props} />
+    </>
+  );
 };
diff --git a/lib/src/hooks/use-theme.ts b/lib/src/hooks/use-theme.ts
index a6136151..87d57fa1 100644
--- a/lib/src/hooks/use-theme.ts
+++ b/lib/src/hooks/use-theme.ts
@@ -35,9 +35,9 @@ interface UseThemeYield {
  * ```
  */
 
-export const useTheme = (targetSelector?: string): UseThemeYield => {
-  const [state, setState] = useThemeStore(targetSelector);
-  const [_, setForcedState] = useForcedStore(targetSelector);
+export const useTheme = (): UseThemeYield => {
+  const [state, setState] = useThemeStore();
+  const [_, setForcedState] = useForcedStore();
   useEffect(() => {
     resolveTheme = window.r;
   }, []);
diff --git a/lib/src/server/nextjs/nextjs-ssg-theme-switcher/nextjs-ssg-theme-switcher.test.tsx b/lib/src/server/nextjs/nextjs-ssg-theme-switcher/nextjs-ssg-theme-switcher.test.tsx
index 883341b1..1a96947f 100644
--- a/lib/src/server/nextjs/nextjs-ssg-theme-switcher/nextjs-ssg-theme-switcher.test.tsx
+++ b/lib/src/server/nextjs/nextjs-ssg-theme-switcher/nextjs-ssg-theme-switcher.test.tsx
@@ -1,6 +1,6 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, test } from "vitest";
-import { NextJsSSGThemeSwitcher, ServerSideWrapper } from ".";
+import { NextJsSSGThemeSwitcher, NextJsSSRThemeSwitcher, ServerSideWrapper } from ".";
 
 describe("nextjs-server-side-target", () => {
   afterEach(cleanup);
@@ -17,4 +17,8 @@ describe("nextjs-server-side-target", () => {
     render(<NextJsSSGThemeSwitcher tag="main" />);
     expect(screen.getByTestId("nextjs-server-side-target").tagName).toBe("MAIN");
   });
+  test("SSR", ({ expect }) => {
+    render(<NextJsSSRThemeSwitcher />);
+    expect(screen.getByTestId("nextjs-server-side-target").tagName).toBe("DIV");
+  });
 });
diff --git a/lib/src/store.ts b/lib/src/store.ts
index cc28df3f..4afee256 100644
--- a/lib/src/store.ts
+++ b/lib/src/store.ts
@@ -24,8 +24,8 @@ export const initialState: ThemeStoreType = {
 };
 
 /** internal store */
-export const useThemeStore = (targetSelector?: string) => {
-  const key = targetSelector ?? `#${DEFAULT_ID}`;
+export const useThemeStore = () => {
+  const key = DEFAULT_ID;
   return useRGS<ThemeStoreType>(key, () => {
     const str = typeof m !== "undefined" && localStorage.getItem(key);
     return str ? { ...JSON.parse(str), s: m.matches ? DARK : LIGHT } : initialState;
@@ -37,7 +37,7 @@ export interface ForcedStoreType {
   /** forced colorScheme */ fc?: ColorSchemeType;
 }
 
-export const useForcedStore = (targetSelector?: string) => {
-  const key = `${targetSelector ?? `#${DEFAULT_ID}`}-`;
+export const useForcedStore = () => {
+  const key = `${DEFAULT_ID}-`;
   return useRGS<ForcedStoreType>(key, {});
 };
diff --git a/lib/tsup.config.ts b/lib/tsup.config.ts
index 444f4574..a0bdc0ac 100644
--- a/lib/tsup.config.ts
+++ b/lib/tsup.config.ts
@@ -15,7 +15,7 @@ export default defineConfig(
       minify: !options.watch,
       esbuildPlugins: [
         react18Plugin({ disableJSXRequireDedup: true }),
-        cssPlugin({ generateScopedName: "react18-themes--[local]" }),
+        cssPlugin({ generateScopedName: "rth-[local]" }),
         rdiPlugin(),
       ],
       ...options,
diff --git a/package.json b/package.json
index 6b7967fe..6b8bce1a 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "turbo": "^2.0.4",
     "typedoc": "^0.26.2",
     "typedoc-plugin-extras": "^3.0.0",
-    "typedoc-plugin-inline-sources": "^1.0.2",
     "typedoc-plugin-mdn-links": "^3.2.1",
     "typedoc-plugin-missing-exports": "^3.0.0",
     "typedoc-plugin-rename-defaults": "^0.7.1",
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index 243cde38..312092b0 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @repo/shared
 
+## 0.0.2-alpha.0
+
+### Patch Changes
+
+- Updated dependencies [a4b539b]
+- Updated dependencies [88f5f17]
+  - react18-themes@4.0.0-alpha.0
+
 ## 0.0.1
 
 ### Patch Changes
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 67d6ab89..92780748 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.1",
+  "version": "0.0.2-alpha.0",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 256f975f..a29a9afe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       typedoc-plugin-extras:
         specifier: ^3.0.0
         version: 3.0.0(typedoc@0.26.2(typescript@5.5.2))
-      typedoc-plugin-inline-sources:
-        specifier: ^1.0.2
-        version: 1.0.2(typedoc@0.26.2(typescript@5.5.2))
       typedoc-plugin-mdn-links:
         specifier: ^3.2.1
         version: 3.2.1(typedoc@0.26.2(typescript@5.5.2))
@@ -4652,12 +4649,6 @@ packages:
     peerDependencies:
       typedoc: 0.25.x
 
-  typedoc-plugin-inline-sources@1.0.2:
-    resolution: {integrity: sha512-J1L2Ky6t5EeAI2fTqhcRii/ntxYN6lSPyKiaTKc/MIHgMTDh81elRvXPZFmvy+xMY9EEE9nlkUujfLGNo5c5Tw==}
-    engines: {node: '>= 10.8.0'}
-    peerDependencies:
-      typedoc: ^0.25.7
-
   typedoc-plugin-mdn-links@3.2.1:
     resolution: {integrity: sha512-l76VJKKhOxCYXnb16aV6nAQG5JCsuStqviNFmgzhS9dW73nqm3/1MO9497+0KlDTOPO3o+R2uVXq87d2cDy/hg==}
     peerDependencies:
@@ -10393,10 +10384,6 @@ snapshots:
     dependencies:
       typedoc: 0.26.2(typescript@5.5.2)
 
-  typedoc-plugin-inline-sources@1.0.2(typedoc@0.26.2(typescript@5.5.2)):
-    dependencies:
-      typedoc: 0.26.2(typescript@5.5.2)
-
   typedoc-plugin-mdn-links@3.2.1(typedoc@0.26.2(typescript@5.5.2)):
     dependencies:
       typedoc: 0.26.2(typescript@5.5.2)
diff --git a/scripts/manual-publish.js b/scripts/manual-publish.js
index 6c82827f..2e6d63a4 100644
--- a/scripts/manual-publish.js
+++ b/scripts/manual-publish.js
@@ -17,7 +17,10 @@ const DEFAULT_BRANCH = process.env.DEFAULT_BRANCH;
 const isLatestRelease = BRANCH === DEFAULT_BRANCH || BRANCH.includes("release-");
 let tag = "latest";
 
-const OLD_VERSION = require("../lib/package.json").version;
+const pkg = require("../lib/package.json");
+
+const OLD_VERSION = pkg.version;
+
 if (!isLatestRelease) {
   /** pre-release branch name should be the tag name (e.g., beta, canery, etc.) or tag name followed by a '-' and version or other specifiers. e.g. beta-2.0 */
   tag = BRANCH.split("-")[0];
@@ -42,6 +45,8 @@ const NEW_VERSION = JSON.parse(
   fs.readFileSync(path.resolve(__dirname, "..", "lib", "package.json")),
 ).version;
 
+pkg.version = NEW_VERSION;
+
 const [newMajor, newMinor] = NEW_VERSION.split(".");
 const [oldMajor, oldMinor] = OLD_VERSION.split(".");
 
@@ -68,15 +73,26 @@ if (isNotPatch && BRANCH === DEFAULT_BRANCH) {
   execSync(pushCmd);
 }
 
-/** Create release */
-execSync(`cd lib && pnpm build && npm publish --provenance --access public --tag ${tag}`);
+delete pkg.files;
+
+fs.writeFileSync(
+  path.join(__dirname, "../lib/dist/package.json"),
+  JSON.stringify(pkg, null, 2).replace(/dist\//g, ""),
+);
+
+fs.copyFileSync(
+  path.join(__dirname, "../README.md"),
+  path.join(__dirname, "../lib/dist/README.md"),
+);
+
+execSync(`cd lib/dist && npm publish --provenance --access public --tag ${tag}`);
 
 /** Create GitHub release */
 execSync(
-  `gh release create ${NEW_VERSION} --generate-notes${isLatestRelease ? " --latest" : ""} -n "$(sed '1,/^## /d;/^## /,$d' CHANGELOG.md)" --title "Release v${NEW_VERSION}"`,
+  `gh release create ${NEW_VERSION} --generate-notes${isLatestRelease ? " --latest" : ""} -n "$(sed '1,/^## /d;/^## /,$d' lib/CHANGELOG.md)" --title "Release v${NEW_VERSION}"`,
 );
 
 execSync("node ./scripts/lite.js");
 execSync(
-  "cd lib && pnpm build && cp package.json dist/package.json && cp README.md dist/README.md && cd dist && npm publish --provenance --access public --tag ${tag}",
+  `cd lib && pnpm build && cp package.json dist/package.json && cp README.md dist/README.md && cd dist && npm publish --provenance --access public --tag ${tag}`,
 );
diff --git a/scripts/templates/component.hbs b/scripts/templates/component.hbs
index d5acbe28..65386918 100644
--- a/scripts/templates/component.hbs
+++ b/scripts/templates/component.hbs
@@ -12,8 +12,6 @@ export interface {{ pascalCase name }}Props extends HTMLProps<HTMLDivElement> {
  * ```tsx
  * <{{ pascalCase name }} />
  * ```
- * 
- * @source - Source code
  */
 export const {{ pascalCase name }} = ({ children, ...props }: {{ pascalCase name }}Props) => {
   const className = [props.className, styles["{{ kebabCase name }}"]].filter(Boolean).join(" ");
diff --git a/scripts/templates/hook.hbs b/scripts/templates/hook.hbs
index c7b3b954..5c354a0f 100644
--- a/scripts/templates/hook.hbs
+++ b/scripts/templates/hook.hbs
@@ -12,8 +12,6 @@ export interface {{ pascalCase name }}Options {
  * ```tsx
  * const [] = {{ camelCase name }}(options);
  * ```
- * 
- * @source - Source code
  */
 
 export const {{ camelCase name }} = (options?: {{ pascalCase name }}Options) => {
diff --git a/typedoc.config.js b/typedoc.config.js
index c027a109..c65db0e2 100644
--- a/typedoc.config.js
+++ b/typedoc.config.js
@@ -1,20 +1,40 @@
 /** @type {import('typedoc').TypeDocOptions} */
 module.exports = {
   tsconfig: "tsconfig.docs.json",
-  name: "React18 Themes",
+  name: "Nextjs Themes",
   entryPoints: ["./lib/src"],
-  exclude: ["**/*.test.tsx", "**/index.ts", "**/declaration.d.ts"],
+  exclude: [
+    "**/*.test.tsx",
+    "**/index.ts",
+    "**/server/**",
+    "**/constants.ts",
+    "**/store.ts",
+    "**/no-fouc.ts",
+    "**/declaration.d.ts",
+  ],
   entryPointStrategy: "Expand",
   out: "./docs",
   commentStyle: "all",
   searchInComments: true,
+  searchInDocuments: true,
+  cleanOutputDir: true,
+  excludePrivate: true,
   excludeExternals: true,
+  excludeInternal: true,
+  projectDocuments: ["guides/*.md"],
+  hideGenerator: true,
+  cleanOutputDir: true,
+  navigationLinks: {
+    GitHub: "https://github.com/react18-tools/nextjs-themes",
+  },
+  navigation: {
+    includeFolders: false,
+  },
   plugin: [
     "typedoc-plugin-mdn-links",
     "typedoc-plugin-rename-defaults",
     "typedoc-plugin-missing-exports",
     "typedoc-plugin-zod",
-    "typedoc-plugin-inline-sources",
     // "typedoc-plugin-extras",
   ],
 };