diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index 110fcc9ba74f4282a0b132c8984d23591eedf22d..1c64e7387dbcbe40d6d828bb43122f7f9737bf76 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -1,73 +1,81 @@
-/* eslint-disable linebreak-style */
-/* eslint react/prop-types: 0 */
 import React from "react";
 import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 const FeatureList = [
   {
-    title: "Le Lab 🧪",   
-    Svg: require("../../static/img/chemistry.svg").default,
-    description: (
-      <>
-        Le laboratoire vous permet d’héberger votre code et de collaborer dessus avec Git. C&apos;est plus qu&apos;un serveur Git puisque vous pouvez gérer un projet complet dessus. Le Lab est le cœur de Froggit et il sert aussi de base centrale pour l’authentification unique (SSO) des autres services.
-      </>
-    ), 
-  },     
+    id: 5,
+    title: "Le\u00A0SSO\u00A0🔑",
+    svg: "hello.png",
+    alt: "Kermit, sortant de sa cachette",
+    description: "Authentifiez-vous une bonne fois pour toute !"
+  },  
   {
-    title: "La CI 🔁",  
-    Svg: require("../../static/img/rainbow.svg").default,
-    description: (
-      <>
-        Fournir un outil de collaboration de code sans Intégration Continue n&apos;était pas pensable pour nous. C&apos;est pour cela que nous avons mis en place une CI avec un serveur et un débordement élastique dans Kubernetes.
-      </>
-    ), 
+    id: 1,
+    title: "Le\u00A0Lab\u00A0🧪",   
+    svg: "chemistry.svg",
+    alt: "Kermit manipule du matériel de laboratoire",
+    description:"Gérer vos projets, héberger votre code et collaborer autour de Git", 
   },
   {
-    title: "Le Chat 💬",  
-    Svg: require("../../static/img/selfie.svg").default,
-    description: (
-      <>
-        Pour collaborer les équipes ont besoin de communiquer. Qu&apos;elles soient physiquement au même endroit ou non une communication asynchrone est importante. C&apos;est pour cela que Froggit inclut un chat avec le service. Vous pourrez même faire remonter vos alertes et messages venant du Lab. L&apos;authentification se fera grâce au Lab, vous n&apos;aurez qu&apos;un seul compte pour tous les services de Froggit. Vous pourrez abandonner Slack sans crainte !
-      </>
-    ),
+    id: 2,
+    title: "La\u00A0CI\u00A0🔁",
+    svg: "rainbow.svg",
+    alt: "Kermit pose devant un arc-en-ciel",
+    description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
   },
   {
-    title: "Les Pages 🔖",  
-    Svg: require("../../static/img/read-smile.svg").default,
-    description: (
-      <>
-        Vous avez besoin de créer des sites statiques pour vos documentations. C&apos;est pour cela que nous mettons en place les GitLab pages qui vous permettent d&apos;héberger des sites statiques.
-      </>
-    ),
+    id: 4,
+    title: "Les\u00A0Pages\u00A0🔖",
+    svg: "read-smile.svg",
+    alt: "Kermit porte des lunettes rondes et lit un livre",
+    description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
   },
+  {
+    id: 3,
+    title: "Le\u00A0Chat\u00A0💬",
+    svg: "selfie.svg",
+    alt: "Kermit prend un selfie",
+    description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
+  },
+  {
+    id: 6,
+    title: "La\u00A0communauté\u00A0🍺",
+    svg: "beer.png",
+    alt: "Kermit faisant un clin d'oeil, une chope à la main",
+    description: "Une communauté Git pour solutionner vos pépins rapidement"
+  }
 ];
 
 
-function Feature({Svg, title, description}) {
-  return (
-    <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 container" id="features">      
-      <h2 className={clsx("text--center text--uppercase", styles.title)}>Fonctionnalités</h2>
+    <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>
-        {FeatureList.map((props, idx) => (
-          <Feature key={idx} {...props} />
-        ))}
+        <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/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
+                <p className={styles.textDisplay}> {em.description} </p>
+              </div>
+            </TabItem>
+          ))}
+        </Tabs>
       </div>
