diff --git a/static/css/main.css b/static/css/main.css
index 6ffc3a5..04c93f7 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -50,18 +50,6 @@ h1 {
     background-position-x: right;
 }
 
-@media screen and (max-width: 800px) {
-    .container {
-        margin: 0px;
-        width: 100%;
-        border-radius: 0px;
-        box-shadow: none;
-    }
-    body {
-        margin: 0px;
-    }
-}
-
 .logo>img {
     height: 220px;
     margin-left: 3vw;
@@ -88,8 +76,9 @@ hr::before {
     content: url('../img/divider.svg');
 }
 
+
 p {
-    font-size: 1.5vw;
+    
     font-weight: 300;
 }
 
@@ -176,7 +165,56 @@ img {
     text-align: center;
 }
 
-@media screen and (max-width: 600px) {
+
+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) {
     .bg-full {
         display: none;
     }
@@ -195,6 +233,8 @@ img {
     }
     .row {
         flex-direction: column;
+        width: 100%;
+        align-items: center;
     }
 
     .col {
@@ -209,4 +249,8 @@ img {
     h1 {
         font-size: 40px;
     }
-}
+
+    form {
+        width: 85vw;
+    }
+}
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 9dbbb1a..5e1a80f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -33,7 +33,7 @@
     <body>
         <div class="bg-full"></div>
         <div class="container">
-            <div id="main-page">
+            <div id="main-page" style="display: none;">
                 <div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
                 <div class="row banner">
                     <h1>Prochaine activité</h1>
@@ -87,20 +87,28 @@
                 
             </div> <!-- end admin page -->
 
-            <div id="login-page" style="display: none">
+            <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'utilisateur Rezo" name="login" id="login"/>
+                            <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="Password" name="password" id="password" />
+                            <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">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..66166b6 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,7 +14,7 @@ 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'), {
