premimm login and sighn in page

app/(auth)/sign-in/page.tsx

@@ -1,75 +1,82 @@
 import Link from "next/link";
+import Image from "next/image";
 import { ArrowRight } from "lucide-react";
 
 import { AuthInput } from "@/components/auth/auth-input";
 import { OAuthButton } from "@/components/auth/oauth-button";
 
 export default function SignInPage() {
   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
+    <div className="flex flex-col gap-4 w-full max-w-[360px] mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <div className="flex flex-col gap-2 text-center items-center mb-4">
+        <div className="h-20 w-20 rounded-full bg-zinc-100 dark:bg-white/[0.02] border border-zinc-200 dark:border-white/10 flex items-center justify-center mb-2 shadow-inner">
+          <Image
+            src="/hl-logo.png"
+            alt="Logo"
+            width={32}
+            height={32}
+            className="opacity-80"
+          />
+        </div>
+        <h1 className="text-[22px] font-semibold tracking-tight text-foreground">
+          Log in to Hyper Learning
         </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">
+      <form className="flex flex-col gap-3">
         <AuthInput
           id="email"
           type="email"
-          label="Email address"
-          placeholder="name@student.university.edu"
+          label=""
+          placeholder="Email address or username"
         />
 
         <AuthInput
           id="password"
           type="password"
-          label="Password"
-          placeholder="••••••••"
-          rightElement={
-            <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>
-          }
+          label=""
+          placeholder="Password"
         />
 
+        <div className="flex justify-end w-full mb-1">
+          <Link
+            href="#"
+            className="text-[11px] font-semibold text-foreground/70 transition-colors hover:text-foreground"
+          >
+            Forgot password?
+          </Link>
+        </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"
+          className="mt-1 flex w-full items-center justify-center rounded-full bg-[#0064e0] px-4 py-3 text-[15px] font-bold text-white transition-all hover:bg-[#0054c2] focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/20"
         >
-          Sign In
-          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+          Log in
         </button>
       </form>
 
-      <div className="relative mt-2">
+      <div className="relative mt-3 mb-1">
         <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-border" />
+          <div className="w-full border-t border-border/50" />
         </div>
-        <div className="relative flex justify-center text-xs">
-          <span className="bg-background px-3 text-muted-foreground">
-            Or continue with
-          </span>
+        <div className="relative flex justify-center text-xs font-semibold uppercase tracking-wider">
+          <span className="bg-background px-4 text-muted-foreground">Or</span>
         </div>
       </div>
 
       <OAuthButton />
 
-      <p className="text-center text-sm text-muted-foreground mt-2">
-        Don&apos;t have an account?{" "}
+      <div className="mt-3 flex w-full justify-center rounded-xl border border-zinc-200 dark:border-white/10 p-4 text-[13px] shadow-sm bg-white dark:bg-white/[0.02]">
+        <span className="text-muted-foreground mr-1.5">
+          Don&apos;t have an account?
+        </span>
         <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"
+          className="font-semibold text-[#0064e0] hover:underline"
         >
           Sign up
         </Link>
-      </p>
+      </div>
     </div>
   );
 }

app/(auth)/sign-up/page.tsx

@@ -1,83 +1,107 @@
 import Link from "next/link";
+import Image from "next/image";
 import { ArrowRight } from "lucide-react";
 
 import { AuthInput } from "@/components/auth/auth-input";
 import { OAuthButton } from "@/components/auth/oauth-button";
 
