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 e5e49a266..4c73ba74f 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
@@ -135,14 +135,9 @@ export class ListReplicationRuleComponent implements OnInit, OnChanges {
       .getReplicationRules(this.projectId, ruleName))
       .then(rules => {
         this.rules = rules || [];
-        if (this.rules && this.rules.length > 0) {
-          this.selectedId = this.rules[0].id || '';
-          this.selectOne.emit(this.rules[0]);
-        } else {
-          this.hideJobs.emit();
-        }
+        // job list hidden
+        this.hideJobs.emit();
         this.changedRules = this.rules;
-        this.selectedRow = this.changedRules[0];
         this.loading = false;
       }
       ).catch(error => {
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 bd1deaa84..880c8e12c 100644
--- a/src/ui_ng/lib/src/replication/replication.component.html.ts
+++ b/src/ui_ng/lib/src/replication/replication.component.html.ts
@@ -13,7 +13,7 @@ export const REPLICATION_TEMPLATE: string = `
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
       <hbr-list-replication-rule #listReplicationRule [projectId]="projectId" [isSystemAdmin]="isSystemAdmin"  (replicateManual)=replicateManualRule($event) (selectOne)="selectOneRule($event)" (hideJobs)="hideJobs()"  (openNewRule)="openModal()" (editOne)="openEditRule($event)" (reload)="reloadRules($event)" [loading]="loading" [withReplicationJob]="withReplicationJob" (redirect)="customRedirect($event)"></hbr-list-replication-rule>
     </div>
-    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;">
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;" [hidden]='hiddenJobList'>
     <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;">
         <h5 class="flex-items-xs-bottom option-left-down" style="margin-left: 14px;">{{'REPLICATION.REPLICATION_JOBS' | translate}}</h5>
diff --git a/src/ui_ng/lib/src/replication/replication.component.ts b/src/ui_ng/lib/src/replication/replication.component.ts
index 09b2ab0f7..0bbc832db 100644
--- a/src/ui_ng/lib/src/replication/replication.component.ts
+++ b/src/ui_ng/lib/src/replication/replication.component.ts
@@ -109,6 +109,8 @@ export class ReplicationComponent implements OnInit, OnDestroy {
   rules: ReplicationRule[];
   loading: boolean;
   isStopOnGoing: boolean;
+  hiddenJobList = true;
+
 
   jobs: ReplicationJobItem[];
   batchDelectionInfos: BatchInfo[] = [];
@@ -267,6 +269,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
 
   selectOneRule(rule: ReplicationRule) {
     if (rule && rule.id) {
+      this.hiddenJobList = false;
       this.search.ruleId = rule.id || '';
       this.search.repoName = '';
       this.search.status = '';
@@ -361,6 +364,7 @@ export class ReplicationComponent implements OnInit, OnDestroy {
   hideJobs() {
     this.search.ruleId = 0;
     this.jobs = [];
+    this.hiddenJobList = true;
   }
 
   stopJobs() {
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 34da73967..4c6ca6fd9 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -30,7 +30,7 @@
         "clarity-icons": "0.10.24",
         "clarity-ui": "0.10.24",
         "core-js": "^2.4.1",
-        "harbor-ui": "0.7.3",
+        "harbor-ui": "0.7.4",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
@@ -66,4 +66,4 @@
         "typings": "^1.4.0",
         "webdriver-manager": "10.2.5"
     }
-}
\ No newline at end of file
+}