diff --git a/UI/Contacts/English.lproj/Localizable.strings b/UI/Contacts/English.lproj/Localizable.strings
index e1a671c7e..4c49f587a 100644
--- a/UI/Contacts/English.lproj/Localizable.strings
+++ b/UI/Contacts/English.lproj/Localizable.strings
@@ -132,6 +132,8 @@
 "New Addressbook..." = "New Addressbook...";
 "Subscribe to an Addressbook..." = "Subscribe to an Addressbook...";
 "Remove the selected Addressbook" = "Remove the selected Addressbook";
+"Subscribe to a shared folder" = "Subscribe to a shared folder";
+"Search User" = "Search User";
 
 "Name of the Address Book" = "Name of the Address Book";
 "Are you sure you want to delete the selected address book?"
@@ -147,8 +149,6 @@
 "You cannot delete the card of \"%{0}\"."
 = "You cannot delete the card of \"%{0}\".";
 
-
-
 "You cannot subscribe to a folder that you own!"
 = "You cannot subscribe to a folder that you own.";
 "Unable to subscribe to that folder!"
diff --git a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
index ea76b92ce..b8b2e31d7 100644
--- a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+++ b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
@@ -8,31 +8,67 @@
     xmlns:uix="OGo:uix">
   <md-dialog flex="50" flex-sm="100">
     <md-dialog-content>
-      <h2 class="md-headline"><var:string label:value="Subscribe"/></h2>
+      <h2 class="md-title"><var:string label:value="Subscribe to a shared folder"/></h2>
       <md-input-container>
-        <label><md-icon>search</md-icon><var:string label:value="Search"/></label>
+        <label><md-icon>search</md-icon><var:string label:value="Search User"/></label>
         <input type="input"
                autocomplete="off"
-               ng-model="vm.searchText"
-               ng-model-options="vm.searchTextOptions"
-               ng-change="vm.onChange()"/>
+               ng-model="subscribe.searchText"
+               ng-model-options="subscribe.searchTextOptions"
+               ng-change="subscribe.onChange()"/>
       </md-input-container>
-      <md-list>
+      <md-card ng-repeat="user in subscribe.users"
+               ng-class="{ 'sg-collapsed': user.uid != subscribe.selectedUser.uid, 'sg-expanded': user.uid == subscribe.selectedUser.uid }">
+        <md-button ng-click="subscribe.selectUser($index)">
+          <div layout="row" layout-align="start center" class="md-flex">
+            <span class="card-picture" ng-switch="user.isGroup">
+              <div ng-switch-when="0">
+                <sg-avatar-image class="md-tile-left"
+                                 sg-email="user.c_email"
+                                 size="48"><!-- avatar --></sg-avatar-image>
+              </div>
+              <div ng-switch-when="1" class="sg-list-avatar"><!-- normal-group --></div>
+            </span>
+            <div class="sg-tile-content">
+              <div class="sg-md-subhead-multi">{{user.cn}} {{user.userClass}}</div>
+              <div class="sg-md-body-multi">{{user.c_email}}</div>
+            </div>
+            <md-icon ng-class="{ 'icon-expand-more': user.uid != subscribe.selectedUser.uid,
+                               'icon-expand-less': user.uid == subscribe.selectedUser.uid }"><!--icon--></md-icon>
+          </div>
+        </md-button>
+        <md-card-content ng-show="user == subscribe.selectedUser">
+          <div ng-show="user.$$folders.length == 0">
+            <md-icon>warning</md-icon>
+            <var:string label:value="No possible subscription"/>
+          </div>
+          <div layout="row" layout-align="start center" layout-fill="true"
+               ng-repeat="folder in user.$$folders">
+            <md-icon ng-class="{'icon-contacts': folder.type == 'Contact',
+                               'icon-event': folder.type == 'Appointment'}"><!--icon--></md-icon>
+            <p class="sg-padded--left md-flex">{{folder.displayName}}</p>
+            <md-button class="md-raised"
+                       ng-click="subscribe.selectFolder(folder)"><var:string label:value="Subscribe"/></md-button>
+          </div>
+        </md-card-content>
+      </md-card>
+
+      <md-list class="ng-hide">
         <md-list-item layout="column"
