diff --git a/src/components/TechSlideshow.tsx b/src/components/TechSlideshow.tsx
index d378c85..295713b 100644
--- a/src/components/TechSlideshow.tsx
+++ b/src/components/TechSlideshow.tsx
@@ -15,10 +15,11 @@ const moveSlideshow = keyframes`
 
 // Moving background sprite container
 const Mover = styled(Box)(({ theme }) => ({
-  marginTop: "-50px",
   height: "100%",
   width: "3184px",
   backgroundImage: `url(${require("../assets/slider3_opt.png")})`,
+  backgroundPosition: "center center",
+  backgroundRepeat: "repeat-x",
   position: "absolute",
   top: 0,
   left: 0,
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 4605342..06ebf83 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -2,20 +2,92 @@
  * Home - Main landing page with hero, about, stats, partners, and CTA sections
  * Update stats array and section content as needed
  */
-import React, { memo } from "react";
+import React, { memo, useEffect, useRef, useState } from "react";
 import Box from "@mui/material/Box";
+import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 import { ReactComponent as Logo } from "../assets/wat_ai_logo.svg";
 import TechSlideshow from "../components/TechSlideshow";
 import { useTheme } from "@mui/material/styles";
-import { HeroTitle, SectionTitle, SubsectionTitle, BodyLarge, BodyText } from "../components/Typography";
+import { HeroTitle, SectionTitle, BodyLarge } from "../components/Typography";
 import UnifiedSection from "../components/UnifiedSection";
-import UnifiedCard from "../components/UnifiedCard";
 import UnifiedButton from "../components/UnifiedButton";
-import UnifiedStats from "../components/UnifiedStats";
+
+const AnimatedCounter: React.FC<{ value: string }> = ({ value }) => {
+  const target = Number.parseInt(value, 10);
+  const suffix = value.replace(/^\d+/, "");
+  const [count, setCount] = useState(0);
+  const counterRef = useRef<HTMLSpanElement | null>(null);
+
+  useEffect(() => {
+    const element = counterRef.current;
+    if (!element || Number.isNaN(target)) return;
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setCount(target);
+      return;
+    }
+
+    let animationFrame = 0;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+
+        const duration = 1400;
+        const startTime = performance.now();
+
+        const animate = (now: number) => {
+          const progress = Math.min((now - startTime) / duration, 1);
+          const easedProgress = 1 - Math.pow(1 - progress, 3);
+          setCount(Math.round(target * easedProgress));
+
+          if (progress < 1) {
+            animationFrame = window.requestAnimationFrame(animate);
+          }
+        };
+
+        animationFrame = window.requestAnimationFrame(animate);
+        observer.disconnect();
+      },
+      { threshold: 0.35 }
+    );
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, [target]);
+
+  return (
+    <Box component="span" ref={counterRef} aria-label={value}>
+      {count}{suffix}
+    </Box>
+  );
+};
 
 const HomePage: React.FC = memo(() => {
   const theme = useTheme();
 
+  const sectionTitleSx = {
+    color: theme.palette.text.primary,
+    fontSize: { xs: "2.2rem", sm: "2.8rem", md: "3.35rem" },
+    fontWeight: 750,
+    lineHeight: 1.1,
+    letterSpacing: "-0.04em",
+    mb: { xs: 6, md: 8 },
+    position: "relative",
+    "&::after": {
+      content: '""',
+      display: "block",
+      width: 72,
+      height: 2,
+      mt: 2.5,
+      mx: "auto",
+      background: `linear-gradient(90deg, transparent, ${theme.palette.primary.main}, transparent)`,
+    },
+  };
+
   // Key metrics displayed on homepage
   const stats = [
     { number: "450+", label: "Program Graduates", description: "Students & researchers" },
@@ -35,28 +107,52 @@ const HomePage: React.FC = memo(() => {
       {/* Hero Section */}
       <UnifiedSection
         backgroundColor="transparent"
-        minHeight="90vh"
+        minHeight="92vh"
         centerContent
         padding={8}
       >
-        <Box sx={{ textAlign: "center" }}>
+        <Box
+          sx={{
+            textAlign: "center",
+            position: "relative",
+            py: { xs: 5, md: 8 },
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              width: { xs: 300, md: 560 },
+              height: { xs: 260, md: 360 },
+              top: "45%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              background: `radial-gradient(circle, ${theme.palette.primary.main}18, transparent 68%)`,
+              filter: "blur(12px)",
+              pointerEvents: "none",
+              zIndex: -1,
+            },
+          }}
+        >
           <Logo
             style={{
               display: "block",
-              margin: "0 auto 2rem auto",
-              width: "min(80vw, 300px)",
-              maxWidth: "300px",
-              minWidth: "200px",
+              margin: "0 auto 2.5rem auto",
+              width: "min(72vw, 270px)",
+              maxWidth: "270px",
+              minWidth: "180px",
               height: "auto",
-              filter: "drop-shadow(0px 4px 6px rgba(0,0,0,0.2))",
+              filter: "drop-shadow(0 10px 28px rgba(255, 206, 26, 0.12))",
             }}
           />
           <HeroTitle sx={{ 
-            fontSize: { xs: "1.8rem", sm: "2.2rem", md: "2.8rem", lg: "3.5rem" },
-            lineHeight: { xs: 1.2, md: 1.1 },
+            maxWidth: "900px",
+            mx: "auto",
+            fontSize: { xs: "2.35rem", sm: "3.25rem", md: "4.25rem" },
+            fontWeight: 750,
+            lineHeight: { xs: 1.12, md: 1.05 },
+            letterSpacing: "-0.045em",
             px: { xs: 1, sm: 2 },
-            mb: { xs: 3, md: 4 },
+            mb: { xs: 4, md: 5 },
             color: theme.palette.primary.contrastText,
+            textWrap: "balance",
           }}>
             Fostering the Future of AI at Waterloo
           </HeroTitle>
@@ -64,7 +160,7 @@ const HomePage: React.FC = memo(() => {
             variant="primary"
             size="large"
             to="/students"
-            endIcon={<Box component="span">❱</Box>}
+            endIcon={<ArrowForwardRoundedIcon sx={{ fontSize: "1.2em" }} />}
           >
             Get Involved
           </UnifiedButton>
@@ -74,33 +170,37 @@ const HomePage: React.FC = memo(() => {
       {/* About Section */}
       <UnifiedSection
         backgroundColor="transparent"
-        minHeight="80vh"
+        minHeight="75vh"
         padding={8}
+        centerContent
       >
-        <Box sx={{ textAlign: "center" }}>
-          <SectionTitle sx={{ mb: { xs: 4, sm: 5, md: 6 } }}>
+        <Box sx={{ textAlign: "center", maxWidth: "1100px", mx: "auto" }}>
+          <SectionTitle sx={sectionTitleSx}>
             About Us
           </SectionTitle>
-          <UnifiedCard
-            variant="elevated"
-            padding={5}
+          <Box
+            sx={{
+              position: "relative",
+              p: { xs: 3, sm: 5, md: 7 },
+              borderRadius: { xs: 4, md: 6 },
+              border: `1px solid ${theme.palette.primary.main}2B`,
+              background: `linear-gradient(135deg, ${theme.palette.primary.main}0D, rgba(20,20,20,0.76) 48%, rgba(12,12,12,0.68))`,
+              backdropFilter: "blur(10px)",
+              boxShadow: "0 24px 70px rgba(0,0,0,0.22)",
+              overflow: "hidden",
+            }}
           >
-            <SubsectionTitle sx={{ 
-              textAlign: "center", 
-              mb: { xs: 3, sm: 4 },
-              color: theme.palette.text.primary,
-            }}>
-              Fostering The Future Of AI Talent At The University of Waterloo
-            </SubsectionTitle>
             <BodyLarge sx={{ 
               textAlign: "center", 
-              mb: { xs: 3, sm: 4 }, 
+              mb: { xs: 4, sm: 5 },
               maxWidth: "800px", 
-              margin: "0 auto",
+              mx: "auto",
               color: theme.palette.text.primary,
+              fontSize: { xs: "1rem", sm: "1.12rem" },
+              lineHeight: 1.75,
             }}>
-              WAT.ai is a student-run Artificial Intelligence (AI) Organization at
-              the University of Waterloo and the undergraduate student body of the{" "}
+              WAT.ai is the largest AI design team at the University of Waterloo.
+              We're part of the{" "}
               <Box
                 component="a"
                 href="https://uwaterloo.ca/artificial-intelligence-institute/"
@@ -118,9 +218,9 @@ const HomePage: React.FC = memo(() => {
                   },
                 }}
               >
-                Waterloo AI Institute
+                Waterloo.ai Institute
               </Box>{" "}
-              and member of the{" "}
+              and the{" "}
               <Box
                 component="a"
                 href="https://uwaterloo.ca/sedra-student-design-centre/"
@@ -138,50 +238,81 @@ const HomePage: React.FC = memo(() => {
                   },
                 }}
               >
-                Sedra Student Design Centre (SSDC)
-              </Box>.
+                Sedra Student Design Centre
+              </Box>. Every term, we have 60+ students running 8–12 AI projects—from
+              robotic manipulators to healthcare chatbots.
             </BodyLarge>
-            <BodyText sx={{ 
-              textAlign: "center", 
-              mb: { xs: 4, sm: 5 }, 
-              maxWidth: "700px", 
-              margin: "0 auto",
-              color: theme.palette.text.secondary,
-            }}>
-              Our goal is to establish an environment to enable the continued
-              growth of AI talent and suitable access to opportunities within the
-              Waterloo community. We provide opportunities for undergraduate and
-              graduate students to engage in impactful projects through
-              collaboration with companies and internal research.
-            </BodyText>
-            <UnifiedButton
-              variant="outlined"
-              size="large"
-              to="/team"
-              endIcon={<Box component="span">❱</Box>}
-            >
-              Meet The Team
-            </UnifiedButton>
-          </UnifiedCard>
+            <Box sx={{ display: "flex", justifyContent: "center", gap: 2, flexWrap: "wrap" }}>
+              <UnifiedButton variant="primary" size="large" to="/students">
+                For Students
+              </UnifiedButton>
+              <UnifiedButton variant="outlined" size="large" to="/partnerships">
+                For Partners
+              </UnifiedButton>
+            </Box>
+          </Box>
         </Box>
       </UnifiedSection>
 
       {/* Stats Section */}
       <UnifiedSection
-        backgroundColor="paper"
-        minHeight="60vh"
+        backgroundColor="transparent"
+        minHeight="65vh"
         centerContent
         padding={8}
       >
-        <Box sx={{ textAlign: "center" }}>
-          <SectionTitle sx={{ mb: { xs: 4, sm: 5, md: 6 } }}>
+        <Box sx={{ textAlign: "center", maxWidth: "1180px", mx: "auto" }}>
+          <SectionTitle sx={sectionTitleSx}>
             Our Impact
           </SectionTitle>
-          <BodyLarge sx={{ mb: { xs: 6, sm: 7, md: 8 }, maxWidth: "600px", margin: "0 auto" }}>
+          <BodyLarge sx={{
+            mb: { xs: 5, md: 7 },
+            maxWidth: "650px",
+            mx: "auto",
+            color: theme.palette.text.secondary,
+            lineHeight: 1.75,
+            textWrap: "balance",
+          }}>
             Join a thriving community of AI enthusiasts making real impact 
             through research, collaboration, and innovation.
           </BodyLarge>
-          <UnifiedStats stats={stats} />
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "repeat(2, 1fr)", md: "repeat(4, 1fr)" },
+              borderTop: `1px solid ${theme.palette.primary.main}30`,
+              borderBottom: `1px solid ${theme.palette.primary.main}30`,
+            }}
+          >
+            {stats.map((stat, index) => (
+              <Box
+                key={stat.label}
+                sx={{
+                  py: { xs: 4, md: 5 },
+                  px: { xs: 1.5, sm: 3 },
+                  position: "relative",
+                  borderRight: {
+                    xs: index % 2 === 0 ? `1px solid ${theme.palette.primary.main}24` : "none",
+                    md: index < stats.length - 1 ? `1px solid ${theme.palette.primary.main}24` : "none",
+                  },
+                  borderBottom: {
+                    xs: index < 2 ? `1px solid ${theme.palette.primary.main}24` : "none",
+                    md: "none",
+                  },
+                }}
+              >
+                <Box sx={{ color: theme.palette.primary.main, fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" }, fontWeight: 750, lineHeight: 1, mb: 1.5, letterSpacing: "-0.04em" }}>
+                  <AnimatedCounter value={stat.number} />
+                </Box>
+                <Box sx={{ color: theme.palette.text.primary, fontSize: { xs: "0.86rem", sm: "1rem" }, fontWeight: 650, mb: 0.75 }}>
+                  {stat.label}
+                </Box>
+                <Box sx={{ color: theme.palette.text.secondary, fontSize: { xs: "0.72rem", sm: "0.82rem" } }}>
+                  {stat.description}
+                </Box>
+              </Box>
+            ))}
+          </Box>
         </Box>
       </UnifiedSection>
 
@@ -193,20 +324,27 @@ const HomePage: React.FC = memo(() => {
         padding={8}
       >
         <Box sx={{ textAlign: "center", width: "100%" }}>
-          <SectionTitle sx={{ 
-            color: theme.palette.text.secondary,
-            mb: { xs: 4, sm: 5, md: 6 },
-          }}>
+          <SectionTitle sx={sectionTitleSx}>
             Our Partners
           </SectionTitle>
-          <BodyLarge sx={{ mb: { xs: 4, sm: 5, md: 6 }, maxWidth: "600px", margin: "0 auto" }}>
+          <BodyLarge sx={{
+            mb: { xs: 4, sm: 5, md: 6 },
+            maxWidth: "640px",
+            mx: "auto",
+            color: theme.palette.text.secondary,
+            lineHeight: 1.75,
+            textWrap: "balance",
+          }}>
             We collaborate with leading companies and organizations to provide 
             our members with real-world AI experience and opportunities.
           </BodyLarge>
           <Box sx={{ 
             width: "100%",
             overflow: "hidden",
-            px: { xs: 0, sm: 1, md: 2 }
+            px: { xs: 0, sm: 1, md: 2 },
+            py: 2,
+            borderTop: `1px solid ${theme.palette.primary.main}20`,
+            borderBottom: `1px solid ${theme.palette.primary.main}20`,
           }}>
             <TechSlideshow />
           </Box>
@@ -215,20 +353,36 @@ const HomePage: React.FC = memo(() => {
 
       {/* CTA Section */}
       <UnifiedSection
-        backgroundColor="paper"
+        backgroundColor="transparent"
         minHeight="50vh"
         centerContent
         padding={8}
       >
-        <Box sx={{ textAlign: "center" }}>
-          <SectionTitle sx={{ mb: { xs: 3, sm: 4 } }}>
+        <Box sx={{ textAlign: "center", maxWidth: "900px", mx: "auto", px: { xs: 2, sm: 4 } }}>
+          <SectionTitle sx={sectionTitleSx}>
             Ready to Join Us?
           </SectionTitle>
-          <BodyLarge sx={{ mb: { xs: 4, sm: 5, md: 6 }, maxWidth: "600px", margin: "0 auto" }}>
+          <BodyLarge sx={{
+            mb: { xs: 4, sm: 5, md: 6 },
+            maxWidth: "680px",
+            mx: "auto",
+            color: theme.palette.text.secondary,
+            lineHeight: 1.75,
+            textWrap: "balance",
+          }}>
             Whether you're a student looking to dive into AI, a professor seeking research collaborations, 
             or a company interested in partnerships, we'd love to work with you.
           </BodyLarge>
-          <Box sx={{ display: "flex", gap: { xs: 2, sm: 3 }, justifyContent: "center", flexWrap: "wrap" }}>
+          <Box sx={{
+            display: "flex",
+            gap: { xs: 2, sm: 2.5 },
+            justifyContent: "center",
+            flexWrap: "wrap",
+            "& > *": {
+              minWidth: { xs: "100%", sm: "170px" },
+              fontWeight: "700 !important",
+            },
+          }}>
             <UnifiedButton
               variant="primary"
               size="large"
@@ -237,14 +391,14 @@ const HomePage: React.FC = memo(() => {
               For Students
             </UnifiedButton>
             <UnifiedButton
-              variant="outlined"
+              variant="primary"
               size="large"
               to="/partnerships"
             >
               For Partners
             </UnifiedButton>
             <UnifiedButton
-              variant="text"
+              variant="primary"
               size="large"
               to="/contact"
             >