diff --git a/admin/.prettierrc b/admin/.prettierrc
new file mode 100644
index 00000000000..cc4e9153538
--- /dev/null
+++ b/admin/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "semi": false
+}
diff --git a/admin/app/components/solidus_admin/layout/navigation/component.js b/admin/app/components/solidus_admin/layout/navigation/component.js
index a88d49caec1..7ec21ab73fd 100644
--- a/admin/app/components/solidus_admin/layout/navigation/component.js
+++ b/admin/app/components/solidus_admin/layout/navigation/component.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
-    cookie: String
+    cookie: String,
   }
 
   setCookie(event) {
diff --git a/admin/app/components/solidus_admin/layout/page_helpers.rb b/admin/app/components/solidus_admin/layout/page_helpers.rb
index 47bffa1f50a..b13c0943453 100644
--- a/admin/app/components/solidus_admin/layout/page_helpers.rb
+++ b/admin/app/components/solidus_admin/layout/page_helpers.rb
@@ -2,7 +2,7 @@
 
 module SolidusAdmin::Layout::PageHelpers
   def page(**attrs, &block)
-    tag.div(capture(&block), class: "px-4 relative", "data-controller": stimulus_id, **attrs) +
+    tag.div(capture(&block), class: "px-4 relative", "data-controller": attrs.fetch(:stimulus_id, stimulus_id), **attrs) +
       tag.div(render(component("layout/feedback").new), class: "flex justify-center py-10")
   end
 
diff --git a/admin/app/components/solidus_admin/orders/show/address/component.js b/admin/app/components/solidus_admin/orders/show/address/component.js
index ebb6df4ab34..fdf4c09f9eb 100644
--- a/admin/app/components/solidus_admin/orders/show/address/component.js
+++ b/admin/app/components/solidus_admin/orders/show/address/component.js
@@ -1,9 +1,9 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["addresses"]
 
   close() {
-    this.addressesTarget.removeAttribute('open')
+    this.addressesTarget.removeAttribute("open")
   }
 }
diff --git a/admin/app/components/solidus_admin/orders/show/component.js b/admin/app/components/solidus_admin/orders/show/component.js
index 8de1e56f478..6a8ce2ae8cc 100644
--- a/admin/app/components/solidus_admin/orders/show/component.js
+++ b/admin/app/components/solidus_admin/orders/show/component.js
@@ -1,7 +1,7 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   closeMenus() {
-    this.element.querySelectorAll('details').forEach(details => details.removeAttribute('open'))
+    this.element.querySelectorAll("details").forEach((details) => details.removeAttribute("open"))
   }
 }
diff --git a/admin/app/components/solidus_admin/orders/show/customer_search/component.js b/admin/app/components/solidus_admin/orders/show/customer_search/component.js
index 68e6b65b05b..4dd4d7885b2 100644
--- a/admin/app/components/solidus_admin/orders/show/customer_search/component.js
+++ b/admin/app/components/solidus_admin/orders/show/customer_search/component.js
@@ -1,14 +1,15 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = { customersUrl: String }
 
   async search({ detail: { query, controller } }) {
-    controller.resultsValue =
-      (await (await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)).text())
+    controller.resultsValue = await (
+      await fetch(`${this.customersUrlValue}?q[name_or_variants_including_master_sku_cont]=${query}`)
+    ).text()
   }
 
   submit(event) {
-    event.detail.resultTarget.querySelector('form').submit()
+    event.detail.resultTarget.querySelector("form").submit()
   }
 }
diff --git a/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb b/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb
index 88185925b39..f5119fa9712 100644
--- a/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb
+++ b/admin/app/components/solidus_admin/shipping_categories/edit/component.html.erb
@@ -1,5 +1,5 @@
-<%= turbo_frame_tag :edit_shipping_category_modal do %>
-  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+  <%= turbo_frame_tag :edit_shipping_category_modal do %>
     <%= form_for @shipping_category, url: solidus_admin.shipping_category_path(@shipping_category), html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :name) %>
