diff --git a/components/ScrollToTop.jsx b/components/ScrollToTop.jsx
new file mode 100644
index 00000000..bd034641
--- /dev/null
+++ b/components/ScrollToTop.jsx
@@ -0,0 +1,38 @@
+import { useState, useEffect } from "react";
+
+const ScrollToTop = () => {
+  const [visible, setVisible] = useState(false);
+
+  // Show button after scrolling 300px
+  const toggleVisible = () => {
+    if (window.scrollY > 300) setVisible(true);
+    else setVisible(false);
+  };
+
+  // Scroll smoothly to top
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisible);
+    return () => window.removeEventListener("scroll", toggleVisible);
+  }, []);
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={`fixed bottom-10 right-10 p-3 text-white bg-blue-600 rounded-full shadow-lg transition-opacity duration-300 ${
+        visible ? "opacity-100" : "opacity-0 pointer-events-none"
+      }`}
+      aria-label="Scroll to top"
+    >
+      ↑
+    </button>
+  );
+};
+
+export default ScrollToTop;
diff --git a/pages/_app.js b/pages/_app.js
index 21041ebf..fcc542f2 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -3,6 +3,7 @@ import { Analytics } from "@vercel/analytics/react";
 import { SessionProvider } from "next-auth/react";
 
 import Layout from "../components/Layout/Layout";
+import ScrollToTop from "../components/ScrollToTop"; // <-- Import here
 
 import "../styles/external.css";
 import "../styles/globals.css";
@@ -33,8 +34,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
             </Script>
           </>
         )}
-        <Component {...pageProps} />;
+        <Component {...pageProps} />
         <Analytics />
+        <ScrollToTop /> {/* <-- Add the scroll-to-top button here */}
       </Layout>
     </SessionProvider>
   );