diff --git a/.expo/README.md b/.expo/README.md
new file mode 100644
index 000000000..fd146b4d3
--- /dev/null
+++ b/.expo/README.md
@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
diff --git a/.expo/settings.json b/.expo/settings.json
new file mode 100644
index 000000000..90d7636a8
--- /dev/null
+++ b/.expo/settings.json
@@ -0,0 +1,9 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "devClient": true,
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}
diff --git a/frontend/sac-mobile/app/(calendar)/_layout.tsx b/frontend/sac-mobile/app/(calendar)/_layout.tsx
index bc5bdbd1c..70c74ab12 100644
--- a/frontend/sac-mobile/app/(calendar)/_layout.tsx
+++ b/frontend/sac-mobile/app/(calendar)/_layout.tsx
@@ -9,6 +9,7 @@ import { Theme } from 'react-native-calendars/src/types';
 
 
 import Agenda from './components/agenda';
+import { getMarkedDates } from './components/mock';
 
 // FIXME FIXME FIXME FIXME: everything needs to be redone/checked spacing-wise. lots of errors
 
@@ -35,7 +36,7 @@ const CalendarView = () => {
                     <HamburgerButton className="w-12 h-12" />
                     <Text className='font-bold text-3xl'>Events</Text>
                 </View>   
-                <ExpandableCalendar theme={calendarTheme}/>
+                <ExpandableCalendar theme={calendarTheme} markedDates={getMarkedDates()}/>
                 <Agenda />
             </CalendarProvider>
         </SafeAreaView>
diff --git a/frontend/sac-mobile/app/(calendar)/components/agenda.tsx b/frontend/sac-mobile/app/(calendar)/components/agenda.tsx
index 3114d2a80..db443f2b3 100644
--- a/frontend/sac-mobile/app/(calendar)/components/agenda.tsx
+++ b/frontend/sac-mobile/app/(calendar)/components/agenda.tsx
@@ -1,111 +1,11 @@
 import React, { useCallback } from 'react';
 import { AgendaList, CalendarProvider } from 'react-native-calendars';
-
+import { getDates, agendaItems } from './mock';
 import AgendaItem from './agendaItem';
+import { StyleSheet } from 'react-native';
 
 const Agenda = () => {
-    const dates = [
-        '2024-04-01',
-        '2024-04-02',
-        '2024-04-03',
-        '2024-04-04',
-        '2024-04-05',
-        '2024-04-06',
-        '2024-04-07',
-        '2024-04-08',
-        '2024-04-09',
-        '2024-04-10',
-        '2024-04-11',
-        '2024-04-12',
-        '2024-04-13',
-        '2024-04-14'
-    ];
-    const agendaItems = [
-        {
-            title: dates[0],
-            data: [{ hour: '12am', duration: '1h', title: 'Club GM' }]
-        },
-        {
-            title: dates[1],
-            data: [
-                { hour: '4pm', duration: '1h', title: 'Intramural game' },
-                { hour: '5pm', duration: '1h', title: 'Generate Team Meeting' },
-                { hour: '5pm', duration: '1h', title: 'Other commitment' }
-            ]
-        },
-        {
-            title: dates[2],
-            data: [
-                { hour: '1pm', duration: '1h', title: 'Dance Crew Rehearsal' },
-                { hour: '2pm', duration: '1h', title: 'Intramural game' },
-                { hour: '3pm', duration: '1h', title: 'Club GM' }
-            ]
-        },
-        {
-            title: dates[3],
-            data: [{ hour: '12am', duration: '1h', title: 'Ashtanga Yoga' }]
-        },
-        {
-            title: dates[4],
-            data: []
-        },
-        {
-            title: dates[5],
-            data: [
-                {
-                    hour: '11pm',
-                    duration: '1h',
-                    title: 'Generate Team Meeting'
-                },
-                { hour: '12pm', duration: '1h', title: 'Running Group' }
-            ]
-        },
-        {
-            title: dates[6],
-            data: [{ hour: '12am', duration: '1h', title: 'Intramural game' }]
-        },
-        {
-            title: dates[7],
-            data: []
-        },
-        {
-            title: dates[8],
-            data: [
-                { hour: '9pm', duration: '1h', title: 'Cheese Club GM' },
-                { hour: '10pm', duration: '1h', title: 'Club GM' },
-                { hour: '11pm', duration: '1h', title: 'Intramural game' },
-                { hour: '12pm', duration: '1h', title: 'Running Group' }
-            ]
-        },
-        {
-            title: dates[9],
-            data: [
-                { hour: '1pm', duration: '1h', title: 'Intramural game' },
-                { hour: '2pm', duration: '1h', title: 'Club GM' },
-                { hour: '3pm', duration: '1h', title: 'Private Yoga' }
-            ]
-        },
-        {
-            title: dates[10],
-            data: [{ hour: '12am', duration: '1h', title: 'Gym Workout' }]
-        },
-        {
-            title: dates[11],
-            data: [
-                { hour: '1pm', duration: '1h', title: 'Intramural game' },
-                { hour: '2pm', duration: '1h', title: 'Club GM' },
-                { hour: '3pm', duration: '1h', title: 'Private Yoga' }
-            ]
-        },
-        {
-            title: dates[12],
-            data: [{ hour: '12am', duration: '1h', title: 'Gym Workout' }]
-        },
-        {
-            title: dates[13],
-            data: [{ hour: '12am', duration: '1h', title: 'Gym Workout' }]
-        }
-    ];
+    const dates = getDates(2024, 4)
 
     const renderItem = useCallback(({ item }: any) => {
         return <AgendaItem item={item} />;
@@ -114,6 +14,7 @@ const Agenda = () => {
     return (
         <AgendaList
             sections={agendaItems}
+
             renderItem={renderItem}
             scrollToNextEvent
             // sectionStyle={styles.section}
diff --git a/frontend/sac-mobile/app/(calendar)/components/agendaItem.tsx b/frontend/sac-mobile/app/(calendar)/components/agendaItem.tsx
index 434146273..da9dd217f 100644
--- a/frontend/sac-mobile/app/(calendar)/components/agendaItem.tsx
+++ b/frontend/sac-mobile/app/(calendar)/components/agendaItem.tsx
@@ -1,83 +1,103 @@
-import React, {useCallback} from 'react';
-import {StyleSheet, Alert, View, Text, TouchableOpacity, Button} from 'react-native';
-
+import React, { useCallback } from 'react';
+import {
+    Alert,
+    Button,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
 
 interface ItemProps {
-  item: any;
+    item: any;
 }
 
 const AgendaItem = (props: ItemProps) => {
-  const {item} = props;
+    const { item } = props;
+
+    const buttonPressed = useCallback(() => {
+        Alert.alert('Show me more');
+    }, []);
 
-  const buttonPressed = useCallback(() => {
-    Alert.alert('Show me more');
-  }, []);
+    const itemPressed = useCallback(() => {
+        Alert.alert(item.title);
+    }, []);
 
-  const itemPressed = useCallback(() => {
-    Alert.alert(item.title);
-  }, []);
+    if (!item) {
+        return (
+            <View style={styles.emptyItem}>
+                <Text style={styles.emptyItemText}>
+                    No Events Planned Today
+                </Text>
+            </View>
+        );
+    }
 
-  if (!item) {
     return (
-      <View style={styles.emptyItem}>
-        <Text style={styles.emptyItemText}>No Events Planned Today</Text>
-      </View>
+        <TouchableOpacity onPress={itemPressed} style={styles.item}>
+            <View>
+                <Text style={styles.itemHourText}>{item.hour}</Text>
+                <Text style={styles.itemDurationText}>{item.duration}</Text>
+            </View>
+            <View>
+              <Text style={styles.itemTitleText}>{item.title}</Text>
+              <Text style={styles.itemText}>{item.location}</Text>
+            </View>
+            <View style={styles.itemButtonContainer}>
+                <Button color={'grey'} title={'Info'} onPress={buttonPressed} />
+            </View>
+        </TouchableOpacity>
     );
-  }
-
-  return (
-    <TouchableOpacity onPress={itemPressed} style={styles.item}>
-      <View>
-        <Text style={styles.itemHourText}>{item.hour}</Text>
-        <Text style={styles.itemDurationText}>{item.duration}</Text>
-      </View>
-      <Text style={styles.itemTitleText}>{item.title}</Text>
-      <View style={styles.itemButtonContainer}>
-        <Button color={'grey'} title={'Info'} onPress={buttonPressed}/>
-      </View>
-    </TouchableOpacity>
-  );
 };
 
 export default React.memo(AgendaItem);
 
-
 const styles = StyleSheet.create({
-  item: {
-    padding: 20,
-    backgroundColor: 'white',
-    borderBottomWidth: 1,
-    borderBottomColor: 'lightgrey',
-    flexDirection: 'row'
-  },
-  itemHourText: {
-    color: 'black'
-  },
-  itemDurationText: {
-    color: 'grey',
-    fontSize: 12,
-    marginTop: 4,
-    marginLeft: 4
-  },
-  itemTitleText: {
-    color: 'black',
-    marginLeft: 16,
-    fontWeight: 'bold',
-    fontSize: 16
-  },
-  itemButtonContainer: {
-    flex: 1,
-    alignItems: 'flex-end'
-  },
-  emptyItem: {
-    paddingLeft: 20,
-    height: 52,
-    justifyContent: 'center',
-    borderBottomWidth: 1,
-    borderBottomColor: 'lightgrey'
+    item: {
+        marginTop: 4,
+        marginBottom: 4,
+        marginLeft: 16,
+        marginRight: 8,
+        padding: 20,
+        backgroundColor: 'white',
+        shadowColor: 'black',
+        shadowOpacity: 0.25,
+        shadowOffset: { width: 0, height: 2 },
+        flexDirection: 'row',
+        borderRadius: 12
+    },
+    itemHourText: {
+        color: 'black'
+    },
+    itemText: {
+      color: 'black',
+      paddingLeft: 16
   },
-  emptyItemText: {
-    color: 'lightgrey',
-    fontSize: 14
-  }
-});
\ No newline at end of file
+    itemDurationText: {
+        color: 'grey',
+        fontSize: 12,
+        marginTop: 4,
+        marginLeft: 'auto'
+    },
+    itemTitleText: {
+        color: 'black',
+        marginLeft: 16,
+        fontWeight: 'bold',
+        fontSize: 16
+    },
+    itemButtonContainer: {
+        flex: 1,
+        alignItems: 'flex-end'
+    },
+    emptyItem: {
+        paddingLeft: 20,
+        height: 52,
+        justifyContent: 'center',
+        borderBottomWidth: 1,
+        borderBottomColor: 'lightgrey'
+    },
+    emptyItemText: {
+        color: 'lightgrey',
+        fontSize: 14
+    }
+});
diff --git a/frontend/sac-mobile/app/(calendar)/components/button.tsx b/frontend/sac-mobile/app/(calendar)/components/button.tsx
index ced099572..79ef79605 100644
--- a/frontend/sac-mobile/app/(calendar)/components/button.tsx
+++ b/frontend/sac-mobile/app/(calendar)/components/button.tsx
@@ -4,9 +4,9 @@ export const HamburgerButton = (p: TouchableOpacityProps) => {
     return (
         <TouchableOpacity {...p}>
             <View className='px-2 py-3 w-full h-full flex flex-col justify-between'>
-                <View className='bg-black w-full h-1'></View>
-                <View className='bg-black w-2/3 h-1'></View>
-                <View className='bg-black w-1/3 h-1'></View>
+                <View className='bg-black w-full h-1 rounded-full'></View>
+                <View className='bg-black w-2/3 h-1 rounded-full'></View>
+                <View className='bg-black w-1/3 h-1 rounded-full'></View>
             </View>
         </TouchableOpacity>
     );
diff --git a/frontend/sac-mobile/app/(calendar)/components/mock.tsx b/frontend/sac-mobile/app/(calendar)/components/mock.tsx
new file mode 100644
index 000000000..9c0298e59
--- /dev/null
+++ b/frontend/sac-mobile/app/(calendar)/components/mock.tsx
@@ -0,0 +1,308 @@
+export type AgendaItem = {
+    title: string;
+    data: Array<{
+        hour: string;
+        duration: string;
+        title: string;
+        description?: string;
+        location?: string;
+    }>;
+};
+
+export type MarkedDates = {
+    [key: string]: { marked?: boolean };
+};
+
+export function getDates(year: number, month: number) {
+    let numDays = 28;
+    if (year % 4 == 0 && month == 2) {
+        numDays = 29;
+    } else if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
+        numDays = 31;
+    } else if ([4, 6, 9, 11].includes(month)) {
+        numDays = 30;
+    }
+    const dates = [];
+    for (let i = 1; i <= numDays; i++) {
+        dates.push(`${year}-${month}-${i}`);
+    }
+    return dates;
+}
+
+export const dates = [
+    '2024-04-01',
+    '2024-04-02',
+    '2024-04-03',
+    '2024-04-04',
+    '2024-04-05',
+    '2024-04-06',
+    '2024-04-07',
+    '2024-04-08',
+    '2024-04-09',
+    '2024-04-10',
+    '2024-04-11',
+    '2024-04-12',
+    '2024-04-13',
+    '2024-04-14',
+    '2024-04-15',
+    '2024-04-16',
+    '2024-04-17',
+    '2024-04-18',
+    '2024-04-19',
+    '2024-04-20',
+    '2024-04-21',
+    '2024-04-22',
+    '2024-04-23',
+    '2024-04-24',
+    '2024-04-25',
+    '2024-04-26',
+    '2024-04-27',
+    '2024-04-28',
+    '2024-04-29',
+    '2024-04-30'
+];
+
+export const agendaItems = [
+    {
+        title: dates[0],
+        data: [
+            {
+                hour: '12am',
+                duration: '1h',
+                title: 'Club GM',
+                location: 'West Village G 102'
+            }
+        ]
+    },
+    {
+        title: dates[1],
+        data: [
+            {
+                hour: '4pm',
+                duration: '1h',
+                title: 'Intramural game',
+                location: 'Marino Center'
+            },
+            {
+                hour: '5pm',
+                duration: '1h',
+                title: 'Generate Team Meeting',
+                location: 'Sherman Center'
+            },
+            {
+                hour: '5pm',
+                duration: '1h',
+                title: 'Other commitment',
+                location: 'Online'
+            }
+        ]
+    },
+    {
+        title: dates[2],
+        data: [
+            {
+                hour: '1pm',
+                duration: '1h',
+                title: 'Dance Crew Rehearsal',
+                location: 'Curry Ballroom'
+            },
+            {
+                hour: '2pm',
+                duration: '1h',
+                title: 'Intramural game',
+                location: 'Carter Field 1'
+            },
+            {
+                hour: '3pm',
+                duration: '1h',
+                title: 'Club GM',
+                location: 'West Village G 102'
+            }
+        ]
+    },
+    {
+        title: dates[3],
+        data: [
+            {
+                hour: '12am',
+                duration: '1h',
+                title: 'Ashtanga Yoga',
+                location: 'Marino Center'
+            }
+        ]
+    },
+    {
+        title: dates[4],
+        data: []
+    },
+    {
+        title: dates[5],
+        data: [
+            {
+                hour: '11pm',
+                duration: '1h',
+                title: 'Generate Team Meeting',
+                location: 'Big Sherm'
+            },
+            {
+                hour: '12pm',
+                duration: '1h',
+                title: 'Running Group',
+                location: 'Marino Center'
+            }
+        ]
+    },
+    {
+        title: dates[6],
+        data: [
+            {
+                hour: '12am',
+                duration: '1h',
+                title: 'Intramural game',
+                location: 'Carter Field 1'
+            }
+        ]
+    },
+    {
+        title: dates[7],
+        data: []
+    },
+    {
+        title: dates[8],
+        data: [
+            {
+                hour: '9pm',
+                duration: '1h',
+                title: 'Cheese Club GM',
+                location: 'Richards 325'
+            },
+            {
+                hour: '10pm',
+                duration: '1h',
+                title: 'Club GM',
+                location: 'Ryder Hall 289'
+            },
+            {
+                hour: '11pm',
+                duration: '1h',
+                title: 'Intramural game',
+                location: 'Carter Field 1'
+            },
+            {
+                hour: '12pm',
+                duration: '1h',
+                title: 'Running Group',
+                location: 'Marino Center'
+            }
+        ]
+    },
+    {
+        title: dates[9],
+        data: [
+            { hour: '1pm', duration: '1h', title: 'Intramural game', location: 'Carter Field 1'},
+            { hour: '2pm', duration: '1h', title: 'Club GM', location: 'West Village G 102'},
+            { hour: '3pm', duration: '1h', title: 'Marino Yoga', location: 'Marino Center'}
+        ]
+    },
+    {
+        title: dates[10],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[11],
+        data: [
+            { hour: '1pm', duration: '1h', title: 'Intramural game', location: 'Carter Field 1'},
+            { hour: '2pm', duration: '1h', title: 'Club GM', location: 'Ryder Hall 289'},
+            { hour: '3pm', duration: '1h', title: 'Marino Yoga', location: 'Marino Center'}
+        ]
+    },
+    {
+        title: dates[12],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[13],
+        data: []
+    },
+    {
+        title: dates[14],
+        data: []
+    },
+    {
+        title: dates[15],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[16],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[17],
+        data: []
+    },
+    {
+        title: dates[18],
+        data: [
+            { hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'},
+            { hour: '1pm', duration: '1h', title: 'Intramural game', location: 'Carter Field 1'},
+            { hour: '2pm', duration: '1h', title: 'Club GM', location: 'West Village G 102'},
+            { hour: '3pm', duration: '1h', title: 'Marino Yoga', location: 'Marino Center'}
+        ]
+    },
+    {
+        title: dates[19],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[20],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[21],
+        data: []
+    },
+    {
+        title: dates[22],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[23],
+        data: []
+    },
+    {
+        title: dates[24],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[25],
+        data: [{ hour: '12am', duration: '1h', title: 'Gym Workout', location: 'Marino Center'}]
+    },
+    {
+        title: dates[26],
+        data: []
+    },
+    {
+        title: dates[27],
+        data: []
+    },
+    {
+        title: dates[28],
+        data: []
+    },
+    {
+        title: dates[29],
+        data: []
+    }
+];
+
+export function getMarkedDates() {
+    const marked: MarkedDates = {};
+
+    agendaItems.forEach((item) => {
+        // NOTE: only mark dates with data
+        if (item.data.length) {
+            marked[item.title] = { marked: true };
+        }
+    });
+    return marked;
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..e8a17ac29
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "sac",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}