diff --git a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
index dd836fb45..70b0408c8 100644
--- a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+++ b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
@@ -6,41 +6,49 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label"
     xmlns:uix="OGo:uix">
-  <md-dialog>
-  <md-content>
-    <md-input-container md-no-float="md-no-float" layout="row">
-      <i class="md-icon-search"><!--icon--></i>
-      <input ng-model="searchString" type="text" placeholder="Name" sg-user-typeahead="sg-user-typeahead"/>
-    </md-input-container>
-
-    <md-list>
-      <md-list-item ng-repeat="user in users" layout="column">
-        <md-button ng-click="selectUser($index)">
-          {{user.$shortFormat()}}
-          <i class="md-icon-chevron-right"
-             ng-show="user.uid != selectedUser.uid"><!--icon--></i>
-          <i class="md-icon-chevron-more"
-             ng-show="user.uid == selectedUser.uid"><!--icon--></i>
-        </md-button>
-
-        <md-list ng-if="user.uid == selectedUser.uid">
-          <md-list-item ng-show="user.$$folders.length == 0">
+  <md-dialog flex="50" flex-sm="100">
+    <md-content>
+      <md-input-container md-no-float="md-no-float" layout="row">
+        <i class="md-icon-search"><!--icon--></i>
+        <input ng-model="searchString" type="text" placeholder="Name" sg-user-typeahead="sg-user-typeahead"/>
+      </md-input-container>
+      <md-list>
+        <md-list-item
+            layout="column"
+            ng-repeat="user in users">
+          <md-button class="sg-expandable" ng-click="selectUser($index)">
+            <div layout="row" layout-align="space-between center" layout-fill="true">
+              <span class="sg-item-name">{{user.$shortFormat()}}</span>
+              <span class="md-display-1">
+                <i class="md-icon-expand-more"
+                   ng-show="user.uid != selectedUser.uid"><!--icon--></i>
+                <i class="md-icon-expand-less"
+                   ng-show="user.uid == selectedUser.uid"><!--icon--></i>
+              </span>
+            </div>
+          </md-button>
+          <md-list layout-fill="true" ng-if="user.uid == selectedUser.uid">
+            <md-list-item ng-show="user.$$folders.length == 0">
               <i class="md-icon-warning"><!-- no subscription --></i>
               <var:string label:value="No possible subscription"/>
-          </md-list-item>
-          <md-list-item
-              ng-repeat="folder in user.$$folders">
-              <i class="md-icon-contacts"
-                 ng-show="folder.type == 'Contact'"><!--icon--></i>
-              {{folder.displayName}}
-              <md-button class="button tiny right"
-                         ng-click="selectFolder(folder)">Subscribe</md-button>
-          </md-list-item>
-        </md-list>
-        <md-divider><!-- divider --></md-divider>
-      </md-list-item>
-    </md-list>
-    
-  </md-content>
+            </md-list-item>
+            <md-list-item
+                layout="row"
+                layout-fill="true"
+                ng-repeat="folder in user.$$folders">
+                <i class="md-icon-contacts md-padding"
+                   ng-show="folder.type == 'Contact'"><!--icon--></i>
+                <i class="md-icon-today md-padding"
+                   ng-show="folder.type == 'Appointment'"><!--icon--></i>
+                <p class="md-flex sg-item-name">{{folder.displayName}}</p>
+              <md-button
+                  class="md-raised"
+                  ng-click="selectFolder(folder)">Subscribe</md-button>
+            </md-list-item>
+          </md-list>
+          <md-divider ng-if="!$last"><!-- divider --></md-divider>
+        </md-list-item>
+      </md-list>
+    </md-content>
   </md-dialog>
 </container>
diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index 69ecbb467..bd5cc75d3 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -9,7 +9,7 @@
 // Buttons for the sidenav folder tree
 // ------------------------------------
 sg-folder-tree .md-button,
-md-sidenav md-list button.md-button {
+md-sidenav md-list .md-button {
   // dirty fix to squash the theme style
   background-color: transparent !important;
   padding: 0 $mg;
@@ -20,13 +20,18 @@ md-sidenav md-list button.md-button {
   -webkit-font-smoothing: auto;
 }
 
-md-sidenav .md-button [class ^= "md-icon"] {
+.md-sidenav-left .md-button [class^="md-icon"] {
   margin-right: 1em;
 }
-md-sidenav .md-button.iconButton.sg-button-navicon [class ^= "md-icon"] {
+md-sidenav .md-button.iconButton.sg-button-navicon [class^="md-icon"] {
   margin: 0;
 }
 
+// Expandable button for a collapsable list
+.sg-expandable {
+    width: 100%;
+}
+
 ///
 /// iconButton
 /// according to Material design specs:
@@ -61,9 +66,10 @@ $button-fab-height: 56px;
   // z-index provides a stacking context that prevent ripple-effect from overflowing
   z-index: 1;
   overflow: hidden;
-  padding: $iconButton-padding;
+  padding: $iconButton-padding 0;
   border-radius: 50%;
   color: inherit;
+  min-width: $iconButton-size;
   transition: $iconButton-transition;
 
   &:hover:not(.md-fab),
@@ -197,6 +203,7 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
   //margin-left: ($mg * -1);
   width: $touch-zone;
   height: $touch-zone;
+  line-height: $touch-zone;
 }
 
 // angular-material is overspecifying so we are and so we have to continue
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 301c577f7..c5d63f074 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -1,4 +1,4 @@
-/// list.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
+/// list.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 // List variables
 // ----------------------------------------------------------------------------
@@ -21,6 +21,17 @@
 //$item-padding-left: 0px !default;
 //$item-padding-bottom: 0px !default;
 
+// List item label
+md-list {
+    .sg-item-name {
+      font-size: sg-size(button);
+      text-transform: initial;
+      overflow: hidden;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+}
 
 // The right tile for a list item.
 // ----------------------------------------------------------------------------