diff --git a/src/app/+home-page/home-page.component.html b/src/app/+home-page/home-page.component.html
index d015e53850..637b975ad3 100644
--- a/src/app/+home-page/home-page.component.html
+++ b/src/app/+home-page/home-page.component.html
@@ -5,12 +5,8 @@
 </div>
 
 <button (click)="createNotification()">Notify!</button>
-
-<!--<ds-notifications-board-->
-  <!--[options]="notificationOptions"-->
-  <!--(onCreate)="notificationCreated($event)"-->
-  <!--(onDestroy)="notificationDestroyed($event)">-->
-<!--</ds-notifications-board>-->
+<button (click)="createNotification1()">Notify!</button>
+<button (click)="createNotification2()">Notify!</button>
 
 
 <ng-template #example>
diff --git a/src/app/+home-page/home-page.component.ts b/src/app/+home-page/home-page.component.ts
index 1acd4951fa..936d7ccecc 100644
--- a/src/app/+home-page/home-page.component.ts
+++ b/src/app/+home-page/home-page.component.ts
@@ -1,7 +1,9 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { NotificationsService } from '../shared/notifications/notifications.service';
-import { Options } from '../shared/notifications/interfaces/options.type';
-import { NotificationOptions } from '../shared/notifications/models/notification-options.model';
+import {
+  INotificationBoardOptions,
+  NotificationOptions
+} from '../shared/notifications/models/notification-options.model';
 
 @Component({
   selector: 'ds-home-page',
@@ -9,15 +11,6 @@ import { NotificationOptions } from '../shared/notifications/models/notification
   templateUrl: './home-page.component.html'
 })
 export class HomePageComponent {
-  public notificationOptions: Options = {
-    position: ['top', 'right'],
-    timeOut: 0,
-    animate: 'fromLeft'
-    // lastOnBottom: true,
-    // clickIconToClose: false,
-    // showProgressBar: true,
-  };
-
   @ViewChild('example') example: TemplateRef<any>;
 
   constructor(private notificationsService: NotificationsService) {
@@ -25,24 +18,40 @@ export class HomePageComponent {
 
   createNotification() {
     const n1 = this.notificationsService.success('Welcome in DSpace', 'Good choice!',
-      new NotificationOptions(2000, false, 'fromLeft'));
-    const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
-    const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
-    const n4 = this.notificationsService.danger(this.example);
-    console.log('Notifications pushed');
-    console.log(n1);
-    console.log(n2);
-    console.log(n3);
-    console.log(n4);
+      new NotificationOptions(10000, false, 'fromLeft', ['bottom', 'left']));
+    // const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
+    // const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
+    // // const n4 = this.notificationsService.danger(this.example);
+    // console.log('Notifications pushed');
+    // console.log(n1);
+    // console.log(n2);
+    // console.log(n3);
+    // // console.log(n4);
   }
 
-  notificationCreated(event) {
-    console.log('Notification created');
-    console.log(event);
+  createNotification1() {
+    const n1 = this.notificationsService.warning('Welcome in DSpace', 'Good choice!',
+      new NotificationOptions(10000, false, 'fromLeft', ['bottom', 'left']));
+    // const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
+    // const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
+    // // const n4 = this.notificationsService.danger(this.example);
+    // console.log('Notifications pushed');
+    // console.log(n1);
+    // console.log(n2);
+    // console.log(n3);
+    // // console.log(n4);
   }
 
-  notificationDestroyed() {
-    console.log('Notification destroyed');
-    console.log(event);
+  createNotification2() {
+    // const n1 = this.notificationsService.error('Welcome in DSpace', 'Good choice!',
+    //   new NotificationOptions(100000, false, 'fromLeft', ['bottom', 'left']));
+    // const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
+    // const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
+    const n4 = this.notificationsService.html(this.example);
+    // console.log('Notifications pushed');
+    // console.log(n1);
+    // console.log(n2);
+    // console.log(n3);
+    // // console.log(n4);
   }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6fb3c3a31e..3e71fafc5c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,7 +3,7 @@
     <ds-header></ds-header>
 
     <ds-notifications-board
-      [options]="notificationOptions"
+      [options]="boardOptions"
       (onCreate)="notificationCreated($event)"
       (onDestroy)="notificationDestroyed($event)">
     </ds-notifications-board>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4fb14f4d75..f5ace25acf 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostListener,
-  Inject,
-  OnInit,
-  ViewEncapsulation
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -17,7 +10,7 @@ import { MetadataService } from './core/metadata/metadata.service';
 import { HostWindowResizeAction } from './shared/host-window.actions';
 import { HostWindowState } from './shared/host-window.reducer';
 import { NativeWindowRef, NativeWindowService } from './shared/window.service';
-import { Options } from './shared/notifications/interfaces/options.type';
+import { INotificationBoardOptions } from './shared/notifications/models/notification-options.model';
 
 @Component({
   selector: 'ds-app',
@@ -28,13 +21,10 @@ import { Options } from './shared/notifications/interfaces/options.type';
 })
 export class AppComponent implements OnInit {
 
-  public notificationOptions: Options = {
+  public boardOptions: INotificationBoardOptions = {
     position: ['top', 'right'],
-    timeOut: 0,
-    animate: 'fromLeft'
-    // lastOnBottom: true,
-    // clickIconToClose: false,
-    // showProgressBar: true,
+    maxStack: 5,
+    rtl: false
   };
 
   notificationCreated(event) {
@@ -47,13 +37,11 @@ export class AppComponent implements OnInit {
     console.log(event);
   }
 
-  constructor(
-    @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
-    @Inject(NativeWindowService) private _window: NativeWindowRef,
-    private translate: TranslateService,
-    private store: Store<HostWindowState>,
-    private metadata: MetadataService
-  ) {
+  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+              @Inject(NativeWindowService) private _window: NativeWindowRef,
+              private translate: TranslateService,
+              private store: Store<HostWindowState>,
+              private metadata: MetadataService) {
     // this language will be used as a fallback when a translation isn't found in the current language
     translate.setDefaultLang('en');
     // the lang to use, if the lang isn't available, it will use the current loader to get them
diff --git a/src/app/shared/notifications/interfaces/icons.ts b/src/app/shared/notifications/interfaces/icons.ts
deleted file mode 100644
index bf3066c2ac..0000000000
--- a/src/app/shared/notifications/interfaces/icons.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-export interface Icons {
-  alert: string;
-  error: string;
-  info: string;
-  warn: string;
-  success: string;
-}
-
-export const defaultIcons: Icons = {
-  alert: `
-        <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
-            <path d="M0 0h24v24H0z" fill="none"/>
-            <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
-        </svg>
-    `,
-  error: `
-        <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
-            <path d="M0 0h24v24H0V0z" fill="none"/>
-            <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
-        </svg>
-    `,
-  info: `
-        <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
-            <path d="M0 0h24v24H0z" fill="none"/>
-            <path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/>
-        </svg>
-    `,
-  success: `
-        <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24">
-            <path d="M0 0h24v24H0z" fill="none"/>
-            <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
-        </svg>
-    `,
-  warn: `
-        <svg class="simple-notification-svg" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="64" viewBox="0 0 64 64" height="64">
-          <circle cx="32.086" cy="50.142" r="2.256"/>
-          <path d="M30.08 25.012V42.32c0 1.107.897 2.005 2.006 2.005s2.006-.897 2.006-2.005V25.012c0-1.107-.897-2.006-2.006-2.006s-2.006.898-2.006 2.006z"/>
-          <path d="M63.766 59.234L33.856 3.082c-.697-1.308-2.844-1.308-3.54 0L.407 59.234c-.331.622-.312 1.372.051 1.975.362.605 1.015.975 1.72.975h59.816c.705 0 1.357-.369 1.721-.975.361-.603.381-1.353.051-1.975zM5.519 58.172L32.086 8.291l26.568 49.881H5.519z"/>
-        </svg>
-    `
-};
diff --git a/src/app/shared/notifications/interfaces/notification-event.type.ts b/src/app/shared/notifications/interfaces/notification-event.type.ts
deleted file mode 100644
index 978cf3dc69..0000000000
--- a/src/app/shared/notifications/interfaces/notification-event.type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {Notification} from './notification.type';
-
-export interface NotificationEvent {
-  add?: boolean;
-  command: string;
-  id?: string;
-  notification?: Notification;
-}
diff --git a/src/app/shared/notifications/interfaces/notification.type.ts b/src/app/shared/notifications/interfaces/notification.type.ts
deleted file mode 100644
index eb69260cbf..0000000000
--- a/src/app/shared/notifications/interfaces/notification.type.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {EventEmitter} from '@angular/core';
-
-export interface Notification {
-  id?: string
-  type: string
-  icon?: string
-  title?: any
-  content?: any
-  override?: any
-  html?: any
-  state?: string
-  createdOn?: Date
-  destroyedOn?: Date
-  animate?: string
-  timeOut?: number
-  maxLength?: number
-  pauseOnHover?: boolean
-  clickToClose?: boolean
-  clickIconToClose?: boolean
-  theClass?: string
-  click?: EventEmitter<{}>;
-  clickIcon?: EventEmitter<{}>;
-  timeoutEnd?: EventEmitter<{}>;
-}
diff --git a/src/app/shared/notifications/interfaces/options.type.ts b/src/app/shared/notifications/interfaces/options.type.ts
deleted file mode 100644
index cfd45529cd..0000000000
--- a/src/app/shared/notifications/interfaces/options.type.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Icons} from './icons';
-
-export interface Options {
-  timeOut?: number;
-  // showProgressBar?: boolean;
-  // pauseOnHover?: boolean;
-  // lastOnBottom?: boolean;
-  // clickToClose?: boolean;
-  // clickIconToClose?: boolean;
-  maxLength?: number;
-  maxStack?: number;
-  // preventDuplicates?: boolean;
-  // preventLastDuplicates?: boolean | string;
-  theClass?: string;
-  rtl?: boolean;
-  animate?: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale';
-  icons?: Icons;
-  position?: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
-}
diff --git a/src/app/shared/notifications/models/notification-options.model.ts b/src/app/shared/notifications/models/notification-options.model.ts
index b651a0b3d1..b8357f5269 100644
--- a/src/app/shared/notifications/models/notification-options.model.ts
+++ b/src/app/shared/notifications/models/notification-options.model.ts
@@ -26,3 +26,10 @@ export class NotificationOptions implements INotificationOptions {
     this.rtl = rtl;
   }
 }
+
+export interface INotificationBoardOptions {
+  rtl: boolean;
+  position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'];
+  maxStack: number;
+  maxLength?: number;
+}
diff --git a/src/app/shared/notifications/models/notification-type.ts b/src/app/shared/notifications/models/notification-type.ts
index b21696ab1f..8ef5d790b5 100644
--- a/src/app/shared/notifications/models/notification-type.ts
+++ b/src/app/shared/notifications/models/notification-type.ts
@@ -1,8 +1,7 @@
 export enum NotificationType {
-  Success = 'success',
-  Error = 'error',
-  Danger = 'danger',
-  Info = 'info',
-  Warning = 'warning',
+  Success = 'alert-success',
+  Error = 'alert-danger',
+  Info = 'alert-info',
+  Warning = 'alert-warning',
   // Bare = 'bare'
 }
diff --git a/src/app/shared/notifications/models/notification.model.ts b/src/app/shared/notifications/models/notification.model.ts
index 91f2f9bbe9..e5da5d1bff 100644
--- a/src/app/shared/notifications/models/notification.model.ts
+++ b/src/app/shared/notifications/models/notification.model.ts
@@ -1,6 +1,10 @@
 import { INotificationOptions, NotificationOptions } from './notification-options.model';
 import { NotificationType } from './notification-type';
 import { isEmpty } from '../../empty.util';
+import { ElementRef, TemplateRef } from '@angular/core';
+import { Deserialize, Serialize, serialize } from 'cerialize';
+import { deserialize } from 'cerialize';
+import { NotificationsService } from '../notifications.service';
 
 export interface INotification {
   id: string
@@ -17,7 +21,6 @@ export class Notification implements INotification {
   public title: any;
   public content: any;
   public options: INotificationOptions;
-  public html?: any;
 
   constructor(id: string,
               type: NotificationType,
@@ -31,4 +34,14 @@ export class Notification implements INotification {
     this.content = content;
     this.options = isEmpty(options) ? new NotificationOptions() : options;
   }
+
+  get html() {
+    if (this.title === '' && this.content === '') {
+      return NotificationsService.htmlArray.get(this.id);
+    } else {
+      return null;
+    }
+  }
+
+
 }
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index 977a1298b1..a50af4b51d 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,32 +1,18 @@
-<!--<div class="icon" *ngIf="item.icon !== 'bare'" [innerHTML]="safeSvg"></div>-->
-<div class="icon"><i
-  [ngClass]="{'fa': true,
-      'fa-check': item.type == 'success',
-      'fa-times-circle': item.type == 'danger',
-      'fa-exclamation-triangle': item.type == 'warning',
-      'fa-info': item.type == 'info'
+<div class="alert {{item.type}}" role="alert"
+     [@enterLeave]="animate"
+     [ngClass]="{
+            'rtl-mode': rtl
+        }" >
+
+  <div class="icon"><i
+    [ngClass]="{'fa fa-2x': true,
+      'fa-check': item.type == 'alert-success',
+      'fa-times-circle': item.type == 'alert-danger',
+      'fa-exclamation-triangle': item.type == 'alert-warning',
+      'fa-info': item.type == 'alert-info'
       }"></i></div>
 
-<div class="close"><i class="fa fa-times" (click)="remove()"></i></div>
-
-
-<div class="alert" role="alert"
-     [@enterLeave]="item.state"
-     (click)="onClick($event)"
-     [class]="theClass"
-     [ngClass]="{
-            'alert-success': item.type == 'success',
-            'alert-info': item.type == 'info',
-            'alert-warning': item.type == 'warning',
-            'alert-danger': item.type == 'danger',
-            'alert-error': item.type == 'error',
-            'rtl-mode': rtl,
-            'has-icon': item.icon !== 'bare'
-        }"
-     (mouseenter)="onEnter()"
-     (mouseleave)="onLeave()">
-
-
+  <div class="close" (click)="remove()"><i class="fa fa-times"></i></div>
 
 
 
@@ -55,12 +41,16 @@
 
   <div *ngIf="item.html">
 
+    <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
+      <ng-container *ngTemplateOutlet="item.html"></ng-container>
+    </div>
 
     <ng-template #regularHtml>
       <div class="sn-content" [innerHTML]="item.html"></div>
     </ng-template>
 
 
+
   </div>
 
   <div class="sn-progress-loader" *ngIf="showProgressBar">
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index 6d2a1469d6..9db71232cf 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -1,142 +1,33 @@
-//.simple-notification {
-//  width: 100%;
-//  padding: 10px 20px;
-//  box-sizing: border-box;
-//  position: relative;
-//  float: left;
-//  margin-bottom: 10px;
-//  color: #fff;
-//  cursor: pointer;
-//  transition: all 0.5s;
-//  min-height: 70px;
-//}
-//
-//.simple-notification .sn-title,
-//.simple-notification .sn-content,
-//.simple-notification .sn-html {
-//  margin: 0;
-//}
-//
-//.simple-notification .sn-title {
-//  line-height: 30px;
-//  font-size: 20px;
-//}
-//
-//.simple-notification .sn-content {
-//  font-size: 16px;
-//  line-height: 20px;
-//}
-//
-//.simple-notification.has-icon .sn-title,
-//.simple-notification.has-icon .sn-content,
-//.simple-notification.has-icon .sn-html {
-//  padding: 0 50px 0 0;
-//}
-//
-//.simple-notification  {
-//  position: absolute;
-//  box-sizing: border-box;
-//  top: 0;
-//  right: 0;
-//  width: 70px;
-//  height: 70px;
-//  padding: 10px;
-//}
-//
-//.simple-notification .icon.icon-hover:hover {
-//  opacity: 0.5;
-//}
-//
-//.simple-notification .icon svg {
-//  fill: #fff;
-//  width: 100%;
-//  height: 100%;
-//}
-//
-//.simple-notification .icon svg g {
-//  fill: #fff;
-//}
-//
-//.simple-notification.rtl-mode.has-icon .sn-title,
-//.simple-notification.rtl-mode.has-icon .sn-content,
-//.simple-notification.rtl-mode.has-icon .sn-html {
-//  padding: 0 0 0 50px;
-//}
-//
-//.simple-notification.rtl-mode {
-//  direction: rtl;
-//}
-//
-//.simple-notification.rtl-mode .sn-content {
-//  padding: 0 0 0 50px;
-//}
-//
-//.simple-notification.rtl-mode svg {
-//  left: 0;
-//  right: auto;
-//}
-
-.simple-notification.error { background: #F44336; }
-.simple-notification.success { background: #8BC34A; }
-.simple-notification.alert { background: #ffdb5b; }
-.simple-notification.info { background: #03A9F4; }
-.simple-notification.warn { background: #ffdb5b; }
-
-//.simple-notification .sn-progress-loader {
-//  position: absolute;
-//  top: 0;
-//  left: 0;
-//  width: 100%;
-//  height: 5px;
-//}
-//
-//.simple-notification .sn-progress-loader span {
-//  float: left;
-//  height: 100%;
-//}
-
-.simple-notification.success .sn-progress-loader span { background: #689F38; }
-.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
-.simple-notification.alert .sn-progress-loader span { background: #edc242; }
-.simple-notification.info .sn-progress-loader span { background: #0288D1; }
-.simple-notification.warn .sn-progress-loader span { background: #edc242; }
-.simple-notification.bare .sn-progress-loader span { background: #ccc; }
-
-//.simple-notification.warn div .sn-title,
-//.simple-notification.warn div .sn-content,
-//.simple-notification.warn div .sn-html { color: #444; }
-
-
-
 .close {
   float: right;
-  padding-right: 5px;
-  color: darkslategray;
+  margin-right: -15px;
+  margin-top: -10px;
 }
 
 .icon {
   float: left;
+  margin-left: -10px;
   padding: 5px;
-  color: darkslategray;
 }
-//
-//.icon > fa-times-circle {
-//  color: red;
-//}
-//
-//.icon > fa-exclamation-triangle {
-//  color: orange;
-//}
-//
-//.icon > fa-info {
-//  color: white;
-//}
-//
-//.icon > fa-check {
-//  color: forestgreen;
-//}
 
 .sn-title, .sn-content, .sn-html {
   position: relative;
   left: 20px;
 }
+
+//.simple-notification.error { background: #F44336; }
+//.simple-notification.success { background: #8BC34A; }
+//.simple-notification.alert { background: #ffdb5b; }
+//.simple-notification.info { background: #03A9F4; }
+//.simple-notification.warn { background: #ffdb5b; }
+//
+//.simple-notification.success .sn-progress-loader span { background: #689F38; }
+//.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
+//.simple-notification.alert .sn-progress-loader span { background: #edc242; }
+//.simple-notification.info .sn-progress-loader span { background: #0288D1; }
+//.simple-notification.warn .sn-progress-loader span { background: #edc242; }
+//.simple-notification.bare .sn-progress-loader span { background: #ccc; }
+
+//.simple-notification.warn div .sn-title,
+//.simple-notification.warn div .sn-content,
+//.simple-notification.warn div .sn-html { color: #444; }
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index d228018d25..e1b97331e9 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -112,38 +113,40 @@ import { INotification } from '../models/notification.model';
 
 export class NotificationComponent implements OnInit, OnDestroy {
 
-  @Input() public timeOut: number;
+  // @Input() public timeOut: number;
   // @Input() public showProgressBar: boolean;
   // @Input() public pauseOnHover: boolean;
   // @Input() public clickToClose: boolean;
   // @Input() public clickIconToClose: boolean;
   // @Input() public maxLength: number;
   // @Input() public theClass: string;
-  @Input() public rtl: boolean;
-  @Input() public animate: string;
-  @Input() public position: number;
+  // @Input() public rtl: boolean;
+  // @Input() public animate: string;
+  // @Input() public position: number;
   @Input() public item: INotification;
 
   // Progress bar variables
   public title: any;
   public content: any;
+  public html: any;
 
   public titleIsTemplate = false;
   public contentIsTemplate = false;
   public htmlIsTemplate = false;
 
-  public progressWidth = 0;
-  public safeSvg: SafeHtml;
+  // public progressWidth = 0;
 
   private stopTime = false;
   private timer: any;
   private steps: number;
   private speed: number;
   private count = 0;
-  private start: any;
 
+  private start: any;
   private diff: any;
-  private icon: string;
+
+  // 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
+  public animate = 'rotate';
 
   constructor(private notificationService: NotificationsService,
               private domSanitizer: DomSanitizer,
@@ -152,70 +155,24 @@ export class NotificationComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    // if (this.item.override) {
-    //   this.attachOverrides();
-    // }
-    //
-    // if (this.animate) {
-    //   this.item.state = this.animate;
-    // }
+    this.animate = this.item.options.animate;
 
-    if (this.timeOut !== 0) {
+    if (this.item.options.timeOut !== 0) {
       this.startTimeOut();
     }
 
     this.contentType(this.item.title, 'title');
     this.contentType(this.item.content, 'content');
     this.contentType(this.item.html, 'html');
-
-    // this.safeSvg = this.domSanitizer.bypassSecurityTrustHtml(this.icon || this.item.icon);
   }
 
   startTimeOut(): void {
-    this.steps = this.timeOut / 10;
-    this.speed = this.timeOut / this.steps;
+    this.steps = this.item.options.timeOut / 10;
+    this.speed = this.item.options.timeOut / this.steps;
     this.start = new Date().getTime();
     this.zone.runOutsideAngular(() => this.timer = setTimeout(this.instance, this.speed));
   }
 
-  onEnter(): void {
-    // if (this.pauseOnHover) {
-    //   this.stopTime = true;
-    // }
-  }
-
-  onLeave(): void {
-    // if (this.pauseOnHover) {
-    //   this.stopTime = false;
-    //   this.zone.runOutsideAngular(() => setTimeout(this.instance, (this.speed - this.diff)));
-    // }
-  }
-
-  // onClick($e: MouseEvent): void {
-  //   this.item.click!.emit($e);
-  //
-  //   // if (this.clickToClose) {
-  //   //   this.remove();
-  //   // }
-  // }
-
-  // onClickIcon($e: MouseEvent): void {
-  //   this.item.clickIcon!.emit($e);
-  //
-  //   // if (this.clickIconToClose) {
-  //   //   this.remove();
-  //   // }
-  // }
-
-  // Attach all the overrides
-  // attachOverrides(): void {
-  //   Object.keys(this.item.override).forEach((a) => {
-  //     if (this.hasOwnProperty(a)) {
-  //       (this as any)[a] = this.item.override[a];
-  //     }
-  //   });
-  // }
-
   ngOnDestroy(): void {
     clearTimeout(this.timer);
   }
@@ -237,17 +194,14 @@ export class NotificationComponent implements OnInit, OnDestroy {
   };
 
   private remove() {
-    // if (this.animate) {
-    //   this.item.state = this.animate + 'Out';
-    //   setTimeout(() => {
-    //     this.notificationService.set(this.item, false);
-    //   }, 310);
-    // } else {
-    //   this.notificationService.set(this.item, false);
-    // }
-
-    // this.notificationService.set(this.item, false);
-    this.notificationService.remove(this.item);
+    if (this.animate) {
+      this.animate = this.animate + 'Out';
+      setTimeout(() => {
+        this.notificationService.remove(this.item);
+      }, 310);
+    } else {
+      this.notificationService.remove(this.item);
+    }
   }
 
   private contentType(item: any, key: string) {
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.html b/src/app/shared/notifications/notifications-board/notifications-board.component.html
index a3f322f049..f7254c0610 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.html
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.html
@@ -1,11 +1,7 @@
 <div class="simple-notification-wrapper" [ngClass]="position">
   <ds-notification
     *ngFor="let a of notifications; let i = index"
-    [item]="a"
-    [timeOut]="timeOut"
-    [rtl]="rtl"
-    [animate]="animate"
-    [position]="i">
+    [item]="a">
 
     <!--[clickToClose]="clickToClose"-->
     <!--[clickIconToClose]="clickIconToClose"-->
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.ts b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
index 6501bc7653..40ccf0984c 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.ts
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
@@ -1,15 +1,22 @@
 import {
-  Component, EventEmitter, OnInit, OnDestroy, ViewEncapsulation, Input, Output,
-  ChangeDetectionStrategy, ChangeDetectorRef
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewEncapsulation
 } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
-import { Options } from '../interfaces/options.type';
-import { Notification } from '../interfaces/notification.type';
 import { NotificationsService } from '../notifications.service';
 import { Store } from '@ngrx/store';
-import { NotificationsActions, NotificationsActionTypes } from '../notifications.actions';
-import { notificationsReducer } from '../notifications.reducers';
 import { AppState } from '../../../app.reducer';
+import { notificationsStateSelector } from '../selectors';
+import { difference } from 'lodash';
+import { INotification } from '../models/notification.model';
+import { NotificationsState } from '../notifications.reducers';
+import { INotificationBoardOptions } from '../models/notification-options.model';
 
 @Component({
   selector: 'ds-notifications-board',
@@ -20,33 +27,22 @@ import { AppState } from '../../../app.reducer';
 })
 export class NotificationsBoardComponent implements OnInit, OnDestroy {
 
-  @Input() set options(opt: Options) {
+  @Input() set options(opt: INotificationBoardOptions) {
     this.attachChanges(opt);
   }
 
   @Output() onCreate = new EventEmitter();
   @Output() onDestroy = new EventEmitter();
 
-  public notifications: Notification[] = [];
+  public notifications: INotification[] = [];
   public position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'] = ['bottom', 'right'];
 
-  private lastNotificationCreated: Notification;
-  private listener: Subscription;
+  // private listener: Subscription;
 
   // Received values
-  private lastOnBottom = false;
   private maxStack = 8;
-  // private preventLastDuplicates: any = true;
-  // private preventDuplicates = true;
 
   // Sent values
-  public timeOut = 0;
-  // public maxLength = 0;
-  // public clickToClose = true;
-  // public clickIconToClose = false;
-  // public showProgressBar = true;
-  // public pauseOnHover = true;
-  // public theClass = '';
   public rtl = false;
   public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
 
@@ -56,105 +52,56 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.listener = this.store.select()
-      (action: NotificationsActions) => {
-        notificationsReducer(this.notifications, action);
+    // this.listener =
+    this.store.select(notificationsStateSelector)
+      .subscribe((state: NotificationsState) => {
+        if (state.length === 0) {
+          this.notifications = [];
+        } else if (state.length > this.notifications.length) {
+          // Add
+          const newElem = difference(state, this.notifications);
+          console.log('new Elements #', newElem.length);
 
-        // switch (action.type) {
-        //   case NotificationsActionTypes.NEW_NOTIFICATION:
-        //
-        //     break;
-        //   case NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER:
-        //
-        //     break;
-        //   case NotificationsActionTypes.REMOVE_NOTIFICATION:
-        //
-        //     break;
-        //   case NotificationsActionTypes.REMOVE_ALL_NOTIFICATIONS:
-        //
-        //     break;
-        // }
+          newElem.forEach((notification) => {
+            this.add(notification);
+          });
+        } else {
+          // Remove
+          const delElem = difference(this.notifications, state);
+          delElem.forEach((notification) => {
+            this.notifications = this.notifications.filter((item: INotification) => item.id !== notification.id);
+
+          });
+        }
+
+        console.log(this.notifications);
+        this.cdr.markForCheck();
       });
-
-    // Listen for changes in the service
-    // this.listener = this.service.emitter
-    //   .subscribe((item) => { // Subscribe a stato di redux
-    //     switch (item.command) {
-    //       case 'cleanAll':
-    //         this.notifications = [];
-    //         break;
-    //
-    //       case 'clean':
-    //         this.cleanSingle(item.id!);
-    //         break;
-    //
-    //       case 'set':
-    //         if (item.add) {
-    //           this.add(item.notification!);
-    //         } else {
-    //           this.defaultBehavior(item);
-    //         }
-    //         break;
-    //
-    //       default:
-    //         this.defaultBehavior(item);
-    //         break;
-    //     }
-    //
-    //     this.cdr.markForCheck();
-    //   });
-  }
-
-  // Default behavior on event
-  defaultBehavior(value: any): void {
-    this.notifications.splice(this.notifications.indexOf(value.notification), 1);
-    this.onDestroy.emit(this.buildEmit(value.notification, false));
   }
 
   // Add the new notification to the notification array
-  add(item: Notification): void {
-    item.createdOn = new Date();
-
-    // const toBlock: boolean = this.preventLastDuplicates || this.preventDuplicates ? this.block(item) : false;
-
-    // Save this as the last created notification
-    this.lastNotificationCreated = item;
-    // Override icon if set
-    if (item.override && item.override.icons && item.override.icons[item.type]) {
-      item.icon = item.override.icons[item.type];
+  add(item: INotification): void {
+    const toBlock: boolean = this.block(item);
+    if (!toBlock) {
+      if (this.notifications.length >= this.maxStack) {
+        this.notifications.splice(this.notifications.length - 1, 1);
+      }
+      this.notifications.splice(0, 0, item);
     }
-
-    // if (!toBlock) {
-    //   // Check if the notification should be added at the start or the end of the array
-    //   if (this.lastOnBottom) {
-    //     if (this.notifications.length >= this.maxStack) {
-    //       this.notifications.splice(0, 1);
-    //     }
-    //
-    //     this.notifications.push(item);
-    //   } else {
-    //     if (this.notifications.length >= this.maxStack) {
-    //       this.notifications.splice(this.notifications.length - 1, 1);
-    //     }
-    //
-    //     this.notifications.splice(0, 0, item);
-    //   }
-    //
-    //   this.onCreate.emit(this.buildEmit(item, true));
-    // }
   }
 
-  // Check if notifications should be prevented
-  block(item: Notification): boolean {
-
-    const toCheck = item.html ? this.checkHtml : this.checkStandard;
-
-    this.notifications.forEach((notification) => {
-      if (toCheck(notification, item)) {
-        return true;
-      }
-    });
+  //
+  // // Check if notifications should be prevented
+  block(item: INotification): boolean {
 
+    // const toCheck = item.html ? this.checkHtml : this.checkStandard;
+    //
+    // this.notifications.forEach((notification) => {
+    //   if (toCheck(notification, item)) {
+    //     return true;
+    //   }
+    // });
+    //
     // if (this.notifications.length > 0) {
     //   for (let i = 0; i < this.notifications.length; i++) {
     //     if (toCheck(this.notifications[i], item)) {
@@ -163,32 +110,33 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
     //   }
     // }
     //
-    // if (this.preventLastDuplicates) {
+    // // if (this.preventLastDuplicates) {
     //
     //   let comp: Notification;
     //
-    //   if (this.preventLastDuplicates === 'visible' && this.notifications.length > 0) {
-    //     if (this.lastOnBottom) {
-    //       comp = this.notifications[this.notifications.length - 1];
-    //     } else {
+    //   if ( this.notifications.length > 0) {
+    //   //   if (this.lastOnBottom) {
+    //   //     comp = this.notifications[this.notifications.length - 1];
+    //   //   }
+    //   //   else {
     //       comp = this.notifications[0];
-    //     }
-    //   } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
-    //     comp = this.lastNotificationCreated;
+    //     // }
+    //   // } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
+    //   //   comp = this.lastNotificationCreated;
     //   } else {
     //     return false;
     //   }
     //   return toCheck(comp, item);
-    // }
-
+    // // }
+    //
     return false;
   }
 
-  checkStandard(checker: Notification, item: Notification): boolean {
+  checkStandard(checker: INotification, item: INotification): boolean {
     return checker.type === item.type && checker.title === item.title && checker.content === item.content;
   }
 
-  checkHtml(checker: Notification, item: Notification): boolean {
+  checkHtml(checker: INotification, item: INotification): boolean {
     return checker.html ? checker.type === item.type && checker.title === item.title && checker.content === item.content && checker.html === item.html : false;
   }
 
@@ -197,56 +145,13 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
     Object.keys(options).forEach((a) => {
       if (this.hasOwnProperty(a)) {
         (this as any)[a] = options[a];
-      } else if (a === 'icons') {
-        // this.service.icons = options[a];
       }
     });
   }
 
-  buildEmit(notification: Notification, to: boolean) {
-    const toEmit: Notification = {
-      createdOn: notification.createdOn,
-      type: notification.type,
-      icon: notification.icon,
-      id: notification.id
-    };
-
-    if (notification.html) {
-      toEmit.html = notification.html;
-    } else {
-      toEmit.title = notification.title;
-      toEmit.content = notification.content;
-    }
-
-    if (!to) {
-      toEmit.destroyedOn = new Date();
-    }
-
-    return toEmit;
-  }
-
-  cleanSingle(id: string): void {
-    let indexOfDelete = 0;
-    let doDelete = false;
-    let noti;
-
-    this.notifications.forEach((notification, idx) => {
-      if (notification.id === id) {
-        indexOfDelete = idx;
-        noti = notification;
-        doDelete = true;
-      }
-    });
-
-    if (doDelete) {
-      this.notifications.splice(indexOfDelete, 1);
-      this.onDestroy.emit(this.buildEmit(noti, false));
-    }
-  }
-
   ngOnDestroy(): void {
-    if (this.listener) {
-      this.listener.unsubscribe();
-    }
+    // if (this.listener) {
+    //   this.listener.unsubscribe();
+    // }
   }
 }
diff --git a/src/app/shared/notifications/notifications.service.ts b/src/app/shared/notifications/notifications.service.ts
index 4a82ff9eec..60efd32700 100644
--- a/src/app/shared/notifications/notifications.service.ts
+++ b/src/app/shared/notifications/notifications.service.ts
@@ -1,35 +1,30 @@
-import { Injectable, EventEmitter } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import { NotificationEvent } from './interfaces/notification-event.type';
+import { Injectable } from '@angular/core';
 import { INotification, Notification } from './models/notification.model';
 // import {Icons, defaultIcons} from './interfaces/icons';
 import { NotificationType } from './models/notification-type';
 import { NotificationOptions } from './models/notification-options.model';
-import * as _ from 'lodash';
+import { uniqueId } from 'lodash';
 import { Store } from '@ngrx/store';
 import {
-  NewNotificationAction, NewNotificationWithTimerAction, RemoveAllNotificationsAction,
+  NewNotificationAction,
+  NewNotificationWithTimerAction,
+  RemoveAllNotificationsAction,
   RemoveNotificationAction
 } from './notifications.actions';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Injectable()
 export class NotificationsService {
 
+  public static htmlArray = new Map<string, any>();
+
   // public emitter = new Subject<NotificationEvent>();
   // public icons: Icons = defaultIcons;
-  constructor(private store: Store<Notification>) {
+  constructor(private store: Store<Notification>,
+              private domSanitizer: DomSanitizer,) {
 
   }
 
-  // private set(notification: Notification, to: boolean): Notification {
-  //     notification.id = notification.override && notification.override.id ? notification.override.id : Math.random().toString(36).substring(3);
-  //     notification.click = new EventEmitter<{}>();
-  //     notification.timeoutEnd = new EventEmitter<{}>();
-  //
-  //     this.emitter.next({command: 'set', notification: notification, add: to});
-  //     return notification;
-  // };
-
   private add(notification: Notification) {
     let notificationAction;
     if (notification.options.timeOut > 0) {
@@ -41,75 +36,46 @@ export class NotificationsService {
   }
 
   success(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
-    const notification = new Notification(_.uniqueId(), NotificationType.Success, title, content, options);
+    const notification = new Notification(uniqueId(), NotificationType.Success, title, content, options);
     this.add(notification);
     return notification;
   }
 
-  // error(title: any = '', content: any = '', override?: any): Notification {
-  //     return this.set({title: title, content: content || '', type: NotificationType.Error, override: override}, true);
-  // }
-
-  danger(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
-    const notification = new Notification(_.uniqueId(), NotificationType.Danger, title, content, options);
+  error(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
+    const notification = new Notification(uniqueId(), NotificationType.Error, title, content, options);
     this.add(notification);
     return notification;
   }
 
   info(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
-    const notification = new Notification(_.uniqueId(), NotificationType.Info, title, content, options);
+    const notification = new Notification(uniqueId(), NotificationType.Info, title, content, options);
     this.add(notification);
     return notification;
   }
 
   warning(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
-    const notification = new Notification(_.uniqueId(), NotificationType.Warning, title, content, options);
+    const notification = new Notification(uniqueId(), NotificationType.Warning, title, content, options);
     this.add(notification);
     return notification;
   }
 
-  // bare(title: any = '', content: any = '', override?: any): Notification {
-  //     return this.set({title: title, content: content || '', type: 'bare', icon: 'bare', override: override}, true);
-  // }
-
-  // With type method
-  // create(title: any = '', content: any = '', type = 'success'): Notification {
-  //   return this.set({
-  //     title: title,
-  //     content: content,
-  //     type: type,
-  //     icon: (this.icons as any)[type],
-  //     override: override
-  //   }, true);
-  // }
-
-  // HTML Notification method
-  // html(html: any, type = 'success', override?: any, icon = 'bare'): Notification {
-  //   return this.set({html: html, type: type, icon: (this.icons as any)[icon], override: override}, true);
-  // }
-
   html(html: any, type = NotificationType.Success, options = new NotificationOptions()): Notification {
-    const notification = new Notification(_.uniqueId(), type, null, null, options);
-    notification.html = html;
+    const notification = new Notification(uniqueId(), type, '', '', options);
+    NotificationsService.htmlArray.set(notification.id, html);
+    // notification.html = true;
     this.add(notification);
     return notification;
   }
 
-  // Remove all notifications method
-  // remove(id?: string): void {
-  //   if (id) {
-  //     this.emitter.next({command: 'clean', id: id});
-  //   } else {
-  //     this.emitter.next({command: 'cleanAll'});
-  //   }
-  // }
   remove(notification: INotification) {
     const actionRemove = new RemoveNotificationAction(notification.id);
+    NotificationsService.htmlArray.delete(notification.id);
     this.store.dispatch(actionRemove);
   }
 
   removeAll() {
     const actionRemoveAll = new RemoveAllNotificationsAction();
+    NotificationsService.htmlArray.clear();
     this.store.dispatch(actionRemoveAll);
   }