diff --git a/src/components/dnd/StorableItem.tsx b/src/components/dnd/StorableItem.tsx
deleted file mode 100644
index 950775124..000000000
--- a/src/components/dnd/StorableItem.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { AppShelfItem } from '../AppShelf/AppShelf';
-
-export function SortableItem(props: any) {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id: props.id,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
-  return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <AppShelfItem service={props.service} />
-    </div>
-  );
-}
diff --git a/src/pages/trynewdnd.tsx b/src/pages/trynewdnd.tsx
deleted file mode 100644
index 7de52d989..000000000
--- a/src/pages/trynewdnd.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-import {
-  closestCenter,
-  DndContext,
-  DragOverlay,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { Grid } from '@mantine/core';
-import { SortableItem } from '../components/dnd/StorableItem';
-import { AppShelfItem } from '../components/AppShelf/AppShelf';
-import { useConfig } from '../tools/state';
-
-export default function App() {
-  const [activeId, setActiveId] = useState(null);
-  const { config, setConfig } = useConfig();
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCenter}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <SortableContext items={config.services}>
-        <Grid gutter="xl" align="center">
-          {config.services.map((service) => (
-            <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
-              <SortableItem service={service} key={service.id} id={service.id} />
-            </Grid.Col>
-          ))}
-        </Grid>
-      </SortableContext>
-      <DragOverlay>
-        {activeId ? (
-          <AppShelfItem service={config.services.find((e) => e.id === activeId)} id={activeId} />
-        ) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-
-  function handleDragStart(event: any) {
-    const { active } = event;
-
-    setActiveId(active.id);
-  }
-
-  function handleDragEnd(event: any) {
-    const { active, over } = event;
-
-    if (active.id !== over.id) {
-      const newConfig = { ...config };
-      const activeIndex = newConfig.services.findIndex((e) => e.id === active.id);
-      const overIndex = newConfig.services.findIndex((e) => e.id === over.id);
-      newConfig.services = arrayMove(newConfig.services, activeIndex, overIndex);
-      setConfig(newConfig);
-    }
-
-    setActiveId(null);
-  }
-}