diff --git a/client/src/App.vue b/client/src/App.vue
index f7c81f5..3683c37 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,11 +1,13 @@
 <template>
   <div id="app" class="font-sans bg-gray-200">
-    <div class="nav">
+
+
+    <!-- <div class="nav">
       <router-link to="/">Accueil</router-link> |
       <router-link :to="`/summoner/euw/${summoner}`">
           {{ linkText }}
       </router-link>
-    </div>
+    </div> -->
     
     <router-view/>
 
diff --git a/client/src/assets/Logo.svg b/client/src/assets/Logo.svg
new file mode 100644
index 0000000..e7bffb9
--- /dev/null
+++ b/client/src/assets/Logo.svg
@@ -0,0 +1,8 @@
+<svg width="321" height="151" viewBox="0 0 321 151" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M247.962 61.1543H262.06C264.906 57.5672 267.745 53.975 270.577 50.3837C271.477 49.2589 272.265 48.8503 273.778 49.1915C275.56 49.6304 277.44 49.8024 279.22 49.6657C286.865 49.1882 293.236 43.6731 294.895 36.1944C296.568 28.8419 293.335 21.2108 287.016 17.5093C280.345 13.5276 271.842 14.3577 266.133 19.4784C260.479 24.5289 258.779 32.7799 262.194 39.7508C263.027 41.448 262.831 42.5574 261.707 43.9634C257.105 49.6741 252.528 55.4039 247.962 61.1543ZM276.887 23.8315C281.575 23.3034 285.95 26.8401 286.414 31.5212C286.87 36.1391 283.433 40.3641 278.801 40.822C274.058 41.4204 269.823 37.9958 269.345 33.1884C268.889 28.5705 272.263 24.3526 276.887 23.8315Z" fill="#38B2AC"/>
+<path d="M248.08 94.1543H238.96C237.997 97.3736 235.196 99.9279 231.689 100.371C227.605 100.831 223.634 98.0616 222.459 94.1543H213.595C214.045 97.7721 215.538 100.979 218.142 103.688C224.028 109.805 233.574 110.84 240.664 106.012C244.834 103.172 247.414 98.8301 248.08 94.1543Z" fill="#38B2AC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M151.019 94.1543H136.677C135.322 95.785 133.971 97.4199 132.623 99.06C131.435 100.473 130.443 100.777 128.598 100.345C117.198 97.6637 106.277 106.634 107.1 117.926C107.63 125.478 111.452 130.932 118.656 133.383C125.544 135.869 131.997 134.502 137.108 129.193C142.515 123.659 143.373 117.038 140.527 110.003C139.814 108.228 140.01 107.119 141.205 105.769C144.482 101.923 147.755 98.0461 151.019 94.1543ZM123.702 108.7C128.333 108.242 132.568 111.667 133.024 116.285C133.55 120.959 130.24 125.17 125.567 125.824C120.879 126.352 116.518 122.942 115.984 118.205C115.457 113.531 119.007 109.165 123.702 108.7Z" fill="#38B2AC"/>
+<path d="M185.569 61.1543H176.302C174.817 57.8282 171.379 55.7397 167.563 56.1696C164.431 56.5224 161.911 58.4907 160.721 61.1543H151.314C151.875 58.3406 153.244 55.6596 155.487 53.1807C160.57 47.6189 167.044 45.8661 174.177 48.2605C180.568 50.3211 184.184 54.8453 185.569 61.1543Z" fill="#38B2AC"/>
+<path d="M77.177 69.8053V75.5853H84.963V79.8353H77.177V85.7343H87.343V90.1543H71.397V65.3853H87.343V69.8053H77.177ZM103.977 80.6853L101.682 73.9023C101.512 73.4716 101.331 72.9673 101.138 72.3893C100.946 71.8 100.753 71.1653 100.56 70.4853C100.39 71.1766 100.209 71.817 100.016 72.4063C99.8236 72.9956 99.6422 73.5056 99.4722 73.9363L97.1942 80.6853H103.977ZM113.106 90.1543H108.652C108.154 90.1543 107.751 90.041 107.445 89.8143C107.139 89.5763 106.907 89.276 106.748 88.9133L105.286 84.5953H95.8682L94.4062 88.9133C94.2816 89.2306 94.0549 89.5196 93.7262 89.7803C93.4089 90.0296 93.0122 90.1543 92.5362 90.1543H88.0482L97.6362 65.3853H103.518L113.106 90.1543ZM126.129 77.3193H134.935V87.7743C133.666 88.7036 132.311 89.378 130.872 89.7973C129.444 90.2166 127.948 90.4263 126.384 90.4263C124.344 90.4263 122.485 90.109 120.808 89.4743C119.142 88.8283 117.714 87.9443 116.524 86.8223C115.334 85.689 114.416 84.3516 113.77 82.8103C113.124 81.2576 112.801 79.5746 112.801 77.7613C112.801 75.914 113.107 74.2196 113.719 72.6783C114.331 71.1256 115.204 69.7883 116.337 68.6663C117.482 67.5443 118.859 66.6716 120.468 66.0483C122.089 65.425 123.896 65.1133 125.891 65.1133C126.922 65.1133 127.891 65.1983 128.798 65.3683C129.705 65.5383 130.538 65.7706 131.297 66.0653C132.068 66.36 132.77 66.7113 133.405 67.1193C134.04 67.5273 134.606 67.9693 135.105 68.4453L133.439 70.9783C133.178 71.375 132.838 71.6186 132.419 71.7093C132.011 71.8 131.569 71.698 131.093 71.4033C130.64 71.1313 130.209 70.899 129.801 70.7063C129.404 70.5023 128.996 70.338 128.577 70.2133C128.158 70.0886 127.716 69.998 127.251 69.9413C126.786 69.8846 126.265 69.8563 125.687 69.8563C124.61 69.8563 123.641 70.049 122.78 70.4343C121.919 70.8083 121.182 71.341 120.57 72.0323C119.969 72.7236 119.505 73.5566 119.176 74.5313C118.847 75.4946 118.683 76.5713 118.683 77.7613C118.683 79.076 118.864 80.2433 119.227 81.2633C119.59 82.2833 120.1 83.1446 120.757 83.8473C121.426 84.55 122.219 85.0883 123.137 85.4623C124.066 85.825 125.092 86.0063 126.214 86.0063C126.905 86.0063 127.529 85.9383 128.084 85.8023C128.651 85.6663 129.2 85.485 129.733 85.2583V81.5013H127.285C126.922 81.5013 126.639 81.405 126.435 81.2123C126.231 81.0196 126.129 80.776 126.129 80.4813V77.3193ZM149.135 85.6153C149.906 85.6153 150.592 85.4906 151.192 85.2413C151.804 84.9806 152.32 84.6123 152.739 84.1363C153.159 83.6603 153.476 83.0823 153.691 82.4023C153.918 81.711 154.031 80.929 154.031 80.0563V65.3853H159.777V80.0563C159.777 81.575 159.528 82.969 159.029 84.2383C158.542 85.5076 157.839 86.6013 156.921 87.5193C156.003 88.4373 154.887 89.1513 153.572 89.6613C152.258 90.1713 150.779 90.4263 149.135 90.4263C147.481 90.4263 145.996 90.1713 144.681 89.6613C143.367 89.1513 142.25 88.4373 141.332 87.5193C140.414 86.6013 139.712 85.5076 139.224 84.2383C138.737 82.969 138.493 81.575 138.493 80.0563V65.3853H144.239V80.0393C144.239 80.912 144.347 81.694 144.562 82.3853C144.789 83.0653 145.112 83.649 145.531 84.1363C145.951 84.6123 146.461 84.9806 147.061 85.2413C147.673 85.4906 148.365 85.6153 149.135 85.6153ZM170.046 69.8053V75.5853H177.832V79.8353H170.046V85.7343H180.212V90.1543H164.266V65.3853H180.212V69.8053H170.046ZM197.441 70.4173C197.271 70.6893 197.09 70.8933 196.897 71.0293C196.716 71.1653 196.478 71.2333 196.183 71.2333C195.923 71.2333 195.639 71.154 195.333 70.9953C195.039 70.8253 194.699 70.6383 194.313 70.4343C193.939 70.2303 193.509 70.049 193.021 69.8903C192.534 69.7203 191.979 69.6353 191.355 69.6353C190.279 69.6353 189.474 69.8676 188.941 70.3323C188.42 70.7856 188.159 71.4033 188.159 72.1853C188.159 72.684 188.318 73.0976 188.635 73.4263C188.953 73.755 189.366 74.0383 189.876 74.2763C190.398 74.5143 190.987 74.7353 191.644 74.9393C192.313 75.132 192.993 75.353 193.684 75.6023C194.376 75.8403 195.05 76.1236 195.707 76.4523C196.376 76.781 196.965 77.2003 197.475 77.7103C197.997 78.2203 198.416 78.8436 198.733 79.5803C199.051 80.3056 199.209 81.184 199.209 82.2153C199.209 83.36 199.011 84.431 198.614 85.4283C198.218 86.4256 197.64 87.2983 196.88 88.0463C196.132 88.783 195.203 89.3666 194.092 89.7973C192.993 90.2166 191.741 90.4263 190.335 90.4263C189.565 90.4263 188.777 90.347 187.972 90.1883C187.179 90.0296 186.408 89.8086 185.66 89.5253C184.912 89.2306 184.21 88.885 183.552 88.4883C182.895 88.0916 182.323 87.6496 181.835 87.1623L183.535 84.4763C183.671 84.2836 183.847 84.125 184.062 84.0003C184.289 83.8643 184.533 83.7963 184.793 83.7963C185.133 83.7963 185.473 83.904 185.813 84.1193C186.165 84.3346 186.556 84.5726 186.986 84.8333C187.428 85.094 187.933 85.332 188.499 85.5473C189.066 85.7626 189.735 85.8703 190.505 85.8703C191.548 85.8703 192.358 85.6436 192.936 85.1903C193.514 84.7256 193.803 83.9946 193.803 82.9973C193.803 82.4193 193.645 81.949 193.327 81.5863C193.01 81.2236 192.591 80.9233 192.069 80.6853C191.559 80.4473 190.976 80.2376 190.318 80.0563C189.661 79.875 188.987 79.6766 188.295 79.4613C187.604 79.2346 186.93 78.9626 186.272 78.6453C185.615 78.3166 185.026 77.8916 184.504 77.3703C183.994 76.8376 183.581 76.1803 183.263 75.3983C182.946 74.605 182.787 73.6303 182.787 72.4743C182.787 71.545 182.974 70.6383 183.348 69.7543C183.722 68.8703 184.272 68.0826 184.997 67.3913C185.723 66.7 186.612 66.1503 187.666 65.7423C188.72 65.323 189.927 65.1133 191.287 65.1133C192.047 65.1133 192.783 65.1756 193.497 65.3003C194.223 65.4136 194.908 65.5893 195.554 65.8273C196.2 66.054 196.801 66.3316 197.356 66.6603C197.923 66.9776 198.427 67.3403 198.869 67.7483L197.441 70.4173ZM220.382 69.9413H213.412V90.1543H207.666V69.9413H200.696V65.3853H220.382V69.9413ZM233.967 80.6853L231.672 73.9023C231.502 73.4716 231.321 72.9673 231.128 72.3893C230.936 71.8 230.743 71.1653 230.55 70.4853C230.38 71.1766 230.199 71.817 230.006 72.4063C229.814 72.9956 229.632 73.5056 229.462 73.9363L227.184 80.6853H233.967ZM243.096 90.1543H238.642C238.144 90.1543 237.741 90.041 237.435 89.8143C237.129 89.5763 236.897 89.276 236.738 88.9133L235.276 84.5953H225.858L224.396 88.9133C224.272 89.2306 224.045 89.5196 223.716 89.7803C223.399 90.0296 223.002 90.1543 222.526 90.1543H218.038L227.626 65.3853H233.508L243.096 90.1543ZM260.425 69.9413H253.455V90.1543H247.709V69.9413H240.739V65.3853H260.425V69.9413ZM277.029 70.4173C276.859 70.6893 276.678 70.8933 276.485 71.0293C276.304 71.1653 276.066 71.2333 275.771 71.2333C275.511 71.2333 275.227 71.154 274.921 70.9953C274.627 70.8253 274.287 70.6383 273.901 70.4343C273.527 70.2303 273.097 70.049 272.609 69.8903C272.122 69.7203 271.567 69.6353 270.943 69.6353C269.867 69.6353 269.062 69.8676 268.529 70.3323C268.008 70.7856 267.747 71.4033 267.747 72.1853C267.747 72.684 267.906 73.0976 268.223 73.4263C268.541 73.755 268.954 74.0383 269.464 74.2763C269.986 74.5143 270.575 74.7353 271.232 74.9393C271.901 75.132 272.581 75.353 273.272 75.6023C273.964 75.8403 274.638 76.1236 275.295 76.4523C275.964 76.781 276.553 77.2003 277.063 77.7103C277.585 78.2203 278.004 78.8436 278.321 79.5803C278.639 80.3056 278.797 81.184 278.797 82.2153C278.797 83.36 278.599 84.431 278.202 85.4283C277.806 86.4256 277.228 87.2983 276.468 88.0463C275.72 88.783 274.791 89.3666 273.68 89.7973C272.581 90.2166 271.329 90.4263 269.923 90.4263C269.153 90.4263 268.365 90.347 267.56 90.1883C266.767 90.0296 265.996 89.8086 265.248 89.5253C264.5 89.2306 263.798 88.885 263.14 88.4883C262.483 88.0916 261.911 87.6496 261.423 87.1623L263.123 84.4763C263.259 84.2836 263.435 84.125 263.65 84.0003C263.877 83.8643 264.121 83.7963 264.381 83.7963C264.721 83.7963 265.061 83.904 265.401 84.1193C265.753 84.3346 266.144 84.5726 266.574 84.8333C267.016 85.094 267.521 85.332 268.087 85.5473C268.654 85.7626 269.323 85.8703 270.093 85.8703C271.136 85.8703 271.946 85.6436 272.524 85.1903C273.102 84.7256 273.391 83.9946 273.391 82.9973C273.391 82.4193 273.233 81.949 272.915 81.5863C272.598 81.2236 272.179 80.9233 271.657 80.6853C271.147 80.4473 270.564 80.2376 269.906 80.0563C269.249 79.875 268.575 79.6766 267.883 79.4613C267.192 79.2346 266.518 78.9626 265.86 78.6453C265.203 78.3166 264.614 77.8916 264.092 77.3703C263.582 76.8376 263.169 76.1803 262.851 75.3983C262.534 74.605 262.375 73.6303 262.375 72.4743C262.375 71.545 262.562 70.6383 262.936 69.7543C263.31 68.8703 263.86 68.0826 264.585 67.3913C265.311 66.7 266.2 66.1503 267.254 65.7423C268.308 65.323 269.515 65.1133 270.875 65.1133C271.635 65.1133 272.371 65.1756 273.085 65.3003C273.811 65.4136 274.496 65.5893 275.142 65.8273C275.788 66.054 276.389 66.3316 276.944 66.6603C277.511 66.9776 278.015 67.3403 278.457 67.7483L277.029 70.4173Z" fill="white"/>
+<path d="M41.7277 47.3674V46.6448L41.3421 46.0336L33.5329 33.6543H62.4732V96.0068V98.5068H64.9732H102.864L90.2072 114.654H33.5868L41.3287 102.648L41.7277 102.03V101.294V47.3674Z" stroke="white" stroke-width="5"/>
+</svg>
diff --git a/client/src/assets/bg-homepage-1.jpg b/client/src/assets/bg-homepage-1.jpg
new file mode 100644
index 0000000..cac3311
Binary files /dev/null and b/client/src/assets/bg-homepage-1.jpg differ
diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
new file mode 100644
index 0000000..2c010f0
--- /dev/null
+++ b/client/src/assets/css/base.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
\ No newline at end of file
diff --git a/client/src/assets/css/form.css b/client/src/assets/css/form.css
new file mode 100644
index 0000000..85ac343
--- /dev/null
+++ b/client/src/assets/css/form.css
@@ -0,0 +1,25 @@
+button:focus {
+  outline: 0;
+}
+
+.vertical-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.horizontal-center {
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+
+.input {
+  border: 4px solid rgba(129, 230, 217, .7);
+  background: rgba(40, 94, 97, .35);
+}
+
+.input:focus,
+.btn:hover {
+  background: rgba(40, 94, 97, .75);
+  border-color: rgba(129, 230, 217, .9);
+}
\ No newline at end of file
diff --git a/client/src/assets/css/main.css b/client/src/assets/css/main.css
new file mode 100644
index 0000000..ea4ab62
--- /dev/null
+++ b/client/src/assets/css/main.css
@@ -0,0 +1,3 @@
+@import 'tailwind.css';
+@import 'base.css';
+@import 'form.css';
\ No newline at end of file
diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue
index 2409cd2..7818559 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/SearchForm.vue
@@ -1,42 +1,45 @@
 <template>
-  <form @submit.prevent="formSubmit" class="flex">
-    <div class="relative">
-      <v-icon name="search" class="absolute ml-2 vertical-center"></v-icon>
+  <form @submit.prevent="formSubmit" class="flex text-teal-100 text-lg w-full">
+    <div class="relative w-full">
+      <!-- <v-icon name="search" class="absolute ml-2 vertical-center"></v-icon> -->
       <input 
         type="text" 
-        placeholder="Entre un pseudo." 
-        class="bg-gray-300 p-2 rounded-l outline-none focus:bg-gray-400 pl-8 pr-16" 
+        autofocus
+        class="input w-full px-2 py-4 rounded-lg outline-none pl-8 pr-16 font-bold" 
         v-model="summoner"
       >
-      <div class="absolute right-0 vertical-center flex items-center h-full mr-1">
+      <div class="absolute right-0 vertical-center flex items-center h-full mr-2">
         <div 
           @click="dropdown = !dropdown"
-          class="cursor-pointer flex items-center px-2 py-1 rounded-lg hover:bg-gray-200"
+          class="cursor-pointer flex items-center px-2 py-1 rounded-lg hover:bg-teal-700"
         >
-          <span class="selected">{{ selectedRegion }}</span>
+          <span class="selected font-bold">{{ selectedRegion }}</span>
           <v-icon name="caret-down" class="ml-1"></v-icon>
         </div>
       </div>
-
-      <div
-        v-if="dropdown"
-        @click="dropdown = !dropdown"
-        class="absolute right-0 text-white rounded-b-lg shadow cursor-pointer"
-      >
-        <div 
-          v-for="(region, index) in regions" 
-          :key="region"
-          @click="selectedRegion = region"
-          class="px-4 py-1 text-sm bg-teal-500 hover:bg-teal-400"
-          :class="classRegions(index)"
+      <transition name="bounce">
+        <div
+          v-if="dropdown"
+          @click="dropdown = !dropdown"
+          class="absolute right-0 text-white rounded-b-lg shadow cursor-pointer mr-2"
         >
-          {{ region }}
+          <div 
+            v-for="(region, index) in regions" 
+            :key="region"
+            @click="selectedRegion = region"
+            class="px-4 py-1 text-sm bg-teal-600 hover:bg-teal-500"
+            :class="classRegions(index)"
+          >
+            {{ region }}
+          </div>
         </div>
-      </div>
+      </transition>
 
     </div>
 
-    <button class="bg-teal-500 p-2 text-white rounded-r hover:bg-teal-400" type="submit">Rechercher</button>
+    <button class="input btn w-20 rounded-lg ml-2 relative" type="submit">
+      <v-icon name="search" class="absolute vertical-center horizontal-center"></v-icon>
+    </button>
   </form>
 </template>
 
@@ -69,8 +72,23 @@ export default {
 </script>
 
 <style scoped>
-.vertical-center {
-  top: 50%;
-  transform: translateY(-50%);
+.bounce-enter-active {
+  animation: bounce-in .5s;
+}
+
+.bounce-leave-active {
+  animation: bounce-in .5s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 </style>
diff --git a/client/src/main.js b/client/src/main.js
index 510cbfa..28350ff 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -3,7 +3,7 @@ import axios from 'axios'
 import VueAxios from 'vue-axios'
 import DotLoader from 'vue-spinner/src/DotLoader.vue'
 
-import '@/assets/css/tailwind.css'
+import '@/assets/css/main.css'
 import 'vue-awesome/icons'
 
 import App from './App.vue'
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 0df7719..fd09854 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="h-screen flex flex-col items-center justify-center">
-    <h1>Home page test</h1>
+  <div class="homepage h-screen flex flex-col items-center justify-center">
 
-    <SearchForm @formSubmit="redirect"/>
+    <div class="relative flex flex-col items-center w-full max-w-lg">
+      <div class="absolute logo">
+        <img src="@/assets/Logo.svg" alt="logo">
+      </div>
+      <SearchForm @formSubmit="redirect"/>
+    </div>
 
   </div>
 </template>
@@ -21,3 +25,16 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.homepage {
+  background-image: url("../assets/bg-homepage-1.jpg");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.logo {
+  top: -160px;
+}
+</style>
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index b538d90..7f84a77 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -2,23 +2,27 @@
   <div>
     <button class="debug" @click="resetLocalStorage"></button>
 
-    <div class="search mb-4">
-      <div class="container mx-auto">
+    <header class="search mb-4 bg-teal-900 text-teal-100">
+      <div class="container mx-auto flex justify-between py-8">
+
+        <router-link to="/" class="flex items-center text-lg text-teal-100 mr-8 hover:text-teal-200">Accueil</router-link>
 
         <SearchForm @formSubmit="redirect"/>
 
         <button
           v-if="summonerFound"
           id="refresh" 
-          class="block bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow ml-2"
+          class="input btn w-20 rounded-lg ml-2 relative"
           :disabled="loading"
           @click="apiCall"
         >
-          <v-icon name="sync"/>
+          <v-icon name="sync" class="absolute vertical-center horizontal-center"/>
         </button>
 
+ 
+
       </div>
-    </div>
+    </header>
    
     <template v-if="summonerFound && !loading">
       <div class="container mx-auto pb-16">
@@ -264,18 +268,6 @@ export default {
   background: #ef5753;
 }
 
-.search {
-  background: #4dc0b5;
-}
-
-.search .container {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-
-  padding: 32px 0;
-}
-
 .player {
   text-align: center;
   margin: 16px auto 0;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index ca09992..d67b52c 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -150,6 +150,7 @@ module.exports = {
     },
     fontFamily: {
       sans: [
+        'Lato',
         '-apple-system',
         'BlinkMacSystemFont',
         '"Segoe UI"',