diff --git a/app.vue b/app.vue
index 7f4916e..e15719a 100644
--- a/app.vue
+++ b/app.vue
@@ -40,7 +40,6 @@
             / 100%;
         place-content: start center;
         place-items: center center;
-        row-gap: 4rem;
     
         &__main {
             grid-area: app-main;
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index b34ec33..22af9af 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -18,7 +18,7 @@
     --black-font-weight: 900;
     --h1-font-size: 2rem;
     --h2-font-size: 2rem;
-    --h3-font-size: 1.8rem;
+    --h3-font-size: 1.4rem;
     --button-font-size: 1.4rem;
     --text-font-size: 1.2rem;
     --caption-font-size: 1.1rem;
@@ -35,9 +35,10 @@
 
     // Dimensions
 
-    --regular-content-max-width: Min(100%, 80rem);
-    --small-content-max-width: Min(100%, 60rem);
+    --section-max-width: Min(100%, 80rem);
+    --content-max-width: Min(100%, 60rem);
     --regular-icon-size: 2rem;
+    --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
     --small-icon-size: calc(var(--text-font-size) * var(--line-height));
     --button-gap: 0.5rem;
 
@@ -45,18 +46,18 @@
     // Colors
 
     --eerie-black: #212121;
-    --sonic-silver: #7a7a7a;
-    --silver: #C2C2C2;
+    --gray: #7A7A7A;
+    --white-smoke: #F5F5F5;
     --emerald: #72C080;
     --granny-smith-apple: #A3F3B0;
     --middle-green: #428F53;
     --rajah: #F9B262;
 
     --primary-color: var(--eerie-black);
-    --primary-color-light: var(--sonic-silver);
+    --primary-color-light: var(--gray);
     --primary-color-dark: black;
     --secondary-color: white;
-    --secondary-color-dark: var(--silver);
+    --secondary-color-dark: var(--white-smoke);
     --accent-color: var(--emerald);
     --accent-color-light: var(--granny-smith-apple);
     --accent-color-dark: var(--middle-green);
@@ -106,8 +107,9 @@ h2 {
 }
 
 h3 {
-    font-family: var(--text-font-family);
+    font-family: var(--title-font-family);
     font-size: var(--h3-font-size);
+    font-weight: var(--medium-font-weight);
 }
 
 p {
@@ -145,6 +147,14 @@ a {
     }
 }
 
+// --------------------------------------------------
+// LIST STYLE
+// --------------------------------------------------
+
+ul {
+    list-style: disc outside;
+}
+
 // --------------------------------------------------
 // BUTTON STYLE
 // --------------------------------------------------
@@ -276,6 +286,28 @@ form {
     }
 }
 
+// --------------------------------------------------
+// SECTION STYLE
+// --------------------------------------------------
+
+section {
+    max-width: var(--section-max-width);
+    padding: 4rem 2rem;
+
+    @media screen and (min-width: $tablet-media-query) {
+            padding: 4rem;
+        }
+
+    @media screen and (min-width: $desktop-media-query) {
+        padding: 6rem;
+    }
+}
+
+@mixin hero-section {
+    max-width: unset;
+    width: 100%;
+}
+
 // --------------------------------------------------
 // SMOOTH SCROLLING
 // --------------------------------------------------
