diff --git a/client/assets/styles/scss/layout/instances-list.scss b/client/assets/styles/scss/layout/instances-list.scss
index 45073db56..e8ad5d900 100644
--- a/client/assets/styles/scss/layout/instances-list.scss
+++ b/client/assets/styles/scss/layout/instances-list.scss
@@ -67,6 +67,14 @@
   display: flex;
   flex-direction: column;
 
+  &:hover,
+  &.active {
+
+    .btn-delete-branch {
+      opacity: 1;
+    }
+  }
+
   &.active {
     background-color: $white;
     border: $input-border solid $gray-lighter;
@@ -114,6 +122,10 @@
   &:active:not(.active) {
     color: $gray-dark;
   }
+
+  .btn-delete-branch {
+    opacity: 0;
+  }
 }
 
 .nav-environment-header {
diff --git a/client/directives/navBar/composeCard/viewComposeCardHeader.jade b/client/directives/navBar/composeCard/viewComposeCardHeader.jade
index 37c517ea8..51835f82b 100644
--- a/client/directives/navBar/composeCard/viewComposeCardHeader.jade
+++ b/client/directives/navBar/composeCard/viewComposeCardHeader.jade
@@ -14,7 +14,7 @@ button.grid-block.shrink.btn-container-menu(
     use(
       xlink:href = "#icons-gear"
     )
-button.grid-block.shrink.btn-container-menu(
+button.grid-block.shrink.btn-container-menu.btn-delete-branch(
   data-event-name = "Clicked to Delete Branch (Open Modal)"
   ng-click = "CCC.deleteBranch()"
   ng-if = "$root.featureFlags.multipleWebhooks"
@@ -24,4 +24,4 @@ button.grid-block.shrink.btn-container-menu(
   svg.iconnables.icons-close
     use(
       xlink:href = "#icons-close"
-    )
\ No newline at end of file
+    )