diff --git a/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.html b/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.html
index 672a39da2..8b30f9472 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.html
+++ b/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.html
@@ -1,14 +1,18 @@
 <form class="user-roles-criteria" [formGroup]="formGroup">
-	<mat-card class="mat-card">
+	<div class="container-fluid p-0">
 		<div class="row">
-			<mat-form-field class="col-sm-6 col-md-8">
-				<input matInput placeholder="{{'CRITERIA.USERS.LABEL'| translate}}" formControlName="like">
-			</mat-form-field>
-			<mat-form-field class="col-sm-6 col-md-4">
+			<span class="d-flex col-auto align-items-center pr-0 show">{{'CRITERIA.USERS.SHOW' | translate}}:</span>
+			<mat-form-field appearance="outline" class="sort-form col-auto">
 				<mat-select placeholder="{{'CRITERIA.USERS.ROLE' | translate}}" formControlName="appRoles" multiple>
 					<mat-option *ngFor="let role of rolesEnum" [value]="role">{{enumUtils.convertFromPrincipalAppRole(role)}}</mat-option>
 				</mat-select>
 			</mat-form-field>
+
+			<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
+				<mat-icon matSuffix>search</mat-icon>
+				<input matInput placeholder="{{'CRITERIA.USERS.LABEL'| translate}}" formControlName="like">
+				<!-- <mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error> -->
+			</mat-form-field>
 		</div>
-	</mat-card>
+	</div>
 </form>
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.scss
index af2a32097..9b54a5539 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.scss
@@ -1,2 +1,33 @@
 .user-roles-criteria {
+
+	.container-fluid {
+		margin-top: 5rem;
+	}
+
+	.show {
+		color: #A8A8A8;
+	}
+
+	.search-form {
+		text-align: left;
+		width: 20rem;
+	}
+
+	.search-form mat-icon {
+		color: #129d99;
+	}
+}
+
+::ng-deep .search-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .sort-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
index 01994092d..2a5f4693a 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html
@@ -1,5 +1,10 @@
 <form class="d-flex user-role-editor" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
-	<mat-form-field class="roles-width-80">
+	<div *ngIf="!this.nowEditing"class="roles">
+		<div *ngFor="let role of this.formGroup.get('appRoles').value" [ngClass]="{'user': role == 0, 'manager': role == 1, 'admin': role == 2}">
+			{{getPrincipalAppRoleWithLanguage(role)}}
+		</div>
+	</div>
+	<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180">
 		<mat-select formControlName="appRoles" multiple required>
 			<mat-option *ngFor="let role of getPrincipalAppRoleValues()" [value]="role">{{getPrincipalAppRoleWithLanguage(role)}}</mat-option>
 		</mat-select>
@@ -7,9 +12,11 @@
 	</mat-form-field>
 
 	<button *ngIf="!this.nowEditing" mat-icon-button color="primary" type="button" (click)="editItem()">
-		<mat-icon class="mat-24">edit</mat-icon>
+		<!-- <mat-icon class="mat-24">edit</mat-icon> -->
+		<span class="row-action">{{'USERS.ACTIONS.EDIT' | translate}}</span>
 	</button>
 	<button *ngIf="this.nowEditing" mat-icon-button color="primary" type="submit">
