diff --git a/web/index.html b/web/index.html
index 656e83b..f2594c3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
-    <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" />
     <meta name="theme-color" content="#131F24" />
     <meta name="description" content="A Duolingo-style app for learning Tagalog" />
     <title>Ayos</title>
diff --git a/web/src/components/feedback/CorrectBanner.tsx b/web/src/components/feedback/CorrectBanner.tsx
index d1de31a..9dc905f 100644
--- a/web/src/components/feedback/CorrectBanner.tsx
+++ b/web/src/components/feedback/CorrectBanner.tsx
@@ -42,7 +42,8 @@ export function CorrectBanner({ onContinue }: CorrectBannerProps) {
         left: 0,
         right: 0,
         bgcolor: '#4CAF50',
-        py: 2,
+        pt: 2,
+        pb: 'calc(16px + env(safe-area-inset-bottom, 0px))',
         px: 3,
         animation: `${slideUp} 0.3s ease-out`,
         zIndex: 1300,
diff --git a/web/src/components/feedback/IncorrectBanner.tsx b/web/src/components/feedback/IncorrectBanner.tsx
index 801f9b7..d1d110e 100644
--- a/web/src/components/feedback/IncorrectBanner.tsx
+++ b/web/src/components/feedback/IncorrectBanner.tsx
@@ -43,7 +43,8 @@ export function IncorrectBanner({ correctAnswer, onContinue }: IncorrectBannerPr
         left: 0,
         right: 0,
         bgcolor: '#FF4B4B',
-        py: 2,
+        pt: 2,
+        pb: 'calc(16px + env(safe-area-inset-bottom, 0px))',
         px: 3,
         animation: `${slideUp} 0.3s ease-out`,
         zIndex: 1300,