diff --git a/src/App.tsx b/src/App.tsx
index 845d542..b81d530 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,10 +6,85 @@ import 'App.css';
 const App = () => {
   const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
 
+  // TODO: How will this be structured?
+  // date and time field NOT FINAL => need to account for timezones (unless it's worked out in the backend)
+  const testEvents = [
+    {
+      id: 0,
+      name: 'General Meeting',
+      date: '2025-01-14',
+      time: '6:00-7:30pm',
+      location: 'MOR 220',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Club Meeting',
+    },
+    {
+      id: 1,
+      name: 'General Meeting',
+      date: '2025-01-21',
+      time: '6:00-7:30pm',
+      location: 'MOR 220',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Club Meeting',
+    },
+    {
+      id: 2,
+      name: 'Another Event',
+      date: '2025-01-14',
+      time: '8:00-9:30am',
+      location: 'Somewhere',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Some type',
+    },
+    {
+      id: 3,
+      name: 'Event but with a Long Name',
+      date: '2025-01-17',
+      time: '1:00-2:30pm',
+      location: 'The Quad',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Another type',
+    },
+    {
+      id: 4,
+      name: 'Some other event',
+      date: '2025-01-23',
+      time: '6:30-8:00pm',
+      location: 'Somehwhere',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Type',
+    },
+    {
+      id: 5,
+      name: 'UW v Purdue',
+      date: '2025-01-15',
+      time: '6:30pm',
+      location: 'Hec Edmundson Pavilion',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'Sports Match',
+    },
+    {
+      id: 6,
+      name: 'UW event',
+      date: '2025-01-23',
+      time: '4:30-5:00pm',
+      location: 'Red Square',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
+      type: 'UW Event',
+    },
+  ];
+
   return (
     <div className="app">
       {selectedEvent && <EventDetails selectedEvent={selectedEvent} />}
-      <Calendar setSelectedEvent={setSelectedEvent} />
+      <Calendar setSelectedEvent={setSelectedEvent} events={testEvents} />
     </div>
   );
 };
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index 5aba222..711f685 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -6,6 +6,7 @@ import { Event } from 'types/Event';
 
 interface CalendarProps {
   setSelectedEvent: (event: Event) => void;
+  events: Event[];
 }
 
 const Calendar = (props: CalendarProps) => {
@@ -25,36 +26,25 @@ const Calendar = (props: CalendarProps) => {
     'December',
   ];
   const weekDayNames = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
-  // TODO: how is this going to be structured?
-  const events = [
-    {
-      id: 1,
-      name: 'General Meeting',
-      date: '2025-01-14',
-      time: '6:00-7:30pm',
-      location: 'MOR 220',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
-    },
-    {
-      id: 2,
-      name: 'Another Event',
-      date: '2025-01-14',
-      time: '8:00-9:30am',
-      location: 'Somewhere',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
-    },
-    {
-      id: 3,
-      name: 'Event but with a Long Name',
-      date: '2025-01-17',
-      time: '1:00-2:30pm',
-      location: 'The Quad',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec odio nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc nec justo ultricies aliquam. Nullam nec fermentum nunc. Sed nec nunc.',
-    },
+  const colors = [
+    '#d39d9d',
+    '#d3b49d',
+    '#d2d39d',
+    '#9dd3ad',
+    '#9db4d3',
+    '#ad9dd3',
   ];
+  const eventColors: Record<string, string> = {};
+
+  const getColorForEvent = (eventType: string) => {
+    if (!eventColors[eventType]) {
+      eventColors[eventType] =
+        colors[Object.keys(eventColors).length % colors.length];
+    }
+    return eventColors[eventType];
+  };
+
+  const events = props.events;
 
   const getDaysInMonth = (date: Date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -96,7 +86,7 @@ const Calendar = (props: CalendarProps) => {
             <CalendarEvent
               key={event.id}
               name={event.name}
-              color="#ad88e8"
+              color={getColorForEvent(event.type)}
               onClick={() => props.setSelectedEvent(event)}
             />
           ))}
diff --git a/src/components/EventDetails/EventDetails.tsx b/src/components/EventDetails/EventDetails.tsx
index 259b903..80e0274 100644
--- a/src/components/EventDetails/EventDetails.tsx
+++ b/src/components/EventDetails/EventDetails.tsx
@@ -10,6 +10,7 @@ const EventDetails = (props: EventDetailsProps) => {
     <div className="event-details card">
       <h2>{props.selectedEvent.name}</h2>
       <h4>{props.selectedEvent.time}</h4>
+      <p>{props.selectedEvent.type}</p>
       <p>{props.selectedEvent.location}</p>
       <p>{props.selectedEvent.description}</p>
     </div>
diff --git a/src/types/Event.ts b/src/types/Event.ts
index c6ef011..d096d84 100644
--- a/src/types/Event.ts
+++ b/src/types/Event.ts
@@ -1,6 +1,7 @@
 export type Event = {
   id: number;
   name: string;
+  type: string;
   date: string;
   time: string;
   location: string;