diff --git a/components/Faq.tsx b/components/Faq.tsx
index e03b33e..b1038bf 100644
--- a/components/Faq.tsx
+++ b/components/Faq.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const Faq = ({ answer, question, onClick, show }: Props) => {
   return (
-    <div>
+    <div data-aos="fade-up">
       <div className="border-b-[1px] pt-2 pb-1 sm:pb-4 mt-3 w-[97%] mx-auto border-b-main-light_white flex justify-between items-center">
         <p className="w-[90%] text-main-white-700 font-miligramLight sm:font-miligramMedium text-[0.8rem] sm:text-[1.4rem]">
           {question}
diff --git a/components/GradientText.tsx b/components/GradientText.tsx
index c2b392a..4e494b6 100644
--- a/components/GradientText.tsx
+++ b/components/GradientText.tsx
@@ -3,10 +3,14 @@ import React from "react";
 interface Props {
   className?: string;
   text: string;
+  aos?: string;
 }
-const GradientText = ({ className, text }: Props) => {
+const GradientText = ({ className, text, aos }: Props) => {
   return (
-    <h1 className={`${className} font-medium bg-clip-text text-transparent`}>
+    <h1
+      data-aos={aos}
+      className={`${className} font-medium bg-clip-text text-transparent`}
+    >
       {text}
     </h1>
   );
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index b28c482..d8c57e0 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -62,7 +62,7 @@ const Navbar = () => {
         />
         <Button
           OnClick={() => {
-            handleNavigate("StartProject");
+            handleNavigate("/StartProject");
           }}
           text="Get Started"
           className="font-miligramMedium text-[0.8rem] xxl:text-[1rem] bg-main-greenOpt-200 border-[1px] border-main-lightTeal text-main-lightTeal px-4 py-[0.4rem] sm:py-[0.55rem] sm:px-8 rounded-lg hover:bg-main-lightTeal hover:text-white"
diff --git a/components/pages-components/blog-page-components/Card.tsx b/components/pages-components/blog-page-components/Card.tsx
index 4ef37a0..1590d38 100644
--- a/components/pages-components/blog-page-components/Card.tsx
+++ b/components/pages-components/blog-page-components/Card.tsx
@@ -14,6 +14,7 @@ const Card = ({ className }: { className?: string }) => {
   const currentPath = router?.pathname; // to get current route
   return (
     <div
+      data-aos="fade-up"
       className={`relative ${className} flex flex-wrap msm:flex-nowrap gap-3 sm:block md:w-1/3`}
     >
       <div
diff --git a/components/pages-components/blog-page-components/MainCard.tsx b/components/pages-components/blog-page-components/MainCard.tsx
index 306c8a2..02eee8c 100644
--- a/components/pages-components/blog-page-components/MainCard.tsx
+++ b/components/pages-components/blog-page-components/MainCard.tsx
@@ -14,10 +14,13 @@ const MainCard = () => {
 
   return (
     <div className="lg:flex mt-16 gap-9">
-      <div className="w-full lg:w-[68%] py-2">
+      <div data-aos="fade-right" className="w-full lg:w-[68%] py-2">
         <Image src={blogMain} alt="blogMain" className="w-full h-full" />
       </div>
-      <div className="w-full lg:w-[32%] mt-2 sm:mt-0 relative pb-14 lg:pb-0">
+      <div
+        data-aos="fade-left"
+        className="w-full lg:w-[32%] mt-2 sm:mt-0 relative pb-14 lg:pb-0"
+      >
         <h1 className="text-white text-[1.4rem] leading-[1.4rem] mt-2  cursor-pointer font-miligrambold">
           Hacking Humans is easier than hacking Computers
         </h1>
diff --git a/components/section-comonents/pricing/PricingCard.tsx b/components/section-comonents/pricing/PricingCard.tsx
index 6cdf4c1..f29b6a8 100644
--- a/components/section-comonents/pricing/PricingCard.tsx
+++ b/components/section-comonents/pricing/PricingCard.tsx
@@ -13,9 +13,11 @@ const PricingCard = ({
   isMobile,
   translateX,
   className,
+  aos,
 }: CardObject) => {
   return (
     <div
+      data-aos={aos}
       style={
         isMobile
           ? {
diff --git a/helper/constant.ts b/helper/constant.ts
index 5fbb92f..6a4e6b0 100644
--- a/helper/constant.ts
+++ b/helper/constant.ts
@@ -106,6 +106,7 @@ export interface CardObject {
   description: string;
   price: string;
   services: Array<string>;
+  aos?: string;
 }
 export const pricingCardData: Array<CardObject> = [
   {
diff --git a/package-lock.json b/package-lock.json
index 9a7aa71..d638a23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "koders-web",
       "version": "0.1.0",
       "dependencies": {
+        "aos": "^2.3.4",
         "next": "13.0.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -604,6 +605,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -913,6 +924,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2381,12 +2397,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4033,6 +4059,16 @@
         "picomatch": "^2.0.4"
       }
     },
+    "aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "requires": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -4237,6 +4273,11 @@
         }
       }
     },
+    "classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -5329,12 +5370,22 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
diff --git a/package.json b/package.json
index 77bbd74..436b080 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "aos": "^2.3.4",
     "next": "13.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/pages/Blogs/ReadMoreBlog.tsx b/pages/Blogs/ReadMoreBlog.tsx
index 764b990..1c927fe 100644
--- a/pages/Blogs/ReadMoreBlog.tsx
+++ b/pages/Blogs/ReadMoreBlog.tsx
@@ -1,6 +1,10 @@
 import Head from "next/head";
 import Image from "next/image";
 import React, { useState } from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
+
 import { backAero, blogMain, blogProfile, wideBlog } from "../../assets";
 import { Button, Divider, Footer, Navbar, Tag } from "../../components";
 
@@ -11,6 +15,14 @@ const ReadMoreBlog = () => {
       top: 0,
     });
   }, []);
+
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="bg-main-primary overflow-hidden relative">
       <Head>
@@ -20,27 +32,39 @@ const ReadMoreBlog = () => {
       <div className="py-16 mt-10 w-[91%] mx-auto">
         <Divider className="mt-16" />
         <Divider className="mt-6" />
-        <div className="flex justify-between items-center">
+        <div data-aos="fade-up" className="flex justify-between items-center">
           <span className="text-[1rem] text-main-light_white font-miligramTextMedium">
             SEP 22, 2022
           </span>
         </div>
-        <h1 className="text-white mt-4 text-[1.9rem] font-miligrambold">
+        <h1
+          data-aos="fade-up"
+          className="text-white mt-4 text-[1.9rem] font-miligrambold"
+        >
           Hacking Humans is easier than hacking Computers
         </h1>
-        <div className="flex items-center justify-start gap-3 mt-5">
+        <div
+          data-aos="fade-up"
+          className="flex items-center justify-start gap-3 mt-5"
+        >
           <Tag className="" text="Ethical Hacking" />
           <Tag className="" text="Cyber Security" />
         </div>
         <Divider className="mt-6" />
-        <div className="flex items-center">
+        <div data-aos="fade-up" className="flex items-center">
           <Image src={blogProfile} alt="profile" className="mr-3 h-9" />
           <span className="text-white font-miligramMedium">John Doe</span>
         </div>
         <Divider className="mt-11" />
-        <Image src={wideBlog} alt="blog img" className="w-full md:h-96" />
+        <Image
+          data-aos="fade-up"
+          src={wideBlog}
+          alt="blog img"
+          className="w-full md:h-96"
+        />
         <Divider className="mt-6" />
         <p
+          data-aos="fade-up"
           className="text-main-light_white mt-11 font-miligramTextBook"
           style={
             showMore
diff --git a/pages/Blogs/index.tsx b/pages/Blogs/index.tsx
index 79d50c8..54ec77c 100644
--- a/pages/Blogs/index.tsx
+++ b/pages/Blogs/index.tsx
@@ -1,5 +1,9 @@
 import Head from "next/head";
 import React from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
+
 import {
   Card,
   Divider,
@@ -15,15 +19,23 @@ const Blog = () => {
       top: 0,
     });
   }, []);
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
-    <div className="bg-main-primary px-[6%] overflow-hidden">
+    <div className="bg-main-primary overflow-hidden">
       <Head>
         <title>Blogs</title>
       </Head>
+      <Navbar />
       <div className="pb-10 pt-28 w-[91%] mx-auto relative">
-        <Navbar />
         <Divider className="mt-10" />
         <GradientText
+          aos="fade-up"
           className="w-fit mx-auto text-[2.2rem] leading-none mb-3 md:mb-0 md:leading-normal  sm:text-[2.8rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
           text="Blogs"
         />
@@ -35,10 +47,14 @@ const Blog = () => {
         </div>
         <Divider className="h-20" />
         <GradientText
+          aos="slide-left"
           className="w-fit mx-auto text-[2.2rem] leading-none mb-3 md:mb-0 md:leading-normal  sm:text-[2.8rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold xxl:pt-10"
           text="Wish your blog was here too?"
         />
-        <p className="text-[0.8rem] sm:text-[1.3rem] text-main-light_white text-center font-miligramLight xxl:pb-10">
+        <p
+          data-aos="slide-right"
+          className="text-[0.8rem] sm:text-[1.3rem] text-main-light_white text-center font-miligramLight xxl:pb-10"
+        >
           Submit your blog. Write to us at&nbsp;
           <span
             onClick={() => {
diff --git a/pages/Cancellation.tsx b/pages/Cancellation.tsx
index b9e4a14..0996fb6 100644
--- a/pages/Cancellation.tsx
+++ b/pages/Cancellation.tsx
@@ -1,5 +1,9 @@
 import Head from "next/head";
 import React from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
+
 import { Divider, Footer, GradientText, Navbar } from "../components";
 
 const Cancellation = () => {
@@ -8,6 +12,13 @@ const Cancellation = () => {
       top: 0,
     });
   }, []);
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="bg-main-primary overflow-hidden relative">
       <Head>
@@ -16,11 +27,15 @@ const Cancellation = () => {
       <Navbar />
       <div className="py-28 w-[95%] sm:w-[90%] mx-auto">
         <GradientText
+          aos="fade-up"
           className="text-[1.8rem] sm:text-[2.5rem] md:text-[2.8rem] mx-auto w-fit bg-gradient-to-r from-white to-main-teal font-miligrambold mt-16"
           text="Cancellation and Refund Policy"
         />
         <Divider className="mt-8" />
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify"
+        >
           All the services provided by Koders including Web Design, Web
           Development, Mobile Application Development, Software Development,
           Website Maintenance are accepted and carried out after a thorough
@@ -47,7 +62,10 @@ const Cancellation = () => {
           then we will act only refund or cancel services according to the
           following guidelines:
         </p>
-        <ul className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify list-disc pl-10 mt-3">
+        <ul
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify list-disc pl-10 mt-3"
+        >
           <li>
             Koders will refund you, in full, if a project has not started within
             30 days of making payment.
@@ -82,7 +100,10 @@ const Cancellation = () => {
             causes any loss to Koders.
           </li>
         </ul>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify mt-10">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify mt-10"
+        >
           We are eager to collaborate with you, and once we receive confirmation
           from you, we immediately take action and send your work in progress.
           As a result, if you alter your steps after confirmation, the amount
diff --git a/pages/PrivacyPolicy.tsx b/pages/PrivacyPolicy.tsx
index d013f40..e70a9b2 100644
--- a/pages/PrivacyPolicy.tsx
+++ b/pages/PrivacyPolicy.tsx
@@ -1,5 +1,8 @@
 import Head from "next/head";
 import React from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { Footer, GradientText, Navbar } from "../components";
 
@@ -9,6 +12,13 @@ const PrivacyPolicy = () => {
       top: 0,
     });
   }, []);
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="bg-main-primary overflow-hidden relative">
       <Head>
@@ -17,11 +27,15 @@ const PrivacyPolicy = () => {
       <Navbar />
       <div className="pb-10 pt-28 w-[95%] sm:w-[90%] mx-auto">
         <GradientText
+          aos="fade-up"
           className="text-[2.2rem] leading-none mb-3 md:mb-0 md:leading-normal  sm:text-[2.5rem] md:text-[2.8rem] mx-auto w-fit bg-gradient-to-r from-white to-main-teal font-miligrambold mt-16"
           text="Privacy Policy"
         />
         <br />
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 w-[96%] mx-auto text-justify"
+        >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
           a tristique sem vitae. Phasellus in nunc, suspendisse viverra sapien.
           Eget donec suspendisse mauris non. Lobortis turpis eu amet facilisis.
diff --git a/pages/StartProject.tsx b/pages/StartProject.tsx
index ae29078..00c6a19 100644
--- a/pages/StartProject.tsx
+++ b/pages/StartProject.tsx
@@ -1,5 +1,8 @@
 import Head from "next/head";
 import React, { useState } from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import {
   ButtonsGroup,
@@ -31,13 +34,23 @@ const StartProject = () => {
       top: 0,
     });
   }, []);
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="bg-main-primary overflow-hidden relative">
       <Head>
         <title>Start Project</title>
       </Head>
       <Navbar />
-      <div className="py-20 sm:py-28 w-[90%] md:w-[85%] mx-auto">
+      <div
+        data-aos="fade-up"
+        className="py-20 sm:py-28 w-[90%] md:w-[85%] mx-auto"
+      >
         <GradientText
           className="text-[2.2rem] leading-none mb-3 md:mb-0 md:leading-normal  sm:text-[2.8rem] w-fit mx-auto text-center mt-9 bg-gradient-to-r from-white to-main-teal font-miligrambold"
           text="Start your project"
@@ -52,6 +65,7 @@ const StartProject = () => {
         <Form />
         <Divider className="mt-12 xxl:mt-16" />
         <GradientText
+          aos="fade-up"
           className="text-[2.2rem] leading-none mb-3 md:mb-0 md:leading-normal  sm:text-[2.8rem]  w-fit mx-auto text-center bg-gradient-to-r from-white to-main-teal font-miligrambold pt-"
           text="Frequently Asked Questions"
         />
diff --git a/pages/TermsOfServic.tsx b/pages/TermsOfServic.tsx
index a7ff3ae..e8daeb7 100644
--- a/pages/TermsOfServic.tsx
+++ b/pages/TermsOfServic.tsx
@@ -1,9 +1,19 @@
 import Head from "next/head";
 import React from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { Divider, Footer, GradientText, Navbar } from "../components";
 
 const TermsOfServic = () => {
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="bg-main-primary overflow-hidden relative">
       <Head>
@@ -12,14 +22,21 @@ const TermsOfServic = () => {
       <Navbar />
       <div className="py-28 w-[95%] sm:w-[90%] mx-auto">
         <GradientText
+          aos="fade-up"
           className="text-[1.8rem] sm:text-[2.5rem] md:text-[2.8rem] mx-auto w-fit bg-gradient-to-r from-white to-main-teal font-miligrambold mt-16"
           text="Terms Of Services"
         />
         <Divider className="mt-8" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           Acceptance of Terms
         </h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           The Terms of Service set out below govern your use of and purchases
           made through the Koders website (including all web pages, sub-domains,
           and sub-parts contained within, the "website") and any services
@@ -38,20 +55,32 @@ const TermsOfServic = () => {
           not agree to any of these terms.
         </p>
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           Conditions to use
         </h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           Koders has the right, in its sole discretion, to deny anybody access
           to the software or services it provides, at any time and for any
           reason, including but not limited to a violation of these terms of
           use, in which case you must discontinue usage of Koders.
         </p>
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           License Grants
         </h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           Koders grants you a non-exclusive, non-transferable license for the
           term to use the services we provide for the specific purpose specified
           in this agreement. This is only in order to provide software services,
@@ -60,10 +89,16 @@ const TermsOfServic = () => {
         </p>
 
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           Lawful and / or prohibited use of the website
         </h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           As a condition of your use of the website, you shall not use the
           website for any purpose(s) that is unlawful or prohibited by the TOS.
           You shall not use the website in any manner that could damage,
@@ -83,10 +118,16 @@ const TermsOfServic = () => {
         </p>
 
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           Termination
         </h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           Koders may terminate your account and/or your right to use the
           services, as well as remove and discard any and all of your content
           within the services, at any time for any or no reason, including,
@@ -106,10 +147,16 @@ const TermsOfServic = () => {
         </p>
 
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           Trademark Information
         </h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           Koders' trademarks, service marks, and logos used and displayed in
           connection with the services are Koders' registered and/or
           unregistered trademarks or service marks. The trademarks may not be
@@ -122,8 +169,16 @@ const TermsOfServic = () => {
           trademark shall benefit Koders.
         </p>
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">Notices</h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
+          Notices
+        </h3>
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           Notices will be sent to the email address registered by the user of
           the service to familiarize them with this TOS. You consent to
           receiving the notices by email. The services may also give notices of
@@ -133,10 +188,16 @@ const TermsOfServic = () => {
           (ADDRESS)[1] [2] .
         </p>
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           Legal disputes
         </h3>
-        <p className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify">
+        <p
+          data-aos="fade-up"
+          className="font-miligramLight text-[1.05rem] text-main-white-700 text-justify"
+        >
           Please read this section carefully. It affects your rights and will
           have a substantial impact on how claims or disputes between you and
           Koders have against each other are resolved. You and Koders agree that
@@ -149,7 +210,7 @@ const TermsOfServic = () => {
           accordance with the provisions of this section.
         </p>
 
-        <div className="ml-10">
+        <div data-aos="fade-up" className="ml-10">
           <Divider className="mt-6" />
           <h4 className="font-miligrambold text-[1.6rem] text-white">
             Agreement to Arbitrate
@@ -196,10 +257,13 @@ const TermsOfServic = () => {
         </div>
 
         <Divider className="mt-10" />
-        <h3 className="font-miligrambold text-[2rem] text-white">
+        <h3
+          data-aos="fade-up"
+          className="font-miligrambold text-[2rem] text-white"
+        >
           Acceptance of Terms
         </h3>
-        <div className="ml-10">
+        <div data-aos="fade-up" className="ml-10">
           <h4 className="font-miligrambold text-[1.6rem] text-white mt-6">
             Entire Agreement
           </h4>
diff --git a/sections/Clients.tsx b/sections/Clients.tsx
index bd90416..3abc3a3 100644
--- a/sections/Clients.tsx
+++ b/sections/Clients.tsx
@@ -1,5 +1,8 @@
 import React from "react";
 import Image from "next/image";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { sleep } from "../helper";
 import { Divider, GradientText } from "../components";
@@ -33,10 +36,19 @@ const Clients = () => {
     }
   }, []);
 
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
+
   return (
     <div className="py-16 overflow-hidden xxl:py-[10rem]">
       <Divider className="mt-5 xl:my-10" />
       <GradientText
+        aos="fade-up"
         text="Trusted by the"
         className="text-[2rem]  leading-none mb-2 md:mb-0 md:leading-normal sm:text-[3rem] w-fit mx-auto text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
       />
@@ -68,7 +80,10 @@ const Clients = () => {
           Amazon
         </h2>
       )}
-      <div className="w-[85%] h-[43vh] xl:h-[60vh] overflow-hidden sm:w-[55%] mt-10 mx-auto shadow-client shadow-main-teal border-2 border-main-light_white">
+      <div
+        data-aos="fade-up"
+        className="w-[85%] h-[43vh] xl:h-[60vh] overflow-hidden sm:w-[55%] mt-10 mx-auto shadow-client shadow-main-teal border-2 border-main-light_white"
+      >
         {count === 0 && (
           <Image src={projectOne} alt="project" className="w-full h-full" />
         )}
diff --git a/sections/Newsletter.tsx b/sections/Newsletter.tsx
index 44ab309..3a367bb 100644
--- a/sections/Newsletter.tsx
+++ b/sections/Newsletter.tsx
@@ -1,22 +1,39 @@
 import React from "react";
 import Image from "next/image";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { aeroUp } from "../assets";
 import { Divider, GradientText } from "../components";
 
 const Newsletter = () => {
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="py-16 mb-2 xxl:py-[6rem]">
       <Divider className="mt-5" />
       <GradientText
+        aos="slide-right"
         className="w-[90%] sm:w-fit mx-auto leading-none mb-3 md:mb-0 md:leading-normal text-[2rem] sm:text-[3rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
         text="Subscribe to our Newsletter!"
       />
-      <p className="mt-2 text-[0.8rem] sm:text-[1.3rem] w-[80%] sm:w-1/2 lg:w-1/3 mx-auto text-center text-main-light_white pb-2 font-miligramText400 leading-none">
+      <p
+        data-aos="slide-left"
+        className="mt-2 text-[0.8rem] sm:text-[1.3rem] w-[80%] sm:w-1/2 lg:w-1/3 mx-auto text-center text-main-light_white pb-2 font-miligramText400 leading-none"
+      >
         Stay updated about the latest offers, insights, blogs, “technical” stuff
         and much more.
       </p>
-      <div className="w-[80%] sm:w-1/2 lg:w-1/3 border-2 border-main-teal mx-auto rounded-lg overflow-hidden flex mt-6 shadow-sm shadow-main-teal xxl:mt-14">
+      <div
+        data-aos="fade-up"
+        className="w-[80%] sm:w-1/2 lg:w-1/3 border-2 border-main-teal mx-auto rounded-lg overflow-hidden flex mt-6 shadow-sm shadow-main-teal xxl:mt-14"
+      >
         <input
           type="text"
           className="w-full px-4 py-1 outline-none border-none text-main-light_white placeholder:tracking-[2px] bg-transparent placeholder:text-main-light_white lett font-miligramMedium"
diff --git a/sections/Pricing.tsx b/sections/Pricing.tsx
index 1661812..ca0545d 100644
--- a/sections/Pricing.tsx
+++ b/sections/Pricing.tsx
@@ -1,4 +1,7 @@
 import React, { useState } from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { useUpdateSlide } from "../helper/hook";
 import { pricingCardData } from "../helper/constant";
@@ -16,6 +19,14 @@ const Pricing = () => {
     handleSliding.onSwipe("pricing");
   });
 
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
+
   return (
     <div
       id="pricingSec"
@@ -23,10 +34,14 @@ const Pricing = () => {
     >
       <Divider className="mt-5 xl:my-10" />
       <GradientText
+        aos="slide-left"
         className="w-[90%] leading-none mb-3 md:mb-0 md:leading-normal mx-auto sm:w-fit text-[2rem] sm:text-[3rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
         text="Pricing that suits your needs."
       />
-      <p className="text-[0.8rem] sm:text-[1.3rem] w-[80%] leading-none sm:w-1/2  lg:w-1/3 mx-auto text-center text-main-light_white pb-5 mt-2 font-miligramText400">
+      <p
+        data-aos="slide-right"
+        className="text-[0.8rem] sm:text-[1.3rem] w-[80%] leading-none sm:w-1/2  lg:w-1/3 mx-auto text-center text-main-light_white pb-5 mt-2 font-miligramText400"
+      >
         Choose your best plan, pay monthly or yearly and change or cancel any
         time.
       </p>
@@ -42,7 +57,7 @@ const Pricing = () => {
       <Divider className="mt-10 md:h-16" />
       <div className="hidden justify-center items-center md:flex gap-7 xl:gap-12 w-[96%] lg:w-[90%] mx-auto">
         {pricingCardData.map((item, i) => (
-          <PricingCard key={i} {...item} />
+          <PricingCard aos="fade-up" key={i} {...item} />
         ))}
       </div>
       <div
diff --git a/sections/Technologies.tsx b/sections/Technologies.tsx
index 70ae170..d47d721 100644
--- a/sections/Technologies.tsx
+++ b/sections/Technologies.tsx
@@ -1,5 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 const { v4 } = require("uuid");
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { toolsAndtechLogo } from "../assets";
 import { getRandomInt, sleep } from "../helper";
@@ -68,15 +71,27 @@ const Technologies = () => {
     }
   });
 
+  useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
+
   return (
     <div className="bg-main-secondary overflow-hidden h-[90vh] md:h-[60vh] lg:h-[90vh] xl:h-[90vh] xxl:h-[90vh]  relative flex justify-center items-center">
       <div className="absolute w-full h-full flex justify-center items-center">
         <div className="p-10 z-10 bg-main-secondary w-full mt-4">
           <GradientText
+            aos="slide-left"
             className="w-[90%] leading-none mb-3 md:mb-0 md:leading-normal mx-auto sm:w-fit text-[2rem] sm:text-[3rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
             text="Technologies that make sense"
           />
-          <p className="text-[0.8rem] sm:text-[1.3rem] mx-auto text-center text-main-light_white font-miligramText400">
+          <p
+            data-aos="slide-right"
+            className="text-[0.8rem] sm:text-[1.3rem] mx-auto text-center text-main-light_white font-miligramText400"
+          >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum
             dolor sit amet, consectetur adipiscing elit.
           </p>
diff --git a/sections/Testmonials.tsx b/sections/Testmonials.tsx
index 29e5b69..4be9bd7 100644
--- a/sections/Testmonials.tsx
+++ b/sections/Testmonials.tsx
@@ -1,6 +1,9 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import React, { useEffect, useState, useRef } from "react";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { sleep } from "../helper";
 import { TestmonialData, testmonialLogo } from "../helper/constant";
@@ -34,14 +37,25 @@ const Testmonials = () => {
       startAnimation();
     }
   });
+  useEffect(() => {
+    AOS.init({
+      easing: "ease-out",
+      once: true,
+      duration: 600,
+    });
+  }, []);
   return (
     <div className="py-16 xxl:py-[10rem]">
       <Divider className="mt-5 xl:my-10" />
       <GradientText
+        aos="slide-right"
         className="w-[90%]  leading-none mb-3 md:mb-0 md:leading-normal mx-auto sm:w-fit text-[2rem] sm:text-[3rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
         text="Don’t just take our word for it."
       />
-      <p className="text-[0.8rem] leading-none m-1 sm:text-[1.3rem] w-[80%] sm:w-1/2  lg:w-1/3 mx-auto text-center text-main-light_white font-miligramText400">
+      <p
+        data-aos="slide-left"
+        className="text-[0.8rem] leading-none m-1 sm:text-[1.3rem] w-[80%] sm:w-1/2  lg:w-1/3 mx-auto text-center text-main-light_white font-miligramText400"
+      >
         Take a look at what a few of our most successful customers have to say
         about Koders.
       </p>
diff --git a/sections/WhyKoders.tsx b/sections/WhyKoders.tsx
index e31d054..8792791 100644
--- a/sections/WhyKoders.tsx
+++ b/sections/WhyKoders.tsx
@@ -1,5 +1,8 @@
 import React from "react";
 import Image from "next/image";
+import AOS from "aos";
+
+import "aos/dist/aos.css";
 
 import { rightAero } from "../assets";
 import { whyWe } from "../helper/constant";
@@ -11,8 +14,21 @@ const WhyKoders = () => {
   React.useEffect(() => {
     handleSliding.onSwipe("whyKoders");
   });
+
+  React.useEffect(() => {
+    AOS.init({
+      easing: "ease-out-cubic",
+      once: true,
+      offset: 50,
+      duration: 2000,
+    });
+  }, []);
+
   return (
-    <div className="py-16 bg-main-secondary sm:h-auto lg:h-auto xxl:py-[10rem]">
+    <div
+      data-aos="fade-up"
+      className="py-16 bg-main-secondary sm:h-auto lg:h-auto xxl:py-[10rem]"
+    >
       <Divider className="mt-5 xl:my-10" />
       <h1 className="leading-none w-[90%] mx-auto sm:w-full text-[2rem] sm:text-[3rem] text-center font-medium text-white font-miligrambold">
         Why trust&nbsp;