diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
index b4db2f096e..5a99bc781d 100644
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -47,6 +47,20 @@
 	}
 }
 
+@mixin green-button {
+	@include button;
+	border: 1px solid #0d7011;
+	border-radius: 3px;
+	@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	background-color: $green;
+	color: #fff;
+
+	&:hover {
+		background-color: #129416;
+		color: #fff;
+	}
+}
+
 @mixin white-button {
 	@include button;
 	border: 1px solid $darkGrey;
@@ -242,3 +256,14 @@
 		}
 	}
 }
+
+@mixin sr-text {
+	border: 0; 
+	clip: rect(0 0 0 0); 
+	height: 1px; 
+	margin: -1px; 
+	overflow: hidden; 
+	padding: 0; 
+	position: absolute; 
+	width: 1px;
+}
diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
index 37c9ca9036..1042f8e3ee 100644
--- a/cms/static/sass/_courseware.scss
+++ b/cms/static/sass/_courseware.scss
@@ -35,39 +35,6 @@ input.courseware-unit-search-input {
 		margin-left: 10px;
 	}
 
-	.section-published-date {
-		position: absolute;
-		top: 19px;
-		right: 90px;
-		padding: 4px 10px;
-		border-radius: 3px;
-		background: $lightGrey;
-		text-align: right;
-
-		.published-status {
-			font-size: 12px;
-			margin-right: 15px;
-
-			strong {
-				font-weight: 700;
-			}
-		}
-
-		.schedule-button {
-			@include blue-button;
-		}
-
-		.edit-button {
-			@include blue-button;
-		}
-
-		.schedule-button,
-		.edit-button {
-			font-size: 11px;
-			padding: 3px 15px 5px;
-		}
-	}
-
 	.datepair .date,
 	.datepair .time {
 		padding-left: 0;
@@ -76,7 +43,7 @@ input.courseware-unit-search-input {
 		background: none;
 		@include box-shadow(none);
 		font-size: 13px;
-		font-weight: 700;
+		font-weight: bold;
 		color: $blue;
 		cursor: pointer;
 	}
@@ -96,14 +63,198 @@ input.courseware-unit-search-input {
 	}
 
 	header {
-		height: 75px;
+		min-height: 75px;
+		@include clearfix();
+
+		.item-details, .section-published-date {
 
-		.item-details {
-			float: left;
-			padding: 21px 0 0;
 		}
 
-		.item-actions {			
+		.item-details {
+			float: none;
+			display: inline-block;
+			padding: 20px 0 10px 0;
+			@include clearfix();
+
+			.section-name {
+				float: left;
+				margin-right: 10px;
+				width: 350px;
+				font-size: 19px;
+				font-weight: bold;
+				color: $blue;
+			}
+
+			.section-name-span {
+				cursor: pointer;
+				@include transition(color .15s);
+
+				&:hover {
+					color: $orange;
+				}
+			}
+
+			.section-name-edit {
+				position: relative;
+				width: 400px;
+				background: $white;
+
+				input {
+					font-size: 16px;	
+				}
+				
+				.save-button {
+					@include blue-button;
+					padding: 7px 20px 7px;
+					margin-right: 5px;
+				}
+
+				.cancel-button {
+					@include white-button;
+					padding: 7px 20px 7px;
+				}
+			}
+
+			.section-published-date {
+				float: right;
+				width: 265px;
+				margin-right: 220px;
+				padding: 4px 10px;
+				@include border-radius(3px);
+				background: $lightGrey;
+
+				.published-status {
+					font-size: 12px;
+					margin-right: 15px;
+
+					strong {
+						font-weight: bold;
+					}
+				}
+
+				.schedule-button {
+					@include blue-button;
+				}
+
+				.edit-button {
+					@include blue-button;
+				}
+
+				.schedule-button,
+				.edit-button {
+					font-size: 11px;
+					padding: 3px 15px 5px;
+				}
+			}
+		}
+
+		.gradable-status {
+			position: absolute;
+			top: 20px;
+			right: 70px;
+			width: 145px;
+
+			.status-label {
+				position: absolute;
+				top: 0;
+				right: 2px;
+				display: none;
+				width: 100px;
+				padding: 10px 35px 10px 10px;
+				@include border-radius(3px);
+				background: $lightGrey;
+				color: $lightGrey;
+				text-align: right;
+				font-size: 12px;
+				font-weight: bold;
+				line-height: 16px;
+			}
+
+			.menu-toggle {
+				z-index: 10;
+				position: absolute;
+				top: 2px;
+				right: 5px;
+				padding: 5px;
+				color: $lightGrey;
+
+				&:hover, &.is-active {
+					color: $blue;
+				}
+			}
+
+			.menu {
+				z-index: 1;
+				display: none;
+				opacity: 0.0;
+				position: absolute;
+				top: -1px;
+				left: 2px;
+				margin: 0;
+				padding: 8px 12px;
+				background: $white;
+				border: 1px solid $mediumGrey;
+				font-size: 12px;
+				@include border-radius(4px);
+				@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+				@include transition(opacity .15s);
+				@include transition(display .15s);
+
+
+				li {
+					width: 115px;
+					margin-bottom: 3px;
+					padding-bottom: 3px;
+					border-bottom: 1px solid $lightGrey;
+
+					&:last-child {
+						margin-bottom: 0;
+						padding-bottom: 0;
+						border: none;
+
+						a {
+							color: $darkGrey;
+						}
+					}
+				}
+
+				a {
+
+					&.is-selected {
+						font-weight: bold;
+					}
+				}
+			}
+
+			// dropdown state
+			&.is-active {
+
+				.menu {
+					z-index: 1000;
+					display: block;
+					opacity: 1.0;
+				}
+
+				.menu-toggle {
+					z-index: 10000;
+				}
+			}
+
+			// set state
+			&.is-set {
+
+				.menu-toggle {
+					color: $blue;
+				}
+
+				.status-label {
+					display: block;
+					color: $blue;
+				}
+			}
+		}
+
+		.item-actions {	
 			margin-top: 21px;
 			margin-right: 12px;
 
@@ -122,13 +273,6 @@ input.courseware-unit-search-input {
 		.drag-handle {
 			margin-left: 11px;
 		}
-	}
-
-	h3 {
-		font-size: 19px;
-		font-weight: 700;
-		color: $blue;
-	}
 
 	.section-name-span {
 		cursor: pointer;
@@ -160,8 +304,9 @@ input.courseware-unit-search-input {
 		font-size: 12px;
 		color: #878e9d;
 
-		strong {
-			font-weight: 700;
+			strong {
+				font-weight: bold;
+			}
 		}
 	}
 
@@ -178,12 +323,130 @@ input.courseware-unit-search-input {
 			@include tree-view;
 			border-top-width: 0;
 		}
+
+		.branch {
+
+			.section-item {
+				@include clearfix();
+
+				.details {
+					float: left;
+					width: 650px;
+				}
+
+				.gradable-status {
+					float: right;
+					position: relative;
+					top: -4px;
+					right: 50px;
+					width: 145px;
+
+					.status-label {
+						position: absolute;
+						top: 2px;
+						right: -5px;
+						display: none;
+						width: 110px;
+						padding: 5px 40px 5px 10px;
+						@include border-radius(3px);
+						color: $lightGrey;
+						text-align: right;
+						font-size: 12px;
+						font-weight: bold;
+						line-height: 16px;
+					}
+
+					.menu-toggle {
+						z-index: 10;
+						position: absolute;
+						top: 0;
+						right: 5px;
+						padding: 5px;
+						color: $mediumGrey;
+
+						&:hover, &.is-active {
+							color: $blue;
+						}
+					}
+
+					.menu {
+						z-index: 1;
+						display: none;
+						opacity: 0.0;
+						position: absolute;
+						top: -1px;
+						left: 5px;
+						margin: 0;
+						padding: 8px 12px;
+						background: $white;
+						border: 1px solid $mediumGrey;
+						font-size: 12px;
+						@include border-radius(4px);
+						@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+						@include transition(opacity .15s);
+
+
+						li {
+							width: 115px;
+							margin-bottom: 3px;
+							padding-bottom: 3px;
+							border-bottom: 1px solid $lightGrey;
+
+							&:last-child {
+								margin-bottom: 0;
+								padding-bottom: 0;
+								border: none;
+
+								a {
+									color: $darkGrey;
+								}
+							}
+						}
+
+						a {
+							color: $blue;
+
+							&.is-selected {
+								font-weight: bold;
+							}
+						}
+					}
+
+					// dropdown state
+					&.is-active {
+
+						.menu {
+							z-index: 1000;
+							display: block;
+							opacity: 1.0;
+						}
+
+						.menu-toggle {
+							z-index: 10000;
+						}
+					}
+
+					// set state
+					&.is-set {
+
+						.menu-toggle {
+							color: $blue;
+						}
+
+						.status-label {
+							display: block;
+							color: $blue;
+						}
+					}
+				}
+			}
+		}
 	}
 
 	&.new-section {
 		header {
 			height: auto;
-			@include clearfix;
+			@include clearfix();
 		}
 
 		.expand-collapse-icon {
@@ -270,7 +533,7 @@ input.courseware-unit-search-input {
 	}
 
 	strong {
-		font-weight: 700;
+		font-weight: bold;
 	}
 
 	.start-date,
diff --git a/cms/static/sass/_subsection.scss b/cms/static/sass/_subsection.scss
index 0d7d518ffd..116c887e10 100644
--- a/cms/static/sass/_subsection.scss
+++ b/cms/static/sass/_subsection.scss
@@ -137,8 +137,7 @@
 
 	a {
 		font-size: 11px;
-		font-weight: 700;
-		line-height: 31px;
+		font-weight: bold;
 		text-transform: uppercase;
 	}
 
@@ -180,3 +179,109 @@
 		}
 	}
 }
+
+.gradable {
+
+	label {
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	.gradable-status {
+		position: relative;
+		top: -4px;
+		display: inline-block;
+		margin-left: 10px;
+		width: 65%;
+
+		.status-label {
+			margin: 0;
+			padding: 0;
+			background: transparent;
+			color: $blue;
+			border: none;
+			font-size: 11px;
+			font-weight: bold;
+			text-transform: uppercase;
+		}
+
+		.menu-toggle {
+			z-index: 100;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 20px;
+			background: transparent;
+
+			&:hover, &.is-active {
+				color: $blue;
+			}
+		}
+
+		.menu {
+			z-index: 1;
+			position: absolute;
+			top: -12px;
+			left: -7px;
+			display: none;
+			width: 100%;
+			margin: 0;
+			padding: 8px 12px;
+			opacity: 0.0;
+			background: $white;
+			border: 1px solid $mediumGrey;
+			font-size: 12px;
+			@include border-radius(4px);
+			@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+			@include transition(opacity .15s);
+
+
+			li {
+				margin-bottom: 3px;
+				padding-bottom: 3px;
+				border-bottom: 1px solid $lightGrey;
+
+				&:last-child {
+					margin-bottom: 0;
+					padding-bottom: 0;
+					border: none;
+				}
+			}
+
+			a {
+
+				&.is-selected {
+					font-weight: bold;
+				}
+			}
+		}
+
+		// dropdown state
+		&.is-active {
+
+			.menu {
+				z-index: 10000;
+				display: block;
+				opacity: 1.0;
+			}
+
+			.menu-toggle {
+				z-index: 1000;
+			}
+		}
+
+		// set state
+		&.is-set {
+
+			.menu-toggle {
+				color: $blue;
+			}
+
+			.status-label {
+				display: block;
+				color: $blue;
+			}
+		}
+	}
+	}
\ No newline at end of file
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 8666dc192c..e9876b2f55 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -10,11 +10,20 @@ $fg-min-width: 810px;
 $sans-serif: 'Open Sans', $verdana;
 $body-line-height: golden-ratio(.875em, 1);
 
+$white: rgb(255,255,255);
+$black: rgb(0,0,0);
+
 $pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
 $offBlack: #3c3c3c;
 $blue: #5597dd;
+$lightBlue: tint($blue, 75%);
+$extraLightBlue: tint($lightBlue, 75%);
+$darkBlue: shade($blue, 25%);
+$extraDarkBlue: shade($darkBlue, 25%);
+$lightTransparentBlue: rgba(167, 192, 221, 0.3);
+
 $orange: #edbd3c;
 $red: #b20610;
 $green: #108614;
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 90212fe7b8..1675e6b07f 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -9,6 +9,9 @@
     <%static:css group='base-style'/>
     <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/skins/simple/style.css')}" />
     <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-standard.css')}" />
+    <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
+   
     <title><%block name="title"></%block></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
@@ -26,6 +29,9 @@
     <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/markitup/jquery.markitup.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script>
+    <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
+    <script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
+
     <%static:js group='main'/>
     <%static:js group='module-js'/>
     <script src="${static.url('js/vendor/jquery.inlineedit.js')}"></script>
diff --git a/cms/templates/edit_subsection.html b/cms/templates/edit_subsection.html
index e1dd91c162..6eed139f00 100644
--- a/cms/templates/edit_subsection.html
+++ b/cms/templates/edit_subsection.html
@@ -84,6 +84,28 @@
             <a href="#" class="sync-date no-spinner">Sync to ${parent_item.display_name}.</a></p>
         % endif
       </div>
+    
+    <div class="row gradable">
+      <label>Graded as:</label>
+      
+      <div class="gradable-status">
+        <h4 class="status-label">Not Graded</h4>
+        
+        <a class="menu-toggle" href="#">
+          
+        </a>
+                        
+        <ul class="menu">
+          <li><a class="is-selected" href="#">Homework</a></li>
+          <li><a href="#">Finger Exercises</a></li>
+          <li><a href="#">Lab</a></li>
+          <li><a href="#">Midterm Exam</a></li>
+          <li><a href="#">Final Exam</a></li>
+          <li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
+        </ul>        
+      </div>
+    </div>
+    
     <div class="due-date-input row">
       <label>Due date:</label>
       <a href="#" class="set-date">Set a due date</a>
@@ -117,6 +139,12 @@
 <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
 <script src="${static.url('js/vendor/date.js')}"></script>
 <script type="text/javascript">
+    (function() {
+      $body = $('body');  
+      $('.gradable-status .menu-toggle').bind('click', showGradeMenu);
+      $('.gradable-status .menu').bind('click', selectGradeType);
+    })();
+
     $(document).ready(function() {
         // expand the due-date area if the values are set
         if ($('#due_date').val() != '') {
@@ -125,5 +153,35 @@
             $block.find('.date-setter').show();
         }
     })
+
+    // grading status
+    function showGradeMenu(e) {
+
+      $section = $(this).closest('.gradable-status');
+
+      e.preventDefault();
+      $section.toggleClass('is-active');
+    }
+
+    function selectGradeType(e) {
+      e.preventDefault();
+
+      var $section = $(this).closest('.gradable-status');
+      $section.find('.menu li a').removeClass('is-selected');
+
+
+      var $target = $(e.target).addClass('is-selected');
+      var $label = $section.find('.status-label');
+
+      $section.removeClass('is-active');      
+      $label.html($target.html());
+
+      if ($target.hasClass('gradable-status-notgraded')) {
+        $section.removeClass('is-set');
+      }
+      else {
+        $section.addClass('is-set');
+      }
+    }
 </script>
 </%block>
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index 4cfcfac2fc..54d856fc75 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -16,6 +16,42 @@
   <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
   <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
   <script src="${static.url('js/vendor/date.js')}"></script>
+
+  <script type="text/javascript">
+    (function() {
+      $body = $('body');  
+      $('.gradable-status .menu-toggle').bind('click', showGradeMenu);
+      $('.gradable-status .menu').bind('click', selectGradeType);
+    })();
+
+    function showGradeMenu(e) {
+
+      $section = $(this).closest('.gradable-status');
+      e.preventDefault();
+      $section.toggleClass('is-active');
+    }
+
+    function selectGradeType(e) {
+      e.preventDefault();
+
+      var $section = $(this).closest('.gradable-status');
+      $section.find('.menu li a').removeClass('is-selected');
+
+
+      var $target = $(e.target).addClass('is-selected');
+      var $label = $section.find('.status-label');
+
+      $section.removeClass('is-active');      
+      $label.html($target.html());
+
+      if ($target.hasClass('gradable-status-notgraded')) {
+        $section.removeClass('is-set');
+      }
+      else {
+        $section.addClass('is-set');
+      }
+    }
+  </script>
 </%block>
 
 <%block name="header_extras">
@@ -77,8 +113,6 @@
       </ol>
     </li>
   </script>
-
-
 </%block>
 
 <%block name="content">
@@ -105,7 +139,8 @@
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}">
           <header>
-            <a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
+            <a href="#" data-tooltip="Expand/collapse this section" class="expand-collapse-icon collapse"></a>
+
             <div class="item-details" data-id="${section.location}">
               <h3 class="section-name">
                 <span data-tooltip="Edit this section's name" class="section-name-span">${section.display_name}</span>
@@ -128,8 +163,26 @@
                   <span class="published-status"><strong>Will Release:</strong> ${start_date_str} at ${start_time_str}</span>
                   <a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
                 %endif
-              </div>
+              </div>              
             </div>
+            
+            <div class="gradable-status">
+              <h4 class="status-label">Not Graded</h4>
+              
+              <a data-tooltip="Mark/unmark this section as graded" class="menu-toggle" href="#">
+                <span class="ss-icon ss-standard">&#x2713;</span>
+              </a>
+                              
+              <ul class="menu">
+                <li><a class="is-selected" href="#">Homework</a></li>
+                <li><a href="#">Finger Exercises</a></li>
+                <li><a href="#">Lab</a></li>
+                <li><a href="#">Midterm Exam</a></li>
+                <li><a href="#">Final Exam</a></li>
+                <li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
+              </ul>
+            </div>
+            
             <div class="item-actions">
               <a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
               <a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
@@ -145,13 +198,31 @@
               % for subsection in section.get_children():
               <li class="branch collapsed" data-id="${subsection.location}">
                 <div class="section-item">
-                  <div>
-                    <a href="#" data-tooltip="Collapse/expand this subsection" class="expand-collapse-icon expand"></a>
+                  <div class="details">
+                    <a href="#" data-tooltip="Expand/collapse this subsection" class="expand-collapse-icon expand"></a>
                     <a href="${reverse('edit_subsection', args=[subsection.location])}">
                       <span class="folder-icon"></span>
                       <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name}</span></span>
                     </a>
                   </div>
+                  
+                  <div class="gradable-status">
+                    <h4 class="status-label">Not Graded</h4>
+                    
+                    <a data-tooltip="Mark/unmark this subsection as graded" class="menu-toggle" href="#">
+                      <span class="ss-icon ss-standard">&#x2713;</span>
+                    </a>
+                                    
+                    <ul class="menu">
+                      <li><a class="is-selected" href="#">Homework</a></li>
+                      <li><a href="#">Finger Exercises</a></li>
+                      <li><a href="#">Lab</a></li>
+                      <li><a href="#">Midterm Exam</a></li>
+                      <li><a href="#">Final Exam</a></li>
+                      <li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
+                    </ul>
+                  </div>
+                  
                   <div class="item-actions">
                     <a href="#" data-tooltip="Delete this subsection" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>                    
                     <a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>