diff --git a/public/hero/hero2.png b/public/hero/hero2.png
index 014aa43..1f68ae7 100644
Binary files a/public/hero/hero2.png and b/public/hero/hero2.png differ
diff --git a/public/hero/hero5.png b/public/hero/hero5.png
index 2a1aa41..16140ac 100644
Binary files a/public/hero/hero5.png and b/public/hero/hero5.png differ
diff --git a/public/hero/hero7.png b/public/hero/hero7.png
index 08037c1..4836633 100644
Binary files a/public/hero/hero7.png and b/public/hero/hero7.png differ
diff --git a/public/hero/hero8.png b/public/hero/hero8.png
index 19423fd..6a175f2 100644
Binary files a/public/hero/hero8.png and b/public/hero/hero8.png differ
diff --git a/public/landing/card-icons/events.png b/public/landing/card-icons/events.png
new file mode 100644
index 0000000..51c5475
Binary files /dev/null and b/public/landing/card-icons/events.png differ
diff --git a/public/landing/card-icons/money.png b/public/landing/card-icons/money.png
new file mode 100644
index 0000000..ef9630d
Binary files /dev/null and b/public/landing/card-icons/money.png differ
diff --git a/public/landing/card-icons/officer.png b/public/landing/card-icons/officer.png
new file mode 100644
index 0000000..d731609
Binary files /dev/null and b/public/landing/card-icons/officer.png differ
diff --git a/public/landing/card-icons/pc-parts.png b/public/landing/card-icons/pc-parts.png
new file mode 100644
index 0000000..10ebc60
Binary files /dev/null and b/public/landing/card-icons/pc-parts.png differ
diff --git a/public/landing/card-icons/social.png b/public/landing/card-icons/social.png
new file mode 100644
index 0000000..eb7855c
Binary files /dev/null and b/public/landing/card-icons/social.png differ
diff --git a/public/landing/cards/blue.png b/public/landing/cards/blue.png
new file mode 100644
index 0000000..43b7b50
Binary files /dev/null and b/public/landing/cards/blue.png differ
diff --git a/public/landing/cards/green.png b/public/landing/cards/green.png
new file mode 100644
index 0000000..545e89b
Binary files /dev/null and b/public/landing/cards/green.png differ
diff --git a/public/landing/cards/orange.png b/public/landing/cards/orange.png
new file mode 100644
index 0000000..61c4c63
Binary files /dev/null and b/public/landing/cards/orange.png differ
diff --git a/public/landing/cards/purple.png b/public/landing/cards/purple.png
new file mode 100644
index 0000000..a06be3f
Binary files /dev/null and b/public/landing/cards/purple.png differ
diff --git a/public/landing/cards/red.png b/public/landing/cards/red.png
new file mode 100644
index 0000000..dee2204
Binary files /dev/null and b/public/landing/cards/red.png differ
diff --git a/public/landing/discord-app.png b/public/landing/discord-app.png
new file mode 100644
index 0000000..7de6f90
Binary files /dev/null and b/public/landing/discord-app.png differ
diff --git a/public/landing/discord-pc-bg.png b/public/landing/discord-pc-bg.png
new file mode 100644
index 0000000..7b64bb5
Binary files /dev/null and b/public/landing/discord-pc-bg.png differ
diff --git a/public/landing/mainBackground.jpg b/public/landing/mainBackground.jpg
deleted file mode 100644
index 26492e7..0000000
Binary files a/public/landing/mainBackground.jpg and /dev/null differ
diff --git a/public/landing/tube.png b/public/landing/tube.png
deleted file mode 100644
index a0eb4ab..0000000
Binary files a/public/landing/tube.png and /dev/null differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 682a78f..5784955 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -17,18 +17,15 @@ textarea {
 
 body {
   font-family: "Space Grotesk", serif !important;
-  /* font-family: "Space Mono", serif; */
   background-color: #ffffff;
   overflow-x: hidden;
 }
 
-#hero {
-  background-image: url("/landing/bg.svg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+.footer-clip-path {
+  clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
 }
 
+/* Events Page */
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
@@ -41,6 +38,7 @@ body {
   border: 1px solid #4255f911;
 }
 
+/* About Page */
 .about-bg {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
@@ -54,31 +52,16 @@ body {
   border: 1px solid #242424;
 }
 
-.footer-clip-path {
-  clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
-}
 
-.grad {
-  background: linear-gradient(0deg, #4255f922, #080d14);
-  filter: blur(20px);
-}
 
-/* fade background of hero */
 
-.hero-btn:hover {
+/* Landing Page */
+
+.cta-btn:hover {
   /* Apply a full (all-around) shadow with #79C7FD */
   box-shadow: 0 0 16px 4px rgba(121, 199, 253, 0.7);
 }
 
-.hero-fade {
-  background: linear-gradient(180deg, #080d1400 0%, #080d14 100%);
-}
-
-.about-fade {
-  background: linear-gradient(0deg, #080d1400 0%, #080d14 100%);
-}
-
-
 /* infinite carousel */
 
 .scroller-list {
@@ -89,15 +72,44 @@ body {
   justify-content: space-between;
   align-items: center;
   gap: 16px;
-  animation: scroll 20s linear infinite;
+  /* Remove animation from here so it only applies when all images are loaded */
 }
 
-.scroller-container:hover .scroller-list{
-  animation-play-state: paused;
+.scroller-list.animate-scroll {
+  animation: scroll 24s linear infinite;
 }
 
 @keyframes scroll {
   to {
     transform: translateX(calc(-100% - 16px));
   }
+}
+
+/* Discord PC */
+
+.pc-stand {
+  background: linear-gradient(
+    180deg,
+    rgba(64, 64, 64, 0.1) 0%,
+    rgba(64, 64, 64, 0.2) 13.27%,
+    rgba(64, 64, 64, 0.25) 27.21%,
+    rgba(64, 64, 64, 0.48) 60.58%,
+    rgba(64, 64, 64, 0.54) 76.36%,
+    rgba(64, 64, 64, 0.45) 92.14%
+  );
+}
+
+.pc-base {
+  background: linear-gradient(
+    90deg,
+    rgba(64, 64, 64, 0.6) 0%,
+    rgba(64, 64, 64, 0.3) 6.5%,
+    rgba(64, 64, 64, 0.6) 19.18%,
+    rgba(64, 64, 64, 0.3) 32.93%,
+    rgba(64, 64, 64, 0.3) 66.46%,
+    rgba(64, 64, 64, 0.6) 81%,
+    rgba(64, 64, 64, 0.3) 94%,
+    rgba(64, 64, 64, 0.6) 100%
+  );
+  box-shadow: 0px -7px 2px 0px rgba(0, 0, 0, 0.18);
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4b40498..f72ab72 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import Footer from "@/components/Footer";
 import About from "@/components/landing/About";
+import DiscordPC from "@/components/landing/DiscordPc";
 import Events from "@/components/landing/Events";
 import Faq from "@/components/landing/Faq";
 import Hero from "@/components/landing/Hero";
@@ -10,6 +11,7 @@ const Website = () => {
     <div className="min-h-screen w-full bg-[#080d14] text-white">
       <Hero />
       <About />
+      <DiscordPC/>
       <Events />
       <Faq />
       <Footer />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index be4c7af..b89a147 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,119 +1,94 @@
+import { ArrowUpRight } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="relative z-20 mt-28 flex justify-end">
-      <div className="grid min-h-[420px] w-full max-w-[1600px] grid-cols-1 items-center lg:grid-cols-3">
-        <div className="flex flex-col gap-6 pl-10 text-white">
-          <figure>
-            <Image
-              src={"/navbar/logo.png"}
-              width={160}
-              height={160}
-              alt=""
-              className="h-32 w-32 sm:h-48 sm:w-48"
-            />
-          </figure>
-          <p className="text-2xl font-semibold sm:text-4xl">
-            Proudly Building PCs.
-          </p>
-          <div className="flex gap-3 md:gap-4">
-            <Link
-              href="https://www.linkedin.com/company/the-society-of-pc-building"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
-            >
-              <Image
-                src="/landing/linkedin.png"
-                alt="LinkedIn"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
-            <Link
-              href="https://www.instagram.com/pcbuildinguf/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
-            >
-              <Image
-                src="/landing/instagram.png"
-                alt="Instagram"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
-            <Link
-              href="https://discord.com/invite/jfq9phWqTF"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
-            >
-              <Image
-                src="/landing/discord.png"
-                alt="Discord"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
-            <Link
-              href="https://linktr.ee/pcbuildinguf"
+    <footer className="relative mt-24 sm:mt-40 border-t border-gray-900 text-white">
+      <Image
+        src="/hero/hero-background.png"
+        alt="Lights Background"
+        fill
+        priority
+        sizes="100vw"
+        quality={100} // Increase image quality (0-100)
+        className="absolute left-0 right-0 top-0 z-0 object-cover"
+      />
+      <div className="absolute inset-0 z-10 bg-[#080d14ec] backdrop-blur-md" />
+      <div className="relative z-20 mx-auto flex flex-col lg:flex-row max-w-6xl px-6 pb-16 pt-16 sm:pt-20 sm:px-10">
+        <div className="max-w-[250px]">
+          <div>
+            <Image src={"/navbar/logo.png"} width={100} height={100} alt="" />
+            <p className="pt-4 text-2xl font-medium">Proudly Building PCs.</p>
+            <p className="border-b border-gray-800 py-2 text-sm text-dull">
+              © 2025 The Society of PC Building. <br />
+              All rights reserved.
+            </p>
+          </div>
+          <div className="mt-4">
+            <p className="text-sm">
+              Made in Collaboration with Gator User Design.{" "}
+              <a
+                href="https://www.instagram.com/gatoruserdesign/"
+                target="_blank"
+                className="hover:underline"
+              >
+                Check us out <ArrowUpRight size={16} className="inline" />
+              </a>
+            </p>
+            <div className="w-14">
+              <a
+                href="https://www.instagram.com/gatoruserdesign/"
+                target="_blank"
+              >
+                <Image
+                  src={"/iconography/gud-color.png"}
+                  width={56}
+                  height={56}
+                  alt=""
+                  className="mt-4 rounded-full border border-gray-700"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 sm:grid-cols-3 items-start gap-12 lg:pl-32 pt-16 lg:pt-[116px]">
+          <div className="grid gap-4">
+            <p className="text-dull">Socials</p>
+            <a target="_blank" href="https://discord.com/invite/jfq9phWqTF">
+              Discord
+            </a>
+            <a
               target="_blank"
-              rel="noopener noreferrer"
-              className="transition-transform hover:scale-110"
+              href="https://www.linkedin.com/company/the-society-of-pc-building"
             >
-              <Image
-                src="/landing/linktree.png"
-                alt="Linktree"
-                width={30}
-                height={30}
-                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
-              />
-            </Link>
+              LinkedIn
+            </a>
+            <a target="_blank" href="https://www.instagram.com/pcbuildinguf/">
+              Instagram
+            </a>
+            <a target="_blank" href="https://linktr.ee/pcbuildinguf">
+              LinkTree
+            </a>
           </div>
-          <p className="text-sm opacity-80">
-            &copy; {new Date().getFullYear()} The Society of PC Building. All
-            rights reserved.
-          </p>
-        </div>
-        <div className="footer-clip-path flex h-full min-h-80 flex-col items-center justify-center bg-white text-black px-16 sm:px-20 pt-20 lg:col-span-2">
-          <p className="max-w-[417px] text-2xl font-bold sm:text-4xl flex flex-col-reverse sm:flex-row items-center gap-2">
-            Gator User Design{" "}
-            <Image
-              src={"/iconography/gud-color.png"}
-              width={80}
-              height={80}
-              alt=""
-              className="h-14 w-14 sm:h-20 sm:w-20"
-            />{" "}
-          </p>
-          <div className="flex w-full max-w-[416px] items-start justify-center sm:justify-start">
-            <Link
+          <div className="grid gap-4">
+            <p className="text-dull">Pages</p>
+            <Link href="/">Home</Link>
+            <Link href="/about">About</Link>
+            <Link href="/events">Events</Link>
+            <Link href="/projects">Projects</Link>
+          </div>
+          <div className="grid gap-4">
+            <p className="text-dull">Other</p>
+            <a href="https://github.com/PCBuilding/SPCBWebsite" target="_blank">
+              Source Code
+            </a>
+            <a
               href="https://www.instagram.com/gatoruserdesign/"
               target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center text-xl text-black hover:underline sm:text-2xl"
             >
-              Check us out
-              <svg
-                className="ml-2 h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M14 5l7 7m0 0l-7 7m7-7H3"
-                />
-              </svg>
-            </Link>
+              Gator User Design
+            </a>
           </div>
         </div>
       </div>
diff --git a/src/components/landing/About.tsx b/src/components/landing/About.tsx
index d13580c..b2c9d71 100644
--- a/src/components/landing/About.tsx
+++ b/src/components/landing/About.tsx
@@ -1,297 +1,207 @@
-import React, { useRef, useEffect, useState } from "react";
-import { motion, useInView } from "framer-motion";
-import EvervaultCard from "./ui/evervault-card";
-import Terminal from "./ui/Connect";
-import AnimatedCountUp from "./ui/Counter";
-import GlowingLine from "@/components/decorations/GlowingLine";
+import React, { useState, useRef, useEffect } from "react";
+import { motion, useAnimation } from "framer-motion";
+import Image from "next/image";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
-// Define an interface for the list items.
-interface ListItem {
+const TOTAL_CARDS = 5;
+
+type Card = {
+  bg: string;
+  border: [string, string];
+  icon: string;
   title: string;
   desc: string;
-  children: React.ReactNode;
-}
+};
 
-// Create the list of items using the ListItem interface.
-const listItems: ListItem[] = [
+const cards: Card[] = [
+  {
+    bg: "/landing/cards/blue.png",
+    border: ["353F57", "191A23"],
+    icon: "/landing/card-icons/social.png",
+    title: "Connect with hundreds of tech enthusiasts.",
+    desc: "Meet like-minded individuals with industry experience in Computer Science & Engineering.",
+  },
   {
+    bg: "/landing/cards/orange.png",
+    border: ["4D402B", "1E1A19"],
+    icon: "/landing/card-icons/pc-parts.png",
     title: "Hands-on experience with the latest tech.",
     desc: "Build PCs, demo the latest technology, and learn new skills, all for free.",
-    children: <EvervaultCard />,
   },
   {
-    title: "Connect with hundreds of tech enthusiasts.",
-    desc: "Meet like-minded individuals with industry experience in Computer Science & Engineering.",
-    children: <Terminal />,
+    bg: "/landing/cards/green.png",
+    border: ["35533D", "415D48"],
+    icon: "/landing/card-icons/money.png",
+    title: "Highest funded student org at UF.",
+    desc: "We use these fund to fully cater our GBM's and regulary get the latest tech.",
   },
   {
-    title: "Highest funded student org at UF.",
-    desc: "We fully cater our GBM's and regulary get the latest tech.",
-    children: <AnimatedCountUp />,
+    bg: "/landing/cards/purple.png",
+    border: ["363048", "18171E"],
+    icon: "/landing/card-icons/events.png",
+    title: "Experience engaging and unique events",
+    desc: "Build PCs, demo the latest technology, and learn new skills, all for free.",
+  },
+  {
+    bg: "/landing/cards/red.png",
+    border: ["9E3A50", "640D20"],
+    icon: "/landing/card-icons/officer.png",
+    title: "Become an officer for valuable experience",
+    desc: "We offer numerous positions that expose officers to leadership and relevent technology.",
   },
 ];
 
 const About: React.FC = () => {
-  const [isDesktop, setIsDesktop] = useState<boolean>(false);
-
-  // Type the ref for the heading element.
-  const h3Ref = useRef<HTMLHeadingElement>(null);
-  const isInView = useInView(h3Ref, { once: true });
-
-  // Check if desktop for responsive lines
+  const [sliderIndex, setSliderIndex] = useState<number>(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+  const controls = useAnimation();
+  
   useEffect(() => {
-    const checkIfDesktop = () => {
-      setIsDesktop(window.innerWidth >= 768);
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 640);
     };
 
-    checkIfDesktop();
-    window.addEventListener("resize", checkIfDesktop);
-    return () => window.removeEventListener("resize", checkIfDesktop);
-  }, []);
-
-  return (
-    <div className="relative mx-auto max-w-7xl overflow-hidden px-10 pt-16 sm:pt-32">
-      <motion.img
-        src="/landing/tube.png"
-        alt=""
-        className={`absolute -top-64 left-1/2 z-0 hidden -translate-x-1/2 overflow-hidden transition-all sm:block ${
-          isInView ? "scale-x-100" : "scale-x-[0.25]"
-        } duration-1000`}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: isInView ? 0.2 : 0 }}
-        transition={{ duration: 1 }}
-      />
-
-      <div className="relative z-10">
-        <h3
-          ref={h3Ref}
-          className="pb-6 text-center text-[40px] font-medium sm:pb-10"
-        >
-          Why SPCB?
-        </h3>
-
-        {/* Desktop Main Lines - Only show on desktop */}
-        {isDesktop ? (
-          <>
-            <GlowingLine
-              xPoints={["50", "50", "16", "16"]}
-              yPoints={["5", "17", "17", "29"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            <GlowingLine
-              xPoints={["14", "14", "82", "82"]}
-              yPoints={["35", "50", "50", "58"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            <GlowingLine
-              xPoints={["86", "86", "12", "12"]}
-              yPoints={["67", "81", "81", "90"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-
-            {/* Main line decorators - Desktop only */}
-            <GlowingLine
-              xPoints={["35", "43"]}
-              yPoints={["16", "16"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["30", "45"]}
-              yPoints={["19", "19"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["83", "83"]}
-              yPoints={["52", "55"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["30", "45"]}
-              yPoints={["80", "80"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["34", "46"]}
-              yPoints={["82", "82"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={6}
-            />
-
-            {/* Blue decorative lines Group1 - Desktop only */}
-            <GlowingLine
-              xPoints={["4", "10"]}
-              yPoints={["4", "4"]}
-              color="#1E90FF"
-              thickness={2}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["0", "16"]}
-              yPoints={["6", "6"]}
-              color="#1E90FF"
-              thickness={2}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["2", "11"]}
-              yPoints={["7", "7"]}
-              color="#1E90FF"
-              thickness={2}
-              circleSize={6}
-            />
+    checkMobile();
 
-            {/* Blue decorative lines AT TOP - Desktop only */}
-            <GlowingLine
-              xPoints={["28", "71"]}
-              yPoints={["-7.75", "-7.75"]}
-              color="#1E90FF"
-              thickness={3}
-              circleSize={6}
-            />
-            {/* <GlowingLine
-              xPoints={["27", "72"]}
-              yPoints={["-6.5", "-6.5"]}
-              color="#1E90FF"
-              thickness={3}
-              circleSize={6}
-            /> */}
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
 
-            {/* Blue decorative lines Group3 - Desktop only */}
-            <GlowingLine
-              xPoints={["12", "20"]}
-              yPoints={["67", "67"]}
-              color="#1E90FF"
-              thickness={2}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["8", "22"]}
-              yPoints={["68", "68"]}
-              color="#1E90FF"
-              thickness={2}
-              circleSize={6}
-            />
-            <GlowingLine
-              xPoints={["9", "14"]}
-              yPoints={["70", "70"]}
-              color="#1E90FF"
-              thickness={2}
-              circleSize={6}
-            />
-          </>
-        ) : (
-          // Mobile Main Line - Vertical line through the middle
-          <>
-            <GlowingLine
-              xPoints={["58", "58"]}
-              yPoints={["16", "37"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            <GlowingLine
-              xPoints={["36", "36"]}
-              yPoints={["49", "70"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            <GlowingLine
-              xPoints={["70", "70"]}
-              yPoints={["79.5", "99"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            {/* Mobile Main Line decorations */}
-            <GlowingLine
-              xPoints={["55", "55"]}
-              yPoints={["25", "36"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-            <GlowingLine
-              xPoints={["39", "39"]}
-              yPoints={["60", "69"]}
-              color="#FFA500"
-              thickness={3}
-              circleSize={8}
-            />
-          </>
-        )}
+  // Calculate drag constraints based on container width
+  const calculateConstraints = () => {
+    const maxDrag = (TOTAL_CARDS - 1) * (isMobile ? 324 : 424);
+    return {
+      right: 0,
+      left: -maxDrag,
+    };
+  };
+
+  const handleDragEnd = (
+    event: any,
+    info: { offset: { x: number }; velocity: { x: number } },
+  ) => {
+    const offsetX = info.offset.x;
+    const velocity = info.velocity.x;
+
+    // Determine direction based on drag distance and velocity
+    if ((offsetX < -50 || velocity < -500) && sliderIndex < TOTAL_CARDS - 1) {
+      const newIndex = sliderIndex + 1;
+      setSliderIndex(newIndex);
+      controls.start({ x: -(isMobile ? 324 : 424) * newIndex });
+    } else if ((offsetX > 50 || velocity > 500) && sliderIndex > 0) {
+      const newIndex = sliderIndex - 1;
+      setSliderIndex(newIndex);
+      controls.start({ x: -(isMobile ? 324 : 424) * newIndex });
+    } else {
+      // Reset to current position if drag wasn't decisive
+      controls.start({ x: -(isMobile ? 324 : 424) * sliderIndex });
+    }
+  };
+
+  // Handle button navigation
+  const navigateSlider = (direction: "prev" | "next") => {
+    let newIndex = sliderIndex;
+
+    if (direction === "prev" && sliderIndex > 0) {
+      newIndex = sliderIndex - 1;
+    } else if (direction === "next" && sliderIndex < TOTAL_CARDS - 1) {
+      newIndex = sliderIndex + 1;
+    }
+
+    setSliderIndex(newIndex);
+    controls.start({ x: -(isMobile ? 324 : 424) * newIndex });
+  };
 
-        <ul className="relative z-10">
-          {listItems.map((info, index) => (
-            <AboutItem key={info.title} info={info} index={index} />
-          ))}
-        </ul>
+  return (
+    <div className="overflow-x-hidden">
+      <div className="relative mx-auto max-w-6xl px-6 pt-16 text-center sm:px-10 sm:py-28">
+        <h2 className="text-[40px] font-semibold">Why SPCB?</h2>
+        <p className="pt-4 text-dull">
+          Discover some of the many reasons to join the Society of PC Building
+        </p>
+
+        {/* Slider */}
+        <div className="mt-14" ref={containerRef}>
+          <motion.div
+            className="flex cursor-grab flex-nowrap gap-4 sm:gap-16 active:cursor-grabbing"
+            drag="x"
+            // Removed the dragControls prop
+            dragConstraints={calculateConstraints()}
+            dragElastic={0.1}
+            dragMomentum={true}
+            onDragEnd={handleDragEnd}
+            animate={controls}
+            initial={{ x: 0 }}
+            transition={{ type: "spring", stiffness: 300, damping: 30 }}
+          >
+            {cards.map((card) => (
+              <CardComponent card={card} key={card.bg} />
+            ))}
+          </motion.div>
+        </div>
+
+        <div className="flex gap-4 pt-12 pb-2">
+          <button
+            onClick={() => navigateSlider("prev")}
+            disabled={sliderIndex === 0}
+            className="rounded-full bg-gray-800 p-3 text-white disabled:opacity-50 hover:shadow-white-glow transition-all duration-200 disabled:shadow-none"
+          >
+            <ChevronLeft className="mr-px"/>
+          </button>
+          <button
+            onClick={() => navigateSlider("next")}
+            disabled={sliderIndex === TOTAL_CARDS - 1}
+            className="rounded-full bg-gray-800 p-3 text-white disabled:opacity-50 hover:shadow-white-glow transition-all duration-200 disabled:shadow-none"
+          >
+            <ChevronRight className="ml-px"/>
+          </button>
+        </div>
       </div>
     </div>
   );
 };
 
-interface AboutItemProps {
-  info: ListItem;
-  index: number;
-}
+export default About;
 
-const AboutItem: React.FC<AboutItemProps> = ({ info, index }) => {
-  const isEven = index % 2 === 0;
-  return (
-    <li className="grid gap-8 py-12 sm:py-16 md:grid-cols-2">
-      {isEven ? (
-        <>
-          <div className="flex flex-col items-center justify-between gap-3 text-center sm:gap-4 md:items-start md:text-left">
-            <p className="balance max-w-[320px] text-center text-3xl leading-[1.2] sm:max-w-[410px] sm:text-4xl lg:text-4xl xl:leading-[1.2]">
-              {info.title}
-            </p>
-            <p className="max-w-[445px] text-balance text-center text-lg text-dull lg:text-xl">
-              {info.desc}
-            </p>
-          </div>
+type CardProps = {
+  card: Card;
 
-          <div className="flex justify-center md:justify-end">
-            <div className="aspect-square w-full max-w-96 overflow-hidden rounded-xl border border-[#1a2a3d] bg-[#090f1a]">
-              {info.children}
-            </div>
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="order-last flex justify-center md:order-first md:justify-start">
-            <div className="aspect-square w-full max-w-96 overflow-hidden rounded-xl border border-[#1a2a3d] bg-[#090f1a]">
-              {info.children}
-            </div>
-          </div>
+};
 
-          <div className="order-first flex flex-col items-center justify-between gap-3 text-center sm:gap-4 md:order-last md:items-end md:text-right">
-            <p className="balance max-w-[320px] text-center text-3xl leading-[1.2] sm:max-w-[410px] sm:text-4xl lg:text-4xl xl:leading-[1.2]">
-              {info.title}
-            </p>
-            <p className="max-w-[445px] text-balance text-center text-lg text-dull lg:text-xl">
-              {info.desc}
-            </p>
+const CardComponent: React.FC<CardProps> = ({ card }) => {
+  return (
+    <div
+      className="rounded-[18px] p-px"
+      style={{
+        background: `linear-gradient(45deg, #${card.border[0]}, #${card.border[1]})`,
+      }}
+    >
+      <div className="relative h-[431px] sm:h-[500px] min-w-[310px] max-w-[320px] sm:max-w-[360px] overflow-hidden rounded-[18px] p-px sm:min-w-[360px]">
+        <img
+          src={card.bg}
+          alt=""
+          className="absolute top-0 left-0 bottom-0 right-0 z-0 select-none object-cover"
+          draggable="false"
+        />
+        <div className="relative z-10 w-full px-6 sm:px-8 py-8 sm:py-10">
+          <div className="border-b border-[#ffffff17] pb-1.5 sm:pb-[18px]">
+            <p className="text-balance text-xl sm:text-2xl font-medium">{card.title}</p>
+            <p className="text-balance pt-3 text-dull">{card.desc}</p>
+          </div>
+          <div className="flex justify-center pt-8 sm:pt-12">
+            <Image
+              src={card.icon}
+              alt=""
+              height={210}
+              width={210}
+              quality={100}
+              className="select-none w-48 sm:w-[210px] h-48 sm:h-[210px]"
+              draggable="false"
+            />
           </div>
-        </>
-      )}
-    </li>
+        </div>
+      </div>
+    </div>
   );
 };
-
-export default About;
diff --git a/src/components/landing/DiscordPc.tsx b/src/components/landing/DiscordPc.tsx
new file mode 100644
index 0000000..1084e5a
--- /dev/null
+++ b/src/components/landing/DiscordPc.tsx
@@ -0,0 +1,123 @@
+import Image from "next/image";
+import { FaDiscord } from "react-icons/fa";
+
+export default function DiscordPC() {
+  return (
+    <div className="overflow-hidden py-28">
+      <div className="mx-auto max-w-6xl px-6 sm:px-8">
+        <h3 className="text-balance text-center text-3xl font-medium tracking-tight sm:text-[40px]">
+          Stay Connected with SPCB on Discord!
+        </h3>
+        <p className="text-balance pt-4 text-center text-dull">
+          Discord is how we communicate with each other and discuss everything
+          related to PC building.
+          <br className="hidden sm:inline" />
+          It’s our main channel for sharing builds, troubleshooting, and
+          exchanging ideas.
+        </p>
+        <div className="pt-20 sm:pt-24">
+          <Mac />
+          <div className="group flex justify-center mt-24">
+            <div className="relative w-[850px] overflow-hidden rounded-md border border-gray-800">
+              <img
+                src="/hero/hero-background.png"
+                alt=""
+                className="absolute inset-0 z-0 -translate-y-12 transition-all duration-500 group-hover:-translate-y-20"
+              />
+              <div className="relative z-10 flex flex-col md:flex-row min-h-[200px] items-center justify-center md:justify-between bg-[#080d14bb] px-6 sm:px-10 py-4 backdrop-blur-md gap-4">
+                <p className="text-xl sm:text-2xl md:text-3xl font-medium text-center md:text-start">
+                  Join the Society of <br  className="hidden md:inline"/>
+                  PC Building Discord!
+                </p>
+                <a
+                  href="https://discord.gg/CmqKbnBDBG"
+                  target="_blank"
+                  className="cta-btn transition-all duration-300 flex items-center gap-2 rounded-md bg-blue px-12 py-2.5 md:text-lg font-medium text-black"
+                >
+                  Join Now <FaDiscord />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const Mac: React.FC = () => {
+  return (
+    <div className="flex flex-col md:items-center">
+      <div className="flex w-[800px] flex-col items-center">
+        <Screen />
+        <div className="pc-stand h-40 w-[260px]" />
+        <div className="pc-base relative h-4 w-[260px]">
+          <div className="bg-primary-700 absolute top-0 h-0.5 w-full"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Screen: React.FC = () => {
+  return (
+    <div className="relative">
+      <div
+        className="absolute bottom-2 left-9 right-9 z-0 hidden h-2 bg-blue sm:block"
+        style={{ filter: "blur(20px)" }}
+      />
+      <div className="bg-primary-900 z-10 mx-auto overflow-hidden rounded-xl border border-gray-900">
+        <div className="relative h-[450px] w-[850px] overflow-hidden bg-black p-2.5">
+          <Image
+            height={440}
+            width={800}
+            quality={100}
+            unoptimized
+            src="/landing/discord-pc-bg.png"
+            alt=""
+            className="absolute bottom-2.5 z-0"
+          />
+
+          <div className="relative h-full w-full">
+            <Taskbar />
+            <ScreenMain />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Taskbar: React.FC = () => {
+  function getFormattedDate(): string {
+    const date = new Date();
+
+    const year = date.getFullYear();
+
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date.getDate().toString().padStart(2, "0");
+
+    return `${year}-${month}-${day}`;
+  }
+  return (
+    <div className="text-primary-300 flex h-5 w-full items-center justify-between bg-gray-950 px-4 text-[7px] font-thin tracking-wide">
+      <div className="flex gap-4 pt-px">
+        <span>File</span>
+        <span>Edit</span>
+        <span>View</span>
+        <span>Window</span>
+      </div>
+      <div className="pt-px">
+        <span>{getFormattedDate()}</span>
+      </div>
+    </div>
+  );
+};
+
+const ScreenMain: React.FC = () => {
+  return (
+    <div className="flex h-full w-full items-center rounded-sm pl-10 backdrop-blur-sm md:justify-center md:pl-0">
+      <img src="/landing/discord-app.png" alt="" className="pb-4" />
+    </div>
+  );
+};
diff --git a/src/components/landing/Events.tsx b/src/components/landing/Events.tsx
index 91aa61b..03aa6d8 100644
--- a/src/components/landing/Events.tsx
+++ b/src/components/landing/Events.tsx
@@ -41,7 +41,7 @@ const Events: React.FC = () => {
           circleSize={8}
         />
         <GlowingLine
-          xPoints={["25", "25"]}
+          xPoints={["26.5", "26.5"]}
           yPoints={["-3", "14"]}
           color="#FFA500"
           thickness={3}
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index e03af12..0334779 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -46,16 +46,16 @@ export default function Hero() {
         priority
         sizes="100vw"
         quality={100} // Increase image quality (0-100)
-        className="absolute left-0 right-0 top-0 z-[11] object-cover opacity-[0.175]"
+        className="absolute left-0 right-0 top-0 z-[11] object-cover opacity-[0.15] sm:opacity-[0.175]"
       />
 
       <div className="relative z-40 flex flex-col items-center px-6 sm:px-10">
         <div className="mx-auto max-w-7xl flex-col items-center">
-          <div className="min-h-9 sm:min-h-14">
+          <div className="min-h-8 sm:min-h-14">
             <AnimatePresence>
               {contentVisible && (
                 <motion.p
-                  className="text-balance pb-2 text-lg text-dull sm:pb-6 sm:text-center sm:text-2xl"
+                  className="text-balance pb-2 text-base text-dull sm:pb-6 sm:text-center sm:text-2xl"
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: 10 }}
@@ -90,7 +90,7 @@ export default function Hero() {
                   <a
                     href="https://linktr.ee/pcbuildinguf"
                     target="_blank"
-                    className="hero-btn flex items-center justify-center gap-2 rounded-lg bg-blue px-8 py-2.5 text-black transition-all duration-300"
+                    className="cta-btn flex items-center justify-center gap-2 rounded-lg bg-blue px-8 py-2.5 text-black transition-all duration-300"
                   >
                     Get Involved <FaArrowRightLong />
                   </a>
@@ -138,7 +138,7 @@ export default function Hero() {
                 exit={{ opacity: 0, y: 10 }}
                 transition={{ duration: 0.5, delay: 0.3 }}
               >
-                <p className="text-center  text-dull pb-5">
+                <p className="text-center text-sm sm:text-base text-dull pb-5">
                   Led by a team of officers with experience at:
                 </p>
                 <div className="hidden items-center gap-6 opacity-70 md:flex">
diff --git a/src/components/landing/ui/Scroller.tsx b/src/components/landing/ui/Scroller.tsx
index e082fd9..017de73 100644
--- a/src/components/landing/ui/Scroller.tsx
+++ b/src/components/landing/ui/Scroller.tsx
@@ -1,37 +1,51 @@
-import React from "react";
-import Image from "next/image";
-
-type Picture = {
-  src: string;
-};
+import React, { useState } from "react";
 
 type ScrollerProps = {
   items: string[];
-  maxHeight: number
+  maxHeight: number;
 };
 
 export const Scroller: React.FC<ScrollerProps> = ({ items, maxHeight }) => {
+  // Since you have two lists (duplicated images for continuous scrolling),
+  // the total number of images is doubled.
+  const totalImages = items.length * 2;
+  const [loadedCount, setLoadedCount] = useState(0);
+
+  // Handler to track each image load
+  const handleImageLoad = () => {
+    setLoadedCount((prev) => prev + 1);
+  };
+
+  // Only add the animation class if all images are loaded
+  const animationClass = loadedCount === totalImages ? "animate-scroll" : "";
+
   return (
-    <div className="w-full overflow-hidden flex gap-4 scroller-container">
-      <ul className="scroller-list" style={{height: `${maxHeight}px`}}>
-        {items.map((picture, index) => (
-          <Item src={picture} key={index} />
+    <div className="w-full overflow-hidden flex gap-4 scroller-container" style={{ height: `${maxHeight}px` }}>
+      <ul className={`scroller-list ${animationClass}`} style={{ height: `${maxHeight}px` }}>
+        {items.map((src, index) => (
+          <Item key={index} src={src} onLoad={handleImageLoad} />
         ))}
       </ul>
-      <ul className="scroller-list"  style={{height: `${maxHeight}px`}}>
-        {items.map((picture, index) => (
-          <Item src={picture} key={index} />
+      <ul className={`scroller-list ${animationClass}`} style={{ height: `${maxHeight}px` }}>
+        {items.map((src, index) => (
+          <Item key={index} src={src} onLoad={handleImageLoad} />
         ))}
       </ul>
     </div>
   );
 };
 
-const Item: React.FC<Picture> = ({ src }) => {
+type ItemProps = {
+  src: string;
+  onLoad: () => void;
+};
+
+const Item: React.FC<ItemProps> = ({ src, onLoad }) => {
   return (
     <img
       src={src}
       alt=""
+      onLoad={onLoad}
       style={{ height: "100%", width: "auto" }}
       className="scroller-item"
     />