diff --git a/src/components/Content/content.scss b/src/components/Content/content.scss
index 7857cee4e1020981c3087c8830f3880d0c21b639..82f9454a4128b5cc409a72711e773b686209d953 100644
--- a/src/components/Content/content.scss
+++ b/src/components/Content/content.scss
@@ -2,6 +2,8 @@
 @import 'src/styles/base/color';
 
 .content-view {
+  position: relative;
+  height: 100%;
   margin-top: 116px;
   background-color: $default-background;
   @media #{$large-phone} {
diff --git a/src/components/ProfileType/profileTypeNavigation.scss b/src/components/ProfileType/profileTypeNavigation.scss
index c30ad0f86caf91227c6c801ddce01e2d43f6fcae..bbf073147f8758ba9757a64bcd4775e067123709 100644
--- a/src/components/ProfileType/profileTypeNavigation.scss
+++ b/src/components/ProfileType/profileTypeNavigation.scss
@@ -5,15 +5,17 @@
   border-top: 1px solid $grey-dark;
   background: $dark-2;
   position: fixed;
-  bottom: 3.5rem;
+  bottom: 0;
+  height: 6.5rem;
   width: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
+  padding: 0 0 env(safe-area-inset-bottom) 0;
   @media (min-width: $width-tablet) {
     background: none;
     position: absolute;
-    bottom: 0;
+    height: 3rem;
   }
   .rounded {
     border-radius: 22px;
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index f49d6d996e6a7b833b3558ab8561bfe6021866f2..2723a89e3945cc5f2635e16e5a98ec3422ca0d39 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -1,4 +1,5 @@
 .profile-type-container {
+  position: relative;
   height: 100%;
   min-height: inherit;
   display: flex;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b7006ea1542a43d3c0ffe25b5cbd37100b0ddfb7..012d283140428fd1ad391c5f2e709ee1597cb7fa 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -52,6 +52,12 @@
   --waterColorRadialGradient: #{$water-color-radial-gradient};
 }
 
+html {
+  // min-height: calc(100% + env(safe-area-inset-top));
+  // padding: env(safe-area-inset-top) env(safe-area-inset-right)
+  //   env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
 .application {
   @media #{$large-phone} {
     min-height: 100vh;
diff --git a/src/targets/browser/index.ejs b/src/targets/browser/index.ejs
index a7ca033c5a3c099b2218ede57a214a47fc2772d5..41ed7c3d069e0d45ec567d624d886ecdb79c1b90 100644
--- a/src/targets/browser/index.ejs
+++ b/src/targets/browser/index.ejs
@@ -8,7 +8,7 @@
     <!-- PWA Manifest -->
     <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2">
-    <meta name="theme-color" content="#ffffff">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, viewport-fit=cover">
     <!-- PWA Chrome -->
     <link rel="icon" sizes="192x192" href="/android-chrome-192x192.png">
     <link rel="icon" sizes="512x512" href="/android-chrome-512x512.png">
@@ -17,8 +17,8 @@
     <link rel="apple-touch-startup-image" href="/apple-touch-icon.png">
     <meta name="apple-mobile-web-app-title" content="Ecolyo">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, viewport-fit=cover">
     <% _.forEach(htmlWebpackPlugin.files.css, function(file) { %>
         <link rel="stylesheet" href="<%- file %>">
     <% }); %>