diff --git a/frontend/src/pages/Bookings.tsx b/frontend/src/pages/Bookings.tsx
index ac02d2a..8544bd1 100644
--- a/frontend/src/pages/Bookings.tsx
+++ b/frontend/src/pages/Bookings.tsx
@@ -26,6 +26,15 @@ export function Bookings() {
       .catch(() => setError("Booking list is unavailable right now."));
   }, [status]);
 
+  useEffect(() => {
+    if (!bookings) return;
+    const filteredCount = bookings.filter((b) =>
+      `${b.public_ref} ${b.customer_name} ${b.vehicle_ref}`.toLowerCase().includes(query.toLowerCase()),
+    ).length;
+    const totalPages = Math.max(1, Math.ceil(filteredCount / perPage));
+    setPage((p) => Math.min(p, totalPages));
+  }, [bookings, query]);
+
   return (
     <div className="page">
       <PageHeader eyebrow="Operations / Schedule" title="Bookings" description="Review active rental windows and upcoming vehicle commitments." />
@@ -68,7 +77,7 @@ export function Bookings() {
             </tr>
           </thead>
           <tbody>
-            {bookings.map((b) => (
+            {visible.map((b) => (
               <tr key={b.public_ref}>
                 <th scope="row" data-label="Reference">
                   <Link to={`/bookings/${b.public_ref}`}>{b.public_ref}</Link>
diff --git a/frontend/src/pages/Vehicles.tsx b/frontend/src/pages/Vehicles.tsx
index 9a69f0e..7a83896 100644
--- a/frontend/src/pages/Vehicles.tsx
+++ b/frontend/src/pages/Vehicles.tsx
@@ -75,7 +75,7 @@ export function Vehicles() {
             </tr>
           </thead>
           <tbody>
-            {vehicles.map((v) => (
+            {filtered.map((v) => (
               <tr key={v.public_ref} className={v.attention ? "row-attention" : ""}>
                 <th scope="row" data-label="Reference">
                   <Link to={`/vehicles/${v.public_ref}`}>{v.public_ref}</Link>