diff --git a/frontend/app.vue b/frontend/app.vue
index e87a32b..822f324 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,6 +1,9 @@
 <template>
-    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
-        Loading
+    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
+        <div>
+          <Icon size="4em" name="ion:load-c" class="animate-spin" />
+          <h2 class="mt-2 font-bold">Loading...</h2>
+        </div>
     </div>
     <div v-else>
         <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 77d5008..2ae9901 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -8,8 +8,9 @@
                 </div>
             </div>
         </div>
-        <div v-else>
-            Loading...
+        <div class="w-full flex flex-col justify-center items-center" v-else>
+            <Icon size="2em" name="ion:load-c" class="animate-spin" />
+            <h2 class="mt-2 font-bold">Loading...</h2>
         </div>
     </div>
 </template>
diff --git a/frontend/pages/news/index.vue b/frontend/pages/news/index.vue
index 82ad253..4ec1151 100644
--- a/frontend/pages/news/index.vue
+++ b/frontend/pages/news/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
-        <div class="flex flex-col gap-3">
+        <div v-if="news && news[0]" 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>
@@ -13,6 +13,10 @@
                 </div>
             </div>
         </div>
+        <div class="w-full flex flex-col justify-center items-center" v-else>
+            <Icon size="2em" name="ion:load-c" class="animate-spin" />
+            <h2 class="mt-2 font-bold">Loading...</h2>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/pages/settings/config/managerelatiecodes.vue b/frontend/pages/settings/config/managerelatiecodes.vue
index d7e3feb..6d3b2a8 100644
--- a/frontend/pages/settings/config/managerelatiecodes.vue
+++ b/frontend/pages/settings/config/managerelatiecodes.vue
@@ -12,6 +12,10 @@
                 <span @click="router.back()" class="hover:underline font-bold w-full text-center sm:w-max sm:ml-auto hover:cursor-pointer">Cancel</span>
             </div>
         </div>
+        <div class="w-full flex flex-col justify-center items-center" v-else>
+            <Icon size="2em" name="ion:load-c" class="animate-spin" />
+            <h2 class="mt-2 font-bold">Loading...</h2>
+        </div>
     </div>
 </template>