diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index 8c56741a2..5cb4f6050 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -56,10 +56,7 @@
       <div v-if="displayAccounts.length > 0" class="account-group">
         <div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
           <Button class="option account" @click="setAccount(account)">
-            <Avatar
-              :src="getAccountAvatarUrl(account)"
-              class="icon"
-            />
+            <Avatar :src="getAccountAvatarUrl(account)" class="icon" />
             <p>{{ account.profile.name }}</p>
           </Button>
           <Button v-tooltip="'Log out'" icon-only @click="logout(account.profile.id)">
@@ -78,7 +75,7 @@
 <script setup>
 import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, SpinnerIcon } from '@modrinth/assets'
 import { Avatar, Button, Card } from '@modrinth/ui'
-import {ref, computed, onMounted, onBeforeUnmount, onUnmounted, watch} from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
   users,
   remove_user,
@@ -160,7 +157,10 @@ const avatarUrl = computed(() => {
 })
 
 function getAccountAvatarUrl(account) {
-  if (account.profile.id === selectedAccount.value?.profile?.id && equippedSkin.value?.texture_key) {
+  if (
+    account.profile.id === selectedAccount.value?.profile?.id &&
+    equippedSkin.value?.texture_key
+  ) {
     const cachedUrl = headUrlCache.value.get(equippedSkin.value.texture_key)
     if (cachedUrl) {
       return cachedUrl
diff --git a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
index acb713bfe..9fbda4654 100644
--- a/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/AppearanceSettings.vue
@@ -59,10 +59,7 @@ watch(
   <div class="mt-4 flex items-center justify-between">
     <div>
       <h2 class="m-0 text-lg font-extrabold text-contrast">Hide nametag</h2>
-      <p class="m-0 mt-1">
-        Disables the nametag above your player on the skins page.
-        page.
-      </p>
+      <p class="m-0 mt-1">Disables the nametag above your player on the skins page. page.</p>
     </div>
     <Toggle id="hide-nametag-skins-page" v-model="settings.hide_nametag_skins_page" />
   </div>
diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index eb831da43..92f75d24d 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -108,7 +108,6 @@ import {
   CapeButton,
   CapeLikeTextButton,
   ButtonStyled,
-  NewModal,
 } from '@modrinth/ui'
 import {
   add_and_equip_custom_skin,
@@ -128,8 +127,8 @@ import {
   ChevronRightIcon,
   SpinnerIcon,
 } from '@modrinth/assets'
-import ModalWrapper from "@/components/ui/modal/ModalWrapper.vue";
-import UploadSkinModal from "@/components/ui/skin/UploadSkinModal.vue";
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
 
 const modal = useTemplateRef('modal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
@@ -346,7 +345,7 @@ function restoreModal() {
       const fakeEvent = new MouseEvent('click')
       modal.value?.show(fakeEvent)
       shouldRestoreModal.value = false
-    }, 500);
+    }, 500)
   }
 }
 
@@ -407,6 +406,6 @@ defineExpose({
   restoreWithNewTexture,
   hide,
   shouldRestoreModal,
-  restoreModal
+  restoreModal,
 })
 </script>
diff --git a/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue b/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
index 88464be86..c6c25080e 100644
--- a/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/SelectCapeModal.vue
@@ -9,7 +9,7 @@ import {
   SkinPreviewRenderer,
 } from '@modrinth/ui'
 import { CheckIcon, XIcon } from '@modrinth/assets'
-import ModalWrapper from "@/components/ui/modal/ModalWrapper.vue";
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const modal = useTemplateRef('modal')
 
diff --git a/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue b/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
index 956b1575a..19d6db020 100644
--- a/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/UploadSkinModal.vue
@@ -32,7 +32,7 @@ import { UploadIcon } from '@modrinth/assets'
 import { useNotifications } from '@/store/state'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { readFile } from '@tauri-apps/plugin-fs'
-import ModalWrapper from "@/components/ui/modal/ModalWrapper.vue";
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 
 const notifications = useNotifications()
 
@@ -110,7 +110,7 @@ async function setupDragDropListener() {
         const filePath = event.payload.paths[0]
 
         try {
-          const data = await readFile(filePath);
+          const data = await readFile(filePath)
 
           const fileName = filePath.split('/').pop() || filePath.split('\\').pop() || 'skin.png'
           const fileBlob = new Blob([data], { type: 'image/png' })
@@ -118,7 +118,7 @@ async function setupDragDropListener() {
 
           await processFile(file)
         } catch (error) {
-          console.error(error);
+          console.error(error)
           notifications.addNotification({
             title: 'Error processing file',
             text: 'Failed to read the dropped file.',
diff --git a/apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts b/apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts
index 0557aadeb..75729c5aa 100644
--- a/apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts
+++ b/apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts
@@ -155,101 +155,97 @@ export async function cleanupUnusedPreviews(skins: Skin[]): Promise<void> {
   }
 }
 
-export async function generatePlayerHeadBlob(
-  skinUrl: string,
-  size: number = 64
-): Promise<Blob> {
+export async function generatePlayerHeadBlob(skinUrl: string, size: number = 64): Promise<Blob> {
   return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
 
     img.onload = () => {
       try {
-        const sourceCanvas = document.createElement('canvas');
-        const sourceCtx = sourceCanvas.getContext('2d');
+        const sourceCanvas = document.createElement('canvas')
+        const sourceCtx = sourceCanvas.getContext('2d')
 
         if (!sourceCtx) {
-          throw new Error('Could not get 2D context from source canvas');
+          throw new Error('Could not get 2D context from source canvas')
         }
 
-        sourceCanvas.width = img.width;
-        sourceCanvas.height = img.height;
+        sourceCanvas.width = img.width
+        sourceCanvas.height = img.height
 
-        sourceCtx.drawImage(img, 0, 0);
+        sourceCtx.drawImage(img, 0, 0)
 
-        const outputCanvas = document.createElement('canvas');
-        const outputCtx = outputCanvas.getContext('2d');
+        const outputCanvas = document.createElement('canvas')
+        const outputCtx = outputCanvas.getContext('2d')
 
         if (!outputCtx) {
-          throw new Error('Could not get 2D context from output canvas');
+          throw new Error('Could not get 2D context from output canvas')
         }
 
-        outputCanvas.width = size;
-        outputCanvas.height = size;
+        outputCanvas.width = size
+        outputCanvas.height = size
 
-        outputCtx.imageSmoothingEnabled = false;
+        outputCtx.imageSmoothingEnabled = false
 
-        const headImageData = sourceCtx.getImageData(8, 8, 8, 8);
+        const headImageData = sourceCtx.getImageData(8, 8, 8, 8)
 
-        const headCanvas = document.createElement('canvas');
-        const headCtx = headCanvas.getContext('2d');
+        const headCanvas = document.createElement('canvas')
+        const headCtx = headCanvas.getContext('2d')
 
         if (!headCtx) {
-          throw new Error('Could not get 2D context from head canvas');
+          throw new Error('Could not get 2D context from head canvas')
         }
 
-        headCanvas.width = 8;
-        headCanvas.height = 8;
-        headCtx.putImageData(headImageData, 0, 0);
+        headCanvas.width = 8
+        headCanvas.height = 8
+        headCtx.putImageData(headImageData, 0, 0)
 
-        outputCtx.drawImage(headCanvas, 0, 0, 8, 8, 0, 0, size, size);
+        outputCtx.drawImage(headCanvas, 0, 0, 8, 8, 0, 0, size, size)
 
-        const hatImageData = sourceCtx.getImageData(40, 8, 8, 8);
+        const hatImageData = sourceCtx.getImageData(40, 8, 8, 8)
 
-        const hatCanvas = document.createElement('canvas');
-        const hatCtx = hatCanvas.getContext('2d');
+        const hatCanvas = document.createElement('canvas')
+        const hatCtx = hatCanvas.getContext('2d')
 
         if (!hatCtx) {
-          throw new Error('Could not get 2D context from hat canvas');
+          throw new Error('Could not get 2D context from hat canvas')
         }
 
-        hatCanvas.width = 8;
-        hatCanvas.height = 8;
-        hatCtx.putImageData(hatImageData, 0, 0);
+        hatCanvas.width = 8
+        hatCanvas.height = 8
+        hatCtx.putImageData(hatImageData, 0, 0)
 
-        const hatPixels = hatImageData.data;
-        let hasHat = false;
+        const hatPixels = hatImageData.data
+        let hasHat = false
 
         for (let i = 3; i < hatPixels.length; i += 4) {
           if (hatPixels[i] > 0) {
-            hasHat = true;
-            break;
+            hasHat = true
+            break
           }
         }
 
         if (hasHat) {
-          outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size);
+          outputCtx.drawImage(hatCanvas, 0, 0, 8, 8, 0, 0, size, size)
         }
 
         outputCanvas.toBlob((blob) => {
           if (blob) {
-            resolve(blob);
+            resolve(blob)
           } else {
-            reject(new Error('Failed to create blob from canvas'));
+            reject(new Error('Failed to create blob from canvas'))
           }
-        }, 'image/png');
-
+        }, 'image/png')
       } catch (error) {
-        reject(error);
+        reject(error)
       }
-    };
+    }
 
     img.onerror = () => {
-      reject(new Error('Failed to load skin texture image'));
-    };
+      reject(new Error('Failed to load skin texture image'))
+    }
 
-    img.src = skinUrl;
-  });
+    img.src = skinUrl
+  })
 }
 
 async function generateHeadRender(skin: Skin): Promise<string> {
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index eb45dae98..5b7317d92 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -252,7 +252,7 @@ function onSkinFileUploaded(file: File) {
 }
 
 function onUploadCanceled() {
-  console.log("fuck fuck fuck")
+  console.log('fuck fuck fuck')
   editSkinModal.value?.restoreModal()
 }
 
@@ -378,8 +378,9 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
               <Button
                 color="green"
                 aria-label="Edit skin"
+                class="pointer-events-auto"
                 @click.stop="(e) => editSkinModal?.show(e, skin)"
-                class="pointer-events-auto">
+              >
                 <EditIcon /> Edit
               </Button>
               <Button
diff --git a/packages/ui/src/components/skin/SkinLikeTextButton.vue b/packages/ui/src/components/skin/SkinLikeTextButton.vue
index b5ceda4a3..e71ac8b78 100644
--- a/packages/ui/src/components/skin/SkinLikeTextButton.vue
+++ b/packages/ui/src/components/skin/SkinLikeTextButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     selected?: boolean
     tooltip?: string
@@ -56,8 +56,8 @@ const pressed = ref(false)
       var(--color-brand) -76.68%,
       rgba(27, 217, 106, 0.534) -38.61%,
       rgba(12, 89, 44, 0.6) 100.4%
-  ),
-  var(--color-bg);
+    ),
+    var(--color-bg);
 }
 
 .skin-btn-bg.selected:hover,
