From 0f12b440c6d091b3e48b396f8dfad0a64985b29c Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 9 Jun 2026 13:46:47 +0100
Subject: [PATCH] feat: drag and drop skins to reorder

---
 apps/app-frontend/package.json                |   3 +-
 .../ui/skin/VirtualSkinSectionList.vue        | 200 +++++++++++-----
 apps/app-frontend/src/helpers/skins.ts        |   6 +
 apps/app-frontend/src/pages/Skins.vue         |  45 +++-
 apps/app/build.rs                             |   1 +
 apps/app/src/api/minecraft_skins.rs           |   9 +
 ...fd6f231ecffd45315ed2b76253d02bbd531ff.json |  12 +
 ...c5a396443ead9a9e295f6eea0986e40d65449.json |  20 ++
 ...da27bff30801646436358acf57eb4cdfa25ad.json |  12 +
 ...1055fe47287d7f99be41215c25c1019d439b9.json |  12 -
 ...215f46946f9b9043d4b037e3a4d5b27e0373.json} |  12 +-
 ...e34b16057db8b0eab08a9d8b8dce961c6f81c.json |  20 ++
 ...37ad3b03ecf99d1484c402694799dc08271f5.json |  12 +
 ...91032037aaccfeca64dc076f0dcc826c108a.json} |  12 +-
 ...e2cbc2e701584d8b3394a1aa686e3ff4d47f5.json |  20 ++
 ...bd5b728ba93d9e3bb6f3db57ac1c83574d508.json |  12 +
 .../20260609120000_add-saved-skin-order.sql   |  13 ++
 packages/app-lib/src/api/minecraft_skins.rs   |  66 +++++-
 .../app-lib/src/state/minecraft_skins/mod.rs  | 130 ++++++++++-
 packages/assets/generated-icons.ts            | 219 +++++++++---------
 packages/assets/icons/grip-vertical.svg       |  20 ++
 .../ui/src/components/skin/SkinButton.vue     |  12 +-
 pnpm-lock.yaml                                |  26 ++-
 23 files changed, 700 insertions(+), 194 deletions(-)
 create mode 100644 packages/app-lib/.sqlx/query-11875ae76d8a61099dff08e9792fd6f231ecffd45315ed2b76253d02bbd531ff.json
 create mode 100644 packages/app-lib/.sqlx/query-18f04a0f6c262995b5f1eee10c2c5a396443ead9a9e295f6eea0986e40d65449.json
 create mode 100644 packages/app-lib/.sqlx/query-3538a56e37f456ca57998bd4753da27bff30801646436358acf57eb4cdfa25ad.json
 delete mode 100644 packages/app-lib/.sqlx/query-4c8063f9ce2fd7deec9b69e0b2c1055fe47287d7f99be41215c25c1019d439b9.json
 rename packages/app-lib/.sqlx/{query-aae88809ada53e13441352e315f68169cfd8226b57bacd8c270d7777fc6883ac.json => query-57df2984dd65b408473ed1ae86b0215f46946f9b9043d4b037e3a4d5b27e0373.json} (59%)
 create mode 100644 packages/app-lib/.sqlx/query-69c5a93676809ab6480fc41a2e6e34b16057db8b0eab08a9d8b8dce961c6f81c.json
 create mode 100644 packages/app-lib/.sqlx/query-9a9b8b5c0b646b841b73461980b37ad3b03ecf99d1484c402694799dc08271f5.json
 rename packages/app-lib/.sqlx/{query-a0b0ff0ae4b88d5df9d15d3427ab4e9a6ff21cffdc9c2f3d6860e245949d313d.json => query-a1217622558d50ee18e7ba0d85e991032037aaccfeca64dc076f0dcc826c108a.json} (61%)
 create mode 100644 packages/app-lib/.sqlx/query-bab7f687a8397975747cfe194a0e2cbc2e701584d8b3394a1aa686e3ff4d47f5.json
 create mode 100644 packages/app-lib/.sqlx/query-d68c41fb2cb182aa8fc23422c55bd5b728ba93d9e3bb6f3db57ac1c83574d508.json
 create mode 100644 packages/app-lib/migrations/20260609120000_add-saved-skin-order.sql
 create mode 100644 packages/assets/icons/grip-vertical.svg

diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index 9df74bb686..18ff367db0 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -44,7 +44,8 @@
 		"vue": "^3.5.13",
 		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
