From 8ae4ff81fa7492a81eeffea0e5754ea6f7f46280 Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Sun, 7 Jun 2026 22:12:18 +0100
Subject: [PATCH 1/4] Highlight script row on Edit/dropdown button hover in
 both UIs (#1163)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replicates the cue editor's CSS :has() pattern — when the user hovers
the Edit button or dropdown caret in the script viewer, the full row
gets a subtle background highlight to make the target line clear.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/show/config/script/ScriptLineViewer.vue    | 8 +++++++-
 .../show/config/script/ScriptLineViewer.vue               | 7 +++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client-v3/src/components/show/config/script/ScriptLineViewer.vue b/client-v3/src/components/show/config/script/ScriptLineViewer.vue
index 5c3c6c0e1..6bf13b507 100644
--- a/client-v3/src/components/show/config/script/ScriptLineViewer.vue
+++ b/client-v3/src/components/show/config/script/ScriptLineViewer.vue
@@ -1,5 +1,6 @@
 <template>
   <BRow
+    class="script-line-row"
     :class="{
       'stage-direction': line.line_type === LINE_TYPES.STAGE_DIRECTION,
       'heading-padding': line.line_type === LINE_TYPES.DIALOGUE && needsHeadingsAll,
@@ -121,7 +122,7 @@
           End
         </BButton>
       </BButtonGroup>
-      <BButtonGroup v-else-if="canEdit && !isCutMode">
+      <BButtonGroup v-else-if="canEdit && !isCutMode" class="script-edit-controls">
         <BButton variant="link" style="padding: 0" @click.prevent.stop="$emit('editLine')"
           >Edit</BButton
         >
@@ -305,4 +306,9 @@ function cutLinePart(partIndex: number): void {
 .cut-line-part {
   text-decoration: line-through;
 }
+.script-line-row:has(.script-edit-controls:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
 </style>
diff --git a/client/src/vue_components/show/config/script/ScriptLineViewer.vue b/client/src/vue_components/show/config/script/ScriptLineViewer.vue
index e2751e334..d901cf3d5 100644
--- a/client/src/vue_components/show/config/script/ScriptLineViewer.vue
+++ b/client/src/vue_components/show/config/script/ScriptLineViewer.vue
@@ -1,5 +1,6 @@
 <template>
   <b-row
+    class="script-line-row"
     :class="{
       'stage-direction': line.line_type === LINE_TYPES.STAGE_DIRECTION,
       'heading-padding': line.line_type === LINE_TYPES.DIALOGUE && needsHeadingsAll,
@@ -142,6 +143,7 @@
       </b-button-group>
       <b-dropdown
         v-else-if="canEdit && !IS_CUT_MODE"
+        class="script-edit-controls"
         split
         text="Edit"
         right
@@ -386,4 +388,9 @@ export default defineComponent({
 .cut-line-part {
   text-decoration: line-through;
 }
+.script-line-row:has(.script-edit-controls:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
 </style>

From 8e414e9c551dafb9850a8ea79b00ca66886c97bb Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Sun, 7 Jun 2026 22:50:07 +0100
Subject: [PATCH 2/4] Fix cut mode in V3 script editor (#1165)

* Fix cut mode in V3 script editor: clickable links and clean exit

Bug 1: canEdit was computed as `isEditor && !cutMode`, so lines were
never rendered as clickable cut anchors (required canEdit && isCutMode).
Fix: canEdit = isEditor only (matching V2 behaviour); all edit-only
surfaces already have independent !isCutMode guards.

Bug 2: stopEditing() always called emptyScript() + loadPage() causing a
blank-page flash. Also, currentEditor was not cleared synchronously, so
edit buttons briefly appeared after setCutMode(false) before the WS
response arrived. Fix: skip the reload in cut mode (tmpScript is never
modified), and clear currentEditor synchronously before sending
STOP_SCRIPT_EDIT.

Adds 6 Playwright E2E tests covering the full cut mode workflow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix Prettier formatting in ScriptEditor.vue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../e2e/tests/10-show-config-script.spec.ts   | 67 +++++++++++++++++++
 .../show/config/script/ScriptEditor.vue       | 15 +++--
 2 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/client-v3/e2e/tests/10-show-config-script.spec.ts b/client-v3/e2e/tests/10-show-config-script.spec.ts
index b32cf7608..e2b92d04f 100644
--- a/client-v3/e2e/tests/10-show-config-script.spec.ts
+++ b/client-v3/e2e/tests/10-show-config-script.spec.ts
@@ -120,6 +120,73 @@ test('saves a dialogue line to the script', async () => {
   ).toBeVisible({ timeout: 10_000 });
 });
 
+// ── Cut mode ──────────────────────────────────────────────────────────────
+
+test('enters cut mode', async () => {
+  await page.goto(`${UI_BASE}/show-config/script`);
+  await waitForAppReady(page);
+  await page.click('button:has-text("Cuts")');
+  await expect(page.locator('button:has-text("Stop Editing")')).toBeVisible({ timeout: 10_000 });
+});
+
+test('dialogue line becomes clickable in cut mode', async () => {
+  await expect(
+    page.locator('a.viewable-line-cut').filter({ hasText: 'To be or not to be' })
+  ).toBeVisible({ timeout: 5_000 });
+});
+
+test('clicking a line toggles cut styling', async () => {
+  await page.locator('a.viewable-line-cut').filter({ hasText: 'To be or not to be' }).click();
+  await expect(
+    page.locator('.cut-line-part').filter({ hasText: 'To be or not to be' })
+  ).toBeVisible({ timeout: 3_000 });
+});
+
+test('saves cuts', async () => {
+  await page.getByRole('button', { name: 'Save', exact: true }).click();
+  await expect(page.locator('.v-toast__text').filter({ hasText: /saved/i })).toBeVisible({
+    timeout: 5_000,
+  });
+});
+
+test('stops cut mode without blank-page flash', async () => {
+  // In cut mode the line is an anchor (.viewable-line-cut); verify it exists before stopping
+  await expect(
+    page.locator('.viewable-line-cut').filter({ hasText: 'To be or not to be' })
+  ).toBeVisible();
+
+  await page.click('button:has-text("Stop Editing")');
+
+  // Edit button reappears
+  await expect(page.getByRole('button', { name: 'Edit', exact: true })).toBeVisible({
+    timeout: 10_000,
+  });
+  // The saved line is still visible (no reload / blank flash)
+  await expect(
+    page.locator('.viewable-line').filter({ hasText: 'To be or not to be' })
+  ).toBeVisible();
+  // No edit controls are shown after stopping
+  await expect(page.locator('.script-edit-controls')).not.toBeVisible();
+});
+
+test('cut styling persists after re-entering cut mode', async () => {
+  await page.click('button:has-text("Cuts")');
+  await expect(page.locator('button:has-text("Stop Editing")')).toBeVisible({ timeout: 10_000 });
+  await expect(
+    page.locator('.cut-line-part').filter({ hasText: 'To be or not to be' })
+  ).toBeVisible({ timeout: 5_000 });
+  // Clean up: un-cut the line so later tests start from a known state
+  await page.locator('a.viewable-line-cut').filter({ hasText: 'To be or not to be' }).click();
+  await page.getByRole('button', { name: 'Save', exact: true }).click();
+  await expect(page.locator('.v-toast__text').filter({ hasText: /saved/i })).toBeVisible({
+    timeout: 5_000,
+  });
+  await page.click('button:has-text("Stop Editing")');
+  await expect(page.getByRole('button', { name: 'Edit', exact: true })).toBeVisible({
+    timeout: 10_000,
+  });
+});
+
 // ── Stage Direction Styles ────────────────────────────────────────────────
 
 test('switches to Stage Direction Styles sub-tab', async () => {
diff --git a/client-v3/src/components/show/config/script/ScriptEditor.vue b/client-v3/src/components/show/config/script/ScriptEditor.vue
index 44d98c963..ce862e05c 100644
--- a/client-v3/src/components/show/config/script/ScriptEditor.vue
+++ b/client-v3/src/components/show/config/script/ScriptEditor.vue
@@ -257,7 +257,7 @@ const isEditor = computed(
     wsStore.internalUUID !== null &&
     wsStore.internalUUID === scriptConfigStore.editStatus.currentEditor
 );
-const canEdit = computed(() => isEditor.value && !scriptConfigStore.cutMode);
+const canEdit = computed(() => isEditor.value);
 
 const saveProgressVariant = computed(() => {
   if (savingInProgress.value) return 'primary';
@@ -336,13 +336,20 @@ async function stopEditing(): Promise<void> {
     );
     if (!ok) return;
   }
+  const wasCutMode = scriptConfigStore.cutMode;
   editingLines.value.clear();
   exitBulkEditMode();
-  scriptConfigStore.emptyScript();
   linePartCuts.value = [...scriptStore.cuts];
-  sendObj({ OP: 'STOP_SCRIPT_EDIT', DATA: {} });
   scriptConfigStore.setCutMode(false);
-  await loadPage(currentPage.value);
+  scriptConfigStore.setEditStatus({
+    canRequestEdit: scriptConfigStore.editStatus.canRequestEdit,
+    currentEditor: null,
+  });
+  sendObj({ OP: 'STOP_SCRIPT_EDIT', DATA: {} });
+  if (!wasCutMode) {
+    scriptConfigStore.emptyScript();
+    await loadPage(currentPage.value);
+  }
 }
 
 async function loadPage(page: number): Promise<void> {

From f123b1795e4afd9bedcc5389eb2a606dc21c4165 Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Mon, 8 Jun 2026 01:14:34 +0100
Subject: [PATCH 3/4] Add rows per page selector to paginated tables (#1164)
 (#1167)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add rows per page selector to all paginated tables (#1164)

Adds a PaginationControls shared component to every paginated table in both
client/ (Vue 2) and client-v3/ (Vue 3) — options 10, 15, 25, 50, All with
15 as the default. Selecting "All" (value 0) shows all rows and hides the
page navigation. A usePagination composable bundles perPage + currentPage
refs with an auto-reset watcher for the Vue 3 client.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Extract pagination watch into paginationMixin (client/)

The rowsPerPage→currentPage reset watcher was duplicated across all
single-table components. A new paginationMixin centralises rowsPerPage,
currentPage and the watch in one place; components just declare
mixins: [paginationMixin] and drop the duplicated data/watch blocks.
ConfigSystem's non-standard perPage/currentPageClients fields were also
renamed to match the mixin, standardising its default from 5 to 15.
Multi-table components (PropsList, SceneryList, StageManager) retain
their own watches as they reset multiple independent page counters.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix pagination controls alignment and E2E test locators

- Add mb-0 to b-pagination in client/ (Bootstrap 4 reboot gives <ul>
  margin-bottom:1rem; applying mb-0 directly to the rendered <ul> removes it)
- Add :deep(.pagination){margin-bottom:0} in client-v3/ (BPagination wraps
  the <ul> in a <nav>; class on BPagination targets the nav, so the child
  ul's margin must be reset via scoped CSS to prevent it inflating the flex
  item's height and pushing the buttons above the centre line)
- Fix E2E strict-mode violation: scope 'Rows per page' label assertion to
  the PaginationControls container via nav[aria-controls="character-table"]
  parent, since BTabs keeps all tab panes in the DOM simultaneously
- Fix E2E third test: use nav[aria-controls="character-table"] directly
  (the nav IS the element with aria-controls; previous locator searched
  for a nav inside the nav, trivially matching zero elements)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Restore bottom spacing on PaginationControls via mb-3 on wrapper

The pagination ul's margin-bottom:1rem was removed to fix flex alignment,
but it was also providing visual breathing room below the controls. Add
mb-3 (=1rem) to the outer wrapper div to restore that spacing explicitly,
separating the two concerns.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Hide pagination controls when rows don't warrant them; fix E2E locators

Component behaviour:
- Entire PaginationControls hidden when totalRows ≤ smallest option (10);
  no point offering a rows-per-page selector when there isn't enough data
  to paginate even at the tightest setting
- Pagination nav hidden when totalRows ≤ perPage (all rows fit on one page)
  or when perPage = 0 (All selected)
- Both conditions derived from PER_PAGE_OPTIONS so the threshold stays in
  sync with the options array automatically

E2E fixes (06-show-config-characters.spec.ts):
- BVN renders BPagination as <ul role="menubar">, not <nav> — aria-controls
  lives on each <button class="page-link">, not on a nav wrapper; replaced
  all nav[aria-controls] locators with select#<id> and button[aria-controls]
- Added test verifying controls are hidden with 1 character (below threshold)
- Added loop that creates 10 extra characters (11 total) to bring totalRows
  above the minimum, then tests selector visibility, options, and nav
  show/hide behaviour end-to-end

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../tests/06-show-config-characters.spec.ts   | 56 +++++++++++++
 .../src/components/config/ConfigShows.vue     | 14 ++--
 .../src/components/config/ConfigSystem.vue    | 11 ++-
 .../components/shared/PaginationControls.vue  | 55 +++++++++++++
 .../config/acts_and_scenes/ConfigActs.vue     | 14 ++--
 .../config/acts_and_scenes/ConfigScenes.vue   | 14 ++--
 .../config/characters/CharacterGroups.vue     | 14 ++--
 .../components/show/config/mics/MicList.vue   | 13 ++--
 .../config/script/StageDirectionStyles.vue    | 13 ++--
 .../show/config/sessions/SessionTagList.vue   | 14 ++--
 .../components/show/config/stage/CrewList.vue | 13 ++--
 .../show/config/stage/PropsList.vue           | 24 +++---
 .../show/config/stage/SceneryList.vue         | 24 +++---
 .../show/config/stage/StageManager.vue        | 24 +++---
 .../user/settings/CueColourPreferences.vue    | 12 ++-
 .../user/settings/StageDirectionStyles.vue    | 12 ++-
 client-v3/src/composables/usePagination.ts    | 20 +++++
 .../src/views/show/config/ConfigCast.vue      | 14 ++--
 .../views/show/config/ConfigCharacters.vue    | 14 ++--
 .../src/views/show/config/ConfigCues.vue      | 14 ++--
 client/src/main.ts                            |  2 +
 client/src/mixins/paginationMixin.ts          | 15 ++++
 client/src/views/show/config/ConfigCast.vue   | 13 ++--
 .../views/show/config/ConfigCharacters.vue    | 13 ++--
 client/src/views/show/config/ConfigCues.vue   | 13 ++--
 .../src/vue_components/config/ConfigShows.vue | 12 ++-
 .../vue_components/config/ConfigSystem.vue    | 15 ++--
 .../shared/PaginationControls.vue             | 78 +++++++++++++++++++
 .../config/acts_and_scenes/ConfigActs.vue     | 13 ++--
 .../config/acts_and_scenes/ConfigScenes.vue   | 13 ++--
 .../config/characters/CharacterGroups.vue     | 13 ++--
 .../show/config/mics/MicList.vue              | 12 ++-
 .../show/config/sessions/SessionTagList.vue   | 12 ++-
 .../show/config/stage/CrewList.vue            | 13 ++--
 .../show/config/stage/PropsList.vue           | 22 +++---
 .../show/config/stage/SceneryList.vue         | 22 +++---
 .../show/config/stage/StageManager.vue        | 22 +++---
 37 files changed, 441 insertions(+), 251 deletions(-)
 create mode 100644 client-v3/src/components/shared/PaginationControls.vue
 create mode 100644 client-v3/src/composables/usePagination.ts
 create mode 100644 client/src/mixins/paginationMixin.ts
 create mode 100644 client/src/vue_components/shared/PaginationControls.vue

diff --git a/client-v3/e2e/tests/06-show-config-characters.spec.ts b/client-v3/e2e/tests/06-show-config-characters.spec.ts
index e6e957bcf..c2207ffb9 100644
--- a/client-v3/e2e/tests/06-show-config-characters.spec.ts
+++ b/client-v3/e2e/tests/06-show-config-characters.spec.ts
@@ -83,6 +83,62 @@ test('deletes a character', async () => {
   });
 });
 
+// ── Rows per page selector ─────────────────────────────────────────────────
+
+test('rows per page selector is hidden when row count does not exceed minimum', async () => {
+  // Only Hamlet exists (1 row) — controls hidden when totalRows ≤ 10 (smallest option)
+  await expect(page.locator('select#character-table-per-page')).not.toBeVisible();
+});
+
+test('creates enough characters for pagination controls to appear', async () => {
+  for (const name of [
+    'Alice',
+    'Bob',
+    'Carol',
+    'Dave',
+    'Eve',
+    'Frank',
+    'Grace',
+    'Henry',
+    'Iris',
+    'Jack',
+  ]) {
+    await page.getByRole('button', { name: 'New Character', exact: true }).click();
+    await waitForModal(page, 'New Character');
+    await page.fill('.modal.show input[type="text"]', name);
+    await confirmModal(page);
+    await waitForModalClosed(page);
+  }
+  // 11 characters total (Hamlet + 10) — controls should now appear
+  await expect(page.locator('select#character-table-per-page')).toBeVisible();
+});
+
+test('rows per page selector has correct default', async () => {
+  await expect(page.locator('label[for="character-table-per-page"]')).toBeVisible();
+  await expect(page.locator('select#character-table-per-page')).toHaveValue('15');
+});
+
+test('rows per page selector has all expected options', async () => {
+  const options = await page
+    .locator('select#character-table-per-page')
+    .locator('option')
+    .allTextContents();
+  expect(options).toEqual(expect.arrayContaining(['10', '15', '25', '50', 'All']));
+});
+
+test('pagination nav shows when rows exceed per-page and hides on All', async () => {
+  // 11 rows, default perPage=15: nav hidden (11 ≤ 15)
+  await expect(page.locator('button[aria-controls="character-table"]').first()).not.toBeVisible();
+  // Change to 10 rows/page: nav appears (11 > 10)
+  await page.locator('select#character-table-per-page').selectOption('10');
+  await expect(page.locator('button[aria-controls="character-table"]').first()).toBeVisible();
+  // Select All: nav disappears
+  await page.locator('select#character-table-per-page').selectOption('0');
+  await expect(page.locator('button[aria-controls="character-table"]').first()).not.toBeVisible();
+  // Reset to default
+  await page.locator('select#character-table-per-page').selectOption('15');
+});
+
 // ── Character Merge ────────────────────────────────────────────────────────
 
 test('Merge button is visible for each character row', async () => {
diff --git a/client-v3/src/components/config/ConfigShows.vue b/client-v3/src/components/config/ConfigShows.vue
index 071be64ec..62ca7a9d9 100644
--- a/client-v3/src/components/config/ConfigShows.vue
+++ b/client-v3/src/components/config/ConfigShows.vue
@@ -7,7 +7,7 @@
             id="shows-table"
             :items="availableShows"
             :fields="showFields"
-            :per-page="rowsPerPage"
+            :per-page="perPage"
             :current-page="currentPage"
           >
             <template #head(btn)>
@@ -37,13 +37,11 @@
               </BButtonGroup>
             </template>
           </BTable>
-          <BPagination
-            v-show="availableShows.length > rowsPerPage"
-            v-model="currentPage"
+          <PaginationControls
+            v-model:per-page="perPage"
+            v-model:current-page="currentPage"
             :total-rows="availableShows.length"
-            :per-page="rowsPerPage"
             aria-controls="shows-table"
-            class="justify-content-center"
           />
         </BCol>
       </BRow>
@@ -129,6 +127,7 @@ import { makeURL } from '@/js/utils';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import { toast } from '@/js/toast';
 import type { Show } from '@/types/api/show';
 
@@ -144,8 +143,7 @@ const isSubmittingLoad = ref(false);
 const isSubmittingShow = ref(false);
 const isDeleting = ref(false);
 const deletingId = ref<number | null>(null);
-const currentPage = ref(1);
-const rowsPerPage = 15;
+const { perPage, currentPage } = usePagination();
 
 const showFields = [
   { key: 'id', label: 'ID' },
diff --git a/client-v3/src/components/config/ConfigSystem.vue b/client-v3/src/components/config/ConfigSystem.vue
index ae5e74134..ecdb107a7 100644
--- a/client-v3/src/components/config/ConfigSystem.vue
+++ b/client-v3/src/components/config/ConfigSystem.vue
@@ -73,12 +73,11 @@
         :current-page="currentPage"
         small
       />
-      <BPagination
-        v-model="currentPage"
+      <PaginationControls
+        v-model:per-page="perPage"
+        v-model:current-page="currentPage"
         :total-rows="connectedSessions.length"
-        :per-page="perPage"
         aria-controls="connected-clients-table"
-        class="justify-content-center"
       />
     </BModal>
   </div>
@@ -92,6 +91,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { BModal } from 'bootstrap-vue-next';
 import { useSystemStore } from '@/stores/system';
+import { usePagination } from '@/composables/usePagination';
 import { toast } from '@/js/toast';
 
 const systemStore = useSystemStore();
@@ -99,8 +99,7 @@ const { connectedSessions, versionStatus, serverInfo } = storeToRefs(systemStore
 
 const loading = ref(true);
 const isCheckingVersion = ref(false);
-const currentPage = ref(1);
-const perPage = 5;
+const { perPage, currentPage } = usePagination();
 const clientsModal = ref<InstanceType<typeof BModal>>();
 
 const clientFields = [
diff --git a/client-v3/src/components/shared/PaginationControls.vue b/client-v3/src/components/shared/PaginationControls.vue
new file mode 100644
index 000000000..1f37e7ca6
--- /dev/null
+++ b/client-v3/src/components/shared/PaginationControls.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    v-if="totalRows > minPerPageOption"
+    class="d-flex align-items-center justify-content-center gap-3 mt-2 mb-3"
+  >
+    <div class="d-flex align-items-center gap-2">
+      <label class="mb-0 text-nowrap" :for="selectId">Rows per page</label>
+      <BFormSelect
+        :id="selectId"
+        v-model="perPage"
+        :options="PER_PAGE_OPTIONS"
+        size="sm"
+        style="width: auto"
+      />
+    </div>
+    <BPagination
+      v-show="perPage > 0 && totalRows > perPage"
+      v-model="currentPage"
+      :total-rows="totalRows"
+      :per-page="perPage"
+      :aria-controls="ariaControls"
+      class="mb-0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { PER_PAGE_OPTIONS } from '@/composables/usePagination';
+
+const props = withDefaults(
+  defineProps<{
+    totalRows: number;
+    ariaControls?: string;
+  }>(),
+  { ariaControls: undefined }
+);
+
+const perPage = defineModel<number>('perPage', { required: true });
+const currentPage = defineModel<number>('currentPage', { required: true });
+
+const selectId = computed(() =>
+  props.ariaControls ? `${props.ariaControls}-per-page` : 'per-page-select'
+);
+
+const minPerPageOption = Math.min(
+  ...PER_PAGE_OPTIONS.filter((o) => o.value > 0).map((o) => o.value)
+);
+</script>
+
+<style scoped>
+:deep(.pagination) {
+  margin-bottom: 0;
+}
+</style>
diff --git a/client-v3/src/components/show/config/acts_and_scenes/ConfigActs.vue b/client-v3/src/components/show/config/acts_and_scenes/ConfigActs.vue
index 850df7cba..9bb104c4c 100644
--- a/client-v3/src/components/show/config/acts_and_scenes/ConfigActs.vue
+++ b/client-v3/src/components/show/config/acts_and_scenes/ConfigActs.vue
@@ -4,7 +4,7 @@
       id="acts-table"
       :items="actTableItems"
       :fields="actFields"
-      :per-page="rowsPerPage"
+      :per-page="perPage"
       :current-page="currentPage"
       show-empty
     >
@@ -46,13 +46,11 @@
         </BButtonGroup>
       </template>
     </BTable>
-    <BPagination
-      v-show="actTableItems.length > rowsPerPage"
-      v-model="currentPage"
+    <PaginationControls
+      v-model:per-page="perPage"
+      v-model:current-page="currentPage"
       :total-rows="actTableItems.length"
-      :per-page="rowsPerPage"
       aria-controls="acts-table"
-      class="justify-content-center"
     />
 
     <BModal
@@ -136,6 +134,7 @@ import log from 'loglevel';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import type { Act } from '@/types/api/show';
 
 const systemStore = useSystemStore();
@@ -143,8 +142,7 @@ const showStore = useShowStore();
 const { confirm } = useConfirm();
 
 const loading = ref(true);
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const submittingNewAct = ref(false);
 const submittingEditAct = ref(false);
 const deletingAct = ref(false);
diff --git a/client-v3/src/components/show/config/acts_and_scenes/ConfigScenes.vue b/client-v3/src/components/show/config/acts_and_scenes/ConfigScenes.vue
index a23a89c93..1d7680ffd 100644
--- a/client-v3/src/components/show/config/acts_and_scenes/ConfigScenes.vue
+++ b/client-v3/src/components/show/config/acts_and_scenes/ConfigScenes.vue
@@ -6,7 +6,7 @@
           id="scene-table"
           :items="sceneTableItems"
           :fields="sceneFields"
-          :per-page="rowsPerPage"
+          :per-page="perPage"
           :current-page="currentPage"
           show-empty
         >
@@ -49,13 +49,11 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-show="sceneTableItems.length > rowsPerPage"
-          v-model="currentPage"
+        <PaginationControls
+          v-model:per-page="perPage"
+          v-model:current-page="currentPage"
           :total-rows="sceneTableItems.length"
-          :per-page="rowsPerPage"
           aria-controls="scene-table"
-          class="justify-content-center"
         />
       </BCol>
       <BCol cols="4">
@@ -200,6 +198,7 @@ import log from 'loglevel';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import type { Scene } from '@/types/api/show';
 
 const systemStore = useSystemStore();
@@ -207,8 +206,7 @@ const showStore = useShowStore();
 const { confirm } = useConfirm();
 
 const loading = ref(true);
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const submittingNewScene = ref(false);
 const submittingEditScene = ref(false);
 const submittingFirstScene = ref(false);
diff --git a/client-v3/src/components/show/config/characters/CharacterGroups.vue b/client-v3/src/components/show/config/characters/CharacterGroups.vue
index 848d12611..68a1f1956 100644
--- a/client-v3/src/components/show/config/characters/CharacterGroups.vue
+++ b/client-v3/src/components/show/config/characters/CharacterGroups.vue
@@ -4,7 +4,7 @@
       id="character-group-table"
       :items="showStore.characterGroupList"
       :fields="characterGroupFields"
-      :per-page="rowsPerPage"
+      :per-page="perPage"
       :current-page="currentPage"
       show-empty
     >
@@ -48,13 +48,11 @@
         </BButtonGroup>
       </template>
     </BTable>
-    <BPagination
-      v-show="showStore.characterGroupList.length > rowsPerPage"
-      v-model="currentPage"
+    <PaginationControls
+      v-model:per-page="perPage"
+      v-model:current-page="currentPage"
       :total-rows="showStore.characterGroupList.length"
-      :per-page="rowsPerPage"
       aria-controls="character-group-table"
-      class="justify-content-center"
     />
 
     <BModal
@@ -140,6 +138,7 @@ import log from 'loglevel';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import type { Character, CharacterGroup } from '@/types/api/show';
 
 const systemStore = useSystemStore();
@@ -147,8 +146,7 @@ const showStore = useShowStore();
 const { confirm } = useConfirm();
 
 const loading = ref(true);
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const submittingNewGroup = ref(false);
 const submittingEditGroup = ref(false);
 const deletingGroup = ref(false);
diff --git a/client-v3/src/components/show/config/mics/MicList.vue b/client-v3/src/components/show/config/mics/MicList.vue
index 9954daf78..005e886a1 100644
--- a/client-v3/src/components/show/config/mics/MicList.vue
+++ b/client-v3/src/components/show/config/mics/MicList.vue
@@ -5,7 +5,7 @@
         <BTable
           :items="showStore.microphones"
           :fields="fields"
-          :per-page="rowsPerPage"
+          :per-page="perPage"
           :current-page="currentPage"
           show-empty
         >
@@ -33,11 +33,10 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-if="showStore.microphones.length > rowsPerPage"
-          v-model="currentPage"
+        <PaginationControls
+          v-model:per-page="perPage"
+          v-model:current-page="currentPage"
           :total-rows="showStore.microphones.length"
-          :per-page="rowsPerPage"
         />
       </BCol>
     </BRow>
@@ -94,6 +93,7 @@ import { required, helpers } from '@vuelidate/validators';
 import { useShowStore } from '@/stores/show';
 import { useSystemStore } from '@/stores/system';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import { useFormValidation } from '@/composables/useFormValidation';
 import type { Microphone } from '@/types/api/microphones';
 import log from 'loglevel';
@@ -103,8 +103,7 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const isSubmitting = ref(false);
 
 const newModal = ref<InstanceType<typeof BModal>>();
diff --git a/client-v3/src/components/show/config/script/StageDirectionStyles.vue b/client-v3/src/components/show/config/script/StageDirectionStyles.vue
index 7f04c92e7..a23180d72 100644
--- a/client-v3/src/components/show/config/script/StageDirectionStyles.vue
+++ b/client-v3/src/components/show/config/script/StageDirectionStyles.vue
@@ -5,7 +5,7 @@
         <BTable
           :items="scriptStore.stageDirectionStyles"
           :fields="columns"
-          :per-page="rowsPerPage"
+          :per-page="perPage"
           :current-page="currentPage"
           show-empty
         >
@@ -53,11 +53,10 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-if="scriptStore.stageDirectionStyles.length > rowsPerPage"
-          v-model="currentPage"
+        <PaginationControls
+          v-model:per-page="perPage"
+          v-model:current-page="currentPage"
           :total-rows="scriptStore.stageDirectionStyles.length"
-          :per-page="rowsPerPage"
         />
       </BCol>
     </BRow>
@@ -147,6 +146,7 @@ import log from 'loglevel';
 import { useScriptStore } from '@/stores/script';
 import { useSystemStore } from '@/stores/system';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import { useFormValidation } from '@/composables/useFormValidation';
 import type { StageDirectionStyle } from '@/types/api/script';
 import { toast } from '@/js/toast';
@@ -156,8 +156,7 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const isSubmittingNew = ref(false);
 const isSubmittingEdit = ref(false);
 const isDeleting = ref(false);
diff --git a/client-v3/src/components/show/config/sessions/SessionTagList.vue b/client-v3/src/components/show/config/sessions/SessionTagList.vue
index 40a43ad20..a0e6b34b6 100644
--- a/client-v3/src/components/show/config/sessions/SessionTagList.vue
+++ b/client-v3/src/components/show/config/sessions/SessionTagList.vue
@@ -4,7 +4,7 @@
       id="session-tags-table"
       :items="showStore.sessionTags"
       :fields="tagFields"
-      :per-page="rowsPerPage"
+      :per-page="perPage"
       :current-page="currentPage"
       show-empty
     >
@@ -39,13 +39,11 @@
         </BButtonGroup>
       </template>
     </BTable>
-    <BPagination
-      v-show="showStore.sessionTags.length > rowsPerPage"
-      v-model="currentPage"
+    <PaginationControls
+      v-model:per-page="perPage"
+      v-model:current-page="currentPage"
       :total-rows="showStore.sessionTags.length"
-      :per-page="rowsPerPage"
       aria-controls="session-tags-table"
-      class="justify-content-center"
     />
 
     <BModal
@@ -198,14 +196,14 @@ import log from 'loglevel';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import type { SessionTag } from '@/types/api/session';
 
 const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const isSubmittingNewTag = ref(false);
 const isSubmittingEditTag = ref(false);
 const isSubmittingDeleteTag = ref(false);
diff --git a/client-v3/src/components/show/config/stage/CrewList.vue b/client-v3/src/components/show/config/stage/CrewList.vue
index 7efd97f6f..b1be46b3d 100644
--- a/client-v3/src/components/show/config/stage/CrewList.vue
+++ b/client-v3/src/components/show/config/stage/CrewList.vue
@@ -5,7 +5,7 @@
         <BTable
           :items="stageStore.crewList"
           :fields="fields"
-          :per-page="rowsPerPage"
+          :per-page="perPage"
           :current-page="currentPage"
           show-empty
         >
@@ -29,11 +29,10 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-if="stageStore.crewList.length > rowsPerPage"
-          v-model="currentPage"
+        <PaginationControls
+          v-model:per-page="perPage"
+          v-model:current-page="currentPage"
           :total-rows="stageStore.crewList.length"
-          :per-page="rowsPerPage"
         />
       </BCol>
     </BRow>
@@ -102,6 +101,7 @@ import { required } from '@vuelidate/validators';
 import { useStageStore } from '@/stores/stage';
 import { useSystemStore } from '@/stores/system';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import { useFormValidation } from '@/composables/useFormValidation';
 import type { Crew } from '@/types/api/stage';
 import log from 'loglevel';
@@ -111,8 +111,7 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const isSubmitting = ref(false);
 
 const newModal = ref<InstanceType<typeof BModal>>();
diff --git a/client-v3/src/components/show/config/stage/PropsList.vue b/client-v3/src/components/show/config/stage/PropsList.vue
index 3eec6db21..7e65e62a3 100644
--- a/client-v3/src/components/show/config/stage/PropsList.vue
+++ b/client-v3/src/components/show/config/stage/PropsList.vue
@@ -6,7 +6,7 @@
         <BTable
           :items="stageStore.propTypes"
           :fields="propTypeFields"
-          :per-page="rowsPerPage"
+          :per-page="propTypesPerPage"
           :current-page="currentPropTypesPage"
           show-empty
         >
@@ -38,11 +38,10 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-if="stageStore.propTypes.length > rowsPerPage"
-          v-model="currentPropTypesPage"
+        <PaginationControls
+          v-model:per-page="propTypesPerPage"
+          v-model:current-page="currentPropTypesPage"
           :total-rows="stageStore.propTypes.length"
-          :per-page="rowsPerPage"
         />
       </BCol>
       <BCol cols="7">
@@ -50,7 +49,7 @@
         <BTable
           :items="stageStore.propsList"
           :fields="propsFields"
-          :per-page="rowsPerPage"
+          :per-page="propsPerPage"
           :current-page="currentPropsPage"
           show-empty
         >
@@ -81,11 +80,10 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-if="stageStore.propsList.length > rowsPerPage"
-          v-model="currentPropsPage"
+        <PaginationControls
+          v-model:per-page="propsPerPage"
+          v-model:current-page="currentPropsPage"
           :total-rows="stageStore.propsList.length"
-          :per-page="rowsPerPage"
         />
       </BCol>
     </BRow>
@@ -212,6 +210,7 @@ import { required, helpers } from '@vuelidate/validators';
 import { useStageStore } from '@/stores/stage';
 import { useSystemStore } from '@/stores/system';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import { useFormValidation } from '@/composables/useFormValidation';
 import type { PropType, Props } from '@/types/api/stage';
 import log from 'loglevel';
@@ -221,9 +220,8 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const rowsPerPage = 15;
-const currentPropTypesPage = ref(1);
-const currentPropsPage = ref(1);
+const { perPage: propTypesPerPage, currentPage: currentPropTypesPage } = usePagination();
+const { perPage: propsPerPage, currentPage: currentPropsPage } = usePagination();
 const isSubmitting = ref(false);
 
 const newPropTypeModal = ref<InstanceType<typeof BModal>>();
diff --git a/client-v3/src/components/show/config/stage/SceneryList.vue b/client-v3/src/components/show/config/stage/SceneryList.vue
index 272d6cf2f..bad527bb5 100644
--- a/client-v3/src/components/show/config/stage/SceneryList.vue
+++ b/client-v3/src/components/show/config/stage/SceneryList.vue
@@ -6,7 +6,7 @@
         <BTable
           :items="stageStore.sceneryTypes"
           :fields="sceneryTypeFields"
-          :per-page="rowsPerPage"
+          :per-page="sceneryTypesPerPage"
           :current-page="currentSceneryTypesPage"
           show-empty
         >
@@ -38,11 +38,10 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-if="stageStore.sceneryTypes.length > rowsPerPage"
-          v-model="currentSceneryTypesPage"
+        <PaginationControls
+          v-model:per-page="sceneryTypesPerPage"
+          v-model:current-page="currentSceneryTypesPage"
           :total-rows="stageStore.sceneryTypes.length"
-          :per-page="rowsPerPage"
         />
       </BCol>
       <BCol cols="7">
@@ -50,7 +49,7 @@
         <BTable
           :items="stageStore.sceneryList"
           :fields="sceneryFields"
-          :per-page="rowsPerPage"
+          :per-page="sceneryPerPage"
           :current-page="currentSceneryPage"
           show-empty
         >
@@ -85,11 +84,10 @@
             </BButtonGroup>
           </template>
         </BTable>
-        <BPagination
-          v-if="stageStore.sceneryList.length > rowsPerPage"
-          v-model="currentSceneryPage"
+        <PaginationControls
+          v-model:per-page="sceneryPerPage"
+          v-model:current-page="currentSceneryPage"
           :total-rows="stageStore.sceneryList.length"
-          :per-page="rowsPerPage"
         />
       </BCol>
     </BRow>
@@ -214,6 +212,7 @@ import { required, helpers } from '@vuelidate/validators';
 import { useStageStore } from '@/stores/stage';
 import { useSystemStore } from '@/stores/system';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import { useFormValidation } from '@/composables/useFormValidation';
 import type { SceneryType, Scenery } from '@/types/api/stage';
 import log from 'loglevel';
@@ -223,9 +222,8 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const rowsPerPage = 15;
-const currentSceneryTypesPage = ref(1);
-const currentSceneryPage = ref(1);
+const { perPage: sceneryTypesPerPage, currentPage: currentSceneryTypesPage } = usePagination();
+const { perPage: sceneryPerPage, currentPage: currentSceneryPage } = usePagination();
 const isSubmitting = ref(false);
 
 const newSceneryTypeModal = ref<InstanceType<typeof BModal>>();
diff --git a/client-v3/src/components/show/config/stage/StageManager.vue b/client-v3/src/components/show/config/stage/StageManager.vue
index d5e6f61a7..cbd298eda 100644
--- a/client-v3/src/components/show/config/stage/StageManager.vue
+++ b/client-v3/src/components/show/config/stage/StageManager.vue
@@ -65,7 +65,7 @@
                 <BTable
                   :items="currentSceneSceneryAllocations"
                   :fields="sceneryAllocFields"
-                  :per-page="rowsPerPage"
+                  :per-page="sceneryAllocPerPage"
                   :current-page="currentSceneryAllocPage"
                   show-empty
                   empty-text="No scenery allocated to this scene"
@@ -86,11 +86,10 @@
                     </BButton>
                   </template>
                 </BTable>
-                <BPagination
-                  v-if="currentSceneSceneryAllocations.length > rowsPerPage"
-                  v-model="currentSceneryAllocPage"
+                <PaginationControls
+                  v-model:per-page="sceneryAllocPerPage"
+                  v-model:current-page="currentSceneryAllocPage"
                   :total-rows="currentSceneSceneryAllocations.length"
-                  :per-page="rowsPerPage"
                 />
               </BCol>
               <BCol cols="6">
@@ -98,7 +97,7 @@
                 <BTable
                   :items="currentScenePropsAllocations"
                   :fields="propsAllocFields"
-                  :per-page="rowsPerPage"
+                  :per-page="propsAllocPerPage"
                   :current-page="currentPropsAllocPage"
                   show-empty
                   empty-text="No props allocated to this scene"
@@ -119,11 +118,10 @@
                     </BButton>
                   </template>
                 </BTable>
-                <BPagination
-                  v-if="currentScenePropsAllocations.length > rowsPerPage"
-                  v-model="currentPropsAllocPage"
+                <PaginationControls
+                  v-model:per-page="propsAllocPerPage"
+                  v-model:current-page="currentPropsAllocPage"
                   :total-rows="currentScenePropsAllocations.length"
-                  :per-page="rowsPerPage"
                 />
               </BCol>
             </BRow>
@@ -433,6 +431,7 @@ import { required, helpers } from '@vuelidate/validators';
 import { useStageStore } from '@/stores/stage';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import { useFormValidation } from '@/composables/useFormValidation';
 import { findOrphanedAssignments } from '@/js/blockOrphanUtils';
 import type { SceneryAllocation, PropsAllocation, CrewAssignment, Crew } from '@/types/api/stage';
@@ -451,9 +450,8 @@ const setExpanded = ref(false);
 const strikeExpanded = ref(false);
 const savingAssignment = ref(false);
 const newCrewSelections = ref<Record<string, number | null>>({});
-const rowsPerPage = 10;
-const currentSceneryAllocPage = ref(1);
-const currentPropsAllocPage = ref(1);
+const { perPage: sceneryAllocPerPage, currentPage: currentSceneryAllocPage } = usePagination();
+const { perPage: propsAllocPerPage, currentPage: currentPropsAllocPage } = usePagination();
 
 const goToSceneModal = ref<InstanceType<typeof BModal>>();
 const addSceneryModal = ref<InstanceType<typeof BModal>>();
diff --git a/client-v3/src/components/user/settings/CueColourPreferences.vue b/client-v3/src/components/user/settings/CueColourPreferences.vue
index d53841c99..8b36b354c 100644
--- a/client-v3/src/components/user/settings/CueColourPreferences.vue
+++ b/client-v3/src/components/user/settings/CueColourPreferences.vue
@@ -5,7 +5,7 @@
         id="cue-colour-table"
         :items="tableData"
         :fields="columns"
-        :per-page="rowsPerPage"
+        :per-page="perPage"
         :current-page="currentPage"
         show-empty
       >
@@ -54,6 +54,12 @@
           </BButtonGroup>
         </template>
       </BTable>
+      <PaginationControls
+        v-model:per-page="perPage"
+        v-model:current-page="currentPage"
+        :total-rows="tableData.length"
+        aria-controls="cue-colour-table"
+      />
     </template>
     <BAlert v-else :model-value="true" variant="danger">No show loaded.</BAlert>
 
@@ -169,6 +175,7 @@ import log from 'loglevel';
 import { useUserStore } from '@/stores/user';
 import { useSystemStore } from '@/stores/system';
 import { useFormValidation } from '@/composables/useFormValidation';
+import { usePagination } from '@/composables/usePagination';
 import type { CueType } from '@/types/api/cues';
 
 const userStore = useUserStore();
@@ -180,8 +187,7 @@ const columns = [
   { key: 'example', label: 'Example Cue Button' },
   { key: 'btn', label: '' },
 ];
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 
 const cueTypes = ref<CueType[]>([]);
 const isSubmittingNew = ref(false);
diff --git a/client-v3/src/components/user/settings/StageDirectionStyles.vue b/client-v3/src/components/user/settings/StageDirectionStyles.vue
index 31d6ffbfb..a0bcc42ba 100644
--- a/client-v3/src/components/user/settings/StageDirectionStyles.vue
+++ b/client-v3/src/components/user/settings/StageDirectionStyles.vue
@@ -5,7 +5,7 @@
         id="stage-directions-table"
         :items="tableData"
         :fields="columns"
-        :per-page="rowsPerPage"
+        :per-page="perPage"
         :current-page="currentPage"
         show-empty
       >
@@ -54,6 +54,12 @@
           </BButtonGroup>
         </template>
       </BTable>
+      <PaginationControls
+        v-model:per-page="perPage"
+        v-model:current-page="currentPage"
+        :total-rows="tableData.length"
+        aria-controls="stage-directions-table"
+      />
     </template>
     <BAlert v-else :model-value="true" variant="danger">No show loaded.</BAlert>
 
@@ -243,6 +249,7 @@ import { makeURL } from '@/js/utils';
 import { useUserStore } from '@/stores/user';
 import { useSystemStore } from '@/stores/system';
 import { useFormValidation } from '@/composables/useFormValidation';
+import { usePagination } from '@/composables/usePagination';
 import type { StageDirectionStyle } from '@/types/api/script';
 
 interface StyleOption {
@@ -266,8 +273,7 @@ const columns = [
   { key: 'example', label: 'Example Stage Direction' },
   { key: 'btn', label: '' },
 ];
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 
 const stageDirectionStyles = ref<StageDirectionStyle[]>([]);
 const isSubmittingNew = ref(false);
diff --git a/client-v3/src/composables/usePagination.ts b/client-v3/src/composables/usePagination.ts
new file mode 100644
index 000000000..4a6e1ca30
--- /dev/null
+++ b/client-v3/src/composables/usePagination.ts
@@ -0,0 +1,20 @@
+import { ref, watch } from 'vue';
+
+export const PER_PAGE_OPTIONS = [
+  { value: 10, text: '10' },
+  { value: 15, text: '15' },
+  { value: 25, text: '25' },
+  { value: 50, text: '50' },
+  { value: 0, text: 'All' },
+] as const;
+
+export function usePagination(defaultPerPage = 15) {
+  const perPage = ref(defaultPerPage);
+  const currentPage = ref(1);
+
+  watch(perPage, () => {
+    currentPage.value = 1;
+  });
+
+  return { perPage, currentPage };
+}
diff --git a/client-v3/src/views/show/config/ConfigCast.vue b/client-v3/src/views/show/config/ConfigCast.vue
index accb669c4..d3bc61316 100644
--- a/client-v3/src/views/show/config/ConfigCast.vue
+++ b/client-v3/src/views/show/config/ConfigCast.vue
@@ -8,7 +8,7 @@
               id="cast-table"
               :items="showStore.castList"
               :fields="castFields"
-              :per-page="rowsPerPage"
+              :per-page="perPage"
               :current-page="currentPage"
               show-empty
             >
@@ -40,13 +40,11 @@
                 </BButtonGroup>
               </template>
             </BTable>
-            <BPagination
-              v-show="showStore.castList.length > rowsPerPage"
-              v-model="currentPage"
+            <PaginationControls
+              v-model:per-page="perPage"
+              v-model:current-page="currentPage"
               :total-rows="showStore.castList.length"
-              :per-page="rowsPerPage"
               aria-controls="cast-table"
-              class="justify-content-center"
             />
           </BTab>
           <BTab title="Line Counts">
@@ -126,6 +124,7 @@ import log from 'loglevel';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import CastLineStats from '@/components/show/config/cast/CastLineStats.vue';
 import type { Cast } from '@/types/api/show';
 
@@ -133,8 +132,7 @@ const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const submittingNewCast = ref(false);
 const submittingEditCast = ref(false);
 const deletingCast = ref(false);
diff --git a/client-v3/src/views/show/config/ConfigCharacters.vue b/client-v3/src/views/show/config/ConfigCharacters.vue
index 41c9ddc00..b72a6b604 100644
--- a/client-v3/src/views/show/config/ConfigCharacters.vue
+++ b/client-v3/src/views/show/config/ConfigCharacters.vue
@@ -8,7 +8,7 @@
               id="character-table"
               :items="showStore.characterList"
               :fields="characterFields"
-              :per-page="rowsPerPage"
+              :per-page="perPage"
               :current-page="currentPage"
               show-empty
             >
@@ -55,13 +55,11 @@
                 </BButtonGroup>
               </template>
             </BTable>
-            <BPagination
-              v-show="showStore.characterList.length > rowsPerPage"
-              v-model="currentPage"
+            <PaginationControls
+              v-model:per-page="perPage"
+              v-model:current-page="currentPage"
               :total-rows="showStore.characterList.length"
-              :per-page="rowsPerPage"
               aria-controls="character-table"
-              class="justify-content-center"
             />
           </BTab>
           <BTab title="Character Groups">
@@ -180,6 +178,7 @@ import 'vue-multiselect/dist/vue-multiselect.css';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import CharacterGroups from '@/components/show/config/characters/CharacterGroups.vue';
 import CharacterLineStats from '@/components/show/config/characters/CharacterLineStats.vue';
 import type { Character } from '@/types/api/show';
@@ -188,8 +187,7 @@ const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const submittingNewCharacter = ref(false);
 const submittingEditCharacter = ref(false);
 const deletingCharacter = ref(false);
diff --git a/client-v3/src/views/show/config/ConfigCues.vue b/client-v3/src/views/show/config/ConfigCues.vue
index 9326a1e2c..9958698f9 100644
--- a/client-v3/src/views/show/config/ConfigCues.vue
+++ b/client-v3/src/views/show/config/ConfigCues.vue
@@ -8,7 +8,7 @@
               id="cue-types-table"
               :items="showStore.cueTypes"
               :fields="cueTypeFields"
-              :per-page="rowsPerPage"
+              :per-page="perPage"
               :current-page="currentPage"
               show-empty
             >
@@ -50,13 +50,11 @@
                 </BButtonGroup>
               </template>
             </BTable>
-            <BPagination
-              v-show="showStore.cueTypes.length > rowsPerPage"
-              v-model="currentPage"
+            <PaginationControls
+              v-model:per-page="perPage"
+              v-model:current-page="currentPage"
               :total-rows="showStore.cueTypes.length"
-              :per-page="rowsPerPage"
               aria-controls="cue-types-table"
-              class="justify-content-center"
             />
           </BTab>
           <BTab title="Cue Configuration">
@@ -221,6 +219,7 @@ import log from 'loglevel';
 import { useSystemStore } from '@/stores/system';
 import { useShowStore } from '@/stores/show';
 import { useConfirm } from '@/composables/useConfirm';
+import { usePagination } from '@/composables/usePagination';
 import CueCountStats from '@/components/show/config/cues/CueCountStats.vue';
 import CueEditor from '@/components/show/config/cues/CueEditor.vue';
 import type { CueType } from '@/types/api/cues';
@@ -229,8 +228,7 @@ const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const rowsPerPage = 15;
-const currentPage = ref(1);
+const { perPage, currentPage } = usePagination();
 const submittingNewCueType = ref(false);
 const submittingEditCueType = ref(false);
 const deletingCueType = ref(false);
diff --git a/client/src/main.ts b/client/src/main.ts
index c322f39ad..a20913a7e 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -6,6 +6,7 @@ import Vuelidate from 'vuelidate';
 import ToastPlugin from 'vue-toast-notification';
 import Multiselect from 'vue-multiselect';
 import { Splitpanes, Pane } from 'splitpanes';
+import PaginationControls from '@/vue_components/shared/PaginationControls.vue';
 
 import store from '@/store/store';
 import App from './App.vue';
@@ -30,6 +31,7 @@ Vue.use(IconsPlugin);
 Vue.component('MultiSelect', Multiselect);
 Vue.component('SplitPanes', Splitpanes);
 Vue.component('SplitPane', Pane);
+Vue.component('PaginationControls', PaginationControls);
 
 Vue.use(Vuex);
 Vue.use(Vuelidate as any); // @types/vuelidate bundles its own Vue copy that conflicts with main package
diff --git a/client/src/mixins/paginationMixin.ts b/client/src/mixins/paginationMixin.ts
new file mode 100644
index 000000000..3ffd58a35
--- /dev/null
+++ b/client/src/mixins/paginationMixin.ts
@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  data() {
+    return {
+      rowsPerPage: 15 as number,
+      currentPage: 1 as number,
+    };
+  },
+  watch: {
+    rowsPerPage(this: { currentPage: number }) {
+      this.currentPage = 1;
+    },
+  },
+});
diff --git a/client/src/views/show/config/ConfigCast.vue b/client/src/views/show/config/ConfigCast.vue
index b607f3616..e03a2fae6 100644
--- a/client/src/views/show/config/ConfigCast.vue
+++ b/client/src/views/show/config/ConfigCast.vue
@@ -36,13 +36,11 @@
                 </b-button-group>
               </template>
             </b-table>
-            <b-pagination
-              v-show="CAST_LIST.length > rowsPerPage"
-              v-model="currentPage"
+            <pagination-controls
+              :per-page.sync="rowsPerPage"
+              :current-page.sync="currentPage"
               :total-rows="CAST_LIST.length"
-              :per-page="rowsPerPage"
               aria-controls="cast-table"
-              class="justify-content-center"
             />
           </b-tab>
           <b-tab title="Line Counts">
@@ -150,11 +148,12 @@ import { mapGetters, mapActions } from 'vuex';
 import CastLineStats from '@/vue_components/show/config/cast/CastLineStats.vue';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'ConfigCast',
   components: { CastLineStats },
-  mixins: [formValidationMixin],
+  mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
       castFields: ['first_name', 'last_name', { key: 'btn', label: '' }],
@@ -162,8 +161,6 @@ export default defineComponent({
         firstName: '',
         lastName: '',
       },
-      rowsPerPage: 15,
-      currentPage: 1,
       editFormState: {
         id: null as number | null,
         showID: null as number | null,
diff --git a/client/src/views/show/config/ConfigCharacters.vue b/client/src/views/show/config/ConfigCharacters.vue
index 5c949575d..0e846fa1a 100644
--- a/client/src/views/show/config/ConfigCharacters.vue
+++ b/client/src/views/show/config/ConfigCharacters.vue
@@ -51,13 +51,11 @@
                 </b-button-group>
               </template>
             </b-table>
-            <b-pagination
-              v-show="CHARACTER_LIST.length > rowsPerPage"
-              v-model="currentPage"
+            <pagination-controls
+              :per-page.sync="rowsPerPage"
+              :current-page.sync="currentPage"
               :total-rows="CHARACTER_LIST.length"
-              :per-page="rowsPerPage"
               aria-controls="character-table"
-              class="justify-content-center"
             />
           </b-tab>
           <b-tab title="Character Groups">
@@ -207,15 +205,14 @@ import CharacterTimeline from '@/vue_components/show/config/characters/Character
 import log from 'loglevel';
 import CharacterGroups from '@/vue_components/show/config/characters/CharacterGroups.vue';
 import formValidationMixin from '@/mixins/formValidationMixin';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'ConfigCharacters',
   components: { CharacterGroups, CharacterLineStats, CharacterTimeline },
-  mixins: [formValidationMixin],
+  mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
-      rowsPerPage: 15,
-      currentPage: 1,
       characterFields: [
         'name',
         'description',
diff --git a/client/src/views/show/config/ConfigCues.vue b/client/src/views/show/config/ConfigCues.vue
index e7b3ccc09..1879e4ccc 100644
--- a/client/src/views/show/config/ConfigCues.vue
+++ b/client/src/views/show/config/ConfigCues.vue
@@ -49,13 +49,11 @@
                 </b-button-group>
               </template>
             </b-table>
-            <b-pagination
-              v-show="CUE_TYPES.length > rowsPerPage"
-              v-model="currentPage"
+            <pagination-controls
+              :per-page.sync="rowsPerPage"
+              :current-page.sync="currentPage"
               :total-rows="CUE_TYPES.length"
-              :per-page="rowsPerPage"
               aria-controls="cue-types-table"
-              class="justify-content-center"
             />
           </b-tab>
           <b-tab title="Cue Configuration">
@@ -228,18 +226,17 @@ import { defineComponent } from 'vue';
 import { required, maxLength } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import log from 'loglevel';
-
+import paginationMixin from '@/mixins/paginationMixin';
 import CueEditor from '@/vue_components/show/config/cues/CueEditor.vue';
 import CueCountStats from '@/vue_components/show/config/cues/CueCountStats.vue';
 
 export default defineComponent({
   name: 'ConfigCues',
   components: { CueCountStats, CueEditor },
+  mixins: [paginationMixin],
   data() {
     return {
       cueTypeFields: ['prefix', 'description', 'colour', { key: 'btn', label: '' }],
-      rowsPerPage: 15,
-      currentPage: 1,
       newCueTypeForm: {
         prefix: '',
         description: '',
diff --git a/client/src/vue_components/config/ConfigShows.vue b/client/src/vue_components/config/ConfigShows.vue
index fd787b518..775ee5135 100644
--- a/client/src/vue_components/config/ConfigShows.vue
+++ b/client/src/vue_components/config/ConfigShows.vue
@@ -42,13 +42,11 @@
               </b-button-group>
             </template>
           </b-table>
-          <b-pagination
-            v-show="AVAILABLE_SHOWS.length > rowsPerPage"
-            v-model="currentPage"
+          <pagination-controls
+            :per-page.sync="rowsPerPage"
+            :current-page.sync="currentPage"
             :total-rows="AVAILABLE_SHOWS.length"
-            :per-page="rowsPerPage"
             aria-controls="shows-table"
-            class="justify-content-center"
           />
         </b-col>
       </b-row>
@@ -152,9 +150,11 @@ import { required, maxLength } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import { makeURL } from '@/js/utils';
 import log from 'loglevel';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'ConfigShows',
+  mixins: [paginationMixin],
   data() {
     return {
       loaded: false,
@@ -166,8 +166,6 @@ export default defineComponent({
         'created_at',
         { key: 'btn', label: '' },
       ],
-      rowsPerPage: 15,
-      currentPage: 1,
       isSubmittingLoad: false,
       isSubmittingShow: false,
       isDeleting: false,
diff --git a/client/src/vue_components/config/ConfigSystem.vue b/client/src/vue_components/config/ConfigSystem.vue
index 9a139ef21..d99453293 100644
--- a/client/src/vue_components/config/ConfigSystem.vue
+++ b/client/src/vue_components/config/ConfigSystem.vue
@@ -81,16 +81,15 @@
         id="connected-clients-table"
         :items="connectedClients"
         :fields="clientFields"
-        :per-page="perPage"
-        :current-page="currentPageClients"
+        :per-page="rowsPerPage"
+        :current-page="currentPage"
         small
       />
-      <b-pagination
-        v-model="currentPageClients"
+      <pagination-controls
+        :per-page.sync="rowsPerPage"
+        :current-page.sync="currentPage"
         :total-rows="connectedClients.length"
-        :per-page="perPage"
         aria-controls="connected-clients-table"
-        class="justify-content-center"
       />
     </b-modal>
   </div>
@@ -103,6 +102,7 @@
 import { defineComponent } from 'vue';
 import log from 'loglevel';
 import { makeURL } from '@/js/utils';
+import paginationMixin from '@/mixins/paginationMixin';
 
 interface VersionStatus {
   current_version: string | null;
@@ -115,11 +115,10 @@ interface VersionStatus {
 
 export default defineComponent({
   name: 'ConfigSystem',
+  mixins: [paginationMixin],
   data() {
     return {
-      perPage: 5,
       connectedClients: [] as unknown[],
-      currentPageClients: 1,
       clientFields: [
         { key: 'internal_id', label: 'UUID' },
         { key: 'remote_ip', label: 'IP' },
diff --git a/client/src/vue_components/shared/PaginationControls.vue b/client/src/vue_components/shared/PaginationControls.vue
new file mode 100644
index 000000000..76989e928
--- /dev/null
+++ b/client/src/vue_components/shared/PaginationControls.vue
@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-if="showControls"
+    class="d-flex align-items-center justify-content-center mt-2 mb-3"
+    style="gap: 1rem"
+  >
+    <div class="d-flex align-items-center" style="gap: 0.5rem">
+      <label class="mb-0 text-nowrap" :for="selectId">Rows per page</label>
+      <b-form-select
+        :id="selectId"
+        :value="perPage"
+        :options="perPageOptions"
+        size="sm"
+        style="width: auto"
+        @change="$emit('update:perPage', $event)"
+      />
+    </div>
+    <b-pagination
+      v-show="perPage > 0 && totalRows > perPage"
+      class="mb-0"
+      :value="currentPage"
+      :total-rows="totalRows"
+      :per-page="perPage"
+      :aria-controls="ariaControls"
+      @change="$emit('update:currentPage', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export const PER_PAGE_OPTIONS = [
+  { value: 10, text: '10' },
+  { value: 15, text: '15' },
+  { value: 25, text: '25' },
+  { value: 50, text: '50' },
+  { value: 0, text: 'All' },
+];
+
+const MIN_PER_PAGE = Math.min(...PER_PAGE_OPTIONS.filter((o) => o.value > 0).map((o) => o.value));
+
+export default defineComponent({
+  name: 'PaginationControls',
+  props: {
+    perPage: {
+      type: Number,
+      required: true,
+    },
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+    totalRows: {
+      type: Number,
+      required: true,
+    },
+    ariaControls: {
+      type: String,
+      default: undefined,
+    },
+  },
+  emits: ['update:perPage', 'update:currentPage'],
+  data() {
+    return {
+      perPageOptions: PER_PAGE_OPTIONS,
+    };
+  },
+  computed: {
+    selectId(): string {
+      return this.ariaControls ? `${this.ariaControls}-per-page` : 'per-page-select';
+    },
+    showControls(): boolean {
+      return this.totalRows > MIN_PER_PAGE;
+    },
+  },
+});
+</script>
diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
index 01f5e0126..cbe583405 100644
--- a/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
+++ b/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
@@ -48,13 +48,11 @@
         </b-button-group>
       </template>
     </b-table>
-    <b-pagination
-      v-show="actTableItems.length > rowsPerPage"
-      v-model="currentPage"
+    <pagination-controls
+      :per-page.sync="rowsPerPage"
+      :current-page.sync="currentPage"
       :total-rows="actTableItems.length"
-      :per-page="rowsPerPage"
       aria-controls="acts-table"
-      class="justify-content-center"
     />
     <b-modal
       id="new-act"
@@ -167,15 +165,14 @@ import { required, integer } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'ConfigActs',
-  mixins: [formValidationMixin],
+  mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
       loading: true,
-      rowsPerPage: 15,
-      currentPage: 1,
       actFields: [
         'name',
         { key: 'interval_after', label: 'Interval After' },
diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
index 3c69308fd..6b85b3df2 100644
--- a/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
+++ b/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
@@ -49,13 +49,11 @@
             </b-button-group>
           </template>
         </b-table>
-        <b-pagination
-          v-show="sceneTableItems.length > rowsPerPage"
-          v-model="currentPage"
+        <pagination-controls
+          :per-page.sync="rowsPerPage"
+          :current-page.sync="currentPage"
           :total-rows="sceneTableItems.length"
-          :per-page="rowsPerPage"
           aria-controls="scene-table"
-          class="justify-content-center"
         />
       </b-col>
       <b-col cols="4">
@@ -217,15 +215,14 @@ import { required, integer } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'ConfigScenes',
-  mixins: [formValidationMixin],
+  mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
       loading: true,
-      rowsPerPage: 15,
-      currentPage: 1,
       sceneFields: [
         'name',
         'act',
diff --git a/client/src/vue_components/show/config/characters/CharacterGroups.vue b/client/src/vue_components/show/config/characters/CharacterGroups.vue
index 1a3cc3c6b..e21670363 100644
--- a/client/src/vue_components/show/config/characters/CharacterGroups.vue
+++ b/client/src/vue_components/show/config/characters/CharacterGroups.vue
@@ -43,13 +43,11 @@
         </b-button-group>
       </template>
     </b-table>
-    <b-pagination
-      v-show="CHARACTER_GROUP_LIST.length > rowsPerPage"
-      v-model="currentPage"
+    <pagination-controls
+      :per-page.sync="rowsPerPage"
+      :current-page.sync="currentPage"
       :total-rows="CHARACTER_GROUP_LIST.length"
-      :per-page="rowsPerPage"
       aria-controls="character-group-table"
-      class="justify-content-center"
     />
     <b-modal
       id="new-character-group"
@@ -170,16 +168,15 @@ import { mapActions, mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
 import formValidationMixin from '@/mixins/formValidationMixin';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'CharacterGroups',
-  mixins: [formValidationMixin],
+  mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
       loading: true,
       characterGroupFields: ['name', 'description', 'characters', { key: 'btn', label: '' }],
-      rowsPerPage: 15,
-      currentPage: 1,
       tempCharacterList: [] as any[],
       newFormState: {
         name: '',
diff --git a/client/src/vue_components/show/config/mics/MicList.vue b/client/src/vue_components/show/config/mics/MicList.vue
index bf8fbbeb8..ca502ed57 100644
--- a/client/src/vue_components/show/config/mics/MicList.vue
+++ b/client/src/vue_components/show/config/mics/MicList.vue
@@ -29,13 +29,11 @@
         </b-button-group>
       </template>
     </b-table>
-    <b-pagination
-      v-show="MICROPHONES.length > rowsPerPage"
-      v-model="currentPage"
+    <pagination-controls
+      :per-page.sync="rowsPerPage"
+      :current-page.sync="currentPage"
       :total-rows="MICROPHONES.length"
-      :per-page="rowsPerPage"
       aria-controls="microphones-table"
-      class="justify-content-center"
     />
     <b-modal
       id="new-microphone"
@@ -126,6 +124,7 @@ import { defineComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
+import paginationMixin from '@/mixins/paginationMixin';
 
 function isNameUnique(this: any, value: string): boolean {
   if (value === '') {
@@ -145,11 +144,10 @@ function isNameUnique(this: any, value: string): boolean {
 
 export default defineComponent({
   name: 'MicList',
+  mixins: [paginationMixin],
   data() {
     return {
       micFields: ['name', 'description', { key: 'btn', label: '' }],
-      rowsPerPage: 15,
-      currentPage: 1,
       newMicrophoneForm: {
         name: '',
         description: '',
diff --git a/client/src/vue_components/show/config/sessions/SessionTagList.vue b/client/src/vue_components/show/config/sessions/SessionTagList.vue
index 75c3aafce..45c441a65 100644
--- a/client/src/vue_components/show/config/sessions/SessionTagList.vue
+++ b/client/src/vue_components/show/config/sessions/SessionTagList.vue
@@ -44,13 +44,11 @@
         </b-button-group>
       </template>
     </b-table>
-    <b-pagination
-      v-show="SESSION_TAGS.length > rowsPerPage"
-      v-model="currentPage"
+    <pagination-controls
+      :per-page.sync="rowsPerPage"
+      :current-page.sync="currentPage"
       :total-rows="SESSION_TAGS.length"
-      :per-page="rowsPerPage"
       aria-controls="session-tags-table"
-      class="justify-content-center"
     />
     <b-modal
       id="new-tag"
@@ -215,6 +213,7 @@ import { mapActions, mapGetters } from 'vuex';
 import log from 'loglevel';
 import { required } from 'vuelidate/lib/validators';
 import { contrastColor } from 'contrast-color';
+import paginationMixin from '@/mixins/paginationMixin';
 
 function isValidHexColor(value: string): boolean {
   if (!value) return false;
@@ -241,6 +240,7 @@ function isTagNameUnique(this: any, value: string): boolean {
 
 export default defineComponent({
   name: 'SessionTagList',
+  mixins: [paginationMixin],
   data() {
     return {
       tagFields: [
@@ -248,8 +248,6 @@ export default defineComponent({
         { key: 'session_count', label: 'Sessions' },
         { key: 'btn', label: '' },
       ],
-      rowsPerPage: 15,
-      currentPage: 1,
       newTagForm: {
         tag: '',
         colour: '#3498DB',
diff --git a/client/src/vue_components/show/config/stage/CrewList.vue b/client/src/vue_components/show/config/stage/CrewList.vue
index 9a12467de..cf0b2ff53 100644
--- a/client/src/vue_components/show/config/stage/CrewList.vue
+++ b/client/src/vue_components/show/config/stage/CrewList.vue
@@ -20,13 +20,11 @@
         </b-button-group>
       </template>
     </b-table>
-    <b-pagination
-      v-show="CREW_LIST.length > rowsPerPage"
-      v-model="currentPage"
+    <pagination-controls
+      :per-page.sync="rowsPerPage"
+      :current-page.sync="currentPage"
       :total-rows="CREW_LIST.length"
-      :per-page="rowsPerPage"
       aria-controls="crew-table"
-      class="justify-content-center"
     />
     <b-modal
       id="new-crew"
@@ -123,10 +121,11 @@ import { defineComponent } from 'vue';
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters, mapActions } from 'vuex';
 import formValidationMixin from '@/mixins/formValidationMixin';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'CrewList',
-  mixins: [formValidationMixin],
+  mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
       crewFields: ['first_name', 'last_name', { key: 'btn', label: '' }],
@@ -134,8 +133,6 @@ export default defineComponent({
         firstName: '',
         lastName: '',
       },
-      rowsPerPage: 15,
-      currentPage: 1,
       editFormState: {
         id: null as number | null,
         showID: null as number | null,
diff --git a/client/src/vue_components/show/config/stage/PropsList.vue b/client/src/vue_components/show/config/stage/PropsList.vue
index f44ed9f25..f5f632b13 100644
--- a/client/src/vue_components/show/config/stage/PropsList.vue
+++ b/client/src/vue_components/show/config/stage/PropsList.vue
@@ -23,13 +23,11 @@
             </b-button-group>
           </template>
         </b-table>
-        <b-pagination
-          v-show="PROP_TYPES.length > rowsPerPage"
-          v-model="currentPropTypePage"
+        <pagination-controls
+          :per-page.sync="rowsPerPage"
+          :current-page.sync="currentPropTypePage"
           :total-rows="PROP_TYPES.length"
-          :per-page="rowsPerPage"
           aria-controls="prop-type-table"
-          class="justify-content-center"
         />
       </b-col>
       <b-col cols="7">
@@ -57,13 +55,11 @@
             </b-button-group>
           </template>
         </b-table>
-        <b-pagination
-          v-show="PROPS_LIST.length > rowsPerPage"
-          v-model="currentPropPage"
+        <pagination-controls
+          :per-page.sync="rowsPerPage"
+          :current-page.sync="currentPropPage"
           :total-rows="PROPS_LIST.length"
-          :per-page="rowsPerPage"
           aria-controls="props-table"
-          class="justify-content-center"
         />
       </b-col>
     </b-row>
@@ -358,6 +354,12 @@ export default defineComponent({
     },
     ...mapGetters(['PROPS_LIST', 'PROP_TYPES', 'IS_SHOW_EDITOR', 'PROP_TYPE_BY_ID']),
   },
+  watch: {
+    rowsPerPage() {
+      this.currentPropPage = 1;
+      this.currentPropTypePage = 1;
+    },
+  },
   async mounted(): Promise<void> {
     await Promise.all([(this as any).GET_PROP_TYPES(), (this as any).GET_PROPS_LIST()]);
   },
diff --git a/client/src/vue_components/show/config/stage/SceneryList.vue b/client/src/vue_components/show/config/stage/SceneryList.vue
index e559479b4..e3025a1c1 100644
--- a/client/src/vue_components/show/config/stage/SceneryList.vue
+++ b/client/src/vue_components/show/config/stage/SceneryList.vue
@@ -23,13 +23,11 @@
             </b-button-group>
           </template>
         </b-table>
-        <b-pagination
-          v-show="SCENERY_TYPES.length > rowsPerPage"
-          v-model="currentSceneryTypesPage"
+        <pagination-controls
+          :per-page.sync="rowsPerPage"
+          :current-page.sync="currentSceneryTypesPage"
           :total-rows="SCENERY_TYPES.length"
-          :per-page="rowsPerPage"
           aria-controls="scenery-types-table"
-          class="justify-content-center"
         />
       </b-col>
       <b-col cols="7">
@@ -57,13 +55,11 @@
             </b-button-group>
           </template>
         </b-table>
-        <b-pagination
-          v-show="SCENERY_LIST.length > rowsPerPage"
-          v-model="currentSceneryPage"
+        <pagination-controls
+          :per-page.sync="rowsPerPage"
+          :current-page.sync="currentSceneryPage"
           :total-rows="SCENERY_LIST.length"
-          :per-page="rowsPerPage"
           aria-controls="scenery-table"
-          class="justify-content-center"
         />
       </b-col>
     </b-row>
@@ -366,6 +362,12 @@ export default defineComponent({
     },
     ...mapGetters(['SCENERY_LIST', 'SCENERY_TYPES', 'IS_SHOW_EDITOR', 'SCENERY_TYPE_BY_ID']),
   },
+  watch: {
+    rowsPerPage() {
+      this.currentSceneryPage = 1;
+      this.currentSceneryTypesPage = 1;
+    },
+  },
   async mounted(): Promise<void> {
     await Promise.all([(this as any).GET_SCENERY_TYPES(), (this as any).GET_SCENERY_LIST()]);
   },
diff --git a/client/src/vue_components/show/config/stage/StageManager.vue b/client/src/vue_components/show/config/stage/StageManager.vue
index 0e2b65012..bedfcd7c8 100644
--- a/client/src/vue_components/show/config/stage/StageManager.vue
+++ b/client/src/vue_components/show/config/stage/StageManager.vue
@@ -90,13 +90,11 @@
                     </b-button>
                   </template>
                 </b-table>
-                <b-pagination
-                  v-show="currentSceneSceneryAllocations.length > rowsPerPage"
-                  v-model="currentSceneryAllocPage"
+                <pagination-controls
+                  :per-page.sync="rowsPerPage"
+                  :current-page.sync="currentSceneryAllocPage"
                   :total-rows="currentSceneSceneryAllocations.length"
-                  :per-page="rowsPerPage"
                   aria-controls="scenery-alloc-table"
-                  class="justify-content-center"
                 />
               </b-col>
               <b-col cols="6">
@@ -122,13 +120,11 @@
                     </b-button>
                   </template>
                 </b-table>
-                <b-pagination
-                  v-show="currentScenePropsAllocations.length > rowsPerPage"
-                  v-model="currentPropsAllocPage"
+                <pagination-controls
+                  :per-page.sync="rowsPerPage"
+                  :current-page.sync="currentPropsAllocPage"
                   :total-rows="currentScenePropsAllocations.length"
-                  :per-page="rowsPerPage"
                   aria-controls="props-alloc-table"
-                  class="justify-content-center"
                 />
               </b-col>
             </b-row>
@@ -668,6 +664,12 @@ export default defineComponent({
       'CREW_ASSIGNMENTS_BY_SCENERY',
     ]),
   },
+  watch: {
+    rowsPerPage() {
+      this.currentSceneryAllocPage = 1;
+      this.currentPropsAllocPage = 1;
+    },
+  },
   async mounted(): Promise<void> {
     await Promise.all([
       (this as any).GET_ACT_LIST(),

From 9f519f69d776687d4e843cdbc1c93c43c072c8ad Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Mon, 8 Jun 2026 01:15:12 +0100
Subject: [PATCH 4/4] Bump version to 0.31.2

---
 client-v3/package-lock.json | 4 ++--
 client-v3/package.json      | 2 +-
 client/package-lock.json    | 4 ++--
 client/package.json         | 2 +-
 electron/package-lock.json  | 4 ++--
 electron/package.json       | 2 +-
 server/pyproject.toml       | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/client-v3/package-lock.json b/client-v3/package-lock.json
index 08f2ce7b0..69ae23544 100644
--- a/client-v3/package-lock.json
+++ b/client-v3/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "client-v3",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "client-v3",
-      "version": "0.31.1",
+      "version": "0.31.2",
       "dependencies": {
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
diff --git a/client-v3/package.json b/client-v3/package.json
index c231186b5..fcda5dfa1 100644
--- a/client-v3/package.json
+++ b/client-v3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client-v3",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "DigiScript front end (Vue 3)",
   "author": "DreamTeamProd",
   "private": true,
diff --git a/client/package-lock.json b/client/package-lock.json
index d5d4110f0..259c91dc2 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "client",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "client",
-      "version": "0.31.1",
+      "version": "0.31.2",
       "dependencies": {
         "bootstrap": "4.6.2",
         "bootstrap-vue": "2.23.1",
diff --git a/client/package.json b/client/package.json
index 015d1bd52..2152dd630 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "DigiScript front end",
   "author": "DreamTeamProd",
   "private": true,
diff --git a/electron/package-lock.json b/electron/package-lock.json
index fe6e86a62..4a93c7d1b 100644
--- a/electron/package-lock.json
+++ b/electron/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "digiscript-electron",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "digiscript-electron",
-      "version": "0.31.1",
+      "version": "0.31.2",
       "license": "GPL-3.0",
       "dependencies": {
         "bonjour-service": "^1.4.0",
diff --git a/electron/package.json b/electron/package.json
index fd55c1cd1..a4f6cae3b 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -1,6 +1,6 @@
 {
   "name": "digiscript-electron",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "DigiScript Electron Desktop Application",
   "author": "DreamTeamProd",
   "license": "GPL-3.0",
diff --git a/server/pyproject.toml b/server/pyproject.toml
index 90327a909..3e077ffc2 100644
--- a/server/pyproject.toml
+++ b/server/pyproject.toml
@@ -11,7 +11,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "digiscript-server"
-version = "0.31.1"
+version = "0.31.2"
 description = "DigiScript server - Digital script management for theatrical shows"
 readme = "../README.md"
 requires-python = ">=3.13"