diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index da21a9c18..1a94ddaf2 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -150,33 +150,27 @@
       <md-content md-scroll-y="md-scroll-y" class="md-flex">
         <md-list>
           <md-list-item ng-repeat="folder in addressbooks track by folder.id"
-              ng-class="{_selected: addressbook.id==folder.id}"
-              ng-dblclick="edit($index)">
-              <i class="sg-child-level-0" ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
-              <md-button class="sg-folder">
-                <form ng-submit="save($index)">
-                  <a ui-sref="addressbook({addressbookId: folder.id})"
-                     ng-click="select($index)"
-                     ng-show="editMode!=folder.id"
-                     ng-cloak="ng-cloak">{{folder.name}}
-                  </a>
-                  <input class="folder-name" type="text"
-                         ng-model="folder.name"
-                         ng-show="editMode==folder.id"
-                         ng-cloak="ng-cloak"
-                         ng-blur="save($index)"
-                         sg-focus-on="addressBookName_{{$index}}"
-                         sg-escape="revertEditing($index)"/>
-                </form>
-              </md-button>
-              <span class="icon" ng-cloak="ng-cloak">
-                <a class="icon" href="#"
-                    dropdown-toggle="#addressbookProperties"
-                    options="align:right"
-                    ng-show="currentFolderIsConfigurable(folder)">
-                  <i class="md-icon-more-vert"><!-- options --></i>
-                </a>
-              </span>
+                        ui-sref-active="sg-active"
+                        ng-dblclick="edit($index)">
+            <i ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
+            <button class="md-button md-flex sg-item-name"
+                    ng-show="editMode!=folder.id"
+                    ng-click="select($index)"
+                    ng-cloak="ng-cloak"
+                    ui-sref="addressbook({addressbookId: folder.id})">{{folder.name}}</button>
+            <md-input-container
+                class="md-flex md-tile-content"
+                ng-show="editMode==folder.id">
+              <input class="folder-name" type="text"
+                     ng-model="folder.name"
+                     ng-cloak="ng-cloak"
+                     ng-blur="save($index)"
+                     sg-focus-on="addressBookName_{{$index}}"
+                     sg-enter="save($index)"
+                     sg-escape="revertEditing($index)"/>
+            </md-input-container>
+            <i class="md-icon-more-vert"
+               ng-show="currentFolderIsConfigurable(folder)"><!-- options --></i>
           </md-list-item>
         </md-list>
       </md-content>
@@ -231,7 +225,8 @@
               <div
                   ng-class="{_selected: card.id == currentCard.id}"
                   ng-click="select($index); toggleDetailView()"
-                  layout="row">
+                  layout="row"
+                  flex="true">
                 <div class="sg-avatar">
                   <!--avatar--><!-- currentCard.tag = vcard || vlist -->
                 </div>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index d5e70735a..d1fe23383 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -7,7 +7,7 @@
    xmlns:label="OGo:label"
    xmlns:uix="OGo:uix">
 
-<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1" ng-class="">
+<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
   <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
   <header class="msg-header">
 
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index bb890c838..9eab4d681 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -22,19 +22,23 @@
 
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
-      <md-content md-scroll-y="md-scroll-y" class="md-padding md-flex">
+      <md-content md-scroll-y="md-scroll-y" class="md-flex">
         <md-list>
-          <md-list-item>
-            <a ui-sref="preferences.general">General</a>
+          <md-list-item ui-sref-active="sg-active">
+            <button class="md-button md-flex sg-item-name"
+                    ui-sref="preferences.general"><var:string label:value="General"/></button>
           </md-list-item>
-          <md-list-item>
-            <a ui-sref="preferences.calendars">Calendar</a>
+          <md-list-item ui-sref-active="sg-active">
+            <button class="md-button md-flex sg-item-name"
+                    ui-sref="preferences.calendars"><var:string label:value="Calendar"/></button>
           </md-list-item>
-          <md-list-item>
-            <a ui-sref="preferences.addressbooks">Contacts</a>
+          <md-list-item ui-sref-active="sg-active">
+            <button class="md-button md-flex sg-item-name"
+                    ui-sref="preferences.addressbooks"><var:string label:value="Contacts"/></button>
           </md-list-item>
