diff --git a/gradebook.html b/gradebook.html
index e237fbe16a..340b0da696 100644
--- a/gradebook.html
+++ b/gradebook.html
@@ -1,15 +1,22 @@
-<table>
-% for s in students:
-<h1><a href=/profile/${s['id']}>${s['username']}</a></h1>
-% for c in s['grade_info']['grade_summary']:
-<h2>${c['category']} </h2>
-<p>
-% if 'subscores' in c:
+<%inherit file="main.html" />
+<%include file="navigation.html" args="active_page=''" />
+<section class="main-content">
+<div class="gradebook-wrapper">
+  <section class="gradebook-content">
+  <h1>Gradebook</h1>
+  % for s in students:
+  <h2><a href=/profile/${s['id']}>${s['username']}</a></h2>
+  % for c in s['grade_info']['grade_summary']:
+  <h3>${c['category']} </h3>
+  <p>
+  % if 'subscores' in c:
   % for ss in c['subscores']:
-    <br>${ss['summary']}
+  <br>${ss['summary']}
   % endfor
-% endif
-</p>
-% endfor
-% endfor
-</table>
+  % endif
+  </p>
+  % endfor
+  % endfor
+  </section>
+</div>
+</section>
diff --git a/sass/_gradebook.scss b/sass/_gradebook.scss
new file mode 100644
index 0000000000..3282d4141b
--- /dev/null
+++ b/sass/_gradebook.scss
@@ -0,0 +1,11 @@
+div.gradebook-wrapper {
+  @extend .table-wrapper;
+
+  section.gradebook-content {
+    @extend .content;
+
+    h1 {
+      @extend .top-header;
+    }
+  }
+}
diff --git a/sass/application.scss b/sass/application.scss
index d4b2d01a84..b949b2fac7 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -11,6 +11,7 @@
 @import "textbook";
 @import "info";
 @import "profile";
+@import "gradebook";
 @import "wiki/basic-html", "wiki/sidebar", "wiki/create", "wiki/wiki", "wiki/table";
 @import "help";