diff --git a/client/src/App.css b/client/src/App.css
index 22368b8e..fa03ae18 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -844,21 +844,3 @@ footer .input-group-text {
   border-width: 2px;
   border-radius: 10px;
 }
-#scroll-btn {       
-  opacity: 0;   
-  width: 40px;
-  height: 40px;
-  color:#eae9ea;
-  background-color:#777777 ;
-  position: fixed;
-  bottom: 10%;
-  right: 10%;    
-  border: 2px solid #fff;
-  border-radius: 60%; 
-  font: bold 20px monospace;       
-  transition: opacity 0.5s, transform 0.5s;
-}
-#scroll-btn.show {      
-  opacity: 1;  
-  transition: opacity 1s, transform 1s;     
-}
\ No newline at end of file
diff --git a/client/src/constants/top-button.js b/client/src/constants/top-button.js
deleted file mode 100644
index ebfba44b..00000000
--- a/client/src/constants/top-button.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const scrollTop = function () {
-    const scrollBtn = document.createElement("button");
-    scrollBtn.innerHTML = "↑";
-    scrollBtn.setAttribute("id", "scroll-btn");
-    document.body.appendChild(scrollBtn);
-  };
-  scrollTop();
-const scrollBtnDisplay = function () {
-    window.scrollY > window.innerHeight
-      ? scrollBtn.classList.add("show")
-      : scrollBtn.classList.remove("show");
-  };
-window.addEventListener("scroll", scrollBtnDisplay);
-const scrollWindow = function () {  
-    if (window.scrollY != 0) {
-      setTimeout(function () {
-        window.scrollTo(0, window.scrollY - 50);
-        scrollWindow();
-      }, 10);
-    }
-  };
-  scrollBtn.addEventListener("click", scrollWindow);
\ No newline at end of file
diff --git a/client/src/constants/top-button.jsx b/client/src/constants/top-button.jsx
new file mode 100644
index 00000000..d86234d4
--- /dev/null
+++ b/client/src/constants/top-button.jsx
@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+
+const BackToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Scroll event listener to show/hide the button
+  const handleScroll = () => {
+    const scrollY = window.scrollY;
+    const triggerPoint = 300;
+
+    if (scrollY > triggerPoint) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Add scroll event listener when the component mounts
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    // Remove the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  // Scroll to the top of the page
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <button
+      className={`btn btn-primary back-to-top ${isVisible ? 'visible' : 'hidden'}`}
+      onClick={scrollToTop}
+    >
+      Back to Top
+    </button>
+  );
+};
+
+export default BackToTopButton;