-          <md-list-item>
-            <a ui-sref="preferences.mailer">Mail</a>
+          <md-list-item ui-sref-active="sg-active">
+            <button class="md-button md-flex sg-item-name"
+                    ui-sref="preferences.mailer"><var:string label:value="Mail"/></button>
           </md-list-item>
         </md-list>
       </md-content>
diff --git a/UI/WebServerResources/js/Common/ui-desktop.js b/UI/WebServerResources/js/Common/ui-desktop.js
index 953a165a1..731e2f930 100644
--- a/UI/WebServerResources/js/Common/ui-desktop.js
+++ b/UI/WebServerResources/js/Common/ui-desktop.js
@@ -254,12 +254,12 @@
                 while (list[0].tagName != 'MD-LIST') {
                   list = list.parent();
                 }
-                items = list.find('md-item-content');
+                items = list.find('md-list-item');
 
                 // Highlight element as "loading"
                 items.removeClass('sg-active');
                 items.removeClass('sg-loading');
-                angular.element(iElement.find('md-item-content')[0]).addClass('sg-loading');
+                angular.element(iElement.find('md-list-item')[0]).addClass('sg-loading');
 
                 // Call external function
                 scope.selectFolder(scope.root, scope.folder);
@@ -283,11 +283,11 @@
                 while (list[0].tagName != 'MD-LIST') {
                   list = list.parent();
                 }
-                items = list.find('md-item-content');
+                items = list.find('md-list-item');
 
                 // Hightlight element as "selected"
-                angular.element(iElement.find('md-item-content')[0]).addClass('sg-active');
-                angular.element(iElement.find('md-item-content')[0]).removeClass('sg-loading');
+                angular.element(iElement.find('md-list-item')[0]).addClass('sg-active');
+                angular.element(iElement.find('md-list-item')[0]).removeClass('sg-loading');
 
                 // Show options button
                 angular.forEach(items, function(element) {
diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index 0b89bb06e..69ecbb467 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -1,4 +1,4 @@
-/// button.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// button.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 
 // sometimes fabs get squized
@@ -10,7 +10,9 @@
 // ------------------------------------
 sg-folder-tree .md-button,
 md-sidenav md-list button.md-button {
-  padding: 0;
+  // dirty fix to squash the theme style
+  background-color: transparent !important;
+  padding: 0 $mg;
   outline: none;
   color: inherit;
   text-transform: initial;
@@ -18,15 +20,6 @@ md-sidenav md-list button.md-button {
   -webkit-font-smoothing: auto;
 }
 
-.sg-folder {
-  text-align: left;
-  flex: 1;
-}
-
-.sg-active .md-button {
-  color: sg-color($sogoBlue, 800);
-}
-
 md-sidenav .md-button [class ^= "md-icon"] {
   margin-right: 1em;
 }
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index d54b438c5..367168deb 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -49,11 +49,6 @@ $i: 1;
   $i: $i + 1;
 }
 
-// Folder and mailboxes icons
-// ---------------------------------------
-  [class*="sg-child-level"] {
-    margin-right: 1em;
-  };
 // This hack is so BAD I am ashame putting it in the shame file
 // -----------------------------------------------------------
 // Folder tree's controler function are very intricate, the way
@@ -73,29 +68,23 @@ $i: 1;
   &.md-whiteframe-z1 {
     box-shadow: $sidenav-shadow-z1;
   }
-  button {
-    // dirty fix to squash the theme style
-    background-color: transparent !important;
-  }
-  md-item-content {
-    line-height: $sg-line-height-6; // 40px eg. display-1
-    padding: 0 $mg;
+  md-list-item {
     transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
                 color 0.12s linear;
     &:hover {
-      background-color: sg-color($sogoPaper, 500);
-      cursor: pointer;
+      background-color: sg-color($sogoBlue, 500);
     }
     &.sg-active {
-      color: sg-color($sogoBlue, 800);
+      background-color: sg-color($sogoBlue, 400);
     }
     &.sg-loading {
-      color: sg-color($sogoBlue, 500);
+      color: sg-color($sogoBlue, 200);
     }
     .sg-item-name, .md-label {
+      font-size: sg-size(button);
+      overflow: hidden;
       text-align: left;
       text-overflow: ellipsis;
-      overflow: hidden;
       white-space: nowrap;
     }
     .md-label {