diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 9af785045f..a6e8190e17 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -62,10 +62,16 @@ $(document).ready(function () {
         $(this).closest('.wrapper-notification').removeClass('is-shown').addClass('is-hiding');
     });
 
-    // prompt close
-    $('.prompt .action-cancel').click(function(e) {
+    // prompt pop
+    $('.action-prompt').click(function(e){
         (e).preventDefault();
-        $(this).closest('.wrapper-prompt').removeClass('is-shown').addClass('is-hiding');
+        $body.toggleClass('prompt-is-shown');
+    });
+
+    // prompt close
+    $('.prompt .action-cancel, .prompt .action-proceed').click(function(e) {
+        (e).preventDefault();
+        $body.removeClass('prompt-is-shown');
     });
 
     // nav - dropdown related
diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/_alerts.scss
index a152db636a..c507034284 100644
--- a/cms/static/sass/_alerts.scss
+++ b/cms/static/sass/_alerts.scss
@@ -1,11 +1,35 @@
 // studio alerts and notifications
 // ====================
 
+// shared
+.wrapper-notification, .wrapper-alert, .prompt {
+  @include box-sizing(border-box);
+  background: $gray-d3;
+  border-top: 4px solid $gray-d4;
+
+  .copy {
+    @include font-size(13);
+    color: $gray-l2;
+
+    .title {
+      color: $white;
+    }
+
+    .nav-actions {
+
+      .action-primary {
+        color: $gray-d4;
+      }
+    }
+  }
+}
+
 // prompts
 .wrapper-prompt {
+  @include transition(all 0.05s ease-in-out);
   position: fixed;
   top: 0;
-  background: $black-t1;
+  background: $black-t0;
   width: 100%;
   height: 100%;
   text-align: center;
@@ -20,20 +44,80 @@
   }
 
   .prompt {
-    @include border-radius(3px);
-    @include box-sizing(border-box);
-    @include box-shadow(0 0 4px $shadow-d1);
+    @include border-radius(($baseline/5));
+    @include box-shadow(0 0 3px $shadow-d1);
     display: inline-block;
     vertical-align: middle;
-    width: $baseline*15;
-    padding: $baseline;
-    background: $white;
+    width: $baseline*17.5;
+    border: 4px solid $black;
+    text-align: left;
+
+    .copy {
+      border-top: 4px solid $blue;
+      padding: $baseline;
+    }
 
     .nav-actions {
+      @include box-shadow(inset 0 1px 2px $shadow-d1);
+      border-top: 1px solid $black-t1;
+      padding: ($baseline*0.75) $baseline;
+      background: $gray-d4;
 
       .nav-item {
+        display: inline-block;
+        margin-right: ($baseline*0.75);
 
+        &:last-child {
+          margin-right: 0;
+        }
       }
+
+      .action-primary {
+        @include blue-button();
+        @include font-size(13);
+        border-color: $blue-d2;
+        font-weight: 600;
+      }
+
+      .action-secondary {
+        @include font-size(13);
+      }
+    }
+  }
+
+  // types of prompts - error
+  .prompt.error {
+
+    .icon-error {
+      color: $red-l1;
+    }
+
+    .copy {
+      border-top-color: $red-l1;
+    }
+  }
+
+  // types of prompts - confirmation
+  .prompt.confirmation {
+
+    .icon-error {
+      color: $green;
+    }
+
+    .copy {
+      border-top-color: $green;
+    }
+  }
+
+  // types of prompts - error
+  .prompt.warning {
+
+    .icon-warning {
+      color: $orange;
+    }
+
+    .copy {
+      border-top-color: $orange;
     }
   }
 }
@@ -41,15 +125,12 @@
 // notifications
 .wrapper-notification {
   @include clearfix();
-  @include box-sizing(border-box);
   @include box-shadow(0 -1px 3px $shadow);
   position: fixed;
   bottom: 0;
   z-index: 1000;
   width: 100%;
-  border-top: 4px solid $gray-l1;
   padding: ($baseline*0.75) ($baseline*2);
-  background: $gray-d3;
 
   &.wrapper-notification-warning {
     border-top-color: $orange;
@@ -67,7 +148,7 @@
     }
   }
 
-  &.wrapper-cation-error {
+  &.wrapper-notification-error {
     border-top-color: $red-l1;
 
     .icon-error {
@@ -208,29 +289,6 @@
     }
   }
 
-  // with cancel
-  .action-notification-close {
-    @include border-top-radius(3px);
-    position: absolute;
-    top: -34px;
-    right: $baseline;
-    padding: ($baseline/5) ($baseline/2.5) 0 ($baseline/2.5);
-    background: $gray-l1;
-    text-align: center;
-
-    .label {
-      @include text-sr();
-    }
-
-    .icon {
-      @include font-size(14);
-      color: $white;
-      width: auto;
-      margin: 0;
-      padding: 2px;
-    }
-  }
-
   // with actions
   &.has-actions {
     
@@ -272,108 +330,17 @@
     }
   }
 
-  // notification types
-  &.warning {
-
-    .action-notification-close {
-      background: $orange;
-
-      &:hover {
-        background: $orange-s2;
-      }
-    }
-
-    .action-primary {
-      @include orange-button();
-      @include font-size(13);
-      border-color: $orange-d2;
-    }
-
-    a {
-      color: $orange;
-
-      &:hover {
-        color: $orange-s2;
-      }
-    }
-  }
-
-  &.error {
-
-    .action-notification-close {
-      background: $red-l1;
-
-      &:hover {
-        background: $red;
-      }
-    }
-
-    .action-primary {
-      @include red-button();
-      @include font-size(13);
-      border-color: $red-d2;
-    }
-
-    a {
-      color: $red-l1;
-
-      &:hover {
-        color: $red;
-      }
-    }
-  }
-
   &.confirmation {
 
     .copy {
       margin-top: ($baseline/5);
     }
-
-    .action-notification-close {
-      background: $green;
-
-      &:hover {
-        background: $green-s2;
-      }
-    }
-
-    .action-primary {
-      @include green-button();
-      @include font-size(13);
-      border-color: $green-d2;
-    }
-
-    a {
-      color: $green;
-
-      &:hover {
-        color: $green-s2;
-      }
-    }
-  }
-
-  &.announcement {
-
-    .action-notification-close {
-      background: $blue;
-
-      &:hover {
-        background: $blue-s1;
-      }
-    }
-
-    .action-primary {
-      @include blue-button();
-      @include font-size(13);
-      border-color: $blue-d2;
-    }
   }
 
   &.saving {
 
     .icon-saving {
       @include anim-rotateClockwise(3s, linear, infinite);
-
       width: 22px;
     }
 
@@ -559,12 +526,12 @@
 
   // with cancel
   .action-alert-close {
-    @include border-bottom-radius(3px);
+    @include border-bottom-radius(($baseline/5));
     position: absolute;
     top: -($baseline/10);
     right: $baseline;
     padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
-    background: $gray-d1;
+    background: $gray-d4;
     text-align: center;
 
     .label {
@@ -580,16 +547,20 @@
     }
 
     &:hover {
-      background: $gray-l1;
+      background: $gray-d1;
     }
   }
+}
 
-  // alert types
+.alert, .notification, .prompt {
+
+  // types - warning
   &.warning {
-  	
-    .action-primary {
+
+    .nav-actions .action-primary {
       @include orange-button();
       border-color: $orange-d2;
+      color: $gray-d4;
     }
 
     a {
@@ -601,9 +572,10 @@
     }
   }
 
+  // types - error
   &.error {
 
-    .action-primary {
+    .nav-actions .action-primary {
       @include red-button();
       border-color: $red-d2;
     }
@@ -617,9 +589,27 @@
     }
   }
 
+  // types - announcement
+  &.announcement {
+
+    .nav-actions .action-primary {
+      @include blue-button();
+      border-color: $blue-d2;
+    }
+
+    a {
+      color: $blue;
+
+      &:hover {
+        color: $blue-s2;
+      }
+    }
+  }
+
+  // types - confirmation
   &.confirmation {
 
-    .action-primary {
+    .nav-actions .action-primary {
       @include green-button();
       border-color: $green-d2;
     }
@@ -633,17 +623,10 @@
     }
   }
 
-  &.announcement {
-
-    .action-primary {
-      @include blue-button();
-      border-color: $blue-d2;
-    }
-  }
-
+  // types - step required
   &.step-required {
 
-    .action-primary {
+    .nav-actions .action-primary {
       border-color: $pink-d2;
       @include pink-button();
     }
@@ -661,28 +644,33 @@
 // js enabled
 .js {
 
+  // prompt set-up
   .wrapper-prompt {
-    display: none;
+    visibility: hidden;
+    pointer-events: none;
 
     .prompt {
-      @include anim-bounceIn(0.5s);
-      opacity: 0.1;
+      opacity: 0;
+    }
+  }
+
+  // prompt showing
+  &.prompt-is-shown {
+
+    .wrapper-view {
+      -webkit-filter: blur(2px) grayscale(25%);
+      filter: blur(2px) grayscale(25%);
     }
 
-    &.is-shown {
-      display: block;
+    .wrapper-prompt.is-shown {
+      visibility: visible;
+      pointer-events: auto;
 
       .prompt {
+        @include anim-bounceIn(0.5s);
         opacity: 1.0;
       }
     }
-
-    &.is-hiding {
-
-      .prompt {
-        @include anim-bounceOut(0.5s);
-      }
-    }
   }
 
   .wrapper-alert {
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index d5a8adc6cb..5fd05d27a6 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -103,6 +103,13 @@ p, ul, ol, dl {
 
 // ====================
 
+// layout - basic
+.wrapper-view {
+
+}
+
+// ====================
+
 // layout - basic page header
 .wrapper-mast {
   margin: 0;
diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/_keyframes.scss
index 817dc27132..a756f66b2e 100644
--- a/cms/static/sass/_keyframes.scss
+++ b/cms/static/sass/_keyframes.scss
@@ -17,12 +17,14 @@
 @-o-keyframes rotateClockwise { @include rotateClockwise(); }
 @keyframes rotateClockwise { @include rotateClockwise();}
 
-@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1) {
+@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
   @include animation-name(rotateClockwise);
   @include animation-duration($duration);
+  @include animation-delay($delay);
   @include animation-timing-function($timing);
-  @include animation-fill-mode(both);
   @include animation-iteration-count($count);
+  @include animation-fill-mode(both);
+
 }
 
 // ====================
@@ -47,12 +49,14 @@
 @-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
 @keyframes notificationsSlideUp { @include notificationsSlideUp();}
 
-@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1) {
+@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
   @include animation-name(notificationsSlideUp);
   @include animation-duration($duration);
+  @include animation-delay($delay);
   @include animation-timing-function($timing);
-  @include animation-fill-mode(both);
   @include animation-iteration-count($count);
+  @include animation-fill-mode(both);
+
 }
 
 // ====================
@@ -77,12 +81,13 @@
 @-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
 @keyframes notificationsSlideDown { @include notificationsSlideDown();}
 
-@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1) {
+@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
   @include animation-name(notificationsSlideDown);
   @include animation-duration($duration);
+  @include animation-delay($delay);
   @include animation-timing-function($timing);
-  @include animation-fill-mode(both);
   @include animation-iteration-count($count);
+  @include animation-fill-mode(both);
 }
 
 // ====================
@@ -107,12 +112,13 @@
 @-o-keyframes notificationsSlideUpDown { @include notificationsSlideUpDown(); }
 @keyframes notificationsSlideUpDown { @include notificationsSlideUpDown();}
 
-@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1) {
+@mixin anim-notificationsSlideUpDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
   @include animation-name(notificationsSlideUpDown);
   @include animation-duration($duration);
+  @include animation-delay($delay);
   @include animation-timing-function($timing);
-  @include animation-fill-mode(both);
   @include animation-iteration-count($count);
+  @include animation-fill-mode(both);
 }
 
 // ====================
@@ -139,12 +145,13 @@
 @-o-keyframes bounceIn { @include bounceIn(); }
 @keyframes bounceIn { @include bounceIn();}
 
-@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1) {
+@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
   @include animation-name(bounceIn);
   @include animation-duration($duration);
+  @include animation-delay($delay);
   @include animation-timing-function($timing);
-  @include animation-fill-mode(both);
   @include animation-iteration-count($count);
+  @include animation-fill-mode(both);
 }
 
 // ====================
@@ -185,10 +192,11 @@
 @-o-keyframes bounceOut { @include bounceOut(); }
 @keyframes bounceOut { @include bounceOut();}
 
-@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1) {
+@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
   @include animation-name(bounceOut);
   @include animation-duration($duration);
+  @include animation-delay($delay);
   @include animation-timing-function($timing);
-  @include animation-fill-mode(both);
   @include animation-iteration-count($count);
+  @include animation-fill-mode(both);
 }
\ No newline at end of file
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 35f39fcd3a..7998d0b199 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -16,10 +16,12 @@ $error-red: rgb(253, 87, 87);
 
 // colors - new for re-org
 $black: rgb(0,0,0);
+$black-t0: rgba(0,0,0,0.125);
 $black-t1: rgba(0,0,0,0.25);
 $black-t2: rgba(0,0,0,0.50);
 $black-t3: rgba(0,0,0,0.75);
 $white: rgb(255,255,255);
+$white-t0: rgba(255,255,255,0.125);
 $white-t1: rgba(255,255,255,0.25);
 $white-t2: rgba(255,255,255,0.50);
 $white-t3: rgba(255,255,255,0.75);
diff --git a/cms/templates/alerts.html b/cms/templates/alerts.html
index 9b5ba70411..12c605d863 100644
--- a/cms/templates/alerts.html
+++ b/cms/templates/alerts.html
@@ -37,15 +37,15 @@
         $(this.hash).addClass('is-shown');
     });
 
-    $('.hide-prompt').click(function(e) {
-        (e).preventDefault();          
-        $('.wrapper-prompt').removeClass('is-hiding is-shown');
-        $(this.hash).addClass('is-hiding');
+    $('.hide-prompt').click(function(e){
+        (e).preventDefault();
+        $body.removeClass('prompt-is-shown');
     });
 
     $('.show-prompt').click(function(e) {
-        (e).preventDefault();          
-        $('.wrapper-prompt').removeClass('is-shown is-hiding');
+        (e).preventDefault();
+        $body.toggleClass('prompt-is-shown');      
+        $('.wrapper-prompt').removeClass('is-shown');
         $(this.hash).addClass('is-shown');
     });
   });
@@ -53,6 +53,122 @@
 </%block>
 
 <%block name="content">
+<div class="edit-subsection-publish-settings">
+  <div class="settings">
+    <h3>Section Release Date</h3>
+    <div class="picker datepair">
+      <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
+      <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
+      <div class="description">
+        <p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
+      </div>
+    </div>
+    <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
+  </div>
+</div>
+
+<div class="wrapper-mast wrapper">
+  <header class="mast has-actions has-subtitle">
+    <div class="title">
+      <span class="title-sub">UX Design</span>
+      <h1 class="title-1">Alerts &amp; Notifications</h1>
+    </div>
+  </header>
+</div>
+
+<div class="wrapper-content wrapper">
+  <section class="content">
+    <article class="content-primary" role="main">
+      <section>
+        <header>
+          <h2 class="title-2">Alerts</h2>
+          <span class="tip">persistant, static messages to the user</span>
+        </header>
+
+        <p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
+
+        <h3 class="title-3">Different Static Examples of Alerts</h3>
+        <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="#alert-draft" class="show-alert">Show Draft</a></li>
+          <li><a href="#alert-version" class="show-alert">Show Version</a></li>
+          <li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
+          <li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
+          <li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
+          <li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
+          <li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
+          <li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
+          <li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
+          <li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
+        </ul>
+      </section>
+
+      <section>
+        <header>
+          <h2 class="title-2">Notifications</h2>
+          <span class="tip">contextual, feedback-based, and temporal messages to the user</span>
+        </header>
+
+        <p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
+
+        <h3 class="title-3">Different Static Examples of Notifications</h3>
+
+        <ul>
+          <li>
+            <a href="#notification-change" class="show-notification">Show Change Warning</a>
+            <a href="#notification-change" class="hide-notification">Hide Change Warning</a>
+          </li>
+          <li>
+            <a href="#notification-version" class="show-notification">Show New Version Warning</a>
+            <a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
+          </li>
+          <li>
+            <a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
+            <a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
+          </li>
+          <li>
+            <a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
+          </li>
+          <li>
+            <a href="#notification-saving" class="show-notification">Show Saving</a>
+            <a href="#notification-saving" class="hide-notification">Hide Saving</a>
+          </li>
+          <li>
+            <a href="#notification-help" class="show-notification">Show Help</a>
+            <a href="#notification-help" class="hide-notification">Hide Help</a>
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <header>
+          <h2 class="title-2">Prompts</h2>
+          <span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
+        </header>
+
+        <p>In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).</p>
+
+        <h3 class="title-3">Different Static Examples of Prompts</h3>
+
+        <ul>
+          <li>
+            <a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
+          </li>
+          <li>
+            <a href="#prompt-warning" class="show-prompt">Show Warning Prompt</a>
+          </li>
+          <li>
+            <a href="#prompt-error" class="show-prompt">Show Error Prompt</a>
+          </li>
+        </ul>
+      </section>
+    </article>
+  </section>
+</div>
+</%block>
+
+<%block name="view_alerts">
 <!-- alert: you're editing a draft -->
 <div class="wrapper wrapper-alert wrapper-alert-warning" id="alert-draft">
   <div class="alert warning has-actions">
@@ -234,115 +350,9 @@
     </nav>
   </div>
 </div>
+</%block>
 
-<div class="edit-subsection-publish-settings">
-  <div class="settings">
-    <h3>Section Release Date</h3>
-    <div class="picker datepair">
-      <input class="start-date date" type="text" name="start_date" value="" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
-      <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
-      <div class="description">
-        <p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
-      </div>
-    </div>
-    <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
-  </div>
-</div>
-
-<div class="wrapper-mast wrapper">
-  <header class="mast has-actions has-subtitle">
-    <div class="title">
-      <span class="title-sub">UX Design</span>
-      <h1 class="title-1">Alerts &amp; Notifications</h1>
-    </div>
-  </header>
-</div>
-
-<div class="wrapper-content wrapper">
-  <section class="content">
-    <article class="content-primary" role="main">
-      <section>
-        <header>
-          <h2 class="title-2">Alerts</h2>
-          <span class="tip">persistant, static messages to the user</span>
-        </header>
-
-        <p>In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.</p>
-
-        <h3 class="title-3">Different Static Examples of Alerts</h3>
-        <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="#alert-draft" class="show-alert">Show Draft</a></li>
-          <li><a href="#alert-version" class="show-alert">Show Version</a></li>
-          <li><a href="#alert-saved" class="show-alert">Show Previous View/Action</a></li>
-          <li><a href="#alert-close" class="show-alert">Show Alert with Close Option</a></li>
-          <li><a href="#alert-removed" class="show-alert">Show Previous View/Action Removed</a></li>
-          <li><a href="#alert-system-error" class="show-alert">Show System Error</a></li>
-          <li><a href="#alert-user-error" class="show-alert">Show User Error</a></li>
-          <li><a href="#alert-announcement2" class="show-alert">Show Announcement</a></li>
-          <li><a href="#alert-announcement1" class="show-alert">Show Announcement with Actions</a></li>
-          <li><a href="#alert-activation" class="show-alert">Show Activiation</a></li>
-        </ul>
-      </section>
-
-      <section>
-        <header>
-          <h2 class="title-2">Notifications</h2>
-          <span class="tip">contextual, feedback-based, and temporal messages to the user</span>
-        </header>
-
-        <p>In Studio, notifications are meant to inform the user of 1) any system status (e.g. saving, processing/validating) occurring based on any action they have taken or 2) any decisions (e.g. saving/discarding) a user must make to confirm.</p>
-
-        <h3 class="title-3">Different Static Examples of Notifications</h3>
-
-        <ul>
-          <li>
-            <a href="#notification-change" class="show-notification">Show Change Warning</a>
-            <a href="#notification-change" class="hide-notification">Hide Change Warning</a>
-          </li>
-          <li>
-            <a href="#notification-version" class="show-notification">Show New Version Warning</a>
-            <a href="#notification-version" class="hide-notification">Hide New Version Warning</a>
-          </li>
-          <li>
-            <a href="#notification-dangerous" class="show-notification">Show Editing Warning</a>
-            <a href="#notification-dangerous" class="hide-notification">Hide Editing Warning</a>
-          </li>
-          <li>
-            <a href="#notification-confirmation" class="show-notification-fleeting">Show Confirmation (Fleeting Notification)</a>
-          </li>
-          <li>
-            <a href="#notification-saving" class="show-notification">Show Saving</a>
-            <a href="#notification-saving" class="hide-notification">Hide Saving</a>
-          </li>
-          <li>
-            <a href="#notification-help" class="show-notification">Show Help</a>
-            <a href="#notification-help" class="hide-notification">Hide Help</a>
-          </li>
-        </ul>
-      </section>
-
-      <section>
-        <header>
-          <h2 class="title-2">Prompts</h2>
-          <span class="tip">presents a user with a choice, based on their previous interaction, that must be decided before they can proceed</span>
-        </header>
-
-        <p>In Studio, prompts are dialogs that are presented above all other page components and present a user with a choice, based on their previous interaction, that must be decided before they can proceed (or return to the previous interaction step).</p>
-
-        <h3 class="title-3">Different Static Examples of Notifications</h3>
-
-        <ul>
-          <li>
-            <a href="#prompt-confirm" class="show-prompt">Show Confirm Prompt</a>
-          </li>
-        </ul>
-      </section>
-    </article>
-  </section>
-</div>
-
+<%block name="view_notifications">
 <!-- notification: change has been made and a save is needed -->
 <div class="wrapper wrapper-notification wrapper-notification-change" id="notification-change">
   <div class="notification change has-actions">
