diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index f6ceb29d..01aa0a16 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
         <link rel="icon" type="image/svg+xml" href="/course-mate-icon.svg" />
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+          content="width=device-width, initial-scale=1, viewport-fit=cover"
         />
         <title>CourseMate</title>
       </head>
diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx
index 14ab9ade..e1694695 100644
--- a/web/components/BottomBar.tsx
+++ b/web/components/BottomBar.tsx
@@ -37,8 +37,9 @@ 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"
+      className="fixed bottom-0 z-30 flex w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
       style={{
+        height: "calc(3rem + env(safe-area-inset-bottom))",
         paddingBottom: "env(safe-area-inset-bottom)",
       }}
     >