diff --git a/app/assets/stylesheets/_maintenance.scss b/app/assets/stylesheets/_maintenance.scss
deleted file mode 100644
index dd59c31d6..000000000
--- a/app/assets/stylesheets/_maintenance.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.maintenance {
-  width: 100%;
-  position: fixed;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  span {
-    margin: auto;
-    background: #FFD8A6;
-    padding: 0 4px;
-  }
-}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 84ef7d75e..e9dd51d18 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -9,7 +9,6 @@
 // defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 // file per style scope.
 //
-// = require _maintenance
 // = require _card
 // = require _helpers
 // = require _turbolinks
@@ -28,7 +27,7 @@
 // = require print
 // = require procedure
 // = require search
-// = require outdated_browser_banner
+// = require site_banner
 // = require switch_menu
 // = require autocomplete
 // = require users
diff --git a/app/assets/stylesheets/new_design/_maintenance.scss b/app/assets/stylesheets/new_design/_maintenance.scss
deleted file mode 100644
index 153a5f685..000000000
--- a/app/assets/stylesheets/new_design/_maintenance.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "colors";
-
-.maintenance {
-  padding: 20px;
-  text-align: center;
-  width: 100%;
-  background: $orange-bg;
-}
diff --git a/app/assets/stylesheets/new_design/outdated_browser_banner.scss b/app/assets/stylesheets/new_design/site_banner.scss
similarity index 58%
rename from app/assets/stylesheets/new_design/outdated_browser_banner.scss
rename to app/assets/stylesheets/new_design/site_banner.scss
index 7b94f8a79..6b4448781 100644
--- a/app/assets/stylesheets/new_design/outdated_browser_banner.scss
+++ b/app/assets/stylesheets/new_design/site_banner.scss
@@ -1,21 +1,31 @@
 @import "colors";
 @import "constants";
 
-#outdated-browser-banner {
+.site-banner {
   width: 100%;
   margin: 0;
   padding: $default-padding;
   color: $black;
   background-color: $yellow;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
+
+  &.warning {
+    background-color: $orange-bg;
+  }
+
+  .container {
+    display: flex;
+    align-items: center;
+  }
 }
 
