diff --git a/assets/about/about.css b/assets/about/about.css
index 21960b7d5..9eeaa2977 100644
--- a/assets/about/about.css
+++ b/assets/about/about.css
@@ -31,4 +31,59 @@
     color: white;
     padding: 0 3rem;
     margin-bottom: 2rem;
-}
\ No newline at end of file
+}
+
+.footer-basic .social {
+    text-align: center;
+    padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.social {
+    font-size: 3.5rem;
+    text-decoration: none;
+    margin: 0 1rem;
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+.social a {
+    color: var(--secondary);
+}
+
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
+}
diff --git a/assets/about/about.html b/assets/about/about.html
index 4fc44698e..3413194a2 100644
--- a/assets/about/about.html
+++ b/assets/about/about.html
@@ -52,8 +52,8 @@
                 <li class="nav-item">
                     <a href="../contact/contact.html" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
                 </li>
-
             </ul>
+
             <div class="hamburger">
                 <span class="bar"></span>
                 <span class="bar"></span>
@@ -93,14 +93,11 @@ <h1>Join Us</h1>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i
-                        class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i
-                        class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i
-                        class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html">Home</a></li>
diff --git a/assets/contact/contact.css b/assets/contact/contact.css
index 7e57d39ca..33e583850 100644
--- a/assets/contact/contact.css
+++ b/assets/contact/contact.css
@@ -80,7 +80,7 @@ textarea {
 
 textarea {
     border: 1px solid #ccc;
-    resize: vertical; 
+    resize: vertical;
 }
 
 input:hover,
@@ -177,3 +177,58 @@ button:hover {
     color: rgb(255, 255, 255);
     margin-bottom: 0;
 }
+
+.footer-basic .social {
+    text-align: center;
+    padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.social {
+    font-size: 3.5rem;
+    text-decoration: none;
+    margin: 0 1rem;
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+.social a {
+    color: var(--secondary);
+}
+
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
+}
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
index 650303b53..7768c96e7 100644
--- a/assets/contact/contact.html
+++ b/assets/contact/contact.html
@@ -83,11 +83,11 @@ <h2>Contact Us</h2>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html#home">Home</a></li>
diff --git a/assets/contributors/contributor.css b/assets/contributors/contributor.css
index ebbc8391e..9feafc810 100644
--- a/assets/contributors/contributor.css
+++ b/assets/contributors/contributor.css
@@ -167,13 +167,17 @@ div {
 .footer-basic .social {
     text-align: center;
     padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
 .social {
     font-size: 3.5rem;
     text-decoration: none;
     margin: 0 1rem;
-    transition: 0.3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -181,12 +185,39 @@ div {
     gap: 2rem;
 }
 
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+
 .social a {
     color: var(--secondary);
 }
 
-.social a:hover {
-    color: var(--primary);
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
 }
 
 .footer-basic .copyright {
@@ -212,7 +243,6 @@ div {
     cursor: pointer;
 }
 
-
 #progress-value {
     display: block;
     height: calc(100% - 15px);
diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html
index 191ea3da3..a9066d2dd 100644
--- a/assets/contributors/contributor.html
+++ b/assets/contributors/contributor.html
@@ -181,11 +181,11 @@ <h1>Faces of Dedication: Our Contributing Heroes</h1>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html#home">Home</a></li>
diff --git a/assets/faq/faq.css b/assets/faq/faq.css
index 9cd8847f5..e9a985dbc 100644
--- a/assets/faq/faq.css
+++ b/assets/faq/faq.css
@@ -75,7 +75,63 @@
     text-decoration: underline;
 }
 
+.footer-basic .social {
+    text-align: center;
+    padding-bottom: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.social {
+    font-size: 3.5rem;
+    text-decoration: none;
+    margin: 0 1rem;
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i {
+    transform: translateY(-8px);
+}
+
+.social a {
+    color: var(--secondary);
+}
+
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
+}
+
 /* Responsive Media Query */
+
 @media screen and (max-width: 768px) {
     .faqs_container {
         grid-template-columns: 1fr;
@@ -90,4 +146,4 @@
         padding: 0 0.5rem;
         text-align: center;
     }
-}
\ No newline at end of file
+}
diff --git a/assets/faq/faq.html b/assets/faq/faq.html
index a4195eecd..a9f0ceb9d 100644
--- a/assets/faq/faq.html
+++ b/assets/faq/faq.html
@@ -80,14 +80,11 @@
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i
-                        class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i
-                        class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i
-                        class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="../../index.html">Home</a></li>
@@ -112,4 +109,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 30a289431..9625821f8 100644
--- a/index.html
+++ b/index.html
@@ -3541,11 +3541,11 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
     <div class="footer-basic">
         <footer>
             <div class="social">
-                <a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
-                <a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
-                <a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
-                <a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
-                <a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
+                <a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
+                <a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
+                <a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
+                <a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
+                <a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
             </div>
             <ul class="list-inline">
                 <li class="list-inline-item"><a href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
diff --git a/style.css b/style.css
index 1b71c2509..40e2d956a 100644
--- a/style.css
+++ b/style.css
@@ -1488,7 +1488,6 @@ section {
     font-size: 3.5rem;
     text-decoration: none;
     margin: 0 1rem;
-    transition: 0.3s ease-in-out;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -1496,12 +1495,38 @@ section {
     gap: 2rem;
 }
 
+.social a i {
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Pop up effect */
+
+.social a:hover i{
+    transform: translateY(-8px);
+}
+
 .social a {
     color: var(--secondary);
 }
 
-.social a:hover {
-    color: var(--primary);
+.social a.user:hover {
+    color: #4af3b5;
+}
+
+.social a.message:hover {
+    color: #73408f;
+}
+
+.social a.github:hover {
+    color: #21d061;
+}
+
+.social a.twitter:hover {
+    color: #00fff7;
+}
+
+.social a.facebook:hover {
+    color: #0026ff;
 }
 
 .footer-basic .copyright {
@@ -1519,7 +1544,6 @@ section {
     bottom: 0;
     right: 0;
     margin: 0 2rem 2rem 0;
-
     height: fit-content;
     width: fit-content;
     z-index: 100000;
@@ -1530,7 +1554,6 @@ section {
     height: 42px;
     width: 42px;
     background-color: rgba(255, 255, 255, 0.9);
-
     border: 0;
     cursor: pointer;
     box-shadow: 0px 0px 10px 1px palevioletred;