diff --git a/app/scripts/components/common/blocks/block-map.tsx b/app/scripts/components/common/blocks/block-map.tsx
index 35f8db89a..1b6d7a175 100644
--- a/app/scripts/components/common/blocks/block-map.tsx
+++ b/app/scripts/components/common/blocks/block-map.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useContext } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { MapboxOptions } from 'mapbox-gl';
 import * as dateFns from 'date-fns';
@@ -37,7 +37,7 @@ import {
 } from '$components/exploration/data-utils-no-faux-module';
 import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
 import { ProjectionOptions, VedaDatum, DatasetData } from '$types/veda';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 export const mapHeight = '32rem';
 const Carto = styled.div`
@@ -185,7 +185,7 @@ function MapBlock(props: MapBlockProps) {
 
   const [layers, setLayers] = useState<VizDataset[]>(layersToFetch);
 
-  const { envApiStacEndpoint } = useContext(EnvConfigContext);
+  const { envApiStacEndpoint } = useVedaUI();
 
   useReconcileWithStacMetadata(layers, setLayers, envApiStacEndpoint);
 
diff --git a/app/scripts/components/common/blocks/scrollytelling/index.tsx b/app/scripts/components/common/blocks/scrollytelling/index.tsx
index 111a2d13c..b36b7bda8 100644
--- a/app/scripts/components/common/blocks/scrollytelling/index.tsx
+++ b/app/scripts/components/common/blocks/scrollytelling/index.tsx
@@ -2,7 +2,6 @@ import React, {
   Children,
   ReactElement,
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -52,7 +51,7 @@ import {
   formatSingleDate,
   reconcileVizDataset
 } from '$components/common/map/utils';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 type ResolvedScrollyMapLayer = {
   vizDataset: VizDatasetSuccess;
@@ -260,7 +259,7 @@ const MAP_OPTIONS = {
 function Scrollytelling(props) {
   const { children } = props;
 
-  const { envApiStacEndpoint } = useContext(EnvConfigContext);
+  const { envApiStacEndpoint } = useVedaUI();
 
   const { isHeaderHidden, headerHeight, wrapperHeight } =
     useSlidingStickyHeaderProps();
diff --git a/app/scripts/components/common/map/map-component.tsx b/app/scripts/components/common/map/map-component.tsx
index a421e34de..c7fad3e25 100644
--- a/app/scripts/components/common/map/map-component.tsx
+++ b/app/scripts/components/common/map/map-component.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  ReactElement,
-  useMemo,
-  Ref,
-  useContext
-} from 'react';
+import React, { useCallback, ReactElement, useMemo, Ref } from 'react';
 import ReactMapGlMap, { LngLatBoundsLike, MapRef } from 'react-map-gl';
 import { debounce } from 'lodash';
 import useMapStyle from './hooks/use-map-style';
@@ -13,7 +7,7 @@ import { convertProjectionToMapbox } from './controls/map-options/projections';
 import { ProjectionOptions } from '$types/veda';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 const maxMapBounds: LngLatBoundsLike = [
   [-540, -90], // SW
@@ -35,7 +29,7 @@ export default function MapComponent({
   onMapLoad?: () => void;
   interactive?: boolean;
 }) {
-  const { envMapboxToken } = useContext(EnvConfigContext);
+  const { envMapboxToken } = useVedaUI();
 
   const { initialViewState, setInitialViewState, mainId, comparedId } =
     useMapsContext();
diff --git a/app/scripts/components/common/map/style-generators/basemap.tsx b/app/scripts/components/common/map/style-generators/basemap.tsx
index c3805f996..7eafc6398 100644
--- a/app/scripts/components/common/map/style-generators/basemap.tsx
+++ b/app/scripts/components/common/map/style-generators/basemap.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { AnySourceImpl, Layer, Style } from 'mapbox-gl';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   BasemapId,
   getStyleUrl,
@@ -9,7 +9,7 @@ import {
 } from '../controls/map-options/basemap';
 import { ExtendedLayer } from '../types';
 import useMapStyle from '../hooks/use-map-style';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface BasemapProps {
   basemapStyleId?: BasemapId;
@@ -33,7 +33,7 @@ export function Basemap({
   labelsOption = true,
   boundariesOption = true
 }: BasemapProps) {
-  const { envMapboxToken } = useContext(EnvConfigContext);
+  const { envMapboxToken } = useVedaUI();
   const { updateStyle } = useMapStyle();
   const [baseStyle, setBaseStyle] = useState<Style | undefined>(undefined);
 
diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
index 12548934b..7777ed02b 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -1,12 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import {
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader
-} from '@devseed-ui/modal';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
+
 import {
   reconcileDatasets,
   getLayersFromDataset
@@ -19,7 +15,7 @@ import CatalogContent from '$components/common/catalog/catalog-content';
 import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 import { FilterActions } from '$components/common/catalog/utils';
 
-import { DatasetData, LinkProperties, DatasetLayer } from '$types/veda';
+import { DatasetData, DatasetLayer } from '$types/veda';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -66,33 +62,32 @@ const DatasetModal = styled(Modal)`
 interface DatasetSelectorModalProps {
   revealed: boolean;
   close: () => void;
-  linkProperties?: LinkProperties;
   datasets: DatasetData[];
-  datasetPathName: string;
   timelineDatasets: TimelineDataset[];
   setTimelineDatasets: (datasets: TimelineDataset[]) => void;
+  emptyStateContent?: React.ReactNode;
 }
 
 export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
