diff --git a/src/www/css/app.css b/src/www/css/app.css
index 0827163..152d7b8 100644
--- a/src/www/css/app.css
+++ b/src/www/css/app.css
@@ -63,9 +63,12 @@ html,
 
 body {
   margin: 0;
-  /* 1 */
   line-height: inherit;
-  /* 2 */
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+  box-sizing: border-box;
 }
 
 /*
diff --git a/src/www/index.html b/src/www/index.html
index 4b7dc17..236a8f3 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -10,6 +10,7 @@
   <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 </head>
 <style>
   [v-cloak] {
@@ -614,4 +615,4 @@
   <script src="./js/app.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>