diff --git a/packages/frontend/src/components/drag&drop-item.tsx b/packages/frontend/src/components/drag&drop-item.tsx
deleted file mode 100644
index a2741c61f..000000000
--- a/packages/frontend/src/components/drag&drop-item.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { ChevronRight, GripVertical } from 'lucide-react';
-import React from 'react';
-
-import { cn } from '../helpers/classnames';
-import { Button } from './ui/button';
-
-export const ItemDragAndDrop = ({
-  active,
-  children,
-  childrenLength,
-  depth = 0,
-  id,
-  indentationWidth = 0,
-  isDropHere,
-  isOpenChildren,
-  onCollapse,
-  className,
-}: {
-  active: boolean;
-  children: React.ReactNode;
-  childrenLength?: number;
-  className?: string;
-  depth?: number;
-  id: number | string;
-  indentationWidth?: number;
-  isDropHere: boolean;
-  isOpenChildren?: boolean;
-  onCollapse: () => void;
-}) => {
-  const {
-    attributes,
-    isDragging,
-    listeners,
-    setDraggableNodeRef,
-    setDroppableNodeRef,
-    transform,
-    transition,
-  } = useSortable({
-    id,
-    animateLayoutChanges: ({ isSorting, wasDragging }) =>
-      !(isSorting || wasDragging),
-  });
-
-  const allowOpenChildren = !!(childrenLength && onCollapse);
-
-  return (
-    <div
-      className={cn(
-        'rounded-lg pl-[var(--spacing)] transition-all [&:not(:first-child)]:mt-2',
-        className,
-      )}
-      ref={setDroppableNodeRef}
-      style={
-        {
-          '--spacing': `${indentationWidth * depth}px`,
-        } as React.CSSProperties
-      }
-    >
-      <div
-        className={cn(
-          'bg-card border-input relative flex flex-wrap items-center gap-2 rounded-lg border p-4 transition-shadow sm:gap-4',
-          {
-            'bg-primary/20 animate-pulse': isDropHere,
-            'z-10 opacity-50': isDragging,
-            'shadow-lg': active,
-          },
-        )}
-        ref={setDraggableNodeRef}
-        style={{
-          transform: CSS.Transform.toString(transform),
-          transition,
-        }}
-      >
-        <div className="flex shrink-0 gap-2">
-          <Button
-            ariaLabel=""
-            className={cn('w-8')}
-            size="icon"
-            variant="ghost"
-            {...attributes}
-            {...listeners}
-          >
-            <GripVertical />
-          </Button>
-
-          {allowOpenChildren && (
-            <Button
-              ariaLabel=""
-              onClick={onCollapse}
-              size="icon"
-              variant="ghost"
-            >
-              <ChevronRight
-                className={cn('text-muted-foreground transition-transform', {
-                  'rotate-90': isOpenChildren,
-                })}
-              />
-            </Button>
-          )}
-        </div>
-
-        {children}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/frontend/src/components/drag&drop/sortable-list/flat.ts b/packages/frontend/src/components/drag&drop/sortable-list/flat.ts
new file mode 100644
index 000000000..780de8a12
--- /dev/null
+++ b/packages/frontend/src/components/drag&drop/sortable-list/flat.ts
@@ -0,0 +1,29 @@
+import { FlattenedItem, TreeItem } from './types';
+
+function flatten<T extends TreeItem<T>>(
+  items: T[],
+  parentId: null | number | string = null,
+  depth = 0,
+): FlattenedItem<T>[] {
+  return items.reduce<FlattenedItem<T>[]>((acc, item, index) => {
+    const newItem: FlattenedItem<T> = {
+      ...item,
+      parentId,
+      depth,
+      index,
+      collapsed: item.collapsed ?? true,
+    };
+
+    return [
+      ...acc,
+      newItem,
+      ...flatten(item.children as T[], item.id, depth + 1),
+    ];
+  }, []);
+}
+
+export function flattenTree<T extends TreeItem<T>>(
+  items: T[],
+): FlattenedItem<T>[] {
+  return flatten(items);
+}
diff --git a/packages/frontend/src/components/drag&drop/sortable-list/item.tsx b/packages/frontend/src/components/drag&drop/sortable-list/item.tsx
new file mode 100644
index 000000000..c9c2cecdd
--- /dev/null
+++ b/packages/frontend/src/components/drag&drop/sortable-list/item.tsx
@@ -0,0 +1,103 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/helpers/classnames';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ChevronRight, GripVertical } from 'lucide-react';
+
+import { TreeItem } from './types';
+
+export function SortableTreeItem<T extends TreeItem<T>>({
+  childCount,
+  clone,
+  depth,
+  indentationWidth,
+  collapsed,
+  className,
+  id,
+  onCollapse,
+  children,
+  ...props
+}: {
+  childCount?: number;
+  children: React.ReactNode;
+  clone?: boolean;
+  collapsed?: boolean;
+  depth: number;
+  id: number | string;
+  indentationWidth: number;
+  onCollapse?: () => void;
+} & Omit<React.HTMLAttributes<HTMLLIElement>, 'id' | 'style'>) {
+  const {
+    attributes,
+    isSorting,
+    listeners,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id,
+    animateLayoutChanges: ({ isSorting, wasDragging }) =>
+      isSorting || wasDragging ? false : true,
+  });
+
+  return (
+    <li
+      className={cn('-mb-[1px] list-none pl-[var(--spacing)]', className, {
+        'pointer-events-none inline-block p-0 pl-[10px] pt-[5px]': clone,
+        'pointer-events-none': isSorting,
+      })}
+      ref={setDroppableNodeRef}
+      style={
+        {
+          '--spacing': `${indentationWidth * depth}px`,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      <div
+        className={cn(
+          'bg-card relative flex items-center gap-2 border px-[10px] py-[var(--vertical-padding)]',
+          {
+            'rounded-sm pr-[24px] shadow': clone,
+          },
+        )}
+        ref={setDraggableNodeRef}
+        style={
+          {
+            transform: CSS.Translate.toString(transform),
+            transition,
+            '--vertical-padding': clone ? '5px' : '10px',
+          } as React.CSSProperties
+        }
+      >
+        <Button
+          ariaLabel=""
+          className={cn('w-8 cursor-grab')}
+          size="icon"
+          variant="ghost"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical />
+        </Button>
+        {onCollapse && (
+          <Button ariaLabel="" onClick={onCollapse} size="icon" variant="ghost">
+            <ChevronRight
+              className={cn('text-muted-foreground transition-transform', {
+                'rotate-90': collapsed,
+              })}
+            />
+          </Button>
+        )}
+
+        {children}
+        {clone && childCount && childCount > 1 ? (
+          <span className="bg-primary text-primary-foreground absolute -right-[10px] -top-[10px] flex size-[24px] items-center justify-center rounded-full text-sm">
+            {childCount}
+          </span>
+        ) : null}
+      </div>
+    </li>
+  );
+}
diff --git a/packages/frontend/src/components/drag&drop/sortable-list/list.tsx b/packages/frontend/src/components/drag&drop/sortable-list/list.tsx
new file mode 100644
index 000000000..e5782f5a8
--- /dev/null
+++ b/packages/frontend/src/components/drag&drop/sortable-list/list.tsx
@@ -0,0 +1,273 @@
+'use client';
+
+import {
+  closestCenter,
+  defaultDropAnimation,
+  DndContext,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverEvent,
+  DragOverlay,
+  DragStartEvent,
+  MeasuringStrategy,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useTranslations } from 'next-intl';
+import React, { useEffect, useId, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { flattenTree } from './flat';
+import { SortableTreeItem } from './item';
+import { FlattenedItem, TreeItem } from './types';
+import {
+  buildTree,
+  getChildCount,
+  getProjection,
+  removeChildrenOf,
+  setProperty,
+} from './utilities';
+
+const indentationWidth = 50;
+
+export function DragAndDropSortableList<
+  T extends TreeItem<Omit<T, '__typename'>>,
+>({
+  data,
+  componentItem,
+  onCollapse,
+  maxDepth,
+  onDragEnd,
+}: {
+  componentItem: (item: T, parentId: null | number | string) => React.ReactNode;
+  data: T[];
+  maxDepth?: number;
+  onCollapse?: (props: { id: number | string; isOpen: boolean }) => void;
+  onDragEnd?: (props: {
+    id: number | string;
+    indexToMove: number;
+    parentId: null | number | string;
+  }) => void;
+}) {
+  const t = useTranslations('core');
+  const [isReadyDocument, setIsReadyDocument] = useState(false);
+  const [items, setItems] = useState(data);
+  const [activeId, setActiveId] = useState<null | number | string>(null);
+  const [overId, setOverId] = useState<null | number | string>(null);
+  const [offsetLeft, setOffsetLeft] = useState(0);
+  const id = useId();
+
+  // Refetch data
+  useEffect(() => {
+    setItems(data);
+  }, [data]);
+
+  const flattenedItems = useMemo(() => {
+    const flattenedTree = flattenTree(items);
+    const collapsedItems = flattenedTree.reduce<(number | string)[]>(
+      (acc, { children, collapsed, id }) =>
+        collapsed && children.length ? [...acc, id] : acc,
+      [],
+    );
+
+    return removeChildrenOf(
+      flattenedTree,
+      activeId ? [activeId, ...collapsedItems] : collapsedItems,
+    );
+  }, [activeId, items]);
+
+  const projected =
+    activeId && overId
+      ? getProjection(
+          flattenedItems,
+          activeId,
+          overId,
+          offsetLeft,
+          indentationWidth,
+          maxDepth,
+        )
+      : null;
+  const activeItem = activeId
+    ? flattenedItems.find(({ id }) => id === activeId)
+    : null;
+
+  const sortedIds = useMemo(
+    () => flattenedItems.map(({ id }) => id),
+    [flattenedItems],
+  );
+
+  function handleDragStart({ active: { id: activeId } }: DragStartEvent) {
+    setActiveId(activeId);
+    setOverId(activeId);
+
+    document.body.style.setProperty('cursor', 'grabbing');
+  }
+
+  function handleDragMove({ delta }: DragMoveEvent) {
+    setOffsetLeft(delta.x);
+  }
+
+  function handleDragOver({ over }: DragOverEvent) {
+    setOverId(over?.id ?? null);
+  }
+
+  function resetState() {
+    setOverId(null);
+    setActiveId(null);
+    setOffsetLeft(0);
+
+    document.body.style.setProperty('cursor', '');
+  }
+
+  function handleDragEnd({ active, over }: DragEndEvent) {
+    resetState();
+    if (!projected || !over) return;
+
+    const { depth, parentId } = projected;
+    const clonedItems: FlattenedItem<Omit<T, '__typename'>>[] = JSON.parse(
+      JSON.stringify(flattenTree(items)),
+    );
+    const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
+    const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
+    const activeTreeItem = clonedItems[activeIndex];
+
+    clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
+
+    const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+    const newItems = buildTree<Omit<T, '__typename'>>(sortedItems);
+
+    setItems(newItems as T[]);
+
+    onDragEnd?.({
+      id: active.id,
+      parentId: parentId,
+      indexToMove: overIndex,
+    });
+  }
+
+  function handleDragCancel() {
+    resetState();
+  }
+
+  function handleCollapse(id: number | string) {
+    const newItems = setProperty<Omit<T, '__typename'>>(
+      items,
+      id,
+      'collapsed',
+      value => {
+        if (value === undefined) {
+          return false;
+        }
+
+        return !value;
+      },
+    );
+
+    onCollapse?.({
+      id,
+      isOpen: newItems.find(item => item.id === id)?.collapsed ?? true,
+    });
+
+    setItems(newItems as T[]);
+  }
+
+  useEffect(() => {
+    setIsReadyDocument(true);
+  }, []);
+
+  if (!data.length) {
+    return (
+      <div className="text-muted-foreground text-center">{t('no_results')}</div>
+    );
+  }
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      id={id}
+      measuring={{
+        droppable: {
+          strategy: MeasuringStrategy.Always,
+        },
+      }}
+      onDragCancel={handleDragCancel}
+      onDragEnd={handleDragEnd}
+      onDragMove={handleDragMove}
+      onDragOver={handleDragOver}
+      onDragStart={handleDragStart}
+    >
+      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
+        {flattenedItems.map(item => (
+          <SortableTreeItem
+            collapsed={Boolean(item.collapsed && item.children.length)}
+            depth={
+              item.id === activeId && projected ? projected.depth : item.depth
+            }
+            id={item.id}
+            indentationWidth={indentationWidth}
+            key={item.id}
+            onCollapse={
+              item.children.length
+                ? () => {
+                    handleCollapse(item.id);
+                  }
+                : undefined
+            }
+          >
+            {componentItem(item as unknown as T, item.parentId)}
+          </SortableTreeItem>
+        ))}
+        {isReadyDocument &&
+          createPortal(
+            <DragOverlay
+              dropAnimation={{
+                keyframes({ transform }) {
+                  return [
+                    {
+                      opacity: 1,
+                      transform: CSS.Transform.toString(transform.initial),
+                    },
+                    {
+                      opacity: 0,
+                      transform: CSS.Transform.toString({
+                        ...transform.final,
+                        x: transform.final.x + 5,
+                        y: transform.final.y + 5,
+                      }),
+                    },
+                  ];
+                },
+                easing: 'ease-out',
+                sideEffects({ active }) {
+                  active.node.animate([{ opacity: 0 }, { opacity: 1 }], {
+                    duration: defaultDropAnimation.duration,
+                    easing: defaultDropAnimation.easing,
+                  });
+                },
+              }}
+            >
+              {activeId && activeItem ? (
+                <SortableTreeItem
+                  childCount={getChildCount(items, activeId) + 1}
+                  clone
+                  depth={activeItem.depth}
+                  id={activeId}
+                  indentationWidth={indentationWidth}
+                >
+                  {componentItem(
+                    activeItem as unknown as T,
+                    activeItem.parentId,
+                  )}
+                </SortableTreeItem>
+              ) : null}
+            </DragOverlay>,
+            document.body,
+          )}
+      </SortableContext>
+    </DndContext>
+  );
+}
diff --git a/packages/frontend/src/components/drag&drop/sortable-list/types.ts b/packages/frontend/src/components/drag&drop/sortable-list/types.ts
new file mode 100644
index 000000000..a706c49f2
--- /dev/null
+++ b/packages/frontend/src/components/drag&drop/sortable-list/types.ts
@@ -0,0 +1,11 @@
+export interface TreeItem<T> {
+  children: TreeItem<T>[];
+  collapsed?: boolean;
+  id: number | string;
+}
+
+export type FlattenedItem<T> = {
+  depth: number;
+  index: number;
+  parentId: null | number | string;
+} & T;
diff --git a/packages/frontend/src/components/drag&drop/sortable-list/utilities.ts b/packages/frontend/src/components/drag&drop/sortable-list/utilities.ts
new file mode 100644
index 000000000..b35e70275
--- /dev/null
+++ b/packages/frontend/src/components/drag&drop/sortable-list/utilities.ts
@@ -0,0 +1,232 @@
+import { arrayMove } from '@dnd-kit/sortable';
+
+import { FlattenedItem, TreeItem } from './types';
+
+function getDragDepth(offset: number, indentationWidth: number) {
+  return Math.round(offset / indentationWidth);
+}
+
+export function getProjection<T extends TreeItem<T>>(
+  items: FlattenedItem<T>[],
+  activeId: number | string,
+  overId: number | string,
+  dragOffset: number,
+  indentationWidth: number,
+  maxDepthProp?: number,
+) {
+  const overItemIndex = items.findIndex(({ id }) => id === overId);
+  const activeItemIndex = items.findIndex(({ id }) => id === activeId);
+  const activeItem = items[activeItemIndex];
+  const newItems = arrayMove(items, activeItemIndex, overItemIndex);
+  const previousItem: FlattenedItem<T> | undefined =
+    newItems[overItemIndex - 1];
+  const nextItem = newItems[overItemIndex + 1];
+  const dragDepth = getDragDepth(dragOffset, indentationWidth);
+  const projectedDepth = +activeItem.depth + dragDepth;
+  const maxDepth =
+    maxDepthProp ??
+    getMaxDepth({
+      previousItem,
+    });
+  const minDepth = getMinDepth({ nextItem });
+  let depth = projectedDepth;
+
+  if (projectedDepth >= maxDepth) {
+    depth = maxDepth;
+  } else if (projectedDepth < minDepth) {
+    depth = minDepth;
+  }
+
+  return { depth, maxDepth, minDepth, parentId: getParentId() };
+
+  function getParentId() {
+    if (depth === 0 || !previousItem) {
+      return null;
+    }
+
+    if (depth === previousItem.depth) {
+      return previousItem.parentId;
+    }
+
+    if (depth > previousItem.depth) {
+      return previousItem.id;
+    }
+
+    const newParent = newItems
+      .slice(0, overItemIndex)
+      .reverse()
+      .find(item => item.depth === depth)?.parentId;
+
+    return newParent ?? null;
+  }
+}
+
+function getMaxDepth<T extends TreeItem<T>>({
+  previousItem,
+}: {
+  previousItem: FlattenedItem<T> | undefined;
+}) {
+  if (previousItem) {
+    return previousItem.depth + 1;
+  }
+
+  return 0;
+}
+
+function getMinDepth<T extends TreeItem<T>>({
+  nextItem,
+}: {
+  nextItem: FlattenedItem<T> | undefined;
+}) {
+  if (nextItem) {
+    return nextItem.depth;
+  }
+
+  return 0;
+}
+
+export function buildTree<T extends TreeItem<T>>(
+  flattenedItems: FlattenedItem<T>[],
+): T[] {
+  const root: TreeItem<T> = {
+    id: 'root',
+    children: [],
+    collapsed: true,
+  };
+
+  const nodes: Record<string, TreeItem<T>> = {
+    [root.id]: root,
+  };
+
+  // No need to specify type here; let TypeScript infer it
+  const items = flattenedItems.map(item => ({
+    ...item,
+    children: [],
+  }));
+
+  for (const item of items) {
+    const { id, children } = item;
+    const parentId = item.parentId ?? root.id;
+    const parent = nodes[parentId] ?? findItem(items, parentId);
+
+    nodes[id] = { ...item, children };
+    parent.children.push(item as T);
+  }
+
+  return root.children as T[];
+}
+
+export function findItem<T extends TreeItem<T>>(
+  items: TreeItem<T>[],
+  itemId: number | string,
+) {
+  return items.find(({ id }) => id === itemId);
+}
+
+export function findItemDeep<T extends TreeItem<T>>(
+  items: TreeItem<T>[],
+  itemId: number | string,
+): TreeItem<T> | undefined {
+  for (const item of items) {
+    const { id, children } = item;
+
+    if (id === itemId) {
+      return item;
+    }
+
+    if (children.length) {
+      const child = findItemDeep(children, itemId);
+
+      if (child) {
+        return child;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function removeItem<T extends TreeItem<T>>(
+  items: TreeItem<T>[],
+  id: number | string,
+) {
+  const newItems = [];
+
+  for (const item of items) {
+    if (item.id === id) {
+      continue;
+    }
+
+    if (item.children.length) {
+      item.children = removeItem(item.children, id);
+    }
+
+    newItems.push(item as never);
+  }
+
+  return newItems;
+}
+
+export function setProperty<
+  T extends TreeItem<T>,
+  Y extends keyof T = 'collapsed',
+>(
+  items: T[],
+  id: number | string,
+  property: Y,
+  setter: (value: T[Y]) => T[Y],
+): T[] {
+  for (const item of items) {
+    if (item.id === id) {
+      item[property] = setter(item[property]);
+      continue;
+    }
+
+    if (item.children.length) {
+      item.children = setProperty(item.children as T[], id, property, setter);
+    }
+  }
+
+  return [...items];
+}
+
+function countChildren<T extends TreeItem<T>>(
+  items: TreeItem<T>[],
+  count = 0,
+): number {
+  return items.reduce((acc, { children }) => {
+    if (children.length) {
+      return countChildren(children, acc + 1);
+    }
+
+    return acc + 1;
+  }, count);
+}
+
+export function getChildCount<T extends TreeItem<T>>(
+  items: TreeItem<T>[],
+  id: number | string,
+) {
+  const item = findItemDeep(items, id);
+
+  return item ? countChildren(item.children) : 0;
+}
+
+export function removeChildrenOf<T extends TreeItem<T>>(
+  items: FlattenedItem<T>[],
+  ids: (number | string)[],
+) {
+  const excludeParentIds = [...ids];
+
+  return items.filter(item => {
+    if (item.parentId && excludeParentIds.includes(item.parentId)) {
+      if (item.children.length) {
+        excludeParentIds.push(item.id);
+      }
+
+      return false;
+    }
+
+    return true;
+  });
+}
diff --git a/packages/frontend/src/helpers/flatten-tree.ts b/packages/frontend/src/helpers/flatten-tree.ts
deleted file mode 100644
index 5f09e56b0..000000000
--- a/packages/frontend/src/helpers/flatten-tree.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-export type WithChildren<T extends object> = {
-  children: WithChildren<T>[];
-  id: number | string;
-} & Omit<T, '__typename' | 'children'>;
-
-export type FlatTree<T extends object> = {
-  depth: number;
-  parentId: null | number | string;
-} & WithChildren<T>;
-
-export function flattenTree<T extends object>({
-  depth = 0,
-  parentId = null,
-  tree,
-}: {
-  depth?: number;
-  parentId?: null | number | string;
-  tree: WithChildren<T>[];
-}): FlatTree<T>[] {
-  return tree.reduce<FlatTree<T>[]>((previousValue, currentValue) => {
-    const children =
-      currentValue.children.length > 0
-        ? flattenTree({
-            tree: currentValue.children,
-            parentId: currentValue.id,
-            depth: depth + 1,
-          })
-        : [];
-
-    return [
-      ...previousValue,
-      {
-        ...currentValue,
-        parentId: parentId,
-        depth: depth,
-        children,
-      },
-      ...children,
-    ];
-  }, []);
-}
diff --git a/packages/frontend/src/hooks/drag&drop/use-functions.ts b/packages/frontend/src/hooks/drag&drop/use-functions.ts
deleted file mode 100644
index 07f9c55a3..000000000
--- a/packages/frontend/src/hooks/drag&drop/use-functions.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-import {
-  DragEndEvent,
-  DragMoveEvent,
-  DragOverEvent,
-  DragStartEvent,
-  UniqueIdentifier,
-} from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-import React from 'react';
-
-import {
-  flattenTree,
-  FlatTree,
-  WithChildren,
-} from '../../helpers/flatten-tree';
-import { useProjection } from './use-projection';
-
-function removeChildrenOf<T extends object>({
-  ids,
-  tree,
-}: {
-  ids: UniqueIdentifier[];
-  tree: FlatTree<T>[];
-}) {
-  const excludeParentIds = [...ids];
-
-  return tree.filter(item => {
-    if (item.parentId && excludeParentIds.includes(item.parentId)) {
-      if (item.children.length > 0) {
-        excludeParentIds.push(item.id);
-      }
-
-      return false;
-    }
-
-    return true;
-  });
-}
-
-export function buildTree<T extends object>({
-  flattenedTree,
-}: {
-  flattenedTree: FlatTree<T>[];
-}): WithChildren<T>[] {
-  const sorted = flattenedTree.sort((a, b) => b.depth - a.depth);
-  const maxDepth = sorted[0].depth;
-  let tree: FlatTree<T>[] = [];
-
-  tree = sorted.map(item => {
-    if (item.depth === maxDepth) {
-      return item;
-    }
-
-    return {
-      ...item,
-      children: [],
-    };
-  });
-
-  tree.forEach(item => {
-    const parentIndex = tree.findIndex(({ id }) => id === item.parentId);
-    if (parentIndex === -1) return;
-    const parent = tree[parentIndex];
-
-    tree[parentIndex] = {
-      ...parent,
-      children: [...parent.children, item],
-    };
-  });
-
-  return tree.filter(item => !item.parentId);
-}
-
-interface OnDragMoveArgs extends DragMoveEvent {
-  flattenedItems: FlatTree<object>[];
-  indentationWidth?: number;
-  maxDepth?: number;
-}
-
-interface DragEndArgs<T extends object> extends DragEndEvent {
-  data: WithChildren<T>[];
-  setData: (data: WithChildren<FlatTree<T>>[]) => void;
-}
-
-interface Args<T extends object> {
-  data: WithChildren<T>[];
-}
-
-export function useDragAndDrop<T extends object>({ data }: Args<T>) {
-  const [isOpenChildren, setIsOpenChildren] = React.useState<
-    UniqueIdentifier[]
-  >([]);
-  const {
-    activeId,
-    getProjection,
-    overId,
-    projected,
-    setActiveId,
-    setOverId,
-    setProjected,
-  } = useProjection();
-  const flattenedItems = flattItems({ data });
-  const activeItem = flattenedItems.find(i => i.id === activeId);
-  const sortedIds = React.useMemo(
-    () => flattenedItems.map(({ id }) => id),
-    [flattenedItems],
-  );
-
-  // DndKit doesn't support nested sortable, so we need to flatten the data in one array
-  function flattItems<T extends WithChildren<T>>({ data }: { data: T[] }) {
-    const tree = flattenTree({ tree: data });
-
-    const collapsedItems = tree.reduce<UniqueIdentifier[]>(
-      (acc, { children, id }) =>
-        !isOpenChildren.includes(id) && children.length ? [...acc, id] : acc,
-      [],
-    );
-
-    return removeChildrenOf({
-      tree,
-      ids: activeId ? [activeId, ...collapsedItems] : collapsedItems,
-    });
-  }
-
-  const resetState = () => {
-    setOverId(null);
-    setActiveId(null);
-    setProjected(null);
-  };
-
-  const onDragOver = ({ over }: DragOverEvent) => {
-    setOverId(over?.id ?? null);
-  };
-
-  const onDragStart = ({ active }: DragStartEvent) => {
-    setActiveId(active.id);
-    setOverId(active.id);
-  };
-
-  const onDragMove = ({
-    delta,
-    flattenedItems,
-    indentationWidth,
-    maxDepth,
-  }: OnDragMoveArgs) => {
-    if (maxDepth === undefined && !indentationWidth) {
-      throw new Error('You must provide either maxDepth abd indentationWidth');
-    }
-
-    if (!activeId || !overId) return;
-
-    const currentProjection = getProjection({
-      flattenedItems,
-      delta,
-      indentationWidth,
-      maxDepth,
-    });
-
-    if (projected?.parentId === currentProjection.parentId) {
-      return;
-    }
-
-    setProjected(currentProjection);
-  };
-
-  function onDragEnd<T extends object>({
-    active,
-    data,
-    over,
-    setData,
-  }: DragEndArgs<T>) {
-    resetState();
-
-    if (!projected || !over) return;
-    const { depth, parentId } = projected;
-
-    const clonedItems: FlatTree<T>[] = flattenTree({ tree: data });
-    const toIndex = clonedItems.findIndex(({ id }) => id === over.id);
-    const fromIndex = clonedItems.findIndex(({ id }) => id === active.id);
-    const sortedItems = arrayMove(clonedItems, fromIndex, toIndex);
-    const activeIndex = sortedItems.findIndex(i => i.id === active.id);
-    sortedItems[activeIndex] = {
-      ...sortedItems[activeIndex],
-      depth,
-      parentId,
-    };
-
-    const dataAfterUpdate: FlatTree<FlatTree<T>>[] = sortedItems.map(item => ({
-      ...item,
-      children: [],
-    }));
-
-    setData(
-      buildTree({
-        flattenedTree: dataAfterUpdate,
-      }),
-    );
-
-    const parents = sortedItems.filter(i => i.parentId === parentId);
-    const indexToMove = parents.findIndex(i => i.id === active.id);
-    const flattenedItems = flattenTree({ tree: data });
-
-    // -1 means that the item is the last one
-    const findActive = flattenedItems.find(i => i.id === active.id);
-    if (!findActive) return;
-
-    // Do nothing if drag and drop on the same item on the same level
-    if (findActive.parentId === parentId && active.id === over.id) {
-      return;
-    }
-
-    return {
-      id: active.id,
-      parentId: parentId,
-      indexToMove,
-    };
-  }
-
-  const actionsItem = ({
-    data,
-    indentationWidth,
-    onCollapse,
-  }: {
-    data: {
-      children?: unknown[];
-      depth?: number;
-      id: number | string;
-    };
-    indentationWidth?: number;
-    onCollapse?: ({ isOpen }: { isOpen: boolean }) => void;
-  }) => {
-    const onCollapseInternal = () => {
-      const isOpen = isOpenChildren.includes(data.id);
-
-      onCollapse?.({ isOpen });
-
-      setIsOpenChildren(prev => {
-        if (isOpen) {
-          return prev.filter(i => i !== data.id);
-        }
-
-        return [...prev, data.id];
-      });
-    };
-
-    return {
-      onCollapse: onCollapseInternal,
-      isOpenChildren: isOpenChildren.includes(data.id),
-      isDropHere: projected?.parentId === data.id,
-      active: activeId === data.id,
-      depth:
-        (activeId === data.id && projected ? projected.depth : data.depth) ?? 0,
-      indentationWidth,
-      id: data.id,
-      childrenLength: data.children ? data.children.length : 0,
-    };
-  };
-
-  return {
-    resetState,
-    onDragOver,
-    onDragStart,
-    onDragMove,
-    onDragEnd,
-    actionsItem,
-    flattenedItems,
-    activeItemOverlay: activeId !== null && activeItem,
-    sortedIds,
-  };
-}
diff --git a/packages/frontend/src/hooks/drag&drop/use-projection.ts b/packages/frontend/src/hooks/drag&drop/use-projection.ts
deleted file mode 100644
index 89f689da7..000000000
--- a/packages/frontend/src/hooks/drag&drop/use-projection.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { UniqueIdentifier } from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-import { Coordinates } from '@dnd-kit/utilities';
-import React from 'react';
-
-import { FlatTree } from '../../helpers/flatten-tree';
-
-const getDragDepth = ({
-  indentationWidth,
-  offset,
-}: {
-  indentationWidth: number;
-  offset: number;
-}) => {
-  return Math.round(offset / indentationWidth);
-};
-
-function getMaxDepth<T extends object>({
-  previousItem,
-}: {
-  previousItem: FlatTree<T> | undefined;
-}) {
-  return previousItem ? previousItem.depth + 1 : 0;
-}
-
-function getMinDepth<T extends object>({
-  nextItem,
-}: {
-  nextItem: FlatTree<T> | undefined;
-}) {
-  return nextItem ? nextItem.depth : 0;
-}
-
-export interface ProjectionReturnType {
-  depth: number;
-  maxDepth: number;
-  minDepth: number;
-  parentId: null | number | string;
-}
-
-export const useProjection = () => {
-  const [activeId, setActiveId] = React.useState<null | UniqueIdentifier>(null);
-  const [overId, setOverId] = React.useState<null | UniqueIdentifier>(null);
-  const [projected, setProjected] =
-    React.useState<null | ProjectionReturnType>();
-
-  function getProjection<T extends object>({
-    delta,
-    flattenedItems,
-    indentationWidth = 0,
-    maxDepth: maxDepthProp,
-  }: {
-    delta: Coordinates;
-    flattenedItems: FlatTree<T>[];
-    indentationWidth?: number;
-    maxDepth?: number;
-  }): ProjectionReturnType {
-    const dragOffset = delta.x;
-    const overItemIndex = flattenedItems.findIndex(({ id }) => id === overId);
-    const activeItemIndex = flattenedItems.findIndex(
-      ({ id }) => id === activeId,
-    );
-    const activeItem = flattenedItems[activeItemIndex];
-    const newItems = arrayMove(flattenedItems, activeItemIndex, overItemIndex);
-    const previousItem = newItems.at(overItemIndex - 1);
-    const nextItem = newItems.at(overItemIndex + 1);
-    const dragDepth = getDragDepth({
-      offset: dragOffset,
-      indentationWidth,
-    });
-    const projectedDepth = activeItem.depth + dragDepth;
-    const maxDepth =
-      maxDepthProp ??
-      getMaxDepth({
-        previousItem,
-      });
-    const minDepth = getMinDepth({ nextItem });
-    let depth = projectedDepth;
-
-    if (projectedDepth >= maxDepth) {
-      depth = maxDepth;
-    } else if (projectedDepth < minDepth) {
-      depth = minDepth;
-    }
-
-    const getParentId = (): null | number | string => {
-      if (depth === 0 || !previousItem) {
-        return null;
-      }
-
-      if (depth === previousItem.depth) {
-        return previousItem.parentId;
-      }
-
-      if (depth > previousItem.depth) {
-        return previousItem.id;
-      }
-
-      const newParent = newItems
-        .slice(0, overItemIndex)
-        .reverse()
-        .find(item => item.depth === depth)?.parentId;
-
-      return newParent ?? null;
-    };
-
-    return { depth, maxDepth, minDepth, parentId: getParentId() };
-  }
-
-  return {
-    getProjection,
-    activeId,
-    overId,
-    setOverId,
-    setActiveId,
-    projected,
-    setProjected,
-  };
-};
diff --git a/packages/frontend/src/views/admin/views/core/dashboard/categories-admin-view.tsx b/packages/frontend/src/views/admin/views/core/dashboard/categories-admin-view.tsx
new file mode 100644
index 000000000..2a2092504
--- /dev/null
+++ b/packages/frontend/src/views/admin/views/core/dashboard/categories-admin-view.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { DragAndDropSortableList } from '@/components/drag&drop/sortable-list/list';
+
+export const CategoriesBlogAdminView = () => {
+  const data = [
+    {
+      id: 'Home',
+      children: [],
+    },
+    {
+      id: 'Collections',
+      children: [
+        { id: 'Spring', children: [] },
+        { id: 'Summer', children: [] },
+        { id: 'Fall', children: [] },
+        { id: 'Winter', children: [] },
+      ],
+    },
+    {
+      id: 'About Us',
+      children: [],
+    },
+    {
+      id: 'My Account',
+      children: [
+        { id: 'Addresses', children: [] },
+        { id: 'Order History', children: [] },
+      ],
+    },
+  ];
+
+  return (
+    <DragAndDropSortableList
+      componentItem={data => {
+        return <div>{data.id}</div>;
+      }}
+      data={data}
+    />
+  );
+};
diff --git a/packages/frontend/src/views/admin/views/core/dashboard/dashboard-core-admin-view.tsx b/packages/frontend/src/views/admin/views/core/dashboard/dashboard-core-admin-view.tsx
index 1d71ea186..90f9afb99 100644
--- a/packages/frontend/src/views/admin/views/core/dashboard/dashboard-core-admin-view.tsx
+++ b/packages/frontend/src/views/admin/views/core/dashboard/dashboard-core-admin-view.tsx
@@ -8,6 +8,7 @@ import { AlertTriangle, HammerIcon } from 'lucide-react';
 import { getTranslations } from 'next-intl/server';
 
 import { WarnReqRestartServer } from '../plugins/warn-req-restart-server';
+import { CategoriesBlogAdminView } from './categories-admin-view';
 
 export const DashboardCoreAdminView = async () => {
   const [
@@ -44,6 +45,7 @@ export const DashboardCoreAdminView = async () => {
       </HeaderContent>
 
       <WarnReqRestartServer />
+      <CategoriesBlogAdminView />
     </>
   );
 };
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/actions/create/create.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/actions/create/create.tsx
index bcf7e5b7e..901973594 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/actions/create/create.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/actions/create/create.tsx
@@ -13,8 +13,6 @@ import { Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 
-import { CreateEditNavDevPluginAdminProps } from '../../create-edit/create-edit';
-
 const Content = React.lazy(async () =>
   import('../../create-edit/create-edit').then(module => ({
     default: module.CreateEditNavDevPluginAdmin,
@@ -22,7 +20,7 @@ const Content = React.lazy(async () =>
 );
 
 export const CreateNavDevPluginAdmin = (
-  props: CreateEditNavDevPluginAdminProps,
+  props: React.ComponentProps<typeof Content>,
 ) => {
   const t = useTranslations('core');
 
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/content.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/content.tsx
index 938f8363a..55380d813 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/content.tsx
@@ -1,22 +1,13 @@
 'use client';
 
-import { ItemDragAndDrop } from '@/components/drag&drop-item';
+import { DragAndDropSortableList } from '@/components/drag&drop/sortable-list/list';
 import { Admin__Core_Plugins__Nav__ShowQuery } from '@/graphql/queries/admin/plugins/dev/nav/admin__core_plugins__nav__show.generated';
-import { ShowAdminNavPluginsObj } from '@/graphql/types';
-import { WithChildren } from '@/helpers/flatten-tree';
-import { useDragAndDrop } from '@/hooks/drag&drop/use-functions';
-import { closestCorners, DndContext, DragOverlay } from '@dnd-kit/core';
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
 import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 import { toast } from 'sonner';
 
 import { mutationChangePositionApi } from './item/hooks/mutation-change-position-api';
-import { ItemNavDevPluginAdminContext } from './item/hooks/use-item-nav-dev-plugin-admin';
 import { ItemContentNavDevPluginAdmin } from './item/item';
 
 interface Props extends Admin__Core_Plugins__Nav__ShowQuery {
@@ -29,53 +20,32 @@ export const ContentNavDevPluginAdmin = ({
 }: Props) => {
   const t = useTranslations('core');
   const { code } = useParams();
-  const [initData, setData] = React.useState<ShowAdminNavPluginsObj[]>(edges);
-  const data: WithChildren<ShowAdminNavPluginsObj>[] = initData.map(item => ({
-    ...item,
-    children:
-      item.children?.map(child => ({
-        ...child,
-        id: child.code,
-        children: [],
-      })) ?? [],
-    id: item.code,
-  }));
-
-  const {
-    actionsItem,
-    activeItemOverlay,
-    flattenedItems,
-    onDragEnd,
-    onDragMove,
-    onDragOver,
-    onDragStart,
-    resetState,
-    sortedIds,
-  } = useDragAndDrop<ShowAdminNavPluginsObj>({
-    data,
-  });
-
-  // Revalidate items when edges change
-  React.useEffect(() => {
-    setData(edges);
-  }, [edges]);
-
-  if (data.length === 0) {
-    return <div className="text-center">{t('no_results')}</div>;
-  }
 
   return (
-    <DndContext
-      collisionDetection={closestCorners}
-      onDragCancel={resetState}
-      onDragEnd={async event => {
-        const moveTo = onDragEnd<ShowAdminNavPluginsObj>({
-          data,
-          setData,
-          ...event,
-        });
-
-        if (!moveTo || !code) return;
+    <DragAndDropSortableList
+      componentItem={(data, parentId) => {
+        return (
+          <ItemContentNavDevPluginAdmin
+            data={data}
+            dataFromSSR={edges}
+            icons={icons}
+            parentId={parentId?.toString()}
+          />
+        );
+      }}
+      data={edges.map(item => ({
+        ...item,
+        children:
+          item.children?.map(child => ({
+            ...child,
+            id: child.code,
+            children: [],
+          })) ?? [],
+        id: item.code,
+      }))}
+      maxDepth={1}
+      onDragEnd={async moveTo => {
+        if (!code) return;
 
         const mutation = await mutationChangePositionApi({
           code: moveTo.id.toString(),
@@ -88,58 +58,8 @@ export const ContentNavDevPluginAdmin = ({
           toast.error(t('errors.title'), {
             description: t('errors.internal_server_error'),
           });
-
-          return;
         }
-
-        window.location.reload();
       }}
-      onDragMove={e => {
-        onDragMove({ ...e, flattenedItems, maxDepth: 1 });
-      }}
-      onDragOver={onDragOver}
-      onDragStart={onDragStart}
-    >
-      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
-        {flattenedItems.map(item => (
-          <ItemDragAndDrop
-            key={item.id}
-            {...actionsItem({
-              data: item,
-              indentationWidth: 20,
-            })}
-          >
-            <ItemNavDevPluginAdminContext.Provider
-              value={{
-                dataFromSSR: edges,
-                parentId: item.parentId?.toString(),
-                icons,
-              }}
-            >
-              <ItemContentNavDevPluginAdmin {...item} />
-            </ItemNavDevPluginAdminContext.Provider>
-          </ItemDragAndDrop>
-        ))}
-
-        <DragOverlay>
-          {activeItemOverlay && (
-            <ItemDragAndDrop
-              {...actionsItem({
-                data: activeItemOverlay,
-              })}
-            >
-              <ItemNavDevPluginAdminContext.Provider
-                value={{
-                  dataFromSSR: edges,
-                  icons,
-                }}
-              >
-                <ItemContentNavDevPluginAdmin {...activeItemOverlay} />
-              </ItemNavDevPluginAdminContext.Provider>
-            </ItemDragAndDrop>
-          )}
-        </DragOverlay>
-      </SortableContext>
-    </DndContext>
+    />
   );
 };
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx
index 17d45290f..f725cc086 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx
@@ -14,19 +14,17 @@ import { useTranslations } from 'next-intl';
 
 import { useCreateNavPluginAdmin } from './hooks/use-create-nav-plugin-admin';
 
-export interface CreateEditNavDevPluginAdminProps {
-  data?: ShowAdminNavPluginsObj;
-  dataFromSSR: Admin__Core_Plugins__Nav__ShowQuery['admin__core_plugins__nav__show'];
-  icons: { icon: React.ReactNode; id: string }[];
-  parentId?: string;
-}
-
 export const CreateEditNavDevPluginAdmin = ({
   data,
   dataFromSSR,
   icons,
   parentId,
-}: CreateEditNavDevPluginAdminProps) => {
+}: {
+  data?: ShowAdminNavPluginsObj;
+  dataFromSSR: Admin__Core_Plugins__Nav__ShowQuery['admin__core_plugins__nav__show'];
+  icons: { icon: React.ReactNode; id: string }[];
+  parentId?: string;
+}) => {
   const t = useTranslations('admin.core.plugins.dev.nav');
   const { onSubmit, formSchema } = useCreateNavPluginAdmin({
     data,
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/actions.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/actions.tsx
index e07285099..204a761b7 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/actions.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/actions.tsx
@@ -1,16 +1,25 @@
-import { ShowAdminNavPluginsObj } from '@/graphql/types';
-import { FlatTree } from '@/helpers/flatten-tree';
+import { Admin__Core_Plugins__Nav__ShowQuery } from '@/graphql/queries/admin/plugins/dev/nav/admin__core_plugins__nav__show.generated';
 
+import { ItemContentNavDevPluginAdmin } from '../item';
 import { DeleteActionTableNavDevPluginAdmin } from './delete/delete';
 import { EditActionTableNavDevPluginAdmin } from './edit';
 
-export const ActionsTableNavDevPluginAdmin = (
-  props: FlatTree<ShowAdminNavPluginsObj>,
-) => {
+export const ActionsTableNavDevPluginAdmin = ({
+  data,
+  parentId,
+  icons,
+  dataFromSSR,
+}: {
+  dataFromSSR: Admin__Core_Plugins__Nav__ShowQuery['admin__core_plugins__nav__show'];
+} & React.ComponentProps<typeof ItemContentNavDevPluginAdmin>) => {
   return (
     <div className="flex gap-1">
-      <EditActionTableNavDevPluginAdmin {...props} />
-      <DeleteActionTableNavDevPluginAdmin {...props} />
+      <EditActionTableNavDevPluginAdmin
+        data={data}
+        dataFromSSR={dataFromSSR}
+        icons={icons}
+      />
+      <DeleteActionTableNavDevPluginAdmin {...data} parentId={parentId} />
     </div>
   );
 };
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/content.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/content.tsx
index 55aa5c69e..5a84faac6 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/content.tsx
@@ -12,18 +12,17 @@ import { useTranslations } from 'next-intl';
 import { useDeleteNavPluginAdmin } from './hooks/use-delete-nav-plugin-admin';
 import { SubmitDeleteActionTableNavDevPluginAdmin } from './submit';
 
-export interface ContentDeleteActionTableNavDevPluginAdminProps
-  extends Pick<ShowAdminNavPluginsObj, 'code'> {
-  parentCode?: string;
+interface Props extends Pick<ShowAdminNavPluginsObj, 'code'> {
+  parentId: string | undefined;
 }
 
 export const ContentDeleteActionTableNavDevPluginAdmin = ({
   code,
-  parentCode,
-}: ContentDeleteActionTableNavDevPluginAdminProps) => {
+  parentId,
+}: Props) => {
   const t = useTranslations('admin.core.plugins.dev.nav.delete');
   const tCore = useTranslations('core');
-  const { onSubmit } = useDeleteNavPluginAdmin({ code, parentCode });
+  const { onSubmit } = useDeleteNavPluginAdmin({ code, parentId });
 
   return (
     <form action={onSubmit}>
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/delete.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/delete.tsx
index efe82f6b3..3608ef397 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/delete.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/delete.tsx
@@ -14,17 +14,12 @@ import { Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 
-import { useItemNavDevPluginAdmin } from '../../hooks/use-item-nav-dev-plugin-admin';
-import {
-  ContentDeleteActionTableNavDevPluginAdmin,
-  ContentDeleteActionTableNavDevPluginAdminProps,
-} from './content';
+import { ContentDeleteActionTableNavDevPluginAdmin } from './content';
 
 export const DeleteActionTableNavDevPluginAdmin = (
-  props: ContentDeleteActionTableNavDevPluginAdminProps,
+  props: React.ComponentProps<typeof ContentDeleteActionTableNavDevPluginAdmin>,
 ) => {
   const t = useTranslations('core');
-  const { parentId } = useItemNavDevPluginAdmin();
 
   return (
     <AlertDialog>
@@ -47,10 +42,7 @@ export const DeleteActionTableNavDevPluginAdmin = (
       </TooltipProvider>
 
       <AlertDialogContent>
-        <ContentDeleteActionTableNavDevPluginAdmin
-          {...props}
-          parentCode={parentId}
-        />
+        <ContentDeleteActionTableNavDevPluginAdmin {...props} />
       </AlertDialogContent>
     </AlertDialog>
   );
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/hooks/use-delete-nav-plugin-admin.ts b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/hooks/use-delete-nav-plugin-admin.ts
index 6158d76ba..262e64357 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/hooks/use-delete-nav-plugin-admin.ts
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/delete/hooks/use-delete-nav-plugin-admin.ts
@@ -3,13 +3,13 @@ import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 
-import { ContentDeleteActionTableNavDevPluginAdminProps } from '../content';
+import { ContentDeleteActionTableNavDevPluginAdmin } from '../content';
 import { mutationApi } from './mutation-api';
 
 export const useDeleteNavPluginAdmin = ({
   code,
-  parentCode,
-}: ContentDeleteActionTableNavDevPluginAdminProps) => {
+  parentId,
+}: React.ComponentProps<typeof ContentDeleteActionTableNavDevPluginAdmin>) => {
   const t = useTranslations('admin.core.plugins.dev.nav.delete');
   const tCore = useTranslations('core');
   const { setOpen } = useAlertDialog();
@@ -21,7 +21,7 @@ export const useDeleteNavPluginAdmin = ({
     const mutation = await mutationApi({
       code,
       pluginCode: Array.isArray(pluginCode) ? pluginCode[0] : pluginCode,
-      parentCode,
+      parentCode: parentId,
     });
 
     if (mutation?.error) {
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/edit.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/edit.tsx
index 0149a5319..edc59d59b 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/edit.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/actions/edit.tsx
@@ -13,14 +13,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { ShowAdminNavPluginsObj } from '@/graphql/types';
-import { FlatTree } from '@/helpers/flatten-tree';
 import { Pencil } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 
-import { useItemNavDevPluginAdmin } from '../hooks/use-item-nav-dev-plugin-admin';
-
 const Content = React.lazy(async () =>
   import('../../create-edit/create-edit').then(module => ({
     default: module.CreateEditNavDevPluginAdmin,
@@ -28,10 +24,9 @@ const Content = React.lazy(async () =>
 );
 
 export const EditActionTableNavDevPluginAdmin = (
-  data: FlatTree<ShowAdminNavPluginsObj>,
+  props: React.ComponentProps<typeof Content>,
 ) => {
   const t = useTranslations('admin.core.plugins.dev.nav');
-  const rest = useItemNavDevPluginAdmin();
 
   return (
     <Dialog>
@@ -55,7 +50,7 @@ export const EditActionTableNavDevPluginAdmin = (
         </DialogHeader>
 
         <React.Suspense fallback={<Loader />}>
-          <Content data={data} {...rest} />
+          <Content {...props} />
         </React.Suspense>
       </DialogContent>
     </Dialog>
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/hooks/use-item-nav-dev-plugin-admin.ts b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/hooks/use-item-nav-dev-plugin-admin.ts
deleted file mode 100644
index 9996deb92..000000000
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/hooks/use-item-nav-dev-plugin-admin.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ShowAdminNavPluginsObj } from '@/graphql/types';
-import React from 'react';
-
-interface Args {
-  dataFromSSR: ShowAdminNavPluginsObj[];
-  icons: { icon: React.ReactNode; id: string }[];
-  parentId?: string;
-}
-
-export const ItemNavDevPluginAdminContext = React.createContext<Args>({
-  dataFromSSR: [],
-  icons: [],
-});
-
-export const useItemNavDevPluginAdmin = () =>
-  React.useContext(ItemNavDevPluginAdminContext);
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/item.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/item.tsx
index 23f6257e1..dd3f6259b 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/item.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/item/item.tsx
@@ -1,21 +1,27 @@
+import { Admin__Core_Plugins__Nav__ShowQuery } from '@/graphql/queries/admin/plugins/dev/nav/admin__core_plugins__nav__show.generated';
 import { ShowAdminNavPluginsObj } from '@/graphql/types';
-import { FlatTree } from '@/helpers/flatten-tree';
 import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
 import { ActionsTableNavDevPluginAdmin } from './actions/actions';
-import { useItemNavDevPluginAdmin } from './hooks/use-item-nav-dev-plugin-admin';
 
-export const ItemContentNavDevPluginAdmin = (
-  data: FlatTree<ShowAdminNavPluginsObj>,
-) => {
+export const ItemContentNavDevPluginAdmin = ({
+  data,
+  parentId,
+  icons,
+  dataFromSSR,
+}: {
+  data: ShowAdminNavPluginsObj;
+  dataFromSSR: Admin__Core_Plugins__Nav__ShowQuery['admin__core_plugins__nav__show'];
+  icons: { icon: React.ReactNode; id: string }[];
+  parentId?: string;
+}) => {
   const { code: pluginCode } = useParams();
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
   const t = useTranslations(`admin_${pluginCode}.nav`);
   const tAdmin = useTranslations('admin.core.plugins.dev.nav');
   const tCore = useTranslations('core');
-  const { parentId, icons } = useItemNavDevPluginAdmin();
   const langKey = parentId ? `${parentId}_${data.code}` : data.code;
 
   return (
@@ -52,7 +58,12 @@ export const ItemContentNavDevPluginAdmin = (
         </p>
       </div>
 
-      <ActionsTableNavDevPluginAdmin {...data} />
+      <ActionsTableNavDevPluginAdmin
+        data={data}
+        dataFromSSR={dataFromSSR}
+        icons={icons}
+        parentId={parentId}
+      />
     </>
   );
 };
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/nav.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/nav.tsx
index e112308b4..e6f2720f2 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/nav.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/nav.tsx
@@ -1,3 +1,4 @@
+import { flattenTree } from '@/components/drag&drop/sortable-list/flat';
 import { Icon } from '@/components/icon/icon';
 import { HeaderContent } from '@/components/ui/header-content';
 import { fetcher } from '@/graphql/fetcher';
@@ -7,7 +8,6 @@ import {
   Admin__Core_Plugins__Nav__ShowQueryVariables,
 } from '@/graphql/queries/admin/plugins/dev/nav/admin__core_plugins__nav__show.generated';
 import { ShowAdminNavPluginsObj } from '@/graphql/types';
-import { flattenTree } from '@/helpers/flatten-tree';
 import { getTranslations } from 'next-intl/server';
 
 import { CreateNavDevPluginAdmin } from './actions/create/create';
@@ -27,6 +27,11 @@ const getData = async (
   return data;
 };
 
+interface NavItem extends Omit<ShowAdminNavPluginsObj, 'children'> {
+  children: NavItem[];
+  id: string;
+}
+
 export interface NavDevPluginAdminViewProps {
   params: { code: string };
 }
@@ -39,18 +44,17 @@ export const NavDevPluginAdminView = async ({
     getTranslations('admin.core.plugins.dev.nav'),
   ]);
 
-  const flattenData = flattenTree<ShowAdminNavPluginsObj>({
-    tree: data.admin__core_plugins__nav__show.map(nav => ({
+  const flattenData = flattenTree<NavItem>(
+    data.admin__core_plugins__nav__show.map(nav => ({
       id: nav.code,
       ...nav,
-      children:
-        nav.children?.map(child => ({
-          id: `${nav.code}_${child.code}`,
-          ...child,
-          children: [],
-        })) ?? [],
+      children: (nav.children?.map(child => ({
+        id: `${nav.code}_${child.code}`,
+        ...child,
+        children: [],
+      })) ?? []) as NavItem[],
     })),
-  });
+  );
 
   const icons: {
     icon: React.ReactNode;
diff --git a/packages/frontend/src/views/admin/views/core/styles/nav/nav-admin-view.tsx b/packages/frontend/src/views/admin/views/core/styles/nav/nav-admin-view.tsx
index 855ec1c40..9cfa279e8 100644
--- a/packages/frontend/src/views/admin/views/core/styles/nav/nav-admin-view.tsx
+++ b/packages/frontend/src/views/admin/views/core/styles/nav/nav-admin-view.tsx
@@ -1,4 +1,3 @@
-import { Card } from '@/components/ui/card';
 import { HeaderContent } from '@/components/ui/header-content';
 import { fetcher } from '@/graphql/fetcher';
 import {
@@ -44,9 +43,7 @@ export const NavAdminView = async () => {
         <ActionsNavAdmin />
       </HeaderContent>
 
-      <Card className="p-6">
-        <TableNavAdmin {...data} />
-      </Card>
+      <TableNavAdmin {...data} />
     </>
   );
 };
diff --git a/packages/frontend/src/views/admin/views/core/styles/nav/table/item.tsx b/packages/frontend/src/views/admin/views/core/styles/nav/table/item.tsx
deleted file mode 100644
index 692b2eede..000000000
--- a/packages/frontend/src/views/admin/views/core/styles/nav/table/item.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ShowCoreNav } from '@/graphql/types';
-import { FlatTree } from '@/helpers/flatten-tree';
-import { useTextLang } from '@/hooks/use-text-lang';
-import { ExternalLink } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-
-import { ActionsTableNavAdmin } from './actions/actions';
-
-export const ItemContentTableContentNavAdmin = ({
-  data,
-}: {
-  data: FlatTree<Omit<ShowCoreNav, '__typename'>>;
-}) => {
-  const t = useTranslations('admin.core.styles.nav');
-  const { convertText } = useTextLang();
-
-  return (
-    <>
-      <div className="flex flex-1 flex-col">
-        <div className="flex items-center gap-2">
-          <span className="flex items-center gap-1 font-semibold">
-            {convertText(data.name)}
-          </span>
-        </div>
-
-        <span className="text-muted-foreground line-clamp-2 flex items-center gap-2 text-sm">
-          {t('href', { href: data.href })}{' '}
-          {data.external && <ExternalLink className="size-4" />}
-        </span>
-
-        {data.description.length > 0 && (
-          <span className="text-muted-foreground line-clamp-2 text-sm">
-            {convertText(data.description)}
-          </span>
-        )}
-      </div>
-
-      <ActionsTableNavAdmin {...data} />
-    </>
-  );
-};
diff --git a/packages/frontend/src/views/admin/views/core/styles/nav/table/table.tsx b/packages/frontend/src/views/admin/views/core/styles/nav/table/table.tsx
index 4fd0b44bc..9c29047fc 100644
--- a/packages/frontend/src/views/admin/views/core/styles/nav/table/table.tsx
+++ b/packages/frontend/src/views/admin/views/core/styles/nav/table/table.tsx
@@ -1,70 +1,56 @@
 'use client';
 
-import { ItemDragAndDrop } from '@/components/drag&drop-item';
+import { DragAndDropSortableList } from '@/components/drag&drop/sortable-list/list';
 import { Admin__Core_Nav__ShowQuery } from '@/graphql/queries/admin/styles/nav/admin__core_nav__show.generated';
-import { ShowCoreNav } from '@/graphql/types';
-import { useDragAndDrop } from '@/hooks/drag&drop/use-functions';
-import { closestCorners, DndContext, DragOverlay } from '@dnd-kit/core';
-import {
-  SortableContext,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
+import { useTextLang } from '@/hooks/use-text-lang';
+import { ExternalLink } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 import { toast } from 'sonner';
 
+import { ActionsTableNavAdmin } from './actions/actions';
 import { mutationChangePositionApi } from './hooks/mutation-change-position-api';
-import { ItemContentTableContentNavAdmin } from './item';
-
-const indentationWidth = 20;
 
 export const TableNavAdmin = ({
   core_nav__show: { edges },
 }: Admin__Core_Nav__ShowQuery) => {
-  const t = useTranslations('core');
-  const [initData, setData] =
-    React.useState<Omit<ShowCoreNav, '__typename'>[]>(edges);
-  const data = initData.map(item => ({
-    ...item,
-    children: item.children.map(child => ({ ...child, children: [] })),
-  }));
-
-  const {
-    actionsItem,
-    activeItemOverlay,
-    flattenedItems,
-    onDragEnd,
-    onDragMove,
-    onDragOver,
-    onDragStart,
-    resetState,
-    sortedIds,
-  } = useDragAndDrop<Omit<ShowCoreNav, '__typename'>>({
-    data,
-  });
-
-  // Revalidate items when edges change
-  React.useEffect(() => {
-    setData(edges);
-  }, [edges]);
-
-  if (data.length === 0) {
-    return <div className="text-center">{t('no_results')}</div>;
-  }
+  const t = useTranslations('admin.core.styles.nav');
+  const tCore = useTranslations('core.errors');
+  const { convertText } = useTextLang();
 
   return (
-    <DndContext
-      collisionDetection={closestCorners}
-      onDragCancel={resetState}
-      onDragEnd={async event => {
-        const moveTo = onDragEnd<ShowCoreNav>({
-          data,
-          setData,
-          ...event,
-        });
+    <DragAndDropSortableList
+      componentItem={data => {
+        return (
+          <div className="flex flex-1 items-center justify-between gap-2">
+            <div className="flex flex-1 flex-col">
+              <div className="flex items-center gap-2">
+                <span className="flex items-center gap-1 font-semibold">
+                  {convertText(data.name)}
+                </span>
+              </div>
 
-        if (!moveTo) return;
+              <span className="text-muted-foreground line-clamp-2 flex items-center gap-2 text-sm">
+                {t('href', { href: data.href })}{' '}
+                {data.external && <ExternalLink className="size-4" />}
+              </span>
 
+              {data.description.length > 0 && (
+                <span className="text-muted-foreground line-clamp-2 text-sm">
+                  {convertText(data.description)}
+                </span>
+              )}
+            </div>
+            <ActionsTableNavAdmin {...data} />
+          </div>
+        );
+      }}
+      data={edges.map(item => ({
+        ...item,
+        children: item.children.map(child => ({ ...child, children: [] })),
+      }))}
+      maxDepth={1}
+      onDragEnd={async moveTo => {
         try {
           await mutationChangePositionApi({
             id: Number(moveTo.id),
@@ -72,42 +58,11 @@ export const TableNavAdmin = ({
             parentId: Number(moveTo.parentId),
           });
         } catch (_) {
-          toast.error(t('errors.title'), {
-            description: t('errors.internal_server_error'),
+          toast.error(tCore('title'), {
+            description: tCore('internal_server_error'),
           });
         }
       }}
-      onDragMove={e => {
-        onDragMove({ ...e, flattenedItems, indentationWidth, maxDepth: 1 });
-      }}
-      onDragOver={onDragOver}
-      onDragStart={onDragStart}
-    >
-      <SortableContext items={sortedIds} strategy={verticalListSortingStrategy}>
-        {flattenedItems.map(item => (
-          <ItemDragAndDrop
-            key={item.id}
-            {...actionsItem({
-              data: item,
-              indentationWidth,
-            })}
-          >
-            <ItemContentTableContentNavAdmin data={item} />
-          </ItemDragAndDrop>
-        ))}
-
-        <DragOverlay>
-          {activeItemOverlay && (
-            <ItemDragAndDrop
-              {...actionsItem({
-                data: activeItemOverlay,
-              })}
-            >
-              <ItemContentTableContentNavAdmin data={activeItemOverlay} />
-            </ItemDragAndDrop>
-          )}
-        </DragOverlay>
-      </SortableContext>
-    </DndContext>
+    />
   );
 };