diff --git a/portal/assets/css/ynh-style.css b/portal/assets/css/ynh-style.css
index 6847183..b2d9d76 100644
--- a/portal/assets/css/ynh-style.css
+++ b/portal/assets/css/ynh-style.css
@@ -1,19 +1,18 @@
 /* ==========================================================================
    Sommaire
-   1 = Layout general
+   1 = Global
    2 = Apps
    3 = User
-   4 = Login Form
+   4 = Form
    5 = Colors
-   6 = Form Edit
    ========================================================================== */
 
 /* ==========================================================================
-   1 = Layout general
+   1 = Global
    ========================================================================== */
 
 body {
-  background: #41444F;
+  background: #41444f;
   font-family: 'source_sans_proregular';
   overflow-y: scroll;
 }
@@ -43,7 +42,7 @@ body {
 }
 
 .logo img {
-  margin-top: 1em;
+  margin-top: 4%;
   width: 4em;
 }
 
@@ -75,7 +74,7 @@ body {
   text-align: center;
   width: 21em;
   margin: 2% auto;
-  padding: 1.5em 0;
+  padding: 1.5em;
 }
 
 .logged .messages {
@@ -100,7 +99,7 @@ h6 {
 }
 
 .cwhite {
-  color: #FFF;
+  color: #fff;
 }
 
 select, 
@@ -128,6 +127,7 @@ textarea {
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: 'ynh_ssowat';
+  font-size: 1em;
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -171,7 +171,7 @@ textarea {
   width: 2.7em;
   height: 2.7em;
   background: #666;
-  color: #FFFFFF;
+  color: #fff;
   font-size: 4em;
           transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
@@ -241,7 +241,7 @@ textarea {
 
 .user-container { padding: 0.4em 1em; }
 
-.user-container a { color: #FFF; }
+.user-container a { color: #fff; }
 
 .user-container h2 {
   font-size: 1.5em;
@@ -265,13 +265,25 @@ textarea {
 
 .user-img {
   margin-right: 1em;
-  border: 3px solid #FFF;
-  width: 4em;
-  height: 4em;
-  border-radius: 90px;
-  overflow: hidden;
   margin: 0.2em auto;
 }
+.user-img:before {
+  content: '\e801';
+  display: block;
+  font-family: 'ynh_ssowat';
+  font-size: 4em;
+  text-align: center;
+  border: 3px solid #fff;
+  width: 1em;
+  height: 1em;
+  border-radius: 90px;
+  background: #b4b4b4;
+  color: #dedede;
+  overflow: hidden;
+}
+.user-img:hover:before {
+  color: #fff;
+}
 
 .user-menu {
   float: right;
@@ -281,13 +293,11 @@ textarea {
     display: block;
     padding: 1.25em 3em;
     position: relative;
-            transition: all 0.3s ease;
-    -webkit-transition: all 0.3s ease;
     z-index: 1;
   }
     .user-menu a:hover,
     .user-menu a:focus {
-      color: #FFF;
+      color: #fff;
     }
 
 
@@ -300,7 +310,7 @@ textarea {
 /* Extend artichaut-buttons.css */
 .link-btn { background: none;}
   .link-btn:hover, 
-  .link-btn:focus {background: none;text-decoration: underline;}
+  .link-btn:focus {background: #41444f;text-decoration: underline;}
 
 
 .form-text {
@@ -310,21 +320,24 @@ textarea {
 
 
 .form-section {
-  /*float: left;*/
   display: inline-block;
   vertical-align: top;
   width: 47%;
 }
-.form-section + .form-section {margin-left:5%;}
+.form-section + .form-section {margin-left: 5%;}
+
+@media screen and (max-width: 768px) {
+  .form-section {width: 100%;}
+  .form-section + .form-section {margin-left: 0;}
+}
 
 label {
   display: inline-block;
   padding: 0.3em 1em;
-  background: rgba(0, 0, 0, 0.25);
-  color: #FFF;
+  background: #30333b;
+  color: #fff;
   font-size: 1.2em;
   margin-top: 1em;
-  margin-bottom: 0em;
   font-family: 'source_sans_probold';
   font-weight: normal;
 }
@@ -332,17 +345,20 @@ label {cursor: pointer;}
 
 label + .help-link {
   display: inline-block;
+  padding: 0.3em 1em;
+  font-size: 1.2em;
+  background: #41444f;
   color: #fff;
   font-weight: bold;
-  margin-left: 1em;
 }
+label + .help-link:hover {background: #30333b;}
 
 .btn {
   cursor: pointer;
 }
 
 .btn-group {
-  margin-top: 4em;
+  margin: 4em 0;
   text-align: right;
 }
 
@@ -352,40 +368,38 @@ label + .help-link {
 }
 
 .form-text {
-  background: #41444F;
-  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
-  color: #FFFFFF;
+  border: 0;
+  background: #797b83;
+  color: #fff;
   padding: 0.8em;
   margin-bottom: 0.3em;
   display: block;
+  position: relative;z-index: 1; /* prevent strange label overlap */
 }
-.form-test:-moz-placeholder{color:#999999;}
-.form-text::-moz-placeholder{color:#999999;}
-.form-text:-ms-input-placeholder{color:#999999;}
-.form-text::-webkit-input-placeholder{color:#999999;}
-
+.form-test:-moz-placeholder{color:#ccc;}
+.form-text::-moz-placeholder{color:#ccc;}
+.form-text:-ms-input-placeholder{color:#ccc;}
+.form-text::-webkit-input-placeholder{color:#ccc;}
+:empty:invalid {box-shadow: none;}
 
 .form-text:last-child {margin-bottom:0;}
 
 .form-text:hover,
 .form-text:focus {
-  background-color: rgba(255, 255, 255, 0.15);
+  background-color: #5d5f68;
 }
 
-.form-text:disabled { color: #999; }
+.form-text:disabled { color: #ccc; }
 .form-text:disabled:hover {background-color:rgba(255, 255, 255, 0.3);}
 input:disabled {
   cursor: not-allowed;
 }
 
 
-
-/* ==========================================================================
-   4 = Login form
-   ========================================================================== */
+/* Login form */
 
 .login-form {
-  width: 21em;
+  max-width: 21em;
   margin: 0 auto;
 }
 
@@ -397,7 +411,7 @@ input:disabled {
 .login-form .form-group {
   position: relative;
   margin-bottom: 1em;
-  background: #FFF;
+  background: #fff;
 }
 
   .login-form label {
@@ -409,188 +423,27 @@ input:disabled {
   }
 
   .login-form label:before {
-    background: #EEE;
+    background: #eee;
     color: #666;
     position: absolute;
+    z-index: 2;
     top: 0;
     left: 0;
     width: 2.5em;
     height: 100%;
-    line-height: 2.5em;
+    line-height: 3em;
     text-align: center;
   }
 
   .login-form .form-text {
     padding: 0.8em 0.8em 0.8em 3em;
     width: 100%;
-    background: #FFF;
-    color: #41444F;
+    background: #fff;
+    color: #41444f;
   }
 
 
-/* ==========================================================================
-   5 = Colors
-   ========================================================================== */
-
-.listing-apps .purplebg {
-    background: #9B59B6!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.purplebg:hover:after, 
-.purplebg:focus:after, 
-.purplebg:hover:before, 
-.purplebg:focus:before {
-    background: #532C64!important;
-}
-.yellowbg {
-    background: #F1C40F!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.yellowbg:hover:after, 
-.yellowbg:focus:after, 
-.yellowbg:hover:before, 
-.yellowbg:focus:before {
-    background: #796307!important;
-}
-.pinkbg {
-    background: #D66D92!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.pinkbg:hover:after, 
-.pinkbg:focus:after, 
-.pinkbg:hover:before, 
-.pinkbg:focus:before {
-    background: #992B52!important;
-}
-.orangebg {
-    background: #F39C12!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.orangebg:hover:after, 
-.orangebg:focus:after, 
-.orangebg:hover:before, 
-.orangebg:focus:before {
-    background: #7F5006!important;
-}
-.redbg {
-    background: #E74C3C!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.redbg:hover:after, 
-.redbg:focus:after, 
-.redbg:hover:before, 
-.redbg:focus:before {
-    background: #921E12!important;
-}
-.turquoisebg {
-    background: #1ABC9C!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.turquoisebg:hover:after, 
-.turquoisebg:focus:after, 
-.turquoisebg:hover:before, 
-.turquoisebg:focus:before {
-    background: #0B4C3F!important;
-}
-.bluebg {
-    background: #3498DB!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.bluebg:hover:after, 
-.bluebg:focus:after, 
-.bluebg:hover:before, 
-.bluebg:focus:before {
-    background: #16527A!important;
-}
-.greenbg {
-    background: #2ECC71!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.greenbg:hover:after, 
-.greenbg:focus:after, 
-.greenbg:hover:before, 
-.greenbg:focus:before {
-    background: #176437!important;
-}
-.darkbluebg {
-    background: #34495E!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.darkbluebg:hover:after, 
-.darkbluebg:focus:after, 
-.darkbluebg:hover:before, 
-.darkbluebg:focus:before {
-    background: #07090C!important;
-}
-.lightbluebg {
-    background: #6A93D4!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.lightbluebg:hover:after, 
-.lightbluebg:focus:after, 
-.lightbluebg:hover:before, 
-.lightbluebg:focus:before {
-    background: #2B5394!important;
-}
-.lightpinkbg {
-    background: #F76F87!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.lightpinkbg:hover:after, 
-.lightpinkbg:focus:after, 
-.lightpinkbg:hover:before, 
-.lightpinkbg:focus:before {
-    background: #DA0C31!important;
-}
-.lightyellow {
-    background: #FFC973!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.lightyellow:hover:after, 
-.lightyellow:focus:after, 
-.lightyellow:hover:before, 
-.lightyellow:focus:before {
-    background: #F39500!important;
-}
-.lightgreen {
-    background: #B5F36D!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.lightgreen:hover:after, 
-.lightgreen:focus:after, 
-.lightgreen:hover:before, 
-.lightgreen:focus:before {
-    background: #77CF11!important;
-}
-.purpledarkbg {
-    background: #8E44AD!important;
-            transition: all 0.2s ease 0s;
-    -webkit-transition: all 0.2s ease 0s;
-}
-.purpledarkbg:hover:after, 
-.purpledarkbg:focus:after, 
-.purpledarkbg:hover:before, 
-.purpledarkbg:focus:before {
-    background: #432051!important;
-}
-
-/* ==========================================================================
-   6 = Form Edit
-   ========================================================================== */
-
+/* Edit form*/
 
 .form-edit .form-group .btn:before {
   content:"+";
@@ -600,6 +453,145 @@ input:disabled {
 }
 
 
-.form-section:first-child .btn-group {
-  text-align: left;
+@media screen and (min-width: 768px) {
+  .form-edit .btn-group {
+    float: right;
+  }
+  .form-edit .btn-group + .btn-group {
+    float: left;
+  }
 }
+
+/* ==========================================================================
+   5 = Colors
+   ========================================================================== */
+
+.listing-apps .purplebg {
+    background: #9B59B6!important;
+}
+.purplebg:hover:after, 
+.purplebg:focus:after, 
+.purplebg:hover:before, 
+.purplebg:focus:before {
+    background: #532C64!important;
+}
+.yellowbg {
+    background: #F1C40F!important;
+}
+.yellowbg:hover:after, 
+.yellowbg:focus:after, 
+.yellowbg:hover:before, 
+.yellowbg:focus:before {
+    background: #796307!important;
+}
+.pinkbg {
+    background: #D66D92!important;
+}
+.pinkbg:hover:after, 
+.pinkbg:focus:after, 
+.pinkbg:hover:before, 
+.pinkbg:focus:before {
+    background: #992B52!important;
+}
+.orangebg {
+    background: #F39C12!important;
+}
+.orangebg:hover:after, 
+.orangebg:focus:after, 
+.orangebg:hover:before, 
+.orangebg:focus:before {
+    background: #7F5006!important;
+}
+.redbg {
+    background: #E74C3C!important;
+}
+.redbg:hover:after, 
+.redbg:focus:after, 
+.redbg:hover:before, 
+.redbg:focus:before {
+    background: #921E12!important;
+}
+.turquoisebg {
+    background: #1ABC9C!important;
+}
+.turquoisebg:hover:after, 
+.turquoisebg:focus:after, 
+.turquoisebg:hover:before, 
+.turquoisebg:focus:before {
+    background: #0B4C3F!important;
+}
+.bluebg {
+    background: #3498DB!important;
+}
+.bluebg:hover:after, 
+.bluebg:focus:after, 
+.bluebg:hover:before, 
+.bluebg:focus:before {
+    background: #16527A!important;
+}
+.greenbg {
+    background: #2ECC71!important;
+}
+.greenbg:hover:after, 
+.greenbg:focus:after, 
+.greenbg:hover:before, 
+.greenbg:focus:before {
+    background: #176437!important;
+}
+.darkbluebg {
+    background: #34495E!important;
+}
+.darkbluebg:hover:after, 
+.darkbluebg:focus:after, 
+.darkbluebg:hover:before, 
+.darkbluebg:focus:before {
+    background: #07090C!important;
+}
+.lightbluebg {
+    background: #6A93D4!important;
+}
+.lightbluebg:hover:after, 
+.lightbluebg:focus:after, 
+.lightbluebg:hover:before, 
+.lightbluebg:focus:before {
+    background: #2B5394!important;
+}
+.lightpinkbg {
+    background: #F76F87!important;
+}
+.lightpinkbg:hover:after, 
+.lightpinkbg:focus:after, 
+.lightpinkbg:hover:before, 
+.lightpinkbg:focus:before {
+    background: #DA0C31!important;
+}
+.lightyellow {
+    background: #FFC973!important;
+}
+.lightyellow:hover:after, 
+.lightyellow:focus:after, 
+.lightyellow:hover:before, 
+.lightyellow:focus:before {
+    background: #F39500!important;
+}
+.lightgreen {
+    background: #B5F36D!important;
+}
+.lightgreen:hover:after, 
+.lightgreen:focus:after, 
+.lightgreen:hover:before, 
+.lightgreen:focus:before {
+    background: #77CF11!important;
+}
+.purpledarkbg {
+    background: #8E44AD!important;
+}
+.purpledarkbg:hover:after, 
+.purpledarkbg:focus:after, 
+.purpledarkbg:hover:before, 
+.purpledarkbg:focus:before {
+    background: #432051!important;
+}
+
+
+
diff --git a/portal/assets/img/avatar.png b/portal/assets/img/avatar.png
deleted file mode 100644
index b29e02d..0000000
Binary files a/portal/assets/img/avatar.png and /dev/null differ
diff --git a/portal/edit.html b/portal/edit.html
index 2804147..6b1f372 100644
--- a/portal/edit.html
+++ b/portal/edit.html
@@ -4,7 +4,7 @@
   </ul>
 
   <div class="user-container col colNomarge">
-    <a class="user-img" href="info.html"><img src="assets/img/avatar.png"></a>
+    <a class="user-img" href="info.html"></a>
     <div class="user-info">
       <h2><a href="info.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2>
       <span class="user-mail">{{mail}}</span>
@@ -25,10 +25,6 @@
         <input type="text" id="givenName" name="givenName" class="form-control form-text" value="{{givenName}}" placeholder="{{t_firstname}}" required>
         <input type="text" name="sn" class="form-control form-text" value="{{sn}}" placeholder="{{t_lastname}}" required>
       </div>
-
-      <div class="btn-group">
-        <a href="password.html" class="btn validate-btn large-btn">{{t_change_password}}</a>
-      </div>
     </div>
 
     <div class="form-section">
@@ -43,22 +39,25 @@
         <a class="btn link-btn" id="add-mailalias">{{t_add_mail}}</a>
       </div>
 
-        <div class="form-group" id="form-add-mail-drop">
-          <label for="mailforward" class="control-label">{{t_mail_forward}}</label>
-          <a class="help-link" href="#">?</a>
-          {{#maildrop}}
-          <input type="email" name="maildrop[]" class="form-control form-text" value="{{.}}">
-          <br>
-          {{/maildrop}}
-          <input id="mailforward" type="email" name="maildrop[]" class="form-control maildrop-input form-text" placeholder="{{t_new_forward}}">
-          <a class="btn link-btn" id="add-maildrop">{{t_add_forward}}</a>
-        </div>
-
-        <div class="btn-group">
-          <a href="info.html" class="btn large-btn">{{t_cancel}}</a>
-          <input type="submit" class="btn classic-btn large-btn" value="{{t_ok}}">
-        </div>
-
+      <div class="form-group" id="form-add-mail-drop">
+        <label for="mailforward" class="control-label">{{t_mail_forward}}</label>
+        <a class="help-link" href="#">?</a>
+        {{#maildrop}}
+        <input type="email" name="maildrop[]" class="form-control form-text" value="{{.}}">
+        {{/maildrop}}
+        <input id="mailforward" type="email" name="maildrop[]" class="form-control maildrop-input form-text" placeholder="{{t_new_forward}}">
+        <a class="btn link-btn" id="add-maildrop">{{t_add_forward}}</a>
       </div>
+    </div>
+
+    <div class="btn-group">
+      <a href="info.html" class="btn large-btn">{{t_cancel}}</a>
+      <input type="submit" class="btn classic-btn large-btn" value="{{t_ok}}">
+    </div>
+
+    <div class="btn-group">
+      <a href="password.html" class="btn validate-btn large-btn">{{t_change_password}}</a>
+    </div>
+
   </form>
 </div>
diff --git a/portal/info.html b/portal/info.html
index bacc404..6b79a01 100644
--- a/portal/info.html
+++ b/portal/info.html
@@ -4,7 +4,7 @@
   </ul>
 
   <div class="user-container col colNomarge">
-    <a class="user-img" href="edit.html"><img src="assets/img/avatar.png"></a>
+    <a class="user-img" href="edit.html"></a>
     <div class="user-info">
       <h2><a href="info.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2>
       <span class="user-mail">{{mail}}</span>
diff --git a/portal/password.html b/portal/password.html
index c7b8bdb..28101a4 100644
--- a/portal/password.html
+++ b/portal/password.html
@@ -3,7 +3,7 @@
     <li><a class="icon icon-connexion" href="?action=logout">{{t_logout}}</a></li>
   </ul>
   <div class="user-container col colNomarge">
-    <a class="user-img" href="info.html"><img src="assets/img/avatar.png"></a>
+    <a class="user-img" href="info.html"></a>
     <div class="user-info">
       <h2><a href="info.html">{{{uid}}}<small>{{givenName}} {{sn}}</small></a></h2>
       <span class="user-mail">{{mail}}</span>