diff --git a/frontend/src/pages/MapPage/index.tsx b/frontend/src/pages/MapPage/index.tsx
index 41691ec..07f510d 100644
--- a/frontend/src/pages/MapPage/index.tsx
+++ b/frontend/src/pages/MapPage/index.tsx
@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { Button } from "semantic-ui-react";
 import { Layer, Source } from "react-map-gl";
 import produce from "immer";
+import classNames from "classnames";
 
 import type { Location } from "types";
 import { Page, Map } from "components";
@@ -110,7 +111,7 @@ const getEventsTextLayer = () => ({
 });
 
 function MapPage({ login }) {
-  const { obsMapSource } = useConfig() || {};
+  const { obsMapSource, banner } = useConfig() || {};
   const [clickLocation, setClickLocation] = useState<Location | null>(null);
 
   const mapConfig = useMapConfig();
@@ -198,7 +199,12 @@ function MapPage({ login }) {
 
   return (
     <Page fullScreen title="Map">
-      <div className={styles.mapContainer}>
+      <div
+        className={classNames(
+          styles.mapContainer,
+          banner ? styles.hasBanner : null
+        )}
+      >
         {layerSidebar && (
           <div className={styles.mapSidebar}>
             <LayerSidebar />
diff --git a/frontend/src/pages/MapPage/styles.module.less b/frontend/src/pages/MapPage/styles.module.less
index 9a2bdd8..8962f4a 100644
--- a/frontend/src/pages/MapPage/styles.module.less
+++ b/frontend/src/pages/MapPage/styles.module.less
@@ -6,6 +6,10 @@
   position: relative;
   display: flex;
   align-items: stretch;
+
+  &.hasBanner {
+    height: calc(100vh - @menuHeight - 50px);
+  }
 }
 
 .mapSidebar {