diff --git a/src/app/custom/themes/default/css/styles.css b/src/app/custom/themes/default/css/styles.css
index 003fef199..a84f650e3 100644
--- a/src/app/custom/themes/default/css/styles.css
+++ b/src/app/custom/themes/default/css/styles.css
@@ -17,39 +17,6 @@ body {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.container,
-.container-fluid {
-    width: 100%;
-    margin-right: auto;
-    margin-left: auto;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-}
-
-@media (min-width: 576px) {
-    .container {
-        max-width: 540px;
-    }
-}
-
-@media (min-width: 768px) {
-    .container {
-        max-width: 720px;
-    }
-}
-
-@media (min-width: 992px) {
-    .container {
-        max-width: 960px;
-    }
-}
-
-@media (min-width: 1200px) {
-    .container {
-        max-width: 1140px;
-    }
-}
-
 a {
     color: #337ab7;
     background-color: transparent;
diff --git a/src/app/custom/themes/default/index.ejs b/src/app/custom/themes/default/index.ejs
index 96323511f..118274b05 100755
--- a/src/app/custom/themes/default/index.ejs
+++ b/src/app/custom/themes/default/index.ejs
@@ -18,7 +18,7 @@
     <style><%= theme.cssVariable %></style>
 </head>
 <body>
-<div id="root" class="container"></div>
+<div id="root"></div>
 <script>
     window.__PRELOADED_STATE__ = <%- lodex.preload %>;
     window.__TENANT__ = '<%= lodex.tenant %>';
diff --git a/src/app/js/public/App.js b/src/app/js/public/App.js
index e5d2f1197..68872f786 100644
--- a/src/app/js/public/App.js
+++ b/src/app/js/public/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Container from '@mui/material/Container';
 
 import stylesToClassname from '../lib/stylesToClassName';
 
@@ -13,9 +14,9 @@ const styles = stylesToClassname(
 );
 
 export const AppComponent = ({ children }) => (
-    <div className={styles.page}>
+    <Container className={styles.page} maxWidth="xl">
         <div className="body">{children}</div>
-    </div>
+    </Container>
 );
 
 AppComponent.propTypes = {
