diff --git a/components/AuthComponent/SigninForm.tsx b/components/AuthComponent/SigninForm.tsx
index 7d9a4b4..9f8565a 100644
--- a/components/AuthComponent/SigninForm.tsx
+++ b/components/AuthComponent/SigninForm.tsx
@@ -50,84 +50,102 @@ export default function SigninForm() {
   };
 
   return (
-    <main className="flex min-h-screen items-center justify-center px-4">
-      <Card className="w-full max-w-sm rounded-2xl">
-        <CardHeader>
-          <CardTitle>Sign in</CardTitle>
-          <CardDescription>
-            Enter your credentials to access your account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input placeholder="you@example.com" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <div className="relative">
+    <main className="flex min-h-screen items-center justify-center p-2 md:p-0">
+      <div className="w-full max-w-3xl min-h-[70vh] grid md:grid-cols-2 gap-8 bg-light-auth dark:bg-dark-auth rounded-2xl shadow-lg md:overflow-hidden">
+        <Card className="md:col-span-1 flex flex-col justify-center h-full md:border-none shadow-none md:bg-primary-foreground/10 backdrop-blur-3xl">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-3xl font-bold">
+              Log In
+            </CardTitle>
+            <CardDescription>
+              Enter your credentials to access your account
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-4"
+              >
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
                         <Input
-                          type={showPassword ? "text" : "password"}
-                          placeholder="••••••••"
+                          placeholder="you@example.com"
                           {...field}
+                          className="rounded-md"
                         />
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                          onClick={() => setShowPassword(!showPassword)}
-                        >
-                          {showPassword ? (
-                            <EyeOff className="h-4 w-4" />
-                          ) : (
-                            <Eye className="h-4 w-4" />
-                          )}
-                        </Button>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Password</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Input
+                            type={showPassword ? "text" : "password"}
+                            placeholder="••••••••"
+                            {...field}
+                            className="rounded-md pr-10"
+                          />
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                            onClick={() => setShowPassword(!showPassword)}
+                          >
+                            {showPassword ? (
+                              <EyeOff className="h-4 w-4" />
+                            ) : (
+                              <Eye className="h-4 w-4" />
+                            )}
+                          </Button>
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {signinError && (
+                  <Alert variant="destructive">
+                    <AlertDescription>{signinError}</AlertDescription>
+                  </Alert>
                 )}
-              />
-              {signinError && (
-                <Alert variant="destructive">
-                  <AlertDescription>{signinError}</AlertDescription>
-                </Alert>
-              )}
-              <LoadingButton
-                loading={isSigningIn}
-                loadingTitle="Signing in"
-                title="Sign in"
-                type="submit"
-              />
-            </form>
-          </Form>
-        </CardContent>
-        <CardFooter className="flex justify-center">
-          <AuthBottom
-            href="/auth/register"
-            title="Don't have an account? "
-            toTitle="Create One!"
-          />
-        </CardFooter>
-      </Card>
+                <LoadingButton
+                  loading={isSigningIn}
+                  loadingTitle="Signing in"
+                  title="Sign in"
+                  type="submit"
+                />
+              </form>
+            </Form>
+          </CardContent>
+          <CardFooter className="flex justify-center">
+            <AuthBottom
+              href="/auth/register"
+              title="Don't have an account?"
+              toTitle="Create One!"
+            />
+          </CardFooter>
+        </Card>
+        <div className="hidden md:flex flex-col justify-center p-4">
+          <h1 className="text-5xl font-bold mb-4">Welcome Back</h1>
+          <h2 className="text-xl">
+            We're glad to see you again! Please sign in to continue.
+          </h2>
+        </div>
+      </div>
     </main>
   );
 }
diff --git a/components/AuthComponent/SignupForm.tsx b/components/AuthComponent/SignupForm.tsx
index 66cb706..12db934 100644
--- a/components/AuthComponent/SignupForm.tsx
+++ b/components/AuthComponent/SignupForm.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
-import { Eye, EyeOff } from "lucide-react";
+import { Eye, EyeOff } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -36,6 +36,7 @@ import { useAuthStore } from "@/store/AuthStore/useAuthStore";
 import AuthBottom from "./AuthBottom";
 import LoadingButton from "../Buttons/LoadingButton";
 import { signupSchema } from "@/validations/validation";
+
 type SignupFormValues = z.infer<typeof signupSchema>;
 
 export default function SignupForm() {
@@ -50,7 +51,7 @@ export default function SignupForm() {
       email: "",
       password: "",
       leetcodeUsername: "",
-      gender: undefined, // Changed from "" to undefined
+      gender: undefined,
     },
   });
 
