diff --git a/src/web/App.mjs b/src/web/App.mjs
index 85b4f897..a8fa2b3e 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -66,8 +66,8 @@ class App {
         document.dispatchEvent(this.manager.appstart);
 
         this.loadLocalStorage();
-        this.buildUI();
         this.buildCategoryList();
+        this.buildUI();
         this.manager.setup();
         this.manager.output.saveBombe();
         this.uriParams = this.getURIParams();
@@ -427,23 +427,30 @@ class App {
      * @param {string[]} favourites
      */
     updateFavourites(favourites)  {
+        // @todo: probably need this elsewhere
+        // // Destroy the current list items we no longer need in the edit Favourites modal
+        // const operations = document.querySelectorAll("#editable-favourites ....");
+        // listItems.forEach((li => {
+        //     li.remove();
+        // }))
+
         this.saveFavourites(favourites);
         this.loadFavourites();
 
         /* Rebuild only the favourites category */
-
         // double-check if the first category is indeed "catFavourites",
         if (document.querySelector("c-category-list > ul > c-category-li > li > a[data-target='#catFavourites']")) {
             // then destroy
             document.querySelectorAll("c-category-list > ul > c-category-li")[0].remove();
 
             // and rebuild it
-            const favCatConfig = this.categories.find( catConfig => catConfig.name === "Favourites");
+            const favCatConfig = this.categories.find(catConfig => catConfig.name === "Favourites");
             const favouriteCategory = new CCategoryLi(
                 this,
                 favCatConfig,
                 this.operations,
-                false
+                false,
+                true
             );
 
             // finally prepend it to c-category-list
@@ -777,7 +784,7 @@ class App {
      * Fires whenever the input or recipe changes in any way.
      *
      * @listens Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     stateChange(e) {
         debounce(function() {
@@ -890,17 +897,18 @@ class App {
     }
 
     /**
-     * @fires Manager#oplistcreate in nested c-category-li build() function
+     * @fires Manager#oplistcreate from nested c-category-li > c-operation-list build() function
      */
     buildCategoryList() {
         const categoryList = new CCategoryList(
             this,
             this.categories,
-            this.operations
+            this.operations,
+            true
         );
         categoryList.build();
 
-        document.querySelector("#categories").appendChild( categoryList );
+        document.querySelector("#categories").appendChild(categoryList);
     }
 }
 
diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index 7eddb32c..2678de9b 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -319,7 +319,7 @@ class HTMLIngredient {
      * Handler for populate option changes.
      * Populates the relevant argument with the specified value.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     populateOptionChange(e) {
         e.preventDefault();
@@ -343,7 +343,7 @@ class HTMLIngredient {
      * Handler for populate multi option changes.
      * Populates the relevant arguments with the specified values.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     populateMultiOptionChange(e) {
         e.preventDefault();
@@ -374,7 +374,7 @@ class HTMLIngredient {
      * Handler for editable option clicks.
      * Populates the input box with the selected value.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     editableOptionClick(e) {
         e.preventDefault();
@@ -395,7 +395,7 @@ class HTMLIngredient {
      * Handler for argument selector changes.
      * Shows or hides the relevant arguments for this operation.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     argSelectorChange(e) {
         e.preventDefault();
diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index 758a8ae2..431b9210 100755
--- a/src/web/Manager.mjs
+++ b/src/web/Manager.mjs
@@ -151,12 +151,11 @@ class Manager {
         this.addMultiEventListener("#search", "keyup paste search click", this.ops.searchOperations, this.ops);
         this.addDynamicListener(".op-list li.operation", "dblclick", this.ops.operationDblclick, this.ops);
         document.getElementById("close-ops-dropdown-icon").addEventListener("click", this.ops.closeOpsDropdown.bind(this.ops));
-        document.getElementById("edit-favourites").addEventListener("click", this.ops.editFavouritesClick.bind(this.ops));
+        // document.getElementById("edit-favourites").addEventListener("click", this.ops.editFavouritesClick.bind(this.ops));
         document.getElementById("save-favourites").addEventListener("click", this.ops.saveFavouritesClick.bind(this.ops));
         document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops));
         this.addDynamicListener(".op-list", "oplistcreate", this.ops.opListCreate, this.ops);
         this.addDynamicListener("li.operation", "operationadd", this.recipe.opAdd, this.recipe);
-        // this.addDynamicListener(".op-icon.star-icon", "click", this.ops.onIconFavouriteClick, this.ops);
 
         // Recipe
         this.addDynamicListener(".arg:not(select)", "input", this.recipe.ingChange, this.recipe);
diff --git a/src/web/components/c-category-li.mjs b/src/web/components/c-category-li.mjs
index 705da1c4..24186492 100644
--- a/src/web/components/c-category-li.mjs
+++ b/src/web/components/c-category-li.mjs
@@ -1,4 +1,4 @@
-import {COperationLi} from "./c-operation-li.mjs";
+import {COperationList} from "./c-operation-list.mjs";
 
 /**
  * c(ustom element)-category-li ( list item )
@@ -7,38 +7,66 @@ import {COperationLi} from "./c-operation-li.mjs";
  * @param {CatConf} category - The category and operations to be populated.
  * @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
  * @param {Boolean} isExpanded - expand the category on init or not
+ * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to favourite an operation easily
  * */
 export class CCategoryLi extends HTMLElement {
     constructor(
         app,
         category,
         operations,
-        isExpanded
+        isExpanded,
+        includeOpLiStarIcon,
     ) {
         super();
 
         this.app = app;
-        this.category = category;
-        this.operations = operations;
+        this.category = category; // contains a string[] of operation names under .ops
+        this.operations = operations; // opConfig[]
         this.label = category.name;
         this.isExpanded = isExpanded;
+        this.includeOpLiStarIcon = includeOpLiStarIcon;
 
         this.build();
 
         this.addEventListener("click", this.handleClick.bind(this));
     }
 
-    // /**
-    //  * Handle click
-    //  *
-    //  * @param {Event} e
-    //  */
-    // handleClick(e) {
-    //     if (e.target === this.querySelector("button")) {
-    //         // todo back to this "hitbox" issue w the icon inside the button
-    //         this.app.manager.ops.editFavouritesClick(e);
-    //     }
-    // }
+    /**
+     * Handle click
+     *
+     * @param {Event} e
+     */
+    handleClick(e) {
+        // todo some event (target ) bs here
+        if (e.target === this.querySelector("button")) {
+            // todo back to this "hitbox" issue w the icon inside the button
+            console.log(e.target);
+            this.app.manager.ops.editFavouritesClick(e);
+        }
+    }
+
+    /**
+     * Build c-category-li containing a nested c-operation-list ( op-list )
+     */
+    build() {
+        const li = this.buildListItem();
+        const a = this.buildAnchor();
+        const div = this.buildCollapsablePanel();
+
+        li.appendChild(a);
+        li.appendChild(div);
+        this.appendChild(li);
+
+        const opList = new COperationList(
+            this.app,
+            this.category.ops,
+            this.includeOpLiStarIcon,
+        )
+
+        opList.build();
+
+        div.appendChild(opList);
+    }
 
     /**
      * Build the li element
@@ -101,53 +129,6 @@ export class CCategoryLi extends HTMLElement {
         return div;
     };
 
-    /**
-     * Build the op-list for this category
-     *
-     * @param {string[]} opNames
-     */
-    buildOperationList(opNames) {
-        return opNames.map(opName => {
-            if (!(opName in this.operations)) {
-                log.warn(`${opName} could not be found.`);
-                return;
-            }
-
-            return new COperationLi(
-                this.app,
-                opName,
-                {
-                    class: "check-icon",
-                    innerText: "check"
-                },
-                this.operations[opName]
-            );
-        });
-    }
-
-    /**
-     * Build c-category-li and dispatch event oplistcreate
-     */
-    build() {
-        const ul = document.createElement("ul");
-        ul.classList.add("op-list");
-
-        const li = this.buildListItem();
-        const a = this.buildAnchor();
-        const div = this.buildCollapsablePanel();
-
-        li.appendChild(a);
-        li.appendChild(div);
-        div.appendChild(ul);
-        this.appendChild(li);
-
-        this.buildOperationList(this.category.ops).forEach(operationListItem =>
-            ul.appendChild(operationListItem)
-        );
-
-        ul.dispatchEvent(this.app.manager.oplistcreate);
-    }
-
     /**
      * Append a c-operation-li to this op-list
      *
diff --git a/src/web/components/c-category-list.mjs b/src/web/components/c-category-list.mjs
index 2f259c94..bdd9c8f0 100644
--- a/src/web/components/c-category-list.mjs
+++ b/src/web/components/c-category-list.mjs
@@ -5,15 +5,17 @@ import {CCategoryLi} from "./c-category-li.mjs";
  *
  * @param {App} app - The main view object for CyberChef
  * @param {CatConf[]} categories - The list of categories and operations to be populated.
- * @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
+ * @param {Object.<string, OpConf>} operations - A list of operation configuration objects.
+ * @param {boolean} includeOpLiStarIcon - optionally add the 'star' icon to the left of an individual operation
  **/
 export class CCategoryList extends HTMLElement {
-    constructor( app, categories, operations ) {
+    constructor(app, categories, operations, includeOpLiStarIcon) {
         super();
 
         this.app = app;
         this.categories = categories;
         this.operations = operations;
+        this.includeOpLiStarIcon = includeOpLiStarIcon;
     }
 
     /**
@@ -27,9 +29,9 @@ export class CCategoryList extends HTMLElement {
                 this.app,
                 category,
                 this.operations,
-                index === 0
+                index === 0,
+                this.includeOpLiStarIcon
             );
-
             ul.appendChild(cat);
         });
 
diff --git a/src/web/components/c-operation-li.mjs b/src/web/components/c-operation-li.mjs
index 716d5c70..fcc33171 100644
--- a/src/web/components/c-operation-li.mjs
+++ b/src/web/components/c-operation-li.mjs
@@ -6,22 +6,24 @@ import url from "url";
  * @param {App} app - The main view object for CyberChef
  * @param {string} name - The name of the operation
  * @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the right side of the operation
- * @param {Object} config - The configuration object for this operation.
+ * @param {Boolean} includeStarIcon - Include the left side 'star' icon to favourite an operation easily
  */
 export class COperationLi extends HTMLElement {
     constructor(
         app,
         name,
         icon,
-        config
+        includeStarIcon,
     ) {
         super();
 
         this.app = app;
         this.name = name;
-        this.isFavourite = this.app.isLocalStorageAvailable() && localStorage.favourites?.includes(name);
         this.icon = icon;
-        this.config = config;
+        this.includeStarIcon = includeStarIcon;
+
+        this.config = this.app.operations[name];
+        this.isFavourite = this.app.isLocalStorageAvailable() && localStorage.favourites?.includes(name);
 
         this.build();
 
@@ -29,6 +31,8 @@ export class COperationLi extends HTMLElement {
         this.addEventListener('dblclick', this.handleDoubleClick.bind(this));
     }
 
+    // todo: dont think I need config separately, just use this.app.operations[name].xx?
+
     /**
      * @fires OperationsWaiter#operationDblclick on double click
      * @param {Event} e
@@ -50,6 +54,23 @@ export class COperationLi extends HTMLElement {
         }
     }
 
+    /**
+     * Build c-operation-li
+     */
+    build() {
+        const li = this.buildListItem();
+        const icon = this.buildIcon();
+
+        if ( this.includeStarIcon ){
+            const starIcon = this.buildStarIcon();
+            li.appendChild(starIcon);
+        }
+
+        li.appendChild(icon);
+
+        this.appendChild(li);
+    }
+
     /**
      * Given a URL for a Wikipedia (or other wiki) page, this function returns a link to that page.
      *
@@ -128,7 +149,7 @@ export class COperationLi extends HTMLElement {
     }
 
     /**
-     * Build the star icon
+     * Build the ( optional ) star icon
      */
     buildStarIcon() {
         const icon = document.createElement("i");
@@ -147,20 +168,6 @@ export class COperationLi extends HTMLElement {
         return icon;
     }
 
-    /**
-     * Build c-operation-li
-     */
-    build() {
-        const li = this.buildListItem();
-        const icon = this.buildIcon();
-        const starIcon = this.buildStarIcon();
-
-        li.appendChild(icon);
-        li.appendChild(starIcon);
-
-        this.appendChild(li);
-    }
-
     updateFavourite(isFavourite) {
         if (isFavourite) {
             this.querySelector("li").classList.add("favourite");
diff --git a/src/web/components/c-operation-list.mjs b/src/web/components/c-operation-list.mjs
new file mode 100644
index 00000000..e0ad33c9
--- /dev/null
+++ b/src/web/components/c-operation-list.mjs
@@ -0,0 +1,45 @@
+import {COperationLi} from "./c-operation-li.mjs";
+
+/**
+ * c(ustom element)-operation-list
+ *
+ * @param {App} app - The main view object for CyberChef
+ * @param {string[]} opNames - A list of operation names
+ * @param {boolean} includeStarIcon - optionally add the 'star' icon to the left of the operation
+ * @param {Object} icon ( { class: string, innerText: string } ). check-icon by default
+ */
+export class COperationList extends HTMLElement {
+    constructor(app, opNames, includeStarIcon, icon) {
+        super();
+
+        this.app = app;
+        this.opNames = opNames;
+        this.includeStarIcon = includeStarIcon;
+        this.icon = icon;
+    }
+
+    build() {
+        const ul =  document.createElement("ul");
+        ul.classList.add("op-list");
+
+        this.opNames.forEach((opName => {
+            const li = new COperationLi(
+                this.app,
+                opName,
+                {
+                    class: this.icon ? this.icon.class : "check-icon",
+                    innerText: this.icon ? this.icon.innerText : "check"
+                },
+                this.includeStarIcon
+            );
+
+            ul.appendChild(li);
+        }))
+
+        ul.dispatchEvent(this.app.manager.oplistcreate);
+
+        this.append(ul);
+    }
+}
+
+customElements.define("c-operation-list", COperationList);
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 4e7ec022..77647e2d 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -142,14 +142,6 @@
             <div id="preloader-error" class="loading-error"></div>
         </div>
         <!-- End preloader overlay -->
-<!--        <button type="button"-->
-<!--                class="btn btn-warning bmd-btn-icon"-->
-<!--                id="edit-favourites"-->
-<!--                data-toggle="tooltip"-->
-<!--                title="Edit favourites">-->
-<!--            <i class="material-icons">star</i>-->
-<!--        </button>-->
-
         <div id="content-wrapper">
             <div id="banner">
                 <div>
@@ -591,7 +583,7 @@
                             <li><span style="font-weight: bold">To remove:</span> hit the delete button or drag out of the list below</li>
                         </ul>
                         <br>
-                        <ul id="edit-favourites-list" class="op-list"></ul>
+                        <div id="editable-favourites"></div>
                         <div class="option-item">
                         </div>
                     </div>
diff --git a/src/web/stylesheets/components/_modals.css b/src/web/stylesheets/components/_modals.css
index affc372d..d11ae4aa 100755
--- a/src/web/stylesheets/components/_modals.css
+++ b/src/web/stylesheets/components/_modals.css
@@ -14,17 +14,17 @@
     margin-bottom: 20px;
 }
 
-#edit-favourites-list {
+#editable-favourites {
     margin: 10px;
     border: 1px solid var(--op-list-operation-border-colour);
 }
 
-#edit-favourites-list .operation {
+#editable-favourites c-operation-li > li {
     border-left: none;
     border-right: none;
 }
 
-#edit-favourites-list .operation:last-child {
+#editable-favourites c-operation-list > li:last-child {
     border-bottom: none;
 }
 
diff --git a/src/web/waiters/BindingsWaiter.mjs b/src/web/waiters/BindingsWaiter.mjs
index 3766b8d5..b8951c41 100755
--- a/src/web/waiters/BindingsWaiter.mjs
+++ b/src/web/waiters/BindingsWaiter.mjs
@@ -26,7 +26,7 @@ class BindingsWaiter {
      * Checks whether valid keyboard shortcut has been instated
      *
      * @fires Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     parseInput(e) {
         const modKey = this.app.options.useMetaKey ? e.metaKey : e.altKey;
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index ea1ec42b..f20b67d5 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/src/web/waiters/ControlsWaiter.mjs
@@ -347,7 +347,7 @@ class ControlsWaiter {
     /**
      * Populates the bug report information box with useful technical info.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     supportButtonClick(e) {
         e.preventDefault();
diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs
index 25c1629d..fe7f6ec5 100644
--- a/src/web/waiters/InputWaiter.mjs
+++ b/src/web/waiters/InputWaiter.mjs
@@ -654,7 +654,7 @@ class InputWaiter {
 
     /**
      * Handler for file details toggle clicks
-     * @param {event} e
+     * @param {Event} e
      */
     toggleFileDetails(e) {
         $("[data-toggle='tooltip']").tooltip("hide");
@@ -838,7 +838,7 @@ class InputWaiter {
      * Updates the value stored in the inputWorker
      * Debounces the input so we don't call autobake too often.
      *
-     * @param {event} e
+     * @param {Event} e
      *
      * @fires Manager#statechange
      */
@@ -870,7 +870,7 @@ class InputWaiter {
      * Handler for input dragover events.
      * Gives the user a visual cue to show that items can be dropped here.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     inputDragover(e) {
         // This will be set if we're dragging an operation
@@ -886,7 +886,7 @@ class InputWaiter {
      * Handler for input dragleave events.
      * Removes the visual cue.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     inputDragleave(e) {
         e.stopPropagation();
@@ -903,7 +903,7 @@ class InputWaiter {
      * Handler for input drop events.
      * Loads the dragged data.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     async inputDrop(e) {
         // This will be set if we're dragging an operation
@@ -1013,7 +1013,7 @@ class InputWaiter {
      * Handler for open input button events
      * Loads the opened data into the input textarea
      *
-     * @param {event} e
+     * @param {Event} e
      */
     inputOpen(e) {
         e.preventDefault();
@@ -1178,7 +1178,7 @@ class InputWaiter {
     /**
      * Handler for clicking on a tab
      *
-     * @param {event} mouseEvent
+     * @param {Event} mouseEvent
      */
     changeTabClick(mouseEvent) {
         if (!mouseEvent.target) return;
@@ -1361,7 +1361,7 @@ class InputWaiter {
     /**
      * Handler for clicking on a remove tab button
      *
-     * @param {event} mouseEvent
+     * @param {Event} mouseEvent
      */
     removeTabClick(mouseEvent) {
         if (!mouseEvent.target) {
@@ -1376,7 +1376,7 @@ class InputWaiter {
     /**
      * Handler for scrolling on the input tabs area
      *
-     * @param {event} wheelEvent
+     * @param {Event} wheelEvent
      */
     scrollTab(wheelEvent) {
         wheelEvent.preventDefault();
@@ -1509,7 +1509,7 @@ class InputWaiter {
     /**
      * Handle when an option in the filter drop down box is clicked
      *
-     * @param {event} mouseEvent
+     * @param {Event} mouseEvent
      */
     filterOptionClick(mouseEvent) {
         document.getElementById("input-filter-button").innerText = mouseEvent.target.innerText;
@@ -1542,7 +1542,7 @@ class InputWaiter {
     /**
      * Handler for clicking on a filter result
      *
-     * @param {event} e
+     * @param {Event} e
      */
     filterItemClick(e) {
         if (!e.target) return;
diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs
index 7e541673..9de305a2 100755
--- a/src/web/waiters/OperationsWaiter.mjs
+++ b/src/web/waiters/OperationsWaiter.mjs
@@ -7,6 +7,9 @@
 import HTMLOperation from "../HTMLOperation.mjs";
 import Sortable from "sortablejs";
 import {fuzzyMatch, calcMatchRanges} from "../../core/lib/FuzzyMatch.mjs";
+import {COperationLi} from "../components/c-operation-li.mjs";
+import {CCategoryList} from "../components/c-category-list.mjs";
+import {COperationList} from "../components/c-operation-list.mjs";
 
 /**
  * Waiter to handle events related to the operations.
@@ -32,7 +35,7 @@ class OperationsWaiter {
      * Handler for search events.
      * Finds operations which match the given search term and displays them under the search box.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     searchOperations(e) {
         let ops, selected;
@@ -180,7 +183,7 @@ class OperationsWaiter {
      * Handler for oplistcreate events.
      *
      * @listens Manager#oplistcreate
-     * @param {event} e
+     * @param {Event} e
      */
     opListCreate(e) {
         if (this.app.isMobileView()) {
@@ -228,7 +231,7 @@ class OperationsWaiter {
      * Handler for operation doubleclick events.
      * Adds the operation to the recipe and auto bakes.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     operationDblclick(e) {
         const li = e.target;
@@ -240,56 +243,59 @@ class OperationsWaiter {
      * Handler for edit favourites click events.
      * Sets up the 'Edit favourites' pane and displays it.
      *
-     * @param {event} e
+     // * @param {Event} e
      */
-    editFavouritesClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
+    editFavouritesClick() {
+        // Get list of Favourite operation names
+        const favCatConfig = this.app.categories.find(catConfig => catConfig.name === "Favourites");
+        const div = document.getElementById("editable-favourites");
 
-        // Add favourites to modal
-        const favCat = this.app.categories.filter(function(c) {
-            return c.name === "Favourites";
-        })[0];
+        if(favCatConfig !== undefined) {
+            const opList = new COperationList(
+                this.app,
+                favCatConfig.ops,
+                false,
+                {
+                    class: "remove-icon",
+                    innerText: "delete"
+                }
+            )
 
-        let html = "";
-        for (let i = 0; i < favCat.ops.length; i++) {
-            const opName = favCat.ops[i];
-            const operation = new HTMLOperation(opName, this.app.operations[opName], this.app, this.manager);
-            html += operation.toStubHtml(true);
+            opList.build();
+
+            div.appendChild(opList);
         }
 
-        const editFavouritesList = document.getElementById("edit-favourites-list");
-        editFavouritesList.innerHTML = html;
-        this.removeIntent = false;
+        // this.removeIntent = false;
+        //
+        // const editableList = Sortable.create(ul, {
+        //     filter: ".remove-icon",
+        //     onFilter: function (evt) {
+        //         const el = editableList.closest(evt.item);
+        //         if (el && el.parentNode) {
+        //             $(el).popover("dispose");
+        //             el.parentNode.removeChild(el);
+        //         }
+        //     },
+        //     onEnd: function(evt) {
+        //         if (this.removeIntent) {
+        //             $(evt.item).popover("dispose");
+        //             evt.item.remove();
+        //         }
+        //     }.bind(this),
+        // });
+        //
+        // Sortable.utils.on(ul, "dragleave", function() {
+        //     this.removeIntent = true;
+        // }.bind(this));
+        //
+        // Sortable.utils.on(ul, "dragover", function() {
+        //     this.removeIntent = false;
+        // }.bind(this));
 
-        const editableList = Sortable.create(editFavouritesList, {
-            filter: ".remove-icon",
-            onFilter: function (evt) {
-                const el = editableList.closest(evt.item);
-                if (el && el.parentNode) {
-                    $(el).popover("dispose");
-                    el.parentNode.removeChild(el);
-                }
-            },
-            onEnd: function(evt) {
-                if (this.removeIntent) {
-                    $(evt.item).popover("dispose");
-                    evt.item.remove();
-                }
-            }.bind(this),
-        });
-
-        Sortable.utils.on(editFavouritesList, "dragleave", function() {
-            this.removeIntent = true;
-        }.bind(this));
-
-        Sortable.utils.on(editFavouritesList, "dragover", function() {
-            this.removeIntent = false;
-        }.bind(this));
-
-        if (!this.app.isMobileView()) {
-            $("#edit-favourites-list [data-toggle=popover]").popover();
-        }
+        // if (!this.app.isMobileView()) {
+        //     $("#editable-favourites [data-toggle=popover]").popover();
+        // }
         $("#favourites-modal").modal();
     }
 
@@ -329,10 +335,10 @@ class OperationsWaiter {
      * Saves the selected favourites and reloads them.
      */
     saveFavouritesClick() {
-        const favs = document.querySelectorAll("#edit-favourites-list li");
-        const favouritesList = Array.from(favs, e => e.childNodes[0].textContent);
+        const listItems = document.querySelectorAll("#editable-favourites c-operation-li > li");
+        const favourites = Array.from(listItems, li => li.getAttribute("data-name"));
 
-        this.app.updateFavourites(favouritesList);
+        this.app.updateFavourites(favourites);
     }
 
 
diff --git a/src/web/waiters/OptionsWaiter.mjs b/src/web/waiters/OptionsWaiter.mjs
index b09ddd87..949fd6e6 100755
--- a/src/web/waiters/OptionsWaiter.mjs
+++ b/src/web/waiters/OptionsWaiter.mjs
@@ -57,7 +57,7 @@ class OptionsWaiter {
      * Handler for options click events.
      * Displays the options pane.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     optionsClick(e) {
         e.preventDefault();
@@ -77,7 +77,7 @@ class OptionsWaiter {
     /**
      * Handler for switch change events.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     switchChange(e) {
         const el = e.target;
@@ -91,7 +91,7 @@ class OptionsWaiter {
     /**
      * Handler for number change events.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     numberChange(e) {
         const el = e.target;
@@ -105,7 +105,7 @@ class OptionsWaiter {
     /**
      * Handler for select change events.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     selectChange(e) {
         const el = e.target;
diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs
index b09ee3cd..78681349 100755
--- a/src/web/waiters/OutputWaiter.mjs
+++ b/src/web/waiters/OutputWaiter.mjs
@@ -982,7 +982,7 @@ class OutputWaiter {
     /**
      * Handler for changing tabs event
      *
-     * @param {event} mouseEvent
+     * @param {Event} mouseEvent
      */
     changeTabClick(mouseEvent) {
         if (!mouseEvent.target) return;
@@ -996,7 +996,7 @@ class OutputWaiter {
     /**
      * Handler for scrolling on the output tabs area
      *
-     * @param {event} wheelEvent
+     * @param {Event} wheelEvent
      */
     scrollTab(wheelEvent) {
         wheelEvent.preventDefault();
@@ -1510,7 +1510,7 @@ class OutputWaiter {
      * Handler for clicking on a filter result.
      * Changes to the clicked output
      *
-     * @param {event} e
+     * @param {Event} e
      */
     filterItemClick(e) {
         if (!e.target) return;
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 9c4c2a90..a6034ab4 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -125,7 +125,7 @@ class RecipeWaiter {
      * at the appropriate place and initialises it.
      *
      * @fires Manager#operationadd
-     * @param {event} evt
+     * @param {Event} evt
      */
     opSortEnd(evt) {
         if (this.removeIntent && evt.item.parentNode.id === "rec-list") {
@@ -158,7 +158,7 @@ class RecipeWaiter {
      * If the element being dragged is an operation, displays a visual cue so that the user knows it can
      * be dropped here.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     favDragover(e) {
         if (e.dataTransfer.effectAllowed !== "move")
@@ -183,7 +183,7 @@ class RecipeWaiter {
      * Handler for favourite dragleave events.
      * Removes the visual cue.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     favDragleave(e) {
         e.stopPropagation();
@@ -196,7 +196,7 @@ class RecipeWaiter {
      * Handler for favourite drop events.
      * Adds the dragged operation to the favourites list.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     favDrop(e) {
         e.stopPropagation();
@@ -224,7 +224,7 @@ class RecipeWaiter {
      * Updates the icon status.
      *
      * @fires Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     disableClick(e) {
         const icon = e.target;
@@ -249,7 +249,7 @@ class RecipeWaiter {
      * Updates the icon status.
      *
      * @fires Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     breakpointClick(e) {
         const bp = e.target;
@@ -271,7 +271,7 @@ class RecipeWaiter {
      * Removes the operation from the recipe and auto bakes.
      *
      * @fires Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     operationDblclick(e) {
         e.target.remove();
@@ -284,7 +284,7 @@ class RecipeWaiter {
      * Removes the operation from the recipe.
      *
      * @fires Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     operationChildDblclick(e) {
         e.target.parentNode.remove();
@@ -409,7 +409,6 @@ class RecipeWaiter {
         item.dispatchEvent(this.manager.operationadd);
 
         this.manager.ops.updateListItemsClasses("#rec-list", "selected");
-        console.log("operation add");
 
         return item;
     }
@@ -433,7 +432,7 @@ class RecipeWaiter {
      * Handler for operation dropdown events from toggleString arguments.
      * Sets the selected option as the name of the button.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     dropdownToggleClick(e) {
         e.stopPropagation();
@@ -470,7 +469,7 @@ class RecipeWaiter {
      *
      * @listens Manager#operationadd
      * @fires Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     opAdd(e) {
         log.debug(`'${e.target.getAttribute("data-name")}' added to recipe`);
@@ -486,13 +485,12 @@ class RecipeWaiter {
      *
      * @listens Manager#operationremove
      * @fires Manager#statechange
-     * @param {event} e
+     * @param {Event} e
      */
     opRemove(e) {
         log.debug("Operation removed from recipe");
         window.dispatchEvent(this.manager.statechange);
         this.manager.ops.updateListItemsClasses("#rec-list", "selected");
-        console.log("operation remove");
     }
 
 
@@ -500,7 +498,7 @@ class RecipeWaiter {
      * Handler for text argument dragover events.
      * Gives the user a visual cue to show that items can be dropped here.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     textArgDragover (e) {
         // This will be set if we're dragging an operation
@@ -517,7 +515,7 @@ class RecipeWaiter {
      * Handler for text argument dragleave events.
      * Removes the visual cue.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     textArgDragLeave (e) {
         e.stopPropagation();
@@ -530,7 +528,7 @@ class RecipeWaiter {
      * Handler for text argument drop events.
      * Loads the dragged data into the argument textarea.
      *
-     * @param {event} e
+     * @param {Event} e
      */
     textArgDrop(e) {
         // This will be set if we're dragging an operation