diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index 97d391525b..0834a90893 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -32,10 +32,8 @@
         margin-left: 10px;
       }
 
-      &.cutoff {
-        float: left;
-        width: 90px;
-        line-height: 38px;
+      &.ranges {
+        margin-bottom: 20px;
       }
     }
 
@@ -115,16 +113,43 @@
   }
 
   h3 {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
     font-size: 15px;
     font-weight: 700;
-    line-height: 34px;
     color: $blue;
   }
 
+  .grade-controls {
+    @include clearfix;
+  }
+
+  .new-grade-button {
+    position: relative;
+    float: left;
+    display: block;
+    width: 29px;
+    height: 29px;
+    margin: 4px 10px 0 0;
+    border-radius: 20px;
+    border: 1px solid $darkGrey;
+    @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+    background-color: #d1dae3;
+    @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
+    color: #6d788b;
+
+    .plus-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -6px;
+      margin-top: -6px;
+    }
+  }
+
   .grade-slider {
     float: left;
-    width: 500px;
+    width: 560px;
+    height: 60px;
 
     .grade-bar {
       position: relative;
@@ -197,26 +222,46 @@
           top: 0;
           height: 40px;     
           text-align: right;
-          color: rgba(0, 0, 0, .5);          
 
-          &.bar-a {
+          &:hover,
+          &.is-dragging {
+            .remove-button {
+              display: block;
+            }
+          }
+
+          .remove-button {
+            display: none;
+            position: absolute;
+            top: -17px;
+            right: 1px;
+            height: 17px;
+            font-size: 10px;
+          }
+
+          &:nth-child(1) {
             background: #4fe696;
-            width: 100%;
           }
 
-          &.bar-b {
+          &:nth-child(2) {
             background: #ffdf7e;
-            width: 80%;
           }
 
-          &.bar-c {
-            background: #ef68a6;
-            width: 70%;
+          &:nth-child(3) {
+            background: #ffb657;
+          }
+
+          &:nth-child(4) {
+            background: #fb336c;
+          }
+
+          &:nth-child(5) {
+            background: #ef54a1;
           }
 
           .letter-grade {
             display: block;
-            margin: 6px 5px 0 0;
+            margin: 7px 5px 0 0;
             font-size: 14px;
             font-weight: 700;
             line-height: 14px;
@@ -225,7 +270,7 @@
           .range {
             display: block;
             margin-right: 5px;
-            font-size: 10px;
+            font-size: 9px;
             line-height: 12px;
           }
 
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 0d8f7f05b0..1630ad4ffa 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -13,15 +13,31 @@
     var barOrigin;
     var barWidth;
     var gradeThresholds;
+    var GRADES = ['A', 'B', 'C', 'D', 'E'];
 
     (function() {
       $body = $('body');
       $gradeBar = $('.grade-bar');
       gradeThresholds = [100, 80, 70];
       $('.settings-page-menu a').bind('click', showSettingsTab);
-      $('.drag-bar').bind('mousedown', startDragBar);
+      $body.on('mousedown', '.drag-bar', startDragBar);
+      $('.new-grade-button').bind('click', addNewGrade);
+      $body.on('click', '.remove-button', removeGrade);
     })();
 
+    function addNewGrade(e) {
+      e.preventDefault();
+      var $newGradeBar = $('<li style="width: 10%;"><span class="letter-grade" contenteditable>' + GRADES[$('.grades li').length] + '</span><span class="range"></span><a href="#" class="drag-bar"></a><a href="#" class="remove-button">remove</a></li>');
+      $('.grades').append($newGradeBar);
+    }
+
+    function removeGrade(e) {
+      e.preventDefault();
+      var index = $(this).closest('li').index();
+      gradeThresholds.splice(index, 1);
+      $(this).closest('li').remove();
+    }
+
     function showSettingsTab(e) {
       e.preventDefault();
       $('.settings-page-section > section').hide();
@@ -34,28 +50,33 @@
       e.preventDefault();
       barOrigin = $gradeBar.offset().left;
       barWidth = $gradeBar.width();
-      $draggingBar = $(e.target).closest('li');
+      $draggingBar = $(e.target).closest('li').addClass('is-dragging');
       $body.bind('mousemove', moveBar);
       $body.bind('mouseup', stopDragBar);
     }
 
     function moveBar(e) {
-      var percentage = (e.pageX - barOrigin) / barWidth * 100;
+      var barIndex = $draggingBar.index();
+      console.log(barIndex);
+      var min = gradeThresholds[barIndex + 1] || 0;
+      var max = gradeThresholds[barIndex - 1] || 100;
+      var percentage = Math.min(Math.max((e.pageX - barOrigin) / barWidth * 100, min), max);
       $draggingBar.css('width', percentage + '%');
       gradeThresholds[$draggingBar.index()] = Math.round(percentage);
       renderGradeRanges();
     }
 
     function stopDragBar(e) {
+      $draggingBar.removeClass('is-dragging');
       $body.unbind('mousemove', moveBar);
       $body.unbind('mouseup', stopDragBar);
     }
 
     function renderGradeRanges() {
       $('.range').each(function(i) {
-        var min = gradeThresholds[i + 1] || 0;
+        var min = gradeThresholds[i + 1] + 1 || 0;
         var max = gradeThresholds[i];
-        $(this).text(min + '–' + max);
+        $(this).text(min + '-' + max);
       });
     }
   </script>
@@ -76,7 +97,7 @@
           </nav>
         </div>
         <div class="settings-page-section main-column">
-          <section class="settings-details">
+          <section class="is-shown settings-details">
             <h2>Course Details</h2>
             <div class="row">
               <label>Course Name:</label>
@@ -99,41 +120,47 @@
               <input type="text" class="start-date-input date">
             </div>
           </section>
-          <section class="is-shown settings-grading">
+          <section class="settings-grading">
             <h2>Grading</h2>
             <section>
-              <label class="cutoff">Cutoffs:</label>
-              <div class="grade-slider">
-                <div class="grade-bar">
-                  <ol class="increments">
-                    <li class="increment-0">0</li>
-                    <li class="increment-10">10</li>
-                    <li class="increment-20">20</li>
-                    <li class="increment-30">30</li>
-                    <li class="increment-40">40</li>
-                    <li class="increment-50">50</li>
-                    <li class="increment-60">60</li>
-                    <li class="increment-70">70</li>
-                    <li class="increment-80">80</li>
-                    <li class="increment-90">90</li>
-                    <li class="increment-100">100</li>
-                  </ol>
-                  <ol class="grades">
-                    <li class="bar-a">
-                      <span class="letter-grade">A</span>
-                      <span class="range">80–100</span>                      
-                    </li>
-                    <li class="bar-b">
-                      <span class="letter-grade">B</span>
-                      <span class="range">70–80</span>
-                      <a href="#" class="drag-bar"></a>
-                    </li>
-                    <li class="bar-c">
-                      <span class="letter-grade">C</span>
-                      <span class="range">0–70</span>
-                      <a href="#" class="drag-bar"></a>
-                    </li>
-                  </ol>
+              <label class="ranges">Grade Ranges:</label>
+              <div class="grade-controls">
+                <a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
+                <div class="grade-slider">
+                  <div class="grade-bar">
+                    <ol class="increments">
+                      <li class="increment-0">0</li>
+                      <li class="increment-10">10</li>
+                      <li class="increment-20">20</li>
+                      <li class="increment-30">30</li>
+                      <li class="increment-40">40</li>
+                      <li class="increment-50">50</li>
+                      <li class="increment-60">60</li>
+                      <li class="increment-70">70</li>
+                      <li class="increment-80">80</li>
+                      <li class="increment-90">90</li>
+                      <li class="increment-100">100</li>
+                    </ol>
+                    <ol class="grades">
+                      <li class="bar-a" style="width: 100%;">
+                        <span class="letter-grade" contenteditable>A</span>
+                        <span class="range">81-100</span>
+                        <a href="#" class="remove-button">remove</a>
+                      </li>
+                      <li class="bar-b" style="width: 80%;">
+                        <span class="letter-grade" contenteditable>B</span>
+                        <span class="range">71-80</span>
+                        <a href="#" class="drag-bar"></a>
+                        <a href="#" class="remove-button">remove</a>
+                      </li>
+                      <li class="bar-c" style="width: 70%;">
+                        <span class="letter-grade" contenteditable>C</span>
+                        <span class="range">0-70</span>
+                        <a href="#" class="drag-bar"></a>
+                        <a href="#" class="remove-button">remove</a>
+                      </li>
+                    </ol>
+                  </div>
                 </div>
               </div>
             </section>