diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index dba5e6d8f..92d53dc31 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -145,34 +145,66 @@
   <script type = "text/ng-template" id="UIxCalMainFrame">
     <!-- calendars colors -->
     <div sg-folder-stylesheet="true"
-         ng-repeat="calendar in calendars.list"
+         ng-repeat="calendar in calendars.service.$calendars"
+         ng-model="calendar"><!-- stylesheet --></div>
+    <div sg-folder-stylesheet="true"
+         ng-repeat="calendar in calendars.service.$subscriptions"
          ng-model="calendar"><!-- stylesheet --></div>
     <!-- Sidenav -->
     <md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex">
-        <md-list ng-repeat="calendar in calendars.list">
-          <md-item>
-            <md-item-content>
+        <!-- User's calendars -->
+        <section>
+          <md-subheader class="sg-md-subheader">
+            <div layout="row" layout-align="space-between center">
+              <span><var:string label:value="Calendars"/></span>
+              <md-button
+                  class="iconButton"
+                  label:aria-label="New Calendar..."
+                  ng-click="newCalendar()">
+                <i class="md-icon-add-circle-outline"><!-- add --></i>
+              </md-button>
+            </div>
+          </md-subheader>
+          <md-list>
+            <md-list-item ng-repeat="calendar in calendars.service.$calendars">
               <md-checkbox ng-model="calendar.active"
                            ng-true-value="1"
                            ng-false-value="0"
-                           aria-label="Enable"
-                           class="md-button md-flex sg-item-name">{{calendar.name}}</md-checkbox>
-            </md-item-content>
-          </md-item>
-        </md-list>
-        <md-toolbar class="md-medium-tall">
-          <div class="md-toolbar-tools md-toolbar-tools-bottom">
-            <md-button
-                class="iconButton sg-button-navicon"
-                label:aria-label="Subscribe to a Calendar..."
-                sg-subscribe="calendar"
-                sg-subscribe-on-select="subscribeToFolder(folderData)">
-              <i class="md-icon-folder-shared"><!-- icon --></i>
-            </md-button>
-          </div>
-        </md-toolbar>
+                           label:aria-label="Enable"><!-- enable --></md-checkbox>
+              <p class="sg-item-name">{{calendar.name}}</p>
+              <i class="md-icon-turned-in md-display-8"
+                 ng-class="calendar.getClassName()"><!-- calendar color --></i>
+            </md-list-item>
+          </md-list>
+        </section>
+        <!-- Subscriptions -->
+        <section>
+          <md-subheader class="sg-md-subheader">
+            <div layout="row" layout-align="space-between center">
+              <span><var:string label:value="Subscriptions"/></span>
+              <md-button
+                  class="iconButton"
+                  label:aria-label="Subscribe to a Calendar..."
+                  sg-subscribe="calendar"
+                  sg-subscribe-on-select="subscribeToFolder(folderData)">
+                <i class="md-icon-add-circle-outline"><!-- add --></i>
+              </md-button>
+            </div>
+          </md-subheader>
+          <md-list>
+            <md-list-item ng-repeat="calendar in calendars.service.$subscriptions">
+              <md-checkbox ng-model="calendar.active"
+                           ng-true-value="1"
+                           ng-false-value="0"
+                           label:aria-label="Enable"><!-- enable --></md-checkbox>
+              <p class="sg-item-name">{{calendar.name}}</p>
+              <i class="md-icon-turned-in md-display-8"
+                 ng-class="calendar.getClassName()"><!-- calendar color --></i>
+            </md-list-item>
+          </md-list>
+        </section>
       </md-content>
     </md-sidenav>
 
@@ -220,27 +252,39 @@
         <md-content id="componentsList"
                     flex="33"
                     md-scroll-y="md-scroll-y">
-          <md-tabs md-selected="list.selectedList">
+          <md-tabs md-dynamic-height="true"
+                   md-selected="list.selectedList">
             <md-tab label:label="Events"
                     md-on-select="list.selectComponentType('events')">
               <md-list>
-                <md-item ng-repeat="event in list.component.$events">
-                  <md-item-content>
-                    <span>{{event.c_title}}</span>
-                    <span class="right">{{event.formatted_startdate}}</span>
-                  </md-item-content>
-                </md-item>
+                <md-list-item
+                    class="md-clickable md-2-line"
+                    n0-ng-click="list.openComponent(event)"
+                    ng-repeat="event in list.component.$events">
+                  <i class="md-avatar" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
+                  <div class="md-list-item-text"
+                       ui-sref="calendars.component({calendarId: event.c_folder, componentId: event.c_name})">
+                    <h3>{{event.c_title}}</h3>
+                    <p>{{event.c_location}}</p>
+                    <p class="md-secondary">
+                      {{event.formatted_startdate}}
+                      <i class="md-icon-repeat" ng-show="event.c_iscycle"><!-- recurrent --></i>
+                      <i class="md-icon-alarm" ng-show="event.c_nextalarm"><!-- alarm --></i>
+                    </p>
+                  </div>
+                </md-list-item>
               </md-list>
             </md-tab>
             <md-tab label:label="Tasks"
                     md-on-select="list.selectComponentType('tasks')">
               <md-list>