+import { branches } from "@/lib/data/branches";
+
+const BRANCHES = branches.map((branch) => {
+  if (branch.id === "common") return branch.name;
+  let acronym = branch.id.toUpperCase();
+  if (branch.id === "civil") acronym = "CE";
+  if (branch.id === "ec") acronym = "ECE";
+  return `${branch.name} (${acronym})`;
+});
+
 export default function SignUpPage() {
   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">
+    <div className="flex flex-col gap-4 w-full max-w-[360px] mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <div className="flex flex-col gap-2 text-center items-center mb-3">
+        <div className="h-16 w-16 rounded-full bg-zinc-100 dark:bg-white/[0.02] border border-zinc-200 dark:border-white/10 flex items-center justify-center mb-2 shadow-inner">
+          <Image
+            src="/hl-logo.png"
+            alt="Logo"
+            width={28}
+            height={28}
+            className="opacity-80"
+          />
+        </div>
+        <h1 className="text-[22px] font-semibold 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">
+      <form className="flex flex-col gap-3">
+        <div className="grid grid-cols-2 gap-3">
           <AuthInput
             id="firstName"
             type="text"
-            label="First name"
-            placeholder="John"
+            label=""
+            placeholder="First name"
           />
           <AuthInput
             id="lastName"
             type="text"
-            label="Last name"
-            placeholder="Doe"
+            label=""
+            placeholder="Last name"
           />
         </div>
 
         <AuthInput
           id="email"
           type="email"
-          label="Email address"
-          placeholder="name@student.university.edu"
+          label=""
+          placeholder="Email address"
+        />
+
+        <AuthInput
+          id="branch"
+          type="text"
+          label=""
+          placeholder="Engineering Branch"
+          suggestions={BRANCHES}
         />
 
         <AuthInput
           id="password"
           type="password"
-          label="Password"
-          placeholder="••••••••"
+          label=""
+          placeholder="Password"
           hint="Must be at least 8 characters long."
         />
 
         <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"
+          className="mt-1 flex w-full items-center justify-center rounded-full bg-[#0064e0] px-4 py-3 text-[15px] font-bold text-white transition-all hover:bg-[#0054c2] focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/20"
         >
-          Create Account
-          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+          Sign Up
         </button>
       </form>
 
-      <div className="relative mt-2">
+      <div className="relative mt-3 mb-1">
         <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-border" />
+          <div className="w-full border-t border-border/50" />
         </div>
-        <div className="relative flex justify-center text-xs">
-          <span className="bg-background px-3 text-muted-foreground">
-            Or sign up with
-          </span>
+        <div className="relative flex justify-center text-xs font-semibold uppercase tracking-wider">
+          <span className="bg-background px-4 text-muted-foreground">Or</span>
         </div>
       </div>
 
       <OAuthButton />
 
-      <p className="text-center text-sm text-muted-foreground mt-2">
-        Already have an account?{" "}
+      <div className="mt-3 flex w-full justify-center rounded-xl border border-zinc-200 dark:border-white/10 p-4 text-sm shadow-sm bg-white dark:bg-white/[0.02]">
+        <span className="text-muted-foreground mr-1.5">
+          Already have an account?
+        </span>
         <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"
+          className="font-semibold text-[#0064e0] hover:underline"
         >
-          Sign in
+          Log in
         </Link>
-      </p>
+      </div>
     </div>
   );
 }

app/dashboard/page.tsx

@@ -6,7 +6,7 @@ import { RecentActivityCard } from "@/components/dashboard/recent-activity-card"
 
 export default function DashboardPage() {
   return (
-    <div className="relative w-full bg-background dark:bg-transparent pt-16 pb-12 animate-in fade-in duration-700 z-0">
+    <div className="relative min-h-[90vh] w-full bg-background dark:bg-transparent pt-16 pb-12 animate-in fade-in duration-700 z-0">
       {/* Background Layers */}
       <div className="absolute inset-0 -z-10 overflow-hidden">
         {/* Light Mode Wavy Refraction Background (Properly visible at the top) */}

app/layout.tsx

@@ -126,7 +126,11 @@ export default function RootLayout({
             Skip to content
           </a>
           <Navbar />
-          <main id="main-content" className="flex-1" tabIndex={-1}>
+          <main
+            id="main-content"
+            className="flex flex-col flex-1"
+            tabIndex={-1}
+          >
             {children}
           </main>
           <Footer />

components/auth/auth-input.tsx

@@ -8,6 +8,7 @@ interface AuthInputProps {
   required?: boolean;
   hint?: ReactNode;
   rightElement?: ReactNode;
+  suggestions?: string[];
 }
 
 export function AuthInput({
@@ -18,6 +19,7 @@ export function AuthInput({
   required = true,
   hint,
   rightElement,
+  suggestions,
 }: AuthInputProps) {
   return (
     <div className="flex flex-col gap-1.5">
@@ -31,9 +33,17 @@ export function AuthInput({
         id={id}
         type={type}
         placeholder={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"
+        className="w-full rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] px-4 py-3.5 text-sm transition-all focus:border-blue-500 focus:bg-white dark:focus:bg-white/[0.05] focus:outline-none focus:ring-4 focus:ring-blue-500/10 placeholder:text-zinc-400 dark:placeholder:text-white/30"
         required={required}
+        list={suggestions ? `${id}-suggestions` : undefined}
       />
+      {suggestions && (
+        <datalist id={`${id}-suggestions`}>
+          {suggestions.map((suggestion, index) => (
+            <option key={index} value={suggestion} />
+          ))}
+        </datalist>
+      )}
       {hint && <p className="text-xs text-muted-foreground mt-1">{hint}</p>}
     </div>
   );

components/auth/oauth-button.tsx

@@ -2,7 +2,7 @@ export function OAuthButton() {
   return (
     <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"
+      className="flex w-full items-center justify-center gap-3 rounded-full border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] px-4 py-3 text-[15px] font-semibold text-foreground transition-all hover:bg-zinc-100 dark:hover:bg-white/[0.08] focus:outline-none focus:ring-4 focus:ring-zinc-500/10"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"