diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
new file mode 100644
index 0000000..2ed161e
--- /dev/null
+++ b/app/(auth)/layout.tsx
@@ -0,0 +1,124 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Sparkles, BookOpen, GraduationCap } from "lucide-react";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-[100dvh] w-full">
+      {/* Left Side - Brand & Features (Hidden on Mobile) */}
+      <div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-[#00008B] lg:flex">
+        {/* Background Gradients & Effects */}
+        <div className="absolute inset-0 z-0">
+          <div className="absolute -left-[10%] top-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/20 blur-[120px]" />
+          <div className="absolute -right-[10%] bottom-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-500/20 blur-[120px]" />
+          <div className="absolute inset-0 bg-[url('/noise.png')] opacity-20 mix-blend-overlay" />
+        </div>
+
+        {/* Top Logo */}
+        <div className="relative z-10 p-10">
+          <Link
+            href="/"
+            className="flex items-center gap-3 transition-opacity hover:opacity-90"
+          >
+            <div className="relative flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl bg-white/10 backdrop-blur-md">
+              <Image
+                src="/hl-logo.png"
+                alt="Hyper Learning Logo"
+                width={32}
+                height={32}
+                className="object-contain"
+              />
+            </div>
+            <span className="text-xl font-bold text-white tracking-tight">
+              Hyper Learning
+            </span>
+          </Link>
+        </div>
+
+        {/* Center Content */}
+        <div className="relative z-10 flex flex-col justify-center p-10 xl:p-16">
+          <h1 className="text-4xl font-extrabold tracking-tight text-white xl:text-5xl">
+            Welcome to the future of learning.
+          </h1>
+          <p className="mt-6 text-lg text-blue-100/80 leading-relaxed max-w-md">
+            Join thousands of engineering students who are studying smarter with
+            AI-powered notes, mapped syllabus, and instant tutor assistance.
+          </p>
+
+          <div className="mt-12 space-y-6">
+            <div className="flex items-center gap-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-blue-200 backdrop-blur-sm">
+                <BookOpen className="h-6 w-6" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">AI-Powered Notes</h3>
+                <p className="text-sm text-blue-200/70">
+                  Concept explanations tailored for exams.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-blue-200 backdrop-blur-sm">
+                <GraduationCap className="h-6 w-6" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Mapped PYQs</h3>
+                <p className="text-sm text-blue-200/70">
+                  Previous year questions mapped to topics.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-blue-200 backdrop-blur-sm">
+                <Sparkles className="h-6 w-6" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-white">Instant AI Tutor</h3>
+                <p className="text-sm text-blue-200/70">
+                  Clear your doubts 24/7 on any subject.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Footer */}
+        <div className="relative z-10 p-10 text-sm text-blue-200/50">
+          © {new Date().getFullYear()} Hyper Learning. All rights reserved.
+        </div>
+      </div>
+
+      {/* Right Side - Auth Forms */}
+      <div className="relative flex w-full flex-col justify-center items-center bg-background p-6 sm:p-12 lg:w-1/2">
+        <div className="absolute inset-0 z-0 lg:hidden">
+          <div className="absolute top-0 right-0 h-[300px] w-[300px] rounded-full bg-blue-500/5 blur-[100px]" />
+        </div>
+
+        {/* Mobile Logo Header */}
+        <div className="absolute top-6 left-6 z-10 lg:hidden">
+          <Link
+            href="/"
+            className="flex items-center gap-3 transition-opacity hover:opacity-80"
+          >
+            <div className="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl bg-blue-600">
+              <Image
+                src="/hl-logo.png"
+                alt="Hyper Learning Logo"
+                width={24}
+                height={24}
+                className="object-contain"
+              />
+            </div>
+          </Link>
+        </div>
+
+        {/* Auth Container */}
+        <div className="relative z-10 w-full max-w-[400px]">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/(auth)/sign-in/page.tsx b/app/(auth)/sign-in/page.tsx
index dbfab90..fb46add 100644
--- a/app/(auth)/sign-in/page.tsx
+++ b/app/(auth)/sign-in/page.tsx
@@ -1,3 +1,110 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
 export default function SignInPage() {
-  return <div>Sign In Page</div>;
+  return (
+    <div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <div className="flex flex-col gap-2 text-center lg:text-left">
+        <h1 className="text-3xl font-bold tracking-tight text-foreground">
+          Welcome back
+        </h1>
+        <p className="text-muted-foreground text-sm">
+          Enter your credentials to access your workspace
+        </p>
+      </div>
+
+      <form className="flex flex-col gap-5 mt-2">
+        <div className="flex flex-col gap-1.5">
+          <label
+            htmlFor="email"
+            className="text-sm font-medium text-foreground"
+          >
+            Email address
+          </label>
+          <input
+            id="email"
+            type="email"
+            placeholder="name@student.university.edu"
+            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
+            required
+          />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center justify-between">
+            <label
+              htmlFor="password"
+              className="text-sm font-medium text-foreground"
+            >
+              Password
+            </label>
+            <Link
+              href="#"
+              className="text-xs font-medium text-[#1D4ED8] transition-colors hover:text-[#1E40AF] dark:text-blue-400 dark:hover:text-blue-300"
+            >
+              Forgot password?
+            </Link>
+          </div>
+          <input
+            id="password"
+            type="password"
+            placeholder="••••••••"
+            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
+            required
+          />
+        </div>
+
+        <button
+          type="button"
+          className="group mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-[#1D4ED8] px-4 py-3.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#1E40AF] hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 dark:bg-blue-600 dark:hover:bg-blue-700"
+        >
+          Sign In
+          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+        </button>
+      </form>
+
+      <div className="relative mt-2">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-border" />
+        </div>
+        <div className="relative flex justify-center text-xs">
+          <span className="bg-background px-3 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="mr-2 h-5 w-5"
+        >
+          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+          <path d="M9 18c-4.51 2-5-2-7-2" />
+        </svg>
+        GitHub
+      </button>
+
+      <p className="text-center text-sm text-muted-foreground mt-2">
+        Don&apos;t have an account?{" "}
+        <Link
+          href="/sign-up"
+          className="font-semibold text-[#1D4ED8] transition-colors hover:text-[#1E40AF] hover:underline dark:text-blue-400 dark:hover:text-blue-300"
+        >
+          Sign up
+        </Link>
+      </p>
+    </div>
+  );
 }
