diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
index 3d11db02c3..55048b49dc 100644
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -93,36 +93,47 @@ form {
   }
 }
 
-// ====================
 
-// forms - archetype - add a new X form
-.new-form {
-    @extend .ui-window;
-    @include box-sizing(border-box);
-    position: relative;
-    width: 100%;
-    margin-bottom: ($baseline*2);
-    border-radius: 2px;
-    background: $white;
+// ELEM: form wrapper
+.wrapper-create-element {
+  height: 0;
+  margin-bottom: $baseline;
+  opacity: 0.0;
+  pointer-events: none;
+  overflow: hidden;
 
-  .wrapper-form {
-    padding: $baseline ($baseline*1.5);
+  &.animate {
+    @include transition(opacity $tmg-f1 ease-in-out 0s, height $tmg-f1 ease-in-out 0s);
   }
 
+  &.is-shown {
+    height: auto; // define a specific height for the animating version of this UI to work properly
+    opacity: 1.0;
+    pointer-events: auto;
+  }
+}
+
+// ELEM: form
+// form styling for creating a new content item (course, user, textbook)
+form[class^="create-"] {
+  @extend .ui-window;
+  @include box-sizing(border-box);
+  border-radius: 2px;
+  width: 100%;
+  background: $white;
+
   .title {
     @extend .t-title4;
-    font-weight: 700;
-    margin-bottom: $baseline;
-    border-bottom: 1px solid $gray-l4;
-    padding-bottom: ($baseline/2);
+    font-weight: 600;
+    padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
   }
 
   fieldset {
-      margin-bottom: $baseline;
+    padding: $baseline ($baseline*1.5);
   }
 
-  // form elements - need to make this more universal
-  .form-fields {
+
+  .list-input {
     @extend .cont-no-list;
 
     .field {
@@ -150,7 +161,7 @@ form {
 
       label {
         @extend  .t-copy-sub1;
-        @include transition(color, 0.15s, ease-in-out);
+        @include transition(color $tmg-f3 ease-in-out 0s);
         margin: 0 0 ($baseline/4) 0;
 
         &.is-focused {
@@ -158,8 +169,9 @@ form {
         }
       }
 
-      //this section is borrowed from _account.scss - we should clean up and unify later
+
       input, textarea {
+        @include transition(all $tmg-f2 ease-in-out 0s);
         @extend .t-copy-base;
         height: 100%;
         width: 100%;
@@ -173,23 +185,8 @@ form {
           width: 25%;
         }
 
-        ::-webkit-input-placeholder {
-           color: $gray-l4;
-        }
-
-        :-moz-placeholder {
-           color: $gray-l3;
-        }
-
-        ::-moz-placeholder {
-           color: $gray-l3;
-        }
-
-        :-ms-input-placeholder {
-           color: $gray-l3;
-        }
-
         &:focus {
+
           + .tip {
             color: $gray;
           }
@@ -219,45 +216,111 @@ form {
         color: $gray-l3;
       }
 
-      &.error {
+      .tip-error {
+        display: none;
+        float: none;
+      }
 
+      &.error {
         label {
           color: $red;
         }
 
+        .tip-error {
+          @extend .anim-fadeIn;
+          display: block;
+          color: $red;
+        }
+
         input {
           border-color: $red;
         }
       }
     }
+
+    .field-inline {
+
+      input, textarea, select {
+        width: 62%;
+        display: inline-block;
+      }
+
+      .tip-stacked {
+        display: inline-block;
+        float: right;
+        width: 35%;
+        margin-top: 0;
+      }
+
+      &.error {
+        .tip-error {
+        }
+      }
+
+    }
+
+    .field-group {
+      @include clearfix();
+      margin: 0 0 ($baseline/2) 0;
+
+      .field {
+        display: block;
+        width: 47%;
+        border-bottom: none;
+        margin: 0 ($baseline*0.75) 0 0;
+        padding: ($baseline/4) 0 0 0;
+        float: left;
+        position: relative;
+
+        &:nth-child(odd) {
+          float: left;
+        }
+
+        &:nth-child(even) {
+          float: right;
+          margin-right: 0;
+        }
+
+        input, textarea {
+          width: 100%;
+        }
+      }
+    }
   }
 
   .actions {
-    border-top: 1px solid $gray-l1;
-    padding: ($baseline*0.75) $baseline;
     box-shadow: inset 0 1px 2px $shadow;
+    margin-top: ($baseline*0.75);
+    border-top: 1px solid $gray-l1;
+    padding: ($baseline*0.75) ($baseline*1.5);
     background: $gray-l6;
 
     .action-primary {
       @include blue-button;
       @extend .t-action2;
-      @include transition(all $tmg-f2 linear 0);
+      @include transition(all .15s);
       display: inline-block;
       padding: ($baseline/5) $baseline;
       font-weight: 600;
+      text-transform: uppercase;
     }
 
     .action-secondary {
       @include grey-button;
       @extend .t-action2;
-      @include transition(all $tmg-f2 linear 0);
+      @include transition(all .15s);
       display: inline-block;
       padding: ($baseline/5) $baseline;
       font-weight: 600;
+      text-transform: uppercase;
     }
   }
 }
 
+
+
+
+
 // ====================
 
 // forms - grandfathered
diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss
index 514536ccca..633385309b 100644
--- a/cms/static/sass/views/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -3,7 +3,7 @@
 
 body.course.users {
 
-  // page layout
+  // LAYOUT: page
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
     float: left;
@@ -18,7 +18,7 @@ body.course.users {
     width: flex-grid(3, 12);
   }
 
-  // content
+  // ELEM: content
   .content {
 
     .introduction {
@@ -28,60 +28,15 @@ body.course.users {
   }
 
 
-  // new user form
-  .add-user {
-    @extend .new-form;
-    display: none;
+  // ELEM: new user form
+  .wrapper-create-user {
 
     &.is-shown {
-      display: block;
+      height: ($baseline*15);
     }
   }
 
-  // new user form (old)
-  .new-user-form {
-    display: none;
-    padding: ($baseline*0.75) $baseline;
-    background-color: $lightBluishGrey2;
-
-    #result {
-      display: none;
-      float: left;
-      margin-bottom: ($baseline*0.75);
-      padding: 3px ($baseline*0.75);
-      border-radius: 3px;
-      background: $red;
-      font-size: 14px;
-      color: $white;
-    }
-
-    .form-elements {
-      clear: both;
-    }
-
-    label {
-      display: inline-block;
-      margin-right: ($baseline/2);
-    }
-
-    .email-input {
-      width: 350px;
-      padding: 8px 8px 10px;
-      border-color: $gray-d1;
-    }
-
-    .add-button {
-      @include blue-button;
-      padding: ($baseline/4) $baseline 9px;
-    }
-
-    .cancel-button {
-      @include white-button;
-      padding: ($baseline/4) $baseline 9px;
-    }
-  }
-
-  // listing of users
+  // ELEM: listing of users
   .user-list, .user-item, .item-metadata, .item-actions {
     @include box-sizing(border-box);
   }
@@ -94,7 +49,7 @@ body.course.users {
       position: relative;
       width: flex-grid(9, 9);
       margin: 0 0 ($baseline/2) 0;
-      padding: $baseline ($baseline*1.5) $baseline ($baseline*1.5);
+      padding: ($baseline*1.25) ($baseline*1.5) $baseline ($baseline*1.5);
 
       &:last-child {
         margin-bottom: 0;
@@ -105,7 +60,7 @@ body.course.users {
         vertical-align: middle;
       }
 
-      // item - flag
+      // ELEM: item - flag
       .flag-role {
         @extend .ui-badge;
         color: $white;
@@ -130,7 +85,7 @@ body.course.users {
         }
       }
 
-      // item - metadata
+      // ELEM: item - metadata
       .item-metadata {
         width: flex-grid(5, 9);
         margin-right: flex-gutter();
@@ -153,7 +108,7 @@ body.course.users {
         }
       }
 
-      // item - actions
+      // ELEM: item - actions
       .item-actions {
         width: flex-grid(4, 9);
         position: static; // nasty reset needed due to base.scss
@@ -170,20 +125,26 @@ body.course.users {
 
         .action-delete {
 
+          // STATE: disabled
+          &.is-disabled {
+            opacity: 0.0;
+            visibility: hidden;
+            pointer-events: none;
+          }
         }
 
         .delete {
           @extend .ui-btn-non;
         }
 
-        // nasty reset needed due to base.scss
+        // HACK: nasty reset needed due to base.scss
         .delete-button {
           margin-right: 0;
           float: none;
           color: inherit;
         }
 
-        // admin role controls
+        // ELEM: admin role controls
         .toggle-admin-role {
 
           &.add-admin-role {
@@ -204,6 +165,11 @@ body.course.users {
             font-weight: 600;
           }
         }
+
+        .notoggleforyou {
+          @extend .t-copy-sub2;
+          color: $gray-l2;
+        }
       }
 
       // STATE: hover
diff --git a/cms/templates/manage_users.html b/cms/templates/manage_users.html
index 7ab8e912f7..48b68a2731 100644
--- a/cms/templates/manage_users.html
+++ b/cms/templates/manage_users.html
@@ -19,7 +19,7 @@
       <ul>
         %if allow_actions:
         <li class="nav-item">
-          <a href="#" class="button new-button new-user-button"><i class="icon-plus"></i> ${_("New User")}</a>
+          <a href="#" class="button new-button create-user-button"><i class="icon-plus"></i> ${_("New User")}</a>
         </li>
         %endif
       </ul>
@@ -38,24 +38,28 @@
 
     <article class="content-primary" role="main">
       %if allow_actions:
-      <form class="new-form add-user" id="add-user-form" name="add-user-form">
-        <div class="wrapper-form">
-          <h3 class="title">${_("Add a User to Your Course's Team")}</h3>
+      <div class="wrapper-create-element animate wrapper-create-user">
+        <form class="create-user" id="create-user-form" name="create-user-form">
+          <div class="wrapper-form">
+            <h3 class="title">${_("Add a User to Your Course's Team")}</h3>
 
-          <fieldset class="form-fields">
-            <legend class="sr">${_("Textbook information")}</legend>
-              <div class="field text required add-user-email">
-                <label for="user-email-input">${_("User's Email Address")}</label>
-                <input id="user-email-input" name="user-email" type="text" placeholder="${_('e.g. jane.doe@gmail.com')}" value="">
-                <span class="tip tip-stacked">${_("Please provide the email address of the course staff member you'd like to add")}</span>
-              </div>
-          </fieldset>
-        </div>
-        <div class="actions">
-          <button class="action action-primary" type="submit">${_("Add User")}</button>
-          <button class="action action-secondary action-cancel">${_("Cancel")}</button>
-        </div>
-      </form>
+            <fieldset class="form-fields">
+              <legend class="sr">${_("Textbook information")}</legend>
+                <ol class="list-input">
+                  <li class="field text required create-user-email">
+                    <label for="user-email-input">${_("User's Email Address")}</label>
+                    <input id="user-email-input" name="user-email" type="text" placeholder="${_('e.g. jane.doe@gmail.com')}" value="">
+                    <span class="tip tip-stacked">${_("Please provide the email address of the course staff member you'd like to add")}</span>
+                  </li>
+                </ol>
+            </fieldset>
+          </div>
+          <div class="actions">
+            <button class="action action-primary" type="submit">${_("Add User")}</button>
+            <button class="action action-secondary action-cancel">${_("Cancel")}</button>
+          </div>
+        </form>
+      </div>
       %endif
 
       <ol class="user-list">
@@ -107,7 +111,7 @@
           <ul  class="item-actions user-actions">
             <li class="action action-role">
               % if is_instuctor and len(instructors) == 1:
-                <span class="admin-role sr">${_("Admin (Since you are the only team member, you cannot remove your admin status.)")}</span>
+                <span class="admin-role notoggleforyou">${_("Promote another member to remove admin access")}</span>
               % else:
                 <a href="#" class="admin-role toggle-admin-role ${'remove' if is_instuctor else 'add'}-admin-role">${_("Remove Admin Access") if is_instuctor else _("Add Admin Access")}</a>
               % endif
@@ -150,8 +154,9 @@
     ))}"
 
   $(document).ready(function() {
-    var $newUserForm = $('#add-user-form');
-    $newUserForm.bind('submit', function(e) {
+    var $createUserForm = $('#create-user-form');
+    var $createUserFormWrapper = $createUserForm.closest('.wrapper-create-user');
+    $createUserForm.bind('submit', function(e) {
       e.preventDefault();
       var url = tplUserURL.replace("@@EMAIL@@", $('#user-email-input').val().trim())
       $.ajax({
@@ -191,19 +196,19 @@
       });
     });
 
-    var $cancelButton = $newUserForm.find('.action-cancel');
+    var $cancelButton = $createUserForm.find('.action-cancel');
     $cancelButton.bind('click', function(e) {
       e.preventDefault();
-      $('.new-user-button').removeClass('is-disabled');
-      $newUserForm.toggleClass('is-shown');
+      $('.create-user-button').removeClass('is-disabled');
+      $createUserFormWrapper.toggleClass('is-shown');
       $('#user-email-input').val('');
     });
 
-    $('.new-user-button').bind('click', function(e) {
+    $('.create-user-button').bind('click', function(e) {
       e.preventDefault();
       $(this).addClass('is-disabled');
-      $newUserForm.toggleClass('is-shown');
-      $newUserForm.find('#user-email-input').focus();
+      $createUserFormWrapper.toggleClass('is-shown');
+      $createUserForm.find('#user-email-input').focus();
     });
 
     $('body').bind('keyup', function(e) {