diff --git a/js/components/global_notification.js b/js/components/global_notification.js
index b048c5a8..75bbb324 100644
--- a/js/components/global_notification.js
+++ b/js/components/global_notification.js
@@ -38,17 +38,27 @@ let GlobalNotification = React.createClass({
     },
 
     extractFirstElem(l) {
-        return l.length > 0 ? l[0] : {message: ''};
+        if(l.length > 0) {
+            return {
+                show: true,
+                message: l[0]
+            };
+        } else {
+            return {
+                show: false,
+                message: ''
+            };
+        }
     },
 
     onChange(state) {
         let notification = this.extractFirstElem(state.notificationQue);
 
-        if(notification) {
+        if(notification.show) {
             this.setState(notification);
         } else {
-            this.replaceState({
-                message: ''
+            this.setState({
+                show: false
             });
         }
     },
@@ -62,31 +72,36 @@ let GlobalNotification = React.createClass({
     render() {
         let notificationClass = 'ascribe-global-notification';
         let textClass;
-        let message = this.state && this.state.message ? this.state.message : null;
 
-        if(message) {
-            notificationClass += ' ascribe-global-notification-on';
+        if(this.state.containerWidth > 768) {
+            notificationClass = 'ascribe-global-notification-bubble';
+
+            if(this.state.show) {
+                notificationClass += ' ascribe-global-notification-bubble-on';
+            } else {
+                notificationClass += ' ascribe-global-notification-bubble-off';
+            }
+
         } else {
-            notificationClass += ' ascribe-global-notification-off';
+            notificationClass = 'ascribe-global-notification';
+
+            if(this.state.show) {
+                notificationClass += ' ascribe-global-notification-on';
+            } else {
+                notificationClass += ' ascribe-global-notification-off';
+            }
+
         }
 
-        if(this.state) {
-            switch(this.state.type) {
-                case 'warning':
-                    textClass = 'ascribe-global-notification-warning';
-                    break;
-                case 'success':
-                    textClass = 'ascribe-global-notification-success';
-                    break;
-                case 'info':
-                    textClass = 'ascribe-global-notification-info';
-                    break;
-                case 'danger':
-                    textClass = 'ascribe-global-notification-danger';
-                    break;
-                default:
-                    console.warn('Could not find a matching type in global_notification.js');
-            }
+        switch(this.state.message.type) {
+            case 'success':
+                textClass = 'ascribe-global-notification-success';
+                break;
+            case 'danger':
+                textClass = 'ascribe-global-notification-danger';
+                break;
+            default:
+                console.warn('Could not find a matching type in global_notification.js');
         }
 
         return (
@@ -94,7 +109,7 @@ let GlobalNotification = React.createClass({
                 <Row>
                     <Col>
                         <div className={notificationClass}>
-                            <div className={textClass}>{message ? message : null}</div>
+                            <div className={textClass}>{this.state.message.message}</div>
                         </div>
                     </Col>
                 </Row>
diff --git a/js/components/header.js b/js/components/header.js
index 61b25e2e..e3c7205f 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -113,7 +113,7 @@ let Header = React.createClass({
                         <Nav navbar left>
                         </Nav>
                         <Nav navbar right>
-                            <HeaderNotificationDebug />
+                            <HeaderNotificationDebug show={false}/>
                             {addNewWork}
                             {collection}
                             {account}
diff --git a/js/components/header_notification_debug.js b/js/components/header_notification_debug.js
index ae9a2a28..b7ac8c56 100644
--- a/js/components/header_notification_debug.js
+++ b/js/components/header_notification_debug.js
@@ -14,15 +14,37 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
  */
 let HeaderNotificationDebug = React.createClass({
 
+    propTypes: {
+        show: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return {
+            index: 0
+        };
+    },
+
     triggerNotification() {
-        let notification = new GlobalNotificationModel('this is a test, please ignore', 'success');
+        if(this.state.index === 1) {
+            this.setState({index: 0});
+        } else {
+            this.setState({index: this.state.index + 1});
+        }
+
+        let actions = ['success', 'danger'];
+
+        let notification = new GlobalNotificationModel('this is a test, please ignore', actions[this.state.index]);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        return (
-            <MenuItem onClick={this.triggerNotification}>Notification</MenuItem>
-        );
+        if(this.props.show) {
+            return (
+                <MenuItem onClick={this.triggerNotification}>Notification</MenuItem>
+            );
+        } else {
+            return null;
+        }
     }
 });
 
diff --git a/sass/ascribe-global-notification.scss b/sass/ascribe-global-notification.scss
index 53e2106d..2ab1cfd7 100644
--- a/sass/ascribe-global-notification.scss
+++ b/sass/ascribe-global-notification.scss
@@ -2,6 +2,7 @@
     position: fixed;
     
     background-color: #212121;
+    color: white;
     width: 100%;
     height:3.5em;
     left:0;
@@ -18,7 +19,7 @@
     bottom: 0;
 }
 
-.ascribe-global-notification > div {
+.ascribe-global-notification > div, .ascribe-global-notification-bubble > div {
     display:table-cell;
     vertical-align: middle;
     font-size: 1.25em;
@@ -27,18 +28,39 @@
     padding-right: 3em;
 }
 
-.ascribe-global-notification-warning {
-    color: #f0ad4e;
+.ascribe-global-notification-bubble > div {
+    padding: .75em 1.5em .75em 1.5em;
+}
+
+.ascribe-global-notification-bubble {
+    position: fixed;
+    bottom: 3em;
+    right: -50em;
+
+    display:table;
+
+    height: 3.5em;
+
+    background-color: #212121;
+    border-radius: 2px;
+
+    color: white;
+
+    transition: 1s right ease;
+}
+
+.ascribe-global-notification-bubble-off {
+    right: -50em;
+}
+
+.ascribe-global-notification-bubble-on {
+    right: 3.5em;
 }
 
 .ascribe-global-notification-danger {
-    color: #d9534f;
+    background-color: #d9534f;
 }
 
 .ascribe-global-notification-success {
-    color: #5cb85c;
-}
-
-.ascribe-global-notification-info {
-    color: rgba(2, 182, 163, 1);
+    background-color: rgba(2, 182, 163, 1);
 }
\ No newline at end of file