diff --git a/ui/src/main/resources/static/css/custom.css b/ui/src/main/resources/static/css/custom.css
index 2dc89ce17..773f7831e 100644
--- a/ui/src/main/resources/static/css/custom.css
+++ b/ui/src/main/resources/static/css/custom.css
@@ -179,10 +179,10 @@ Xwiki css
 	padding: 0 0 0 16px;
 }
 
-/*
+
 .bg-gray-200 {
 	background-color: #f1efe7!important;
-}*/
+}
 
 .btn-primary {
 	background-color: #1e851a!important;
@@ -206,19 +206,4 @@ h4[class^="h"],
 h5[class^="h"],
 h6[class^="h"] {
 	font-family: 'League Spartan', sans-serif!important;
-}
-
-.absolute-center {
-	position:absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-/* css surcharge test Goulven ; on inverse le crême du blanc sur la home page */
-
-main.bg-gray-200 {
-	background-color: #ffffff!important;
-}
-main section.bg-white {
-	background-color: #f1efe7 !important;
 }
\ No newline at end of file
diff --git a/ui/src/main/resources/templates/inc/navbar-home.html b/ui/src/main/resources/templates/inc/navbar-home.html
index 8f968910c..d0f2dd52c 100644
--- a/ui/src/main/resources/templates/inc/navbar-home.html
+++ b/ui/src/main/resources/templates/inc/navbar-home.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-soft">
-    <div class="container-fluid position-relative">
+    <div class="container container-semi-fluid position-relative">
         <a class="navbar-brand me-lg-5" href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
 
         <div class="navbar-collapse collapse me-auto" id="navbar_global">
diff --git a/ui/src/main/resources/templates/inc/navbar-non-product-gof.html b/ui/src/main/resources/templates/inc/navbar-non-product-gof.html
index 7f7887a40..7d6617b0e 100644
--- a/ui/src/main/resources/templates/inc/navbar-non-product-gof.html
+++ b/ui/src/main/resources/templates/inc/navbar-non-product-gof.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-soft">
-    <div class="container-fluid position-relative">
+    <div class="container container-semi-fluid position-relative">
         <a class="navbar-brand me-lg-5" href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
         <div class="navbar-collapse collapse me-auto" id="navbar_global">
             <div class="navbar-collapse-header">
diff --git a/ui/src/main/resources/templates/inc/navbar-page.html b/ui/src/main/resources/templates/inc/navbar-page.html
index 261c33bc2..e530414cd 100644
--- a/ui/src/main/resources/templates/inc/navbar-page.html
+++ b/ui/src/main/resources/templates/inc/navbar-page.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-soft">
-    <div class="container-fluid position-relative">
+    <div class="container container-semi-fluid position-relative">
         <a class="navbar-brand me-lg-5" href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
 
         <div class="navbar-collapse collapse me-auto" id="navbar_global">
diff --git a/ui/src/main/resources/templates/inc/navbar-product.html b/ui/src/main/resources/templates/inc/navbar-product.html
index 0917c88f9..85dbcc152 100644
--- a/ui/src/main/resources/templates/inc/navbar-product.html
+++ b/ui/src/main/resources/templates/inc/navbar-product.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-soft">
-    <div class="container-fluid position-relative">
+    <div class="container container-semi-fluid position-relative">
         <a class="navbar-brand me-lg-5" href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
 
         <div class="navbar-collapse collapse me-auto" id="navbar_global">
diff --git a/ui/src/main/resources/templates/inc/navbar-vertical.html b/ui/src/main/resources/templates/inc/navbar-vertical.html
index 4c0dd5373..c2d1b8487 100644
--- a/ui/src/main/resources/templates/inc/navbar-vertical.html
+++ b/ui/src/main/resources/templates/inc/navbar-vertical.html
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-soft">
-    <div class="container-fluid position-relative">
+    <div class="container container-semi-fluid position-relative">
         <a class="navbar-brand me-lg-5" href="/"><img height="35" src="/assets/img/nudger-logo-small.png"></a>
         <div class="navbar-collapse collapse me-auto" id="navbar_global">
             <div class="navbar-collapse-header">
diff --git a/ui/src/main/resources/templates/inc/preloader.html b/ui/src/main/resources/templates/inc/preloader.html
index 8c130f373..830e38724 100644
--- a/ui/src/main/resources/templates/inc/preloader.html
+++ b/ui/src/main/resources/templates/inc/preloader.html
@@ -1,15 +1,21 @@
-<section class="preloader bg-gray-200 h-100 w-100">
+<div class="preloader bg-dark flex-column justify-content-center align-items-center">
+	<img class="mb-4" id="preloader-img" style=" border-radius: 8px; width:550px; height:auto" th:src="${loaderImg}">
+	<br/>
+	<svg id="loader-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+		
+		
+		<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
+		<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
+		  <animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
+		</line>
+		<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4"	stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
+		  <animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
+		</line>
 
-	<article class="d-flex justify-content-center align-items-center position-relative">
-		<img class="absolute-center" id="preloader-img" style=" border-radius: 8px; width:550px;" th:src="${loaderImg}">
-		<svg id="loader-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-			<circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48" />
-			<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
-			<animateTransform attributeName="transform" dur="2s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
-			</line>
-			<line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4"	stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
-			<animateTransform attributeName="transform" dur="15s" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
-			</line>
-		</svg>
-	</article>
-</section>
\ No newline at end of file
+
+
+	</svg>
+	
+	
+	
+</div>
\ No newline at end of file
diff --git a/ui/src/main/resources/templates/index.html b/ui/src/main/resources/templates/index.html
index b831eabff..4fab44bcb 100644
--- a/ui/src/main/resources/templates/index.html
+++ b/ui/src/main/resources/templates/index.html
@@ -33,7 +33,7 @@
     <!--/* Loader */-->
     <th:block th:insert="~{inc/preloader.html}"></th:block>
 	
-    <main class="bg-gray-200" style="background-color: #ffffff!important;">	
+    <main class="bg-gray-200">	
 		
        	<!--/* Central */-->
 		<section class="section-header py-3">
@@ -75,36 +75,6 @@
 			<h1 class="mb-3">Consommons peu, consommons bien</h1>
 			<p class="lead mb-0">Un coup de main éthique et ouvert pour amoindrir l'impact de votre shopping en ligne.</p>
 		</section>
-
-		<section class="bg-white my-4 text-center py-4" style="background-color: #f1efe7!important;">
-			<h1 class="mb-3">Nos catégories évaluées</h1>
-			<p class="lead mb-0">L'assurance de bien choisir</p>
-		</section>
-
-		<section class="container">
-			<div class="row">
-				<div class="col-12 col-md-6 col-lg-3" th:each ="vertical : ${verticals}">
-					<div class="blog-card">
-						<div class="card shadow">
-							<a th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}"><img th:src="${vertical.homeLogo.i18n(siteLanguage)}" class="card-img-top rounded-top" alt="Themesberg office"></a>
-							<div class="card-body">
-								<h2 class="h5">
-									<a th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}" th:text="${vertical.homeTitle.i18n(siteLanguage)}"></a>
-								</h2>
-								<p class="card-text my-2" th:text="${vertical.homeDescription.i18n(siteLanguage)}"></p>
-							</div>
-							<div class="card-footer bg-white border-0 px-0 py-0">
-								<div class="d-grid">
-									<a class="btn btn-sm btn-secondary rounded-0 rounded-bottom" th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}">
-										<span class="fas fa-book-open me-1"></span> Découvrir
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
        
 
 		<div class="container container-semi-fluid py-5">
