diff --git a/src/components/About/index.jsx b/src/components/About/index.jsx
index aa30848..99628d0 100644
--- a/src/components/About/index.jsx
+++ b/src/components/About/index.jsx
@@ -1,65 +1,102 @@
-import './style.css';
+import "./style.css";
 import { BsHeadsetVr } from "react-icons/bs";
 import { FaGlobeAmericas } from "react-icons/fa";
-import 'aos/dist/aos.css'
+import Aos from "aos";
+import "aos/dist/aos.css";
 
 // images
-import algos from './img/algocs.png';
-import gdsc from './img/gdsc.png';
-import iosc from './img/iosc.png';
-
-import {MIDDLE_SECTION} from '../../Module/General';
+import algos from "./img/algocs.png";
+import gdsc from "./img/gdsc.png";
+import iosc from "./img/iosc.png";
 
+import { MIDDLE_SECTION } from "../../Module/General";
+import { useEffect } from "react";
 
 function LogoSectionAbout() {
+  useEffect(() => {
+    Aos.init({ duration: 400 });
+  }, []);
   return (
-    <div className="LogoSectionAbout"  >
+    <div className="LogoSectionAbout" data-aos="fade-right">
       {/* <BsHeadsetVr fontSize={200} className='arHeadset'/>
       <FaGlobeAmericas fontSize={200} className='globe'/> */}
       <h1>{MIDDLE_SECTION.TITLE}</h1>
       <div>
-      <p className='long-desc'>
-
-      The largest code fest of Delhi-NCR is back! ⚡<br />
-        Join this 24-Hour Hackathon to hustle and shine through 5 amazing tracks, Embark on an Odyssey to learn new technologies, seek guidance from experienced mentors and engrave your name on the boards of our esteemed Judges.<br />
-        Witness prodigious Speakers of the Nation live! ✨<br />
-        Not just that, win huge prizes and hampers by brainstorming and creating the best hack!<br />
-        Be ready to sail through an amazing night of fun, code and much more on 28th & 29th April! 💫
-
-      </p>
+        <p className="long-desc">
+          The largest code fest of Delhi-NCR is back! ⚡<br />
+          Join this 24-Hour Hackathon to hustle and shine through 5 amazing
+          tracks, Embark on an Odyssey to learn new technologies, seek guidance
+          from experienced mentors and engrave your name on the boards of our
+          esteemed Judges.
+          <br />
+          Witness prodigious Speakers of the Nation live! ✨<br />
+          Not just that, win huge prizes and hampers by brainstorming and
+          creating the best hack!
+          <br />
+          Be ready to sail through an amazing night of fun, code and much more
+          on 28th & 29th April! 💫
+        </p>
       </div>
     </div>
   );
 }
 
 function Logo() {
+  useEffect(() => {
+    Aos.init({ duration: 400 });
+  }, []);
   return (
-      <img className="Logo-about" src={MIDDLE_SECTION.LOGO}  alt="Innohacks" />
+    <img
+      data-aos="fade-left"
+      className="Logo-about"
+      src={MIDDLE_SECTION.LOGO}
+      alt="Innohacks"
+    />
   );
 }
 
 function CommunityPartner() {
-
-  return(
-    <div className="community-partner" >
-    <h1 className="title_community" >Community Partners</h1>
-    <div className="community_logo_container" >
-      <div className='logo-community' style={{color: 'white', textAlign: 'center', margin: "0 5% 2% 5%"}}>
-        <img src={iosc} className="iosc_logo" width="100%" alt="" />
-        <p >IOSC</p>
-      </div>
-      <div className='logo-community' style={{color: 'white', textAlign: 'center', margin: '0 5% 2% 5%'}}>
-        <img src={gdsc} className="iosc_logo" width="100%" alt=""/>
-        <p >GDSC-ABESEC</p>
+  useEffect(() => {
+    Aos.init({ duration: 400 });
+  }, []);
+  return (
+    <div className="community-partner">
+      <h1
+        className="title_community"
+        data-aos="zoom-in"
+        data-aos-anchor-placement="top-bottom"
+        data-aos-duaration="800"
+      >
+        Community Partners
+      </h1>
+      <div className="community_logo_container">
+        <div
+          className="logo-community"
+          data-aos="fade-up"
+          style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
+        >
+          <img src={iosc} className="iosc_logo" width="100%" alt="" />
+          <p>IOSC</p>
+        </div>
+        <div
+          className="logo-community"
+          data-aos="fade-up"
+          style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
+        >
+          <img src={gdsc} className="iosc_logo" width="100%" alt="" />
+          <p>GDSC-ABESEC</p>
+        </div>
+        <div
+          className="logo-community"
+          data-aos="fade-up"
+          style={{ color: "white", textAlign: "center", margin: "0 5% 2% 5%" }}
+        >
+          <img src={algos} className="iosc_logo" width="100%" alt="" />
+          <p>ALGOCS</p>
+        </div>
       </div>
-      <div  className='logo-community' style={{color: 'white', textAlign: 'center', margin: '0 5% 2% 5%'}}>
-        <img src={algos} className="iosc_logo" width="100%" alt=""/>
-        <p >ALGOCS</p>
-       </div>
     </div>
-  </div>
-
   );
 }
 
-export {Logo, LogoSectionAbout, CommunityPartner};
+export { Logo, LogoSectionAbout, CommunityPartner };
diff --git a/src/components/PastEdition/index.jsx b/src/components/PastEdition/index.jsx
index 998df5d..0b081ae 100644
--- a/src/components/PastEdition/index.jsx
+++ b/src/components/PastEdition/index.jsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import Aos from "aos"
+import "aos/dist/aos.css"
 import "./style.scss";
 import one from "./assets/2.jpg";
 import two from "./assets/1.jpg";
@@ -17,6 +19,7 @@ function PastEdition() {
   };
 
   useEffect(() => {
+    Aos.init({duration:400})
     const intervalId = setInterval(() => {
       setMainImage(thumbnails[Math.floor(Math.random() * 6)]);
     }, 5000);
@@ -26,7 +29,15 @@ function PastEdition() {
 
   return (
     <div className="past-edition-container">
-      <h1 className="past-heading" style={{fontWeight:900, marginTop:"100px",marginBottom:"20px"}}>Past Edition</h1>
+      <h1
+        data-aos="zoom-in"
+        data-aos-anchor-placement="top-bottom"
+        data-aos-duaration="800"
+        className="past-heading"
+        style={{ fontWeight: 900, marginTop: "100px", marginBottom: "20px" }}
+      >
+        Past Edition
+      </h1>
       <img src={mainImage} id="main" />
       <div id="thumbnails">
         {thumbnails.map((thumbnail, index) => (
diff --git a/src/components/Schedule/schedule.jsx b/src/components/Schedule/schedule.jsx
index 8eb8676..854a167 100644
--- a/src/components/Schedule/schedule.jsx
+++ b/src/components/Schedule/schedule.jsx
@@ -1,31 +1,41 @@
-import './schedule.css'
-
-
+import "./schedule.css";
+import Aos from "aos"
+import "aos/dist/aos.css"
+import { useEffect } from "react";
 const Schedule = () => {
-return(  
-  <>
-  
-  <div>
-  <h1
-              data-aos="zoom-in"
-              data-aos-duration="800"
-              id="prizes"
-              className="prize_heading"
-              style={{ fontFamily: "repo-bold", marginBottom: "10rem"  }}
-            >
-            Schedule
-          </h1>
-  </div>
-
-  <div className="image-container">
-            
-       
-            <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/mobileviewupdated.png" alt="" className="mobile-image"/>
-            <img src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png" alt="" className="laptop-image"/>
-          </div>
-</>
-)    
+  useEffect(()=>{
+    Aos.init({duration:400})
+  },[])
+  return (
+    <>
+      <div>
+        <h1
+          data-aos="zoom-in"
+          data-aos-duration="800"
+          id="prizes"
+          className="prize_heading"
+          style={{ fontFamily: "repo-bold", marginBottom: "10rem" }}
+        >
+          Schedule
+        </h1>
+      </div>
 
+      <div className="image-container">
+        <img
+          src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/mobileviewupdated.png"
+          alt=""
+          className="mobile-image"
+          data-aos="fade-right"
+        />
+        <img
+          src="https://s3.ap-south-1.amazonaws.com/innohacks3.0/Copy+of+Copy+of+Innohacks+3.0+brochure+(2)+(1).png"
+          alt=""
+          className="laptop-image"
+          data-aos="fade-right"
+        />
+      </div>
+    </>
+  );
 };
 
-export default Schedule;
\ No newline at end of file
+export default Schedule;
diff --git a/src/containers/Home/HomePage.jsx b/src/containers/Home/HomePage.jsx
index 8e750bc..cf947bf 100644
--- a/src/containers/Home/HomePage.jsx
+++ b/src/containers/Home/HomePage.jsx
@@ -1,5 +1,5 @@
 import { UseMedia } from "hooks/useMedia";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
@@ -36,10 +36,12 @@ import {
   certificateSponsor,
   TeamInfo,
 } from "../../Module/General";
-import PastWinner from "components/pastWinners/index.jsx";
+// import PastWinner from "components/pastWinners/index.jsx";
 import Map from "components/map/index.jsx";
 import Organiser from "components/organisers/Organiser.jsx";
 import PastEdition from "components/PastEdition";
+import Aos from "aos";
+import "aos/dist/aos.css";
 
 const PrizeGroup = (props, index) => {
   return (
@@ -54,10 +56,13 @@ const PrizeGroup = (props, index) => {
 };
 
 const TeamMembers = (props, index) => {
+  useEffect(() => {
+    Aos.init({ duration: 400 });
+  }, []);
   return (
     <Row key={index} className="members">
       {props.map((s, i) => (
-        <Col key={i} className="" sm={12} lg={4} md={4}>
+        <Col data-aos="fade-up" key={i} className="" sm={12} lg={4} md={4}>
           <Member info={s} />
         </Col>
       ))}
@@ -69,7 +74,7 @@ const FrequentlyAsked = (props, index) => {
   return (
     <Row key={index} className="sf">
       {props.map((s, i) => (
-        <Col key={i} sm={12} lg={6} md={6}>
+        <Col data-aos={`${i%2===0?"fade-right":"fade-left"}`} key={i} sm={12} lg={6} md={6}>
           <Accordion panels={s} />
         </Col>
       ))}
@@ -78,6 +83,9 @@ const FrequentlyAsked = (props, index) => {
 };
 
 export default function HomePage() {
+  useEffect(()=>{
+    Aos.init({duration:400})
+  },[])
   const [media, setMedia] = useState();
   UseMedia("min-width", 1000, setMedia);
 
@@ -86,10 +94,10 @@ export default function HomePage() {
       <div className="color_sectiom" id="home">
         <Container fluid>
           <Row className="Row info">
-            <Col className="info-div" sm={12} lg={7} md={7}>
+            <Col data-aos="fade-right" className="info-div" sm={12} lg={7} md={7}>
               <Myinfo />
             </Col>
-            <Col className="contain">
+            <Col className="contain" data-aos="fade-left">
               <img
                 className="imagee"
                 src={
@@ -107,7 +115,7 @@ export default function HomePage() {
         </Container>
       </div>
       <Container fluid>
-        <Row className=" logoSection" >
+        <Row className=" logoSection">
           <Col className="info-div">
             <LogoSectionAbout />
           </Col>
@@ -116,14 +124,14 @@ export default function HomePage() {
           </Col>
           <Col></Col>
         </Row>
-        <Row className="mediaInfo" >
+        <Row className="mediaInfo">
           <Col className="" sm={12} lg={12} md={12}>
             <h1
               data-aos="zoom-in"
               data-aos-duration="800"
               id="prizes"
               className="prize_heading"
-              style={{ fontFamily: "repo-bold", marginBottom: "10rem"  }}
+              style={{ fontFamily: "repo-bold", marginBottom: "10rem" }}
             >
               Past Statistics
             </h1>
@@ -136,7 +144,7 @@ export default function HomePage() {
           data-aos-duration="800"
           id="prizes"
           className="prize_heading"
-          style={{ fontFamily: "repo-bold", marginTop:"100px" }}
+          style={{ fontFamily: "repo-bold", marginTop: "100px" }}
         >
           Prizes
         </h1>
@@ -240,16 +248,15 @@ export default function HomePage() {
             </div>
           </div>
           <h1
-          data-aos="zoom-in"
-          data-aos-duration="800"
-          id="prizes"
-          className="prize_heading"
-          style={{ fontFamily: "repo-bold",marginTop:"100px" }}
-        >
-        Track Prizes
-        </h1>
+            data-aos="zoom-in"
+            data-aos-duration="800"
+            id="prizes"
+            className="prize_heading"
+            style={{ fontFamily: "repo-bold", marginTop: "100px" }}
+          >
+            Track Prizes
+          </h1>
           <div className="more_prizes">
-            
             <div data-aos="fade-left" className="more-one">
               <img
                 className="gif_prize "
@@ -305,7 +312,6 @@ export default function HomePage() {
 
         {/* themes */}
         <Row className="prizesection" id="themes">
-          
           <PrizeHeading
             data-aos="zoom-in"
             data-aos-duration="800"
@@ -316,11 +322,8 @@ export default function HomePage() {
         {/* Theme end */}
 
         {/* Schedule here */}
-        <Row style={{marginTop:"100px"}}>
-    
-          <Schedule  />
-  
-
+        <Row style={{ marginTop: "100px" }}>
+          <Schedule />
         </Row>
         {/* Schedule section ends here */}
 
@@ -330,7 +333,6 @@ export default function HomePage() {
           <SponsorUS />
           <div className="sponsor-grid">
             <div>
-
               <p className="more-title-sponsor">Title sponsor</p>
               {titleSponsor.map((item, i) => (
                 <Col
@@ -344,7 +346,7 @@ export default function HomePage() {
                   md={6}
                 >
                   <div className="sponsor-bg">
-                    <img src={item.src} width={200}  />
+                    <img src={item.src} width={200} />
                   </div>
                 </Col>
               ))}
@@ -454,13 +456,13 @@ export default function HomePage() {
           <CommunityPartner />
         </Row>
         {/* Cumminity partners End */}
-        
+
         {/* Past Edition start*/}
         <Row>
-          <PastEdition/>
+          <PastEdition />
         </Row>
         {/* Past Edition end */}
-        
+
         {/* past winners */}
         {/* <Row>
           <PastWinner />
@@ -473,17 +475,29 @@ export default function HomePage() {
         </Row>
         {/* Organizing team End */}
 
-
         {/* ********Frequently asked Questions here ***** */}
         <div className="Myfaqs" id="faq">
-          <h1 className="my-faq-head">FAQs</h1>
+          <h1
+            className="my-faq-head"
+            data-aos="zoom-in"
+            data-aos-anchor-placement="top-bottom"
+            data-aos-duaration="800"
+          >
+            FAQs
+          </h1>
           {frequentlyAskedQuestions.map(FrequentlyAsked)}
         </div>
         {/* FAQ Ends */}
 
         {/* Map */}
         <Row className="homepage-map PrizeHeading">
-          <h1>How to Reach ?</h1>
+          <h1
+            data-aos="zoom-in"
+            data-aos-anchor-placement="top-bottom"
+            data-aos-duaration="800"
+          >
+            How to Reach ?
+          </h1>
           <Map />
         </Row>
         {/* Map End */}
diff --git a/src/containers/navbar/App.jsx b/src/containers/navbar/App.jsx
index 1204349..2a13b77 100644
--- a/src/containers/navbar/App.jsx
+++ b/src/containers/navbar/App.jsx
@@ -8,6 +8,8 @@ import hamLogo from './assets/ham.svg';
 import './styles.scss';
 import {MdxContent} from '../Mdx';
 import navLogo from "./assets/nav-logo.png"
+import Aos from "aos"
+import "aos/dist/aos.css"
 
 const NAVIGATION_OFFSET = 66;
 
@@ -57,6 +59,8 @@ const NAVBAR = ({}) => {
   };
 
   useEffect(() => {
+    Aos.init({duration:400})
+
     window.addEventListener('scroll', listenScrollEvent);
     return () => window.removeEventListener('scroll', listenScrollEvent);
   }, []);
@@ -64,7 +68,7 @@ const NAVBAR = ({}) => {
 
   return (
     <Router>
-      <nav className={`nav_bar ${isOffset && 'nav_bar-offset-crossed'}`} >
+      <nav data-aos="fade-down" className={`nav_bar ${isOffset && 'nav_bar-offset-crossed'}`} >
       
      
       <div className='logo-div'>