diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 076ee2527..3d6234ae7 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -572,17 +572,11 @@
 }
 
 .task-details-dropdown-container {
-  .task-details-button {
-    @include font-h2;
-    color: inherit;
-    margin-left: -5px;
-    text-decoration: none;
-  }
-
   .dropdown-menu {
     @include font-button;
     min-width: 500px;
     padding: 1em 2em;
+    z-index: 251;
 
     .task-details-value {
       @include font-h3;
@@ -595,27 +589,6 @@
   }
 }
 
-.task-information {
-  .task-section-header {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .status-buttons {
-    .status-flow-dropdown[data-status-changing=true] {
-      .caret.pull-right {
-        display: none;
-      }
-    }
-
-    > div > .btn {
-      min-width: 115px;
-    }
-  }
-}
-
 @media (max-width: 810px) {
   .task-information .task-section-header {
     display: block;
@@ -650,11 +623,6 @@
   }
 }
 
-.task-details-code {
-  display: inline-block;
-  margin-left: 4px;
-}
-
 #confirm-link-update-modal,
 .delete-steps-modal {
   .modal-body p {
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index a76df4b39..cceb86569 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="protocol.id" class="task-protocol">
-    <div ref="header" class="task-section-header ml-[-1rem] w-[calc(100%_+_2rem)] px-4 z-[250] bg-sn-white sticky top-0 transition" v-if="!inRepository">
+    <div ref="header" class="task-section-header ml-[-1rem] w-[calc(100%_+_2rem)] px-4 bg-sn-white sticky top-0 transition" v-if="!inRepository">
       <div class="portocol-header-left-part truncate grow">
         <template v-if="headerSticked && protocol.attributes.assignable_my_module_name">
           <i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
@@ -428,13 +428,17 @@
         // Add shadow to secondary navigation when it starts fly
         if (secondaryNavigation.getBoundingClientRect().top == 0 && !this.headerSticked) {
           secondaryNavigation.style.boxShadow = '0px 5px 8px 0px rgba(0, 0, 0, 0.10)';
+          secondaryNavigation.style.zIndex= 251;
         } else {
           secondaryNavigation.style.boxShadow = 'none';
+          secondaryNavigation.style.zIndex= 0;
         }
 
         if (protocolHeaderTop - 5 < protocolHeaderHeight) { // When secondary navigation touch protocol header
           secondaryNavigation.style.top = protocolHeaderTop - protocolHeaderHeight + 'px'; // Secondary navigation starts slowly disappear
           protocolHeader.style.boxShadow = '0px 5px 8px 0px rgba(0, 0, 0, 0.10)'; // Flying shadow
+          protocolHeader.style.zIndex= 250;
+
           this.headerSticked = true;
 
 
@@ -443,6 +447,7 @@
             if (newSecondaryTop > 0) newSecondaryTop = 0;
 
             secondaryNavigation.style.top = newSecondaryTop + 'px'; // Secondary navigation starts slowly appear
+            secondaryNavigation.style.zIndex= 251;
             protocolHeader.style.top = secondaryNavigationHeight + newSecondaryTop - 1 + 'px'; // Protocol header starts getting offset to compensate secondary navigation position
             // -1 to compensate small gap between protocol header and secondary navigation
           } else { // When user scroll down
@@ -452,11 +457,13 @@
             secondaryNavigation.style.top = newSecondaryTop + 'px'; // Secondary navigation starts slowly disappear
             protocolHeader.style.top = newSecondaryTop + secondaryNavigationHeight - 1 + 'px'; // Protocol header starts getting offset to compensate secondary navigation position
             // -1 to compensate small gap between protocol header and secondary navigation
+            if (newSecondaryTop <= 1) secondaryNavigation.style.zIndex= 0;
           }
         } else {
           // Just reset secondary navigation and protocol header styles to initial state
           secondaryNavigation.style.top = '0px';
           protocolHeader.style.boxShadow = 'none';
+          protocolHeader.style.zIndex= 0;
           this.headerSticked = false;
         }
 
diff --git a/app/views/my_modules/_header_actions.html.erb b/app/views/my_modules/_header_actions.html.erb
index d9b69e57d..2f1a6a122 100644
--- a/app/views/my_modules/_header_actions.html.erb
+++ b/app/views/my_modules/_header_actions.html.erb
@@ -1,4 +1,4 @@
-<div id="taskSecondaryMenu" class="sticky-header-element bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky z-[251] flex items-center flex-wrap">
+<div id="taskSecondaryMenu" class="sticky-header-element bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky flex items-center flex-wrap">
   <div class="flex items-center gap-4 mr-auto">
     <% if can_read_experiment?(@my_module.experiment) %>
       <a class="p-3 border-b-4 border-transparent hover:no-underline uppercase text-bold capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb
index 66416d357..7f4f06764 100644
--- a/app/views/my_modules/protocols.html.erb
+++ b/app/views/my_modules/protocols.html.erb
@@ -34,7 +34,7 @@
     <!-- Details -->
     <div class="task-section task-information hidden">
       <div id="task-details" class="task-section-header">
-        <div class="task-details-container flex items-center mr-auto gap-2">
+        <div class="flex items-center mr-auto">
           <a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#details-container" aria-expanded="false" aria-controls="details-container">
             <i class="sn-icon sn-icon-right"></i>
             <span id="taskDetailsLabel" class="task-section-title">
@@ -46,7 +46,7 @@
           <span class="dropdown task-details-dropdown-container">
             <a href="#"
               id="taskDetailsButton"
-              class="block-icon task-details-button dropdown-toggle"
+              class="btn btn-light btn-black icon-btn dropdown-toggle mr-2"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="true">