diff --git a/Login/index1.html b/Login/index1.html
index b11021f..6f8c3d2 100644
--- a/Login/index1.html
+++ b/Login/index1.html
@@ -29,13 +29,29 @@
         <div class="form-container sign-up">
             <img src="../assets/images/logo/logo..png" alt="Website Logo" class="logo-right">
             <form action="https://sk66641.github.io/Random-Disco-Light-Simulator/">
-                <h1 style="color: #f09819;">Activate Your Account</h1>
-                <div class="social-icons">
-                    <a href="http://www.gmail.com" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
-                    <a href="http://www.facebook.com" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
-                    <a href="http://www.github.com" class="icon"><i class="fa-brands fa-github"></i></a>
-                    <a href="http://www.linkedin.com" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
-                </div>
+                <h1 style="color: #f09819; margin-bottom: 2rem;">Activate Your Account</h1>
+                <div class="socialIcons">
+                    <span class="icons">
+                      <a href="" aria-label="Linkedin" title="linkedin"><i class="fab fa-linkedin ico"></i></a>
+                    </span>
+                    <span class="icons">
+                      <a href="" aria-label="Instagram" title="instagram"><i class="fa-brands fa-instagram ico"></i></a>
+                    </span>
+            
+                    <span class="icons">
+                      <a href="https://github.com/sk66641/Random-Disco-Light-Simulator" title="github">
+                        <i class="fab fa-github ico"></i>
+                      </a>
+                    </span>
+            
+                    <span class="icons">
+                      <a href="" aria-label="X" title="Twitter"><i class="fa-brands fa-x-twitter ico"></i></a>
+                    </span>
+            
+                    <span class="icons">
+                      <a href="" aria-label="Discord" title="discord"><i class="fa-brands fa-discord ico"></i></a>
+                    </span>
+                  </div>
                 <span style="color: #f09819;">Secure Access with Your Email Password</span>
                 <input type="text" placeholder="Name">
                 <input type="email" placeholder="Email">
@@ -49,12 +65,28 @@ <h1 style="color: #f09819;">Activate Your Account</h1>
         <div class="form-container sign-in">
             <form action="https://sk66641.github.io/Random-Disco-Light-Simulator/">
                 <p><img src="../assets/images/logo/logo..png" alt="Website Logo" class="logo-left"></p>
-                <div class="social-icons">
-                    <a href="http://www.gmail.com" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
-                    <a href="http://www.facebook.com" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
-                    <a href="http://www.github.com" class="icon"><i class="fa-brands fa-github"></i></a>
-                    <a href="http://www.linkedin.com" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
-                </div>
+                <div class="socialIcons">
+                    <span class="icons">
+                      <a href="" aria-label="Linkedin" title="linkedin"><i class="fab fa-linkedin ico"></i></a>
+                    </span>
+                    <span class="icons">
+                      <a href="" aria-label="Instagram" title="instagram"><i class="fa-brands fa-instagram ico"></i></a>
+                    </span>
+            
+                    <span class="icons">
+                      <a href="https://github.com/sk66641/Random-Disco-Light-Simulator" title="github">
+                        <i class="fab fa-github ico"></i>
+                      </a>
+                    </span>
+            
+                    <span class="icons">
+                      <a href="" aria-label="X" title="Twitter"><i class="fa-brands fa-x-twitter ico"></i></a>
+                    </span>
+            
+                    <span class="icons">
+                      <a href="" aria-label="Discord" title="discord"><i class="fa-brands fa-discord ico"></i></a>
+                    </span>
+                  </div>
                 <span style="color: #f09819;">Secure Access with Your Email Password</span>
                 <input type="email" placeholder="Email">
                 <div class="password-container">
diff --git a/Login/styles1.css b/Login/styles1.css
index fc48075..1b001f3 100644
--- a/Login/styles1.css
+++ b/Login/styles1.css
@@ -613,3 +613,101 @@ body {
         right: 5px;
     }
 }
+.socialIcons {
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  
+    gap: 30px;
+    backdrop-filter: blur(8px);
+  
+  }
+.icons {
+    position: relative;
+    background: rgba(106, 106, 106, 0.189);
+    top: 0px;
+    color: white;
+    box-shadow: 3px 4px 10px rgba(176, 175, 175, 0.248);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50% 50%;
+    overflow: hidden;
+  }
+.icons a::after {
+    content: "";
+    width: 40px;
+    height: 40px;
+    top: -40px;
+    left: 0;
+    background: linear-gradient(40deg,
+        rgb(246, 126, 28),
+        rgb(221, 54, 54),
+        rgb(250, 41, 118),
+        rgb(214, 18, 214));
+    position: absolute;
+    transition: 0.5s;
+  }
+  
+  .icons a:hover::after {
+    top: 0;
+    left: 0;
+  }
+  
+  .icons:nth-child(1) a::after {
+    background: linear-gradient(40deg,
+        rgb(13, 108, 139),
+        rgb(48, 106, 126),
+        rgb(38, 126, 156),
+        rgb(15, 112, 145));
+  }
+  
+  .icons:nth-child(2) a::after {
+    background: linear-gradient(40deg,
+        rgb(246, 126, 28),
+        rgb(221, 54, 54),
+        rgb(250, 41, 118),
+        rgb(214, 18, 214));
+  }
+  
+  .icons:nth-child(3) a::after {
+    background: linear-gradient(40deg, #000000, #410bc8);
+  }
+  
+  .icons:nth-child(4) a::after {
+    background: rgb(19, 12, 12);
+  }
+  
+  .icons:nth-child(5) a::after {
+    background:
+      rgb(88, 101, 242)
+  }
+  .ico {
+    position: absolute;
+    font-size: 21px;
+    z-index: 20;
+    top: 50%;
+    left: 50%;
+  
+    transform: translate(-50%, -50%);
+  
+    color: white;
+  }
+
+  .light-mode .icons {
+    background: rgba(10, 9, 9, 0.063);
+    box-shadow: 4px 6px 10px rgba(19, 19, 19, 0.333);
+  }
+  
+  .light-mode .ico {
+    color: rgb(102, 100, 100);
+  }
+  
+  .light-mode .ico:hover {
+    color: white;
+    transition: all ease-in 0.1s;
+  }