diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index c2080c87f9..21571a8f4a 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -43,31 +43,28 @@ $(document).ready(function () {
 
     $('body').addClass('js');
 
-    // notifications
-    $('.testing .test-notification').click(function(e) {
-        (e).preventDefault();
-        manageNotification(e);
-    });
-
-    function manageNotification(e) {
-        var $notificationRibbon = $('.wrapper-notification');
-
-        // showing
-        $notificationRibbon.toggleClass('is-shown');
-
-        // controls for closing notification
-        $notificationRibbon.find('.action-notification-close').click(function(e) {
-            (e).preventDefault();
-            $notificationRibbon.toggleClass('is-shown');
-        });
-    }
-
     // lean/simple modal
     $('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
     $('a.action-modal-close').click(function(e){
         (e).preventDefault();
     });
 
+    // alert and notifications - manual close
+    $('.action-alert-close').click(function(e) {
+        (e).preventDefault();
+        console.log('closing alert');
+        $(this).closest('.wrapper-alert').removeClass('is-shown');
+    });
+
+    // alert and notifications - manual close
+    $('.action-notification-close').click(function(e) {
+        (e).preventDefault();
+        $(this).closest('.wrapper-notification').removeClass('is-shown');
+    });
+
+
+
+
     // nav - dropdown related
     $body.click(function (e) {
         $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss
index 8e5401112b..5b9a08b0ea 100644
--- a/cms/static/sass/_alerts.scss
+++ b/cms/static/sass/_alerts.scss
@@ -5,9 +5,8 @@
 .wrapper-notification {
   @include clearfix();
   @include box-sizing(border-box);
-  // @include transition (bottom 1.5s ease-in-out 0.25s);
-  transition: bottom 1.5s ease-in-out 0.25s;
-  -webkit-transition: bottom 1.5s ease-in-out 0.25s;
+  transition: bottom 1.0s ease-in-out 0.125s;
+  -webkit-transition: bottom 1.0s ease-in-out 0.125s;
   @include box-shadow(0 -1px 3px $shadow);
   position: fixed;
   z-index: 1000;
@@ -66,8 +65,9 @@
 
   // shorter/status notifications
   &.wrapper-notification-status {
-    width: ($baseline*12.5);
+    width: ($baseline*6);
     right: ($baseline);
+    border-top-color: $pink;
     padding: ($baseline/2) $baseline;
 
     .notification {
@@ -94,6 +94,30 @@
       }
     }    
   }
+
+  // shorter/status notifications
+  &.wrapper-notification-help {
+    width: ($baseline*14);
+    right: ($baseline);
+    padding: ($baseline/2) $baseline;
+
+    .notification {
+      @include box-sizing(border-box);
+      @include clearfix();
+      width: 100%;
+      max-width: none;
+      min-width: none;
+
+      .icon-help {
+        width: $baseline;
+        margin-right: ($baseline*0.75);
+      }
+
+      .copy {
+        width: ($baseline*11);
+      }
+    }    
+  }
 }
 
 .notification {
@@ -135,27 +159,24 @@
 
   // with cancel
   .action-notification-close {
-    @include transition(top .25s ease-in-out);
-    @include border-bottom-radius(3px);
+    @include border-top-radius(3px);
     position: absolute;
-    top: -($baseline/4);
-    left: ($baseline/2);
+    top: -31px;
+    right: $baseline;
     padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
-    background: $gray-d2;
+    background: $gray-l1;
     text-align: center;
 
     .label {
       @include text-sr();
     }
 
-    .ss-icon {
+    .icon {
       @include font-size(14);
       color: $white;
-    }
-
-    &:hover {
-      background: $blue;
-      top: 0;
+      width: auto;
+      margin: 0;
+      padding: 2px;
     }
   }
 
@@ -185,31 +206,35 @@
         &:last-child {
           margin-right: 0;
         }
-
-        .action-primary {
-          @include font-size(13);
-          font-weight: 600;
-        }
-
-        .action-secondary {
-          @include font-size(13);
-        }
       }
     }
+
+    .action-primary {
+      @include blue-button();
+      @include font-size(13);
+      border-color: $blue-d2;
+      font-weight: 600;
+    }
+
+    .action-secondary {
+      @include font-size(13);
+    }
   }
 
   // notification types
   &.warning {
 
     .action-notification-close {
+      background: $orange;
 
       &:hover {
-        background: $orange;
+        background: $orange-s2;
       }
     }
 
     .action-primary {
-      @include orange-button;
+      @include orange-button();
+      @include font-size(13);
       border-color: $orange-d2;
     }
 
@@ -225,14 +250,16 @@
   &.error {
 
     .action-notification-close {
+      background: $red-l1;
 
       &:hover {
-        background: $red-l1;
+        background: $red;
       }
     }
 
     .action-primary {
-      @include red-button;
+      @include red-button();
+      @include font-size(13);
       border-color: $red-d2;
     }
 
@@ -248,14 +275,16 @@
   &.confirmation {
 
     .action-notification-close {
+      background: $green;
 
       &:hover {
-        background: $green;
+        background: $green-s2;
       }
     }
 
     .action-primary {
-      @include green-button;
+      @include green-button();
+      @include font-size(13);
       border-color: $green-d2;
     }
 
@@ -271,14 +300,16 @@
   &.announcement {
 
     .action-notification-close {
+      background: $blue;
 
       &:hover {
-        background: $blue;
+        background: $blue-s1;
       }
     }
 
     .action-primary {
-      @include blue-button;
+      @include blue-button();
+      @include font-size(13);
       border-color: $blue-d2;
     }
   }
@@ -291,6 +322,10 @@
       height: 25px;
       line-height: 3rem !important;
     }
+
+    .copy p {
+      @include text-sr();
+    }
   }
 }
 
@@ -428,6 +463,7 @@
     }
   }
 
+  // with actions
   &.has-actions {
   	
     .icon {
@@ -466,11 +502,38 @@
   	}
   }
 
+  // with cancel
+  .action-alert-close {
+    @include border-bottom-radius(3px);
+    position: absolute;
+    top: -($baseline/10);
+    right: $baseline;
+    padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
+    background: $gray-d1;
+    text-align: center;
+
+    .label {
+      @include text-sr();
+    }
+
+    .icon {
+      @include font-size(14);
+      color: $white;
+      width: auto;
+      margin: 0;
+      padding: 2px;
+    }
+
+    &:hover {
+      background: $gray-l1;
+    }
+  }
+
   // alert types
   &.warning {
   	
     .action-primary {
-      @include orange-button;
+      @include orange-button();
       border-color: $orange-d2;
     }
 
@@ -486,7 +549,7 @@
   &.error {
 
     .action-primary {
-      @include red-button;
+      @include red-button();
       border-color: $red-d2;
     }
 
@@ -502,7 +565,7 @@
   &.confirmation {
 
     .action-primary {
-      @include green-button;
+      @include green-button();
       border-color: $green-d2;
     }
 
@@ -518,7 +581,7 @@
   &.announcement {
 
     .action-primary {
-      @include blue-button;
+      @include blue-button();
       border-color: $blue-d2;
     }
   }
@@ -527,7 +590,7 @@
 
     .action-primary {
       border-color: $pink-d2;
-      @include pink-button;
+      @include pink-button();
     }
 
     a {
diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html
index 869bad7260..a783a6f2fe 100644
--- a/cms/templates/alerts.html
+++ b/cms/templates/alerts.html
@@ -2,6 +2,26 @@
 <%block name="title">Studio Alerts</%block>
 <%block name="bodyclass">is-signedin course uxdesign alerts</%block>
 
+<%block name="jsextra">
+<script type="text/javascript">
+  // notifications - demo
+  $(document).ready(function() {
+    
+    $('.test-notification').click(function(e) {
+        (e).preventDefault();          
+        $('.wrapper-notification').removeClass('is-shown');
+        $(this.hash).toggleClass('is-shown');
+    });
+
+    $('.test-alert').click(function(e) {
+        (e).preventDefault();          
+        $('.wrapper-alert').removeClass('is-shown');
+        $(this.hash).toggleClass('is-shown');
+    });
+  });
+</script>
+</%block>
+
 <%block name="content">
 <!-- alert: you're editing a draft -->
 <div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
@@ -63,6 +83,23 @@
   </div>
 </div>
 
+<!-- alert: save confirmed with close -->
+<div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-close">
+  <div class="alert confirmation">
+    <i class="ss-icon ss-symbolicons-standard icon icon-confirmation">&#x2713;</i>
+
+    <div class="copy">
+      <h2 class="title title-3">Your changes have been saved</h2>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <a rel="page" href="#test">Please see below</a></p>
+    </div>
+
+    <a href="#" rel="view" class="action action-alert-close">
+      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+      <span class="label">close alert</span>
+    </a>
+  </div>
+</div>
+
 <!-- alert: delete confirmed -->
 <div class="wrapper wrapper-alert wrapper-alert-confirmation" id="alert-removed">
   <div class="alert confirmation">
@@ -206,11 +243,16 @@
         <p>Note: alerts will probably never been shown based on click or page action and will primarily be loaded along with a pageload and initial display</p>
 
         <ul>
-          <li><a href="#" class="test-notification">Toggle Change Warning Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle New Version Warning Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle Editing Warning Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle Saving Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle Help Notification</a></li>
+          <li><a href="#alert-draft" class="test-alert">Toggle Draft Alert</a></li>
+          <li><a href="#alert-version" class="test-alert">Toggle Version Alert</a></li>
+          <li><a href="#alert-saved" class="test-alert">Toggle Previous View/Action Alert</a></li>
+          <li><a href="#alert-close" class="test-alert">Toggle Alert with Close Option</a></li>
+          <li><a href="#alert-removed" class="test-alert">Toggle Previous View/Action Removed Alert</a></li>
+          <li><a href="#alert-system-error" class="test-alert">Toggle System Error Alert</a></li>
+          <li><a href="#alert-user-error" class="test-alert">Toggle User Error Alert</a></li>
+          <li><a href="#alert-announcement1" class="test-alert">Toggle Announcement Alert</a></li>
+          <li><a href="#alert-announcement2" class="test-alert">Toggle Announcement with Actions Alert</a></li>
+          <li><a href="#alert-activation" class="test-alert">Toggle Activiation Alert</a></li>
         </ul>
       </section>
 
@@ -225,11 +267,11 @@
         <h3 class="title-3">Different Static Examples of Notifications</h3>
 
         <ul>
-          <li><a href="#" class="test-notification">Toggle Change Warning Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle New Version Warning Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle Editing Warning Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle Saving Notification</a></li>
-          <li><a href="#" class="test-notification">Toggle Help Notification</a></li>
+          <li><a href="#notification-change" class="test-notification">Toggle Change Warning Notification</a></li>
+          <li><a href="#notification-version" class="test-notification">Toggle New Version Warning Notification</a></li>
+          <li><a href="#notification-dangerous" class="test-notification">Toggle Editing Warning Notification</a></li>
+          <li><a href="#notification-saving" class="test-notification">Toggle Saving Notification</a></li>
+          <li><a href="#notification-help" class="test-notification">Toggle Help Notification</a></li>
         </ul>
       </section>
     </article>
@@ -243,7 +285,7 @@
     
     <div class="copy">
       <h2 class="title title-3">You've Made Some Changes</h2>
-      <p><strong>Note:</strong> Your changes will not take effect until you <strong>save your progress</strong>.</p>
+      <p>Your changes will not take effect until you <strong>save your progress</strong>.</p>
     </div>
 
     <nav class="nav-actions">
@@ -314,7 +356,7 @@
 </div>
 
 <!-- notification: status - saving -->
-<div class="wrapper wrapper-notification wrapper-notification-status is-shown" id="notification-saving">
+<div class="wrapper wrapper-notification wrapper-notification-status" id="notification-saving">
   <div class="notification saving">
     <i class="ss-icon ss-symbolicons-block icon icon-saving">&#x2699;</i>
     
@@ -325,15 +367,20 @@
   </div>
 </div>
 
-<!-- notification: status - helper -->
-<div class="wrapper wrapper-notification wrapper-notification-helping" id="notification-helping">
-  <div class="notification helping">
-    <i class="ss-icon ss-symbolicons-block icon icon-helping">&#x2753;</i>
+<!-- notification: help - DYK -->
+<div class="wrapper wrapper-notification wrapper-notification-help" id="notification-help">
+  <div class="notification help">
+    <i class="ss-icon ss-symbolicons-block icon icon-help">&#x2753;</i>
     
     <div class="copy">
       <h2 class="title title-3">Fun Fact:</h2>
       <p>Using the checkmark will allow you make a subsection gradable as an assignment, which counts towards a student's total grade</p>
     </div>
+
+    <a href="#" rel="view" class="action action-notification-close">
+      <i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
+      <span class="label">close notification</span>
+    </a>
   </div>
 </div>
 </%block>
\ No newline at end of file