diff --git a/frontend/app.vue b/frontend/app.vue
index 6f9e090..ef584ea 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -30,6 +30,7 @@ const userLoaded = ref(false)
 const userData = ref(null)
 const userPersons = ref([])
 const userAllPersons = ref([])
+const calEvents = ref([])
 
 onMounted(() => {
     auth.value = getAuth()
@@ -75,5 +76,5 @@ const getPersons = async (persons) => {
 
 const ledenlijst = ref([])
 
-provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons })
+provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents })
 </script>
\ No newline at end of file
diff --git a/frontend/components/layout/Navbar.vue b/frontend/components/layout/Navbar.vue
index 2d50c64..fe5912e 100644
--- a/frontend/components/layout/Navbar.vue
+++ b/frontend/components/layout/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="route.meta.key !== 'disable'" class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
-        <div class="flex justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900">
+        <div class="flex justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900 overflow-x-hidden">
             <NuxtLink to="/" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/' ? 'text-primary' : ''">
                 <Icon size="1.5em" name="ion:home-outline" />
                 <span>Home</span>
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index e1fe85f..77d5008 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -19,12 +19,10 @@ definePageMeta({
     title: 'Calendar'
 })
 
-const { userPersons } = inject('firebase')
-
-const calEvents = ref([])
+const { userPersons, calEvents } = inject('firebase')
 
 onMounted(() => {
-    getCalendarEvents([...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))])
+    if (!calEvents[0]) getCalendarEvents([...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))])
 })
 
 const longEventDate = (eventDate) => {
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 562a700..b8efd55 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,7 +1,24 @@
 <template>
-    <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 class="flex flex-col justify-center items-center px-2 overflow-hidden">
+        <h1 class="font-bold text-3xl text-center mt-6 mb-3">Reddingsbrigade Waddinxveen</h1>
+        <h2 class="text-xl text-center mb-12">{{ userPersons.map(a => a.fullName).join(', ')}}</h2>
+        <div class="container w-full max-w-md">
+            <NuxtLink to="/news" class="rounded-t item-hover py-2 flex items-center">
+                <span>Nieuws</span>
+                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+            </NuxtLink>
+            <div class="divider" />
+            <NuxtLink to="/calendar" class="item-hover py-2 flex items-center">
+                <span>Calendar</span>
+                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+            </NuxtLink>
+            <div class="divider" />
+            <NuxtLink to="/settings" class="rounded-b item-hover py-2 flex items-center">
+                <span>Settings</span>
+                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+            </NuxtLink>
+        </div>
+        
     </div>
 </template>
 
@@ -10,5 +27,5 @@ definePageMeta({
     title: 'Home',
 })
 
-const { userData } = inject('firebase')
+const { userPersons } = inject('firebase')
 </script>