diff --git a/UI/WebServerResources/js/Mailer/sgMessageListItemMain.directive.js b/UI/WebServerResources/js/Mailer/sgMessageListItemMain.directive.js
index fe9c9f5c5..9b9071b44 100644
--- a/UI/WebServerResources/js/Mailer/sgMessageListItemMain.directive.js
+++ b/UI/WebServerResources/js/Mailer/sgMessageListItemMain.directive.js
@@ -24,6 +24,7 @@
         '    <div class="sg-tile-date"><!-- date --></div>',
         '  </div>',
         '  <div class="sg-md-body">',
+        '    <div class="sg-category-dot-container"><!-- categories --></div>',
         '    <div class="sg-tile-subject"><!-- subject --></div>',
         '    <div class="sg-tile-size"><!-- size --></div>',
         '    <md-button class="sg-tile-btn md-secondary ng-hide" md-colors="::{ color: \'accent-600\'}" ng-click="$ctrl.toggleThread()">',
@@ -121,17 +122,18 @@
         $ctrl.message = $ctrl.parentController.message;
 
         // Flags
-        var flagElements = $mdUtil.nodesToArray($element[0].querySelectorAll('.sg-category'));
+        var flagList = $element[0].querySelector('.sg-category-dot-container'),
+            $flagList = angular.element(flagList),
+            flagElements = $mdUtil.nodesToArray(flagList.querySelectorAll('.sg-category-dot'));
         _.forEach(flagElements, function(flagElement) {
-          $element[0].removeChild(flagElement);
+          flagList.removeChild(flagElement);
         });
         for (i = 0; i < $ctrl.message.flags.length && i < 5; i++) {
           var tag = $ctrl.message.flags[i];
           if ($ctrl.service.$tags[tag]) {
-            var flagElement = angular.element('<div class="sg-category"></div>');
-            flagElement.css('left', (i*3) + 'px');
+            var flagElement = angular.element('<div class="sg-category-dot"></div>');
             flagElement.css('background-color', $ctrl.service.$tags[tag][1]);
-            $element.prepend(flagElement);
+            $flagList.append(flagElement);
           }
         }
 
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
index 510e61525..0bdf71580 100644
--- a/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarListEvent.directive.js
@@ -36,13 +36,14 @@
       return [
         '<div class="sg-event"',
         '     ng-click="clickComponent({clickEvent: $event, clickComponent: component})">',
-        //   Categories color stripes
-        '    <div class="sg-category" ng-repeat="category in ::component.categories"',
-        '         ng-class="::(\'bg-category\' + category)"',
-        '         ng-style="::{ right: ($index * 10) + \'%\' }"></div>',
         '    <div class="text">',
         //     Priority
         '      <span ng-show="::component.c_priority" class="sg-priority" ng-bind="::component.c_priority"></span>',
+        //   Categories color dots
+        '      <div class="sg-category-dot-container">',
+        '        <div class="sg-category-dot" ng-repeat="category in ::component.categories"',
+        '             ng-class="::(\'bg-category\' + category)"></div>',
+        '      </div>',
         //     Summary
         '      {{ ::component.c_title }}',
         '      <span class="sg-icons">',
diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss
index 0f2ee6a58..78f7b4384 100644
--- a/UI/WebServerResources/scss/core/structure.scss
+++ b/UI/WebServerResources/scss/core/structure.scss
@@ -38,7 +38,22 @@ html * {
   top: 0;
   bottom: 0;
   width: 10%;
-  z-index: -1;
+}
+.sg-category-dot {
+  display: inline-block;
+  height: .9em;
+  width: .9em;
+  margin-bottom: -1px; // border width
+  margin-right: -.3em; // 1 third overlap
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+  &:last-child {
+    margin-right: .3em;
+  }
+}
+.sg-category-dot-container {
+  display: inline-block;
 }
 
 // Group fields of a form
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index c286f988d..a60bb835d 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -18,6 +18,10 @@
     content: '';
     width: $mg;
   }
+
+  .sg-category-dot {
+    border-color: rgba(255, 255, 255, .9);
+  }
 }
 
 // Container for the linear progress bar of the quota
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 447d71a4a..a656a56a6 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -407,6 +407,7 @@ $quarter_height: 10px;
     }
 
     .sg-category {
+      z-index: -1;
       &:first-child {
         border-top-right-radius: $block_radius;
         border-bottom-right-radius: $block_radius;