diff --git a/app/page.tsx b/app/page.tsx
index 357edae..fdc039d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,6 @@
 "use client"
 
-import { Button } from "components/Button/Button"
-
-import { useState } from "react"
+import { useRef, useState } from "react"
 
 import "../styles/custom.css"
 import AboutUs from "components/aboutUs/AboutUs"
@@ -10,6 +8,7 @@ import Hero01 from "components/Hero01/Hero01"
 import OurServices from "components/OurServices/OurServices"
 import Portfolio from "components/Portfolio/Portfolio"
 import ContactUs from "components/ContactUs/ContactUs"
+import { motion, useScroll } from "framer-motion"
 
 export default function Web() {
   const [init, setInit] = useState(false)
@@ -22,6 +21,11 @@ export default function Web() {
     hidden: { opacity: 0, y: 20 },
     visible: { opacity: 1, y: 0, transition: { duration: 0.9, staggerChildren: 0.1 } },
   }
+  const ref = useRef<HTMLDivElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["0 1", "0.9 1.9"],
+  })
   return (
     <div>
       <section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
@@ -30,18 +34,33 @@ export default function Web() {
       <section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
         <AboutUs />
       </section>
-
-      <section className="mt-[3%] bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
-        <OurServices />
-      </section>
-
-      <section className="mb-10 h-[20%] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
-        <Portfolio />
-      </section>
-
-      <section className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
-        <ContactUs />
-      </section>
+      <motion.div
+        initial={{ opacity: 0.5, scale: 0.8 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.7 }}
+      >
+        <section className="mt-[3%] bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
+          <OurServices />
+        </section>
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0.5, scale: 0.8 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.7 }}
+      >
+        <section className="mb-10 h-[20%] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
+          <Portfolio />
+        </section>
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0.5, scale: 0.8 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.7 }}
+      >
+        <section className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
+          <ContactUs />
+        </section>
+      </motion.div>
     </div>
   )
 }
diff --git a/components/aboutUs/AboutUs.tsx b/components/aboutUs/AboutUs.tsx
index 2d3d5be..b8cb50d 100644
--- a/components/aboutUs/AboutUs.tsx
+++ b/components/aboutUs/AboutUs.tsx
@@ -4,8 +4,10 @@ import { BsPlayCircle } from "react-icons/bs"
 import { Modal } from "components/Modal/Modal"
 import { useState } from "react"
 import { motion } from "framer-motion"
+
 export default function AboutUs() {
   const [isModalOpen, setIsModalOpen] = useState(false)
+
   return (
     <div
       className=" h-[60%] rounded-[3rem] max-md:rounded-none"
@@ -16,11 +18,7 @@ export default function AboutUs() {
         backgroundRepeat: "no-repeat",
       }}
     >
-      <motion.div
-        animate={{ y: -50 }}
-        transition={{ delay: 1 }}
-        className="flex w-[100%] justify-around pb-[10vh] pt-[5vh] max-md:flex-wrap"
-      >
+      <div className="flex w-[100%] justify-around pb-[10vh] pt-[5vh] max-md:flex-wrap">
         <div className="mx-auto max-w-screen-xl px-4 py-8 lg:py-16">
           <div className="mx-auto text-left text-white">
             <h4 className="bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 bg-clip-text pt-20 font-bold text-transparent ">
@@ -81,7 +79,7 @@ export default function AboutUs() {
             </div>
           </div>
         </div>
-      </motion.div>
+      </div>
     </div>
   )
 }
diff --git a/package.json b/package.json
index 85edfc9..4c9c901 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "@tsparticles/engine": "^3.3.0",
     "@tsparticles/react": "^3.0.0",
     "@vercel/otel": "^0.3.0",
+    "aos": "^2.3.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "flowbite-react": "^0.9.0",
@@ -65,6 +66,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-intersection-observer": "^9.8.2",
+    "react-reveal": "^1.2.2",
+    "react-scroll-motion": "^0.3.3",
     "react-tsparticles": "^2.12.2",
     "tailwind-merge": "^2.2.2",
     "tailwind-variants": "^0.2.1",
diff --git a/utils/Animation.tsx b/utils/Animation.tsx
new file mode 100644
index 0000000..f3b15e5
--- /dev/null
+++ b/utils/Animation.tsx
@@ -0,0 +1,33 @@
+import React from "react"
+import { motion, useAnimation } from "framer-motion"
+import { useInView } from "react-intersection-observer"
+
+const AnimatedDiv = () => {
+  const controls = useAnimation()
+  const { ref, inView } = useInView()
+
+  React.useEffect(() => {
+    if (inView) {
+      controls.start("visible")
+    } else {
+      controls.start("hidden")
+    }
+  }, [controls, inView])
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <motion.div
+        ref={ref}
+        initial="hidden"
+        animate={controls}
+        variants={{
+          visible: { scale: 1, opacity: 1 },
+          hidden: { scale: 0, opacity: 0 },
+        }}
+        transition={{ duration: 0.5 }}
+      />
+    </div>
+  )
+}
+
+export default AnimatedDiv
diff --git a/yarn.lock b/yarn.lock
index ebf54ba..957feb7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8341,6 +8341,15 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+aos@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/aos/-/aos-2.3.4.tgz#eb1c29f5c1806a197cf6323080747547edd3db8e"
+  integrity sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==
+  dependencies:
+    classlist-polyfill "^1.0.3"
+    lodash.debounce "^4.0.6"
+    lodash.throttle "^4.0.1"
+
 app-root-dir@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz"
@@ -9326,6 +9335,11 @@ class-variance-authority@^0.7.0:
   dependencies:
     clsx "2.0.0"
 
+classlist-polyfill@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+  integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==
+
 classnames@2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
@@ -14025,7 +14039,7 @@ lodash.castarray@^4.4.0:
   resolved "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz"
   integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
 
-lodash.debounce@^4.0.8:
+lodash.debounce@^4.0.6, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -14095,6 +14109,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
+lodash.throttle@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.uniqby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz"
@@ -15947,7 +15966,7 @@ promzard@^1.0.0:
   dependencies:
     read "^2.0.0"
 
-prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -16209,6 +16228,11 @@ react-inspector@^6.0.0:
   resolved "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz"
   integrity sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==
 
+react-intersection-observer@^9.8.2:
+  version "9.8.2"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz#a45db2441909a4d2f310de381686e151f016691d"
+  integrity sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==
+
 react-is@18.1.0:
   version "18.1.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz"
@@ -16272,6 +16296,18 @@ react-remove-scroll@^2.5.6:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-reveal@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
+  integrity sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==
+  dependencies:
+    prop-types "^15.5.10"
+
+react-scroll-motion@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/react-scroll-motion/-/react-scroll-motion-0.3.3.tgz#8d9a562f98b7b59f05079ac95510f141fa6718f8"
+  integrity sha512-Q33prpcdWDfQaHVmED7bo/EReUEBHfL6mOfvMGFP3FhDxTKddIoocMcd3bT9qw2KQ/fqNdJNADf7aiHWSLkXuQ==
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz"