diff --git a/src/portal/src/app/app.component.spec.ts b/src/portal/src/app/app.component.spec.ts
index c43d82641..0249988a2 100644
--- a/src/portal/src/app/app.component.spec.ts
+++ b/src/portal/src/app/app.component.spec.ts
@@ -19,7 +19,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CookieService } from 'ngx-cookie';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { SessionService } from './shared/session.service';
-import { AppConfigService } from './app-config.service';
+import { AppConfigService } from './services/app-config.service';
 import { AppComponent } from './app.component';
 import { ClarityModule } from "@clr/angular";
 import { APP_BASE_HREF } from "@angular/common";
diff --git a/src/portal/src/app/app.component.ts b/src/portal/src/app/app.component.ts
index 748fc4f41..ec6c61f52 100644
--- a/src/portal/src/app/app.component.ts
+++ b/src/portal/src/app/app.component.ts
@@ -18,9 +18,9 @@ import { TranslateService } from '@ngx-translate/core';
 import { CookieService } from 'ngx-cookie';
 
 import { SessionService } from './shared/session.service';
-import { AppConfigService } from './app-config.service';
-import { ThemeService } from './theme.service';
-import { themeArray, ThemeInterface } from './theme';
+import { AppConfigService } from './services/app-config.service';
+import { ThemeService } from './services/theme.service';
+import { themeArray, ThemeInterface } from './services/theme';
 import { clone } from '../lib/utils/utils';
 
 const HAS_STYLE_MODE: string = 'styleModeLocal';
diff --git a/src/portal/src/app/app.module.ts b/src/portal/src/app/app.module.ts
index 9c530b644..f9413173c 100644
--- a/src/portal/src/app/app.module.ts
+++ b/src/portal/src/app/app.module.ts
@@ -14,7 +14,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER, LOCALE_ID, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { AppComponent } from './app.component';
-import { InterceptHttpService } from './intercept-http.service';
+import { InterceptHttpService } from './services/intercept-http.service';
 
 import { BaseModule } from './base/base.module';
 import { HarborRoutingModule } from './harbor-routing.module';
@@ -26,8 +26,8 @@ import { DeveloperCenterModule } from './dev-center/dev-center.module';
 import { registerLocaleData } from '@angular/common';
 
 import { TranslateService } from "@ngx-translate/core";
-import { AppConfigService } from './app-config.service';
-import { SkinableConfig } from "./skinable-config.service";
+import { AppConfigService } from './services/app-config.service';
+import { SkinableConfig } from "./services/skinable-config.service";
 import { ProjectConfigComponent } from './project/project-config/project-config.component';
 
 import zh from '@angular/common/locales/zh-Hans';
diff --git a/src/portal/src/app/base/global-search/global-search.component.spec.ts b/src/portal/src/app/base/global-search/global-search.component.spec.ts
index 5f34cd7e5..d00ecf689 100644
--- a/src/portal/src/app/base/global-search/global-search.component.spec.ts
+++ b/src/portal/src/app/base/global-search/global-search.component.spec.ts
@@ -3,8 +3,8 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { GlobalSearchComponent } from './global-search.component';
 import { SearchTriggerService } from './search-trigger.service';
 import { FormsModule } from '@angular/forms';
-import { AppConfigService } from '../../app-config.service';
-import { SkinableConfig } from "../../skinable-config.service";
+import { AppConfigService } from '../../services/app-config.service';
+import { SkinableConfig } from "../../services/skinable-config.service";
 import { RouterTestingModule } from '@angular/router/testing';
 import { of } from 'rxjs';
 
diff --git a/src/portal/src/app/base/global-search/global-search.component.ts b/src/portal/src/app/base/global-search/global-search.component.ts
index 7532efdcd..7de681486 100644
--- a/src/portal/src/app/base/global-search/global-search.component.ts
+++ b/src/portal/src/app/base/global-search/global-search.component.ts
@@ -19,12 +19,12 @@ import { Subject ,  Subscription } from "rxjs";
 
 import { SearchTriggerService } from './search-trigger.service';
 
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 
 
 
 import {TranslateService} from "@ngx-translate/core";
-import {SkinableConfig} from "../../skinable-config.service";
+import {SkinableConfig} from "../../services/skinable-config.service";
 
 const deBounceTime = 500; // ms
 
diff --git a/src/portal/src/app/base/global-search/search-result.component.spec.ts b/src/portal/src/app/base/global-search/search-result.component.spec.ts
index fd2ef1d45..9de0f221b 100644
--- a/src/portal/src/app/base/global-search/search-result.component.spec.ts
+++ b/src/portal/src/app/base/global-search/search-result.component.spec.ts
@@ -4,13 +4,13 @@ import { SearchResults } from './search-results';
 import { SearchTriggerService } from './search-trigger.service';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { AppConfigService } from './../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { ListProjectROComponent } from '../../shared/list-project-ro/list-project-ro.component';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { SearchResultComponent } from './search-result.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { of } from 'rxjs';
