diff --git a/next_webapp/src/app/[locale]/page.tsx b/next_webapp/src/app/[locale]/page.tsx
index 14827378fe..e58eb8ed4f 100644
--- a/next_webapp/src/app/[locale]/page.tsx
+++ b/next_webapp/src/app/[locale]/page.tsx
@@ -3,6 +3,7 @@ import Footer from "../../components/Footer";
 import Dashboard from "../../components/Dashboard";
 import Chatbot from "../chatbot/chatbot";
 import SocialMediaFeed from "@/components/SocialMediaFeed";
+import BackToTopButton from "@/components/BackToTopButton";
 import PartnersSection from "@/components/PartnersSection";
 import TestimonialsSection from "@/components/TestimonialsSection";
 import CityMetricCard from "@/components/CityMetricCard";
@@ -18,6 +19,7 @@ const Home = () => {
       <TestimonialsSection />
       <PartnersSection />
       <SocialMediaFeed />
+      <BackToTopButton />
       <Chatbot />
       <Footer />
 
diff --git a/next_webapp/src/components/BackToTopButton.jsx b/next_webapp/src/components/BackToTopButton.jsx
new file mode 100644
index 0000000000..23a0337e94
--- /dev/null
+++ b/next_webapp/src/components/BackToTopButton.jsx
@@ -0,0 +1,43 @@
+"use client";
+import { useEffect, useState } from "react";
+import { IoChevronUp } from "react-icons/io5";
+
+export default function BackToTopButton() {
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    const toggleVisibility = () => {
+      setVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    toggleVisibility();
+
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <button
+      onClick={() =>
+        window.scrollTo({
+          top: 0,
+          behavior: "smooth",
+        })
+      }
+      aria-label="Back to top"
+      title="Back to top"
+      className={`fixed right-4 bottom-24 z-[9998] text-3xl text-white bg-green-600 rounded-full p-3 shadow-lg hover:bg-green-700 transition-all duration-300 ease-in-out ${
+        visible
+          ? "opacity-100 translate-y-0 pointer-events-auto"
+          : "opacity-0 translate-y-3 pointer-events-none"
+      }`}
+    >
+      <IoChevronUp />
+    </button>
+  );
+}
\ No newline at end of file