diff --git a/settings/Head.ts b/settings/Head.ts
index 1b7f095..2195f00 100644
--- a/settings/Head.ts
+++ b/settings/Head.ts
@@ -3,12 +3,12 @@ import {NuxtOptionsHead} from "@nuxt/types/config/head";
 
 const params = {
   title: 'artsite',
-  color: '#0DA5FF',
+  color: '#00a0ff',
   image: '/images/image.jpg',
   url: 'https://arthurdanjou.fr',
   favicon: {
     type: 'image/jpg',
-    href: '/favicon.jpg',
+    href: '/favicon.png',
   },
   description:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
diff --git a/src/assets/images/memojies/Dev.png b/src/assets/images/memojies/Dev.png
new file mode 100644
index 0000000..3e52385
Binary files /dev/null and b/src/assets/images/memojies/Dev.png differ
diff --git a/src/assets/images/memojies/Fiesta.png b/src/assets/images/memojies/Fiesta.png
new file mode 100644
index 0000000..fe8acec
Binary files /dev/null and b/src/assets/images/memojies/Fiesta.png differ
diff --git a/src/assets/images/memojies/Hey.png b/src/assets/images/memojies/Hey.png
new file mode 100644
index 0000000..6d12347
Binary files /dev/null and b/src/assets/images/memojies/Hey.png differ
diff --git a/src/assets/images/socials/adonisjs.svg b/src/assets/images/socials/adonisjs.svg
deleted file mode 100644
index 161a5ba..0000000
--- a/src/assets/images/socials/adonisjs.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>AdonisJS icon</title><path d="M13.333 1.333l-.596 1.193-2.404 4.807L8 2.667l-8 16h4.667l-2 4H24zm0 2.982l8.51 17.018H4.823l1.334-2.666H16l-4.922-9.843Z"/></svg>
diff --git a/src/assets/images/socials/github-black.svg b/src/assets/images/socials/github-black.svg
new file mode 100644
index 0000000..57d980b
--- /dev/null
+++ b/src/assets/images/socials/github-black.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-140.699219 0-256 116.300781-256 257 0 139.882812 114.25 255 256 255 141.574219 0 256-114.945312 256-255 0-140.699219-115.300781-257-256-257zm45 477.5c-14.398438 3-29.699219 4.5-45 4.5s-30.601562-1.5-45-4.5v-70.199219c0-16.800781 4.5-22.800781 10.5-30.902343 3.054688-3.492188 4.898438-6.625 18.597656-27.296876l-23.097656-3.601562c-59.402344-8.699219-82.800781-39.601562-92.101562-63.601562-12-32.097657-5.699219-72.300782 15.902343-97.796876 3.300781-3.902343 6-10.503906 3.601563-17.402343-4.503906-13.800781-3.902344-35.699219-.902344-44.101563 15.90625 2.273438 32.261719 13.667969 45.902344 21.902344 6.285156 3.667969 9.582031 2.699219 12.597656 3 10.960938-2.28125 28.058594-7.800781 54.300781-7.800781 16.199219 0 33.300781 2.398437 50.101563 7.199219 3.003906-.070313 7.832031 2.484374 16.199218-2.398438 14.257813-8.6875 30.058594-19.691406 45.898438-21.902344 3 8.402344 3.601562 30.300782-.898438 44.101563-2.402343 6.898437.296876 13.5 3.601563 17.402343 21.597656 25.5 27.898437 65.699219 15.898437 97.796876-9.300781 24-32.699218 54.902343-92.101562 63.601562l-23.097656 3.601562c14.160156 21.367188 15.652344 23.929688 18.601562 27.296876 5.996094 8.101562 10.496094 14.101562 10.496094 30.902343zm30-8.699219v-61.5c0-17.101562-3.601562-28.5-8.402344-36.902343 45.601563-12.296876 78.003906-39.300782 92.402344-78 15.300781-40.796876 8.402344-89.398438-17.101562-123 4.503906-20.097657 4.503906-52.199219-6.296876-67.199219-4.800781-6.597657-11.402343-10.199219-19.800781-10.199219-.300781 0-.300781 0-.300781 0-23.261719 1.257812-41.570312 12.972656-61.199219 24.898438-18-4.800782-36.300781-7.199219-54.601562-7.199219-18.597657 0-37.199219 2.699219-53.695313 7.199219-20.664062-12.460938-38.796875-23.671876-62.703125-24.898438-7.5 0-14.101562 3.601562-18.902343 10.199219-10.796876 15-10.796876 47.101562-6.296876 67.199219-25.503906 33.601562-32.402343 82.5-17.101562 123 14.398438 38.699218 46.800781 65.703124 92.402344 78-3.722656 6.511718-6.667969 14.914062-7.828125 26.285156-9.210938 3.175781-17.199219 4.210937-24.628907 2.027344-7.835937-2.316407-13.941406-7.546876-19.246093-16.46875-11.914063-20.015626-32.207031-36.355469-55.3125-34.230469l2.636719 29.882812c10.699218-.980469 21.347656 10.339844 26.878906 19.671875 9.125 15.367188 21.417968 25.445313 36.546875 29.914063 11.230469 3.308593 21.496093 3.230469 32.550781.871093v40.449219c-87.300781-30.601562-151-114-151-211.800781 0-124.199219 101.800781-227 226-227s226 102.800781 226 227c0 97.800781-63.699219 181.199219-151 211.800781zm0 0"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/socials/github-white.svg b/src/assets/images/socials/github-white.svg
new file mode 100644
index 0000000..68f5ba1
--- /dev/null
+++ b/src/assets/images/socials/github-white.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M256,0C115.301,0 0,116.301 0,257C0,396.883 114.25,512 256,512C397.574,512 512,397.055 512,257C512,116.301 396.699,0 256,0ZM301,477.5C286.602,480.5 271.301,482 256,482C240.699,482 225.398,480.5 211,477.5L211,407.301C211,390.5 215.5,384.5 221.5,376.398C224.555,372.906 226.398,369.773 240.098,349.102L217,345.5C157.598,336.801 134.199,305.898 124.898,281.898C112.898,249.801 119.199,209.598 140.801,184.102C144.102,180.199 146.801,173.598 144.402,166.699C139.898,152.898 140.5,131 143.5,122.598C159.406,124.871 175.762,136.266 189.402,144.5C195.688,148.168 198.984,147.199 202,147.5C212.961,145.219 230.059,139.699 256.301,139.699C272.5,139.699 289.602,142.098 306.402,146.898C309.406,146.828 314.234,149.383 322.602,144.5C336.859,135.813 352.66,124.809 368.5,122.598C371.5,131 372.102,152.898 367.602,166.699C365.199,173.598 367.898,180.199 371.203,184.102C392.801,209.602 399.102,249.801 387.102,281.898C377.801,305.898 354.402,336.801 295,345.5L271.902,349.102C286.063,370.469 287.555,373.031 290.504,376.398C296.5,384.5 301,390.5 301,407.301L301,477.5ZM331,468.801L331,407.301C331,390.199 327.398,378.801 322.598,370.398C368.199,358.102 400.602,331.098 415,292.398C430.301,251.602 423.402,203 397.898,169.398C402.402,149.301 402.402,117.199 391.602,102.199C386.801,95.602 380.199,92 371.801,92L371.5,92C348.238,93.258 329.93,104.973 310.301,116.898C292.301,112.098 274,109.699 255.699,109.699C237.102,109.699 218.5,112.398 202.004,116.898C181.34,104.438 163.207,93.227 139.301,92C131.801,92 125.199,95.602 120.398,102.199C109.602,117.199 109.602,149.301 114.102,169.398C88.598,203 81.699,251.898 97,292.398C111.398,331.098 143.801,358.102 189.402,370.398C185.68,376.91 182.734,385.313 181.574,396.684C172.363,399.859 164.375,400.895 156.945,398.711C149.109,396.395 143.004,391.164 137.699,382.242C125.785,362.227 105.492,345.887 82.387,348.012L85.023,377.895C95.723,376.914 106.371,388.234 111.902,397.566C121.027,412.934 133.32,423.012 148.449,427.48C159.68,430.789 169.945,430.711 181,428.352L181,468.801C93.699,438.199 30,354.801 30,257C30,132.801 131.801,30 256,30C380.199,30 482,132.801 482,257C482,354.801 418.301,438.199 331,468.801Z" style="fill:white;fill-rule:nonzero;"/>
+</svg>
diff --git a/src/assets/images/socials/github.svg b/src/assets/images/socials/github.svg
deleted file mode 100644
index d820113..0000000
--- a/src/assets/images/socials/github.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-	 x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve">
-<path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4
-	c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4
-	c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3
-	c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47
-	c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3
-	c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4
-	C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"/>
-</svg>
diff --git a/src/components/Ad.vue b/src/components/Ad.vue
index 5a224be..05eac5e 100644
--- a/src/components/Ad.vue
+++ b/src/components/Ad.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-3xl p-12 text-center shadow-md" :class="getColor">
+  <div class="rounded-3xl p-2 lg:p-8 text-center shadow-md" :class="getColor">
     <slot />
   </div>
 </template>
diff --git a/src/components/AdHome.vue b/src/components/AdHome.vue
index 976a2dc..4256ff5 100644
--- a/src/components/AdHome.vue
+++ b/src/components/AdHome.vue
@@ -1,27 +1,33 @@
 <template>
   <section class="w-full my-12">
-    <div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around">
-      <nuxt-link to="/uses" class="h-48 md:w-1/3">
-        <Ad color="rose" class="h-full w-full flex flex-col justify-between">
+    <div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around h-full">
+      <nuxt-link to="/uses" class="md:w-1/3 h-full">
+        <Ad color="rose" class="h-96 w-full flex flex-col justify-between items-center">
+          <div>
+            <img class="h-48" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
+          </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
               Usages
             </h1>
-            <p class="text-lg text-gray-700 mt-4">
+            <h3 class="px-4 text-xl text-gray-700">
               Venez decouvrir mon environnement de developpement
-            </p>
+            </h3>
           </div>
         </Ad>
       </nuxt-link>
-      <nuxt-link to="/contact" class="h-48 md:w-1/3">
-        <Ad color="blue" class="h-full w-full flex flex-col justify-between">
+      <nuxt-link to="/contact" class="md:w-1/3 h-full">
+        <Ad color="blue" class="h-96 w-full flex flex-col justify-between items-center">
+          <div>
+            <img class="h-48" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
+          </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
               Vous avez un projet ?
             </h1>
-            <p class="text-lg text-gray-700 mt-4">
+            <h3 class="px-4 text-lg text-gray-700">
               Contactez moi en detaillant votre projet pour debuter notre collaboration.
-            </p>
+            </h3>
           </div>
         </Ad>
       </nuxt-link>
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index a7d0b8d..b6f6839 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -25,6 +25,6 @@ export default {
 
 <style scoped lang="scss">
 .link {
-  @apply font-medium cursor-pointer border-b-2 border-gray-200 text-teal-400 hover:border-teal-400 duration-200 dark:(font-white border-gray-700) hover:dark:border-teal-400
+  @apply font-medium cursor-pointer border-b-2 border-gray-200 text-indigo-600 hover:border-indigo-600 duration-200 dark:(font-white border-gray-700) hover:dark:border-indigo-600
 }
 </style>
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 33f60d8..4785690 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="link" class="duration-150 transform hover:scale-110">
-    <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-gray-600 hover:(bg-gray-700 text-white) text-gray-700 duration-300 dark:(border-gray-400 text-gray-400) dark:hover:bg-gray-400 dark:hover:text-black">
+    <div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-indigo-600 hover:(bg-indigo-600 text-white) dark:hover:text-black text-indigo-600 duration-300">
       {{ content }}
     </div>
   </nuxt-link>
diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
new file mode 100644
index 0000000..e38c2d8
--- /dev/null
+++ b/src/components/ContactForm.vue
@@ -0,0 +1,91 @@
+<template>
+  <section class="w-full flex items-center justify-center flex-col">
+    <h2 class="mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
+      Fill in the form or <a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">Send an email</a> 📬
+    </h2>
+    <form class="w-full lg:w-1/2">
+      <div class="w-full lg:flex lg:space-x-4 justify-center mb-8 lg:mb-12">
+        <div class="form-div lg:w-1/2 mb-8 lg:mb-0">
+          <input
+            id="name"
+            required
+            type="text"
+            placeholder=" "
+            class="form-input-half w-full"
+          />
+          <label for="name" class="form-label"> What is your name ?</label>
+        </div>
+        <div class="form-div lg:w-1/2">
+          <input
+            id="email"
+            required
+            type="email"
+            placeholder=" "
+            class="form-input-half w-full"
+          />
+          <label for="email" class="form-label">What is your email ?</label>
+        </div>
+      </div>
+      <div class="form-div w-full mb-8 lg:mb-12">
+        <input
+          id="subject"
+          required
+          type="text"
+          placeholder=" "
+          class="form-input w-full"
+        />
+        <label for="subject" class="form-label">Why are you contacting me?</label>
+      </div>
+      <div class="form-div w-full">
+          <textarea
+            id="content"
+            required
+            placeholder=" "
+            class="form-input w-full"
+            minlength="30"
+            rows="4"
+          />
+        <label for="content" class="form-label">Tell me about your project</label>
+      </div>
+    </form>
+    <div class="my-12">
+      <div class="font-bold px-6 py-3 border-2 rounded-full border-indigo-600 text-indigo-600 hover:(bg-indigo-600 text-white) hover:dark:text-black duration-300 cursor-pointer">
+        Envoyer
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+export default {
+  name: "ContactForm"
+}
+</script>
+
+<style scoped lang="scss">
+input:focus-within ~ label, textarea:focus-within ~ label,
+input:not(:placeholder-shown) ~ label, textarea:not(:placeholder-shown) ~ label {
+  @apply transform scale-75 -translate-y-6 -translate-x-7;
+}
+
+.form-input-half:focus-within ~ label,
+.form-input-half:not(:placeholder-shown) ~ label {
+  @apply transform scale-75 -translate-y-6 -translate-x-5;
+}
+
+.form-div {
+  @apply relative border-b border-gray-200 dark:border-gray-800 focus-within:border-black dark:focus-within:border-white
+}
+
+.form-input-half, .form-input {
+  @apply block w-full appearance-none focus:outline-none bg-transparent
+}
+
+.form-label {
+  @apply absolute top-0 -z-1 duration-300 text-gray-700 dark:text-gray-400
+}
+
+.email {
+  @apply duration-300 border-b-2 border-gray-200 dark:border-gray-800 hover:(border-black dark:border-white)
+}
+</style>
diff --git a/src/components/EnvListItem.vue b/src/components/EnvListItem.vue
index 5e1986c..7366c98 100644
--- a/src/components/EnvListItem.vue
+++ b/src/components/EnvListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <li>
     {{ $t(title) }}:
-    <a class="duration-300 text-teal-400 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-teal-400 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
+    <a class="duration-300 text-indigo-600 font-medium border-b-2 border-opacity-0 hover:border-opacity-100 border-indigo-600 border-solid" v-if="link" :href="link" target="_blank">{{ content }}</a>
     <span v-else>{{ content }}</span>
   </li>
 </template>
diff --git a/src/components/Experience.vue b/src/components/Experience.vue
index 6e3b1a7..40191eb 100644
--- a/src/components/Experience.vue
+++ b/src/components/Experience.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-row mb-5">
     <div class="self-center flex h-3 w-3 mr-3 relative">
-      <span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-teal-400 opacity-75"></span>
+      <span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-indigo-600 opacity-75"></span>
       <span v-else class="inline relative h-3 w-3 rounded-full bg-gray-400 opacity-75"></span>
-      <span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-teal-500"></span>
+      <span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-indigo-800"></span>
       <span v-else class="inline absolute rounded-full h-3 w-3 bg-gray-500"></span>
     </div>
     <div class="leading-7">
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 4f11645..bd41b09 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -6,21 +6,22 @@
           <p class="inline">{{ $t('footer.find_me') }}
             <br class="md:hidden"/>
             <a class="font-semibold" href="https://twitch.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <img class="inline img" src="@/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
+              <img class="inline" src="@/assets/images/socials/twitch.svg" alt="Twitch logo" height="20" width="20" />
               <span class="link">Twitch</span>
             </a>,
             <a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
-              <img class="inline img" src="@/assets/images/socials/github.svg" alt="Github logo" height="20" width="20" />
+              <img v-if="!isDarkMode" class="inline black" src="@/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
+              <img v-else class="inline black" src="@/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
               <span class="link">Github</span>
             </a> &
             <a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
-              <img class="inline img" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
+              <img class="inline" src="@/assets/images/socials/twitter.svg" alt="Twitter logo" height="20" width="20" />
               <span class="link">Twitter</span>
             </a>
             <br class="md:hidden"/>
             {{ $t('footer.separator') }}
             <a class="font-semibold" href="mailto:contact@arthurdanjou.fr" target="_blank" rel="noopener noreferrer">
-              <svg class="inline img" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg class="inline" width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
               <span class="link">Mail</span>
@@ -34,7 +35,7 @@
         <p>
           {{ $t('footer.credits') }}
           <a class="font-semibold" target="_blank" href="https://nuxtjs.org" rel="noopener noreferrer">
-            <img class="inline img" src="@/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
+            <img class="inline" src="@/assets/images/socials/nuxtjs.svg" alt="NuxtJs logo" height="20" width="20" />
             <span class="link">NuxtJs</span>
           </a>
           {{ $t('footer.credits_separator') }} <span>Arthur DANJOU</span>
@@ -46,15 +47,21 @@
 </template>
 
 <script>
-import {ref} from "@nuxtjs/composition-api";
+import {computed, ref, useContext} from "@nuxtjs/composition-api";
 
 export default {
   name: "Footer",
   setup() {
+    const {$colorMode} = useContext()
+    const isDarkMode = computed(() => {
+      return $colorMode.preference === 'dark' | undefined
+    })
+
     const getDate = ref(new Date().getFullYear())
 
     return {
-      getDate
+      getDate,
+      isDarkMode
     }
   }
 }
@@ -62,16 +69,12 @@ export default {
 
 <style scoped lang="scss">
 .footer {
-  .img {
-    transform: translateY(-3px);
+  .link {
+    @apply border-b-2 border-gray-200 hover:border-black dark:border-gray-700 dark:hover:border-white;
   }
 
-  .link {
-    @apply duration-100;
-
-    &:hover {
-      @apply border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid;
-    }
+  .black {
+    @apply fill-black dark:fill-white dark:text-white dark:stroke-black
   }
 }
 </style>
diff --git a/src/components/Formation.vue b/src/components/Formation.vue
index 1946e1d..984e586 100644
--- a/src/components/Formation.vue
+++ b/src/components/Formation.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-row mb-5">
     <div class="self-center flex h-3 w-3 mr-3 relative">
-      <span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-teal-400 opacity-75"></span>
+      <span v-if="end === 'Today'" class="animate-ping relative inline h-3 w-3 rounded-full bg-indigo-600 opacity-75"></span>
       <span v-else class="inline relative h-3 w-3 rounded-full bg-gray-400 opacity-75"></span>
-      <span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-teal-500"></span>
+      <span v-if="end === 'Today'" class="inline absolute rounded-full h-3 w-3 bg-indigo-800"></span>
       <span v-else class="inline absolute rounded-full h-3 w-3 bg-gray-500"></span>
     </div>
     <div class="leading-7">
diff --git a/src/components/PageTitle.vue b/src/components/PageTitle.vue
index f7a3ab0..c9577ed 100644
--- a/src/components/PageTitle.vue
+++ b/src/components/PageTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <h1
-    class="mt-16 md:mt-32 font-bold text-2xl md:text-4xl mr-2 inline mb-4 border-b-2 border-solid border-teal-400"
+    class="mt-16 md:mt-32 font-bold text-3xl md:text-5xl mr-2 inline mb-4 border-b-3 border-solid border-indigo-600"
   >
     {{ this.$t(title) }}
     <slot />
diff --git a/src/components/PresentationAbout.vue b/src/components/PresentationAbout.vue
index cf7a19b..a2cdcf5 100644
--- a/src/components/PresentationAbout.vue
+++ b/src/components/PresentationAbout.vue
@@ -4,7 +4,7 @@
       <img class="logo-img rounded-full my-5 shadow-lg" src="@/assets/images/Logo.jpg" alt="It's me !" />
     </div>
     <div class="ml-2 text-lg leading-6 xl:w-2/3 text-justify dark:text-gray-400 text-gray-700">
-      <p>{{ $t('about.banner.hello') }} <span class="text-teal-400 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
+      <p>{{ $t('about.banner.hello') }} <span class="text-indigo-600 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
       <p>{{ $t('about.banner.1')}}</p> <br/>
       <p>{{ $t('about.banner.2') }}</p> <br/>
       <p>{{ $t('about.banner.3') }}</p>
diff --git a/src/locales/fr-FR.ts b/src/locales/fr-FR.ts
index 12164df..66f4ad1 100644
--- a/src/locales/fr-FR.ts
+++ b/src/locales/fr-FR.ts
@@ -172,7 +172,7 @@ export default {
       success: 'Inscription confirmée pour {email} !'
     },
     how_to: {
-      title: 'Comment me contacter ? ✉',
+      title: 'Pourquoi me contacter ✉',
       description: 'N\'hésitez pas à me contacter si vous avez des questions, pensez que nous pourrions travailler ensemble ou si vous souhaitez simplement vous discuter ✌️'
     },
     available: {
diff --git a/src/pages/contact.vue b/src/pages/contact.vue
index 435348e..80ef0a4 100644
--- a/src/pages/contact.vue
+++ b/src/pages/contact.vue
@@ -8,84 +8,28 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
       </svg>
     </PageTitle>
-    <div class="w-full lg:w-3/4 mb-10 mt-4">
-      <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-200">{{ $t('contact.newsletter.title') }}</h1>
-      <h3 class="text-md md:text-lg">
-        {{ $t('contact.newsletter.description') }} <br>
-        <span class="font-bold self-start">{{ $t('contact.newsletter.unfollow') }}</span>
-      </h3>
-      <form class="flex flex-col lg:flex-row mt-4 w-full">
-        <div class="flex flex-col lg:flex-row">
-          <div class="mb-3 lg:mr-4 w-full md:w-auto">
-            <input v-model="form.name"
-                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
-                   type="text"
-                   :placeholder="$t('contact.form.name')"
-                   required
-                   id="name"/>
-          </div>
-          <div class="mb-3 lg:mr-4 w-full md:w-auto">
-            <input v-model="form.email"
-                   class="select-text w-full placeholder-purple-700 dark:focus:bg-dark-800 dark:placeholder-purple-400 focus:bg-white duration-300 px-3 py-2 bg-purple-50 dark:bg-dark-900 border border-solid border-purple-700 rounded-lg"
-                   type="email"
-                   :placeholder="$t('contact.form.mail')"
-                   required
-                   id="email"/>
-          </div>
-        </div>
-        <div class="mb-3 self-center">
-          <button @click.prevent="handleForm" @keyup.ctrl.enter="handleForm" :disabled="!isSendable" class="button dark:text-black font-bold px-3 py-2 bg-purple-400 hover:bg-purple-500 cursor-pointer duration-300 rounded-lg btn">
-            {{ $t('contact.form.submit')}}
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-            </svg>
-          </button>
-        </div>
-      </form>
-      <div v-if="error" class="flex">
-        <div class="rounded-xl px-3 py-2 bg-red-300 font-bold dark:text-black">
-          {{ $t('contact.form.error') }}
-        </div>
-      </div>
-      <div v-if="success" class="flex">
-        <div class="rounded-xl px-3 py-2 bg-green-300 font-bold dark:text-black">
-          {{ $t('contact.form.success', { email: form.email }) }}
-        </div>
-      </div>
-    </div>
-    <div class="w-full lg:w-3/4 mb-10 mt-4">
+    <section class="w-full lg:w-3/4 mb-10 mt-4 text-center">
       <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
         {{ $t('contact.how_to.title') }}
       </h1>
       <h3 class="text-md md:text-lg">
         {{ $t('contact.how_to.description') }}
       </h3>
-      <div class="mt-4 text-lg flex">
-        <div class="flex email duration-300 text-purple-500 hover:text-purple-700 cursor-pointer">
-          <a class="mr-2" href="mailto:me@arthurdanjou.fr?subject=Please enter here your project name">
-            me@arthurdanjou.fr
-          </a>
-          <div class="arrow duration-300">
-            <svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="w-full lg:w-3/4 mb-10 mt-4">
+    </section>
+    <section class="w-full lg:w-3/4 mb-10 mt-4 text-center">
       <h1 class="font-bold text-gray-700 text-xl md:text-3xl my-4 dark:text-dark-100">
         {{ $t('contact.available.title') }}
       </h1>
       <h3 class="text-lg md:text-lg">
         {{ $t('contact.available.description') }}
       </h3>
-      <div class="my-4 text-purple-500">
+      <div class="my-4 text-indigo-600">
         {{ $t('contact.available.start') }}
-        <span v-if="info && info.hiring.status" class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + info.hiring.status) }}</span>
+        <span v-if="info && info.hiring.status && info.hiring.color" class="py-1 px-2 font-bold rounded-full m-0.5" :class="getColor">{{ $t('hiring.status.' + info.hiring.status) }}</span>
         {{ $t('contact.available.end') }}
       </div>
-    </div>
+    </section>
+    <ContactForm />
   </main>
 </template>
 
@@ -96,6 +40,9 @@ import {combineObject} from "windicss/types/utils/algorithm/compileStyleSheet";
 
 export default {
   name: "contact",
+  head: {
+    title: 'Contact - Arthur Danjou'
+  },
   setup() {
     const {$content} = useContext()
     const info = useAsync(() => {
@@ -106,9 +53,9 @@ export default {
     const getColor = computed(() => {
       switch (hiring_color) {
         case 'green':
-          return `bg-green-200 text-green-500`
+          return `bg-green-200 text-green-700`
         case 'red':
-          return `bg-red-200 text-red-500`
+          return `bg-red-200 text-red-700`
       }
     })
 
diff --git a/src/pages/projects/index.vue b/src/pages/projects/index.vue
index 2570ff5..5b9334c 100644
--- a/src/pages/projects/index.vue
+++ b/src/pages/projects/index.vue
@@ -9,7 +9,7 @@
     </PageTitle>
     <h1 v-if="projects.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('projects.no_project') }}</h1>
     <div v-else class="flex flex-col justify-around items-center py-10 w-full">
-      <h1 class="text-xl font-bold text-center mb-8">{{ $t('projects.description') }}</h1>
+      <h1 class="text-gray-700 dark:text-gray-400 text-xl mt-4">{{ $t('projects.description') }}</h1>
       <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
         <div class="flex py-8 w-full flex-wrap" >
           <div class="md:mx-3 my-2" v-for="project in projects">
diff --git a/src/pages/uses.vue b/src/pages/uses.vue
index 4b5a6e1..3076f9a 100644
--- a/src/pages/uses.vue
+++ b/src/pages/uses.vue
@@ -7,7 +7,7 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
       </svg>
     </PageTitle>
-    <p class="text-gray-700 dark:text-gray-400 text-xl mt-4 mb-8">{{ $t('about.env.description') }}</p>
+    <p class="text-gray-700 dark:text-gray-400 text-xl my-8">{{ $t('about.env.description') }}</p>
     <EnvGroup>
       <EnvTitle title="about.env.ide">
         <svg class="inline icon" height="32" width="32" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/todo_and_review b/todo_and_review
deleted file mode 100644
index e69de29..0000000
diff --git a/windi.config.js b/windi.config.js
index f8593dc..3e223a0 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -19,7 +19,7 @@ module.exports = {
                 borderBottomStyle: 'solid',
                 textDecoration: 'none',
                 '&:hover': {
-                  borderBottomColor: theme('colors.teal.400'),
+                  borderBottomColor: theme('colors.indigo.600'),
                 }
               }
             }
@@ -28,12 +28,12 @@ module.exports = {
         dark: {
           css: [
             {
-              color: theme('colors.dark.100'),
+              color: theme('colors.gray.400'),
               '[class~="lead"]': {
-                color: theme('colors.dark.100'),
+                color: theme('colors.gray.400'),
               },
               a: {
-                color: theme('colors.teal.400'),
+                color: theme('colors.indigo.600'),
                 transitionDuration: '300ms',
                 cursor: 'pointer',
                 borderBottomColor: theme('colors.gray.700'),
@@ -41,7 +41,7 @@ module.exports = {
                 borderBottomStyle: 'solid',
                 textDecoration: 'none',
                 '&:hover': {
-                  borderBottomColor: theme('colors.teal.400'),
+                  borderBottomColor: theme('colors.indigo.600'),
                 }
               },
               strong: {