diff --git a/src/ui_ng/lib/README.md b/src/ui_ng/lib/README.md
index 36cf2cfbe5..83b5c814f9 100644
--- a/src/ui_ng/lib/README.md
+++ b/src/ui_ng/lib/README.md
@@ -181,10 +181,6 @@ watchAddInfoEvent(repo: RepositoryItem): void {
 
 **hasProjectAdminRole** is a user session related property to determined whether the current user has project administrator role. Some action menus might be disabled based on this property.
 
-**withClair** is Clair installed
-
-**withNotary** is Notary installed
-
 **tagClickEvent** is an @output event emitter for you to catch the tag click events.
 
 **goBackClickEvent** is an @output event emitter for you to catch the go back events.
diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json
index dac2b4339d..b49ca2d432 100644
--- a/src/ui_ng/lib/package.json
+++ b/src/ui_ng/lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.6.61",
+    "version": "0.6.67",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "scripts": {
         "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",
diff --git a/src/ui_ng/lib/pkg/package.json b/src/ui_ng/lib/pkg/package.json
index f5ecf6cf49..81395e60db 100644
--- a/src/ui_ng/lib/pkg/package.json
+++ b/src/ui_ng/lib/pkg/package.json
@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.6.61",
+    "version": "0.6.67",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "author": "VMware",
     "module": "index.js",
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
index 90c8820a7c..c970f41536 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.html.ts
@@ -33,6 +33,10 @@ export const REPOSITORY_GRIDVIEW_TEMPLATE = `
           <clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
         </clr-dg-row>
         <clr-dg-footer>
+          <span *ngIf="showDBStatusWarning" class="db-status-warning">
+            <clr-icon shape="warning" class="is-warning" size="24"></clr-icon>
+            {{'CONFIG.SCANNING.DB_NOT_READY' | translate }}
+          </span>
           <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}}</span>
           {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}}
           <clr-dg-pagination #pagination [(clrDgPage)]="currentPage" [clrDgPageSize]="pageSize" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
index 5215eef0f3..e9b643ff59 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
@@ -76,10 +76,24 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
     return this.systemInfo ? this.systemInfo.registry_url : '';
   }
 
+  public get withClair(): boolean {
+    return this.systemInfo ? this.systemInfo.with_clair : false;
+  }
+
+  public get isClairDBReady(): boolean {
+    return this.systemInfo &&
+      this.systemInfo.clair_vulnerability_status &&
+      this.systemInfo.clair_vulnerability_status.overall_last_update > 0;
+  }
+
   public get withAdmiral(): boolean {
     return this.systemInfo ? this.systemInfo.with_admiral : false;
   }
 
+  public get showDBStatusWarning(): boolean {
+    return this.withClair && !this.isClairDBReady;
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['projectId'] && changes['projectId'].currentValue) {
       this.refresh();
diff --git a/src/ui_ng/lib/src/repository/repository.component.ts b/src/ui_ng/lib/src/repository/repository.component.ts
index 82c9e70960..cae155c8fe 100644
--- a/src/ui_ng/lib/src/repository/repository.component.ts
+++ b/src/ui_ng/lib/src/repository/repository.component.ts
@@ -47,14 +47,10 @@ const TabLinkContentMap: {[index: string]: string} = {
 export class RepositoryComponent implements OnInit {
   signedCon: {[key: string]: any | string[]} = {};
   @Input() projectId: number;
-  @Input() projectName: string;
   @Input() repoName: string;
   @Input() hasSignedIn: boolean;
   @Input() hasProjectAdminRole: boolean;
   @Input() isGuest: boolean;
-  @Input() withNotary: boolean;
-  @Input() withClair: boolean;
-  @Input() withAdmiral: boolean;
   @Output() tagClickEvent = new EventEmitter<TagClickEvent>();
   @Output() backEvt: EventEmitter<any> = new EventEmitter<any>();
 
@@ -85,6 +81,18 @@ export class RepositoryComponent implements OnInit {
     return this.systemInfo ? this.systemInfo.registry_url : '';
   }
 
+  public get withNotary(): boolean {
+    return this.systemInfo ? this.systemInfo.with_notary : false;
+  }
+
+  public get withClair(): boolean {
+    return this.systemInfo ? this.systemInfo.with_clair : false;
+  }
+
+  public get withAdmiral(): boolean {
+    return this.systemInfo ? this.systemInfo.with_admiral : false;
+  }
+
   ngOnInit(): void {
     if (!this.projectId) {
       this.errorHandler.error('Project ID cannot be unset.');
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 43430fa440..a54b15ee06 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -31,7 +31,7 @@
         "clarity-icons": "^0.10.17",
         "clarity-ui": "^0.10.27",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.6.63",
+        "harbor-ui": "0.6.67",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
index 01f4e59b4f..b9c5f60c1f 100644
--- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
+++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
@@ -1,6 +1,4 @@
 <div>
-    <hbr-repository [repoName]="repoName"
-    [withClair]="withClair" [withNotary]="withNotary" [withAdmiral]="withAdmiral"
-    [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isGuest]="isGuest"
+    <hbr-repository [repoName]="repoName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isGuest]="isGuest"
     (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)" ></hbr-repository>
 </div>
\ No newline at end of file