diff --git a/TODO_AFTER_LAYER_REFACTORING.md b/TODO_AFTER_LAYER_REFACTORING.md
new file mode 100644
index 000000000..520db8970
--- /dev/null
+++ b/TODO_AFTER_LAYER_REFACTORING.md
@@ -0,0 +1,5 @@
+- remove `helpers`
+- remove `voxel-helpers`
+- re-add zoom to object on permalink (see behavior in old sidebar)
+- reorder pick results by order of layers
+- add 3dtiles v1.1 code to refactored layers (+ attempt to use shader instead of alpha color)
\ No newline at end of file
diff --git a/api/src/layers/config.rs b/api/src/layers/config.rs
index 1f48ed6a5..7e1b9fcd3 100644
--- a/api/src/layers/config.rs
+++ b/api/src/layers/config.rs
@@ -30,11 +30,6 @@ pub struct LayerConfig {
     #[serde(default, skip_serializing)]
     pub voxel_mappings: HashMap<String, VoxelMappingDefinition>,
 
-    /// A list of voxel filters that may be reused by multiple layers.
-    /// Each entry's key is used to identify it within this config.
-    #[serde(default, skip_serializing)]
-    pub voxel_filters: HashMap<String, VoxelFilterDefinition>,
-
     /// A list of voxel band displays that may be reused by multiple layers.
     /// Each entry's key is used to identify it within this config.
     #[serde(default, skip_serializing)]
@@ -133,7 +128,6 @@ impl LayerConfig {
             layers: vec![],
             groups: vec![],
             voxel_mappings: std::mem::take(&mut self.voxel_mappings),
-            voxel_filters: std::mem::take(&mut self.voxel_filters),
             tiff_displays: Default::default(),
         };
 
@@ -175,17 +169,15 @@ impl LayerConfig {
         }
 
         for (key, mapping) in &context.config.voxel_mappings {
-            if mapping.use_count == 0 {
+            let use_count = match mapping {
+                VoxelMappingDefinition::Range(it) => it.use_count,
+                VoxelMappingDefinition::Category(it) => it.use_count,
+            };
+            if use_count == 0 {
                 tracing::warn!("[{}] Voxel mapping \"{key}\" is unused.", context.display)
             }
         }
 
-        for (key, filter) in &context.config.voxel_filters {
-            if filter.use_count == 0 {
-                tracing::warn!("[{}] Voxel filter \"{key}\" is unused.", context.display)
-            }
-        }
-
         for (key, group) in context.known_groups {
             if group.use_count == 0 {
                 tracing::warn!("[{}] Group \"{key}\" is unused.", context.display)
diff --git a/api/src/layers/voxel.rs b/api/src/layers/voxel.rs
index d2205f0fc..e1b49fab3 100644
--- a/api/src/layers/voxel.rs
+++ b/api/src/layers/voxel.rs
@@ -1,46 +1,87 @@
 use crate::layers::config::{Parse, ParseContext};
 use anyhow::anyhow;
 use serde::{Deserialize, Deserializer, Serialize};
+use crate::LayerSource;
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(deny_unknown_fields, rename_all(serialize = "camelCase"))]
 pub struct VoxelLayer {
-    pub url: String,
-
-    /// The translation key providing the display name for the unit of the layer's values.
-    // TODO document what happens when this is not set.
-    pub unit_label: Option<String>,
+    pub source: LayerSource,
 
     /// The key of the property that contains the layer's data points.
+    /// Note that there will need to be a mapping for this key for the layer to render.
     pub data_key: String,
 
-    /// The value that represents the absence of data on this layer.
-    pub no_data: i32,
+    pub values: VoxelLayerValues,
+
+    /// The layer's value mappings.
+    /// This determines how the layer can be rendered and otherwise displayed to the user.
+    pub mappings: Vec<VoxelLayerMapping>,
+}
 
-    /// The layer's value mapping.
-    /// This determines how the layer is rendered and otherwise displayed to the user.
-    pub mapping: VoxelMapping,
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(deny_unknown_fields, rename_all(serialize = "camelCase"))]
+pub struct VoxelLayerValues {
+    /// The value that represents an absent datapoint.
+    /// "Absence" here means that it doesn't exist, and does not need to be displayed.
+    pub no_data: i32,
 
-    /// The layer's value filter configuration.
-    /// This determines how the user is able to filter the layer's data points.
-    pub filter: VoxelFilter,
+    /// The value that represents a datapoint without a value.
+    /// The datapoint still exists and should be displayed, it just isn't backed by a meaningful value.
+    ///
+    /// The main use of undefined values are datapoints that are only meaningful for specific mappings.
+    /// If a datapoint is undefined on all mapped keys, it may be treated as `no_data`.
+    pub undefined: i32,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(untagged)]
-pub enum VoxelMapping {
+pub enum VoxelLayerMapping {
     Reference(String),
     Definition(VoxelMappingDefinition),
 }
 
+impl Parse for VoxelLayer {
+    fn parse(mut self, context: &mut ParseContext) -> anyhow::Result<Self> {
+        for mapping in &mut self.mappings {
+            if let VoxelLayerMapping::Reference(name) = mapping {
+                let definition = context
+                    .config
+                    .voxel_mappings
+                    .get_mut(name)
+                    .ok_or_else(|| anyhow!("Unknown voxel mapping: {name}"))?;
+                match definition {
+                    VoxelMappingDefinition::Range(it) => it.use_count += 1,
+                    VoxelMappingDefinition::Category(it) => it.use_count += 1,
+                }
+                *mapping = VoxelLayerMapping::Definition(definition.clone());
+            }
+        }
+        Ok(self)
+    }
+}
+
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+#[serde(untagged)]
+pub enum VoxelMappingDefinition {
+    Range(VoxelRangeMapping),
+    Category(VoxelItemMapping),
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(deny_unknown_fields, rename_all(serialize = "camelCase"))]
-pub struct VoxelMappingDefinition {
-    /// The minimum and maximum values of the layer's data points.
+pub struct VoxelRangeMapping {
+    /// The key of the property that contains the data points.
+    pub key: String,
+
+    /// The minimum and maximum values of the data points.
     pub range: (i32, i32),
 
-    /// The sequence of colors applied to the range of values.
-    /// These will be scaled linearly to fit the value range.
+    /// The colors with which the range is displayed.
+    ///
+    /// If this has the same length as [range], each value gets its own, specific value.
+    /// If there are fewer colors than values, the colors are interpreted as a gradient on which the values can be placed.
     pub colors: Vec<String>,
 
     /// The number of times this definition has been referenced.
@@ -52,94 +93,51 @@ pub struct VoxelMappingDefinition {
     pub use_count: u32,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[serde(untagged)]
-pub enum VoxelFilter {
-    Reference(String),
-    Definition(VoxelFilterDefinition),
-}
-
 #[derive(Debug, Clone, Serialize, Deserialize)]
 #[serde(deny_unknown_fields, rename_all(serialize = "camelCase"))]
-pub struct VoxelFilterDefinition {
-    #[serde(default)]
-    pub lithology: Option<LithologyVoxelFilter>,
+pub struct VoxelItemMapping {
+    /// The key of the property that contains the data points.
+    pub key: String,
 
-    #[serde(default)]
-    pub conductivity: Option<ConductivityVoxelFilter>,
+    /// The mapping's items.
+    /// Each item represents a unique value.
+    pub items: Vec<VoxelItemMappingItem>,
 
     /// The number of times this definition has been referenced.
     /// This is used to ensure that the definition is not unused.
     ///
     /// If this definition is directly attached to a layer,
-    /// this field will never  be used.
+    /// this field will never be used.
     #[serde(skip, default)]
     pub use_count: u32,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[serde(deny_unknown_fields, rename_all(serialize = "camelCase"))]
-pub struct LithologyVoxelFilter {
-    /// The key of the property that contains the lithology data points.
-    pub key: String,
-
-    /// The filter's items.
-    /// Each item represents a value that can be filtered by.
-    pub items: Vec<LithologyVoxelFilterItem>,
-}
-
 #[derive(Debug, Clone, Serialize)]
 #[serde(deny_unknown_fields, rename_all(serialize = "camelCase"))]
-pub struct LithologyVoxelFilterItem {
+pub struct VoxelItemMappingItem {
     /// The translation key providing the display name for the item.
     pub label: String,
 
     /// The value that the data points matching this item have.
     pub value: i32,
-}
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
-#[serde(deny_unknown_fields, rename_all(serialize = "camelCase"))]
-pub struct ConductivityVoxelFilter {
-    /// The key of the property that contains the conductivity data points.
-    pub key: String,
-
-    /// The minimum and maximum values of the conductivity data points.
-    pub range: (i32, i32),
+    /// The color in which this value is displayed.
+    pub color: String,
 }
 
-/// Custom Deserialize implementation for [LithologyVoxelFilterItem] that allows
-/// the configuration to be written as tuple `(u32, String)`.
-impl<'de> Deserialize<'de> for LithologyVoxelFilterItem {
+/// Custom Deserialize implementation for [VoxelItemMappingItem] that allows
+/// the configuration to be written as tuple `(i32, { label: String, color: String })`.
+impl<'de> Deserialize<'de> for VoxelItemMappingItem {
     fn deserialize<D>(d: D) -> Result<Self, D::Error>
     where
         D: Deserializer<'de>,
     {
-        let (value, label) = <(i32, String)>::deserialize(d)?;
-        Ok(Self { label, value })
-    }
-}
-
-impl Parse for VoxelLayer {
-    fn parse(mut self, context: &mut ParseContext) -> anyhow::Result<Self> {
-        if let VoxelMapping::Reference(name) = &self.mapping {
-            let mapping = context
-                .config
-                .voxel_mappings
-                .get_mut(name)
-                .ok_or_else(|| anyhow!("Unknown voxel mapping: {name}"))?;
-            mapping.use_count += 1;
-            self.mapping = VoxelMapping::Definition(mapping.clone());
+        #[derive(Deserialize)]
+        struct Item {
+            pub label: String,
+            pub color: String,
         }
-        if let VoxelFilter::Reference(name) = &self.filter {
-            let filter = context
-                .config
-                .voxel_filters
-                .get_mut(name)
-                .ok_or_else(|| anyhow!("Unknown voxel filter: {name}"))?;
-            filter.use_count += 1;
-            self.filter = VoxelFilter::Definition(filter.clone());
-        }
-        Ok(self)
+        let (value, item) = <(i32, Item)>::deserialize(d)?;
+        Ok(Self { label: item.label, value, color: item.color })
     }
-}
+}
\ No newline at end of file
diff --git a/layers/01-maps_and_models.json5 b/layers/01-maps_and_models.json5
index 8ccbd2074..34cb03796 100644
--- a/layers/01-maps_and_models.json5
+++ b/layers/01-maps_and_models.json5
@@ -101,7 +101,8 @@
             {
               id: 'lyr_unconsolidated_rocks_label',
               children: [
-                'voxel_aaretal_litho'
+                'voxel_aaretal_lithology',
+                'voxel_aaretal_conductivity',
               ]
             },
 
diff --git a/layers/special/voxels.json5 b/layers/special/voxels.json5
index d5d79dcf7..8c8db1994 100644
--- a/layers/special/voxels.json5
+++ b/layers/special/voxels.json5
@@ -2,78 +2,66 @@
   layers: [
     {
       type: "Voxel",
-      id: "voxel_aaretal_litho",
-      url: "https://download.swissgeol.ch/testvoxel/20240415/Voxel-Aaretal-Combined/tileset.json",
+      id: "voxel_aaretal_lithology",
+      source: {
+        type: "CesiumIon",
+        asset_id: 3882543,
+      },
       data_key: "Index",
-      no_data: -99999,
-      mapping: 'aaretal',
-      filter: 'aaretal',
+      mappings: ['conductivity','lithology'],
+      values: {
+        no_data: -99999,
+        undefined: -9999,
+      },
       geocat_id: "b1a36f66-638a-4cfb-88d3-b0df6c7a7502",
     },
+    {
+      type: "Voxel",
+      id: "voxel_aaretal_conductivity",
+      source: {
+        type: "CesiumIon",
+        asset_id: 3882543,
+      },
+      data_key: "logk",
+      mappings: ['conductivity', 'lithology'],
+      values: {
+        no_data: -99999,
+        undefined: -9999,
+      },
+      geocat_id: "b1a36f66-638a-4cfb-88d3-b0df6c7a7502",
+    }
   ],
   voxel_mappings: {
-    aaretal: {
-      range: [-9999, 23],
-      colors: [
-        'rgb(204, 204, 204)',
-        'rgb(92, 255, 105)',
-        'rgb(122, 211, 255)',
-        'rgb(128, 128, 128)',
-        'rgb(0, 255, 234)',
-        'rgb(92, 201, 255)',
-        'rgb(31, 255, 49)',
-        'rgb(179, 204, 102)',
-        'rgb(61, 190, 255)',
-        'rgb(31, 180, 255)',
-        'rgb(0, 170, 255)',
-        'rgb(128, 153, 51)',
-        'rgb(0, 150, 224)',
-        'rgb(0, 224, 19)',
-        'rgb(0, 129, 194)',
-        'rgb(64, 77, 25)',
-        'rgb(0, 163, 14)',
-        'rgb(0, 109, 163)',
-        'rgb(0, 88, 133)',
-        'rgb(255, 255, 0)',
-        'rgb(0, 68, 102)',
-        'rgb(0, 102, 9)',
+    lithology: {
+      key: 'Index',
+      items: [
+        [3, { label: 'Verlandungssedimente, Sumpf, Ried', color: 'rgb(92, 255, 105)' }],
+        [4, { label: 'Subrezente bis rezente Alluvionen (Fluss- und Bachschotter, Überschwemmungssediment, undifferenziert)', color: 'rgb(122, 211, 255)' }],
+        [5, { label: 'Hangschutt / Hanglehm (undifferenziert)', color: 'rgb(128, 128, 128)' }],
+        [6, { label: 'Bachschutt / Bachschuttkegel (undifferenziert)', color: 'rgb(0, 255, 234)' }],
+        [7, { label: 'Spät- bis postglaziale Schotter', color: 'rgb(92, 201, 255)' }],
+        [8, { label: 'Spät- bis postglaziale Stausedimente und Seeablagerungen (undifferenziert)', color: 'rgb(31, 255, 49)' }],
+        [9, { label: 'Spätglaziale Moräne (undifferenziert)', color: 'rgb(179, 204, 102)' }],
+        [10, { label: 'Rückzugsschotter der Letzten Vergletscherung ("Felderschotter" und Äquivalente)', color: 'rgb(61, 190, 255)' }],
+        [11, { label: 'Stauschotter (undifferenziert)', color: 'rgb(31, 180, 255)' }],
+        [12, { label: 'Rinnenschotter', color: 'rgb(0, 170, 255)' }],
+        [13, { label: 'Moräne der Letzten Vergletscherung', color: 'rgb(128, 153, 51)' }],
+        [14, { label: 'Vorstossschotter der Letzten Vergletscherung (vorwiegend Münsingen- u. Karlsruhe-Schotter)', color: 'rgb(0, 150, 224)' }],
+        [15, { label: 'Interglaziale Seetone (Eemzeitliche Seetone)', color: 'rgb(0, 224, 19)' }],
+        [16, { label: 'Rückzugsschotter der Vorletzten Vergletscherung, Kies-Sand-Komplex von Kleinhöchstetten', color: 'rgb(0, 129, 194)' }],
+        [17, { label: 'Moräne der Vorletzten Vergletscherung ("Altmoräne")', color: 'rgb(64, 77, 25)' }],
+        [18, { label: 'Vorletzteiszeitliche glaziolakustrische Ablagerungen und Schlammmoräne', color: 'rgb(0, 163, 14)' }],
+        [19, { label: 'Alte Deltaschotter im Belpmoos', color: 'rgb(0, 109, 163)' }],
+        [20, { label: 'Uttigen-Bümberg-Steghalde-Schotter', color: 'rgb(0, 88, 133)' }],
+        [21, { label: 'Oppligen-Sand', color: 'rgb(255, 255, 0)' }],
+        [22, { label: 'Raintal-Deltaschotter, Hani-Deltaschotter', color: 'rgb(0, 68, 102)' }],
+        [23, { label: 'Alte Seetone', color: 'rgb(0, 102, 9)' }]
       ],
-    }
-  },
-  voxel_filters: {
-    aaretal: {
-      conductivity: {
-        key: 'logk',
-        range: [-9, -1],
-      },
-      lithology: {
-        key: 'Index',
-        items: [
-          // TODO translate the labels.
-          [-9999, 'vox_filter_undefined_lithology'],
-          [3, 'Verlandungssedimente, Sumpf, Ried'],
-          [4, 'Subrezente bis rezente Alluvionen (Fluss- und Bachschotter, Überschwemmungssediment, undifferenziert)'],
-          [5, 'Hangschutt / Hanglehm (undifferenziert)'],
-          [6, 'Bachschutt / Bachschuttkegel (undifferenziert)'],
-          [7, 'Spät- bis postglaziale Schotter'],
-          [8, 'Spät- bis postglaziale Stausedimente und Seeablagerungen (undifferenziert)'],
-          [9, 'Spätglaziale Moräne (undifferenziert)'],
-          [10, 'Rückzugsschotter der Letzten Vergletscherung ("Felderschotter" und Äquivalente)'],
-          [11, 'Stauschotter (undifferenziert)'],
-          [12, 'Rinnenschotter'],
-          [13, 'Moräne der Letzten Vergletscherung'],
-          [14, 'Vorstossschotter der Letzten Vergletscherung (vorwiegend Münsingen- u. Karlsruhe-Schotter)'],
-          [15, 'Interglaziale Seetone (Eemzeitliche Seetone)'],
-          [16, 'Rückzugsschotter der Vorletzten Vergletscherung, Kies-Sand-Komplex von Kleinhöchstetten'],
-          [17, 'Moräne der Vorletzten Vergletscherung ("Altmoräne")'],
-          [18, 'Vorletzteiszeitliche glaziolakustrische Ablagerungen und Schlammmoräne'],
-          [19, 'Alte Deltaschotter im Belpmoos'],
-          [20, 'Uttigen-Bümberg-Steghalde-Schotter'],
-          [21, 'Oppligen-Sand'],
-          [22, 'Raintal-Deltaschotter, Hani-Deltaschotter'],
-          [23, 'Alte Seetone'],
-        ]
-      }
-    }
+    },
+    conductivity: {
+      key: 'logk',
+      range: [-9, -1],
+      colors: ['rgb(0, 102, 255)', 'rgb(255, 204, 0)', 'rgb(204, 0, 0)']
+    },
   }
-}
\ No newline at end of file
+}
diff --git a/ui/locales/app/app.de.json b/ui/locales/app/app.de.json
index 98bae544e..ec4f838a0 100644
--- a/ui/locales/app/app.de.json
+++ b/ui/locales/app/app.de.json
@@ -276,18 +276,8 @@
   "tracking_limitations_of_liability_header": "Haftungsausschluss",
   "tracking_limitations_of_liability_text": "Obwohl das Bundesamt für Landestopografie swisstopo mit aller Sorgfalt auf die Richtigkeit der veröffentlichten Informationen achtet, kann hinsichtlich der inhaltlichen Richtigkeit, Genauigkeit, Aktualität, Zuverlässigkeit und Vollständigkeit dieser Informationen keine Gewährleistung übernommen werden.<br>Swisstopo behält sich ausdrücklich vor, jederzeit Inhalte ohne Ankündigung ganz oder teilweise zu ändern, zu löschen oder zeitweise nicht zu veröffentlichen.<br>Haftungsansprüche gegen swisstopo wegen Schäden materieller oder immaterieller Art, welche aus dem Zugriff oder der Nutzung bzw. Nichtnutzung der veröffentlichten Informationen, durch Missbrauch der Verbindung oder durch technische Störungen entstanden sind, werden ausgeschlossen.<br>",
   "view": "Ansicht",
-  "vox_filter_and": "AND",
-  "vox_filter_apply": "Filter anwenden",
   "vox_filter_filtering_on": "Filtern von: ",
-  "vox_filter_hydraulic_conductivity": "Hydraulische Leitfähigkeit",
-  "vox_filter_lithology": "Modelliereinheit",
-  "vox_filter_klasse": "Durchlässigkeit",
-  "vox_filter_max": "Max",
-  "vox_filter_min": "Min",
-  "vox_filter_or": "OR",
   "vox_filter_select_all": "Alle auswählen",
-  "vox_filter_undefined_conductivity": "Undefinierte Hydraulische Leitfähigkeit",
-  "vox_filter_undefined_lithology": "undefiniert",
   "vox_filter_unselect_all": "Alle abwählen",
   "vox_filter_klasse_1": "sehr gross",
   "vox_filter_klasse_2": "gross",
@@ -295,7 +285,6 @@
   "vox_filter_klasse_4": "mässig",
   "vox_filter_klasse_5": "gering",
   "vox_filter_klasse_6": "sehr gering",
-  "vox_filter_xor": "XOR",
   "welcome_get_shortlink_error": "Es ist ein Fehler aufgetreten, so dass der Link konnte nicht erstellt werden konnte. Bitte proboieren Sie es zu einem späteren Zeitpunkt noch einmal.",
   "lyr_ch_swisstopo_geologie_geologischer_atlas_label": "Geologischer Atlas GA25",
   "lyr_ch_swisstopo_geologie_geotechnik_gk500_lithologie_hauptgruppen_label": "Lithologie 500",
diff --git a/ui/locales/app/app.en.json b/ui/locales/app/app.en.json
index 13dd51885..8e7a0a931 100644
--- a/ui/locales/app/app.en.json
+++ b/ui/locales/app/app.en.json
@@ -276,17 +276,11 @@
   "tracking_limitations_of_liability_text": "Although every care has been taken by the Federal Office of Topography swisstopo to ensure the accuracy of the information published, no guarantee can be given with regard to the accurate, reliable, up-to-date or complete nature of this information.<br>swisstopo reserves the right to alter or remove the content, in full or in part, without prior notice.<br>Liability claims against swisstopo for material or immaterial damage resulting from access to or use or non-use of the published information, from misuse of the connection or from technical faults are excluded.<br>",
   "view": "View",
   "vox_filter_and": "AND",
-  "vox_filter_apply": "Apply filter",
   "vox_filter_filtering_on": "Filtering on: ",
-  "vox_filter_hydraulic_conductivity": "Hydraulic Conductivity",
-  "vox_filter_lithology": "Modelling Unit",
-  "vox_filter_klasse": "Permeability",
   "vox_filter_max": "Max",
   "vox_filter_min": "Min",
   "vox_filter_or": "OR",
   "vox_filter_select_all": "Select all",
-  "vox_filter_undefined_conductivity": "Undefined Conductivity",
-  "vox_filter_undefined_lithology": "undefined",
   "vox_filter_unselect_all": "Unselect all",
   "vox_filter_klasse_1": "very large",
   "vox_filter_klasse_2": "large",
diff --git a/ui/locales/app/app.fr.json b/ui/locales/app/app.fr.json
index ca4658934..7abd0518a 100644
--- a/ui/locales/app/app.fr.json
+++ b/ui/locales/app/app.fr.json
@@ -275,17 +275,11 @@
   "tracking_limitations_of_liability_text": "Malgré la grande attention qu’il porte à la justesse des informations diffusées sur ce site, l’Office fédéral de topographie swisstopo ne peut endosser aucune responsabilité quant à la fidélité, à l’exactitude, à l’actualité, à la fiabilité et à l’intégralité de ces informations.<br>swisstopo se réserve expressément le droit de modifier en partie ou en totalité le contenu de ce site, de le supprimer ou d’en suspendre temporairement la diffusion, et ce à tout moment et sans avertissement préalable.<br>swisstopo ne saurait être tenu pour responsable des dommages matériels ou immatériels qui pourraient être causés par l’accès aux informations diffusées ou par leur utilisation ou non-utilisation, par le mauvais usage de la connexion ou par des problèmes techniques.<br>",
   "view": "Vue",
   "vox_filter_and": "AND",
-  "vox_filter_apply": "Appliquer le filtre",
   "vox_filter_filtering_on": "Filtre sur",
-  "vox_filter_hydraulic_conductivity": "Conductivité hydraulique",
-  "vox_filter_lithology": "Unité de modélisation",
-  "vox_filter_klasse": "Perméabilité",
   "vox_filter_max": "Max",
   "vox_filter_min": "Min",
   "vox_filter_or": "OR",
   "vox_filter_select_all": "Select all",
-  "vox_filter_undefined_conductivity": "Conductivité hydraulique indifinie",
-  "vox_filter_undefined_lithology": "indifinie",
   "vox_filter_unselect_all": "Désélectionner tout",
   "vox_filter_klasse_1": "très grand",
   "vox_filter_klasse_2": "grand",
diff --git a/ui/locales/app/app.it.json b/ui/locales/app/app.it.json
index d1e171c0e..bc2053b09 100644
--- a/ui/locales/app/app.it.json
+++ b/ui/locales/app/app.it.json
@@ -280,17 +280,11 @@
   "tracking_limitations_of_liability_text": "Nonostante si presti grande attenzione all’esattezza delle informazioni pubblicate su questo sito, l’Ufficio federale di topografia swisstopo declina ogni responsabilità per la fedeltà, l’esattezza, l’attualità, l’affidabilità e la completezza di tali informazioni.<br>swisstopo si riserva esplicitamente il diritto in qualsiasi momento di modificare parzialmente o completamente il contenuto del sito, di cancellarlo o di sospenderne temporaneamente la pubblicazione, senza alcun preavviso.<br>swisstopo declina ogni responsabilità per danni materiali o immateriali derivanti dall’accesso alle informazioni diffuse, dall’uso o dal mancato uso del sito, oppure che sono riconducibili a un malfunzionamento del collegamento o a disturbi tecnici del sito.<br>",
   "view": "Vista",
   "vox_filter_and": "AND",
-  "vox_filter_apply": "Applica il filtro",
   "vox_filter_filtering_on": "Filtraggio su: ",
-  "vox_filter_hydraulic_conductivity": "Conducibilità idraulica",
-  "vox_filter_lithology": "Unità di modellazione",
-  "vox_filter_klasse": "Permeabilità",
   "vox_filter_max": "Max",
   "vox_filter_min": "Min",
   "vox_filter_or": "OR",
   "vox_filter_select_all": "Selezionare tutti",
-  "vox_filter_undefined_conductivity": "Conducibilità idraulica indefinita",
-  "vox_filter_undefined_lithology": "indefinita",
   "vox_filter_unselect_all": "Deselezionare tutti",
   "vox_filter_klasse_1": "molto grande",
   "vox_filter_klasse_2": "grande",
diff --git a/ui/locales/catalog/catalog.de.json b/ui/locales/catalog/catalog.de.json
index 5ca3e25c9..38bc04af7 100644
--- a/ui/locales/catalog/catalog.de.json
+++ b/ui/locales/catalog/catalog.de.json
@@ -32,12 +32,28 @@
     }
   },
   "add_content_from_cesium_ion": "Inhalte von Cesium ion hinzufügen",
+  "timesWindow": {
+    "all": "Alle"
+  },
+  "voxelFilterWindow": {
+    "items": {
+      "select_all": "alles aktivieren",
+      "deselect_all": "alles deaktivieren"
+    },
+    "range": {
+      "min": "Min",
+      "max": "Max",
+      "shouldIncludeUndefined": "undefinierte Werte immer anzeigen?"
+    },
+    "operators": {
+      "And": "AND",
+      "Or": "OR",
+      "Xor": "XOR"
+    }
+  },
   "tiffBandsWindow": {
     "title": "{{ layer }} - Bänder",
     "open": "Bänder anzeigen",
     "legend": "Legende"
-  },
-  "timesWindow": {
-    "all": "Alle"
   }
 }
diff --git a/ui/locales/layers/layers.de.json b/ui/locales/layers/layers.de.json
index becc35366..729936e98 100644
--- a/ui/locales/layers/layers.de.json
+++ b/ui/locales/layers/layers.de.json
@@ -54,6 +54,17 @@
     "ch.swisstopo.swissimage": "Luftbild",
     "lakes_rivers_map": "Seen & Flüsse"
   },
-  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/ger/catalog.search#/metadata/{{id}}",
-  "noData": "kein Wert"
+  "attributes": {
+    "Voxel": {
+      "cellCenter": "",
+      "logk": "Hydraulische Leitfähigkeit",
+      "Index": "Modelliereinheit",
+      "Klasse": "Durchlässigkeit"
+    }
+  },
+  "values": {
+    "noData": "kein Wert",
+    "undefined": "undefiniert"
+  },
+  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/ger/catalog.search#/metadata/{{id}}"
 }
diff --git a/ui/locales/layers/layers.en.json b/ui/locales/layers/layers.en.json
index ae6e26f98..283813313 100644
--- a/ui/locales/layers/layers.en.json
+++ b/ui/locales/layers/layers.en.json
@@ -40,6 +40,17 @@
     "ch.swisstopo.swissimage": "Aerial map",
     "lakes_rivers_map": "Lakes & rivers"
   },
-  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/eng/catalog.search#/metadata/{{id}}",
-  "noData": "no value"
+  "attributes": {
+    "Voxel": {
+      "cellCenter": "",
+      "logk": "Hydraulic Conductivity",
+      "Index": "Modelling Unit",
+      "Klasse": "Permeability"
+    }
+  },
+  "values": {
+    "noData": "no value",
+    "undefined": "undefined"
+  },
+  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/eng/catalog.search#/metadata/{{id}}"
 }
diff --git a/ui/locales/layers/layers.fr.json b/ui/locales/layers/layers.fr.json
index 75f3509de..71c8e14d4 100644
--- a/ui/locales/layers/layers.fr.json
+++ b/ui/locales/layers/layers.fr.json
@@ -40,6 +40,17 @@
     "ch.swisstopo.swissimage": "Carte aérienne",
     "lakes_rivers_map": "Lacs et rivières"
   },
-  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/fre/catalog.search#/metadata/{{id}}",
-  "noData": "aucune valeur"
+  "attributes": {
+    "Voxel": {
+      "cellCenter": "",
+      "logk": "Conductivité hydraulique",
+      "Index": "Unité de modélisation",
+      "Klasse": "Perméabilité"
+    }
+  },
+  "values": {
+    "noData": "aucune valeur",
+    "undefined": "indifinie"
+  },
+  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/fre/catalog.search#/metadata/{{id}}"
 }
