diff --git a/index.html b/index.html
index f5e74b12..ea64cda3 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
     <link rel="icon" href="/favicon.ico">
     <title>TimeSafari</title>
   </head>
diff --git a/src/App.vue b/src/App.vue
index e1103637..5bd5900b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
   <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
-      class="fixed top-4 right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
+      class="fixed top-[calc(env(safe-area-inset-top)+1rem)] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
     >
       <Notification
         v-slot="{ notifications, close }"
@@ -144,10 +144,10 @@
   <!--
     This "group" of "modal" is the prompt for an answer.
     Set "type" as follows: "confirm" for yes/no, and "notification" ones:
-     "-permission", "-mute", "-off"
+      "-permission", "-mute", "-off"
   -->
   <NotificationGroup group="modal">
-    <div class="fixed z-[100] top-0 inset-x-0 w-full">
+    <div class="fixed z-[100] top-[env(safe-area-inset-top)] inset-x-0 w-full">
       <Notification
         v-slot="{ notifications, close }"
         enter="transform ease-out duration-300 transition"
@@ -167,10 +167,10 @@
           role="alert"
         >
           <!--
-           Type of "confirm" will post a message.
-           With onYes function, show a "Yes" button to call that function.
-           With onNo function, show a "No" button to call that function,
-             and pass it state of "askAgain" field shown if you set promptToStopAsking.
+            Type of "confirm" will post a message.
+            With onYes function, show a "Yes" button to call that function.
+            With onNo function, show a "No" button to call that function,
+              and pass it state of "askAgain" field shown if you set promptToStopAsking.
           -->
           <div
             v-if="notification.type === 'confirm'"
@@ -539,4 +539,15 @@ export default class App extends Vue {
 }
 </script>
 
-<style></style>
+<style>
+#Content {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: calc(env(safe-area-inset-top) + 1.5rem);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
+}
+
+#QuickNav ~ #Content {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
+}
+</style>
diff --git a/src/components/QuickNav.vue b/src/components/QuickNav.vue
index 86b1c9d6..64a0bef3 100644
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]">
     <ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
       <!-- Home Feed -->
       <li
diff --git a/src/components/TopMessage.vue b/src/components/TopMessage.vue
index 01f623d2..fa5c7e8f 100644
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-5 top-3">
+  <div class="absolute right-5 top-[calc(env(safe-area-inset-top)+0.75rem)]">
     <span class="align-center text-red-500 mr-2">{{ message }}</span>
     <span class="ml-2">
       <router-link
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 18a4b075..cb5733e6 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -78,7 +78,7 @@
       If you don't that first, these contacts won't see your activity.
     </div>
 
-    <div class="text-center my-6">
+    <div class="text-center mt-6">
       <div
         v-if="isScanning && !isNativePlatform"
         class="relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[40vh] mx-auto"
