diff --git a/app/page.tsx b/app/page.tsx
index da36ffd..0787250 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@ import AboutSection from "@/components/AboutSection";
 import Footer from "@/components/Footer";
 import HeroSection from "@/components/HeroSection";
 import TeamSection from "@/components/TeamSection";
+import ChallengesSection from "@/components/ChallengesSection"
 
 export default function Home() {
   return (
@@ -22,8 +23,10 @@ export default function Home() {
 
         {/* START OF THE CHALLENGES SECTION */}
         <section id="challenges" className="min-h-screen w-full flex flex-col items-center">
-          {/* Challenges code goes here */}
-          <h2>Challenges</h2>
+          <h2 className="text-4xl font-bold p-16 m-16 h-16 gap-16">
+            Monthly Challenges
+          </h2>
+          <ChallengesSection />
         </section>
 
         {/* START OF THE TEAM SECTION */}
@@ -39,4 +42,4 @@ export default function Home() {
       </footer>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/components/ChallengesSection.tsx b/components/ChallengesSection.tsx
new file mode 100644
index 0000000..4a88164
--- /dev/null
+++ b/components/ChallengesSection.tsx
@@ -0,0 +1,58 @@
+import WinnersSection, { Winner } from "./WinnersSection"
+import ChallengeCard, { ChallengeCardProps } from "./ChallengeCard";
+
+// Each project title here must have a unique key
+const WINNERS: Winner[] = [
+  {
+    name: "test",
+    challengeTitle: "test",
+    projectTitle: "test1",
+    deadline: new Date(2026, 8, 20),
+    placement: 1,
+  },
+  {
+    name: "test",
+    challengeTitle: "test",
+    projectTitle: "test2",
+    deadline: new Date(2026, 8, 20),
+    placement: 2,
+  },
+  {
+    name: "test",
+    challengeTitle: "test",
+    projectTitle: "test3",
+    deadline: new Date(2026, 8, 20),
+    placement: 2,
+  },
+  {
+    name: "test",
+    challengeTitle: "test",
+    projectTitle: "test4",
+    deadline: new Date(2025, 7, 20),
+    placement: 2,
+  },
+  {
+    name: "test",
+    challengeTitle: "test",
+    projectTitle: "test5",
+    deadline: new Date(2025, 6, 20),
+    placement: 2,
+  },
+];
+
+const CHALLENGE: ChallengeCardProps = {
+  name: "Creative Loading Screen",
+  desc: "An animated progress bar, spinning 3D model, particle effects, ASCII loading sequence, or mini-game with a fall theme.",
+  tags: ["fall", "gamedev", "loadingscreen"],
+  deadline: new Date(2026, 8, 30),
+  link: "somelink",
+}
+
+export default function Challenges() {
+  return (
+    <section className="w-full flex flex-col gap-16">
+      <ChallengeCard {...CHALLENGE} />
+      <WinnersSection winners={WINNERS} />
+    </section>
+  )
+}