diff --git a/frontend/app.vue b/frontend/app.vue
index c8d1d88..919fc2d 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -44,11 +44,10 @@ onMounted(async () => {
 
 <style>
 .body {
-  padding-top: 10px;
   margin-bottom: env(safe-area-inset-bottom);
 }
 
 .toastios {
-  padding-top: 20px;
+  padding-top: env(safe-area-inset-top);
 }
 </style>
diff --git a/frontend/components/Login.vue b/frontend/components/Login.vue
index f81ba84..26326e6 100644
--- a/frontend/components/Login.vue
+++ b/frontend/components/Login.vue
@@ -1,6 +1,6 @@
 <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>
+  <div class="flex flex-col justify-center h-screen items-center px-2 pb-20">
+    <h1 class="font-bold text-3xl text-center mb-20">Reddingsbrigade Waddinxveen</h1>
     <div class="max-w-sm w-full">
       <form v-if="!creatingAccount" @submit.prevent="submitLoginForm" class="flex flex-col">
         <label class="font-bold">Email</label>
diff --git a/frontend/components/layout/Topbar.vue b/frontend/components/layout/Topbar.vue
index 57a9525..577ba37 100644
--- a/frontend/components/layout/Topbar.vue
+++ b/frontend/components/layout/Topbar.vue
@@ -14,7 +14,7 @@ const router = useRouter()
 
 <style>
 .topbar {
-  padding-top: calc(env(safe-area-inset-bottom) + 20px);
+  padding-top: calc(env(safe-area-inset-top) + 20px);
   padding-bottom: 20px;
 }
 </style>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index dd1012e..f931525 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -18,7 +18,6 @@
                 <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
             </NuxtLink>
         </div>
-        
     </div>
 </template>