diff --git a/src/components/board/Officer.astro b/src/components/board/Officer.astro
index ae61a5d..eed91fc 100644
--- a/src/components/board/Officer.astro
+++ b/src/components/board/Officer.astro
@@ -21,10 +21,10 @@ const {name, position, picture, email} = Astro.props;
             <FaGear/>
         </div>
         <div class = "w-full flex justify-between px-[7%]">
-            <p class = "text-[2vw] font-light leading-[4.5vh]">
+            <p data-inview class = " in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]">
                 {name}
             </p>
-            <div class = "text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
+            <div data-inview class = "in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
                 {position}
             </div>
         </div>
diff --git a/src/components/board/Officers.astro b/src/components/board/Officers.astro
index a671932..68acd80 100644
--- a/src/components/board/Officers.astro
+++ b/src/components/board/Officers.astro
@@ -8,7 +8,7 @@ import officers from "../../data/officers.json";
 ---
 
 <div class="text-white flex flex-col items-center mt-[15vh] mb-[10vh]">
-    <div class="relative w-[21vw]">
+    <div data-inview class="relative w-[21vw] in-view:animate-fade-down">
         <Image src={about} alt="About background image" />
         <Image
             src={neko}
diff --git a/src/components/find/FindTitle.astro b/src/components/find/FindTitle.astro
index b731216..d3d37ae 100644
--- a/src/components/find/FindTitle.astro
+++ b/src/components/find/FindTitle.astro
@@ -15,7 +15,7 @@ import { LiaDotCircle } from "react-icons/lia";
             The <a class=" text-ieee-yellow underline" href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank">IEEE Project Space</a> is an open-access, collaborative space located at EBU1-4710. Students can do homework or get access to basic electronic tools such as soldering stations, breadboard components, and Arduino and Raspberry PI parts!
         </p>
         <div class="flex justify-end">
-            <Link href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 text-[1.2vw]">
+            <Link data-inview href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6" target="_blank" className="in-view:animate-jump-in border-white/70 border-[0.1vw] py-[1%] px-[8%] rounded-[0.7vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 text-[1.2vw]">
                 DISCORD
             </Link>
         </div>
diff --git a/src/components/projects/QP.astro b/src/components/projects/QP.astro
index 846d874..c1fbbf3 100644
--- a/src/components/projects/QP.astro
+++ b/src/components/projects/QP.astro
@@ -17,8 +17,9 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
         class="w-[70vw] aspect-[2.5/1] rounded-full"
     />
     <Link
+        data-inview
         href="/quarterly"
-        className="absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
+        className="in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
     >
         more details
         <IoIosArrowDroprightCircle
@@ -26,7 +27,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
         />
     </Link>
     <div
-        class="w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
+        data-inview class="in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
     >
         <p class="text-[1.4vw] mb-[2%]">Quarterly Project</p>
         <p>
diff --git a/src/data/pastProjects.json b/src/data/pastProjects.json
index 13c3491..c85521a 100644
--- a/src/data/pastProjects.json
+++ b/src/data/pastProjects.json
@@ -1,43 +1,43 @@
 [
     {
         "title": "Retro Gaming Console",
-        "image": "/neko.png",
+        "image": "/robocup.png",
         "link": "/",
         "col": "2"
     },
     {
         "title": "Retro Gaming Console",
-        "image": "/neko.png",
+        "image": "/signal.png",
         "link": "/",
         "col": "4"
     },
     {
         "title": "Retro Gaming Console",
-        "image": "/neko.png",
+        "image": "/robocup.png",
         "link": "/",
         "col": "3"
     },
     {
         "title": "Retro Gaming Console",
-        "image": "/neko.png",
+        "image": "/signal.png",
         "link": "/",
         "col": "3"
     },
     {
         "title": "Retro Gaming Console",
-        "image": "/neko.png",
+        "image": "/signal.png",
         "link": "/",
         "col": "2"
     },
     {
         "title": "Retro Gaming Console",
-        "image": "/neko.png",
+        "image": "/robocup.png",
         "link": "/",
         "col": "2"
     },
     {
         "title": "Retro Gaming Console",
-        "image": "/neko.png",
+        "image": "/robocup.png",
         "link": "/",
         "col": "2"
     }
diff --git a/src/pages/quarterly.astro b/src/pages/quarterly.astro
index ac54454..6b58e61 100644
--- a/src/pages/quarterly.astro
+++ b/src/pages/quarterly.astro
@@ -27,9 +27,10 @@ import Timeline from "../components/qp/Timeline.astro";
     <Title title="Quarterly Project" />
     <div class="w-full flex justify-center my-[3%]">
         <Image
+            data-inview
             src={qp}
             alt="board group photos"
-            class="w-2/3 rounded-full object-cover aspect-[2.5/1]"
+            class="in-view:animate-fade w-2/3 rounded-full object-cover aspect-[2.5/1]"
         />
     </div>
     <About