diff --git a/src/assets/main.css b/src/assets/main.css
index 2d85b217..7ec26177 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -49,8 +49,26 @@ textarea.has-sharp-edges {
   --bulma-card-shadow: none !important;
 
   --bulma-skeleton-background: hsla(197 100% 35% / 0.70) !important;
+  --pleno-compact-table-header-font-size: 0.72rem;
+  --pleno-compact-table-header-line-height: 1;
 }
 
+body:not(.pleno-large-table-headers) .table thead th {
+  font-size: var(--pleno-compact-table-header-font-size);
+  line-height: var(--pleno-compact-table-header-line-height);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.pleno-table-header-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+
 /*:root {*/
 /*  --bulma-primary-h: 207deg !important;*/
 /*  --bulma-primary-s: 60% !important;*/
@@ -125,4 +143,4 @@ textarea.has-sharp-edges {
   .mt-30-tablet {
     margin-top: 30px !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/displays/department/pos/orders/InvoiceCollectionSelectionActionWheel.vue b/src/components/displays/department/pos/orders/InvoiceCollectionSelectionActionWheel.vue
new file mode 100644
index 00000000..2122e683
--- /dev/null
+++ b/src/components/displays/department/pos/orders/InvoiceCollectionSelectionActionWheel.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
+import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";
+import { INVOICE_COLLECTION_BULK_ACTIONS } from "@/components/displays/department/pos/orders/invoiceCollectionBulkActions.js";
+
+const props = defineProps({
+  selectedInvoiceCollectionIds: {
+    type: Array,
+    default: () => [],
+  },
+  totalInvoiceCollectionCount: {
+    type: Number,
+    default: 0,
+  },
+  allSelected: {
+    type: Boolean,
+    default: false,
+  },
+  allExpanded: {
+    type: Boolean,
+    default: false,
+  },
+  invoiceQueueBusy: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["invoiceSelected", "bulkAction", "toggleSelectAll", "toggleExpandAll"]);
+const { t } = useI18n();
+
+const selectedCount = computed(() => props.selectedInvoiceCollectionIds.length);
+const hasSelectableCollections = computed(() => props.totalInvoiceCollectionCount > 0);
+const hasSelectedCollections = computed(() => selectedCount.value > 0);
+const hasMultipleSelectedCollections = computed(() => selectedCount.value > 1);
+const triggerLabel = computed(() =>
+  t("invoicing_period.invoice_collection_actions.menu.label", { count: selectedCount.value })
+);
+const selectAllLabel = computed(() =>
+  props.allSelected
+    ? t("invoicing_period.invoice_collection_actions.menu.unselect_all")
+    : t("invoicing_period.invoice_collection_actions.menu.select_all")
+);
+const expandAllLabel = computed(() =>
+  props.allExpanded
+    ? t("invoicing_period.invoice_collection_actions.menu.collapse_all")
+    : t("invoicing_period.invoice_collection_actions.menu.expand_all")
+);
+
+const emitBulkAction = (action) => emit("bulkAction", action);
+</script>
+
+<template>
+  <div
+    v-if="hasSelectableCollections"
+    class="invoice-collection-selection-action-wheel"
+    data-testid="invoice-collection-selection-action-wheel"
+  >
+    <ActionSettingsWheelButton icon="fas fa-sliders-h" :label="triggerLabel">
+      <template #actions>
+        <ActionSettingsWheelItemLabel
+          :label="t('invoicing_period.invoice_collection_actions.menu.selection_section')"
+          data-testid="invoice-collection-selection-action-wheel-selection-section"
+        />
+        <ActionSettingsWheelItem
+          icon="fas fa-check-double"
+          :label="selectAllLabel"
+          :click-action="() => emit('toggleSelectAll')"
+          test-id="invoice-collection-selection-action-wheel-select-all"
+        />
+        <ActionSettingsWheelItem
+          :icon="allExpanded ? 'fas fa-compress-alt' : 'fas fa-expand-alt'"
+          :label="expandAllLabel"
+          :click-action="() => emit('toggleExpandAll')"
+          test-id="invoice-collection-selection-action-wheel-expand-all"
+        />
+
+        <template v-if="hasSelectedCollections">
+          <ActionSettingsWheelItemLabel
+            :label="t('invoicing_period.invoice_collection_actions.menu.modification_section')"
+            data-testid="invoice-collection-selection-action-wheel-modification-section"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-file-invoice-dollar"
+            :label="t('invoicing_period.invoice_collection_actions.actions.queue_economic')"
+            :click-action="() => emit('invoiceSelected')"
+            :disabled="invoiceQueueBusy"
+            test-id="invoice-collection-selection-action-wheel-invoice-selected"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-broom"
+            :label="t('invoicing_period.invoice_collection_actions.actions.remove_customer_rule_violations')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES)"
+            test-id="invoice-collection-selection-action-wheel-clean-rules"
+          />
+          <ActionSettingsWheelItem
+            v-if="hasMultipleSelectedCollections"
+            icon="fas fa-compress-arrows-alt"
+            :label="t('invoicing_period.invoice_collection_actions.actions.merge_collections')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.MERGE)"
+            test-id="invoice-collection-selection-action-wheel-merge"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-calendar-alt"
+            :label="t('invoicing_period.invoice_collection_actions.actions.split_by_month')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.SPLIT_BY_MONTH)"
+            test-id="invoice-collection-selection-action-wheel-split-by-month"
+          />
+          <ActionSettingsWheelItem
+            icon="fas fa-undo"
+            :label="t('invoicing_period.invoice_collection_actions.actions.reset_hidden_item_prices')"
+            :click-action="() => emitBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.RESET_HIDDEN_PRICES)"
+            test-id="invoice-collection-selection-action-wheel-reset-hidden-prices"
+          />
+        </template>
+      </template>
+    </ActionSettingsWheelButton>
+  </div>
+</template>
diff --git a/src/components/displays/department/pos/orders/invoiceCollectionBulkActions.js b/src/components/displays/department/pos/orders/invoiceCollectionBulkActions.js
new file mode 100644
index 00000000..90556f40
--- /dev/null
+++ b/src/components/displays/department/pos/orders/invoiceCollectionBulkActions.js
@@ -0,0 +1,7 @@
+export const INVOICE_COLLECTION_BULK_ACTIONS = Object.freeze({
+  CLEAN_CUSTOMER_RULES: "remove_customer_rule_violations",
+  MERGE: "merge_collections",
+  SPLIT_BY_MONTH: "split_by_month",
+  RESET_HIDDEN_PRICES: "reset_hidden_item_prices",
+  QUEUE_ECONOMIC: "queue_economic",
+});
diff --git a/src/components/displays/department/pos/orders/ordersTable.vue b/src/components/displays/department/pos/orders/ordersTable.vue
index c9643db2..244c729e 100644
--- a/src/components/displays/department/pos/orders/ordersTable.vue
+++ b/src/components/displays/department/pos/orders/ordersTable.vue
@@ -1,12 +1,17 @@
 <script setup>
 import { useI18n } from "vue-i18n";
+import { BCheckbox } from "buefy";
 
 const { t, locale } = useI18n();
 
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
+import InvoiceCollectionSelectionActionWheel from "@/components/displays/department/pos/orders/InvoiceCollectionSelectionActionWheel.vue";
 import OrderAttachmentsActionButton from "@/components/displays/department/pos/orders/OrderAttachmentsActionButton.vue";
 import AssignDraftOrderCustomerModal from "@/components/displays/modals/AssignDraftOrderCustomerModal.vue";
 import InvoicingPeriodFlagList from "@/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodFlagList.vue";
+import { INVOICE_COLLECTION_BULK_ACTIONS } from "@/components/displays/department/pos/orders/invoiceCollectionBulkActions.js";
+import SuperuserInvoiceRowActions from "@/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue";
+import { useLargeTableHeaders } from "@/services/tableHeaderPreferences.js";
 
 const props = defineProps({
   orders: {
@@ -58,7 +63,6 @@ import { showPopper, removePopperIfOpen, popperBox } from "@/components/displays
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
 const { orderBy, orderDirection, setOrder, loadList } = usePaginatedListInstance();
-import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 import OrderContentTable from "@/components/displays/superuser/tables/OrderContentTable.vue";
 import InvoiceMultipleCollectionsModal from "@/components/displays/modals/InvoiceMultipleCollectionsModal.vue";
 import Swal from "sweetalert2";
@@ -266,14 +270,6 @@ const normalizeInvoiceCollectionId = (invoiceCollectionId) => {
     : null;
 };
 
-const INVOICE_COLLECTION_BULK_ACTIONS = Object.freeze({
-  CLEAN_CUSTOMER_RULES: "remove_customer_rule_violations",
-  MERGE: "merge_collections",
-  SPLIT_BY_MONTH: "split_by_month",
-  RESET_HIDDEN_PRICES: "reset_hidden_item_prices",
-  QUEUE_ECONOMIC: "queue_economic",
-});
-
 const getApiPayload = (response) => response?.data?.data ?? response?.data ?? response ?? {};
 
 const escapeHtml = (value) => String(value ?? "")
@@ -476,6 +472,18 @@ const toggleInvoiceCollectionSelection = (invoiceCollectionId) => {
   }
 };
 
+const setInvoiceCollectionSelection = (invoiceCollectionId, checked) => {
+  const normalizedInvoiceCollectionId = normalizeInvoiceCollectionId(invoiceCollectionId);
+  if (normalizedInvoiceCollectionId === null) {
+    return;
+  }
+
+  const isSelected = selectedInvoiceCollections.value.includes(normalizedInvoiceCollectionId);
+  if ((checked && !isSelected) || (!checked && isSelected)) {
+    toggleInvoiceCollectionSelection(normalizedInvoiceCollectionId);
+  }
+};
+
 const isInvoiceCollectionSelected = (invoiceCollectionId) => {
   const normalizedInvoiceCollectionId = normalizeInvoiceCollectionId(invoiceCollectionId);
   if (normalizedInvoiceCollectionId === null) {
@@ -540,6 +548,7 @@ const isInvoiceQueueBusy = computed(() => {
 const getSelectedInvoiceCollectionIds = () => selectedInvoiceCollections.value
   .map((invoiceCollectionId) => normalizeInvoiceCollectionId(invoiceCollectionId))
   .filter((invoiceCollectionId) => invoiceCollectionId !== null);
+const selectableInvoiceCollectionCount = computed(() => getUniqueInvoiceCollections().length);
 
 const getBulkActionLabel = (action) => t(`invoicing_period.invoice_collection_actions.actions.${action}`);
 
@@ -1106,70 +1115,17 @@ const formatCashierName = (order) => {
         <thead>
           <tr v-if="props.invoiceView && props.allowSelectMultiple">
             <td colspan="100%">
-              <div class="buttons">
-                <!-- Invoice selected collections -->
-                <button
-                  class="button is-small"
-                  @click="invoiceSelectedCollections()"
-                  :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
-                >
-                  {{ $t("common.invoice") }} {{ $t("global.selected_multiple") }} ({{
-                    selectedInvoiceCollections.length
-                  }})
-                </button>
-                <button
-                  class="button is-small"
-                  @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES)"
-                  :disabled="selectedInvoiceCollections.length === 0"
-                >
-                  {{ t("invoicing_period.invoice_collection_actions.actions.remove_customer_rule_violations") }}
-                </button>
-                <button
-                  class="button is-small"
-                  @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.MERGE)"
-                  :disabled="selectedInvoiceCollections.length < 2"
-                >
-                  {{ t("invoicing_period.invoice_collection_actions.actions.merge_collections") }}
-                </button>
-                <button
-                  class="button is-small"
-                  @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.SPLIT_BY_MONTH)"
-                  :disabled="selectedInvoiceCollections.length === 0"
-                >
-                  {{ t("invoicing_period.invoice_collection_actions.actions.split_by_month") }}
-                </button>
-                <button
-                  class="button is-small"
-                  @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.RESET_HIDDEN_PRICES)"
-                  :disabled="selectedInvoiceCollections.length === 0"
-                >
-                  {{ t("invoicing_period.invoice_collection_actions.actions.reset_hidden_item_prices") }}
-                </button>
-                <!-- Select / Unselect all invoice collections -->
-                <button
-                  class="button is-small"
-                  @click="selectAllInvoiceCollections()"
-                  :class="{
-                    'is-light': !isInvoiceCollectionSelectedAll(),
-                    'is-dark': isInvoiceCollectionSelectedAll(),
-                  }"
-                >
-                  {{ isInvoiceCollectionSelectedAll() ? $t("global.unselect") : $t("common.select") }}
-                  {{ $t("common.all").toLowerCase() }}
-                </button>
-                <!-- Expand / Collapse all invoice collections -->
-                <button
-                  class="button is-small"
-                  @click="toggleAutoExpandAll()"
-                  :class="{
-                    'is-light': !isAutoExpandAll(),
-                    'is-dark': isAutoExpandAll(),
-                  }"
-                >
-                  {{ isAutoExpandAll() ? $t("global.collapse") : $t("global.expand") }}
-                  {{ $t("common.all").toLowerCase() }}
-                </button>
-              </div>
+              <InvoiceCollectionSelectionActionWheel
+                :selected-invoice-collection-ids="selectedInvoiceCollections"
+                :total-invoice-collection-count="selectableInvoiceCollectionCount"
+                :all-selected="isInvoiceCollectionSelectedAll()"
+                :all-expanded="isAutoExpandAll()"
+                :invoice-queue-busy="isInvoiceQueueBusy"
+                @invoice-selected="invoiceSelectedCollections"
+                @bulk-action="runInvoiceCollectionBulkAction"
+                @toggle-select-all="selectAllInvoiceCollections"
+                @toggle-expand-all="toggleAutoExpandAll"
+              />
             </td>
           </tr>
           <tr>
@@ -1181,12 +1137,15 @@ const formatCashierName = (order) => {
                   v-if="tableHeaders.sortable"
                   :class="{
                     'is-clickable': tableHeaders.sortable,
-                    'has-text-centered': tableHeaders.name === 'id',
+                    'is-narrow': ['id', 'reg_1', 'actions'].includes(tableHeaders.name),
+                    'pos-orders-table-header--compact': !useLargeTableHeaders,
+                    'pos-orders-table-id-header': tableHeaders.name === 'id',
+                    'pos-orders-table-header--vehicles': tableHeaders.name === 'reg_1',
                   }"
                   @click="onTableHeaderClick(tableHeaders.name)"
                 >
-                  <span class="is-flex-wrap-nowrap">
-                    <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
+                  <span class="is-flex-wrap-nowrap pleno-table-header-content">
+                    <span class="has-text-weight-bold pos-orders-table-header__label">{{ tableHeaders.title }}</span>
                     <span
                       v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
                       :class="{
@@ -1200,11 +1159,14 @@ const formatCashierName = (order) => {
                 <th
                   v-else
                   :class="{
-                    'has-text-centered': tableHeaders.name === 'id',
+                    'is-narrow': ['id', 'reg_1', 'actions'].includes(tableHeaders.name),
+                    'pos-orders-table-header--compact': !useLargeTableHeaders,
+                    'pos-orders-table-id-header': tableHeaders.name === 'id',
+                    'pos-orders-table-header--vehicles': tableHeaders.name === 'reg_1',
                   }"
                 >
-                  <span class="is-flex-wrap-nowrap">
-                    <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
+                  <span class="is-flex-wrap-nowrap pleno-table-header-content">
+                    <span class="has-text-weight-bold pos-orders-table-header__label">{{ tableHeaders.title }}</span>
                   </span>
                 </th>
               </template>
@@ -1257,9 +1219,11 @@ const formatCashierName = (order) => {
                 </td>
                 <!-- Actions for the invoice collection -->
                 <td class="is-narrow">
-                  <ActionSettingsWheelButton v-bind:invoice_collection_id="order.invoice_collection_id">
-                    <template #actions> </template>
-                  </ActionSettingsWheelButton>
+                  <SuperuserInvoiceRowActions :include-buffer="true">
+                    <ActionSettingsWheelButton v-bind:invoice_collection_id="order.invoice_collection_id">
+                      <template #actions> </template>
+                    </ActionSettingsWheelButton>
+                  </SuperuserInvoiceRowActions>
                 </td>
               </tr>
               <!-- Warning, if there's orders in the collection that are filtered out -->
@@ -1295,23 +1259,21 @@ const formatCashierName = (order) => {
                 </td>
               </tr>
             </template>
-            <tr v-if="isObjectVisible(order)" :class="{ 'has-background-info-light': isSystemOrder(order) }">
+            <tr
+              v-if="isObjectVisible(order)"
+              class="pos-orders-table-row"
+              :class="{ 'has-background-info-light': isSystemOrder(order) }"
+            >
               <template v-if="props.invoiceView && props.allowSelectMultiple">
-                <td class="is-narrow">
-                  <button
-                    class="button is-small"
-                    @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
-                    :class="{
-                      'is-light': !isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)),
-                      'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)),
-                    }"
-                  >
-                    {{
-                      isInvoiceCollectionSelected(parseInt(order.invoice_collection_id))
-                        ? SessionUser.objects.global.language.unselect
-                        : SessionUser.objects.global.language.select
-                    }}
-                  </button>
+                <td class="is-narrow pos-order-invoice-collection-selector-cell">
+                  <BCheckbox
+                    class="pos-order-invoice-collection-selector"
+                    :model-value="isInvoiceCollectionSelected(order.invoice_collection_id)"
+                    :disabled="normalizeInvoiceCollectionId(order.invoice_collection_id) === null"
+                    :aria-label="`${SessionUser.objects.global.language.select} ${SessionUser.objects.global.language.invoice.toLowerCase()} #${order.invoice_collection_id || order.id}`"
+                    :data-testid="`pos-order-invoice-collection-selector-${order.id}`"
+                    @update:model-value="(checked) => setInvoiceCollectionSelection(order.invoice_collection_id, checked)"
+                  />
                 </td>
               </template>
               <template v-if="props.invoiceView">
@@ -1332,52 +1294,53 @@ const formatCashierName = (order) => {
                   </button>
                 </td>
               </template>
-              <td>
-                <ColorIndicator
-                  v-bind:color_class="getOrderIndicatorColorClass(order)"
-                  v-bind:icon_class="getOrderIndicatorIconClass(order)"
-                  v-bind:is_narrow="true"
-                  v-bind:label="{
-                    text: order.id,
-                    classes: [],
-                    max_length: 7,
-                  }"
-                  v-bind:visibility="{
-                    icon: true,
-                    dropdown: true,
-                  }"
-                  v-bind:dropdown_content="{
-                    title: null,
-                    buttons_title: null,
-                    content: [
-                      // Transaction
-                      {
-                        text: SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single),
-                        action: () => {
-                          redirectDepartmentOrderPage(order.id, order.department_id);
+              <td class="is-narrow pos-orders-table-id-cell">
+                <div class="pos-orders-table-id-cell-content">
+                  <ColorIndicator
+                    v-bind:color_class="getOrderIndicatorColorClass(order)"
+                    v-bind:icon_class="getOrderIndicatorIconClass(order)"
+                    v-bind:is_narrow="true"
+                    v-bind:label="{
+                      text: order.id,
+                      classes: [],
+                      max_length: 7,
+                    }"
+                    v-bind:visibility="{
+                      icon: true,
+                      dropdown: true,
+                    }"
+                    v-bind:dropdown_content="{
+                      title: null,
+                      buttons_title: null,
+                      content: [
+                        // Transaction
+                        {
+                          text: SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single),
+                          action: () => {
+                            redirectDepartmentOrderPage(order.id, order.department_id);
+                          },
+                          ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
+                          button_classes: ['no-underline-text', 'is-text'],
+                          button: true,
+                          button_text: order.id,
+                          v_centered: true,
                         },
-                        ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
-                        button_classes: ['no-underline-text', 'is-text'],
-                        button: true,
-                        button_text: order.id,
-                        v_centered: true,
-                      },
-                      // Invoice collection
-                      {
-                        text:
-                          SessionUser.objects.global.language.invoice +
-                          ' ' +
-                          SessionUser.objects.global.language.collection.toLowerCase(),
-                        action: () => {
-                          redirectSuperUserInvoiceCollectionPage(order.invoice_collection_id);
+                        // Invoice collection
+                        {
+                          text:
+                            SessionUser.objects.global.language.invoice +
+                            ' ' +
+                            SessionUser.objects.global.language.collection.toLowerCase(),
+                          action: () => {
+                            redirectSuperUserInvoiceCollectionPage(order.invoice_collection_id);
+                          },
+                          ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
+                          button_classes: ['no-underline-text', 'is-text'],
+                          button: true,
+                          button_text: order.invoice_collection_id,
+                          v_centered: true,
                         },
-                        ...(SessionUser.canAccessSuperUser() ? {} : { disabled: true }),
-                        button_classes: ['no-underline-text', 'is-text'],
-                        button: true,
-                        button_text: order.invoice_collection_id,
-                        v_centered: true,
-                      },
-                      /**
+                        /**
                        * // Completed status
                        *                     {
                        *                       text: SessionUser.objects.orders.columns.completed_at.label,
@@ -1392,23 +1355,24 @@ const formatCashierName = (order) => {
                        *                     },
                        */
 
-                      // Handheld status
-                      ...(isPendingHandheld(order)
-                        ? [
-                            {
-                              text: SessionUser.objects.global.language.handheld_pending_order,
-                              action: () => {},
-                              button_classes: ['no-underline-text', 'is-text', 'has-text-warning'],
-                              button: true,
-                              button_text: SessionUser.objects.global.language.confirmation_needed,
-                              v_centered: true,
-                            },
-                          ]
-                        : []),
-                    ],
-                    buttons: [],
-                  }"
-                />
+                        // Handheld status
+                        ...(isPendingHandheld(order)
+                          ? [
+                              {
+                                text: SessionUser.objects.global.language.handheld_pending_order,
+                                action: () => {},
+                                button_classes: ['no-underline-text', 'is-text', 'has-text-warning'],
+                                button: true,
+                                button_text: SessionUser.objects.global.language.confirmation_needed,
+                                v_centered: true,
+                              },
+                            ]
+                          : []),
+                      ],
+                      buttons: [],
+                    }"
+                  />
+                </div>
               </td>
               <td v-if="!props.isCustomerView">
                 <ColorIndicator