@@ -13,4 +13,3 @@
     <% end %>
   <% end %>
 <% end %>
-<%= render component("shipping_categories/index").new(page: @page) %>
diff --git a/admin/app/components/solidus_admin/shipping_categories/index/component.rb b/admin/app/components/solidus_admin/shipping_categories/index/component.rb
index 4253dcec01c..1ac8b0ae49d 100644
--- a/admin/app/components/solidus_admin/shipping_categories/index/component.rb
+++ b/admin/app/components/solidus_admin/shipping_categories/index/component.rb
@@ -5,35 +5,20 @@ def model_class
     Spree::ShippingCategory
   end
 
-  def actions
-    render component("ui/button").new(
-      tag: :a,
-      text: t('.add'),
-      href: spree.new_admin_shipping_category_path,
-      icon: "add-line",
-      class: "align-self-end w-full",
-    )
-  end
-
   def page_actions
     render component("ui/button").new(
       tag: :a,
       text: t('.add'),
-      href: solidus_admin.new_shipping_category_path, data: { turbo_frame: :new_shipping_category_modal },
+      href: solidus_admin.new_shipping_category_path, data: {
+        action: "click->ui--pages--index#openModal"
+      },
       icon: "add-line",
       class: "align-self-end w-full",
     )
   end
 
-  def turbo_frames
-    %w[
-      new_shipping_category_modal
-      edit_shipping_category_modal
-    ]
-  end
-
-  def row_url(shipping_category)
-    spree.edit_admin_shipping_category_path(shipping_category, _turbo_frame: :edit_shipping_category_modal)
+  def edit_url(shipping_category)
+    spree.edit_admin_shipping_category_path(shipping_category)
   end
 
   def search_key
@@ -57,7 +42,14 @@ def batch_actions
 
   def columns
     [
-      :name
+      {
+        header: :name,
+        data: ->(shipping_category) do
+          link_to shipping_category.name, edit_url(shipping_category),
+            data: { action: "click->ui--pages--index#openModal" },
+            class: "body-link"
+        end
+      },
     ]
   end
 end
diff --git a/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb b/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb
index e3cf3a75937..fb3e207cb09 100644
--- a/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb
+++ b/admin/app/components/solidus_admin/shipping_categories/new/component.html.erb
@@ -1,5 +1,5 @@
-<%= turbo_frame_tag :new_shipping_category_modal do %>
-  <%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+<%= render component("ui/modal").new(title: t(".title")) do |modal| %>
+  <%= turbo_frame_tag :new_shipping_category_modal do %>
     <%= form_for @shipping_category, url: solidus_admin.shipping_categories_path(page: params[:page], q: params[:q]), html: { id: form_id } do |f| %>
       <div class="flex flex-col gap-6 pb-4">
         <%= render component("ui/forms/field").text_field(f, :name) %>
@@ -13,5 +13,3 @@
     <% end %>
   <% end %>
 <% end %>
-
-<%= render component("shipping_categories/index").new(page: @page) %>
diff --git a/admin/app/components/solidus_admin/stock_items/edit/component.js b/admin/app/components/solidus_admin/stock_items/edit/component.js
index 6181ca0e904..74290149beb 100644
--- a/admin/app/components/solidus_admin/stock_items/edit/component.js
+++ b/admin/app/components/solidus_admin/stock_items/edit/component.js
@@ -1,17 +1,18 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
     initialCountOnHand: Number,
   }
 
