diff --git a/src/app/admin/components/manage-employers/manage-employers.component.ts b/src/app/admin/components/manage-employers/manage-employers.component.ts
index 81f5f3e73e0761bfba0020932c0283e3dbf8538a..f125b6eb82d0e8ecc8a7ee0f0997a5eaeba6f9be 100644
--- a/src/app/admin/components/manage-employers/manage-employers.component.ts
+++ b/src/app/admin/components/manage-employers/manage-employers.component.ts
@@ -164,7 +164,7 @@ export class ManageEmployersComponent implements OnInit {
       this.adminService.deleteEmployer(employer._id).subscribe(
         (data) => {
           this.validatedEmployers = this.validatedEmployers.filter((obj) => obj._id !== data._id);
-          this.notificationService.showSuccess("L'employeur a bien été supprimée.", '');
+          this.notificationService.showSuccess("L'employeur a bien été supprimée.");
         },
         (err) => {
           this.notificationService.showError(`${err.error.message}`, 'Une erreur est survenue');
@@ -175,7 +175,7 @@ export class ManageEmployersComponent implements OnInit {
 
   public onChange(arg): void {
     this.adminService.editEmployer(arg.data._id, arg.data.name).subscribe(() => {
-      this.notificationService.showSuccess("L'opération a réussie.", '');
+      this.notificationService.showSuccess("L'opération a réussie.");
       this.findValidatedEmployers();
       this.findUnvalidatedEmployers();
     });
@@ -200,7 +200,7 @@ export class ManageEmployersComponent implements OnInit {
         context.api.refreshCells({ rowNodes: [context.node], columns: [context.column.colId] });
         this.findValidatedEmployers();
         this.findUnvalidatedEmployers();
-        this.notificationService.showSuccess("L'opération a réussie.", '');
+        this.notificationService.showSuccess("L'opération a réussie.");
       });
     } else {
       if (context.oldValue) {
diff --git a/src/app/admin/components/manage-jobs/manage-jobs.component.ts b/src/app/admin/components/manage-jobs/manage-jobs.component.ts
index 68686652847bf2cec336d20806afab324d4a392d..8734a32a92797cb05b02248ce218268dde568106 100644
--- a/src/app/admin/components/manage-jobs/manage-jobs.component.ts
+++ b/src/app/admin/components/manage-jobs/manage-jobs.component.ts
@@ -266,7 +266,7 @@ export class ManageJobsComponent implements OnInit {
       return;
     } else {
       this.adminService.updateJob(arg.data._id, arg.data).subscribe(() => {
-        this.notificationService.showSuccess("L'opération a réussie.", '');
+        this.notificationService.showSuccess("L'opération a réussie.");
         this.findValidatedJobs();
         this.findUnvalidatedJobs();
       });
@@ -296,7 +296,7 @@ export class ManageJobsComponent implements OnInit {
         context.api.refreshCells({ rowNodes: [context.node], columns: [context.column.colId] });
         this.findValidatedJobs();
         this.findUnvalidatedJobs();
-        this.notificationService.showSuccess("L'opération a réussie.", '');
+        this.notificationService.showSuccess("L'opération a réussie.");
       });
     } else {
       if (context.oldValue) {
@@ -381,8 +381,7 @@ export class ManageJobsComponent implements OnInit {
     } else {
       this.adminService.editJobsGroup(arg.data._id, arg.data.name).subscribe(() => {
         this.notificationService.showSuccess(
-          'Le groupe de fonction ' + arg.oldValue + ' à bien été remplacé par ' + arg.data.name + '.',
-          ''
+          `Le groupe de fonction ${arg.oldValue} à bien été remplacé par ${arg.data.name}.`
         );
         this.getJobsGroupsWithJobs();
         this.initColumnDef();
diff --git a/src/app/admin/components/manage-users/manage-users.component.ts b/src/app/admin/components/manage-users/manage-users.component.ts
index 2edddabf1f49149b04540af6a89ae7499de018ac..40324aa89bc589260e7600a34a3743a78d7802d7 100644
--- a/src/app/admin/components/manage-users/manage-users.component.ts
+++ b/src/app/admin/components/manage-users/manage-users.component.ts
@@ -233,7 +233,7 @@ export class ManageUsersComponent {
       this.adminService.setUserEmployer(selectedEmployer._id, arg.data.id).subscribe(() => {
         arg.node.data[arg.colDef.field] = selectedEmployer;
         arg.api.refreshCells({ rowNodes: [arg.node], columns: [arg.column.colId] });
-        this.notificationService.showSuccess("L'employeur a bien été attribué.", '');
+        this.notificationService.showSuccess("L'employeur a bien été attribué.");
       });
       return;
     }
@@ -264,13 +264,13 @@ export class ManageUsersComponent {
         this.adminService.setUserJob(newJob._id, context.node.data._id).subscribe((data) => {
           context.node.data[context.colDef.field] = data.job;
           context.api.refreshCells({ rowNodes: [context.node], columns: [context.column.colId] });
-          this.notificationService.showSuccess("L'opération a réussie.", '');
+          this.notificationService.showSuccess("L'opération a réussie.");
         });
       } else {
         this.adminService.removeUserJob(context.node.data._id).subscribe((data) => {
           context.node.data[context.colDef.field] = data.job;
           context.api.refreshCells({ rowNodes: [context.node], columns: [context.column.colId] });
-          this.notificationService.showSuccess("L'opération a réussie.", '');
+          this.notificationService.showSuccess("L'opération a réussie.");
         });
       }
     } else {
@@ -288,13 +288,13 @@ export class ManageUsersComponent {
         this.adminService.setUserEmployer(newEmployer._id, context.node.data._id).subscribe((data) => {
           context.node.data[context.colDef.field] = data.employer;
           context.api.refreshCells({ rowNodes: [context.node], columns: [context.column.colId] });
-          this.notificationService.showSuccess("L'opération a réussie.", '');
+          this.notificationService.showSuccess("L'opération a réussie.");
         });
       } else {
         this.adminService.removeUserEmployer(context.node.data._id).subscribe((data) => {
           context.node.data[context.colDef.field] = data.employer;
           context.api.refreshCells({ rowNodes: [context.node], columns: [context.column.colId] });
-          this.notificationService.showSuccess("L'opération a réussie.", '');
+          this.notificationService.showSuccess("L'opération a réussie.");
         });
       }
     } else {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b0caadecb9749bef28bd07e8af9f006cc0de19e7..b10f3f5f5072f97c473fb0b3aab10fe9dc30b1d8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
index b8df1e7a2c8ead3a044605b5da7f95961524d898..7ef4f790ae7a0c4bed69eb62adcb56904fc73b58 100644
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -69,7 +69,7 @@ export class ContactComponent implements OnInit {
     this.contactService.sendMessage(contactMessage).subscribe(
       () => {
         this.loading = false;
-        this.notificationService.showSuccess('Votre message a bien été envoyé', 'Demande de contact');
+        this.notificationService.showSuccess('Demande de contact', 'Votre message a bien été envoyé');
         this.router.navigate(['']);
       },
       () => {
diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.ts b/src/app/newsletter-subscription/newsletter-subscription.component.ts
index cc5a90ff1ba33697bf1b406072c1ac07fb8febda..33635f7b925300aaf6b9e6f4bf22d2b76c816afc 100644
--- a/src/app/newsletter-subscription/newsletter-subscription.component.ts
+++ b/src/app/newsletter-subscription/newsletter-subscription.component.ts
@@ -64,7 +64,7 @@ export class NewsletterSubscriptionComponent implements OnInit {
             );
           } else {
             this.notificationService.showErrorPleaseRetry(
-              `L'email ${this.f.email.value} n'a pu être ajouté à la newsletter`
+              `L'email ${this.f.email.value} n'a pas pu être ajouté à la newsletter`
             );
           }
         });
@@ -84,7 +84,7 @@ export class NewsletterSubscriptionComponent implements OnInit {
             );
           } else {
             this.notificationService.showErrorPleaseRetry(
-              `L'email ${this.f.email.value} n'a pu être retiré de la newsletter`
+              `L'email ${this.f.email.value} n'a pas pu être retiré de la newsletter`
             );
           }
         });
diff --git a/src/app/profile/profile-newsletter/profile-newsletter.component.ts b/src/app/profile/profile-newsletter/profile-newsletter.component.ts
index 4594eddb6b42a300febba6b35a1413cd2502a26b..688a91a09f05b741c6721e2f4f5811d944ba3f93 100644
--- a/src/app/profile/profile-newsletter/profile-newsletter.component.ts
+++ b/src/app/profile/profile-newsletter/profile-newsletter.component.ts
@@ -39,7 +39,9 @@ export class ProfileNewsletterComponent implements OnInit {
             `L'email ${this.userEmail} semble factice ou invalide`
           );
         } else {
-          this.notificationService.showErrorPleaseRetry(`L'email ${this.userEmail} n'a pu être ajouté à la newsletter`);
+          this.notificationService.showErrorPleaseRetry(
+            `L'email ${this.userEmail} n'a pas pu être ajouté à la newsletter`
+          );
         }
         this.isLoading = false;
       },
@@ -50,7 +52,7 @@ export class ProfileNewsletterComponent implements OnInit {
     this.isLoading = true;
     this.newsletterService.unsubscribe(this.userEmail).subscribe({
       next: (result) => {
-        this.notificationService.showSuccess(`L'email ${result.email} a bien été retiré à la newsletter`);
+        this.notificationService.showSuccess(`L'email ${result.email} a bien été retiré de la newsletter`);
         this.isSubscribed = false;
         this.isLoading = false;
       },
@@ -62,7 +64,7 @@ export class ProfileNewsletterComponent implements OnInit {
           );
         } else {
           this.notificationService.showErrorPleaseRetry(
-            `L'email ${this.userEmail} n'a pu être retiré de la newsletter`
+            `L'email ${this.userEmail} n'a pas pu être retiré de la newsletter`
           );
         }
         this.isLoading = false;
diff --git a/src/app/profile/structure-members-management/structure-members-management.component.ts b/src/app/profile/structure-members-management/structure-members-management.component.ts
index 9237c71ff541ed86ca2c5faa167028b1a6286652..3a0a818f1392db223c68d6ca782a16985a735552 100644
--- a/src/app/profile/structure-members-management/structure-members-management.component.ts
+++ b/src/app/profile/structure-members-management/structure-members-management.component.ts
@@ -71,8 +71,7 @@ export class StructureMembersManagementComponent implements OnInit {
         () => {
           this.structureWithOwners.owners = this.structureWithOwners.owners.filter((obj) => obj._id !== member._id);
           this.notificationService.showSuccess(
-            `${this.displayMemberName(member)} a bien été exclu de ${this.structure.structureName}`,
-            ''
+            `${this.displayMemberName(member)} a bien été exclu de ${this.structure.structureName}`
           );
         },
         () => {
@@ -91,8 +90,7 @@ export class StructureMembersManagementComponent implements OnInit {
         () => {
           this.tempUsers = this.tempUsers.filter((obj) => obj._id !== member._id);
           this.notificationService.showSuccess(
-            `La demande d'ajout de ${member.email} à ${this.structure.structureName} a bien été annulée`,
-            ''
+            `La demande d'ajout de ${member.email} à ${this.structure.structureName} a bien été annulée`
           );
         },
         () => {
diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts
index 82a8f0404417c5edb64ff555111a8f5fad060543..09b36b2fc034088f038763c4d9ba6b199da52ec5 100644
--- a/src/app/reset-password/reset-password.component.ts
+++ b/src/app/reset-password/reset-password.component.ts
@@ -54,8 +54,7 @@ export class ResetPasswordComponent implements OnInit {
     this.authService.resetPassword(this.f.email.value).subscribe({
       next: () => {
         this.notificationService.showSuccess(
-          'Un mail de confirmation de modification de votre mot de passe vous a été envoyé.',
-          ''
+          'Un mail de confirmation de modification de votre mot de passe vous a été envoyé.'
         );
         this.router.navigate(['/login']);
       },
diff --git a/src/app/services/notification.service.ts b/src/app/services/notification.service.ts
index e022e272a1086befd38c27e6526973d0380c75a9..e2e3b34e12233ccc9d27818142ed380db4322510 100644
--- a/src/app/services/notification.service.ts
+++ b/src/app/services/notification.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ToastrService } from 'ngx-toastr';
+import { ActiveToast, ToastrService } from 'ngx-toastr';
 
 @Injectable({
   providedIn: 'root',
@@ -7,34 +7,50 @@ import { ToastrService } from 'ngx-toastr';
 export class NotificationService {
   constructor(private toastr: ToastrService) {}
 
-  public showSuccess(message: string, title = '', timeOut = 10000): void {
-    this.toastr.success(message, title, {
+  public showWarning(title: string, message = '', timeOut = 10000): ActiveToast<unknown> {
+    return this.toastr.warning(message, title, {
       timeOut: timeOut,
+      disableTimeOut: timeOut === 0,
     });
   }
 
-  // Par défaut, l'erreur reste affichée jusqu'à ce qu'on clique dessus
-  public showError(message: string, title = '', timeOut = 0): void {
-    this.toastr.error(message, title, {
+  public showSuccess(title: string, message = '', timeOut = 10000): ActiveToast<unknown> {
+    return this.toastr.success(message, title, {
+      timeOut: timeOut,
+      disableTimeOut: timeOut === 0,
+    });
+  }
+
+  /**
+   * By default, the error is displayed until clicked on.
+   */
+  public showError(title: string, message = '', timeOut = 0): ActiveToast<unknown> {
+    return this.toastr.error(message, title, {
+      timeOut: timeOut,
+      disableTimeOut: timeOut === 0,
+    });
+  }
+
+  public showInfo(title: string, message = '', timeOut = 10000): ActiveToast<unknown> {
+    return this.toastr.info(message, title, {
       timeOut: timeOut,
-      disableTimeOut: timeOut ? false : true,
+      disableTimeOut: timeOut === 0,
     });
   }
+
   public showErrorPleaseRetry(title: string, timeOut = 0): void {
-    this.showError('Merci de réessayer plus tard ou de contacter un administrateur', title, timeOut);
+    this.showError(title, 'Merci de réessayer plus tard ou de contacter un administrateur', timeOut);
   }
 
   // Par défaut, l'erreur reste affichée jusqu'à ce qu'on clique dessus
   public showAppNewVersion(): void {
-    const update = this.toastr.info(
-      'Une nouvelle version est disponible, cliquer ici pour mettre à jour.',
+    const update = this.showInfo(
       'Nouvelle version',
-      {
-        disableTimeOut: true,
-      }
+      'Une nouvelle version est disponible, cliquer ici pour mettre à jour.',
+      0
     );
 
-    update.onTap.subscribe((_action) => {
+    update.onTap.subscribe(() => {
       window.location.reload();
     });
   }
diff --git a/src/app/structure/structure-exclude/structure-exclude.component.ts b/src/app/structure/structure-exclude/structure-exclude.component.ts
index a9dbc04b4cd30a12bd29ffca3d11332295a35a1f..a1d18fd288c80849f0150f1a37c4a0dc580e3b6b 100644
--- a/src/app/structure/structure-exclude/structure-exclude.component.ts
+++ b/src/app/structure/structure-exclude/structure-exclude.component.ts
@@ -57,8 +57,7 @@ export class StructureExcludeComponent implements OnInit {
         this.structureService.removeOwnerFromStructure(params.get('userId'), params.get('id')).subscribe(
           () => {
             this.notificationService.showSuccess(
-              `${this.newMemberName} a bien été exclu de ${this.structure.structureName}`,
-              ''
+              `${this.newMemberName} a bien été exclu de ${this.structure.structureName}`
             );
             this.router.navigateByUrl(`/acteurs?id=${this.structureId}`);
           },
diff --git a/src/assets/ico/toast-error.svg b/src/assets/ico/toast-error.svg
index ee0c5fef9ac7e4881c2ab08a67e601b43fa37776..25407c39df532f24a9bc4bf99e93a4d004448fd6 100644
--- a/src/assets/ico/toast-error.svg
+++ b/src/assets/ico/toast-error.svg
@@ -1,4 +1,5 @@
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.8169 11.4821C27.3593 10.9397 28.2738 10.9749 28.8596 11.5607C29.4454 12.1464 29.4806 13.061 28.9382 13.6034L13.2247 29.3169C12.6823 29.8593 11.7677 29.8241 11.1819 29.2383C10.5962 28.6525 10.561 27.738 11.1034 27.1956L26.8169 11.4821Z" fill="#FF0000"/>
-<path d="M28.8169 27.5179C29.3593 28.0603 29.3241 28.9749 28.7383 29.5607C28.1525 30.1464 27.2379 30.1816 26.6955 29.6392L10.9821 13.9257C10.4397 13.3833 10.4748 12.4688 11.0606 11.883C11.6464 11.2972 12.561 11.262 13.1034 11.8044L28.8169 27.5179Z" fill="#FF0000"/>
-</svg>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M20 3.33334C10.8 3.33334 3.33331 10.8 3.33331 20C3.33331 29.2 10.8 36.6667 20 36.6667C29.2 36.6667 36.6666 29.2 36.6666 20C36.6666 10.8 29.2 3.33334 20 3.33334ZM20 21.6667C19.0833 21.6667 18.3333 20.9167 18.3333 20V13.3333C18.3333 12.4167 19.0833 11.6667 20 11.6667C20.9166 11.6667 21.6666 12.4167 21.6666 13.3333V20C21.6666 20.9167 20.9166 21.6667 20 21.6667ZM21.6666 28.3333H18.3333V25H21.6666V28.3333Z"
+        fill="#DA3635" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/ico/toast-info.svg b/src/assets/ico/toast-info.svg
index 96420e35113594d7cc57174e45e319d8abd27722..a23dc92758deee6f1bd332664b776ff9fae28811 100644
--- a/src/assets/ico/toast-info.svg
+++ b/src/assets/ico/toast-info.svg
@@ -1,3 +1,5 @@
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34 20.5C34 28.232 27.732 34.5 20 34.5C12.268 34.5 6 28.232 6 20.5C6 12.768 12.268 6.5 20 6.5C27.732 6.5 34 12.768 34 20.5ZM20.0001 18.9999C20.8285 18.9999 21.5001 19.6715 21.5001 20.4999V27.4999C21.5001 28.3284 20.8285 28.9999 20.0001 29C19.1717 29 18.5001 28.3284 18.5001 27.5V20.4999C18.5001 19.6715 19.1717 18.9999 20.0001 18.9999ZM20 16.362C21.0665 16.362 21.931 15.4975 21.931 14.431C21.931 13.3645 21.0665 12.4999 20 12.4999C18.9335 12.4999 18.069 13.3645 18.069 14.431C18.069 15.4975 18.9335 16.362 20 16.362Z" fill="#2F96B4"/>
-</svg>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M20 3.33333C10.8 3.33333 3.33331 10.8 3.33331 20C3.33331 29.2 10.8 36.6667 20 36.6667C29.2 36.6667 36.6666 29.2 36.6666 20C36.6666 10.8 29.2 3.33333 20 3.33333ZM20 28.3333C19.0833 28.3333 18.3333 27.5833 18.3333 26.6667V20C18.3333 19.0833 19.0833 18.3333 20 18.3333C20.9166 18.3333 21.6666 19.0833 21.6666 20V26.6667C21.6666 27.5833 20.9166 28.3333 20 28.3333ZM21.6666 15H18.3333V11.6667H21.6666V15Z"
+        fill="#0073E9" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/ico/toast-success.svg b/src/assets/ico/toast-success.svg
index 0e3288b11b7352e94dbf11f161d914dfdebb26bd..aa6b3da96759b28c8559a20952ede3dd9c405d9a 100644
--- a/src/assets/ico/toast-success.svg
+++ b/src/assets/ico/toast-success.svg
@@ -1,3 +1,5 @@
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 21.1364L17.3889 27.5L23.1944 20.5L29 13.5" stroke="#47C562" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M20 3.33334C10.8 3.33334 3.33331 10.8 3.33331 20C3.33331 29.2 10.8 36.6667 20 36.6667C29.2 36.6667 36.6666 29.2 36.6666 20C36.6666 10.8 29.2 3.33334 20 3.33334ZM15.4833 27.15L9.49998 21.1667C8.84998 20.5167 8.84998 19.4667 9.49998 18.8167C10.15 18.1667 11.2 18.1667 11.85 18.8167L16.6666 23.6167L28.1333 12.15C28.7833 11.5 29.8333 11.5 30.4833 12.15C31.1333 12.8 31.1333 13.85 30.4833 14.5L17.8333 27.15C17.2 27.8 16.1333 27.8 15.4833 27.15Z"
+        fill="#1D8844" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/ico/toast-warning.svg b/src/assets/ico/toast-warning.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ff3bd7a3927a8723ba7f6d0b089ceefb1d967961
--- /dev/null
+++ b/src/assets/ico/toast-warning.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M7.45 35H32.55C35.1167 35 36.7167 32.2167 35.4333 30L22.8833 8.31667C21.6 6.10001 18.4 6.10001 17.1167 8.31667L4.56667 30C3.28333 32.2167 4.88333 35 7.45 35ZM20 23.3333C19.0833 23.3333 18.3333 22.5833 18.3333 21.6667V18.3333C18.3333 17.4167 19.0833 16.6667 20 16.6667C20.9167 16.6667 21.6667 17.4167 21.6667 18.3333V21.6667C21.6667 22.5833 20.9167 23.3333 20 23.3333ZM21.6667 30H18.3333V26.6667H21.6667V30Z"
+        fill="#CF4B00" />
+</svg>
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 3b00fe0c92215a5d3c22504c2bf1af9ac1d5d93b..63872028ea29eafcf72829e1fcd03fb82b2eb242 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -89,41 +89,41 @@ a {
 }
 //Toastr
 .ngx-toastr {
+  background: white;
+  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35) !important;
+  border-radius: 0.5rem !important;
+  padding: 0.5rem 0.75rem 0.5rem 3.5rem !important;
+  background-size: 2.5rem !important;
+  background-position: 0.5rem, center !important;
+  min-height: 6.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: all 300ms ease;
+
+  &:hover {
+    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.7) !important;
+  }
+
+  &.toast-warning {
+    border: solid 1px $info-warning;
+    color: $info-warning;
+    background-image: url('/assets/ico/toast-warning.svg');
+  }
   &.toast-success {
-    background: white;
-    box-shadow: $box-shadow-simple;
-    color: $grey-1;
-    border: solid 3px $green-1;
-    &::after {
-      content: url('/assets/ico/toast-success.svg') !important;
-      position: absolute !important;
-      top: 5px !important;
-      left: 5px !important;
-    }
+    border: solid 1px $info-success;
+    color: $info-success;
+    background-image: url('/assets/ico/toast-success.svg');
   }
   &.toast-error {
-    background: white;
-    box-shadow: $box-shadow-simple;
-    color: $grey-1;
-    border: solid 3px $red-error;
-    &::after {
-      content: url('assets/ico/toast-error.svg') !important;
-      position: absolute !important;
-      top: 5px !important;
-      left: 5px !important;
-    }
+    border: solid 1px $info-error;
+    color: $info-error;
+    background-image: url('assets/ico/toast-error.svg');
   }
   &.toast-info {
-    background: white;
-    box-shadow: $box-shadow-simple;
-    color: $grey-1;
-    border: solid 3px $blue;
-    &::after {
-      content: url('assets/ico/toast-info.svg') !important;
-      position: absolute !important;
-      top: 30px !important;
-      left: 5px !important;
-    }
+    border: solid 1px $info-blue;
+    color: $info-blue;
+    background-image: url('assets/ico/toast-info.svg');
   }
 }