diff --git a/daliuge-translator/dlg/dropmake/web/main.js b/daliuge-translator/dlg/dropmake/web/main.js
index 2243b4c4b..1e9dffcc5 100644
--- a/daliuge-translator/dlg/dropmake/web/main.js
+++ b/daliuge-translator/dlg/dropmake/web/main.js
@@ -6,19 +6,21 @@ $(document).ready(function () {
         $(".dropdown-menu").dropdown('hide')
     })
 
-    $('#rest_deploy_button').click(restDeploy);
-
-    $('#helm_deploy_button').click(function(){
-        $("#gen_helm_button").val("Generate & Deploy Physical Graph")
-        $("#dlg_helm_deploy").prop("checked", true)
-        $("#pg_helm_form").submit()
-    })
-
-    //deploy physical graph button listener
-    $("#deploy_button").click(function () {
-        $("#gen_pg_button").val("Generate & Deploy Physical Graph")
-        $("#dlg_mgr_deploy").prop("checked", true)
-        $("#pg_form").submit();
+    //handles switching of the dynamic deploy split button
+    $("#deployDropdowns .dropdown-menu .dropdown-item").click(function(){
+        //take note of previous main button and the one that was just pressed
+        var oldActive = $("#deployDropdowns").children()[0];
+        var oldActiveId = $(oldActive).attr("id")
+        var newActive = event.target
+        var newActiveId = $(newActive).attr("id")
+
+        //replaces main button
+        $("#deployDropdowns").children()[0].remove()
+        $(newActive).clone().prependTo($("#deployDropdowns"))
+        
+        //toggles dropdown options
+        $("#deployDropdowns .dropdown-menu #"+newActiveId).hide()
+        $("#deployDropdowns .dropdown-menu #"+oldActiveId).show()
     })
 
     //export physical graph button listener
@@ -36,6 +38,23 @@ $(document).ready(function () {
     });
 });
 
+function deployAction(){
+    console.log("click")
+    $("#gen_pg_button").val("Generate & Deploy Physical Graph")
+    $("#dlg_mgr_deploy").prop("checked", true)
+    $("#pg_form").submit();
+}
+
+function helmDeployAction(){
+    $("#gen_helm_button").val("Generate & Deploy Physical Graph")
+    $("#dlg_helm_deploy").prop("checked", true)
+    $("#pg_helm_form").submit()
+}
+
+function restDeployAction(){
+    restDeploy()
+}
+
 function saveSettings() {
     var newUrl = new URL($("#managerUrlInput").val());
     var newPort = newUrl.port;
diff --git a/daliuge-translator/dlg/dropmake/web/pg_viewer.html b/daliuge-translator/dlg/dropmake/web/pg_viewer.html
index 1df8a5ca9..ed227fa63 100755
--- a/daliuge-translator/dlg/dropmake/web/pg_viewer.html
+++ b/daliuge-translator/dlg/dropmake/web/pg_viewer.html
@@ -78,15 +78,20 @@
                    </div>
                 </ul>
                 <ul class="nav navbar-nav  ml-auto">
-                    <li class="nav-item">
-                        <a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Deploy Physical Graph via HELM" id="helm_deploy_button" value="Deploy Physical Graph via HELM">HELM Deploy</a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Deploy Physical Graph via REST" id="rest_deploy_button" value="Deploy Physical Graph via REST">REST Deploy</a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
+                    <li class="nav-item dropdown">
+                        <div class="btn-group" id="deployDropdowns">
+                                <a href="javascript:void(0)" onclick="deployAction()" class="dropdown-item tooltip tooltipBottom" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
+                            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              <span class="sr-only">Toggle Dropdown</span>
+                            </button>
+                            <div class="dropdown-menu">
+                                <a href="javascript:void(0)" onclick="deployAction()" class="dropdown-item tooltip tooltipLeft" style="display: none;" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
+                                <a href="javascript:void(0)" onclick="helmDeployAction()" class="dropdown-item tooltip tooltipLeft" data-text="Deploy Physical Graph via HELM" id="helm_deploy_button" value="Deploy Physical Graph via HELM">HELM Deploy</a>
+                                <a href="javascript:void(0)" onclick="restDeployAction()" class="dropdown-item tooltip tooltipLeft" data-text="Deploy Physical Graph via REST" id="rest_deploy_button" value="Deploy Physical Graph via REST">REST Deploy</a>
+                            </div>
+                          </div>
                     </li>
+                   
                     <li class="nav-item dropdown">
                         <a href="javascript:void(0)" class="nav-link dropdown-toggle" id="navbarExportDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Export
diff --git a/daliuge-translator/dlg/dropmake/web/src/main.css b/daliuge-translator/dlg/dropmake/web/src/main.css
index b4f9f702f..ac0939fe0 100644
--- a/daliuge-translator/dlg/dropmake/web/src/main.css
+++ b/daliuge-translator/dlg/dropmake/web/src/main.css
@@ -400,6 +400,48 @@
     color:white;
 }
 
+
+#deployDropdowns{
+  padding: 0.35rem 1rem;
+}
+
+#deployDropdowns button:focus{
+    color: #001d3b;
+    background-color: white !important;
+    border-color: white;
+}
+
+#deployDropdowns button:active{
+  color: #001d3b;
+  background-color: white !important;
+  border-color: white;
+}
+
+#deployDropdowns button :hover{
+  color: #001d3b;
+  background-color: rgb(216, 216, 216);
+  border-color: rgb(216, 216, 216);
+}
+
+#deployDropdowns a:not(.dropdown-menu a){
+  border: 1px white solid;
+  border-radius: 0.2rem;
+  box-shadow: none !important;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  padding: 2px 5px;
+}
+
+#deployDropdowns a:hover:not(.dropdown-menu a) {
+  background-color: rgb(216, 216, 216);
+  color: #001d3b;
+}
+
+#deployDropdowns a:active:not(.dropdown-menu a) {
+  background-color: white;
+  color: #001d3b;
+}
+
 #exportJsonBtn{
     display: inline-block;
 }
@@ -440,10 +482,6 @@
     color:white;
 }
 
-#deploy_button, #rest_deploy_button, #helm_deploy_button{
-    color: white;
-}
-
 #settingsModal .modal-header{
     background: rgb(0,64,133);
     background: linear-gradient(90deg, rgba(0,64,133,1) 0%, rgba(0,52,107,1) 20%, rgba(0,35,73,1) 100%);