diff --git a/src/App.jsx b/src/App.jsx
index 87f9518..f49c639 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,7 @@ import defaultPlantData from './assets/defaultPlants.json'
 import Background from './components/Background';
 import { config } from './logic/constants';
 import Debug from './pages/Debug';
+import ScrollToTop from './components/ScrollToTop'
 
 function App() {
   useEffect(() => {
@@ -27,6 +28,7 @@ function App() {
       <div className='bg-transparent z-50'>
         <Background />
         <HashRouter>
+          <ScrollToTop />
           <Routes>
             <Route path='/' element={<Home />} />
             <Route path='/garden' element={<Garden />} />
diff --git a/src/components/ScrollToTop.jsx b/src/components/ScrollToTop.jsx
new file mode 100644
index 0000000..e4a4583
--- /dev/null
+++ b/src/components/ScrollToTop.jsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+    const { pathname } = useLocation();
+  
+    useEffect(() => {
+      window.scrollTo(0, 0);
+    }, [pathname]);
+  
+    return null;
+  }
\ No newline at end of file