diff --git a/src/components/CarouselLibre.js b/src/components/CarouselLibre.js
index 0131a06f3668f86ca9bf9fa9f6a4b0fcef3d441d..a77a5f50f82e4d45757dd829ccd76216fb3e1b71 100644
--- a/src/components/CarouselLibre.js
+++ b/src/components/CarouselLibre.js
@@ -57,12 +57,12 @@ const CarouselList = [
 
 export default function CarouselLibre() {
   return (
-    <div>
-      <h2 className={clsx("text--center")}>Restez libres !
-      </h2>
-      <p className={"text--center"}>Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
-      </p> 
+    <div className="homepage_section">
       <section className="sections container">
+        <h2 className={clsx("text--center")}>Restez libres !
+        </h2>
+        <p className="text--center margin-bottom--lg">Pour nous assurer que vous soyez libre Froggit se base sur des logiciels libres reconnus.
+        </p> 
         <Carousel list={CarouselList} />
       </section>
     </div>
diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 7e7c69ac87fc0b77fceb0bb48838e43d24c6fcc2..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"}> 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 411e51ddf1fd7ce466917009b88418b87c5d6d04..115c25b610c29f606e5a6c356c4ef3dcbb2393b8 100644
--- a/src/components/HomepagePromises.js
+++ b/src/components/HomepagePromises.js
@@ -52,9 +52,9 @@ function Promise({Svg, alt, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <div className={styles.rowOverflow}>
-      <h2 className="promise-title">Faites la différence</h2>
-      <section className="section-promises">    
+    <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">
           {PromiseList.map((props, idx) => (
             <Promise key={idx} {...props} />
diff --git a/src/css/custom.css b/src/css/custom.css
index e2b10a9d9c9e46c151e0093a4e830cc4c2f30161..6d6ea9c16d1533ac3de8cc9a7a7d33bf7b92e6ea 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -206,6 +206,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;
diff --git a/src/pages/index.js b/src/pages/index.js
index a3dc5e7b1646bfa3347a14ba6c40273665f11d17..02b73ad18d7a160e74f593df0fa7b38b274d998b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -33,7 +33,7 @@ export default function Home() {
       title={siteConfig.themeConfig.navbar.title}
       description={siteConfig.tagline}
     >
-      <HomepageHeader/>
+      <HomepageHeader />
       <main>
         <HomepagePromises />
         <HomepageFeatures />