diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index 7df4c77..73813b1 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/src/assets/css/src/1.0.global.css
@@ -289,6 +289,9 @@ input[type="checkbox"]:checked::before {
 button {
   cursor: pointer;
 }
+.field {
+  position: relative;
+}
 
 /* General interactive states */
 
diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 5153fc6..556d652 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -78,10 +78,15 @@ input[type="checkbox"]:checked + .btn--primary {
   --btn-color: var(--color-white);
 }
 
-.btn--white {
+.btn--white,
+.btn--white[aria-pressed="true"],
+.btn--white[aria-pressed="true"]:focus-visible {
   --btn-background: var(--color-white);
   --btn-color: var(--color-grey-700);
 }
+.btn--white[aria-pressed="true"]:focus-visible {
+  outline: transparent;
+}
 .btn--white-10 {
   --btn-background: var(--color-white-10);
   --btn-color: var(--color-white-80);
@@ -168,11 +173,19 @@ input[type="checkbox"]:checked + .btn--primary {
   .btn:hover {
     --btn-background: var(--color-primary-hover);
   }
+  .btn[aria-pressed="true"]:hover {
+    --btn-background: var(--color-primary-hover);
+    --btn-border-color: var(--color-primary-hover);
+  }
   .btn--primary:hover {
     --btn-background: var(--color-primary-10);
   }
   .btn--white:hover {
+    --btn-background: var(--color-black-10);
+  }
+  .btn--white[aria-pressed="true"]:hover {
     --btn-background: var(--color-white);
+    --btn-border-color: transparent;
   }
   .btn--white-10:hover {
     --btn-background: var(--color-white-05);
@@ -192,10 +205,6 @@ input[type="checkbox"]:checked + .btn--primary {
   .btn--transparent:hover {
     --btn-background: var(--color-white-05);
   }
-  .btn[aria-pressed="true"]:hover {
-    --btn-background: var(--color-primary-hover);
-    --btn-border-color: var(--color-primary-hover);
-  }
   .btn--image:hover {
     --btn-background: var(--color-primary-10);
   }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index dc96d5f..71e2a90 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,52 +1,70 @@
 <template>
-  <form
-    @submit.prevent="handleSubmit"
-    class="px-24 py-32 flex flex-col mx-auto bg-white rounded-xl"
-    style="--row-gap: 1rem; max-width: 24em"
-  >
-    <div class="field | w-full">
-      <label for="username">Email</label>
-      <input
-        @input="updateEmail"
-        type="email"
-        v-model="email"
-        id="username"
-        placeholder="mail@exemple.com"
-        autocomplete="username"
-        class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: !isValidEmail }"
-        required
-      />
-    </div>
-    <div class="field | w-full">
-      <label for="password">Mot de passe</label>
-      <input
-        :type="isPasswordVisible ? 'text' : 'password'"
-        v-model="password"
-        id="password"
-        autocomplete="current-password"
-        class="w-full rounded-md border border-grey-200 px-16 py-12"
-        required
-      />
-      <button
-        class="btn | w-full"
-        type="button"
-        @click="isPasswordVisible = !isPasswordVisible"
-      >
-        {{ isPasswordVisible ? 'masquer' : 'afficher' }}
-      </button>
-    </div>
-    <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
-    <button
-      @click="login"
-      :class="submitBtn.state"
-      class="btn | w-full"
-      type="submit"
-      :disabled="submitBtn.state === 'pending' ? true : undefined"
+  <div class="wrapper grid-center">
+    <form
+      @submit.prevent="handleSubmit"
+      class="px-24 pb-32 flex flex-col mx-auto bg-white rounded-xl"
+      style="--row-gap: 1rem; max-width: 24em"
     >
-      {{ submitBtn.message }}
-    </button>
-  </form>
+      <div class="field | w-full" role="group" aria-labelledby="username">
+        <label for="username">Email</label>
+        <input
+          @input="updateEmail"
+          type="email"
+          v-model="email"
+          id="username"
+          autocomplete="username"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
+          class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
+          placeholder="mail@exemple.com"
+          :aria-invalid="{ true: !isValidEmail }"
+          required
+        />
+      </div>
+      <div class="field | w-full" role="group" aria-labelledby="password">
+        <label for="password">Mot de passe</label>
+        <input
+          :type="isPasswordVisible ? 'text' : 'password'"
+          v-model="password"
+          id="password"
+          autocomplete="current-password"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
+          class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
+          required
+        />
+        <button
+          class="btn btn--white btn--icon"
+          type="button"
+          :aria-pressed="isPasswordVisible ? 'true' : 'false'"
+          aria-controls="password"
+          @click="isPasswordVisible = !isPasswordVisible"
+          :title="isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'"
+        >
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path v-if="isPasswordVisible" d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path>
+            <path v-else d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"></path>
+          </svg>
+          <span class="sr-only">{{ isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe' }}</span>
+        </button>
+      </div>
+      <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
+      <div class="sr-only" id="announce" aria-live="assertive">
+        {{ isPasswordVisible ? 'Mot de passe affiché' : 'Mot de passe masqué' }}
+      </div>
+      <button
+        @click="login"
+        :class="submitBtn.state"
+        class="btn | w-full text-md"
+        type="submit"
+        :disabled="submitBtn.state === 'pending' ? true : undefined"
+      >
+        {{ submitBtn.message }}
+      </button>
+    </form>
+  </div>
 </template>
 <script setup>
 import { ref, watch } from 'vue';
@@ -103,11 +121,44 @@ async function login() {
 </script>
 
 <style scoped>
+.wrapper {
+  height: calc(100svh - var(--gutter) * 2);
+  padding: 0;
+}
+
+form::before {
+  content: 'Design to Pack';
+  text-align: center;
+  height: 8rem;
+  width: 100%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='144' height='53' class='logo-courval' viewBox='0 0 144 53'%3E%3Cdefs%3E%3Cpath id='a' d='M0 52h144V0H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(0 .5)'%3E%3Cpath fill='%23717373' d='M11.3210912 45.6153321c.5185261-.5146003 1.2495928-.7882083 2.1162459-.7882083 2.0521173 0 2.9700733 1.5293052 2.9700733 3.0441146 0 1.4713221-.9289495 3.0567984-2.9700733 3.0567984-2.0191368 0-2.9499185-1.5854763-2.9590798-3.0586104-.0054967-.9059864.2931596-1.7068785.8428339-2.2540943m2.1162459-1.8608963c-2.8161645 0-4.07675078 2.0638373-4.07675078 4.1077427 0 1.9913583 1.27524428 4.1367343 4.07675078 4.1367343 2.7868486 0 4.0657574-2.1326922 4.0767508-4.1149906.007329-1.1977141-.4067589-2.2722141-1.1634772-3.0241828-.7274022-.7229773-1.7351384-1.1053036-2.9132736-1.1053036M24.7888436 44.8379957c.8226792 0 1.5885587.3080354 2.1547232.869747l.1813925.1775733.8116857-.6957976-.207044-.2047529c-.7805375-.7719005-1.8249186-1.1977141-2.9407574-1.1977141-1.2147801 0-2.25.3950101-2.997557 1.1415429-.7567182.7574047-1.1671416 1.8192209-1.1543159 2.9879434.0109935 2.01129 1.2990635 4.0406997 4.1518729 4.0406997 1.1158388 0 2.1602199-.4258136 2.9407574-1.1977141l.1978827-.197505-.7823697-.7302251-.1868892.1811973c-.569829.5544637-1.36136.8715589-2.1693812.8715589-2.220684 0-3.0287052-1.6126559-3.0470276-2.9933793-.0036645-.8969266.2949918-1.6905708.8446661-2.2377866.5368485-.534532 1.2990635-.8153878 2.2023615-.8153878M42.926079 48.3760541h4.4175489v-1.0618162H42.926079v-2.3591888h4.6337541v-1.0835598H41.808408v7.9998606h5.8815146v-1.0944316H42.926079zM50.5802932 44.9340302h2.7263843v6.9380445h1.1286645v-6.9380445h2.7245521v-1.0509443h-6.5796009zM63.5113803 50.9481497h-1.0920196v-3.8667503h1.0920196c1.3357085 0 1.9550081.9458499 1.9733306 1.8826399.0109935.5598997-.1868892 1.0871838-.5423453 1.4459544-.3499592.3515228-.8428338.538156-1.4309853.538156m0-4.7836086h-2.0411238v5.7077148h2.0411238c.8648208 0 1.6013844-.2808558 2.1272394-.8135759.5240228-.530908.8135179-1.2973726.7951954-2.1055125-.0311482-1.342672-.9600977-2.7886264-2.9224348-2.7886264M72.2669585 49.6458847c0 .9567218-.6907574 1.3934072-1.3338763 1.3934072-.3499592 0-.6760993-.1214022-.9161237-.3424629-.2711727-.2500522-.414088-.6142588-.414088-1.0509443v-3.4808h-.939943v3.4808c0 .7048575.2455212 1.2991846.7127443 1.7213743.4122557.3714545.9655945.5780194 1.5574104.5780194 1.1304968 0 2.2756515-.7900202 2.2756515-2.2993937v-3.4808h-.9417752v3.4808ZM82.3146376 44.8379957c.8226792 0 1.5885587.3080354 2.1547231.869747l.1813926.1775733.8116856-.6957976-.2070439-.2047529c-.7805375-.7719005-1.8249186-1.1977141-2.9407574-1.1977141-1.2147801 0-2.25.3950101-2.997557 1.1415429-.7567182.7574047-1.1671417 1.8192209-1.1543159 2.9879434.0109934 2.01129 1.2990635 4.0406997 4.1518729 4.0406997 1.1158388 0 2.1602199-.4258136 2.9407574-1.1977141l.1978827-.197505-.7823697-.7302251-.1887215.1811973c-.5679968.5544637-1.3595277.8715589-2.1675489.8715589-2.220684 0-3.0287052-1.6126559-3.0470277-2.9933793-.0054967-.8969266.2949919-1.6905708.8446662-2.2377866.5350162-.534532 1.2990635-.8153878 2.2023615-.8153878M89.9250611 45.6153321c.518526-.5146003 1.2495928-.7882083 2.1162459-.7882083 2.0521173 0 2.9700733 1.5293052 2.9700733 3.0441146 0 1.4713221-.9289495 3.0567984-2.9700733 3.0567984-2.0191368 0-2.9499186-1.5854763-2.9590798-3.0586104-.0054967-.9059864.2931596-1.7068785.8428339-2.2540943m2.1162459-1.8608963c-2.8161645 0-4.0767508 2.0638373-4.0767508 4.1077427 0 1.9913583 1.2752443 4.1367343 4.0767508 4.1367343 2.7868485 0 4.0657573-2.1326922 4.0767508-4.1149906.007329-1.1977141-.4067589-2.2722141-1.1634772-3.0241828-.7274023-.7229773-1.7351384-1.1053036-2.9132736-1.1053036M104.800529 48.7777685c0 1.4640741-1.060871 2.1308802-2.04662 2.1308802-.536849 0-1.037052-.1866332-1.405334-.5254722-.41592-.3841382-.63579-.9404139-.63579-1.605408v-4.9050108h-1.117671v4.9050108c0 .9839013.3444625 1.8119729.991246 2.3972402.573493.5164123 1.343037.802704 2.167549.802704 1.572068 0 3.164291-1.0998676 3.164291-3.1999442v-4.9050108h-1.117671v4.9050108ZM122.360607 50.2429298l-2.607289-6.3708969h-1.216612l3.329194 8.0197923h.989414l3.327361-8.0197923h-1.21478zM130.002178 48.9658513l1.606881-3.6003903 1.606882 3.6003903h-3.213763Zm1.117671-5.093456-3.62785 7.9980486h1.223942l.819014-1.8319046h4.150041l.830008 1.8319046h1.222109l-3.62785-7.9980486h-.989414ZM139.753583 50.7883337v-6.9163008h-1.126832v7.9998606h5.37215v-1.0835598zM1.12683225 44.9447209h2.45337948c1.10667752 0 1.6105456.8516273 1.6105456 1.6434595 0 .4348735-.14474756.8407554-.40492671 1.137919-.28949512.3297791-.70541531.5037285-1.20561889.5037285H1.44381107L2.064943 49.293456h1.51526873c1.79193811 0 2.73004886-1.3644156 2.73004886-2.7107116 0-1.3462959-.93811075-2.7107115-2.73004886-2.7107115H0v7.9998606h1.12683225v-6.9271726Z'/%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23717373' d='M30.9979642 51.8731619h1.1268322v-7.9998606h-1.1268322zM36.7867671 48.4827793v3.3883894h1.1268322v-7.9980486h-1.1268322v3.547843h-4.344259l.6192997 1.0618162zM110.889271 44.9447209h2.464373c.470888 0 .868485.1485818 1.148819.4276256.273005.2736079.425082.6668061.421417 1.0799359-.007329.6885497-.296824 1.5129974-1.634365 1.5129974h-2.083265l.632125 1.0817479h.716409l2.607288 2.8248658h1.50794l-2.704397-2.9009687c.57899-.0942226 1.0682-.3297791 1.438314-.6976096.458062-.4584291.707248-1.1016795.699919-1.810161-.010994-1.2865008-.960098-2.5911213-2.750204-2.5911213h-3.591205v7.9998606h1.126832v-6.9271726Z' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='M80.4451954 30.3683044H63.5537052L55.107044 15.9015123l8.4466612-14.46679211h16.8914902l8.4466613 14.46679211-8.4466613 14.4667921Zm9.5221906-15.4941808L81.8816775 1.02702627c-.370114-.6360025-1.0553746-1.02738866-1.7974348-1.02738866H63.914658c-.7420603 0-1.4273209.39138616-1.7992671 1.02738866L54.0315147 14.8741236c-.3719463.6360025-.3719463 1.4187749 0 2.0547774l8.0838762 13.8470973c.3719462.6360025 1.0572068 1.0273887 1.7992671 1.0273887h16.1695847c.7420602 0 1.4273208-.3913862 1.7974348-1.0273887L89.967386 16.928901c.370114-.6360025.370114-1.4187749 0-2.0547774Z' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='m73.1178542 10.2746115.058632.063419c1.9311889 2.0982647 2.9096091 4.0642554 2.9096091 5.8418008 0 2.6907799-1.7186482 4.6458987-4.0877443 4.6458987-2.3672639 0-4.0877443-1.9551188-4.0877443-4.6458987 0-1.7775454.9802524-3.7435361 2.9114413-5.8418008l.058632-.063419c-1.9788274-1.85908429-4.0309447-3.19450836-4.0309447-3.19450836l-5.1504478 8.82249636 5.1504478 8.8206844h10.2990636l5.1504478-8.8206844-5.1504478-8.82249636s-2.0521173 1.33542407-4.0309447 3.19450836' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='M71.9992671 19.2502195c1.52443 0 2.4955212-1.3807234 2.4955212-3.0712941 0-1.5818524-1.1158388-3.2814831-2.4955212-4.7799847-1.3796824 1.4985016-2.4955212 3.1981323-2.4955212 4.7799847 0 1.6905707.9710912 3.0712941 2.4955212 3.0712941' mask='url(%23b)'/%3E%3C/g%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12rem;
+  display: grid;
+  place-items: flex-end;
+  justify-content: center;
+}
+
 .error {
   color: #ee6767;
 }
 
-input.invalid:focus-visible {
-  outline: 2px solid #ef8d8d;
+[aria-invalid="true"]:focus-visible {
+  outline-color: #ef8d8d;
+}
+
+[aria-controls="password"] {
+  position: absolute;
+  right: var(--space-8);
+  bottom: var(--space-8);
+  max-height: unset;
+  height: 2rem;
+  padding: var(--space-8);
+  border: none;
+}
+[aria-controls="password"] > svg {
+  width: 1rem;
+  height: 1rem;
 }
 </style>