diff --git a/app/page.tsx b/app/page.tsx
index d055730..d04fdf8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,15 +1,20 @@
-'use client'
-import { AspectRatio, Card, Stack, Typography, useTheme } from '@mui/joy';
-import React, { useEffect, useRef } from 'react';
+"use client";
+import { AspectRatio, Card, Stack, Typography, useTheme } from "@mui/joy";
+import React, { useEffect, useRef } from "react";
 import { Box, Button, Link } from "@mui/material";
-import { projectData } from '../data';
+import { projectData } from "../data";
 import useEmblaCarousel from "embla-carousel-react";
 import Autoplay from "embla-carousel-autoplay";
 import { ProjectCardProps } from "../components/ProjectCard";
 import Image from "next/image";
-import { NextButton, PrevButton, usePrevNextButtons } from "../components/embla/EmblaCarouselArrowButtons";
-import "./styles.css"
+import {
+  NextButton,
+  PrevButton,
+  usePrevNextButtons,
+} from "../components/embla/EmblaCarouselArrowButtons";
+import "./styles.css";
 import { useMediaQuery } from "@mui/system";
+import { CustomCarousel } from "../components/carousel/CustomCarousel";
 
 interface EventCardProp {
   title: string;
@@ -19,199 +24,107 @@ interface EventCardProp {
   button: string;
 }
 
-const eventContent: EventCardProp[] = [
-  {
-    title: "Clubs Takeover",
-    href: "https://www.facebook.com/events/1586760535262553/",
-    dateTime: "12-2PM October 22nd 2024",
-    thumbnail: "",
-    button: "View event"
-  },
-  {
-    title: "Techspire",
-    href: "https://techspire.devsoc.app/",
-    dateTime: "3PM November 5th 2024",
-    thumbnail: "",
-    button: "Find out more"
-  },
-]
-
 export default function Home() {
   const scrollRef = useRef<HTMLDivElement | null>(null);
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, axis: 'y', duration: 45 }, [Autoplay({delay: 5000})]);
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: true, axis: "y", duration: 45 },
+    [Autoplay({ delay: 5000 })]
+  );
   const {
     prevBtnDisabled,
     nextBtnDisabled,
     onPrevButtonClick,
-    onNextButtonClick
-  } = usePrevNextButtons(emblaApi)
-  const displayProjects = projectData.filter(x => x.name !== "Chaos" && x.name !== "Jobsboard")
-
-  useEffect(() => {
-    const handleScroll = (e: { deltaY: any; }) => {
-      if (scrollRef.current) {
-        // Adjust the scroll position of the div based on the window's scroll position
-        scrollRef.current.scrollLeft += e.deltaY; // or adjust based on scroll direction
-      }
-    };
-
-    window.addEventListener('wheel', handleScroll, { passive: false });
-
-    return () => {
-      window.removeEventListener('wheel', handleScroll);
-    };
-  }, []);
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi);
+  const displayProjects = projectData.filter(
+    (x) => x.name !== "Chaos" && x.name !== "Jobsboard"
+  );
 
   return (
     <Box className="homeContent">
-      <Stack direction="column" pt={2} px={4} width="100%" maxWidth={1300} m="auto" overflow="hidden">
+      <Stack
+        direction="column"
+        pt={2}
+        px={4}
+        width="100%"
+        maxWidth={1300}
+        m="auto"
+        overflow="hidden"
+      >
         <Stack direction="column">
-          <Box sx={{width: "100%"}}>
-            <Typography className={"heroText"} mt={3} fontSize={{xs: "2rem", sm: "2.3rem", md: "3.2rem"}}
-                        fontWeight={500} component='div'>
-              UNSW&apos;s student developer society
+          <Box sx={{ width: "100%" }}>
+            <Typography
+              className={"heroText"}
+              mt={3}
+              fontSize={{ xs: "2rem", sm: "2.3rem", md: "3.2rem" }}
+              fontWeight={500}
+              component="div"
+            >
+              UNSW&apos;s Software Development Society
             </Typography>
-            <Typography className={"heroText"} mt={0} fontSize={{xs: "1.5rem", sm: "2rem", md: "2.5rem"}} fontWeight={200}
-                        component='div'>
+            <Typography
+              className={"heroText"}
+              mt={0}
+              fontSize={{ xs: "1.5rem", sm: "2rem", md: "2.5rem" }}
+              fontWeight={200}
+              component="div"
+            >
               Run by devs, for devs
             </Typography>
           </Box>
         </Stack>
-        <Box sx={{display: "flex", flexDirection: "row", gap: "1rem", alignItems: "center"}} mt={{xs: 2, md: 0}}>
-          <Typography
-            paddingTop={{xs: 1, md: 3}}
-            paddingBottom={{xs: 1, md: 3}}
-            fontSize={{xs: 20, md: 30}}
-            fontWeight={600}
-          >
-            Highlights
-          </Typography>
-          <div className="embla__controls">
-            <div className="embla__buttons">
-              <PrevButton onClick={onPrevButtonClick} />
-              <NextButton onClick={onNextButtonClick} />
-            </div>
-          </div>
-        </Box>
-        <Card
-          ref={emblaRef}
-          className="embla"
-          sx={{padding: 0, height: {xs: '90px', md: '115px'}}}
-        >
-          <Stack className="embla__container">
-            {eventContent.map((props, idx) => <HighlightLinkCard key={`event ${props.title}`} {...props}/>)}
-          </Stack>
-        </Card>
+        <CustomCarousel />
         <Box
           ref={scrollRef}
-          marginBottom={{xs: "3rem", md: 0}}
-          marginTop={{xs: "2rem", md: "3rem"}}
+          marginBottom={{ xs: "3rem", md: 0 }}
+          marginTop={{ xs: "2rem", md: "2rem" }}
           sx={{
-            display: 'flex',
-            overflowX: 'auto',
-            scrollbarWidth: 'none',
+            display: "flex",
+            overflowX: "auto",
           }}
         >
           <Stack
-            spacing={{xs: 3, md: 5}}
-            direction={{xs: "column", md: "row"}}
-            sx={{display: "flex", width: '100%'}}
-            flexDirection={{xs: "column", md: "row"}}
+            spacing={{ xs: 3, lg: 5 }}
+            direction={{ xs: "column", lg: "row" }}
+            sx={{ display: "flex", width: "100%" }}
+            flexDirection={{ xs: "column", lg: "row" }}
           >
-            {displayProjects.map((props, idx) => <LinkCard key={props.name} {...props} order={idx}/>)}
+            {displayProjects.map((props, idx) => (
+              <LinkCard key={props.name} {...props} order={idx} />
+            ))}
           </Stack>
         </Box>
       </Stack>
     </Box>
-  )
+  );
 }
 
