diff --git a/assets/Social Icons/facebook.png b/assets/Social Icons/facebook.png
new file mode 100644
index 0000000..bcccfda
Binary files /dev/null and b/assets/Social Icons/facebook.png differ
diff --git a/assets/Social Icons/github.png b/assets/Social Icons/github.png
new file mode 100644
index 0000000..9cf28f5
Binary files /dev/null and b/assets/Social Icons/github.png differ
diff --git a/assets/Social Icons/gmail.png b/assets/Social Icons/gmail.png
new file mode 100644
index 0000000..fe29139
Binary files /dev/null and b/assets/Social Icons/gmail.png differ
diff --git a/assets/Social Icons/instagram.png b/assets/Social Icons/instagram.png
new file mode 100644
index 0000000..edb7424
Binary files /dev/null and b/assets/Social Icons/instagram.png differ
diff --git a/assets/Social Icons/twitter.png b/assets/Social Icons/twitter.png
new file mode 100644
index 0000000..881cd0f
Binary files /dev/null and b/assets/Social Icons/twitter.png differ
diff --git a/contact.html b/contact.html
index 043f6ba..7368078 100644
--- a/contact.html
+++ b/contact.html
@@ -134,16 +134,12 @@ <h3>SocialHub</h3>
                     Pages.
                 </p>
                 <div class="socials">
-                    <a href="#"><i class="fa fa-facebook"></i></a>
-
-                    <a href="#"><i class="fa fa-twitter"></i></a>
-
-                    <a href="#"><i class="fa fa-google-plus"></i></a>
-
-                    <a href="#"><i class="fa fa-youtube"></i></a>
-
-                    <a href="#"><i class="fa fa-linkedin-square"></i></a>
-                </div>
+                    <a href="#"><img src="Social Icons/github.png" class="icon-style" alt="Github icon" /></a>
+                    <a href="#"><img src="Social Icons/twitter.png" class="icon-style" alt="Twitter icon" /></a>
+                    <a href="#"><img src="Social Icons/gmail.png" class="icon-style" alt="Email icon" /></a>
+                    <a href="#"><img src="Social Icons/facebook.png" class="icon-style" alt="Facebook icon" /></a>
+                    <a href="#"><img src="Social Icons/instagram.png" class="icon-style" alt="Instagram icon" /></a>
+                  </div>
             </div>
             <div class="footer-bottom">
                 <p>&copy; 2023 SocialHub. All rights reserved.</p>
diff --git a/index.html b/index.html
index fd8899d..6271160 100644
--- a/index.html
+++ b/index.html
@@ -919,19 +919,14 @@ <h2 style="font-family: Arial, sans-serif; font-size: 20px">
       <div class="footer-content">
         <h3>SocialHub</h3>
         <p>Connecting Friends and Family through Personalized About Pages.</p>
-        <div class="socials">
-          <a href="#"><i class="fa fa-facebook"></i></a>
-
-          <a href="#"><i class="fa fa-twitter"></i></a>
-
-          <a href="#"><i class="fa fa-google-plus"></i></a>
-
-          <a href="#"><i class="fa fa-youtube"></i></a>
-
-          <a href="#"><i class="fa fa-linkedin-square"></i></a>
-
+         <div class="socials">
+          <a href="#"><img src="Social Icons/github.png" class="icon-style" alt="Github icon" /></a>
+          <a href="#"><img src="Social Icons/twitter.png" class="icon-style" alt="Twitter icon" /></a>
+          <a href="#"><img src="Social Icons/gmail.png" class="icon-style" alt="Email icon" /></a>
+          <a href="#"><img src="Social Icons/facebook.png" class="icon-style" alt="Facebook icon" /></a>
+          <a href="#"><img src="Social Icons/instagram.png" class="icon-style" alt="Instagram icon" /></a>
         </div>
-        <a href="#Top"><button class="scrollToTop"><img src="https://img.icons8.com/ios-filled/50/000000/circled-up-2.png" alt="circled-up-2"/></button></a>
+        <a href="#Top"><button class="scrollToTop"><img src="https://img.icons8.com/ios-filled/50/000000/circled-up-2.png" alt="circled-up-2" /></button></a>
       </div>
       <div class="footer-bottom">
         <p>&copy; 2023 SocialHub. All rights reserved.</p>
diff --git a/styles.css b/styles.css
index eecff60..d2f38ad 100644
--- a/styles.css
+++ b/styles.css
@@ -12,11 +12,13 @@ body {
     ); /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);
 }
+
 .navbar-brand {
     font-family: "Young Serif", serif;
     font-size: 5vh !important;
     color: black !important;
 }
