diff --git a/src/frontend/app/indexation/indexation.component.ts b/src/frontend/app/indexation/indexation.component.ts
index d6eef01607bcaf7c7c0f78023632f78312b73efd..b3e0b87c292ba8494eced3de648dea5858eb1550 100644
--- a/src/frontend/app/indexation/indexation.component.ts
+++ b/src/frontend/app/indexation/indexation.component.ts
@@ -147,7 +147,7 @@ export class IndexationComponent implements OnInit {
             this.actionService.launchIndexingAction(this.selectedAction, this.headerService.user.id, this.currentGroupId, formatdatas);
 
         } else {
-            alert('Veuillez corriger les erreurs.');
+            this.notify.error(this.lang.mustFixErrors);
         }
     }
 
diff --git a/src/frontend/app/notification.service.html b/src/frontend/app/notification.service.html
index 37559d853639a90ef83be2983995ff2a72f1749d..d30409c95058368d07800920a829b9142a2e0f67 100644
--- a/src/frontend/app/notification.service.html
+++ b/src/frontend/app/notification.service.html
@@ -1,10 +1,11 @@
-<div style="display: flex;align-items: center;padding: 25px;">
-    <div style="display: flex;width:50px;">
+<div class="notif-container">
+    <div class="notif-container-icon">
         <i class="fa fa-{{data.icon}} fa-2x"></i>
     </div>
-    <div style="display: flex;flex-direction: column;">
-        <div [innerHTML]="data.url"></div>
-        <div [innerHTML]="data.message"></div>
+    <div class="notif-container-content">
+        <div class="notif-container-content-msg">
+            <div [innerHTML]="data.url"></div>
+            <div [innerHTML]="data.message"></div>
+        </div>
     </div>
-    <div style="display: flex;flex: 1;" ></div>
 </div>
\ No newline at end of file
diff --git a/src/frontend/app/notification.service.scss b/src/frontend/app/notification.service.scss
new file mode 100644
index 0000000000000000000000000000000000000000..685380b8f0baed47c8b4c736fa7d41c24bd18757
--- /dev/null
+++ b/src/frontend/app/notification.service.scss
@@ -0,0 +1,37 @@
+@import '../css/vars.scss';
+
+.notif-container {
+    display: flex;
+    align-items: center;
+    padding-top: 25px;
+    padding-bottom: 25px;
+
+    &-icon {
+        display: flex;
+        width:50px;
+        justify-content: center;
+    }
+
+    &-content {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+
+        &-msg {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}
+
+::ng-deep.mat-snack-bar-container.error-snackbar  {
+    color: $warn;
+    background: white;
+    border: solid 1px $warn;
+}
+  
+::ng-deep.mat-snack-bar-container.success-snackbar  {
+    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 d675e09c990811f596e293e9c34a1acb4cbcecf7..bff7a1c4b48e3612ed33a0ca56ec64bc51676647 100755
--- a/src/frontend/app/notification.service.ts
+++ b/src/frontend/app/notification.service.ts
@@ -6,6 +6,7 @@ import { LANG } from './translate.component';
 @Component({
     selector: 'custom-snackbar',
     templateUrl: "notification.service.html",
+    styleUrls: ['notification.service.scss'],
 })
 export class CustomSnackbarComponent {
     constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
@@ -20,6 +21,7 @@ export class NotificationService {
     success(message: string) {
         this.snackBar.openFromComponent(CustomSnackbarComponent, {
             duration: 2000,
+            panelClass: 'success-snackbar',
             data: { message: message, icon: 'info-circle' }
         });
     }
@@ -27,6 +29,7 @@ export class NotificationService {
     error(message: string, url: string = null) {
         this.snackBar.openFromComponent(CustomSnackbarComponent, {
             duration: 4000,
+            panelClass: 'error-snackbar',
             data: { url: url, message: message, icon: 'exclamation-triangle' }
         });
     }
diff --git a/src/frontend/lang/lang-en.ts b/src/frontend/lang/lang-en.ts
index 3e77e7a4b4e068aefd22561b227f50d4c6d52417..616555b4ac7654d7d33425ffe78ad23d67f9f56f 100755
--- a/src/frontend/lang/lang-en.ts
+++ b/src/frontend/lang/lang-en.ts
@@ -1160,4 +1160,5 @@ export const LANG_EN = {
     "privateIndexingModelCreation" : "Private indexing model creation",
     "createPrivateIndexingModel" : "Create an indexing model with current datas",
     "currentIndexingMail" : "the current indexing mail",
+    "mustFixErrors" : "You must fix the errors.",
 };
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index 1318aed649ba8b35b7305ccbf60c277531c80f31..130f3dec9962ff6c2dea41f71f8ea60c2ed523ef 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1197,4 +1197,5 @@ export const LANG_FR = {
     "privateIndexingModelCreation" : "Création d'un modèle d'enregistrement privé",
     "createPrivateIndexingModel" : "Créer un modèle avec les données actuelles",
     "currentIndexingMail" : "le courrier en cours d'enregistrement",
+    "mustFixErrors" : "Veuillez corriger les erreurs.",
 };
diff --git a/src/frontend/lang/lang-nl.ts b/src/frontend/lang/lang-nl.ts
index b6d532d6966e61d25d0b809b4d0cdb7c07bcde36..ad84c3c84a390d9f4a59793695ea0172700d74c0 100755
--- a/src/frontend/lang/lang-nl.ts
+++ b/src/frontend/lang/lang-nl.ts
@@ -1186,4 +1186,5 @@ export const LANG_NL = {
     "privateIndexingModelCreation" : "Private indexing model creation", //_TO_TRANSLATE
     "createPrivateIndexingModel" : "Create an indexing model with current datas", //_TO_TRANSLATE
     "currentIndexingMail" : "the current indexing mail", //_TO_TRANSLATE
+    "mustFixErrors" : "You must fix the errors.", //_TO_TRANSLATE
 };