diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 4ef112448a43fdaf568508382a9c2c4f6fe03107..29a2d2ffcf5e06064fc6935e69fd85e6566a1c5d 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -46,23 +46,22 @@ const FeatureList = [
 
 function Feature({Svg, title, description}) {
   return (
-    <div className={clsx("hero container text--center padding-horiz--md")}>
-      <div className="row">
-        <div className={"col col--5"}>
-          <Svg className={styles.svg} alt={title} />
-        </div>
-        <div className={"col col--5"}>
-          <h3>{title}</h3>
-          <p>{description}</p>
-        </div>
+    <div className="sectionsReverse row">    
+      <div className="col col--5 text--center">
+        <Svg className={styles.svg} alt={title} />
       </div>
+      <div className="col col--5">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>      
     </div>
+    
   );
 }
 
 export default function HomepageFeatures() {
   return (
-    <section className="sections" id="features">      
+    <section className="sections container" id="features">      
       <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
       <div>
         {FeatureList.map((props, idx) => (
diff --git a/src/components/HomepageFeatures.module.css b/src/components/HomepageFeatures.module.css
index 3f287c77a5e3cc4784eb1e87075f809daac803b0..ff0044a9e67879fbe58046b8a0f6fe8e8861016d 100644
--- a/src/components/HomepageFeatures.module.css
+++ b/src/components/HomepageFeatures.module.css
@@ -2,5 +2,10 @@
 
 .svg {
   height: 175px;
-  width: 175px;
+  width: 175px;  
+}
+
+.title {
+  font-weight: bold;
+  padding-bottom: 40px;
 }
diff --git a/src/components/HomepagePromises.js b/src/components/HomepagePromises.js
index c63bc2960bf2619ac197d20c5133ac5266d33699..c96b5229f5a6346a7654af86cc8103003778268c 100644
--- a/src/components/HomepagePromises.js
+++ b/src/components/HomepagePromises.js
@@ -49,14 +49,12 @@ function Promise({Svg, title, description}) {
 
 export default function HomepagePromises() {
   return (
-    <section className="sections">
-      <div className="container">
-        <div className="row">
-          {PromiseList.map((props, idx) => (
-            <Promise key={idx} {...props} />
-          ))}
-        </div>
-      </div>
+    <section className="section-promises">    
+      <div className="row">
+        {PromiseList.map((props, idx) => (
+          <Promise key={idx} {...props} />
+        ))}
+      </div>   
     </section>
   );
 }
diff --git a/src/css/custom.css b/src/css/custom.css
index b8aac77bd0dadef210768689c27bee1dd836a726..262ee51642eb21b3c4ad6ca1b5a7c89beca6696a 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -23,8 +23,8 @@
   --ifm-button-color: var(--ifm-color-primary);
   --ifm-code-font-size: 95%; 
   --ifm-font-family-base: "Comfortaa", cursive;
-  --ifm-font-family: "Montserrat",  sans-serif;
-  --ifm-navbar-shadow: none; 
+  --ifm-font-family: "Montserrat",  sans-serif; 
+  --ifm-container-width: 900px; 
 }
 
 .docusaurus-highlight-code-line {
@@ -84,9 +84,25 @@ header {
 }
 
 /************ main elements style***********/
+.section-promises {
+  padding: 4rem 0;
+  width: 100%;
+}
 .sections {
+  padding: 4rem 0;
+  width: var(--ifm-container-width);
+}
+.sectionsReverse {
+  margin: 0 16px 0 16px;
   padding: 4rem 0;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sectionsReverse:nth-of-type(odd) {
+  flex-direction: row-reverse;
 }
 
 /************ footer style ***********/