diff --git a/components/AppError.vue b/components/AppError.vue
index 1b9666e..dce585a 100644
--- a/components/AppError.vue
+++ b/components/AppError.vue
@@ -61,11 +61,10 @@
 
     main {
         width: 100%;
-        padding: 0 2rem;
     }
 
     .error {
-        width: 100%;
+        @include hero-section;
         display: grid;
         grid:
             'title' minmax(var(--h1-font-height), auto)
diff --git a/components/ContactForm.vue b/components/ContactForm.vue
index 5752f55..4b33355 100644
--- a/components/ContactForm.vue
+++ b/components/ContactForm.vue
@@ -104,7 +104,7 @@
     // --------------------------------------------------
 
     .contact-form {
-        max-width: var(--small-content-max-width);
+        max-width: var(--content-max-width);
         display: grid;
         grid:
             'name name' auto
diff --git a/components/ContactHeader.vue b/components/ContactHeader.vue
index a9971af..7dd9401 100644
--- a/components/ContactHeader.vue
+++ b/components/ContactHeader.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <section class="contact-header">
+    <div class="contact-header">
         <h2 class="contact-header__title">
             <div></div>
             <div>Contact</div>
@@ -30,7 +30,7 @@
                 </svg>
             </a>
         </div>
-    </section>
+    </div>
 
 </template>
 
@@ -44,7 +44,7 @@
     // --------------------------------------------------
 
     .contact-header {
-        max-width: var(--small-content-max-width);
+        max-width: var(--content-max-width);
         display: grid;
         place-content: start;
         place-items: start;
diff --git a/components/ContactSection.vue b/components/ContactSection.vue
index 805187b..3a4fbbb 100644
--- a/components/ContactSection.vue
+++ b/components/ContactSection.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <section id="contact" class="contact">
+    <section class="contact">
         <ContactHeader class="contact__header" />
         <ContactForm class="contact__form" />
     </section>
@@ -17,7 +17,6 @@
     // --------------------------------------------------
 
     .contact {
-        max-width: var(--regular-content-max-width);
         display: grid;
         grid:
             'header' auto
diff --git a/components/HeroArrowDown.vue b/components/HeroArrowDown.vue
index 2c601d8..e2e26fa 100644
--- a/components/HeroArrowDown.vue
+++ b/components/HeroArrowDown.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <a class="hero-arrow-down" tabindex="-1" aria-hidden="true" href="#contact" target="_self">
+    <a class="hero-arrow-down" tabindex="-1" aria-hidden="true" href="#services" target="_self">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
             <line x1="12" y1="5" x2="12" y2="19"></line>
             <polyline points="19 12 12 19 5 12"></polyline>
@@ -19,8 +19,8 @@
     // --------------------------------------------------
 
     .hero-arrow-down {
-        width: calc(var(--regular-icon-size) + 1rem);
-        height: calc(var(--regular-icon-size) + 1rem);
+        width: var(--regular-icon-wrapper-size);
+        height: var(--regular-icon-wrapper-size);
         display: flex;
         justify-content: center;
         align-items: center;
diff --git a/components/HeroSection.vue b/components/HeroSection.vue
index 6a5aa71..5100a5e 100644
--- a/components/HeroSection.vue
+++ b/components/HeroSection.vue
@@ -54,7 +54,7 @@
     // --------------------------------------------------
 
     .hero {
-        width: 100%;
+        @include hero-section;
         height: 100vh;
         height: 100svh;
         display: grid;
@@ -62,8 +62,7 @@
             '.' 1fr
             'title' auto
             '.' minmax(6rem, 1fr)
-            'arrow-down' auto
-            '.' 2rem
+            'arrow-down' var(--regular-icon-wrapper-size)
             / 100%;
         place-content: center;
         place-items: center;
diff --git a/components/ServicesSection.vue b/components/ServicesSection.vue
new file mode 100644
index 0000000..10af2c3
--- /dev/null
+++ b/components/ServicesSection.vue
@@ -0,0 +1,132 @@
+<template>
+
+    <div class="services-wrapper">
+        <section id="services" class="services">
+            <div class="services__illustration">
+                <svg viewBox="0 0 1139.17088 654.54324" xmlns="http://www.w3.org/2000/svg">
+                    <g>
+                        <rect x="586.171" y="32.543" width="255" height="2" fill="var(--primary-color)"/>
+                        <rect x="796" y="22" width="28" height="28" fill="var(--error-color)"/>
+                        <path d="M 841 34 L 807 34 L 807 0 L 841 0 L 841 34 Z M 808.478 32.522 L 839.522 32.522 L 839.522 1.478 L 808.478 1.478 L 808.478 32.522 Z" fill="var(--primary-color)"/>
+                        <rect x="304.171" y="447.543" width="733" height="2" fill="var(--primary-color)"/>
+                        <circle cx="246.827" cy="521.765" r="59.243" fill="var(--secondary-color-dark)"/>
+                        <circle cx="256.46" cy="513.095" r="59.243" fill="var(--error-color)"/>
+                        <path d="M 320.171 654.543 C 253.199 654.543 211.341 582.043 244.827 524.043 C 278.313 466.043 362.029 466.043 395.516 524.043 C 403.151 537.269 407.171 552.272 407.171 567.543 C 407.117 615.569 368.198 654.489 320.171 654.543 Z M 320.171 482.543 C 254.738 482.543 213.843 553.377 246.559 610.043 C 279.276 666.71 361.067 666.71 393.784 610.043 C 401.244 597.122 405.171 582.464 405.171 567.543 C 405.118 520.621 367.094 482.596 320.171 482.543 Z" fill="var(--primary-color)"/>
+                        <rect x="192.672" y="652.543" width="255" height="2" fill="var(--primary-color)"/>
+                        <rect x="406.171" y="560.543" width="733" height="2" fill="var(--primary-color)"/>
+                        <rect x="471" y="550" width="28" height="28" fill="var(--error-color)"/>
+                        <rect x="1078" y="550" width="28" height="28" fill="var(--error-color)"/>
+                        <path d="M 516 562 L 482 562 L 482 528 L 516 528 L 516 562 Z M 483.478 560.522 L 514.522 560.522 L 514.522 529.478 L 483.478 529.478 L 483.478 560.522 Z" fill="var(--primary-color)"/>
+                        <path d="M 1123 562 L 1089 562 L 1089 528 L 1123 528 L 1123 562 Z M 1090.478 560.522 L 1121.522 560.522 L 1121.522 529.478 L 1090.478 529.478 L 1090.478 560.522 Z" fill="var(--primary-color)"/>
+                    </g>
+                    <g>
+                        <path d="M 683.793 18.652 L 423.623 18.652 L 423.623 13.29 L 305.652 13.29 L 305.652 18.652 L 44.41 18.652 C 34.691 18.652 26.812 26.531 26.812 36.251 L 26.812 392.503 C 26.812 402.222 34.691 410.101 44.41 410.101 L 683.793 410.101 C 693.512 410.101 701.391 402.222 701.391 392.503 L 701.391 36.251 C 701.391 26.531 693.512 18.652 683.793 18.652 Z" fill="var(--primary-color)"/>
+                        <rect x="50.406" y="49.754" width="627.391" height="353.913" fill="var(--accent-color)"/>
+                        <polygon points="498.374 403.667 50.406 403.667 50.406 49.754 498.374 403.667" opacity="0.1"/>
+                        <circle cx="363.565" cy="33.667" r="6.435" fill="var(--accent-color)"/>
+                        <rect x="614.917" y="56.934" width="24.492" height="24.492" fill="var(--secondary-color-dark)"/>
+                        <path d="M 650.78 92.797 L 621.04 92.797 L 621.04 63.057 L 650.78 63.057 L 650.78 92.797 Z M 622.333 91.504 L 649.487 91.504 L 649.487 64.35 L 622.333 64.35 L 622.333 91.504 Z" fill="var(--primary-color)"/>
+                        <circle cx="148.574" cy="316.876" r="60.307" fill="var(--secondary-color-dark)"/>
+                        <path d="M 163.171 354.543 C 104.667 354.543 68.101 291.21 97.353 240.543 C 126.606 189.877 199.737 189.877 228.989 240.543 C 235.66 252.097 239.171 265.202 239.171 278.543 C 239.124 320.497 205.125 354.496 163.171 354.543 Z M 163.171 204.543 C 106.206 204.543 70.603 266.21 99.085 315.543 C 127.568 364.877 198.775 364.877 227.257 315.543 C 233.752 304.294 237.171 291.533 237.171 278.543 C 237.125 237.693 204.021 204.589 163.171 204.543 Z" fill="var(--primary-color)"/>
+                        <rect x="439.102" y="145.279" width="200.307" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="439.102" y="161.898" width="200.307" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="439.102" y="178.518" width="200.307" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="439.102" y="195.137" width="200.307" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="439.102" y="211.757" width="200.307" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="509.953" y="240.622" width="58.605" height="12.246" fill="var(--primary-color)"/>
+                        <path d="M 719.007 397.232 L 657.778 397.232 L 657.778 392.82 C 657.778 392.337 657.386 391.946 656.903 391.946 L 635.91 391.946 C 635.427 391.946 635.035 392.337 635.035 392.82 L 635.035 397.232 L 621.915 397.232 L 621.915 392.82 C 621.915 392.337 621.523 391.946 621.04 391.946 L 600.047 391.946 C 599.564 391.946 599.173 392.337 599.173 392.82 L 599.173 397.232 L 586.052 397.232 L 586.052 392.82 C 586.052 392.337 585.66 391.946 585.177 391.946 L 564.184 391.946 C 563.701 391.946 563.31 392.337 563.31 392.82 L 563.31 397.232 L 550.189 397.232 L 550.189 392.82 C 550.189 392.337 549.798 391.946 549.314 391.946 L 528.322 391.946 C 527.838 391.946 527.447 392.337 527.447 392.82 L 527.447 397.232 L 514.326 397.232 L 514.326 392.82 C 514.326 392.337 513.935 391.946 513.452 391.946 L 492.459 391.946 C 491.976 391.946 491.584 392.337 491.584 392.82 L 491.584 397.232 L 478.463 397.232 L 478.463 392.82 C 478.463 392.337 478.072 391.946 477.589 391.946 L 456.596 391.946 C 456.113 391.946 455.721 392.337 455.721 392.82 L 455.721 397.232 L 442.6 397.232 L 442.6 392.82 C 442.6 392.337 442.209 391.946 441.726 391.946 L 277.281 391.946 C 276.798 391.946 276.407 392.337 276.407 392.82 L 276.407 397.232 L 263.286 397.232 L 263.286 392.82 C 263.286 392.337 262.894 391.946 262.411 391.946 L 241.418 391.946 C 240.935 391.946 240.544 392.337 240.544 392.82 L 240.544 397.232 L 227.423 397.232 L 227.423 392.82 C 227.423 392.337 227.032 391.946 226.548 391.946 L 205.556 391.946 C 205.072 391.946 204.681 392.337 204.681 392.82 L 204.681 397.232 L 191.56 397.232 L 191.56 392.82 C 191.56 392.337 191.169 391.946 190.686 391.946 L 169.693 391.946 C 169.21 391.946 168.818 392.337 168.818 392.82 L 168.818 397.232 L 155.697 397.232 L 155.697 392.82 C 155.697 392.337 155.306 391.946 154.823 391.946 L 133.83 391.946 C 133.347 391.946 132.955 392.337 132.955 392.82 L 132.955 397.232 L 119.835 397.232 L 119.835 392.82 C 119.835 392.337 119.443 391.946 118.96 391.946 L 97.967 391.946 C 97.484 391.946 97.092 392.337 97.092 392.82 L 97.092 397.232 L 83.972 397.232 L 83.972 392.82 C 83.972 392.337 83.58 391.946 83.097 391.946 L 62.104 391.946 C 61.621 391.946 61.229 392.337 61.229 392.82 L 61.229 397.232 L 20.993 397.232 C 9.399 397.232 0 406.631 0 418.225 L 0 427.717 C 0 439.311 9.399 448.71 20.993 448.71 L 719.007 448.71 C 730.601 448.71 740 439.311 740 427.717 L 740 418.225 C 740 406.631 730.601 397.232 719.007 397.232 Z" fill="var(--primary-color)"/>
+                    </g>
+                    <g>
+                        <path d="M 1057.171 231.958 L 1054.793 231.958 L 1054.793 166.797 C 1054.793 145.968 1037.908 129.083 1017.079 129.083 L 879.025 129.083 C 858.197 129.083 841.312 145.968 841.312 166.797 L 841.312 524.278 C 841.312 545.107 858.197 561.992 879.025 561.992 L 1017.079 561.992 C 1037.908 561.992 1054.793 545.107 1054.793 524.278 L 1054.793 278.341 L 1057.171 278.341 L 1057.171 231.958 Z" fill="var(--primary-color)"/>
+                        <path d="M 1046.761 169.013 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 169.013 C 851.723 153.462 864.33 140.855 879.881 140.853 L 896.711 140.853 C 893.124 149.653 899.598 159.284 909.101 159.283 L 988.191 159.283 C 997.695 159.284 1004.169 149.653 1000.581 140.853 L 1018.601 140.853 C 1034.153 140.855 1046.76 153.462 1046.761 169.013 Z" fill="var(--accent-color)"/>
+                        <path d="M 1046.761 487.853 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 333.763 L 968.591 426.093 L 970.591 427.673 L 992.331 444.843 L 994.361 446.453 L 1046.761 487.853 Z" opacity="0.1"/>
+                        <rect x="929.684" y="211.179" width="24.492" height="24.492" fill="var(--secondary-color-dark)"/>
+                        <path d="M 939.059 217.303 L 939.059 247.043 L 968.799 247.043 L 968.799 217.303 L 939.059 217.303 Z M 967.509 245.753 L 940.349 245.753 L 940.349 218.593 L 967.509 218.593 L 967.509 245.753 Z" fill="var(--primary-color)"/>
+                        <circle cx="937.241" cy="498.707" r="43.868" fill="var(--secondary-color-dark)"/>
+                        <path d="M 950.171 532.543 C 907.832 532.543 881.37 486.71 902.54 450.043 C 923.709 413.377 976.633 413.377 997.803 450.043 C 1002.63 458.404 1005.171 467.889 1005.171 477.543 C 1005.137 507.905 980.533 532.509 950.171 532.543 Z M 950.171 424.543 C 909.372 424.543 883.872 468.71 904.272 504.043 C 924.672 539.377 975.671 539.377 996.071 504.043 C 1000.722 495.986 1003.171 486.847 1003.171 477.543 C 1003.139 448.286 979.429 424.576 950.171 424.543 Z" fill="var(--primary-color)"/>
+                        <rect x="878.621" y="280.875" width="141.24" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="878.621" y="297.494" width="141.24" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="878.621" y="314.114" width="141.24" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="878.621" y="330.733" width="141.24" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="878.621" y="347.352" width="141.24" height="5.248" fill="var(--primary-color)"/>
+                        <rect x="928.58" y="376.218" width="41.324" height="12.246" fill="var(--primary-color)"/>
+                    </g>
+                </svg>
+            </div>
+            <h2 class="services__title">Prestations</h2>
+            <ul class="services__list">
+                <li><h3>Intégration web et développement front-end</h3>
+                    <p>Retranscription fidèle de maquettes dans le respect des standards W3C et de la charte graphique définie par votre agence.</p>
+                </li>
+                <li><h3>Conception de site internet sur mesure</h3>
+                    <p>Accompagnement de votre entreprise ou association dans la création ou la refonte de son site vitrine ou e-commerce.</p>
+                </li>
+            </ul>
+        </section>
+    </div>
+
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // STYLE
+    // --------------------------------------------------
+
+    .services-wrapper {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        color: var(--primary-color);
+        background-image: var(--button-gradient);
+        background-size: 100%;
+    }
+
+    .services {
+        display: grid;
+        grid:
+            'illustration' auto
+            'title' auto
+            'list' auto
+            / 1fr;
+        place-content: start center;
+        place-items: start center;
+        gap: 2rem;
+
+        &__illustration {
+            grid-area: illustration;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+
+            svg {
+                max-width: 35rem;
+                height: auto;
+            }
+        }
+
+        &__title {
+            grid-area: title;
+            place-self: start;
+        }
+
+        &__list {
+            grid-area: list;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        @media screen and (min-width: $tablet-media-query) {
+
+            &__list {
+                flex-direction: row;
+                gap: 4rem;
+            }
+        }
+    }
+
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 6b88eb9..4c0b091 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,7 @@
 
     <main>
         <HeroSection class="hero-section" />
+        <ServicesSection class="services-section" />
         <ContactSection class="contact-section" />
     </main>
 
@@ -27,31 +28,26 @@
 
     main {
         width: 100%;
-        padding: 0 2rem;
         display: grid;
         grid:
             'hero-section' auto
+            'services-section' auto
             'contact-section' auto
             / 1fr;
         place-content: start center;
         place-items: start center;
-        row-gap: 4rem;
 
         .hero-section {
             grid-area: hero-section;
         }
 
+        .services-section {
+            grid-area: services-section;
+        }
+
         .contact-section {
             grid-area: contact-section;
         }
-
-        @media screen and (min-width: $tablet-media-query) {
-            padding: 0 4rem;
-        }
-
-        @media screen and (min-width: $desktop-media-query) {
-            padding: 0 6rem;
-        }
     }
 
 </style>