diff --git a/apps/formbricks-com/components/home/ScrollToTop.tsx b/apps/formbricks-com/components/home/ScrollToTop.tsx
new file mode 100644
index 0000000000..6c173e6456
--- /dev/null
+++ b/apps/formbricks-com/components/home/ScrollToTop.tsx
@@ -0,0 +1,44 @@
+import { Button } from "@formbricks/ui/Button";
+import { ArrowUpIcon } from "@heroicons/react/24/solid";
+import throttle from "lodash/throttle";
+import { useCallback, useEffect, useState } from "react";
+
+const ScrollToTopButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, []);
+
+  useEffect(() => {
+    const toggleVisible = () => {
+      const scrolled = document.documentElement.scrollTop;
+      if (scrolled > 500) {
+        setVisible(true);
+      } else if (scrolled <= 500) {
+        setVisible(false);
+      }
+    };
+
+    const throttledToggleVisible = throttle(toggleVisible, 200);
+
+    window.addEventListener("scroll", throttledToggleVisible);
+
+    return () => window.removeEventListener("scroll", throttledToggleVisible);
+  }, []);
+
+  return (
+    <div className="fixed bottom-20 right-10 z-50" style={{ display: visible ? "inline" : "none" }}>
+      <Button
+        className="flex w-12 items-center justify-center bg-slate-900/10 px-1 py-2 hover:bg-slate-900/20 hover:opacity-100 dark:bg-slate-50/5 dark:hover:bg-slate-50/30"
+        onClick={scrollToTop}>
+        <ArrowUpIcon className="h-6 w-6 text-slate-900 dark:text-slate-50" />
+      </Button>
+    </div>
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/apps/formbricks-com/pages/index.tsx b/apps/formbricks-com/pages/index.tsx
index 5915a86874..0562af1bef 100644
--- a/apps/formbricks-com/pages/index.tsx
+++ b/apps/formbricks-com/pages/index.tsx
@@ -3,6 +3,7 @@ import Features from "@/components/home/Features";
 import GitHubSponsorship from "@/components/home/GitHubSponsorship";
 import Hero from "@/components/home/Hero";
 import Highlights from "@/components/home/Highlights";
+import ScrollToTopButton from "@/components/home/ScrollToTop";
 import Steps from "@/components/home/Steps";
 import BestPractices from "@/components/shared/BestPractices";
 import BreakerCTA from "@/components/shared/BreakerCTA";
@@ -19,6 +20,7 @@ const IndexPage = () => (
     <BestPractices />
     <Features />
     <Highlights />
+    <ScrollToTopButton />
     <div className="block lg:hidden">
       <GitHubSponsorship />
     </div>