diff --git a/src/app/components/PageLayout.tsx b/src/app/components/PageLayout.tsx
index 72cdec9..28430ca 100644
--- a/src/app/components/PageLayout.tsx
+++ b/src/app/components/PageLayout.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import Header from './nav/Header';
 import Footer from './Footer';
 import GlobalAnimatedBackground from '../background/GlobalAnimatedBackground';
+import PageTransitionEffect from './animation/pageTransitionEffect';
 
 // Utility to detect mobile devices
 function isMobileDevice() {
@@ -35,7 +36,7 @@ export default function PageLayout({
       
       {/* Main content now participates in normal document flow */}
       <div className="flex-1 relative z-10 w-full flex flex-col">
-        {children}
+        <PageTransitionEffect>{children}</PageTransitionEffect>
       </div>
       
       {showFooter && (
diff --git a/src/app/components/animation/pageTransitionEffect.tsx b/src/app/components/animation/pageTransitionEffect.tsx
new file mode 100644
index 0000000..3d0ebe8
--- /dev/null
+++ b/src/app/components/animation/pageTransitionEffect.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+const PageTransitionEffect = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+
+  const variants = {
+    hidden: { opacity: 0, x: 0, y: 20 },
+    enter: { opacity: 1, x: 0, y: 0 },
+    exit: { opacity: 0, x: 0, y: -20 },
+  };
+
+  return (
+    <AnimatePresence
+      mode="wait"
+      onExitComplete={() => window.scrollTo(0, 0)}
+    >
+      <motion.div
+        key={pathname}
+        variants={variants}
+        initial="hidden"
+        animate="enter"
+        exit="exit"
+        transition={{ type: 'tween', duration: 0.3 }}
+        className="flex-1 w-full flex flex-col"
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default PageTransitionEffect;