diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index 0b50d93e3869c66bd30bca115cd864e056a13b16..fcbc5f03c5e46920a8341be5ae1983f8a269c5bd 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -1,26 +1,37 @@
 <div fxLayout="column" class="content-container full-screen">
   <div class="section-container">
-    <h1>Qui sommes-nous ?</h1>
-    <p>
-      La numérisation accélérée des différents services privés et publics ainsi que la crise sanitaire que nous
-      traversons a renforcé une fracture numérique déjà forte pour un nombre important de citoyens.
-    </p>
-    <p>
-      Au printemps 2019, la Métropole de Lyon s'est saisie des enjeux autour de l'inclusion numérique en initiant la
-      structuration d'un réseau des acteurs de la médiation numérique sur son territoire. Son objectif est de mettre en
-      relation les acteurs qui œuvrent au quotidien pour limiter cette fracture numérique, nombreux sur le territoire de
-      la Métropole : associations, centres sociaux, structures informations jeunesses, grands opérateurs de services
-      publics, collectivités...
-    </p>
-    <p>
-      Des ateliers de travail ont été organisés en 2019 pour identifier les besoins de ces acteurs et 9 offres de
-      services ont été identifiées :
-    </p>
-    <img src="/assets/img/about_illustration.png" alt="illustration des besoins" />
-    <p>
-      Cet espace vise à centraliser et mettre en commun les ressources développées dans le cadre du réseau par ses
-      acteurs.
-    </p>
-    <p>N'hésitez pas à contribuer à cet espace en partageant vos ressources</p>
+    <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="left" fxLayoutGap="5%">
+      <div class="about-container">
+        <h1>Qui sommes-nous ?</h1>
+        <p>
+          La numérisation accélérée des différents services privés et publics ainsi que la crise sanitaire que nous
+          traversons a renforcé une fracture numérique déjà forte pour un nombre important de citoyens.
+        </p>
+        <p>
+          Au printemps 2019, la Métropole de Lyon s'est saisie des enjeux autour de l'inclusion numérique en initiant la
+          structuration d'un réseau des acteurs de la médiation numérique sur son territoire. Son objectif est de mettre
+          en relation les acteurs qui œuvrent au quotidien pour limiter cette fracture numérique, nombreux sur le
+          territoire de la Métropole : associations, centres sociaux, structures informations jeunesses, grands
+          opérateurs de services publics, collectivités...
+        </p>
+        <p>
+          Des ateliers de travail ont été organisés en 2019 pour identifier les besoins de ces acteurs et 9 offres de
+          services ont été identifiées :
+        </p>
+        <h2>Recenser et partager des ressources existantes (optimisation)</h2>
+        <img src="/assets/img/about_illustration_1.jpg" alt="illustration des besoins" />
+        <h2>Co-construire de nouvelles ressources (développement)</h2>
+        <img src="/assets/img/about_illustration_2.jpg" alt="illustration des besoins" />
+        <p>
+          Cet espace vise à centraliser et mettre en commun les ressources développées dans le cadre du réseau par ses
+          acteurs.
+        </p>
+        <p>N'hésitez pas à contribuer à cet espace en partageant vos ressources</p>
+      </div>
+      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px">
+        <img src="/assets/logos/logo_europe.png" alt="logo de l'union européenne" />
+        <img src="/assets/logos/logo_region.png" alt="logo de la région Auverge-Rhône-Alpes" />
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index e077716b4eae2a1c6e04c6ade486ae11545c511d..08f1b70f14040182e176340db2ee075f95697129 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -1,3 +1,15 @@
+@import '../../assets/scss/color';
+@import '../../assets/scss/typography';
+
 .content-container {
   overflow: auto;
 }
+
+h2 {
+  @include cn-bold-16;
+  color: $red-default;
+}
+
+.about-container {
+  max-width: 760px;
+}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 37f14d8e986117989f54b7708fefed59d3bbd673..1008b4e01af58916b33decdb18da3caa89c2a926 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -302,13 +302,15 @@
 <g opacity="0.35" filter="url(#filter0_f)">
 <rect x="74.145" y="49.134" width="94.7677" height="60.8093" transform="rotate(-19.503 74.145 49.134)" fill="#348899"/>
 </g>