-  const { revealed, linkProperties, datasets, datasetPathName, timelineDatasets, setTimelineDatasets, close } = props;
-  const { LinkElement , pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
+  const { revealed, datasets, timelineDatasets, setTimelineDatasets, close, emptyStateContent } =
+    props;
 
   const datasetLayers = getLayersFromDataset(datasets);
 
   const [selectedIds, setSelectedIds] = useState<string[]>(
     timelineDatasets.map((dataset) => dataset.data.id)
   );
-  const enhancedDatasetLayers = datasetLayers.flatMap(e => e);
+  const enhancedDatasetLayers = datasetLayers.flatMap((e) => e);
 
   // Use Jotai controlled atoms for query parameter manipulation on new E&A page
-  const {search: searchTerm, taxonomies, onAction } = useFiltersWithURLAtom();
+  const { search: searchTerm, taxonomies, onAction } = useFiltersWithURLAtom();
 
   useEffect(() => {
     // Reset filter when modal is hidden
-    if(!revealed) {
+    if (!revealed) {
       onAction(FilterActions.CLEAR);
     }
-  },[revealed, onAction]);
+  }, [revealed, onAction]);
 
   useEffect(() => {
     setSelectedIds(timelineDatasets.map((dataset) => dataset.data.id));
@@ -104,9 +99,15 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
     );
     onAction(FilterActions.CLEAR);
     close();
-  }, [close, selectedIds, timelineDatasets, enhancedDatasetLayers, setTimelineDatasets, onAction]);
+  }, [
+    close,
+    selectedIds,
+    timelineDatasets,
+    enhancedDatasetLayers,
+    setTimelineDatasets,
+    onAction
+  ]);
 
-  const linkElementProps = {[pathAttributeKeyName]: datasetPathName};
   return (
     <DatasetModal
       id='modal'
@@ -114,9 +115,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
       title='Select data layers'
       revealed={revealed}
       onCloseClick={close}
-      renderHeadline={() => (
-        <RenderModalHeader />
-      )}
+      renderHeadline={() => <RenderModalHeader />}
       content={
         <CatalogContent
           datasets={datasets}
@@ -126,12 +125,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
           setSelectedIds={setSelectedIds}
           onAction={onAction}
           filterLayers={true}
-          emptyStateContent={
-            <>
-              <p>There are no datasets to show with the selected filters.</p>
-              <p>This tool allows the exploration and analysis of time-series datasets in raster format. For a comprehensive list of available datasets, please visit the <LinkElement {...linkElementProps} target='_blank'>Data Catalog</LinkElement>.</p>
-            </>
-          }
+          {...(emptyStateContent ? {emptyStateContent} : {})}
         />
       }
       footerContent={
@@ -150,4 +144,4 @@ export interface DatasetLayerCardProps {
   searchTerm: string;
   selected: boolean;
   onDatasetClick: () => void;
-}
\ No newline at end of file
+}
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
index 64390cda0..34fab5edd 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -94,11 +94,10 @@ interface DatasetListItemProps {
   xScaled?: ScaleTime<number, number>;
   onDragStart?: () => void;
   onDragEnd?: () => void;
-  onNavigation?: (path: string) => void;
 }
 
 export function DatasetListItem(props: DatasetListItemProps) {
-  const { datasetId, width, xScaled, onDragStart, onDragEnd, onNavigation } = props;
+  const { datasetId, width, xScaled, onDragStart, onDragEnd } = props;
 
   const datasetAtom = useTimelineDatasetAtom(datasetId);
   const dataset = useAtomValue(datasetAtom);
@@ -236,7 +235,6 @@ export function DatasetListItem(props: DatasetListItemProps) {
                 revealed={!!modalLayerInfo}
                 close={() => setModalLayerInfo(undefined)}
                 layerData={modalLayerInfo}
-                onNavigation={onNavigation}
               />
             )}
           </DatasetHeaderInner>
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list.tsx b/app/scripts/components/exploration/components/datasets/dataset-list.tsx
index dc1178757..b0c7b538d 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list.tsx
@@ -16,11 +16,10 @@ const DatasetListSelf = styled.ul`
 interface DatasetListProps {
   width: number;
   xScaled?: ScaleTime<number, number>;
-  onNavigation?: (path: string) => void;
 }
 
 export function DatasetList(props: DatasetListProps) {
-  const { width, xScaled, onNavigation } = props;
+  const { width, xScaled } = props;
   const [isDragging, setIsDragging] = useState(false);
 
   const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
@@ -41,7 +40,6 @@ export function DatasetList(props: DatasetListProps) {
           xScaled={xScaled}
           onDragStart={() => setIsDragging(true)}
           onDragEnd={() => setIsDragging(false)}
-          onNavigation={onNavigation}
         />
       ))}
     </Reorder.Group>
diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/app/scripts/components/exploration/components/layer-info-modal.tsx
index 75a6f49a8..948569d7f 100644
--- a/app/scripts/components/exploration/components/layer-info-modal.tsx
+++ b/app/scripts/components/exploration/components/layer-info-modal.tsx
@@ -9,13 +9,13 @@ import {
   ModalHeadline
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-import { Button } from '@devseed-ui/button';
 import { LayerInfo } from 'veda';
-import { getDatasetPath } from '$utils/routes';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
+import { useVedaUI } from '$context/veda-ui-provider';
+import { USWDSButton } from '$components/common/uswds/button';
 
-const DatasetModal = styled(Modal)`
+const StyledModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
   /* Override ModalContents */
   > div {
@@ -66,8 +66,7 @@ export interface LayerInfoModalData {
 interface LayerInfoModalProps {
   revealed: boolean;
   close: () => void;
-  layerData: LayerInfoModalData
-  onNavigation?: (path: string) => void;
+  layerData: LayerInfoModalData;
 }
 
 export function LayerInfoLiner(props: { info: LayerInfo }) {
@@ -93,20 +92,16 @@ const LayerInfoLinerModal = styled.div`
 `;
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
-  const { revealed, close, layerData, onNavigation } = props;
+  const { revealed, close, layerData } = props;
+  const {
+    navigation: { LinkComponent },
+    routes: { dataCatalogPath }
+  } = useVedaUI();
 
   const { parentData } = layerData;
-  const dataCatalogPage = getDatasetPath(parentData.id);
-
-  const handleButtonClick = () => {
-    close();
-    if (onNavigation) {
-      onNavigation(dataCatalogPage);
-    }
-  };
 
   return (
-    <DatasetModal
+    <StyledModal
       id='modal'
       size='xlarge'
       revealed={revealed}
@@ -134,9 +129,18 @@ export default function LayerInfoModal(props: LayerInfoModalProps) {
         <div dangerouslySetInnerHTML={{__html: parentData.infoDescription?? 'Currently, we are unable to display the layer information, but you can find it in the data catalog.' }} />
       }
       footerContent={
-        <Button onClick={handleButtonClick} variation='primary-fill' size='medium'>
-          Open in Data Catalog
-        </Button>
+        <LinkComponent to={dataCatalogPath}>
+          <USWDSButton
+            onClick={close}
+            type='button'
+            size='small'
+            inverse={true}
+            outline={false}
+            tabindex='-1'
+          >
+            Open in Data Catalog
+          </USWDSButton>
+        </LinkComponent>
       }
     />
   );
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index d7453df91..906f892a0 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { ProjectionOptions } from 'veda';
 import { useReconcileWithStacMetadata } from '../../hooks/use-stac-metadata-datasets';
@@ -26,7 +26,7 @@ import { usePreviousValue } from '$utils/use-effect-previous';
 import { ExtendedStyle } from '$components/common/map/styles';
 import DrawControl from '$components/common/map/controls/aoi';
 import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface ExplorationMapProps {
   datasets: TimelineDataset[];
@@ -36,8 +36,7 @@ interface ExplorationMapProps {
 }
 
 export function ExplorationMap(props: ExplorationMapProps) {
-  const { envApiStacEndpoint, envMapboxToken } =
-    useContext(EnvConfigContext);
+  const { envApiStacEndpoint, envMapboxToken } = useVedaUI();
 
   const { datasets, setDatasets, selectedDay, selectedCompareDay } = props;
 
diff --git a/app/scripts/components/exploration/components/map/layer.tsx b/app/scripts/components/exploration/components/map/layer.tsx
index cdc1053e5..10e9306f5 100644
--- a/app/scripts/components/exploration/components/map/layer.tsx
+++ b/app/scripts/components/exploration/components/map/layer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 // Avoid error: node_modules/date-fns/esm/index.js does not export 'default'
 import * as dateFns from 'date-fns';
 
@@ -11,7 +11,7 @@ import { VectorTimeseries } from '$components/common/map/style-generators/vector
 import { ZarrTimeseries } from '$components/common/map/style-generators/zarr-timeseries';
 import { CMRTimeseries } from '$components/common/map/style-generators/cmr-timeseries';
 import { ActionStatus } from '$utils/status';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 interface LayerProps {
   id: string;
@@ -22,8 +22,7 @@ interface LayerProps {
 }
 
 export function Layer(props: LayerProps) {
-  const { envApiStacEndpoint, envApiRasterEndpoint } =
-    useContext(EnvConfigContext);
+  const { envApiStacEndpoint, envApiRasterEndpoint } = useVedaUI();
 
   const { id: layerId, dataset, order, selectedDay, onStatusChange } = props;
   const { isVisible, opacity, colorMap, scale } = dataset.settings;
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 4881a6915..dfeeb044e 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -170,7 +170,6 @@ interface TimelineProps {
   setSelectedCompareDay: (d: Date | null) => void;
   onDatasetAddClick?: () => void;
   panelHeight: number;
-  onNavigation?: (path: string) => void;
 }
 
 const getIntervalFromDate = (selectedDay: Date, dataDomain: [Date, Date]) => {
@@ -202,7 +201,6 @@ export default function Timeline(props: TimelineProps) {
     setSelectedCompareDay,
     onDatasetAddClick,
     panelHeight,
-    onNavigation,
   } = props;
 
   // Refs for non react based interactions.
@@ -800,7 +798,7 @@ export default function Timeline(props: TimelineProps) {
           ref={datasetsContainerRef}
           panelHeight={panelHeight}
         >
-          <DatasetList width={width} xScaled={xScaled} onNavigation={onNavigation} />
+          <DatasetList width={width} xScaled={xScaled} />
         </TimelineContentInner>
       </TimelineContent>
     </TimelineWrapper>
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index 16020a585..3b2230f4a 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { TourProvider } from '@reactour/tour';
-import { useNavigate } from "react-router-dom";
+import { Link } from 'react-router-dom';
 import { DevTools } from 'jotai-devtools';
 import { useAtom, useSetAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
@@ -11,12 +11,11 @@ import useTimelineDatasetAtom from './hooks/use-timeline-dataset-atom';
 import { externalDatasetsAtom } from './atoms/datasetLayers';
 import ExplorationAndAnalysis from '.';
 import { urlAtom } from '$utils/params-location-atom/url';
-import { DATASETS_PATH, EXPLORATION_PATH } from '$utils/routes';
 import { PageMainContent } from '$styles/page';
 
 import { LayoutProps } from '$components/common/layout-root';
 import PageHero from '$components/common/page-hero';
-import SmartLink from '$components/common/smart-link';
+import { DATASETS_PATH, EXPLORATION_PATH } from '$utils/routes';
 
 /**
  * @VEDA2-REFACTOR-WORK
@@ -40,7 +39,6 @@ export default function ExplorationAndAnalysisContainer() {
   const [datasetModalRevealed, setDatasetModalRevealed] = useState(
     !timelineDatasets.length
   );
-  const navigate = useNavigate();
 
   // @NOTE: When Exploration page is preloaded (ex. Linked with react-router)
   // atomWithLocation gets initialized outside of Exploration page and returns the previous page's value
@@ -51,15 +49,6 @@ export default function ExplorationAndAnalysisContainer() {
   const openModal = () => setDatasetModalRevealed(true);
   const closeModal = () => setDatasetModalRevealed(false);
 
-  const handleNavigation = (path: string) => {
-    navigate(path);
-  };
-
-  const linkProps = {
-    LinkElement: SmartLink,
-    pathAttributeKeyName: 'to'
-  };
-
   return (
     <TourProvider
       steps={[]}
@@ -79,7 +68,6 @@ export default function ExplorationAndAnalysisContainer() {
           datasets={timelineDatasets}
           setDatasets={setTimelineDatasets}
           openDatasetsSelectionModal={openModal}
-          onNavigation={handleNavigation}
         />
         <DatasetSelectorModal
           revealed={datasetModalRevealed}
@@ -87,8 +75,17 @@ export default function ExplorationAndAnalysisContainer() {
           datasets={allExploreDatasets}
           timelineDatasets={timelineDatasets}
           setTimelineDatasets={setTimelineDatasets}
-          datasetPathName={DATASETS_PATH}
-          linkProperties={linkProps} // @TODO: To be removed and replaced with handleNavigation callback
+          emptyStateContent={
+            <>
+              <p>There are no datasets to show with the selected filters.</p>
+              <p>
+                This tool allows the exploration and analysis of time-series
+                datasets in raster format. For a comprehensive list of available
+                datasets, please visit the{' '}
+                <Link to={DATASETS_PATH}>Data Catalog</Link>.
+              </p>
+            </>
+          }
         />
       </PageMainContent>
     </TourProvider>
diff --git a/app/scripts/components/exploration/hooks/use-analysis-data-request.ts b/app/scripts/components/exploration/hooks/use-analysis-data-request.ts
index 35c5fe658..039fdaf53 100644
--- a/app/scripts/components/exploration/hooks/use-analysis-data-request.ts
+++ b/app/scripts/components/exploration/hooks/use-analysis-data-request.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useContext } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { FeatureCollection, Polygon } from 'geojson';
 import { PrimitiveAtom, useAtom, useAtomValue } from 'jotai';
@@ -15,7 +15,7 @@ import {
 } from '../types.d.ts';
 import { MAX_QUERY_NUM } from '../constants';
 import useAois from '$components/common/map/controls/hooks/use-aois';
-import { EnvConfigContext } from '$context/env-config';
+import { useVedaUI } from '$context/veda-ui-provider';
 
 export function useAnalysisController() {
   const [controller, setController] = useAtom(analysisControllerAtom);
@@ -72,8 +72,7 @@ export function useAnalysisDataRequest({
 }) {
   const queryClient = useQueryClient();
 
-  const { envApiRasterEndpoint, envApiStacEndpoint } =
-    useContext(EnvConfigContext);
+  const { envApiRasterEndpoint, envApiStacEndpoint } = useVedaUI();
 
   const selectedInterval = useAtomValue(selectedIntervalAtom);
   const { features } = useAois();
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index a809507f3..5e4242cba 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -59,11 +59,10 @@ interface ExplorationAndAnalysisProps {
   datasets: TimelineDataset[];
   setDatasets: (datasets: TimelineDataset[]) => void;
   openDatasetsSelectionModal?: () => void;
-  onNavigation?: (path: string) => void;
 }
 
 function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
-  const { datasets, setDatasets, openDatasetsSelectionModal, onNavigation } = props;
+  const { datasets, setDatasets, openDatasetsSelectionModal } = props;
 
   const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
 
@@ -112,7 +111,6 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
             setSelectedCompareDay={setSelectedCompareDay}
             onDatasetAddClick={openDatasetsSelectionModal}
             panelHeight={panelHeight}
-            onNavigation={onNavigation}
           />
         </Panel>
       </PanelGroup>
diff --git a/app/scripts/context/env-config.tsx b/app/scripts/context/env-config.tsx
deleted file mode 100644
index 6c7e8e28c..000000000
--- a/app/scripts/context/env-config.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { createContext } from 'react';
-
-interface EnvConfig {
-  envMapboxToken: string;
-  envApiStacEndpoint: string;
-  envApiRasterEndpoint: string;
-}
-
-export const EnvConfigContext = createContext<EnvConfig>({
-  envMapboxToken: '',
-  envApiStacEndpoint: '',
-  envApiRasterEndpoint: ''
-});
-
-export function EnvConfigProvider({
-  config,
-  children
-}: {
-  config: EnvConfig;
-  children: any;
-}) {
-  return (
-    <EnvConfigContext.Provider value={config}>
-      {children}
-    </EnvConfigContext.Provider>
-  );
-}
diff --git a/app/scripts/context/veda-ui-provider.tsx b/app/scripts/context/veda-ui-provider.tsx
new file mode 100644
index 000000000..c978d221b
--- /dev/null
+++ b/app/scripts/context/veda-ui-provider.tsx
@@ -0,0 +1,118 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+import { DATASETS_PATH, STORIES_PATH } from '$utils/routes';
+
+interface EnvironmentConfig {
+  envMapboxToken: string;
+  envApiStacEndpoint: string;
+  envApiRasterEndpoint: string;
+}
+
+interface LinkProps {
+  to: string;
+  children: ReactNode;
+  [key: string]: any;
+}
+
+interface NavigationConfig {
+  LinkComponent: React.ElementType<Record<string, any>>;
+  linkProps: {
+    pathAttributeKeyName: string; // href, to, ...
+    [key: string]: any;
+  };
+}
+
+interface RoutesConfig {
+  dataCatalogPath?: string;
+  storiesCatalogPath?: string;
+}
+
+interface VedaUIConfig extends EnvironmentConfig {
+  navigation: NavigationConfig;
+  routes: RoutesConfig;
+  Link: React.FC<LinkProps>;
+}
+
+interface VedaUIProviderProps {
+  config: EnvironmentConfig & {
+    navigation?: Partial<NavigationConfig>;
+    routes?: RoutesConfig;
+  };
+  children: ReactNode;
+}
+
+const defaultNavigation: NavigationConfig = {
+  LinkComponent: 'a',
+  linkProps: {
+    pathAttributeKeyName: 'href'
+  }
+};
+
+const defaultRoutes: RoutesConfig = {
+  dataCatalogPath: DATASETS_PATH,
+  storiesCatalogPath: STORIES_PATH
+};
+
+const VedaUIContext = createContext<VedaUIConfig | null>(null);
+VedaUIContext.displayName = 'VedaUIContext';
+
+function validateConfig(config: VedaUIConfig) {
+  const requiredFields = [
+    'envMapboxToken',
+    'envApiStacEndpoint',
+    'envApiRasterEndpoint'
+  ] as const;
+
+  requiredFields.forEach((field) => {
+    const value = config[field];
+    if (!value.trim()) {
+      // eslint-disable-next-line no-console
+      console.warn(`VedaUIProvider: ${field} is required and cannot be empty.`);
+    }
+  });
+}
+
+export function useVedaUI(): VedaUIConfig {
+  const context = useContext(VedaUIContext);
+  if (!context) {
+    throw new Error('useVedaUI must be used within a VedaUIProvider');
+  }
+  return context;
+}
+
+export function VedaUIProvider({ config, children }: VedaUIProviderProps) {
+  const navigation = {
+    ...defaultNavigation,
+    ...config.navigation
+  };
+  const routes = {
+    ...defaultRoutes,
+    ...config.routes
+  };
+
+  const Link: React.FC<LinkProps> = ({ to, children, ...props }) => {
+    const { LinkComponent, linkProps } = navigation;
+    return (
+      <LinkComponent
+        {...{ [linkProps.pathAttributeKeyName]: to, ...linkProps }}
+        {...props}
+      >
+        {children}
+      </LinkComponent>
+    );
+  };
+
+  const fullConfig: VedaUIConfig = {
+    ...config,
+    navigation,
+    routes,
+    Link
+  };
+
+  validateConfig(fullConfig);
+
+  return (
+    <VedaUIContext.Provider value={fullConfig}>
+      {children}
+    </VedaUIContext.Provider>
+  );
+}
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index 45c191248..6279d719e 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -27,7 +27,7 @@ import ExplorationAndAnalysis from '$components/exploration';
 import useTimelineDatasetAtom from '$components/exploration/hooks/use-timeline-dataset-atom';
 import { timelineDatasetsAtom } from '$components/exploration/atoms/datasets';
 import { DatasetSelectorModal } from '$components/exploration/components/dataset-selector-modal';
-import { EnvConfigProvider } from '$context/env-config';
+import { VedaUIProvider } from '$context/veda-ui-provider';
 import {
   datasetLayersAtom,
   externalDatasetsAtom
@@ -66,7 +66,7 @@ export {
   PageHero,
   PageHeader,
   ReactQueryProvider,
-  EnvConfigProvider,
+  VedaUIProvider,
   StoriesHubContent,
   ExplorationAndAnalysis,
   DatasetSelectorModal,
diff --git a/app/scripts/main.tsx b/app/scripts/main.tsx
index b5dc5650e..8acaa7751 100644
--- a/app/scripts/main.tsx
+++ b/app/scripts/main.tsx
@@ -1,7 +1,13 @@
 import React, { lazy, Suspense, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import T from 'prop-types';
-import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
+import {
+  Link,
+  BrowserRouter,
+  Route,
+  Routes,
+  useLocation
+} from 'react-router-dom';
 
 import '$styles/styles.scss';
 
@@ -49,7 +55,7 @@ import {
   STORIES_PATH,
   EXPLORATION_PATH
 } from '$utils/routes';
-import { EnvConfigProvider } from '$context/env-config';
+import { VedaUIProvider } from '$context/veda-ui-provider';
 
 const composingComponents = [
   // Add contexts here.
@@ -57,15 +63,21 @@ const composingComponents = [
   ReactQueryProvider,
   LayoutRootContextProvider,
   ({ children }) => (
-    <EnvConfigProvider
+    <VedaUIProvider
       config={{
         envMapboxToken: process.env.MAPBOX_TOKEN ?? '',
         envApiStacEndpoint: process.env.API_STAC_ENDPOINT ?? '',
-        envApiRasterEndpoint: process.env.API_RASTER_ENDPOINT ?? ''
+        envApiRasterEndpoint: process.env.API_RASTER_ENDPOINT ?? '',
+        navigation: {
+          LinkComponent: Link,
+          linkProps: {
+            pathAttributeKeyName: 'to'
+          }
+        }
       }}
     >
       {children}
-    </EnvConfigProvider>
+    </VedaUIProvider>
   )
 ];