diff --git a/frontend/src/App.module.less b/frontend/src/App.module.less
index 5c1d07f..98c5a3b 100644
--- a/frontend/src/App.module.less
+++ b/frontend/src/App.module.less
@@ -120,6 +120,15 @@
   }
 }
 
+@media @mobile {
+  .menu.menu {
+    > :global(.ui.container) {
+      height: @menuHeightMobile;
+      align-items: stretch;
+    }
+  }
+}
+
 .banner {
   padding: 8px;
   z-index: 100;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c3d7cfd..96ad14f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -95,7 +95,7 @@ const App = connect((state) => ({ login: state.login }))(function App({
         <title>OpenBikeSensor Portal</title>
       </Helmet>
       {config?.banner && <Banner {...config.banner} />}
-      <Menu className={styles.menu}>
+      <Menu className={styles.menu} stackable>
         <Container>
           <Link
             to="/"
diff --git a/frontend/src/pages/MapPage/styles.module.less b/frontend/src/pages/MapPage/styles.module.less
index dc3fa13..6d18337 100644
--- a/frontend/src/pages/MapPage/styles.module.less
+++ b/frontend/src/pages/MapPage/styles.module.less
@@ -48,7 +48,10 @@
 @media @mobile {
   .mapContainer {
     height: auto;
-    min-height: calc(100vh - @menuHeight);
+    min-height: calc(100vh - @menuHeightMobile);
+    &.hasBanner {
+      height: calc(100vh - @menuHeightMobile - 50px);
+    }
     flex-direction: column;
   }
 
diff --git a/frontend/src/styles.less b/frontend/src/styles.less
index 33c53cf..1e66c75 100644
--- a/frontend/src/styles.less
+++ b/frontend/src/styles.less
@@ -10,6 +10,7 @@
 @borderColor: #e0e0e0;
 
 @menuHeight: 50px;
+@menuHeightMobile: 220px;
 
 @mobile: ~'screen and (max-width: 767px)';
 @desktop: ~'screen and (min-width: 768px)';