diff --git a/app/coffee/modules/base/confirm.coffee b/app/coffee/modules/base/confirm.coffee
index ebe0cc00..27a6eede 100644
--- a/app/coffee/modules/base/confirm.coffee
+++ b/app/coffee/modules/base/confirm.coffee
@@ -110,18 +110,18 @@ class ConfirmService extends taiga.Service
         @.el = angular.element(selector)
 
         body = angular.element("body")
-        body.find(".notification-message, notification-light").addClass("hidden")
-        body.find(selector).removeClass("hidden")
+        body.find(".notification-message .notification-light").removeClass('active');
+        body.find(selector).addClass('active');
 
         if @.tsem
             cancelTimeout(@.tsem)
 
-        @.tsem = timeout 4000, =>
-            body.find(selector).addClass("hidden")
+        @.tsem = timeout 3500, =>
+            body.find(selector).removeClass('active')
             delete @.tsem
 
         @.el.on "click", ".icon-delete", (event) =>
-            body.find(selector).addClass("hidden")
+            body.find(selector).removeClass('active')
 
 
 module = angular.module("taigaBase")
diff --git a/app/partials/views/components/notification-message.jade b/app/partials/views/components/notification-message.jade
index 6759e559..c7cf3522 100644
--- a/app/partials/views/components/notification-message.jade
+++ b/app/partials/views/components/notification-message.jade
@@ -5,14 +5,14 @@ div.hidden.notification-message.notification-message-success
        p Our oompa Loompas saved all your changes!
    a.icon.icon-delete(href="", title="Close notification")
 
-div.hidden.notification-message.notification-message-error
+div.notification-message.notification-message-error
     div.icon.icon-notification-error
     div.text
         h4.warning Oops, something happened...
         p Our oompa Loompas are sad, your changes were not saved!
     a.icon.icon-delete(href="", title="Close notification")
 
-div.hidden.notification-light.notification-message-light-error
+div.notification-light.notification-message-light-error
     div.text
         h4.warning Oops, something happened...
         p Our oompa Loompas are sad, your changes were not saved!
diff --git a/app/styles/components/notification-message.scss b/app/styles/components/notification-message.scss
index e836fb41..b3b72726 100644
--- a/app/styles/components/notification-message.scss
+++ b/app/styles/components/notification-message.scss
@@ -1,11 +1,18 @@
 .notification-message {
-    background: $grayer;
+    @include transform(translateY(-100%));
+    @include transition (all .6s ease-in-out);
+    background: rgba($gray-light, .8);
     color: $white;
     padding: 1rem;
     padding-bottom: .5em;
-    position: relative;
+    position: absolute;
+    top: 0;
     width: 100%;
     z-index: 999;
+    &.active {
+        @include transform(translateY(0));
+        @include transition (all .6s ease-in-out);
+    }
     .text {
         display: inline-block;
         margin-left: .5rem;
@@ -26,7 +33,7 @@
 }
 
 .notification-message-success {
-    background: $fresh-taiga;
+    background: rgba($fresh-taiga, .8);
     .icon-notification-success {
         @extend %xxlarge;
         display: inline;
@@ -35,7 +42,7 @@
 }
 
 .notification-message-error {
-    background: $red;
+    background: rgba($red, .8);
     .icon-notification-error {
         @extend %xxlarge;
         display: inline;
@@ -44,18 +51,19 @@
 }
 
 .notification-light {
-    @include transition(padding .2s linear);
-    background: rgba(0, 0, 0, .8);
+    @include transform(translateY(-100%));
+    @include transition (all .6s ease-in-out);
+    background: rgba($gray-light, .8);
     color: $white;
     left: calc(50% - 200px);
-    padding: 4% 1rem .2rem;
+    padding: 1rem 1rem .2rem;
     position: absolute;
     top: 0;
     width: 400px;
     z-index: 999;
-    &.hidden {
-        @include transition (padding .2s linear);
-        padding: 1% 1rem .2rem;
+    &.active {
+        @include transform(translateY(0));
+        @include transition (all .6s ease-in-out);
     }
     .text {
         display: inline-block;
@@ -76,5 +84,5 @@
 }
 
 .notification-message-light-error {
-    @include background(240, 15, 8, .8);
+    background: rgba($red, .8);
 }