diff --git a/src/app/(embeds)/layout.tsx b/src/app/(embeds)/layout.tsx
index cc0b9eb..b33f346 100644
--- a/src/app/(embeds)/layout.tsx
+++ b/src/app/(embeds)/layout.tsx
@@ -34,6 +34,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import "../globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { useSearchParams } from "next/navigation";
+import { ClerkThemeProvider } from "@/components/clerk/ClerkThemeProvider";
 
 export default function RootLayout({
   children,
@@ -43,16 +44,14 @@ export default function RootLayout({
   const searchParams = useSearchParams();
   const search = searchParams?.get("theme") || "light";
   return (
-    <html lang="en">
-      <body>
-        <ThemeProvider
-          attribute="class"
-          disableTransitionOnChange
-          forcedTheme={search}
-        >
-          <TooltipProvider>{children}</TooltipProvider>
-        </ThemeProvider>
-      </body>
-    </html>
+    <ClerkThemeProvider>
+      <ThemeProvider
+        attribute="class"
+        disableTransitionOnChange
+        forcedTheme={search}
+      >
+        <TooltipProvider>{children}</TooltipProvider>
+      </ThemeProvider>
+    </ClerkThemeProvider>
   );
 }
diff --git a/src/components/clerk/ClerkThemeProvider.tsx b/src/components/clerk/ClerkThemeProvider.tsx
index 6e6c081..7dbdcdd 100644
--- a/src/components/clerk/ClerkThemeProvider.tsx
+++ b/src/components/clerk/ClerkThemeProvider.tsx
@@ -36,44 +36,44 @@ import { type ReactNode, useEffect, useState } from "react";
 import { ThemeProvider } from "../ThemeProvider";
 
 export function ClerkThemeProvider({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: ReactNode | ReactNode[];
-	className: string | undefined;
+  children?: ReactNode | ReactNode[];
+  className?: string | undefined;
 }) {
-	const [theme, setTheme] = useState<string | undefined>("");
+  const [theme, setTheme] = useState<string | undefined>("");
 
-	return (
-		<ClerkProvider
-			appearance={{ baseTheme: theme == "dark" ? dark : undefined }}
-		>
-			<html lang="en" className={className}>
-				<body>
-					<ThemeProvider
-						attribute="class"
-						defaultTheme="system"
-						enableSystem
-						disableTransitionOnChange
-					>
-						{children}
-						{/** This *has* to be implemented in component form for the `useTheme` to load at the appropriate time. */}
-						<ThemeElement setTheme={setTheme} />
-					</ThemeProvider>
-				</body>
-			</html>
-		</ClerkProvider>
-	);
+  return (
+    <ClerkProvider
+      appearance={{ baseTheme: theme == "dark" ? dark : undefined }}
+    >
+      <html lang="en" className={className}>
+        <body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+            {/** This *has* to be implemented in component form for the `useTheme` to load at the appropriate time. */}
+            <ThemeElement setTheme={setTheme} />
+          </ThemeProvider>
+        </body>
+      </html>
+    </ClerkProvider>
+  );
 }
 
 function ThemeElement({
-	setTheme,
+  setTheme,
 }: {
-	setTheme: (update: string | undefined) => void;
+  setTheme: (update: string | undefined) => void;
 }) {
-	const theme = useTheme();
-	useEffect(() => {
-		setTheme(theme.resolvedTheme);
-	}, [theme.resolvedTheme, setTheme]);
-	return <></>;
+  const theme = useTheme();
+  useEffect(() => {
+    setTheme(theme.resolvedTheme);
+  }, [theme.resolvedTheme, setTheme]);
+  return <></>;
 }
