diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss
index d8be7d779a..5f6c88d918 100644
--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -18,7 +18,7 @@ div.gradebook-wrapper {
     	width: 100%;
     	height: 27px;
     	padding: 0 15px 0 35px;
-    	box-sizing: border-box;
+    	@include box-sizing(border-box);
     	border-radius: 13px;
     	border: 1px solid $table-border-color;
     	background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
@@ -40,7 +40,6 @@ div.gradebook-wrapper {
 
     .student-table {
 		float: left;
-		// width: 264px;
 		width: 24%;
 		border-radius: 3px 0 0 3px;
 		color: #3c3c3c;
@@ -91,12 +90,20 @@ div.gradebook-wrapper {
 
 		.left-shadow {
 			left: 0;
-			background: -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image: -webkit-gradient(linear, left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-gradient(linear, left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:  -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:     -moz-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -moz-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:      -ms-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -ms-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:       -o-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -o-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
 		}
 
 		.right-shadow {
 			right: 0;
-			background: -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image: -webkit-gradient(linear, right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-gradient(linear, right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:  -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:     -moz-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -moz-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:      -ms-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -ms-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
+			background-image:       -o-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -o-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
 		}
 	}
 
@@ -106,9 +113,8 @@ div.gradebook-wrapper {
 		left: 0;
 		width: 1000px;
 		cursor: move;
-		-webkit-transition: none;
-		-webkit-user-select: none;
-		user-select: none;
+		@include transition(none);
+		@include user-select(none);
 
 		td,
 		th {
@@ -119,32 +125,30 @@ div.gradebook-wrapper {
 		thead th {
 			position: relative;
 			height: 50px;
-			background: -webkit-linear-gradient(top, $cell-border-color, #ddd);
+			@include linear-gradient(top, $cell-border-color, #ddd);
 			font-size: 10px;
 			line-height: 10px;
 			font-weight: bold;
 			text-align: center;
 			box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
+			border-left: 1px solid #ccc;
 
-			&:before {
-				content: '';
-				display: block;
-				position: absolute;
-				left: 0;
-				top: 0;
-				z-index: 9999;
-				width: 1px;
-				height: 100%;
-				background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15));
-			}
+			// &:before {
+			// 	content: '';
+			// 	display: block;
+			// 	position: absolute;
+			// 	left: 0;
+			// 	top: 0;
+			// 	z-index: 9999;
+			// 	width: 1px;
+			// 	height: 50px;
+			// 	@include linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15));
+			// }
 
 			&:first-child {
 				border-radius: 5px 0 0 0;
 				box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
-
-				&:before {
-					display: hidden;
-				}
+				border-left: none;
 			}
 
 			&:last-child {
@@ -164,7 +168,7 @@ div.gradebook-wrapper {
 
 			.max {
 				height: 12px;
-				background: -webkit-linear-gradient(top, #c6c6c6, #bababa);
+				@include linear-gradient(top, #c6c6c6, #bababa);
 				font-size: 9px;
 				line-height: 12px;
 				color: #fff;
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index 895977708b..9f570711a7 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -124,7 +124,7 @@ section.course-index {
           }          
 
           &:hover {
-            background: #fff;
+            background: rgba(0, 0, 0, .1);
 
             > a p {
               color: #333;
diff --git a/lms/templates/courseware/gradebook.html b/lms/templates/courseware/gradebook.html
index 20426041c4..fb750aed19 100644
--- a/lms/templates/courseware/gradebook.html
+++ b/lms/templates/courseware/gradebook.html
@@ -67,9 +67,9 @@
         <thead>
           <tr> <!-- Header Row -->
             %for section in templateSummary['section_breakdown']:
-              <th>${section['label']}</th>
+              <th><div class="assignment-label">${section['label']}</div></th>
             %endfor
-            <th>Total</th>
+            <th><div class="assignment-label">Total</div></th>
           </tr>
         </thead>