diff --git a/app/about-us/page.tsx b/app/about-us/page.tsx
index d87ad2b..1cef0ea 100644
--- a/app/about-us/page.tsx
+++ b/app/about-us/page.tsx
@@ -6,6 +6,7 @@ import Carousel from '../components/about-us/carousel';
 import FunFact from '../components/about-us/funfact';
 import ModalOverlay from '../components/modal-overlay';
 import { useState } from 'react';
+import { FadeInDiv } from '../components/animations';
 export default function AboutUs() {
   //To Test the modal Overlay Uncomment below
   const [isModalOpen, setIsModalOpen] = useState(true);
@@ -42,94 +43,105 @@ export default function AboutUs() {
       }
       {/* What is Nuansa section */}
       <section className="text-center py-12 px-4 md:px-10">
-        <h1 className="text-4xl font-bold mb-4">What is &quot;Nuansa&quot;</h1>
-        <p className="text-lg mb-8">
-          An annual arts and cultural event by a group of Indonesian students in NUS.
-          It aims to promote the rich and diverse cultures of Indonesia.
-        </p>
+        <FadeInDiv>
+          <h1 className="text-4xl font-bold mb-4">What is &quot;Nuansa&quot;</h1>
+          <p className="text-lg mb-8">
+            An annual arts and cultural event by a group of Indonesian students in NUS.
+            It aims to promote the rich and diverse cultures of Indonesia.
+          </p>
+        </FadeInDiv>
       </section>
 
       {/* Fun Fact Section */}
-      <section className="text-center py-12 px-4 md:px-20 bg-orange-a flex flex-col md:flex-row items-center justify-center">
-        <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
-        <div className="flex-grow px-4 md:px-20">
+      <section className="text-center py-12 px-4 md:px-20 bg-orange-a w-full flex flex-col md:flex-row items-center justify-center">
+        <FadeInDiv>
+          <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
+        </FadeInDiv>
+        <FadeInDiv className="flex-grow px-4 md:px-20">
           <FunFact>
             <h2 className="text-3xl mb-8 text-green-a">Fun Fact</h2>
             <h2 className="text-3xl mb-8 text-green-a">Fun Fict</h2>
           </FunFact>
-        </div>
+        </FadeInDiv>
       </section>
 
       {/* Vision and Mission Section */}
       <section className="grid grid-cols-1 md:grid-cols-2 bg-orange-a gap-8 py-12 px-4 md:px-10 text-green-a">
-        <div className="text-left">
+        <FadeInDiv className="text-left">
           <h2 className="text-2xl font-semibold mb-4">Our Vision</h2>
           <p className="text-lg">
             To enrich society by creating and sharing diverse cultural expressions that inspire, challenge, and connect people across different backgrounds.
           </p>
-        </div>
-        <div className="text-left md:text-right">
+        </FadeInDiv>
+        <FadeInDiv className="text-left md:text-right">
           <h2 className="text-2xl font-semibold mb-4">Our Mission</h2>
           <p className="text-lg">
             To produce and promote cultural works that reflect, preserve, and innovate cultural heritage, fostering greater understanding.
           </p>
-        </div>
+        </FadeInDiv>
       </section>
 
        {/* Memorable Clips Section */}
        <section className="flex flex-col items-center justify-center py-12 text-center bg-green-a text-white pb-10">
-        <h2 className="text-3xl font-bold mb-5">Memorable Clips</h2>
-        <div className="flex flex-col md:flex-row items-center justify-center gap-y-8 md:gap-x-20">
-          <Carousel>
-            <img 
-              src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
-              alt="Some Memorable Clips"
-              className="max-h-[200px] object-contain"
-            />
-            <img 
-              src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
-              alt="Some Memorable Clips" 
-              className="max-h-[200px] object-contain"
-            />
-            <img 
-              src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
-              alt="Some Memorable Clips" 
-              className="max-h-[200px] object-contain"
-            />
-          </Carousel>
-        </div>
+        <FadeInDiv>
+          <h2 className="text-3xl font-bold mb-5">Memorable Clips</h2>
+          <div className="flex flex-col md:flex-row items-center justify-center gap-y-8 md:gap-x-20">
+            <Carousel>
+              <img 
+                src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
+                alt="Some Memorable Clips"
+                className="max-h-[200px] object-contain"
+              />
+              <img 
+                src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
+                alt="Some Memorable Clips" 
+                className="max-h-[200px] object-contain"
+              />
+              <img 
+                src="https://media.licdn.com/dms/image/v2/D5622AQEyPzD7WAMiyA/feedshare-shrink_800/feedshare-shrink_800/0/1726034259793?e=2147483647&v=beta&t=yYGRAZoKbJV0xHLg8XkpiB2QF7J_g1hs02U5lFw_ziU" 
+                alt="Some Memorable Clips" 
+                className="max-h-[200px] object-contain"
+              />
+            </Carousel>
+          </div>
+        </FadeInDiv>
       </section>
       <section className="text-center py-12 bg-orange-a">
         {/* Flex container for Why Join Us section */}
-        <div className="flex flex-col-reverse md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
-          {/* Grid of Features (Networking, Collaboration, Creativity) */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-red-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
-              Networking
-            </div>
-            <div className="bg-yellow-500 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
-              Networking
+        <FadeInDiv>
+          <div className="flex flex-col-reverse md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
+            {/* Grid of Features (Networking, Collaboration, Creativity) */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="bg-red-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
+                Networking
+              </div>
+              <div className="bg-yellow-500 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
+                Networking
+              </div>
+              <div className="bg-purple-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
+                Networking
+              </div>
             </div>
-            <div className="bg-purple-900 text-white p-10 rounded-md w-48 h-44 flex justify-center items-center mx-2 my-2">
-              Networking
-            </div>
-          </div>
+          
 
-          {/* Why Join Us heading */}
-          <div className="mb-8 md:mb-0">
-            <h1 className="text-4xl mb-4 text-center text-green-a">Why Join Us</h1>
+            {/* Why Join Us heading */}
+            <div className="mb-8 md:mb-0">
+              <h1 className="text-4xl mb-4 text-center text-green-a">Why Join Us</h1>
+            </div>
           </div>
-        </div>
+        </FadeInDiv>
 
         {/* Video section */}
-        <div className="flex flex-col md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
-          <h1 className="text-4xl mb-4 text-green-a">View Our Latest Show<span className="hidden md:inline">{">>"}</span>
-          </h1>
-          <VideoFrame
-            videoTitle="RickRoll"
-            videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ?si=tSGI-Y2bIM5CKrxI"
-          />
-        </div>
+        <FadeInDiv>
+          <div className="flex flex-col md:flex-row items-center justify-center pb-10 gap-8 md:gap-20">
+            <h1 className="text-4xl mb-4 text-green-a">View Our Latest Show<span className="hidden md:inline">{">>"}</span>
+            </h1>
+            <VideoFrame
+              videoTitle="RickRoll"
+              videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ?si=tSGI-Y2bIM5CKrxI"
+            />
+          </div>
+        </FadeInDiv>
       </section>
     </div>
   );
diff --git a/app/components/animations.tsx b/app/components/animations.tsx
new file mode 100644
index 0000000..c45d410
--- /dev/null
+++ b/app/components/animations.tsx
@@ -0,0 +1,28 @@
+/**
+ * Contains React components to wrap other components in framer-motion animations.
+ */
+
+import React from "react";
+import { motion } from "framer-motion";
+
+// TODO: add type checking
+// @ts-ignore
+export function FadeInDiv({ children, ...props }) {
+  const variants = {
+    hidden: { y: 10, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+  };
+
+  return (
+    <motion.div
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, ease: "easeIn" }}
+      variants={variants}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/app/contact-us/page.tsx b/app/contact-us/page.tsx
index 4a59b6a..b8df100 100644
--- a/app/contact-us/page.tsx
+++ b/app/contact-us/page.tsx
@@ -1,11 +1,14 @@
+"use client"
+
 import Image from "next/image";
 import BusinessForm from "@/app/components/contact-us/business-form";
 import GeneralForm from "@/app/components/contact-us/general-form";
+import { FadeInDiv } from "../components/animations";
 
 export default function ContactPage() {
     return (
         <div className="items-center bg-green-a space-y-20 px-4 md:px-12 lg:px-16 pb-12">
-            <div className="sm:grid sm:grid-cols-2 text-white py-10">
+            <FadeInDiv className="sm:grid sm:grid-cols-2 text-white py-10">
                 <div className="sm:place-self-center mx-auto my-auto">
                     <GeneralForm/>
                 </div>
@@ -13,8 +16,8 @@ export default function ContactPage() {
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{ width: '12rem', height: 'auto' }}/>
                 </div>
-            </div>
-            <div className="sm:grid sm:grid-cols-2 bg-orange-a rounded-md text-black bottom-8 p-10">
+            </FadeInDiv>
+            <FadeInDiv className="sm:grid sm:grid-cols-2 bg-orange-a rounded-md text-black bottom-8 p-10">
                 <div className="sm:place-self-center hidden sm:block">
                     <Image src={'/images/logo/nuansa_logo.png'} alt={'logo'} width={0} height={0} sizes="100vw"
                            style={{width: '12rem', height: 'auto'}}/>
@@ -22,7 +25,7 @@ export default function ContactPage() {
                 <div className="sm:place-self-center">
                     <BusinessForm/>
                 </div>
-            </div>
+            </FadeInDiv>
         </div>
     )
             }
\ No newline at end of file
diff --git a/app/our-team/arts/page.tsx b/app/our-team/arts/page.tsx
index 6a70f4b..d11080b 100644
--- a/app/our-team/arts/page.tsx
+++ b/app/our-team/arts/page.tsx
@@ -1,12 +1,15 @@
+"use client"
+
 import MemberCard from "@/app/components/our-team/member-card";
 import Image from "next/image";
+import { FadeInDiv } from "@/app/components/animations";
 
 export default function Page() {
   return (
     <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
-        <div className="relative w-full flex flex-col items-center md:flex-row">
+        <FadeInDiv className="relative w-full flex flex-col items-center md:flex-row">
           <div className="flex flex-1 items-center justify-center mb-12 md:mb-0">
             <h2 className="text-4xl md:text-5xl font-bold text-white text-center">
               ARTS
@@ -20,23 +23,27 @@ export default function Page() {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
           </div>
-        </div>
+        </FadeInDiv>
       </section>
       
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
-          Divisions and Tasks
-        </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
-          Members
-        </h3>
-        <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
+        <FadeInDiv>
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
+            Divisions and Tasks
+          </h2>
+        </FadeInDiv>
+        <FadeInDiv>
+          <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
+            Members
+          </h3>
+        </FadeInDiv>
+        <FadeInDiv className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 1" role="Role 1" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 2" role="Role 2" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 3" role="Role 3" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 4" role="Role 4" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 5" role="Role 5" />
-        </div>
+        </FadeInDiv>
       </section>
     </main>
   )
diff --git a/app/our-team/external-affairs/page.tsx b/app/our-team/external-affairs/page.tsx
index 5d84144..e2a98bf 100644
--- a/app/our-team/external-affairs/page.tsx
+++ b/app/our-team/external-affairs/page.tsx
@@ -1,12 +1,15 @@
+"use client"
+
 import MemberCard from "@/app/components/our-team/member-card";
 import Image from "next/image";
+import { FadeInDiv } from "@/app/components/animations";
 
 export default function Page() {
   return (
     <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
-        <div className="relative w-full flex flex-col items-center md:flex-row">
+        <FadeInDiv className="relative w-full flex flex-col items-center md:flex-row">
           <div className="flex flex-1 items-center justify-center mb-12 md:mb-0">
             <h2 className="text-4xl md:text-5xl font-bold text-white text-center">
               EXTERNAL AFFAIRS
@@ -20,23 +23,27 @@ export default function Page() {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
           </div>
-        </div>
+        </FadeInDiv>
       </section>
       
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
-          Divisions and Tasks
-        </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
-          Members
-        </h3>
-        <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
+        <FadeInDiv>
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
+            Divisions and Tasks
+          </h2>
+        </FadeInDiv>
+        <FadeInDiv>
+          <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
+            Members
+          </h3>
+        </FadeInDiv>
+        <FadeInDiv className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 1" role="Role 1" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 2" role="Role 2" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 3" role="Role 3" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 4" role="Role 4" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 5" role="Role 5" />
-        </div>
+        </FadeInDiv>
       </section>
     </main>
   )
diff --git a/app/our-team/page.tsx b/app/our-team/page.tsx
index 1dfd3a7..2db9db3 100644
--- a/app/our-team/page.tsx
+++ b/app/our-team/page.tsx
@@ -1,32 +1,39 @@
+'use client'
+
 import Image from "next/image";
 import TeamCard from "../components/our-team/team-card";
+import { FadeInDiv } from "../components/animations";
 
 export default function Page() {
   return (
     <main className="min-h-screen bg-green-a">
-      <section className="relative w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
-          Structure
-        </h2>
-        <Image src={"/images/our-team/structure.png"} alt="Structure" width={800} height={0} />
+      <section className="py-12 px-16 md:py-20 md:px-32">
+        <FadeInDiv className="w-full flex flex-col items-center">
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
+            Structure
+          </h2>
+          <Image src={"/images/our-team/structure.png"} alt="Structure" width={800} height={0} />
+        </FadeInDiv>
       </section>
       <section className="w-full flex justify-center py-12 px-16 md:py-20 md:px-32">
-        <div className="w-full flex flex-col items-center -m-8 p-8 md:-m-16 md:p-16 rounded-md bg-orange-a">
+        <FadeInDiv className="w-full flex flex-col items-center -m-8 p-8 md:-m-16 md:p-16 rounded-md bg-orange-a">
           <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
           Management Profile
           </h2>
           <Image src={"/images/our-team/structure.png"} alt="Management Profile" width={800} height={0}/>
-        </div>
+        </FadeInDiv>
       </section>
-      <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
-          Find Out More
-        </h2>
-        <div className="relative w-full flex flex-col justify-center gap-8 md:flex-row">
-          <TeamCard imageSrc="/images/our-team/find-out-more.png" name="Arts" href="/our-team/arts" />
-          <TeamCard imageSrc="/images/our-team/find-out-more.png" name="Production" href="/our-team/production" />
-          <TeamCard imageSrc="/images/our-team/find-out-more.png" name="External Affairs" href="/our-team/external-affairs" />
-        </div>
+      <section className="py-12 px-16 md:py-20 md:px-32">
+        <FadeInDiv className="w-full flex flex-col items-center">
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
+            Find Out More
+          </h2>
+          <div className="relative w-full flex flex-col justify-center gap-8 md:flex-row">
+            <TeamCard imageSrc="/images/our-team/find-out-more.png" name="Arts" href="/our-team/arts" />
+            <TeamCard imageSrc="/images/our-team/find-out-more.png" name="Production" href="/our-team/production" />
+            <TeamCard imageSrc="/images/our-team/find-out-more.png" name="External Affairs" href="/our-team/external-affairs" />
+          </div>
+        </FadeInDiv>
       </section>
     </main>
   )
diff --git a/app/our-team/production/page.tsx b/app/our-team/production/page.tsx
index 5cb1933..7318233 100644
--- a/app/our-team/production/page.tsx
+++ b/app/our-team/production/page.tsx
@@ -1,12 +1,15 @@
+"use client"
+
 import MemberCard from "@/app/components/our-team/member-card";
 import Image from "next/image";
+import { FadeInDiv } from "@/app/components/animations";
 
 export default function Page() {
   return (
     <main className="min-h-screen">
       <section className="relative w-full py-12 px-16 overflow-hidden md:py-20 md:px-0">
         <Image src={"/images/our-team/what-we-do.png"} alt="What We Do" fill={true} objectFit="cover" />
-        <div className="relative w-full flex flex-col items-center md:flex-row">
+        <FadeInDiv className="relative w-full flex flex-col items-center md:flex-row">
           <div className="flex flex-1 items-center justify-center mb-12 md:mb-0">
             <h2 className="text-4xl md:text-5xl font-bold text-white text-center">
               PRODUCTION
@@ -20,23 +23,27 @@ export default function Page() {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </p>
           </div>
-        </div>
+        </FadeInDiv>
       </section>
       
       <section className="w-full flex flex-col items-center py-12 px-16 md:py-20 md:px-32">
-        <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
-          Divisions and Tasks
-        </h2>
-        <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
-          Members
-        </h3>
-        <div className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
+        <FadeInDiv>
+          <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-green-a">
+            Divisions and Tasks
+          </h2>
+        </FadeInDiv>
+        <FadeInDiv>
+          <h3 className="text-2xl md:text-3xl pb-6 md:pb-8 font-semibold text-green-a">
+            Members
+          </h3>
+        </FadeInDiv>
+        <FadeInDiv className="grid gap-8 place-content-center place-items-stretch grid-cols-[minmax(0,_350px)] md:grid-cols-[repeat(2,_minmax(0,_350px))] lg:grid-cols-[repeat(3,_minmax(0,_350px))] md:gap-16">
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 1" role="Role 1" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 2" role="Role 2" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 3" role="Role 3" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 4" role="Role 4" />
           <MemberCard imageSrc="/images/our-team/member-placeholder.png" name="Member Name 5" role="Role 5" />
-        </div>
+        </FadeInDiv>
       </section>
     </main>
   )
diff --git a/app/page.tsx b/app/page.tsx
index 1e18e53..08f75bc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,8 @@
+'use client'
+
 import Image from "next/image";
 import Timer from "./components/timer";
+import { FadeInDiv } from "./components/animations";
 
 
 export default function Home() {
@@ -8,11 +11,11 @@ export default function Home() {
       <div className="fixed inset-0 -z-10">
         <Image src={'/images/home/background.png'} alt={'Background'} layout="fill" objectFit="cover" quality={100} />
       </div>
-      <div className="flex flex-col items-center justify-center h-screen w-full">
+      <FadeInDiv className="flex flex-col items-center justify-center h-screen w-full">
         <Image src={'/images/home/the-crying-stone.png'} alt={'The Crying Stone'} width={0} height={0} sizes="100vw" style={{ width: '24rem', height: 'auto' }}/>
         <Timer launchDate="09-07-2025" />
-      </div>
-      <div className="flex flex-col items-center justify-center w-full py-6 px-8 sm:py-12 sm:px-16 md:py-20 md:px-32 bg-transparent">
+      </FadeInDiv>
+      <FadeInDiv className="flex flex-col items-center justify-center w-full py-6 px-8 sm:py-12 sm:px-16 md:py-20 md:px-32 bg-transparent">
         <h2 className="text-3xl md:text-4xl pb-4 sm:pb-6 md:pb-10 font-bold text-center text-orange-a">
           Synopsis
         </h2>
@@ -21,8 +24,8 @@ export default function Home() {
           As punishment for her mistreatment of her mother, a prayer by the widow causes the daughter to be struck by lightning and turned into a crying stone statue. 
           The story teaches the importance of honoring one&apos;s parents.
         </p>
-      </div>
-      <div className="w-full py-4 px-8 sm:py-12 sm:px-20 md:py-16 md:px-30 bg-transparent">
+      </FadeInDiv>
+      <FadeInDiv className="w-full py-4 px-8 sm:py-12 sm:px-20 md:py-16 md:px-30 bg-transparent">
         <h2 className="text-3xl md:text-4xl pb-8 md:pb-12 font-bold text-orange-a">
           Characters
         </h2>
@@ -46,7 +49,7 @@ export default function Home() {
             </p>
           </div>
         </div>
-      </div>
+      </FadeInDiv>
       <footer className="w-full py-4 text-center text-white">
         <p>© 2025 NUANSA. All rights reserved.</p>
       </footer>