diff --git a/components/Shell.tsx b/components/Shell.tsx
index 79cd18fe3b..480195e559 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -146,9 +146,7 @@ export default function Shell(props) {
               <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
 
               {/* show bottom navigation for md and smaller (tablet and phones) */}
-              <nav
-                style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
-                className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
+              <nav className="bottom-nav md:hidden flex fixed bottom-0 bg-white w-full shadow">
                 {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                 {navigation.flatMap((item, itemIdx) =>
                   item.name === "Settings" ? (
diff --git a/styles/globals.css b/styles/globals.css
index 59a997fcb6..008d057b7a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,6 +81,12 @@
     }
 }
 
+@media all and (display-mode: standalone) {
+  .bottom-nav {
+    padding-bottom: 24px;
+  }
+}
+
 .react-multi-email > [type='text'] {
     --tw-ring-shadow: 0 0 0 0 0;
 }