diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index a5f71b4..b98832e 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -3,6 +3,7 @@ import Modal from "react-modal";
 import { Outlet, useLocation } from "react-router-dom";
 import { Footer } from "@components/Footer/Footer.tsx";
 import { Header } from "@components/Header/Header.tsx";
+import { useScrollToTop } from "@utils/hooks/useScrollToTop";
 
 export function Layout() {
   const location = useLocation();
@@ -10,10 +11,12 @@ export function Layout() {
     Modal.setAppElement("#root");
   }, []);
 
+  useScrollToTop();
+
   return (
     <>
       <Header />
-      <main className="relative flex flex-grow w-full flex-col items-center">
+      <main className="relative flex w-full flex-grow flex-col items-center">
         <Outlet />
       </main>
       {location && location.pathname !== "/" && <Footer />}
diff --git a/src/global.scss b/src/global.scss
index c0f20d4..7835653 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -12,6 +12,10 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   width: 100%;
   height: 100vh;
diff --git a/src/utils/hooks/useScrollToTop.ts b/src/utils/hooks/useScrollToTop.ts
new file mode 100644
index 0000000..6a18e61
--- /dev/null
+++ b/src/utils/hooks/useScrollToTop.ts
@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const useScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+};