-<path d="M72.012 33.98C69.9322 34.3896 68.691 36.5394 69.3763 38.5454L95.4069 114.744C96.0855 116.73 98.3483 117.677 100.239 116.765L182.813 76.9455C184.422 76.1698 185.188 74.3077 184.592 72.6244L165.466 18.6229C164.886 16.9861 163.194 16.0218 161.49 16.3573L72.012 33.98Z" fill="#C9ECF3" stroke="#83B6C1" stroke-width="3"/>
-<path d="M72.2571 38.0604C70.0496 37.0427 70.4459 33.7921 72.8333 33.3347L161.294 16.3859C163.287 16.0041 164.88 18.0294 164.04 19.8761M72.2571 38.0604L164.04 19.8761M72.2571 38.0604L132.625 65.8898C137.408 68.0943 143.071 65.9885 145.25 61.195L164.04 19.8761M72.2571 38.0604L164.04 19.8761" fill="#EAF8FB" stroke="#83B6C1" stroke-width="3"/>
+<path d="M70.7961 38.0606C70.4045 36.9143 71.1137 35.6858 72.3022 35.4517L161.781 17.8291C162.754 17.6374 163.721 18.1884 164.052 19.1237L183.178 73.1252C183.519 74.0871 183.081 75.1512 182.162 75.5944L99.588 115.414C98.5074 115.935 97.2145 115.394 96.8267 114.259L70.7961 38.0606Z" fill="#C9ECF3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.7226 32.5083L161.201 14.8857C163.635 14.4063 166.052 15.7839 166.88 18.1221L186.006 72.1237C186.858 74.5283 185.763 77.1886 183.465 78.2967L100.891 118.116C98.1898 119.419 94.9573 118.067 93.9878 115.229L67.9572 39.0304C66.9782 36.1647 68.7513 33.0935 71.7226 32.5083ZM72.3023 35.4517C71.1138 35.6858 70.4045 36.9143 70.7961 38.0606L96.8267 114.259C97.2145 115.394 98.5075 115.935 99.588 115.414L182.162 75.5944C183.081 75.1512 183.519 74.0871 183.178 73.1252L164.052 19.1237C163.721 18.1884 162.754 17.6374 161.781 17.8291L72.3023 35.4517Z" fill="#83B6C1"/>
+<path d="M72.8854 36.6982C72.0024 36.2911 72.1609 34.9909 73.1159 34.8079L161.577 17.8591C162.374 17.7064 163.011 18.5165 162.675 19.2552L143.885 60.5741C142.05 64.6107 137.281 66.384 133.254 64.5276L72.8854 36.6982Z" fill="#EAF8FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8854 36.6982C72.0024 36.2911 72.1609 34.9909 73.1159 34.8079L161.577 17.8591C162.374 17.7064 163.011 18.5165 162.675 19.2552L143.885 60.5741C142.05 64.6107 137.281 66.384 133.254 64.5276L72.8854 36.6982ZM72.5513 31.8615L161.012 14.9127C164.2 14.3019 166.75 17.5423 165.406 20.4971L146.616 61.816C144.092 67.3663 137.535 69.8047 131.998 67.252L71.6294 39.4227C68.0974 37.7944 68.7316 32.5934 72.5513 31.8615Z" fill="#83B6C1"/>
 <path d="M63.4997 63L2.12107 78.1767" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
 <path d="M77.0343 97L36.1785 116.5" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
 <path d="M70.0344 80L48.5 88" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
 <defs>
-<filter id="filter0_f" x="62.145" y="5.49524" width="133.632" height="112.959" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_f" x="62.145" y="5.49527" width="133.632" height="112.959" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
@@ -341,4 +343,4 @@
 <path d="M8 13.8182L11.8889 17L18 10" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
 </symbol>
 
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/assets/img/about_illustration.png b/src/assets/img/about_illustration.png
deleted file mode 100644
index 6e9cfe47aa986fbfa52afa5308c2d0e92b532be3..0000000000000000000000000000000000000000
Binary files a/src/assets/img/about_illustration.png and /dev/null differ
diff --git a/src/assets/img/about_illustration_1.jpg b/src/assets/img/about_illustration_1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..33a703590c620c7311e236d1cfd60324a270beaa
Binary files /dev/null and b/src/assets/img/about_illustration_1.jpg differ
diff --git a/src/assets/img/about_illustration_2.jpg b/src/assets/img/about_illustration_2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..79faca4a6331a11cc93e8de5339dc754cd1a9e0e
Binary files /dev/null and b/src/assets/img/about_illustration_2.jpg differ
diff --git a/src/assets/logos/logo_europe.png b/src/assets/logos/logo_europe.png
new file mode 100644
index 0000000000000000000000000000000000000000..89d98cf3c5a0eb7480472af3d10bb04d82407894
Binary files /dev/null and b/src/assets/logos/logo_europe.png differ
diff --git a/src/assets/logos/logo_region.png b/src/assets/logos/logo_region.png
new file mode 100644
index 0000000000000000000000000000000000000000..5bf6812f6ae13d983d0566daa05153cbbdf65209
Binary files /dev/null and b/src/assets/logos/logo_region.png differ