Add modes to auth, add new design, remove svg background

app/(auth)/signin/page.tsx

@@ -1,5 +1,13 @@
+import { ModeToggle } from '@/components/mode-toggle';
 import SignIn from '@/components/sign-in';
 
 export default function SignInPage() {
-  return <SignIn />;
+  return (
+    <>
+      <SignIn />
+      <div className="absolute top-2 right-2">
+        <ModeToggle />
+      </div>
+    </>
+  );
 }

app/(auth)/signup/page.tsx

@@ -1,5 +1,13 @@
+import { ModeToggle } from '@/components/mode-toggle';
 import SignUp from '@/components/sign-up';
 
 export default function SignUpPage() {
-  return <SignUp />;
+  return (
+    <>
+      <SignUp />
+      <div className="absolute top-2 right-2">
+        <ModeToggle />
+      </div>
+    </>
+  );
 }

components/sign-in.tsx

@@ -36,7 +36,7 @@ export default function SignIn() {
     <form
       ref={formRef}
       action={handleSignIn}
-      className="min-h-screen flex items-center justify-center bg-[url('@/public/loader.svg?height=400&width=400')] bg-repeat p-4"
+      className="min-h-screen flex items-center justify-center p-4"
     >
       <Card className="w-full max-w-md shadow-lg">
         <CardHeader className="space-y-1 flex flex-col items-center">

components/sign-up.tsx

@@ -36,7 +36,8 @@ export default function SignUp() {
     <form
       ref={formRef}
       action={handleSignUp}
-      className="min-h-screen flex items-center justify-center bg-[url('@/public/loader.svg?height=400&width=400')] bg-repeat p-4"
+      className="min-h-screen flex items-center justify-center p-4"
+      // bg-[url('@/public/loader.svg?height=400&width=400')] bg-repeat
     >
       <Card className="w-full max-w-md shadow-lg">
         <CardHeader className="space-y-1 flex flex-col items-center">