diff --git a/app/components/ObjectSelector.vue b/app/components/ObjectSelector.vue
index d6b0449c..d06b8af8 100644
--- a/app/components/ObjectSelector.vue
+++ b/app/components/ObjectSelector.vue
@@ -7,7 +7,6 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 const schema = schemas.opengeodeweb_back.allowed_objects;
 
 const emit = defineEmits(["update_values", "increment_step"]);
-console.log("ObjectSelector");
 
 const { filenames } = defineProps({
   filenames: { type: Array, required: true },
@@ -78,7 +77,6 @@ async function get_allowed_objects() {
 }
 
 function set_geode_object(geode_object_type) {
-  console.log("set_geode_object", { geode_object_type });
   if (geode_object_type) {
     emit("update_values", { geode_object_type });
     emit("increment_step");
diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index 04620f78..63d9fedc 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -13,7 +13,12 @@ function goBackToFileTree() {
 
 const model_id = computed(() => treeviewStore.model_id);
 
-const metaDatas = dataStore.refItem(model_id.value);
+const metaDatas = computed(() => {
+  if (!model_id.value) {
+    return {};
+  }
+  return dataStore.refItem(model_id.value).value || {};
+});
 </script>
 
 <template>
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 7e4fa0ec..869e8db4 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -1,24 +1,18 @@
 <script setup>
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-import { compareSelections } from "@ogw_front/utils/treeview";
-
 const dataStyleStore = useDataStyleStore();
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const { id } = defineProps({ id: { type: String, required: true } });
-
 const emit = defineEmits(["show-menu"]);
 
-const items = ref([]);
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(id);
-
-watchEffect(async () => {
-  items.value = await dataStore.formatedMeshComponents(id);
-});
+const items = dataStore.refFormatedMeshComponents(id);
+const mesh_components_selection = computed(() => dataStyleStore.visibleMeshComponents(id));
 
 watch(
   mesh_components_selection,
@@ -28,6 +22,11 @@ watch(
     }
 
     const { added, removed } = compareSelections(current, previous);
+    console.log("TreeComponent selection change:", {
+      id: props.id,
+      added,
+      removed,
+    });
 
     if (added.length > 0) {
       await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);
diff --git a/app/stores/app.js b/app/stores/app.js
index e0cc86ed..8171d3ac 100644
--- a/app/stores/app.js
+++ b/app/stores/app.js
@@ -1,3 +1,4 @@
+// Local imports
 import { api_fetch } from "@ogw_internal/utils/api_fetch.js";
 import { upload_file } from "@ogw_internal/utils/upload_file.js";
 
diff --git a/app/stores/data.js b/app/stores/data.js
index 62bd60ae..15ff23f6 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -12,8 +12,12 @@ const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore();
 
-  function item(id) {
-    return database.data.get(id);
+  async function item(id) {
+    const data_item = await database.data.get(id);
+    if (!data_item) {
+      throw new Error(`Item not found: ${id}`);
+    }
+    return data_item;
   }
 
   function refItem(id) {
@@ -62,6 +66,13 @@ export const useDataStore = defineStore("data", () => {
       }));
   }
 
+  function refFormatedMeshComponents(id) {
+    return useObservable(
+      liveQuery(() => formatedMeshComponents(id)),
+      { initialValue: [] },
+    );
+  }
+
   async function meshComponentType(modelId, geode_id) {
     const component = await database.model_components.where({ id: modelId, geode_id }).first();
     return component?.type;
@@ -176,7 +187,7 @@ export const useDataStore = defineStore("data", () => {
       .where("[id+geode_id]")
       .anyOf(meshComponentGeodeIds.map((geode_id) => [modelId, geode_id]))
       .toArray();
-    return components.map((component) => component.viewer_id);
+    return components.map((component) => Number.parseInt(component.viewer_id, 10));
   }
 
   async function exportStores() {
@@ -198,6 +209,7 @@ export const useDataStore = defineStore("data", () => {
     refItem,
     meshComponentType,
     formatedMeshComponents,
+    refFormatedMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
@@ -210,6 +222,7 @@ export const useDataStore = defineStore("data", () => {
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
     getMeshComponentsViewerIds,
+
     exportStores,
     importStores,
     clear,
diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index a1a8ac95..1b3fb7c7 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -1,3 +1,4 @@
+import { database } from "@ogw_internal/database/database.js";
 import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
@@ -10,16 +11,13 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   const modelStyleStore = useModelStyle();
   const dataStore = useDataStore();
 
-  function addDataStyle(id, geode_object) {
-    dataStyleState.styles[id] = getDefaultStyle(geode_object);
+  async function addDataStyle(id, geode_object) {
+    await database.data_style.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
   }
 
   async function setVisibility(id, visibility) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
       return meshStyleStore.setMeshVisibility(id, visibility);
@@ -32,10 +30,8 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function applyDefaultStyle(id) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
+
     if (viewer_type === "mesh") {
       return meshStyleStore.applyMeshStyle(id);
     }
@@ -46,29 +42,36 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   function exportStores() {
-    return { styles: dataStyleState.styles };
+    return {
+      styles: dataStyleState.styles,
+      componentStyles: dataStyleState.componentStyles,
+    };
   }
 
-  function importStores(snapshot) {
-    const stylesSnapshot = snapshot.styles || {};
-    for (const id of Object.keys(dataStyleState.styles)) {
-      delete dataStyleState.styles[id];
-    }
-    for (const [id, style] of Object.entries(stylesSnapshot)) {
-      dataStyleState.styles[id] = style;
-    }
+  async function importStores(snapshot) {
+    const stylesSnapshot = snapshot.styles;
+    const componentStylesSnapshot = snapshot.componentStyles;
+
+    await dataStyleState.clear();
+
+    const style_promises = Object.entries(stylesSnapshot).map(([id, style]) =>
+      database.data_style.put(structuredClone({ id, ...style })),
+    );
+    const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
+      database.model_component_datastyle.put(structuredClone(style)),
+    );
+
+    await Promise.all([...style_promises, ...component_style_promises]);
   }
 
   function applyAllStylesFromState() {
-    const ids = Object.keys(dataStyleState.styles || {});
+    const ids = Object.keys(dataStyleState.styles);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
-      const viewerType = meta?.viewer_type;
-      const style = dataStyleState.styles[id];
-      if (style && viewerType === "mesh") {
+      const viewerType = meta.viewer_type;
+      if (viewerType === "mesh") {
         return meshStyleStore.applyMeshStyle(id);
-      }
-      if (style && viewerType === "model") {
+      } else if (viewerType === "model") {
         return modelStyleStore.applyModelStyle(id);
       }
     });
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 645f9765..a9147ba0 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -70,7 +70,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     const value = await dataStore.item(id);
-    console.log("hybridViewerStore.addItem", { value });
     const reader = vtkXMLPolyDataReader();
     const textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
diff --git a/app/utils/file_import_workflow.js b/app/utils/file_import_workflow.js
index 9c296727..42c4f6f8 100644
--- a/app/utils/file_import_workflow.js
+++ b/app/utils/file_import_workflow.js
@@ -30,6 +30,7 @@ async function importWorkflow(files) {
 function buildImportItemFromPayloadApi(value, geode_object_type) {
   console.log("buildImportItemFromPayloadApi", { value, geode_object_type });
   return {
+    geode_object_type,
     ...value,
   };
 }
diff --git a/app/utils/local/cleanup.js b/app/utils/local/cleanup.js
index 66f808e5..821a25ad 100644
--- a/app/utils/local/cleanup.js
+++ b/app/utils/local/cleanup.js
@@ -133,6 +133,10 @@ function projectMicroservices(projectFolderPath) {
 }
 
 async function cleanupBackend(projectFolderPath) {
+  if (!fs.existsSync(projectFolderPath)) {
+    console.log(`Folder ${projectFolderPath} does not exist. Skipping cleanup.`);
+    return;
+  }
   const microservices = projectMicroservices(projectFolderPath);
   await killMicroservices(microservices);
   await deleteFolderRecursive(projectFolderPath);
@@ -142,4 +146,4 @@ function microservicesMetadatasPath(projectFolderPath) {
   return path.join(projectFolderPath, "microservices.json");
 }
 
-export { cleanupBackend, microservicesMetadatasPath };
+export { cleanupBackend, microservicesMetadatasPath, projectMicroservices };
diff --git a/app/utils/local/microservices.js b/app/utils/local/microservices.js
index 74871bfd..72c5a658 100644
--- a/app/utils/local/microservices.js
+++ b/app/utils/local/microservices.js
@@ -11,7 +11,7 @@ import pTimeout from "p-timeout";
 // Local imports
 import { commandExistsSync, waitForReady } from "./scripts.js";
 import { executableName, executablePath } from "./path.js";
-import { microservicesMetadatasPath } from "./cleanup.js";
+import { microservicesMetadatasPath, projectMicroservices } from "./cleanup.js";
 
 const DEFAULT_TIMEOUT_SECONDS = 30;
 const MILLISECONDS_PER_SECOND = 1000;
@@ -112,18 +112,6 @@ async function runViewer(execName, execPath, args = {}) {
   return port;
 }
 
-function projectMicroservices(projectFolderPath) {
-  console.log("projectMicroservices", { projectFolderPath });
-  const filePath = microservicesMetadatasPath(projectFolderPath);
-
-  if (!fs.existsSync(filePath)) {
-    const microservicesMetadatas = { microservices: [] };
-    fs.writeFileSync(filePath, JSON.stringify(microservicesMetadatas, undefined, 2), "utf8");
-  }
-  const content = JSON.parse(fs.readFileSync(filePath, "utf8"));
-  return content.microservices;
-}
-
 function addMicroserviceMetadatas(projectFolderPath, serviceObj) {
   const microservices = projectMicroservices(projectFolderPath);
   if (serviceObj.type === "back") {
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
new file mode 100644
index 00000000..c541657c
--- /dev/null
+++ b/internal/database/base_database.js
@@ -0,0 +1,22 @@
+import { Dexie } from "dexie";
+import { dataStyleTable } from "./tables/data_style";
+import { dataTable } from "./tables/data";
+import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
+import { modelComponentsRelationTable } from "./tables/model_components_relation";
+import { modelComponentsTable } from "./tables/model_components";
+
+export class BaseDatabase extends Dexie {
+  static get initialStores() {
+    return {
+      [dataTable.name]: dataTable.schema,
+      [modelComponentsTable.name]: modelComponentsTable.schema,
+      [dataStyleTable.name]: dataStyleTable.schema,
+      [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
+      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+    };
+  }
+
+  clear() {
+    return Promise.all(this.tables.map((table) => table.clear()));
+  }
+}
diff --git a/internal/database/database.js b/internal/database/database.js
index 1ad24634..a045ddda 100644
--- a/internal/database/database.js
+++ b/internal/database/database.js
@@ -1,18 +1,11 @@
-import { Dexie } from "dexie";
+import { BaseDatabase } from "./base_database";
 import { ExtendedDatabase } from "./extended_database";
-import { dataTable } from "./tables/data";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
-import { modelComponentsTable } from "./tables/model_components";
 
-class Database extends Dexie {
+class Database extends BaseDatabase {
   constructor() {
     super("Database");
 
-    this.version(1).stores({
-      [dataTable.name]: dataTable.schema,
-      [modelComponentsTable.name]: modelComponentsTable.schema,
-      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-    });
+    this.version(1).stores(BaseDatabase.initialStores);
   }
 
   static async addTable(tableName, schemaDefinition) {
@@ -24,11 +17,7 @@ class Database extends Dexie {
     await tempDb.open();
 
     const currentVersion = tempDb.verno;
-    const currentStores = {
-      [dataTable.name]: dataTable.schema,
-      [modelComponentsTable.name]: modelComponentsTable.schema,
-      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-    };
+    const currentStores = { ...BaseDatabase.initialStores };
 
     for (const table of tempDb.tables) {
       const keyPath = table.schema.primKey.src;
@@ -47,11 +36,7 @@ class Database extends Dexie {
       const existingDb = new Dexie("Database");
       for (let version = 1; version <= currentVersion; version += 1) {
         if (version === 1) {
-          existingDb.version(1).stores({
-            [dataTable.name]: dataTable.schema,
-            [modelComponentsTable.name]: modelComponentsTable.schema,
-            [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-          });
+          existingDb.version(1).stores(BaseDatabase.initialStores);
         } else {
           existingDb.version(version).stores(currentStores);
         }
diff --git a/internal/database/extended_database.js b/internal/database/extended_database.js
index 081df255..a5a81345 100644
--- a/internal/database/extended_database.js
+++ b/internal/database/extended_database.js
@@ -1,19 +1,12 @@
-import { Dexie } from "dexie";
-import { dataTable } from "./tables/data";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
-import { modelComponentsTable } from "./tables/model_components";
+import { BaseDatabase } from "./base_database";
 
-export class ExtendedDatabase extends Dexie {
+export class ExtendedDatabase extends BaseDatabase {
   constructor(currentVersion, currentStores, newTables) {
     super("Database");
 
     for (let version = 1; version <= currentVersion; version += 1) {
       if (version === 1) {
-        this.version(1).stores({
-          [dataTable.name]: dataTable.schema,
-          [modelComponentsTable.name]: modelComponentsTable.schema,
-          [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-        });
+        this.version(1).stores(BaseDatabase.initialStores);
       } else {
         this.version(version).stores(currentStores);
       }
diff --git a/internal/database/tables/data_style.js b/internal/database/tables/data_style.js
new file mode 100644
index 00000000..21e0cc0d
--- /dev/null
+++ b/internal/database/tables/data_style.js
@@ -0,0 +1,4 @@
+export const dataStyleTable = {
+  name: "data_style",
+  schema: "id",
+};
diff --git a/internal/database/tables/model_component_datastyle.js b/internal/database/tables/model_component_datastyle.js
new file mode 100644
index 00000000..fb739de6
--- /dev/null
+++ b/internal/database/tables/model_component_datastyle.js
@@ -0,0 +1,4 @@
+export const modelComponentDataStyleTable = {
+  name: "model_component_datastyle",
+  schema: "[id_model+id_component], id_model",
+};
diff --git a/internal/stores/data_style/mesh/cells/cell.js b/internal/stores/data_style/mesh/cells/cell.js
index bb29f8aa..a8f91ff7 100644
--- a/internal/stores/data_style/mesh/cells/cell.js
+++ b/internal/stores/data_style/mesh/cells/cell.js
@@ -29,28 +29,24 @@ export function useMeshCellsCellAttributeStyle() {
     });
   }
 
-  function setMeshCellsCellAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshCellsCellAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
+  function setMeshCellsCellAttributeStoredConfig(id, name, config) {
+    return meshCellsCommonStyle.mutateMeshCellsCellStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
   }
 
   function meshCellsCellAttributeName(id) {
-    console.log(meshCellsCellAttributeName.name, { id }, meshCellsCellAttribute(id));
     return meshCellsCellAttribute(id).name;
   }
+
   function setMeshCellsCellAttributeName(id, name) {
-    console.log(setMeshCellsCellAttributeName.name, { id, name });
     return viewerStore.request(
       meshCellsCellAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshCellsCellAttribute(id).name = name;
-          const { minimum, maximum } = meshCellsCellAttributeStoredConfig(id, name);
-          await setMeshCellsCellAttributeRange(id, minimum, maximum);
-          console.log(setMeshCellsCellAttributeName.name, { id }, meshCellsCellAttributeName(id));
-        },
+        response_function: () => meshCellsCommonStyle.mutateMeshCellsCellStyle(id, { name }),
       },
     );
   }
@@ -61,12 +57,10 @@ export function useMeshCellsCellAttributeStyle() {
     const { minimum, maximum } = storedConfig;
     return [minimum, maximum];
   }
+
   function setMeshCellsCellAttributeRange(id, minimum, maximum) {
     const name = meshCellsCellAttributeName(id);
-    const storedConfig = meshCellsCellAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshCellsCellAttributeColorMap(id, storedConfig.colorMap);
+    return setMeshCellsCellAttributeStoredConfig(id, name, { minimum, maximum });
   }
 
   function meshCellsCellAttributeColorMap(id) {
@@ -75,38 +69,17 @@ export function useMeshCellsCellAttributeStyle() {
     const { colorMap } = storedConfig;
     return colorMap;
   }
+
   function setMeshCellsCellAttributeColorMap(id, colorMap) {
     const name = meshCellsCellAttributeName(id);
     const storedConfig = meshCellsCellAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshCellsCellAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshCellsCellAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshCellsCellAttributeColorMap.name,
-            { id },
-            meshCellsCellAttributeColorMap(id),
-          );
-        },
+        response_function: () => setMeshCellsCellAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/cells/color.js b/internal/stores/data_style/mesh/cells/color.js
index ea554f5f..fb3d4bc4 100644
--- a/internal/stores/data_style/mesh/cells/color.js
+++ b/internal/stores/data_style/mesh/cells/color.js
@@ -20,10 +20,10 @@ export function useMeshCellsColorStyle() {
       meshCellsColorSchemas,
       { id, color },
       {
-        response_function: () => {
-          meshCellsCommonStyle.meshCellsColoring(id).color = color;
-          console.log(setMeshCellsColor.name, { id }, JSON.stringify(meshCellsColor(id)));
-        },
+        response_function: () =>
+          meshCellsCommonStyle.mutateMeshCellsColoring(id, {
+            color,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/cells/common.js b/internal/stores/data_style/mesh/cells/common.js
index 23e293e4..3a4ab732 100644
--- a/internal/stores/data_style/mesh/cells/common.js
+++ b/internal/stores/data_style/mesh/cells/common.js
@@ -3,6 +3,12 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useMeshCellsCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateMeshCellsStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      cells: values,
+    });
+  }
+
   function meshCellsStyle(id) {
     return dataStyleStateStore.getStyle(id).cells;
   }
@@ -11,13 +17,23 @@ export function useMeshCellsCommonStyle() {
     return meshCellsStyle(id).coloring;
   }
 
-  function meshCellsActiveColoring(id) {
-    return meshCellsColoring(id).active;
+  function mutateMeshCellsColoring(id, values) {
+    return mutateMeshCellsStyle(id, {
+      coloring: values,
+    });
+  }
+
+  function mutateMeshCellsCellStyle(id, values) {
+    return mutateMeshCellsColoring(id, {
+      cell: values,
+    });
   }
 
   return {
     meshCellsStyle,
     meshCellsColoring,
-    meshCellsActiveColoring,
+    mutateMeshCellsStyle,
+    mutateMeshCellsColoring,
+    mutateMeshCellsCellStyle,
   };
 }
diff --git a/internal/stores/data_style/mesh/cells/index.js b/internal/stores/data_style/mesh/cells/index.js
index d7562117..17f961b9 100644
--- a/internal/stores/data_style/mesh/cells/index.js
+++ b/internal/stores/data_style/mesh/cells/index.js
@@ -15,17 +15,22 @@ export function useMeshCellsStyle() {
   const meshCellsVisibility = useMeshCellsVisibilityStyle();
   const meshCellsColorStyle = useMeshCellsColorStyle();
   const meshCellsTexturesStore = useMeshCellsTexturesStyle();
+
+  function meshCellsColoring(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id);
+  }
   const meshCellsVertexAttributeStyle = useMeshCellsVertexAttributeStyle();
   const meshCellsCellAttributeStyle = useMeshCellsCellAttributeStyle();
 
+  function meshCellsActiveColoring(id) {
+    return meshCellsColoring(id).active;
+  }
+
   async function setMeshCellsActiveColoring(id, type) {
-    const coloring = meshCellsCommonStyle.meshCellsColoring(id);
-    coloring.active = type;
-    console.log(
-      setMeshCellsActiveColoring.name,
-      { id },
-      meshCellsCommonStyle.meshCellsActiveColoring(id),
-    );
+    await meshCellsCommonStyle.mutateMeshCellsStyle(id, {
+      coloring: { active: type },
+    });
+    console.log(setMeshCellsActiveColoring.name, { id }, type);
     if (type === "color") {
       return meshCellsColorStyle.setMeshCellsColor(id, meshCellsColorStyle.meshCellsColor(id));
     }
@@ -48,8 +53,7 @@ export function useMeshCellsStyle() {
       if (name === undefined) {
         return;
       }
-      await meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name);
-      return;
+      return meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name);
     }
     throw new Error(`Unknown mesh cells coloring type: ${type}`);
   }
@@ -57,12 +61,14 @@ export function useMeshCellsStyle() {
   function applyMeshCellsStyle(id) {
     return Promise.all([
       meshCellsVisibility.setMeshCellsVisibility(id, meshCellsVisibility.meshCellsVisibility(id)),
-      setMeshCellsActiveColoring(id, meshCellsCommonStyle.meshCellsActiveColoring(id)),
+      setMeshCellsActiveColoring(id, meshCellsActiveColoring(id)),
     ]);
   }
 
   return {
     ...meshCellsCommonStyle,
+    meshCellsColoring,
+    meshCellsActiveColoring,
     setMeshCellsActiveColoring,
     applyMeshCellsStyle,
     ...meshCellsVisibility,
diff --git a/internal/stores/data_style/mesh/cells/textures.js b/internal/stores/data_style/mesh/cells/textures.js
index 91000d27..2073b3c0 100644
--- a/internal/stores/data_style/mesh/cells/textures.js
+++ b/internal/stores/data_style/mesh/cells/textures.js
@@ -20,10 +20,10 @@ export function useMeshCellsTexturesStyle() {
       meshCellsTexturesSchemas,
       { id, textures },
       {
-        response_function: () => {
-          meshCellsCommonStyle.meshCellsColoring(id).textures = textures;
-          console.log(setMeshCellsTextures.name, { id }, meshCellsTextures(id));
-        },
+        response_function: () =>
+          meshCellsCommonStyle.mutateMeshCellsStyle(id, {
+            coloring: { textures },
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/cells/vertex.js b/internal/stores/data_style/mesh/cells/vertex.js
index a6ece2bd..4317d141 100644
--- a/internal/stores/data_style/mesh/cells/vertex.js
+++ b/internal/stores/data_style/mesh/cells/vertex.js
@@ -30,31 +30,44 @@ export function useMeshCellsVertexAttributeStyle() {
     });
   }
 
-  function setMeshCellsVertexAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshCellsVertexAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
+  function mutateMeshCellsVertexStyle(id, values) {
+    return meshCellsCommonStyle.mutateMeshCellsStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+  }
+
+  function setMeshCellsVertexAttributeStoredConfig(id, name, config) {
+    return mutateMeshCellsVertexStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
   }
 
   function meshCellsVertexAttributeName(id) {
-    console.log(meshCellsVertexAttributeName.name, { id }, meshCellsVertexAttribute(id));
     return meshCellsVertexAttribute(id).name;
   }
+
   function setMeshCellsVertexAttributeName(id, name) {
-    console.log(setMeshCellsVertexAttributeName.name, { id, name });
     return viewerStore.request(
       meshCellsVertexAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshCellsVertexAttribute(id).name = name;
-          const { minimum, maximum } = meshCellsVertexAttributeStoredConfig(id, name);
-          await setMeshCellsVertexAttributeRange(id, minimum, maximum);
-          console.log(
-            setMeshCellsVertexAttributeName.name,
-            { id },
-            meshCellsVertexAttributeName(id),
-          );
+        response_function: () => {
+          const updates = { name };
+          const vertex = meshCellsVertexAttribute(id);
+          if (!(name in vertex.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return mutateMeshCellsVertexStyle(id, updates);
         },
       },
     );
@@ -66,12 +79,13 @@ export function useMeshCellsVertexAttributeStyle() {
     const { minimum, maximum } = storedConfig;
     return [minimum, maximum];
   }
+
   function setMeshCellsVertexAttributeRange(id, minimum, maximum) {
     const name = meshCellsVertexAttributeName(id);
-    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshCellsVertexAttributeColorMap(id, storedConfig.colorMap);
+    return setMeshCellsVertexAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
   function meshCellsVertexAttributeColorMap(id) {
@@ -80,38 +94,17 @@ export function useMeshCellsVertexAttributeStyle() {
     const { colorMap } = storedConfig;
     return colorMap;
   }
+
   function setMeshCellsVertexAttributeColorMap(id, colorMap) {
     const name = meshCellsVertexAttributeName(id);
     const storedConfig = meshCellsVertexAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshCellsVertexAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshCellsVertexAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshCellsVertexAttributeColorMap.name,
-            { id },
-            meshCellsVertexAttributeColorMap(id),
-          );
-        },
+        response_function: () => setMeshCellsVertexAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/cells/visibility.js b/internal/stores/data_style/mesh/cells/visibility.js
index 8914226a..6e5d7f17 100644
--- a/internal/stores/data_style/mesh/cells/visibility.js
+++ b/internal/stores/data_style/mesh/cells/visibility.js
@@ -20,10 +20,7 @@ export function useMeshCellsVisibilityStyle() {
       meshCellsVisibilitySchema,
       { id, visibility },
       {
-        response_function: () => {
-          meshCellsCommonStyle.meshCellsStyle(id).visibility = visibility;
-          console.log(setMeshCellsVisibility.name, { id }, meshCellsVisibility(id));
-        },
+        response_function: () => meshCellsCommonStyle.mutateMeshCellsStyle(id, { visibility }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/edges/color.js b/internal/stores/data_style/mesh/edges/color.js
index 9b4679b8..4d90b529 100644
--- a/internal/stores/data_style/mesh/edges/color.js
+++ b/internal/stores/data_style/mesh/edges/color.js
@@ -20,10 +20,10 @@ export function useMeshEdgesColorStyle() {
       meshEdgesColorSchemas,
       { id, color },
       {
-        response_function: () => {
-          meshEdgesCommonStyle.meshEdgesColoring(id).color = color;
-          console.log(setMeshEdgesColor.name, { id }, JSON.stringify(meshEdgesColor(id)));
-        },
+        response_function: () =>
+          meshEdgesCommonStyle.mutateMeshEdgesColoring(id, {
+            color,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/edges/common.js b/internal/stores/data_style/mesh/edges/common.js
index 6b1686c4..e2405c67 100644
--- a/internal/stores/data_style/mesh/edges/common.js
+++ b/internal/stores/data_style/mesh/edges/common.js
@@ -3,6 +3,12 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useMeshEdgesCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateMeshEdgesStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      edges: values,
+    });
+  }
+
   function meshEdgesStyle(id) {
     return dataStyleStateStore.getStyle(id).edges;
   }
@@ -11,13 +17,16 @@ export function useMeshEdgesCommonStyle() {
     return meshEdgesStyle(id).coloring;
   }
 
-  function meshEdgesActiveColoring(id) {
-    return meshEdgesColoring(id).active;
+  function mutateMeshEdgesColoring(id, values) {
+    return mutateMeshEdgesStyle(id, {
+      coloring: values,
+    });
   }
 
   return {
     meshEdgesStyle,
     meshEdgesColoring,
-    meshEdgesActiveColoring,
+    mutateMeshEdgesStyle,
+    mutateMeshEdgesColoring,
   };
 }
diff --git a/internal/stores/data_style/mesh/edges/edge.js b/internal/stores/data_style/mesh/edges/edge.js
index 02cd8369..c7de471a 100644
--- a/internal/stores/data_style/mesh/edges/edge.js
+++ b/internal/stores/data_style/mesh/edges/edge.js
@@ -2,7 +2,6 @@
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // Local imports
-import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -13,8 +12,12 @@ export function useMeshEdgesEdgeAttributeStyle() {
   const viewerStore = useViewerStore();
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
 
+  function meshEdgesColoring(id) {
+    return meshEdgesCommonStyle.meshEdgesStyle(id).coloring;
+  }
+
   function meshEdgesEdgeAttribute(id) {
-    return meshEdgesCommonStyle.meshEdgesColoring(id).edge;
+    return meshEdgesColoring(id).edge;
   }
 
   function meshEdgesEdgeAttributeStoredConfig(id, name) {
@@ -29,27 +32,44 @@ export function useMeshEdgesEdgeAttributeStyle() {
     });
   }
 
-  function setMeshEdgesEdgeAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshEdgesEdgeAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
+  function mutateMeshEdgesEdgeStyle(id, values) {
+    return meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+      coloring: {
+        edge: values,
+      },
+    });
+  }
+
+  function setMeshEdgesEdgeAttributeStoredConfig(id, name, config) {
+    return mutateMeshEdgesEdgeStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
   }
 
   function meshEdgesEdgeAttributeName(id) {
-    console.log(meshEdgesEdgeAttributeName.name, { id }, meshEdgesEdgeAttribute(id));
     return meshEdgesEdgeAttribute(id).name;
   }
+
   function setMeshEdgesEdgeAttributeName(id, name) {
-    console.log(setMeshEdgesEdgeAttributeName.name, { id, name });
     return viewerStore.request(
       meshEdgesEdgeAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshEdgesEdgeAttribute(id).name = name;
-          const { minimum, maximum } = meshEdgesEdgeAttributeStoredConfig(id, name);
-          await setMeshEdgesEdgeAttributeRange(id, minimum, maximum);
-          console.log(setMeshEdgesEdgeAttributeName.name, { id }, meshEdgesEdgeAttributeName(id));
+        response_function: () => {
+          const updates = { name };
+          const edge = meshEdgesEdgeAttribute(id);
+          if (!(name in edge.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return mutateMeshEdgesEdgeStyle(id, updates);
         },
       },
     );
@@ -61,12 +81,13 @@ export function useMeshEdgesEdgeAttributeStyle() {
     const { minimum, maximum } = storedConfig;
     return [minimum, maximum];
   }
+
   function setMeshEdgesEdgeAttributeRange(id, minimum, maximum) {
     const name = meshEdgesEdgeAttributeName(id);
-    const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshEdgesEdgeAttributeColorMap(id, storedConfig.colorMap);
+    return setMeshEdgesEdgeAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
   function meshEdgesEdgeAttributeColorMap(id) {
@@ -75,38 +96,17 @@ export function useMeshEdgesEdgeAttributeStyle() {
     const { colorMap } = storedConfig;
     return colorMap;
   }
+
   function setMeshEdgesEdgeAttributeColorMap(id, colorMap) {
     const name = meshEdgesEdgeAttributeName(id);
     const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshEdgesEdgeAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshEdgesEdgeAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshEdgesEdgeAttributeColorMap.name,
-            { id },
-            meshEdgesEdgeAttributeColorMap(id),
-          );
-        },
+        response_function: () => setMeshEdgesEdgeAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/edges/index.js b/internal/stores/data_style/mesh/edges/index.js
index 680cafa5..be3cc81a 100644
--- a/internal/stores/data_style/mesh/edges/index.js
+++ b/internal/stores/data_style/mesh/edges/index.js
@@ -11,42 +11,39 @@ import { useMeshEdgesWidthStyle } from "./width";
 // Local constants
 
 export function useMeshEdgesStyle() {
-  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
   const meshEdgesVisibility = useMeshEdgesVisibilityStyle();
   const meshEdgesColorStyle = useMeshEdgesColorStyle();
+
+  function meshEdgesColoring(id) {
+    return meshEdgesCommonStyle.meshEdgesColoring(id);
+  }
   const meshEdgesWidthStyle = useMeshEdgesWidthStyle();
   const meshEdgesVertexAttributeStyle = useMeshEdgesVertexAttributeStyle();
   const meshEdgesEdgeAttributeStyle = useMeshEdgesEdgeAttributeStyle();
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
 
-  function setMeshEdgesActiveColoring(id, type) {
-    const coloring = meshEdgesCommonStyle.meshEdgesColoring(id);
-    coloring.active = type;
-    console.log(
-      setMeshEdgesActiveColoring.name,
-      { id },
-      meshEdgesCommonStyle.meshEdgesActiveColoring(id),
-    );
+  function meshEdgesActiveColoring(id) {
+    return meshEdgesColoring(id).active;
+  }
+
+  async function setMeshEdgesActiveColoring(id, type) {
+    await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+      coloring: { active: type },
+    });
     if (type === "color") {
       return meshEdgesColorStyle.setMeshEdgesColor(id, meshEdgesColorStyle.meshEdgesColor(id));
     }
-    if (type === "textures") {
-      const textures = meshEdgesTexturesStore.meshEdgesTextures(id);
-      if (textures === undefined) {
-        return Promise.resolve();
-      }
-      return meshEdgesTexturesStore.setMeshEdgesTextures(id, textures);
-    }
     if (type === "vertex") {
       const name = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeName(id);
       if (name === undefined) {
-        return Promise.resolve();
+        return;
       }
       return meshEdgesVertexAttributeStyle.setMeshEdgesVertexAttributeName(id, name);
     }
     if (type === "edge") {
       const name = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeName(id);
       if (name === undefined) {
-        return Promise.resolve();
+        return;
       }
       return meshEdgesEdgeAttributeStyle.setMeshEdgesEdgeAttributeName(id, name);
     }
@@ -57,11 +54,13 @@ export function useMeshEdgesStyle() {
     return Promise.all([
       meshEdgesVisibility.setMeshEdgesVisibility(id, meshEdgesVisibility.meshEdgesVisibility(id)),
       meshEdgesWidthStyle.setMeshEdgesWidth(id, meshEdgesWidthStyle.meshEdgesWidth(id)),
-      setMeshEdgesActiveColoring(id, meshEdgesCommonStyle.meshEdgesActiveColoring(id)),
+      setMeshEdgesActiveColoring(id, meshEdgesActiveColoring(id)),
     ]);
   }
 
   return {
+    meshEdgesColoring,
+    meshEdgesActiveColoring,
     setMeshEdgesActiveColoring,
     applyMeshEdgesStyle,
     ...meshEdgesCommonStyle,
diff --git a/internal/stores/data_style/mesh/edges/vertex.js b/internal/stores/data_style/mesh/edges/vertex.js
index 1ab8c344..d71f7aa1 100644
--- a/internal/stores/data_style/mesh/edges/vertex.js
+++ b/internal/stores/data_style/mesh/edges/vertex.js
@@ -2,7 +2,6 @@
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // Local imports
-import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -14,8 +13,12 @@ export function useMeshEdgesVertexAttributeStyle() {
   const viewerStore = useViewerStore();
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
 
+  function meshEdgesColoring(id) {
+    return meshEdgesCommonStyle.meshEdgesStyle(id).coloring;
+  }
+
   function meshEdgesVertexAttribute(id) {
-    return meshEdgesCommonStyle.meshEdgesColoring(id).vertex;
+    return meshEdgesColoring(id).vertex;
   }
 
   function meshEdgesVertexAttributeStoredConfig(id, name) {
@@ -30,31 +33,43 @@ export function useMeshEdgesVertexAttributeStyle() {
     });
   }
 
-  function setMeshEdgesVertexAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshEdgesVertexAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
+  function mutateMeshEdgesVertexStyle(id, values) {
+    return meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+  }
+
+  function setMeshEdgesVertexAttributeStoredConfig(id, name, config) {
+    return mutateMeshEdgesVertexStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    }).then(() => config);
   }
 
   function meshEdgesVertexAttributeName(id) {
-    console.log(meshEdgesVertexAttributeName.name, { id }, meshEdgesVertexAttribute(id));
     return meshEdgesVertexAttribute(id).name;
   }
   function setMeshEdgesVertexAttributeName(id, name) {
-    console.log(setMeshEdgesVertexAttributeName.name, { id, name });
     return viewerStore.request(
       meshEdgesVertexAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshEdgesVertexAttribute(id).name = name;
-          const { minimum, maximum } = meshEdgesVertexAttributeStoredConfig(id, name);
-          await setMeshEdgesVertexAttributeRange(id, minimum, maximum);
-          console.log(
-            setMeshEdgesVertexAttributeName.name,
-            { id },
-            meshEdgesVertexAttributeName(id),
-          );
+        response_function: () => {
+          const updates = { name };
+          const vertex = meshEdgesVertexAttribute(id);
+          if (!(name in vertex.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return mutateMeshEdgesVertexStyle(id, updates);
         },
       },
     );
@@ -68,10 +83,10 @@ export function useMeshEdgesVertexAttributeStyle() {
   }
   function setMeshEdgesVertexAttributeRange(id, minimum, maximum) {
     const name = meshEdgesVertexAttributeName(id);
-    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshEdgesVertexAttributeColorMap(id, storedConfig.colorMap);
+    return setMeshEdgesVertexAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
   function meshEdgesVertexAttributeColorMap(id) {
@@ -83,35 +98,13 @@ export function useMeshEdgesVertexAttributeStyle() {
   function setMeshEdgesVertexAttributeColorMap(id, colorMap) {
     const name = meshEdgesVertexAttributeName(id);
     const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshEdgesVertexAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshEdgesVertexAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshEdgesVertexAttributeColorMap.name,
-            { id },
-            meshEdgesVertexAttributeColorMap(id),
-          );
-        },
+        response_function: () => setMeshEdgesVertexAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/edges/visibility.js b/internal/stores/data_style/mesh/edges/visibility.js
index d7654ef3..8d0dd527 100644
--- a/internal/stores/data_style/mesh/edges/visibility.js
+++ b/internal/stores/data_style/mesh/edges/visibility.js
@@ -1,7 +1,6 @@
 // Third party imports
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local imports
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -20,10 +19,7 @@ export function useMeshEdgesVisibilityStyle() {
       meshEdgesVisibilitySchema,
       { id, visibility },
       {
-        response_function: () => {
-          meshEdgesCommonStyle.meshEdgesStyle(id).visibility = visibility;
-          console.log(setMeshEdgesVisibility.name, { id }, meshEdgesVisibility(id));
-        },
+        response_function: () => meshEdgesCommonStyle.mutateMeshEdgesStyle(id, { visibility }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/edges/width.js b/internal/stores/data_style/mesh/edges/width.js
index 0bf4c78e..7f2c6267 100644
--- a/internal/stores/data_style/mesh/edges/width.js
+++ b/internal/stores/data_style/mesh/edges/width.js
@@ -1,7 +1,6 @@
 // Third party imports
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local imports
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -20,10 +19,7 @@ export function useMeshEdgesWidthStyle() {
       meshEdgesWidthSchemas,
       { id, width },
       {
-        response_function: () => {
-          meshEdgesCommonStyle.meshEdgesStyle(id).width = width;
-          console.log(setMeshEdgesWidth.name, { id }, JSON.stringify(meshEdgesWidth(id)));
-        },
+        response_function: () => meshEdgesCommonStyle.mutateMeshEdgesStyle(id, { width }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/index.js b/internal/stores/data_style/mesh/index.js
index b46c65ce..358ee86a 100644
--- a/internal/stores/data_style/mesh/index.js
+++ b/internal/stores/data_style/mesh/index.js
@@ -33,21 +33,36 @@ export function useMeshStyle() {
       meshSchemas.visibility,
       { id, visibility },
       {
-        response_function: () => {
-          hybridViewerStore.setVisibility(id, visibility);
-          dataStyleState.getStyle(id).visibility = visibility;
-          console.log(setMeshVisibility.name, { id }, meshVisibility(id));
+        response_function: async () => {
+          await hybridViewerStore.setVisibility(id, visibility);
+          return dataStyleState.mutateStyle(id, { visibility });
         },
       },
     );
   }
 
+  function meshColor(id) {
+    return dataStyleState.getStyle(id).color;
+  }
+
+  function setMeshColor(id, color) {
+    return viewerStore.request(
+      meshSchemas.color,
+      { id, color },
+      {
+        response_function: () => dataStyleState.mutateStyle(id, { color }),
+      },
+    );
+  }
+
   function applyMeshStyle(id) {
     const style = dataStyleState.getStyle(id);
     const promise_array = [];
     for (const [key, value] of Object.entries(style)) {
       if (key === "visibility") {
         promise_array.push(setMeshVisibility(id, value));
+      } else if (key === "color") {
+        promise_array.push(setMeshColor(id, value));
       } else if (key === "points") {
         promise_array.push(meshPointsStyle.applyMeshPointsStyle(id));
       } else if (key === "edges") {
@@ -58,7 +73,17 @@ export function useMeshStyle() {
         promise_array.push(meshPolygonsStyle.applyMeshPolygonsStyle(id));
       } else if (key === "polyhedra") {
         promise_array.push(meshPolyhedraStyle.applyMeshPolyhedraStyle(id));
-      } else if (key !== "attributes") {
+      } else if (
+        key === "corners" ||
+        key === "lines" ||
+        key === "surfaces" ||
+        key === "blocks" ||
+        key === "attributes" ||
+        key === "id"
+      ) {
+        // These keys are either handled elsewhere or not applicable to mesh objects
+        continue;
+      } else {
         throw new Error(`Unknown mesh key: ${key}`);
       }
     }
@@ -68,6 +93,8 @@ export function useMeshStyle() {
   return {
     meshVisibility,
     setMeshVisibility,
+    meshColor,
+    setMeshColor,
     applyMeshStyle,
     ...meshPointsStyle,
     ...meshEdgesStyle,
diff --git a/internal/stores/data_style/mesh/points/color.js b/internal/stores/data_style/mesh/points/color.js
index 5dc1b94a..ea4ec997 100644
--- a/internal/stores/data_style/mesh/points/color.js
+++ b/internal/stores/data_style/mesh/points/color.js
@@ -20,10 +20,10 @@ export function useMeshPointsColorStyle() {
       meshPointsColorSchemas,
       { id, color },
       {
-        response_function: () => {
-          meshPointsCommonStyle.meshPointsColoring(id).color = color;
-          console.log(setMeshPointsColor.name, { id }, JSON.stringify(meshPointsColor(id)));
-        },
+        response_function: () =>
+          meshPointsCommonStyle.mutateMeshPointsColoring(id, {
+            color,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/points/common.js b/internal/stores/data_style/mesh/points/common.js
index a56c0b2b..fe8d7777 100644
--- a/internal/stores/data_style/mesh/points/common.js
+++ b/internal/stores/data_style/mesh/points/common.js
@@ -3,6 +3,12 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useMeshPointsCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateMeshPointsStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      points: values,
+    });
+  }
+
   function meshPointsStyle(id) {
     return dataStyleStateStore.getStyle(id).points;
   }
@@ -11,13 +17,16 @@ export function useMeshPointsCommonStyle() {
     return meshPointsStyle(id).coloring;
   }
 
-  function meshPointsActiveColoring(id) {
-    return meshPointsColoring(id).active;
+  function mutateMeshPointsColoring(id, values) {
+    return mutateMeshPointsStyle(id, {
+      coloring: values,
+    });
   }
 
   return {
     meshPointsStyle,
     meshPointsColoring,
-    meshPointsActiveColoring,
+    mutateMeshPointsStyle,
+    mutateMeshPointsColoring,
   };
 }
diff --git a/internal/stores/data_style/mesh/points/index.js b/internal/stores/data_style/mesh/points/index.js
index 7a7bd464..c5c1ad5d 100644
--- a/internal/stores/data_style/mesh/points/index.js
+++ b/internal/stores/data_style/mesh/points/index.js
@@ -9,49 +9,50 @@ import { useMeshPointsVisibilityStyle } from "./visibility";
 
 // Local constants
 
-export function useMeshPointsStyle() {
+function useMeshPointsColoringStyle() {
   const meshPointsCommonStyle = useMeshPointsCommonStyle();
-  const meshPointsVisibility = useMeshPointsVisibilityStyle();
   const meshPointsColorStyle = useMeshPointsColorStyle();
-  const meshPointsSizeStyle = useMeshPointsSizeStyle();
   const meshPointsVertexAttributeStyle = useMeshPointsVertexAttributeStyle();
 
+  function meshPointsColoring(id) {
+    return meshPointsCommonStyle.meshPointsColoring(id);
+  }
+
+  function meshPointsActiveColoring(id) {
+    return meshPointsColoring(id).active;
+  }
+
   async function setMeshPointsActiveColoring(id, type) {
-    const coloring = meshPointsCommonStyle.meshPointsColoring(id);
-    coloring.active = type;
-    console.log(
-      setMeshPointsActiveColoring.name,
-      { id },
-      meshPointsCommonStyle.meshPointsActiveColoring(id),
-    );
+    await meshPointsCommonStyle.mutateMeshPointsStyle(id, {
+      coloring: { active: type },
+    });
     if (type === "color") {
       return meshPointsColorStyle.setMeshPointsColor(id, meshPointsColorStyle.meshPointsColor(id));
-    }
-    if (type === "textures") {
-      const textures = meshPointsTexturesStore.meshPointsTextures(id);
-      if (textures === undefined) {
-        return;
-      }
-      return meshPointsTexturesStore.setMeshPointsTextures(id, textures);
-    }
-    if (type === "vertex") {
+    } else if (type === "vertex") {
       const name = meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id);
       if (name === undefined) {
         return;
       }
       return meshPointsVertexAttributeStyle.setMeshPointsVertexAttributeName(id, name);
     }
-    if (type === "polygon") {
-      const name = meshPointsPolygonAttributeStyleStore.meshPointsPolygonAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
-      await meshPointsPolygonAttributeStyleStore.setMeshPointsPolygonAttributeName(id, name);
-      return;
-    }
     throw new Error(`Unknown mesh points coloring type: ${type}`);
   }
 
+  return {
+    meshPointsColoring,
+    meshPointsActiveColoring,
+    setMeshPointsActiveColoring,
+    ...meshPointsColorStyle,
+    ...meshPointsVertexAttributeStyle,
+  };
+}
+
+export function useMeshPointsStyle() {
+  const meshPointsCommonStyle = useMeshPointsCommonStyle();
+  const meshPointsVisibility = useMeshPointsVisibilityStyle();
+  const meshPointsSizeStyle = useMeshPointsSizeStyle();
+  const meshPointsColoringStyle = useMeshPointsColoringStyle();
+
   function applyMeshPointsStyle(id) {
     return Promise.all([
       meshPointsVisibility.setMeshPointsVisibility(
@@ -59,17 +60,18 @@ export function useMeshPointsStyle() {
         meshPointsVisibility.meshPointsVisibility(id),
       ),
       meshPointsSizeStyle.setMeshPointsSize(id, meshPointsSizeStyle.meshPointsSize(id)),
-      setMeshPointsActiveColoring(id, meshPointsCommonStyle.meshPointsActiveColoring(id)),
+      meshPointsColoringStyle.setMeshPointsActiveColoring(
+        id,
+        meshPointsColoringStyle.meshPointsActiveColoring(id),
+      ),
     ]);
   }
 
   return {
-    setMeshPointsActiveColoring,
-    applyMeshPointsStyle,
     ...meshPointsCommonStyle,
+    ...meshPointsColoringStyle,
+    applyMeshPointsStyle,
     ...meshPointsVisibility,
-    ...meshPointsColorStyle,
     ...meshPointsSizeStyle,
-    ...meshPointsVertexAttributeStyle,
   };
 }
diff --git a/internal/stores/data_style/mesh/points/size.js b/internal/stores/data_style/mesh/points/size.js
index d1692107..18c561ff 100644
--- a/internal/stores/data_style/mesh/points/size.js
+++ b/internal/stores/data_style/mesh/points/size.js
@@ -20,10 +20,7 @@ export function useMeshPointsSizeStyle() {
       meshPointsSizeSchemas,
       { id, size },
       {
-        response_function: () => {
-          meshPointsCommonStyle.meshPointsStyle(id).size = size;
-          console.log(setMeshPointsSize.name, { id }, JSON.stringify(meshPointsSize(id)));
-        },
+        response_function: () => meshPointsCommonStyle.mutateMeshPointsStyle(id, { size }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/points/vertex.js b/internal/stores/data_style/mesh/points/vertex.js
index 642ca5ba..51dbfcfb 100644
--- a/internal/stores/data_style/mesh/points/vertex.js
+++ b/internal/stores/data_style/mesh/points/vertex.js
@@ -10,14 +10,29 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const meshPointsVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.points.attribute.vertex;
 
-export function useMeshPointsVertexAttributeStyle() {
-  const viewerStore = useViewerStore();
+function useMeshPointsVertexAttributeConfig() {
   const meshPointsCommonStyle = useMeshPointsCommonStyle();
 
   function meshPointsVertexAttribute(id) {
     return meshPointsCommonStyle.meshPointsColoring(id).vertex;
   }
 
+  function mutateMeshPointsVertexStyle(id, values) {
+    return meshPointsCommonStyle.mutateMeshPointsStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+  }
+
+  function setMeshPointsVertexAttributeStoredConfig(id, name, config) {
+    return mutateMeshPointsVertexStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
   function meshPointsVertexAttributeStoredConfig(id, name) {
     const { storedConfigs } = meshPointsVertexAttribute(id);
     if (name in storedConfigs) {
@@ -30,99 +45,98 @@ export function useMeshPointsVertexAttributeStyle() {
     });
   }
 
-  function setMeshPointsVertexAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshPointsVertexAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
-  }
-
   function meshPointsVertexAttributeName(id) {
-    console.log(meshPointsVertexAttributeName.name, { id }, meshPointsVertexAttribute(id));
     return meshPointsVertexAttribute(id).name;
   }
+
+  return {
+    meshPointsVertexAttribute,
+    meshPointsVertexAttributeStoredConfig,
+    setMeshPointsVertexAttributeStoredConfig,
+    mutateMeshPointsVertexStyle,
+    meshPointsVertexAttributeName,
+  };
+}
+
+function useMeshPointsVertexAttributeActions() {
+  const viewerStore = useViewerStore();
+  const config = useMeshPointsVertexAttributeConfig();
+
   function setMeshPointsVertexAttributeName(id, name) {
-    console.log(setMeshPointsVertexAttributeName.name, { id, name });
     return viewerStore.request(
       meshPointsVertexAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshPointsVertexAttribute(id).name = name;
-          const { minimum, maximum } = meshPointsVertexAttributeStoredConfig(id, name);
-          await setMeshPointsVertexAttributeRange(id, minimum, maximum);
-          console.log(
-            setMeshPointsVertexAttributeName.name,
-            { id },
-            meshPointsVertexAttributeName(id),
-          );
+        response_function: () => {
+          const updates = { name };
+          const vertex = config.meshPointsVertexAttribute(id);
+          if (!(name in vertex.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return config.mutateMeshPointsVertexStyle(id, updates);
         },
       },
     );
   }
 
-  function meshPointsVertexAttributeRange(id) {
-    const name = meshPointsVertexAttributeName(id);
-    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name);
-    const { minimum, maximum } = storedConfig;
-    return [minimum, maximum];
-  }
   function setMeshPointsVertexAttributeRange(id, minimum, maximum) {
-    const name = meshPointsVertexAttributeName(id);
-    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshPointsVertexAttributeColorMap(id, storedConfig.colorMap);
+    const name = config.meshPointsVertexAttributeName(id);
+    return config.setMeshPointsVertexAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
-  function meshPointsVertexAttributeColorMap(id) {
-    const name = meshPointsVertexAttributeName(id);
-    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name);
-    const { colorMap } = storedConfig;
-    return colorMap;
-  }
   function setMeshPointsVertexAttributeColorMap(id, colorMap) {
-    const name = meshPointsVertexAttributeName(id);
-    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
+    const name = config.meshPointsVertexAttributeName(id);
+    const storedConfig = config.meshPointsVertexAttributeStoredConfig(id, name);
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshPointsVertexAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshPointsVertexAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshPointsVertexAttributeColorMap.name,
-            { id },
-            meshPointsVertexAttributeColorMap(id),
-          );
-        },
+        response_function: () =>
+          config.setMeshPointsVertexAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
 
   return {
-    meshPointsVertexAttributeName,
-    meshPointsVertexAttributeRange,
-    meshPointsVertexAttributeColorMap,
-    meshPointsVertexAttributeStoredConfig,
     setMeshPointsVertexAttributeName,
     setMeshPointsVertexAttributeRange,
     setMeshPointsVertexAttributeColorMap,
   };
 }
+
+export function useMeshPointsVertexAttributeStyle() {
+  const config = useMeshPointsVertexAttributeConfig();
+  const actions = useMeshPointsVertexAttributeActions();
+
+  function meshPointsVertexAttributeRange(id) {
+    const name = config.meshPointsVertexAttributeName(id);
+    const storedConfig = config.meshPointsVertexAttributeStoredConfig(id, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  function meshPointsVertexAttributeColorMap(id) {
+    const name = config.meshPointsVertexAttributeName(id);
+    const storedConfig = config.meshPointsVertexAttributeStoredConfig(id, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  return {
+    meshPointsVertexAttributeRange,
+    meshPointsVertexAttributeColorMap,
+    ...config,
+    ...actions,
+  };
+}
diff --git a/internal/stores/data_style/mesh/points/visibility.js b/internal/stores/data_style/mesh/points/visibility.js
index 79b91654..f0878c3e 100644
--- a/internal/stores/data_style/mesh/points/visibility.js
+++ b/internal/stores/data_style/mesh/points/visibility.js
@@ -20,10 +20,7 @@ export function useMeshPointsVisibilityStyle() {
       meshPointsVisibilitySchema,
       { id, visibility },
       {
-        response_function: () => {
-          meshPointsCommonStyle.meshPointsStyle(id).visibility = visibility;
-          console.log(setMeshPointsVisibility.name, { id }, meshPointsVisibility(id));
-        },
+        response_function: () => meshPointsCommonStyle.mutateMeshPointsStyle(id, { visibility }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/polygons/color.js b/internal/stores/data_style/mesh/polygons/color.js
index 290c243a..efcfa5e1 100644
--- a/internal/stores/data_style/mesh/polygons/color.js
+++ b/internal/stores/data_style/mesh/polygons/color.js
@@ -20,10 +20,10 @@ export function useMeshPolygonsColorStyle() {
       meshPolygonsColorSchemas,
       { id, color },
       {
-        response_function: () => {
-          meshPolygonsCommonStyle.meshPolygonsColoring(id).color = color;
-          console.log(setMeshPolygonsColor.name, { id }, JSON.stringify(meshPolygonsColor(id)));
-        },
+        response_function: () =>
+          meshPolygonsCommonStyle.mutateMeshPolygonsColoring(id, {
+            color,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/polygons/common.js b/internal/stores/data_style/mesh/polygons/common.js
index 7f74a03e..1637f7e4 100644
--- a/internal/stores/data_style/mesh/polygons/common.js
+++ b/internal/stores/data_style/mesh/polygons/common.js
@@ -3,6 +3,12 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useMeshPolygonsCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateMeshPolygonsStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      polygons: values,
+    });
+  }
+
   function meshPolygonsStyle(id) {
     return dataStyleStateStore.getStyle(id).polygons;
   }
@@ -11,13 +17,16 @@ export function useMeshPolygonsCommonStyle() {
     return meshPolygonsStyle(id).coloring;
   }
 
-  function meshPolygonsActiveColoring(id) {
-    return meshPolygonsColoring(id).active;
+  function mutateMeshPolygonsColoring(id, values) {
+    return mutateMeshPolygonsStyle(id, {
+      coloring: values,
+    });
   }
 
   return {
     meshPolygonsStyle,
     meshPolygonsColoring,
-    meshPolygonsActiveColoring,
+    mutateMeshPolygonsStyle,
+    mutateMeshPolygonsColoring,
   };
 }
diff --git a/internal/stores/data_style/mesh/polygons/index.js b/internal/stores/data_style/mesh/polygons/index.js
index 7f72fe2e..bd5572ee 100644
--- a/internal/stores/data_style/mesh/polygons/index.js
+++ b/internal/stores/data_style/mesh/polygons/index.js
@@ -10,71 +10,82 @@ import { useMeshPolygonsVisibilityStyle } from "./visibility";
 
 // Local constants
 
-export function useMeshPolygonsStyle() {
+function useMeshPolygonsColoringStyle() {
   const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
-  const meshPolygonsVisibility = useMeshPolygonsVisibilityStyle();
   const meshPolygonsColorStyle = useMeshPolygonsColorStyle();
   const meshPolygonsTexturesStyle = useMeshPolygonsTexturesStyle();
   const meshPolygonsVertexAttributeStyle = useMeshPolygonsVertexAttributeStyle();
   const meshPolygonsPolygonAttributeStyle = useMeshPolygonsPolygonAttributeStyle();
 
+  function meshPolygonsColoring(id) {
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id);
+  }
+
+  function meshPolygonsActiveColoring(id) {
+    return meshPolygonsColoring(id).active;
+  }
+
   async function setMeshPolygonsActiveColoring(id, type) {
-    const coloring = meshPolygonsCommonStyle.meshPolygonsColoring(id);
-    coloring.active = type;
-    console.log(
-      setMeshPolygonsActiveColoring.name,
-      { id },
-      meshPolygonsCommonStyle.meshPolygonsActiveColoring(id),
-    );
+    await meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
+      coloring: { active: type },
+    });
     if (type === "color") {
       return meshPolygonsColorStyle.setMeshPolygonsColor(
         id,
         meshPolygonsColorStyle.meshPolygonsColor(id),
       );
-    }
-    if (type === "textures") {
+    } else if (type === "textures") {
       const textures = meshPolygonsTexturesStyle.meshPolygonsTextures(id);
       if (textures === undefined) {
         return;
       }
       return meshPolygonsTexturesStyle.setMeshPolygonsTextures(id, textures);
-    }
-    if (type === "vertex") {
+    } else if (type === "vertex") {
       const name = meshPolygonsVertexAttributeStyle.meshPolygonsVertexAttributeName(id);
       if (name === undefined) {
         return;
       }
       return meshPolygonsVertexAttributeStyle.setMeshPolygonsVertexAttributeName(id, name);
-    }
-    if (type === "polygon") {
+    } else if (type === "polygon") {
       const name = meshPolygonsPolygonAttributeStyle.meshPolygonsPolygonAttributeName(id);
       if (name === undefined) {
         return;
       }
-      await meshPolygonsPolygonAttributeStyle.setMeshPolygonsPolygonAttributeName(id, name);
-      return;
+      return meshPolygonsPolygonAttributeStyle.setMeshPolygonsPolygonAttributeName(id, name);
     }
     throw new Error(`Unknown mesh polygons coloring type: ${type}`);
   }
 
+  return {
+    meshPolygonsColoring,
+    meshPolygonsActiveColoring,
+    setMeshPolygonsActiveColoring,
+    ...meshPolygonsColorStyle,
+    ...meshPolygonsTexturesStyle,
+    ...meshPolygonsVertexAttributeStyle,
+    ...meshPolygonsPolygonAttributeStyle,
+  };
+}
+
+export function useMeshPolygonsStyle() {
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
+  const meshPolygonsVisibility = useMeshPolygonsVisibilityStyle();
+  const coloringStyle = useMeshPolygonsColoringStyle();
+
   function applyMeshPolygonsStyle(id) {
     return Promise.all([
       meshPolygonsVisibility.setMeshPolygonsVisibility(
         id,
         meshPolygonsVisibility.meshPolygonsVisibility(id),
       ),
-      setMeshPolygonsActiveColoring(id, meshPolygonsCommonStyle.meshPolygonsActiveColoring(id)),
+      coloringStyle.setMeshPolygonsActiveColoring(id, coloringStyle.meshPolygonsActiveColoring(id)),
     ]);
   }
 
   return {
-    setMeshPolygonsActiveColoring,
-    applyMeshPolygonsStyle,
     ...meshPolygonsCommonStyle,
+    ...coloringStyle,
+    applyMeshPolygonsStyle,
     ...meshPolygonsVisibility,
-    ...meshPolygonsColorStyle,
-    ...meshPolygonsTexturesStyle,
-    ...meshPolygonsVertexAttributeStyle,
-    ...meshPolygonsPolygonAttributeStyle,
   };
 }
diff --git a/internal/stores/data_style/mesh/polygons/polygon.js b/internal/stores/data_style/mesh/polygons/polygon.js
index 0dcfaf17..56375517 100644
--- a/internal/stores/data_style/mesh/polygons/polygon.js
+++ b/internal/stores/data_style/mesh/polygons/polygon.js
@@ -10,6 +10,7 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const meshPolygonsPolygonAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.polygons.attribute.polygon;
 
+// oxlint-disable-next-line max-lines-per-function
 export function useMeshPolygonsPolygonAttributeStyle() {
   const viewerStore = useViewerStore();
   const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
@@ -30,46 +31,62 @@ export function useMeshPolygonsPolygonAttributeStyle() {
     });
   }
 
-  function setMeshPolygonsPolygonAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshPolygonsPolygonAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
+  function mutateMeshPolygonsPolygonStyle(id, values) {
+    return meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
+      coloring: {
+        polygon: values,
+      },
+    });
+  }
+
+  function setMeshPolygonsPolygonAttributeStoredConfig(id, name, config) {
+    return mutateMeshPolygonsPolygonStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
   }
 
   function meshPolygonsPolygonAttributeName(id) {
     return meshPolygonsPolygonAttribute(id).name;
   }
+
   function setMeshPolygonsPolygonAttributeName(id, name) {
     return viewerStore.request(
       meshPolygonsPolygonAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshPolygonsPolygonAttribute(id).name = name;
-          const { minimum, maximum } = meshPolygonsPolygonAttributeStoredConfig(id, name);
-          await setMeshPolygonsPolygonAttributeRange(id, minimum, maximum);
-          console.log(
-            setMeshPolygonsPolygonAttributeName.name,
-            { id },
-            meshPolygonsPolygonAttributeName(id),
-          );
+        response_function: () => {
+          const updates = { name };
+          const polygon = meshPolygonsPolygonAttribute(id);
+          if (!(name in polygon.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return mutateMeshPolygonsPolygonStyle(id, updates);
         },
       },
     );
   }
+
   function meshPolygonsPolygonAttributeRange(id) {
     const name = meshPolygonsPolygonAttributeName(id);
     const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name);
     const { minimum, maximum } = storedConfig;
-    console.log(meshPolygonsPolygonAttributeRange.name, { id }, { minimum, maximum });
     return [minimum, maximum];
   }
+
   function setMeshPolygonsPolygonAttributeRange(id, minimum, maximum) {
     const name = meshPolygonsPolygonAttributeName(id);
-    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshPolygonsPolygonAttributeColorMap(id, storedConfig.colorMap);
+    return setMeshPolygonsPolygonAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
   function meshPolygonsPolygonAttributeColorMap(id) {
@@ -78,31 +95,20 @@ export function useMeshPolygonsPolygonAttributeStyle() {
     const { colorMap } = storedConfig;
     return colorMap;
   }
+
   function setMeshPolygonsPolygonAttributeColorMap(id, colorMap) {
     const name = meshPolygonsPolygonAttributeName(id);
     const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
     return viewerStore.request(
       meshPolygonsPolygonAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshPolygonsPolygonAttributeColorMap.name,
-            { id },
-            meshPolygonsPolygonAttributeColorMap(id),
-          );
-        },
+        response_function: () =>
+          setMeshPolygonsPolygonAttributeStoredConfig(id, name, {
+            colorMap,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/polygons/textures.js b/internal/stores/data_style/mesh/polygons/textures.js
index 13eaeec1..40f8af09 100644
--- a/internal/stores/data_style/mesh/polygons/textures.js
+++ b/internal/stores/data_style/mesh/polygons/textures.js
@@ -20,10 +20,10 @@ export function useMeshPolygonsTexturesStyle() {
       meshPolygonsTexturesSchemas,
       { id, textures },
       {
-        response_function: () => {
-          meshPolygonsCommonStyle.meshPolygonsColoring(id).textures = textures;
-          console.log(setMeshPolygonsTextures.name, { id }, meshPolygonsTextures(id));
-        },
+        response_function: () =>
+          meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
+            coloring: { textures },
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/polygons/vertex.js b/internal/stores/data_style/mesh/polygons/vertex.js
index 7e0a0b66..c9689341 100644
--- a/internal/stores/data_style/mesh/polygons/vertex.js
+++ b/internal/stores/data_style/mesh/polygons/vertex.js
@@ -30,31 +30,44 @@ export function useMeshPolygonsVertexAttributeStyle() {
     });
   }
 
-  function setMeshPolygonsVertexAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshPolygonsVertexAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
+  function mutateMeshPolygonsVertexStyle(id, values) {
+    return meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+  }
+
+  function setMeshPolygonsVertexAttributeStoredConfig(id, name, config) {
+    return mutateMeshPolygonsVertexStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
   }
 
   function meshPolygonsVertexAttributeName(id) {
-    console.log(meshPolygonsVertexAttributeName.name, { id }, meshPolygonsVertexAttribute(id));
     return meshPolygonsVertexAttribute(id).name;
   }
+
   function setMeshPolygonsVertexAttributeName(id, name) {
-    console.log(setMeshPolygonsVertexAttributeName.name, { id, name });
     return viewerStore.request(
       meshPolygonsVertexAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshPolygonsVertexAttribute(id).name = name;
-          const { minimum, maximum } = meshPolygonsVertexAttributeStoredConfig(id, name);
-          await setMeshPolygonsVertexAttributeRange(id, minimum, maximum);
-          console.log(
-            setMeshPolygonsVertexAttributeName.name,
-            { id },
-            meshPolygonsVertexAttributeName(id),
-          );
+        response_function: () => {
+          const updates = { name };
+          const vertex = meshPolygonsVertexAttribute(id);
+          if (!(name in vertex.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return mutateMeshPolygonsVertexStyle(id, updates);
         },
       },
     );
@@ -66,12 +79,13 @@ export function useMeshPolygonsVertexAttributeStyle() {
     const { minimum, maximum } = storedConfig;
     return [minimum, maximum];
   }
+
   function setMeshPolygonsVertexAttributeRange(id, minimum, maximum) {
     const name = meshPolygonsVertexAttributeName(id);
-    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshPolygonsVertexAttributeColorMap(id, storedConfig.colorMap);
+    return setMeshPolygonsVertexAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
   function meshPolygonsVertexAttributeColorMap(id) {
@@ -80,38 +94,17 @@ export function useMeshPolygonsVertexAttributeStyle() {
     const { colorMap } = storedConfig;
     return colorMap;
   }
+
   function setMeshPolygonsVertexAttributeColorMap(id, colorMap) {
     const name = meshPolygonsVertexAttributeName(id);
     const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshPolygonsVertexAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshPolygonsVertexAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshPolygonsVertexAttributeColorMap.name,
-            { id },
-            meshPolygonsVertexAttributeColorMap(id),
-          );
-        },
+        response_function: () => setMeshPolygonsVertexAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/polygons/visibility.js b/internal/stores/data_style/mesh/polygons/visibility.js
index a2d53ed1..f4a3fc13 100644
--- a/internal/stores/data_style/mesh/polygons/visibility.js
+++ b/internal/stores/data_style/mesh/polygons/visibility.js
@@ -20,10 +20,10 @@ export function useMeshPolygonsVisibilityStyle() {
       meshPolygonsVisibilitySchema,
       { id, visibility },
       {
-        response_function: () => {
-          meshPolygonsCommonStyle.meshPolygonsStyle(id).visibility = visibility;
-          console.log(setMeshPolygonsVisibility.name, { id }, meshPolygonsVisibility(id));
-        },
+        response_function: () =>
+          meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
+            visibility,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/polyhedra/color.js b/internal/stores/data_style/mesh/polyhedra/color.js
index 9e61875c..2877b419 100644
--- a/internal/stores/data_style/mesh/polyhedra/color.js
+++ b/internal/stores/data_style/mesh/polyhedra/color.js
@@ -20,10 +20,10 @@ export function useMeshPolyhedraColorStyle() {
       meshPolyhedraColorSchemas,
       { id, color },
       {
-        response_function: () => {
-          meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color = color;
-          console.log(setMeshPolyhedraColor.name, { id }, JSON.stringify(meshPolyhedraColor(id)));
-        },
+        response_function: () =>
+          meshPolyhedraCommonStyle.mutateMeshPolyhedraColoring(id, {
+            color,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/mesh/polyhedra/common.js b/internal/stores/data_style/mesh/polyhedra/common.js
index 2feff082..f074cb56 100644
--- a/internal/stores/data_style/mesh/polyhedra/common.js
+++ b/internal/stores/data_style/mesh/polyhedra/common.js
@@ -3,6 +3,12 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useMeshPolyhedraCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateMeshPolyhedraStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      polyhedra: values,
+    });
+  }
+
   function meshPolyhedraStyle(id) {
     return dataStyleStateStore.getStyle(id).polyhedra;
   }
@@ -11,13 +17,16 @@ export function useMeshPolyhedraCommonStyle() {
     return meshPolyhedraStyle(id).coloring;
   }
 
-  function meshPolyhedraActiveColoring(id) {
-    return meshPolyhedraColoring(id).active;
+  function mutateMeshPolyhedraColoring(id, values) {
+    return mutateMeshPolyhedraStyle(id, {
+      coloring: values,
+    });
   }
 
   return {
     meshPolyhedraStyle,
     meshPolyhedraColoring,
-    meshPolyhedraActiveColoring,
+    mutateMeshPolyhedraStyle,
+    mutateMeshPolyhedraColoring,
   };
 }
diff --git a/internal/stores/data_style/mesh/polyhedra/index.js b/internal/stores/data_style/mesh/polyhedra/index.js
index 421bc59c..a0ba78ee 100644
--- a/internal/stores/data_style/mesh/polyhedra/index.js
+++ b/internal/stores/data_style/mesh/polyhedra/index.js
@@ -1,6 +1,7 @@
 // Third party imports
 
 // Local imports
+
 import { useMeshPolyhedraColorStyle } from "./color";
 import { useMeshPolyhedraCommonStyle } from "./common";
 import { useMeshPolyhedraPolyhedronAttributeStyle } from "./polyhedron";
@@ -13,17 +14,22 @@ export function useMeshPolyhedraStyle() {
   const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
   const meshPolyhedraVisibility = useMeshPolyhedraVisibilityStyle();
   const meshPolyhedraColorStyle = useMeshPolyhedraColorStyle();
+
+  function meshPolyhedraColoring(id) {
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id);
+  }
   const meshPolyhedraVertexAttributeStyle = useMeshPolyhedraVertexAttributeStyle();
   const meshPolyhedraPolyhedronAttributeStyle = useMeshPolyhedraPolyhedronAttributeStyle();
 
+  function meshPolyhedraActiveColoring(id) {
+    return meshPolyhedraColoring(id).active;
+  }
+
   async function setMeshPolyhedraActiveColoring(id, type) {
-    const coloring = meshPolyhedraCommonStyle.meshPolyhedraColoring(id);
-    coloring.active = type;
-    console.log(
-      setMeshPolyhedraActiveColoring.name,
-      { id },
-      meshPolyhedraCommonStyle.meshPolyhedraActiveColoring(id),
-    );
+    await meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
+      coloring: { active: type },
+    });
+    console.log(setMeshPolyhedraActiveColoring.name, { id }, type);
     if (type === "color") {
       return meshPolyhedraColorStyle.setMeshPolyhedraColor(
         id,
@@ -42,8 +48,10 @@ export function useMeshPolyhedraStyle() {
       if (name === undefined) {
         return;
       }
-      await meshPolyhedraPolyhedronAttributeStyle.setMeshPolyhedraPolyhedronAttributeName(id, name);
-      return;
+      return meshPolyhedraPolyhedronAttributeStyle.setMeshPolyhedraPolyhedronAttributeName(
+        id,
+        name,
+      );
     }
     throw new Error(`Unknown mesh polyhedra coloring type: ${type}`);
   }
@@ -54,14 +62,16 @@ export function useMeshPolyhedraStyle() {
         id,
         meshPolyhedraVisibility.meshPolyhedraVisibility(id),
       ),
-      setMeshPolyhedraActiveColoring(id, meshPolyhedraCommonStyle.meshPolyhedraActiveColoring(id)),
+      setMeshPolyhedraActiveColoring(id, meshPolyhedraActiveColoring(id)),
     ]);
   }
 
   return {
+    ...meshPolyhedraCommonStyle,
+    meshPolyhedraColoring,
+    meshPolyhedraActiveColoring,
     setMeshPolyhedraActiveColoring,
     applyMeshPolyhedraStyle,
-    ...meshPolyhedraCommonStyle,
     ...meshPolyhedraVisibility,
     ...meshPolyhedraColorStyle,
     ...meshPolyhedraVertexAttributeStyle,
diff --git a/internal/stores/data_style/mesh/polyhedra/polyhedron.js b/internal/stores/data_style/mesh/polyhedra/polyhedron.js
index f64b96f3..f53093fc 100644
--- a/internal/stores/data_style/mesh/polyhedra/polyhedron.js
+++ b/internal/stores/data_style/mesh/polyhedra/polyhedron.js
@@ -10,14 +10,29 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const meshPolyhedraPolyhedronAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.attribute.polyhedron;
 
-export function useMeshPolyhedraPolyhedronAttributeStyle() {
-  const viewerStore = useViewerStore();
+function useMeshPolyhedraPolyhedronAttributeConfig() {
   const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
 
   function meshPolyhedraPolyhedronAttribute(id) {
     return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).polyhedron;
   }
 
+  function mutateMeshPolyhedraPolyhedronStyle(id, values) {
+    return meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
+      coloring: {
+        polyhedron: values,
+      },
+    });
+  }
+
+  function setMeshPolyhedraPolyhedronAttributeStoredConfig(id, name, config) {
+    return mutateMeshPolyhedraPolyhedronStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
   function meshPolyhedraPolyhedronAttributeStoredConfig(id, name) {
     const { storedConfigs } = meshPolyhedraPolyhedronAttribute(id);
     if (name in storedConfigs) {
@@ -30,93 +45,98 @@ export function useMeshPolyhedraPolyhedronAttributeStyle() {
     });
   }
 
-  function setMeshPolyhedraPolyhedronAttributeStoredConfig(
-    id,
-    name,
-    { minimum, maximum, colorMap },
-  ) {
-    const { storedConfigs } = meshPolyhedraPolyhedronAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
-  }
-
   function meshPolyhedraPolyhedronAttributeName(id) {
     return meshPolyhedraPolyhedronAttribute(id).name;
   }
+
+  return {
+    meshPolyhedraPolyhedronAttribute,
+    meshPolyhedraPolyhedronAttributeStoredConfig,
+    setMeshPolyhedraPolyhedronAttributeStoredConfig,
+    mutateMeshPolyhedraPolyhedronStyle,
+    meshPolyhedraPolyhedronAttributeName,
+  };
+}
+
+function useMeshPolyhedraPolyhedronAttributeActions() {
+  const viewerStore = useViewerStore();
+  const config = useMeshPolyhedraPolyhedronAttributeConfig();
+
   function setMeshPolyhedraPolyhedronAttributeName(id, name) {
     return viewerStore.request(
       meshPolyhedraPolyhedronAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshPolyhedraPolyhedronAttribute(id).name = name;
-          const { minimum, maximum } = meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
-          await setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum);
-          console.log(
-            setMeshPolyhedraPolyhedronAttributeName.name,
-            { id },
-            meshPolyhedraPolyhedronAttributeName(id),
-          );
+        response_function: () => {
+          const updates = { name };
+          const polyhedron = config.meshPolyhedraPolyhedronAttribute(id);
+          if (!(name in polyhedron.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return config.mutateMeshPolyhedraPolyhedronStyle(id, updates);
         },
       },
     );
   }
-  function meshPolyhedraPolyhedronAttributeRange(id) {
-    const name = meshPolyhedraPolyhedronAttributeName(id);
-    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
-    const { minimum, maximum } = storedConfig;
-    return [minimum, maximum];
-  }
+
   function setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum) {
-    const name = meshPolyhedraPolyhedronAttributeName(id);
-    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshPolyhedraPolyhedronAttributeColorMap(id, storedConfig.colorMap);
+    const name = config.meshPolyhedraPolyhedronAttributeName(id);
+    return config.setMeshPolyhedraPolyhedronAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
-  function meshPolyhedraPolyhedronAttributeColorMap(id) {
-    const name = meshPolyhedraPolyhedronAttributeName(id);
-    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
-    const { colorMap } = storedConfig;
-    return colorMap;
-  }
   function setMeshPolyhedraPolyhedronAttributeColorMap(id, colorMap) {
-    const name = meshPolyhedraPolyhedronAttributeName(id);
-    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
+    const name = config.meshPolyhedraPolyhedronAttributeName(id);
+    const storedConfig = config.meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
     return viewerStore.request(
       meshPolyhedraPolyhedronAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshPolyhedraPolyhedronAttributeColorMap.name,
-            { id },
-            meshPolyhedraPolyhedronAttributeColorMap(id),
-          );
-        },
+        response_function: () =>
+          config.setMeshPolyhedraPolyhedronAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
 
   return {
-    meshPolyhedraPolyhedronAttributeName,
-    meshPolyhedraPolyhedronAttributeRange,
-    meshPolyhedraPolyhedronAttributeColorMap,
-    meshPolyhedraPolyhedronAttributeStoredConfig,
     setMeshPolyhedraPolyhedronAttributeName,
     setMeshPolyhedraPolyhedronAttributeRange,
     setMeshPolyhedraPolyhedronAttributeColorMap,
   };
 }
+
+export function useMeshPolyhedraPolyhedronAttributeStyle() {
+  const config = useMeshPolyhedraPolyhedronAttributeConfig();
+  const actions = useMeshPolyhedraPolyhedronAttributeActions();
+
+  function meshPolyhedraPolyhedronAttributeRange(id) {
+    const name = config.meshPolyhedraPolyhedronAttributeName(id);
+    const storedConfig = config.meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  function meshPolyhedraPolyhedronAttributeColorMap(id) {
+    const name = config.meshPolyhedraPolyhedronAttributeName(id);
+    const storedConfig = config.meshPolyhedraPolyhedronAttributeStoredConfig(id, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  return {
+    meshPolyhedraPolyhedronAttributeRange,
+    meshPolyhedraPolyhedronAttributeColorMap,
+    ...config,
+    ...actions,
+  };
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/vertex.js b/internal/stores/data_style/mesh/polyhedra/vertex.js
index 17c3bf2a..aadb1784 100644
--- a/internal/stores/data_style/mesh/polyhedra/vertex.js
+++ b/internal/stores/data_style/mesh/polyhedra/vertex.js
@@ -10,14 +10,29 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 const meshPolyhedraVertexAttributeSchemas =
   viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.attribute.vertex;
 
-export function useMeshPolyhedraVertexAttributeStyle() {
-  const viewerStore = useViewerStore();
+function useMeshPolyhedraVertexAttributeConfig() {
   const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
 
   function meshPolyhedraVertexAttribute(id) {
     return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).vertex;
   }
 
+  function mutateMeshPolyhedraVertexStyle(id, values) {
+    return meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
+      coloring: {
+        vertex: values,
+      },
+    });
+  }
+
+  function setMeshPolyhedraVertexAttributeStoredConfig(id, name, config) {
+    return mutateMeshPolyhedraVertexStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
   function meshPolyhedraVertexAttributeStoredConfig(id, name) {
     const { storedConfigs } = meshPolyhedraVertexAttribute(id);
     if (name in storedConfigs) {
@@ -30,99 +45,98 @@ export function useMeshPolyhedraVertexAttributeStyle() {
     });
   }
 
-  function setMeshPolyhedraVertexAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshPolyhedraVertexAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
-  }
-
   function meshPolyhedraVertexAttributeName(id) {
-    console.log(meshPolyhedraVertexAttributeName.name, { id }, meshPolyhedraVertexAttribute(id));
     return meshPolyhedraVertexAttribute(id).name;
   }
+
+  return {
+    meshPolyhedraVertexAttribute,
+    meshPolyhedraVertexAttributeStoredConfig,
+    setMeshPolyhedraVertexAttributeStoredConfig,
+    mutateMeshPolyhedraVertexStyle,
+    meshPolyhedraVertexAttributeName,
+  };
+}
+
+function useMeshPolyhedraVertexAttributeActions() {
+  const viewerStore = useViewerStore();
+  const config = useMeshPolyhedraVertexAttributeConfig();
+
   function setMeshPolyhedraVertexAttributeName(id, name) {
-    console.log(setMeshPolyhedraVertexAttributeName.name, { id, name });
     return viewerStore.request(
       meshPolyhedraVertexAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshPolyhedraVertexAttribute(id).name = name;
-          const { minimum, maximum } = meshPolyhedraVertexAttributeStoredConfig(id, name);
-          await setMeshPolyhedraVertexAttributeRange(id, minimum, maximum);
-          console.log(
-            setMeshPolyhedraVertexAttributeName.name,
-            { id },
-            meshPolyhedraVertexAttributeName(id),
-          );
+        response_function: () => {
+          const updates = { name };
+          const vertex = config.meshPolyhedraVertexAttribute(id);
+          if (!(name in vertex.storedConfigs)) {
+            updates.storedConfigs = {
+              [name]: {
+                minimum: undefined,
+                maximum: undefined,
+                colorMap: undefined,
+              },
+            };
+          }
+          return config.mutateMeshPolyhedraVertexStyle(id, updates);
         },
       },
     );
   }
 
-  function meshPolyhedraVertexAttributeRange(id) {
-    const name = meshPolyhedraVertexAttributeName(id);
-    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name);
-    const { minimum, maximum } = storedConfig;
-    return [minimum, maximum];
-  }
   function setMeshPolyhedraVertexAttributeRange(id, minimum, maximum) {
-    const name = meshPolyhedraVertexAttributeName(id);
-    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshPolyhedraVertexAttributeColorMap(id, storedConfig.colorMap);
+    const name = config.meshPolyhedraVertexAttributeName(id);
+    return config.setMeshPolyhedraVertexAttributeStoredConfig(id, name, {
+      minimum,
+      maximum,
+    });
   }
 
-  function meshPolyhedraVertexAttributeColorMap(id) {
-    const name = meshPolyhedraVertexAttributeName(id);
-    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name);
-    const { colorMap } = storedConfig;
-    return colorMap;
-  }
   function setMeshPolyhedraVertexAttributeColorMap(id, colorMap) {
-    const name = meshPolyhedraVertexAttributeName(id);
-    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
+    const name = config.meshPolyhedraVertexAttributeName(id);
+    const storedConfig = config.meshPolyhedraVertexAttributeStoredConfig(id, name);
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshPolyhedraVertexAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshPolyhedraVertexAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshPolyhedraVertexAttributeColorMap.name,
-            { id },
-            meshPolyhedraVertexAttributeColorMap(id),
-          );
-        },
+        response_function: () =>
+          config.setMeshPolyhedraVertexAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }
 
   return {
-    meshPolyhedraVertexAttributeName,
-    meshPolyhedraVertexAttributeRange,
-    meshPolyhedraVertexAttributeColorMap,
-    meshPolyhedraVertexAttributeStoredConfig,
     setMeshPolyhedraVertexAttributeName,
     setMeshPolyhedraVertexAttributeRange,
     setMeshPolyhedraVertexAttributeColorMap,
   };
 }
+
+export function useMeshPolyhedraVertexAttributeStyle() {
+  const config = useMeshPolyhedraVertexAttributeConfig();
+  const actions = useMeshPolyhedraVertexAttributeActions();
+
+  function meshPolyhedraVertexAttributeRange(id) {
+    const name = config.meshPolyhedraVertexAttributeName(id);
+    const storedConfig = config.meshPolyhedraVertexAttributeStoredConfig(id, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  function meshPolyhedraVertexAttributeColorMap(id) {
+    const name = config.meshPolyhedraVertexAttributeName(id);
+    const storedConfig = config.meshPolyhedraVertexAttributeStoredConfig(id, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  return {
+    meshPolyhedraVertexAttributeRange,
+    meshPolyhedraVertexAttributeColorMap,
+    ...config,
+    ...actions,
+  };
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/visibility.js b/internal/stores/data_style/mesh/polyhedra/visibility.js
index 902c736f..010bc244 100644
--- a/internal/stores/data_style/mesh/polyhedra/visibility.js
+++ b/internal/stores/data_style/mesh/polyhedra/visibility.js
@@ -20,10 +20,10 @@ export function useMeshPolyhedraVisibilityStyle() {
       meshPolyhedraVisibilitySchema,
       { id, visibility },
       {
-        response_function: () => {
-          meshPolyhedraCommonStyle.meshPolyhedraStyle(id).visibility = visibility;
-          console.log(setMeshPolyhedraVisibility.name, { id }, meshPolyhedraVisibility(id));
-        },
+        response_function: () =>
+          meshPolyhedraCommonStyle.mutateMeshPolyhedraStyle(id, {
+            visibility,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 773948e4..6ecbec88 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -17,38 +17,26 @@ export function useModelBlocksColorStyle() {
   function modelBlockColor(id, block_id) {
     return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
   }
-  function saveModelBlockColor(id, block_id, color) {
-    modelBlocksCommonStyle.modelBlockStyle(id, block_id).color = color;
-  }
-  async function setModelBlocksColor(id, block_ids, color) {
+
+  function setModelBlocksColor(id, block_ids, color) {
     if (!block_ids || block_ids.length === 0) {
-      return;
-    }
-    const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, block_ids);
-    if (!blocks_viewer_ids || blocks_viewer_ids.length === 0) {
-      console.warn("[setModelBlocksColor] No viewer IDs found, skipping color request", {
-        id,
-        block_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_blocks_schemas.color,
-      { id, block_ids: blocks_viewer_ids, color },
-      {
-        response_function: () => {
-          for (const block_id of block_ids) {
-            saveModelBlockColor(id, block_id, color);
-          }
-          console.log(
-            setModelBlocksColor.name,
-            { id },
-            { block_ids },
-            JSON.stringify(modelBlockColor(id, block_ids[0])),
-          );
+    return dataStore.getMeshComponentsViewerIds(id, block_ids).then((block_viewer_ids) => {
+      if (!block_viewer_ids || block_viewer_ids.length === 0) {
+        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
+          color,
+        });
+      }
+      return viewerStore.request(
+        model_blocks_schemas.color,
+        { id, block_ids: block_viewer_ids, color },
+        {
+          response_function: () =>
+            modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { color }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index 0ef66680..d1d0c9af 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -1,3 +1,4 @@
+import merge from "lodash/merge";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 
 export function useModelBlocksCommonStyle() {
@@ -8,14 +9,23 @@ export function useModelBlocksCommonStyle() {
   }
 
   function modelBlockStyle(id, block_id) {
-    if (!modelBlocksStyle(id)[block_id]) {
-      modelBlocksStyle(id)[block_id] = {};
-    }
-    return modelBlocksStyle(id)[block_id];
+    const groupStyle = modelBlocksStyle(id);
+    const individualStyle = dataStyleStateStore.getComponentStyle(id, block_id);
+    return merge({}, groupStyle, individualStyle);
+  }
+
+  function mutateModelBlocksStyle(id, block_ids, values) {
+    return dataStyleStateStore.mutateComponentStyles(id, block_ids, values);
+  }
+
+  function mutateModelBlockStyle(id, block_id, values) {
+    return dataStyleStateStore.mutateComponentStyle(id, block_id, values);
   }
 
   return {
     modelBlocksStyle,
     modelBlockStyle,
+    mutateModelBlocksStyle,
+    mutateModelBlockStyle,
   };
 }
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index cd71e545..fad9dd8a 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -3,9 +3,8 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksColorStyle } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelBlocksVisibilityStyle } from "./visibility";
-
 async function setModelBlocksDefaultStyle(_id) {
-  // Placeholder for oxlint
+  // Placeholder
 }
 
 export function useModelBlocksStyle() {
@@ -15,12 +14,43 @@ export function useModelBlocksStyle() {
   const modelBlocksColorStyle = useModelBlocksColorStyle();
 
   async function applyModelBlocksStyle(id) {
-    const style = modelBlocksCommonStyle.modelBlocksStyle(id);
-    const blocks_ids = await dataStore.getBlocksGeodeIds(id);
-    return Promise.all([
-      modelBlocksVisibilityStyle.setModelBlocksVisibility(id, blocks_ids, style.visibility),
-      modelBlocksColorStyle.setModelBlocksColor(id, blocks_ids, style.color),
-    ]);
+    const block_ids = await dataStore.getBlocksGeodeIds(id);
+    if (block_ids.length === 0) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const block_id of block_ids) {
+      const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id);
+
+      const vKey = String(style.visibility);
+      if (!visibilityGroups[vKey]) {
+        visibilityGroups[vKey] = [];
+      }
+      visibilityGroups[vKey].push(block_id);
+
+      const cKey = JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = [];
+      }
+      colorGroups[cKey].push(block_id);
+    }
+
+    const promises = [];
+
+    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
+      promises.push(
+        modelBlocksVisibilityStyle.setModelBlocksVisibility(id, ids, vValue === "true"),
+      );
+    }
+
+    for (const [cValue, ids] of Object.entries(colorGroups)) {
+      promises.push(modelBlocksColorStyle.setModelBlocksColor(id, ids, JSON.parse(cValue)));
+    }
+
+    return Promise.all(promises);
   }
 
   return {
diff --git a/internal/stores/data_style/model/blocks/visibility.js b/internal/stores/data_style/model/blocks/visibility.js
index e9b53d81..382e320c 100644
--- a/internal/stores/data_style/model/blocks/visibility.js
+++ b/internal/stores/data_style/model/blocks/visibility.js
@@ -13,42 +13,31 @@ export function useModelBlocksVisibilityStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+
   function modelBlockVisibility(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).visibility;
-  }
-  function saveModelBlockVisibility(id, block_id, visibility) {
-    modelBlocksCommonStyle.modelBlockStyle(id, block_id).visibility = visibility;
+    const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id);
+    return style.visibility ?? true;
   }
 
-  async function setModelBlocksVisibility(id, block_ids, visibility) {
+  function setModelBlocksVisibility(id, block_ids, visibility) {
     if (!block_ids || block_ids.length === 0) {
-      return;
-    }
-    const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, block_ids);
-    if (!blocks_viewer_ids || blocks_viewer_ids.length === 0) {
-      console.warn("[setModelBlocksVisibility] No viewer IDs found, skipping visibility request", {
-        id,
-        block_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_blocks_schemas.visibility,
-      { id, block_ids: blocks_viewer_ids, visibility },
-      {
-        response_function: () => {
-          for (const block_id of block_ids) {
-            saveModelBlockVisibility(id, block_id, visibility);
-          }
-          console.log(
-            setModelBlocksVisibility.name,
-            { id },
-            { block_ids },
-            modelBlockVisibility(id, block_ids[0]),
-          );
+    return dataStore.getMeshComponentsViewerIds(id, block_ids).then((block_viewer_ids) => {
+      if (!block_viewer_ids || block_viewer_ids.length === 0) {
+        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
+          visibility,
+        });
+      }
+      return viewerStore.request(
+        model_blocks_schemas.visibility,
+        { id, block_ids: block_viewer_ids, visibility },
+        {
+          response_function: () =>
+            modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { visibility }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index c988c778..750d3a8f 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -13,41 +13,28 @@ export function useModelCornersColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
+
   function modelCornerColor(id, corner_id) {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
   }
-  function saveModelCornerColor(id, corner_id, color) {
-    modelCornersCommonStyle.modelCornerStyle(id, corner_id).color = color;
-  }
-  async function setModelCornersColor(id, corner_ids, color) {
+
+  function setModelCornersColor(id, corner_ids, color) {
     if (!corner_ids || corner_ids.length === 0) {
-      return;
-    }
-    const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, corner_ids);
-    if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
-      console.warn("[setModelCornersColor] No viewer IDs found, skipping color request", {
-        id,
-        corner_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_corners_schemas.color,
-      { id, block_ids: corner_viewer_ids, color },
-      {
-        response_function: () => {
-          for (const corner_id of corner_ids) {
-            saveModelCornerColor(id, corner_id, color);
-          }
-          console.log(
-            setModelCornersColor.name,
-            { id },
-            { corner_ids },
-            JSON.stringify(modelCornerColor(id, corner_ids[0])),
-          );
+    return dataStore.getMeshComponentsViewerIds(id, corner_ids).then((corner_viewer_ids) => {
+      if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
+        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color });
+      }
+      return viewerStore.request(
+        model_corners_schemas.color,
+        { id, block_ids: corner_viewer_ids, color },
+        {
+          response_function: () =>
+            modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index f5b20c63..f7b903b0 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -1,3 +1,4 @@
+import merge from "lodash/merge";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 
 export function useModelCornersCommonStyle() {
@@ -8,14 +9,23 @@ export function useModelCornersCommonStyle() {
   }
 
   function modelCornerStyle(id, corner_id) {
-    if (!modelCornersStyle(id)[corner_id]) {
-      modelCornersStyle(id)[corner_id] = {};
-    }
-    return modelCornersStyle(id)[corner_id];
+    const groupStyle = modelCornersStyle(id);
+    const individualStyle = dataStyleStateStore.getComponentStyle(id, corner_id);
+    return merge({}, groupStyle, individualStyle);
+  }
+
+  function mutateModelCornersStyle(id, corner_ids, values) {
+    return dataStyleStateStore.mutateComponentStyles(id, corner_ids, values);
+  }
+
+  function mutateModelCornerStyle(id, corner_id, values) {
+    return dataStyleStateStore.mutateComponentStyle(id, corner_id, values);
   }
 
   return {
     modelCornersStyle,
     modelCornerStyle,
+    mutateModelCornersStyle,
+    mutateModelCornerStyle,
   };
 }
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 10428e80..63405075 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -3,9 +3,8 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCornersColorStyle } from "./color";
 import { useModelCornersCommonStyle } from "./common";
 import { useModelCornersVisibilityStyle } from "./visibility";
-
 async function setModelCornersDefaultStyle(_id) {
-  // Placeholder for oxlint
+  // Placeholder
 }
 
 export function useModelCornersStyle() {
@@ -15,13 +14,48 @@ export function useModelCornersStyle() {
   const modelCornersColorStyle = useModelCornersColorStyle();
 
   async function applyModelCornersStyle(id) {
-    const style = modelCornersCommonStyle.modelCornersStyle(id);
     const corner_ids = await dataStore.getCornersGeodeIds(id);
-    console.log(applyModelCornersStyle.name, { id }, { corner_ids });
-    return Promise.all([
-      modelCornersVisibilityStyle.setModelCornersVisibility(id, corner_ids, style.visibility),
-      modelCornersColorStyle.setModelCornersColor(id, corner_ids, style.color),
-    ]);
+    if (corner_ids.length === 0) {
+      return;
+    }
+
+    // Group corners by their effective style to minimize RPC calls
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const corner_id of corner_ids) {
+      const style = modelCornersCommonStyle.modelCornerStyle(id, corner_id);
+
+      // Group by visibility
+      const vKey = String(style.visibility);
+      if (!visibilityGroups[vKey]) {
+        visibilityGroups[vKey] = [];
+      }
+      visibilityGroups[vKey].push(corner_id);
+
+      // Group by color
+      const cKey = JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = [];
+      }
+      colorGroups[cKey].push(corner_id);
+    }
+
+    const promises = [];
+
+    // Apply visibility groups
+    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
+      promises.push(
+        modelCornersVisibilityStyle.setModelCornersVisibility(id, ids, vValue === "true"),
+      );
+    }
+
+    // Apply color groups
+    for (const [cValue, ids] of Object.entries(colorGroups)) {
+      promises.push(modelCornersColorStyle.setModelCornersColor(id, ids, JSON.parse(cValue)));
+    }
+
+    return Promise.all(promises);
   }
 
   return {
diff --git a/internal/stores/data_style/model/corners/visibility.js b/internal/stores/data_style/model/corners/visibility.js
index d91c3662..5e764c13 100644
--- a/internal/stores/data_style/model/corners/visibility.js
+++ b/internal/stores/data_style/model/corners/visibility.js
@@ -13,41 +13,28 @@ export function useModelCornersVisibilityStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
+
   function modelCornerVisibility(id, corner_id) {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility;
   }
-  function saveModelCornerVisibility(id, corner_id, visibility) {
-    modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility = visibility;
-  }
-  async function setModelCornersVisibility(id, corner_ids, visibility) {
+
+  function setModelCornersVisibility(id, corner_ids, visibility) {
     if (!corner_ids || corner_ids.length === 0) {
-      return;
-    }
-    const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, corner_ids);
-    if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
-      console.warn("[setModelCornersVisibility] No viewer IDs found, skipping visibility request", {
-        id,
-        corner_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_corners_schemas.visibility,
-      { id, block_ids: corner_viewer_ids, visibility },
-      {
-        response_function: () => {
-          for (const corner_id of corner_ids) {
-            saveModelCornerVisibility(id, corner_id, visibility);
-          }
-          console.log(
-            setModelCornersVisibility.name,
-            { id },
-            { corner_ids },
-            modelCornerVisibility(id, corner_ids[0]),
-          );
+    return dataStore.getMeshComponentsViewerIds(id, corner_ids).then((corner_viewer_ids) => {
+      if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
+        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { visibility });
+      }
+      return viewerStore.request(
+        model_corners_schemas.visibility,
+        { id, block_ids: corner_viewer_ids, visibility },
+        {
+          response_function: () =>
+            modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { visibility }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/model/edges/common.js b/internal/stores/data_style/model/edges/common.js
index 98570bc4..c30c7f49 100644
--- a/internal/stores/data_style/model/edges/common.js
+++ b/internal/stores/data_style/model/edges/common.js
@@ -3,11 +3,18 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useModelEdgesCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateModelEdgesStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      edges: values,
+    });
+  }
+
   function modelEdgesStyle(id) {
-    return dataStyleStateStore.styles[id].edges;
+    return dataStyleStateStore.getStyle(id).edges;
   }
 
   return {
     modelEdgesStyle,
+    mutateModelEdgesStyle,
   };
 }
diff --git a/internal/stores/data_style/model/edges/index.js b/internal/stores/data_style/model/edges/index.js
index 7f59384e..c5611c6f 100644
--- a/internal/stores/data_style/model/edges/index.js
+++ b/internal/stores/data_style/model/edges/index.js
@@ -1,4 +1,3 @@
-// Local imports
 import { useModelEdgesCommonStyle } from "./common";
 import { useModelEdgesVisibilityStyle } from "./visibility";
 
@@ -7,10 +6,8 @@ export function useModelEdgesStyle() {
   const modelEdgesVisibilityStyle = useModelEdgesVisibilityStyle();
 
   function applyModelEdgesStyle(id) {
-    const style = modelEdgesCommonStyle.modelEdgesStyle(id);
-    return Promise.resolve([
-      modelEdgesVisibilityStyle.setModelEdgesVisibility(id, style.visibility),
-    ]);
+    const { visibility } = modelEdgesCommonStyle.modelEdgesStyle(id);
+    return modelEdgesVisibilityStyle.setModelEdgesVisibility(id, visibility);
   }
 
   return {
diff --git a/internal/stores/data_style/model/edges/visibility.js b/internal/stores/data_style/model/edges/visibility.js
index 9befed56..62ef70f3 100644
--- a/internal/stores/data_style/model/edges/visibility.js
+++ b/internal/stores/data_style/model/edges/visibility.js
@@ -1,7 +1,6 @@
 // Third party imports
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local imports
 import { useModelEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -21,16 +20,19 @@ export function useModelEdgesVisibilityStyle() {
       model_edges_schemas.visibility,
       { id, visibility },
       {
-        response_function: () => {
-          modelEdgesCommonStyle.modelEdgesStyle(id).visibility = visibility;
-          console.log(setModelEdgesVisibility.name, { id }, modelEdgesVisibility(id));
-        },
+        response_function: () => modelEdgesCommonStyle.mutateModelEdgesStyle(id, { visibility }),
       },
     );
   }
 
+  function applyModelEdgesStyle(id) {
+    const visibility = modelEdgesVisibility(id);
+    return Promise.resolve([setModelEdgesVisibility(id, visibility)]);
+  }
+
   return {
     modelEdgesVisibility,
     setModelEdgesVisibility,
+    applyModelEdgesStyle,
   };
 }
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 476cda74..63106a40 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -1,7 +1,5 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
+import { database } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -12,8 +10,8 @@ import { useModelLinesStyle } from "./lines";
 import { useModelPointsStyle } from "./points";
 import { useModelSurfacesStyle } from "./surfaces";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
 export function useModelStyle() {
@@ -31,158 +29,129 @@ export function useModelStyle() {
   function modelVisibility(id) {
     return dataStyleStateStore.getStyle(id).visibility;
   }
+
   function setModelVisibility(id, visibility) {
     return viewerStore.request(
       model_schemas.visibility,
       { id, visibility },
       {
-        response_function: () => {
-          dataStyleStateStore.getStyle(id).visibility = visibility;
-          hybridViewerStore.setVisibility(id, visibility);
-          console.log(setModelVisibility.name, { id }, modelVisibility(id));
+        response_function: async () => {
+          await hybridViewerStore.setVisibility(id, visibility);
+          await dataStyleStateStore.mutateStyle(id, { visibility });
+          return { id, visibility };
         },
       },
     );
   }
 
-  function visibleMeshComponents(id) {
-    const visible_mesh_components = ref([]);
-    const styles = dataStyleStateStore.styles[id];
-    if (!styles) {
-      return visible_mesh_components;
-    }
-
-    for (const [corner_id, style] of Object.entries(styles.corners || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(corner_id);
-      }
-    }
-
-    for (const [line_id, style] of Object.entries(styles.lines || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(line_id);
-      }
-    }
-
-    for (const [surface_id, style] of Object.entries(styles.surfaces || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(surface_id);
-      }
-    }
-
-    for (const [block_id, style] of Object.entries(styles.blocks || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(block_id);
-      }
-    }
-
-    return visible_mesh_components;
-  }
-
-  function modelMeshComponentVisibility(id, component_type, component_id) {
-    if (component_type === "Corner") {
-      return modelCornersStyleStore.modelCornerVisibility(id, component_id);
-    }
-    if (component_type === "Line") {
-      return modelLinesStyleStore.modelLineVisibility(id, component_id);
-    }
-    if (component_type === "Surface") {
-      return modelSurfacesStyleStore.modelSurfaceVisibility(id, component_id);
-    }
-    if (component_type === "Block") {
-      return modelBlocksStyleStore.modelBlockVisibility(id, component_id);
-    }
-    throw new Error(`Unknown model component_type: ${component_type}`);
-  }
-
-  function modelColor(id) {
-    return dataStyleStateStore.getStyle(id).color;
-  }
-  function setModelColor(id, color) {
-    return viewerStore.request(
-      model_schemas.color,
-      { id, color },
-      {
-        response_function: () => {
-          dataStyleStateStore.styles[id].color = color;
-          console.log(setModelColor.name, { id }, modelColor(id));
-        },
+  function visibleMeshComponents(id_ref) {
+    const selection = ref([]);
+    watch(
+      () => (isRef(id_ref) ? id_ref.value : id_ref),
+      (newId, oldId, onCleanup) => {
+        if (!newId) {
+          return;
+        }
+        const observable = liveQuery(async () => {
+          const components = await database.model_components.where("id").equals(newId).toArray();
+          if (components.length === 0) {
+            return [];
+          }
+
+          const all_styles = await database.model_component_datastyle
+            .where("id_model")
+            .equals(newId)
+            .toArray();
+          const styles = {};
+          for (const style of all_styles) {
+            styles[style.id_component] = style;
+          }
+
+          const current_selection = [];
+          const meshTypes = new Set(["Corner", "Line", "Surface", "Block"]);
+          const componentsByType = {};
+          for (const component of components) {
+            if (meshTypes.has(component.type)) {
+              if (!componentsByType[component.type]) {
+                componentsByType[component.type] = [];
+              }
+              componentsByType[component.type].push(component.geode_id);
+            }
+          }
+
+          for (const [type, geode_ids] of Object.entries(componentsByType)) {
+            let all_visible = true;
+            for (const gid of geode_ids) {
+              const is_visible = styles[gid] === undefined ? true : styles[gid].visibility;
+              if (is_visible) {
+                current_selection.push(gid);
+              } else {
+                all_visible = false;
+              }
+            }
+            if (all_visible) {
+              current_selection.push(type);
+            }
+          }
+          return current_selection;
+        });
+
+        const subscription = observable.subscribe({
+          next: (val) => {
+            selection.value = val;
+          },
+          error: (err) => console.error(err),
+        });
+        onCleanup(() => subscription.unsubscribe());
       },
+      { immediate: true },
     );
-  }
-
-  async function setModelMeshComponentsVisibility(id, component_geode_ids, visibility) {
-    const component_type = await dataStore.meshComponentType(id, component_geode_ids[0]);
-    if (component_type === "Corner") {
-      return modelCornersStyleStore.setModelCornersVisibility(id, component_geode_ids, visibility);
-    }
-    if (component_type === "Line") {
-      return modelLinesStyleStore.setModelLinesVisibility(id, component_geode_ids, visibility);
-    }
-    if (component_type === "Surface") {
-      return modelSurfacesStyleStore.setModelSurfacesVisibility(
-        id,
-        component_geode_ids,
-        visibility,
-      );
-    }
-    if (component_type === "Block") {
-      return modelBlocksStyleStore.setModelBlocksVisibility(id, component_geode_ids, visibility);
-    }
-    throw new Error(`Unknown model component_type: ${component_type}`);
+    return selection;
   }
 
   function applyModelStyle(id) {
     const style = dataStyleStateStore.getStyle(id);
-    const promise_array = [];
-    for (const [key, value] of Object.entries(style)) {
-      if (key === "visibility") {
-        promise_array.push(setModelVisibility(id, value));
-      } else if (key === "corners") {
-        promise_array.push(modelCornersStyleStore.applyModelCornersStyle(id));
-      } else if (key === "lines") {
-        promise_array.push(modelLinesStyleStore.applyModelLinesStyle(id));
-      } else if (key === "surfaces") {
-        promise_array.push(modelSurfacesStyleStore.applyModelSurfacesStyle(id));
-      } else if (key === "blocks") {
-        promise_array.push(modelBlocksStyleStore.applyModelBlocksStyle(id));
-      } else if (key === "points") {
-        promise_array.push(modelPointsStyleStore.applyModelPointsStyle(id));
-      } else if (key === "edges") {
-        promise_array.push(modelEdgesStyleStore.applyModelEdgesStyle(id));
-      } else {
-        throw new Error(`Unknown model key: ${key}`);
-      }
-    }
-    return Promise.all(promise_array);
+    const handlers = {
+      visibility: () => setModelVisibility(id, style.visibility),
+      corners: () => modelCornersStyleStore.applyModelCornersStyle(id),
+      lines: () => modelLinesStyleStore.applyModelLinesStyle(id),
+      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(id),
+      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(id),
+      points: () => modelPointsStyleStore.applyModelPointsStyle(id),
+      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(id),
+    };
+
+    const promises = Object.keys(style)
+      .filter((key) => handlers[key])
+      .map((key) => handlers[key]());
+
+    return Promise.all(promises);
   }
 
-  async function setModelMeshComponentsDefaultStyle(id) {
-    const item = await dataStore.item(id);
-    const { mesh_components } = item;
-    const promise_array = [];
-    if ("Corner" in mesh_components) {
-      promise_array.push(modelCornersStyleStore.setModelCornersDefaultStyle(id));
-    }
-    if ("Line" in mesh_components) {
-      promise_array.push(modelLinesStyleStore.setModelLinesDefaultStyle(id));
-    }
-    if ("Surface" in mesh_components) {
-      promise_array.push(modelSurfacesStyleStore.setModelSurfacesDefaultStyle(id));
-    }
-    if ("Block" in mesh_components) {
-      promise_array.push(modelBlocksStyleStore.setModelBlocksDefaultStyle(id));
-    }
-    return promise_array;
+  function setModelMeshComponentsDefaultStyle(id) {
+    return dataStore.item(id).then((item) => {
+      if (!item) {
+        return [];
+      }
+      const { mesh_components } = item;
+      const handlers = {
+        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(id),
+        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(id),
+        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(id),
+        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(id),
+      };
+      return Promise.all(
+        Object.keys(mesh_components)
+          .filter((k) => handlers[k])
+          .map((k) => handlers[k]()),
+      );
+    });
   }
 
   return {
     modelVisibility,
     visibleMeshComponents,
-    modelMeshComponentVisibility,
     setModelVisibility,
-    setModelColor,
-    setModelMeshComponentsVisibility,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
     ...useModelBlocksStyle(),
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 7f3e6f95..88cd9c4b 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -13,41 +13,32 @@ export function useModelLinesColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+
   function modelLineColor(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
   }
-  function saveModelLineColor(id, line_id, color) {
-    modelLinesCommonStyle.modelLineStyle(id, line_id).color = color;
-  }
-  async function setModelLinesColor(id, line_ids, color) {
+
+  function setModelLinesColor(id, line_ids, color) {
     if (!line_ids || line_ids.length === 0) {
-      return;
-    }
-    const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, line_ids);
-    if (!line_viewer_ids || line_viewer_ids.length === 0) {
-      console.warn("[setModelLinesColor] No viewer IDs found, skipping color request", {
-        id,
-        line_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_lines_schemas.color,
-      { id, block_ids: line_viewer_ids, color },
-      {
-        response_function: () => {
-          for (const line_id of line_ids) {
-            saveModelLineColor(id, line_id, color);
-          }
-          console.log(
-            setModelLinesColor.name,
-            { id },
-            { line_ids },
-            JSON.stringify(modelLineColor(id, line_ids[0])),
-          );
+    return dataStore.getMeshComponentsViewerIds(id, line_ids).then((line_viewer_ids) => {
+      if (!line_viewer_ids || line_viewer_ids.length === 0) {
+        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
+          color,
+        });
+      }
+      return viewerStore.request(
+        model_lines_schemas.color,
+        { id, block_ids: line_viewer_ids, color },
+        {
+          response_function: () =>
+            modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
+              color,
+            }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js
index ec9564b9..fb944af7 100644
--- a/internal/stores/data_style/model/lines/common.js
+++ b/internal/stores/data_style/model/lines/common.js
@@ -1,3 +1,4 @@
+import merge from "lodash/merge";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 
 export function useModelLinesCommonStyle() {
@@ -8,14 +9,23 @@ export function useModelLinesCommonStyle() {
   }
 
   function modelLineStyle(id, line_id) {
-    if (!modelLinesStyle(id)[line_id]) {
-      modelLinesStyle(id)[line_id] = {};
-    }
-    return modelLinesStyle(id)[line_id];
+    const groupStyle = modelLinesStyle(id);
+    const individualStyle = dataStyleStateStore.getComponentStyle(id, line_id);
+    return merge({}, groupStyle, individualStyle);
+  }
+
+  function mutateModelLinesStyle(id, line_ids, values) {
+    return dataStyleStateStore.mutateComponentStyles(id, line_ids, values);
+  }
+
+  function mutateModelLineStyle(id, line_id, values) {
+    return dataStyleStateStore.mutateComponentStyle(id, line_id, values);
   }
 
   return {
     modelLinesStyle,
     modelLineStyle,
+    mutateModelLinesStyle,
+    mutateModelLineStyle,
   };
 }
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index dfd97b60..d6913bb6 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -5,7 +5,7 @@ import { useModelLinesCommonStyle } from "./common";
 import { useModelLinesVisibilityStyle } from "./visibility";
 
 async function setModelLinesDefaultStyle(_id) {
-  // Placeholder for oxlint
+  // Placeholder
 }
 
 export function useModelLinesStyle() {
@@ -15,12 +15,41 @@ export function useModelLinesStyle() {
   const modelLinesColorStyle = useModelLinesColorStyle();
 
   async function applyModelLinesStyle(id) {
-    const style = modelLinesCommonStyle.modelLinesStyle(id);
     const line_ids = await dataStore.getLinesGeodeIds(id);
-    return Promise.all([
-      modelLinesVisibilityStyle.setModelLinesVisibility(id, line_ids, style.visibility),
-      modelLinesColorStyle.setModelLinesColor(id, line_ids, style.color),
-    ]);
+    if (line_ids.length === 0) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const line_id of line_ids) {
+      const style = modelLinesCommonStyle.modelLineStyle(id, line_id);
+
+      const vKey = String(style.visibility);
+      if (!visibilityGroups[vKey]) {
+        visibilityGroups[vKey] = [];
+      }
+      visibilityGroups[vKey].push(line_id);
+
+      const cKey = JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = [];
+      }
+      colorGroups[cKey].push(line_id);
+    }
+
+    const promises = [];
+
+    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
+      promises.push(modelLinesVisibilityStyle.setModelLinesVisibility(id, ids, vValue === "true"));
+    }
+
+    for (const [cValue, ids] of Object.entries(colorGroups)) {
+      promises.push(modelLinesColorStyle.setModelLinesColor(id, ids, JSON.parse(cValue)));
+    }
+
+    return Promise.all(promises);
   }
 
   return {
diff --git a/internal/stores/data_style/model/lines/visibility.js b/internal/stores/data_style/model/lines/visibility.js
index 4edbf7e3..12cbdbb7 100644
--- a/internal/stores/data_style/model/lines/visibility.js
+++ b/internal/stores/data_style/model/lines/visibility.js
@@ -16,38 +16,28 @@ export function useModelLinesVisibilityStyle() {
   function modelLineVisibility(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
   }
-  function saveModelLineVisibility(id, line_id, visibility) {
-    modelLinesCommonStyle.modelLineStyle(id, line_id).visibility = visibility;
-  }
-  async function setModelLinesVisibility(id, line_ids, visibility) {
+  function setModelLinesVisibility(id, line_ids, visibility) {
     if (!line_ids || line_ids.length === 0) {
-      return;
-    }
-    const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, line_ids);
-    if (!line_viewer_ids || line_viewer_ids.length === 0) {
-      console.warn("[setModelLinesVisibility] No viewer IDs found, skipping visibility request", {
-        id,
-        line_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_lines_schemas.visibility,
-      { id, block_ids: line_viewer_ids, visibility },
-      {
-        response_function: () => {
-          for (const line_id of line_ids) {
-            saveModelLineVisibility(id, line_id, visibility);
-          }
-          console.log(
-            setModelLinesVisibility.name,
-            { id },
-            { line_ids },
-            modelLineVisibility(id, line_ids[0]),
-          );
+
+    return dataStore.getMeshComponentsViewerIds(id, line_ids).then((line_viewer_ids) => {
+      if (!line_viewer_ids || line_viewer_ids.length === 0) {
+        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
+          visibility,
+        });
+      }
+      return viewerStore.request(
+        model_lines_schemas.visibility,
+        { id, block_ids: line_viewer_ids, visibility },
+        {
+          response_function: () =>
+            modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
+              visibility,
+            }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/model/points/common.js b/internal/stores/data_style/model/points/common.js
index 22e168c6..92efbe69 100644
--- a/internal/stores/data_style/model/points/common.js
+++ b/internal/stores/data_style/model/points/common.js
@@ -3,11 +3,18 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useModelPointsCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateModelPointsStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      points: values,
+    });
+  }
+
   function modelPointsStyle(id) {
     return dataStyleStateStore.getStyle(id).points;
   }
 
   return {
     modelPointsStyle,
+    mutateModelPointsStyle,
   };
 }
diff --git a/internal/stores/data_style/model/points/size.js b/internal/stores/data_style/model/points/size.js
index 14087d51..f1ffcb12 100644
--- a/internal/stores/data_style/model/points/size.js
+++ b/internal/stores/data_style/model/points/size.js
@@ -21,10 +21,7 @@ export function useModelPointsSizeStyle() {
       model_points_schemas.size,
       { id, size },
       {
-        response_function: () => {
-          modelPointsCommonStyle.modelPointsStyle(id).size = size;
-          console.log(setModelPointsSize.name, { id }, modelPointsSize(id));
-        },
+        response_function: () => modelPointsCommonStyle.mutateModelPointsStyle(id, { size }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/points/visibility.js b/internal/stores/data_style/model/points/visibility.js
index 98a48048..e3bc717f 100644
--- a/internal/stores/data_style/model/points/visibility.js
+++ b/internal/stores/data_style/model/points/visibility.js
@@ -21,10 +21,10 @@ export function useModelPointsVisibilityStyle() {
       model_points_schemas.visibility,
       { id, visibility },
       {
-        response_function: () => {
-          modelPointsCommonStyle.modelPointsStyle(id).visibility = visibility;
-          console.log(setModelPointsVisibility.name, { id }, modelPointsVisibility(id));
-        },
+        response_function: () =>
+          modelPointsCommonStyle.mutateModelPointsStyle(id, {
+            visibility,
+          }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index d638c9f3..449ac106 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -13,41 +13,28 @@ export function useModelSurfacesColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+
   function modelSurfaceColor(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
   }
-  function saveModelSurfaceColor(id, surface_id, color) {
-    modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color = color;
-  }
-  async function setModelSurfacesColor(id, surface_ids, color) {
+
+  function setModelSurfacesColor(id, surface_ids, color) {
     if (!surface_ids || surface_ids.length === 0) {
-      return;
-    }
-    const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, surface_ids);
-    if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
-      console.warn("[setModelSurfacesColor] No viewer IDs found, skipping color request", {
-        id,
-        surface_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_surfaces_schemas.color,
-      { id, block_ids: surface_viewer_ids, color },
-      {
-        response_function: () => {
-          for (const surface_id of surface_ids) {
-            saveModelSurfaceColor(id, surface_id, color);
-          }
-          console.log(
-            setModelSurfacesColor.name,
-            { id },
-            { surface_ids },
-            JSON.stringify(modelSurfaceColor(id, surface_ids[0])),
-          );
+    return dataStore.getMeshComponentsViewerIds(id, surface_ids).then((surface_viewer_ids) => {
+      if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
+        return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color });
+      }
+      return viewerStore.request(
+        model_surfaces_schemas.color,
+        { id, block_ids: surface_viewer_ids, color },
+        {
+          response_function: () =>
+            modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index ff2627c9..a0bcc9dd 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -1,3 +1,4 @@
+import merge from "lodash/merge";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 
 export function useModelSurfacesCommonStyle() {
@@ -8,14 +9,23 @@ export function useModelSurfacesCommonStyle() {
   }
 
   function modelSurfaceStyle(id, surface_id) {
-    if (!modelSurfacesStyle(id)[surface_id]) {
-      modelSurfacesStyle(id)[surface_id] = {};
-    }
-    return modelSurfacesStyle(id)[surface_id];
+    const groupStyle = modelSurfacesStyle(id);
+    const individualStyle = dataStyleStateStore.getComponentStyle(id, surface_id);
+    return merge({}, groupStyle, individualStyle);
+  }
+
+  function mutateModelSurfacesStyle(id, surface_ids, values) {
+    return dataStyleStateStore.mutateComponentStyles(id, surface_ids, values);
+  }
+
+  function mutateModelSurfaceStyle(id, surface_id, values) {
+    return dataStyleStateStore.mutateComponentStyle(id, surface_id, values);
   }
 
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,
+    mutateModelSurfacesStyle,
+    mutateModelSurfaceStyle,
   };
 }
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index aefd5d0c..42014b67 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -5,7 +5,7 @@ import { useModelSurfacesCommonStyle } from "./common";
 import { useModelSurfacesVisibilityStyle } from "./visibility";
 
 async function setModelSurfacesDefaultStyle(_id) {
-  // Placeholder for oxlint
+  // Placeholder
 }
 
 export function useModelSurfacesStyle() {
@@ -15,12 +15,43 @@ export function useModelSurfacesStyle() {
   const modelSurfacesColorStyle = useModelSurfacesColorStyle();
 
   async function applyModelSurfacesStyle(id) {
-    const style = modelSurfacesCommonStyle.modelSurfacesStyle(id);
     const surface_ids = await dataStore.getSurfacesGeodeIds(id);
-    return Promise.all([
-      modelSurfacesVisibilityStyle.setModelSurfacesVisibility(id, surface_ids, style.visibility),
-      modelSurfacesColorStyle.setModelSurfacesColor(id, surface_ids, style.color),
-    ]);
+    if (surface_ids.length === 0) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const surface_id of surface_ids) {
+      const style = modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id);
+
+      const vKey = String(style.visibility);
+      if (!visibilityGroups[vKey]) {
+        visibilityGroups[vKey] = [];
+      }
+      visibilityGroups[vKey].push(surface_id);
+
+      const cKey = JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = [];
+      }
+      colorGroups[cKey].push(surface_id);
+    }
+
+    const promises = [];
+
+    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
+      promises.push(
+        modelSurfacesVisibilityStyle.setModelSurfacesVisibility(id, ids, vValue === "true"),
+      );
+    }
+
+    for (const [cValue, ids] of Object.entries(colorGroups)) {
+      promises.push(modelSurfacesColorStyle.setModelSurfacesColor(id, ids, JSON.parse(cValue)));
+    }
+
+    return Promise.all(promises);
   }
 
   return {
diff --git a/internal/stores/data_style/model/surfaces/visibility.js b/internal/stores/data_style/model/surfaces/visibility.js
index 79c7b9e2..f1720a9b 100644
--- a/internal/stores/data_style/model/surfaces/visibility.js
+++ b/internal/stores/data_style/model/surfaces/visibility.js
@@ -16,38 +16,26 @@ export function useModelSurfacesVisibilityStyle() {
   function modelSurfaceVisibility(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
   }
-  function saveModelSurfaceVisibility(id, surface_id, visibility) {
-    modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility = visibility;
-  }
-  async function setModelSurfacesVisibility(id, surface_ids, visibility) {
+  function setModelSurfacesVisibility(id, surface_ids, visibility) {
     if (!surface_ids || surface_ids.length === 0) {
-      return;
-    }
-    const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, surface_ids);
-    if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
-      console.warn(
-        "[setModelSurfacesVisibility] No viewer IDs found, skipping visibility request",
-        { id, surface_ids },
-      );
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_surfaces_schemas.visibility,
-      { id, block_ids: surface_viewer_ids, visibility },
-      {
-        response_function: () => {
-          for (const surface_id of surface_ids) {
-            saveModelSurfaceVisibility(id, surface_id, visibility);
-          }
-          console.log(
-            setModelSurfacesVisibility.name,
-            { id },
-            { surface_ids },
-            modelSurfaceVisibility(id, surface_ids[0]),
-          );
+
+    return dataStore.getMeshComponentsViewerIds(id, surface_ids).then((surface_viewer_ids) => {
+      if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
+        return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { visibility });
+      }
+      return viewerStore.request(
+        model_surfaces_schemas.visibility,
+        { id, block_ids: surface_viewer_ids, visibility },
+        {
+          response_function: () =>
+            modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
+              visibility,
+            }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index ce70b902..516ab8ab 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -1,15 +1,31 @@
+import { database } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
+import merge from "lodash/merge";
+import { useObservable } from "@vueuse/rxjs";
+
 export const useDataStyleStateStore = defineStore("dataStyleState", () => {
-  const styles = reactive({});
+  const styles = useObservable(
+    liveQuery(async () => {
+      const allStyles = await database.data_style.toArray();
+      const accumulator = {};
+      for (const style of allStyles) {
+        accumulator[style.id] = style;
+      }
+      return accumulator;
+    }),
+    { initialValue: {} },
+  );
 
   const objectVisibility = computed(() => (id) => {
-    if (styles[id]) {
-      return styles[id].visibility;
+    if (styles.value[id]) {
+      return styles.value[id].visibility;
     }
     return false;
   });
+
   const selectedObjects = computed(() => {
     const selection = [];
-    for (const [id, value] of Object.entries(styles)) {
+    for (const [id, value] of Object.entries(styles.value)) {
       if (value.visibility === true) {
         selection.push(id);
       }
@@ -17,14 +33,119 @@ export const useDataStyleStateStore = defineStore("dataStyleState", () => {
     return selection;
   });
 
+  const componentStyles = useObservable(
+    liveQuery(async () => {
+      const all = await database.model_component_datastyle.toArray();
+      const accumulator = {};
+      for (const style of all) {
+        const key = `${style.id_model}_${style.id_component}`;
+        accumulator[key] = style;
+      }
+      return accumulator;
+    }),
+    { initialValue: {} },
+  );
+
   function getStyle(id) {
-    return styles[id];
+    const default_style = {
+      visibility: true,
+      color: { r: 255, g: 255, b: 255 },
+      corners: { visibility: true, color: { r: 20, g: 20, b: 20 } },
+      lines: { visibility: true, color: { r: 20, g: 20, b: 20 } },
+      surfaces: { visibility: true, color: { r: 255, g: 255, b: 255 } },
+      blocks: { visibility: true, color: { r: 255, g: 255, b: 255 } },
+      points: { visibility: true, size: 10 },
+      edges: { visibility: true },
+      cells: {
+        visibility: true,
+        coloring: {
+          active: "color",
+          color: { r: 255, g: 255, b: 255 },
+          cell: { name: "", storedConfigs: {} },
+          vertex: { name: "", storedConfigs: {} },
+          textures: [],
+        },
+      },
+      polygons: {
+        visibility: true,
+        coloring: {
+          active: "color",
+          color: { r: 255, g: 255, b: 255 },
+          polygon: { name: "", storedConfigs: {} },
+          vertex: { name: "", storedConfigs: {} },
+          textures: [],
+        },
+      },
+      polyhedra: {
+        visibility: true,
+        coloring: {
+          active: "color",
+          color: { r: 255, g: 255, b: 255 },
+          polyhedron: { name: "", storedConfigs: {} },
+          vertex: { name: "", storedConfigs: {} },
+        },
+      },
+    };
+    if (styles.value[id]) {
+      return { ...default_style, ...toRaw(styles.value[id]) };
+    }
+    return default_style;
+  }
+
+  function mutateStyle(id, values) {
+    const style = getStyle(id);
+    merge(style, values);
+    return database.data_style.put(structuredClone({ id, ...toRaw(style) }));
+  }
+
+  function getComponentStyle(id_model, id_component) {
+    const key = `${id_model}_${id_component}`;
+    return componentStyles.value[key] || {};
+  }
+
+  function mutateComponentStyle(id_model, id_component, values) {
+    return database.model_component_datastyle.get([id_model, id_component]).then((style) => {
+      const component_style = style || { id_model, id_component };
+      merge(component_style, values);
+      return database.model_component_datastyle.put(structuredClone(toRaw(component_style)));
+    });
+  }
+
+  function mutateComponentStyles(id_model, id_components, values) {
+    return database.model_component_datastyle
+      .where("id_model")
+      .equals(id_model)
+      .toArray()
+      .then((all_styles) => {
+        const style_map = {};
+        for (const style of all_styles) {
+          style_map[style.id_component] = style;
+        }
+
+        const updates = id_components.map((id_component) => {
+          const style = style_map[id_component] || { id_model, id_component };
+          merge(style, values);
+          return toRaw(style);
+        });
+
+        return database.model_component_datastyle.bulkPut(structuredClone(updates));
+      });
+  }
+
+  function clear() {
+    return Promise.all([database.data_style.clear(), database.model_component_datastyle.clear()]);
   }
 
   return {
     getStyle,
+    mutateStyle,
+    getComponentStyle,
+    mutateComponentStyle,
+    mutateComponentStyles,
     styles,
+    componentStyles,
     objectVisibility,
     selectedObjects,
+    clear,
   };
 });
diff --git a/internal/utils/viewer_call.js b/internal/utils/viewer_call.js
index b089c787..179cee2d 100644
--- a/internal/utils/viewer_call.js
+++ b/internal/utils/viewer_call.js
@@ -32,7 +32,7 @@ export async function viewer_call(
     try {
       const value = await client.getConnection().getSession().call(schema.$id, [params]);
       if (response_function) {
-        response_function(value);
+        await response_function(value);
       }
       return value;
     } catch (error) {
diff --git a/tests/integration/microservices/back/requirements.txt b/tests/integration/microservices/back/requirements.txt
new file mode 100644
index 00000000..bd3a3ef5
--- /dev/null
+++ b/tests/integration/microservices/back/requirements.txt
@@ -0,0 +1,7 @@
+#
+# This file is autogenerated by pip-compile with Python 3.12
+# by the following command:
+#
+#    pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in
+#
+
diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt
new file mode 100644
index 00000000..4d097394
--- /dev/null
+++ b/tests/integration/microservices/viewer/requirements.txt
@@ -0,0 +1,7 @@
+#
+# This file is autogenerated by pip-compile with Python 3.12
+# by the following command:
+#
+#    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
+#
+
diff --git a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
index 961f47ed..881d651c 100644
--- a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
@@ -10,7 +10,7 @@ import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // Local constants
-const INTERVAL_TIMEOUT = 20_000;
+const INTERVAL_TIMEOUT = 60_000;
 const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells;
 const file_name = "test.og_rgd2d";
 const geode_object = "RegularGrid2D";
@@ -21,6 +21,8 @@ let id = "",
   projectFolderPath = "";
 
 beforeEach(async () => {
+  id = "";
+  projectFolderPath = "";
   ({ id, projectFolderPath } = await setupIntegrationTests(file_name, geode_object));
 }, INTERVAL_TIMEOUT);
 
diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index 45ddf992..223f6dd0 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -15,6 +15,14 @@ const INTERVAL_TIMEOUT = 20_000;
 const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks;
 const file_name = "test.og_brep";
 const geode_object = "BRep";
+const SLEEP_MS = 200;
+
+function sleep(milliseconds) {
+  // oxlint-disable-next-line promise/avoid-new
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
 
 let id = "",
   projectFolderPath = "";
@@ -42,6 +50,7 @@ describe("Model blocks", () => {
       const result = dataStyleStore.setModelBlocksVisibility(id, block_ids, visibility);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_blocks_schemas.visibility,
         { id, block_ids: block_viewer_ids, visibility },
@@ -66,6 +75,7 @@ describe("Model blocks", () => {
       const color = { r: 255, g: 0, b: 0 };
       const spy = vi.spyOn(viewerStore, "request");
       await dataStyleStore.setModelBlocksColor(id, block_ids, color);
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_blocks_schemas.color,
         { id, block_ids: block_viewer_ids, color },
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index 692bc321..a357131f 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -15,6 +15,14 @@ const INTERVAL_TIMEOUT = 20_000;
 const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners;
 const file_name = "test.og_brep";
 const geode_object = "BRep";
+const SLEEP_MS = 200;
+
+function sleep(milliseconds) {
+  // oxlint-disable-next-line promise/avoid-new
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
 
 let id = "",
   projectFolderPath = "";
@@ -42,6 +50,7 @@ describe("Model corners", () => {
       const result = dataStyleStore.setModelCornersVisibility(id, corner_ids, visibility);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_corners_schemas.visibility,
         { id, block_ids: corner_viewer_ids, visibility },
@@ -69,6 +78,7 @@ describe("Model corners", () => {
       const result = dataStyleStore.setModelCornersColor(id, corner_ids, color);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_corners_schemas.color,
         { id, block_ids: corner_viewer_ids, color },
diff --git a/tests/integration/stores/data_style/model/edges.nuxt.test.js b/tests/integration/stores/data_style/model/edges.nuxt.test.js
index ee103d96..d0a53f58 100644
--- a/tests/integration/stores/data_style/model/edges.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/edges.nuxt.test.js
@@ -14,6 +14,14 @@ const INTERVAL_TIMEOUT = 25_000;
 const model_edges_schemas = viewer_schemas.opengeodeweb_viewer.model.edges;
 const file_name = "test.og_brep";
 const geode_object = "BRep";
+const SLEEP_MS = 200;
+
+function sleep(milliseconds) {
+  // oxlint-disable-next-line promise/avoid-new
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
 
 let id = "",
   projectFolderPath = "";
@@ -38,6 +46,7 @@ describe("Model edges", () => {
       const result = dataStyleStore.setModelEdgesVisibility(id, visibility);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_edges_schemas.visibility,
         { id, visibility },
diff --git a/tests/integration/stores/data_style/model/index.nuxt.test.js b/tests/integration/stores/data_style/model/index.nuxt.test.js
index 3616b1e0..a2119145 100644
--- a/tests/integration/stores/data_style/model/index.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/index.nuxt.test.js
@@ -14,6 +14,14 @@ const INTERVAL_TIMEOUT = 20_000;
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 const file_name = "test.og_brep";
 const geode_object = "BRep";
+const SLEEP_MS = 200;
+
+function sleep(milliseconds) {
+  // oxlint-disable-next-line promise/avoid-new
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
 
 let id = "",
   projectFolderPath = "";
@@ -38,6 +46,7 @@ describe("Model", () => {
       const result = dataStyleStore.setModelVisibility(id, visibility);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_schemas.visibility,
         { id, visibility },
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index f49e480a..b59d00c7 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -15,6 +15,14 @@ const INTERVAL_TIMEOUT = 20_000;
 const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines;
 const file_name = "test.og_brep";
 const geode_object = "BRep";
+const SLEEP_MS = 200;
+
+function sleep(milliseconds) {
+  // oxlint-disable-next-line promise/avoid-new
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
 
 let id = "",
   projectFolderPath = "";
@@ -42,6 +50,7 @@ describe("Model lines", () => {
       const result = dataStyleStore.setModelLinesVisibility(id, line_ids, visibility);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_lines_schemas.visibility,
         { id, block_ids: lines_viewer_ids, visibility },
@@ -69,6 +78,7 @@ describe("Model lines", () => {
       const result = dataStyleStore.setModelLinesColor(id, line_ids, color);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_lines_schemas.color,
         { id, block_ids: lines_viewer_ids, color },
diff --git a/tests/integration/stores/data_style/model/points.nuxt.test.js b/tests/integration/stores/data_style/model/points.nuxt.test.js
index ed0c0eb0..3f11fc0e 100644
--- a/tests/integration/stores/data_style/model/points.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/points.nuxt.test.js
@@ -14,6 +14,14 @@ const INTERVAL_TIMEOUT = 20_000;
 const model_points_schemas = viewer_schemas.opengeodeweb_viewer.model.points;
 const file_name = "test.og_brep";
 const geode_object = "BRep";
+const SLEEP_MS = 200;
+
+function sleep(milliseconds) {
+  // oxlint-disable-next-line promise/avoid-new
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
 
 let id = "",
   projectFolderPath = "";
@@ -38,6 +46,7 @@ describe("Model points", () => {
       const result = dataStyleStore.setModelPointsVisibility(id, visibility);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_points_schemas.visibility,
         { id, visibility },
@@ -60,6 +69,7 @@ describe("Model points", () => {
       const result = dataStyleStore.setModelPointsSize(id, size);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_points_schemas.size,
         { id, size },
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index c301f5c5..e6fd8f32 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -15,6 +15,14 @@ const INTERVAL_TIMEOUT = 20_000;
 const model_surfaces_schemas = viewer_schemas.opengeodeweb_viewer.model.surfaces;
 const file_name = "test.og_brep";
 const geode_object = "BRep";
+const SLEEP_MS = 200;
+
+function sleep(milliseconds) {
+  // oxlint-disable-next-line promise/avoid-new
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds);
+  });
+}
 
 let id = "",
   projectFolderPath = "";
@@ -41,6 +49,7 @@ describe("model surfaces", () => {
       const result = dataStyleStore.setModelSurfacesVisibility(id, surface_ids, visibility);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_surfaces_schemas.visibility,
         { id, block_ids: surface_viewer_ids, visibility },
@@ -68,6 +77,7 @@ describe("model surfaces", () => {
       const result = dataStyleStore.setModelSurfacesColor(id, surface_ids, color);
       expect(result).toBeInstanceOf(Promise);
       await result;
+      await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_surfaces_schemas.color,
         { id, block_ids: surface_viewer_ids, color },
diff --git a/tests/unit/plugins/project_load.nuxt.test.js b/tests/unit/plugins/project_load.nuxt.test.js
index af4380e6..835ac700 100644
--- a/tests/unit/plugins/project_load.nuxt.test.js
+++ b/tests/unit/plugins/project_load.nuxt.test.js
@@ -43,16 +43,17 @@ describe("Project import", () => {
       dataStyle: useDataStyleStore(),
       hybrid: useHybridViewerStore(),
     };
-    const storesArray = Object.values(stores);
-    for (const store of storesArray.slice(STORES_SLICE_START)) {
-      stores.app.registerStore(store);
-    }
 
     vi.spyOn(stores.dataBase, "importStores").mockImplementation(async (snapshot) => {
       const items = snapshot?.items || [];
       await Promise.all(items.map((item) => database.data.put(item)));
     });
 
+    const storesArray = Object.values(stores);
+    for (const store of storesArray.slice(STORES_SLICE_START)) {
+      stores.app.registerStore(store);
+    }
+
     const snapshot = {
       data: {
         items: [
@@ -77,7 +78,10 @@ describe("Project import", () => {
         isTreeCollection: false,
         selectedTree: undefined,
       },
-      dataStyle: { styles: { abc123: { some: "style" } } },
+      dataStyle: {
+        styles: { abc123: { some: "style" } },
+        componentStyles: {},
+      },
       hybridViewer: { zScale: Z_SCALE },
     };
 
@@ -86,6 +90,9 @@ describe("Project import", () => {
     const item = await database.data.get("abc123");
     expect(item).toBeDefined();
     expect(item.id).toBe("abc123");
-    expect(stores.dataStyle.styles.abc123).toBeDefined();
+
+    const style = await database.data_style.get("abc123");
+    expect(style).toBeDefined();
+    expect(style.id).toBe("abc123");
   });
 });