diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 8e0c3a9..d605a2e 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,9 +1,12 @@
-import Footer from "../components/sections/Footer";
-
+// src/app/layout.tsx : UI Layout, global context providers, and one off global components
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
+import { AuthProvider } from "@/providers/AuthProvider";
+import { AuthDialogProvider } from "@/providers/AuthDialogProvider";
+import AuthModal from "@/components/AuthModal";
+import Footer from "@/components/sections/Footer";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -12,19 +15,26 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: "AI Agents Directory",
-  description: "Discover the best AI agents for your use case based on verified user reviews. Updated daily.",
+  description:
+    "Discover the best AI agents for your use case based on verified user reviews. Updated daily.",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en">
       <body className={`${inter.variable} antialiased`}>
-        {children}
-        <Footer/>
+        {/* Providers are mounted ONCE here and wrap the whole app */}
+        <AuthProvider>
+          <AuthDialogProvider>
+            {/* Your entire app can now use useAuth() and useAuthDialog() */}
+            {children}
+            {/* One global login modal instance controlled by useAuthDialog() */}
+            <AuthModal />
+            <Footer />
+          </AuthDialogProvider>
+        </AuthProvider>
       </body>
     </html>
   );
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 712df1b..de573fd 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -40,4 +40,4 @@ export default function HomePage() {
     </>
   );
 }
