diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js
index 86f1ea833..a275d1420 100644
--- a/app/assets/javascripts/my_modules.js
+++ b/app/assets/javascripts/my_modules.js
@@ -1,14 +1,6 @@
 /* global I18n dropdownSelector */
 /* eslint-disable no-use-before-define */
 
-$('#taskDetailsLabel').popover({
-  html: true,
-  container: 'body',
-  placement: 'auto bottom',
-  trigger: 'hover',
-  content: $('#taskDetailsContent').html()
-});
-
 function updateStartDate() {
   let updateUrl = $('#startDateContainer').data('update-url');
   let val = $('#calendarStartDate').val();
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 214b6a3a5..1bc451cb2 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -454,6 +454,24 @@
   }
 }
 
+.task-details-dropdown-container {
+  .task-details-button {
+    @include font-h2;
+    cursor: pointer;
+    margin: 0 3px;
+  }
+
+  .dropdown-menu {
+    min-width: 500px;
+    padding: 1em 2em;
+
+    .row-v-margin {
+      margin-bottom: .5em;
+      margin-top: .5em
+    }
+  }
+}
+
 @media (max-width: 700px) {
   .my-module-protocol-status {
     .status-info-dropdown {
diff --git a/app/views/my_modules/_module_header_details_popover.html.erb b/app/views/my_modules/_module_header_details_popover.html.erb
index 565466684..1b57f9e03 100644
--- a/app/views/my_modules/_module_header_details_popover.html.erb
+++ b/app/views/my_modules/_module_header_details_popover.html.erb
@@ -1,5 +1,5 @@
 <div class="task-details-popover">
-  <div class="row">
+  <div class="row row-v-margin">
     <div class="col-xs-3">
       <%= t('my_modules.module_header.details_popover.project_label') %>
     </div>
@@ -9,7 +9,7 @@
       </strong>
     </div>
   </div>
-  <div class="row">
+  <div class="row row-v-margin">
     <div class="col-xs-3">
       <%= t('my_modules.module_header.details_popover.experiment_label') %>
     </div>
@@ -19,7 +19,7 @@
       </strong>
     </div>
   </div>
-  <div class="row">
+  <div class="row row-v-margin">
     <div class="col-xs-3">
       <%= t('my_modules.module_header.details_popover.creator_label') %>
     </div>
@@ -30,7 +30,7 @@
       <%= t('my_modules.module_header.details_popover.creator_same_user_label') if current_user == @my_module.created_by %>
     </div>
   </div>
-  <div class="row">
+  <div class="row row-v-margin">
     <div class="col-xs-3">
       <%= t('my_modules.module_header.details_popover.created_label') %>
     </div>
@@ -40,7 +40,7 @@
       </strong>
     </div>
   </div>
-  <div class="row">
+  <div class="row row-v-margin">
     <div class="col-xs-3">
       <%= t('my_modules.module_header.details_popover.modified_label') %>
     </div>
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index f568e0e68..74156a2a7 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -11,12 +11,15 @@
       <span id="taskDetailsLabel" class="task-section-title">
         <h2>
           <%= t('my_modules.details.title') %>
-          <span class="fas block-icon fa-info-circle"></span>
         </h2>
       </span>
-      <div id="taskDetailsContent" class="hidden">
-        <%= render partial: "module_header_details_popover.html.erb" %>
-      </div>
+      <span class="dropdown task-details-dropdown-container">
+        <span id="taskDetailsButton" class="fas block-icon fa-info-circle task-details-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"></span>
+        <div class="dropdown-menu" aria-labelledby="taskDetailsButton">
+          <%= render partial: "module_header_details_popover.html.erb" %>
+        </div>
+      </span>
+
       <div class="actions-block">
         <%= render partial: "my_modules/state_buttons.html.erb" %>
       </div>