-const HighlightLinkCard: React.FC<EventCardProp> = ({
-  title,
-  href,
-  dateTime,
-  thumbnail,
-  button
-}) => {
-  let color = "#111111";
-  const theme = useTheme();
-  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
-  return (
-    <Card
-      className="embla__slide"
-      sx={{
-        height: {xs: "90px", md: "100px"},
-        backgroundColor: color,
-        borderRadius: 0,
-        padding: thumbnail && isMdUp ? '2rem 1rem' : {xs: '1rem', md: '2rem'},
-        flexDirection: 'row',
-        gap: '4rem',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        border: 'none'
-      }}
-    >
-      <Box sx={{display: "flex", flexDirection: "row", gap: "2rem"}}>
-        {
-          thumbnail && isMdUp ? <Image width={170} height={90} src={thumbnail} alt={title}/> : null
-        }
-        <Box sx={{display: "flex", flexDirection: "column"}}>
-          <Typography
-            sx={{
-              color: "#EDEEF0",
-              fontSize: { xs: '1.5rem', sm: '1.75rem', md: '2rem' },
-              fontWeight: 500,
-              alignSelf: "flex-start",
-              justifySelf: "center"
-            }}
-          >
-            {title}
-          </Typography>
-          <Typography
-            sx={{
-              color: "#EDEEF0",
-              alignSelf: "flex-start",
-              justifySelf: "center"
-            }}
-          >
-            {dateTime}
-          </Typography>
-        </Box>
-      </Box>
-      {
-        button ?
-          <Link href={href} sx={{ textDecoration: 'none' }}>
-            <Button variant="soft">{button}</Button>
-          </Link> : null
-      }
-    </Card>
-  )
-}
-
-const LinkCard: React.FC<Omit<ProjectCardProps, "trainee"> & { order: number }> = ({
-  name,
-  desc,
-  logoUrl,
-  thumbnailUrl,
-  projectUrl,
-  status,
-  order
-}) => {
+const LinkCard: React.FC<
+  Omit<ProjectCardProps, "trainee"> & { order: number }
+> = ({ name, desc, logoUrl, thumbnailUrl, projectUrl, status, order }) => {
   // Class 3 colors sourced from https://www.radix-ui.com/colors
-  const colors = ["#182449", "#0D2847", "#202248", "#351A35", "#391714", "#291F43", "#222222"]
+  const colors = [
+    "#182449",
+    "#0D2847",
+    "#202248",
+    "#351A35",
+    "#391714",
+    "#291F43",
+    "#222222",
+  ];
   return (
     <Link href={projectUrl}>
       <Card
         className="boxBackground"
         sx={{
-          width: { xs: "100%", md: "250px" },
-          height: { xs: "5rem", md: "100px" },
+          width: { xs: "100%", lg: "215px" },
+          height: { xs: "5rem", lg: "86px" },
           backgroundColor: colors[order],
-          boxShadow: 'sm',
-          padding: '1rem',
-          flexDirection: 'row',
-          gap: '2rem',
-          alignItems: 'center',
+          boxShadow: "sm",
+          padding: "1rem",
+          flexDirection: "row",
+          gap: "1.25rem",
+          alignItems: "center",
         }}
       >
         <AspectRatio objectFit="contain" ratio={1} sx={{ width: "3rem" }}>
@@ -225,7 +138,7 @@ const LinkCard: React.FC<Omit<ProjectCardProps, "trainee"> & { order: number }>
         <Typography
           sx={{
             color: "#EDEEF0",
-            fontSize: {xs: '1.5rem', sm: '1.75rem', md: '1.5rem'},
+            fontSize: { xs: "1.5rem", lg: "1.25rem" },
             fontWeight: 500,
           }}
         >
@@ -233,6 +146,5 @@ const LinkCard: React.FC<Omit<ProjectCardProps, "trainee"> & { order: number }>
         </Typography>
       </Card>
     </Link>
-  )
-}
-
+  );
+};
diff --git a/app/styles.css b/app/styles.css
index 15677bf..8da88f6 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -2,7 +2,8 @@
     font-family: 'IBM Plex Mono', monospace;
 }
 
