diff --git a/apps/expo/src/app/events/event/[id].tsx b/apps/expo/src/app/events/event/[id].tsx
index 389ff6b2..2a3c1ca4 100644
--- a/apps/expo/src/app/events/event/[id].tsx
+++ b/apps/expo/src/app/events/event/[id].tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Stack, useGlobalSearchParams } from "expo-router";
 import {
   CalendarClock,
@@ -24,26 +24,18 @@ import type { Event } from "@zotmeal/db";
 
 import { useMenuStore } from "~/utils";
 
+import { EventContext } from "..";
+
 export default function Event() {
   const { id } = useGlobalSearchParams();
   const { selectedRestaurant } = useMenuStore();
-
-  const testData = {
-    title: "Test Event",
-    start: new Date("2022-01-01 12:00:00"),
-    end: new Date(),
-    image:
-      "https://uci.campusdish.com/-/media/Feature/Articles/DefaultEventImage.ashx?mh=350&mw=350&hash=B788068F09F0E38D1D19756934E293E4C1379BBF",
-    shortDescription: "This is a test event with a short description!",
-    longDescription: `This is a long description of the event. It's so long that it wraps around multiple lines. It's a very long description, but it's also very interesting. You should definitely read it.`,
-    restaurantId: "3314",
-  } satisfies Event;
+  const eventData = useContext(EventContext)
 
   return (
     <>
       <Stack.Screen
         options={{
-          headerTitle: testData.title,
+          headerTitle: eventData.title,
           headerBackTitle: "Events",
           headerTitleStyle: { color: "white" },
         }}
@@ -70,7 +62,7 @@ export default function Event() {
           <Image
             resizeMode="contain"
             source={{
-              uri: testData.image ?? require("../example-event-image.png"),
+              uri: eventData.image ?? require("../example-event-image.png"),
             }}
             minWidth={100}
             maxWidth="100%"
@@ -78,7 +70,7 @@ export default function Event() {
           />
         </YStack>
         <YStack padding={0} gap="$2" marginVertical="$4">
-          <H3>{testData.title}</H3>
+          <H3>{eventData.title}</H3>
           <Separator marginBottom="$2" />
           <XStack alignItems="center" padding={0} gap="$2">
             <MapPin />
@@ -90,13 +82,13 @@ export default function Event() {
           <XStack alignItems="center" padding={0} gap="$2">
             <CalendarClock />
             <Text>
-              {format(testData.start.toString(), "LLL do p")} -{" "}
-              {format(testData.end.toString(), "LLL do p")}
+              {format(eventData.start.toString(), "LLL do p")} -{" "}
+              {format(eventData.end.toString(), "LLL do p")}
             </Text>
           </XStack>
           <XStack alignItems="center" padding={0} gap="$2">
             <Info />
-            <Text>{testData.shortDescription}</Text>
+            <Text>{eventData.shortDescription}</Text>
           </XStack>
         </YStack>
         <Accordion overflow="hidden" width="95%" type="multiple">
@@ -124,7 +116,7 @@ export default function Event() {
               borderTopLeftRadius={0}
               borderTopRightRadius={0}
             >
-              <Paragraph>{testData.longDescription}</Paragraph>
+              <Paragraph>{eventData.longDescription}</Paragraph>
             </Accordion.Content>
           </Accordion.Item>
         </Accordion>
diff --git a/apps/expo/src/app/events/index.tsx b/apps/expo/src/app/events/index.tsx
index ff10cd6b..e8421485 100644
--- a/apps/expo/src/app/events/index.tsx
+++ b/apps/expo/src/app/events/index.tsx
@@ -1,4 +1,5 @@
-import { Link } from "expo-router";
+import { createContext, useEffect, useState } from "react";
+import { Link, Stack } from "expo-router";
 import { format } from "date-fns";
 import { H3, Image, ScrollView, Text, YStack } from "tamagui";
 
@@ -6,31 +7,44 @@ import type { Event } from "@zotmeal/db";
 
 import { RestaurantTabs } from "~/components";
 
-// import { api } from "~/utils/api";
+import { api } from "~/utils/api";
 
+
+// Create a context for events, default value is a test event
+const testData: Event = {
+  start: new Date("2022-01-01 12:00:00"),
+  end: new Date(),
+  title: "Test Event",
+  shortDescription: "This is a test event",
+  longDescription: `This is a long description of the event. It's so long that it wraps
+    around multiple lines. It's a very long description, but it's also
+    very interesting. You should definitely read it.`,
+  image:
+    "https://uci.campusdish.com/-/media/Feature/Articles/DefaultEventImage.ashx?mh=350&mw=350&hash=B788068F09F0E38D1D19756934E293E4C1379BBF",
+  restaurantId: "3314",
+} satisfies Event;
+
+export const EventContext = createContext(testData)
+
+// Events Component
 export default function Events() {
-  // const { data, error } = api.event.get.useQuery({});
+  const [events, setEvents] = useState<Event[]>([]);
+
+  const eventsQuery = api.event.get.useQuery({});
 
-  const testData: Event[] = Array(5).fill({
-    start: new Date("2022-01-01 12:00:00"),
-    end: new Date(),
-    title: "Test Event",
-    shortDescription: "This is a test event",
-    longDescription: `This is a long description of the event. It's so long that it wraps
-      around multiple lines. It's a very long description, but it's also
-      very interesting. You should definitely read it.`,
-    image:
-      "https://uci.campusdish.com/-/media/Feature/Articles/DefaultEventImage.ashx?mh=350&mw=350&hash=B788068F09F0E38D1D19756934E293E4C1379BBF",
-    restaurantId: "3314",
-  } satisfies Event) as Event[];
+  useEffect(() => {
+    if (eventsQuery?.data) {
+      setEvents(eventsQuery.data);
+    }
+  }, [eventsQuery?.data]);
 
-  // if (!data) {
-  //   return <Text>Loading...</Text>;
-  // }
+  if (eventsQuery?.isLoading) {
+    return <Text>Loading...</Text>;
+  }
 
-  // if (error) {
-  //   return <Text>Error: {error.message}</Text>;
-  // }
+  if (eventsQuery?.isError) {
+    return <Text>Error: {eventsQuery.error.message}</Text>;
+  }
   return (
     <RestaurantTabs>
       <ScrollView
@@ -39,51 +53,53 @@ export default function Events() {
           bottom: 200,
         }}
       >
-        {testData.map((event: Event, index: number) => (
-          <Link
-            key={index}
-            href={{
-              pathname: "/events/event/[id]",
-              params: { id: 2 },
-            }}
-            asChild
-          >
-            <YStack
-              borderWidth={1.5}
-              borderRadius="$8"
-              borderColor="$borderColor"
-              width="90%"
-              padding="$4"
-              marginVertical="$4"
-              justifyContent="center"
-              alignItems="center"
-              alignContent="center"
-              alignSelf="center"
-              elevation={10}
+        {events.map((event: Event, index: number) => (
+          <EventContext.Provider value={event}>
+            <Link
+              key={index}
+              href={{
+                pathname: "/events/event/[id]",
+                params: { id: index },
+              }}
+              asChild
             >
               <YStack
+                borderWidth={1.5}
+                borderRadius="$8"
+                borderColor="$borderColor"
+                width="90%"
+                padding="$4"
+                marginVertical="$4"
                 justifyContent="center"
-                width="100%"
-                backgroundColor="$borderColor"
-                borderRadius="$6"
+                alignItems="center"
+                alignContent="center"
+                alignSelf="center"
+                elevation={10}
               >
-                <Image
-                  resizeMode="contain"
-                  source={{
-                    uri: event.image ?? "https://via.placeholder.com/150",
-                  }}
-                  minWidth={100}
-                  maxWidth="100%"
-                  height={175}
-                />
+                <YStack
+                  justifyContent="center"
+                  width="100%"
+                  backgroundColor="$borderColor"
+                  borderRadius="$6"
+                >
+                  <Image
+                    resizeMode="contain"
+                    source={{
+                      uri: event.image ?? "https://via.placeholder.com/150",
+                    }}
+                    minWidth={100}
+                    maxWidth="100%"
+                    height={175}
+                  />
+                </YStack>
+                <H3>{event.title}</H3>
+                <Text color="gray">
+                  {format(event.start.toString(), "LLL do p")} -{" "}
+                  {format(event.end.toString(), "LLL do p")}
+                </Text>
               </YStack>
-              <H3>{event.title}</H3>
-              <Text color="gray">
-                {format(event.start.toString(), "LLL do p")} -{" "}
-                {format(event.end.toString(), "LLL do p")}
-              </Text>
-            </YStack>
-          </Link>
+            </Link>
+          </EventContext.Provider>
         ))}
       </ScrollView>
     </RestaurantTabs>
diff --git a/packages/api/src/services/getWeekInfo.ts b/packages/api/src/services/getWeekInfo.ts
index a620f6cf..ecfd0209 100644
--- a/packages/api/src/services/getWeekInfo.ts
+++ b/packages/api/src/services/getWeekInfo.ts
@@ -4,6 +4,7 @@ import { z } from "zod";
 import type { Drizzle } from "@zotmeal/db";
 import { RestaurantSchema } from "@zotmeal/db";
 import { DateRegex } from "@zotmeal/validators";
+import { scrapeCampusDishEvents } from "../events";
 
 import type { UpdateDailyParams } from "./updateDaily";
 import { logger } from "../../logger";
@@ -24,6 +25,10 @@ export async function getWeekInfo(
   const { date: dateString, restaurant } = params;
   const startDate = new Date(dateString);
 
+  // Scrape and insert new events into db
+  const eventResults = await scrapeCampusDishEvents(db)
+
+  // Update menus for each day
   const results = await Promise.allSettled(
     Array.from({ length: NUM_DAYS_UPDATE }).map((_, i) => {
       const insertDate = new Date();