diff --git a/www/img/background-login.jpg b/www/img/background-login.jpg
new file mode 100644
index 0000000..fd7c361
Binary files /dev/null and b/www/img/background-login.jpg differ
diff --git a/www/login/index.html b/www/login/index.html
index 99d02e9..01fe0e9 100644
--- a/www/login/index.html
+++ b/www/login/index.html
@@ -10,14 +10,14 @@
 <body>
     <div class="container">
         <form action="#" method="POST">
-            <h3>S'identifier</h3>
+            <h3>Se connecter :</h3>
             <div class="Input">
                 <span>Identifiant (eMail)</span>
                 <div class="box">
                     <div class="icon">
                         <ion-icon name="person-circle-outline"></ion-icon>
                     </div>
-                    <input type="text" name="username" required>
+                    <input type="input" class="form__field" placeholder="email" name="name" id='name' required />
                 </div>
             </div>
             <div class="Input">
@@ -26,11 +26,20 @@
                     <div class="icon">
                         <ion-icon name="lock-closed"></ion-icon>
                     </div>
-                    <input type="password" name="password" required>
+                    <input type="password" class="form__field" placeholder="mot de passe" name="password" id="password" required>
                 </div>
             </div>
-            <a href="#" class="forgot">Mot de passe oublié</a>
-            <br><a href="register.html" class="register">S'inscrire</a>
+            <label>
+                <input type="checkbox">Se souvenir de moi
+            </label>
+            <div class="Input">
+                <div class="box">
+                    <input type="submit" value="Se connecter" >
+                </div>
+            </div>
+
+            <a href="#" class="forgot">J'ai oublier mon mot de passe</a>
+            <br><a href="register.html" class="register">Je n'ai pas encore de compte</a>
         </form>
     </div>
 </body>
diff --git a/www/login/login.css b/www/login/login.css
index a1911c0..1995152 100644
--- a/www/login/login.css
+++ b/www/login/login.css
@@ -13,7 +13,10 @@ body{
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: #585858;
+    background-image: url("../img/background-login.jpg");
+    -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
+    backdrop-filter: blur(35px);
+    background-color: rgba(182, 182, 182, 0.2);
 }
 
 .container{
@@ -22,4 +25,99 @@ body{
     min-height: 550px;
     justify-content: center;
     align-items: center;
-}
\ No newline at end of file
+    background: #F2561D;
+    box-shadow: 25px 25px 75px rgba(0,0,0,0.25), 10px 10px 70px rgba(0,0,0,0.5);
+    border-radius: 30px;
+    padding: 50px;
+}
+
+form{
+    position: relative;
+    width: 100%;
+}
+
+.container h3{
+    color: #0D0D0D;
+    font-weight: 600;
+    font-size: 2em;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 30px;
+    letter-spacing: 1px;
+}
+container a:link{
+    color: #0D0D0D;
+}
+container a:visited{
+    color: #0D0D0D;
+}
+
+container a:hover{
+    color: #0D0D0D;
+}
+.Input{
+    position: relative;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.Input span{
+    display: inline-block;
+    color: #0D0D0D;
+    margin-bottom: 10px;
+    letter-spacing: 1px;
+    font-size: 1.25em;
+    border-left: 4px solid #FF8444;
+    padding-left: 4px;
+    line-height: 1em;
+}
+.Input .box{
+    display: flex;
+}
+
+.Input .box .icon{
+    position: relative;
+    min-width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    margin-right: 10px;
+    color: #0D0D0D;
+    font-size: 1.15em;
+    box-shadow: 5px 5px 7px rgba(0,0,0,0.25);
+}
+
+.Input .box input{
+    position: relative;
+    width: 100%;
+    border: none;
+    outline: none;
+    padding: 10px 20px;
+    border-radius: 30px;
+    font-size: 0.85em;
+    box-shadow: 5px 5px 7px rgba(0,0,0,0.25);
+}
+
+.Input .box input[type="submit"]{
+    background-color: #0D0D0D;
+    box-shadow: 5px 5px 7px rgba(0,0,0,0.25);
+    color: #FF8444;
+    cursor:pointer;
+    letter-spacing: 2px;
+    font-weight: 600;
+    margin-top: 10px;
+}
+label{
+    color: #0D0D0D;
+    letter-spacing: 1px;
+    font-size: 0.95em;
+    display: flex;
+    align-items: center;
+}
+
+label input{
+    margin-right: 5px;
+}
+
