diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index bf96b1424..0d38107bc 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -35,7 +35,7 @@
     </div>
 
     <div class="table-content">
-      <div *ngFor="let pw of appStateService.allProjects | sortBy:'desc':'projectDate'"
+      <div *ngFor="let pw of appStateService.allProjects | sortBy:sortingOption.order:sortingOption.column"
            [routerLink]="'/ui/projects/'+pw.project.projectId"
            class="table-item pointer"
       >
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index a8a412f9e..932d173c6 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -12,7 +12,8 @@ import { DoughnutChartConfig } from '../../components/simple-doughnut-chart/simp
 
 class SortingOption {
   label: string;
-  value: string;
+  order: string;
+  column: string;
 }
 
 @Component({
@@ -24,8 +25,8 @@ export class ProjectListingScreenComponent implements OnInit {
   public projectsChartData: DoughnutChartConfig [] = [];
   public documentsChartData: DoughnutChartConfig [] = [];
   public sortingOptions: SortingOption[] = [
-    { label: 'Recent', value: '\'asc\':\'projectDate\'' },
-    { label: 'Alphabetically', value: 'alphabetically' }
+    { label: 'Recent', order: 'desc', column: 'projectDate' },
+    { label: 'Alphabetically', order: 'asc',  column: 'project.projectName' }
   ];
   public sortingOption: SortingOption = this.sortingOptions[0];