diff --git a/index.html b/index.html
index db3f840..7f25a06 100644
--- a/index.html
+++ b/index.html
@@ -121,20 +121,37 @@ <h1 class="cnt-title">Butter Chicken</h1>
 
 
         <footer>
+
+
+            <h3 > Conect with Us</h3>
+            <div class="footer-content">
+            <div class="socials">
+                <a href="#"><img src="Social Icons/instagram.png" class="icon-style" alt="Instagram icon" /></a>
+                <a href="#"><img src="Social Icons/facebook.png" class="icon-style" alt="Facebook icon" /></a>
+                <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>
+              </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>
+
+              </div>
             <p>Recipe Finder is Open for Contribution</p>
-            <p>Developer: Anshuman</p>
+            <p>Develope  @Anshuman</p>
             <p>API Credits : EDMAN RECIPES </p>
+
         </footer>
 
+       
+        <script>
+            const cursor = new MouseFollower({
+        container: document.body,
+        speed: 0.3
+    });
+             </script>
 
-    <script>
-        const cursor = new MouseFollower({
-    container: document.body,
-    speed: 0.3
-});
-         </script>
+    
          
     
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index 807adf8..dfefee7 100644
--- a/style.css
+++ b/style.css
@@ -115,23 +115,7 @@ li{
     position: absolute;
 }
 
-footer {
-    background-color: #333;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    position: relative;
-    bottom: 0%;
-    width: 100%;
-    height: 70px;
-}
 
-footer p {
-    font-size: 14px;
-}
 
 
 .hero-img{
@@ -369,3 +353,109 @@ p{
     .sidenav a {font-size: 18px;}
   }
 
+/* Footer styles */
+footer {
+    background-color: #333;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    bottom: 0%;
+    width: 100%;
+    height: 200px;
+}
+
+footer h3{
+
+    text-align: center;
+    padding: 10px;
+
+}
+
+
+footer p {
+    font-size: 14px;
+    padding: 2px;
+}
+
+
+.socials {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 2rem 0; 
+}
+
+
+.socials a {
+    text-decoration: none;
+    color: #fff;
+    transition: color 0.4s;
+}
+
+.socials a img {
+    width: 30px; 
+    height: 30px; 
+    margin: 0 10px;
+    transition: transform 0.2s;
+}
+
+.socials li:not(:last-child) {
+    margin-right: 20px; 
+}
+
+.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)); 
+}
+
+
+
+/* Media query for smaller screens */
+@media (max-width: 574px) {
+    .scrollToTop {
+        bottom: 35%;
+    }
+    .socials a img {
+        width: 25px;
+        height: 25px; 
+    }
+}
+
+/*     ----------------------  Back To Top style Starts ----------------*/
+.scrollToTop {
+    position: absolute;
+    bottom: 60%;
+    right: 6%;
+    border: none;
+    padding: 8px;
+    width: 60px; 
+    height: 60px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+    transition: background-color 0.3s;
+    background: rgb(233, 233, 233); 
+}
+
+.scrollToTop:hover {
+    background: rgb(238, 210, 52); 
+}
+
+@media (max-width: 574px) {
+    .scrollToTop {
+        bottom: 35%;
+        width: 30px; /* Adjust the button size for smaller screens */
+        height: 30px;
+    }
+}