diff --git a/src/ui_ng/lib/README.md b/src/ui_ng/lib/README.md
index 47cd19d79..8ca86d1d9 100644
--- a/src/ui_ng/lib/README.md
+++ b/src/ui_ng/lib/README.md
@@ -93,6 +93,12 @@ On specific project mode, without need projectId, but also need to provide proje
 
 * **Repository and Tag Management View**
 
+The `hbr-repository-stackview` directive is deprecated. Using `hbr-repository-listview` and `hbr-repository` instead. You should define two routers one for render 
+`hbr-repository-listview` the other is for `hbr-repository`. `hbr-repository-listview` will output an event, you need catch this event and redirect to related
+page contains `hbr-repository`.
+
+**hbr-repository-listview Directive**
+
 **projectId** is used to specify which projects the repositories are from.
 
 **projectName** is used to generate the related commands for pushing images.
@@ -101,18 +107,52 @@ On specific project mode, without need projectId, but also need to provide proje
 
 **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.
 
-**tagClickEvent** is an @output event emitter for you to catch the tag click events.
+**repoClickEvent** is an @output event emitter for you to catch the repository click events.
+
 
 ```
-<hbr-repository-stackview [projectId]="..." [projectName]="" [hasSignedIn]="..." [hasProjectAdminRole]="..." (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-stackview>
+<hbr-repository-listview [projectId]="" [projectName]="" [hasSignedIn]="" [hasProjectAdminRole]="" 
+(repoClickEvent)="watchRepoClickEvent($event)"></hbr-repository-listview>
 
 ...
 
-watchTagClickEvent(tag: Tag): void {
-    //Process tag
+
+watchRepoClickEvent(repo: RepositoryItem): void {
+    //Process repo
+    ...
+}
+```
+
+
+**hbr-repository Directive**
+
+**projectId** is used to specify which projects the repositories are from.
+
+**repoName** is used to generate the related commands for pushing images.
+
+**hasSignedIn** is a user session related property to determined whether a valid user signed in session existing. This component supports anonymous user.
+
+**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.
+
+```
+<hbr-repository [projectId]="" [repoName]="" [hasSignedIn]="" [hasProjectAdminRole]=""  [withClair]="" [withNotary]=""
+(tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)" ></hbr-repository>
+
+watchTagClickEvt(tagEvt: TagClickEvent): void {
     ...
 }
 
+watchGoBackEvt(projectId: string): void {
+    ...
+}
 ```
 
 * **Tag detail view**
diff --git a/src/ui_ng/lib/package.json b/src/ui_ng/lib/package.json
index 0383986ee..53cb7df2e 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.45",
+    "version": "0.6.52",
     "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 79ec52511..2cea500a7 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.45",
+    "version": "0.6.52",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "author": "VMware",
     "module": "index.js",
