diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 9eab4d681..f3ced50b6 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -405,23 +405,23 @@
                   aria-controls="calendarCategories-content"
                   label:label="Categories">
 
-              <md-list>
-                <md-list-item ng-repeat="item in
-                                    preferences.defaults.SOGoCalendarCategories
-                                    track by $index">
-                  <div class="md-icon-label"><!-- create --></div>
-                    <md-input-container>
-	              <input type="text" ng-model="preferences.defaults.SOGoCalendarCategories[$index]"/>
-                    </md-input-container>
-                    <md-button
-                        ng-click="removeCalendarCategory($index)"
-                        type="button"
-                        layout="row" layout-align="end center">
-                      <div class="md-icon-remove"><!-- delete --></div>
-                    </md-button>
-                </md-list-item>
-              </md-list>
-
+            <md-list>
+              <md-list-item ng-repeat="item in
+                                       preferences.defaults.SOGoCalendarCategories
+                                       track by $index">
+                <i class="md-avatar" ng-style="{'background-color': '{{preferences.defaults.SOGoCalendarCategoriesColors[item]}}'}"><!-- category color --></i>
+                <md-input-container>
+	          <input type="text" ng-model="preferences.defaults.SOGoCalendarCategories[$index]"/>
+                </md-input-container>
+                <md-button
+                    ng-click="removeCalendarCategory($index)"
+                    type="button"
+                    layout="row" layout-align="end center">
+                  <div class="md-icon-remove"><!-- delete --></div>
+                </md-button>
+              </md-list-item>
+            </md-list>
+              
               <div class="bottomToolbar">
                 <md-button ng-click="addCalendarCategory()" type="button">
                   <div class="md-icon-add"><!-- create --></div>
diff --git a/UI/WebServerResources/js/PreferencesUI.js b/UI/WebServerResources/js/PreferencesUI.js
index 7ca26b0a2..b1e1e81ea 100644
--- a/UI/WebServerResources/js/PreferencesUI.js
+++ b/UI/WebServerResources/js/PreferencesUI.js
@@ -78,8 +78,8 @@
       $scope.preferences = statePreferences;
       
       $scope.addCalendarCategory = function() {
-        var color = {"": "#000"};
-        $scope.preferences.defaults.SOGoCalendarCategories.push("");
+        var color = {"New category": "#aaa"};
+        $scope.preferences.defaults.SOGoCalendarCategories.push("New category");
         $scope.preferences.defaults.SOGoCalendarCategoriesColors.push(color);
       }