@@ -1462,8 +1426,8 @@ const formatCashierName = (order) => {
               </td>
               <td>{{ getDepartmentName(order.department_id) }}</td>
               <!-- Vehicles -->
-              <td>
-                <p>
+              <td class="pos-order-vehicle-cell">
+                <p class="pos-order-vehicle-registration-line">
                   <EditableTableColumn
                     :componentWrapper="'div'"
                     :object="order"
@@ -1474,7 +1438,7 @@ const formatCashierName = (order) => {
                     :permissionCheckFunction="(orderobj) => canEditTransaction(order)"
                   />
                 </p>
-                <p>
+                <p class="pos-order-vehicle-registration-line">
                   <EditableTableColumn
                     :componentWrapper="'div'"
                     :object="order"
@@ -1485,7 +1449,7 @@ const formatCashierName = (order) => {
                     :permissionCheckFunction="(bookingobj) => canEditTransaction(order)"
                   />
                 </p>
-                <p v-show="order.reg_3">
+                <p v-show="order.reg_3" class="pos-order-vehicle-registration-line">
                   <EditableTableColumn
                     :componentWrapper="'div'"
                     :object="order"
@@ -1528,8 +1492,8 @@ const formatCashierName = (order) => {
               <td>{{ order.created_at }}</td>
               <td>{{ SessionUser.functions.currency.toLocal(order.total_net_amount) }}</td>
               <!--<td>{{ order.completed_at }}</td>-->
-              <td class="is-narrow">
-                <div class="buttons pos-order-list-actions">
+              <td class="is-narrow pos-orders-table-actions-cell">
+                <SuperuserInvoiceRowActions class="pos-order-list-actions">
                   <button
                     v-if="shouldShowDraftAssignmentActions"
                     class="button is-small is-link is-light pos-order-list-assign-customer-button"
@@ -1581,7 +1545,7 @@ const formatCashierName = (order) => {
                 -->
                     </template>
                   </ActionSettingsWheelButton>
-                </div>
+                </SuperuserInvoiceRowActions>
               </td>
             </tr>
             <tr
@@ -1627,74 +1591,17 @@ const formatCashierName = (order) => {
       <div class="columns is-multiline is-mobile">
         <!-- Bulk actions when invoice view allows selection -->
         <div class="column is-full" v-if="props.invoiceView && props.allowSelectMultiple">
-          <div class="buttons">
-            <button
-              class="button is-small"
-              @click="invoiceSelectedCollections()"
-              :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
-            >
-              {{ SessionUser.objects.global.language.invoice }}
-              {{ SessionUser.objects.global.language.selected_multiple }} ({{ selectedInvoiceCollections.length }})
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES)"
-              :disabled="selectedInvoiceCollections.length === 0"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.remove_customer_rule_violations") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.MERGE)"
-              :disabled="selectedInvoiceCollections.length < 2"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.merge_collections") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.SPLIT_BY_MONTH)"
-              :disabled="selectedInvoiceCollections.length === 0"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.split_by_month") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.RESET_HIDDEN_PRICES)"
-              :disabled="selectedInvoiceCollections.length === 0"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.reset_hidden_item_prices") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="selectAllInvoiceCollections()"
-              :class="{
-                'is-light': !isInvoiceCollectionSelectedAll(),
-                'is-dark': isInvoiceCollectionSelectedAll(),
-              }"
-            >
-              {{
-                isInvoiceCollectionSelectedAll()
-                  ? SessionUser.objects.global.language.unselect
-                  : SessionUser.objects.global.language.select
-              }}
-              {{ SessionUser.objects.global.language.all.toLowerCase() }}
-            </button>
-            <button
-              class="button is-small"
-              @click="toggleAutoExpandAll()"
-              :class="{
-                'is-light': !isAutoExpandAll(),
-                'is-dark': isAutoExpandAll(),
-              }"
-            >
-              {{
-                isAutoExpandAll()
-                  ? SessionUser.objects.global.language.collapse
-                  : SessionUser.objects.global.language.expand
-              }}
-              {{ SessionUser.objects.global.language.all.toLowerCase() }}
-            </button>
-          </div>
+          <InvoiceCollectionSelectionActionWheel
+            :selected-invoice-collection-ids="selectedInvoiceCollections"
+            :total-invoice-collection-count="selectableInvoiceCollectionCount"
+            :all-selected="isInvoiceCollectionSelectedAll()"
+            :all-expanded="isAutoExpandAll()"
+            :invoice-queue-busy="isInvoiceQueueBusy"
+            @invoice-selected="invoiceSelectedCollections"
+            @bulk-action="runInvoiceCollectionBulkAction"
+            @toggle-select-all="selectAllInvoiceCollections"
+            @toggle-expand-all="toggleAutoExpandAll"
+          />
         </div>
 
         <!-- Orders as cards -->
@@ -1738,19 +1645,16 @@ const formatCashierName = (order) => {
                         </span>
                       </div>
                       <div class="column is-12 has-text-right mb-2">
-                        <span class="buttons is-right mr-1">
-                          <button
+                        <span class="pos-order-invoice-collection-selector-wrapper mr-1">
+                          <BCheckbox
                             v-if="props.invoiceView && props.allowSelectMultiple"
-                            class="button is-light is-small"
-                            @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
-                            :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }"
-                          >
-                            {{
-                              isInvoiceCollectionSelected(parseInt(order.invoice_collection_id))
-                                ? SessionUser.objects.global.language.unselect
-                                : SessionUser.objects.global.language.select
-                            }}
-                          </button>
+                            class="pos-order-invoice-collection-selector"
+                            :model-value="isInvoiceCollectionSelected(order.invoice_collection_id)"
+                            :disabled="normalizeInvoiceCollectionId(order.invoice_collection_id) === null"
+                            :aria-label="`${SessionUser.objects.global.language.select} ${SessionUser.objects.global.language.invoice.toLowerCase()} #${order.invoice_collection_id || order.id}`"
+                            :data-testid="`pos-order-invoice-collection-selector-${order.id}`"
+                            @update:model-value="(checked) => setInvoiceCollectionSelection(order.invoice_collection_id, checked)"
+                          />
                         </span>
                       </div>
                     </div>
@@ -1872,74 +1776,17 @@ const formatCashierName = (order) => {
       <div class="columns is-multiline is-mobile">
         <!-- Bulk actions when invoice view allows selection -->
         <div class="column is-full" v-if="props.invoiceView && props.allowSelectMultiple">
-          <div class="buttons">
-            <button
-              class="button is-small"
-              @click="invoiceSelectedCollections()"
-              :disabled="selectedInvoiceCollections.length === 0 || isInvoiceQueueBusy"
-            >
-              {{ SessionUser.objects.global.language.invoice }}
-              {{ SessionUser.objects.global.language.selected_multiple }} ({{ selectedInvoiceCollections.length }})
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES)"
-              :disabled="selectedInvoiceCollections.length === 0"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.remove_customer_rule_violations") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.MERGE)"
-              :disabled="selectedInvoiceCollections.length < 2"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.merge_collections") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.SPLIT_BY_MONTH)"
-              :disabled="selectedInvoiceCollections.length === 0"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.split_by_month") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="runInvoiceCollectionBulkAction(INVOICE_COLLECTION_BULK_ACTIONS.RESET_HIDDEN_PRICES)"
-              :disabled="selectedInvoiceCollections.length === 0"
-            >
-              {{ t("invoicing_period.invoice_collection_actions.actions.reset_hidden_item_prices") }}
-            </button>
-            <button
-              class="button is-small"
-              @click="selectAllInvoiceCollections()"
-              :class="{
-                'is-light': !isInvoiceCollectionSelectedAll(),
-                'is-dark': isInvoiceCollectionSelectedAll(),
-              }"
-            >
-              {{
-                isInvoiceCollectionSelectedAll()
-                  ? SessionUser.objects.global.language.unselect
-                  : SessionUser.objects.global.language.select
-              }}
-              {{ SessionUser.objects.global.language.all.toLowerCase() }}
-            </button>
-            <button
-              class="button is-small"
-              @click="toggleAutoExpandAll()"
-              :class="{
-                'is-light': !isAutoExpandAll(),
-                'is-dark': isAutoExpandAll(),
-              }"
-            >
-              {{
-                isAutoExpandAll()
-                  ? SessionUser.objects.global.language.collapse
-                  : SessionUser.objects.global.language.expand
-              }}
-              {{ SessionUser.objects.global.language.all.toLowerCase() }}
-            </button>
-          </div>
+          <InvoiceCollectionSelectionActionWheel
+            :selected-invoice-collection-ids="selectedInvoiceCollections"
+            :total-invoice-collection-count="selectableInvoiceCollectionCount"
+            :all-selected="isInvoiceCollectionSelectedAll()"
+            :all-expanded="isAutoExpandAll()"
+            :invoice-queue-busy="isInvoiceQueueBusy"
+            @invoice-selected="invoiceSelectedCollections"
+            @bulk-action="runInvoiceCollectionBulkAction"
+            @toggle-select-all="selectAllInvoiceCollections"
+            @toggle-expand-all="toggleAutoExpandAll"
+          />
         </div>
 
         <!-- Orders as cards -->
@@ -2035,19 +1882,16 @@ const formatCashierName = (order) => {
                         </span>
                       </div>
                       <div class="column is-12 has-text-right mb-2">
-                        <span class="buttons is-right mr-1">
-                          <button
+                        <span class="pos-order-invoice-collection-selector-wrapper mr-1">
+                          <BCheckbox
                             v-if="props.invoiceView && props.allowSelectMultiple"
-                            class="button is-light is-small"
-                            @click="toggleInvoiceCollectionSelection(order.invoice_collection_id)"
-                            :class="{ 'is-dark': isInvoiceCollectionSelected(parseInt(order.invoice_collection_id)) }"
-                          >
-                            {{
-                              isInvoiceCollectionSelected(parseInt(order.invoice_collection_id))
-                                ? SessionUser.objects.global.language.unselect
-                                : SessionUser.objects.global.language.select
-                            }}
-                          </button>
+                            class="pos-order-invoice-collection-selector"
+                            :model-value="isInvoiceCollectionSelected(order.invoice_collection_id)"
+                            :disabled="normalizeInvoiceCollectionId(order.invoice_collection_id) === null"
+                            :aria-label="`${SessionUser.objects.global.language.select} ${SessionUser.objects.global.language.invoice.toLowerCase()} #${order.invoice_collection_id || order.id}`"
+                            :data-testid="`pos-order-invoice-collection-selector-${order.id}`"
+                            @update:model-value="(checked) => setInvoiceCollectionSelection(order.invoice_collection_id, checked)"
+                          />
                         </span>
                       </div>
                     </div>
@@ -2415,6 +2259,111 @@ const formatCashierName = (order) => {
   padding-inline: 0.85rem;
 }
 
+.pos-orders-table-row > td {
+  vertical-align: middle;
+}
+
+.pos-orders-table-id-header,
+.pos-orders-table-id-cell {
+  width: 5.75rem;
+  max-width: 5.75rem;
+  min-width: 5.75rem;
+}
+
+.pos-orders-table-id-cell {
+  text-align: center;
+  white-space: nowrap;
+}
+
+.pos-orders-table-id-cell-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.pos-orders-table-id-cell :deep(.color-indicator) {
+  display: block;
+  text-align: center;
+}
+
+.pos-orders-table-id-cell :deep(.icon-text) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pos-orders-table-actions-cell {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.pos-order-invoice-collection-selector-cell {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.pos-order-invoice-collection-selector-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pos-order-invoice-collection-selector {
+  --bulma-checkbox-size: 1.35rem;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 0;
+  vertical-align: middle;
+}
+
+.pos-order-invoice-collection-selector :deep(.check) {
+  margin: 0;
+}
+
+.pos-orders-table-header--compact {
+  white-space: nowrap;
+}
+
+.pos-orders-table-header--compact .pos-orders-table-header__label {
+  display: inline-block;
+  font-size: var(--pleno-compact-table-header-font-size);
+  line-height: var(--pleno-compact-table-header-line-height);
+  max-width: 6rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+.pos-orders-table-header--compact.pos-orders-table-header--vehicles .pos-orders-table-header__label {
+  max-width: 4.5rem;
+}
+
+.pos-order-vehicle-cell {
+  width: 4.5rem;
+  max-width: 4.5rem;
+  min-width: 4.5rem;
+  vertical-align: middle;
+}
+
+.pos-order-vehicle-registration-line {
+  max-width: 4.5rem;
+  margin: 0;
+  font-size: var(--pleno-compact-table-header-font-size);
+  line-height: 1.15;
+}
+
+.pos-order-vehicle-registration-line :deep(*) {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media screen and (max-width: 768px) {
   .pos-orders-mobile-card {
     border: 1px solid #d7dee8;
diff --git a/src/components/displays/department/pos/sync/ordersSyncPossibleDuplicateTable.vue b/src/components/displays/department/pos/sync/ordersSyncPossibleDuplicateTable.vue
index 2b57ae7d..2b1e2a3d 100644
--- a/src/components/displays/department/pos/sync/ordersSyncPossibleDuplicateTable.vue
+++ b/src/components/displays/department/pos/sync/ordersSyncPossibleDuplicateTable.vue
@@ -176,7 +176,7 @@ const onClickAttachToOrder = (object) => {
             }"
             @click="onTableHeaderClick(tableHeaders.name)"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
             <span
                 v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
@@ -194,7 +194,7 @@ const onClickAttachToOrder = (object) => {
                 'has-text-centered': tableHeaders.name === 'id'
             }"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>
diff --git a/src/components/displays/department/pos/sync/ordersSyncTable.vue b/src/components/displays/department/pos/sync/ordersSyncTable.vue
index 48438c06..187810f6 100644
--- a/src/components/displays/department/pos/sync/ordersSyncTable.vue
+++ b/src/components/displays/department/pos/sync/ordersSyncTable.vue
@@ -453,7 +453,7 @@ const confirmCloseModal = () => {
             }"
             @click="onTableHeaderClick(tableHeaders.name)"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
             <span
                 v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
@@ -471,7 +471,7 @@ const confirmCloseModal = () => {
                 'has-text-centered': tableHeaders.name === 'id'
             }"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>
@@ -512,7 +512,7 @@ const confirmCloseModal = () => {
             </button>
           </td>
         </template>
-        <td>
+        <td class="has-text-centered">
           <ColorIndicator
               v-bind:color_class="getOrderInvoiceStatusBarColor(order)"
               v-bind:is_narrow="true"
diff --git a/src/components/displays/department/pos/sync/xlvaskUsageOrdersTable.vue b/src/components/displays/department/pos/sync/xlvaskUsageOrdersTable.vue
index 008031d9..b3b2ec67 100644
--- a/src/components/displays/department/pos/sync/xlvaskUsageOrdersTable.vue
+++ b/src/components/displays/department/pos/sync/xlvaskUsageOrdersTable.vue
@@ -651,7 +651,7 @@ const filteredObjects = computed(() => {
             }"
             @click="onTableHeaderClick(tableHeaders.name)"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
             <span
                 v-if="isColumnCurrentlyBeingSortedBy(tableHeaders.name)"
@@ -669,7 +669,7 @@ const filteredObjects = computed(() => {
                 'has-text-centered': tableHeaders.name === 'id'
             }"
         >
-          <span class="is-flex-wrap-nowrap">
+          <span class="is-flex-wrap-nowrap pleno-table-header-content">
             <span class="has-text-weight-bold">{{ tableHeaders.title }}</span>
           </span>
         </th>
diff --git a/src/components/displays/superuser/tables/CollectedOrderInvoicesDefaultTable.vue b/src/components/displays/superuser/tables/CollectedOrderInvoicesDefaultTable.vue
index af0ea70e..122c6529 100644
--- a/src/components/displays/superuser/tables/CollectedOrderInvoicesDefaultTable.vue
+++ b/src/components/displays/superuser/tables/CollectedOrderInvoicesDefaultTable.vue
@@ -7,6 +7,7 @@ const { t } = useI18n();
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+import SuperuserInvoiceRowActions from "@/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue";
 
 const props = defineProps({
   objects: {
@@ -65,8 +66,8 @@ const parseClosedAt = (value) => {
         <td>{{ parseClosedAt(object.closed_at) }}</td>
         <td>{{ parseDate(object.created_at) }}</td>
         <td>{{ parseDate(object.updated_at) }}</td>
-        <td>
-          <div class="buttons is-float-right">
+        <td class="is-narrow">
+          <SuperuserInvoiceRowActions :include-buffer="true">
             <ActionSettingsWheelButton>
               <template #actions>
                 <ActionSettingsWheelItem
@@ -76,7 +77,7 @@ const parseClosedAt = (value) => {
                 />
               </template>
             </ActionSettingsWheelButton>
-          </div>
+          </SuperuserInvoiceRowActions>
         </td>
       </tr>
       <tr v-if="objects.length === 0">
diff --git a/src/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue b/src/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue
new file mode 100644
index 00000000..e77d780d
--- /dev/null
+++ b/src/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue
@@ -0,0 +1,49 @@
+<script setup>
+defineProps({
+  includeBuffer: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <div class="buttons superuser-invoice-row-actions">
+    <button
+      v-if="includeBuffer"
+      type="button"
+      class="button is-small superuser-invoice-row-actions__buffer"
+      aria-hidden="true"
+      tabindex="-1"
+      disabled
+      data-testid="superuser-invoice-action-buffer"
+    >
+      <span class="icon">
+        <i class="fas fa-paperclip"></i>
+      </span>
+    </button>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.superuser-invoice-row-actions {
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-bottom: 0;
+}
+
+.superuser-invoice-row-actions > :deep(*) {
+  flex-shrink: 0;
+}
+
+.superuser-invoice-row-actions__buffer {
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue b/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue
index 416f62f3..c1c6544c 100644
--- a/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue
+++ b/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue
@@ -1,11 +1,10 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { BCheckbox } from "buefy";
 
 const { t } = useI18n();
 
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
-import {getCustomerName} from "@/components/shop/POSDepartmentProcess.vue";
-import { ref } from 'vue';
 const props = defineProps({
   objects: {
     type: Array,
@@ -35,6 +34,7 @@ const { loadList } = usePaginatedListInstance();
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
+import SuperuserInvoiceRowActions from "@/components/displays/superuser/tables/SuperuserInvoiceRowActions.vue";
 
 const redirect = (path) => {
   // Open the url in a new tab
@@ -59,6 +59,12 @@ const onSelect = (id) => {
   props.onSelected(id);
 }
 
+const onSelectorChecked = (id, checked) => {
+  if (checked) {
+    onSelect(id);
+  }
+}
+
 </script>
 
 <template>
@@ -124,22 +130,28 @@ const onSelect = (id) => {
         <!-- Total net amount -->
         <td v-if="props.showTotal">{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
         <!-- Actions -->
-        <td v-if="!props.isSelector">
-          <ActionSettingsWheelButton>
-            <template #actions>
-              <ActionSettingsWheelItem
-                icon="fas fa-eye"
-                @click="redirect('/superuser/invoices/' + object.id)"
-                :label="t('common.show')"
-              />
-            </template>
-          </ActionSettingsWheelButton>
+        <td v-if="!props.isSelector" class="is-narrow">
+          <SuperuserInvoiceRowActions :include-buffer="true">
+            <ActionSettingsWheelButton>
+              <template #actions>
+                <ActionSettingsWheelItem
+                  icon="fas fa-eye"
+                  @click="redirect('/superuser/invoices/' + object.id)"
+                  :label="t('common.show')"
+                />
+              </template>
+            </ActionSettingsWheelButton>
+          </SuperuserInvoiceRowActions>
         </td>
         <!-- Selector -->
-        <td v-if="props.isSelector">
-          <button class="button is-small is-dark" @click="onSelect(object.id)">
-            {{ $t('common.select') }}
-          </button>
+        <td v-if="props.isSelector" class="is-narrow">
+          <BCheckbox
+            :model-value="false"
+            size="is-small"
+            :aria-label="`${$t('common.select')} #${object.id}`"
+            :data-testid="`collected-invoice-selector-${object.id}`"
+            @update:model-value="(checked) => onSelectorChecked(object.id, checked)"
+          />
         </td>
       </tr>
       </template>
@@ -159,4 +171,4 @@ const onSelect = (id) => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/i18n/generated/da-v2.json b/src/i18n/generated/da-v2.json
index 47135120..e085ae5f 100644
--- a/src/i18n/generated/da-v2.json
+++ b/src/i18n/generated/da-v2.json
@@ -4152,6 +4152,15 @@
             "merge_requires_multiple_text": "Vælg mindst to fakturasamlinger for at sammenlægge dem.",
             "merge_requires_multiple_title": "Vælg flere fakturasamlinger",
             "merge_target_title": "Vælg målfakturasamling",
+            "menu": {
+              "collapse_all": "Klap alle sammen",
+              "expand_all": "Udvid alle",
+              "label": "Fakturasamling handlinger ({count})",
+              "modification_section": "Rediger valgte",
+              "select_all": "Vælg alle",
+              "selection_section": "Valg",
+              "unselect_all": "Fravælg alle"
+            },
             "preview": {
               "affected_examples": "Eksempler på ændringer",
               "blocked_title": "Handlingen er blokeret",
diff --git a/src/i18n/generated/de-v2.json b/src/i18n/generated/de-v2.json
index ad93c54a..76290810 100644
--- a/src/i18n/generated/de-v2.json
+++ b/src/i18n/generated/de-v2.json
@@ -4263,6 +4263,15 @@
             "merge_requires_multiple_text": "Wählen Sie mindestens zwei Rechnungssammlungen aus, um sie zusammenzuführen.",
             "merge_requires_multiple_title": "Mehrere Rechnungssammlungen auswählen",
             "merge_target_title": "Ziel-Rechnungssammlung auswählen",
+            "menu": {
+              "collapse_all": "Alle einklappen",
+              "expand_all": "Alle erweitern",
+              "label": "Rechnungssammlungsaktionen ({count})",
+              "modification_section": "Ausgewählte ändern",
+              "select_all": "Alle auswählen",
+              "selection_section": "Auswahl",
+              "unselect_all": "Alle abwählen"
+            },
             "preview": {
               "affected_examples": "Beispieländerungen",
               "blocked_title": "Aktion ist blockiert",
diff --git a/src/i18n/generated/en-v2.json b/src/i18n/generated/en-v2.json
index 51e7e3c1..76212def 100644
--- a/src/i18n/generated/en-v2.json
+++ b/src/i18n/generated/en-v2.json
@@ -3984,6 +3984,15 @@
             "merge_requires_multiple_text": "Select at least two invoice collections to merge them.",
             "merge_requires_multiple_title": "Select multiple invoice collections",
             "merge_target_title": "Select target invoice collection",
+            "menu": {
+              "collapse_all": "Collapse all",
+              "expand_all": "Expand all",
+              "label": "Invoice collection actions ({count})",
+              "modification_section": "Modify selected",
+              "select_all": "Select all",
+              "selection_section": "Selection",
+              "unselect_all": "Unselect all"
+            },
             "preview": {
               "affected_examples": "Example changes",
               "blocked_title": "Action is blocked",
diff --git a/src/i18n/generated/global-v2.json b/src/i18n/generated/global-v2.json
index 20acd10f..df92bcf8 100644
--- a/src/i18n/generated/global-v2.json
+++ b/src/i18n/generated/global-v2.json
@@ -3237,6 +3237,15 @@
         "merge_requires_multiple_text": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.merge_requires_multiple_text'}",
         "merge_requires_multiple_title": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.merge_requires_multiple_title'}",
         "merge_target_title": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.merge_target_title'}",
+        "menu": {
+          "collapse_all": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.menu.collapse_all'}",
+          "expand_all": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.menu.expand_all'}",
+          "label": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.menu.label'}",
+          "modification_section": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.menu.modification_section'}",
+          "select_all": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.menu.select_all'}",
+          "selection_section": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.menu.selection_section'}",
+          "unselect_all": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.menu.unselect_all'}"
+        },
         "preview": {
           "affected_examples": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.preview.affected_examples'}",
           "blocked_title": "@:{'templates.generated.compat.invoicing_period.invoice_collection_actions.preview.blocked_title'}",
diff --git a/src/i18n/generated/no-v2.json b/src/i18n/generated/no-v2.json
index c56ad6e7..be4c736a 100644
--- a/src/i18n/generated/no-v2.json
+++ b/src/i18n/generated/no-v2.json
@@ -4266,6 +4266,15 @@
             "merge_requires_multiple_text": "Velg minst to fakturasamlinger for å slå dem sammen.",
             "merge_requires_multiple_title": "Velg flere fakturasamlinger",
             "merge_target_title": "Velg målfakturasamling",
+            "menu": {
+              "collapse_all": "Slå sammen alle",
+              "expand_all": "Utvid alle",
+              "label": "Fakturasamling handlinger ({count})",
+              "modification_section": "Endre valgte",
+              "select_all": "Velg alle",
+              "selection_section": "Valg",
+              "unselect_all": "Fjern valg av alle"
+            },
             "preview": {
               "affected_examples": "Eksempler på endringer",
               "blocked_title": "Handlingen er blokkert",
diff --git a/src/i18n/generated/sv-v2.json b/src/i18n/generated/sv-v2.json
index 6e37879b..35b81b53 100644
--- a/src/i18n/generated/sv-v2.json
+++ b/src/i18n/generated/sv-v2.json
@@ -4316,6 +4316,15 @@
             "merge_requires_multiple_text": "Välj minst två fakturasamlingar för att slå ihop dem.",
             "merge_requires_multiple_title": "Välj flera fakturasamlingar",
             "merge_target_title": "Välj målfakturasamling",
+            "menu": {
+              "collapse_all": "Fäll ihop alla",
+              "expand_all": "Expandera alla",
+              "label": "Fakturasamlingsåtgärder ({count})",
+              "modification_section": "Ändra valda",
+              "select_all": "Välj alla",
+              "selection_section": "Val",
+              "unselect_all": "Avmarkera alla"
+            },
             "preview": {
               "affected_examples": "Exempel på ändringar",
               "blocked_title": "Åtgärden är blockerad",
diff --git a/src/i18n/source/da/phrases/compat/invoicing_period/invoice_collection_actions.json b/src/i18n/source/da/phrases/compat/invoicing_period/invoice_collection_actions.json
index 159783ad..f7791772 100644
--- a/src/i18n/source/da/phrases/compat/invoicing_period/invoice_collection_actions.json
+++ b/src/i18n/source/da/phrases/compat/invoicing_period/invoice_collection_actions.json
@@ -13,6 +13,15 @@
         "merge_requires_multiple_text": "Vælg mindst to fakturasamlinger for at sammenlægge dem.",
         "merge_requires_multiple_title": "Vælg flere fakturasamlinger",
         "merge_target_title": "Vælg målfakturasamling",
+        "menu": {
+          "collapse_all": "Klap alle sammen",
+          "expand_all": "Udvid alle",
+          "label": "Fakturasamling handlinger ({count})",
+          "modification_section": "Rediger valgte",
+          "select_all": "Vælg alle",
+          "selection_section": "Valg",
+          "unselect_all": "Fravælg alle"
+        },
         "preview": {
           "affected_examples": "Eksempler på ændringer",
           "blocked_title": "Handlingen er blokeret",
diff --git a/src/i18n/source/de/phrases/compat/invoicing_period/invoice_collection_actions.json b/src/i18n/source/de/phrases/compat/invoicing_period/invoice_collection_actions.json
index bc81c6ab..a805b2a9 100644
--- a/src/i18n/source/de/phrases/compat/invoicing_period/invoice_collection_actions.json
+++ b/src/i18n/source/de/phrases/compat/invoicing_period/invoice_collection_actions.json
@@ -13,6 +13,15 @@
         "merge_requires_multiple_text": "Wählen Sie mindestens zwei Rechnungssammlungen aus, um sie zusammenzuführen.",
         "merge_requires_multiple_title": "Mehrere Rechnungssammlungen auswählen",
         "merge_target_title": "Ziel-Rechnungssammlung auswählen",
+        "menu": {
+          "collapse_all": "Alle einklappen",
+          "expand_all": "Alle erweitern",
+          "label": "Rechnungssammlungsaktionen ({count})",
+          "modification_section": "Ausgewählte ändern",
+          "select_all": "Alle auswählen",
+          "selection_section": "Auswahl",
+          "unselect_all": "Alle abwählen"
+        },
         "preview": {
           "affected_examples": "Beispieländerungen",
           "blocked_title": "Aktion ist blockiert",
diff --git a/src/i18n/source/en/phrases/compat/invoicing_period/invoice_collection_actions.json b/src/i18n/source/en/phrases/compat/invoicing_period/invoice_collection_actions.json
index 8ca0585f..2f804a85 100644
--- a/src/i18n/source/en/phrases/compat/invoicing_period/invoice_collection_actions.json
+++ b/src/i18n/source/en/phrases/compat/invoicing_period/invoice_collection_actions.json
@@ -13,6 +13,15 @@
         "merge_requires_multiple_text": "Select at least two invoice collections to merge them.",
         "merge_requires_multiple_title": "Select multiple invoice collections",
         "merge_target_title": "Select target invoice collection",
+        "menu": {
+          "collapse_all": "Collapse all",
+          "expand_all": "Expand all",
+          "label": "Invoice collection actions ({count})",
+          "modification_section": "Modify selected",
+          "select_all": "Select all",
+          "selection_section": "Selection",
+          "unselect_all": "Unselect all"
+        },
         "preview": {
           "affected_examples": "Example changes",
           "blocked_title": "Action is blocked",
diff --git a/src/i18n/source/global/shared/invoicing_period/invoice_collection_actions.json b/src/i18n/source/global/shared/invoicing_period/invoice_collection_actions.json
index 6b69318b..1e209525 100644
--- a/src/i18n/source/global/shared/invoicing_period/invoice_collection_actions.json
+++ b/src/i18n/source/global/shared/invoicing_period/invoice_collection_actions.json
@@ -12,6 +12,15 @@
       "merge_requires_multiple_text": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.merge_requires_multiple_text'}",
       "merge_requires_multiple_title": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.merge_requires_multiple_title'}",
       "merge_target_title": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.merge_target_title'}",
+      "menu": {
+        "collapse_all": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.menu.collapse_all'}",
+        "expand_all": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.menu.expand_all'}",
+        "label": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.menu.label'}",
+        "modification_section": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.menu.modification_section'}",
+        "select_all": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.menu.select_all'}",
+        "selection_section": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.menu.selection_section'}",
+        "unselect_all": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.menu.unselect_all'}"
+      },
       "preview": {
         "affected_examples": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.preview.affected_examples'}",
         "blocked_title": "@:{'phrases.compat.invoicing_period.invoice_collection_actions.preview.blocked_title'}",
diff --git a/src/i18n/source/no/phrases/compat/invoicing_period/invoice_collection_actions.json b/src/i18n/source/no/phrases/compat/invoicing_period/invoice_collection_actions.json
index 2819e757..7aed0a47 100644
--- a/src/i18n/source/no/phrases/compat/invoicing_period/invoice_collection_actions.json
+++ b/src/i18n/source/no/phrases/compat/invoicing_period/invoice_collection_actions.json
@@ -13,6 +13,15 @@
         "merge_requires_multiple_text": "Velg minst to fakturasamlinger for å slå dem sammen.",
         "merge_requires_multiple_title": "Velg flere fakturasamlinger",
         "merge_target_title": "Velg målfakturasamling",
+        "menu": {
+          "collapse_all": "Slå sammen alle",
+          "expand_all": "Utvid alle",
+          "label": "Fakturasamling handlinger ({count})",
+          "modification_section": "Endre valgte",
+          "select_all": "Velg alle",
+          "selection_section": "Valg",
+          "unselect_all": "Fjern valg av alle"
+        },
         "preview": {
           "affected_examples": "Eksempler på endringer",
           "blocked_title": "Handlingen er blokkert",
diff --git a/src/i18n/source/sv/phrases/compat/invoicing_period/invoice_collection_actions.json b/src/i18n/source/sv/phrases/compat/invoicing_period/invoice_collection_actions.json
index 294bc1f9..af91628f 100644
--- a/src/i18n/source/sv/phrases/compat/invoicing_period/invoice_collection_actions.json
+++ b/src/i18n/source/sv/phrases/compat/invoicing_period/invoice_collection_actions.json
@@ -13,6 +13,15 @@
         "merge_requires_multiple_text": "Välj minst två fakturasamlingar för att slå ihop dem.",
         "merge_requires_multiple_title": "Välj flera fakturasamlingar",
         "merge_target_title": "Välj målfakturasamling",
+        "menu": {
+          "collapse_all": "Fäll ihop alla",
+          "expand_all": "Expandera alla",
+          "label": "Fakturasamlingsåtgärder ({count})",
+          "modification_section": "Ändra valda",
+          "select_all": "Välj alla",
+          "selection_section": "Val",
+          "unselect_all": "Avmarkera alla"
+        },
         "preview": {
           "affected_examples": "Exempel på ändringar",
           "blocked_title": "Åtgärden är blockerad",
diff --git a/src/main.js b/src/main.js
index b335ccda..525ac2b8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,6 +23,7 @@ import {
   installReleaseErrorInstrumentation,
 } from '@/services/releaseTimeline.js';
 import { RELEASE_RUNTIME_GLOBAL_KEY } from '@/services/releaseBootstrap.js';
+import '@/services/tableHeaderPreferences.js';
 
 import { IS_DEV } from './config';
 const VITE_BUILD_DATE = import.meta.env.VITE_BUILD_DATE || '';
diff --git a/src/services/tableHeaderPreferences.js b/src/services/tableHeaderPreferences.js
new file mode 100644
index 00000000..192ac16a
--- /dev/null
+++ b/src/services/tableHeaderPreferences.js
@@ -0,0 +1,52 @@
+import { ref } from "vue";
+
+export const LARGE_TABLE_HEADERS_STORAGE_KEY = "pleno.useLargeTableHeaders";
+export const LARGE_TABLE_HEADERS_BODY_CLASS = "pleno-large-table-headers";
+
+const applyLargeTableHeadersClass = (value) => {
+  if (typeof document === "undefined" || !document.body) {
+    return;
+  }
+
+  document.body.classList.toggle(LARGE_TABLE_HEADERS_BODY_CLASS, Boolean(value));
+};
+
+const readStoredBoolean = () => {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return false;
+  }
+
+  try {
+    return window.localStorage.getItem(LARGE_TABLE_HEADERS_STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+};
+
+export const useLargeTableHeaders = ref(readStoredBoolean());
+applyLargeTableHeadersClass(useLargeTableHeaders.value);
+
+export const setUseLargeTableHeaders = (value) => {
+  const nextValue = Boolean(value);
+  useLargeTableHeaders.value = nextValue;
+  applyLargeTableHeadersClass(nextValue);
+
+  if (typeof window === "undefined" || !window.localStorage) {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(LARGE_TABLE_HEADERS_STORAGE_KEY, nextValue ? "true" : "false");
+  } catch {
+    // Storage is optional; keep the in-memory preference for this session.
+  }
+};
+
+if (typeof window !== "undefined") {
+  window.addEventListener("storage", (event) => {
+    if (event.key === LARGE_TABLE_HEADERS_STORAGE_KEY) {
+      useLargeTableHeaders.value = event.newValue === "true";
+      applyLargeTableHeadersClass(useLargeTableHeaders.value);
+    }
+  });
+}
diff --git a/src/views/dashboards/userDashboard/profile/UserProfile.vue b/src/views/dashboards/userDashboard/profile/UserProfile.vue
index ec478c38..ab3d132d 100644
--- a/src/views/dashboards/userDashboard/profile/UserProfile.vue
+++ b/src/views/dashboards/userDashboard/profile/UserProfile.vue
@@ -15,6 +15,7 @@ import ShowErrorField from "@/components/global/ShowErrorField.vue";
 import SubuserGrantSelector from "@/components/session/subuser/SubuserGrantSelector.vue";
 import { parseError, removeError, addError } from "@/components/request/HandleGlobalError.vue";
 import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
+import { setUseLargeTableHeaders, useLargeTableHeaders } from "@/services/tableHeaderPreferences.js";
 
 const { t } = useI18n();
 const isLoading = ref(false);
@@ -792,6 +793,22 @@ const onClickSaveWashCertificateEmail = async () => {
           {{ $t("user_dashboard.profile.driver.customer_switch_help") }}
         </p>
       </ConfigurationCategory>
+      <!-- Display preferences -->
+      <ConfigurationCategory
+        class="mt-2"
+        title="Visning"
+        description="Personlige visningsindstillinger for tabeller."
+        icon="fas fa-table"
+        data-testid="user-profile-display-preferences-card"
+      >
+        <ConfigurationSwitch
+          data-testid="user-profile-large-table-headers-switch"
+          title="Store tabeloverskrifter"
+          description="Brug de større tabeloverskrifter i stedet for den kompakte standardvisning."
+          :value="useLargeTableHeaders"
+          :on-switch="setUseLargeTableHeaders"
+        />
+      </ConfigurationCategory>
       <!-- Notifications - email notifications -->
       <ConfigurationCategory
         v-if="!SessionUser.isSubuser.value"
diff --git a/tests/e2e/admin-pos-orders.spec.ts b/tests/e2e/admin-pos-orders.spec.ts
index 2992378b..e435f43e 100644
--- a/tests/e2e/admin-pos-orders.spec.ts
+++ b/tests/e2e/admin-pos-orders.spec.ts
@@ -2613,6 +2613,48 @@ test.describe("Admin POS Orders - desktop action menu layout", () => {
     await primeOperatorSession(page, "pos-orders-action-menu-layout-token", SUPERUSER_POS_PERMISSIONS);
   });
 
+  test("keeps desktop order list row cells aligned", async ({ page }) => {
+    await page.goto("/admin/12/modules/pos/orders");
+    await expect(page.locator("table")).toBeVisible();
+
+    const row = getVisibleTestId(page, "pos-order-list-settings-54518").locator("xpath=ancestor::tr").first();
+    await expect(row).toBeVisible();
+
+    const rowMetrics = await row.evaluate((rowElement) => {
+      const cells = Array.from(rowElement.children).filter((child) => child.tagName.toLowerCase() === "td");
+      const idCell = rowElement.querySelector(".pos-orders-table-id-cell");
+      const idIndicator = idCell?.querySelector(".pos-orders-table-id-cell-content");
+      const cellSummaries = cells.map((cell) => {
+        const rect = cell.getBoundingClientRect();
+        return {
+          className: cell.className,
+          verticalAlign: window.getComputedStyle(cell).verticalAlign,
+          width: rect.width,
+        };
+      });
+      const idCellRect = idCell?.getBoundingClientRect();
+      const idIndicatorRect = idIndicator?.getBoundingClientRect();
+
+      return {
+        cellSummaries,
+        idCenterDelta:
+          idCellRect && idIndicatorRect
+            ? Math.abs(idIndicatorRect.left + idIndicatorRect.width / 2 - (idCellRect.left + idCellRect.width / 2))
+            : null,
+        idCellWidth: idCellRect?.width ?? null,
+      };
+    });
+
+    expect(rowMetrics.cellSummaries.length).toBeGreaterThan(5);
+    expect(rowMetrics.cellSummaries.every((cell) => cell.verticalAlign === "middle")).toBe(true);
+    expect(rowMetrics.idCenterDelta).not.toBeNull();
+    expect(rowMetrics.idCenterDelta ?? 999).toBeLessThanOrEqual(2);
+    expect(rowMetrics.idCellWidth ?? 999).toBeLessThanOrEqual(100);
+    expect(
+      rowMetrics.cellSummaries.some((cell) => String(cell.className).includes("pos-orders-table-actions-cell"))
+    ).toBe(true);
+  });
+
   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();
diff --git a/tests/e2e/change-invoice-collection.spec.ts b/tests/e2e/change-invoice-collection.spec.ts
index 8f779550..f0de8832 100644
--- a/tests/e2e/change-invoice-collection.spec.ts
+++ b/tests/e2e/change-invoice-collection.spec.ts
@@ -166,11 +166,11 @@ test.describe("POS order actions", () => {
       "Expected invoice collection picker modal to open after clicking the action."
     ).toBeVisible();
 
-    const selectButtons = pickerModal.getByRole("button", { name: /Vælg|Select/i });
-    const selectableCount = await selectButtons.count();
+    const selectCheckboxes = pickerModal.locator('[data-testid^="collected-invoice-selector-"] input[type="checkbox"]');
+    const selectableCount = await selectCheckboxes.count();
     test.skip(selectableCount === 0, "No invoice collections available for selection in test data.");
 
-    await selectButtons.first().click();
+    await selectCheckboxes.first().check();
 
     await expect(page).toHaveURL(beforeUrl);
     await expect(page.locator(".swal2-container, .swal2-popup")).toContainText(
diff --git a/tests/unit/collected-order-invoices-table.spec.js b/tests/unit/collected-order-invoices-table.spec.js
new file mode 100644
index 00000000..2f73c055
--- /dev/null
+++ b/tests/unit/collected-order-invoices-table.spec.js
@@ -0,0 +1,186 @@
+// @vitest-environment jsdom
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+import CollectedOrderInvoicesTable from "@/components/displays/superuser/tables/collectedOrderInvoicesTable.vue";
+import CollectedOrderInvoicesDefaultTable from "@/components/displays/superuser/tables/CollectedOrderInvoicesDefaultTable.vue";
+
+vi.mock("@/components/pagination/paginatedList.vue", () => ({
+  usePaginatedListInstance: () => ({
+    loadList: vi.fn(),
+  }),
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    objects: {
+      collectedOrderInvoices: {
+        columns: {
+          id: { label: "ID" },
+          customer_number: { label: "Customer number" },
+          processor: { label: "Processor" },
+          created_at: { label: "Created" },
+          name: { label: "Name" },
+          notes: { label: "Notes" },
+          external_id: { label: "External ID" },
+          po_number: { label: "PO" },
+          closed_at: { label: "Closed" },
+          updated_at: { label: "Updated" },
+        },
+        meta: {
+          labels: {
+            multiple: "invoice collections",
+          },
+        },
+      },
+      global: {
+        language: {
+          customer_name: "Customer",
+        },
+      },
+      orders: {
+        meta: {
+          title: "Orders",
+        },
+      },
+    },
+    functions: {
+      currency: {
+        toLocal: (value) => String(value ?? ""),
+      },
+    },
+  },
+}));
+
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({
+    t: (key) => key,
+  }),
+  createI18n: () => ({
+    global: {
+      t: (key) => key,
+      locale: {
+        value: "en",
+      },
+    },
+  }),
+}));
+
+const EditableTableColumnStub = {
+  props: ["object", "column", "parseFunction"],
+  template: "<td>{{ parseFunction ? parseFunction(object[column]) : object[column] }}</td>",
+};
+
+const ActionSettingsWheelButtonStub = {
+  template: '<div data-testid="action-settings-wheel-stub"><slot name="actions" /></div>',
+};
+
+const ActionSettingsWheelItemStub = {
+  template: '<button type="button" data-testid="action-settings-wheel-item-stub"></button>',
+};
+
+const BCheckboxStub = {
+  props: ["modelValue"],
+  emits: ["update:modelValue"],
+  template: `
+    <label :data-testid="$attrs['data-testid']">
+      <input
+        type="checkbox"
+        :aria-label="$attrs['aria-label']"
+        :checked="modelValue"
+        @change="$emit('update:modelValue', $event.target.checked)"
+      />
+    </label>
+  `,
+};
+
+const mountSelectorTable = (props = {}) =>
+  mount(CollectedOrderInvoicesTable, {
+    props: {
+      objects: [
+        {
+          id: 42,
+          objects: 1,
+          customer_name: "Acme",
+          customer_number: 1001,
+          processor: 1,
+          orders: 2,
+          closed_at: null,
+          created_at: "2026-07-01",
+          total_net_amount: 123,
+        },
+      ],
+      showEmpty: true,
+      ...props,
+    },
+    global: {
+      mocks: {
+        $t: (key) => key,
+      },
+      stubs: {
+        EditableTableColumn: EditableTableColumnStub,
+        ActionSettingsWheelButton: ActionSettingsWheelButtonStub,
+        ActionSettingsWheelItem: ActionSettingsWheelItemStub,
+        BCheckbox: BCheckboxStub,
+      },
+    },
+  });
+
+describe("CollectedOrderInvoicesTable", () => {
+  it("uses a Buefy checkbox for selector mode", async () => {
+    const onSelected = vi.fn();
+    const wrapper = mountSelectorTable({
+      isSelector: true,
+      onSelected,
+    });
+
+    expect(wrapper.find("button.button.is-small.is-dark").exists()).toBe(false);
+
+    await wrapper.get('[data-testid="collected-invoice-selector-42"] input').setValue(true);
+
+    expect(onSelected).toHaveBeenCalledWith(42);
+    expect(wrapper.emitted("update:selected")?.[0]).toEqual([42]);
+  });
+
+  it("keeps a hidden attachment-width buffer before collected invoice row actions", () => {
+    const wrapper = mountSelectorTable();
+
+    expect(wrapper.get('[data-testid="superuser-invoice-action-buffer"]').exists()).toBe(true);
+    expect(wrapper.get('[data-testid="action-settings-wheel-stub"]').exists()).toBe(true);
+  });
+});
+
+describe("CollectedOrderInvoicesDefaultTable", () => {
+  it("keeps a hidden attachment-width buffer before default invoice row actions", () => {
+    const wrapper = mount(CollectedOrderInvoicesDefaultTable, {
+      props: {
+        objects: [
+          {
+            id: 43,
+            customer_number: 1002,
+            name: "Acme July",
+            notes: null,
+            processor: 1,
+            external_id: null,
+            po_number: null,
+            closed_at: null,
+            created_at: "2026-07-01",
+            updated_at: "2026-07-02",
+          },
+        ],
+      },
+      global: {
+        mocks: {
+          $t: (key) => key,
+        },
+        stubs: {
+          ActionSettingsWheelButton: ActionSettingsWheelButtonStub,
+          ActionSettingsWheelItem: ActionSettingsWheelItemStub,
+        },
+      },
+    });
+
+    expect(wrapper.get('[data-testid="superuser-invoice-action-buffer"]').exists()).toBe(true);
+    expect(wrapper.get('[data-testid="action-settings-wheel-stub"]').exists()).toBe(true);
+  });
+});
diff --git a/tests/unit/invoice-collection-selection-action-wheel.spec.js b/tests/unit/invoice-collection-selection-action-wheel.spec.js
new file mode 100644
index 00000000..62a7357b
--- /dev/null
+++ b/tests/unit/invoice-collection-selection-action-wheel.spec.js
@@ -0,0 +1,187 @@
+// @vitest-environment jsdom
+import { defineComponent } from "vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import InvoiceCollectionSelectionActionWheel from "@/components/displays/department/pos/orders/InvoiceCollectionSelectionActionWheel.vue";
+import { INVOICE_COLLECTION_BULK_ACTIONS } from "@/components/displays/department/pos/orders/invoiceCollectionBulkActions.js";
+
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({
+    t: (key, params = {}) => (params.count === undefined ? key : `${key}:${params.count}`),
+  }),
+  createI18n: () => ({
+    global: {
+      t: (key) => key,
+    },
+    install: () => {},
+  }),
+}));
+
+vi.mock("@/components/displays/buttons/ActionSettingsWheelButton.vue", () => ({
+  default: {
+    template: '<div data-testid="settings-wheel-stub"><slot name="actions"></slot></div>',
+  },
+}));
+
+vi.mock("@/components/displays/buttons/ActionSettingsWheelItemLabel.vue", () => ({
+  default: {
+    props: ["label"],
+    template: '<div class="action-settings-wheel-label-stub">{{ label }}</div>',
+  },
+}));
+
+vi.mock("@/components/displays/buttons/ActionSettingsWheelItem.vue", () => ({
+  default: {
+    props: {
+      clickAction: {
+        type: Function,
+        default: null,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      label: {
+        type: String,
+        default: "",
+      },
+      testId: {
+        type: String,
+        default: "",
+      },
+    },
+    template: `
+      <button
+        type="button"
+        class="action-settings-wheel-item-stub"
+        :data-testid="testId || undefined"
+        :disabled="disabled"
+        @click="clickAction && clickAction()"
+      >
+        {{ label }}
+      </button>
+    `,
+  },
+}));
+
+const ActionSettingsWheelButtonStub = {
+  template: '<div data-testid="settings-wheel-stub"><slot name="actions"></slot></div>',
+};
+
+const ActionSettingsWheelItemLabelStub = {
+  props: ["label"],
+  template: '<div class="action-settings-wheel-label-stub">{{ label }}</div>',
+};
+
+const ActionSettingsWheelItemStub = defineComponent({
+  name: "ActionSettingsWheelItem",
+  props: {
+    clickAction: {
+      type: Function,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    testId: {
+      type: String,
+      default: "",
+    },
+  },
+  template: `
+    <button
+      type="button"
+      class="action-settings-wheel-item-stub"
+      :data-testid="testId || undefined"
+      :disabled="disabled"
+      @click="clickAction && clickAction()"
+    >
+      {{ label }}
+    </button>
+  `,
+});
+
+const mountWheel = (props = {}) =>
+  mount(InvoiceCollectionSelectionActionWheel, {
+    props: {
+      selectedInvoiceCollectionIds: [],
+      totalInvoiceCollectionCount: 2,
+      allSelected: false,
+      allExpanded: false,
+      invoiceQueueBusy: false,
+      ...props,
+    },
+    global: {
+      stubs: {
+        ActionSettingsWheelButton: ActionSettingsWheelButtonStub,
+        ActionSettingsWheelItem: ActionSettingsWheelItemStub,
+        ActionSettingsWheelItemLabel: ActionSettingsWheelItemLabelStub,
+      },
+    },
+  });
+
+describe("InvoiceCollectionSelectionActionWheel", () => {
+  it("does not render without selectable invoice collections", () => {
+    const wrapper = mountWheel({ totalInvoiceCollectionCount: 0 });
+
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel"]').exists()).toBe(false);
+  });
+
+  it("shows selection controls without modification actions when nothing is selected", async () => {
+    const wrapper = mountWheel();
+
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-select-all"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-expand-all"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-invoice-selected"]').exists()).toBe(
+      false
+    );
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-merge"]').exists()).toBe(false);
+
+    await wrapper.get('[data-testid="invoice-collection-selection-action-wheel-select-all"]').trigger("click");
+    await wrapper.get('[data-testid="invoice-collection-selection-action-wheel-expand-all"]').trigger("click");
+
+    expect(wrapper.emitted("toggleSelectAll")).toHaveLength(1);
+    expect(wrapper.emitted("toggleExpandAll")).toHaveLength(1);
+  });
+
+  it("shows single-selection modification actions and hides merge", async () => {
+    const wrapper = mountWheel({ selectedInvoiceCollectionIds: [3001] });
+
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-invoice-selected"]').exists()).toBe(
+      true
+    );
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-clean-rules"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-split-by-month"]').exists()).toBe(
+      true
+    );
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-reset-hidden-prices"]').exists()).toBe(
+      true
+    );
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-merge"]').exists()).toBe(false);
+
+    await wrapper.get('[data-testid="invoice-collection-selection-action-wheel-clean-rules"]').trigger("click");
+
+    expect(wrapper.emitted("bulkAction")).toEqual([[INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES]]);
+  });
+
+  it("shows merge for multiple selections and disables invoicing while queue is busy", async () => {
+    const wrapper = mountWheel({
+      selectedInvoiceCollectionIds: [3001, 3002],
+      invoiceQueueBusy: true,
+    });
+
+    expect(
+      wrapper.get('[data-testid="invoice-collection-selection-action-wheel-invoice-selected"]').attributes("disabled")
+    ).toBeDefined();
+    expect(wrapper.find('[data-testid="invoice-collection-selection-action-wheel-merge"]').exists()).toBe(true);
+
+    await wrapper.get('[data-testid="invoice-collection-selection-action-wheel-merge"]').trigger("click");
+
+    expect(wrapper.emitted("bulkAction")).toEqual([[INVOICE_COLLECTION_BULK_ACTIONS.MERGE]]);
+  });
+});
diff --git a/tests/unit/orders-table.spec.js b/tests/unit/orders-table.spec.js
index a1445846..54af1e1e 100644
--- a/tests/unit/orders-table.spec.js
+++ b/tests/unit/orders-table.spec.js
@@ -1,9 +1,13 @@
 // @vitest-environment jsdom
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, nextTick, ref } from "vue";
 import { flushPromises, mount } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { INVOICE_COLLECTION_BULK_ACTIONS } from "@/components/displays/department/pos/orders/invoiceCollectionBulkActions.js";
+import { setUseLargeTableHeaders } from "@/services/tableHeaderPreferences.js";
 
 const getSingleMock = vi.hoisted(() => vi.fn());
+const bulkActionPreviewMock = vi.hoisted(() => vi.fn());
+const bulkActionApplyMock = vi.hoisted(() => vi.fn());
 const sessionState = vi.hoisted(() => ({
   canAccessSuperUser: false,
 }));
@@ -30,6 +34,9 @@ const invoiceQueueState = vi.hoisted(() => {
 vi.mock("vue-i18n", () => ({
   useI18n: () => ({
     t: (key) => key,
+    locale: {
+      value: "en",
+    },
   }),
   createI18n: () => ({
     global: {
@@ -146,6 +153,10 @@ vi.mock("@/components/session/token/SessionUser.vue", () => ({
         get: {
           single: getSingleMock,
         },
+        functions: {
+          bulk_action_preview: bulkActionPreviewMock,
+          bulk_action_apply: bulkActionApplyMock,
+        },
       },
       global: {
         language: {
@@ -178,6 +189,7 @@ vi.mock("@/components/session/token/SessionUser.vue", () => ({
       date: {
         timeAgo: () => "just now",
       },
+      parseErrorMessage: (error) => error?.message || String(error),
     },
   },
 }));
@@ -261,6 +273,74 @@ const ActionSettingsWheelButtonStub = {
   template: '<div class="action-settings-wheel-button-stub"><slot name="actions"></slot></div>',
 };
 
+const InvoiceCollectionSelectionActionWheelStub = defineComponent({
+  name: "InvoiceCollectionSelectionActionWheel",
+  props: {
+    selectedInvoiceCollectionIds: {
+      type: Array,
+      default: () => [],
+    },
+    totalInvoiceCollectionCount: {
+      type: Number,
+      default: 0,
+    },
+    allSelected: {
+      type: Boolean,
+      default: false,
+    },
+    allExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    invoiceQueueBusy: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["invoiceSelected", "bulkAction", "toggleSelectAll", "toggleExpandAll"],
+  template: `
+    <div
+      class="invoice-collection-selection-action-wheel-stub"
+      :data-selected-count="selectedInvoiceCollectionIds.length"
+      :data-total-count="totalInvoiceCollectionCount"
+      :data-all-selected="String(allSelected)"
+      :data-all-expanded="String(allExpanded)"
+      :data-queue-busy="String(invoiceQueueBusy)"
+    >
+      <button data-testid="selection-wheel-invoice-selected" @click="$emit('invoiceSelected')"></button>
+      <button data-testid="selection-wheel-clean-rules" @click="$emit('bulkAction', '${INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES}')"></button>
+      <button data-testid="selection-wheel-select-all" @click="$emit('toggleSelectAll')"></button>
+      <button data-testid="selection-wheel-expand-all" @click="$emit('toggleExpandAll')"></button>
+    </div>
+  `,
+});
+
+const BCheckboxStub = defineComponent({
+  name: "BCheckbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  template: `
+    <label :class="$attrs.class" :data-testid="$attrs['data-testid']">
+      <input
+        type="checkbox"
+        :aria-label="$attrs['aria-label']"
+        :checked="modelValue"
+        :disabled="disabled"
+        @change="$emit('update:modelValue', $event.target.checked)"
+      />
+    </label>
+  `,
+});
+
 const ActionSettingsWheelItemStub = {
   template: '<div class="action-settings-wheel-item-stub"></div>',
 };
@@ -339,6 +419,8 @@ const mountOrdersTable = (props = {}) => {
         EditableTableColumn: EditableTableColumnStub,
         ColorIndicator: ColorIndicatorStub,
         ActionSettingsWheelButton: ActionSettingsWheelButtonStub,
+        InvoiceCollectionSelectionActionWheel: InvoiceCollectionSelectionActionWheelStub,
+        BCheckbox: BCheckboxStub,
         ActionSettingsWheelItem: ActionSettingsWheelItemStub,
         OrderContentTable: OrderContentTableStub,
         PosDepartmentStepMobileAttachment: PosDepartmentStepMobileAttachmentStub,
@@ -371,10 +453,26 @@ describe("OrdersTable", () => {
     invoiceQueueState.success.value = [];
     invoiceQueueState.queued.value = [];
     invoiceQueueState.log.value = [];
+    setUseLargeTableHeaders(false);
     getSingleMock.mockReset();
+    bulkActionPreviewMock.mockReset();
+    bulkActionPreviewMock.mockResolvedValue({
+      data: {
+        data: {
+          preview_id: "preview-1",
+          confirmation_phrase: "Confirm",
+          summary: {
+            changed_count: 0,
+          },
+          blockers: [],
+        },
+      },
+    });
+    bulkActionApplyMock.mockReset();
   });
 
   afterEach(() => {
+    setUseLargeTableHeaders(false);
     vi.restoreAllMocks();
   });
 
@@ -612,4 +710,148 @@ describe("OrdersTable", () => {
     expect(getIndicatorForOrder(56631).attributes("data-color-class")).toBe("has-text-warning");
     expect(getIndicatorForOrder(56632).attributes("data-icon")).toBe("fas fa-circle");
   });
+
+  it("routes invoice collection selection controls through the action wheel", async () => {
+    const wrapper = mountOrdersTable({
+      invoiceView: true,
+      allowSelectMultiple: true,
+      autoExpandAll: false,
+      orders: [
+        createOrder({
+          id: 56633,
+          invoice_collection_id: 3001,
+          invoice_collection: { id: 3001, closed_at: null, booked_invoice_id: null },
+        }),
+        createOrder({
+          id: 56634,
+          invoice_collection_id: 3001,
+          invoice_collection: { id: 3001, closed_at: null, booked_invoice_id: null },
+        }),
+        createOrder({
+          id: 56635,
+          invoice_collection_id: 3002,
+          invoice_collection: { id: 3002, closed_at: null, booked_invoice_id: null },
+        }),
+      ],
+    });
+
+    await flushPromises();
+
+    const wheel = () => wrapper.get(".invoice-collection-selection-action-wheel-stub");
+    const firstCollectionSelector = () =>
+      wrapper.get('[data-testid="pos-order-invoice-collection-selector-56633"] input');
+    const secondSameCollectionSelector = () =>
+      wrapper.get('[data-testid="pos-order-invoice-collection-selector-56634"] input');
+    expect(wheel().attributes("data-total-count")).toBe("2");
+    expect(wheel().attributes("data-selected-count")).toBe("0");
+    expect(wheel().attributes("data-all-selected")).toBe("false");
+    expect(wheel().attributes("data-all-expanded")).toBe("false");
+    expect(wrapper.findAll("button").some((button) => /select|unselect|vælg|fravælg/i.test(button.text()))).toBe(false);
+    expect(wrapper.get('[data-testid="pos-order-invoice-collection-selector-56633"]').classes()).toContain(
+      "pos-order-invoice-collection-selector"
+    );
+
+    await firstCollectionSelector().setValue(true);
+    await flushPromises();
+
+    expect(wheel().attributes("data-selected-count")).toBe("1");
+    expect(firstCollectionSelector().element.checked).toBe(true);
+    expect(secondSameCollectionSelector().element.checked).toBe(true);
+
+    await secondSameCollectionSelector().setValue(false);
+    await flushPromises();
+
+    expect(wheel().attributes("data-selected-count")).toBe("0");
+    expect(firstCollectionSelector().element.checked).toBe(false);
+
+    await wrapper.get('[data-testid="selection-wheel-select-all"]').trigger("click");
+    await flushPromises();
+
+    expect(wheel().attributes("data-selected-count")).toBe("2");
+    expect(wheel().attributes("data-all-selected")).toBe("true");
+
+    await wrapper.get('[data-testid="selection-wheel-expand-all"]').trigger("click");
+    await flushPromises();
+
+    expect(wheel().attributes("data-all-expanded")).toBe("true");
+
+    await wrapper.get('[data-testid="selection-wheel-clean-rules"]').trigger("click");
+    await flushPromises();
+
+    expect(bulkActionPreviewMock).toHaveBeenCalledWith(
+      INVOICE_COLLECTION_BULK_ACTIONS.CLEAN_CUSTOMER_RULES,
+      [3001, 3002],
+      {},
+      "en"
+    );
+  });
+
+  it("uses compact table headers by default and restores large headers from the user setting", async () => {
+    const wrapper = mountOrdersTable({
+      invoiceView: true,
+      orders: [createOrder()],
+    });
+
+    await flushPromises();
+
+    expect(wrapper.find("th.pos-orders-table-header--compact").exists()).toBe(true);
+    expect(wrapper.find("th.pos-orders-table-header--vehicles.pos-orders-table-header--compact").exists()).toBe(true);
+    expect(wrapper.find("th .pleno-table-header-content").exists()).toBe(true);
+
+    setUseLargeTableHeaders(true);
+    await nextTick();
+
+    expect(wrapper.find("th.pos-orders-table-header--compact").exists()).toBe(false);
+    expect(wrapper.find("th.pos-orders-table-header--vehicles").exists()).toBe(true);
+  });
+
+  it("renders stacked desktop registration numbers in the compact vehicle column style", async () => {
+    const wrapper = mountOrdersTable({
+      invoiceView: true,
+      orders: [
+        createOrder({
+          reg_1: "AB12345",
+          reg_2: "CD67890",
+          reg_3: "EF24680",
+        }),
+      ],
+    });
+
+    await flushPromises();
+
+    const vehicleCell = wrapper.get(".pos-order-vehicle-cell");
+    const registrationLines = vehicleCell.findAll(".pos-order-vehicle-registration-line");
+
+    expect(registrationLines).toHaveLength(3);
+    expect(registrationLines.map((line) => line.text())).toEqual(["AB12345", "CD67890", "EF24680"]);
+  });
+
+  it("centers the desktop ID status indicator group in the ID cell", async () => {
+    const wrapper = mountOrdersTable({
+      invoiceView: true,
+      orders: [createOrder({ id: 54518 })],
+    });
+
+    await flushPromises();
+
+    const idCell = wrapper.get(".pos-orders-table-id-cell");
+    expect(idCell.classes()).toContain("is-narrow");
+    expect(idCell.text()).toContain("54518");
+    expect(idCell.find(".pos-orders-table-id-cell-content").exists()).toBe(true);
+    expect(idCell.find(".color-indicator-stub").exists()).toBe(true);
+  });
+
+  it("uses row-level alignment classes for the desktop orders table row", async () => {
+    const wrapper = mountOrdersTable({
+      invoiceView: true,
+      orders: [createOrder({ id: 54518 })],
+    });
+
+    await flushPromises();
+
+    const row = wrapper.get(".pos-orders-table-row");
+    expect(row.find(".pos-orders-table-id-cell").exists()).toBe(true);
+    expect(row.find(".pos-order-vehicle-cell").exists()).toBe(true);
+    expect(row.find(".pos-orders-table-actions-cell").exists()).toBe(true);
+  });
 });
diff --git a/tests/unit/table-header-preferences.spec.js b/tests/unit/table-header-preferences.spec.js
new file mode 100644
index 00000000..bc24951d
--- /dev/null
+++ b/tests/unit/table-header-preferences.spec.js
@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  LARGE_TABLE_HEADERS_BODY_CLASS,
+  LARGE_TABLE_HEADERS_STORAGE_KEY,
+  setUseLargeTableHeaders,
+  useLargeTableHeaders,
+} from "@/services/tableHeaderPreferences.js";
+
+describe("table header preferences", () => {
+  beforeEach(() => {
+    window.localStorage.removeItem(LARGE_TABLE_HEADERS_STORAGE_KEY);
+    setUseLargeTableHeaders(false);
+  });
+
+  it("uses compact table headers by default", () => {
+    expect(useLargeTableHeaders.value).toBe(false);
+    expect(document.body.classList.contains(LARGE_TABLE_HEADERS_BODY_CLASS)).toBe(false);
+  });
+
+  it("toggles the document class for large table headers", () => {
+    setUseLargeTableHeaders(true);
+
+    expect(window.localStorage.getItem(LARGE_TABLE_HEADERS_STORAGE_KEY)).toBe("true");
+    expect(useLargeTableHeaders.value).toBe(true);
+    expect(document.body.classList.contains(LARGE_TABLE_HEADERS_BODY_CLASS)).toBe(true);
+
+    setUseLargeTableHeaders(false);
+
+    expect(window.localStorage.getItem(LARGE_TABLE_HEADERS_STORAGE_KEY)).toBe("false");
+    expect(useLargeTableHeaders.value).toBe(false);
+    expect(document.body.classList.contains(LARGE_TABLE_HEADERS_BODY_CLASS)).toBe(false);
+  });
+});