diff --git a/components/EventCard.js b/components/EventCard.js
new file mode 100644
index 0000000..b342f49
--- /dev/null
+++ b/components/EventCard.js
@@ -0,0 +1,37 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import Colors from "../constants/colors";
+
+const EventCard = (props) => {
+ return (
+
+
+
+ {props.event._name} ({props.event._date})
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ screen: {
+ flex: 1,
+ alignItem: "center",
+ justifyContent: "center",
+ backgroundColor: Colors.primary500,
+ },
+ eventItem: {
+ margin: 10,
+ padding: 10,
+ borderRadius: 10,
+ borderWidth: 1,
+ borderColor: "white",
+ height: 60,
+ backgroundColor: Colors.primary400,
+ },
+ text: {
+ color: "white",
+ },
+});
+
+export default EventCard;
diff --git a/screens/EventOverviewScreen.js b/screens/EventOverviewScreen.js
new file mode 100644
index 0000000..d96554c
--- /dev/null
+++ b/screens/EventOverviewScreen.js
@@ -0,0 +1,33 @@
+import { ScrollView, StyleSheet, View } from "react-native";
+import { StatusBar } from "expo-status-bar";
+
+import { EVENTS } from "../data/EventData";
+
+import Colors from "../constants/colors";
+import EventCard from "../components/EventCard";
+import FloatingButton from "../components/FloatingButton";
+
+const eventsToDisplay = EVENTS.map((event, index) => {
+ return ;
+});
+
+const EventOverviewScreen = (props) => {
+ return (
+
+ {eventsToDisplay}
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: Colors.primary500,
+ alignItem: "center",
+ justifyContent: "center",
+ },
+});
+
+export default EventOverviewScreen;