diff --git a/apps/demo/app/[...puckPath]/client.tsx b/apps/demo/app/[...puckPath]/client.tsx
index 6fa5b53ef..41396d945 100644
--- a/apps/demo/app/[...puckPath]/client.tsx
+++ b/apps/demo/app/[...puckPath]/client.tsx
@@ -20,6 +20,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
           onPublish={async (data: Data) => {
             localStorage.setItem(key, JSON.stringify(data));
           }}
+          iframe={{ enabled: false }}
           plugins={[headingAnalyzer]}
           headerPath={path}
           overrides={{
diff --git a/apps/demo/config/blocks/Blank/index.tsx b/apps/demo/config/blocks/Blank/index.tsx
index 2ddd037d5..77497d86b 100644
--- a/apps/demo/config/blocks/Blank/index.tsx
+++ b/apps/demo/config/blocks/Blank/index.tsx
@@ -8,9 +8,17 @@ const getClassName = getClassNameFactory("Hero", styles);
 export type HeroProps = {};
 
 export const Hero: ComponentConfig<HeroProps> = {
-  fields: {},
+  fields: {
+    myDropZone: {
+      type: "dropzone",
+    },
+  },
   defaultProps: {},
-  render: () => {
-    return <div className={getClassName()}></div>;
+  render: ({ myDropZone }) => {
+    return (
+      <div className={getClassName()}>
+        <DropZone style={{ display: "flex" }} zone="my-zone" />
+      </div>
+    );
   },
 };
diff --git a/apps/demo/config/blocks/Card/index.tsx b/apps/demo/config/blocks/Card/index.tsx
index 0ecd53f39..7b2b5eaad 100644
--- a/apps/demo/config/blocks/Card/index.tsx
+++ b/apps/demo/config/blocks/Card/index.tsx
@@ -51,9 +51,10 @@ export const Card: ComponentConfig<CardProps> = {
     icon: "Feather",
     mode: "flat",
   },
-  render: ({ title, icon, description, mode }) => {
+  inline: true,
+  render: ({ title, icon, description, mode, puck }) => {
     return (
-      <div className={getClassName({ [mode]: mode })}>
+      <div className={getClassName({ [mode]: mode })} ref={puck.dragRef}>
         <div className={getClassName("icon")}>{icons[icon]}</div>
         <div className={getClassName("title")}>{title}</div>
         <div className={getClassName("description")}>{description}</div>
diff --git a/apps/demo/config/blocks/Card/styles.module.css b/apps/demo/config/blocks/Card/styles.module.css
index e8d2f0480..bb9c78b7c 100644
--- a/apps/demo/config/blocks/Card/styles.module.css
+++ b/apps/demo/config/blocks/Card/styles.module.css
@@ -1,21 +1,19 @@
 .Card {
   display: flex;
+  grid-row: 1;
   flex-direction: column;
   align-items: center;
-  margin-left: auto;
-  margin-right: auto;
   gap: 16px;
-  width: 100%;
+  /* width: 100%; */
 }
 
 .Card--card {
   background: white;
   box-shadow: rgba(140, 152, 164, 0.25) 0px 3px 6px 0px;
+  box-sizing: border-box;
   border-radius: 8px;
   flex: 1;
   max-width: 100%;
-  margin-left: unset;
-  margin-right: unset;
   padding: 24px;
   align-items: flex-start;
   width: auto;
diff --git a/apps/demo/config/blocks/Flex/index.tsx b/apps/demo/config/blocks/Flex/index.tsx
index 135d19173..1012a44f3 100644
--- a/apps/demo/config/blocks/Flex/index.tsx
+++ b/apps/demo/config/blocks/Flex/index.tsx
@@ -8,47 +8,48 @@ import { Section } from "../../components/Section";
 const getClassName = getClassNameFactory("Flex", styles);
 
 export type FlexProps = {
-  items: { minItemWidth?: number }[];
-  minItemWidth: number;
+  direction: "row" | "column";
+  gap: number;
+  wrap: "wrap" | "nowrap";
 };
 
 export const Flex: ComponentConfig<FlexProps> = {
   fields: {
-    items: {
-      type: "array",
-      arrayFields: {
-        minItemWidth: {
-          label: "Minimum Item Width",
-          type: "number",
-          min: 0,
-        },
-      },
-      getItemSummary: (_, id) => `Item ${id + 1}`,
+    direction: {
+      label: "Direction",
+      type: "radio",
+      options: [
+        { label: "row", value: "row" },
+        { label: "column", value: "column" },
+      ],
     },
-    minItemWidth: {
-      label: "Minimum Item Width",
+    gap: {
+      label: "Gap",
       type: "number",
       min: 0,
     },
+    wrap: {
+      label: "Wrap",
+      type: "radio",
+      options: [
+        { label: "true", value: "wrap" },
+        { label: "false", value: "nowrap" },
+      ],
+    },
   },
   defaultProps: {
-    items: [{}, {}],
-    minItemWidth: 356,
+    direction: "row",
+    gap: 24,
+    wrap: "wrap",
   },
-  render: ({ items, minItemWidth }) => {
+  render: ({ direction, gap, wrap }) => {
     return (
       <Section>
-        <div className={getClassName()}>
-          {items.map((item, idx) => (
-            <div
-              key={idx}
-              className={getClassName("item")}
-              style={{ minWidth: item.minItemWidth || minItemWidth }}
-            >
-              <DropZone zone={`item-${idx}`} />
-            </div>
-          ))}
-        </div>
+        <DropZone
+          className={getClassName()}
+          style={{ flexDirection: direction, gap, flexWrap: wrap }}
+          zone="flex"
+        />
       </Section>
     );
   },
diff --git a/apps/demo/config/blocks/Flex/styles.module.css b/apps/demo/config/blocks/Flex/styles.module.css
index a40652db8..f4e56ed6f 100644
--- a/apps/demo/config/blocks/Flex/styles.module.css
+++ b/apps/demo/config/blocks/Flex/styles.module.css
@@ -1,8 +1,5 @@
 .Flex {
   display: flex;
-  gap: 24px;
-  min-height: 0;
-  min-width: 0;
   flex-wrap: wrap;
 }
 
diff --git a/apps/demo/config/index.tsx b/apps/demo/config/index.tsx
index 80649317c..4d77a74cc 100644
--- a/apps/demo/config/index.tsx
+++ b/apps/demo/config/index.tsx
@@ -2,6 +2,8 @@ import { Config, Data } from "@/core";
 import { ButtonGroup, ButtonGroupProps } from "./blocks/ButtonGroup";
 import { Card, CardProps } from "./blocks/Card";
 import { Columns, ColumnsProps } from "./blocks/Columns";
+import { Grid, GridProps } from "./blocks/Grid";
+import { GridItem, GridItemProps } from "./blocks/GridItem";
 import { Hero, HeroProps } from "./blocks/Hero";
 import { Heading, HeadingProps } from "./blocks/Heading";
 import { Flex, FlexProps } from "./blocks/Flex";
@@ -18,6 +20,8 @@ export type Props = {
   ButtonGroup: ButtonGroupProps;
   Card: CardProps;
   Columns: ColumnsProps;
+  Grid: GridProps;
+  GridItem: GridItemProps;
   Hero: HeroProps;
   Heading: HeadingProps;
   Flex: FlexProps;
@@ -43,7 +47,7 @@ export const conf: UserConfig = {
   },
   categories: {
     layout: {
-      components: ["Columns", "Flex", "VerticalSpace"],
+      components: ["Columns", "Grid", "GridItem", "Flex", "VerticalSpace"],
     },
     typography: {
       components: ["Heading", "Text"],
@@ -57,6 +61,8 @@ export const conf: UserConfig = {
     ButtonGroup,
     Card,
     Columns,
+    Grid,
+    GridItem,
     Hero,
     Heading,
     Flex,
@@ -68,6 +74,121 @@ export const conf: UserConfig = {
 };
 
 export const initialData: Record<string, Data> = {
+  "/grid": {
+    root: { props: { title: "Puck Example" } },
+    content: [
+      {
+        type: "Grid",
+        props: {
+          distribution: "auto",
+          id: "Grid-1",
+        },
+      },
+      // {
+      //   type: "Grid",
+      //   props: {
+      //     distribution: "auto",
+      //     id: "Grid-2",
+      //   },
+      // },
+    ],
+    zones: {
+      "Grid-2:grid": [
+        {
+          type: "Card",
+          props: {
+            title: "Built for content teams",
+            description:
+              "Puck enables content teams to make changes to their content without a developer or breaking the UI.",
+            icon: "pen-tool",
+            mode: "flat",
+            id: "Card-0d9077e00e0ad66c34c62ab6986967e1ce04f9e41",
+          },
+        },
+        {
+          type: "Card",
+          props: {
+            title: "Easy to integrate",
+            description:
+              "Front-end developers can easily integrate their own components using a familiar React API.",
+            icon: "git-merge",
+            mode: "flat",
+            id: "Card-978bef5d136d4b0d9855f5272429986ceb22e5a61",
+          },
+        },
+        {
+          type: "Card",
+          props: {
+            title: "No vendor lock-in",
+            description:
+              "Completely open-source, Puck is designed to be integrated into your existing React application.",
+            icon: "github",
+            mode: "flat",
+            id: "Card-133a61826f0019841aec6f0aec011bf07e6bc6de1",
+          },
+        },
+      ],
+      "Grid-1:grid": [
+        {
+          type: "GridItem",
+          props: {
+            id: "GridItem-1",
+          },
+        },
+        {
+          type: "GridItem",
+          props: {
+            id: "GridItem-2",
+          },
+        },
+        {
+          type: "GridItem",
+          props: {
+            id: "GridItem-3",
+          },
+        },
+      ],
+      "GridItem-1:items": [
+        {
+          type: "Card",
+          props: {
+            title: "Built for content teams",
+            description:
+              "Puck enables content teams to make changes to their content without a developer or breaking the UI.",
+            icon: "pen-tool",
+            mode: "flat",
+            id: "Card-0d9077e00e0ad66c34c62ab6986967e1ce04f9e4",
+          },
+        },
+      ],
+      "GridItem-2:items": [
+        {
+          type: "Card",
+          props: {
+            title: "Easy to integrate",
+            description:
+              "Front-end developers can easily integrate their own components using a familiar React API.",
+            icon: "git-merge",
+            mode: "flat",
+            id: "Card-978bef5d136d4b0d9855f5272429986ceb22e5a6",
+          },
+        },
+      ],
+      "GridItem-3:items": [
+        {
+          type: "Card",
+          props: {
+            title: "No vendor lock-in",
+            description:
+              "Completely open-source, Puck is designed to be integrated into your existing React application.",
+            icon: "github",
+            mode: "flat",
+            id: "Card-133a61826f0019841aec6f0aec011bf07e6bc6de",
+          },
+        },
+      ],
+    },
+  },
   "/": {
     content: [
       {
diff --git a/apps/demo/config/root.tsx b/apps/demo/config/root.tsx
index 621ab9aeb..49f5c0362 100644
--- a/apps/demo/config/root.tsx
+++ b/apps/demo/config/root.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import { DefaultRootProps } from "@/core";
+import { DefaultRootProps, DropZone } from "@/core";
 import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 
@@ -13,7 +13,7 @@ function Root({ children, puck }: RootProps) {
   return (
     <>
       <Header editMode={puck.isEditing} />
-      {children}
+      <DropZone zone={"default-zone"} disallow={["GridItem"]} />
       <Footer>
         <Footer.List title="Section">
           <Footer.Link href="">Label</Footer.Link>
diff --git a/packages/core/components/AutoField/fields/ArrayField/index.tsx b/packages/core/components/AutoField/fields/ArrayField/index.tsx
index 196ae1823..77dac0a31 100644
--- a/packages/core/components/AutoField/fields/ArrayField/index.tsx
+++ b/packages/core/components/AutoField/fields/ArrayField/index.tsx
@@ -4,13 +4,13 @@ import { List, Plus, Trash } from "lucide-react";
 import { AutoFieldPrivate, FieldPropsInternal } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
-import { Droppable } from "../../../Droppable";
-import { Draggable } from "../../../Draggable";
+import { Droppable } from "../../../LegacyDnd/Droppable";
+import { Draggable } from "../../../LegacyDnd/Draggable";
 import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
 import { ArrayState, ItemWithId } from "../../../../types/Config";
 import { useAppContext } from "../../../Puck/context";
-import { DragDropContext } from "../../../DragDropContext";
+import { DragDropContext } from "../../../LegacyDnd/DragDropContext";
 
 const getClassName = getClassNameFactory("ArrayField", styles);
 const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);
diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
index b651c1442..03576e96a 100644
--- a/packages/core/components/ComponentList/index.tsx
+++ b/packages/core/components/ComponentList/index.tsx
@@ -10,15 +10,14 @@ const getClassName = getClassNameFactory("ComponentList", styles);
 const ComponentListItem = ({
   name,
   label,
-  index,
 }: {
   name: string;
   label?: string;
-  index: number;
+  index?: number; // TODO deprecate
 }) => {
   const { overrides } = useAppContext();
   return (
-    <Drawer.Item label={label} name={name} index={index}>
+    <Drawer.Item label={label} name={name}>
       {overrides.componentItem}
     </Drawer.Item>
   );
@@ -68,7 +67,7 @@ const ComponentList = ({
       <div className={getClassName("content")}>
         <Drawer droppableId={title}>
           {children ||
-            Object.keys(config.components).map((componentKey, i) => {
+            Object.keys(config.components).map((componentKey) => {
               return (
                 <ComponentListItem
                   key={componentKey}
@@ -76,7 +75,6 @@ const ComponentList = ({
                     config.components[componentKey]["label"] ?? componentKey
                   }
                   name={componentKey}
-                  index={i}
                 />
               );
             })}
diff --git a/packages/core/components/DragDropContext/NestedDroppablePlugin.ts b/packages/core/components/DragDropContext/NestedDroppablePlugin.ts
new file mode 100644
index 000000000..50d4a3134
--- /dev/null
+++ b/packages/core/components/DragDropContext/NestedDroppablePlugin.ts
@@ -0,0 +1,206 @@
+import { DragDropManager } from "@dnd-kit/dom";
+import { Plugin } from "@dnd-kit/abstract";
+
+import type { Droppable } from "@dnd-kit/dom";
+
+import { effects } from "../../../../../dnd-kit/packages/state/dist";
+import { BoundingRectangle } from "@dnd-kit/geometry";
+import { throttle } from "../../lib/throttle";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+function isPositionInsideRect(
+  position: Position,
+  rect: BoundingRectangle
+): boolean {
+  return (
+    position.x >= rect.left &&
+    position.x <= rect.right &&
+    position.y >= rect.top &&
+    position.y <= rect.bottom
+  );
+}
+
+type NestedDroppablePluginOptions = {
+  onChange: (params: {
+    deepestAreaId: string | null;
+    deepestZoneId: string | null;
+  }) => void;
+};
+
+// Something is going wrong with tearing down the classes.
+// This is an awful hack to prevent the plugin from running more than once.
+let globallyRegistered = false;
+
+// Pixels to buffer sortable items by, helping when
+// 2 items are butted up against each-other
+const BUFFER_ZONE = 8;
+
+// Force shapes to refresh on mouse move.
+// TODO Expensive - can I remove this? Or restrict to during drag only?
+const REFRESH_ON_MOVE = true;
+
+const depthSort = (candidates: Droppable[]) => {
+  return candidates.sort((a, b) => {
+    // Use depth instead of ref, as this is 1) faster and 2) handles cases where a and b share a ref
+    if (a.data.depth > b.data.depth) {
+      return 1;
+    }
+
+    if (b.data.depth > a.data.depth) {
+      return -1;
+    }
+
+    return 0;
+  });
+};
+
+const getZoneId = (candidate: Droppable | undefined) => {
+  let id: string | null = candidate?.id as string;
+
+  if (!candidate) return null;
+
+  if (!candidate.data.zone) {
+    if (candidate.data.containsActiveZone) {
+      id = null;
+    } else {
+      id = candidate.data.group;
+    }
+  }
+
+  return id;
+};
+
+const getAreaId = (candidate: Droppable) => {
+  if (candidate.data.containsActiveZone) {
+    return candidate.id as string;
+  }
+
+  return null;
+};
+
+const getDeepestId = (
+  candidates: Droppable[],
+  idFn: (candidate: Droppable) => string | null
+) => {
+  let id: string | null = null;
+
+  for (let i = 0; i < candidates.length; i++) {
+    const candidate = candidates[i];
+
+    id = idFn(candidate);
+
+    if (id) break;
+  }
+
+  return id;
+};
+
+const expandHitBox = (rect: BoundingRectangle): BoundingRectangle => {
+  return {
+    bottom: rect.bottom + BUFFER_ZONE,
+    top: rect.top - BUFFER_ZONE,
+    width: rect.width + BUFFER_ZONE * 2,
+    height: rect.height + BUFFER_ZONE * 2,
+    left: rect.left - BUFFER_ZONE,
+    right: rect.right + BUFFER_ZONE,
+  };
+};
+
+export const createNestedDroppablePlugin = ({
+  onChange,
+}: NestedDroppablePluginOptions) =>
+  class NestedDroppablePlugin extends Plugin<DragDropManager, {}> {
+    constructor(manager: DragDropManager, options?: {}) {
+      super(manager);
+
+      const cleanupEffect = effects(() => {
+        const getPointerCollisions = (position: Position) => {
+          const candidates: Droppable[] = [];
+          for (const droppable of manager.registry.droppables.value) {
+            if (droppable.shape) {
+              let rect = droppable.shape.boundingRectangle;
+
+              const isNotSourceZone =
+                droppable.id !==
+                (manager.dragOperation.source?.data.group ||
+                  manager.dragOperation.source?.id);
+
+              const isNotTargetZone =
+                droppable.id !==
+                (manager.dragOperation.source?.data.group ||
+                  manager.dragOperation.source?.id);
+
+              // Expand hitboxes on zones
+              if (droppable.data.zone && isNotSourceZone && isNotTargetZone) {
+                rect = expandHitBox(rect);
+              }
+
+              if (isPositionInsideRect(position, rect)) {
+                candidates.push(droppable);
+              }
+            }
+          }
+
+          return candidates;
+        };
+
+        const handleMove = (position: Position) => {
+          if (REFRESH_ON_MOVE) {
+            for (const droppable of manager.registry.droppables.value) {
+              droppable.refreshShape();
+            }
+          }
+
+          const candidates = getPointerCollisions(position);
+
+          if (candidates.length > 0) {
+            const sortedCandidates = depthSort(candidates);
+
+            const draggedCandidateIndex = sortedCandidates.findIndex(
+              (candidate) => candidate.id === manager.dragOperation.source?.id
+            );
+
+            const nonDraggedCandidates =
+              draggedCandidateIndex > -1
+                ? sortedCandidates.slice(0, draggedCandidateIndex)
+                : sortedCandidates;
+
+            nonDraggedCandidates.reverse();
+
+            const deepestZoneId = getZoneId(nonDraggedCandidates[0]);
+            const deepestAreaId = getDeepestId(nonDraggedCandidates, getAreaId);
+
+            onChange({ deepestZoneId, deepestAreaId });
+          }
+        };
+
+        const handleMoveThrottled = throttle(handleMove, 50);
+
+        const handlePointerMove = (event: PointerEvent) => {
+          handleMoveThrottled({
+            x: event.clientX,
+            y: event.clientY,
+          });
+        };
+
+        // For some reason, this is getting instantiated multiple times. Hack to avoid it.
+        if (globallyRegistered) {
+          return;
+        }
+
+        document.body.addEventListener("pointermove", handlePointerMove);
+
+        globallyRegistered = true;
+
+        this.destroy = () => {
+          globallyRegistered = false;
+          document.body.removeEventListener("pointermove", handlePointerMove);
+          cleanupEffect();
+        };
+      });
+    }
+  };
diff --git a/packages/core/components/DragDropContext/index.tsx b/packages/core/components/DragDropContext/index.tsx
index 6c5b31cc1..e8d460240 100644
--- a/packages/core/components/DragDropContext/index.tsx
+++ b/packages/core/components/DragDropContext/index.tsx
@@ -1,17 +1,285 @@
-import {
-  DragDropContext as DndDragDropContext,
-  DragDropContextProps,
-} from "@measured/dnd";
+import { DragDropProvider } from "@dnd-kit/react";
 import { useAppContext } from "../Puck/context";
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { DragDropManager, Feedback } from "@dnd-kit/dom";
+import { DragDropEvents } from "@dnd-kit/abstract";
+import { DropZoneProvider } from "../DropZone";
+import type { Draggable, Droppable } from "@dnd-kit/dom";
+import { getItem, ItemSelector } from "../../lib/get-item";
+import { PathData } from "../DropZone/context";
+import { getZoneId } from "../../lib/get-zone-id";
+import { Direction } from "../DraggableComponent/collision/dynamic";
+import { createNestedDroppablePlugin } from "./NestedDroppablePlugin";
+
+type Events = DragDropEvents<Draggable, Droppable, DragDropManager>;
+type DragCbs = Partial<{ [eventName in keyof Events]: Events[eventName][] }>;
+
+const dragListenerContext = createContext<{
+  dragListeners: DragCbs;
+  setDragListeners?: Dispatch<SetStateAction<DragCbs>>;
+}>({
+  dragListeners: {},
+});
+
+type EventKeys = keyof Events;
+
+export function useDragListener(
+  type: EventKeys,
+  fn: Events[EventKeys],
+  deps: any[] = []
+) {
+  const { setDragListeners } = useContext(dragListenerContext);
+
+  useEffect(() => {
+    if (setDragListeners) {
+      setDragListeners((old) => ({
+        ...old,
+        [type]: [...(old[type] || []), fn],
+      }));
+    }
+  }, deps);
+}
+
+export const DragDropContext = ({ children }: { children: ReactNode }) => {
+  const { state, config, deferred, dispatch } = useAppContext();
+  const { data } = deferred?.isDeferred ? deferred.state : state;
+  const [deepest, setDeepest] = useState<{
+    zone: string | null;
+    area: string | null;
+  } | null>(null);
+
+  const [manager] = useState(
+    new DragDropManager({
+      plugins: [
+        Feedback,
+        createNestedDroppablePlugin({
+          onChange: ({ deepestZoneId, deepestAreaId }) => {
+            setDeepest({ zone: deepestZoneId, area: deepestAreaId });
+          },
+        }),
+      ],
+    })
+  );
+
+  const [draggedItem, setDraggedItem] = useState<Draggable | null>();
+
+  const [dragListeners, setDragListeners] = useState<DragCbs>({});
+
+  const [pathData, setPathData] = useState<PathData>();
+
+  const [dragMode, setDragMode] = useState<"new" | "existing" | null>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const registerPath = useCallback(
+    (selector: ItemSelector) => {
+      const item = getItem(selector, data);
+
+      if (!item) {
+        return;
+      }
+
+      const [area] = getZoneId(selector.zone);
+
+      setPathData((latestPathData = {}) => {
+        const parentPathData = latestPathData[area] || { path: [] };
+
+        return {
+          ...latestPathData,
+          [item.props.id]: {
+            path: [
+              ...parentPathData.path,
+              ...(selector.zone ? [selector.zone] : []),
+            ],
+            label: item.type as string,
+          },
+        };
+      });
+    },
+    [data, setPathData]
+  );
+
+  return (
+    <dragListenerContext.Provider
+      value={{
+        dragListeners,
+        setDragListeners,
+      }}
+    >
+      <DragDropProvider
+        manager={manager}
+        onDragEnd={(event) => {
+          const { source, target } = event.operation;
+
+          setIsDragging(false);
+          setDraggedItem(null);
+
+          // TODO tidy up placeholder if aborted
+
+          if (!target || !source) return;
+
+          console.log("onDragEnd", source, target);
+
+          let zone = source.data.group;
+          let index = source.data.index;
+
+          setTimeout(() => {
+            if (state.ui.preview) {
+              dispatch({
+                type: "insert",
+                componentType: state.ui.preview.componentType,
+                destinationIndex: state.ui.preview.index,
+                destinationZone: state.ui.preview.zone,
+              });
+            }
+
+            deferred?.commit();
+
+            dispatch({
+              type: "setUi",
+              ui: {
+                itemSelector: { index, zone },
+                isDragging: false,
+                preview: null,
+              },
+              recordHistory: false,
+            });
+          }, 300);
+
+          dragListeners.dragend?.forEach((fn) => {
+            fn(event, manager);
+          });
+        }}
+        onDragOver={(event) => {
+          // Prevent the optimistic re-ordering
+          event.preventDefault();
+
+          // Drag end can sometimes trigger after drag
+          if (!draggedItem) return;
+
+          const { source, target, collision } = event.operation;
+
+          if (!target || !source) return;
+
+          const sourceData = source.data;
+          const targetData = target.data;
+
+          const isOverZone = targetData.zone;
+
+          let sourceZone = sourceData.group;
+          let sourceIndex = sourceData.index;
+          let targetZone = targetData.group;
+          let targetIndex = targetData.index;
+
+          const [sourceId] = (source.id as string).split(":");
+          const [targetId] = (target.id as string).split(":");
+
+          const direction = collision?.data?.direction as Direction;
+
+          const collisionPosition =
+            direction === "up" || direction === "left" ? "before" : "after";
+
+          if (targetIndex >= sourceIndex && sourceZone === targetZone) {
+            targetIndex = targetIndex - 1;
+          }
+
+          if (collisionPosition === "after") {
+            targetIndex = targetIndex + 1;
+          }
+
+          if (isOverZone) {
+            targetZone = target.id.toString();
+            targetIndex = 0; // TODO place at end
+          }
+
+          // Abort if dragging over self or descendant
+          if (
+            targetId === sourceId ||
+            pathData?.[target.id]?.path.find((path) => {
+              const [pathId] = (path as string).split(":");
+              return pathId === sourceId;
+            })
+          ) {
+            return;
+          }
+
+          if (dragMode === "new") {
+            dispatch({
+              type: "setUi",
+              ui: {
+                preview: {
+                  componentType: sourceData.componentType,
+                  index: targetIndex,
+                  zone: targetZone,
+                  id: source.id.toString(),
+                },
+              },
+              recordHistory: false,
+            });
+          } else {
+            deferred?.dispatch({
+              type: "move",
+              sourceZone: sourceData.group,
+              sourceIndex: sourceData.index,
+              destinationIndex: targetIndex,
+              destinationZone: targetZone,
+            });
+          }
+
+          dragListeners.dragover?.forEach((fn) => {
+            fn(event, manager);
+          });
+        }}
+        onDragStart={(event) => {
+          setDraggedItem(event.operation.source);
+
+          const isNewComponent = event.operation.source?.data.type === "drawer";
 
-const DefaultDragDropContext = ({ children }: DragDropContextProps) => (
-  <>{children}</>
-);
+          setDragMode(isNewComponent ? "new" : "existing");
 
-export const DragDropContext = (props: DragDropContextProps) => {
-  const { status } = useAppContext();
+          deferred?.start();
 
-  const El = status !== "LOADING" ? DndDragDropContext : DefaultDragDropContext;
+          dispatch({
+            type: "setUi",
+            ui: { itemSelector: null, isDragging: true },
+          });
 
-  return <El {...props} />;
+          dragListeners.dragstart?.forEach((fn) => {
+            fn(event, manager);
+          });
+        }}
+        onBeforeDragStart={() => {
+          setIsDragging(true);
+        }}
+      >
+        <DropZoneProvider
+          value={{
+            data,
+            config,
+            dispatch,
+            draggedItem,
+            mode: "edit",
+            areaId: "root",
+            depth: 0,
+            registerPath,
+            pathData,
+            deepestZone: deepest?.zone,
+            deepestArea: deepest?.area,
+            isDragging,
+          }}
+        >
+          {children}
+        </DropZoneProvider>
+      </DragDropProvider>
+    </dragListenerContext.Provider>
+  );
 };
diff --git a/packages/core/components/DraggableComponent/collision/collision-debug.ts b/packages/core/components/DraggableComponent/collision/collision-debug.ts
new file mode 100644
index 000000000..8ffe0e0ea
--- /dev/null
+++ b/packages/core/components/DraggableComponent/collision/collision-debug.ts
@@ -0,0 +1,74 @@
+import { Point } from "@dnd-kit/geometry";
+
+const DEBUG = false;
+
+const debugElements: Record<
+  string,
+  { svg: SVGSVGElement; line: SVGLineElement; text: SVGTextElement }
+> = {};
+
+let timeout: NodeJS.Timeout;
+
+export const collisionDebug = (
+  a: Point,
+  b: Point,
+  id: string,
+  color: string,
+  label?: string
+) => {
+  if (!DEBUG) return;
+
+  const debugId = `${id}-debug`;
+
+  clearTimeout(timeout);
+
+  timeout = setTimeout(() => {
+    Object.entries(debugElements).forEach(([id, { svg }]) => {
+      svg.remove();
+
+      delete debugElements[id];
+    });
+  }, 1000);
+
+  requestAnimationFrame(() => {
+    const existingEl = debugElements[debugId];
+
+    let line = debugElements[debugId]?.line;
+    let text = debugElements[debugId]?.text;
+
+    if (!existingEl) {
+      const svgNs = "http://www.w3.org/2000/svg";
+      const svg = document.createElementNS(svgNs, "svg");
+      line = document.createElementNS(svgNs, "line");
+      text = document.createElementNS(svgNs, "text");
+
+      // svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      svg.setAttribute("id", debugId);
+      svg.setAttribute(
+        "style",
+        "position: fixed; height: 100%; width: 100%; pointer-events: none;"
+      );
+      svg.appendChild(line);
+      svg.appendChild(text);
+
+      text.setAttribute("fill", `black`);
+
+      document.body.appendChild(svg);
+
+      debugElements[debugId] = { svg, line, text };
+    }
+
+    line.setAttribute("x1", a.x.toString());
+    line.setAttribute("x2", b.x.toString());
+    line.setAttribute("y1", a.y.toString());
+    line.setAttribute("y2", b.y.toString());
+    line.setAttribute("style", `stroke:${color};stroke-width:2`);
+
+    text.setAttribute("x", (a.x - (a.x - b.x) / 2).toString());
+    text.setAttribute("y", (a.y - (a.y - b.y) / 2).toString());
+
+    if (label) {
+      text.innerHTML = label;
+    }
+  });
+};
diff --git a/packages/core/components/DraggableComponent/collision/directional/index.ts b/packages/core/components/DraggableComponent/collision/directional/index.ts
new file mode 100644
index 000000000..539f90157
--- /dev/null
+++ b/packages/core/components/DraggableComponent/collision/directional/index.ts
@@ -0,0 +1,56 @@
+import { DragOperation, Droppable } from "@dnd-kit/abstract";
+import { Point } from "@dnd-kit/geometry";
+import { collisionDebug } from "../collision-debug";
+
+let distanceChange: "increasing" | "decreasing" = "increasing";
+
+/**
+ * Collide if we're moving towards an item.
+ */
+export const directionalCollision = (
+  input: { dragOperation: DragOperation; droppable: Droppable },
+  previous: Point
+) => {
+  const { dragOperation, droppable } = input;
+  const { shape: dropShape } = droppable;
+  const { position } = dragOperation;
+  const dragShape = dragOperation.shape?.current;
+
+  if (!dragShape || !dropShape) return null;
+
+  const dropCenter = dropShape.center;
+
+  const distanceToPrevious = Math.sqrt(
+    Math.pow(dropCenter.x - previous.x, 2) +
+      Math.pow(dropCenter.y - previous.y, 2)
+  );
+
+  const distanceToCurrent = Math.sqrt(
+    Math.pow(dropCenter.x - position.current.x, 2) +
+      Math.pow(dropCenter.y - position.current.y, 2)
+  );
+
+  distanceChange =
+    distanceToCurrent === distanceToPrevious
+      ? distanceChange
+      : distanceToCurrent < distanceToPrevious
+      ? "decreasing"
+      : "increasing";
+
+  collisionDebug(
+    dragShape.center,
+    dropCenter,
+    droppable.id.toString(),
+    "rebeccapurple"
+  );
+
+  if (distanceChange === "decreasing") {
+    return {
+      id: droppable.id,
+      value: 1,
+      type: "" as any,
+    };
+  }
+
+  return null;
+};
diff --git a/packages/core/components/DraggableComponent/collision/dynamic/get-direction.ts b/packages/core/components/DraggableComponent/collision/dynamic/get-direction.ts
new file mode 100644
index 000000000..f00ce5a4f
--- /dev/null
+++ b/packages/core/components/DraggableComponent/collision/dynamic/get-direction.ts
@@ -0,0 +1,19 @@
+import { Point } from "@dnd-kit/geometry";
+
+export type Direction = "left" | "right" | "up" | "down" | null;
+
+export type DragAxis = "dynamic" | "y" | "x";
+
+export const getDirection = (dragAxis: DragAxis, delta: Point): Direction => {
+  if (dragAxis === "dynamic") {
+    if (Math.abs(delta.y) > Math.abs(delta.x)) {
+      return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
+    } else {
+      return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
+    }
+  } else if (dragAxis === "x") {
+    return delta.x === 0 ? null : delta.x > 0 ? "right" : "left";
+  }
+
+  return delta.y === 0 ? null : delta.y > 0 ? "down" : "up";
+};
diff --git a/packages/core/components/DraggableComponent/collision/dynamic/get-midpoint-impact.ts b/packages/core/components/DraggableComponent/collision/dynamic/get-midpoint-impact.ts
new file mode 100644
index 000000000..4bb6fe914
--- /dev/null
+++ b/packages/core/components/DraggableComponent/collision/dynamic/get-midpoint-impact.ts
@@ -0,0 +1,38 @@
+import { Shape } from "@dnd-kit/geometry";
+import { Direction } from "./get-direction";
+
+/**
+ * Determine whether or not the leading edge of the dragShape (the edge that is on
+ * the side of the direction of travel) is over the midpoint of the dropShape.
+ *
+ * @param dragShape The shape of the draggable
+ * @param dropShape The shape of the droppable
+ * @param direction The direction of travel
+ * @param offsetMultiplier An optional offset multiplier
+ *
+ * @returns A boolean describingw hether or not the leadingEdge of the dragShape is over the mid-point of the dropShape
+ */
+export const getMidpointImpact = (
+  dragShape: Shape,
+  dropShape: Shape,
+  direction: Direction,
+  offsetMultiplier: number = 0
+): Boolean => {
+  const dragRect = dragShape.boundingRectangle;
+  const dropCenter = dropShape.center;
+
+  if (direction === "down") {
+    const offset = offsetMultiplier * dropShape.boundingRectangle.height;
+    return dragRect.bottom >= dropCenter.y + offset;
+  } else if (direction === "up") {
+    const offset = offsetMultiplier * dropShape.boundingRectangle.height;
+    return dragRect.top < dropCenter.y - offset;
+  } else if (direction === "left") {
+    const offset = offsetMultiplier * dropShape.boundingRectangle.width;
+    return dropCenter.x - offset >= dragRect.left;
+  }
+
+  // Direction === "right"
+  const offset = offsetMultiplier * dropShape.boundingRectangle.width;
+  return dragRect.right - offset >= dropCenter.x;
+};
diff --git a/packages/core/components/DraggableComponent/collision/dynamic/index.ts b/packages/core/components/DraggableComponent/collision/dynamic/index.ts
new file mode 100644
index 000000000..d8fc8d08a
--- /dev/null
+++ b/packages/core/components/DraggableComponent/collision/dynamic/index.ts
@@ -0,0 +1,102 @@
+import {
+  Collision,
+  CollisionDetector,
+  CollisionPriority,
+} from "@dnd-kit/abstract";
+import { directionalCollision } from "../directional";
+import { DragAxis } from "./get-direction";
+import { getMidpointImpact } from "./get-midpoint-impact";
+import { trackMovementInterval } from "./track-movement-interval";
+import { collisionDebug } from "../collision-debug";
+
+export type Direction = "left" | "right" | "up" | "down" | null;
+
+/**
+ * A factory for creating a "dynamic" collision detector
+ *
+ * A dynamic collision combines mid-point and directional collisions for smooth, flicker-free dragging with complex
+ * layouts.
+ *
+ * Midpoint-based detection creates a natural snapping effect, inspired by react-beautiful-dnd. Each collision is
+ * provided with the direction of movement, so the user can determine the appropriate place to inject the item based
+ * on their layout or document direction.
+ *
+ * If a draggable is being dragged towards a droppable with the same ID, this is deemed the highest priority collision
+ * to prevent flickering with complex layout shifts during drag.
+ *
+ * @param dragAxis Restrict mid-point detection to a given axis, providing a traditional sortable list detection.
+ * @param midpointOffset A percentage offset from the midpoint. Defaults to 5% (0.05) from the mid-point in the
+ * direction of travel, helping to create "dead zone" in the center of the item.
+ *
+ * @returns
+ */
+export const createDynamicCollisionDetector = (
+  dragAxis: DragAxis,
+  midpointOffset: number = 0.05
+) =>
+  ((input) => {
+    // console.log("checking collision", input);
+    const { dragOperation, droppable } = input;
+
+    const { position } = dragOperation;
+    const dragShape = dragOperation.shape?.current;
+    const { shape: dropShape } = droppable;
+
+    if (!dragShape || !dropShape) {
+      return null;
+    }
+
+    const { center: dragCenter } = dragShape;
+
+    const interval = trackMovementInterval(position.current, dragAxis);
+
+    const { center: dropCenter } = dropShape;
+
+    const overMidpoint = getMidpointImpact(
+      dragShape,
+      dropShape,
+      interval.direction,
+      midpointOffset
+    );
+
+    if (dragOperation.source?.id === droppable.id) {
+      // If the droppable and draggable are the same item, we check if we're moving towards the droppable.
+      // If we are, we always return that as the highest priority collision target to prevent unexpected
+      // movement in complex grid layouts
+
+      const collision = directionalCollision(input, interval.previous);
+
+      if (collision) {
+        return {
+          ...collision,
+          priority: CollisionPriority.Highest,
+          data: {
+            direction: interval.direction,
+          },
+        };
+      }
+    }
+
+    const intersectionArea = dragShape.intersectionArea(dropShape);
+    const intersectionRatio = intersectionArea / dropShape.area;
+
+    if (intersectionArea && overMidpoint) {
+      collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "green");
+
+      const collision: Collision = {
+        id: `${droppable.id}`,
+        value: intersectionRatio,
+        priority: CollisionPriority.Normal,
+        data: {
+          direction: interval.direction,
+        },
+        type: "" as any,
+      };
+
+      return collision;
+    }
+
+    collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "hotpink");
+
+    return null;
+  }) as CollisionDetector;
diff --git a/packages/core/components/DraggableComponent/collision/dynamic/track-movement-interval.ts b/packages/core/components/DraggableComponent/collision/dynamic/track-movement-interval.ts
new file mode 100644
index 000000000..01beddb69
--- /dev/null
+++ b/packages/core/components/DraggableComponent/collision/dynamic/track-movement-interval.ts
@@ -0,0 +1,55 @@
+import { Point } from "@dnd-kit/geometry";
+import { DragAxis, getDirection, type Direction } from "./get-direction";
+
+type Interval = {
+  current: Point;
+  delta: Point;
+  previous: Point;
+  direction: Direction;
+};
+
+const INTERVAL_SENSITIVITY = 10;
+
+const intervalCache: Interval = {
+  current: { x: 0, y: 0 },
+  delta: { x: 0, y: 0 },
+  previous: { x: 0, y: 0 },
+  direction: null,
+};
+
+/**
+ * A method for tracking and getting the current movement interval, including:
+ *
+ * - `current` - the current point to track
+ * - `previous` - the previous point, captured when the delta is greater than the INTERVAL_SENSITIVITY
+ * - `delta` - the delta between the two points
+ * - `direction` - the direction of travel of the delta, locked to an axis
+ *
+ * @param point The latest point to track.
+ * @param dragAxis The axis to lock the direction to. If the value is "dynamic", it can be either axis based on the greater value.
+ *
+ * @returns Current movement interval
+ */
+export const trackMovementInterval = (
+  point: Point,
+  dragAxis: DragAxis = "dynamic"
+) => {
+  intervalCache.current = point;
+
+  intervalCache.delta = {
+    x: point.x - intervalCache.previous.x,
+    y: point.y - intervalCache.previous.y,
+  };
+
+  intervalCache.direction =
+    getDirection(dragAxis, intervalCache.delta) || intervalCache.direction;
+
+  if (
+    Math.abs(intervalCache.delta.x) > INTERVAL_SENSITIVITY ||
+    Math.abs(intervalCache.delta.y) > INTERVAL_SENSITIVITY
+  ) {
+    intervalCache.previous = Point.from(point);
+  }
+
+  return intervalCache;
+};
diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
index c8b82951e..0f7cbe26e 100644
--- a/packages/core/components/DraggableComponent/index.tsx
+++ b/packages/core/components/DraggableComponent/index.tsx
@@ -1,19 +1,25 @@
 import {
-  CSSProperties,
   ReactNode,
+  Ref,
   SyntheticEvent,
+  useCallback,
+  useContext,
   useEffect,
+  useRef,
   useState,
 } from "react";
-import { Draggable } from "@measured/dnd";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { Copy, Trash } from "lucide-react";
 import { useModifierHeld } from "../../lib/use-modifier-held";
-import { isIos } from "../../lib/is-ios";
 import { useAppContext } from "../Puck/context";
-import { DefaultDraggable } from "../Draggable";
 import { Loader } from "../Loader";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { createPortal } from "react-dom";
+
+import { dropZoneContext, DropZoneProvider } from "../DropZone";
+import { createDynamicCollisionDetector } from "./collision/dynamic";
+import { DragAxis } from "./collision/dynamic/get-direction";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
 
@@ -25,134 +31,358 @@ const actionsRight = space;
 
 export const DraggableComponent = ({
   children,
+  depth,
+  componentType,
   id,
   index,
+  zoneCompound,
   isLoading = false,
   isSelected = false,
-  onClick = () => null,
-  onMount = () => null,
-  onMouseDown = () => null,
-  onMouseUp = () => null,
-  onMouseOver = () => null,
-  onMouseOut = () => null,
-  onDelete = () => null,
-  onDuplicate = () => null,
   debug,
   label,
-  isLocked = false,
-  isDragDisabled,
-  forceHover = false,
-  indicativeHover = false,
-  style,
+  isEnabled,
+  dragAxis,
+  inDroppableZone = true,
 }: {
-  children: ReactNode;
+  children: (ref: Ref<any>) => ReactNode;
+  componentType: string;
+  depth: number;
   id: string;
   index: number;
+  zoneCompound: string;
   isSelected?: boolean;
-  onClick?: (e: SyntheticEvent) => void;
-  onMount?: () => void;
-  onMouseDown?: (e: SyntheticEvent) => void;
-  onMouseUp?: (e: SyntheticEvent) => void;
-  onMouseOver?: (e: SyntheticEvent) => void;
-  onMouseOut?: (e: SyntheticEvent) => void;
-  onDelete?: (e: SyntheticEvent) => void;
-  onDuplicate?: (e: SyntheticEvent) => void;
   debug?: string;
   label?: string;
-  isLocked: boolean;
   isLoading: boolean;
-  isDragDisabled?: boolean;
-  forceHover?: boolean;
-  indicativeHover?: boolean;
-  style?: CSSProperties;
+  isEnabled?: boolean;
+  dragAxis: DragAxis;
+  inDroppableZone: boolean;
 }) => {
-  const { zoomConfig } = useAppContext();
+  const { zoomConfig, dispatch, iframe, state } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
+  const ctx = useContext(dropZoneContext);
+
+  const overlayRef = useRef<HTMLDivElement>(null);
 
-  const { status } = useAppContext();
+  const [localZones, setLocalZones] = useState<Record<string, boolean>>({});
 
-  const El = status !== "LOADING" ? Draggable : DefaultDraggable;
+  // TODO 26/08/24 this doesn't work when we have more than one level of zone
+  // TODO for example, try dragging a card to next grid item in `/grid` demo
+  // TODO and note it jumps to root
+  // TODO to fix, it needs to propagate upstream
+  const registerLocalZone = useCallback(
+    (zoneCompound: string, active: boolean) => {
+      // Propagate local zone
+      ctx?.registerLocalZone?.(zoneCompound, active);
 
-  useEffect(onMount, []);
+      setLocalZones((obj) => ({
+        ...obj,
+        [zoneCompound]: active,
+      }));
+    },
+    [setLocalZones]
+  );
 
-  const [disableSecondaryAnimation, setDisableSecondaryAnimation] =
-    useState(false);
+  const containsActiveZone =
+    Object.values(localZones).filter(Boolean).length > 0;
 
-  useEffect(() => {
-    // Disable animations on iOS to prevent GPU memory crashes
-    if (isIos()) {
-      setDisableSecondaryAnimation(true);
+  const { ref: sortableRef, status } = useSortable({
+    id,
+    index,
+    group: zoneCompound,
+    data: {
+      group: zoneCompound,
+      index,
+      componentType,
+      containsActiveZone,
+      depth,
+    },
+    collisionPriority: isEnabled ? depth : 0,
+    collisionDetector: createDynamicCollisionDetector(dragAxis),
+    disabled: !isEnabled,
+    // handle: overlayRef,
+  });
+
+  const userIsDragging = !!ctx?.draggedItem;
+
+  const thisIsDragging = status === "dragging";
+
+  const ref = useRef<Element>();
+
+  const refSetter = useCallback(
+    (el: Element | null) => {
+      sortableRef(el);
+
+      if (el) {
+        ref.current = el;
+      }
+    },
+    [sortableRef]
+  );
+
+  const sync = useCallback(() => {
+    if (!ref.current || !overlayRef.current) return;
+
+    const rect = ref.current!.getBoundingClientRect();
+
+    let iframeLeft = 0;
+    let iframeTop = 0;
+
+    if (iframe.enabled) {
+      const frameEl = document.getElementById("preview-frame");
+
+      if (!frameEl) {
+        throw new Error("iframe enabled, but could not find element");
+      }
+
+      const frameRect = frameEl.getBoundingClientRect();
+
+      iframeLeft = frameRect.left;
+      iframeTop = frameRect.top;
     }
+
+    const previewEl = document.getElementById("puck-preview");
+
+    if (!previewEl) return;
+
+    const previewRect = previewEl.getBoundingClientRect();
+
+    overlayRef.current!.style.left = `${
+      rect.left - previewRect.left + iframeLeft
+    }px`;
+    overlayRef.current!.style.top = `${
+      rect.top - previewRect.top + iframeTop
+    }px`;
+    overlayRef.current!.style.height = `${rect.height}px`;
+    overlayRef.current!.style.width = `${rect.width}px`;
+  }, [ref, overlayRef]);
+
+  useEffect(() => {
+    ctx?.registerPath!({
+      index,
+      zone: zoneCompound,
+    });
   }, []);
 
+  const onClick = useCallback(
+    (e: SyntheticEvent | Event) => {
+      e.stopPropagation();
+      dispatch({
+        type: "setUi",
+        ui: {
+          itemSelector: { index, zone: zoneCompound },
+        },
+      });
+    },
+    [index, zoneCompound, id]
+  );
+
+  const onDuplicate = useCallback(
+    (e: SyntheticEvent) => {
+      e.stopPropagation();
+      dispatch({
+        type: "duplicate",
+        sourceIndex: index,
+        sourceZone: zoneCompound,
+      });
+    },
+    [index, zoneCompound]
+  );
+
+  const onRemove = useCallback(
+    (e: SyntheticEvent) => {
+      e.stopPropagation();
+      dispatch({
+        type: "remove",
+        index: index,
+        zone: zoneCompound,
+      });
+    },
+    [index, zoneCompound]
+  );
+
+  const [hover, setHover] = useState(false);
+
+  const indicativeHover = ctx?.hoveringComponent === id;
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const el = ref.current as HTMLElement;
+
+    const _onMouseOver = (e: Event) => {
+      if (userIsDragging) {
+        // User is dragging, and dragging this item
+        if (thisIsDragging) {
+          setHover(true);
+        } else {
+          setHover(false);
+        }
+      } else {
+        setHover(true);
+      }
+
+      e.stopPropagation();
+    };
+
+    const _onMouseOut = (e: Event) => {
+      e.stopPropagation();
+
+      setHover(false);
+    };
+
+    el.setAttribute("data-puck-component", "");
+    el.style.position = "relative";
+    el.addEventListener("click", onClick);
+    el.addEventListener("mouseover", _onMouseOver);
+    el.addEventListener("mouseout", _onMouseOut);
+
+    return () => {
+      el.removeEventListener("click", onClick);
+      el.removeEventListener("mouseover", _onMouseOver);
+      el.removeEventListener("mouseout", _onMouseOut);
+    };
+  }, [
+    ref,
+    overlayRef,
+    onClick,
+    containsActiveZone,
+    zoneCompound,
+    id,
+    userIsDragging,
+    thisIsDragging,
+    inDroppableZone,
+  ]);
+
+  useEffect(sync, [ref]);
+  useEffect(sync, [state.data]);
+
+  const isVisible = isSelected || hover || indicativeHover || userIsDragging;
+
+  useEffect(() => {
+    if (!ref.current || !overlayRef.current) {
+      return;
+    }
+
+    const el = ref.current as HTMLElement;
+
+    const canvasRoot = document.getElementById("puck-canvas-root");
+
+    const onCanvasScroll = () => {
+      if (!ref.current || !overlayRef.current) return;
+
+      sync();
+    };
+
+    const scrollTarget = iframe.enabled
+      ? (document.getElementById("preview-frame") as HTMLIFrameElement)
+          .contentWindow
+      : canvasRoot;
+
+    if (isVisible) {
+      scrollTarget?.addEventListener("scroll", onCanvasScroll);
+    } else {
+      scrollTarget?.removeEventListener("scroll", onCanvasScroll);
+    }
+
+    const observer = new ResizeObserver(() => {
+      sync();
+    });
+
+    observer.observe(el);
+
+    let isObserving = true;
+
+    const loop = () => {
+      requestAnimationFrame(() => {
+        if (isObserving && isVisible && userIsDragging) {
+          sync();
+          loop();
+        }
+      });
+    };
+
+    if (isVisible && userIsDragging) {
+      loop();
+    }
+
+    return () => {
+      if (!ref.current) return;
+
+      isObserving = false;
+      observer.disconnect();
+      scrollTarget?.removeEventListener("scroll", onCanvasScroll);
+    };
+  }, [ref, overlayRef, isVisible, userIsDragging, hover, iframe]);
+
   return (
-    <El
-      key={id}
-      draggableId={id}
-      index={index}
-      isDragDisabled={isDragDisabled}
-      disableSecondaryAnimation={disableSecondaryAnimation}
+    <DropZoneProvider
+      value={{
+        ...ctx!,
+        areaId: id,
+        zoneCompound,
+        index,
+        depth: depth + 1,
+        registerLocalZone,
+      }}
     >
-      {(provided, snapshot) => (
-        <div
-          ref={provided.innerRef}
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          className={getClassName({
-            isSelected,
-            isModifierHeld,
-            isDragging: snapshot.isDragging,
-            isLocked,
-            forceHover,
-            indicativeHover,
-          })}
-          style={{
-            ...style,
-            ...provided.draggableProps.style,
-            cursor: isModifierHeld ? "initial" : "grab",
-          }}
-          onMouseOver={onMouseOver}
-          onMouseOut={onMouseOut}
-          onMouseDown={onMouseDown}
-          onMouseUp={onMouseUp}
-          onClick={onClick}
-        >
-          {debug}
-          {isLoading && (
-            <div className={getClassName("loadingOverlay")}>
-              <Loader />
-            </div>
-          )}
-
+      {/* <p>isEnabled: {JSON.stringify(isEnabled)}</p> */}
+      {/* <p>collisionPriority: {JSON.stringify(collisionPriority)}</p> */}
+      {/* <p>localZones: {JSON.stringify(localZones)}</p> */}
+      {/* <p>containsActiveZone: {JSON.stringify(containsActiveZone)}</p> */}
+      {/* <p>is parent droppable(): {JSON.stringify(isDroppableTarget())}</p> */}
+      {isVisible &&
+        createPortal(
           <div
-            className={getClassName("actionsOverlay")}
-            style={{
-              top: actionsOverlayTop / zoomConfig.zoom,
-            }}
+            className={getClassName({
+              isDragging: thisIsDragging,
+              isSelected,
+              isModifierHeld,
+              hover: hover || indicativeHover,
+            })}
+            ref={overlayRef}
           >
+            {debug}
+            {isLoading && (
+              <div className={getClassName("loadingOverlay")}>
+                <Loader />
+              </div>
+            )}
             <div
-              className={getClassName("actions")}
+              className={getClassName("actionsOverlay")}
               style={{
-                transform: `scale(${1 / zoomConfig.zoom}`,
-                top: actionsTop / zoomConfig.zoom,
-                right: actionsRight / zoomConfig.zoom,
+                top: actionsOverlayTop / zoomConfig.zoom,
               }}
             >
-              {label && (
-                <div className={getClassName("actionsLabel")}>{label}</div>
-              )}
-              <button className={getClassName("action")} onClick={onDuplicate}>
-                <Copy size={16} />
-              </button>
-              <button className={getClassName("action")} onClick={onDelete}>
-                <Trash size={16} />
-              </button>
+              <div
+                className={getClassName("actions")}
+                style={{
+                  transform: `scale(${1 / zoomConfig.zoom}`,
+                  top: actionsTop / zoomConfig.zoom,
+                  right: actionsRight / zoomConfig.zoom,
+                }}
+              >
+                {label && (
+                  <div className={getClassName("actionsLabel")}>{label}</div>
+                )}
+                <button
+                  className={getClassName("action")}
+                  onClick={onDuplicate}
+                >
+                  <Copy size={16} />
+                </button>
+                <button className={getClassName("action")} onClick={onRemove}>
+                  <Trash size={16} />
+                </button>
+              </div>
             </div>
-          </div>
-          <div className={getClassName("overlay")} />
-          <div className={getClassName("contents")}>{children}</div>
-        </div>
-      )}
-    </El>
+            <div className={getClassName("overlay")} />
+          </div>,
+          document.getElementById("puck-preview") || document.body
+        )}
+      {children(refSetter)}
+    </DropZoneProvider>
   );
 };
diff --git a/packages/core/components/DraggableComponent/styles.module.css b/packages/core/components/DraggableComponent/styles.module.css
index 84ae1c484..c1858e09f 100644
--- a/packages/core/components/DraggableComponent/styles.module.css
+++ b/packages/core/components/DraggableComponent/styles.module.css
@@ -1,5 +1,7 @@
 .DraggableComponent {
-  pointer-events: auto;
+  position: absolute;
+
+  pointer-events: none;
 
   --overlay-background: color-mix(
     in srgb,
@@ -13,19 +15,6 @@
   overflow: hidden;
 }
 
-.DraggableComponent-contents {
-  position: relative; /* Reset stacking context */
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Prevent margin collapsing  */
-.DraggableComponent-contents::before,
-.DraggableComponent-contents::after {
-  content: " ";
-  display: table;
-}
-
 .DraggableComponent-overlay {
   cursor: pointer;
   height: 100%;
@@ -62,29 +51,19 @@
   z-index: 1;
 }
 
-.DraggableComponent:hover:not(.DraggableComponent--isLocked)
+.DraggableComponent--hover:not(.DraggableComponent--isLocked)
   > .DraggableComponent-overlay {
   background: var(--overlay-background);
-  pointer-events: none;
-}
-
-.DraggableComponent--forceHover > .DraggableComponent-overlay {
-  background: var(--overlay-background);
-  pointer-events: none;
 }
 
-.DraggableComponent:not(.DraggableComponent--isSelected):hover
+.DraggableComponent--hover:not(.DraggableComponent--isSelected)
   > .DraggableComponent-overlay {
   outline: 2px var(--puck-color-azure-09) solid !important;
 }
 
-.DraggableComponent--indicativeHover > .DraggableComponent-overlay {
-  pointer-events: none;
-}
-
 /* Won't work in FF */
 .DraggableComponent:not(.DraggableComponent--isSelected):has(
-    .DraggableComponent:hover > .DraggableComponent-overlay
+    .DraggableComponent--hover > .DraggableComponent-overlay
   )
   > .DraggableComponent-overlay {
   display: none;
@@ -169,3 +148,34 @@
   color: var(--puck-color-azure-07);
   transition: none;
 }
+
+.DraggableComponent-parentHitboxBottom,
+.DraggableComponent-parentHitboxLeft,
+.DraggableComponent-parentHitboxRight,
+.DraggableComponent-parentHitboxTop {
+  height: 8px;
+  width: 100%;
+  position: absolute;
+  z-index: 2;
+  pointer-events: all;
+}
+
+.DraggableComponent-parentHitboxTop {
+  top: -8px;
+}
+
+.DraggableComponent-parentHitboxBottom {
+  bottom: -8px;
+}
+
+.DraggableComponent-parentHitboxLeft {
+  left: -8px;
+  width: 8px;
+  height: 100%;
+}
+
+.DraggableComponent-parentHitboxRight {
+  right: -8px;
+  width: 8px;
+  height: 100%;
+}
diff --git a/packages/core/components/Drawer/index.tsx b/packages/core/components/Drawer/index.tsx
index 8bfd1e834..6ba3fb7e9 100644
--- a/packages/core/components/Drawer/index.tsx
+++ b/packages/core/components/Drawer/index.tsx
@@ -1,72 +1,40 @@
-import { Droppable } from "../Droppable";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
-import { Draggable } from "../Draggable";
 import { DragIcon } from "../DragIcon";
-import {
-  ReactElement,
-  ReactNode,
-  createContext,
-  useContext,
-  useMemo,
-} from "react";
+import { ReactElement, ReactNode, Ref, useMemo, useState } from "react";
+import { useDraggable } from "@dnd-kit/react";
+import { generateId } from "../../lib/generate-id";
+import { useDragListener } from "../DragDropContext";
 
 const getClassName = getClassNameFactory("Drawer", styles);
 const getClassNameItem = getClassNameFactory("DrawerItem", styles);
 
-const drawerContext = createContext<{ droppableId: string }>({
-  droppableId: "",
-});
-
-const DrawerDraggable = ({
+export const DrawerItemInner = ({
   children,
-  id,
-  index,
-}: {
-  children: ReactNode;
-  id: string;
-  index: number;
-}) => (
-  <Draggable
-    key={id}
-    id={id}
-    index={index}
-    showShadow
-    disableAnimations
-    className={() => getClassNameItem()}
-  >
-    {() => children}
-  </Draggable>
-);
-
-const DrawerItem = ({
   name,
-  children,
-  id,
   label,
-  index,
+  dragRef,
 }: {
-  name: string;
   children?: (props: { children: ReactNode; name: string }) => ReactElement;
-  id?: string;
+  name: string;
   label?: string;
-  index: number;
+  dragRef?: Ref<any>;
 }) => {
-  const ctx = useContext(drawerContext);
-
-  const resolvedId = `${ctx.droppableId}::${id || name}`;
-
   const CustomInner = useMemo(
     () =>
       children ||
-      (({ children, name }: { children: ReactNode; name: string }) => (
+      (({ children }: { children: ReactNode; name: string }) => (
         <div className={getClassNameItem("default")}>{children}</div>
       )),
     [children]
   );
 
   return (
-    <DrawerDraggable id={resolvedId} index={index}>
+    <div
+      className={getClassNameItem()}
+      ref={dragRef}
+      onMouseDown={(e) => e.preventDefault()}
+    >
       <CustomInner name={name}>
         <div className={getClassNameItem("draggableWrapper")}>
           <div className={getClassNameItem("draggable")}>
@@ -77,41 +45,78 @@ const DrawerItem = ({
           </div>
         </div>
       </CustomInner>
-    </DrawerDraggable>
+    </div>
   );
 };
 
-export const Drawer = ({
+/**
+ * Wrap `useDraggable`, remounting it when the `id` changes.
+ *
+ * Could be removed by remounting `useDraggable` upstream in dndkit on `id` changes.
+ */
+const DrawerItemDraggable = ({
   children,
-  droppableId: _droppableId = "default",
-  direction = "vertical",
+  name,
+  label,
+  id,
 }: {
-  children: ReactNode;
-  droppableId?: string;
-  direction?: "vertical" | "horizontal";
+  children?: (props: { children: ReactNode; name: string }) => ReactElement;
+  name: string;
+  label?: string;
+  id: string;
 }) => {
-  const droppableId = `component-list:${_droppableId}`;
+  const { ref } = useDraggable({
+    id,
+    data: { type: "drawer", componentType: name },
+  });
 
   return (
-    <drawerContext.Provider value={{ droppableId }}>
-      <Droppable droppableId={droppableId} isDropDisabled direction={direction}>
-        {(provided, snapshot) => (
-          <div
-            {...provided.droppableProps}
-            ref={provided.innerRef}
-            className={getClassName({
-              isDraggingFrom: !!snapshot.draggingFromThisWith,
-            })}
-          >
-            {children}
+    <DrawerItemInner name={name} label={label} dragRef={ref}>
+      {children}
+    </DrawerItemInner>
+  );
+};
 
-            {/* Use different element so we don't clash with :last-of-type */}
-            <span style={{ display: "none" }}>{provided.placeholder}</span>
-          </div>
-        )}
-      </Droppable>
-    </drawerContext.Provider>
+const DrawerItem = ({
+  name,
+  children,
+  id,
+  label,
+}: {
+  name: string;
+  children?: (props: { children: ReactNode; name: string }) => ReactElement;
+  id?: string;
+  label?: string;
+  index?: number; // TODO deprecate
+}) => {
+  const resolvedId = id || name;
+  const [dynamicId, setDynamicId] = useState(generateId(resolvedId));
+
+  useDragListener(
+    "dragend",
+    () => {
+      setDynamicId(generateId(resolvedId));
+    },
+    [resolvedId]
+  );
+
+  return (
+    <div key={dynamicId}>
+      <DrawerItemDraggable name={name} label={label} id={dynamicId}>
+        {children}
+      </DrawerItemDraggable>
+    </div>
   );
 };
 
+export const Drawer = ({
+  children,
+}: {
+  children: ReactNode;
+  droppableId?: string; // TODO deprecate
+  direction?: "vertical" | "horizontal"; // TODO deprecate
+}) => {
+  return <div className={getClassName()}>{children}</div>;
+};
+
 Drawer.Item = DrawerItem;
diff --git a/packages/core/components/Drawer/styles.module.css b/packages/core/components/Drawer/styles.module.css
index d01a82e4e..06c300a74 100644
--- a/packages/core/components/Drawer/styles.module.css
+++ b/packages/core/components/Drawer/styles.module.css
@@ -1,14 +1,8 @@
 .Drawer {
+  display: flex;
+  flex-direction: column;
   font-family: var(--puck-font-family);
-}
-
-.DrawerItem-default .DrawerItem-draggableWrapper {
-  /* padding required here to prevent bug when cancelling a drag) */
-  padding-bottom: 12px;
-}
-
-.DrawerItem:last-of-type .DrawerItem-default .DrawerItem-draggableWrapper {
-  padding-bottom: 0;
+  gap: 12px;
 }
 
 .DrawerItem-draggable {
diff --git a/packages/core/components/DropZone/context.tsx b/packages/core/components/DropZone/context.tsx
index 820d5473d..e32fdf7bd 100644
--- a/packages/core/components/DropZone/context.tsx
+++ b/packages/core/components/DropZone/context.tsx
@@ -1,17 +1,8 @@
-import {
-  CSSProperties,
-  ReactNode,
-  createContext,
-  useCallback,
-  useState,
-} from "react";
+import { ReactNode, createContext, useCallback, useState } from "react";
 import { Config, Data } from "../../types/Config";
-import { DragStart, DragUpdate } from "@measured/dnd";
-import { ItemSelector, getItem } from "../../lib/get-item";
+import { ItemSelector } from "../../lib/get-item";
 import { PuckAction } from "../../reducer";
-import { rootDroppableId } from "../../lib/root-droppable-id";
-import { useDebounce } from "use-debounce";
-import { getZoneId } from "../../lib/get-zone-id";
+import type { Draggable } from "@dnd-kit/dom";
 
 export type PathData = Record<string, { path: string[]; label: string }>;
 
@@ -23,12 +14,10 @@ export type DropZoneContext<UserConfig extends Config = Config> = {
   setItemSelector?: (newIndex: ItemSelector | null) => void;
   dispatch?: (action: PuckAction) => void;
   areaId?: string;
-  draggedItem?: DragStart & Partial<DragUpdate>;
-  placeholderStyle?: CSSProperties;
-  hoveringArea?: string | null;
-  setHoveringArea?: (area: string | null) => void;
-  hoveringZone?: string | null;
-  setHoveringZone?: (zone: string | null) => void;
+  zoneCompound?: string;
+  index?: number;
+  draggedItem?: Draggable | null;
+  isDragging: boolean;
   hoveringComponent?: string | null;
   setHoveringComponent?: (id: string | null) => void;
   registerZoneArea?: (areaId: string) => void;
@@ -39,8 +28,10 @@ export type DropZoneContext<UserConfig extends Config = Config> = {
   pathData?: PathData;
   registerPath?: (selector: ItemSelector) => void;
   mode?: "edit" | "render";
-  zoneWillDrag?: string;
-  setZoneWillDrag?: (zone: string) => void;
+  depth: number;
+  registerLocalZone?: (zone: string, active: boolean) => void; // A zone as it pertains to the current area
+  deepestZone?: string | null;
+  deepestArea?: string | null;
 } | null;
 
 export const dropZoneContext = createContext<DropZoneContext>(null);
@@ -52,16 +43,9 @@ export const DropZoneProvider = ({
   children: ReactNode;
   value: DropZoneContext;
 }) => {
-  const [hoveringArea, setHoveringArea] = useState<string | null>(null);
-  const [hoveringZone, setHoveringZone] = useState<string | null>(
-    rootDroppableId
-  );
-
   // Hovering component may match area, but areas must always contain zones
   const [hoveringComponent, setHoveringComponent] = useState<string | null>();
 
-  const [hoveringAreaDb] = useDebounce(hoveringArea, 75, { leading: false });
-
   const [areasWithZones, setAreasWithZones] = useState<Record<string, boolean>>(
     {}
   );
@@ -112,51 +96,11 @@ export const DropZoneProvider = ({
     [setActiveZones, dispatch]
   );
 
-  const [pathData, setPathData] = useState<PathData>();
-
-  const registerPath = useCallback(
-    (selector: ItemSelector) => {
-      if (!value?.data) {
-        return;
-      }
-
-      const item = getItem(selector, value.data);
-
-      if (!item) {
-        return;
-      }
-
-      const [area] = getZoneId(selector.zone);
-
-      setPathData((latestPathData = {}) => {
-        const parentPathData = latestPathData[area] || { path: [] };
-
-        return {
-          ...latestPathData,
-          [item.props.id]: {
-            path: [
-              ...parentPathData.path,
-              ...(selector.zone ? [selector.zone] : []),
-            ],
-            label: item.type as string,
-          },
-        };
-      });
-    },
-    [value, setPathData]
-  );
-
-  const [zoneWillDrag, setZoneWillDrag] = useState("");
-
   return (
     <>
       {value && (
         <dropZoneContext.Provider
           value={{
-            hoveringArea: value.draggedItem ? hoveringAreaDb : hoveringArea,
-            setHoveringArea,
-            hoveringZone,
-            setHoveringZone,
             hoveringComponent,
             setHoveringComponent,
             registerZoneArea,
@@ -164,10 +108,6 @@ export const DropZoneProvider = ({
             registerZone,
             unregisterZone,
             activeZones,
-            registerPath,
-            pathData,
-            zoneWillDrag,
-            setZoneWillDrag,
             ...value,
           }}
         >
diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index 9bbaeefdb..b2b39787c 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -1,42 +1,52 @@
-import { useContext, useEffect } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { DraggableComponent } from "../DraggableComponent";
-import { Droppable } from "../Droppable";
 import { getItem } from "../../lib/get-item";
 import { setupZone } from "../../lib/setup-zone";
 import { rootDroppableId } from "../../lib/root-droppable-id";
 import { getClassNameFactory } from "../../lib";
 import styles from "./styles.module.css";
 import { DropZoneProvider, dropZoneContext } from "./context";
-import { getZoneId } from "../../lib/get-zone-id";
 import { useAppContext } from "../Puck/context";
 import { DropZoneProps } from "./types";
 import { ComponentConfig, PuckContext } from "../../types/Config";
 
+import { useDroppable, UseDroppableInput } from "@dnd-kit/react";
+import { DrawerItemInner } from "../Drawer";
+import { pointerIntersection } from "@dnd-kit/collision";
+import { insert } from "../../lib/insert";
+import { DragAxis } from "../DraggableComponent/collision/dynamic/get-direction";
+
 const getClassName = getClassNameFactory("DropZone", styles);
 
 export { DropZoneProvider, dropZoneContext } from "./context";
 
-function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
+function DropZoneEdit({
+  zone,
+  allow,
+  disallow,
+  style,
+  className,
+  dragRef,
+}: DropZoneProps) {
   const appContext = useAppContext();
   const ctx = useContext(dropZoneContext);
 
   const {
     // These all need setting via context
     data,
-    dispatch = () => null,
     config,
-    itemSelector,
-    setItemSelector = () => null,
     areaId,
     draggedItem,
-    placeholderStyle,
     registerZoneArea,
-    areasWithZones,
-    hoveringComponent,
-    zoneWillDrag,
-    setZoneWillDrag = () => null,
+    depth,
+    registerLocalZone,
+    deepestZone,
+    deepestArea = "root",
+    isDragging,
   } = ctx! || {};
 
+  const { itemSelector } = appContext.state.ui;
+
   let content = data.content || [];
   let zoneCompound = rootDroppableId;
 
@@ -48,6 +58,10 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
 
   // Register and unregister zone on mount
   useEffect(() => {
+    if (registerLocalZone) {
+      registerLocalZone(zoneCompound, isDroppableTarget());
+    }
+
     if (ctx?.registerZone) {
       ctx?.registerZone(zoneCompound);
     }
@@ -66,78 +80,14 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
     }
   }
 
-  const isRootZone =
-    zoneCompound === rootDroppableId ||
-    zone === rootDroppableId ||
-    areaId === "root";
-
-  const draggedSourceId = draggedItem && draggedItem.source.droppableId;
-  const draggedDestinationId =
-    draggedItem && draggedItem.destination?.droppableId;
-  const [zoneArea] = getZoneId(zoneCompound);
+  const ref = useRef<HTMLDivElement | null>();
 
-  // we use the index rather than spread to prevent down-level iteration warnings: https://stackoverflow.com/questions/53441292/why-downleveliteration-is-not-on-by-default
-  const [draggedSourceArea] = getZoneId(draggedSourceId);
-
-  const userWillDrag = zoneWillDrag === zone;
-
-  const userIsDragging = !!draggedItem;
-  const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
-  const draggingNewComponent = draggedSourceId?.startsWith("component-list");
-
-  if (
-    !ctx?.config ||
-    !ctx.setHoveringArea ||
-    !ctx.setHoveringZone ||
-    !ctx.setHoveringComponent ||
-    !ctx.setItemSelector ||
-    !ctx.registerPath ||
-    !ctx.dispatch
-  ) {
-    return <div>DropZone requires context to work.</div>;
-  }
-
-  const {
-    hoveringArea = "root",
-    setHoveringArea,
-    hoveringZone,
-    setHoveringZone,
-    setHoveringComponent,
-  } = ctx;
-
-  const hoveringOverArea = hoveringArea
-    ? hoveringArea === zoneArea
-    : isRootZone;
-  const hoveringOverZone = hoveringZone === zoneCompound;
-
-  let isEnabled = userWillDrag;
-
-  /**
-   * We enable zones when:
-   *
-   * 1. This is a new component and the user is dragging over the area. This
-   *    check prevents flickering if you move cursor outside of zone
-   *    but within the area
-   * 2. This is an existing component and the user a) is dragging over the
-   *    area (which prevents drags between zone areas, breaking the rules
-   *    of @hello-pangea/dnd) and b) has the cursor hovering directly over
-   *    the specific zone (which increases robustness when using flex
-   *    layouts)
-   */
-  if (userIsDragging) {
-    if (draggingNewComponent) {
-      if (appContext.safariFallbackMode) {
-        isEnabled = true;
-      } else {
-        isEnabled = hoveringOverArea;
-      }
-    } else {
-      isEnabled = draggingOverArea && hoveringOverZone;
+  const isDroppableTarget = useCallback(() => {
+    if (!draggedItem) {
+      return true;
     }
-  }
 
-  if (isEnabled && userIsDragging && (allow || disallow)) {
-    const [_, componentType] = draggedItem.draggableId.split("::");
+    const { componentType } = draggedItem.data;
 
     if (disallow) {
       const defaultedAllow = allow || [];
@@ -148,230 +98,213 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
       );
 
       if (filteredDisallow.indexOf(componentType) !== -1) {
-        isEnabled = false;
+        return false;
       }
     } else if (allow) {
       if (allow.indexOf(componentType) === -1) {
-        isEnabled = false;
+        return false;
       }
     }
+
+    // console.log("default");
+
+    return true;
+  }, [draggedItem]);
+
+  useEffect(() => {
+    if (registerLocalZone) {
+      registerLocalZone(zoneCompound, isDroppableTarget());
+    }
+  }, [isDragging, zoneCompound]);
+
+  const isRootZone =
+    zoneCompound === rootDroppableId ||
+    zone === rootDroppableId ||
+    areaId === "root";
+
+  const hoveringOverArea = deepestArea ? deepestArea === areaId : isRootZone;
+
+  const userIsDragging = !!draggedItem;
+
+  // if (
+  //   !ctx?.config ||
+  //   !ctx.setHoveringArea ||
+  //   !ctx.setHoveringZone ||
+  //   !ctx.setHoveringComponent ||
+  //   !ctx.setItemSelector ||
+  //   !ctx.registerPath ||
+  //   !ctx.dispatch
+  // ) {
+  //   return <div>DropZone requires context to work.</div>;
+  // }
+
+  let isEnabled = true;
+
+  if (isDragging) {
+    isEnabled = ctx?.deepestZone === zoneCompound;
   }
 
+  if (isEnabled) {
+    isEnabled = isDroppableTarget();
+  }
+
+  const isDropEnabled = isEnabled && content.length === 0;
+
+  const droppableConfig: UseDroppableInput = {
+    id: zoneCompound,
+    collisionPriority: isEnabled ? depth : 0,
+    disabled: !isDropEnabled,
+    collisionDetector: pointerIntersection,
+    data: {
+      zone: true,
+      areaId,
+      depth,
+    },
+  };
+
+  const { ref: dropRef } = useDroppable(droppableConfig);
+
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
+  const isAreaSelected = selectedItem && areaId === selectedItem.props.id;
+
+  const { preview } = appContext.state.ui;
+
+  const contentWithPreview =
+    preview?.zone === zoneCompound
+      ? insert(content, preview.index, {
+          type: "preview",
+          props: { id: preview.id },
+        })
+      : content;
+
+  const [dragAxis, setDragAxis] = useState<DragAxis>("y");
+
+  useEffect(() => {
+    if (ref.current) {
+      const computedStyle = window.getComputedStyle(ref.current);
+
+      if (computedStyle.display === "grid") {
+        setDragAxis("dynamic");
+      } else if (
+        computedStyle.display === "flex" &&
+        computedStyle.flexDirection === "row"
+      ) {
+        setDragAxis("dynamic");
+      } else {
+        setDragAxis("y");
+      }
+    }
+  }, [ref]);
 
   return (
     <div
-      className={getClassName({
+      className={`${getClassName({
         isRootZone,
         userIsDragging,
-        draggingOverArea,
         hoveringOverArea,
-        draggingNewComponent,
-        isDestination: draggedDestinationId === zoneCompound,
-        isDisabled: !isEnabled,
+        isEnabled,
         isAreaSelected,
         hasChildren: content.length > 0,
-      })}
-      onMouseUp={() => {
-        setZoneWillDrag("");
+      })}${className ? ` ${className}` : ""}`}
+      ref={(node) => {
+        ref.current = node;
+
+        // dnd-kit gets confused if both drop and drag refs are assigned during a drag.
+        // Luckily, during a drag, isDropEnabled === false for this item, so we can
+        // remove the ref.
+        // TODO see if there's a fix for this upstream
+        // if (isDropEnabled) {
+        dropRef(node);
+        // }
+
+        if (dragRef) dragRef(node);
       }}
+      style={style}
     >
-      <Droppable
-        droppableId={zoneCompound}
-        direction={"vertical"}
-        isDropDisabled={!isEnabled}
-      >
-        {(provided, snapshot) => {
-          return (
-            <div
-              {...(provided || { droppableProps: {} }).droppableProps}
-              className={getClassName("content")}
-              ref={provided?.innerRef}
-              style={style}
-              id={zoneCompound}
-              onMouseOver={(e) => {
-                e.stopPropagation();
-                setHoveringArea(zoneArea);
-                setHoveringZone(zoneCompound);
-              }}
-            >
-              {content.map((item, i) => {
-                const componentId = item.props.id;
-
-                const puckProps: PuckContext = {
-                  renderDropZone: DropZone,
-                  isEditing: true,
-                };
-
-                const defaultedProps = {
-                  ...config.components[item.type]?.defaultProps,
-                  ...item.props,
-                  puck: puckProps,
-                  editMode: true, // DEPRECATED
-                };
-
-                const isSelected =
-                  selectedItem?.props.id === componentId || false;
-
-                const isDragging =
-                  (draggedItem?.draggableId || "draggable-").split(
-                    "draggable-"
-                  )[1] === componentId;
-
-                const containsZone = areasWithZones
-                  ? areasWithZones[componentId]
-                  : false;
-
-                const Render = config.components[item.type]
-                  ? config.components[item.type].render
-                  : () => (
-                      <div style={{ padding: 48, textAlign: "center" }}>
-                        No configuration for {item.type}
-                      </div>
-                    );
-
-                const componentConfig: ComponentConfig | undefined =
-                  config.components[item.type];
-
-                const label =
-                  componentConfig?.["label"] ?? item.type.toString();
-
-                return (
-                  <div
-                    key={item.props.id}
-                    className={getClassName("item")}
-                    style={{ zIndex: isDragging ? 1 : undefined }}
-                  >
-                    <DropZoneProvider
-                      value={{
-                        ...ctx,
-                        areaId: componentId,
-                      }}
-                    >
-                      <DraggableComponent
-                        label={label}
-                        id={`draggable-${componentId}`}
-                        index={i}
-                        isSelected={isSelected}
-                        isLocked={userIsDragging}
-                        forceHover={
-                          hoveringComponent === componentId && !userIsDragging
-                        }
-                        indicativeHover={
-                          userIsDragging &&
-                          containsZone &&
-                          hoveringArea === componentId
-                        }
-                        isLoading={
-                          appContext.componentState[componentId]?.loading
-                        }
-                        onMount={() => {
-                          ctx.registerPath!({
-                            index: i,
-                            zone: zoneCompound,
-                          });
-                        }}
-                        onClick={(e) => {
-                          setItemSelector({
-                            index: i,
-                            zone: zoneCompound,
-                          });
-                          e.stopPropagation();
-                        }}
-                        onMouseDown={(e) => {
-                          e.stopPropagation();
-                          setZoneWillDrag(zone);
-                        }}
-                        onMouseOver={(e) => {
-                          e.stopPropagation();
-
-                          if (containsZone) {
-                            setHoveringArea(componentId);
-                          } else {
-                            setHoveringArea(zoneArea);
-                          }
-
-                          setHoveringComponent(componentId);
-
-                          setHoveringZone(zoneCompound);
-                        }}
-                        onMouseOut={() => {
-                          setHoveringArea(null);
-                          setHoveringZone(null);
-                          setHoveringComponent(null);
-                        }}
-                        onDelete={(e) => {
-                          dispatch({
-                            type: "remove",
-                            index: i,
-                            zone: zoneCompound,
-                          });
-
-                          setItemSelector(null);
-
-                          e.stopPropagation();
-                        }}
-                        onDuplicate={(e) => {
-                          dispatch({
-                            type: "duplicate",
-                            sourceIndex: i,
-                            sourceZone: zoneCompound,
-                          });
-
-                          setItemSelector({
-                            zone: zoneCompound,
-                            index: i + 1,
-                          });
-
-                          e.stopPropagation();
-                        }}
-                        style={{
-                          pointerEvents:
-                            userIsDragging && draggingNewComponent
-                              ? "all"
-                              : undefined,
-                        }}
-                      >
-                        <div className={getClassName("renderWrapper")}>
-                          <Render {...defaultedProps} />
-                        </div>
-                      </DraggableComponent>
-                    </DropZoneProvider>
-                    {userIsDragging && (
-                      <div
-                        className={getClassName("hitbox")}
-                        onMouseOver={(e) => {
-                          e.stopPropagation();
-                          setHoveringArea(zoneArea);
-                          setHoveringZone(zoneCompound);
-                        }}
-                      />
-                    )}
-                  </div>
-                );
-              })}
-              {provided?.placeholder}
-              {snapshot?.isDraggingOver && (
-                <div
-                  data-puck-placeholder
-                  style={{
-                    ...placeholderStyle,
-                    background: "var(--puck-color-azure-06)",
-                    opacity: 0.3,
-                    zIndex: 0,
+      {contentWithPreview.map((item, i) => {
+        const componentId = item.props.id;
+
+        const puckProps: PuckContext = {
+          renderDropZone: DropZone,
+          isEditing: true,
+          dragRef: null,
+        };
+
+        const defaultedProps = {
+          ...config.components[item.type]?.defaultProps,
+          ...item.props,
+          puck: puckProps,
+          editMode: true, // DEPRECATED
+        };
+
+        const isSelected = selectedItem?.props.id === componentId || false;
+
+        // const containsZone = areasWithZones
+        //   ? areasWithZones[componentId]
+        //   : false;
+
+        let Render = config.components[item.type]
+          ? config.components[item.type].render
+          : () => (
+              <div style={{ padding: 48, textAlign: "center" }}>
+                No configuration for {item.type}
+              </div>
+            );
+
+        const componentConfig: ComponentConfig | undefined =
+          config.components[item.type];
+
+        let componentType = item.type;
+
+        let label = componentConfig?.["label"] ?? item.type.toString();
+
+        if (item.type === "preview") {
+          componentType = preview!.componentType;
+
+          label =
+            config.components[componentType]?.label ?? preview!.componentType;
+
+          Render = () => <DrawerItemInner name={label} />;
+        }
+
+        return (
+          <DraggableComponent
+            key={componentId}
+            id={componentId}
+            componentType={componentType}
+            zoneCompound={zoneCompound}
+            depth={depth + 1}
+            index={i}
+            isLoading={appContext.componentState[componentId]?.loading}
+            isSelected={isSelected}
+            label={label}
+            isEnabled={isEnabled}
+            dragAxis={dragAxis}
+            inDroppableZone={isDroppableTarget()}
+          >
+            {(dragRef) =>
+              componentConfig?.inline ? (
+                <Render
+                  {...defaultedProps}
+                  puck={{
+                    ...defaultedProps.puck,
+                    dragRef,
                   }}
                 />
-              )}
-            </div>
-          );
-        }}
-      </Droppable>
+              ) : (
+                <div ref={dragRef}>
+                  <Render {...defaultedProps} />
+                </div>
+              )
+            }
+          </DraggableComponent>
+        );
+      })}
     </div>
   );
 }
 
-function DropZoneRender({ zone }: DropZoneProps) {
+function DropZoneRender({ className, style, zone }: DropZoneProps) {
   const ctx = useContext(dropZoneContext);
 
   const { data, areaId = "root", config } = ctx || {};
@@ -389,7 +322,7 @@ function DropZoneRender({ zone }: DropZoneProps) {
   }
 
   return (
-    <>
+    <div className={className} style={style}>
       {content.map((item) => {
         const Component = config.components[item.type];
 
@@ -397,7 +330,13 @@ function DropZoneRender({ zone }: DropZoneProps) {
           return (
             <DropZoneProvider
               key={item.props.id}
-              value={{ data, config, areaId: item.props.id }}
+              value={{
+                data,
+                config,
+                areaId: item.props.id,
+                depth: 1,
+                isDragging: false,
+              }}
             >
               <Component.render
                 {...item.props}
@@ -409,7 +348,7 @@ function DropZoneRender({ zone }: DropZoneProps) {
 
         return null;
       })}
-    </>
+    </div>
   );
 }
 
@@ -417,8 +356,16 @@ export function DropZone(props: DropZoneProps) {
   const ctx = useContext(dropZoneContext);
 
   if (ctx?.mode === "edit") {
-    return <DropZoneEdit {...props} />;
+    return (
+      <>
+        <DropZoneEdit {...props} />
+      </>
+    );
   }
 
-  return <DropZoneRender {...props} />;
+  return (
+    <>
+      <DropZoneRender {...props} />
+    </>
+  );
 }
diff --git a/packages/core/components/DropZone/styles.module.css b/packages/core/components/DropZone/styles.module.css
index 317cb62da..2d603d321 100644
--- a/packages/core/components/DropZone/styles.module.css
+++ b/packages/core/components/DropZone/styles.module.css
@@ -1,33 +1,13 @@
 .DropZone {
-  margin-left: auto;
-  margin-right: auto;
   position: relative;
-  min-height: 100%;
+  min-height: 128px;
+  min-width: 128px;
   outline-offset: -2px;
   width: 100%;
 }
 
-.DropZone-content {
-  min-height: 128px;
-  height: 100%;
-}
-
-.DropZone--userIsDragging .DropZone-content {
-  pointer-events: all;
-}
-
-.DropZone--userIsDragging:not(.DropZone--draggingOverArea):not(
-    .DropZone--draggingNewComponent
-  )
-  > .DropZone-content {
-  pointer-events: none;
-}
-
 .DropZone--isAreaSelected,
-.DropZone--draggingOverArea:not(:has(.DropZone--hoveringOverArea)),
-.DropZone--hoveringOverArea:not(.DropZone--isDisabled):not(
-    .DropZone--isRootZone
-  ):not(.DropZone--hasChildren) {
+.DropZone--hoveringOverArea:not(.DropZone--isRootZone) {
   background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
   outline: 2px dashed var(--puck-color-azure-08);
 }
@@ -60,3 +40,7 @@
   width: 100%;
   z-index: 1;
 }
+
+.DropZone--isEnabled.DropZone--userIsDragging {
+  outline: 2px dashed var(--puck-color-azure-06);
+}
diff --git a/packages/core/components/DropZone/types.ts b/packages/core/components/DropZone/types.ts
index fbcf95c1d..97e58f716 100644
--- a/packages/core/components/DropZone/types.ts
+++ b/packages/core/components/DropZone/types.ts
@@ -1,3 +1,4 @@
+import { RefOrValue } from "@dnd-kit/react/utilities";
 import { CSSProperties } from "react";
 
 export type DropZoneProps = {
@@ -5,4 +6,6 @@ export type DropZoneProps = {
   allow?: string[];
   disallow?: string[];
   style?: CSSProperties;
+  className?: string;
+  dragRef?: (element: Element | null) => void;
 };
diff --git a/packages/core/components/LayerTree/index.tsx b/packages/core/components/LayerTree/index.tsx
index 113e0a27c..58cc7ceec 100644
--- a/packages/core/components/LayerTree/index.tsx
+++ b/packages/core/components/LayerTree/index.tsx
@@ -58,11 +58,8 @@ export const LayerTree = ({
           const zonesForItem = findZonesForArea(data, item.props.id);
           const containsZone = Object.keys(zonesForItem).length > 0;
 
-          const {
-            setHoveringArea = () => {},
-            setHoveringComponent = () => {},
-            hoveringComponent,
-          } = ctx || {};
+          const { setHoveringComponent = () => {}, hoveringComponent } =
+            ctx || {};
 
           const selectedItem =
             itemSelector && data ? getItem(itemSelector, data) : null;
@@ -111,12 +108,10 @@ export const LayerTree = ({
                   }}
                   onMouseOver={(e) => {
                     e.stopPropagation();
-                    setHoveringArea(item.props.id);
                     setHoveringComponent(item.props.id);
                   }}
                   onMouseOut={(e) => {
                     e.stopPropagation();
-                    setHoveringArea(null);
                     setHoveringComponent(null);
                   }}
                 >
diff --git a/packages/core/components/LegacyDnd/DragDropContext/index.tsx b/packages/core/components/LegacyDnd/DragDropContext/index.tsx
new file mode 100644
index 000000000..6f6508258
--- /dev/null
+++ b/packages/core/components/LegacyDnd/DragDropContext/index.tsx
@@ -0,0 +1,17 @@
+import {
+  DragDropContext as DndDragDropContext,
+  DragDropContextProps,
+} from "@measured/dnd";
+import { useAppContext } from "../../Puck/context";
+
+const DefaultDragDropContext = ({ children }: DragDropContextProps) => (
+  <>{children}</>
+);
+
+export const DragDropContext = (props: DragDropContextProps) => {
+  const { status } = useAppContext();
+
+  const El = status !== "LOADING" ? DndDragDropContext : DefaultDragDropContext;
+
+  return <El {...props} />;
+};
diff --git a/packages/core/components/Draggable/index.tsx b/packages/core/components/LegacyDnd/Draggable/index.tsx
similarity index 97%
rename from packages/core/components/Draggable/index.tsx
rename to packages/core/components/LegacyDnd/Draggable/index.tsx
index ec4788aae..6b476af08 100644
--- a/packages/core/components/Draggable/index.tsx
+++ b/packages/core/components/LegacyDnd/Draggable/index.tsx
@@ -6,7 +6,7 @@ import {
   DraggableProps,
   DraggableRubric,
 } from "@measured/dnd";
-import { useAppContext } from "../Puck/context";
+import { useAppContext } from "../../Puck/context";
 
 const defaultProvided: DraggableProvided = {
   draggableProps: {
diff --git a/packages/core/components/Droppable/index.tsx b/packages/core/components/LegacyDnd/Droppable/index.tsx
similarity index 93%
rename from packages/core/components/Droppable/index.tsx
rename to packages/core/components/LegacyDnd/Droppable/index.tsx
index d0310a0dd..3cbc79cd8 100644
--- a/packages/core/components/Droppable/index.tsx
+++ b/packages/core/components/LegacyDnd/Droppable/index.tsx
@@ -4,7 +4,7 @@ import {
   DroppableProvided,
   DroppableStateSnapshot,
 } from "@measured/dnd";
-import { useAppContext } from "../Puck/context";
+import { useAppContext } from "../../Puck/context";
 
 const defaultProvided: DroppableProvided = {
   droppableProps: {
diff --git a/packages/core/components/Puck/components/Canvas/index.tsx b/packages/core/components/Puck/components/Canvas/index.tsx
index 16d2b4c90..14b741b5f 100644
--- a/packages/core/components/Puck/components/Canvas/index.tsx
+++ b/packages/core/components/Puck/components/Canvas/index.tsx
@@ -159,6 +159,7 @@ export const Canvas = () => {
             overflow: iframe.enabled ? undefined : "auto",
           }}
           suppressHydrationWarning // Suppress hydration warning as frame is not visible until after load
+          id="puck-canvas-root"
         >
           <CustomPreview>
             <Preview />
diff --git a/packages/core/components/Puck/components/Preview/index.tsx b/packages/core/components/Puck/components/Preview/index.tsx
index 16957c9d7..a93e5bfd7 100644
--- a/packages/core/components/Puck/components/Preview/index.tsx
+++ b/packages/core/components/Puck/components/Preview/index.tsx
@@ -1,6 +1,6 @@
 import { DropZone } from "../../../DropZone";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
-import { ReactNode, useCallback, useRef } from "react";
+import { ReactNode, useCallback, useEffect, useRef } from "react";
 import { useAppContext } from "../../context";
 import AutoFrame from "../../../AutoFrame";
 import styles from "./styles.module.css";
@@ -57,7 +57,7 @@ export const Preview = ({ id = "puck-preview" }: { id?: string }) => {
           </Page>
         </AutoFrame>
       ) : (
-        <div id="preview-frame" className={getClassName("frame")}>
+        <div id="preview-frame" className={getClassName("frame")} ref={ref}>
           <Page dispatch={dispatch} state={state} {...rootProps}>
             <DropZone zone={rootDroppableId} />
           </Page>
diff --git a/packages/core/components/Puck/components/Preview/styles.module.css b/packages/core/components/Puck/components/Preview/styles.module.css
index bb2bf44fb..4e1f43731 100644
--- a/packages/core/components/Puck/components/Preview/styles.module.css
+++ b/packages/core/components/Puck/components/Preview/styles.module.css
@@ -1,4 +1,5 @@
 .PuckPreview {
+  position: relative;
   height: 100%;
 }
 
diff --git a/packages/core/components/Puck/context.tsx b/packages/core/components/Puck/context.tsx
index 62f975f98..ce901aa20 100644
--- a/packages/core/components/Puck/context.tsx
+++ b/packages/core/components/Puck/context.tsx
@@ -11,6 +11,7 @@ import { getItem } from "../../lib/get-item";
 import { Plugin } from "../../types/Plugin";
 import { Overrides } from "../../types/Overrides";
 import { PuckHistory } from "../../lib/use-puck-history";
+import { useDeferred } from "../../lib/use-deferred";
 import { defaultViewports } from "../ViewportControls/default-viewports";
 import { Viewports } from "../../types/Viewports";
 import { IframeConfig } from "../../types/IframeConfig";
@@ -33,6 +34,7 @@ export const defaultAppState: AppState = {
       options: [],
       controlsVisible: true,
     },
+    preview: null,
   },
 };
 
@@ -47,6 +49,7 @@ type ZoomConfig = {
 type AppContext<UserConfig extends Config = Config> = {
   state: AppState;
   dispatch: (action: PuckAction) => void;
+  deferred?: ReturnType<typeof useDeferred>;
   config: UserConfig;
   componentState: Record<string, { loading: boolean }>;
   resolveData: (newAppState: AppState) => void;
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 38332281d..a44bcbbbf 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -7,13 +7,11 @@ import {
   useReducer,
   useState,
 } from "react";
-import { DragStart, DragUpdate } from "@measured/dnd";
 
 import type { AppState, Config, Data, UiState } from "../../types/Config";
 import { Button } from "../Button";
 
 import { Plugin } from "../../types/Plugin";
-import { usePlaceholderStyle } from "../../lib/use-placeholder-style";
 
 import { SidebarSection } from "../SidebarSection";
 import {
@@ -25,8 +23,7 @@ import {
 } from "lucide-react";
 import { Heading } from "../Heading";
 import { IconButton } from "../IconButton/IconButton";
-import { DropZoneProvider } from "../DropZone";
-import { ItemSelector, getItem } from "../../lib/get-item";
+import { getItem } from "../../lib/get-item";
 import { PuckAction, StateReducer, createReducer } from "../../reducer";
 import { flushZones } from "../../lib/flush-zones";
 import getClassNameFactory from "../../lib/get-class-name-factory";
@@ -47,6 +44,9 @@ import { defaultViewports } from "../ViewportControls/default-viewports";
 import { Viewports } from "../../types/Viewports";
 import { DragDropContext } from "../DragDropContext";
 import { IframeConfig } from "../../types/IframeConfig";
+import { DragDropManager, Feedback } from "@dnd-kit/dom";
+import { useInjectGlobalCss } from "../../lib/use-inject-css";
+import { useDeferred } from "../../lib/use-deferred";
 
 const getClassName = getClassNameFactory("Puck", styles);
 const getLayoutClassName = getClassNameFactory("PuckLayout", styles);
@@ -102,6 +102,8 @@ export function Puck<UserConfig extends Config = Config>({
 }) {
   const historyStore = useHistoryStore(initialHistory);
 
+  useInjectGlobalCss(iframe.enabled);
+
   const [reducer] = useState(() =>
     createReducer<UserConfig>({ config, record: historyStore.record })
   );
@@ -220,31 +222,12 @@ export function Puck<UserConfig extends Config = Config>({
 
   const { itemSelector, leftSideBarVisible, rightSideBarVisible } = ui;
 
-  const setItemSelector = useCallback(
-    (newItemSelector: ItemSelector | null) => {
-      if (newItemSelector === itemSelector) return;
-
-      dispatch({
-        type: "setUi",
-        ui: { itemSelector: newItemSelector },
-        recordHistory: true,
-      });
-    },
-    [itemSelector]
-  );
-
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
 
   useEffect(() => {
     if (onChange) onChange(data);
   }, [data]);
 
-  const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-
-  const [draggedItem, setDraggedItem] = useState<
-    DragStart & Partial<DragUpdate>
-  >();
-
   // DEPRECATED
   const rootProps = data.root.props || data.root;
 
@@ -380,12 +363,17 @@ export function Puck<UserConfig extends Config = Config>({
     ? selectedComponentConfig?.["label"] ?? selectedItem.type.toString()
     : "";
 
+  const [manager] = useState(new DragDropManager({ plugins: [Feedback] }));
+
+  const deferred = useDeferred(appState, config, dispatch);
+
   return (
     <div className={`Puck ${getClassName()}`}>
       <AppProvider
         value={{
           state: appState,
           dispatch,
+          deferred,
           config,
           componentState,
           resolveData,
@@ -396,223 +384,139 @@ export function Puck<UserConfig extends Config = Config>({
           iframe,
         }}
       >
-        <DragDropContext
-          autoScrollerOptions={{ disabled: dnd?.disableAutoScroll }}
-          onDragUpdate={(update) => {
-            setDraggedItem({ ...draggedItem, ...update });
-            onDragStartOrUpdate(update);
-          }}
-          onBeforeDragStart={(start) => {
-            onDragStartOrUpdate(start);
-            setItemSelector(null);
-            dispatch({ type: "setUi", ui: { isDragging: true } });
-          }}
-          onDragEnd={(droppedItem) => {
-            setDraggedItem(undefined);
-            dispatch({ type: "setUi", ui: { isDragging: false } });
-
-            // User cancel drag
-            if (!droppedItem.destination) {
-              return;
-            }
-
-            // New component
-            if (
-              droppedItem.source.droppableId.startsWith("component-list") &&
-              droppedItem.destination
-            ) {
-              const [_, componentType] = droppedItem.draggableId.split("::");
-
-              dispatch({
-                type: "insert",
-                componentType: componentType || droppedItem.draggableId,
-                destinationIndex: droppedItem.destination!.index,
-                destinationZone: droppedItem.destination.droppableId,
-              });
-
-              setItemSelector({
-                index: droppedItem.destination!.index,
-                zone: droppedItem.destination.droppableId,
-              });
-
-              return;
-            } else {
-              const { source, destination } = droppedItem;
-
-              if (source.droppableId === destination.droppableId) {
-                dispatch({
-                  type: "reorder",
-                  sourceIndex: source.index,
-                  destinationIndex: destination.index,
-                  destinationZone: destination.droppableId,
-                });
-              } else {
-                dispatch({
-                  type: "move",
-                  sourceZone: source.droppableId,
-                  sourceIndex: source.index,
-                  destinationIndex: destination.index,
-                  destinationZone: destination.droppableId,
-                });
-              }
-
-              setItemSelector({
-                index: destination.index,
-                zone: destination.droppableId,
-              });
-            }
-          }}
-        >
-          <DropZoneProvider
-            value={{
-              data,
-              itemSelector,
-              setItemSelector,
-              config,
-              dispatch,
-              draggedItem,
-              placeholderStyle,
-              mode: "edit",
-              areaId: "root",
-            }}
-          >
-            <CustomPuck>
-              {children || (
-                <div
-                  className={getLayoutClassName({
-                    leftSideBarVisible,
-                    menuOpen,
-                    mounted,
-                    rightSideBarVisible,
-                  })}
-                >
-                  <div className={getLayoutClassName("inner")}>
-                    <CustomHeader
-                      actions={
-                        <>
-                          <CustomHeaderActions>
-                            <Button
+        <DragDropContext>
+          <CustomPuck>
+            {children || (
+              <div
+                className={getLayoutClassName({
+                  leftSideBarVisible,
+                  menuOpen,
+                  mounted,
+                  rightSideBarVisible,
+                })}
+              >
+                <div className={getLayoutClassName("inner")}>
+                  <CustomHeader
+                    actions={
+                      <>
+                        <CustomHeaderActions>
+                          <Button
+                            onClick={() => {
+                              onPublish && onPublish(data);
+                            }}
+                            icon={<Globe size="14px" />}
+                          >
+                            Publish
+                          </Button>
+                        </CustomHeaderActions>
+                      </>
+                    }
+                  >
+                    <header className={getLayoutClassName("header")}>
+                      <div className={getLayoutClassName("headerInner")}>
+                        <div className={getLayoutClassName("headerToggle")}>
+                          <div
+                            className={getLayoutClassName("leftSideBarToggle")}
+                          >
+                            <IconButton
                               onClick={() => {
-                                onPublish && onPublish(data);
+                                toggleSidebars("left");
                               }}
-                              icon={<Globe size="14px" />}
-                            >
-                              Publish
-                            </Button>
-                          </CustomHeaderActions>
-                        </>
-                      }
-                    >
-                      <header className={getLayoutClassName("header")}>
-                        <div className={getLayoutClassName("headerInner")}>
-                          <div className={getLayoutClassName("headerToggle")}>
-                            <div
-                              className={getLayoutClassName(
-                                "leftSideBarToggle"
-                              )}
-                            >
-                              <IconButton
-                                onClick={() => {
-                                  toggleSidebars("left");
-                                }}
-                                title="Toggle left sidebar"
-                              >
-                                <PanelLeft focusable="false" />
-                              </IconButton>
-                            </div>
-                            <div
-                              className={getLayoutClassName(
-                                "rightSideBarToggle"
-                              )}
+                              title="Toggle left sidebar"
                             >
-                              <IconButton
-                                onClick={() => {
-                                  toggleSidebars("right");
-                                }}
-                                title="Toggle right sidebar"
-                              >
-                                <PanelRight focusable="false" />
-                              </IconButton>
-                            </div>
+                              <PanelLeft focusable="false" />
+                            </IconButton>
                           </div>
-                          <div className={getLayoutClassName("headerTitle")}>
-                            <Heading rank={2} size="xs">
-                              {headerTitle || rootProps.title || "Page"}
-                              {headerPath && (
-                                <>
-                                  {" "}
-                                  <code
-                                    className={getLayoutClassName("headerPath")}
-                                  >
-                                    {headerPath}
-                                  </code>
-                                </>
-                              )}
-                            </Heading>
+                          <div
+                            className={getLayoutClassName("rightSideBarToggle")}
+                          >
+                            <IconButton
+                              onClick={() => {
+                                toggleSidebars("right");
+                              }}
+                              title="Toggle right sidebar"
+                            >
+                              <PanelRight focusable="false" />
+                            </IconButton>
                           </div>
-                          <div className={getLayoutClassName("headerTools")}>
-                            <div className={getLayoutClassName("menuButton")}>
-                              <IconButton
-                                onClick={() => {
-                                  return setMenuOpen(!menuOpen);
-                                }}
-                                title="Toggle menu bar"
-                              >
-                                {menuOpen ? (
-                                  <ChevronUp focusable="false" />
-                                ) : (
-                                  <ChevronDown focusable="false" />
-                                )}
-                              </IconButton>
-                            </div>
-                            <MenuBar
-                              appState={appState}
-                              data={data}
-                              dispatch={dispatch}
-                              onPublish={onPublish}
-                              menuOpen={menuOpen}
-                              renderHeaderActions={() => (
-                                <CustomHeaderActions>
-                                  <Button
-                                    onClick={() => {
-                                      onPublish && onPublish(data);
-                                    }}
-                                    icon={<Globe size="14px" />}
-                                  >
-                                    Publish
-                                  </Button>
-                                </CustomHeaderActions>
+                        </div>
+                        <div className={getLayoutClassName("headerTitle")}>
+                          <Heading rank={2} size="xs">
+                            {headerTitle || rootProps.title || "Page"}
+                            {headerPath && (
+                              <>
+                                {" "}
+                                <code
+                                  className={getLayoutClassName("headerPath")}
+                                >
+                                  {headerPath}
+                                </code>
+                              </>
+                            )}
+                          </Heading>
+                        </div>
+                        <div className={getLayoutClassName("headerTools")}>
+                          <div className={getLayoutClassName("menuButton")}>
+                            <IconButton
+                              onClick={() => {
+                                return setMenuOpen(!menuOpen);
+                              }}
+                              title="Toggle menu bar"
+                            >
+                              {menuOpen ? (
+                                <ChevronUp focusable="false" />
+                              ) : (
+                                <ChevronDown focusable="false" />
                               )}
-                              setMenuOpen={setMenuOpen}
-                            />
+                            </IconButton>
                           </div>
+                          <MenuBar
+                            appState={appState}
+                            data={data}
+                            dispatch={dispatch}
+                            onPublish={onPublish}
+                            menuOpen={menuOpen}
+                            renderHeaderActions={() => (
+                              <CustomHeaderActions>
+                                <Button
+                                  onClick={() => {
+                                    onPublish && onPublish(data);
+                                  }}
+                                  icon={<Globe size="14px" />}
+                                >
+                                  Publish
+                                </Button>
+                              </CustomHeaderActions>
+                            )}
+                            setMenuOpen={setMenuOpen}
+                          />
                         </div>
-                      </header>
-                    </CustomHeader>
-                    <div className={getLayoutClassName("leftSideBar")}>
-                      <SidebarSection title="Components" noBorderTop>
-                        <Components />
-                      </SidebarSection>
-                      <SidebarSection title="Outline">
-                        <Outline />
-                      </SidebarSection>
-                    </div>
-                    <Canvas />
-                    <div className={getLayoutClassName("rightSideBar")}>
-                      <SidebarSection
-                        noPadding
-                        noBorderTop
-                        showBreadcrumbs
-                        title={selectedItem ? selectedComponentLabel : "Page"}
-                      >
-                        <Fields />
-                      </SidebarSection>
-                    </div>
+                      </div>
+                    </header>
+                  </CustomHeader>
+                  <div className={getLayoutClassName("leftSideBar")}>
+                    <SidebarSection title="Components" noBorderTop>
+                      <Components />
+                    </SidebarSection>
+                    <SidebarSection title="Outline">
+                      <Outline />
+                    </SidebarSection>
+                  </div>
+                  <Canvas />
+                  <div className={getLayoutClassName("rightSideBar")}>
+                    <SidebarSection
+                      noPadding
+                      noBorderTop
+                      showBreadcrumbs
+                      title={selectedItem ? selectedComponentLabel : "Page"}
+                    >
+                      <Fields />
+                    </SidebarSection>
                   </div>
                 </div>
-              )}
-            </CustomPuck>
-          </DropZoneProvider>
+              </div>
+            )}
+          </CustomPuck>
         </DragDropContext>
       </AppProvider>
       <div id="puck-portal-root" className={getClassName("portal")} />
diff --git a/packages/core/lib/__tests__/is-child-of-zone.spec.tsx b/packages/core/lib/__tests__/is-child-of-zone.spec.tsx
index 24d1ebc15..3fcd4a1bb 100644
--- a/packages/core/lib/__tests__/is-child-of-zone.spec.tsx
+++ b/packages/core/lib/__tests__/is-child-of-zone.spec.tsx
@@ -35,6 +35,7 @@ const dropzoneContext: DropZoneContext = {
       label: "MyComponent",
     },
   },
+  collisionPriority: 1,
 };
 
 describe("is-child-of-zone", () => {
diff --git a/packages/core/lib/__tests__/merge-actions.ts b/packages/core/lib/__tests__/merge-actions.ts
new file mode 100644
index 000000000..b75196bb8
--- /dev/null
+++ b/packages/core/lib/__tests__/merge-actions.ts
@@ -0,0 +1,94 @@
+import { mergeActions } from "../merge-actions";
+
+jest.spyOn(console, "warn").mockImplementation(() => {});
+
+describe("migrate method", () => {
+  it("should merge an array of Insert and Move actions", () => {
+    expect(
+      mergeActions([
+        {
+          type: "insert",
+          destinationIndex: 0,
+          destinationZone: "my-zone",
+          componentType: "My Item",
+        },
+        {
+          type: "move",
+          sourceIndex: 0,
+          sourceZone: "my-zone",
+          destinationIndex: 1,
+          destinationZone: "my-zone",
+        },
+        {
+          type: "move",
+          sourceIndex: 0,
+          sourceZone: "my-zone",
+          destinationIndex: 3,
+          destinationZone: "another-zone",
+        },
+      ])
+    ).toEqual({
+      type: "insert",
+      destinationIndex: 3,
+      destinationZone: "another-zone",
+      componentType: "My Item",
+    });
+  });
+
+  it("should skip unsupported actions", () => {
+    expect(
+      mergeActions([
+        {
+          type: "insert",
+          destinationIndex: 0,
+          destinationZone: "my-zone",
+          componentType: "My Item",
+        },
+        {
+          type: "move",
+          sourceIndex: 0,
+          sourceZone: "my-zone",
+          destinationIndex: 1,
+          destinationZone: "my-zone",
+        },
+        {
+          type: "remove",
+          index: 1,
+          zone: "my-zone",
+        },
+        {
+          type: "move",
+          sourceIndex: 0,
+          sourceZone: "my-zone",
+          destinationIndex: 3,
+          destinationZone: "another-zone",
+        },
+      ])
+    ).toEqual({
+      type: "insert",
+      destinationIndex: 3,
+      destinationZone: "another-zone",
+      componentType: "My Item",
+    });
+  });
+
+  it("should throw if an insert is inserted after another action", () => {
+    expect(() =>
+      mergeActions([
+        {
+          type: "move",
+          sourceIndex: 0,
+          sourceZone: "my-zone",
+          destinationIndex: 1,
+          destinationZone: "my-zone",
+        },
+        {
+          type: "insert",
+          destinationIndex: 0,
+          destinationZone: "my-zone",
+          componentType: "My Item",
+        },
+      ])
+    ).toThrow();
+  });
+});
diff --git a/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx b/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx
index 35e91d86f..e554f4833 100644
--- a/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx
+++ b/packages/core/lib/__tests__/use-breadcrumbs.spec.tsx
@@ -35,6 +35,7 @@ const dropzoneContext: DropZoneContext = {
       label: "MyComponent",
     },
   },
+  collisionPriority: 1,
 };
 
 describe("use-breadcrumbs", () => {
diff --git a/packages/core/lib/merge-actions.ts b/packages/core/lib/merge-actions.ts
new file mode 100644
index 000000000..8c6ca234b
--- /dev/null
+++ b/packages/core/lib/merge-actions.ts
@@ -0,0 +1,41 @@
+import { PuckAction } from "../reducer";
+
+export const mergeActions = (actions?: PuckAction[]) => {
+  return actions?.reduce<PuckAction | null>((acc, item) => {
+    if (item.type === "insert" || item.type === "move") {
+      if (item.type === "insert" && acc) {
+        throw new Error(
+          `Attempting to merge ${item.type} action, but an action already exists.`
+        );
+      }
+
+      if (acc?.type === "insert") {
+        return {
+          ...acc,
+          destinationIndex: item.destinationIndex,
+          destinationZone: item.destinationZone,
+        };
+      }
+
+      let cleanItem = item;
+
+      // Delete any placeholder prop
+      if (item.type === "insert") {
+        delete item.props;
+      }
+
+      return {
+        ...cleanItem,
+        ...acc,
+        destinationIndex: item.destinationIndex,
+        destinationZone: item.destinationZone,
+      };
+    } else {
+      console.warn(
+        `Attempting to merge ${item.type} action. This is not currently supported. Skipping this action...`
+      );
+    }
+
+    return acc;
+  }, null);
+};
diff --git a/packages/core/lib/throttle.ts b/packages/core/lib/throttle.ts
new file mode 100644
index 000000000..a23d2bce4
--- /dev/null
+++ b/packages/core/lib/throttle.ts
@@ -0,0 +1,32 @@
+export function timeout(callback: () => void, duration: number): () => void {
+  const id = setTimeout(callback, duration);
+
+  return () => clearTimeout(id);
+}
+
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  const time = () => performance.now();
+  let cancel: (() => void) | undefined;
+  let lastRan = 0; // Start with 0 to indicate it hasn't run yet
+
+  return function (this: any, ...args: Parameters<T>) {
+    const now = time();
+    const context = this;
+
+    if (now - lastRan >= limit) {
+      // If enough time has passed, run the function immediately
+      func.apply(context, args);
+      lastRan = now;
+    } else {
+      // Otherwise, schedule it to run after the remaining time
+      cancel?.(); // Cancel any previously scheduled call
+      cancel = timeout(() => {
+        func.apply(context, args);
+        lastRan = time();
+      }, limit - (now - lastRan));
+    }
+  };
+}
diff --git a/packages/core/lib/use-deferred.ts b/packages/core/lib/use-deferred.ts
new file mode 100644
index 000000000..f368a410d
--- /dev/null
+++ b/packages/core/lib/use-deferred.ts
@@ -0,0 +1,80 @@
+import { AppState, Config } from "../types/Config";
+import { createReducer, PuckAction, StateReducer } from "../reducer";
+import { useReducer, useState } from "react";
+import { mergeActions } from "./merge-actions";
+
+/**
+ * useDeferred creates a clone of the appState, applying certain actions (insert, move) to the clone
+ * and merging them on commit()
+ *
+ * This allows for multiple actions to occur during the dragging phase against a temporary clone, wait
+ * for the dragging phase to be committed, and finally merge the actions into a single action
+ *
+ * This prevents appState changes during the dragging phase
+ *
+ * @param appState
+ * @param config
+ * @param dispatch
+ * @returns
+ */
+export function useDeferred<UserConfig extends Config = Config>(
+  appState: AppState,
+  config: UserConfig,
+  dispatch: React.Dispatch<PuckAction>
+) {
+  // Used for making deferred data changes
+  const [deferredReducer] = useState(() =>
+    createReducer<UserConfig>({ config })
+  );
+
+  const [isDeferred, setIsDeferring] = useState(false);
+  const [deferredActions, setDeferredActions] = useState<PuckAction[]>([]);
+  const [state, deferredDispatch] = useReducer<StateReducer>(
+    deferredReducer,
+    appState
+  );
+
+  const commit = () => {
+    const action = mergeActions(deferredActions);
+
+    if (action) {
+      dispatch(action);
+    }
+
+    setIsDeferring(false);
+    setDeferredActions([]);
+
+    console.debug("Committed deferred actions");
+  };
+
+  return {
+    isDeferred,
+    start: () => {
+      console.debug("Starting deferred actions");
+
+      deferredDispatch({ type: "set", state: appState });
+      setIsDeferring(true);
+    },
+    commit,
+    state,
+    dispatch: (action: PuckAction) => {
+      if (!isDeferred) {
+        throw new Error(
+          `Deferred state not active. Use deferStart() to begin state deferral.`
+        );
+      }
+
+      if (action.type !== "insert" && action.type !== "move") {
+        throw new Error(
+          `Deferred state only supports "insert" and "move" actions, but you attempted to dispatch a "${action.type}" action. Commit your deferred actions before injecting an action of this type.`
+        );
+      }
+
+      console.debug("Triggered deferred dispatch", action);
+
+      setDeferredActions((actions) => [...actions, action]);
+
+      return deferredDispatch(action);
+    },
+  };
+}
diff --git a/packages/core/lib/use-inject-css.ts b/packages/core/lib/use-inject-css.ts
new file mode 100644
index 000000000..9dd9b7238
--- /dev/null
+++ b/packages/core/lib/use-inject-css.ts
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { useAppContext } from "../components/Puck/context";
+
+const styles = `
+/* Prevent user from interacting with underlying component */
+[data-puck-component] * {
+  user-select: none;
+}
+
+[data-puck-component] {
+  cursor: grab;
+  pointer-events: auto !important;
+}
+
+[data-dnd-placeholder] {
+  background: var(--puck-color-azure-06) !important;
+  border: none !important;
+  color: #00000000 !important;
+  opacity: 0.3 !important;
+  outline: none !important;
+  transition: none !important;
+}
+
+[data-dnd-placeholder] *, [data-dnd-placeholder]::after, [data-dnd-placeholder]::before {
+  opacity: 0 !important;
+}
+
+[data-dnd-dragging] {
+  pointer-events: none !important;
+}
+`;
+
+export const useInjectStyleSheet = (
+  initialStyles: string,
+  iframeEnabled?: boolean
+) => {
+  const [el] = useState<HTMLStyleElement>(document.createElement("style"));
+
+  useEffect(() => {
+    el.innerHTML = initialStyles;
+
+    if (iframeEnabled) {
+      (
+        document.getElementById("preview-frame") as HTMLIFrameElement
+      ).contentWindow?.document.head.appendChild(el);
+    }
+
+    document.head.appendChild(el);
+  }, [iframeEnabled]);
+
+  return el;
+};
+
+export const useInjectGlobalCss = (iframeEnabled?: boolean) => {
+  return useInjectStyleSheet(styles, iframeEnabled);
+};
diff --git a/packages/core/lib/use-placeholder-style.ts b/packages/core/lib/use-placeholder-style.ts
deleted file mode 100644
index ef98169e2..000000000
--- a/packages/core/lib/use-placeholder-style.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { CSSProperties, useState } from "react";
-import { DragStart, DragUpdate } from "@measured/dnd";
-import { getFrame } from "./get-frame";
-
-export const usePlaceholderStyle = () => {
-  const queryAttr = "data-rfd-drag-handle-draggable-id";
-
-  const [placeholderStyle, setPlaceholderStyle] = useState<CSSProperties>();
-
-  const onDragStartOrUpdate = (
-    draggedItem: DragStart & Partial<DragUpdate>
-  ) => {
-    const draggableId = draggedItem.draggableId;
-    const destinationIndex = (draggedItem.destination || draggedItem.source)
-      .index;
-    const droppableId = (draggedItem.destination || draggedItem.source)
-      .droppableId;
-
-    const domQuery = `[${queryAttr}='${draggableId}']`;
-
-    const frame = getFrame();
-    const draggedDOM =
-      document.querySelector(domQuery) || frame?.querySelector(domQuery);
-
-    if (!draggedDOM) {
-      return;
-    }
-
-    const targetListElement = frame?.querySelector(
-      `[data-rfd-droppable-id='${droppableId}']`
-    );
-
-    const { clientHeight } = draggedDOM;
-
-    if (!targetListElement) {
-      return;
-    }
-
-    let clientY = 0;
-
-    const isSameDroppable =
-      draggedItem.source.droppableId === draggedItem.destination?.droppableId;
-
-    if (destinationIndex > 0) {
-      const end =
-        destinationIndex > draggedItem.source.index && isSameDroppable
-          ? destinationIndex + 1
-          : destinationIndex;
-
-      const children = Array.from(targetListElement.children)
-        .filter(
-          (item) =>
-            item !== draggedDOM &&
-            item.getAttributeNames().indexOf("data-puck-placeholder") === -1 &&
-            item
-              .getAttributeNames()
-              .indexOf("data-rfd-placeholder-context-id") === -1
-        )
-        .slice(0, end);
-
-      clientY = children.reduce(
-        (total, item) =>
-          total +
-          item.clientHeight +
-          parseInt(window.getComputedStyle(item).marginTop.replace("px", "")) +
-          parseInt(
-            window.getComputedStyle(item).marginBottom.replace("px", "")
-          ),
-
-        0
-      );
-    }
-
-    setPlaceholderStyle({
-      position: "absolute",
-      top: clientY,
-      left: 0,
-      height: clientHeight,
-      width: "100%",
-    });
-  };
-
-  return { onDragStartOrUpdate, placeholderStyle };
-};
diff --git a/packages/core/package.json b/packages/core/package.json
index 21331e341..e03a67ddc 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -60,6 +60,8 @@
     "typescript": "^4.5.2"
   },
   "dependencies": {
+    "@dnd-kit/react": "^0.0.5",
+    "@dnd-kit/helpers": "^0.0.5",
     "@measured/dnd": "16.6.0-canary.4cba1d1",
     "deep-diff": "^1.0.2",
     "object-hash": "^3.0.0",
diff --git a/packages/core/reducer/__tests__/data.spec.tsx b/packages/core/reducer/__tests__/data.spec.tsx
index a5a1ac825..f57cf9744 100644
--- a/packages/core/reducer/__tests__/data.spec.tsx
+++ b/packages/core/reducer/__tests__/data.spec.tsx
@@ -20,11 +20,6 @@ jest.mock("../../lib/generate-id");
 
 const mockedGenerateId = generateId as jest.MockedFunction<typeof generateId>;
 
-type Props = {
-  Comp: {
-    prop: string;
-  };
-};
 const defaultData: Data = {
   root: { props: { title: "" } },
   content: [],
@@ -34,7 +29,7 @@ const defaultData: Data = {
 const defaultUi: UiState = defaultAppState.ui;
 
 describe("Data reducer", () => {
-  const config: Config<Props> = {
+  const config: Config = {
     components: {
       Comp: {
         defaultProps: { prop: "example" },
diff --git a/packages/core/reducer/__tests__/state.spec.tsx b/packages/core/reducer/__tests__/state.spec.tsx
index d2cc9c635..a413dd65a 100644
--- a/packages/core/reducer/__tests__/state.spec.tsx
+++ b/packages/core/reducer/__tests__/state.spec.tsx
@@ -1,15 +1,9 @@
 import { defaultAppState } from "../../components/Puck/context";
-import { SetUiAction, createReducer } from "../../reducer";
+import { InsertAction, SetUiAction, createReducer } from "../../reducer";
 import { AppState, Config } from "../../types/Config";
 
-type Props = {
-  Comp: {
-    prop: string;
-  };
-};
-
 describe("State reducer", () => {
-  const config: Config<Props> = {
+  const config: Config = {
     components: {
       Comp: {
         defaultProps: { prop: "example" },
@@ -33,4 +27,20 @@ describe("State reducer", () => {
       expect(newState.ui.leftSideBarVisible).toEqual(false);
     });
   });
+
+  describe("insert action", () => {
+    it("should clear preview", () => {
+      const state: AppState = defaultAppState;
+
+      const action: InsertAction = {
+        type: "insert",
+        destinationIndex: 0,
+        destinationZone: "my-zone",
+        componentType: "Comp",
+      };
+
+      const newState = reducer(state, action);
+      expect(newState.ui.preview).toBeNull();
+    });
+  });
 });
diff --git a/packages/core/reducer/actions.tsx b/packages/core/reducer/actions.tsx
index b3befb263..eafd15588 100644
--- a/packages/core/reducer/actions.tsx
+++ b/packages/core/reducer/actions.tsx
@@ -5,6 +5,7 @@ export type InsertAction = {
   componentType: string;
   destinationIndex: number;
   destinationZone: string;
+  props?: object;
 };
 
 export type DuplicateAction = {
diff --git a/packages/core/reducer/data.ts b/packages/core/reducer/data.ts
index 3232b5dc5..79ebc15ea 100644
--- a/packages/core/reducer/data.ts
+++ b/packages/core/reducer/data.ts
@@ -11,7 +11,7 @@ import {
   removeRelatedZones,
 } from "../lib/reduce-related-zones";
 import { generateId } from "../lib/generate-id";
-import { PuckAction, ReplaceAction } from "./actions";
+import { PuckAction, ReorderAction, ReplaceAction } from "./actions";
 
 // Restore unregistered zones when re-registering in same session
 export const zoneCache = {};
@@ -43,6 +43,33 @@ export const replaceAction = (data: Data, action: ReplaceAction) => {
   };
 };
 
+const reorderAction = (data: Data, action: ReorderAction) => {
+  if (action.destinationZone === rootDroppableId) {
+    return {
+      ...data,
+      content: reorder(
+        data.content,
+        action.sourceIndex,
+        action.destinationIndex
+      ),
+    };
+  }
+
+  const newData = setupZone(data, action.destinationZone);
+
+  return {
+    ...data,
+    zones: {
+      ...newData.zones,
+      [action.destinationZone]: reorder(
+        newData.zones[action.destinationZone],
+        action.sourceIndex,
+        action.destinationIndex
+      ),
+    },
+  };
+};
+
 export const reduceData = (data: Data, action: PuckAction, config: Config) => {
   if (action.type === "insert") {
     const emptyComponentData = {
@@ -50,6 +77,7 @@ export const reduceData = (data: Data, action: PuckAction, config: Config) => {
       props: {
         ...(config.components[action.componentType].defaultProps || {}),
         id: generateId(action.componentType),
+        ...action.props,
       },
     };
 
@@ -79,6 +107,41 @@ export const reduceData = (data: Data, action: PuckAction, config: Config) => {
     };
   }
 
+  // if (action.type === "preview") {
+  //   const emptyComponentData = {
+  //     type: "__placeholder",
+  //     props: {
+  //       id: "__placeholder",
+  //       componentType: action.componentType,
+  //     },
+  //   };
+
+  //   if (action.destinationZone === rootDroppableId) {
+  //     return {
+  //       ...data,
+  //       content: insert(
+  //         data.content,
+  //         action.destinationIndex,
+  //         emptyComponentData
+  //       ),
+  //     };
+  //   }
+
+  //   const newData = setupZone(data, action.destinationZone);
+
+  //   return {
+  //     ...data,
+  //     zones: {
+  //       ...newData.zones,
+  //       [action.destinationZone]: insert(
+  //         newData.zones[action.destinationZone],
+  //         action.destinationIndex,
+  //         emptyComponentData
+  //       ),
+  //     },
+  //   };
+  // }
+
   if (action.type === "duplicate") {
     const item = getItem(
       { index: action.sourceIndex, zone: action.sourceZone },
@@ -120,30 +183,7 @@ export const reduceData = (data: Data, action: PuckAction, config: Config) => {
   }
 
   if (action.type === "reorder") {
-    if (action.destinationZone === rootDroppableId) {
-      return {
-        ...data,
-        content: reorder(
-          data.content,
-          action.sourceIndex,
-          action.destinationIndex
-        ),
-      };
-    }
-
-    const newData = setupZone(data, action.destinationZone);
-
-    return {
-      ...data,
-      zones: {
-        ...newData.zones,
-        [action.destinationZone]: reorder(
-          newData.zones[action.destinationZone],
-          action.sourceIndex,
-          action.destinationIndex
-        ),
-      },
-    };
+    return reorderAction(data, action);
   }
 
   if (action.type === "move") {
@@ -157,6 +197,10 @@ export const reduceData = (data: Data, action: PuckAction, config: Config) => {
       newData
     );
 
+    if (action.sourceZone === action.destinationZone) {
+      return reorderAction(data, { ...action, type: "reorder" });
+    }
+
     if (action.sourceZone === rootDroppableId) {
       return {
         ...newData,
diff --git a/packages/core/reducer/index.ts b/packages/core/reducer/index.ts
index 949adaf58..ebf94793f 100644
--- a/packages/core/reducer/index.ts
+++ b/packages/core/reducer/index.ts
@@ -11,10 +11,10 @@ export type ActionType = "insert" | "reorder";
 
 export type StateReducer = Reducer<AppState, PuckAction>;
 
-const storeInterceptor = (
+function storeInterceptor(
   reducer: StateReducer,
   record?: (appState: AppState) => void
-) => {
+) {
   return (state: AppState, action: PuckAction) => {
     const newAppState = reducer(state, action);
 
@@ -36,7 +36,7 @@ const storeInterceptor = (
 
     return newAppState;
   };
-};
+}
 
 export const setAction = (state: AppState, action: SetAction) => {
   if (typeof action.state === "object") {
@@ -57,13 +57,19 @@ export function createReducer<UserConfig extends Config = Config>({
   record?: (appState: AppState) => void;
 }): StateReducer {
   return storeInterceptor((state, action) => {
-    const data = reduceData(state.data, action, config);
-    const ui = reduceUi(state.ui, action);
+    const currentState = state;
+
+    let newState = {
+      data: reduceData(currentState.data, action, config),
+      ui: reduceUi(currentState.ui, action),
+    };
 
     if (action.type === "set") {
-      return setAction(state, action);
+      newState = setAction(currentState, action);
     }
 
-    return { data, ui };
+    console.log(action, state, newState);
+
+    return newState;
   }, record);
 }
diff --git a/packages/core/reducer/state.ts b/packages/core/reducer/state.ts
index 5acdc498b..f0ec52e1b 100644
--- a/packages/core/reducer/state.ts
+++ b/packages/core/reducer/state.ts
@@ -16,5 +16,12 @@ export const reduceUi = (ui: UiState, action: PuckAction) => {
     };
   }
 
+  if (action.type === "insert") {
+    return {
+      ...ui,
+      preview: null,
+    };
+  }
+
   return ui;
 };
diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
index a2ff59a7b..f90c64d2e 100644
--- a/packages/core/types/Config.tsx
+++ b/packages/core/types/Config.tsx
@@ -1,8 +1,10 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { ItemSelector } from "../lib/get-item";
 import { DropZoneProps } from "../components/DropZone/types";
 import { Viewport } from "./Viewports";
 import { Fields } from "./Fields";
+import { RefOrValue } from "@dnd-kit/react/utilities";
+import { PuckAction } from "../reducer";
 
 type WithPuckProps<Props> = Props & {
   id: string;
@@ -26,6 +28,7 @@ export type PuckComponent<Props> = (
 export type PuckContext = {
   renderDropZone: React.FC<DropZoneProps>;
   isEditing: boolean;
+  dragRef: ((element: Element | null) => void) | null;
 };
 
 export type ComponentConfig<
@@ -37,6 +40,7 @@ export type ComponentConfig<
   label?: string;
   defaultProps?: DefaultProps;
   fields?: Fields<ComponentProps>;
+  inline?: boolean;
   resolveFields?: (
     data: DataShape,
     params: {
@@ -169,6 +173,12 @@ export type UiState = {
     controlsVisible: boolean;
     options: Viewport[];
   };
+  preview: {
+    componentType: string;
+    zone: string;
+    index: number;
+    id: string;
+  } | null;
 };
 
 export type AppState = { data: Data; ui: UiState };
diff --git a/packages/plugin-heading-analyzer/globals.d.ts b/packages/plugin-heading-analyzer/globals.d.ts
index 1eabbb429..53b42b9dc 100644
--- a/packages/plugin-heading-analyzer/globals.d.ts
+++ b/packages/plugin-heading-analyzer/globals.d.ts
@@ -1 +1,2 @@
 declare module "*.module.css";
+declare module "*.global.css";
diff --git a/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx b/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx
index 8bcfc81ea..8f8a3ed0b 100644
--- a/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx
+++ b/packages/plugin-heading-analyzer/src/HeadingAnalyzer.tsx
@@ -105,6 +105,8 @@ export const HeadingAnalyzer = () => {
 
     if (!frame) return;
 
+    if (appState.ui.isDragging) return;
+
     // We need to delay to allow remainder of page to render first
     if (firstRender) {
       setTimeout(() => {
@@ -114,7 +116,7 @@ export const HeadingAnalyzer = () => {
     } else {
       setHierarchy(buildHierarchy(frame));
     }
-  }, [appState.data]);
+  }, [appState.data, appState.ui.isDragging]);
 
   return (
     <div className={getClassName()}>
diff --git a/yarn.lock b/yarn.lock
index 151786bbe..2fba337d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -632,6 +632,69 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
+"@dnd-kit/abstract@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/abstract/-/abstract-0.0.5.tgz#f227b2f807a77cb373f27c6c4519b4edd8c941b7"
+  integrity sha512-1ANNxFkYqXgfUHrCZsjwrDbiCYJkneW738KnB7AIakq/Bg5f4C3M63UUzTmkX7Vbbngl9Cvnmw7/N8Nwp0dUlQ==
+  dependencies:
+    "@dnd-kit/geometry" "^0.0.5"
+    "@dnd-kit/state" "^0.0.5"
+    tslib "^2.6.2"
+
+"@dnd-kit/collision@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/collision/-/collision-0.0.5.tgz#9b8e83541360c82a6ef7a10ed3f46c199e6d4c8d"
+  integrity sha512-rh9JwZiGnaq5hCR1Z1X4eWsA/wQiSDaYJnwnzvkidlwQBLJMwIKK1cs3FGjYSWTCDrtQvt1mzb1fow4w/MM4EA==
+  dependencies:
+    "@dnd-kit/abstract" "^0.0.5"
+    "@dnd-kit/geometry" "^0.0.5"
+    tslib "^2.6.2"
+
+"@dnd-kit/dom@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/dom/-/dom-0.0.5.tgz#b156869340171d52b6ce0d69ea40a19972acb92c"
+  integrity sha512-0QyyOrxokMtuMPJh/qmTyINrEU0TmYbOLprw55wD6t1ftfZZQCpQE42etM25UlfrIGpy9zT4qcNh/yGPP+ebmA==
+  dependencies:
+    "@dnd-kit/abstract" "^0.0.5"
+    "@dnd-kit/collision" "^0.0.5"
+    "@dnd-kit/geometry" "^0.0.5"
+    "@dnd-kit/state" "^0.0.5"
+    tslib "^2.6.2"
+
+"@dnd-kit/geometry@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/geometry/-/geometry-0.0.5.tgz#46844b7510651733e2a7af3125714a04b77b8f2a"
+  integrity sha512-aBKYXSTIDW55iMd9jDrLSaikoebGZyn80sGalPxwjGgFr2FyiNCBkSy7lePZ/lrRfNTy1vMEqixFkt0EH6593g==
+  dependencies:
+    "@dnd-kit/state" "^0.0.5"
+    tslib "^2.6.2"
+
+"@dnd-kit/helpers@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/helpers/-/helpers-0.0.5.tgz#f4e0f7d7b7997308bb852e398f6a276cd41c71d5"
+  integrity sha512-6mffj480PRXL760aGCJ3moywlxqxLR5v3bWB68d9nHCfu4EmVpcwXiC+kUdiBLmleaXsxbkaeJVZbrWymaCntQ==
+  dependencies:
+    "@dnd-kit/abstract" "^0.0.5"
+    tslib "^2.6.2"
+
+"@dnd-kit/react@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/react/-/react-0.0.5.tgz#5ca0084fa84cab6884d68894ac46463496844ab3"
+  integrity sha512-hpTmh3gEoMyhiXoUH+mqHPMETflfL5uwhD2V+rOYMpoRdCQLYovy5r251TY+avieb8d8J7YuIB1k8Hxoy9UJXA==
+  dependencies:
+    "@dnd-kit/abstract" "^0.0.5"
+    "@dnd-kit/dom" "^0.0.5"
+    "@dnd-kit/state" "^0.0.5"
+    tslib "^2.6.2"
+
+"@dnd-kit/state@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@dnd-kit/state/-/state-0.0.5.tgz#e187fefc31f9dc048c19842631a1ba1d4b86ce9a"
+  integrity sha512-w+GE/FUhIAoJUuPBR8yWvpdT+85R0xJyWE6ImaNTGQlplCeraxkiLAvYFI46uD8ZcE9nRXl3zIyk7gFlC0tzrQ==
+  dependencies:
+    "@preact/signals-core" "^1.6.0"
+    tslib "^2.6.2"
+
 "@emotion/hash@^0.9.0":
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
@@ -1898,6 +1961,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@preact/signals-core@^1.6.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@preact/signals-core/-/signals-core-1.6.1.tgz#d9ce4e6806be22325e569dd9fee06b6b41eb3bee"
+  integrity sha512-KXEEmJoKDlo0Igju/cj9YvKIgyaWFDgnprShQjzimUd5VynAAdTWMshawEOjUVeKbsI0aR58V6WOQp+DNcKApw==
+
 "@remix-run/css-bundle@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@remix-run/css-bundle/-/css-bundle-2.3.0.tgz#12ff86a6e4e5ae83d21752b996449f3121bcf4a9"
@@ -12121,16 +12189,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12212,14 +12271,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12713,6 +12765,11 @@ tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
 tsup@^6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/tsup/-/tsup-6.7.0.tgz#416f350f32a07b6ae86792ad7e52b0cafc566d64"
@@ -13587,7 +13644,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13605,15 +13662,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"