diff --git a/src/app/_components/Header.tsx b/src/app/_components/Header.tsx
index 2a9c828..5d53e8f 100644
--- a/src/app/_components/Header.tsx
+++ b/src/app/_components/Header.tsx
@@ -5,7 +5,6 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
 import { env } from "@/env.mjs";
-import { dark } from "@clerk/themes";
 
 interface NavbarProps {
   title: string;
@@ -61,11 +60,7 @@ const Navbar = ({ title }: NavbarProps) => {
       </div>
 
       {navigationMenu()}
-      <UserButton
-        afterSignOutUrl="/"
-        userProfileMode="modal"
-        appearance={{ baseTheme: dark }}
-      />
+      <UserButton afterSignOutUrl="/" userProfileMode="modal" />
     </nav>
   );
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f8eee01..add7f42 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import Footer from "@/app/_components/Footer";
 import Header from "@/app/_components/Header";
 import "@/styles/globals.css";
 import Provider from "./_trpc/Provider";
+import { dark } from "@clerk/themes";
 
 export const metadata = {
   title: "Sprint Padawan",
@@ -15,7 +16,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <ClerkProvider>
+    <ClerkProvider appearance={{ baseTheme: dark }}>
       <html lang="en" className="h-[100%] w-[100%] fixed overflow-y-auto">
         <body className="h-[100%] w-[100%] fixed overflow-y-auto">
           <ClerkLoaded>
diff --git a/src/app/sign-in/[[...sign-in]]/page.tsx b/src/app/sign-in/[[...sign-in]]/page.tsx
index fc66f7d..c9d295c 100644
--- a/src/app/sign-in/[[...sign-in]]/page.tsx
+++ b/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,18 +1,12 @@
 "use client";
 
 import { SignIn } from "@clerk/nextjs";
-import { dark } from "@clerk/themes";
 
 export const dynamic = "force-static";
 
 const SignInPage = () => (
   <div style={styles}>
-    <SignIn
-      path="/sign-in"
-      routing="path"
-      signUpUrl="/sign-up"
-      appearance={{ baseTheme: dark }}
-    />
+    <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
   </div>
 );
 
diff --git a/src/app/sign-up/[[...sign-up]]/page.tsx b/src/app/sign-up/[[...sign-up]]/page.tsx
index 89b6a05..26adc28 100644
--- a/src/app/sign-up/[[...sign-up]]/page.tsx
+++ b/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -1,18 +1,12 @@
 "use client";
 
 import { SignUp } from "@clerk/nextjs";
-import { dark } from "@clerk/themes";
 
 export const dynamic = "force-static";
 
 const SignUpPage = () => (
   <div style={styles}>
-    <SignUp
-      path="/sign-up"
-      routing="path"
-      signInUrl="/sign-in"
-      appearance={{ baseTheme: dark }}
-    />
+    <SignUp path="/sign-up" routing="path" signInUrl="/sign-in" />
   </div>
 );
 
