diff --git a/package-lock.json b/package-lock.json
index d6ddfac0..61e2a6a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
         "react-router-dom": "^6.21.3",
+        "react-scroll-to-top": "^3.0.0",
         "react-top-loading-bar": "^2.3.1"
       },
       "devDependencies": {
@@ -3442,6 +3443,14 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-scroll-to-top": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-3.0.0.tgz",
+      "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || 17.x || ^18"
+      }
+    },
     "node_modules/react-top-loading-bar": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-2.3.1.tgz",
@@ -4169,4 +4178,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 9b40f70c..6182ecf0 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.21.3",
+    "react-scroll-to-top": "^3.0.0",
     "react-top-loading-bar": "^2.3.1"
   },
   "devDependencies": {
@@ -28,4 +29,4 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "vite": "^5.0.8"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/BackToTop.jsx b/src/components/BackToTop.jsx
new file mode 100644
index 00000000..741b57e5
--- /dev/null
+++ b/src/components/BackToTop.jsx
@@ -0,0 +1,10 @@
+import ScrollToTop from "react-scroll-to-top";
+
+function BackToTop() {
+  return (
+    <div>
+      <ScrollToTop smooth />
+    </div>
+  );
+}
+export default BackToTop;
\ No newline at end of file
diff --git a/src/components/Pages/MainPage.jsx b/src/components/Pages/MainPage.jsx
index 4f5e425e..6d43623b 100644
--- a/src/components/Pages/MainPage.jsx
+++ b/src/components/Pages/MainPage.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import ProjectCards from "../Cards/ProjectCards";
 import "./mainpage.css";
 import Dashboard from "./Dashboard";
+import BackToTop from '../BackToTop';
 
 const MainPage = (props) => {
   const { category, routes, setProgress } = props;
@@ -94,6 +95,7 @@ const MainPage = (props) => {
         </select>
       </div>
       <ProjectCards projectsData={filteredData} tech={getTech(category)} />
+      <BackToTop/>
     </div>
   );
 };