diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
deleted file mode 100644
index cfd83957..00000000
--- a/app/components/Viewer/BreadCrumb.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup>
-import { useDataStore } from "@ogw_front/stores/data";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-const dataStore = useDataStore();
-const treeviewStore = useTreeviewStore();
-
-const selectedTree = computed(() => treeviewStore.selectedTree);
-
-function goBackToFileTree() {
-  treeviewStore.displayFileTree();
-}
-
-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">
-      <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>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
-      </div>
-    </div>
-  </v-breadcrumbs>
-</template>
-
-<style scoped>
-.breadcrumb-container {
-  position: relative;
-  z-index: 10;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-}
-</style>
diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
new file mode 100644
index 00000000..41163d67
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -0,0 +1,58 @@
+<script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
+
+const { search, sortType, filterOptions, availableFilterOptions } = defineProps({
+  search: { type: String, required: true },
+  sortType: { type: String, required: true },
+  filterOptions: { type: Object, required: true },
+  availableFilterOptions: { type: Array, required: true },
+});
+
+const emit = defineEmits(["update:search", "toggle-sort"]);
+</script>
+
+<template>
+  <v-row dense align="center" class="pa-2">
+    <v-col>
+      <SearchBar
+        :model-value="search"
+        label="Search"
+        color="black"
+        base-color="black"
+        @update:model-value="emit('update:search', $event)"
+      />
+    </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="emit('toggle-sort')"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props: menuProps }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="menuProps"
+          />
+        </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>
+</template>
diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
new file mode 100644
index 00000000..acbbce2f
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -0,0 +1,49 @@
+<script setup>
+const { item, showTooltip } = defineProps({
+  item: { type: Object, required: true },
+  showTooltip: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["contextmenu"]);
+
+const actualItem = computed(() => item.raw || item);
+</script>
+
+<template>
+  <span
+    class="tree-item-label"
+    :class="{ 'inactive-item': actualItem.is_active === false }"
+    @contextmenu.prevent.stop="emit('contextmenu', $event)"
+  >
+    {{ actualItem.title }}
+    <v-tooltip v-if="showTooltip && actualItem.category" activator="parent" location="right">
+      <div class="d-flex flex-column pa-1">
+        <span class="text-caption"><strong>ID:</strong> {{ actualItem.id }}</span>
+        <span v-if="actualItem.title" class="text-caption"
+          ><strong>Name:</strong> {{ actualItem.title }}</span
+        >
+        <span class="text-caption font-italic border-t-sm d-flex align-center">
+          <strong class="mr-1">Status:</strong>
+          {{ actualItem.is_active ? "Active" : "Inactive" }}
+        </span>
+      </div>
+    </v-tooltip>
+  </span>
+</template>
+
+<style scoped>
+.tree-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.inactive-item {
+  opacity: 0.4;
+  font-style: italic;
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
new file mode 100644
index 00000000..60f30af8
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -0,0 +1,132 @@
+<script setup>
+const SCROLL_SYNC_DELAY = 50;
+const SCROLL_THRESHOLD = 1;
+const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
+  title: { type: String, required: true },
+  closable: { type: Boolean, default: false },
+  icon: { type: String, default: "" },
+  mdiIcon: { type: String, default: "" },
+  scrollTop: { type: Number, default: 0 },
+});
+
+const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
+
+const scrollContainer = ref(undefined);
+let isApplyingScroll = false;
+let resizeObserver = undefined;
+
+function handleScroll(event) {
+  if (isApplyingScroll) {
+    return;
+  }
+  emit("update:scrollTop", event.target.scrollTop);
+}
+
+function applyScrollTop(val) {
+  if (scrollContainer.value) {
+    isApplyingScroll = true;
+    scrollContainer.value.scrollTop = val;
+    setTimeout(() => {
+      isApplyingScroll = false;
+    }, SCROLL_SYNC_DELAY);
+  }
+}
+
+onMounted(() => {
+  if (scrollContainer.value) {
+    applyScrollTop(scrollTop);
+
+    resizeObserver = new ResizeObserver(() => {
+      if (
+        scrollContainer.value &&
+        Math.abs(scrollContainer.value.scrollTop - scrollTop) > SCROLL_THRESHOLD
+      ) {
+        applyScrollTop(scrollTop);
+      }
+    });
+
+    resizeObserver.observe(scrollContainer.value);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+watch(
+  () => scrollTop,
+  (newVal) => {
+    if (
+      scrollContainer.value &&
+      Math.abs(scrollContainer.value.scrollTop - newVal) > SCROLL_THRESHOLD
+    ) {
+      applyScrollTop(newVal);
+    }
+  },
+);
+</script>
+
+<template>
+  <v-card variant="outlined" class="tree-box d-flex flex-column">
+    <v-card-title
+      class="tree-box-header d-flex align-center"
+      :class="{ 'cursor-grab': closable }"
+      :draggable="closable"
+      @dragstart="emit('dragstart', $event)"
+    >
+      <v-img
+        v-if="icon"
+        :src="icon"
+        width="24"
+        height="24"
+        max-width="24"
+        class="mr-2"
+        style="filter: brightness(0); display: flex; align-items: center"
+      />
+      <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
+      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
+      <span
+        class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
+        style="height: 24px; line-height: 1"
+      >
+        {{ title }}
+      </span>
+      <v-spacer />
+      <v-btn
+        v-if="closable"
+        icon="mdi-close"
+        variant="text"
+        size="x-small"
+        @click="emit('close')"
+      />
+    </v-card-title>
+    <v-divider />
+    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column">
+      <div
+        ref="scrollContainer"
+        class="flex-grow-1 overflow-y-auto overflow-x-hidden"
+        @scroll="handleScroll"
+      >
+        <slot />
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.tree-box {
+  height: 100%;
+  border-radius: 16px;
+  background-color: transparent !important;
+  backdrop-filter: blur(2px);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tree-box-header {
+  height: 40px !important;
+  padding: 0 8px !important;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
new file mode 100644
index 00000000..9188eaca
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -0,0 +1,320 @@
+<script setup>
+import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
+import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
+import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const WIDTH_MIN = 200;
+const HEIGHT_MIN = 150;
+const GAP_WIDTH = 10;
+const PERCENT_100 = 100;
+
+const TOTAL_PERCENT = 100;
+
+const treeviewStore = useTreeviewStore();
+const emit = defineEmits(["show-menu"]);
+
+const mainView = computed(() => treeviewStore.opened_views[0]);
+const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
+
+const totalWidth = computed(() => {
+  const hasAdditional = additionalViews.value.length > 0;
+  const gap = hasAdditional ? GAP_WIDTH : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  return `${treeviewStore.panelWidth + secondColWidth + gap}px`;
+});
+
+const rowHeights = computed({
+  get: () => treeviewStore.rowHeights,
+  set: (val) => treeviewStore.setRowHeights(val),
+});
+const draggedIndex = ref(undefined);
+
+watch(
+  () => additionalViews.value.length,
+  (newLength) => {
+    if (newLength > 0 && rowHeights.value.length !== newLength) {
+      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
+    }
+  },
+  { immediate: true },
+);
+
+function onDragStart(index) {
+  draggedIndex.value = index;
+}
+
+function onDragOver(event) {
+  event.preventDefault();
+}
+
+function onDrop(targetIndex) {
+  if (draggedIndex.value !== undefined && draggedIndex.value !== targetIndex) {
+    treeviewStore.moveView(draggedIndex.value, targetIndex);
+  }
+  draggedIndex.value = undefined;
+}
+
+function onResizeStart(event) {
+  const startWidth = treeviewStore.panelWidth;
+  const startX = event.clientX;
+  function resize(move_event) {
+    const deltaX = move_event.clientX - startX;
+    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    treeviewStore.setPanelWidth(newWidth);
+    document.body.style.userSelect = "none";
+  }
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+
+function onAdditionalResizeStart(event) {
+  const startWidth = treeviewStore.additionalPanelWidth;
+  const startX = event.clientX;
+  function resize(move_event) {
+    const deltaX = move_event.clientX - startX;
+    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    treeviewStore.setAdditionalPanelWidth(newWidth);
+    document.body.style.userSelect = "none";
+  }
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+
+function onVerticalResizeStart(event, index) {
+  const startY = event.clientY;
+  const startHeight1 = rowHeights.value[index];
+  const startHeight2 = rowHeights.value[index + 1];
+  const containerHeight = event.currentTarget.parentElement.offsetHeight;
+
+  function resize(move_event) {
+    const deltaY = move_event.clientY - startY;
+    const deltaPercent = (deltaY / containerHeight) * PERCENT_100;
+    const minHeightPercent = (HEIGHT_MIN / containerHeight) * PERCENT_100;
+
+    let newH1 = startHeight1 + deltaPercent;
+    let newH2 = startHeight2 - deltaPercent;
+
+    if (newH1 < minHeightPercent) {
+      newH1 = minHeightPercent;
+      newH2 = startHeight1 + startHeight2 - minHeightPercent;
+    } else if (newH2 < minHeightPercent) {
+      newH2 = minHeightPercent;
+      newH1 = startHeight1 + startHeight2 - minHeightPercent;
+    }
+
+    const newHeights = [...rowHeights.value];
+    newHeights[index] = newH1;
+    newHeights[index + 1] = newH2;
+    treeviewStore.setRowHeights(newHeights);
+
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "ns-resize";
+  }
+
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+</script>
+
+<template>
+  <div
+    v-if="treeviewStore.items.length > 0"
+    class="treeview-container d-flex"
+    :style="{ width: totalWidth }"
+    @contextmenu.prevent
+    @mousedown.stop
+  >
+    <div
+      class="column main-column"
+      :style="{
+        width: `${treeviewStore.panelWidth}px`,
+      }"
+    >
+      <ViewerObjectTreeBox
+        :title="mainView.title"
+        mdi-icon="mdi-file-tree-outline"
+        :scroll-top="mainView.scrollTop"
+        @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
+      >
+        <GlobalObjects @show-menu="emit('show-menu', $event)" />
+      </ViewerObjectTreeBox>
+    </div>
+
+    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
+
+    <div
+      v-if="additionalViews.length > 0"
+      class="column additional-column"
+      :style="{
+        width: `${treeviewStore.additionalPanelWidth}px`,
+      }"
+    >
+      <template v-for="(view, index) in additionalViews" :key="view.id">
+        <div
+          class="view-wrapper"
+          :class="{
+            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
+          }"
+          :style="{ flex: `0 0 ${rowHeights[index]}%` }"
+          @dragover="onDragOver"
+          @drop="onDrop(index + 1)"
+        >
+          <ViewerObjectTreeBox
+            :title="view.title"
+            :icon="geode_objects[view.geode_object_type]?.image"
+            :scroll-top="view.scrollTop"
+            closable
+            @close="treeviewStore.closeView(index + 1)"
+            @dragstart="onDragStart(index + 1)"
+            @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
+          >
+            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
+          </ViewerObjectTreeBox>
+        </div>
+        <div
+          v-if="index < additionalViews.length - 1"
+          class="v-split-resizer"
+          @mousedown="onVerticalResizeStart($event, index)"
+        />
+      </template>
+    </div>
+    <div
+      class="total-resizer"
+      @mousedown="
+        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
+      "
+    />
+  </div>
+</template>
+
+<style scoped>
+.treeview-container {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  height: calc(100vh - 100px);
+  margin-top: 10px;
+  margin-left: 10px;
+  pointer-events: auto;
+  width: max-content;
+  min-width: min-content;
+}
+
+.layout-root {
+  display: flex;
+  height: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-shrink: 0;
+}
+
+.main-column {
+  flex-shrink: 0;
+}
+
+.additional-column {
+  flex-shrink: 0;
+}
+
+.view-wrapper {
+  overflow: hidden;
+  padding: 2px;
+  transition: transform 0.2s;
+  min-height: 150px;
+}
+
+.view-wrapper.drag-over {
+  border: 2px dashed rgba(0, 0, 0, 0.2);
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.column-separator {
+  width: 6px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  margin: 0 2px;
+  cursor: ew-resize;
+  position: relative;
+}
+
+.column-separator:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.column-separator::after {
+  content: "";
+  position: absolute;
+  top: 10%;
+  bottom: 10%;
+  left: 2px;
+  width: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+}
+
+.v-split-resizer {
+  height: 6px;
+  position: relative;
+  cursor: ns-resize;
+  background-color: transparent;
+  z-index: 5;
+}
+
+.v-split-resizer::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 10%;
+  right: 10%;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+  transition: background-color 0.2s;
+}
+
+.v-split-resizer:hover::after {
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 3px;
+  top: 1.5px;
+}
+
+.total-resizer {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 8px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 10;
+}
+
+.total-resizer:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
new file mode 100644
index 00000000..b60eb311
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -0,0 +1,129 @@
+<script setup>
+import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import { compareSelections } from "@ogw_front/utils/treeview";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const treeviewStore = useTreeviewStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const emit = defineEmits(["show-menu"]);
+
+const mainView = computed(() => treeviewStore.opened_views[0]);
+const opened = computed({
+  get: () => mainView.value?.opened || [],
+  set: (val) => treeviewStore.setOpened(mainView.value.id, val),
+});
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  processedItems,
+  availableFilterOptions,
+  toggleSort,
+  customFilter,
+} = useTreeFilter(toRef(() => treeviewStore.items));
+
+watch(
+  () => treeviewStore.selection,
+  async (current, previous) => {
+    const oldSelection = previous || [];
+    if (current === oldSelection) {
+      return;
+    }
+
+    const { added, removed } = compareSelections(current, previous);
+
+    const allObjectIds = new Set(
+      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
+    );
+
+    const updates = [
+      ...added
+        .filter((id) => allObjectIds.has(id))
+        .map((id) => dataStyleStore.setVisibility(id, true)),
+      ...removed
+        .filter((id) => allObjectIds.has(id))
+        .map((id) => dataStyleStore.setVisibility(id, false)),
+    ];
+    await Promise.all(updates);
+    hybridViewerStore.remoteRender();
+  },
+);
+
+function isModel(item) {
+  const actualItem = item.raw || item;
+  return (
+    actualItem.viewer_type === "model" || ["BRep", "Section"].includes(actualItem.geode_object_type)
+  );
+}
+</script>
+
+<template>
+  <div class="tree-view-container">
+    <ObjectTreeControls
+      v-model:search="search"
+      :sort-type="sortType"
+      :filter-options="filterOptions"
+      :available-filter-options="availableFilterOptions"
+      @toggle-sort="toggleSort"
+    />
+
+    <v-treeview
+      v-model:selected="treeviewStore.selection"
+      v-model:opened="opened"
+      :items="processedItems"
+      :search="search"
+      :custom-filter="customFilter"
+      class="transparent-treeview"
+      item-value="id"
+      select-strategy="classic"
+      selectable
+    >
+      <template #title="{ item }">
+        <ObjectTreeItemLabel
+          :item="item"
+          @contextmenu="emit('show-menu', { event: $event, itemId: item.id })"
+        />
+      </template>
+
+      <template #append="{ item }">
+        <v-btn
+          v-if="isModel(item)"
+          icon="mdi-magnify-expand"
+          size="medium"
+          class="ml-8"
+          variant="text"
+          v-tooltip="'Model\'s mesh components'"
+          @click.stop="
+            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
+          "
+        />
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<style scoped>
+.transparent-treeview {
+  background-color: transparent;
+  margin: 4px 0;
+}
+
+:deep(.v-list-item) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.v-list-item--active > .v-list-item__overlay) {
+  opacity: 0 !important;
+}
+
+:deep(.v-list-item:hover > .v-list-item__overlay) {
+  opacity: 0.1 !important;
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
new file mode 100644
index 00000000..31630a53
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -0,0 +1,113 @@
+<script setup>
+import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import { compareSelections } from "@ogw_front/utils/treeview";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const { id: viewId } = defineProps({ id: { type: String, required: true } });
+const emit = defineEmits(["show-menu"]);
+
+const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const treeviewStore = useTreeviewStore();
+
+const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
+const opened = computed({
+  get: () => currentView.value?.opened || [],
+  set: (val) => treeviewStore.setOpened(viewId, val),
+});
+
+const items = dataStore.refFormatedMeshComponents(toRef(() => viewId));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => viewId));
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  processedItems,
+  availableFilterOptions,
+  toggleSort,
+  customFilter,
+} = useTreeFilter(items);
+
+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.setModelComponentsVisibility(viewId, added, true);
+  }
+  if (removed.length > 0) {
+    await dataStyleStore.setModelComponentsVisibility(viewId, removed, false);
+  }
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <div class="tree-view-container">
+    <ObjectTreeControls
+      v-model:search="search"
+      :sort-type="sortType"
+      :filter-options="filterOptions"
+      :available-filter-options="availableFilterOptions"
+      @toggle-sort="toggleSort"
+    />
+
+    <v-treeview
+      :selected="mesh_components_selection"
+      v-model:opened="opened"
+      :items="processedItems"
+      :search="search"
+      :custom-filter="customFilter"
+      class="transparent-treeview"
+      item-value="id"
+      select-strategy="independent"
+      selectable
+      @update:selected="onSelectionChange"
+    >
+      <template #title="{ item }">
+        <ObjectTreeItemLabel
+          :item="item"
+          show-tooltip
+          @contextmenu="
+            emit('show-menu', {
+              event: $event,
+              itemId: item.id,
+              context_type: 'model_component',
+              modelId: viewId,
+            })
+          "
+        />
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<style scoped>
+.transparent-treeview {
+  background-color: transparent;
+  margin: 4px 0;
+}
+
+:deep(.v-list-item) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.v-list-item--active > .v-list-item__overlay) {
+  opacity: 0 !important;
+}
+
+:deep(.v-list-item:hover > .v-list-item__overlay) {
+  opacity: 0.1 !important;
+}
+</style>
diff --git a/app/components/Viewer/Tree/ObjectTree.vue b/app/components/Viewer/Tree/ObjectTree.vue
deleted file mode 100644
index ce2fff80..00000000
--- a/app/components/Viewer/Tree/ObjectTree.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<script setup>
-import ViewerBreadCrumb from "@ogw_front/components/Viewer/BreadCrumb";
-import ViewerTreeComponent from "@ogw_front/components/Viewer/TreeComponent";
-import ViewerTreeObject from "@ogw_front/components/Viewer/TreeObject";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-const WIDTH_MIN = 150;
-
-const treeviewStore = useTreeviewStore();
-const emit = defineEmits(["show-menu"]);
-
-function onResizeStart(event) {
-  const startWidth = treeviewStore.panelWidth;
-  const startX = event.clientX;
-  function resize(move_event) {
-    const deltaX = move_event.clientX - startX;
-    const newWidth = Math.max(WIDTH_MIN, Math.min(startWidth + deltaX, window.innerWidth));
-    treeviewStore.setPanelWidth(newWidth);
-    document.body.style.userSelect = "none";
-  }
-  function stopResize() {
-    document.removeEventListener("mousemove", resize);
-    document.removeEventListener("mouseup", stopResize);
-    document.body.style.userSelect = "";
-  }
-  document.addEventListener("mousemove", resize);
-  document.addEventListener("mouseup", stopResize);
-}
-</script>
-
-<template>
-  <v-container
-    class="treeview-container"
-    :style="{ width: `${treeviewStore.panelWidth}px` }"
-    @contextmenu.prevent
-    @mousedown.stop
-  >
-    <v-row class="resizable-panel" :style="{ width: `${treeviewStore.panelWidth}px` }">
-      <div class="scrollable-wrapper">
-        <v-sheet style="max-height: calc(85vh)" class="transparent-treeview scrollbar-hover">
-          <v-row v-if="treeviewStore.items.length > 0">
-            <v-col>
-              <ViewerBreadCrumb />
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <ViewerTreeObject
-                v-if="!treeviewStore.isAdditionnalTreeDisplayed"
-                @show-menu="emit('show-menu', $event)"
-              />
-              <ViewerTreeComponent
-                v-else
-                @show-menu="emit('show-menu', $event)"
-                :id="treeviewStore.model_id"
-              />
-            </v-col>
-          </v-row>
-        </v-sheet>
-      </div>
-      <div class="resizer" @mousedown="onResizeStart"></div>
-    </v-row>
-  </v-container>
-</template>
-
-<style scoped>
-.treeview-container {
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  top: 0;
-  background-color: transparent;
-  border-radius: 16px;
-  padding: 8px;
-  display: flex;
-  box-sizing: border-box;
-}
-
-.resizable-panel {
-  display: flex;
-  height: 100%;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.scrollable-wrapper {
-  overflow-y: auto;
-  padding-right: 6px;
-  flex: 1;
-}
-
-.resizer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 6px;
-  height: 100%;
-  cursor: ew-resize;
-  background-color: transparent;
-  z-index: 15;
-}
-
-.resizer:hover {
-  background-color: #999;
-}
-
-.resizer:active {
-  background-color: #666;
-}
-
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-
-.scrollbar-hover {
-  overflow-x: hidden;
-}
-
-.scrollbar-hover::-webkit-scrollbar {
-  width: 5px;
-}
-
-.scrollbar-hover::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-
-.scrollbar-hover:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-}
-</style>
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
deleted file mode 100644
index f3e06847..00000000
--- a/app/components/Viewer/TreeComponent.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<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";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-const dataStyleStore = useDataStyleStore();
-const dataStore = useDataStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const { id } = defineProps({ id: { type: String, required: true } });
-const emit = defineEmits(["show-menu"]);
-
-const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
-
-const search = ref("");
-const sortType = ref("name");
-const filterOptions = ref({
-  Corner: true,
-  Line: true,
-  Surface: true,
-  Block: 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.setModelComponentsVisibility(id, added, true);
-  }
-  if (removed.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(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
-    :selected="mesh_components_selection"
-    :items="processedItems"
-    :search="search"
-    :custom-filter="customFilter"
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="independent"
-    selectable
-    @update:selected="onSelectionChange"
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        :class="{ 'inactive-item': item.is_active === false }"
-        @contextmenu.prevent.stop="
-          emit('show-menu', {
-            event: $event,
-            itemId: item.id,
-            context_type: 'model_component',
-            modelId: id,
-          })
-        "
-      >
-        {{ item.title }}
-        <v-tooltip v-if="item.category" activator="parent" location="right">
-          <div class="d-flex flex-column pa-1">
-            <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
-            <span v-if="item.title" class="text-caption"
-              ><strong>Name:</strong> {{ item.title }}</span
-            >
-            <span class="text-caption font-italic border-t-sm d-flex align-center">
-              <strong class="mr-1">Status:</strong> {{ item.is_active ? "Active" : "Inactive" }}
-            </span>
-          </div>
-        </v-tooltip>
-      </span>
-    </template>
-  </v-treeview>
-</template>
-
-<style scoped>
-.treeview-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-}
-.inactive-item {
-  opacity: 0.4;
-  font-style: italic;
-}
-
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-</style>
diff --git a/app/components/Viewer/TreeObject.vue b/app/components/Viewer/TreeObject.vue
deleted file mode 100644
index 870f07cf..00000000
--- a/app/components/Viewer/TreeObject.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<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";
-
-import { compareSelections } from "@ogw_front/utils/treeview";
-
-const treeviewStore = useTreeviewStore();
-const dataStyleStore = useDataStyleStore();
-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;
-}
-
-watch(
-  () => treeviewStore.selection,
-  async (current, previous) => {
-    const oldSelection = previous || [];
-    if (current === oldSelection) {
-      return;
-    }
-    const { added, removed } = compareSelections(current, previous);
-    const updates = [
-      ...added.map((id) => dataStyleStore.setVisibility(id, true)),
-      ...removed.map((id) => dataStyleStore.setVisibility(id, false)),
-    ];
-    await Promise.all(updates);
-    hybridViewerStore.remoteRender();
-  },
-);
-
-function isModel(item) {
-  return item.viewer_type === "model";
-}
-
-onMounted(() => {
-  const savedSelection = treeviewStore.selection;
-  if (savedSelection && savedSelection.length > 0) {
-    treeviewStore.selection = savedSelection;
-  }
-});
-</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="processedItems"
-    :search="search"
-    :custom-filter="customFilter"
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="classic"
-    selectable
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        @contextmenu.prevent.stop="
-          isLeafNode(item) ? emit('show-menu', { event: $event, itemId: item.id }) : null
-        "
-      >
-        {{ item.title }}
-      </span>
-    </template>
-
-    <template #append="{ item }">
-      <v-btn
-        v-if="isModel(item)"
-        icon="mdi-magnify-expand"
-        size="medium"
-        class="ml-8"
-        variant="text"
-        v-tooltip="'Model\'s mesh components'"
-        @click.stop="treeviewStore.displayAdditionalTree(item.id)"
-      />
-    </template>
-  </v-treeview>
-</template>
-
-<style scoped>
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-
-.treeview-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-}
-</style>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index bb4869e2..407ce084 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,6 +1,6 @@
 <script setup>
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
-import ViewerTreeObjectTree from "@ogw_front/components/Viewer/Tree/ObjectTree";
+import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useMenuStore } from "@ogw_front/stores/menu";
@@ -44,7 +44,7 @@ defineExpose({ get_viewer_id });
 </script>
 
 <template>