-// force redeploy
+
diff --git a/frontend/components/AuthModal.tsx b/frontend/components/AuthModal.tsx
new file mode 100644
index 0000000..35f7df9
--- /dev/null
+++ b/frontend/components/AuthModal.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useAuth } from "@/providers/AuthProvider";
+import { useAuthDialog } from "@/providers/AuthDialogProvider";
+import { X } from "lucide-react";
+
+export default function AuthModal() {
+  const { isOpen, close, resolveSignedIn } = useAuthDialog();
+  const { user, loading, signInWithGoogle } = useAuth();
+  const cardRef = useRef<HTMLDivElement | null>(null);
+
+  // ✅ Hooks always run in the same order — no early return before them.
+
+  // Auto-close once user is signed in
+  useEffect(() => {
+    if (!loading && user) {
+      resolveSignedIn();
+    }
+  }, [loading, user, resolveSignedIn]);
+
+  // Basic focus trap & escape key
+  useEffect(() => {
+    if (!isOpen) return; // ✅ condition INSIDE the effect
+    const prev = document.activeElement as HTMLElement | null;
+    cardRef.current?.focus();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      prev?.focus();
+    };
+  }, [isOpen, close]);
+
+  // Now it's safe to return early
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={close}
+      aria-modal="true"
+      role="dialog"
+    >
+      <div
+        ref={cardRef}
+        className="relative w-full max-w-md rounded-2xl bg-white p-6 shadow-xl outline-none"
+        tabIndex={-1}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close button */}
+        <button
+          onClick={close}
+          className="absolute right-3 top-3 inline-flex h-9 w-9 items-center justify-center rounded-xl border border-green-200 text-green-800 hover:bg-green-50"
+          aria-label="Close login"
+        >
+          <X className="h-5 w-5" />
+        </button>
+
+        {/* Logo + heading */}
+        <div className="mb-5">
+          <div className="mb-3 h-8 w-10 rounded-md bg-green-800" aria-hidden />
+          <h2 className="text-2xl font-semibold text-gray-900">
+            Sign in to unlock the best of AgentList.
+          </h2>
+        </div>
+
+        {/* Buttons */}
+        <div className="space-y-3">
+          <button
+            onClick={signInWithGoogle}
+            className="flex w-full items-center justify-center gap-3 rounded-full border-2 border-green-800 px-5 py-3 text-sm font-medium text-green-900 hover:bg-green-50"
+          >
+            <span className="h-5 w-5 rounded-sm bg-white shadow" aria-hidden />
+            Continue with Google
+          </button>
+
+          <button
+            disabled
+            className="flex w-full cursor-not-allowed items-center justify-center gap-3 rounded-full border-2 border-green-200 px-5 py-3 text-sm font-medium text-gray-500"
+            title="Coming soon"
+          >
+            <span className="h-5 w-5 rounded-sm bg-white shadow" aria-hidden />
+            Continue with email
+          </button>
+        </div>
+
+        {/* Legal */}
+        <p className="mt-6 text-center text-xs text-gray-500">
+          By proceeding, you agree to our Terms and confirm you’ve read our Privacy Policy.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/sections/Navbar.tsx b/frontend/components/sections/Navbar.tsx
index 28f6b64..716319f 100644
--- a/frontend/components/sections/Navbar.tsx
+++ b/frontend/components/sections/Navbar.tsx
@@ -1,12 +1,20 @@
-// components/Navbar.jsx
-import { Globe } from 'lucide-react'; // or swap with another icon if preferred
+// components/Navbar.tsx 
+
+// ✅ Requires: useAuth (AuthProvider) + useAuthDialog (AuthDialogProvider) mounted in app/layout
+"use client";
+
+import Link from "next/link";
+import { Globe } from "lucide-react";
+import { useAuth } from "@/providers/AuthProvider";
+import { useAuthDialog } from "@/providers/AuthDialogProvider";
 
 export const Navbar = () => {
+  const { user, logout } = useAuth();
+  const { open } = useAuthDialog();
+
   return (
     <header className="w-full bg-white py-4">
-      {/* CONTENT WRAPPER: centers all navbar content and limits max width */}
       <div className="max-w-7xl mx-auto px-8 flex justify-between items-center text-green-900 font-medium">
-        
         {/* LEFT: Logo + Brand Name */}
         <div className="flex items-center gap-2">
           <img src="/logo.png" alt="logo" className="w-12 h-12 object-contain" />
@@ -15,32 +23,55 @@ export const Navbar = () => {
 
         {/* CENTER: Nav Links */}
         <nav className="hidden md:flex gap-6 text-sm">
-          <a href="/Newsletter" className="font-semibold hover:text-green-700">Newsletter</a>
-          <a href="/AgentRequest" className="font-semibold hover:text-green-700"> Request</a>
-          <a href="/AgentSubmission" className="font-semibold hover:text-green-700"> Submit</a>
-          <a href="/About" className="font-semibold hover:text-green-700">About</a>
+          <Link href="/Newsletter" className="font-semibold hover:text-green-700">Newsletter</Link>
+          <Link href="/AgentRequest" className="font-semibold hover:text-green-700">Request</Link>
+          <Link href="/AgentSubmission" className="font-semibold hover:text-green-700">Submit</Link>
+          <Link href="/About" className="font-semibold hover:text-green-700">About</Link>
         </nav>
 
-        {/* RIGHT: Currency + Auth Buttons */}
+        {/* RIGHT: Currency + Auth */}
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2 pr-4 border-r border-gray-300 text-sm">
             <Globe className="w-4 h-4" />
             <span>USD</span>
           </div>
-          <a
-            href="/SignUp"
-            className="bg-green-900 text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-green-800 transition"
-          >
-            Sign Up
-          </a>
-          <a
-            href="/login"
-            className="bg-green-900 text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-green-800 transition"
-          >
-            Log In
-          </a>
-        </div>
 
+          {!user ? (
+            <>
+              {/* both open the same auth modal */}
+              <button
+                onClick={() => open()}
+                className="bg-green-900 text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-green-800 transition"
+              >
+                Sign Up
+              </button>
+              <button
+                onClick={() => open()}
+                className="bg-green-900 text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-green-800 transition"
+              >
+                Log In
+              </button>
+            </>
+          ) : (
+            <div className="flex items-center gap-3">
+              {/* tiny user chip */}
+              <div className="flex items-center gap-2 px-3 py-1 rounded-full border border-green-200">
+                <div className="h-6 w-6 rounded-full bg-green-900 text-white grid place-items-center text-xs">
+                  {(user.displayName?.[0] || user.email?.[0] || "U").toUpperCase()}
+                </div>
+                <span className="hidden sm:inline text-sm">
+                  {user.displayName || user.email}
+                </span>
+              </div>
+              <button
+                onClick={async () => { await logout(); }}
+                className="px-5 py-2 rounded-full text-sm font-semibold border border-green-900 text-green-900 hover:bg-green-50 transition"
+              >
+                Logout
+              </button>
+            </div>
+          )}
+        </div>
       </div>
     </header>
   );
diff --git a/frontend/firebase.ts b/frontend/firebase.ts
index 254312f..fc8bfd8 100644
--- a/frontend/firebase.ts
+++ b/frontend/firebase.ts
@@ -1,18 +1,21 @@
-import { initializeApp } from "firebase/app";
+// firebase.ts
+import { initializeApp, getApps, getApp } from "firebase/app";
 import { getFirestore } from "firebase/firestore";
+import { getAuth } from "firebase/auth";
 
 const firebaseConfig = {
-  apiKey: "AIzaSyAHSh4dbIWUx2zF_becF2RcyxNKpeDMt6M",
-  authDomain: "agentlist-22c4d.firebaseapp.com",
-  databaseURL: "https://agentlist-22c4d-default-rtdb.firebaseio.com",
-  projectId: "agentlist-22c4d",
-  storageBucket: "agentlist-22c4d.firebasestorage.app",
-  messagingSenderId: "412385337270",
-  appId: "1:412385337270:web:238d2411ebb0cb7c2eab17",
-  measurementId: "G-WXWSDHNPVH"
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN!,
+  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL!,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET!,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID!,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID!,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID!,
 };
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-const db = getFirestore(app);
 
-export { db, firebaseConfig };
+const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
+
+export const db = getFirestore(app);
+export const auth = getAuth(app);
+export default app;
diff --git a/frontend/lib/getAgents.ts b/frontend/lib/getAgents.ts
index c449267..e8d3119 100644
--- a/frontend/lib/getAgents.ts
+++ b/frontend/lib/getAgents.ts
@@ -1,31 +1,29 @@
-import { collection, getDocs, getFirestore } from "firebase/firestore";
-import { initializeApp, getApps } from "firebase/app";
+// lib/getAgents.ts
+import { collection, getDocs, Timestamp } from "firebase/firestore";
+import { db } from "@/firebase"; // or "../firebase" if you don't use "@/"
 
-import { firebaseConfig } from "../firebase"; // Adjust the import path as necessary
-
-
-
-if (!getApps().length) {
-  initializeApp(firebaseConfig);
-}
+export async function getAgents() {
+  const snap = await getDocs(collection(db, "agents"));
+  return snap.docs.map((doc) => {
+    const data = doc.data() as any;
 
-const db = getFirestore();
+    // Handle Firestore Timestamp or ISO/date string
+    let isoDate = "";
+    if (data.datePublished instanceof Timestamp) {
+      isoDate = data.datePublished.toDate().toISOString().split("T")[0];
+    } else if (typeof data.datePublished === "string" || typeof data.datePublished === "number") {
+      isoDate = new Date(data.datePublished).toISOString().split("T")[0];
+    }
 
-export async function getAgents() {
-  const querySnapshot = await getDocs(collection(db, "agents"));
-  return querySnapshot.docs.map((doc) => {
-    const data = doc.data();
     return {
       id: doc.id,
       name: data.name ?? "",
       category: data.category ?? "",
-      datePublished: data.datePublished?.seconds
-        ? new Date(data.datePublished.seconds * 1000).toISOString().split("T")[0]
-        : new Date(data.datePublished).toISOString().split("T")[0],
+      datePublished: isoDate,
       publisher: data.publisher ?? "",
       upvotes: data.upvotes ?? 0,
       description: data.description ?? "",
       website: data.website ?? "",
     };
   });
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/AuthDialogProvider.tsx b/frontend/providers/AuthDialogProvider.tsx
new file mode 100644
index 0000000..bb0f40e
--- /dev/null
+++ b/frontend/providers/AuthDialogProvider.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+type OpenOpts = { onSignedIn?: () => void };
+type AuthDialogCtx = {
+  isOpen: boolean;
+  open: (opts?: OpenOpts) => void;
+  close: () => void;
+  /** Call this when sign-in succeeds; runs the stored callback (if any) and closes. */
+  resolveSignedIn: () => void;
+};
+
+const AuthDialogContext = createContext<AuthDialogCtx | null>(null);
+
+export function AuthDialogProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const onSignedInRef = useRef<(() => void) | undefined>(undefined);
+
+  const open = useCallback((opts?: OpenOpts) => {
+    onSignedInRef.current = opts?.onSignedIn;
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    onSignedInRef.current = undefined;
+  }, []);
+
+  const resolveSignedIn = useCallback(() => {
+    const cb = onSignedInRef.current;
+    onSignedInRef.current = undefined;
+    setIsOpen(false);
+    if (cb) cb();
+  }, []);
+
+  const value = useMemo(
+    () => ({ isOpen, open, close, resolveSignedIn }),
+    [isOpen, open, close, resolveSignedIn]
+  );
+
+  return (
+    <AuthDialogContext.Provider value={value}>
+      {children}
+    </AuthDialogContext.Provider>
+  );
+}
+
+export function useAuthDialog() {
+  const ctx = useContext(AuthDialogContext);
+  if (!ctx) throw new Error("useAuthDialog must be used within <AuthDialogProvider>");
+  return ctx;
+}
diff --git a/frontend/providers/AuthProvider.tsx b/frontend/providers/AuthProvider.tsx
new file mode 100644
index 0000000..e4409ed
--- /dev/null
+++ b/frontend/providers/AuthProvider.tsx
@@ -0,0 +1,71 @@
+// AuthProvider.tsx
+"use client"; 
+
+import { ReactNode, useEffect, useState, createContext, useContext } from "react";
+import { auth } from "@/firebase"; // ✅ use the exported auth
+import {
+  GoogleAuthProvider,
+  signInWithPopup,
+  onAuthStateChanged,
+  User,
+  signOut,
+} from "firebase/auth";
+
+type AuthContextType = {
+  user: User | null;
+  loading: boolean;
+  signInWithGoogle: () => Promise<void>;
+  logout: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
+      setUser(firebaseUser);
+      setLoading(false);
+    });
+    return () => unsubscribe();
+  }, []);
+
+    const signInWithGoogleHandler = async () => {
+    const provider = new GoogleAuthProvider();
+    try {
+        await signInWithPopup(auth, provider);
+    } catch (error: any) {
+        if (error.code === "auth/popup-closed-by-user") {
+        console.log("Sign-in popup closed by user. Ignoring.");
+        return; // ✅ gracefully ignore
+        }
+        console.error("Google sign-in error:", error);
+    }
+    };
+
+
+  const logoutHandler = async () => {
+    await signOut(auth);
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        loading,
+        signInWithGoogle: signInWithGoogleHandler,
+        logout: logoutHandler,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
+  return ctx;
+};
