diff --git a/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html b/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html
index 6cb8c962b..bd512164c 100644
--- a/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html
+++ b/dmp-frontend/src/app/ui/misc/navigation/navigation.component.html
@@ -22,6 +22,7 @@
 
 	<div *ngIf="isAuthenticated();else loginoption" class="col-auto">
 		<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
+		<img mat-card-avatar *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()">
 	</div>
 
 	<ng-template #loginoption>
diff --git a/dmp-frontend/src/app/ui/misc/navigation/navigation.component.ts b/dmp-frontend/src/app/ui/misc/navigation/navigation.component.ts
index f3a288b66..b16e560ce 100644
--- a/dmp-frontend/src/app/ui/misc/navigation/navigation.component.ts
+++ b/dmp-frontend/src/app/ui/misc/navigation/navigation.component.ts
@@ -92,13 +92,17 @@ export class NavigationComponent extends BaseComponent implements OnInit {
 	}
 
 	public principalHasAvatar(): boolean {
-		return this.authentication.current().avatarUrl != null;
+		return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
 	}
 
 	public getPrincipalAvatar(): string {
 		return this.authentication.current().avatarUrl;
 	}
 
+	public getDefaultAvatar(): string {
+		return 'assets/images/profile-placeholder.png';
+	}
+
 	openProfile() {
 		const dialogRef = this.dialog.open(UserDialogComponent, {
 			hasBackdrop: true,
diff --git a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html
index f922a2279..df07a6a64 100644
--- a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html
+++ b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html
@@ -2,8 +2,8 @@
 	<div mat-dialog-title>
 		<div class="row">
 			<div class="col-auto">
-				<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
-					[src]="this.getPrincipalAvatar()">
+				<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
+				<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()">
 			</div>
 			<span class="user-label col">{{this.getPrincipalName()}}</span>
 		</div>
diff --git a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts
index 1486663fa..80404784a 100644
--- a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts
@@ -36,13 +36,17 @@ export class UserDialogComponent implements OnInit {
 	}
 
 	public principalHasAvatar(): boolean {
-		return this.authentication.current() && this.authentication.current().avatarUrl != null;
+		return this.authentication.current() && this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
 	}
 
 	public getPrincipalAvatar(): string {
 		return this.authentication.current() && this.authentication.current().avatarUrl;
 	}
 
+	public getDefaultAvatar(): string {
+		return 'assets/images/profile-placeholder.png';
+	}
+
 	public navigateToProfile() {
 		this.dialogRef.close();
 		this.router.navigate(['/profile']);
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html
index dd338bbf3..023476217 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.html
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html
@@ -54,8 +54,8 @@
 
 				<!-- Login -->
 				<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
-					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
-						[src]="this.getPrincipalAvatar()" (click)="openProfile()">
+					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
+					<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()">
 				</li>
 				<ng-template #loginoption>
 					<button mat-button [routerLink]=" ['/login'] ">
diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.ts b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
index 4bb6d9652..fad635899 100644
--- a/dmp-frontend/src/app/ui/navbar/navbar.component.ts
+++ b/dmp-frontend/src/app/ui/navbar/navbar.component.ts
@@ -152,13 +152,17 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 	}
 
 	public principalHasAvatar(): boolean {
-		return this.authentication.current().avatarUrl != null;
+		return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
 	}
 
 	public getPrincipalAvatar(): string {
 		return this.authentication.current().avatarUrl;
 	}
 
+	public getDefaultAvatar(): string {
+		return 'assets/images/profile-placeholder.png';
+	}
+
 	public isAdmin(): boolean {
 		if (!this.authentication.current()) { return false; }
 		const principalRoles = this.authentication.current().authorities;
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
index 50156656d..df25ff991 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
@@ -29,8 +29,8 @@
 			<li class="nav-item">
 				<a class="nav-link" *ngIf="isAuthenticated();else loginoption">
 					<p style="display: flex; align-items: center;" [routerLink]=" ['/profile']">
-						<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()"
-							[src]="this.getPrincipalAvatar()">
+						<img mat-card-avatar class="my-mat-card-avatar" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
+						<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()">
 						<span class="d-lg-none d-md-block">{{ 'SIDE-BAR.ACCOUNT' | translate }}</span>
 					</p>
 				</a>
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
index 3ecc0de2b..f456542fe 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts
@@ -146,13 +146,17 @@ export class SidebarComponent implements OnInit {
 	}
 
 	public principalHasAvatar(): boolean {
-		return this.authentication.current().avatarUrl != null;
+		return this.authentication.current().avatarUrl != null && this.authentication.current().avatarUrl.length > 0;
 	}
 
 	public getPrincipalAvatar(): string {
 		return this.authentication.current().avatarUrl;
 	}
 
+	public getDefaultAvatar(): string {
+		return 'assets/images/profile-placeholder.png';
+	}
+
 	public isAuthenticated(): boolean {
 		const myBollean = this.isAdmin();
 		return !(!this.authentication.current());