diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index 3d4b42679..ee6b6df2f 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -1,226 +1,56 @@
-<script setup lang="ts">
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import {
-  Card,
-  Chips,
-  FileInput,
-  SkinPreviewRenderer,
-  CapeButton,
-  CapeLikeTextButton,
-  Button, RadioButtons, ButtonStyled
-} from '@modrinth/ui'
-import {
-  add_and_equip_custom_skin,
-  type Cape,
-  determineModelType,
-  equip_skin, remove_custom_skin,
-  type Skin,
-  type SkinModel
-} from '@/helpers/skins.ts'
-import {handleError} from '@/store/notifications'
-import {computed, ref, useTemplateRef, watch} from 'vue'
-import {CheckCircleIcon, InfoIcon, UploadIcon, ChevronRightIcon, CheckIcon, SaveIcon, XIcon, TrashIcon } from "@modrinth/assets";
-
-const modal = useTemplateRef('modal')
-const mode = ref<'new' | 'edit'>('new')
-const currentSkin = ref<Skin | null>(null)
-const textureBlob = ref<Uint8Array | null>(null)
-const variant = ref<SkinModel>('CLASSIC')
-const selectedCape = ref<Cape | undefined>(undefined)
-const tempSkinUrl = ref<string>('/src/assets/skins/steve.png')
-
-const props = defineProps<{ capes?: Cape[] }>()
-const firstThreeCapes = computed(() => props.capes?.slice(0, 3) ?? [])
-
-const localPreviewUrl = ref<string | null>(null)
-const fileName = ref<string | null>(null)
-
-watch(textureBlob, async (blob, prev) => {
-  if (prev && localPreviewUrl.value) URL.revokeObjectURL(localPreviewUrl.value)
-  localPreviewUrl.value = blob ? URL.createObjectURL(new Blob([blob])) : null
-
-  if (blob && variant.value === 'UNKNOWN' && localPreviewUrl.value) {
-    try {
-      variant.value = await determineModelType(localPreviewUrl.value)
-    } catch (err) {
-      handleError(err)
-    }
-  }
-})
-
-const previewSkin = computed(() => {
-  if (localPreviewUrl.value) return localPreviewUrl.value
-  if (currentSkin.value) return currentSkin.value.texture
-  if (mode.value === 'new') return tempSkinUrl.value
-  return ''
-})
-
-const emit = defineEmits<{
-  (e: 'saved', editedSkin: Skin | null, oldSkin: Skin): void
-  (e: 'deleted', deletedSkin: Skin): void
-}>()
-
-const disableSave = computed(() => mode.value === 'new' && !textureBlob.value)
-
-function resetState() {
-  mode.value = 'new'
-  currentSkin.value = null
-  textureBlob.value = null
-  fileName.value = null
-
-  if (localPreviewUrl.value) {
-    URL.revokeObjectURL(localPreviewUrl.value)
-    localPreviewUrl.value = null
-  }
-
-  variant.value = 'CLASSIC'
-  selectedCape.value = undefined
-}
-
-function show(e: MouseEvent, skin?: Skin) {
-  mode.value = skin ? 'edit' : 'new'
-  currentSkin.value = skin ?? null
-  textureBlob.value = null
-
-  if (!skin) {
-    tempSkinUrl.value = Math.random() <= 0.05
-      ? '/src/assets/skins/herobrine.png'
-      : '/src/assets/skins/steve.png'
-  }
-
-  variant.value = skin?.variant ?? 'CLASSIC'
-  selectedCape.value = skin?.cape_id ? props.capes?.find(c => c.id === skin.cape_id) : undefined
-  modal.value?.show(e)
-}
-
-function hide() {
-  modal.value?.hide()
-  setTimeout(resetState, 100);
-}
-
-async function onTextureSelected(files: FileList | null) {
-  if (!files?.length) return
-  const file = files[0]
-  const buf = await file.arrayBuffer()
-  textureBlob.value = new Uint8Array(buf)
-  fileName.value = file.name
-}
-
-function changeVariant(newVariant: SkinModel) {
-  variant.value = newVariant
-}
-
-function selectCape(cape: Cape | undefined) {
-  selectedCape.value = cape
-}
-
-function viewMoreCapes(e: MouseEvent) {
-  // TODO: later
-}
-
-async function handleDelete() {
-  try {
-    await remove_custom_skin(currentSkin.value!)
-    emit('deleted', currentSkin.value!)
-    hide();
-  } catch (err) {
-    handleError(err);
-  }
-}
-
-async function save() {
-  try {
-    let edited: Skin | null = null;
-    if (mode.value === 'new') {
-      if (!textureBlob.value) throw new Error('Please upload a skin texture first.')
-      await add_and_equip_custom_skin(textureBlob.value, variant.value, selectedCape.value)
-    } else if (currentSkin.value) {
-      edited = {
-        ...currentSkin.value,
-        variant: variant.value,
-        cape_id: selectedCape.value?.id,
-        is_equipped: true
-      }
-      if (textureBlob.value) {
-        await add_and_equip_custom_skin(textureBlob.value, variant.value, selectedCape.value)
-      } else {
-        await equip_skin(edited);
-      }
-    }
-    emit('saved', edited, currentSkin.value!)
-    hide()
-  } catch (err) {
-    handleError(err)
-  }
-}
-
-defineExpose({
-  show,
-  hide,
-  save,
-  onTextureSelected,
-  changeVariant,
-  selectCape,
-  viewMoreCapes,
-})
-</script>
-
 <template>
   <ModalWrapper ref="modal" @on-modal-hide="resetState">
     <template #title>