+
 .navbar-nav {
     color: black;
     display: flex;
@@ -24,6 +26,7 @@ body {
     justify-content: end;
     align-items: center;
 }
+
 .navbar {
     color: black;
     padding: 0 15px 0 15px;
@@ -31,35 +34,29 @@ body {
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     min-height: 64px;
 }
-header {
-
 
+header {
     background-image: linear-gradient(to right top, rgb(239, 191, 219), #7f9de2, rgb(239, 191, 219));
     color: #000000;
     padding: 20px;
-
-  padding: 20px;
 }
-nav {
-  display: flex;
-  justify-content: space-evenly;
 
-
-    padding: 20px;
-}
 nav {
     display: flex;
     justify-content: space-evenly;
-
+    padding: 20px;
 }
+
 nav ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
+
 nav li {
     display: inline-block;
 }
+
 .nav-item {
     color: #000;
     text-decoration: none;
@@ -67,11 +64,20 @@ nav li {
     font-size: larger;
     font-weight: 600;
 }
-nav a:hover{
+
+nav a:hover {
     text-decoration: none;
 }
-.hero {
 
+.hero {
+    background-size: cover;
+    color: #000000;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    text-align: center;
     background-size: cover;
     color: #000000;
     display: flex;
@@ -80,31 +86,24 @@ nav a:hover{
     align-items: center;
     height: 100vh;
     text-align: center;
-
-
-  background-size: cover;
-  color: #000000;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  text-align: center;
-
 }
-.srout{
+
+.srout {
     position: relative;
-    bottom:35px;
+    bottom: 35px;
     border-radius: 50%;
 }
+
 .hero h1 {
     font-size: 4rem;
     margin: 0;
 }
+
 .hero p {
     font-size: 1.5rem;
     margin: 20px 0;
 }
+
 .second {
     color: #000000;
     display: flex;
@@ -113,14 +112,17 @@ nav a:hover{
     align-items: center;
     text-align: center;
 }
+
 .second h1 {
     font-size: 4rem;
     margin: 0;
 }
+
 .second p {
     font-size: 1.5rem;
     margin: 20px 0;
 }
+
 .hero button {
     background-color: #000;
     border: none;
@@ -130,15 +132,14 @@ nav a:hover{
     padding: 10px 20px;
     cursor: pointer;
 }
+
 .hero button:hover {
     background-color: #333;
     color: #fff;
 }
-.about-me {
-
 
+.about-me {
     border: 1px solid #ddd;
-
     padding: 20px;
     margin-bottom: 20px;
     display: flex;
@@ -146,10 +147,9 @@ nav a:hover{
     justify-content: center;
     flex-wrap: wrap;
     flex-basis: 20%;
-
 }
-.content
-{
+
+.content {
     background-color: rgba(181, 221, 248, 0.7); /* Adjust the alpha value for transparency */
     border: 1px solid #ffffff;
     padding: 20px;
@@ -161,29 +161,29 @@ nav a:hover{
     color: rgb(0, 0, 0);
     backdrop-filter: blur(10px);
 }
-#rowTwo{
+
+#rowTwo {
     height: 420px;
 }
-  .content:hover {
+
+.content:hover {
     transform: translateY(0);
     box-shadow: inset 0 0 60px #8ef6ff,
-                inset 20px 0 80px rgb(179, 106, 239),
-                inset -20px 0 80px #fefffe,
-                inset 20px 0 300px #bcf3ff,
-                inset -20px 0 300px #74e8db,
-                0 0 50px #ffeeee,
-                -10px 0 80px rgb(128, 193, 237),
-                10px 0 60px #dab7f1;
-  }
-  
-  
-  
-.content img{
+        inset 20px 0 80px rgb(179, 106, 239),
+        inset -20px 0 80px #fefffe,
+        inset 20px 0 300px #bcf3ff,
+        inset -20px 0 300px #74e8db,
+        0 0 50px #ffeeee,
+        -10px 0 80px rgb(128, 193, 237),
+        10px 0 60px #dab7f1;
+}
+
+.content img {
     width: 200px;
     height: 200px;
 }
 
-footer{
+footer {
     position: relative;
     bottom: 0;
     left: 0;
@@ -195,27 +195,31 @@ footer{
     padding-top: 40px;
     color: #fff;
 }
-.footer-content{
+
+.footer-content {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
 }
-.footer-content h3{
+
+.footer-content h3 {
     margin: 0;
     font-size: 1.8rem;
     font-weight: 400;
     text-transform: capitalize;
     line-height: 3rem;
 }
-.footer-content p{
+
+.footer-content p {
     max-width: 500px;
     margin: 10px auto;
     line-height: 28px;
     font-size: 14px;
 }
-.socials{
+
+.socials {
     padding: 0;
     list-style: none;
     display: flex;
@@ -223,59 +227,64 @@ footer{
     justify-content: center;
     margin: 1rem 0 3rem 0;
 }
-.socials li{
+
+.socials li {
     margin: 0 20px;
 }
-.socials a{
+
+.socials a {
     text-decoration: none;
     color: #fff;
 }
-.socials a i{
+
+.socials a i {
     font-size: 1.1rem;
-    transition: color .4s ease;
+    transition: color 0.4s ease;
 }
-.socials a:hover i{
-    color: aqua;
-
-  border: 1px solid #ddd;
-  padding: 20px;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  flex-basis: 20%;
 
+.socials a:hover i {
+    color: aqua;
 }
-.content {
+
+.scrollToTop {
+    position: absolute;
+    bottom: 60%;
+    right: 6%;
+    background-color: #ffffff;
+    border: none;
+    padding: 1px;
+    border-radius: 50%;
+    cursor: pointer;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    background-color: #fff;
-    backdrop-filter: blur(10px);
-    padding: 20px;
-    margin: 30px;
-    width: 250px;
-    height: 425px;
-    text-align: center;
-    border-radius: 0.25rem;
-    color: rgb(0, 0, 0);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.footer-content a img {
+    width: 50px;
+    height: 50px;
+}
+
+@media (max-width: 574px) {
+    .scrollToTop {
+        bottom: 35%;
+    }
+    .footer-content a img {
+        width: 35px;
+        height: 35px;
+    }
 }
 
 .navbar-nav a:hover {
     transition: 0.25s;
     color: rgb(128, 193, 237);
 }
-.content:hover {
-
-  transform: translateY(0);
-  box-shadow: inset 0 0 60px #8ef6ff, inset 20px 0 80px rgb(186, 127, 235),
-    inset -20px 0 80px #fefffe, inset 20px 0 300px #bcf3ff,
-    inset -20px 0 300px #74e8db, 0 0 50px #ffeeee,
-    -10px 0 80px rgb(128, 193, 237), 10px 0 60px #dab7f1;
 
+.content:hover {
+    transform: translateY(0);
+    box-shadow: inset 0 0 60px #8ef6ff, inset 20px 0 80px rgb(186, 127, 235),
+        inset -20px 0 80px #fefffe, inset 20px 0 300px #bcf3ff,
+        inset -20px 0 300px #74e8db, 0 0 50px #ffeeee,
+        -10px 0 80px rgb(128, 193, 237), 10px 0 60px #dab7f1;
 
     cursor: default;
     transform: translateY(0);
@@ -289,31 +298,95 @@ footer{
         #6b6b83,
         #aa4b6b
     ); /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(#3b8d99, #6b6b83, #aa4b6b);
+    background: linear-gradient(#3b8d99, #6b6b83, #aa4b6b)
 }
 
 .content h2 {
     margin-top: 10px;
     font-weight: bold;
-
 }
 
 .content img {
     width: 200px;
     height: 200px;
 }
-footer {
+
+/* Footer styles */
+.footer {
     background-color: #333;
     color: #fff;
-    padding: 10px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
     text-align: center;
+    padding: 20px 0;
+    font-family: Arial, sans-serif;
 }
+
+.footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.footer-content h3 {
+    margin: 0;
+    font-size: 1.8rem;
+    font-weight: 400;
+    text-transform: capitalize;
+    line-height: 3rem;
+}
+
+.footer-bottom{
+text-align: center;
+
+}
+.footer-content p {
+    max-width: 500px;
+    margin: 10px auto;
+    line-height: 28px;
+    font-size: 14px;
+}
+
 .socials {
+    list-style: none;
     display: flex;
+    align-items: center;
     justify-content: center;
+    margin: 2rem 0; /* Increased margin for spacing */
 }
-.fa {
-    padding: 0.5vw;
+
+.socials li {
+    margin: 0 10px; /* Adjusted spacing between icons */
+    transition: transform 0.2s;
+}
+
+.socials a {
+    text-decoration: none;
+    color: #fff;
+    transition: color 0.4s;
+}
+
+.socials a img {
+    width: 30px; /* Slightly smaller icons */
+    height: 30px; /* Slightly smaller icons */
+    margin: 0 10px;
+    transition: transform 0.2s;
+}
+
+.socials li:not(:last-child) {
+    margin-right: 20px; /* Space between icons */
+}
+
+.socials a:hover {
+    color: aqua;
+}
+
+.socials a:hover img {
+    transform: scale(1.2);
+    filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.8)); /* Adds a glowing effect */
 }
 
 .scrollToTop {
@@ -322,23 +395,25 @@ footer {
     right: 6%;
     background-color: #ffffff;
     border: none;
-    padding: 1px;
+    padding: 8px; /* Increased padding for a larger button */
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
+    transition: background-color 0.3s; /* Smooth button color transition */
 }
-.footer-content a img{
-    width: 50px;
-    height: 50px;
+
+.scrollToTop:hover {
+    background-color: #aaa; /* Change color on hover */
 }
 
-@media(max-width: 574px) {
-    .scrollToTop{
+/* Media query for smaller screens */
+@media (max-width: 574px) {
+    .scrollToTop {
         bottom: 35%;
     }
-    .footer-content a img{
-        width: 35px;
-        height: 35px;
+    .socials a img {
+        width: 25px; /* Smaller icons for smaller screens */
+        height: 25px; /* Smaller icons for smaller screens */
     }
 }