diff --git a/css/general/layout.css b/css/general/layout.css
index 9e7d5b61d4625c3970cee06aefcefb6bc292e44a..af27e82e2b961ef92f8b673908696c2a77824d57 100644
--- a/css/general/layout.css
+++ b/css/general/layout.css
@@ -42,6 +42,7 @@ div.grid-2columns-auto {
 	grid-template-columns: auto auto;
 	grid-column-gap: 1em;
 }
+
 @media only screen and (min-width: 768px) {
 	div.grid-2columns-auto {
 		grid-template-columns: max-content auto;
@@ -53,6 +54,7 @@ div.grid-3columns-auto {
 	grid-template-columns: auto auto auto;
 	grid-column-gap: 1em;
 }
+
 @media only screen and (min-width: 768px) {
 	div.grid-3columns-auto {
 		grid-template-columns: max-content max-content auto;
@@ -151,6 +153,7 @@ div.cheat-menu {
 	font-style: italic;
 	position: absolute;
 	right: 50px;
+	top: 40px;
 }
 
 input[type="text"].number {
diff --git a/css/gui/slaveList/quickList.css b/css/gui/slaveList/quickList.css
new file mode 100644
index 0000000000000000000000000000000000000000..e307ca9636865107cae5f8a0172136e769a0bf4d
--- /dev/null
+++ b/css/gui/slaveList/quickList.css
@@ -0,0 +1,99 @@
+button.quick-button {
+	width: auto;
+	margin-left: 10px;
+}
+
+.quick-list {
+	text-align: center;
+}
+
+.quick-list button {
+	margin: 10px;
+	border: 2px solid var(--button-border-color);
+	background-color: var(--button-color);
+}
+
+.quick-list button:hover {
+	background-color: var(--button-hover-color);
+}
+
+.quick-list.devotion .mindbroken {
+	background-color: red;
+}
+
+.quick-list.devotion .very-hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .resistant {
+	background-color: mediumorchid;
+}
+
+.quick-list.devotion .ambivalent {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.devotion .accepting {
+	background-color: hotpink;
+}
+
+.quick-list.devotion .devoted {
+	background-color: deeppink;
+}
+
+.quick-list.devotion .worshipful {
+	background-color: magenta;
+}
+
+.quick-list.trust .mindbroken {
+	background-color: red;
+}
+
+.quick-list.trust .extremely-terrified {
+	background-color: darkgoldenrod;
+}
+
+.quick-list.trust .terrified {
+	background-color: goldenrod;
+	color: #111;
+}
+
+.quick-list.trust .frightened {
+	background-color: gold;
+	color: #111;
+}
+
+.quick-list.trust .fearful {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.trust .hate-careful {
+	background-color: orange;
+}
+
+.quick-list.trust .careful {
+	background-color: mediumaquamarine;
+	color: #111;
+}
+
+.quick-list.trust .bold {
+	background-color: orangered;
+}
+
+.quick-list.trust .trusting {
+	background-color: mediumseagreen;
+}
+
+.quick-list.trust .defiant {
+	background-color: darkred;
+}
+
+.quick-list.trust .profoundly-trusting {
+	background-color: seagreen;
+}
diff --git a/css/gui/slaveList/quickListCSS.css b/css/gui/slaveList/quickListCSS.css
deleted file mode 100644
index cd6a54705a68eda1f862f2d3b32a0ea36baa4ef8..0000000000000000000000000000000000000000
--- a/css/gui/slaveList/quickListCSS.css
+++ /dev/null
@@ -1,101 +0,0 @@
-.ql-hidden
-{
-	display:none;
-}
-
-div.quick-list.devotion button.mindbroken
-{
-	background-color:red;
-}
-div.quick-list.devotion button.very-hateful
-{
-	background-color:darkviolet;
-}
-div.quick-list.devotion button.hateful
-{
-	background-color:darkviolet;
-}
-div.quick-list.devotion button.resistant
-{
-	background-color:mediumorchid;
-}
-div.quick-list.devotion button.ambivalent
-{
-	background-color: yellow;
-	color: #444444;
-}
-div.quick-list.devotion button.accepting
-{
-	background-color: hotpink;
-}
-div.quick-list.devotion button.devoted
-{
-	background-color: deeppink;
-}
-div.quick-list.devotion button.worshipful
-{
-	background-color: magenta;
-}
-div.quick-list.trust button.mindbroken
-{
-	background-color:red;
-}
-div.quick-list.trust button.extremely-terrified
-{
-	background-color: darkgoldenrod;
-}
-div.quick-list.trust button.terrified
-{
-	background-color: goldenrod;
-}
-div.quick-list.trust button.frightened
-{
-	background-color: gold;
-	color: coral;
-}
-div.quick-list.trust button.fearful
-{
-	background-color: yellow;
-	color: green;
-}
-div.quick-list.trust button.hate-careful
-{
-	background-color: orange;
-}
-div.quick-list.trust button.careful
-{
-	background-color: mediumaquamarine;
-	color: forestgreen;
-}
-div.quick-list.trust button.bold
-{
-	background-color: orangered;
-}
-div.quick-list.trust button.trusting
-{
-	background-color: mediumseagreen;
-}
-div.quick-list.trust button.defiant
-{
-	background-color: darkred;
-}
-div.quick-list.trust button.profoundly-trusting
-{
-	background-color: seagreen;
-}
-div.quick-list
-{
-	table-layout: fixed;
-	text-align: center;
-	border-collapse: separate;
-	border-spacing: 2px;
-	border-style: hidden;
-	empty-cells: hide;
-	width: 70%;
-}
-div.quick-list button
-{
-	margin-top: 15px;
-	margin-right: 20px;
-	white-space: nowrap;
-}
diff --git a/css/gui/tabs.css b/css/gui/tabs.css
index e4a8c1df42ecef8f4cb5fd863c6861543afc5eaf..b789c13bb7a8439d1fe9b038db09b2dc39251847 100644
--- a/css/gui/tabs.css
+++ b/css/gui/tabs.css
@@ -1,5 +1,6 @@
 div.tab-bar {
 	overflow: hidden;
+	margin-top: 5px;
 }
 
 div.tab-bar button {
@@ -18,6 +19,7 @@ div.tab-bar button.card {
 	border-top-left-radius: 15px;
 	border-top-right-radius: 15px;
 	border: none;
+	margin-bottom: 0;
 }
 
 div.tab-bar button.card.active {
diff --git a/devTools/types/FC/gameState.d.ts b/devTools/types/FC/gameState.d.ts
index 0eeaaed949a2663c1947c0d71f58d33c43171f2a..e95154073445cb5b1b4d382903c9a7101009e22f 100644
--- a/devTools/types/FC/gameState.d.ts
+++ b/devTools/types/FC/gameState.d.ts
@@ -102,7 +102,6 @@ declare namespace FC {
 	 */
 	interface TemporaryVariablesInTheGameState {
 		gameover?: string;
-		sortQuickList?: string;
 		/** @deprecated */
 		returnTo: string;
 
diff --git a/src/facilities/studio/studioCharts.js b/src/facilities/studio/studioCharts.js
index b6ccf29441f6c0c777c52b2ca1ab634c9ab48a4a..f53a013c3d11a8994788f767e306ae3e4d5780d5 100644
--- a/src/facilities/studio/studioCharts.js
+++ b/src/facilities/studio/studioCharts.js
@@ -97,7 +97,7 @@ App.Porn.makeFameProgressChart = function(slave) {
 App.Porn.makeViewershipChart = function(slave) {
 	const container = document.createElement("div");
 
-	const data = {name: "Total viewership", children: []};
+	const data = {name: "Total viewership", children: [], value:0};
 	for (const type of Object.values(App.Porn.GenreType)) {
 		const child = {name: type, children: []};
 		for (const genre of App.Porn.getGenresByType(type)) {
diff --git a/src/gui/options/options.js b/src/gui/options/options.js
index 9e5acf93d9c12c9837dc971ab130284cfb0c985b..690127b3c038e17a45ce4b42f6a1034a58340f66 100644
--- a/src/gui/options/options.js
+++ b/src/gui/options/options.js
@@ -842,8 +842,8 @@ App.Intro.display = function(isIntro) {
 	options.addOption("Main menu slave tabs are", "useSlaveSummaryTabs")
 		.addValue("Enabled", 1).on().addValue("CardStyle", 2).on().addValue("Disabled", 0).off();
 
-	options.addOption("The slave Quick list in-page scroll-to is", "useSlaveListInPageJSNavigation")
-		.addValue("Enabled", 1).on().addValue("Disabled", 0).off();
+	options.addOption("The slave list in-page scroll-to is", "useSlaveListInPageJSNavigation")
+		.addValue("Always", 2).on().addValue("Collapsable", 1).on().addValue("Disabled", 0).off();
 
 	options.addOption("Condense special slaves into their own tab", "useSlaveSummaryOverviewTab")
 		.addValue("Enabled", 1).on().addValue("Disabled", 0).off();
diff --git a/src/interaction/siWardrobe.js b/src/interaction/siWardrobe.js
index e4d54164b52e2a84cccf59e14ab9ca188d1fe4dd..3d6cfbcad230034b65b71782ed282a4fd57b2c9a 100644
--- a/src/interaction/siWardrobe.js
+++ b/src/interaction/siWardrobe.js
@@ -786,7 +786,6 @@ App.UI.SlaveInteract.wardrobe = function(slave, contentRefresh) {
 	 * @returns {string|HTMLElement}
 	 */
 	function itemTooltip(itemName, category) {
-		console.log(itemName, category);
 		if (itemName === "none" || ["armAccessory", "legAccessory"].includes(category)) {
 			return "No effect one way or another.";
 		}
@@ -949,8 +948,6 @@ App.UI.SlaveInteract.wardrobe = function(slave, contentRefresh) {
 				} else {
 					link = document.createElement('span');
 
-					console.log(name, category, itemTooltip(name, category));
-
 					// Set up the link
 					link.appendChild(
 						App.UI.DOM.link(
diff --git a/src/js/economyJS.js b/src/js/economyJS.js
index 95886e2f86c4630d6d6eb4337697f7f260c0d67e..9b1982a60a768b2e01dd7a7ab9ecae79b9571fcd 100644
--- a/src/js/economyJS.js
+++ b/src/js/economyJS.js
@@ -999,7 +999,7 @@ globalThis.calculateCosts = (function() {
 			costs += Math.trunc(rulesCost * 0.50);
 		} else {
 			if (!hasAllLimbs(V.PC)) {
-				costs += Math.trunc(getLimbCount(V.PCd, 0) * 0.25);
+				costs += Math.trunc(getLimbCount(V.PC, 0) * 0.25);
 			}
 			if (hasAnyProstheticLimbs(V.PC)) {
 				costs += Math.trunc(getLimbCount(V.PC, 102) * 0.125);
diff --git a/src/js/quickListJS.js b/src/js/quickListJS.js
index 6f6b45c2bfeb0363c22558577d27b5fd10cb4763..db5cbc3dbe4b98f8c5ec763f8de708db3d3ecf70 100644
--- a/src/js/quickListJS.js
+++ b/src/js/quickListJS.js
@@ -16,37 +16,6 @@ globalThis.sortDomObjects = function(objects, attrName, reverse = 0) {
 	return objects.toArray().sort(sortingByAttr);
 };
 
-globalThis.sortButtonsByDevotion = function() {
-	let $sortedButtons = $('#qlWrapper button').remove();
-	$sortedButtons = sortDomObjects($sortedButtons, 'data-devotion');
-	$($sortedButtons).appendTo($('#qlWrapper'));
-	quickListBuildLinks();
-};
-
-globalThis.sortButtonsByTrust = function() {
-	let $sortedButtons = $('#qlWrapper button').remove();
-	$sortedButtons = sortDomObjects($sortedButtons, 'data-trust');
-	$($sortedButtons).appendTo($('#qlWrapper'));
-	quickListBuildLinks();
-};
-
-globalThis.quickListBuildLinks = function() {
-	$("[data-scroll-to]").click(App.UI.quickBtnScrollToHandler);
-};
-
-App.UI.quickBtnScrollToHandler = function() {
-	let $this = $(this);
-	let $toElement = $this.attr('data-scroll-to');
-	// note the * 1 enforces $offset to be an integer, without
-	// it we scroll to True, which goes nowhere fast.
-	let $offset = parseInt($this.attr('data-scroll-offset') || "0");
-	let $speed = parseInt($this.attr('data-scroll-speed') || "500");
-	// Use javascript scrollTop animation for in page navigation.
-	$('html, body').animate({
-		scrollTop: $($toElement).offset().top + $offset
-	}, $speed);
-};
-
 globalThis.sortNurseryPossiblesByName = function() {
 	let $sortedNurseryPossibles = $('#ql-nursery div.possible').detach();
 	$sortedNurseryPossibles = sortDomObjects($sortedNurseryPossibles, 'data-name');
diff --git a/src/js/slaveListing.js b/src/js/slaveListing.js
index 4c4831e326709c2efd382c1310d5d802305dbefb..1ccae21bcc8a74707c6631036603f8636e1d8c56 100644
--- a/src/js/slaveListing.js
+++ b/src/js/slaveListing.js
@@ -19,102 +19,89 @@ App.UI.SlaveList = {};
  * @returns {HTMLElement|DocumentFragment}
  */
 
-App.UI.SlaveList.render = function() {
+/**
+ * @param {number[]} IDs
+ * @param {Array.<{id: number, rejects: string[]}>} rejectedSlaves
+ * @param {slaveToElement} interactionLink
+ * @param {slaveToElement} [postNote]
+ * @returns {DocumentFragment}
+ */
+App.UI.SlaveList.render = function(IDs, rejectedSlaves, interactionLink, postNote) {
 	const facilityPassages = new Set(
-		["Main", "Head Girl Suite", "Spa", "Brothel", "Club", "Arcade", "Clinic", "Schoolroom", "Dairy", "Farmyard", "Servants' Quarters", "Master Suite", "Cellblock"]);
+		["Main", "Head Girl Suite", "Spa", "Brothel", "Club", "Arcade", "Clinic", "Schoolroom", "Dairy", "Farmyard",
+			"Servants' Quarters", "Master Suite", "Cellblock"]);
 
-	/** @type {string} */
-	let passageName;
+	// required, if multiple list are displayed on the same passage
+	const uuid = generateNewID();
+	const passageName = passage();
 
-	// potentially can be a problem if played long enough to reach Number.MAX_SAFE_INTEGER
-	let listID = Number.MIN_SAFE_INTEGER;
+	const res = document.createDocumentFragment();
 
 	/** @type {App.Art.SlaveArtBatch} */
 	let batchRenderer = null;
+	if (V.seeImages === 1 && V.seeSummaryImages === 1) {
+		batchRenderer = new App.Art.SlaveArtBatch(IDs, 1);
+		res.appendChild(batchRenderer.writePreamble());
+	}
 
-	return listDOM;
+	res.append(createQuickList(IDs, uuid));
 
-	/**
-	 * @param {number[]} IDs
-	 * @param {Array.<{id: number, rejects: string[]}>} rejectedSlaves
-	 * @param {slaveToElement} interactionLink
-	 * @param {slaveToElement} [postNote]
-	 * @returns {DocumentFragment}
-	 */
-	function listDOM(IDs, rejectedSlaves, interactionLink, postNote) {
-		passageName = passage();
-
-		let res = document.createDocumentFragment();
+	const fcs = App.Entity.facilities;
+	const penthouse = fcs.penthouse;
 
-		if ((V.seeImages === 1) && (V.seeSummaryImages === 1)) {
-			batchRenderer = new App.Art.SlaveArtBatch(IDs, 1);
-			res.appendChild(batchRenderer.writePreamble());
-		} else {
-			batchRenderer = null;
-		}
+	let anyFacilityExists = false;
 
-		if (V.useSlaveListInPageJSNavigation === 1) {
-			res.appendChild(createQuickList(IDs));
+	for (const f of Object.values(fcs)) {
+		if (f !== penthouse && f.established) {
+			anyFacilityExists = true;
+			break;
 		}
+	}
 
-		const fcs = App.Entity.facilities;
-		const penthouse = fcs.penthouse;
-
-		let anyFacilityExists = false;
-
-		for (const f of Object.values(fcs)) {
-			if (f !== penthouse && f.established) {
-				anyFacilityExists = true;
-				break;
-			}
+	let showTransfers = false;
+	if (anyFacilityExists) {
+		if (facilityPassages.has(passageName)) {
+			V.returnTo = passageName;
+			showTransfers = true;
 		}
+	}
 
-		let showTransfers = false;
-		if (anyFacilityExists) {
-			if (facilityPassages.has(passageName)) {
-				V.returnTo = passageName;
-				showTransfers = true;
-			}
+	for (const sid of IDs) {
+		let ss = renderSlave(sid, interactionLink, showTransfers, postNote);
+		let slaveDiv = document.createElement("div");
+		slaveDiv.id = `slave-${sid}-${uuid}`;
+		slaveDiv.classList.add("slaveSummary");
+		if (V.slavePanelStyle === 2) {
+			slaveDiv.classList.add("card");
 		}
+		slaveDiv.appendChild(ss);
+		res.appendChild(slaveDiv);
+	}
 
-		for (const sid of IDs) {
-			let ss = renderSlave(sid, interactionLink, showTransfers, postNote);
-			let slaveDiv = document.createElement("div");
-			slaveDiv.id = `slave-${sid}`;
-			slaveDiv.classList.add("slaveSummary");
-			if (V.slavePanelStyle === 2) {
-				slaveDiv.classList.add("card");
+	for (const rs of rejectedSlaves) {
+		const slave = slaveStateById(rs.id);
+		const rejects = rs.rejects;
+		const slaveName = SlaveFullName(slave);
+		let slaveDiv = document.createElement("div");
+		slaveDiv.id = `slave-${slave.ID}`;
+		slaveDiv.style.setProperty("clear", "both");
+		if (rejects.length === 1) {
+			slaveDiv.innerHTML = rejects[0];
+		} else {
+			slaveDiv.appendChild(document.createTextNode(`${slaveName}: `));
+			let ul = document.createElement("ul");
+			for (const rr of rejects) {
+				const li = document.createElement("li");
+				li.innerHTML = rr;
+				ul.appendChild(li);
 			}
-			slaveDiv.appendChild(ss);
-			res.appendChild(slaveDiv);
+			slaveDiv.appendChild(ul);
 		}
+		res.appendChild(slaveDiv);
+	}
 
-		for (const rs of rejectedSlaves) {
-			const slave = slaveStateById(rs.id);
-			const rejects = rs.rejects;
-			const slaveName = SlaveFullName(slave);
-			let slaveDiv = document.createElement("div");
-			slaveDiv.id = `slave-${slave.ID}`;
-			slaveDiv.style.setProperty("clear", "both");
-			if (rejects.length === 1) {
-				slaveDiv.innerHTML = rejects[0];
-			} else {
-				slaveDiv.appendChild(document.createTextNode(`${slaveName}: `));
-				let ul = document.createElement("ul");
-				for (const rr of rejects) {
-					const li = document.createElement("li");
-					li.innerHTML = rr;
-					ul.appendChild(li);
-				}
-				slaveDiv.appendChild(ul);
-			}
-			res.appendChild(slaveDiv);
-		}
+	return res;
 
-		batchRenderer = null; // release reference
-
-		return res;
-	}
 
 	/**
 	 * @param {number} id
@@ -327,119 +314,79 @@ App.UI.SlaveList.render = function() {
 
 	/**
 	 * @param {number[]} IDs
+	 * @param {string} uuid
 	 * @returns {DocumentFragment}
 	 */
-	function createQuickList(IDs) {
+	function createQuickList(IDs, uuid) {
+		if (V.useSlaveListInPageJSNavigation < 1 || IDs.length < 2 || passageName !== "Main") {
+			return new DocumentFragment();
+		}
+
+		const f = new DocumentFragment();
+		let currentSort = null;
+
+		let toggleButton;
+		if (V.useSlaveListInPageJSNavigation === 1) {
+			toggleButton = App.UI.DOM.appendNewElement("button", f, "Quick-List", ["quick-button"]);
+		}
+
+		const indexSorting = document.createElement("div");
+		f.append(indexSorting);
+
+		const sortSpan = App.UI.DOM.makeElement("span", "None", ["bold"]);
+
+		indexSorting.append("Sorting: ", sortSpan, " ",
+			App.UI.DOM.link("Sort by Devotion",
+				() => sortButtons("Devotion", (a, b) => b.devotion - a.devotion, "devotion")),
+			" | ",
+			App.UI.DOM.link("Sort by Trust", () => sortButtons("Trust", (a, b) => b.trust - a.trust, "trust"))
+		);
+
+		const indexContainer = document.createElement("div");
+		indexContainer.classList.add("quick-list");
+		f.append(indexContainer);
 		/**
-		 *
-		 * @param {Node} container
-		 * @param {string} tagName
-		 * @param {string} [content]
-		 * @param {string|string[]} [classNames]
-		 * @param {Object.<string, any>} [attributes]
-		 * @returns {HTMLElement}
+		 * @typedef {object} JumpButton
+		 * @property {App.Entity.SlaveState} slave
+		 * @property {HTMLButtonElement} button
 		 */
-		function makeElement(container, tagName, content, classNames, attributes) {
-			let res = document.createElement(tagName);
-			container.appendChild(res);
-			if (content) {
-				res.textContent = content;
-			}
-			if (Array.isArray(classNames)) {
-				for (const c of classNames) {
-					res.classList.add(c);
-				}
-			} else if (classNames !== undefined) {
-				res.classList.add(classNames);
-			}
-
-			if (attributes) {
-				for (const [k, v] of Object.entries(attributes)) {
-					res.setAttribute(k, v);
-				}
-			}
-			return res;
+		/**
+		 * @type {JumpButton[]}
+		 */
+		const jumpButtons = [];
+		for (const id of IDs) {
+			const btn = document.createElement("button");
+			const slave = getSlave(id);
+			btn.append(SlaveFullName(slave));
+			btn.classList.add(getSlaveDevotionClass(slave), getSlaveTrustClass(slave));
+			btn.onclick = () => $('html, body').animate({scrollTop: $(`#slave-${id}-${uuid}`).offset().top - 50}, 300);
+			jumpButtons.push({slave: slave, button: btn});
+			indexContainer.append(btn);
 		}
 
-		const res = document.createDocumentFragment();
+		if (V.useSlaveListInPageJSNavigation === 1) {
+			App.UI.DOM.elementToggle(toggleButton, [indexSorting, indexContainer]);
+		}
 
-		/* Useful for finding weird combinations — usages of this passage that don't yet generate the quick index.
-		*	<<print 'pass/count/indexed/flag::[' + passageName + '/' + Count + '/' + indexed + '/' + V.SlaveSummaryFiler + ']'>>
-		*/
+		return f;
 
-		if (IDs.length > 1 && passageName === "Main") {
-			const buttons = [];
-			let offset = -50;
-			if (/Select/i.test(passageName)) {
-				offset = -25;
-			}
-			/*
-			 * we want <button data-quick-index="<<= listID>>">...
-			 */
-			const quickIndexBtn = document.createElement("button");
-			res.appendChild(quickIndexBtn);
-			quickIndexBtn.id = `quick-list-toggle${listID}`;
-			quickIndexBtn.setAttribute('data-quick-index', listID.toString());
-			quickIndexBtn.onclick = function(ev) {
-				let which = /** @type {HTMLElement} */ (ev.target).attributes["data-quick-index"].value;
-				let quick = $("div#list_index" + which);
-				quick.toggleClass("ql-hidden");
-			};
-			/*
-			 * we want <div id="list_index3" class=" hidden">...
-			 */
-			const listIndex = makeElement(res, "div", undefined, "ql-hidden");
-			listIndex.id = `list_index${listID}`;
-
-			for (const sID of IDs) {
-				const IndexSlave = slaveStateById(sID);
-				const indexSlaveName = SlaveFullName(IndexSlave);
-				const devotionClass = getSlaveDevotionClass(IndexSlave);
-				const trustClass = getSlaveTrustClass(IndexSlave);
-				buttons.push({
-					"data-name": indexSlaveName,
-					"data-scroll-to": `#slave-${IndexSlave.ID}`,
-					"data-scroll-offset": offset,
-					"data-devotion": IndexSlave.devotion,
-					"data-trust": IndexSlave.trust,
-					"class": `${devotionClass} ${trustClass}`
-				});
-			}
-			if (buttons.length > 0) {
-				V.sortQuickList = V.sortQuickList || 'Devotion';
-				makeElement(listIndex, "em", "Sorting: ");
-				const qlSort = makeElement(listIndex, "span", V.sortQuickList, "strong");
-				qlSort.id = "qlSort";
-				listIndex.appendChild(document.createTextNode(". "));
-				const linkSortByDevotion = makeElement(listIndex, "a", "Sort by Devotion");
-				linkSortByDevotion.onclick = (ev) => {
-					ev.preventDefault();
-					V.sortQuickList = "Devotion";
-					$("#qlSort").text(V.sortQuickList);
-					$("#qlWrapper").removeClass("trust").addClass("devotion");
-					sortButtonsByDevotion();
-				};
-				listIndex.append(" | ");
-				const linkSortByTrust = makeElement(listIndex, "a", "Sort by Trust");
-				linkSortByTrust.onclick = (ev) => {
-					ev.preventDefault();
-					V.sortQuickList = "Trust";
-					$("#qlSort").text(V.sortQuickList);
-					$("#qlWrapper").removeClass("devotion").addClass("trust");
-					sortButtonsByTrust();
-				};
-				makeElement(listIndex, "br");
-				const qlWrapper = makeElement(listIndex, "div", undefined, ["quick-list", "devotion"]);
-				qlWrapper.id = "qlWrapper";
-				for (const button of buttons) {
-					const btn = makeElement(listIndex, 'button', button['data-name'], undefined, button);
-					btn.onclick = App.UI.quickBtnScrollToHandler;
-				}
+		/**
+		 * @param {string} name
+		 * @param {function(FC.SlaveState, FC.SlaveState):number} compareFn
+		 * @param {string} colorClass
+		 */
+		function sortButtons(name, compareFn, colorClass) {
+			$(sortSpan).empty().append(name);
+			jumpButtons.sort((a, b) => compareFn(a.slave, b.slave));
+			$(indexContainer).empty().append(jumpButtons.map(v => v.button));
+			if (currentSort) {
+				indexContainer.classList.remove(currentSort);
 			}
+			indexContainer.classList.add(colorClass);
+			currentSort = colorClass;
 		}
-		return res;
 	}
-}();
+};
 
 App.UI.SlaveList.Decoration = {};
 /**
@@ -548,7 +495,8 @@ App.UI.SlaveList.sortingLinks = function(passage) {
 	const textify = string => capFirstChar(string.replace(/([A-Z])/g, " $1"));
 
 	let span = App.UI.DOM.makeElement("span", "Sort by: ");
-	let order = ["devotion", "trust", "name", "assignment", "seniority", "actualAge", "visualAge", "physicalAge", "weeklyIncome", "beauty", "health", "weight", "muscles", "intelligence", "sexDrive", "pregnancy", "prestige"];
+	let order = ["devotion", "trust", "name", "assignment", "seniority", "actualAge", "visualAge", "physicalAge",
+		"weeklyIncome", "beauty", "health", "weight", "muscles", "intelligence", "sexDrive", "pregnancy", "prestige"];
 	const orderMap = order.map(so => {
 		return {key: so, name: capFirstChar(so)};
 	});
@@ -563,8 +511,13 @@ App.UI.SlaveList.sortingLinks = function(passage) {
 
 	span = App.UI.DOM.makeElement("span", " Sort direction: ");
 	order = ["descending", "ascending"];
-	span.append(App.UI.DOM.generateLinksStrip(order.map(so => V.sortSlavesOrder !== so
-		? App.UI.DOM.passageLink(textify(so), passage, () => { V.sortSlavesOrder = so; }) : textify(so))));
+	span.append(App.UI.DOM.generateLinksStrip(order.map(so =>
+		V.sortSlavesOrder === so ? textify(so)
+			: App.UI.DOM.link(textify(so), () => {
+				V.sortSlavesOrder = so;
+				App.UI.reload();
+			})
+	)));
 	div.append(span);
 
 	return div;
@@ -1088,7 +1041,9 @@ App.UI.SlaveList.slaveSelectionList = function() {
 	 */
 	let slaveSelectionList = null;
 
-	$(document).on(':passageinit', () => { slaveSelectionList = null; });
+	$(document).on(':passageinit', () => {
+		slaveSelectionList = null;
+	});
 
 	return selection;
 
@@ -1100,7 +1055,9 @@ App.UI.SlaveList.slaveSelectionList = function() {
 	 * @returns {HTMLElement}
 	 */
 	function selection(filter, interactionLink, experienceChecker, postNote) {
-		if (experienceChecker === null) { experienceChecker = undefined; }
+		if (experienceChecker === null) {
+			experienceChecker = undefined;
+		}
 		options = {
 			filter: filter,
 			interactionLink: interactionLink,
@@ -1180,7 +1137,9 @@ App.UI.SlaveList.slaveSelectionList = function() {
 			if (fr === true || (Array.isArray(fr) && fr.length === 0)) {
 				passingIDs.push(id);
 			} else {
-				if (Array.isArray(fr)) { rejects.push({id: id, rejects: fr}); }
+				if (Array.isArray(fr)) {
+					rejects.push({id: id, rejects: fr});
+				}
 			}
 		});