diff --git a/packages/client/index.html b/packages/client/index.html
index 5a93375..3e2430d 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -6,7 +6,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
-    <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" />
     <!-- HTML Meta Tags -->
     <title>Docs.surf</title>
     <meta name="description" content="Aggregator for publications and documents on the open web">
diff --git a/packages/client/src/index.css b/packages/client/src/index.css
index 595d938..7b273e8 100644
--- a/packages/client/src/index.css
+++ b/packages/client/src/index.css
@@ -1,28 +1,32 @@
 body {
-  background: url("./xp.jpg") no-repeat center center fixed;
-  background-size: cover;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  padding: 20px;
-  overflow: hidden;
-  box-sizing: border-box;
+	background: url("./xp.jpg") no-repeat center center fixed;
+	background-size: cover;
+	min-height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
+	padding: 20px;
+	padding-top: max(20px, env(safe-area-inset-top));
+	padding-bottom: max(20px, env(safe-area-inset-bottom));
+	padding-left: max(20px, env(safe-area-inset-left));
+	padding-right: max(20px, env(safe-area-inset-right));
+	overflow: hidden;
+	box-sizing: border-box;
 }
 
 #root {
-  width: 100%;
-  display: flex;
-  justify-content: center;
+	width: 100%;
+	display: flex;
+	justify-content: center;
 }
 
 /* Hide toolbar text labels and secondary icons on mobile */
 @media (max-width: 600px) {
-  .ie-toolbar span {
-    display: none !important;
-  }
-  .ie-toolbar .ie-secondary {
-    display: none !important;
-  }
+	.ie-toolbar span {
+		display: none !important;
+	}
+	.ie-toolbar .ie-secondary {
+		display: none !important;
+	}
 }