diff --git a/src/assets/icons/chevrons.svg b/src/assets/icons/chevrons.svg
new file mode 100644
index 0000000..ba178a4
--- /dev/null
+++ b/src/assets/icons/chevrons.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m9 18-6-6 6-6"/><path d="m15 18 6-6-6-6"/></svg>
diff --git a/src/assets/img/icon/arrow-dev.webp b/src/assets/img/icon/arrow-dev.webp
deleted file mode 100755
index 840c72b..0000000
Binary files a/src/assets/img/icon/arrow-dev.webp and /dev/null differ
diff --git a/src/assets/img/icon/arrow-left-white.webp b/src/assets/img/icon/arrow-left-white.webp
deleted file mode 100755
index b720ac5..0000000
Binary files a/src/assets/img/icon/arrow-left-white.webp and /dev/null differ
diff --git a/src/assets/img/icon/arrow-right-white.webp b/src/assets/img/icon/arrow-right-white.webp
deleted file mode 100755
index 57bbb5f..0000000
Binary files a/src/assets/img/icon/arrow-right-white.webp and /dev/null differ
diff --git a/src/assets/img/icon/icon-linkedIn.png b/src/assets/img/icon/icon-linkedIn.png
deleted file mode 100755
index a465b98..0000000
Binary files a/src/assets/img/icon/icon-linkedIn.png and /dev/null differ
diff --git a/src/components/contributor/ContributorProfiles.vue b/src/components/contributor/ContributorProfiles.vue
new file mode 100644
index 0000000..5de2278
--- /dev/null
+++ b/src/components/contributor/ContributorProfiles.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="contributor-profiles">
+    <span class="heading">Les profils des contributrices et contributeurs :</span>
+    <ul>
+      <li>Salariées et salariés en poste avec un temps dédié par leur organisation sur ecoCode </li>
+      <li>Indépendantes et indépendants pour une contribution bénévole à l'Open Source</li>
+      <li>Salariées et salariés sur leur temps libre...</li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.contributor-profiles {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 1rem;
+  border-radius: 1rem;
+  margin: 2rem 1rem;
+
+  .heading {
+    font-size: 1.3rem;
+    font-weight: 900;
+    color: var(--color-on-surface);
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    list-style: none;
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    li:before {
+      content: " ";
+      display: inline-block;
+      width: 1.5rem;
+      height: 1.5rem;
+      flex-shrink: 0;
+      background-image: url(@/assets/icons/chevrons.svg);
+    }
+  }
+}
+</style>
diff --git a/src/views/Page/contributeur/contributeur.vue b/src/views/Page/contributeur/contributeur.vue
index ce0216a..8cf90eb 100644
--- a/src/views/Page/contributeur/contributeur.vue
+++ b/src/views/Page/contributeur/contributeur.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import ContributorProfiles from '@/components/contributor/ContributorProfiles.vue';
 import Technologies from '@/components/contributor/Technologies.vue';
 import TitleBox from '@/components/global/Title.vue';
-import ButtonBlock from '@/components/global/Button.vue';
+import AppButton from '@/components/global/Button.vue';
 import Newsletter from '@/components/contributor/Newsletter.vue';
 import GraphStep from '@/components/Shared/GraphStep.vue';
 
@@ -16,33 +17,16 @@ const scroll=() => {
 <template>
     <TitleBox colorBackground="#57c18b" typetitle="full white" title="Tu te soucies de réduire l'impact environnemental et social des solutions numériques ?"
         subtitle="Rejoins ecoCode et contribue à faire du numérique un domaine plus durable.">
-        <div style=" background-color: #57c18b;" class="block-button-section-1">
-            <ButtonBlock @click="scroll()" style="padding-bottom: 50px;" typebutton="white" link="#newsletter" text="Je rejoins la communauté"></ButtonBlock>
-        </div>
+        <AppButton @click="scroll()" style="padding-bottom: 50px;" typebutton="white" link="#newsletter" text="Je rejoins la communauté" />
     </TitleBox>
     <TitleBox typetitle="blue black light" title="ecoCode est un projet qui tire sa force du collectif">
-        <div class="container-list">
-            <span class="container-title">Les profils des contributrices et contributeurs :</span>
-            <ul>
-                <li><img width="24" height="24" src="@/assets/img/icon/arrow-dev.webp">Salariées et salariés en poste avec
-                    un temps dédié par leur organisation sur ecoCode </li>
-                <li><img width="24" height="24" src="@/assets/img/icon/arrow-dev.webp">Indépendantes et indépendants pour
-                    une contribution bénévole à l'Open Source
-                </li>
-                <li><img width="24" height="24" src="@/assets/img/icon/arrow-dev.webp">Salariées et salariés sur leur temps
-                    libre...</li>
-            </ul>
-        </div>
+      <ContributorProfiles />
 
-        <h3 class="heading-3" style="margin-top: 20px;max-width: none">
-          Les technologies couvertes par ecoCode (en attendant d’aller plus loin !)
-        </h3>
-        <Technologies />
+      <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 />
     <Newsletter id="newsletter" />
 </template>
-
-<style lang="scss" scoped>
-@import './scss/style.scss';
-</style>
diff --git a/src/views/Page/contributeur/scss/style.scss b/src/views/Page/contributeur/scss/style.scss
deleted file mode 100644
index 871e60e..0000000
--- a/src/views/Page/contributeur/scss/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.container-list {
-    max-width: 1084px;
-    padding: 35px 0 0 0;
-}
-
-.container-title {
-    font-size: 22px;
-    font-weight: 900;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    color: #022826;
-}
-
-.container-list>ul {
-    list-style-type: none;
-}
-
-ul>li {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    margin: 15px 0;
-}
-
-li>img {
-    margin-right: 20px;
-}
-
-@media screen and (max-width: 1150px) {
-    .container-title {
-        text-align: center;
-
-    }
-
-    .container-list {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 35px 0 35px 0;
-    }
-}
-
-@media screen and (max-width: 425px) {
-    .container-title, .container-list > ul {
-       margin: 0 20px 0 20px;
-    }
-}
-