diff --git a/index.html b/index.html
index 0b61652f4..494d87044 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, viewport-fit=cover" />
     <link rel="stylesheet" href="./src/styles.css" />
     <title>noStrudel</title>
     <meta name="description" content="A simple nostr web client focused on exploring nostr" />
diff --git a/src/components/layout/mobile-bottom-nav.tsx b/src/components/layout/mobile-bottom-nav.tsx
index 7fe54224e..3f3814e20 100644
--- a/src/components/layout/mobile-bottom-nav.tsx
+++ b/src/components/layout/mobile-bottom-nav.tsx
@@ -20,7 +20,7 @@ export default function MobileBottomNav(props: Omit<FlexProps, "children">) {
 
   return (
     <>
-      <Flex {...props} gap="2" padding="2" alignItems="center">
+      <Flex {...props} gap="2" p="2" alignItems="center" pb="calc(var(--chakra-space-2) + env(safe-area-inset-bottom))">
         {account ? (
           <UserAvatar pubkey={account.pubkey} size="sm" onClick={onOpen} noProxy />
         ) : (
