diff --git a/rhodecode/public/css/alerts.less b/rhodecode/public/css/alerts.less
--- a/rhodecode/public/css/alerts.less
+++ b/rhodecode/public/css/alerts.less
@@ -5,7 +5,6 @@
 
 .alert {
     clear: both;
-    margin: @space auto 0 auto;
     padding: @padding;
     border: @border-thickness solid;
     border-radius: @border-radius;
diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
--- a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
+++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
@@ -6,7 +6,7 @@
         <style include="shared-styles"></style>
         <link rel="stylesheet" href="rhodecode-toast.css">
         <template is="dom-if" if="[[hasToasts]]">
-            <div class$="container toast-message-holder [[conditionalClass(isFixed)]]" >
+            <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                 <template is="dom-repeat" items="[[toasts]]">
                     <div class$="alert alert-[[item.level]]">
                         <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less
--- a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less
+++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less
@@ -7,16 +7,22 @@
 
 .toast-close{
     text-align: right;
+    .btn {
+        margin: 0;
+    }
 }
 
 .toast-message-holder{
-    background-color: #ffffff;
+    background: fade(#fff, 25%);
 
     &.fixed{
         position: fixed;
-        padding: 10px;
+        padding: 10px 0;
+        margin-left: 10px;
+        margin-right: 10px;
         top: 0;
-        width: 1200px;
-        z-index: 1;
+        left: 0;
+        right:0;
+        z-index: 100;
     }
 }