diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index 1805fdf4c5..027644b2ec 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -47,6 +47,21 @@
 
       &.isDraggingOver {
         box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff;
+
+        &:not(.isDraggingOwner) {
+          z-index: 50;
+
+          > div:not(:empty) {
+            border-radius: 6px;
+            box-shadow: 0 0 9px #00000042;
+          }
+
+          &.animateUp {
+            > div {
+              transform: translate(0px, -40px)!important;
+            }
+          }
+        }
       }
 
       &.animating {
diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index 29008f073c..588ade7cd5 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/src/renderer/components/hotbar/hotbar-menu.tsx
@@ -48,6 +48,12 @@ export class HotbarMenu extends React.Component<Props> {
     HotbarStore.getInstance().restackItems(from, to);
   }
 
+  getMoveAwayDirection(entityId: string, cellIndex: number) {
+    const draggableItemIndex = this.hotbar.items.findIndex(item => item?.entity.uid == entityId);
+
+    return draggableItemIndex > cellIndex ? "animateDown" : "animateUp";
+  }
+
   renderGrid() {
     return this.hotbar.items.map((item, index) => {
       const entity = this.getEntity(item);
@@ -59,11 +65,14 @@ export class HotbarMenu extends React.Component<Props> {
               index={index}
               key={entity ? entity.getId() : `cell${index}`}
               innerRef={provided.innerRef}
-              className={cssNames({ isDraggingOver: snapshot.isDraggingOver })}
+              className={cssNames({
+                isDraggingOver: snapshot.isDraggingOver,
+                isDraggingOwner: snapshot.draggingOverWith == entity?.getId(),
+              }, this.getMoveAwayDirection(snapshot.draggingOverWith, index))}
               {...provided.droppableProps}
             >
               {entity && (
-                <Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0}>
+                <Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0} >
                   {(provided, snapshot) => {
                     const style = {
                       zIndex: defaultHotbarCells - index,