diff --git a/react/package-lock.json b/react/package-lock.json
index 17179819ad..818a16b8e5 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -7,7 +7,7 @@
             "name": "@webviz/subsurface-components",
             "license": "MPL",
             "dependencies": {
-                "@emerson-eps/color-tables": "^0.4.40",
+                "@emerson-eps/color-tables": "^0.4.44",
                 "@equinor/eds-core-react": "^0.12.1",
                 "@equinor/eds-icons": "^0.9.1",
                 "@equinor/videx-wellog": "^0.7.0",
@@ -2874,9 +2874,9 @@
             }
         },
         "node_modules/@emerson-eps/color-tables": {
-            "version": "0.4.40",
-            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.40.tgz",
-            "integrity": "sha512-WCpvrG79YTKpDIGrRDEyaugreFHsVyG6gHHunlTtv4Y6ur59aVdnEfS7kIAwAbY6xEUw6ChLE94/RpxdCbI6KQ==",
+            "version": "0.4.44",
+            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.44.tgz",
+            "integrity": "sha512-i93GQ85zX5vvYYssLcLHY/3teySpDsd6JK+L4oBmblMbNzkb9uAe+IbvzJHhtFMgfARysDQsbM78A/y9i6McUA==",
             "dependencies": {
                 "@emotion/react": "^11.10.5",
                 "@emotion/styled": "^11.10.0",
@@ -45990,9 +45990,9 @@
             "dev": true
         },
         "@emerson-eps/color-tables": {
-            "version": "0.4.40",
-            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.40.tgz",
-            "integrity": "sha512-WCpvrG79YTKpDIGrRDEyaugreFHsVyG6gHHunlTtv4Y6ur59aVdnEfS7kIAwAbY6xEUw6ChLE94/RpxdCbI6KQ==",
+            "version": "0.4.44",
+            "resolved": "https://registry.npmjs.org/@emerson-eps/color-tables/-/color-tables-0.4.44.tgz",
+            "integrity": "sha512-i93GQ85zX5vvYYssLcLHY/3teySpDsd6JK+L4oBmblMbNzkb9uAe+IbvzJHhtFMgfARysDQsbM78A/y9i6McUA==",
             "requires": {
                 "@emotion/react": "^11.10.5",
                 "@emotion/styled": "^11.10.0",
diff --git a/react/package.json b/react/package.json
index ede8732f95..af26a7f544 100644
--- a/react/package.json
+++ b/react/package.json
@@ -52,7 +52,7 @@
     "author": "Equinor <opensource@equinor.com>",
     "license": "MPL",
     "dependencies": {
-        "@emerson-eps/color-tables": "^0.4.40",
+        "@emerson-eps/color-tables": "^0.4.44",
         "@equinor/eds-core-react": "^0.12.1",
         "@equinor/eds-icons": "^0.9.1",
         "@equinor/videx-wellog": "^0.7.0",
diff --git a/react/src/lib/components/DeckGLMap/DeckGLMap.stories.tsx b/react/src/lib/components/DeckGLMap/DeckGLMap.stories.tsx
index 72155277f6..8d2a1c05ca 100644
--- a/react/src/lib/components/DeckGLMap/DeckGLMap.stories.tsx
+++ b/react/src/lib/components/DeckGLMap/DeckGLMap.stories.tsx
@@ -479,12 +479,6 @@ const MultiColorSelectorTemplate = (args: any) => {
     const max = 1000;
 
     const layers = [
-        {
-            ...args.wellLayers[0],
-            colorMappingFunction: createColorMapFunction(getColorName),
-            logColor: getColorName ? getColorName : wellLayers[0].logColor,
-            isLog: isLog,
-        },
         {
             ...meshMapLayerFloat32,
             colorMapName: colorName,
@@ -492,20 +486,55 @@ const MultiColorSelectorTemplate = (args: any) => {
                 colorRange && isAuto == false ? colorRange : [min, max],
             colorMapFunction: colorMapFunc(),
         },
+        {
+            ...args.wellLayers[0],
+            colorMappingFunction: createColorMapFunction(getColorName),
+            logColor: getColorName ? getColorName : wellLayers[0].logColor,
+            isLog: isLog,
+            depthTest: false,
+        },
     ];
     return (
-        <>
-            <div className={useStyles().colorSelector}>
-                <div style={{ marginTop: 50, height: 70 }}>
-                    <ColorLegend
+        // <>
+        //     <div className={useStyles().colorSelector}>
+        //         <div style={{ marginTop: 50, height: 70 }}>
+        //             <ColorLegend
+        //                 {...args}
+        //                 getScale={wellLayerData}
+        //                 getInterpolateMethod={getInterpolateMethod}
+        //                 dataObjectName={"WellLogColorSelector"}
+        //             />
+        //         </div>
+        //         <div style={{ marginTop: 50, height: 70 }}>
+        //             <ColorLegend
+        //                 min={min}
+        //                 max={max}
+        //                 colorNameFromSelector={colorNameFromSelector}
+        //                 getColorRange={userDefinedRange}
+        //                 getInterpolateMethod={getMapLayerInterpolateMethod}
+        //                 getBreakpointValue={userDefinedBreakPoint}
+        //                 horizontal={true}
+        //                 numberOfTicks={2}
+        //                 dataObjectName={"MapLayerColorSelector"}
+        //             />
+        //         </div>
+        //     </div>
+
+        //     <div className={useStyles().main}>
+        //         <DeckGLMap {...args} layers={layers} />
+        //     </div>
+        // </>
+        <DeckGLMap {...args} layers={layers}>
+        {
+            <View id="view_1">
+               <ColorLegend
                         {...args}
                         getScale={wellLayerData}
                         getInterpolateMethod={getInterpolateMethod}
                         dataObjectName={"WellLogColorSelector"}
+                        cssLegendStyle={{ top: 50, left: 0, position: "absolute"}}
                     />
-                </div>
-                <div style={{ marginTop: 50, height: 70 }}>
-                    <ColorLegend
+                <ColorLegend
                         min={min}
                         max={max}
                         colorNameFromSelector={colorNameFromSelector}
@@ -516,13 +545,9 @@ const MultiColorSelectorTemplate = (args: any) => {
                         numberOfTicks={2}
                         dataObjectName={"MapLayerColorSelector"}
                     />
-                </div>
-            </div>
-
-            <div className={useStyles().main}>
-                <DeckGLMap {...args} layers={layers} />
-            </div>
-        </>
+            </View>
+}
+    </DeckGLMap>
     );
 };