diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index c0b210073..e0f282272 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -11,6 +11,7 @@ import { NotFound } from "./components/ui/not-found-2";
 import useTicketStore from "./store/ticketStore";
 import Toaster from "./components/shared/Toaster";
 import BugReportWidget from "./components/shared/BugReportWidget";
+import ScrollToTopButton from "./components/shared/ScrollToTopButton";
 import useRealtimeNotifications from "./hooks/useRealtimeNotifications";
 
 // Auth Components
@@ -230,6 +231,7 @@ function App() {
       <BrowserRouter>
         <TitleUpdater />
         <ScrollToTop />
+        <ScrollToTopButton />
         <Toaster />
         <BugReportWidget />
         <Routes>
@@ -248,6 +250,7 @@ function App() {
     <BrowserRouter>
       <TitleUpdater />
       <ScrollToTop />
+      <ScrollToTopButton />
       <Toaster />
       <BugReportWidget />
       <Routes>
diff --git a/Frontend/src/components/shared/ScrollToTopButton.jsx b/Frontend/src/components/shared/ScrollToTopButton.jsx
new file mode 100644
index 000000000..4e83c597b
--- /dev/null
+++ b/Frontend/src/components/shared/ScrollToTopButton.jsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import { ChevronUp } from "lucide-react";
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", toggleVisibility, { passive: true });
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      aria-label="Scroll to top"
+      className={`
+        fixed bottom-6 right-6 z-50
+        flex h-12 w-12 items-center justify-center
+        rounded-full bg-primary text-primary-foreground
+        shadow-lg hover:shadow-xl
+        transition-all duration-300 ease-in-out
+        focus-visible:outline-none focus-visible:ring-2
+        focus-visible:ring-ring focus-visible:ring-offset-2
+        ${isVisible
+          ? "translate-y-0 opacity-100 pointer-events-auto"
+          : "translate-y-4 opacity-0 pointer-events-none"
+        }
+      `}
+    >
+      <ChevronUp size={24} strokeWidth={2.5} />
+    </button>
+  );
+};
+
+export default ScrollToTopButton;