diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss
index b94f5de1785086cbd75003aa408d8116c575c025..f10900b23538cc06306357bae5c85584b6abe7b3 100644
--- a/lms/static/sass/course/_gradebook.scss
+++ b/lms/static/sass/course/_gradebook.scss
@@ -4,8 +4,129 @@ div.gradebook-wrapper {
   section.gradebook-content {
     @extend .content;
 
+    .student-table {
+		float: left;
+		width: 265px;
+		border-radius: 3px 0 0 3px;
+		color: #3c3c3c;
+
+		th {
+			height: 50px;
+		}
+
+		tr:first-child td {
+			border-top-width: 1px;
+		}
+
+		td {
+			height: 50px;
+			padding-left: 20px;
+			border: 1px solid #e9e9e9;
+			border-width: 0 1px 1px 1px;
+			background: #f6f6f6;
+			font-size: 13px;
+			line-height: 50px;
+		}
+
+		tr:nth-child(even) td {
+			background-color: #fbfbfb;
+		}
+	}
+
+	.grades {
+		position: relative;
+		float: left;
+		width: 800px;
+		height: 712px;
+		overflow: hidden;
+	}
+
+	.grade-table {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 1000px;
+		cursor: move;
+		-webkit-transition: left .7s ease-in-out;
+		-webkit-user-select: none;
+		user-select: none;
+
+		td,
+		th {
+			width: 50px;
+			text-align: center;
+		}
+
+		thead th {
+			height: 50px;
+			background: -webkit-linear-gradient(top, #e9e9e9, #e2e2e2);
+			font-size: 10px;
+			line-height: 10px;
+			font-weight: bold;
+			text-align: center;
+			box-shadow: 0 1px 0 #c8c8c8 inset, 0 2px 0 rgba(255, 255, 255, .7) inset;
+
+			&:after {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 0;
+				z-index: 9999;
+				width: 1px;
+				height: 50px;
+				@includ linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+			}
+
+			&:first-child {
+				border-radius: 3px 0 0 0;
+				box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset;
+			}
+
+			&:last-child {
+				border-radius: 0 3px 0 0;
+				box-shadow: -1px 1px 0 #c8c8c8 inset, -1px 2px 0 rgba(255, 255, 255, .7) inset;
+			}
+
+			.assignment {
+				margin: 9px 0;
+			}
+
+			.type,
+			.number,
+			.max {
+				display: block;
+			}
+
+			.max {
+				height: 12px;
+				background: -webkit-linear-gradient(top, #c6c6c6, #bababa);
+				font-size: 9px;
+				line-height: 12px;
+				color: #fff;
+			}
+		}
+
+		tr:first-child td {
+			border-top: 1px solid #e9e9e9;
+		}
+
+		td {
+			height: 50px;
+			border-bottom: 1px solid #e9e9e9;
+			background: #f6f6f6;
+			font-size: 13px;
+			line-height: 50px;
+		}
+
+		tr:nth-child(even) td {
+			background-color: #fbfbfb;
+		}
+	}
+
     h1 {
       @extend .top-header;
     }
   }
-}
\ No newline at end of file
+}
+
+
diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html
index a4a81a686897b9037c3f07595325713976327612..02d32ba865f6ebda6f7aa628b19df753af10c4e0 100644
--- a/lms/templates/gradebook.html
+++ b/lms/templates/gradebook.html
@@ -6,6 +6,7 @@
   <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
   <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.stack.js')}"></script>
   <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
 </%block>
 
 <%block name="headextra">
@@ -28,49 +29,68 @@
   <section class="gradebook-content">
     <h1>Gradebook</h1>
 
-    %if len(students) > 0:
-    <table>
-      <%
-      templateSummary = students[0]['grade_summary']
-      %>
+    <table class="student-table">
+      <thead>
+        <tr>
+          <th><input type="search" /></th>
+        </tr>
+      </thead>
+      <tbody>
+        %for student in students:
+        <tr>
+          <td>
+            <a href="${reverse('student_profile', kwargs=dict(course_id=course_id, student_id=student['id']))}">${student['username']}</a>
+          </td>
+        </tr>
+        %endfor
+      </tbody>
+    </table>
 
 
-      <tr> <!-- Header Row -->
-        <th>Student</th>
-        %for section in templateSummary['section_breakdown']:
-          <th>${section['label']}</th>
-        %endfor
-        <th>Total</th>
-      </tr>
 
-      <%def name="percent_data(fraction)">
+    %if len(students) > 0:
+    <div class="grades">
+      <table class="grade-table">
         <%
-          letter_grade = 'None'
-          if fraction > 0:
-            letter_grade = 'F'
-            for grade in ['A', 'B', 'C']:
-              if fraction >= course.grade_cutoffs[grade]:
-                letter_grade = grade
-                break
-
-          data_class = "grade_" + letter_grade
+        templateSummary = students[0]['grade_summary']
         %>
-        <td class="${data_class}" data-percent="${fraction}">${ "{0:.0f}".format( 100 * fraction ) }</td>
-      </%def>
+        <thead>
+          <tr> <!-- Header Row -->
+            %for section in templateSummary['section_breakdown']:
+              <th>${section['label']}</th>
+            %endfor
+            <th>Total</th>
+          </tr>
+        </thead>
+
+        <%def name="percent_data(fraction)">
+          <%
+            letter_grade = 'None'
+            if fraction > 0:
+              letter_grade = 'F'
+              for grade in ['A', 'B', 'C']:
+                if fraction >= course.grade_cutoffs[grade]:
+                  letter_grade = grade
+                  break
+
+            data_class = "grade_" + letter_grade
+          %>
+          <td class="${data_class}" data-percent="${fraction}">${ "{0:.0f}".format( 100 * fraction ) }</td>
+        </%def>
+
+        <tbody>
+          %for student in students:
+          <tr>          
+            %for section in student['grade_summary']['section_breakdown']:
+              ${percent_data( section['percent'] )}
+            %endfor
+            <th>${percent_data( student['grade_summary']['percent'])}</th>
+          </tr>
+          %endfor
+        </tbody>
+      </table>
+    </div>
 
-      %for student in students:
-      <tr>
-        <td><a href="${reverse('student_profile',
-                               kwargs=dict(course_id=course_id,
-                                           student_id=student['id']))}">
-                      ${student['username']}</a></td>
-        %for section in student['grade_summary']['section_breakdown']:
-          ${percent_data( section['percent'] )}
-        %endfor
-        <th>${percent_data( student['grade_summary']['percent'])}</th>
-      </tr>
-      %endfor
-    </table>
     %endif
   </section>
 </div>