diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts
index 6c12fee4d..cf55c2dfc 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html.ts
@@ -18,7 +18,7 @@ export const CREATE_EDIT_LABEL_TEMPLATE: string = `
                         <clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;'></clr-icon>
                     </button>
                     <clr-dropdown-menu *clrIfOpen>
-                        <label type="button" class="dropdown-item" (click)="labelModel.color=i" *ngFor="let i of labelColor" [ngStyle]="{'background-color': i}">Aa</label>
+                        <label type="button" class="dropdown-item"  (click)="labelModel.color=i.color" *ngFor="let i of labelColor" [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</label>
                     </clr-dropdown-menu>
                 </clr-dropdown>
                 <input type="text" id="color" size="8" name="color" [(ngModel)]="labelModel.color"  #color="ngModel">
diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
index a326f216b..bcfec64eb 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
@@ -31,6 +31,7 @@ import {LabelService} from "../service/label.service";
 import {ErrorHandler} from "../error-handler/error-handler";
 import {NgForm} from "@angular/forms";
 import {Subject} from "rxjs/Subject";
+import {LabelColor} from "../shared/shared.const";
 
 @Component({
     selector: 'hbr-create-edit-label',
@@ -48,8 +49,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
     checkOnGoing: boolean;
     isLabelNameExist = false;
 
-    labelColor = ['#00ab9a', '#9da3db', '#be90d6', '#9b0d54', '#f52f22', '#747474', '#0095d3', '#f38b00', ' #62a420', '#89cbdf', '#004a70', '#9460b8'];
-
     nameChecker = new Subject<string>();
 
     labelForm: NgForm;
@@ -88,6 +87,10 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
         this.nameChecker.unsubscribe();
     }
 
+    get labelColor() {
+        return LabelColor;
+    }
+
     initLabel(): Label {
         return {
             name: '',
diff --git a/src/ui_ng/lib/src/label-piece/label-piece.component.ts b/src/ui_ng/lib/src/label-piece/label-piece.component.ts
index 4c82b00cc..d00234eaf 100644
--- a/src/ui_ng/lib/src/label-piece/label-piece.component.ts
+++ b/src/ui_ng/lib/src/label-piece/label-piece.component.ts
@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
+import {Component, Input, Output, OnInit, EventEmitter, OnChanges} from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
 
@@ -20,6 +20,7 @@ import 'rxjs/add/operator/distinctUntilChanged';
 
 import { LABEL_PIEICE_TEMPLATE, LABEL_PIEICE_STYLES } from './label-piece.template';
 import {Label} from "../service/interface";
+import {LabelColor} from "../shared/shared.const";
 
 
 @Component({
@@ -28,10 +29,17 @@ import {Label} from "../service/interface";
     template: LABEL_PIEICE_TEMPLATE
 })
 
-export class LabelPieceComponent implements OnInit {
+export class LabelPieceComponent implements OnInit, OnChanges {
     @Input() label: Label;
     @Input() labelWidth: number;
+    labelColor: {[key: string]: string};
 
-    ngOnInit(): void {
+    ngOnChanges(): void {
+        if (this.label) {
+            let color = this.label.color;
+            this.labelColor = LabelColor.find(data => data.color === color);
+        }
     }
+
+    ngOnInit(): void { }
 }
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/label-piece/label-piece.template.ts b/src/ui_ng/lib/src/label-piece/label-piece.template.ts
index 573625e83..a21852a33 100644
--- a/src/ui_ng/lib/src/label-piece/label-piece.template.ts
+++ b/src/ui_ng/lib/src/label-piece/label-piece.template.ts
@@ -3,7 +3,7 @@
  */
 
 export const LABEL_PIEICE_TEMPLATE: string = `
-<label class="label" [ngStyle]="{'background-color': label.color}" [style.max-width.px]="labelWidth">
+<label class="label" [ngStyle]="{'background-color': labelColor?.color, 'color': labelColor?.textColor, 'border': labelColor?.color == '#FFFFFF'? '1px solid #666': 'none'}" [style.max-width.px]="labelWidth">
     <clr-icon *ngIf="label.scope=='p'" shape="organization"></clr-icon>
     <clr-icon *ngIf="label.scope=='g'" shape="administrator"></clr-icon>
      {{label.name}}