@@ -388,11 +398,6 @@
         </li>
       </ul>
     </nav>
-    
-    <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>
 
@@ -458,22 +463,66 @@
     </a>
   </div>
 </div>
+</%block>
 
-<!-- prompt: confirm -->
+<%block name="view_prompts">
+<!-- prompt - confirm deletion -->
 <div class="wrapper wrapper-prompt wrapper-prompt-confirm" id="prompt-confirm">
   <div class="prompt confirm">
     <div class="copy">
-      <h2 class="title title-3">Are You Sure You Want to Do That?</h2>
+      <h2 class="title title-3">Delete "Introduction &amp; Overview"?</h2>
+      <p>Deleting a section cannot be undone and its contents cannot be recovered.</p>
     </div>
 
     <nav class="nav-actions">
       <h3 class="sr">Prompt Actions</h3>
       <ul>
         <li class="nav-item">
-          <a href="#" class="action-primary action-proceed">Yes</a>
+          <a href="#" class="action-primary action-proceed">Yes, delete this section</a>
         </li>
         <li class="nav-item">
-          <a href="#" class="action-secondary action-cancel">No</a>
+          <a href="#" class="action-secondary action-cancel">Cancel</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
+
+<!-- prompt - warning -->
+<div class="wrapper wrapper-prompt wrapper-prompt-warning" id="prompt-warning">
+  <div class="prompt warning">
+    <div class="copy">
+      <h2 class="title title-3">Use Advanced Problem Editor?</h2>
+      <p>If you proceed, you cannot edit this problem using the simple problem editor.</p>
+    </div>
+
+    <nav class="nav-actions">
+      <h3 class="sr">Prompt Actions</h3>
+      <ul>
+        <li class="nav-item">
+          <a href="#" class="action-primary action-proceed">Continue to Advanced Editor</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="action-secondary action-cancel">Cancel</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
+
+<!-- prompt - error -->
+<div class="wrapper wrapper-prompt wrapper-prompt-error" id="prompt-error">
+  <div class="prompt error">
+    <div class="copy">
+      <h2 class="title title-3">There Were Errors in Your Submission</h2>
+      <p>Please correct the errors noted on the page and try again.</p>
+    </div>
+
+    <nav class="nav-actions">
+      <h3 class="sr">Prompt Actions</h3>
+      <ul>
+        <li class="nav-item">
+          <a href="#" class="action-primary action-proceed">Correct errors &amp; try again</a>
         </li>
       </ul>
     </nav>
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 498897bd11..387b45a0d1 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -6,12 +6,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>
-        <%block name="title"></%block> | 
-        % if context_course:
-        <% ctx_loc = context_course.location %>
-        ${context_course.display_name} | 
-        % endif
-        edX Studio
+    <%block name="title"></%block> | 
+    % if context_course:
+      <% ctx_loc = context_course.location %>
+      ${context_course.display_name} | 
+      % endif
+      edX Studio
     </title>
 
     <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -22,14 +22,13 @@
     <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
     <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
     <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
-   
+
     <%block name="header_extras"></%block>
   </head>
 
   <body class="<%block name='bodyclass'></%block> hide-wip">
-    <%include file="widgets/header.html" />
-    <%include file="courseware_vendor_js.html"/>
 
+    <%include file="courseware_vendor_js.html"/>
     <script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
@@ -48,15 +47,23 @@
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
     <script type="text/javascript">
-      document.write('\x3Cscript type="text/javascript" src="' +
-          document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
+    document.write('\x3Cscript type="text/javascript" src="' +
+      document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
     </script>
 
-    <%block name="content"></%block>
-    <%include file="widgets/footer.html" />
+    <!-- view -->
+    <div class="wrapper wrapper-view">    
+      <%include file="widgets/header.html" />
+
+      <%block name="view_alerts"></%block>
+
+      <%block name="content"></%block>
+      <%include file="widgets/footer.html" />
+      <%block name="view_notifications"></%block>
+    </div>
+
+    <%block name="view_prompts"></%block>
 
     <%block name="jsextra"></%block>
   </body>
-</html>
-
-
+</html>
\ No newline at end of file