diff --git a/MANIFEST.in b/MANIFEST.in
index 02a707cf3..88324387f 100644
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -1,5 +1,5 @@
 include README.rst COPYING requirements.txt
-recursive-include modoboa *.html *.js *.css *.png *.po *.mo *.json *.gif
+recursive-include modoboa *.html *.js *.css *.png *.po *.mo *.json *.gif *.ttf *.woff
 recursive-include modoboa/core/templates *.tpl
 recursive-include modoboa/core/commands/templates *.tpl
 recursive-include doc *
diff --git a/modoboa/extensions/webmail/static/webmail/css/webmail.css b/modoboa/extensions/webmail/static/webmail/css/webmail.css
index aa5b1961b..1ff81f3e1 100644
--- a/modoboa/extensions/webmail/static/webmail/css/webmail.css
+++ b/modoboa/extensions/webmail/static/webmail/css/webmail.css
@@ -1,4 +1,12 @@
-    /* MEDIA */
+/* MEDIA */
+#listing {
+    position: absolute;
+    overflow: auto;
+    top: 60px;
+    padding: 0;
+    margin: 0;
+}
+
 @media (max-width: 400px) {
     td#subject,
     td[name='subject']
@@ -18,14 +26,24 @@
     }
 }
 
-@media (max-width: 770px) {
-    #searchbox{
+@media (max-width: 768px) {
+    #searchbox {
         margin-left: 20px;
     }
+
+    td[name=from] { 
+        width: 35%;
+    }
+}
+
+@media (min-width: 768px) {
+    td[name=from] { 
+        width: 20%;
+    }
 }
 
 @media (max-width: 1198px) {
-    .container-fluid{
+    .container-fluid {
         padding:0;
     }
     th#date,
@@ -38,13 +56,11 @@
     th#withatts,
     td[name="withatts"],
     th#drag,
-    td[name="drag"]{
+    td[name="drag"] {
         display: none;
     }
-    #leftcol.leftcol-display-none{
-        display: none;
-    }
-    .display-up-1198-webmail{
+  
+    .display-up-1198-webmail {
         display: none;
     }
     .display-less-1198{
@@ -53,13 +69,20 @@
 
 }
 
+@media (min-width: 1198px) { 
+
+    #listing {
+        padding-left: 15px;
+    }
+}
+
 /* GENERAL */
 body, html {
     /*overflow: hidden;*/
 }
 
 #rightcol { 
-/*    padding-top: 20px;*/
+    position: relative;
 }
 
 #folders {
@@ -99,8 +122,8 @@ body, html {
 }
 
 .nav-sidebar > li > a {
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 7px;
+    padding-bottom: 7px;
 } 
 
 #mboxes_container a[name=loadfolder] {
@@ -144,34 +167,6 @@ td[name="date"] {
     display: inline-block;
 }
 
-/*
- *listing
- */
-#listing {
-    overflow: auto;
-    padding-top: 60px;
-}
-#listing.listing-up-1198 {
-    padding-left: 15px;
-}
-#listing.listing-less-1198 {
-    bottom: 0px;
-    left: 0px;
-    padding-left: 0px;
-    right: 0;
-    top: 0px;
-    overflow-y: hidden;
-}
-
-#listing .test {
-    overflow-y: scroll;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 41px;
-    bottom: 41px;
-}
-
 /*
  * Mailboxes list
  */
@@ -322,8 +317,9 @@ td[class*=openable] {
  */
 
 #menubar { 
-    background-color: #fff;
-    position: fixed;
+    /*background-color: #fff;*/
+    position: absolute;
+    top: 0;
     padding-top: 20px;
     z-index: 100;
 }
diff --git a/modoboa/extensions/webmail/static/webmail/js/webmail.js b/modoboa/extensions/webmail/static/webmail/js/webmail.js
index 36de81c9e..4c422f657 100644
--- a/modoboa/extensions/webmail/static/webmail/js/webmail.js
+++ b/modoboa/extensions/webmail/static/webmail/js/webmail.js
@@ -43,87 +43,6 @@ Webmail.prototype = {
             bottom: $("#bottom-bar").outerHeight(true) + "px"
         });
 
