diff --git a/components/Shell.tsx b/components/Shell.tsx
index 1fe932e4..79cd18fe 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -146,7 +146,9 @@ 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 className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
+              <nav
+                style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+                className="md:hidden flex fixed bottom-0 bg-white w-full rounded-lg shadow">
                 {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                 {navigation.flatMap((item, itemIdx) =>
                   item.name === "Settings" ? (