diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 06537ff..139291c 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,22 +1,61 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useMemo, useState } from "react";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
-import { GitFork, Menu } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { GitFork, LogOut, Menu } from "lucide-react";
 import Link from "next/link";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { useRouter } from "next/router";
 
 import { useAuthRole } from "@/lib/useAuthRole";
+import { handleLogout, sanitizeRedirectPath } from "@/lib/utils";
+
+const getInitials = (value: string) => {
+    const tokens = value.trim().split(/\s+/).filter(Boolean);
+
+    if (tokens.length === 0) {
+        return "U";
+    }
+
+    if (tokens.length === 1) {
+        return tokens[0].slice(0, 2).toUpperCase();
+    }
+
+    return `${tokens[0][0]}${tokens[tokens.length - 1][0]}`.toUpperCase();
+};
 
 const Header = ({ isAdmin = false }: { isAdmin?: boolean }) => {
-    const { role } = useAuthRole();
+    const { role, user } = useAuthRole();
+    const router = useRouter();
+    const [profileOpen, setProfileOpen] = useState(false);
     const isPanelist = role?.slug === "admin" || role?.slug?.includes("panel");
+    const displayName = user?.user_metadata?.full_name ?? user?.user_metadata?.name ?? null;
+    const displayEmail = user?.email ?? null;
+    const avatarUrl =
+        user?.user_metadata?.avatar_url ??
+        user?.user_metadata?.picture ??
+        user?.user_metadata?.avatarUrl ??
+        null;
+    const fallbackInitials = useMemo(() => {
+        const baseLabel = displayName ?? displayEmail ?? "User";
+        return getInitials(baseLabel);
+    }, [displayEmail, displayName]);
 
     const handleGithubClick = () => {
         window.open("https://github.com/Robotics-PEC", "_blank");
     };
 
+    const loginHref = `/login?redirect=${encodeURIComponent(sanitizeRedirectPath(router.asPath))}`;
+
+    const handleProfileLogout = async () => {
+        setProfileOpen(false);
+        await handleLogout();
+        router.replace("/login");
+    };
+
     const navigation = [
         { name: "Home", path: "/" },
         { name: "Projects", path: "/project" },
@@ -69,9 +108,6 @@ const Header = ({ isAdmin = false }: { isAdmin?: boolean }) => {
                                         <Link href="/" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
                                             View Website
                                         </Link>
-                                        <Link href="/" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
-                                            Logout
-                                        </Link>
                                     </>
                                 )
                             }
@@ -79,7 +115,64 @@ const Header = ({ isAdmin = false }: { isAdmin?: boolean }) => {
                     </div>
 
                     {/* Buttons and Mobile Menu */}
-                    <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-2 sm:gap-4">
+                        {!user ? (
+                            <Button asChild variant="outline" className="border-border bg-background/80 hover:bg-accent">
+                                <Link href={loginHref}>Login</Link>
+                            </Button>
+                        ) : (
+                            <Popover open={profileOpen} onOpenChange={setProfileOpen}>
+                                <PopoverTrigger asChild>
+                                    <button
+                                        type="button"
+                                        aria-label="Open profile menu"
+                                        className="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border border-border bg-background shadow-sm ring-offset-background transition hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                    >
+                                        <Avatar className="h-10 w-10">
+                                            <AvatarImage src={avatarUrl ?? undefined} alt={displayName ?? displayEmail ?? "User profile"} />
+                                            <AvatarFallback className="bg-slate-900 text-xs font-semibold text-white">
+                                                {fallbackInitials}
+                                            </AvatarFallback>
+                                        </Avatar>
+                                    </button>
+                                </PopoverTrigger>
+                                <PopoverContent align="end" sideOffset={12} className="w-72 rounded-2xl border border-border/60 bg-background p-3 shadow-xl">
+                                    <div className="space-y-3">
+                                        <div className="flex items-center gap-3 rounded-xl bg-muted/40 px-3 py-3">
+                                            <Avatar className="h-11 w-11">
+                                                <AvatarImage src={avatarUrl ?? undefined} alt={displayName ?? displayEmail ?? "User profile"} />
+                                                <AvatarFallback className="bg-slate-900 text-xs font-semibold text-white">
+                                                    {fallbackInitials}
+                                                </AvatarFallback>
+                                            </Avatar>
+                                            <div className="min-w-0 space-y-0.5">
+                                                {displayName && (
+                                                    <p className="truncate text-sm font-semibold text-foreground">
+                                                        {displayName}
+                                                    </p>
+                                                )}
+                                                {displayEmail && (
+                                                    <p className="truncate text-xs text-muted-foreground">
+                                                        {displayEmail}
+                                                    </p>
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        <Button
+                                            type="button"
+                                            variant="outline"
+                                            className="w-full justify-start gap-2 border-destructive/20 bg-destructive/5 text-destructive hover:bg-destructive hover:text-destructive-foreground"
+                                            onClick={handleProfileLogout}
+                                        >
+                                            <LogOut className="h-4 w-4" />
+                                            Logout
+                                        </Button>
+                                    </div>
+                                </PopoverContent>
+                            </Popover>
+                        )}
+
                         <Button
                             variant="outline"
                             onClick={handleGithubClick}
diff --git a/src/lib/supabase/actions/auth.actions.ts b/src/lib/supabase/actions/auth.actions.ts
index 8ba949d..7c0e236 100644
--- a/src/lib/supabase/actions/auth.actions.ts
+++ b/src/lib/supabase/actions/auth.actions.ts
@@ -1,6 +1,7 @@
 import { toast } from "@/components/ui/use-toast";
 import { client } from "../supabase";
 import crypto from "crypto";
+import { sanitizeRedirectPath } from "@/lib/utils";
 
 export const loginUser = async (email: string, password: string) => {
 
@@ -33,11 +34,12 @@ export const loginUser = async (email: string, password: string) => {
 
 }
 
-export const loginWithGoogle = async () => {
+export const loginWithGoogle = async (redirectPath = "/") => {
+  const safeRedirectPath = sanitizeRedirectPath(redirectPath);
   const { data, error } = await client.auth.signInWithOAuth({
     provider: "google",
     options: {
-      redirectTo: `${window.location.origin}/login/callback`,
+      redirectTo: `${window.location.origin}/login/callback?redirect=${encodeURIComponent(safeRedirectPath)}`,
       queryParams: {
         hd: "pec.edu.in",
       },
diff --git a/src/lib/useAuthRole.ts b/src/lib/useAuthRole.ts
index cee9db9..0c0e92f 100644
--- a/src/lib/useAuthRole.ts
+++ b/src/lib/useAuthRole.ts
@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useState } from "react";
+import type { User } from "@supabase/supabase-js";
 import { fetchMyRole, isAllowed, type Role } from "./roles";
 import { client } from "./supabase/supabase";
 
 export type AuthRoleState = {
   loading: boolean;
   userId: string | null;
+  user: User | null;
   role: Role | null;
   routes: string[];
   isAdmin: boolean;
@@ -19,6 +21,7 @@ export type AuthRoleState = {
 export function useAuthRole(): AuthRoleState {
   const [loading, setLoading] = useState(true);
   const [userId, setUserId] = useState<string | null>(null);
+  const [user, setUser] = useState<User | null>(null);
   const [role, setRole] = useState<Role | null>(null);
   const [routes, setRoutes] = useState<string[]>([]);
 
@@ -26,6 +29,7 @@ export function useAuthRole(): AuthRoleState {
     setLoading(true);
     try {
       const { data } = await client.auth.getUser();
+      setUser(data.user ?? null);
       setUserId(data.user?.id ?? null);
       if (!data.user) {
         setRole(null);  
@@ -53,6 +57,7 @@ export function useAuthRole(): AuthRoleState {
   return {
     loading,
     userId,
+    user,
     role,
     routes,
     isAdmin: role?.slug === "admin",
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 756a3f6..62b2f05 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -43,7 +43,20 @@ export const markdownToHTML = async (markdown: string) => {
 
 export const handleLogout = async () => {
     await client.auth.signOut();
-    localStorage.clear();
+};
+
+export const sanitizeRedirectPath = (value?: string | null) => {
+    if (!value || !value.startsWith("/") || value.startsWith("//")) {
+        return "/";
+    }
+
+    const pathname = value.split("?")[0].split("#")[0];
+
+    if (pathname === "/login" || pathname === "/login/callback") {
+        return "/";
+    }
+
+    return value;
 };
 
 export const base64ToBlob = (base64Data: string, contentType = 'image/png') => {
diff --git a/src/pages/admin/page.tsx b/src/pages/admin/page.tsx
index ce7452b..e62dae4 100644
--- a/src/pages/admin/page.tsx
+++ b/src/pages/admin/page.tsx
@@ -3,9 +3,11 @@ import PageHead from '@/components/layout/PageHead';
 import NotFound from '@/pages/404';
 import { client } from '@/lib/supabase/supabase';
 import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router';
 
 const AdminPage = () => {
     const [validUser, setValidUser] = useState(false);
+    const router = useRouter();
 
     useEffect(() => {
         const checkSession = async () => {
@@ -17,13 +19,18 @@ const AdminPage = () => {
             }
             return;
         }
-        client.auth.onAuthStateChange((event, session) => {
+        const { data: subscription } = client.auth.onAuthStateChange((event, session) => {
             if (event === "SIGNED_OUT") {
-                localStorage.clear();
+                setValidUser(false);
+                router.replace("/login");
             }
-        })
+        });
         checkSession();
-    }, []);
+
+        return () => {
+            subscription.subscription.unsubscribe();
+        };
+    }, [router]);
 
     return (
         <>
diff --git a/src/pages/login/callback.tsx b/src/pages/login/callback.tsx
index 0c49233..a75dae3 100644
--- a/src/pages/login/callback.tsx
+++ b/src/pages/login/callback.tsx
@@ -1,14 +1,30 @@
 import { useEffect } from "react";
+import { useMemo } from "react";
 import { useRouter } from "next/router";
 import { client } from "@/lib/supabase/supabase";
 import { toast } from "@/components/ui/use-toast";
+import { sanitizeRedirectPath } from "@/lib/utils";
 
 const PEC_DOMAIN = "@pec.edu.in"; // ← replace with your actual college domain
 
 export default function AuthCallback() {
     const router = useRouter();
 
+    const redirectTarget = useMemo(() => {
+        if (!router.isReady) {
+            return "/";
+        }
+
+        const query = router.asPath.split("?")[1] ?? "";
+        const redirectValue = new URLSearchParams(query).get("redirect");
+        return sanitizeRedirectPath(redirectValue);
+    }, [router.asPath, router.isReady]);
+
     useEffect(() => {
+        if (!router.isReady) {
+            return;
+        }
+
         const { data: listener } = client.auth.onAuthStateChange(async (event, session) => {
 
             if (!session) {
@@ -36,13 +52,13 @@ export default function AuthCallback() {
                 return;
             }
 
-            router.replace("/");
+            router.replace(redirectTarget);
         });
 
         return () => {
             listener.subscription.unsubscribe();
         };
-    }, [router]);
+    }, [redirectTarget, router]);
 
     return <p>Signing you in...</p>;
 }
\ No newline at end of file
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index b3eb44a..b0f294f 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -1,80 +1,197 @@
 "use client";
 
 import type { NextPage } from "next";
+import Image from "next/image";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useMemo, useState } from "react";
 import { loginWithGoogle } from "@/lib/supabase/actions/auth.actions";
+import { getImagesFromFolder } from "@/lib/supabase/actions/storage.actions";
+import { client } from "@/lib/supabase/supabase";
+import { useRouter } from "next/router";
+import { sanitizeRedirectPath } from "@/lib/utils";
 
 const Login: NextPage = () => {
+  const [heroImages, setHeroImages] = useState<string[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [checkingSession, setCheckingSession] = useState(true);
+  const router = useRouter();
+
+  const redirectTarget = useMemo(() => {
+    if (!router.isReady) {
+      return "/";
+    }
+
+    const query = router.asPath.split("?")[1] ?? "";
+    const redirectValue = new URLSearchParams(query).get("redirect");
+    return sanitizeRedirectPath(redirectValue);
+  }, [router.asPath, router.isReady]);
+
+  useEffect(() => {
+    const loadImages = async () => {
+      const images = await getImagesFromFolder("hero");
+      setHeroImages(images);
+    };
+
+    loadImages();
+  }, []);
+
+  useEffect(() => {
+    if (!router.isReady) {
+      return;
+    }
+
+    const checkSession = async () => {
+      const { data: { session } } = await client.auth.getSession();
+
+      if (session) {
+        router.replace(redirectTarget);
+        return;
+      }
+
+      setCheckingSession(false);
+    };
+
+    void checkSession();
+  }, [redirectTarget, router]);
+
+  useEffect(() => {
+    if (heroImages.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((previousIndex) => (previousIndex + 1) % heroImages.length);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [heroImages]);
+
+  const currentImage = heroImages[currentIndex];
+
+  if (checkingSession) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-white">
+        <div className="h-10 w-10 animate-spin rounded-full border-2 border-slate-200 border-t-slate-900" />
+      </div>
+    );
+  }
+
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
-      <div className="w-full max-w-md">
-
-        {/* Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">
-            Welcome back
-          </h1>
-
-          <p className="mt-2 text-sm text-gray-500">
-            Sign in to continue to your account
-          </p>
-        </div>
+    <div className="relative min-h-screen overflow-hidden bg-white px-4 py-10 sm:px-6 lg:px-8">
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-20 top-10 h-72 w-72 rounded-full bg-slate-200/50 blur-3xl" />
+        <div className="absolute bottom-0 right-[-6rem] h-96 w-96 rounded-full bg-slate-100 blur-3xl" />
+      </div>
+
+      <div className="relative mx-auto flex min-h-[calc(100vh-5rem)] max-w-6xl items-center justify-center">
+        <div className="grid w-full overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-[0_25px_80px_rgba(15,23,42,0.08)] lg:grid-cols-2">
+          <div className="flex flex-col justify-center px-6 py-10 sm:px-10 lg:px-12 lg:py-14">
+            <div className="mb-6 inline-flex w-fit items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-600 shadow-sm">
+              PEC Robotics
+            </div>
+
+            <div className="max-w-xl space-y-4">
+              <h1 className="text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl lg:text-5xl">
+                Welcome to Robotics Society
+              </h1>
+
+              <p className="max-w-lg text-sm leading-6 text-slate-600 sm:text-base">
+                Sign in to verify your account.
+              </p>
+            </div>
+
+            <div className="mt-10 max-w-md space-y-5">
+              <button
+                type="button"
+                onClick={() => void loginWithGoogle(redirectTarget)}
+                className="group flex w-full items-center justify-center gap-3 rounded-2xl border border-slate-200 bg-slate-950 px-5 py-4 text-sm font-semibold text-white shadow-lg shadow-slate-950/10 transition duration-300 hover:-translate-y-0.5 hover:bg-slate-900 hover:shadow-xl hover:shadow-slate-950/20 active:translate-y-0"
+              >
+                <span className="flex h-9 w-9 items-center justify-center rounded-full bg-white/10 ring-1 ring-white/15 transition group-hover:scale-105">
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M21.35 12.23c0-.79-.07-1.55-.22-2.28H12v4.31h5.24a4.48 4.48 0 0 1-1.94 2.94v2.45h3.14c1.84-1.69 2.91-4.18 2.91-7.42Z"
+                      fill="#4285F4"
+                    />
+                    <path
+                      d="M12 21.5c2.63 0 4.84-.87 6.45-2.35l-3.14-2.45c-.87.58-1.98.93-3.31.93-2.54 0-4.69-1.72-5.46-4.03H3.3v2.53A9.74 9.74 0 0 0 12 21.5Z"
+                      fill="#34A853"
+                    />
+                    <path
+                      d="M6.54 13.6a5.86 5.86 0 0 1 0-3.75V7.32H3.3a9.75 9.75 0 0 0 0 8.81l3.24-2.53Z"
+                      fill="#FBBC05"
+                    />
+                    <path
+                      d="M12 5.82c1.43 0 2.72.49 3.73 1.45l2.8-2.8C16.84 2.91 14.63 2.5 12 2.5a9.74 9.74 0 0 0-8.7 5.82l3.24 2.53C7.31 7.54 9.46 5.82 12 5.82Z"
+                      fill="#EA4335"
+                    />
+                  </svg>
+                </span>
+                Continue with Google
+              </button>
+
+              <p className="text-xs leading-5 text-slate-400">
+                By continuing, you agree to our{" "}
+                <a href="#" className="font-medium text-slate-600 transition hover:text-slate-950 hover:underline">
+                  Terms of Service
+                </a>{" "}
+                and{" "}
+                <a href="#" className="font-medium text-slate-600 transition hover:text-slate-950 hover:underline">
+                  Privacy Policy
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+
+          <div className="relative min-h-[24rem] overflow-hidden bg-white lg:min-h-full">
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,23,42,0.05),_transparent_36%),linear-gradient(180deg,_rgba(255,255,255,0.9),_rgba(248,250,252,0.95))]" />
+            <div className="absolute inset-0 p-4 sm:p-6 lg:p-8">
+              <div className="relative h-full overflow-hidden rounded-[1.75rem] border border-slate-200 bg-slate-100 p-3 shadow-[0_20px_45px_rgba(15,23,42,0.08)]">
+                <AnimatePresence mode="wait">
+                  {currentImage ? (
+                    <motion.div
+                      key={currentImage}
+                      initial={{ opacity: 0, scale: 1.02 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.98 }}
+                      transition={{ duration: 1.2, ease: "easeInOut" }}
+                      className="relative h-full overflow-hidden rounded-[1.5rem]"
+                    >
+                      <Image
+                        src={currentImage}
+                        alt="Robotics society gallery image"
+                        fill
+                        sizes="(min-width: 1024px) 50vw, 100vw"
+                        className="object-cover object-center"
+                      />
+                      <div className="absolute inset-0 bg-gradient-to-t from-slate-950/55 via-slate-950/10 to-transparent" />
 
-        {/* Login Card */}
-        <div className="bg-white border border-gray-200 rounded-2xl shadow-sm p-8">
-          <button
-            type="button"
-            onClick={loginWithGoogle}
-            className="w-full flex items-center justify-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-semibold text-gray-700 transition hover:bg-gray-50 active:scale-[0.99]"
-          >
-            {/* Google Icon */}
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M21.35 12.23c0-.79-.07-1.55-.22-2.28H12v4.31h5.24a4.48 4.48 0 0 1-1.94 2.94v2.45h3.14c1.84-1.69 2.91-4.18 2.91-7.42Z"
-                fill="#4285F4"
-              />
-
-              <path
-                d="M12 21.5c2.63 0 4.84-.87 6.45-2.35l-3.14-2.45c-.87.58-1.98.93-3.31.93-2.54 0-4.69-1.72-5.46-4.03H3.3v2.53A9.74 9.74 0 0 0 12 21.5Z"
-                fill="#34A853"
-              />
-
-              <path
-                d="M6.54 13.6a5.86 5.86 0 0 1 0-3.75V7.32H3.3a9.75 9.75 0 0 0 0 8.81l3.24-2.53Z"
-                fill="#FBBC05"
-              />
-
-              <path
-                d="M12 5.82c1.43 0 2.72.49 3.73 1.45l2.8-2.8C16.84 2.91 14.63 2.5 12 2.5a9.74 9.74 0 0 0-8.7 5.82l3.24 2.53C7.31 7.54 9.46 5.82 12 5.82Z"
-                fill="#EA4335"
-              />
-            </svg>
-
-            Continue with Google
-          </button>
-
-          <p className="mt-6 text-center text-xs text-gray-400">
-            By continuing, you agree to our{" "}
-            <a
-              href="#"
-              className="text-gray-600 hover:underline"
-            >
-              Terms of Service
-            </a>{" "}
-            and{" "}
-            <a
-              href="#"
-              className="text-gray-600 hover:underline"
-            >
-              Privacy Policy
-            </a>
-            .
-          </p>
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      key="placeholder"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      className="flex h-full items-center justify-center rounded-[1.5rem] bg-gradient-to-br from-slate-100 to-slate-200"
+                    >
+                      <div className="grid w-full max-w-md gap-4 sm:grid-cols-[1.2fr_0.8fr]">
+                        <div className="h-72 rounded-[1.5rem] bg-gradient-to-br from-slate-300/60 via-slate-200 to-white" />
+                        <div className="grid gap-4">
+                          <div className="h-32 rounded-[1.25rem] bg-white" />
+                          <div className="h-32 rounded-[1.25rem] bg-slate-200" />
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>