diff --git a/src/components/CountyMap/index.stories.tsx b/src/components/CountyMap/index.stories.tsx
index 1f45bc0de..4fca45717 100644
--- a/src/components/CountyMap/index.stories.tsx
+++ b/src/components/CountyMap/index.stories.tsx
@@ -28,12 +28,13 @@ export default {
   title: 'Molecules / Maps / CountyMap',
 } as Meta<CountyMapProps>;
 
-export const Default: StoryObj<CountyMapProps> = {
+export const Default: StoryObj<CountyMapProps> = {};
+
+export const CustomColor: StoryObj<CountyMapProps> = {
   args: {
-    data: defaultData,
-    geoJSONPath: '/maps/counties.json',
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
-    processDataFn: defaultProcessDataFn,
+    mapProps: {
+      color: '#FF0000',
+    },
   },
 };
 
diff --git a/src/components/CountyMap/index.tsx b/src/components/CountyMap/index.tsx
index d797ae3a5..7f4492871 100644
--- a/src/components/CountyMap/index.tsx
+++ b/src/components/CountyMap/index.tsx
@@ -30,7 +30,7 @@ export interface CountyMapProps {
   geoJSONPath: string;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   onHoverInfo?: FeatureHoverProps;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,
diff --git a/src/components/GeomarketMap/index.stories.tsx b/src/components/GeomarketMap/index.stories.tsx
index ccd3eb58d..16df7623c 100644
--- a/src/components/GeomarketMap/index.stories.tsx
+++ b/src/components/GeomarketMap/index.stories.tsx
@@ -28,12 +28,13 @@ export default {
   title: 'Molecules / Maps / GeomarketMap',
 } as Meta<GeomarketMapProps>;
 
-export const Default: StoryObj<GeomarketMapProps> = {
+export const Default: StoryObj<GeomarketMapProps> = {};
+
+export const CustomColor: StoryObj<GeomarketMapProps> = {
   args: {
-    data: defaultData,
-    geoJSONPath: '/maps/geomarkets.json',
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
-    processDataFn: defaultProcessDataFn,
+    mapProps: {
+      color: '#FF0000',
+    },
   },
 };
 
diff --git a/src/components/GeomarketMap/index.tsx b/src/components/GeomarketMap/index.tsx
index ed50273ab..287c2c57b 100644
--- a/src/components/GeomarketMap/index.tsx
+++ b/src/components/GeomarketMap/index.tsx
@@ -28,7 +28,7 @@ export interface GeomarketMapProps {
   geoJSONPath: string;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   onHoverInfo?: FeatureHoverProps;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,
diff --git a/src/components/HeatMap/index.stories.tsx b/src/components/HeatMap/index.stories.tsx
index db0b82c0c..2485aadb6 100644
--- a/src/components/HeatMap/index.stories.tsx
+++ b/src/components/HeatMap/index.stories.tsx
@@ -28,9 +28,10 @@ export default {
   title: 'Molecules / Maps / HeatMap',
 } as Meta<HeatMapProps>;
 
-export const Default: StoryObj<HeatMapProps> = {
+export const Default: StoryObj<HeatMapProps> = {};
+
+export const CustomColor: StoryObj<HeatMapProps> = {
   args: {
-    data: finalData,
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
+    color: '#FF0000',
   },
 };
diff --git a/src/components/HeatMap/index.tsx b/src/components/HeatMap/index.tsx
index 62f477757..74a0c1e23 100644
--- a/src/components/HeatMap/index.tsx
+++ b/src/components/HeatMap/index.tsx
@@ -7,7 +7,8 @@
  * @prettier
  */
 
-import { useTheme } from '@mui/material/styles';
+import { grey } from '@mui/material/colors';
+import { useThemeProps } from '@mui/material/styles';
 import Color from 'color';
 import React from 'react';
 import {
@@ -19,16 +20,18 @@ import {
 
 import Map, { FeatureHoverProps, MapProps } from '~/components/Map';
 import MapPopup, { MapPopupProps } from '~/components/MapPopup';
+import DLS_COMPONENT_NAMES from '~/constants/DLS_COMPONENT_NAMES';
 
 import type GeoJSON from 'geojson';
 
 const MIN_ZOOM = 12;
 
 export interface HeatMapProps {
+  color?: string;
   data?: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   onHoverInfo?: FeatureHoverProps;
   setOnHoverInfo?: (newHoverInfo: FeatureHoverProps | undefined) => void;
   sourceId?: string;
@@ -40,17 +43,23 @@ export interface HeatMapProps {
  * to add the link bellow in the head of your page: <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
  * For more information: https://visgl.github.io/react-map-gl/docs/get-started/get-started#styling
  */
-export const HeatMap: React.FC<HeatMapProps> = ({
-  data,
-  mapboxAccessToken,
-  mapPopupProps,
-  mapProps,
-  onHoverInfo,
-  setOnHoverInfo,
-  sourceId = 'heatmap',
-  tooltipElement,
-}): React.ReactElement<HeatMapProps> => {
-  const { palette } = useTheme();
+export const HeatMap: React.FC<HeatMapProps> = (
+  inProps,
+): React.ReactElement<HeatMapProps> => {
+  const {
+    color = grey[700],
+    data,
+    mapboxAccessToken,
+    mapPopupProps,
+    mapProps,
+    onHoverInfo,
+    setOnHoverInfo,
+    sourceId = 'heatmap',
+    tooltipElement,
+  } = useThemeProps({
+    name: DLS_COMPONENT_NAMES.HEAT_MAP,
+    props: inProps,
+  });
 
   const [hoverInfo, setHoverInfo] = React.useState<FeatureHoverProps>();
   const [lastZoom, setLastZoom] = React.useState<number>();
@@ -104,19 +113,82 @@ export const HeatMap: React.FC<HeatMapProps> = ({
       minzoom: MIN_ZOOM,
       paint: {
         'circle-color': {
-          default: Color(palette.secondary.main).fade(1).rgb().string(),
+          default: Color(mapProps?.color || color)
+            .fade(1)
+            .rgb()
+            .string(),
           property: 'quantity',
           stops: [
-            [0, Color(palette.secondary.main).fade(0.9).rgb().string()],
-            [1, Color(palette.secondary.main).fade(0.8).rgb().string()],
-            [2, Color(palette.secondary.main).fade(0.7).rgb().string()],
-            [3, Color(palette.secondary.main).fade(0.6).rgb().string()],
-            [4, Color(palette.secondary.main).fade(0.5).rgb().string()],
-            [5, Color(palette.secondary.main).fade(0.4).rgb().string()],
-            [6, Color(palette.secondary.main).fade(0.3).rgb().string()],
-            [7, Color(palette.secondary.main).fade(0.2).rgb().string()],
-            [8, Color(palette.secondary.main).fade(0.1).rgb().string()],
-            [9, Color(palette.secondary.main).fade(0).rgb().string()],
+            [
+              0,
+              Color(mapProps?.color || color)
+                .fade(0.9)
+                .rgb()
+                .string(),
+            ],
+            [
+              1,
+              Color(mapProps?.color || color)
+                .fade(0.8)
+                .rgb()
+                .string(),
+            ],
+            [
+              2,
+              Color(mapProps?.color || color)
+                .fade(0.7)
+                .rgb()
+                .string(),
+            ],
+            [
+              3,
+              Color(mapProps?.color || color)
+                .fade(0.6)
+                .rgb()
+                .string(),
+            ],
+            [
+              4,
+              Color(mapProps?.color || color)
+                .fade(0.5)
+                .rgb()
+                .string(),
+            ],
+            [
+              5,
+              Color(mapProps?.color || color)
+                .fade(0.4)
+                .rgb()
+                .string(),
+            ],
+            [
+              6,
+              Color(mapProps?.color || color)
+                .fade(0.3)
+                .rgb()
+                .string(),
+            ],
+            [
+              7,
+              Color(mapProps?.color || color)
+                .fade(0.2)
+                .rgb()
+                .string(),
+            ],
+            [
+              8,
+              Color(mapProps?.color || color)
+                .fade(0.1)
+                .rgb()
+                .string(),
+            ],
+            [
+              9,
+              Color(mapProps?.color || color)
+                .fade(0)
+                .rgb()
+                .string(),
+            ],
           ],
         },
         'circle-opacity': {
@@ -140,7 +212,7 @@ export const HeatMap: React.FC<HeatMapProps> = ({
       },
       type: 'circle',
     };
-  }, [palette.secondary.main]);
+  }, [color, mapProps]);
 
   const onZoom = (event: ViewStateChangeEvent): void => {
     setLastZoom(event.viewState.zoom);
@@ -191,6 +263,7 @@ export const HeatMap: React.FC<HeatMapProps> = ({
 };
 
 HeatMap.defaultProps = {
+  color: undefined,
   data: undefined,
   mapPopupProps: undefined,
   mapProps: undefined,
diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
index 6940ea65a..fe7b32bf2 100644
--- a/src/components/Map/index.tsx
+++ b/src/components/Map/index.tsx
@@ -9,7 +9,8 @@
 
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { useTheme } from '@mui/material/styles';
+import { grey } from '@mui/material/colors';
+import { useTheme, useThemeProps } from '@mui/material/styles';
 import bbox from '@turf/bbox';
 import Color from 'color';
 import { isString } from 'lodash';
@@ -36,6 +37,8 @@ import {
   ViewStateChangeEvent,
 } from 'react-map-gl/dist/es5';
 
+import DLS_COMPONENT_NAMES from '~/constants/DLS_COMPONENT_NAMES';
+
 import { StyledAttibutionControlContainer } from './styles';
 
 import type GeoJSON from 'geojson';
@@ -67,6 +70,7 @@ export interface FeatureHoverProps {
 export type MapProps = MapGLProps & {
   attributionControlProps?: AttributionControlProps;
   children?: React.ReactElement;
+  color?: string;
   data?:
     | GeoJSON.Feature<GeoJSON.Geometry>
     | GeoJSON.FeatureCollection<GeoJSON.Geometry>
@@ -94,24 +98,29 @@ export type MapProps = MapGLProps & {
  *
  * @note If sending the `data` prop it's also necessary to send the `sourceId` prop.
  */
-export const Map: React.FC<MapProps> = ({
-  attributionControlProps,
-  children,
-  data,
-  height = 450,
-  initialBoundsPosition,
-  layers,
-  layerProps,
-  mapboxAccessToken,
-  navigationControlProps,
-  onMapClick,
-  setHoverInfo,
-  preserveDrawingBuffer = false,
-  sourceId = 'areas',
-  sourceProps,
-  width = '100%',
-  ...mapProps
-}): React.ReactElement<MapProps> => {
+export const Map: React.FC<MapProps> = (
+  inProps: MapProps,
+): React.ReactElement<MapProps> => {
+  const {
+    attributionControlProps,
+    children,
+    color = grey[700],
+    data,
+    height = 450,
+    initialBoundsPosition,
+    layers,
+    layerProps,
+    mapboxAccessToken,
+    navigationControlProps,
+    onMapClick,
+    setHoverInfo,
+    preserveDrawingBuffer = false,
+    sourceId = 'areas',
+    sourceProps,
+    width = '100%',
+    ...mapProps
+  } = useThemeProps({ name: DLS_COMPONENT_NAMES.MAP, props: inProps });
+
   const { palette, spacing } = useTheme();
 
   const mapRef = React.useRef<MapRef | null>(null);
@@ -128,19 +137,19 @@ export const Map: React.FC<MapProps> = ({
       id: 'data',
       paint: {
         'fill-color': {
-          default: Color(palette.secondary.main).fade(1).rgb().string(),
+          default: Color(color).fade(1).rgb().string(),
           property: 'quantity',
           stops: [
-            [0, Color(palette.secondary.main).fade(0.9).rgb().string()],
-            [1, Color(palette.secondary.main).fade(0.8).rgb().string()],
-            [2, Color(palette.secondary.main).fade(0.7).rgb().string()],
-            [3, Color(palette.secondary.main).fade(0.6).rgb().string()],
-            [4, Color(palette.secondary.main).fade(0.5).rgb().string()],
-            [5, Color(palette.secondary.main).fade(0.4).rgb().string()],
-            [6, Color(palette.secondary.main).fade(0.3).rgb().string()],
-            [7, Color(palette.secondary.main).fade(0.2).rgb().string()],
-            [8, Color(palette.secondary.main).fade(0.1).rgb().string()],
-            [9, Color(palette.secondary.main).fade(0).rgb().string()],
+            [0, Color(color).fade(0.9).rgb().string()],
+            [1, Color(color).fade(0.8).rgb().string()],
+            [2, Color(color).fade(0.7).rgb().string()],
+            [3, Color(color).fade(0.6).rgb().string()],
+            [4, Color(color).fade(0.5).rgb().string()],
+            [5, Color(color).fade(0.4).rgb().string()],
+            [6, Color(color).fade(0.3).rgb().string()],
+            [7, Color(color).fade(0.2).rgb().string()],
+            [8, Color(color).fade(0.1).rgb().string()],
+            [9, Color(color).fade(0).rgb().string()],
           ],
         },
         'fill-opacity': 0.7,
@@ -154,7 +163,7 @@ export const Map: React.FC<MapProps> = ({
       source: sourceId,
       type: 'fill',
     };
-  }, [palette.secondary.main, palette.common.black, palette.grey, sourceId]);
+  }, [color, palette.common.black, palette.grey, sourceId]);
 
   const onHover = React.useCallback(
     (event: MapLayerMouseEvent) => {
@@ -316,6 +325,7 @@ export const Map: React.FC<MapProps> = ({
 Map.defaultProps = {
   attributionControlProps: undefined,
   children: undefined,
+  color: undefined,
   data: undefined,
   fog: undefined,
   initialBoundsPosition: undefined,
diff --git a/src/components/SCFMap/index.stories.tsx b/src/components/SCFMap/index.stories.tsx
index c63b3aa43..0841eff4e 100644
--- a/src/components/SCFMap/index.stories.tsx
+++ b/src/components/SCFMap/index.stories.tsx
@@ -28,12 +28,13 @@ export default {
   title: 'Molecules / Maps / SCFMap',
 } as Meta<SCFMapProps>;
 
-export const Default: StoryObj<SCFMapProps> = {
+export const Default: StoryObj<SCFMapProps> = {};
+
+export const CustomColor: StoryObj<SCFMapProps> = {
   args: {
-    data: defaultData,
-    geoJSONPath: '/maps/scf.json',
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
-    processDataFn: defaultProcessDataFn,
+    mapProps: {
+      color: '#FF0000',
+    },
   },
 };
 
diff --git a/src/components/SCFMap/index.tsx b/src/components/SCFMap/index.tsx
index b252bdc13..3c2da5e56 100644
--- a/src/components/SCFMap/index.tsx
+++ b/src/components/SCFMap/index.tsx
@@ -30,7 +30,7 @@ export interface SCFMapProps {
   geoJSONPath: string;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,
     data: Array<IMapDataProps>,
diff --git a/src/components/StateMap/index.stories.tsx b/src/components/StateMap/index.stories.tsx
index 844ccfc35..207de4173 100644
--- a/src/components/StateMap/index.stories.tsx
+++ b/src/components/StateMap/index.stories.tsx
@@ -28,12 +28,13 @@ export default {
   title: 'Molecules / Maps / StateMap',
 } as Meta<StateMapProps>;
 
-export const Default: StoryObj<StateMapProps> = {
+export const Default: StoryObj<StateMapProps> = {};
+
+export const CustomColor: StoryObj<StateMapProps> = {
   args: {
-    data: defaultData,
-    geoJSONPath: '/maps/states.json',
-    mapboxAccessToken: process.env.STORYBOOK_MAPBOX_ACCESS_TOKEN,
-    processDataFn: defaultProcessDataFn,
+    mapProps: {
+      color: '#FF0000',
+    },
   },
 };
 
diff --git a/src/components/StateMap/index.tsx b/src/components/StateMap/index.tsx
index 4e1940701..e973f16fe 100644
--- a/src/components/StateMap/index.tsx
+++ b/src/components/StateMap/index.tsx
@@ -28,7 +28,7 @@ export interface StateMapProps {
   geoJSONPath: string;
   mapboxAccessToken: string;
   mapPopupProps?: Omit<MapPopupProps, 'popupProps'>;
-  mapProps?: Omit<MapProps, 'mapboxAccessToken'>;
+  mapProps?: Omit<Partial<MapProps>, 'mapboxAccessToken'>;
   processDataFn?: (
     featureCollection: GeoJSON.FeatureCollection<GeoJSON.Geometry>,
     data: Array<IMapDataProps>,
diff --git a/src/constants/DLS_COMPONENT_NAMES.ts b/src/constants/DLS_COMPONENT_NAMES.ts
index fcb1f6cf5..abe4dab79 100644
--- a/src/constants/DLS_COMPONENT_NAMES.ts
+++ b/src/constants/DLS_COMPONENT_NAMES.ts
@@ -12,7 +12,9 @@
 export const DLS_COMPONENT_NAMES = {
   AREA_CHART: 'DlsAreaChart',
   BAR_CHART: 'DlsBarChart',
+  HEAT_MAP: 'DlsHeatMap',
   LINE_CHART: 'DlsLineChart',
+  MAP: 'DlsMap',
   OVERLAPPED_BAR_CHART: 'DlsOverlappedBarChart',
   PIE_CHART: 'DlsPieChart',
   SCATTER_PLOT: 'DlsScatterPlot',
diff --git a/src/styles/themeEncoura/components.ts b/src/styles/themeEncoura/components.ts
index 18fe33315..b4c80b397 100644
--- a/src/styles/themeEncoura/components.ts
+++ b/src/styles/themeEncoura/components.ts
@@ -14,7 +14,7 @@ import Color from 'color';
 import DLS_COMPONENT_NAMES from '~/constants/DLS_COMPONENT_NAMES';
 import THEME_ENCOURA_CLASSIC from '~/styles/themeEncouraClassic';
 
-import COLORS from './colors';
+import COLORS, { secondaryMain } from './colors';
 
 const COMPONENTS: Components = {
   [DLS_COMPONENT_NAMES.AREA_CHART]: {
@@ -41,6 +41,11 @@ const COMPONENTS: Components = {
       ],
     },
   },
+  [DLS_COMPONENT_NAMES.HEAT_MAP]: {
+    defaultProps: {
+      color: secondaryMain,
+    },
+  },
   [DLS_COMPONENT_NAMES.LINE_CHART]: {
     defaultProps: {
       colors: [
@@ -53,6 +58,11 @@ const COMPONENTS: Components = {
       ],
     },
   },
+  [DLS_COMPONENT_NAMES.MAP]: {
+    defaultProps: {
+      color: secondaryMain,
+    },
+  },
   [DLS_COMPONENT_NAMES.OVERLAPPED_BAR_CHART]: {
     defaultProps: {
       colors: [
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 33251885d..1a3a9386f 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -15,7 +15,9 @@ import {
 
 import { AreaChartProps } from '~/components/AreaChart';
 import { BarChartProps } from '~/components/BarChart';
+import { HeatMapProps } from '~/components/HeatMap';
 import { LineChartProps } from '~/components/LineChart';
+import { MapProps } from '~/components/Map';
 import { OverlappedBarChartProps } from '~/components/OverlappedBarChart';
 import { PieChartProps } from '~/components/PieChart';
 import { ScatterPlotProps } from '~/components/ScatterPlot';
@@ -30,7 +32,9 @@ declare module '@mui/material/styles' {
   interface ComponentsPropsList {
     [DLS_COMPONENT_NAMES.AREA_CHART]: Partial<AreaChartProps>;
     [DLS_COMPONENT_NAMES.BAR_CHART]: Partial<BarChartProps>;
+    [DLS_COMPONENT_NAMES.HEAT_MAP]: Partial<HeatMapProps>;
     [DLS_COMPONENT_NAMES.LINE_CHART]: Partial<LineChartProps>;
+    [DLS_COMPONENT_NAMES.MAP]: Partial<MapProps>;
     [DLS_COMPONENT_NAMES.OVERLAPPED_BAR_CHART]: Partial<OverlappedBarChartProps>;
     [DLS_COMPONENT_NAMES.PIE_CHART]: Partial<PieChartProps>;
     [DLS_COMPONENT_NAMES.SCATTER_PLOT]: Partial<ScatterPlotProps>;
@@ -48,11 +52,21 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>[typeof DLS_COMPONENT_NAMES.BAR_CHART];
       variants?: ComponentsVariants[typeof DLS_COMPONENT_NAMES.BAR_CHART];
     };
+    [DLS_COMPONENT_NAMES.HEAT_MAP]?: {
+      defaultProps?: ComponentsPropsList[typeof DLS_COMPONENT_NAMES.HEAT_MAP];
+      styleOverrides?: ComponentsOverrides<Theme>[typeof DLS_COMPONENT_NAMES.HEAT_MAP];
+      variants?: ComponentsVariants[typeof DLS_COMPONENT_NAMES.HEAT_MAP];
+    };
     [DLS_COMPONENT_NAMES.LINE_CHART]?: {
       defaultProps?: ComponentsPropsList[typeof DLS_COMPONENT_NAMES.LINE_CHART];
       styleOverrides?: ComponentsOverrides<Theme>[typeof DLS_COMPONENT_NAMES.LINE_CHART];
       variants?: ComponentsVariants[typeof DLS_COMPONENT_NAMES.LINE_CHART];
     };
+    [DLS_COMPONENT_NAMES.MAP]?: {
+      defaultProps?: ComponentsPropsList[typeof DLS_COMPONENT_NAMES.MAP];
+      styleOverrides?: ComponentsOverrides<Theme>[typeof DLS_COMPONENT_NAMES.MAP];
+      variants?: ComponentsVariants[typeof DLS_COMPONENT_NAMES.MAP];
+    };
     [DLS_COMPONENT_NAMES.OVERLAPPED_BAR_CHART]?: {
       defaultProps?: ComponentsPropsList[typeof DLS_COMPONENT_NAMES.OVERLAPPED_BAR_CHART];
       styleOverrides?: ComponentsOverrides<Theme>[typeof DLS_COMPONENT_NAMES.OVERLAPPED_BAR_CHART];