diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index c82938b1..f937e125 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -44,22 +44,87 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const edge_attribute = computed({
-    get: () => dataStyleStore.meshEdgesEdgeAttribute(id.value),
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshEdgesEdgeAttribute(id.value, newValue)
+      dataStyleStore.setMeshEdgesVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshEdgesVertexAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshEdgesVertexAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshEdgesVertexAttributeRange(id.value)
+      dataStyleStore.setMeshEdgesVertexAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_name = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_range = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshEdgesEdgeAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const edge_attribute_color_map = computed({
+    get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshEdgesEdgeAttributeRange(id.value)
+      dataStyleStore.setMeshEdgesEdgeAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -92,8 +157,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..95fe062d 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -45,22 +45,87 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshCellsVertexAttribute(id.value),
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshCellsVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshCellsVertexAttributeName(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const cell_attribute = computed({
-    get: () => dataStyleStore.meshCellsCellAttribute(id.value),
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshCellsCellAttribute(id.value, newValue)
+      dataStyleStore.setMeshCellsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshCellsVertexAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshCellsVertexAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsVertexAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshCellsVertexAttributeRange(id.value)
+      dataStyleStore.setMeshCellsVertexAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_name = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsCellAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_range = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshCellsCellAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshCellsCellAttributeColorMap(id.value)
+      if (colorMap) {
+        dataStyleStore.setMeshCellsCellAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const cell_attribute_color_map = computed({
+    get: () => dataStyleStore.meshCellsCellAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshCellsCellAttributeRange(id.value)
+      dataStyleStore.setMeshCellsCellAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -75,8 +140,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..beac6e5b 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -44,15 +44,7 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshEdgesVertexAttribute(id.value),
-    set: (newValue) => {
-      dataStyleStore.setMeshEdgesVertexAttribute(id.value, newValue)
-      hybridViewerStore.remoteRender()
-    },
-  })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 7f7c2810..e07836c9 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -45,7 +45,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -78,7 +77,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..28d59394 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -47,7 +47,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index 5e570ff5..b8351368 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -39,7 +39,6 @@
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
diff --git a/app/components/Viewer/Options/AttributeColorBar.vue b/app/components/Viewer/Options/AttributeColorBar.vue
new file mode 100644
index 00000000..f998c3ba
--- /dev/null
+++ b/app/components/Viewer/Options/AttributeColorBar.vue
@@ -0,0 +1,57 @@
+<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
+          v-model.number="minimum"
+          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
+          v-model.number="maximum"
+          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..7f8464fa 100644
--- a/app/components/Viewer/Options/CellAttributeSelector.vue
+++ b/app/components/Viewer/Options/CellAttributeSelector.vue
@@ -1,26 +1,33 @@
 <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")
+  const cell_attribute_range = defineModel("cell_attribute_range", {
+    type: Array,
+    default: () => [0, 1],
+  })
+  const cell_attribute_color_map = defineModel("cell_attribute_color_map")
+  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] ?? 0,
+    set: (val) => {
+      cell_attribute_range.value = [val, cell_attribute_range.value?.[1] ?? 1]
+    },
   })
-
-  watch(cell_attribute_name, (value) => {
-    cell_attribute.name = value
-    model.value = cell_attribute
+  const rangeMax = computed({
+    get: () => cell_attribute_range.value?.[1] ?? 1,
+    set: (val) => {
+      cell_attribute_range.value = [cell_attribute_range.value?.[0] ?? 0, val]
+    },
   })
 
   onMounted(() => {
@@ -30,23 +37,68 @@
   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,
+    )
+  })
+
+  watch(cell_attribute_name, (newName) => {
+    if (newName) {
+      const attr = cell_attributes.value.find(
+        (a) => a.attribute_name === newName,
+      )
+      if (
+        attr &&
+        attr.min_value !== undefined &&
+        attr.max_value !== undefined
+      ) {
+        const currentRange = cell_attribute_range.value
+        const hasNoSavedPreset =
+          !currentRange || (currentRange[0] === 0 && currentRange[1] === 1)
+        if (hasNoSavedPreset) {
+          if (!cell_attribute_color_map.value) {
+            cell_attribute_color_map.value = "Cool to Warm"
+          }
+          cell_attribute_range.value = [attr.min_value, attr.max_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..82c4adf2 100644
--- a/app/components/Viewer/Options/EdgeAttributeSelector.vue
+++ b/app/components/Viewer/Options/EdgeAttributeSelector.vue
@@ -1,72 +1,104 @@
 <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")
+  const edge_attribute_range = defineModel("edge_attribute_range", {
+    type: Array,
+    default: () => [0, 1],
+  })
+  const edge_attribute_color_map = defineModel("edge_attribute_color_map")
+  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] ?? 0,
+    set: (val) => {
+      edge_attribute_range.value = [val, edge_attribute_range.value?.[1] ?? 1]
+    },
+  })
+  const rangeMax = computed({
+    get: () => edge_attribute_range.value?.[1] ?? 1,
+    set: (val) => {
+      edge_attribute_range.value = [edge_attribute_range.value?.[0] ?? 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()
-    },
-  )
+  watch(edge_attribute_name, (newName) => {
+    if (newName) {
+      const attr = edge_attributes.value.find(
+        (a) => a.attribute_name === newName,
+      )
+      if (
+        attr &&
+        attr.min_value !== undefined &&
+        attr.max_value !== undefined
+      ) {
+        const currentRange = edge_attribute_range.value
+        const hasNoSavedPreset =
+          !currentRange || (currentRange[0] === 0 && currentRange[1] === 1)
+        if (hasNoSavedPreset) {
+          if (!edge_attribute_color_map.value) {
+            edge_attribute_color_map.value = "Cool to Warm"
+          }
+          edge_attribute_range.value = [attr.min_value, attr.max_value]
+        }
+      }
+    }
+  })
+
+  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..e1fee06c 100644
--- a/app/components/Viewer/Options/PolygonAttributeSelector.vue
+++ b/app/components/Viewer/Options/PolygonAttributeSelector.vue
@@ -1,26 +1,39 @@
 <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")
+  const polygon_attribute_range = defineModel("polygon_attribute_range", {
+    type: Array,
+    default: () => [0, 1],
+  })
+  const polygon_attribute_color_map = defineModel("polygon_attribute_color_map")
+  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] ?? 0,
+    set: (val) => {
+      polygon_attribute_range.value = [
+        val,
+        polygon_attribute_range.value?.[1] ?? 1,
+      ]
+    },
   })
-
-  watch(polygon_attribute_name, (value) => {
-    polygon_attribute.name = value
-    model.value = polygon_attribute
+  const rangeMax = computed({
+    get: () => polygon_attribute_range.value?.[1] ?? 1,
+    set: (val) => {
+      polygon_attribute_range.value = [
+        polygon_attribute_range.value?.[0] ?? 0,
+        val,
+      ]
+    },
   })
 
   onMounted(() => {
@@ -30,23 +43,68 @@
   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,
+    )
+  })
+
+  watch(polygon_attribute_name, (newName) => {
+    if (newName) {
+      const attr = polygon_attributes.value.find(
+        (a) => a.attribute_name === newName,
+      )
+      if (
+        attr &&
+        attr.min_value !== undefined &&
+        attr.max_value !== undefined
+      ) {
+        const currentRange = polygon_attribute_range.value
+        const hasNoSavedPreset =
+          !currentRange || (currentRange[0] === 0 && currentRange[1] === 1)
+        if (hasNoSavedPreset) {
+          if (!polygon_attribute_color_map.value) {
+            polygon_attribute_color_map.value = "Cool to Warm"
+          }
+          polygon_attribute_range.value = [attr.min_value, attr.max_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..5cd61f65 100644
--- a/app/components/Viewer/Options/PolyhedronAttributeSelector.vue
+++ b/app/components/Viewer/Options/PolyhedronAttributeSelector.vue
@@ -1,54 +1,112 @@
 <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("")
-
-  onMounted(() => {
-    if (model.value != null) {
-      polyhedron_attribute_name.value = model.value.name
-    }
-  })
-  const polyhedron_attribute = reactive({
-    name: polyhedron_attribute_name.value,
-  })
+  const geodeStore = useGeodeStore()
 
-  watch(polyhedron_attribute_name, (value) => {
-    polyhedron_attribute.name = value
-    model.value = polyhedron_attribute
+  const polyhedron_attribute_name = defineModel("polyhedron_attribute_name")
+  const polyhedron_attribute_range = defineModel("polyhedron_attribute_range", {
+    type: Array,
+    default: () => [0, 1],
   })
+  const polyhedron_attribute_color_map = defineModel(
+    "polyhedron_attribute_color_map",
+  )
+  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] ?? 0,
+    set: (val) => {
+      polyhedron_attribute_range.value = [
+        val,
+        polyhedron_attribute_range.value?.[1] ?? 1,
+      ]
+    },
+  })
+  const rangeMax = computed({
+    get: () => polyhedron_attribute_range.value?.[1] ?? 1,
+    set: (val) => {
+      polyhedron_attribute_range.value = [
+        polyhedron_attribute_range.value?.[0] ?? 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,
+    )
+  })
+
+  watch(polyhedron_attribute_name, (newName) => {
+    if (newName) {
+      const attr = polyhedron_attributes.value.find(
+        (a) => a.attribute_name === newName,
+      )
+      if (
+        attr &&
+        attr.min_value !== undefined &&
+        attr.max_value !== undefined
+      ) {
+        const currentRange = polyhedron_attribute_range.value
+        const hasNoSavedPreset =
+          !currentRange || (currentRange[0] === 0 && currentRange[1] === 1)
+        if (hasNoSavedPreset) {
+          if (!polyhedron_attribute_color_map.value) {
+            polyhedron_attribute_color_map.value = "Cool to Warm"
+          }
+          polyhedron_attribute_range.value = [attr.min_value, attr.max_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..e9bb8957 100644
--- a/app/components/Viewer/Options/VertexAttributeSelector.vue
+++ b/app/components/Viewer/Options/VertexAttributeSelector.vue
@@ -1,28 +1,39 @@
 <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")
+  const vertex_attribute_range = defineModel("vertex_attribute_range", {
+    type: Array,
+    default: () => [0, 1],
+  })
+  const vertex_attribute_color_map = defineModel("vertex_attribute_color_map")
+  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] ?? 0,
+    set: (val) => {
+      vertex_attribute_range.value = [
+        val,
+        vertex_attribute_range.value?.[1] ?? 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] ?? 1,
+    set: (val) => {
+      vertex_attribute_range.value = [
+        vertex_attribute_range.value?.[0] ?? 0,
+        val,
+      ]
+    },
   })
 
   onMounted(() => {
@@ -35,18 +46,65 @@
       { 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,
+    )
+  })
+
+  watch(vertex_attribute_name, (newName) => {
+    if (newName) {
+      const attr = vertex_attributes.value.find(
+        (a) => a.attribute_name === newName,
+      )
+      if (
+        attr &&
+        attr.min_value !== undefined &&
+        attr.max_value !== undefined
+      ) {
+        const currentRange = vertex_attribute_range.value
+        const hasNoSavedPreset =
+          !currentRange || (currentRange[0] === 0 && currentRange[1] === 1)
+        if (hasNoSavedPreset) {
+          if (!vertex_attribute_color_map.value) {
+            vertex_attribute_color_map.value = "Cool to Warm"
+          }
+          vertex_attribute_range.value = [attr.min_value, attr.max_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..f164c95a 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -44,15 +44,49 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPointsVertexAttribute(id.value),
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshPointsVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshPointsVertexAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPointsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshPointsVertexAttributeColorMap(
+        id.value,
+      )
+      if (colorMap) {
+        dataStyleStore.setMeshPointsVertexAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshPointsVertexAttributeRange(id.value)
+      dataStyleStore.setMeshPointsVertexAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -85,7 +119,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..b85e6f98 100644
--- a/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue
+++ b/app/components/Viewer/PolygonalSurface/SpecificPolygonsOptions.vue
@@ -45,22 +45,92 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsVertexAttribute(id.value),
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshPolygonsVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshPolygonsVertexAttributeName(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const polygon_attribute = computed({
-    get: () => dataStyleStore.meshPolygonsPolygonAttribute(id.value),
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshPolygonsPolygonAttribute(id.value, newValue)
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshPolygonsVertexAttributeColorMap(
+        id.value,
+      )
+      if (colorMap) {
+        dataStyleStore.setMeshPolygonsVertexAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshPolygonsVertexAttributeRange(id.value)
+      dataStyleStore.setMeshPolygonsVertexAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_name = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolygonsPolygonAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_range = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      // Re-apply colormap with new range
+      const colorMap = dataStyleStore.meshPolygonsPolygonAttributeColorMap(
+        id.value,
+      )
+      if (colorMap) {
+        dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polygon_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshPolygonsPolygonAttributeRange(id.value)
+      dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -75,8 +145,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..edf1bd03 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -38,22 +38,94 @@
       hybridViewerStore.remoteRender()
     },
   })
-  const vertex_attribute = computed({
-    get: () => dataStyleStore.meshPolyhedraVertexAttribute(id.value),
+  const vertex_attribute_name = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraVertexAttribute(id.value, newValue)
+      dataStyleStore.setMeshPolyhedraVertexAttributeName(id.value, newValue)
       hybridViewerStore.remoteRender()
     },
   })
-  const polyhedron_attribute = computed({
-    get: () => dataStyleStore.meshPolyhedraPolyhedronAttribute(id.value),
+  const vertex_attribute_range = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
     set: (newValue) => {
-      dataStyleStore.setMeshPolyhedraPolyhedronAttribute(id.value, newValue)
+      dataStyleStore.setMeshPolyhedraVertexAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshPolyhedraVertexAttributeColorMap(
+        id.value,
+      )
+      if (colorMap) {
+        dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const vertex_attribute_color_map = computed({
+    get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshPolyhedraVertexAttributeRange(id.value)
+      dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_name = computed({
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(id.value, newValue)
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_range = computed({
+    get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
+    set: (newValue) => {
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(
+        id.value,
+        newValue[0],
+        newValue[1],
+      )
+      const colorMap = dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(
+        id.value,
+      )
+      if (colorMap) {
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(
+          id.value,
+          colorMap,
+          newValue[0],
+          newValue[1],
+        )
+      }
+      hybridViewerStore.remoteRender()
+    },
+  })
+  const polyhedron_attribute_color_map = computed({
+    get: () =>
+      dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
+    set: (newValue) => {
+      const range = dataStyleStore.meshPolyhedraPolyhedronAttributeRange(
+        id.value,
+      )
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(
+        id.value,
+        newValue,
+        range[0],
+        range[1],
+      )
       hybridViewerStore.remoteRender()
     },
   })
 </script>
-
 <template>
   <ViewerContextMenuItem
     :itemProps="props.itemProps"
@@ -67,8 +139,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/app.js b/app/stores/app.js
index a17a2aec..42dfb23f 100644
--- a/app/stores/app.js
+++ b/app/stores/app.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 export const useAppStore = defineStore("app", () => {
   const stores = []
 
diff --git a/app/stores/data.js b/app/stores/data.js
index f1201818..5e0c8d1c 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 // Third party imports
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index 747a59ac..fd0275a2 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 import { getDefaultStyle } from "@ogw_front/utils/default_styles"
 import { useDataStore } from "@ogw_front/stores/data"
 import { useDataStyleStateStore } from "../../internal/stores/data_style_state"
@@ -46,7 +47,9 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   const exportStores = () => {
-    return { styles: dataStyleState.styles }
+    return {
+      styles: dataStyleState.styles,
+    }
   }
 
   const importStores = (snapshot) => {
diff --git a/app/stores/feedback.js b/app/stores/feedback.js
index 3f7693bf..f0e32dd6 100644
--- a/app/stores/feedback.js
+++ b/app/stores/feedback.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 import { v4 as uuidv4 } from "uuid"
 
 export const useFeedbackStore = defineStore("feedback", {
diff --git a/app/stores/geode.js b/app/stores/geode.js
index 1d1a975c..b0e6ea7a 100644
--- a/app/stores/geode.js
+++ b/app/stores/geode.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 import Status from "@ogw_front/utils/status"
 import { appMode } from "@ogw_front/utils/app_mode"
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index b4872b6b..9df0011b 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 import "@kitware/vtk.js/Rendering/Profiles/Geometry"
 import vtkGenericRenderWindow from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow"
 import vtkXMLPolyDataReader from "@kitware/vtk.js/IO/XML/XMLPolyDataReader"
diff --git a/app/stores/infra.js b/app/stores/infra.js
index 138867e1..64450518 100644
--- a/app/stores/infra.js
+++ b/app/stores/infra.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 import Status from "@ogw_front/utils/status"
 import { appMode, getAppMode } from "@ogw_front/utils/app_mode"
 import { useLambdaStore } from "@ogw_front/stores/lambda"
diff --git a/app/stores/lambda.js b/app/stores/lambda.js
index 3064c1cd..49ba7b73 100644
--- a/app/stores/lambda.js
+++ b/app/stores/lambda.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 import Status from "@ogw_front/utils/status"
 import { useFeedbackStore } from "@ogw_front/stores/feedback"
 
diff --git a/app/stores/menu.js b/app/stores/menu.js
index a74e13ef..37b2e836 100644
--- a/app/stores/menu.js
+++ b/app/stores/menu.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 // PointSet components
 import PointSetPointsOptions from "@ogw_front/components/Viewer/PointSet/SpecificPointsOptions"
 
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index d98f87dd..46e35434 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 export const useTreeviewStore = defineStore("treeview", () => {
   const items = ref([])
   const selection = ref([])
diff --git a/app/stores/viewer.js b/app/stores/viewer.js
index b424bc22..c21ac0be 100644
--- a/app/stores/viewer.js
+++ b/app/stores/viewer.js
@@ -1,3 +1,4 @@
+import { defineStore } from "pinia"
 import _ from "lodash"
 import vtkWSLinkClient from "@kitware/vtk.js/IO/Core/WSLinkClient"
 import "@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry"
diff --git a/app/utils/colormap.js b/app/utils/colormap.js
new file mode 100644
index 00000000..fdfffc41
--- /dev/null
+++ b/app/utils/colormap.js
@@ -0,0 +1,6 @@
+import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
+
+export function getRGBPointsFromPreset(presetName) {
+  const preset = vtkColorMaps.getPresetByName(presetName)
+  return preset ? preset.RGBPoints : []
+}
diff --git a/app/utils/default_styles.js b/app/utils/default_styles.js
index 09942b26..cfad7e90 100644
--- a/app/utils/default_styles.js
+++ b/app/utils/default_styles.js
@@ -32,7 +32,11 @@ const meshPointsDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      vertex: null,
+      vertex: {
+        name: undefined,
+
+        attributes: {},
+      },
     },
     size,
   }
@@ -48,8 +52,14 @@ const meshEdgesDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      edge: null,
-      vertex: null,
+      edge: {
+        name: undefined,
+        attributes: {},
+      },
+      vertex: {
+        name: undefined,
+        attributes: {},
+      },
     },
     width,
   }
@@ -63,10 +73,16 @@ const meshCellsDefaultStyle = (
     visibility,
     coloring: {
       active: "color",
-      cell: null,
+      cell: {
+        name: undefined,
+        attributes: {},
+      },
       color,
       textures: null,
-      vertex: null,
+      vertex: {
+        name: undefined,
+        attributes: {},
+      },
     },
   }
 }
@@ -81,8 +97,14 @@ const meshPolygonsDefaultStyle = (
       active: "color",
       color,
       textures: null,
-      polygon: null,
-      vertex: null,
+      polygon: {
+        name: undefined,
+        attributes: {},
+      },
+      vertex: {
+        name: undefined,
+        attributes: {},
+      },
     },
   }
 }
@@ -96,8 +118,14 @@ const meshPolyhedraDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      polyhedron: null,
-      vertex: null,
+      polyhedron: {
+        name: undefined,
+        attributes: {},
+      },
+      vertex: {
+        name: undefined,
+        attributes: {},
+      },
     },
   }
 }
diff --git a/internal/stores/data_style_state.js b/internal/stores/data_style_state.js
index 3b5dd49d..d8d594fb 100644
--- a/internal/stores/data_style_state.js
+++ b/internal/stores/data_style_state.js
@@ -23,5 +23,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
index 0596063f..af42d70d 100644
--- a/internal/stores/mesh/cells.js
+++ b/internal/stores/mesh/cells.js
@@ -1,11 +1,15 @@
 // 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"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { ensureAttributeEntry } from "./utils"
 
 // Local constants
 const mesh_cells_schemas = viewer_schemas.opengeodeweb_viewer.mesh.cells
+
 export function useMeshCellsStyle() {
   const dataStyleStateStore = useDataStyleStateStore()
   const viewerStore = useViewerStore()
@@ -73,53 +77,199 @@ export function useMeshCellsStyle() {
     )
   }
 
-  function meshCellsVertexAttribute(id) {
-    return meshCellsStyle(id).coloring.vertex
+  function meshCellsVertexAttributeName(id) {
+    const vertex = meshCellsStyle(id).coloring.vertex
+    return vertex ? vertex.name : ""
   }
+  function setMeshCellsVertexAttributeName(id, name) {
+    const coloring_style = meshCellsStyle(id).coloring
+    return viewerStore.request(
+      mesh_cells_schemas.attribute.vertex.name,
+      { id, name },
+      {
+        response_function: () => {
+          const saved_preset = coloring_style.vertex.attributes[name]
+          coloring_style.vertex.name = name
 
-  function setMeshCellsVertexAttribute(id, vertex_attribute) {
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshCellsVertexAttributeRange(id, minimum, maximum)
+            setMeshCellsVertexAttributeColorMap(id, colorMap, minimum, maximum)
+          }
+          console.log(
+            setMeshCellsVertexAttributeName.name,
+            { id },
+            meshCellsVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+  function meshCellsVertexAttributeRange(id) {
+    const name = meshCellsVertexAttributeName(id)
+    const saved_preset = meshCellsStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
+  }
+  function setMeshCellsVertexAttributeRange(id, minimum, maximum) {
     const coloring_style = meshCellsStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
     return viewerStore.request(
-      mesh_cells_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
+      mesh_cells_schemas.attribute.vertex.scalar_range,
+      { id, minimum, maximum },
       {
         response_function: () => {
-          coloring_style.vertex = vertex_attribute
           console.log(
-            setMeshCellsVertexAttribute.name,
+            setMeshCellsVertexAttributeRange.name,
             { id },
-            meshCellsVertexAttribute(id),
+            meshCellsVertexAttributeRange(id),
           )
         },
       },
     )
   }
+  function meshCellsVertexAttributeColorMap(id) {
+    const name = meshCellsVertexAttributeName(id)
+    const saved_preset = meshCellsStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshCellsVertexAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshCellsStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_cells_schemas.attribute.vertex.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(setMeshCellsVertexAttributeColorMap.name, {
+            id,
+            colorMapName: meshCellsVertexAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
+
+  function meshCellsCellAttributeName(id) {
+    return meshCellsStyle(id).coloring.cell?.name ?? ""
+  }
+  function setMeshCellsCellAttributeName(id, name) {
+    const coloring_style = meshCellsStyle(id).coloring
+    return viewerStore.request(
+      mesh_cells_schemas.attribute.cell.name,
+      { id, name },
+      {
+        response_function: () => {
+          const saved_preset = coloring_style.cell.attributes[name]
+          coloring_style.cell.name = name
 
-  function meshCellsCellAttribute(id) {
-    return meshCellsStyle(id).coloring.cell
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshCellsCellAttributeRange(id, minimum, maximum)
+            setMeshCellsCellAttributeColorMap(id, colorMap, minimum, maximum)
+          }
+          console.log(
+            setMeshCellsCellAttributeName.name,
+            { id },
+            meshCellsCellAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+  function meshCellsCellAttributeRange(id) {
+    const name = meshCellsCellAttributeName(id)
+    const saved_preset = meshCellsStyle(id).coloring.cell.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
   }
-  function setMeshCellsCellAttribute(id, cell_attribute) {
+  function setMeshCellsCellAttributeRange(id, minimum, maximum) {
     const coloring_style = meshCellsStyle(id).coloring
+    const name = coloring_style.cell.name
+    ensureAttributeEntry(coloring_style.cell, name)
+    const saved_preset = coloring_style.cell.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
     return viewerStore.request(
-      mesh_cells_schemas.cell_attribute,
-      { id, ...cell_attribute },
+      mesh_cells_schemas.attribute.cell.scalar_range,
+      { id, minimum, maximum },
       {
         response_function: () => {
-          coloring_style.cell = cell_attribute
           console.log(
-            setMeshCellsCellAttribute.name,
+            setMeshCellsCellAttributeRange.name,
             { id },
-            meshCellsCellAttribute(id),
+            meshCellsCellAttributeRange(id),
           )
         },
       },
     )
   }
+  function meshCellsCellAttributeColorMap(id) {
+    const name = meshCellsCellAttributeName(id)
+    const saved_preset = meshCellsStyle(id).coloring.cell.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshCellsCellAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshCellsStyle(id).coloring
+    const name = coloring_style.cell.name
+    ensureAttributeEntry(coloring_style.cell, name)
+    const saved_preset = coloring_style.cell.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_cells_schemas.attribute.cell.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(setMeshCellsCellAttributeColorMap.name, {
+            id,
+            colorMapName: meshCellsCellAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
 
   function meshCellsActiveColoring(id) {
     return meshCellsStyle(id).coloring.active
   }
-  function setMeshCellsActiveColoring(id, type) {
+  async function setMeshCellsActiveColoring(id, type) {
     const coloring = meshCellsStyle(id).coloring
     coloring.active = type
     console.log(
@@ -131,21 +281,53 @@ export function useMeshCellsStyle() {
       return setMeshCellsColor(id, coloring.color)
     } else if (type === "textures") {
       if (coloring.textures === null) {
-        throw new Error("Textures not set")
+        return Promise.resolve()
       }
       return setMeshCellsTextures(id, coloring.textures)
     } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
+      const name = coloring.vertex.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.vertex.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshCellsVertexAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshCellsVertexAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshCellsVertexAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshCellsVertexAttribute(id, coloring.vertex)
     } else if (type === "cell") {
-      if (coloring.cell === null) {
-        throw new Error("Cell attribute not set")
+      const name = coloring.cell.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.cell.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshCellsCellAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshCellsCellAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshCellsCellAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshCellsCellAttribute(id, coloring.cell)
     } else {
-      throw new Error("Unknown mesh cells coloring type: " + type)
+      throw new Error("Unknown mesh cells active coloring type: " + type)
     }
   }
 
@@ -158,18 +340,26 @@ export function useMeshCellsStyle() {
   }
 
   return {
-    meshCellsVisibility,
-    meshCellsActiveColoring,
-    meshCellsColor,
-    meshCellsTextures,
-    meshCellsCellAttribute,
-    meshCellsVertexAttribute,
-    setMeshCellsVisibility,
-    setMeshCellsActiveColoring,
-    setMeshCellsColor,
-    setMeshCellsTextures,
-    setMeshCellsVertexAttribute,
-    setMeshCellsCellAttribute,
-    applyMeshCellsStyle,
+    meshCellsVisibility: meshCellsVisibility,
+    meshCellsActiveColoring: meshCellsActiveColoring,
+    meshCellsColor: meshCellsColor,
+    meshCellsTextures: meshCellsTextures,
+    meshCellsVertexAttributeName: meshCellsVertexAttributeName,
+    meshCellsVertexAttributeRange: meshCellsVertexAttributeRange,
+    meshCellsVertexAttributeColorMap: meshCellsVertexAttributeColorMap,
+    meshCellsCellAttributeName: meshCellsCellAttributeName,
+    meshCellsCellAttributeRange: meshCellsCellAttributeRange,
+    meshCellsCellAttributeColorMap: meshCellsCellAttributeColorMap,
+    setMeshCellsVisibility: setMeshCellsVisibility,
+    setMeshCellsActiveColoring: setMeshCellsActiveColoring,
+    setMeshCellsColor: setMeshCellsColor,
+    setMeshCellsTextures: setMeshCellsTextures,
+    setMeshCellsVertexAttributeName: setMeshCellsVertexAttributeName,
+    setMeshCellsVertexAttributeRange: setMeshCellsVertexAttributeRange,
+    setMeshCellsVertexAttributeColorMap: setMeshCellsVertexAttributeColorMap,
+    setMeshCellsCellAttributeName: setMeshCellsCellAttributeName,
+    setMeshCellsCellAttributeRange: setMeshCellsCellAttributeRange,
+    setMeshCellsCellAttributeColorMap: setMeshCellsCellAttributeColorMap,
+    applyMeshCellsStyle: applyMeshCellsStyle,
   }
 }
diff --git a/internal/stores/mesh/edges.js b/internal/stores/mesh/edges.js
index db16c41d..1fea12f4 100644
--- a/internal/stores/mesh/edges.js
+++ b/internal/stores/mesh/edges.js
@@ -4,6 +4,8 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 // Local imports
 import { useDataStyleStateStore } from "../data_style_state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { ensureAttributeEntry } from "./utils"
 
 // Local constants
 const mesh_edges_schemas = viewer_schemas.opengeodeweb_viewer.mesh.edges
@@ -39,7 +41,7 @@ export function useMeshEdgesStyle() {
   function meshEdgesActiveColoring(id) {
     return meshEdgesStyle(id).coloring.active
   }
-  function setMeshEdgesActiveColoring(id, type) {
+  async function setMeshEdgesActiveColoring(id, type) {
     const coloring = meshEdgesStyle(id).coloring
     coloring.active = type
     console.log(
@@ -50,17 +52,49 @@ export function useMeshEdgesStyle() {
     if (type === "color") {
       return setMeshEdgesColor(id, coloring.color)
     } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
+      const name = coloring.vertex.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.vertex.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshEdgesVertexAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshEdgesVertexAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshEdgesVertexAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshEdgesVertexAttribute(id, coloring.vertex)
     } else if (type === "edge") {
-      if (coloring.edge === null) {
-        throw new Error("Edge attribute not set")
+      const name = coloring.edge.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.edge.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshEdgesEdgeAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshEdgesEdgeAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshEdgesEdgeAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshEdgesEdgeAttribute(id, coloring.edge)
     } else {
-      throw new Error("Unknown mesh edges coloring type: " + type)
+      throw new Error("Unknown mesh edges active coloring type: " + type)
     }
   }
 
@@ -102,47 +136,203 @@ export function useMeshEdgesStyle() {
     )
   }
 
-  function meshEdgesVertexAttribute(id) {
-    return meshEdgesStyle(id).coloring.vertex
+  function meshEdgesVertexAttributeName(id) {
+    const vertex = meshEdgesStyle(id).coloring.vertex
+    return vertex ? vertex.name : ""
+  }
+  function setMeshEdgesVertexAttributeName(id, name) {
+    const coloring_style = meshEdgesStyle(id).coloring
+    return viewerStore.request(
+      mesh_edges_schemas.attribute.vertex.name,
+      { id, name },
+      {
+        response_function: () => {
+          const saved_preset = coloring_style.vertex.attributes[name]
+          coloring_style.vertex.name = name
+
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshEdgesVertexAttributeRange(id, minimum, maximum)
+            setMeshEdgesVertexAttributeColorMap(id, colorMap, minimum, maximum)
+          }
+          console.log(
+            setMeshEdgesVertexAttributeName.name,
+            { id },
+            meshEdgesVertexAttributeName(id),
+          )
+        },
+      },
+    )
   }
-  function setMeshEdgesVertexAttribute(id, vertex_attribute) {
+  function meshEdgesVertexAttributeRange(id) {
+    const name = meshEdgesVertexAttributeName(id)
+    const saved_preset = meshEdgesStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
+  }
+  function setMeshEdgesVertexAttributeRange(id, minimum, maximum) {
     const coloring_style = meshEdgesStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
     return viewerStore.request(
-      mesh_edges_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
+      mesh_edges_schemas.attribute.vertex.scalar_range,
+      { id, minimum, maximum },
       {
         response_function: () => {
-          coloring_style.vertex = vertex_attribute
           console.log(
-            setMeshEdgesVertexAttribute.name,
+            setMeshEdgesVertexAttributeRange.name,
             { id },
-            meshEdgesVertexAttribute(id),
+            meshEdgesVertexAttributeRange(id),
           )
         },
       },
     )
   }
+  function meshEdgesVertexAttributeColorMap(id) {
+    const name = meshEdgesVertexAttributeName(id)
+    const saved_preset = meshEdgesStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshEdgesVertexAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshEdgesStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_edges_schemas.attribute.vertex.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(setMeshEdgesVertexAttributeColorMap.name, {
+            id,
+            colorMapName: meshEdgesVertexAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
+
+  function meshEdgesEdgeAttributeName(id) {
+    const edge = meshEdgesStyle(id).coloring.edge
+    return edge ? edge.name : ""
+  }
+  function setMeshEdgesEdgeAttributeName(id, name) {
+    const coloring_style = meshEdgesStyle(id).coloring
+    return viewerStore.request(
+      mesh_edges_schemas.attribute.edge.name,
+      { id, name },
+      {
+        response_function: () => {
+          const saved_preset = coloring_style.edge.attributes[name]
+          coloring_style.edge.name = name
 
-  function meshEdgesEdgeAttribute(id) {
-    return meshEdgesStyle(id).coloring.edge
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshEdgesEdgeAttributeRange(id, minimum, maximum)
+            setMeshEdgesEdgeAttributeColorMap(id, colorMap, minimum, maximum)
+          }
+          console.log(
+            setMeshEdgesEdgeAttributeName.name,
+            { id },
+            meshEdgesEdgeAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+  function meshEdgesEdgeAttributeRange(id) {
+    const name = meshEdgesEdgeAttributeName(id)
+    const saved_preset = meshEdgesStyle(id).coloring.edge.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
   }
-  function setMeshEdgesEdgeAttribute(id, edge_attribute) {
+  function setMeshEdgesEdgeAttributeRange(id, minimum, maximum) {
     const coloring_style = meshEdgesStyle(id).coloring
+    const name = coloring_style.edge.name
+    ensureAttributeEntry(coloring_style.edge, name)
+    const saved_preset = coloring_style.edge.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
+    if (!mesh_edges_schemas.edge_scalar_range) {
+      console.warn("setMeshEdgesEdgeAttributeRange: RPC not available")
+      return Promise.resolve()
+    }
     return viewerStore.request(
-      mesh_edges_schemas.edge_attribute,
-      { id, ...edge_attribute },
+      mesh_edges_schemas.edge_scalar_range,
+      { id, minimum, maximum },
       {
         response_function: () => {
-          coloring_style.edge = edge_attribute
           console.log(
-            setMeshEdgesEdgeAttribute.name,
+            setMeshEdgesEdgeAttributeRange.name,
             { id },
-            meshEdgesEdgeAttribute(id),
+            meshEdgesEdgeAttributeRange(id),
           )
         },
       },
     )
   }
+  function meshEdgesEdgeAttributeColorMap(id) {
+    const name = meshEdgesEdgeAttributeName(id)
+    const saved_preset = meshEdgesStyle(id).coloring.edge.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshEdgesEdgeAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshEdgesStyle(id).coloring
+    const name = coloring_style.edge.name
+    ensureAttributeEntry(coloring_style.edge, name)
+    const saved_preset = coloring_style.edge.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    if (!mesh_edges_schemas.edge_color_map) {
+      console.warn("setMeshEdgesEdgeAttributeColorMap: RPC not available")
+      return Promise.resolve()
+    }
+    return viewerStore.request(
+      mesh_edges_schemas.edge_color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(setMeshEdgesEdgeAttributeColorMap.name, {
+            id,
+            colorMapName: meshEdgesEdgeAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
 
   function applyMeshEdgesStyle(id) {
     const style = meshEdgesStyle(id)
@@ -154,18 +344,26 @@ export function useMeshEdgesStyle() {
   }
 
   return {
-    applyMeshEdgesStyle,
+    meshEdgesVisibility,
     meshEdgesActiveColoring,
     meshEdgesColor,
-    meshEdgesVisibility,
     meshEdgesWidth,
-    meshEdgesVertexAttribute,
-    meshEdgesEdgeAttribute,
+    meshEdgesVertexAttributeName,
+    meshEdgesVertexAttributeRange,
+    meshEdgesVertexAttributeColorMap,
+    meshEdgesEdgeAttributeName,
+    meshEdgesEdgeAttributeRange,
+    meshEdgesEdgeAttributeColorMap,
+    setMeshEdgesVisibility,
     setMeshEdgesActiveColoring,
     setMeshEdgesColor,
-    setMeshEdgesVisibility,
     setMeshEdgesWidth,
-    setMeshEdgesVertexAttribute,
-    setMeshEdgesEdgeAttribute,
+    setMeshEdgesVertexAttributeName,
+    setMeshEdgesVertexAttributeRange,
+    setMeshEdgesVertexAttributeColorMap,
+    setMeshEdgesEdgeAttributeName,
+    setMeshEdgesEdgeAttributeRange,
+    setMeshEdgesEdgeAttributeColorMap,
+    applyMeshEdgesStyle,
   }
 }
diff --git a/internal/stores/mesh/index.js b/internal/stores/mesh/index.js
index b38d710c..71b20655 100644
--- a/internal/stores/mesh/index.js
+++ b/internal/stores/mesh/index.js
@@ -57,6 +57,7 @@ export default function useMeshStyle() {
         promise_array.push(meshPolygonsStyleStore.applyMeshPolygonsStyle(id))
       } else if (key === "polyhedra") {
         promise_array.push(meshPolyhedraStyleStore.applyMeshPolyhedraStyle(id))
+      } else if (key === "attributes") {
       } else {
         throw new Error("Unknown mesh key: " + key)
       }
diff --git a/internal/stores/mesh/points.js b/internal/stores/mesh/points.js
index 45ccd45a..0442260c 100644
--- a/internal/stores/mesh/points.js
+++ b/internal/stores/mesh/points.js
@@ -4,6 +4,8 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 // Local imports
 import { useDataStyleStateStore } from "../data_style_state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { ensureAttributeEntry } from "./utils"
 
 // Local constants
 const mesh_points_schemas = viewer_schemas.opengeodeweb_viewer.mesh.points
@@ -40,7 +42,7 @@ export function useMeshPointsStyle() {
   function meshPointsActiveColoring(id) {
     return meshPointsStyle(id).coloring.active
   }
-  function setMeshPointsActiveColoring(id, type) {
+  async function setMeshPointsActiveColoring(id, type) {
     const coloring = meshPointsStyle(id).coloring
     coloring.active = type
     console.log(
@@ -51,12 +53,28 @@ export function useMeshPointsStyle() {
     if (type === "color") {
       return setMeshPointsColor(id, coloring.color)
     } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
+      const name = coloring.vertex.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.vertex.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshPointsVertexAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshPointsVertexAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshPointsVertexAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshPointsVertexAttribute(id, coloring.vertex)
     } else {
-      throw new Error("Unknown mesh points coloring type: " + type)
+      throw new Error("Unknown mesh points active coloring type: " + type)
     }
   }
 
@@ -80,26 +98,99 @@ export function useMeshPointsStyle() {
       },
     )
   }
-  function meshPointsVertexAttribute(id) {
-    return meshPointsStyle(id).coloring.vertex
+  function meshPointsVertexAttributeName(id) {
+    return meshPointsStyle(id).coloring.vertex.name
   }
-  function setMeshPointsVertexAttribute(id, vertex_attribute) {
+  function setMeshPointsVertexAttributeName(id, name) {
     const coloring_style = meshPointsStyle(id).coloring
     return viewerStore.request(
-      mesh_points_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
+      mesh_points_schemas.attribute.vertex.name,
+      { id, name },
       {
         response_function: () => {
-          coloring_style.vertex = vertex_attribute
+          const saved_preset = coloring_style.vertex.attributes[name]
+          coloring_style.vertex.name = name
+
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshPointsVertexAttributeRange(id, minimum, maximum)
+            setMeshPointsVertexAttributeColorMap(id, colorMap, minimum, maximum)
+          }
+
           console.log(
-            setMeshPointsVertexAttribute.name,
+            setMeshPointsVertexAttributeName.name,
             { id },
-            meshPointsVertexAttribute(id),
+            meshPointsVertexAttributeName(id),
           )
         },
       },
     )
   }
+  function meshPointsVertexAttributeRange(id) {
+    const name = meshPointsVertexAttributeName(id)
+    const saved_preset = meshPointsStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
+  }
+  function setMeshPointsVertexAttributeRange(id, minimum, maximum) {
+    const coloring_style = meshPointsStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
+    return viewerStore.request(
+      mesh_points_schemas.attribute.vertex.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(
+            setMeshPointsVertexAttributeRange.name,
+            { id },
+            meshPointsVertexAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+  function meshPointsVertexAttributeColorMap(id) {
+    const vertex = meshPointsStyle(id).coloring.vertex
+    return vertex ? vertex.colorMap : null
+  }
+  function setMeshPointsVertexAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshPointsStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_points_schemas.attribute.vertex.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(setMeshPointsVertexAttributeColorMap.name, {
+            id,
+            colorMapName: meshPointsVertexAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
 
   function meshPointsSize(id) {
     return meshPointsStyle(id).size
@@ -130,12 +221,16 @@ export function useMeshPointsStyle() {
     meshPointsVisibility,
     meshPointsActiveColoring,
     meshPointsColor,
-    meshPointsVertexAttribute,
+    meshPointsVertexAttributeName,
+    meshPointsVertexAttributeRange,
+    meshPointsVertexAttributeColorMap,
     meshPointsSize,
     setMeshPointsVisibility,
     setMeshPointsActiveColoring,
     setMeshPointsColor,
-    setMeshPointsVertexAttribute,
+    setMeshPointsVertexAttributeName,
+    setMeshPointsVertexAttributeRange,
+    setMeshPointsVertexAttributeColorMap,
     setMeshPointsSize,
     applyMeshPointsStyle,
   }
diff --git a/internal/stores/mesh/polygons.js b/internal/stores/mesh/polygons.js
index 524c384c..ab4e20a2 100644
--- a/internal/stores/mesh/polygons.js
+++ b/internal/stores/mesh/polygons.js
@@ -4,6 +4,9 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 // Local imports
 import { useDataStyleStateStore } from "../data_style_state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { ensureAttributeEntry } from "./utils"
 
 // Local constants
 const mesh_polygons_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polygons
@@ -11,6 +14,7 @@ const mesh_polygons_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polygons
 export function useMeshPolygonsStyle() {
   const dataStyleStateStore = useDataStyleStateStore()
   const viewerStore = useViewerStore()
+  const hybridViewerStore = useHybridViewerStore()
 
   function meshPolygonsStyle(id) {
     return dataStyleStateStore.getStyle(id).polygons
@@ -79,53 +83,212 @@ export function useMeshPolygonsStyle() {
     )
   }
 
-  function meshPolygonsVertexAttribute(id) {
-    return meshPolygonsStyle(id).coloring.vertex
+  function meshPolygonsVertexAttributeName(id) {
+    const vertex = meshPolygonsStyle(id).coloring.vertex
+    return vertex ? vertex.name : ""
   }
+  function setMeshPolygonsVertexAttributeName(id, name) {
+    const coloring_style = meshPolygonsStyle(id).coloring
+    return viewerStore.request(
+      mesh_polygons_schemas.attribute.vertex.name,
+      { id, name },
+      {
+        response_function: () => {
+          const saved_preset = coloring_style.vertex.attributes[name]
+          coloring_style.vertex.name = name
 
-  function setMeshPolygonsVertexAttribute(id, vertex_attribute) {
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshPolygonsVertexAttributeRange(id, minimum, maximum)
+            setMeshPolygonsVertexAttributeColorMap(
+              id,
+              colorMap,
+              minimum,
+              maximum,
+            )
+          }
+          console.log(
+            setMeshPolygonsVertexAttributeName.name,
+            { id },
+            meshPolygonsVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+  function meshPolygonsVertexAttributeRange(id) {
+    const name = meshPolygonsVertexAttributeName(id)
+    const saved_preset = meshPolygonsStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
+  }
+  function setMeshPolygonsVertexAttributeRange(id, minimum, maximum) {
     const coloring_style = meshPolygonsStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
     return viewerStore.request(
-      mesh_polygons_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
+      mesh_polygons_schemas.attribute.vertex.scalar_range,
+      { id, minimum, maximum },
       {
         response_function: () => {
-          coloring_style.vertex = vertex_attribute
           console.log(
-            setMeshPolygonsVertexAttribute.name,
+            setMeshPolygonsVertexAttributeRange.name,
             { id },
-            meshPolygonsVertexAttribute(id),
+            meshPolygonsVertexAttributeRange(id),
           )
         },
       },
     )
   }
+  function meshPolygonsVertexAttributeColorMap(id) {
+    const name = meshPolygonsVertexAttributeName(id)
+    const saved_preset = meshPolygonsStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshPolygonsVertexAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshPolygonsStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_polygons_schemas.attribute.vertex.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          hybridViewerStore.remoteRender()
+          console.log(setMeshPolygonsVertexAttributeColorMap.name, {
+            id,
+            colorMapName: meshPolygonsVertexAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
 
-  function meshPolygonsPolygonAttribute(id) {
-    return meshPolygonsStyle(id).coloring.polygon
+  function meshPolygonsPolygonAttributeName(id) {
+    const polygon = meshPolygonsStyle(id).coloring.polygon
+    return polygon ? polygon.name : ""
   }
-  function setMeshPolygonsPolygonAttribute(id, polygon_attribute) {
+  function setMeshPolygonsPolygonAttributeName(id, name) {
     const coloring_style = meshPolygonsStyle(id).coloring
     return viewerStore.request(
-      mesh_polygons_schemas.polygon_attribute,
-      { id, ...polygon_attribute },
+      mesh_polygons_schemas.attribute.polygon.name,
+      { id, name },
       {
         response_function: () => {
-          coloring_style.polygon = polygon_attribute
+          const saved_preset = coloring_style.polygon.attributes[name]
+          coloring_style.polygon.name = name
+
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshPolygonsPolygonAttributeRange(id, minimum, maximum)
+            setMeshPolygonsPolygonAttributeColorMap(
+              id,
+              colorMap,
+              minimum,
+              maximum,
+            )
+          }
           console.log(
-            setMeshPolygonsPolygonAttribute.name,
+            setMeshPolygonsPolygonAttributeName.name,
             { id },
-            meshPolygonsPolygonAttribute(id),
+            meshPolygonsPolygonAttributeName(id),
           )
         },
       },
     )
   }
+  function meshPolygonsPolygonAttributeRange(id) {
+    const name = meshPolygonsPolygonAttributeName(id)
+    const saved_preset = meshPolygonsStyle(id).coloring.polygon.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
+  }
+  function setMeshPolygonsPolygonAttributeRange(id, minimum, maximum) {
+    const coloring_style = meshPolygonsStyle(id).coloring
+    const name = coloring_style.polygon.name
+    ensureAttributeEntry(coloring_style.polygon, name)
+    const saved_preset = coloring_style.polygon.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
+    return viewerStore.request(
+      mesh_polygons_schemas.attribute.polygon.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(
+            setMeshPolygonsPolygonAttributeRange.name,
+            { id },
+            meshPolygonsPolygonAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+  function meshPolygonsPolygonAttributeColorMap(id) {
+    const name = meshPolygonsPolygonAttributeName(id)
+    const saved_preset = meshPolygonsStyle(id).coloring.polygon.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshPolygonsPolygonAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshPolygonsStyle(id).coloring
+    const name = coloring_style.polygon.name
+    ensureAttributeEntry(coloring_style.polygon, name)
+    const saved_preset = coloring_style.polygon.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_polygons_schemas.attribute.polygon.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          hybridViewerStore.remoteRender()
+          console.log(setMeshPolygonsPolygonAttributeColorMap.name, {
+            id,
+            colorMapName: meshPolygonsPolygonAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
 
   function meshPolygonsActiveColoring(id) {
     return meshPolygonsStyle(id).coloring.active
   }
-  function setMeshPolygonsActiveColoring(id, type) {
+  async function setMeshPolygonsActiveColoring(id, type) {
     const coloring = meshPolygonsStyle(id).coloring
     coloring.active = type
     console.log(
@@ -137,21 +300,53 @@ export function useMeshPolygonsStyle() {
       return setMeshPolygonsColor(id, coloring.color)
     } else if (type === "textures") {
       if (coloring.textures === null) {
-        throw new Error("Textures not set")
+        return Promise.resolve()
       }
       return setMeshPolygonsTextures(id, coloring.textures)
     } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
+      const name = coloring.vertex.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.vertex.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshPolygonsVertexAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshPolygonsVertexAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshPolygonsVertexAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshPolygonsVertexAttribute(id, coloring.vertex)
     } else if (type === "polygon") {
-      if (coloring.polygon === null) {
-        throw new Error("Polygon attribute not set")
+      const name = coloring.polygon.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.polygon.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshPolygonsPolygonAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshPolygonsPolygonAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshPolygonsPolygonAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshPolygonsPolygonAttribute(id, coloring.polygon)
     } else {
-      throw new Error("Unknown mesh polygons coloring type: " + type)
+      throw new Error("Unknown mesh polygons active coloring type: " + type)
     }
   }
 
@@ -168,14 +363,22 @@ export function useMeshPolygonsStyle() {
     meshPolygonsActiveColoring,
     meshPolygonsColor,
     meshPolygonsTextures,
-    meshPolygonsPolygonAttribute,
-    meshPolygonsVertexAttribute,
+    meshPolygonsVertexAttributeName,
+    meshPolygonsVertexAttributeRange,
+    meshPolygonsVertexAttributeColorMap,
+    meshPolygonsPolygonAttributeName,
+    meshPolygonsPolygonAttributeRange,
+    meshPolygonsPolygonAttributeColorMap,
     setMeshPolygonsVisibility,
     setMeshPolygonsActiveColoring,
     setMeshPolygonsColor,
     setMeshPolygonsTextures,
-    setMeshPolygonsVertexAttribute,
-    setMeshPolygonsPolygonAttribute,
+    setMeshPolygonsVertexAttributeName,
+    setMeshPolygonsVertexAttributeRange,
+    setMeshPolygonsVertexAttributeColorMap,
+    setMeshPolygonsPolygonAttributeName,
+    setMeshPolygonsPolygonAttributeRange,
+    setMeshPolygonsPolygonAttributeColorMap,
     applyMeshPolygonsStyle,
   }
 }
diff --git a/internal/stores/mesh/polyhedra.js b/internal/stores/mesh/polyhedra.js
index 47c2520b..c96002a8 100644
--- a/internal/stores/mesh/polyhedra.js
+++ b/internal/stores/mesh/polyhedra.js
@@ -4,6 +4,8 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 // Local imports
 import { useDataStyleStateStore } from "../data_style_state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { ensureAttributeEntry } from "./utils"
 
 // Local constants
 const mesh_polyhedra_schemas = viewer_schemas.opengeodeweb_viewer.mesh.polyhedra
@@ -39,7 +41,7 @@ export function useMeshPolyhedraStyle() {
   function meshPolyhedraActiveColoring(id) {
     return meshPolyhedraStyle(id).coloring.active
   }
-  function setMeshPolyhedraActiveColoring(id, type) {
+  async function setMeshPolyhedraActiveColoring(id, type) {
     const coloring = meshPolyhedraStyle(id).coloring
     coloring.active = type
     console.log(
@@ -50,17 +52,49 @@ export function useMeshPolyhedraStyle() {
     if (type === "color") {
       return setMeshPolyhedraColor(id, coloring.color)
     } else if (type === "vertex") {
-      if (coloring.vertex === null) {
-        throw new Error("Vertex attribute not set")
+      const name = coloring.vertex.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.vertex.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshPolyhedraVertexAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshPolyhedraVertexAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshPolyhedraVertexAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshPolyhedraVertexAttribute(id, coloring.vertex)
     } else if (type === "polyhedron") {
-      if (coloring.polyhedron === null) {
-        throw new Error("Polyhedron attribute not set")
+      const name = coloring.polyhedron.name
+      if (name === undefined) {
+        return Promise.resolve()
+      }
+      const attributes = coloring.polyhedron.attributes
+      const minimum = attributes[name]?.minimum
+      const maximum = attributes[name]?.maximum
+      const colorMap = attributes[name]?.colorMap
+      await setMeshPolyhedraPolyhedronAttributeName(id, name)
+      if (minimum !== undefined && maximum !== undefined) {
+        await setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum)
+        if (colorMap) {
+          await setMeshPolyhedraPolyhedronAttributeColorMap(
+            id,
+            colorMap,
+            minimum,
+            maximum,
+          )
+        }
       }
-      return setMeshPolyhedraPolyhedronAttribute(id, coloring.polyhedron)
     } else {
-      throw new Error("Unknown mesh polyhedra coloring type: " + type)
+      throw new Error("Unknown mesh polyhedra active coloring type: " + type)
     }
   }
 
@@ -85,47 +119,207 @@ export function useMeshPolyhedraStyle() {
     )
   }
 
-  function meshPolyhedraVertexAttribute(id) {
-    return meshPolyhedraStyle(id).coloring.vertex
+  function meshPolyhedraVertexAttributeName(id) {
+    const vertex = meshPolyhedraStyle(id).coloring.vertex
+    return vertex ? vertex.name : ""
+  }
+  function setMeshPolyhedraVertexAttributeName(id, name) {
+    const coloring_style = meshPolyhedraStyle(id).coloring
+    return viewerStore.request(
+      mesh_polyhedra_schemas.attribute.vertex.name,
+      { id, name },
+      {
+        response_function: () => {
+          const saved_preset = coloring_style.vertex.attributes[name]
+          coloring_style.vertex.name = name
+
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshPolyhedraVertexAttributeRange(id, minimum, maximum)
+            setMeshPolyhedraVertexAttributeColorMap(
+              id,
+              colorMap,
+              minimum,
+              maximum,
+            )
+          }
+          console.log(
+            setMeshPolyhedraVertexAttributeName.name,
+            { id },
+            meshPolyhedraVertexAttributeName(id),
+          )
+        },
+      },
+    )
   }
-  function setMeshPolyhedraVertexAttribute(id, vertex_attribute) {
+  function meshPolyhedraVertexAttributeRange(id) {
+    const name = meshPolyhedraVertexAttributeName(id)
+    const saved_preset = meshPolyhedraStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
+  }
+  function setMeshPolyhedraVertexAttributeRange(id, minimum, maximum) {
     const coloring_style = meshPolyhedraStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
     return viewerStore.request(
-      mesh_polyhedra_schemas.vertex_attribute,
-      { id, ...vertex_attribute },
+      mesh_polyhedra_schemas.attribute.vertex.scalar_range,
+      { id, minimum, maximum },
       {
         response_function: () => {
-          coloring_style.vertex = vertex_attribute
           console.log(
-            setMeshPolyhedraVertexAttribute.name,
+            setMeshPolyhedraVertexAttributeRange.name,
             { id },
-            meshPolyhedraVertexAttribute(id),
+            meshPolyhedraVertexAttributeRange(id),
           )
         },
       },
     )
   }
+  function meshPolyhedraVertexAttributeColorMap(id) {
+    const name = meshPolyhedraVertexAttributeName(id)
+    const saved_preset = meshPolyhedraStyle(id).coloring.vertex.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshPolyhedraVertexAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshPolyhedraStyle(id).coloring
+    const name = coloring_style.vertex.name
+    ensureAttributeEntry(coloring_style.vertex, name)
+    const saved_preset = coloring_style.vertex.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_polyhedra_schemas.attribute.vertex.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(setMeshPolyhedraVertexAttributeColorMap.name, {
+            id,
+            colorMapName: meshPolyhedraVertexAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
 
-  function meshPolyhedraPolyhedronAttribute(id) {
-    return meshPolyhedraStyle(id).coloring.polyhedron
+  function meshPolyhedraPolyhedronAttributeName(id) {
+    const polyhedron = meshPolyhedraStyle(id).coloring.polyhedron
+    return polyhedron ? polyhedron.name : ""
   }
-  function setMeshPolyhedraPolyhedronAttribute(id, polyhedron_attribute) {
-    const coloring = meshPolyhedraStyle(id).coloring
+  function setMeshPolyhedraPolyhedronAttributeName(id, name) {
+    const coloring_style = meshPolyhedraStyle(id).coloring
     return viewerStore.request(
-      mesh_polyhedra_schemas.polyhedron_attribute,
-      { id, ...polyhedron_attribute },
+      mesh_polyhedra_schemas.attribute.polyhedron.name,
+      { id, name },
+      {
+        response_function: () => {
+          const saved_preset = coloring_style.polyhedron.attributes[name]
+          coloring_style.polyhedron.name = name
+
+          let minimum, maximum, colorMap
+          if (
+            saved_preset &&
+            saved_preset.minimum !== undefined &&
+            saved_preset.maximum !== undefined
+          ) {
+            minimum = saved_preset.minimum
+            maximum = saved_preset.maximum
+            colorMap = saved_preset.colorMap
+            setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum)
+            setMeshPolyhedraPolyhedronAttributeColorMap(
+              id,
+              colorMap,
+              minimum,
+              maximum,
+            )
+          }
+          console.log(
+            setMeshPolyhedraPolyhedronAttributeName.name,
+            { id },
+            meshPolyhedraPolyhedronAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+  function meshPolyhedraPolyhedronAttributeRange(id) {
+    const name = meshPolyhedraPolyhedronAttributeName(id)
+    const saved_preset =
+      meshPolyhedraStyle(id).coloring.polyhedron.attributes[name]
+    return saved_preset ? [saved_preset.minimum, saved_preset.maximum] : [0, 1]
+  }
+  function setMeshPolyhedraPolyhedronAttributeRange(id, minimum, maximum) {
+    const coloring_style = meshPolyhedraStyle(id).coloring
+    const name = coloring_style.polyhedron.name
+    ensureAttributeEntry(coloring_style.polyhedron, name)
+    const saved_preset = coloring_style.polyhedron.attributes[name]
+    saved_preset.minimum = minimum
+    saved_preset.maximum = maximum
+    return viewerStore.request(
+      mesh_polyhedra_schemas.attribute.polyhedron.scalar_range,
+      { id, minimum, maximum },
       {
         response_function: () => {
-          coloring.polyhedron = polyhedron_attribute
           console.log(
-            setMeshPolyhedraPolyhedronAttribute.name,
+            setMeshPolyhedraPolyhedronAttributeRange.name,
             { id },
-            meshPolyhedraPolyhedronAttribute(id),
+            meshPolyhedraPolyhedronAttributeRange(id),
           )
         },
       },
     )
   }
+  function meshPolyhedraPolyhedronAttributeColorMap(id) {
+    const name = meshPolyhedraPolyhedronAttributeName(id)
+    const saved_preset =
+      meshPolyhedraStyle(id).coloring.polyhedron.attributes[name]
+    return saved_preset ? saved_preset.colorMap : null
+  }
+  function setMeshPolyhedraPolyhedronAttributeColorMap(
+    id,
+    colorMapName,
+    minimum,
+    maximum,
+  ) {
+    const coloring_style = meshPolyhedraStyle(id).coloring
+    const name = coloring_style.polyhedron.name
+    ensureAttributeEntry(coloring_style.polyhedron, name)
+    const saved_preset = coloring_style.polyhedron.attributes[name]
+    saved_preset.colorMap = colorMapName
+    const points =
+      typeof colorMapName === "string"
+        ? getRGBPointsFromPreset(colorMapName)
+        : colorMapName
+    return viewerStore.request(
+      mesh_polyhedra_schemas.attribute.polyhedron.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          console.log(setMeshPolyhedraPolyhedronAttributeColorMap.name, {
+            id,
+            colorMapName: meshPolyhedraPolyhedronAttributeColorMap(id),
+          })
+        },
+      },
+    )
+  }
 
   function applyMeshPolyhedraStyle(id) {
     const style = meshPolyhedraStyle(id)
@@ -136,16 +330,24 @@ export function useMeshPolyhedraStyle() {
   }
 
   return {
-    applyMeshPolyhedraStyle,
+    meshPolyhedraVisibility,
     meshPolyhedraActiveColoring,
     meshPolyhedraColor,
-    meshPolyhedraVertexAttribute,
-    meshPolyhedraVisibility,
-    meshPolyhedraPolyhedronAttribute,
+    meshPolyhedraVertexAttributeName,
+    meshPolyhedraVertexAttributeRange,
+    meshPolyhedraVertexAttributeColorMap,
+    meshPolyhedraPolyhedronAttributeName,
+    meshPolyhedraPolyhedronAttributeRange,
+    meshPolyhedraPolyhedronAttributeColorMap,
+    setMeshPolyhedraVisibility,
     setMeshPolyhedraActiveColoring,
     setMeshPolyhedraColor,
-    setMeshPolyhedraPolyhedronAttribute,
-    setMeshPolyhedraVertexAttribute,
-    setMeshPolyhedraVisibility,
+    setMeshPolyhedraVertexAttributeName,
+    setMeshPolyhedraVertexAttributeRange,
+    setMeshPolyhedraVertexAttributeColorMap,
+    setMeshPolyhedraPolyhedronAttributeName,
+    setMeshPolyhedraPolyhedronAttributeRange,
+    setMeshPolyhedraPolyhedronAttributeColorMap,
+    applyMeshPolyhedraStyle,
   }
 }
diff --git a/internal/stores/mesh/utils.js b/internal/stores/mesh/utils.js
new file mode 100644
index 00000000..e0786709
--- /dev/null
+++ b/internal/stores/mesh/utils.js
@@ -0,0 +1,5 @@
+export function ensureAttributeEntry(coloring_category, name) {
+  if (!coloring_category.attributes[name]) {
+    coloring_category.attributes[name] = {}
+  }
+}
diff --git a/tests/integration/microservices/back/requirements.txt b/tests/integration/microservices/back/requirements.txt
index f46331da..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.0rc3
diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt
index 68cb23f1..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.1rc1
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,