diff --git a/web/public/carousel_one.png b/web/public/carousel_one.png
new file mode 100644
index 0000000..f9155b6
Binary files /dev/null and b/web/public/carousel_one.png differ
diff --git a/web/public/carousel_two.png b/web/public/carousel_two.png
new file mode 100644
index 0000000..53a8301
Binary files /dev/null and b/web/public/carousel_two.png differ
diff --git a/web/public/nerdy-merlion.png b/web/public/nerdy-merlion.png
new file mode 100644
index 0000000..d382f1f
Binary files /dev/null and b/web/public/nerdy-merlion.png differ
diff --git a/web/src/app/about/page.tsx b/web/src/app/about/page.tsx
index 52a5c3f..50adf7a 100644
--- a/web/src/app/about/page.tsx
+++ b/web/src/app/about/page.tsx
@@ -1,15 +1,166 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import Image from 'next/image'
 import Hero from '@/components/Hero'
 
+// TODO: replace with CMS data matching field requirements
+const carouselImages = [
+  { src: '/carousel_two.png', alt: 'SSA Event 1' },
+  { src: '/carousel_one.png', alt: 'SSA Event 2' },
+  { src: '/carousel_two.png', alt: 'SSA Event 3' },
+]
+
 export default function AboutPage() {
+  const [current, setCurrent] = useState(0)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const touchStartX = useRef<number | null>(null)
+
+  const startTimer = useCallback(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current)
+    intervalRef.current = setInterval(() => {
+      setCurrent((prev) => (prev + 1) % carouselImages.length)
+    }, 6000)
+  }, [])
+
+  useEffect(() => {
+    startTimer()
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }
+  }, [startTimer])
+
+  const goTo = useCallback(
+    (index: number) => {
+      setCurrent(index)
+      startTimer()
+    },
+    [startTimer],
+  )
+
+  const goPrev = useCallback(() => {
+    goTo((current - 1 + carouselImages.length) % carouselImages.length)
+  }, [current, goTo])
+
+  const goNext = useCallback(() => {
+    goTo((current + 1) % carouselImages.length)
+  }, [current, goTo])
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    touchStartX.current = e.touches[0].clientX
+  }
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (touchStartX.current === null) return
+    const diff = touchStartX.current - e.changedTouches[0].clientX
+    if (Math.abs(diff) > 50) {
+      if (diff > 0) {
+        goNext()
+      } else {
+        goPrev()
+      }
+    }
+    touchStartX.current = null
+  }
+
   return (
-    <main>
-      <Hero
-        title="About Us"
-        subtitle="Learn more about our mission and team"
-        mascotImage="/ssa_nerd_merlion.svg"
-        mascotAlt="SSA Nerd Merlion mascot"
-      />
-      <div className="p-8">{/* Content coming soon */}</div>
+    <main className="flex flex-col bg-ssa-yellow-light pb-16 text-ssa-grey md:pb-24">
+      <div className="-mt-[88px]">
+        <Hero
+          title="About Us"
+          subtitle="We are a community that promotes and celebrates Singapore culture and traditions through social activities (and food!)"
+          mascotImage="/ssa_nerd_merlion.svg"
+          mascotAlt="SSA Nerd Merlion mascot"
+        />
+      </div>
+
+      {/* Gap between hero and carousel */}
+      <div className="h-10 md:h-16" />
+
+      {/* Image carousel */}
+      <section className="px-4 sm:px-6 md:px-10 lg:px-20">
+        <div className="relative">
+          <div
+            className="relative w-full aspect-[4/3] sm:aspect-[16/9] overflow-hidden rounded-2xl"
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+          >
+            {/* Sliding track */}
+            <div
+              className="flex h-full transition-transform duration-500 ease-in-out"
+              style={{ transform: `translateX(-${current * 100}%)` }}
+            >
+              {carouselImages.map((image, index) => (
+                <div key={index} className="relative h-full w-full shrink-0">
+                  <Image
+                    src={image.src}
+                    alt={image.alt}
+                    fill
+                    className="object-cover"
+                    priority={index === 0}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Prev arrow */}
+          <button
+            onClick={goPrev}
+            aria-label="Previous slide"
+            className="absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full bg-white/70 hover:bg-white transition-colors"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="w-5 h-5 text-ssa-grey"
+            >
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+
+          {/* Next arrow */}
+          <button
+            onClick={goNext}
+            aria-label="Next slide"
+            className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full bg-white/70 hover:bg-white transition-colors"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="w-5 h-5 text-ssa-grey"
+            >
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Dot navigation */}
+        <div className="flex justify-center gap-2 pt-4">
+          {carouselImages.map((_, index) => (
+            <button
+              key={index}
+              onClick={() => goTo(index)}
+              aria-label={`Go to slide ${index + 1}`}
+              className="flex items-center justify-center w-6 h-6"
+            >
+              <span
+                className={`block w-2.5 h-2.5 rounded-full transition-all duration-200 ${index === current ? 'bg-ssa-red scale-125' : 'bg-ssa-red/30'}`}
+              />
+            </button>
+          ))}
+        </div>
+      </section>
     </main>
   )
 }