diff --git a/web/components/custom/clerk/clerk-provider-client.tsx b/web/components/custom/clerk/clerk-provider-client.tsx
index 769a8c3f..69a5acdc 100644
--- a/web/components/custom/clerk/clerk-provider-client.tsx
+++ b/web/components/custom/clerk/clerk-provider-client.tsx
@@ -1,31 +1,22 @@
 "use client"
+
 import { ClerkProvider } from "@clerk/nextjs"
 import { dark } from "@clerk/themes"
-import { useEffect, useState } from "react"
+import { useTheme } from "next-themes"
 
-export const ClerkProviderClient = ({ children }: { children: React.ReactNode }) => {
-	const [darkMode, setDarkMode] = useState(false)
-
-	useEffect(() => {
-		const updateTheme = () => {
-			setDarkMode(document.documentElement.classList.contains("dark"))
-		}
-		updateTheme()
-
-		const observer = new MutationObserver(updateTheme)
-		observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
-
-		return () => observer.disconnect()
-	}, [])
-
-	return (
-		<ClerkProvider
-			appearance={{
-				baseTheme: darkMode ? dark : undefined,
-				variables: { colorPrimary: darkMode ? "#dddddd" : "#2e2e2e" }
-			}}
-		>
-			{children}
-		</ClerkProvider>
-	)
+interface ClerkProviderClientProps {
+	children: React.ReactNode
+}
+
+export const ClerkProviderClient: React.FC<ClerkProviderClientProps> = ({ children }) => {
+	const { theme, systemTheme } = useTheme()
+
+	const isDarkTheme = theme === "dark" || (theme === "system" && systemTheme === "dark")
+
+	const appearance = {
+		baseTheme: isDarkTheme ? dark : undefined,
+		variables: { colorPrimary: isDarkTheme ? "#dddddd" : "#2e2e2e" }
+	}
+
+	return <ClerkProvider appearance={appearance}>{children}</ClerkProvider>
 }