diff --git a/blackboard.html b/blackboard.html
index f905f2575..feadf332e 100644
--- a/blackboard.html
+++ b/blackboard.html
@@ -1,22 +1,26 @@
 <template name="blackboard">
-
+<div class="bb-menu-button">
+<button class="btn btn-inverse btn-small">
+<i class="icon-white icon-list"></i>
+</button>
+</div>
+<div class="bb-menu-drawer fade">
+  <ul class="nav nav-list bb-sidenav">
+    <li><a class="bb-wiki" href="{{wiki title=""}}"
+           target="_blank">Codex Wiki</a></li>
+    <li class="divider"></li>
+    {{#each roundgroups}}
+    <li class="nav-header">{{name}}</li>
+    {{#each rounds}}
+    <li><a title="r{{round_num}}" href="#r{{round._id}}"><i class="icon-chevron-right"></i>
+    {{round.name}}</a></li>
+    {{/each}}
+    {{/each}}
+  </ul>
+</div>
 <!-- puzzles w/ index -->
 <div class="row-fluid">
-  <div id="bb-sidebar" class="span2">
-    <ul class="nav nav-list bb-sidenav span2">
-      <li><a class="bb-wiki" href="{{wiki title=""}}"
-             target="_blank">Codex Wiki</a></li>
-      <li class="divider"></li>
-      {{#each roundgroups}}
-      <li class="nav-header">{{name}}</li>
-      {{#each rounds}}
-      <li><a title="r{{round_num}}" href="#r{{round._id}}{{updateScrollSpy}}"><i class="icon-chevron-right"></i>
-      {{round.name}}</a></li>
-      {{/each}}
-      {{/each}}
-    </ul>
-  </div>
-  <div id="bb-tables" class="{{#if hideStatus}}span10{{else}}span8{{/if}} {{#if canEdit}}bb-canEdit{{/if}}">
+  <div id="bb-tables" class="{{#if hideStatus}}span12{{else}}span9{{/if}} {{#if canEdit}}bb-canEdit{{/if}}">
     <!-- content div -->
 <div class="btn-toolbar pull-right text-right bb-top-buttons">
     {{#if canEdit}}
@@ -147,7 +151,7 @@ <h2 class="bb-editable" data-bbedit="roundgroups/{{_id}}/title">
   {{#if hideStatus}}
   <div class="bb-hide-status"><i class='icon-chevron-left'></i></div>
   {{else}}
-  <div id="bb-right-sidebar" class="span2"><div>
+  <div id="bb-right-sidebar" class="span3"><div>
     <div class="bb-hide-status"><i class='icon-chevron-right'></i></div>
     {{> blackboard_status_grid}}
   </div></div><!-- bb-right-sidebar -->
@@ -157,26 +161,25 @@ <h2 class="bb-editable" data-bbedit="roundgroups/{{_id}}/title">
 
 <template name="blackboard_status_grid">
   <div class="bb-status-grid">
+  <table>
+  <tbody>
     {{#each roundgroups}}
-    <div class="bb-status-grid-row {{#if solved}}bb-status-solved{{else}}{{#if stuck this}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">{{link id=_id}}</div>
+    <tr><th colspan=2 class="bb-status-grid-roundgroup bb-status-{{#unless solved}}un{{/unless}}solved">{{link id=_id}}</th></tr>
     {{#each rounds}}
-    <div class="bb-status-grid-row">
-      <div class="bb-status-grid-cell">
-        <div class="{{#if round.solved}}bb-status-solved{{else}}{{#if stuck round}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">
-          {{link id=round._id title=round.name text=rX}}:
-        </div>
-      </div><!--
-      -->{{#each puzzles}}<!--
-      --><div class="bb-status-grid-cell">
-        <div class="{{#if puzzle.solved}}bb-status-solved{{else}}{{#if stuck puzzle}}bb-status-stuck{{else}}bb-status-unsolved{{/if}}{{/if}}">
+    <tr>
+      <td class="bb-status-grid-round bb-status-{{#unless round.solved}}un{{/unless}}solved">
+          {{link id=round._id title="meta" text=round.name}}
+      </td><td class="bb-status-grid-puzzles">
+      {{#each puzzles}}<!--
+      --><div class="bb-status-grid-cell bb-status-{{#unless puzzle.solved}}un{{/unless}}solved">
           {{link id=puzzle._id title=puzzle.name text=puzzle_num}}
-        </div>
       </div><!--
-      -->{{/each}}
-    </div>
+      -->{{/each}}</td>
+    </tr>
     {{/each}}
     {{/each}}
-  </div><!-- bb-status-grid -->
+  </tbody>
+  </table></div><!-- bb-status-grid -->
 </template>
 
 <template name="blackboard_round">
diff --git a/blackboard.less b/blackboard.less
index 4bbee488c..c9bd96a84 100644
--- a/blackboard.less
+++ b/blackboard.less
@@ -56,6 +56,48 @@ body.has-emojis {
       font-family: "Noto Sans", sans-serif;
   }
 }
+.bb-menu-button {
+  position: fixed;
+  bottom: 0px;
+  left:0px;
+  z-index: 1030;
+}
+.bb-menu-drawer {
+  &.fade {
+    opacity: 1;
+  }
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  overflow-y: auto;
+  background-color: white;
+  width: 256px;
+  left: -256px;
+  z-index: 1050;
+  transition: left 0.25s ease-in-out;
+  border-right: 1px solid black;
+  &.in {
+    left: 0px;
+  }
+  ul {
+    margin-left: 5px;
+    li {
+      display: block;
+      a {
+        display: block;
+        &.bb-wiki { text-align: center; }
+      }
+      /* Chevrons */
+      .icon-chevron-right {
+        float: right;
+        margin-top: 2px;
+        margin-right: -6px;
+        opacity: .25;
+      }
+    }
+  }
+}
+
 .bb-puzzleround, .bb-chat-messages {
   padding-top: 40px; /* allow space for breadcrumbs in navbar */
 }
@@ -164,33 +206,6 @@ body.has-emojis {
     text-transform: uppercase;
   }
 }
-#bb-sidebar {
-  .bb-sidenav {
-    margin-top: 10px;
-    background-color: #fff;
-    -webkit-border-radius: 6px;
-       -moz-border-radius: 6px;
-            border-radius: 6px;
-    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-       -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-            box-shadow: 0 1px 4px rgba(0,0,0,.065);
-    border: 1px solid #e5e5e5;
-
-    position: fixed; /* for wide screens */
-
-    & > li:first-child { text-align: center; /* wiki link */ }
-    li.nav-header, li > a { .ellipsis; }
-
-    /* Chevrons */
-    .icon-chevron-right {
-      float: right;
-      margin-top: 2px;
-      margin-right: -6px;
-      opacity: .25;
-    }
-  }
-}
-
 #bb-right-sidebar {
   position: fixed;
   right: 14px;
@@ -226,10 +241,15 @@ body.has-emojis {
     padding: 5px;
     font-size: 80%;
 
-    .bb-status-grid-row {
-      padding-left: 1.5em;
-      text-indent: -1.5em;
-      & > * { text-indent: 0; }
+    .bb-status-grid-roundgroup {
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+    td {
+      padding: 0px;
+    }
+    .bb-status-grid-round {
+      padding-right:2px;
     }
     .bb-status-grid-cell {
       display: inline-block;
@@ -653,7 +673,6 @@ html.fullHeight {
   body {
     padding-top: 0;
   }
-
   #roomName { width:85px; } /* narrow room name input */
   .bb-omit-when-narrow, .puzzle-working, .puzzle-update { display: none; }
   .bb-buttonbar .bb-login { float: right }
diff --git a/client/blackboard.coffee b/client/blackboard.coffee
index a1516dd6b..87cb87191 100644
--- a/client/blackboard.coffee
+++ b/client/blackboard.coffee
@@ -164,6 +164,16 @@ Template.blackboard_status_grid.helpers
     return p
   stuck: share.model.isStuck
 
+Template.blackboard.events
+  "click .bb-menu-button .btn": (event, template) ->
+    template.$('.bb-menu-drawer').modal 'show'
+  "click a[href^='#']": (event, template) ->
+    event.preventDefault()
+    template.$('.bb-menu-drawer').modal 'hide'
+    $.scrollTo (event.target.getAttribute 'href'),
+      duration: 400
+      offset: { top: -110 }
+
 Template.nick_presence.helpers
   email: ->
     cn = share.model.canonical(this.nick)
@@ -175,19 +185,9 @@ share.find_bbedit = (event) ->
   return edit.split('/')
 
 Template.blackboard.onRendered ->
-  $("#bb-sidebar").localScroll({ duration: 400, lazy: true })
-  $("body").scrollspy(target: "#bb-sidebar", offset: (NAVBAR_HEIGHT + 10))
-  ss = $("body").data("scrollspy")
-  # hack to ensure first element is selected on first reload
-  ss.activate(ss.targets[0]) if ss.targets.length
-  ss.process()
   #  page title
   $("title").text("Codex Puzzle Blackboard")
-  # affix side menu
-  # XXX disabled because it doesn't play nice with narrow screens
-  #$("#bb-sidebar > .bb-sidenav").affix()
   # tooltips
-  $('#bb-sidebar .nav > li > a').tooltip placement: 'right'
   $('#bb-tables .bb-puzzle .puzzle-name > a').tooltip placement: 'left'
   # see the global 'updateScrollSpy' helper for details on how
   # we update scrollspy when the rounds list changes