-.outdated-browser-icon {
+.site-banner-icon {
   margin-right: $default-padding;
   font-size: 30px;
   opacity: 0.7;
 }
 
-.outdated-browser-buttons {
+.site-banner-actions {
   display: flex;
   margin-left: auto;
 
diff --git a/app/assets/stylesheets/outdated_browser_banner.scss b/app/assets/stylesheets/site_banner.scss
similarity index 64%
rename from app/assets/stylesheets/outdated_browser_banner.scss
rename to app/assets/stylesheets/site_banner.scss
index c4b2eb089..9db9b754f 100644
--- a/app/assets/stylesheets/outdated_browser_banner.scss
+++ b/app/assets/stylesheets/site_banner.scss
@@ -1,9 +1,14 @@
-#outdated-browser-banner {
+.site-banner {
   width: 100%;
   margin: 0;
 
   color: #333333;
   background-color: #FEF3B8;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
+
+  &.warning {
+    background-color: #FFD8A6;
+  }
 
   .container {
     display: flex;
@@ -13,13 +18,13 @@
   }
 }
 
-.outdated-browser-icon {
+.site-banner-icon {
   margin-right: 16px;
   font-size: 30px;
   opacity: 0.7;
 }
 
-.outdated-browser-buttons {
+.site-banner-actions {
   display: flex;
   margin-left: auto;
 }
diff --git a/app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js b/app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js
deleted file mode 100644
index b5fdba47f..000000000
--- a/app/javascript/components/TypesDeChampEditor/TypesDeChampEditor.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import {
-  faArrowCircleDown,
-  faArrowDown,
-  faArrowsAltV,
-  faArrowUp,
-  faPlus,
-  faTrash
-} from '@fortawesome/free-solid-svg-icons';
-
-import Flash from './Flash';
-import OperationsQueue from './OperationsQueue';
-import TypeDeChamps from './components/TypeDeChamps';
-
-library.add(
-  faArrowCircleDown,
-  faArrowDown,
-  faArrowsAltV,
-  faArrowUp,
-  faPlus,
-  faTrash
-);
-
-class TypesDeChampEditor extends Component {
-  constructor(props) {
-    super(props);
-    const defaultTypeDeChampAttributes = {
-      type_champ: 'text',
-      types_de_champ: [],
-      private: props.isAnnotation,
-      libelle: `${
-        props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
-      } ${props.typeDeChampsTypes[0][0]}`
-    };
-    this.state = {
-      flash: new Flash(props.isAnnotation),
-      queue: new OperationsQueue(props.baseUrl),
-      defaultTypeDeChampAttributes,
-      typeDeChampsTypes: props.typeDeChampsTypes,
-      directUploadUrl: props.directUploadUrl,
-      isAnnotation: props.isAnnotation
-    };
-  }
-
-  render() {
-    return (
-      <TypeDeChamps state={this.state} typeDeChamps={this.props.typeDeChamps} />
-    );
-  }
-}
-
-TypesDeChampEditor.propTypes = {
-  baseUrl: PropTypes.string,
-  directUploadUrl: PropTypes.string,
-  isAnnotation: PropTypes.bool,
-  typeDeChamps: PropTypes.array,
-  typeDeChampsTypes: PropTypes.array
-};
-
-export default TypesDeChampEditor;
diff --git a/app/javascript/components/TypesDeChampEditor/index.js b/app/javascript/components/TypesDeChampEditor/index.js
index 8cb4f529e..b5fdba47f 100644
--- a/app/javascript/components/TypesDeChampEditor/index.js
+++ b/app/javascript/components/TypesDeChampEditor/index.js
@@ -1,3 +1,62 @@
-import Loadable from '../Loadable';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faArrowCircleDown,
+  faArrowDown,
+  faArrowsAltV,
+  faArrowUp,
+  faPlus,
+  faTrash
+} from '@fortawesome/free-solid-svg-icons';
 
-export default Loadable(() => import('./TypesDeChampEditor'));
+import Flash from './Flash';
+import OperationsQueue from './OperationsQueue';
+import TypeDeChamps from './components/TypeDeChamps';
+
+library.add(
+  faArrowCircleDown,
+  faArrowDown,
+  faArrowsAltV,
+  faArrowUp,
+  faPlus,
+  faTrash
+);
+
+class TypesDeChampEditor extends Component {
+  constructor(props) {
+    super(props);
+    const defaultTypeDeChampAttributes = {
+      type_champ: 'text',
+      types_de_champ: [],
+      private: props.isAnnotation,
+      libelle: `${
+        props.isAnnotation ? 'Nouvelle annotation' : 'Nouveau champ'
+      } ${props.typeDeChampsTypes[0][0]}`
+    };
+    this.state = {
+      flash: new Flash(props.isAnnotation),
+      queue: new OperationsQueue(props.baseUrl),
+      defaultTypeDeChampAttributes,
+      typeDeChampsTypes: props.typeDeChampsTypes,
+      directUploadUrl: props.directUploadUrl,
+      isAnnotation: props.isAnnotation
+    };
+  }
+
+  render() {
+    return (
+      <TypeDeChamps state={this.state} typeDeChamps={this.props.typeDeChamps} />
+    );
+  }
+}
+
+TypesDeChampEditor.propTypes = {
+  baseUrl: PropTypes.string,
+  directUploadUrl: PropTypes.string,
+  isAnnotation: PropTypes.bool,
+  typeDeChamps: PropTypes.array,
+  typeDeChampsTypes: PropTypes.array
+};
+
+export default TypesDeChampEditor;
diff --git a/app/javascript/loaders/TypesDeChampEditor.js b/app/javascript/loaders/TypesDeChampEditor.js
new file mode 100644
index 000000000..8862e5ae9
--- /dev/null
+++ b/app/javascript/loaders/TypesDeChampEditor.js
@@ -0,0 +1,3 @@
+import Loadable from '../components/Loadable';
+
+export default Loadable(() => import('../components/TypesDeChampEditor'));
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index a0e320c3a..5a7e995cf 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -73,6 +73,6 @@ window.Turbolinks = Turbolinks;
 
 // Now that Turbolinks is globally exposed,configure ReactRailsUJS
 // eslint-disable-next-line no-undef
-ReactRailsUJS.useContext(require.context('components', true));
+ReactRailsUJS.useContext(require.context('loaders', true));
 // Remove previous event handlers and add new ones:
 ReactRailsUJS.detectEvents();
diff --git a/app/javascript/shared/polyfills.js b/app/javascript/shared/polyfills.js
index 91124f495..24b086ccc 100644
--- a/app/javascript/shared/polyfills.js
+++ b/app/javascript/shared/polyfills.js
@@ -6,6 +6,4 @@ import 'dom4';
 import './polyfills/insertAdjacentElement';
 import './polyfills/dataset';
 
-if (typeof window.IntersectionObserver === 'undefined') {
-  import('intersection-observer');
-}
+import('intersection-observer');
diff --git a/app/views/layouts/_main_container.html.haml b/app/views/layouts/_main_container.html.haml
index ff74bc38d..bd4d39896 100644
--- a/app/views/layouts/_main_container.html.haml
+++ b/app/views/layouts/_main_container.html.haml
@@ -1,6 +1,7 @@
 #main-container{ class: "col-xs-#{main_container_size}" }
   .row
     = render partial: 'layouts/outdated_browser_banner'
+    = render partial: 'layouts/pre_maintenance'
   .row
     = render partial: 'layouts/flash_messages'
   .row
diff --git a/app/views/layouts/_outdated_browser_banner.html.haml b/app/views/layouts/_outdated_browser_banner.html.haml
index d60b38661..ee39e191d 100644
--- a/app/views/layouts/_outdated_browser_banner.html.haml
+++ b/app/views/layouts/_outdated_browser_banner.html.haml
@@ -1,15 +1,14 @@
 -# See config/browser.rb
 - if !browser.modern? && !has_dismissed_outdated_browser_banner?
-  #outdated-browser-banner
-    .container.flex.align-center
-      .outdated-browser-icon
-        ⚠️
-      .outdated-browser-test
+  #outdated-browser-banner.site-banner
+    .container
+      .site-banner-icon ⚠️
+      .site-banner-text
         %strong
           #{browser.name} #{browser.version} est trop ancien pour utiliser demarches-simplifiees.fr.
         %br
         Certaines parties du site ne fonctionneront pas correctement.
-      .outdated-browser-buttons
+      .site-banner-actions
         = button_to 'Ignorer', dismiss_outdated_browser_path, method: :post, remote: true, class: 'button btn', title: 'Ne plus afficher cet avertissement pendant une semaine'
         %a.btn.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }
           Mettre à jour mon navigateur
diff --git a/app/views/layouts/_pre_maintenance.html.haml b/app/views/layouts/_pre_maintenance.html.haml
index c14ca1e61..28327f13d 100644
--- a/app/views/layouts/_pre_maintenance.html.haml
+++ b/app/views/layouts/_pre_maintenance.html.haml
@@ -1,4 +1,9 @@
 - if feature_enabled?(:pre_maintenance_mode)
-  .maintenance
-    %span
-      Une opération de maintenance est prévue sur demarches-simplifiees.fr à 23 h 00. La plateforme sera inaccessible pendant une vingtaine de minutes.
+  .site-banner.warning
+    .container
+      .site-banner-icon 🕚
+      .site-banner-text
+        %strong
+          Une opération de maintenance est prévue sur demarches-simplifiees.fr à 23 h 00.
+        %br
+        La plateforme sera inaccessible pendant une vingtaine de minutes.
diff --git a/app/views/layouts/application_old.html.haml b/app/views/layouts/application_old.html.haml
index 80fd1109e..96217b370 100644
--- a/app/views/layouts/application_old.html.haml
+++ b/app/views/layouts/application_old.html.haml
@@ -19,7 +19,6 @@
     = Gon::Base.render_data(camel_case: true, init: true)
 
   %body{ class: browser.platform.ios? ? 'ios' : nil }
-    = render partial: 'layouts/pre_maintenance'
     - if staging?
       #beta
         Env Test