diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index b9b5434d..ffbe8475 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -7,6 +7,7 @@
  */
 
 .operation {
+    cursor: grab;
     padding: 10px;
     list-style-type: none;
     position: relative;
@@ -18,10 +19,6 @@
 }
 
 @media only screen and (min-width: 768px){
-    .operation {
-        cursor: grab;
-    }
-
     /* never display check icons on desktop views */
     .op-icon.check-icon {
         display: none;
diff --git a/src/web/stylesheets/components/_recipe.css b/src/web/stylesheets/components/_recipe.css
index a8d1d910..4fbf5414 100644
--- a/src/web/stylesheets/components/_recipe.css
+++ b/src/web/stylesheets/components/_recipe.css
@@ -21,3 +21,7 @@
     border-color: var(--rec-list-operation-border-colour);
     padding: 14px;
 }
+
+#rec-list li.sortable-chosen{
+    filter: brightness(0.8);
+}
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 1bf7dd95..e65935d0 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -33,13 +33,15 @@ class RecipeWaiter {
      */
     initialiseOperationDragNDrop() {
         const recList = document.getElementById("rec-list");
+        const isMobileView = window.innerWidth < this.app.breakpoint;
 
         // Recipe list
         Sortable.create(recList, {
             group: "recipe",
             sort: true,
-            animation: 0,
-            delay: 0,
+            swapThreshold: isMobileView ? 0.60 : 0.3,
+            animation: isMobileView ? 400 : 200,
+            delay: isMobileView ? 200 : 0,
             filter: ".arg",
             preventOnFilter: false,
             setData: function(dataTransfer, dragEl) {