diff --git a/src/Components/Firebase/Firebase.js b/src/Components/Firebase/Firebase.js
index 4b4a51fc..5b0e97ec 100644
--- a/src/Components/Firebase/Firebase.js
+++ b/src/Components/Firebase/Firebase.js
@@ -2,7 +2,16 @@
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import { getFirestore } from "firebase/firestore";
-import { getAuth, GoogleAuthProvider, GithubAuthProvider, FacebookAuthProvider, signInWithPopup, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
+import { 
+  getAuth, 
+  GoogleAuthProvider, 
+  GithubAuthProvider, 
+  FacebookAuthProvider, 
+  TwitterAuthProvider, // Import TwitterAuthProvider
+  signInWithPopup, 
+  RecaptchaVerifier, 
+  signInWithPhoneNumber 
+} from "firebase/auth";
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -22,8 +31,22 @@ const db = getFirestore(firebaseApp);
 const googleProvider = new GoogleAuthProvider();
 const githubProvider = new GithubAuthProvider();
 const facebookProvider = new FacebookAuthProvider();
+const twitterProvider = new TwitterAuthProvider(); // Initialize TwitterAuthProvider
 const auth = getAuth(firebaseApp);
 
-export { auth, signInWithPopup, githubProvider, googleProvider, facebookProvider, GithubAuthProvider, FacebookAuthProvider, RecaptchaVerifier, signInWithPhoneNumber };
+export { 
+  auth, 
+  signInWithPopup, 
+  githubProvider, 
+  googleProvider, 
+  facebookProvider, 
+  twitterProvider, // Export twitterProvider
+  GithubAuthProvider, 
+  FacebookAuthProvider, 
+  TwitterAuthProvider, // Export TwitterAuthProvider
+  RecaptchaVerifier, 
+  signInWithPhoneNumber 
+};
+
 export { db, analytics, firebaseApp as app };
 export default firebaseApp;
diff --git a/src/Components/Login.js b/src/Components/Login.js
index eca6a885..dd693de1 100644
--- a/src/Components/Login.js
+++ b/src/Components/Login.js
@@ -12,6 +12,7 @@ import {
   createUserWithEmailAndPassword,
   RecaptchaVerifier,
   signInWithPhoneNumber,
+  TwitterAuthProvider
 } from 'firebase/auth';
 
 const LogIn = () => {
@@ -60,6 +61,18 @@ const LogIn = () => {
       console.error('Facebook sign-in error:', error);
     }
   };
+  const handleTwitterSignIn = async () => {
+    try {
+      const twitterProvider = new TwitterAuthProvider();
+      const result = await signInWithPopup(auth, twitterProvider);
+      const user = result.user;
+      localStorage.setItem('user', JSON.stringify(user));
+      console.log('Twitter sign-in success:', user);
+      navigate('/');
+    } catch (error) {
+      console.error('Twitter sign-in error:', error);
+    }
+  };
   
   const handleLogin = async (e) => {
     e.preventDefault();
@@ -257,9 +270,9 @@ const LogIn = () => {
               <div onClick={handleFacebookSignIn} className="social-icon">
                 <i className="fab fa-facebook-f" style={{ color: 'darkturquoise' }}></i>
               </div>
-              <Link to="https://www.twitter.com" className="social-icon">
-                <i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
-              </Link>
+              <div onClick={handleTwitterSignIn} className="social-icon">
+              <i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
+            </div>
               <div onClick={handleGoogleSignIn} className="social-icon">
                 <i className="fab fa-google" style={{ color: 'darkturquoise' }}></i>
               </div>
@@ -355,9 +368,9 @@ const LogIn = () => {
             <div onClick={handleFacebookSignIn} className="social-icon">
                 <i className="fab fa-facebook-f" style={{ color: 'darkturquoise' }}></i>
               </div>
-              <Link to="https://www.twitter.com" className="social-icon">
-                <i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
-              </Link>
+              <div onClick={handleTwitterSignIn} className="social-icon">
+              <i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
+            </div>
               <div onClick={handleGoogleSignIn} className="social-icon">
                 <i className="fab fa-google" style={{ color: 'darkturquoise' }}></i>
               </div>