diff --git a/app/routes/events-team.tsx b/app/routes/events-team.tsx
index 8045abe..bc9bb88 100644
--- a/app/routes/events-team.tsx
+++ b/app/routes/events-team.tsx
@@ -23,7 +23,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
-import { type ReactNode, useState } from "react";
+import { useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   if (!context.data.current_user)
@@ -83,7 +83,6 @@ export default function () {
     members: { id: string; name: string }[];
   } = useLoaderData<typeof loader>();
   const [eventData, setEventData] = useState(events);
-  const eventCards: ReactNode[] = [];
   const { isOpen, onClose, onOpen } = useDisclosure();
   const toast = useToast();
   const [selectedEvent, setSelectedEvent] = useState("");
@@ -176,95 +175,6 @@ export default function () {
     setEventData(newEventData);
   }
 
-  for (const event of eventData) {
-    const eventCreatorName = members.find(
-      (member) => member.id === event.created_by,
-    )?.name;
-
-    eventCards.push(
-      <Card w="100%">
-        <CardBody>
-          <Stack divider={<StackDivider />} spacing="4">
-            <Box>
-              <Heading size="sm">Date</Heading>
-              <Text fontSize="sm" pt="2">
-                {event.year}-{event.month}-{event.day}
-              </Text>
-            </Box>
-            <Box>
-              <Heading size="sm">Event Type</Heading>
-              <Text fontSize="sm" pt="2">
-                {event.type.toUpperCase()}
-              </Text>
-            </Box>
-            <Box>
-              <Heading size="sm">Event Details</Heading>
-              <Text fontSize="sm" pt="2">
-                {event.details}
-              </Text>
-            </Box>
-            {event.type === "rotw" ? (
-              <Box>
-                <Heading size="sm">Riddle Answer</Heading>
-                <Text fontSize="sm" pt="2">
-                  {event.answer}
-                </Text>
-              </Box>
-            ) : null}
-            <Box>
-              <Heading size="sm">Host</Heading>
-              <Text fontSize="sm" pt="2">
-                {eventCreatorName
-                  ? `${eventCreatorName} (${event.created_by})`
-                  : event.created_by}
-              </Text>
-            </Box>
-          </Stack>
-        </CardBody>
-        <CardFooter>
-          <Flex gap="8px" mr="8px">
-            {can_approve && event.pending ? (
-              <>
-                <Button
-                  colorScheme="red"
-                  onClick={async () => await decide(false, event.id)}
-                >
-                  Reject
-                </Button>
-                <Button
-                  colorScheme="blue"
-                  onClick={async () => await decide(true, event.id)}
-                >
-                  Approve
-                </Button>
-              </>
-            ) : null}
-            {can_approve &&
-            event.approved &&
-            event.type === "gamenight" &&
-            !event.reached_minimum_player_count ? (
-              <>
-                <Button
-                  colorScheme="blue"
-                  onClick={() => {
-                    setSelectedEvent(event.id);
-                    onOpen();
-                  }}
-                >
-                  Certify Game Night
-                </Button>
-              </>
-            ) : null}
-          </Flex>
-          <Text alignSelf="center" fontSize="sm">
-            Status:{" "}
-            {event.pending ? "Pending" : event.approved ? "Approved" : "Denied"}
-          </Text>
-        </CardFooter>
-      </Card>,
-    );
-  }
-
   return (
     <Container maxW="container.lg">
       <Modal isOpen={isOpen} onClose={onClose}>
@@ -295,7 +205,100 @@ export default function () {
           </ModalFooter>
         </ModalContent>
       </Modal>
-      <VStack spacing="8">{eventCards}</VStack>
+      <VStack spacing="8">
+        {eventData.map((event) => {
+          const eventCreatorName = members.find(
+            (member) => member.id === event.created_by,
+          )?.name;
+
+          return (
+            <Card w="100%">
+              <CardBody>
+                <Stack divider={<StackDivider />} spacing="4">
+                  <Box>
+                    <Heading size="sm">Date</Heading>
+                    <Text fontSize="sm" pt="2">
+                      {event.year}-{event.month}-{event.day}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Heading size="sm">Event Type</Heading>
+                    <Text fontSize="sm" pt="2">
+                      {event.type.toUpperCase()}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Heading size="sm">Event Details</Heading>
+                    <Text fontSize="sm" pt="2">
+                      {event.details}
+                    </Text>
+                  </Box>
+                  {event.type === "rotw" ? (
+                    <Box>
+                      <Heading size="sm">Riddle Answer</Heading>
+                      <Text fontSize="sm" pt="2">
+                        {event.answer}
+                      </Text>
+                    </Box>
+                  ) : null}
+                  <Box>
+                    <Heading size="sm">Host</Heading>
+                    <Text fontSize="sm" pt="2">
+                      {eventCreatorName
+                        ? `${eventCreatorName} (${event.created_by})`
+                        : event.created_by}
+                    </Text>
+                  </Box>
+                </Stack>
+              </CardBody>
+              <CardFooter>
+                <Flex gap="8px" mr="8px">
+                  {can_approve && event.pending ? (
+                    <>
+                      <Button
+                        colorScheme="red"
+                        onClick={async () => await decide(false, event.id)}
+                      >
+                        Reject
+                      </Button>
+                      <Button
+                        colorScheme="blue"
+                        onClick={async () => await decide(true, event.id)}
+                      >
+                        Approve
+                      </Button>
+                    </>
+                  ) : null}
+                  {can_approve &&
+                  event.approved &&
+                  event.type === "gamenight" &&
+                  !event.reached_minimum_player_count ? (
+                    <>
+                      <Button
+                        colorScheme="blue"
+                        onClick={() => {
+                          setSelectedEvent(event.id);
+                          onOpen();
+                        }}
+                      >
+                        Certify Game Night
+                      </Button>
+                    </>
+                  ) : null}
+                </Flex>
+                <Text alignSelf="center" fontSize="sm">
+                  Status:{" "}
+                  {event.pending
+                    ? "Pending"
+                    : event.approved
+                      ? "Approved"
+                      : "Denied"}
+                </Text>
+              </CardFooter>
+            </Card>
+          );
+        })}
+      </VStack>
       <VStack alignItems="start" gap="8px" my="16px">
         <Link color="#646cff" href="/book-event" mt="16px">
           Book an Event