diff --git a/src/components/displays/buttons/ActionSettingsWheelButton.vue b/src/components/displays/buttons/ActionSettingsWheelButton.vue
index 9cc1abbf..0b6cd3fc 100644
--- a/src/components/displays/buttons/ActionSettingsWheelButton.vue
+++ b/src/components/displays/buttons/ActionSettingsWheelButton.vue
@@ -10,6 +10,7 @@ import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSe
 import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
+const slots = useSlots();
 const emit = defineEmits(["deleted"]);
 const emitDeleted = () => {
   emit("deleted");
@@ -91,6 +92,12 @@ const dropdownContent = ref(null);
 const isDropdownOpen = ref(false);
 const shouldOpenDropdownUp = ref(false);
 const dropdownMaxHeight = ref(null);
+const isDesktopFlyoutLayout = ref(false);
+const activeDesktopFlyoutSectionKey = ref(null);
+const desktopFlyoutMinViewportWidth = 1400;
+const desktopFlyoutRootPanelWidthRem = 15;
+const desktopFlyoutSubmenuWidthRem = 17;
+const desktopFlyoutPanelGapPx = 12;
 
 const closeDropdown = () => {
   isDropdownOpen.value = false;
@@ -118,6 +125,9 @@ const dropdownClass = computed(() => ({
   "is-active": isDropdownOpen.value,
   "is-up": shouldOpenDropdownUp.value,
 }));
+const dropdownContentClass = computed(() => ({
+  "action-settings-wheel-dropdown-content--desktop-flyout": isDesktopFlyoutLayout.value,
+}));
 const dropdownContentStyle = computed(() => {
   if (!dropdownMaxHeight.value) {
     return {};
@@ -135,6 +145,61 @@ const resetDropdownLayout = () => {
   dropdownMaxHeight.value = null;
 };
 
+const isVisibleFixedInsetElement = (element) => {
+  if (!(element instanceof HTMLElement)) {
+    return false;
+  }
+
+  const styles = window.getComputedStyle(element);
+  if (styles.display === "none" || styles.visibility === "hidden" || Number(styles.opacity || "1") === 0) {
+    return false;
+  }
+
+  return styles.position === "fixed" || styles.position === "sticky";
+};
+
+const getInsetElements = (selectors) =>
+  selectors.flatMap((selector) => Array.from(document.querySelectorAll(selector)));
+
+const getViewportInsets = () => {
+  const viewportPadding = 12;
+  const fixedTopElements = Array.from(new Set(getInsetElements([".navbar.is-fixed-top"])));
+  const fixedBottomElements = Array.from(
+    new Set(getInsetElements([".navbar.is-fixed-bottom", ".fixed-bottom-footer", ".request-queue-progress-shell"]))
+  );
+
+  const topInset = fixedTopElements.reduce((maxInset, element) => {
+    if (!isVisibleFixedInsetElement(element)) {
+      return maxInset;
+    }
+
+    const rect = element.getBoundingClientRect();
+    if (rect.bottom <= 0 || rect.top > viewportPadding) {
+      return maxInset;
+    }
+
+    return Math.max(maxInset, Math.ceil(rect.bottom));
+  }, 0);
+
+  const bottomInset = fixedBottomElements.reduce((maxInset, element) => {
+    if (!isVisibleFixedInsetElement(element)) {
+      return maxInset;
+    }
+
+    const rect = element.getBoundingClientRect();
+    if (rect.top >= window.innerHeight || rect.bottom < window.innerHeight - viewportPadding) {
+      return maxInset;
+    }
+
+    return Math.max(maxInset, Math.ceil(window.innerHeight - rect.top));
+  }, 0);
+
+  return {
+    top: topInset + viewportPadding,
+    bottom: bottomInset + viewportPadding,
+  };
+};
+
 const updateDropdownLayout = async () => {
   if (!isDropdownOpen.value || !dropdownRoot.value || !dropdownContent.value) {
     resetDropdownLayout();
@@ -145,16 +210,43 @@ const updateDropdownLayout = async () => {
 
   const triggerElement = dropdownRoot.value.querySelector(".dropdown-trigger");
   const triggerRect = (triggerElement ?? dropdownRoot.value).getBoundingClientRect();
-  const menuRect = dropdownContent.value.getBoundingClientRect();
-  const viewportPadding = 12;
-  const spaceBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportPadding, 0);
-  const spaceAbove = Math.max(triggerRect.top - viewportPadding, 0);
-  const menuHeight = Math.ceil(menuRect.height);
+  syncDesktopFlyoutState(triggerRect);
+
+  await nextTick();
+
+  if (!dropdownContent.value) {
+    return;
+  }
+
+  const viewportInsets = getViewportInsets();
+  const viewportTop = viewportInsets.top;
+  const viewportBottom = window.innerHeight - viewportInsets.bottom;
+  const spaceBelow = Math.max(window.innerHeight - triggerRect.bottom - viewportInsets.bottom, 0);
+  const spaceAbove = Math.max(triggerRect.top - viewportInsets.top, 0);
+  const menuHeight = Math.ceil(dropdownContent.value.scrollHeight);
   const openUpward = menuHeight > spaceBelow && spaceAbove > spaceBelow;
   const availableHeight = openUpward ? spaceAbove : spaceBelow;
+  const nextMaxHeight = availableHeight > 0 && menuHeight > availableHeight ? Math.floor(availableHeight) : null;
 
   shouldOpenDropdownUp.value = openUpward;
-  dropdownMaxHeight.value = availableHeight > 0 && menuHeight > availableHeight ? Math.floor(availableHeight) : null;
+  dropdownMaxHeight.value = nextMaxHeight;
+
+  await nextTick();
+
+  if (!dropdownContent.value) {
+    return;
+  }
+
+  const renderedMenuRect = dropdownContent.value.getBoundingClientRect();
+  const overflowAbove = Math.max(viewportTop - renderedMenuRect.top, 0);
+  const overflowBelow = Math.max(renderedMenuRect.bottom - viewportBottom, 0);
+
+  if (overflowAbove <= 0 && overflowBelow <= 0) {
+    return;
+  }
+
+  const boundedHeight = Math.floor(renderedMenuRect.height - overflowAbove - overflowBelow);
+  dropdownMaxHeight.value = boundedHeight > 0 ? boundedHeight : 1;
 };
 
 const onDocumentClick = (event) => {
@@ -220,12 +312,20 @@ watch(
   { immediate: true }
 );
 
-watch(isDropdownOpen, (isOpen) => {
+watch(isDropdownOpen, async (isOpen) => {
   if (!isOpen) {
+    isDesktopFlyoutLayout.value = false;
+    activeDesktopFlyoutSectionKey.value = null;
     resetDropdownLayout();
     return;
   }
 
+  await nextTick();
+
+  if (dropdownContent.value) {
+    dropdownContent.value.scrollTop = 0;
+  }
+
   void updateDropdownLayout();
 });
 
@@ -292,7 +392,7 @@ const hasUser = computed(() => Boolean(props.user_id || props.customer_number ||
 const attachmentsFromOrder = ref([]);
 const attachmentsFromOrderError = ref(null);
 watch(
-  () => attachmentsFromOrder.value.length,
+  () => [attachmentsFromOrder.value.length, attachmentsFromOrderError.value, userIdFromCustomerNumber.value],
   () => {
     if (isDropdownOpen.value) {
       void updateDropdownLayout();
@@ -715,6 +815,452 @@ const defaultActions = computed(() => {
     },
   ];
 });
+
+const hasCustomActionsSlot = computed(() => Boolean(slots.actions));
+
+const buildMenuAction = (key, config) => ({
+  key,
+  disabled: false,
+  template: "default",
+  ...config,
+});
+
+const buildMenuSection = (key, label, items) => {
+  const visibleItems = items.filter(Boolean);
+  if (visibleItems.length === 0) {
+    return null;
+  }
+
+  return {
+    key,
+    label,
+    items: visibleItems,
+  };
+};
+
+const downloadOrderAttachment = (attachmentId) =>
+  SessionUser.objects.orders.functions.downloadAttachment(props.order_id, attachmentId, true).catch(() => {
+    Swal.fire({
+      title: t("admin.pos.settings_wheel.error"),
+      text: t("admin.pos.settings_wheel.error_downloading_attachment"),
+      icon: "error",
+    });
+  });
+
+const flatBuiltInMenuSections = computed(() => {
+  const sections = [];
+
+  if (props.order_booking_id) {
+    const bookingSection = buildMenuSection("booking", t("admin.pos.settings_wheel.booking"), [
+      (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && !props.order_id
+        ? buildMenuAction("booking-complete", {
+            icon: "fas fa-check-circle",
+            label: t("admin.pos.settings_wheel.mark_as_completed"),
+            template: "success",
+            clickAction: () =>
+              SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(props.order_booking_id, () => {
+                props.refreshFunction();
+              }),
+          })
+        : null,
+      buildMenuAction("booking-view", {
+        icon: "fas fa-external-link-alt",
+        label: t("admin.pos.settings_wheel.view_booking_new_tab"),
+        clickAction: () =>
+          SessionUser.functions.redirectTo.department(
+            props.department_id,
+            "modules/bookings/order/" + props.order_booking_id,
+            true
+          ),
+      }),
+      SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()
+        ? buildMenuAction("booking-change-association", {
+            icon: "fas fa-edit",
+            label: !props.order_id
+              ? t("admin.pos.settings_wheel.associate_order", {
+                  order: SessionUser.objects.orders.meta.labels.single.toLowerCase(),
+                })
+              : t("admin.pos.settings_wheel.change_order", {
+                  order: SessionUser.objects.orders.meta.labels.single.toLowerCase(),
+                }),
+            clickAction: () =>
+              SessionUser.objects.order_bookings.showEditObjectFieldForm(
+                props.order_booking_id,
+                "order_id",
+                props.order_id,
+                () => {
+                  props.refreshFunction();
+                },
+                {
+                  filters: {
+                    ...(props.customer_number ? { customer_id: props.customer_number } : {}),
+                    ...(props.department_id ? { department_id: props.department_id } : {}),
+                  },
+                  pagination: {
+                    page: 1,
+                    limit: 100,
+                  },
+                }
+              ),
+          })
+        : null,
+      !props.order_id
+        ? buildMenuAction("booking-delete", {
+            icon: "fas fa-trash-alt",
+            label: t("admin.pos.settings_wheel.delete_booking"),
+            template: "danger",
+            clickAction: () =>
+              SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(props.order_booking_id, () => {
+                props.refreshFunction();
+              }),
+          })
+        : null,
+    ]);
+
+    if (bookingSection) {
+      sections.push(bookingSection);
+    }
+  }
+
+  if (props.order_id) {
+    const orderSection = buildMenuSection(
+      "order",
+      SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single),
+      [
+        buildMenuAction("order-view", {
+          icon: "fas fa-external-link-alt",
+          label: t("admin.pos.settings_wheel.view_order_new_tab"),
+          clickAction: () =>
+            SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()
+              ? redirectDepartmentOrderPage(props.order_id, true)
+              : SessionUser.functions.redirectTo.user("/orders/" + props.order_id, true),
+        }),
+        SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()
+          ? buildMenuAction("order-attach-wash-certificate", {
+              icon: "fas fa-paperclip",
+              label: t("admin.pos.settings_wheel.attach_wash_certificate"),
+              clickAction: () =>
+                SessionUser.objects.orders.functions.showAttachWashCertificateForm(props.order_id, () => {
+                  props.refreshFunction();
+                }),
+            })
+          : null,
+        SessionUser.canAccessSuperUser()
+          ? buildMenuAction("order-change-customer", {
+              icon: "fas fa-user-edit",
+              label: t("admin.pos.settings_wheel.change_customer"),
+              clickAction: () => SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id),
+            })
+          : null,
+        SessionUser.canAccessSuperUser()
+          ? buildMenuAction("order-change-invoice-collection", {
+              icon: "fas fa-file-invoice-dollar",
+              label: t("admin.pos.settings_wheel.change_invoice_collection"),
+              clickAction: () =>
+                SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(
+                  props.order_id,
+                  props.refreshFunction
+                ),
+            })
+          : null,
+        SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()
+          ? buildMenuAction("order-delete", {
+              icon: "fas fa-trash-alt",
+              label: t("admin.pos.settings_wheel.delete_order"),
+              template: "danger",
+              clickAction: () =>
+                SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
+                  emitDeleted();
+                }),
+            })
+          : null,
+      ]
+    );
+
+    if (orderSection) {
+      sections.push(orderSection);
+    }
+  }
+
+  if (props.invoice_collection_id && SessionUser.canAccessSuperUser()) {
+    const invoiceCollectionLinkSection = buildMenuSection(
+      "invoice-collection-link",
+      SessionUser.objects.collectedOrderInvoices.meta.title,
+      [
+        buildMenuAction("invoice-collection-view", {
+          icon: "fas fa-file-invoice-dollar",
+          label: t("admin.pos.settings_wheel.view_invoice_collection_new_tab"),
+          clickAction: () => redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id),
+        }),
+      ]
+    );
+
+    if (invoiceCollectionLinkSection) {
+      sections.push(invoiceCollectionLinkSection);
+    }
+  }
+
+  if (props.department_lane_id) {
+    const departmentLaneSection = buildMenuSection(
+      "department-lane",
+      SessionUser.objects.department_lanes.meta.labels.single,
+      [
+        (SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && props.department_id
+          ? buildMenuAction("department-lane-view-admin", {
+              icon: "fas fa-external-link-alt",
+              label: t("admin.pos.settings_wheel.view_lane_new_tab"),
+              clickAction: () =>
+                SessionUser.functions.redirectTo.department(
+                  props.department_id,
+                  "modules/wash-lanes/" + props.department_lane_id,
+                  !SessionUser.functions.device.isMobile()
+                ),
+            })
+          : null,
+        SessionUser.canAccessSuperUser()
+          ? buildMenuAction("department-lane-view-superuser", {
+              icon: "fas fa-external-link-alt",
+              label: t("admin.pos.settings_wheel.view_lane_setup_new_tab"),
+              clickAction: () =>
+                SessionUser.functions.redirectTo.superUser("/department/lanes/" + props.department_lane_id, true),
+            })
+          : null,
+        SessionUser.canAccessSuperUser()
+          ? buildMenuAction("department-lane-force-enable", {
+              icon: "fas fa-play",
+              label: t("superuser.department_lane.force_enable_machine"),
+              template: "success",
+              clickAction: () => SessionUser.objects.department_lanes.functions.forceEnableMachine(props.department_lane_id),
+            })
+          : null,
+        SessionUser.canAccessSuperUser()
+          ? buildMenuAction("department-lane-force-disable", {
+              icon: "fas fa-stop",
+              label: t("superuser.department_lane.force_disable_machine"),
+              template: "danger",
+              clickAction: () => SessionUser.objects.department_lanes.functions.forceDisableMachine(props.department_lane_id),
+            })
+          : null,
+      ]
+    );
+
+    if (departmentLaneSection) {
+      sections.push(departmentLaneSection);
+    }
+  }
+
+  if (hasUser.value && SessionUser.canAccessSuperUser()) {
+    const customerSection = buildMenuSection("customer", SessionUser.objects.global.language.customer, [
+      userIdFromCustomerNumber.value
+        ? buildMenuAction("customer-view", {
+            icon: "fas fa-user-edit",
+            label: t("admin.pos.settings_wheel.view_customer_new_tab"),
+            clickAction: () =>
+              SessionUser.functions.redirectTo.superUser("/users/" + userIdFromCustomerNumber.value, true),
+          })
+        : null,
+      userIdFromCustomerNumber.value
+        ? buildMenuAction("customer-login", {
+            icon: "fas fa-user-shield",
+            label: t("admin.pos.settings_wheel.login_as_user"),
+            clickAction: () => SessionUser.superUser.intimidate.intimidateUser(userIdFromCustomerNumber.value),
+          })
+        : null,
+      userIdFromCustomerNumber.value
+        ? buildMenuAction("customer-login-qr", {
+            icon: "fas fa-user-shield",
+            label: t("admin.pos.settings_wheel.login_as_user_qr"),
+            clickAction: () => onClickShowImpersonationQRCode(userIdFromCustomerNumber.value),
+          })
+        : null,
+      buildMenuAction("customer-change-password", {
+        icon: "fas fa-key",
+        label: t("admin.pos.settings_wheel.change_password"),
+        clickAction: () => showSetCustomerPassword(userIdFromCustomerNumber.value),
+      }),
+      buildMenuAction("customer-show", {
+        icon: "fas fa-user",
+        label: t("admin.pos.settings_wheel.show_customer"),
+        clickAction: () => {
+          customerModalVisible.value = true;
+        },
+      }),
+    ]);
+
+    if (customerSection) {
+      sections.push(customerSection);
+    }
+  }
+
+  if (props.reg_1 || props.reg_2) {
+    const vehicleSection = buildMenuSection(
+      "vehicle",
+      props.reg_1 && props.reg_2
+        ? SessionUser.objects.vehicles.meta.labels.multiple
+        : SessionUser.objects.vehicles.meta.labels.single,
+      [
+        props.reg_1 && SessionUser.canAccessSuperUser()
+          ? buildMenuAction("vehicle-reg-1", {
+              icon: "fas fa-car",
+              label: t("admin.pos.settings_wheel.view_vehicle_new_tab", { reg: props.reg_1 }),
+              clickAction: () => SessionUser.functions.redirectTo.superUser("/vehicles/" + props.reg_1, true),
+            })
+          : null,
+        props.reg_2 && SessionUser.canAccessSuperUser()
+          ? buildMenuAction("vehicle-reg-2", {
+              icon: "fas fa-car",
+              label: t("admin.pos.settings_wheel.view_vehicle_new_tab", { reg: props.reg_2 }),
+              clickAction: () => SessionUser.functions.redirectTo.superUser("/vehicles/" + props.reg_2, true),
+            })
+          : null,
+      ]
+    );
+
+    if (vehicleSection) {
+      sections.push(vehicleSection);
+    }
+
+    if (attachmentsFromOrder.value.length > 0) {
+      const attachmentsSection = buildMenuSection("attachments", t("admin.pos.settings_wheel.attached_files"), [
+        ...attachmentsFromOrder.value.map((attachment) =>
+          buildMenuAction(`attachment-${attachment.id}`, {
+            icon: "fas fa-paperclip",
+            label: `${attachment.content?.document || attachment.content?.other}`,
+            clickAction: () => downloadOrderAttachment(attachment.id),
+          })
+        ),
+      ]);
+
+      if (attachmentsSection) {
+        sections.push(attachmentsSection);
+      }
+    }
+  }
+
+  if (props.invoice_collection_id) {
+    const invoiceCollectionDownloadSection = buildMenuSection(
+      "invoice-collection-download",
+      SessionUser.objects.collectedOrderInvoices.meta.title,
+      [
+        buildMenuAction("invoice-collection-download-invoice", {
+          icon: "fas fa-download",
+          label: t("admin.pos.settings_wheel.download_invoice"),
+          clickAction: () => SessionUser.objects.collectedOrderInvoices.functions.download(props.invoice_collection_id),
+        }),
+      ]
+    );
+
+    if (invoiceCollectionDownloadSection) {
+      sections.push(invoiceCollectionDownloadSection);
+    }
+  }
+
+  return sections;
+});
+
+const standaloneMenuActions = computed(() => {
+  const actions = [];
+
+  if (props.subuserGrant && SessionUser.canAccessUser()) {
+    actions.push(
+      buildMenuAction("subuser-grant-edit-permissions", {
+        icon: "fas fa-edit",
+        label: t("admin.pos.settings_wheel.edit_permissions"),
+        clickAction: () =>
+          SessionUser.objects.subuser_grants.functions.showPermissionEditForm(props.subuserGrant, () => {
+            props.refreshFunction();
+          }),
+      })
+    );
+    actions.push(
+      buildMenuAction("subuser-grant-delete-user", {
+        icon: "fas fa-trash",
+        label: t("admin.pos.settings_wheel.delete_user"),
+        clickAction: () =>
+          SessionUser.objects.subuser_grants.delete(props.subuserGrant.id, () => {
+            props.refreshFunction();
+          }),
+      })
+    );
+  }
+
+  return actions;
+});
+
+const desktopFlyoutMenuSections = computed(() => {
+  const mergedSections = [];
+  const mergedSectionsByLabel = new Map();
+
+  flatBuiltInMenuSections.value.forEach((section) => {
+    const labelKey = String(section.label);
+    const existingSection = mergedSectionsByLabel.get(labelKey);
+
+    if (existingSection) {
+      existingSection.items.push(...section.items);
+      return;
+    }
+
+    const mergedSection = {
+      ...section,
+      items: [...section.items],
+    };
+
+    mergedSectionsByLabel.set(labelKey, mergedSection);
+    mergedSections.push(mergedSection);
+  });
+
+  return mergedSections;
+});
+
+const activeDesktopFlyoutSection = computed(() => {
+  return (
+    desktopFlyoutMenuSections.value.find((section) => section.key === activeDesktopFlyoutSectionKey.value) ??
+    desktopFlyoutMenuSections.value[0] ??
+    null
+  );
+});
+
+const hasDropdownContent = computed(
+  () => hasCustomActionsSlot.value || flatBuiltInMenuSections.value.length > 0 || standaloneMenuActions.value.length > 0
+);
+
+const getDesktopFlyoutEstimatedWidth = () => {
+  const rootFontSize = Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize || "16") || 16;
+  return (desktopFlyoutRootPanelWidthRem + desktopFlyoutSubmenuWidthRem) * rootFontSize + desktopFlyoutPanelGapPx;
+};
+
+const syncDesktopFlyoutState = (triggerRect) => {
+  if (typeof window === "undefined") {
+    isDesktopFlyoutLayout.value = false;
+    return;
+  }
+
+  const canUseHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+  const hasSections = desktopFlyoutMenuSections.value.length > 0;
+  const hasSpaceForFlyout =
+    !!triggerRect && triggerRect.right - getDesktopFlyoutEstimatedWidth() >= desktopFlyoutPanelGapPx;
+  const nextDesktopFlyoutState =
+    canUseHover && hasSections && window.innerWidth >= desktopFlyoutMinViewportWidth && hasSpaceForFlyout;
+
+  isDesktopFlyoutLayout.value = nextDesktopFlyoutState;
+
+  if (!nextDesktopFlyoutState) {
+    activeDesktopFlyoutSectionKey.value = null;
+    return;
+  }
+
+  const currentSectionStillExists = desktopFlyoutMenuSections.value.some(
+    (section) => section.key === activeDesktopFlyoutSectionKey.value
+  );
+
+  if (!currentSectionStillExists) {
+    activeDesktopFlyoutSectionKey.value = desktopFlyoutMenuSections.value[0]?.key ?? null;
+  }
+};
+
+const setActiveDesktopFlyoutSection = (sectionKey) => {
+  activeDesktopFlyoutSectionKey.value = sectionKey;
+};
 </script>
 
 <template>
@@ -787,366 +1333,96 @@ const defaultActions = computed(() => {
         <div
           ref="dropdownContent"
           class="dropdown-content"
+          :class="dropdownContentClass"
           :style="dropdownContentStyle"
           @dropdown-action-selected="onActionSelected"
         >
-          <!-- Actions (If defined) -->
-          <template v-if="useSlots().actions">
-            <slot name="actions"></slot>
-            <!-- If there is an order_booking_id, show the order booking actions -->
-            <template v-if="props.order_booking_id">
-              <ActionSettingsWheelItemLabel :label="t('admin.pos.settings_wheel.booking')" />
-              <ActionSettingsWheelItem
-                v-if="(SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && !props.order_id"
-                :icon="'fas fa-check-circle'"
-                :label="t('admin.pos.settings_wheel.mark_as_completed')"
-                template="success"
-                :click-action="
-                  () =>
-                    SessionUser.objects.order_bookings.functions.showCompleteConfirmationModal(
-                      props.order_booking_id,
-                      () => {
-                        props.refreshFunction();
-                      }
-                    )
-                "
-              />
-              <ActionSettingsWheelItem
-                :icon="'fas fa-external-link-alt'"
-                :label="t('admin.pos.settings_wheel.view_booking_new_tab')"
-                :click-action="
-                  () =>
-                    SessionUser.functions.redirectTo.department(
-                      props.department_id,
-                      'modules/bookings/order/' + props.order_booking_id,
-                      true
-                    )
-                "
-              />
-              <ActionSettingsWheelItem
-                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                :icon="'fas fa-edit'"
-                :label="
-                  !props.order_id
-                    ? t('admin.pos.settings_wheel.associate_order', {
-                        order: SessionUser.objects.orders.meta.labels.single.toLowerCase(),
-                      })
-                    : t('admin.pos.settings_wheel.change_order', {
-                        order: SessionUser.objects.orders.meta.labels.single.toLowerCase(),
-                      })
-                "
-                :click-action="
-                  () =>
-                    SessionUser.objects.order_bookings.showEditObjectFieldForm(
-                      props.order_booking_id,
-                      'order_id',
-                      props.order_id,
-                      () => {
-                        props.refreshFunction();
-                      },
-                      {
-                        filters: {
-                          ...(customer_number ? { customer_id: props.customer_number } : {}),
-                          ...(props.department_id ? { department_id: props.department_id } : {}),
-                        },
-                        pagination: {
-                          page: 1,
-                          limit: 100,
-                        },
-                      }
-                    )
-                "
-              />
-              <ActionSettingsWheelItem
-                :icon="'fas fa-trash-alt'"
-                :label="t('admin.pos.settings_wheel.delete_booking')"
-                template="danger"
-                v-show="!props.order_id"
-                :click-action="
-                  () =>
-                    SessionUser.objects.order_bookings.functions.showDeleteConfirmationModal(
-                      props.order_booking_id,
-                      () => {
-                        props.refreshFunction();
-                      }
-                    )
-                "
-              />
+          <template v-if="hasDropdownContent">
+            <template v-if="isDesktopFlyoutLayout && desktopFlyoutMenuSections.length > 0">
+              <div class="action-settings-wheel-flyout" data-testid="action-settings-wheel-flyout">
+                <div class="action-settings-wheel-flyout__submenu-stack">
+                  <div
+                    v-for="section in desktopFlyoutMenuSections"
+                    :key="section.key"
+                    class="action-settings-wheel-flyout__submenu"
+                    :class="{ 'is-active': activeDesktopFlyoutSection?.key === section.key }"
+                    :data-testid="`action-settings-wheel-submenu-${section.key}`"
+                  >
+                    <p class="action-settings-wheel-flyout__submenu-title">
+                      {{ SessionUser.functions.ucFirst(section.label) }}
+                    </p>
+                    <div class="action-settings-wheel-flyout__submenu-items">
+                      <ActionSettingsWheelItem
+                        v-for="item in section.items"
+                        :key="item.key"
+                        :icon="item.icon"
+                        :label="item.label"
+                        :template="item.template"
+                        :click-action="item.clickAction"
+                        :disabled="item.disabled"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="action-settings-wheel-flyout__sections" data-testid="action-settings-wheel-sections">
+                  <slot v-if="hasCustomActionsSlot" name="actions"></slot>
+                  <button
+                    v-for="section in desktopFlyoutMenuSections"
+                    :key="section.key"
+                    type="button"
+                    class="action-settings-wheel-section-trigger"
+                    :class="{ 'is-active': activeDesktopFlyoutSection?.key === section.key }"
+                    :data-testid="`action-settings-wheel-section-${section.key}`"
+                    @mouseenter="setActiveDesktopFlyoutSection(section.key)"
+                    @focus="setActiveDesktopFlyoutSection(section.key)"
+                    @click.stop.prevent="setActiveDesktopFlyoutSection(section.key)"
+                  >
+                    <span class="action-settings-wheel-section-trigger__arrow">
+                      <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                    </span>
+                    <span class="action-settings-wheel-section-trigger__label">
+                      {{ SessionUser.functions.ucFirst(section.label) }}
+                    </span>
+                  </button>
+                  <div v-if="standaloneMenuActions.length > 0" class="action-settings-wheel-flyout__standalone-actions">
+                    <ActionSettingsWheelItem
+                      v-for="item in standaloneMenuActions"
+                      :key="item.key"
+                      :icon="item.icon"
+                      :label="item.label"
+                      :template="item.template"
+                      :click-action="item.clickAction"
+                      :disabled="item.disabled"
+                    />
+                  </div>
+                </div>
+              </div>
             </template>
-            <!-- If there's an order_id, show the order actions -->
-            <template v-if="props.order_id">
-              <!-- Label -->
-              <action-settings-wheel-item-label
-                :label="SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single)"
-              />
-              <!-- Go to the order page, in a new tab -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.view_order_new_tab')"
-                icon="fas fa-external-link-alt"
-                :click-action="async () => redirectDepartmentOrderPage(props.order_id, true)"
-                :disabled="false"
-              />
-              <!-- Go to the user/order/:order_id page, in a new tab -->
-              <action-settings-wheel-item
-                v-if="!SessionUser.canAccessAdmin() && !SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.view_order_new_tab')"
-                icon="fas fa-external-link-alt"
-                :click-action="() => SessionUser.functions.redirectTo.user('/orders/' + props.order_id, true)"
-                :disabled="false"
-              />
-              <!-- Attach wash certificate -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.attach_wash_certificate')"
-                icon="fas fa-paperclip"
-                :click-action="
-                  () =>
-                    SessionUser.objects.orders.functions.showAttachWashCertificateForm(props.order_id, () => {
-                      props.refreshFunction();
-                    })
-                "
-                :disabled="false"
-              />
-              <!-- Change the customer (of the order) -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.change_customer')"
-                icon="fas fa-user-edit"
-                :click-action="() => SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id)"
-                :disabled="false"
-              />
-              <!-- Change the invoice collection (of the order) -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.change_invoice_collection')"
-                icon="fas fa-file-invoice-dollar"
-                :click-action="
-                  () =>
-                    SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(
-                      props.order_id,
-                      props.refreshFunction
-                    )
-                "
-                :disabled="false"
-              />
-              <!-- Delete the order -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.delete_order')"
-                template="danger"
-                icon="fas fa-trash-alt"
-                :click-action="
-                  () =>
-                    SessionUser.objects.orders.functions.showDeleteConfirmationModal(props.order_id, () => {
-                      emitDeleted();
-                    })
-                "
-                :disabled="false"
-              />
-            </template>
-            <!-- If there is an invoice collection id, show the invoice actions -->
-            <template v-if="props.invoice_collection_id">
-              <!-- Label -->
-              <action-settings-wheel-item-label
-                :label="SessionUser.objects.collectedOrderInvoices.meta.title"
-                v-show="SessionUser.canAccessSuperUser()"
-              />
-              <!-- Show the invoice collection, in a new tab -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.view_invoice_collection_new_tab')"
-                icon="fas fa-file-invoice-dollar"
-                :click-action="() => redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id)"
-              />
-            </template>
-            <!-- if there is a department_lane_id, show the department lane actions -->
-            <template v-if="props.department_lane_id">
-              <!-- Label -->
-              <action-settings-wheel-item-label
-                :label="SessionUser.objects.department_lanes.meta.labels.single"
-                v-show="SessionUser.canAccessSuperUser() || SessionUser.canAccessAdmin()"
-              />
-              <!-- Show the department lane (Admin), in a new tab -->
-              <action-settings-wheel-item
-                v-if="(SessionUser.canAccessAdmin() || SessionUser.canAccessSuperUser()) && props.department_id"
-                :label="t('admin.pos.settings_wheel.view_lane_new_tab')"
-                icon="fas fa-external-link-alt"
-                :click-action="
-                  () =>
-                    SessionUser.functions.redirectTo.department(
-                      props.department_id,
-                      'modules/wash-lanes/' + props.department_lane_id,
-                      !SessionUser.functions.device.isMobile()
-                    )
-                "
-              />
-              <!-- Show the department lane (SuperUser), in a new tab -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                :label="t('admin.pos.settings_wheel.view_lane_setup_new_tab')"
-                icon="fas fa-external-link-alt"
-                :click-action="
-                  () =>
-                    SessionUser.functions.redirectTo.superUser('/department/lanes/' + props.department_lane_id, true)
-                "
-              />
-              <!-- Force enable machine -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                :label="t('superuser.department_lane.force_enable_machine')"
-                icon="fas fa-play"
-                template="success"
-                :click-action="
-                  () => SessionUser.objects.department_lanes.functions.forceEnableMachine(props.department_lane_id)
-                "
-              />
-              <!-- Force disable machine -->
-              <action-settings-wheel-item
-                v-if="SessionUser.canAccessSuperUser()"
-                :label="t('superuser.department_lane.force_disable_machine')"
-                icon="fas fa-stop"
-                template="danger"
-                :click-action="
-                  () => SessionUser.objects.department_lanes.functions.forceDisableMachine(props.department_lane_id)
-                "
-              />
-            </template>
-            <!-- If there's a user_id, show the user actions -->
-            <template v-if="hasUser">
-              <!-- Label -->
-              <ActionSettingsWheelItemLabel
-                :label="SessionUser.objects.global.language.customer"
-                v-show="SessionUser.canAccessSuperUser()"
-              />
-              <!-- Se bruger -->
-              <ActionSettingsWheelItem
-                :label="t('admin.pos.settings_wheel.view_customer_new_tab')"
-                icon="fas fa-user-edit"
-                :click-action="
-                  () => SessionUser.functions.redirectTo.superUser('/users/' + userIdFromCustomerNumber, true)
-                "
-                v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
-              />
-              <!-- Log ind som kunde -->
-              <ActionSettingsWheelItem
-                :label="t('admin.pos.settings_wheel.login_as_user')"
-                icon="fas fa-user-shield"
-                :click-action="() => SessionUser.superUser.intimidate.intimidateUser(userIdFromCustomerNumber)"
-                v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
-              />
-              <!-- Log ind som kunde (QR) -->
-              <ActionSettingsWheelItem
-                @click="onClickShowImpersonationQRCode(userIdFromCustomerNumber)"
-                icon="fas fa-user-shield"
-                :label="t('admin.pos.settings_wheel.login_as_user_qr')"
-                v-if="SessionUser.canAccessSuperUser() && userIdFromCustomerNumber"
-              />
-
-              <!-- Set password -->
-              <ActionSettingsWheelItem
-                :label="t('admin.pos.settings_wheel.change_password')"
-                icon="fas fa-key"
-                :click-action="() => showSetCustomerPassword(userIdFromCustomerNumber)"
-                v-if="SessionUser.canAccessSuperUser()"
-              />
-              <!-- Show customer modal -->
-              <ActionSettingsWheelItem
-                :label="t('admin.pos.settings_wheel.show_customer')"
-                icon="fas fa-user"
-                :click-action="() => (customerModalVisible = true)"
-                v-if="SessionUser.canAccessSuperUser()"
-              />
-            </template>
-            <!-- If there is a reg_1, show the reg_1 actions -->
-            <template v-if="props.reg_1 || props.reg_2">
-              <!-- Label -->
-              <action-settings-wheel-item-label
-                :label="
-                  props.reg_1 && props.reg_2
-                    ? `${SessionUser.objects.vehicles.meta.labels.multiple}`
-                    : `${SessionUser.objects.vehicles.meta.labels.single}`
-                "
-                v-show="SessionUser.canAccessSuperUser()"
-              />
-              <!-- Show the vehicle, in a new tab -->
-              <action-settings-wheel-item
-                :label="t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_1 })"
-                icon="fas fa-car"
-                v-if="props.reg_1 && SessionUser.canAccessSuperUser()"
-                :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_1, true)"
-              />
-              <action-settings-wheel-item
-                :label="t('admin.pos.settings_wheel.view_vehicle_new_tab', { reg: props.reg_2 })"
-                icon="fas fa-car"
-                v-if="props.reg_2 && SessionUser.canAccessSuperUser()"
-                :click-action="() => SessionUser.functions.redirectTo.superUser('/vehicles/' + props.reg_2, true)"
-              />
-              <!-- If there are any attachments, show the attachments actions -->
-              <template v-if="attachmentsFromOrder.length > 0">
-                <action-settings-wheel-item-label :label="t('admin.pos.settings_wheel.attached_files')" />
-                <template v-for="(attachment, index) in attachmentsFromOrder" :key="index">
-                  <action-settings-wheel-item
-                    :label="`${attachment.content?.document || attachment.content?.other}`"
-                    icon="fas fa-paperclip"
-                    :click-action="
-                      () =>
-                        SessionUser.objects.orders.functions
-                          .downloadAttachment(props.order_id, attachment.id, true)
-                          .catch((error) => {
-                            Swal.fire({
-                              title: t('admin.pos.settings_wheel.error'),
-                              text: t('admin.pos.settings_wheel.error_downloading_attachment'),
-                              icon: 'error',
-                            });
-                          })
-                    "
-                  />
-                </template>
+            <template v-else>
+              <slot v-if="hasCustomActionsSlot" name="actions"></slot>
+              <template v-for="section in flatBuiltInMenuSections" :key="section.key">
+                <ActionSettingsWheelItemLabel :label="section.label" />
+                <ActionSettingsWheelItem
+                  v-for="item in section.items"
+                  :key="item.key"
+                  :icon="item.icon"
+                  :label="item.label"
+                  :template="item.template"
+                  :click-action="item.clickAction"
+                  :disabled="item.disabled"
+                />
               </template>
-            </template>
-            <!-- Collected order invoice actions -->
-            <template v-if="props.invoice_collection_id">
-              <ActionSettingsWheelItemLabel
-                :label="SessionUser.objects.collectedOrderInvoices.meta.title"
-                v-show="props.invoice_collection_id"
-              />
-              <!-- Download invoice -->
               <ActionSettingsWheelItem
-                :label="t('admin.pos.settings_wheel.download_invoice')"
-                icon="fas fa-download"
-                :click-action="
-                  () => SessionUser.objects.collectedOrderInvoices.functions.download(props.invoice_collection_id)
-                "
-              />
-            </template>
-            <!-- Subuser grant actions -->
-            <template v-if="props.subuserGrant">
-              <ActionSettingsWheelItem
-                :label="t('admin.pos.settings_wheel.edit_permissions')"
-                icon="fas fa-edit"
-                :click-action="
-                  () =>
-                    SessionUser.objects.subuser_grants.functions.showPermissionEditForm(props.subuserGrant, () => {
-                      props.refreshFunction();
-                    })
-                "
-                v-if="SessionUser.canAccessUser()"
-              />
-              <ActionSettingsWheelItem
-                :label="t('admin.pos.settings_wheel.delete_user')"
-                icon="fas fa-trash"
-                :click-action="
-                  () =>
-                    SessionUser.objects.subuser_grants.delete(props.subuserGrant.id, () => {
-                      props.refreshFunction();
-                    })
-                "
-                v-if="SessionUser.canAccessUser()"
+                v-for="item in standaloneMenuActions"
+                :key="item.key"
+                :icon="item.icon"
+                :label="item.label"
+                :template="item.template"
+                :click-action="item.clickAction"
+                :disabled="item.disabled"
               />
             </template>
           </template>
-          <!-- If no actions are defined, then show that no actions are defined -->
           <template v-else>
             <div class="dropdown-item">
               <p class="has-text-centered">{{ t("admin.pos.settings_wheel.no_actions_defined") }}</p>
@@ -1207,6 +1483,109 @@ const defaultActions = computed(() => {
   padding: 0.35rem;
 }
 
+.action-settings-wheel-dropdown-content--desktop-flyout {
+  padding: 0.5rem;
+}
+
+.action-settings-wheel-flyout {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.75rem;
+  min-width: 33rem;
+}
+
+.action-settings-wheel-flyout__submenu-stack {
+  display: grid;
+  min-width: 17rem;
+}
+
+.action-settings-wheel-flyout__sections,
+.action-settings-wheel-flyout__submenu {
+  display: flex;
+  flex-direction: column;
+  min-width: 15rem;
+}
+
+.action-settings-wheel-flyout__submenu {
+  grid-area: 1 / 1;
+  background: linear-gradient(180deg, #f9fbfd 0%, #f3f7fb 100%);
+  border: 1px solid #d9e4ef;
+  border-radius: 0.8rem;
+  padding: 0.35rem;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+
+.action-settings-wheel-flyout__submenu.is-active {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.action-settings-wheel-flyout__submenu-title {
+  margin: 0;
+  padding: 0.55rem 0.75rem 0.35rem;
+  color: #6a7890;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.action-settings-wheel-flyout__submenu-items,
+.action-settings-wheel-flyout__standalone-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.action-settings-wheel-flyout__standalone-actions {
+  margin-top: 0.35rem;
+  padding-top: 0.35rem;
+  border-top: 1px solid #e3eaf2;
+}
+
+.action-settings-wheel-section-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.8rem 0.9rem;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.7rem;
+  color: #25344d;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.action-settings-wheel-section-trigger:hover,
+.action-settings-wheel-section-trigger:focus,
+.action-settings-wheel-section-trigger.is-active {
+  background: #f2f6fb;
+  border-color: #d8e2ed;
+  color: #132339;
+  outline: none;
+}
+
+.action-settings-wheel-section-trigger__arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.9rem;
+  color: #708097;
+  flex-shrink: 0;
+}
+
+.action-settings-wheel-section-trigger__label {
+  flex: 1;
+  text-align: left;
+  font-weight: 600;
+}
+
 .dropdown-content :deep(.dropdown-item-action),
 .dropdown-content :deep(.dropdown-item-label) {
   border-radius: 0.55rem;
diff --git a/src/components/displays/modals/AssignDraftOrderCustomerModal.vue b/src/components/displays/modals/AssignDraftOrderCustomerModal.vue
index cc4072c4..dc81751d 100644
--- a/src/components/displays/modals/AssignDraftOrderCustomerModal.vue
+++ b/src/components/displays/modals/AssignDraftOrderCustomerModal.vue
@@ -10,6 +10,34 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  title: {
+    type: String,
+    default: null,
+  },
+  subtitle: {
+    type: String,
+    default: null,
+  },
+  submitLabel: {
+    type: String,
+    default: null,
+  },
+  errorMessageText: {
+    type: String,
+    default: null,
+  },
+  newCollectionName: {
+    type: String,
+    default: null,
+  },
+  newCollectionDescription: {
+    type: String,
+    default: null,
+  },
+  submitAction: {
+    type: Function,
+    default: null,
+  },
 });
 
 const emit = defineEmits(["close", "assigned"]);
@@ -26,6 +54,18 @@ const isSaving = ref(false);
 const isCreatingInvoiceCollection = ref(false);
 const errorMessage = ref("");
 const invoiceCollectionsContainer = ref(null);
+const modalTitle = computed(() => props.title || t("admin.pos.drafts_assignment.title"));
+const modalSubtitle = computed(
+  () => props.subtitle || t("admin.pos.drafts_assignment.subtitle", { orderId: props.order.id })
+);
+const modalSubmitLabel = computed(() => props.submitLabel || t("admin.pos.drafts_assignment.submit"));
+const assignmentErrorText = computed(() => props.errorMessageText || t("admin.pos.drafts_assignment.error"));
+const createdInvoiceCollectionName = computed(
+  () => props.newCollectionName || t("admin.pos.drafts_assignment.new_collection_name")
+);
+const createdInvoiceCollectionDescription = computed(
+  () => props.newCollectionDescription || t("admin.pos.drafts_assignment.new_collection_description")
+);
 
 const normalizePositiveInteger = (value) => {
   const parsedValue = Number.parseInt(value, 10);
@@ -296,8 +336,8 @@ const createInvoiceCollection = async () => {
   try {
     const response = await SessionUser.objects.collectedOrderInvoices.add(
       customerNumber,
-      t("admin.pos.drafts_assignment.new_collection_name"),
-      t("admin.pos.drafts_assignment.new_collection_description"),
+      createdInvoiceCollectionName.value,
+      createdInvoiceCollectionDescription.value,
       null
     );
 
@@ -314,7 +354,7 @@ const createInvoiceCollection = async () => {
       await scrollInvoiceCollectionIntoView(createdInvoiceCollectionId);
     }
   } catch (error) {
-    errorMessage.value = SessionUser.functions.parseErrorMessage(error) || t("admin.pos.drafts_assignment.error");
+    errorMessage.value = SessionUser.functions.parseErrorMessage(error) || assignmentErrorText.value;
   } finally {
     isCreatingInvoiceCollection.value = false;
   }
@@ -329,7 +369,8 @@ const submitAssignment = async () => {
   errorMessage.value = "";
 
   try {
-    const response = await SessionUser.objects.orders.functions.assignDraftCustomer({
+    const submitAction = props.submitAction || SessionUser.objects.orders.functions.assignDraftCustomer;
+    const response = await submitAction({
       order_id: normalizePositiveInteger(props.order?.id),
       customer_id: normalizePositiveInteger(selectedCustomer.value?.customerNumber),
       invoice_collection_id: normalizePositiveInteger(selectedInvoiceCollectionId.value),
@@ -339,7 +380,7 @@ const submitAssignment = async () => {
 
     emit("assigned", response);
   } catch (error) {
-    errorMessage.value = SessionUser.functions.parseErrorMessage(error) || t("admin.pos.drafts_assignment.error");
+    errorMessage.value = SessionUser.functions.parseErrorMessage(error) || assignmentErrorText.value;
   } finally {
     isSaving.value = false;
   }
@@ -356,9 +397,9 @@ onBeforeUnmount(() => {
     <div class="modal-card draft-order-assign-modal">
       <header class="modal-card-head draft-order-assign-header">
         <div class="draft-order-assign-heading">
-          <p class="modal-card-title" data-testid="draft-order-assign-title">{{ t("admin.pos.drafts_assignment.title") }}</p>
+          <p class="modal-card-title" data-testid="draft-order-assign-title">{{ modalTitle }}</p>
           <p class="is-size-7 has-text-grey mt-2">
-            {{ t("admin.pos.drafts_assignment.subtitle", { orderId: props.order.id }) }}
+            {{ modalSubtitle }}
           </p>
         </div>
         <button
@@ -569,7 +610,7 @@ onBeforeUnmount(() => {
           <span class="icon">
             <i class="fas fa-user-check"></i>
           </span>
-          <span>{{ t("admin.pos.drafts_assignment.submit") }}</span>
+          <span>{{ modalSubmitLabel }}</span>
         </button>
       </footer>
     </div>
diff --git a/src/components/forms/department/pos/input/customerSearchFieldPos.vue b/src/components/forms/department/pos/input/customerSearchFieldPos.vue
index 81f2ac33..537e3832 100644
--- a/src/components/forms/department/pos/input/customerSearchFieldPos.vue
+++ b/src/components/forms/department/pos/input/customerSearchFieldPos.vue
@@ -32,6 +32,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  containedResults: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["update:customer_id", "onCustomerSelected"]);
@@ -249,13 +253,19 @@ const onClearSelectedCustomer = async () => {
           id="pos_select_customer_input"
         />
       </div>
-      <div class="dropdown" :class="{ 'is-active': showSelector && searchCustomerResults.length > 0 && isInvoiceMode }">
-        <div class="dropdown-menu">
-          <div class="dropdown-content">
+      <div
+        class="dropdown customer-picker__results"
+        :class="{
+          'is-active': showSelector && searchCustomerResults.length > 0 && isInvoiceMode,
+          'customer-picker__results--contained': props.containedResults,
+        }"
+      >
+        <div class="dropdown-menu customer-picker__results-menu">
+          <div class="dropdown-content customer-picker__results-content">
             <a
               v-for="result in searchCustomerResults"
               :key="result.id"
-              class="dropdown-item customer-drop-down-select"
+              class="dropdown-item customer-drop-down-select customer-picker__result"
               @click="selectCustomer(result); emitChange(result)"
               :class="{
                 'is-active': getSearchIndexByCustomerNumber(result.customerNumber) === selectedDropdownItem,
@@ -385,5 +395,50 @@ const onClearSelectedCustomer = async () => {
 
 .customer-picker__manual-search {
   margin-bottom: 0;
+  min-width: 0;
+}
+
+.customer-picker__manual-search .control {
+  min-width: 0;
+}
+
+.customer-picker__manual-search :deep(input) {
+  width: 100%;
+}
+
+.customer-picker__results {
+  display: block;
+  position: relative;
+  width: 100%;
+  z-index: 40;
+}
+
+.customer-picker__results-menu {
+  left: 0;
+  max-width: 100%;
+  min-width: 0;
+  right: 0;
+  width: auto;
+}
+
+.customer-picker__results-content {
+  max-height: min(16rem, 42vh);
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.customer-picker__results--contained .customer-picker__results-menu {
+  padding-top: 0.45rem;
+  position: static;
+}
+
+.customer-picker__results--contained .customer-picker__results-content {
+  max-height: min(13rem, 34vh);
+}
+
+.customer-picker__result {
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 </style>
diff --git a/src/components/session/token/SessionUser/Objects/Orders.vue b/src/components/session/token/SessionUser/Objects/Orders.vue
index 9f60cc45..dc9f5c6f 100644
--- a/src/components/session/token/SessionUser/Objects/Orders.vue
+++ b/src/components/session/token/SessionUser/Objects/Orders.vue
@@ -2,156 +2,92 @@
 import Swal from "sweetalert2";
 import {ObjectsGlobal} from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
 import {SessionUser} from "@/components/session/token/SessionUser.vue";
-import CustomerSearchFieldPos from "@/components/forms/department/pos/input/customerSearchFieldPos.vue";
+import AssignDraftOrderCustomerModal from "@/components/displays/modals/AssignDraftOrderCustomerModal.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import { editOrderItem, getOrderItems } from "@/components/shop/OrdersItems.vue";
 import {createApp} from "vue";
 import i18n from '@/i18n';
 
 const t = (key) => i18n.global.t(key);
+const mountOrderCustomerAssignmentModal = ({
+  order,
+  title,
+  subtitle,
+  submitLabel,
+  errorMessageText,
+  newCollectionDescription,
+  onAssigned = null,
+}) => {
+  const host = document.createElement("div");
+  host.dataset.testid = "change-customer-assignment-host";
+  document.body.appendChild(host);
 
-// Define a function to show the SweetAlert2 modal with the Vue component
-const showCustomerSearchModal = (onSuccessFunction = null) => {
-  // Create a container element for the Vue component
-  const div = document.createElement('div')
+  let isDisposed = false;
+  let app = null;
 
-  // Dynamically create and mount the Vue component
-  // And add a prop to the component "onCustomerSelected"
-  const app = createApp(CustomerSearchFieldPos, {
-    onCustomerSelected: async (customer) => {
-      if (!customer || !customer.customerNumber) {
-        Swal.fire({
-          icon: 'error',
-          title: 'Ingen kunde valgt',
-          timer: 2000,
-        });
-        return;
-      }
-      // Handle the customer selection here
-      console.log('Selected customer:', customer)
-      // Close the modal
-      Swal.close()
-      // Run follow-up flow after the customer picker has fully closed.
-      if (onSuccessFunction) {
-        await onSuccessFunction(customer.customerNumber);
-      }
+  const dispose = () => {
+    if (isDisposed) {
+      return;
     }
-  })
 
+    isDisposed = true;
+    app?.unmount?.();
+    host.remove();
+  };
 
-  // Mount the Vue app to the dynamically created `div`
-  app.mount(div)
+  app = createApp(AssignDraftOrderCustomerModal, {
+    order,
+    title,
+    subtitle,
+    submitLabel,
+    errorMessageText,
+    newCollectionDescription,
+    onClose: () => dispose(),
+    onAssigned: async (response) => {
+      try {
+        if (typeof onAssigned === "function") {
+          await onAssigned(response);
+        }
+      } finally {
+        dispose();
+      }
+    },
+  });
 
-  // Show SweetAlert2 dialog with the Vue component rendered inside
-  Swal.fire({
-    title: 'Search for a Customer',
-    html: div, // Include the Vue component’s container
-    showCancelButton: true,
-    showConfirmButton: false,
-    heightAuto: false,
-    didDestroy: () => {
-      // Clean up the Vue app when the modal is closed
-      app.unmount()
-    }
-  })
+  app.use(i18n);
+  app.mount(host);
+
+  return dispose;
 }
 
 
 
 const showChangeOrderCustomerForm = async (id, onAfterSubmit = null) => {
-  function noCustomerSelected() {
-    Swal.fire({
-      icon: 'error',
-      title: 'Ingen kunde valgt',
-      timer: 2000,
-    })
+  const normalizedOrderId = normalizePositiveInteger(id);
+  if (!normalizedOrderId) {
+    return;
   }
-  function noInvoiceCollectionSelected() {
-    Swal.fire({
-      icon: 'error',
-      title: 'Ingen faktura samling valgt',
-      timer: 2000,
-    })
-  }
-  function changeOrderInvoiceCollectionId(order_id, new_collection_id) {
-    // Change the invoice collection
-    return SessionUser.objects.orders.set.invoice_collection_id(
-        parseInt(order_id),
-        parseInt(new_collection_id)
-    );
-  }
-  function changeOrderCustomerId(order_id, new_customer_id) {
-    // Change the customer
-    return SessionUser.objects.orders.set.customer_id(
-        parseInt(order_id),
-        parseInt(new_customer_id)
-    );
-  }
-  async function saveChanges(order_id, new_customer_id, new_collection_id) {
-    try {
-      const customerResponse = await changeOrderCustomerId(order_id, new_customer_id);
-      console.log("Customer changed successfully:", customerResponse);
-
-      const invoiceCollectionResponse = await changeOrderInvoiceCollectionId(order_id, new_collection_id);
-      console.log("Invoice collection changed successfully:", invoiceCollectionResponse);
-
-      await Swal.fire({
-        icon: 'success',
-        title: 'Faktura samling ændret',
-        showConfirmButton: false,
-        timer: 2000,
-      });
 
+  mountOrderCustomerAssignmentModal({
+    order: {
+      id: normalizedOrderId,
+      department_id: null,
+      invoice_collection_id: null,
+    },
+    title: t("admin.pos.settings_wheel.change_customer"),
+    subtitle: `Vælg kunde og fakturasamling for at flytte ordre #${normalizedOrderId} til den valgte kunde.`,
+    submitLabel: t("admin.pos.settings_wheel.change_customer"),
+    errorMessageText: "Der opstod en fejl under ændring af kunde.",
+    newCollectionDescription: "Oprettet fra kundeskift",
+    onAssigned: async (response) => {
       if (typeof onAfterSubmit === 'function') {
-        await onAfterSubmit({
-          customerResponse,
-          invoiceCollectionResponse,
-          customer_id: parseInt(new_customer_id, 10),
-          invoice_collection_id: parseInt(new_collection_id, 10),
-        });
+        await onAfterSubmit(response);
         return;
       }
 
       window.location.reload();
-    } catch (error) {
-      console.error("Error changing customer or invoice collection:", error);
-      Swal.fire({
-        icon: 'error',
-        title: 'Fejl ved ændring af kunde eller faktura samling',
-        timer: 2000,
-      });
     }
-  }
-  async function chooseInvoiceCollection(order_id, new_customer_id) {
-    // Select the new invoice collection
-    await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(new_customer_id, async (invoice_collection_id) => {
-      // Make sure it's valid
-      if (!invoice_collection_id) {
-        noInvoiceCollectionSelected();
-        return;
-      }
-      // Change the invoice collection in the database.
-      await saveChanges(order_id, new_customer_id, invoice_collection_id);
-    });
-  }
-  // Show the customer search modal
-  // Define the new data.
-  let new_customer_id = null;
-  // Let the user select a customer
-  showCustomerSearchModal(async (customer_number) => {
-        // Store the new customer id
-        new_customer_id = customer_number;
-        // Make sure it's valid
-        if (!new_customer_id) {
-          noCustomerSelected();
-          return;
-        }
-        // Show the invoice collection picker form
-        console.log('Displaying invoice collection picker form for customer:', new_customer_id);
-        await chooseInvoiceCollection(id, new_customer_id);
-      }
-  );
-
+  });
 }
 
 const showChangeOrderInvoiceCollectionForm = async (id, onAfterSubmit = null) => {
@@ -958,3 +894,16 @@ const assignDraftOrderCustomer = async ({
       }
     };
 </script>
+<style>
+.order-customer-search-modal {
+  max-width: calc(100vw - 2rem);
+  overflow: visible;
+}
+
+.order-customer-search-modal__content {
+  margin: 1rem 0 0;
+  overflow: visible;
+  padding: 0;
+  text-align: left;
+}
+</style>
diff --git a/src/features/edgeGateways/EdgeGatewayManager.vue b/src/features/edgeGateways/EdgeGatewayManager.vue
index 37f99b28..8dfa27e9 100644
--- a/src/features/edgeGateways/EdgeGatewayManager.vue
+++ b/src/features/edgeGateways/EdgeGatewayManager.vue
@@ -125,6 +125,7 @@ const errorDetailsText = computed(() => (errorState.value?.details || []).join("
 const unwrap = (response, fallback = null) => response?.data?.data ?? fallback;
 const sleep = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
 const normId = (value) => (value === null || value === undefined || value === "" ? null : String(value));
+const normLabel = (value) => String(value || "").trim();
 const tone = (status) => ({ ONLINE: "success", DEGRADED: "warning", OFFLINE: "danger" }[status] || "neutral");
 const statusLabel = (status) => ({ ONLINE: "Online", DEGRADED: "Needs attention", OFFLINE: "Offline" }[status] || "Unknown");
 const discoveryLabel = (status) => ({ READY: "Ready", STALE: "Stale", PENDING: "Pending", FAILED: "Failed" }[status] || "Unknown");
@@ -161,6 +162,32 @@ const normalizeFleetUsage = (value) => {
   };
 };
 
+const snapshotGatewayClaimState = (gateway) => ({
+  lastHeartbeatAt: gateway?.last_heartbeat_at || null,
+  status: gateway?.status || null,
+  lastSeenIp: gateway?.last_seen_ip || null,
+});
+
+const buildGatewayClaimBaseline = (rows = []) =>
+  new Map(rows.map((gateway) => [String(gateway.id), snapshotGatewayClaimState(gateway)]));
+
+const gatewayClaimStateChanged = (gateway, baseline) => {
+  if (!baseline) {
+    return false;
+  }
+
+  return (
+    String(gateway?.last_heartbeat_at || "") !== String(baseline.lastHeartbeatAt || "") ||
+    String(gateway?.status || "") !== String(baseline.status || "") ||
+    String(gateway?.last_seen_ip || "") !== String(baseline.lastSeenIp || "")
+  );
+};
+
+const sortByMostRecentHeartbeat = (rows = []) =>
+  [...rows].sort(
+    (left, right) => new Date(String(right?.last_heartbeat_at || 0)).getTime() - new Date(String(left?.last_heartbeat_at || 0)).getTime()
+  );
+
 const view = (gateway) => {
   if (!gateway) {
     return null;
@@ -435,23 +462,42 @@ const load = async () => {
   }
 };
 
-const pollForClaimedGateway = async ({ existingIds, departmentId, label, pollToken }) => {
-  for (let attempt = 0; attempt < 6; attempt += 1) {
+const pollForClaimedGateway = async ({ existingIds, baseline, departmentId, label, pollToken }) => {
+  const normalizedDepartmentId = Number(departmentId || 0);
+  const normalizedLabel = normLabel(label);
+
+  for (let attempt = 0; attempt < 60; attempt += 1) {
     if (installerClaimPollToken.value !== pollToken) {
       return;
     }
 
-    await sleep(attempt === 0 ? 1500 : 750);
+    await sleep(attempt === 0 ? 1500 : 2000);
     await refreshFleet();
 
-    const claimed = gateways.value.find((item) => {
-      if (existingIds.has(Number(item.id))) return false;
-      if (Number(item.department_id) !== departmentId) return false;
-      if (label && String(item.label || "").trim() !== label) return false;
+    const matchingGateways = gateways.value.filter((item) => {
+      if (Number(item.department_id) !== normalizedDepartmentId) return false;
+      if (normalizedLabel && normLabel(item.label) !== normalizedLabel) return false;
       return true;
     });
 
+    const claimed =
+      matchingGateways.find((item) => !existingIds.has(Number(item.id))) ||
+      (() => {
+        const reusedGateways = sortByMostRecentHeartbeat(
+          matchingGateways.filter((item) => gatewayClaimStateChanged(item, baseline.get(String(item.id))))
+        );
+        if (reusedGateways.length === 1) {
+          return reusedGateways[0];
+        }
+        if (normalizedLabel && reusedGateways.length > 1) {
+          return reusedGateways[0];
+        }
+        return null;
+      })();
+
     if (claimed) {
+      flashMessage.value = existingIds.has(Number(claimed.id)) ? "Gateway reconnected." : "Gateway connected.";
+      clearError();
       await selectGateway(claimed.id, "overview");
       return;
     }
@@ -471,12 +517,13 @@ const generateInstaller = async () => {
     const label = installerLabel.value.trim();
     const pollToken = installerClaimPollToken.value + 1;
     const existingIds = new Set(gateways.value.map((item) => Number(item.id)));
+    const baseline = buildGatewayClaimBaseline(gateways.value);
     const response = await createEdgeGatewayInstallToken({ department_id: departmentId, label: label || undefined });
     installerClaimPollToken.value = pollToken;
     installerCommand.value = unwrap(response, null)?.install_command || "";
     flashMessage.value = "Installer token generated.";
     clearError();
-    pollForClaimedGateway({ existingIds, departmentId, label, pollToken }).catch(() => {});
+    pollForClaimedGateway({ existingIds, baseline, departmentId, label, pollToken }).catch(() => {});
   } catch (error) {
     fail(error);
   } finally {
diff --git a/tests/e2e/admin-department-visibility.spec.ts b/tests/e2e/admin-department-visibility.spec.ts
index 72bac25f..f45a7316 100644
--- a/tests/e2e/admin-department-visibility.spec.ts
+++ b/tests/e2e/admin-department-visibility.spec.ts
@@ -529,6 +529,52 @@ test.describe("Admin department visibility", () => {
     await expect(page).toHaveURL(/\/admin\/2\/modules\/bookings$/);
   });
 
+  test("keeps the bookings navigation row full width when only the fallback tooltip is available", async ({
+    page,
+  }, testInfo) => {
+    test.skip(!isDesktopProject(testInfo), "Desktop only");
+
+    await mockAdminDepartmentDependencies(page, {
+      permissions: [
+        ...adminPermissions,
+        "list_bookings",
+      ],
+    });
+
+    await page.route(/\/order-bookings\/counts(\?.*)?$/i, async (route) => {
+      const url = new URL(route.request().url());
+      const department = url.searchParams.get("department") || "";
+
+      await route.fulfill(
+        json({
+          data: department === "1"
+            ? {
+                past: 2,
+                current: 0,
+                future: 1,
+              }
+            : {
+                past: 0,
+                current: 0,
+                future: 0,
+              },
+        })
+      );
+    });
+
+    await page.goto("/admin/1/modules/daily-report");
+
+    const bookingsLabel = page.getByTestId("desktop-buefy-nav-bookings-label");
+    await expect(bookingsLabel).toContainText("Bookinger");
+
+    const bookingsLabelBox = await bookingsLabel.boundingBox();
+    expect(bookingsLabelBox?.width ?? 0).toBeGreaterThan(250);
+
+    await bookingsLabel.hover();
+    await expect(page.getByTestId("desktop-buefy-nav-bookings-tooltip-overdue")).toContainText("2");
+    await expect(page.getByTestId("desktop-buefy-nav-bookings-tooltip-future")).toContainText("1");
+  });
+
   test("uses the cached bookings counts endpoint for desktop buefy menu badges", async ({
     page,
   }, testInfo) => {
diff --git a/tests/e2e/admin-pos-orders.spec.ts b/tests/e2e/admin-pos-orders.spec.ts
index 5afaf058..d11d7c46 100644
--- a/tests/e2e/admin-pos-orders.spec.ts
+++ b/tests/e2e/admin-pos-orders.spec.ts
@@ -12,11 +12,24 @@ const POS_PERMISSIONS = [
   "list_customer_attributes",
   "get_custom_prices_other",
 ];
+const SUPERUSER_POS_PERMISSIONS = [...POS_PERMISSIONS, "superuser"];
 
 const POS_BOOT_URL = "/admin/12/modules/pos?step=1";
 const DRAFT_TRANSACTION_CUSTOMER_ID = 44556677;
 const DRAFT_TRANSACTION_CUSTOMER_NAME = "(TEST) Draft Transaction Customer";
 
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function jsonResponse(body: unknown, status = 200) {
+  return {
+    status,
+    contentType: "application/json",
+    body: JSON.stringify(body),
+  };
+}
+
 function getPosBootStep(page: Page) {
   return page.locator('[data-testid="pos-step-1"]:visible, [data-testid="pos-mobile-step-1"]:visible').first();
 }
@@ -286,6 +299,41 @@ async function openAddItemsPanel(page: Page) {
   await expect(addItemsBackButton).toBeVisible();
 }
 
+async function openLowestVisibleOrderActionDropdown(page: Page) {
+  const triggers = page.locator("tbody .action-settings-wheel-trigger:visible");
+  const viewportHeight = page.viewportSize()?.height ?? 720;
+  const triggerCount = await triggers.count();
+  let bestIndex = -1;
+  let bestY = -1;
+
+  for (let index = 0; index < triggerCount; index += 1) {
+    const trigger = triggers.nth(index);
+    const box = await trigger.boundingBox();
+    if (!box) {
+      continue;
+    }
+
+    if (box.y + box.height > viewportHeight - 8) {
+      continue;
+    }
+
+    if (box.y > bestY) {
+      bestY = box.y;
+      bestIndex = index;
+    }
+  }
+
+  if (bestIndex === -1) {
+    throw new Error("No visible order action trigger was positioned within the current viewport.");
+  }
+
+  const trigger = triggers.nth(bestIndex);
+  await trigger.click();
+  const activeDropdown = page.locator("tbody .dropdown.is-active").last();
+  await expect(activeDropdown).toBeVisible();
+  return activeDropdown;
+}
+
 function getVisibleTestId(page: Page, testId: string) {
   return page.locator(`[data-testid="${testId}"]:visible`).first();
 }
@@ -459,6 +507,82 @@ function createOpenStripeInvoiceOrderFixture() {
   });
 }
 
+function createTallActionMenuPosFixture() {
+  const baseFixture = createPosFixture();
+  const tallOrderIds = Array.from({ length: 12 }, (_, index) => 54518 + index);
+
+  return createPosFixture({
+    ordersById: tallOrderIds.reduce<Record<number, Record<string, unknown>>>((orders, orderId, index) => {
+      orders[orderId] = {
+        ...baseFixture.ordersById[54518],
+        id: orderId,
+        user_id: 77,
+        booking_id: 9100 + index,
+        customer_name: "(TEST) Pleno Vognmandsforretning",
+        cashier_name: "Jeppe",
+        invoice_collection_id: 101,
+        total_net_amount: 1372,
+        reference: `Tall action menu ${orderId}`,
+        reg_1: `EC${21233 + index}`,
+        reg_2: index % 2 === 0 ? `TR${11220 + index}` : "",
+        created_at: `2026-04-21 ${String(8 + index).padStart(2, "0")}:44:07`,
+      };
+      return orders;
+    }, {}),
+    attachmentsByOrderId: tallOrderIds.reduce<Record<number, Array<Record<string, unknown>>>>((attachments, orderId) => {
+      attachments[orderId] = Array.from({ length: 3 }, (_, index) => ({
+        id: 7000 + orderId * 10 + index,
+        object_type: "orders",
+        object_id: orderId,
+        content: {
+          image: null,
+          document: `action-menu-${orderId}-${index + 1}.pdf`,
+          relation: null,
+          other: `action-menu-${orderId}-${index + 1}.pdf`,
+          src: null,
+        },
+        created_at: "2026-04-21 08:44:07",
+        updated_at: "2026-04-21 08:44:07",
+        deleted_at: null,
+      }));
+      return attachments;
+    }, {}),
+  });
+}
+
+function createAsyncActionMenuPosFixture() {
+  const baseFixture = createPosFixture();
+
+  return createPosFixture({
+    ordersById: {
+      54518: {
+        ...baseFixture.ordersById[54518],
+        booking_id: 9101,
+        invoice_collection_id: 101,
+        reference: "Async action menu 54518",
+        reg_1: "EC21233",
+      },
+    },
+    attachmentsByOrderId: {
+      54518: Array.from({ length: 3 }, (_, index) => ({
+        id: 7300 + index,
+        object_type: "orders",
+        object_id: 54518,
+        content: {
+          image: null,
+          document: `async-action-menu-54518-${index + 1}.pdf`,
+          relation: null,
+          other: `async-action-menu-54518-${index + 1}.pdf`,
+          src: null,
+        },
+        created_at: "2026-04-21 08:44:07",
+        updated_at: "2026-04-21 08:44:07",
+        deleted_at: null,
+      })),
+    },
+  });
+}
+
 test.describe("Admin POS Orders - desktop settings", () => {
   test.beforeEach(async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only order settings coverage");
@@ -1495,7 +1619,7 @@ test("shows live Stripe payment status and cancellation for open card payment or
   await deleteStripeInvoiceRequest;
 
   await expect(page.getByTestId("pos-order-stripe-email-panel")).toHaveCount(0);
-  await expect(page.getByTestId("economic-invoice-export-flow")).toBeVisible();
+  await expect(page.getByTestId("pos-order-stripe-email-cancel")).toHaveCount(0);
 });
 
 test.describe("Admin POS Orders - draft transaction customer", () => {
@@ -2080,6 +2204,163 @@ test.describe("Admin POS Orders - desktop attachment discovery", () => {
   });
 });
 
+test.describe("Admin POS Orders - desktop action menu layout", () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only action menu layout coverage");
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: SUPERUSER_POS_PERMISSIONS,
+      edgeGateways: false,
+      pos: createTallActionMenuPosFixture(),
+    });
+    await primeOperatorSession(page, "pos-orders-action-menu-layout-token", SUPERUSER_POS_PERMISSIONS);
+  });
+
+  test("keeps tall menus within the usable viewport and starts from the first action", async ({ page }) => {
+    await page.goto("/admin/12/modules/pos/orders");
+    await expect(page.locator("table")).toBeVisible();
+
+    const dropdownRoot = await openLowestVisibleOrderActionDropdown(page);
+    const dropdownContent = dropdownRoot.locator(".dropdown-content").first();
+    const firstAction = dropdownContent.locator(".dropdown-item-action").first();
+    const lastAction = dropdownContent.locator(".dropdown-item-action").last();
+    const fixedHeader = page.locator(".navbar.is-fixed-top").first();
+
+    await expect(dropdownContent).toBeVisible();
+    await expect(firstAction).toBeVisible();
+
+    const [headerBox, firstActionBox, scrollTop] = await Promise.all([
+      fixedHeader.boundingBox(),
+      firstAction.boundingBox(),
+      dropdownContent.evaluate((element) => element.scrollTop),
+    ]);
+
+    expect(headerBox).not.toBeNull();
+    expect(firstActionBox).not.toBeNull();
+    expect(scrollTop).toBe(0);
+    expect(firstActionBox!.y).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height - 1);
+
+    await dropdownContent.evaluate((element) => {
+      element.scrollTop = element.scrollHeight;
+    });
+    await expect(lastAction).toBeVisible();
+
+    const lastActionBox = await lastAction.boundingBox();
+    const viewportHeight = page.viewportSize()?.height ?? 720;
+    expect(lastActionBox).not.toBeNull();
+    expect((lastActionBox?.y ?? 0) + (lastActionBox?.height ?? 0)).toBeLessThanOrEqual(viewportHeight - 8);
+  });
+
+  test("shows desktop categories with left-side flyout submenus on wide viewports", async ({ page }) => {
+    await page.setViewportSize({ width: 1900, height: 900 });
+    await page.goto("/admin/12/modules/pos/orders");
+    await expect(page.locator("table")).toBeVisible();
+
+    const dropdownRoot = await openLowestVisibleOrderActionDropdown(page);
+    const dropdownContent = dropdownRoot.locator(".dropdown-content").first();
+    const flyout = dropdownContent.getByTestId("action-settings-wheel-flyout");
+    const sectionsRail = dropdownContent.getByTestId("action-settings-wheel-sections");
+    const customerSection = dropdownContent.getByTestId("action-settings-wheel-section-customer");
+    const vehicleSection = dropdownContent.getByTestId("action-settings-wheel-section-vehicle");
+
+    await expect(flyout).toBeVisible();
+    await expect(customerSection.locator(".fa-chevron-left")).toBeVisible();
+
+    await customerSection.hover();
+
+    const customerSubmenu = dropdownContent.getByTestId("action-settings-wheel-submenu-customer");
+    await expect(customerSubmenu).toBeVisible();
+    await expect(customerSubmenu).toContainText(/log ind som bruger/i);
+
+    const [flyoutBoxBefore, sectionsRailBox, customerSubmenuBox] = await Promise.all([
+      flyout.boundingBox(),
+      sectionsRail.boundingBox(),
+      customerSubmenu.boundingBox(),
+    ]);
+
+    expect(sectionsRailBox).not.toBeNull();
+    expect(customerSubmenuBox).not.toBeNull();
+    expect((customerSubmenuBox?.x ?? 0) + (customerSubmenuBox?.width ?? 0)).toBeLessThanOrEqual(
+      (sectionsRailBox?.x ?? 0) - 4
+    );
+
+    await vehicleSection.hover();
+
+    const vehicleSubmenu = dropdownContent.getByTestId("action-settings-wheel-submenu-vehicle");
+    await expect(vehicleSubmenu).toBeVisible();
+    await expect(vehicleSubmenu).toContainText(/åbn køretøj i ny fane/i);
+
+    const flyoutBoxAfter = await flyout.boundingBox();
+    expect(flyoutBoxBefore).not.toBeNull();
+    expect(flyoutBoxAfter).not.toBeNull();
+    expect(Math.abs((flyoutBoxAfter?.height ?? 0) - (flyoutBoxBefore?.height ?? 0))).toBeLessThanOrEqual(1);
+  });
+
+  test("keeps the first action reachable while async menu sections load", async ({ page }) => {
+    const posFixture = createAsyncActionMenuPosFixture();
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: SUPERUSER_POS_PERMISSIONS,
+      edgeGateways: false,
+      pos: posFixture,
+    });
+    await page.route(/\/admin\/customer\/getUserId(?:\?.*)?$/i, async (route) => {
+      await delay(350);
+      await route.fulfill(
+        jsonResponse({
+          success: true,
+          data: {
+            user_id: 77,
+          },
+        })
+      );
+    });
+    await page.route(/\/orders\/attachments(?:\?.*)?$/i, async (route) => {
+      const parsedUrl = new URL(route.request().url());
+      const orderId = Number(parsedUrl.searchParams.get("id") || 0);
+      await delay(500);
+      await route.fulfill(
+        jsonResponse({
+          success: true,
+          data: posFixture.attachmentsByOrderId[orderId] || [],
+        })
+      );
+    });
+    await primeOperatorSession(page, "pos-orders-action-menu-async-layout-token", SUPERUSER_POS_PERMISSIONS);
+
+    await page.goto("/admin/12/modules/pos/orders");
+    await expect(page.locator("table")).toBeVisible();
+
+    const dropdownRoot = await openLowestVisibleOrderActionDropdown(page);
+    const dropdownContent = dropdownRoot.locator(".dropdown-content").first();
+    const firstAction = dropdownContent.locator(".dropdown-item-action").first();
+    const lastAction = dropdownContent.locator(".dropdown-item-action").last();
+    const fixedHeader = page.locator(".navbar.is-fixed-top").first();
+
+    await expect(dropdownContent).toBeVisible();
+    await expect(firstAction).toBeVisible();
+    await expect(dropdownContent).toContainText("async-action-menu-54518-1.pdf", { timeout: 10000 });
+
+    const [headerBox, firstActionBox, scrollTop] = await Promise.all([
+      fixedHeader.boundingBox(),
+      firstAction.boundingBox(),
+      dropdownContent.evaluate((element) => element.scrollTop),
+    ]);
+
+    expect(headerBox).not.toBeNull();
+    expect(firstActionBox).not.toBeNull();
+    expect(scrollTop).toBe(0);
+    expect(firstActionBox!.y).toBeGreaterThanOrEqual(headerBox!.y + headerBox!.height - 1);
+
+    await dropdownContent.evaluate((element) => {
+      element.scrollTop = element.scrollHeight;
+    });
+    await expect(lastAction).toBeVisible();
+  });
+});
+
 test.describe("Admin POS Orders - desktop locked states", () => {
   test.beforeEach(async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only order lock coverage");
diff --git a/tests/e2e/change-customer.spec.ts b/tests/e2e/change-customer.spec.ts
new file mode 100644
index 00000000..cf5e42c6
--- /dev/null
+++ b/tests/e2e/change-customer.spec.ts
@@ -0,0 +1,159 @@
+import { expect, test } from "@playwright/test";
+import { mockApi, seedAuthenticatedState } from "./support/network.js";
+
+const actionSetupErrorRegex =
+  /Need to install with `app\.use` function|Unhandled error during execution of setup function/i;
+
+test.describe("Orders change customer", () => {
+  test("opens the shared assignment modal without i18n setup errors", async ({ page }, testInfo) => {
+    test.skip(!/desktop/i.test(testInfo.project.name), "Desktop only");
+
+    const setupErrors: string[] = [];
+    page.on("pageerror", (error) => {
+      const message = String(error);
+      if (actionSetupErrorRegex.test(message)) {
+        setupErrors.push(message);
+      }
+    });
+    page.on("console", (message) => {
+      if (!["error", "warning"].includes(message.type())) {
+        return;
+      }
+
+      const text = message.text();
+      if (actionSetupErrorRegex.test(text)) {
+        setupErrors.push(text);
+      }
+    });
+
+    await seedAuthenticatedState(page);
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "admin", "user"],
+      sessionData: {
+        runtime_config: {
+          economic: {
+            transaction_draft_customer_number: 6001,
+          },
+        },
+      },
+    });
+
+    await page.goto("/tests/e2e/harness/change-customer-modal.html");
+    await expect(page.getByTestId("change-customer-harness-status")).toHaveText("ready");
+
+    await page.getByTestId("change-customer-harness-open").click();
+
+    const modal = page.getByTestId("draft-order-assign-customer-modal");
+    await expect(modal).toBeVisible();
+    await expect(page.getByTestId("draft-order-assign-title")).toContainText("Skift kunde");
+    await expect(page.getByTestId("draft-order-assign-customer-search")).toBeVisible();
+    await expect(page.getByTestId("draft-order-recalculate-prices")).toBeChecked();
+
+    await page.waitForTimeout(250);
+    expect(setupErrors).toEqual([]);
+  });
+
+  test("uses the same customer assignment flow and submit behavior as the draft assignment modal", async ({
+    page,
+  }, testInfo) => {
+    test.skip(!/desktop/i.test(testInfo.project.name), "Desktop only");
+
+    await seedAuthenticatedState(page);
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "admin", "user"],
+      sessionData: {
+        runtime_config: {
+          economic: {
+            transaction_draft_customer_number: 6001,
+          },
+        },
+      },
+    });
+
+    await page.route("https://api.truckwash.io:4433/customers?search=**", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: [
+            {
+              customerNumber: 12345679,
+              name: "(TEST) Pleno Vognmandsforretning",
+              city: "Taastrup",
+            },
+          ],
+          meta: {
+            pagination: {
+              page: 1,
+              per_page: 100,
+              total: 1,
+            },
+          },
+        }),
+      });
+    });
+
+    await page.route("https://api.truckwash.io:4433/collected-invoices**", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          success: true,
+          data: [
+            {
+              id: 101,
+              customer_number: 12345679,
+              customer_name: "(TEST) Pleno Vognmandsforretning",
+              created_at: "2026-04-21 13:30:00",
+              closed_at: null,
+              total_net_amount: 1562,
+              orders: 2,
+            },
+          ],
+          meta: {
+            pagination: {
+              page: 1,
+              per_page: 100,
+              total: 1,
+            },
+          },
+        }),
+      });
+    });
+
+    await page.goto("/tests/e2e/harness/change-customer-modal.html");
+    await expect(page.getByTestId("change-customer-harness-status")).toHaveText("ready");
+
+    await page.getByTestId("change-customer-harness-open").click();
+
+    const modal = page.getByTestId("draft-order-assign-customer-modal");
+    await expect(modal).toBeVisible();
+
+    await page.getByTestId("draft-order-assign-customer-search").fill("12345679");
+    await page.getByTestId("draft-order-customer-option-12345679").click();
+    await expect(page.getByTestId("draft-order-selected-customer")).toContainText("12345679");
+
+    const firstInvoiceCollection = page.locator('[data-testid^="draft-order-invoice-collection-option-"]').first();
+    await expect(firstInvoiceCollection).toBeVisible();
+    await firstInvoiceCollection.click();
+
+    await page.getByTestId("draft-order-recalculate-prices").evaluate((element) => {
+      const checkbox = element as HTMLInputElement;
+      checkbox.checked = false;
+      checkbox.dispatchEvent(new Event("input", { bubbles: true }));
+      checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    await page.getByTestId("draft-order-assign-submit").click();
+
+    await expect(modal).toHaveCount(0);
+    await expect(page.getByTestId("change-customer-harness-status")).toHaveText("assigned");
+
+    const assignment = await page.evaluate(() => (window as typeof window & { __changeCustomerAssignment?: unknown }).__changeCustomerAssignment);
+    expect(assignment).toMatchObject({
+      customer_id: 12345679,
+    });
+  });
+});
diff --git a/tests/e2e/edge-gateways.smoke.spec.js b/tests/e2e/edge-gateways.smoke.spec.js
index 0231c3ad..256f73fc 100644
--- a/tests/e2e/edge-gateways.smoke.spec.js
+++ b/tests/e2e/edge-gateways.smoke.spec.js
@@ -96,13 +96,13 @@ test.describe("Edge gateway management smoke", () => {
     await expect(page.getByTestId("gateway-fleet-usage-runtime")).toContainText("298 ms");
   });
 
-  test("@smoke onboards the first gateway from the fleet landing page", async ({ page }) => {
+  test("@smoke keeps watching long enough to open a delayed first gateway claim", async ({ page }) => {
     await mockApi(page, {
       authenticated: true,
       permissions: ["superuser", "user"],
       edgeGateways: {
         empty: true,
-        claimPollsRemaining: 1,
+        claimPollsRemaining: 8,
       },
     });
     await primeSuperuserSession(page);
@@ -116,8 +116,32 @@ test.describe("Edge gateway management smoke", () => {
     await page.getByTestId("gateway-installer-label").fill("Canary Pi");
     await page.getByTestId("gateway-installer-generate").click();
 
-    await expect(page).toHaveURL(/\/superuser\/gateways\/703\/overview$/, { timeout: 8_000 });
+    await expect(page).toHaveURL(/\/superuser\/gateways\/703\/overview$/, { timeout: 20_000 });
     await expect(page.getByTestId("gateway-detail-header")).toContainText("Canary Pi");
+    await expect(page.locator("body")).toContainText("Gateway connected.");
+  });
+
+  test("@smoke reopens an existing gateway when the installer reconnects it", async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["superuser", "user"],
+      edgeGateways: {
+        reuseClaimGatewayId: 701,
+        claimPollsRemaining: 8,
+      },
+    });
+    await primeSuperuserSession(page);
+
+    await page.goto("/superuser/gateways");
+    await expect(page.getByTestId("gateway-fleet-landing")).toBeVisible();
+
+    await page.getByTestId("gateway-installer-department").selectOption("1");
+    await page.getByTestId("gateway-installer-label").fill("CPH Edge 01");
+    await page.getByTestId("gateway-installer-generate").click();
+
+    await expect(page).toHaveURL(/\/superuser\/gateways\/701\/overview$/, { timeout: 20_000 });
+    await expect(page.getByTestId("gateway-detail-header")).toContainText("CPH Edge 01");
+    await expect(page.locator("body")).toContainText("Gateway reconnected.");
   });
 
   test("@smoke updates metadata and rotates credentials from the manage view", async ({ page }) => {
diff --git a/tests/e2e/harness/change-customer-modal.html b/tests/e2e/harness/change-customer-modal.html
new file mode 100644
index 00000000..e6756de7
--- /dev/null
+++ b/tests/e2e/harness/change-customer-modal.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Change Customer Modal Harness</title>
+    <link rel="stylesheet" href="/bulma/css/bulma.min.css" />
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: #eef2f7;
+      }
+
+      .harness-shell {
+        margin: 3rem auto;
+        max-width: 42rem;
+        padding: 1.5rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="harness-shell">
+      <div class="box">
+        <h1 class="title is-4">Change Customer Harness</h1>
+        <p class="subtitle is-6">Exercises the Orders customer-change modal bootstrap path.</p>
+        <p class="mb-4">
+          Status:
+          <strong data-testid="change-customer-harness-status">booting</strong>
+        </p>
+        <button
+          class="button is-link"
+          type="button"
+          data-testid="change-customer-harness-open"
+          disabled
+        >
+          Open change customer modal
+        </button>
+      </div>
+    </main>
+    <script type="module" src="./change-customer-modal.ts"></script>
+  </body>
+  </html>
diff --git a/tests/e2e/harness/change-customer-modal.ts b/tests/e2e/harness/change-customer-modal.ts
new file mode 100644
index 00000000..3e1a06ca
--- /dev/null
+++ b/tests/e2e/harness/change-customer-modal.ts
@@ -0,0 +1,43 @@
+import "bulma/css/bulma.min.css";
+import { initiateOnAppStart } from "@/components/session/token/SessionUser.vue";
+import { Orders } from "@/components/session/token/SessionUser/Objects/Orders.vue";
+
+const statusElement = document.querySelector('[data-testid="change-customer-harness-status"]');
+const openButton = document.querySelector('[data-testid="change-customer-harness-open"]');
+
+const setStatus = (value: string) => {
+  if (statusElement) {
+    statusElement.textContent = value;
+  }
+};
+
+const setOpenEnabled = (enabled: boolean) => {
+  if (openButton instanceof HTMLButtonElement) {
+    openButton.disabled = !enabled;
+  }
+};
+
+if (openButton instanceof HTMLButtonElement) {
+  openButton.addEventListener("click", () => {
+    void Orders.functions.showChangeCustomerForm(54518, async (response) => {
+      (window as typeof window & { __changeCustomerAssignment?: unknown }).__changeCustomerAssignment = response;
+      setStatus("assigned");
+    });
+  });
+}
+
+const bootstrap = async () => {
+  setStatus("loading");
+  setOpenEnabled(false);
+
+  try {
+    await initiateOnAppStart();
+    setStatus("ready");
+    setOpenEnabled(true);
+  } catch (error) {
+    console.error(error);
+    setStatus("error");
+  }
+};
+
+void bootstrap();
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index 0a424d37..8428b2a0 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -1194,42 +1194,70 @@ function processPendingEdgeGatewayClaims(edgeGatewayFixture) {
       return true;
     }
 
-    const gatewayId = edgeGatewayFixture.nextGatewayId++;
+    const gatewayId = Number(claim.reuse_gateway_id || 0);
+    const claimedAt = toSqlDateTime();
+    const auditLog = {
+      id: Date.now(),
+      created_at: claimedAt,
+      action: "GATEWAY_CLAIMED",
+      actor_type: "USER",
+    };
+    const metadata = {
+      broker_connected: true,
+      system_metrics: {
+        latency_ms: 73,
+        cpu_usage_pct: 19,
+        memory_usage_pct: 44,
+        disk_usage_pct: 52,
+      },
+    };
+    const existingGateway =
+      gatewayId > 0 ? edgeGatewayFixture.gateways.find((gateway) => Number(gateway.id) === gatewayId) || null : null;
+
+    if (existingGateway) {
+      Object.assign(existingGateway, {
+        department_id: Number(claim.department_id || existingGateway.department_id || 1),
+        label: claim.label || existingGateway.label || `Gateway ${gatewayId}`,
+        hostname: existingGateway.hostname || `edge-${gatewayId}`,
+        is_primary: true,
+        status: "ONLINE",
+        transport_mode: "gateway",
+        department_transport_mode: "gateway",
+        installed_version: existingGateway.installed_version || "php-agent-v1",
+        target_version: existingGateway.target_version || existingGateway.installed_version || "php-agent-v1",
+        last_heartbeat_at: claimedAt,
+        last_seen_ip: "10.9.0.14",
+        discovery_status: existingGateway.discovery_status || "READY",
+        metadata: {
+          ...(existingGateway.metadata || {}),
+          ...metadata,
+        },
+        audit_logs: [auditLog, ...(existingGateway.audit_logs || [])],
+      });
+      return false;
+    }
+
+    const newGatewayId = edgeGatewayFixture.nextGatewayId++;
     edgeGatewayFixture.gateways.push({
-      id: gatewayId,
+      id: newGatewayId,
       department_id: Number(claim.department_id || 1),
-      label: claim.label || `Gateway ${gatewayId}`,
-      hostname: `edge-${gatewayId}`,
+      label: claim.label || `Gateway ${newGatewayId}`,
+      hostname: `edge-${newGatewayId}`,
       is_primary: true,
       status: "ONLINE",
       transport_mode: "gateway",
       department_transport_mode: "gateway",
       installed_version: "php-agent-v1",
       target_version: "php-agent-v1",
-      last_heartbeat_at: toSqlDateTime(),
+      last_heartbeat_at: claimedAt,
       last_seen_ip: "10.9.0.14",
       discovery_status: "READY",
-      metadata: {
-        broker_connected: true,
-        system_metrics: {
-          latency_ms: 73,
-          cpu_usage_pct: 19,
-          memory_usage_pct: 44,
-          disk_usage_pct: 52,
-        },
-      },
+      metadata,
       inventory: [],
       bindings: [],
       recent_commands: [],
       operations: [],
-      audit_logs: [
-        {
-          id: Date.now(),
-          created_at: toSqlDateTime(),
-          action: "GATEWAY_CLAIMED",
-          actor_type: "USER",
-        },
-      ],
+      audit_logs: [auditLog],
     });
 
     return false;
@@ -1329,6 +1357,7 @@ function createHttpEdgeGatewayFixture(options = {}) {
     nextOperationId: 9901,
     nextOperationEventId: 19901,
     claimPollsRemaining: Number(options.claimPollsRemaining || 2),
+    reuseClaimGatewayId: Number(options.reuseClaimGatewayId || 0),
     pendingClaims: [],
     pendingDiscoveryByGatewayId: {},
     gateways: baseGateways,
@@ -2913,6 +2942,7 @@ async function handleEdgeGatewayRoute({
       department_id: Number(body.department_id || 1),
       label: String(body.label || "").trim(),
       pollsRemaining: edgeGatewayFixture.claimPollsRemaining,
+      reuse_gateway_id: edgeGatewayFixture.reuseClaimGatewayId,
     });
     await route.fulfill(
       json(
diff --git a/tests/unit/orders-change-customer.spec.js b/tests/unit/orders-change-customer.spec.js
new file mode 100644
index 00000000..1d87ec0d
--- /dev/null
+++ b/tests/unit/orders-change-customer.spec.js
@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const createAppUseMock = vi.hoisted(() => vi.fn());
+const createAppMountMock = vi.hoisted(() => vi.fn());
+const createAppUnmountMock = vi.hoisted(() => vi.fn());
+const createAppMock = vi.hoisted(() =>
+  vi.fn(() => ({
+    use: createAppUseMock,
+    mount: createAppMountMock,
+    unmount: createAppUnmountMock,
+  })),
+);
+
+vi.mock("sweetalert2", () => ({
+  default: {
+    fire: vi.fn(() => Promise.resolve()),
+    close: vi.fn(),
+  },
+}));
+
+vi.mock("@/i18n", () => ({
+  default: {
+    global: {
+      t: (key) => key,
+    },
+  },
+}));
+
+vi.mock("vue", async () => {
+  const actual = await vi.importActual("vue");
+
+  return {
+    ...actual,
+    createApp: createAppMock,
+  };
+});
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    objects: {
+      orders: {
+        functions: {
+          get_customer_id: vi.fn(),
+        },
+        set: {
+          customer_id: vi.fn(),
+          invoice_collection_id: vi.fn(),
+        },
+      },
+      collectedOrderInvoices: {
+        functions: {
+          showInvoiceCollectionPickerForm: vi.fn(),
+        },
+      },
+    },
+    request: vi.fn(() => Promise.resolve({ data: { data: {} } })),
+    functions: {
+      parseErrorMessage: vi.fn(() => "error"),
+    },
+  },
+}));
+
+import Swal from "sweetalert2";
+import { Orders } from "@/components/session/token/SessionUser/Objects/Orders.vue";
+
+describe("Orders.showChangeCustomerForm", () => {
+  beforeEach(() => {
+    createAppMock.mockClear();
+    createAppUseMock.mockClear();
+    createAppMountMock.mockClear();
+    createAppUnmountMock.mockClear();
+    Swal.fire.mockClear();
+  });
+
+  it("mounts the assignment modal inside a disposable host", async () => {
+    await expect(Orders.functions.showChangeCustomerForm(45)).resolves.toBeUndefined();
+
+    expect(createAppMock).toHaveBeenCalledTimes(1);
+    expect(createAppMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        __name: "AssignDraftOrderCustomerModal",
+      }),
+      expect.objectContaining({
+        order: {
+          id: 45,
+          department_id: null,
+          invoice_collection_id: null,
+        },
+        onAssigned: expect.any(Function),
+        onClose: expect.any(Function),
+      }),
+    );
+    expect(Swal.fire).not.toHaveBeenCalled();
+
+    const mountedHost = createAppMountMock.mock.calls[0][0];
+    expect(mountedHost).toBeInstanceOf(HTMLDivElement);
+    expect(mountedHost.dataset.testid).toBe("change-customer-assignment-host");
+    expect(document.body.contains(mountedHost)).toBe(true);
+
+    const modalProps = createAppMock.mock.calls[0][1];
+    modalProps.onClose();
+
+    expect(createAppUnmountMock).toHaveBeenCalledTimes(1);
+    expect(document.body.contains(mountedHost)).toBe(false);
+  });
+});