diff --git a/app/assets/javascripts/protocols/external_protocols_tab.js b/app/assets/javascripts/protocols/external_protocols_tab.js
index 85b838e4b..2260d4793 100644
--- a/app/assets/javascripts/protocols/external_protocols_tab.js
+++ b/app/assets/javascripts/protocols/external_protocols_tab.js
@@ -92,7 +92,6 @@ function applySearchCallback() {
         resetPreviewPanel();
         $('.empty-text').hide();
         $('.list-wrapper').show();
-
         $('.list-wrapper').html(data.html);
         $('.list-wrapper').scrollTo(0);
       } else {
diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss
index ea738745d..d758355a9 100644
--- a/app/assets/stylesheets/protocol_management.scss
+++ b/app/assets/stylesheets/protocol_management.scss
@@ -57,6 +57,7 @@
 
   .tab-pane-settings {
     border: 0;
+    height: calc(100vh - 167px);
   }
 }
 
@@ -65,79 +66,105 @@
 }
 
 .external-protocols-tab {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
 
-  .protocols-search-bar-panel {
-    align-items: center;
+  .header {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 15px;
-    padding-right: 0;
+    flex-wrap: wrap;
 
-    .service-provider {
-      display: flex;
+    .protocols-search-bar-panel {
       align-items: center;
-      width: 50%;
-    }
+      display: flex;
+      flex-basis: 500px;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-bottom: 15px;
+      padding-right: 0;
 
-    .protocolsio-logo {
-      height: 30px;
-      width: 30px;
-    }
-
-    .protocolsio-title {
-      color: $brand-primary;
-      font-size: 14px;
-      margin-left: 3px;
-      vertical-align: middle;
-    }
-
-    .input-group {
-      margin-bottom: 0;
-      max-width: 50%;
-
-      .form-control {
-        border-right: 0;
+      .service-provider {
+        align-items: center;
+        display: flex;
+        width: 120px;
       }
 
-      .input-group-addon {
-        background: $color-white;
+      .protocolsio-logo {
+        height: 30px;
+        width: 30px;
+      }
+
+      .protocolsio-title {
+        font-size: 14px;
+        margin-left: 3px;
+        vertical-align: middle;
+      }
+
+      .input-group {
+        margin-bottom: 0;
+        width: calc(100% - 130px);
+
+        .form-control {
+          border-radius: 4px;
+          padding-right: 34px;
+        }
+
+        .input-group-addon {
+          align-items: center;
+          background: transparent;
+          border: 0;
+          color: $color-silver-chalice;
+          display: flex;
+          height: 34px;
+          justify-content: center;
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 34px;
+          z-index: 5;
+        }
+      }
+    }
+
+    .protocol-sort {
+      padding-left: 7px;
+
+      span {
         color: $color-silver-chalice;
+        font-size: 14px;
       }
-    }
-  }
 
-  .protocol-sort {
-    padding-left: 7px;
+      .btn-group {
+        margin-bottom: 10px;
+        margin-top: 6px;
+        padding-left: 3px;
 
-    span {
-      color: $color-silver-chalice;
-      font-size: 14px;
-    }
+        label {
+          padding-bottom: 0;
+          padding-top: 0;
 
-    .btn-group {
-      margin-bottom: 10px;
-      margin-top: 6px;
-      padding-left: 3px;
-
-      label {
-        padding-bottom: 0;
-        padding-top: 0;
-
-        &.active {
-          background: $color-gainsboro;
-          border-radius: 5px !important;
-          color: $color-emperor;
+          &.active {
+            background: $color-gainsboro;
+            border-radius: 5px !important;
+            color: $color-emperor;
+          }
         }
       }
     }
   }
+  .main-protocol-panel {
+    display: flex;
+    flex-grow: 1;
+    width: calc(100% + 15px);
+  }
 
   .protocol-list-side-panel {
     background-color: $color-white;
-    border-right: 1px solid $color-silver-chalice;
-    border-top: 1px solid $color-silver-chalice;
-    height: 600px;
+    border-right: 1px solid $color-alto;
+    border-top: 1px solid $color-alto;
+    flex-basis: 400px;
+    height: 100%;
     padding-right: 0;
 
     .row {
@@ -155,17 +182,18 @@
     .list-wrapper {
       height: 100%;
       overflow: auto;
+      position: relative;
     }
 
     .protocol-card {
       border-bottom: 1px solid $color-gainsboro;
-      margin-right: 20px;
+      margin-right: 15px;
       padding: 12px 11px;
 
       &.active {
         border: 2px solid $brand-primary;
         border-radius: 2px;
-        box-shadow: 0 1px 4px 0 $color-black;
+        box-shadow: 0 1px 4px 0 $color-alto;
         padding-bottom: 7px;
       }
 
@@ -205,8 +233,9 @@
 
   .protocol-preview-panel {
     background-color: $color-concrete;
-    border-top: 1px solid $color-silver-chalice;
-    height: 600px;
+    border-top: 1px solid $color-alto;
+    flex-grow: 1;
+    height: 100%;
     padding-left: 0;
     padding-right: 0;
 
@@ -284,10 +313,51 @@
 
   .external-import-btn {
     background-color: $brand-primary;
-    border: none;
+    border: 0;
     color: $color-white;
     font-size: 12px;
     padding-bottom: 3px;
     padding-top: 3px;
   }
+
+  .footer {
+    background: $color-white;
+    bottom: -30px;
+    box-shadow: 0 -1px 4px 0 $color-gainsboro;
+    height: 30px;
+    left: -15px;
+    position: absolute;
+    width: calc(100% + 30px);
+  }
+}
+
+@media (max-width: 900px) {
+  .external-protocols-tab {
+    .header {
+      .protocol-sort {
+        padding-left: 0;
+      }
+
+      .protocols-search-bar-panel {
+        flex-basis: 100%;
+      }
+    }
+
+    .main-protocol-panel {
+      display: block;
+
+      .protocol-list-side-panel {
+        border-right: 0;
+        height: 200px;
+        width: 100%;
+      }
+
+      .protocol-preview-panel {
+        height: calc(100% - 200px);
+        left: -15px;
+        position: relative;
+        width: calc(100% + 15px);
+      }
+    }
+  }
 }
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 311ebd57b..3f7c529d1 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -403,7 +403,6 @@ a[data-toggle="tooltip"] {
   border-left: 1px solid $color-alto;
   border-right: 1px solid $color-alto;
   border-bottom: 1px solid $color-alto;
-  margin-bottom: 50px;
 }
 
 .breadcrumb-teams {
diff --git a/app/views/protocols/index/_external_protocols_tab.html.erb b/app/views/protocols/index/_external_protocols_tab.html.erb
index 2ddf66f45..5b9e1d22d 100644
--- a/app/views/protocols/index/_external_protocols_tab.html.erb
+++ b/app/views/protocols/index/_external_protocols_tab.html.erb
@@ -1,14 +1,15 @@
 <div class='external-protocols-tab'>
-  <div class='row'>
-    <%= form_tag team_list_external_protocol_path(@current_team.id),
-      method: :get,
-      class: 'protocols-search-bar',
-      remote: true do %>
-      <div class='col-md-5 protocols-search-bar-panel'>
+  <%= form_tag team_list_external_protocol_path(@current_team.id),
+    method: :get,
+    class: 'protocols-search-bar',
+    remote: true do %>
+    <div class='header'>
+      <div class='protocols-search-bar-panel'>
         <div class='service-provider'>
           <%= image_tag 'external_protocols/protocolsio_logo.png',
             class: 'protocolsio-logo' %>
-          <span class='protocolsio-title'><%= t('protocols.index.external_protocols.protocolsio_title') %></span>
+          <a class='protocolsio-title' href='<%= Constants::PROTOCOLS_IO_URL %>' target='_blank'>
+            <%= t('protocols.index.external_protocols.protocolsio_title') %></a>
           <%= hidden_field_tag 'protocol_source', 'protocolsio/v3' %>
           <%= hidden_field_tag 'page_id', 1, id: 'page-id' %>
         </div>
@@ -24,45 +25,42 @@
         </div>
       </div>
 
-      <div class='col-md-7'>
-        <div class='protocol-sort'>
-          <span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
-          <div class='btn-group' data-toggle='buttons'>
-            <label class='btn btn-link active'>
-              <input type='radio' name='sort_by' id='alphabetically-asc' value='alpha_asc' checked>
-              <%= t('protocols.index.external_protocols.sort_by.alphabetically-asc') %>
-            </label>
-            <label class='btn btn-link'>
-              <input type='radio' name='sort_by' id='alphabetically-desc' value='alpha_desc'>
-              <%= t('protocols.index.external_protocols.sort_by.alphabetically-desc') %>
-            </label>
-            <label class='btn btn-link'>
-              <input type='radio' name='sort_by' id='newest' value='newest'>
-              <%= t('protocols.index.external_protocols.sort_by.newest') %>
-            </label>
-            <label class='btn btn-link'>
-              <input type='radio' name='sort_by' id='oldest' value='oldest'>
-              <%= t('protocols.index.external_protocols.sort_by.oldest') %>
-            </label>
+      <div class='protocol-sort'>
+        <span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
+        <div class='btn-group' data-toggle='buttons'>
+          <label class='btn btn-link active'>
+            <input type='radio' name='sort_by' id='alphabetically-asc' value='alpha_asc' checked>
+            <%= t('protocols.index.external_protocols.sort_by.alphabetically-asc') %>
+          </label>
+          <label class='btn btn-link'>
+            <input type='radio' name='sort_by' id='alphabetically-desc' value='alpha_desc'>
+            <%= t('protocols.index.external_protocols.sort_by.alphabetically-desc') %>
+          </label>
+          <label class='btn btn-link'>
+            <input type='radio' name='sort_by' id='newest' value='newest'>
+            <%= t('protocols.index.external_protocols.sort_by.newest') %>
+          </label>
+          <label class='btn btn-link'>
+            <input type='radio' name='sort_by' id='oldest' value='oldest'>
+            <%= t('protocols.index.external_protocols.sort_by.oldest') %>
           </label>
         </div>
       </div>
     </div>
 
   <% end %>
-  </div>
 
-  <div class='row main-protocol-panel'>
-    <div class='col-md-5 protocol-list-side-panel'>
+  <div class='main-protocol-panel'>
+    <div class='protocol-list-side-panel'>
 
       <div class='row empty-text'>
         <%= t('protocols.index.external_protocols.list_panel.empty_text') %>
       </div>
 
-      <div class='list-wrapper'></div>
+      <div class='list-wrapper perfect-scrollbar'></div>
     </div>
 
-    <div class='col-md-7 protocol-preview-panel'>
+    <div class='protocol-preview-panel'>
       <div class='empty-preview-panel'>
 
         <div class='row'>
@@ -98,7 +96,8 @@
       </div>
     </div>
   </div>
-</div>
+
+  <div class='footer'></div>
 </div>
 
 <%= javascript_include_tag "protocols/external_protocols_tab.js" %>
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb
index 3d42fb328..41754d4da 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@@ -53,7 +53,9 @@
         <% if current_user.teams.length > 0 %>
           <li id="team-switch">
             <div class="btn-group">
-              <button type="button" class="btn btn-default"><%= truncate_team_name(current_team.name) %></button>
+              <button type="button" class="btn btn-default" data-toggle="dropdown">
+                <%= truncate_team_name(current_team.name) %>
+              </button>
               <button type="button"
                       class="btn btn-default dropdown-toggle"
                       title="<%= t('nav.label.teams') %>"
diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb
index d5767762e..9bbff38bc 100644
--- a/config/initializers/constants.rb
+++ b/config/initializers/constants.rb
@@ -213,6 +213,8 @@ class Constants
     }
   }.freeze
 
+  PROTOCOLS_IO_URL = 'https://www.protocols.io/'
+  
   PROTOCOLS_IO_V3_API = {
     base_uri: 'https://www.protocols.io/api/v3/',
     default_timeout: 10,