diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index 1cfc15f9d..f49f750a9 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -1,5 +1,6 @@
-import { ServerThemeProvider } from 'next-themes';
+// import { ServerThemeProvider } from 'next-themes';
 import type { PropsWithChildren } from 'react';
+import { Providers } from './providers';
 
 import '@unocss/reset/tailwind.css';
 import '../styles/inter.css';
@@ -9,19 +10,21 @@ import '../styles/main.css';
 
 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
-		<ServerThemeProvider
-			attribute="class"
-			defaultTheme="system"
-			disableTransitionOnChange
-			value={{
-				light: 'light',
-				dark: 'dark',
-			}}
-		>
-			<html lang="en">
-				<head />
-				<body className="dark:bg-dark-800 bg-white">{children}</body>
-			</html>
-		</ServerThemeProvider>
+		// <ServerThemeProvider
+		// 	attribute="class"
+		// 	defaultTheme="system"
+		// 	disableTransitionOnChange
+		// 	value={{
+		// 		light: 'light',
+		// 		dark: 'dark',
+		// 	}}
+		// >
+		<html lang="en">
+			<head />
+			<body className="dark:bg-dark-800 bg-white">
+				<Providers>{children}</Providers>
+			</body>
+		</html>
+		// </ServerThemeProvider>
 	);
 }
diff --git a/apps/website/src/app/providers.tsx b/apps/website/src/app/providers.tsx
new file mode 100644
index 000000000..c94a818c0
--- /dev/null
+++ b/apps/website/src/app/providers.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import type { PropsWithChildren } from 'react';
+
+export function Providers({ children }: PropsWithChildren) {
+	return (
+		<ThemeProvider
+			attribute="class"
+			defaultTheme="system"
+			disableTransitionOnChange
+			value={{
+				light: 'light',
+				dark: 'dark',
+			}}
+		>
+			{children}
+		</ThemeProvider>
+	);
+}
