diff --git a/src/App.css b/src/App.css
index aa6edcfc..d67e6d36 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,10 +1,10 @@
 .App {
   width: 100vw;
-  height: 100vh;
+  height: 100dvh;
 }
 
 #app-content  {
-  height: calc(100vh - 64px);
+  height: calc(100dvh - 64px);
 }
 
 .Toastify__toast-container--top-right {
diff --git a/src/pages/MapContainer.tsx b/src/pages/MapContainer.tsx
index ee30470d..1421376c 100644
--- a/src/pages/MapContainer.tsx
+++ b/src/pages/MapContainer.tsx
@@ -11,7 +11,7 @@ function MapContainer() {
   
   return (
       
-      <UtopiaMap zoom={5} height='calc(100vh - 64px)' width="100%">
+      <UtopiaMap zoom={5} height='calc(100dvh - 64px)' width="100%">
         <Layer
           name='events'
           menuIcon='CalendarIcon'