diff --git a/src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts b/src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts
index 41bce261f..2d7cf8b9e 100644
--- a/src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts
+++ b/src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts
@@ -20,7 +20,7 @@ export const REPOSITORY_LISTVIEW_TEMPLATE = `
         <clr-dg-column [clrDgSortBy]="pullCountComparator">{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
         <clr-dg-placeholder>{{'REPOSITORY.PLACEHOLDER' | translate }}</clr-dg-placeholder>
         <clr-dg-row *ngFor="let r of repositories"  [clrDgItem]="r">
-          <clr-dg-cell><a href="javascript:void(0)" (click)="gotoLink(projectId || r.project_id, r.name || r.repository_name)">{{r.name}}</a></clr-dg-cell>
+          <clr-dg-cell><a href="javascript:void(0)" (click)="watchRepoClickEvt(r)">{{r.name}}</a></clr-dg-cell>
           <clr-dg-cell>{{r.tags_count}}</clr-dg-cell>
           <clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
         </clr-dg-row>
diff --git a/src/ui_ng/lib/src/repository-listview/repository-listview.component.ts b/src/ui_ng/lib/src/repository-listview/repository-listview.component.ts
index 62aae2601..41940767f 100644
--- a/src/ui_ng/lib/src/repository-listview/repository-listview.component.ts
+++ b/src/ui_ng/lib/src/repository-listview/repository-listview.component.ts
@@ -60,14 +60,14 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
 
   @Input() hasSignedIn: boolean;
   @Input() hasProjectAdminRole: boolean;
-  @Output() tagClickEvent = new EventEmitter<TagClickEvent>();
+  @Output() repoClickEvent = new EventEmitter<RepositoryItem>();
 
   lastFilteredRepoName: string;
   repositories: RepositoryItem[];
   systemInfo: SystemInfo;
   selectedRow: RepositoryItem[] = [];
 
-  loading: boolean = true;
+  loading = true;
 
   @ViewChild('confirmationDialog')
   confirmationDialog: ConfirmationDialogComponent;
@@ -279,19 +279,15 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
     this.doSearchRepoNames('');
   }
 
-  watchTagClickEvt(tagClickEvt: TagClickEvent): void {
-    this.tagClickEvent.emit(tagClickEvt);
-  }
-
   clrLoad(state: State): void {
     this.selectedRow = [];
-    //Keep it for future filtering and sorting
+    // Keep it for future filtering and sorting
     this.currentState = state;
 
     let pageNumber: number = calculatePage(state);
     if (pageNumber <= 0) { pageNumber = 1; }
 
-    //Pagination
+    // Pagination
     let params: RequestQueryParams = new RequestQueryParams();
     params.set("page", '' + pageNumber);
     params.set("page_size", '' + this.pageSize);
@@ -307,7 +303,7 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
         this.repositories = repo.data;
 
         this.signedCon = {};
-        //Do filtering and sorting
+        // Do filtering and sorting
         this.repositories = doFiltering<RepositoryItem>(this.repositories, state);
         this.repositories = doSorting<RepositoryItem>(this.repositories, state);
 
@@ -318,7 +314,7 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
         this.errorHandler.error(error);
       });
 
-    //Force refresh view
+    // Force refresh view
     let hnd = setInterval(() => this.ref.markForCheck(), 100);
     setTimeout(() => clearInterval(hnd), 5000);
   }
@@ -331,7 +327,7 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
     let targetPageNumber: number = this.currentPage;
 
     if (this.currentPage > totalPages) {
-      targetPageNumber = totalPages;//Should == currentPage -1
+      targetPageNumber = totalPages; // Should == currentPage -1
     }
 
     let st: State = this.currentState;
@@ -344,8 +340,8 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
 
     return st;
   }
-  public gotoLink(projectId: number, repoName: string): void {
-    let linkUrl = [this.router.url, repoName];
-    this.router.navigate(linkUrl);
+
+  watchRepoClickEvt(repo: RepositoryItem) {
+    this.repoClickEvent.emit(repo);
   }
 }
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/repository-page.component.html b/src/ui_ng/src/app/repository/repository-page.component.html
index 3cce6acdd..13cc9c0c1 100644
--- a/src/ui_ng/src/app/repository/repository-page.component.html
+++ b/src/ui_ng/src/app/repository/repository-page.component.html
@@ -1,3 +1,4 @@
 <div style="margin-top: 24px;">
-    <hbr-repository-listview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-listview>
+    <hbr-repository-listview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" 
+    (repoClickEvent)="watchRepoClickEvent($event)"></hbr-repository-listview>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/repository-page.component.ts b/src/ui_ng/src/app/repository/repository-page.component.ts
index eed90d4c1..5e77fb926 100644
--- a/src/ui_ng/src/app/repository/repository-page.component.ts
+++ b/src/ui_ng/src/app/repository/repository-page.component.ts
@@ -17,7 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from '../project/project';
 import { SessionService } from '../shared/session.service';
 
-import { TagClickEvent } from 'harbor-ui';
+import { TagClickEvent, RepositoryItem } from 'harbor-ui';
 
 @Component({
   selector: 'repository',
@@ -47,8 +47,8 @@ export class RepositoryPageComponent implements OnInit {
     this.hasSignedIn = this.session.getCurrentUser() !== null;
   }
 
-  watchTagClickEvent(tagEvt: TagClickEvent): void {
-    let linkUrl = ['harbor', 'projects', tagEvt.project_id, 'repositories', tagEvt.repository_name];
+  watchRepoClickEvent(repoEvt: RepositoryItem): void {
+    let linkUrl = ['harbor', 'projects', repoEvt.project_id, 'repositories', repoEvt.name];
     this.router.navigate(linkUrl);
   }
 };
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 9c506dfb1..01f4e59b4 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,3 +1,6 @@
 <div>
-    <hbr-repository (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="goBack($event)" [repoName]="repoName" [withClair]="withClair" [withNotary]="withNotary" [withAdmiral]="withAdmiral" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [isGuest]="isGuest" [projectId]="projectId"></hbr-repository>
+    <hbr-repository [repoName]="repoName"
+    [withClair]="withClair" [withNotary]="withNotary" [withAdmiral]="withAdmiral"
+    [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isGuest]="isGuest"
+    (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)" ></hbr-repository>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
index 842a58de4..9a10273d7 100644
--- a/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
+++ b/src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
@@ -84,7 +84,7 @@ export class TagRepositoryComponent implements OnInit {
     this.router.navigate(linkUrl);
   }
 
-  goBack(tag: string): void {
-    this.router.navigate(["harbor", "projects", this.projectId, "repositories"]);
+  watchGoBackEvt(projectId: string): void {
+    this.router.navigate(["harbor", "projects", projectId, "repositories"]);
   }
 }
\ No newline at end of file