diff --git a/login/login.css b/login/login.css
index 93f577a5..ca26c01a 100644
--- a/login/login.css
+++ b/login/login.css
@@ -54,9 +54,7 @@ a {
   transition: 0.3s ease-in-out;
 }
 
-a:hover {
-  color: #4bb6b7;
-}
+
 
 .content {
   display: flex;
@@ -313,9 +311,7 @@ input {
   transition: 0.3s ease-in-out;
 }
 
-.social-container a:hover {
-  border: 1px solid #4bb6b7;
-}
+
 
 #login-section{
   display: flex;
@@ -357,3 +353,16 @@ input {
   padding:2px;
   transition: 0.3s ease-in-out;
  }
+/* hover ibn social icons */
+.social-container .fb:hover {
+  color: white;
+  background-color: #1877F2;
+}
+.social-container .goog:hover {
+  color: white;
+  background-color: #DB4437;
+}
+.social-container .lin:hover {
+  color: white;
+  background-color: #0A66C2;
+}
\ No newline at end of file
diff --git a/newLogin.html b/newLogin.html
index 045162af..42c36801 100644
--- a/newLogin.html
+++ b/newLogin.html
@@ -27,9 +27,9 @@ <h1>Tour Guide</h1>
           <button type="submit">Register</button>
           <span id="registerMessage" style="display: none;">Account created successfully</span>
           <div class="social-container">
-            <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
-            <a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
-            <a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
+            <a class="fb" href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
+            <a class="goog" href="www.google.com" class="social"><i class="lni lni-google"></i></a>
+            <a class="lin" href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
           </div>
         </form>
       </div>
@@ -62,9 +62,9 @@ <h1><a style="margin-right: 300px;" href="index.html" class="back-to-home">
           <button type="submit">Login</button>
           <span>or use your account</span>
           <div class="social-container">
-            <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
-            <a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
-            <a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
+            <a class="fb" href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
+            <a class="goog" href="www.google.com" class="social"><i class="lni lni-google"></i></a>
+            <a class="lin" href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
           </div>
           <!-- Back to Home Button -->