diff --git a/src/portal/lib/src/index.ts b/src/portal/lib/src/index.ts
index 7ff1d2636..745e73fa0 100644
--- a/src/portal/lib/src/index.ts
+++ b/src/portal/lib/src/index.ts
@@ -1,28 +1,30 @@
-export * from './harbor-library.module';
-export * from './service.config';
-export * from './service/index';
-export * from './error-handler/index';
-export * from './utils';
-export * from './log/index';
-export * from './filter/index';
-export * from './endpoint/index';
-export * from './repository/index';
-export * from './create-edit-endpoint/index';
-export * from './create-edit-rule/index';
-export * from './tag/index';
-export * from './list-replication-rule/index';
-export * from './replication/index';
-export * from './vulnerability-scanning/index';
-export * from './i18n/index';
-export * from './push-image/index';
-export * from './third-party/index';
-export * from './config/index';
-export * from './channel/index';
-export * from './project-policy-config/index';
-export * from './label/index';
-export * from './create-edit-label/index';
-export * from './gridview/index';
-export * from './repository-gridview/index';
-export * from './operation/index';
-export * from './_animations/index';
+export * from "./harbor-library.module";
+export * from "./service.config";
+export * from "./service/index";
+export * from "./error-handler/index";
+export * from "./shared/shared.const";
+export * from "./shared/shared.utils";
+export * from "./utils";
+export * from "./log/index";
+export * from "./filter/index";
+export * from "./endpoint/index";
+export * from "./repository/index";
+export * from "./create-edit-endpoint/index";
+export * from "./create-edit-rule/index";
+export * from "./tag/index";
+export * from "./list-replication-rule/index";
+export * from "./replication/index";
+export * from "./vulnerability-scanning/index";
+export * from "./i18n/index";
+export * from "./push-image/index";
+export * from "./third-party/index";
+export * from "./config/index";
+export * from "./channel/index";
+export * from "./project-policy-config/index";
+export * from "./label/index";
+export * from "./create-edit-label/index";
+export * from "./gridview/index";
+export * from "./repository-gridview/index";
+export * from "./operation/index";
+export * from "./_animations/index";
 
diff --git a/src/portal/lib/src/service/project.service.ts b/src/portal/lib/src/service/project.service.ts
index c121bd3e8..1a4062f61 100644
--- a/src/portal/lib/src/service/project.service.ts
+++ b/src/portal/lib/src/service/project.service.ts
@@ -1,7 +1,7 @@
 
 import {throwError as observableThrowError,  Observable } from "rxjs";
 import { Injectable, Inject } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
+import { HttpClient, HttpParams, HttpResponse } from "@angular/common/http";
 import { map ,  catchError } from "rxjs/operators";
 
 import { SERVICE_CONFIG, IServiceConfig } from "../service.config";
@@ -10,7 +10,7 @@ import { ProjectPolicy } from "../project-policy-config/project-policy-config.co
 import {
   HTTP_JSON_OPTIONS,
   HTTP_GET_OPTIONS,
-  buildHttpRequestOptions
+  buildHttpRequestOptionsWithObserveResponse
 } from "../utils";
 import { RequestQueryParams } from "./RequestQueryParams";
 