-.boxBackground {
+/* Unused styles for old event design */
+/* .boxBackground {
     position: relative;
 }
 
@@ -17,9 +18,9 @@
     right: 0;
     width: 100%;
     height: 100%;
-}
+} */
 
-.embla {
+/* .embla {
     overflow: hidden;
 }
 .embla__container {
@@ -47,4 +48,4 @@
     width: 25px;
     align-items: center;
     justify-content: center;
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/components/carousel/CustomCarousel.tsx b/components/carousel/CustomCarousel.tsx
new file mode 100644
index 0000000..cc080bc
--- /dev/null
+++ b/components/carousel/CustomCarousel.tsx
@@ -0,0 +1,101 @@
+import React, { useEffect } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import "./embla.css";
+import {
+  NextButton,
+  PrevButton,
+  usePrevNextButtons,
+} from "../embla/EmblaCarouselArrowButtons";
+import { Box, Typography } from "@mui/joy";
+
+export function CustomCarousel() {
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: true, watchDrag: false },
+    [Autoplay({ delay: 4500 })]
+  );
+  const slides = [
+    { src: "/carousel/brainstorm.png", text: "Solve Unique Problems" },
+    { src: "/carousel/starlight.jpg", text: "Showcase your projects" },
+    { src: "/carousel/qa_panel.jpg", text: "Industry Events" },
+    { src: "/carousel/workshops.png", text: "Learn Together" },
+    { src: "/carousel/together.jpg", text: "Develop Together" },
+    { src: "/carousel/projects.png", text: "Our Projects" },
+    {
+      src: "/projects/notangles/thumbnail.png",
+      text: "Notangles",
+      position: "50% 0%",
+    },
+    {
+      src: "/projects/circles/thumbnail.png",
+      text: "Circles",
+      position: "50% 20%",
+    },
+    {
+      src: "/carousel/unilectives.png",
+      text: "Unilectives",
+      position: "50% 0%",
+    },
+    {
+      src: "/projects/structs/thumbnail.png",
+      text: "Structs.sh",
+      postion: "50% 80%",
+    },
+    {
+      src: "/projects/freerooms/thumbnail.png",
+      text: "Freerooms",
+      position: "50% 20%",
+    },
+    { src: "/carousel/applications.png", text: "Join us!" },
+  ];
+
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi);
+
+  return (
+    <div>
+      <div className="embla__controls">
+        <div className="embla__buttons">
+          <PrevButton onClick={onPrevButtonClick} />
+          <NextButton onClick={onNextButtonClick} />
+        </div>
+      </div>
+      <section className="embla" ref={emblaRef}>
+        <Box
+          className="embla__container"
+          sx={{
+            height: { xs: "200px", sm: "300px", md: "400px" },
+          }}
+        >
+          {slides.map((e, index) => (
+            <div className="embla__slide" key={index}>
+              {e.src ? (
+                <img
+                  className="embla__image"
+                  src={e.src}
+                  style={{
+                    objectPosition: `${e.position ? e.position : "50% 50%"}`,
+                  }}
+                />
+              ) : null}
+              <Typography
+                className="embla__text"
+                sx={{
+                  color: "#EDEEF0",
+                  fontSize: { xs: "1.5rem", sm: "3rem", md: "4rem" },
+                  fontWeight: 500,
+                }}
+              >
+                {e.text}
+              </Typography>
+            </div>
+          ))}
+        </Box>
+      </section>
+    </div>
+  );
+}
diff --git a/components/carousel/embla.css b/components/carousel/embla.css
new file mode 100644
index 0000000..f25c803
--- /dev/null
+++ b/components/carousel/embla.css
@@ -0,0 +1,55 @@
+.embla {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+  width: 100%;
+}
+.embla__slide {
+  flex: 0 0 100%;
+  background-color: black;
+  min-width: 0;
+}
+
+.embla__text {
+  position: relative;
+  letter-spacing: 1px;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgb(0 0 0 / 0.7);
+  /* -webkit-text-stroke: 4px rgb(48,48,48); */
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  z-index: 4;
+  user-select: none;
+}
+
+.embla__slide img {
+  position: absolute;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0.65;
+}
+
+.embla__controls {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.embla__buttons {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+}
+
+.embla__button {
+    display: flex;
+    height: 25px;
+    width: 25px;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/public/carousel/applications.png b/public/carousel/applications.png
new file mode 100644
index 0000000..9557601
Binary files /dev/null and b/public/carousel/applications.png differ
diff --git a/public/carousel/brainstorm.png b/public/carousel/brainstorm.png
new file mode 100644
index 0000000..9b2110b
Binary files /dev/null and b/public/carousel/brainstorm.png differ
diff --git a/public/carousel/projects.png b/public/carousel/projects.png
new file mode 100644
index 0000000..13c5d2b
Binary files /dev/null and b/public/carousel/projects.png differ
diff --git a/public/carousel/qa_panel.jpg b/public/carousel/qa_panel.jpg
new file mode 100644
index 0000000..7409f12
Binary files /dev/null and b/public/carousel/qa_panel.jpg differ
diff --git a/public/carousel/starlight.jpg b/public/carousel/starlight.jpg
new file mode 100644
index 0000000..8c3280c
Binary files /dev/null and b/public/carousel/starlight.jpg differ
diff --git a/public/carousel/together.jpg b/public/carousel/together.jpg
new file mode 100644
index 0000000..43139e9
Binary files /dev/null and b/public/carousel/together.jpg differ
diff --git a/public/carousel/unilectives.png b/public/carousel/unilectives.png
new file mode 100644
index 0000000..13fcb74
Binary files /dev/null and b/public/carousel/unilectives.png differ
diff --git a/public/carousel/workshops.png b/public/carousel/workshops.png
new file mode 100644
index 0000000..78a417a
Binary files /dev/null and b/public/carousel/workshops.png differ