diff --git a/app/(api)/_actions/events/getTeamMixer.ts b/app/(api)/_actions/events/getTeamMixer.ts
new file mode 100644
index 00000000..6d29293d
--- /dev/null
+++ b/app/(api)/_actions/events/getTeamMixer.ts
@@ -0,0 +1,15 @@
+'use server';
+
+import { GetEvents } from '@datalib/events/getEvent';
+
+let cachedTeamMixer: any = null;
+
+export async function getTeamMixerEvent() {
+  if (cachedTeamMixer) return cachedTeamMixer;
+
+  const res = await GetEvents({ name: 'Team Mixer' });
+  if (res.ok) {
+    cachedTeamMixer = res.body?.[0];
+  }
+  return cachedTeamMixer || null;
+}
diff --git a/app/(pages)/(hackers)/_components/StarterKit/TeamBuilding.tsx b/app/(pages)/(hackers)/_components/StarterKit/TeamBuilding.tsx
index d58b9919..220ce14b 100644
--- a/app/(pages)/(hackers)/_components/StarterKit/TeamBuilding.tsx
+++ b/app/(pages)/(hackers)/_components/StarterKit/TeamBuilding.tsx
@@ -1,19 +1,24 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import Image from 'next/image';
-import type Event from '@typeDefs/event';
+import { getTeamMixerEvent } from '@actions/events/getTeamMixer';
 import teamMixer from '@public/hackers/starter-kit/teamBuilding/teamMixer.svg';
 import mascots from '@public/hackers/starter-kit/teamBuilding/mascotSquad.svg';
 import { CalendarItem } from '@pages/(hackers)/_components/Schedule/CalendarItem';
 import { MentorCalloutCard } from '@pages/(hackers)/_components/StarterKit/Ideate/IdeateMentorCallout';
 
-const TEAM_MIXER_EVENT: Event = {
-  name: 'Team Mixer',
-  type: 'ACTIVITIES',
-  location: 'ARC Ballroom A',
-  start_time: new Date('2026-05-09T08:30:00'),
-  end_time: new Date('2026-05-09T09:30:00'),
-};
-
 export default function TeamBuilding() {
+  const [teamMixerEvent, setTeamMixerEvent] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getTeamMixerEvent().then((event) => {
+      setTeamMixerEvent(event);
+      setLoading(false);
+    });
+  }, []);
+
   return (
     <section className="flex flex-col py-[7%] px-[4%] bg-[#FAFAFF] gap-[112px] md:gap-[144px]">
       {/* Header */}
@@ -36,11 +41,19 @@ export default function TeamBuilding() {
 
         {/* Event Card */}
         <div className="mt-[40px] md:mt-[60px]">
-          <CalendarItem
-            event={TEAM_MIXER_EVENT}
-            attendeeCount={15}
-            hideAddButton
-          />
+          {loading ? (
+            <p className="text-center text-gray-600 py-4">Loading event...</p>
+          ) : teamMixerEvent ? (
+            <CalendarItem
+              event={teamMixerEvent}
+              attendeeCount={15}
+              hideAddButton
+            />
+          ) : (
+            <p className="text-center text-gray-600 py-4">
+              Team Mixer event not found
+            </p>
+          )}
         </div>
       </div>