diff --git a/modoboa/extensions/webmail/static/webmail/css/webmail.css b/modoboa/extensions/webmail/static/webmail/css/webmail.css
index f3b709d82..dd85f5f6b 100644
--- a/modoboa/extensions/webmail/static/webmail/css/webmail.css
+++ b/modoboa/extensions/webmail/static/webmail/css/webmail.css
@@ -97,7 +97,11 @@ body, html {
 .nav-sidebar li > a {
     padding-top: 7px;
     padding-bottom: 7px;
-} 
+}
+
+.nav-sidebar li li { 
+    margin-left: 10px;
+}
 
 #mboxes_container a[name=loadfolder] {
     white-space: nowrap;
@@ -190,14 +194,10 @@ div.expanded {
     background-repeat: no-repeat;
 }
 
-div#leftcol #mboxes_container .nav .droppable div.clickbox{
+div#leftcol #mboxes_container .nav .droppable div.clickbox {
     z-index: 800;
 }
 
-li.droppable li{
-    margin-left: 10px;
-}
-
 /*
  * Compose form
  */
diff --git a/modoboa/extensions/webmail/static/webmail/js/webmail.js b/modoboa/extensions/webmail/static/webmail/js/webmail.js
index c250ee9a2..d49de0ba8 100644
--- a/modoboa/extensions/webmail/static/webmail/js/webmail.js
+++ b/modoboa/extensions/webmail/static/webmail/js/webmail.js
@@ -1,5 +1,9 @@
-/*
- * The javascript code that brings the webmail to life!
+/**
+ * Creates an instance of Webmail.
+ *
+ * @constructor
+ * @param {Object} options - instance options
+ * @classdesc The javascript code that brings the webmail to life!
  */
 var Webmail = function(options) {
     this.initialize(options);
@@ -99,6 +103,11 @@ Webmail.prototype = {
         this.listen();
     },
 
+    /**
+     * Register navigation callbacks.
+     *
+     * @this Webmail
+     */
     register_navcallbacks: function() {
         this.navobject.register_callback(
             "listmailbox", $.proxy(this.listmailbox_callback, this));
@@ -330,6 +339,12 @@ Webmail.prototype = {
         }
     },
 
+    /**
+     * Update the current displayed content.
+     *
+     * @this Webmail
+     * @param {Object} response - object containing the new content
+     */
     page_update: function(response) {
         var curmb = this.get_current_mailbox();
 
@@ -431,8 +446,11 @@ Webmail.prototype = {
         }
     },
 
-    /*
-     * Inject a new *clickbox* somewhere in the tree
+    /**
+     * Inject a new *clickbox* somewhere in the tree.
+     *
+     * @this Webmail
+     * @param {Object} $container - box container
      */
     inject_clickbox: function($container) {
         $container.prepend($("<div />", {'class' : 'clickbox collapsed'}));
@@ -467,10 +485,12 @@ Webmail.prototype = {
         return $li;
     },
 
-    /*
+    /**
      * Inject new mailboxes under a given parent in the tree.
      *
-     * $parent must be a <li> node.
+     * @this Webmail
+     * @param {Object} $parent - an existing <li> node.
+     * @param {Array} mboxes - list of mailboxes to inject
      */
     inject_mailboxes: function($parent, mboxes) {
         var $ul = $("<ul />", {
@@ -500,6 +520,10 @@ Webmail.prototype = {
 
     /**
      * Download mailboxes from the server.
+     *
+     * @this Webmail
+     * @param {Object} parent - parent node where mailboxes will be appended
+     * @param {boolean} async - if true, the ajax call will be asynchronous
      */
     get_mailboxes: function(parent, async) {
         if (async === undefined) {
@@ -519,6 +543,10 @@ Webmail.prototype = {
      * Open/Close a mailbox with children.
      *
      * This is an internal method.
+     *
+     * @this Webmail
+     * @param {Object} $div - the <div/> that was clicked
+     * @param {Object} $ul - the <ul/> element to show/hide
      */
     toggle_mbox_state: function($div, $ul) {
         if ($ul.hasClass("hidden")) {
@@ -531,15 +559,19 @@ Webmail.prototype = {
     },
 
     /**
-     * Open or close a mailbox (user triggered).
+     * Click event : open or close a mailbox (user triggered).
      *
      * The first time it is opened, sub mailboxes will be downloaded
      * from the server and injected into the tree.
+     *
+     * @this Webmail
+     * @param {Object} e - event object
      */
     mbox_state_callback: function(e) {
         e.preventDefault();
+        e.stopPropagation();
         var $div = $(e.target);
-        var $parent = $div.parents("li");
+        var $parent = $div.parents("li").first();
         var $ul = $parent.find('ul[name="' + $parent.attr("name") + '"]');
 
         if (!$ul.length) {
@@ -549,15 +581,18 @@ Webmail.prototype = {
         this.toggle_mbox_state($div, $ul);
     },
 
-    /*
-     * Unselect every selected mailbox
+    /**
+     * Unselect every selected mailbox.
      */
     reset_mb_selection: function() {
         $("a[name=loadfolder]").parent().removeClass("active").addClass("droppable");
     },
 
     /**
-     * Select a particular mailbox (one already present in the DOM)
+     * Select a particular mailbox (one already present in the DOM).
+     *
+     * @this Webmail
+     * @param {Object|string} obj - mailbox to select
      */
     select_mailbox: function(obj) {
         var $obj = (typeof obj != "string") ? $(obj) : $('a[href="' + obj + '"]');
@@ -568,10 +603,13 @@ Webmail.prototype = {
         $obj.parent().addClass("active");
     },
 
-    /*
-     * Tries to select a particular sub-mailbox and loads it from the
+    /**
+     * Try to select a particular sub-mailbox and load it from the
      * server if it's not present in the DOM. (nb: all parents needed
      * to access this mailbox are also loaded)
+     *
+     * @this Webmail
+     * @param {string} mailbox - mailbox to select
      */
     load_and_select_mailbox: function(mailbox) {
         if (mailbox.indexOf(this.options.hdelimiter) == -1) {
@@ -847,7 +885,7 @@ Webmail.prototype = {
      * Onclick callback used to load the content of a particular
      * mailbox. (activated when clicking on a mailbox's name)
      */
-    _listmailbox_loader: function(event, obj) {
+    _listmailbox_loader: function(event, obj, reset_page) {
         if (event) {
             event.preventDefault();
         }
@@ -856,10 +894,20 @@ Webmail.prototype = {
         }
         this.navobject.reset().setparams({
            action: "listmailbox",
-           mbox: obj.attr("href")
-        }).update();
+           mbox: obj.attr("href"),
+        });
+        if (reset_page) {
+            this.navobject.setparam("reset_page", reset_page);
+        }
+        this.navobject.update();
     },
 
+    /**
+     * Click event: list the content of a particular mailbox.
+     *
+     * @this Webmail
+     * @param {Object} event - event object
+     */
     listmailbox_loader: function(event) {
         var $target = get_target(event, "a");
 
@@ -868,7 +916,7 @@ Webmail.prototype = {
             return;
         }
         this.select_mailbox(event.target);
-        this._listmailbox_loader(event, $target);
+        this._listmailbox_loader(event, $target, true);
     },
 
     /*
@@ -954,8 +1002,11 @@ Webmail.prototype = {
      * Ajax navigation callbacks
      */
 
-    /*
-     * 'listmailbox' callback
+    /**
+     * Navigation callback: listmailbox.
+     *
+     * @this Webmail
+     * @param {Object} resp - ajax response (JSON)
      */
     listmailbox_callback: function(resp) {
         this.store_nav_params();
diff --git a/modoboa/extensions/webmail/templates/webmail/attachments.html b/modoboa/extensions/webmail/templates/webmail/attachments.html
index e416654a7..22d02a7de 100644
--- a/modoboa/extensions/webmail/templates/webmail/attachments.html
+++ b/modoboa/extensions/webmail/templates/webmail/attachments.html
@@ -18,7 +18,7 @@
     <div class="col-sm-12">
       <a href="{% url 'webmail:attachment_delete' %}?name={{ att.tmpname }}"
          name="delattachment">
-        <span class="glyphicon glyphicon-remove"></span>
+        <span class="fa fa-remove"></span>
       </a>
       <label>{{ att.fname }}</label>
     </div>
diff --git a/modoboa/extensions/webmail/templatetags/webmail_tags.py b/modoboa/extensions/webmail/templatetags/webmail_tags.py
index e59439936..238bad08a 100644
--- a/modoboa/extensions/webmail/templatetags/webmail_tags.py
+++ b/modoboa/extensions/webmail/templatetags/webmail_tags.py
@@ -125,8 +125,10 @@ def listmailbox_menu(selection, folder, user):
 
 
 @register.simple_tag
-def print_mailboxes(tree, selected=None, withunseen=False, selectonly=False, hdelimiter='.'):
-    """Display a tree of mailboxes and sub-mailboxes
+def print_mailboxes(
+        tree, selected=None, withunseen=False, selectonly=False,
+        hdelimiter='.'):
+    """Display a tree of mailboxes and sub-mailboxes.
 
     :param tree: the mailboxes to display
     """
@@ -148,10 +150,6 @@ def print_mailboxes(tree, selected=None, withunseen=False, selectonly=False, hde
             cssclass += " unseen"
             extra_attrs = ' data-toggle="%d"' % mbox["unseen"]
 
-        result += "<a href='%s' class='%s' name='%s'%s>" % (
-            "path" in mbox and mbox["path"] or mbox["name"], cssclass,
-            'selectfolder' if selectonly else 'loadfolder', extra_attrs
-        )
         if "sub" in mbox:
             if selected is not None and selected != name and selected.count(name):
                 ul_state = "visible"
@@ -161,6 +159,11 @@ def print_mailboxes(tree, selected=None, withunseen=False, selectonly=False, hde
                 div_state = "collapsed"
             result += "<div class='clickbox %s'></div>" % div_state
 
+        result += "<a href='%s' class='%s' name='%s'%s>" % (
+            "path" in mbox and mbox["path"] or mbox["name"], cssclass,
+            'selectfolder' if selectonly else 'loadfolder', extra_attrs
+        )
+
         iclass = mbox["class"] if "class" in mbox \
             else "fa fa-folder"
         result += "<span class='%s'></span> %s</a>" % (iclass, label)
@@ -173,6 +176,7 @@ def print_mailboxes(tree, selected=None, withunseen=False, selectonly=False, hde
         result += "</li>\n"
     return result
 
+
 @register.simple_tag
 def mboxes_menu():
     """Mailboxes menu."""