-  <ViewerTreeObjectTree @show-menu="(args) => emit('show-menu', args)" />
+  <ViewerObjectTreeLayout @show-menu="(args) => emit('show-menu', args)" />
   <ViewerContextMenu
     v-if="displayMenu"
     :id="menuStore.current_id"
diff --git a/app/composables/use_tree_filter.js b/app/composables/use_tree_filter.js
new file mode 100644
index 00000000..ab62e2d4
--- /dev/null
+++ b/app/composables/use_tree_filter.js
@@ -0,0 +1,77 @@
+function customFilter(value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  const title = (item.raw.title || "").toLowerCase();
+  const idValue = String(value || "").toLowerCase();
+  return title.includes(query) || idValue.includes(query);
+}
+
+function sortAndFormatItems(items, sortType) {
+  const field = sortType === "name" ? "title" : "id";
+  return items.map((category) => {
+    const children = (category.children || []).toSorted((itemA, itemB) => {
+      const valueA = itemA[field] || "";
+      const valueB = itemB[field] || "";
+      return valueA.localeCompare(valueB, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      });
+    });
+    return {
+      ...category,
+      id: category.id,
+      title: category.title || category.id,
+      children,
+    };
+  });
+}
+
+function useTreeFilter(rawItems, options = {}) {
+  const search = ref("");
+  const sortType = ref(options.defaultSort || "name");
+  const filterOptions = ref(options.defaultFilters || {});
+
+  const availableFilterOptions = computed(() =>
+    rawItems.value.map((category) => category.title || category.id),
+  );
+
+  watch(
+    availableFilterOptions,
+    (newOptions) => {
+      for (const option of newOptions) {
+        if (filterOptions.value[option] === undefined) {
+          filterOptions.value[option] = true;
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  const processedItems = computed(() =>
+    sortAndFormatItems(
+      rawItems.value.filter((category) => {
+        const key = category.title || category.id;
+        return filterOptions.value[key] !== false;
+      }),
+      sortType.value,
+    ),
+  );
+
+  function toggleSort() {
+    sortType.value = sortType.value === "name" ? "id" : "name";
+  }
+
+  return {
+    search,
+    sortType,
+    filterOptions,
+    processedItems,
+    availableFilterOptions,
+    toggleSort,
+    customFilter,
+  };
+}
+
+export { customFilter, useTreeFilter };
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 5fb9c661..3f681ab2 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,100 +1,153 @@
-export const useTreeviewStore = defineStore("treeview", () => {
-  const PANEL_WIDTH = 300;
+import { defineStore } from "pinia";
+
+import { ref, toRaw, watch } from "vue";
+import { database } from "@ogw_internal/database/database";
+const PANEL_WIDTH = 300;
 
+export const useTreeviewStore = defineStore("treeview", () => {
   const items = ref([]);
   const selection = ref([]);
-  const components_selection = ref([]);
-  const isAdditionnalTreeDisplayed = ref(false);
+  const opened_views = ref([
+    { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+  ]);
   const panelWidth = ref(PANEL_WIDTH);
-  const model_id = ref("");
-  const isTreeCollection = ref(false);
-  const selectedTree = ref(undefined);
+  const additionalPanelWidth = ref(PANEL_WIDTH);
   const isImporting = ref(false);
   const pendingSelectionIds = ref([]);
+  const rowHeights = ref([]);
 
-  // /** Functions **/
-  function addItem(geode_object_type, name, id, viewer_type) {
-    const child = { title: name, id, viewer_type };
-
-    for (let i = 0; i < items.value.length; i += 1) {
-      if (items.value[i].title === geode_object_type) {
-        items.value[i].children.push(child);
-        items.value[i].children.sort((element1, element2) =>
-          element1.title.localeCompare(element2.title, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          }),
-        );
-        selection.value.push(id);
-        return;
+  async function loadConfig() {
+    try {
+      const config = await database.treeview_config.get("main");
+      if (config?.opened_views) {
+        opened_views.value = config.opened_views;
       }
+      if (config?.panelWidth) {
+        panelWidth.value = config.panelWidth;
+      }
+      if (config?.additionalPanelWidth) {
+        additionalPanelWidth.value = config.additionalPanelWidth;
+      }
+      if (config?.selectionIds) {
+        selection.value = config.selectionIds;
+      }
+      if (config?.rowHeights) {
+        rowHeights.value = config.rowHeights;
+      }
+    } catch (error) {
+      console.error("Failed to load treeview config:", error);
     }
-    items.value.push({ title: geode_object_type, children: [child] });
-    items.value.sort((element1, element2) =>
-      element1.title.localeCompare(element2.title, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-    );
-    selection.value.push(id);
   }
-
-  function displayAdditionalTree(id) {
-    isAdditionnalTreeDisplayed.value = true;
-    model_id.value = id;
+  loadConfig();
+
+  watch(
+    [opened_views, panelWidth, additionalPanelWidth, selection, rowHeights],
+    () => {
+      database.treeview_config.put({
+        id: "main",
+        opened_views: toRaw(opened_views.value),
+        panelWidth: panelWidth.value,
+        additionalPanelWidth: additionalPanelWidth.value,
+        selectionIds: toRaw(selection.value),
+        rowHeights: toRaw(rowHeights.value),
+      });
+    },
+    { deep: true },
+  );
+
+  function closeView(index) {
+    if (index > 0) {
+      opened_views.value.splice(index, 1);
+    }
   }
 
-  function displayFileTree() {
-    isAdditionnalTreeDisplayed.value = false;
+  function addItem(geodeObjectType, name, id, viewer_type) {
+    const child = { title: name, id, viewer_type, geode_object_type: geodeObjectType };
+    let found = false;
+    for (const item of items.value) {
+      if (item.title === geodeObjectType) {
+        item.children.push(child);
+        const opt = { numeric: true, sensitivity: "base" };
+        item.children.sort((childA, childB) =>
+          childA.title.localeCompare(childB.title, undefined, opt),
+        );
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
+      const sortOpt = { numeric: true, sensitivity: "base" };
+      items.value.sort((groupA, groupB) =>
+        groupA.title.localeCompare(groupB.title, undefined, sortOpt),
+      );
+    }
+    selection.value.push(id);
   }
 
-  function toggleTreeView() {
-    isTreeCollection.value = !isTreeCollection.value;
-    console.log("Switched to", isTreeCollection.value ? "TreeCollection" : "TreeComponent");
+  function removeItem(id) {
+    for (let index = 0; index < items.value.length; index += 1) {
+      const group = items.value[index];
+      const childIndex = group.children.findIndex((child) => child.id === id);
+      if (childIndex !== -1) {
+        group.children.splice(childIndex, 1);
+        if (group.children.length === 0) {
+          items.value.splice(index, 1);
+        }
+        const selectionIndex = selection.value.indexOf(id);
+        if (selectionIndex !== -1) {
+          selection.value.splice(selectionIndex, 1);
+        }
+        return;
+      }
+    }
   }
 
-  function setPanelWidth(width) {
-    panelWidth.value = width;
+  function displayAdditionalTree(id, title, geodeObjectType) {
+    const index = opened_views.value.findIndex((view) => view.id === id);
+    if (index !== -1) {
+      return closeView(index);
+    }
+    additionalPanelWidth.value = panelWidth.value;
+    opened_views.value.push({
+      type: "component",
+      id,
+      title: title || id,
+      geode_object_type: geodeObjectType,
+      scrollTop: 0,
+      opened: [],
+    });
   }
 
-  function exportStores() {
-    const selectionIds = selection.value.map((store) => store.id);
-    return {
-      isAdditionnalTreeDisplayed: isAdditionnalTreeDisplayed.value,
-      panelWidth: panelWidth.value,
-      model_id: model_id.value,
-      isTreeCollection: isTreeCollection.value,
-      selectedTree: selectedTree.value,
-      selectionIds,
-    };
+  function moveView(fromIdx, toIdx) {
+    if (fromIdx !== 0 && toIdx !== 0) {
+      const [element] = opened_views.value.splice(fromIdx, 1);
+      opened_views.value.splice(toIdx, 0, element);
+    }
   }
 
   function importStores(snapshot) {
-    isAdditionnalTreeDisplayed.value = snapshot?.isAdditionnalTreeDisplayed || false;
+    opened_views.value = snapshot?.opened_views || [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
-    model_id.value = snapshot?.model_id || "";
-    isTreeCollection.value = snapshot?.isTreeCollection || false;
-    selectedTree.value = snapshot?.selectedTree || undefined;
-
+    additionalPanelWidth.value = snapshot?.additionalPanelWidth || PANEL_WIDTH;
+    rowHeights.value = snapshot?.rowHeights || [];
     pendingSelectionIds.value =
-      snapshot?.selectionIds || (snapshot?.selection || []).map((store) => store.id) || [];
+      snapshot?.selectionIds ||
+      (snapshot?.selection || []).map((selectionItem) => selectionItem.id || selectionItem) ||
+      [];
   }
 
   function finalizeImportSelection() {
-    const ids = pendingSelectionIds.value || [];
     const rebuilt = [];
-    if (ids.length === 0) {
-      for (const group of items.value) {
-        for (const child of group.children) {
-          rebuilt.push(child);
-        }
-      }
-    } else {
-      for (const group of items.value) {
-        for (const child of group.children) {
-          if (ids.includes(child.id)) {
-            rebuilt.push(child);
-          }
+    for (const group of items.value) {
+      for (const child of group.children) {
+        if (
+          pendingSelectionIds.value.length === 0 ||
+          pendingSelectionIds.value.includes(child.id)
+        ) {
+          rebuilt.push(child.id || child);
         }
       }
     }
@@ -102,54 +155,78 @@ export const useTreeviewStore = defineStore("treeview", () => {
     pendingSelectionIds.value = [];
   }
 
-  function removeItem(id) {
-    for (let i = 0; i < items.value.length; i += 1) {
-      const group = items.value[i];
-      const childIndex = group.children.findIndex((child) => child.id === id);
+  function clear() {
+    items.value = [];
+    selection.value = [];
+    pendingSelectionIds.value = [];
+    opened_views.value = [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
+  }
 
-      if (childIndex !== -1) {
-        group.children.splice(childIndex, 1);
+  function displayFileTree() {
+    opened_views.value = [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
+  }
 
-        if (group.children.length === 0) {
-          items.value.splice(i, 1);
-        }
+  function setPanelWidth(width) {
+    panelWidth.value = width;
+  }
 
-        const selectionIndex = selection.value.findIndex((item) => item.id === id);
-        if (selectionIndex !== -1) {
-          selection.value.splice(selectionIndex, 1);
-        }
+  function setAdditionalPanelWidth(width) {
+    additionalPanelWidth.value = width;
+  }
 
-        return;
-      }
+  function setScrollTop(viewId, scrollTop) {
+    const view = opened_views.value.find((openedView) => openedView.id === viewId);
+    if (view) {
+      view.scrollTop = scrollTop;
     }
   }
 
-  function clear() {
-    items.value = [];
-    selection.value = [];
-    components_selection.value = [];
-    pendingSelectionIds.value = [];
-    model_id.value = "";
-    selectedTree.value = undefined;
+  function setOpened(viewId, opened) {
+    const view = opened_views.value.find((openedView) => openedView.id === viewId);
+    if (view) {
+      view.opened = opened;
+    }
+  }
+
+  function setRowHeights(heights) {
+    rowHeights.value = heights;
+  }
+
+  function exportStores() {
+    return {
+      opened_views: opened_views.value,
+      panelWidth: panelWidth.value,
+      additionalPanelWidth: additionalPanelWidth.value,
+      selectionIds: selection.value,
+      rowHeights: rowHeights.value,
+    };
   }
 
   return {
     items,
     selection,
-    components_selection,
-    isAdditionnalTreeDisplayed,
+    opened_views,
     panelWidth,
-    model_id,
-    selectedTree,
+    additionalPanelWidth,
     isImporting,
+    rowHeights,
     addItem,
     removeItem,
     displayAdditionalTree,
+    closeView,
+    moveView,
+    importStores,
     displayFileTree,
-    toggleTreeView,
     setPanelWidth,
+    setAdditionalPanelWidth,
+    setScrollTop,
+    setOpened,
+    setRowHeights,
     exportStores,
-    importStores,
     finalizeImportSelection,
     clear,
   };
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index c541657c..4f5c1793 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -13,6 +13,7 @@ export class BaseDatabase extends Dexie {
       [dataStyleTable.name]: dataStyleTable.schema,
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+      treeview_config: "id",
     };
   }