diff --git a/ui/locales/layers/layers.it.json b/ui/locales/layers/layers.it.json
index d27480267..907cb33f5 100644
--- a/ui/locales/layers/layers.it.json
+++ b/ui/locales/layers/layers.it.json
@@ -40,6 +40,17 @@
     "ch.swisstopo.swissimage": "Foto aerea",
     "lakes_rivers_map": "Laghi e fiumi"
   },
-  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/ita/catalog.search#/metadata/{{id}}",
-  "noData": "nessun valore"
+  "attributes": {
+    "Voxel": {
+      "cellCenter": "",
+      "logk": "Conducibilità idraulica",
+      "Index": "Unità di modellazione",
+      "Klasse": "Permeabilità"
+    }
+  },
+  "values": {
+    "noData": "nessun valore",
+    "undefined": "indefinita"
+  },
+  "geocatUrl": "https://www.geocat.ch/geonetwork/srv/ita/catalog.search#/metadata/{{id}}"
 }
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 64438e0b4..8170cc0d4 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -15,7 +15,7 @@
         "@lit/context": "^1.1.3",
         "@lit/task": "^1.0.1",
         "@swissgeol/ui-core": "1.6.0-dev7",
-        "cesium": "1.134.0",
+        "cesium": "1.135.0",
         "d3-array": "3.2.4",
         "d3-axis": "3.0.0",
         "d3-scale": "4.0.2",
@@ -1164,6 +1164,7 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -3060,9 +3061,9 @@
       }
     },
     "node_modules/@cesium/engine": {
-      "version": "21.0.0",
-      "resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-21.0.0.tgz",
-      "integrity": "sha512-V/gzRnjz7Csq5ft0FggqYRIUQMgnGAlQm7n0kCAFm2r3IPLR30GltJfPd05pByOUd3bn/XMo8S64ZeGEQpC0yg==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@cesium/engine/-/engine-22.0.0.tgz",
+      "integrity": "sha512-7hYwgzu5MYD7TryiZoXz6EvNk6YaBgT1y10L8iHQcKwmv6EPone46C8YGBerYb3uUHR21qmbmDWMSN7xGpBUiw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@cesium/wasm-splats": "^0.1.0-alpha.2",
@@ -3098,12 +3099,12 @@
       "license": "Apache-2.0"
     },
     "node_modules/@cesium/widgets": {
-      "version": "13.2.0",
-      "resolved": "https://registry.npmjs.org/@cesium/widgets/-/widgets-13.2.0.tgz",
-      "integrity": "sha512-LfYNnyZFqnxkyc4MkukALMvLUOKC8dpZWf71dEx/dvqrKmniRtsiAL2XuQhJmaBNaH7KpuX7rSnf/t7s+Id9pw==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@cesium/widgets/-/widgets-14.0.0.tgz",
+      "integrity": "sha512-XjYHO2nBPJ0I6qZTTOZ7RnM0OUWgWxtwgc6QCQnOUifR98VEZfDZjQywIlt3nhIXTTcc8EaYhfYsym73n169zQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@cesium/engine": "^21.0.0",
+        "@cesium/engine": "^22.0.0",
         "nosleep.js": "^0.12.0"
       },
       "engines": {
@@ -3209,6 +3210,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -3232,6 +3234,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -3608,6 +3611,7 @@
       "integrity": "sha512-Kxap9uP5jD8tHUZVjTWgzxemi/0uOsbGjd4LBOSxcJoOCRbESFwemUzilJuzNTB8pcTQUh8D5oudUyxfkJOKmA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@cucumber/messages": ">=17.1.1"
       }
@@ -3618,6 +3622,7 @@
       "integrity": "sha512-f2o/HqKHgsqzFLdq6fAhfG1FNOQPdBdyMGpKwhb7hZqg0yZtx9BVqkTyuoNk83Fcvk3wjMVfouFXXHNEk4nddA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/uuid": "10.0.0",
         "class-transformer": "0.5.1",
@@ -4620,7 +4625,6 @@
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -5922,7 +5926,6 @@
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -6082,6 +6085,7 @@
       "integrity": "sha512-w6HZUV4NWxqd8BdeFf81t07d7/YV9s7TCWrQQbG5uhuvGUAW+fq1usZ1Hmz9UPNLniFnD8GLSsDpjP0hm1S4lQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.26.1",
         "@typescript-eslint/types": "8.26.1",
