diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index 82278033c..415aa5d02 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -43,6 +43,7 @@
               md-selected-item="editor.categories.selected"
               md-search-text="editor.categories.searchText"
               md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
+              md-min-length="0"
               label:placeholder="Add a category">
             <span md-highlight-text="editor.categories.searchText">{{category}}</span>
           </md-autocomplete>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 7d7923b22..b5f7053ee 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -590,6 +590,10 @@
                   <div class="sg-color-chip" ng-class="event.getClassName('bg')"
                      ng-show="!event.selected"
                      ng-click="list.toggleComponentSelection($event, event)"><!-- calendar color --></div>
+                  <div class="sg-category"
+                       ng-repeat="category in event.categories | limitTo:5"
+                       ng-class="'bg-category' + category"
+                       ng-style="{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
                   <div class="sg-tile-content">
                     <div class="sg-md-subhead">
                       <div>{{event.c_title}}</div>
@@ -603,6 +607,7 @@
                     <md-icon ng-show="event.c_iscycle">repeat</md-icon>
                     <md-icon ng-show="event.c_nextalarm">alarm</md-icon>
                   </div>
+                  <md-divider><!-- divider --></md-divider>
                 </md-list-item>
                 <md-list-item disabled="disabled" ng-if="list.component.$events.length == 0">
                   <p class="sg-md-caption"><var:string label:value="No events for selected criteria"/></p>
@@ -622,6 +627,10 @@
                   <div class="sg-color-chip" ng-class="task.getClassName('bg')"
                        ng-show="!task.selected"
                        ng-click="list.toggleComponentSelection($event, task)"><!-- calendar color --></div>
+                  <div class="sg-category"
+                       ng-repeat="category in task.categories | limitTo:5"
+                       ng-class="'bg-category' + category"
+                       ng-style="{ left: ($index * 3) + 'px' }"><!-- calendar color --></div>
                   <div class="sg-tile-content">
                     <div class="sg-md-subhead">
                       <div>{{task.c_title}}</div>
@@ -635,6 +644,7 @@
                     <md-icon ng-show="task.c_iscycle">repeat</md-icon>
                     <md-icon ng-show="event.c_nextalarm">alarm</md-icon>
                   </div>
+                  <md-divider><!-- divider --></md-divider>
                 </md-list-item>
                 <md-list-item disabled="disabled" ng-if="list.component.$tasks.length == 0">
                   <p class="sg-md-caption"><var:string label:value="No tasks for selected criteria"/></p>
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index 8631b3eb7..67649f23d 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -35,6 +35,7 @@
               md-selected-item="editor.categories.selected"
               md-search-text="editor.categories.searchText"
               md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
+              md-min-length="0"
               label:placeholder="Add a category">
             <span md-highlight-text="editor.categories.searchText">{{category}}</span>
           </md-autocomplete>
diff --git a/UI/WebServerResources/js/Scheduler/CalendarsController.js b/UI/WebServerResources/js/Scheduler/CalendarsController.js
index 77ef4e6ad..8ee4c0894 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarsController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarsController.js
@@ -6,8 +6,8 @@
   /**
    * @ngInject
    */