diff --git a/src/ui_ng/lib/src/label/label.component.html.ts b/src/ui_ng/lib/src/label/label.component.html.ts
index 41df903e8..fd58e9398 100644
--- a/src/ui_ng/lib/src/label/label.component.html.ts
+++ b/src/ui_ng/lib/src/label/label.component.html.ts
@@ -22,7 +22,7 @@ export const LABEL_TEMPLATE = `
                 <clr-dg-column [clrDgField]="'name'">{{'LABEL.LABEL' | translate}}</clr-dg-column>
                 <clr-dg-column [clrDgField]="'endpoint'">{{'LABEL.DESCRIPTION' | translate}}</clr-dg-column>
                 <clr-dg-column [clrDgField]="'insecure'">{{'LABEL.CREATION_TIME' | translate }}</clr-dg-column>
-                 <clr-dg-placeholder>{{'DESTINATION.PLACEHOLDER' | translate }}</clr-dg-placeholder>
+                 <clr-dg-placeholder>{{'LABEL.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                 <clr-dg-row *clrDgItems="let label of targets" [clrDgItem]='label'>
                     <clr-dg-cell>
                         <hbr-label-piece [label]="label"></hbr-label-piece>
diff --git a/src/ui_ng/lib/src/shared/shared.const.ts b/src/ui_ng/lib/src/shared/shared.const.ts
index d93ac3188..597bcd122 100644
--- a/src/ui_ng/lib/src/shared/shared.const.ts
+++ b/src/ui_ng/lib/src/shared/shared.const.ts
@@ -67,3 +67,14 @@ export const enum ConfirmationState {
 export const enum ConfirmationButtons {
   CONFIRM_CANCEL, YES_NO, DELETE_CANCEL, CLOSE, REPLICATE_CANCEL
 };
+
+export const LabelColor = [
+  {'color': '#000000', 'textColor' : 'white'}, {'color': '#61717D', 'textColor': 'white'}, {'color': '#737373', 'textColor' : 'white'}, {'color': '#80746D', 'textColor': 'white'},
+  {'color': '#FFFFFF', 'textColor' : 'black'}, {'color': '#A9B6BE', 'textColor': 'black'}, {'color': '#DDDDDD', 'textColor' : 'black'}, {'color': '#BBB3A9', 'textColor': 'black'},
+  {'color': '#0065AB', 'textColor' : 'white'}, {'color': '#343DAC', 'textColor': 'white'}, {'color': '#781DA0', 'textColor' : 'white'}, {'color': '#9B0D54', 'textColor': 'white'},
+  {'color': '#0095D3', 'textColor' : 'black'}, {'color': '#9DA3DB', 'textColor': 'black'}, {'color': '#BE90D6', 'textColor' : 'black'}, {'color': '#F1428A', 'textColor': 'black'},
+  {'color': '#1D5100', 'textColor' : 'white'}, {'color': '#006668', 'textColor': 'white'}, {'color': '#006690', 'textColor' : 'white'}, {'color': '#004A70', 'textColor': 'white'},
+  {'color': '#48960C', 'textColor' : 'black'}, {'color': '#00AB9A', 'textColor': 'black'}, {'color': '#00B7D6', 'textColor' : 'black'}, {'color': '#0081A7', 'textColor': 'black'},
+  {'color': '#C92100', 'textColor' : 'white'}, {'color': '#CD3517', 'textColor': 'white'}, {'color': '#C25400', 'textColor' : 'white'}, {'color': '#D28F00', 'textColor': 'white'},
+  {'color': '#F52F52', 'textColor' : 'black'}, {'color': '#FF5501', 'textColor': 'black'}, {'color': '#F57600', 'textColor' : 'black'}, {'color': '#FFDC0B', 'textColor': 'black'},
+];
diff --git a/src/ui_ng/lib/src/tag/tag.component.css.ts b/src/ui_ng/lib/src/tag/tag.component.css.ts
index c7c9b3420..fc0a65a72 100644
--- a/src/ui_ng/lib/src/tag/tag.component.css.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.css.ts
@@ -52,14 +52,14 @@ export const TAG_STYLE = `
 }
 
 .btn-group .dropdown-menu clr-icon{display: block;}
