diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js
index b8a63f95e..dc58cc5ec 100644
--- a/app/assets/javascripts/protocols/index.js
+++ b/app/assets/javascripts/protocols/index.js
@@ -1,5 +1,5 @@
 //= require protocols/import_export/import
-/* global ProtocolRepositoryHeader PdfPreview */
+/* global ProtocolRepositoryHeader PdfPreview DataTableHelpers */
 
 // Global variables
 var rowsSelected = [];
@@ -27,7 +27,7 @@ function initProtocolsTable() {
 
   protocolsDatatable = protocolsTableEl.DataTable({
     order: [[1, "asc"]],
-    dom: "RB<'main-actions'lf>t<'pagination-row'ip>",
+    dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
     stateSave: true,
     sScrollX: '100%',
     sScrollXInner: '100%',
@@ -110,6 +110,12 @@ function initProtocolsTable() {
         JSON.stringify(data)
       );
     },
+    fnInitComplete: function(e) {
+      var dataTableWrapper = $(e.nTableWrapper);
+      DataTableHelpers.initLengthAppearance(dataTableWrapper);
+      DataTableHelpers.initSearchField(dataTableWrapper, 'Enter...');
+      dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
+    },
     stateLoadCallback: function (settings) {
       // Load the table state for the current team
       var state = localStorage.getItem(
@@ -123,6 +129,12 @@ function initProtocolsTable() {
       return null;
     }
   });
+
+  $('#wrapper').on('sideBar::shown sideBar::hidden', function() {
+    if (protocolsDatatable) {
+      protocolsDatatable.columns.adjust();
+    }
+  });
 }
 
 function initRowSelection() {
diff --git a/app/assets/stylesheets/label_templates/index.scss b/app/assets/stylesheets/label_templates/index.scss
index e76164f09..d7da963d5 100644
--- a/app/assets/stylesheets/label_templates/index.scss
+++ b/app/assets/stylesheets/label_templates/index.scss
@@ -73,6 +73,10 @@
       .dataTables_scrollHead {
         flex-shrink: 0;
       }
+
+      .dataTables_scrollBody {
+        height: 100%;
+      }
     }
 
     .pagination-row {
diff --git a/app/assets/stylesheets/partials/_sidebar.scss b/app/assets/stylesheets/partials/_sidebar.scss
index a25762d7c..bc180e478 100644
--- a/app/assets/stylesheets/partials/_sidebar.scss
+++ b/app/assets/stylesheets/partials/_sidebar.scss
@@ -165,9 +165,12 @@
         font-weight: bold;
       }
 
+      .fas {
+        margin-right: .5em;
+      }
+
       .fa-folder {
         color: $brand-primary-light;
-        margin-right: .5em;
       }
 
       &.back-button::before {
diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss
index 2c1f975ab..ee2256e5d 100644
--- a/app/assets/stylesheets/protocol_management.scss
+++ b/app/assets/stylesheets/protocol_management.scss
@@ -25,7 +25,6 @@
 
 #protocols-index,
 #load-from-repository-modal {
-  padding: 0;
 
   .nav-tabs > li {
     text-transform: uppercase;
diff --git a/app/assets/stylesheets/protocols/index.scss b/app/assets/stylesheets/protocols/index.scss
new file mode 100644
index 000000000..246462aa1
--- /dev/null
+++ b/app/assets/stylesheets/protocols/index.scss
@@ -0,0 +1,26 @@
+// scss-lint:disable IdSelector
+
+.protocols-index {
+  .protocols-datatable {
+    --content-header-size: 5em;
+    height: calc(100vh - var(--navbar-height) - var(--content-header-size));
+
+    #protocols-table_wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+    }
+
+    .dataTables_scroll {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      height: calc(100% - var(--datatable-pagination-row));
+    }
+
+    .dataTables_scrollBody {
+      height: 100%;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 5a6a8a430..8bd66b1b1 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -533,22 +533,6 @@ a[data-toggle="tooltip"] {
 }
 
 .protocols-datatable {
-  .dataTables_wrapper {
-    clear: both;
-
-    .main-actions,
-    .pagination-row {
-      display: flex;
-    }
-
-    .dataTables_filter,
-    .dataTables_info,
-    .dataTables_paginate,
-    .dataTables_length {
-      flex-grow: 1;
-    }
-  }
-
   table {
     tbody tr.selected {
       & > td:nth-child(3), td:nth-child(4) {
diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb
index 5533c0564..bcd5e32c3 100644
--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@@ -9,110 +9,88 @@
   <%= content_for :sidebar do %>
    <%= render partial: "/shared/sidebar/templates_sidebar", locals: {active: :protocol} %>
   <% end %>
-  <div class="content-pane flexible" id="protocols-index">
-    <ul class="nav nav-tabs nav-settings">
-      <li role="presentation" class="<%= "active" if @type == :public %>">
-        <%= link_to t("protocols.index.navigation.public"), protocols_path(team: @current_team, type: :public) %>
-      </li>
-      <li role="presentation" class="<%= "active" if @type == :private %>">
-        <%= link_to t("protocols.index.navigation.private"), protocols_path(team: @current_team, type: :private) %>
-      </li>
-      <li role="presentation" class="<%= "active" if @type == :external_protocols %>">
-        <%= link_to t("protocols.index.navigation.external_protocols"),
-              protocols_path(team: @current_team, type: :external_protocols) %>
-      </li>
-      <li role="presentation" class="<%= "active" if @type == :archive %>">
-        <%= link_to t("protocols.index.navigation.archive"), protocols_path(team: @current_team, type: :archive) %>
-      </li>
-    </ul>
-    <div class="tab-content">
-      <div class="tab-pane tab-pane-settings tab-pane-protocols active <%= @type %>" role="tabpanel">
-        <!-- Buttons container -->
-        <% if @type.in? [:public, :private] %>
-          <div class="protocols-description">
-            <%= t(@type == :public ? "protocols.index.public_description" : "protocols.index.private_description") %>
-          </div>
-          <div class="sci-btn-group" role="group">
-            <%= button_to protocols_path(type: @type), disabled: !can_create_protocols_in_repository?(@current_team), class: 'btn btn-primary' do %>
-              <span class="fas fa-plus"></span>
-              <span class="hidden-xs">&nbsp;<%= t("protocols.index.create_new") %></span>
-            <% end %>
-            <button class="btn btn-light disabled hidden" data-action="clone">
-              <span class="fas fa-copy"></span>
-              <span class="hidden-xs">&nbsp;<%= t("protocols.index.clone_btn") %></span>
-            </button>
-            <% if @type == :public %>
-              <button class="btn btn-light disabled hidden" data-action="make-private" data-url="<%= make_private_protocols_path %>">
-                <span class="fas fa-eye-slash"></span>
-                <span class="hidden-xs">&nbsp;<%= t("protocols.index.make_private") %></span>
-              </button>
-            <% elsif @type == :private %>
-              <button class="btn btn-light disabled hidden" data-action="publish" data-url="<%= publish_protocols_path %>">
-                <span class="fas fa-eye"></span>
-                <span class="hidden-xs">&nbsp;<%= t("protocols.index.publish") %></span>
-              </button>
-            <% end %>
-          </div>
-          <div id="import-export-protocols" class="sci-btn-group" role="group">
-            <button class="btn btn-light btn-open-file <%= 'disabled hidden' unless can_create_protocols_in_repository?(@current_team) %>"
-                  data-toggle="dropdown"
-                  aria-haspopup="true"
-                  aria-expanded="false">
-              <span class="fas fa-download"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span>
-            </button>
-            <% if can_create_protocols_in_repository?(@current_team) %>
-              <ul class="dropdown-menu">
-                <li>
-                  <a class="btn-link-alt btn-default-link btn-open-file" <%= can_create_protocols_in_repository?(@current_team) ? 'data-action="import"' : 'disabled="disabled"' %>>
-                    <span class="fas fa-paperclip"></span>
-                    <span class="hidden-xs"><%= t("protocols.index.import_alt") %></span>
-                    <input type="file" value="" accept=".eln" data-role="import-file-input"
-                    data-team-id="<%= @current_team.id %>"
-                    data-type="<%= @type %>" data-import-url="<%= import_protocols_path %>"
-                    <%= 'disabled="disabled"' unless can_create_protocols_in_repository?(@current_team) %>>
-                  </a>
-                </li>
-                <li>
-                <%= link_to "#modal-import-json-protocol", data: { toggle: 'modal' } do %>
-                  <span class="fas fa-paperclip"></span>
-                  <span class="hidden-xs"><%= t("protocols.index.import_json") %></span>
-                <% end %>
-                </li>
-              </ul>
-            <% end %>
-            <button class="btn btn-light disabled hidden" data-action="export" data-export-url="<%= export_protocols_path() %>">
-              <span class="fas fa-upload"></span>
-              <span class="hidden-xs">&nbsp;<%= t("protocols.index.export") %></span>
-            </button>
-          </div>
-
-          <div class="sci-btn-group" role="group">
-            <button class="btn btn-light disabled hidden" data-action="archive" data-url="<%= archive_protocols_path %>">
-              <span class="fas fa-archive"></span>
-              <span class="hidden-xs">&nbsp;<%= t("protocols.index.archive_action") %></span>
-            </button>
-          </div>
-        <% elsif @type == :archive %>
-          <div class="protocols-description">
-            <%= t("protocols.index.archive.description") %>
-          </div>
-          <div class="sci-btn-group" role="group">
-            <button class="btn btn-light disabled hidden" data-action="restore" data-url="<%= restore_protocols_path %>">
-              <span class="fas fa-sync-alt"></span>
-              <span class="hidden-xs">&nbsp;<%= t("protocols.index.restore") %></span>
-            </button>
-          </div>
-        <% end %>
-
-        <%# Main tab content %>
-        <% if @type == :external_protocols %>
-          <%= render partial: "protocols/index/external_protocols_tab.html.erb" %>
-        <% else %>
-          <%= render partial: "protocols/index/protocols_datatable.html.erb" %>
-        <% end %>
+  <% provide(:container_class, 'no-second-nav-container') %>
 
+  <div class="content-pane flexible protocols-index">
+    <div class="content-header sticky-header">
+      <div class="title-row">
+        <h1><%= t('sidebar.templates.protocol_templates') %></h1>
       </div>
     </div>
+    <div class="protocols-container">
+      <!-- Refactor with new toolbar
+      <div class="sci-btn-group" role="group">
+        <%= button_to protocols_path(type: @type), disabled: !can_create_protocols_in_repository?(@current_team), class: 'btn btn-primary' do %>
+          <span class="fas fa-plus"></span>
+          <span class="hidden-xs">&nbsp;<%= t("protocols.index.create_new") %></span>
+        <% end %>
+        <button class="btn btn-light disabled hidden" data-action="clone">
+          <span class="fas fa-copy"></span>
+          <span class="hidden-xs">&nbsp;<%= t("protocols.index.clone_btn") %></span>
+        </button>
+        <% if @type == :public %>
+          <button class="btn btn-light disabled hidden" data-action="make-private" data-url="<%= make_private_protocols_path %>">
+            <span class="fas fa-eye-slash"></span>
+            <span class="hidden-xs">&nbsp;<%= t("protocols.index.make_private") %></span>
+          </button>
+        <% elsif @type == :private %>
+          <button class="btn btn-light disabled hidden" data-action="publish" data-url="<%= publish_protocols_path %>">
+            <span class="fas fa-eye"></span>
+            <span class="hidden-xs">&nbsp;<%= t("protocols.index.publish") %></span>
+          </button>
+        <% end %>
+      </div>
+      <div id="import-export-protocols" class="sci-btn-group" role="group">
+        <button class="btn btn-light btn-open-file <%= 'disabled hidden' unless can_create_protocols_in_repository?(@current_team) %>"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false">
+          <span class="fas fa-download"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span>
+        </button>
+        <% if can_create_protocols_in_repository?(@current_team) %>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="btn-link-alt btn-default-link btn-open-file" <%= can_create_protocols_in_repository?(@current_team) ? 'data-action="import"' : 'disabled="disabled"' %>>
+                <span class="fas fa-paperclip"></span>
+                <span class="hidden-xs"><%= t("protocols.index.import_alt") %></span>
+                <input type="file" value="" accept=".eln" data-role="import-file-input"
+                data-team-id="<%= @current_team.id %>"
+                data-type="<%= @type %>" data-import-url="<%= import_protocols_path %>"
+                <%= 'disabled="disabled"' unless can_create_protocols_in_repository?(@current_team) %>>
+              </a>
+            </li>
+            <li>
+            <%= link_to "#modal-import-json-protocol", data: { toggle: 'modal' } do %>
+              <span class="fas fa-paperclip"></span>
+              <span class="hidden-xs"><%= t("protocols.index.import_json") %></span>
+            <% end %>
+            </li>
+          </ul>
+        <% end %>
+        <button class="btn btn-light disabled hidden" data-action="export" data-export-url="<%= export_protocols_path() %>">
+          <span class="fas fa-upload"></span>
+          <span class="hidden-xs">&nbsp;<%= t("protocols.index.export") %></span>
+        </button>
+      </div>
+
+      <div class="sci-btn-group" role="group">
+        <button class="btn btn-light disabled hidden" data-action="archive" data-url="<%= archive_protocols_path %>">
+          <span class="fas fa-archive"></span>
+          <span class="hidden-xs">&nbsp;<%= t("protocols.index.archive_action") %></span>
+        </button>
+      </div>
+      <div class="protocols-description">
+        <%= t("protocols.index.archive.description") %>
+      </div>
+      <div class="sci-btn-group" role="group">
+        <button class="btn btn-light disabled hidden" data-action="restore" data-url="<%= restore_protocols_path %>">
+          <span class="fas fa-sync-alt"></span>
+          <span class="hidden-xs">&nbsp;<%= t("protocols.index.restore") %></span>
+        </button>
+      </div>
+      -->
+      <%= render partial: "protocols/index/protocols_datatable.html.erb" %>
+    </div>
   </div>
 <% end %>
 
diff --git a/app/views/shared/sidebar/_templates_sidebar.html.erb b/app/views/shared/sidebar/_templates_sidebar.html.erb
index 8c7119cc9..184964c6b 100644
--- a/app/views/shared/sidebar/_templates_sidebar.html.erb
+++ b/app/views/shared/sidebar/_templates_sidebar.html.erb
@@ -1,8 +1,16 @@
 <ul class="sidebar-branch">
   <li class="sidebar-leaf">
+    <i class="fas fa-caret-right toggle-branch collapsed"></i>
     <%= link_to t('sidebar.templates.protocol_templates'),
                 protocols_path,
-                class: "sidebar-link #{'selected' if active == :protocol}" %>
+                class: "sidebar-link #{'selected' if active == :protocol && params[:type] != 'archive'}" %>
+    <ul class="sidebar-branch">
+      <li class="sidebar-leaf">
+      <%= link_to protocols_path(type: :archive), class: "sidebar-link #{'selected' if active == :protocol && params[:type] == 'archive'}" do %>
+        <i class="fas fa-archive"></i>
+        <%= t("protocols.index.navigation.archive") %>
+      <% end %>
+    </ul>
   </li>
   <% if can_view_label_templates?(current_team) %>
     <li class="sidebar-leaf">