diff --git a/components/MultiLayerParallex.js b/components/MultiLayerParallex.js
index 92e847b..36dede3 100644
--- a/components/MultiLayerParallex.js
+++ b/components/MultiLayerParallex.js
@@ -1,41 +1,70 @@
-import { motion, useScroll, useTransform } from "framer-motion";
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 
-export default function MultiLayerParallax() {
+const MultiLayerParallax = () => {
   const ref = useRef(null);
-  const { scrollYProgress } = useScroll({
-    target: ref,
-    offset: ["start start", "end start"],
-  });
-  const backgroundY = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
-  const textY = useTransform(scrollYProgress, [0, 1], ["0%", "200%"]);
+  const animationFrameRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        const updateProgress = () => {
+          const progress = 1 - entry.intersectionRatio;
+          ref.current.style.setProperty("--scroll-progress", progress);
+          animationFrameRef.current = null; // Clear the animation frame reference
+        };
+
+        if (!animationFrameRef.current) {
+          animationFrameRef.current = requestAnimationFrame(updateProgress);
+        }
+      },
+      { threshold: Array.from({ length: 101 }, (_, i) => i / 100) }
+    );
+
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
 
   return (
     <div
       ref={ref}
       className="w-full h-screen overflow-hidden relative grid place-items-center"
+      style={{
+        "--scroll-progress": 1,
+      }}
     >
-      <motion.h1
-        style={{ y: textY }}
+      <h1
+        style={{
+          transform: `translateY(calc(var(--scroll-progress) * 350%))`,
+        }}
         className="font-bold text-white text-7xl md:text-9xl relative z-10"
       >
         PARALLAX
-      </motion.h1>
-
-      <motion.div
-        className="absolute inset-0 z-0 bg-bottom bg-cover"
+      </h1>
+      <div
+        className="absolute inset-0 z-0 mix-blend-color-dodge"
         style={{
           backgroundImage: `url(/image-full.png)`,
-          y: backgroundY,
+          backgroundPosition: "bottom",
+          backgroundSize: "cover",
+          transform: `translateY(calc(var(--scroll-progress) * 50%))`
+
         }}
       />
-      
       <div
-        className="absolute inset-0 z-20 bg-bottom bg-cover"
+        className="absolute inset-0 z-20"
         style={{
           backgroundImage: `url(/image-bottom.png)`,
+          backgroundPosition: "bottom",
+          backgroundSize: "cover",
         }}
       />
     </div>
   );
-}
+};
+
+export default MultiLayerParallax;
diff --git a/pages/testenv/index.js b/pages/testenv/index.js
new file mode 100644
index 0000000..de4675e
--- /dev/null
+++ b/pages/testenv/index.js
@@ -0,0 +1,58 @@
+import { motion, useScroll, useTransform } from "framer-motion";
+import React, { useRef } from "react";
+
+export default function ParallaxTest() {
+  const ref = useRef(null);
+
+  // Use useScroll to track the scroll progress of the ref element
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end end"],
+  });
+
+  // Transform the Y position based on scroll progress
+  const imageY = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]);
+
+  return (
+    <div style={{ height: "200vh", overflowY: "scroll" }}>
+      {/* Scrollable container */}
+      <div
+        ref={ref}
+        style={{
+          height: "150vh",
+          position: "relative",
+          backgroundColor: "#0a0a0a",
+          color: "#fff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        {/* Parallax Image */}
+        <motion.div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundImage: 'url(/image-full.png)',
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            y: imageY, // Apply the Y transform
+          }}
+        />
+
+        {/* Foreground Text */}
+        <h1 style={{ zIndex: 1, fontSize: "3rem" }}>
+          Scroll to see the Parallax Effect
+        </h1>
+      </div>
+      {/* Additional content to ensure scrolling */}
+      <div style={{ height: "100vh", backgroundColor: "#06141D" }}>
+        <p style={{ color: "#fff", padding: "20px" }}>More content below...</p>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/work2/index.js b/pages/work2/index.js
index 52ec9f8..72e7ee6 100644
--- a/pages/work2/index.js
+++ b/pages/work2/index.js
@@ -1,9 +1,65 @@
+import MultiLayerParallax from "../../components/MultiLayerParallex";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
 const work2 = () => {
-    return(
-        <div>
-            work2
-        </div>
-    )
+    return (
+        <main className={`${inter.className} overflow-y-auto h-screen`}>
+            {/* Parallax Section */}
+            <div className="relative">
+                <MultiLayerParallax />
+            </div>
+            
+            {/* Content Section */}
+            <div className="w-full bg-[#06141D]">
+                <div className="max-w-lg space-y-4 mx-auto py-24 text-neutral-300">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
+                        earum nobis quasi repellat. Amet facere nulla dolorum accusantium
+                        sit dolores odio excepturi facilis laboriosam officiis dolorem,
+                        nobis reprehenderit molestiae.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
+                        earum nobis quasi repellat. Amet facere nulla dolorum accusantium
+                        sit dolores odio excepturi facilis laboriosam officiis dolorem,
+                        nobis reprehenderit molestiae.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
+                        earum nobis quasi repellat. Amet facere nulla dolorum accusantium
+                        sit dolores odio excepturi facilis laboriosam officiis dolorem,
+                        nobis reprehenderit molestiae.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
+                        earum nobis quasi repellat. Amet facere nulla dolorum accusantium
+                        sit dolores odio excepturi facilis laboriosam officiis dolorem,
+                        nobis reprehenderit molestiae.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
+                        earum nobis quasi repellat. Amet facere nulla dolorum accusantium
+                        sit dolores odio excepturi facilis laboriosam officiis dolorem,
+                        nobis reprehenderit molestiae.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
+                        earum nobis quasi repellat. Amet facere nulla dolorum accusantium
+                        sit dolores odio excepturi facilis laboriosam officiis dolorem,
+                        nobis reprehenderit molestiae.
+                    </p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam quae
+                        earum nobis quasi repellat. Amet facere nulla dolorum accusantium
+                        sit dolores odio excepturi facilis laboriosam officiis dolorem,
+                        nobis reprehenderit molestiae.
+                    </p>
+                </div>
+            </div>
+        </main>
+    );
 }
 
-export default work2;
\ No newline at end of file
+export default work2;
diff --git a/public/image-bottom.png b/public/image-bottom.png
new file mode 100644
index 0000000..007c76d
Binary files /dev/null and b/public/image-bottom.png differ
diff --git a/public/image-full.png b/public/image-full.png
new file mode 100644
index 0000000..2013751
Binary files /dev/null and b/public/image-full.png differ