-import { AppConfig } from '../../app-config';
+import { AppConfig } from '../../services/app-config';
 import { ClarityModule } from '@clr/angular';
 
 describe('SearchResultComponent', () => {
diff --git a/src/portal/src/app/base/global-search/search-result.component.ts b/src/portal/src/app/base/global-search/search-result.component.ts
index 116fe326b..5aee21e39 100644
--- a/src/portal/src/app/base/global-search/search-result.component.ts
+++ b/src/portal/src/app/base/global-search/search-result.component.ts
@@ -18,7 +18,7 @@ import { GlobalSearchService } from './global-search.service';
 import { SearchResults } from './search-results';
 import { SearchTriggerService } from './search-trigger.service';
 
-import { AppConfigService } from './../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { filter, switchMap } from "rxjs/operators";
 
diff --git a/src/portal/src/app/base/harbor-shell/harbor-shell.component.spec.ts b/src/portal/src/app/base/harbor-shell/harbor-shell.component.spec.ts
index 9c192922b..1ecf7669f 100644
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.spec.ts
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.spec.ts
@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { AppConfigService } from '../..//app-config.service';
 import { RouterTestingModule } from '@angular/router/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SessionService } from '../../shared/session.service';
@@ -18,8 +17,9 @@ import { FormsModule } from '@angular/forms';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { AccountSettingsModalService } from '../../account/account-settings/account-settings-modal-service.service';
 import { PasswordSettingService } from '../../account/password-setting/password-setting.service';
-import { SkinableConfig } from '../../skinable-config.service';
+import { SkinableConfig } from '../../services/skinable-config.service';
 import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
+import { AppConfigService } from "../../services/app-config.service";
 
 describe('HarborShellComponent', () => {
     let component: HarborShellComponent;
diff --git a/src/portal/src/app/base/harbor-shell/harbor-shell.component.ts b/src/portal/src/app/base/harbor-shell/harbor-shell.component.ts
index 098f462d6..3cdcb1d6b 100644
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.ts
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.ts
@@ -14,7 +14,7 @@
 import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Subscription } from "rxjs";
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 
 import { ModalEvent } from '../modal-event';
 import { modalEvents } from '../modal-events.const';
diff --git a/src/portal/src/app/base/navigator/navigator.component.spec.ts b/src/portal/src/app/base/navigator/navigator.component.spec.ts
index f5cf7ee76..d0daf1924 100644
--- a/src/portal/src/app/base/navigator/navigator.component.spec.ts
+++ b/src/portal/src/app/base/navigator/navigator.component.spec.ts
@@ -6,10 +6,10 @@ import { PlatformLocation } from '@angular/common';
 import { NavigatorComponent } from './navigator.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { CookieService } from 'ngx-cookie';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { SearchTriggerService } from '../global-search/search-trigger.service';
-import { SkinableConfig } from "../../skinable-config.service";
+import { SkinableConfig } from "../../services/skinable-config.service";
 
 describe('NavigatorComponent', () => {
     let component: NavigatorComponent;
diff --git a/src/portal/src/app/base/navigator/navigator.component.ts b/src/portal/src/app/base/navigator/navigator.component.ts
index 35294c6e6..037c8f88f 100644
--- a/src/portal/src/app/base/navigator/navigator.component.ts
+++ b/src/portal/src/app/base/navigator/navigator.component.ts
@@ -21,14 +21,14 @@ import { modalEvents } from '../modal-events.const';
 import { SessionService } from '../../shared/session.service';
 import { CookieService, CookieOptions } from 'ngx-cookie';
 import { supportedLangs, enLang, languageNames } from '../../shared/shared.const';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { SearchTriggerService } from '../global-search/search-trigger.service';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
-import { SkinableConfig } from "../../skinable-config.service";
+import { SkinableConfig } from "../../services/skinable-config.service";
 import { CommonRoutes } from "../../../lib/entities/shared.const";
-import { ThemeInterface, themeArray } from '../../theme';
+import { ThemeInterface, themeArray } from '../../services/theme';
 import { clone } from '../../../lib/utils/utils';
-import { ThemeService } from '../../theme.service';
+import { ThemeService } from '../../services/theme.service';
 const HAS_STYLE_MODE: string = 'styleModeLocal';
 
 @Component({
diff --git a/src/portal/src/app/config/auth/config-auth.component.spec.ts b/src/portal/src/app/config/auth/config-auth.component.spec.ts
index 0a5f1cd7a..50b0ba4d5 100644
--- a/src/portal/src/app/config/auth/config-auth.component.spec.ts
+++ b/src/portal/src/app/config/auth/config-auth.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { ConfirmMessageHandler } from '../config.msg.utils';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { ConfigurationService } from '../config.service';
 import { ConfigurationAuthComponent } from './config-auth.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
diff --git a/src/portal/src/app/config/auth/config-auth.component.ts b/src/portal/src/app/config/auth/config-auth.component.ts
index b3affd1ea..a8b1d4143 100644
--- a/src/portal/src/app/config/auth/config-auth.component.ts
+++ b/src/portal/src/app/config/auth/config-auth.component.ts
@@ -16,7 +16,7 @@ import { NgForm } from '@angular/forms';
 import { Subscription } from "rxjs";
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { ConfirmMessageHandler } from '../config.msg.utils';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { ConfigurationService } from '../config.service';
 import { Configuration } from "../../../lib/components/config/config";
 import { ErrorHandler } from "../../../lib/utils/error-handler";
diff --git a/src/portal/src/app/config/config.component.spec.ts b/src/portal/src/app/config/config.component.spec.ts
index 53bde1217..1d6521254 100644
--- a/src/portal/src/app/config/config.component.spec.ts
+++ b/src/portal/src/app/config/config.component.spec.ts
@@ -5,7 +5,7 @@ import { MessageHandlerService } from '../shared/message-handler/message-handler
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ClarityModule } from "@clr/angular";
-import { AppConfigService } from '../app-config.service';
+import { AppConfigService } from '../services/app-config.service';
 import { ConfigurationService } from './config.service';
 import { ConfigurationComponent } from './config.component';
 import { of } from 'rxjs';
diff --git a/src/portal/src/app/config/config.component.ts b/src/portal/src/app/config/config.component.ts
index 86acbf585..b8bd99b6b 100644
--- a/src/portal/src/app/config/config.component.ts
+++ b/src/portal/src/app/config/config.component.ts
@@ -17,7 +17,7 @@ import { ConfirmationTargets, ConfirmationState } from '../shared/shared.const';
 import { SessionService } from '../shared/session.service';
 import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service';
 import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
-import { AppConfigService } from '../app-config.service';
+import { AppConfigService } from '../services/app-config.service';
 import { ConfigurationAuthComponent } from './auth/config-auth.component';
 import { ConfigurationEmailComponent } from './email/config-email.component';
 import { ConfigurationService } from './config.service';
diff --git a/src/portal/src/app/group/add-group-modal/add-group-modal.component.spec.ts b/src/portal/src/app/group/add-group-modal/add-group-modal.component.spec.ts
index 466deeeda..70b708973 100644
--- a/src/portal/src/app/group/add-group-modal/add-group-modal.component.spec.ts
+++ b/src/portal/src/app/group/add-group-modal/add-group-modal.component.spec.ts
@@ -7,7 +7,7 @@ import { GroupService } from "../group.service";
 import { MessageHandlerService } from "./../../shared/message-handler/message-handler.service";
 import { SessionService } from "./../../shared/session.service";
 import { UserGroup } from "./../group";
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { AddGroupModalComponent } from './add-group-modal.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
diff --git a/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts b/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts
index 80453f618..5ebd2eb9e 100644
--- a/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts
+++ b/src/portal/src/app/group/add-group-modal/add-group-modal.component.ts
@@ -7,7 +7,7 @@ import { GroupService } from "../group.service";
 import { MessageHandlerService } from "./../../shared/message-handler/message-handler.service";
 import { SessionService } from "./../../shared/session.service";
 import { UserGroup } from "./../group";
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { GroupType } from "../../../lib/entities/shared.const";
 
 @Component({
diff --git a/src/portal/src/app/group/group.component.spec.ts b/src/portal/src/app/group/group.component.spec.ts
index d3aa320d9..e73c6616e 100644
--- a/src/portal/src/app/group/group.component.spec.ts
+++ b/src/portal/src/app/group/group.component.spec.ts
@@ -9,7 +9,7 @@ import { GroupService } from "./group.service";
 import { of } from "rxjs";
 import { ConfirmationDialogService } from "./../shared/confirmation-dialog/confirmation-dialog.service";
 import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
-import { AppConfigService } from '../app-config.service';
+import { AppConfigService } from '../services/app-config.service';
 import { OperationService } from "../../lib/components/operation/operation.service";
 
 describe('GroupComponent', () => {
diff --git a/src/portal/src/app/group/group.component.ts b/src/portal/src/app/group/group.component.ts
index 18147a862..690b30884 100644
--- a/src/portal/src/app/group/group.component.ts
+++ b/src/portal/src/app/group/group.component.ts
@@ -16,7 +16,7 @@ import { UserGroup } from "./group";
 import { GroupService } from "./group.service";
 import { MessageHandlerService } from "../shared/message-handler/message-handler.service";
 import { throwError as observableThrowError } from "rxjs";
-import { AppConfigService } from '../app-config.service';
+import { AppConfigService } from '../services/app-config.service';
 import { OperationService } from "../../lib/components/operation/operation.service";
 import { operateChanges, OperateInfo, OperationState } from "../../lib/components/operation/operate";
 import { errorHandler } from "../../lib/utils/shared/shared.utils";
diff --git a/src/portal/src/app/harbor-routing.module.ts b/src/portal/src/app/harbor-routing.module.ts
index 59fb7f932..1c248aa13 100644
--- a/src/portal/src/app/harbor-routing.module.ts
+++ b/src/portal/src/app/harbor-routing.module.ts
@@ -29,7 +29,6 @@ import { SignInComponent } from './sign-in/sign-in.component';
 import { ResetPasswordComponent } from './account/password-setting/reset-password/reset-password.component';
 import { GroupComponent } from './group/group.component';
 import { TotalReplicationPageComponent } from './replication/total-replication/total-replication-page.component';
-import { ReplicationTasksPageComponent } from './replication/replication-tasks-page/replication-tasks-page.component';
 import { DestinationPageComponent } from './replication/destination/destination-page.component';
 import { AuditLogComponent } from './log/audit-log.component';
 import { LogPageComponent } from './log/log-page.component';
@@ -40,7 +39,7 @@ import { RobotAccountComponent } from './project/robot-account/robot-account.com
 import { WebhookComponent } from './project/webhook/webhook.component';
 import { ProjectLabelComponent } from './project/project-label/project-label.component';
 import { ProjectConfigComponent } from './project/project-config/project-config.component';
-import { ProjectRoutingResolver } from './project/project-routing-resolver.service';
+import { ProjectRoutingResolver } from './services/routing-resolvers/project-routing-resolver.service';
 import { ListChartsComponent } from './project/helm-chart/list-charts.component';
 import { ListChartVersionsComponent } from './project/helm-chart/list-chart-versions/list-chart-versions.component';
 import { HelmChartDetailComponent } from './project/helm-chart/helm-chart-detail/chart-detail.component';
@@ -60,6 +59,9 @@ import { USERSTATICPERMISSION } from "../lib/services";
 import { RepositoryGridviewComponent } from "./project/repository/repository-gridview.component";
 import { ArtifactListPageComponent } from "./project/repository/artifact-list-page/artifact-list-page.component";
 import { ArtifactSummaryComponent } from "./project/repository/artifact/artifact-summary.component";
+import { ReplicationTasksComponent } from "../lib/components/replication/replication-tasks/replication-tasks.component";
+import { ReplicationTasksRoutingResolverService } from "./services/routing-resolvers/replication-tasks-routing-resolver.service";
+import { ArtifactDetailRoutingResolverService } from "./services/routing-resolvers/artifact-detail-routing-resolver.service";
 
 const harborRoutes: Routes = [
   { path: '', redirectTo: 'harbor', pathMatch: 'full' },
@@ -149,8 +151,11 @@ const harborRoutes: Routes = [
         canActivate: [SystemAdminGuard],
       },
       {
-        path: 'replications/:id/:tasks',
-        component: ReplicationTasksPageComponent,
+        path: 'replications/:id/tasks',
+        component: ReplicationTasksComponent,
+        resolve: {
+          replicationTasksRoutingResolver: ReplicationTasksRoutingResolverService
+        },
         canActivate: [SystemAdminGuard],
         canActivateChild: [SystemAdminGuard]
       },
@@ -334,7 +339,7 @@ const harborRoutes: Routes = [
         component: ArtifactSummaryComponent,
         canActivate: [MemberGuard],
         resolve: {
-          projectResolver: ProjectRoutingResolver
+          artifactResolver: ArtifactDetailRoutingResolverService
         }
       },
       {
@@ -342,7 +347,7 @@ const harborRoutes: Routes = [
         component: ArtifactSummaryComponent,
         canActivate: [MemberGuard],
         resolve: {
-          projectResolver: ProjectRoutingResolver
+          artifactResolver: ArtifactDetailRoutingResolverService
         }
       },
       {
diff --git a/src/portal/src/app/project/list-project/list-project.component.spec.ts b/src/portal/src/app/project/list-project/list-project.component.spec.ts
index 569f8a050..1e5ad95b8 100644
--- a/src/portal/src/app/project/list-project/list-project.component.spec.ts
+++ b/src/portal/src/app/project/list-project/list-project.component.spec.ts
@@ -5,7 +5,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
 import { ClarityModule } from '@clr/angular';
 import { FormsModule } from '@angular/forms';
 import { SessionService } from "../../shared/session.service";
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { RouterTestingModule } from '@angular/router/testing';
 import { SearchTriggerService } from "../../base/global-search/search-trigger.service";
 import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
diff --git a/src/portal/src/app/project/list-project/list-project.component.ts b/src/portal/src/app/project/list-project/list-project.component.ts
index 970adc0ca..6fd4b9544 100644
--- a/src/portal/src/app/project/list-project/list-project.component.ts
+++ b/src/portal/src/app/project/list-project/list-project.component.ts
@@ -27,7 +27,7 @@ import { ConfirmationDialogService } from "../../shared/confirmation-dialog/conf
 import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
 import { ConfirmationMessage } from "../../shared/confirmation-dialog/confirmation-message";
 import { SearchTriggerService } from "../../base/global-search/search-trigger.service";
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { Project } from "../project";
 import { map, catchError, finalize } from "rxjs/operators";
 import { throwError as observableThrowError } from "rxjs";
diff --git a/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.spec.ts b/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.spec.ts
index c138126c4..4ac544b0b 100644
--- a/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.spec.ts
+++ b/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { of } from "rxjs";
 import { MemberService } from '../member.service';
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
 import { ClarityModule } from '@clr/angular';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
diff --git a/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.ts b/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.ts
index 7581051a9..9ad3fafba 100644
--- a/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.ts
+++ b/src/portal/src/app/project/member/add-http-auth-group/add-http-auth-group.component.ts
@@ -26,7 +26,7 @@ import { InlineAlertComponent } from '../../../shared/inline-alert/inline-alert.
 import { UserService } from '../../../user/user.service';
 import { MemberService } from '../member.service';
 import { UserGroup } from "../../../group/group";
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
 import { ProjectRootInterface } from "../../../../lib/services";
 import { GroupType, PROJECT_ROOTS } from "../../../../lib/entities/shared.const";
 import { errorHandler } from "../../../../lib/utils/shared/shared.utils";
diff --git a/src/portal/src/app/project/member/member.component.spec.ts b/src/portal/src/app/project/member/member.component.spec.ts
index f6d6fb836..b08dad37d 100644
--- a/src/portal/src/app/project/member/member.component.spec.ts
+++ b/src/portal/src/app/project/member/member.component.spec.ts
@@ -12,7 +12,7 @@ import { MessageHandlerService } from "../../shared/message-handler/message-hand
 import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
 import { SessionService } from "../../shared/session.service";
 import { MemberService } from "./member.service";
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { of } from 'rxjs';
 import { OperationService } from "../../../lib/components/operation/operation.service";
 import { UserPermissionService } from "../../../lib/services";
diff --git a/src/portal/src/app/project/member/member.component.ts b/src/portal/src/app/project/member/member.component.ts
index 269f0977b..393d6d4e6 100644
--- a/src/portal/src/app/project/member/member.component.ts
+++ b/src/portal/src/app/project/member/member.component.ts
@@ -28,7 +28,7 @@ import { AddGroupComponent } from './add-group/add-group.component';
 import { AddHttpAuthGroupComponent } from './add-http-auth-group/add-http-auth-group.component';
 import { MemberService } from "./member.service";
 import { AddMemberComponent } from "./add-member/add-member.component";
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { map, catchError } from "rxjs/operators";
 import { throwError as observableThrowError } from "rxjs";
 import { OperationService } from "../../../lib/components/operation/operation.service";
diff --git a/src/portal/src/app/project/project-detail/project-detail.component.spec.ts b/src/portal/src/app/project/project-detail/project-detail.component.spec.ts
index 1ce8f4dc5..ec5cd9154 100644
--- a/src/portal/src/app/project/project-detail/project-detail.component.spec.ts
+++ b/src/portal/src/app/project/project-detail/project-detail.component.spec.ts
@@ -10,7 +10,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { of } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { SessionService } from '../../shared/session.service';
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { ProjectService, UserPermissionService } from "../../../lib/services";
 import { ErrorHandler } from "../../../lib/utils/error-handler";
 
diff --git a/src/portal/src/app/project/project-detail/project-detail.component.ts b/src/portal/src/app/project/project-detail/project-detail.component.ts
index f94039152..b3cc40aec 100644
--- a/src/portal/src/app/project/project-detail/project-detail.component.ts
+++ b/src/portal/src/app/project/project-detail/project-detail.component.ts
@@ -15,7 +15,7 @@ import { Component, OnInit, HostListener, AfterViewInit, OnDestroy, ChangeDetect
 import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from '../project';
 import { SessionService } from '../../shared/session.service';
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { forkJoin, Subject, Subscription } from "rxjs";
 import { UserPermissionService, USERSTATICPERMISSION } from "../../../lib/services";
 import { ErrorHandler } from "../../../lib/utils/error-handler";
diff --git a/src/portal/src/app/project/project.module.ts b/src/portal/src/app/project/project.module.ts
index 730338f67..d4af80b85 100644
--- a/src/portal/src/app/project/project.module.ts
+++ b/src/portal/src/app/project/project.module.ts
@@ -27,7 +27,7 @@ import { AddMemberComponent } from './member/add-member/add-member.component';
 import { AddGroupComponent } from './member/add-group/add-group.component';
 import { MemberService } from './member/member.service';
 import { RobotService } from './robot-account/robot-account.service';
-import { ProjectRoutingResolver } from './project-routing-resolver.service';
+import { ProjectRoutingResolver } from '../services/routing-resolvers/project-routing-resolver.service';
 import { TargetExistsValidatorDirective } from '../shared/target-exists-directive';
 import { HelmChartModule } from './helm-chart/helm-chart.module';
 import { RobotAccountComponent } from './robot-account/robot-account.component';
@@ -114,7 +114,6 @@ import { LastTriggerComponent } from "./webhook/last-trigger/last-trigger.compon
   ],
   exports: [ProjectComponent, ListProjectComponent],
   providers: [
-    ProjectRoutingResolver,
     MemberService,
     RobotService,
     WebhookService,
diff --git a/src/portal/src/app/project/project.ts b/src/portal/src/app/project/project.ts
index f6365f244..d43408bbe 100644
--- a/src/portal/src/app/project/project.ts
+++ b/src/portal/src/app/project/project.ts
@@ -11,24 +11,6 @@
 // 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.
-/*
-  [
-    {
-        "project_id": 1,
-        "owner_id": 1,
-        "name": "library",
-        "creation_time": "2017-02-10T07:57:56Z",
-        "creation_time_str": "",
-        "deleted": 0,
-        "owner_name": "",
-        "public": 1,
-        "togglable": true,
-        "update_time": "2017-02-10T07:57:56Z",
-        "current_user_role_id": 1,
-        "repo_count": 0
-    }
-  ]
-*/
 export class Project {
     project_id: number;
     owner_id: number;
diff --git a/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.spec.ts b/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.spec.ts
index 029ea59c3..da10e9862 100644
--- a/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.spec.ts
+++ b/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.spec.ts
@@ -9,7 +9,7 @@ import { of } from 'rxjs';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SessionService } from "../../../shared/session.service";
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
 import { ArtifactService } from "../../../../../ng-swagger-gen/services/artifact.service";
 import { ArtifactDefaultService } from "../artifact/artifact.service";
 import { IServiceConfig, SERVICE_CONFIG } from "../../../../lib/entities/service.config";
diff --git a/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.ts b/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.ts
index 3180d5640..ae34190cb 100644
--- a/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.ts
+++ b/src/portal/src/app/project/repository/artifact-list-page/artifact-list-page.component.ts
@@ -15,7 +15,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ArtifactListComponent } from "./artifact-list/artifact-list.component";
 import { ArtifactDefaultService } from "../artifact/artifact.service";
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
 import { SessionService } from "../../../shared/session.service";
 import { ArtifactClickEvent } from "../../../../lib/services";
 import { Project } from "../../project";
diff --git a/src/portal/src/app/project/repository/artifact/artifact-summary.component.spec.ts b/src/portal/src/app/project/repository/artifact/artifact-summary.component.spec.ts
index 77bc05b84..6311def0d 100644
--- a/src/portal/src/app/project/repository/artifact/artifact-summary.component.spec.ts
+++ b/src/portal/src/app/project/repository/artifact/artifact-summary.component.spec.ts
@@ -9,7 +9,8 @@ import { ArtifactService } from "../../../../../ng-swagger-gen/services/artifact
 import { ErrorHandler } from "../../../../lib/utils/error-handler";
 import { TranslateFakeLoader, TranslateLoader, TranslateModule } from "@ngx-translate/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
+import { Project } from "../../project";
 
 describe('ArtifactSummaryComponent', () => {
 
@@ -43,11 +44,7 @@ describe('ArtifactSummaryComponent', () => {
         }
       },
       data: {
-        projectResolver: {
-          has_project_admin_role: true,
-          current_user_role_id: 3,
-          name: "demo"
-        }
+        artifactResolver: [mockedArtifact, new Project()]
       }
     },
     data: of({
diff --git a/src/portal/src/app/project/repository/artifact/artifact-summary.component.ts b/src/portal/src/app/project/repository/artifact/artifact-summary.component.ts
index 6de6f9383..0dff89ab8 100644
--- a/src/portal/src/app/project/repository/artifact/artifact-summary.component.ts
+++ b/src/portal/src/app/project/repository/artifact/artifact-summary.component.ts
@@ -5,7 +5,7 @@ import { ErrorHandler } from "../../../../lib/utils/error-handler";
 import { Label } from "../../../../../ng-swagger-gen/models/label";
 import { ProjectService } from "../../../../lib/services";
 import { ActivatedRoute, Router } from "@angular/router";
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
 import { Project } from "../../project";
 import { finalize } from "rxjs/operators";
 
@@ -77,11 +77,9 @@ export class ArtifactSummaryComponent implements OnInit {
     if (this.repositoryName && this.artifactDigest) {
       const resolverData = this.route.snapshot.data;
       if (resolverData) {
-        const pro: Project = <Project>resolverData['projectResolver'];
+        const pro: Project = <Project>(resolverData['artifactResolver'][1]);
         this.projectName = pro.name;
-        if (this.projectName) {
-          this.getArtifactDetails();
-        }
+        this.artifact = <Artifact>(resolverData['artifactResolver'][0]);
       }
     }
   }
diff --git a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.spec.ts b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.spec.ts
index 841018699..fa1ea1520 100644
--- a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.spec.ts
+++ b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.spec.ts
@@ -7,7 +7,7 @@ import { RobotService } from "../robot-account.service";
 import { of } from "rxjs";
 import { MessageHandlerService } from "../../../shared/message-handler/message-handler.service";
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
 import { ErrorHandler } from "../../../../lib/utils/error-handler";
 
 describe('AddRobotComponent', () => {
diff --git a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts
index bcf8dbdf4..c1de5128c 100644
--- a/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts
+++ b/src/portal/src/app/project/robot-account/add-robot/add-robot.component.ts
@@ -17,7 +17,7 @@ import { TranslateService } from "@ngx-translate/core";
 import { MessageHandlerService } from "../../../shared/message-handler/message-handler.service";
 import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-import { AppConfigService } from "../../../app-config.service";
+import { AppConfigService } from "../../../services/app-config.service";
 import { ErrorHandler } from "../../../../lib/utils/error-handler";
 const ONE_THOUSAND: number = 1000;
 const NEVER_EXPIRED: number = -1;
diff --git a/src/portal/src/app/project/summary/summary.component.spec.ts b/src/portal/src/app/project/summary/summary.component.spec.ts
index f10e2a551..ad20319e2 100644
--- a/src/portal/src/app/project/summary/summary.component.spec.ts
+++ b/src/portal/src/app/project/summary/summary.component.spec.ts
@@ -4,7 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ActivatedRoute } from '@angular/router';
 import { of } from 'rxjs';
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { SummaryComponent } from './summary.component';
 import { ProjectService, UserPermissionService } from "../../../lib/services";
 import { ErrorHandler } from "../../../lib/utils/error-handler";
diff --git a/src/portal/src/app/project/summary/summary.component.ts b/src/portal/src/app/project/summary/summary.component.ts
index 752d1da06..74fc05b92 100644
--- a/src/portal/src/app/project/summary/summary.component.ts
+++ b/src/portal/src/app/project/summary/summary.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { AppConfigService } from "../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { QUOTA_DANGER_COEFFICIENT, QUOTA_WARNING_COEFFICIENT, QuotaUnits } from "../../../lib/entities/shared.const";
 import { ProjectService, UserPermissionService, USERSTATICPERMISSION } from "../../../lib/services";
 import { ErrorHandler } from "../../../lib/utils/error-handler";
diff --git a/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.html b/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.html
deleted file mode 100644
index 0f398b936..000000000
--- a/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<replication-tasks [executionId]="executionId"></replication-tasks>
\ No newline at end of file
diff --git a/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.scss b/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.spec.ts b/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.spec.ts
deleted file mode 100644
index 601da0de2..000000000
--- a/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.spec.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ReplicationTasksPageComponent } from './replication-tasks-page.component';
-import { ActivatedRoute, Router } from '@angular/router';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { of } from 'rxjs';
-
-describe('ReplicationTasksPageComponent', () => {
-  let component: ReplicationTasksPageComponent;
-  let fixture: ComponentFixture<ReplicationTasksPageComponent>;
-  let mockActivatedRoute = {
-    snapshot: {
-      params: 1
-    }
-  };
-  let mockRouter = null;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ReplicationTasksPageComponent],
-      schemas: [
-        CUSTOM_ELEMENTS_SCHEMA
-      ],
-      imports: [
-        TranslateModule.forRoot()
-      ],
-      providers: [
-        {
-          provide: ActivatedRoute, useValue: mockActivatedRoute
-        },
-        {
-          provide: Router, useValue: mockRouter
-        },
-        TranslateService
-      ]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ReplicationTasksPageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.ts b/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.ts
deleted file mode 100644
index 83fe8b6d5..000000000
--- a/src/portal/src/app/replication/replication-tasks-page/replication-tasks-page.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-@Component({
-  selector: 'app-replication-tasks-page',
-  templateUrl: './replication-tasks-page.component.html',
-  styleUrls: ['./replication-tasks-page.component.scss']
-})
-export class ReplicationTasksPageComponent implements OnInit {
-  executionId: string;
-  constructor(
-    private route: ActivatedRoute,
-  ) { }
-
-  ngOnInit(): void {
-    this.executionId = this.route.snapshot.params["id"];
-  }
-
-}
diff --git a/src/portal/src/app/replication/replication.module.ts b/src/portal/src/app/replication/replication.module.ts
index 76531a553..e8fdd99c2 100644
--- a/src/portal/src/app/replication/replication.module.ts
+++ b/src/portal/src/app/replication/replication.module.ts
@@ -13,13 +13,10 @@
 // limitations under the License.
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
 import { ReplicationManagementComponent } from './replication-management/replication-management.component';
 import { ReplicationPageComponent } from './replication-page.component';
 import { TotalReplicationPageComponent } from './total-replication/total-replication-page.component';
 import { DestinationPageComponent } from './destination/destination-page.component';
-import { ReplicationTasksPageComponent } from './replication-tasks-page/replication-tasks-page.component';
-
 import { SharedModule } from '../shared/shared.module';
 import {ReactiveFormsModule} from "@angular/forms";
 
@@ -33,13 +30,11 @@ import {ReactiveFormsModule} from "@angular/forms";
     ReplicationPageComponent,
     ReplicationManagementComponent,
     TotalReplicationPageComponent,
-    ReplicationTasksPageComponent,
     DestinationPageComponent,
   ],
   exports: [
     ReplicationPageComponent,
     DestinationPageComponent,
-    ReplicationTasksPageComponent,
     TotalReplicationPageComponent,
   ]
 })
diff --git a/src/portal/src/app/replication/total-replication/total-replication-page.component.spec.ts b/src/portal/src/app/replication/total-replication/total-replication-page.component.spec.ts
index ff4b7fafc..7bc5799db 100644
--- a/src/portal/src/app/replication/total-replication/total-replication-page.component.spec.ts
+++ b/src/portal/src/app/replication/total-replication/total-replication-page.component.spec.ts
@@ -9,7 +9,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import {SessionService} from "../../shared/session.service";
-import {AppConfigService} from "../../app-config.service";
+import {AppConfigService} from "../../services/app-config.service";
 
 describe('TotalReplicationPageComponent', () => {
     let component: TotalReplicationPageComponent;
diff --git a/src/portal/src/app/replication/total-replication/total-replication-page.component.ts b/src/portal/src/app/replication/total-replication/total-replication-page.component.ts
index 89912da98..979e661be 100644
--- a/src/portal/src/app/replication/total-replication/total-replication-page.component.ts
+++ b/src/portal/src/app/replication/total-replication/total-replication-page.component.ts
@@ -14,7 +14,7 @@
 import { Component } from '@angular/core';
 import {Router, ActivatedRoute} from "@angular/router";
 import {SessionService} from "../../shared/session.service";
-import {AppConfigService} from "../../app-config.service";
+import {AppConfigService} from "../../services/app-config.service";
 import { ReplicationRule } from "../../../lib/services";
 
 @Component({
diff --git a/src/portal/src/app/app-config.service.spec.ts b/src/portal/src/app/services/app-config.service.spec.ts
similarity index 94%
rename from src/portal/src/app/app-config.service.spec.ts
rename to src/portal/src/app/services/app-config.service.spec.ts
index 85ae194c2..fcbd96158 100644
--- a/src/portal/src/app/app-config.service.spec.ts
+++ b/src/portal/src/app/services/app-config.service.spec.ts
@@ -3,8 +3,7 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 import { CookieService } from 'ngx-cookie';
 import { AppConfigService } from './app-config.service';
 import { AppConfig } from './app-config';
-import { Component } from '@angular/core';
-import { CURRENT_BASE_HREF } from "../lib/utils/utils";
+import { CURRENT_BASE_HREF } from "../../lib/utils/utils";
 
 describe('AppConfigService', () => {
   let injector: TestBed;
diff --git a/src/portal/src/app/app-config.service.ts b/src/portal/src/app/services/app-config.service.ts
similarity index 88%
rename from src/portal/src/app/app-config.service.ts
rename to src/portal/src/app/services/app-config.service.ts
index 276a197c4..bc9b43d72 100644
--- a/src/portal/src/app/app-config.service.ts
+++ b/src/portal/src/app/services/app-config.service.ts
@@ -15,12 +15,12 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { CookieService } from 'ngx-cookie';
 import { AppConfig } from './app-config';
-import { CookieKeyOfAdmiral, HarborQueryParamKey } from './shared/shared.const';
-import { maintainUrlQueryParmas } from './shared/shared.utils';
-import { map, catchError } from "rxjs/operators";
-import { Observable, throwError as observableThrowError } from "rxjs";
-import { CURRENT_BASE_HREF, HTTP_GET_OPTIONS } from "../lib/utils/utils";
-import { CONFIG_AUTH_MODE } from "../lib/entities/shared.const";
+import { CookieKeyOfAdmiral, HarborQueryParamKey } from '../shared/shared.const';
+import { maintainUrlQueryParmas } from '../shared/shared.utils';
+import { map } from "rxjs/operators";
+import { Observable } from "rxjs";
+import { CURRENT_BASE_HREF, HTTP_GET_OPTIONS } from "../../lib/utils/utils";
+import { CONFIG_AUTH_MODE } from "../../lib/entities/shared.const";
 export const systemInfoEndpoint = CURRENT_BASE_HREF + "/systeminfo";
 /**
  * Declare service to handle the bootstrap options
diff --git a/src/portal/src/app/app-config.ts b/src/portal/src/app/services/app-config.ts
similarity index 97%
rename from src/portal/src/app/app-config.ts
rename to src/portal/src/app/services/app-config.ts
index 299e51798..ce46e60a8 100644
--- a/src/portal/src/app/app-config.ts
+++ b/src/portal/src/app/services/app-config.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 
-import { ClairDBStatus } from "../lib/services";
+import { ClairDBStatus } from "../../lib/services";
 
 export class AppConfig {
     with_notary: boolean;
diff --git a/src/portal/src/app/intercept-http.service.spec.ts b/src/portal/src/app/services/intercept-http.service.spec.ts
similarity index 100%
rename from src/portal/src/app/intercept-http.service.spec.ts
rename to src/portal/src/app/services/intercept-http.service.spec.ts
diff --git a/src/portal/src/app/intercept-http.service.ts b/src/portal/src/app/services/intercept-http.service.ts
similarity index 100%
rename from src/portal/src/app/intercept-http.service.ts
rename to src/portal/src/app/services/intercept-http.service.ts
diff --git a/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.spec.ts b/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.spec.ts
new file mode 100644
index 000000000..b36b8c8eb
--- /dev/null
+++ b/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.spec.ts
@@ -0,0 +1,23 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ProjectService } from "../../../lib/services";
+import { ArtifactService } from "../../../../ng-swagger-gen/services/artifact.service";
+import { ArtifactDetailRoutingResolverService } from "./artifact-detail-routing-resolver.service";
+
+describe('ArtifactDetailRoutingResolverService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      providers: [
+        { provide: ProjectService, useValue: null },
+        { provide: ArtifactService, useValue: null },
+      ]
+    });
+  });
+
+  it('should be created', inject([ArtifactDetailRoutingResolverService], (service: ArtifactDetailRoutingResolverService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.ts b/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.ts
new file mode 100644
index 000000000..c00f6ceca
--- /dev/null
+++ b/src/portal/src/app/services/routing-resolvers/artifact-detail-routing-resolver.service.ts
@@ -0,0 +1,56 @@
+// Copyright (c) 2017 VMware, Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { Injectable } from '@angular/core';
+import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
+import { forkJoin, Observable, of } from 'rxjs';
+import { map, catchError, mergeMap } from "rxjs/operators";
+import { Artifact } from "../../../../ng-swagger-gen/models/artifact";
+import { ArtifactService } from "../../../../ng-swagger-gen/services/artifact.service";
+import { Project } from "../../project/project";
+import { ProjectService } from "../../../lib/services";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ArtifactDetailRoutingResolverService implements Resolve<Artifact> {
+  constructor(
+    private projectService: ProjectService,
+    private artifactService: ArtifactService,
+    private router: Router) { }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Artifact> | any {
+      const projectId: string =  route.params['id'];
+      const repositoryName: string = route.params['repo'];
+      const artifactDigest: string = route.params['digest'];
+      return this.projectService
+      .getProject(projectId)
+      .pipe(
+          mergeMap((project: Project) => {
+            return forkJoin([this.artifactService.getArtifact({
+              repositoryName: repositoryName,
+              reference: artifactDigest,
+              projectName: project.name,
+              withLabel: true,
+              withScanOverview: true,
+              withSignature: true,
+              withImmutableStatus: true
+            }), of(project)]);
+          }),
+          catchError (error => {
+            this.router.navigate(['/harbor', 'projects']);
+            return null;
+          })
+      );
+  }
+}
diff --git a/src/portal/src/app/project/project-routing-resolver.service.spec.ts b/src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.spec.ts
similarity index 85%
rename from src/portal/src/app/project/project-routing-resolver.service.spec.ts
rename to src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.spec.ts
index 9d739101a..c7f076153 100644
--- a/src/portal/src/app/project/project-routing-resolver.service.spec.ts
+++ b/src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.spec.ts
@@ -1,8 +1,8 @@
 import { TestBed, inject } from '@angular/core/testing';
-import { SessionService } from '../shared/session.service';
+import { SessionService } from '../../shared/session.service';
 import { ProjectRoutingResolver } from './project-routing-resolver.service';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ProjectService } from "../../lib/services";
+import { ProjectService } from "../../../lib/services";
 
 describe('ProjectRoutingResolverService', () => {
   beforeEach(() => {
diff --git a/src/portal/src/app/project/project-routing-resolver.service.ts b/src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.ts
similarity index 87%
rename from src/portal/src/app/project/project-routing-resolver.service.ts
rename to src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.ts
index 890803239..3e6ac29e5 100644
--- a/src/portal/src/app/project/project-routing-resolver.service.ts
+++ b/src/portal/src/app/services/routing-resolvers/project-routing-resolver.service.ts
@@ -13,17 +13,19 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
-import { Project } from './project';
-import { SessionService } from '../shared/session.service';
+import { Project } from '../../project/project';
+import { SessionService } from '../../shared/session.service';
 import { Observable } from 'rxjs';
 import { map, catchError } from "rxjs/operators";
-import { RoleInfo } from '../shared/shared.const';
+import { RoleInfo } from '../../shared/shared.const';
 
 
-import { Roles } from '../shared/shared.const';
-import { ProjectService } from "../../lib/services";
+import { Roles } from '../../shared/shared.const';
+import { ProjectService } from "../../../lib/services";
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class ProjectRoutingResolver implements Resolve<Project> {
 
   constructor(
diff --git a/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.spec.ts b/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.spec.ts
new file mode 100644
index 000000000..c296b45d4
--- /dev/null
+++ b/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.spec.ts
@@ -0,0 +1,21 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ReplicationService } from "../../../lib/services";
+import { ReplicationTasksRoutingResolverService } from "./replication-tasks-routing-resolver.service";
+
+describe('ReplicationTasksRoutingResolverService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      providers: [
+        { provide: ReplicationService, useValue: null },
+      ]
+    });
+  });
+
+  it('should be created', inject([ReplicationTasksRoutingResolverService], (service: ReplicationTasksRoutingResolverService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.ts b/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.ts
new file mode 100644
index 000000000..0354faef7
--- /dev/null
+++ b/src/portal/src/app/services/routing-resolvers/replication-tasks-routing-resolver.service.ts
@@ -0,0 +1,46 @@
+// Copyright (c) 2017 VMware, Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { Injectable } from '@angular/core';
+import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, catchError } from "rxjs/operators";
+import { ReplicationJob, ReplicationService } from "../../../lib/services";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReplicationTasksRoutingResolverService implements Resolve<ReplicationJob> {
+
+  constructor(
+    private replicationService: ReplicationService,
+    private router: Router) { }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ReplicationJob> | any {
+    // Support both parameters and query parameters
+    let executionId = route.params['id'];
+    if (!executionId) {
+      executionId = route.queryParams['project_id'];
+    }
+    return this.replicationService.getExecutionById(executionId)
+      .pipe(map((res: ReplicationJob) => {
+        if (!res) {
+          this.router.navigate(['/harbor', 'projects']);
+        }
+        return res;
+      }), catchError (error => {
+        this.router.navigate(['/harbor', 'projects']);
+        return null;
+      }));
+  }
+}
diff --git a/src/portal/src/app/skinable-config.service.spec.ts b/src/portal/src/app/services/skinable-config.service.spec.ts
similarity index 100%
rename from src/portal/src/app/skinable-config.service.spec.ts
rename to src/portal/src/app/services/skinable-config.service.spec.ts
diff --git a/src/portal/src/app/skinable-config.service.ts b/src/portal/src/app/services/skinable-config.service.ts
similarity index 100%
rename from src/portal/src/app/skinable-config.service.ts
rename to src/portal/src/app/services/skinable-config.service.ts
diff --git a/src/portal/src/app/theme.service.spec.ts b/src/portal/src/app/services/theme.service.spec.ts
similarity index 100%
rename from src/portal/src/app/theme.service.spec.ts
rename to src/portal/src/app/services/theme.service.spec.ts
diff --git a/src/portal/src/app/theme.service.ts b/src/portal/src/app/services/theme.service.ts
similarity index 100%
rename from src/portal/src/app/theme.service.ts
rename to src/portal/src/app/services/theme.service.ts
diff --git a/src/portal/src/app/theme.ts b/src/portal/src/app/services/theme.ts
similarity index 100%
rename from src/portal/src/app/theme.ts
rename to src/portal/src/app/services/theme.ts
diff --git a/src/portal/src/app/shared/about-dialog/about-dialog.component.spec.ts b/src/portal/src/app/shared/about-dialog/about-dialog.component.spec.ts
index 9820e4225..85c6c8493 100644
--- a/src/portal/src/app/shared/about-dialog/about-dialog.component.spec.ts
+++ b/src/portal/src/app/shared/about-dialog/about-dialog.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
-import { AppConfigService } from '../../app-config.service';
-import { SkinableConfig } from "../../skinable-config.service";
+import { AppConfigService } from '../../services/app-config.service';
+import { SkinableConfig } from "../../services/skinable-config.service";
 import { AboutDialogComponent } from './about-dialog.component';
 import { ClarityModule } from "@clr/angular";
 
diff --git a/src/portal/src/app/shared/about-dialog/about-dialog.component.ts b/src/portal/src/app/shared/about-dialog/about-dialog.component.ts
index 4cb76ac94..5db1f9826 100644
--- a/src/portal/src/app/shared/about-dialog/about-dialog.component.ts
+++ b/src/portal/src/app/shared/about-dialog/about-dialog.component.ts
@@ -14,8 +14,8 @@
 import { Component, OnInit } from '@angular/core';
 import { TranslateService } from "@ngx-translate/core";
 
-import { AppConfigService } from '../../app-config.service';
-import { SkinableConfig } from "../../skinable-config.service";
+import { AppConfigService } from '../../services/app-config.service';
+import { SkinableConfig } from "../../services/skinable-config.service";
 
 @Component({
     selector: 'about-dialog',
diff --git a/src/portal/src/app/shared/route/auth-user-activate.service.spec.ts b/src/portal/src/app/shared/route/auth-user-activate.service.spec.ts
index 0eb1b5d8c..2542e267c 100644
--- a/src/portal/src/app/shared/route/auth-user-activate.service.spec.ts
+++ b/src/portal/src/app/shared/route/auth-user-activate.service.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SessionService } from '../../shared/session.service';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { MessageHandlerService } from '../message-handler/message-handler.service';
 import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
 import { AuthCheckGuard } from './auth-user-activate.service';
diff --git a/src/portal/src/app/shared/route/auth-user-activate.service.ts b/src/portal/src/app/shared/route/auth-user-activate.service.ts
index 8ab5a3e9d..8e324b4a4 100644
--- a/src/portal/src/app/shared/route/auth-user-activate.service.ts
+++ b/src/portal/src/app/shared/route/auth-user-activate.service.ts
@@ -21,7 +21,7 @@ import {
 } from '@angular/router';
 import { SessionService } from '../../shared/session.service';
 import { AdmiralQueryParamKey } from '../../shared/shared.const';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { maintainUrlQueryParmas } from '../../shared/shared.utils';
 import { MessageHandlerService } from '../message-handler/message-handler.service';
 import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
diff --git a/src/portal/src/app/shared/route/mode-guard-activate.service.spec.ts b/src/portal/src/app/shared/route/mode-guard-activate.service.spec.ts
index a455d8c8e..1e26badca 100644
--- a/src/portal/src/app/shared/route/mode-guard-activate.service.spec.ts
+++ b/src/portal/src/app/shared/route/mode-guard-activate.service.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed, async, inject } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ModeGuard } from './mode-guard-activate.service';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 
 describe('ModeGuardActivateServiceGuard', () => {
   const fakeAppConfigService = null;
diff --git a/src/portal/src/app/shared/route/mode-guard-activate.service.ts b/src/portal/src/app/shared/route/mode-guard-activate.service.ts
index f242ad699..93d2693b9 100644
--- a/src/portal/src/app/shared/route/mode-guard-activate.service.ts
+++ b/src/portal/src/app/shared/route/mode-guard-activate.service.ts
@@ -18,7 +18,7 @@ import {
   RouterStateSnapshot,
   CanActivateChild
 } from '@angular/router';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { Observable } from 'rxjs';
 import { CommonRoutes } from "../../../lib/entities/shared.const";
 
diff --git a/src/portal/src/app/shared/route/oidc-guard-active.service.spec.ts b/src/portal/src/app/shared/route/oidc-guard-active.service.spec.ts
index 07a0518cd..fd0495481 100644
--- a/src/portal/src/app/shared/route/oidc-guard-active.service.spec.ts
+++ b/src/portal/src/app/shared/route/oidc-guard-active.service.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed, async, inject } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { OidcGuard } from './oidc-guard-active.service';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { of } from 'rxjs';
 import { UserPermissionService } from "../../../lib/services";
 
diff --git a/src/portal/src/app/shared/route/oidc-guard-active.service.ts b/src/portal/src/app/shared/route/oidc-guard-active.service.ts
index bc733dd1d..86fcfe249 100644
--- a/src/portal/src/app/shared/route/oidc-guard-active.service.ts
+++ b/src/portal/src/app/shared/route/oidc-guard-active.service.ts
@@ -19,7 +19,7 @@ import {
   RouterStateSnapshot,
   CanActivateChild
 } from '@angular/router';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { Observable } from 'rxjs';
 import { CommonRoutes } from "../../../lib/entities/shared.const";
 import { UserPermissionService } from "../../../lib/services";
diff --git a/src/portal/src/app/shared/route/system-admin-activate.service.spec.ts b/src/portal/src/app/shared/route/system-admin-activate.service.spec.ts
index 04048d9d7..53bc9eaf8 100644
--- a/src/portal/src/app/shared/route/system-admin-activate.service.spec.ts
+++ b/src/portal/src/app/shared/route/system-admin-activate.service.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { SystemAdminGuard } from './system-admin-activate.service';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { SessionService } from '../../shared/session.service';
 
 describe('SystemAdminGuard', () => {
diff --git a/src/portal/src/app/shared/route/system-admin-activate.service.ts b/src/portal/src/app/shared/route/system-admin-activate.service.ts
index 08665b3c3..fdcdb9483 100644
--- a/src/portal/src/app/shared/route/system-admin-activate.service.ts
+++ b/src/portal/src/app/shared/route/system-admin-activate.service.ts
@@ -20,7 +20,7 @@ import {
   NavigationExtras
 } from '@angular/router';
 import { SessionService } from '../../shared/session.service';
-import { AppConfigService } from '../../app-config.service';
+import { AppConfigService } from '../../services/app-config.service';
 import { Observable } from 'rxjs';
 import { CommonRoutes } from "../../../lib/entities/shared.const";
 
diff --git a/src/portal/src/app/shared/statictics/statistics-panel.component.spec.ts b/src/portal/src/app/shared/statictics/statistics-panel.component.spec.ts
index 105888c11..d3489b6e6 100644
--- a/src/portal/src/app/shared/statictics/statistics-panel.component.spec.ts
+++ b/src/portal/src/app/shared/statictics/statistics-panel.component.spec.ts
@@ -13,7 +13,7 @@ import { StatisticsService } from "./statistics.service";
 import { SessionService } from "../session.service";
 import { MessageHandlerService } from "../message-handler/message-handler.service";
 import { StatisticHandler } from "./statistic-handler.service";
-import { AppConfigService } from "./../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 import { Statistics } from './statistics';
 import { Volumes } from './volumes';
 describe('StatisticsPanelComponent', () => {
diff --git a/src/portal/src/app/shared/statictics/statistics-panel.component.ts b/src/portal/src/app/shared/statictics/statistics-panel.component.ts
index 3e06d9e34..5600a3f61 100644
--- a/src/portal/src/app/shared/statictics/statistics-panel.component.ts
+++ b/src/portal/src/app/shared/statictics/statistics-panel.component.ts
@@ -22,7 +22,7 @@ import { Volumes } from "./volumes";
 
 import { MessageHandlerService } from "../message-handler/message-handler.service";
 import { StatisticHandler } from "./statistic-handler.service";
-import { AppConfigService } from "./../../app-config.service";
+import { AppConfigService } from "../../services/app-config.service";
 
 
 @Component({
diff --git a/src/portal/src/app/sign-in/sign-in.component.spec.ts b/src/portal/src/app/sign-in/sign-in.component.spec.ts
index 15865fca1..db2bfe952 100644
--- a/src/portal/src/app/sign-in/sign-in.component.spec.ts
+++ b/src/portal/src/app/sign-in/sign-in.component.spec.ts
@@ -2,10 +2,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SignInComponent } from './sign-in.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { RouterTestingModule } from '@angular/router/testing';
-import { AppConfigService } from '../app-config.service';
+import { AppConfigService } from '../services/app-config.service';
 import { SessionService } from '../shared/session.service';
 import { CookieService } from 'ngx-cookie';
-import { SkinableConfig } from "../skinable-config.service";
+import { SkinableConfig } from "../services/skinable-config.service";
 import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ClarityModule } from "@clr/angular";
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
diff --git a/src/portal/src/app/sign-in/sign-in.component.ts b/src/portal/src/app/sign-in/sign-in.component.ts
index 97d757872..c9597b6cf 100644
--- a/src/portal/src/app/sign-in/sign-in.component.ts
+++ b/src/portal/src/app/sign-in/sign-in.component.ts
@@ -19,11 +19,11 @@ import { SessionService } from '../shared/session.service';
 import { SignInCredential } from '../shared/sign-in-credential';
 import { SignUpComponent } from '../account/sign-up/sign-up.component';
 import { ForgotPasswordComponent } from '../account/password-setting/forgot-password/forgot-password.component';
-import { AppConfigService } from '../app-config.service';
-import { AppConfig } from '../app-config';
+import { AppConfigService } from '../services/app-config.service';
+import { AppConfig } from '../services/app-config';
 import { User } from '../user/user';
 import { CookieService, CookieOptions } from 'ngx-cookie';
-import { SkinableConfig } from "../skinable-config.service";
+import { SkinableConfig } from "../services/skinable-config.service";
 import {ModalEvent} from "../base/modal-event";
 import {modalEvents} from "../base/modal-events.const";
 import {AboutDialogComponent} from "../shared/about-dialog/about-dialog.component";
diff --git a/src/portal/src/app/user/user.component.spec.ts b/src/portal/src/app/user/user.component.spec.ts
index d435e03b1..aaf0d3288 100644
--- a/src/portal/src/app/user/user.component.spec.ts
+++ b/src/portal/src/app/user/user.component.spec.ts
@@ -6,7 +6,7 @@ import { UserService } from './user.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service';
 import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
-import { AppConfigService } from '../app-config.service';
+import { AppConfigService } from '../services/app-config.service';
 import { SessionService } from '../shared/session.service';
 import { UserComponent } from './user.component';
 import { OperationService } from "../../lib/components/operation/operation.service";
diff --git a/src/portal/src/app/user/user.component.ts b/src/portal/src/app/user/user.component.ts
index 529ff4b0b..7f2501bac 100644
--- a/src/portal/src/app/user/user.component.ts
+++ b/src/portal/src/app/user/user.component.ts
@@ -19,7 +19,7 @@ import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirm
 import { ConfirmationMessage } from '../shared/confirmation-dialog/confirmation-message';
 import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
 import { SessionService } from '../shared/session.service';
-import { AppConfigService } from '../app-config.service';
+import { AppConfigService } from '../services/app-config.service';
 import { NewUserModalComponent } from './new-user-modal.component';
 import { UserService } from './user.service';
 import { User } from './user';
diff --git a/src/portal/src/app/vulnerability-page/vulnerability-page.component.spec.ts b/src/portal/src/app/vulnerability-page/vulnerability-page.component.spec.ts
index caaaed850..1a71e9d91 100644
--- a/src/portal/src/app/vulnerability-page/vulnerability-page.component.spec.ts
+++ b/src/portal/src/app/vulnerability-page/vulnerability-page.component.spec.ts
@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClarityModule } from '@clr/angular';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { AppConfigService } from "../app-config.service";
+import { AppConfigService } from "../services/app-config.service";
 import { VulnerabilityPageComponent } from './vulnerability-page.component';
 
 describe('VulnerabilityPageComponent', () => {
diff --git a/src/portal/src/app/vulnerability-page/vulnerability-page.component.ts b/src/portal/src/app/vulnerability-page/vulnerability-page.component.ts
index a822469eb..537960037 100644
--- a/src/portal/src/app/vulnerability-page/vulnerability-page.component.ts
+++ b/src/portal/src/app/vulnerability-page/vulnerability-page.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { AppConfigService } from "../app-config.service";
+import { AppConfigService } from "../services/app-config.service";
 
 @Component({
   selector: "vulnerability-page",
diff --git a/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.ts b/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.ts
index 785d9252d..20cc73ad8 100644
--- a/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.ts
+++ b/src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ReplicationService } from "../../../services/replication.service";
 import { TranslateService } from '@ngx-translate/core';
 import { finalize } from "rxjs/operators";
@@ -9,6 +9,7 @@ import { ReplicationJob, ReplicationTasks, Comparator, ReplicationJobItem, State
 import { CustomComparator, DEFAULT_PAGE_SIZE } from "../../../utils/utils";
 import { RequestQueryParams } from "../../../services/RequestQueryParams";
 import { REFRESH_TIME_DIFFERENCE } from '../../../entities/shared.const';
+
 const executionStatus = 'InProgress';
 @Component({
   selector: 'replication-tasks',
@@ -30,7 +31,7 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
   stopOnGoing: boolean;
   executions: ReplicationJobItem[];
   timerDelay: Subscription;
-  @Input() executionId: string;
+  executionId: string;
   startTimeComparator: Comparator<ReplicationJob> = new CustomComparator<
   ReplicationJob
   >("start_time", "date");
@@ -43,13 +44,19 @@ export class ReplicationTasksComponent implements OnInit, OnDestroy {
     private router: Router,
     private replicationService: ReplicationService,
     private errorHandler: ErrorHandler,
+    private route: ActivatedRoute,
   ) { }
 
   ngOnInit(): void {
     this.searchTask = '';
-    this.getExecutionDetail();
+    this.executionId = this.route.snapshot.params['id'];
+    const resolverData = this.route.snapshot.data;
+    if (resolverData) {
+      const replicationJob = <ReplicationJob>(resolverData["replicationTasksRoutingResolver"]);
+      this.executions = replicationJob.data;
+      this.clrLoadPage();
+    }
   }
-
   getExecutionDetail(): void {
     this.inProgress = true;
     if (this.executionId) {