diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx
index b644eb15..14ab9ade 100644
--- a/web/components/BottomBar.tsx
+++ b/web/components/BottomBar.tsx
@@ -36,7 +36,12 @@ function BottomBarCell({
 export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
-    <div className="fixed bottom-0 z-30 flex h-12 w-full flex-row items-center justify-around border-gray-200 border-t bg-white">
+    <div
+      className="fixed bottom-0 z-30 flex h-12 w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
+      style={{
+        paddingBottom: "env(safe-area-inset-bottom)",
+      }}
+    >
       <BottomBarCell
         href="/home"
         iconComponent={