diff --git a/dmp-frontend/src/app/datasets/listing/dataset-listing.component.html b/dmp-frontend/src/app/datasets/listing/dataset-listing.component.html
index fec878524..d950b8246 100644
--- a/dmp-frontend/src/app/datasets/listing/dataset-listing.component.html
+++ b/dmp-frontend/src/app/datasets/listing/dataset-listing.component.html
@@ -7,23 +7,23 @@
 		<mat-card-header>
 			<mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar>
 		</mat-card-header>
-		<mat-table [dataSource]="dataSource" matSort>
+		<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
 
 			<!-- Column Definition: Name -->
 			<ng-container cdkColumnDef="label">
-				<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
 			</ng-container>
 
 			<!-- Column Definition: Dmp -->
 			<ng-container cdkColumnDef="dmp">
-				<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DMP' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="|join|dmp:label">{{'DATASET-LISTING.COLUMNS.DMP' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row"> {{row.dmp}} </mat-cell>
 			</ng-container>
 
 			<!-- Column Definition: Profile -->
 			<ng-container cdkColumnDef="profile">
-				<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.PROFILE' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
 			</ng-container>
 
@@ -60,7 +60,7 @@
 
 			<!-- Column Definition: Created -->
 			<ng-container cdkColumnDef="created">
-				<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row">{{row.created | date:'shortDate'}}</mat-cell>
 			</ng-container>
 
diff --git a/dmp-frontend/src/app/projects/listing/project-listing.component.html b/dmp-frontend/src/app/projects/listing/project-listing.component.html
index 4811b5a99..509047b02 100644
--- a/dmp-frontend/src/app/projects/listing/project-listing.component.html
+++ b/dmp-frontend/src/app/projects/listing/project-listing.component.html
@@ -7,29 +7,29 @@
 			<mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar>
 		</mat-card-header>
 
-		<mat-table [dataSource]="dataSource" matSort>
+		<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
 
 			<!-- Column Definition: Name -->
 			<ng-container cdkColumnDef="name">
-				<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
 			</ng-container>
 
 			<!-- Column Definition: Αbbreviation -->
 			<ng-container cdkColumnDef="abbreviation">
-				<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
 			</ng-container>
 
 			<!-- Column Definition: Start -->
 			<ng-container cdkColumnDef="start">
-				<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
 			</ng-container>
 
 			<!-- Column Definition: End -->
 			<ng-container cdkColumnDef="end">
-				<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
+				<mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
 				<mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
 			</ng-container>