diff --git a/client/app/main/page.tsx b/client/app/main/page.tsx
index 27f9fb0e..fa967b1d 100644
--- a/client/app/main/page.tsx
+++ b/client/app/main/page.tsx
@@ -2,17 +2,22 @@
 
 import Navbar from "@/components/Navbar";
 import Feed from "@/components/feed/Feed";
+import ScrollToTopButton from "@/components/ui/ScrollToTopButton";
 import { Suspense } from "react";
+import { useRef } from "react";
 import MainQueryHandler from "./MainQueryHandler";
 
 export default function Home() {
+  const pageRef = useRef<HTMLDivElement>(null);
+
   return (
-    <div className="page-scroll">
+    <div ref={pageRef} className="page-scroll">
       <Navbar />
       <Suspense fallback={null}>
         <MainQueryHandler />
       </Suspense>
       <Feed />
+      <ScrollToTopButton scrollContainerRef={pageRef} />
     </div>
   );
 }
diff --git a/client/components/ui/ScrollToTopButton.tsx b/client/components/ui/ScrollToTopButton.tsx
new file mode 100644
index 00000000..bf5a9a2a
--- /dev/null
+++ b/client/components/ui/ScrollToTopButton.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { ArrowUp } from "lucide-react";
+import { RefObject, useEffect, useState } from "react";
+
+type ScrollToTopButtonProps = {
+  scrollContainerRef: RefObject<HTMLElement | null>;
+};
+
+export default function ScrollToTopButton({
+  scrollContainerRef,
+}: ScrollToTopButtonProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => setVisible(container.scrollTop > 400);
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [scrollContainerRef]);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      type="button"
+      aria-label="Scroll to top"
+      title="Scroll to top"
+      onClick={() => scrollContainerRef.current?.scrollTo({ top: 0, behavior: "smooth" })}
+      className="fixed bottom-6 right-6 z-40 rounded-full border border-border bg-card p-3 text-foreground shadow-lg transition hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-blue-500"
+    >
+      <ArrowUp className="h-5 w-5" aria-hidden="true" />
+    </button>
+  );
+}