-
-
-        /* Responsive */
-
-        /* Responsive -> init */
-        if ($(window).width() < 1198) {
-            $("#leftcol").addClass(
-                "leftcol-display-none"
-            );
-            $("#listing").css({
-                height: $(window).height() - 150 + 'px'
-            });
-        }
-
-        if ($(window).width() > 1198) {
-            /*$("#folders").css({
-                bottom: $("#bottom-bar").outerHeight(true) + 10,
-                width: this.options.mboxes_col_width + 'px'
-            });*/
-            /*$("#folders").innerWidth(this.options.mboxes_col_width);*/
-              
-            $("#listing").addClass(
-                "listing-up-1198"
-            );
-
-
-            /*$("#listing").css({
-                height: $(window).height() - 180 + 'px'
-            });*/
-
-            /*$("#rightcol").css({
-                marginLeft: 200 + 'px',
-                paddingRight: 90 + 'px'
-            });*/
-        }
-
-        /* Responsive -> on resizing window */
-        var that = this;
-        $(window).resize(function() {
-
-            if ($(window).width() < 767) {
-                $("tr td[name='from']").css({
-                    width: 35 + '%'
-                });
-            }
-            if ($(window).width() > 767) {
-                $("tr td[name='from']").css({
-                    width: 20 + '%'
-                });
-            }
-
-            if ($(window).width() < 1198) {
-                $("#leftcol").addClass(
-                    "leftcol-display-none"
-                );
-                $("#listing").addClass(
-                    "col-lg-12 col-md-12 col-ms-12 col-xs-12"
-                );
-                /*$("#listing").css({
-                    height: $(window).height() - 150 + 'px'
-                });*/
-                $("#listing").removeClass(
-                    "listing-up-1198"
-                );
-            }
-
-            if ($(window).width() > 1198) {
-                $("#folders").css({
-                    /*bottom: $("#bottom-bar").outerHeight(true) + 10,*/
-                    width: that.options.mboxes_col_width + 'px'
-                });
-                $("#listing").addClass(
-                    "listing-up-1198"
-                );
-                //$("#listing").height($(window).height());
-                // $("#listing").css({
-                //     height: $(window).height() + 'px'
-                // });
-            }
-        });
-
         /* Responsive -> on resizing folders (leftcol) */
         $("#folders").resizable({
             start: function(event, ui) {
@@ -178,7 +97,7 @@ Webmail.prototype = {
     },
 
     listen: function() {
-        $(window).resize(this.resize);
+        $(window).resize($.proxy(this.resize, this));
 
         $(document).on("click", "a[name=compose]", $.proxy(this.compose_loader, this));
         $(document).on("click", "a[name=totrash]", $.proxy(this.delete_messages, this));
@@ -221,9 +140,63 @@ Webmail.prototype = {
         this.unseen_counters = unseen_counters;
     },
 
+    /**
+     * Global resize event callback.
+     */
     resize: function() {
         /*$("#mboxes_container").height(
             $("#folders").height() - $("#mboxactions").height());*/
+        var $window = $(window);
+        var current_action = this.navobject.getparam("action");
+
+        if ($window.width() > 1198) {
+            $("#folders").css({
+                /*bottom: $("#bottom-bar").outerHeight(true) + 10,*/
+                width: this.options.mboxes_col_width + 'px'
+            });
+        }
+        if (current_action == "listmailbox") {
+            this.resize_listing("auto");
+        } else if (current_action == "viewmail") {
+            this.resize_listing("hidden");
+        } else if (current_action == "compose") {
+            this.resize_compose_body();
+        }
+    },
+
+    /**
+     * Resize the "listing" div.
+     */
+    resize_listing: function(overflow) {
+        $("#listing").css("overflow", overflow);
+        $("#listing").height(
+            $("#bottom-bar").offset().top - 
+            ($("#menubar").offset().top + $("#menubar").outerHeight())
+        );
+    },
+
+    /**
+     * Resize the textarea used to write plain/text messages.
+     */
+    resize_compose_body: function() {
+        var $container = $("#body_container");
+
+        if ($container.length) {
+            var top = $container.offset().top;
+            var bottom = $("#bottom-bar").offset().top;
+
+            $("#body_container").innerHeight(bottom - top - 10);
+        }
+    },
+
+    /*
+     * Callback of the 'compose' action.
+     *
+     * It is also shared with other similar actions : reply, forward.
+     */
+    resize_editor: function() {
+        CKEDITOR.instances[this.editorid].resize("100%",
+            $("#body_container").outerHeight(true));
     },
 
     /*
@@ -308,7 +281,6 @@ Webmail.prototype = {
             $("#pagination-responsive").html(response.navbar);
         }
         $("#listing").html(response.listing);
-        $("body").css("overflow", "auto");
     },
 
     /*
@@ -402,7 +374,7 @@ Webmail.prototype = {
             href: mailbox
         });
         var parts = mailbox.split(this.options.hdelimiter);
-        var linkcontent = "<i class='glyphicon glyphicon-folder-close'></i> ";
+        var linkcontent = "<span class='glyphicon glyphicon-folder-close'></span> ";
         var displayname = linkcontent + parts[parts.length - 1];
 
         $li.append($link);
@@ -703,7 +675,7 @@ Webmail.prototype = {
             url: url,
             dataType: 'json'
         }).done($.proxy(function(data) {
-            if (cb != undefined) {
+            if (cb !== undefined) {
                 cb.apply(this, [data]);
             }
         }, this));
@@ -892,28 +864,24 @@ Webmail.prototype = {
         $("#emails").htmltable();
         this.htmltable = $("#emails").data("htmltable");
         this.init_draggables();
+        this.resize_listing("auto");
     },
 
-    /*
-     * Callback of the 'compose' action.
-     *
-     * It is also shared with other similar actions : reply, forward.
-     */
-    resize_editor: function() {
-        CKEDITOR.instances[this.editorid].resize("100%",
-            $("#body_container").outerHeight(true));
-    },
+   
 
     add_field: function(e, name) {
         e.preventDefault();
         $("label[for=id_" + name + "]").parent().show();
         $(e.target).hide();
-        this.position_body();
+        this.resize_compose_body();
         if (this.editormode == "html") {
             this.resize_editor();
         }
     },
 
+    /**
+     * Compose form loading and initialization.
+     */
     compose_callback: function(resp) {
         this.page_update(resp);
         $("#add_cc").click($.proxy(function(e) { this.add_field(e, "cc"); }, this));
@@ -936,15 +904,7 @@ Webmail.prototype = {
         if (resp.id !== undefined) {
             this.navobject.setparam("id", resp.id).update(false, true);
         }
-        this.position_body();
-    },
-
-    position_body: function() {
-        var $container = $("#body_container");
-        var top = $container.offset().top;
-        var bottom = $("#bottom-bar").offset().top;
-
-        $("#body_container").height(bottom - top - 30);
+        this.resize_compose_body();
     },
 
     /*
@@ -952,9 +912,8 @@ Webmail.prototype = {
      */
     viewmail_callback: function(resp) {
         this.page_update(resp);
-        $("#listing").css("overflow", "hidden");
-        $("body").css("overflow", "hidden");
-        $("a[name=close]").click($.proxy(function(e) {
+        this.resize_listing("hidden");
+        $("a[name=back]").click($.proxy(function(e) {
             e.preventDefault();
             this.go_back_to_listing();
         }, this));
@@ -966,7 +925,7 @@ Webmail.prototype = {
         } else {
             this.htmltable.current_selection().addClass("unseen");
         }
-        if (data.unseen != undefined && data.mbox) {
+        if (data.unseen !== undefined && data.mbox) {
             this.set_unseen_messages(data.mbox, data.unseen);
         }
     },
diff --git a/modoboa/extensions/webmail/templates/webmail/index.html b/modoboa/extensions/webmail/templates/webmail/index.html
index a8c5b2b11..1a00293d5 100644
--- a/modoboa/extensions/webmail/templates/webmail/index.html
+++ b/modoboa/extensions/webmail/templates/webmail/index.html
@@ -32,17 +32,17 @@ $(document).ready(function() {
 
 {% block fixed_content %}
 <div class="row">
-  <div id="leftcol" class="col-lg-2 col-md-3 col-ms-3 col-xs-0 sidebar">
+  <div id="leftcol" class="col-lg-2 col-md-3 col-sm-3 col-xs-0 sidebar">
     <!--<div class="row">-->
       {{ mboxes }}
     <!--</div>-->
   </div>
-  <div id="rightcol" class="col-lg-offset-2 col-lg-10 col-md-offset-3 col-md-9 col-ms-offset-3 col-ms-9 col-xs-12">
+  <div id="rightcol" class="col-lg-offset-2 col-lg-10 col-md-offset-3 col-md-9 col-sm-offset-3 col-sm-9 col-xs-12">
     <div class="row">
-      <div id="menubar" role="navbar" class="col-lg-12 col-md-12 col-ms-12 col-xs-12"></div>
+      <div id="menubar" role="navbar" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
     </div>
     <div class="row">
-    <div id="listing" class="col-lg-12 col-md-12 col-ms-12 col-xs-12"></div>
+    <div id="listing" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
     </div>
   </div>
 </div>
diff --git a/modoboa/lib/templatetags/form_tags.py b/modoboa/lib/templatetags/form_tags.py
index aad499651..fd1e2a18d 100644
--- a/modoboa/lib/templatetags/form_tags.py
+++ b/modoboa/lib/templatetags/form_tags.py
@@ -67,6 +67,7 @@ def render_field_with_activator(field, activator_label=ugettext_lazy("activate")
 
 @register.simple_tag
 def render_and_hide_field(field):
+    configure_field_classes(field)
     return render_to_string("common/generic_field.html", dict(
         field=field, hidden=True
     ))
diff --git a/modoboa/static/css/custom.css b/modoboa/static/css/custom.css
index e2c95b0f2..28404dd1c 100644
--- a/modoboa/static/css/custom.css
+++ b/modoboa/static/css/custom.css
@@ -19,7 +19,7 @@
      }
 
      tr th#tags,
-     tr.muted td[name="tags"]{
+     td[name="tags"] {
          display: none;
      }
      button.navbar-toggle[data-target="#navigate-navbar-collapse"]{
@@ -106,6 +106,7 @@
 /* Global */
 body { 
     padding-top: 50px;
+    padding-bottom: 50px;
 }
 
 h5 {
@@ -197,7 +198,7 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
     color: white;
 }
 
-#pagination-responsive #pagination_bar{
+#pagination-responsive #pagination_bar {
     display: none;
 }
 
@@ -242,10 +243,6 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
 
  /* listing */
 
-#listing {
-    /*margin-bottom:60px;*/
-}
-
 /* Bottom navBar*/
 
 .nav-bottom {
@@ -273,7 +270,7 @@ html body div.navbar div.container-fluid div#navigate-navbar-collapse.collapse u
     display: inline;
     cursor: pointer;
 }
-.simplepagination li i{
+.simplepagination li span {
     color: white;
     margin-bottom: 15px;
     margin-top: 15px;
diff --git a/modoboa/templates/common/pagination_bar.html b/modoboa/templates/common/pagination_bar.html
index 1ae30be3b..054dfab91 100644
--- a/modoboa/templates/common/pagination_bar.html
+++ b/modoboa/templates/common/pagination_bar.html
@@ -1,28 +1,42 @@
 <div id="pagination_bar" class="simplepagination">
   <ul>
+    {% if page.has_previous %}
     <li>
-      {% if page.has_previous %}<a href="{{ baseurl }}page=1">
-        <i class="glyphicon glyphicon-fast-backward"></i></a>{% else %}
-      <i class="glyphicon glyphicon-fast-backward"></i>{% endif %}
+      <a href="{{ baseurl }}page=1">
+        <span class="glyphicon glyphicon-fast-backward"></span></a>
     </li>
     <li>
-      {% if page.has_previous %}<a href="{{ baseurl }}page={{ page.previous_page_number }}">
-      <i class="glyphicon glyphicon-step-backward"></i></a>{% else %}
-      <i class="glyphicon glyphicon-step-backward"></i>{% endif %}
+      <a href="{{ baseurl }}page={{ page.previous_page_number }}">
+        <span class="glyphicon glyphicon-step-backward"></span></a>
     </li>
+    {% else %}
+    <li>
+      <span class="glyphicon glyphicon-fast-backward"></span>
+    </li>
+    <li>
+      <span class="glyphicon glyphicon-step-backward"></span>
+    </li>
+    {% endif %}
     <li class="disabled navbar-text">
       {{ page.number }}/{{ page.paginator.num_pages }}
     </li>
+    {% if page.has_next %}
     <li>
-      {% if page.has_next %}<a href="{{ baseurl }}page={{ page.next_page_number }}">
-      <i class="glyphicon glyphicon-step-forward"></i></a>{% else %}
-      <i class="glyphicon glyphicon-step-forward"></i>{% endif %}
+      <a href="{{ baseurl }}page={{ page.next_page_number }}">
+      <span class="glyphicon glyphicon-step-forward"></span></a>
     </li>
     <li>
-      {% if page.has_next %}<a href="{{ baseurl }}page={{ page.paginator.num_pages }}">
-      <i class="glyphicon glyphicon-fast-forward"></i></a>{% else %}
-      <i class="glyphicon glyphicon-fast-forward"></i>{% endif %}
+      <a href="{{ baseurl }}page={{ page.paginator.num_pages }}">
+      <span class="glyphicon glyphicon-fast-forward"></span></a>
     </li>
+    {% else %}
+    <li>
+      <span class="glyphicon glyphicon-step-forward"></span>
+    </li>
+    <li>
+      <span class="glyphicon glyphicon-fast-forward"></span>
+    </li>
+    {% endif %}
   </ul>
 </div>
 
@@ -37,4 +51,4 @@
     {% else %}
         <a class="btn btn-lg btn-link glyphicon glyphicon-chevron-right" type="button"></a>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/modoboa/templates/nlayout.html b/modoboa/templates/nlayout.html
index 12e4aa22b..f57f7493f 100644
--- a/modoboa/templates/nlayout.html
+++ b/modoboa/templates/nlayout.html
@@ -42,7 +42,7 @@
         <div class="navbar-header">
           <button class="navbar-toggle" data-target="#navigate-navbar-collapse" data-toggle="collapse" type="button">
             <span class="sr-only">Toggle navigation</span>
-            <span class="">Mailbox</span>
+            <span class="">{% trans "Menu" %}</span>
           </button>
         </div>
 
@@ -97,7 +97,7 @@
       </div>
     </div>
     {% block content %}{% endblock %}
-    <div class="display-up-1198 nav-bottom">
+    <!--<div class="display-up-1198 nav-bottom">-->
       <div id="bottom-bar" class="navbar navbar-inverse navbar-fixed-bottom">
         <div class="container-fluid">
           <div id="bottom-bar-left" class="col-lg-4 col-md-4 col-sm-4 col-xs-0">
@@ -112,6 +112,6 @@
           </div>
         </div>
       </div>
-    </div>
+    <!--</div>-->
   </body>
 </html>
diff --git a/modoboa/templates/twocols.html b/modoboa/templates/twocols.html
index ccf218c11..d968f0750 100644
--- a/modoboa/templates/twocols.html
+++ b/modoboa/templates/twocols.html
@@ -1,10 +1,10 @@
 {% extends "fluid.html" %}
 {% load core_tags %}
 {% block rowcontent %}
-<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 sidebar">
+<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 sidebar">
   {% block leftcol %}{% endblock %}
 </div>
-<div class="main col-lg-offset-2 col-lg-10 col-md-offset-3 col-md-9 col-sm-offset-4 col-sm-8 col-xs-12">
+<div class="main col-lg-offset-2 col-lg-10 col-md-offset-2 col-md-10 col-sm-offset-3 col-sm-9 col-xs-12">
   {% if messages %}{% display_messages messages %}{% endif %}
   {% block apparea %}{% endblock %}
 </div>