diff --git a/src/components/MealsDishesEditor.tsx b/src/components/MealsDishesEditor.tsx
index 361c716c5da26d7918416d75bf87d1ac5f8d97b0..25fb657da6ce98bcb8eadb36d3559a672f63fadd 100644
--- a/src/components/MealsDishesEditor.tsx
+++ b/src/components/MealsDishesEditor.tsx
@@ -74,14 +74,14 @@ const MealItem = ({ meal }: { meal: Meal }) => {
     const ref = React.useRef<HTMLDivElement | null>(null);
     const [, drop] = useDrop({
         accept: [DragTypes.Meal, DragTypes.Dish],
-        hover(item, monitor) {
+        hover(draggedItem, monitor) {
             if (!ref.current) {
                 return;
             }
             if (!monitor.isOver({ shallow: true })) return;
-            if (!isDragItem(item)) return;
+            if (!isDragItem(draggedItem)) return;
 
-            const sourcePath = item.tmp_source_path;
+            const sourcePath = draggedItem.tmp_source_path;
             const targetPath = thisPath;
             // return if dragMeal and hoverMeal are the same
             if (pathEquals(sourcePath, targetPath)) return;
@@ -93,13 +93,13 @@ const MealItem = ({ meal }: { meal: Meal }) => {
             if (projectPlan === undefined) return;
             const dragMealOrDish = resolvePath(
                 projectPlan,
-                item.tmp_source_path,
+                draggedItem.tmp_source_path,
             );
             const hoverMeal = resolvePath(projectPlan, targetPath);
 
             if (dragMealOrDish === undefined || hoverMeal === undefined) return;
 
-            const direction = (() => {
+            let direction: Direction | undefined = (() => {
                 if (isDish(dragMealOrDish)) {
                     if (dragMealOrDish.meal_id === hoverMeal.id)
                         return undefined;
@@ -156,6 +156,9 @@ const MealItem = ({ meal }: { meal: Meal }) => {
             // When dragging downwards, only move when the cursor is below 50%
             // When dragging upwards, only move when the cursor is above 50%
 
+            direction = hoverClientY < hoverMiddleY ? "over" : "under";
+            console.log(hoverHeight, hoverClientY, hoverMiddleY, direction);
+
             // TODO only return if dropzone and draggedItem are neighbours
             // Dragging downwards
             if (
@@ -175,9 +178,9 @@ const MealItem = ({ meal }: { meal: Meal }) => {
                 return;
             }
             const moved = move(projectPlan, sourcePath, targetPath, direction);
-            item.tmp_source_path = moved.newSourcePath;
-            item.target_path = moved.newTargetPath;
-            item.direction = direction;
+            draggedItem.tmp_source_path = moved.newSourcePath;
+            draggedItem.target_path = moved.newTargetPath;
+            draggedItem.direction = direction;
             queryClient.setQueryData(
                 ["project-plan", project.id],
                 moved.projectPlan,
@@ -524,7 +527,7 @@ const DishItem = ({ dish }: { dish: Dish }) => {
 
             if (dragDish === undefined || hoverDish === undefined) return;
 
-            const direction = (() => {
+            let direction: Direction | undefined = (() => {
                 if (dragDish.id === hoverDish.id) return undefined;
                 if (dragDish.date === hoverDish.date) {
                     if (dragDish.meal_id === hoverDish.meal_id) {
@@ -568,8 +571,9 @@ const DishItem = ({ dish }: { dish: Dish }) => {
             const hoverBoundingRect = ref.current?.getBoundingClientRect();
 
             // Get vertical middle
-            const hoverMiddleY =
-                (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const hoverHeight =
+                hoverBoundingRect.bottom - hoverBoundingRect.top;
+            const hoverMiddleY = hoverHeight / 2;
 
             // Determine mouse position
             const clientOffset = monitor.getClientOffset();
@@ -581,6 +585,9 @@ const DishItem = ({ dish }: { dish: Dish }) => {
             // Only perform the move when the mouse has crossed half of the items height
             // When dragging downwards, only move when the cursor is below 50%
             // When dragging upwards, only move when the cursor is above 50%
+            //
+            direction = hoverClientY < hoverMiddleY ? "over" : "under";
+            console.log(direction, sourcePath, targetPath);
 
             // TODO only return if dropzone and draggedItem are neighbours
             // Dragging downwards