diff --git a/src/app/help/index.jade b/src/app/help/index.jade
index 1e9d51944b5..1df5bf2cd58 100644
--- a/src/app/help/index.jade
+++ b/src/app/help/index.jade
@@ -1,5 +1,5 @@
 .page.help
   div(data-hook='sidebar-subview')
-  .content.with-sidebar
+  .content-sidebar-expanded
     h1.help-entry-title(data-hook='help-entry-title')
     .help-entry(data-hook='help-entry-content')
diff --git a/src/app/help/index.less b/src/app/help/index.less
index 7ec9551ff2d..b4feb8b9bae 100644
--- a/src/app/help/index.less
+++ b/src/app/help/index.less
@@ -1,8 +1,10 @@
 .page.help  {
   .container-fluid;
 
-  .content.with-sidebar {
-    padding: 0 15px 15px 15px;
+  .content {
+    &-sidebar-expanded {
+        padding: 0 15px 15px 15px;
+    }
   }
   .related {
     margin-top: 20px;
diff --git a/src/app/styles/index.less b/src/app/styles/index.less
index a27fcadda37..b902341a0ee 100644
--- a/src/app/styles/index.less
+++ b/src/app/styles/index.less
@@ -18,21 +18,7 @@ html, body {
 }
 
 #application {
-  height: 100%;
-  max-height: 100%;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
 
-  .content {
-    height: 100%;
-    max-height: 100%;
-    overflow-y: auto;
-
-    &.with-sidebar {
-      margin-left: @sidebar-width;
-    }
-  }
   #statusbar {
     background-color: rgba(255, 255, 255, .5);
     position: fixed;
@@ -98,33 +84,9 @@ i.syntax-help {
 
 //action-bar, just a drop-shadow for now but should think about where to put these styles eventually
 .action-bar {
-  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
   height: 32px;
   background: @gray8;
   border-bottom: 1px solid @gray7;
   padding-top: 4px;
   padding-left: 20px;
-  position: fixed;
-  left: 250px;
-  right: 0;
-  z-index: 4;
 }
-
-  .rtss-databases,
-  .collections {
-    .action-bar {
-      top: 46px;
-    }
-  }
-
-  .validation {
-    .action-bar {
-      top: 96px;
-    }
-  }
-
-  .column.main {
-      .action-bar {
-        position: static;
-      }
-  }
diff --git a/src/internal-packages/app/styles/tab-nav-bar.less b/src/internal-packages/app/styles/tab-nav-bar.less
index 49bd763e679..5325367d332 100644
--- a/src/internal-packages/app/styles/tab-nav-bar.less
+++ b/src/internal-packages/app/styles/tab-nav-bar.less
@@ -1,9 +1,21 @@
 .tab-nav-bar {
 
+  &-is-light-theme {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   &-header {
-    height: 45px;
     background-color: @pw;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 45px;
     display: flex;
+    flex-direction: row;
     justify-content: flex-start;
     align-items: flex-end;
     position: relative;
@@ -66,49 +78,4 @@
     cursor: default;
     border-color: @chart1;
   }
-  //shouldn't positioning of the component happen when it's rendered by its parent?
-  &-is-light-theme {
-    .tab-nav-bar-header {
-      top: 50px;
-      height: 46px;
-      z-index: 2;
-      border-bottom: 1px solid #ebebed;
-    }
-  }
-
-  &-is-dark-theme {
-    .tab-nav-bar-header {
-      background-color: #2B3033;
-    }
-
-    .tab-nav-bar-tab {
-      color: #8B8D8F;
-    }
-
-    .tab-nav-bar-link {
-      color: @pw;
-    }
-
-    .tab-nav-bar-is-selected {
-      color: @pw;
-      background-color: #3D4247;
-      border-color: #545454;
-
-      &.tab-nav-bar-tab:hover {
-        background-color: #3D4247;
-      }
-    }
-
-    .tab-nav-bar-tab:hover {
-      background-color: #2B3033;
-      border-color: #545454;
-      border-bottom: none;
-
-      color: @pw;
-
-      .tab-nav-bar-link {
-        color: @pw;
-      }
-    }
-  }
 }
diff --git a/src/internal-packages/collection/styles/index.less b/src/internal-packages/collection/styles/index.less
index 8a188e2923a..6048746f61b 100644
--- a/src/internal-packages/collection/styles/index.less
+++ b/src/internal-packages/collection/styles/index.less
@@ -1,8 +1,6 @@
 .collection-view {
   header {
     padding: 12px 0 0;
-    position: fixed;
-    z-index: 4;
     background: @pw;
     .row {
       margin-left: 0;
@@ -13,60 +11,6 @@
     margin-top: 12px;
     font-size: 24px;
   }
-  .column-container {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .header-margin {
-    margin-top: 50px; // size of header
-  }
-
-  .column {
-    overflow: auto;
-    height: auto;
-    padding: .5rem;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    position: relative;
-    transition: width 250ms ease;
-  }
-
-  .main {
-    padding: 0 26px 100px 26px;
-    overflow-x: hidden;
-    background-color: @gray8;
-    position: absolute;
-    left: 250px;
-    right: 0;
-    bottom: 0;
-    top: 95px;
-  }
-
-  .column-container {
-    &.with-message {
-      .main {
-        top: 128px;
-      }
-    }
-    &.with-refinebar {
-      .main {
-        top: 149px;
-      }
-    }
-    &.with-refinebar-and-message {
-      .main {
-        top: 181px;
-      }
-    }
-    &.with-refinebar-and-2xmessage {
-      .main {
-        top: 214px;
-      }
-    }
-  }
-
   .side {
     width: 0;
     font-family: @font-family-monospace;
@@ -76,42 +20,4 @@
     top: 30px;
   }
 
-  .splitter {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    right: 10px;
-    transition: right 250ms ease;
-  }
-  .splitter-button {
-    outline: none;
-    color: @gray1;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-    &:active {
-      outline: none;
-      color: @green2;
-    }
-  }
-  .splitter-button-close {
-    display: none;
-  }
-  .column-container.sidebar-open {
-    .side {
-      width: 33%;
-      right: 0;
-    }
-    .splitter {
-      right: -2px;
-    }
-    .splitter-button-open {
-      display: none;
-    }
-    .splitter-button-close {
-      display: inline-block;
-    }
-  }
 }
diff --git a/src/internal-packages/crud/lib/component/document-list.jsx b/src/internal-packages/crud/lib/component/document-list.jsx
index cfe63e75321..c5334365595 100644
--- a/src/internal-packages/crud/lib/component/document-list.jsx
+++ b/src/internal-packages/crud/lib/component/document-list.jsx
@@ -77,7 +77,7 @@ class DocumentList extends React.Component {
    * Attach the scroll event to the parent container.
    */
   attachScrollEvent() {
-    this._node.parentNode.addEventListener(
+    this._node.parentNode.parentNode.addEventListener(
       SCROLL_EVENT,
       this.handleScroll.bind(this)
     );
@@ -85,7 +85,7 @@ class DocumentList extends React.Component {
 
   /**
    * Handle the loading of more documents.
-   *
+   * @param {Object} error
    * @param {Array} documents - The next batch of documents.
    */
   handleLoadMore(error, documents) {
@@ -103,7 +103,7 @@ class DocumentList extends React.Component {
 
   /**
    * Handle the reset of the document list.
-   *
+   * @param {Object} error
    * @param {Array} documents - The documents.
    * @param {Integer} count - The count.
    */
@@ -239,7 +239,7 @@ class DocumentList extends React.Component {
       );
     }
     return (
-      <div className="column-container with-refinebar-and-2xmessage">
+      <div className="column-container">
         <div className="column main">
           <ol className={LIST_CLASS} ref={(c) => this._node = c}>
             {this.state.docs}
@@ -257,10 +257,12 @@ class DocumentList extends React.Component {
    */
   render() {
     return (
-      <div className="compass-documents header-margin">
-        <this.queryBar />
-        <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
-          insertHandler={this.handleOpenInsert.bind(this)} />
+      <div className="content-container content-container-documents compass-documents">
+        <div className="controls-container">
+          <this.queryBar />
+          <this.samplingMessage isWritable={this.CollectionStore.isWritable()}
+            insertHandler={this.handleOpenInsert.bind(this)} />
+        </div>
         {this.renderContent()}
       </div>
     );
diff --git a/src/internal-packages/crud/lib/store/insert-document-store.js b/src/internal-packages/crud/lib/store/insert-document-store.js
index d1b38ca5a87..c1af167acf2 100644
--- a/src/internal-packages/crud/lib/store/insert-document-store.js
+++ b/src/internal-packages/crud/lib/store/insert-document-store.js
@@ -31,13 +31,13 @@ const InsertDocumentStore = Reflux.createStore({
       const filter = _.assign(this.filter, { _id: doc._id });
       app.dataService.count(NamespaceStore.ns, filter, {}, (err, count) => {
         if (err) {
-          this.trigger(false, err);
+          return this.trigger(false, err);
+        }
+
+        if (count > 0) {
+          this.trigger(true, doc);
         } else {
-          if (count > 0) {
-            this.trigger(true, doc);
-          } else {
-            Actions.closeInsertDocumentDialog();
-          }
+          Actions.closeInsertDocumentDialog();
         }
       });
     });
diff --git a/src/internal-packages/database/lib/components/collections-table.jsx b/src/internal-packages/database/lib/components/collections-table.jsx
index 239f2a824ac..c3b4f548963 100644
--- a/src/internal-packages/database/lib/components/collections-table.jsx
+++ b/src/internal-packages/database/lib/components/collections-table.jsx
@@ -66,7 +66,7 @@ class CollectionsTable extends React.Component {
 
     return (
       <div className="collections-table" data-test-id="collections-table">
-        <div className="collections-table-create-button action-bar">
+        <div className="collections-table-create-button action-bar controls-container">
           <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
             <button
                 className="btn btn-primary btn-xs"
@@ -78,18 +78,22 @@ class CollectionsTable extends React.Component {
             </button>
           </div>
         </div>
-        <this.SortableTable
-          theme="light"
-          columns={this.props.columns}
-          rows={rows}
-          sortable
-          sortOrder={this.props.sortOrder}
-          sortColumn={this.props.sortColumn}
-          valueIndex={0}
-          removable={isWritable}
-          onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
-        />
+        <div className="column-container">
+          <div className="column main">
+            <this.SortableTable
+              theme="light"
+              columns={this.props.columns}
+              rows={rows}
+              sortable
+              sortOrder={this.props.sortOrder}
+              sortColumn={this.props.sortColumn}
+              valueIndex={0}
+              removable={isWritable}
+              onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
+              onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
+            />
+          </div>
+        </div>
         <CreateCollectionDialog />
         <DropCollectionDialog />
       </div>
diff --git a/src/internal-packages/database/styles/collections-table.less b/src/internal-packages/database/styles/collections-table.less
index 3bd42bddd1e..bade2ef779d 100644
--- a/src/internal-packages/database/styles/collections-table.less
+++ b/src/internal-packages/database/styles/collections-table.less
@@ -1,12 +1,5 @@
 .collections-table {
   background-color: @gray8;
-  overflow-y: scroll;
-  padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
 
   &-link, &-link:hover, &-link:active {
     font-weight: bold;
diff --git a/src/internal-packages/explain/lib/components/compass-explain.jsx b/src/internal-packages/explain/lib/components/compass-explain.jsx
index cf0260711ec..f8909133b9d 100644
--- a/src/internal-packages/explain/lib/components/compass-explain.jsx
+++ b/src/internal-packages/explain/lib/components/compass-explain.jsx
@@ -45,7 +45,7 @@ class CompassExplain extends React.Component {
 
   renderContent() {
     return (
-      <div className="column-container with-refinebar">
+      <div className="column-container">
         <div className="column main">
           <ExplainHeader
             viewType={this.props.viewType}
@@ -83,8 +83,10 @@ class CompassExplain extends React.Component {
     }
 
     return (
-      <div className="compass-explain header-margin">
-        <this.queryBar />
+      <div className="compass-explain">
+        <div className="controls-container">
+          <this.queryBar />
+        </div>
         {content}
       </div>
     );
diff --git a/src/internal-packages/explain/styles/explain-body.less b/src/internal-packages/explain/styles/explain-body.less
index f6ffa1790fd..4bcb061c0c0 100644
--- a/src/internal-packages/explain/styles/explain-body.less
+++ b/src/internal-packages/explain/styles/explain-body.less
@@ -1,9 +1,3 @@
 .explain-body {
   background: @gray8;
-  position: absolute;
-  top: 215px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  overflow-y: scroll;
 }
diff --git a/src/internal-packages/home/lib/components/home.jsx b/src/internal-packages/home/lib/components/home.jsx
index dbcbe523261..c4ebbc48602 100644
--- a/src/internal-packages/home/lib/components/home.jsx
+++ b/src/internal-packages/home/lib/components/home.jsx
@@ -5,6 +5,7 @@ const ReactTooltip = require('react-tooltip');
 class Home extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { collapsed: false };
     this.sideBar = app.appRegistry.getComponent('Sidebar.Component');
     this.collectionView = app.appRegistry.getComponent('Collection.Collection');
     this.collectionsTable = app.appRegistry.getComponent('Database.CollectionsTable');
@@ -14,6 +15,15 @@ class Home extends React.Component {
     this.serverStatsView = app.appRegistry.getComponent('RTSS.ServerStats');
   }
 
+  getContentClasses() {
+    return 'content' +
+      (this.state.collapsed ? ' content-sidebar-collapsed' : ' content-sidebar-expanded');
+  }
+
+  collapseSidebar() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
   renderContent() {
     let view;
     switch (this.props.mode) {
@@ -44,12 +54,10 @@ class Home extends React.Component {
 
     return (
       <div className="page">
-        <div className="content with-sidebar">
+        <div className={this.getContentClasses()}>
           {this.renderContent()}
         </div>
-        <div className="compass-sidebar-container">
-          <this.sideBar />
-        </div>
+        <this.sideBar onCollapse={this.collapseSidebar.bind(this)}/>
         {isNotWritableTooltip}
       </div>
     );
diff --git a/src/internal-packages/home/styles/index.less b/src/internal-packages/home/styles/index.less
index e65388b407f..77f628fe303 100644
--- a/src/internal-packages/home/styles/index.less
+++ b/src/internal-packages/home/styles/index.less
@@ -1,8 +1,8 @@
 .page {
-  max-height: 100%;
-  min-height: 100%;
-  overflow-y: auto;
-  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100vh;
 }
 
 .badge {
@@ -24,9 +24,10 @@
 }
 
 .content {
-  max-height: 100%;
-  min-height: 100%;
-  overflow-y: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 914px;
+  order: 2;
 }
 
 .panel-title {
@@ -44,13 +45,76 @@
   flex-direction: row;
 }
 
+/*
+GLOBAL FLEXBOX LAYOUT STYLES
+*/
+.tab-views {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  display: flex;
+}
+
+  .tab {
+    display: flex;
+    width: 100%;
+  }
+
+  .rtss-databases,
+  .rt-perf, //rtss charts
+  .collections-table,
+  //collection views
+  .schema-container,
+  .compass-documents,
+  .index-container,
+  .compass-explain,
+  .validation-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+    .controls-container {
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: auto;
+      box-shadow: 0 2px 2px rgba(0,0,0,.2);
+      z-index: 4;
+      border-top: 1px solid @gray7;
+    }
+
+    .column-container {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: auto;
+      flex-direction: column;
+      display: flex;
+      overflow: auto;
+      background: @gray8;
+    }
+
+      .column.main {
+        flex: 1;
+        margin-bottom: 100px;
+        padding: 0 24px;
+      }
+
+.RTSS, //databases table
+.collections, // collections table
 .collection-view {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
   header {
     padding: 12px 0 0;
-    position: fixed;
-    z-index: 4;
-    background: @pw;
-    width: ~"calc(100% - 250px)";
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 67px;
+    /*
+    END GLOBAL FLEXBOX LAYOUT STYLES
+    */
     .row {
       margin-left: 0;
       margin-right: 0;
@@ -71,59 +135,6 @@
       margin-left: 2px;
     }
   }
-  .column-container {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .header-margin {
-    margin-top: 50px; // size of header
-  }
-
-  .column {
-    overflow: auto;
-    height: auto;
-    padding: .5rem;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    position: relative;
-    transition: width 250ms ease;
-  }
-
-  .main {
-    padding: 0 26px 100px 26px;
-    overflow-x: hidden;
-    background-color: @gray8;
-    position: absolute;
-    left: 250px;
-    right: 0;
-    bottom: 0;
-    top: 95px;
-  }
-
-    .column-container {
-      &.with-message {
-        .main {
-          top: 128px;
-        }
-      }
-      &.with-refinebar {
-        .main {
-          top: 149px;
-        }
-      }
-      &.with-refinebar-and-message {
-        .main {
-          top: 181px;
-        }
-      }
-      &.with-refinebar-and-2xmessage {
-        .main {
-          top: 214px;
-        }
-      }
-    }
 
   .side {
     width: 0;
@@ -133,45 +144,6 @@
     right: -12px;
     top: 30px;
   }
-
-  .splitter {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    right: 10px;
-    transition: right 250ms ease;
-  }
-  .splitter-button {
-    outline: none;
-    color: @gray1;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-    &:active {
-      outline: none;
-      color: @green2;
-    }
-  }
-  .splitter-button-close {
-    display: none;
-  }
-  .column-container.sidebar-open {
-    .side {
-      width: 33%;
-      right: 0;
-    }
-    .splitter {
-      right: -2px;
-    }
-    .splitter-button-open {
-      display: none;
-    }
-    .splitter-button-close {
-      display: inline-block;
-    }
-  }
 }
 
 .sidebar {
diff --git a/src/internal-packages/indexes/lib/component/indexes.jsx b/src/internal-packages/indexes/lib/component/indexes.jsx
index 0960c8aebf4..436cd6669a3 100644
--- a/src/internal-packages/indexes/lib/component/indexes.jsx
+++ b/src/internal-packages/indexes/lib/component/indexes.jsx
@@ -55,7 +55,6 @@ class Indexes extends React.Component {
   renderComponent() {
     return (
       <div className="column-container">
-        <CreateIndexButton isWritable={this.state.writable} />
         <div className="column main">
           <table data-test-id="indexes-table">
             <IndexHeader />
@@ -81,7 +80,11 @@ class Indexes extends React.Component {
    */
   render() {
     return (
-      <div className="index-container header-margin">
+      <div className="index-container">
+        {/* NOT SURE if we need to wrap the controls-container in a readonly conditional as well. */}
+        <div className="controls-container">
+          <CreateIndexButton isWritable={this.state.writable} />
+        </div>
         {this.state.readonly ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
diff --git a/src/internal-packages/indexes/styles/index.less b/src/internal-packages/indexes/styles/index.less
index 862ecfa18ca..e6142d98eb4 100644
--- a/src/internal-packages/indexes/styles/index.less
+++ b/src/internal-packages/indexes/styles/index.less
@@ -20,12 +20,6 @@
 
 .index-container {
 
-  .column-container {
-    .column.main {
-      margin-top: 32px;
-    }
-  }
-
   table {
     table-layout: auto;
     border-collapse: collapse;
diff --git a/src/internal-packages/query/styles/index.less b/src/internal-packages/query/styles/index.less
index 5ebaf201b8a..f316d688df2 100644
--- a/src/internal-packages/query/styles/index.less
+++ b/src/internal-packages/query/styles/index.less
@@ -1,6 +1,4 @@
 .refine-view-container {
-  position: relative;
-  z-index: 1;
 
   .query-input-container {
     padding: 12px 10px 12px;
@@ -52,7 +50,7 @@
     font-size: 11px;
     padding: 2px 4px !important;
   }
-  
+
   .message-container {
     background: @gray7;
   }
diff --git a/src/internal-packages/schema/lib/component/index.jsx b/src/internal-packages/schema/lib/component/index.jsx
index 83600d0c839..576b06ad7b1 100644
--- a/src/internal-packages/schema/lib/component/index.jsx
+++ b/src/internal-packages/schema/lib/component/index.jsx
@@ -93,10 +93,12 @@ const Schema = React.createClass({
       return <Field key={field.name} {...field} />;
     });
     return (
-      <div className="header-margin">
-        <this.queryBar />
-        <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
-        <div className="column-container with-refinebar-and-message">
+      <div className="content-container content-container-schema schema-container">
+        <div className="controls-container">
+          <this.queryBar />
+          <this.samplingMessage sampleSize={this.state.schema ? this.state.schema.count : 0}/>
+        </div>
+        <div className="column-container">
           <div className="column main">
             <div className="schema-field-list">
               {fieldList}
diff --git a/src/internal-packages/server-stats/lib/component/databases-table.jsx b/src/internal-packages/server-stats/lib/component/databases-table.jsx
index 2561e22af55..6a9f6e47ea4 100644
--- a/src/internal-packages/server-stats/lib/component/databases-table.jsx
+++ b/src/internal-packages/server-stats/lib/component/databases-table.jsx
@@ -89,7 +89,7 @@ class DatabasesTable extends React.Component {
 
     return (
       <div className="rtss-databases" data-test-id="databases-table">
-        <div className="rtss-databases-create-button action-bar">
+        <div className="rtss-databases-create-button action-bar controls-container">
           <div className="tooltip-button-wrapper" data-tip={tooltipText} data-for="is-not-writable">
             <button
                 className="btn btn-primary btn-xs"
@@ -101,18 +101,22 @@ class DatabasesTable extends React.Component {
             </button>
           </div>
         </div>
-        <this.SortableTable
-          theme="light"
-          columns={this.props.columns}
-          rows={rows}
-          sortable
-          sortOrder={this.props.sortOrder}
-          sortColumn={this.props.sortColumn}
-          valueIndex={0}
-          removable={isWritable}
-          onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
-          onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
-        />
+        <div className="column-container">
+          <div className="column main">
+            <this.SortableTable
+              theme="light"
+              columns={this.props.columns}
+              rows={rows}
+              sortable
+              sortOrder={this.props.sortOrder}
+              sortColumn={this.props.sortColumn}
+              valueIndex={0}
+              removable={isWritable}
+              onColumnHeaderClicked={this.onColumnHeaderClicked.bind(this)}
+              onRowDeleteButtonClicked={this.onRowDeleteButtonClicked.bind(this)}
+            />
+          </div>
+        </div>
         {this.props.databases.length === 0 ?
             this.renderNoCollections(isWritable) : null}
         <CreateDatabaseDialog />
diff --git a/src/internal-packages/server-stats/lib/component/index.jsx b/src/internal-packages/server-stats/lib/component/index.jsx
index 85a7bf5d0fc..a13e4e10133 100644
--- a/src/internal-packages/server-stats/lib/component/index.jsx
+++ b/src/internal-packages/server-stats/lib/component/index.jsx
@@ -17,13 +17,22 @@ class RTSSComponent extends React.Component {
    */
   constructor(props) {
     super(props);
+    this.state = {activeTab: 0};
     this.TabNavBar = app.appRegistry.getComponent('App.TabNavBar');
   }
 
+
   componentDidMount() {
     Actions.restart();
   }
 
+  onTabClicked(idx) {
+    if (this.state.activeTab === idx) {
+      return;
+    }
+    this.setState({activeTab: idx});
+  }
+
   /**
    * Renders the component.
    *
@@ -38,7 +47,8 @@ class RTSSComponent extends React.Component {
           theme="light"
           tabs={['Databases', 'Performance']}
           views={[databasesView, performanceView]}
-          activeTabIndex={0}
+          activeTabIndex={this.state.activeTab}
+          onTabClicked={this.onTabClicked.bind(this)}
           className="rt-nav"
         />
       </div>
diff --git a/src/internal-packages/server-stats/lib/component/performance-component.jsx b/src/internal-packages/server-stats/lib/component/performance-component.jsx
index dd91a3ee06b..1f2b29a254c 100644
--- a/src/internal-packages/server-stats/lib/component/performance-component.jsx
+++ b/src/internal-packages/server-stats/lib/component/performance-component.jsx
@@ -22,15 +22,21 @@ class PerformanceComponent extends React.Component {
   render() {
     return (
       <section className="rt-perf">
-        <TimeAndPauseButton paused={false} />
-        {app.dataService.isMongos() ? this.renderTopMessage() : null}
-        <DBErrorComponent store={DBErrorStore} />
-        <section className="rt__graphs-out">
-          <GraphsComponent interval={this.props.interval} />
-        </section>
-        <section className="rt__lists-out">
-          <ListsComponent interval={this.props.interval} />
-        </section>
+        <div className="controls-container">
+          {app.dataService.isMongos() ? this.renderTopMessage() : null}
+          <TimeAndPauseButton paused={false} />
+          <DBErrorComponent store={DBErrorStore} />
+        </div>
+        <div className="column-container">
+          <div className="column main">
+            <section className="rt__graphs-out">
+              <GraphsComponent interval={this.props.interval} />
+            </section>
+            <section className="rt__lists-out">
+              <ListsComponent interval={this.props.interval} />
+            </section>
+          </div>
+        </div>
       </section>
     );
   }
diff --git a/src/internal-packages/server-stats/styles/rt-lists.less b/src/internal-packages/server-stats/styles/rt-lists.less
index c7b6f4cbc56..911aae9daf6 100644
--- a/src/internal-packages/server-stats/styles/rt-lists.less
+++ b/src/internal-packages/server-stats/styles/rt-lists.less
@@ -2,15 +2,12 @@
   height: 100%;
 }
 .rt-perf {
-  background-color: #3D4247;
-  height: auto;
-  overflow: scroll;
-  padding-bottom: 100px;
-  position: absolute;
-  top: 88px;
-  right: 10px;
-  bottom: 10px;
-  left: 260px;
+  .column-container {
+    padding: 12px;
+  }
+  .column.main {
+    background-color: #3D4247;
+  }
 }
 
 .rt__lists-out {
diff --git a/src/internal-packages/server-stats/styles/rt-nav.less b/src/internal-packages/server-stats/styles/rt-nav.less
index 40de6bb7e07..cb2b333c7d3 100644
--- a/src/internal-packages/server-stats/styles/rt-nav.less
+++ b/src/internal-packages/server-stats/styles/rt-nav.less
@@ -4,11 +4,6 @@
   border-bottom: 1px solid @gray7;
   padding-top: 4px;
   padding-left: 20px;
-  position: fixed;
-  top: 46px;
-  left: 250px;
-  right: 0;
-  z-index: 1;
 }
 
 .time,
diff --git a/src/internal-packages/server-stats/styles/rtss-databases.less b/src/internal-packages/server-stats/styles/rtss-databases.less
index bb1d391fe44..0989ccd2ac9 100644
--- a/src/internal-packages/server-stats/styles/rtss-databases.less
+++ b/src/internal-packages/server-stats/styles/rtss-databases.less
@@ -1,12 +1,5 @@
 .rtss-databases {
   background-color: @gray8;
-  overflow-y: scroll;
-  padding: 0 20px 100px 20px;
-  position: absolute;
-  top: 78px;
-  right: 0;
-  bottom: 0;
-  left: 250px;
 
   &-link, &-link:hover, &-link:active {
     font-weight: bold;
@@ -18,11 +11,6 @@
     border-bottom: 1px solid @gray7;
     padding-top: 4px;
     padding-left: 20px;
-    position: fixed;
-    top: 46px;
-    left: 250px;
-    right: 0;
-    z-index: 1;
   }
 }
 
diff --git a/src/internal-packages/sidebar/lib/components/index.jsx b/src/internal-packages/sidebar/lib/components/index.jsx
index a71dab94bb3..5608b4c47bf 100644
--- a/src/internal-packages/sidebar/lib/components/index.jsx
+++ b/src/internal-packages/sidebar/lib/components/index.jsx
@@ -16,12 +16,16 @@ class ConnectedSidebar extends React.Component {
   render() {
     return (
       <StoreConnector store={SidebarStore}>
-        <Sidebar />
+        <Sidebar onCollapse={this.props.onCollapse.bind(this)}/>
       </StoreConnector>
     );
   }
 }
 
+ConnectedSidebar.propTypes = {
+  onCollapse: React.PropTypes.func
+};
+
 ConnectedSidebar.displayName = 'ConnectedSidbar';
 
 module.exports = ConnectedSidebar;
diff --git a/src/internal-packages/sidebar/lib/components/sidebar.jsx b/src/internal-packages/sidebar/lib/components/sidebar.jsx
index 51fe0aff68f..c60feb979a2 100644
--- a/src/internal-packages/sidebar/lib/components/sidebar.jsx
+++ b/src/internal-packages/sidebar/lib/components/sidebar.jsx
@@ -11,6 +11,25 @@ const SidebarInstanceProperties = require('./sidebar-instance-properties');
 
 
 class Sidebar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { collapsed: false };
+  }
+
+  getSidebarClasses() {
+    return 'compass-sidebar' +
+      (this.state.collapsed ? ' compass-sidebar-collapsed' : ' compass-sidebar-expanded');
+  }
+
+  getToggleClasses() {
+    return 'fa' +
+      (this.state.collapsed ? ' fa-forward' : ' fa-backward');
+  }
+
+  handleCollapse() {
+    this.props.onCollapse();
+    this.setState({ collapsed: !this.state.collapsed });
+  }
 
   handleFilter(event) {
     const searchString = event.target.value;
@@ -27,7 +46,13 @@ class Sidebar extends React.Component {
 
   render() {
     return (
-      <div className="compass-sidebar" data-test-id="instance-sidebar">
+      <div className={this.getSidebarClasses()} data-test-id="instance-sidebar">
+        <div className="compass-sidebar-toggle"
+          onClick={this.handleCollapse.bind(this)}
+          data-test-id="toggle-sidebar"
+        >
+          <i className={this.getToggleClasses()}></i>
+        </div>
         <StoreConnector store={InstanceStore}>
           <SidebarInstanceProperties
             connection={app.connection}
@@ -61,6 +86,7 @@ class Sidebar extends React.Component {
 Sidebar.propTypes = {
   instance: React.PropTypes.object,
   databases: React.PropTypes.array,
+  onCollapse: React.PropTypes.func,
   activeNamespace: React.PropTypes.string,
   expanded: React.PropTypes.bool
 };
diff --git a/src/internal-packages/sidebar/styles/index.less b/src/internal-packages/sidebar/styles/index.less
index af4aabaa50f..45890582210 100644
--- a/src/internal-packages/sidebar/styles/index.less
+++ b/src/internal-packages/sidebar/styles/index.less
@@ -1,18 +1,17 @@
-.compass-sidebar-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-}
-
 .compass-sidebar {
   margin: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 250px;
   background: #4c5259;
   color: #bfbfbe;
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  &-expanded {
+    flex-basis: 250px;
+  }
+
+  &-collapsed {
+    flex-basis: 36px;
+  }
 
   &-content {
     overflow-y: scroll;
@@ -22,6 +21,19 @@
     height: ~"calc(100% - 112px)";
   }
 
+  &-toggle {
+    background: #343B43;
+    height: 12px;
+    line-height: 11px;
+    padding-right: 3px;
+    text-align: right;
+    cursor: pointer;
+    i {
+      line-height: 11px;
+      font-size: 10px;
+    }
+  }
+
   &-title {
     white-space: nowrap;
     overflow-x: hidden;
@@ -156,7 +168,6 @@
     color: #fff;
     width: 100%;
     border: none;
-    transition: all 150ms ease;
     font-size: 14px;
     font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -279,3 +290,33 @@
     }
   }
 }
+
+.compass-sidebar-collapsed {
+  overflow: hidden;
+  .compass-sidebar-content,
+  .compass-sidebar-property-column,
+  .compass-sidebar-instance-hostname,
+  .compass-sidebar-instance-version {
+    display: none;
+  }
+  .compass-sidebar-instance {
+    padding-top: 8px;
+    padding-bottom: 6px;
+  }
+  .compass-sidebar-properties {
+    padding-bottom: 0;
+  }
+  .compass-sidebar-stats {
+    padding-top: 6px;
+    padding-bottom: 0;
+    height: 36px;
+    margin: 0;
+  }
+  .compass-sidebar-search-input {
+    width: 30px;
+    padding: 11px 6px 5px 30px;
+  }
+  .compass-sidebar-search-icon {
+    top: 10px;
+  }
+}
diff --git a/src/internal-packages/validation/lib/components/validation.jsx b/src/internal-packages/validation/lib/components/validation.jsx
index 043c4e98687..26465b9d557 100644
--- a/src/internal-packages/validation/lib/components/validation.jsx
+++ b/src/internal-packages/validation/lib/components/validation.jsx
@@ -58,20 +58,8 @@ class Validation extends React.Component {
         />
       );
 
-    const activeButton = this.props.isExpressibleByRules ?
-      this.props.viewMode : 'JSON';
-
     return (
-      <div>
-        <ValidationStatusRow>
-          <ViewSwitcher
-            label="View as:"
-            buttonLabels={['Rule Builder', 'JSON']}
-            activeButton={activeButton}
-            onClick={this.switchView.bind(this)}
-            disabled={!this.props.isExpressibleByRules}
-          />
-        </ValidationStatusRow>
+      <div className="column-container">
         <div className="column main">
           {view}
         </div>
@@ -88,11 +76,22 @@ class Validation extends React.Component {
   }
 
   render() {
+    const activeButton = this.props.isExpressibleByRules ?
+      this.props.viewMode : 'JSON';
     return (
-      <div className="validation header-margin">
-        <div className="column-container with-message">
-          {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
+      <div className="validation-container">
+        <div className="controls-container">
+          <ValidationStatusRow>
+            <ViewSwitcher
+              label="View as:"
+              buttonLabels={['Rule Builder', 'JSON']}
+              activeButton={activeButton}
+              onClick={this.switchView.bind(this)}
+              disabled={!this.props.isExpressibleByRules}
+            />
+          </ValidationStatusRow>
         </div>
+        {this.CollectionStore.isReadonly() ? this.renderReadonly() : this.renderComponent()}
       </div>
     );
   }
diff --git a/test/support/spectron-support.js b/test/support/spectron-support.js
index f5c5d082866..fc34abd5cf0 100644
--- a/test/support/spectron-support.js
+++ b/test/support/spectron-support.js
@@ -477,6 +477,14 @@ function addClickCommands(client) {
       });
   });
 
+  /**
+   * toggle the sidebar
+   */
+  client.addCommand('clickToggleInSidebar', function() {
+    const base = selector('toggle-sidebar');
+    return this.waitForVisibleInCompass(base).click(base);
+  });
+
   /**
    * Click on a collection in the sidebar.
    *