diff --git a/src/gui/html/elements/loot-plugin-item.html b/src/gui/html/elements/loot-plugin-item.html
index d6184107..4f31eef7 100644
--- a/src/gui/html/elements/loot-plugin-item.html
+++ b/src/gui/html/elements/loot-plugin-item.html
@@ -187,11 +187,12 @@
         evt.dataTransfer.setDragImage(evt.currentTarget, 325, 175);
       },
 
-      updateStyling(pluginData) {
+      updateContent(pluginData) {
         this.priority = pluginData.priority;
         this.globalPriority = pluginData.globalPriority;
         this.isEditorOpen = pluginData.isEditorOpen;
         this.hasUserEdits = pluginData.hasUserEdits;
+        this.loadOrderIndex = pluginData.loadOrderIndex;
       },
     });
   </script>
diff --git a/src/gui/html/js/events.js b/src/gui/html/js/events.js
index d9a04d83..0bf5f3b1 100644
--- a/src/gui/html/js/events.js
+++ b/src/gui/html/js/events.js
@@ -169,8 +169,8 @@ function onApplySort() {
   }).catch(loot.handlePromiseError);
 }
 function onCancelSort() {
-  return loot.query('cancelSort').then(JSON.parse).then((globalMessages) => {
-    loot.game.cancelSort(globalMessages);
+  return loot.query('cancelSort').then(JSON.parse).then((response) => {
+    loot.game.cancelSort(response.plugins, response.globalMessages);
     /* Sort UI elements again according to stored old load order. */
     loot.filters.apply(loot.game.plugins);
 
diff --git a/src/gui/html/js/game.js b/src/gui/html/js/game.js
index f5c4c319..379146f0 100644
--- a/src/gui/html/js/game.js
+++ b/src/gui/html/js/game.js
@@ -308,10 +308,17 @@
     this.oldLoadOrder = undefined;
   }
 
-  cancelSort(globalMessages) {
+  cancelSort(plugins, globalMessages) {
     this.plugins = this.oldLoadOrder;
     this.oldLoadOrder = undefined;
 
+    plugins.forEach((plugin) => {
+      const existingPlugin = this.plugins.find(item => item.name === plugin.name);
+      if (existingPlugin) {
+        existingPlugin.update(plugin);
+      }
+    });
+
     /* Update general messages */
     this.globalMessages = globalMessages;
   }
diff --git a/src/gui/html/js/plugin.js b/src/gui/html/js/plugin.js
index b3315b85..39c622d2 100644
--- a/src/gui/html/js/plugin.js
+++ b/src/gui/html/js/plugin.js
@@ -178,7 +178,7 @@
       this._messages = obj.messages || [];
       this._tags = obj.tags || [];
       this._isDirty = obj.isDirty || false;
-      this.loadOrderIndex = obj.loadOrderIndex;
+      this._loadOrderIndex = obj.loadOrderIndex;
       this.cleanedWith = obj.cleanedWith || '';
 
       /* UI state variables */
@@ -265,6 +265,7 @@
           globalPriority: this.globalPriority,
           isEditorOpen: this.isEditorOpen,
           hasUserEdits: this.hasUserEdits,
+          loadOrderIndex: this.loadOrderIndex,
         },
       }));
     }
@@ -443,6 +444,18 @@
       }
     }
 
+    get loadOrderIndex() {
+      return this._loadOrderIndex;
+    }
+
+    set loadOrderIndex(loadOrderIndex) {
+      if (this._loadOrderIndex !== loadOrderIndex) {
+        this._loadOrderIndex = loadOrderIndex;
+
+        this._dispatchItemContentChangeEvent();
+      }
+    }
+
     getCardContent(filters) {
       return new PluginCardContent(this, filters);
     }
@@ -487,7 +500,7 @@
     static onItemContentChange(evt) {
       const item = document.getElementById('cardsNav').querySelector(`[data-id="${evt.detail.pluginId}"]`);
       if (item) {
-        item.updateStyling(evt.detail);
+        item.updateContent(evt.detail);
       }
     }
   };
