diff --git a/frontend/pages/news/index.vue b/frontend/pages/news/index.vue
index 4ec1151..2047619 100644
--- a/frontend/pages/news/index.vue
+++ b/frontend/pages/news/index.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
-        <div v-if="news && news[0]" class="flex flex-col gap-3">
+        <div v-if="loadedNews && news" class="flex flex-col gap-3">
             <NuxtLink to="/news/newmessage" v-if="userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3">
                 Nieuw Bericht
             </NuxtLink>
-            <div v-for="(item, index) in news" :key="index">
+            <div v-if="news[0]" v-for="(item, index) in news" :key="index">
                 <div class="item container flex flex-col relative">
                     <h3 class="text-sm">{{ longEventDate(item.date.toDate()) }}</h3>
                     <h2 class="text-2xl font-bold">{{ item.title }}</h2>
@@ -12,6 +12,9 @@
                     <Icon v-if="userData.sendNews" @click="deleteItem(item, index)" size="1.5em" name="ion:trash-sharp" class="absolute top-3 right-3 hover:cursor-pointer text-red-500" />
                 </div>
             </div>
+            <h2 v-else class="font-bold text-center text-xl mt-3">
+                Er is geen nieuws
+            </h2>
         </div>
         <div class="w-full flex flex-col justify-center items-center" v-else>
             <Icon size="2em" name="ion:load-c" class="animate-spin" />
@@ -32,6 +35,8 @@ const { news, userData, db } = inject('firebase')
 
 const toast = useToast()
 
+const loadedNews = ref(false)
+
 onMounted(() => {
     if (!news.value) getNews()
 })
@@ -61,6 +66,8 @@ const getNews = async () => {
 
         news.value.sort((a, b) => b.date.seconds - a.date.seconds)
 
+        loadedNews.value = true
+
     } catch (e) {
         console.log(e)
     }