diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index 89da62ec..6721a24a 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -137,6 +137,7 @@ function toggleOptions() {
           @click.stop="toggleOptions"
           v-bind="tooltipProps"
           class="menu-btn"
+          :data-testid="is_active ? 'activeCircularMenuItemButton' : 'circularMenuItemButton'"
           elevation="2"
           :style="computedItemStyles"
         >
diff --git a/app/components/Viewer/Options/ColorMapList.vue b/app/components/Viewer/Options/ColorMapList.vue
index e66df0ee..9d60f9fa 100644
--- a/app/components/Viewer/Options/ColorMapList.vue
+++ b/app/components/Viewer/Options/ColorMapList.vue
@@ -15,6 +15,7 @@ const filterText = ref("");
 const canvasRefs = ref({});
 const loading = ref(true);
 const renderJobId = ref(0);
+const openedGroups = ref([]);
 
 function setCanvasRef(presetName, element, id) {
   if (element) {
@@ -44,6 +45,18 @@ const filteredPresets = computed(() => {
   return result;
 });
 
+watch(
+  [filterText, filteredPresets],
+  () => {
+    if (filterText.value) {
+      openedGroups.value = filteredPresets.value
+        .filter((item) => item.Children)
+        .map((item) => item.Name);
+    }
+  },
+  { immediate: true },
+);
+
 function processChunk(entries, index, jobId) {
   if (jobId !== renderJobId.value || index >= entries.length) {
     if (jobId === renderJobId.value) {
@@ -103,6 +116,7 @@ watch(filteredPresets, drawAllCanvases);
     />
 
     <v-list
+      v-model:opened="openedGroups"
       data-testid="colorMapList"
       density="compact"
       max-height="350"
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index da8afbbf..a8e00147 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -32,8 +32,8 @@ export function useModelBlocksColor() {
   }
 
   async function setModelBlocksActiveColoring(modelId, blocks_ids, activeColoring) {
-    await modelCommonStyle.mutateComponentStyles(modelId, blocks_ids, {
-      coloring: { active: activeColoring },
+    await modelBlocksCommonStyle.mutateModelBlocksColoring(modelId, blocks_ids, {
+      active: activeColoring,
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelBlockColor(modelId, blocks_ids[0]);
diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index 1a655516..20171108 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -21,6 +21,9 @@ export function useModelBlocksCommonStyle() {
   }
 
   function mutateModelBlocksColoring(id, blocks_ids, values) {
+    modelCommonStyle.mutateModelComponentTypeStyle(id, "Block", {
+      coloring: values,
+    });
     return modelCommonStyle.mutateComponentStyles(id, blocks_ids, {
       coloring: values,
     });
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index df5805e5..5528a3f4 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -27,8 +27,8 @@ export function useModelCornersColor() {
   }
 
   async function setModelCornersActiveColoring(modelId, corners_ids, activeColoring) {
-    await modelCommonStyle.mutateComponentStyles(modelId, corners_ids, {
-      coloring: { active: activeColoring },
+    await modelCornersCommonStyle.mutateModelCornersColoring(modelId, corners_ids, {
+      active: activeColoring,
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelCornerColor(modelId, corners_ids[0]);
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index e03edbda..a9775c88 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -21,6 +21,9 @@ export function useModelCornersCommonStyle() {
   }
 
   function mutateModelCornersColoring(id, corners_ids, values) {
+    modelCommonStyle.mutateModelComponentTypeStyle(id, "Corner", {
+      coloring: values,
+    });
     return modelCommonStyle.mutateComponentStyles(id, corners_ids, {
       coloring: values,
     });
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 47451ada..272afa14 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -29,8 +29,8 @@ export function useModelLinesColor() {
   }
 
   async function setModelLinesActiveColoring(modelId, lines_ids, activeColoring) {
-    await modelCommonStyle.mutateComponentStyles(modelId, lines_ids, {
-      coloring: { active: activeColoring },
+    await modelLinesCommonStyle.mutateModelLinesColoring(modelId, lines_ids, {
+      active: activeColoring,
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelLineColor(modelId, lines_ids[0]);
diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js
index c7b3362c..c7398a29 100644
--- a/internal/stores/data_style/model/lines/common.js
+++ b/internal/stores/data_style/model/lines/common.js
@@ -21,6 +21,9 @@ export function useModelLinesCommonStyle() {
   }
 
   function mutateModelLinesColoring(id, lines_ids, values) {
+    modelCommonStyle.mutateModelComponentTypeStyle(id, "Line", {
+      coloring: values,
+    });
     return modelCommonStyle.mutateComponentStyles(id, lines_ids, {
       coloring: values,
     });
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 85a55d0f..8faad4f0 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -29,8 +29,8 @@ export function useModelSurfacesColor() {
   }
 
   async function setModelSurfacesActiveColoring(modelId, surfaces_ids, activeColoring) {
-    await modelCommonStyle.mutateComponentStyles(modelId, surfaces_ids, {
-      coloring: { active: activeColoring },
+    await modelSurfacesCommonStyle.mutateModelSurfacesColoring(modelId, surfaces_ids, {
+      active: activeColoring,
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelSurfaceColor(modelId, surfaces_ids[0]);
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index baa41317..67787533 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -21,6 +21,9 @@ export function useModelSurfacesCommonStyle() {
   }
 
   function mutateModelSurfacesColoring(id, surfaces_ids, values) {
+    modelCommonStyle.mutateModelComponentTypeStyle(id, "Surface", {
+      coloring: values,
+    });
     return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, {
       coloring: values,
     });