diff --git a/about.html b/about.html
index 94217a7..e61275d 100644
--- a/about.html
+++ b/about.html
@@ -194,54 +194,60 @@ <h2 class="quick-links">Quick Links</h2>
       <div class="footer-line"></div>
       <div class="social_medias">
         <div class="imgWrapper">
-          <i class="fa-brands fa-x-twitter"></i>
           <a href="https://twitter.com" class="socialmediaName" target="_blank"
-            >TWITTER</a
+            ><i class="fa-brands fa-x-twitter"></i>
+            <span>TWITTER</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-facebook"></i>
           <a
             href="https://www.facebook.com"
             class="socialmediaName"
             target="_blank"
-            >FACEBOOK</a
+          >
+            <i class="fa-brands fa-facebook"></i>
+            <span>FACEBOOK</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-instagram"></i>
+          
           <a
             href="https://www.instagram.com"
             class="socialmediaName"
             target="_blank"
-            >INSTAGRAM</a
+            >
+            <i class="fa-brands fa-instagram"></i>
+            <span>INSTAGRAM</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-youtube"></i>
           <a
             href="https://www.youtube.com"
             class="socialmediaName"
             target="_blank"
-            >YOUTUBE</a
+            >
+            <i class="fa-brands fa-youtube"></i>
+            <span>YOUTUBE</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-linkedin"></i>
           <a
             href="https://www.linkedin.com"
             class="socialmediaName"
             target="_blank"
-            >LINKEDIN</a
+            >
+            <i class="fa-brands fa-linkedin"></i>
+            <span>LINKEDIN</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-github"></i>
           <a
             href="https://github.com/Virtual4087/Tree2Hope"
             class="socialmediaName"
             target="_blank"
-            >GITHUB</a
+            >
+            <i class="fa-brands fa-github"></i>
+            <span>GITHUB</span></a
           >
         </div>
       </div>
diff --git a/assets/css/responsiveness.css b/assets/css/responsiveness.css
index 3231ce9..ce050e9 100644
--- a/assets/css/responsiveness.css
+++ b/assets/css/responsiveness.css
@@ -1,4 +1,3 @@
-/*........................... Responsivness...........................*/
 @media only screen and (min-width: 650px) and (max-width: 900px) {
   .upper_part .links a {
     text-decoration: none;
@@ -62,6 +61,26 @@
   .socialmediaName {
     font-size: 0.8rem;
   }
+
+  .imgWrapper a span{
+    display: none;
+  }
+  
+  .banner::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 160vh;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(29, 29, 29, 0.6)),
+      url("../images/child-hands-holding-caring-young-green-plant.webp");
+    background-size: cover;
+    background-repeat: repeat;
+    background-attachment: fixed;
+    z-index: -1;
+  }
 }
 
 @media only screen and (min-width: 400px) and (max-width: 500px) {
@@ -134,14 +153,8 @@
     gap: 20px;
   }
 
-  .imgWrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .imgWrapper i {
-    margin-right: 0px;
+  .imgWrapper a span{
+    display: none;
   }
 }
 
@@ -223,14 +236,8 @@
     gap: 15px;
   }
 
-  .imgWrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .imgWrapper i {
-    margin-right: 0px;
+  .imgWrapper a span{
+    display: none;
   }
 }
 
diff --git a/assets/css/style.css b/assets/css/style.css
index c5f9473..4f5625e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -655,7 +655,6 @@ nav .nav_buttons {
   justify-content: space-between;
   display: flex;
   flex-direction: column;
-  height: 250px;
   width: 100%;
   /* background-color: red; */
 }
@@ -664,7 +663,7 @@ nav .nav_buttons {
   flex: 1.5;
   display: flex;
   justify-content: space-evenly;
-  margin: 0 10%;
+  margin: 1.5rem 10%;
   height: auto;
 }
 
@@ -781,17 +780,15 @@ nav .nav_buttons {
   right: 35%;
 }
 
-.imgWrapper {
+.imgWrapper a {
   display: flex;
   align-items: center;
   height: 32px;
-  /* cursor: pointer; */
   transition: transform 0.75s ease-in-out;
 }
 
 .imgWrapper i {
   font-size: 20px;
-  color: rgb(160, 160, 160);
   margin-right: 10px;
 }
 
diff --git a/index.html b/index.html
index 25a1fab..9cdd301 100644
--- a/index.html
+++ b/index.html
@@ -278,54 +278,60 @@ <h2 class="quick-links">Quick Links</h2>
       <div class="footer-line"></div>
       <div class="social_medias">
         <div class="imgWrapper">
-          <i class="fa-brands fa-x-twitter"></i>
           <a href="https://twitter.com" class="socialmediaName" target="_blank"
-            >TWITTER</a
+            ><i class="fa-brands fa-x-twitter"></i>
+            <span>TWITTER</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-facebook"></i>
           <a
             href="https://www.facebook.com"
             class="socialmediaName"
             target="_blank"
-            >FACEBOOK</a
+          >
+            <i class="fa-brands fa-facebook"></i>
+            <span>FACEBOOK</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-instagram"></i>
+          
           <a
             href="https://www.instagram.com"
             class="socialmediaName"
             target="_blank"
-            >INSTAGRAM</a
+            >
+            <i class="fa-brands fa-instagram"></i>
+            <span>INSTAGRAM</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-youtube"></i>
           <a
             href="https://www.youtube.com"
             class="socialmediaName"
             target="_blank"
-            >YOUTUBE</a
+            >
+            <i class="fa-brands fa-youtube"></i>
+            <span>YOUTUBE</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-linkedin"></i>
           <a
             href="https://www.linkedin.com"
             class="socialmediaName"
             target="_blank"
-            >LINKEDIN</a
+            >
+            <i class="fa-brands fa-linkedin"></i>
+            <span>LINKEDIN</span></a
           >
         </div>
         <div class="imgWrapper">
-          <i class="fa-brands fa-github"></i>
           <a
             href="https://github.com/Virtual4087/Tree2Hope"
             class="socialmediaName"
             target="_blank"
-            >GITHUB</a
+            >
+            <i class="fa-brands fa-github"></i>
+            <span>GITHUB</span></a
           >
         </div>
       </div>