diff --git a/src/ui_ng/lib/README.md b/src/ui_ng/lib/README.md
index ce4796cd0..00adee80b 100644
--- a/src/ui_ng/lib/README.md
+++ b/src/ui_ng/lib/README.md
@@ -74,8 +74,10 @@ If **projectId** is set to the id of specified project, then only show the repli
 
 **withReplicationJob** is used to determine whether or not show the replication jobs which are relevant with the selected replication rule.
 
+**readonly** is to disable all the create/edit/delete actions.
+
 ```
-<hbr-replication [projectId]="..." [withReplicationJob]='...'></hbr-replication>
+<hbr-replication [projectId]="..." [withReplicationJob]='...' [readonly]="..."></hbr-replication>
 ```
 
 * **Endpoint Management View**
diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts
index 60357b30f..047a61c2f 100644
--- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts
+++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html.ts
@@ -9,7 +9,7 @@ export const LIST_REPLICATION_RULE_TEMPLATE: string = `
     <clr-dg-column [clrDgSortBy]="enabledComparator">{{'REPLICATION.ACTIVATION' | translate}}</clr-dg-column>
     <clr-dg-placeholder>{{'REPLICATION.PLACEHOLDER' | translate }}</clr-dg-placeholder>
     <clr-dg-row *clrDgItems="let p of changedRules" [clrDgItem]="p" (click)="selectRule(p)" [style.backgroundColor]="(!projectScope && withReplicationJob && selectedId === p.id) ? '#eee' : ''">
-        <clr-dg-action-overflow>
+        <clr-dg-action-overflow *ngIf="!readonly">
             <button class="action-item" (click)="editRule(p)">{{'REPLICATION.EDIT_POLICY' | translate}}</button>
             <button class="action-item" (click)="toggleRule(p)">{{ (p.enabled === 0 ? 'REPLICATION.ENABLE' : 'REPLICATION.DISABLE') | translate}}</button>
             <button class="action-item" (click)="deleteRule(p)">{{'REPLICATION.DELETE_POLICY' | translate}}</button>
diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts
index b543a0556..bad464f98 100644
--- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts
+++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts
@@ -43,6 +43,7 @@ export class ListReplicationRuleComponent implements OnInit {
   @Input() projectId: number;
   @Input() selectedId: number | string;
   @Input() withReplicationJob: boolean;
+  @Input() readonly: boolean;
 
   @Input() loading: boolean = false;
 
diff --git a/src/ui_ng/lib/src/replication/replication.component.html.ts b/src/ui_ng/lib/src/replication/replication.component.html.ts
index 0bab97d7d..d71f47378 100644
--- a/src/ui_ng/lib/src/replication/replication.component.html.ts
+++ b/src/ui_ng/lib/src/replication/replication.component.html.ts
@@ -3,7 +3,7 @@ export const REPLICATION_TEMPLATE: string = `
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex-items-xs-between" style="height:32px;">
       <div class="flex-xs-middle option-left">
-        <button *ngIf="projectId" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
+        <button *ngIf="creationAvailable" class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> {{'REPLICATION.REPLICATION_RULE' | translate}}</button>
         <create-edit-rule [projectId]="projectId" (reload)="reloadRules($event)"></create-edit-rule>
       </div>
       <div class="flex-xs-middle option-right">
@@ -20,7 +20,7 @@ export const REPLICATION_TEMPLATE: string = `
     </div>
     </div>
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-      <hbr-list-replication-rule #listReplicationRule [projectId]="projectId" (selectOne)="selectOneRule($event)" (editOne)="openEditRule($event)" (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"></hbr-list-replication-rule>
+      <hbr-list-replication-rule #listReplicationRule [readonly]="readonly" [projectId]="projectId" (selectOne)="selectOneRule($event)" (editOne)="openEditRule($event)" (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"></hbr-list-replication-rule>
     </div>
     <div *ngIf="withReplicationJob" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <div class="row flex-items-xs-between" style="height:60px;">
diff --git a/src/ui_ng/lib/src/replication/replication.component.ts b/src/ui_ng/lib/src/replication/replication.component.ts
index 59007c770..c5768985f 100644
--- a/src/ui_ng/lib/src/replication/replication.component.ts
+++ b/src/ui_ng/lib/src/replication/replication.component.ts
@@ -75,6 +75,7 @@ export class ReplicationComponent implements OnInit {
 
   @Input() projectId: number | string;
   @Input() withReplicationJob: boolean;
+  @Input() readonly: boolean;
 
   @Output() redirect = new EventEmitter<ReplicationRule>();
 
@@ -118,6 +119,10 @@ export class ReplicationComponent implements OnInit {
     private translateService: TranslateService) {
   }
 
+  public get creationAvailable(): boolean {
+    return !this.readonly && this.projectId ? true : false;
+  }
+
   ngOnInit() {
     this.currentRuleStatus = this.ruleStatus[0];
     this.currentJobStatus = this.jobStatus[0];
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 5c6bdf1fd..520987a56 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -31,7 +31,7 @@
         "clarity-icons": "^0.9.8",
         "clarity-ui": "^0.9.8",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.3.64",
+        "harbor-ui": "0.3.66",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",