diff --git a/app/assets/javascripts/admin/dropdown/directives/links_dropdown.js.coffee b/app/assets/javascripts/admin/dropdown/directives/links_dropdown.js.coffee
deleted file mode 100644
index a58688a542..0000000000
--- a/app/assets/javascripts/admin/dropdown/directives/links_dropdown.js.coffee
+++ /dev/null
@@ -1,5 +0,0 @@
- angular.module("admin.dropdown").directive "linksDropdown", ($window)->
-  restrict: "C"
-  scope:
-    links: "="
-  templateUrl: "admin/links_dropdown.html"
diff --git a/app/assets/javascripts/templates/admin/links_dropdown.html.haml b/app/assets/javascripts/templates/admin/links_dropdown.html.haml
deleted file mode 100644
index afcaa1e8da..0000000000
--- a/app/assets/javascripts/templates/admin/links_dropdown.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-.ofn-drop-down
-  %span
-    %i.icon-check
-    {{ 'admin.actions' | t }}
-    %i{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
-  %div.menu{ 'ng-show' => "expanded" }
-    %div{ 'ng-repeat' => "link in links" }
-      %a.menu_item{ 'ng-if': "link.method", href: '{{link.url}}', target: "{{link.target || '_self'}}", data: { method: "{{ link.method }}", "ujs-navigate": "false", confirm: "{{link.confirm}}" } }
-        %span
-          %i{ ng: { class: "link.icon" } }
-        %span {{ link.name }}
-      %a.menu_item{ 'ng-if': "link.confirm && !link.method", href: '{{link.url}}', target: "{{link.target || '_self'}}", "data-confirm": "{{link.confirm}}" }
-        %span
-          %i{ ng: { class: "link.icon" } }
-        %span {{ link.name }}
-      %a.menu_item{ 'ng-if': "!link.confirm && !link.method", href: '{{link.url}}', target: "{{link.target || '_self'}}" }
-        %span
-          %i{ ng: { class: "link.icon" } }
-        %span {{ link.name }}
diff --git a/app/views/spree/admin/shared/_order_links.html.haml b/app/views/spree/admin/shared/_order_links.html.haml
index 352371c04a..a05e5a00d1 100644
--- a/app/views/spree/admin/shared/_order_links.html.haml
+++ b/app/views/spree/admin/shared/_order_links.html.haml
@@ -1,4 +1,12 @@
-%li.links-dropdown#links-dropdown{ links: order_links(@order).to_json }
-
-:coffee
-  angular.bootstrap(document.getElementById("links-dropdown"),['admin.dropdown'])
+%li.links-dropdown#links-dropdown
+  .ofn-drop-down{"data-controller": "dropdown", "data-action": "click->dropdown#toggle" }
+    %span
+      %i.icon-check
+      = I18n.t 'admin.actions'
+      %i{ "data-dropdown-target": "arrow", "data-expanded-class": "icon-caret-up", "data-collapsed-class": "icon-caret-down" }
+    %div.menu{"data-dropdown-target": "menu"}
+      - order_links(@order).each do |link|
+        %a.menu_item{ href: link[:url], target: link[:target] || "_self", data: { method: link[:method], "ujs-navigate": link[:method] ? "false" : "undefined", confirm: link[:confirm] } }
+          %span
+            %i{ class: link[:icon] }
+          %span=link[:name]
diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
new file mode 100644
index 0000000000..f84dca2ec3
--- /dev/null
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -0,0 +1,28 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["arrow", "menu"];
+
+  connect() {
+    this.#hide();
+  }
+
+  toggle() {
+    if (this.menuTarget.classList.contains("hidden")) {
+      this.#show();
+    } else {
+      this.#hide();
+    }
+  }
+
+  #show() {
+    this.menuTarget.classList.remove("hidden");
+    this.arrowTarget.classList.remove(this.arrowTarget.dataset.collapsedClass);
+    this.arrowTarget.classList.add(this.arrowTarget.dataset.expandedClass);
+  }
+  #hide() {
+    this.menuTarget.classList.add("hidden");
+    this.arrowTarget.classList.remove(this.arrowTarget.dataset.expandedClass);
+    this.arrowTarget.classList.add(this.arrowTarget.dataset.collapsedClass);
+  }
+}
diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
new file mode 100644
index 0000000000..c2e3079075
--- /dev/null
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -0,0 +1,46 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import dropdown_controller from "../../../app/webpacker/controllers/dropdown_controller";
+
+describe("Dropdown controller", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("dropdown", dropdown_controller);
+  });
+
+  describe("Controller", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `<div data-controller="dropdown">
+        <span id="dropdown" data-action="click->dropdown#toggle">
+          <span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass" data-collapsed-class="collapsedClass" />
+        </span>
+        <div id="menu" data-dropdown-target="menu" >
+
+        </div>
+      </div>`;
+    });
+
+    it("hide menu by default", () => {
+      const menu = document.getElementById("menu");
+      expect(menu.classList.contains("hidden")).toBe(true);
+    });
+
+    it("show menu when toggle and add/remove class on arrow", () => {
+      const dropdown = document.getElementById("dropdown");
+      const arrow = document.getElementById("arrow");
+      const menu = document.getElementById("menu");
+      expect(menu.classList.contains("hidden")).toBe(true);
+      expect(arrow.classList.contains("expandedClass")).toBe(false);
+      expect(arrow.classList.contains("collapsedClass")).toBe(true);
+
+      dropdown.click();
+
+      expect(menu.classList.contains("hidden")).toBe(false);
+      expect(arrow.classList.contains("expandedClass")).toBe(true);
+      expect(arrow.classList.contains("collapsedClass")).toBe(false);
+    });
+  });
+});
diff --git a/spec/system/admin/order_spec.rb b/spec/system/admin/order_spec.rb
index 1a788d201b..e608b7ca19 100644
--- a/spec/system/admin/order_spec.rb
+++ b/spec/system/admin/order_spec.rb
@@ -585,8 +585,6 @@ describe '
         within "#links-dropdown" do
           expect(page).to have_link "Resend Confirmation",
                                     href: spree.resend_admin_order_path(order)