-		"vue-virtual-scroller": "v2.0.0-beta.8"
+		"vue-virtual-scroller": "v2.0.0-beta.8",
+		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.1.1",
diff --git a/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue b/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue
index 43430cfa0a..fc6054ef3f 100644
--- a/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue
+++ b/apps/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { DropdownIcon, EditIcon, PlusIcon, TrashIcon, UnknownIcon } from '@modrinth/assets'
+import {
+	DropdownIcon,
+	EditIcon,
+	GripVerticalIcon,
+	PlusIcon,
+	TrashIcon,
+	UnknownIcon,
+} from '@modrinth/assets'
 import {
 	Accordion,
 	ButtonStyled,
@@ -13,6 +20,7 @@ import {
 import { useElementSize, useWindowSize } from '@vueuse/core'
 import { Tooltip } from 'floating-vue'
 import { computed, nextTick, onUnmounted, ref, useTemplateRef, watch } from 'vue'
+import Draggable from 'vuedraggable'
 
 import type { RenderResult } from '@/helpers/rendering/batch-skin-renderer.ts'
 import type { Skin } from '@/helpers/skins.ts'
@@ -73,6 +81,18 @@ const messages = defineMessages({
 		id: 'app.skins.delete-button',
 		defaultMessage: 'Delete skin',
 	},
+	reorderButton: {
+		id: 'app.skins.section.saved-skins.reorder-button',
+		defaultMessage: 'Reorder',
+	},
+	finishReorderButton: {
+		id: 'app.skins.section.saved-skins.finish-reorder-button',
+		defaultMessage: 'Finish',
+	},
+	reorderSkinButton: {
+		id: 'app.skins.reorder-skin-button',
+		defaultMessage: 'Reorder skin',
+	},
 })
 
 const props = defineProps<{
@@ -82,6 +102,7 @@ const props = defineProps<{
 	isSkinSelected: (skin: Skin) => boolean
 	isSkinActive: (skin: Skin) => boolean
 	isAddSkinButtonDragActive: boolean
+	isSavedSkinReorderMode: boolean
 }>()
 
 const emit = defineEmits<{
@@ -93,6 +114,8 @@ const emit = defineEmits<{
 	'add-skin-dragover': [event: DragEvent]
 	'add-skin-dragleave': [event: DragEvent]
 	'add-skin-drop': [event: DragEvent]
+	'reorder-saved-skins': [textureKeys: string[]]
+	'toggle-saved-skin-reorder': []
 }>()
 
 const addSkinButton = useTemplateRef<AddSkinButtonRef>('addSkinButton')
@@ -295,6 +318,13 @@ function getAddSkinButtonElement() {
 	return button?.getRootElement()
 }
 
+function emitSavedSkinOrder(nextSkins: Skin[]) {
+	emit(
+		'reorder-saved-skins',
+		nextSkins.map((skin) => skin.texture_key),
+	)
+}
+
 defineExpose({ getAddSkinButtonElement })
 </script>
 
@@ -316,8 +346,24 @@ defineExpose({ getAddSkinButtonElement })
 			]"
 			:style="{ transform: `translateY(${top}px)` }"
 		>
+			<div
+				v-if="section.kind === 'saved'"
+				class="absolute right-0 z-20"
+				:class="index === 0 ? 'top-1' : 'top-6'"
+			>
+				<ButtonStyled size="small" :color="isSavedSkinReorderMode ? 'brand' : 'standard'">
+					<button @click.stop="emit('toggle-saved-skin-reorder')">
+						{{
+							formatMessage(
+								isSavedSkinReorderMode ? messages.finishReorderButton : messages.reorderButton,
+							)
+						}}
+					</button>
+				</ButtonStyled>
+			</div>
+
 			<Accordion
-				button-class="group flex w-full items-center gap-[6px] bg-transparent m-0 p-0 border-none cursor-pointer text-left"
+				button-class="group flex w-full items-center gap-[6px] bg-transparent m-0 p-0 pr-24 border-none cursor-pointer text-left"
 				content-class="pt-2"
 				:open-by-default="isSectionOpen(section.key)"
 				@on-open="setSectionOpen(section.key, true)"
@@ -354,61 +400,91 @@ defineExpose({ getAddSkinButtonElement })
 					</Tooltip>
 				</template>
 
-				<div
+				<Draggable
 					v-if="section.kind === 'saved'"
+					:model-value="section.skins"
+					item-key="texture_key"
+					tag="div"
 					class="grid w-full grid-cols-3 gap-3 min-[1300px]:grid-cols-4 min-[1750px]:grid-cols-5 min-[2050px]:grid-cols-6"
+					handle=".saved-skin-reorder-handle"
+					ghost-class="saved-skin-sortable-ghost"
+					chosen-class="saved-skin-sortable-chosen"
+					drag-class="saved-skin-sortable-drag"
+					fallback-class="saved-skin-sortable-fallback"
+					:animation="150"
+					:disabled="!isSavedSkinReorderMode"
+					:fallback-on-body="true"
+					:fallback-tolerance="4"
+					:force-fallback="true"
+					@update:model-value="emitSavedSkinOrder"
 				>
-					<SkinLikeTextButton
-						ref="addSkinButton"
-						class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						dropzone
-						:drag-active="isAddSkinButtonDragActive"
-						@click="emit('add-skin')"
-						@dragenter="emit('add-skin-dragenter', $event)"
-						@dragover="emit('add-skin-dragover', $event)"
-						@dragleave="emit('add-skin-dragleave', $event)"
-						@drop="emit('add-skin-drop', $event)"
-					>
-						<template #icon>
-							<PlusIcon class="size-8" />
-						</template>
-						{{ formatMessage(messages.addSkinButton) }}
-						<template #subtitle>{{ formatMessage(messages.dragAndDropSubtitle) }}</template>
-					</SkinLikeTextButton>
+					<template #header>
+						<SkinLikeTextButton
+							ref="addSkinButton"
+							class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
+							dropzone
+							:drag-active="isAddSkinButtonDragActive"
+							@click="emit('add-skin')"
+							@dragenter="emit('add-skin-dragenter', $event)"
+							@dragover="emit('add-skin-dragover', $event)"
+							@dragleave="emit('add-skin-dragleave', $event)"
+							@drop="emit('add-skin-drop', $event)"
+						>
+							<template #icon>
+								<PlusIcon class="size-8" />
+							</template>
+							{{ formatMessage(messages.addSkinButton) }}
+							<template #subtitle>{{ formatMessage(messages.dragAndDropSubtitle) }}</template>
+						</SkinLikeTextButton>
+					</template>
 
-					<SkinButton
-						v-for="skin in section.skins"
-						:key="skinKey(skin, 'saved-skin')"
-						class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
-						:forward-image-src="getBakedSkinTextures(skin)?.forwards"
-						:backward-image-src="getBakedSkinTextures(skin)?.backwards"
-						:selected="isSkinSelected(skin)"
-						:active="isSkinActive(skin)"
-						@select="emit('select', skin)"
-					>
-						<template #overlay-buttons>
-							<ButtonStyled color="brand">
-								<button
-									:aria-label="formatMessage(messages.editSkinButton)"
-									class="pointer-events-auto"
-									@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-								>
-									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-								<button
-									v-tooltip="formatMessage(messages.deleteSkinButton)"
-									:aria-label="formatMessage(messages.deleteSkinButton)"
-									class="!rounded-[100%] pointer-events-auto"
-									@click.stop="emit('delete', skin)"
-								>
-									<TrashIcon />
-								</button>
-							</ButtonStyled>
-						</template>
-					</SkinButton>
-				</div>
+					<template #item="{ element: skin }">
+						<SkinButton
+							:key="skinKey(skin, 'saved-skin')"
+							class="aspect-[31/40] w-full min-w-0 box-border rounded-[20px]"
+							:forward-image-src="getBakedSkinTextures(skin)?.forwards"
+							:backward-image-src="getBakedSkinTextures(skin)?.backwards"
+							:selected="isSkinSelected(skin)"
+							:active="isSkinActive(skin)"
+							:selectable="!isSavedSkinReorderMode"
+							@select="emit('select', skin)"
+						>
+							<template v-if="isSavedSkinReorderMode" #top-buttons>
+								<ButtonStyled circular type="transparent">
+									<button
+										v-tooltip="formatMessage(messages.reorderSkinButton)"
+										:aria-label="formatMessage(messages.reorderSkinButton)"
+										class="saved-skin-reorder-handle pointer-events-auto cursor-grab active:cursor-grabbing"
+										@click.stop
+									>
+										<GripVerticalIcon />
+									</button>
+								</ButtonStyled>
+							</template>
+							<template v-if="!isSavedSkinReorderMode" #overlay-buttons>
+								<ButtonStyled color="brand">
+									<button
+										:aria-label="formatMessage(messages.editSkinButton)"
+										class="pointer-events-auto"
+										@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+									>
+										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+									</button>
+								</ButtonStyled>
+								<ButtonStyled v-show="!skin.is_equipped" circular color="red">
+									<button
+										v-tooltip="formatMessage(messages.deleteSkinButton)"
+										:aria-label="formatMessage(messages.deleteSkinButton)"
+										class="!rounded-[100%] pointer-events-auto"
+										@click.stop="emit('delete', skin)"
+									>
+										<TrashIcon />
+									</button>
+								</ButtonStyled>
+							</template>
+						</SkinButton>
+					</template>
+				</Draggable>
 
 				<div
 					v-else
@@ -430,3 +506,21 @@ defineExpose({ getAddSkinButtonElement })
 		</div>
 	</div>
 </template>
+
+<style scoped>
+.saved-skin-sortable-chosen {
+	outline: 2px solid var(--color-brand);
+	outline-offset: 2px;
+}
+
+.saved-skin-sortable-ghost {
+	opacity: 0.4;
+}
+
+.saved-skin-sortable-drag,
+.saved-skin-sortable-fallback {
+	box-shadow:
+		0 8px 18px rgba(0, 0, 0, 0.25),
+		0 2px 8px rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/apps/app-frontend/src/helpers/skins.ts b/apps/app-frontend/src/helpers/skins.ts
index 9a05df55de..e0d17fe0e2 100644
--- a/apps/app-frontend/src/helpers/skins.ts
+++ b/apps/app-frontend/src/helpers/skins.ts
@@ -142,6 +142,12 @@ export async function remove_custom_skin(skin: Skin): Promise<void> {
 	})
 }
 
+export async function set_custom_skin_order(textureKeys: string[]): Promise<void> {
+	await invoke('plugin:minecraft-skins|set_custom_skin_order', {
+		textureKeys,
+	})
+}
+
 export async function save_custom_skin(
 	skin: Skin,
 	textureBlob: Uint8Array,
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index 58bb228f50..f48d068a51 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -46,6 +46,7 @@ import {
 	get_normalized_skin_texture,
 	normalize_skin_texture,
 	remove_custom_skin,
+	set_custom_skin_order,
 } from '@/helpers/skins.ts'
 import { hasPride26Badge } from '@/helpers/user-campaigns.ts'
 import { handleSevereError } from '@/store/error'
@@ -269,6 +270,7 @@ let isUnmounted = false
 
 const isDraggingSkinFile = ref(false)
 const isAddSkinButtonDragActive = ref(false)
+const isSavedSkinReorderMode = ref(false)
 
 const deleteSkinModal = ref()
 const skinToDelete = ref<Skin | null>(null)
@@ -480,6 +482,44 @@ function updateLocalSkin(savedSkin: Skin, applied: boolean, previousSkin?: Skin)
 	generateSkinPreviews(skins.value, capes.value)
 }
 
+function reorderLocalSavedSkins(textureKeys: string[]) {
+	const requestedKeys = new Set(textureKeys)
+	const savedSkinList = skins.value.filter((skin) => skin.source !== 'default')
+	const savedSkinByKey = new Map(savedSkinList.map((skin) => [skin.texture_key, skin]))
+	const orderedSavedSkins = [
+		...textureKeys.map((key) => savedSkinByKey.get(key)).filter((skin): skin is Skin => !!skin),
+		...savedSkinList.filter((skin) => !requestedKeys.has(skin.texture_key)),
+	]
+	let savedSkinIndex = 0
+
+	skins.value = skins.value.flatMap((skin) => {
+		if (skin.source === 'default') {
+			return [skin]
+		}
+
+		const nextSkin = orderedSavedSkins[savedSkinIndex++]
+		return nextSkin ? [nextSkin] : []
+	})
+}
+
+async function onSavedSkinsReordered(textureKeys: string[]) {
+	const previousSkins = skins.value
+
+	reorderLocalSavedSkins(textureKeys)
+
+	try {
+		await set_custom_skin_order(textureKeys)
+	} catch (error) {
+		skins.value = previousSkins
+		handleError(error as Error)
+		await loadSkins()
+	}
+}
+
+function toggleSavedSkinReorderMode() {
+	isSavedSkinReorderMode.value = !isSavedSkinReorderMode.value
+}
+
 function schedulePendingSkinRefresh() {
 	if (pendingSkinRefreshTimeout !== null) {
 		window.clearTimeout(pendingSkinRefreshTimeout)
@@ -853,7 +893,7 @@ await loadSkins()
 						<button
 							v-else
 							class="flex h-10 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-[14px] border-0 bg-surface-4 px-4 py-2.5 text-base font-semibold leading-5 shadow-md transition-[filter,transform] duration-200 enabled:hover:brightness-[--hover-brightness] enabled:focus-visible:brightness-[--hover-brightness] enabled:active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:size-5 [&>svg]:shrink-0"
-							:disabled="!selectedSkin"
+							:disabled="!selectedSkin || isSavedSkinReorderMode"
 							@click="(e: MouseEvent) => selectedSkin && editSkinModal?.show(e, selectedSkin)"
 						>
 							<EditIcon />
@@ -873,9 +913,12 @@ await loadSkins()
 				:is-skin-selected="isSkinSelected"
 				:is-skin-active="isSkinActive"
 				:is-add-skin-button-drag-active="isAddSkinButtonDragActive"
+				:is-saved-skin-reorder-mode="isSavedSkinReorderMode"
 				@select="changeSkin"
 				@edit="(skin, event) => editSkinModal?.show(event, skin)"
 				@delete="confirmDeleteSkin"
+				@reorder-saved-skins="onSavedSkinsReordered"
+				@toggle-saved-skin-reorder="toggleSavedSkinReorderMode"
 				@add-skin="openAddSkinFileBrowser"
 				@add-skin-dragenter="onAddSkinDragOver"
 				@add-skin-dragover="onAddSkinDragOver"
diff --git a/apps/app/build.rs b/apps/app/build.rs
index d98d01de4c..1f78fcce47 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -117,6 +117,7 @@ fn main() {
                         "equip_skin",
                         "remove_custom_skin",
                         "save_custom_skin",
+                        "set_custom_skin_order",
                         "unequip_skin",
                         "flush_pending_skin_change",
                         "flush_pending_skin_change_for_profile",
diff --git a/apps/app/src/api/minecraft_skins.rs b/apps/app/src/api/minecraft_skins.rs
index 55a67e12ed..0f190f4f53 100644
--- a/apps/app/src/api/minecraft_skins.rs
+++ b/apps/app/src/api/minecraft_skins.rs
@@ -14,6 +14,7 @@ pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
             equip_skin,
             remove_custom_skin,
             save_custom_skin,
+            set_custom_skin_order,
             unequip_skin,
             flush_pending_skin_change,
             flush_pending_skin_change_for_profile,
@@ -91,6 +92,14 @@ pub async fn save_custom_skin(
     .await?)
 }
 
+/// `invoke('plugin:minecraft-skins|set_custom_skin_order', texture_keys)`
+///
+/// See also: [minecraft_skins::set_custom_skin_order]
+#[tauri::command]
+pub async fn set_custom_skin_order(texture_keys: Vec<String>) -> Result<()> {
+    Ok(minecraft_skins::set_custom_skin_order(texture_keys).await?)
+}
+
 /// `invoke('plugin:minecraft-skins|unequip_skin')`
 ///
 /// See also: [minecraft_skins::unequip_skin]
diff --git a/packages/app-lib/.sqlx/query-11875ae76d8a61099dff08e9792fd6f231ecffd45315ed2b76253d02bbd531ff.json b/packages/app-lib/.sqlx/query-11875ae76d8a61099dff08e9792fd6f231ecffd45315ed2b76253d02bbd531ff.json
new file mode 100644
index 0000000000..31ebfa7ce3
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-11875ae76d8a61099dff08e9792fd6f231ecffd45315ed2b76253d02bbd531ff.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "UPDATE custom_minecraft_skins SET display_order = display_order + 1 WHERE minecraft_user_uuid = ? AND display_order >= ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": []
+  },
+  "hash": "11875ae76d8a61099dff08e9792fd6f231ecffd45315ed2b76253d02bbd531ff"
+}
diff --git a/packages/app-lib/.sqlx/query-18f04a0f6c262995b5f1eee10c2c5a396443ead9a9e295f6eea0986e40d65449.json b/packages/app-lib/.sqlx/query-18f04a0f6c262995b5f1eee10c2c5a396443ead9a9e295f6eea0986e40d65449.json
new file mode 100644
index 0000000000..940afa85a3
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-18f04a0f6c262995b5f1eee10c2c5a396443ead9a9e295f6eea0986e40d65449.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT display_order FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? AND texture_key = ?",
+  "describe": {
+    "columns": [
+      {
+        "name": "display_order",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 2
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "18f04a0f6c262995b5f1eee10c2c5a396443ead9a9e295f6eea0986e40d65449"
+}
diff --git a/packages/app-lib/.sqlx/query-3538a56e37f456ca57998bd4753da27bff30801646436358acf57eb4cdfa25ad.json b/packages/app-lib/.sqlx/query-3538a56e37f456ca57998bd4753da27bff30801646436358acf57eb4cdfa25ad.json
new file mode 100644
index 0000000000..7604f57fba
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-3538a56e37f456ca57998bd4753da27bff30801646436358acf57eb4cdfa25ad.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "UPDATE custom_minecraft_skins SET display_order = display_order + 1 WHERE minecraft_user_uuid = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "3538a56e37f456ca57998bd4753da27bff30801646436358acf57eb4cdfa25ad"
+}
diff --git a/packages/app-lib/.sqlx/query-4c8063f9ce2fd7deec9b69e0b2c1055fe47287d7f99be41215c25c1019d439b9.json b/packages/app-lib/.sqlx/query-4c8063f9ce2fd7deec9b69e0b2c1055fe47287d7f99be41215c25c1019d439b9.json
deleted file mode 100644
index 4b7932bbec..0000000000
--- a/packages/app-lib/.sqlx/query-4c8063f9ce2fd7deec9b69e0b2c1055fe47287d7f99be41215c25c1019d439b9.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "INSERT OR REPLACE INTO custom_minecraft_skins (minecraft_user_uuid, texture_key, variant, cape_id) VALUES (?, ?, ?, ?)",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 4
-    },
-    "nullable": []
-  },
-  "hash": "4c8063f9ce2fd7deec9b69e0b2c1055fe47287d7f99be41215c25c1019d439b9"
-}
diff --git a/packages/app-lib/.sqlx/query-aae88809ada53e13441352e315f68169cfd8226b57bacd8c270d7777fc6883ac.json b/packages/app-lib/.sqlx/query-57df2984dd65b408473ed1ae86b0215f46946f9b9043d4b037e3a4d5b27e0373.json
similarity index 59%
rename from packages/app-lib/.sqlx/query-aae88809ada53e13441352e315f68169cfd8226b57bacd8c270d7777fc6883ac.json
rename to packages/app-lib/.sqlx/query-57df2984dd65b408473ed1ae86b0215f46946f9b9043d4b037e3a4d5b27e0373.json
index 4d0c3892f3..acdcf23303 100644
--- a/packages/app-lib/.sqlx/query-aae88809ada53e13441352e315f68169cfd8226b57bacd8c270d7777fc6883ac.json
+++ b/packages/app-lib/.sqlx/query-57df2984dd65b408473ed1ae86b0215f46946f9b9043d4b037e3a4d5b27e0373.json
@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated' FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? ORDER BY rowid ASC LIMIT ? OFFSET ?",
+  "query": "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated', display_order FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? ORDER BY display_order ASC, rowid ASC LIMIT ? OFFSET ?",
   "describe": {
     "columns": [
       {
@@ -17,6 +17,11 @@
         "name": "cape_id: Hyphenated",
         "ordinal": 2,
         "type_info": "Text"
+      },
+      {
+        "name": "display_order",
+        "ordinal": 3,
+        "type_info": "Integer"
       }
     ],
     "parameters": {
@@ -25,8 +30,9 @@
     "nullable": [
       false,
       false,
-      true
+      true,
+      false
     ]
   },
-  "hash": "aae88809ada53e13441352e315f68169cfd8226b57bacd8c270d7777fc6883ac"
+  "hash": "57df2984dd65b408473ed1ae86b0215f46946f9b9043d4b037e3a4d5b27e0373"
 }
