diff --git a/frontend/src/components/About/MeetTheTeam.tsx b/frontend/src/components/About/MeetTheTeam.tsx
index 62392218..5e321f1b 100644
--- a/frontend/src/components/About/MeetTheTeam.tsx
+++ b/frontend/src/components/About/MeetTheTeam.tsx
@@ -85,19 +85,6 @@ const categories = [
       { name: 'Ganesh Kumarappan', title: 'Backend Developer', photo: Ganesh },
     ],
   },
-  {
-    id: 3,
-    name: 'CSES WebDev',
-    members: [
-      { name: 'Shruti Bhamidipati', title: 'President', photo: Shruti },
-      { name: 'Manan Patel', title: 'VP Finance', photo: Manan },
-      { name: 'Jheel Gandhi', title: 'VP Design', photo: Jheel },
-      { name: 'Sonia Fereidooni', title: 'VP Operations', photo: Sonia },
-      { name: 'Ryan Rickey', title: 'Software Team Lead', photo: Ryan },
-      { name: 'Jake Villaseno', title: 'UI/UX Designer', photo: Jake },
-      //{ name: 'Saleha Ahmedi', title: 'WebDev', photo: Saleha},
-    ],
-  },
   {
     id: 4,
     name: 'CSES Open Source',
diff --git a/frontend/src/components/About/OurCommunities.tsx b/frontend/src/components/About/OurCommunities.tsx
index f6afede1..3686c56b 100644
--- a/frontend/src/components/About/OurCommunities.tsx
+++ b/frontend/src/components/About/OurCommunities.tsx
@@ -31,27 +31,6 @@ const Communities = () => {
         </p>
 
         <Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center'}}>
-          <Grid item 
-            sx={{
-              ...styles.communityCard,
-              width: verySmallScreen ? '250px' : { xs: '350px', sm: '500px', md: '500px' },
-              height: verySmallScreen ? '84px' : { xs: '100px', sm: '160px', md: '160px' },
-              margin: verySmallScreen ? '10% 0% 0% 0%' : { xs: '10% 2% 2% 2%', sm: '5% 3%', md: '3% 2%' }
-            }}>
-            <img
-              src={innovate}
-              alt="Innovate"
-              style={{ ...styles.communityCardImg, backgroundColor: 'black'}}
-            />
-            <Box sx={{ height: 'auto', padding: verySmallScreen ? '2%' : '4%', alignSelf: 'center' }}>
-              <Box sx={{ ...styles.subheadingTop }} >
-                CSES Innovate
-              </Box>
-              <p style={{ color: 'black', fontSize: 'clamp(8px, 2vw, 16px)', marginTop: verySmallScreen ? '2px' :'6px'}}>
-                Learn about tech entrepreneurship! Form teams and build your own start-ups from ideation to pitch.
-              </p>
-            </Box>
-          </Grid>
           <Grid item 
             sx={{
               ...styles.communityCard,
@@ -102,16 +81,16 @@ const Communities = () => {
               margin: verySmallScreen ? '10% 0% 0% 0%' : { xs: '10% 2% 2% 2%', sm: '5% 3%', md: '3% 2%' }
             }}>
             <img
-              src={webdev}
-              alt="WebDev"
-              style={{ ...styles.communityCardImg}}
+              src={innovate}
+              alt="Innovate"
+              style={{ ...styles.communityCardImg, backgroundColor: 'black'}}
             />
             <Box sx={{ height: 'auto', padding: verySmallScreen ? '2%' : '4%', alignSelf: 'center' }}>
               <Box sx={{ ...styles.subheadingTop }} >
-                CSES WebDev
+                CSES Innovate
               </Box>
-              <p style={{ color: 'black', fontSize: 'clamp(8px, 2vw, 16px)', marginTop: verySmallScreen ? '2px' : '6px'}}>
-                Gain hands-on experience in web design and development for real clients, from UCSD clubs to non-profits!
+              <p style={{ color: 'black', fontSize: 'clamp(8px, 2vw, 16px)', marginTop: verySmallScreen ? '2px' :'6px'}}>
+                Learn about tech entrepreneurship! Form teams and build your own start-ups from ideation to pitch.
               </p>
             </Box>
           </Grid>
diff --git a/frontend/src/components/Home/Home.tsx b/frontend/src/components/Home/Home.tsx
index dfbd91f2..43302337 100644
--- a/frontend/src/components/Home/Home.tsx
+++ b/frontend/src/components/Home/Home.tsx
@@ -179,78 +179,81 @@ const Home = () => {
             <Grid item xs={0} sm={0} md={0.5} lg={1} />
           </Grid>
 
+      <div>
+        {displayedFutureEvents.length !== 0 && (
           <div style={{ margin: '0 39px' }}>
+          <div
+            style={{
+              color: 'white',
+              fontSize: '40px',
+              fontFamily: 'Chakra Petch',
+              marginTop: '117px',
+              fontWeight: '700',
+            }}
+          >
+            <p style={{ marginBottom: '20px', fontSize: 'clamp(32px, 8vw, 65px)' }}>
+              UPCOMING EVENTS
+            </p>
+          </div>
+
+          {isMobile && (
             <div
               style={{
-                color: 'white',
-                fontSize: '40px',
-                fontFamily: 'Chakra Petch',
-                marginTop: '117px',
-                fontWeight: '700',
+                marginBottom: '25px',
+                overflowX: 'auto', // Enable horizontal scrolling
+                maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
               }}
             >
-              <p style={{ marginBottom: '20px', fontSize: 'clamp(32px, 8vw, 65px)' }}>
-                UPCOMING EVENTS.
-              </p>
+          {displayedFutureEvents.map((eventData, id) => (
+            <div key={id}>
+              <MobileEventBox
+                  title={eventData.title}
+                  targetDate={new Date(eventData.end_time)}
+                  location={eventData.location}                    end_time={eventData.end_time}
+                  start_time={eventData.start_time}
+                  _id={eventData._id}
+                />                
             </div>
+          ))}
+          </div>
+        )}
 
-            {isMobile && (
-              <div
-                style={{
-                  marginBottom: '25px',
-                  overflowX: 'auto', // Enable horizontal scrolling
-                  maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
-                }}
-              >
-                {displayedFutureEvents.map((eventData, id) => (
-                  <div key={id}>
-                    <MobileEventBox
-                      title={eventData.title}
-                      targetDate={new Date(eventData.end_time)}
-                      location={eventData.location}
-                      end_time={eventData.end_time}
-                      start_time={eventData.start_time}
-                      _id={eventData._id}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {!isMobile && (
-              <div
-                style={{
-                  display: 'flex',
-                  marginBottom: '25px',
-                  overflowX: 'auto', // Enable horizontal scrolling
-                  maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
-                }}
-              >
-                {displayedFutureEvents.map((eventData, id) => (
-                  <div key={id} style={{ marginRight: '30px', marginTop: '30px' }}>
-                    <EventBox
-                      title={eventData.title}
-                      targetDate={new Date(eventData.end_time)}
-                      location={eventData.location}
-                      calendar_link={eventData.calendar_link}
-                      description={eventData.description}
-                      end_time={eventData.end_time}
-                      instagram_link={eventData.instagram_link}
-                      start_time={eventData.start_time}
-                      _id={eventData._id}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-            <div style={{ marginLeft: isMobile ? '-2%' : '-0.3%' }}> 
-              <Button
-                size="large"
-                text="See All Events ->"
-                onClick={() => navigate('/events')} 
-              ></Button>
+        {!isMobile && (
+          <div
+            style={{
+              display: 'flex',
+              marginBottom: '25px',
+              overflowX: 'auto', // Enable horizontal scrolling
+              maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
+            }}
+          >
+          {displayedFutureEvents.map((eventData, id) => (
+            <div key={id} style={{ marginRight: '30px', marginTop: '30px' }}>
+              <EventBox
+                title={eventData.title}
+                targetDate={new Date(eventData.end_time)}
+                location={eventData.location}
+                calendar_link={eventData.calendar_link}
+                description={eventData.description}
+                end_time={eventData.end_time}
+                instagram_link={eventData.instagram_link}
+                start_time={eventData.start_time}
+                _id={eventData._id}
+              />
             </div>
+          ))}
+        </div>
+      )}
+        <div style={{ marginLeft: isMobile ? '-2%' : '-0.3%' }}> 
+            <Button
+              size="large"
+              text="See All Events ->"
+              onClick={() => navigate('/events')} 
+              ></Button>
           </div>
+        </div>
+      )}
+        </div>
         </Container>
       </Box>
     </div>
diff --git a/frontend/src/components/MemberProfile/MemberProfile.tsx b/frontend/src/components/MemberProfile/MemberProfile.tsx
index c3b002e3..534bc693 100644
--- a/frontend/src/components/MemberProfile/MemberProfile.tsx
+++ b/frontend/src/components/MemberProfile/MemberProfile.tsx
@@ -183,7 +183,7 @@ const MemberProfile = (userData: MemberProfileProps) => {
             Major:
             <span style={{ fontWeight: 'bold', marginLeft: '8px' }}>{userData.memberMajor}</span>
           </p>
-          {((typeof userData.memberMinor !== 'undefined')) &&
+          {((typeof userData.memberMinor !== 'undefined' && userData.memberMinor !== '')) &&
           <p
             style={{
               display: 'flex', // added
diff --git a/frontend/src/components/Opportunities/Opportunities.tsx b/frontend/src/components/Opportunities/Opportunities.tsx
index 060403dc..95327b56 100644
--- a/frontend/src/components/Opportunities/Opportunities.tsx
+++ b/frontend/src/components/Opportunities/Opportunities.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Container, Typography, Grid, Link, Box, useTheme } from '@mui/material';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { Container, Typography, Grid, Link, Box, useTheme, useMediaQuery } from '@mui/material';
 import MuiButton from '@mui/material/Button';
 import bg from '../../images/shape2.svg';
 import sponsor from '../../images/cseLogo.gif';
@@ -18,6 +18,21 @@ interface ImageWithBoxShadowProps {
   href?: string;
 }
 
+interface FadeInSectionProps {
+  children: ReactNode;
+}
+
+const fadeInStyle = {
+  opacity: 0,
+  transform: 'translateY(20px)',
+  transition: 'opacity 0.5s ease-out, transform 0.5s ease-out',
+};
+
+const fadeInVisibleStyle = {
+  opacity: 1,
+  transform: 'translateY(0)',
+};
+
 export const ImageWithBoxShadow = ({
   src,
   alt,
@@ -27,6 +42,7 @@ export const ImageWithBoxShadow = ({
 }: ImageWithBoxShadowProps) => {
   const theme = useTheme();
   const styles = opportunitiesStyles(theme);
+
   return (
     <a href={href} style={styles.link}>
       <img
@@ -43,6 +59,48 @@ export const ImageWithBoxShadow = ({
   );
 };
 
+const FadeInSection = ({ children }: FadeInSectionProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const domRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    if (domRef.current) {
+      observer.observe(domRef.current);
+    }
+
+    return () => {
+      if (domRef.current) {
+        observer.unobserve(domRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <Box
+      ref={domRef}
+      sx={{
+        ...fadeInStyle,
+        ...(isVisible && fadeInVisibleStyle),
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+
 const Opportunities = () => {
   const theme = useTheme();
   const styles = opportunitiesStyles(theme);
@@ -55,12 +113,17 @@ const Opportunities = () => {
         <img src={bg} alt="bg" style={{ ...styles.bg2, position: 'absolute' }} />
       </Box>
       <Container maxWidth="xl" sx={styles.body}>
-        <Typography sx={styles.title}>OPPORTUNITIES</Typography>
         <Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center' }}>
-          <Grid item xs={12} sm={12} md={6}>
-            <ImageWithBoxShadow src={members} alt="members" />
+        <Grid item xs={12} sm={12} md={10.9}>
+            <Typography sx={styles.title} align="left">OPPORTUNITIES</Typography>
+          </Grid>
+        <Grid item xs={12} sm={12} md={6}>
+            <FadeInSection>
+              <ImageWithBoxShadow src={members} alt="members" />
+            </FadeInSection>
           </Grid>
           <Grid item xs={12} sm={12} md={6}>
+          <FadeInSection>
             <Typography sx={styles.subtitle}>
               For <span style={{ fontStyle: 'italic' }}>members</span>.
             </Typography>
@@ -117,11 +180,15 @@ const Opportunities = () => {
                 Become a Member
               </MuiButton>
             </Box>
+            </FadeInSection>
           </Grid>
           <Grid item xs={12} sm={12} md={6}>
-            <ImageWithBoxShadow src={sponsors} alt="sponsors" />
+            <FadeInSection>
+              <ImageWithBoxShadow src={sponsors} alt="sponsors" />
+            </FadeInSection>
           </Grid>
           <Grid item xs={12} sm={12} md={6}>
+          <FadeInSection>
             <Typography sx={styles.subtitle}>
               For <span style={{ fontStyle: 'italic' }}>sponsors</span>.
             </Typography>
@@ -166,14 +233,19 @@ const Opportunities = () => {
                 See Opportunities -&gt;
               </MuiButton>
             </Box>
+            </FadeInSection>
           </Grid>
         </Grid>
+        
         <Typography align="center" sx={{ ...styles.subtitle, margin: '60px 0% 50px 0%' }}>
+          <FadeInSection>
           Thank you to our current sponsors!
+          </FadeInSection>
         </Typography>
 
-        <Grid container direction="column" alignItems="stretch">
-          <Grid item pl="10%" pr="10%">
+        <Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center' }}>
+          <Grid item xs={12} sm={10} md={5.5}>
+          <FadeInSection>
             <ImageWithBoxShadow
               src={sponsor}
               alt="sponsor"
@@ -181,14 +253,17 @@ const Opportunities = () => {
               href="https://cse.ucsd.edu/"
               borderColor="black"
             />
+            </FadeInSection>
           </Grid>
-          <Grid item pl="30%" pr="30%">
-            <ImageWithBoxShadow
-              src={sponsor2}
-              alt="sponsor2"
-              boxColor="white"
-              href="https://as.ucsd.edu/"
-            />
+          <Grid item xs={7} sm={5} md={3.5}>
+          <FadeInSection>
+              <ImageWithBoxShadow
+                src={sponsor2}
+                alt="sponsor2"
+                boxColor="white"
+                href="https://as.ucsd.edu/"
+              />
+            </FadeInSection>
           </Grid>
         </Grid>
       </Container>
diff --git a/frontend/src/components/Opportunities/styles.ts b/frontend/src/components/Opportunities/styles.ts
index 21bf3628..8e12f04b 100644
--- a/frontend/src/components/Opportunities/styles.ts
+++ b/frontend/src/components/Opportunities/styles.ts
@@ -30,8 +30,8 @@ export const opportunitiesStyles = (theme: any) => ({
   test: {
     fontFamily: 'Inter, sans-serif',
     color: 'white',
-    fontSize: 'clamp(15px, 3vw, 16px)',
-    lineHeight: '19px',
+    fontSize: 'clamp(15px, 3vw, 20px)',
+    lineHeight: '23px',
     textAlign: 'left'
   },
   subtitle: {
diff --git a/package-lock.json b/package-lock.json
index f57b5ef5..b7ef7377 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
         "@mailchimp/mailchimp_marketing": "^3.0.80",
         "@material-ui/core": "^4.12.4",
         "@mui/x-date-pickers": "^6.12.0",
+        "@react-spring/web": "^9.7.3",
         "dayjs": "^1.11.9",
         "material-ui-popup-state": "^5.0.9",
         "qrcode": "^1.5.3",
         "react-countup": "^6.5.0",
+        "react-intersection-observer": "^9.10.2",
         "react-scroll-trigger": "^0.6.14"
       }
     },
@@ -882,6 +884,66 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz",
+      "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz",
+      "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.3",
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz",
+      "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==",
+      "dependencies": {
+        "@react-spring/types": "~9.7.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz",
+      "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw=="
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz",
+      "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.3",
+        "@react-spring/core": "~9.7.3",
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -1779,6 +1841,20 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.10.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.10.2.tgz",
+      "integrity": "sha512-j2hGADK2hCbAlfaq6L3tVLb4iqngoN7B1fT16MwJ4J16YW/vWLcmAIinLsw0lgpZeMi4UDUWtHC9QDde0/P1yQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -2620,6 +2696,49 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
+    "@react-spring/animated": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz",
+      "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==",
+      "requires": {
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
+      }
+    },
+    "@react-spring/core": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz",
+      "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==",
+      "requires": {
+        "@react-spring/animated": "~9.7.3",
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
+      }
+    },
+    "@react-spring/shared": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz",
+      "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==",
+      "requires": {
+        "@react-spring/types": "~9.7.3"
+      }
+    },
+    "@react-spring/types": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz",
+      "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw=="
+    },
+    "@react-spring/web": {
+      "version": "9.7.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz",
+      "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==",
+      "requires": {
+        "@react-spring/animated": "~9.7.3",
+        "@react-spring/core": "~9.7.3",
+        "@react-spring/shared": "~9.7.3",
+        "@react-spring/types": "~9.7.3"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -3340,6 +3459,12 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-intersection-observer": {
+      "version": "9.10.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.10.2.tgz",
+      "integrity": "sha512-j2hGADK2hCbAlfaq6L3tVLb4iqngoN7B1fT16MwJ4J16YW/vWLcmAIinLsw0lgpZeMi4UDUWtHC9QDde0/P1yQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
diff --git a/package.json b/package.json
index e0d84943..94d0995a 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,12 @@
     "@mailchimp/mailchimp_marketing": "^3.0.80",
     "@material-ui/core": "^4.12.4",
     "@mui/x-date-pickers": "^6.12.0",
+    "@react-spring/web": "^9.7.3",
     "dayjs": "^1.11.9",
     "material-ui-popup-state": "^5.0.9",
     "qrcode": "^1.5.3",
     "react-countup": "^6.5.0",
+    "react-intersection-observer": "^9.10.2",
     "react-scroll-trigger": "^0.6.14"
   }
 }