diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 20db58f..0205454 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1010,8 +1010,12 @@ canvas { width: 100%; max-width: 100%; display: block; }
   overflow: visible;
 }
 .inbox-queue .page-info { width: 100%; }
-.inbox-queue .page-controls { flex-wrap: nowrap; }
-.inbox-queue .page-nav { justify-content: flex-end; flex: 1 1 auto; }
+.inbox-queue .page-controls { flex-wrap: wrap; }
+.inbox-queue .page-nav {
+  justify-content: flex-start;
+  flex: 1 1 100%;
+  width: 100%;
+}
 .inbox-bulk-bar {
   display: flex;
   align-items: center;
diff --git a/frontend/src/ui/DataTable.jsx b/frontend/src/ui/DataTable.jsx
index 802eb2a..39c2e70 100644
--- a/frontend/src/ui/DataTable.jsx
+++ b/frontend/src/ui/DataTable.jsx
@@ -75,23 +75,23 @@ export function useDataTable({ columns, rows, pageSize = DEFAULT_PAGE_SIZE }) {
   }
 }
 
-/** 1 2 3 … last, then 2 3 4 … last as you move forward. Arrows sit outside this list. */
+/** 1 2 3 … 10, then 2 3 4 … 10 as you move forward. The last button is always the last page number. */
 export function pageWindow(cur, pages) {
-  const n = Math.max(1, pages)
+  const last = Math.max(1, pages)
   const windowSize = 3
-  if (n <= windowSize + 1) {
-    return Array.from({ length: n }, (_, i) => i + 1)
+  if (last <= windowSize + 1) {
+    return Array.from({ length: last }, (_, i) => i + 1)
   }
   let start = Math.max(1, cur)
-  if (start + windowSize - 1 >= n) start = n - windowSize
+  if (start + windowSize - 1 >= last) start = last - windowSize
   const nums = []
   for (let i = 0; i < windowSize; i++) nums.push(start + i)
   const lastInWindow = nums[nums.length - 1]
-  if (lastInWindow < n - 1) {
+  if (lastInWindow < last - 1) {
     nums.push('…')
-    nums.push(n)
-  } else if (lastInWindow < n) {
-    nums.push(n)
+    nums.push(last)
+  } else if (lastInWindow < last) {
+    nums.push(last)
   }
   return nums
 }