diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index 604c23bd..75c0f0a7 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -57,6 +57,17 @@
     color: #47d047;
 }
 
+.operation.selected {
+    background-color: var(--selected-operation-bg-colour);
+}
+
+@media only screen and (min-width: 768px){
+    .operation.selected {
+        background-color: var(--op-list-operation-bg-colour);
+    }
+}
+
+
 .operation.selected > .op-icon.check-icon {
     display: inline-block;
 }
diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css
index 49c374b6..2196108c 100755
--- a/src/web/stylesheets/themes/_classic.css
+++ b/src/web/stylesheets/themes/_classic.css
@@ -55,7 +55,7 @@
     --rec-list-operation-border-colour: #d3e8c0;
 
     --selected-operation-font-color: #c09853;
-    --selected-operation-bg-colour: #fcf8e3;
+    --selected-operation-bg-colour: rgba(217, 237, 247, 0.5);
     --selected-operation-border-colour: #fbeed5;
 
     --breakpoint-font-colour: #b94a48;
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 50043ab2..51fc6fb8 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -613,7 +613,8 @@ class RecipeWaiter {
     addSelectedClass(opDataName) {
         const ops = document.querySelectorAll(`.operation[data-name="${opDataName}"]`);
 
-        // A selected operation can occur twice if it's in favourites and the original category op-list
+        // A selected operation can occur twice if it's in favourites
+        // and the original category op-list
         ops.forEach((op => {
             op.classList.add("selected");
         }))