diff --git a/package-lock.json b/package-lock.json
index d61545d..9c08dbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -148,9 +148,9 @@
       }
     },
     "@angular/animations": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.2.1.tgz",
-      "integrity": "sha512-2AHc4HYz2cUVW3E0oYOTyUzBTnPJdtmVOx/Uo6+jnRqikvOGFOc5VXzFIYODe1Iiy+EYcSZ1lvQqwUbpZd6gwA==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.2.3.tgz",
+      "integrity": "sha512-5WoiDnVS2OhGgJ1oepFNF2UcfR4sJj97KRnTmLWQ0S4N4WpXX83CoOQVXvXwfotyb8uNtl4zRi2NuvN/MIuFuA==",
       "requires": {
         "tslib": "^1.9.0"
       }
diff --git a/package.json b/package.json
index 1820d90..0b00fa7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "^7.2.3",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
diff --git a/src/app/routes/notifications/toastr/toastr.component.html b/src/app/routes/notifications/toastr/toastr.component.html
index afbe445..29c6f38 100644
--- a/src/app/routes/notifications/toastr/toastr.component.html
+++ b/src/app/routes/notifications/toastr/toastr.component.html
@@ -1,3 +1,33 @@
-<p>
-  toastr works!
-</p>
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <i class="fa fa-align-justify"></i> Toastr
+          <div class="card-header-actions">
+            <a href="https://scttcper.github.io/ngx-toastr/" class="card-header-action" target="_blank">doc</a>
+          </div>
+        </div>
+        <div class="card-body">
+          <button type="button" class="btn btn-primary mr-1">
+            Try primary
+          </button>
+          <button type="button" class="btn btn-success mr-1" (click)="showSuccess()">
+            Try success
+          </button>
+          <button type="button" class="btn btn-warning mr-1">
+            Try warning
+          </button>
+          <button type="button" class="btn btn-danger mr-1">
+            Try danger
+          </button>
+          <button type="button" class="btn btn-info mr-1">
+            Try info
+          </button>
+        </div>
+      </div>
+    </div>
+    <!--/.col-->
+  </div>
+  <!--/.row-->
+</div>
\ No newline at end of file
diff --git a/src/app/routes/notifications/toastr/toastr.component.ts b/src/app/routes/notifications/toastr/toastr.component.ts
index 1a1945b..ff8ce8e 100644
--- a/src/app/routes/notifications/toastr/toastr.component.ts
+++ b/src/app/routes/notifications/toastr/toastr.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-toastr',
@@ -7,7 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ToastrComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private toastr: ToastrService
+  ) { }
+
+  showSuccess() {
+    console.log('t');
+    console.log(this.toastr);
+    const result = this.toastr.info('success', 'Hello world!');
+    this.toastr.success('Hello world!', 'Toastr fun!');
+    console.log(result);
+  }
 
   ngOnInit() {
   }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 638c7bf..f23ab9d 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -4,6 +4,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { ToastrModule } from 'ngx-toastr';
 import { SharedBootstrapModule } from './shared.bootstrap.module';
 
 
@@ -15,6 +16,7 @@ import { SharedBootstrapModule } from './shared.bootstrap.module';
     PerfectScrollbarModule,
     SharedBootstrapModule,
     ChartsModule,
+    ToastrModule.forRoot(),
   ],
   exports: [
     CommonModule,
@@ -24,6 +26,7 @@ import { SharedBootstrapModule } from './shared.bootstrap.module';
     PerfectScrollbarModule,
     ChartsModule,
     RouterModule,
+    ToastrModule,
   ]
 })
 export class SharedModule {
diff --git a/src/styles.scss b/src/styles.scss
index 2f10f10..159ad6a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -12,4 +12,3 @@
 // or import a bootstrap 4 alert styled design (SASS ONLY) 
 // should be after your bootstrap imports, it uses bs4 variables, mixins, functions 
 // @import '~ngx-toastr/toastr-bs4-alert';
-