+
     </section>
+
   );
 }
diff --git a/src/components/HomepageFeatures.module.css b/src/components/HomepageFeatures.module.css
index 694a39450699805f02c7055ccdf7f83da8ce8cf4..bc86790c5084520645394e42b577a10cc2095c4e 100644
--- a/src/components/HomepageFeatures.module.css
+++ b/src/components/HomepageFeatures.module.css
@@ -1,12 +1,45 @@
-/* stylelint-disable docusaurus/copyright-header */
+@import url("../css/variables.css");
 
-.svg {
-  height: 275px;
-  width: 275px; 
-  max-width: 100%; 
+.featuresSubtitle {
+    padding-top: 26px;
 }
 
-.title {
-  font-weight: bold;
-  padding-bottom: 40px;
+.tabsElement {
+    width: 100%;
+    margin-bottom: 48px;
+    
 }
+
+.tabsElement>li {
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    transition: 0.4s;
+}
+
+.tabImages {
+    width: 360px;
+}
+
+.rowDisplay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.textDisplay {
+    padding: 15px;
+    width: 25%;
+    font-size: 20px;
+    text-align: left;
+}
+
+@media (max-width: 600px) {
+    .textDisplay {
+        width: 100%;
+        text-align: center;
+    }
+  }
diff --git a/src/components/TextRight.js b/src/components/TextRight.js
index 3e06ad1ac67435192c564d84d3f4debc1e80e662..25212f0802fdf27928bf9b5158ddbeb8e6fb06cf 100644
--- a/src/components/TextRight.js
+++ b/src/components/TextRight.js
@@ -7,7 +7,7 @@ export default function TextRight({children, img}) {
     <>
       <div className="row">
         <div className="col col--6">
-          <img src={useBaseUrl(img)} />
+          <img src={useBaseUrl(img)}/>
         </div>
         <div className="col col--6">
           {children}
diff --git a/src/pages/index.js b/src/pages/index.js
index 0e0f4705deea8d21bf679dc1c6ee1931ad270a89..0dbf12c4dce29c2e98d7a9be2c94e3fcdd7384e0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -30,7 +30,7 @@ export default function Home() {
       title={siteConfig.themeConfig.navbar.title}
       description={siteConfig.tagline}
     >
-      <HomepageHeader />
+      <HomepageHeader/>
       <main>
         <HomepagePromises />
         <HomepageFeatures />
diff --git a/static/img/HomepageFeatures/beer.png b/static/img/HomepageFeatures/beer.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9f2d64bbc16dcf7aa225020c2ff98d70a984672
Binary files /dev/null and b/static/img/HomepageFeatures/beer.png differ
diff --git a/static/img/chemistry.svg b/static/img/HomepageFeatures/chemistry.svg
similarity index 100%
rename from static/img/chemistry.svg
rename to static/img/HomepageFeatures/chemistry.svg
diff --git a/static/img/HomepageFeatures/hello.png b/static/img/HomepageFeatures/hello.png
new file mode 100644
index 0000000000000000000000000000000000000000..666035849ceacf40eb112c030368209fd41476c6
Binary files /dev/null and b/static/img/HomepageFeatures/hello.png differ
diff --git a/static/img/rainbow.svg b/static/img/HomepageFeatures/rainbow.svg
similarity index 100%
rename from static/img/rainbow.svg
rename to static/img/HomepageFeatures/rainbow.svg
diff --git a/static/img/read-smile.svg b/static/img/HomepageFeatures/read-smile.svg
similarity index 100%
rename from static/img/read-smile.svg
rename to static/img/HomepageFeatures/read-smile.svg
diff --git a/static/img/selfie.svg b/static/img/HomepageFeatures/selfie.svg
similarity index 100%
rename from static/img/selfie.svg
rename to static/img/HomepageFeatures/selfie.svg