diff --git a/src/gui/query/cancel_sort_query.h b/src/gui/query/cancel_sort_query.h
index 307861f4..afe8e2cb 100644
--- a/src/gui/query/cancel_sort_query.h
+++ b/src/gui/query/cancel_sort_query.h
@@ -40,7 +40,20 @@ public:
     state_.decrementUnappliedChangeCounter();
     state_.getCurrentGame().DecrementLoadOrderSortCount();
 
-    return JSON::stringify(YAML::Node(getGeneralMessages()));
+    YAML::Node response;
+    std::vector<std::string> loadOrder = state_.getCurrentGame().GetLoadOrder();
+    for (const auto& plugin : loadOrder) {
+      YAML::Node pluginNode;
+
+      pluginNode["name"] = plugin;
+      pluginNode["loadOrderIndex"] = state_.getCurrentGame().GetActiveLoadOrderIndex(plugin, loadOrder);
+
+      response["plugins"].push_back(pluginNode);
+    }
+
+    response["generalMessages"] = getGeneralMessages();
+
+    return JSON::stringify(response);
   }
 
 private:
diff --git a/src/tests/gui/html/js/test_game.js b/src/tests/gui/html/js/test_game.js
index 64e46c21..7a254f63 100644
--- a/src/tests/gui/html/js/test_game.js
+++ b/src/tests/gui/html/js/test_game.js
@@ -554,27 +554,67 @@ describe('Game', () => {
       game = new loot.Game({}, l10n);
     });
 
+    it('should throw if no parameters are supplied', () => {
+      (() => { game.cancelSort(); }).should.throw();
+    });
+
     it('should set the current load order to the old load order', () => {
-      game.oldLoadOrder = [0, 1, 2];
-      game.plugins = [3, 4, 5];
+      const oldLoadOrder = [new loot.Plugin({
+        name: 'foo',
+      }), new loot.Plugin({
+        name: 'bar',
+      })];
+      game.oldLoadOrder = oldLoadOrder;
+      game.plugins = [new loot.Plugin({
+        name: 'bar',
+      }), new loot.Plugin({
+        name: 'foo',
+      })];
 
-      game.cancelSort();
+      game.cancelSort([]);
 
-      game.plugins.should.deepEqual([0, 1, 2]);
+      game.plugins.should.deepEqual(oldLoadOrder);
     });
 
     it('should delete the stored old load order', () => {
-      game.oldLoadOrder = [0, 1, 2];
+      game.oldLoadOrder = [new loot.Plugin({
+        name: 'foo',
+      }), new loot.Plugin({
+        name: 'bar',
+      })];
 
-      game.cancelSort();
+      game.cancelSort([]);
 
       should(game.oldLoadOrder).be.undefined();
     });
 
-    it('should set the global messages to the passed object', () => {
+    it('should set plugin load order indices using the array passed as the first parameter', () => {
+      game.oldLoadOrder = [new loot.Plugin({
+        name: 'foo',
+        loadOrderIndex: 1,
+      }), new loot.Plugin({
+        name: 'bar',
+        loadOrderIndex: 0,
+      })];
+
+      game.cancelSort([new loot.Plugin({
+        name: 'bar',
+        loadOrderIndex: 1,
+      }), new loot.Plugin({
+        name: 'foo',
+        loadOrderIndex: 0,
+      })]);
+
+      game.plugins[0].name.should.equal('foo');
+      game.plugins[0].loadOrderIndex.should.equal(0);
+      game.plugins[1].name.should.equal('bar');
+      game.plugins[1].loadOrderIndex.should.equal(1);
+    });
+
+    it('should set the global messages to the second passed parameter', () => {
       game.oldLoadOrder = [0, 1, 2];
 
-      game.cancelSort(['foo']);
+      game.cancelSort([], ['foo']);
 
       game.globalMessages.should.deepEqual(['foo']);
     });