diff --git a/src/components/OAuth.jsx b/src/components/OAuth.jsx
new file mode 100644
index 0000000..a200338
--- /dev/null
+++ b/src/components/OAuth.jsx
@@ -0,0 +1,42 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
+import { doc, setDoc, getDoc, serverTimestamp } from "firebase/firestore";
+import { db } from "../firebase.config";
+import { toast } from "react-toastify";
+import googleIcon from "../assets/svg/googleIcon.svg";
+
+function OAuth() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const onGoogleClick = async () => {
+    try {
+      const auth = getAuth();
+      const provider = new GoogleAuthProvider();
+      const result = await signInWithPopup(auth, provider);
+      const user = result.user;
+
+      const docRef = doc(db, "users", user.uid);
+      const docSnap = await getDoc(docRef);
+
+      if (!docSnap.exists()) {
+        await setDoc(doc(db, "users", user.uid), {
+          name: user.displayName,
+          email: user.email,
+          timestamp: serverTimestamp(),
+        });
+      }
+      navigate('/')
+    } catch (error) {
+      toast.error('Could not authorize with google')
+    }
+  };
+  return (
+    <div className="socialLogin">
+      <p>Sign {location.pathname === "/sign-up" ? "up" : "in"} with</p>
+      <button className="socialIconDiv" onClick={onGoogleClick}>
+        <img className="socialIconImg" src={googleIcon} alt="google" />
+      </button>
+    </div>
+  );
+}
+export default OAuth;
diff --git a/src/pages/ForgotPassword.jsx b/src/pages/ForgotPassword.jsx
index f5d9b27..d111183 100644
--- a/src/pages/ForgotPassword.jsx
+++ b/src/pages/ForgotPassword.jsx
@@ -1,9 +1,42 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { getAuth,sendPasswordResetEmail } from "firebase/auth";
+import { toast } from "react-toastify";
+import {ReactComponent as ArrowRightIcon} from '../assets/svg/keyboardArrowRightIcon.svg'
 
 function ForgotPassword (){
+  const [email, setEmail] = useState('')
+  const onChange = e =>{setEmail(e.target.value)}
+  const onSubmit =async (e) =>{
+
+    e.preventDefault()
+    try{
+      const auth=getAuth()
+      await sendPasswordResetEmail(auth, email)
+      toast.success('Email was sent')
+    }
+    catch(error){
+      toast.error("Could not send reset email")
+    }
+  }
   return (
-    <>
-    <h1>My app</h1>
-    </>
+    <div className="pageContainer">
+      <header>
+        <p className="pageHeader">Forgot Password</p>
+
+      </header>
+      <main>
+        <form onSubmit={onSubmit}
+        >
+          <input type='email' className='emailInput'placeholder="Email" id='email' value={email} onChange={onChange} />
+          <Link className="forgotPasswordLink" to='/sign-in'>Sign In</Link>
+          <div className="signInBar">
+            <div className="signInText">Send Reset Link</div>
+            <button className="signInButton"><ArrowRightIcon fill='#ffffff' width='34px' height='34px'/></button>
+          </div>
+        </form>
+      </main>
+    </div>
   );
 }
 export default ForgotPassword
diff --git a/src/pages/Signin.jsx b/src/pages/Signin.jsx
index cb0398c..4cb4e91 100644
--- a/src/pages/Signin.jsx
+++ b/src/pages/Signin.jsx
@@ -1,3 +1,4 @@
+import OAuth from "../components/OAuth";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -73,6 +74,7 @@ function Signin() {
             </button>
           </div>
         </form>
+        <OAuth />
         <Link to="/sign-up" className="registerLink">
           Sign Up Instead
         </Link>
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
index 4e8277b..f5ad901 100644
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -1,5 +1,5 @@
- import 'react-toastify/dist/ReactToastify.css';
-import { toast } from 'react-toastify';
+import "react-toastify/dist/ReactToastify.css";
+import { toast } from "react-toastify";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { ReactComponent as ArrowRightIcon } from "../assets/svg/keyboardArrowRightIcon.svg";
@@ -10,7 +10,8 @@ import {
   updateProfile,
 } from "firebase/auth";
 import { db } from "../firebase.config";
-import { setDoc,doc, serverTimestamp } from "firebase/firestore";
+import { setDoc, doc, serverTimestamp } from "firebase/firestore";
+import OAuth from "../components/OAuth";
 
 function Signup() {
   const [showPassword, setShowPassword] = useState(false);
@@ -45,12 +46,12 @@ function Signup() {
       delete fromDataCopy.password;
       fromDataCopy.timestamp = serverTimestamp();
 
-      await setDoc(doc(db,'users',user.uid), fromDataCopy)
+      await setDoc(doc(db, "users", user.uid), fromDataCopy);
 
       navigate("/");
     } catch (error) {
-      console.log(error)
-      toast.error("something went wrong with the registration")
+      console.log(error);
+      toast.error("something went wrong with the registration");
     }
   };
   return (
@@ -101,6 +102,7 @@ function Signup() {
             </button>
           </div>
         </form>
+        <OAuth />
         <Link to="/sign-in" className="registerLink">
           Sign In Instead
         </Link>