diff --git a/package-lock.json b/package-lock.json
index b064630..73a6db0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "firebase": "^10.12.2",
+        "firebaseui": "^6.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",
@@ -8782,6 +8783,12 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/dialog-polyfill": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/dialog-polyfill/-/dialog-polyfill-0.4.10.tgz",
+      "integrity": "sha512-j5yGMkP8T00UFgyO+78OxiN5vC5dzRQF3BEio+LhNvDbyfxWBsi3sfPArDm54VloaJwy2hm3erEiDWqHRC8rzw==",
+      "license": "BSD"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -10463,6 +10470,19 @@
         }
       }
     },
+    "node_modules/firebaseui": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/firebaseui/-/firebaseui-6.1.0.tgz",
+      "integrity": "sha512-5WiVYVxPGMANuZKxg6KLyU1tyqIsbqf/59Zm4HrdFYwPtM5lxxB0THvgaIk4ix+hCgF0qmY89sKiktcifKzGIA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dialog-polyfill": "^0.4.7",
+        "material-design-lite": "^1.2.0"
+      },
+      "peerDependencies": {
+        "firebase": "^9.1.3 || ^10.0.0"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -14847,6 +14867,15 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/material-design-lite": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/material-design-lite/-/material-design-lite-1.3.0.tgz",
+      "integrity": "sha512-ao76b0bqSTKcEMt7Pui+J/S3eVF0b3GWfuKUwfe2lP5DKlLZOwBq37e0/bXEzxrw7/SuHAuYAdoCwY6mAYhrsg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
diff --git a/package.json b/package.json
index da299fa..c571fc7 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "firebase": "^10.12.2",
+    "firebaseui": "^6.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
diff --git a/src/App.jsx b/src/App.jsx
index 6aaaf47..325c48a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import RestaurantPage from './Pages/RestaurantPage';
 import FavoritesPage from './Pages/FavoritesPage';
 import LoginPage from './Pages/LoginPage';
 import { FavoriteProvider } from './Contexts/FavoriteDishes';
+import { AuthProvider } from './Contexts/Auth';
 
 
 function App() {
@@ -13,14 +14,16 @@ function App() {
   console.log(process.env.REACT_APP_FB_API);
   return (
     <Router>
-      <FavoriteProvider>
-        <Routes>
-            <Route path="/" element={<HomePage/>}/>
-            <Route path="/login" element={<LoginPage/>}/>
-            <Route path="/restaurant/:id" element={<RestaurantPage/>}/>
-            <Route path="/favourites" element={<FavoritesPage/>}/>
-        </Routes>
-      </FavoriteProvider>
+      <AuthProvider>
+        <FavoriteProvider>
+          <Routes>
+              <Route path="/" element={<HomePage/>}/>
+              <Route path="/login" element={<LoginPage/>}/>
+              <Route path="/restaurant/:id" element={<RestaurantPage/>}/>
+              <Route path="/favourites" element={<FavoritesPage/>}/>
+          </Routes>
+        </FavoriteProvider>
+      </AuthProvider>
     </Router>
   );
 }
diff --git a/src/Components/Auth.jsx b/src/Components/Auth.jsx
index 54fb453..f4249ff 100644
--- a/src/Components/Auth.jsx
+++ b/src/Components/Auth.jsx
@@ -1,39 +1,59 @@
 import React, { useState } from 'react'
 import { auth, googleProvider } from '../config/firebase'
-import { createUserWithEmailAndPassword, signInWithPopup, signOut } from 'firebase/auth'
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signInWithPopup, signOut } from 'firebase/auth'
+import { useAuth } from '../Contexts/Auth'
+import { Link } from 'react-router-dom';
 
 function Auth() {
+    const { currentUser, userLoggedIn } = useAuth()
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
+    const [isSigningIn, setIsSigningIn] = useState(false)
 
     console.log(auth?.currentUser?.email)
-    const signIn = async () =>{
-        try{
-        await createUserWithEmailAndPassword(auth, email, password)} catch(err){
-            console.error(err)
-        }
-    }
+    // const signUp = async () =>{
+    //     try{
+    //     await createUserWithEmailAndPassword(auth, email, password)} catch(err){
+    //         console.error(err)
+    //     }
+    // }
+    // const signIn = async () =>{
+    //     if (!isSigningIn)
+    //     try{
+    //         setIsSigningIn(true)
+    //     await signInWithEmailAndPassword(auth, email, password)} catch(err){
+    //         console.error(err)
+    //     }
+    // }
+
     const signInWithGoogle = async () =>{
+        if (!isSigningIn)
         try{
         await signInWithPopup(auth, googleProvider)} catch(err){
             console.error(err)
         }
     }
+
     const logout = async () =>{
         try{
         await signOut(auth)} catch(err){
             console.error(err)
         }
     } 
-  return (
+
+return (
     <div>
         {/* <input type="text" placeholder='Email' onChange={(e)=> setEmail(e.target.value)}/>
         <input type="text" placeholder='Password'onChange={(e)=> setPassword(e.target.value)} type="password"/>
+        <button onClick={signUp}>Sign up</button>
+        <input type="text" placeholder='Email' onChange={(e)=> setEmail(e.target.value)}/>
+        <input type="text" placeholder='Password'onChange={(e)=> setPassword(e.target.value)} type="password"/>
         <button onClick={signIn}>Sign in</button> */}
         <button onClick={signInWithGoogle}>Sign in with Google</button>
-        <button onClick={logout}>Log out</button>
+        <button onClick={()=>{logout(). then(()=> <Link to="/"/>)}}>Log out</button>
+        <h4>Logged in as: {auth?.currentUser?.displayName}</h4>
     </div>
-  )
+)
 }
 
 export default Auth
\ No newline at end of file
diff --git a/src/Components/HighlightedDish.jsx b/src/Components/HighlightedDish.jsx
index 3c87055..69d5de1 100644
--- a/src/Components/HighlightedDish.jsx
+++ b/src/Components/HighlightedDish.jsx
@@ -93,4 +93,19 @@ function HighlightedDish() {
 
 export default HighlightedDish
 
-// container center grid 
\ No newline at end of file
+// container center grid 
+
+    // const signUp = async () =>{
+    //     try{
+    //     await createUserWithEmailAndPassword(auth, email, password)} catch(err){
+    //         console.error(err)
+    //     }
+    // }
+    // const signIn = async () =>{
+    //     if (!isSigningIn)
+    //     try{
+    //         setIsSigningIn(true)
+    //     await signInWithEmailAndPassword(auth, email, password)} catch(err){
+    //         console.error(err)
+    //     }
+    // }
\ No newline at end of file
diff --git a/src/Contexts/Auth.jsx b/src/Contexts/Auth.jsx
index c7fb98a..6f6c508 100644
--- a/src/Contexts/Auth.jsx
+++ b/src/Contexts/Auth.jsx
@@ -1,12 +1,45 @@
-// import { useState } from "react";
-// import a
+import { useContext, useEffect, useState} from "react";
+import { auth } from "../config/firebase";
+import { onAuthStateChanged } from "firebase/auth";
+import { createContext } from "react";
+import React from "react";
 
-// const AuthContext = React.createContext();
 
-// export function AuthProvider({ children }){
-//     const [currentUser, setCurrentUser] = useState(null);
-//     const [userLoggedIn, setUserLoggedIn] = useState(false);
-//     const [loading, setLoading] = useState(true);
+const AuthContext = React.createContext();
 
+export function useAuth(){
+    return useContext(AuthContext)
+}
 
-// }
\ No newline at end of file
+export function AuthProvider({ children }){
+    const [currentUser, setCurrentUser] = useState(null);
+    const [userLoggedIn, setUserLoggedIn] = useState(false);
+    const [loading, setLoading] = useState(true);
+    
+    useEffect(()=>{
+        const unsubscribe = onAuthStateChanged(auth, initializeUser);
+        return unsubscribe
+    }, [])
+    
+    async function initializeUser(user){
+        if (user) {
+            setCurrentUser({...user});
+            setUserLoggedIn(true)
+        } else {
+            setCurrentUser(null);
+            setUserLoggedIn(false)
+        }
+        setLoading(false)
+    }
+
+    const value = {
+        currentUser,
+        userLoggedIn,
+        loading
+    }
+    return(
+        <AuthContext.Provider value={value}>
+            {!loading && children}
+        </AuthContext.Provider>
+    )
+    }
\ No newline at end of file
diff --git a/src/Pages/LoginPage.jsx b/src/Pages/LoginPage.jsx
index 8235cfa..19e2b4f 100644
--- a/src/Pages/LoginPage.jsx
+++ b/src/Pages/LoginPage.jsx
@@ -1,17 +1,16 @@
 import React, { useEffect, useState } from 'react'
 import Auth from '../Components/Auth'
-import NavBar from '../Components/NavBar'
-import Header from '../Components/Header'
 import { db } from '../config/firebase'
 import { getDocs , collection, addDoc} from 'firebase/firestore'
 import AppLayout from '../Components/AppLayout'
 import firebase from 'firebase/compat/app'
 import { serverTimestamp } from 'firebase/firestore'
 
+
 function LoginPage() {
 
-    const [foodList, setFoodList] =useState([])
-    const menuItemCollectionRef = collection(db, "menu-items")
+    // const [foodList, setFoodList] =useState([])
+    // const menuItemCollectionRef = collection(db, "menu-items")
     // useEffect(()=>{
     //     const getfoodList = async () =>{
     //         try {
@@ -27,8 +26,8 @@ function LoginPage() {
     // }, [])
 
     //Mail list upload
-    const[newName, setNewName] = useState("")
-    const[newEmail, setEmail] = useState("")
+    const[newName, setNewName] = useState("");
+    const[newEmail, setEmail] = useState("");
 
     const mailListRef = collection(db, "mail-list")
 
@@ -55,7 +54,7 @@ function LoginPage() {
   return (
     <div>
         <AppLayout>
-            {/* <Auth/> */}
+            <Auth/>
             <div className='container mail-list'>
                 <h2>Follow for more</h2>
                 <p>If you want to follow along the development of this app, drop down your name and email and I will email you when there is any interesting updates.</p>
@@ -71,14 +70,14 @@ function LoginPage() {
                     <button onClick={onSubmitInfo} className='primary-button'>Submit</button>
                 </form>
             </div>
-            <div>
+            {/* <div>
                 {foodList.map((food) => (
                     <div>
                         <h1>{food.name}</h1>
                         <h2>{food.course}</h2>
                     </div>
                 ))}
-            </div>
+            </div> */}
             <div className="contact-info">
                 @mulundapm
             </div>