diff --git a/gulpfile.js b/gulpfile.js
index 12f7b0346..b63ccf921 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,14 +8,15 @@ var watchify = require('watchify');
 var browserify = require('browserify');
 
 var gulp = require('gulp');
-var rev = require('gulp-rev');
 var gulpif = require('gulp-if');
-var sass = require('gulp-sass');
 var gutil = require('gulp-util');
-var rename = require('gulp-rename');
-var uglify = require('gulp-uglify');
 var minifyCss = require('gulp-minify-css');
+var rename = require('gulp-rename');
+var rev = require('gulp-rev');
 var preprocessify = require('preprocessify');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+var uglify = require('gulp-uglify');
 
 var debug = !!process.env.FEC_WEB_DEBUG;
 var production = !!process.env.FEC_WEB_PRODUCTION;
@@ -57,6 +58,7 @@ gulp.task('copy-static', function() {
 gulp.task('build-sass', ['copy-static'], function() {
   return gulp.src('./static/styles/styles.scss')
     .pipe(rename('static/styles/styles.css'))
+    .pipe(sourcemaps.init())
     .pipe(sass({
       includePaths: Array.prototype.concat(
         './static/styles',
@@ -66,6 +68,7 @@ gulp.task('build-sass', ['copy-static'], function() {
       )
     }).on('error', sass.logError))
     .pipe(rev())
+    .pipe(sourcemaps.write())
     .pipe(gulpif(production, minifyCss()))
     .pipe(gulp.dest('.'))
     .pipe(rev.manifest({merge: true}))
diff --git a/package.json b/package.json
index 53da9378d..23e4b25db 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "main": "app.js",
   "devDependencies": {
     "chai": "^1.10.0",
+    "gulp-sourcemaps": "^1.5.2",
     "jquery-mockjax": "^1.6.1",
     "selenium-webdriver": "^2.44.0",
     "watchify": "~2.0.0"
diff --git a/static/js/modules/filters.js b/static/js/modules/filters.js
index d34017bf2..0b99e9f91 100644
--- a/static/js/modules/filters.js
+++ b/static/js/modules/filters.js
@@ -10,30 +10,35 @@ var List = require('list.js');
 var events = require('./events.js');
 
 // are the panels open?
-var open = true;
+var open = false;
 
 var openFilterPanel = function() {
-    $('body').addClass('panel-active--left');
-    $('.side-panel--left').addClass('side-panel--open');
-    $('#filter-toggle').addClass('active').html('<i class="ti-minus"></i> Hide Filters');
-    open = true;
+  $('body').addClass('panel-active--left');
+  $('.side-panel--left').addClass('side-panel--open');
+  $('#filter-toggle').addClass('active');
+  open = true;
 };
 
 var closeFilterPanel = function() {
-    $('body').removeClass('panel-active--left');
-    $('.side-panel--left').removeClass('side-panel--open');
-    $('#filter-toggle').removeClass('active').html('<i class="ti-plus"></i>Show Filters');
-    open = false;
+  $('body').removeClass('panel-active--left');
+  $('.side-panel--left').removeClass('side-panel--open');
+  $('#filter-toggle').removeClass('active');
+  open = false;
 };
 
-openFilterPanel();
+// Keep in sync with styles/grid-settings.scss.
+// TODO find better way to sync with scss.
+if ($('body').width() > 500) {
+  open = true;
+  openFilterPanel();
+}
 
 $('#filter-toggle').click(function(){
-    if ( open === true ) {
-        closeFilterPanel();
-    } else {
-        openFilterPanel();
-    }
+  if ( open === true ) {
+    closeFilterPanel();
+  } else {
+    openFilterPanel();
+  }
 });
 
 var prepareValue = function($elm, value) {
diff --git a/static/js/modules/tables.js b/static/js/modules/tables.js
index 933a236cf..78175f213 100644
--- a/static/js/modules/tables.js
+++ b/static/js/modules/tables.js
@@ -163,8 +163,8 @@ function initTable($table, $form, baseUrl, columns) {
     }
   });
   var $paging = $(api.table().container()).find('.results-info--top');
-  $paging.prepend($('#filter-toggle'));
   $paging.append($hideNullWidget);
+  $table.css('width', '100%');
   // Update filters and data table on navigation
   $(window).on('popstate', function() {
     filters.activateInitialFilters();
diff --git a/static/styles/_base/_buttons.scss b/static/styles/_base/_buttons.scss
index 3a5c514b7..c6f7e141d 100644
--- a/static/styles/_base/_buttons.scss
+++ b/static/styles/_base/_buttons.scss
@@ -100,4 +100,3 @@ input[type="submit"],
     border: none;
   }
 }
-
diff --git a/static/styles/_base/_tables.scss b/static/styles/_base/_tables.scss
index def9497d2..ba58104f5 100644
--- a/static/styles/_base/_tables.scss
+++ b/static/styles/_base/_tables.scss
@@ -15,9 +15,16 @@ table.dataTable {
   }
 
   th {
-    padding: 1rem !important;
+    padding: 1rem;
     border-bottom: 1px solid $light-gray !important;
     text-align: left;
+
+    &.sorting_asc,
+    &.sorting_desc,
+    &.sorting {
+      background-position-x: left !important;
+      background-position-y: 10px !important;
+    }
   }
 
   tr, td, th {
@@ -37,7 +44,12 @@ table.dataTable {
   td {
     @include truncate();
     padding: .5em;
+    padding-left: 42px !important;
     border-bottom: 1px dotted $light-gray;
+
+    @include media($large) {
+      padding-left: 10px !important;
+    }
   }
 
   &.no-footer {
@@ -341,7 +353,7 @@ table.dataTable.dtr-inline.collapsed > tbody > tr.child > th:first-child:before
 table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
   top: 8px;
-  left: 4px;
+  left: 18px;
   height: 16px;
   width: 16px;
   display: block;
diff --git a/static/styles/_components/_filters.scss b/static/styles/_components/_filters.scss
index 68ad4a0d9..c52ba2199 100644
--- a/static/styles/_components/_filters.scss
+++ b/static/styles/_components/_filters.scss
@@ -29,6 +29,11 @@
     width: 100%;
   }
 
+  &:last-child {
+    border-bottom: 0;
+    text-align: center;
+  }
+
   &:nth-child(even) {
     margin-right: 0;
   }
@@ -38,7 +43,7 @@
     margin-top: 0;
     font-weight: bold;
   }
-  
+
   @include media($medium) {
     @include span-columns(6);
     input[type="text"], 
@@ -51,6 +56,10 @@
   @include media($large) {
     width: 100%;
 
+    &:last-child {
+      text-align: left;
+    }
+
     input[type="text"],
     select,
     .button--dropdown {
@@ -67,4 +76,4 @@
   display: none;
   padding: .5rem;
   float: left;
-}
\ No newline at end of file
+}
diff --git a/static/styles/_components/_meta-box.scss b/static/styles/_components/_meta-box.scss
index 0f9e8647e..53be5d7f4 100644
--- a/static/styles/_components/_meta-box.scss
+++ b/static/styles/_components/_meta-box.scss
@@ -33,4 +33,4 @@
   .results-count {
     padding-top: 1rem;
   }
-}
\ No newline at end of file
+}
diff --git a/static/styles/_components/_side-panel.scss b/static/styles/_components/_side-panel.scss
index aac071c3a..97f0479c3 100644
--- a/static/styles/_components/_side-panel.scss
+++ b/static/styles/_components/_side-panel.scss
@@ -1,6 +1,13 @@
 // Side panel
 // This is the styles for slide out side panels
 
+
+.side-panel {
+  bottom: 0;
+  padding: 2rem;
+  top: 0;
+}
+
 .side-toggle {
   @include rem(padding, 1.0rem);
   @include transition(background-color, .1s);
@@ -22,25 +29,143 @@
   }
 }
 
-.side-panel {
-  padding: 2rem;
-  top: 0;
-  bottom: 0;
+.side-panel__toggle {
+  @include transform(translateX(-50%));
+  border-color: $light-gray;
+  left: 50%;
+  padding: 1rem;
+  position: absolute;
+  z-index: 100;
+
+  &:hover {
+    background: $lightest-gray;
+  }
+
+  &:after {
+    content: "Show filters";
+  }
+
+  .icon {
+    display: inline-block;
+    padding-right: .3em;
+
+    &:before {
+      content: "\e64b"; // Down
+    }
+  }
+
+  @include media($large) {
+    @include transform(translateX(0));
+
+    &:after {
+      content: "" !important;
+    }
+
+    &:hover, &:focus {
+      &:after {
+        content: "Show filters" !important;
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      padding-right: .3em;
+
+      &:before {
+        content: "\e649"; // Right
+      }
+    }
+  }
 }
 
 .side-panel--left {
   @include clearfix();
-  display: none;
+  @include transition(margin-left .5s);
   background: $lightest-gray;
+  border-color: $light-gray;
+  border-style: solid;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+  border-top-width: 0;
+  bottom: 0;
+  height: 0;
+  margin-right: 3%;
+  position: absolute;
+  top: 0;
   width: 100%;
 
-  &.side-panel--open {
-    display: block;
+  h4 {
+    margin-top: 1em;
+  }
+
+  &.side-panel {
+    padding: 0;
   }
 
   @include media($large) {
-    width: 20%;
+    height: auto;
     float: left;
+    margin-left: -17%;
+    position: static;
+    width: 17%;
+
+    .side-panel__box {
+      position: relative;
+    }
+
+    .side-panel__toggle.side-panel__toggle {
+      border-left-width: 0;
+      border-top-width: 1px;
+      float: right;
+      left: 100%;
+      top: 2rem;
+    }
+  }
+
+  &.side-panel--open {
+    left: 0;
+    height: auto;
+    margin-left: 0%;
+  }
+
+  .side-panel__toggle {
+    border-top-width: 0;
+    top: 100%;
+  }
+
+  .side-panel__box {
+    @include clearfix();
+    padding: 1rem 2rem;
+  }
+}
+
+.side-panel--open {
+  position: relative;
+
+  .side-panel__toggle {
+    .icon {
+      &:before {
+        content: "\e648"; // Up
+      }
+    }
+
+    @include media($large) {
+      .icon {
+        &:before {
+          content: "\e64a"; // Left
+        }
+      }
+    }
+
+    &:after {
+      content: "Hide filters";
+    }
+
+    &:hover, &:focus {
+      &:after {
+        content: "Hide filters" !important;
+      }
+    }
   }
 }
 
@@ -67,6 +192,3 @@
 
 }
 
-.panel-active--right {
-
-}
\ No newline at end of file
diff --git a/static/styles/_layout/_data-view.scss b/static/styles/_layout/_data-view.scss
index 9616ea8cb..c458c9466 100644
--- a/static/styles/_layout/_data-view.scss
+++ b/static/styles/_layout/_data-view.scss
@@ -23,17 +23,34 @@
 
 .results-container {
   @include clearfix();
+  border-top: 1px solid $light-gray;
+  float: left;
+  margin-top: 2rem;
   width: 100%;
-  padding-top: 2rem;
+
+  @include media($large) {
+    border-top: 0;
+    margin-top: 0;
+    padding-top: 2rem;
+  }
+
   .error-container {
     margin: 2rem 5%;
   }
 }
 
+.panel-active--left {
+  .results-container {
+    border-top: 0;
+    margin-top: 0;
+  }
+}
+
 @include media($large) {
   .results-container {
-    width: 98%;
-    margin: 0 1%;
+    @include transition(width .5s);
+    margin: 0 1% 0 0;
+    width: 96%;
   }
 
   .panel-active--left {
@@ -69,19 +86,44 @@
   margin-top: 0;
 }
 
-#filter-toggle {
-  width: 100%;
-
-  @include media($medium) {
-    float: left;
-    width: auto;
-  }
-}
-
 // DataTables plugin style overrides
 .dataTables_wrapper {
   .results-info {
 
+    &.meta-box {
+      border-top: 0;
+      padding-bottom: 2em;
+      padding-left: 2rem;
+      padding-right: 2rem;
+      padding-top: 4em;
+    }
+
+    .dataTables_length,
+    .dataTables_info,
+    .dataTables_paginate {
+      float: none;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    @include media($large) {
+      &.meta-box {
+        border-top: 1px solid $light-gray;
+        padding: .5em;
+      }
+
+      .dataTables_length,
+      .dataTables_info,
+      .dataTables_paginate {
+        float: left;
+        margin-left: 0;
+      }
+      .dataTables_paginate {
+        margin-left: 1.5em;
+      }
+    }
+
     .dataTables_length {
       padding: 1rem 0 0 0;
 
@@ -95,13 +137,12 @@
     }
 
     .dataTables_paginate {
-      padding-top: 0;
 
       .paginate_button.disabled {
         border: none;
         color: $medium-gray;
         display: none;
-        
+
         &:hover {
           border: none;
         }
@@ -144,9 +185,8 @@
       width: 100%;
 
       .dataTables_length {
-        float: right;
         padding: .5rem 0;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/templates/candidates.html b/templates/candidates.html
index 3febf93ab..219e6c21c 100644
--- a/templates/candidates.html
+++ b/templates/candidates.html
@@ -11,27 +11,15 @@ <h1><img width="32" height="32" class="category-icon" src="/static/img/icon-cand
 </header>
 
 <section class="results-content">
-  <button id="filter-toggle" data-slide="left"><i class="ti-plus"></i>Show Filters</button>
-  <div id="filters" class="side-panel side-panel--left">
-    <form id="category-filters">
-      <h4>Filter Candidates</h4>
-        <div class="field" id="q-field">
-          <label for="q">Name</label>
-          <input type="text" name="q" />
-          <button type="button" class="button--remove" data-removes="q"><i class="ti-close"></i></button>
-        </div>
-
-        {% include 'partials/filters/election-years.html' %}
-        {% include 'partials/filters/office-sought.html' %}
-        {% include 'partials/filters/parties.html' %}
-        {% include 'partials/filters/states.html' %}
-        {% include 'partials/filters/districts.html' %}
-
-      <div class="field">
-        <button type="submit" class="primary">Apply filters</button>
-      </div>
-    </form>
-  </div>
+  {% set filters = [
+      'election-years.html',
+      'office-sought.html',
+      'parties.html',
+      'states.html',
+      'districts.html',
+    ]
+  %}
+  {% include 'partials/filters/container.html' %}
 
   <div id="candidates" class="results-container">
       {% include 'partials/candidates-table.html' %}
diff --git a/templates/committees.html b/templates/committees.html
index cbf9529b6..9451074f9 100644
--- a/templates/committees.html
+++ b/templates/committees.html
@@ -11,26 +11,15 @@ <h1><img width="32" height="32" class="category-icon" src="/static/img/icon-comm
 </header>
 
 <section class="results-content">
-  <button id="filter-toggle" data-slide="left"><i class="ti-plus"></i>Show Filters</button>
-  <div id="filters" class="side-panel side-panel--left">
-    <h4>Filter Committees</h4>
-    <form id="category-filters">
-        <div class="field" id="q-field">
-            <label for="q">Name</label>
-            <input type="text" name="q" id="q" />
-            <button type="button" class="button--remove" data-removes="q"><i class="ti-close"></i></button>
-        </div>
+  {% set filters = [
+      'election-years.html',
+      'parties.html',
+      'states.html',
+      'committee-types.html',
+    ]
+  %}
+  {% include 'partials/filters/container.html' %}
 
-        {% include 'partials/filters/election-years.html' %}
-        {% include 'partials/filters/parties.html' %}
-        {% include 'partials/filters/states.html' %}
-        {% include 'partials/filters/committee-types.html' %}
-
-        <div class="field">
-          <button type="submit" class="primary">Apply filters</button>
-        </div>
-    </form>
-  </div>
   <div id="committees" class="results-container">
     {% include 'partials/committees-table.html' %}
   </div>
diff --git a/templates/partials/filters/container.html b/templates/partials/filters/container.html
new file mode 100644
index 000000000..52388a665
--- /dev/null
+++ b/templates/partials/filters/container.html
@@ -0,0 +1,23 @@
+<div id="filters" class="side-panel side-panel--left">
+  <div class="side-panel__box">
+    <button id="filter-toggle" data-slide="left" class="side-panel__toggle">
+      <i class="icon ti-angle"></i>
+    </button>
+    <h4>Filter {{ result_type|capitalize }}</h4>
+    <form id="category-filters">
+      <div class="field" id="q-field">
+        <label for="q">Name</label>
+        <input type="text" name="q" />
+        <button type="button" class="button--remove" data-removes="q"><i class="ti-close"></i></button>
+      </div>
+
+      {% for filter in filters %}
+        {% include 'partials/filters/' + filter %}
+      {% endfor %}
+
+      <div class="field">
+        <button type="submit" class="primary">Apply filters</button>
+      </div>
+    </form>
+  </div>
+</div>