-                <md-item ng-repeat="task in list.component.$tasks">
-                  <md-item-content>
-                    <span>{{task.c_title}}</span>
-                    <span class="right">{{task.formatted_enddate}}</span>
-                  </md-item-content>
-                </md-item>
+                <md-list-item
+                    class="md-clickable"
+                    ng-repeat="task in list.component.$tasks">
+                  <i class="md-avatar" ng-class="task.getClassName()" ><!-- calendar color --></i>
+                  <p>{{task.c_title}}</p>
+                  <p class="md-secondary">{{task.formatted_enddate}}</p>
+                </md-list-item>
               </md-list>
             </md-tab>
           </md-tabs>
diff --git a/UI/WebServerResources/js/Appointments/calendar-model.js b/UI/WebServerResources/js/Appointments/calendar-model.js
index 6e3293eef..a17bf7e3e 100644
--- a/UI/WebServerResources/js/Appointments/calendar-model.js
+++ b/UI/WebServerResources/js/Appointments/calendar-model.js
@@ -10,7 +10,7 @@
    */
   function Calendar(futureCalendarData) {
     // Data is immediately available
-    angular.extend(this, futureCalendarData);
+    this.init(futureCalendarData);
     if (this.name && !this.id) {
       // Create a new calendar on the server
       var newCalendarData = Calendar.$$resource.create('createFolder', this.name);
@@ -26,13 +26,13 @@
    * @desc The factory we'll use to register with Angular
    * @returns the Calendar constructor
    */
-  Calendar.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgResource', 'sgCard', 'sgAcl', function($q, $timeout, $log, Settings, Resource, Card, Acl) {
+  Calendar.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgResource', 'sgComponent', 'sgAcl', function($q, $timeout, $log, Settings, Resource, Component, Acl) {
     angular.extend(Calendar, {
       $q: $q,
       $timeout: $timeout,
       $log: $log,
       $$resource: new Resource(Settings.activeUser.folderURL + 'Calendar', Settings.activeUser),
-      $Card: Card,
+      $Component: Component,
       $$Acl: Acl,
       activeUser: Settings.activeUser
     });
@@ -51,19 +51,15 @@
    */
   Calendar.$add = function(calendar) {
     // Insert new calendar at proper index
-    var sibling, i;
+    var list, sibling, i;
 
-    calendar.isOwned = this.activeUser.isSuperUser || calendar.owner == this.activeUser.login;
-    calendar.isSubscription = calendar.owner != this.activeUser.login;
-    sibling = _.find(this.$calendars, function(o) {
-      return (o.isRemote
-              || (!calendar.isSubscription && o.isSubscription)
-              || (o.id != 'personal'
-                  && o.isSubscription === calendar.isSubscription
-                  && o.name.localeCompare(calendar.name) === 1));
+    list = calendar.isSubscription? this.$subscriptions : this.$calendars;
+    sibling = _.find(list, function(o) {
+      return (o.id != 'personal'
+              && o.name.localeCompare(calendar.name) === 1);
     });
-    i = sibling ? _.indexOf(_.pluck(this.$calendars, 'id'), sibling.id) : 1;
-    this.$calendars.splice(i, 0, calendar);
+    i = sibling ? _.indexOf(_.pluck(list, 'id'), sibling.id) : 1;
+    list.splice(i, 0, calendar);
   };
 
   /**
@@ -75,20 +71,36 @@
   Calendar.$findAll = function(data) {
     var _this = this;
     if (data) {
-      
-      this.$calendars = data;
+      this.$calendars = [];
+      this.$subscriptions = [];
       // Instanciate Calendar objects
-      angular.forEach(this.$calendars, function(o, i) {
-        _this.$calendars[i] = new Calendar(o);
-        // Add 'isOwned' and 'isSubscription' attributes based on active user (TODO: add it server-side?)
-        // _this.$calendars[i].isSubscription = _this.$calendars[i].owner != _this.activeUser.login;
-        // _this.$calendars[i].isOwned = _this.activeUser.isSuperUser
-        //   || _this.$calendars[i].owner == _this.activeUser.login;
+      angular.forEach(data, function(o, i) {
+        var calendar = new Calendar(o);
+        if (calendar.isSubscription)
+          _this.$subscriptions.push(calendar);
+        else
+          _this.$calendars.push(calendar);
       });
     }
     return this.$calendars;
   };
 
+  /**
+   * @memberof Calendar
+   * @desc Find a calendar among local instances (personal calendars and subscriptions).
+   * @param {string} id - the calendar ID
+   * @returns an object literal of the matching Calendar instance
+   */
+  Calendar.$get = function(id) {
+    var calendar;
+
+    calendar = _.find(Calendar.$calendars, function(o) { return o.id == id });
+    if (!calendar)
+      calendar = _.find(Calendar.$subscriptions, function(o) { return o.id == id });
+
+    return calendar;
+  };
+
   /**
    * @memberOf Calendar
    * @desc Subscribe to another user's calendar and add it to the list of calendars.
@@ -100,7 +112,7 @@
     var _this = this;
     return Calendar.$$resource.userResource(uid).fetch(path, 'subscribe').then(function(calendarData) {
       var calendar = new Calendar(calendarData);
-      if (!_.find(_this.$calendars, function(o) {
+      if (!_.find(_this.$subscriptions, function(o) {
         return o.id == calendarData.id;
       })) {
         Calendar.$add(calendar);
@@ -109,6 +121,29 @@
     });
   };
 
+  /**
+   * @function init
+   * @memberof Calendar.prototype
+   * @desc Extend instance with new data and compute additional attributes.
+   * @param {object} data - attributes of calendar
+   */
+  Calendar.prototype.init = function(data) {
+    angular.extend(this, data);
+    // Add 'isOwned' and 'isSubscription' attributes based on active user (TODO: add it server-side?)
+    this.isOwned = Calendar.activeUser.isSuperUser || this.owner == Calendar.activeUser.login;
+    this.isSubscription = !this.isRemote && this.owner != Calendar.activeUser.login;
+  };
+
+  /**
+   * @function getClassName
+   * @memberof Calendar.prototype
+   * @desc Return the calendar CSS class name based on its ID.
+   * @returns a string representing the foreground CSS class name
+   */
+  Calendar.prototype.getClassName = function() {
+    return 'fg-folder' + this.id;
+  };
+
   /**
    * @function $rename
    * @memberof Calendar.prototype
@@ -172,6 +207,16 @@
     return Calendar.$$resource.fetch(this.id, (this.active?'':'de') + 'activateFolder');
   };
 
+  /**
+   * @function $getComponent
+   * @memberof Calendar.prototype
+   * @desc Fetch the card attributes from the server.
+   * @returns a promise of the HTTP operation
+   */
+  Calendar.prototype.$getComponent = function(componentId) {
+    return Calendar.$Component.$find(this.id, componentId);
+  };
+
   /**
    * @function $omit
    * @memberof Calendar.prototype
diff --git a/UI/WebServerResources/js/SchedulerUI.js b/UI/WebServerResources/js/SchedulerUI.js
index 9c956eb84..0a88bb816 100644
--- a/UI/WebServerResources/js/SchedulerUI.js
+++ b/UI/WebServerResources/js/SchedulerUI.js
@@ -85,26 +85,36 @@
     })
 
     .controller('CalendarsController', ['$scope', '$rootScope', '$stateParams', '$state', '$timeout', '$log', 'sgFocus', 'encodeUriFilter', 'sgDialog', 'sgSettings', 'sgCalendar', 'stateCalendars', function($scope, $rootScope, $stateParams, $state, $timeout, $log, focus, encodeUriFilter, Dialog, Settings, Calendar, stateCalendars) {
-      this.activeUser = Settings.activeUser;
-      this.list = stateCalendars;
+      var vm = this;
+
+      vm.activeUser = Settings.activeUser;
+      vm.service = Calendar;
 
       // Dispatch the event named 'calendars:list' when a calendar is activated or deactivated or
       // when the color of a calendar is changed
-      $scope.$watch(angular.bind(this, function() {
-        return _.map(this.list, function(o) { return _.pick(o, ['id', 'active', 'color']) });
-      }), function(newList, oldList) {
-        // Identify which calendar has changed
-        var ids = _.pluck(_.filter(newList, function(o, i) { return !_.isEqual(o, oldList[i]); }), 'id');
-        if (ids.length > 0) {
-          $log.debug(ids.join(', ') + ' changed');
-          _.each(ids, function(id) {
-            var calendar = _.find(stateCalendars, function(o) { return o.id == id });
-            calendar.$setActivation().then(function() {
-              $scope.$broadcast('calendars:list');
+      $scope.$watch(
+        function() {
+          return _.union(
+            _.map(Calendar.$calendars, function(o) { return _.pick(o, ['id', 'active', 'color']) }),
+            _.map(Calendar.$subscriptions, function(o) { return _.pick(o, ['id', 'active', 'color']) })
+          );
+        },
+        function(newList, oldList) {
+          // Identify which calendar has changed
+          var ids = _.pluck(_.filter(newList, function(o, i) { return !_.isEqual(o, oldList[i]); }), 'id');
+          if (ids.length > 0) {
+            $log.debug(ids.join(', ') + ' changed');
+            _.each(ids, function(id) {
+              var calendar = Calendar.$get(id);
+              calendar.$setActivation().then(function() {
+                $scope.$broadcast('calendars:list');
+              });
             });
-          });
-        }
-      }, true); // compare for object equality
+          }
+        },
+        true // compare for object equality
+      );
+
       /**
        * subscribeToFolder - Callback of sgSubscribe directive
        */