diff --git a/src/app.tsx b/src/app.tsx
index cf4b09c..c7426c2 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -16,6 +16,7 @@ import {
   isItemInDatetimeBounds,
   isVisual,
 } from "./utils/stac";
+import { StacApiProvider } from "@developmentseed/stac-react";
 
 // TODO make this configurable by the user.
 const lineColor: Color = [207, 63, 2, 100];
@@ -33,6 +34,8 @@ export default function App() {
   const [filter, setFilter] = useState(true);
   const [stacGeoparquetItemId, setStacGeoparquetItemId] = useState<string>();
   const [cogTileHref, setCogTileHref] = useState<string>();
+  const [filteredCollections, setFilteredCollections] = useState<StacCollection[] | undefined>();
+  const [collections, setFinalCollections] = useState<StacCollection[] | undefined>();
 
   // Derived state
   const {
@@ -52,20 +55,9 @@ export default function App() {
     value,
     enabled: !!value && !collectionsLink,
   });
-  const collections = collectionsLink ? userCollections : linkedCollections;
+  
   const items = userItems || linkedItems;
-  const filteredCollections = useMemo(() => {
-    if (filter && collections) {
-      return collections.filter(
-        (collection) =>
-          (!bbox || isCollectionInBbox(collection, bbox)) &&
-          (!datetimeBounds ||
-            isCollectionInDatetimeBounds(collection, datetimeBounds))
-      );
-    } else {
-      return undefined;
-    }
-  }, [collections, filter, bbox, datetimeBounds]);
+
   const filteredItems = useMemo(() => {
     if (filter && items) {
       return items.filter(
@@ -79,6 +71,22 @@ export default function App() {
   }, [items, filter, bbox, datetimeBounds]);
 
   // Effects
+  useEffect(() => {
+    setFinalCollections(collectionsLink ? userCollections : linkedCollections);
+  }, [collectionsLink, userCollections, linkedCollections]);
+
+  useEffect(() => {
+    if(filter && collections) {
+      const filtered = collections.filter(
+        (collection) =>
+          (!bbox || isCollectionInBbox(collection, bbox)) &&
+          (!datetimeBounds ||
+            isCollectionInDatetimeBounds(collection, datetimeBounds))
+      );
+      setFilteredCollections(filtered ?? undefined)
+    }
+  }, [filter, collections, userCollections, bbox, datetimeBounds]);
+
   useEffect(() => {
     function handlePopState() {
       setHref(new URLSearchParams(location.search).get("href") ?? "");
@@ -137,67 +145,69 @@ export default function App() {
 
   return (
     <>
-      <Box h={"100dvh"}>
-        <FileUpload.RootProvider value={fileUpload} unstyled={true}>
-          <FileUpload.Dropzone
-            disableClick={true}
-            style={{
-              height: "100dvh",
-              width: "100dvw",
-            }}
-          >
-            <Map
-              value={value}
-              table={table}
-              collections={collections}
-              filteredCollections={filteredCollections}
-              items={items}
-              filteredItems={filteredItems}
-              fillColor={fillColor}
-              lineColor={lineColor}
-              setBbox={setBbox}
-              picked={picked}
-              setPicked={setPicked}
-              setStacGeoparquetItemId={setStacGeoparquetItemId}
-              cogTileHref={cogTileHref}
-            ></Map>
-          </FileUpload.Dropzone>
-        </FileUpload.RootProvider>
-      </Box>
-      <Container
-        zIndex={1}
-        fluid
-        h="100dvh"
-        pointerEvents={"none"}
-        position={"absolute"}
-        top={0}
-        left={0}
-        pt={4}
-      >
-        <Overlay
-          href={href}
-          setHref={setHref}
-          fileUpload={fileUpload}
-          value={value}
-          error={error}
-          catalogs={catalogs}
-          setCollections={setCollections}
-          collections={collections}
-          filteredCollections={filteredCollections}
-          filter={filter}
-          setFilter={setFilter}
-          bbox={bbox}
-          setPicked={setPicked}
-          picked={picked}
-          items={items}
-          filteredItems={filteredItems}
-          setItems={setItems}
-          setDatetimeBounds={setDatetimeBounds}
-          cogTileHref={cogTileHref}
-          setCogTileHref={setCogTileHref}
-        ></Overlay>
-      </Container>
-      <Toaster></Toaster>
+      <StacApiProvider apiUrl={href || ""}>
+        <Box h={"100dvh"}>
+          <FileUpload.RootProvider value={fileUpload} unstyled={true}>
+            <FileUpload.Dropzone
+              disableClick={true}
+              style={{
+                height: "100dvh",
+                width: "100dvw",
+              }}
+            >
+              <Map
+                value={value}
+                table={table}
+                collections={collections}
+                filteredCollections={filteredCollections}
+                items={items}
+                filteredItems={filteredItems}
+                fillColor={fillColor}
+                lineColor={lineColor}
+                setBbox={setBbox}
+                picked={picked}
+                setPicked={setPicked}
+                setStacGeoparquetItemId={setStacGeoparquetItemId}
+                cogTileHref={cogTileHref}
+              ></Map>
+            </FileUpload.Dropzone>
+          </FileUpload.RootProvider>
+        </Box>
+        <Container
+          zIndex={1}
+          fluid
+          h="100dvh"
+          pointerEvents={"none"}
+          position={"absolute"}
+          top={0}
+          left={0}
+          pt={4}
+        >
+          <Overlay
+            href={href}
+            setHref={setHref}
+            fileUpload={fileUpload}
+            value={value}
+            error={error}
+            catalogs={catalogs}
+            setCollections={setCollections}
+            collections={collections}
+            filteredCollections={filteredCollections}
+            filter={filter}
+            setFilter={setFilter}
+            bbox={bbox}
+            setPicked={setPicked}
+            picked={picked}
+            items={items}
+            filteredItems={filteredItems}
+            setItems={setItems}
+            setDatetimeBounds={setDatetimeBounds}
+            cogTileHref={cogTileHref}
+            setCogTileHref={setCogTileHref}
+          ></Overlay>
+        </Container>
+        <Toaster></Toaster>
+      </StacApiProvider>
     </>
   );
 }
diff --git a/src/components/panel.tsx b/src/components/panel.tsx
index 8976a9f..4e1c682 100644
--- a/src/components/panel.tsx
+++ b/src/components/panel.tsx
@@ -34,7 +34,7 @@ export default function Panel({
     );
   else if (href) {
     if (value) {
-      return <Value href={href} value={value} setHref={setHref} {...props} />;
+      return <Value key={href} href={href} value={value} setHref={setHref} {...props} />;
     } else {
       return <SkeletonText />;
     }
diff --git a/src/components/value.tsx b/src/components/value.tsx
index 167d329..77262ea 100644
--- a/src/components/value.tsx
+++ b/src/components/value.tsx
@@ -37,11 +37,13 @@ import ItemsSection from "./sections/items";
 import LinksSection from "./sections/links";
 import PropertiesSection from "./sections/properties";
 import { Prose } from "./ui/prose";
-import useStacCollections from "../hooks/stac-collections";
+// import useStacCollections from "../hooks/stac-collections";
 import type { BBox2D } from "../types/map";
 import type { DatetimeBounds, StacSearch, StacValue } from "../types/stac";
 import { deconstructStac, fetchStac, getImportantLinks } from "../utils/stac";
 
+import { useCollections } from "@developmentseed/stac-react";
+
 export interface SharedValueProps {
   catalogs: StacCatalog[] | undefined;
   setCollections: (collections: StacCollection[] | undefined) => void;
@@ -111,7 +113,8 @@ export function Value({
     return rootData.data?.links?.filter((link) => link.rel === "search");
   }, [rootData.data]);
 
-  const collectionsResult = useStacCollections(collectionsLink?.href);
+  const collectionsResult = useCollections();
+  console.log(`collectionsResult: `, collectionsResult)
 
   const thumbnailAsset = useMemo(() => {
     return (
@@ -124,21 +127,24 @@ export function Value({
   }, [assets]);
 
   useEffect(() => {
-    setCollections(
-      collectionsResult.data?.pages.flatMap((page) => page?.collections || [])
-    );
-    if (collectionsResult.data?.pages.at(0)?.numberMatched)
-      setNumberOfCollections(collectionsResult.data?.pages[0]?.numberMatched);
-  }, [collectionsResult.data, setCollections]);
+    if (fetchAllCollections) {
+      setCollections((previous) => [...previous, ...collectionsResult.collections?.collections || []]);
+    } else {
+      setCollections(
+        collectionsResult.collections?.collections || []
+      );
+      setNumberOfCollections(collectionsResult.collections?.numberMatched);
+    }
+  }, [fetchAllCollections, collectionsResult.collections]);
 
   useEffect(() => {
     if (
       fetchAllCollections &&
-      !collectionsResult.isFetching &&
-      collectionsResult.hasNextPage
-    )
-      collectionsResult.fetchNextPage();
-  }, [fetchAllCollections, collectionsResult]);
+      collectionsResult.nextPage
+    ) {
+      collectionsResult.nextPage?.();
+    }
+  }, [fetchAllCollections, collectionsResult.nextPage]);
 
   useEffect(() => {
     setFetchAllCollections(false);
@@ -224,7 +230,7 @@ export function Value({
         </ButtonGroup>
       )}
 
-      {collectionsResult.hasNextPage && (
+      {collectionsResult.nextPage && (
         <Card.Root size={"sm"} variant={"outline"}>
           <Card.Header>
             <Heading size={"sm"}>Collection pagination</Heading>
@@ -232,13 +238,12 @@ export function Value({
           <Card.Body>
             <ButtonGroup size={"xs"} variant={"surface"}>
               <Button
-                disabled={fetchAllCollections || collectionsResult.isFetching}
+                disabled={fetchAllCollections}
                 onClick={() => {
                   if (
-                    !collectionsResult.isFetching &&
-                    collectionsResult.hasNextPage
+                    collectionsResult.nextPage
                   )
-                    collectionsResult.fetchNextPage();
+                    collectionsResult.nextPage?.();
                 }}
               >
                 Fetch more collections <LuStepForward />
@@ -261,6 +266,7 @@ export function Value({
         </Card.Root>
       )}
 
+
       <Accordion.Root multiple size={"sm"} variant={"enclosed"}>
         {catalogs && catalogs.length > 0 && (
           <CatalogsSection catalogs={catalogs} setHref={setHref} />