-		<mat-icon class="mat-24">save</mat-icon>
+		<!-- <mat-icon class="mat-24">save</mat-icon> -->
+		<span class="row-action">{{'USERS.ACTIONS.SAVE' | translate}}</span>
 	</button>
 </form>
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
index e69de29bb..515a63752 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss
@@ -0,0 +1,80 @@
+.user-role-editor {
+	align-items: center;
+	margin-top: 1.125rem;
+
+	.select-role {
+		// margin-top: 1rem;
+	}
+
+	.roles {
+		min-width: 90px;
+		margin-right: 6rem;
+	}
+
+	.roles-width-180 {
+		width: 180px;
+		margin-right: 8px;
+	}
+
+	.row-action {
+		color: #129d99;
+		cursor: pointer;
+	}
+
+	.user {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 67px;
+		height: 28px;
+		color: #00c4ff;
+		background: #d3f5ff 0% 0% no-repeat padding-box;
+		border-radius: 44px;
+		letter-spacing: 0.11px;
+		font-weight: 400;
+		opacity: 1;
+		margin-top: 0.5em;
+		margin-bottom: 0.5em;
+	}
+
+	.manager {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 90px;
+		height: 28px;
+		color: #568b5a;
+		background: #9dd1a1 0% 0% no-repeat padding-box;
+		border-radius: 44px;
+		letter-spacing: 0.11px;
+		font-weight: 400;
+		opacity: 1;
+		margin-top: 0.5em;
+		margin-bottom: 0.5em;
+	}
+
+	.admin {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 77px;
+		height: 28px;
+		color: #ff3d33;
+		background: #ffd5d3 0% 0% no-repeat padding-box;
+		border-radius: 44px;
+		letter-spacing: 0.11px;
+		font-weight: 400;
+		opacity: 1;
+		margin-top: 0.5em;
+		margin-bottom: 0.5em;
+	}
+}
+
+::ng-deep .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
index b7a00fe7b..9eab3147f 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
+++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.html
@@ -3,19 +3,29 @@
 		<div class="d-flex align-items-center">
 			<h3>{{'USERS.LISTING.TITLE' | translate}}</h3>
 			<div class="col-auto ml-auto">
-				<button mat-raised-button type="button" class="export-btn" (click)="exportUsers()">
-					<mat-icon class="mr-2 export-icon">save_alt</mat-icon>{{'USERS.LISTING.EXPORT' | translate}}
-				</button>
+				<button mat-raised-button type="button" class="export-btn" (click)="exportUsers()">{{'USERS.LISTING.EXPORT' | translate}}</button>
 			</div>
 		</div>
 		<app-user-criteria-component></app-user-criteria-component>
-		<mat-card class="mat-card">
+		<!-- <mat-card class="mat-card"> -->
+		<div class="mat-elevation-z6">
 			<mat-table [dataSource]="dataSource" matSort>
 
 				<!-- Column Definition: Label -->
+				<ng-container cdkColumnDef="avatar">
+					<mat-header-cell *matHeaderCellDef></mat-header-cell>
+					<mat-cell *matCellDef="let row">
+						<img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl">
+						<img mat-card-avatar *ngIf="!row.avatarUrl" class="my-mat-card-avatar" [src]="'assets/images/profile-placeholder.png'">
+					</mat-cell>
+				</ng-container>
+
 				<ng-container cdkColumnDef="name">
-					<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.LABEL' | translate}}</mat-header-cell>
-					<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
+					<mat-header-cell *matHeaderCellDef>{{'USERS.LISTING.NAME' | translate}}</mat-header-cell>
+					<mat-cell *matCellDef="let row">
+						<!-- <img mat-card-avatar *ngIf="row.avatarUrl" class="my-mat-card-avatar" [src]="row.avatarUrl"> -->
+						{{row.name}}
+					</mat-cell>
 				</ng-container>
 
 				<ng-container cdkColumnDef="email">
@@ -40,8 +50,8 @@
 				<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
 
 			</mat-table>
-			<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
-			</mat-paginator>
-		</mat-card>
+			<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
+			<!-- </mat-card> -->
+		</div>
 	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