-      <span class="text-lg font-extrabold text-contrast">{{
-          mode === 'edit' ? 'Edit skin' : 'New skin'
-        }}</span>
+      <span class="text-lg font-extrabold text-contrast">
+        {{ mode === 'edit' ? 'Edit skin' : 'New skin' }}
+      </span>
     </template>
+
     <div class="flex flex-col md:flex-row gap-6">
       <div class="max-h-[25rem] w-[16rem] min-w-[16rem] overflow-hidden relative">
-        <!-- Blame Three.js for forcing 1:1 canvas ratios... -->
-        <div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] min-w-[16rem] flex-shrink-0 p-0 m-0">
+        <div class="absolute top-[-4rem] left-0 h-[32rem] w-[16rem] flex-shrink-0">
           <SkinPreviewRenderer
             slim-model-src="/src/assets/models/slim_player.gltf"
             wide-model-src="/src/assets/models/classic_player.gltf"
             :variant="variant"
             :texture-src="previewSkin"
-            :scale="1.4"
-            :fov="50"
+            :scale="1.4" :fov="50"
             class="h-full w-full"
           />
         </div>
       </div>
 
-      <div class="min-h-[16rem] flex flex-col gap-4 w-full">
+      <div class="flex flex-col gap-4 w-full">
         <section>
           <h2 class="text-base font-semibold mb-2">Texture</h2>
-          <Card class="!bg-bg p-4 relative flex flex-col items-center gap-4">
+          <Card class="!bg-bg p-4 flex flex-col items-center gap-4">
             <FileInput
               :max-size="8000"
               accept="image/png"
-              :prompt="mode === 'edit'? 'Replace skin' : 'Upload a skin'"
+              :prompt="mode === 'edit' ? 'Replace skin' : 'Upload a skin'"
               class="btn btn-primary"
-              :aria-label="mode === 'edit'? 'Replace skin' : 'Upload a skin'"
               @change="onTextureSelected"
             >
               <UploadIcon aria-hidden="true" />
             </FileInput>
-              <div class="flex items-center gap-2 mx-auto" v-if="fileName || mode === 'new'">
-                  <InfoIcon v-if="!fileName" aria-hidden="true" class="text-brand-blue" />
-                  <CheckCircleIcon v-else aria-hidden="true" class="text-brand-green" />
-                    <small class="max-w-64 truncate block" v-tooltip="fileName ?? undefined">
-                      {{ fileName || 'No skin has been uploaded yet.' }}
-                    </small>
-              </div>
+
+            <div class="flex items-center gap-2" v-if="fileName || mode === 'new'">
+              <InfoIcon v-if="!fileName" class="text-brand-blue" />
+              <CheckCircleIcon v-else class="text-brand-green" />
+              <small class="truncate" v-tooltip="fileName">{{ fileName || 'No skin uploaded yet.' }}</small>
+            </div>
           </Card>
         </section>
+
         <section>
           <h2 class="text-base font-semibold mb-2">Arm style</h2>
-          <RadioButtons
-            v-model="variant"
-            :items="['CLASSIC', 'SLIM']">
+          <RadioButtons v-model="variant" :items="['CLASSIC','SLIM']">
             <template #default="{ item }">
               {{ item === 'CLASSIC' ? 'Wide' : 'Slim' }}
             </template>
           </RadioButtons>
         </section>
+
         <section>
           <h2 class="text-base font-semibold mb-2">Cape</h2>
           <div class="flex gap-2">
