diff --git a/app/assets/javascripts/protocols/external_protocols_tab.js b/app/assets/javascripts/protocols/external_protocols_tab.js
new file mode 100644
index 000000000..eebabc86c
--- /dev/null
+++ b/app/assets/javascripts/protocols/external_protocols_tab.js
@@ -0,0 +1,30 @@
+function applyClickCallbackOnProtocolCards() {
+  $('.protocol-card').off('click').on('click', function(e) {
+    $.ajax({
+      url: $(this).data('show-url'),
+      type: 'GET',
+      dataType: 'json',
+      data: {
+        protocol_source: $(this).data('protocol-source'),
+        protocol_id: $(this).data('show-protocol-id')
+      },
+      beforeSend: animateSpinner($('.protocol-preview-panel'), true),
+      success: function(data) {
+        $('.empty-preview-panel').hide();
+        $('.full-preview-panel').show();
+        $('.preview-iframe').contents().find('body').html(data.html);
+        animateSpinner($('.protocol-preview-panel'), false);
+      },
+      error: function(_error) {
+        // TODO: we should probably show some alert bubble
+        $('.empty-preview-panel').show();
+        $('.full-preview-panel').hide();
+        animateSpinner($('.protocol-preview-panel'), false);
+      }
+    });
+    e.preventDefault();
+    return false;
+  });
+}
+
+applyClickCallbackOnProtocolCards();
diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss
index bfa9ac1c5..0ea1094d3 100644
--- a/app/assets/stylesheets/protocol_management.scss
+++ b/app/assets/stylesheets/protocol_management.scss
@@ -60,6 +60,10 @@
   }
 }
 
+.tab-pane.external_protocols {
+  padding-bottom: 0;
+}
+
 .external-protocols-tab {
 
   .protocols-search-bar-panel {
@@ -120,7 +124,7 @@
 
         &.active {
           background: $color-gainsboro;
-          border-radius: 5px;
+          border-radius: 5px !important;
           color: $color-emperor;
         }
       }
@@ -137,7 +141,6 @@
     .row {
       margin-left: 0;
       margin-right: 0;
-
     }
 
     // When no search result is present
@@ -153,7 +156,7 @@
     border-top: 1px solid $color-silver-chalice;
     height: 600px;
     padding-left: 0;
-    padding-top: 79px;
+    padding-right: 0;
 
     .row {
       margin-left: 0;
@@ -161,23 +164,44 @@
     }
 
     // Empty texts on the right
-    .protocol-preview-text {
-      color: $color-silver-chalice;
-      font-size: 24px;
+    .empty-preview-panel {
+      padding-top: 79px;
+
+      .protocol-preview-text {
+        color: $color-silver-chalice;
+        font-size: 24px;
+      }
+
+      .protocol-preview-subtext {
+        color: $color-silver-chalice;
+        font-size: 14px;
+      }
+
+      .text-rows {
+        text-align: center;
+      }
+
+      .text-separator hr {
+        border: 1px solid $color-alto;
+        width: 120px;
+      }
     }
 
-    .protocol-preview-subtext {
-      color: $color-silver-chalice;
-      font-size: 14px;
-    }
+    .full-preview-panel {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      padding-left: 21px;
+      padding-right: 21px;
+      width: 100%;
 
-    .text-rows {
-      text-align: center;
-    }
-
-    .text-separator hr {
-      border: 1px solid $color-alto;
-      width: 120px;
+      .preview-iframe {
+        border: 0;
+        flex-grow: 1;
+        margin: 0;
+        padding: 0;
+      }
     }
   }
 }
diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb
index 3caec8c30..e4bd1ded1 100644
--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@@ -22,7 +22,7 @@
       </li>
     </ul>
     <div class="tab-content">
-      <div class="tab-pane tab-pane-settings tab-pane-protocols active" role="tabpanel">
+      <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">
diff --git a/app/views/protocols/index/_external_protocols_tab.html.erb b/app/views/protocols/index/_external_protocols_tab.html.erb
index 5b64b40e4..1984518ab 100644
--- a/app/views/protocols/index/_external_protocols_tab.html.erb
+++ b/app/views/protocols/index/_external_protocols_tab.html.erb
@@ -51,23 +51,53 @@
       <div class='row empty-text'>
         <%= t('protocols.index.external_protocols.list_panel.empty_text') %>
       </div>
+
+      <div class='protocol-card'
+        data-protocol-source='protocolsio/v3'
+        data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
+        data-show-protocol-id='Extracting-DNA-from-bananas-esvbee6'>
+        Banana protocol (click me)
+      </div>
+
+      <div class='protocol-card'
+        data-protocol-source='protocolsio/v3'
+        data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
+        data-show-protocol-id='cut-run-targeted-in-situ-genome-wide-profiling-wit-mgjc3un'>
+        Cut run targeted protocol (click me)
+      </div>
+
+      <div class='protocol-card'
+        data-protocol-source='protocolsio/3'
+        data-show-url='<%= team_show_external_protocol_path(current_team.id) %>'
+        data-show-protocol-id='errorr'>
+        Error protocol (click me, should default to default screen)
+      </div>
+
     </div>
 
     <div class='col-md-7 protocol-preview-panel'>
-      <div class='row'>
-        <div class='text-rows protocol-preview-text'>
-        <%= t('protocols.index.external_protocols.preview_panel.empty_title') %>
-        </div>
-      </div>
-      <div class='row'>
-        <div class='text-separator'> <hr> </div>
-      </div>
-      <div class='row'>
-        <div class='text-rows protocol-preview-subtext'>
-          <%= t('protocols.index.external_protocols.preview_panel.empty_subtext') %>
+      <div class='empty-preview-panel'>
+        <div class='row'>
+          <div class='text-rows protocol-preview-text'>
+            <%= t('protocols.index.external_protocols.preview_panel.empty_title') %>
+          </div>
+        </div>
+        <div class='row'>
+          <div class='text-separator'> <hr> </div>
+        </div>
+        <div class='row'>
+          <div class='text-rows protocol-preview-subtext'>
+            <%= t('protocols.index.external_protocols.preview_panel.empty_subtext') %>
+          </div>
         </div>
       </div>
+
+      <div class='full-preview-panel' style='display: none;'>
+        <iframe class='preview-iframe'></iframe>
       </div>
     </div>
   </div>
 </div>
+</div>
+
+<%= javascript_include_tag "protocols/external_protocols_tab.js" %>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index c88708404..18aa71fa0 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -56,6 +56,7 @@ Rails.application.config.assets.precompile +=
   %w(experiments/dropdown_actions.js)
 Rails.application.config.assets.precompile += %w(reports/new.js)
 Rails.application.config.assets.precompile += %w(protocols/index.js)
+Rails.application.config.assets.precompile += %w(protocols/external_protocols_tab.js)
 Rails.application.config.assets.precompile += %w(protocols/header.js)
 Rails.application.config.assets.precompile += %w(protocols/steps.js)
 Rails.application.config.assets.precompile += %w(protocols/edit.js)