index fde655468..e44188b1d 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
+++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss
@@ -1,61 +1,91 @@
 .mat-table {
-  margin: 24px;
+	margin-top: 47px;
+	margin-bottom: 20px;
+	background: #fafafa 0% 0% no-repeat padding-box;
+	// box-shadow: 0px 5px 12px #00000038;
+	border-radius: 4px;
+
+	.mat-header-row {
+		background: #f3f5f8;
+	}
+
+	mat-header-cell:first-of-type {
+		padding-left: 46px;
+		max-width: 120px;
+	}
+
+	mat-cell:first-of-type {
+		padding-left: 46px;
+		max-width: 120px;
+	}
+
+	.my-mat-card-avatar {
+		height: 40px;
+		width: 40px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		margin-right: 2.5rem;
+	}
 }
 
 .user-listing {
-  margin-top: 1rem;
+	margin-top: 2rem;
+	margin-left: 1rem;
+	margin-right: 2rem;
 
-  .mat-card {
-    margin: 1em 0;
-  }
+	.mat-card {
+		margin: 1em 0;
+	}
 
-  mat-row:hover {
-    // background-color: lightgray;
-  }
+	mat-row:hover {
+		background-color: #eef5f6;
+	}
 
-  mat-row:nth-child(odd) {
-    background-color: #0c748914;
-    // background-color: #eef0fb;
-  }
+	mat-row:nth-child(odd) {
+		// background-color: #0c748914;
+		// background-color: #eef0fb;
+	}
 
-  .export-btn {
-	background: #129D99 0% 0% no-repeat padding-box;
-	border-radius: 30px;
-	color: #ffffff;
-  }
+	.export-btn {
+		background: #ffffff 0% 0% no-repeat padding-box;
+		border-radius: 30px;
+		width: 145px;
+		color: #129d99;
+		border: 1px solid #129d99;
+	}
 
-  .export-icon {
-	font-size: 20px;
-  }
+	.export-icon {
+		font-size: 20px;
+	}
 }
 
 ::ng-deep .mat-paginator-container {
-  flex-direction: row-reverse !important;
-  justify-content: space-between !important;
-  background-color: #f6f6f6;
-  height: 30px;
-  min-height: 30px !important;
+	// flex-direction: row-reverse !important;
+	// justify-content: space-between !important;
+	// height: 30px;
+	// min-height: 30px !important;
+	background-color: #f6f6f6;
 }
 
-::ng-deep .mat-paginator-page-size {
-  height: 43px;
-}
+// ::ng-deep .mat-paginator-page-size {
+// 	height: 43px;
+// }
 
-::ng-deep .mat-paginator-range-label {
-  margin: 15px 32px 0 24px !important;
-}
+// ::ng-deep .mat-paginator-range-label {
+// 	margin: 15px 32px 0 24px !important;
+// }
 
-::ng-deep .mat-paginator-range-actions {
-  width: 55% !important;
-  min-height: 43px !important;
-  justify-content: space-between;
-}
+// ::ng-deep .mat-paginator-range-actions {
+// 	width: 55% !important;
+// 	min-height: 43px !important;
+// 	justify-content: space-between;
+// }
 
-::ng-deep .mat-paginator-navigation-previous {
-  margin-left: auto !important;
-}
+// ::ng-deep .mat-paginator-navigation-previous {
+// 	margin-left: auto !important;
+// }
 
-::ng-deep .mat-icon-button {
-  height: 30px !important;
-  font-size: 12px !important;
-}
+// ::ng-deep .mat-icon-button {
+// 	height: 30px !important;
+// 	font-size: 12px !important;
+// }
diff --git a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts
index 9debb9ee7..eea3d7036 100644
--- a/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts
+++ b/dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.ts
@@ -88,6 +88,15 @@ export class UsersDataSource extends DataSource<UserListingModel> {
 	disconnect() {
 		// No-op
 	}
+
+	// getSort(): MatSort {
+	// 	return this._sort;
+	// }
+	// setSort(sort: MatSort) {
+	// 	console.log(this._sort);
+	// 	console.log(sort);
+	// 	this._sort = sort;
+	// }
 }
 
 @Component({
@@ -103,7 +112,7 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
 
 	breadCrumbs: Observable<BreadcrumbItem[]>;
 	dataSource: UsersDataSource | null;
-	displayedColumns: String[] = ['name', 'email', 'lastloggedin', 'roles'];
+	displayedColumns: String[] = ['avatar', 'name', 'email', 'lastloggedin', 'roles'];
 
 	constructor(
 		private userService: UserService,
@@ -128,6 +137,9 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
 			this.criteria.setCriteria(this.getDefaultCriteria());
 			this.criteria.controlModified();
 		});
+		// if (this.dataSource) {
+		// 	this.dataSource.setSort(this.sort);
+		// }
 	}
 
 	refresh() {
@@ -169,4 +181,12 @@ export class UserListingComponent extends BaseComponent implements OnInit, After
 		}
 		return filename;
 	}
+
+	// public principalHasAvatar(): boolean {
+	// 	return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
+	// }
+
+	// public getPrincipalAvatar(): string {
+	// 	return this.authentication.current().avatarUrl;
+	// }
 }
diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json
index 0d73a61ad..dca7604a8 100644
--- a/dmp-frontend/src/assets/i18n/de.json
+++ b/dmp-frontend/src/assets/i18n/de.json
@@ -993,7 +993,8 @@
 		},
 		"USERS": {
 			"LABEL": "Suche",
-			"ROLE": "Rolle"
+			"ROLE": "Rolle",
+			"SHOW": "Show"
 		},
 		"SELECT": "Option wählen",
 		"LIKE": "Search"
@@ -1076,6 +1077,10 @@
 			"NAME": "Name",
 			"PERMISSIONS": "Berechtigungen",
 			"EXPORT": "Export users"
+		},
+		"ACTIONS": {
+			"EDIT": "Edit",
+			"SAVE": "Save"
 		}
 	},
 	"TYPES": {
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index a03460d98..39ef2fe2d 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -993,7 +993,8 @@
 		},
 		"USERS": {
 			"LABEL": "Search",
-			"ROLE": "Role"
+			"ROLE": "Role",
+			"SHOW": "Show"
 		},
 		"SELECT": "Select an option",
 		"LIKE": "Search"
@@ -1076,6 +1077,10 @@
 			"NAME": "Name",
 			"PERMISSIONS": "Permissions",
 			"EXPORT": "Export users"
+		},
+		"ACTIONS": {
+			"EDIT": "Edit",
+			"SAVE": "Save"
 		}
 	},
 	"TYPES": {
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index af0317f91..e12142c79 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -993,7 +993,8 @@
 		},
 		"USERS": {
 			"LABEL": "Búsqueda",
-			"ROLE": "Función"
+			"ROLE": "Función",
+			"SHOW": "Show"
 		},
 		"SELECT": "Seleccionar una opción",
 		"LIKE": "Buscar"
@@ -1076,6 +1077,10 @@
 			"NAME": "Nombre",
 			"PERMISSIONS": "Permisos",
 			"EXPORT": "Export users"
+		},
+		"ACTIONS": {
+			"EDIT": "Edit",
+			"SAVE": "Save"
 		}
 	},
 	"TYPES": {
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index 625d7da16..411b48603 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -993,7 +993,8 @@
 		},
 		"USERS": {
 			"LABEL": "Αναζήτηση",
-			"ROLE": "Ρόλος"
+			"ROLE": "Ρόλος",
+			"SHOW": "Show"
 		},
 		"SELECT": "Επιλογή",
 		"LIKE": "Αναζήτηση"
@@ -1076,6 +1077,10 @@
 			"NAME": "Όνομα",
 			"PERMISSIONS": "Άδειες",
 			"EXPORT": "Εξαγωγή χρηστών"
+		},
+		"ACTIONS": {
+			"EDIT": "Edit",
+			"SAVE": "Save"
 		}
 	},
 	"TYPES": {
diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json
index 497c47f0e..323e865a3 100644
--- a/dmp-frontend/src/assets/i18n/sk.json
+++ b/dmp-frontend/src/assets/i18n/sk.json
@@ -993,7 +993,8 @@
 		},
 		"USERS": {
 			"LABEL": "Hľadať",
-			"ROLE": "Rola"
+			"ROLE": "Rola",
+			"SHOW": "Show"
 		},
 		"SELECT": "Vybrať možnosť",
 		"LIKE": "Hľadať"
@@ -1076,6 +1077,10 @@
 			"NAME": "Meno",
 			"PERMISSIONS": "Povolenia",
 			"EXPORT": "Export users"
+		},
+		"ACTIONS": {
+			"EDIT": "Edit",
+			"SAVE": "Save"
 		}
 	},
 	"TYPES": {
diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json
index a262a2cca..c5cd1013d 100644
--- a/dmp-frontend/src/assets/i18n/tr.json
+++ b/dmp-frontend/src/assets/i18n/tr.json
@@ -993,7 +993,8 @@
 		},
 		"USERS": {
 			"LABEL": "Arama",
-			"ROLE": "Görev"
+			"ROLE": "Görev",
+			"SHOW": "Show"
 		},
 		"SELECT": "Bir seçenek seçin",
 		"LIKE": "Ara"
@@ -1076,6 +1077,10 @@
 			"NAME": "İsim",
 			"PERMISSIONS": "İzinler",
 			"EXPORT": "Export users"
+		},
+		"ACTIONS": {
+			"EDIT": "Edit",
+			"SAVE": "Save"
 		}
 	},
 	"TYPES": {