@@ -233,34 +63,173 @@ defineExpose({
               :selected="selectedCape?.id === cape.id"
               @select="selectCape(cape)"
             />
-            <CapeLikeTextButton tooltip="View more capes" v-if="(capes?.length || 0) > 3">
-              <template #icon>
-                <ChevronRightIcon />
-              </template>
+            <CapeLikeTextButton v-if="capes?.length ?? 0 > 3" tooltip="View more capes" @click="viewMoreCapes">
+              <template #icon><ChevronRightIcon/></template>
               <span>More</span>
             </CapeLikeTextButton>
           </div>
         </section>
       </div>
     </div>
-    <div class="flex flex-row gap-2 mt-6">
+
+    <div class="flex gap-2 mt-6">
       <ButtonStyled color="brand" :disabled="disableSave">
-        <Button @click="save" v-tooltip="disableSave && 'You need to upload a skin first!'" :disabled="disableSave">
-          <CheckIcon v-if="mode === 'new'"/>
-          <SaveIcon v-else />
-          {{ (mode === 'edit' ? 'Save skin' : 'Add skin') }}
+        <Button @click="save" :disabled="disableSave" v-tooltip="disableSave && 'Upload a skin first!'">
+          <CheckIcon v-if="mode === 'new'" /><SaveIcon v-else />
+          {{ mode === 'new' ? 'Add skin' : 'Save skin' }}
         </Button>
       </ButtonStyled>
-      <Button @click="hide">
-        <XIcon />
-        Cancel
-      </Button>
-      <ButtonStyled color="red" v-if="mode === 'edit'">
-        <Button @click="handleDelete">
-          <TrashIcon />
-          Delete
-        </Button>
+      <Button @click="hide"><XIcon/>Cancel</Button>
+      <ButtonStyled color="red" v-if="mode==='edit'">
+        <Button @click="handleDelete"><TrashIcon/>Delete</Button>
       </ButtonStyled>
     </div>
   </ModalWrapper>
 </template>
+
+<script setup lang="ts">
+import { ref, computed, watch, useTemplateRef } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import {
+  Card, FileInput, SkinPreviewRenderer,
+  Button, RadioButtons, CapeButton, CapeLikeTextButton, ButtonStyled
+} from '@modrinth/ui'
+import {
+  add_and_equip_custom_skin,
+  remove_custom_skin,
+  equip_skin,
+  unequip_skin,
+  get_available_skins,
+  type Skin, type Cape, type SkinModel
+} from '@/helpers/skins.ts'
+import { handleError } from '@/store/notifications'
+import {
+  CheckCircleIcon, InfoIcon, UploadIcon,
+  CheckIcon, SaveIcon, XIcon, TrashIcon, ChevronRightIcon
+} from '@modrinth/assets'
+
+const modal = useTemplateRef('modal')
+const mode = ref<'new'|'edit'>('new')
+const currentSkin = ref<Skin|null>(null)
+
+const fileUploadTextureBlob = ref<Uint8Array|null>(null)
+const fileName = ref<string|null>(null)
+watch(fileUploadTextureBlob, () => {
+  if (fileName.value === null && fileUploadTextureBlob.value) {
+    fileName.value = 'New upload'
+  }
+})
+
+const variant = ref<SkinModel>('CLASSIC')
+const selectedCape = ref<Cape|undefined>(undefined)
+const props = defineProps<{ capes?: Cape[] }>()
+const firstThreeCapes = computed(() => props.capes?.slice(0,3) ?? [])
+
+const localPreviewUrl = ref<string|null>(null)
+watch(fileUploadTextureBlob, (blob, prev) => {
+  if (prev && localPreviewUrl.value) URL.revokeObjectURL(localPreviewUrl.value)
+  if (blob) localPreviewUrl.value = URL.createObjectURL(new Blob([blob]))
+  else localPreviewUrl.value = null
+})
+const previewSkin = computed(() => {
+  if (localPreviewUrl.value) return localPreviewUrl.value
+  if (currentSkin.value) return currentSkin.value.texture
+  return '/src/assets/skins/steve.png'
+})
+
+const disableSave = computed(() =>
+  mode.value==='new' && !fileUploadTextureBlob.value
+)
+
+function resetState() {
+  mode.value = 'new'
+  currentSkin.value = null
+  fileUploadTextureBlob.value = null
+  fileName.value = null
+  variant.value = 'CLASSIC'
+  selectedCape.value = undefined
+  if (localPreviewUrl.value) {
+    URL.revokeObjectURL(localPreviewUrl.value)
+    localPreviewUrl.value = null
+  }
+}
+
+function show(e: MouseEvent, skin?: Skin) {
+  mode.value = skin ? 'edit' : 'new'
+  currentSkin.value = skin ?? null
+  if (skin) {
+    variant.value = skin.variant
+    selectedCape.value = props.capes?.find(c=>c.id===skin.cape_id)
+  } else {
+    variant.value = 'CLASSIC'
+    selectedCape.value = undefined
+  }
+  modal.value?.show(e)
+}
+
+function hide() {
+  modal.value?.hide()
+  setTimeout(resetState, 100)
+}
+
+async function onTextureSelected(files: FileList|null) {
+  if (!files?.length) return
+  const file = files[0]
+  fileName.value = file.name
+  const buf = await file.arrayBuffer()
+  fileUploadTextureBlob.value = new Uint8Array(buf)
+}
+
+function changeVariant(v: SkinModel){ variant.value = v }
+function selectCape(c: Cape|undefined){ selectedCape.value = c }
+function viewMoreCapes(){
+  // TODO: later
+}
+
+async function handleDelete() {
+  try {
+    if (currentSkin.value?.is_equipped) {
+      await unequip_skin()
+    }
+    await remove_custom_skin(currentSkin.value!)
+    emit('deleted', currentSkin.value!)
+    hide()
+  } catch (err) {
+    handleError(err)
+  }
+}
+
+async function save() {
+  try {
+    let blob: Uint8Array
+    if (fileUploadTextureBlob.value) {
+      blob = fileUploadTextureBlob.value
+    } else {
+      const url = currentSkin.value!.texture
+      const resp = await fetch(url)
+      const buf = await resp.arrayBuffer()
+      blob = new Uint8Array(buf)
+    }
+
+    if (mode.value === 'new') {
+      await add_and_equip_custom_skin(blob, variant.value, selectedCape.value)
+      emit('saved')
+    } else {
+      await remove_custom_skin(currentSkin.value!)
+      await add_and_equip_custom_skin(blob, variant.value, selectedCape.value)
+      emit('saved')
+    }
+
+    hide()
+  } catch (err) {
+    handleError(err)
+  }
+}
+
+const emit = defineEmits<{
+  (e:'saved'):void
+  (e:'deleted'):void
+}>()
+
+defineExpose({ show, hide })
+</script>
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index bec88a3f3..db967eaf2 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -52,6 +52,7 @@ async function loadCapes() {
 }
 
 async function loadSkins() {
+  skins.value = [];
   skins.value = (await get_available_skins().catch(handleError)) ?? []
   selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null;
 }
@@ -63,29 +64,6 @@ async function changeSkin(newSkin: Skin) {
   await loadSkins();
 }
 
-async function handleSkinSaved(newSkin: Skin | null, oldSkin: Skin | null) {
-  if (oldSkin) {
-    await remove_custom_skin(oldSkin).catch(handleError)
-  }
-
-  await loadSkins()
-  selectedSkin.value =
-    skins.value.find(s => s.texture_key === newSkin?.texture_key) ??
-    skins.value.find(s => s.is_equipped) ??
-    skins.value[0] ??
-    null
-}
-
-async function handleSkinDeleted(deletedSkin: Skin) {
-  await loadSkins();
-  if (selectedSkin.value?.texture_key === deletedSkin.texture_key) {
-    selectedSkin.value =
-      skins.value.find(s => s.is_equipped) ??
-      skins.value[0] ??
-      null
-  }
-}
-
 async function handleCapeSelected(cape: Cape | undefined) {
   currentCape.value = cape;
   await set_default_cape(currentCape.value).catch(handleError);
@@ -98,8 +76,8 @@ async function handleCapeSelected(cape: Cape | undefined) {
   <EditSkinModal
     ref="editSkinModal"
     :capes="capes"
-    @saved="handleSkinSaved"
-    @deleted="handleSkinDeleted"
+    @saved="() => loadSkins()"
+    @deleted="() => loadSkins()"
   />
   <SelectCapeModal ref="selectCapeModal" :capes="capes" @select="handleCapeSelected"/>
   <div class="p-6 grid grid-cols-[300px_1fr] xl:grid-cols-[3fr_5fr] gap-6">
diff --git a/packages/ui/src/components/skin/SkinPreviewRenderer.vue b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
index acea7401a..2c270dd72 100644
--- a/packages/ui/src/components/skin/SkinPreviewRenderer.vue
+++ b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
@@ -161,7 +161,7 @@ const isDragging = ref(false)
 const previousX = ref(0)
 
 const onPointerDown = (event: PointerEvent) => {
-  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
   isDragging.value = true
   previousX.value = event.clientX
 }
@@ -174,8 +174,8 @@ const onPointerMove = (event: PointerEvent) => {
 }
 
 const onPointerUp = (event: PointerEvent) => {
-  isDragging.value = false
-  ;(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
+  isDragging.value = false;
+  (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
 }
 
 const radialTexture = createRadialTexture(512)
@@ -196,4 +196,5 @@ function createRadialTexture(size: number): THREE.CanvasTexture {
 }
 
 applyTextureToScene(scene.value, texture.value)
+loadModel(selectedModelSrc.value)
 </script>