diff --git a/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue b/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
index 6d246ac3a..4a1e57099 100644
--- a/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
+++ b/apps/frontend/app/components/common/ActivityOptions/ActivityMenu.vue
@@ -1,15 +1,21 @@
 <template>
-  <div>
-    <VMenu location="left" offset="-40" width="240" contained>
+  <span>
+    <VMenu
+      v-model="isOpen"
+      location="left"
+      offset="-40"
+      width="240"
+      contained
+    >
       <template #activator="{ props: menuProps }">
         <VBtn
           v-bind="menuProps"
           aria-label="Options menu"
           color="primary-lighten-3"
           icon="mdi-dots-vertical"
-          size="small"
           variant="text"
-          rounded
+          :size="activatorSize"
+          :rounded="rounded"
         >
         </VBtn>
       </template>
@@ -45,13 +51,13 @@
       :repository-id="activity.repositoryId"
       @close="showCopyDialog = false"
     />
-  </div>
+  </span>
 </template>
 
 <script lang="ts" setup>
 import { first, sortBy } from 'lodash-es';
-import type { Activity } from '@tailor-cms/interfaces/activity';
 import { InsertLocation } from '@tailor-cms/utils';
+import type { StoreActivity } from '@/stores/activity';
 
 import CopyDialog from '@/components/repository/Outline/CopyActivity/index.vue';
 import CreateDialog from '@/components/repository/Outline/CreateDialog/index.vue';
@@ -62,11 +68,22 @@ const { AddAfter, AddBefore, AddInto } = InsertLocation;
 const activityStore = useActivityStore();
 const currentRepositoryStore = useCurrentRepository();
 
-const props = defineProps<{ activity: StoreActivity }>();
+export interface Props {
+  activity: StoreActivity;
+  activatorSize?: string;
+  rounded?: boolean | string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activatorSize: 'small',
+  rounded: 'circle',
+});
 
 const { $eventBus, $pluginRegistry } = useNuxtApp() as any;
 const selectedActivity = useSelectedActivity(props.activity);
 
