diff --git a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts
index fbb1d6448..dafacb79e 100644
--- a/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts
+++ b/src/ui_ng/lib/src/create-edit-label/create-edit-label.component.css.ts
@@ -10,15 +10,21 @@ export const CREATE_EDIT_LABEL_STYLE: string = `
   section{padding:.5rem 0;}
   section> label{margin-left: 20px;}
   
-  .dropdown-menu {display:inline-block;width:166px; padding:6px;}
-  .dropdown-menu .dropdown-item{ display:inline-flex; margin:2px 4px;
-  display: inline-block;padding: 0px; width:30px;height:24px; text-align: center;line-height: 24px;}
+  .colorDrop {display:inline-block;position: relative; width: 132px;}
+  .colorDrop .colorPanel{position:absolute;  width:166px; padding:6px;    background-color: white; border: 1px solid #ccc; z-index:10;}
   .btnColor{
     margin: 0 !important;
     padding: 0;
     width: 26px;
     height:22px;
     min-width: 26px;}
- .dropdown-item{border:0px; color: white; font-size:12px;}
- .dropdown .dropdown-toggle.btn{padding:0 !important;}
+ .dropdown-item{margin: 5px 4px; width:30px;height:24px; text-align: center;line-height: 24px;font-size:12px;}
+ .closePanel{ display: block;
+    left: 138px;
+    position: relative;
+    font-size: 18px;
+    width: 10px;
+    line-height: 8px;
+    cursor: pointer;
+    text-decoration: none;}
 `;
\ No newline at end of file
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 061251416..3e539a22f 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
@@ -13,15 +13,16 @@ export const CREATE_EDIT_LABEL_TEMPLATE: string = `
             </label>
             <label>
                 <label for="color">{{'LABEL.COLOR' | translate}}</label>
-                <clr-dropdown [clrCloseMenuOnItemClick]="false">
-                    <button type="button" class="btn btn-outline btnColor btn-sm" clrDropdownTrigger>
-                        <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.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">
+                <div class="colorDrop">
+                  <button type="button" class="btn btn-outline btnColor btn-sm" >
+                    <clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;' (click)="openColorPanel()"></clr-icon>
+                  </button>
+                  <div class="colorPanel" [hidden]="panelHidden">
+                    <a class="closePanel" (click)="closeColorPanel()">&times;</a>
+                    <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>
+                  </div>
+                  <input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color"  #color="ngModel">
+                </div>
             </label>
             <label>
                 <label for="description">{{'LABEL.DESCRIPTION' | translate}}</label>
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 bcfec64eb..c018a80ba 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
@@ -48,6 +48,7 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
 
     checkOnGoing: boolean;
     isLabelNameExist = false;
+    panelHidden = true;
 
     nameChecker = new Subject<string>();
 
@@ -114,6 +115,13 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
         this.copeLabelModel = clone(label[0]);
     }
 
+    openColorPanel(): void {
+        this.panelHidden = false;
+    }
+    closeColorPanel(): void {
+        this.panelHidden = true;
+    }
+
     public get hasChanged(): boolean {
         return !compareValue(this.copeLabelModel, this.labelModel);
     }
diff --git a/src/ui_ng/lib/src/tag/tag.component.html.ts b/src/ui_ng/lib/src/tag/tag.component.html.ts
index 39f5b861f..dea5b3223 100644
--- a/src/ui_ng/lib/src/tag/tag.component.html.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.html.ts
@@ -51,7 +51,7 @@ export const TAG_TEMPLATE = `
                         <div class="form-group"><input type="text" placeholder="Filter labels" [(ngModel)]="stickName" (keyup)="handleStickInputFilter()"></div>
                         <div [hidden]='imageStickLabels.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
                         <div [hidden]='!imageStickLabels.length' style='max-height:300px;overflow-y: auto;'>
-                            <button type="button" class="dropdown-item" *ngFor='let label of imageStickLabels' (click)="stickLabel(label); label.iconsShow =(label.iconsShow== true?false: true)">
+                            <button type="button" class="dropdown-item" *ngFor='let label of imageStickLabels' (click)="stickLabel(label)">
                                 <clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
                                 <div class='labelDiv'><hbr-label-piece [label]="label.label"  [labelWidth]="130"></hbr-label-piece></div>
                             </button>
diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts
index 07e80614c..bfa4d351b 100644
--- a/src/ui_ng/lib/src/tag/tag.component.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.ts
@@ -95,6 +95,7 @@ export class TagComponent implements OnInit, AfterViewInit {
   closable = false;
   lastFilteredTagName: string;
   batchDelectionInfos: BatchInfo[] = [];
+  inprogress: boolean;
 
   createdComparator: Comparator<Tag> = new CustomComparator<Tag>("created", "date");
 
@@ -320,23 +321,35 @@ export class TagComponent implements OnInit, AfterViewInit {
   }
 
   selectLabel(labelInfo: {[key: string]: any | string[]}): void {
+    if (!this.inprogress) {
+      this.inprogress = true;
       let labelId = labelInfo.label.id;
       this.selectedRow = this.selectedTag;
       toPromise<any>(this.tagService.addLabelToImages(this.repoName, this.selectedRow[0].name, labelId)).then(res => {
         this.refresh();
+        labelInfo.iconsShow = true;
+        this.inprogress = false;
       }).catch(err => {
+        this.inprogress = false;
         this.errorHandler.error(err);
       });
+    }
   }
 
   unSelectLabel(labelInfo: {[key: string]: any | string[]}): void {
+    if (!this.inprogress) {
+      this.inprogress = true;
       let labelId = labelInfo.label.id;
       this.selectedRow = this.selectedTag;
       toPromise<any>(this.tagService.deleteLabelToImages(this.repoName, this.selectedRow[0].name, labelId)).then(res => {
         this.refresh();
+        labelInfo.iconsShow = false;
+        this.inprogress = false;
       }).catch(err => {
+        this.inprogress = false;
         this.errorHandler.error(err);
       });
+    }
   }
 
   rightFilterLabel(labelInfo: {[key: string]: any | string[]}): void {
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 37414f388..4aea664e0 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -30,7 +30,7 @@
         "clarity-icons": "^0.10.27",
         "clarity-ui": "^0.10.27",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.7.5",
+        "harbor-ui": "0.7.6",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",