diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 07e766b..6ab792b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -12,21 +12,16 @@ import {
   CardContent,
 } from "./ui/card";
 import { Button } from "./ui/button";
-import { useRef, useContext, useEffect } from "react";
+import { useContext } from "react";
 import { ThemeContext } from "@/contexts/ThemeContext";
 
 function Navbar() {
-  const sectionRef=useRef(null);
-  useEffect(()=>{
-    sectionRef.current.scrollIntoView({behavior:"smooth"});
-  },[]);
   const currentTheme = useContext(ThemeContext);
   if (!currentTheme) return null;
   const location = useLocation();
 
   return (
-    <nav
-      className={`fixed top-0 left-0 w-full flex flex-col md:flex-row items-center justify-between px-4 py-3 md:px-10 md:py-4 shadow-sm ${currentTheme.theme === "light"
+    <nav className={`fixed top-0 left-0 w-full flex flex-col md:flex-row items-center justify-between px-4 py-3 md:px-10 md:py-4 shadow-sm ${currentTheme.theme === "light"
         ? "bg-gradient-to-r from-white to-gray-200 text-gray-600"
         : "bg-gray-800 text-gray-200"
         } z-50`}
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index da059ca..7fd5d44 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -1,11 +1,21 @@
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import { ThemeProvider } from "@/contexts/ThemeContext";
+import { useEffect } from "react";
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }, [pathname]);
+  return null;
+}
 
 function MainLayout() {
   return (
     <ThemeProvider>
+      <ScrollToTop />
       <Navbar />
       <Outlet />
       <Footer />