diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 6966785..e1fe85f 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -1,6 +1,16 @@
 <template>
-    <div>
-        Calendar
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
+        <div v-if="calEvents[0]" class="flex flex-col gap-3">
+            <div v-for="(event, index) in calEvents" :key="index">
+                <div class="item container flex flex-col">
+                    <h2 class="">{{ longEventDate(event.date) }}</h2>
+                    <p class="whitespace-pre overflow-x-auto font-bold text-xl">{{ event.description}}</p>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+            Loading...
+        </div>
     </div>
 </template>
 
@@ -8,4 +18,80 @@
 definePageMeta({
     title: 'Calendar'
 })
+
+const { userPersons } = inject('firebase')
+
+const calEvents = ref([])
+
+onMounted(() => {
+    getCalendarEvents([...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))])
+})
+
+const longEventDate = (eventDate) => {
+	const date = new Date(eventDate)
+
+	return date.toLocaleString('nl-NL', {
+        weekday: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        month: 'long',
+        hour: 'numeric',
+        minute: 'numeric'
+    }
+)}
+
+const getCalendarEvents = async (group) => {
+
+    if (!group[0]) return setTimeout(() => { getCalendarEvents([...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))])}, 50)
+
+    const events = []
+    let fridayEvents = []
+    let saturdayEvents = []
+    let matchEvents = []
+
+    if (group.includes('Zaterdag')){
+        let data = await fetch('https://www.googleapis.com/calendar/v3/calendars/c_astg0d0auheip5o4269v1qvv3g@group.calendar.google.com/events?key=AIzaSyBLmxWNEnbkiW_0c2UrsHMbxXv73dX-KYw')
+        if (!data.ok){
+            throw Error('No data available')
+        }
+
+        const jsonEvents = await data.json()
+        saturdayEvents = jsonEvents.items
+    } if (group.includes('Vrijdag')){
+        let data = await fetch('https://www.googleapis.com/calendar/v3/calendars/c_u3895n01jt8qnusm7f6pmqjb0k%40group.calendar.google.com/events?key=AIzaSyBLmxWNEnbkiW_0c2UrsHMbxXv73dX-KYw')
+        if (!data.ok){
+            throw Error('No data available')
+        }
+
+        const jsonEvents = await data.json()
+        fridayEvents = jsonEvents.items
+    } if (group.includes('Wedstrijd')){
+
+        let data = await fetch('https://www.googleapis.com/calendar/v3/calendars/c_c2296iboq07n24galuobeesovs@group.calendar.google.com/events?key=AIzaSyBLmxWNEnbkiW_0c2UrsHMbxXv73dX-KYw')
+        if (!data.ok){
+            throw Error('No data available')
+        }
+
+        const jsonEvents = await data.json()
+        matchEvents = jsonEvents.items
+    }
+        
+    const allEvents = [...fridayEvents, ...saturdayEvents, ...matchEvents]
+
+    const now = new Date()
+    now.setHours(0, 0, 0, 0)
+
+    const sortedEvents = allEvents.sort((a, b) => new Date(a.start.dateTime) - new Date(b.start.dateTime))
+    const filteredEvents = sortedEvents.filter((event) => new Date(event.start.dateTime) > now )
+
+    filteredEvents.forEach(element => {
+        events.push({
+            description: element.description,
+            date: new Date(element.start.dateTime)
+        })
+    });
+        
+    calEvents.value = events
+}
+
 </script>
\ No newline at end of file
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index fb51750..562a700 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,6 +1,7 @@
 <template>
-    <div>
-        Home
+    <div class="flex flex-col justify-center items-center px-2">
+        <h1 class="font-bold text-3xl text-center m-10">Reddingsbrigade Waddinxveen</h1>
+        <h2></h2>
     </div>
 </template>
 
@@ -8,4 +9,6 @@
 definePageMeta({
     title: 'Home',
 })
+
+const { userData } = inject('firebase')
 </script>
diff --git a/frontend/pages/settings/config/managerelatiecodes.vue b/frontend/pages/settings/config/managerelatiecodes.vue
index 5df6562..639dd43 100644
--- a/frontend/pages/settings/config/managerelatiecodes.vue
+++ b/frontend/pages/settings/config/managerelatiecodes.vue
@@ -27,7 +27,7 @@ definePageMeta({
 })
 
 const { user, userAllPersons, userPersons, db, getPersons } = inject('firebase')
-const toast = useToast
+const toast = useToast()
 
 const buttonsDisabled = ref(false)
 
@@ -96,7 +96,7 @@ const getAllPersons = () => {
                 .catch(err => {
                     console.log(err)
 
-                    toast.error('Error met het controleren van relatiecode')
+                    toast.error('Error tijdens het ophalen van gegevens')
                 });
 }
 </script>
\ No newline at end of file