-  static targets = ['countOnHand', 'quantityAdjustment']
+  static targets = ["countOnHand", "quantityAdjustment"]
 
   connect() {
     this.updateCountOnHand()
   }
 
   updateCountOnHand() {
-    this.countOnHandTarget.value = parseInt(this.initialCountOnHandValue) + parseInt(this.quantityAdjustmentTarget.value)
+    this.countOnHandTarget.value =
+      parseInt(this.initialCountOnHandValue) + parseInt(this.quantityAdjustmentTarget.value)
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/dropdown/component.js b/admin/app/components/solidus_admin/ui/dropdown/component.js
index 82080b800aa..23a83937d30 100644
--- a/admin/app/components/solidus_admin/ui/dropdown/component.js
+++ b/admin/app/components/solidus_admin/ui/dropdown/component.js
@@ -1,5 +1,5 @@
-import { Controller } from '@hotwired/stimulus'
-import { useClickOutside } from 'stimulus-use'
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 export default class extends Controller {
   connect() {
@@ -11,6 +11,6 @@ export default class extends Controller {
   }
 
   close() {
-    this.element.removeAttribute('open')
+    this.element.removeAttribute("open")
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/forms/address/component.js b/admin/app/components/solidus_admin/ui/forms/address/component.js
index c39c7cd161b..cf54de223b2 100644
--- a/admin/app/components/solidus_admin/ui/forms/address/component.js
+++ b/admin/app/components/solidus_admin/ui/forms/address/component.js
@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["country", "state", "stateName", "stateWrapper", "stateNameWrapper"]
@@ -7,8 +7,8 @@ export default class extends Controller {
     const countryId = this.countryTarget.value
 
     fetch(`/admin/countries/${countryId}/states`)
-      .then(response => response.json())
-      .then(data => {
+      .then((response) => response.json())
+      .then((data) => {
         this.updateStateOptions(data)
       })
   }
@@ -30,13 +30,12 @@ export default class extends Controller {
     const stateSelect = this.stateTarget
     const stateName = this.stateNameTarget
 
-
     if (showSelect) {
       // Show state select dropdown.
       stateSelect.disabled = false
       stateName.value = ""
-      stateWrapper.classList.remove('hidden')
-      stateNameWrapper.classList.add('hidden')
+      stateWrapper.classList.remove("hidden")
+      stateNameWrapper.classList.add("hidden")
     } else {
       // Show state name text input if no states to choose from.
       stateSelect.disabled = true
diff --git a/admin/app/components/solidus_admin/ui/forms/input/component.js b/admin/app/components/solidus_admin/ui/forms/input/component.js
index 44ff79b03b0..e9f10607793 100644
--- a/admin/app/components/solidus_admin/ui/forms/input/component.js
+++ b/admin/app/components/solidus_admin/ui/forms/input/component.js
@@ -1,4 +1,4 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = {
@@ -6,11 +6,10 @@ export default class extends Controller {
   }
 
   connect() {
-    if (this.customValidityValue)
-      this.element.setCustomValidity(this.customValidityValue)
+    if (this.customValidityValue) this.element.setCustomValidity(this.customValidityValue)
   }
 
   clearCustomValidity() {
-    this.element.setCustomValidity('')
+    this.element.setCustomValidity("")
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/modal/component.html.erb b/admin/app/components/solidus_admin/ui/modal/component.html.erb
index 8b408161258..b26b2fc3bb4 100644
--- a/admin/app/components/solidus_admin/ui/modal/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/modal/component.html.erb
@@ -6,7 +6,7 @@
     **@attributes
   ) %>
 >
-  <a href="<%= @close_path %>" aria-hidden="true" class="cursor-default fixed inset-0 bg-full-black/50 overflow-y-auto"></a>
+  <a aria-hidden="true" class="cursor-default fixed inset-0 bg-full-black/50 overflow-y-auto" data-action="click-><%= stimulus_id %>#close"></a>
   <div class="fixed inset-0 z-10 pointer-events-none flex min-h-full justify-center p-4 text-center items-center">
     <div class="min-w-[40rem] max-h-screen pointer-events-auto cursor-auto relative transform overflow-auto rounded-lg bg-white text-left shadow-xl max-w-lg divide-y divide-gray-100">
 
diff --git a/admin/app/components/solidus_admin/ui/modal/component.js b/admin/app/components/solidus_admin/ui/modal/component.js
index 3d9ec5c408e..f9934858189 100644
--- a/admin/app/components/solidus_admin/ui/modal/component.js
+++ b/admin/app/components/solidus_admin/ui/modal/component.js
@@ -1,7 +1,16 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    this.element.showModal();
+    this.element.showModal()
+    this.element.addEventListener("close", () => this.removeModal())
+  }
+
+  close() {
+    this.element.close()
+  }
+
+  removeModal() {
+    this.element.remove()
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/pages/index/component.html.erb b/admin/app/components/solidus_admin/ui/pages/index/component.html.erb
index 69916f08dd4..0717b892d9d 100644
--- a/admin/app/components/solidus_admin/ui/pages/index/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/pages/index/component.html.erb
@@ -1,4 +1,4 @@
-<%= page do %>
+<%= page "data-controller": stimulus_id do %>
   <% if @tabs %>
     <%= page_header do %>
       <%= render_title %>
diff --git a/admin/app/components/solidus_admin/ui/pages/index/component.js b/admin/app/components/solidus_admin/ui/pages/index/component.js
new file mode 100644
index 00000000000..a56a351670e
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/pages/index/component.js
@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  async openModal(event) {
+    event.preventDefault();
+    const url = event.target.href;
+    const response = await fetch(url);
+    document.body.insertAdjacentHTML("beforeend", await response.text());
+  }
+}
diff --git a/admin/app/components/solidus_admin/ui/pages/index/component.rb b/admin/app/components/solidus_admin/ui/pages/index/component.rb
index ad6cd5b5092..6bf4ed2546a 100644
--- a/admin/app/components/solidus_admin/ui/pages/index/component.rb
+++ b/admin/app/components/solidus_admin/ui/pages/index/component.rb
@@ -20,6 +20,10 @@ def scopes; []; end
   def filters; []; end
   def columns; []; end
 
+  def self.stimulus_id
+    "ui--pages--index"
+  end
+
   def initialize(page:)
     @page = page
     @tabs = tabs&.map { |tab| Tab.new(**tab) }
diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
index 69a155cd66d..dd6f1a04be0 100644
--- a/admin/app/components/solidus_admin/ui/table/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -137,11 +137,12 @@
       <%= "data-sortable-animation-value=#{@sortable.animation}" if @sortable&.animation %>
     >
       <% @data.rows.each do |row| %>
+        <% rowUrl = @data.url.call(row) %>
         <tr
-          class="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>"
-          <% if @data.url %>
+          class="border-b border-gray-100 last:border-0 <%= 'hover:bg-gray-50 cursor-pointer' if rowUrl %> <%= 'bg-gray-15 text-gray-700' if @data.fade&.call(row) %>"
+          <% if rowUrl %>
             data-action="click-><%= stimulus_id %>#rowClicked"
-            data-<%= stimulus_id %>-url-param="<%= @data.url.call(row) %>"
+            data-<%= stimulus_id %>-url-param="<%= rowUrl %>"
             <%= "data-sortable-url=#{@sortable.url.call(row)}" if @sortable&.url %>
           <% end %>
         >
diff --git a/admin/app/components/solidus_admin/ui/table/component.js b/admin/app/components/solidus_admin/ui/table/component.js
index 66837d4ce75..e98f4708554 100644
--- a/admin/app/components/solidus_admin/ui/table/component.js
+++ b/admin/app/components/solidus_admin/ui/table/component.js
@@ -36,9 +36,9 @@ export default class extends Controller {
     const shouldSetSortable = this.sortableValue && this.modeValue !== "batch" && this.modeValue !== "search"
 
     if (shouldSetSortable) {
-      this.tableBodyTarget.setAttribute('data-controller', 'sortable')
+      this.tableBodyTarget.setAttribute("data-controller", "sortable")
     } else {
-      this.tableBodyTarget.removeAttribute('data-controller')
+      this.tableBodyTarget.removeAttribute("data-controller")
     }
   }
 
@@ -54,13 +54,13 @@ export default class extends Controller {
   }
 
   clearSearch() {
-    this.searchFieldTarget.value = ''
+    this.searchFieldTarget.value = ""
     this.search()
   }
 
   resetSearchAndFilters() {
     if (this.hasFilterToolbarTarget) {
-      this.filterToolbarTarget.querySelectorAll('fieldset').forEach(fieldset => fieldset.disabled = true)
+      this.filterToolbarTarget.querySelectorAll("fieldset").forEach((fieldset) => (fieldset.disabled = true))
     }
 
     this.searchFieldTarget.disabled = true
@@ -70,7 +70,7 @@ export default class extends Controller {
   selectRow(event) {
     if (this.checkboxTargets.some((checkbox) => checkbox.checked)) {
       this.modeValue = "batch"
-    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
+    } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") {
       this.modeValue = "search"
     } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
@@ -84,7 +84,7 @@ export default class extends Controller {
   selectAllRows(event) {
     if (event.target.checked) {
       this.modeValue = "batch"
-    } else if (this.hasSearchFieldTarget && (this.searchFieldTarget.value !== '')) {
+    } else if (this.hasSearchFieldTarget && this.searchFieldTarget.value !== "") {
       this.modeValue = "search"
     } else if (this.hasScopesToolbarTarget) {
       this.modeValue = "scopes"
@@ -103,13 +103,13 @@ export default class extends Controller {
 
     if (this.modeValue === "batch") {
       this.toggleCheckbox(event.currentTarget)
-    } else {
+    } else if (event.params.url) {
       const url = new URL(event.params.url, "http://dummy.com")
       const params = new URLSearchParams(url.search)
-      const frameId = params.get('_turbo_frame')
+      const frameId = params.get("_turbo_frame")
       const frame = frameId ? { frame: frameId } : {}
       // remove the custom _turbo_frame param from url search:
-      params.delete('_turbo_frame')
+      params.delete("_turbo_frame")
       url.search = params.toString()
 
       window.Turbo.visit(url.pathname + url.search, frame)
@@ -117,7 +117,7 @@ export default class extends Controller {
   }
 
   toggleCheckbox(row) {
-    const checkbox = this.checkboxTargets.find(selection => row.contains(selection))
+    const checkbox = this.checkboxTargets.find((selection) => row.contains(selection))
 
     if (checkbox) {
       checkbox.checked = !checkbox.checked
@@ -131,14 +131,10 @@ export default class extends Controller {
 
   confirmAction(event) {
     const message = event.params.message
+      .replace("${count}", this.selectedRows().length)
       .replace(
-        "${count}",
-        this.selectedRows().length
-      ).replace(
         "${resource}",
-        this.selectedRows().length > 1 ?
-        event.params.resourcePlural :
-        event.params.resourceSingular
+        this.selectedRows().length > 1 ? event.params.resourcePlural : event.params.resourceSingular
       )
 
     if (!confirm(message)) {
@@ -167,7 +163,7 @@ export default class extends Controller {
 
     // Update the rows background color
     this.checkboxTargets.filter((checkbox) =>
-      checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked),
+      checkbox.closest("tr").classList.toggle(this.selectedRowClass, checkbox.checked)
     )
 
     // Update the selected rows count
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index fdbc336f8b1..29f886d2c2a 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -1,11 +1,11 @@
-import { Controller } from '@hotwired/stimulus'
-import { useClickOutside, useDebounce } from 'stimulus-use'
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside, useDebounce } from "stimulus-use"
 
-const BG_GRAY = 'bg-gray-100'
+const BG_GRAY = "bg-gray-100"
 
 export default class extends Controller {
-  static targets = ['details', 'summary', 'option', 'checkbox', 'menu']
-  static debounces = ['init']
+  static targets = ["details", "summary", "option", "checkbox", "menu"]
+  static debounces = ["init"]
 
   connect() {
     useDebounce(this, { wait: 50 })
@@ -37,7 +37,7 @@ export default class extends Controller {
   filterOptions(event) {
     const query = event.currentTarget.value.toLowerCase()
     this.optionTargets.forEach((option) => {
-      option.style.display = option.textContent.toLowerCase().includes(query) ? 'block' : 'none'
+      option.style.display = option.textContent.toLowerCase().includes(query) ? "block" : "none"
     })
   }
 
@@ -50,24 +50,26 @@ export default class extends Controller {
     this.checkboxTargets.forEach((checkbox) => {
       const hiddenElements = checkbox.parentElement.querySelectorAll("input[type='hidden']")
       checkbox.checked
-        ? hiddenElements.forEach(e => e.removeAttribute("disabled"))
-        : hiddenElements.forEach(e => e.setAttribute("disabled", true))
+        ? hiddenElements.forEach((e) => e.removeAttribute("disabled"))
+        : hiddenElements.forEach((e) => e.setAttribute("disabled", true))
     })
   }
 
   sortCheckboxes() {
     const checkboxes = this.checkboxTargets
 
-    checkboxes.sort((a, b) => {
-      if (a.checked && !b.checked) return -1
-      if (!a.checked && b.checked) return 1
-      return 0
-    }).forEach(checkbox => {
-      this.menuTarget.appendChild(checkbox.closest('div'))
-    })
+    checkboxes
+      .sort((a, b) => {
+        if (a.checked && !b.checked) return -1
+        if (!a.checked && b.checked) return 1
+        return 0
+      })
+      .forEach((checkbox) => {
+        this.menuTarget.appendChild(checkbox.closest("div"))
+      })
   }
 
   isAnyCheckboxChecked() {
-    return this.checkboxTargets.some(checkbox => checkbox.checked)
+    return this.checkboxTargets.some((checkbox) => checkbox.checked)
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/toast/component.js b/admin/app/components/solidus_admin/ui/toast/component.js
index b8ecfcdf4d1..de1cecf8644 100644
--- a/admin/app/components/solidus_admin/ui/toast/component.js
+++ b/admin/app/components/solidus_admin/ui/toast/component.js
@@ -1,8 +1,8 @@
-import { Controller } from '@hotwired/stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ['closeButton']
-  static classes = ['animation']
+  static targets = ["closeButton"]
+  static classes = ["animation"]
   static values = { transition: Number }
 
   connect() {
diff --git a/admin/app/components/solidus_admin/ui/toggletip/component.js b/admin/app/components/solidus_admin/ui/toggletip/component.js
index ec04b795ad7..0b7d78a468a 100644
--- a/admin/app/components/solidus_admin/ui/toggletip/component.js
+++ b/admin/app/components/solidus_admin/ui/toggletip/component.js
@@ -1,30 +1,30 @@
-import { Controller } from '@hotwired/stimulus'
-import { useClickOutside } from 'stimulus-use'
+import { Controller } from "@hotwired/stimulus"
+import { useClickOutside } from "stimulus-use"
 
 export default class extends Controller {
-  static targets = ['bubble']
+  static targets = ["bubble"]
 
-  connect () {
+  connect() {
     useClickOutside(this)
     this.open = false
   }
 
-  clickOutside () {
+  clickOutside() {
     this.close()
   }
 
-  toggle (e) {
+  toggle(e) {
     e.preventDefault()
     this.open = !this.open
     this.render()
   }
 
-  open () {
+  open() {
     this.open = true
     this.render()
   }
 
-  close () {
+  close() {
     this.open = false
     this.render()
   }
@@ -35,10 +35,12 @@ export default class extends Controller {
 
     if (needsPositioning) {
       const bubbleRect = this.bubbleTarget.getBoundingClientRect()
-      if (bubbleRect.right  > window.innerWidth) this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px`
-      if (bubbleRect.bottom > window.innerHeight) this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px`
-      if (bubbleRect.left < 0) this.bubbleTarget.style.left = '0px'
-      if (bubbleRect.top < 0) this.bubbleTarget.style.top = '0px'
+      if (bubbleRect.right > window.innerWidth)
+        this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px`
+      if (bubbleRect.bottom > window.innerHeight)
+        this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px`
+      if (bubbleRect.left < 0) this.bubbleTarget.style.left = "0px"
+      if (bubbleRect.top < 0) this.bubbleTarget.style.top = "0px"
     }
   }
 }
diff --git a/admin/app/components/solidus_admin/users/store_credits/index/component.js b/admin/app/components/solidus_admin/users/store_credits/index/component.js
index b6f7437145d..18d886a69ab 100644
--- a/admin/app/components/solidus_admin/users/store_credits/index/component.js
+++ b/admin/app/components/solidus_admin/users/store_credits/index/component.js
@@ -4,10 +4,10 @@ export default class extends Controller {
   actionButtonClicked(event) {
     const url = new URL(event.params.url, "http://dummy.com")
     const params = new URLSearchParams(url.search)
-    const frameId = params.get('_turbo_frame')
+    const frameId = params.get("_turbo_frame")
     const frame = frameId ? { frame: frameId } : {}
     // remove the custom _turbo_frame param from url search:
-    params.delete('_turbo_frame')
+    params.delete("_turbo_frame")
     url.search = params.toString()
 
     window.Turbo.visit(url.pathname + url.search, frame)
diff --git a/admin/app/components/solidus_admin/users/store_credits/show/component.js b/admin/app/components/solidus_admin/users/store_credits/show/component.js
index b6f7437145d..18d886a69ab 100644
--- a/admin/app/components/solidus_admin/users/store_credits/show/component.js
+++ b/admin/app/components/solidus_admin/users/store_credits/show/component.js
@@ -4,10 +4,10 @@ export default class extends Controller {
   actionButtonClicked(event) {
     const url = new URL(event.params.url, "http://dummy.com")
     const params = new URLSearchParams(url.search)
-    const frameId = params.get('_turbo_frame')
+    const frameId = params.get("_turbo_frame")
     const frame = frameId ? { frame: frameId } : {}
     // remove the custom _turbo_frame param from url search:
-    params.delete('_turbo_frame')
+    params.delete("_turbo_frame")
     url.search = params.toString()
 
     window.Turbo.visit(url.pathname + url.search, frame)
diff --git a/admin/app/controllers/solidus_admin/shipping_categories_controller.rb b/admin/app/controllers/solidus_admin/shipping_categories_controller.rb
index a7a58686da7..3f603718900 100644
--- a/admin/app/controllers/solidus_admin/shipping_categories_controller.rb
+++ b/admin/app/controllers/solidus_admin/shipping_categories_controller.rb
@@ -12,7 +12,9 @@ def new
       set_index_page
 
       respond_to do |format|
-        format.html { render component('shipping_categories/new').new(page: @page, shipping_category: @shipping_category) }
+        format.html do
+          render component('shipping_categories/new').new(page: @page, shipping_category: @shipping_category), layout: false
+        end
       end
     end
 
@@ -57,7 +59,9 @@ def edit
       set_index_page
 
       respond_to do |format|
-        format.html { render component('shipping_categories/edit').new(page: @page, shipping_category: @shipping_category) }
+        format.html do
+          render component('shipping_categories/edit').new(page: @page, shipping_category: @shipping_category), layout: false
+        end
       end
     end
 
diff --git a/admin/spec/features/shipping_categories_spec.rb b/admin/spec/features/shipping_categories_spec.rb
index 09ad72338fd..e91cb913469 100644
--- a/admin/spec/features/shipping_categories_spec.rb
+++ b/admin/spec/features/shipping_categories_spec.rb
@@ -65,15 +65,15 @@
     before do
       Spree::ShippingCategory.create(name: "Letter Mail")
       visit "/admin/shipping_categories#{query}"
-      find_row("Letter Mail").click
-      expect(page).to have_css("dialog", wait: 5)
+      click_on "Letter Mail"
+      expect(page).to have_css("dialog")
       expect(page).to have_content("Edit Shipping Category")
       expect(page).to be_axe_clean
     end
 
     it "closing the modal keeps query params" do
       within("dialog") { click_on "Cancel" }
-      expect(page).not_to have_selector("dialog", wait: 5)
+      expect(page).not_to have_selector("dialog")
       expect(page.current_url).to include(query)
     end