diff --git a/app/components/ActionButton.vue b/app/components/ActionButton.vue
new file mode 100644
index 00000000..8cadbb69
--- /dev/null
+++ b/app/components/ActionButton.vue
@@ -0,0 +1,30 @@
+<script setup>
+const DEFAULT_ICON_SIZE = 28;
+const { icon, tooltip, color, size, variant, density, tooltipLocation, iconSize } = defineProps({
+  icon: { type: String, required: true },
+  tooltip: { type: String, required: true },
+  color: { type: String, default: undefined },
+  size: { type: [String, Number], default: undefined },
+  variant: { type: String },
+  density: { type: String, default: "comfortable" },
+  tooltipLocation: { type: String, default: "left" },
+  iconSize: { type: [String, Number], default: DEFAULT_ICON_SIZE },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <v-btn
+    :color="color"
+    :size="size"
+    :variant="variant"
+    :density="density"
+    v-tooltip:[tooltipLocation]="tooltip"
+    v-bind="$attrs"
+    icon
+    @click="emit('click', $event)"
+  >
+    <v-icon :size="iconSize">{{ icon }}</v-icon>
+  </v-btn>
+</template>
diff --git a/app/components/VeaseViewToolbar.vue b/app/components/VeaseViewToolbar.vue
index 743f8a63..195094e2 100644
--- a/app/components/VeaseViewToolbar.vue
+++ b/app/components/VeaseViewToolbar.vue
@@ -1,6 +1,7 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 
@@ -71,14 +72,11 @@ const camera_options = [
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
-        <v-btn
-          density="comfortable"
-          icon
+        <ActionButton
+          :icon="camera_option.icon"
+          :tooltip="camera_option.tooltip"
           @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
+        />
       </v-col>
     </v-row>
   </v-container>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 6530d84a..ed5811f7 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -1,6 +1,7 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -45,14 +46,12 @@ const camera_options = [
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
-        <v-btn
-          density="comfortable"
-          icon
-          @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
+        <ActionButton
+          :tooltip="camera_option.tooltip"
+          :icon="camera_option.icon"
+          tooltip-location="left"
+          @click="camera_option.action"
+        />
       </v-col>
     </v-row>
   </v-container>
diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
index 63d9fedc..cfd83957 100644
--- a/app/components/Viewer/BreadCrumb.vue
+++ b/app/components/Viewer/BreadCrumb.vue
@@ -11,33 +11,24 @@ function goBackToFileTree() {
   treeviewStore.displayFileTree();
 }
 
-const model_id = computed(() => treeviewStore.model_id);
-
-const metaDatas = computed(() => {
-  if (!model_id.value) {
-    return {};
-  }
-  return dataStore.refItem(model_id.value).value || {};
-});
+const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
 </script>
 
 <template>
   <v-breadcrumbs class="mb-n10 breadcrumb-container">
     <div class="d-flex align-center gap-2 ml-2 mt-2 mb-1">
-      <v-menu v-if="treeviewStore.isAdditionnalTreeDisplayed" offset-y>
-        <template v-slot:activator="{ props }">
-          <v-btn icon variant="text" size="medium" v-bind="props" @click="goBackToFileTree">
-            <v-icon size="large">mdi-file-tree</v-icon>
-          </v-btn>
-          <span class="text-h5 font-weight-bold">/</span>
-          <v-icon size="x-large">
-            {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
-          </v-icon>
-          <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-            Model Explorer ({{ metaDatas.name }})
-          </span>
-        </template>
-      </v-menu>
+      <template v-if="treeviewStore.isAdditionnalTreeDisplayed">
+        <v-btn icon variant="text" size="medium" @click.stop="goBackToFileTree">
+          <v-icon size="large">mdi-file-tree</v-icon>
+        </v-btn>
+        <span class="text-h5 font-weight-bold">/</span>
+        <v-icon size="large">
+          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
+        </v-icon>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
+          Model Explorer ({{ metaDatas.name }})
+        </span>
+      </template>
 
       <div v-else class="d-flex align-center gap-2">
         <v-icon size="large">mdi-file-tree</v-icon>
@@ -49,6 +40,8 @@ const metaDatas = computed(() => {
 
 <style scoped>
 .breadcrumb-container {
+  position: relative;
+  z-index: 10;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
index 869e8db4..023e4fbd 100644
--- a/app/components/Viewer/TreeComponent.vue
+++ b/app/components/Viewer/TreeComponent.vue
@@ -1,4 +1,6 @@
 <script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -11,50 +13,120 @@ const hybridViewerStore = useHybridViewerStore();
 const { id } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
 
-const items = dataStore.refFormatedMeshComponents(id);
-const mesh_components_selection = computed(() => dataStyleStore.visibleMeshComponents(id));
+const items = dataStore.refFormatedMeshComponents(toRef(() => id));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
 
-watch(
-  mesh_components_selection,
-  async (current, previous) => {
-    if (!previous) {
-      return;
-    }
+const search = ref("");
+const sortType = ref("name");
+const filterOptions = ref({
+  Corner: true,
+  Line: true,
+  Surface: true,
+  Block: true,
+});
 
-    const { added, removed } = compareSelections(current, previous);
-    console.log("TreeComponent selection change:", {
-      id: props.id,
-      added,
-      removed,
-    });
-
-    if (added.length > 0) {
-      await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);
-    }
-    if (removed.length > 0) {
-      await dataStyleStore.setModelMeshComponentsVisibility(id, removed, false);
-    }
-    hybridViewerStore.remoteRender();
-  },
-  { deep: true },
+const processedItems = computed(() =>
+  items.value
+    .filter((category) => filterOptions.value[category.id])
+    .map((category) => {
+      const field = sortType.value === "name" ? "title" : "id";
+      const children = (category.children || []).toSorted((first, second) =>
+        first[field].localeCompare(second[field]),
+      );
+      return { id: category.id, title: category.title, children };
+    }),
 );
+
+const availableFilterOptions = computed(() => items.value.map((category) => category.id));
+
+function toggleSort() {
+  sortType.value = sortType.value === "name" ? "id" : "name";
+}
+
+function customFilter(value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  return (
+    item.raw.title.toLowerCase().includes(query) ||
+    (item.raw.id && item.raw.id.toLowerCase().includes(query))
+  );
+}
+
+async function onSelectionChange(current) {
+  const previous = mesh_components_selection.value;
+  const { added, removed } = compareSelections(current, previous);
+
+  if (added.length === 0 && removed.length === 0) {
+    return;
+  }
+
+  if (added.length > 0) {
+    await dataStyleStore.setComponentsVisibility(id, added, true);
+  }
+  if (removed.length > 0) {
+    await dataStyleStore.setComponentsVisibility(id, removed, false);
+  }
+  hybridViewerStore.remoteRender();
+}
 </script>
 
 <template>
+  <v-row dense align="center" class="mr-1 ml-3 mt-2 pa-1">
+    <v-col>
+      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
+    </v-col>
+    <v-col cols="auto" class="d-flex align-center">
+      <ActionButton
+        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
+        :icon="
+          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
+        "
+        tooltipLocation="bottom"
+        @click="toggleSort"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="props"
+          />
+        </template>
+        <v-list class="mt-1">
+          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
+            <v-checkbox
+              v-model="filterOptions[category_id]"
+              :label="category_id"
+              hide-details
+              density="compact"
+            />
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-col>
+  </v-row>
   <v-treeview
-    v-model:selected="mesh_components_selection"
-    :items="items"
+    :selected="mesh_components_selection"
+    :items="processedItems"
+    :search="search"
+    :custom-filter="customFilter"
     class="transparent-treeview"
     item-value="id"
-    select-strategy="classic"
+    select-strategy="independent"
     selectable
+    @update:selected="onSelectionChange"
   >
     <template #title="{ item }">
       <span
         class="treeview-item"
         @contextmenu.prevent.stop="emit('show-menu', { event: $event, itemId: item })"
-        >{{ item.title }}</span
       >
+        {{ item.title }}
+      </span>
     </template>
   </v-treeview>
 </template>
diff --git a/app/components/Viewer/TreeObject.vue b/app/components/Viewer/TreeObject.vue
index 2ddcfb55..870f07cf 100644
--- a/app/components/Viewer/TreeObject.vue
+++ b/app/components/Viewer/TreeObject.vue
@@ -1,4 +1,6 @@
 <script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
@@ -11,6 +13,56 @@ const hybridViewerStore = useHybridViewerStore();
 
 const emit = defineEmits(["show-menu"]);
 
+const search = ref("");
+const sortType = ref("name");
+const filterOptions = ref({});
+
+const processedItems = computed(() =>
+  treeviewStore.items
+    .filter((category) => filterOptions.value[category.title] !== false)
+    .map((category) => {
+      const field = sortType.value === "name" ? "title" : "id";
+      const children = (category.children || []).toSorted((first, second) =>
+        first[field].localeCompare(second[field], undefined, {
+          numeric: true,
+          sensitivity: "base",
+        }),
+      );
+      return { id: category.title, title: category.title, children };
+    }),
+);
+
+const availableFilterOptions = computed(() =>
+  treeviewStore.items.map((category) => category.title),
+);
+
+watch(
+  availableFilterOptions,
+  (newOptions) => {
+    for (const option of newOptions) {
+      if (filterOptions.value[option] === undefined) {
+        filterOptions.value[option] = true;
+      }
+    }
+  },
+  { immediate: true },
+);
+
+function toggleSort() {
+  sortType.value = sortType.value === "name" ? "id" : "name";
+}
+
+function customFilter(value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  return (
+    item.raw.title.toLowerCase().includes(query) ||
+    (item.raw.id && item.raw.id.toLowerCase().includes(query))
+  );
+}
+
 function isLeafNode(item) {
   return !item.children || item.children.length === 0;
 }
@@ -24,8 +76,8 @@ watch(
     }
     const { added, removed } = compareSelections(current, previous);
     const updates = [
-      ...added.map((item) => dataStyleStore.setVisibility(item.id, true)),
-      ...removed.map((item) => dataStyleStore.setVisibility(item.id, false)),
+      ...added.map((id) => dataStyleStore.setVisibility(id, true)),
+      ...removed.map((id) => dataStyleStore.setVisibility(id, false)),
     ];
     await Promise.all(updates);
     hybridViewerStore.remoteRender();
@@ -45,10 +97,47 @@ onMounted(() => {
 </script>
 
 <template>
+  <v-row v-if="treeviewStore.items.length > 0" dense align="center" class="mr-1 ml-3 mt-2 pa-1">
+    <v-col>
+      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
+    </v-col>
+    <v-col cols="auto" class="d-flex align-center">
+      <ActionButton
+        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
+        :icon="
+          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
+        "
+        tooltipLocation="bottom"
+        @click="toggleSort"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="props"
+          />
+        </template>
+        <v-list class="mt-1">
+          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
+            <v-checkbox
+              v-model="filterOptions[category_id]"
+              :label="category_id"
+              hide-details
+              density="compact"
+            />
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-col>
+  </v-row>
   <v-treeview
     v-model:selected="treeviewStore.selection"
-    :items="treeviewStore.items"
-    return-object
+    :items="processedItems"
+    :search="search"
+    :custom-filter="customFilter"
     class="transparent-treeview"
     item-value="id"
     select-strategy="classic"
diff --git a/app/stores/data.js b/app/stores/data.js
index 15ff23f6..2f94889d 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -35,7 +35,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function formatedMeshComponents(modelId) {
-    const items = await database.model_components.where({ id: modelId }).toArray();
+    const items = await database.model_components.where("id").equals(modelId).toArray();
     const componentTitles = {
       Corner: "Corners",
       Line: "Lines",
@@ -68,13 +68,19 @@ export const useDataStore = defineStore("data", () => {
 
   function refFormatedMeshComponents(id) {
     return useObservable(
-      liveQuery(() => formatedMeshComponents(id)),
+      liveQuery(() => {
+        const unwrapped_id = unref(id);
+        return formatedMeshComponents(unwrapped_id);
+      }),
       { initialValue: [] },
     );
   }
 
   async function meshComponentType(modelId, geode_id) {
-    const component = await database.model_components.where({ id: modelId, geode_id }).first();
+    const component = await database.model_components
+      .where("[id+geode_id]")
+      .equals([modelId, geode_id])
+      .first();
     return component?.type;
   }
 
@@ -155,13 +161,14 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function deleteModelComponents(modelId) {
-    await database.model_components.where({ id: modelId }).delete();
-    await database.model_components_relation.where({ id: modelId }).delete();
+    await database.model_components.where("id").equals(modelId).delete();
+    await database.model_components_relation.where("id").equals(modelId).delete();
   }
 
   async function getMeshComponentGeodeIds(modelId, component_type) {
     const components = await database.model_components
-      .where({ id: modelId, type: component_type })
+      .where("[id+type]")
+      .equals([modelId, component_type])
       .toArray();
     return components.map((component) => component.geode_id);
   }
@@ -221,6 +228,7 @@ export const useDataStore = defineStore("data", () => {
     getLinesGeodeIds,
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
+    getMeshComponentGeodeIds,
     getMeshComponentsViewerIds,
 
     exportStores,
diff --git a/app/stores/data_style.js b/app/stores/data_style.js
index 1b3fb7c7..e0f23f1b 100644
--- a/app/stores/data_style.js
+++ b/app/stores/data_style.js
@@ -85,6 +85,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     selectedObjects: dataStyleState.selectedObjects,
     ...meshStyleStore,
     ...modelStyleStore,
+    setComponentsVisibility: modelStyleStore.setModelComponentsVisibility,
     addDataStyle,
     applyDefaultStyle,
     setVisibility,
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 10e8d551..5fb9c661 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -25,7 +25,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
             sensitivity: "base",
           }),
         );
-        selection.value.push(child);
+        selection.value.push(id);
         return;
       }
     }
@@ -36,7 +36,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
         sensitivity: "base",
       }),
     );
-    selection.value.push(child);
+    selection.value.push(id);
   }
 
   function displayAdditionalTree(id) {
diff --git a/internal/stores/data_style/model/index.js b/internal/stores/data_style/model/index.js
index 63106a40..b9da3bf1 100644
--- a/internal/stores/data_style/model/index.js
+++ b/internal/stores/data_style/model/index.js
@@ -14,6 +14,10 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
+const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" }, { type: "Block" }];
+
+const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
+
 export function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleStateStore = useDataStyleStateStore();
@@ -26,19 +30,54 @@ export function useModelStyle() {
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
 
-  function modelVisibility(id) {
-    return dataStyleStateStore.getStyle(id).visibility;
+  function buildSelection(modelId, components, stylesMap) {
+    const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
+    for (const component of components) {
+      if (componentsByType[component.type]) {
+        componentsByType[component.type].push(component);
+      }
+    }
+
+    const groupStyles = dataStyleStateStore.getStyle(modelId);
+    const selection = [];
+    for (const type of MESH_TYPES) {
+      const typeComponents = componentsByType[type];
+      if (typeComponents.length === 0) {
+        continue;
+      }
+
+      const typeKey = `${type.toLowerCase()}s`;
+      const defaultVisibility = groupStyles[typeKey].visibility;
+
+      let allVisible = true;
+      for (const component of typeComponents) {
+        const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
+        if (isVisible) {
+          selection.push(component.geode_id);
+        } else {
+          allVisible = false;
+        }
+      }
+      if (allVisible) {
+        selection.push(type);
+      }
+    }
+    return selection;
+  }
+
+  function modelVisibility(modelId) {
+    return dataStyleStateStore.getStyle(modelId).visibility;
   }
 
-  function setModelVisibility(id, visibility) {
+  function setModelVisibility(modelId, visibility) {
     return viewerStore.request(
       model_schemas.visibility,
-      { id, visibility },
+      { id: modelId, visibility },
       {
         response_function: async () => {
-          await hybridViewerStore.setVisibility(id, visibility);
-          await dataStyleStateStore.mutateStyle(id, { visibility });
-          return { id, visibility };
+          await hybridViewerStore.setVisibility(modelId, visibility);
+          await dataStyleStateStore.mutateStyle(modelId, { visibility });
+          return { id: modelId, visibility };
         },
       },
     );
@@ -47,60 +86,34 @@ export function useModelStyle() {
   function visibleMeshComponents(id_ref) {
     const selection = ref([]);
     watch(
-      () => (isRef(id_ref) ? id_ref.value : id_ref),
-      (newId, oldId, onCleanup) => {
-        if (!newId) {
+      () => unref(id_ref),
+      (modelId, _prev, onCleanup) => {
+        if (!modelId) {
+          selection.value = [];
           return;
         }
         const observable = liveQuery(async () => {
-          const components = await database.model_components.where("id").equals(newId).toArray();
-          if (components.length === 0) {
+          const allComponents = await database.model_components
+            .where("id")
+            .equals(modelId)
+            .toArray();
+          if (allComponents.length === 0) {
             return [];
           }
-
-          const all_styles = await database.model_component_datastyle
+          const componentStyles = await database.model_component_datastyle
             .where("id_model")
-            .equals(newId)
+            .equals(modelId)
             .toArray();
-          const styles = {};
-          for (const style of all_styles) {
-            styles[style.id_component] = style;
-          }
-
-          const current_selection = [];
-          const meshTypes = new Set(["Corner", "Line", "Surface", "Block"]);
-          const componentsByType = {};
-          for (const component of components) {
-            if (meshTypes.has(component.type)) {
-              if (!componentsByType[component.type]) {
-                componentsByType[component.type] = [];
-              }
-              componentsByType[component.type].push(component.geode_id);
-            }
-          }
-
-          for (const [type, geode_ids] of Object.entries(componentsByType)) {
-            let all_visible = true;
-            for (const gid of geode_ids) {
-              const is_visible = styles[gid] === undefined ? true : styles[gid].visibility;
-              if (is_visible) {
-                current_selection.push(gid);
-              } else {
-                all_visible = false;
-              }
-            }
-            if (all_visible) {
-              current_selection.push(type);
-            }
-          }
-          return current_selection;
+          const stylesMap = Object.fromEntries(
+            componentStyles.map((style) => [style.id_component, style]),
+          );
+          return buildSelection(modelId, allComponents, stylesMap);
         });
 
         const subscription = observable.subscribe({
           next: (val) => {
             selection.value = val;
           },
-          error: (err) => console.error(err),
         });
         onCleanup(() => subscription.unsubscribe());
       },
@@ -109,41 +122,69 @@ export function useModelStyle() {
     return selection;
   }
 
-  function applyModelStyle(id) {
-    const style = dataStyleStateStore.getStyle(id);
+  async function setModelComponentsVisibility(modelId, componentIds, visibility) {
+    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+    const componentsMap = Object.fromEntries(
+      allComponents.map((component) => [component.geode_id, component]),
+    );
+
+    return Promise.all(
+      MESH_TYPES.map(async (type) => {
+        const typeComponents = allComponents.filter((component) => component.type === type);
+        const isSelectedType = componentIds.includes(type);
+        const idsToUpdate = isSelectedType
+          ? typeComponents.map((component) => component.geode_id)
+          : componentIds.filter((id) => componentsMap[id]?.type === type);
+
+        if (idsToUpdate.length === 0) {
+          return;
+        }
+
+        const viewerIds = await dataStore.getMeshComponentsViewerIds(modelId, idsToUpdate);
+        if (viewerIds.length > 0) {
+          const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
+          await viewerStore.request(schema, { id: modelId, block_ids: viewerIds, visibility });
+        }
+        return dataStyleStateStore.mutateComponentStyles(modelId, idsToUpdate, { visibility });
+      }),
+    );
+  }
+
+  function applyModelStyle(modelId) {
+    const style = dataStyleStateStore.getStyle(modelId);
     const handlers = {
-      visibility: () => setModelVisibility(id, style.visibility),
-      corners: () => modelCornersStyleStore.applyModelCornersStyle(id),
-      lines: () => modelLinesStyleStore.applyModelLinesStyle(id),
-      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(id),
-      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(id),
-      points: () => modelPointsStyleStore.applyModelPointsStyle(id),
-      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(id),
+      visibility: () => setModelVisibility(modelId, style.visibility),
+      corners: () => modelCornersStyleStore.applyModelCornersStyle(modelId),
+      lines: () => modelLinesStyleStore.applyModelLinesStyle(modelId),
+      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(modelId),
+      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(modelId),
+      points: () => modelPointsStyleStore.applyModelPointsStyle(modelId),
+      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(modelId),
     };
 
-    const promises = Object.keys(style)
-      .filter((key) => handlers[key])
-      .map((key) => handlers[key]());
-
-    return Promise.all(promises);
+    return Promise.all(
+      Object.keys(style)
+        .filter((key) => handlers[key])
+        .map((key) => handlers[key]()),
+    );
   }
 
-  function setModelMeshComponentsDefaultStyle(id) {
-    return dataStore.item(id).then((item) => {
+  function setModelMeshComponentsDefaultStyle(modelId) {
+    return dataStore.item(modelId).then((item) => {
       if (!item) {
         return [];
       }
       const { mesh_components } = item;
       const handlers = {
-        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(id),
-        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(id),
-        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(id),
-        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(id),
+        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
+        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
+        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
+        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
       };
       return Promise.all(
         Object.keys(mesh_components)
-          .filter((k) => handlers[k])
-          .map((k) => handlers[k]()),
+          .filter((key) => handlers[key])
+          .map((key) => handlers[key]()),
       );
     });
   }
@@ -152,6 +193,7 @@ export function useModelStyle() {
     modelVisibility,
     visibleMeshComponents,
     setModelVisibility,
+    setModelComponentsVisibility,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
     ...useModelBlocksStyle(),