diff --git a/app/(reference-data)/genomes/[ref]/page.tsx b/app/(reference-data)/genomes/[ref]/page.tsx
index 65ebfdb2..d7a287b5 100644
--- a/app/(reference-data)/genomes/[ref]/page.tsx
+++ b/app/(reference-data)/genomes/[ref]/page.tsx
@@ -16,7 +16,7 @@ export default function GenomeDetailPage(props: GenomeDetailProps) {
     const genomeRef = decodeURIComponent(params.ref);
 
     // Query for genome data - this would need to be implemented in the API
-    const { data: genomeData, isLoading, error } = useQuery({
+    const { isLoading, error } = useQuery({
         queryKey: ['genome', genomeRef],
         queryFn: async () => {
             // Placeholder - would need actual API endpoint
diff --git a/app/events/plantseed2015/page.tsx b/app/events/plantseed2015/page.tsx
index f2294445..f746a31a 100644
--- a/app/events/plantseed2015/page.tsx
+++ b/app/events/plantseed2015/page.tsx
@@ -42,9 +42,11 @@ export default function PlantSEED2015Page() {
 
             <Box textAlign="center" mb={4}>
                 <a href="http://press3.mcs.anl.gov/plantseed2015/files/2015/09/2015-Wkshp_participants.jpeg" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                         src="http://press3.mcs.anl.gov/plantseed2015/files/2015/09/2015-Wkshp_participants.jpeg"
                         alt="2015 Workshop Group Photo"
+                        width={800}
+                        height={600}
                         style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}
                     />
                 </a>
diff --git a/app/events/plantseed2016/page.tsx b/app/events/plantseed2016/page.tsx
index 047d647e..55d007ef 100644
--- a/app/events/plantseed2016/page.tsx
+++ b/app/events/plantseed2016/page.tsx
@@ -42,9 +42,11 @@ export default function PlantSEED2016Page() {
 
             <Box textAlign="center" mb={4}>
                 <a href="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2016/PlantSEED_Workshop_2016.jpg" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                         src="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2016/PlantSEED_Workshop_2016.jpg"
                         alt="2016 Workshop Group Photo"
+                        width={800}
+                        height={600}
                         style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}
                     />
                 </a>
diff --git a/app/events/plantseed2017/page.tsx b/app/events/plantseed2017/page.tsx
index ded423ea..18c3bf3b 100644
--- a/app/events/plantseed2017/page.tsx
+++ b/app/events/plantseed2017/page.tsx
@@ -42,9 +42,11 @@ export default function PlantSEED2017Page() {
 
             <Box textAlign="center" mb={4}>
                 <a href="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2017/PlantSEED_Workshop_2017.png" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                         src="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2017/PlantSEED_Workshop_2017.png"
                         alt="2017 Workshop Group Photo"
+                        width={800}
+                        height={600}
                         style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}
                     />
                 </a>
diff --git a/app/events/plantseed2018/page.tsx b/app/events/plantseed2018/page.tsx
index daa9eff7..b63c17dc 100644
--- a/app/events/plantseed2018/page.tsx
+++ b/app/events/plantseed2018/page.tsx
@@ -54,9 +54,11 @@ export default function PlantSEED2018Page() {
 
             <Box textAlign="center" mb={4}>
                 <a href="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2018/PlantSEED_Workshop_2018_Participants.png" target="_blank" rel="noopener noreferrer">
-                    <img
+                    <Image
                         src="http://bioseed.mcs.anl.gov/~seaver/Files/PlantSEED_Workshop_2018/PlantSEED_Workshop_2018_Participants.png"
                         alt="2018 Workshop Group Photo"
+                        width={800}
+                        height={600}
                         style={{ maxWidth: '100%', height: 'auto', objectFit: 'contain' }}
                     />
                 </a>
diff --git a/app/layout.tsx b/app/layout.tsx
index 43f10ebf..9a472634 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,6 +8,7 @@ import Providers from '@/components/Providers';
 import { AuthProvider } from '@/components/auth/AuthProvider';
 import type { Metadata } from "next";
 import "./globals.css";
+import "@/styles/icomoon/style.css";
 
 export const metadata: Metadata = {
     title: "ModelSEED",
@@ -23,7 +24,6 @@ export default function RootLayout({
         <html lang="en" suppressHydrationWarning>
             <head>
                 <link rel="shortcut icon" href="/img/ModelSEED-favicon.png" />
-                <link rel="stylesheet" href="/icomoon/style.css" />
                 <link
                     href="https://fonts.googleapis.com/icon?family=Material+Icons"
                     rel="stylesheet"
diff --git a/app/model/[...path]/page.tsx b/app/model/[...path]/page.tsx
index 5f68aec1..6ad9fb6b 100644
--- a/app/model/[...path]/page.tsx
+++ b/app/model/[...path]/page.tsx
@@ -157,6 +157,20 @@ function toSearchableString(value: unknown): string {
     return '';
 }
 
+function extractReactionIds(value: unknown): string[] {
+    const raw = toSearchableString(value);
+    if (!raw.trim()) return [];
+    const matches = raw.match(/rxn\d{5}/g) ?? [];
+    const seen = new Set<string>();
+    const ordered: string[] = [];
+    for (const match of matches) {
+        if (seen.has(match)) continue;
+        seen.add(match);
+        ordered.push(match);
+    }
+    return ordered;
+}
+
 function buildReactionRows(model: Record<string, unknown>): Record<string, unknown>[] {
     return asArray<Record<string, unknown>>(model.modelreactions ?? model.reactions).map((reaction, index) => ({
         id: String((reaction.id ?? extractRefId(reaction.reaction_ref)) || `rxn-${index}`),
@@ -185,6 +199,7 @@ function buildGeneRows(model: Record<string, unknown>): Record<string, unknown>[
         return explicitGenes.map((gene, index) => ({
             id: String((gene.id ?? extractRefId(gene.feature_ref)) || `gene-${index}`),
             reactions: toSearchableString(gene.reactions ?? []),
+            reactionIds: extractReactionIds(gene.reactions ?? []),
             functions: gene.functions ? toSearchableString(gene.functions) : 'N/A',
         }));
     }
@@ -211,6 +226,7 @@ function buildGeneRows(model: Record<string, unknown>): Record<string, unknown>[
     return Array.from(geneToReactions.entries()).map(([gene, reactions]) => ({
         id: gene,
         reactions: Array.from(reactions).join(', '),
+        reactionIds: Array.from(reactions),
         functions: 'View details',
     }));
 }
@@ -400,7 +416,36 @@ function buildTableConfig(model: Record<string, unknown>): Record<Exclude<TabKey
             rows: buildGeneRows(model),
             columns: [
                 { field: 'id', headerName: 'Gene', width: 230 },
-                { field: 'reactions', headerName: 'Reactions', flex: 1, minWidth: 260 },
+                {
+                    field: 'reactions',
+                    headerName: 'Reactions',
+                    flex: 1,
+                    minWidth: 320,
+                    renderCell: (params) => {
+                        const row = params.row as Record<string, unknown>;
+                        const reactionIds = Array.isArray(row.reactionIds)
+                            ? (row.reactionIds as string[])
+                            : extractReactionIds(params.value);
+                        if (reactionIds.length === 0) {
+                            return <Typography variant="body2" color="text.secondary">N/A</Typography>;
+                        }
+                        return (
+                            <Stack direction="row" spacing={0.5} useFlexGap flexWrap="wrap" sx={{ py: 0.5 }}>
+                                {reactionIds.map((rxnId) => (
+                                    <Chip
+                                        key={`${String(row.id ?? 'gene')}-${rxnId}`}
+                                        label={rxnId}
+                                        size="small"
+                                        component={Link}
+                                        clickable
+                                        href={`/biochem/reactions/${rxnId}`}
+                                        sx={{ color: '#00acc1' }}
+                                    />
+                                ))}
+                            </Stack>
+                        );
+                    },
+                },
                 { field: 'functions', headerName: 'Functions', flex: 1, minWidth: 260 },
             ],
         },
@@ -1711,7 +1756,8 @@ export default function ModelDetailPage({ params }: { params: Promise<{ path: st
         modelName,
     );
 
-    const genomeRef = String(modelObject.genome_ref ?? modelObject.genome_id ?? '-');
+    const genomeRefRaw = String(modelObject.genome_ref ?? modelObject.genome_id ?? '-');
+    const genomeRef = genomeRefRaw.replace(/\|\|+$/, '').trim() || '-';
 
     const visibleTabs = MODEL_TABS.filter((tab) => !(isPlantModel && tab.key === 'edits'));
     const activeTabVisible = visibleTabs.some((tab) => tab.key === activeTab);
@@ -1727,16 +1773,7 @@ export default function ModelDetailPage({ params }: { params: Promise<{ path: st
         },
         {
             label: 'Genome Ref',
-            value: genomeRef !== '-' ? (
-                <Link
-                    href={`https://www.bv-brc.org/view/Genome/${genomeRef}`}
-                    target="_blank"
-                    rel="noreferrer"
-                    style={{ color: '#00acc1', textDecoration: 'none' }}
-                >
-                    {genomeRef}
-                </Link>
-            ) : '-',
+            value: genomeRef,
         },
         { label: 'Type', value: String(modelObject.type ?? '-') },
         {
diff --git a/components/layout/DataControlHeader.tsx b/components/layout/DataControlHeader.tsx
index 51d04a66..0e86c29b 100644
--- a/components/layout/DataControlHeader.tsx
+++ b/components/layout/DataControlHeader.tsx
@@ -25,13 +25,12 @@ import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+
 import SearchIcon from '@mui/icons-material/Search';
-import AddIcon from '@mui/icons-material/Add';
+
 import CloseIcon from '@mui/icons-material/Close';
 import { usePathname } from 'next/navigation';
-import { useEffect, useMemo, useState, type MouseEvent } from 'react';
+import { useEffect, useMemo, useState, useRef, useCallback, type MouseEvent } from 'react';
 
 const NO_VALUE_OPERATORS = new Set(['isEmpty', 'isNotEmpty']);
 
@@ -42,10 +41,19 @@ const STRING_OPERATORS = [
     { value: 'doesNotEqual', label: 'does not equal' },
     { value: 'startsWith', label: 'starts with' },
     { value: 'endsWith', label: 'ends with' },
+    { value: 'isAnyOf', label: 'is any of' },
     { value: 'isEmpty', label: 'is empty' },
     { value: 'isNotEmpty', label: 'is not empty' },
 ];
 
+/** Operators whose value field should be treated as a comma-separated list. */
+const ARRAY_VALUE_OPERATORS = new Set(['isAnyOf']);
+
+/** Hint shown below the value input when an array operator is selected. */
+const ARRAY_OPERATOR_HINT: Record<string, string> = {
+    isAnyOf: 'Comma-separated values, e.g. cpd00001, cpd00002',
+};
+
 const NUMBER_OPERATORS = [
     { value: '=', label: '=' },
     { value: '!=', label: '!=' },
@@ -121,67 +129,198 @@ function CustomPagination() {
 function ToolbarSearchField() {
     const apiRef = useGridApiContext();
     const pathname = usePathname();
-    const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-    const value = filterModel?.quickFilterValues?.join(' ') ?? '';
+    const [value, setValue] = useState('');
+    const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const placeholder = useMemo(() => {
-        if (!pathname) return 'Search...';
-        if (pathname.includes('/genomes/Annotations')) return 'Search subsystems...';
-        if (pathname.includes('/biochem/reactions')) return 'Search reactions...';
-        if (pathname.includes('/biochem/compounds')) return 'Search compounds...';
-        if (pathname.includes('/reference-data/genomes')) return 'Search plant models...';
-        if (pathname.includes('/reference-data/list-media')) return 'Search media...';
-        if (pathname.includes('/my-models')) return 'Search my models...';
-        if (pathname.includes('/myMedia')) return 'Search my media...';
+        if (!pathname) return 'Find in page...';
+        if (pathname.includes('/biochem/reactions')) return 'Find in reactions...';
+        if (pathname.includes('/biochem/compounds')) return 'Find in compounds...';
+        if (pathname.includes('/genomes/Annotations')) return 'Find in subsystems...';
+        if (pathname.includes('/reference-data/genomes')) return 'Find in plant models...';
+        if (pathname.includes('/reference-data/list-media')) return 'Find in media...';
+        if (pathname.includes('/my-models')) return 'Find in my models...';
+        if (pathname.includes('/my-jobs')) return 'Find in my jobs...';
+        if (pathname.includes('/myMedia')) return 'Find in my media...';
+        if (pathname.includes('/my-media')) return 'Find in my media...';
         if (pathname.includes('/model/')) {
-            if (pathname.endsWith('/reactions')) return 'Search reactions...';
-            if (pathname.endsWith('/compounds')) return 'Search compounds...';
-            if (pathname.endsWith('/genes')) return 'Search genes...';
-            if (pathname.endsWith('/compartments')) return 'Search compartments...';
-            if (pathname.endsWith('/biomass')) return 'Search biomass...';
-            if (pathname.endsWith('/pathways')) return 'Search pathways...';
-            return 'Search model...';
+            if (pathname.endsWith('/reactions')) return 'Find in reactions...';
+            if (pathname.endsWith('/compounds')) return 'Find in compounds...';
+            if (pathname.endsWith('/genes')) return 'Find in genes...';
+            if (pathname.endsWith('/compartments')) return 'Find in compartments...';
+            if (pathname.endsWith('/biomass')) return 'Find in biomass...';
+            if (pathname.endsWith('/pathways')) return 'Find in pathways...';
+            return 'Find in model...';
         }
-        return 'Search...';
+        return 'Find in page...';
     }, [pathname]);
 
-    const handleChange = (next: string) => {
-        apiRef.current.setFilterModel({
-            items: filterModel?.items ?? [],
-            logicOperator: filterModel?.logicOperator ?? GridLogicOperator.And,
-            quickFilterValues: next ? [next] : [],
-            quickFilterLogicOperator: filterModel?.quickFilterLogicOperator ?? GridLogicOperator.And,
+    /** Push search term into the DataGrid filter model as a quickFilter.
+     *  This triggers onFilterModelChange on the page → server re-fetch → only
+     *  matching rows are returned.  GridHighlightText reads quickFilterValues
+     *  and highlights the matched text in each cell automatically. */
+    const applySearch = useCallback(
+        (term: string) => {
+            const current = apiRef.current.state.filter?.filterModel ?? { items: [] };
+            apiRef.current.setFilterModel({
+                items: (current.items ?? []) as import('@mui/x-data-grid').GridFilterItem[],
+                logicOperator:
+                    (current.logicOperator as GridLogicOperator | undefined) ??
+                    GridLogicOperator.And,
+                quickFilterValues: term.trim() ? [term.trim()] : [],
+                quickFilterLogicOperator:
+                    (current.quickFilterLogicOperator as GridLogicOperator | undefined) ??
+                    GridLogicOperator.And,
+            });
+        },
+        [apiRef],
+    );
+
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const term = e.target.value;
+            setValue(term);
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+            debounceRef.current = setTimeout(() => applySearch(term), 300);
+        },
+        [applySearch],
+    );
+
+    const handleClear = useCallback(() => {
+        setValue('');
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        applySearch('');
+    }, [applySearch]);
+
+    // Clear quickFilter on unmount so navigating away doesn't leave a stale filter
+    useEffect(() => {
+        const api = apiRef.current;
+        return () => {
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+            try {
+                const current = api.state.filter?.filterModel ?? { items: [] };
+                api.setFilterModel({
+                    items: (current.items ?? []) as import('@mui/x-data-grid').GridFilterItem[],
+                    logicOperator:
+                        (current.logicOperator as GridLogicOperator | undefined) ??
+                        GridLogicOperator.And,
+                    quickFilterValues: [],
+                    quickFilterLogicOperator:
+                        (current.quickFilterLogicOperator as GridLogicOperator | undefined) ??
+                        GridLogicOperator.And,
+                });
+            } catch {
+                // api may be stale on unmount — safe to ignore
+            }
+        };
+    }, [apiRef]);
+
+    // Apply CSS Custom Highlight API to highlight matches in the grid
+    useEffect(() => {
+        const term = value.trim();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!term || typeof CSS === 'undefined' || !('highlights' in (CSS as any))) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (typeof CSS !== 'undefined' && 'highlights' in (CSS as any)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ((CSS as any).highlights as any).delete('search-results');
+            }
+            return;
+        }
+
+        const root = apiRef.current.rootElementRef?.current;
+        if (!root) return;
+
+        const updateHighlights = () => {
+            if (!('Highlight' in window)) return;
+            const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+            const ranges: Range[] = [];
+            const lowerTerm = term.toLowerCase();
+
+            let node = treeWalker.nextNode();
+            while (node) {
+                const text = node.textContent?.toLowerCase() || '';
+                let startIndex = 0;
+                let index;
+                while ((index = text.indexOf(lowerTerm, startIndex)) !== -1) {
+                    const range = new Range();
+                    range.setStart(node, index);
+                    range.setEnd(node, index + lowerTerm.length);
+                    ranges.push(range);
+                    startIndex = index + lowerTerm.length;
+                }
+                node = treeWalker.nextNode();
+            }
+
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const HighlightClass = (window as any).Highlight;
+            const highlight = new HighlightClass(...ranges);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ((CSS as any).highlights as any).set('search-results', highlight);
+        };
+
+        // Delay slightly to allow DataGrid to render the new filtered rows
+        const timeout = setTimeout(() => {
+            updateHighlights();
+        }, 100);
+
+        const observer = new MutationObserver(() => {
+            updateHighlights();
         });
-    };
+
+        observer.observe(root, { childList: true, subtree: true, characterData: true });
+
+        return () => {
+            clearTimeout(timeout);
+            observer.disconnect();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (typeof CSS !== 'undefined' && 'highlights' in (CSS as any)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ((CSS as any).highlights as any).delete('search-results');
+            }
+        };
+    }, [value, apiRef]);
 
     return (
-        <TextField
-            value={value}
-            onChange={(e) => handleChange(e.target.value)}
-            size="small"
-            fullWidth
-            placeholder={placeholder}
-            InputProps={{
-                startAdornment: (
-                    <InputAdornment position="start">
-                        <SearchIcon fontSize="small" sx={{ color: 'text.secondary' }} />
-                    </InputAdornment>
-                ),
-                endAdornment: value ? (
-                    <InputAdornment position="end">
-                        <IconButton
-                            size="small"
-                            aria-label="Clear search"
-                            onClick={() => handleChange('')}
-                            edge="end"
-                        >
-                            <CloseIcon fontSize="small" />
-                        </IconButton>
-                    </InputAdornment>
-                ) : undefined,
-            }}
-            sx={{ '& .MuiInputBase-input': { cursor: 'text' } }}
-        />
+        <>
+            <style dangerouslySetInnerHTML={{
+                __html: `
+                ::highlight(search-results) {
+                    background-color: #fff3cd;
+                    color: #856404;
+                }
+            `}} />
+            <TextField
+                value={value}
+                onChange={handleChange}
+                onKeyDown={(e) => {
+                    if (e.key === 'Escape') handleClear();
+                }}
+                size="small"
+                fullWidth
+                placeholder={placeholder}
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <SearchIcon fontSize="small" sx={{ color: 'text.secondary' }} />
+                        </InputAdornment>
+                    ),
+                    endAdornment: value ? (
+                        <InputAdornment position="end">
+                            <IconButton
+                                size="small"
+                                aria-label="Clear search"
+                                onClick={handleClear}
+                                edge="end"
+                            >
+                                <CloseIcon fontSize="small" />
+                            </IconButton>
+                        </InputAdornment>
+                    ) : undefined,
+                }}
+                sx={{ '& .MuiInputBase-input': { cursor: 'text' } }}
+            />
+        </>
     );
 }
 
@@ -192,7 +331,6 @@ type ToolbarFilterRow = {
     value: string;
 };
 
-type ToolbarLogicOperator = GridLogicOperator.And | GridLogicOperator.Or;
 
 function makeEmptyFilterRow(): ToolbarFilterRow {
     return {
@@ -209,8 +347,8 @@ function ToolbarFilterEditor() {
 
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
     const [allColumns, setAllColumns] = useState<GridColDef[]>([]);
-    const [draftRows, setDraftRows] = useState<ToolbarFilterRow[]>([makeEmptyFilterRow()]);
-    const [draftLogicOperator, setDraftLogicOperator] = useState<ToolbarLogicOperator>(GridLogicOperator.And);
+    // Community DataGrid supports only 1 filter item; we store exactly one draft row.
+    const [draftRow, setDraftRow] = useState<ToolbarFilterRow>(makeEmptyFilterRow());
     const [draftColumnVisibilityModel, setDraftColumnVisibilityModel] = useState<Record<string, boolean>>({});
     const [appliedHiddenColumnCount, setAppliedHiddenColumnCount] = useState(0);
 
@@ -242,7 +380,12 @@ function ToolbarFilterEditor() {
         Boolean(
             row.field &&
             row.operator &&
-            (isNoValueOperator(row.operator) || row.value.trim().length > 0),
+            (
+                isNoValueOperator(row.operator) ||
+                (ARRAY_VALUE_OPERATORS.has(row.operator)
+                    ? row.value.trim().split(',').some((v) => v.trim().length > 0)
+                    : row.value.trim().length > 0)
+            ),
         );
 
     const toFilterValue = (row: ToolbarFilterRow): GridFilterItem['value'] => {
@@ -250,6 +393,15 @@ function ToolbarFilterEditor() {
 
         const raw = row.value.trim();
         const type = getColumnType(row.field);
+
+        // isAnyOf needs an array
+        if (ARRAY_VALUE_OPERATORS.has(row.operator)) {
+            return raw
+                .split(',')
+                .map((v) => v.trim())
+                .filter(Boolean);
+        }
+
         if (type === 'number') {
             const parsed = Number(raw);
             return Number.isFinite(parsed) ? parsed : raw;
@@ -279,48 +431,27 @@ function ToolbarFilterEditor() {
             Object.values(visibilityModel).filter((visible) => visible === false).length,
         );
 
-        const existingItems = (filterModel?.items ?? []) as GridFilterItem[];
-        if (existingItems.length > 0) {
-            const mapped = existingItems.map((item) => ({
-                id: String(item.id ?? `filter-${Math.random().toString(16).slice(2)}`),
-                field: String(item.field ?? ''),
-                operator: String(item.operator ?? ''),
-                value: Array.isArray(item.value) ? item.value.map(String).join(', ') : String(item.value ?? ''),
-            }));
-            setDraftRows([...mapped, makeEmptyFilterRow()]);
+        // Load existing filter item (first only — Community DataGrid allows 1)
+        const existingItem = ((filterModel?.items ?? []) as GridFilterItem[])[0];
+        if (existingItem?.field) {
+            setDraftRow({
+                id: String(existingItem.id ?? `filter-${Math.random().toString(16).slice(2)}`),
+                field: String(existingItem.field ?? ''),
+                operator: String(existingItem.operator ?? ''),
+                value: Array.isArray(existingItem.value)
+                    ? existingItem.value.map(String).join(', ')
+                    : String(existingItem.value ?? ''),
+            });
         } else {
-            setDraftRows([makeEmptyFilterRow()]);
+            setDraftRow(makeEmptyFilterRow());
         }
 
-        setDraftLogicOperator((filterModel?.logicOperator as ToolbarLogicOperator | undefined) ?? GridLogicOperator.And);
         setAnchorEl(event.currentTarget);
     };
 
     const closeEditor = () => setAnchorEl(null);
 
-    const updateRow = (idx: number, patch: Partial<ToolbarFilterRow>) => {
-        setDraftRows((prev) => prev.map((row, i) => (i === idx ? { ...row, ...patch } : row)));
-    };
-
-    const addRow = () => {
-        const last = draftRows[draftRows.length - 1];
-        if (!last || !isFilled(last)) return;
-        setDraftRows((prev) => [...prev, makeEmptyFilterRow()]);
-    };
-
-    const removeRow = (idx: number) => {
-        if (draftRows.length === 1) {
-            setDraftRows([makeEmptyFilterRow()]);
-            return;
-        }
-        const remaining = draftRows.filter((_, i) => i !== idx);
-        setDraftRows(remaining.length > 0 ? remaining : [makeEmptyFilterRow()]);
-    };
-
-    const clearFiltersDraft = () => {
-        setDraftRows([makeEmptyFilterRow()]);
-        setDraftLogicOperator(GridLogicOperator.And);
-    };
+    const clearFiltersDraft = () => setDraftRow(makeEmptyFilterRow());
 
     const setAllColumnsVisibleDraft = (visible: boolean) => {
         setDraftColumnVisibilityModel((prev) => {
@@ -338,23 +469,17 @@ function ToolbarFilterEditor() {
             visible[column.field] = true;
         });
         setDraftColumnVisibilityModel(visible);
-        setDraftRows([makeEmptyFilterRow()]);
-        setDraftLogicOperator(GridLogicOperator.And);
+        setDraftRow(makeEmptyFilterRow());
     };
 
     const saveChanges = () => {
-        const items: GridFilterItem[] = draftRows
-            .filter(isFilled)
-            .map((row) => ({
-                id: row.id,
-                field: row.field,
-                operator: row.operator,
-                value: toFilterValue(row),
-            }));
+        const items: GridFilterItem[] = isFilled(draftRow)
+            ? [{ id: draftRow.id, field: draftRow.field, operator: draftRow.operator, value: toFilterValue(draftRow) }]
+            : [];
 
         apiRef.current.setFilterModel({
             items,
-            logicOperator: draftLogicOperator,
+            logicOperator: GridLogicOperator.And,
             quickFilterValues: filterModel?.quickFilterValues ?? [],
             quickFilterLogicOperator: filterModel?.quickFilterLogicOperator ?? GridLogicOperator.And,
         });
@@ -392,54 +517,39 @@ function ToolbarFilterEditor() {
                         }}
                     >
                         <Box>
-                            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+                            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.5 }}>
                                 <Typography variant="subtitle2" fontWeight={600}>
-                                    Column Filters
+                                    Column Filter
                                 </Typography>
                                 <Button variant="text" size="small" onClick={clearFiltersDraft}>
-                                    Clear filters
+                                    Clear
                                 </Button>
                             </Box>
-                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
-                                <Typography variant="body2" color="text.secondary">
-                                    Match rows:
-                                </Typography>
-                                <ToggleButtonGroup
-                                    exclusive
-                                    size="small"
-                                    value={draftLogicOperator}
-                                    onChange={(_event, value: ToolbarLogicOperator | null) => {
-                                        if (value) setDraftLogicOperator(value);
-                                    }}
-                                >
-                                    <ToggleButton value={GridLogicOperator.And}>All filters (AND)</ToggleButton>
-                                    <ToggleButton value={GridLogicOperator.Or}>Any filter (OR)</ToggleButton>
-                                </ToggleButtonGroup>
-                            </Box>
-                            <Stack spacing={1.5}>
-                                {draftRows.map((row, idx) => {
-                                    const operators = operatorOptionsForField(row.field);
-                                    const type = getColumnType(row.field);
-                                    const noValueOperator = isNoValueOperator(row.operator);
-                                    const isBoolean = type === 'boolean';
-                                    const inputType =
-                                        type === 'number'
-                                            ? 'number'
-                                            : type === 'dateTime'
-                                                ? 'datetime-local'
-                                                : type === 'date'
-                                                    ? 'date'
-                                                    : 'text';
-                                    const isDateInput = inputType === 'date' || inputType === 'datetime-local';
-
-                                    return (
+                            {(() => {
+                                const row = draftRow;
+                                const operators = operatorOptionsForField(row.field);
+                                const type = getColumnType(row.field);
+                                const noValueOp = isNoValueOperator(row.operator);
+                                const isArrayOp = ARRAY_VALUE_OPERATORS.has(row.operator);
+                                const isBoolean = type === 'boolean';
+                                const inputType =
+                                    type === 'number'
+                                        ? 'number'
+                                        : type === 'dateTime'
+                                            ? 'datetime-local'
+                                            : type === 'date'
+                                                ? 'date'
+                                                : 'text';
+                                const isDateInput = inputType === 'date' || inputType === 'datetime-local';
+                                const hint = isArrayOp ? ARRAY_OPERATOR_HINT[row.operator] : undefined;
+
+                                return (
+                                    <Stack spacing={1.5}>
                                         <Box
-                                            key={row.id}
                                             sx={{
                                                 display: 'grid',
-                                                gridTemplateColumns: '2fr 1.55fr 2fr auto auto',
+                                                gridTemplateColumns: '1fr 1fr',
                                                 gap: 1,
-                                                alignItems: 'center',
                                             }}
                                         >
                                             <TextField
@@ -448,11 +558,12 @@ function ToolbarFilterEditor() {
                                                 label="Column"
                                                 value={row.field}
                                                 onChange={(e) =>
-                                                    updateRow(idx, {
+                                                    setDraftRow((prev) => ({
+                                                        ...prev,
                                                         field: e.target.value,
                                                         operator: '',
                                                         value: '',
-                                                    })
+                                                    }))
                                                 }
                                             >
                                                 <MenuItem value="">Select column</MenuItem>
@@ -469,66 +580,53 @@ function ToolbarFilterEditor() {
                                                 label="Operator"
                                                 value={row.operator}
                                                 onChange={(e) => {
-                                                    const nextOperator = e.target.value;
-                                                    updateRow(idx, {
-                                                        operator: nextOperator,
-                                                        value: isNoValueOperator(nextOperator) ? '' : row.value,
-                                                    });
+                                                    const next = e.target.value;
+                                                    setDraftRow((prev) => ({
+                                                        ...prev,
+                                                        operator: next,
+                                                        value: isNoValueOperator(next) ? '' : prev.value,
+                                                    }));
                                                 }}
                                                 disabled={!row.field}
                                             >
                                                 <MenuItem value="">Select</MenuItem>
-                                                {operators.map((operator) => (
-                                                    <MenuItem key={operator.value} value={operator.value}>
-                                                        {operator.label}
+                                                {operators.map((op) => (
+                                                    <MenuItem key={op.value} value={op.value}>
+                                                        {op.label}
                                                     </MenuItem>
                                                 ))}
                                             </TextField>
+                                        </Box>
 
-                                            {isBoolean ? (
-                                                <TextField
-                                                    select
-                                                    size="small"
-                                                    label="Value"
-                                                    value={row.value}
-                                                    onChange={(e) => updateRow(idx, { value: e.target.value })}
-                                                    disabled={!row.field || !row.operator || noValueOperator}
-                                                >
-                                                    <MenuItem value="">Select</MenuItem>
-                                                    <MenuItem value="true">true</MenuItem>
-                                                    <MenuItem value="false">false</MenuItem>
-                                                </TextField>
-                                            ) : (
-                                                <TextField
-                                                    size="small"
-                                                    label="Value"
-                                                    value={row.value}
-                                                    onChange={(e) => updateRow(idx, { value: e.target.value })}
-                                                    disabled={!row.field || !row.operator || noValueOperator}
-                                                    type={inputType}
-                                                    InputLabelProps={isDateInput ? { shrink: true } : undefined}
-                                                />
-                                            )}
-
-                                            <IconButton
+                                        {isBoolean ? (
+                                            <TextField
+                                                select
                                                 size="small"
-                                                aria-label="Add filter row"
-                                                onClick={addRow}
-                                                disabled={idx !== draftRows.length - 1}
+                                                label="Value"
+                                                value={row.value}
+                                                onChange={(e) => setDraftRow((prev) => ({ ...prev, value: e.target.value }))}
+                                                disabled={!row.field || !row.operator || noValueOp}
                                             >
-                                                <AddIcon fontSize="small" />
-                                            </IconButton>
-                                            <IconButton
+                                                <MenuItem value="">Select</MenuItem>
+                                                <MenuItem value="true">true</MenuItem>
+                                                <MenuItem value="false">false</MenuItem>
+                                            </TextField>
+                                        ) : (
+                                            <TextField
                                                 size="small"
-                                                aria-label="Remove filter row"
-                                                onClick={() => removeRow(idx)}
-                                            >
-                                                <CloseIcon fontSize="small" />
-                                            </IconButton>
-                                        </Box>
-                                    );
-                                })}
-                            </Stack>
+                                                label="Value"
+                                                value={row.value}
+                                                onChange={(e) => setDraftRow((prev) => ({ ...prev, value: e.target.value }))}
+                                                disabled={!row.field || !row.operator || noValueOp}
+                                                type={inputType}
+                                                InputLabelProps={isDateInput ? { shrink: true } : undefined}
+                                                helperText={hint}
+                                                placeholder={isArrayOp ? 'value1, value2, ...' : undefined}
+                                            />
+                                        )}
+                                    </Stack>
+                                );
+                            })()}
                         </Box>
 
                         <Box>
diff --git a/components/ui/MoleculeRenderer.tsx b/components/ui/MoleculeRenderer.tsx
index 5b34939d..6f47e780 100644
--- a/components/ui/MoleculeRenderer.tsx
+++ b/components/ui/MoleculeRenderer.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useMemo, useState } from 'react';
+import Image from 'next/image';
 import Skeleton from '@mui/material/Skeleton';
 import { getRDKit } from '@/lib/rdkit';
 import { getCompoundImageUrl } from '@/lib/api/biochem';
@@ -100,7 +101,7 @@ export default function MoleculeRenderer({
         return () => {
             cancelled = true;
         };
-    }, [smiles, atomColorsKey, width, height]);
+    }, [smiles, atomColorsKey, atomColors, width, height]);
 
     if (state === 'loading') {
         return (
@@ -134,12 +135,12 @@ export default function MoleculeRenderer({
 
     if (state === 'png') {
         return (
-            <img
+            <Image
                 src={getCompoundImageUrl(compoundId)}
                 alt={alt ?? `Structure of ${compoundId}`}
+                width={width}
+                height={height}
                 style={{
-                    width,
-                    height,
                     objectFit: 'contain',
                     border: '1px solid #e0e0e0',
                     borderRadius: 4,
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 05e726d1..c75b50e0 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -12,6 +12,11 @@ const eslintConfig = defineConfig([
     "out/**",
     "build/**",
     "next-env.d.ts",
+    // Non-product/generated/archived areas:
+    "legacy/**",
+    "gsd-opencode/**",
+    "playwright-report/**",
+    "test-results/**",
   ]),
 ]);
 
diff --git a/lib/api/biochem.ts b/lib/api/biochem.ts
index 4e03d11f..8fd0292c 100644
--- a/lib/api/biochem.ts
+++ b/lib/api/biochem.ts
@@ -9,7 +9,7 @@
  * the unified proxy when available.
  */
 
-import { SOLR_BASE, CPD_IMG_BASE, MODELSEED_API_URL } from './config';
+import { SOLR_BASE, SOLR_BASE_LEGACY, CPD_IMG_BASE, MODELSEED_API_URL } from './config';
 
 /* ─── Types ──────────────────────────────────────────────────── */
 
@@ -135,8 +135,8 @@ function normalizeFilterValue(value: unknown): string {
     return String(value ?? '').trim();
 }
 
-/** Build a wildcard-safe search token. */
-function toWildcardToken(value: string): string {
+/** Build a wildcard-safe search token for legacy Solr. */
+function toSolrWildcardToken(value: string): string {
     return escapeSolrTerm(value.replace(/%20/g, ' ').trim()).replace(/\s+/g, '*');
 }
 
@@ -174,7 +174,7 @@ function buildFilterClause(item: GridFilterItem): string | null {
     }
 
     const value = normalizeFilterValue(rawValue);
-    const wildcardValue = toWildcardToken(value);
+    const wildcardValue = toSolrWildcardToken(value);
     const literalValue = toSolrLiteral(value);
     const rangeBoundary = toRangeBoundary(value);
 
@@ -242,7 +242,7 @@ function buildQuickSearchClause(
 
     const termClauses = terms
         .map((term) => {
-            const token = toWildcardToken(term);
+            const token = toSolrWildcardToken(term);
             if (!token) return '';
             const usePrefixOnly = token.length < MIN_WILDCARD_QUERY_LENGTH;
 
@@ -292,17 +292,17 @@ function buildSolrUrl(collection: string, opts: SolrQueryOpts = {}): string {
     const filterClauses = (filterModel?.items ?? [])
         .map((item) => buildFilterClause(item))
         .filter((clause): clause is string => Boolean(clause));
-    const filterLogic = filterModel?.logicOperator === 'or' ? 'OR' : 'AND';
+    const filterLogic = filterModel?.logicOperator === 'or' ? ' OR ' : ' AND ';
     const combinedFilterClause =
         filterClauses.length > 1
-            ? `(${filterClauses.join(` ${filterLogic} `)})`
+            ? `(${filterClauses.join(filterLogic)})`
             : (filterClauses[0] ?? '');
 
     const queryColumnClauses = queryColumn
         ? Object.entries(queryColumn)
             .map(([field, rawValue]) => {
                 const value = normalizeFilterValue(rawValue);
-                const token = toWildcardToken(value);
+                const token = toSolrWildcardToken(value);
                 if (!token) return '';
                 return `${toSolrField(field)}:*${token}*`;
             })
@@ -328,7 +328,8 @@ function buildSolrUrl(collection: string, opts: SolrQueryOpts = {}): string {
         finalClauses.push('*');
     }
 
-    url += `&q=${finalClauses.length > 0 ? finalClauses.join(' AND ') : '*'}`;
+    const qValue = finalClauses.length > 0 ? finalClauses.join(' AND ') : '*';
+    url += `&q=${encodeURIComponent(qValue)}`;
 
     // Pagination
     if (limit) url += `&rows=${limit}`;
@@ -353,47 +354,157 @@ async function fetchSolr<T>(url: string): Promise<SolrResponse<T>> {
 }
 
 /**
- * Fetcher for the new modelseed-api (Poplar) REST biochemistry endpoints.
- * Currently limited to simple query-based search.
+ * Explicit REST fetcher for modelseed-api biochemistry endpoints.
+ * Note: reaction/compound pages are pinned to legacy Solr; this is for
+ * other consumers that intentionally target modelseed-api.
  */
 async function fetchModelseedApiBiochem<T>(
     endpoint: string,
     opts: SolrQueryOpts = {}
 ): Promise<SolrResponse<T>> {
-    const { query, limit = 25, offset = 0, filterModel } = opts;
-    const baseUrl = `${MODELSEED_API_URL}/api/biochem/${endpoint}`;
-
-    // Map SolrQueryOpts to REST params
-    // Note: Poplar currently only supports simple 'query' and 'limit'
-    let activeQuery = query;
-    if (!activeQuery && filterModel?.quickFilterValues && filterModel.quickFilterValues.length > 0) {
-        activeQuery = filterModel.quickFilterValues
-            .map((value) => normalizeFilterValue(value))
+    const { query, limit = 25, offset = 0, filterModel, sort } = opts;
+
+    let activeSearch = query;
+    if (!activeSearch && filterModel?.quickFilterValues && filterModel.quickFilterValues.length > 0) {
+        activeSearch = filterModel.quickFilterValues
+            .map((v) => String(v).trim())
             .filter(Boolean)
             .join(' ');
     }
 
-    let url = `${baseUrl}?limit=${limit}`;
-    if (activeQuery) {
-        url = `${MODELSEED_API_URL}/api/biochem/search?query=${encodeURIComponent(activeQuery)}&limit=${limit}&type=${endpoint}`;
-    } else {
-        // Poplar doesn't have a broad "list all" without IDs yet, 
-        // fallback to search with empty or universal query if possible, or just return empty
-        url = `${baseUrl}?limit=${limit}`; 
+    const hasColumnFilters = (filterModel?.items?.length ?? 0) > 0;
+    const needsLocalTransforms = hasColumnFilters || Boolean(sort);
+    // Guardrail to avoid excessive payload sizes when offset is large.
+    const MAX_REST_FETCH_LIMIT = 5000;
+    const fetchLimit = needsLocalTransforms
+        ? Math.min(Math.max(limit + offset, 1000), MAX_REST_FETCH_LIMIT)
+        : Math.min(limit, MAX_REST_FETCH_LIMIT);
+
+    const primaryUrl = activeSearch
+        ? `${MODELSEED_API_URL}/api/biochem/search?query=${encodeURIComponent(activeSearch)}&limit=${fetchLimit}&type=${endpoint}`
+        : `${MODELSEED_API_URL}/api/biochem/${endpoint}?limit=${fetchLimit}`;
+
+    let res = await fetch(primaryUrl);
+    if (!res.ok && !activeSearch) {
+        const fallbackUrl = `${MODELSEED_API_URL}/api/biochem/search?query=*&limit=${fetchLimit}&type=${endpoint}`;
+        res = await fetch(fallbackUrl);
     }
-
-    const res = await fetch(url);
     if (!res.ok) throw new Error(`modelseed-api request failed: ${res.status}`);
     const data = await res.json();
 
-    // Map REST array response to SolrResponse format for compatibility
+    const rawDocs: T[] = Array.isArray(data)
+        ? (data as T[])
+        : ((data.docs || []) as T[]);
+
+    const filteredDocs = hasColumnFilters
+        ? rawDocs.filter((doc) => matchesFilterModel(doc as Record<string, unknown>, filterModel?.items ?? []))
+        : rawDocs;
+    const sortedDocs = sort ? sortDocs(filteredDocs, sort) : filteredDocs;
+    const pagedDocs = sortedDocs.slice(offset, offset + limit);
+
     return {
-        numFound: data.length, // REST API doesn't return total count yet
+        numFound: sortedDocs.length,
         start: offset,
-        docs: data as T[],
+        docs: pagedDocs,
     };
 }
 
+function normalizeFieldValue(value: unknown): string {
+    if (Array.isArray(value)) return value.map((v) => String(v ?? '')).join(' ');
+    if (value == null) return '';
+    return String(value);
+}
+
+function compareStringByOperator(fieldValue: string, operator: string, filterValue: string): boolean {
+    const fieldNorm = fieldValue.toLowerCase();
+    const valueNorm = filterValue.toLowerCase();
+    switch (operator) {
+        case 'contains':
+            return fieldNorm.includes(valueNorm);
+        case 'doesNotContain':
+            return !fieldNorm.includes(valueNorm);
+        case 'equals':
+        case 'is':
+            return fieldNorm === valueNorm;
+        case 'doesNotEqual':
+        case 'not':
+            return fieldNorm !== valueNorm;
+        case 'startsWith':
+            return fieldNorm.startsWith(valueNorm);
+        case 'endsWith':
+            return fieldNorm.endsWith(valueNorm);
+        default:
+            return fieldNorm.includes(valueNorm);
+    }
+}
+
+function matchesFilterItem(doc: Record<string, unknown>, item: GridFilterItem): boolean {
+    const operator = String(item.operator ?? '');
+    const field = toSolrField(String(item.field ?? ''));
+    if (!field || !operator) return true;
+
+    const rawField = doc[field];
+    const fieldValue = normalizeFieldValue(rawField);
+    const value = normalizeFilterValue(item.value);
+
+    if (operator === 'isEmpty') return fieldValue.trim().length === 0;
+    if (operator === 'isNotEmpty') return fieldValue.trim().length > 0;
+    if (operator === 'isAnyOf') {
+        const values = Array.isArray(item.value)
+            ? item.value.map((v) => normalizeFilterValue(v)).filter(Boolean)
+            : value.split(',').map((v) => v.trim()).filter(Boolean);
+        if (values.length === 0) return true;
+        return values.some((v) => compareStringByOperator(fieldValue, 'equals', v));
+    }
+
+    const fieldNum = Number(fieldValue);
+    const valueNum = Number(value);
+    const bothNumeric = Number.isFinite(fieldNum) && Number.isFinite(valueNum);
+    if (bothNumeric) {
+        switch (operator) {
+            case '>':
+            case 'after':
+                return fieldNum > valueNum;
+            case '>=':
+            case 'onOrAfter':
+                return fieldNum >= valueNum;
+            case '<':
+            case 'before':
+                return fieldNum < valueNum;
+            case '<=':
+            case 'onOrBefore':
+                return fieldNum <= valueNum;
+            case '=':
+                return fieldNum === valueNum;
+            case '!=':
+                return fieldNum !== valueNum;
+        }
+    }
+
+    return compareStringByOperator(fieldValue, operator, value);
+}
+
+function matchesFilterModel(doc: Record<string, unknown>, items: GridFilterItem[]): boolean {
+    const activeItems = items.filter((item) => item.field && item.operator);
+    if (activeItems.length === 0) return true;
+    return activeItems.every((item) => matchesFilterItem(doc, item));
+}
+
+function sortDocs<T>(docs: T[], sort: { field: string; desc?: boolean }): T[] {
+    const { field, desc } = sort;
+    const direction = desc ? -1 : 1;
+    return [...docs].sort((a, b) => {
+        const av = (a as Record<string, unknown>)[field];
+        const bv = (b as Record<string, unknown>)[field];
+        const aNum = Number(av);
+        const bNum = Number(bv);
+        if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
+            return direction * (aNum - bNum);
+        }
+        return direction * normalizeFieldValue(av).localeCompare(normalizeFieldValue(bv));
+    });
+}
+
 /* ─── Constants ──────────────────────────────────────────────── */
 
 /** Field name mapping: UI uses 'synonyms' but Solr uses 'aliases'. */
@@ -403,7 +514,7 @@ const SYNONYM_FIELD_ALIAS = 'aliases';
 const MIN_WILDCARD_QUERY_LENGTH = 3;
 
 /** Reaction search fields matching legacy `rxn_sFields`. */
-const RXN_SEARCH_FIELDS = ['id', 'name', 'status', 'ecs', 'synonyms', 'aliases', 'pathways', 'stoichiometry', 'notes'];
+const RXN_SEARCH_FIELDS = ['id', 'name', 'status', 'ec_numbers', 'aliases', 'pathways', 'stoichiometry', 'notes'];
 
 /** Reaction visible fields matching legacy `rxnOpts.visible`. */
 const RXN_VISIBLE = [
@@ -458,16 +569,7 @@ export async function getReactions(opts: SolrQueryOpts = {}): Promise<SolrRespon
         ...opts,
     };
 
-    if (SOLR_BASE.includes('/api/')) {
-        const res = await fetchModelseedApiBiochem<Reaction>('reactions', mergedOpts);
-        res.docs.forEach((doc) => {
-            if (doc.is_obsolete === '1') {
-                doc.status += ' (and is obsolete)';
-            }
-        });
-        return res;
-    }
-
+    // Reactions page is intentionally pinned to legacy Solr.
     const url = buildSolrUrl('reactions', mergedOpts);
     const res = await fetchSolr<Reaction>(url);
 
@@ -508,14 +610,37 @@ export async function getCompounds(opts: SolrQueryOpts = {}): Promise<SolrRespon
         ...opts,
     };
 
-    if (SOLR_BASE.includes('/api/')) {
-        return fetchModelseedApiBiochem<Compound>('compounds', mergedOpts);
-    }
-
+    // Compounds page is intentionally pinned to legacy Solr.
     const url = buildSolrUrl('compounds', mergedOpts);
     return fetchSolr<Compound>(url);
 }
 
+/**
+ * Explicit modelseed-api reactions query path.
+ * Use this only when intentionally targeting the REST backend.
+ */
+export async function getReactionsFromModelseedApi(
+    opts: SolrQueryOpts = {}
+): Promise<SolrResponse<Reaction>> {
+    const res = await fetchModelseedApiBiochem<Reaction>('reactions', opts);
+    res.docs.forEach((doc) => {
+        if (doc.is_obsolete === '1') {
+            doc.status += ' (and is obsolete)';
+        }
+    });
+    return res;
+}
+
+/**
+ * Explicit modelseed-api compounds query path.
+ * Use this only when intentionally targeting the REST backend.
+ */
+export async function getCompoundsFromModelseedApi(
+    opts: SolrQueryOpts = {}
+): Promise<SolrResponse<Compound>> {
+    return fetchModelseedApiBiochem<Compound>('compounds', opts);
+}
+
 /**
  * Fetch a specific reaction by its ModelSEED ID.
  * 
@@ -530,7 +655,8 @@ export async function getCompounds(opts: SolrQueryOpts = {}): Promise<SolrRespon
  * ```
  */
 export async function getReactionById(id: string): Promise<Reaction> {
-    const url = `${SOLR_BASE}reactions_staging/select?wt=json&q=id:${id}`;
+    // Keep detail lookups on legacy Solr until modelseed-api exposes an ID endpoint.
+    const url = `${SOLR_BASE_LEGACY}reactions_staging/select?wt=json&q=id:${id}`;
     const res = await fetchSolr<Reaction>(url);
     return res.docs[0];
 }
@@ -549,7 +675,8 @@ export async function getReactionById(id: string): Promise<Reaction> {
  * ```
  */
 export async function getCompoundById(id: string): Promise<Compound> {
-    const url = `${SOLR_BASE}compounds_staging/select?wt=json&q=id:${id}`;
+    // Keep detail lookups on legacy Solr until modelseed-api exposes an ID endpoint.
+    const url = `${SOLR_BASE_LEGACY}compounds_staging/select?wt=json&q=id:${id}`;
     const res = await fetchSolr<Compound>(url);
     return res.docs[0];
 }
@@ -592,7 +719,8 @@ function getCompoundsByIdsWithFields(ids: string[], fields: string[]): Promise<M
 
     const idQuery = uniqueIds.map((id) => `id:${id}`).join(' OR ');
     const fl = fields.join(',');
-    const url = `${SOLR_BASE}compounds_staging/select?wt=json&q=(${idQuery})&rows=${uniqueIds.length}&fl=${fl}`;
+    // Batch ID fetch is currently Solr-backed for both modes.
+    const url = `${SOLR_BASE_LEGACY}compounds_staging/select?wt=json&q=(${idQuery})&rows=${uniqueIds.length}&fl=${fl}`;
 
     return fetchSolr<Compound>(url).then((res) => {
         const map = new Map<string, Compound>();
@@ -627,7 +755,8 @@ export async function findReactionsForCompound(
     const offset = opts.offset ?? 0;
     const sort = opts.sort;
 
-    let url = `${SOLR_BASE}reactions_staging/select?wt=json&q=equation:*${cpdId}*&fl=*`;
+    // Reverse compound lookup remains Solr-backed for now.
+    let url = `${SOLR_BASE_LEGACY}reactions_staging/select?wt=json&q=equation:*${cpdId}*&fl=*`;
     if (limit) url += `&rows=${limit}`;
     if (offset) url += `&start=${offset}`;
     if (sort) {
diff --git a/styles/icomoon/style.css b/styles/icomoon/style.css
new file mode 100644
index 00000000..cbce7a9d
--- /dev/null
+++ b/styles/icomoon/style.css
@@ -0,0 +1,142 @@
+@font-face {
+	font-family: 'icomoon';
+	src:url('/icomoon/fonts/icomoon.eot?-deyvmg');
+	src:url('/icomoon/fonts/icomoon.eot?#iefix-deyvmg') format('embedded-opentype'),
+		url('/icomoon/fonts/icomoon.ttf?-deyvmg') format('truetype'),
+		url('/icomoon/fonts/icomoon.woff?-deyvmg') format('woff'),
+		url('/icomoon/fonts/icomoon.svg?-deyvmg#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+	font-family: 'icomoon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-git-compare:before {
+	content: "\e618";
+}
+.icon-microscope:before {
+	content: "\e613";
+}
+.icon-earth:before {
+	content: "\e606";
+}
+.icon-tools3:before {
+	content: "\e604";
+}
+.icon-info:before {
+	content: "\ea0c";
+}
+.icon-leaf:before {
+	content: "\e9a4";
+}
+.icon-pencil2:before {
+	content: "\e615";
+}
+.icon-quill:before {
+	content: "\e614";
+}
+.icon-eye-plus:before {
+	content: "\e616";
+}
+.icon-eye-minus:before {
+	content: "\e617";
+}
+.icon-benzene:before {
+	content: "\e607";
+}
+.icon-archive:before {
+	content: "\e60f";
+}
+.icon-folder-open-o:before {
+	content: "\e605";
+}
+.icon-tools:before {
+	content: "\e601";
+}
+.icon-lab:before {
+	content: "\e608";
+}
+.icon-tools-2:before {
+	content: "\e602";
+}
+.icon-lab2:before {
+	content: "\e609";
+}
+.icon-trash:before {
+	content: "\e60e";
+}
+.icon-stack:before {
+	content: "\e610";
+}
+.icon-archive2:before {
+	content: "\e611";
+}
+.icon-archive:before {
+	content: "\e60f";
+}
+.icon-folder-open-o:before {
+	content: "\e605";
+}
+.icon-tools:before {
+	content: "\e601";
+}
+.icon-lab:before {
+	content: "\e608";
+}
+.icon-tools-2:before {
+	content: "\e602";
+}
+.icon-lab2:before {
+	content: "\e609";
+}
+.icon-trash:before {
+	content: "\e60e";
+}
+.icon-stack:before {
+	content: "\e610";
+}
+.icon-add:before {
+	content: "\e612";
+}
+.icon-file-download:before {
+	content: "\e60d";
+}
+.icon-folder-add:before {
+	content: "\e603";
+}
+.icon-highlight-remove:before {
+	content: "\e60a";
+}
+.icon-remove-circle-outline:before {
+	content: "\e60b";
+}
+.icon-pencil2:before {
+	content: "\e615";
+}
+.icon-quill:before {
+	content: "\e614";
+}
+.icon-eye-plus:before {
+	content: "\e616";
+}
+.icon-eye-minus:before {
+	content: "\e617";
+}
+.icon-close:before {
+	content: "\e600";
+}
+.icon-cog:before {
+	content: "\e60c";
+}
diff --git a/tests/e2e/biochem/compounds.spec.ts b/tests/e2e/biochem/compounds.spec.ts
index f691a349..66e5ffda 100644
--- a/tests/e2e/biochem/compounds.spec.ts
+++ b/tests/e2e/biochem/compounds.spec.ts
@@ -7,7 +7,7 @@ test.describe('Compounds Page - Search & Display', () => {
     });
 
     test('should search across all compound fields', async ({ page }) => {
-        const searchInput = page.locator('input[placeholder*="Search"]').first();
+        const searchInput = page.locator('input[placeholder*="Find in"]').first();
         await searchInput.fill('cpd');
         await expect(page.locator('[role="row"]').nth(1)).toBeVisible({ timeout: 10000 });
 
@@ -21,21 +21,21 @@ test.describe('Compounds Page - Search & Display', () => {
         await expect(exportButton).toBeVisible();
         await exportButton.click();
 
-        const modal = page.locator('[role="dialog"]');
+        const modal = page.getByRole('dialog', { name: 'Export Data' });
         await expect(modal).toBeVisible({ timeout: 10000 });
 
         await page.locator('button:has-text("Cancel")').click();
     });
 
     test('export modal should show active search filter', async ({ page }) => {
-        const searchInput = page.locator('input[placeholder*="Search"]').first();
+        const searchInput = page.locator('input[placeholder*="Find in"]').first();
         await searchInput.fill('cpd');
         await expect(page.locator('[role="row"]').nth(1)).toBeVisible({ timeout: 10000 });
 
         const exportButton = page.locator('button:has-text("Export CSV")');
         await exportButton.click();
 
-        const modal = page.locator('[role="dialog"]');
+        const modal = page.getByRole('dialog', { name: 'Export Data' });
         await expect(modal).toBeVisible({ timeout: 10000 });
 
         await page.locator('button:has-text("Cancel")').click();
diff --git a/tests/e2e/biochem/reactions.spec.ts b/tests/e2e/biochem/reactions.spec.ts
index c08dc3d6..efee50a8 100644
--- a/tests/e2e/biochem/reactions.spec.ts
+++ b/tests/e2e/biochem/reactions.spec.ts
@@ -7,7 +7,7 @@ test.describe('Reactions Page - Search Functionality', () => {
     });
 
     test('should search across all fields including chemical equations', async ({ page }) => {
-        const searchInput = page.locator('input[placeholder*="Search"]').first();
+        const searchInput = page.locator('input[placeholder*="Find in"]').first();
         await searchInput.fill('rxn');
         await expect(page.locator('[role="row"]').nth(1)).toBeVisible({ timeout: 10000 });
 
@@ -17,7 +17,7 @@ test.describe('Reactions Page - Search Functionality', () => {
     });
 
     test('should search by reaction ID', async ({ page }) => {
-        const searchInput = page.locator('input[placeholder*="Search"]').first();
+        const searchInput = page.locator('input[placeholder*="Find in"]').first();
         await searchInput.fill('rxn00001');
         await expect(page.locator('[role="row"]').nth(1)).toBeVisible({ timeout: 10000 });
 
@@ -27,11 +27,11 @@ test.describe('Reactions Page - Search Functionality', () => {
     });
 
     test('should show active search in filter button', async ({ page }) => {
-        const searchInput = page.locator('input[placeholder*="Search"]').first();
+        const searchInput = page.locator('input[placeholder*="Find in"]').first();
         await searchInput.fill('glucose');
         await expect(page.locator('[role="row"]').nth(1)).toBeVisible({ timeout: 10000 });
 
-        const filterButton = page.locator('button:has-text("Filters")');
+        const filterButton = page.locator('button:has-text("Filter & Columns")');
         await expect(filterButton).toBeVisible();
     });
 });
diff --git a/tests/e2e/biochem/search-find.spec.ts b/tests/e2e/biochem/search-find.spec.ts
new file mode 100644
index 00000000..5808bde5
--- /dev/null
+++ b/tests/e2e/biochem/search-find.spec.ts
@@ -0,0 +1,149 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Find-in-page search bar tests.
+ *
+ * The search bar sets DataGrid quickFilterValues → triggers server-side re-fetch
+ * → only matching rows are returned.  GridHighlightText renders <mark> highlights
+ * inside each cell that contains the matching text.
+ */
+test.describe('Find in Page Search', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/biochem/reactions');
+        await page.waitForSelector('[role="grid"]', { timeout: 30000 });
+        // Wait for at least one data row
+        await page.waitForFunction(
+            () => {
+                const grid = document.querySelector('[role="grid"]');
+                return grid && grid.querySelectorAll('[role="row"]').length > 1;
+            },
+            { timeout: 30000 },
+        );
+    });
+
+    test('grid loads with data rows', async ({ page }) => {
+        await expect(page.locator('[role="grid"]')).toBeVisible();
+        expect(await page.locator('[role="row"]').count()).toBeGreaterThan(1);
+    });
+
+    test('search box is visible with correct placeholder', async ({ page }) => {
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await expect(searchBox).toBeVisible();
+    });
+
+    test('typing filters rows to only matching ones', async ({ page }) => {
+        const initialRows = await page.locator('[role="row"]').count();
+
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('atp');
+        // Debounce (300ms) + server round-trip
+        await page.waitForTimeout(1500);
+
+        const filteredRows = await page.locator('[role="row"]').count();
+        // Must have at least header + 1 result
+        expect(filteredRows).toBeGreaterThan(1);
+        // Should be fewer than (or equal to) unfiltered total
+        expect(filteredRows).toBeLessThanOrEqual(initialRows);
+    });
+
+    test('matching text is highlighted in cells', async ({ page }) => {
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('atp');
+        await page.waitForTimeout(1500);
+
+        // GridHighlightText renders <mark> inside cells
+        const highlights = page.locator('[role="gridcell"] mark');
+        await expect(highlights.first()).toBeVisible({ timeout: 5000 });
+        expect(await highlights.count()).toBeGreaterThan(0);
+    });
+
+    test('highlighted mark text matches the search term (case-insensitive)', async ({ page }) => {
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('atp');
+        await page.waitForTimeout(1500);
+
+        const firstMark = page.locator('[role="gridcell"] mark').first();
+        await expect(firstMark).toBeVisible({ timeout: 5000 });
+        const text = await firstMark.innerText();
+        expect(text.toLowerCase()).toBe('atp');
+    });
+
+    test('clear button removes filter and restores all rows', async ({ page }) => {
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('atp');
+        await page.waitForTimeout(1500);
+
+        const filteredRows = await page.locator('[role="row"]').count();
+
+        const clearButton = page.locator('button[aria-label="Clear search"]');
+        await expect(clearButton).toBeVisible();
+        await clearButton.click();
+        await page.waitForTimeout(1500);
+
+        await expect(searchBox).toHaveValue('');
+
+        // Row count should be back to unfiltered (more rows than filtered)
+        const restoredRows = await page.locator('[role="row"]').count();
+        expect(restoredRows).toBeGreaterThanOrEqual(filteredRows);
+
+        // No highlights should remain
+        expect(await page.locator('[role="gridcell"] mark').count()).toBe(0);
+    });
+
+    test('Escape key clears search', async ({ page }) => {
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('atp');
+        await page.waitForTimeout(1500);
+
+        await searchBox.press('Escape');
+        await page.waitForTimeout(1500);
+
+        await expect(searchBox).toHaveValue('');
+        expect(await page.locator('[role="gridcell"] mark').count()).toBe(0);
+    });
+
+    test('search for "phos" returns rows and highlights across pagination', async ({ page }) => {
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('phos');
+        await page.waitForTimeout(1500);
+
+        // Should find rows (phosphate reactions exist in ModelSEED)
+        const rows = await page.locator('[role="row"]').count();
+        expect(rows).toBeGreaterThan(1); // header + at least 1 data row
+
+        // Highlights should appear
+        const marks = page.locator('[role="gridcell"] mark');
+        await expect(marks.first()).toBeVisible({ timeout: 5000 });
+        expect(await marks.count()).toBeGreaterThan(0);
+    });
+
+    test('no-match search returns empty grid gracefully', async ({ page }) => {
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('xyzxyzxyz_no_match_9999');
+        await page.waitForTimeout(1500);
+
+        // Only header row should remain (no data rows)
+        const rows = await page.locator('[role="row"]').count();
+        expect(rows).toBeLessThanOrEqual(2); // at most header + empty-state row
+
+        // No highlights
+        expect(await page.locator('[role="gridcell"] mark').count()).toBe(0);
+    });
+
+    test('Filter & Columns button still works alongside search', async ({ page }) => {
+        // Apply a search first
+        const searchBox = page.locator('input[placeholder*="Find in"]').first();
+        await searchBox.fill('atp');
+        await page.waitForTimeout(1500);
+
+        // Filter panel should still open
+        const filterButton = page.locator('button:has-text("Filter & Columns")');
+        await expect(filterButton).toBeVisible();
+        await filterButton.click();
+
+        await expect(page.locator('text=Visible Columns').first()).toBeVisible({ timeout: 5000 });
+
+        // Close without changes
+        await page.locator('button:has-text("Cancel")').first().click();
+    });
+});
diff --git a/tests/e2e/datacontrol-header.spec.ts b/tests/e2e/datacontrol-header.spec.ts
new file mode 100644
index 00000000..32564eb0
--- /dev/null
+++ b/tests/e2e/datacontrol-header.spec.ts
@@ -0,0 +1,148 @@
+import { expect, test, type Locator, type Page } from '@playwright/test';
+
+async function waitForGridData(page: Page, requireDataRows = true): Promise<void> {
+  await page.waitForSelector('[role="grid"]', { timeout: 30000 });
+  if (requireDataRows) {
+    await page.waitForFunction(() => {
+      const grid = document.querySelector('[role="grid"]');
+      return Boolean(grid && grid.querySelectorAll('[role="row"]').length > 1);
+    }, { timeout: 30000 });
+  }
+}
+
+async function searchWithHeader(page: Page, term: string): Promise<void> {
+  const searchInput = page.locator('input[placeholder*="Find in"]').first();
+  await expect(searchInput).toBeVisible({ timeout: 10000 });
+  await searchInput.fill(term);
+  await page.waitForTimeout(1400);
+}
+
+async function openFilterDialog(page: Page): Promise<void> {
+  const filterButton = page.locator('button:has-text("Filter & Columns")').first();
+  await expect(filterButton).toBeVisible({ timeout: 10000 });
+  await filterButton.click();
+  await expect(page.locator('text=Visible Columns').first()).toBeVisible({ timeout: 10000 });
+}
+
+async function applyFilter(
+  page: Page,
+  args: { column: string; operator: string; value?: string }
+): Promise<void> {
+  await openFilterDialog(page);
+  const columnCombo = page.getByLabel('Column').first();
+  await columnCombo.click();
+  await page.getByRole('option', { name: args.column, exact: true }).click();
+
+  const operatorCombo = page.getByLabel('Operator').first();
+  await operatorCombo.click();
+  await page.getByRole('option', { name: args.operator, exact: true }).click();
+
+  if (args.value !== undefined) {
+    await page.getByLabel('Value').first().fill(args.value);
+  }
+  await page.locator('button:has-text("Save")').first().click();
+  await page.waitForTimeout(1400);
+}
+
+async function clearFilterDraftAndSave(page: Page): Promise<void> {
+  await openFilterDialog(page);
+  await page.locator('button:has-text("Clear")').first().click();
+  await page.locator('button:has-text("Save")').first().click();
+  await page.waitForTimeout(1000);
+}
+
+function dataRows(page: Page): Locator {
+  return page.locator('[role="row"]').filter({ hasNotText: 'ID' });
+}
+
+async function readIdentifierFromFirstDataRow(page: Page, prefix: string): Promise<string> {
+  const cells = page.locator('[role="row"]').nth(1).locator('[role="gridcell"]');
+  const cellTexts = await cells.allInnerTexts();
+  const found = cellTexts
+    .map((text) => text.trim())
+    .find((text) => text.toLowerCase().startsWith(prefix.toLowerCase()));
+  if (!found) {
+    throw new Error(`Could not find identifier starting with "${prefix}" in first data row`);
+  }
+  return found;
+}
+
+test.describe('DataControlHeader - biochem operator matrix', () => {
+  test('reactions supports search + operator filters + highlight', async ({ page }) => {
+    await page.goto('/biochem/reactions');
+    await waitForGridData(page);
+    const reactionId = await readIdentifierFromFirstDataRow(page, 'rxn');
+    const reactionContainsToken = reactionId.slice(-3);
+
+    const baselineCount = await dataRows(page).count();
+    expect(baselineCount).toBeGreaterThan(0);
+
+    await searchWithHeader(page, 'atp');
+    await expect(page.locator('[role="gridcell"] mark').first()).toBeVisible({ timeout: 8000 });
+    await clearFilterDraftAndSave(page);
+
+    await applyFilter(page, { column: 'ID', operator: 'starts with', value: 'rxn0' });
+    expect(await dataRows(page).count()).toBeGreaterThan(0);
+
+    await applyFilter(page, { column: 'ID', operator: 'contains', value: reactionContainsToken });
+    const containsCount = await dataRows(page).count();
+    expect(containsCount).toBeGreaterThan(0);
+
+    await applyFilter(page, { column: 'ID', operator: 'equals', value: reactionId });
+    const equalsCount = await dataRows(page).count();
+    expect(equalsCount).toBeLessThanOrEqual(containsCount);
+    await expect(page.locator('button:has-text("Filter & Columns (")').first()).toBeVisible();
+
+    await applyFilter(page, { column: 'ID', operator: 'does not contain', value: 'rxn' });
+    expect(await dataRows(page).count()).toBe(0);
+
+    await applyFilter(page, { column: 'ID', operator: 'is not empty' });
+    expect(await dataRows(page).count()).toBeGreaterThan(0);
+  });
+
+  test('compounds supports operator filters and no-match handling', async ({ page }) => {
+    await page.goto('/biochem/compounds');
+    await waitForGridData(page);
+    const compoundId = await readIdentifierFromFirstDataRow(page, 'cpd');
+    const compoundContainsToken = compoundId.slice(-3);
+
+    await applyFilter(page, { column: 'ID', operator: 'starts with', value: 'cpd0' });
+    expect(await dataRows(page).count()).toBeGreaterThan(0);
+
+    await applyFilter(page, { column: 'ID', operator: 'contains', value: compoundContainsToken });
+    const containsCount = await dataRows(page).count();
+    expect(containsCount).toBeGreaterThan(0);
+
+    await applyFilter(page, { column: 'ID', operator: 'equals', value: compoundId });
+    const equalsCount = await dataRows(page).count();
+    expect(equalsCount).toBeLessThanOrEqual(containsCount);
+    await expect(page.locator('button:has-text("Filter & Columns (")').first()).toBeVisible();
+
+    await applyFilter(page, { column: 'ID', operator: 'does not contain', value: 'cpd' });
+    expect(await dataRows(page).count()).toBe(0);
+
+    await applyFilter(page, { column: 'ID', operator: 'is not empty' });
+    expect(await dataRows(page).count()).toBeGreaterThan(0);
+  });
+});
+
+test.describe('DataControlHeader - cross-page smoke', () => {
+  test('list-media page supports search and filter dialog', async ({ page }) => {
+    await page.goto('/list-media');
+    await waitForGridData(page, false);
+    await searchWithHeader(page, 'media');
+    await openFilterDialog(page);
+    await page.locator('button:has-text("Cancel")').first().click();
+  });
+
+  test('genomes page supports search and column visibility controls', async ({ page }) => {
+    await page.goto('/genomes');
+    await waitForGridData(page, false);
+    await openFilterDialog(page);
+    await page.locator('text=Visible Columns').first().click();
+    await page.locator('button:has-text("Show all")').first().click();
+    await page.locator('button:has-text("Save")').first().click();
+    await searchWithHeader(page, 'plant');
+    await expect(page.locator('input[placeholder*="Find in"]').first()).toHaveValue('plant');
+  });
+});
diff --git a/tests/unit/api/biochem-rest-filtering.test.ts b/tests/unit/api/biochem-rest-filtering.test.ts
new file mode 100644
index 00000000..59d1e4dc
--- /dev/null
+++ b/tests/unit/api/biochem-rest-filtering.test.ts
@@ -0,0 +1,59 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('biochem REST path local filter/sort/pagination', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    process.env.NEXT_PUBLIC_MODELSEED_API_URL = 'http://localhost:8000';
+  });
+
+  it('applies DataGrid filter operators in REST mode', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => [
+        { id: 'rxn00001', name: 'ATP reaction', status: 'OK' },
+        { id: 'rxn00002', name: 'NAD reaction', status: 'DRAFT' },
+        { id: 'rxn01000', name: 'ATP synthase', status: 'OK' },
+      ],
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const biochem = await import('@/lib/api/biochem');
+    const res = await biochem.getReactionsFromModelseedApi({
+      limit: 25,
+      filterModel: {
+        items: [{ field: 'status', operator: 'equals', value: 'OK' }],
+        logicOperator: 'and',
+        quickFilterValues: [],
+      },
+    });
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(res.docs.map((d) => d.id)).toEqual(['rxn00001', 'rxn01000']);
+    expect(res.numFound).toBe(2);
+  });
+
+  it('applies sort and pagination after REST fetch', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => [
+        { id: 'rxn00003', name: 'C', status: 'OK' },
+        { id: 'rxn00001', name: 'A', status: 'OK' },
+        { id: 'rxn00002', name: 'B', status: 'OK' },
+      ],
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    const biochem = await import('@/lib/api/biochem');
+    const res = await biochem.getReactionsFromModelseedApi({
+      limit: 1,
+      offset: 1,
+      sort: { field: 'id', desc: false },
+      filterModel: { items: [], quickFilterValues: [] },
+    });
+
+    expect(res.numFound).toBe(3);
+    expect(res.start).toBe(1);
+    expect(res.docs).toHaveLength(1);
+    expect(res.docs[0]?.id).toBe('rxn00002');
+  });
+});