diff --git a/Web/Login.html b/Web/Login.html
index 111165b..e7eb62d 100644
--- a/Web/Login.html
+++ b/Web/Login.html
@@ -6,104 +6,116 @@ Description: login
 <html>
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-sale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
-  <body> 
-        <h1>Login</h1>
+  <body>
+    <h1>Login</h1>
+    <div>
+      <form>
         <div>
-          <form >
-            <div >
-              <label for="email" >Email</label>
-              <input
-                type="text"
-                id="email"
-              />
-            </div>
-            <div>
-              <label for="password">Password</label>
-              <input
-                type="password"
-                id="password"
-              />
-            </div>
-  
-            <div
-              id="errorMessage"
-            ></div>
-  
-            <div>
-              <button
-                type="button"
-                id="loginButton">
-                Login
-              </button>
-            </div>
-            <div>
-              <a
-                href="SignUp.html"
-              >
-                Sign Up
-              </a>
-            </div>
-          </form>
+          <label for="email">Email</label>
+          <input type="text" id="email" />
         </div>
-      
+        <div>
+          <label for="password">Password</label>
+          <input type="password" id="password" />
+        </div>
+
+        <div id="errorMessage" class="hidden text-red-500">
+          An error occurred.
+        </div>
+        <div id="userStatus" class="hidden text-green-500"></div>
+
+        <div>
+          <button type="button" id="loginButton">Login</button>
+        </div>
+        <div>
+          <button type="button" id="googleSignInButton">
+            Sign in with Google
+          </button>
+        </div>
+        <div>
+          <a href="SignUp.html">Sign Up</a>
+        </div>
+      </form>
+    </div>
+
     <script type="module">
-        // Import the functions you need from the SDKs you need
-        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
-        // TODO: Add SDKs for Firebase products that you want to use
-        // https://firebase.google.com/docs/web/setup#available-libraries
-      
-        // Your web app's Firebase configuration
-        import { firebaseConfig } from "./firebase-config.js";
-      
-        // Initialize Firebase
-        
-        import {
-        //determine which services you want to use
+      import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
+      import { firebaseConfig } from "./firebase-config.js";
+      import {
         getAuth,
-        createUserWithEmailAndPassword,
         signInWithEmailAndPassword,
         onAuthStateChanged,
+        GoogleAuthProvider,
+        signInWithPopup,
         signOut,
       } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
+
       const app = initializeApp(firebaseConfig);
-      //Working with Auth
       const auth = getAuth();
 
       document.getElementById("loginButton").onclick = login;
+      document.getElementById("googleSignInButton").onclick = signInWithGoogle;
+
+      const userStatusDiv = document.getElementById("userStatus");
+      const errorMessageDiv = document.getElementById("errorMessage");
+
+      // Sign out any existing user on page load to prevent auto sign-in
+      signOut(auth);
 
-      // Handle Auth State Change Event
       onAuthStateChanged(auth, (user) => {
         if (user) {
-          console(`Login successful`);
+          userStatusDiv.innerHTML = `Signed in as: <strong>${
+            user.displayName || user.email
+          }</strong>`;
+          userStatusDiv.classList.remove("hidden");
         } else {
+          userStatusDiv.innerHTML = "";
+          userStatusDiv.classList.add("hidden");
         }
       });
 
       function login() {
         const email = document.getElementById("email").value;
         const password = document.getElementById("password").value;
-        const errorMessageDiv = document.getElementById("errorMessage");
 
         signInWithEmailAndPassword(auth, email, password)
-          .then((userCredential) => {
-            const user = userCredential.user;
+          .then(() => {
+            errorMessageDiv.classList.add("hidden");
           })
           .catch((error) => {
             const errorCode = error.code;
+            let message = "An error occurred. Please try again.";
 
             if (
               errorCode === "auth/wrong-password" ||
               errorCode === "auth/user-not-found"
             ) {
-            } else {
-              errorMessageDiv.textContent = "Wrong Email/Password!";
+              message = "Wrong Email/Password!";
             }
+
+            errorMessageDiv.innerHTML = `<strong>${message}</strong>`;
+            errorMessageDiv.classList.remove("hidden");
           });
       }
-      </script>
+      // if you are testing in live server please add that server domain to the authorized domain if not the pop up will not show up
+      function signInWithGoogle() {
+        const provider = new GoogleAuthProvider();
+        provider.setCustomParameters({
+          prompt: "select_account", // Forces account selection every time
+        });
+
+        signInWithPopup(auth, provider)
+          .then(() => {
+            errorMessageDiv.classList.add("hidden");
+          })
+          .catch(() => {
+            errorMessageDiv.innerHTML = `<strong>Google Sign-In failed. Please try again.</strong>`;
+            errorMessageDiv.classList.remove("hidden");
+          });
+      }
+    </script>
   </body>
 </html>
-
