diff --git a/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.html b/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.html
index ee8c6348f..d0788b582 100644
--- a/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.html
+++ b/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.html
@@ -6,13 +6,13 @@
             (click)="deleteProjects(selectedRow)">
             <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'PROJECT.DELETE' | translate}}</button>
     </clr-dg-action-bar>
-    <clr-dg-column [clrDgField]="'name'">{{'PROJECT.NAME' | translate}}</clr-dg-column>
-    <clr-dg-column [clrDgSortBy]="accessLevelComparator">{{'PROJECT.ACCESS_LEVEL' | translate}}</clr-dg-column>
-    <clr-dg-column [clrDgSortBy]="roleComparator">{{'PROJECT.ROLE' | translate}}</clr-dg-column>
-    <clr-dg-column [clrDgSortBy]="typeComparator">{{'PROJECT.TYPE' | translate}}</clr-dg-column>
-    <clr-dg-column [clrDgSortBy]="repoCountComparator">{{'PROJECT.REPO_COUNT'| translate}}</clr-dg-column>
-    <clr-dg-column *ngIf="withChartMuseum" [clrDgSortBy]="chartCountComparator">{{'PROJECT.CHART_COUNT'| translate}}</clr-dg-column>
-    <clr-dg-column [clrDgSortBy]="timeComparator">{{'PROJECT.CREATION_TIME' | translate}}</clr-dg-column>
+    <clr-dg-column [clrDgSortBy]="'name'">{{'PROJECT.NAME' | translate}}</clr-dg-column>
+    <clr-dg-column>{{'PROJECT.ACCESS_LEVEL' | translate}}</clr-dg-column>
+    <clr-dg-column>{{'PROJECT.ROLE' | translate}}</clr-dg-column>
+    <clr-dg-column>{{'PROJECT.TYPE' | translate}}</clr-dg-column>
+    <clr-dg-column>{{'PROJECT.REPO_COUNT'| translate}}</clr-dg-column>
+    <clr-dg-column *ngIf="withChartMuseum">{{'PROJECT.CHART_COUNT'| translate}}</clr-dg-column>
+    <clr-dg-column [clrDgSortBy]="'creation_time'">{{'PROJECT.CREATION_TIME' | translate}}</clr-dg-column>
     <clr-dg-row *ngFor="let p of projects" [clrDgItem]="p">
         <clr-dg-cell>
             <a href="javascript:void(0)" (click)="goToLink(p.project_id)">{{p.name}}</a>
diff --git a/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.ts b/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.ts
index a33373513..a5c3e5535 100644
--- a/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.ts
+++ b/src/portal/src/app/base/left-side-nav/projects/list-project/list-project.component.ts
@@ -18,7 +18,7 @@ import {
     OnDestroy, EventEmitter
 } from "@angular/core";
 import { Router } from "@angular/router";
-import { Comparator, ProjectService, State } from "../../../../shared/services";
+import { ProjectService, State } from "../../../../shared/services";
 import {TranslateService} from "@ngx-translate/core";
 import { SessionService } from "../../../../shared/services/session.service";
 import { StatisticHandler } from "../statictics/statistic-handler.service";
@@ -29,9 +29,6 @@ import { Project } from "../../../project/project";
 import { map, catchError, finalize } from "rxjs/operators";
 import {
     calculatePage,
-    CustomComparator,
-    doFiltering,
-    doSorting,
     getSortingString
 } from "../../../../shared/units/utils";
 import { OperationService } from "../../../../shared/components/operation/operation.service";
@@ -62,12 +59,6 @@ export class ListProjectComponent implements OnDestroy {
     @Output() addProject = new EventEmitter<void>();
 
     roleInfo = RoleInfo;
-    repoCountComparator: Comparator<Project> = new CustomComparator<Project>("repo_count", "number");
-    chartCountComparator: Comparator<Project> = new CustomComparator<Project>("chart_count", "number");
-    timeComparator: Comparator<Project> = new CustomComparator<Project>("creation_time", "date");
-    accessLevelComparator: Comparator<Project> = new CustomComparator<Project>("public", "string");
-    roleComparator: Comparator<Project> = new CustomComparator<Project>("current_user_role_id", "number");
-    typeComparator: Comparator<Project> = new CustomComparator<Project>("registry_id", "number");
     currentPage = 1;
     totalCount = 0;
     pageSize = 15;
@@ -77,7 +68,7 @@ export class ListProjectComponent implements OnDestroy {
         0: "PROJECT.PROJECT",
         1: "PROJECT.PROXY_CACHE"
     };
-
+    state: ClrDatagridStateInterface;
     constructor(
         private session: SessionService,
         private appConfigService: AppConfigService,
@@ -150,6 +141,7 @@ export class ListProjectComponent implements OnDestroy {
         if (!state || !state.page) {
             return;
         }
+        this.state = state;
         this.pageSize = state.page.size;
         this.selectedRow = [];
 
@@ -179,10 +171,6 @@ export class ListProjectComponent implements OnDestroy {
                 }
 
                 this.projects = response.body as Project[];
-                // Do customising filtering and sorting
-                this.projects = doFiltering<Project>(this.projects, state);
-                this.projects = doSorting<Project>(this.projects, state);
-
             }, error => {
                 this.msgHandler.handleError(error);
             });
diff --git a/src/portal/src/app/base/left-side-nav/projects/projects.component.ts b/src/portal/src/app/base/left-side-nav/projects/projects.component.ts
index a4eba8d79..6570e1512 100644
--- a/src/portal/src/app/base/left-side-nav/projects/projects.component.ts
+++ b/src/portal/src/app/base/left-side-nav/projects/projects.component.ts
@@ -24,6 +24,7 @@ import { debounceTime, distinctUntilChanged, finalize, switchMap } from 'rxjs/op
 import { Project } from '../../project/project';
 import { MessageHandlerService } from '../../../shared/services/message-handler.service';
 import { ProjectTypes } from "../../../shared/entities/shared.const";
+import { getSortingString } from "../../../shared/units/utils";
 
 @Component({
   selector: 'projects',
@@ -87,7 +88,7 @@ export class ProjectsComponent implements OnInit, OnDestroy {
                   passInFilteredType = this.listProject.filteredType - 1;
               }
             return this.proService.listProjects( this.listProject.searchKeyword,
-                passInFilteredType,  this.listProject.currentPage, this.listProject.pageSize)
+                passInFilteredType,  this.listProject.currentPage, this.listProject.pageSize, getSortingString(this.listProject.state))
                 .pipe(finalize(() => {
                   this.loading = false;
                 }));