@@ -64,10 +64,15 @@ export abstract class ProjectService {
    */
   abstract listProjects(
     name: string,
-    isPublic: number,
+    isPublic?: number,
     page?: number,
     pageSize?: number
-  ): Observable<Project[]>;
+  ): Observable<HttpResponse<Project[]>>;
+  abstract createProject(name: string, metadata: any): Observable<any>;
+  abstract toggleProjectPublic(projectId: number, isPublic: string): Observable<any>;
+  abstract deleteProject(projectId: number): Observable<any>;
+  abstract checkProjectExists(projectName: string): Observable<any>;
+  abstract checkProjectMember(projectId: number): Observable<any>;
 }
 
 /**
@@ -100,32 +105,6 @@ export class ProjectDefaultService extends ProjectService {
       .pipe(catchError(error => observableThrowError(error)));
   }
 
-  public listProjects(
-    name: string,
-    isPublic: number,
-    page?: number,
-    pageSize?: number
-  ): Observable<Project[]> {
-    let baseUrl: string = this.config.projectBaseEndpoint
-      ? this.config.projectBaseEndpoint
-      : "/api/projects";
-    let params = new RequestQueryParams();
-    if (page && pageSize) {
-      params = params.set("page", page + "").set("page_size", pageSize + "");
-    }
-    if (name && name.trim() !== "") {
-      params = params.set("name", name);
-    }
-    if (isPublic !== undefined) {
-      params = params.set("public", "" + isPublic);
-    }
-
-    // let options = new RequestOptions({ headers: this.getHeaders, search: params });
-    return this.http
-      .get<Project[]>(baseUrl, buildHttpRequestOptions(params))
-      .pipe(catchError(error => observableThrowError(error)));
-  }
-
   public updateProjectPolicy(
     projectId: number | string,
     projectPolicy: ProjectPolicy
@@ -149,4 +128,53 @@ export class ProjectDefaultService extends ProjectService {
       )
       .pipe(catchError(error => observableThrowError(error)));
   }
+  public listProjects(name: string, isPublic?: number, page?: number, pageSize?: number): Observable<HttpResponse<Project[]>> {
+    let params = new HttpParams();
+    if (page && pageSize) {
+      params = params.set('page', page + '').set('page_size', pageSize + '');
+    }
+    if (name && name.trim() !== "") {
+      params = params.set('name', name);
+    }
+    if (isPublic !== undefined) {
+      params = params.set('public', '' + isPublic);
+    }
+    return this.http
+               .get<HttpResponse<Project[]>>(`/api/projects`, buildHttpRequestOptionsWithObserveResponse(params)).pipe(
+               catchError(error => observableThrowError(error)), );
+  }
+
+  public createProject(name: string, metadata: any): Observable<any> {
+    return this.http
+               .post(`/api/projects`,
+                JSON.stringify({'project_name': name, 'metadata': {
+                  public: metadata.public ? 'true' : 'false',
+                }})
+                , HTTP_JSON_OPTIONS).pipe(
+               catchError(error => observableThrowError(error)), );
+  }
+
+  public toggleProjectPublic(projectId: number, isPublic: string): Observable<any> {
+    return this.http
+               .put(`/api/projects/${projectId}`, { 'metadata': {'public': isPublic} }, HTTP_JSON_OPTIONS).pipe(
+               catchError(error => observableThrowError(error)), );
+  }
+
+  public deleteProject(projectId: number): Observable<any> {
+    return this.http
+               .delete(`/api/projects/${projectId}`)
+               .pipe(catchError(error => observableThrowError(error)));
+  }
+
+  public checkProjectExists(projectName: string): Observable<any> {
+    return this.http
+               .head(`/api/projects/?project_name=${projectName}`).pipe(
+               catchError(error => observableThrowError(error)), );
+  }
+
+  public checkProjectMember(projectId: number): Observable<any> {
+    return this.http
+               .get(`/api/projects/${projectId}/members`, HTTP_GET_OPTIONS).pipe(
+               catchError(error => observableThrowError(error)), );
+  }
 }
diff --git a/src/portal/lib/src/shared/shared.const.ts b/src/portal/lib/src/shared/shared.const.ts
index 97036d09b..83d599368 100644
--- a/src/portal/lib/src/shared/shared.const.ts
+++ b/src/portal/lib/src/shared/shared.const.ts
@@ -11,14 +11,7 @@
 // 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.
-export const supportedLangs = ['en-us', 'zh-cn', 'es-es', 'fr-fr'];
-export const enLang = "en-us";
-export const languageNames = {
-  "en-us": "English",
-  "zh-cn": "中文简体",
-  "es-es": "Español",
-  "fr-fr": "Français"
-};
+
 export const enum AlertType {
   DANGER, WARNING, INFO, SUCCESS
 }
@@ -91,21 +84,3 @@ export const LabelColor = [
   { 'color': '#F52F52', 'textColor': 'black' }, { 'color': '#FF5501', 'textColor': 'black' },
   { 'color': '#F57600', 'textColor': 'black' }, { 'color': '#FFDC0B', 'textColor': 'black' },
 ];
-
-export const RoleMapping = { 'projectAdmin': 'MEMBER.PROJECT_ADMIN', 'master': 'MEMBER.PROJECT_MASTER',
-'developer': 'MEMBER.DEVELOPER', 'guest': 'MEMBER.GUEST' };
-
-
-export enum Roles {
-  PROJECT_ADMIN = 1,
-  PROJECT_MASTER = 4,
-  DEVELOPER = 2,
-  GUEST = 3,
-  OTHER = 0,
-}
-
-export enum ResourceType {
-  REPOSITORY = 1,
-  CHART_VERSION = 2,
-  REPOSITORY_TAG = 3,
-}
diff --git a/src/portal/lib/src/tag/tag.component.ts b/src/portal/lib/src/tag/tag.component.ts
index 277129284..b74f790c8 100644
--- a/src/portal/lib/src/tag/tag.component.ts
+++ b/src/portal/lib/src/tag/tag.component.ts
@@ -32,7 +32,7 @@ import { ChannelService } from "../channel/index";
 import {
   ConfirmationTargets,
   ConfirmationState,
-  ConfirmationButtons, Roles
+  ConfirmationButtons
 } from "../shared/shared.const";
 
 import { ConfirmationDialogComponent } from "../confirmation-dialog/confirmation-dialog.component";
diff --git a/src/portal/lib/src/utils.ts b/src/portal/lib/src/utils.ts
index 9bbb996a6..a4500b8b5 100644
--- a/src/portal/lib/src/utils.ts
+++ b/src/portal/lib/src/utils.ts
@@ -185,8 +185,23 @@ export class CustomComparator<T> implements Comparator<T> {
     compare(a: { [key: string]: any | any[] }, b: { [key: string]: any | any[] }) {
         let comp = 0;
         if (a && b) {
-            let fieldA = a[this.fieldName];
-            let fieldB = b[this.fieldName];
+            let fieldA, fieldB;
+            for (let key of Object.keys(a)) {
+                if (key === this.fieldName) {
+                    fieldA = a[key];
+                    fieldB = b[key];
+                    break;
+                } else if (typeof a[key] === 'object') {
+                    let insideObject = a[key];
+                    for (let insideKey in insideObject) {
+                        if (insideKey === this.fieldName) {
+                            fieldA = insideObject[insideKey];
+                            fieldB = b[key][insideKey];
+                            break;
+                        }
+                    }
+                }
+            }
             switch (this.type) {
                 case "number":
                     comp = fieldB - fieldA;
@@ -194,6 +209,9 @@ export class CustomComparator<T> implements Comparator<T> {
                 case "date":
                     comp = new Date(fieldB).getTime() - new Date(fieldA).getTime();
                     break;
+                case "string":
+                    comp = fieldB.localeCompare(fieldA);
+                    break;
             }
         }
         return comp;
diff --git a/src/portal/src/app/account/account-settings/account-settings-modal.component.ts b/src/portal/src/app/account/account-settings/account-settings-modal.component.ts
index 7b2c4e736..aed196b2b 100644
--- a/src/portal/src/app/account/account-settings/account-settings-modal.component.ts
+++ b/src/portal/src/app/account/account-settings/account-settings-modal.component.ts
@@ -22,8 +22,7 @@ import { SessionService } from "../../shared/session.service";
 import { InlineAlertComponent } from "../../shared/inline-alert/inline-alert.component";
 import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
 import { SearchTriggerService } from "../../base/global-search/search-trigger.service";
-import { CommonRoutes } from "../../shared/shared.const";
-import { CopyInputComponent } from "@harbor/ui";
+import { CopyInputComponent, CommonRoutes } from "@harbor/ui";
 import { AccountSettingsModalService } from './account-settings-modal-service.service';
 import {  ConfirmationDialogComponent } from "../../shared/confirmation-dialog/confirmation-dialog.component";
 import {
diff --git a/src/portal/src/app/account/password-setting/reset-password/reset-password.component.ts b/src/portal/src/app/account/password-setting/reset-password/reset-password.component.ts
index b74e87d79..aae813c11 100644
--- a/src/portal/src/app/account/password-setting/reset-password/reset-password.component.ts
+++ b/src/portal/src/app/account/password-setting/reset-password/reset-password.component.ts
@@ -18,7 +18,7 @@ import { NgForm } from '@angular/forms';
 import { PasswordSettingService } from '../password-setting.service';
 import { InlineAlertComponent } from '../../../shared/inline-alert/inline-alert.component';
 import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
-import { CommonRoutes } from '../../../shared/shared.const';
+import { CommonRoutes } from '@harbor/ui';
 
 @Component({
     selector: 'reset-password',
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 9bf9a1142..6a818b51c 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
@@ -26,7 +26,7 @@ import { SessionService } from '../../shared/session.service';
 
 import { AboutDialogComponent } from '../../shared/about-dialog/about-dialog.component';
 import { SearchTriggerService } from '../global-search/search-trigger.service';
-import { CommonRoutes } from '../../shared/shared.const';
+import { CommonRoutes } from '@harbor/ui';
 
 @Component({
     selector: 'harbor-shell',
diff --git a/src/portal/src/app/base/navigator/navigator.component.ts b/src/portal/src/app/base/navigator/navigator.component.ts
index d0a4ef7aa..0c432d5f2 100644
--- a/src/portal/src/app/base/navigator/navigator.component.ts
+++ b/src/portal/src/app/base/navigator/navigator.component.ts
@@ -22,7 +22,8 @@ import { modalEvents } from '../modal-events.const';
 import { SessionService } from '../../shared/session.service';
 import { CookieService, CookieOptions } from 'ngx-cookie';
 
-import { supportedLangs, enLang, languageNames, CommonRoutes } from '../../shared/shared.const';
+import { supportedLangs, enLang, languageNames } from '../../shared/shared.const';
+import { CommonRoutes } from '@harbor/ui';
 import { AppConfigService } from '../../app-config.service';
 import { SearchTriggerService } from '../global-search/search-trigger.service';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
diff --git a/src/portal/src/app/config/config.component.ts b/src/portal/src/app/config/config.component.ts
index 31e5c932f..9c0df8f5e 100644
--- a/src/portal/src/app/config/config.component.ts
+++ b/src/portal/src/app/config/config.component.ts
@@ -15,8 +15,7 @@ import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { Subscription } from "rxjs";
 import {
     Configuration, StringValueItem, SystemSettingsComponent,
-    isEmpty, clone, getChanges, GcRepoService } from '@harbor/ui';
-
+    isEmpty, clone } from '@harbor/ui';
 import { ConfirmationTargets, ConfirmationState } from '../shared/shared.const';
 import { SessionService } from '../shared/session.service';
 import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service';
diff --git a/src/portal/src/app/config/config.service.ts b/src/portal/src/app/config/config.service.ts
index c5269cb28..fd10c2756 100644
--- a/src/portal/src/app/config/config.service.ts
+++ b/src/portal/src/app/config/config.service.ts
@@ -16,9 +16,8 @@ import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 
-import { Configuration } from '@harbor/ui';
+import { Configuration, HTTP_GET_OPTIONS, HTTP_JSON_OPTIONS } from '@harbor/ui';
 
-import {HTTP_GET_OPTIONS, HTTP_JSON_OPTIONS} from "@harbor/ui";
 
 const configEndpoint = "/api/configurations";
 const emailEndpoint = "/api/email/ping";
diff --git a/src/portal/src/app/global-message/message.component.ts b/src/portal/src/app/global-message/message.component.ts
index db952538d..1b853436d 100644
--- a/src/portal/src/app/global-message/message.component.ts
+++ b/src/portal/src/app/global-message/message.component.ts
@@ -19,7 +19,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Message } from './message';
 import { MessageService } from './message.service';
 
-import { dismissInterval, httpStatusCode, CommonRoutes } from '../shared/shared.const';
+import { dismissInterval, httpStatusCode, CommonRoutes } from '@harbor/ui';
 
 @Component({
   selector: 'global-message',
diff --git a/src/portal/src/app/group/group.component.ts b/src/portal/src/app/group/group.component.ts
index b447ed5dc..fad3e0efd 100644
--- a/src/portal/src/app/group/group.component.ts
+++ b/src/portal/src/app/group/group.component.ts
@@ -4,21 +4,21 @@ import { flatMap, catchError } from "rxjs/operators";
 import { SessionService } from "./../shared/session.service";
 import { TranslateService } from "@ngx-translate/core";
 import { Component, OnInit, ViewChild, OnDestroy } from "@angular/core";
-import { operateChanges, OperateInfo, OperationService, OperationState } from "@harbor/ui";
+import { operateChanges, OperateInfo, OperationService, OperationState, errorHandler as errorHandFn } from "@harbor/ui";
 
 import {
   ConfirmationTargets,
   ConfirmationState,
   ConfirmationButtons
 } from "../shared/shared.const";
+
 import { ConfirmationMessage } from "../shared/confirmation-dialog/confirmation-message";
 import { ConfirmationDialogService } from "./../shared/confirmation-dialog/confirmation-dialog.service";
 import { AddGroupModalComponent } from "./add-group-modal/add-group-modal.component";
 import { UserGroup } from "./group";
 import { GroupService } from "./group.service";
 import { MessageHandlerService } from "../shared/message-handler/message-handler.service";
-import { errorHandler as errorHandFn } from "../shared/shared.utils";
-import { Observable, throwError as observableThrowError } from "rxjs";
+import { throwError as observableThrowError } from "rxjs";
 @Component({
   selector: "app-group",
   templateUrl: "./group.component.html",
diff --git a/src/portal/src/app/oidc-onboard/oidc-onboard.component.ts b/src/portal/src/app/oidc-onboard/oidc-onboard.component.ts
index beae8b6a8..90eb9d73d 100644
--- a/src/portal/src/app/oidc-onboard/oidc-onboard.component.ts
+++ b/src/portal/src/app/oidc-onboard/oidc-onboard.component.ts
@@ -2,8 +2,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
 import { OidcOnboardService } from './oidc-onboard.service';
 import { FormControl } from '@angular/forms';
-import { errorHandler } from "../shared/shared.utils";
-import { CommonRoutes } from '../shared/shared.const';
+import { errorHandler, CommonRoutes } from "@harbor/ui";
 
 @Component({
   selector: 'app-oidc-onboard',
diff --git a/src/portal/src/app/project/create-project/create-project.component.ts b/src/portal/src/app/project/create-project/create-project.component.ts
index 7d6addab8..68bf3140f 100644
--- a/src/portal/src/app/project/create-project/create-project.component.ts
+++ b/src/portal/src/app/project/create-project/create-project.component.ts
@@ -30,7 +30,7 @@ import { MessageHandlerService } from "../../shared/message-handler/message-hand
 import { InlineAlertComponent } from "../../shared/inline-alert/inline-alert.component";
 
 import { Project } from "../project";
-import { ProjectService } from "../project.service";
+import { ProjectService } from "@harbor/ui";
 import { errorHandler } from '@angular/platform-browser/src/browser';
 
 
diff --git a/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.ts b/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.ts
index 887fe74ea..042d9946f 100644
--- a/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.ts
+++ b/src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.ts
@@ -25,7 +25,8 @@ import { State,
   operateChanges,
   OperationService,
   UserPermissionService,
-  USERSTATICPERMISSION } from "@harbor/ui";
+  USERSTATICPERMISSION,
+  errorHandler as errorHandFn } from "@harbor/ui";
 
 import { HelmChartVersion, HelmChartMaintainer } from "../../helm-chart.interface.service";
 import { HelmChartService } from "../../helm-chart.service";
@@ -39,9 +40,7 @@ import {
   ConfirmationState,
   DefaultHelmIcon,
   ResourceType,
-  Roles
 } from "../../../../shared/shared.const";
-import { errorHandler as errorHandFn } from "../../../../shared/shared.utils";
 
 @Component({
   selector: "hbr-helm-chart-version",
diff --git a/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.ts b/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.ts
index e121a2c77..169d4f5b0 100644
--- a/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.ts
+++ b/src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.ts
@@ -10,10 +10,9 @@ import {
 } from "@angular/core";
 import { NgForm } from '@angular/forms';
 import { TranslateService } from "@ngx-translate/core";
-import {
-  State, ErrorHandler, SystemInfo, SystemInfoService, DEFAULT_PAGE_SIZE, downloadFile
+import { State, ErrorHandler, SystemInfo, SystemInfoService, DEFAULT_PAGE_SIZE, downloadFile
   , OperationService, UserPermissionService, USERSTATICPERMISSION, OperateInfo, OperationState, operateChanges
-} from "@harbor/ui";
+  , errorHandler as errorHandFn } from "@harbor/ui";
 import { forkJoin, throwError as observableThrowError, Observable } from "rxjs";
 import { finalize, map, catchError } from "rxjs/operators";
 import { HelmChartItem } from "../helm-chart.interface.service";
@@ -28,7 +27,6 @@ import {
   ConfirmationTargets,
   ConfirmationState,
 } from "../../../shared/shared.const";
-import { errorHandler as errorHandFn } from "../../../shared/shared.utils";
 
 @Component({
   selector: "hbr-helm-chart",
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 747e15237..dd9c64a79 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
@@ -24,9 +24,10 @@ import { Router } from "@angular/router";
 
 import { Comparator, State } from "../../../../lib/src/service/interface";
 import {TranslateService} from "@ngx-translate/core";
-
 import { RoleInfo, ConfirmationTargets, ConfirmationState, ConfirmationButtons } from "../../shared/shared.const";
-import { CustomComparator, doFiltering, doSorting, calculatePage } from "../../shared/shared.utils";
+
+import { errorHandler as errorHandFn, calculatePage , operateChanges, OperateInfo, OperationService
+    , OperationState, CustomComparator, doFiltering, doSorting, ProjectService } from "@harbor/ui";
 
 import { SessionService } from "../../shared/session.service";
 import { StatisticHandler } from "../../shared/statictics/statistic-handler.service";
@@ -34,14 +35,11 @@ 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 {operateChanges, OperateInfo, OperationService, OperationState} from "@harbor/ui";
+import { AppConfigService } from "../../app-config.service";
 
 import { Project } from "../project";
-import { ProjectService } from "../project.service";
 import { map, catchError } from "rxjs/operators";
 import { throwError as observableThrowError } from "rxjs";
-import { errorHandler as errorHandFn } from "../../shared/shared.utils";
 
 @Component({
     selector: "list-project",
diff --git a/src/portal/src/app/project/member/add-group/add-group.component.ts b/src/portal/src/app/project/member/add-group/add-group.component.ts
index dc57515f4..7caa85764 100644
--- a/src/portal/src/app/project/member/add-group/add-group.component.ts
+++ b/src/portal/src/app/project/member/add-group/add-group.component.ts
@@ -7,7 +7,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
 import { NgForm } from '@angular/forms';
 
 import { TranslateService } from '@ngx-translate/core';
-import {operateChanges, OperateInfo, OperationService, OperationState} from "@harbor/ui";
+import { operateChanges, OperateInfo, OperationService, OperationState, errorHandler as errorHandFn } from "@harbor/ui";
 
 import { UserGroup } from "./../../../group/group";
 import { MemberService } from "./../member.service";
@@ -16,7 +16,6 @@ import { ProjectRoles } from "../../../shared/shared.const";
 import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
 import { Member } from "../member";
 import { throwError as observableThrowError } from "rxjs";
-import { errorHandler as errorHandFn } from "../../../shared/shared.utils";
 @Component({
   selector: "add-group",
   templateUrl: "./add-group.component.html",
diff --git a/src/portal/src/app/project/member/add-member/add-member.component.ts b/src/portal/src/app/project/member/add-member/add-member.component.ts
index b4d69d46b..d70273106 100644
--- a/src/portal/src/app/project/member/add-member/add-member.component.ts
+++ b/src/portal/src/app/project/member/add-member/add-member.component.ts
@@ -39,7 +39,7 @@ import {User} from "../../../user/user";
 import {Project} from "../../project";
 
 import { Member } from '../member';
-import { errorHandler as errorHandFn } from "../../../shared/shared.utils";
+import { errorHandler as errorHandFn } from "@harbor/ui";
 
 import { MemberService } from '../member.service';
 import { HttpResponseBase } from '@angular/common/http';
diff --git a/src/portal/src/app/project/member/member.component.ts b/src/portal/src/app/project/member/member.component.ts
index a4bac5513..879280d90 100644
--- a/src/portal/src/app/project/member/member.component.ts
+++ b/src/portal/src/app/project/member/member.component.ts
@@ -17,7 +17,8 @@ import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, Chang
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subscription, forkJoin, Observable } from "rxjs";
 import { TranslateService } from "@ngx-translate/core";
-import { operateChanges, OperateInfo, OperationService, OperationState } from "@harbor/ui";
+import { operateChanges, OperateInfo, OperationService, OperationState, UserPermissionService, USERSTATICPERMISSION, ErrorHandler
+  , errorHandler as errorHandFn } from "@harbor/ui";
 
 import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
 import { ConfirmationTargets, ConfirmationState, ConfirmationButtons } from "../../shared/shared.const";
@@ -32,9 +33,7 @@ import { AddGroupComponent } from './add-group/add-group.component';
 import { MemberService } from "./member.service";
 import { AddMemberComponent } from "./add-member/add-member.component";
 import { AppConfigService } from "../../app-config.service";
-import { UserPermissionService, USERSTATICPERMISSION, ErrorHandler } from "@harbor/ui";
 import { map, catchError } from "rxjs/operators";
-import { errorHandler as errorHandFn } from "../../shared/shared.utils";
 import { throwError as observableThrowError } from "rxjs";
 @Component({
   templateUrl: "member.component.html",
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 3ba7d2ec3..56740937c 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
@@ -17,10 +17,9 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from '../project';
 
 import { SessionService } from '../../shared/session.service';
-import { ProjectService } from '../../project/project.service';
 
 import { AppConfigService } from "../../app-config.service";
-import { UserPermissionService, USERSTATICPERMISSION, ErrorHandler } from "@harbor/ui";
+import { UserPermissionService, USERSTATICPERMISSION, ErrorHandler, ProjectService } from "@harbor/ui";
 import { forkJoin } from "rxjs";
 @Component({
   selector: 'project-detail',
diff --git a/src/portal/src/app/project/project-routing-resolver.service.ts b/src/portal/src/app/project/project-routing-resolver.service.ts
index e15b865cb..225cb2ca7 100644
--- a/src/portal/src/app/project/project-routing-resolver.service.ts
+++ b/src/portal/src/app/project/project-routing-resolver.service.ts
@@ -16,7 +16,7 @@ import { Injectable } from '@angular/core';
 import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
 
 import { Project } from './project';
-import { ProjectService } from './project.service';
+import { ProjectService } from '@harbor/ui';
 import { SessionService } from '../shared/session.service';
 import { Observable } from 'rxjs';
 import { map, catchError } from "rxjs/operators";
diff --git a/src/portal/src/app/project/project.module.ts b/src/portal/src/app/project/project.module.ts
index 2b3c7cb69..fb180988f 100644
--- a/src/portal/src/app/project/project.module.ts
+++ b/src/portal/src/app/project/project.module.ts
@@ -28,7 +28,7 @@ import { MemberComponent } from './member/member.component';
 import { AddMemberComponent } from './member/add-member/add-member.component';
 import { AddGroupComponent } from './member/add-group/add-group.component';
 
-import { ProjectService } from './project.service';
+// import { ProjectService } from '@harbor/ui';
 import { MemberService } from './member/member.service';
 import { RobotService } from './robot-account/robot-account.service';
 import { ProjectRoutingResolver } from './project-routing-resolver.service';
@@ -62,7 +62,7 @@ import { AddRobotComponent } from './robot-account/add-robot/add-robot.component
     AddRobotComponent
   ],
   exports: [ProjectComponent, ListProjectComponent],
-  providers: [ProjectRoutingResolver, ProjectService, MemberService, RobotService]
+  providers: [ProjectRoutingResolver, MemberService, RobotService]
 })
 export class ProjectModule {
 
diff --git a/src/portal/src/app/project/project.service.ts b/src/portal/src/app/project/project.service.ts
deleted file mode 100644
index 83e8c32df..000000000
--- a/src/portal/src/app/project/project.service.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-
-import {throwError as observableThrowError,  Observable } from "rxjs";
-
-import {catchError, map} from 'rxjs/operators';
-// 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 { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
-
-
-
-import {HTTP_JSON_OPTIONS, buildHttpRequestOptions, HTTP_GET_OPTIONS, buildHttpRequestOptionsWithObserveResponse} from "@harbor/ui";
-import { Project } from "./project";
-
-@Injectable()
-export class ProjectService {
-
-  constructor(private http: HttpClient) {}
-
-  getProject(projectId: number): Observable<any> {
-    return this.http
-               .get(`/api/projects/${projectId}`, HTTP_GET_OPTIONS).pipe(
-               catchError(error => observableThrowError(error)), );
-  }
-
-  listProjects(name: string, isPublic?: number, page?: number, pageSize?: number): Observable<HttpResponse<Project[]>> {
-    let params = new HttpParams();
-    if (page && pageSize) {
-      params = params.set('page', page + '').set('page_size', pageSize + '');
-    }
-    if (name && name.trim() !== "") {
-      params = params.set('name', name);
-    }
-    if (isPublic !== undefined) {
-      params = params.set('public', '' + isPublic);
-    }
-    return this.http
-               .get<HttpResponse<Project[]>>(`/api/projects`, buildHttpRequestOptionsWithObserveResponse(params)).pipe(
-               catchError(error => observableThrowError(error)), );
-  }
-
-  createProject(name: string, metadata: any): Observable<any> {
-    return this.http
-               .post(`/api/projects`,
-                JSON.stringify({'project_name': name, 'metadata': {
-                  public: metadata.public ? 'true' : 'false',
-                }})
-                , HTTP_JSON_OPTIONS).pipe(
-               catchError(error => observableThrowError(error)), );
-  }
-
-  toggleProjectPublic(projectId: number, isPublic: string): Observable<any> {
-    return this.http
-               .put(`/api/projects/${projectId}`, { 'metadata': {'public': isPublic} }, HTTP_JSON_OPTIONS).pipe(
-               catchError(error => observableThrowError(error)), );
-  }
-
-  deleteProject(projectId: number): Observable<any> {
-    return this.http
-               .delete(`/api/projects/${projectId}`)
-               .pipe(catchError(error => observableThrowError(error)));
-  }
-
-  checkProjectExists(projectName: string): Observable<any> {
-    return this.http
-               .head(`/api/projects/?project_name=${projectName}`).pipe(
-               catchError(error => observableThrowError(error)), );
-  }
-
-  checkProjectMember(projectId: number): Observable<any> {
-    return this.http
-               .get(`/api/projects/${projectId}/members`, HTTP_GET_OPTIONS).pipe(
-               catchError(error => observableThrowError(error)), );
-  }
-}
diff --git a/src/portal/src/app/project/robot-account/robot-account.component.ts b/src/portal/src/app/project/robot-account/robot-account.component.ts
index b51713a3d..95bc9cfca 100644
--- a/src/portal/src/app/project/robot-account/robot-account.component.ts
+++ b/src/portal/src/app/project/robot-account/robot-account.component.ts
@@ -15,12 +15,12 @@ import { Subscription, forkJoin, Observable, throwError as observableThrowError
 import { MessageHandlerService } from "../../shared/message-handler/message-handler.service";
 import { RobotService } from "./robot-account.service";
 import { ConfirmationMessage } from "../../shared/confirmation-dialog/confirmation-message";
+import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
 import {
   ConfirmationTargets,
   ConfirmationState,
   ConfirmationButtons
 } from "../../shared/shared.const";
-import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
 import {
   operateChanges,
   OperateInfo,
@@ -28,9 +28,9 @@ import {
   OperationState,
   UserPermissionService,
   USERSTATICPERMISSION,
-  ErrorHandler
+  ErrorHandler,
+  errorHandler as errorHandFn
 } from "@harbor/ui";
-import { errorHandler as errorHandFn } from "../../shared/shared.utils";
 @Component({
   selector: "app-robot-account",
   templateUrl: "./robot-account.component.html",
diff --git a/src/portal/src/app/replication/replication-page.component.ts b/src/portal/src/app/replication/replication-page.component.ts
index 89fa6e4ed..87ec96583 100644
--- a/src/portal/src/app/replication/replication-page.component.ts
+++ b/src/portal/src/app/replication/replication-page.component.ts
@@ -16,8 +16,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { SessionService } from "../shared/session.service";
 import { Project } from "../project/project";
-import { ProjectService } from "../project/project.service";
-import { ReplicationComponent, UserPermissionService, USERSTATICPERMISSION, ErrorHandler } from "@harbor/ui";
+import { ReplicationComponent, UserPermissionService, USERSTATICPERMISSION, ErrorHandler, ProjectService } from "@harbor/ui";
 import { forkJoin } from 'rxjs';
 
 @Component({
diff --git a/src/portal/src/app/repository/top-repo/top-repo.component.ts b/src/portal/src/app/repository/top-repo/top-repo.component.ts
index c8c479274..f3c89709e 100644
--- a/src/portal/src/app/repository/top-repo/top-repo.component.ts
+++ b/src/portal/src/app/repository/top-repo/top-repo.component.ts
@@ -12,9 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Component, OnInit } from '@angular/core';
-import { Repository } from '@harbor/ui';
+import { Repository, ListMode } from '@harbor/ui';
 
-import { ListMode } from '../../shared/shared.const';
 import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
 import { TopRepoService } from './top-repository.service';
 
diff --git a/src/portal/src/app/repository/top-repo/top-repository.service.ts b/src/portal/src/app/repository/top-repo/top-repository.service.ts
index 962927da2..f6dcc46cb 100644
--- a/src/portal/src/app/repository/top-repo/top-repository.service.ts
+++ b/src/portal/src/app/repository/top-repo/top-repository.service.ts
@@ -15,9 +15,8 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
-import { Repository } from '@harbor/ui';
+import { Repository, HTTP_GET_OPTIONS } from '@harbor/ui';
 
-import {HTTP_GET_OPTIONS} from "@harbor/ui";
 
 export const topRepoEndpoint = "/api/repositories/top";
 /**
diff --git a/src/portal/src/app/shared/confirmation-dialog/confirmation-message.ts b/src/portal/src/app/shared/confirmation-dialog/confirmation-message.ts
index 001b09df7..1c75d1e62 100644
--- a/src/portal/src/app/shared/confirmation-dialog/confirmation-message.ts
+++ b/src/portal/src/app/shared/confirmation-dialog/confirmation-message.ts
@@ -11,7 +11,7 @@
 // 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 { ConfirmationTargets, ConfirmationButtons } from '../../shared/shared.const';
+import { ConfirmationTargets, ConfirmationButtons } from '../shared.const';
 
 export class ConfirmationMessage {
     public constructor(title: string,
diff --git a/src/portal/src/app/shared/inline-alert/inline-alert.component.ts b/src/portal/src/app/shared/inline-alert/inline-alert.component.ts
index 008b51646..28c8a27c4 100644
--- a/src/portal/src/app/shared/inline-alert/inline-alert.component.ts
+++ b/src/portal/src/app/shared/inline-alert/inline-alert.component.ts
@@ -14,7 +14,7 @@
 import { Component, Output, EventEmitter } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
-import { errorHandler } from '../shared.utils';
+import { errorHandler } from '@harbor/ui';
 import { Subscription } from "rxjs";
 
 @Component({
diff --git a/src/portal/src/app/shared/list-chart-version-ro/list-chart-version-ro.component.ts b/src/portal/src/app/shared/list-chart-version-ro/list-chart-version-ro.component.ts
index 31d1bb16f..a87d6b103 100644
--- a/src/portal/src/app/shared/list-chart-version-ro/list-chart-version-ro.component.ts
+++ b/src/portal/src/app/shared/list-chart-version-ro/list-chart-version-ro.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { HelmChartSearchResultItem, HelmChartVersion, HelmChartMaintainer } from '../../project/helm-chart/helm-chart.interface.service';
 
 import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
-import { ProjectService } from '../../project/project.service';
+import { ProjectService } from '@harbor/ui';
 
 @Component({
   selector: 'list-chart-version-ro',
diff --git a/src/portal/src/app/shared/message-handler/message-handler.service.ts b/src/portal/src/app/shared/message-handler/message-handler.service.ts
index efbc12642..8db13b912 100644
--- a/src/portal/src/app/shared/message-handler/message-handler.service.ts
+++ b/src/portal/src/app/shared/message-handler/message-handler.service.ts
@@ -13,11 +13,10 @@
 // limitations under the License.
 import { Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ErrorHandler, UserPermissionService } from '@harbor/ui';
+import { ErrorHandler, UserPermissionService, httpStatusCode, errorHandler } from '@harbor/ui';
 
+import { AlertType } from '../../shared/shared.const';
 import { MessageService } from '../../global-message/message.service';
-import { AlertType, httpStatusCode } from '../../shared/shared.const';
-import { errorHandler } from '../../shared/shared.utils';
 import { SessionService } from '../../shared/session.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 35ea9a8ca..9c6b1da2d 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
@@ -20,7 +20,8 @@ import {
   NavigationExtras
 } from '@angular/router';
 import { SessionService } from '../../shared/session.service';
-import { CommonRoutes, AdmiralQueryParamKey } from '../../shared/shared.const';
+import { AdmiralQueryParamKey } from '../../shared/shared.const';
+import { CommonRoutes } from '@harbor/ui';
 import { AppConfigService } from '../../app-config.service';
 import { maintainUrlQueryParmas } from '../../shared/shared.utils';
 import { MessageHandlerService } from '../message-handler/message-handler.service';
diff --git a/src/portal/src/app/shared/route/member-guard-activate.service.ts b/src/portal/src/app/shared/route/member-guard-activate.service.ts
index 28ae7c44c..2d823b12f 100644
--- a/src/portal/src/app/shared/route/member-guard-activate.service.ts
+++ b/src/portal/src/app/shared/route/member-guard-activate.service.ts
@@ -19,8 +19,8 @@ import {
   CanActivateChild
 } from '@angular/router';
 import { SessionService } from '../../shared/session.service';
-import { ProjectService } from '../../project/project.service';
-import { CommonRoutes } from '../../shared/shared.const';
+import { ProjectService } from '@harbor/ui';
+import { CommonRoutes } from '@harbor/ui';
 import { Observable } from 'rxjs';
 
 @Injectable()
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 b282eadc7..54de90eb5 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 { CommonRoutes } from '../../shared/shared.const';
+import { CommonRoutes } from '@harbor/ui';
 import { AppConfigService } from '../../app-config.service';
 import { Observable } from 'rxjs';
 
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 d7bf94e08..d0de84b54 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
@@ -20,9 +20,8 @@ import {
   CanActivateChild
 } from '@angular/router';
 import { AppConfigService } from '../../app-config.service';
-import { UserPermissionService } from "@harbor/ui";
-import { Observable, of } from 'rxjs';
-import { CommonRoutes } from '../../shared/shared.const';
+import { UserPermissionService, CommonRoutes } from "@harbor/ui";
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class OidcGuard implements CanActivate, CanActivateChild {
diff --git a/src/portal/src/app/shared/route/sign-in-guard-activate.service.ts b/src/portal/src/app/shared/route/sign-in-guard-activate.service.ts
index 60c3c490b..5f748b379 100644
--- a/src/portal/src/app/shared/route/sign-in-guard-activate.service.ts
+++ b/src/portal/src/app/shared/route/sign-in-guard-activate.service.ts
@@ -19,8 +19,7 @@ import {
   CanActivateChild
 } from '@angular/router';
 import { SessionService } from '../../shared/session.service';
-import { CommonRoutes } from '../../shared/shared.const';
-import { UserPermissionService } from "@harbor/ui";
+import { CommonRoutes, UserPermissionService } from '@harbor/ui';
 import { Observable } from 'rxjs';
 
 @Injectable()
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 70e4900ef..acb0ed4c4 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 { CommonRoutes } from '../../shared/shared.const';
+import { CommonRoutes } from '@harbor/ui';
 import { AppConfigService } from '../../app-config.service';
 import { Observable } from 'rxjs';
 
diff --git a/src/portal/src/app/shared/shared.const.ts b/src/portal/src/app/shared/shared.const.ts
index 807b27691..2bef75c07 100644
--- a/src/portal/src/app/shared/shared.const.ts
+++ b/src/portal/src/app/shared/shared.const.ts
@@ -24,13 +24,6 @@ export const enum AlertType {
   DANGER, WARNING, INFO, SUCCESS
 }
 
-export const dismissInterval = 10 * 1000;
-
-export const httpStatusCode = {
-  "Unauthorized": 401,
-  "Forbidden": 403
-};
-
 export const enum ConfirmationTargets {
   EMPTY,
   PROJECT,
@@ -53,25 +46,9 @@ export const enum ActionType {
   ADD_NEW, EDIT
 }
 
-export const ListMode = {
-  READONLY: "readonly",
-  FULL: "full"
-};
-
-
-export const CommonRoutes = {
-  SIGN_IN: "/sign-in",
-  EMBEDDED_SIGN_IN: "/harbor/sign-in",
-  SIGN_UP: "/sign-in?sign_up=true",
-  EMBEDDED_SIGN_UP: "/harbor/sign-in?sign_up=true",
-  HARBOR_ROOT: "/harbor",
-  HARBOR_DEFAULT: "/harbor/projects"
-};
-
 export const AdmiralQueryParamKey = "admiral_redirect_url";
 export const HarborQueryParamKey = "harbor_redirect_url";
 export const CookieKeyOfAdmiral = "admiral.endpoint.latest";
-
 export const enum ConfirmationState {
   NA, CONFIRMED, CANCEL
 }
diff --git a/src/portal/src/app/shared/shared.utils.ts b/src/portal/src/app/shared/shared.utils.ts
index 29529b72b..1a648dc0c 100644
--- a/src/portal/src/app/shared/shared.utils.ts
+++ b/src/portal/src/app/shared/shared.utils.ts
@@ -12,55 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { NgForm } from '@angular/forms';
-import { Comparator, State } from '../../../lib/src/service/interface';
-import { RequestQueryParams } from "@harbor/ui";
 
 import { MessageService } from '../global-message/message.service';
-import { httpStatusCode, AlertType } from './shared.const';
-
-/**
- * To handle the error message body
- *
- **
- * returns {string}
- */
-export const errorHandler = function (error: any): string {
-    if (!error) {
-        return "UNKNOWN_ERROR";
-    }
-    try {
-        return JSON.parse(error.error).message;
-    } catch (err) { }
-    if (typeof error.error === "string") {
-        return error.error;
-    }
-    if (error.error && error.error.message) {
-        return error.error.message;
-    }
-    if (!(error.statusCode || error.status)) {
-        // treat as string message
-        return '' + error;
-    } else {
-        switch (error.statusCode || error.status) {
-            case 400:
-                return "BAD_REQUEST_ERROR";
-            case 401:
-                return "UNAUTHORIZED_ERROR";
-            case 403:
-                return "FORBIDDEN_ERROR";
-            case 404:
-                return "NOT_FOUND_ERROR";
-            case 412:
-                return "PRECONDITION_FAILED";
-            case 409:
-                return "CONFLICT_ERROR";
-            case 500:
-                return "SERVER_ERROR";
-            default:
-                return "UNKNOWN_ERROR";
-        }
-    }
-};
+import { httpStatusCode } from '@harbor/ui';
+import { AlertType } from '../shared/shared.const';
 
 /**
  * To check if form is empty
@@ -121,148 +76,3 @@ export const maintainUrlQueryParmas = function (uri: string, key: string, value:
     }
 };
 
-// Copy from ui library utils.ts
-
-/**
- * Calculate page number by state
- */
-export function calculatePage(state: State): number {
-    if (!state || !state.page) {
-        return 1;
-    }
-
-    return Math.ceil((state.page.to + 1) / state.page.size);
-}
-
-/**
- * Comparator for fields with specific type.
- *
- */
-export class CustomComparator<T> implements Comparator<T> {
-
-    fieldName: string;
-    type: string;
-
-    constructor(fieldName: string, type: string) {
-        this.fieldName = fieldName;
-        this.type = type;
-    }
-
-    compare(a: { [key: string]: any | any[] }, b: { [key: string]: any | any[] }) {
-        let comp = 0;
-        if (a && b) {
-            let fieldA, fieldB;
-            for (let key of Object.keys(a)) {
-                if (key === this.fieldName) {
-                    fieldA = a[key];
-                    fieldB = b[key];
-                    break;
-                } else if (typeof a[key] === 'object') {
-                    let insideObject = a[key];
-                    for (let insideKey in insideObject) {
-                        if (insideKey === this.fieldName) {
-                            fieldA = insideObject[insideKey];
-                            fieldB = b[key][insideKey];
-                            break;
-                        }
-                    }
-                }
-            }
-            switch (this.type) {
-                case "number":
-                    comp = fieldB - fieldA;
-                    break;
-                case "date":
-                    comp = new Date(fieldB).getTime() - new Date(fieldA).getTime();
-                    break;
-                case "string":
-                    comp = fieldB.localeCompare(fieldA);
-                    break;
-            }
-        }
-        return comp;
-    }
-}
-
-
-
-/**
- * Filter columns via RegExp
- *
- **
- *  ** deprecated param {State} state
- * returns {void}
- */
-export function doFiltering<T extends { [key: string]: any | any[] }>(items: T[], state: State): T[] {
-    if (!items || items.length === 0) {
-        return items;
-    }
-
-    if (!state || !state.filters || state.filters.length === 0) {
-        return items;
-    }
-
-    state.filters.forEach((filter: {
-        property: string;
-        value: string;
-    }) => {
-        items = items.filter(item => regexpFilter(filter["value"], item[filter["property"]]));
-    });
-
-    return items;
-}
-
-/**
- * Match items via RegExp
- *
- **
- *  ** deprecated param {string} terms
- *  ** deprecated param {*} testedValue
- * returns {boolean}
- */
-export function regexpFilter(terms: string, testedValue: any): boolean {
-    let reg = new RegExp('.*' + terms + '.*', 'i');
-    return reg.test(testedValue);
-}
-
-/**
- * Sorting the data by column
- *
- **
- * template T
- *  ** deprecated param {T[]} items
- *  ** deprecated param {State} state
- * returns {T[]}
- */
-export function doSorting<T extends { [key: string]: any | any[] }>(items: T[], state: State): T[] {
-    if (!items || items.length === 0) {
-        return items;
-    }
-    if (!state || !state.sort) {
-        return items;
-    }
-
-    return items.sort((a: T, b: T) => {
-        let comp: number = 0;
-        if (typeof state.sort.by !== "string") {
-            comp = state.sort.by.compare(a, b);
-        } else {
-            let propA = a[state.sort.by.toString()], propB = b[state.sort.by.toString()];
-            if (typeof propA === "string") {
-                comp = propA.localeCompare(propB);
-            } else {
-                if (propA > propB) {
-                    comp = 1;
-                } else if (propA < propB) {
-                    comp = -1;
-                }
-            }
-        }
-
-        if (state.sort.reverse) {
-            comp = -comp;
-        }
-
-        return comp;
-    });
-}
diff --git a/src/portal/src/app/shared/target-exists-directive.ts b/src/portal/src/app/shared/target-exists-directive.ts
index 67b6a773b..4c86e80aa 100644
--- a/src/portal/src/app/shared/target-exists-directive.ts
+++ b/src/portal/src/app/shared/target-exists-directive.ts
@@ -14,7 +14,7 @@
 import { Directive, OnChanges, Input, SimpleChanges } from '@angular/core';
 import { NG_ASYNC_VALIDATORS, Validator, Validators, ValidatorFn, AbstractControl } from '@angular/forms';
 
