diff --git a/src/assets/main.css b/src/assets/main.css
index 53b53f0..a736e7f 100755
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -28,6 +28,33 @@ p {
     color: var(--color-on-surface);
 }
 
+.heading-2 {
+    font-size: 2.5rem;
+    font-weight: 900;
+    text-align: center;
+    margin: 0 1rem;
+    max-width: 780px;
+    color: var(--color-primary);
+}
+
+.heading-3 {
+    font-size: 2rem;
+    font-weight: 900;
+    text-align: center;
+    margin: 0 1rem;
+    max-width: 780px;
+    color: var(--color-secondary);
+}
+
+@media screen and (max-width: 768px) {
+    .heading-2 {
+        font-size: 2rem;
+    }
+    .heading-3 {
+        font-size: 1.5rem;
+    }
+}
+
 .error-message {
     color: red;
     font-size: 18px;
@@ -37,7 +64,7 @@ p {
 }
 
 .success-message {
-    color: #57c18b;
+    color: var(--color-secondary);
     font-size: 18px;
     font-weight: 500;
     outline: none;
diff --git a/src/components/Shared/Block3.vue b/src/components/Shared/Block3.vue
index 9b0d567..6e6d8b2 100644
--- a/src/components/Shared/Block3.vue
+++ b/src/components/Shared/Block3.vue
@@ -1,25 +1,28 @@
+<script setup lang="ts">
+import BoxInfo from "@/components/global/BoxInfo.vue";
+defineProps<{ title: string }>();
+</script>
+
 <template>
   <div class="container">
-    <h2 class="title">{{ title }}</h2>
+    <h2 class="heading-2">{{ title }}</h2>
     <div class="box-container">
       <BoxInfo
         title="Cadrage"
         text="Définition des règles à produire et contractualisation"
-      ></BoxInfo>
+      />
       <BoxInfo
         title="production"
         text="Production des règles par notre équipe interne"
-      ></BoxInfo>
+      />
       <BoxInfo
         title="Test"
         text="Test des règles produites pour s’assurer de leur efficacité dans la réduction de la consommation énergétique"
-      >
-      </BoxInfo>
+      />
       <BoxInfo
         title="Livraison"
         text="Test des règles produites pour s’assurer de leur efficacité dans la réduction de la consommation énergétique"
-      >
-      </BoxInfo>
+      />
     </div>
     <span
       >Toutes les règles sur-mesure, produites pour le compte d'organisations, tombent
@@ -28,20 +31,12 @@
     >
   </div>
 </template>
-<script setup lang="ts">
-import BoxInfo from "@/components/global/BoxInfo.vue";
-const props = defineProps({
-  title: String,
-});
-</script>
 
 <style scoped>
 .container {
   width: 100%;
   min-height: 396px;
   padding-top: 50px;
-  height: max-content;
-  z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -49,26 +44,13 @@ const props = defineProps({
   background-color: #f3f3f3;
 }
 
-.title {
-  max-width: 1089px;
-  font-size: 40px;
-  font-weight: 900;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: 1.25;
-  letter-spacing: normal;
-  text-align: center;
-  color: #355086;
-  padding: 0px 0 0 0;
-}
-
 .box-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  margin: 50px 0px 35px 0px;
+  margin: 50px 0 35px 0;
 }
 
 span {
@@ -84,23 +66,7 @@ span {
   padding-bottom: 47px;
 }
 
-
-@media screen and (max-width: 1150px) {
-
-  .title{
-      margin: 0 36px 0 36px;
-      font-size: 32px;
-  }
-
-}
-
 @media screen and (max-width: 768px) {
-
-  .title{
-      margin: 0 36px 0 36px;
-      font-size: 28px;
-  }
-
   span{
     margin: 0 50px 0 50px;
     font-size: 15px;
diff --git a/src/components/Shared/GraphRule.vue b/src/components/Shared/GraphRule.vue
deleted file mode 100644
index 62dcf62..0000000
--- a/src/components/Shared/GraphRule.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-    <div class="GraphRule">
-        <h1 class="title">Le processus de création d'une règle ecoCode</h1>
-        <div class="container-rule">
-            <div class="top-graph">
-                <ProcessRule id="rule-1" titlePosition="right" position="right" title="identification"
-                    text="Nous identifions des patterns de code qui pourraient être améliorés (code smells)"></ProcessRule>
-                <ProcessRule id="rule-2" titlePosition="right" position="right" title="production"
-                    text="Les membres contributeurs produisent la règle permettant de réduire l’impact du code">
-                </ProcessRule>
-                <ProcessRule id="rule-3" titlePosition="middle" position="bottom" title="expérimentation"
-                    text="La règle est testée en comparaison avec le code smell"></ProcessRule>
-            </div>
-            <div class="bottom-graph">
-                <ProcessRule id="rule-4" titlePosition="left" position="left" title="utilisation"
-                    text="Utilisation de la règle par des équipes techniques dans leur organisation"></ProcessRule>
-                <ProcessRule id="rule-5" titlePosition="left" position="left" title="intégration"
-                    text="La règle est publiée dans le référentiel Open Source d’ecoCode"></ProcessRule>
-                <ProcessRule id="rule-6" titlePosition="middle" position="null" title="validation"
-                    text="Une équipe expérimentée étudie et valide la nouvelle règle"></ProcessRule>
-            </div>
-        </div>
-        <span class="detail">Nous travaillons également sur des règles sur-mesure pour des organisations
-            clientes</span>
-        <ButtonBlock typebutton="blue" link="/Entreprise" text="En savoir plus"></ButtonBlock>
-    </div>
-</template>
-<script setup lang="ts">
-import ProcessRule from "@/components/global/ProcessRule.vue";
-import ButtonBlock from "@/components/global/Button.vue";
-</script>
-
-<style scoped>
-.GraphRule {
-    width: 100%;
-    min-height: 396px;
-    height: max-content;
-    background-color: #f3f3f3;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    padding-bottom: 50px;
-}
-
-.title {
-    max-width: 1050px;
-    font-size: 40px;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    color: #355086;
-    padding: 40px 0 0 0;
-}
-
-.container-rule {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    padding: 50px 0 0 0;
-}
-
-.top-graph {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: center;
-}
-
-.bottom-graph {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    justify-content: center;
-}
-
-.detail {
-    max-width: 463px;
-    font-size: 22px;
-    font-weight: bold;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    color: #022826;
-    text-align: center;
-    padding: 50px 0 50px 0;
-}
-
-@media screen and (max-width: 1150px) {
-    .container-rule {
-        flex-direction: column;
-    }
-
-    .top-graph {
-        flex-direction: column;
-    }
-
-    .bottom-graph {
-        flex-direction: column;
-    }
-
-    #rule-4 {
-        order: 3;
-    }
-
-    #rule-5 {
-        order: 2;
-    }
-
-    #rule-6 {
-        order: 1;
-    }
-
-    .title{
-        font-size: 32px;
-        margin: 0 36px 0 36px;
-    }
-    .detail{
-        font-size: 25px;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .title{
-        font-size: 28px;
-        margin: 0 36px 0 36px;
-    }
-    .detail{
-        font-size: 20px;
-        padding-bottom: 0px;
-    }
-}
-
-
-</style>
diff --git a/src/components/Shared/GraphStep.vue b/src/components/Shared/GraphStep.vue
index 76ef7fe..8553de4 100644
--- a/src/components/Shared/GraphStep.vue
+++ b/src/components/Shared/GraphStep.vue
@@ -1,28 +1,30 @@
-<template>
-    <div class="GraphRule">
-        <h1 class="title">Les étapes pour contribuer à ecoCode</h1>
-        <div class="container-rule">
-            <div class="top-graph">
-                <ProcessRule id="rule-1" :opacity="0" titlePosition="right" position="right" title="" text="Je rejoins GitHub"></ProcessRule>
-                <ProcessRule id="rule-2" :opacity="0.2" titlePosition="right" position="right" title="" text="Je me positionne sur un ou plusieurs projets"></ProcessRule>
-                <ProcessRule id="rule-3" :opacity="0.4" titlePosition="right" position="bottom" title="" text="Je m'approprie les code smells sur lesquels me baser pour écrire les règles"></ProcessRule>
-            </div>
-            <div class="bottom-graph">
-                <ProcessRule id="rule-4" image="true" :opacity="1" titlePosition="left" position="left"
-                    text="C'est parti !">
-                </ProcessRule>
-                <ProcessRule id="rule-5" :opacity="0.8" titlePosition="left" position="left"
-                    text="Je propose une PR pour validation et intégration à la solution ecoCode"></ProcessRule>
-                <ProcessRule id="rule-6" :opacity="0.6" titlePosition="left" position=""
-                    text="J'écris des règles de détection Sonar"></ProcessRule>
-            </div>
-        </div>
-    </div>
-</template>
 <script setup lang="ts">
 import ProcessRule from '@/components/global/ProcessRule.vue';
 </script>
 
+<template>
+  <div class="GraphRule">
+    <h2 class="heading-2">Les étapes pour contribuer à ecoCode</h2>
+    <div class="container-rule">
+      <div class="top-graph">
+        <ProcessRule id="rule-1" :opacity="0" titlePosition="right" position="right" title="" text="Je rejoins GitHub"/>
+        <ProcessRule id="rule-2" :opacity="0.2" titlePosition="right" position="right" title=""
+                     text="Je me positionne sur un ou plusieurs projets"/>
+        <ProcessRule id="rule-3" :opacity="0.4" titlePosition="right" position="bottom" title=""
+                     text="Je m'approprie les code smells sur lesquels me baser pour écrire les règles"/>
+      </div>
+      <div class="bottom-graph">
+        <ProcessRule id="rule-4" image="true" :opacity="1" titlePosition="left" position="left"
+                     text="C'est parti !"/>
+        <ProcessRule id="rule-5" :opacity="0.8" titlePosition="left" position="left"
+                     text="Je propose une PR pour validation et intégration à la solution ecoCode"/>
+        <ProcessRule id="rule-6" :opacity="0.6" titlePosition="left" position=""
+                     text="J'écris des règles de détection Sonar"/>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .GraphRule {
     width: 100%;
@@ -37,17 +39,8 @@ import ProcessRule from '@/components/global/ProcessRule.vue';
     padding-bottom: 50px;
 }
 
-.title {
-    max-width: 1050px;
-    font-size: 40px;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    color: #355086;
-    padding: 40px 0 0 0;
+.heading-2 {
+    margin-top: 40px;
 }
 
 .container-rule {
@@ -73,18 +66,6 @@ import ProcessRule from '@/components/global/ProcessRule.vue';
     justify-content: center;
 }
 
-.detail {
-    max-width: 463px;
-    font-size: 22px;
-    font-weight: bold;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    color: #022826;
-    text-align: center;
-    padding: 50px 0 50px 0;
-}
 @media screen and (max-width: 1150px) {
     .container-rule {
         flex-direction: column;
@@ -109,24 +90,5 @@ import ProcessRule from '@/components/global/ProcessRule.vue';
     #rule-6 {
         order: 1;
     }
-
-    .title{
-        font-size: 32px;
-        margin: 0 36px 0 36px;
-    }
-    .detail{
-        font-size: 25px;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .title{
-        font-size: 28px;
-        margin: 0 36px 0 36px;
-    }
-    .detail{
-        font-size: 20px;
-        padding-bottom: 0px;
-    }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/company/CaseStudyForm.vue b/src/components/company/CaseStudyForm.vue
index 25159e6..9d238a8 100644
--- a/src/components/company/CaseStudyForm.vue
+++ b/src/components/company/CaseStudyForm.vue
@@ -9,7 +9,7 @@
     <Textfield id="role" v-model="role" label="Rôle :" autocomplete="organization-title"/>
 
     <Fieldset>
-      <Textfield id="email" v-model="email" type="email" label="E-mail * :" autocomplete="email"/>
+      <Textfield id="email" v-model="email" type="email" label="E-mail * :" required autocomplete="email"/>
       <Textfield id="phone" v-model="phone" type="tel" label="Téléphone :" autocomplete="tel"/>
     </Fieldset>
 
diff --git a/src/components/contributor/Newsletter.vue b/src/components/contributor/Newsletter.vue
index 65962dc..1e9f21e 100644
--- a/src/components/contributor/Newsletter.vue
+++ b/src/components/contributor/Newsletter.vue
@@ -1,10 +1,12 @@
 <template>
   <form @submit.prevent="submitForm">
-    <span class="title">Rejoins ecoCode !</span>
-    <span class="subtitle">Rejoins-nous et contribue à faire du numérique un domaine plus durable.</span>
+    <div class="headings">
+      <h2 class="heading-2">Rejoins ecoCode !</h2>
+      <h3 class="heading-3">Rejoins-nous et contribue à faire du numérique un domaine plus durable.</h3>
+    </div>
 
     <div class="text-field">
-      <Textfield id="email" v-model="email" type="email" label="E-mail * :" autocomplete="email" centered/>
+      <Textfield id="email" v-model="email" type="email" label="E-mail * :" required autocomplete="email" centered/>
     </div>
 
     <div style="margin-top: 15px;">
@@ -70,7 +72,7 @@ const submitForm = async () => {
 
 function getCaptcha(response: any) {
   captcha.value = response;
-};
+}
 
 let email = ref("");
 let captcha = ref("");
@@ -89,30 +91,10 @@ form {
     background-color: #f3f3f3;
 }
 
-.title {
-    max-width: 1089px;
-    font-size: 40px;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.25;
-    letter-spacing: normal;
-    text-align: center;
-    color: #355086;
-    padding: 0px 0 0 0;
-}
-
-.subtitle {
-    font-size: 32px;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.56;
-    letter-spacing: normal;
-    text-align: center;
-    color: #57c18b;
-    padding: 53px 0 0 0;
-    max-width: 779px;
+.headings {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
 }
 
 .text-field {
@@ -131,29 +113,7 @@ form {
   margin-top: 1rem;
 }
 
-@media screen and (max-width: 1150px) {
-  .title {
-    margin: 0 36px 0 36px;
-    font-size: 32px;
-  }
-
-  .subtitle {
-    margin: 0 36px 0 36px;
-    font-size: 25px;
-  }
-}
-
 @media screen and (max-width: 768px) {
-  .title {
-    margin: 0 36px 0 36px;
-    font-size: 28px;
-  }
-
-  .subtitle {
-    margin: 0 36px 0 36px;
-    font-size: 20px;
-  }
-
   .join-us {
     flex-direction: column;
     padding: 25px 25px 0;
diff --git a/src/components/global/BoxInfo.vue b/src/components/global/BoxInfo.vue
index 8d20a0d..390f4a1 100644
--- a/src/components/global/BoxInfo.vue
+++ b/src/components/global/BoxInfo.vue
@@ -1,36 +1,20 @@
+<script setup lang="ts">
+defineProps<{ title: string; text: string }>();
+</script>
+
 <template>
-    <div class="container-block">
-        <h3 class="title">{{ title }}</h3>
-        <div class="container">
-            <div class="container-text">{{ text }}</div>
-        </div>
+  <div class="container-block">
+    <h3 class="heading-3">{{ title }}</h3>
+    <div class="container">
+      <div class="container-text">{{ text }}</div>
     </div>
+  </div>
 </template>
-  
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed } from "vue";
-import { useRoute } from 'vue-router';
-
-
-const props = defineProps({
-    title: String,
-    text: String,
-});
-</script>
-  
-  
 
 <style lang="scss" scoped>
-.title {
-    font-size: 25px;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    text-align: center;
-    color: #57c18b;
-    text-transform: uppercase;
+.heading-3 {
+  font-size: 1.5rem;
+  text-transform: uppercase;
 }
 
 .right {
diff --git a/src/components/global/ProcessRule.vue b/src/components/global/ProcessRule.vue
index 368799f..8ba3d44 100644
--- a/src/components/global/ProcessRule.vue
+++ b/src/components/global/ProcessRule.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container-block">
-    <h2 class="title" :class="computedTitleClass">{{ title }}</h2>
+    <h3 class="heading-3" :class="computedTitleClass">{{ title }}</h3>
     <div class="container">
       <div :style="subtitleStyle" class="container-text">
         <a
@@ -90,15 +90,8 @@ if (props.title === "utilisation" || props.image) {
 </script>
 
 <style lang="scss" scoped>
-.title {
-  font-size: 25px;
-  font-weight: 900;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #57c18b;
+.heading-3 {
+  font-size: 1.5rem;
   text-transform: uppercase;
 }
 
diff --git a/src/components/home/ContactForm.vue b/src/components/home/ContactForm.vue
index eb9caea..7c05098 100644
--- a/src/components/home/ContactForm.vue
+++ b/src/components/home/ContactForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <h2 class="title">On discute d’ecoCode ?</h2>
+    <h2 class="heading-2">On discute d’ecoCode ?</h2>
 
     <form @submit.prevent="submitForm" aria-label="Formulaire de contact">
       <div class="form-field" role="radiogroup" aria-labelledby="i-am">
@@ -203,14 +203,6 @@ watch(type, (newValue) => {
   background-color: #f3f3f3;
 }
 
-.title {
-  font-size: 1.5rem;
-  font-weight: 900;
-  letter-spacing: normal;
-  text-align: center;
-  color: #355086;
-}
-
 form {
   display: flex;
   flex-direction: column;
@@ -271,10 +263,6 @@ input[type="radio"] {
 }
 
 @media (min-width: 768px) {
-  .title {
-    font-size: 2.5rem;
-  }
-
   form {
     width: 768px;
   }
diff --git a/src/components/home/RuleProcess.vue b/src/components/home/RuleProcess.vue
new file mode 100644
index 0000000..23552c0
--- /dev/null
+++ b/src/components/home/RuleProcess.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import ProcessRule from "@/components/global/ProcessRule.vue";
+import ButtonBlock from "@/components/global/Button.vue";
+</script>
+
+<template>
+  <div class="GraphRule">
+    <h2 class="heading-2">Le processus de création d'une règle ecoCode</h2>
+    <div class="container-rule">
+      <div class="top-graph">
+        <ProcessRule id="rule-1" titlePosition="right" position="right" title="identification"
+                     text="Nous identifions des patterns de code qui pourraient être améliorés (code smells)"/>
+        <ProcessRule id="rule-2" titlePosition="right" position="right" title="production"
+                     text="Les membres contributeurs produisent la règle permettant de réduire l’impact du code"/>
+        <ProcessRule id="rule-3" titlePosition="middle" position="bottom" title="expérimentation"
+                     text="La règle est testée en comparaison avec le code smell"/>
+      </div>
+      <div class="bottom-graph">
+        <ProcessRule id="rule-4" titlePosition="left" position="left" title="utilisation"
+                     text="Utilisation de la règle par des équipes techniques dans leur organisation"/>
+        <ProcessRule id="rule-5" titlePosition="left" position="left" title="intégration"
+                     text="La règle est publiée dans le référentiel Open Source d’ecoCode"/>
+        <ProcessRule id="rule-6" titlePosition="middle" position="null" title="validation"
+                     text="Une équipe expérimentée étudie et valide la nouvelle règle"/>
+      </div>
+    </div>
+    <span class="detail">Nous travaillons également sur des règles sur-mesure pour des organisations clientes</span>
+    <ButtonBlock typebutton="blue" link="/Entreprise" text="En savoir plus"/>
+  </div>
+</template>
+
+<style scoped>
+.GraphRule {
+    width: 100%;
+    min-height: 396px;
+    height: max-content;
+    background-color: #f3f3f3;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 50px 0;
+}
+
+.heading-2 {
+  max-width: none;
+}
+
+.container-rule {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 50px 0 0 0;
+}
+
+.top-graph {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+}
+
+.bottom-graph {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.detail {
+    max-width: 463px;
+    font-size: 22px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #022826;
+    text-align: center;
+    padding: 50px 0 50px 0;
+}
+
+@media screen and (max-width: 1150px) {
+    .container-rule {
+        flex-direction: column;
+    }
+
+    .top-graph {
+        flex-direction: column;
+    }
+
+    .bottom-graph {
+        flex-direction: column;
+    }
+
+    #rule-4 {
+        order: 3;
+    }
+
+    #rule-5 {
+        order: 2;
+    }
+
+    #rule-6 {
+        order: 1;
+    }
+    .detail{
+        font-size: 25px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .detail{
+        font-size: 20px;
+        padding-bottom: 0;
+    }
+}
+</style>
diff --git a/src/views/Accueil/Doc.vue b/src/views/Accueil/Doc.vue
index 63a37bc..1900137 100644
--- a/src/views/Accueil/Doc.vue
+++ b/src/views/Accueil/Doc.vue
@@ -120,9 +120,8 @@
 
 <script lang="ts" setup>
 import TitleBox from '@/components/global/Title.vue';
-import Header from '@/components/global/Header.vue';
 import ProcessRule from '@/components/global/ProcessRule.vue';
-import GraphRule from '@/components/Shared/GraphRule.vue';
+import GraphRule from '@/components/home/RuleProcess.vue';
 import GraphStep from '@/components/Shared/GraphStep.vue';
 import ButtonBlock from '@/components/global/Button.vue';
 import Boxinfo from '@/components/global/BoxInfo.vue';
diff --git a/src/views/Accueil/Home.vue b/src/views/Accueil/Home.vue
index 9991587..2ec3fda 100644
--- a/src/views/Accueil/Home.vue
+++ b/src/views/Accueil/Home.vue
@@ -1,12 +1,14 @@
 <template>
-    <TitleBox image="true" colorBackground="#355086" typetitle="full white"
-        title="Réduisons l'impact environnemental et social des solutions numériques"
-        subtitle="ecoCode est un outil Open Source basé sur un référentiel de règles d'éco-conception logicielle.">
-        <div style=" background-color: #57c18b; margin-top: 50px;" class="block-button-section-1">
-            <ButtonBlock typebutton="white" link="/contributeur" text="Je souhaite contribuer au projet"></ButtonBlock>
-            <ButtonBlock typebutton="white" link="/entreprise" text="Je souhaite une intégration sur-mesure"></ButtonBlock>
-        </div>
-    </TitleBox>
+  <TitleBox image="true" colorBackground="#355086" typetitle="full white"
+            title="Réduisons l'impact environnemental et social des solutions numériques"
+            subtitle="ecoCode est un outil Open Source basé sur un référentiel de règles d'éco-conception logicielle."
+            style="padding-bottom: 50px"/>
+
+  <div style="background-color: #57c18b;" class="block-button-section-1">
+    <ButtonBlock typebutton="white" link="/contributeur" text="Je souhaite contribuer au projet"/>
+    <ButtonBlock typebutton="white" link="/entreprise" text="Je souhaite une intégration sur-mesure"/>
+  </div>
+
     <TitleBox typetitle="title blue" title="ecoCode est une initiative qui prend racine dans la force du collectif"
         subtitle="Le numérique nous passionne et nous considérons qu’il est impératif de le rendre plus durable.">
         <div class="after-block-section-2">
@@ -28,7 +30,7 @@
             </div>
         </div>
     </TitleBox>
-    <GraphRule />
+    <RuleProcess />
     <TitleBox typetitle="title blue" title="ecoCode est rendu possible grâce aux nombreux acteurs impliqués"
         subtitle="Quelques structures partenaires :">
       <PartnerOrganizationList :featured="true" />
@@ -42,7 +44,7 @@
 
 <script setup lang="ts">
 import PartnerOrganizationList from '@/components/collective/PartnerOrganizationList.vue';
-import GraphRule from '@/components/Shared/GraphRule.vue';
+import RuleProcess from '@/components/home/RuleProcess.vue';
 import ButtonBlock from '@/components/global/Button.vue';
 import TitleBox from '@/components/global/Title.vue';
 import ContactForm from '@/components/home/ContactForm.vue';
diff --git a/src/views/Accueil/scss/style.scss b/src/views/Accueil/scss/style.scss
index a3c3e3b..642451a 100644
--- a/src/views/Accueil/scss/style.scss
+++ b/src/views/Accueil/scss/style.scss
@@ -1,6 +1,5 @@
 .block-button-section-1 {
     width: 100%;
-    height: max-content;
     min-height: 130px;
     display: flex;
     flex-direction: row;
diff --git a/src/views/Page/contributeur/contributeur.vue b/src/views/Page/contributeur/contributeur.vue
index f03f8cb..ce0216a 100644
--- a/src/views/Page/contributeur/contributeur.vue
+++ b/src/views/Page/contributeur/contributeur.vue
@@ -33,7 +33,10 @@ const scroll=() => {
                     libre...</li>
             </ul>
         </div>
-        <span class="titleSimple">Les technologies couvertes par ecoCode (en attendant d’aller plus loin !)</span>
+
+        <h3 class="heading-3" style="margin-top: 20px;max-width: none">
+          Les technologies couvertes par ecoCode (en attendant d’aller plus loin !)
+        </h3>
         <Technologies />
     </TitleBox>
     <GraphStep />
diff --git a/src/views/Page/contributeur/scss/style.scss b/src/views/Page/contributeur/scss/style.scss
index ca0fab1..871e60e 100644
--- a/src/views/Page/contributeur/scss/style.scss
+++ b/src/views/Page/contributeur/scss/style.scss
@@ -29,25 +29,7 @@ li>img {
     margin-right: 20px;
 }
 
-.titleSimple {
-    font-size: 32px;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.56;
-    letter-spacing: normal;
-    text-align: center;
-    color: #57c18b;
-    padding: 20px 0 0 0;
-}
-
 @media screen and (max-width: 1150px) {
-    .titleSimple {
-        width: 80%;
-        padding: 0 50px 0 50px;
-
-    }
-
     .container-title {
         text-align: center;
 
@@ -63,20 +45,7 @@ li>img {
     }
 }
 
-@media screen and (max-width: 768px) {
-    .titleSimple {
-        margin: 0 36px 0 36px;
-        font-size: 25px;
-    }
-}
-
 @media screen and (max-width: 425px) {
-    .titleSimple {
-        margin: 0 10px 0 10px;
-        font-size: 25px;
-        padding: 0 0 0 0;
-    }
-
     .container-title, .container-list > ul {
        margin: 0 20px 0 20px;
     }