+const isOpen = defineModel<boolean>({ default: false });
+
 // Get processed name via plugin hooks
 const activityName = computed(() => {
   const data = props.activity?.data;
diff --git a/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue b/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
index 074c98248..2e4bec8ac 100644
--- a/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
+++ b/apps/frontend/app/components/editor/Sidebar/ActivityNavigation.vue
@@ -26,7 +26,7 @@ import type { Activity } from '@tailor-cms/interfaces/activity';
 import { activity as activityUtils } from '@tailor-cms/utils';
 import type { Repository } from '@tailor-cms/interfaces/repository';
 import { sortBy } from 'lodash-es';
-import { TailorTreeview } from '@tailor-cms/core-components';
+import TailorTreeview from './TailorTreeview/index.vue';
 
 const { $schemaService, $pluginRegistry } = useNuxtApp() as any;
 
@@ -47,6 +47,7 @@ const getActivityName = (activity: Activity) => {
 
 const attachActivityAttrs = (activity: Activity) => ({
   id: activity.id,
+  uid: activity.uid,
   title: getActivityName(activity),
   isEditable: !!$schemaService.isEditable(activity.type),
   isGroup: !!$schemaService.getLevel(activity.type)?.subLevels?.length,
@@ -146,10 +147,6 @@ const navigateToActivity = (activityId: number) => {
 }
 
 :deep(.v-list-item) {
-  .v-list-item__append {
-    visibility: hidden;
-  }
-
   &:hover {
     .v-list-item-title {
       font-weight: 600 !important;
diff --git a/packages/core-components/src/components/TailorTreeview/ItemGroup.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
similarity index 53%
rename from packages/core-components/src/components/TailorTreeview/ItemGroup.vue
rename to apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
index 4cd07c23f..2eef1915d 100644
--- a/packages/core-components/src/components/TailorTreeview/ItemGroup.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ItemGroup.vue
@@ -8,28 +8,47 @@
         @edit="emit('edit', $event)"
       />
     </template>
-    <ItemGroup
-      v-for="subItem in item.children"
-      :key="subItem.id"
-      :active-item-id="activeItemId"
-      :item="subItem"
-      @edit="emit('edit', $event)"
-    />
+    <Draggable
+      :data-parent-id="item.id"
+      :list="item.children"
+      :move="repositoryStore.isValidDrop"
+      animation="150"
+      group="activities"
+      item-key="uid"
+      @update="(data: SortableEvent) => reorder(data, item.children)"
+      @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e, item.id)"
+    >
+      <template #item="{ element }">
+        <ItemGroup
+          :active-item-id="activeItemId"
+          :item="element"
+          @edit="emit('edit', $event)"
+        />
+      </template>
+    </Draggable>
   </VListGroup>
   <ListItem v-else v-bind="bindings" @edit="emit('edit', $event)" />
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import Draggable from 'vuedraggable';
 
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import ItemGroup from './ItemGroup.vue';
 import ListItem from './ListItem.vue';
+import { useCurrentRepository } from '@/stores/current-repository';
 
 const props = defineProps<{
   item: any;
   activeItemId: number;
 }>();
 
+const emit = defineEmits(['edit']);
+
+const repositoryStore = useCurrentRepository();
+const reorder = useOutlineReorder();
+
 const bindings = computed(() => {
   const { id, isEditable, title } = props.item;
   return {
@@ -39,8 +58,6 @@ const bindings = computed(() => {
     isActive: props.activeItemId === id,
   };
 });
-
-const emit = defineEmits(['edit']);
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
new file mode 100644
index 000000000..5ef391cd2
--- /dev/null
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/ListItem.vue
@@ -0,0 +1,104 @@
+<template>
+  <VExpandTransition>
+    <VListItem
+      ref="listItem"
+      v-bind="omit(activatorProps, 'onClick')"
+      :class="{ 'list-item-active': isActive }"
+      :title="title"
+      class="list-item"
+      @click.prevent="onItemClick"
+    >
+      <template #prepend>
+        <VBtn
+          v-if="isGroup"
+          :color="prependColor"
+          :icon="prependIcon"
+          class="ml-n1 mr-2"
+          density="comfortable"
+          variant="text"
+          @click.stop="activatorProps?.onClick"
+        />
+      </template>
+      <template #title>
+        <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
+      </template>
+      <template #append>
+        <ActivityMenu
+          v-show="isHovered || isMenuOpen"
+          v-model="isMenuOpen"
+          :activity="activity"
+          activator-size="x-small"
+          class="activity-menu ml-2"
+          @click.stop
+        />
+      </template>
+    </VListItem>
+  </VExpandTransition>
+</template>
+
+<script lang="ts" setup>
+import { computed, useTemplateRef } from 'vue';
+import { omit } from 'lodash-es';
+import { useElementHover } from '@vueuse/core';
+import type { Activity } from '@tailor-cms/interfaces/activity';
+
+import ActivityMenu from '~/components/common/ActivityOptions/ActivityMenu.vue';
+
+const props = defineProps<{
+  id: number;
+  title: string;
+  isGroup?: boolean;
+  isEmpty?: boolean;
+  isEditable?: boolean;
+  isOpen?: boolean;
+  isActive?: boolean;
+  activatorProps?: Record<string, any>;
+}>();
+
+const emit = defineEmits(['edit']);
+
+const activityStore = useActivityStore();
+
+const listItem = useTemplateRef<HTMLButtonElement>('listItem');
+const isHovered = useElementHover(listItem);
+const isMenuOpen = ref(false);
+
+const activity = activityStore.findById(props.id) as Activity;
+
+const prependIcon = computed(() => {
+  if (!props.isGroup) return '';
+  const icon = props.isOpen ? 'mdi-folder-open' : 'mdi-folder';
+  return props.isEmpty ? `${icon}-outline` : icon;
+});
+
+const prependColor = computed(() => {
+  return props.isOpen ? 'primary-lighten-3' : 'primary-lighten-2';
+});
+
+const onItemClick = (e: any) => {
+  if (!props.isEditable) return props.activatorProps?.onClick(e);
+  emit('edit', props.id);
+};
+</script>
+
+<style lang="scss" scoped>
+.list-item {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.activity-menu {
+  :deep(.v-list-item-title),
+  :deep(.v-list-item-title:hover) {
+    color: rgb(var(--v-theme-primary-darken-3)) !important;
+    font-weight: 400 !important;
+  }
+}
+
+.v-list-item:hover .activity-menu :deep(.v-list-item__content) .v-list-item-title {
+  font-weight: 400 !important;
+}
+</style>
diff --git a/packages/core-components/src/components/TailorTreeview/index.vue b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
similarity index 76%
rename from packages/core-components/src/components/TailorTreeview/index.vue
rename to apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
index d81837559..18d5fa669 100644
--- a/packages/core-components/src/components/TailorTreeview/index.vue
+++ b/apps/frontend/app/components/editor/Sidebar/TailorTreeview/index.vue
@@ -15,13 +15,24 @@
     </VBtn>
   </div>
   <VList v-model:opened="expanded" slim>
-    <ItemGroup
-      v-for="item in processedItems"
-      :key="item.id"
-      :active-item-id="activeItemId"
-      :item="item"
-      @edit="emit('edit', $event)"
-    />
+    <Draggable
+      :list="processedItems"
+      :disabled="!!search"
+      :move="repositoryStore.isValidDrop"
+      animation="150"
+      group="activities"
+      item-key="uid"
+      @update="(data: SortableEvent) => reorder(data, processedItems)"
+      @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e)"
+    >
+      <template #item="{ element }">
+        <ItemGroup
+          :active-item-id="activeItemId"
+          :item="element"
+          @edit="emit('edit', $event)"
+        />
+      </template>
+    </Draggable>
   </VList>
   <VAlert
     v-if="search && !hasItems"
@@ -36,8 +47,14 @@
 <script setup lang="ts">
 import { cloneDeep, uniq } from 'lodash-es';
 import { computed, ref, watch } from 'vue';
+import Draggable from 'vuedraggable';
 
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import ItemGroup from './ItemGroup.vue';
+import { useCurrentRepository } from '@/stores/current-repository';
+
+const repositoryStore = useCurrentRepository();
+const reorder = useOutlineReorder();
 
 const props = defineProps<{
   items: any[];
@@ -122,3 +139,9 @@ watch(
   { deep: true },
 );
 </script>
+
+<style lang="scss" scoped>
+:deep(.sortable-ghost) {
+  opacity: 0.6;
+}
+</style>
diff --git a/apps/frontend/app/components/repository/Outline/OutlineItem.vue b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
index 9ccdbe7eb..1a093be68 100644
--- a/apps/frontend/app/components/repository/Outline/OutlineItem.vue
+++ b/apps/frontend/app/components/repository/Outline/OutlineItem.vue
@@ -56,7 +56,7 @@
                 </template>
                 <span>{{ isExpanded ? 'Collapse' : 'Expand' }}</span>
               </VTooltip>
-              <OptionsMenu :activity="activity" class="options-menu" />
+              <OptionsMenu :activity="activity" class="options-menu" rounded />
             </div>
           </template>
           <template v-else>
@@ -81,21 +81,23 @@
         </VSheet>
       </template>
     </VHover>
-    <div v-if="!isSoftDeleted && isExpanded && hasChildren">
+    <div v-if="!isSoftDeleted && isExpanded && hasSubtypes">
       <Draggable
         v-bind="{ handle: '.activity' }"
+        :data-parent-id="activity.id"
         :list="children"
+        :move="currentRepositoryStore.isValidDrop"
+        animation="150"
         group="activities"
         item-key="uid"
-        @update="(data) => reorder(data, children)"
-        @change="(e) => currentRepositoryStore.handleOutlineItemDrag(e, activity.id)"
+        @update="(data: SortableEvent) => reorder(data, children)"
+        @change="(e: ChangeEvent) => onOutlineItemDrop(e, activity.id)"
       >
         <template #item="{ element, index: i }">
           <OutlineItem
             :activities="activities"
             :activity="element"
             :index="i + 1"
-            class="sub-activity"
           />
         </template>
       </Draggable>
@@ -107,18 +109,20 @@
 import { activity as activityUtils } from '@tailor-cms/utils';
 import Draggable from 'vuedraggable';
 import { size } from 'lodash-es';
+import { useDisplay } from 'vuetify';
 
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import ActivityName from '@/components/common/ActivityName.vue';
 import OptionsMenu from '@/components/common/ActivityOptions/ActivityMenu.vue';
 import OutlineItem from '@/components/repository/Outline/OutlineItem.vue';
 import OutlineItemToolbar from '@/components/common/ActivityOptions/ActivityToolbar.vue';
 import type { StoreActivity } from '@/stores/activity';
-import { useDisplay } from 'vuetify';
 
 const { smAndUp } = useDisplay();
 const currentRepositoryStore = useCurrentRepository();
 
 const { taxonomy } = storeToRefs(currentRepositoryStore);
+const { onOutlineItemDrop } = currentRepositoryStore;
 
 interface Props {
   activity: StoreActivity;
@@ -230,7 +234,7 @@ $background-color: rgb(var(--v-theme-primary-darken-2));
   }
 }
 
-.sub-activity {
+.activity-wrapper .activity-wrapper {
   margin-left: 1.25rem;
 }
 </style>
diff --git a/apps/frontend/app/composables/useOutlineReorder.ts b/apps/frontend/app/composables/useOutlineReorder.ts
index 8dc521026..9b1fe4b8e 100644
--- a/apps/frontend/app/composables/useOutlineReorder.ts
+++ b/apps/frontend/app/composables/useOutlineReorder.ts
@@ -1,10 +1,12 @@
+import type { SortableEvent } from '@/types/draggable';
 import { useActivityStore } from '@/stores/activity';
 
 export const useOutlineReorder =
   () =>
-    ({ newIndex: newPosition }: { newIndex: number }, items: any[]) => {
+    ({ newIndex }: SortableEvent, items: any[]) => {
+      if (newIndex === undefined) return;
       const activityStore = useActivityStore();
-      const activity = items[newPosition];
-      const context = { items, newPosition };
+      const activity = items[newIndex];
+      const context = { items, newPosition: newIndex };
       return activityStore.reorder(activity, context);
     };
diff --git a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
index e667a5aee..13e975651 100644
--- a/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
+++ b/apps/frontend/app/pages/repository/[[id]]/root/structure.vue
@@ -17,11 +17,13 @@
           <Draggable
             v-bind="{ handle: '.activity' }"
             :list="rootActivities"
+            :move="repositoryStore.isValidDrop"
             class="mt-5"
+            animation="150"
             group="activities"
             item-key="uid"
-            @update="(data) => reorder(data, rootActivities)"
-            @change="(e) => repositoryStore.handleOutlineItemDrag(e)"
+            @update="(data: SortableEvent) => reorder(data, rootActivities)"
+            @change="(e: ChangeEvent) => repositoryStore.onOutlineItemDrop(e)"
           >
             <template #item="{ element, index }">
               <OutlineItem
@@ -67,6 +69,7 @@ import { filter, find, map } from 'lodash-es';
 import Draggable from 'vuedraggable';
 import { storeToRefs } from 'pinia';
 
+import type { ChangeEvent, SortableEvent } from '@/types/draggable';
 import BrokenReferencesAlert from '@/components/common/BrokenReferencesAlert.vue';
 import OutlineFooter from '@/components/repository/Outline/OutlineFooter.vue';
 import OutlineItem from '@/components/repository/Outline/OutlineItem.vue';
@@ -135,14 +138,14 @@ onMounted(() => {
   if (activityId) {
     repositoryStore.selectActivity(parseInt(activityId as string, 10));
   } else if (rootActivities.value.length) {
-    repositoryStore.selectActivity(rootActivities.value[0].id);
+    repositoryStore.selectActivity(rootActivities.value[0]!.id);
   } else {
     // If there are no activities
     return;
   }
   const isFirstActivitySelected =
     selectedActivity.value &&
-    rootActivities.value[0].id === selectedActivity.value.id;
+    rootActivities.value[0]!.id === selectedActivity.value.id;
   if (!isFirstActivitySelected) {
     scrollToActivity(selectedActivity.value as StoreActivity, 200);
   }
@@ -150,6 +153,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.sortable-ghost) {
+  opacity: 0.6;
+}
+
 .structure-page {
   height: 100%;
 }
diff --git a/apps/frontend/app/stores/activity.ts b/apps/frontend/app/stores/activity.ts
index 8b211893e..7e9695f09 100644
--- a/apps/frontend/app/stores/activity.ts
+++ b/apps/frontend/app/stores/activity.ts
@@ -120,13 +120,16 @@ export const useActivityStore = defineStore('activities', () => {
     // Await SSE event for store removal
   }
 
-  const reorder = async (reorderdActivity: StoreActivity, context: any) => {
-    const activity = findById(reorderdActivity.uid);
+  const reorder = async (
+    reorderedActivity: StoreActivity,
+    context: { items: any[]; newPosition: number },
+  ) => {
+    const activity = findById(reorderedActivity.uid);
     if (!activity) return;
-    const position = calculatePosition(context) as number;
-    activity.position = position;
-    const payload = { position: context.newPosition };
-    const data = await api.reorder(activity.repositoryId, activity.id, payload);
+    activity.position = calculatePosition(context) as number;
+    const data = await api.reorder(activity.repositoryId, activity.id, {
+      position: context.newPosition,
+    });
     Object.assign(activity, data);
   };
 
diff --git a/apps/frontend/app/stores/current-repository.ts b/apps/frontend/app/stores/current-repository.ts
index 943e67c1f..3b0f12215 100644
--- a/apps/frontend/app/stores/current-repository.ts
+++ b/apps/frontend/app/stores/current-repository.ts
@@ -7,6 +7,8 @@ import { calculatePosition, InsertLocation } from '@tailor-cms/utils';
 import { useActivityStore } from './activity';
 import { useRepositoryStore } from './repository';
 import { repository as repositoryApi } from '@/api';
+import type { ChangeEvent, MoveEvent } from '@/types/draggable';
+import type { Activity } from '@tailor-cms/interfaces/activity';
 
 const { getOutlineLevels, getSchema } = schemaConfig;
 const { getWorkflow } = workflowConfig;
@@ -144,29 +146,34 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     isSidebarOpen.value = value;
   };
 
-  // Used for drag & drop of outline activities
-  const handleOutlineItemDrag = async (
-    context: any = {},
+  const isValidDrop = (
+    { to, from, draggedContext }: MoveEvent<Activity>,
+  ): boolean => {
+    const elementType = draggedContext?.element?.type;
+    if (!elementType) return false;
+    // Allow reordering within the same list
+    if (from === to) return true;
+    const targetParentId = to?.dataset?.parentId
+      ? parseInt(to.dataset.parentId, 10)
+      : null;
+
+    const config = taxonomy.value?.find((it) => it.type === elementType);
+    if (!config) return false;
+
+    if (targetParentId === null) return config.rootLevel ?? false;
+
+    const parent = Activity.findById(targetParentId);
+    if (!parent) return false;
+    const parentConfig = taxonomy.value?.find((it) => it.type === parent.type);
+    return parentConfig?.subLevels?.includes(elementType) ?? false;
+  };
+
+  const onOutlineItemDrop = async (
+    context: ChangeEvent<Activity> = {},
     parentId: number | null = null,
   ) => {
     const { added } = context;
     if (!added?.element?.id) return;
-    const { element } = added;
-    const config = taxonomy.value?.find((it: any) => it.type === element.type);
-    if (!config) return;
-    // Check if the element can be moved to the new parent
-    // type must be in the subLevels of the parent type
-    if (parentId) {
-      const parent = Activity.findById(parentId);
-      if (!parent) return;
-      const parentConfig = taxonomy.value?.find(
-        (it: any) => it.type === parent.type,
-      );
-      if (!parentConfig?.subLevels?.includes(element.type)) return;
-    } else if (!config.rootLevel) {
-      // If parentId is null, the element must be a root level
-      return;
-    }
     const children = schemaConfig.getOutlineChildren(Activity.items, parentId);
     const position = calculatePosition({
       items: children,
@@ -249,7 +256,8 @@ export const useCurrentRepository = defineStore('currentRepository', () => {
     toggleOutlineItemExpand,
     toggleOutlineExpand,
     expandOutlineParents,
-    handleOutlineItemDrag,
+    isValidDrop,
+    onOutlineItemDrop,
     isSidebarOpen,
     updateSidebar,
     getUsers,
diff --git a/apps/frontend/app/types/draggable.ts b/apps/frontend/app/types/draggable.ts
new file mode 100644
index 000000000..243d5ef95
--- /dev/null
+++ b/apps/frontend/app/types/draggable.ts
@@ -0,0 +1,28 @@
+import type {
+  MoveEvent as SortableMoveEvent,
+  SortableEvent,
+} from 'sortablejs';
+
+export type { SortableEvent };
+
+export interface DragContext<T> {
+  index: number;
+  element: T;
+  futureIndex?: number;
+}
+
+export interface RelatedContext<T> extends DragContext<T> {
+  list: T[];
+  component: any;
+}
+
+export interface MoveEvent<T = any> extends SortableMoveEvent {
+  draggedContext: DragContext<T>;
+  relatedContext: RelatedContext<T>;
+}
+
+export interface ChangeEvent<T = any> {
+  added?: { newIndex: number; element: T };
+  removed?: { oldIndex: number; element: T };
+  moved?: { newIndex: number; oldIndex: number; element: T };
+}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 6891475cd..4b0387e97 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -36,6 +36,7 @@
     "@tailor-cms/meta-element-collection": "workspace:^",
     "@tailor-cms/plugin-collection": "workspace:^",
     "@tailor-cms/utils": "workspace:*",
+    "@types/sortablejs": "^1.15.9",
     "@vee-validate/i18n": "^4.15.1",
     "@vee-validate/rules": "^4.15.1",
     "@vueuse/core": "^14.0.0",
diff --git a/packages/core-components/src/components/TailorTreeview/ListItem.vue b/packages/core-components/src/components/TailorTreeview/ListItem.vue
deleted file mode 100644
index 0f6edc66a..000000000
--- a/packages/core-components/src/components/TailorTreeview/ListItem.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <VListItem
-    v-bind="omit(activatorProps, 'onClick')"
-    :class="{
-      'list-item-active': isActive,
-      'readonly': !isEditable,
-    }"
-    :title="title"
-    class="list-item"
-    @click.prevent="onItemClick"
-  >
-    <template #prepend>
-      <VBtn
-        v-if="isGroup"
-        :color="prependColor"
-        :icon="prependIcon"
-        class="ml-n1 mr-2"
-        density="comfortable"
-        variant="text"
-        @click="activatorProps?.onClick"
-      />
-    </template>
-    <template #title>
-      <span :class="{ 'font-weight-bold': isActive }">{{ title }}</span>
-    </template>
-    <template #append>
-      <VIcon v-if="isEditable" color="secondary-lighten-4">
-        mdi-page-next-outline
-      </VIcon>
-    </template>
-  </VListItem>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { omit } from 'lodash-es';
-
-const props = defineProps<{
-  id: number;
-  title: string;
-  isGroup?: boolean;
-  isEmpty?: boolean;
-  isEditable?: boolean;
-  isOpen?: boolean;
-  isActive?: boolean;
-  activatorProps?: Record<string, any>;
-}>();
-
-const emit = defineEmits(['edit']);
-
-const prependIcon = computed(() => {
-  if (!props.isGroup) return '';
-  const icon = props.isOpen ? 'mdi-folder-open' : 'mdi-folder';
-  return props.isEmpty ? `${icon}-outline` : icon;
-});
-
-const prependColor = computed(() => {
-  return props.isOpen ? 'primary-lighten-3' : 'primary-lighten-2';
-});
-
-const onItemClick = () => {
-  if (!props.isEditable) return;
-  emit('edit', props.id);
-};
-</script>
-
-<style scoped lang="scss">
-.list-item :deep(.v-list-item__append) {
-  i {
-    opacity: 1 !important;
-  }
-}
-
-.list-item.readonly {
-  pointer-events: none;
-
-  .v-btn {
-    pointer-events: auto;
-  }
-}
-
-.list-item-active {
-  color: #f9c2d5;
-}
-</style>
diff --git a/packages/core-components/src/index.ts b/packages/core-components/src/index.ts
index 4e2eb5e88..4b694eb99 100644
--- a/packages/core-components/src/index.ts
+++ b/packages/core-components/src/index.ts
@@ -5,7 +5,6 @@ export { default as Discussion } from './components/Discussion/index.vue';
 export { default as ElementList } from './components/ElementList.vue';
 export { default as AddElement } from './components/AddElement/index.vue';
 export { default as InlineActivator } from './components/AddElement/InlineActivator.vue';
-export { default as TailorTreeview } from './components/TailorTreeview/index.vue';
 export { default as UserAvatar } from './components/UserAvatar.vue';
 export { default as ActiveUsers } from './components/ActiveUsers.vue';
 export { default as SelectElement } from './components/SelectElement/index.vue';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b80f087bd..357f91b3a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -409,6 +409,9 @@ importers:
       '@tailor-cms/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@types/sortablejs':
+        specifier: ^1.15.9
+        version: 1.15.9
       '@vee-validate/i18n':
         specifier: ^4.15.1
         version: 4.15.1
@@ -5116,6 +5119,9 @@ packages:
   '@types/shimmer@1.2.0':
     resolution: {integrity: sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==}
 
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
   '@types/tmp@0.2.6':
     resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==}
 
@@ -16743,6 +16749,8 @@ snapshots:
 
   '@types/shimmer@1.2.0': {}
 
+  '@types/sortablejs@1.15.9': {}
+
   '@types/tmp@0.2.6': {}
 
   '@types/tough-cookie@4.0.5': {}