diff --git a/packages/app-lib/.sqlx/query-69c5a93676809ab6480fc41a2e6e34b16057db8b0eab08a9d8b8dce961c6f81c.json b/packages/app-lib/.sqlx/query-69c5a93676809ab6480fc41a2e6e34b16057db8b0eab08a9d8b8dce961c6f81c.json
new file mode 100644
index 0000000000..911feebc50
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-69c5a93676809ab6480fc41a2e6e34b16057db8b0eab08a9d8b8dce961c6f81c.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT texture_key FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? ORDER BY display_order ASC, rowid ASC",
+  "describe": {
+    "columns": [
+      {
+        "name": "texture_key",
+        "ordinal": 0,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "69c5a93676809ab6480fc41a2e6e34b16057db8b0eab08a9d8b8dce961c6f81c"
+}
diff --git a/packages/app-lib/.sqlx/query-9a9b8b5c0b646b841b73461980b37ad3b03ecf99d1484c402694799dc08271f5.json b/packages/app-lib/.sqlx/query-9a9b8b5c0b646b841b73461980b37ad3b03ecf99d1484c402694799dc08271f5.json
new file mode 100644
index 0000000000..c46e3dbd66
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-9a9b8b5c0b646b841b73461980b37ad3b03ecf99d1484c402694799dc08271f5.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "INSERT INTO custom_minecraft_skins (minecraft_user_uuid, texture_key, variant, cape_id, display_order) VALUES (?, ?, ?, ?, ?)",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 5
+    },
+    "nullable": []
+  },
+  "hash": "9a9b8b5c0b646b841b73461980b37ad3b03ecf99d1484c402694799dc08271f5"
+}
diff --git a/packages/app-lib/.sqlx/query-a0b0ff0ae4b88d5df9d15d3427ab4e9a6ff21cffdc9c2f3d6860e245949d313d.json b/packages/app-lib/.sqlx/query-a1217622558d50ee18e7ba0d85e991032037aaccfeca64dc076f0dcc826c108a.json
similarity index 61%
rename from packages/app-lib/.sqlx/query-a0b0ff0ae4b88d5df9d15d3427ab4e9a6ff21cffdc9c2f3d6860e245949d313d.json
rename to packages/app-lib/.sqlx/query-a1217622558d50ee18e7ba0d85e991032037aaccfeca64dc076f0dcc826c108a.json
index 53263ede99..56da9215c8 100644
--- a/packages/app-lib/.sqlx/query-a0b0ff0ae4b88d5df9d15d3427ab4e9a6ff21cffdc9c2f3d6860e245949d313d.json
+++ b/packages/app-lib/.sqlx/query-a1217622558d50ee18e7ba0d85e991032037aaccfeca64dc076f0dcc826c108a.json
@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated' FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? AND texture_key = ?",
+  "query": "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated', display_order FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? AND texture_key = ?",
   "describe": {
     "columns": [
       {
@@ -17,6 +17,11 @@
         "name": "cape_id: Hyphenated",
         "ordinal": 2,
         "type_info": "Text"
+      },
+      {
+        "name": "display_order",
+        "ordinal": 3,
+        "type_info": "Integer"
       }
     ],
     "parameters": {
@@ -25,8 +30,9 @@
     "nullable": [
       false,
       false,
-      true
+      true,
+      false
     ]
   },
-  "hash": "a0b0ff0ae4b88d5df9d15d3427ab4e9a6ff21cffdc9c2f3d6860e245949d313d"
+  "hash": "a1217622558d50ee18e7ba0d85e991032037aaccfeca64dc076f0dcc826c108a"
 }