-.dropdown-menu .dropdown-item{position: relative;padding-left:.5rem; padding-right:.5rem;}
+.dropdown-menu .dropdown-item{position: relative;padding-left:.5rem; padding-right:.5rem;line-height:1.0}
 .dropdown-menu input{position: relative;margin-left:.5rem; margin-right:.5rem;}
 .pull-left{display:inline-block;float:left;}
 .pull-right{display:inline-block; float:right;}
 .btn-link{display:inline-flex;width: 15px;min-width:15px; color:black; vertical-align: super; }
 .trigger-item, .signpost-item{display: inline;}
 .signpost-content-body .label{margin:.3rem;}
-.labelDiv{position: absolute; left:34px;top:3px;}
+.labelDiv{position: absolute; left:34px;top:5px;}
 .datagrid-action-bar{z-index:10;}
 .trigger-item hbr-label-piece{display: flex !important;margin: 6px 0;}
 :host >>> .signpost-content{min-width:4rem;}
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 291a2d3a0..6d511ae54 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -31,7 +31,7 @@
         "clarity-icons": "0.10.24",
         "clarity-ui": "0.10.24",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.6.68",
+        "harbor-ui": "0.6.69",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json
index e1777cbb7..89d972a73 100644
--- a/src/ui_ng/src/i18n/lang/en-us-lang.json
+++ b/src/ui_ng/src/i18n/lang/en-us-lang.json
@@ -641,7 +641,8 @@
         "FILTER_LABEL_PLACEHOLDER": "Filter Labels",
         "NO_LABELS": "No labels",
         "DELETION_TITLE_TARGET": "Confirm Label Deletion",
-        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?"
+        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?",
+        "PLACEHOLDER": "We couldn't find any labels!"
     },
     "WEEKLY": {
         "MONDAY": "Monday",
diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json
index f41896c0b..b23f01bee 100644
--- a/src/ui_ng/src/i18n/lang/es-es-lang.json
+++ b/src/ui_ng/src/i18n/lang/es-es-lang.json
@@ -641,7 +641,8 @@
         "FILTER_Label_PLACEHOLDER": "Filter Labels",
         "NO_LABELS": "No labels",
         "DELETION_TITLE_TARGET": "Confirm Label Deletion",
-        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?"
+        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?",
+        "PLACEHOLDER": "We couldn't find any labels!"
     },
     "WEEKLY": {
     "MONDAY": "Monday",
diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
index 2f13272fb..58ffd11d9 100644
--- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json
+++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json
@@ -581,7 +581,8 @@
         "FILTER_Label_PLACEHOLDER": "Filter Labels",
         "NO_LABELS": "No labels",
         "DELETION_TITLE_TARGET": "Confirm Label Deletion",
-        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?"
+        "DELETION_SUMMARY_TARGET": "Do you want to delete {{param}}?",
+        "PLACEHOLDER": "We couldn't find any labels!"
     },
     "WEEKLY": {
         "MONDAY": "Monday",
diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
index 17905ef66..dd483f7d0 100644
--- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json
+++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json
@@ -641,7 +641,8 @@
         "FILTER_Label_PLACEHOLDER": "过滤标签",
         "NO_LABELS": "无标签",
         "DELETION_TITLE_TARGET":"删除标签确认",
-        "DELETION_SUMMARY_TARGET": "确认删除标签 {{param}}?"
+        "DELETION_SUMMARY_TARGET": "确认删除标签 {{param}}?",
+        "PLACEHOLDER": "未发现任何标签!"
     },
     "WEEKLY": {
         "MONDAY": "周一",