diff --git a/app/assets/javascripts/admin/subscriptions/directives/new_subscription_dialog.js.coffee b/app/assets/javascripts/admin/subscriptions/directives/new_subscription_dialog.js.coffee
deleted file mode 100644
index 0f3d63c9f0..0000000000
--- a/app/assets/javascripts/admin/subscriptions/directives/new_subscription_dialog.js.coffee
+++ /dev/null
@@ -1,29 +0,0 @@
-angular.module("admin.subscriptions").directive 'newSubscriptionDialog', ($rootScope, $compile, $window, $templateCache, DialogDefaults, shops) ->
-  restrict: 'A'
-  scope: true
-  link: (scope, element, attr) ->
-    scope.submitted = false
-    scope.shops = shops
-    scope.shop_id = null
-
-    scope.newSubscription = ->
-      scope.new_subscription_form.$setPristine()
-      scope.submitted = true
-      if scope.shop_id?
-        $window.location.href = "/admin/subscriptions/new?subscription[shop_id]=#{scope.shop_id}"
-      return
-
-    # Compile modal template
-    template = $compile($templateCache.get('admin/new_subscription_dialog.html'))(scope)
-
-    # Set Dialog options
-    template.dialog(DialogDefaults)
-
-    # Link opening of dialog to click event on element
-    element.bind 'click', (e) ->
-      if shops.length == 1
-        scope.shop_id = shops[0].id
-        scope.newSubscription()
-      else
-        template.dialog('open')
-        $rootScope.$evalAsync()
diff --git a/app/assets/javascripts/templates/admin/new_subscription_dialog.html.haml b/app/assets/javascripts/templates/admin/new_subscription_dialog.html.haml
deleted file mode 100644
index fa5ac82fd7..0000000000
--- a/app/assets/javascripts/templates/admin/new_subscription_dialog.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-#new-subscription-dialog
-  .text-normal.margin-bottom-30.text-center
-    = t('js.admin.subscriptions.new.please_select_a_shop')
-
-  %form{ name: 'new_subscription_form', novalidate: true, ng: { submit: "newSubscription()" }}
-
-    .text-center.margin-bottom-30
-      %input.ofn-select2.fullwidth#new_subscription_shop_id{ ng: { model: 'shop_id' }, required: true, name: 'shop_id', data: 'shops' }
-      %div{ ng: { show: "submitted && new_subscription_form.$pristine" } }
-        .error{ ng: { show: "new_subscription_form.shop_id.$error.required" } }
-          = t('js.admin.subscriptions.new.please_select_a_shop')
-
-    .text-center
-      %input.button.red.icon-plus{ type: 'submit', value: t('continue') }
diff --git a/app/views/admin/subscriptions/_new_subscription_dialog.html.haml b/app/views/admin/subscriptions/_new_subscription_dialog.html.haml
new file mode 100644
index 0000000000..dcbfcccd68
--- /dev/null
+++ b/app/views/admin/subscriptions/_new_subscription_dialog.html.haml
@@ -0,0 +1,9 @@
+#new-subscription-dialog
+  .text-normal.margin-bottom-30.text-center
+    = t('js.admin.subscriptions.new.please_select_a_shop')
+
+  = form_with url: "/admin/subscriptions/new", method: :get  do |f|
+    .text-left.margin-bottom-30
+      = select_tag "subscription[shop_id]", options_from_collection_for_select(@shops, "id", "name"), { "data-controller": "tom-select", "data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange", class: "primary" }
+    .text-center
+      = f.submit "Continue", class: "button red icon-plus"
\ No newline at end of file
diff --git a/app/views/admin/subscriptions/index.html.haml b/app/views/admin/subscriptions/index.html.haml
index f6688693f7..3e0ebebd90 100644
--- a/app/views/admin/subscriptions/index.html.haml
+++ b/app/views/admin/subscriptions/index.html.haml
@@ -5,8 +5,8 @@
   = "admin.subscriptions"
 
 - content_for :page_actions do
-  %li
-    %a.button.icon-plus#new-subscription{ href: "javascript:void(0)", "new-subscription-dialog" => true }
+  %li{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "new_subscription_help_modal" }
+    %a.button.icon-plus#new-subscription
       = t('.new')
 
 = render :partial => 'spree/admin/shared/order_sub_menu'
@@ -22,3 +22,5 @@
   = render 'table'
   = render 'loading_flash'
   = render 'no_results'
+= render HelpModalComponent.new(id: "new_subscription_help_modal", close_button: false) do
+  = render 'new_subscription_dialog'
diff --git a/app/webpacker/css/admin/components/navigation.scss b/app/webpacker/css/admin/components/navigation.scss
index 4291aa1901..b8e84287b6 100644
--- a/app/webpacker/css/admin/components/navigation.scss
+++ b/app/webpacker/css/admin/components/navigation.scss
@@ -158,7 +158,7 @@ nav.menu {
         margin-bottom: -5px;
         left: 50%;
         margin-left: -10px;
-        z-index: 1;
+        z-index: 0;
       }
     }
   }
diff --git a/spec/support/request/web_helper.rb b/spec/support/request/web_helper.rb
index 67d88115b5..57fb3b4d42 100644
--- a/spec/support/request/web_helper.rb
+++ b/spec/support/request/web_helper.rb
@@ -128,9 +128,11 @@ module WebHelper
   end
 
   def tomselect_search_and_select(value, options)
-    page.find("[name='#{options[:from]}']").sibling(".ts-wrapper").click
-    page.find(:css, '.ts-dropdown input.dropdown-input').set(value)
-    page.find(:css, '.ts-dropdown .ts-dropdown-content .option', text: value).click
+    tomselect_wrapper = page.find("[name='#{options[:from]}']").sibling(".ts-wrapper")
+    tomselect_wrapper.find(".ts-control").click
+    tomselect_wrapper.find(:css, '.ts-dropdown input.dropdown-input').set(value)
+    tomselect_wrapper.find(".ts-control").click
+    tomselect_wrapper.find(:css, '.ts-dropdown .ts-dropdown-content .option', text: value).click
   end
 
   def accept_js_alert
diff --git a/spec/system/admin/subscriptions_spec.rb b/spec/system/admin/subscriptions_spec.rb
index 29110716b3..01c684e26c 100644
--- a/spec/system/admin/subscriptions_spec.rb
+++ b/spec/system/admin/subscriptions_spec.rb
@@ -231,8 +231,8 @@ describe 'Subscriptions' do
 
       before do
         visit admin_subscriptions_path
-        click_link "New Subscription"
-        select2_select shop.name, from: "new_subscription_shop_id"
+        page.find("#new-subscription").click
+        tomselect_search_and_select shop.name, from: "subscription[shop_id]"
         click_button "Continue"
       end
 
@@ -632,8 +632,8 @@ describe 'Subscriptions' do
 
       before do
         visit admin_subscriptions_path
-        click_link "New Subscription"
-        select2_select shop.name, from: "new_subscription_shop_id"
+        page.find("#new-subscription").click
+        tomselect_search_and_select shop.name, from: "subscription[shop_id]"
         click_button "Continue"
       end