diff --git a/.gitignore b/.gitignore
index d26c746..fb699e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-dist/
\ No newline at end of file
+dist/
+dev-dist/
\ No newline at end of file
diff --git a/index.html b/index.html
index 6d30de8..2712433 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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">
     <title>Tutu</title>
+    <link rel="stylesheet" href="/src/App.css" />
     <script src="/src/index.tsx" type="module"></script>
   </head>
   <body>
diff --git a/src/App.css b/src/App.css
index 26dd292..bba585f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,10 @@
 :root {
+  --safe-area-inset-top: env(safe-area-inset-top);
+  --safe-area-inset-left: env(safe-area-inset-left);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom);
+  --safe-area-inset-right: env(safe-area-inset-right);
   background-color: var(--tutu-color-surface, transparent);
+  overscroll-behavior-block: contain;
 }
 
 .custom-emoji {
diff --git a/src/App.tsx b/src/App.tsx
index 8a711e1..55e9971 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,6 @@ import {
   createMastoClientFor,
   type Session,
 } from "./masto/clients.js";
-import "./App.css";
 import { $accounts } from "./accounts/stores.js";
 import { useStore } from "@nanostores/solid";
 
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 40bbffd..36a4026 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -42,7 +42,7 @@ const Settings: ParentComponent = () => {
     }
 
     .setting-list {
-      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
+      padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 16px);
     }
   `;
   return (
diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx
index 8d14d76..c70cf39 100644
--- a/src/timelines/Home.tsx
+++ b/src/timelines/Home.tsx
@@ -122,7 +122,7 @@ const TimelinePanel: Component<{
         <div
           style={{
             display: "flex",
-            padding: "20px 0",
+            padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
             "align-items": "center",
             "justify-content": "center",
           }}
@@ -136,7 +136,7 @@ const TimelinePanel: Component<{
         <div
           style={{
             display: "flex",
-            padding: "20px 0",
+            padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
             "align-items": "center",
             "justify-content": "center",
           }}
@@ -239,8 +239,6 @@ const Home: ParentComponent = (props) => {
       max-width: 560px;
       height: 100%;
       padding: 40px 16px;
-      max-height: calc(100vh - var(--scaffold-topbar-height, 0px));
-      max-height: calc(100dvh - var(--scaffold-topbar-height, 0px));
       scroll-snap-align: center;
 
       @media (max-width: 600px) {
@@ -257,6 +255,8 @@ const Home: ParentComponent = (props) => {
       scroll-snap-stop: always;
       height: calc(100vh - var(--scaffold-topbar-height, 0px));
       height: calc(100dvh - var(--scaffold-topbar-height, 0px));
+      padding-left: var(--safe-area-inset-left, 0);
+      padding-right: var(--safe-area-inset-right, 0);
 
       @media (max-width: 600px) {
         grid-auto-columns: 100%;
@@ -269,7 +269,7 @@ const Home: ParentComponent = (props) => {
       <Scaffold
         topbar={
           <AppBar position="static">
-            <Toolbar variant="dense" class="responsive">
+            <Toolbar variant="dense" class="responsive" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}>
               <Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}>
                 <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
                   Home