@@ -6345,7 +6349,6 @@
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -6356,24 +6359,21 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
@@ -6381,7 +6381,6 @@
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -6393,8 +6392,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
@@ -6402,7 +6400,6 @@
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -6416,7 +6413,6 @@
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -6427,7 +6423,6 @@
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -6437,8 +6432,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
@@ -6446,7 +6440,6 @@
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -6464,7 +6457,6 @@
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -6479,7 +6471,6 @@
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -6493,7 +6484,6 @@
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -6509,7 +6499,6 @@
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -6520,21 +6509,19 @@
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/@zip.js/zip.js": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.8.7.tgz",
-      "integrity": "sha512-8daf29EMM3gUpH/vSBSCYo2bY/wbamgRPxPpE2b+cDnbOLBHAcZikWad79R4Guemth/qtipzEHrZMq1lFXxWIA==",
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.8.8.tgz",
+      "integrity": "sha512-v0KutehhSAuaoFAFGLp+V4+UiZ1mIxQ8vNOYMD7k9ZJaBbtQV49MYlg568oRLiuwWDg2Di58Iw3Q0ESNWR+5JA==",
       "license": "BSD-3-Clause",
       "engines": {
         "bun": ">=0.7.0",
@@ -6548,6 +6535,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6608,6 +6596,7 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -7420,6 +7409,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -7559,9 +7549,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001706",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001706.tgz",
-      "integrity": "sha512-3ZczoTApMAZwPKYWmwVbQMFpXBDds3/0VciVoUwPUbldlYyVLmRVuRs/PcUZtHpbLRpzzDvrvnFuREsGt6lUug==",
+      "version": "1.0.30001754",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
+      "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
       "dev": true,
       "funding": [
         {
@@ -7599,9 +7589,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/cesium": {
-      "version": "1.134.0",
-      "resolved": "https://registry.npmjs.org/cesium/-/cesium-1.134.0.tgz",
-      "integrity": "sha512-Ok7cvo+VuXo85tFRobJw3LaL5BfuSANt2MGNHOim/tNUR5apZik0ho1O7TRaOkjbfhOywPfVF12sVN1pQjHIVQ==",
+      "version": "1.135.0",
+      "resolved": "https://registry.npmjs.org/cesium/-/cesium-1.135.0.tgz",
+      "integrity": "sha512-U0OuU9pim7ezTns0OVVw199NdMhJzuZWKRKRwQdRbBQH74Q8pmU0FLpQ/Xv94pzvCqJxxqdtziM2JGHa43xzcg==",
       "license": "Apache-2.0",
       "workspaces": [
         "packages/engine",
@@ -7609,8 +7599,8 @@
         "packages/sandcastle"
       ],
       "dependencies": {
-        "@cesium/engine": "^21.0.0",
-        "@cesium/widgets": "^13.2.0"
+        "@cesium/engine": "^22.0.0",
+        "@cesium/widgets": "^14.0.0"
       },
       "engines": {
         "node": ">=20.19.0"
@@ -7798,7 +7788,6 @@
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -8337,6 +8326,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@cypress/request": "^3.0.8",
         "@cypress/xvfb": "^1.2.4",
@@ -8987,9 +8977,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
-      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.0.tgz",
+      "integrity": "sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==",
       "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
@@ -9140,6 +9130,7 @@
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -9258,8 +9249,7 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
       "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
@@ -9296,6 +9286,7 @@
       "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -9392,6 +9383,7 @@
       "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9453,6 +9445,7 @@
       "integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9730,7 +9723,6 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -10644,8 +10636,7 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true,
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/global-dirs": {
       "version": "3.0.1",
@@ -11803,7 +11794,6 @@
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -12214,7 +12204,6 @@
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -12608,6 +12597,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -12835,8 +12825,7 @@
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/no-case": {
       "version": "3.0.4",
@@ -13470,6 +13459,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -13723,6 +13713,7 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -14589,6 +14580,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.36.0.tgz",
       "integrity": "sha512-zwATAXNQxUcd40zgtQG0ZafcRK4g004WtEl7kbuhTWPvf07PsfohXl39jVUvPF7jvNAIkKPQ2XrsDlWuxBd++Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.6"
       },
@@ -15653,7 +15645,6 @@
       "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
       "devOptional": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -15673,7 +15664,6 @@
       "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -15727,7 +15717,6 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -15740,8 +15729,7 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
       "version": "4.3.0",
@@ -15749,7 +15737,6 @@
       "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -15769,8 +15756,7 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "devOptional": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/text-decoder": {
       "version": "1.2.3",
@@ -16101,6 +16087,7 @@
       "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -16423,6 +16410,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -16605,7 +16593,6 @@
       "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -16699,7 +16686,6 @@
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -16728,7 +16714,6 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -16742,7 +16727,6 @@
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -16757,7 +16741,6 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -16767,8 +16750,7 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "4.3.0",
@@ -16776,7 +16758,6 @@
       "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
diff --git a/ui/package.json b/ui/package.json
index 5e994bdce..1c9d9efd1 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -35,7 +35,7 @@
     "@lit/context": "^1.1.3",
     "@lit/task": "^1.0.1",
     "@swissgeol/ui-core": "1.6.0-dev7",
-    "cesium": "1.134.0",
+    "cesium": "1.135.0",
     "d3-array": "3.2.4",
     "d3-axis": "3.0.0",
     "d3-scale": "4.0.2",
diff --git a/ui/src/cesium/S3Resource.ts b/ui/src/cesium/S3Resource.ts
index e2510aa71..de2cfc5b0 100644
--- a/ui/src/cesium/S3Resource.ts
+++ b/ui/src/cesium/S3Resource.ts
@@ -35,7 +35,6 @@ export default class S3Resource extends Resource {
     }
     return this.getSignedUrl(credentials).then<unknown>((url) => {
       this.url = url;
-      console.log(url);
       return (Resource.prototype as any)._makeRequest.call(this, options);
     });
   }
diff --git a/ui/src/draw/CesiumDraw.ts b/ui/src/draw/CesiumDraw.ts
index 100674e9c..f3f884478 100644
--- a/ui/src/draw/CesiumDraw.ts
+++ b/ui/src/draw/CesiumDraw.ts
@@ -25,6 +25,7 @@ import {
 } from '../cesiumutils';
 import type { GeometryTypes } from '../toolbox/interfaces';
 import { cartesianToLv95 } from '../projection';
+import { PickService } from 'src/services/pick.service';
 
 type PointOptions = {
   color?: Color;
@@ -512,7 +513,7 @@ export class CesiumDraw extends EventTarget {
   onLeftClick(event) {
     this.renderSceneIfTranslucent();
     if (!event?.position) return;
-    const pickedPosition = this.viewer_.scene.pickPosition(event.position);
+    const pickedPosition = PickService.get().pick(event.position);
     if (pickedPosition == null) {
       return;
     }
@@ -657,7 +658,7 @@ export class CesiumDraw extends EventTarget {
   onMouseMove_(event) {
     this.renderSceneIfTranslucent();
     if (!event?.endPosition) return;
-    const pickedPosition = this.viewer_.scene.pickPosition(event.endPosition);
+    const pickedPosition = PickService.get().pick(event.endPosition);
     if (!pickedPosition) return;
     const position = Cartesian3.clone(pickedPosition);
     if (this.entityForEdit && !!this.leftPressedPixel_) {
diff --git a/ui/src/elements/ngm-coordinate-popup.ts b/ui/src/elements/ngm-coordinate-popup.ts
index 8739b2550..92c3b5307 100644
--- a/ui/src/elements/ngm-coordinate-popup.ts
+++ b/ui/src/elements/ngm-coordinate-popup.ts
@@ -10,6 +10,7 @@ import {
 import MainStore from '../store/main';
 import { formatCartographicAs2DLv95, radToDeg } from '../projection';
 import i18next from 'i18next';
+import { PickService } from 'src/services/pick.service';
 
 @customElement('ngm-coordinate-popup')
 export class NgmCoordinatePopup extends LitElementI18n {
@@ -39,7 +40,7 @@ export class NgmCoordinatePopup extends LitElementI18n {
 
       eventHandler.setInputAction(async (event) => {
         this.opened = false;
-        const cartesian = viewer.scene.pickPosition(event.position);
+        const cartesian = PickService.get().pick(event.position);
         if (!cartesian) {
           return;
         }
diff --git a/ui/src/elements/ngm-voxel-filter.ts b/ui/src/elements/ngm-voxel-filter.ts
deleted file mode 100644
index 3e25e1e4a..000000000
--- a/ui/src/elements/ngm-voxel-filter.ts
+++ /dev/null
@@ -1,343 +0,0 @@
-import i18next from 'i18next';
-import { html } from 'lit';
-import { customElement, property, query, queryAll } from 'lit/decorators.js';
-import { LitElementI18n } from '../i18n';
-import draggable from './draggable';
-import { dragArea } from './helperElements';
-import {
-  createLithologyIncludeUniform,
-  getVoxelShader,
-} from '../layers/voxels-helper';
-import { repeat } from 'lit/directives/repeat.js';
-import { TextureUniform, Viewer } from 'cesium';
-import { LayerConfig, LithologyVoxelFilter } from '../layertree';
-import { PropertyValues } from '@lit/reactive-element';
-
-@customElement('ngm-voxel-filter')
-export class NgmVoxelFilter extends LitElementI18n {
-  @property({ type: Object })
-  accessor config: LayerConfig | undefined;
-
-  @property({ type: Object })
-  accessor viewer!: Viewer;
-
-  @query('.min-conductivity')
-  accessor minConductivityInput!: HTMLInputElement;
-
-  @query('.max-conductivity')
-  accessor maxConductivityInput!: HTMLInputElement;
-
-  @query('.vox_filter_include_undefined')
-  accessor includeUndefinedConductivity: HTMLInputElement | null = null;
-
-  @queryAll('.lithology-checkbox input[type="checkbox"]')
-  accessor lithologyCheckbox!: NodeListOf<HTMLInputElement>;
-
-  private minConductivity = NaN;
-  private maxConductivity = NaN;
-
-  private minConductivityValue = NaN;
-  private maxConductivityValue = NaN;
-
-  private isLithologyActiveByIndex: boolean[] = [];
-
-  shouldUpdate(): boolean {
-    return this.config !== undefined;
-  }
-
-  update(changedProperties: PropertyValues<this>): void {
-    this.classList.toggle('is-klasse', this.isKlasse);
-
-    if (changedProperties.has('config') && this.config !== undefined) {
-      this.initializeFromShader();
-    }
-
-    super.update(changedProperties);
-  }
-
-  private initializeFromShader(): void {
-    const shader = getVoxelShader(this.config);
-
-    this.minConductivity = shader.uniforms['u_filter_conductivity_min']
-      .value as number;
-
-    this.maxConductivity = shader.uniforms['u_filter_conductivity_max']
-      .value as number;
-
-    const lithologyUniform = shader.uniforms['u_filter_selected_lithology']
-      .value as TextureUniform;
-    this.isLithologyActiveByIndex = [
-      ...(lithologyUniform as { typedArray: Uint8Array }).typedArray,
-    ].map((value) => value === 1);
-
-    if (this.includeUndefinedConductivity !== null) {
-      this.includeUndefinedConductivity.checked = shader.uniforms[
-        'u_filter_include_undefined_conductivity'
-      ].value as boolean;
-    }
-
-    const operator = shader.uniforms['u_filter_operator'].value as number;
-    const operatorInputs = this.querySelectorAll<HTMLInputElement>(
-      'input[name="operator"]',
-    );
-    for (let i = 0; i < operatorInputs.length; i++) {
-      const input = operatorInputs[i];
-      input.checked = i === operator;
-    }
-  }
-
-  willUpdate() {
-    if (!this.config) return;
-    this.minConductivityValue = this.minConductivity =
-      this.config.voxelFilter!.conductivityRange[0];
-    this.maxConductivityValue = this.maxConductivity =
-      this.config.voxelFilter!.conductivityRange[1];
-
-    this.hidden = false;
-  }
-
-  minConductivityChanged(evt) {
-    this.minConductivity = parseFloat(evt.target.value);
-    this.maxConductivityInput.min = this.minConductivity.toString();
-  }
-
-  maxConductivityChanged(evt) {
-    this.maxConductivity = parseFloat(evt.target.value);
-    this.minConductivityInput.max = this.maxConductivity.toString();
-  }
-
-  close() {
-    this.hidden = true;
-    this.isLithologyActiveByIndex = [];
-    this.resetForm();
-
-    this.config = undefined;
-  }
-
-  applyFilter() {
-    this.updateUniform('u_filter_conductivity_min', this.minConductivity);
-    this.updateUniform('u_filter_conductivity_max', this.maxConductivity);
-
-    const lithologyInclude: number[] = [];
-    this.lithologyCheckbox.forEach((checkbox) =>
-      lithologyInclude.push(checkbox.checked ? 1 : 0),
-    );
-
-    const lithologyUniform = createLithologyIncludeUniform(lithologyInclude);
-
-    this.updateUniform('u_filter_selected_lithology', lithologyUniform);
-
-    const operator = this.querySelector<HTMLInputElement>(
-      'input[name="operator"]:checked',
-    );
-    const value = operator ? parseInt(operator.value, 10) : 0;
-    this.updateUniform('u_filter_operator', value);
-    this.updateUniform(
-      'u_filter_include_undefined_conductivity',
-      this.includeUndefinedConductivity?.checked ?? true,
-    );
-
-    this.viewer.scene.requestRender();
-  }
-
-  private updateUniform(
-    name: string,
-    value: boolean | number | TextureUniform,
-  ): void {
-    const shader = getVoxelShader(this.config);
-    // Update the uniform on the GPU.
-    shader.setUniform(name, value);
-
-    // Update the cached value so we can use it to retrieve the uniform state later on.
-    shader.uniforms[name].value = value;
-  }
-
-  resetForm() {
-    this.querySelectorAll<HTMLFormElement>('.content-container form').forEach(
-      (form) => form.reset(),
-    );
-    if (this.includeUndefinedConductivity) {
-      this.includeUndefinedConductivity.checked = true;
-    }
-  }
-
-  firstUpdated() {
-    draggable(this, {
-      allowFrom: '.drag-handle',
-    });
-  }
-
-  createRenderRoot() {
-    // no shadow dom
-    return this;
-  }
-
-  private get isKlasse(): boolean {
-    return this.config!.voxelDataName === 'Klasse';
-  }
-
-  render() {
-    const { isKlasse } = this;
-    return html`
-      <div class="ngm-floating-window-header drag-handle">
-        ${i18next.t('vox_filter_filtering_on')} ${i18next.t(this.config!.label)}
-        <div class="ngm-close-icon" @click=${() => this.close()}></div>
-      </div>
-      <div class="content-container">
-        ${isKlasse ? '' : this.renderRangeFilters()}
-        ${isKlasse ? '' : this.renderLogicalOperators()}
-        ${this.renderLayerFilters({ isKlasse })}
-        <div>
-          <button
-            class="ui button ngm-action-btn"
-            @click="${() => this.applyFilter()}"
-          >
-            ${i18next.t('vox_filter_apply')}
-          </button>
-        </div>
-      </div>
-      ${dragArea}
-    `;
-  }
-
-  private renderRangeFilters() {
-    return html` <form class="ui form">
-      <div class="filter-label">
-        ${i18next.t('vox_filter_hydraulic_conductivity')}
-      </div>
-      <div class="two fields">
-        <div class="field">
-          <label>${i18next.t('vox_filter_min')}</label>
-          <input
-            required
-            class="min-conductivity"
-            type="number"
-            step="0.01"
-            value="${this.minConductivity}"
-            min="${this.minConductivityValue}"
-            max="${this.maxConductivity}"
-            @input="${(evt) => this.minConductivityChanged(evt)}"
-          />
-        </div>
-        <div class="field">
-          <label>${i18next.t('vox_filter_max')}</label>
-          <input
-            required
-            class="max-conductivity"
-            type="number"
-            step="0.01"
-            value="${this.maxConductivity}"
-            min="${this.minConductivity}"
-            max="${this.maxConductivityValue}"
-            @input="${(evt) => this.maxConductivityChanged(evt)}"
-          />
-        </div>
-      </div>
-      <div>
-        <label>
-          <input
-            class="vox_filter_include_undefined"
-            type="checkbox"
-            value="fixme"
-            checked
-          />
-          ${i18next.t('vox_filter_undefined_conductivity')}
-        </label>
-      </div>
-    </form>`;
-  }
-
-  private renderLogicalOperators() {
-    return html` <form class="ui form">
-      <div class="inline fields">
-        <div class="field">
-          <div class="ui radio checkbox">
-            <input
-              type="radio"
-              id="operator_and"
-              name="operator"
-              value="0"
-              checked
-            />
-            <label for="operator_and">${i18next.t('vox_filter_and')}</label>
-          </div>
-        </div>
-        <div class="field">
-          <div class="ui radio checkbox">
-            <input type="radio" id="operator_or" name="operator" value="1" />
-            <label for="operator_or">${i18next.t('vox_filter_or')}</label>
-          </div>
-        </div>
-        <div class="field">
-          <div class="ui radio checkbox">
-            <input type="radio" id="operator_xor" name="operator" value="2" />
-            <label for="operator_xor">${i18next.t('vox_filter_xor')}</label>
-          </div>
-        </div>
-      </div>
-    </form>`;
-  }
-
-  private renderLayerFilters({ isKlasse }: { isKlasse: boolean }) {
-    const hideCheckboxColor =
-      this.config!.voxelDataName !== 'Index' && !isKlasse;
-    return html`
-      <form class="lithology-checkbox">
-        <div class="lithology-filter-buttons">
-          <button
-            class="ui button"
-            type="button"
-            @click="${() => {
-              this.lithologyCheckbox.forEach(
-                (checkbox) => (checkbox.checked = true),
-              );
-            }}"
-          >
-            ${i18next.t('vox_filter_select_all')}
-          </button>
-          <button
-            class="ui button"
-            type="button"
-            @click="${() => {
-              this.lithologyCheckbox.forEach(
-                (checkbox) => (checkbox.checked = false),
-              );
-            }}"
-          >
-            ${i18next.t('vox_filter_unselect_all')}
-          </button>
-        </div>
-        <div class="filter-label">
-          ${isKlasse
-            ? i18next.t('vox_filter_klasse')
-            : i18next.t('vox_filter_lithology')}
-        </div>
-        ${'lithology' in this.config!.voxelFilter!
-          ? repeat(
-              (this.config!.voxelFilter as LithologyVoxelFilter).lithology,
-              (lithology) => lithology,
-              (lithology, index: number) =>
-                html` <label>
-                  <input
-                    type="checkbox"
-                    value="${lithology.value}"
-                    ?checked="${this.isLithologyActiveByIndex[index]}"
-                    @input="${(e: InputEvent) =>
-                      (this.isLithologyActiveByIndex[index] = (
-                        e.target as HTMLInputElement
-                      ).checked)}"
-                  />
-                  <div
-                    ?hidden=${hideCheckboxColor}
-                    style="background-color: ${this.config!.voxelColors?.colors[
-                      index
-                    ]}; width: 20px;"
-                  ></div>
-                  ${i18next.t(lithology.label)}
-                </label>`,
-            )
-          : ''}
-      </form>
-    `;
-  }
-}
diff --git a/ui/src/elements/ngm-voxel-simple-filter.ts b/ui/src/elements/ngm-voxel-simple-filter.ts
deleted file mode 100644
index 4042377da..000000000
--- a/ui/src/elements/ngm-voxel-simple-filter.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import i18next from 'i18next';
-import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { LitElementI18n } from '../i18n';
-import draggable from './draggable';
-import { dragArea } from './helperElements';
-import { getVoxelShader } from '../layers/voxels-helper';
-import type { Viewer } from 'cesium';
-import { LayerConfig } from '../layertree';
-
-@customElement('ngm-voxel-simple-filter')
-export class NgmVoxelSimpleFilter extends LitElementI18n {
-  @property({ type: Object })
-  accessor config: LayerConfig | undefined;
-  @property({ type: Object })
-  accessor viewer!: Viewer;
-
-  @query('.min-conductivity')
-  accessor minValueInput!: HTMLInputElement;
-  @query('.max-conductivity')
-  accessor maxValueInput!: HTMLInputElement;
-
-  private minValue = NaN;
-  private maxValue = NaN;
-
-  private minInitialValue = NaN;
-  private maxInitialValue = NaN;
-
-  shouldUpdate(): boolean {
-    return this.config !== undefined;
-  }
-
-  willUpdate() {
-    if (this.config) {
-      this.minInitialValue = this.minValue = this.config.voxelColors!.range[0];
-      this.maxInitialValue = this.maxValue = this.config.voxelColors!.range[1];
-    }
-
-    this.hidden = false;
-  }
-
-  minValueChanged(evt) {
-    this.minValue = parseFloat(evt.target.value);
-    this.maxValueInput.min = this.minValue.toString();
-  }
-
-  maxValueChanged(evt) {
-    this.maxValue = parseFloat(evt.target.value);
-    this.minValueInput.max = this.maxValue.toString();
-  }
-
-  close() {
-    this.hidden = true;
-    this.resetShader();
-    this.resetForm();
-
-    this.config = undefined;
-  }
-
-  applyFilter() {
-    const shader = getVoxelShader(this.config);
-    shader.setUniform('u_filter_min', this.minValue);
-    shader.setUniform('u_filter_max', this.maxValue);
-
-    this.viewer.scene.requestRender();
-  }
-
-  resetShader() {
-    const shader = getVoxelShader(this.config);
-    shader.setUniform('u_filter_min', this.minInitialValue);
-    shader.setUniform('u_filter_max', this.maxInitialValue);
-    this.viewer.scene.requestRender();
-  }
-
-  resetForm() {
-    this.querySelectorAll<HTMLFormElement>('.content-container form').forEach(
-      (form) => form.reset(),
-    );
-  }
-
-  firstUpdated() {
-    draggable(this, {
-      allowFrom: '.drag-handle',
-    });
-  }
-
-  createRenderRoot() {
-    // no shadow dom
-    return this;
-  }
-
-  render() {
-    if (!this.config) return;
-    return html`
-      <div class="ngm-floating-window-header drag-handle">
-        ${i18next.t('vox_filter_filtering_on')} ${i18next.t(this.config.label)}
-        <div class="ngm-close-icon" @click=${() => this.close()}></div>
-      </div>
-      <div class="content-container">
-        <form class="ui form">
-          <div class="filter-label">${this.config.voxelColors!.label}</div>
-          <div class="two fields">
-            <div class="field">
-              <label>${i18next.t('vox_filter_min')}</label>
-              <input
-                required
-                class="min-conductivity"
-                type="number"
-                value="${this.minValue}"
-                min="${this.minInitialValue}"
-                max="${this.maxValue}"
-                @input="${(evt) => this.minValueChanged(evt)}"
-              />
-            </div>
-            <div class="field">
-              <label>${i18next.t('vox_filter_max')}</label>
-              <input
-                required
-                class="max-conductivity"
-                type="number"
-                value="${this.maxValue}"
-                min="${this.minValue}"
-                max="${this.maxInitialValue}"
-                @input="${(evt) => this.maxValueChanged(evt)}"
-              />
-            </div>
-          </div>
-        </form>
-        <div>
-          <button class="ui button" @click="${() => this.applyFilter()}">
-            ${i18next.t('vox_filter_apply')}
-          </button>
-        </div>
-      </div>
-      ${dragArea}
-    `;
-  }
-}
diff --git a/ui/src/features/catalog/catalog.module.ts b/ui/src/features/catalog/catalog.module.ts
index b26e28cbf..dc743750b 100644
--- a/ui/src/features/catalog/catalog.module.ts
+++ b/ui/src/features/catalog/catalog.module.ts
@@ -1,7 +1,8 @@
-import './display/catalog-display-legend.element';
 import './display/catalog-display-list.element';
 import './display/catalog-display-list-item.element';
-import './display/catalog-display-times.element';
+import './display/details/catalog-display-legend-detail.element';
+import './display/details/catalog-display-times-detail.element';
+import './display/details/catalog-display-voxel-filter-detail.element';
 
 import './tree/catalog-tree.element';
 import './tree/catalog-tree-group.element';
diff --git a/ui/src/features/catalog/display/catalog-display-list-item.element.ts b/ui/src/features/catalog/display/catalog-display-list-item.element.ts
index 860a08c6a..4a441518c 100644
--- a/ui/src/features/catalog/display/catalog-display-list-item.element.ts
+++ b/ui/src/features/catalog/display/catalog-display-list-item.element.ts
@@ -41,27 +41,19 @@ export class CatalogDisplayList extends CoreElement {
   @state()
   accessor isBackgroundActive = false;
 
-  private readonly windows = {
-    legend: null as CoreWindow | null,
-    times: null as CoreWindow | null,
-    tiffFilter: null as CoreWindow | null,
-  } satisfies Record<string, unknown>;
+  private windows!: WindowMapping;
 
   connectedCallback() {
     super.connectedCallback();
 
+    this.windows = getWindowsOfLayer(this.layerId);
+
     this.register(
       this.layerService.layer$(this.layerId).subscribe((layer) => {
         this.setAttribute('visible', `${layer.isVisible}`);
         this.layer = layer;
       }),
     );
-
-    this.register(() => {
-      for (const window of Object.values(this.windows)) {
-        window?.close();
-      }
-    });
   }
 
   updated() {
@@ -104,18 +96,6 @@ export class CatalogDisplayList extends CoreElement {
     this.layerService.deactivate(this.layer.id as Id<Layer>);
   };
 
-  private readonly openVoxelFilter = (): void => {
-    this.dispatchEvent(
-      new CustomEvent('showVoxelFilter', {
-        composed: true,
-        bubbles: true,
-        detail: {
-          config: this.layer,
-        },
-      }),
-    );
-  };
-
   private openWindow(
     name: keyof typeof this.windows,
     options: Omit<CoreWindowProps, 'onClose'>,
@@ -135,7 +115,7 @@ export class CatalogDisplayList extends CoreElement {
     this.openWindow('legend', {
       title: () => getLayerLabel(this.layer),
       body: () => html`
-        <ngm-catalog-display-legend
+        <ngm-catalog-display-legend-detail
           .layerId=${this.layer.id}
         ></ngm-catalog-display-legend>
       `,
@@ -145,12 +125,22 @@ export class CatalogDisplayList extends CoreElement {
     this.openWindow('times', {
       title: () => getLayerLabel(this.layer),
       body: () => html`
-        <ngm-catalog-display-times
+        <ngm-catalog-display-times-detail
           .layerId=${this.layer.id}
         ></ngm-catalog-display-times>
       `,
     });
 
+  private readonly openVoxelFilter = (): void =>
+    this.openWindow('voxelFilter', {
+      title: () => getLayerLabel(this.layer),
+      body: () => html`
+        <ngm-catalog-display-voxel-filter-detail
+          .layerId=${this.layer.id}
+        ></ngm-catalog-display-voxel-filter-detail>
+      `,
+    });
+
   private readonly openTiffFilter = (): void =>
     this.openWindow('tiffFilter', {
       title: () => getLayerLabel(this.layer),
@@ -494,3 +484,48 @@ export class CatalogDisplayList extends CoreElement {
     }
   `;
 }
+
+type WindowName = 'legend' | 'times' | 'voxelFilter' | 'tiffFilter';
+
+type WindowMapping = Record<WindowName, CoreWindow | null>;
+
+/**
+ * A collection of all currently open windows, mapped to the layer to which they belong.
+ *
+ * This is kept outside the layer's component itself,
+ * which enables us to close the catalog itself, while keeping the windows open.
+ *
+ * Cleanup is done when a layer is deactivated.
+ */
+const windowMappingsByLayerId = new Map<Id<AnyLayer>, WindowMapping>();
+
+const getWindowsOfLayer = (layerId: Id<AnyLayer>): WindowMapping => {
+  const mapping = windowMappingsByLayerId.get(layerId);
+  if (mapping !== undefined) {
+    return mapping;
+  }
+  const newMapping: WindowMapping = {
+    legend: null,
+    tiffFilter: null,
+    times: null,
+    voxelFilter: null,
+  };
+  windowMappingsByLayerId.set(layerId, newMapping);
+  return newMapping;
+};
+
+LayerService.inject().then((layerService) => {
+  // Close the windows of any deactivated layer.
+  layerService.layerDeactivated$.subscribe((layerId) => {
+    const mapping = windowMappingsByLayerId.get(layerId);
+    if (mapping === undefined) {
+      return;
+    }
+    for (const window of Object.values(mapping)) {
+      if (window !== null) {
+        window.close();
+      }
+    }
+    windowMappingsByLayerId.delete(layerId);
+  });
+});
diff --git a/ui/src/features/catalog/display/catalog-display-legend.element.ts b/ui/src/features/catalog/display/details/catalog-display-legend-detail.element.ts
similarity index 98%
rename from ui/src/features/catalog/display/catalog-display-legend.element.ts
rename to ui/src/features/catalog/display/details/catalog-display-legend-detail.element.ts
index 40eb0f2b2..668db1ee9 100644
--- a/ui/src/features/catalog/display/catalog-display-legend.element.ts
+++ b/ui/src/features/catalog/display/details/catalog-display-legend-detail.element.ts
@@ -12,7 +12,7 @@ import { Id } from 'src/models/id.model';
 import { LayerService } from 'src/features/layer/new/layer.service';
 import { consume } from '@lit/context';
 
-@customElement('ngm-catalog-display-legend')
+@customElement('ngm-catalog-display-legend-detail')
 export class CatalogDisplayLegend extends CoreElement {
   @property()
   accessor layerId!: Id<Layer>;
diff --git a/ui/src/features/catalog/display/catalog-display-times.element.ts b/ui/src/features/catalog/display/details/catalog-display-times-detail.element.ts
similarity index 97%
rename from ui/src/features/catalog/display/catalog-display-times.element.ts
rename to ui/src/features/catalog/display/details/catalog-display-times-detail.element.ts
index 2d47b1aa1..26a5adb5c 100644
--- a/ui/src/features/catalog/display/catalog-display-times.element.ts
+++ b/ui/src/features/catalog/display/details/catalog-display-times-detail.element.ts
@@ -9,7 +9,7 @@ import { consume } from '@lit/context';
 import { LayerService } from 'src/features/layer/new/layer.service';
 import { Id } from 'src/models/id.model';
 
-@customElement('ngm-catalog-display-times')
+@customElement('ngm-catalog-display-times-detail')
 export class CatalogDisplayTimes extends CoreElement {
   @property()
   accessor layerId!: Id<WmtsLayer>;
diff --git a/ui/src/features/catalog/display/details/catalog-display-voxel-filter-detail.element.ts b/ui/src/features/catalog/display/details/catalog-display-voxel-filter-detail.element.ts
new file mode 100644
index 000000000..4a6cb8dc8
--- /dev/null
+++ b/ui/src/features/catalog/display/details/catalog-display-voxel-filter-detail.element.ts
@@ -0,0 +1,374 @@
+import { css, html, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { CoreElement } from 'src/features/core';
+import {
+  FilterOperator,
+  getLayerAttributeName,
+  VoxelItemMapping,
+  VoxelLayer,
+  VoxelLayerMapping,
+  VoxelLayerMappingType,
+  VoxelRangeMapping,
+} from 'src/features/layer';
+import { repeat } from 'lit/directives/repeat.js';
+import { consume } from '@lit/context';
+import { LayerService } from 'src/features/layer/new/layer.service';
+import { Id } from 'src/models/id.model';
+import i18next from 'i18next';
+import { applyTypography } from 'src/styles/theme';
+import { when } from 'lit/directives/when.js';
+import { run } from 'src/utils/fn.utils';
+
+import fomanticInputCss from 'fomantic-ui-css/components/input.css?raw';
+import fomanticFormCss from 'fomantic-ui-css/components/form.css?raw';
+import { live } from 'lit/directives/live.js';
+
+@customElement('ngm-catalog-display-voxel-filter-detail')
+export class CatalogDisplayTimes extends CoreElement {
+  @property()
+  accessor layerId!: Id<VoxelLayer>;
+
+  @consume({ context: LayerService.context() })
+  accessor layerService!: LayerService;
+
+  @state()
+  accessor layer!: VoxelLayer;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.register(
+      this.layerService.layer$(this.layerId).subscribe((layer) => {
+        this.layer = layer;
+      }),
+    );
+  }
+
+  private readonly updateOperator = (newOperator: FilterOperator): void => {
+    this.layerService.update(this.layerId, {
+      filterOperator: newOperator,
+    });
+  };
+
+  private readonly toggleMappingItem = (
+    index: number,
+    itemIndex: number,
+  ): void => {
+    this.layerService.update(this.layerId, (layer) => {
+      const mappings = [...layer.mappings];
+      const mapping = mappings[index] as VoxelItemMapping;
+      const items = [...mapping.items];
+      const item = items[itemIndex];
+      items[itemIndex] = {
+        ...item,
+        isEnabled: !item.isEnabled,
+      };
+      mappings[index] = {
+        ...mapping,
+        items,
+      };
+      return {
+        mappings,
+      };
+    });
+  };
+
+  private readonly setAllMappingItems = (
+    index: number,
+    isEnabled: boolean,
+  ): void => {
+    this.layerService.update(this.layerId, (layer) => {
+      const mappings = [...layer.mappings];
+      const mapping = mappings[index] as VoxelItemMapping;
+      const items = mapping.items.map((item) => ({ ...item, isEnabled }));
+      mappings[index] = {
+        ...mapping,
+        items,
+      };
+      return {
+        mappings,
+      };
+    });
+  };
+
+  private readonly updateRangeMapping = (
+    index: number,
+    range: [number | null, number | null],
+  ): void => {
+    this.layerService.update(this.layerId, (layer) => {
+      const mappings = [...layer.mappings];
+      const mapping = mappings[index] as VoxelRangeMapping;
+      mappings[index] = {
+        ...mapping,
+        enabledRange: [
+          range[0] ?? mapping.range[0],
+          range[1] ?? mapping.range[1],
+        ],
+      };
+      return {
+        mappings,
+      };
+    });
+  };
+
+  private readonly toggleUndefinedAlwaysEnabled = (index: number): void => {
+    this.layerService.update(this.layerId, (layer) => {
+      const mappings = [...layer.mappings];
+      const mapping = mappings[index] as VoxelRangeMapping;
+      mappings[index] = {
+        ...mapping,
+        isUndefinedAlwaysEnabled: mapping.isUndefinedAlwaysEnabled,
+      };
+      return {
+        mappings,
+      };
+    });
+  };
+
+  readonly render = () => html`
+    <ul>
+      ${repeat(
+        this.layer.mappings,
+        (mapping) => mapping.key,
+        this.renderMapping,
+      )}
+    </ul>
+  `;
+
+  private readonly renderMapping = (
+    mapping: VoxelLayerMapping,
+    index: number,
+  ) => {
+    const operator = when(index === 1, () => this.renderOperators());
+    const filter = run(() => {
+      switch (mapping.type) {
+        case VoxelLayerMappingType.Item:
+          return this.renderItemMapping(mapping, index);
+        case VoxelLayerMappingType.Range:
+          return this.renderRangeMapping(mapping, index);
+      }
+    });
+    return html`${operator} ${filter}`;
+  };
+
+  private readonly renderItemMapping = (
+    mapping: VoxelItemMapping,
+    index: number,
+  ) => html`
+    <li class="filter is-items ui form">
+      <h3>${getLayerAttributeName(this.layer, mapping.key)}</h3>
+
+      <div class="controls">
+        <sgc-button
+          color="secondary"
+          size="small"
+          @click="${() => this.setAllMappingItems(index, true)}"
+        >
+          ${i18next.t('catalog:voxelFilterWindow.items.select_all')}
+        </sgc-button>
+        <sgc-button
+          color="secondary"
+          size="small"
+          @click="${() => this.setAllMappingItems(index, false)}"
+        >
+          ${i18next.t('catalog:voxelFilterWindow.items.deselect_all')}
+        </sgc-button>
+      </div>
+
+      <ul class="items">
+        ${repeat(
+          mapping.items,
+          (item) => item.value,
+          (item, i) => {
+            const label = i18next.t(item.label);
+            return html`
+              <label class="is-inline" title="${label}">
+                <sgc-checkbox
+                  .value="${item.isEnabled}"
+                  @checkboxChange=${() => this.toggleMappingItem(index, i)}
+                ></sgc-checkbox>
+                <div class="color" style="--color: ${item.color}"></div>
+                <span class="text">${label}</span>
+              </label>
+            `;
+          },
+        )}
+      </ul>
+    </li>
+  `;
+
+  private readonly renderRangeMapping = (
+    mapping: VoxelRangeMapping,
+    index: number,
+  ) => html`
+    <li class="filter is-range ui form">
+      <h3>${getLayerAttributeName(this.layer, mapping.key)}</h3>
+      <div class="fields">
+        <label class="field">
+          ${i18next.t('catalog:voxelFilterWindow.range.min')}
+          <input
+            required
+            type="number"
+            step="0.01"
+            value="${live(mapping.enabledRange[0])}"
+            min="${mapping.range[0]}"
+            max="${mapping.range[1]}"
+            @input="${(event: InputEvent) =>
+              this.updateRangeMapping(index, [
+                (event.target as HTMLInputElement).valueAsNumber,
+                null,
+              ])}"
+          />
+        </label>
+        <label class="field">
+          ${i18next.t('catalog:voxelFilterWindow.range.max')}
+          <input
+            required
+            type="number"
+            step="0.01"
+            value="${live(mapping.enabledRange[1])}"
+            min="${mapping.range[0]}"
+            max="${mapping.range[1]}"
+            @input="${(event: InputEvent) =>
+              this.updateRangeMapping(index, [
+                null,
+                (event.target as HTMLInputElement).valueAsNumber,
+              ])}"
+          />
+        </label>
+      </div>
+      <div>
+        <label class="is-inline">
+          <sgc-checkbox
+            .value="${mapping.isUndefinedAlwaysEnabled}"
+            @checkboxChange=${() => this.toggleUndefinedAlwaysEnabled(index)}
+          >
+          </sgc-checkbox>
+          ${i18next.t('catalog:voxelFilterWindow.range.shouldIncludeUndefined')}
+        </label>
+      </div>
+    </li>
+  `;
+
+  private readonly renderOperators = () => html`
+    <li class="operators">
+      ${repeat(
+        Object.values(FilterOperator),
+        (operator) => html`
+          <ngm-core-radio
+            name="operator"
+            .isActive="${live(this.layer.filterOperator === operator)}"
+            @click="${() => this.updateOperator(operator)}"
+          >
+            ${i18next.t(`catalog:voxelFilterWindow.operators.${operator}`)}
+          </ngm-core-radio>
+        `,
+      )}
+    </li>
+  `;
+
+  static readonly styles = css`
+    ${unsafeCSS(fomanticInputCss)}
+    ${unsafeCSS(fomanticFormCss)}
+
+    :host,
+    :host * {
+      box-sizing: border-box;
+    }
+
+    :host {
+      width: 520px;
+    }
+
+    :host > ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    :host > ul > li {
+      padding-block: 10px;
+
+      &:not(:first-child) {
+        border-top: 1px solid var(--sgc-color-border--default);
+      }
+
+      &:first-child {
+        padding-top: 0;
+      }
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+
+    h3 {
+      ${applyTypography('modal-title-2')};
+      margin: 0 0 5px 0;
+    }
+
+    label.field {
+      ${applyTypography('body-2-bold')};
+    }
+
+    label:has(sgc-checkbox) {
+      cursor: pointer;
+    }
+
+    label.is-inline {
+      display: flex;
+      gap: 5px;
+
+      .text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .filter.is-items {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .filter.is-items .controls {
+      display: flex;
+      gap: 5px;
+
+      & > sgc-button {
+        width: 100%;
+      }
+    }
+
+    .filter.is-items ul {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .filter.is-items .color {
+      width: 20px;
+      min-width: 20px;
+      height: 20px;
+      border-radius: 10px;
+      background-color: var(--color);
+    }
+
+    sgc-checkbox {
+      min-width: 20px;
+    }
+
+    .operators {
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+    }
+  `;
+}
diff --git a/ui/src/features/controls/controls/control2d.controller.ts b/ui/src/features/controls/controls/control2d.controller.ts
index 698e7fa2c..f2c203320 100644
--- a/ui/src/features/controls/controls/control2d.controller.ts
+++ b/ui/src/features/controls/controls/control2d.controller.ts
@@ -10,6 +10,7 @@ import {
   Viewer,
 } from 'cesium';
 import { DEFAULT_VIEW } from 'src/constants';
+import { PickService } from 'src/services/pick.service';
 
 /**
  * `Control2D` contains the ability to toggle the viewer in and out of the 2D mode.
@@ -59,11 +60,11 @@ export class Control2dController {
       this.viewer.canvas.clientWidth / 2,
       this.viewer.canvas.clientHeight / 2,
     );
-    const position = this.scene.pickPosition(center);
+    const position = PickService.get().pick(center);
 
     // If we can't find the center position, then the camera is looking at the sky.
     // In that case, we simply switch to the default 2d view.
-    if (position === undefined) {
+    if (position === null) {
       this.viewer.camera.flyTo({
         duration: 2,
         ...DEFAULT_VIEW,
diff --git a/ui/src/features/core/core-radio.element.ts b/ui/src/features/core/core-radio.element.ts
index c57d0fdeb..87ea16b72 100644
--- a/ui/src/features/core/core-radio.element.ts
+++ b/ui/src/features/core/core-radio.element.ts
@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import { applyTransition, applyTypography } from 'src/styles/theme';
 
 @customElement('ngm-core-radio')
@@ -7,6 +8,9 @@ export class CoreRadio extends LitElement {
   @property({ type: Boolean })
   accessor isActive: boolean = false;
 
+  @property({ type: String })
+  accessor name: string | null = null;
+
   @property({ type: Boolean, attribute: 'disabled', reflect: true })
   accessor isDisabled: boolean = false;
 
@@ -32,7 +36,11 @@ export class CoreRadio extends LitElement {
 
   readonly render = () => html`
     <label @click="${this.handleClick}">
-      <input type="radio" ?checked="${this.isActive}" />
+      <input
+        type="radio"
+        ?checked="${live(this.isActive)}"
+        name="${this.name}"
+      />
       <div class="icon"></div>
       ${this.hasSlot
         ? html`<span class="label"><slot></slot></span>`
diff --git a/ui/src/features/layer/info/layer-info-item.element.ts b/ui/src/features/layer/info/layer-info-item.element.ts
index 8a6440c95..2dd4225a7 100644
--- a/ui/src/features/layer/info/layer-info-item.element.ts
+++ b/ui/src/features/layer/info/layer-info-item.element.ts
@@ -1,14 +1,21 @@
 import { customElement, property } from 'lit/decorators.js';
 import { CoreElement } from 'src/features/core';
-import { css, html } from 'lit';
-import { LayerInfo } from 'src/features/layer/info/layer-info.model';
+import { css, html, TemplateResult } from 'lit';
+import {
+  LayerInfo,
+  LayerInfoAttribute,
+} from 'src/features/layer/info/layer-info.model';
 import i18next from 'i18next';
 import { repeat } from 'lit/directives/repeat.js';
 import { applyTypography } from 'src/styles/theme';
 import { Viewer } from 'cesium';
 import { viewerContext } from 'src/context';
 import { consume } from '@lit/context';
-import { run } from 'src/utils/fn.utils';
+import { TranslationKey } from 'src/models/translation-key.model';
+
+const numberFormat = new Intl.NumberFormat('de-CH', {
+  maximumFractionDigits: 20,
+});
 
 @customElement('ngm-layer-info-item')
 export class LayerInfoItem extends CoreElement {
@@ -79,6 +86,18 @@ export class LayerInfoItem extends CoreElement {
     this.style.setProperty('--divider-offset', `${offset}px`);
   };
 
+  private formatValue(
+    value: LayerInfoAttribute['value'],
+  ): string | TemplateResult {
+    if (typeof value === 'number') {
+      return numberFormat.format(value);
+    }
+    if (typeof value === 'string' || Array.isArray(value)) {
+      return translate(value);
+    }
+    return value;
+  }
+
   readonly render = () => html`
     <label class="toggle">
       <input type="checkbox" />
@@ -96,16 +115,8 @@ export class LayerInfoItem extends CoreElement {
             this.info.attributes,
             (it) => it.key,
             (it) => {
-              const key = run(() => {
-                if (/^\w+:/.test(it.key)) {
-                  // Translation keys with spaces can't be translated with the `ns:key` syntax.
-                  // Do support them, we split the namespace from the key and pass it in the options object.
-                  const [ns, key] = it.key.split(':', 2);
-                  return i18next.t(key, { ns });
-                }
-                return i18next.t(it.key);
-              });
-              return html`<li title="${key}">${key}</li>`;
+              const translatedKey = translate(it.key);
+              return html`<li title="${translatedKey}">${translatedKey}</li>`;
             },
           )}
         </ul>
@@ -129,9 +140,8 @@ export class LayerInfoItem extends CoreElement {
                   >
                 </li>`;
               }
-              return html`<li title="${i18next.t(`${it.value}`)}">
-                ${i18next.t(`${it.value}`)}
-              </li>`;
+              const value = this.formatValue(it.value);
+              return html`<li title="${value}">${value}</li>`;
             },
           )}
         </ul>
@@ -266,3 +276,16 @@ export class LayerInfoItem extends CoreElement {
     }
   `;
 }
+
+const translate = (key: string | TranslationKey) => {
+  const keys = Array.isArray(key) ? [...key].reverse() : [key];
+  return keys.reduce((prev, key) => {
+    if (/^\w+:/.test(key)) {
+      // Translation keys with spaces can't be translated with the `ns:key` syntax.
+      // Do support them, we split the namespace from the key and pass it in the options object.
+      const [ns, actualKey] = key.split(':', 2);
+      return i18next.t(actualKey, { ns, defaultValue: prev });
+    }
+    return i18next.t(key, { defaultValue: prev });
+  }, keys[0]);
+};
diff --git a/ui/src/features/layer/info/layer-info.model.ts b/ui/src/features/layer/info/layer-info.model.ts
index 5ed1132ef..a83f514d9 100644
--- a/ui/src/features/layer/info/layer-info.model.ts
+++ b/ui/src/features/layer/info/layer-info.model.ts
@@ -2,6 +2,7 @@ import { LayerTreeNode } from 'src/layertree';
 import { Layer, LayerTiffController } from 'src/features/layer';
 import { TemplateResult } from 'lit';
 import { Id } from '@swissgeol/ui-core';
+import { TranslationKey } from 'src/models/translation-key.model';
 
 /**
  * `LayerInfo` represents the current data of a specific object on a layer.
@@ -47,8 +48,8 @@ export interface LayerInfo {
 }
 
 export interface LayerInfoAttribute {
-  key: string;
-  value: string | number | TemplateResult;
+  key: string | TranslationKey;
+  value: string | number | TemplateResult | TranslationKey;
 }
 
 // TODO remove this as soon as everything is ported to the new layers.
diff --git a/ui/src/features/layer/info/layer-info.service.ts b/ui/src/features/layer/info/layer-info.service.ts
index 21a6960fa..441bee4b0 100644
--- a/ui/src/features/layer/info/layer-info.service.ts
+++ b/ui/src/features/layer/info/layer-info.service.ts
@@ -14,7 +14,6 @@ import {
   Observable,
   Subject,
   take,
-  withLatestFrom,
 } from 'rxjs';
 import { BaseService } from 'src/utils/base.service';
 import MainStore from 'src/store/main';
@@ -33,19 +32,22 @@ import {
   LayerInfo,
   LayerInfoSource,
 } from 'src/features/layer/info/layer-info.model';
-import { isSameLayer, LayerService } from 'src/features/layer/layer.service';
+import { isSameLayer } from 'src/features/layer/layer.service';
 import { LayerService as NewLayerService } from 'src/features/layer/new/layer.service';
-import { LayerTreeNode, LayerType as OldLayerType } from 'src/layertree';
+import { LayerTreeNode } from 'src/layertree';
 import { LayerInfoPickerForWmts } from 'src/features/layer/info/pickers/layer-info-picker-for-wmts';
 import { LayerInfoPickerForVoxels } from 'src/features/layer/info/pickers/layer-info-picker-for-voxels';
 import { LayerInfoPickerForTiles3d } from 'src/features/layer/info/pickers/layer-info-picker-for-tiles3d';
 import DrawStore from 'src/store/draw';
 import { Id } from 'src/models/id.model';
-import { run } from 'src/utils/fn.utils';
+import { run, tick } from 'src/utils/fn.utils';
+import { PickService } from 'src/services/pick.service';
 
 export class LayerInfoService extends BaseService {
   private layerService!: NewLayerService;
 
+  private pickService!: PickService;
+
   private readonly infosSubject = new BehaviorSubject<LayerInfo[]>([]);
 
   private readonly pickers: LayerInfoPicker[] = [];
@@ -54,7 +56,7 @@ export class LayerInfoService extends BaseService {
 
   private isPicking = false;
 
-  private nextPick: Cartesian3 | null = null;
+  private nextPick: [Cartesian2, Cartesian3] | null = null;
 
   /**
    * A set of modifications to the current sources.
@@ -72,32 +74,33 @@ export class LayerInfoService extends BaseService {
   constructor() {
     super();
 
-    NewLayerService.inject$().subscribe((layerService) => {
+    PickService.inject().then((pickService) => {
+      this.pickService = pickService;
+    });
+
+    NewLayerService.inject().then((layerService) => {
       this.layerService = layerService;
       layerService.layerActivated$.subscribe(this.handleLayerActivated);
     });
 
-    MainStore.viewer
-      .pipe(withLatestFrom(LayerService.inject$()))
-      .subscribe(([viewer, layerService]) => {
-        if (viewer === null) {
-          return;
-        }
-        this.viewer = viewer;
-        this.initializeImageryLayers();
-        this.initializeQueryableLayers(layerService);
-
-        const eventHandler = new ScreenSpaceEventHandler(viewer.canvas);
-        eventHandler.setInputAction(
-          async (event: ScreenSpaceEventHandler.PositionedEvent) => {
-            if (DrawStore.drawStateValue) {
-              return;
-            }
-            this.pick2d(event.position);
-          },
-          ScreenSpaceEventType.LEFT_CLICK,
-        );
-      });
+    MainStore.viewer.subscribe((viewer) => {
+      if (viewer === null) {
+        return;
+      }
+      this.viewer = viewer;
+      this.initializeImageryLayers();
+
+      const eventHandler = new ScreenSpaceEventHandler(viewer.canvas);
+      eventHandler.setInputAction(
+        async (event: ScreenSpaceEventHandler.PositionedEvent) => {
+          if (DrawStore.drawStateValue) {
+            return;
+          }
+          this.pick2d(event.position);
+        },
+        ScreenSpaceEventType.LEFT_CLICK,
+      );
+    });
 
     this.modificationSubject.pipe(delay(200)).subscribe(() => {
       let modifications = this.queuedModifications;
@@ -117,24 +120,24 @@ export class LayerInfoService extends BaseService {
   }
 
   pick2d(position: Cartesian2): void {
-    const cartesian = this.viewer.scene.pickPosition(position);
-    if (cartesian) {
-      this.pick3d(cartesian);
+    const cartesian = this.pickService.pick(position);
+    if (cartesian !== null) {
+      this.pick3d(position, cartesian);
     }
   }
 
-  pick3d(cartesian: Cartesian3): void {
+  pick3d(windowPosition: Cartesian2, globePosition: Cartesian3): void {
     if (this.isPicking) {
-      this.nextPick = cartesian;
+      this.nextPick = [windowPosition, globePosition];
       return;
     }
     this.isPicking = true;
-    this.handlePick(cartesian).finally(() => {
+    this.handlePick(windowPosition, globePosition).finally(() => {
       this.isPicking = false;
       if (this.nextPick !== null) {
         const pick = this.nextPick;
         this.nextPick = null;
-        this.pick3d(pick);
+        this.pick3d(...pick);
       }
     });
   }
@@ -155,6 +158,8 @@ export class LayerInfoService extends BaseService {
           return new LayerInfoPickerForWmts(controller, this.viewer);
         case LayerType.Tiles3d:
           return new LayerInfoPickerForTiles3d(controller, this.viewer);
+        case LayerType.Voxel:
+          return new LayerInfoPickerForVoxels(controller, this.viewer);
       }
     });
 
@@ -186,10 +191,16 @@ export class LayerInfoService extends BaseService {
     this.viewer.scene.requestRender();
   }
 
-  private async handlePick(cartesian: Cartesian3): Promise<void> {
+  private async handlePick(
+    windowPosition: Cartesian2,
+    cartesian: Cartesian3,
+  ): Promise<void> {
     const data: LayerPickData = {
-      cartesian,
-      cartographic: Cartographic.fromCartesian(cartesian),
+      windowPosition,
+      globePosition: {
+        cartesian,
+        cartographic: Cartographic.fromCartesian(cartesian),
+      },
       distance: Cartesian3.distance(
         this.viewer.scene.camera.positionWC,
         cartesian,
@@ -197,6 +208,7 @@ export class LayerInfoService extends BaseService {
     };
 
     this.viewer.canvas.style.cursor = 'progress';
+    await tick();
     const infos: LayerInfo[] = [];
     const picks = this.pickers.map(async (picker) => {
       const pickedInfos = await picker.pick(data);
@@ -229,73 +241,6 @@ export class LayerInfoService extends BaseService {
     layers.layerRemoved.addEventListener(this.handleImageryLayerRemoval);
   }
 
-  private initializeQueryableLayers(layerService: LayerService): void {
-    // The queryable layers that are currently being handled.
-    let currentLayers: readonly LayerTreeNode[] = [];
-
-    // Handle updates to the queryable layers.
-    layerService.queryableLayers$.subscribe((newLayers) => {
-      // An array containing all previously handled layers.
-      // This will be cut down to only contain the removed layers.
-      const oldLayers = [...currentLayers];
-
-      // Update the handled layers.
-      currentLayers = newLayers;
-
-      // Iterate the new layers to compare them with the previously handled ones.
-      for (const newLayer of newLayers) {
-        // Check if we are already handling this layer.
-        const oldLayerIndex = oldLayers.findIndex((it) =>
-          isSameLayer(newLayer, it),
-        );
-        if (oldLayerIndex < 0) {
-          // If we are not already handling the layer, we create a new picker for it.
-          this.handleQueryableLayerAddition(newLayer);
-        } else {
-          // If we are already handling the layer, we remove it from the `oldLayers` array.
-          // This way, only the removed layers will remain in that array.
-          oldLayers.splice(oldLayerIndex, 1);
-        }
-      }
-
-      // Remove the pickers of any layers that do not exist anymore.
-      for (const oldLayer of oldLayers) {
-        this.handleQueryableLayerRemoval(oldLayer);
-      }
-    });
-  }
-
-  private readonly handleQueryableLayerAddition = (
-    layer: LayerTreeNode,
-  ): void => {
-    if (layer.pickable === false || layer.type === OldLayerType.geoTIFF) {
-      return;
-    }
-    this.queueModification({
-      source: layer,
-      action: () => {
-        switch (layer.type) {
-          case OldLayerType.voxels3dtiles:
-            this.pickers.unshift(
-              new LayerInfoPickerForVoxels(layer, this.viewer),
-            );
-            break;
-          default:
-            break;
-        }
-      },
-    });
-  };
-
-  private readonly handleQueryableLayerRemoval = (
-    layer: LayerTreeNode,
-  ): void => {
-    this.queueModification({
-      source: layer,
-      action: () => this.removePickerBySource(layer),
-    });
-  };
-
   private readonly handleImageryLayerAddition = (layer: ImageryLayer): void => {
     if (!isLayerTiffImagery(layer)) {
       return;
diff --git a/ui/src/features/layer/info/pickers/layer-info-picker-for-tiff.ts b/ui/src/features/layer/info/pickers/layer-info-picker-for-tiff.ts
index 8d1e8bca1..00a9dab3b 100644
--- a/ui/src/features/layer/info/pickers/layer-info-picker-for-tiff.ts
+++ b/ui/src/features/layer/info/pickers/layer-info-picker-for-tiff.ts
@@ -40,7 +40,7 @@ export class LayerInfoPickerForTiff implements LayerInfoPicker {
     if (!this.controller.layer.visible) {
       return [];
     }
-    const data = await this.controller.pick(pick.cartesian);
+    const data = await this.controller.pick(pick.globePosition.cartographic);
     if (data === null) {
       return [];
     }
diff --git a/ui/src/features/layer/info/pickers/layer-info-picker-for-tiles3d.ts b/ui/src/features/layer/info/pickers/layer-info-picker-for-tiles3d.ts
index e777af15a..99a413501 100644
--- a/ui/src/features/layer/info/pickers/layer-info-picker-for-tiles3d.ts
+++ b/ui/src/features/layer/info/pickers/layer-info-picker-for-tiles3d.ts
@@ -71,7 +71,7 @@ export class LayerInfoPickerForTiles3d implements LayerInfoPicker {
     return [
       new LayerInfoFor3dTile(this.viewer, {
         feature,
-        position: pick.cartesian,
+        position: pick.globePosition.cartesian,
         attributes,
         source: this.controller.layer.id,
         title: `layers:layers.${this.controller.layer.id}`,
@@ -103,15 +103,8 @@ export class LayerInfoPickerForTiles3d implements LayerInfoPicker {
   }
 
   private pickByDrill(pick: LayerPickData): unknown | null {
-    const windowPosition = this.viewer.scene.cartesianToCanvasCoordinates(
-      pick.cartesian,
-    );
-    if (windowPosition === undefined) {
-      return null;
-    }
-
     const objects = this.viewer.scene.drillPick(
-      windowPosition,
+      pick.windowPosition,
       DRILL_PICK_LIMIT,
       DRILL_PICK_LENGTH,
       DRILL_PICK_LENGTH,
@@ -274,6 +267,7 @@ const extractFeatureAttributes = (
   for (const propertyName of propertyNames) {
     const value = feature.getProperty(propertyName);
     if (typeof value === 'number' || !!value) {
+      // TODO move these into `layers:attributes`.
       attributes.push({ key: `assets:${propertyName}`, value });
     }
   }
diff --git a/ui/src/features/layer/info/pickers/layer-info-picker-for-voxels.ts b/ui/src/features/layer/info/pickers/layer-info-picker-for-voxels.ts
index 1f49bce30..de56ba107 100644
--- a/ui/src/features/layer/info/pickers/layer-info-picker-for-voxels.ts
+++ b/ui/src/features/layer/info/pickers/layer-info-picker-for-voxels.ts
@@ -3,49 +3,41 @@ import {
   LayerPickData,
 } from 'src/features/layer/info/pickers/layer-info-picker';
 import { LayerInfo, LayerInfoAttribute } from '../layer-info.model';
-import { LayerConfig, LayerTreeNode, voxelLayerToFilter } from 'src/layertree';
 import {
   BoundingSphere,
-  Math as CesiumMath,
   HeadingPitchRange,
+  Math as CesiumMath,
   Viewer,
   VoxelCell,
 } from 'cesium';
-import { PickableVoxelPrimitive } from 'src/layers/helpers';
-import i18next from 'i18next';
 import { formatCartesian3AsLv95 } from 'src/projection';
 import NavToolsStore from 'src/store/navTools';
+import { VoxelLayerController } from 'src/features/layer/new/controllers/layer-voxel.controller';
+import { Id } from 'src/models/id.model';
+import {
+  getTranslationKeyForLayerAttributeName,
+  VoxelLayer,
+  VoxelLayerMappingType,
+} from 'src/features/layer';
+import { makeTranslationKey } from 'src/models/translation-key.model';
 
 export class LayerInfoPickerForVoxels implements LayerInfoPicker {
   constructor(
-    private readonly layer: LayerTreeNode,
+    private readonly controller: VoxelLayerController,
     private readonly viewer: Viewer,
   ) {}
 
-  get source(): LayerTreeNode {
-    return this.layer;
+  get source(): Id<VoxelLayer> {
+    return this.controller.layer.id;
   }
 
   async pick(pick: LayerPickData): Promise<LayerInfo[]> {
-    const windowPosition = this.viewer.scene.cartesianToCanvasCoordinates(
-      pick.cartesian,
-    );
-    if (windowPosition === undefined) {
-      return [];
-    }
-
-    const primitive = await (this.layer as LayerConfig).promise;
-
-    const cell = this.viewer.scene.pickVoxel(windowPosition);
-    if (
-      cell === undefined ||
-      !isPickable(cell) ||
-      cell.primitive !== primitive
-    ) {
+    const cell = this.viewer.scene.pickVoxel(pick.windowPosition);
+    if (cell === undefined || cell.primitive !== this.controller.primitive) {
       return [];
     }
 
-    const attributes = extractVoxelAttributes(cell);
+    const attributes = this.extractVoxelAttributes(cell);
 
     const { customShader } = cell.primitive;
     customShader.setUniform('u_selectedTile', cell.tileIndex);
@@ -55,17 +47,63 @@ export class LayerInfoPickerForVoxels implements LayerInfoPicker {
       new LayerInfoForVoxels(this.viewer, {
         cell,
         attributes,
-        source: this.source,
-        title: this.layer.label,
+        source: this.controller.layer.id,
+        title: `layers:layers.${this.controller.layer.id}`,
       }),
     ];
   }
 
   destroy(): void {}
+
+  private extractVoxelAttributes(cell: VoxelCell): LayerInfoAttribute[] {
+    const cellCenter = cell.orientedBoundingBox.center;
+    const propertyNames: string[] = cell.getNames();
+    const { layer } = this.controller;
+    const attributes: LayerInfoAttribute[] = propertyNames.map(
+      (propertyName) => {
+        const keyLabels = getTranslationKeyForLayerAttributeName(
+          layer,
+          propertyName,
+        );
+        const value = cell.getProperty(propertyName)[0] as number;
+
+        const mapping = this.controller.layer.mappings.find(
+          (mapping) => mapping.key === propertyName,
+        );
+        if (
+          mapping !== undefined &&
+          mapping.type === VoxelLayerMappingType.Item
+        ) {
+          const valueLabel = mapping.items.find(
+            (it) => it.value === value,
+          )?.label;
+          if (valueLabel !== undefined) {
+            return { key: keyLabels, value: valueLabel };
+          }
+        }
+
+        const valueLabel =
+          value === this.controller.layer.values.undefined
+            ? getTranslationKeyForLayerAttributeName(
+                this.controller.layer,
+                'undefined',
+              )
+            : value;
+        return { key: keyLabels, value: valueLabel };
+      },
+    );
+    return [
+      ...attributes,
+      {
+        key: makeTranslationKey('layers:attributes.cellCenter'),
+        value: formatCartesian3AsLv95(cellCenter).join(', '),
+      },
+    ];
+  }
 }
 
 class LayerInfoForVoxels implements LayerInfo {
-  public readonly source: LayerTreeNode;
+  public readonly source: Id<VoxelLayer>;
   public readonly title: string;
   public readonly attributes: LayerInfoAttribute[];
 
@@ -75,7 +113,7 @@ class LayerInfoForVoxels implements LayerInfo {
     private readonly viewer: Viewer,
     data: Pick<LayerInfo, 'source' | 'title' | 'attributes'> & {
       cell: VoxelCell;
-      source: LayerTreeNode;
+      source: Id<VoxelLayer>;
     },
   ) {
     this.cell = data.cell;
@@ -116,58 +154,3 @@ class LayerInfoForVoxels implements LayerInfo {
     customShader.setUniform('u_selectedSample', -1);
   }
 }
-
-const isPickable = (object: VoxelCell) => {
-  const voxelPrimitive: PickableVoxelPrimitive = object.primitive;
-  return voxelPrimitive && voxelPrimitive.pickable;
-};
-
-export function extractVoxelAttributes(cell: VoxelCell): LayerInfoAttribute[] {
-  const cellCenter = cell.orientedBoundingBox.center;
-  const propertyNames: string[] = cell.getNames();
-  const primitive: PickableVoxelPrimitive = cell.primitive;
-  const layer = primitive.layer;
-  const attributes: LayerInfoAttribute[] = propertyNames.map((name) => {
-    const value = cell.getProperty(name);
-    if (name === 'Temp_C') {
-      return { key: i18next.t('vox_temperature'), value };
-    }
-    if (layer && voxelLayerToFilter[layer]) {
-      const filters = voxelLayerToFilter[layer];
-      if (name === filters.lithologyDataName) {
-        const label = filters.lithology.find(
-          (f) => f.value === value[0],
-        )?.label;
-        const title =
-          name === 'Klasse'
-            ? i18next.t('vox_filter_klasse')
-            : i18next.t('vox_filter_lithology');
-        return {
-          key: title,
-          value: label
-            ? i18next.t(label)
-            : i18next.t('vox_filter_undefined_lithology'),
-        };
-      }
-      if (name === filters.conductivityDataName) {
-        const valueOrUndefined =
-          value[0] <= -9999
-            ? i18next.t('vox_filter_undefined_lithology')
-            : value;
-
-        return {
-          key: i18next.t('vox_filter_hydraulic_conductivity'),
-          value: valueOrUndefined,
-        };
-      }
-    }
-    return { key: name, value };
-  });
-  return [
-    ...attributes,
-    {
-      key: i18next.t('vox_cell_center'),
-      value: formatCartesian3AsLv95(cellCenter).join(', '),
-    },
-  ];
-}
diff --git a/ui/src/features/layer/info/pickers/layer-info-picker-for-wmts.ts b/ui/src/features/layer/info/pickers/layer-info-picker-for-wmts.ts
index 48f229341..54cd411e1 100644
--- a/ui/src/features/layer/info/pickers/layer-info-picker-for-wmts.ts
+++ b/ui/src/features/layer/info/pickers/layer-info-picker-for-wmts.ts
@@ -49,8 +49,8 @@ export class LayerInfoPickerForWmts implements LayerInfoPicker {
       return [];
     }
     const geom2056 = radiansToLv95([
-      pick.cartographic.longitude,
-      pick.cartographic.latitude,
+      pick.globePosition.cartographic.longitude,
+      pick.globePosition.cartographic.latitude,
     ]);
     const tolerance = getTolerance(pick.distance);
     const lang = i18next.language;
diff --git a/ui/src/features/layer/info/pickers/layer-info-picker.ts b/ui/src/features/layer/info/pickers/layer-info-picker.ts
index 18a0406f2..87d9cbac9 100644
--- a/ui/src/features/layer/info/pickers/layer-info-picker.ts
+++ b/ui/src/features/layer/info/pickers/layer-info-picker.ts
@@ -1,4 +1,4 @@
-import { Cartesian3, Cartographic } from 'cesium';
+import { Cartesian2, Cartesian3, Cartographic } from 'cesium';
 
 import {
   LayerInfo,
@@ -21,7 +21,10 @@ export interface LayerInfoPicker {
 }
 
 export interface LayerPickData {
-  cartesian: Cartesian3;
-  cartographic: Cartographic;
+  windowPosition: Cartesian2;
+  globePosition: {
+    cartesian: Cartesian3;
+    cartographic: Cartographic;
+  };
   distance: number;
 }
diff --git a/ui/src/features/layer/layer-url.service.ts b/ui/src/features/layer/layer-url.service.ts
index df6a760a8..3d7503bbb 100644
--- a/ui/src/features/layer/layer-url.service.ts
+++ b/ui/src/features/layer/layer-url.service.ts
@@ -113,7 +113,6 @@ export class LayerUrlService extends BaseService {
   }
 
   private syncParamsToBackground(params: BackgroundParams): void {
-    console.log(params);
     const isVisible = params.map !== 'empty_map';
     const update: LayerUpdate<BackgroundLayer> = {
       activeVariantId: isVisible ? params.map : DEFAULT_BACKGROUND_VARIANT.id,
diff --git a/ui/src/features/layer/models/layer-voxel.model.ts b/ui/src/features/layer/models/layer-voxel.model.ts
index f078da41f..be595ed37 100644
--- a/ui/src/features/layer/models/layer-voxel.model.ts
+++ b/ui/src/features/layer/models/layer-voxel.model.ts
@@ -1,61 +1,74 @@
-import { BaseLayer, LayerType } from 'src/features/layer';
+import { BaseLayer, LayerSource, LayerType } from 'src/features/layer';
 import { TranslationKey } from 'src/models/translation-key.model';
 
 export interface VoxelLayer extends BaseLayer {
   type: LayerType.Voxel;
 
-  url: string;
-
-  unitLabel: TranslationKey | null;
+  source: LayerSource;
 
   dataKey: string;
 
-  noData: number;
+  values: {
+    noData: number;
+    undefined: number;
+  };
 
   /**
    * The layer's value mapping.
-   * This determines how the layer is rendered and otherwise displayed to the user.
+   * This determines how the layer can be rendered and otherwise displayed to the user.
    */
-  mapping: VoxelLayerMapping;
+  mappings: VoxelLayerMapping[];
 
   /**
-   * The layer's value filter configuration.
-   * This determines how the user is able to filter the layer's data points.
+   * How the {@link mappings} are joined together to hide or show specific datapoints.
    */
-  filter: VoxelLayerFilter;
+  filterOperator: FilterOperator;
 }
 
-export interface VoxelLayerMapping {
+/**
+ * List of operator that can join together filters.
+ */
+export enum FilterOperator {
   /**
-   * The minimum and maximum values of the layer's data points.
+   * Require all mappings to match for a datapoint to be shown.
    */
-  range: [number, number];
+  And = 'And',
 
   /**
-   * The sequence of colors applied to the range of values.
-   * These will be scaled linearly to fit the value range.
+   * Require at least one mapping to match for a datapoint to be shown.
    */
-  colors: string[];
+  Or = 'Or',
+
+  /**
+   * Require exactly one mapping to match for a datapoint to be shown.
+   */
+  Xor = 'Xor',
 }
 
-export interface VoxelLayerFilter {
-  lithology: LithologyVoxelLayerFilter | null;
-  conductivity: ConductivityVoxelLayerFilter | null;
+export const VOXEL_UNDEFINED_COLOR = Object.freeze([204, 204, 204]);
+
+export type VoxelLayerMapping = VoxelItemMapping | VoxelRangeMapping;
+
+export enum VoxelLayerMappingType {
+  Item = 'Item',
+  Range = 'Range',
 }
 
-export interface LithologyVoxelLayerFilter {
+export interface VoxelItemMapping {
+  type: VoxelLayerMappingType.Item;
+
   /**
-   * The key of the property that contains the lithology data points.
+   * The key of the property that contains the data points.
    */
   key: string;
 
   /**
-   * The filter's items. Each item represents a value that can be filtered by.
+   * The mapping's items. Each item represents a unique value.
    */
-  items: LithologyVoxelLayerFilterItem[];
+  items: VoxelItemMappingItem[];
 }
 
-export interface LithologyVoxelLayerFilterItem {
+export interface VoxelItemMappingItem {
   /**
    * The translation key providing the display name for the item.
    */
@@ -65,16 +78,45 @@ export interface LithologyVoxelLayerFilterItem {
    * The value that the data points matching this item have.
    */
   value: number;
+
+  /**
+   * The color in which this value is displayed.
+   */
+  color: string;
+
+  /**
+   * Whether the item is currently enabled.
+   * This signifies that the item's datapoints match the mapping.
+   */
+  isEnabled: boolean;
 }
 
-export interface ConductivityVoxelLayerFilter {
+export interface VoxelRangeMapping {
+  type: VoxelLayerMappingType.Range;
+
   /**
-   * The key of the property that contains the conductivity data points.
+   * The key of the property that contains the data points.
    */
   key: string;
 
   /**
-   * The minimum and maximum values of the conductivity data points.
+   * The minimum and maximum values of the data points.
    */
   range: [number, number];
+
+  /**
+   * The colors with which the range is displayed.
+   */
+  colors: string[];
+
+  /**
+   * The range of currently enabled values.
+   * Datapoints outside this range do not match the mapping.
+   */
+  enabledRange: [number, number];
+
+  /**
+   * Whether undefined values always match, independent from {@link enabledRange}.
+   */
+  isUndefinedAlwaysEnabled: boolean;
 }
diff --git a/ui/src/features/layer/models/layer.model.ts b/ui/src/features/layer/models/layer.model.ts
index 2c483ecce..670f004ab 100644
--- a/ui/src/features/layer/models/layer.model.ts
+++ b/ui/src/features/layer/models/layer.model.ts
@@ -1,10 +1,14 @@
 import type { Id } from 'src/models/id.model';
 import type { Model } from 'src/models/model.model';
-import { WmtsLayer, TiffLayer, BackgroundLayer } from 'src/features/layer';
+import { BackgroundLayer, TiffLayer, WmtsLayer } from 'src/features/layer';
 import { Tiles3dLayer } from 'src/features/layer/models/layer-tiles3d.model';
 import { VoxelLayer } from 'src/features/layer/models/layer-voxel.model';
 import { TranslatedString } from 'src/models/translated-string.model';
 import i18next from 'i18next';
+import {
+  makeTranslationKey,
+  TranslationKey,
+} from 'src/models/translation-key.model';
 
 export type Layer = WmtsLayer | Tiles3dLayer | VoxelLayer | TiffLayer;
 export type AnyLayer = Layer | BackgroundLayer;
@@ -83,3 +87,19 @@ export enum LayerType {
 
 export const getLayerLabel = (layer: AnyLayer): string =>
   layer.label ?? i18next.t(`layers:layers.${layer.id}`);
+
+export const getLayerAttributeName = (
+  layer: Pick<AnyLayer, 'id' | 'type'>,
+  attribute: string,
+): string =>
+  i18next.t(getTranslationKeyForLayerAttributeName(layer, attribute));
+
+export const getTranslationKeyForLayerAttributeName = (
+  layer: Pick<AnyLayer, 'id' | 'type'>,
+  attribute: string,
+): TranslationKey =>
+  makeTranslationKey(
+    `layers:attributes.${layer.id}.${attribute}`,
+    `layers:attributes.${layer.type}.${attribute}`,
+    `layers:attributes.${attribute}`,
+  );
diff --git a/ui/src/features/layer/new/controllers/layer-background.controller.ts b/ui/src/features/layer/new/controllers/layer-background.controller.ts
index 43fd15772..d089370fe 100644
--- a/ui/src/features/layer/new/controllers/layer-background.controller.ts
+++ b/ui/src/features/layer/new/controllers/layer-background.controller.ts
@@ -5,7 +5,6 @@ import { WmtsService } from 'src/services/wmts.service';
 import { Id } from 'src/models/id.model';
 import { DEFAULT_VIEW } from 'src/constants';
 import * as Cesium from 'cesium';
-import { Color } from 'cesium';
 
 export class BackgroundLayerController extends BaseLayerController<BackgroundLayer> {
   private children = new Map<Id<WmtsLayer>, WmtsLayerController>();
@@ -20,25 +19,49 @@ export class BackgroundLayerController extends BaseLayerController<BackgroundLay
 
     // Change the globe's translucency when the opacity changes.
     // Note that this impacts *all* imageries - there is no way to separate them from the globe.
+    //
+    // We only enable translucency if we are not fully opaque.
+    // This is necessary as certain layer types (such as voxels)
+    // are not visible when it is active but not actually in use.
     this.watch(this.layer.opacity, (opacity) => {
-      this.viewer.scene.globe.translucency.frontFaceAlphaByDistance =
-        new Cesium.NearFarScalar(
-          1.0,
-          opacity, // near, alpha
-          1.0e7,
-          opacity, // far, alpha
-        );
+      this.setLayerOpacity(opacity);
     });
 
-    // Show or hide the globe based on the background visibility.
-    // This is what allows us to view underground layers.
-    // Note that simply making the map transparent is not enough here,
-    // as that would not allow us to pick through the terrain.
+    // Show or hide the layer based on its visibility.
+    // Note that we keep the globe visible but make it fully transparent.
+    // This has the following advantages over fully hiding the globe:
+    // - The terrain is still visible and able to interact with other layers.
+    // - panning works as expected, as the cursor can "grab" onto the globe.
+    // - The opacity and visibility of imageries stay independent of the background.
     this.watch(this.layer.isVisible, (isVisible) => {
-      this.viewer.scene.globe.show = isVisible;
+      if (isVisible) {
+        this.children.forEach((child) =>
+          child.update({ ...child.layer, isVisible: true, opacity: 1 }),
+        );
+      } else {
+        this.children.forEach((child) =>
+          child.update({ ...child.layer, isVisible: false, opacity: 0 }),
+        );
+      }
     });
   }
 
+  private setLayerOpacity(opacity: number): void {
+    const { translucency } = this.viewer.scene.globe;
+    if (opacity === 1) {
+      translucency.enabled = false;
+      translucency.frontFaceAlphaByDistance = undefined as any;
+    } else {
+      translucency.enabled = true;
+      translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
+        1.0,
+        opacity, // near, alpha
+        1.0e7,
+        opacity, // far, alpha
+      );
+    }
+  }
+
   protected async addToViewer(): Promise<void> {
     const { viewer, layer, children } = this;
 
@@ -86,10 +109,6 @@ export class BackgroundLayerController extends BaseLayerController<BackgroundLay
         viewer.scene.imageryLayers.raiseToTop(imagery);
       }
     }
-
-    // Ensure that the globe can be made transparent.
-    viewer.scene.globe.baseColor = Color.TRANSPARENT;
-    viewer.scene.globe.translucency.enabled = true;
   }
 
   protected removeFromViewer(): void {
diff --git a/ui/src/features/layer/new/controllers/layer-tiles3d.controller.ts b/ui/src/features/layer/new/controllers/layer-tiles3d.controller.ts
index d37fca73d..0fc761b71 100644
--- a/ui/src/features/layer/new/controllers/layer-tiles3d.controller.ts
+++ b/ui/src/features/layer/new/controllers/layer-tiles3d.controller.ts
@@ -4,7 +4,6 @@ import {
 } from 'src/features/layer/new/controllers/layer.controller';
 import { LayerType, Tiles3dLayer } from 'src/features/layer';
 import { Cesium3DTileset, Cesium3DTileStyle } from 'cesium';
-import { PickService } from 'src/services/pick.service';
 
 export class Tiles3dLayerController extends BaseLayerController<Tiles3dLayer> {
   private tileset!: Cesium3DTileset;
@@ -14,7 +13,7 @@ export class Tiles3dLayerController extends BaseLayerController<Tiles3dLayer> {
   }
 
   zoomIntoView(): void {
-    this.viewer.flyTo(this.tileset);
+    this.viewer.flyTo(this.tileset).then();
   }
 
   moveToTop(): void {
@@ -58,7 +57,8 @@ export class Tiles3dLayerController extends BaseLayerController<Tiles3dLayer> {
     });
 
     const { primitives } = this.viewer.scene;
-    const i = this.findIndexInPrimitives();
+    const i =
+      this.tileset === null ? null : this.findIndexInPrimitives(this.tileset);
     if (i === null) {
       // Add a new Cesium layer.
       primitives.add(tileset);
@@ -69,12 +69,6 @@ export class Tiles3dLayerController extends BaseLayerController<Tiles3dLayer> {
     }
     this.tileset = tileset;
     await this.update(this.layer);
-
-    const pickService = PickService.get();
-
-    // Tell the PickService to not operate on the two following frames.
-    // Without this, picking may result in errors.
-    pickService.skipFrames(2);
   }
 
   protected removeFromViewer(): void {
@@ -88,19 +82,4 @@ export class Tiles3dLayerController extends BaseLayerController<Tiles3dLayer> {
     }
     this.tileset = undefined as unknown as Cesium3DTileset;
   }
-
-  private findIndexInPrimitives(): number | null {
-    const { tileset } = this;
-    if (tileset === undefined) {
-      return null;
-    }
-    const { primitives } = this.viewer.scene;
-    for (let i = 0; i < primitives.length; i++) {
-      const current = primitives.get(i);
-      if (current === tileset) {
-        return i;
-      }
-    }
-    return null;
-  }
 }
diff --git a/ui/src/features/layer/new/controllers/layer-voxel.controller.ts b/ui/src/features/layer/new/controllers/layer-voxel.controller.ts
new file mode 100644
index 000000000..53d87d36b
--- /dev/null
+++ b/ui/src/features/layer/new/controllers/layer-voxel.controller.ts
@@ -0,0 +1,497 @@
+import {
+  BaseLayerController,
+  mapLayerSourceToResource,
+} from 'src/features/layer/new/controllers/layer.controller';
+import {
+  FilterOperator,
+  LayerType,
+  VoxelItemMapping,
+  VoxelLayer,
+  VoxelLayerMappingType,
+  VoxelRangeMapping,
+} from 'src/features/layer';
+import {
+  Cartesian4,
+  Cesium3DTilesVoxelProvider,
+  CustomShader,
+  UniformSpecifier,
+  UniformType,
+  VoxelPrimitive,
+} from 'cesium';
+import { OBJECT_HIGHLIGHT_NORMALIZED_RGB } from 'src/constants';
+import { sleep } from 'src/utils/fn.utils';
+
+export class VoxelLayerController extends BaseLayerController<VoxelLayer> {
+  private _primitive!: VoxelPrimitive;
+
+  private knownKeys!: string[];
+
+  get type(): LayerType.Voxel {
+    return LayerType.Voxel;
+  }
+
+  get primitive(): VoxelPrimitive {
+    return this._primitive;
+  }
+
+  zoomIntoView(): void {
+    this.viewer.scene.camera.flyToBoundingSphere(
+      this._primitive.boundingSphere,
+    );
+  }
+
+  moveToTop(): void {
+    this.viewer.scene.primitives.raiseToTop(this._primitive);
+  }
+
+  protected reactToChanges(): void {
+    this.watch(this.layer.source);
+
+    // Apply opacity to the Cesium layer.
+    this.watch(this.layer.opacity, (opacity) => {
+      this._primitive.customShader.setUniform('u_alpha', opacity);
+    });
+
+    // Show or hide the Cesium layer.
+    this.watch(this.layer.isVisible, (isVisible) => {
+      this._primitive.show = isVisible;
+    });
+
+    this.watch(this.layer.filterOperator, (operator) => {
+      this.primitive.customShader.setUniform(
+        'u_filterOperator',
+        Object.values(FilterOperator).indexOf(operator),
+      );
+    });
+
+    for (const mapping of this.layer.mappings) {
+      const i = this.knownKeys?.indexOf(mapping.key) ?? -1;
+      switch (mapping.type) {
+        case VoxelLayerMappingType.Item:
+          this.watch(mapping.items, () => {
+            this.primitive.customShader.setUniform(
+              `u_mapping${i}_enabledItemFlags`,
+              makeItemMappingFlags(mapping),
+            );
+          });
+          break;
+        case VoxelLayerMappingType.Range:
+          this.watch(mapping.enabledRange, (enabledRange) => {
+            this.primitive.customShader.setUniform(
+              `u_mapping${i}_enabledRange_min`,
+              enabledRange[0],
+            );
+            this.primitive.customShader.setUniform(
+              `u_mapping${i}_enabledRange_max`,
+              enabledRange[1],
+            );
+          });
+          this.watch(
+            mapping.isUndefinedAlwaysEnabled,
+            (isUndefinedAlwaysEnabled) => {
+              this.primitive.customShader.setUniform(
+                `u_mapping${i}_isUndefinedAlwaysEnabled`,
+                isUndefinedAlwaysEnabled,
+              );
+            },
+          );
+          break;
+      }
+    }
+  }
+
+  protected async addToViewer(): Promise<void> {
+    // Extract the keys supported by the layer.
+    // These are important to be sorted the same, always,
+    // as we use a key's index to communicate its state to the layer's shader.
+    this.knownKeys = this.layer.mappings.map((it) => it.key);
+    this.knownKeys.sort();
+
+    // Our shader uses its key's index within `knownKeys` as identifier.
+    // This means that there needs to be a 1:1 relation between keys and mappings.
+    if (this.knownKeys.length !== new Set(this.knownKeys).size) {
+      throw new Error(
+        `Layer ${this.layer.id} contains multiple mappings referencing the same key`,
+      );
+    }
+
+    // Create the voxel primitive.
+    const resource = await mapLayerSourceToResource(this.layer.source);
+    const provider = await Cesium3DTilesVoxelProvider.fromUrl(resource);
+    const primitive = new VoxelPrimitive({
+      provider: provider,
+    });
+    primitive.nearestSampling = true;
+    primitive.depthTest = true;
+    primitive.customShader = this.createShader();
+
+    // Hide the layer until its ready.
+    primitive.show = false;
+
+    // Extract the step size from the url.
+    // The step size defines how detailed/coarse the voxels are sampled.
+    // Smaller means finer, providing accuracy at the cost of performance.
+    const searchParams = new URLSearchParams(location.search);
+    if (searchParams.has('stepSize')) {
+      primitive.stepSize = parseFloat(searchParams.get('stepSize') ?? '1');
+    }
+
+    // Workaround to make exaggeration work on the voxel primitive.
+    const maxExaggerationFactor = 10;
+    primitive.maxClippingBounds.z =
+      primitive.maxBounds.z * maxExaggerationFactor;
+
+    const { primitives } = this.viewer.scene;
+    const i =
+      this._primitive === null
+        ? null
+        : this.findIndexInPrimitives(this._primitive);
+    if (i === null) {
+      // Add a new Cesium layer.
+      primitives.add(primitive);
+    } else {
+      // Replace an existing Cesium layer.
+      this.removeFromViewer();
+      primitives.add(primitive, i);
+    }
+    this._primitive = primitive;
+
+    // Wait for the primitive to become ready, then make it visible.
+    while (!primitive.ready) {
+      await sleep(100);
+    }
+    primitive.show = this.layer.isVisible;
+  }
+
+  protected removeFromViewer(): void {
+    const { primitive } = this;
+    if (primitive === undefined) {
+      return;
+    }
+    // TODO There is currently an issue where removing a VoxelPrimitive *always* throws an error in the next render cycle.
+    //      I'm assuming this has something to do with the new, non-experimental voxel types.
+    //      For now, we just hide the layer instead of removing it.
+    //      DVA, 2025-06-11
+    primitive.show = false;
+    this._primitive = undefined as unknown as VoxelPrimitive;
+  }
+
+  /**
+   * Creates a custom shader for the layer.
+   *
+   * Note that this function is written so that the generated shader code will be
+   * the same for all layers containing the exact same `mapping` field.
+   * This makes it so that the source only has to be compiled once for such layers.
+   * @private
+   */
+  private createShader(): CustomShader {
+    const { layer, knownKeys } = this;
+
+    // Find the mapping that should be displayed.
+    const display = layer.mappings.find((it) => it.key === layer.dataKey);
+    if (display === undefined) {
+      throw new Error(
+        `Can't create shader, no mapping found for data key '${layer.dataKey}'`,
+      );
+    }
+
+    // Find the index of the displayed key.
+    const displayKeyIndex = knownKeys.indexOf(display.key);
+
+    // Generate the shader code for each mapping.
+    const mappingFunctions = layer.mappings.map((mapping) => {
+      const i = knownKeys.indexOf(mapping.key);
+      return mapping.type === VoxelLayerMappingType.Item
+        ? this.makeShaderFunctionsForItemMapping(mapping, i)
+        : this.makeShaderFunctionsForRangeMapping(mapping, i);
+    });
+
+    // Generate the if-else statement that generates the color from the currently selected value.
+    const colorGenerationStatements = knownKeys.map(
+      (_key, i) =>
+        `${i === 0 ? 'if' : 'else if'} (u_displayKeyIndex == ${i}) color = getColorForValue${i}(value);`,
+    );
+
+    // Generate the if-else statement that filters based on enabled mappings.
+    const matchCondition = {
+      [FilterOperator.And]: `matchCount == ${layer.mappings.length}`,
+      [FilterOperator.Or]: 'matchCount > 0',
+      [FilterOperator.Xor]: 'matchCount == 1',
+    };
+    const matchCode = Object.values(FilterOperator).map(
+      (key, i) =>
+        `${i === 0 ? 'if' : 'else if'} (u_filterOperator == ${i}) { if (!(${matchCondition[key]})) { return; }}`,
+    );
+
+    const code = `
+      const float NO_DATA_VALUE = ${mapFloatToShader(layer.values.noData)};
+      const float UNDEFINED_VALUE = ${mapFloatToShader(layer.values.undefined)};
+
+      const vec4 TRANSPARENT = vec4(0.0, 0.0, 0.0, 0.0);
+
+      bool isUndefined(float value) {
+        return abs(value - UNDEFINED_VALUE) < 0.0001;
+      }
+
+      bool isNoData(float value) {
+        return abs(value - NO_DATA_VALUE) < 0.0001;
+      }
+
+      ${mappingFunctions.map(([shader]) => shader).join('\n')}
+
+      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
+      {
+        // Filter out tiles that don't contain any values.
+        bool areAllValuesUndefined = ${knownKeys.map((key) => `isUndefined(fsInput.metadata.${key})`).join(' && ')};
+        if (areAllValuesUndefined) {
+           return;
+        }
+
+        float values[${knownKeys.length}] = float[](
+            ${knownKeys.map((key) => `fsInput.metadata.${key}`).join(',')}
+        );
+
+        // Select the currently displayed value.
+        float value = values[u_displayKeyIndex];
+
+        // Filter out nodata values.
+        if (isNoData(value)) {
+          return;
+        }
+
+        // Apply mapping filters.
+        // For this, we count the number of matching mappings,
+        // and then analyze that result via the selected filter operator.
+        int matchCount = ${knownKeys.map((key, i) => `int(isMatching${i}(fsInput.metadata.${key}) ? 1 : 0)`).join(' + ')};
+        ${matchCode.join('\n')}
+
+        // Apply light to the material. This gives it depth.
+        float diffuse = max(0.0, dot(fsInput.attributes.normalEC, czm_lightDirectionEC));
+        float lighting = 0.5 + 0.5 * diffuse;
+
+        // Highlight the tile if its currently selected.
+        if (fsInput.voxel.tileIndex == u_selectedTile && fsInput.voxel.sampleIndex == u_selectedSample) {
+          material.diffuse = vec3(${OBJECT_HIGHLIGHT_NORMALIZED_RGB}) * lighting;
+          material.alpha = u_alpha;
+          return;
+        }
+
+        vec4 color;
+        ${colorGenerationStatements.join('\n')}
+
+        material.diffuse = color.rgb * lighting;
+        material.alpha = color.a * u_alpha;
+      }
+    `;
+    return new CustomShader({
+      fragmentShaderText: code,
+      uniforms: {
+        // The index within `knownKeys` of the key that should be displayed.
+        u_displayKeyIndex: {
+          type: UniformType.INT,
+          value: displayKeyIndex,
+        },
+
+        // The alpha applied to the displayed material.
+        u_alpha: {
+          type: UniformType.FLOAT,
+          value: layer.opacity,
+        },
+
+        // The index of the currently highlighted tile.
+        u_selectedTile: {
+          type: UniformType.INT,
+          value: -1.0,
+        },
+
+        // The index of the currently highlighted sample.
+        u_selectedSample: {
+          type: UniformType.INT,
+          value: -1.0,
+        },
+
+        u_filterOperator: {
+          type: UniformType.INT,
+          value: Object.values(FilterOperator).indexOf(layer.filterOperator),
+        },
+
+        ...mappingFunctions.reduce(
+          (acc, [_shader, uniforms]) => ({ ...acc, ...uniforms }),
+          {} as ShaderUniforms,
+        ),
+      },
+    });
+  }
+
+  private makeShaderFunctionsForItemMapping(
+    mapping: VoxelItemMapping,
+    mappingIndex: number,
+  ): [string, ShaderUniforms] {
+    const prefix = `mapping${mappingIndex}`;
+    const values = mapping.items.map((it) => mapFloatToShader(it.value));
+    const colors = mapping.items.map((it) => mapColorToShader(it.color));
+    const shader = `
+      const int ${prefix}_ITEM_COUNT = ${mapping.items.length};
+      const float ${prefix}_VALUES[${prefix}_ITEM_COUNT] = float[](
+        ${values.join(',')}
+      );
+      const vec3 ${prefix}_COLORS[${prefix}_ITEM_COUNT] = vec3[](
+        ${colors.join(',')}
+      );
+
+      int ${prefix}_findIndex(float value) {
+        for (int i = 0; i < ${prefix}_ITEM_COUNT; i++) {
+          if (abs(value - ${prefix}_VALUES[i]) < 0.0001) {
+            return i;
+          }
+        }
+        return -1;
+      }
+
+      vec4 getColorForValue${mappingIndex}(float value) {
+        int index = ${prefix}_findIndex(value);
+        return index < 0
+          ? TRANSPARENT
+          : vec4(${prefix}_COLORS[index], 1.0);
+      }
+
+      bool isMatching${mappingIndex}(float value) {
+        int index = ${prefix}_findIndex(value);
+        if (index < 0 || index > ${prefix}_ITEM_COUNT) {
+          return false;
+        }
+
+        // 'w' is the index of the value within the int flag array (0 <= w <= 3).
+        int w = index / 32;
+
+        // 'b' is the index of the bit on the int flag defined by 'w' (0 <= b <= 31).
+        int b = index % 32;
+
+        // 'word' is the int flag defined by 'w' which contains the bit defined by 'b'.
+        int word = u_${prefix}_enabledItemFlags[w];
+
+        // Check if the bit defined by 'b' is set.
+        return ((word >> b) & 1) != 0;
+      }
+    `;
+    return [
+      shader,
+      {
+        [`u_${prefix}_enabledItemFlags`]: {
+          type: UniformType.INT_VEC4,
+          value: makeItemMappingFlags(mapping),
+        },
+      },
+    ];
+  }
+
+  private makeShaderFunctionsForRangeMapping(
+    mapping: VoxelRangeMapping,
+    mappingIndex: number,
+  ): [string, ShaderUniforms] {
+    const prefix = `mapping${mappingIndex}`;
+    const colors = mapping.colors.map(mapColorToShader);
+    const shader = `
+      const int ${prefix}_COLOR_COUNT = ${colors.length};
+      const vec3 ${prefix}_COLORS[${prefix}_COLOR_COUNT] = vec3[](
+        ${colors.join(',')}
+      );
+
+      const float ${prefix}_MIN = ${mapFloatToShader(mapping.range[0])};
+      const float ${prefix}_MAX = ${mapFloatToShader(mapping.range[1])};
+
+      vec4 getColorForValue${mappingIndex}(float value) {
+        if (value < ${prefix}_MIN || value > ${prefix}_MAX) {
+          return TRANSPARENT;
+        }
+
+        float denom = max(${prefix}_MAX - ${prefix}_MIN, 1e-6);
+        float t = clamp((value - ${prefix}_MIN) / denom, 0.0, 1.0);
+
+        float x = t * float(${prefix}_COLOR_COUNT - 1);
+        int i = int(floor(x));
+        int j = min(i + 1, ${prefix}_COLOR_COUNT - 1);
+        float f = fract(x);
+
+        vec3 c = mix(${prefix}_COLORS[i], ${prefix}_COLORS[j], f);
+        return vec4(c, 1.0);
+      }
+
+      bool isMatching${mappingIndex}(float value) {
+        return
+          // Match if the value is within the enabled range.
+          (u_${prefix}_enabledRange_min <= value && value <= u_${prefix}_enabledRange_max);
+      }
+    `;
+
+    return [
+      shader,
+      {
+        [`u_${prefix}_enabledRange_min`]: {
+          type: UniformType.FLOAT,
+          value: mapping.enabledRange[0],
+        },
+        [`u_${prefix}_enabledRange_max`]: {
+          type: UniformType.FLOAT,
+          value: mapping.enabledRange[1],
+        },
+        [`u_${prefix}_isUndefinedAlwaysEnabled`]: {
+          type: UniformType.BOOL,
+          value: mapping.isUndefinedAlwaysEnabled,
+        },
+      },
+    ];
+  }
+}
+
+const mapColorToShader = (color: string): string => {
+  const [r, g, b] = color
+    .match(/\d+/g)!
+    .map((it) => mapFloatToShader(Number(it) / 255));
+  return `vec3(${r}, ${g}, ${b})`;
+};
+
+const mapFloatToShader = (value: number): string => {
+  const str = `${value}`;
+  const decimalIndex = str.indexOf('.');
+  if (decimalIndex < 0) {
+    return `${str}.0`;
+  }
+  const decimalCount = str.length - decimalIndex - 1;
+  if (decimalCount > 6) {
+    return value.toFixed(6);
+  }
+  return str;
+};
+
+interface ShaderUniforms {
+  [key: string]: UniformSpecifier;
+}
+
+const makeItemMappingFlags = (mapping: VoxelItemMapping): Cartesian4 => {
+  const itemCount = mapping.items.length;
+  if (itemCount > 128) {
+    // We pass the item mappings to the shader via an `ivec4`, which consists of exactly 4 ints.
+    // Each int contains 32 bits, setting the upper limit of 128 flags supported by this method.
+    // If we ever want to support more, we need to switch to LUD texture lookups.
+    throw new Error('Item mapping supports a maximum of 128 items.');
+  }
+
+  // `words` is an array of four integers, each representing the state of up to 32 items.
+  const words = new Int32Array(4);
+
+  // Set the flag for each item.
+  for (let i = 0; i < itemCount; i++) {
+    if (mapping.items[i].isEnabled) {
+      words[i >> 5] |= 1 << (i & 31);
+    }
+  }
+
+  // Fill the remaining, unused words with 0.
+  for (let i = Math.ceil(itemCount / 32); i < 4; i++) {
+    words[i] = 0;
+  }
+
+  // Ensure that each flag is an integer.
+  return Cartesian4.fromArray(Array.from(words.map((flag) => flag | 0)));
+};
diff --git a/ui/src/features/layer/new/controllers/layer.controller.ts b/ui/src/features/layer/new/controllers/layer.controller.ts
index e16b70d42..9df9874a7 100644
--- a/ui/src/features/layer/new/controllers/layer.controller.ts
+++ b/ui/src/features/layer/new/controllers/layer.controller.ts
@@ -9,8 +9,12 @@ import { WmtsLayerController } from 'src/features/layer/new/controllers/layer-wm
 import { Tiles3dLayerController } from 'src/features/layer/new/controllers/layer-tiles3d.controller';
 import S3Resource from 'src/cesium/S3Resource';
 import MainStore from 'src/store/main';
+import { VoxelLayerController } from 'src/features/layer/new/controllers/layer-voxel.controller';
 
-export type LayerController = WmtsLayerController | Tiles3dLayerController;
+export type LayerController =
+  | WmtsLayerController
+  | Tiles3dLayerController
+  | VoxelLayerController;
 
 /**
  * A {@link LayerController} is responsible for managing how a {@link Layer} is displayed on the {@link Viewer}.
@@ -299,6 +303,17 @@ export abstract class BaseLayerController<T extends BaseLayer> {
     }
     return false;
   }
+
+  protected findIndexInPrimitives(primitive: unknown): number | null {
+    const { primitives } = this.viewer.scene;
+    for (let i = 0; i < primitives.length; i++) {
+      const current = primitives.get(i);
+      if (current === primitive) {
+        return i;
+      }
+    }
+    return null;
+  }
 }
 
 export const mapLayerSourceToResource = async (
@@ -307,7 +322,10 @@ export const mapLayerSourceToResource = async (
   switch (source.type) {
     case LayerSourceType.CesiumIon:
       // TODO check if we need to pass an ion token here
-      return await IonResource.fromAssetId(source.assetId);
+      return await IonResource.fromAssetId(source.assetId, {
+        accessToken:
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0YjNhNmQ4My01OTdlLTRjNmQtYTllYS1lMjM0NmYxZTU5ZmUiLCJpZCI6MTg3NTIsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1NzQ0MTAwNzV9.Cj3sxjA_x--bN6VATcN4KE9jBJNMftlzPuA8hawuZkY',
+      });
     case LayerSourceType.Url:
       return new Resource(source.url);
     case LayerSourceType.S3:
diff --git a/ui/src/features/layer/new/layer-api.service.ts b/ui/src/features/layer/new/layer-api.service.ts
index 6244934cb..69b0a7870 100644
--- a/ui/src/features/layer/new/layer-api.service.ts
+++ b/ui/src/features/layer/new/layer-api.service.ts
@@ -3,21 +3,24 @@ import { BaseService } from 'src/utils/base.service';
 import { SessionService } from 'src/features/session';
 import {
   BaseLayer,
-  ConductivityVoxelLayerFilter,
+  FilterOperator,
+  getTranslationKeyForLayerAttributeName,
   Layer,
   LayerGroup,
   LayerSource,
   LayerSourceType,
   LayerType,
-  LithologyVoxelLayerFilter,
-  LithologyVoxelLayerFilterItem,
   TiffLayer,
   TiffLayerBand,
   TiffLayerConfigDisplay,
   Tiles3dLayer,
+  VOXEL_UNDEFINED_COLOR,
+  VoxelItemMapping,
+  VoxelItemMappingItem,
   VoxelLayer,
-  VoxelLayerFilter,
   VoxelLayerMapping,
+  VoxelLayerMappingType,
+  VoxelRangeMapping,
   WmtsLayer,
 } from 'src/features/layer';
 import { Id } from 'src/models/id.model';
@@ -165,42 +168,55 @@ export class LayerApiService extends BaseService {
 
   private readonly mapConfigToVoxelLayer = (
     config: DynamicObject,
-  ): Specific<VoxelLayer> => ({
-    ...config.takeKeys<VoxelLayer>()('url', 'unitLabel', 'dataKey', 'noData'),
-    unitLabel: config.takeNullable('unitLabel') ?? null,
-    mapping: config
-      .takeObject('mapping')
-      .apply(
-        (mapping): VoxelLayerMapping =>
-          mapping.takeKeys<VoxelLayerMapping>()('range', 'colors'),
+  ): Specific<VoxelLayer> => {
+    const basic = config.takeKeys<VoxelLayer>()('dataKey', 'values');
+    return {
+      ...basic,
+      source: config.takeObject('source').apply(this.mapConfigToSource),
+      mappings: config.takeAll('mappings', (mapping) =>
+        this.mapConfigToVoxelLayerMapping(mapping, {
+          id: config.get('id'),
+          values: basic.values,
+        }),
       ),
-    filter: config.takeObject('filter').apply(
-      (filter): VoxelLayerFilter => ({
-        lithology:
-          filter.takeNullableObject('lithology')?.apply(
-            (lithology): LithologyVoxelLayerFilter => ({
-              key: lithology.take('key'),
-              items: lithology.takeAll('items', (item) =>
-                item.takeKeys<LithologyVoxelLayerFilterItem>()(
-                  'label',
-                  'value',
-                ),
-              ),
-            }),
-          ) ?? null,
-        conductivity:
-          filter
-            .takeNullableObject('conductivity')
-            ?.apply(
-              (conductivity): ConductivityVoxelLayerFilter =>
-                conductivity.takeKeys<ConductivityVoxelLayerFilter>()(
-                  'key',
-                  'range',
-                ),
-            ) ?? null,
-      }),
-    ),
-  });
+      filterOperator: FilterOperator.And,
+    };
+  };
+
+  private readonly mapConfigToVoxelLayerMapping = (
+    config: DynamicObject,
+    layer: Pick<VoxelLayer, 'id' | 'values'>,
+  ): VoxelLayerMapping => {
+    if (config.has('items')) {
+      return {
+        type: VoxelLayerMappingType.Item,
+        key: config.take('key'),
+        items: [
+          {
+            value: layer.values.undefined,
+            label: getTranslationKeyForLayerAttributeName(
+              { type: LayerType.Voxel, id: layer.id },
+              'undefined',
+            ),
+            color: `rgb(${VOXEL_UNDEFINED_COLOR.join(', ')})`,
+            isEnabled: true,
+          },
+          ...config.takeAll('items', (item) => ({
+            ...item.takeKeys<VoxelItemMappingItem>()('label', 'value', 'color'),
+            isEnabled: true,
+          })),
+        ],
+      } satisfies VoxelItemMapping;
+    }
+    const range = config.take<[number, number]>('range');
+    return {
+      type: VoxelLayerMappingType.Range,
+      ...config.takeKeys<VoxelRangeMapping>()('key', 'colors'),
+      range,
+      enabledRange: range,
+      isUndefinedAlwaysEnabled: true,
+    } satisfies VoxelRangeMapping;
+  };
 
   private readonly mapConfigToTiffLayer = (
     config: DynamicObject,
@@ -263,6 +279,15 @@ class DynamicObject {
     this.unusedKeys = new Set(keys);
   }
 
+  has(key: string): boolean {
+    return key in this.object;
+  }
+
+  takeEverything(): object {
+    this.unusedKeys.clear();
+    return this.object;
+  }
+
   take<T>(key: string): T {
     const value = this.get<T>(key);
     this.unusedKeys.delete(key);
diff --git a/ui/src/features/layer/new/layer.service.ts b/ui/src/features/layer/new/layer.service.ts
index e249dee28..c4fa7ec7b 100644
--- a/ui/src/features/layer/new/layer.service.ts
+++ b/ui/src/features/layer/new/layer.service.ts
@@ -42,6 +42,7 @@ import { Viewer } from 'cesium';
 import MainStore from 'src/store/main';
 import { Tiles3dLayerController } from 'src/features/layer/new/controllers/layer-tiles3d.controller';
 import { BackgroundLayerController } from 'src/features/layer/new/controllers/layer-background.controller';
+import { VoxelLayerController } from 'src/features/layer/new/controllers/layer-voxel.controller';
 
 export class LayerService extends BaseService {
   private viewer!: Viewer;
@@ -604,7 +605,8 @@ export class LayerService extends BaseService {
     // Find the layer's entry.
     const entry = this.layers.get(id);
     if (entry === undefined) {
-      throw new Error(`Unknown layer: ${id}`);
+      console.error(`Can't activate unknown layer: ${id}`);
+      return;
     }
 
     // Cast the id and entry to usable types.
@@ -691,9 +693,12 @@ export class LayerService extends BaseService {
    * This may affect the layer's representation on the viewer.
    *
    * @param id The id of the layer.
-   * @param data The updated fields.
+   * @param data The updated fields, or a function creating them.
    */
-  update<T extends AnyLayer>(id: Id<T>, data: LayerUpdate<T>): void {
+  update<T extends AnyLayer>(
+    id: Id<T>,
+    data: LayerUpdate<T> | ((layer: T) => LayerUpdate<T>),
+  ): void {
     // Find the layer's entry.
     const entry = isBackgroundLayerId(id)
       ? { ...this.background, definition: BACKGROUND_LAYER }
@@ -702,10 +707,13 @@ export class LayerService extends BaseService {
       throw new Error(`Unknown layer: ${id}`);
     }
 
+    const patch =
+      typeof data === 'function' ? data(entry.state$.value as T) : data;
+
     // Update the layer.
     const updatedLayer = {
       ...entry.state$.value,
-      ...data,
+      ...patch,
     };
 
     // Ensure that the relationship between visibility and opacity is correct.
@@ -795,6 +803,7 @@ export class LayerService extends BaseService {
       case LayerType.Tiles3d:
         return new Tiles3dLayerController(layer);
       case LayerType.Voxel:
+        return new VoxelLayerController(layer);
       case LayerType.Tiff:
         throw new Error('nyi');
     }
@@ -835,7 +844,7 @@ export type LayerUpdate<T = AnyLayer> = Partial<
 
 /**
  * A child of a group.
- * This contain the id of either a layer or of a subgroup.
+ * This contains the id of either a layer or of a subgroup.
  */
 export type TreeNode =
   | { type: TreeNodeType.Group; id: Id<LayerGroup> }
@@ -885,7 +894,7 @@ interface LayerEntry {
 
   /**
    * The controller of the layer.
-   * This is only set if the layer is active, and removed when the layer is made inactive.
+   * This is only set if the layer is active and removed when the layer is made inactive.
    */
   controller: BaseLayerController<Layer> | null;
 }
@@ -906,7 +915,7 @@ interface GroupEntry {
   parent: Id<LayerGroup> | null;
 
   /**
-   * The amount of active layers inside the group,
+   * The number of active layers inside the group,
    * including deeply nested layers.
    */
   count: number;
diff --git a/ui/src/features/layer/tiff/layer-tiff.controller.ts b/ui/src/features/layer/tiff/layer-tiff.controller.ts
index a7a0128d8..22de02c3c 100644
--- a/ui/src/features/layer/tiff/layer-tiff.controller.ts
+++ b/ui/src/features/layer/tiff/layer-tiff.controller.ts
@@ -1,13 +1,13 @@
 import {
   Cartesian3,
-  Ellipsoid,
+  Cartographic,
   ImageryLayer,
   Math as CesiumMath,
+  Rectangle,
   Resource,
   UrlTemplateImageryProvider,
   Viewer,
   WebMercatorTilingScheme,
-  Rectangle,
 } from 'cesium';
 import { GeoTIFFLayer, GeoTIFFLayerBand, LayerConfig } from 'src/layertree';
 import { SWITZERLAND_RECTANGLE, TITILER_BY_PAGE_HOST } from 'src/constants';
@@ -79,12 +79,11 @@ export class LayerTiffController {
     }
   }
 
-  async pick(cartesian: Cartesian3): Promise<PickData | null> {
+  async pick(coords: Cartographic): Promise<PickData | null> {
     if (!this.layer.visible) {
       return null;
     }
 
-    const coords = Ellipsoid.WGS84.cartesianToCartographic(cartesian);
     const longitude = CesiumMath.toDegrees(coords.longitude);
     const latitude = CesiumMath.toDegrees(coords.latitude);
 
diff --git a/ui/src/measure/MeasureTool.ts b/ui/src/measure/MeasureTool.ts
index debdd3bcb..e65e17a45 100644
--- a/ui/src/measure/MeasureTool.ts
+++ b/ui/src/measure/MeasureTool.ts
@@ -13,6 +13,7 @@ import {
 } from 'cesium';
 import { CesiumDraw, DrawEndDetails } from '../draw/CesiumDraw';
 import { getDimensionLabel } from '../draw/helpers';
+import { PickService } from 'src/services/pick.service';
 
 export type MeasureOptions = {
   pointSize: number;
@@ -87,9 +88,7 @@ export default class MeasureTool {
     this.screenSpaceEventHandler.setInputAction(
       (click: { position: Cartesian2 }) => {
         if (this.draw.active || !this.measureToolActive) return;
-        const position = Cartesian3.clone(
-          this.viewer!.scene.pickPosition(click.position),
-        );
+        const position = PickService.get().pick(click.position);
         if (position) {
           this.clearMeasureGeometry();
           this.draw.active = true;
diff --git a/ui/src/models/translation-key.model.ts b/ui/src/models/translation-key.model.ts
index 11447acc1..3683e9a82 100644
--- a/ui/src/models/translation-key.model.ts
+++ b/ui/src/models/translation-key.model.ts
@@ -1,6 +1,14 @@
-export type TranslationKey = string & {
+export type TranslationKey = (string | string[]) & {
   readonly __translation_key__: unique symbol;
 };
 
-export const makeTranslationKey = (key: string): TranslationKey =>
-  key as TranslationKey;
+export const makeTranslationKey = (...keys: string[]): TranslationKey => {
+  switch (keys.length) {
+    case 0:
+      throw new Error('Translation key must not be empty');
+    case 1:
+      return keys[0] as TranslationKey;
+    default:
+      return keys as TranslationKey;
+  }
+};
diff --git a/ui/src/ngm-app.ts b/ui/src/ngm-app.ts
index 2f5644d12..43fdbbff0 100644
--- a/ui/src/ngm-app.ts
+++ b/ui/src/ngm-app.ts
@@ -6,8 +6,6 @@ import './elements/ngm-nav-tools';
 import './elements/ngm-cam-configuration';
 import './toolbox/ngm-topo-profile-modal';
 import './toolbox/ngm-geometry-info';
-import './elements/ngm-voxel-filter';
-import './elements/ngm-voxel-simple-filter';
 import './cesium-toolbar';
 import './elements/ngm-project-popup';
 import './elements/ngm-coordinate-popup';
@@ -24,7 +22,7 @@ import 'src/features/session/session.module';
 
 import { DEFAULT_VIEW } from './constants';
 
-import { addMantelEllipsoid, setupViewer } from './viewer';
+import { setupViewer } from './viewer';
 
 import {
   getCameraView,
@@ -233,8 +231,6 @@ export class NgmApp extends LitElementI18n {
   startCesiumLoadingProcess(viewer) {
     const globe = viewer.scene.globe;
 
-    addMantelEllipsoid(viewer);
-
     // Temporarily increasing the maximum screen space error to load low LOD tiles.
     const searchParams = new URLSearchParams(document.location.search);
     globe.maximumScreenSpaceError = parseFloat(
diff --git a/ui/src/services/pick.service.ts b/ui/src/services/pick.service.ts
index 517fdf363..141003c73 100644
--- a/ui/src/services/pick.service.ts
+++ b/ui/src/services/pick.service.ts
@@ -1,33 +1,37 @@
-import { Cartesian2, Cartesian3, Viewer } from 'cesium';
+import {
+  Cartesian2,
+  Cartesian3,
+  Ellipsoid,
+  IntersectionTests,
+  Ray,
+  Viewer,
+} from 'cesium';
 import { BaseService } from 'src/utils/base.service';
-import { viewerContext } from 'src/context';
+import MainStore from 'src/store/main';
 
 export class PickService extends BaseService {
   private viewer: Viewer | null = null;
 
-  private skipCount = 0;
-
   constructor() {
     super();
-    BaseService.inject$(viewerContext).subscribe((viewer) => {
+    MainStore.viewer.subscribe((viewer) => {
       this.viewer = viewer;
-
-      this.viewer?.scene.postRender.addEventListener(this.handlePostRender);
     });
   }
 
   pick(position: Cartesian2): Cartesian3 | null {
-    if (this.viewer === null || this.skipCount !== 0) {
+    if (this.viewer === null) {
       return null;
     }
-    return this.viewer.scene.pickPosition(position);
-  }
 
-  skipFrames(count: number): void {
-    this.skipCount = Math.max(this.skipCount, count);
+    // Determine the position of the click on the globe via a ray cast onto the WGS ellipsoid.
+    // This method works even with the globe turned off, unlike `scene.pickPosition`.
+    // It also doesn't trigger any weird errors happening around picking while specific tiles aren't fully loaded yet.
+    const ray = this.viewer.camera.getPickRay(position);
+    if (ray === undefined) {
+      return null;
+    }
+    const interval = IntersectionTests.rayEllipsoid(ray, Ellipsoid.WGS84);
+    return Ray.getPoint(ray, interval.start);
   }
-
-  private readonly handlePostRender = () => {
-    this.skipCount = Math.max(0, this.skipCount - 1);
-  };
 }
diff --git a/ui/src/style/index.css b/ui/src/style/index.css
index 9651c4773..6f316e19a 100644
--- a/ui/src/style/index.css
+++ b/ui/src/style/index.css
@@ -53,8 +53,6 @@
 @import "ngm-dashboard.css";
 @import "ngm-action-list-item.css";
 @import "topographic-profile.css";
-@import "ngm-voxel-filter.css";
-@import "ngm-voxel-simple-filter.css";
 @import "ngm-coordinate-popup.css";
 @import "ngm-ion-modal.css";
 @import "../styles/index.css";
diff --git a/ui/src/style/ngm-voxel-filter.css b/ui/src/style/ngm-voxel-filter.css
deleted file mode 100644
index 329479c8a..000000000
--- a/ui/src/style/ngm-voxel-filter.css
+++ /dev/null
@@ -1,37 +0,0 @@
-ngm-voxel-filter {
-  width: 520px;
-}
-
-ngm-voxel-filter .content-container > * {
-  border-bottom: 2px solid #dfe2e6;
-  padding: 10px;
-}
-
-ngm-voxel-filter input[type="number"] {
-  width: 80px;
-}
-
-ngm-voxel-filter .ui.form input[type="checkbox"] {
-  vertical-align: baseline;
-}
-
-ngm-voxel-filter .lithology-checkbox {
-  display: flex;
-  flex-direction: column;
-  max-height: 200px;
-  overflow: auto;
-}
-
-ngm-voxel-filter.is-klasse .lithology-checkbox {
-  max-height: 250px;
-}
-
-ngm-voxel-filter .lithology-checkbox label {
-  display: inline-flex;
-  gap: 5px;
-}
-
-ngm-voxel-filter .filter-label {
-  font-weight: bold;
-  padding: 12px 0;
-}
diff --git a/ui/src/style/ngm-voxel-simple-filter.css b/ui/src/style/ngm-voxel-simple-filter.css
deleted file mode 100644
index c2e71f1cf..000000000
--- a/ui/src/style/ngm-voxel-simple-filter.css
+++ /dev/null
@@ -1,16 +0,0 @@
-ngm-voxel-simple-filter {
-  width: 520px;
-}
-
-ngm-voxel-simple-filter .content-container > * {
-  border-bottom: 2px solid #dfe2e6;
-  padding: 10px;
-}
-
-ngm-voxel-simple-filter input[type="number"] {
-  width: 80px;
-}
-
-ngm-voxel-simple-filter .filter-label {
-  font-weight: bold;
-}
diff --git a/ui/src/utils/fn.utils.ts b/ui/src/utils/fn.utils.ts
index aef978d06..baa99febd 100644
--- a/ui/src/utils/fn.utils.ts
+++ b/ui/src/utils/fn.utils.ts
@@ -46,3 +46,8 @@ export function throttle<T extends (...args: any[]) => void>(
     }
   };
 }
+
+export const sleep = (millis: number) =>
+  new Promise<void>((resolve) => setTimeout(resolve, millis));
+
+export const tick = () => new Promise<void>((resolve) => setTimeout(resolve));
diff --git a/ui/src/viewer.ts b/ui/src/viewer.ts
index 3228ee14c..ad9c32658 100644
--- a/ui/src/viewer.ts
+++ b/ui/src/viewer.ts
@@ -1,22 +1,18 @@
-import { MANTEL_COLOR, SWITZERLAND_RECTANGLE } from './constants';
+import { SWITZERLAND_RECTANGLE } from './constants';
 
 import NavigableVolumeLimiter from './NavigableVolumeLimiter';
-import LimitCameraHeightToDepth from './LimitCameraHeightToDepth';
 import KeyboardNavigation from './KeyboardNavigation.js';
 
 import {
   Cartesian3,
-  Cartesian4,
   CesiumInspector,
   CesiumTerrainProvider,
   Color,
   DirectionalLight,
-  Ellipsoid,
   ImageryLayer,
   Ion,
   IonResource,
   JulianDate,
-  PostProcessStage,
   Rectangle,
   RequestScheduler,
   ScreenSpaceEventType,
@@ -24,7 +20,6 @@ import {
   Viewer,
   WebGLOptions,
 } from 'cesium';
-import MainStore from './store/main';
 import { getExaggeration } from './permalink';
 
 window['CESIUM_BASE_URL'] = './cesium';
@@ -43,39 +38,6 @@ Object.assign(RequestScheduler.requestsByServer, {
 
 let hasNoLimit = false;
 
-const FOG_FRAGMENT_SHADER_SOURCE = `
-  float getDistance(sampler2D depthTexture, vec2 texCoords) {
-      float depth = czm_unpackDepth(texture(depthTexture, texCoords));
-      if (depth == 0.0) {
-          return czm_infinity;
-      }
-      vec4 eyeCoordinate = czm_windowToEyeCoordinates(gl_FragCoord.xy, depth);
-      return -eyeCoordinate.z / eyeCoordinate.w;
-  }
-  float interpolateByDistance(vec4 nearFarScalar, float distance) {
-      float startDistance = nearFarScalar.x;
-      float startValue = nearFarScalar.y;
-      float endDistance = nearFarScalar.z;
-      float endValue = nearFarScalar.w;
-      float t = clamp((distance - startDistance) / (endDistance - startDistance), 0.0, 1.0);
-      return mix(startValue, endValue, t);
-  }
-  vec4 alphaBlend(vec4 sourceColor, vec4 destinationColor) {
-      return sourceColor * vec4(sourceColor.aaa, 1.0) + destinationColor * (1.0 - sourceColor.a);
-  }
-  uniform sampler2D colorTexture;
-  uniform sampler2D depthTexture;
-  uniform vec4 fogByDistance;
-  uniform vec4 fogColor;
-  in vec2 v_textureCoordinates;
-  void main(void) {
-      float distance = getDistance(depthTexture, v_textureCoordinates);
-      vec4 sceneColor = texture(colorTexture, v_textureCoordinates);
-      float blendAmount = interpolateByDistance(fogByDistance, distance);
-      vec4 finalFogColor = vec4(fogColor.rgb, fogColor.a * blendAmount);
-      out_FragColor = alphaBlend(finalFogColor, sceneColor);
-  }`;
-
 interface EmptyLayer {
   layer: { show: boolean };
 }
@@ -239,20 +201,6 @@ export async function setupViewer(
   globe.undergroundColorAlphaByDistance.nearValue = 0.5;
   globe.undergroundColorAlphaByDistance.farValue = 0.0;
 
-  const fog = new PostProcessStage({
-    fragmentShader: FOG_FRAGMENT_SHADER_SOURCE,
-    uniforms: {
-      fogByDistance: new Cartesian4(10000, 0.0, 150000, 0.3),
-      fogColor: Color.BLACK,
-    },
-    name: 'fog',
-  });
-
-  viewer.scene.postProcessStages.add(fog);
-  scene.postRender.addEventListener((scene) => {
-    fog.enabled = scene.cameraUnderground;
-  });
-
   const shouldEnableWireframe = searchParams.has('inspector_wireframe');
   if (searchParams.has('inspector') || shouldEnableWireframe) {
     const div = document.createElement('div');
@@ -266,58 +214,3 @@ export async function setupViewer(
   }
   return viewer;
 }
-
-export function addMantelEllipsoid(viewer: Viewer) {
-  // Add Mantel ellipsoid
-  const earthRadii = Ellipsoid.WGS84.radii.clone();
-  const mantelDepth = 30000; // See https://jira.camptocamp.com/browse/GSNGM-34
-  const mantelRadii = earthRadii.clone();
-  mantelRadii.x -= mantelDepth;
-  mantelRadii.y -= mantelDepth;
-  mantelRadii.z -= mantelDepth;
-
-  const entity = viewer.entities.add({
-    position: new Cartesian3(1, 1, 1), // small shift to avoid invertable error
-    ellipsoid: {
-      radii: mantelRadii,
-      material: MANTEL_COLOR,
-    },
-  });
-
-  if (!hasNoLimit) {
-    new LimitCameraHeightToDepth(viewer.scene, mantelDepth);
-  }
-
-  // hacky way to show mantel also above the terrain.
-  // for some reason object placed below 21km doesn't show when the camera above the terrain. distanceDisplayCondition doesn't resolve the issue.
-  const mantelDepthAboveTerrain = 21000;
-  const mantelRadiiAboveTerrain = earthRadii.clone();
-  mantelRadiiAboveTerrain.x -= mantelDepthAboveTerrain;
-  mantelRadiiAboveTerrain.y -= mantelDepthAboveTerrain;
-  mantelRadiiAboveTerrain.z -= mantelDepthAboveTerrain;
-
-  let hasUsedUndergroundValue = !viewer.scene.cameraUnderground;
-  viewer.scene.postRender.addEventListener((scene) => {
-    if (!entity.ellipsoid) return;
-    const isVoxelVisible = MainStore.visibleVoxelLayers.length > 0;
-    const exaggeration = getExaggeration();
-    if ((exaggeration > 1 || isVoxelVisible) && entity.isShowing) {
-      entity.show = false;
-      viewer.scene.requestRender();
-    } else if (exaggeration === 1 && !isVoxelVisible && !entity.isShowing) {
-      entity.show = true;
-      viewer.scene.requestRender();
-    }
-    if (scene.cameraUnderground && !hasUsedUndergroundValue) {
-      (<any>entity.ellipsoid.radii) = mantelRadii;
-      hasUsedUndergroundValue = true;
-      if (!Color.equals(scene.backgroundColor, Color.TRANSPARENT))
-        scene.backgroundColor = Color.TRANSPARENT;
-    } else if (!scene.cameraUnderground && hasUsedUndergroundValue) {
-      (<any>entity.ellipsoid.radii) = mantelRadiiAboveTerrain;
-      hasUsedUndergroundValue = false;
-      if (isVoxelVisible && !Color.equals(scene.backgroundColor, MANTEL_COLOR))
-        scene.backgroundColor = MANTEL_COLOR;
-    }
-  });
-}