@@ -59,137 +60,151 @@ export default function SignupForm() {
   };
 
   return (
-    <main className="flex min-h-screen items-center justify-center px-4">
-      <Card className="w-full max-w-md rounded-2xl">
-        <CardHeader>
-          <CardTitle className="text-2xl font-bold">
-            Register your Account
-          </CardTitle>
-          <CardDescription>
-            Sign up to start your coding journey
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="fullName"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Full Name</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Your Name" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input placeholder="you@example.com" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <div className="relative">
+    <main className="flex min-h-screen items-center justify-center md:p-0 p-2">
+      <div className="w-full max-w-4xl grid md:grid-cols-2 gap-8 bg-light-auth dark:bg-dark-auth rounded-2xl shadow-lg md:overflow-hidden">
+        <Card className="md:col-span-1 md:bg-primary-foreground/10 backdrop-blur-3xl md:border-none shadow-none">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-3xl font-bold ">Register</CardTitle>
+            <CardDescription>
+              Sign up to start your coding journey
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-4"
+              >
+                <FormField
+                  control={form.control}
+                  name="fullName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Full Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Your Name" {...field} className="rounded-md" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input placeholder="you@example.com" {...field} className="rounded-md" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Password</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Input
+                            type={showPassword ? "text" : "password"}
+                            placeholder="••••••"
+                            {...field}
+                            className="rounded-md pr-10"
+                          />
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                            onClick={() => setShowPassword(!showPassword)}
+                          >
+                            {showPassword ? (
+                              <EyeOff className="h-4 w-4" />
+                            ) : (
+                              <Eye className="h-4 w-4" />
+                            )}
+                          </Button>
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="leetcodeUsername"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>LeetCode Username</FormLabel>
+                      <FormControl>
                         <Input
-                          type={showPassword ? "text" : "password"}
-                          placeholder="••••••"
+                          placeholder="Your LeetCode Username"
                           {...field}
+                          className="rounded-md"
                         />
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                          onClick={() => setShowPassword(!showPassword)}
-                        >
-                          {showPassword ? (
-                            <EyeOff className="h-4 w-4" />
-                          ) : (
-                            <Eye className="h-4 w-4" />
-                          )}
-                        </Button>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="leetcodeUsername"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>LeetCode Username</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Your LeetCode Username" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="gender"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Gender</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select Gender" />
-                        </SelectTrigger>
                       </FormControl>
-                      <SelectContent>
-                        <SelectItem value="male">Male</SelectItem>
-                        <SelectItem value="female">Female</SelectItem>
-                        <SelectItem value="other">Other</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="gender"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Gender</FormLabel>
+                      <Select
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="rounded-md">
+                            <SelectValue placeholder="Select Gender" />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          <SelectItem value="male">Male</SelectItem>
+                          <SelectItem value="female">Female</SelectItem>
+                          <SelectItem value="other">Other</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {signupError && (
+                  <Alert variant="destructive">
+                    <AlertDescription>{signupError}</AlertDescription>
+                  </Alert>
                 )}
-              />
-              {signupError && (
-                <Alert variant="destructive">
-                  <AlertDescription>{signupError}</AlertDescription>
-                </Alert>
-              )}
-              <LoadingButton
-                loading={isSigningUp}
-                loadingTitle="Registering"
-                title="Register"
-                type="submit"
-              />
-            </form>
-          </Form>
-        </CardContent>
-        <CardFooter className="flex justify-center">
-          <AuthBottom
-            href="/auth/signin"
-            title="Already have an account?"
-            toTitle="Sign In"
-          />
-        </CardFooter>
-      </Card>
+                <LoadingButton
+                  loading={isSigningUp}
+                  loadingTitle="Registering"
+                  title="Register"
+                  type="submit"
+                />
+              </form>
+            </Form>
+          </CardContent>
+          <CardFooter className="flex justify-center">
+            <AuthBottom
+              href="/auth/signin"
+              title="Already have an account?"
+              toTitle="Sign In"
+            />
+          </CardFooter>
+        </Card>
+        <div className="hidden md:flex flex-col justify-center p-8">
+          <h1 className="text-5xl font-bold mb-4">Join Us Today</h1>
+          <h2 className="text-xl">
+            Create an account to start your coding journey with us.
+          </h2>
+        </div>
+      </div>
     </main>
   );
 }
diff --git a/components/header.tsx b/components/header.tsx
index 286f402..8aad36c 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,4 +1,5 @@
 "use client"
+
 import { useState } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
diff --git a/public/dark-auth.jpg b/public/dark-auth.jpg
new file mode 100644
index 0000000..44d7a08
Binary files /dev/null and b/public/dark-auth.jpg differ
diff --git a/public/light-auth.jpg b/public/light-auth.jpg
new file mode 100644
index 0000000..ae552b5
Binary files /dev/null and b/public/light-auth.jpg differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index cffd6a0..b006bd4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,6 +9,10 @@ export default {
   ],
   theme: {
   	extend: {
+		backgroundImage:{
+			"light-auth" : "url('/light-auth.jpg')",
+			"dark-auth" : "url('/dark-auth.jpg')"
+		},
   		colors: {
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',