diff --git a/src/components/board/Officer.astro b/src/components/board/Officer.astro
index 4bc0b39..77edd52 100644
--- a/src/components/board/Officer.astro
+++ b/src/components/board/Officer.astro
@@ -41,7 +41,7 @@ const { name, position, picture, email } = Astro.props;
         >
             <p
                 data-inview
-                class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
+                class="opacity-0 in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
             >
                 {name}
             </p>
diff --git a/src/components/core/InView.astro b/src/components/core/InView.astro
index 6d9e17e..535e23e 100644
--- a/src/components/core/InView.astro
+++ b/src/components/core/InView.astro
@@ -3,9 +3,11 @@
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           entry.target.classList.add("in-view");
+          entry.target.classList.remove("opacity-0");
           console.log("Added 'in-view' class to:", entry.target);
         } else {
           entry.target.classList.remove("in-view");
+          entry.target.classList.add("opacity-0");
           console.log("Removed 'in-view' class from:", entry.target);
         }
       });
diff --git a/src/components/projects/QP.astro b/src/components/projects/QP.astro
index f2f8f36..a1108f8 100644
--- a/src/components/projects/QP.astro
+++ b/src/components/projects/QP.astro
@@ -14,7 +14,8 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
     <Image
         src={qp}
         alt="qp showcase photo"
-        class="md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full"
+        class="md:opacity-0 w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full relative in-view:animate-fade-down"
+        data-inview
     />
     <Link
         data-inview