diff --git a/templates/gradebook.html b/templates/gradebook.html
index 22a763a410..244055cb04 100644
--- a/templates/gradebook.html
+++ b/templates/gradebook.html
@@ -1,15 +1,17 @@
 <%inherit file="main.html" />
-<%namespace name="profile_graphs" file="profile_graphs.js"/>
 
 <%block name="headextra">
   <script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
   <script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
   <script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
-  % for s in students:
-  <script>
-    ${profile_graphs.body(s['grade_info']['grade_summary'], "grade-detail-graph-" + str(s['id']))}
-  </script>
-  %endfor
+  
+  <style type="text/css">
+  .grade_a {color:green;}
+  .grade_b {color:Chocolate;}
+  .grade_c {color:DimGray;}
+  .grade_none {color:LightGray;}
+  </style>
+  
 </%block>
 
 <%include file="navigation.html" args="active_page=''" />
@@ -17,14 +19,58 @@
 <div class="gradebook-wrapper">
   <section class="gradebook-content">
     <h1>Gradebook</h1>
-    <ol>
-      % for s in students:
-      <li>
-        <h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
-        <div id="grade-detail-graph-${s['id']}" style="width:1000px;height:300px;"></div>
-      </li>
-      % endfor
-    </ol>
+    
+    %if len(students) > 0:
+    <table>
+      <%
+      templateSummary = students[0]['grade_info']['grade_summary']
+      %>
+      
+      
+      <tr> <!-- Header Row -->
+        <th>Student</th>
+        %for section in templateSummary:
+          %if 'subscores' in section:
+            %for subsection in section['subscores']:
+              <th>${subsection['label']}</th>
+            %endfor
+            <th>${section['totallabel']}</th>
+          %else:
+            <th>${section['category']}</th>
+          %endif
+        %endfor
+      </tr>
+      
+      <%def name="percent_data(percentage)">
+        <%
+          data_class = "grade_none"
+          if percentage > .87:
+            data_class = "grade_a"
+          elif percentage > .70:
+            data_class = "grade_b"
+          elif percentage > .6:
+            data_class = "grade_c"
+        %>
+        <td class="${data_class}">${ "{0:.0%}".format( percentage ) }</td>
+      </%def>
+      
+      %for student in students:
+      <tr>
+        <td><a href="/discussion/users/${student['id']}/${student['username']}/">${student['username']}</a></td>
+        %for section in student['grade_info']['grade_summary']:
+          %if 'subscores' in section:
+            %for subsection in section['subscores']:
+              ${percent_data( subsection['percentage'] )}
+            %endfor
+            ${percent_data( section['totalscore'] )}
+          %else:
+            ${percent_data( section['totalscore'] )}
+          %endif
+        %endfor
+      </tr>
+      %endfor
+    </table>
+    %endif
   </section>
 </div>
 </section>
diff --git a/templates/gradebook_profilegraphs.html b/templates/gradebook_profilegraphs.html
new file mode 100644
index 0000000000..22a763a410
--- /dev/null
+++ b/templates/gradebook_profilegraphs.html
@@ -0,0 +1,30 @@
+<%inherit file="main.html" />
+<%namespace name="profile_graphs" file="profile_graphs.js"/>
+
+<%block name="headextra">
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
+  <script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
+  % for s in students:
+  <script>
+    ${profile_graphs.body(s['grade_info']['grade_summary'], "grade-detail-graph-" + str(s['id']))}
+  </script>
+  %endfor
+</%block>
+
+<%include file="navigation.html" args="active_page=''" />
+<section class="main-content">
+<div class="gradebook-wrapper">
+  <section class="gradebook-content">
+    <h1>Gradebook</h1>
+    <ol>
+      % for s in students:
+      <li>
+        <h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
+        <div id="grade-detail-graph-${s['id']}" style="width:1000px;height:300px;"></div>
+      </li>
+      % endfor
+    </ol>
+  </section>
+</div>
+</section>