From fc260b7f29b63c1a2a19592eb315c362c0b7c701 Mon Sep 17 00:00:00 2001
From: Jakobabs <89502961+Jakobabs@users.noreply.github.com>
Date: Wed, 15 Jan 2025 19:30:34 -0500
Subject: [PATCH] Theseus Skin Manager (#1277)

Initial skin manager
---
 Cargo.lock                                    |   19 +-
 apps/app-frontend/package.json                |    3 +-
 apps/app-frontend/src/App.vue                 |  119 +-
 apps/app-frontend/src/assets/icons/index.js   |    1 +
 .../src/assets/icons/skin-editor.svg          |    5 +
 .../src/components/ui/AccountsCard.vue        |  473 +++-----
 .../src/components/ui/Instance.vue            |   33 +-
 .../components/ui/InstanceCreationModal.vue   |   16 +-
 .../src/components/ui/SkinSave.vue            |   24 +
 .../src/components/ui/friends/FriendsList.vue |   21 +-
 .../ui/install_flow/InstallConfirmModal.vue   |    4 +-
 apps/app-frontend/src/helpers/auth.js         |    7 +-
 apps/app-frontend/src/helpers/pack.js         |   14 +-
 apps/app-frontend/src/helpers/profile.js      |   16 +
 apps/app-frontend/src/helpers/skin_manager.js |  135 +++
 apps/app-frontend/src/helpers/types.d.ts      |   16 +-
 .../app-frontend/src/locales/en-US/index.json |   69 ++
 apps/app-frontend/src/pages/SkinManager.vue   | 1007 +++++++++++++++++
 apps/app-frontend/src/pages/index.js          |    3 +-
 .../app-frontend/src/pages/instance/Index.vue |   59 +-
 apps/app-frontend/src/routes.js               |    8 +
 apps/app-frontend/src/store/install.js        |    4 +-
 apps/app/build.rs                             |   27 +
 apps/app/capabilities/plugins.json            |   10 +-
 apps/app/package.json                         |    2 +-
 apps/app/src/api/auth.rs                      |    8 +
 apps/app/src/api/mod.rs                       |    1 +
 apps/app/src/api/skin_manager.rs              |  180 +++
 apps/app/src/assets/icons/skin-editor.svg     |    5 +
 apps/app/src/main.rs                          |    9 +-
 apps/app/tauri.conf.json                      |   35 +-
 apps/frontend/src/pages/[type]/[id].vue       |  108 +-
 .../pages/[type]/[id]/version/[version].vue   |    7 +
 .../src/pages/dashboard/revenue/withdraw.vue  |   10 +-
 .../src/pages/settings/billing/index.vue      |   11 +-
 apps/labrinth/src/routes/internal/admin.rs    |    2 +-
 packages/app-lib/Cargo.toml                   |    6 +-
 packages/app-lib/src/api/minecraft_auth.rs    |   22 +
 packages/app-lib/src/api/mod.rs               |    1 +
 packages/app-lib/src/api/pack/import/mod.rs   |   18 +
 packages/app-lib/src/api/profile/mod.rs       |   15 +-
 packages/app-lib/src/api/profile/update.rs    |    2 +-
 packages/app-lib/src/api/skin_manager.rs      |  672 +++++++++++
 packages/app-lib/src/error.rs                 |    6 +
 packages/app-lib/src/launcher/mod.rs          |   10 +-
 .../app-lib/src/state/legacy_converter.rs     |    2 +-
 packages/app-lib/src/state/minecraft_auth.rs  |   24 +-
 packages/app-lib/src/state/profiles.rs        |   26 +-
 packages/assets/styles/variables.scss         |   17 -
 packages/ui/src/components/base/Accordion.vue |    6 +-
 .../ui/src/components/base/OverflowMenu.vue   |   20 +-
 .../ui/src/components/base/RadioButtons.vue   |   42 +
 packages/ui/src/components/base/Slider.vue    |    5 +-
 packages/ui/src/components/index.ts           |    1 +
 packages/ui/src/components/modal/NewModal.vue |    2 +-
 .../src/components/project/ProjectHeader.vue  |    9 +-
 .../project/ProjectSidebarCompatibility.vue   |    3 +
 packages/ui/src/locales/en-US/index.json      |    3 +
 packages/ui/src/utils/common-messages.ts      |    4 +
 pnpm-lock.yaml                                |   66 +-
 60 files changed, 2902 insertions(+), 551 deletions(-)
 create mode 100644 apps/app-frontend/src/assets/icons/skin-editor.svg
 create mode 100644 apps/app-frontend/src/components/ui/SkinSave.vue
 create mode 100644 apps/app-frontend/src/helpers/skin_manager.js
 create mode 100644 apps/app-frontend/src/pages/SkinManager.vue
 create mode 100644 apps/app/src/api/skin_manager.rs
 create mode 100644 apps/app/src/assets/icons/skin-editor.svg
 create mode 100644 packages/app-lib/src/api/skin_manager.rs
 create mode 100644 packages/ui/src/components/base/RadioButtons.vue

diff --git a/Cargo.lock b/Cargo.lock
index 8dffdfd5a7..07ec7836ac 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -660,19 +660,18 @@ dependencies = [
 
 [[package]]
 name = "async-tungstenite"
-version = "0.27.0"
+version = "0.25.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c5359381fd414fbdb272c48f2111c16cb0bb3447bfacd59311ff3736da9f6664"
+checksum = "2cca750b12e02c389c1694d35c16539f88b8bbaa5945934fdc1b41a776688589"
 dependencies = [
  "futures-io",
  "futures-util",
  "log",
+ "native-tls",
  "pin-project-lite",
- "rustls-pki-types",
  "tokio 1.42.0",
- "tokio-rustls 0.26.0",
+ "tokio-native-tls",
  "tungstenite",
- "webpki-roots 0.26.6",
 ]
 
 [[package]]
@@ -6603,6 +6602,7 @@ dependencies = [
  "js-sys",
  "log",
  "mime",
+ "mime_guess",
  "native-tls",
  "once_cell",
  "percent-encoding",
@@ -8886,6 +8886,7 @@ dependencies = [
  "dunce",
  "flate2",
  "futures 0.3.30",
+ "image 0.24.9",
  "indicatif",
  "lazy_static",
  "notify",
@@ -9588,9 +9589,9 @@ checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 
 [[package]]
 name = "tungstenite"
-version = "0.23.0"
+version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6e2e2ce1e47ed2994fd43b04c8f618008d4cabdd5ee34027cf14f9d918edd9c8"
+checksum = "9ef1a641ea34f399a848dea702823bbecfb4c486f911735368f1f137cb8257e1"
 dependencies = [
  "byteorder",
  "bytes 1.7.2",
@@ -9598,11 +9599,11 @@ dependencies = [
  "http 1.1.0",
  "httparse",
  "log",
+ "native-tls",
  "rand 0.8.5",
- "rustls 0.23.13",
- "rustls-pki-types",
  "sha1 0.10.6",
  "thiserror 1.0.64",
+ "url",
  "utf-8",
 ]
 
diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index f393806311..4f6d8d14ed 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -27,6 +27,7 @@
     "floating-vue": "^5.2.2",
     "ofetch": "^1.3.4",
     "pinia": "^2.1.7",
+    "skinview3d": "^3.0.1",
     "posthog-js": "^1.158.2",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.13",
@@ -54,4 +55,4 @@
   },
   "packageManager": "pnpm@9.4.0",
   "web-types": "../../web-types.json"
-}
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 786e1f3121..9df086a427 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1,24 +1,32 @@
-<script setup>
-import { computed, ref, onMounted, watch, onUnmounted } from 'vue'
-import { RouterView, useRouter, useRoute } from 'vue-router'
+<script async setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 import {
   ArrowBigUpDashIcon,
-  LogInIcon,
+  CompassIcon,
+  DownloadIcon,
   HomeIcon,
+  LeftArrowIcon,
   LibraryIcon,
-  PlusIcon,
-  SettingsIcon,
-  XIcon,
-  DownloadIcon,
-  CompassIcon,
-  MinimizeIcon,
+  LogInIcon,
+  LogOutIcon,
   MaximizeIcon,
+  MinimizeIcon,
+  PlusIcon,
   RestoreIcon,
-  LogOutIcon,
   RightArrowIcon,
-  LeftArrowIcon,
+  SettingsIcon,
+  XIcon,
+  SpinnerIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, ButtonStyled, Notifications, OverflowMenu } from '@modrinth/ui'
+import {
+  Avatar,
+  Button,
+  ButtonStyled,
+  commonMessages,
+  Notifications,
+  OverflowMenu
+} from '@modrinth/ui'
 import { useLoading, useTheming } from '@/store/state'
 import ModrinthAppLogo from '@/assets/modrinth_app.svg?component'
 import AccountsCard from '@/components/ui/AccountsCard.vue'
@@ -32,14 +40,16 @@ import ModrinthLoadingIndicator from '@/components/LoadingIndicatorBar.vue'
 import { handleError, useNotifications } from '@/store/notifications.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { type } from '@tauri-apps/plugin-os'
-import { isDev, getOS, restartApp } from '@/helpers/utils.js'
-import { initAnalytics, debugAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
+import { getOS, isDev, restartApp } from '@/helpers/utils.js'
+import { debugAnalytics, initAnalytics, optOutAnalytics, trackEvent } from '@/helpers/analytics'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { getVersion } from '@tauri-apps/api/app'
 import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
-import { install_from_file } from './helpers/pack'
+import { create_profile_and_install_from_file } from './helpers/pack'
 import { useError } from '@/store/error.js'
 import { useCheckDisableMouseover } from '@/composables/macCssFix.js'
+import { save_filters } from '@/helpers/skin_manager.js'
+import { SkinManagerIcon } from '@/assets/icons/index.js'
 import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
 import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
@@ -51,7 +61,7 @@ import { renderString } from '@modrinth/utils'
 import { useFetch } from '@/helpers/fetch.js'
 import { check } from '@tauri-apps/plugin-updater'
 import NavButton from '@/components/ui/NavButton.vue'
-import { get as getCreds, logout, login } from '@/helpers/mr_auth.js'
+import { get as getCreds, login, logout } from '@/helpers/mr_auth.js'
 import { get_user } from '@/helpers/cache.js'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import dayjs from 'dayjs'
@@ -60,6 +70,9 @@ import { hide_ads_window, init_ads_window } from '@/helpers/ads.js'
 import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
 
 const themeStore = useTheming()
 
@@ -199,6 +212,7 @@ initialize_state()
   })
 
 const handleClose = async () => {
+  await save_filters()
   await saveWindowState(StateFlags.ALL)
   await getCurrentWindow().close()
 }
@@ -296,7 +310,7 @@ async function handleCommand(e) {
   if (e.event === 'RunMRPack') {
     // RunMRPack should directly install a local mrpack given a path
     if (e.path.endsWith('.mrpack')) {
-      await install_from_file(e.path).catch(handleError)
+      await create_profile_and_install_from_file(e.path).catch(handleError)
       trackEvent('InstanceCreate', {
         source: 'CreationModalFileDrop',
       })
@@ -354,6 +368,45 @@ function handleAuxClick(e) {
     e.target.dispatchEvent(event)
   }
 }
+
+const messages = defineMessages({
+  playingAs: {
+    id: 'app.sidebar.accounts.title',
+    defaultMessage: 'Playing as',
+  },
+  loadingAccounts: {
+    id: 'app.sidebar.accounts.loading-accounts',
+    defaultMessage: 'Loading accounts...',
+  },
+  news: {
+    id: 'app.sidebar.news.title',
+    defaultMessage: 'News',
+  },
+  home: {
+    id: 'app.nav.home.title',
+    defaultMessage: 'Home',
+  },
+  discoverContent: {
+    id: 'app.nav.discover-content.title',
+    defaultMessage: 'Discover content',
+  },
+  library: {
+    id: 'app.nav.library.title',
+    defaultMessage: 'Library',
+  },
+  settings: {
+    id: 'app.nav.settings.title',
+    defaultMessage: 'Settings',
+  },
+  createInstance: {
+    id: 'app.nav.create-instance.title',
+    defaultMessage: 'Create new instance',
+  },
+  installUpdate: {
+    id: 'app.nav.install-update.title',
+    defaultMessage: 'Install update',
+  },
+})
 </script>
 
 <template>
@@ -369,11 +422,11 @@ function handleAuxClick(e) {
     <div
       class="app-grid-navbar bg-bg-raised flex flex-col p-[0.5rem] pt-0 gap-[0.5rem] w-[--left-bar-width]"
     >
-      <NavButton v-tooltip.right="'Home'" to="/">
+      <NavButton v-tooltip.right="formatMessage(messages.home)" to="/">
         <HomeIcon />
       </NavButton>
       <NavButton
-        v-tooltip.right="'Discover content'"
+        v-tooltip.right="formatMessage(messages.discoverContent)"
         to="/browse/modpack"
         :is-primary="() => route.path.startsWith('/browse') && !route.query.i"
         :is-subpage="(route) => route.path.startsWith('/project') && !route.query.i"
@@ -381,7 +434,7 @@ function handleAuxClick(e) {
         <CompassIcon />
       </NavButton>
       <NavButton
-        v-tooltip.right="'Library'"
+        v-tooltip.right="formatMessage(messages.library)"
         to="/library"
         :is-subpage="
           () =>
@@ -397,17 +450,17 @@ function handleAuxClick(e) {
         <QuickInstanceSwitcher />
       </suspense>
       <NavButton
-        v-tooltip.right="'Create new instance'"
+        v-tooltip.right="formatMessage(messages.createInstance)"
         :to="() => $refs.installationModal.show()"
         :disabled="offline"
       >
         <PlusIcon />
       </NavButton>
       <div class="flex flex-grow"></div>
-      <NavButton v-if="updateAvailable" v-tooltip.right="'Install update'" :to="() => restartApp()">
+      <NavButton v-if="updateAvailable" v-tooltip.right="formatMessage(messages.installUpdate)" :to="() => restartApp()">
         <DownloadIcon />
       </NavButton>
-      <NavButton v-tooltip.right="'Settings'" :to="() => $refs.settingsModal.show()">
+      <NavButton v-tooltip.right="formatMessage(messages.settings)" :to="() => $refs.settingsModal.show()">
         <SettingsIcon />
       </NavButton>
       <ButtonStyled v-if="credentials" type="transparent" circular>
@@ -427,12 +480,11 @@ function handleAuxClick(e) {
             size="32px"
             circle
           />
-          <template #sign-out> <LogOutIcon /> Sign out </template>
+          <template #sign-out> <LogOutIcon /> {{ formatMessage(commonMessages.signOutButton) }} </template>
         </OverflowMenu>
       </ButtonStyled>
-      <NavButton v-else v-tooltip.right="'Sign in'" :to="() => signIn()">
+      <NavButton v-else v-tooltip.right="formatMessage(commonMessages.signInButton)" :to="() => signIn()">
         <LogInIcon />
-        <template #label>Sign in</template>
       </NavButton>
     </div>
     <div data-tauri-drag-region class="app-grid-statusbar bg-bg-raised h-[--top-bar-height] flex">
@@ -540,10 +592,15 @@ function handleAuxClick(e) {
         <div id="sidebar-teleport-target" class="sidebar-teleport-content"></div>
         <div class="sidebar-default-content" :class="{ 'sidebar-enabled': sidebarVisible }">
           <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
-            <h3 class="text-lg m-0">Playing as</h3>
-            <suspense>
-              <AccountsCard ref="accounts" mode="small" />
-            </suspense>
+            <h3 class="text-lg m-0">{{ formatMessage(messages.playingAs) }}</h3>
+            <Suspense>
+              <AccountsCard ref="accounts" />
+              <template #fallback>
+                <div class="flex items-center gap-2 pt-4 pb-1">
+                  <SpinnerIcon class="animate-spin" /> {{ formatMessage(messages.loadingAccounts) }}
+                </div>
+              </template>
+            </Suspense>
           </div>
           <div class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
             <suspense>
diff --git a/apps/app-frontend/src/assets/icons/index.js b/apps/app-frontend/src/assets/icons/index.js
index 4a5266b255..cd55614356 100644
--- a/apps/app-frontend/src/assets/icons/index.js
+++ b/apps/app-frontend/src/assets/icons/index.js
@@ -7,3 +7,4 @@ export { default as AddProjectImage } from './add-project.svg'
 export { default as NewInstanceImage } from './new-instance.svg'
 export { default as MenuIcon } from './menu.svg'
 export { default as ChatIcon } from './messages-square.svg'
+export { default as SkinManagerIcon } from './skin-editor.svg'
diff --git a/apps/app-frontend/src/assets/icons/skin-editor.svg b/apps/app-frontend/src/assets/icons/skin-editor.svg
new file mode 100644
index 0000000000..7626051500
--- /dev/null
+++ b/apps/app-frontend/src/assets/icons/skin-editor.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" transform="scale(-1 1)" viewBox="0 0 49.915 52.72">
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M15.71 31.484v19.07h18.63v-19.07l6.538 6.539 6.871-6.872-11.203-11.733H14.122L2.166 31.375l6.827 6.827z"/>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.993" d="M24.872 19.548v-6.44"/>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M24.704 13.202a5.518 5.518 0 0 1-5.518-5.518 5.518 5.518 0 0 1 5.518-5.518 5.518 5.518 0 0 1 5.518 5.518"/>
+</svg>
diff --git a/apps/app-frontend/src/components/ui/AccountsCard.vue b/apps/app-frontend/src/components/ui/AccountsCard.vue
index fe1defb0f7..f65171668e 100644
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -1,71 +1,8 @@
-<template>
-  <div
-    v-if="mode !== 'isolated'"
-    ref="button"
-    class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-    :class="{ expanded: mode === 'expanded' }"
-    @click="toggleMenu"
-  >
-    <Avatar
-      size="36px"
-      :src="
-        selectedAccount
-          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
-          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-      "
-    />
-    <div class="flex flex-col w-full">
-      <span>{{ selectedAccount ? selectedAccount.username : 'Select account' }}</span>
-      <span class="text-secondary text-xs">Minecraft account</span>
-    </div>
-    <DropdownIcon class="w-5 h-5 shrink-0" />
-  </div>
-  <transition name="fade">
-    <Card
-      v-if="showCard || mode === 'isolated'"
-      ref="card"
-      class="account-card"
-      :class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
-    >
-      <div v-if="selectedAccount" class="selected account">
-        <Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.id}/128`" />
-        <div>
-          <h4>{{ selectedAccount.username }}</h4>
-          <p>Selected</p>
-        </div>
-        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
-          <TrashIcon />
-        </Button>
-      </div>
-      <div v-else class="logged-out account">
-        <h4>Not signed in</h4>
-        <Button v-tooltip="'Log in'" icon-only color="primary" @click="login()">
-          <LogInIcon />
-        </Button>
-      </div>
-      <div v-if="displayAccounts.length > 0" class="account-group">
-        <div v-for="account in displayAccounts" :key="account.id" class="account-row">
-          <Button class="option account" @click="setAccount(account)">
-            <Avatar :src="`https://mc-heads.net/avatar/${account.id}/128`" class="icon" />
-            <p>{{ account.username }}</p>
-          </Button>
-          <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
-            <TrashIcon />
-          </Button>
-        </div>
-      </div>
-      <Button v-if="accounts.length > 0" @click="login()">
-        <PlusIcon />
-        Add account
-      </Button>
-    </Card>
-  </transition>
-</template>
-
-<script setup>
-import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
-import { Avatar, Button, Card } from '@modrinth/ui'
-import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
+<script setup lang="ts">
+import { RadioButtonChecked, RadioButtonIcon, PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
+import { Avatar, Button, Accordion, ButtonStyled } from '@modrinth/ui'
+import { SkinManagerIcon } from '@/assets/icons/index.js'
+import { type Ref, type ComputedRef, ref, computed, onUnmounted } from 'vue'
 import {
   users,
   remove_user,
@@ -77,38 +14,45 @@ import { handleError } from '@/store/state.js'
 import { trackEvent } from '@/helpers/analytics'
 import { process_listener } from '@/helpers/events'
 import { handleSevereError } from '@/store/error.js'
-
-defineProps({
-  mode: {
-    type: String,
-    required: true,
-    default: 'normal',
-  },
-})
+import {
+  cache_users_skins,
+  cache_new_user_skin,
+  account_heads as skinManagerAccountHeads,
+  loaded_skins,
+  get_heads,
+  get_filters,
+  selectedAccount as skinManagerAccount,
+} from '@/helpers/skin_manager.js'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import type { MinecraftCredentials } from '@/helpers/types'
+
+const { formatMessage } = useVIntl()
 
 const emit = defineEmits(['change'])
 
-const accounts = ref({})
-const defaultUser = ref()
+const accounts: Ref<MinecraftCredentials[]> = ref([])
+const defaultUser: Ref<string | undefined> = ref()
 
 async function refreshValues() {
   defaultUser.value = await get_default_user().catch(handleError)
-  accounts.value = await users().catch(handleError)
+  accounts.value = await users().catch(handleError) ?? []
+
+  accounts.value.sort((a, b) => a.username.localeCompare(b.username))
+
+  await refreshSkins()
 }
+
 defineExpose({
   refreshValues,
 })
-await refreshValues()
-
-const displayAccounts = computed(() =>
-  accounts.value.filter((account) => defaultUser.value !== account.id),
-)
 
-const selectedAccount = computed(() =>
-  accounts.value.find((account) => account.id === defaultUser.value),
-)
+const selectedAccount: ComputedRef<MinecraftCredentials | undefined> = computed(() => {
+  const account = accounts.value.find((account) => account.id === defaultUser.value);
+  (skinManagerAccount as Ref<MinecraftCredentials | undefined>).value = account
+  return account
+})
 
-async function setAccount(account) {
+async function setAccount(account: MinecraftCredentials) {
   defaultUser.value = account.id
   await set_default_user(account.id).catch(handleError)
   emit('change')
@@ -118,6 +62,8 @@ async function login() {
   const loggedIn = await login_flow().catch(handleSevereError)
 
   if (loggedIn) {
+    await cache_new_user_skin(loggedIn).catch(handleError)
+    await get_heads()
     await setAccount(loggedIn)
     await refreshValues()
   }
@@ -125,7 +71,7 @@ async function login() {
   trackEvent('AccountLogIn')
 }
 
-const logout = async (id) => {
+async function logout(id: string) {
   await remove_user(id).catch(handleError)
   await refreshValues()
   if (!selectedAccount.value && accounts.value.length > 0) {
@@ -137,273 +83,106 @@ const logout = async (id) => {
   trackEvent('AccountLogOut')
 }
 
-const showCard = ref(false)
-const card = ref(null)
-const button = ref(null)
-const handleClickOutside = (event) => {
-  const elements = document.elementsFromPoint(event.clientX, event.clientY)
-  if (
-    card.value &&
-    card.value.$el !== event.target &&
-    !elements.includes(card.value.$el) &&
-    !button.value.contains(event.target)
-  ) {
-    toggleMenu(false)
-  }
-}
-
-function toggleMenu(override = true) {
-  if (showCard.value || !override) {
-    showCard.value = false
-  } else {
-    showCard.value = true
-  }
-}
-
-const unlisten = await process_listener(async (e) => {
+const unlisten = await process_listener(async (e: { event: string }) => {
   if (e.event === 'launched') {
     await refreshValues()
   }
 })
 
-onMounted(() => {
-  window.addEventListener('click', handleClickOutside)
-})
+async function refreshSkins() {
+  await get_heads()
+  loaded_skins.value = await cache_users_skins().catch(handleError)
+  await get_heads()
+  await get_filters()
+}
 
-onBeforeUnmount(() => {
-  window.removeEventListener('click', handleClickOutside)
-})
+const account_heads: Ref<Record<string, string>> = computed(() => skinManagerAccountHeads.value)
 
 onUnmounted(() => {
   unlisten()
 })
-</script>
-
-<style scoped lang="scss">
-.selected {
-  background: var(--color-brand-highlight);
-  border-radius: var(--radius-lg);
-  color: var(--color-contrast);
-  gap: 1rem;
-}
-
-.logged-out {
-  background: var(--color-bg);
-  border-radius: var(--radius-lg);
-  gap: 1rem;
-}
-
-.account {
-  width: max-content;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  padding: 0.5rem 1rem;
-
-  h4,
-  p {
-    margin: 0;
-  }
-}
-
-.account-card {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  margin-top: 0.5rem;
-  right: 2rem;
-  z-index: 11;
-  gap: 0.5rem;
-  padding: 1rem;
-  border: 1px solid var(--color-button-bg);
-  width: max-content;
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  max-height: 98vh;
-  overflow-y: auto;
-
-  &::-webkit-scrollbar-track {
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-  }
-
-  &::-webkit-scrollbar {
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-  }
-
-  &.hidden {
-    display: none;
-  }
-
-  &.expanded {
-    left: 13.5rem;
-  }
-
-  &.isolated {
-    position: relative;
-    left: 0;
-    top: 0;
-  }
-}
-
-.accounts-title {
-  font-size: 1.2rem;
-  font-weight: bolder;
-}
-
-.account-group {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
 
-.option {
-  width: calc(100% - 2.25rem);
-  background: var(--color-raised-bg);
-  color: var(--color-base);
-  box-shadow: none;
-
-  img {
-    margin-right: 0.5rem;
-  }
-}
-
-.icon {
-  --size: 1.5rem !important;
-}
-
-.account-row {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  vertical-align: center;
-  justify-content: space-between;
-  padding-right: 1rem;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition:
-    opacity 0.25s ease,
-    translate 0.25s ease,
-    scale 0.25s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-  translate: 0 -2rem;
-  scale: 0.9;
-}
-
-.avatar-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--color-base);
-  background-color: var(--color-button-bg);
-  border-radius: var(--radius-md);
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-
-  &.expanded {
-    border: 1px solid var(--color-button-bg);
-    padding: 1rem;
-  }
-}
-
-.avatar-text {
-  margin: auto 0 auto 0.25rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.text {
-  width: 6rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.accounts-text {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin: 0;
-}
-
-.qr-code {
-  background-color: white !important;
-  border-radius: var(--radius-md);
-}
-
-.modal-body {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap-lg);
-  align-items: center;
-  padding: var(--gap-xl);
-
-  .modal-text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap-sm);
-    width: 100%;
-
-    h2,
-    p {
-      margin: 0;
-    }
-
-    .code-text {
-      display: flex;
-      flex-direction: row;
-      gap: var(--gap-xs);
-      align-items: center;
-
-      .code {
-        background-color: var(--color-bg);
-        border-radius: var(--radius-md);
-        border: solid 1px var(--color-button-bg);
-        font-family: var(--mono-font);
-        letter-spacing: var(--gap-md);
-        color: var(--color-contrast);
-        font-size: 2rem;
-        font-weight: bold;
-        padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
-      }
-
-      .btn {
-        width: 2.5rem;
-        height: 2.5rem;
-      }
-    }
-  }
-}
-
-.button-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.modal {
-  position: absolute;
-}
-
-.code {
-  color: var(--color-brand);
-  padding: 0.05rem 0.1rem;
-  // row not column
-  display: flex;
+const messages = defineMessages({
+  notSignedIn: {
+    id: 'minecraft-account.not-signed-in',
+    defaultMessage: 'Not signed in',
+  },
+  addAccount: {
+    id: 'minecraft-account.add-account',
+    defaultMessage: 'Add account',
+  },
+  removeAccount: {
+    id: 'minecraft-account.remove-account',
+    defaultMessage: 'Remove account',
+  },
+  changeSkin: {
+    id: 'minecraft-account.change-skin',
+    defaultMessage: 'Change skin',
+  },
+})
 
-  .card {
-    background: var(--color-base);
-    color: var(--color-contrast);
-    padding: 0.5rem 1rem;
-  }
-}
-</style>
+await refreshValues()
+</script>
+<template>
+  <Accordion
+    ref="button"
+    class="w-full mt-2 bg-button-bg rounded-xl overflow-clip"
+    button-class="button-base w-full bg-transparent px-3 py-2 border-0 cursor-pointer"
+  >
+    <template #title>
+      <div class="flex gap-2">
+        <Avatar
+          size="36px"
+          :src="
+          selectedAccount
+            ? account_heads[selectedAccount.id]
+            : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+        "
+        />
+        <div class="flex flex-col items-start w-full">
+          <span>{{ selectedAccount ? selectedAccount.username : 'Select account' }}</span>
+          <span class="text-secondary text-xs">Minecraft account</span>
+        </div>
+      </div>
+    </template>
+    <div
+      class="bg-button-bg pt-1 pb-2"
+    >
+      <div v-if="!selectedAccount" class="logged-out account">
+        <h4>Not signed in</h4>
+        <Button v-tooltip="'Log in'" icon-only color="primary" @click="login()">
+          <LogInIcon />
+        </Button>
+      </div>
+      <div v-if="accounts.length > 0" class="account-group">
+        <div v-for="account in accounts" :key="account.id" class="flex gap-1 items-center">
+          <button class="flex items-center flex-shrink flex-grow overflow-clip gap-2 p-2 border-0 bg-transparent cursor-pointer button-base" @click="setAccount(account)">
+            <RadioButtonChecked v-if="selectedAccount && selectedAccount.id === account.id" class="w-5 h-5 text-brand" />
+            <RadioButtonIcon v-else class="w-5 h-5 text-secondary" />
+            <Avatar :src="account_heads[account.id]" size="24px" />
+            <p class="m-0 truncate" :class="selectedAccount && selectedAccount.id === account.id ? `text-contrast font-semibold` : `text-primary`">{{ account.username }}</p>
+          </button>
+          <ButtonStyled circular color="red" color-fill="none" hover-color-fill="background">
+            <button v-tooltip="formatMessage(messages.removeAccount)" class="mr-2" @click="logout(account.id)">
+              <TrashIcon />
+            </button>
+          </ButtonStyled>
+        </div>
+      </div>
+      <div class="flex flex-col gap-2 px-2 pt-2">
+        <ButtonStyled v-if="accounts.length > 0" class="w-full">
+          <button @click="login()">
+            <PlusIcon />
+            {{ formatMessage(messages.addAccount) }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled v-if="accounts.length > 0">
+          <router-link to="/skinmanager" class="w-full">
+            <SkinManagerIcon />
+            {{ formatMessage(messages.changeSkin) }}
+          </router-link>
+        </ButtonStyled>
+      </div>
+    </div>
+  </Accordion>
+</template>
diff --git a/apps/app-frontend/src/components/ui/Instance.vue b/apps/app-frontend/src/components/ui/Instance.vue
index 034826b0b4..2b954f2a39 100644
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -1,10 +1,17 @@
 <script setup>
-import { onUnmounted, ref, computed, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { SpinnerIcon, GameIcon, TimerIcon, StopCircleIcon, PlayIcon } from '@modrinth/assets'
-import { ButtonStyled, Avatar } from '@modrinth/ui'
+import {
+  DownloadIcon,
+  GameIcon,
+  PlayIcon,
+  SpinnerIcon,
+  StopCircleIcon,
+  TimerIcon,
+} from '@modrinth/assets'
+import { Avatar, ButtonStyled } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { kill, run } from '@/helpers/profile'
+import { finish_install, kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
 import { process_listener } from '@/helpers/events'
 import { handleError } from '@/store/state.js'
@@ -42,7 +49,8 @@ const modLoading = computed(
     currentEvent.value === 'installing' ||
     (currentEvent.value === 'launched' && !playing.value),
 )
-const installing = computed(() => props.instance.install_stage !== 'installed')
+const installing = computed(() => props.instance.install_stage.includes('installing'))
+const installed = computed(() => props.instance.install_stage === 'installed')
 
 const router = useRouter()
 
@@ -84,6 +92,12 @@ const stop = async (e, context) => {
   })
 }
 
+const repair = async (e) => {
+  e?.stopPropagation()
+
+  await finish_install(props.instance)
+}
+
 const openFolder = async () => {
   await showProfileInFolder(props.instance.path)
 }
@@ -195,6 +209,15 @@ onUnmounted(() => unlisten())
             class="animate-spin w-8 h-8"
             tabindex="-1"
           />
+          <ButtonStyled v-else-if="!installed" size="large" color="brand" circular>
+            <button
+              v-tooltip="'Repair'"
+              class="transition-all scale-75 group-hover:scale-100 group-focus-within:scale-100 origin-bottom opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 card-shadow"
+              @click="(e) => repair(e)"
+            >
+              <DownloadIcon />
+            </button>
+          </ButtonStyled>
           <ButtonStyled v-else size="large" color="brand" circular>
             <button
               v-tooltip="'Play'"
diff --git a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
index ed38e6fcc0..9d0c9b7535 100644
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -199,16 +199,16 @@
 <script setup>
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import {
-  PlusIcon,
-  UploadIcon,
-  XIcon,
   CodeIcon,
   FolderOpenIcon,
-  InfoIcon,
   FolderSearchIcon,
+  InfoIcon,
+  PlusIcon,
   UpdatedIcon,
+  UploadIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, Chips, Checkbox } from '@modrinth/ui'
+import { Avatar, Button, Checkbox, Chips } from '@modrinth/ui'
 import { computed, onUnmounted, ref, shallowRef } from 'vue'
 import { get_loaders } from '@/helpers/tags'
 import { create } from '@/helpers/profile'
@@ -218,7 +218,7 @@ import { get_game_versions, get_loader_versions } from '@/helpers/metadata'
 import { handleError } from '@/store/notifications.js'
 import Multiselect from 'vue-multiselect'
 import { trackEvent } from '@/helpers/analytics'
-import { install_from_file } from '@/helpers/pack.js'
+import { create_profile_and_install_from_file } from '@/helpers/pack.js'
 import {
   get_default_launcher_path,
   get_importable_instances,
@@ -263,7 +263,7 @@ defineExpose({
       hide()
       const { paths } = event.payload
       if (paths && paths.length > 0 && paths[0].endsWith('.mrpack')) {
-        await install_from_file(paths[0]).catch(handleError)
+        await create_profile_and_install_from_file(paths[0]).catch(handleError)
         trackEvent('InstanceCreate', {
           source: 'CreationModalFileDrop',
         })
@@ -419,7 +419,7 @@ const openFile = async () => {
   const newProject = await open({ multiple: false })
   if (!newProject) return
   hide()
-  await install_from_file(newProject.path ?? newProject).catch(handleError)
+  await create_profile_and_install_from_file(newProject.path ?? newProject).catch(handleError)
 
   trackEvent('InstanceCreate', {
     source: 'CreationModalFileOpen',
diff --git a/apps/app-frontend/src/components/ui/SkinSave.vue b/apps/app-frontend/src/components/ui/SkinSave.vue
new file mode 100644
index 0000000000..e3340d7e77
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/SkinSave.vue
@@ -0,0 +1,24 @@
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const emit = defineEmits(['setSkin'])
+</script>
+
+<template>
+  <button class="button-base cursor-pointer bg-bg-raised rounded-2xl hover:brightness-12 flex flex-col items-center justify-center 5 p-0 py-4 border-0 active:scale-[0.96] transition-all w-full h-full" @click="emit('setSkin', props.data)">
+    <img
+      :src="props.data.model"
+      alt="Mod card"
+      class="max-w-[144px]"
+      draggable="false"
+    />
+    <span class="m-0">{{ props.data.name }}</span>
+  </button>
+</template>
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index ef5b9f23f7..dcab4b8b0d 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Avatar, ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { Avatar, ButtonStyled, commonMessages, OverflowMenu } from '@modrinth/ui'
 import {
   UserPlusIcon,
   MoreVerticalIcon,
@@ -17,10 +17,14 @@ import ContextMenu from '@/components/ui/ContextMenu.vue'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { defineMessages, useVIntl } from '@vintl/vintl'
+import { format } from 'pathe'
+
+const { formatMessage } = useVIntl()
 
 const props = defineProps<{
   credentials: unknown | null
-  signIn: () => void2
+  signIn: () => void
 }>()
 
 const userCredentials = computed(() => props.credentials)
@@ -157,6 +161,13 @@ const unlisten = await friend_listener(() => loadFriends())
 onUnmounted(() => {
   unlisten()
 })
+
+const messages = defineMessages({
+  title: {
+    id: 'app.sidebar.friends.title',
+    defaultMessage: 'Friends',
+  },
+})
 </script>
 
 <template>
@@ -183,7 +194,7 @@ onUnmounted(() => {
           <ButtonStyled>
             <button @click="removeFriend(friend)">
               <XIcon />
-              Remove
+              {{ formatMessage(commonMessages.removeButton)}}
             </button>
           </ButtonStyled>
         </div>
@@ -249,7 +260,7 @@ onUnmounted(() => {
     </ButtonStyled>
   </ModalWrapper>
   <div class="flex justify-between items-center">
-    <h3 class="text-lg m-0">Friends</h3>
+    <h3 class="text-lg m-0">{{ formatMessage(messages.title) }}</h3>
     <ButtonStyled v-if="userCredentials" type="transparent" circular>
       <OverflowMenu
         :options="[
@@ -311,7 +322,7 @@ onUnmounted(() => {
     <template v-else-if="acceptedFriends.length === 0">
       <div class="text-sm">
         <div v-if="!userCredentials">
-          <span class="text-link cursor-pointer" @click="signIn">Sign in</span> to add friends!
+          <span class="text-link cursor-pointer" role="button" @click="signIn">Sign in</span> to add friends!
         </div>
         <div v-else>
           <span class="text-link cursor-pointer" @click="addFriendModal.show()">Add friends</span>
diff --git a/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue b/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
index 83a4e2cf64..1bfbe435f0 100644
--- a/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/InstallConfirmModal.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
-import { install as pack_install } from '@/helpers/pack'
+import { create_profile_and_install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
 import { trackEvent } from '@/helpers/analytics'
 import { handleError } from '@/store/state.js'
diff --git a/apps/app-frontend/src/helpers/auth.js b/apps/app-frontend/src/helpers/auth.js
index d97ce552d6..cb26338380 100644
--- a/apps/app-frontend/src/helpers/auth.js
+++ b/apps/app-frontend/src/helpers/auth.js
@@ -51,8 +51,13 @@ export async function remove_user(user) {
 
 /**
  * Returns a list of users
- * @returns {Promise<Credential[]>}
+ * @returns {Promise<MinecraftCredentials[]>}
  */
 export async function users() {
   return await invoke('plugin:auth|get_users')
 }
+
+// Refreshes a credential by UUID
+export async function refresh(user) {
+  return await invoke('plugin:auth|auth_refresh', { user })
+}
diff --git a/apps/app-frontend/src/helpers/pack.js b/apps/app-frontend/src/helpers/pack.js
index 9908e93d10..c175f90308 100644
--- a/apps/app-frontend/src/helpers/pack.js
+++ b/apps/app-frontend/src/helpers/pack.js
@@ -7,7 +7,7 @@ import { invoke } from '@tauri-apps/api/core'
 import { create } from './profile'
 
 // Installs pack from a version ID
-export async function install(projectId, versionId, packTitle, iconUrl) {
+export async function create_profile_and_install(projectId, versionId, packTitle, iconUrl) {
   const location = {
     type: 'fromVersionId',
     project_id: projectId,
@@ -28,8 +28,18 @@ export async function install(projectId, versionId, packTitle, iconUrl) {
   return await invoke('plugin:pack|pack_install', { location, profile })
 }
 
+export async function install_to_existing_profile(projectId, versionId, title, profilePath) {
+  const location = {
+    type: 'fromVersionId',
+    project_id: projectId,
+    version_id: versionId,
+    title,
+  }
+  return await invoke('plugin:pack|pack_install', { location, profile: profilePath })
+}
+
 // Installs pack from a path
-export async function install_from_file(path) {
+export async function create_profile_and_install_from_file(path) {
   const location = {
     type: 'fromFile',
     path: path,
diff --git a/apps/app-frontend/src/helpers/profile.js b/apps/app-frontend/src/helpers/profile.js
index 118a374aec..ed9741bdbc 100644
--- a/apps/app-frontend/src/helpers/profile.js
+++ b/apps/app-frontend/src/helpers/profile.js
@@ -4,6 +4,8 @@
  *  and deserialized into a usable JS object.
  */
 import { invoke } from '@tauri-apps/api/core'
+import { install_to_existing_profile } from '@/helpers/pack.js'
+import { handleError } from '@/store/notifications.js'
 
 /// Add instance
 /*
@@ -186,3 +188,17 @@ export async function edit(path, editProfile) {
 export async function edit_icon(path, iconPath) {
   return await invoke('plugin:profile|profile_edit_icon', { path, iconPath })
 }
+
+export async function finish_install(instance) {
+  if (instance.install_stage !== 'pack_installed') {
+    let linkedData = instance.linked_data
+    await install_to_existing_profile(
+      linkedData.project_id,
+      linkedData.version_id,
+      instance.name,
+      instance.path,
+    ).catch(handleError)
+  } else {
+    await install(instance.path, false).catch(handleError)
+  }
+}
diff --git a/apps/app-frontend/src/helpers/skin_manager.js b/apps/app-frontend/src/helpers/skin_manager.js
new file mode 100644
index 0000000000..9af34b2a68
--- /dev/null
+++ b/apps/app-frontend/src/helpers/skin_manager.js
@@ -0,0 +1,135 @@
+import { invoke } from '@tauri-apps/api/core'
+import { SkinViewer } from 'skinview3d'
+import { handleError } from '@/store/state.js'
+import { ref } from 'vue'
+
+// Returns SkinCache for user from cache
+export async function get_user_skin_data(id) {
+  return await invoke('plugin:skin-manager|get_user_skin_data', { id })
+}
+
+// Sets users skin
+export async function set_skin(skin, arms, creds) {
+  return await invoke('plugin:skin-manager|set_skin', { skin, arms, creds })
+}
+
+// Sets users cape
+export async function set_cape(capeid, token) {
+  return await invoke('plugin:skin-manager|set_cape', { capeid, token })
+}
+
+// Gets skin filter options
+export async function get_filters() {
+  Filters.value = await invoke('plugin:skin-manager|get_filters')
+}
+
+// Saves skin filter options
+export async function save_filters() {
+  return await invoke('plugin:skin-manager|save_filters', { filters: Filters.value })
+}
+
+// Returns true if image is 64x64
+export async function check_image(path) {
+  return await invoke('plugin:skin-manager|check_image', { path })
+}
+
+// Returns true if skin is in library
+export async function check_skin(skin, id) {
+  return await invoke('plugin:skin-manager|check_skin', { skin, id })
+}
+
+// Returns cape info
+export async function get_cape_data(cape, key) {
+  return await invoke('plugin:skin-manager|get_cape_data', { cape, key })
+}
+
+// Stores all users skin data to cache
+export async function cache_users_skins() {
+  return await invoke('plugin:skin-manager|cache_users_skins')
+}
+
+// Caches new user on login
+export async function cache_new_user_skin(creds) {
+  return await invoke('plugin:skin-manager|cache_new_user_skin', { creds })
+}
+
+// Saves SkinCache to the manager
+export async function save_skin(user, data, name, model, skinid) {
+  return await invoke('plugin:skin-manager|save_skin', { user, data, name, model, skinid })
+}
+
+// Deletes the skin save
+export async function delete_skin(id) {
+  return await invoke('plugin:skin-manager|delete_skin', { id })
+}
+
+// Gets custom skin order
+export async function get_order(user) {
+  return await invoke('plugin:skin-manager|get_order', { user })
+}
+
+// Saves custom skin order
+export async function save_order(order, user) {
+  return await invoke('plugin:skin-manager|save_order', { order, user })
+}
+
+// Gets all saved Skins
+export async function get_skins() {
+  return await invoke('plugin:skin-manager|get_skins')
+}
+
+export async function get_heads() {
+  account_heads.value = await invoke('plugin:skin-manager|get_heads')
+}
+
+export async function get_launcher_names(path, installer) {
+  return await invoke('plugin:skin-manager|get_launcher_names', { path, installer })
+}
+
+export async function import_skin(id, path, installer) {
+  return await invoke('plugin:skin-manager|import_skin', { id, path, installer })
+}
+
+export async function get_render(skinData) {
+  let arms = skinData.arms
+  if (arms == 'classic') arms = 'default'
+  const skinViewer = new SkinViewer({
+    width: 144,
+    height: 144,
+    preserveDrawingBuffer: true,
+  })
+  skinViewer.camera.rotation.x = -0.62
+  skinViewer.camera.rotation.y = 0.534
+  skinViewer.camera.rotation.z = 0.348
+  skinViewer.camera.position.x = -20
+  skinViewer.camera.position.y = 10
+  skinViewer.camera.position.z = 38
+
+  let skin = skinData.skin
+  if (!skin.startsWith('data:image/png;base64,')) skin = tauri.convertFileSrc(skinData.skin)
+  await skinViewer.loadSkin(skin, { model: arms })
+  const cape = await get_cape_data(skinData.cape, 'url').catch(handleError)
+  if (cape !== 'no cape') {
+    await skinViewer.loadCape(cape)
+  }
+
+  skinViewer.render()
+  // delay is required, if not, sometimes the skin isnt loaded before the canvas is saved to img
+  await sleep(50)
+  const image = skinViewer.canvas.toDataURL()
+  skinViewer.dispose()
+  return image
+}
+
+export const account_heads = ref({})
+
+export const loaded_skins = ref(false)
+
+export const Filters = ref({
+  sort: '',
+  filter: ''
+})
+
+const sleep = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))
+
+export const selectedAccount = ref({})
diff --git a/apps/app-frontend/src/helpers/types.d.ts b/apps/app-frontend/src/helpers/types.d.ts
index b974536976..0a90010cba 100644
--- a/apps/app-frontend/src/helpers/types.d.ts
+++ b/apps/app-frontend/src/helpers/types.d.ts
@@ -32,7 +32,12 @@ type GameInstance = {
   hooks: Hooks
 }
 
-type InstallStage = 'installed' | 'installing' | 'pack_installing' | 'not_installed'
+type InstallStage =
+  | 'installed'
+  | 'minecraft_installing'
+  | 'pack_installed'
+  | 'pack_installing'
+  | 'not_installed'
 
 type LinkedData = {
   project_id: ModrinthId
@@ -108,3 +113,12 @@ export type InstanceSettingsTabProps = {
   instance: GameInstance
   offline?: boolean
 }
+
+export type MinecraftCredentials = {
+  id: string
+  username: string,
+  access_token: string,
+  refresh_token: string,
+  expires: string,
+  active: boolean,
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index a46dbe60e4..567c1c3663 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -20,6 +20,63 @@
   "app.settings.tabs.resource-management": {
     "message": "Resource management"
   },
+  "app.sidebar.friends.title": {
+    "message": "Friends"
+  },
+  "app.skin-manager.add": {
+    "message": "Add to library"
+  },
+  "app.skin-manager.add-a-new-skin": {
+    "message": "Add a new skin"
+  },
+  "app.skin-manager.add-and-use": {
+    "message": "Add and use"
+  },
+  "app.skin-manager.add-new-skin": {
+    "message": "Add new skin"
+  },
+  "app.skin-manager.arm-style": {
+    "message": "Arm style"
+  },
+  "app.skin-manager.arm-style.slim": {
+    "message": "Slim"
+  },
+  "app.skin-manager.arm-style.wide": {
+    "message": "Wide"
+  },
+  "app.skin-manager.cape": {
+    "message": "Cape"
+  },
+  "app.skin-manager.cape.none": {
+    "message": "None"
+  },
+  "app.skin-manager.current-skin": {
+    "message": "Current skin"
+  },
+  "app.skin-manager.invalid-skin": {
+    "message": "Selected skin file is invalid. Please try another one."
+  },
+  "app.skin-manager.no-capes": {
+    "message": "You don't have any capes unlocked. Unlock capes through official Minecraft events and campaigns."
+  },
+  "app.skin-manager.select-skin-file": {
+    "message": "Select or drop a valid skin file here to begin"
+  },
+  "app.skin-manager.skin-name": {
+    "message": "Name"
+  },
+  "app.skin-manager.skin-name.placeholder": {
+    "message": "{username}'s skin"
+  },
+  "app.skin-manager.uploading-skin": {
+    "message": "Uploading..."
+  },
+  "app.skin-manager.use": {
+    "message": "Use skin"
+  },
+  "instance.filter.disabled": {
+    "message": "Disabled projects"
+  },
   "instance.filter.updates-available": {
     "message": "Updates available"
   },
@@ -305,6 +362,18 @@
   "instance.settings.title": {
     "message": "Settings"
   },
+  "minecraft-account.add-account": {
+    "message": "Add account"
+  },
+  "minecraft-account.change-skin": {
+    "message": "Change skin"
+  },
+  "minecraft-account.not-signed-in": {
+    "message": "Not signed in"
+  },
+  "minecraft-account.remove-account": {
+    "message": "Remove account"
+  },
   "search.filter.locked.instance": {
     "message": "Provided by the instance"
   },
diff --git a/apps/app-frontend/src/pages/SkinManager.vue b/apps/app-frontend/src/pages/SkinManager.vue
new file mode 100644
index 0000000000..1ff72a7c20
--- /dev/null
+++ b/apps/app-frontend/src/pages/SkinManager.vue
@@ -0,0 +1,1007 @@
+<template>
+  <div class="p-6 flex gap-3">
+    <div class="flex flex-col gap-3">
+      <h2 class="m-0 text-lg leading-none font-extrabold">{{ formatMessage(messages.currentSkin) }}</h2>
+      <div class="w-[200px] h-[250px] bg-bg-raised rounded-2xl flex items-center justify-center">
+        <SpinnerIcon v-if="!loaded_skins" class="animate-spin w-12 h-12" />
+        <canvas id="skin_container" class="cursor-grab active:cursor-grabbing" :class="{ 'hidden': !loaded_skins }" />
+      </div>
+      <div class="card-row">
+        <div class="project-info">
+          <p class="description">{{ skinData.arms }}, {{ skinData.cape }}</p>
+        </div>
+        <Button v-if="!InLibrary" color="primary" @click="handleAdd"> Add to Library </Button>
+      </div>
+    </div>
+    <div class="flex flex-col gap-3 w-full">
+      <div class="flex gap-2">
+        <div class="iconified-input flex-1">
+          <SearchIcon />
+          <input v-model="search" type="text" placeholder="Search" />
+          <Button class="r-btn" @click="() => (search = '')">
+            <XIcon />
+          </Button>
+        </div>
+        <DropdownSelect
+          v-slot="{ selected }"
+          v-model="Filters.sort"
+          name="Sort Dropdown"
+          class="max-w-[16rem]"
+          :options="['Name', 'Custom', 'Date created', 'Date modified']"
+          placeholder="Select..."
+        >
+          <span class="font-semibold text-primary">Sort by: </span>
+          <span class="font-semibold text-secondary">{{ selected }}</span>
+        </DropdownSelect>
+        <DropdownSelect
+          v-if="false"
+          v-slot="{ selected }"
+          v-model="Filters.filter"
+          class="max-w-[16rem]"
+          name="Filter Dropdown"
+          :options="['Current user', 'All users']"
+          placeholder="Select..."
+        >
+          <span class="font-semibold text-primary">Filter by: </span>
+          <span class="font-semibold text-secondary">{{ selected }}</span>
+        </DropdownSelect>
+      </div>
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-2">
+        <div class="instance">
+          <div class="button-base bg-bg-raised rounded-2xl p-4 text-center h-full w-full flex items-center justify-center flex-col gap-3" @click="handleModal">
+            <PlusIcon alt="Mod card" class="w-8 h-8 text-secondary" />
+            <span>Add new skin</span>
+          </div>
+        </div>
+        <SkinSave
+          v-for="skin in filteredResults"
+          :key="skin"
+          :data="skin"
+          @contextmenu.prevent.stop="(event) => handleRightClick(event, skin)"
+          @set-skin="(data) => clickCard(data)"
+        />
+      </div>
+      <ContextMenu ref="skinOptions" @option-clicked="handleOptionsClick">
+        <template #use> <PlayIcon /> Use </template>
+        <template v-if="Filters.sort === 'Custom'" #left>
+          <ChevronLeftIcon /> Move Left
+        </template>
+        <template v-if="Filters.sort === 'Custom'" #right>
+          <ChevronRightIcon /> Move Right
+        </template>
+        <template #edit> <EyeIcon /> Edit </template>
+        <template #duplicate> <ClipboardCopyIcon /> Duplicate </template>
+        <template #delete> <TrashIcon /> Delete </template>
+      </ContextMenu>
+    </div>
+  </div>
+  <ModalWrapper ref="skinModal" :header="formatMessage(messages.addANewSkin)" :noblur="!themeStore.advancedRendering">
+    <div v-if="changeSkinType === 'from file'" class="flex flex-col gap-4" :class="{ 'w-[50rem]': displaySkin }">
+      <div>
+        <canvas id="new_render" class="float-start pt-2 mr-4 cursor-grab active:cursor-grabbing" width="0" height="0" :class="{ 'hidden': !displaySkin }" />
+        <template v-if="displaySkin">
+          <label for="skin-name-input" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
+            {{ formatMessage(messages.name) }}
+          </label>
+          <input
+            id="skin-name-input"
+            v-model="selectedSkin.name"
+            autocomplete="off"
+            class="text-input"
+            type="text"
+            maxlength="30"
+            size="25"
+            :placeholder="formatMessage(messages.namePlaceholder, { username: selectedAccount.username })"
+          />
+          <span class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+            {{ formatMessage(messages.armStyle) }}
+          </span>
+          <RadioButtons v-slot="{ item }" v-model="selectedSkin.arms" :items="['classic', 'slim']" @click="handleArms">
+            {{ formatMessage(armStyleMessages[item]) }}
+          </RadioButtons>
+          <span class="mt-4 mb-1 text-lg font-extrabold text-contrast block">
+            {{ formatMessage(messages.cape) }}
+          </span>
+          <p v-if="capeData.length < 1 || capeData.length === 1 && capeData[0].id === 'no cape'" class="m-0">
+            {{ formatMessage(messages.noCapes) }}
+          </p>
+          <ScrollablePanel v-else :class="capeData.length > 10 ? 'h-[16rem]' : ''">
+            <div class="grid grid-cols-5 gap-2 cape-container items-center">
+              <button
+                v-for="cape in capeData"
+                :key="cape"
+                v-tooltip="cape.id !== 'no cape' ? cape.id : null"
+                class="p-0 py-2 px-2 transition-all border-0 flex gap-2 items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
+                :class="{
+                  'text-contrast font-medium bg-button-bg': selectedSkin.cape === cape.id,
+                  'text-primary bg-transparent': selectedSkin.cape !== cape.id,
+                }"
+                @click="() => {
+                  selectedSkin.cape = cape.id
+                  handleCape()
+                }"
+              >
+                <div class="flex gap-2 items-center">
+                  <RadioButtonChecked v-if="selectedSkin.cape === cape.id" class="h-5 w-5 text-brand" />
+                  <RadioButtonIcon v-else class="h-5 w-5" />
+                  <img v-if="cape.url" :src="cape.url" class="cape-img" :alt="cape.id" />
+                  <div v-else class="flex items-center h-20">
+                    {{ formatMessage(messages.capeNone) }}
+                  </div>
+                </div>
+              </button>
+            </div>
+          </ScrollablePanel>
+        </template>
+        <div v-else>
+          <button class="flex flex-col items-center gap-4 button-animation bg-button-bg cursor-pointer border-2 justify-center font-semibold rounded-2xl border-dashed border-button-border w-[34rem] h-60" @click="openskin">
+            <div class="flex items-center text-primary gap-2">
+              <UploadIcon class="h-5 w-5" />
+              {{ formatMessage(messages.selectSkinFile) }}
+            </div>
+            <p v-if="!validSkin" class="m-0 text-sm text-brand-red">
+              {{ formatMessage(messages.invalidSkin) }}
+            </p>
+          </button>
+        </div>
+      </div>
+      <div class="flex gap-2 flex-wrap">
+        <template v-if="displaySkin">
+          <ButtonStyled color="brand">
+            <button
+              :disabled="uploadingSkin || !selectedSkin.name.trim()"
+              @click="handleSkin('saveupload')"
+            >
+              <SpinnerIcon v-if="uploadingSkin" class="animate-spin" />
+              <CheckIcon v-else />
+              {{ formatMessage(uploadingSkin ? messages.uploadingSkin : messages.addAndUseSkin) }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button
+              :disabled="!selectedSkin.name.trim()"
+              @click="handleSkin('save')"
+            >
+              <PlusIcon />
+              {{ formatMessage(messages.addSkin) }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled>
+            <button :disabled="uploadingSkin" @click="handleSkin('upload')">
+              <SpinnerIcon v-if="uploadingSkin" class="animate-spin" />
+              <UploadIcon v-else />
+              {{ formatMessage(uploadingSkin ? messages.uploadingSkin : messages.useSkin) }}
+            </button>
+          </ButtonStyled>
+        </template>
+        <ButtonStyled>
+          <button @click="skinModal.hide()">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
+      </div>
+      <div v-if="false && !editSkin" class="input-group push-right">
+        <Button :disabled="!validSkin || uploadingSkin" @click="handleSkin('upload')">
+          <UploadIcon />
+          {{ uploadingSkin ? 'Uploading...' : 'Use' }}
+        </Button>
+        <Button
+          :disabled="!validSkin || uploadingSkin || selectedSkin.name.trim() == ''"
+          @click="handleSkin('save')"
+        >
+          <SaveIcon />
+          Save
+        </Button>
+        <Button
+          color="primary"
+          :disabled="!validSkin || uploadingSkin || selectedSkin.name.trim() == ''"
+          @click="handleSkin('saveupload')"
+        >
+          <PlusIcon v-if="!uploadingSkin" />
+          {{ uploadingSkin ? 'Uploading...' : 'Save & Use' }}
+        </Button>
+      </div>
+      <div v-else-if="false" class="input-group push-right">
+        <Button @click="skinModal.hide()">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          :disabled="!validSkin || selectedSkin.name.trim() == ''"
+          @click="edit_skin_end"
+        >
+          <SaveIcon />
+          Update
+        </Button>
+      </div>
+    </div>
+    <div v-else class="modal-body">
+      <Chips v-model="importType" :items="['Mojang', 'Curseforge']" @click="handleImportType" />
+      <div class="path-selection">
+        <h3>{{ importer.display }} path</h3>
+        <div class="path-input">
+          <div class="iconified-input">
+            <FolderOpenIcon />
+            <input v-model="importer.path" type="text" placeholder="Path to launcher" />
+            <Button @click="() => (importer.path = '')">
+              <XIcon />
+            </Button>
+          </div>
+          <Button icon-only @click="selectLauncherPath">
+            <FolderSearchIcon />
+          </Button>
+          <Button icon-only @click="reload">
+            <UpdatedIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="table">
+        <div class="table-head table-row">
+          <div class="toggle-all table-cell">
+            <Checkbox
+              class="select-checkbox"
+              :model-value="false"
+              @update:model-value="
+                (newValue) => importer.skinNames.forEach((child) => (child.selected = newValue))
+              "
+            />
+          </div>
+          <div class="name-cell table-cell">All skins</div>
+        </div>
+        <div v-if="importer.skinNames.length > 0" class="table-content">
+          <div v-for="skin in importer.skinNames" :key="skin" class="table-row">
+            <div class="checkbox-cell table-cell">
+              <Checkbox v-model="skin.selected" class="select-checkbox" />
+            </div>
+            <div class="name-cell table-cell">
+              {{ skin.name }}
+            </div>
+          </div>
+        </div>
+        <div v-else class="table-content empty">No skins found</div>
+      </div>
+      <div class="button-row">
+        <Button
+          :disabled="
+            loading ||
+            !Array.from(importer.skinNames)
+              .flatMap((e) => e)
+              .some((e) => e.selected)
+          "
+          color="primary"
+          @click="next"
+        >
+          {{
+            loading
+              ? 'Importing...'
+              : Array.from(importer.skinNames)
+                    .flatMap((e) => e)
+                    .some((e) => e.selected)
+                ? `Import ${
+                    Array.from(importer.skinNames)
+                      .flatMap((e) => e)
+                      .filter((e) => e.selected).length
+                  } skins`
+                : 'Select skins to import'
+          }}
+        </Button>
+        <ProgressBar v-if="loading" :progress="(importedSkins / (totalSkins + 0.0001)) * 100" />
+      </div>
+    </div>
+  </ModalWrapper>
+  <ConfirmModal
+    ref="deleteConfirmModal"
+    title="Are you sure you want to delete this skin?"
+    description="If you proceed, the skin will be removed for all users. You will not be able to recover it."
+    :has-to-type="false"
+    proceed-label="Delete"
+    :noblur="!themeStore.advancedRendering"
+    @proceed="deleteSkin"
+  />
+  <Notifications ref="notificationsWrapper" />
+</template>
+
+<script setup>
+import {
+  Notifications,
+  Button,
+  ConfirmModal,
+  Chips,
+  Checkbox,
+  DropdownSelect,
+  ButtonStyled,
+  ScrollablePanel, RadioButtons
+} from '@modrinth/ui'
+import {
+  CheckIcon,
+  RadioButtonIcon,
+  RadioButtonChecked,
+  PlusIcon,
+  SpinnerIcon,
+  SaveIcon,
+  SearchIcon,
+  UploadIcon,
+  UpdatedIcon,
+  PlayIcon,
+  FolderOpenIcon,
+  FolderSearchIcon,
+  ClipboardCopyIcon,
+  XIcon,
+  EyeIcon,
+  TrashIcon,
+  ChevronRightIcon,
+  ChevronLeftIcon,
+} from '@modrinth/assets'
+import { ref, onMounted, watch, computed, onBeforeUnmount, onUnmounted } from 'vue'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { handleError, useTheming } from '@/store/state.js'
+import { useNotifications } from '@/store/notifications.js'
+import { open } from '@tauri-apps/plugin-dialog'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import dayjs from 'dayjs'
+import SkinSave from '@/components/ui/SkinSave.vue'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import { get_default_launcher_path } from '@/helpers/import.js'
+import {
+  check_image,
+  check_skin,
+  loaded_skins,
+  get_user_skin_data,
+  get_launcher_names,
+  selectedAccount,
+  set_skin,
+  save_skin,
+  import_skin,
+  delete_skin,
+  get_order,
+  save_order,
+  get_skins,
+  get_render,
+  get_cape_data,
+  get_heads,
+  set_cape,
+  save_filters,
+  Filters,
+} from '@/helpers/skin_manager.js'
+import { IdleAnimation, SkinViewer, WalkingAnimation } from 'skinview3d'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+import { getCurrentWebview } from '@tauri-apps/api/webview'
+import { defineMessage, defineMessages, useVIntl } from '@vintl/vintl'
+
+const { formatMessage } = useVIntl()
+
+const themeStore = useTheming()
+const notificationsWrapper = ref(null)
+
+const skinModal = ref(null)
+const deleteConfirmModal = ref(null)
+const skinOptions = ref(null)
+const changeSkinType = ref('from file')
+
+const skinData = ref({})
+const selectedSkin = ref({
+  arms: 'classic',
+  cape: 'no cape',
+  name: '',
+  skin: '',
+  unlocked_capes: [],
+})
+
+const displaySkin = ref(null)
+const currentRender = ref(null)
+const modalRender = ref(null)
+
+const InLibrary = ref(true)
+const validSkin = ref(false)
+const uploadingSkin = ref(false)
+const editSkin = ref(false)
+
+const loading = ref(false)
+const importedSkins = ref(0)
+const totalSkins = ref(0)
+const importer = ref({
+  skinNames: [],
+  path: '',
+  display: '',
+})
+const importType = ref('Mojang')
+
+const skinSaves = ref(await get_skins().catch(handleError))
+const skinOrder = ref([])
+
+const capeData = ref([])
+
+const search = ref('')
+
+watch(notificationsWrapper, () => {
+  useNotifications().setNotifs(notificationsWrapper.value)
+})
+
+const filteredResults = computed(() => {
+  let saves = skinSaves.value.filter((save) => {
+    return save.name.toLowerCase().includes(search.value.toLowerCase())
+  })
+
+  if (Filters.value.filter === 'Current user') {
+    saves = saves.filter((save) => {
+      return save.user === selectedAccount.value.id
+    })
+  }
+
+  if (Filters.value.sort === 'Name') {
+    saves.sort((a, b) => {
+      return a.name.localeCompare(b.name)
+    })
+  }
+
+  if (Filters.value.sort === 'Custom') {
+    saves.sort((a, b) => {
+      return skinOrder.value.indexOf(a.id) - skinOrder.value.indexOf(b.id)
+    })
+  }
+
+  if (Filters.value.sort === 'Date created') {
+    saves.sort((a, b) => {
+      return dayjs(b.created).diff(dayjs(a.created))
+    })
+  }
+
+  if (Filters.value.sort === 'Date modified') {
+    saves.sort((a, b) => {
+      return dayjs(b.updated).diff(dayjs(a.updated))
+    })
+  }
+  return saves
+})
+
+const moveCard = async (move, id) => {
+  let order = Array.from(skinOrder.value)
+  if (Filters.value.filter === 'Current user') {
+    const saves = Array.from(skinSaves.value).sort((a, b) => {
+      return skinOrder.value.indexOf(a.id) - skinOrder.value.indexOf(b.id)
+    })
+    order = order.filter((_, i) => {
+      return saves[i].user === selectedAccount.value.id
+    })
+  }
+  const index = order.indexOf(id)
+  if (index == 0 && move == -1) return
+  if (index == order.length - 1 && move == 1) return
+
+  const targetIndex = skinOrder.value.indexOf(order[index + move])
+  const currentIndex = skinOrder.value.indexOf(id)
+  skinOrder.value.splice(currentIndex, 1)
+  skinOrder.value.splice(targetIndex, 0, id)
+  await save_order(skinOrder.value, selectedAccount.value.id)
+}
+
+const handleRightClick = (event, item) => {
+  let baseOptions = [
+    {
+      name: 'use',
+      color: 'primary',
+    },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'duplicate' },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      color: 'danger',
+    },
+  ]
+
+  if (Filters.value.sort === 'Custom') {
+    baseOptions = [
+      {
+        name: 'use',
+        color: 'primary',
+      },
+      { type: 'divider' },
+      { name: 'edit' },
+      { name: 'duplicate' },
+      { type: 'divider' },
+      { name: 'left' },
+      { name: 'right' },
+      { type: 'divider' },
+      {
+        name: 'delete',
+        color: 'danger',
+      },
+    ]
+  }
+
+  skinOptions.value.showMenu(event, item, baseOptions)
+}
+
+const handleOptionsClick = async (args) => {
+  switch (args.option) {
+    case 'use':
+      selectedSkin.value = {
+        arms: args.item.arms,
+        cape: args.item.cape,
+        skin: args.item.skin,
+      }
+      await handleSkin('upload')
+      break
+    case 'left':
+      if (Filters.value.sort === 'Custom') await moveCard(-1, args.item.id)
+      break
+    case 'right':
+      if (Filters.value.sort === 'Custom') await moveCard(1, args.item.id)
+      break
+    case 'edit':
+      await edit_skin(args.item)
+      break
+    case 'duplicate':
+      await duplicate_skin(args.item)
+      break
+    case 'delete':
+      selectedSkin.value = args.item
+      deleteConfirmModal.value.show()
+      break
+  }
+}
+
+const deleteSkin = async () => {
+  skinSaves.value.splice(skinSaves.value.indexOf(selectedSkin.value), 1)
+  await delete_skin(selectedSkin.value.id).catch(handleError)
+  InLibrary.value = await check_skin(skinData.value.skin, selectedAccount.value.id).catch(
+    handleError,
+  )
+}
+
+const selectLauncherPath = async () => {
+  importer.value.path = await open({ multiple: false, directory: true })
+
+  if (importer.value.path) {
+    await reload()
+  }
+}
+
+const reload = async () => {
+  importer.value.skinNames = get_launcher_names(importer.value.path, importType.value).catch(
+    handleError,
+  )
+}
+
+const next = async () => {
+  importedSkins.value = 0
+  totalSkins.value = Array.from(importer.value.skinNames)
+    .flatMap((e) => e)
+    .filter((e) => e.selected).length
+  loading.value = true
+  for (const skin of importer.value.skinNames.filter((skin) => skin.selected)) {
+    const data = await import_skin(skin.id, importer.value.path, importType.value).catch(
+      handleError,
+    )
+    const model = await get_render(data).catch(handleError)
+    await save_skin(selectedAccount.value.id, data, skin.name, model, '').catch(handleError)
+    skin.selected = false
+    importedSkins.value++
+  }
+  skinSaves.value = await get_skins().catch(handleError)
+  skinOrder.value = await get_order(selectedAccount.value.id).catch(handleError)
+  loading.value = false
+  skinModal.value.hide()
+}
+
+const handleModal = async (skin = undefined) => {
+  changeSkinType.value = 'from file'
+  editSkin.value = false
+  validSkin.value = true
+  displaySkin.value = undefined
+  selectedSkin.value.skin = skinData.value.skin
+  await skinModal.value.show()
+  selectedSkin.value.arms = skinData.value.arms
+  selectedSkin.value.cape = skinData.value.cape
+  await create_modal_render()
+}
+
+const handleAdd = async () => {
+  const model = await get_render(skinData.value).catch(handleError)
+  await save_skin(selectedAccount.value.id, skinData.value, 'untitled', model, '').catch(
+    handleError,
+  )
+  skinSaves.value = await get_skins().catch(handleError)
+  skinOrder.value = await get_order(selectedAccount.value.id).catch(handleError)
+  InLibrary.value = true
+}
+
+const skinClear = async () => {
+  validSkin.value = false
+  displaySkin.value = null
+  selectedSkin.value = {
+    arms: 'classic',
+    cape: 'no cape',
+    name: '',
+    skin: '',
+    unlocked_capes: [],
+  }
+  if (modalRender.value) {
+    modalRender.value.resetSkin()
+    modalRender.value.resetCape()
+  }
+}
+
+const handleArms = async () => {
+  if (validSkin.value) {
+    modalRender.value.loadSkin(displaySkin.value, { model: convert_arms(selectedSkin.value.arms) })
+  }
+}
+
+const handleCape = async () => {
+  if (validSkin.value) {
+    if (selectedSkin.value.cape == 'no cape') modalRender.value.resetCape()
+    else
+      modalRender.value.loadCape(
+        await get_cape_data(selectedSkin.value.cape, 'url').catch(handleError),
+      )
+  }
+}
+
+const clickCard = (data) => {
+  selectedSkin.value = data
+  handleSkin('upload')
+}
+
+const handleSkin = async (state) => {
+  if (state.includes('save')) {
+    const model = await get_render(selectedSkin.value).catch(handleError)
+    await save_skin(
+      selectedAccount.value.id,
+      selectedSkin.value,
+      selectedSkin.value.name.trim(),
+      model,
+      '',
+    ).catch(handleError)
+    skinSaves.value = await get_skins().catch(handleError)
+    skinOrder.value = await get_order(selectedAccount.value.id).catch(handleError)
+  }
+  if (state.includes('upload')) {
+    uploadingSkin.value = true
+    const capeid = await get_cape_data(selectedSkin.value.cape, 'id').catch(handleError)
+    const uploadedCape = await set_cape(capeid, selectedAccount.value.access_token).catch(
+      handleError,
+    )
+    const uploadedSkin = await set_skin(
+      selectedSkin.value.skin,
+      selectedSkin.value.arms,
+      selectedAccount.value,
+    ).catch(handleError)
+
+    if (uploadedSkin) {
+      if (!selectedSkin.value.skin.startsWith('data:image/png;base64,')) {
+        skinData.value.skin = convertFileSrc(selectedSkin.value.skin)
+      } else {
+        skinData.value.skin = selectedSkin.value.skin
+      }
+      skinData.value.arms = selectedSkin.value.arms
+      skinData.value.cape = selectedSkin.value.cape
+      InLibrary.value = await check_skin(skinData.value.skin, selectedAccount.value.id).catch(
+        handleError,
+      )
+      const renderArms = convert_arms(selectedSkin.value.arms)
+      currentRender.value.loadSkin(skinData.value.skin, { model: renderArms })
+    } else {
+      notificationsWrapper.value.addNotification({
+        title: 'Error Uploading Skin',
+        text: 'Improper response from Mojang API. Please try again soon',
+        type: 'error',
+      })
+    }
+    if (uploadedCape) {
+      if (capeid == 'no cape') currentRender.value.resetCape()
+      else {
+        const capeurl = await get_cape_data(selectedSkin.value.cape, 'url').catch(handleError)
+        currentRender.value.loadCape(capeurl)
+      }
+    } else {
+      notificationsWrapper.value.addNotification({
+        title: 'Error Uploading Cape',
+        text: 'Improper response from Mojang API. Please try again soon',
+        type: 'error',
+      })
+    }
+    uploadingSkin.value = false
+    get_heads()
+  }
+
+  skinModal.value.hide()
+}
+
+const edit_skin = async (data) => {
+  changeSkinType.value = 'from file'
+  editSkin.value = true
+  validSkin.value = true
+  displaySkin.value = data.skin
+  selectedSkin.value.skin = data.skin
+  selectedSkin.value.name = data.name
+  selectedSkin.value.id = data.id
+  selectedSkin.value.user = data.user
+  await skinModal.value.show()
+  selectedSkin.value.arms = data.arms
+  selectedSkin.value.cape = data.cape
+  await create_modal_render()
+}
+
+const edit_skin_end = async () => {
+  const data = {
+    skin: selectedSkin.value.skin,
+    cape: selectedSkin.value.cape,
+    arms: selectedSkin.value.arms,
+    unlocked_capes: [],
+  }
+
+  const model = await get_render(data).catch(handleError)
+  await save_skin(
+    selectedSkin.value.user,
+    data,
+    selectedSkin.value.name.trim(),
+    model,
+    selectedSkin.value.id,
+  ).catch(handleError)
+  skinSaves.value = await get_skins().catch(handleError)
+  skinClear()
+  editSkin.value = false
+
+  skinModal.value.hide()
+  InLibrary.value = await check_skin(skinData.value.skin, selectedAccount.value.id).catch(
+    handleError,
+  )
+}
+
+const duplicate_skin = async (args) => {
+  const data = {}
+  data.skin = args.skin
+  data.cape = args.cape
+  data.arms = args.arms
+  data.unlocked_capes = []
+  await save_skin(selectedAccount.value.id, data, args.name, args.model, '').catch(handleError)
+  skinSaves.value = await get_skins().catch(handleError)
+  skinOrder.value = await get_order(selectedAccount.value.id).catch(handleError)
+}
+
+const unlisten = await getCurrentWebview().onDragDropEvent(async (event) => {
+  // Only if modal is showing
+  if (event.payload.type !== 'drop') return
+  const { paths } = event.payload
+  if (paths && paths.length > 0 && paths[0].endsWith('.png')) {
+    await handleModal()
+    await loadSkinFile(paths[0]).catch(handleError)
+    skinModal.value.show()
+  }
+})
+
+const openskin = async () => {
+  await loadSkinFile(await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png'],
+      },
+    ],
+  }))
+}
+
+const loadSkinFile = async (file) => {
+  selectedSkin.value.skin = file
+
+  if (!selectedSkin.value.skin) {
+    skinClear()
+    return
+  }
+  validSkin.value = await check_image(selectedSkin.value.skin).catch(handleError)
+  if (!validSkin.value) {
+    skinClear()
+    return
+  }
+  displaySkin.value = convertFileSrc(selectedSkin.value.skin)
+  create_modal_render()
+}
+
+const create_modal_render = async () => {
+  modalRender.value = new SkinViewer({
+    canvas: document.getElementById('new_render'),
+    width: 230,
+    height: 400,
+  })
+  modalRender.value.animation = new IdleAnimation()
+  modalRender.value.controls.enableZoom = false
+  modalRender.value.loadSkin(displaySkin.value, { model: convert_arms(selectedSkin.value.arms) })
+  if (selectedSkin.value.cape !== 'no cape')
+    modalRender.value.loadCape(
+      await get_cape_data(selectedSkin.value.cape, 'url').catch(handleError),
+    )
+}
+
+const create_render = async () => {
+  skinData.value = await get_user_skin_data(selectedAccount.value.id).catch(handleError)
+  InLibrary.value = await check_skin(skinData.value.skin, selectedAccount.value.id).catch(
+    handleError,
+  )
+  const arms = convert_arms(skinData.value.arms)
+  const cape = await get_cape_data(skinData.value.cape, 'url').catch(handleError)
+  currentRender.value = new SkinViewer({
+    canvas: document.getElementById('skin_container'),
+    width: 200,
+    height: 250,
+    skin: skinData.value.skin,
+    model: arms,
+  })
+  if (cape !== 'no cape') currentRender.value.loadCape(cape)
+  currentRender.value.animation = new WalkingAnimation()
+  currentRender.value.animation.speed = 0.5
+  currentRender.value.animation.headBobbing = false
+  currentRender.value.controls.enableZoom = false
+}
+
+const update_render = async (account) => {
+  if (currentRender.value == null) return
+  skinData.value = await get_user_skin_data(account).catch(handleError)
+  InLibrary.value = await check_skin(skinData.value.skin, account).catch(handleError)
+  currentRender.value.loadSkin(skinData.value.skin, {
+    model: convert_arms(skinData.value.arms),
+  })
+  if (skinData.value.cape == 'no cape') currentRender.value.resetCape()
+  else
+    currentRender.value.loadCape(await get_cape_data(skinData.value.cape, 'url').catch(handleError))
+}
+
+const handleModalType = async () => {
+  if (changeSkinType.value == 'import from launcher') {
+    handleImportType()
+  }
+}
+
+const handleImportType = async () => {
+  if (importType.value == 'Mojang') importer.value.display = '.minecraft'
+  else importer.value.display = importType.value
+  importer.value.path = await get_default_launcher_path(importType.value).catch(handleError)
+  if (importer.value.path !== null) {
+    importer.value.skinNames = await get_launcher_names(
+      importer.value.path,
+      importType.value,
+    ).catch(handleError)
+  } else importer.value.path = ''
+}
+
+watch(selectedAccount, async (newAccount) => {
+  console.log(newAccount)
+  skinOrder.value = await get_order(newAccount.id).catch(handleError)
+  await update_render(newAccount.id)
+})
+
+watch(
+  loaded_skins,
+  async (val) => {
+    if (val) {
+      await update_render(selectedAccount.value.id)
+    }
+  },
+  { once: true },
+)
+
+function convert_arms(arms) {
+  if (arms == 'classic') arms = 'default'
+  return arms
+}
+
+onMounted(async () => {
+  Filters.value.filter = 'All users'
+  await create_render()
+  await get_capes()
+})
+
+onBeforeUnmount(async () => {
+  await save_filters()
+})
+
+onUnmounted(() => {
+  unlisten()
+})
+
+async function get_capes() {
+  capeData.value = []
+  for (const cape of skinData.value.unlocked_capes) {
+    const url = cape === 'no cape' ? null : await get_cape_data(cape, 'url').catch(handleError)
+    capeData.value.push({
+      id: cape,
+      url,
+    })
+  }
+}
+
+const messages = defineMessages({
+  currentSkin: {
+    id: 'app.skin-manager.current-skin',
+    defaultMessage: 'Current skin'
+  },
+  addNewSkin: {
+    id: 'app.skin-manager.add-new-skin',
+    defaultMessage: 'Add new skin',
+  },
+  addANewSkin: {
+    id: 'app.skin-manager.add-a-new-skin',
+    defaultMessage: 'Add a new skin',
+  },
+  name: {
+    id: 'app.skin-manager.skin-name',
+    defaultMessage: 'Name'
+  },
+  namePlaceholder: {
+    id: 'app.skin-manager.skin-name.placeholder',
+    defaultMessage: `{username}'s skin`
+  },
+  armStyle: {
+    id: 'app.skin-manager.arm-style',
+    defaultMessage: 'Arm style'
+  },
+  cape: {
+    id: 'app.skin-manager.cape',
+    defaultMessage: 'Cape'
+  },
+  noCapes: {
+    id: 'app.skin-manager.no-capes',
+    defaultMessage: `You don't have any capes unlocked. Unlock capes through official Minecraft events and campaigns.`
+  },
+  capeNone: {
+    id: 'app.skin-manager.cape.none',
+    defaultMessage: 'None'
+  },
+  selectSkinFile: {
+    id: 'app.skin-manager.select-skin-file',
+    defaultMessage: 'Select or drop a valid skin file here to begin'
+  },
+  useSkin: {
+    id: 'app.skin-manager.use',
+    defaultMessage: 'Use skin'
+  },
+  addSkin: {
+    id: 'app.skin-manager.add',
+    defaultMessage: 'Add to library'
+  },
+  addAndUseSkin: {
+    id: 'app.skin-manager.add-and-use',
+    defaultMessage: 'Add and use'
+  },
+  uploadingSkin: {
+    id: 'app.skin-manager.uploading-skin',
+    defaultMessage: 'Uploading...'
+  },
+  invalidSkin: {
+    id: 'app.skin-manager.invalid-skin',
+    defaultMessage: 'Selected skin file is invalid. Please try another one.'
+  },
+})
+
+const armStyleMessages = {
+  classic: defineMessage({
+    id: 'app.skin-manager.arm-style.wide',
+    defaultMessage: 'Wide'
+  }),
+  slim: defineMessage({
+    id: 'app.skin-manager.arm-style.slim',
+    defaultMessage: 'Slim'
+  }),
+}
+</script>
+
+<style scoped lang="scss">
+.cape-img {
+  box-sizing: content-box;
+  width: 10px;
+  height: 16px;
+  object-fit: none;
+  image-rendering: pixelated;
+  object-position: -1px -1px;
+  zoom: 5;
+  background-color: var(--color-button-bg);
+  border: 0.25px solid var(--color-button-border);
+  border-radius: 1px;
+  box-shadow: 0px 0.25px 2px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/apps/app-frontend/src/pages/index.js b/apps/app-frontend/src/pages/index.js
index 6c4866b46a..ba471f40f0 100644
--- a/apps/app-frontend/src/pages/index.js
+++ b/apps/app-frontend/src/pages/index.js
@@ -1,4 +1,5 @@
 import Index from './Index.vue'
 import Browse from './Browse.vue'
+import SkinManager from './SkinManager.vue'
 
-export { Index, Browse }
+export { Index, Browse, SkinManager }
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 8f2805abbf..d2f3d52e08 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -30,9 +30,23 @@
       </template>
       <template #actions>
         <div class="flex gap-2">
-          <ButtonStyled v-if="instance.install_stage !== 'installed'" color="brand" size="large">
+          <ButtonStyled
+            v-if="instance.install_stage.includes('installing')"
+            color="brand"
+            size="large"
+          >
             <button disabled>Installing...</button>
           </ButtonStyled>
+          <ButtonStyled
+            v-else-if="instance.install_stage !== 'installed'"
+            color="brand"
+            size="large"
+          >
+            <button @click="repairInstance()">
+              <DownloadIcon />
+              Repair
+            </button>
+          </ButtonStyled>
           <ButtonStyled v-else-if="playing === true" color="red" size="large">
             <button @click="stopInstance('InstancePage')">
               <StopCircleIcon />
@@ -137,38 +151,39 @@
 <script setup>
 import {
   Avatar,
-  ContentPageHeader,
   ButtonStyled,
-  OverflowMenu,
+  ContentPageHeader,
   LoadingIndicator,
+  OverflowMenu,
 } from '@modrinth/ui'
 import {
-  UserPlusIcon,
-  ServerIcon,
-  PackageIcon,
-  SettingsIcon,
-  PlayIcon,
-  StopCircleIcon,
-  EditIcon,
-  FolderOpenIcon,
+  CheckCircleIcon,
   ClipboardCopyIcon,
-  PlusIcon,
+  DownloadIcon,
+  EditIcon,
   ExternalIcon,
-  HashIcon,
-  GlobeIcon,
   EyeIcon,
-  XIcon,
-  CheckCircleIcon,
-  UpdatedIcon,
-  MoreVerticalIcon,
+  FolderOpenIcon,
   GameIcon,
+  GlobeIcon,
+  HashIcon,
+  MoreVerticalIcon,
+  PackageIcon,
+  PlayIcon,
+  PlusIcon,
+  ServerIcon,
+  SettingsIcon,
+  StopCircleIcon,
   TimerIcon,
+  UpdatedIcon,
+  UserPlusIcon,
+  XIcon,
 } from '@modrinth/assets'
-import { get, get_full_path, kill, run } from '@/helpers/profile'
+import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
 import { get_by_profile_path } from '@/helpers/process'
 import { process_listener, profile_listener } from '@/helpers/events'
 import { useRoute, useRouter } from 'vue-router'
-import { ref, onUnmounted, computed, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
 import { showProfileInFolder } from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
@@ -294,6 +309,10 @@ const stopInstance = async (context) => {
   })
 }
 
+const repairInstance = async () => {
+  await finish_install(instance.value)
+}
+
 const handleRightClick = (event) => {
   const baseOptions = [
     { name: 'add_content' },
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 49eae84618..803db3b181 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -51,6 +51,14 @@ export default new createRouter({
         },
       ],
     },
+    {
+      path: '/SkinManager',
+      name: 'SkinManager',
+      component: Pages.SkinManager,
+      meta: {
+        breadcrumb: [{ name: 'Change skin' }],
+      },
+    },
     {
       path: '/project/:id',
       name: 'Project',
diff --git a/apps/app-frontend/src/store/install.js b/apps/app-frontend/src/store/install.js
index e6562ab655..90ca66cd0e 100644
--- a/apps/app-frontend/src/store/install.js
+++ b/apps/app-frontend/src/store/install.js
@@ -2,14 +2,14 @@ import { defineStore } from 'pinia'
 import {
   add_project_from_version,
   check_installed,
-  list,
   get,
   get_projects,
+  list,
   remove_project,
 } from '@/helpers/profile.js'
 import { handleError } from '@/store/notifications.js'
 import { get_project, get_version_many } from '@/helpers/cache.js'
-import { install as packInstall } from '@/helpers/pack.js'
+import { create_profile_and_install as packInstall } from '@/helpers/pack.js'
 import { trackEvent } from '@/helpers/analytics.js'
 import dayjs from 'dayjs'
 
diff --git a/apps/app/build.rs b/apps/app/build.rs
index ae314cd9b4..eb01a41d93 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -240,6 +240,33 @@ fn main() {
                     .default_permission(
                         DefaultPermissionRule::AllowAllCommands,
                     ),
+            )
+            .plugin(
+                "skin-manager",
+                InlinedPlugin::new()
+                    .commands(&[
+                        "get_user_skin_data",
+                        "get_heads",
+                        "set_skin",
+                        "delete_skin",
+                        "import_skin",
+                        "check_image",
+                        "check_skin",
+                        "get_cape_data",
+                        "cache_users_skins",
+                        "cache_new_user_skin",
+                        "get_launcher_names",
+                        "save_skin",
+                        "get_skins",
+                        "set_cape",
+                        "get_order",
+                        "save_order",
+                        "get_filters",
+                        "save_filters",
+                    ])
+                    .default_permission(
+                        DefaultPermissionRule::AllowAllCommands,
+                    ),
             ),
     )
     .expect("Failed to run tauri-build");
diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index 1a93620cde..587f2dcbc3 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -2,7 +2,9 @@
   "identifier": "plugins",
   "description": "",
   "local": true,
-  "windows": ["main"],
+  "windows": [
+    "main"
+  ],
   "permissions": [
     "dialog:allow-open",
     "dialog:allow-confirm",
@@ -19,7 +21,6 @@
     "window-state:default",
     "window-state:allow-restore-state",
     "window-state:allow-save-window-state",
-
     "auth:default",
     "import:default",
     "jre:default",
@@ -35,6 +36,7 @@
     "tags:default",
     "utils:default",
     "ads:default",
-    "friends:default"
+    "friends:default",
+    "skin-manager:default"
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/app/package.json b/apps/app/package.json
index 168ac3454c..3e13e038a3 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -16,4 +16,4 @@
     "@modrinth/app-lib": "workspace:*",
     "@modrinth/daedalus": "workspace:*"
   }
-}
+}
\ No newline at end of file
diff --git a/apps/app/src/api/auth.rs b/apps/app/src/api/auth.rs
index b084feb4d7..8f000a41cf 100644
--- a/apps/app/src/api/auth.rs
+++ b/apps/app/src/api/auth.rs
@@ -12,6 +12,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
             get_default_user,
             set_default_user,
             get_users,
+            auth_refresh,
         ])
         .build()
 }
@@ -97,3 +98,10 @@ pub async fn set_default_user(user: uuid::Uuid) -> Result<()> {
 pub async fn get_users() -> Result<Vec<Credentials>> {
     Ok(minecraft_auth::users().await?)
 }
+
+/// Refreshes a credential
+// invoke('plugin:auth|auth_refresh',user)
+#[tauri::command]
+pub async fn auth_refresh(user: uuid::Uuid) -> Result<Credentials> {
+    Ok(minecraft_auth::refresh(user).await?)
+}
diff --git a/apps/app/src/api/mod.rs b/apps/app/src/api/mod.rs
index 82c33888f2..be23d07daa 100644
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -13,6 +13,7 @@ pub mod process;
 pub mod profile;
 pub mod profile_create;
 pub mod settings;
+pub mod skin_manager;
 pub mod tags;
 pub mod utils;
 
diff --git a/apps/app/src/api/skin_manager.rs b/apps/app/src/api/skin_manager.rs
new file mode 100644
index 0000000000..7ccd70804a
--- /dev/null
+++ b/apps/app/src/api/skin_manager.rs
@@ -0,0 +1,180 @@
+use std::{collections::HashMap, path::PathBuf};
+
+use crate::api::Result;
+use theseus::{
+    prelude::Credentials,
+    skin_manager::{Filters, MojangNames, SkinCache, SkinSave},
+};
+
+use uuid::Uuid;
+
+pub fn init<R: tauri::Runtime>() -> tauri::plugin::TauriPlugin<R> {
+    tauri::plugin::Builder::new("skin-manager")
+        .invoke_handler(tauri::generate_handler![
+            get_user_skin_data,
+            get_heads,
+            set_skin,
+            delete_skin,
+            import_skin,
+            check_image,
+            check_skin,
+            get_cape_data,
+            cache_users_skins,
+            cache_new_user_skin,
+            get_launcher_names,
+            save_skin,
+            get_skins,
+            set_cape,
+            get_order,
+            save_order,
+            get_filters,
+            save_filters
+        ])
+        .build()
+}
+
+// Get image size
+// invoke('plugin:skin|check_image',path)
+#[tauri::command]
+pub async fn check_image(path: String) -> Result<bool> {
+    Ok(theseus::skin_manager::check_image(path).await?)
+}
+
+// Returns true if skin is not in library
+// invoke('plugin:skin|check_skin',skin)
+#[tauri::command]
+pub async fn check_skin(skin: String, id: Uuid) -> Result<bool> {
+    Ok(theseus::skin_manager::check_skin(skin, id).await?)
+}
+
+// Returns filter options
+// invoke('plugin:skin|get_filters')
+#[tauri::command]
+pub async fn get_filters() -> Result<Filters> {
+    Ok(theseus::skin_manager::get_filters().await?)
+}
+
+// Saves filter options
+// invoke('plugin:skin|save_filters',sort)
+#[tauri::command]
+pub async fn save_filters(filters: Filters) -> Result<bool> {
+    Ok(theseus::skin_manager::save_filters(filters).await?)
+}
+
+// Sets player's skin
+// invoke('plugin:skin|skin_set_skin', { skin, arms, user })
+#[tauri::command]
+pub async fn set_skin(
+    skin: String,
+    arms: String,
+    creds: Credentials,
+) -> Result<bool> {
+    Ok(theseus::skin_manager::set_skin(skin, arms, creds).await?)
+}
+
+// Sets the players cape
+// invoke('plugin:skin|skin_set_cape', { capeid, token })
+#[tauri::command]
+pub async fn set_cape(capeid: String, token: String) -> Result<bool> {
+    Ok(theseus::skin_manager::set_cape(capeid, token).await?)
+}
+
+// Returns cape id or url
+// invoke('plugin:skin|skin_set_cape', { cape, key })
+#[tauri::command]
+pub async fn get_cape_data(cape: String, key: String) -> Result<String> {
+    Ok(theseus::skin_manager::get_cape_data(cape, key).await?)
+}
+
+// Gets the current account's skin data
+// invoke('plugin:skin|skin_get_user_data', { id })
+#[tauri::command]
+pub async fn get_user_skin_data(id: Uuid) -> Result<SkinCache> {
+    Ok(theseus::skin_manager::get_user_skin_data(id).await?)
+}
+
+// Makes api request to mojang, updating all accounts' skin data
+// invoke('plugin:skin|skin_cache_users_skins')
+#[tauri::command]
+pub async fn cache_users_skins() -> Result<bool> {
+    Ok(theseus::skin_manager::cache_users_skins().await?)
+}
+
+// Makes api request to mojang, updating current account's skin data
+// invoke('plugin:skin|skin_cache_new_user_skin', { user })
+#[tauri::command]
+pub async fn cache_new_user_skin(creds: Credentials) -> Result<()> {
+    Ok(theseus::skin_manager::cache_new_user_skin(creds).await?)
+}
+
+// Saves the skin data to the manager
+// invoke('plugin:skin|skin_save_skin', { user, data, name, model, skinid })
+#[tauri::command]
+pub async fn save_skin(
+    user: Uuid,
+    data: SkinCache,
+    name: String,
+    model: String,
+    skinid: String,
+) -> Result<()> {
+    Ok(
+        theseus::skin_manager::save_skin(user, data, name, model, skinid)
+            .await?,
+    )
+}
+
+// Updates skin saves from the manager
+// invoke('plugin:skin|skin_update_skins', { id })
+#[tauri::command]
+pub async fn delete_skin(id: Uuid) -> Result<()> {
+    Ok(theseus::skin_manager::delete_skin(id).await?)
+}
+
+// Gets all account heads from the cache
+// invoke('plugin:skin|skin_get_heads')
+#[tauri::command]
+pub async fn get_heads() -> Result<HashMap<Uuid, String>> {
+    Ok(theseus::skin_manager::get_heads().await?)
+}
+
+// Gets all saved skins from the manager
+// invoke('plugin:skin|skin_get_skins')
+#[tauri::command]
+pub async fn get_skins() -> Result<Vec<SkinSave>> {
+    Ok(theseus::skin_manager::get_skins().await?)
+}
+
+// Gets custom skin order
+// invoke('plugin:skin|skin_get_order')
+#[tauri::command]
+pub async fn get_order(user: Uuid) -> Result<Vec<Uuid>> {
+    Ok(theseus::skin_manager::get_order(user).await?)
+}
+
+// Saves custom skin order
+// invoke('plugin:skin|skin_save_order')
+#[tauri::command]
+pub async fn save_order(order: Vec<Uuid>, user: Uuid) -> Result<()> {
+    Ok(theseus::skin_manager::save_order(order, user).await?)
+}
+
+// Gets a list of all saved skins in the mojang launcher
+// invoke('plugin:skin|skin_get_launcher_names', { path })
+#[tauri::command]
+pub async fn get_launcher_names(
+    path: PathBuf,
+    installer: String,
+) -> Result<Vec<MojangNames>> {
+    Ok(theseus::skin_manager::get_launcher_names(path, installer).await?)
+}
+
+// Adds the skin from the mojang launcher to the manager
+// invoke('plugin:skin|skin_import_skin', { name, path, user })
+#[tauri::command]
+pub async fn import_skin(
+    id: String,
+    path: PathBuf,
+    installer: String,
+) -> Result<SkinCache> {
+    Ok(theseus::skin_manager::import_skin(id, path, installer).await?)
+}
diff --git a/apps/app/src/assets/icons/skin-editor.svg b/apps/app/src/assets/icons/skin-editor.svg
new file mode 100644
index 0000000000..7626051500
--- /dev/null
+++ b/apps/app/src/assets/icons/skin-editor.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" transform="scale(-1 1)" viewBox="0 0 49.915 52.72">
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M15.71 31.484v19.07h18.63v-19.07l6.538 6.539 6.871-6.872-11.203-11.733H14.122L2.166 31.375l6.827 6.827z"/>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.993" d="M24.872 19.548v-6.44"/>
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.331" d="M24.704 13.202a5.518 5.518 0 0 1-5.518-5.518 5.518 5.518 0 0 1 5.518-5.518 5.518 5.518 0 0 1 5.518 5.518"/>
+</svg>
diff --git a/apps/app/src/main.rs b/apps/app/src/main.rs
index 402f3c8cc2..14c60baac6 100644
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -4,6 +4,7 @@
 )]
 
 use native_dialog::{MessageDialog, MessageType};
+use std::env;
 use tauri::{Listener, Manager};
 use theseus::prelude::*;
 
@@ -29,7 +30,12 @@ async fn initialize_state(app: tauri::AppHandle) -> api::Result<()> {
     theseus::EventState::init(app.clone()).await?;
 
     #[cfg(feature = "updater")]
-    {
+    'updater: {
+        if env::var("MODRINTH_EXTERNAL_UPDATE_PROVIDER").is_ok() {
+            State::init().await?;
+            break 'updater;
+        }
+
         use tauri_plugin_updater::UpdaterExt;
 
         let updater = app.updater_builder().build()?;
@@ -262,6 +268,7 @@ fn main() {
         .plugin(api::cache::init())
         .plugin(api::ads::init())
         .plugin(api::friends::init())
+        .plugin(api::skin_manager::init())
         .invoke_handler(tauri::generate_handler![
             initialize_state,
             is_dev,
diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index 37c5c20e51..c274c9de57 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -11,7 +11,12 @@
     "copyright": "",
     "targets": "all",
     "externalBin": [],
-    "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"],
+    "icon": [
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ],
     "windows": {
       "certificateThumbprint": null,
       "digestAlgorithm": "sha256",
@@ -38,7 +43,9 @@
     },
     "fileAssociations": [
       {
-        "ext": ["mrpack"],
+        "ext": [
+          "mrpack"
+        ],
         "mimeType": "application/zip+mrpack"
       }
     ]
@@ -50,7 +57,9 @@
   "plugins": {
     "deep-link": {
       "desktop": {
-        "schemes": ["modrinth"]
+        "schemes": [
+          "modrinth"
+        ]
       },
       "mobile": []
     }
@@ -76,14 +85,24 @@
     ],
     "security": {
       "assetProtocol": {
-        "scope": ["$APPDATA/caches/icons/*", "$APPCONFIG/caches/icons/*", "$CONFIG/caches/icons/*"],
+        "scope": [
+          "$APPDATA/caches/icons/*",
+          "$APPCONFIG/caches/icons/*",
+          "$CONFIG/caches/icons/*"
+        ],
         "enable": true
       },
-      "capabilities": ["ads", "core", "plugins"],
+      "capabilities": [
+        "ads",
+        "core",
+        "plugins"
+      ],
       "csp": {
         "default-src": "'self' customprotocol: asset:",
-        "connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs",
-        "font-src": ["https://cdn-raw.modrinth.com/fonts/inter/"],
+        "connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://*.sentry.io https://api.mclo.gs https://api.minecraftservices.com",
+        "font-src": [
+          "https://cdn-raw.modrinth.com/fonts/inter/"
+        ],
         "img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost blob: data:",
         "style-src": "'unsafe-inline' 'self'",
         "script-src": "https://*.posthog.com 'self'",
@@ -91,4 +110,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 73d2ce9ba3..e36ffc875b 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -184,7 +184,19 @@
         </div>
       </div>
     </div>
-    <NewModal ref="downloadModal">
+    <NewModal
+      ref="downloadModal"
+      :on-show="
+        () => {
+          navigateTo({ query: route.query, hash: '#download' });
+        }
+      "
+      :on-hide="
+        () => {
+          navigateTo({ query: route.query, hash: '' });
+        }
+      "
+    >
       <template #title>
         <Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
         <div class="truncate text-lg font-extrabold text-contrast">
@@ -275,7 +287,7 @@
               </div>
               <ScrollablePanel :class="project.game_versions.length > 4 ? 'h-[15rem]' : ''">
                 <ButtonStyled
-                  v-for="version in project.game_versions
+                  v-for="gameVersion in project.game_versions
                     .filter(
                       (x) =>
                         (versionFilter && x.includes(versionFilter)) ||
@@ -284,30 +296,39 @@
                     )
                     .slice()
                     .reverse()"
-                  :key="version"
-                  :color="currentGameVersion === version ? 'brand' : 'standard'"
+                  :key="gameVersion"
+                  :color="currentGameVersion === gameVersion ? 'brand' : 'standard'"
                 >
                   <button
                     v-tooltip="
-                      !possibleGameVersions.includes(version)
-                        ? `${project.title} does not support ${version} for ${formatCategory(currentPlatform)}`
+                      !possibleGameVersions.includes(gameVersion)
+                        ? `${project.title} does not support ${gameVersion} for ${formatCategory(currentPlatform)}`
                         : null
                     "
                     :class="{
-                      'looks-disabled !text-brand-red': !possibleGameVersions.includes(version),
+                      'looks-disabled !text-brand-red': !possibleGameVersions.includes(gameVersion),
                     }"
                     @click="
                       () => {
-                        userSelectedGameVersion = version;
+                        userSelectedGameVersion = gameVersion;
                         gameVersionAccordion.close();
                         if (!currentPlatform && platformAccordion) {
                           platformAccordion.open();
                         }
+
+                        navigateTo({
+                          query: {
+                            ...route.query,
+                            ...(userSelectedGameVersion && { version: userSelectedGameVersion }),
+                            ...(userSelectedPlatform && { loader: userSelectedPlatform }),
+                          },
+                          hash: route.hash,
+                        });
                       }
                     "
                   >
-                    {{ version }}
-                    <CheckIcon v-if="userSelectedGameVersion === version" />
+                    {{ gameVersion }}
+                    <CheckIcon v-if="userSelectedGameVersion === gameVersion" />
                   </button>
                 </ButtonStyled>
               </ScrollablePanel>
@@ -379,6 +400,15 @@
                         if (!currentGameVersion && gameVersionAccordion) {
                           gameVersionAccordion.open();
                         }
+
+                        navigateTo({
+                          query: {
+                            ...route.query,
+                            ...(userSelectedGameVersion && { version: userSelectedGameVersion }),
+                            ...(userSelectedPlatform && { loader: userSelectedPlatform }),
+                          },
+                          hash: route.hash,
+                        });
                       }
                     "
                   >
@@ -506,7 +536,7 @@
                       placeholder="Search collections..."
                       class="search-input menu-search"
                     />
-                    <div v-if="collections.length > 0" class="collections-list">
+                    <div v-if="collections.length > 0" class="collections-list text-primary">
                       <Checkbox
                         v-for="option in collections
                           .slice()
@@ -785,31 +815,31 @@
 </template>
 <script setup>
 import {
-  ScaleIcon,
-  AlignLeftIcon as DescriptionIcon,
   BookmarkIcon,
+  BookTextIcon,
+  CalendarIcon,
   ChartIcon,
   CheckIcon,
   ClipboardCopyIcon,
   CopyrightIcon,
+  AlignLeftIcon as DescriptionIcon,
   DownloadIcon,
   ExternalIcon,
+  ImageIcon as GalleryIcon,
   GameIcon,
   HeartIcon,
-  ImageIcon as GalleryIcon,
   InfoIcon,
   LinkIcon as LinksIcon,
   MoreVerticalIcon,
   PlusIcon,
   ReportIcon,
+  ScaleIcon,
   SearchIcon,
   SettingsIcon,
   TagsIcon,
   UsersIcon,
   VersionIcon,
   WrenchIcon,
-  BookTextIcon,
-  CalendarIcon,
 } from "@modrinth/assets";
 import {
   Avatar,
@@ -818,32 +848,33 @@ import {
   NewModal,
   OverflowMenu,
   PopoutMenu,
-  ScrollablePanel,
+  ProjectBackgroundGradient,
   ProjectHeader,
   ProjectSidebarCompatibility,
   ProjectSidebarCreators,
-  ProjectSidebarLinks,
   ProjectSidebarDetails,
-  ProjectBackgroundGradient,
+  ProjectSidebarLinks,
+  ScrollablePanel,
 } from "@modrinth/ui";
+import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
 import { formatCategory, isRejected, isStaff, isUnderReview, renderString } from "@modrinth/utils";
+import { navigateTo } from "#app";
 import dayjs from "dayjs";
-import VersionSummary from "@modrinth/ui/src/components/version/VersionSummary.vue";
+import ModrinthIcon from "~/assets/images/utils/modrinth.svg?component";
+import Accordion from "~/components/ui/Accordion.vue";
+import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
+import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
 import Badge from "~/components/ui/Badge.vue";
-import NavTabs from "~/components/ui/NavTabs.vue";
+import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
+import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
+import MessageBanner from "~/components/ui/MessageBanner.vue";
+import ModerationChecklist from "~/components/ui/ModerationChecklist.vue";
 import NavStack from "~/components/ui/NavStack.vue";
 import NavStackItem from "~/components/ui/NavStackItem.vue";
+import NavTabs from "~/components/ui/NavTabs.vue";
 import ProjectMemberHeader from "~/components/ui/ProjectMemberHeader.vue";
-import MessageBanner from "~/components/ui/MessageBanner.vue";
-import { reportProject } from "~/utils/report-helpers.ts";
-import Breadcrumbs from "~/components/ui/Breadcrumbs.vue";
 import { userCollectProject } from "~/composables/user.js";
-import CollectionCreateModal from "~/components/ui/CollectionCreateModal.vue";
-import ModerationChecklist from "~/components/ui/ModerationChecklist.vue";
-import Accordion from "~/components/ui/Accordion.vue";
-import ModrinthIcon from "~/assets/images/utils/modrinth.svg?component";
-import AutomaticAccordion from "~/components/ui/AutomaticAccordion.vue";
-import AdPlaceholder from "~/components/ui/AdPlaceholder.vue";
+import { reportProject } from "~/utils/report-helpers.ts";
 
 const data = useNuxtApp();
 const route = useNativeRoute();
@@ -1247,6 +1278,23 @@ if (!route.name.startsWith("type-id-settings")) {
 
 const onUserCollectProject = useClientTry(userCollectProject);
 
+const { version, loader } = route.query;
+if (version !== undefined && project.value.game_versions.includes(version)) {
+  userSelectedGameVersion.value = version;
+}
+if (loader !== undefined && project.value.loaders.includes(loader)) {
+  userSelectedPlatform.value = loader;
+}
+
+watch(downloadModal, (modal) => {
+  if (!modal) return;
+
+  // route.hash returns everything in the hash string, including the # itself
+  if (route.hash === "#download") {
+    modal.show();
+  }
+});
+
 async function setProcessing() {
   startLoading();
 
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index f03723a582..de17bcde5b 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -821,6 +821,13 @@ export default defineNuxtComponent({
       if (route.query.version) {
         versionList = versionList.filter((x) => x.game_versions.includes(route.query.version));
       }
+      if (versionList.length === 0) {
+        throw createError({
+          fatal: true,
+          statusCode: 404,
+          message: "No version matches the filters",
+        });
+      }
       version = versionList.reduce((a, b) => (a.date_published > b.date_published ? a : b));
     } else {
       version = props.versions.find((x) => x.id === route.params.version);
diff --git a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
index eec8468c6f..b48431d071 100644
--- a/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/withdraw.vue
@@ -38,9 +38,13 @@
     <div class="withdraw-options-scroll">
       <div class="withdraw-options">
         <button
-          v-for="method in payoutMethods.filter((x) =>
-            x.name.toLowerCase().includes(search.toLowerCase()),
-          )"
+          v-for="method in payoutMethods
+            .filter((x) => x.name.toLowerCase().includes(search.toLowerCase()))
+            .sort((a, b) =>
+              a.type !== 'tremendous'
+                ? -1
+                : a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
+            )"
           :key="method.id"
           class="withdraw-option button-base"
           :class="{ selected: selectedMethodId === method.id }"
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 9c93f19401..bfba19d512 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -257,7 +257,7 @@
                         v-else-if="getPyroCharge(subscription).status === 'processing'"
                         class="text-sm text-orange"
                       >
-                        Your payment is being processed. Perks will activate once payment is
+                        Your payment is being processed. Your server will activate once payment is
                         complete.
                       </span>
                       <span
@@ -270,7 +270,8 @@
                         v-else-if="getPyroCharge(subscription).status === 'failed'"
                         class="text-sm text-red"
                       >
-                        Your subscription payment failed. Please update your payment method.
+                        Your subscription payment failed. Please update your payment method, then
+                        resubscribe.
                       </span>
                     </div>
                   </div>
@@ -278,7 +279,8 @@
                     <ButtonStyled
                       v-if="
                         getPyroCharge(subscription) &&
-                        getPyroCharge(subscription).status !== 'cancelled'
+                        getPyroCharge(subscription).status !== 'cancelled' &&
+                        getPyroCharge(subscription).status !== 'failed'
                       "
                       type="standard"
                       @click="showPyroCancelModal(subscription.id)"
@@ -291,7 +293,8 @@
                     <ButtonStyled
                       v-else-if="
                         getPyroCharge(subscription) &&
-                        getPyroCharge(subscription).status === 'cancelled'
+                        (getPyroCharge(subscription).status === 'cancelled' ||
+                          getPyroCharge(subscription).status === 'failed')
                       "
                       type="standard"
                       color="green"
diff --git a/apps/labrinth/src/routes/internal/admin.rs b/apps/labrinth/src/routes/internal/admin.rs
index b352e4a145..e983bae846 100644
--- a/apps/labrinth/src/routes/internal/admin.rs
+++ b/apps/labrinth/src/routes/internal/admin.rs
@@ -15,12 +15,12 @@ use crate::search::SearchConfig;
 use crate::util::date::get_current_tenths_of_ms;
 use crate::util::guards::admin_key_guard;
 use actix_web::{get, patch, post, web, HttpRequest, HttpResponse};
+use log::info;
 use serde::Deserialize;
 use sqlx::PgPool;
 use std::collections::HashMap;
 use std::net::Ipv4Addr;
 use std::sync::Arc;
-use log::info;
 
 pub fn config(cfg: &mut web::ServiceConfig) {
     cfg.service(
diff --git a/packages/app-lib/Cargo.toml b/packages/app-lib/Cargo.toml
index dcf0b6ae7e..fe37720b93 100644
--- a/packages/app-lib/Cargo.toml
+++ b/packages/app-lib/Cargo.toml
@@ -39,9 +39,11 @@ paste = { version = "1.0" }
 tauri = { version = "2.0.0-rc", optional = true }
 indicatif = { version = "0.17.3", optional = true }
 
-async-tungstenite = { version = "0.27.0", features = ["tokio-runtime", "tokio-rustls-webpki-roots"] }
+image = "0.24.7"
+
+async-tungstenite = { version = "0.25.1", features = ["tokio-runtime", "tokio-native-tls"] }
 futures = "0.3"
-reqwest = { version = "0.12.3", features = ["json", "stream", "deflate", "gzip", "brotli", "rustls-tls", "charset", "http2", "macos-system-configuration"], default-features = false }
+reqwest = { version = "0.12.3", features = ["json", "stream", "deflate", "gzip", "brotli", "multipart", "rustls-tls", "charset", "http2", "macos-system-configuration"], default-features = false }
 tokio = { version = "1", features = ["full"] }
 async-recursion = "1.0.4"
 
diff --git a/packages/app-lib/src/api/minecraft_auth.rs b/packages/app-lib/src/api/minecraft_auth.rs
index 9f4a87ad8c..f55e7e90f0 100644
--- a/packages/app-lib/src/api/minecraft_auth.rs
+++ b/packages/app-lib/src/api/minecraft_auth.rs
@@ -72,3 +72,25 @@ pub async fn users() -> crate::Result<Vec<Credentials>> {
     let users = Credentials::get_all(&state.pool).await?;
     Ok(users.into_iter().map(|x| x.1).collect())
 }
+
+/// Refreshes a credential
+#[tracing::instrument]
+pub async fn refresh(uuid: uuid::Uuid) -> crate::Result<Credentials> {
+    let state = State::get().await?;
+    let users = Credentials::get_all(&state.pool).await?;
+    let mut creds = users
+        .into_iter()
+        .map(|x| x.1)
+        .find(|c| c.id == uuid)
+        .ok_or_else(|| {
+            crate::ErrorKind::OtherError(format!(
+                "Tried to get nonexistent user with ID {uuid}"
+            ))
+            .as_error()
+        })?;
+    let res = creds.refresh(&state.pool).await;
+    match res {
+        Ok(_) => Ok(creds),
+        Err(e) => Err(e),
+    }
+}
diff --git a/packages/app-lib/src/api/mod.rs b/packages/app-lib/src/api/mod.rs
index 643798f0f7..8f4b1fa1d4 100644
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -11,6 +11,7 @@ pub mod pack;
 pub mod process;
 pub mod profile;
 pub mod settings;
+pub mod skin_manager;
 pub mod tags;
 
 pub mod data {
diff --git a/packages/app-lib/src/api/pack/import/mod.rs b/packages/app-lib/src/api/pack/import/mod.rs
index be25b1b953..d5c3d0b5a5 100644
--- a/packages/app-lib/src/api/pack/import/mod.rs
+++ b/packages/app-lib/src/api/pack/import/mod.rs
@@ -29,6 +29,7 @@ pub enum ImportLauncherType {
     ATLauncher,
     GDLauncher,
     Curseforge,
+    Mojang,
     #[serde(other)]
     Unknown,
 }
@@ -41,6 +42,7 @@ impl fmt::Display for ImportLauncherType {
             ImportLauncherType::ATLauncher => write!(f, "ATLauncher"),
             ImportLauncherType::GDLauncher => write!(f, "GDLauncher"),
             ImportLauncherType::Curseforge => write!(f, "Curseforge"),
+            ImportLauncherType::Mojang => write!(f, "Mojang"),
             ImportLauncherType::Unknown => write!(f, "Unknown"),
         }
     }
@@ -67,6 +69,12 @@ pub async fn get_importable_instances(
         )
         .await
         .unwrap_or_else(|| "instances".to_string()),
+        ImportLauncherType::Mojang => {
+            return Err(crate::ErrorKind::InputError(
+                "Launcher type Unsupported".to_string(),
+            )
+            .into())
+        }
         ImportLauncherType::Unknown => {
             return Err(crate::ErrorKind::InputError(
                 "Launcher type Unknown".to_string(),
@@ -143,6 +151,12 @@ pub async fn import_instance(
             )
             .await
         }
+        ImportLauncherType::Mojang => {
+            return Err(crate::ErrorKind::InputError(
+                "Launcher type Unsupported".to_string(),
+            )
+            .into())
+        }
         ImportLauncherType::Unknown => {
             return Err(crate::ErrorKind::InputError(
                 "Launcher type Unknown".to_string(),
@@ -184,6 +198,9 @@ pub fn get_default_launcher_path(
         ImportLauncherType::Curseforge => {
             Some(dirs::home_dir()?.join("curseforge").join("minecraft"))
         }
+        ImportLauncherType::Mojang => {
+            Some(dirs::data_dir()?.join(".minecraft"))
+        }
         ImportLauncherType::Unknown => None,
     };
     let path = path?;
@@ -214,6 +231,7 @@ pub async fn is_valid_importable_instance(
         ImportLauncherType::Curseforge => {
             curseforge::is_valid_curseforge(instance_path).await
         }
+        ImportLauncherType::Mojang => false,
         ImportLauncherType::Unknown => false,
     }
 }
diff --git a/packages/app-lib/src/api/profile/mod.rs b/packages/app-lib/src/api/profile/mod.rs
index 71da54d38d..54ee1a435f 100644
--- a/packages/app-lib/src/api/profile/mod.rs
+++ b/packages/app-lib/src/api/profile/mod.rs
@@ -9,7 +9,7 @@ use crate::pack::install_from::{
 };
 use crate::state::{
     CacheBehaviour, CachedEntry, Credentials, JavaVersion, ProcessMetadata,
-    ProfileFile, ProjectType, SideType,
+    ProfileFile, ProfileInstallStage, ProjectType, SideType,
 };
 
 use crate::event::{emit::emit_profile, ProfilePayloadType};
@@ -225,7 +225,18 @@ pub async fn list() -> crate::Result<Vec<Profile>> {
 #[tracing::instrument]
 pub async fn install(path: &str, force: bool) -> crate::Result<()> {
     if let Some(profile) = get(path).await? {
-        crate::launcher::install_minecraft(&profile, None, force).await?;
+        let result =
+            crate::launcher::install_minecraft(&profile, None, force).await;
+        if result.is_err()
+            && profile.install_stage != ProfileInstallStage::Installed
+        {
+            edit(path, |prof| {
+                prof.install_stage = ProfileInstallStage::NotInstalled;
+                async { Ok(()) }
+            })
+            .await?;
+        }
+        result?;
     } else {
         return Err(crate::ErrorKind::UnmanagedProfileError(path.to_string())
             .as_error());
diff --git a/packages/app-lib/src/api/profile/update.rs b/packages/app-lib/src/api/profile/update.rs
index 6bded04e1b..fb5425d4e5 100644
--- a/packages/app-lib/src/api/profile/update.rs
+++ b/packages/app-lib/src/api/profile/update.rs
@@ -111,7 +111,7 @@ async fn replace_managed_modrinth(
     ignore_lock: bool,
 ) -> crate::Result<()> {
     crate::profile::edit(profile_path, |profile| {
-        profile.install_stage = ProfileInstallStage::Installing;
+        profile.install_stage = ProfileInstallStage::MinecraftInstalling;
         async { Ok(()) }
     })
     .await?;
diff --git a/packages/app-lib/src/api/skin_manager.rs b/packages/app-lib/src/api/skin_manager.rs
new file mode 100644
index 0000000000..4e8c43e4ba
--- /dev/null
+++ b/packages/app-lib/src/api/skin_manager.rs
@@ -0,0 +1,672 @@
+use crate::minecraft_auth;
+use crate::process::Settings;
+use crate::state::Credentials;
+use crate::util::fetch::{read_json, write, IoSemaphore};
+use crate::State;
+use base64::{engine::general_purpose::STANDARD, Engine as _};
+use chrono::{DateTime, Utc};
+use futures::future;
+use reqwest::{self, header, multipart};
+use serde::{Deserialize, Serialize};
+use serde_json::{json, Value};
+use std::collections::HashMap;
+use std::io::Cursor;
+use std::path::PathBuf;
+use tokio;
+use tokio::sync::Semaphore;
+use uuid::Uuid;
+
+// Get image size
+pub async fn check_image(path: String) -> crate::Result<bool> {
+    let (w, h) = image::image_dimensions(path)?;
+    Ok(w == 64 && h == 64)
+}
+
+pub async fn check_skin(skin: String, id: Uuid) -> crate::Result<bool> {
+    let mut val: bool = false;
+    let library: Vec<SkinSave> = get_skins().await?;
+    for save in library {
+        if save.user != id {
+            continue;
+        }
+        if save.skin == skin {
+            val = true;
+            break;
+        }
+    }
+    Ok(val)
+}
+
+pub async fn get_heads() -> crate::Result<HashMap<Uuid, String>> {
+    Ok(get_cache().await?.heads)
+}
+
+pub async fn get_filters() -> crate::Result<Filters> {
+    Ok(get_cache().await?.filters)
+}
+
+pub async fn save_filters(filters: Filters) -> crate::Result<bool> {
+    if filters.filter.is_empty() {
+        return Ok(false);
+    };
+    let mut cache = get_cache().await?;
+    if filters.filter == cache.filters.filter
+        && filters.sort == cache.filters.sort
+    {
+        return Ok(false);
+    };
+    cache.filters = filters;
+    save_to_cache(cache).await
+}
+
+// Sets player's skin
+pub async fn set_skin(
+    skin: String,
+    arms: String,
+    creds: Credentials,
+) -> crate::Result<bool> {
+    let token = creds.access_token;
+    let file: Vec<u8> =
+        if let Some(data) = skin.strip_prefix("data:image/png;base64,") {
+            STANDARD.decode(data)?
+        } else {
+            tokio::fs::read(skin).await?
+        };
+    let client = reqwest::Client::new();
+
+    let file_part = multipart::Part::bytes(file.clone())
+        .file_name("skin.png")
+        .mime_str("image/png")?;
+
+    let form = multipart::Form::new()
+        .part("file", file_part)
+        .text("variant", arms.clone());
+
+    let response = client
+        .post("https://api.minecraftservices.com/minecraft/profile/skins")
+        .header(header::AUTHORIZATION, format!("Bearer {token}"))
+        .multipart(form)
+        .send()
+        .await?;
+
+    let statcode = response.status();
+    if statcode.is_success() {
+        let data = parse_skin_data(response.json().await?, creds.id).await?;
+        add_to_cache(creds.id, data.user, HashMap::new(), data.head).await
+    } else {
+        Ok(false)
+    }
+}
+
+// Sets the players cape
+pub async fn set_cape(capeid: String, token: String) -> crate::Result<bool> {
+    let json: Value = json!({ "capeId": capeid });
+    let client = reqwest::Client::new();
+
+    let response = if capeid == "no cape" {
+        client
+        .delete("https://api.minecraftservices.com/minecraft/profile/capes/active")
+        .header(header::AUTHORIZATION, format!("Bearer {token}"))
+        .send().await?
+    } else {
+        client
+        .put("https://api.minecraftservices.com/minecraft/profile/capes/active")
+        .header(header::AUTHORIZATION, format!("Bearer {token}"))
+        .header(header::CONTENT_TYPE, "application/json")
+        .json(&json)
+        .send().await?
+    };
+    let statcode = response.status();
+    Ok(statcode.is_success())
+}
+
+// Returns cape info
+pub async fn get_cape_data(cape: String, key: String) -> crate::Result<String> {
+    if cape == "no cape" {
+        Ok(cape)
+    } else if key == "id" {
+        Ok(get_cache().await?.capes.get(&cape).unwrap().id.clone())
+    } else {
+        Ok(get_cache().await?.capes.get(&cape).unwrap().url.clone())
+    }
+}
+
+// Returns users SkinCache
+pub async fn get_user_skin_data(id: Uuid) -> crate::Result<SkinCache> {
+    let cache = get_cache().await?;
+    let skin_data = cache
+        .users
+        .get(&id)
+        .expect("User data should exist, but doesn't");
+    Ok(skin_data.clone())
+}
+
+// call this on launcher launch
+pub async fn cache_users_skins() -> crate::Result<bool> {
+    let cache: Cache = get_cache().await?;
+    let users: Vec<Credentials> = minecraft_auth::users().await?;
+
+    let mut user_map: HashMap<Uuid, SkinCache> = HashMap::new();
+    let mut cape_map: HashMap<String, CapeData> = HashMap::new();
+    let mut head_map: HashMap<Uuid, String> = HashMap::new();
+    let client = reqwest::Client::new();
+
+    let responses: Vec<Option<Parsed>> =
+        future::join_all(users.into_iter().map(|user| {
+            let client = &client;
+            async move {
+                let token = if user.expires < Utc::now() {
+                    minecraft_auth::refresh(user.id).await.unwrap().access_token
+                } else {
+                    user.access_token
+                };
+                let response = client
+                    .get("https://api.minecraftservices.com/minecraft/profile")
+                    .header(header::AUTHORIZATION, format!("Bearer {token}"))
+                    .send()
+                    .await
+                    .unwrap();
+
+                if response.status().is_success() {
+                    parse_skin_data(response.json().await.unwrap(), user.id)
+                        .await
+                        .ok()
+                } else {
+                    None
+                }
+            }
+        }))
+        .await;
+
+    for data in responses {
+        if data.is_none() {
+            continue;
+        };
+        let data = data.unwrap();
+        cape_map.extend(data.capes);
+        user_map.insert(data.id, data.user);
+        head_map.insert(data.id, data.head);
+    }
+    let cache = Cache {
+        capes: cape_map,
+        users: user_map,
+        heads: head_map,
+        filters: cache.filters,
+    };
+    save_to_cache(cache).await
+}
+
+// Caches users SkinCache on new login
+pub async fn cache_new_user_skin(creds: Credentials) -> crate::Result<()> {
+    let token = if creds.expires < Utc::now() {
+        minecraft_auth::refresh(creds.id).await?.access_token
+    } else {
+        creds.access_token
+    };
+    let response = reqwest::Client::new()
+        .get("https://api.minecraftservices.com/minecraft/profile")
+        .header(header::AUTHORIZATION, format!("Bearer {token}"))
+        .send()
+        .await?;
+    if response.status().is_success() {
+        let data = parse_skin_data(response.json().await?, creds.id).await?;
+        add_to_cache(creds.id, data.user, data.capes, data.head).await?;
+    };
+
+    let mut manager = get_manager().await?;
+    let mut order = match manager.order.get(&creds.id) {
+        Some(v) => v.to_vec(),
+        None => Vec::new(),
+    };
+    for save in manager.saves.values() {
+        if order.contains(&save.id) {
+            continue;
+        };
+        order.push(save.id)
+    }
+    manager.order.insert(creds.id, order);
+    save_to_manager(manager).await
+}
+
+// Saves skin data to the skin manager
+pub async fn save_skin(
+    user: Uuid,
+    data: SkinCache,
+    name: String,
+    model: String,
+    skin_id: String,
+) -> crate::Result<()> {
+    let mut manager = get_manager().await?;
+
+    let skin = if data.skin.starts_with("data:image/png;base64,") {
+        data.skin
+    } else {
+        format!(
+            "data:image/png;base64,{}",
+            STANDARD.encode(tokio::fs::read(data.skin).await?.as_slice())
+        )
+    };
+
+    let id = if skin_id.is_empty() {
+        let id = Uuid::new_v4();
+
+        let mut new_order: HashMap<Uuid, Vec<Uuid>> = HashMap::new();
+        for (account, mut order) in manager.order {
+            if account == user {
+                order.insert(0, id)
+            } else {
+                order.push(id)
+            };
+            new_order.insert(account, order);
+        }
+        manager.order = new_order;
+
+        id
+    } else {
+        Uuid::parse_str(&skin_id)?
+    };
+    let created = if skin_id.is_empty() {
+        Utc::now()
+    } else {
+        manager
+            .saves
+            .get(&id)
+            .expect("SkinSave should exist, but doesn't")
+            .created
+    };
+    let skin_cache = SkinSave {
+        name,
+        skin,
+        cape: data.cape,
+        arms: data.arms,
+        created,
+        updated: Utc::now(),
+        model,
+        user,
+        id,
+    };
+    manager.saves.insert(id, skin_cache);
+
+    save_to_manager(manager).await
+}
+
+// Replace with delete_skin
+pub async fn delete_skin(id: Uuid) -> crate::Result<()> {
+    let mut manager = get_manager().await?;
+    manager.saves.remove(&id);
+
+    let mut new_order: HashMap<Uuid, Vec<Uuid>> = HashMap::new();
+    for (account, mut order) in manager.order {
+        match order.iter().position(|x| *x == id) {
+            Some(i) => order.remove(i),
+            None => continue,
+        };
+        new_order.insert(account, order);
+    }
+    manager.order = new_order;
+    save_to_manager(manager).await
+}
+
+pub async fn get_skins() -> crate::Result<Vec<SkinSave>> {
+    Ok(get_manager().await?.saves.into_values().collect())
+}
+
+pub async fn get_order(user: Uuid) -> crate::Result<Vec<Uuid>> {
+    Ok(get_manager()
+        .await?
+        .order
+        .get(&user)
+        .expect("User data should exist, but doesn't")
+        .to_vec())
+}
+
+pub async fn save_order(order: Vec<Uuid>, user: Uuid) -> crate::Result<()> {
+    let mut manager = get_manager().await?;
+    manager.order.insert(user, order);
+    save_to_manager(manager).await
+}
+
+// Gets list of skins to import
+pub async fn get_launcher_names(
+    path: PathBuf,
+    installer: String,
+) -> crate::Result<Vec<MojangNames>> {
+    let json = import_json(path, installer).await;
+    if json.is_ok() {
+        let mut skin_names = vec![];
+        for skin in json?.into_values() {
+            let name = if skin.name.is_some() {
+                skin.name.unwrap()
+            } else {
+                "Untitled".to_string()
+            };
+            skin_names.push(MojangNames {
+                name,
+                selected: true,
+                id: skin.id,
+            })
+        }
+        Ok(skin_names)
+    } else {
+        Ok(vec![])
+    }
+}
+
+pub async fn import_skin(
+    id: String,
+    path: PathBuf,
+    installer: String,
+) -> crate::Result<SkinCache> {
+    let mut data = SkinCache {
+        skin: "".to_string(),
+        cape: "no cape".to_string(),
+        arms: "".to_string(),
+        unlocked_capes: vec![],
+    };
+    let json = import_json(path, installer).await;
+
+    if json.is_ok() {
+        for skin in json?.into_values() {
+            if skin.id == id {
+                data.skin = skin.skin_image;
+                data.arms = if skin.slim {
+                    "slim".to_string()
+                } else {
+                    "classic".to_string()
+                };
+                if skin.cape_id.is_some() {
+                    let capes = get_cache().await?.capes;
+                    for (key, value) in capes {
+                        if value.id == skin.cape_id.clone().unwrap() {
+                            data.cape = key
+                        }
+                    }
+                }
+                break;
+            }
+        }
+    }
+    Ok(data)
+}
+
+async fn import_json(
+    path: PathBuf,
+    installer: String,
+) -> crate::Result<HashMap<String, MojangSkins>> {
+    let state = State::get().await?;
+    let settings = Settings::get(&state.pool).await?;
+    let io_semaphore =
+        IoSemaphore(Semaphore::new(settings.max_concurrent_writes));
+    let path = if installer == "Mojang" {
+        path.join("launcher_custom_skins.json")
+    } else {
+        path.join("Install").join("launcher_skins.json")
+    };
+
+    if installer == "Mojang" {
+        Ok(read_json::<Mojang>(&path, &io_semaphore)
+            .await?
+            .custom_skins)
+    } else {
+        Ok(
+            read_json::<HashMap<String, MojangSkins>>(&path, &io_semaphore)
+                .await?,
+        )
+    }
+}
+
+async fn parse_skin_data(response: Value, id: Uuid) -> crate::Result<Parsed> {
+    let mut cape_map: HashMap<String, CapeData> = HashMap::new();
+    let mut cape_name: String = "no cape".to_string();
+    let mut cape_list: Vec<String> = vec![cape_name.clone()];
+    for i in 0..response["capes"].as_array().unwrap().len() {
+        let key: String =
+            response["capes"][i]["alias"].as_str().unwrap().to_string();
+        let cape_id: String =
+            response["capes"][i]["id"].as_str().unwrap().to_string();
+        let url: String =
+            response["capes"][i]["url"].as_str().unwrap().to_string();
+        let img = reqwest::Client::new()
+            .get(url)
+            .send()
+            .await?
+            .bytes()
+            .await?;
+        let encoded_img = STANDARD.encode(&img);
+
+        if response["capes"][i]["state"].as_str().unwrap() == "ACTIVE" {
+            cape_name = key.clone();
+        }
+
+        let cape_cache = CapeData {
+            id: cape_id,
+            url: format!("data:image/png;base64,{encoded_img}"),
+        };
+
+        cape_map.insert(key.clone(), cape_cache);
+        cape_list.push(key);
+    }
+    let skin_url = response["skins"][0]["url"].as_str().unwrap().to_string();
+    let img = reqwest::Client::new()
+        .get(skin_url)
+        .send()
+        .await?
+        .bytes()
+        .await?;
+    let encoded_img = STANDARD.encode(&img);
+    let img = image::load_from_memory(&img)?;
+
+    // Cutout the head and overlay the hat
+    let mut head = image::imageops::crop_imm(&img, 8, 8, 8, 8).to_image();
+    let hat = image::imageops::crop_imm(&img, 40, 8, 8, 8).to_image();
+    image::imageops::overlay(&mut head, &hat, 0, 0);
+
+    // Displayed image is blurred without scaling it up first
+    let head = image::imageops::resize(
+        &head,
+        40,
+        40,
+        image::imageops::FilterType::Nearest,
+    );
+
+    let mut buf: Vec<u8> = vec![];
+    // img is stored as jpg to convert transparency into black pixels
+    head.write_to(
+        &mut Cursor::new(&mut buf),
+        image::ImageOutputFormat::Jpeg(100),
+    )?;
+    let encoded_head = STANDARD.encode(&buf);
+
+    let skin_data: SkinCache = SkinCache {
+        skin: format!("data:image/png;base64,{encoded_img}"),
+        cape: cape_name,
+        arms: response["skins"][0]["variant"]
+            .as_str()
+            .unwrap()
+            .to_lowercase()
+            .to_string(),
+        unlocked_capes: cape_list,
+    };
+    let data: Parsed = Parsed {
+        capes: cape_map,
+        user: skin_data,
+        head: format!("data:image/jpg;base64,{encoded_head}"),
+        id,
+    };
+    Ok(data)
+}
+
+async fn add_to_cache(
+    id: Uuid,
+    skin: SkinCache,
+    capes: HashMap<String, CapeData>,
+    head: String,
+) -> crate::Result<bool> {
+    let mut cache: Cache = get_cache().await?;
+    if !capes.is_empty() {
+        cache.capes.extend(capes);
+    }
+    cache.users.insert(id, skin);
+    cache.heads.insert(id, head);
+    save_to_cache(cache).await
+}
+
+async fn save_to_cache(cache: Cache) -> crate::Result<bool> {
+    let state = State::get().await?;
+    let settings = Settings::get(&state.pool).await?;
+    let io_semaphore =
+        IoSemaphore(Semaphore::new(settings.max_concurrent_writes));
+    let path = crate::State::get()
+        .await?
+        .directories
+        .caches_dir()
+        .join("skindata.json");
+
+    Ok(write(&path, &serde_json::to_vec(&cache)?, &io_semaphore)
+        .await
+        .is_ok())
+}
+
+async fn get_cache() -> crate::Result<Cache> {
+    let state = State::get().await?;
+    let settings = Settings::get(&state.pool).await?;
+    let io_semaphore =
+        IoSemaphore(Semaphore::new(settings.max_concurrent_writes));
+    let path = crate::State::get()
+        .await?
+        .directories
+        .caches_dir()
+        .join("skindata.json");
+
+    Ok(match read_json::<Cache>(&path, &io_semaphore).await {
+        Ok(cache) => cache,
+        Err(_) => Cache {
+            capes: HashMap::new(),
+            users: HashMap::new(),
+            heads: HashMap::new(),
+            filters: Filters {
+                sort: "Name".to_string(),
+                filter: "Current user".to_string(),
+            },
+        },
+    })
+}
+
+async fn save_to_manager(manager: SkinManager) -> crate::Result<()> {
+    let state = State::get().await?;
+    let settings = Settings::get(&state.pool).await?;
+    let io_semaphore =
+        IoSemaphore(Semaphore::new(settings.max_concurrent_writes));
+    let path = crate::State::get()
+        .await?
+        .directories
+        .settings_dir
+        .join("skin_manager.json");
+
+    write(&path, &serde_json::to_vec(&manager)?, &io_semaphore).await
+}
+
+async fn get_manager() -> crate::Result<SkinManager> {
+    let state = State::get().await?;
+    let settings = Settings::get(&state.pool).await?;
+    let io_semaphore =
+        IoSemaphore(Semaphore::new(settings.max_concurrent_writes));
+    let path = crate::State::get()
+        .await?
+        .directories
+        .settings_dir
+        .join("skin_manager.json");
+
+    Ok(match read_json::<SkinManager>(&path, &io_semaphore).await {
+        Ok(cache) => cache,
+        Err(_) => SkinManager {
+            saves: HashMap::new(),
+            order: HashMap::new(),
+        },
+    })
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+struct Cache {
+    capes: HashMap<String, CapeData>,
+    users: HashMap<Uuid, SkinCache>,
+    heads: HashMap<Uuid, String>,
+    filters: Filters,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+pub struct Filters {
+    sort: String,
+    filter: String,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+struct CapeData {
+    id: String,
+    url: String,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct SkinCache {
+    skin: String,
+    cape: String,
+    arms: String,
+    unlocked_capes: Vec<String>,
+}
+#[derive(Serialize, Deserialize, Clone, Debug)]
+struct SkinManager {
+    saves: HashMap<Uuid, SkinSave>,
+    order: HashMap<Uuid, Vec<Uuid>>,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct SkinSave {
+    name: String,
+    user: Uuid,
+    id: Uuid,
+    skin: String,
+    model: String,
+    cape: String,
+    arms: String,
+    created: DateTime<Utc>,
+    updated: DateTime<Utc>,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+struct Parsed {
+    capes: HashMap<String, CapeData>,
+    user: SkinCache,
+    head: String,
+    id: Uuid,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct Mojang {
+    custom_skins: HashMap<String, MojangSkins>,
+    version: u8,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+#[serde(rename_all = "camelCase")]
+struct MojangSkins {
+    created: DateTime<Utc>,
+    id: String,
+    model_image: String,
+    #[serde(skip_serializing_if = "Option::is_none", default)]
+    name: Option<String>,
+    skin_image: String,
+    slim: bool,
+    updated: DateTime<Utc>,
+    #[serde(skip_serializing_if = "Option::is_none", default)]
+    texture_id: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none", default)]
+    cape_id: Option<String>,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+pub struct MojangNames {
+    name: String,
+    id: String,
+    selected: bool,
+}
diff --git a/packages/app-lib/src/error.rs b/packages/app-lib/src/error.rs
index fc068e3052..e647d6ab13 100644
--- a/packages/app-lib/src/error.rs
+++ b/packages/app-lib/src/error.rs
@@ -99,6 +99,12 @@ pub enum ErrorKind {
     #[error("Error: {0}")]
     OtherError(String),
 
+    #[error("Image error: {0}")]
+    ImageError(#[from] image::error::ImageError),
+
+    #[error("Error decoding: {0}")]
+    DecodeError(#[from] base64::DecodeError),
+
     #[cfg(feature = "tauri")]
     #[error("Tauri error: {0}")]
     TauriError(#[from] tauri::Error),
diff --git a/packages/app-lib/src/launcher/mod.rs b/packages/app-lib/src/launcher/mod.rs
index 1ddb9414e3..1e4a57501a 100644
--- a/packages/app-lib/src/launcher/mod.rs
+++ b/packages/app-lib/src/launcher/mod.rs
@@ -7,11 +7,7 @@ use crate::state::{
     Credentials, JavaVersion, ProcessMetadata, ProfileInstallStage,
 };
 use crate::util::io;
-use crate::{
-    process,
-    state::{self as st},
-    State,
-};
+use crate::{process, state as st, State};
 use chrono::Utc;
 use daedalus as d;
 use daedalus::minecraft::{RuleAction, VersionInfo};
@@ -199,7 +195,7 @@ pub async fn install_minecraft(
     .await?;
 
     crate::api::profile::edit(&profile.path, |prof| {
-        prof.install_stage = ProfileInstallStage::Installing;
+        prof.install_stage = ProfileInstallStage::MinecraftInstalling;
 
         async { Ok(()) }
     })
@@ -431,7 +427,7 @@ pub async fn launch_minecraft(
     profile: &Profile,
 ) -> crate::Result<ProcessMetadata> {
     if profile.install_stage == ProfileInstallStage::PackInstalling
-        || profile.install_stage == ProfileInstallStage::Installing
+        || profile.install_stage == ProfileInstallStage::MinecraftInstalling
     {
         return Err(crate::ErrorKind::LauncherError(
             "Profile is still installing".to_string(),
diff --git a/packages/app-lib/src/state/legacy_converter.rs b/packages/app-lib/src/state/legacy_converter.rs
index 2f6c8bc253..e0cb60c328 100644
--- a/packages/app-lib/src/state/legacy_converter.rs
+++ b/packages/app-lib/src/state/legacy_converter.rs
@@ -308,7 +308,7 @@ where
                             ProfileInstallStage::Installed
                         }
                         LegacyProfileInstallStage::Installing => {
-                            ProfileInstallStage::Installing
+                            ProfileInstallStage::MinecraftInstalling
                         }
                         LegacyProfileInstallStage::PackInstalling => {
                             ProfileInstallStage::PackInstalling
diff --git a/packages/app-lib/src/state/minecraft_auth.rs b/packages/app-lib/src/state/minecraft_auth.rs
index e1c204aaf5..7b4508b502 100644
--- a/packages/app-lib/src/state/minecraft_auth.rs
+++ b/packages/app-lib/src/state/minecraft_auth.rs
@@ -178,19 +178,16 @@ pub async fn login_finish(
 
     minecraft_entitlements(&minecraft_token.access_token).await?;
 
-    let profile = minecraft_profile(&minecraft_token.access_token).await?;
-
-    let profile_id = profile.id.unwrap_or_default();
-
-    let credentials = Credentials {
-        id: profile_id,
-        username: profile.name,
+    let mut credentials = Credentials {
+        id: Uuid::default(),
+        username: String::default(),
         access_token: minecraft_token.access_token,
         refresh_token: oauth_token.value.refresh_token,
         expires: oauth_token.date
             + Duration::seconds(oauth_token.value.expires_in as i64),
         active: true,
     };
+    credentials.get_profile().await?;
 
     credentials.upsert(exec).await?;
 
@@ -208,7 +205,7 @@ pub struct Credentials {
 }
 
 impl Credentials {
-    async fn refresh(
+    pub async fn refresh(
         &mut self,
         exec: impl sqlx::Executor<'_, Database = sqlx::Sqlite> + Copy,
     ) -> crate::Result<()> {
@@ -245,11 +242,22 @@ impl Credentials {
         self.expires = oauth_token.date
             + Duration::seconds(oauth_token.value.expires_in as i64);
 
+        self.get_profile().await?;
+
         self.upsert(exec).await?;
 
         Ok(())
     }
 
+    async fn get_profile(&mut self) -> crate::Result<()> {
+        let profile = minecraft_profile(&self.access_token).await?;
+
+        self.id = profile.id.unwrap_or_default();
+        self.username = profile.name;
+
+        Ok(())
+    }
+
     #[tracing::instrument]
     pub async fn get_default_credential(
         exec: impl sqlx::Executor<'_, Database = sqlx::Sqlite> + Copy,
diff --git a/packages/app-lib/src/state/profiles.rs b/packages/app-lib/src/state/profiles.rs
index 23b5729a4b..4cebf4c067 100644
--- a/packages/app-lib/src/state/profiles.rs
+++ b/packages/app-lib/src/state/profiles.rs
@@ -53,7 +53,9 @@ pub enum ProfileInstallStage {
     /// Profile is installed
     Installed,
     /// Profile's minecraft game is still installing
-    Installing,
+    MinecraftInstalling,
+    /// Pack is installed, but Minecraft installation has not begun
+    PackInstalled,
     /// Profile created for pack, but the pack hasn't been fully installed yet
     PackInstalling,
     /// Profile is not installed
@@ -64,7 +66,8 @@ impl ProfileInstallStage {
     pub fn as_str(&self) -> &'static str {
         match *self {
             Self::Installed => "installed",
-            Self::Installing => "installing",
+            Self::MinecraftInstalling => "minecraft_installing",
+            Self::PackInstalled => "pack_installed",
             Self::PackInstalling => "pack_installing",
             Self::NotInstalled => "not_installed",
         }
@@ -73,7 +76,9 @@ impl ProfileInstallStage {
     pub fn from_str(val: &str) -> Self {
         match val {
             "installed" => Self::Installed,
-            "installing" => Self::Installing,
+            "minecraft_installing" => Self::MinecraftInstalling,
+            "installing" => Self::MinecraftInstalling, // Backwards compatibility
+            "pack_installed" => Self::PackInstalled,
             "pack_installing" => Self::PackInstalling,
             "not_installed" => Self::NotInstalled,
             _ => Self::NotInstalled,
@@ -549,11 +554,11 @@ impl Profile {
 
     pub(crate) async fn refresh_all() -> crate::Result<()> {
         let state = crate::State::get().await?;
-        let all = Self::get_all(&state.pool).await?;
+        let mut all = Self::get_all(&state.pool).await?;
 
         let mut keys = vec![];
 
-        for profile in &all {
+        for profile in &mut all {
             let path =
                 crate::api::profile::get_full_path(&profile.path).await?;
 
@@ -586,6 +591,17 @@ impl Profile {
                     }
                 }
             }
+
+            if profile.install_stage == ProfileInstallStage::MinecraftInstalling
+            {
+                profile.install_stage = ProfileInstallStage::PackInstalled;
+                profile.upsert(&state.pool).await?;
+            } else if profile.install_stage
+                == ProfileInstallStage::PackInstalling
+            {
+                profile.install_stage = ProfileInstallStage::NotInstalled;
+                profile.upsert(&state.pool).await?;
+            }
         }
 
         let file_hashes = CachedEntry::get_file_hash_many(
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index c34e9c0ba6..f7a1ed7d36 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -208,23 +208,6 @@ html {
 }
 
 .experimental-styles-within {
-  // Reset deprecated properties
-  --color-icon: initial !important;
-  --color-text: initial !important;
-  --color-text-inactive: initial !important;
-  --color-text-dark: initial !important;
-  --color-heading: initial !important;
-  --color-text-inverted: initial !important;
-  --color-bg-inverted: initial !important;
-
-  --color-brand: var(--color-green) !important;
-  --color-brand-inverted: initial !important;
-
-  --tab-underline-hovered: initial !important;
-
-  --color-grey-link: inherit !important;
-  --color-grey-link-hover: inherit !important; // DEPRECATED, use filters in future
-  --color-grey-link-active: inherit !important; // DEPRECATED, use filters in future
   --color-link: var(--color-blue) !important;
   --color-link-hover: var(--color-blue) !important; // DEPRECATED, use filters in future
   --color-link-active: var(--color-blue) !important; // DEPRECATED, use filters in future
diff --git a/packages/ui/src/components/base/Accordion.vue b/packages/ui/src/components/base/Accordion.vue
index 333e2564b8..8cedd1a757 100644
--- a/packages/ui/src/components/base/Accordion.vue
+++ b/packages/ui/src/components/base/Accordion.vue
@@ -41,9 +41,9 @@ const props = withDefaults(
   {
     type: 'standard',
     openByDefault: false,
-    buttonClass: null,
-    contentClass: null,
-    titleWrapperClass: null,
+    buttonClass: undefined,
+    contentClass: undefined,
+    titleWrapperClass: undefined,
   },
 )
 
diff --git a/packages/ui/src/components/base/OverflowMenu.vue b/packages/ui/src/components/base/OverflowMenu.vue
index cf0b04f84b..59316c5f8b 100644
--- a/packages/ui/src/components/base/OverflowMenu.vue
+++ b/packages/ui/src/components/base/OverflowMenu.vue
@@ -10,7 +10,7 @@
     <template #menu>
       <template v-for="(option, index) in options.filter((x) => x.shown === undefined || x.shown)">
         <div
-          v-if="option.divider"
+          v-if="isDivider(option)"
           :key="`divider-${index}`"
           class="h-px mx-3 my-2 bg-button-bg"
         ></div>
@@ -25,15 +25,15 @@
           :v-close-popper="!option.remainOnClick"
           :action="
             option.action
-              ? (event) => {
-                  option.action(event)
+              ? (event: MouseEvent) => {
+                  option.action?.(event)
                   if (!option.remainOnClick) {
                     close()
                   }
                 }
-              : null
+              : undefined
           "
-          :link="option.link ? option.link : null"
+          :link="option.link ? option.link : undefined"
           :external="option.external ? option.external : false"
           :disabled="option.disabled"
           @click="
@@ -67,7 +67,7 @@ interface Divider extends BaseOption {
 
 interface Item extends BaseOption {
   id: string
-  action?: () => void
+  action?: (event?: MouseEvent) => void
   link?: string
   external?: boolean
   color?:
@@ -99,8 +99,8 @@ withDefaults(
   {
     options: () => [],
     disabled: false,
-    dropdownId: null,
-    tooltip: null,
+    dropdownId: undefined,
+    tooltip: undefined,
   },
 )
 
@@ -118,6 +118,10 @@ const open = () => {
   dropdown.value?.show()
 }
 
+function isDivider(option: BaseOption): option is Divider {
+  return 'divider' in option
+}
+
 defineExpose({ open, close })
 </script>
 
diff --git a/packages/ui/src/components/base/RadioButtons.vue b/packages/ui/src/components/base/RadioButtons.vue
new file mode 100644
index 0000000000..14b432a359
--- /dev/null
+++ b/packages/ui/src/components/base/RadioButtons.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <button
+      v-for="item in items"
+      :key="item"
+      class="p-0 py-2 px-2 border-0 flex gap-2 transition-all items-center cursor-pointer active:scale-95 hover:bg-button-bg rounded-xl"
+      :class="{
+        'text-contrast font-medium bg-button-bg': selected === item,
+        'text-primary bg-transparent': selected !== item,
+      }"
+      @click="selected = item"
+    >
+      <RadioButtonChecked v-if="selected === item" class="text-brand h-5 w-5" />
+      <RadioButtonIcon v-else class="h-5 w-5" />
+      <slot :item="item" />
+    </button>
+  </div>
+</template>
+<script setup lang="ts" generic="T">
+import { RadioButtonIcon, RadioButtonChecked } from '@modrinth/assets'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  items: T[]
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+if (props.items.length > 0 && props.neverEmpty && !props.modelValue) {
+  selected.value = props.items[0]
+}
+</script>
diff --git a/packages/ui/src/components/base/Slider.vue b/packages/ui/src/components/base/Slider.vue
index 5be4780718..48c43c3e55 100644
--- a/packages/ui/src/components/base/Slider.vue
+++ b/packages/ui/src/components/base/Slider.vue
@@ -41,9 +41,12 @@
     <input
       ref="value"
       :value="currentValue"
-      type="text"
+      type="number"
       class="slider-input"
       :disabled="disabled"
+      :min="min"
+      :max="max"
+      :step="step"
       @change="onInput(($event.target as HTMLInputElement).value)"
     />
   </div>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 8fe546bc9f..dd5aa2307b 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -25,6 +25,7 @@ export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
 export { default as PreviewSelectButton } from './base/PreviewSelectButton.vue'
 export { default as ProjectCard } from './base/ProjectCard.vue'
+export { default as RadioButtons } from './base/RadioButtons.vue'
 export { default as ScrollablePanel } from './base/ScrollablePanel.vue'
 export { default as SimpleBadge } from './base/SimpleBadge.vue'
 export { default as Slider } from './base/Slider.vue'
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index f293263d48..4dc72836f7 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -70,7 +70,7 @@ const props = withDefaults(
     closeOnClickOutside: true,
     closeOnEsc: true,
     warnOnClose: false,
-    header: null,
+    header: undefined,
     onHide: () => {},
     onShow: () => {},
   },
diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index f17bccac24..96e6586f88 100644
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ b/packages/ui/src/components/project/ProjectHeader.vue
@@ -37,7 +37,11 @@
       <div v-if="project.categories.length > 0" class="hidden items-center gap-2 md:flex">
         <TagsIcon class="h-6 w-6 text-secondary" />
         <div class="flex flex-wrap gap-2">
-          <TagItem v-for="(category, index) in project.categories" :key="index">
+          <TagItem
+            v-for="(category, index) in project.categories"
+            :key="index"
+            :action="() => router.push(`/${project.project_type}s?f=categories:${category}`)"
+          >
             {{ formatCategory(category) }}
           </TagItem>
         </div>
@@ -53,9 +57,12 @@ import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
 import Avatar from '../base/Avatar.vue'
 import ContentPageHeader from '../base/ContentPageHeader.vue'
 import { formatCategory, formatNumber, type Project } from '@modrinth/utils'
+import { useRouter } from 'vue-router'
 import TagItem from '../base/TagItem.vue'
 import ProjectStatusBadge from './ProjectStatusBadge.vue'
 
+const router = useRouter()
+
 withDefaults(
   defineProps<{
     project: Project
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index 8683541758..1e99f94e43 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -18,6 +18,7 @@
         <TagItem
           v-for="platform in project.loaders"
           :key="`platform-tag-${platform}`"
+          :action="() => router.push(`/${project.project_type}s?g=categories:${platform}`)"
           :style="`--_color: var(--color-platform-${platform})`"
         >
           <svg v-html="tags.loaders.find((x) => x.name === platform).icon"></svg>
@@ -78,9 +79,11 @@ import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrin
 import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
 import type { GameVersionTag, PlatformTag } from '@modrinth/utils'
 import { useVIntl, defineMessages } from '@vintl/vintl'
+import { useRouter } from 'vue-router'
 import TagItem from '../base/TagItem.vue'
 
 const { formatMessage } = useVIntl()
+const router = useRouter()
 
 type EnvironmentValue = 'optional' | 'required' | 'unsupported' | 'unknown'
 
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index f6529b8c74..19246b1deb 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -14,6 +14,9 @@
   "button.edit": {
     "defaultMessage": "Edit"
   },
+  "button.remove": {
+    "defaultMessage": "Remove"
+  },
   "button.report": {
     "defaultMessage": "Report"
   },
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index 4bc4490a43..b87b5cbc07 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -97,6 +97,10 @@ export const commonMessages = defineMessages({
     id: 'label.rejected',
     defaultMessage: 'Rejected',
   },
+  removeButton: {
+    id: 'button.remove',
+    defaultMessage: 'Remove',
+  },
   reportButton: {
     id: 'button.report',
     defaultMessage: 'Report',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 708fb7d99c..8a77be8c5b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,6 +89,9 @@ importers:
       posthog-js:
         specifier: ^1.158.2
         version: 1.158.2
+      skinview3d:
+        specifier: ^3.0.1
+        version: 3.1.0
       vite-svg-loader:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.5.13(typescript@5.5.4))
@@ -2242,6 +2245,12 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/stats.js@0.17.3':
+    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
+
+  '@types/three@0.156.0':
+    resolution: {integrity: sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -2257,6 +2266,9 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@types/webxr@0.5.20':
+    resolution: {integrity: sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==}
+
   '@typescript-eslint/eslint-plugin@6.21.0':
     resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -4026,6 +4038,9 @@ packages:
   fflate@0.4.8:
     resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
 
+  fflate@0.6.10:
+    resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -5008,6 +5023,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  meshoptimizer@0.18.1:
+    resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
+
   micromark-core-commonmark@2.0.1:
     resolution: {integrity: sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==}
 
@@ -6314,6 +6332,12 @@ packages:
     engines: {node: '>=12.0.0', npm: '>=5.6.0'}
     hasBin: true
 
+  skinview-utils@0.7.1:
+    resolution: {integrity: sha512-4eLrMqR526ehlZbsd8SuZ/CHpS9GiH0xUMoV+PYlJVi95ZFz5HJu7Spt5XYa72DRS7wgt5qquvHZf0XZJgmu9Q==}
+
+  skinview3d@3.1.0:
+    resolution: {integrity: sha512-L+HXXAP4qYjLcY3YHasXKie9KXQpv/mPTMxgLOEd+hVQRdQkPs5xdWaKuOmlZY8UnyZzecQM7yrWRzgT/e7HZw==}
+
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -6613,6 +6637,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  three@0.156.1:
+    resolution: {integrity: sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -8913,7 +8940,7 @@ snapshots:
 
   '@nuxtjs/eslint-config-typescript@12.1.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4)':
     dependencies:
-      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
+      '@nuxtjs/eslint-config': 12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4)
       '@typescript-eslint/parser': 6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4)
       eslint: 9.13.0(jiti@2.4.1)
@@ -8926,10 +8953,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))':
+  '@nuxtjs/eslint-config@12.0.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))':
     dependencies:
       eslint: 9.13.0(jiti@2.4.1)
-      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-n: 15.7.0(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-node: 11.1.0(eslint@9.13.0(jiti@2.4.1))
@@ -9482,6 +9509,15 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/stats.js@0.17.3': {}
+
+  '@types/three@0.156.0':
+    dependencies:
+      '@types/stats.js': 0.17.3
+      '@types/webxr': 0.5.20
+      fflate: 0.6.10
+      meshoptimizer: 0.18.1
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/unist@2.0.11': {}
@@ -9492,6 +9528,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@types/webxr@0.5.20': {}
+
   '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -11376,10 +11414,10 @@ snapshots:
     dependencies:
       eslint: 9.13.0(jiti@2.4.1)
 
-  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1)(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1)):
+  eslint-config-standard@17.1.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-n@15.7.0(eslint@9.13.0(jiti@2.4.1)))(eslint-plugin-promise@6.4.0(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1)):
     dependencies:
       eslint: 9.13.0(jiti@2.4.1)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.16.1(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint@9.13.0(jiti@2.4.1))
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-n: 15.7.0(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-promise: 6.4.0(eslint@9.13.0(jiti@2.4.1))
 
@@ -11405,7 +11443,7 @@ snapshots:
       debug: 4.4.0(supports-color@9.4.0)
       enhanced-resolve: 5.17.1
       eslint: 9.13.0(jiti@2.4.1)
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1))
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1))
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.16.1(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint@9.13.0(jiti@2.4.1))
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
@@ -11417,7 +11455,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.13.0(jiti@2.4.1)):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@9.13.0(jiti@2.4.1)))(eslint@9.13.0(jiti@2.4.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -11932,6 +11970,8 @@ snapshots:
 
   fflate@0.4.8: {}
 
+  fflate@0.6.10: {}
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -13156,6 +13196,8 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  meshoptimizer@0.18.1: {}
+
   micromark-core-commonmark@2.0.1:
     dependencies:
       decode-named-character-reference: 1.0.2
@@ -14885,6 +14927,14 @@ snapshots:
       arg: 5.0.2
       sax: 1.4.1
 
+  skinview-utils@0.7.1: {}
+
+  skinview3d@3.1.0:
+    dependencies:
+      '@types/three': 0.156.0
+      skinview-utils: 0.7.1
+      three: 0.156.1
+
   slash@3.0.0: {}
 
   slash@5.1.0: {}
@@ -15226,6 +15276,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  three@0.156.1: {}
+
   tiny-invariant@1.3.3: {}
 
   tinyexec@0.3.1: {}