diff --git a/app/scripts/components/common/card-sources.tsx b/app/scripts/components/common/card-sources.tsx
index d592a1c68..9d9cf6cca 100644
--- a/app/scripts/components/common/card-sources.tsx
+++ b/app/scripts/components/common/card-sources.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { listReset } from '@devseed-ui/theme-provider';
-import { TaxonomyItem } from '$types/veda';
+import { LinkProperties, TaxonomyItem } from '$types/veda';
 import { FilterActions } from '$components/common//catalog/utils';
 
 const SourcesUl = styled.ul`
@@ -23,11 +22,12 @@ interface SourcesListProps {
   sources?: TaxonomyItem[];
   onSourceClick?: (v: string) => void;
   rootPath?: string;
+  linkProperties?: LinkProperties;
 }
 
 export function CardSourcesList(props: SourcesListProps) {
-  const { sources, onSourceClick, rootPath } = props;
-
+  const { sources, onSourceClick, linkProperties, rootPath } = props;
+  const { LinkElement, pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
   if (!sources?.length) return null;
 
   // No link rendering
@@ -50,19 +50,19 @@ export function CardSourcesList(props: SourcesListProps) {
       <SourcesUl>
         {sources.map((source) => (
           <li key={source.id}>
-            <Link
-              to={`${rootPath}?${FilterActions.TAXONOMY}=${encodeURIComponent(
+            <LinkElement
+              {...{[pathAttributeKeyName]:`${rootPath}?${FilterActions.TAXONOMY}=${encodeURIComponent(
                 JSON.stringify({
                   Source: source.id
                 })
-              )}`}
+              )}`}}
               onClick={(e) => {
                 e.preventDefault();
                 onSourceClick(source.id);
               }}
             >
               {source.name}
-            </Link>
+            </LinkElement>
           </li>
         ))}
       </SourcesUl>
diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
index ce98fac0b..74e705cd1 100644
--- a/app/scripts/components/common/card/index.tsx
+++ b/app/scripts/components/common/card/index.tsx
@@ -1,6 +1,6 @@
-import React, { lazy, MouseEventHandler, ComponentType } from 'react';
+import React, { lazy, MouseEventHandler } from 'react';
 import styled, { css } from 'styled-components';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
 import {
   glsp,
@@ -25,6 +25,7 @@ import HorizontalInfoCard, {
 import { variableBaseType, variableGlsp } from '$styles/variable-utils';
 import { ElementInteractive } from '$components/common/element-interactive';
 import { Figure } from '$components/common/figure';
+import { LinkProperties } from '$types/veda';
 
 type CardType = 'classic' | 'cover' | 'featured' | 'horizontal-info';
 
@@ -230,12 +231,6 @@ export function ExternalLinkFlag() {
   );
 }
 
-export interface LinkProperties {
-  LinkElement: string | ComponentType<any> | undefined;
-  pathAttributeKeyName: string;
-  onLinkClick?: MouseEventHandler;
-}
-
 export interface LinkWithPathProperties extends LinkProperties {
   linkTo: string;
 }
@@ -255,16 +250,17 @@ export interface CardComponentBaseProps {
   footerContent?: JSX.Element;
   hideExternalLinkBadge?: boolean;
   onCardClickCapture?: MouseEventHandler;
+  onClick?: MouseEventHandler;
 }
 
-// @TODO: Consolidate these props when the instance adapts the new syntax
+// @TODO: Created because GHG uses the card component directly and passes in "linkTo" prop. Consolidate these props when the instance adapts the new syntax
 // Specifically: https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/custom-pages/news-and-events/component.tsx#L108
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
   linkTo: string;
-  onLinkClick?: MouseEventHandler;
 }
+
 export interface CardComponentProps extends CardComponentBaseProps {
-  linkProperties: LinkWithPathProperties;
+  linkProperties?: LinkWithPathProperties;
 }
 
 type CardComponentPropsType = CardComponentProps | CardComponentPropsDeprecated;
@@ -291,40 +287,37 @@ function CardComponent(props: CardComponentPropsType) {
     parentTo,
     footerContent,
     hideExternalLinkBadge,
-    onCardClickCapture
+    onCardClickCapture,
+    onClick,
   } = props;
   // @TODO: This process is not necessary once all the instances adapt the linkProperties syntax
   // Consolidate them to use LinkProperties only
-  let linkProperties: LinkWithPathProperties;
+  let linkProperties: LinkWithPathProperties | undefined;
 
   if (hasLinkProperties(props)) {
     // Handle new props with linkProperties
     const { linkProperties: linkPropertiesProps } = props;
     linkProperties = linkPropertiesProps;
   } else {
-    const { linkTo, onLinkClick } = props;
-    linkProperties = {
+    const { linkTo } = props;
+    linkProperties = linkTo ? {
       linkTo,
-      onLinkClick,
       pathAttributeKeyName: 'to',
       LinkElement: SmartLink
-    };
+    } : undefined;
   }
 
-  const isExternalLink = /^https?:\/\//.test(linkProperties.linkTo);
+  const isExternalLink = linkProperties ? /^https?:\/\//.test(linkProperties.linkTo) : false;
 
   return (
     <ElementInteractive
-      linkProps={{
-        as: linkProperties.LinkElement,
-        [linkProperties.pathAttributeKeyName]: linkProperties.linkTo,
-        onLinkClick: linkProperties.onLinkClick
-      }}
+      {...(linkProperties ? {linkProps: {as: linkProperties.LinkElement, [linkProperties.pathAttributeKeyName]: linkProperties.linkTo}} : {})}
       as={CardItem}
       cardType={cardType}
       className={className}
       linkLabel={linkLabel ?? 'View more'}
       onClickCapture={onCardClickCapture}
+      onClick={onClick}
     >
       {cardType !== 'horizontal-info' && (
         <>
@@ -340,7 +333,7 @@ function CardComponent(props: CardComponentPropsType) {
                   parentTo &&
                   tagLabels.map((label) => (
                     <CardLabel
-                      as={linkProperties.LinkElement}
+                      as={linkProperties?.LinkElement}
                       to={parentTo}
                       key={label}
                     >
diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
index e9a85a751..944507108 100644
--- a/app/scripts/components/common/catalog/catalog-card.tsx
+++ b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -1,27 +1,18 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import {
-  CollecticonPlus,
-  CollecticonTickSmall,
-  iconDataURI
-} from '@devseed-ui/collecticons';
-import { glsp, themeVal } from '@devseed-ui/theme-provider';
-
-import { Card, LinkProperties } from '../card';
-import { CardMeta, CardTopicsList } from '../card/styles';
-import { DatasetClassification } from '../dataset-classification';
-import { CardSourcesList } from '../card-sources';
-import TextHighlight from '../text-highlight';
+import React from "react";
+import styled, { css } from "styled-components";
+import { CollecticonPlus, CollecticonTickSmall, iconDataURI } from "@devseed-ui/collecticons";
+import { glsp, themeVal } from "@devseed-ui/theme-provider";
+import { Card } from "../card";
+import { CardMeta, CardTopicsList } from "../card/styles";
+import { DatasetClassification } from "../dataset-classification";
+import { CardSourcesList } from "../card-sources";
+import TextHighlight from "../text-highlight";
 import { getDatasetDescription, getMediaProperty } from './utils';
-import { DatasetData, DatasetLayer } from '$types/veda';
-import { getDatasetPath } from '$utils/routes';
-import {
-  TAXONOMY_SOURCE,
-  TAXONOMY_TOPICS,
-  getAllTaxonomyValues,
-  getTaxonomy
-} from '$utils/veda-data/taxonomies';
-import { Pill } from '$styles/pill';
+import { LinkProperties } from '$types/veda';
+import { DatasetData, DatasetLayer } from "$types/veda";
+import { getDatasetPath } from "$utils/routes";
+import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies";
+import { Pill } from "$styles/pill";
 
 interface CatalogCardProps {
   dataset: DatasetData;
@@ -31,7 +22,7 @@ interface CatalogCardProps {
   selected?: boolean;
   onDatasetClick?: () => void;
   pathname?: string;
-  linkProperties: LinkProperties;
+  linkProperties?: LinkProperties;
 }
 
 const CardSelectable = styled(Card)<{
@@ -142,10 +133,11 @@ export const CatalogCard = (props: CatalogCardProps) => {
       overline={
         <CardMeta>
           <DatasetClassification dataset={dataset} />
-          <CardSourcesList sources={sources} />
+          <CardSourcesList sources={sources} linkProperties={linkProperties} />
         </CardMeta>
       }
       linkLabel='View dataset'
+      onClick={handleClick}
       title={
         <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
           {title}
@@ -179,11 +171,7 @@ export const CatalogCard = (props: CatalogCardProps) => {
           ) : null}
         </>
       }
-      linkProperties={{
-        ...linkProperties,
-        linkTo: linkTo,
-        onLinkClick: handleClick
-      }}
+      {...(linkProperties ? {linkProperties: {...linkProperties, linkTo: linkTo}} : {})}
     />
   );
 };
diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx
index 6240116f8..dcac02395 100644
--- a/app/scripts/components/common/catalog/catalog-content.tsx
+++ b/app/scripts/components/common/catalog/catalog-content.tsx
@@ -3,13 +3,13 @@ import styled from 'styled-components';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import TextHighlight from '../text-highlight';
 import { CollecticonDatasetLayers } from '../icons/dataset-layers';
-import { LinkProperties } from '../card';
 import { prepareDatasets } from './prepare-datasets';
 import FiltersControl from './filters-control';
 import { CatalogCard } from './catalog-card';
 import CatalogTagsContainer from './catalog-tags';
 
 import { FilterActions } from './utils';
+import { LinkProperties } from '$types/veda';
 import { DatasetData, DatasetDataWithEnhancedLayers } from '$types/veda';
 import { CardList } from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';
@@ -264,7 +264,6 @@ function CatalogContent({
                           selectable={true}
                           selected={selectedIds.includes(datasetLayer.id)}
                           onDatasetClick={() => onCardSelect(datasetLayer.id, currentDataset)}
-                          linkProperties={linkProperties}
                           pathname={pathname}
                         />
                       </li>
diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx
index f4dddfc52..bff33ded7 100644
--- a/app/scripts/components/common/catalog/index.tsx
+++ b/app/scripts/components/common/catalog/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
-import { LinkProperties } from '../card';
 import CatalogContent from './catalog-content';
-import { DatasetData } from '$types/veda';
+import { DatasetData, LinkProperties } from '$types/veda';
 import {
   useSlidingStickyHeaderProps
 } from '$components/common/layout-root/useSlidingStickyHeaderProps';
diff --git a/app/scripts/components/common/element-interactive.js b/app/scripts/components/common/element-interactive.js
index 497679951..6deebd1f8 100644
--- a/app/scripts/components/common/element-interactive.js
+++ b/app/scripts/components/common/element-interactive.js
@@ -73,7 +73,13 @@ const InteractiveLink = styled.a`
  */
 export const ElementInteractive = React.forwardRef(
   function ElementInteractiveFwd(props, ref) {
-    const { linkProps = {}, linkLabel = 'View', children, ...rest } = props;
+    const {
+      linkProps = {},
+      linkLabel = 'View',
+      children,
+      onClick,
+      ...rest
+    } = props;
     const [isStateOver, setStateOver] = useState(false);
     const [isStateActive, setStateActive] = useState(false);
     const [isStateFocus, setStateFocus] = useState(false);
@@ -92,6 +98,7 @@ export const ElementInteractive = React.forwardRef(
           setStateOver(false);
           setStateActive(false);
         }, [])}
+        onClick={onClick}
       >
         {children}
         <InteractiveLink
@@ -111,7 +118,8 @@ export const ElementInteractive = React.forwardRef(
 ElementInteractive.propTypes = {
   children: T.node.isRequired,
   linkLabel: T.string.isRequired,
-  linkProps: T.object
+  linkProps: T.object,
+  onClick: T.func
 };
 
 /**
diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx
index d4cc0a123..a26ec2eb9 100644
--- a/app/scripts/components/common/featured-slider-section.tsx
+++ b/app/scripts/components/common/featured-slider-section.tsx
@@ -97,7 +97,10 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
               return sortedFeaturedItems.map((d) => {
                 const date = new Date(d[dateProperty ?? '']);
                 const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values;
-
+                const linkProperties = {
+                  pathAttributeKeyName: 'to',
+                  LinkElement: SmartLink
+                };
                 return (
                   <ContinuumGridItem {...bag} key={d.id}>
                     <Card
@@ -112,9 +115,8 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
                       cardType='featured'
                       linkLabel='View more'
                       linkProperties={{
-                        linkTo: `${d.asLink?.url ?? getItemPath(d)}`,
-                        pathAttributeKeyName: 'to',
-                        LinkElement: SmartLink
+                        ...linkProperties,
+                        linkTo: `${d.asLink?.url ?? getItemPath(d)}`
                       }}
                       title={d.name}
                       overline={
@@ -123,6 +125,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
                             <DatasetClassification dataset={d} />
                           )}
                           <CardSourcesList
+                            linkProperties={linkProperties}
                             sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
                           />
                           <VerticalDivider variation='light' />
diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
index 9d5a5ae18..9f2a7814d 100644
--- a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
+++ b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -76,15 +76,25 @@ function CustomAoI({
   const [selectedState, setSelectedState] = useState('');
   const [presetIds, setPresetIds] = useState([]);
   const [fileUploadedIds, setFileUplaodedIds] = useState([]);
+  const [updated, forceUpdate] = useState(0);   // @NOTE:  Needed so that this component re-renders to when the draw selection changes from feature to point.
+  const [isAreaSelected, setAreaSelected] = useState<boolean>(false);
+  const [isPointSelected, setPointSelected] = useState<boolean>(false);
 
   const [selectedForEditing, setSelectedForEditing] = useAtom(selectedForEditingAtom);
 
   const { onUpdate, isDrawing, setIsDrawing, features } = useAois();
   const aoiDeleteAll = useSetAtom(aoiDeleteAllAtom);
 
-  // Needed so that this component re-renders to when the draw selection changes
-  // from feature to point.
-  const [, forceUpdate] = useState(0);
+  // @NOTE: map?._drawControl?.getSelected() needs access to mapboxgl draw context store,
+  // but the function gets called before mapboxdraw store is initialized (before being added to map) resulting in an error
+  useEffect(() => {
+    if (!map) return;
+
+    const mbDraw = map?._drawControl;
+    setAreaSelected(!!(mbDraw?.getSelected().features.length));
+    setPointSelected(!!(mbDraw?.getSelectedPoints()?.features.length));
+  }, [map, updated]);
+
   useEffect(() => {
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;
@@ -220,6 +230,7 @@ function CustomAoI({
     // selected, the trash method doesn't do anything. So, in this case, we
     // trigger the delete for the whole feature.
     const selectedFeatures = mbDraw.getSelected()?.features;
+
     if (
       mbDraw.getMode() === DIRECT_SELECT &&
       selectedFeatures.length &&
@@ -248,9 +259,6 @@ function CustomAoI({
     mbDraw.trash();
   }, [features, aoiDeleteAll, map]);
 
-  const isAreaSelected = !!map?._drawControl?.getSelected().features.length;
-  const isPointSelected =
-    !!map?._drawControl.getSelectedPoints().features.length;
   const hasFeatures = !!features.length;
 
   return (
@@ -330,21 +338,19 @@ export default function CustomAoIControl({
   disableReason?: React.ReactNode;
 }) {
   const { main } = useMaps();
-
   const { isDrawing } = useAois();
 
-  // Start/stop the drawing.
+  // Start the drawing mode when isDrawing is true
+  // There's no need to switch back to 'simple_select' mode when !isDrawing
+  // as Mapbox Draw handles this internally when the drawing is completed
   useEffect(() => {
-    // Property was added to access draw control.
-    const mbDraw = main?._drawControl;
+    if (!main) return;
+    const mbDraw = main._drawControl;
+
     if (!mbDraw) return;
 
     if (isDrawing) {
       mbDraw.changeMode(DRAW_POLYGON);
-    } else {
-      mbDraw.changeMode(SIMPLE_SELECT, {
-        featureIds: mbDraw.getSelectedIds()
-      });
     }
   }, [main, isDrawing]);
 
@@ -354,5 +360,7 @@ export default function CustomAoIControl({
       position: 'top-left'
     }
   );
+
   return null;
 }
+
diff --git a/app/scripts/components/common/map/controls/aoi/index.tsx b/app/scripts/components/common/map/controls/aoi/index.tsx
index 3f8a4b2da..808cc9164 100644
--- a/app/scripts/components/common/map/controls/aoi/index.tsx
+++ b/app/scripts/components/common/map/controls/aoi/index.tsx
@@ -2,14 +2,18 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';
 import { useTheme } from 'styled-components';
 import { useAtomValue } from 'jotai';
-import { useRef } from 'react';
 import { useControl } from 'react-map-gl';
+import type { MapRef } from 'react-map-gl';
 import useAois from '../hooks/use-aois';
 import { aoisFeaturesAtom } from './atoms';
 import { computeDrawStyles } from './style';
 
 type DrawControlProps = MapboxDraw.DrawOptions;
 
+interface ExtendedMapRef extends MapRef {
+  _drawControl?: MapboxDraw;
+}
+
 export const STATIC_MODE = 'static_mode';
 export const SIMPLE_SELECT = 'simple_select';
 export const DIRECT_SELECT = 'direct_select';
@@ -30,13 +34,12 @@ const customDirectSelect = {
 
 export default function DrawControl(props: DrawControlProps) {
   const theme = useTheme();
-  const control = useRef<MapboxDraw>();
   const aoisFeatures = useAtomValue(aoisFeaturesAtom);
   const { onUpdate, onDelete, onSelectionChange, onDrawModeChange } = useAois();
 
-  useControl<MapboxDraw>(
+  const drawControl = useControl<MapboxDraw>(
     () => {
-      control.current = new MapboxDraw({
+      const control = new MapboxDraw({
         displayControlsDefault: false,
         styles: computeDrawStyles(theme),
         modes: {
@@ -47,23 +50,25 @@ export default function DrawControl(props: DrawControlProps) {
         },
         ...props
       });
-      return control.current;
+      return control;
     },
-    ({ map }: { map: any }) => {
-      map._drawControl = control.current;
+    ({ map }) => {
+      // We're making the controls available on the map instance for later use throughout
+      // the app (e.g in the CustomAoIControl)
+      (map as ExtendedMapRef)._drawControl = drawControl;
       map.on('draw.create', onUpdate);
       map.on('draw.update', onUpdate);
       map.on('draw.delete', onDelete);
       map.on('draw.selectionchange', onSelectionChange);
       map.on('draw.modechange', onDrawModeChange);
       map.on('load', () => {
-        control.current?.set({
+        drawControl.set({
           type: 'FeatureCollection',
           features: aoisFeatures
         });
       });
     },
-    ({ map }: { map: any }) => {
+    ({ map }) => {
       map.off('draw.create', onUpdate);
       map.off('draw.update', onUpdate);
       map.off('draw.delete', onDelete);
@@ -76,4 +81,4 @@ export default function DrawControl(props: DrawControlProps) {
   );
 
   return null;
-}
+}
\ No newline at end of file
diff --git a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
index ff50f88a6..925e8d1b6 100644
--- a/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
+++ b/app/scripts/components/common/map/controls/hooks/use-themed-control.tsx
@@ -54,4 +54,4 @@ export default function useThemedControl(
   useControl(() => new ThemedControl(), opts);
 
   return null;
-}
+}
\ No newline at end of file
diff --git a/app/scripts/components/common/map/style-generators/basemap.tsx b/app/scripts/components/common/map/style-generators/basemap.tsx
index b5e037b98..ad866f7f5 100644
--- a/app/scripts/components/common/map/style-generators/basemap.tsx
+++ b/app/scripts/components/common/map/style-generators/basemap.tsx
@@ -33,7 +33,6 @@ export function Basemap({
   boundariesOption = true
 }: BasemapProps) {
   const { updateStyle } = useMapStyle();
-
   const [baseStyle, setBaseStyle] = useState<Style | undefined>(undefined);
 
   const { data: styleJson } = useQuery(
diff --git a/app/scripts/components/common/map/style-generators/vector-timeseries.tsx b/app/scripts/components/common/map/style-generators/vector-timeseries.tsx
index a558ffbbf..cd2973f1e 100644
--- a/app/scripts/components/common/map/style-generators/vector-timeseries.tsx
+++ b/app/scripts/components/common/map/style-generators/vector-timeseries.tsx
@@ -6,7 +6,9 @@ import {
   VectorSourceImpl
 } from 'mapbox-gl';
 import { useTheme } from 'styled-components';
-import { endOfDay, startOfDay } from 'date-fns';
+import endOfDay from 'date-fns/endOfDay';
+import startOfDay from 'date-fns/startOfDay';
+
 import centroid from '@turf/centroid';
 import { LngLatLike } from 'react-map-gl';
 import { Feature } from 'geojson';
diff --git a/app/scripts/components/common/page-footer.js b/app/scripts/components/common/page-footer.js
index 33a01905c..531054103 100644
--- a/app/scripts/components/common/page-footer.js
+++ b/app/scripts/components/common/page-footer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 import {
   glsp,
diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx
index 83cf15661..1b603f88a 100644
--- a/app/scripts/components/common/page-header/index.tsx
+++ b/app/scripts/components/common/page-header/index.tsx
@@ -15,7 +15,6 @@ import {
 } from '@devseed-ui/collecticons';
 
 import UnscrollableBody from '../unscrollable-body';
-import { LinkProperties } from '../card';
 import NavMenuItem from './nav-menu-item';
 import { NavItem } from './types';
 
@@ -23,6 +22,7 @@ import { variableGlsp } from '$styles/variable-utils';
 import { PAGE_BODY_ID } from '$components/common/layout-root';
 import { useMediaQuery } from '$utils/use-media-query';
 import { HEADER_ID } from '$utils/use-sliding-sticky-header';
+import { LinkProperties } from '$types/veda';
 
 
 const PageHeaderSelf = styled.header`
diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx
index 2d7b3f1f3..d0cac7c6d 100644
--- a/app/scripts/components/common/page-header/logo-container.tsx
+++ b/app/scripts/components/common/page-header/logo-container.tsx
@@ -1,7 +1,8 @@
 import React, { ComponentType } from 'react';
 import { Tip } from '../tip';
-import { LinkProperties } from '../card';
 import { Brand, PageTitleSecLink } from './logo';
+import { LinkProperties } from '$types/veda';
+
 /**
  * LogoContainer that is meant to integrate in the default page header without the dependencies of the veda virtual modules
  * and expects the Logo SVG to be passed in as a prop - this will support the instance for refactor
diff --git a/app/scripts/components/common/page-header/logo.tsx b/app/scripts/components/common/page-header/logo.tsx
index a4826a83e..383539ed4 100644
--- a/app/scripts/components/common/page-header/logo.tsx
+++ b/app/scripts/components/common/page-header/logo.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { glsp, media, themeVal } from '@devseed-ui/theme-provider';
 import NasaLogo from '../nasa-logo';
 import { Tip } from '../tip';
-import { LinkProperties } from '../card';
 import { ComponentOverride } from '$components/common/page-overrides';
+import { LinkProperties } from '$types/veda';
 
 const appTitle = process.env.APP_TITLE;
 const appVersion = process.env.APP_VERSION;
diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header/nav-menu-item.tsx
index ba4889432..c56249d63 100644
--- a/app/scripts/components/common/page-header/nav-menu-item.tsx
+++ b/app/scripts/components/common/page-header/nav-menu-item.tsx
@@ -12,10 +12,10 @@ import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown';
 
 import DropdownScrollable from '../dropdown-scrollable';
 import GoogleForm from '../google-form';
-import { LinkProperties } from '../card';
 import { AlignmentEnum, InternalNavLink, ExternalNavLink, NavLinkItem, DropdownNavLink, ModalNavLink, NavItem, NavItemType } from './types';
 import GlobalMenuLinkCSS from '$styles/menu-link';
 import { useMediaQuery } from '$utils/use-media-query';
+import { LinkProperties } from '$types/veda';
 
 
 const rgbaFixed = rgba as any;
diff --git a/app/scripts/components/common/page-hero.tsx b/app/scripts/components/common/page-hero.tsx
index 78569b760..1612a9117 100644
--- a/app/scripts/components/common/page-hero.tsx
+++ b/app/scripts/components/common/page-hero.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import styled, { css } from 'styled-components';
 
 import {
@@ -67,7 +67,7 @@ const PageHeroInner = styled(Constrainer)`
   padding-top: ${variableGlsp(4)};
   padding-bottom: ${variableGlsp(2)};
   align-items: end;
-  
+
   /** The constrainer's padding was going over the imagine attribution icon
   * causing it not to work. We remove the pointer events from it and add them
   * again to the descendants. */
diff --git a/app/scripts/components/common/pub-date.tsx b/app/scripts/components/common/pub-date.tsx
index da63dd0bd..59988516c 100644
--- a/app/scripts/components/common/pub-date.tsx
+++ b/app/scripts/components/common/pub-date.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 function PublishedDate(props: { date: Date }) {
   const { date } = props;
diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
index 62c2d61f8..7b0a369b0 100644
--- a/app/scripts/components/common/smart-link.tsx
+++ b/app/scripts/components/common/smart-link.tsx
@@ -5,7 +5,6 @@ import { getLinkProps } from '$utils/url';
 
 interface SmartLinkProps {
   to: string;
-  onLinkClick?: ()=> void;
   children?: ReactNode;
 }
 
@@ -13,9 +12,9 @@ interface SmartLinkProps {
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, onLinkClick, children, ...rest } = props;
+  const { to, children, ...rest } = props;
   const isExternalLink = /^https?:\/\//.test(to);
-  const linkProps = getLinkProps(to, undefined, onLinkClick);
+  const linkProps = getLinkProps(to);
 
   return isExternalLink ? (
     <a {...linkProps} {...rest}> {children} </a>
@@ -37,8 +36,9 @@ export function CustomLink(props: CustomLinkProps) {
   const isExternalLink = /^https?:\/\//.test(href);
   const linkProps = getLinkProps(href);
   return isExternalLink ? (
-      <a {...linkProps} {...rest} />
+    // @ts-expect-error linkProps returned from getLinkProps are not being recognized suddenly
+    <a {...linkProps} {...rest} />
   ) : (
     <Link {...linkProps} {...rest} />
   );
-}
+}
\ No newline at end of file
diff --git a/app/scripts/components/exploration/atoms/datasets.ts b/app/scripts/components/exploration/atoms/datasets.ts
index ed9751f07..f78bbb18d 100644
--- a/app/scripts/components/exploration/atoms/datasets.ts
+++ b/app/scripts/components/exploration/atoms/datasets.ts
@@ -51,6 +51,7 @@ export const timelineDatasetsAtom = atomWithUrlValueStability<
       }
       // Reconcile the dataset with the internal data (from VEDA config files)
       // and then add the url stored settings.
+      // @TODO - replace datasetLayers
       const [reconciled] = reconcileDatasets([enc.id], datasetLayers, []);
       if (enc.settings) {
         reconciled.settings = enc.settings;
diff --git a/app/scripts/components/exploration/atoms/dates.ts b/app/scripts/components/exploration/atoms/dates.ts
index e79e979a1..022ebcaeb 100644
--- a/app/scripts/components/exploration/atoms/dates.ts
+++ b/app/scripts/components/exploration/atoms/dates.ts
@@ -28,8 +28,8 @@ export const selectedDateAtom = atomWithUrlValueStability<Date | null>({
     if (!prev || !next) return prev === next;
     return prev.getTime() === next.getTime();
   },
-  dehydrate: (date) => {
-    return date?.toISOString() ?? '';
+  dehydrate: (d) => {
+    return d?.toISOString() ?? '';
   }
 });
 
diff --git a/app/scripts/components/exploration/atoms/hooks.ts b/app/scripts/components/exploration/atoms/hooks.ts
index 93ea7f5d1..f6ff462c1 100644
--- a/app/scripts/components/exploration/atoms/hooks.ts
+++ b/app/scripts/components/exploration/atoms/hooks.ts
@@ -3,7 +3,8 @@ import { extent } from 'd3';
 import { PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 
 import { focusAtom } from 'jotai-optics';
-import { add, max } from 'date-fns';
+import add from 'date-fns/add';
+import max from 'date-fns/max';
 
 import { DAY_SIZE_MAX } from '../constants';
 import {
diff --git a/app/scripts/components/exploration/components/chart-popover.tsx b/app/scripts/components/exploration/components/chart-popover.tsx
index ed869c6b3..fcb29450b 100644
--- a/app/scripts/components/exploration/components/chart-popover.tsx
+++ b/app/scripts/components/exploration/components/chart-popover.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo
 } from 'react';
 import { createPortal } from 'react-dom';
-import styled, {css} from 'styled-components';
+import styled, { css } from 'styled-components';
 import {
   useFloating,
   autoUpdate,
@@ -15,7 +15,7 @@ import {
   shift
 } from '@floating-ui/react';
 import { bisector, ScaleTime, sort } from 'd3';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 
 import { AnalysisTimeseriesEntry, TimeDensity, TimelineDatasetSuccess } from '../types.d.ts';
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 adb58e596..6ba6cd34b 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useAtom } from 'jotai';
-import { DatasetData, DatasetLayer } from 'veda';
 import {
   Modal,
   ModalBody,
@@ -9,24 +7,19 @@ import {
   ModalHeader
 } from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
-
-
-import { Link } from 'react-router-dom';
-import { timelineDatasetsAtom } from '../../atoms/datasets';
 import {
-  reconcileDatasets
+  reconcileDatasets,
+  getLayersFromDataset
 } from '../../data-utils-no-faux-module';
-import {   datasetLayers,
-  allExploreDatasets} from '../../data-utils';
-import RenderModalHeader from './header';
+import { TimelineDataset } from '../../types.d.ts';
 
+import RenderModalHeader from './header';
 import ModalFooterRender from './footer';
-
 import CatalogContent from '$components/common/catalog/catalog-content';
-import { DATASETS_PATH } from '$utils/routes';
 import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 import { FilterActions } from '$components/common/catalog/utils';
-import SmartLink from '$components/common/smart-link';
+
+import { DatasetData, LinkProperties, DatasetLayer } from '$types/veda';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -73,15 +66,23 @@ const DatasetModal = styled(Modal)`
 interface DatasetSelectorModalProps {
   revealed: boolean;
   close: () => void;
+  linkProperties: LinkProperties;
+  datasets: DatasetData[];
+  datasetPathName: string;
+  timelineDatasets: TimelineDataset[];
+  setTimelineDatasets: (datasets: TimelineDataset[]) => void;
 }
 
 export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
-  const { revealed, close } = props;
+  const { revealed, linkProperties, datasets, datasetPathName, timelineDatasets, setTimelineDatasets, close } = props;
+  const { LinkElement , pathAttributeKeyName } = linkProperties as { LinkElement: React.ElementType, pathAttributeKeyName: string };
+
+  const datasetLayers = getLayersFromDataset(datasets);
 
-  const [timelineDatasets, setTimelineDatasets] = useAtom(timelineDatasetsAtom);
   const [selectedIds, setSelectedIds] = useState<string[]>(
     timelineDatasets.map((dataset) => dataset.data.id)
   );
+  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();
@@ -99,12 +100,13 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
 
   const onConfirm = useCallback(() => {
     setTimelineDatasets(
-      reconcileDatasets(selectedIds, datasetLayers, timelineDatasets)
+      reconcileDatasets(selectedIds, enhancedDatasetLayers, timelineDatasets)
     );
     onAction(FilterActions.CLEAR);
     close();
-  }, [close, selectedIds, timelineDatasets, setTimelineDatasets, onAction]);
+  }, [close, selectedIds, timelineDatasets, enhancedDatasetLayers, setTimelineDatasets, onAction]);
 
+  const linkElementProps = {[pathAttributeKeyName]: datasetPathName};
   return (
     <DatasetModal
       id='modal'
@@ -117,21 +119,19 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
       )}
       content={
         <CatalogContent
-          datasets={allExploreDatasets}
+          datasets={datasets}
           search={searchTerm}
           taxonomies={taxonomies}
           selectedIds={selectedIds}
           setSelectedIds={setSelectedIds}
           onAction={onAction}
           filterLayers={true}
-          linkProperties={{
-            LinkElement: SmartLink,
-            pathAttributeKeyName: 'to'
-          }}
+          linkProperties={linkProperties}
+          pathname={datasetPathName}
           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} target='_blank'>Data Catalog</Link>.</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>
             </>
           }
         />
diff --git a/app/scripts/components/exploration/components/datasets/block-utils.ts b/app/scripts/components/exploration/components/datasets/block-utils.ts
index 7325ad9e4..cb6085eea 100644
--- a/app/scripts/components/exploration/components/datasets/block-utils.ts
+++ b/app/scripts/components/exploration/components/datasets/block-utils.ts
@@ -1,11 +1,9 @@
-import {
-  endOfDay,
-  endOfMonth,
-  endOfYear,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-} from 'date-fns';
+import endOfDay from 'date-fns/endOfDay';
+import endOfMonth from 'date-fns/endOfMonth';
+import endOfYear from 'date-fns/endOfYear';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfYear from 'date-fns/startOfYear';
 import { TimeDensity } from '$components/exploration/types.d.ts';
 
 /**
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 a80792c32..18b2a0ea8 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -2,7 +2,9 @@ import React, { useCallback, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { Reorder, useDragControls } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
-import { addDays, subDays, areIntervalsOverlapping } from 'date-fns';
+import addDays from 'date-fns/addDays';
+import subDays from 'date-fns/subDays';
+import areIntervalsOverlapping from 'date-fns/areIntervalsOverlapping';
 import { useQueryClient } from '@tanstack/react-query';
 import { ScaleTime } from 'd3';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/app/scripts/components/exploration/components/layer-info-modal.tsx
index e920c4905..977bbd254 100644
--- a/app/scripts/components/exploration/components/layer-info-modal.tsx
+++ b/app/scripts/components/exploration/components/layer-info-modal.tsx
@@ -12,7 +12,6 @@ import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { createButtonStyles } from '@devseed-ui/button';
 import { LayerInfo } from 'veda';
 
-import SmartLink from '$components/common/smart-link';
 import { getDatasetPath } from '$utils/routes';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
@@ -54,7 +53,8 @@ const ParentDatasetHeading = styled.h2`
   padding: ${glsp(0.5)} 0;
 `;
 
-const ButtonStyleLink = styled(SmartLink)<any>`
+// override with 'as' as LinkComponent
+const ButtonStyleLink = styled.a<any>`
   &&& {
     ${({ variation, size }) => createButtonStyles({ variation, size })}
   }
@@ -101,6 +101,7 @@ const LayerInfoLinerModal = styled.div`
 
 export default function LayerInfoModal(props: LayerInfoModalProps) {
   const { revealed, close, layerData } = props;
+
   const { parentData } = layerData;
   const dataCatalogPage = getDatasetPath(parentData.id);
   return (
@@ -132,7 +133,7 @@ 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={
-        <ButtonStyleLink to={dataCatalogPage} onClick={close} variation='primary-fill' size='medium' target='_blank'>
+        <ButtonStyleLink href={dataCatalogPage} rel='noopener noreferrer' onClick={close} variation='primary-fill' size='medium' target='_blank'>
           Open in Data Catalog
         </ButtonStyleLink>
       }
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
index c9dc13c34..c853ff7c2 100644
--- a/app/scripts/components/exploration/components/map/index.tsx
+++ b/app/scripts/components/exploration/components/map/index.tsx
@@ -22,10 +22,10 @@ import MapCoordsControl from '$components/common/map/controls/coords';
 import MapOptionsControl from '$components/common/map/controls/map-options';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
 import { useBasemap } from '$components/common/map/controls/hooks/use-basemap';
-import DrawControl from '$components/common/map/controls/aoi';
-import CustomAoIControl from '$components/common/map/controls/aoi/custom-aoi-control';
 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';
 
 interface ExplorationMapProps {
   datasets: TimelineDataset[];
diff --git a/app/scripts/components/exploration/components/parent-dataset-link.tsx b/app/scripts/components/exploration/components/parent-dataset-link.tsx
deleted file mode 100644
index 0764b7674..000000000
--- a/app/scripts/components/exploration/components/parent-dataset-link.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { themeVal } from '@devseed-ui/theme-provider';
-import { Link } from 'react-router-dom';
-import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
-import { ParentDatset } from '$components/exploration/types.d.ts';
-import { getDatasetPath } from '$utils/routes';
-
-const DatasetLink = styled(Link)<{size: string}>`
-  color: ${themeVal('color.link')};
-  text-align: left;
-  text-transform: none;
-  font-size: ${(props => props.size=='small'? '0.75rem': '1rem')};
-  line-height: 0.75rem;
-  font-weight: normal;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  gap: 0.1rem;
-  > svg {
-    fill: ${themeVal('color.link')};
-  }
-`;
-
-export default function ParentDatasetLink(props: { parentDataset: ParentDatset, size: string}) {
-  const { parentDataset, size } = props;
-  const linkTo = getDatasetPath(parentDataset.id);
-  return (
-  <DatasetLink to={linkTo} size={size}>
-    <CollecticonDatasetLayers /> {parentDataset.name}
-  </DatasetLink>);
-}
\ No newline at end of file
diff --git a/app/scripts/components/exploration/components/timeline/date-axis.tsx b/app/scripts/components/exploration/components/timeline/date-axis.tsx
index 0e356c061..811b08863 100644
--- a/app/scripts/components/exploration/components/timeline/date-axis.tsx
+++ b/app/scripts/components/exploration/components/timeline/date-axis.tsx
@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { ScaleTime } from 'd3';
-import {
-  format, startOfMonth,
-  startOfYear
-} from 'date-fns';
+import format from 'date-fns/format';
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfYear from 'date-fns/startOfYear';
 import { themeVal } from '@devseed-ui/theme-provider';
 
 import { RIGHT_AXIS_SPACE } from '$components/exploration/constants';
diff --git a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx b/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
index a13224262..60511e782 100644
--- a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
@@ -1,7 +1,9 @@
 import React, { memo, useMemo, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { useAtom, useAtomValue } from 'jotai';
-import { endOfYear, format, startOfYear } from 'date-fns';
+import format from 'date-fns/format';
+import startOfYear from 'date-fns/startOfYear';
+import endOfYear from 'date-fns/endOfYear';
 import { scaleTime, ScaleTime } from 'd3';
 
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
diff --git a/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx b/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx
index de7ee5016..8632c8aa9 100644
--- a/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline-datepicker.tsx
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import React from "react";
 import { CollecticonChevronDownSmall } from "@devseed-ui/collecticons";
 import { glsp, themeVal } from "@devseed-ui/theme-provider";
diff --git a/app/scripts/components/exploration/components/timeline/timeline-head.tsx b/app/scripts/components/exploration/components/timeline/timeline-head.tsx
index 1134f7ee8..870cb8cf8 100644
--- a/app/scripts/components/exploration/components/timeline/timeline-head.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline-head.tsx
@@ -1,7 +1,9 @@
 import React, { forwardRef, useEffect, useRef } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { drag, ScaleTime, select } from 'd3';
-import { clamp, format, startOfDay } from 'date-fns';
+import clamp from 'date-fns/clamp';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 
 import { TIMELINE_PLAYHEAD_COLOR_LABEL, TIMELINE_PLAYHEAD_COLOR_PRIMARY, TIMELINE_PLAYHEAD_COLOR_SECONDARY, TIMELINE_PLAYHEAD_COLOR_TEXT } from './timeline-controls';
diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
index 26c88266e..8655f34bb 100644
--- a/app/scripts/components/exploration/components/timeline/timeline.tsx
+++ b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -6,15 +6,13 @@ import {
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Heading } from '@devseed-ui/typography';
 import { select, zoom } from 'd3';
-import {
-  add,
-  isAfter,
-  isBefore,
-  isWithinInterval,
-  max,
-  startOfDay,
-  sub
-} from 'date-fns';
+import add from 'date-fns/add';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import max from 'date-fns/max';
+import sub from 'date-fns/sub';
+import startOfDay from 'date-fns/startOfDay';
+import isWithinInterval from 'date-fns/isWithinInterval';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import React, {
   useCallback,
@@ -170,7 +168,7 @@ interface TimelineProps {
   setSelectedDay: (d: Date | null) => void;
   selectedCompareDay: Date | null;
   setSelectedCompareDay: (d: Date | null) => void;
-  onDatasetAddClick: () => void;
+  onDatasetAddClick?: () => void;
   panelHeight: number;
 }
 
@@ -612,13 +610,17 @@ export default function Timeline(props: TimelineProps) {
     return (
       <Headline>
         <TimelineHeading as='h2'>Data layers</TimelineHeading>
-        <Button
-          variation='primary-fill'
-          size='small'
-          onClick={onDatasetAddClick}
-        >
-          <CollecticonPlusSmall title='Add layer' /> Add layer
-        </Button>
+        {
+          onDatasetAddClick && (
+            <Button
+              variation='primary-fill'
+              size='small'
+              onClick={onDatasetAddClick}
+            >
+              <CollecticonPlusSmall title='Add layer' /> Add layer
+            </Button>
+          )
+        }
       </Headline>
     );
   };
@@ -666,13 +668,17 @@ export default function Timeline(props: TimelineProps) {
               <div>
                 <CollecticonIsoStack size='xxlarge' />
                 <p>No data layer added to the map!</p>
-                <Button
-                  variation='base-text'
-                  size='small'
-                  onClick={onDatasetAddClick}
-                >
-                  Add a layer here
-                </Button>
+                {
+                  onDatasetAddClick && (
+                    <Button
+                      variation='base-text'
+                      size='small'
+                      onClick={onDatasetAddClick}
+                    >
+                      Add a layer here
+                    </Button>
+                  )
+                }
               </div>
             </LayerActionBox>
           </EmptyTimelineContentInner>
diff --git a/app/scripts/components/exploration/container.tsx b/app/scripts/components/exploration/container.tsx
index dd048c3bc..434dcd457 100644
--- a/app/scripts/components/exploration/container.tsx
+++ b/app/scripts/components/exploration/container.tsx
@@ -1,16 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { TourProvider } from '@reactour/tour';
 import { DevTools } from 'jotai-devtools';
 import { useAtom } from 'jotai';
 import { PopoverTourComponent, TourManager } from './tour-manager';
-import { timelineDatasetsAtom } from './atoms/datasets';
+
+import { DatasetSelectorModal } from './components/dataset-selector-modal';
+import { allExploreDatasets } from './data-utils';
+import useTimelineDatasetAtom from './hooks/use-timeline-dataset-atom';
 import ExplorationAndAnalysis from '.';
 import { urlAtom } from '$utils/params-location-atom/url';
-import { EXPLORATION_PATH } from '$utils/routes';
+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';
 
 /**
  * @VEDA2-REFACTOR-WORK
@@ -28,13 +32,20 @@ const tourProviderStyles = {
 };
 
 export default function ExplorationAndAnalysisContainer() {
-  const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
+  const [timelineDatasets, setTimelineDatasets] = useTimelineDatasetAtom();
+  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
+    !timelineDatasets.length
+  );
+
   // @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
   // We check if url Atom actually returns the values for exploration page here.
   const [currentUrl]= useAtom(urlAtom);
   if(!currentUrl.pathname?.includes(EXPLORATION_PATH)) return null;
 
+  const openModal = () => setDatasetModalRevealed(true);
+  const closeModal = () => setDatasetModalRevealed(false);
+
   return (
     <TourProvider
       steps={[]}
@@ -50,7 +61,23 @@ export default function ExplorationAndAnalysisContainer() {
       <TourManager />
       <PageMainContent>
         <PageHero title='Exploration' isHidden />
-        <ExplorationAndAnalysis datasets={datasets} setDatasets={setDatasets} />
+        <ExplorationAndAnalysis
+          datasets={timelineDatasets}
+          setDatasets={setTimelineDatasets}
+          openDatasetsSelectionModal={openModal}
+        />
+        <DatasetSelectorModal
+          revealed={datasetModalRevealed}
+          close={closeModal}
+          datasets={allExploreDatasets}
+          timelineDatasets={timelineDatasets}
+          setTimelineDatasets={setTimelineDatasets}
+          datasetPathName={DATASETS_PATH}
+          linkProperties={{
+            LinkElement: SmartLink,
+            pathAttributeKeyName: 'to'
+          }}
+        />
       </PageMainContent>
     </TourProvider>
   );
diff --git a/app/scripts/components/exploration/data-utils-no-faux-module.ts b/app/scripts/components/exploration/data-utils-no-faux-module.ts
index bfe0927d4..d279c70c5 100644
--- a/app/scripts/components/exploration/data-utils-no-faux-module.ts
+++ b/app/scripts/components/exploration/data-utils-no-faux-module.ts
@@ -39,6 +39,16 @@ export const getDatasetLayers = (datasets: VedaDatum<DatasetData>) =>
     }));
   });
 
+  export const getLayersFromDataset = (datasets: DatasetData[]) =>
+    Object.values(datasets).map((dataset: DatasetData) => {
+      return dataset!.layers.map((l) => ({
+        ...l,
+        parentDataset: {
+          id: dataset!.id,
+          name: dataset!.name
+        }
+      }));
+    });
 /**
  * Returns an array of metrics based on the given Dataset Layer configuration.
  * If the layer has metrics defined, it returns only the metrics that match the
diff --git a/app/scripts/components/exploration/data-utils.ts b/app/scripts/components/exploration/data-utils.ts
index 845eeefa8..87935c4b4 100644
--- a/app/scripts/components/exploration/data-utils.ts
+++ b/app/scripts/components/exploration/data-utils.ts
@@ -1,10 +1,8 @@
-import {
-  eachDayOfInterval,
-  eachYearOfInterval,
-  format,
-  startOfDay,
-  startOfYear
-} from 'date-fns';
+import eachDayOfInterval from 'date-fns/eachDayOfInterval';
+import eachYearOfInterval from 'date-fns/eachYearOfInterval';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
+import startOfYear from 'date-fns/startOfYear';
 import startOfMonth from 'date-fns/startOfMonth';
 import eachMonthOfInterval from 'date-fns/eachMonthOfInterval';
 import {
diff --git a/app/scripts/components/exploration/hooks/scales-hooks.ts b/app/scripts/components/exploration/hooks/scales-hooks.ts
index 31811cb3d..55dc25531 100644
--- a/app/scripts/components/exploration/hooks/scales-hooks.ts
+++ b/app/scripts/components/exploration/hooks/scales-hooks.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { scaleTime } from 'd3';
 import { useAtomValue } from 'jotai';
-import { differenceInCalendarDays } from 'date-fns';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 
 import { timelineSizesAtom, zoomTransformAtom } from '../atoms/timeline';
 import { DAY_SIZE_MAX } from '../constants';
diff --git a/app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx b/app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx
new file mode 100644
index 000000000..46811c17d
--- /dev/null
+++ b/app/scripts/components/exploration/hooks/use-timeline-dataset-atom.tsx
@@ -0,0 +1,11 @@
+import { useAtom } from 'jotai';
+import { timelineDatasetsAtom } from '../atoms/datasets';
+import { TimelineDataset } from '../types.d.ts';
+
+export default function useTimelineDatasetAtom (): [
+  TimelineDataset[],
+  (datasets: TimelineDataset[]) => void
+]  {
+  const [datasets, setDatasets] = useAtom(timelineDatasetsAtom);
+  return [datasets, setDatasets];
+}
\ No newline at end of file
diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
index d50b55512..5e4242cba 100644
--- a/app/scripts/components/exploration/index.tsx
+++ b/app/scripts/components/exploration/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import styled from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
@@ -6,16 +6,17 @@ import { themeVal } from '@devseed-ui/theme-provider';
 import { useAtom, useSetAtom } from 'jotai';
 import Timeline from './components/timeline/timeline';
 import { ExplorationMap } from './components/map';
-import { DatasetSelectorModal } from './components/dataset-selector-modal';
 import { useAnalysisController } from './hooks/use-analysis-data-request';
 import { TimelineDataset } from './types.d.ts';
 import { selectedCompareDateAtom, selectedDateAtom } from './atoms/dates';
 import { CLEAR_LOCATION, urlAtom } from '$utils/params-location-atom/url';
 
+// @TODO: "height: 100%" Added for exploration container to show correctly in NextJs instance but investigate why this is needed and possibly work to remove
 const Container = styled.div`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
+  height: 100%;
 
   .panel-wrapper {
     flex-grow: 1;
@@ -57,10 +58,11 @@ const Container = styled.div`
 interface ExplorationAndAnalysisProps {
   datasets: TimelineDataset[];
   setDatasets: (datasets: TimelineDataset[]) => void;
+  openDatasetsSelectionModal?: () => void;
 }
 
 function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
-  const { datasets, setDatasets } = props;
+  const { datasets, setDatasets, openDatasetsSelectionModal } = props;
 
   const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
 
@@ -68,16 +70,9 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
     selectedCompareDateAtom
   );
 
-  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
-    !datasets.length
-  );
-
   // @TECH-DEBT: panelHeight  needs to be passed to work around Safari CSS
   const [panelHeight, setPanelHeight] = useState(0);
 
-  const openModal = useCallback(() => setDatasetModalRevealed(true), []);
-  const closeModal = useCallback(() => setDatasetModalRevealed(false), []);
-
   const setUrl = useSetAtom(urlAtom);
   const { reset: resetAnalysisController } = useAnalysisController();
 
@@ -114,15 +109,11 @@ function ExplorationAndAnalysis(props: ExplorationAndAnalysisProps) {
             setSelectedDay={setSelectedDay}
             selectedCompareDay={selectedCompareDay}
             setSelectedCompareDay={setSelectedCompareDay}
-            onDatasetAddClick={openModal}
+            onDatasetAddClick={openDatasetsSelectionModal}
             panelHeight={panelHeight}
           />
         </Panel>
       </PanelGroup>
-      <DatasetSelectorModal
-        revealed={datasetModalRevealed}
-        close={closeModal}
-      />
     </Container>
   );
 }
diff --git a/app/scripts/components/stories/hub/hub-content.tsx b/app/scripts/components/stories/hub/hub-content.tsx
index a459c2e8d..b9fff876a 100644
--- a/app/scripts/components/stories/hub/hub-content.tsx
+++ b/app/scripts/components/stories/hub/hub-content.tsx
@@ -20,12 +20,8 @@ import {
   FoldTitle
 } from '$components/common/fold';
 import { useSlidingStickyHeaderProps } from '$components/common/layout-root/useSlidingStickyHeaderProps';
-import { Card, LinkProperties } from '$components/common/card';
-import {
-  CardListGrid,
-  CardMeta,
-  CardTopicsList
-} from '$components/common/card/styles';
+import { Card } from '$components/common/card';
+import { CardListGrid, CardMeta, CardTopicsList } from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';
 import { prepareDatasets } from '$components/common/catalog/prepare-datasets';
 
@@ -40,7 +36,7 @@ import {
   TAXONOMY_TOPICS
 } from '$utils/veda-data/taxonomies';
 import { generateTaxonomies } from '$utils/veda-data/taxonomies';
-import { StoryData } from '$types/veda';
+import { StoryData, LinkProperties } from '$types/veda';
 import { UseFiltersWithQueryResult } from '$components/common/catalog/controls/hooks/use-filters-with-query';
 
 const StoryCount = styled(Subtitle)`
@@ -168,6 +164,7 @@ export default function HubContent(props: HubContentProps) {
                       <CardSourcesList
                         sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
                         rootPath={pathname}
+                        linkProperties={linkProperties}
                         onSourceClick={(id) => {
                           onAction(FilterActions.TAXONOMY_MULTISELECT, {
                             key: TAXONOMY_SOURCE,
@@ -185,9 +182,8 @@ export default function HubContent(props: HubContentProps) {
                   }
                   linkLabel='View more'
                   linkProperties={{
+                    ...linkProperties,
                     linkTo: `${d.asLink?.url ?? d.path}`,
-                    LinkElement,
-                    pathAttributeKeyName
                   }}
                   title={
                     <TextHighlight value={search} disabled={search.length < 3}>
diff --git a/app/scripts/index.ts b/app/scripts/index.ts
index 82f15097b..a276bbb4b 100644
--- a/app/scripts/index.ts
+++ b/app/scripts/index.ts
@@ -20,6 +20,21 @@ import PageHeader from '$components/common/page-header';
 import LogoContainer from '$components/common/page-header/logo-container';
 import type { NavItem, InternalNavLink, NavItemType } from '$components/common/page-header/types';
 
+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';
+
+// Adding .last property to array
+/* eslint-disable-next-line fp/no-mutating-methods */
+Object.defineProperty(Array.prototype, 'last', {
+  enumerable: false,
+  configurable: true,
+  get: function () {
+    return this[this.length - 1];
+  },
+  set: undefined
+});
 
 export {
   // COMPONENTS
@@ -43,12 +58,18 @@ export {
   ReactQueryProvider,
   StoriesHubContent,
   LogoContainer,
+  ExplorationAndAnalysis,
+  DatasetSelectorModal,
 
-  // HOOKS and utility functions
+  // HOOKS
+  useTimelineDatasetAtom,
   useFiltersWithQS,
 
   // TYPES
   NavItem,
   NavItemType,
-  InternalNavLink
+  InternalNavLink,
+
+  // STATE
+  timelineDatasetsAtom
 };
diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts
index ec3d1f663..96d5222c7 100644
--- a/app/scripts/types/veda.ts
+++ b/app/scripts/types/veda.ts
@@ -1,7 +1,7 @@
 import * as dateFns from 'date-fns';
 import mapboxgl from 'mapbox-gl';
 import { MDXModule } from 'mdx/types';
-
+import { ComponentType } from 'react';
 // ///////////////////////////////////////////////////////////////////////////
 //  Datasets                                                                //
 // ///////////////////////////////////////////////////////////////////////////
@@ -213,6 +213,7 @@ export interface StoryData {
   related?: RelatedContentData[];
   asLink?: LinkContentData;
   hideExternalLinkBadge?: boolean;
+  isLinkExternal?: boolean;
   isHidden?: boolean;
 }
 
@@ -280,3 +281,10 @@ export interface EnhancedDatasetLayer extends DatasetLayer {
 export interface DatasetDataWithEnhancedLayers extends DatasetData {
   layers: EnhancedDatasetLayer[];
 }
+
+// Types needed for library
+
+export interface LinkProperties {
+  LinkElement: string | ComponentType<any> | undefined;
+  pathAttributeKeyName: string;
+}
\ No newline at end of file
diff --git a/app/scripts/utils/date.ts b/app/scripts/utils/date.ts
index 1ff91fac0..a41bd8c01 100644
--- a/app/scripts/utils/date.ts
+++ b/app/scripts/utils/date.ts
@@ -1,11 +1,9 @@
-import {
-  format,
-  isSameMonth,
-  isSameYear,
-  parse,
-  startOfYear,
-  sub
-} from 'date-fns';
+import format from 'date-fns/format';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import parse from 'date-fns/parse';
+import startOfYear from 'date-fns/startOfYear';
+import sub from 'date-fns/sub';
 
 /**
  * Create a date which matches the input date offsetting the timezone to match
diff --git a/app/scripts/utils/url.ts b/app/scripts/utils/url.ts
index 926bf23ff..0b6e2626e 100644
--- a/app/scripts/utils/url.ts
+++ b/app/scripts/utils/url.ts
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 import { LinkProps } from 'react-router-dom';
 
 export function isExternalLink(link: string): boolean {
@@ -9,8 +9,7 @@ export const getLinkProps = (
   linkTo: string,
   as?: React.ForwardRefExoticComponent<
     LinkProps & React.RefAttributes<HTMLAnchorElement>
-  >,
-  onClick?: (() => void) | MouseEventHandler
+  >
 ) => {
   // Open the link in a new tab when link is external
   const isExternalLink = /^https?:\/\//.test(linkTo);
@@ -19,11 +18,9 @@ export const getLinkProps = (
         href: linkTo,
         to: linkTo,
         ...{ target: '_blank', rel: 'noopener noreferrer' },
-        ...(onClick ? { onClick: onClick } : {})
       }
     : {
         ...(as ? { as: as } : {}),
         to: linkTo,
-        ...(onClick ? { onClick: onClick } : {})
       };
 };