diff --git a/packages/ui/src/components/skin/SkinPreviewRenderer.vue b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
index 0248a18a8..26bb188af 100644
--- a/packages/ui/src/components/skin/SkinPreviewRenderer.vue
+++ b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
@@ -29,12 +29,12 @@
         toneMapping: THREE.NoToneMapping,
         toneMappingExposure: 10.0,
       }"
+      class="transition-opacity duration-500"
+      :class="{ 'opacity-0': !isReady, 'opacity-100': isReady }"
       @pointerdown="onPointerDown"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
       @pointerleave="onPointerUp"
-      class="transition-opacity duration-500"
-      :class="{'opacity-0': !isReady, 'opacity-100': isReady}"
     >
       <Suspense>
         <Group>
@@ -90,7 +90,7 @@
     <div
       v-if="!isReady"
       class="w-full h-full flex items-center justify-center transition-opacity duration-500"
-      :class="{'opacity-100': !isReady, 'opacity-0': isReady}"
+      :class="{ 'opacity-100': !isReady, 'opacity-0': isReady }"
     >
       <div class="text-primary">Loading...</div>
     </div>
@@ -653,8 +653,12 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .nametag-bg {
-  background: linear-gradient(308.68deg, rgba(50, 50, 50, 0.2) -52.46%, rgba(100, 100, 100, 0.2) 94.75%),
-  rgba(0, 0, 0, 0.2);
+  background: linear-gradient(
+      308.68deg,
+      rgba(50, 50, 50, 0.2) -52.46%,
+      rgba(100, 100, 100, 0.2) 94.75%
+    ),
+    rgba(0, 0, 0, 0.2);
   box-shadow:
     inset -0.5px -0.5px 0px rgba(0, 0, 0, 0.25),
     inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.05);