diff --git a/index.html b/index.html
index 273b0ee3a..58de832b8 100644
--- a/index.html
+++ b/index.html
@@ -92,7 +92,6 @@
 
 
 .socialmediaicons {
-  background-color:#fdebe8;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -110,15 +109,40 @@
     transition: all 0.3s ease;
     color: rgb(0, 0, 0);
     font-size: 20px;
-    border-radius: 10%;
   }
+
+
    
-  .socialmediaicons a:hover {
-    background-color: rgb(255, 255, 255);
-  }
+.socialmediaicons .fa-instagram:hover{
+  background: radial-gradient(circle at 30% 110%,
+  #ffdb8b 0%,
+  #ee653d 25%,
+  #d42e81 50%,
+  #a237b6 75%,
+  #3e57bc 100%);
+  border-radius: 10px;
+  color: white;
+}   
+.socialmediaicons .fa-facebook:hover{
+  color: blue;
+}   
+.socialmediaicons .fa-youtube:hover{
+  color: red;
+}
 
 
-  
+.dark-mode .socialmediaicons a {
+  color: white;
+}
+
+
+.dark-mode .socialmediaicons .fa-facebook:hover {
+  color: #425d9b
+}
+.dark-mode .socialmediaicons .fa-youtube:hover {
+  color: #f70000;
+}
+
   .instagram {
     
     margin: 5px;
@@ -688,10 +712,10 @@
     <div class="progress-bar"></div>
   </div>
 
-  <div class="socialmediaicons" style="background-color:#fae2de">
+  <div class="socialmediaicons" style="z-index: 99;" >
 
     
-      <a class="active" href="https://www.google.com/" class="instagram"><i class="fa-brands fa-instagram"></i>
+      <a class="active instagram" href="https://www.google.com/" class=""><i class="fa-brands fa-instagram"></i>
      </a>
      <a class="active" href="https://www.google.com/" class="facebook"><i class="fa-brands fa-facebook"></i>
      </a>