diff --git a/src/components/MainView.jsx b/src/components/MainView.jsx
index b2eee943dd..59d7136142 100644
--- a/src/components/MainView.jsx
+++ b/src/components/MainView.jsx
@@ -1,10 +1,20 @@
 import React from 'react'
 
-export const MainView = ({ children }) => (
-  <main
-    className="main-view u-flex u-flex-column u-flex-content-start u-flex-content-stretch u-w-100 u-pos-relative"
-    style={{ minHeight: '100vh' }}
-  >
-    {children}
-  </main>
-)
+import { getFlagshipMetadata } from 'cozy-device-helper'
+
+export const MainView = ({ children }) => {
+  const isImmersive = getFlagshipMetadata().immersive
+
+  return (
+    <main
+      className="main-view u-flex u-flex-column u-flex-content-start u-flex-content-stretch u-w-100 u-pos-relative"
+      style={{
+        minHeight: isImmersive
+          ? 'calc(100vh - var(--flagship-bottom-height) - var(--flagship-top-height))'
+          : '100vh'
+      }}
+    >
+      {children}
+    </main>
+  )
+}