diff --git a/src/components/CarouselLibre.js b/src/components/CarouselLibre.js
index b3fd87203009ee8702d097c0cb0333141e0cc40d..a77a5f50f82e4d45757dd829ccd76216fb3e1b71 100644
--- a/src/components/CarouselLibre.js
+++ b/src/components/CarouselLibre.js
@@ -57,7 +57,7 @@ const CarouselList = [
 
 export default function CarouselLibre() {
   return (
-    <div>
+    <div className="homepage_section">
       <section className="sections container">
         <h2 className={clsx("text--center")}>Restez libres !
         </h2>
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 0ecc4440f0dd646861910cb714303f898b9504ea..e6e222522763a50a88ea4ee2ee9118d4932f64a8 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -53,29 +53,30 @@ const FeatureList = [
 
 export default function HomepageFeatures() {
   return (
-    <section className="sections container" id="features">   
-      <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
-      </h2>
-      <div className={styles.featuresSubtitle}>
-        <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
-        </p>
-        <p className={"text--center margin-bottom--lg"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique. 
-        </p> 
-      </div>
-      <div>
-        <Tabs className={styles.tabsElement}>
-          {FeatureList.map((em) => (
-            <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
-              <div className={styles.rowDisplay}>
-                <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
-                <p className={styles.textDisplay}> {em.description} </p>
-              </div>
-            </TabItem>
-          ))}
-        </Tabs>
-      </div>
-
-    </section>
+    <div className="homepage_section">
+      <section className="sections container" id="features">   
+        <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
+        </h2>
+        <div className={styles.featuresSubtitle}>
+          <p className={"text--center"}>De la planification au déploiement en passant par le testing… <br/>
+          </p>
+          <p className={"text--center margin-bottom--lg"}> Réunissez vos équipes sur la même plateforme DevOps, pensée pour améliorer vos performances, vos résultats et réduire votre empreinte écologique. 
+          </p> 
+        </div>
+        <div>
+          <Tabs className={styles.tabsElement}>
+            {FeatureList.map((em) => (
+              <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
+                <div className={styles.rowDisplay}>
+                  <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                  <p className={styles.textDisplay}> {em.description} </p>
+                </div>
+              </TabItem>
+            ))}
+          </Tabs>
+        </div>
+      </section>
+    </div>
 
   );
 }
diff --git a/src/components/HomepagePromises.js b/src/components/HomepagePromises.js
index 78ab7c1d9baa6f0c91477f01452f5b7c0ff25539..115c25b610c29f606e5a6c356c4ef3dcbb2393b8 100644
--- a/src/components/HomepagePromises.js
+++ b/src/components/HomepagePromises.js
@@ -52,7 +52,7 @@ function Promise({Svg, alt, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <div className={styles.rowOverflow}>
+    <div className={styles.rowOverflow+" homepage_section"}>
       <section className="section-promises"> 
         <h2 className="promise-title margin-bottom--lg">Faites la différence</h2>  
         <div className="row">
diff --git a/src/css/custom.css b/src/css/custom.css
index 269a6973be24e2c99839f5b2e1dfe18650f0c48f..59569bee44eab8a7cb9761a36df460b268f88369 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -198,6 +198,11 @@ ul {
   color: var(--ifm-color-warning);
 }
 
+/* background color on homepage */
+.homepage_section:nth-child(even) {
+  background-color: var(--section-background);
+}
+
 /****** MEDIA SCREEN *******/
 @media screen and (max-width:330px) {
   .navbar {
diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
index ed4d3e56ce1bcd2e13fdd5f6749957c2327e0342..2f2fbc861e8705b5e54f59f0085e8c262d91bf40 100644
--- a/src/css/dark-theme.css
+++ b/src/css/dark-theme.css
@@ -5,6 +5,7 @@ html[data-theme='dark'] {
     --ifm-font-color-base: var(--ifm-color-white);
     --ifm-font-color-base-inverse: var(--ifm-color-white);
     --ifm-font-color-secondary: var(--ifm-color-white);
+    --section-background: var(--ifm-color-gray-900);
     /* admonitions base */
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray-700);
     --ifm-color-success-contrast-background: var(--ifm-color-success);
diff --git a/src/css/variables.css b/src/css/variables.css
index 893cfb4eb5efd7be6ddf7d3ee611a5a2654b705e..3967cbed73c1a70d323d36584bc21bdcb10a6b4c 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -66,6 +66,7 @@
     --ifm-color-secondary-darkest: #9aa4b3;
     --ifm-color-secondary-contrast-background: var(--ifm-color-gray);
     --ifm-color-secondary-contrast-foreground: var(--ifm-color-secondary);
+    --section-background: var(--ifm-color-gray-100);
 
     /* Success */
     --ifm-color-success-lightest: #68861d;