diff --git a/packages/app-lib/.sqlx/query-bab7f687a8397975747cfe194a0e2cbc2e701584d8b3394a1aa686e3ff4d47f5.json b/packages/app-lib/.sqlx/query-bab7f687a8397975747cfe194a0e2cbc2e701584d8b3394a1aa686e3ff4d47f5.json
new file mode 100644
index 0000000000..754681e616
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-bab7f687a8397975747cfe194a0e2cbc2e701584d8b3394a1aa686e3ff4d47f5.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT COALESCE(MAX(display_order) + 1, 0) AS 'display_order!: i64' FROM custom_minecraft_skins WHERE minecraft_user_uuid = ?",
+  "describe": {
+    "columns": [
+      {
+        "name": "display_order!: i64",
+        "ordinal": 0,
+        "type_info": "Integer"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false
+    ]
+  },
+  "hash": "bab7f687a8397975747cfe194a0e2cbc2e701584d8b3394a1aa686e3ff4d47f5"
+}
diff --git a/packages/app-lib/.sqlx/query-d68c41fb2cb182aa8fc23422c55bd5b728ba93d9e3bb6f3db57ac1c83574d508.json b/packages/app-lib/.sqlx/query-d68c41fb2cb182aa8fc23422c55bd5b728ba93d9e3bb6f3db57ac1c83574d508.json
new file mode 100644
index 0000000000..8757e8679a
--- /dev/null
+++ b/packages/app-lib/.sqlx/query-d68c41fb2cb182aa8fc23422c55bd5b728ba93d9e3bb6f3db57ac1c83574d508.json
@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "UPDATE custom_minecraft_skins SET display_order = ? WHERE minecraft_user_uuid = ? AND texture_key = ?",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "d68c41fb2cb182aa8fc23422c55bd5b728ba93d9e3bb6f3db57ac1c83574d508"
+}
diff --git a/packages/app-lib/migrations/20260609120000_add-saved-skin-order.sql b/packages/app-lib/migrations/20260609120000_add-saved-skin-order.sql
new file mode 100644
index 0000000000..f5dcb86b82
--- /dev/null
+++ b/packages/app-lib/migrations/20260609120000_add-saved-skin-order.sql
@@ -0,0 +1,13 @@
+ALTER TABLE custom_minecraft_skins
+ADD COLUMN display_order INTEGER NOT NULL DEFAULT 0;
+
+UPDATE custom_minecraft_skins
+SET display_order = (
+	SELECT COUNT(*)
+	FROM custom_minecraft_skins AS previous
+	WHERE previous.minecraft_user_uuid = custom_minecraft_skins.minecraft_user_uuid
+		AND previous.rowid <= custom_minecraft_skins.rowid
+) - 1;
+
+CREATE INDEX custom_minecraft_skins_user_display_order
+	ON custom_minecraft_skins (minecraft_user_uuid, display_order);
diff --git a/packages/app-lib/src/api/minecraft_skins.rs b/packages/app-lib/src/api/minecraft_skins.rs
index 69483b99e2..51e9fa44f3 100644
--- a/packages/app-lib/src/api/minecraft_skins.rs
+++ b/packages/app-lib/src/api/minecraft_skins.rs
@@ -65,7 +65,10 @@ use crate::{
     ErrorKind, State,
     state::{
         MinecraftCharacterExpressionState, MinecraftProfile,
-        minecraft_skins::{CustomMinecraftSkin, mojang_api},
+        minecraft_skins::{
+            CustomMinecraftSkin, CustomMinecraftSkinInsertPosition,
+            mojang_api,
+        },
     },
 };
 
