diff --git a/src/app/programs/page.tsx b/src/app/programs/page.tsx
new file mode 100644
index 0000000..5c38c0d
--- /dev/null
+++ b/src/app/programs/page.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function ProgramsPage() {
+  return (
+    <ThemeProvider>
+      <NavbarLayoutFloatingOverlay
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Academics", id: "/academics" },
+          { name: "Programs", id: "/programs" },
+          { name: "About", id: "/about" },
+          { name: "Contact", id: "/contact" },
+        ]}
+        brandName="SJHN"
+      />
+      <div className="pt-32">
+        <FeatureCardTwelve
+          title="Extracurricular Activities & Clubs"
+          description="Beyond the classroom, we foster personal growth through various clubs and activities."
+          textboxLayout="split"
+          animationType="slide-up"
+          features={[
+            { id: "c1", label: "Sports", title: "Athletics", items: ["Netball", "Football", "Swimming", "Basketball"] },
+            { id: "c2", label: "Clubs", title: "Leadership & Arts", items: ["Debating Club", "Drama Society", "Science Club", "Young Farmers"] },
+          ]}
+        />
+      </div>
+      <FooterBaseReveal
+        logoText="SJHN"
+        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+      />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file