@@ -185,7 +155,7 @@ <h2 class="h4 m-0">Data responsable</h2>
 
 		</div>
 
-		<section class="bg-white mt-4 text-center py-4" style="background-color: #f1efe7!important;">
+		<section class="bg-white mt-4 text-center py-4">
 			<h1 class="mb-3">Les chiffres clés</h1>
 			<p class="lead mb-0">Avec animation, c'est plus funky</p>
 		</section>
@@ -242,8 +212,38 @@ <h1 class="mb-3">Les chiffres clés</h1>
 			</div>
 	   </section>
 
+	   <section class="bg-white mt-4 text-center py-4">
+			<h1 class="mb-3">Nos catégories évaluées</h1>
+			<p class="lead mb-0">L'assurance de bien choisir</p>
+		</section>
+
+		<section class="container">
+			<div class="row">
+				<div class="col-12 col-md-6 col-lg-3" th:each ="vertical : ${verticals}">
+					<div class="blog-card">
+						<div class="card shadow">
+							<a th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}"><img th:src="${vertical.homeLogo.i18n(siteLanguage)}" class="card-img-top rounded-top" alt="Themesberg office"></a>
+							<div class="card-body">
+								<h2 class="h5">
+									<a th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}" th:text="${vertical.homeTitle.i18n(siteLanguage)}"></a>
+								</h2>
+								<p class="card-text my-2" th:text="${vertical.homeDescription.i18n(siteLanguage)}"></p>
+							</div>
+							<div class="card-footer bg-white border-0 px-0 py-0">
+								<div class="d-grid">
+									<a class="btn btn-sm btn-secondary rounded-0 rounded-bottom" th:href="'/'+${vertical.homeUrl.i18n(siteLanguage)}">
+										<span class="fas fa-book-open me-1"></span> Découvrir
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
    
-		<section class="bg-white mt-4 text-center py-4" style="background-color: #f1efe7!important;">
+		<section class="bg-white mt-4 text-center py-4">
 			<h1 class="mb-3">Notre philosophie : le bien commun</h1>
 			<p class="lead mb-0">Découvrez nos valeurs et nos atouts</p>
 		</section>