diff --git a/frontend/src/modules/TopographicMap/SurfaceAddress.ts b/frontend/src/modules/SubsurfaceMap/SurfaceAddress.ts
similarity index 100%
rename from frontend/src/modules/TopographicMap/SurfaceAddress.ts
rename to frontend/src/modules/SubsurfaceMap/SurfaceAddress.ts
diff --git a/frontend/src/modules/TopographicMap/SurfacePolygonsAddress.ts b/frontend/src/modules/SubsurfaceMap/SurfacePolygonsAddress.ts
similarity index 100%
rename from frontend/src/modules/TopographicMap/SurfacePolygonsAddress.ts
rename to frontend/src/modules/SubsurfaceMap/SurfacePolygonsAddress.ts
diff --git a/frontend/src/modules/SubsurfaceMap/_utils/color.ts b/frontend/src/modules/SubsurfaceMap/_utils/color.ts
new file mode 100644
index 000000000..abd229455
--- /dev/null
+++ b/frontend/src/modules/SubsurfaceMap/_utils/color.ts
@@ -0,0 +1,24 @@
+import { colorTablesObj } from "@emerson-eps/color-tables";
+import { ColorScale } from "@lib/utils/ColorScale";
+
+import { formatRgb } from "culori";
+
+function rgbStringToArray(rgbString: string): number[] | null {
+    const match = rgbString.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
+    if (match) {
+        return [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10)];
+    }
+    return null;
+}
+export function createContinuousColorScaleForMap(colorScale: ColorScale): colorTablesObj[] {
+    const hexColors = colorScale.getPlotlyColorScale();
+    const rgbArr: [number, number, number, number][] = [];
+    hexColors.forEach((color) => {
+        const rgbString: string = formatRgb(color[1]) as string;
+        const rgb = rgbStringToArray(rgbString);
+        if (rgb) {
+            rgbArr.push([color[0], rgb[0], rgb[1], rgb[2]]);
+        }
+    });
+    return [{ name: "Continuous", discrete: false, colors: rgbArr }];
+}
diff --git a/frontend/src/modules/TopographicMap/_utils/index.ts b/frontend/src/modules/SubsurfaceMap/_utils/index.ts
similarity index 83%
rename from frontend/src/modules/TopographicMap/_utils/index.ts
rename to frontend/src/modules/SubsurfaceMap/_utils/index.ts
index d7edd6cf3..defa64dda 100644
--- a/frontend/src/modules/TopographicMap/_utils/index.ts
+++ b/frontend/src/modules/SubsurfaceMap/_utils/index.ts
@@ -7,3 +7,4 @@ export {
     createWellBoreHeaderLayer,
 } from "./subsurfaceMap";
 export type { SurfaceMeta, SurfaceMeshLayerSettings, ViewSettings } from "./subsurfaceMap";
+export { createContinuousColorScaleForMap } from "./color";
diff --git a/frontend/src/modules/TopographicMap/_utils/subsurfaceMap.ts b/frontend/src/modules/SubsurfaceMap/_utils/subsurfaceMap.ts
similarity index 99%
rename from frontend/src/modules/TopographicMap/_utils/subsurfaceMap.ts
rename to frontend/src/modules/SubsurfaceMap/_utils/subsurfaceMap.ts
index 1d7b415ec..47aebafe8 100644
--- a/frontend/src/modules/TopographicMap/_utils/subsurfaceMap.ts
+++ b/frontend/src/modules/SubsurfaceMap/_utils/subsurfaceMap.ts
@@ -32,6 +32,7 @@ const defaultSurfaceSettings: SurfaceMeshLayerSettings = {
     smoothShading: false,
     material: false,
 };