diff --git a/app/(auth)/sign-up/page.tsx b/app/(auth)/sign-up/page.tsx
index 2ef92e4..f31adb3 100644
--- a/app/(auth)/sign-up/page.tsx
+++ b/app/(auth)/sign-up/page.tsx
@@ -1,3 +1,138 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
 export default function SignUpPage() {
-  return <div>Sign Up Page</div>;
+  return (
+    <div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <div className="flex flex-col gap-2 text-center lg:text-left">
+        <h1 className="text-3xl font-bold tracking-tight text-foreground">
+          Create an account
+        </h1>
+        <p className="text-muted-foreground text-sm">
+          Join thousands of students learning smarter
+        </p>
+      </div>
+
+      <form className="flex flex-col gap-5 mt-2">
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="firstName"
+              className="text-sm font-medium text-foreground"
+            >
+              First name
+            </label>
+            <input
+              id="firstName"
+              type="text"
+              placeholder="John"
+              className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
+              required
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="lastName"
+              className="text-sm font-medium text-foreground"
+            >
+              Last name
+            </label>
+            <input
+              id="lastName"
+              type="text"
+              placeholder="Doe"
+              className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label
+            htmlFor="email"
+            className="text-sm font-medium text-foreground"
+          >
+            Email address
+          </label>
+          <input
+            id="email"
+            type="email"
+            placeholder="name@student.university.edu"
+            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
+            required
+          />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label
+            htmlFor="password"
+            className="text-sm font-medium text-foreground"
+          >
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            placeholder="••••••••"
+            className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
+            required
+          />
+          <p className="text-xs text-muted-foreground mt-1">
+            Must be at least 8 characters long.
+          </p>
+        </div>
+
+        <button
+          type="button"
+          className="group mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-[#1D4ED8] px-4 py-3.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#1E40AF] hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 dark:bg-blue-600 dark:hover:bg-blue-700"
+        >
+          Create Account
+          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+        </button>
+      </form>
+
+      <div className="relative mt-2">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-border" />
+        </div>
+        <div className="relative flex justify-center text-xs">
+          <span className="bg-background px-3 text-muted-foreground">
+            Or sign up with
+          </span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="mr-2 h-5 w-5"
+        >
+          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+          <path d="M9 18c-4.51 2-5-2-7-2" />
+        </svg>
+        GitHub
+      </button>
+
+      <p className="text-center text-sm text-muted-foreground mt-2">
+        Already have an account?{" "}
+        <Link
+          href="/sign-in"
+          className="font-semibold text-[#1D4ED8] transition-colors hover:text-[#1E40AF] hover:underline dark:text-blue-400 dark:hover:text-blue-300"
+        >
+          Sign in
+        </Link>
+      </p>
+    </div>
+  );
 }