diff --git a/components/FlowEditor/Flow.tsx b/components/FlowEditor/Flow.tsx
index 4f25817..56d3a0c 100644
--- a/components/FlowEditor/Flow.tsx
+++ b/components/FlowEditor/Flow.tsx
@@ -1,3 +1,4 @@
+import { useDroppable } from "@dnd-kit/core";
 import { useState } from "react";
 import ReactFlow, {
   Background,
@@ -14,10 +15,12 @@ const Flow = () => {
     setReactFlowInstance(rfi);
   };
 
+  const { isOver, setNodeRef } = useDroppable({ id: "flow" });
+
   const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStore();
 
   return (
-    <div className="flow h-screen w-full">
+    <div ref={setNodeRef} className="flow h-screen w-full">
       <ReactFlow
         nodes={nodes}
         edges={edges}