-import { ProjectService } from '../project/project.service';
+import { ProjectService, ProjectDefaultService } from '@harbor/ui';
 
 import { MemberService } from '../project/member/member.service';
 import { Member } from '../project/member/member';
@@ -23,7 +23,8 @@ import { Observable } from 'rxjs';
 @Directive({
   selector: '[targetExists]',
   providers: [
-    ProjectService, MemberService,
+     MemberService,
+    { provide: ProjectService, useClass: ProjectDefaultService },
     { provide: NG_ASYNC_VALIDATORS, useExisting: TargetExistsValidatorDirective, multi: true },
   ]
 })
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 2e9b4819e..774e6c5fa 100644
--- a/src/portal/src/app/sign-in/sign-in.component.ts
+++ b/src/portal/src/app/sign-in/sign-in.component.ts
@@ -20,7 +20,7 @@ import { SessionService } from '../shared/session.service';
 import { SignInCredential } from '../shared/sign-in-credential';
 
 import { SignUpComponent } from '../account/sign-up/sign-up.component';
-import { CommonRoutes } from '../shared/shared.const';
+import { CommonRoutes } from '@harbor/ui';
 import { ForgotPasswordComponent } from '../account/password-setting/forgot-password/forgot-password.component';
 
 import { AppConfigService } from '../app-config.service';
diff --git a/src/portal/src/app/user/user.component.ts b/src/portal/src/app/user/user.component.ts
index 46b62f703..91f3ec16c 100644
--- a/src/portal/src/app/user/user.component.ts
+++ b/src/portal/src/app/user/user.component.ts
@@ -16,8 +16,8 @@ import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, Chang
 import { Subscription, Observable, forkJoin } from "rxjs";
 
 import { TranslateService } from '@ngx-translate/core';
-
 import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const';
+import { operateChanges, OperateInfo, OperationService, OperationState, errorHandler as errorHandFn } from '@harbor/ui';
 import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service';
 import { ConfirmationMessage } from '../shared/confirmation-dialog/confirmation-message';
 import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
@@ -27,10 +27,8 @@ import { NewUserModalComponent } from './new-user-modal.component';
 import { UserService } from './user.service';
 import { User } from './user';
 import { ChangePasswordComponent } from "./change-password/change-password.component";
-import { operateChanges, OperateInfo, OperationService, OperationState } from "@harbor/ui";
 import { map, catchError } from 'rxjs/operators';
 import { throwError as observableThrowError } from "rxjs";
-import { errorHandler as errorHandFn } from "../shared/shared.utils";
 
 /**
  * NOTES: