diff --git a/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx b/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx
index bf5f170bf..e5aa8479d 100644
--- a/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx
+++ b/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx
@@ -13,6 +13,7 @@ interface RasterPaintLayerProps extends BaseGeneratorParams {
   colorMap?: string | undefined;
   tileParams: Record<string, any>;
   generatorPrefix?: string;
+  reScale?: { min: number; max: number };
 }
 
 export function RasterPaintLayer(props: RasterPaintLayerProps) {
@@ -24,7 +25,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
     hidden,
     opacity,
     colorMap,
-    generatorPrefix = 'raster',
+    reScale,
+    generatorPrefix = 'raster'
   } = props;
 
   const { updateStyle } = useMapStyle();
@@ -32,8 +34,14 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
   const generatorId = `${generatorPrefix}-${id}`;
 
   const updatedTileParams = useMemo(() => {
-    return { ...tileParams, ...colorMap &&  {colormap_name: colorMap}};
-  }, [tileParams, colorMap]);
+    return {
+      ...tileParams,
+      ...(colorMap && {
+        colormap_name: colorMap
+      }),
+      ...(reScale && { rescale: Object.values(reScale) })
+    };
+  }, [tileParams, colorMap, reScale]);
 
   //
   // Generate Mapbox GL layers and sources for raster timeseries
@@ -47,7 +55,9 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
 
   useEffect(
     () => {
-      const tileParamsAsString = qs.stringify(updatedTileParams, { arrayFormat: 'comma' });
+      const tileParamsAsString = qs.stringify(updatedTileParams, {
+        arrayFormat: 'comma'
+      });
 
       const zarrSource: RasterSource = {
         type: 'raster',
@@ -63,8 +73,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
         paint: {
           'raster-opacity': hidden ? 0 : rasterOpacity,
           'raster-opacity-transition': {
-            duration: 320,
-          },
+            duration: 320
+          }
         },
         minzoom: minZoom,
         metadata: {
@@ -93,7 +103,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
       tileApiEndpoint,
       haveTileParamsChanged,
       generatorParams,
-      colorMap
+      colorMap,
+      reScale
       // generatorParams includes hidden and opacity
       // hidden,
       // opacity,
diff --git a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx b/app/scripts/components/common/map/style-generators/raster-timeseries.tsx
index ccaaeb3d5..3030506ad 100644
--- a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx
+++ b/app/scripts/components/common/map/style-generators/raster-timeseries.tsx
@@ -63,6 +63,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
     stacApiEndpoint,
     tileApiEndpoint,
     colorMap,
+    reScale,
     envApiStacEndpoint,
     envApiRasterEndpoint
   } = props;
@@ -367,7 +368,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
           {
             assets: 'cog_default',
             ...(sourceParams ?? {}),
-            ...(colorMap && { colormap_name: colorMap })
+            ...(colorMap && { colormap_name: colorMap }),
+            ...(reScale && { rescale: Object.values(reScale) })
           },
           // Temporary solution to pass different tile parameters for hls data
           {
@@ -495,6 +497,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
   }, [
     mosaicUrl,
     colorMap,
+    reScale,
     points,
     minZoom,
     haveSourceParamsChanged,
diff --git a/app/scripts/components/common/map/types.d.ts b/app/scripts/components/common/map/types.d.ts
index 8eb8bb8c1..39af6eb5c 100644
--- a/app/scripts/components/common/map/types.d.ts
+++ b/app/scripts/components/common/map/types.d.ts
@@ -54,6 +54,7 @@ export interface BaseTimeseriesProps extends BaseGeneratorParams {
   zoomExtent?: number[];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   colorMap?: string;
+  reScale?: { min: number; max: number };
   envApiStacEndpoint: string;
   envApiRasterEndpoint: string;
 }
diff --git a/app/scripts/components/common/uswds/index.tsx b/app/scripts/components/common/uswds/index.tsx
index e5410b060..fcd5abfd9 100644
--- a/app/scripts/components/common/uswds/index.tsx
+++ b/app/scripts/components/common/uswds/index.tsx
@@ -2,3 +2,4 @@ export { USWDSAlert } from './alert';
 export { USWDSButtonGroup, USWDSButton } from './button';
 export { USWDSLink } from './link';
 export { USWDSBanner, USWDSBannerContent } from './banner';
+export { USWDSTextInput, USWDSTextInputMask } from './input';
\ No newline at end of file
diff --git a/app/scripts/components/common/uswds/input.tsx b/app/scripts/components/common/uswds/input.tsx
new file mode 100644
index 000000000..3f6385422
--- /dev/null
+++ b/app/scripts/components/common/uswds/input.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { TextInput, TextInputMask } from '@trussworks/react-uswds';
+
+export function USWDSTextInput(props) {
+  return <TextInput {...props} />;
+}
+
+export function USWDSTextInputMask(props) {
+  return <TextInputMask {...props} />;
+}
diff --git a/app/scripts/components/exploration/atoms/hooks.ts b/app/scripts/components/exploration/atoms/hooks.ts
index f6ff462c1..8cacd066b 100644
--- a/app/scripts/components/exploration/atoms/hooks.ts
+++ b/app/scripts/components/exploration/atoms/hooks.ts
@@ -170,3 +170,15 @@ export const useTimelineDatasetAnalysis = (
     )
   );
 };
+
+export function useTimelineDatasetColormapScale(
+  datasetAtom: PrimitiveAtom<TimelineDataset>
+) {
+  const colorMapScaleAtom = useMemo(() => {
+    return focusAtom(datasetAtom, (optic) =>
+      optic.prop('settings').prop('scale')
+    );
+  }, [datasetAtom]);
+
+  return useAtom(colorMapScaleAtom);
+}
diff --git a/app/scripts/components/exploration/components/datasets/colormap-options.tsx b/app/scripts/components/exploration/components/datasets/colormap-options.tsx
index a6ce07e21..cb76ccb22 100644
--- a/app/scripts/components/exploration/components/datasets/colormap-options.tsx
+++ b/app/scripts/components/exploration/components/datasets/colormap-options.tsx
@@ -1,23 +1,38 @@
 import React, { useEffect, useState } from 'react';
-import { Icon } from "@trussworks/react-uswds";
+import { Icon } from '@trussworks/react-uswds';
 import { CollecticonDrop } from '@devseed-ui/collecticons';
-import { sequentialColorMaps, divergingColorMaps, restColorMaps } from './colorMaps';
+import {
+  sequentialColorMaps,
+  divergingColorMaps,
+  restColorMaps
+} from './colorMaps';
 
 import './colormap-options.scss';
-
+import { ColorRangeSlider } from './colorRangeSlider/index';
+import { colorMapScale } from '$components/exploration/types.d.ts';
 export const DEFAULT_COLORMAP = 'viridis';
 
 const CURATED_SEQUENTIAL_COLORMAPS = [
-  'viridis', 'plasma', 'inferno', 'magma', 'cividis',
-  'purples', 'blues', 'reds', 'greens', 'oranges',
-  'ylgnbu', 'ylgn', 'gnbu'
+  'viridis',
+  'plasma',
+  'inferno',
+  'magma',
+  'cividis',
+  'purples',
+  'blues',
+  'reds',
+  'greens',
+  'oranges',
+  'ylgnbu',
+  'ylgn',
+  'gnbu'
 ];
 
-const CURATED_DIVERGING_COLORMAPS = [
-  'rdbu', 'rdylbu', 'bwr', 'coolwarm'
-];
+const CURATED_DIVERGING_COLORMAPS = ['rdbu', 'rdylbu', 'bwr', 'coolwarm'];
 
-export const classifyColormap = (colormapName: string): 'sequential' | 'diverging' | 'rest' | 'unknown' => {
+export const classifyColormap = (
+  colormapName: string
+): 'sequential' | 'diverging' | 'rest' | 'unknown' => {
   const baseName = normalizeColorMap(colormapName);
 
   if (sequentialColorMaps[baseName]) {
@@ -33,9 +48,16 @@ export const classifyColormap = (colormapName: string): 'sequential' | 'divergin
 interface ColormapOptionsProps {
   colorMap: string | undefined;
   setColorMap: (colorMap: string) => void;
+  min: number;
+  max: number;
+  setColorMapScale: (colorMapScale: colorMapScale) => void;
+  colorMapScale: colorMapScale | undefined;
 }
 
-export const getColormapColors = (colormapName: string, isReversed: boolean): string[] => {
+export const getColormapColors = (
+  colormapName: string,
+  isReversed: boolean
+): string[] => {
   const baseName = normalizeColorMap(colormapName);
   const colormapData =
     sequentialColorMaps[baseName] ||
@@ -49,10 +71,19 @@ export const getColormapColors = (colormapName: string, isReversed: boolean): st
     return `rgba(${r}, ${g}, ${b}, ${a})`;
   });
 
-  return isReversed ? colors.reduceRight((acc, color) => [...acc, color], []) : colors;
+  return isReversed
+    ? colors.reduceRight((acc, color) => [...acc, color], [])
+    : colors;
 };
 
-export function ColormapOptions({ colorMap = DEFAULT_COLORMAP, setColorMap}: ColormapOptionsProps) {
+export function ColormapOptions({
+  colorMap = DEFAULT_COLORMAP,
+  min,
+  max,
+  setColorMap,
+  setColorMapScale,
+  colorMapScale
+}: ColormapOptionsProps) {
   const initialIsReversed = colorMap.endsWith('_r');
   const initialColorMap = normalizeColorMap(colorMap);
 
@@ -63,9 +94,15 @@ export function ColormapOptions({ colorMap = DEFAULT_COLORMAP, setColorMap}: Col
   const [customColorMap, setCustomColorMap] = useState<string | null>(null);
 
   useEffect(() => {
-    if (colormapType === 'sequential' && !CURATED_SEQUENTIAL_COLORMAPS.includes(selectedColorMap)) {
+    if (
+      colormapType === 'sequential' &&
+      !CURATED_SEQUENTIAL_COLORMAPS.includes(selectedColorMap)
+    ) {
       setCustomColorMap(selectedColorMap);
-    } else if (colormapType === 'diverging' && !CURATED_DIVERGING_COLORMAPS.includes(selectedColorMap)) {
+    } else if (
+      colormapType === 'diverging' &&
+      !CURATED_DIVERGING_COLORMAPS.includes(selectedColorMap)
+    ) {
       setCustomColorMap(selectedColorMap);
     }
   }, [selectedColorMap, colormapType]);
@@ -74,15 +111,25 @@ export function ColormapOptions({ colorMap = DEFAULT_COLORMAP, setColorMap}: Col
 
   if (colormapType === 'sequential') {
     if (customColorMap) {
-      availableColormaps = [{ name: customColorMap }, ...CURATED_SEQUENTIAL_COLORMAPS.map(name => ({ name }))];
+      availableColormaps = [
+        { name: customColorMap },
+        ...CURATED_SEQUENTIAL_COLORMAPS.map((name) => ({ name }))
+      ];
     } else {
-      availableColormaps = CURATED_SEQUENTIAL_COLORMAPS.map(name => ({ name }));
+      availableColormaps = CURATED_SEQUENTIAL_COLORMAPS.map((name) => ({
+        name
+      }));
     }
   } else if (colormapType === 'diverging') {
     if (customColorMap) {
-      availableColormaps = [{ name: customColorMap }, ...CURATED_DIVERGING_COLORMAPS.map(name => ({ name }))];
+      availableColormaps = [
+        { name: customColorMap },
+        ...CURATED_DIVERGING_COLORMAPS.map((name) => ({ name }))
+      ];
     } else {
-      availableColormaps = CURATED_DIVERGING_COLORMAPS.map(name => ({ name }));
+      availableColormaps = CURATED_DIVERGING_COLORMAPS.map((name) => ({
+        name
+      }));
     }
   } else if (colormapType === 'rest') {
     availableColormaps = [{ name: selectedColorMap }];
@@ -105,17 +152,35 @@ export function ColormapOptions({ colorMap = DEFAULT_COLORMAP, setColorMap}: Col
 
   return (
     <div className='colormap-options__container bg-white shadow-1 maxh-mobile-lg'>
-      <div className='display-flex flex-align-center text-gray-90 padding-2 font-heading-xs text-bold'><CollecticonDrop className='margin-right-1' /> Colormap options</div>
+      <div className='display-flex flex-align-center text-gray-90 padding-2 font-heading-xs text-bold'>
+        <CollecticonDrop className='margin-right-1' /> Colormap options
+      </div>
 
-      <div className='display-flex flex-align-center flex-justify border-top-1px border-bottom-1px border-base-lightest bg-base-lightest padding-2'>
-        <div className='display-flex flex-align-center' onClick={handleReverseToggle}>
-          <label className='font-ui-3xs text-gray-90 text-semibold margin-right-1'>Reverse</label>
+      <div className='display-flex flex-align-center flex-column flex-justify border-top-1px border-bottom-1px border-base-lightest bg-base-lightest padding-2'>
+        <ColorRangeSlider
+          min={min}
+          max={max}
+          colorMapScale={colorMapScale}
+          setColorMapScale={setColorMapScale}
+        />
+        <div
+          className='display-flex flex-align-center width-full padding-top-1'
+          onClick={handleReverseToggle}
+        >
+          <label className='font-ui-3xs text-gray-90 text-semibold margin-right-1'>
+            Reverse
+          </label>
           {isReversed ? (
             <Icon.ToggleOn className='text-primary' size={4} />
           ) : (
             <Icon.ToggleOff className='text-base-light' size={4} />
           )}
-          <input className='colormap-options__input' checked={isReversed} type='checkbox' readOnly />
+          <input
+            className='colormap-options__input'
+            checked={isReversed}
+            type='checkbox'
+            readOnly
+          />
         </div>
       </div>
 
@@ -125,13 +190,21 @@ export function ColormapOptions({ colorMap = DEFAULT_COLORMAP, setColorMap}: Col
 
           return (
             <div
-              className={`colormap-options__item display-flex flex-align-center flex-justify padding-2 border-bottom-1px border-base-lightest radius-md ${selectedColorMap.toLowerCase() === name.toLowerCase() ? 'selected' : ''}`}
+              className={`colormap-options__item display-flex flex-align-center flex-justify padding-2 border-bottom-1px border-base-lightest radius-md ${
+                selectedColorMap.toLowerCase() === name.toLowerCase()
+                  ? 'selected'
+                  : ''
+              }`}
               key={name}
               onClick={() => handleColorMapSelect(name.toLowerCase())}
             >
               <div
                 className='colormap-options__preview display-flex border-1px border-base-lightest radius-md margin-right-2'
-                style={{ background: `linear-gradient(to right, ${previewColors.join(', ')})` }}
+                style={{
+                  background: `linear-gradient(to right, ${previewColors.join(
+                    ', '
+                  )})`
+                }}
               />
               <label className='colormap-options__label text-gray-90 font-heading-xs flex-1'>
                 {name}
@@ -144,7 +217,6 @@ export function ColormapOptions({ colorMap = DEFAULT_COLORMAP, setColorMap}: Col
   );
 }
 
-
 function normalizeColorMap(colorMap: string): string {
   return colorMap.replace(/_r$/, '');
 }
diff --git a/app/scripts/components/exploration/components/datasets/data-layer-card.tsx b/app/scripts/components/exploration/components/datasets/data-layer-card.tsx
index 825cd8eb4..f92324796 100644
--- a/app/scripts/components/exploration/components/datasets/data-layer-card.tsx
+++ b/app/scripts/components/exploration/components/datasets/data-layer-card.tsx
@@ -17,10 +17,14 @@ import LayerMenuOptions from './layer-options-menu';
 import { ColormapOptions } from './colormap-options';
 import { TipButton } from '$components/common/tip-button';
 import {
-  LayerCategoricalGraphic, LayerGradientColormapGraphic
+  LayerCategoricalGraphic,
+  LayerGradientColormapGraphic
 } from '$components/common/map/layer-legend';
 
-import { TimelineDataset } from '$components/exploration/types.d.ts';
+import {
+  TimelineDataset,
+  colorMapScale
+} from '$components/exploration/types.d.ts';
 import { CollecticonDatasetLayers } from '$components/common/icons/dataset-layers';
 import { ParentDatasetTitle } from '$components/common/catalog/catalog-content';
 import { checkEnvFlag } from '$utils/utils';
@@ -35,6 +39,8 @@ interface CardProps {
   setVisible: any;
   colorMap: string | undefined;
   setColorMap: (colorMap: string) => void;
+  colorMapScale: colorMapScale | undefined;
+  setColorMapScale: (colorMapScale: colorMapScale) => void;
   onClickLayerInfo: () => void;
   datasetLegend: LayerLegendCategorical | LayerLegendGradient | undefined;
 }
@@ -104,7 +110,9 @@ const LegendColorMapTrigger = styled.div`
 `;
 
 // Hiding configurable map for now until Instances are ready to adapt it
-const showConfigurableColorMap = checkEnvFlag(process.env.SHOW_CONFIGURABLE_COLOR_MAP);
+const showConfigurableColorMap = checkEnvFlag(
+  process.env.SHOW_CONFIGURABLE_COLOR_MAP
+);
 
 export default function DataLayerCard(props: CardProps) {
   const {
@@ -114,6 +122,8 @@ export default function DataLayerCard(props: CardProps) {
     setVisible,
     colorMap,
     setColorMap,
+    colorMapScale,
+    setColorMapScale,
     datasetLegend,
     onClickLayerInfo
   } = props;
@@ -132,9 +142,16 @@ export default function DataLayerCard(props: CardProps) {
     }
   };
 
-  const showLoadingConfigurableCmapSkeleton = showConfigurableColorMap && dataset.status === 'loading' && datasetLegend?.type === 'gradient';
-  const showConfigurableCmap = showConfigurableColorMap && dataset.status === 'success' && datasetLegend?.type === 'gradient';
-  const showNonConfigurableCmap = !showConfigurableColorMap && datasetLegend?.type === 'gradient';
+  const showLoadingConfigurableCmapSkeleton =
+    showConfigurableColorMap &&
+    dataset.status === 'loading' &&
+    datasetLegend?.type === 'gradient';
+  const showConfigurableCmap =
+    showConfigurableColorMap &&
+    dataset.status === 'success' &&
+    datasetLegend?.type === 'gradient';
+  const showNonConfigurableCmap =
+    !showConfigurableColorMap && datasetLegend?.type === 'gradient';
 
   return (
     <>
@@ -158,7 +175,10 @@ export default function DataLayerCard(props: CardProps) {
                 onPointerDownCapture={(e) => e.stopPropagation()}
                 onClick={onClickLayerInfo}
               >
-                <CollecticonCircleInformation meaningful title='View dataset page' />
+                <CollecticonCircleInformation
+                  meaningful
+                  title='View dataset page'
+                />
               </TipButton>
               <TipButton
                 tipContent={isVisible ? 'Hide layer' : 'Show layer'}
@@ -168,9 +188,15 @@ export default function DataLayerCard(props: CardProps) {
                 onClick={() => setVisible((v) => !v)}
               >
                 {isVisible ? (
-                  <CollecticonEye meaningful title='Toggle dataset visibility' />
+                  <CollecticonEye
+                    meaningful
+                    title='Toggle dataset visibility'
+                  />
                 ) : (
-                  <CollecticonEyeDisabled meaningful title='Toggle dataset visibility' />
+                  <CollecticonEyeDisabled
+                    meaningful
+                    title='Toggle dataset visibility'
+                  />
                 )}
               </TipButton>
               <LayerMenuOptions datasetAtom={datasetAtom} />
@@ -182,49 +208,66 @@ export default function DataLayerCard(props: CardProps) {
           </DatasetMetricInfo>
         </DatasetCardInfo>
         {datasetLegend?.type === 'categorical' && (
-          <LayerCategoricalGraphic type='categorical' stops={datasetLegend.stops} />
+          <LayerCategoricalGraphic
+            type='categorical'
+            stops={datasetLegend.stops}
+          />
         )}
 
-          {/* Show a loading skeleton when the color map is not categorical and the dataset
+        {/* Show a loading skeleton when the color map is not categorical and the dataset
           status is 'loading'. This is because we color map sometimes might come from the titiler
           which could introduce a visual flash when going from the 'default' color map to the one
           configured in titiler */}
 
-          {showLoadingConfigurableCmapSkeleton && <div className='display-flex flex-align-center height-8'><LoadingSkeleton /></div>}
-          {showConfigurableCmap && (
-            <div className='display-flex flex-align-center flex-justify margin-y-1 padding-left-1 border-bottom-1px border-base-lightest radius-md' ref={triggerRef}>
-              <LayerGradientColormapGraphic
-                min={min}
-                max={max}
-                colorMap={colorMap}
-              />
-              <Tippy
-                className='colormap-options'
-                content={
-                  <ColormapOptions
-                    colorMap={colorMap}
-                    setColorMap={setColorMap}
-                  />
-                }
-                appendTo={() => document.body}
-                visible={isColorMapOpen}
-                interactive={true}
-                placement='top'
-                onClickOutside={(_, event) => handleClickOutside(event)}
+        {showLoadingConfigurableCmapSkeleton && (
+          <div className='display-flex flex-align-center height-8'>
+            <LoadingSkeleton />
+          </div>
+        )}
+        {showConfigurableCmap && (
+          <div
+            className='display-flex flex-align-center flex-justify margin-y-1 padding-left-1 border-bottom-1px border-base-lightest radius-md'
+            ref={triggerRef}
+          >
+            <LayerGradientColormapGraphic
+              min={min}
+              max={max}
+              colorMap={colorMap}
+            />
+            <Tippy
+              className='colormap-options'
+              content={
+                <ColormapOptions
+                  min={min}
+                  max={max}
+                  colorMap={colorMap}
+                  setColorMap={setColorMap}
+                  setColorMapScale={setColorMapScale}
+                  colorMapScale={colorMapScale}
+                />
+              }
+              appendTo={() => document.body}
+              visible={isColorMapOpen}
+              interactive={true}
+              placement='top'
+              onClickOutside={(_, event) => handleClickOutside(event)}
+            >
+              <LegendColorMapTrigger
+                className='display-flex flex-align-center flex-justify bg-base-lightest margin-left-1 padding-05'
+                onClick={handleColorMapTriggerClick}
               >
-                <LegendColorMapTrigger className='display-flex flex-align-center flex-justify bg-base-lightest margin-left-1 padding-05' onClick={handleColorMapTriggerClick}>
-                  <CollecticonChevronDownSmall />
-                </LegendColorMapTrigger>
-              </Tippy>
-            </div>
-          )}
-        {showNonConfigurableCmap &&
+                <CollecticonChevronDownSmall />
+              </LegendColorMapTrigger>
+            </Tippy>
+          </div>
+        )}
+        {showNonConfigurableCmap && (
           <LayerGradientColormapGraphic
             min={min}
             max={max}
             colorMap={colorMap}
-          />}
-
+          />
+        )}
       </DatasetInfo>
     </>
   );
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 18b2a0ea8..34fab5edd 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -35,7 +35,8 @@ import {
   useTimelineDatasetAtom,
   useTimelineDatasetColormap,
   useTimelineDatasetSettings,
-  useTimelineDatasetVisibility
+  useTimelineDatasetVisibility,
+  useTimelineDatasetColormapScale
 } from '$components/exploration/atoms/hooks';
 import {
   useAnalysisController,
@@ -105,7 +106,10 @@ export function DatasetListItem(props: DatasetListItemProps) {
 
   const [isVisible, setVisible] = useTimelineDatasetVisibility(datasetAtom);
   const [colorMap, setColorMap] = useTimelineDatasetColormap(datasetAtom);
-  const [modalLayerInfo, setModalLayerInfo] = React.useState<LayerInfoModalData>();
+  const [colorMapScale, setColorMapScale] =
+    useTimelineDatasetColormapScale(datasetAtom);
+  const [modalLayerInfo, setModalLayerInfo] =
+    React.useState<LayerInfoModalData>();
   const [, setSetting] = useTimelineDatasetSettings(datasetAtom);
 
   const queryClient = useQueryClient();
@@ -121,7 +125,10 @@ export function DatasetListItem(props: DatasetListItemProps) {
   }, [queryClient, datasetId]);
 
   const onClickLayerInfo = useCallback(() => {
-    const parentInfoDesc = findDatasetAttribute({datasetId: dataset.data.parentDataset.id, attr: 'infoDescription'});
+    const parentInfoDesc = findDatasetAttribute({
+      datasetId: dataset.data.parentDataset.id,
+      attr: 'infoDescription'
+    });
     const data: LayerInfoModalData = {
       name: dataset.data.name,
       description: dataset.data.description,
@@ -188,7 +195,6 @@ export function DatasetListItem(props: DatasetListItemProps) {
     [dataset]
   );
 
-
   const onDragging = (e) => {
     controls.start(e);
   };
@@ -210,8 +216,19 @@ export function DatasetListItem(props: DatasetListItemProps) {
       <DatasetItem>
         <DatasetHeader>
           <DatasetHeaderInner>
-            <div style={{width: '100%'}} onPointerDown={onDragging}>
-              <DataLayerCard dataset={dataset} datasetAtom={datasetAtom} colorMap={colorMap} setColorMap={setColorMap} isVisible={isVisible} setVisible={setVisible} datasetLegend={datasetLegend} onClickLayerInfo={onClickLayerInfo} />
+            <div style={{ width: '100%' }} onPointerDown={onDragging}>
+              <DataLayerCard
+                dataset={dataset}
+                datasetAtom={datasetAtom}
+                colorMap={colorMap}
+                colorMapScale={colorMapScale}
+                setColorMap={setColorMap}
+                setColorMapScale={setColorMapScale}
+                isVisible={isVisible}
+                setVisible={setVisible}
+                datasetLegend={datasetLegend}
+                onClickLayerInfo={onClickLayerInfo}
+              />
             </div>
             {modalLayerInfo && (
               <LayerInfoModal
@@ -394,4 +411,4 @@ function DatasetTrackBlock(props: DatasetTrackBlockProps) {
       />
     </g>
   );
-}
\ No newline at end of file
+}
diff --git a/app/scripts/components/exploration/components/map/layer.tsx b/app/scripts/components/exploration/components/map/layer.tsx
index 902e0a6c3..cdc1053e5 100644
--- a/app/scripts/components/exploration/components/map/layer.tsx
+++ b/app/scripts/components/exploration/components/map/layer.tsx
@@ -26,7 +26,7 @@ export function Layer(props: LayerProps) {
     useContext(EnvConfigContext);
 
   const { id: layerId, dataset, order, selectedDay, onStatusChange } = props;
-  const { isVisible, opacity, colorMap } = dataset.settings;
+  const { isVisible, opacity, colorMap, scale } = dataset.settings;
 
   // The date needs to match the dataset's time density.
   const relevantDate = useMemo(
@@ -77,6 +77,7 @@ export function Layer(props: LayerProps) {
           opacity={opacity}
           onStatusChange={onStatusChange}
           colorMap={colorMap}
+          reScale={scale}
           envApiStacEndpoint={envApiStacEndpoint}
           envApiRasterEndpoint={envApiRasterEndpoint}
         />
@@ -95,6 +96,7 @@ export function Layer(props: LayerProps) {
           opacity={opacity}
           onStatusChange={onStatusChange}
           colorMap={colorMap}
+          reScale={scale}
           envApiStacEndpoint={envApiStacEndpoint}
           envApiRasterEndpoint={envApiRasterEndpoint}
         />
@@ -114,6 +116,7 @@ export function Layer(props: LayerProps) {
           opacity={opacity}
           onStatusChange={onStatusChange}
           colorMap={colorMap}
+          reScale={scale}
           envApiStacEndpoint={envApiStacEndpoint}
           envApiRasterEndpoint={envApiRasterEndpoint}
         />
diff --git a/app/scripts/components/exploration/types.d.ts.ts b/app/scripts/components/exploration/types.d.ts.ts
index b6daad9f4..6a810e8b2 100644
--- a/app/scripts/components/exploration/types.d.ts.ts
+++ b/app/scripts/components/exploration/types.d.ts.ts
@@ -96,6 +96,11 @@ export interface DatasetData extends EnhancedDatasetLayer {
   domain: Date[];
 }
 
+export interface colorMapScale {
+  min: number;
+  max: number;
+}
+
 export interface DatasetSettings {
   // Whether or not the layer should be shown on the map.
   isVisible?: boolean;
@@ -105,6 +110,9 @@ export interface DatasetSettings {
   analysisMetrics?: DataMetric[];
   // Active colormap of the layer.
   colorMap?: string;
+  // Active colormap scale.
+
+  scale?: colorMapScale;
 }
 
 // Any sort of meta information the dataset like: