diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index 7dd349adb9..97d391525b 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -1,39 +1,251 @@
 .settings {
   .settings-overview {
     @extend .window;
-    padding: 30px 40px;
+    @include clearfix;
+    display: table;
+    width: 100%;
 
-    .details {
-      margin-bottom: 20px;
-      font-size: 14px;
+    .sidebar {
+      display: table-cell;
+      float: none;
+      width: 20%;
+      padding: 30px 0 30px 20px;
+      border-radius: 3px 0 0 3px;
+      background: $lightGrey;      
     }
 
-    .row {
-      margin-bottom: 20px;
-      padding-bottom: 0;
-      border-bottom: none;
+    .main-column {
+      display: table-cell;
+      float: none;
+      width: 80%;
+      padding: 30px 40px 30px 60px;
     }
 
     label {
       display: inline-block;
       width: 200px;
-      font-size: 14px;
+      font-size: 15px;
+      font-weight: 400;
 
       &.check-label {
         display: inline;
+        margin-left: 10px;
+      }
+
+      &.cutoff {
+        float: left;
+        width: 90px;
+        line-height: 38px;
+      }
+    }
+
+    input {
+      font-size: 15px;
+
+      &.long {
+        width: 400px;
+      }
+
+      &.short {
+        width: 100px;
+      }
+
+      &.date {
+        width: 140px;
+      }
+    }
+
+    .settings-page-section {
+      > section {
+        display: none;
+        margin-bottom: 40px;
+
+        &.is-shown {
+          display: block;
+        }
+
+        .row {
+          margin-bottom: 20px;
+          padding: 0;
+          border-bottom: none;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        > section {
+          padding-bottom: 40px;
+          margin-bottom: 40px;
+          border-radius: 3px;
+          border-bottom: 1px solid $mediumGrey;
+          @include clearfix;
+
+          &:last-child {
+            padding-bottom: 0;
+            border-bottom: none;
+          }
+        }
+      }
+    }
+
+    .settings-page-menu {
+      a {
+        display: block;
+        padding-left: 20px;
+        line-height: 52px;
+
+        &.is-shown {
+          background: #fff;
+          border-radius: 5px 0 0 5px;
+        }
       }
     }
   }
 
   h2 {
-    margin-bottom: 20px;
-    font-size: 24px;
-    font-weight: 300;   
+    margin-bottom: 30px;
+    font-size: 28px;
+    font-weight: 300;
+    color: $blue;
   }
 
-  section {
-    border-bottom: 1px solid $mediumGrey;
-    margin-bottom: 40px;
-    padding-bottom: 40px;
+  h3 {
+    margin-bottom: 20px;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 34px;
+    color: $blue;
+  }
+
+  .grade-slider {
+    float: left;
+    width: 500px;
+
+    .grade-bar {
+      position: relative;
+      width: 100%;
+      height: 40px;
+      background: $lightGrey;
+
+      .increments {
+        position: relative;
+
+        li {
+          position: absolute;
+          top: 42px;
+          width: 30px;
+          margin-left: -15px;
+          font-size: 9px;
+          text-align: center;
+
+          &.increment-0 {
+            left: 0;
+          }
+
+          &.increment-10 {
+            left: 10%;
+          }
+
+          &.increment-20 {
+            left: 20%;
+          }
+
+          &.increment-30 {
+            left: 30%;
+          }
+
+          &.increment-40 {
+            left: 40%;
+          }
+
+          &.increment-50 {
+            left: 50%;
+          }
+
+          &.increment-60 {
+            left: 60%;
+          }
+
+          &.increment-70 {
+            left: 70%;
+          }
+
+          &.increment-80 {
+            left: 80%;
+          }
+
+          &.increment-90 {
+            left: 90%;
+          }
+
+          &.increment-100 {
+            left: 100%;
+          }
+        }
+      }
+
+      .grades {
+        position: relative;
+
+        li {
+          position: absolute;
+          top: 0;
+          height: 40px;     
+          text-align: right;
+          color: rgba(0, 0, 0, .5);          
+
+          &.bar-a {
+            background: #4fe696;
+            width: 100%;
+          }
+
+          &.bar-b {
+            background: #ffdf7e;
+            width: 80%;
+          }
+
+          &.bar-c {
+            background: #ef68a6;
+            width: 70%;
+          }
+
+          .letter-grade {
+            display: block;
+            margin: 6px 5px 0 0;
+            font-size: 14px;
+            font-weight: 700;
+            line-height: 14px;
+          }
+
+          .range {
+            display: block;
+            margin-right: 5px;
+            font-size: 10px;
+            line-height: 12px;
+          }
+
+          .drag-bar {
+            position: absolute;
+            top: 0;
+            right: -1px;
+            height: 40px;
+            width: 2px;
+            background-color: #fff;
+            cursor: ew-resize;
+            @include transition(none);
+
+            &:hover {
+              width: 4px;
+              right: -2px;
+            }
+          }
+        }
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 8df3cede31..0d8f7f05b0 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -6,42 +6,181 @@
 <%namespace name='static' file='static_content.html'/>
 
 <%block name="jsextra">
+  <script type="text/javascript">
+    var $body;
+    var $gradeBar;
+    var $draggingBar;
+    var barOrigin;
+    var barWidth;
+    var gradeThresholds;
 
+    (function() {
+      $body = $('body');
+      $gradeBar = $('.grade-bar');
+      gradeThresholds = [100, 80, 70];
+      $('.settings-page-menu a').bind('click', showSettingsTab);
+      $('.drag-bar').bind('mousedown', startDragBar);
+    })();
+
+    function showSettingsTab(e) {
+      e.preventDefault();
+      $('.settings-page-section > section').hide();
+      $('.settings-' + $(this).attr('data-section')).show();
+      $('.settings-page-menu .is-shown').removeClass('is-shown');
+      $(e.target).addClass('is-shown');
+    }
+
+    function startDragBar(e) {
+      e.preventDefault();
+      barOrigin = $gradeBar.offset().left;
+      barWidth = $gradeBar.width();
+      $draggingBar = $(e.target).closest('li');
+      $body.bind('mousemove', moveBar);
+      $body.bind('mouseup', stopDragBar);
+    }
+
+    function moveBar(e) {
+      var percentage = (e.pageX - barOrigin) / barWidth * 100;
+      $draggingBar.css('width', percentage + '%');
+      gradeThresholds[$draggingBar.index()] = Math.round(percentage);
+      renderGradeRanges();
+    }
+
+    function stopDragBar(e) {
+      $body.unbind('mousemove', moveBar);
+      $body.unbind('mouseup', stopDragBar);
+    }
+
+    function renderGradeRanges() {
+      $('.range').each(function(i) {
+        var min = gradeThresholds[i + 1] || 0;
+        var max = gradeThresholds[i];
+        $(this).text(min + '–' + max);
+      });
+    }
+  </script>
 </%block>
 
 <%block name="content">
   <div class="main-wrapper">
-    <div class="inner-wrapper">
+    <div class="inner-wrapper">      
       <h1>Settings</h1>
       <article class="settings-overview">
-        <section>
-          <h2>Details</h2>
-          <div class="row">
-            <label>Course Name:</label>
-            <input type="text" class="course-name-input">
-          </div>
-          <div class="row">
-            <label>Organization:</label>
-            <input type="text" class="course-organization-input">
-          </div>
-          <div class="row">
-            <label>Course Number:</label>
-            <input type="text" class="course-number-input">
-          </div>
-        </section>
-        <section>
-          <h2>Grading</h2>
-          <div class="row">
-            <label>Course Name:</label>
-            <input type="text" class="course-name-input">
-          </div>
-        </section>
-        <section>
-          <h2>Problems</h2>
-          <div class="row">
-            <input type="checkbox" id="randomize-problems"><label for="randomize-problems" class="check-label">Randomize Problems</label>            
-          </div>
-        </section>
+        <div class="sidebar">
+          <nav class="settings-page-menu">
+            <ul>
+              <li><a href="#" class="is-shown" data-section="details">Course Details</a></li>
+              <li><a href="#" data-section="grading">Grading</a></li>
+              <li><a href="#" data-section="problems">Problems</a></li>
+            </ul>
+          </nav>
+        </div>
+        <div class="settings-page-section main-column">
+          <section class="settings-details">
+            <h2>Course Details</h2>
+            <div class="row">
+              <label>Course Name:</label>
+              <input type="text" class="course-name-input long">
+            </div>
+            <div class="row">
+              <label>Organization:</label>
+              <input type="text" class="course-organization-input long">
+            </div>
+            <div class="row">
+              <label>Course Number:</label>
+              <input type="text" class="course-number-input short">
+            </div>
+            <div class="row">
+              <label>Start Date:</label>
+              <input type="text" class="start-date-input date">
+            </div>
+            <div class="row">
+              <label>Enrollment End Date:</label>
+              <input type="text" class="start-date-input date">
+            </div>
+          </section>
+          <section class="is-shown 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>
+                </div>
+              </div>
+            </section>
+            <section>
+              <div class="row">
+                <label>Grace Period:</label>
+                <input type="text" class="grace-period">
+              </div>
+            </section>
+            <section>
+              <h3>Homework</h3>
+              <div class="row">
+                <label>Minimum Count:</label>
+                <input type="text" class="minimum-count-input short">
+              </div>
+              <div class="row">
+                <label>Drop Count:</label>
+                <input type="text" class="drop-count-input short">
+              </div>
+              <div class="row">
+                <label>Weight:</label>
+                <input type="text" class="weight-input short">
+              </div>
+            </section>
+            <section>
+              <h3>Lab</h3>
+              <div class="row">
+                <label>Minimum Count:</label>
+                <input type="text" class="minimum-count-input short">
+              </div>
+              <div class="row">
+                <label>Drop Count:</label>
+                <input type="text" class="drop-count-input short">
+              </div>
+              <div class="row">
+                <label>Weight:</label>
+                <input type="text" class="weight-input short">
+              </div>
+            </section>
+          </section>
+          <section class="settings-problems">
+            <h2>Problems</h2>
+            <div class="row">
+              <input type="checkbox" id="randomize-problems"><label for="randomize-problems" class="check-label">Randomize Problems</label>            
+            </div>
+          </section>
+        </div>
       </article>
     </div>
   </div>