diff --git a/src/ui_ng/lib/src/replication/index.ts b/src/ui_ng/lib/src/replication/index.ts
index 715aedf76..9c26d4d96 100644
--- a/src/ui_ng/lib/src/replication/index.ts
+++ b/src/ui_ng/lib/src/replication/index.ts
@@ -1,6 +1,8 @@
 import { Type } from '@angular/core';
 import { ReplicationComponent } from './replication.component';
 
+export * from './replication.component';
+
 export const REPLICATION_DIRECTIVES: Type<any>[] = [
   ReplicationComponent
 ];
\ No newline at end of file
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 2f28bae1d..a4a85af91 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.2.81",
+        "harbor-ui": "0.2.85",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-cookie": "^1.0.0",
diff --git a/src/ui_ng/src/app/project/list-project/list-project.component.ts b/src/ui_ng/src/app/project/list-project/list-project.component.ts
index 10d3236a2..ccb579d08 100644
--- a/src/ui_ng/src/app/project/list-project/list-project.component.ts
+++ b/src/ui_ng/src/app/project/list-project/list-project.component.ts
@@ -79,7 +79,7 @@ export class ListProjectComponent {
 
   newReplicationRule(p: Project) {
     if (p) {
-      this.router.navigateByUrl(`/harbor/projects/${p.project_id}/replication?is_create=true`);
+      this.router.navigateByUrl(`/harbor/projects/${p.project_id}/replications?is_create=true`);
     }
   }
 
diff --git a/src/ui_ng/src/app/replication/replication-page.component.html b/src/ui_ng/src/app/replication/replication-page.component.html
index 413a9c44c..667be81c6 100644
--- a/src/ui_ng/src/app/replication/replication-page.component.html
+++ b/src/ui_ng/src/app/replication/replication-page.component.html
@@ -1,3 +1,3 @@
 <div style="margin-top: 24px;">
-    <hbr-replication [projectId]="projectIdentify" [withReplicationJob]='true'></hbr-replication>
+    <hbr-replication #replicationView [projectId]="projectIdentify" [withReplicationJob]='true'></hbr-replication>
 </div>
\ No newline at end of file
diff --git a/src/ui_ng/src/app/replication/replication-page.component.ts b/src/ui_ng/src/app/replication/replication-page.component.ts
index eb7b2d2ce..ba76fa970 100644
--- a/src/ui_ng/src/app/replication/replication-page.component.ts
+++ b/src/ui_ng/src/app/replication/replication-page.component.ts
@@ -11,19 +11,30 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { ReplicationComponent } from 'harbor-ui';
 
 @Component({
   selector: 'replicaton',
   templateUrl: 'replication-page.component.html'
 })
-export class ReplicationPageComponent implements OnInit {
+export class ReplicationPageComponent implements OnInit, AfterViewInit {
   projectIdentify: string | number;
+  @ViewChild("replicationView") replicationView: ReplicationComponent;
 
   constructor(private route: ActivatedRoute) { }
 
   ngOnInit(): void {
     this.projectIdentify = +this.route.snapshot.parent.params['id'];
   }
+
+  ngAfterViewInit(): void {
+    let isCreated: boolean = this.route.snapshot.queryParams['is_create'];
+    if (isCreated) {
+      if (this.replicationView) {
+        this.replicationView.openModal();
+      }
+    }
+  }
 }
\ No newline at end of file