diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index feb5ce46f50..1bdf5803e6a 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -806,9 +806,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@preact/signals-core@1.8.0':
-    resolution: {integrity: sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==}
-
   '@react-aria/breadcrumbs@3.5.13':
     resolution: {integrity: sha512-G1Gqf/P6kVdfs94ovwP18fTWuIxadIQgHsXS08JEVcFVYMjb9YjqnEBaohUxD1tq2WldMbYw53ahQblT4NTG+g==}
     peerDependencies:
@@ -4508,8 +4505,6 @@ snapshots:
     dependencies:
       playwright: 1.48.0
 
-  '@preact/signals-core@1.8.0': {}
-
   '@react-aria/breadcrumbs@3.5.13(react@18.3.1)':
     dependencies:
       '@react-aria/i18n': 3.11.1(react@18.3.1)
diff --git a/app/src/components/dnd/DragHandle.tsx b/app/src/components/dnd/DragHandle.tsx
index d63bfd047ed..69616f112b2 100644
--- a/app/src/components/dnd/DragHandle.tsx
+++ b/app/src/components/dnd/DragHandle.tsx
@@ -1,10 +1,27 @@
 import React from "react";
+import { DraggableAttributes } from "@dnd-kit/core";
 import { css } from "@emotion/react";
 
-function DragHandle() {
+// This is the type of the listeners object from useSortable
+// However it is not exported from @dnd-kit/core so we have to redefine it here
+// eslint-disable-next-line @typescript-eslint/ban-types
+type Listeners = Record<string, Function>;
+
+function DragHandle(
+  {
+    listeners,
+    attributes,
+  }: {
+    listeners?: Listeners;
+    attributes: DraggableAttributes;
+  },
+  ref: React.Ref<HTMLButtonElement>
+) {
   return (
     <button
-      data-cypress="draggable-handle"
+      ref={ref}
+      {...listeners}
+      {...attributes}
       aria-roledescription="draggable"
       aria-pressed="false"
       aria-disabled="false"
diff --git a/app/src/components/dnd/helpers/move.ts b/app/src/components/dnd/helpers/move.ts
deleted file mode 100644
index 702264423f1..00000000000
--- a/app/src/components/dnd/helpers/move.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-/**
- * Copy of @dnd-kit/utils for a needed fix
- * TODO: switch to @dnd-kit/helpers once the fix is released
- * @src https://github.com/clauderic/dnd-kit/blob/experimental/packages/helpers/src/move.ts
- */
-import type {
-  DragDropEvents,
-  DragDropManager,
-  Draggable,
-  Droppable,
-  UniqueIdentifier,
-} from "@dnd-kit/abstract";
-
-/**
- * Move an array item to a different position. Returns a new array with the item moved to the new position.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function arrayMove<T extends any[]>(
-  array: T,
-  from: number,
-  to: number
-): T {
-  if (from === to) {
-    return array;
-  }
-
-  const newArray = array.slice() as T;
-  newArray.splice(to, 0, newArray.splice(from, 1)[0]);
-
-  return newArray;
-}
-
-/**
- * Move an array item to a different position. Returns a new array with the item moved to the new position.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function arraySwap<T extends any[]>(
-  array: T,
-  from: number,
-  to: number
-): T {
-  if (from === to) {
-    return array;
-  }
-
-  const newArray = array.slice() as T;
-  const item = newArray[from];
-
-  newArray[from] = newArray[to];
-  newArray[to] = item;
-
-  return newArray;
-}
-
-type Items = UniqueIdentifier[] | { id: UniqueIdentifier }[];
-
-function mutate<
-  T extends Items | Record<UniqueIdentifier, Items>,
-  U extends Draggable,
-  V extends Droppable,
-  W extends DragDropManager<U, V>,
->(
-  items: T,
-  event: Parameters<
-    DragDropEvents<U, V, W>["dragover"] | DragDropEvents<U, V, W>["dragend"]
-  >[0],
-  mutation: typeof arrayMove | typeof arraySwap
-): T {
-  const { source, target, canceled } = event.operation;
-
-  if (!source || !target || canceled || source.id === target.id) {
-    if ("preventDefault" in event) event.preventDefault();
-    return items;
-  }
-
-  const findIndex = (item: Items[0], id: UniqueIdentifier) =>
-    item === id || (typeof item === "object" && "id" in item && item.id === id);
-
-  if (Array.isArray(items)) {
-    const sourceIndex = items.findIndex((item) => findIndex(item, source.id));
-    const targetIndex = items.findIndex((item) => findIndex(item, target.id));
-
-    if (sourceIndex === -1 || targetIndex === -1) {
-      return items;
-    }
-
-    // Reconcile optimistic updates
-    if (!canceled && "index" in source && typeof source.index === "number") {
-      const projectedSourceIndex = source.index;
-
-      if (projectedSourceIndex !== sourceIndex) {
-        return mutation(items, sourceIndex, projectedSourceIndex);
-      }
-    }
-
-    return mutation(items, sourceIndex, targetIndex);
-  }
-
-  const entries = Object.entries(items);
-
-  let sourceIndex = -1;
-  let sourceParent: UniqueIdentifier | undefined;
-  let targetIndex = -1;
-  let targetParent: UniqueIdentifier | undefined;
-
-  for (const [id, children] of entries) {
-    if (sourceIndex === -1) {
-      sourceIndex = children.findIndex((item) => findIndex(item, source.id));
-
-      if (sourceIndex !== -1) {
-        sourceParent = id;
-      }
-    }
-
-    if (targetIndex === -1) {
-      targetIndex = children.findIndex((item) => findIndex(item, target.id));
-
-      if (targetIndex !== -1) {
-        targetParent = id;
-      }
-    }
-
-    if (sourceIndex !== -1 && targetIndex !== -1) {
-      break;
-    }
-  }
-
-  if (!source.manager) return items;
-
-  const { dragOperation } = source.manager;
-  const position =
-    dragOperation.shape?.current.center ?? dragOperation.position.current;
-
-  if (targetParent == null) {
-    if (target.id in items) {
-      const insertionIndex =
-        target.shape && position.y > target.shape.center.y
-          ? items[target.id].length
-          : 0;
-
-      // The target does not have any matching children, but appears to be a valid target
-      targetParent = target.id;
-      targetIndex = insertionIndex;
-    }
-  }
-
-  if (
-    sourceParent == null ||
-    targetParent == null ||
-    (sourceParent === targetParent && sourceIndex === targetIndex)
-  ) {
-    if ("preventDefault" in event) event.preventDefault();
-
-    return items;
-  }
-
-  if (sourceParent === targetParent) {
-    return {
-      ...items,
-      [sourceParent]: mutation(items[sourceParent], sourceIndex, targetIndex),
-    };
-  }
-
-  const isBelowTarget = target.shape && position.y > target.shape.center.y;
-  const modifier = isBelowTarget ? 1 : 0;
-  const sourceItem = items[sourceParent][sourceIndex];
-
-  return {
-    ...items,
-    [sourceParent]: [
-      ...items[sourceParent].slice(0, sourceIndex),
-      ...items[sourceParent].slice(sourceIndex + 1),
-    ],
-    [targetParent]: [
-      ...items[targetParent].slice(0, targetIndex + modifier),
-      sourceItem,
-      ...items[targetParent].slice(targetIndex + modifier),
-    ],
-  };
-}
-
-export function move<
-  T extends Items | Record<UniqueIdentifier, Items>,
-  U extends Draggable,
-  V extends Droppable,
-  W extends DragDropManager<U, V>,
->(
-  items: T,
-  event: Parameters<
-    DragDropEvents<U, V, W>["dragover"] | DragDropEvents<U, V, W>["dragend"]
-  >[0]
-) {
-  return mutate(items, event, arrayMove);
-}
-
-export function swap<
-  T extends Items | Record<UniqueIdentifier, Items>,
-  U extends Draggable,
-  V extends Droppable,
-  W extends DragDropManager<U, V>,
->(
-  items: T,
-  event: Parameters<
-    DragDropEvents<U, V, W>["dragover"] | DragDropEvents<U, V, W>["dragend"]
-  >[0]
-) {
-  return mutate(items, event, arraySwap);
-}
diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx
index 5d5f34ef893..90fdf32c43a 100644
--- a/app/src/pages/playground/PlaygroundChatTemplate.tsx
+++ b/app/src/pages/playground/PlaygroundChatTemplate.tsx
@@ -49,6 +49,7 @@ interface PlaygroundChatTemplateProps extends PlaygroundInstanceProps {}
 
 export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
   const id = props.playgroundInstanceId;
+
   const instances = usePlaygroundContext((state) => state.instances);
   const updateInstance = usePlaygroundContext((state) => state.updateInstance);
   const playgroundInstance = instances.find((instance) => instance.id === id);