diff --git a/src/app/fuse-fake-db/mail.ts b/src/app/fuse-fake-db/mail.ts
index af387198..44c9df31 100644
--- a/src/app/fuse-fake-db/mail.ts
+++ b/src/app/fuse-fake-db/mail.ts
@@ -119,8 +119,8 @@ export class MailFakeDb
             'important'     : false,
             'hasAttachments': false,
             'labels'        : [
-                3,
-                4
+                1,
+                3
             ],
             'folder'        : 0
         },
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
index 7ffea93d..0927817a 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html
@@ -10,11 +10,14 @@
         <div>
             <div class="subject" flex>{{mail.subject}}</div>
 
-            <div class="labels">
+            <div class="labels" fxLayout="row" fxLayoutWrap>
                 <div class="label" *ngFor="let labelId of mail.labels"
-                     [ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}}
+                     fxLayout="row" fxLayoutAlign="start center">
+                    <div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
+                    <div class="label-title">{{labels | getById:labelId:'title'}}</div>
                 </div>
             </div>
+
         </div>
 
         <div class="actions" fxLayout="row" fxLayoutAlign="start center">
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.scss b/src/app/main/content/apps/mail/mail-details/mail-details.component.scss
index d52a462b..98f35cc8 100644
--- a/src/app/main/content/apps/mail/mail-details/mail-details.component.scss
+++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.scss
@@ -12,7 +12,7 @@
     }
 
     .mail-header {
-        padding-bottom: 24px;
+        padding-bottom: 16px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
         .actions {
@@ -25,10 +25,18 @@
         }
 
         .label {
-            display: inline-block;
             font-size: 11px;
-            padding: 0 5px;
-            margin: 8px 6px 0 0;
+            border-radius: 2px;
+            margin: 4px 4px 4px 0;
+            padding: 3px 8px;
+            background-color: rgba(0, 0, 0, 0.08);
+
+            .label-color {
+                width: 8px;
+                height: 8px;
+                margin-right: 8px;
+                border-radius: 50%;
+            }
         }
     }
 
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
index 447054c7..59a8858d 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
@@ -22,14 +22,15 @@
         <div class="message text-truncate" *ngIf="mail?.message">
 
             {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
-
-            <div class="labels">
-                <div class="label" *ngFor="let labelId of mail.labels"
-                     [ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}}
-                </div>
-            </div>
         </div>
 
+        <div class="labels" fxLayout="row" fxLayoutWrap>
+            <div class="label" *ngFor="let labelId of mail.labels"
+                 fxLayout="row" fxLayoutAlign="start center">
+                <div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
+                <div class="label-title">{{labels | getById:labelId:'title'}}</div>
+            </div>
+        </div>
     </div>
 
     <div fxLayout="column" fxLayoutAlign="space-between end">
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
index 90b5b544..0e58acde 100644
--- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
+++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
@@ -18,10 +18,10 @@
             }
 
             .message {
+            }
 
-                .labels {
-                    background: #FFFFFF;
-                }
+            .labels {
+                background: #FFFFFF;
             }
         }
     }
@@ -33,9 +33,10 @@
 
             .message {
 
-                .labels {
-                    background: #FFF8E1;
-                }
+            }
+
+            .labels {
+                background: #FFF8E1;
             }
         }
     }
@@ -46,10 +47,9 @@
         .info {
 
             .message {
-
-                .labels {
-                    background: #E3F2FD;
-                }
+            }
+            .labels {
+                background: #E3F2FD;
             }
         }
     }
@@ -58,6 +58,7 @@
         overflow: hidden;
         width: 0;
         margin: 0 16px;
+        position: relative;
 
         .name {
             font-size: 15px;
@@ -80,23 +81,27 @@
         .message {
             position: relative;
             color: rgba(0, 0, 0, 0.54);
+        }
 
-            .labels {
-                position: absolute;
-                background: #FAFAFA;
-                top: 0;
-                right: 0;
-                padding-left: 6px;
+        .labels {
+            position: absolute;
+            background: #FAFAFA;
+            bottom: 0;
+            right: 0;
+            padding-left: 6px;
 
-                .label {
-                    display: inline-block;
-                    font-size: 11px;
-                    padding: 0 5px;
-                    margin-right: 6px;
+            .label {
+                font-size: 11px;
+                border-radius: 2px;
+                margin: 0 4px 0 0;
+                padding: 3px 8px;
+                background-color: rgba(0, 0, 0, 0.08);
 
-                    &:first-child {
-                        margin-left: 0;
-                    }
+                .label-color {
+                    width: 8px;
+                    height: 8px;
+                    margin-right: 8px;
+                    border-radius: 50%;
                 }
             }
         }
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.html b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
index 2e1a1576..23b9397d 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
@@ -60,8 +60,11 @@
             </md-input-container>
 
             <div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
-                <div class="tag" *ngFor="let tagId of todo.tags"
-                     [ngStyle]="{background: tags | getById:tagId:'color'}">{{tags | getById:tagId:'title'}}
+                <div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
+
+                    <div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
+
+                    <div class="tag-label">{{tags | getById:tagId:'title'}}</div>
                 </div>
             </div>
 
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
index 04424c0f..215fdfb6 100644
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
@@ -25,8 +25,17 @@
 
         .tag {
             font-size: 11px;
-            padding: 0 5px;
-            margin: 8px 6px 0 0;
+            border-radius: 2px;
+            margin: 8px 4px 0 0;
+            padding: 3px 8px;
+            background-color: rgba(0, 0, 0, 0.08);
+
+            .tag-color {
+                width: 8px;
+                height: 8px;
+                margin-right: 8px;
+                border-radius: 50%;
+            }
         }
 
         .to {
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss
index e50ae7eb..ed0db5c7 100644
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss
@@ -31,9 +31,9 @@
     }
 
     .tags {
-        font-size: 12px;
 
         .tag {
+            font-size: 11px;
             border-radius: 2px;
             margin: 8px 4px 0 0;
             padding: 3px 8px;