diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index fb8b4f6fce..7d61280747 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -15,7 +15,7 @@ import { Table, TableCell, TableRow } from '@/lib/Table';
 import * as Tabs from '@radix-ui/react-tabs';
 import moment, { Duration, Moment } from 'moment';
 import Link from 'next/link';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import ReactSelect from 'react-select';
 import styled from 'styled-components';
 import CdcDetails from './cdcDetails';
@@ -96,66 +96,54 @@ type SnapshotStatusProps = {
   status: SnapshotStatus;
 };
 
-const ROWS_PER_PAGE = 10;
+const ROWS_PER_PAGE = 5;
 export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
-  const allRows = status.clones.map(summarizeTableClone);
   const [sortField, setSortField] = useState<
     'cloneStartTime' | 'avgTimePerPartition'
   >('cloneStartTime');
+  const allRows = status.clones.map(summarizeTableClone);
   const [currentPage, setCurrentPage] = useState(1);
   const totalPages = Math.ceil(allRows.length / ROWS_PER_PAGE);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const displayedRows = useMemo(() => {
+    const shownRows = allRows.filter((row: any) =>
+      row.tableName.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    shownRows.sort((a, b) => {
+      const aValue = a[sortField];
+      const bValue = b[sortField];
+      if (aValue === null || bValue === null) {
+        return 0;
+      }
 
-  const startRow = (currentPage - 1) * ROWS_PER_PAGE;
-  const endRow = startRow + ROWS_PER_PAGE;
-  const [displayedRows, setDisplayedRows] = useState(() =>
-    allRows.slice(startRow, endRow)
-  );
+      if (aValue < bValue) {
+        return -1;
+      } else if (aValue > bValue) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+
+    const startRow = (currentPage - 1) * ROWS_PER_PAGE;
+    const endRow = startRow + ROWS_PER_PAGE;
+    return shownRows.length > ROWS_PER_PAGE
+      ? shownRows.slice(startRow, endRow)
+      : shownRows;
+  }, [allRows, currentPage, searchQuery, sortField]);
 
   const handlePrevPage = () => {
     if (currentPage > 1) {
       setCurrentPage(currentPage - 1);
-      const newStartRow = (currentPage - 2) * ROWS_PER_PAGE;
-      const newEndRow = newStartRow + ROWS_PER_PAGE;
-      setDisplayedRows(allRows.slice(newStartRow, newEndRow));
     }
   };
 
   const handleNextPage = () => {
     if (currentPage < totalPages) {
       setCurrentPage(currentPage + 1);
-      const newStartRow = currentPage * ROWS_PER_PAGE;
-      const newEndRow = newStartRow + ROWS_PER_PAGE;
-      setDisplayedRows(allRows.slice(newStartRow, newEndRow));
     }
   };
 
-  const handleSort = useCallback(
-    (sortOption: 'cloneStartTime' | 'avgTimePerPartition') => {
-      setDisplayedRows((currRows) =>
-        [...currRows].sort((a, b) => {
-          const aValue = a[sortOption];
-          const bValue = b[sortOption];
-          if (aValue === null || bValue === null) {
-            return 0;
-          }
-
-          if (aValue < bValue) {
-            return -1;
-          } else if (aValue > bValue) {
-            return 1;
-          } else {
-            return 0;
-          }
-        })
-      );
-    },
-    [setDisplayedRows]
-  );
-
-  useEffect(() => {
-    handleSort(sortField);
-  }, [handleSort, currentPage, sortField]);
-
   const sortOptions = [
     { value: 'cloneStartTime', label: 'Start Time' },
     { value: 'avgTimePerPartition', label: 'Time Per Partition' },
diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
index 4524754252..581144a7ef 100644
--- a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
@@ -8,7 +8,7 @@ import { ProgressCircle } from '@/lib/ProgressCircle';
 import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import moment from 'moment';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import ReactSelect from 'react-select';
 type SyncStatusRow = {
   batchId: number;
@@ -48,7 +48,7 @@ function TimeWithDurationOrRunning({
   }
 }
 
-const ROWS_PER_PAGE = 10;
+const ROWS_PER_PAGE = 5;
 const sortOptions = [
   { value: 'startTime', label: 'Start Time' },
   { value: 'endTime', label: 'End Time' },
@@ -59,59 +59,49 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
   const [sortField, setSortField] = useState<
     'startTime' | 'endTime' | 'numRows'
   >('startTime');
+
   const totalPages = Math.ceil(rows.length / ROWS_PER_PAGE);
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const startRow = (currentPage - 1) * ROWS_PER_PAGE;
-  const endRow = startRow + ROWS_PER_PAGE;
-  const allRows = rows.slice(startRow, endRow);
-  const [displayedRows, setDisplayedRows] = useState(() =>
-    rows.slice(startRow, endRow)
-  );
+  const displayedRows = useMemo(() => {
+    const searchRows = rows.filter(
+      (row: any) => row.batchId == parseInt(searchQuery, 10)
+    );
+    const shownRows = searchRows.length > 0 ? searchRows : rows;
+    shownRows.sort((a, b) => {
+      const aValue = a[sortField];
+      const bValue = b[sortField];
+      if (aValue === null || bValue === null) {
+        return 0;
+      }
+
+      if (aValue < bValue) {
+        return -1;
+      } else if (aValue > bValue) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+
+    const startRow = (currentPage - 1) * ROWS_PER_PAGE;
+    const endRow = startRow + ROWS_PER_PAGE;
+    return shownRows.length > ROWS_PER_PAGE
+      ? shownRows.slice(startRow, endRow)
+      : shownRows;
+  }, [searchQuery, currentPage, rows, sortField]);
+
   const handlePrevPage = () => {
     if (currentPage > 1) {
       setCurrentPage(currentPage - 1);
-      const newStartRow = (currentPage - 2) * ROWS_PER_PAGE;
-      const newEndRow = newStartRow + ROWS_PER_PAGE;
-      setDisplayedRows(rows.slice(newStartRow, newEndRow));
     }
   };
 
   const handleNextPage = () => {
     if (currentPage < totalPages) {
       setCurrentPage(currentPage + 1);
-      const newStartRow = currentPage * ROWS_PER_PAGE;
-      const newEndRow = newStartRow + ROWS_PER_PAGE;
-      setDisplayedRows(rows.slice(newStartRow, newEndRow));
     }
   };
 
-  const handleSort = useCallback(
-    (sortOption: 'startTime' | 'endTime' | 'numRows') => {
-      setDisplayedRows((currRows) =>
-        [...currRows].sort((a, b) => {
-          const aValue = a[sortOption];
-          const bValue = b[sortOption];
-          if (aValue === null || bValue === null) {
-            return 0;
-          }
-
-          if (aValue < bValue) {
-            return -1;
-          } else if (aValue > bValue) {
-            return 1;
-          } else {
-            return 0;
-          }
-        })
-      );
-    },
-    [setDisplayedRows]
-  );
-
-  useEffect(() => {
-    handleSort(sortField);
-  }, [handleSort, currentPage, sortField]);
-
   return (
     <Table
       title={<Label variant='headline'>CDC Syncs</Label>}
diff --git a/ui/app/mirrors/edit/[mirrorId]/tablePairs.tsx b/ui/app/mirrors/edit/[mirrorId]/tablePairs.tsx
index 24d2f37f80..f0591ce43b 100644
--- a/ui/app/mirrors/edit/[mirrorId]/tablePairs.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/tablePairs.tsx
@@ -1,27 +1,28 @@
 'use client';
-import SearchBar from '@/components/Search';
 import { TableMapping } from '@/grpc_generated/flow';
-import { useState } from 'react';
+import { SearchField } from '@/lib/SearchField';
+import { useMemo, useState } from 'react';
 
 const TablePairs = ({ tables }: { tables?: TableMapping[] }) => {
-  const [shownTables, setShownTables] = useState<TableMapping[] | undefined>(
-    tables
-  );
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const shownTables = useMemo(() => {
+    const shownTables = tables?.filter((table: TableMapping) => {
+      return (
+        table.sourceTableIdentifier.includes(searchQuery) ||
+        table.destinationTableIdentifier.includes(searchQuery)
+      );
+    });
+    return shownTables?.length ? shownTables : tables;
+  }, [tables, searchQuery]);
   if (tables)
     return (
       <>
         <div style={{ width: '20%', marginTop: '2rem' }}>
-          <SearchBar
-            allItems={tables}
-            setItems={setShownTables}
-            filterFunction={(query: string) =>
-              tables.filter((table: TableMapping) => {
-                return (
-                  table.sourceTableIdentifier.includes(query) ||
-                  table.destinationTableIdentifier.includes(query)
-                );
-              })
-            }
+          <SearchField
+            placeholder='Search by table name'
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSearchQuery(e.target.value);
+            }}
           />
         </div>
         <table