-          expect(page).to have_link "Cancel Order",
-                                    href: spree.fire_admin_order_path(order, e: 'cancel')
         end
       end
 
@@ -607,6 +605,29 @@ describe '
           expect(page).to have_content "Order email has been resent"
         end
       end
+
+      context "Canceling an order" do
+        before do
+          visit spree.edit_admin_order_path(order)
+          find("#links-dropdown .ofn-drop-down").click
+        end
+
+        it "shows the link" do
+          expect(page).to have_link "Cancel Order", href: spree.fire_admin_order_path(order, e: 'cancel')
+        end
+
+        it "cancels the order" do
+          within ".ofn-drop-down .menu" do
+            expect(page).to have_selector("span", text: "Cancel Order")
+            page.find("span", text: "Cancel Order").click
+          end
+          within '.modal-content' do
+            expect {
+              find_button("OK").click
+            }.to change { order.reload.state }.from('complete').to('canceled')
+          end
+        end
+      end
       
       context "Check send/print invoice links" do
         
diff --git a/spec/views/spree/admin/shared/_order_links.html.haml_spec.rb b/spec/views/spree/admin/shared/_order_links.html.haml_spec.rb
deleted file mode 100644
index b15eb93f02..0000000000
--- a/spec/views/spree/admin/shared/_order_links.html.haml_spec.rb
+++ /dev/null
@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-require "spec_helper"
-
-describe "spree/admin/shared/_order_links.html.haml" do
-  helper Spree::BaseHelper # required to make pretty_time work
-  helper Spree::Admin::OrdersHelper
-
-  before do
-    order = create(:order)
-    assign(:order, order)
-  end
-
-  describe "actions dropwdown" do
-    it "contains all the actions buttons" do
-      render
-
-      expect(rendered).to have_content("links-dropdown")
-    end
-  end
-end