diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index dda29503..a2540ea7 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -9,23 +9,23 @@
     width: 100%;
 
     z-index: 9999;
-}
 
-.ascribe-global-notification-off {
-    bottom: -3.5em;
-}
+    > div {
+        padding: .5em 1em;
+        text-align: center;
+    }
 
-.ascribe-global-notification-on {
-    bottom: 0;
-}
+    &.ascribe-global-notification-off {
+        bottom: -5em;
+    }
 
-.ascribe-global-notification > div,
-.ascribe-global-notification-bubble > div {
-    display: table-cell;
-    font-size: 1.25em;
-    padding-right: 3em;
-    text-align: right;
-    vertical-align: middle;
+    &.ascribe-global-notification-on {
+        bottom: 0;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.2s;
+    }
 }
 
 .ascribe-global-notification-bubble {
@@ -35,23 +35,35 @@
     color: white;
     display: table;
     height: 3.5em;
+    max-width: 75%;
     position: fixed;
-    right: -50em;
-    transition: 1s right ease;
+    transition: 0.5s right ease;
 
     z-index: 9999;
 
     > div {
         padding: .75em 1.5em;
+        text-align: left;
+    }
+
+    &.ascribe-global-notification-bubble-off {
+        right: -100em;
+    }
+
+    &.ascribe-global-notification-bubble-on {
+        right: 3.5em;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.5s;
     }
 }
 
-.ascribe-global-notification-bubble-off {
-    right: -100em;
-}
-
-.ascribe-global-notification-bubble-on {
-    right: 3.5em;
+.ascribe-global-notification > div,
+.ascribe-global-notification-bubble > div {
+    display: table-cell;
+    font-size: 1.25em;
+    vertical-align: middle;
 }
 
 .ascribe-global-notification-danger {