diff --git a/static/css/main.css b/static/css/main.css
index 75d7ddd..ed7494c 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -35,7 +35,7 @@ img {
 }
 
 p {
-    font-size: 1.5vw;
+    
     font-weight: 300;
 }
 
@@ -134,22 +134,57 @@ a:hover {
     height: 400px;
 }
 
-.login-input {
+form {
+    margin-top: 25vh;
+    margin-bottom: 10vh;
+    padding: 0px;
+    width: 50vw;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
 
+.form-group {
+    margin: 10px;
+    width: 100%;
+}
+
+input {
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #d75b00;
+    height: 40px;
+    background: none;
+    padding: 5px;
+}
+
+input:focus {
+    outline: none;
+    border-bottom: 2px solid #923e01;
+}
+
+button[type="submit"] {
+    padding: 5px 10px;
+    height: 30px;
+    outline: 1px solid #d75b00;
+    background: none;
+    border: none;
+    font-family: inherit;
+    color: #d75b00;
+    transition-property: all;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-out;
+}
+
+button[type="submit"]:hover {
+    cursor: pointer;
+    background-color: #d75b00;
+    color: #ffffff;
 }
 
 @media screen and (max-width: 800px) {
-    #container {
-        padding: 2vw;
-    }
-}
-
-@media screen and (max-width: 600px) {
-    h1 {
-        font-size: 40px;
-    }
-    #wrapper{
-        background: none;
+    .bg-full {
+        display: none;
     }
     #container {
         margin: 0px;
@@ -163,5 +198,16 @@ a:hover {
     }
     .row-section {
         flex-direction: column;
+        width: 100%;
+        align-items: center;
+    }
+    h1 {
+        font-size: 40px;
+    }
+    #wrapper{
+        background: none;
+    }
+    #container {
+        padding: 2vw;
     }
 }
diff --git a/static/index.html b/static/index.html
index d4b58dc..64bca7c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -56,7 +56,7 @@
                         </a>
                         <p id="prank-desc">
                             OSS 110'Metz est une organisation remplie d'espions qualifiés pour remplir presque toutes tes demandes !
-                            Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user">Rezo</a>
+                            Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user" target="_blank">Rezo</a> 
                             est nécessaire afin de garantir l'identité des demandeurs !
                         </p>
                     </div>
@@ -78,14 +78,33 @@
                     Copyright © OSS 110'Metz
                 </footer>
             </div>
+            
             <div id="admin-page" style="display: none">
 
             </div> <!-- end admin page -->
 
-            <div id="login-page">
-                <input type="text" class="login-input" placeholder="Nom d'utilisateur Rezo" name="login" id="login"/>
-                <input type="password" class="login-input" placeholder="Password" name="password" id="password" />
-                <input type="button" class="login-submit">Se connecter</button>
+            <div id="login-page" style="display: block;">
+                <div class="row">
+                    <form id="login-form" method="POST">
+                        <div class="form-group">
+                            <input type="text" class="form-control" placeholder="Nom d'espion" name="login" id="login"/>
+                        </div>
+                        <div class="form-group">
+                            <input type="password" class="form-control" placeholder="Mot de passe secret" name="password" id="password" />
+                        </div>
+                        <div class="form-group">
+                            <button type="submit" class="btn btn-primary">Se connecter</button>
+                        </div>
+                    </form>
+                </div>
+                <hr/>
+                <div class="row banner">
+                    <h2>Notice de l'espion</h2>
+                    <p id="notice-espion">
+                        Seul les espions reconnus par le Rézo pourrons se connecter pour jouer des tours à leurs camarrades.
+                        Si tu n'es pas encore un espion reconnu, tu peux le devenir <a href="https://re2o.rezo-rm.fr/users/new_user" target="_blank">ici</a>.
+                    </p>
+                </div>
             </div> <!-- end login page -->
 
             <div id="demande-page" style="display: none">
diff --git a/static/js/anim.js b/static/js/anim.js
index 31670c1..5744db3 100644
--- a/static/js/anim.js
+++ b/static/js/anim.js
@@ -1,4 +1,4 @@
-var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc");
+var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc, #notice-espion");
 var $window = $(window)
 
 function check_if_in_view() {
@@ -14,13 +14,18 @@ function check_if_in_view() {
     
         //check to see if this current container is within viewport
         if ((element_bottom_position >= window_top_position) &&
-            (element_top_position <= window_bottom_position)) {
+            (element_top_position <= window_bottom_position) && $element.is(':visible')) {
             if(!$element.hasClass('animated')) {
                 $element.addClass('animated');
-                new TypeIt('#' + $element.attr('id'), {
+                var a = new TypeIt('#' + $element.attr('id'), {
                     speed: 30,
+                    lifeLike: true,
                 })
                 .go();
+                $element.click(function () {
+                    a.
+                    a.options({speed: 20, lifeLike: false});
+                });
             }
         }
     });