diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/Item.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/Item.tsx
index 64371651fb..2d75ef2eab 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/Item.tsx	
+++ b/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/Item.tsx	
@@ -83,6 +83,24 @@ export const Item = ({
         <div
           {...context.itemContainerWithoutChildrenProps}
           {...context.interactiveElementProps}
+          onDragStart={(e) => {
+            context.interactiveElementProps.onDragStart &&
+              context.interactiveElementProps.onDragStart(e);
+
+            // Customize dragging image for form elements
+            if (isFormElement) {
+              // Get the box inside the element being dragged
+              const el = e.currentTarget.children[0];
+
+              // Get the position of the cursor inside the box for the offset
+              const rect = el.getBoundingClientRect();
+              const x = e.clientX - rect.left;
+              const y = e.clientY - rect.top;
+
+              // Use the inner box for the drag image
+              e.dataTransfer.setDragImage(el, x, y);
+            }
+          }}
           className={cn(
             "text-left group relative w-full overflow-hidden truncate cursor-pointer h-[60px]",
             isSection && isSectionClasses,
diff --git a/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/TreeView.tsx b/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/TreeView.tsx
index a912b0b956..630188716f 100644
--- a/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/TreeView.tsx	
+++ b/app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/treeview/TreeView.tsx	
@@ -177,15 +177,12 @@ const ControlledTree: ForwardRefRenderFunction<unknown, TreeDataProviderProps> =
         renderItemTitle={({ title }) => <Item.Title title={title} />}
         renderItemArrow={({ item, context }) => <Item.Arrow item={item} context={context} />}
         renderLiveDescriptorContainer={() => null}
-        renderDragBetweenLine={({ draggingPosition, lineProps }) => {
+        renderDragBetweenLine={({ lineProps }) => {
           return (
-            <div
-              {...lineProps}
-              className={cn(
-                "w-full border-b-2 border-blue-focus",
-                draggingPosition.depth > 0 && "ml-10"
-              )}
-            />
+            <div {...lineProps}>
+              <div className="absolute left-0 -ml-2 -mt-2 size-0 border-y-8 border-l-8 border-y-transparent border-l-blue-focus" />
+              <div className={cn("w-full border-b-1 border-blue-focus")} />
+            </div>
           );
         }}
         renderItemsContainer={({ children, containerProps }) => {