+
 export function createNorthArrowLayer(visible?: boolean): Record<string, unknown> {
     return {
         "@@type": "NorthArrow3DLayer",
@@ -74,7 +75,7 @@ export function createSurfaceMeshLayer(
         gridLines: surfaceSettings.gridLines,
         material: surfaceSettings.material,
         smoothShading: surfaceSettings.smoothShading,
-        colorMapName: "Physics",
+        colorMapName: "Continuous",
     };
 }
 export function createSurfacePolygonsLayer(surfacePolygons: PolygonData_api[]): Record<string, unknown> {
diff --git a/frontend/src/modules/TopographicMap/components/AggregationSelector/aggregationSelector.tsx b/frontend/src/modules/SubsurfaceMap/components/AggregationSelector/aggregationSelector.tsx
similarity index 100%
rename from frontend/src/modules/TopographicMap/components/AggregationSelector/aggregationSelector.tsx
rename to frontend/src/modules/SubsurfaceMap/components/AggregationSelector/aggregationSelector.tsx
diff --git a/frontend/src/modules/TopographicMap/components/AggregationSelector/index.ts b/frontend/src/modules/SubsurfaceMap/components/AggregationSelector/index.ts
similarity index 100%
rename from frontend/src/modules/TopographicMap/components/AggregationSelector/index.ts
rename to frontend/src/modules/SubsurfaceMap/components/AggregationSelector/index.ts
diff --git a/frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/index.ts b/frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/index.ts
similarity index 100%
rename from frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/index.ts
rename to frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/index.ts
diff --git a/frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx b/frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx
similarity index 100%
rename from frontend/src/modules/TopographicMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx
rename to frontend/src/modules/SubsurfaceMap/components/SyncedSubsurfaceViewer/syncedSubsurfaceViewer.tsx
diff --git a/frontend/src/modules/TopographicMap/loadModule.tsx b/frontend/src/modules/SubsurfaceMap/loadModule.tsx
similarity index 88%
rename from frontend/src/modules/TopographicMap/loadModule.tsx
rename to frontend/src/modules/SubsurfaceMap/loadModule.tsx
index 78a595488..2fefa8512 100644
--- a/frontend/src/modules/TopographicMap/loadModule.tsx
+++ b/frontend/src/modules/SubsurfaceMap/loadModule.tsx
@@ -13,7 +13,7 @@ const defaultState: state = {
     viewSettings: null,
 };
 
-const module = ModuleRegistry.initModule<state>("TopographicMap", defaultState, {
+const module = ModuleRegistry.initModule<state>("SubsurfaceMap", defaultState, {
     meshSurfaceAddress: { deepCompare: true },
     propertySurfaceAddress: { deepCompare: true },
     polygonsAddress: { deepCompare: true },
diff --git a/frontend/src/modules/TopographicMap/polygonsDirectoryProvider.ts b/frontend/src/modules/SubsurfaceMap/polygonsDirectoryProvider.ts
similarity index 100%
rename from frontend/src/modules/TopographicMap/polygonsDirectoryProvider.ts
rename to frontend/src/modules/SubsurfaceMap/polygonsDirectoryProvider.ts
diff --git a/frontend/src/modules/TopographicMap/queryHooks.tsx b/frontend/src/modules/SubsurfaceMap/queryHooks.tsx
similarity index 100%
rename from frontend/src/modules/TopographicMap/queryHooks.tsx
rename to frontend/src/modules/SubsurfaceMap/queryHooks.tsx
diff --git a/frontend/src/modules/TopographicMap/registerModule.ts b/frontend/src/modules/SubsurfaceMap/registerModule.ts
similarity index 83%
rename from frontend/src/modules/TopographicMap/registerModule.ts
rename to frontend/src/modules/SubsurfaceMap/registerModule.ts
index 6332b34a9..2440a9f44 100644
--- a/frontend/src/modules/TopographicMap/registerModule.ts
+++ b/frontend/src/modules/SubsurfaceMap/registerModule.ts
@@ -4,8 +4,8 @@ import { SyncSettingKey } from "@framework/SyncSettings";
 import { state } from "./state";
 
 ModuleRegistry.registerModule<state>({
-    moduleName: "TopographicMap",
-    defaultTitle: "Topographic Map",
+    moduleName: "SubsurfaceMap",
+    defaultTitle: "Subsurface Map",
     syncableSettingKeys: [
         SyncSettingKey.ENSEMBLE,
         SyncSettingKey.SURFACE,
diff --git a/frontend/src/modules/TopographicMap/settings.tsx b/frontend/src/modules/SubsurfaceMap/settings.tsx
similarity index 100%
rename from frontend/src/modules/TopographicMap/settings.tsx
rename to frontend/src/modules/SubsurfaceMap/settings.tsx
diff --git a/frontend/src/modules/TopographicMap/state.ts b/frontend/src/modules/SubsurfaceMap/state.ts
similarity index 99%
rename from frontend/src/modules/TopographicMap/state.ts
rename to frontend/src/modules/SubsurfaceMap/state.ts
index 4ce339bc9..27ec06b79 100644
--- a/frontend/src/modules/TopographicMap/state.ts
+++ b/frontend/src/modules/SubsurfaceMap/state.ts
@@ -1,6 +1,6 @@
 import { SurfAddr } from "./SurfaceAddress";
 import { SurfacePolygonsAddress } from "./SurfacePolygonsAddress";
-import { SurfaceMeshLayerSettings, ViewSettings } from "./_utils/";
+import { SurfaceMeshLayerSettings, ViewSettings } from "./_utils";
 
 export interface state {
     meshSurfaceAddress: SurfAddr | null;
diff --git a/frontend/src/modules/TopographicMap/surfaceDirectoryProvider.ts b/frontend/src/modules/SubsurfaceMap/surfaceDirectoryProvider.ts
similarity index 100%
rename from frontend/src/modules/TopographicMap/surfaceDirectoryProvider.ts
rename to frontend/src/modules/SubsurfaceMap/surfaceDirectoryProvider.ts
diff --git a/frontend/src/modules/TopographicMap/view.tsx b/frontend/src/modules/SubsurfaceMap/view.tsx
similarity index 94%
rename from frontend/src/modules/TopographicMap/view.tsx
rename to frontend/src/modules/SubsurfaceMap/view.tsx
index 9cf185394..4ee30c022 100644
--- a/frontend/src/modules/TopographicMap/view.tsx
+++ b/frontend/src/modules/SubsurfaceMap/view.tsx
@@ -7,17 +7,13 @@ import { SyncSettingKey, SyncSettingsHelper } from "@framework/SyncSettings";
 import { Wellbore } from "@framework/Wellbore";
 import { Button } from "@lib/components/Button";
 import { CircularProgress } from "@lib/components/CircularProgress";
+import { ColorScaleGradientType } from "@lib/utils/ColorScale";
 import { ViewAnnotation } from "@webviz/subsurface-viewer/dist/components/ViewAnnotation";
 
-import {
-    useGetFieldWellsTrajectories,
-    usePolygonsDataQueryByAddress,
-    usePropertySurfaceDataByQueryAddress,
-    useSurfaceDataQueryByAddress,
-} from "././queryHooks";
 import {
     SurfaceMeta,
     createAxesLayer,
+    createContinuousColorScaleForMap,
     createNorthArrowLayer,
     createSurfaceMeshLayer,
     createSurfacePolygonsLayer,
@@ -25,6 +21,12 @@ import {
     createWellboreTrajectoryLayer,
 } from "./_utils";
 import { SyncedSubsurfaceViewer } from "./components/SyncedSubsurfaceViewer";
+import {
+    useGetFieldWellsTrajectories,
+    usePolygonsDataQueryByAddress,
+    usePropertySurfaceDataByQueryAddress,
+    useSurfaceDataQueryByAddress,
+} from "./queryHooks";
 import { state } from "./state";
 
 const jsonParseWithUndefined = (arrString: string): number[] => {
@@ -60,7 +62,7 @@ const updateViewPortBounds = (
     return existingViewPortBounds;
 };
 //-----------------------------------------------------------------------------------------------------------
-export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>) {
+export function view({ moduleContext, workbenchSettings, workbenchServices }: ModuleFCProps<state>) {
     const myInstanceIdStr = moduleContext.getInstanceIdString();
     console.debug(`${myInstanceIdStr} -- render TopographicMap view`);
     const viewIds = {
@@ -81,7 +83,10 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>)
     const [viewportBounds, setviewPortBounds] = React.useState<[number, number, number, number] | undefined>(undefined);
     const syncedSettingKeys = moduleContext.useSyncedSettingKeys();
     const syncHelper = new SyncSettingsHelper(syncedSettingKeys, workbenchServices);
-
+    const surfaceColorScale = workbenchSettings.useContinuousColorScale({
+        gradientType: ColorScaleGradientType.Sequential,
+    });
+    const colorTables = createContinuousColorScaleForMap(surfaceColorScale);
     const show3D: boolean = viewSettings?.show3d ?? true;
 
     const meshSurfDataQuery = useSurfaceDataQueryByAddress(meshSurfAddr, true);
@@ -228,6 +233,7 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>)
                         id={viewIds.view3D}
                         bounds={viewportBounds}
                         layers={newLayers}
+                        colorTables={colorTables}
                         toolbar={{ visible: true }}
                         views={{
                             layout: [1, 1],
@@ -245,6 +251,8 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>)
                     >
                         <ViewAnnotation id={viewIds.annotation3D}>
                             <ContinuousLegend
+                                colorTables={colorTables}
+                                colorName="Continuous"
                                 min={colorRange ? colorRange[0] : undefined}
                                 max={colorRange ? colorRange[1] : undefined}
                                 cssLegendStyles={{ bottom: "0", right: "0" }}
@@ -258,6 +266,7 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>)
                         id={viewIds.view2D}
                         bounds={viewportBounds}
                         layers={newLayers}
+                        colorTables={colorTables}
                         toolbar={{ visible: true }}
                         views={{
                             layout: [1, 1],
@@ -275,6 +284,8 @@ export function view({ moduleContext, workbenchServices }: ModuleFCProps<state>)
                     >
                         <ViewAnnotation id={viewIds.annotation2D}>
                             <ContinuousLegend
+                                colorTables={colorTables}
+                                colorName="Continuous"
                                 min={colorRange ? colorRange[0] : undefined}
                                 max={colorRange ? colorRange[1] : undefined}
                                 cssLegendStyles={{ bottom: "0", right: "0" }}
diff --git a/frontend/src/modules/registerAllModules.ts b/frontend/src/modules/registerAllModules.ts
index 407540a7f..6ffbeee60 100644
--- a/frontend/src/modules/registerAllModules.ts
+++ b/frontend/src/modules/registerAllModules.ts
@@ -12,8 +12,8 @@ import "./Sensitivity/registerModule";
 import "./SimulationTimeSeries/registerModule";
 import "./SimulationTimeSeriesMatrix/registerModule";
 import "./SimulationTimeSeriesSensitivity/registerModule";
+import "./SubsurfaceMap/registerModule";
 import "./TimeSeriesParameterDistribution/registerModule";
-import "./TopographicMap/registerModule";
 import "./WellCompletion/registerModule";
 
 if (isDevMode()) {