diff --git a/package-lock.json b/package-lock.json
index 0313c4da..d2d4660a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38001,4 +38001,4 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     }
   }
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 9ff336e3..4c504836 100644
--- a/package.json
+++ b/package.json
@@ -59,4 +59,4 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.3"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index d8e7128b..3b960891 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,6 +27,7 @@ import Helmet from "react-helmet";
 import Freelancer from "./Components/FreeLancer/Freelancer";
 import router from "./configs/router";
 import ChatbotIcon from './Components/ChatbotIcon';
+import GoToTop from './Components/gototop';
 
 
 function App() {
@@ -49,6 +50,7 @@ function App() {
       <div>
         <RouterProvider router={router} />
       </div>
+      <GoToTop />
       <Footer />
       <ChatbotIcon />
     </div>
diff --git a/src/Components/Footer.css b/src/Components/Footer.css
index 49f8a9ba..fff12db6 100644
--- a/src/Components/Footer.css
+++ b/src/Components/Footer.css
@@ -7,6 +7,7 @@
 }
 .scrolltop{
   size: 20px;
+
 }
 .footer-container {
   display: flex;
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
index 28d4901e..2bc21498 100644
--- a/src/Components/Footer.js
+++ b/src/Components/Footer.js
@@ -69,13 +69,7 @@ const Footer = () => {
           &copy; 2024 UniCollab. All rights reserved.
         </div>
       </div>
-      <div className='scrolltop'>
-      <div style={{ textAlign: 'center', padding: '20px'  }}>
-        <button onClick={scrollToTop} className="button btn">
-          To the Top
-        </button>
-      </div>
-    </div>
+     
     </div>
   );
 }
diff --git a/src/Components/gototop.js b/src/Components/gototop.js
new file mode 100644
index 00000000..a3371aac
--- /dev/null
+++ b/src/Components/gototop.js
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import { FaArrowUp } from "react-icons/fa";
+
+const GoToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const goToTop = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <Wrapper onClick={goToTop}>
+          <FaArrowUp className="top-btn--icon" />
+        </Wrapper>
+      )}
+    </>
+  );
+};
+
+const Wrapper = styled.div`
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 25px;
+  left: 40px;
+  color: white;
+  background-color: #ff21bc;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+  &:hover {
+    background-color: darkturquoise;
+
+  }
+`;
+
+export default GoToTop;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 12e451e8..c290d2bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11622,4 +11622,4 @@ yargs@^17.3.1, yargs@^17.7.2:
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
\ No newline at end of file