diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2b304c9..4e9750a 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,19 +1,33 @@
 <template>
   <form
     @submit.prevent="handleSubmit"
-    class="w-full h-full p-16 flex flex-col"
-    style="--row-gap: 1rem"
+    class="px-24 py-32 flex flex-col mx-auto bg-white rounded-xl"
+    style="--row-gap: 1rem; max-width: 24em;"
   >
-    <input
-      type="text"
-      v-model="subject"
-      id="appointment-subject"
-      placeholder="Objet du rendez-vous"
-      class="w-full rounded-md border border-grey-200 px-16 py-12"
-      required
-    />
-    <label for="appointment-details" class="sr-only">Détails du projet</label>
-    <button @click="login" class="btn" type="submit">Soumettre</button>
+    <div class="field | w-full">
+      <label for="username">Email</label>
+      <input
+        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"
+        required
+      />
+    </div>
+    <div class="field | w-full">
+      <label for="password">Mot de passe</label>
+      <input
+        type="password"
+        v-model="password"
+        id="password"
+        autocomplete="current-password"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        required
+      />
+    </div>
+    <button @click="login" class="btn | w-full" type="submit">Connexion</button>
   </form>
 </template>
 <script setup>