-                      ng-repeat="user in vm.users">
-          <md-button class="sg-expandable" ng-click="vm.selectUser($index)">
+                      ng-repeat="user in subscribe.users">
+          <md-button class="sg-expandable" ng-click="subscribe.selectUser($index)">
             <div layout="row" layout-align="start center"
                  layout-fill="true">
               <div class="sg-avatar"><!-- normal-user --></div>
               <span class="sg-item-name">{{user.$shortFormat()}}</span>
               <span class="md-secondary md-display-1">
-                <md-icon ng-class="{ 'icon-expand-more': user.uid != vm.selectedUser.uid,
-                                     'icon-expand-less': user.uid == vm.selectedUser.uid }"><!--icon--></md-icon>
+                <md-icon ng-class="{ 'icon-expand-more': user.uid != subscribe.selectedUser.uid,
+                                     'icon-expand-less': user.uid == subscribe.selectedUser.uid }"><!--icon--></md-icon>
               </span>
             </div>
           </md-button>
           <md-list layout-fill="true"
-                   ng-show="user == vm.selectedUser">
+                   ng-show="user == subscribe.selectedUser">
             <md-list-item ng-show="user.$$folders.length == 0">
               <md-icon>warning</md-icon>
               <var:string label:value="No possible subscription"/>
@@ -44,7 +80,7 @@
                 <p class="md-flex sg-item-name">{{folder.displayName}}</p>
               <md-button
                   class="md-raised"
-                  ng-click="vm.selectFolder(folder)"><var:string label:value="Subscribe"/></md-button>
+                  ng-click="subscribe.selectFolder(folder)"><var:string label:value="Subscribe"/></md-button>
             </md-list-item>
           </md-list>
           <md-divider ng-if="!$last"><!-- divider --></md-divider>
diff --git a/UI/WebServerResources/js/Common/sgSubscribe.directive.js b/UI/WebServerResources/js/Common/sgSubscribe.directive.js
index a6dd7229e..e87821f4a 100644
--- a/UI/WebServerResources/js/Common/sgSubscribe.directive.js
+++ b/UI/WebServerResources/js/Common/sgSubscribe.directive.js
@@ -6,7 +6,7 @@
 
   /*
    * sgSubscribe - Common subscription widget
-   * @restrict class or attribute
+   * @restrict attribute
    * @param {string} sgSubscribe - the folder type
    * @param {function} sgSubscribeOnSelect - the function to call when subscribing to a folder.
    *        One variable is available: folderData.
@@ -26,7 +26,7 @@
       replace: false,
       bindToController: true,
       controller: sgSubscribeDialogController,
-      controllerAs: 'vm',
+      controllerAs: '$sgSubscribeDialogController',
       link: link
     };
   }
@@ -51,7 +51,7 @@
           onFolderSelect: vm.onFolderSelect
         },
         controller: sgSubscribeController,
-        controllerAs: 'vm'
+        controllerAs: 'subscribe'
       });
     };
   }
@@ -62,7 +62,9 @@
   sgSubscribeController.$inject = ['folderType', 'onFolderSelect', 'User'];
   function sgSubscribeController(folderType, onFolderSelect, User) {
     var vm = this;
+
     vm.selectedUser = null;
+    vm.users = User.$users;
 
     vm.searchTextOptions = {
       updateOn: 'default blur',
@@ -73,16 +75,28 @@
     };
 
     vm.onChange = function() {
-      User.$filter(vm.searchText).then(function(matches) {
-        vm.users = matches;
+      User.$filter(vm.searchText).then(function() {
+        if (vm.selectedUser) {
+          // If selected user is no longer part of the matching users, unselect it
+          if (_.isUndefined(_.find(User.$users, function(user) {
+            return user.uid == vm.selectedUser.uid;
+          }))) {
+            vm.selectedUser = null;
+          }
+        }
       });
     };
 
     vm.selectUser = function(i) {
-      // Fetch folders of specific type for selected user
-      vm.users[i].$folders(folderType).then(function() {
-        vm.selectedUser = vm.users[i];
-      });
+      if (vm.selectedUser == vm.users[i]) {
+        vm.selectedUser = null;
+      }
+      else {
+        // Fetch folders of specific type for selected user
+        vm.users[i].$folders(folderType).then(function() {
+          vm.selectedUser = vm.users[i];
+        });
+      }
     };
 
     // Callback upon subscription to a folder