diff --git a/src/App.tsx b/src/App.tsx
index 8fd2606..8197fc7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import Resources from "./pages/Forms";
 import TravelReimbursement from "./pages/TravelReimbursement";
 import Donate from "./pages/Donate";
 import History from "./pages/History";
+import PillarDetail from "./pages/PillarDetail";
 import ScrollToTop from "./components/ScrollToTop";
 import { CartProvider } from "./lib/CartContext";
 
@@ -54,6 +55,7 @@ function App() {
           <Route element={<MainLayout />}>
             <Route path="/" element={<Home />} />
             <Route path="/history" element={<History />} />
+            <Route path="/pillars/:slug" element={<PillarDetail />} />
             <Route path="/mentorship" element={<Mentorship />} />
             <Route path="/distinguishedMembers" element={<PointsSystem />} />
             <Route path="/leaderboard" element={<Leaderboard />} />
diff --git a/src/app.css b/src/app.css
index c706247..48b5ef4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -604,6 +604,32 @@ body {
 
 .section {
   @apply py-8 md:py-16 flex flex-col justify-center items-center;
+  position: relative;
+}
+
+/* Subtle zebra-striping so consecutive sections read as distinct blocks,
+   on top of the gradient divider line below. */
+.section:nth-of-type(even) {
+  background-color: rgba(255, 255, 255, 0.025);
+}
+
+/* Soft horizontal divider above every section after the first, giving
+   each homepage section visual separation without heavy hard lines. */
+.section + .section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(80rem, 92%);
+  height: 3px;
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    rgba(231, 231, 229, 0.35) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
 }
 
 .cal-shadow {
diff --git a/src/components/Mission.tsx b/src/components/Mission.tsx
index 7f78c4c..6de0a69 100644
--- a/src/components/Mission.tsx
+++ b/src/components/Mission.tsx
@@ -1,49 +1,34 @@
-const perks = [
-  {
-    header: "Professional Development",
-    description:
-      "SoDA offers boundless opportunities to advance your career. From technical workshops hosted by industry leaders to career fairs and networking events, you’ll gain invaluable experience and connections to kickstart your journey as a software developer.",
-    imgURL: "/events/amazon-table.webp",
-    alt: "Amazon table at a SoDA event",
-  },
-  {
-    header: "Community and Support",
-    description:
-      "SoDA provides a supportive network of fellow computer science students, offering collaboration, encouragement, and a sense of belonging through regular meetings and events with free food.",
-    imgURL: "/events/microsoft-resume-review.webp",
-    alt: "Microsoft resume review at a SoDA event",
-  },
-  {
-    header: "Learning",
-    description:
-      "Enhance your skills through a variety of learning opportunities, including coding workshops, bootcamps, and talks from industry professionals. SoDA is committed to your personal and professional growth, ensuring you stay ahead in the fast-paced tech world.",
-    imgURL: "/events/what-is-soda.webp",
-    alt: "SoDA members at a meeting",
-  },
-];
+import { Link } from "react-router-dom";
+import HoverPlayMedia from "./ui/HoverPlayMedia";
+import { pillars } from "../data/pillars";
 
 export default function Mission() {
   return (
     <>
       <main className="flex flex-col justify-center items-center" id="mission">
         <h1 className="section-header-text">Mission</h1>
+        <p className="hero-small-text max-w-3xl text-center mb-8 px-6">
+          SoDA’s mission is to provide an accessible, professional, and fun community for students
+          interested in building software.
+        </p>
         <section className="grid  grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {perks.map((perk) => (
-            <div
-              key={perk.header}
-              className="bg-neutral-900  p-4 border-gray-600 rounded-2xl justify-center flex flex-col min-h-[300px] max-w-[300px] w-full"
+          {pillars.map((pillar) => (
+            <Link
+              key={pillar.slug}
+              to={`/pillars/${pillar.slug}`}
+              className="bg-neutral-900 p-4 border-gray-600 rounded-2xl justify-center flex flex-col min-h-[300px] max-w-[300px] w-full transition-colors hover:bg-neutral-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-soda-blue"
             >
-              <img
-                src={perk.imgURL}
+              <HoverPlayMedia
+                src={pillar.imgURL}
+                videoSrc={pillar.videoURL}
+                alt={pillar.alt}
                 className="rounded-t-xl object-cover w-full h-48"
-                alt={perk.alt}
               />
               <div className="text-white px-4 py-3 space-y-3 text-left flex-1">
-                <h4 className="font-semibold text-xl max-md:text-lg">{perk.header}</h4>
-                {/* <hr className="border-soda-gray opacity-75 my-2 w-[60%]" /> */}
-                <p className="text-[14px] max-md:text-sm ">{perk.description}</p>
+                <h4 className="font-semibold text-xl max-md:text-lg">{pillar.header}</h4>
+                <p className="text-[14px] max-md:text-sm ">{pillar.description}</p>
               </div>
-            </div>
+            </Link>
           ))}
         </section>
       </main>
diff --git a/src/components/Stats/Statistics.tsx b/src/components/Stats/Statistics.tsx
index d1ded82..ca4e506 100644
--- a/src/components/Stats/Statistics.tsx
+++ b/src/components/Stats/Statistics.tsx
@@ -14,7 +14,8 @@ const statistics = [
     // value: 22500,  // last updated 2020-01-16 (https://github.com/asusoda/asu-soda-oldsite/commit/0813ac24a21dcc190ecfc44b0829825c27d85718)
     // last known value + semesters since * estimated = 22500 + 10 * 3500 = 57500  // last updated 2025-03-29
     //Added the number for Spring 2025 updated 2025-08-25: 61276
-    value: 61276,
+    // Updated 2026-08-25: 63857.20
+    value: 63857.2,
     steps: 3000,
     formatter: (x: number) => <>{dollarFormatter.format(x)}</>,
   },
diff --git a/src/components/ui/HoverPlayMedia.tsx b/src/components/ui/HoverPlayMedia.tsx
new file mode 100644
index 0000000..0df079c
--- /dev/null
+++ b/src/components/ui/HoverPlayMedia.tsx
@@ -0,0 +1,43 @@
+import { useRef } from "react";
+
+interface HoverPlayMediaProps {
+  src: string;
+  videoSrc?: string;
+  alt: string;
+  className?: string;
+}
+
+export default function HoverPlayMedia({ src, videoSrc, alt, className }: HoverPlayMediaProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  if (!videoSrc) {
+    return <img src={src} className={className} alt={alt} />;
+  }
+
+  const play = () => videoRef.current?.play();
+  const reset = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.pause();
+    video.currentTime = 0;
+  };
+
+  return (
+    <video
+      ref={videoRef}
+      className={className}
+      poster={src}
+      src={videoSrc}
+      muted
+      loop
+      playsInline
+      preload="none"
+      aria-label={alt}
+      onMouseEnter={play}
+      onMouseLeave={reset}
+      onFocus={play}
+      onBlur={reset}
+      tabIndex={0}
+    />
+  );
+}
diff --git a/src/data/pillars.ts b/src/data/pillars.ts
new file mode 100644
index 0000000..ca28282
--- /dev/null
+++ b/src/data/pillars.ts
@@ -0,0 +1,36 @@
+export interface Pillar {
+  slug: string;
+  header: string;
+  description: string;
+  imgURL: string;
+  alt: string;
+  // Hover-play video, added per pillar once footage is available.
+  videoURL?: string;
+}
+
+export const pillars: Pillar[] = [
+  {
+    slug: "professional-development",
+    header: "Professional Development",
+    description:
+      "SoDA offers boundless opportunities to advance your career. From technical workshops hosted by industry leaders to career fairs and networking events, you’ll gain invaluable experience and connections to kickstart your journey as a software developer.",
+    imgURL: "/events/amazon-table.webp",
+    alt: "Amazon table at a SoDA event",
+  },
+  {
+    slug: "community",
+    header: "Community and Support",
+    description:
+      "SoDA provides a supportive network of fellow computer science students, offering collaboration, encouragement, and a sense of belonging through regular meetings and events with free food.",
+    imgURL: "/events/microsoft-resume-review.webp",
+    alt: "Microsoft resume review at a SoDA event",
+  },
+  {
+    slug: "learning",
+    header: "Learning",
+    description:
+      "Enhance your skills through a variety of learning opportunities, including coding workshops, bootcamps, and talks from industry professionals. SoDA is committed to your personal and professional growth, ensuring you stay ahead in the fast-paced tech world.",
+    imgURL: "/events/what-is-soda.webp",
+    alt: "SoDA members at a meeting",
+  },
+];
diff --git a/src/pages/PillarDetail.tsx b/src/pages/PillarDetail.tsx
new file mode 100644
index 0000000..1725671
--- /dev/null
+++ b/src/pages/PillarDetail.tsx
@@ -0,0 +1,41 @@
+import { Helmet } from "react-helmet-async";
+import { Link, useParams } from "react-router-dom";
+import { pillars } from "../data/pillars";
+
+export default function PillarDetail() {
+  const { slug } = useParams<{ slug: string }>();
+  const pillar = pillars.find((p) => p.slug === slug);
+
+  if (!pillar) {
+    return (
+      <div className="max-w-3xl mx-auto p-6 my-28 text-center text-white">
+        <h1 className="section-header-text">Pillar not found</h1>
+        <Link to="/#mission" className="text-soda-blue underline">
+          Back to Mission
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto p-6 my-28">
+      <Helmet>
+        <title>SoDA - {pillar.header}</title>
+        <meta name="description" content={pillar.description} />
+      </Helmet>
+
+      <Link to="/#mission" className="text-soda-blue underline text-sm">
+        ← Back to Mission
+      </Link>
+
+      <img
+        src={pillar.imgURL}
+        alt={pillar.alt}
+        className="rounded-2xl object-cover w-full h-64 md:h-80 mt-4 mb-8"
+      />
+
+      <h1 className="section-header-text text-left! w-full!">{pillar.header}</h1>
+      <p className="hero-small-text">{pillar.description}</p>
+    </div>
+  );
+}