@@ -400,6 +403,7 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
                     &texture_blob,
                     custom_skin.variant,
                     custom_skin.cape_id,
+                    CustomMinecraftSkinInsertPosition::Bottom,
                     &state.pool,
                 )
                 .await?;
@@ -445,7 +449,6 @@ pub async fn get_available_skins() -> crate::Result<Vec<Skin>> {
         });
     }
 
-    custom_skins.sort_by(|a, b| a.texture.as_str().cmp(b.texture.as_str()));
     available_skins.extend(custom_skins);
 
     for default_skin in assets::DEFAULT_SKINS.iter() {
@@ -526,6 +529,7 @@ pub async fn add_and_equip_custom_skin(
         &texture_blob,
         variant,
         cape_id,
+        CustomMinecraftSkinInsertPosition::Top,
         &state.pool,
     )
     .await?;
@@ -598,6 +602,20 @@ async fn add_and_equip_custom_skin_now(
     let equipped_skin = profile.current_skin()?;
     let equipped_skin_texture_key = equipped_skin.texture_key();
     let equipped_skin_variant = equipped_skin.variant;
+    let insert_position =
+        if local_texture_key != equipped_skin_texture_key.as_ref() {
+            CustomMinecraftSkin::get_by_texture(
+                profile.id,
+                local_texture_key,
+                &state.pool,
+            )
+            .await?
+            .map_or(CustomMinecraftSkinInsertPosition::Top, |skin| {
+                CustomMinecraftSkinInsertPosition::At(skin.display_order)
+            })
+        } else {
+            CustomMinecraftSkinInsertPosition::Top
+        };
 
     let persistence_result = if cape_id.is_none()
         && is_bundled_skin(&equipped_skin_texture_key, equipped_skin_variant)
@@ -606,6 +624,7 @@ async fn add_and_equip_custom_skin_now(
             texture_key: equipped_skin_texture_key.to_string(),
             variant: equipped_skin_variant,
             cape_id: None,
+            display_order: 0,
         }
         .remove(profile.id, &state.pool)
         .await
@@ -616,6 +635,7 @@ async fn add_and_equip_custom_skin_now(
             &texture_blob,
             variant,
             cape_id,
+            insert_position,
             &state.pool,
         )
         .await
@@ -631,6 +651,7 @@ async fn add_and_equip_custom_skin_now(
             texture_key: local_texture_key.to_string(),
             variant,
             cape_id,
+            display_order: 0,
         }
         .remove(profile.id, &state.pool)
         .await?;
@@ -741,6 +762,7 @@ async fn persist_equipped_skin(
             texture_key: equipped_skin_texture_key.to_string(),
             variant: equipped_skin_variant,
             cape_id: None,
+            display_order: 0,
         }
         .remove(profile.id, &state.pool)
         .await?;
@@ -752,6 +774,7 @@ async fn persist_equipped_skin(
             texture_blob,
             equipped_skin_variant,
             skin.cape_id,
+            CustomMinecraftSkinInsertPosition::Bottom,
             &state.pool,
         )
         .await?;
@@ -762,6 +785,7 @@ async fn persist_equipped_skin(
             texture_key: skin.texture_key.to_string(),
             variant: skin.variant,
             cape_id: skin.cape_id,
+            display_order: 0,
         }
         .remove(profile.id, &state.pool)
         .await?;
@@ -788,6 +812,7 @@ pub async fn remove_custom_skin(skin: Skin) -> crate::Result<()> {
         texture_key: skin.texture_key.to_string(),
         variant: skin.variant,
         cape_id: skin.cape_id,
+        display_order: 0,
     }
     .remove(selected_credentials.offline_profile.id, &state.pool)
     .await?;
@@ -801,6 +826,25 @@ pub async fn remove_custom_skin(skin: Skin) -> crate::Result<()> {
     Ok(())
 }
 
+/// Persists the custom saved skin order for the currently selected Minecraft profile.
+#[tracing::instrument]
+pub async fn set_custom_skin_order(
+    texture_keys: Vec<String>,
+) -> crate::Result<()> {
+    let state = State::get().await?;
+
+    let selected_credentials = Credentials::get_default_credential(&state.pool)
+        .await?
+        .ok_or(ErrorKind::NoCredentialsError)?;
+
+    CustomMinecraftSkin::set_order(
+        selected_credentials.offline_profile.id,
+        &texture_keys,
+        &state.pool,
+    )
+    .await
+}
+
 /// Adds or updates a saved skin locally without applying it to Mojang.
 ///
 /// This is used by the skin editor. If the edited skin is currently equipped, the caller should
@@ -831,12 +875,26 @@ pub async fn save_custom_skin(
         Arc::clone(&skin.texture_key)
     };
     let cape_id = cape.map(|cape| cape.id);
+    let insert_position = if replace_texture && old_texture_key != texture_key {
+        CustomMinecraftSkin::get_by_texture(
+            selected_credentials.offline_profile.id,
+            &old_texture_key,
+            &state.pool,
+        )
+        .await?
+        .map_or(CustomMinecraftSkinInsertPosition::Bottom, |skin| {
+            CustomMinecraftSkinInsertPosition::At(skin.display_order)
+        })
+    } else {
+        CustomMinecraftSkinInsertPosition::Bottom
+    };
 
     if cape_id.is_none() && is_bundled_skin(&texture_key, variant) {
         CustomMinecraftSkin {
             texture_key: texture_key.to_string(),
             variant,
             cape_id: None,
+            display_order: 0,
         }
         .remove(selected_credentials.offline_profile.id, &state.pool)
         .await?;
@@ -847,6 +905,7 @@ pub async fn save_custom_skin(
             &texture_blob,
             variant,
             cape_id,
+            insert_position,
             &state.pool,
         )
         .await?;
@@ -857,6 +916,7 @@ pub async fn save_custom_skin(
             texture_key: old_texture_key.to_string(),
             variant: skin.variant,
             cape_id: skin.cape_id,
+            display_order: 0,
         }
         .remove(selected_credentials.offline_profile.id, &state.pool)
         .await?;
@@ -1202,6 +1262,7 @@ async fn preserve_current_profile_skin(
             &texture,
             current_skin.variant,
             current_cape_id,
+            CustomMinecraftSkinInsertPosition::Bottom,
             &state.pool,
         )
         .await?;
@@ -1223,6 +1284,7 @@ async fn preserve_current_profile_skin(
         &texture,
         current_skin.variant,
         current_cape_id,
+        CustomMinecraftSkinInsertPosition::Bottom,
         &state.pool,
     )
     .await?;
diff --git a/packages/app-lib/src/state/minecraft_skins/mod.rs b/packages/app-lib/src/state/minecraft_skins/mod.rs
index 80a9bbe9dc..4c869a6c0a 100644
--- a/packages/app-lib/src/state/minecraft_skins/mod.rs
+++ b/packages/app-lib/src/state/minecraft_skins/mod.rs
@@ -1,3 +1,5 @@
+use std::collections::HashSet;
+
 use futures::{Stream, StreamExt, stream};
 use uuid::{Uuid, fmt::Hyphenated};
 
@@ -22,12 +24,22 @@ pub struct CustomMinecraftSkin {
     ///
     /// If `None`, the skin is saved without a cape.
     pub cape_id: Option<Uuid>,
+    /// The saved skin display order within this player's saved skins.
+    pub display_order: i64,
+}
+
+#[derive(Debug, Clone, Copy)]
+pub enum CustomMinecraftSkinInsertPosition {
+    Top,
+    Bottom,
+    At(i64),
 }
 
 struct CustomMinecraftSkinRow {
     texture_key: String,
     variant: MinecraftSkinVariant,
     cape_id: Option<Hyphenated>,
+    display_order: i64,
 }
 
 impl CustomMinecraftSkin {
@@ -37,6 +49,7 @@ impl CustomMinecraftSkin {
         texture: &[u8],
         variant: MinecraftSkinVariant,
         cape_id: Option<Uuid>,
+        insert_position: CustomMinecraftSkinInsertPosition,
         db: impl sqlx::Acquire<'_, Database = sqlx::Sqlite>,
     ) -> crate::Result<()> {
         let minecraft_user_id = minecraft_user_id.as_hyphenated();
@@ -44,6 +57,51 @@ impl CustomMinecraftSkin {
 
         let mut transaction = db.begin().await?;
 
+        let existing_order = sqlx::query_scalar!(
+            "SELECT display_order FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? AND texture_key = ?",
+            minecraft_user_id,
+            texture_key
+        )
+        .fetch_optional(&mut *transaction)
+        .await?;
+
+        let display_order = match existing_order {
+            Some(display_order) => display_order,
+            None => match insert_position {
+                CustomMinecraftSkinInsertPosition::Top => {
+                    sqlx::query!(
+                        "UPDATE custom_minecraft_skins SET display_order = display_order + 1 WHERE minecraft_user_uuid = ?",
+                        minecraft_user_id
+                    )
+                    .execute(&mut *transaction)
+                    .await?;
+
+                    0
+                }
+                CustomMinecraftSkinInsertPosition::Bottom => {
+                    sqlx::query_scalar!(
+                        "SELECT COALESCE(MAX(display_order) + 1, 0) AS 'display_order!: i64' \
+                        FROM custom_minecraft_skins WHERE minecraft_user_uuid = ?",
+                        minecraft_user_id
+                    )
+                    .fetch_one(&mut *transaction)
+                    .await?
+                }
+                CustomMinecraftSkinInsertPosition::At(display_order) => {
+                    sqlx::query!(
+                        "UPDATE custom_minecraft_skins SET display_order = display_order + 1 \
+                        WHERE minecraft_user_uuid = ? AND display_order >= ?",
+                        minecraft_user_id,
+                        display_order
+                    )
+                    .execute(&mut *transaction)
+                    .await?;
+
+                    display_order
+                }
+            },
+        };
+
         sqlx::query!(
             "DELETE FROM custom_minecraft_skins WHERE minecraft_user_uuid = ? AND texture_key = ?",
             minecraft_user_id,
@@ -57,11 +115,11 @@ impl CustomMinecraftSkin {
 			texture_key, texture
 		)
 		.execute(&mut *transaction)
-		.await?;
+        .await?;
 
         sqlx::query!(
-			"INSERT OR REPLACE INTO custom_minecraft_skins (minecraft_user_uuid, texture_key, variant, cape_id) VALUES (?, ?, ?, ?)",
-			minecraft_user_id, texture_key, variant, cape_id
+			"INSERT INTO custom_minecraft_skins (minecraft_user_uuid, texture_key, variant, cape_id, display_order) VALUES (?, ?, ?, ?, ?)",
+			minecraft_user_id, texture_key, variant, cape_id, display_order
 		)
 		.execute(&mut *transaction)
 		.await?;
@@ -80,7 +138,7 @@ impl CustomMinecraftSkin {
 
         sqlx::query_as!(
             CustomMinecraftSkinRow,
-            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated' \
+            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated', display_order \
             FROM custom_minecraft_skins \
             WHERE minecraft_user_uuid = ? AND texture_key = ?",
             minecraft_user_id,
@@ -93,6 +151,7 @@ impl CustomMinecraftSkin {
                 texture_key: row.texture_key,
                 variant: row.variant,
                 cape_id: row.cape_id.map(Uuid::from),
+                display_order: row.display_order,
             })
         })
         .transpose()
@@ -107,10 +166,10 @@ impl CustomMinecraftSkin {
         let minecraft_user_id = minecraft_user_id.as_hyphenated();
 
         Ok(stream::iter(sqlx::query!(
-            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated' \
+            "SELECT texture_key, variant AS 'variant: MinecraftSkinVariant', cape_id AS 'cape_id: Hyphenated', display_order \
             FROM custom_minecraft_skins \
             WHERE minecraft_user_uuid = ? \
-            ORDER BY rowid ASC \
+            ORDER BY display_order ASC, rowid ASC \
             LIMIT ? OFFSET ?",
             minecraft_user_id, count, offset
         )
@@ -120,6 +179,7 @@ impl CustomMinecraftSkin {
             texture_key: row.texture_key,
             variant: row.variant,
             cape_id: row.cape_id.map(Uuid::from),
+            display_order: row.display_order,
         }))
     }
 
@@ -161,4 +221,62 @@ impl CustomMinecraftSkin {
 
         Ok(())
     }
+
+    pub async fn set_order(
+        minecraft_user_id: Uuid,
+        texture_keys: &[String],
+        db: impl sqlx::Acquire<'_, Database = sqlx::Sqlite>,
+    ) -> crate::Result<()> {
+        let minecraft_user_id = minecraft_user_id.as_hyphenated();
+        let mut transaction = db.begin().await?;
+
+        let existing_rows = sqlx::query!(
+            "SELECT texture_key FROM custom_minecraft_skins \
+            WHERE minecraft_user_uuid = ? \
+            ORDER BY display_order ASC, rowid ASC",
+            minecraft_user_id
+        )
+        .fetch_all(&mut *transaction)
+        .await?;
+
+        let existing_keys = existing_rows
+            .iter()
+            .map(|row| row.texture_key.as_str())
+            .collect::<HashSet<_>>();
+        let mut seen_keys = HashSet::new();
+        let mut ordered_keys = Vec::with_capacity(existing_rows.len());
+
+        for texture_key in texture_keys {
+            if seen_keys.insert(texture_key.as_str())
+                && existing_keys.contains(texture_key.as_str())
+            {
+                ordered_keys.push(texture_key.as_str());
+            }
+        }
+
+        for row in &existing_rows {
+            if seen_keys.insert(row.texture_key.as_str()) {
+                ordered_keys.push(row.texture_key.as_str());
+            }
+        }
+
+        for (display_order, texture_key) in ordered_keys.into_iter().enumerate()
+        {
+            let display_order = display_order as i64;
+
+            sqlx::query!(
+                "UPDATE custom_minecraft_skins SET display_order = ? \
+                WHERE minecraft_user_uuid = ? AND texture_key = ?",
+                display_order,
+                minecraft_user_id,
+                texture_key
+            )
+            .execute(&mut *transaction)
+            .await?;
+        }
+
+        transaction.commit().await?;
+
+        Ok(())
+    }
 }
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 6f8549ccb5..b10dea6023 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -135,6 +135,7 @@ import _GitGraphIcon from './icons/git-graph.svg?component'
 import _GlassesIcon from './icons/glasses.svg?component'
 import _GlobeIcon from './icons/globe.svg?component'
 import _GridIcon from './icons/grid.svg?component'
+import _GripVerticalIcon from './icons/grip-vertical.svg?component'
 import _HamburgerIcon from './icons/hamburger.svg?component'
 import _HammerIcon from './icons/hammer.svg?component'
 import _HandHelpingIcon from './icons/hand-helping.svg?component'
@@ -555,6 +556,7 @@ export const GitGraphIcon = _GitGraphIcon
 export const GlassesIcon = _GlassesIcon
 export const GlobeIcon = _GlobeIcon
 export const GridIcon = _GridIcon
+export const GripVerticalIcon = _GripVerticalIcon
 export const HamburgerIcon = _HamburgerIcon
 export const HammerIcon = _HammerIcon
 export const HandHelpingIcon = _HandHelpingIcon
@@ -845,140 +847,141 @@ export const XCircleIcon = _XCircleIcon
 export const ZoomInIcon = _ZoomInIcon
 export const ZoomOutIcon = _ZoomOutIcon
 
+
 export const categoryIconMap: Record<string, IconComponent> = {
-	adventure: TagCategoryAdventureIcon,
-	atmosphere: TagCategoryAtmosphereIcon,
-	audio: TagCategoryAudioIcon,
-	backpack: TagCategoryBackpackIcon,
-	badge: TagCategoryBadgeIcon,
+	'adventure': TagCategoryAdventureIcon,
+	'atmosphere': TagCategoryAtmosphereIcon,
+	'audio': TagCategoryAudioIcon,
+	'backpack': TagCategoryBackpackIcon,
+	'badge': TagCategoryBadgeIcon,
 	'badge-check': TagCategoryBadgeCheckIcon,
 	'bed-double': TagCategoryBedDoubleIcon,
-	blocks: TagCategoryBlocksIcon,
-	bloom: TagCategoryBloomIcon,
+	'blocks': TagCategoryBlocksIcon,
+	'bloom': TagCategoryBloomIcon,
 	'building-2': TagCategoryBuilding2Icon,
-	camera: TagCategoryCameraIcon,
-	cartoon: TagCategoryCartoonIcon,
-	castle: TagCategoryCastleIcon,
-	challenging: TagCategoryChallengingIcon,
-	clapperboard: TagCategoryClapperboardIcon,
-	cloud: TagCategoryCloudIcon,
+	'camera': TagCategoryCameraIcon,
+	'cartoon': TagCategoryCartoonIcon,
+	'castle': TagCategoryCastleIcon,
+	'challenging': TagCategoryChallengingIcon,
+	'clapperboard': TagCategoryClapperboardIcon,
+	'cloud': TagCategoryCloudIcon,
 	'colored-lighting': TagCategoryColoredLightingIcon,
-	combat: TagCategoryCombatIcon,
-	compass: TagCategoryCompassIcon,
+	'combat': TagCategoryCombatIcon,
+	'compass': TagCategoryCompassIcon,
 	'core-shaders': TagCategoryCoreShadersIcon,
-	crown: TagCategoryCrownIcon,
-	cursed: TagCategoryCursedIcon,
-	decoration: TagCategoryDecorationIcon,
-	dices: TagCategoryDicesIcon,
-	economy: TagCategoryEconomyIcon,
-	entities: TagCategoryEntitiesIcon,
-	environment: TagCategoryEnvironmentIcon,
-	equipment: TagCategoryEquipmentIcon,
-	fantasy: TagCategoryFantasyIcon,
-	film: TagCategoryFilmIcon,
-	flag: TagCategoryFlagIcon,
-	foliage: TagCategoryFoliageIcon,
-	fonts: TagCategoryFontsIcon,
-	food: TagCategoryFoodIcon,
-	footprints: TagCategoryFootprintsIcon,
+	'crown': TagCategoryCrownIcon,
+	'cursed': TagCategoryCursedIcon,
+	'decoration': TagCategoryDecorationIcon,
+	'dices': TagCategoryDicesIcon,
+	'economy': TagCategoryEconomyIcon,
+	'entities': TagCategoryEntitiesIcon,
+	'environment': TagCategoryEnvironmentIcon,
+	'equipment': TagCategoryEquipmentIcon,
+	'fantasy': TagCategoryFantasyIcon,
+	'film': TagCategoryFilmIcon,
+	'flag': TagCategoryFlagIcon,
+	'foliage': TagCategoryFoliageIcon,
+	'fonts': TagCategoryFontsIcon,
+	'food': TagCategoryFoodIcon,
+	'footprints': TagCategoryFootprintsIcon,
 	'game-mechanics': TagCategoryGameMechanicsIcon,
 	'gamepad-2': TagCategoryGamepad2Icon,
-	gauge: TagCategoryGaugeIcon,
-	globe: TagCategoryGlobeIcon,
+	'gauge': TagCategoryGaugeIcon,
+	'globe': TagCategoryGlobeIcon,
 	'grid-3x3': TagCategoryGrid3x3Icon,
-	gui: TagCategoryGuiIcon,
-	handshake: TagCategoryHandshakeIcon,
+	'gui': TagCategoryGuiIcon,
+	'handshake': TagCategoryHandshakeIcon,
 	'heart-crack': TagCategoryHeartCrackIcon,
 	'heart-pulse': TagCategoryHeartPulseIcon,
-	high: TagCategoryHighIcon,
-	house: TagCategoryHouseIcon,
-	items: TagCategoryItemsIcon,
+	'high': TagCategoryHighIcon,
+	'house': TagCategoryHouseIcon,
+	'items': TagCategoryItemsIcon,
 	'kitchen-sink': TagCategoryKitchenSinkIcon,
-	library: TagCategoryLibraryIcon,
-	lightweight: TagCategoryLightweightIcon,
-	locale: TagCategoryLocaleIcon,
-	lock: TagCategoryLockIcon,
-	low: TagCategoryLowIcon,
-	magic: TagCategoryMagicIcon,
-	management: TagCategoryManagementIcon,
+	'library': TagCategoryLibraryIcon,
+	'lightweight': TagCategoryLightweightIcon,
+	'locale': TagCategoryLocaleIcon,
+	'lock': TagCategoryLockIcon,
+	'low': TagCategoryLowIcon,
+	'magic': TagCategoryMagicIcon,
+	'management': TagCategoryManagementIcon,
 	'map-pinned': TagCategoryMapPinnedIcon,
-	medium: TagCategoryMediumIcon,
-	minigame: TagCategoryMinigameIcon,
-	mobs: TagCategoryMobsIcon,
-	modded: TagCategoryModdedIcon,
-	models: TagCategoryModelsIcon,
-	multiplayer: TagCategoryMultiplayerIcon,
-	network: TagCategoryNetworkIcon,
-	optimization: TagCategoryOptimizationIcon,
-	palette: TagCategoryPaletteIcon,
+	'medium': TagCategoryMediumIcon,
+	'minigame': TagCategoryMinigameIcon,
+	'mobs': TagCategoryMobsIcon,
+	'modded': TagCategoryModdedIcon,
+	'models': TagCategoryModelsIcon,
+	'multiplayer': TagCategoryMultiplayerIcon,
+	'network': TagCategoryNetworkIcon,
+	'optimization': TagCategoryOptimizationIcon,
+	'palette': TagCategoryPaletteIcon,
 	'path-tracing': TagCategoryPathTracingIcon,
 	'paw-print': TagCategoryPawPrintIcon,
-	pbr: TagCategoryPbrIcon,
-	pickaxe: TagCategoryPickaxeIcon,
-	potato: TagCategoryPotatoIcon,
-	quests: TagCategoryQuestsIcon,
-	realistic: TagCategoryRealisticIcon,
-	reflections: TagCategoryReflectionsIcon,
+	'pbr': TagCategoryPbrIcon,
+	'pickaxe': TagCategoryPickaxeIcon,
+	'potato': TagCategoryPotatoIcon,
+	'quests': TagCategoryQuestsIcon,
+	'realistic': TagCategoryRealisticIcon,
+	'reflections': TagCategoryReflectionsIcon,
 	'refresh-ccw': TagCategoryRefreshCcwIcon,
-	screenshot: TagCategoryScreenshotIcon,
+	'screenshot': TagCategoryScreenshotIcon,
 	'scroll-text': TagCategoryScrollTextIcon,
 	'semi-realistic': TagCategorySemiRealisticIcon,
-	shadows: TagCategoryShadowsIcon,
-	shield: TagCategoryShieldIcon,
-	simplistic: TagCategorySimplisticIcon,
-	skull: TagCategorySkullIcon,
-	social: TagCategorySocialIcon,
-	square: TagCategorySquareIcon,
-	storage: TagCategoryStorageIcon,
-	sword: TagCategorySwordIcon,
-	swords: TagCategorySwordsIcon,
-	target: TagCategoryTargetIcon,
-	technology: TagCategoryTechnologyIcon,
-	terminal: TagCategoryTerminalIcon,
-	theater: TagCategoryTheaterIcon,
-	themed: TagCategoryThemedIcon,
-	transportation: TagCategoryTransportationIcon,
+	'shadows': TagCategoryShadowsIcon,
+	'shield': TagCategoryShieldIcon,
+	'simplistic': TagCategorySimplisticIcon,
+	'skull': TagCategorySkullIcon,
+	'social': TagCategorySocialIcon,
+	'square': TagCategorySquareIcon,
+	'storage': TagCategoryStorageIcon,
+	'sword': TagCategorySwordIcon,
+	'swords': TagCategorySwordsIcon,
+	'target': TagCategoryTargetIcon,
+	'technology': TagCategoryTechnologyIcon,
+	'terminal': TagCategoryTerminalIcon,
+	'theater': TagCategoryTheaterIcon,
+	'themed': TagCategoryThemedIcon,
+	'transportation': TagCategoryTransportationIcon,
 	'tree-pine': TagCategoryTreePineIcon,
-	trophy: TagCategoryTrophyIcon,
-	tweaks: TagCategoryTweaksIcon,
-	users: TagCategoryUsersIcon,
-	utility: TagCategoryUtilityIcon,
+	'trophy': TagCategoryTrophyIcon,
+	'tweaks': TagCategoryTweaksIcon,
+	'users': TagCategoryUsersIcon,
+	'utility': TagCategoryUtilityIcon,
 	'vanilla-like': TagCategoryVanillaLikeIcon,
 	'wand-sparkles': TagCategoryWandSparklesIcon,
 	'wifi-off': TagCategoryWifiOffIcon,
-	worldgen: TagCategoryWorldgenIcon,
-	zap: TagCategoryZapIcon,
+	'worldgen': TagCategoryWorldgenIcon,
+	'zap': TagCategoryZapIcon,
 }
 
 export const loaderIconMap: Record<string, IconComponent> = {
-	babric: TagLoaderBabricIcon,
+	'babric': TagLoaderBabricIcon,
 	'bta-babric': TagLoaderBtaBabricIcon,
-	bukkit: TagLoaderBukkitIcon,
-	bungeecord: TagLoaderBungeecordIcon,
-	canvas: TagLoaderCanvasIcon,
-	datapack: TagLoaderDatapackIcon,
-	fabric: TagLoaderFabricIcon,
-	folia: TagLoaderFoliaIcon,
-	forge: TagLoaderForgeIcon,
-	geyser: TagLoaderGeyserIcon,
-	iris: TagLoaderIrisIcon,
+	'bukkit': TagLoaderBukkitIcon,
+	'bungeecord': TagLoaderBungeecordIcon,
+	'canvas': TagLoaderCanvasIcon,
+	'datapack': TagLoaderDatapackIcon,
+	'fabric': TagLoaderFabricIcon,
+	'folia': TagLoaderFoliaIcon,
+	'forge': TagLoaderForgeIcon,
+	'geyser': TagLoaderGeyserIcon,
+	'iris': TagLoaderIrisIcon,
 	'java-agent': TagLoaderJavaAgentIcon,
 	'legacy-fabric': TagLoaderLegacyFabricIcon,
-	liteloader: TagLoaderLiteloaderIcon,
-	minecraft: TagLoaderMinecraftIcon,
-	modloader: TagLoaderModloaderIcon,
-	mrpack: TagLoaderMrpackIcon,
-	neoforge: TagLoaderNeoforgeIcon,
-	nilloader: TagLoaderNilloaderIcon,
-	optifine: TagLoaderOptifineIcon,
-	ornithe: TagLoaderOrnitheIcon,
-	paper: TagLoaderPaperIcon,
-	purpur: TagLoaderPurpurIcon,
-	quilt: TagLoaderQuiltIcon,
-	rift: TagLoaderRiftIcon,
-	spigot: TagLoaderSpigotIcon,
-	sponge: TagLoaderSpongeIcon,
-	vanilla: TagLoaderVanillaIcon,
-	velocity: TagLoaderVelocityIcon,
-	waterfall: TagLoaderWaterfallIcon,
+	'liteloader': TagLoaderLiteloaderIcon,
+	'minecraft': TagLoaderMinecraftIcon,
+	'modloader': TagLoaderModloaderIcon,
+	'mrpack': TagLoaderMrpackIcon,
+	'neoforge': TagLoaderNeoforgeIcon,
+	'nilloader': TagLoaderNilloaderIcon,
+	'optifine': TagLoaderOptifineIcon,
+	'ornithe': TagLoaderOrnitheIcon,
+	'paper': TagLoaderPaperIcon,
+	'purpur': TagLoaderPurpurIcon,
+	'quilt': TagLoaderQuiltIcon,
+	'rift': TagLoaderRiftIcon,
+	'spigot': TagLoaderSpigotIcon,
+	'sponge': TagLoaderSpongeIcon,
+	'vanilla': TagLoaderVanillaIcon,
+	'velocity': TagLoaderVelocityIcon,
+	'waterfall': TagLoaderWaterfallIcon,
 }
diff --git a/packages/assets/icons/grip-vertical.svg b/packages/assets/icons/grip-vertical.svg
new file mode 100644
index 0000000000..3cadd75a15
--- /dev/null
+++ b/packages/assets/icons/grip-vertical.svg
@@ -0,0 +1,20 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-grip-vertical"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="9" cy="12" r="1" />
+  <circle cx="9" cy="5" r="1" />
+  <circle cx="9" cy="19" r="1" />
+  <circle cx="15" cy="12" r="1" />
+  <circle cx="15" cy="5" r="1" />
+  <circle cx="15" cy="19" r="1" />
+</svg>
diff --git a/packages/ui/src/components/skin/SkinButton.vue b/packages/ui/src/components/skin/SkinButton.vue
index 0ab42911d2..ec2aa7f1ed 100644
--- a/packages/ui/src/components/skin/SkinButton.vue
+++ b/packages/ui/src/components/skin/SkinButton.vue
@@ -13,12 +13,14 @@ const props = withDefaults(
 		selected: boolean
 		active?: boolean
 		tooltip?: string
+		selectable?: boolean
 	}>(),
 	{
 		forwardImageSrc: undefined,
 		backwardImageSrc: undefined,
 		active: false,
 		tooltip: undefined,
+		selectable: true,
 	},
 )
 
@@ -55,7 +57,15 @@ watch(
 			{ 'skin-button--with-actions': $slots['overlay-buttons'] },
 		]"
 	>
+		<span
+			v-if="$slots['top-buttons']"
+			class="pointer-events-none absolute right-3 top-3 z-30 flex items-center gap-1"
+		>
+			<slot name="top-buttons" />
+		</span>
+
 		<button
+			v-if="selectable"
 			class="absolute inset-0 z-10 cursor-pointer border-none bg-transparent p-0 focus-visible:outline-none"
 			:aria-label="tooltip ? `Select ${tooltip}` : 'Select skin'"
 			:aria-pressed="selected"
@@ -63,7 +73,7 @@ watch(
 		></button>
 
 		<span
-			v-if="active && !selected"
+			v-if="active && !selected && !$slots['top-buttons']"
 			class="pointer-events-none absolute right-3 top-3 z-20 size-3 rounded-full border-2 border-solid border-surface-3 bg-green"
 		></span>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 65d8a252d1..e5551e7046 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,6 +170,9 @@ importers:
       vue-virtual-scroller:
         specifier: v2.0.0-beta.8
         version: 2.0.0-beta.8(vue@3.5.27(typescript@5.9.3))
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.5.27(typescript@5.9.3))
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
@@ -8799,6 +8802,9 @@ packages:
     resolution: {integrity: sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw==}
     engines: {node: '>= 18'}
 
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -9798,8 +9804,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-component-type-helpers@3.3.2:
-    resolution: {integrity: sha512-l4Z2Y34m7nFMlx8vrslJaVtXxUpzgDMSESC7TakG/c5kwjYT/do+E0NcT2/vWDzaoIhsShg/2OKwX7Q4nbzC0g==}
+  vue-component-type-helpers@3.3.3:
+    resolution: {integrity: sha512-x4nsFpy5Pe8fqPzp/5vkTPeTTDBpAx4WVtV47Ejt0+2FQrq4pRRsJs7JmYRqMFzTu/LW+pCWEjQ3YVCkPV7f9g==}
 
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
@@ -9906,6 +9912,11 @@ packages:
       typescript:
         optional: true
 
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -13232,7 +13243,7 @@ snapshots:
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.27(typescript@5.9.3)
-      vue-component-type-helpers: 3.3.2
+      vue-component-type-helpers: 3.3.3
 
   '@stripe/stripe-js@7.9.0': {}
 
@@ -19299,6 +19310,8 @@ snapshots:
 
   smol-toml@1.6.0: {}
 
+  sortablejs@1.14.0: {}
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -20279,7 +20292,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-component-type-helpers@3.3.2: {}
+  vue-component-type-helpers@3.3.3: {}
 
   vue-confetti-explosion@1.0.2(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -20415,6 +20428,11 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  vuedraggable@4.1.0(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.5.27(typescript@5.9.3)
+
   w3c-keyname@2.2.8: {}
 
   web-namespaces@2.0.1: {}