diff --git a/apps/web/components/map/panels/style/LayerStyle.tsx b/apps/web/components/map/panels/style/LayerStyle.tsx
index a87d29ed..413d3485 100644
--- a/apps/web/components/map/panels/style/LayerStyle.tsx
+++ b/apps/web/components/map/panels/style/LayerStyle.tsx
@@ -67,14 +67,10 @@ const LayerStylePanel = ({ projectId }: { projectId: string }) => {
   );
 
   const createColorMapFromClassBreaks = useCallback(
-    (colors: string[], breakValues: LayerClassBreaks) => {
-      const breaks = [breakValues.min.toString()];
-      breakValues.breaks.forEach((b) => {
-        breaks.push(b.toString());
-      });
+    (colors: string[], breakValues: string[]) => {
       const colorMap = [] as ColorMap;
       colors.forEach((color, index) => {
-        const breakValue = breaks[index] || "0";
+        const breakValue = breakValues[index] || "0";
         colorMap.push([[breakValue], color]);
       });
       return colorMap;
@@ -93,10 +89,28 @@ const LayerStylePanel = ({ projectId }: { projectId: string }) => {
       const existingBreaks =
         activeLayer.properties[`${updateType}_scale_breaks`];
       if (classBreakType === classBreaks.Enum.custom_breaks && existingBreaks) {
+        const breakValues = [] as string[];
+        if (classBreakType === activeLayer.properties[`${updateType}_scale`]) {
+          const colorMap =
+            newStyle[`${updateType}_range`]?.color_map;
+          if (colorMap) {
+            colorMap.forEach((colorMapItem) => {
+              if (colorMapItem?.[0]?.[0] !== undefined)
+                breakValues.push(colorMapItem[0][0]);
+            });
+          }
+        } else {
+          if (existingBreaks) {
+            breakValues.push(existingBreaks.min.toString());
+            existingBreaks.breaks.forEach((value) => {
+              breakValues.push(value.toString());
+            });
+          }
+        }
         newStyle[`${updateType}_range`]["color_map"] =
           createColorMapFromClassBreaks(
-            activeLayer.properties[`${updateType}_range`]?.colors || [],
-            existingBreaks,
+            newStyle[`${updateType}_range`]?.colors || [],
+            breakValues,
           );
         return;
       }
diff --git a/apps/web/lib/transformers/layer.ts b/apps/web/lib/transformers/layer.ts
index b639ebd4..c4ce5ffe 100644
--- a/apps/web/lib/transformers/layer.ts
+++ b/apps/web/lib/transformers/layer.ts
@@ -83,7 +83,7 @@ export function getMapboxStyleColor(
       (!fieldName ||
         !colors ||
         data.properties[`${type}_scale_breaks`]?.breaks.length !==
-          colors.length - 1)) ||
+        colors.length - 1)) ||
     (colorScale === "custom_breaks" && (!colorMaps || !fieldName))
   ) {
     return data.properties[type]
@@ -126,8 +126,11 @@ export function getMapboxStyleColor(
     const config = ["step", ["get", fieldName], ...colorSteps];
     return config;
   }
+  const breakValues = data.properties[`${type}_scale_breaks`];
 
-  let _breakValues = data.properties[`${type}_scale_breaks`]?.breaks;
+  let _breakValues = breakValues?.breaks ? [...breakValues?.breaks] : [];
+  if (_breakValues && breakValues?.max !== undefined)
+    _breakValues.push(breakValues?.max);
   let _colors = [...colors];
   if (_breakValues) {
     const combined = _breakValues.map((value, index) => [[value], colors[index]]);