diff --git a/src/frontend/app/notification.service.html b/src/frontend/app/notification.service.html
index d30409c95058368d07800920a829b9142a2e0f67..8848a2ce402ea89541aef45bc9e466efaa13bcfb 100644
--- a/src/frontend/app/notification.service.html
+++ b/src/frontend/app/notification.service.html
@@ -2,10 +2,13 @@
     <div class="notif-container-icon">
         <i class="fa fa-{{data.icon}} fa-2x"></i>
     </div>
+    <button mat-icon-button class="notif-container-close" (click)="dismiss()">
+        <mat-icon class="fa fa-times fa-lg" aria-hidden="true"></mat-icon>
+    </button>
     <div class="notif-container-content">
         <div class="notif-container-content-msg">
             <div [innerHTML]="data.url"></div>
             <div [innerHTML]="data.message"></div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/frontend/app/notification.service.scss b/src/frontend/app/notification.service.scss
index 685380b8f0baed47c8b4c736fa7d41c24bd18757..9cfba9814537672655804289bb5c642c2c8f8df5 100644
--- a/src/frontend/app/notification.service.scss
+++ b/src/frontend/app/notification.service.scss
@@ -22,6 +22,12 @@
             flex-direction: column;
         }
     }
+
+    &-close {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+    }
 }
 
 ::ng-deep.mat-snack-bar-container.error-snackbar  {
@@ -34,4 +40,4 @@
     color: $primary;
     background: white;
     border: solid 1px $primary;
-}
\ No newline at end of file
+}
diff --git a/src/frontend/app/notification.service.ts b/src/frontend/app/notification.service.ts
index af820cf541ff5b7de4571cdf7ba7fec6b88e5808..8da7de90a6a44b980249f88c7f0a264d3a191cb2 100755
--- a/src/frontend/app/notification.service.ts
+++ b/src/frontend/app/notification.service.ts
@@ -10,6 +10,10 @@ import { LANG } from './translate.component';
 })
 export class CustomSnackbarComponent {
     constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
+
+    dismiss() {
+        this.data.close();
+    }
 }
 
 @Injectable()
@@ -20,21 +24,21 @@ export class NotificationService {
     }
     success(message: string) {
         const duration = this.getMessageDuration(message, 2000);
-        this.snackBar.openFromComponent(CustomSnackbarComponent, {
+        const snackBar = this.snackBar.openFromComponent(CustomSnackbarComponent, {
             duration: duration,
             panelClass: 'success-snackbar',
             verticalPosition : 'top',
-            data: { message: message, icon: 'info-circle' }
+            data: { message: message, icon: 'info-circle', close: () => {snackBar.dismiss()} }
         });
     }
 
     error(message: string, url: string = null) {
         const duration = this.getMessageDuration(message, 4000);
-        this.snackBar.openFromComponent(CustomSnackbarComponent, {
+        const snackBar = this.snackBar.openFromComponent(CustomSnackbarComponent, {
             duration: duration,
             panelClass: 'error-snackbar',
             verticalPosition : 'top',
-            data: { url: url, message: message, icon: 'exclamation-triangle' }
+            data: { url: url, message: message, icon: 'exclamation-triangle', close: () => {snackBar.dismiss()} }
         });
     }