diff --git a/src/components/auth/auth-page.tsx b/src/components/auth/auth-page.tsx
index 5b23341..efb558c 100644
--- a/src/components/auth/auth-page.tsx
+++ b/src/components/auth/auth-page.tsx
@@ -5,21 +5,68 @@ import { SignInForm } from "./signin-form"
 import { SignUpForm } from "./signup-form"
 
 export function AuthPage() {
-  const [isSignIn, setIsSignIn] = useState(true)
+	const [isSignIn, setIsSignIn] = useState(false)
 
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
-      <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2">Codenuk</h1>
-          <p className="text-gray-600">AI-Powered Project Builder</p>
-        </div>
-        {isSignIn ? (
-          <SignInForm onToggleMode={() => setIsSignIn(false)} />
-        ) : (
-          <SignUpForm onToggleMode={() => setIsSignIn(true)} />
-        )}
-      </div>
-    </div>
-  )
+	return (
+		<div className="min-h-screen bg-black text-white flex items-center justify-center p-6">
+			<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-10">
+				{/* Left: Gradient panel with steps */}
+				<div className="hidden lg:block">
+					<div className="relative h-full rounded-3xl overflow-hidden border border-white/10 bg-gradient-to-b from-purple-500 via-purple-600 to-black p-10">
+						{/* subtle grain */}
+						<div className="pointer-events-none absolute inset-0 opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_70%,transparent_100%)]">
+							<div className="w-full h-full bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.12)_1px,transparent_0)] bg-[length:18px_18px]"></div>
+						</div>
+
+						{/* soft circular accents (minimal) */}
+						<div className="pointer-events-none absolute -top-10 -right-10 w-72 h-72 rounded-full blur-3xl bg-purple-300/40"></div>
+						<div className="pointer-events-none absolute top-1/3 -left-10 w-56 h-56 rounded-full blur-2xl bg-indigo-300/25"></div>
+						<div className="pointer-events-none absolute -bottom-12 left-1/3 w-64 h-64 rounded-full blur-3xl bg-purple-400/20"></div>
+
+						<div className="relative z-10 flex h-full flex-col justify-center">
+							<div className="mb-12">
+								<p className="text-4xl font-bold text-white/80">Codenuk</p>
+							</div>
+							<h2 className="text-4xl font-bold mb-3">Get Started with Us</h2>
+							<p className="text-white/80 mb-10">Complete these easy steps to register your account.</p>
+
+							<div className="space-y-4">
+								{/* Step 1 */}
+								<div className={`${!isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
+									<div className={`${!isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full flex items-center justify-center mr-4 text-sm font-semibold`}>1</div>
+									<span className="font-medium">Sign up your account</span>
+								</div>
+								{/* Step 2 */}
+								<div className={`${isSignIn ? "bg-white text-black" : "bg-white/10 text-white border border-white/20"} rounded-xl p-4 flex items-center`}>
+									<div className={`${isSignIn ? "bg-black text-white" : "bg-white/20 text-white"} w-9 h-9 rounded-full flex items-center justify-center mr-4 text-sm font-semibold`}>2</div>
+									<span className="font-medium">Set up your workspace</span>
+								</div>
+								{/* Step 3 */}
+								{/* <div className="bg-white/10 text-white border border-white/20 rounded-xl p-4 flex items-center">
+									<div className="w-9 h-9 rounded-full bg-white/20 text-white flex items-center justify-center mr-4 text-sm font-semibold">3</div>
+									<span className="font-medium">Set up your profile</span>
+								</div> */}
+							</div>
+						</div>
+					</div>
+				</div>
+
+				{/* Right: Form area */}
+				<div className="flex items-center">
+					<div className="w-full max-w-md ml-auto">
+						<div className="text-center mb-8">
+							<h1 className="text-2xl font-semibold text-white mb-1">{isSignIn ? "Sign In Account" : "Sign Up Account"}</h1>
+							<p className="text-white/60">{isSignIn ? "Enter your credentials to access your account." : "Enter your personal data to create your account."}</p>
+						</div>
+
+						{isSignIn ? (
+							<SignInForm onToggleMode={() => setIsSignIn(false)} />
+						) : (
+							<SignUpForm onToggleMode={() => setIsSignIn(true)} />
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	)
 }
diff --git a/src/components/auth/signin-form.tsx b/src/components/auth/signin-form.tsx
index 27314bd..e15d5bf 100644
--- a/src/components/auth/signin-form.tsx
+++ b/src/components/auth/signin-form.tsx
@@ -7,7 +7,6 @@ import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Eye, EyeOff, Loader2 } from "lucide-react"
 import { useAuth } from "@/contexts/auth-context"
 
@@ -47,71 +46,66 @@ export function SignInForm({ onToggleMode }: SignInFormProps) {
   }
 
   return (
-    <Card className="w-full max-w-md">
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl font-bold">Sign In</CardTitle>
-        <CardDescription>Enter your credentials to access your account</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
+    <div className="w-full">
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div className="space-y-2">
+          <Label htmlFor="email" className="text-white text-sm">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter your email"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+            required
+            className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="password" className="text-white text-sm">Password</Label>
+          <div className="relative">
             <Input
-              id="email"
-              type="email"
-              placeholder="Enter your email"
-              value={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              id="password"
+              type={showPassword ? "text" : "password"}
+              placeholder="Enter your password"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
               required
+              className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 pr-12"
             />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="password">Password</Label>
-            <div className="relative">
-              <Input
-                id="password"
-                type={showPassword ? "text" : "password"}
-                placeholder="Enter your password"
-                value={formData.password}
-                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                required
-              />
-              <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>
-          </div>
-          
-          {/* Error Message */}
-          {error && (
-            <div className="text-red-600 text-sm text-center bg-red-50 p-2 rounded-md">
-              {error}
-            </div>
-          )}
-          
-          <Button type="submit" className="w-full cursor-pointer" disabled={isLoading}>
-            {isLoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Signing In...
-              </>
-            ) : (
-              "Sign In"
-            )}
-          </Button>
-          <div className="text-center">
-            <Button type="button" variant="link" onClick={onToggleMode} className="text-sm cursor-pointer">
-              Don&apos;t have an account? Sign up
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="absolute right-0 top-0 h-full px-3 py-2 text-white/60 hover:text-white hover:bg-white/5"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
             </Button>
           </div>
-        </form>
-      </CardContent>
-    </Card>
+        </div>
+        
+        {error && (
+          <div className="text-red-300 text-sm text-center bg-red-900/20 p-3 rounded-md border border-red-500/30">
+            {error}
+          </div>
+        )}
+        
+        <Button type="submit" className="w-full h-11 cursor-pointer bg-white text-black hover:bg-white/90" disabled={isLoading}>
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Signing In...
+            </>
+          ) : (
+            "Sign In"
+          )}
+        </Button>
+        <div className="text-center">
+          <Button type="button" variant="link" onClick={onToggleMode} className="text-sm cursor-pointer text-white/70 hover:text-white">
+            Don&apos;t have an account? Sign up
+          </Button>
+        </div>
+      </form>
+    </div>
   )
 }
diff --git a/src/components/auth/signup-form.tsx b/src/components/auth/signup-form.tsx
index 5f052fe..5a31652 100644
--- a/src/components/auth/signup-form.tsx
+++ b/src/components/auth/signup-form.tsx
@@ -56,15 +56,15 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
   }
 
   return (
-    <Card className="w-full max-w-md">
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl font-bold">Sign Up</CardTitle>
-        <CardDescription>Create your account to get started</CardDescription>
+    <Card className="w-full max-w-md bg-transparent border-0 shadow-none">
+      <CardHeader className="space-y-1 p-0 mb-2">
+        <CardTitle className="sr-only">Sign Up</CardTitle>
+        <CardDescription className="sr-only">Create your account to get started</CardDescription>
       </CardHeader>
-      <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
+      <CardContent className="p-0">
+        <form onSubmit={handleSubmit} className="space-y-5">
           <div className="space-y-2">
-            <Label htmlFor="name">Full Name</Label>
+            <Label htmlFor="name" className="text-white text-sm">Full Name</Label>
             <Input
               id="name"
               type="text"
@@ -72,10 +72,11 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               required
+              className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30"
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
+            <Label htmlFor="email" className="text-white text-sm">Email</Label>
             <Input
               id="email"
               type="email"
@@ -83,24 +84,26 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
               value={formData.email}
               onChange={(e) => setFormData({ ...formData, email: e.target.value })}
               required
+              className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30"
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="password">Password</Label>
+            <Label htmlFor="password" className="text-white text-sm">Password</Label>
             <div className="relative">
               <Input
                 id="password"
                 type={showPassword ? "text" : "password"}
-                placeholder="Create a password"
+                placeholder="Enter your password"
                 value={formData.password}
                 onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                 required
+                className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 pr-12"
               />
               <Button
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                className="absolute right-0 top-0 h-full px-3 py-2 text-white/60 hover:text-white hover:bg-white/5"
                 onClick={() => setShowPassword(!showPassword)}
               >
                 {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -108,7 +111,7 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
             </div>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="confirmPassword">Confirm Password</Label>
+            <Label htmlFor="confirmPassword" className="text-white text-sm">Confirm Password</Label>
             <div className="relative">
               <Input
                 id="confirmPassword"
@@ -117,12 +120,13 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
                 value={formData.confirmPassword}
                 onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
                 required
+                className="h-11 bg-white/5 border-white/10 text-white placeholder:text-white/40 focus:border-white/30 focus:ring-white/30 pr-12"
               />
               <Button
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                className="absolute right-0 top-0 h-full px-3 py-2 text-white/60 hover:text-white hover:bg-white/5"
                 onClick={() => setShowConfirmPassword(!showConfirmPassword)}
               >
                 {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -130,14 +134,17 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
             </div>
           </div>
           
-          {/* Error Message */}
           {error && (
-            <div className="text-red-600 text-sm text-center bg-red-50 p-2 rounded-md">
+            <div className="text-red-300 text-sm text-center bg-red-900/20 p-3 rounded-md border border-red-500/30">
               {error}
             </div>
           )}
           
-          <Button type="submit" className="w-full cursor-pointer" disabled={isLoading}>
+          <Button 
+            type="submit" 
+            className="w-full h-11 cursor-pointer bg-white text-black hover:bg-white/90" 
+            disabled={isLoading}
+          >
             {isLoading ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -148,7 +155,12 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
             )}
           </Button>
           <div className="text-center">
-            <Button type="button" variant="link" onClick={onToggleMode} className="text-sm cursor-pointer">
+            <Button 
+              type="button" 
+              variant="link" 
+              onClick={onToggleMode} 
+              className="text-sm cursor-pointer text-white/70 hover:text-white"
+            >
               Already have an account? Sign in
             </Button>
           </div>
@@ -157,3 +169,4 @@ export function SignUpForm({ onToggleMode }: SignUpFormProps) {
     </Card>
   )
 }
+