-  CalendarsController.$inject = ['$rootScope', '$scope', '$window', '$mdDialog', '$log', '$mdToast', 'FileUploader', 'sgFocus', 'Dialog', 'sgSettings', 'Calendar', 'User', 'stateCalendars'];
-  function CalendarsController($rootScope, $scope, $window, $mdDialog, $log, $mdToast, FileUploader, focus, Dialog, Settings, Calendar, User, stateCalendars) {
+  CalendarsController.$inject = ['$rootScope', '$scope', '$window', '$mdDialog', '$log', '$mdToast', 'FileUploader', 'sgFocus', 'Dialog', 'sgSettings', 'Preferences', 'Calendar', 'User', 'stateCalendars'];
+  function CalendarsController($rootScope, $scope, $window, $mdDialog, $log, $mdToast, FileUploader, focus, Dialog, Settings, Preferences, Calendar, User, stateCalendars) {
     var vm = this;
 
     vm.activeUser = Settings.activeUser;
@@ -26,6 +26,15 @@
     vm.subscribeToFolder = subscribeToFolder;
     vm.today = today;
 
+    Preferences.ready().then(function() {
+      vm.categories = _.map(Preferences.defaults.SOGoCalendarCategories, function(name) {
+        return { id: name.asCSSIdentifier(),
+                 name: name,
+                 color: Preferences.defaults.SOGoCalendarCategoriesColors[name]
+               };
+      });
+    });
+
     // Dispatch the event named 'calendars:list' when a calendar is activated or deactivated or
     // when the color of a calendar is changed
     $scope.$watch(
diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
index a5a931585..8fc6bc955 100644
--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -288,7 +288,6 @@
         var componentData = _.object(this.eventsFields, eventData),
             start = new Date(componentData.c_startdate * 1000);
         componentData.hour = start.getHourString();
-        componentData.categories = _.invoke(componentData.c_category, 'asCSSIdentifier');
         componentData.blocks = [];
         objects.push(new Component(componentData));
         return objects;
@@ -462,6 +461,9 @@
     if (this.dueDate)
       this.due = new Date(this.dueDate.substring(0,10) + ' ' + this.dueDate.substring(11,16));
 
+    if (this.c_category)
+      this.categories = _.invoke(this.c_category, 'asCSSIdentifier');
+
     // Parse recurrence rule definition and initialize default values
     this.$isRecurrent = angular.isDefined(data.repeat);
     if (this.repeat.days) {
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
index 76367d6c0..1ed103dff 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
@@ -34,9 +34,9 @@
         '     ng-class="{\'sg-event--dragging\': block.dragging}">',
         '  <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
         //   Categories color stripes
-        '    <div class="category" ng-repeat="category in block.component.categories"',
+        '    <div class="sg-category" ng-repeat="category in block.component.categories"',
         '         ng-class="\'bg-category\' + category"',
-        '         ng-style="{ right: ($index * 10) + \'%\' }"></div>',
+        '         ng-style="{ right: ($index * 3) + \'px\' }"></div>',
         '    <div class="text">{{ block.component.summary }}',
         '      <span class="icons">',
         //       Component is reccurent
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js
index 1972c28d0..10d6cf41d 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlockGhost.directive.js
@@ -23,9 +23,9 @@
         '<div class="sg-event sg-event--ghost md-whiteframe-3dp ng-hide">',
         '  <div class="eventInside">',
         //   Categories color stripes
-        '    <div class="category" ng-repeat="category in block.component.categories"',
+        '    <div class="sg-category" ng-repeat="category in block.component.categories"',
         '         ng-class="\'bg-category\' + category"',
-        '         ng-style="{ right: ($index * 10) + \'%\' }"></div>',
+        '         ng-style="{ right: ($index * 3) + \'px\' }"></div>',
         '    <div class="text">{{ block.component.summary }}',
         '      <span class="icons">',
         //       Component is reccurent
diff --git a/UI/WebServerResources/scss/core/base_styles/_base_style.scss b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
index 348ee50fe..345c175d9 100644
--- a/UI/WebServerResources/scss/core/base_styles/_base_style.scss
+++ b/UI/WebServerResources/scss/core/base_styles/_base_style.scss
@@ -26,3 +26,10 @@
   //optical adjustement
   transform: translateY(-10%);
 }
+
+.sg-category {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 4aa351ed0..159135aec 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -1,6 +1,7 @@
 /// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 $hours_margin: 50px;
 $block_margin: 2%; // See sgCalendarDayBlock.directive.js
+$block_radius: 3px;
 
 /**
  * Affected templates:
@@ -117,14 +118,14 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
         &--first {
           margin-left: $block_margin;
           padding-left: 0;
-          border-top-left-radius: 3px;
-          border-bottom-left-radius: 3px;
+          border-top-left-radius: $block_radius;
+          border-bottom-left-radius: $block_radius;
         }
         &--last {
           margin-right: $block_margin;
           padding-right: 0;
-          border-top-right-radius: 3px;
-          border-bottom-right-radius: 3px;
+          border-top-right-radius: $block_radius;
+          border-bottom-right-radius: $block_radius;
         }
       }
     }
@@ -210,7 +211,7 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
   .sg-event {
     font-size: $sg-font-size-2;
     font-weight: $sg-font-medium;
-    border-radius: 3px;
+    border-radius: $block_radius;
     position: absolute;
     left: 0;
     right: 0;
@@ -259,14 +260,10 @@ $block_margin: 2%; // See sgCalendarDayBlock.directive.js
       font-weight: $sg-font-light;
     }
 
-    .category {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 10%;
+    .sg-category {
       &:first-child {
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
+        border-top-right-radius: $block_radius;
+        border-bottom-right-radius: $block_radius;
       }
     }