diff --git a/app/components/Step.vue b/app/components/Step.vue
index e71ebccc..8b5b04c6 100644
--- a/app/components/Step.vue
+++ b/app/components/Step.vue
@@ -56,7 +56,7 @@
         color="transparent"
         class="d-flex flex-column justify-center ps-2"
       >
-        <v-text
+        <p
           tag="h3"
           class="text-subtitle-1 font-weight-bold mb-0 transition-swing"
           :class="
@@ -66,7 +66,7 @@
           "
         >
           {{ steps[step_index].step_title }}
-        </v-text>
+        </p>
 
         <v-sheet
           v-if="sortedChips.length && current_step_index >= step_index"
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index c82938b1..d5a815a9 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -18,48 +18,88 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshEdgesVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.meshEdgesWidth(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesWidth(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesWidth(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshEdgesColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshEdgesVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const edge_attribute = computed({
-    get: () => dataStyleStore.meshEdgesEdgeAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesEdgeAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshEdgesVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -92,8 +132,12 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute="vertex_attribute"
-              v-model:edge_attribute="edge_attribute"
+              v-model:vertex_attribute_name="vertex_attribute_name"
+              v-model:vertex_attribute_range="vertex_attribute_range"
+              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+              v-model:edge_attribute_name="edge_attribute_name"
+              v-model:edge_attribute_range="edge_attribute_range"
+              v-model:edge_attribute_color_map="edge_attribute_color_map"
             />
           </v-col>
         </v-row>
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index 0644b0d1..cf5925e3 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -19,43 +19,86 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshCellsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshCellsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshCellsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const textures = computed({
     get: () => dataStyleStore.meshCellsTextures(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsTextures(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsTextures(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshCellsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVertexAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshCellsVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const cell_attribute = computed({
-    get: () => dataStyleStore.meshCellsCellAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshCellsCellAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshCellsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsCellAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshCellsCellAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsCellAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshCellsCellAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshCellsCellAttributeColorMap(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
@@ -75,8 +118,12 @@
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:cell_attribute="cell_attribute"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:cell_attribute_name="cell_attribute_name"
+          v-model:cell_attribute_range="cell_attribute_range"
+          v-model:cell_attribute_color_map="cell_attribute_color_map"
         />
       </template>
     </template>
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index 02fe857e..157d9e89 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -18,36 +18,29 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshEdgesVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.meshEdgesWidth(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesWidth(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesWidth(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshEdgesColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesColor(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshEdgesColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 7f7c2810..6a25fb09 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -18,29 +18,29 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPointsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.meshPointsSize(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsSize(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsSize(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPointsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPointsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
@@ -78,7 +78,6 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute="vertex_attribute"
             />
           </v-col>
         </v-row>
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
index 7eb90309..13d25933 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -20,29 +20,29 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolygonsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolygonsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const textures = computed({
     get: () => dataStyleStore.meshPolygonsTextures(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index 5e570ff5..a5cbdad1 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -19,22 +19,22 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolyhedraColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
diff --git a/app/components/Viewer/Generic/Model/EdgesOptions.vue b/app/components/Viewer/Generic/Model/EdgesOptions.vue
index 5e1034f0..24fa003a 100644
--- a/app/components/Viewer/Generic/Model/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Model/EdgesOptions.vue
@@ -17,8 +17,8 @@
 
   const visibility = computed({
     get: () => dataStyleStore.modelEdgesVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setModelEdgesVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setModelEdgesVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
diff --git a/app/components/Viewer/Generic/Model/PointsOptions.vue b/app/components/Viewer/Generic/Model/PointsOptions.vue
index 812e192d..5e6b1789 100644
--- a/app/components/Viewer/Generic/Model/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Model/PointsOptions.vue
@@ -17,15 +17,15 @@
 
   const visibility = computed({
     get: () => dataStyleStore.modelPointsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setModelPointsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setModelPointsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.modelPointsSize(id.value),
-    set: (newValue) => {
-      dataStyleStore.setModelPointsSize(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setModelPointsSize(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
diff --git a/app/components/Viewer/Options/AttributeColorBar.vue b/app/components/Viewer/Options/AttributeColorBar.vue
new file mode 100644
index 00000000..0e623079
--- /dev/null
+++ b/app/components/Viewer/Options/AttributeColorBar.vue
@@ -0,0 +1,58 @@
+<script setup>
+  import ColorMapPicker from "./ColorMapPicker.vue"
+
+  const emit = defineEmits(["reset"])
+
+  const minimum = defineModel("minimum", { type: Number })
+  const maximum = defineModel("maximum", { type: Number })
+  const colorMap = defineModel("colorMap", { type: String })
+
+  function reset() {
+    emit("reset")
+  }
+</script>
+
+<template>
+  <div class="attribute-colorbar mt-3">
+    <ColorMapPicker v-model="colorMap" :min="minimum" :max="maximum" />
+    <v-row dense align="center" class="mt-2">
+      <v-col cols="5">
+        <v-text-field
+          :model-value="minimum"
+          @update:model-value="(value) => (minimum = Number(value))"
+          label="Min"
+          type="number"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="2" class="d-flex justify-center">
+        <v-btn
+          icon="mdi-arrow-left-right"
+          size="x-small"
+          variant="text"
+          @click="reset"
+          v-tooltip="'Reset range'"
+        />
+      </v-col>
+      <v-col cols="5">
+        <v-text-field
+          :model-value="maximum"
+          @update:model-value="(value) => (maximum = Number(value))"
+          label="Max"
+          type="number"
+          density="compact"
+          hide-details
+          variant="outlined"
+        />
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<style scoped>
+  .attribute-colorbar {
+    width: 100%;
+  }
+</style>
diff --git a/app/components/Viewer/Options/CellAttributeSelector.vue b/app/components/Viewer/Options/CellAttributeSelector.vue
index 532cb6f2..443072c2 100644
--- a/app/components/Viewer/Options/CellAttributeSelector.vue
+++ b/app/components/Viewer/Options/CellAttributeSelector.vue
@@ -1,26 +1,36 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
+
+  const geodeStore = useGeodeStore()
+
+  const cell_attribute_name = defineModel("cell_attribute_name", {
+    type: String,
+  })
+  const cell_attribute_range = defineModel("cell_attribute_range", {
+    type: Array,
+  })
+  const cell_attribute_color_map = defineModel("cell_attribute_color_map", {
+    type: String,
+  })
+  const cell_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const model = defineModel()
-  const cell_attribute_name = ref("")
-  const cell_attribute_names = ref([])
-  const cell_attribute = reactive({ name: cell_attribute_name.value })
-  const geodeStore = useGeodeStore()
-
-  onMounted(() => {
-    if (model.value != null) {
-      cell_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => cell_attribute_range.value[0],
+    set: (val) => {
+      cell_attribute_range.value = [val, cell_attribute_range.value[1]]
+    },
   })
-
-  watch(cell_attribute_name, (value) => {
-    cell_attribute.name = value
-    model.value = cell_attribute
+  const rangeMax = computed({
+    get: () => cell_attribute_range.value[1],
+    set: (val) => {
+      cell_attribute_range.value = [cell_attribute_range.value[0], val]
+    },
   })
 
   onMounted(() => {
@@ -30,23 +40,45 @@
   function getCellAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.cell_attribute_names,
-      {
-        id: props.id,
-      },
+      { id: props.id },
       {
         response_function: (response) => {
-          cell_attribute_names.value = response.cell_attribute_names
+          cell_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return cell_attributes.value.find(
+      (attr) => attr.attribute_name === cell_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      cell_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="cell_attribute_name"
-    :items="cell_attribute_names"
+    :items="cell_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="cell_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="cell_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>
diff --git a/app/components/Viewer/Options/ColorMapList.vue b/app/components/Viewer/Options/ColorMapList.vue
new file mode 100644
index 00000000..9bfaa4f8
--- /dev/null
+++ b/app/components/Viewer/Options/ColorMapList.vue
@@ -0,0 +1,216 @@
+<script setup>
+  import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
+  import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
+
+  const props = defineProps({
+    presets: { type: Array, required: true },
+  })
+
+  const emit = defineEmits(["select"])
+
+  const filterText = ref("")
+  const canvasRefs = ref({})
+  const loading = ref(true)
+  let renderJobId = 0
+
+  const setCanvasRef = (presetName, el, id) => {
+    if (el) {
+      canvasRefs.value[id] = { el, presetName }
+    } else {
+      delete canvasRefs.value[id]
+    }
+  }
+
+  const filteredPresets = computed(() => {
+    if (!filterText.value) return props.presets
+    const term = filterText.value.toLowerCase()
+
+    return props.presets.reduce((acc, item) => {
+      if (item.Children) {
+        const children = item.Children.filter((c) =>
+          c.Name.toLowerCase().includes(term),
+        )
+        if (children.length) acc.push({ ...item, Children: children })
+      } else if (item.Name.toLowerCase().includes(term)) {
+        acc.push(item)
+      }
+      return acc
+    }, [])
+  })
+
+  function drawPresetCanvas(presetName, canvas) {
+    if (!canvas) return
+    const preset = vtkColorMaps.getPresetByName(presetName)
+    if (!preset || !preset.RGBPoints) return
+
+    const ctx = canvas.getContext("2d")
+    const { width, height } = canvas
+    const lut = vtkColorTransferFunction.newInstance()
+    const rgbPoints = preset.RGBPoints
+
+    for (let i = 0; i < rgbPoints.length; i += 4) {
+      lut.addRGBPoint(
+        rgbPoints[i],
+        rgbPoints[i + 1],
+        rgbPoints[i + 2],
+        rgbPoints[i + 3],
+      )
+    }
+
+    const table = lut.getUint8Table(
+      rgbPoints[0],
+      rgbPoints[rgbPoints.length - 4],
+      width,
+      true,
+    )
+    const imageData = ctx.createImageData(width, height)
+
+    for (let x = 0; x < width; x++) {
+      const r = table[x * 4],
+        g = table[x * 4 + 1],
+        b = table[x * 4 + 2],
+        a = table[x * 4 + 3]
+      for (let y = 0; y < height; y++) {
+        const idx = (y * width + x) * 4
+        imageData.data[idx] = r
+        imageData.data[idx + 1] = g
+        imageData.data[idx + 2] = b
+        imageData.data[idx + 3] = a
+      }
+    }
+    ctx.putImageData(imageData, 0, 0)
+  }
+
+  async function drawAllCanvases() {
+    renderJobId++
+    const currentJobId = renderJobId
+    loading.value = true
+    await nextTick()
+    await new Promise((r) => setTimeout(r, 50))
+
+    const entries = Object.entries(canvasRefs.value)
+    for (let i = 0; i < entries.length; i += 5) {
+      if (currentJobId !== renderJobId) return
+      entries
+        .slice(i, i + 5)
+        .forEach(([_, { presetName, el }]) => drawPresetCanvas(presetName, el))
+      await new Promise((r) => setTimeout(r, 0))
+    }
+    if (currentJobId === renderJobId) loading.value = false
+  }
+
+  onMounted(drawAllCanvases)
+  watch(filteredPresets, drawAllCanvases)
+</script>
+
+<template>
+  <v-card
+    width="320"
+    class="pa-3 blur-card overflow-hidden"
+    theme="dark"
+    variant="outlined"
+    rounded="lg"
+  >
+    <v-overlay
+      v-model="loading"
+      contained
+      persistent
+      class="align-center justify-center"
+      scrim="#1e1e1e"
+      opacity="0.6"
+    >
+      <v-progress-circular indeterminate color="primary" />
+    </v-overlay>
+
+    <v-text-field
+      v-model="filterText"
+      placeholder="Search presets..."
+      density="compact"
+      hide-details
+      prepend-inner-icon="mdi-magnify"
+      variant="solo-filled"
+      flat
+      class="mb-3"
+      base-color="white"
+      color="white"
+    />
+
+    <v-list
+      density="compact"
+      max-height="350"
+      bg-color="transparent"
+      class="pa-0"
+      :style="{ opacity: loading ? '0.3' : '1', transition: 'opacity 0.2s' }"
+    >
+      <template v-for="(item, index) in filteredPresets" :key="index">
+        <v-list-group v-if="item.Children" :value="item.Name">
+          <template #activator="{ props: gProps }">
+            <v-list-item
+              v-bind="gProps"
+              :title="item.Name"
+              class="text-white font-weight-bold"
+            />
+          </template>
+
+          <v-list-item
+            v-for="(child, cIdx) in item.Children"
+            :key="cIdx"
+            @click="$emit('select', child)"
+            class="px-2 mb-1"
+            rounded="md"
+          >
+            <div class="d-flex flex-column py-1">
+              <span class="text-caption text-grey-lighten-1 mb-1">{{
+                child.Name
+              }}</span>
+              <canvas
+                :ref="
+                  (el) => setCanvasRef(child.Name, el, `g-${index}-${cIdx}`)
+                "
+                width="200"
+                height="18"
+                class="w-100 rounded-xs border-thin"
+              />
+            </div>
+          </v-list-item>
+        </v-list-group>
+
+        <v-list-item
+          v-else
+          @click="$emit('select', item)"
+          class="px-2 mb-1"
+          rounded="md"
+        >
+          <div class="d-flex flex-column py-1">
+            <span class="text-caption text-grey-lighten-1 mb-1">{{
+              item.Name
+            }}</span>
+            <canvas
+              :ref="(el) => setCanvasRef(item.Name, el, `s-${index}`)"
+              width="200"
+              height="18"
+              class="w-100 rounded-xs border-thin"
+            />
+          </div>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-card>
+</template>
+
+<style scoped>
+  .blur-card {
+    background-color: rgba(35, 35, 35, 0.8) !important;
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+
+  .border-thin {
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  }
+
+  .v-list-item {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
+</style>
diff --git a/app/components/Viewer/Options/ColorMapPicker.vue b/app/components/Viewer/Options/ColorMapPicker.vue
new file mode 100644
index 00000000..80c6ec17
--- /dev/null
+++ b/app/components/Viewer/Options/ColorMapPicker.vue
@@ -0,0 +1,168 @@
+<script setup>
+  import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
+  import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction"
+  import ColorMapList from "./ColorMapList.vue"
+
+  const props = defineProps({
+    modelValue: { type: String, default: "Cool to Warm" },
+    min: { type: Number, required: true },
+    max: { type: Number, required: true },
+  })
+
+  const emit = defineEmits(["update:modelValue"])
+
+  const menuOpen = ref(false)
+  const lutCanvas = ref(null)
+  const selectedPresetName = ref(props.modelValue)
+
+  const presets = computed(() => {
+    const allPresets = vtkColorMaps.rgbPresetNames.map((name) =>
+      vtkColorMaps.getPresetByName(name),
+    )
+
+    const defaultPreset = vtkColorMaps.getPresetByName("Cool to Warm")
+
+    const paraviewNames = [
+      "Cool to Warm",
+      "Warm to Cool",
+      "rainbow",
+      "Grayscale",
+      "X Ray",
+      "Black-Body Radiation",
+      "erdc_rainbow_bright",
+    ]
+    const matplotlibNames = [
+      "Viridis (matplotlib)",
+      "Plasma (matplotlib)",
+      "Inferno (matplotlib)",
+      "Magma (matplotlib)",
+    ]
+
+    const paraviewPresets = paraviewNames
+      .map((name) => vtkColorMaps.getPresetByName(name))
+      .filter(Boolean)
+    const matplotlibPresets = matplotlibNames
+      .map((name) => vtkColorMaps.getPresetByName(name))
+      .filter(Boolean)
+    const otherPresets = allPresets.filter(
+      (preset) =>
+        !paraviewNames.includes(preset.Name) &&
+        !matplotlibNames.includes(preset.Name),
+    )
+
+    return [
+      defaultPreset,
+      { Name: "ParaView", Children: paraviewPresets },
+      { Name: "Matplotlib", Children: matplotlibPresets },
+      { Name: "Others", Children: otherPresets },
+    ]
+  })
+
+  function drawLutCanvas() {
+    if (!lutCanvas.value) return
+    const preset = vtkColorMaps.getPresetByName(selectedPresetName.value)
+    if (!preset || !preset.RGBPoints) return
+
+    const canvas = lutCanvas.value
+    const ctx = canvas.getContext("2d")
+    const { width, height } = canvas
+
+    const lut = vtkColorTransferFunction.newInstance()
+    const rgbPoints = preset.RGBPoints
+
+    for (let i = 0; i < rgbPoints.length; i += 4) {
+      lut.addRGBPoint(
+        rgbPoints[i],
+        rgbPoints[i + 1],
+        rgbPoints[i + 2],
+        rgbPoints[i + 3],
+      )
+    }
+
+    const table = lut.getUint8Table(
+      rgbPoints[0],
+      rgbPoints[rgbPoints.length - 4],
+      width,
+      true,
+    )
+    const imageData = ctx.createImageData(width, height)
+
+    for (let x = 0; x < width; x++) {
+      const r = table[x * 4],
+        g = table[x * 4 + 1],
+        b = table[x * 4 + 2],
+        a = table[x * 4 + 3]
+      for (let y = 0; y < height; y++) {
+        const idx = (y * width + x) * 4
+        imageData.data[idx] = r
+        imageData.data[idx + 1] = g
+        imageData.data[idx + 2] = b
+        imageData.data[idx + 3] = a
+      }
+    }
+    ctx.putImageData(imageData, 0, 0)
+  }
+
+  function onSelectPreset(preset) {
+    selectedPresetName.value = preset.Name
+    emit("update:modelValue", preset.Name)
+    menuOpen.value = false
+  }
+
+  onMounted(() => nextTick(drawLutCanvas))
+  watch(
+    [lutCanvas, selectedPresetName, () => props.min, () => props.max],
+    drawLutCanvas,
+  )
+  watch(
+    () => props.modelValue,
+    (nv) => {
+      if (nv !== selectedPresetName.value) selectedPresetName.value = nv
+    },
+  )
+</script>
+
+<template>
+  <v-menu v-model="menuOpen" :close-on-content-click="false" location="bottom">
+    <template #activator="{ props: menuProps }">
+      <v-card
+        v-bind="menuProps"
+        theme="dark"
+        variant="outlined"
+        rounded="sm"
+        class="pa-2 blur-picker d-flex flex-column"
+        style="gap: 4px; cursor: pointer"
+      >
+        <span class="text-caption text-white font-weight-medium">
+          {{ selectedPresetName }}
+        </span>
+        <canvas
+          ref="lutCanvas"
+          width="200"
+          height="18"
+          class="w-100 rounded-xs border-thin"
+        />
+      </v-card>
+    </template>
+
+    <ColorMapList :presets="presets" @select="onSelectPreset" />
+  </v-menu>
+</template>
+
+<style scoped>
+  .blur-picker {
+    background-color: rgba(40, 40, 40, 0.7) !important;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    transition: background-color 0.2s;
+  }
+
+  .blur-picker {
+    background-color: rgba(60, 60, 60, 0.9) !important;
+  }
+
+  .border-thin {
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  }
+</style>
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index 6c3d86b3..ddd4139d 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -11,11 +11,28 @@
 
   const color = defineModel("color")
   const textures = defineModel("textures")
-  const vertex_attribute = defineModel("vertex_attribute")
-  const edge_attribute = defineModel("edge_attribute")
-  const cell_attribute = defineModel("cell_attribute")
-  const polygon_attribute = defineModel("polygon_attribute")
-  const polyhedron_attribute = defineModel("polyhedron_attribute")
+
+  const vertex_attribute_name = defineModel("vertex_attribute_name")
+  const vertex_attribute_range = defineModel("vertex_attribute_range")
+  const vertex_attribute_color_map = defineModel("vertex_attribute_color_map")
+
+  const edge_attribute_name = defineModel("edge_attribute_name")
+  const edge_attribute_range = defineModel("edge_attribute_range")
+  const edge_attribute_color_map = defineModel("edge_attribute_color_map")
+
+  const cell_attribute_name = defineModel("cell_attribute_name")
+  const cell_attribute_range = defineModel("cell_attribute_range")
+  const cell_attribute_color_map = defineModel("cell_attribute_color_map")
+
+  const polygon_attribute_name = defineModel("polygon_attribute_name")
+  const polygon_attribute_range = defineModel("polygon_attribute_range")
+  const polygon_attribute_color_map = defineModel("polygon_attribute_color_map")
+
+  const polyhedron_attribute_name = defineModel("polyhedron_attribute_name")
+  const polyhedron_attribute_range = defineModel("polyhedron_attribute_range")
+  const polyhedron_attribute_color_map = defineModel(
+    "polyhedron_attribute_color_map",
+  )
 
   const props = defineProps({
     id: { type: String, required: true },
@@ -25,20 +42,14 @@
   const has_textures = computed(() =>
     textures.value !== undefined ? true : false,
   )
-  const has_vertex = computed(() =>
-    vertex_attribute.value !== undefined ? true : false,
-  )
-  const has_edge = computed(() =>
-    edge_attribute.value !== undefined ? true : false,
-  )
-  const has_cells = computed(() =>
-    cell_attribute.value !== undefined ? true : false,
+  const has_vertex = computed(() => vertex_attribute_range.value !== undefined)
+  const has_edge = computed(() => edge_attribute_range.value !== undefined)
+  const has_cells = computed(() => cell_attribute_range.value !== undefined)
+  const has_polygons = computed(
+    () => polygon_attribute_range.value !== undefined,
   )
-  const has_polygons = computed(() =>
-    polygon_attribute.value !== undefined ? true : false,
-  )
-  const has_polyhedra = computed(() =>
-    polyhedron_attribute.value !== undefined ? true : false,
+  const has_polyhedra = computed(
+    () => polyhedron_attribute_range.value !== undefined,
   )
 
   const color_dict = { name: "Color", value: "color" }
@@ -82,7 +93,6 @@
       coloring_styles.value.values[coloring_styles.value.labels.indexOf(value)]
   })
 </script>
-
 <template>
   <v-row justify="center" align="center">
     <v-divider />
@@ -115,31 +125,43 @@
           </template>
           <template v-if="coloring_style_key === vertex_dict['value']">
             <ViewerOptionsVertexAttributeSelector
-              v-model="vertex_attribute"
+              v-model:vertex_attribute_name="vertex_attribute_name"
+              v-model:vertex_attribute_range="vertex_attribute_range"
+              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === edge_dict['value']">
             <ViewerOptionsEdgeAttributeSelector
-              v-model="edge_attribute"
+              v-model:edge_attribute_name="edge_attribute_name"
+              v-model:edge_attribute_range="edge_attribute_range"
+              v-model:edge_attribute_color_map="edge_attribute_color_map"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === cell_dict['value']">
             <ViewerOptionsCellAttributeSelector
-              v-model="cell_attribute"
+              v-model:cell_attribute_name="cell_attribute_name"
+              v-model:cell_attribute_range="cell_attribute_range"
+              v-model:cell_attribute_color_map="cell_attribute_color_map"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === polygon_dict['value']">
             <ViewerOptionsPolygonAttributeSelector
-              v-model="polygon_attribute"
+              v-model:polygon_attribute_name="polygon_attribute_name"
+              v-model:polygon_attribute_range="polygon_attribute_range"
+              v-model:polygon_attribute_color_map="polygon_attribute_color_map"
               :id="id"
             />
           </template>
           <template v-if="coloring_style_key === polyhedron_dict['value']">
             <ViewerOptionsPolyhedronAttributeSelector
-              v-model="polyhedron_attribute"
+              v-model:polyhedron_attribute_name="polyhedron_attribute_name"
+              v-model:polyhedron_attribute_range="polyhedron_attribute_range"
+              v-model:polyhedron_attribute_color_map="
+                polyhedron_attribute_color_map
+              "
               :id="id"
             />
           </template>
diff --git a/app/components/Viewer/Options/EdgeAttributeSelector.vue b/app/components/Viewer/Options/EdgeAttributeSelector.vue
index f44ba195..b6ee64c9 100644
--- a/app/components/Viewer/Options/EdgeAttributeSelector.vue
+++ b/app/components/Viewer/Options/EdgeAttributeSelector.vue
@@ -1,72 +1,84 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
 
   const geodeStore = useGeodeStore()
 
-  const model = defineModel()
+  const edge_attribute_name = defineModel("edge_attribute_name", {
+    type: String,
+  })
+  const edge_attribute_range = defineModel("edge_attribute_range", {
+    type: Array,
+  })
+  const edge_attribute_color_map = defineModel("edge_attribute_color_map", {
+    type: String,
+  })
+  const edge_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const edge_attribute_name = ref("")
-  const edge_attribute_names = ref([])
-
-  onMounted(() => {
-    if (model.value != null) {
-      edge_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => edge_attribute_range.value[0],
+    set: (val) => {
+      edge_attribute_range.value = [val, edge_attribute_range.value[1]]
+    },
+  })
+  const rangeMax = computed({
+    get: () => edge_attribute_range.value[1],
+    set: (val) => {
+      edge_attribute_range.value = [edge_attribute_range.value[0], val]
+    },
   })
 
-  const edge_attribute = reactive({ name: edge_attribute_name.value })
-
-  watch(edge_attribute_name, (value) => {
-    edge_attribute.name = value
-    model.value = edge_attribute
+  onMounted(() => {
+    getEdgeAttributes()
   })
 
-  function get_edge_attribute_names() {
+  function getEdgeAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.edge_attribute_names,
       { id: props.id },
       {
         response_function: (response) => {
-          edge_attribute_names.value = response.edge_attribute_names
+          edge_attributes.value = response.attributes
         },
       },
     )
   }
 
-  onMounted(() => {
-    get_edge_attribute_names()
+  const currentAttribute = computed(() => {
+    return edge_attributes.value.find(
+      (attr) => attr.attribute_name === edge_attribute_name.value,
+    )
   })
 
-  watch(
-    () => props.id,
-    () => {
-      get_edge_attribute_names()
-    },
-  )
+  function resetRange() {
+    if (currentAttribute.value) {
+      edge_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
-  <v-row justify="center" align="center">
-    <v-col cols="auto">
-      <v-icon
-        size="30"
-        icon="mdi-ray-end-arrow"
-        v-tooltip:left="'Edge Attribute'"
-      />
-    </v-col>
-    <v-col>
-      <v-select
-        v-model="edge_attribute_name"
-        :items="edge_attribute_names"
-        label="Select an edge attribute"
-        density="compact"
-        hide-details
-      />
-    </v-col>
-  </v-row>
+  <v-select
+    v-model="edge_attribute_name"
+    :items="edge_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
+    label="Select an attribute"
+    density="compact"
+  />
+  <ViewerOptionsAttributeColorBar
+    v-if="edge_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="edge_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>
diff --git a/app/components/Viewer/Options/PolygonAttributeSelector.vue b/app/components/Viewer/Options/PolygonAttributeSelector.vue
index 9ddd626a..57cdb284 100644
--- a/app/components/Viewer/Options/PolygonAttributeSelector.vue
+++ b/app/components/Viewer/Options/PolygonAttributeSelector.vue
@@ -1,26 +1,37 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
+
+  const geodeStore = useGeodeStore()
+
+  const polygon_attribute_name = defineModel("polygon_attribute_name", {
+    type: String,
+  })
+  const polygon_attribute_range = defineModel("polygon_attribute_range", {
+    type: Array,
+  })
+  const polygon_attribute_color_map = defineModel(
+    "polygon_attribute_color_map",
+    { type: String },
+  )
+  const polygon_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const model = defineModel()
-  const polygon_attribute_name = ref("")
-  const polygon_attribute_names = ref([])
-  const polygon_attribute = reactive({ name: polygon_attribute_name.value })
-  const geodeStore = useGeodeStore()
-
-  onMounted(() => {
-    if (model.value != null) {
-      polygon_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => polygon_attribute_range.value[0],
+    set: (val) => {
+      polygon_attribute_range.value = [val, polygon_attribute_range.value[1]]
+    },
   })
-
-  watch(polygon_attribute_name, (value) => {
-    polygon_attribute.name = value
-    model.value = polygon_attribute
+  const rangeMax = computed({
+    get: () => polygon_attribute_range.value[1],
+    set: (val) => {
+      polygon_attribute_range.value = [polygon_attribute_range.value[0], val]
+    },
   })
 
   onMounted(() => {
@@ -30,23 +41,45 @@
   function getPolygonAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.polygon_attribute_names,
-      {
-        id: props.id,
-      },
+      { id: props.id },
       {
         response_function: (response) => {
-          polygon_attribute_names.value = response.polygon_attribute_names
+          polygon_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return polygon_attributes.value.find(
+      (attr) => attr.attribute_name === polygon_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      polygon_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="polygon_attribute_name"
-    :items="polygon_attribute_names"
+    :items="polygon_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="polygon_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="polygon_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>
diff --git a/app/components/Viewer/Options/PolyhedronAttributeSelector.vue b/app/components/Viewer/Options/PolyhedronAttributeSelector.vue
index fdf7c60d..5884ecf6 100644
--- a/app/components/Viewer/Options/PolyhedronAttributeSelector.vue
+++ b/app/components/Viewer/Options/PolyhedronAttributeSelector.vue
@@ -1,54 +1,91 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
 
-  const model = defineModel()
-
-  const polyhedron_attribute_name = ref("")
+  const geodeStore = useGeodeStore()
 
-  onMounted(() => {
-    if (model.value != null) {
-      polyhedron_attribute_name.value = model.value.name
-    }
+  const polyhedron_attribute_name = defineModel("polyhedron_attribute_name", {
+    type: String,
   })
-  const polyhedron_attribute = reactive({
-    name: polyhedron_attribute_name.value,
-  })
-
-  watch(polyhedron_attribute_name, (value) => {
-    polyhedron_attribute.name = value
-    model.value = polyhedron_attribute
+  const polyhedron_attribute_range = defineModel("polyhedron_attribute_range", {
+    type: Array,
   })
+  const polyhedron_attribute_color_map = defineModel(
+    "polyhedron_attribute_color_map",
+    { type: String },
+  )
+  const polyhedron_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const polyhedron_attribute_names = ref([])
-  const geodeStore = useGeodeStore()
+  const rangeMin = computed({
+    get: () => polyhedron_attribute_range.value[0],
+    set: (val) => {
+      polyhedron_attribute_range.value = [
+        val,
+        polyhedron_attribute_range.value[1],
+      ]
+    },
+  })
+  const rangeMax = computed({
+    get: () => polyhedron_attribute_range.value[1],
+    set: (val) => {
+      polyhedron_attribute_range.value = [
+        polyhedron_attribute_range.value[0],
+        val,
+      ]
+    },
+  })
 
   onMounted(() => {
-    getVertexAttributes()
+    getPolyhedronAttributes()
   })
 
-  function getVertexAttributes() {
+  function getPolyhedronAttributes() {
     geodeStore.request(
       back_schemas.opengeodeweb_back.polyhedron_attribute_names,
       { id: props.id },
       {
         response_function: (response) => {
-          polyhedron_attribute_names.value = response.polyhedron_attribute_names
+          polyhedron_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return polyhedron_attributes.value.find(
+      (attr) => attr.attribute_name === polyhedron_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      polyhedron_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="polyhedron_attribute_name"
-    :items="polyhedron_attribute_names"
+    :items="polyhedron_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="polyhedron_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="polyhedron_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>
diff --git a/app/components/Viewer/Options/VertexAttributeSelector.vue b/app/components/Viewer/Options/VertexAttributeSelector.vue
index ce639dcc..19b7196a 100644
--- a/app/components/Viewer/Options/VertexAttributeSelector.vue
+++ b/app/components/Viewer/Options/VertexAttributeSelector.vue
@@ -1,28 +1,36 @@
 <script setup>
   import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { useGeodeStore } from "@ogw_front/stores/geode"
+  import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar"
 
   const geodeStore = useGeodeStore()
 
-  const model = defineModel()
+  const vertex_attribute_name = defineModel("vertex_attribute_name", {
+    type: String,
+  })
+  const vertex_attribute_range = defineModel("vertex_attribute_range", {
+    type: Array,
+  })
+  const vertex_attribute_color_map = defineModel("vertex_attribute_color_map", {
+    type: String,
+  })
+  const vertex_attributes = ref([])
 
   const props = defineProps({
     id: { type: String, required: true },
   })
 
-  const vertex_attribute_name = ref("")
-  const vertex_attribute_names = ref([])
-
-  onMounted(() => {
-    if (model.value != null) {
-      vertex_attribute_name.value = model.value.name
-    }
+  const rangeMin = computed({
+    get: () => vertex_attribute_range.value[0],
+    set: (val) => {
+      vertex_attribute_range.value = [val, vertex_attribute_range.value[1]]
+    },
   })
-  const vertex_attribute = reactive({ name: vertex_attribute_name.value })
-
-  watch(vertex_attribute_name, (value) => {
-    vertex_attribute.name = value
-    model.value = vertex_attribute
+  const rangeMax = computed({
+    get: () => vertex_attribute_range.value[1],
+    set: (val) => {
+      vertex_attribute_range.value = [vertex_attribute_range.value[0], val]
+    },
   })
 
   onMounted(() => {
@@ -35,18 +43,42 @@
       { id: props.id },
       {
         response_function: (response) => {
-          vertex_attribute_names.value = response.vertex_attribute_names
+          vertex_attributes.value = response.attributes
         },
       },
     )
   }
+
+  const currentAttribute = computed(() => {
+    return vertex_attributes.value.find(
+      (attr) => attr.attribute_name === vertex_attribute_name.value,
+    )
+  })
+
+  function resetRange() {
+    if (currentAttribute.value) {
+      vertex_attribute_range.value = [
+        currentAttribute.value.min_value,
+        currentAttribute.value.max_value,
+      ]
+    }
+  }
 </script>
 
 <template>
   <v-select
     v-model="vertex_attribute_name"
-    :items="vertex_attribute_names"
+    :items="vertex_attributes.map((attribute) => attribute.attribute_name)"
+    item-title="attribute_name"
+    item-value="attribute_name"
     label="Select an attribute"
     density="compact"
   />
+  <ViewerOptionsAttributeColorBar
+    v-if="vertex_attribute_name"
+    v-model:minimum="rangeMin"
+    v-model:maximum="rangeMax"
+    v-model:colorMap="vertex_attribute_color_map"
+    @reset="resetRange"
+  />
 </template>
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index 4ab46a48..2336835e 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -18,41 +18,63 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPointsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const size = computed({
     get: () => dataStyleStore.meshPointsSize(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsSize(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsSize(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPointsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPointsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue)
+      await dataStyleStore.updateMeshPointsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPointsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPointsVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -85,7 +107,9 @@
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute="vertex_attribute"
+              v-model:vertex_attribute_name="vertex_attribute_name"
+              v-model:vertex_attribute_range="vertex_attribute_range"
+              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
             />
           </v-col>
         </v-row>
diff --git a/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue b/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue
index a1d05fa5..d4f985c0 100644
--- a/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue
+++ b/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue
@@ -19,43 +19,95 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolygonsVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolygonsColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const textures = computed({
     get: () => dataStyleStore.meshPolygonsTextures(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsTextures(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVertexAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolygonsVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const polygon_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsPolygonAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolygonsPolygonAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolygonsVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_name = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsPolygonAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolygonsPolygonAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_range = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsPolygonAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolygonsPolygonAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(
+        id.value,
+        newValue,
+      )
       hybridViewerStore.remoteRender()
     },
   })
@@ -75,8 +127,12 @@
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:polygon_attribute="polygon_attribute"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:polygon_attribute_name="polygon_attribute_name"
+          v-model:polygon_attribute_range="polygon_attribute_range"
+          v-model:polygon_attribute_color_map="polygon_attribute_color_map"
         />
       </template>
     </template>
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index 9011843c..1e51875f 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -19,41 +19,93 @@
 
   const visibility = computed({
     get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVisibility(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const coloring_style_key = computed({
     get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraActiveColoring(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
   const color = computed({
     get: () => dataStyleStore.meshPolyhedraColor(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraColor(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPolyhedraVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraVertexAttribute(id.value, newValue)
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVertexAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolyhedraVertexAttribute(id.value)
       hybridViewerStore.remoteRender()
     },
   })
-  const polyhedron_attribute = computed({
-    get: () => dataStyleStore.meshPolyhedraPolyhedronAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraPolyhedronAttribute(id.value, newValue)
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolyhedraVertexAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(
+        id.value,
+        newValue,
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_name = computed({
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
+        id.value,
+        newValue,
+      )
+      await dataStyleStore.updateMeshPolyhedraPolyhedronAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_range = computed({
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      await dataStyleStore.updateMeshPolyhedraPolyhedronAttribute(id.value)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_color_map = computed({
+    get: () =>
+      dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
+    set: async (newValue) => {
+      await dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(
+        id.value,
+        newValue,
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -67,8 +119,14 @@
           :id="id"
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
-          v-model:vertex_attribute="vertex_attribute"
-          v-model:polyhedron_attribute="polyhedron_attribute"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:polyhedron_attribute_name="polyhedron_attribute_name"
+          v-model:polyhedron_attribute_range="polyhedron_attribute_range"
+          v-model:polyhedron_attribute_color_map="
+            polyhedron_attribute_color_map
+          "
         />
       </template>
     </template>
diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index 747a59ac..0e5f110e 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -1,8 +1,8 @@
 import { getDefaultStyle } from "@ogw_front/utils/default_styles"
 import { useDataStore } from "@ogw_front/stores/data"
-import { useDataStyleStateStore } from "../../internal/stores/data_style_state"
-import useMeshStyle from "../../internal/stores/mesh/index"
-import useModelStyle from "../../internal/stores/model/index"
+import { useDataStyleStateStore } from "../../internal/stores/data_style/state"
+import useMeshStyle from "../../internal/stores/data_style/mesh/index"
+import useModelStyle from "../../internal/stores/data_style/model/index"
 
 export const useDataStyleStore = defineStore("dataStyle", () => {
   const dataStyleState = useDataStyleStateStore()
diff --git a/app/utils/colormap.js b/app/utils/colormap.js
new file mode 100644
index 00000000..da86a7fe
--- /dev/null
+++ b/app/utils/colormap.js
@@ -0,0 +1,5 @@
+import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
+
+export function getRGBPointsFromPreset(presetName) {
+  return vtkColorMaps.getPresetByName(presetName).RGBPoints
+}
diff --git a/app/utils/default_styles.js b/app/utils/default_styles.js
index 09942b26..f9826e8a 100644
--- a/app/utils/default_styles.js
+++ b/app/utils/default_styles.js
@@ -32,7 +32,10 @@ const meshPointsDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      vertex: null,
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
     size,
   }
@@ -48,8 +51,14 @@ const meshEdgesDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      edge: null,
-      vertex: null,
+      edge: {
+        name: null,
+        storedConfigs: {},
+      },
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
     width,
   }
@@ -63,10 +72,16 @@ const meshCellsDefaultStyle = (
     visibility,
     coloring: {
       active: "color",
-      cell: null,
+      cell: {
+        name: null,
+        storedConfigs: {},
+      },
       color,
       textures: null,
-      vertex: null,
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
   }
 }
@@ -81,8 +96,14 @@ const meshPolygonsDefaultStyle = (
       active: "color",
       color,
       textures: null,
-      polygon: null,
-      vertex: null,
+      polygon: {
+        name: null,
+        storedConfigs: {},
+      },
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
   }
 }
@@ -96,8 +117,14 @@ const meshPolyhedraDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      polyhedron: null,
-      vertex: null,
+      polyhedron: {
+        name: null,
+        storedConfigs: {},
+      },
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
   }
 }
diff --git a/internal/stores/data_style/mesh/cells/cell.js b/internal/stores/data_style/mesh/cells/cell.js
new file mode 100644
index 00000000..4c5b4dec
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/cell.js
@@ -0,0 +1,153 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsCellAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.attribute.cell
+
+export function useMeshCellsCellAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsCellAttribute(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id).cell
+  }
+
+  async function updateMeshCellsCellAttribute(id) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    await meshCellsCellAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshCellsCellAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshCellsCellAttributeStoredConfig(id, name) {
+    const storedConfigs = meshCellsCellAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshCellsCellAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshCellsCellAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshCellsCellAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  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, colorMap } =
+            meshCellsCellAttributeStoredConfig(id, name)
+          await setMeshCellsCellAttributeRange(id, minimum, maximum)
+          await setMeshCellsCellAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshCellsCellAttributeName.name,
+            { id },
+            meshCellsCellAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsCellAttributeRange(id) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    const { minimum, maximum } = storedConfig
+    return [minimum, maximum]
+  }
+  function setMeshCellsCellAttributeRange(id, minimum, maximum) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    return viewerStore.request(
+      meshCellsCellAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshCellsCellAttributeRange.name,
+            { id },
+            meshCellsCellAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsCellAttributeColorMap(id) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    const { colorMap } = storedConfig
+    return colorMap
+  }
+  function setMeshCellsCellAttributeColorMap(id, colorMap) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsCellAttributeName,
+    meshCellsCellAttributeRange,
+    meshCellsCellAttributeColorMap,
+    setMeshCellsCellAttributeName,
+    setMeshCellsCellAttributeRange,
+    setMeshCellsCellAttributeColorMap,
+    updateMeshCellsCellAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/cells/color.js b/internal/stores/data_style/mesh/cells/color.js
new file mode 100644
index 00000000..93b8cae7
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/color.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.color
+
+export function useMeshCellsColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsColor(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id).color
+  }
+  function setMeshCellsColor(id, color) {
+    return viewerStore.request(
+      meshCellsColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshCellsCommonStyle.meshCellsColoring(id).color = color
+          console.log(
+            setMeshCellsColor.name,
+            { id },
+            JSON.stringify(meshCellsColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsColor,
+    setMeshCellsColor,
+  }
+}
diff --git a/internal/stores/data_style/mesh/cells/common.js b/internal/stores/data_style/mesh/cells/common.js
new file mode 100644
index 00000000..169077e9
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/common.js
@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshCellsCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshCellsStyle(id) {
+    return dataStyleStateStore.getStyle(id).cells
+  }
+
+  function meshCellsColoring(id) {
+    return meshCellsStyle(id).coloring
+  }
+
+  function meshCellsActiveColoring(id) {
+    return meshCellsColoring(id).active
+  }
+
+  return {
+    meshCellsStyle,
+    meshCellsColoring,
+    meshCellsActiveColoring,
+  }
+}
diff --git a/internal/stores/data_style/mesh/cells/index.js b/internal/stores/data_style/mesh/cells/index.js
new file mode 100644
index 00000000..0958bc0e
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/index.js
@@ -0,0 +1,84 @@
+// Third party imports
+
+// Local imports
+import { useMeshCellsCommonStyle } from "./common"
+import { useMeshCellsVisibilityStyle } from "./visibility"
+import { useMeshCellsColorStyle } from "./color"
+import { useMeshCellsTexturesStyle } from "./textures"
+import { useMeshCellsVertexAttributeStyle } from "./vertex"
+import { useMeshCellsCellAttributeStyle } from "./cell"
+
+// Local constants
+
+export function useMeshCellsStyle() {
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+  const meshCellsVisibility = useMeshCellsVisibilityStyle()
+  const meshCellsColorStyle = useMeshCellsColorStyle()
+  const meshCellsTexturesStore = useMeshCellsTexturesStyle()
+  const meshCellsVertexAttributeStyle = useMeshCellsVertexAttributeStyle()
+  const meshCellsCellAttributeStyle = useMeshCellsCellAttributeStyle()
+
+  async function setMeshCellsActiveColoring(id, type) {
+    const coloring = meshCellsCommonStyle.meshCellsColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshCellsActiveColoring.name,
+      { id },
+      meshCellsCommonStyle.meshCellsActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshCellsColorStyle.setMeshCellsColor(
+        id,
+        meshCellsColorStyle.meshCellsColor(id),
+      )
+    } else if (type === "textures") {
+      const textures = meshCellsTexturesStore.meshCellsTextures(id)
+      if (textures === null) {
+        return Promise.resolve()
+      }
+      return meshCellsTexturesStore.setMeshCellsTextures(id, textures)
+    } else if (type === "vertex") {
+      const name =
+        meshCellsVertexAttributeStyle.meshCellsVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshCellsVertexAttributeStyle.setMeshCellsVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "cell") {
+      const name = meshCellsCellAttributeStyle.meshCellsCellAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      await meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name)
+    } else {
+      throw new Error("Unknown mesh cells coloring type: " + type)
+    }
+  }
+
+  function applyMeshCellsStyle(id) {
+    return Promise.all([
+      meshCellsVisibility.setMeshCellsVisibility(
+        id,
+        meshCellsVisibility.meshCellsVisibility(id),
+      ),
+      setMeshCellsActiveColoring(
+        id,
+        meshCellsCommonStyle.meshCellsActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    ...meshCellsCommonStyle,
+    setMeshCellsActiveColoring,
+    applyMeshCellsStyle,
+    ...meshCellsVisibility,
+    ...meshCellsColorStyle,
+    ...meshCellsTexturesStore,
+    ...meshCellsVertexAttributeStyle,
+    ...meshCellsCellAttributeStyle,
+  }
+}
diff --git a/internal/stores/data_style/mesh/cells/textures.js b/internal/stores/data_style/mesh/cells/textures.js
new file mode 100644
index 00000000..c7fdcb88
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/textures.js
@@ -0,0 +1,36 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsTexturesSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.apply_textures
+
+export function useMeshCellsTexturesStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsTextures(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id).textures
+  }
+  function setMeshCellsTextures(id, textures) {
+    return viewerStore.request(
+      meshCellsTexturesSchemas,
+      { id, textures },
+      {
+        response_function: () => {
+          meshCellsCommonStyle.meshCellsColoring(id).textures = textures
+          console.log(setMeshCellsTextures.name, { id }, meshCellsTextures(id))
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsTextures,
+    setMeshCellsTextures,
+  }
+}
diff --git a/internal/stores/data_style/mesh/cells/vertex.js b/internal/stores/data_style/mesh/cells/vertex.js
new file mode 100644
index 00000000..22c5b1ee
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/vertex.js
@@ -0,0 +1,153 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.attribute.vertex
+
+export function useMeshCellsVertexAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsVertexAttribute(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id).vertex
+  }
+
+  async function updateMeshCellsVertexAttribute(id) {
+    const name = meshCellsVertexAttributeName(id)
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name)
+    await meshCellsVertexAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshCellsVertexAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshCellsVertexAttributeStoredConfig(id, name) {
+    const storedConfigs = meshCellsVertexAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshCellsVertexAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshCellsVertexAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshCellsVertexAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  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, colorMap } =
+            meshCellsVertexAttributeStoredConfig(id, name)
+          await setMeshCellsVertexAttributeRange(id, minimum, maximum)
+          await setMeshCellsVertexAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshCellsVertexAttributeName.name,
+            { id },
+            meshCellsVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsVertexAttributeRange(id) {
+    const name = meshCellsVertexAttributeName(id)
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name)
+    const { minimum, maximum } = storedConfig
+    return [minimum, maximum]
+  }
+  function setMeshCellsVertexAttributeRange(id, minimum, maximum) {
+    const name = meshCellsVertexAttributeName(id)
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name)
+    return viewerStore.request(
+      meshCellsVertexAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshCellsVertexAttributeRange.name,
+            { id },
+            meshCellsVertexAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsVertexAttributeColorMap(id) {
+    const name = meshCellsVertexAttributeName(id)
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name)
+    const { colorMap } = storedConfig
+    return colorMap
+  }
+  function setMeshCellsVertexAttributeColorMap(id, colorMap) {
+    const name = meshCellsVertexAttributeName(id)
+    const storedConfig = meshCellsVertexAttributeStoredConfig(id, name)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsVertexAttributeName,
+    meshCellsVertexAttributeRange,
+    meshCellsVertexAttributeColorMap,
+    setMeshCellsVertexAttributeName,
+    setMeshCellsVertexAttributeRange,
+    setMeshCellsVertexAttributeColorMap,
+    updateMeshCellsVertexAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/cells/visibility.js b/internal/stores/data_style/mesh/cells/visibility.js
new file mode 100644
index 00000000..e1e29c50
--- /dev/null
+++ b/internal/stores/data_style/mesh/cells/visibility.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsVisibilitySchema =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.visibility
+
+export function useMeshCellsVisibilityStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsVisibility(id) {
+    return meshCellsCommonStyle.meshCellsStyle(id).visibility
+  }
+  function setMeshCellsVisibility(id, visibility) {
+    return viewerStore.request(
+      meshCellsVisibilitySchema,
+      { id, visibility },
+      {
+        response_function: () => {
+          meshCellsCommonStyle.meshCellsStyle(id).visibility = visibility
+          console.log(
+            setMeshCellsVisibility.name,
+            { id },
+            meshCellsVisibility(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsVisibility,
+    setMeshCellsVisibility,
+  }
+}
diff --git a/internal/stores/data_style/mesh/edges/color.js b/internal/stores/data_style/mesh/edges/color.js
new file mode 100644
index 00000000..b37ea555
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/color.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshEdgesCommonStyle } from "./common"
+
+// Local constants
+const meshEdgesColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.edges.color
+
+export function useMeshEdgesColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle()
+
+  function meshEdgesColor(id) {
+    return meshEdgesCommonStyle.meshEdgesColoring(id).color
+  }
+  function setMeshEdgesColor(id, color) {
+    return viewerStore.request(
+      meshEdgesColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshEdgesCommonStyle.meshEdgesColoring(id).color = color
+          console.log(
+            setMeshEdgesColor.name,
+            { id },
+            JSON.stringify(meshEdgesColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshEdgesColor,
+    setMeshEdgesColor,
+  }
+}
diff --git a/internal/stores/data_style/mesh/edges/common.js b/internal/stores/data_style/mesh/edges/common.js
new file mode 100644
index 00000000..0da2d26a
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/common.js
@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshEdgesCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshEdgesStyle(id) {
+    return dataStyleStateStore.getStyle(id).edges
+  }
+
+  function meshEdgesColoring(id) {
+    return meshEdgesStyle(id).coloring
+  }
+
+  function meshEdgesActiveColoring(id) {
+    return meshEdgesColoring(id).active
+  }
+
+  return {
+    meshEdgesStyle,
+    meshEdgesColoring,
+    meshEdgesActiveColoring,
+  }
+}
diff --git a/internal/stores/data_style/mesh/edges/edge.js b/internal/stores/data_style/mesh/edges/edge.js
new file mode 100644
index 00000000..088eab94
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/edge.js
@@ -0,0 +1,141 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshEdgesCommonStyle } from "./common"
+
+// Local constants
+const meshEdgesEdgeAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.edges.attribute.edge
+
+export function useMeshEdgesEdgeAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle()
+
+  function meshEdgesEdgeAttribute(id) {
+    return meshEdgesCommonStyle.meshEdgesColoring(id).edge
+  }
+
+  function meshEdgesEdgeAttributeStoredConfig(id, name) {
+    const storedConfigs = meshEdgesEdgeAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshEdgesEdgeAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshEdgesEdgeAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshEdgesEdgeAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  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, colorMap } =
+          //   meshEdgesEdgeAttributeStoredConfig(id, name)
+          // await setMeshEdgesEdgeAttributeRange(id, minimum, maximum)
+          // await setMeshEdgesEdgeAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshEdgesEdgeAttributeName.name,
+            { id },
+            meshEdgesEdgeAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  // function meshEdgesEdgeAttributeRange(id) {
+  //   const name = meshEdgesEdgeAttributeName(id)
+  //   const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name)
+  //   const { minimum, maximum } = storedConfig
+  //   return [minimum, maximum]
+  // }
+  // function setMeshEdgesEdgeAttributeRange(id, minimum, maximum) {
+  //   const name = meshEdgesEdgeAttributeName(id)
+  //   const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name)
+  //   return viewerStore.request(
+  //     meshEdgesEdgeAttributeSchemas.scalar_range,
+  //     { id, minimum, maximum },
+  //     {
+  //       response_function: () => {
+  //         storedConfig.minimum = minimum
+  //         storedConfig.maximum = maximum
+  //         console.log(
+  //           setMeshEdgesEdgeAttributeRange.name,
+  //           { id },
+  //           meshEdgesEdgeAttributeRange(id),
+  //         )
+  //       },
+  //     },
+  //   )
+  // }
+
+  // function meshEdgesEdgeAttributeColorMap(id) {
+  //   const name = meshEdgesEdgeAttributeName(id)
+  //   const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name)
+  //   const { colorMap } = storedConfig
+  //   return colorMap
+  // }
+  // function setMeshEdgesEdgeAttributeColorMap(id, colorMap) {
+  //   const name = meshEdgesEdgeAttributeName(id)
+  //   const storedConfig = meshEdgesEdgeAttributeStoredConfig(id, name)
+  //   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),
+  //         )
+  //       },
+  //     },
+  //   )
+  // }
+
+  return {
+    meshEdgesEdgeAttributeName,
+    // meshEdgesEdgeAttributeRange,
+    // meshEdgesEdgeAttributeColorMap,
+    setMeshEdgesEdgeAttributeName,
+    // setMeshEdgesEdgeAttributeRange,
+    // setMeshEdgesEdgeAttributeColorMap,
+  }
+}
diff --git a/internal/stores/data_style/mesh/edges/index.js b/internal/stores/data_style/mesh/edges/index.js
new file mode 100644
index 00000000..8d64a50a
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/index.js
@@ -0,0 +1,88 @@
+// Third party imports
+
+// Local imports
+import { useMeshEdgesCommonStyle } from "./common"
+import { useMeshEdgesVisibilityStyle } from "./visibility"
+import { useMeshEdgesColorStyle } from "./color"
+import { useMeshEdgesWidthStyle } from "./width"
+import { useMeshEdgesVertexAttributeStyle } from "./vertex"
+import { useMeshEdgesEdgeAttributeStyle } from "./edge"
+
+// Local constants
+
+export function useMeshEdgesStyle() {
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle()
+  const meshEdgesVisibility = useMeshEdgesVisibilityStyle()
+  const meshEdgesColorStyle = useMeshEdgesColorStyle()
+  const meshEdgesWidthStyle = useMeshEdgesWidthStyle()
+  const meshEdgesVertexAttributeStyle = useMeshEdgesVertexAttributeStyle()
+  const meshEdgesEdgeAttributeStyle = useMeshEdgesEdgeAttributeStyle()
+
+  async function setMeshEdgesActiveColoring(id, type) {
+    const coloring = meshEdgesCommonStyle.meshEdgesColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshEdgesActiveColoring.name,
+      { id },
+      meshEdgesCommonStyle.meshEdgesActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshEdgesColorStyle.setMeshEdgesColor(
+        id,
+        meshEdgesColorStyle.meshEdgesColor(id),
+      )
+    } else if (type === "textures") {
+      const textures = meshEdgesTexturesStore.meshEdgesTextures(id)
+      if (textures === null) {
+        return Promise.resolve()
+      }
+      return meshEdgesTexturesStore.setMeshEdgesTextures(id, textures)
+    } else if (type === "vertex") {
+      const name =
+        meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshEdgesVertexAttributeStyle.setMeshEdgesVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "edge") {
+      const name = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshEdgesEdgeAttributeStyle.setMeshEdgesEdgeAttributeName(id, name)
+    } else {
+      throw new Error("Unknown mesh edges coloring type: " + type)
+    }
+  }
+
+  function applyMeshEdgesStyle(id) {
+    return Promise.all([
+      meshEdgesVisibility.setMeshEdgesVisibility(
+        id,
+        meshEdgesVisibility.meshEdgesVisibility(id),
+      ),
+      meshEdgesWidthStyle.setMeshEdgesWidth(
+        id,
+        meshEdgesWidthStyle.meshEdgesWidth(id),
+      ),
+      setMeshEdgesActiveColoring(
+        id,
+        meshEdgesCommonStyle.meshEdgesActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    setMeshEdgesActiveColoring,
+    applyMeshEdgesStyle,
+    ...meshEdgesCommonStyle,
+    ...meshEdgesVisibility,
+    ...meshEdgesColorStyle,
+    ...meshEdgesWidthStyle,
+    ...meshEdgesVertexAttributeStyle,
+    ...meshEdgesEdgeAttributeStyle,
+  }
+}
diff --git a/internal/stores/data_style/mesh/edges/vertex.js b/internal/stores/data_style/mesh/edges/vertex.js
new file mode 100644
index 00000000..8c221c43
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/vertex.js
@@ -0,0 +1,153 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshEdgesCommonStyle } from "./common"
+
+// Local constants
+const meshEdgesVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.edges.attribute.vertex
+
+export function useMeshEdgesVertexAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle()
+
+  function meshEdgesVertexAttribute(id) {
+    return meshEdgesCommonStyle.meshEdgesColoring(id).vertex
+  }
+
+  async function updateMeshEdgesVertexAttribute(id) {
+    const name = meshEdgesVertexAttributeName(id)
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name)
+    await meshEdgesVertexAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshEdgesVertexAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshEdgesVertexAttributeStoredConfig(id, name) {
+    const storedConfigs = meshEdgesVertexAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshEdgesVertexAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshEdgesVertexAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshEdgesVertexAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  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, colorMap } =
+            meshEdgesVertexAttributeStoredConfig(id, name)
+          await setMeshEdgesVertexAttributeRange(id, minimum, maximum)
+          await setMeshEdgesVertexAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshEdgesVertexAttributeName.name,
+            { id },
+            meshEdgesVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshEdgesVertexAttributeRange(id) {
+    const name = meshEdgesVertexAttributeName(id)
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name)
+    const { minimum, maximum } = storedConfig
+    return [minimum, maximum]
+  }
+  function setMeshEdgesVertexAttributeRange(id, minimum, maximum) {
+    const name = meshEdgesVertexAttributeName(id)
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name)
+    return viewerStore.request(
+      meshEdgesVertexAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshEdgesVertexAttributeRange.name,
+            { id },
+            meshEdgesVertexAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshEdgesVertexAttributeColorMap(id) {
+    const name = meshEdgesVertexAttributeName(id)
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name)
+    const { colorMap } = storedConfig
+    return colorMap
+  }
+  function setMeshEdgesVertexAttributeColorMap(id, colorMap) {
+    const name = meshEdgesVertexAttributeName(id)
+    const storedConfig = meshEdgesVertexAttributeStoredConfig(id, name)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeRange,
+    meshEdgesVertexAttributeColorMap,
+    setMeshEdgesVertexAttributeName,
+    setMeshEdgesVertexAttributeRange,
+    setMeshEdgesVertexAttributeColorMap,
+    updateMeshEdgesVertexAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/edges/visibility.js b/internal/stores/data_style/mesh/edges/visibility.js
new file mode 100644
index 00000000..e2137825
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/visibility.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshEdgesCommonStyle } from "./common"
+
+// Local constants
+const meshEdgesVisibilitySchema =
+  viewer_schemas.opengeodeweb_viewer.mesh.edges.visibility
+
+export function useMeshEdgesVisibilityStyle() {
+  const viewerStore = useViewerStore()
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle()
+
+  function meshEdgesVisibility(id) {
+    return meshEdgesCommonStyle.meshEdgesStyle(id).visibility
+  }
+  function setMeshEdgesVisibility(id, visibility) {
+    return viewerStore.request(
+      meshEdgesVisibilitySchema,
+      { id, visibility },
+      {
+        response_function: () => {
+          meshEdgesCommonStyle.meshEdgesStyle(id).visibility = visibility
+          console.log(
+            setMeshEdgesVisibility.name,
+            { id },
+            meshEdgesVisibility(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshEdgesVisibility,
+    setMeshEdgesVisibility,
+  }
+}
diff --git a/internal/stores/data_style/mesh/edges/width.js b/internal/stores/data_style/mesh/edges/width.js
new file mode 100644
index 00000000..01e27f66
--- /dev/null
+++ b/internal/stores/data_style/mesh/edges/width.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshEdgesCommonStyle } from "./common"
+
+// Local constants
+const meshEdgesWidthSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.edges.width
+
+export function useMeshEdgesWidthStyle() {
+  const viewerStore = useViewerStore()
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle()
+
+  function meshEdgesWidth(id) {
+    return meshEdgesCommonStyle.meshEdgesStyle(id).width
+  }
+  function setMeshEdgesWidth(id, width) {
+    return viewerStore.request(
+      meshEdgesWidthSchemas,
+      { id, width },
+      {
+        response_function: () => {
+          meshEdgesCommonStyle.meshEdgesStyle(id).width = width
+          console.log(
+            setMeshEdgesWidth.name,
+            { id },
+            JSON.stringify(meshEdgesWidth(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshEdgesWidth,
+    setMeshEdgesWidth,
+  }
+}
diff --git a/internal/stores/mesh/index.js b/internal/stores/data_style/mesh/index.js
similarity index 57%
rename from internal/stores/mesh/index.js
rename to internal/stores/data_style/mesh/index.js
index b38d710c..c8563264 100644
--- a/internal/stores/mesh/index.js
+++ b/internal/stores/data_style/mesh/index.js
@@ -3,8 +3,9 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
-import { useDataStyleStateStore } from "../data_style_state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
+
+import { useDataStyleStateStore } from "../state"
 import { useMeshPointsStyle } from "./points"
 import { useMeshEdgesStyle } from "./edges"
 import { useMeshCellsStyle } from "./cells"
@@ -12,29 +13,29 @@ import { useMeshPolygonsStyle } from "./polygons"
 import { useMeshPolyhedraStyle } from "./polyhedra"
 
 // Local constants
-const mesh_schemas = viewer_schemas.opengeodeweb_viewer.mesh
+const meshSchemas = viewer_schemas.opengeodeweb_viewer.mesh
 
 export default function useMeshStyle() {
-  const dataStyleStateStore = useDataStyleStateStore()
-  const meshCellsStyleStore = useMeshCellsStyle()
-  const meshEdgesStyleStore = useMeshEdgesStyle()
-  const meshPointsStyleStore = useMeshPointsStyle()
-  const meshPolygonsStyleStore = useMeshPolygonsStyle()
-  const meshPolyhedraStyleStore = useMeshPolyhedraStyle()
-  const viewerStore = useViewerStore()
   const hybridViewerStore = useHybridViewerStore()
+  const viewerStore = useViewerStore()
+  const dataStyleState = useDataStyleStateStore()
+  const meshPointsStyle = useMeshPointsStyle()
+  const meshEdgesStyle = useMeshEdgesStyle()
+  const meshCellsStyle = useMeshCellsStyle()
+  const meshPolygonsStyle = useMeshPolygonsStyle()
+  const meshPolyhedraStyle = useMeshPolyhedraStyle()
 
   function meshVisibility(id) {
-    return dataStyleStateStore.getStyle(id).visibility
+    return dataStyleState.getStyle(id).visibility
   }
   function setMeshVisibility(id, visibility) {
     return viewerStore.request(
-      mesh_schemas.visibility,
+      meshSchemas.visibility,
       { id, visibility },
       {
         response_function: () => {
           hybridViewerStore.setVisibility(id, visibility)
-          dataStyleStateStore.getStyle(id).visibility = visibility
+          dataStyleState.getStyle(id).visibility = visibility
           console.log(setMeshVisibility.name, { id }, meshVisibility(id))
         },
       },
@@ -42,21 +43,22 @@ export default function useMeshStyle() {
   }
 
   function applyMeshStyle(id) {
-    const style = dataStyleStateStore.getStyle(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 === "points") {
-        promise_array.push(meshPointsStyleStore.applyMeshPointsStyle(id))
+        promise_array.push(meshPointsStyle.applyMeshPointsStyle(id))
       } else if (key === "edges") {
-        promise_array.push(meshEdgesStyleStore.applyMeshEdgesStyle(id))
+        promise_array.push(meshEdgesStyle.applyMeshEdgesStyle(id))
       } else if (key === "cells") {
-        promise_array.push(meshCellsStyleStore.applyMeshCellsStyle(id))
+        promise_array.push(meshCellsStyle.applyMeshCellsStyle(id))
       } else if (key === "polygons") {
-        promise_array.push(meshPolygonsStyleStore.applyMeshPolygonsStyle(id))
+        promise_array.push(meshPolygonsStyle.applyMeshPolygonsStyle(id))
       } else if (key === "polyhedra") {
-        promise_array.push(meshPolyhedraStyleStore.applyMeshPolyhedraStyle(id))
+        promise_array.push(meshPolyhedraStyle.applyMeshPolyhedraStyle(id))
+      } else if (key === "attributes") {
       } else {
         throw new Error("Unknown mesh key: " + key)
       }
@@ -68,10 +70,10 @@ export default function useMeshStyle() {
     meshVisibility,
     setMeshVisibility,
     applyMeshStyle,
-    ...useMeshPointsStyle(),
-    ...useMeshEdgesStyle(),
-    ...useMeshCellsStyle(),
-    ...useMeshPolygonsStyle(),
-    ...useMeshPolyhedraStyle(),
+    ...meshPointsStyle,
+    ...meshEdgesStyle,
+    ...meshCellsStyle,
+    ...meshPolygonsStyle,
+    ...meshPolyhedraStyle,
   }
 }
diff --git a/internal/stores/data_style/mesh/points/color.js b/internal/stores/data_style/mesh/points/color.js
new file mode 100644
index 00000000..b2076f44
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/color.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.color
+
+export function useMeshPointsColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsColor(id) {
+    return meshPointsCommonStyle.meshPointsColoring(id).color
+  }
+  function setMeshPointsColor(id, color) {
+    return viewerStore.request(
+      meshPointsColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshPointsCommonStyle.meshPointsColoring(id).color = color
+          console.log(
+            setMeshPointsColor.name,
+            { id },
+            JSON.stringify(meshPointsColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsColor,
+    setMeshPointsColor,
+  }
+}
diff --git a/internal/stores/data_style/mesh/points/common.js b/internal/stores/data_style/mesh/points/common.js
new file mode 100644
index 00000000..a97307e3
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/common.js
@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshPointsCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshPointsStyle(id) {
+    return dataStyleStateStore.getStyle(id).points
+  }
+
+  function meshPointsColoring(id) {
+    return meshPointsStyle(id).coloring
+  }
+
+  function meshPointsActiveColoring(id) {
+    return meshPointsColoring(id).active
+  }
+
+  return {
+    meshPointsStyle,
+    meshPointsColoring,
+    meshPointsActiveColoring,
+  }
+}
diff --git a/internal/stores/data_style/mesh/points/index.js b/internal/stores/data_style/mesh/points/index.js
new file mode 100644
index 00000000..311aae40
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/index.js
@@ -0,0 +1,89 @@
+// Third party imports
+
+// Local imports
+import { useMeshPointsCommonStyle } from "./common"
+import { useMeshPointsVisibilityStyle } from "./visibility"
+import { useMeshPointsColorStyle } from "./color"
+import { useMeshPointsSizeStyle } from "./size"
+import { useMeshPointsVertexAttributeStyle } from "./vertex"
+
+// Local constants
+
+export function useMeshPointsStyle() {
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+  const meshPointsVisibility = useMeshPointsVisibilityStyle()
+  const meshPointsColorStyle = useMeshPointsColorStyle()
+  const meshPointsSizeStyle = useMeshPointsSizeStyle()
+  const meshPointsVertexAttributeStyle = useMeshPointsVertexAttributeStyle()
+
+  async function setMeshPointsActiveColoring(id, type) {
+    const coloring = meshPointsCommonStyle.meshPointsColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshPointsActiveColoring.name,
+      { id },
+      meshPointsCommonStyle.meshPointsActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshPointsColorStyle.setMeshPointsColor(
+        id,
+        meshPointsColorStyle.meshPointsColor(id),
+      )
+    } else if (type === "textures") {
+      const textures = meshPointsTexturesStore.meshPointsTextures(id)
+      if (textures === null) {
+        return Promise.resolve()
+      }
+      return meshPointsTexturesStore.setMeshPointsTextures(id, textures)
+    } else if (type === "vertex") {
+      const name =
+        meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshPointsVertexAttributeStyle.setMeshPointsVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "polygon") {
+      const name =
+        meshPointsPolygonAttributeStyleStore.meshPointsPolygonAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      await meshPointsPolygonAttributeStyleStore.setMeshPointsPolygonAttributeName(
+        id,
+        name,
+      )
+    } else {
+      throw new Error("Unknown mesh points coloring type: " + type)
+    }
+  }
+
+  function applyMeshPointsStyle(id) {
+    return Promise.all([
+      meshPointsVisibility.setMeshPointsVisibility(
+        id,
+        meshPointsVisibility.meshPointsVisibility(id),
+      ),
+      meshPointsSizeStyle.setMeshPointsSize(
+        id,
+        meshPointsSizeStyle.meshPointsSize(id),
+      ),
+      setMeshPointsActiveColoring(
+        id,
+        meshPointsCommonStyle.meshPointsActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    setMeshPointsActiveColoring,
+    applyMeshPointsStyle,
+    ...meshPointsCommonStyle,
+    ...meshPointsVisibility,
+    ...meshPointsColorStyle,
+    ...meshPointsSizeStyle,
+    ...meshPointsVertexAttributeStyle,
+  }
+}
diff --git a/internal/stores/data_style/mesh/points/size.js b/internal/stores/data_style/mesh/points/size.js
new file mode 100644
index 00000000..98488e33
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/size.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsSizeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.size
+
+export function useMeshPointsSizeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsSize(id) {
+    return meshPointsCommonStyle.meshPointsStyle(id).size
+  }
+  function setMeshPointsSize(id, size) {
+    return viewerStore.request(
+      meshPointsSizeSchemas,
+      { id, size },
+      {
+        response_function: () => {
+          meshPointsCommonStyle.meshPointsStyle(id).size = size
+          console.log(
+            setMeshPointsSize.name,
+            { id },
+            JSON.stringify(meshPointsSize(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsSize,
+    setMeshPointsSize,
+  }
+}
diff --git a/internal/stores/data_style/mesh/points/vertex.js b/internal/stores/data_style/mesh/points/vertex.js
new file mode 100644
index 00000000..0a559289
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/vertex.js
@@ -0,0 +1,153 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.attribute.vertex
+
+export function useMeshPointsVertexAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsVertexAttribute(id) {
+    return meshPointsCommonStyle.meshPointsColoring(id).vertex
+  }
+
+  async function updateMeshPointsVertexAttribute(id) {
+    const name = meshPointsVertexAttributeName(id)
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name)
+    await meshPointsVertexAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshPointsVertexAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshPointsVertexAttributeStoredConfig(id, name) {
+    const storedConfigs = meshPointsVertexAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshPointsVertexAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshPointsVertexAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshPointsVertexAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  function meshPointsVertexAttributeName(id) {
+    console.log(
+      meshPointsVertexAttributeName.name,
+      { id },
+      meshPointsVertexAttribute(id),
+    )
+    return meshPointsVertexAttribute(id).name
+  }
+  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, colorMap } =
+            meshPointsVertexAttributeStoredConfig(id, name)
+          await setMeshPointsVertexAttributeRange(id, minimum, maximum)
+          await setMeshPointsVertexAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshPointsVertexAttributeName.name,
+            { id },
+            meshPointsVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  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)
+    return viewerStore.request(
+      meshPointsVertexAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshPointsVertexAttributeRange.name,
+            { id },
+            meshPointsVertexAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  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)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsVertexAttributeName,
+    meshPointsVertexAttributeRange,
+    meshPointsVertexAttributeColorMap,
+    setMeshPointsVertexAttributeName,
+    setMeshPointsVertexAttributeRange,
+    setMeshPointsVertexAttributeColorMap,
+    updateMeshPointsVertexAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/points/visibility.js b/internal/stores/data_style/mesh/points/visibility.js
new file mode 100644
index 00000000..eadaf1bd
--- /dev/null
+++ b/internal/stores/data_style/mesh/points/visibility.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsVisibilitySchema =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.visibility
+
+export function useMeshPointsVisibilityStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsVisibility(id) {
+    return meshPointsCommonStyle.meshPointsStyle(id).visibility
+  }
+  function setMeshPointsVisibility(id, visibility) {
+    return viewerStore.request(
+      meshPointsVisibilitySchema,
+      { id, visibility },
+      {
+        response_function: () => {
+          meshPointsCommonStyle.meshPointsStyle(id).visibility = visibility
+          console.log(
+            setMeshPointsVisibility.name,
+            { id },
+            meshPointsVisibility(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsVisibility,
+    setMeshPointsVisibility,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polygons/color.js b/internal/stores/data_style/mesh/polygons/color.js
new file mode 100644
index 00000000..c1d49dd4
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/color.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPolygonsCommonStyle } from "./common"
+
+// Local constants
+const meshPolygonsColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polygons.color
+
+export function useMeshPolygonsColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+
+  function meshPolygonsColor(id) {
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).color
+  }
+  function setMeshPolygonsColor(id, color) {
+    return viewerStore.request(
+      meshPolygonsColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshPolygonsCommonStyle.meshPolygonsColoring(id).color = color
+          console.log(
+            setMeshPolygonsColor.name,
+            { id },
+            JSON.stringify(meshPolygonsColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolygonsColor,
+    setMeshPolygonsColor,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polygons/common.js b/internal/stores/data_style/mesh/polygons/common.js
new file mode 100644
index 00000000..831d46c9
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/common.js
@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshPolygonsCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshPolygonsStyle(id) {
+    return dataStyleStateStore.getStyle(id).polygons
+  }
+
+  function meshPolygonsColoring(id) {
+    return meshPolygonsStyle(id).coloring
+  }
+
+  function meshPolygonsActiveColoring(id) {
+    return meshPolygonsColoring(id).active
+  }
+
+  return {
+    meshPolygonsStyle,
+    meshPolygonsColoring,
+    meshPolygonsActiveColoring,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polygons/index.js b/internal/stores/data_style/mesh/polygons/index.js
new file mode 100644
index 00000000..24e97f90
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/index.js
@@ -0,0 +1,89 @@
+// Third party imports
+
+// Local imports
+import { useMeshPolygonsCommonStyle } from "./common"
+import { useMeshPolygonsVisibilityStyle } from "./visibility"
+import { useMeshPolygonsColorStyle } from "./color"
+import { useMeshPolygonsTexturesStyle } from "./textures"
+import { useMeshPolygonsVertexAttributeStyle } from "./vertex"
+import { useMeshPolygonsPolygonAttributeStyle } from "./polygon"
+
+// Local constants
+
+export function useMeshPolygonsStyle() {
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+  const meshPolygonsVisibility = useMeshPolygonsVisibilityStyle()
+  const meshPolygonsColorStyle = useMeshPolygonsColorStyle()
+  const meshPolygonsTexturesStyle = useMeshPolygonsTexturesStyle()
+  const meshPolygonsVertexAttributeStyle = useMeshPolygonsVertexAttributeStyle()
+  const meshPolygonsPolygonAttributeStyle =
+    useMeshPolygonsPolygonAttributeStyle()
+
+  async function setMeshPolygonsActiveColoring(id, type) {
+    const coloring = meshPolygonsCommonStyle.meshPolygonsColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshPolygonsActiveColoring.name,
+      { id },
+      meshPolygonsCommonStyle.meshPolygonsActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshPolygonsColorStyle.setMeshPolygonsColor(
+        id,
+        meshPolygonsColorStyle.meshPolygonsColor(id),
+      )
+    } else if (type === "textures") {
+      const textures = meshPolygonsTexturesStyle.meshPolygonsTextures(id)
+      if (textures === null) {
+        return Promise.resolve()
+      }
+      return meshPolygonsTexturesStyle.setMeshPolygonsTextures(id, textures)
+    } else if (type === "vertex") {
+      const name =
+        meshPolygonsVertexAttributeStyle.meshPolygonsVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshPolygonsVertexAttributeStyle.setMeshPolygonsVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "polygon") {
+      const name =
+        meshPolygonsPolygonAttributeStyle.meshPolygonsPolygonAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      await meshPolygonsPolygonAttributeStyle.setMeshPolygonsPolygonAttributeName(
+        id,
+        name,
+      )
+    } else {
+      throw new Error("Unknown mesh polygons coloring type: " + type)
+    }
+  }
+
+  function applyMeshPolygonsStyle(id) {
+    return Promise.all([
+      meshPolygonsVisibility.setMeshPolygonsVisibility(
+        id,
+        meshPolygonsVisibility.meshPolygonsVisibility(id),
+      ),
+      setMeshPolygonsActiveColoring(
+        id,
+        meshPolygonsCommonStyle.meshPolygonsActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    setMeshPolygonsActiveColoring,
+    applyMeshPolygonsStyle,
+    ...meshPolygonsCommonStyle,
+    ...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
new file mode 100644
index 00000000..82b3ce1e
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/polygon.js
@@ -0,0 +1,145 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshPolygonsCommonStyle } from "./common"
+
+// Local constants
+const meshPolygonsPolygonAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polygons.attribute.polygon
+
+export function useMeshPolygonsPolygonAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+
+  function meshPolygonsPolygonAttribute(id) {
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).polygon
+  }
+
+  async function updateMeshPolygonsPolygonAttribute(id) {
+    const name = meshPolygonsPolygonAttributeName(id)
+    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name)
+    await meshPolygonsPolygonAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshPolygonsPolygonAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshPolygonsPolygonAttributeStoredConfig(id, name) {
+    const storedConfigs = meshPolygonsPolygonAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshPolygonsPolygonAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshPolygonsPolygonAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshPolygonsPolygonAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  function meshPolygonsPolygonAttributeName(id) {
+    return meshPolygonsPolygonAttribute(id).name
+  }
+  function setMeshPolygonsPolygonAttributeName(id, name) {
+    return viewerStore.request(
+      meshPolygonsPolygonAttributeSchemas.name,
+      { id, name },
+      {
+        response_function: () => {
+          meshPolygonsPolygonAttribute(id).name = name
+          console.log(
+            setMeshPolygonsPolygonAttributeName.name,
+            { id },
+            meshPolygonsPolygonAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+  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]
+  }
+  async function setMeshPolygonsPolygonAttributeRange(id, minimum, maximum) {
+    console.log(setMeshPolygonsPolygonAttributeRange.name, {
+      id,
+      minimum,
+      maximum,
+    })
+    const name = meshPolygonsPolygonAttributeName(id)
+    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name)
+    return viewerStore.request(
+      meshPolygonsPolygonAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshPolygonsPolygonAttributeRange.name,
+            { id },
+            meshPolygonsPolygonAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshPolygonsPolygonAttributeColorMap(id) {
+    const name = meshPolygonsPolygonAttributeName(id)
+    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name)
+    const { colorMap } = storedConfig
+    return colorMap
+  }
+  function setMeshPolygonsPolygonAttributeColorMap(id, colorMap) {
+    const name = meshPolygonsPolygonAttributeName(id)
+    const storedConfig = meshPolygonsPolygonAttributeStoredConfig(id, name)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolygonsPolygonAttributeName,
+    meshPolygonsPolygonAttributeRange,
+    meshPolygonsPolygonAttributeColorMap,
+    setMeshPolygonsPolygonAttributeName,
+    setMeshPolygonsPolygonAttributeRange,
+    setMeshPolygonsPolygonAttributeColorMap,
+    updateMeshPolygonsPolygonAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polygons/textures.js b/internal/stores/data_style/mesh/polygons/textures.js
new file mode 100644
index 00000000..47bab490
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/textures.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPolygonsCommonStyle } from "./common"
+
+// Local constants
+const meshPolygonsTexturesSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polygons.apply_textures
+
+export function useMeshPolygonsTexturesStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+
+  function meshPolygonsTextures(id) {
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).textures
+  }
+  function setMeshPolygonsTextures(id, textures) {
+    return viewerStore.request(
+      meshPolygonsTexturesSchemas,
+      { id, textures },
+      {
+        response_function: () => {
+          meshPolygonsCommonStyle.meshPolygonsColoring(id).textures = textures
+          console.log(
+            setMeshPolygonsTextures.name,
+            { id },
+            meshPolygonsTextures(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolygonsTextures,
+    setMeshPolygonsTextures,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polygons/vertex.js b/internal/stores/data_style/mesh/polygons/vertex.js
new file mode 100644
index 00000000..957eee2b
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/vertex.js
@@ -0,0 +1,153 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshPolygonsCommonStyle } from "./common"
+
+// Local constants
+const meshPolygonsVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polygons.attribute.vertex
+
+export function useMeshPolygonsVertexAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+
+  function meshPolygonsVertexAttribute(id) {
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).vertex
+  }
+
+  async function updateMeshPolygonsVertexAttribute(id) {
+    const name = meshPolygonsVertexAttributeName(id)
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name)
+    await meshPolygonsVertexAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshPolygonsVertexAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshPolygonsVertexAttributeStoredConfig(id, name) {
+    const storedConfigs = meshPolygonsVertexAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshPolygonsVertexAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshPolygonsVertexAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshPolygonsVertexAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  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, colorMap } =
+            meshPolygonsVertexAttributeStoredConfig(id, name)
+          await setMeshPolygonsVertexAttributeRange(id, minimum, maximum)
+          await setMeshPolygonsVertexAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshPolygonsVertexAttributeName.name,
+            { id },
+            meshPolygonsVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshPolygonsVertexAttributeRange(id) {
+    const name = meshPolygonsVertexAttributeName(id)
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name)
+    const { minimum, maximum } = storedConfig
+    return [minimum, maximum]
+  }
+  function setMeshPolygonsVertexAttributeRange(id, minimum, maximum) {
+    const name = meshPolygonsVertexAttributeName(id)
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name)
+    return viewerStore.request(
+      meshPolygonsVertexAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshPolygonsVertexAttributeRange.name,
+            { id },
+            meshPolygonsVertexAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshPolygonsVertexAttributeColorMap(id) {
+    const name = meshPolygonsVertexAttributeName(id)
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name)
+    const { colorMap } = storedConfig
+    return colorMap
+  }
+  function setMeshPolygonsVertexAttributeColorMap(id, colorMap) {
+    const name = meshPolygonsVertexAttributeName(id)
+    const storedConfig = meshPolygonsVertexAttributeStoredConfig(id, name)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolygonsVertexAttributeName,
+    meshPolygonsVertexAttributeRange,
+    meshPolygonsVertexAttributeColorMap,
+    setMeshPolygonsVertexAttributeName,
+    setMeshPolygonsVertexAttributeRange,
+    setMeshPolygonsVertexAttributeColorMap,
+    updateMeshPolygonsVertexAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polygons/visibility.js b/internal/stores/data_style/mesh/polygons/visibility.js
new file mode 100644
index 00000000..1b74af44
--- /dev/null
+++ b/internal/stores/data_style/mesh/polygons/visibility.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPolygonsCommonStyle } from "./common"
+
+// Local constants
+const meshPolygonsVisibilitySchema =
+  viewer_schemas.opengeodeweb_viewer.mesh.polygons.visibility
+
+export function useMeshPolygonsVisibilityStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+
+  function meshPolygonsVisibility(id) {
+    return meshPolygonsCommonStyle.meshPolygonsStyle(id).visibility
+  }
+  function setMeshPolygonsVisibility(id, visibility) {
+    return viewerStore.request(
+      meshPolygonsVisibilitySchema,
+      { id, visibility },
+      {
+        response_function: () => {
+          meshPolygonsCommonStyle.meshPolygonsStyle(id).visibility = visibility
+          console.log(
+            setMeshPolygonsVisibility.name,
+            { id },
+            meshPolygonsVisibility(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolygonsVisibility,
+    setMeshPolygonsVisibility,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/color.js b/internal/stores/data_style/mesh/polyhedra/color.js
new file mode 100644
index 00000000..121dbc19
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/color.js
@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPolyhedraCommonStyle } from "./common"
+
+// Local constants
+const meshPolyhedraColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.color
+
+export function useMeshPolyhedraColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle()
+
+  function meshPolyhedraColor(id) {
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color
+  }
+  function setMeshPolyhedraColor(id, color) {
+    return viewerStore.request(
+      meshPolyhedraColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color = color
+          console.log(
+            setMeshPolyhedraColor.name,
+            { id },
+            JSON.stringify(meshPolyhedraColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolyhedraColor,
+    setMeshPolyhedraColor,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/common.js b/internal/stores/data_style/mesh/polyhedra/common.js
new file mode 100644
index 00000000..43ab982a
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/common.js
@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshPolyhedraCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshPolyhedraStyle(id) {
+    return dataStyleStateStore.getStyle(id).polyhedra
+  }
+
+  function meshPolyhedraColoring(id) {
+    return meshPolyhedraStyle(id).coloring
+  }
+
+  function meshPolyhedraActiveColoring(id) {
+    return meshPolyhedraColoring(id).active
+  }
+
+  return {
+    meshPolyhedraStyle,
+    meshPolyhedraColoring,
+    meshPolyhedraActiveColoring,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/index.js b/internal/stores/data_style/mesh/polyhedra/index.js
new file mode 100644
index 00000000..33d4cd51
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/index.js
@@ -0,0 +1,83 @@
+// Third party imports
+
+// Local imports
+import { useMeshPolyhedraCommonStyle } from "./common"
+import { useMeshPolyhedraVisibilityStyle } from "./visibility"
+import { useMeshPolyhedraColorStyle } from "./color"
+import { useMeshPolyhedraVertexAttributeStyle } from "./vertex"
+import { useMeshPolyhedraPolyhedronAttributeStyle } from "./polyhedron"
+
+// Local constants
+
+export function useMeshPolyhedraStyle() {
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle()
+  const meshPolyhedraVisibility = useMeshPolyhedraVisibilityStyle()
+  const meshPolyhedraColorStyle = useMeshPolyhedraColorStyle()
+  const meshPolyhedraVertexAttributeStyle =
+    useMeshPolyhedraVertexAttributeStyle()
+  const meshPolyhedraPolyhedronAttributeStyle =
+    useMeshPolyhedraPolyhedronAttributeStyle()
+
+  async function setMeshPolyhedraActiveColoring(id, type) {
+    const coloring = meshPolyhedraCommonStyle.meshPolyhedraColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshPolyhedraActiveColoring.name,
+      { id },
+      meshPolyhedraCommonStyle.meshPolyhedraActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshPolyhedraColorStyle.setMeshPolyhedraColor(
+        id,
+        meshPolyhedraColorStyle.meshPolyhedraColor(id),
+      )
+    } else if (type === "vertex") {
+      const name =
+        meshPolyhedraVertexAttributeStyle.meshPolyhedraVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshPolyhedraVertexAttributeStyle.setMeshPolyhedraVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "polyhedron") {
+      const name =
+        meshPolyhedraPolyhedronAttributeStyle.meshPolyhedraPolyhedronAttributeName(
+          id,
+        )
+      if (name === null) {
+        return Promise.resolve()
+      }
+      await meshPolyhedraPolyhedronAttributeStyle.setMeshPolyhedraPolyhedronAttributeName(
+        id,
+        name,
+      )
+    } else {
+      throw new Error("Unknown mesh polyhedra coloring type: " + type)
+    }
+  }
+
+  function applyMeshPolyhedraStyle(id) {
+    return Promise.all([
+      meshPolyhedraVisibility.setMeshPolyhedraVisibility(
+        id,
+        meshPolyhedraVisibility.meshPolyhedraVisibility(id),
+      ),
+      setMeshPolyhedraActiveColoring(
+        id,
+        meshPolyhedraCommonStyle.meshPolyhedraActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    setMeshPolyhedraActiveColoring,
+    applyMeshPolyhedraStyle,
+    ...meshPolyhedraCommonStyle,
+    ...meshPolyhedraVisibility,
+    ...meshPolyhedraColorStyle,
+    ...meshPolyhedraVertexAttributeStyle,
+    ...meshPolyhedraPolyhedronAttributeStyle,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/polyhedron.js b/internal/stores/data_style/mesh/polyhedra/polyhedron.js
new file mode 100644
index 00000000..450d9d68
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/polyhedron.js
@@ -0,0 +1,139 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshPolyhedraCommonStyle } from "./common"
+
+// Local constants
+const meshPolyhedraPolyhedronAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.attribute.polyhedron
+
+export function useMeshPolyhedraPolyhedronAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle()
+
+  function meshPolyhedraPolyhedronAttribute(id) {
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).polyhedron
+  }
+
+  async function updateMeshPolyhedraPolyhedronAttribute(id) {
+    const name = meshPolyhedraPolyhedronAttributeName(id)
+    const storedConfig = meshPolyhedraPolyhedronAttributeStoredConfig(id, name)
+    await meshPolyhedraPolyhedronAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshPolyhedraPolyhedronAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshPolyhedraPolyhedronAttributeStoredConfig(id, name) {
+    const storedConfigs = meshPolyhedraPolyhedronAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshPolyhedraPolyhedronAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshPolyhedraPolyhedronAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshPolyhedraPolyhedronAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  function meshPolyhedraPolyhedronAttributeName(id) {
+    return meshPolyhedraPolyhedronAttribute(id).name
+  }
+  function setMeshPolyhedraPolyhedronAttributeName(id, name) {
+    return viewerStore.request(
+      meshPolyhedraPolyhedronAttributeSchemas.name,
+      { id, name },
+      {
+        response_function: async () => {
+          meshPolyhedraPolyhedronAttribute(id).name = name
+          const { minimum, maximum, colorMap } =
+            meshPolyhedraPolyhedronAttributeStoredConfig(id, name)
+          await setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum)
+          await setMeshPolyhedraPolyhedronAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshPolyhedraPolyhedronAttributeName.name,
+            { id },
+            meshPolyhedraPolyhedronAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+  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)
+    return viewerStore.request(
+      meshPolyhedraPolyhedronAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshPolyhedraPolyhedronAttributeRange.name,
+            { id },
+            meshPolyhedraPolyhedronAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  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)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolyhedraPolyhedronAttributeName,
+    meshPolyhedraPolyhedronAttributeRange,
+    meshPolyhedraPolyhedronAttributeColorMap,
+    setMeshPolyhedraPolyhedronAttributeName,
+    setMeshPolyhedraPolyhedronAttributeRange,
+    setMeshPolyhedraPolyhedronAttributeColorMap,
+    updateMeshPolyhedraPolyhedronAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/vertex.js b/internal/stores/data_style/mesh/polyhedra/vertex.js
new file mode 100644
index 00000000..c6f98791
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/vertex.js
@@ -0,0 +1,153 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshPolyhedraCommonStyle } from "./common"
+
+// Local constants
+const meshPolyhedraVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.attribute.vertex
+
+export function useMeshPolyhedraVertexAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle()
+
+  function meshPolyhedraVertexAttribute(id) {
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).vertex
+  }
+
+  async function updateMeshPolyhedraVertexAttribute(id) {
+    const name = meshPolyhedraVertexAttributeName(id)
+    const storedConfig = meshPolyhedraVertexAttributeStoredConfig(id, name)
+    await meshPolyhedraVertexAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshPolyhedraVertexAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshPolyhedraVertexAttributeStoredConfig(id, name) {
+    const storedConfigs = meshPolyhedraVertexAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshPolyhedraVertexAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshPolyhedraVertexAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshPolyhedraVertexAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  function meshPolyhedraVertexAttributeName(id) {
+    console.log(
+      meshPolyhedraVertexAttributeName.name,
+      { id },
+      meshPolyhedraVertexAttribute(id),
+    )
+    return meshPolyhedraVertexAttribute(id).name
+  }
+  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, colorMap } =
+            meshPolyhedraVertexAttributeStoredConfig(id, name)
+          await setMeshPolyhedraVertexAttributeRange(id, minimum, maximum)
+          await setMeshPolyhedraVertexAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshPolyhedraVertexAttributeName.name,
+            { id },
+            meshPolyhedraVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  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)
+    return viewerStore.request(
+      meshPolyhedraVertexAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshPolyhedraVertexAttributeRange.name,
+            { id },
+            meshPolyhedraVertexAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  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)
+    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),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolyhedraVertexAttributeName,
+    meshPolyhedraVertexAttributeRange,
+    meshPolyhedraVertexAttributeColorMap,
+    setMeshPolyhedraVertexAttributeName,
+    setMeshPolyhedraVertexAttributeRange,
+    setMeshPolyhedraVertexAttributeColorMap,
+    updateMeshPolyhedraVertexAttribute,
+  }
+}
diff --git a/internal/stores/data_style/mesh/polyhedra/visibility.js b/internal/stores/data_style/mesh/polyhedra/visibility.js
new file mode 100644
index 00000000..2b161114
--- /dev/null
+++ b/internal/stores/data_style/mesh/polyhedra/visibility.js
@@ -0,0 +1,41 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshPolyhedraCommonStyle } from "./common"
+
+// Local constants
+const meshPolyhedraVisibilitySchema =
+  viewer_schemas.opengeodeweb_viewer.mesh.polyhedra.visibility
+
+export function useMeshPolyhedraVisibilityStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle()
+
+  function meshPolyhedraVisibility(id) {
+    return meshPolyhedraCommonStyle.meshPolyhedraStyle(id).visibility
+  }
+  function setMeshPolyhedraVisibility(id, visibility) {
+    return viewerStore.request(
+      meshPolyhedraVisibilitySchema,
+      { id, visibility },
+      {
+        response_function: () => {
+          meshPolyhedraCommonStyle.meshPolyhedraStyle(id).visibility =
+            visibility
+          console.log(
+            setMeshPolyhedraVisibility.name,
+            { id },
+            meshPolyhedraVisibility(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolyhedraVisibility,
+    setMeshPolyhedraVisibility,
+  }
+}
diff --git a/internal/stores/model/blocks.js b/internal/stores/data_style/model/blocks.js
similarity index 98%
rename from internal/stores/model/blocks.js
rename to internal/stores/data_style/model/blocks.js
index c5e8c731..08a13fc8 100644
--- a/internal/stores/model/blocks.js
+++ b/internal/stores/data_style/model/blocks.js
@@ -3,7 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data"
-import { useDataStyleStateStore } from "../data_style_state"
+import { useDataStyleStateStore } from "../state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 
 // Local constants
diff --git a/internal/stores/model/corners.js b/internal/stores/data_style/model/corners.js
similarity index 98%
rename from internal/stores/model/corners.js
rename to internal/stores/data_style/model/corners.js
index fdbf7b3c..916c511e 100644
--- a/internal/stores/model/corners.js
+++ b/internal/stores/data_style/model/corners.js
@@ -3,7 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data"
-import { useDataStyleStateStore } from "../data_style_state"
+import { useDataStyleStateStore } from "../state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 
 // Local constants
diff --git a/internal/stores/model/edges.js b/internal/stores/data_style/model/edges.js
similarity index 95%
rename from internal/stores/model/edges.js
rename to internal/stores/data_style/model/edges.js
index 0a62e40f..cf713b57 100644
--- a/internal/stores/model/edges.js
+++ b/internal/stores/data_style/model/edges.js
@@ -2,7 +2,7 @@
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
 // Local imports
-import { useDataStyleStateStore } from "../data_style_state"
+import { useDataStyleStateStore } from "../state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 
 // Local constants
diff --git a/internal/stores/model/index.js b/internal/stores/data_style/model/index.js
similarity index 99%
rename from internal/stores/model/index.js
rename to internal/stores/data_style/model/index.js
index 7d83cfa8..28f8d3fd 100644
--- a/internal/stores/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -3,7 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
-import { useDataStyleStateStore } from "../data_style_state"
+import { useDataStyleStateStore } from "../state"
 import { useDataStore } from "@ogw_front/stores/data"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 import { useModelSurfacesStyle } from "./surfaces"
diff --git a/internal/stores/model/lines.js b/internal/stores/data_style/model/lines.js
similarity index 98%
rename from internal/stores/model/lines.js
rename to internal/stores/data_style/model/lines.js
index da83d8e2..7fd8c16b 100644
--- a/internal/stores/model/lines.js
+++ b/internal/stores/data_style/model/lines.js
@@ -3,7 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data"
-import { useDataStyleStateStore } from "../data_style_state"
+import { useDataStyleStateStore } from "../state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 
 // Local constants
diff --git a/internal/stores/model/points.js b/internal/stores/data_style/model/points.js
similarity index 96%
rename from internal/stores/model/points.js
rename to internal/stores/data_style/model/points.js
index 7d940ca7..42966937 100644
--- a/internal/stores/model/points.js
+++ b/internal/stores/data_style/model/points.js
@@ -2,7 +2,7 @@
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
 // Local imports
-import { useDataStyleStateStore } from "../data_style_state"
+import { useDataStyleStateStore } from "../state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 
 // Local constants
diff --git a/internal/stores/model/surfaces.js b/internal/stores/data_style/model/surfaces.js
similarity index 98%
rename from internal/stores/model/surfaces.js
rename to internal/stores/data_style/model/surfaces.js
index 5138f836..c96f1f5d 100644
--- a/internal/stores/model/surfaces.js
+++ b/internal/stores/data_style/model/surfaces.js
@@ -3,7 +3,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useDataStore } from "@ogw_front/stores/data"
-import { useDataStyleStateStore } from "../data_style_state"
+import { useDataStyleStateStore } from "../state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
 
 // Local constants
diff --git a/internal/stores/data_style_state.js b/internal/stores/data_style/state.js
similarity index 83%
rename from internal/stores/data_style_state.js
rename to internal/stores/data_style/state.js
index 3b5dd49d..e0b5f2f1 100644
--- a/internal/stores/data_style_state.js
+++ b/internal/stores/data_style/state.js
@@ -1,5 +1,3 @@
-import { reactive, computed } from "vue"
-
 export const useDataStyleStateStore = defineStore("dataStyleState", () => {
   const styles = reactive({})
 
@@ -23,5 +21,10 @@ export const useDataStyleStateStore = defineStore("dataStyleState", () => {
     return styles[id]
   }
 
-  return { getStyle, styles, objectVisibility, selectedObjects }
+  return {
+    getStyle,
+    styles,
+    objectVisibility,
+    selectedObjects,
+  }
 })
diff --git a/internal/stores/mesh/cells.js b/internal/stores/mesh/cells.js
deleted file mode 100644
index 0596063f..00000000
--- a/internal/stores/mesh/cells.js
+++ /dev/null
@@ -1,175 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
-
-import { useDataStyleStateStore } from "../data_style_state"
-import { useViewerStore } from "@ogw_front/stores/viewer"
-
-// Local constants
-const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells
-export function useMeshCellsStyle() {
-  const dataStyleStateStore = useDataStyleStateStore()
-  const viewerStore = useViewerStore()
-
-  function meshCellsStyle(id) {
-    return dataStyleStateStore.getStyle(id).cells
-  }
-
-  function meshCellsVisibility(id) {
-    return meshCellsStyle(id).visibility
-  }
-  function setMeshCellsVisibility(id, visibility) {
-    const cells_style = meshCellsStyle(id)
-    return viewerStore.request(
-      mesh_cells_schemas.visibility,
-      { id, visibility },
-      {
-        response_function: () => {
-          cells_style.visibility = visibility
-          console.log(
-            setMeshCellsVisibility.name,
-            { id },
-            meshCellsVisibility(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshCellsColor(id) {
-    return meshCellsStyle(id).coloring.color
-  }
-  function setMeshCellsColor(id, color) {
-    const coloring_style = meshCellsStyle(id).coloring
-    return viewerStore.request(
-      mesh_cells_schemas.color,
-      { id, color },
-      {
-        response_function: () => {
-          coloring_style.color = color
-          console.log(
-            setMeshCellsColor.name,
-            { id },
-            JSON.stringify(meshCellsColor(id)),
-          )
-        },
-      },
-    )
-  }
-
-  function meshCellsTextures(id) {
-    return meshCellsStyle(id).coloring.textures
-  }
-  function setMeshCellsTextures(id, textures) {
-    const coloring_style = meshCellsStyle(id).coloring
-    return viewerStore.request(
-      mesh_cells_schemas.apply_textures,
-      { id, textures },
-      {
-        response_function: () => {
-          coloring_style.textures = textures
-          console.log(setMeshCellsTextures.name, { id }, meshCellsTextures(id))
-        },
-      },
-    )
-  }
-
-  function meshCellsVertexAttribute(id) {
-    return meshCellsStyle(id).coloring.vertex
-  }
-
-  function setMeshCellsVertexAttribute(id, vertex_attribute) {
-    const coloring_style = meshCellsStyle(id).coloring
-    return viewerStore.request(
-      mesh_cells_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
-      {
-        response_function: () => {
-          coloring_style.vertex = vertex_attribute
-          console.log(
-            setMeshCellsVertexAttribute.name,
-            { id },
-            meshCellsVertexAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshCellsCellAttribute(id) {
-    return meshCellsStyle(id).coloring.cell
-  }
-  function setMeshCellsCellAttribute(id, cell_attribute) {
-    const coloring_style = meshCellsStyle(id).coloring
-    return viewerStore.request(
-      mesh_cells_schemas.cell_attribute,
-      { id, ...cell_attribute },
-      {
-        response_function: () => {
-          coloring_style.cell = cell_attribute
-          console.log(
-            setMeshCellsCellAttribute.name,
-            { id },
-            meshCellsCellAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshCellsActiveColoring(id) {
-    return meshCellsStyle(id).coloring.active
-  }
-  function setMeshCellsActiveColoring(id, type) {
-    const coloring = meshCellsStyle(id).coloring
-    coloring.active = type
-    console.log(
-      setMeshCellsActiveColoring.name,
-      { id },
-      meshCellsActiveColoring(id),
-    )
-    if (type === "color") {
-      return setMeshCellsColor(id, coloring.color)
-    } else if (type === "textures") {
-      if (coloring.textures === null) {
-        throw new Error("Textures not set")
-      }
-      return setMeshCellsTextures(id, coloring.textures)
-    } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
-      }
-      return setMeshCellsVertexAttribute(id, coloring.vertex)
-    } else if (type === "cell") {
-      if (coloring.cell === null) {
-        throw new Error("Cell attribute not set")
-      }
-      return setMeshCellsCellAttribute(id, coloring.cell)
-    } else {
-      throw new Error("Unknown mesh cells coloring type: " + type)
-    }
-  }
-
-  function applyMeshCellsStyle(id) {
-    const style = meshCellsStyle(id)
-    return Promise.all([
-      setMeshCellsVisibility(id, style.visibility),
-      setMeshCellsActiveColoring(id, style.coloring.active),
-    ])
-  }
-
-  return {
-    meshCellsVisibility,
-    meshCellsActiveColoring,
-    meshCellsColor,
-    meshCellsTextures,
-    meshCellsCellAttribute,
-    meshCellsVertexAttribute,
-    setMeshCellsVisibility,
-    setMeshCellsActiveColoring,
-    setMeshCellsColor,
-    setMeshCellsTextures,
-    setMeshCellsVertexAttribute,
-    setMeshCellsCellAttribute,
-    applyMeshCellsStyle,
-  }
-}
diff --git a/internal/stores/mesh/edges.js b/internal/stores/mesh/edges.js
deleted file mode 100644
index db16c41d..00000000
--- a/internal/stores/mesh/edges.js
+++ /dev/null
@@ -1,171 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
-
-// Local imports
-import { useDataStyleStateStore } from "../data_style_state"
-import { useViewerStore } from "@ogw_front/stores/viewer"
-
-// Local constants
-const mesh_edges_schemas = viewer_schemas.opengeodeweb_viewer.mesh.edges
-
-export function useMeshEdgesStyle() {
-  const dataStyleStateStore = useDataStyleStateStore()
-  const viewerStore = useViewerStore()
-
-  function meshEdgesStyle(id) {
-    return dataStyleStateStore.getStyle(id).edges
-  }
-
-  function meshEdgesVisibility(id) {
-    return meshEdgesStyle(id).visibility
-  }
-  function setMeshEdgesVisibility(id, visibility) {
-    return viewerStore.request(
-      mesh_edges_schemas.visibility,
-      { id, visibility },
-      {
-        response_function: () => {
-          meshEdgesStyle(id).visibility = visibility
-          console.log(
-            setMeshEdgesVisibility.name,
-            { id },
-            meshEdgesVisibility(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshEdgesActiveColoring(id) {
-    return meshEdgesStyle(id).coloring.active
-  }
-  function setMeshEdgesActiveColoring(id, type) {
-    const coloring = meshEdgesStyle(id).coloring
-    coloring.active = type
-    console.log(
-      setMeshEdgesActiveColoring.name,
-      { id },
-      meshEdgesActiveColoring(id),
-    )
-    if (type === "color") {
-      return setMeshEdgesColor(id, coloring.color)
-    } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
-      }
-      return setMeshEdgesVertexAttribute(id, coloring.vertex)
-    } else if (type === "edge") {
-      if (coloring.edge === null) {
-        throw new Error("Edge attribute not set")
-      }
-      return setMeshEdgesEdgeAttribute(id, coloring.edge)
-    } else {
-      throw new Error("Unknown mesh edges coloring type: " + type)
-    }
-  }
-
-  function meshEdgesColor(id) {
-    return meshEdgesStyle(id).coloring.color
-  }
-  function setMeshEdgesColor(id, color) {
-    const coloring_style = meshEdgesStyle(id).coloring
-    return viewerStore.request(
-      mesh_edges_schemas.color,
-      { id, color },
-      {
-        response_function: () => {
-          coloring_style.color = color
-          console.log(
-            setMeshEdgesColor.name,
-            { id },
-            JSON.stringify(meshEdgesColor(id)),
-          )
-        },
-      },
-    )
-  }
-
-  function meshEdgesWidth(id) {
-    return meshEdgesStyle(id).width
-  }
-  function setMeshEdgesWidth(id, width) {
-    const edges_style = meshEdgesStyle(id)
-    return viewerStore.request(
-      mesh_edges_schemas.width,
-      { id, width },
-      {
-        response_function: () => {
-          edges_style.width = width
-          console.log(setMeshEdgesWidth.name, { id }, meshEdgesWidth(id))
-        },
-      },
-    )
-  }
-
-  function meshEdgesVertexAttribute(id) {
-    return meshEdgesStyle(id).coloring.vertex
-  }
-  function setMeshEdgesVertexAttribute(id, vertex_attribute) {
-    const coloring_style = meshEdgesStyle(id).coloring
-    return viewerStore.request(
-      mesh_edges_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
-      {
-        response_function: () => {
-          coloring_style.vertex = vertex_attribute
-          console.log(
-            setMeshEdgesVertexAttribute.name,
-            { id },
-            meshEdgesVertexAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshEdgesEdgeAttribute(id) {
-    return meshEdgesStyle(id).coloring.edge
-  }
-  function setMeshEdgesEdgeAttribute(id, edge_attribute) {
-    const coloring_style = meshEdgesStyle(id).coloring
-    return viewerStore.request(
-      mesh_edges_schemas.edge_attribute,
-      { id, ...edge_attribute },
-      {
-        response_function: () => {
-          coloring_style.edge = edge_attribute
-          console.log(
-            setMeshEdgesEdgeAttribute.name,
-            { id },
-            meshEdgesEdgeAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function applyMeshEdgesStyle(id) {
-    const style = meshEdgesStyle(id)
-    return Promise.all([
-      setMeshEdgesVisibility(id, style.visibility),
-      setMeshEdgesActiveColoring(id, style.coloring.active),
-      setMeshEdgesWidth(id, style.width),
-    ])
-  }
-
-  return {
-    applyMeshEdgesStyle,
-    meshEdgesActiveColoring,
-    meshEdgesColor,
-    meshEdgesVisibility,
-    meshEdgesWidth,
-    meshEdgesVertexAttribute,
-    meshEdgesEdgeAttribute,
-    setMeshEdgesActiveColoring,
-    setMeshEdgesColor,
-    setMeshEdgesVisibility,
-    setMeshEdgesWidth,
-    setMeshEdgesVertexAttribute,
-    setMeshEdgesEdgeAttribute,
-  }
-}
diff --git a/internal/stores/mesh/points.js b/internal/stores/mesh/points.js
deleted file mode 100644
index 45ccd45a..00000000
--- a/internal/stores/mesh/points.js
+++ /dev/null
@@ -1,142 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
-
-// Local imports
-import { useDataStyleStateStore } from "../data_style_state"
-import { useViewerStore } from "@ogw_front/stores/viewer"
-
-// Local constants
-const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points
-
-export function useMeshPointsStyle() {
-  const dataStyleStateStore = useDataStyleStateStore()
-  const viewerStore = useViewerStore()
-
-  function meshPointsStyle(id) {
-    return dataStyleStateStore.getStyle(id).points
-  }
-
-  function meshPointsVisibility(id) {
-    return meshPointsStyle(id).visibility
-  }
-  function setMeshPointsVisibility(id, visibility) {
-    const points_style = meshPointsStyle(id)
-    return viewerStore.request(
-      mesh_points_schemas.visibility,
-      { id, visibility },
-      {
-        response_function: () => {
-          points_style.visibility = visibility
-          console.log(
-            setMeshPointsVisibility.name,
-            { id },
-            meshPointsVisibility(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPointsActiveColoring(id) {
-    return meshPointsStyle(id).coloring.active
-  }
-  function setMeshPointsActiveColoring(id, type) {
-    const coloring = meshPointsStyle(id).coloring
-    coloring.active = type
-    console.log(
-      setMeshPointsActiveColoring.name,
-      { id },
-      meshPointsActiveColoring(id),
-    )
-    if (type === "color") {
-      return setMeshPointsColor(id, coloring.color)
-    } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
-      }
-      return setMeshPointsVertexAttribute(id, coloring.vertex)
-    } else {
-      throw new Error("Unknown mesh points coloring type: " + type)
-    }
-  }
-
-  function meshPointsColor(id) {
-    return meshPointsStyle(id).coloring.color
-  }
-  function setMeshPointsColor(id, color) {
-    const coloring_style = meshPointsStyle(id).coloring
-    return viewerStore.request(
-      mesh_points_schemas.color,
-      { id, color },
-      {
-        response_function: () => {
-          coloring_style.color = color
-          console.log(
-            setMeshPointsColor.name,
-            { id },
-            JSON.stringify(meshPointsColor(id)),
-          )
-        },
-      },
-    )
-  }
-  function meshPointsVertexAttribute(id) {
-    return meshPointsStyle(id).coloring.vertex
-  }
-  function setMeshPointsVertexAttribute(id, vertex_attribute) {
-    const coloring_style = meshPointsStyle(id).coloring
-    return viewerStore.request(
-      mesh_points_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
-      {
-        response_function: () => {
-          coloring_style.vertex = vertex_attribute
-          console.log(
-            setMeshPointsVertexAttribute.name,
-            { id },
-            meshPointsVertexAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPointsSize(id) {
-    return meshPointsStyle(id).size
-  }
-  function setMeshPointsSize(id, size) {
-    return viewerStore.request(
-      mesh_points_schemas.size,
-      { id, size },
-      {
-        response_function: () => {
-          meshPointsStyle(id).size = size
-          console.log(setMeshPointsSize.name, { id }, meshPointsSize(id))
-        },
-      },
-    )
-  }
-
-  function applyMeshPointsStyle(id) {
-    const style = meshPointsStyle(id)
-    return Promise.all([
-      setMeshPointsVisibility(id, style.visibility),
-      setMeshPointsActiveColoring(id, style.coloring.active),
-      setMeshPointsSize(id, style.size),
-    ])
-  }
-
-  return {
-    meshPointsVisibility,
-    meshPointsActiveColoring,
-    meshPointsColor,
-    meshPointsVertexAttribute,
-    meshPointsSize,
-    setMeshPointsVisibility,
-    setMeshPointsActiveColoring,
-    setMeshPointsColor,
-    setMeshPointsVertexAttribute,
-    setMeshPointsSize,
-    applyMeshPointsStyle,
-  }
-}
diff --git a/internal/stores/mesh/polygons.js b/internal/stores/mesh/polygons.js
deleted file mode 100644
index 524c384c..00000000
--- a/internal/stores/mesh/polygons.js
+++ /dev/null
@@ -1,181 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
-
-// Local imports
-import { useDataStyleStateStore } from "../data_style_state"
-import { useViewerStore } from "@ogw_front/stores/viewer"
-
-// Local constants
-const mesh_polygons_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polygons
-
-export function useMeshPolygonsStyle() {
-  const dataStyleStateStore = useDataStyleStateStore()
-  const viewerStore = useViewerStore()
-
-  function meshPolygonsStyle(id) {
-    return dataStyleStateStore.getStyle(id).polygons
-  }
-
-  function meshPolygonsVisibility(id) {
-    return meshPolygonsStyle(id).visibility
-  }
-  function setMeshPolygonsVisibility(id, visibility) {
-    const polygons_style = meshPolygonsStyle(id)
-    return viewerStore.request(
-      mesh_polygons_schemas.visibility,
-      { id, visibility },
-      {
-        response_function: () => {
-          polygons_style.visibility = visibility
-          console.log(
-            setMeshPolygonsVisibility.name,
-            { id },
-            meshPolygonsVisibility(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPolygonsColor(id) {
-    return meshPolygonsStyle(id).coloring.color
-  }
-  function setMeshPolygonsColor(id, color) {
-    const coloring_style = meshPolygonsStyle(id).coloring
-    return viewerStore.request(
-      mesh_polygons_schemas.color,
-      { id, color },
-      {
-        response_function: () => {
-          coloring_style.color = color
-          console.log(
-            setMeshPolygonsColor.name,
-            { id },
-            JSON.stringify(meshPolygonsColor(id)),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPolygonsTextures(id) {
-    return meshPolygonsStyle(id).coloring.textures
-  }
-  function setMeshPolygonsTextures(id, textures) {
-    const coloring_style = meshPolygonsStyle(id).coloring
-    return viewerStore.request(
-      mesh_polygons_schemas.apply_textures,
-      { id, textures },
-      {
-        response_function: () => {
-          coloring_style.textures = textures
-          console.log(
-            setMeshPolygonsTextures.name,
-            { id },
-            meshPolygonsTextures(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPolygonsVertexAttribute(id) {
-    return meshPolygonsStyle(id).coloring.vertex
-  }
-
-  function setMeshPolygonsVertexAttribute(id, vertex_attribute) {
-    const coloring_style = meshPolygonsStyle(id).coloring
-    return viewerStore.request(
-      mesh_polygons_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
-      {
-        response_function: () => {
-          coloring_style.vertex = vertex_attribute
-          console.log(
-            setMeshPolygonsVertexAttribute.name,
-            { id },
-            meshPolygonsVertexAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPolygonsPolygonAttribute(id) {
-    return meshPolygonsStyle(id).coloring.polygon
-  }
-  function setMeshPolygonsPolygonAttribute(id, polygon_attribute) {
-    const coloring_style = meshPolygonsStyle(id).coloring
-    return viewerStore.request(
-      mesh_polygons_schemas.polygon_attribute,
-      { id, ...polygon_attribute },
-      {
-        response_function: () => {
-          coloring_style.polygon = polygon_attribute
-          console.log(
-            setMeshPolygonsPolygonAttribute.name,
-            { id },
-            meshPolygonsPolygonAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPolygonsActiveColoring(id) {
-    return meshPolygonsStyle(id).coloring.active
-  }
-  function setMeshPolygonsActiveColoring(id, type) {
-    const coloring = meshPolygonsStyle(id).coloring
-    coloring.active = type
-    console.log(
-      setMeshPolygonsActiveColoring.name,
-      { id },
-      meshPolygonsActiveColoring(id),
-    )
-    if (type === "color") {
-      return setMeshPolygonsColor(id, coloring.color)
-    } else if (type === "textures") {
-      if (coloring.textures === null) {
-        throw new Error("Textures not set")
-      }
-      return setMeshPolygonsTextures(id, coloring.textures)
-    } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
-      }
-      return setMeshPolygonsVertexAttribute(id, coloring.vertex)
-    } else if (type === "polygon") {
-      if (coloring.polygon === null) {
-        throw new Error("Polygon attribute not set")
-      }
-      return setMeshPolygonsPolygonAttribute(id, coloring.polygon)
-    } else {
-      throw new Error("Unknown mesh polygons coloring type: " + type)
-    }
-  }
-
-  function applyMeshPolygonsStyle(id) {
-    const style = meshPolygonsStyle(id)
-    return Promise.all([
-      setMeshPolygonsVisibility(id, style.visibility),
-      setMeshPolygonsActiveColoring(id, style.coloring.active),
-    ])
-  }
-
-  return {
-    meshPolygonsVisibility,
-    meshPolygonsActiveColoring,
-    meshPolygonsColor,
-    meshPolygonsTextures,
-    meshPolygonsPolygonAttribute,
-    meshPolygonsVertexAttribute,
-    setMeshPolygonsVisibility,
-    setMeshPolygonsActiveColoring,
-    setMeshPolygonsColor,
-    setMeshPolygonsTextures,
-    setMeshPolygonsVertexAttribute,
-    setMeshPolygonsPolygonAttribute,
-    applyMeshPolygonsStyle,
-  }
-}
diff --git a/internal/stores/mesh/polyhedra.js b/internal/stores/mesh/polyhedra.js
deleted file mode 100644
index 47c2520b..00000000
--- a/internal/stores/mesh/polyhedra.js
+++ /dev/null
@@ -1,151 +0,0 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
-
-// Local imports
-import { useDataStyleStateStore } from "../data_style_state"
-import { useViewerStore } from "@ogw_front/stores/viewer"
-
-// Local constants
-const mesh_polyhedra_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polyhedra
-
-export function useMeshPolyhedraStyle() {
-  const dataStyleStateStore = useDataStyleStateStore()
-  const viewerStore = useViewerStore()
-
-  function meshPolyhedraStyle(id) {
-    return dataStyleStateStore.getStyle(id).polyhedra
-  }
-
-  function meshPolyhedraVisibility(id) {
-    return meshPolyhedraStyle(id).visibility
-  }
-  function setMeshPolyhedraVisibility(id, visibility) {
-    const polyhedra_style = meshPolyhedraStyle(id)
-    return viewerStore.request(
-      mesh_polyhedra_schemas.visibility,
-      { id, visibility },
-      {
-        response_function: () => {
-          polyhedra_style.visibility = visibility
-          console.log(
-            setMeshPolyhedraVisibility.name,
-            { id },
-            meshPolyhedraVisibility(id),
-          )
-        },
-      },
-    )
-  }
-  function meshPolyhedraActiveColoring(id) {
-    return meshPolyhedraStyle(id).coloring.active
-  }
-  function setMeshPolyhedraActiveColoring(id, type) {
-    const coloring = meshPolyhedraStyle(id).coloring
-    coloring.active = type
-    console.log(
-      setMeshPolyhedraActiveColoring.name,
-      { id },
-      meshPolyhedraActiveColoring(id),
-    )
-    if (type === "color") {
-      return setMeshPolyhedraColor(id, coloring.color)
-    } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
-      }
-      return setMeshPolyhedraVertexAttribute(id, coloring.vertex)
-    } else if (type === "polyhedron") {
-      if (coloring.polyhedron === null) {
-        throw new Error("Polyhedron attribute not set")
-      }
-      return setMeshPolyhedraPolyhedronAttribute(id, coloring.polyhedron)
-    } else {
-      throw new Error("Unknown mesh polyhedra coloring type: " + type)
-    }
-  }
-
-  function meshPolyhedraColor(id) {
-    return meshPolyhedraStyle(id).coloring.color
-  }
-  function setMeshPolyhedraColor(id, color) {
-    const coloring = meshPolyhedraStyle(id).coloring
-    return viewerStore.request(
-      mesh_polyhedra_schemas.color,
-      { id, color },
-      {
-        response_function: () => {
-          coloring.color = color
-          console.log(
-            setMeshPolyhedraColor.name,
-            { id },
-            JSON.stringify(meshPolyhedraColor(id)),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPolyhedraVertexAttribute(id) {
-    return meshPolyhedraStyle(id).coloring.vertex
-  }
-  function setMeshPolyhedraVertexAttribute(id, vertex_attribute) {
-    const coloring_style = meshPolyhedraStyle(id).coloring
-    return viewerStore.request(
-      mesh_polyhedra_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
-      {
-        response_function: () => {
-          coloring_style.vertex = vertex_attribute
-          console.log(
-            setMeshPolyhedraVertexAttribute.name,
-            { id },
-            meshPolyhedraVertexAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function meshPolyhedraPolyhedronAttribute(id) {
-    return meshPolyhedraStyle(id).coloring.polyhedron
-  }
-  function setMeshPolyhedraPolyhedronAttribute(id, polyhedron_attribute) {
-    const coloring = meshPolyhedraStyle(id).coloring
-    return viewerStore.request(
-      mesh_polyhedra_schemas.polyhedron_attribute,
-      { id, ...polyhedron_attribute },
-      {
-        response_function: () => {
-          coloring.polyhedron = polyhedron_attribute
-          console.log(
-            setMeshPolyhedraPolyhedronAttribute.name,
-            { id },
-            meshPolyhedraPolyhedronAttribute(id),
-          )
-        },
-      },
-    )
-  }
-
-  function applyMeshPolyhedraStyle(id) {
-    const style = meshPolyhedraStyle(id)
-    return Promise.all([
-      setMeshPolyhedraVisibility(id, style.visibility),
-      setMeshPolyhedraActiveColoring(id, style.coloring.active),
-    ])
-  }
-
-  return {
-    applyMeshPolyhedraStyle,
-    meshPolyhedraActiveColoring,
-    meshPolyhedraColor,
-    meshPolyhedraVertexAttribute,
-    meshPolyhedraVisibility,
-    meshPolyhedraPolyhedronAttribute,
-    setMeshPolyhedraActiveColoring,
-    setMeshPolyhedraColor,
-    setMeshPolyhedraPolyhedronAttribute,
-    setMeshPolyhedraVertexAttribute,
-    setMeshPolyhedraVisibility,
-  }
-}
diff --git a/tests/integration/microservices/back/requirements.txt b/tests/integration/microservices/back/requirements.txt
index 709c3aa3..bd3a3ef5 100644
--- a/tests/integration/microservices/back/requirements.txt
+++ b/tests/integration/microservices/back/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in
 #
 
-opengeodeweb-back==6.*,>=6.1.0
diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt
index 950be281..4d097394 100644
--- a/tests/integration/microservices/viewer/requirements.txt
+++ b/tests/integration/microservices/viewer/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.15.1rc2
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 c9dadb6b..8d46ad76 100644
--- a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
@@ -87,21 +87,21 @@ describe("Mesh cells", () => {
       const dataStyleStore = useDataStyleStore()
       const viewerStore = useViewerStore()
       const spy = vi.spyOn(viewerStore, "request")
-      const result = dataStyleStore.setMeshCellsVertexAttribute(
+      const result = dataStyleStore.setMeshCellsVertexAttributeName(
         id,
-        vertex_attribute,
+        vertex_attribute.name,
       )
       expect(result).toBeInstanceOf(Promise)
       await result
       expect(spy).toHaveBeenCalledWith(
-        mesh_cells_schemas.vertex_attribute,
+        mesh_cells_schemas.attribute.vertex.name,
         { id, ...vertex_attribute },
         {
           response_function: expect.any(Function),
         },
       )
-      expect(dataStyleStore.meshCellsVertexAttribute(id)).toStrictEqual(
-        vertex_attribute,
+      expect(dataStyleStore.meshCellsVertexAttributeName(id)).toBe(
+        vertex_attribute.name,
       )
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
@@ -112,21 +112,21 @@ describe("Mesh cells", () => {
       const dataStyleStore = useDataStyleStore()
       const viewerStore = useViewerStore()
       const spy = vi.spyOn(viewerStore, "request")
-      const result = dataStyleStore.setMeshCellsCellAttribute(
+      const result = dataStyleStore.setMeshCellsCellAttributeName(
         id,
-        cell_attribute,
+        cell_attribute.name,
       )
       expect(result).toBeInstanceOf(Promise)
       await result
       expect(spy).toHaveBeenCalledWith(
-        mesh_cells_schemas.cell_attribute,
+        mesh_cells_schemas.attribute.cell.name,
         { id, ...cell_attribute },
         {
           response_function: expect.any(Function),
         },
       )
-      expect(dataStyleStore.meshCellsCellAttribute(id)).toStrictEqual(
-        cell_attribute,
+      expect(dataStyleStore.meshCellsCellAttributeName(id)).toBe(
+        cell_attribute.name,
       )
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
@@ -141,22 +141,22 @@ describe("Mesh cells", () => {
         {
           name: "vertex",
           function: () =>
-            dataStyleStore.setMeshCellsVertexAttribute(id, vertex_attribute),
+            dataStyleStore.setMeshCellsVertexAttributeName(
+              id,
+              vertex_attribute.name,
+            ),
         },
         {
           name: "cell",
           function: () =>
-            dataStyleStore.setMeshCellsCellAttribute(id, cell_attribute),
+            dataStyleStore.setMeshCellsCellAttributeName(
+              id,
+              cell_attribute.name,
+            ),
         },
       ]
       for (let i = 0; i < coloringTypes.length; i++) {
         if (coloringTypes[i].function) {
-          expect(() =>
-            dataStyleStore.setMeshCellsActiveColoring(
-              id,
-              coloringTypes[i].name,
-            ),
-          ).toThrowError()
           await coloringTypes[i].function()
         }
         const result = dataStyleStore.setMeshCellsActiveColoring(
diff --git a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
index 64cea744..2b2b14ae 100644
--- a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
@@ -83,16 +83,19 @@ describe("Mesh edges", () => {
       const viewerStore = useViewerStore()
 
       const spy = vi.spyOn(viewerStore, "request")
-      await dataStyleStore.setMeshEdgesVertexAttribute(id, vertex_attribute)
+      await dataStyleStore.setMeshEdgesVertexAttributeName(
+        id,
+        vertex_attribute.name,
+      )
       expect(spy).toHaveBeenCalledWith(
-        mesh_edges_schemas.vertex_attribute,
+        mesh_edges_schemas.attribute.vertex.name,
         { id, ...vertex_attribute },
         {
           response_function: expect.any(Function),
         },
       )
-      expect(dataStyleStore.meshEdgesVertexAttribute(id)).toStrictEqual(
-        vertex_attribute,
+      expect(dataStyleStore.meshEdgesVertexAttributeName(id)).toBe(
+        vertex_attribute.name,
       )
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
@@ -102,16 +105,19 @@ describe("Mesh edges", () => {
       const viewerStore = useViewerStore()
 
       const spy = vi.spyOn(viewerStore, "request")
-      await dataStyleStore.setMeshEdgesEdgeAttribute(id, edge_attribute)
+      await dataStyleStore.setMeshEdgesEdgeAttributeName(
+        id,
+        edge_attribute.name,
+      )
       expect(spy).toHaveBeenCalledWith(
-        mesh_edges_schemas.edge_attribute,
+        mesh_edges_schemas.attribute.edge.name,
         { id, ...edge_attribute },
         {
           response_function: expect.any(Function),
         },
       )
-      expect(dataStyleStore.meshEdgesEdgeAttribute(id)).toStrictEqual(
-        edge_attribute,
+      expect(dataStyleStore.meshEdgesEdgeAttributeName(id)).toBe(
+        edge_attribute.name,
       )
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
@@ -124,22 +130,22 @@ describe("Mesh edges", () => {
         {
           name: "vertex",
           function: () =>
-            dataStyleStore.setMeshEdgesVertexAttribute(id, vertex_attribute),
+            dataStyleStore.setMeshEdgesVertexAttributeName(
+              id,
+              vertex_attribute.name,
+            ),
         },
         {
           name: "edge",
           function: () =>
-            dataStyleStore.setMeshEdgesEdgeAttribute(id, edge_attribute),
+            dataStyleStore.setMeshEdgesEdgeAttributeName(
+              id,
+              edge_attribute.name,
+            ),
         },
       ]
       for (let i = 0; i < coloringTypes.length; i++) {
         if (coloringTypes[i].function) {
-          expect(() =>
-            dataStyleStore.setMeshEdgesActiveColoring(
-              id,
-              coloringTypes[i].name,
-            ),
-          ).toThrowError()
           await coloringTypes[i].function()
         }
         const result = dataStyleStore.setMeshEdgesActiveColoring(
diff --git a/tests/integration/stores/data_style/mesh/index.nuxt.test.js b/tests/integration/stores/data_style/mesh/index.nuxt.test.js
index ec310500..f2c9dc52 100644
--- a/tests/integration/stores/data_style/mesh/index.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/index.nuxt.test.js
@@ -59,7 +59,7 @@ describe("Mesh", () => {
   })
 
   describe("Apply mesh default style", () => {
-    test("test", async () => {
+    test("Apply mesh default style", async () => {
       const dataStyleStore = useDataStyleStore()
       const viewerStore = useViewerStore()
       const result = dataStyleStore.applyMeshStyle(id)
diff --git a/tests/integration/stores/data_style/mesh/points.nuxt.test.js b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
index f48e857a..9670f502 100644
--- a/tests/integration/stores/data_style/mesh/points.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
@@ -89,17 +89,14 @@ describe("Mesh points", () => {
         {
           name: "vertex",
           function: () =>
-            dataStyleStore.setMeshPointsVertexAttribute(id, vertex_attribute),
+            dataStyleStore.setMeshPointsVertexAttributeName(
+              id,
+              vertex_attribute.name,
+            ),
         },
       ]
       for (let i = 0; i < coloringTypes.length; i++) {
         if (coloringTypes[i].function) {
-          expect(() =>
-            dataStyleStore.setMeshPointsActiveColoring(
-              id,
-              coloringTypes[i].name,
-            ),
-          ).toThrowError()
           await coloringTypes[i].function()
         }
         const result = dataStyleStore.setMeshPointsActiveColoring(
@@ -135,22 +132,27 @@ describe("Mesh points", () => {
       expect(dataStyleStore.meshPointsSize(id)).toBe(size)
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
+  })
 
-    test("Points vertex attribute", async () => {
+  describe("Points vertex attribute", () => {
+    test("test coloring", async () => {
       const dataStyleStore = useDataStyleStore()
       const viewerStore = useViewerStore()
 
       const spy = vi.spyOn(viewerStore, "request")
-      await dataStyleStore.setMeshPointsVertexAttribute(id, vertex_attribute)
+      await dataStyleStore.setMeshPointsVertexAttributeName(
+        id,
+        vertex_attribute.name,
+      )
       expect(spy).toHaveBeenCalledWith(
-        mesh_points_schemas.vertex_attribute,
+        mesh_points_schemas.attribute.vertex.name,
         { id, ...vertex_attribute },
         {
           response_function: expect.any(Function),
         },
       )
-      expect(dataStyleStore.meshPointsVertexAttribute(id)).toStrictEqual(
-        vertex_attribute,
+      expect(dataStyleStore.meshPointsVertexAttributeName(id)).toBe(
+        vertex_attribute.name,
       )
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
diff --git a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
index a7408b95..f19b9107 100644
--- a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
@@ -87,21 +87,21 @@ describe("Mesh polygons", () => {
       const dataStyleStore = useDataStyleStore()
       const viewerStore = useViewerStore()
       const spy = vi.spyOn(viewerStore, "request")
-      const result = dataStyleStore.setMeshPolygonsVertexAttribute(
+      const result = dataStyleStore.setMeshPolygonsVertexAttributeName(
         id,
-        vertex_attribute,
+        vertex_attribute.name,
       )
       expect(result).toBeInstanceOf(Promise)
       await result
       expect(spy).toHaveBeenCalledWith(
-        mesh_polygons_schemas.vertex_attribute,
+        mesh_polygons_schemas.attribute.vertex.name,
         { id, ...vertex_attribute },
         {
           response_function: expect.any(Function),
         },
       )
-      expect(dataStyleStore.meshPolygonsVertexAttribute(id)).toStrictEqual(
-        vertex_attribute,
+      expect(dataStyleStore.meshPolygonsVertexAttributeName(id)).toBe(
+        vertex_attribute.name,
       )
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
@@ -112,21 +112,21 @@ describe("Mesh polygons", () => {
       const dataStyleStore = useDataStyleStore()
       const viewerStore = useViewerStore()
       const spy = vi.spyOn(viewerStore, "request")
-      const result = dataStyleStore.setMeshPolygonsPolygonAttribute(
+      const result = dataStyleStore.setMeshPolygonsPolygonAttributeName(
         id,
-        polygon_attribute,
+        polygon_attribute.name,
       )
       expect(result).toBeInstanceOf(Promise)
       await result
       expect(spy).toHaveBeenCalledWith(
-        mesh_polygons_schemas.polygon_attribute,
+        mesh_polygons_schemas.attribute.polygon.name,
         { id, ...polygon_attribute },
         {
           response_function: expect.any(Function),
         },
       )
-      expect(dataStyleStore.meshPolygonsPolygonAttribute(id)).toStrictEqual(
-        polygon_attribute,
+      expect(dataStyleStore.meshPolygonsPolygonAttributeName(id)).toBe(
+        polygon_attribute.name,
       )
       expect(viewerStore.status).toBe(Status.CONNECTED)
     })
@@ -141,26 +141,23 @@ describe("Mesh polygons", () => {
         {
           name: "vertex",
           function: () =>
-            dataStyleStore.setMeshPolygonsVertexAttribute(id, vertex_attribute),
+            dataStyleStore.setMeshPolygonsVertexAttributeName(
+              id,
+              vertex_attribute.name,
+            ),
         },
         {
           name: "polygon",
           function: () =>
-            dataStyleStore.setMeshPolygonsPolygonAttribute(
+            dataStyleStore.setMeshPolygonsPolygonAttributeName(
               id,
-              polygon_attribute,
+              polygon_attribute.name,
             ),
         },
       ]
 
       for (let i = 0; i < coloringTypes.length; i++) {
         if (coloringTypes[i].function) {
-          expect(() =>
-            dataStyleStore.setMeshPolygonsActiveColoring(
-              id,
-              coloringTypes[i].name,
-            ),
-          ).toThrowError()
           await coloringTypes[i].function()
         }
         const result = dataStyleStore.setMeshPolygonsActiveColoring(
diff --git a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
index ed3ba99f..c3f089b1 100644
--- a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
@@ -86,28 +86,22 @@ describe("Mesh polyhedra", () => {
         {
           name: "vertex",
           function: () =>
-            dataStyleStore.setMeshPolyhedraVertexAttribute(
+            dataStyleStore.setMeshPolyhedraVertexAttributeName(
               id,
-              vertex_attribute,
+              vertex_attribute.name,
             ),
         },
         {
           name: "polyhedron",
           function: () =>
-            dataStyleStore.setMeshPolyhedraPolyhedronAttribute(
+            dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
               id,
-              polyhedron_attribute,
+              polyhedron_attribute.name,
             ),
         },
       ]
       for (let i = 0; i < coloringTypes.length; i++) {
         if (coloringTypes[i].function) {
-          expect(() =>
-            dataStyleStore.setMeshPolyhedraActiveColoring(
-              id,
-              coloringTypes[i].name,
-            ),
-          ).toThrowError()
           await coloringTypes[i].function()
         }
         const result = dataStyleStore.setMeshPolyhedraActiveColoring(
@@ -129,16 +123,19 @@ describe("Mesh polyhedra", () => {
     const viewerStore = useViewerStore()
 
     const spy = vi.spyOn(viewerStore, "request")
-    await dataStyleStore.setMeshPolyhedraVertexAttribute(id, vertex_attribute)
+    await dataStyleStore.setMeshPolyhedraVertexAttributeName(
+      id,
+      vertex_attribute.name,
+    )
     expect(spy).toHaveBeenCalledWith(
-      mesh_polyhedra_schemas.vertex_attribute,
+      mesh_polyhedra_schemas.attribute.vertex.name,
       { id, ...vertex_attribute },
       {
         response_function: expect.any(Function),
       },
     )
-    expect(dataStyleStore.meshPolyhedraVertexAttribute(id)).toStrictEqual(
-      vertex_attribute,
+    expect(dataStyleStore.meshPolyhedraVertexAttributeName(id)).toBe(
+      vertex_attribute.name,
     )
     expect(viewerStore.status).toBe(Status.CONNECTED)
   })
@@ -148,19 +145,19 @@ describe("Mesh polyhedra", () => {
     const viewerStore = useViewerStore()
 
     const spy = vi.spyOn(viewerStore, "request")
-    await dataStyleStore.setMeshPolyhedraPolyhedronAttribute(
+    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(
       id,
-      polyhedron_attribute,
+      polyhedron_attribute.name,
     )
     expect(spy).toHaveBeenCalledWith(
-      mesh_polyhedra_schemas.polyhedron_attribute,
+      mesh_polyhedra_schemas.attribute.polyhedron.name,
       { id, ...polyhedron_attribute },
       {
         response_function: expect.any(Function),
       },
     )
-    expect(dataStyleStore.meshPolyhedraPolyhedronAttribute(id)).toStrictEqual(
-      polyhedron_attribute,
+    expect(dataStyleStore.meshPolyhedraPolyhedronAttributeName(id)).toBe(
+      polyhedron_attribute.name,
     )
     expect(viewerStore.status).toBe(Status.CONNECTED)
   })
diff --git a/tests/vitest.config.js b/tests/vitest.config.js
index 2b244291..9516025b 100644
--- a/tests/vitest.config.js
+++ b/tests/vitest.config.js
@@ -6,11 +6,13 @@ const globalRetry = process.env.CI ? 3 : 0
 
 export default defineConfig({
   test: {
+    globals: true,
     setupFiles: [path.resolve(__dirname, "./setup_indexeddb.js")],
     projects: [
       await defineVitestProject({
         test: {
           name: "unit",
+          globals: true,
           include: ["tests/unit/**/*.test.js"],
           environment: "nuxt",
           setupFiles: [path.resolve(__dirname, "./setup_indexeddb.js")],
@@ -25,6 +27,7 @@ export default defineConfig({
       await defineVitestProject({
         test: {
           name: "integration",
+          globals: true,
           include: ["tests/integration/**/*.test.js"],
           environment: "nuxt",
           fileParallelism: false,