diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 6f2a17a8af..c62f81695f 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -97,6 +97,7 @@ import {
 import { useError } from '@/store/error.js'
 import { useInstall } from '@/store/install.js'
 import { useLoading, useTheming } from '@/store/state'
+import AnimatedIcon from './components/ui/AnimatedIcon.vue'
 
 import { create_profile_and_install_from_file } from './helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
@@ -804,10 +805,10 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				:is-primary="() => route.path.startsWith('/browse') && !route.query.i"
 				:is-subpage="(route) => route.path.startsWith('/project') && !route.query.i"
 			>
-				<CompassIcon />
+				<AnimatedIcon :icon="CompassIcon" />
 			</NavButton>
 			<NavButton v-tooltip.right="'Skins (Beta)'" to="/skins">
-				<ChangeSkinIcon />
+				<AnimatedIcon :icon="ChangeSkinIcon" id="change-skin-icon" />
 			</NavButton>
 			<NavButton
 				v-tooltip.right="'Library'"
@@ -819,7 +820,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 							route.query.i)
 				"
 			>
-				<LibraryIcon />
+				<AnimatedIcon :icon="LibraryIcon" id="library-icon" />
 			</NavButton>
 			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
@@ -877,7 +878,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				v-tooltip.right="formatMessage(commonMessages.settingsLabel)"
 				:to="() => $refs.settingsModal.show()"
 			>
-				<SettingsIcon />
+				<AnimatedIcon :icon="SettingsIcon" />
 			</NavButton>
 			<OverflowMenu
 				v-if="credentials"
@@ -1351,6 +1352,14 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 	opacity: 0;
 }
 
+#change-skin-icon {
+	width: 3rem;
+}
+
+#library-icon {
+	height: 2rem;
+}
+
 @media (prefers-reduced-motion: no-preference) {
 	.toast-enter-active,
 	.nav-button-animated-enter-active {
diff --git a/apps/app-frontend/src/components/ui/AnimatedIcon.vue b/apps/app-frontend/src/components/ui/AnimatedIcon.vue
new file mode 100644
index 0000000000..6a7eccb917
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/AnimatedIcon.vue
@@ -0,0 +1,96 @@
+<template>
+	<component :is="icon" :class="{ animating: isAnimating }" ref="iconRef" />
+</template>
+
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps({
+	icon: { type: Object, required: true },
+})
+
+const isAnimating = ref(false)
+const iconRef = ref(null)
+let target = null
+let AnimationLength = 0
+let hover = false
+let isInfinite = false
+
+onMounted(async () => {
+	await nextTick()
+	const el = iconRef.value?.$el || iconRef.value
+	if (!el) {
+		console.warn('AnimatedIcon: Unable to find DOM element.')
+		return
+	}
+
+	// calculate animation duration
+	el.classList.add('animating')
+	el.offsetHeight
+	AnimationLength = calculateLongestAnimation(el)
+	el.classList.remove('animating')
+
+	// use parent if it exists, otherwise fallback to component itself
+	target = el.parentElement || el
+	target.addEventListener('mouseenter', playAnimation)
+	target.addEventListener('mouseleave', stopHover)
+})
+
+onBeforeUnmount(() => {
+	if (!target) return
+	target.removeEventListener('mouseenter', playAnimation)
+	target.removeEventListener('mouseleave', stopHover)
+})
+
+const playAnimation = () => {
+	hover = true
+	if (isAnimating.value) return
+
+	isAnimating.value = true
+
+	setTimeout(() => {
+		isAnimating.value = false
+		if (isInfinite && hover) {
+			playAnimation()
+		}
+	}, AnimationLength)
+}
+
+function stopHover() {
+	hover = false
+}
+
+function calculateLongestAnimation(el) {
+	if (!el) return 0
+	let maxDuration = 0
+
+	const iconElements = [el, ...el.querySelectorAll('*')]
+	iconElements.forEach((child) => {
+		const style = getComputedStyle(child)
+		const durations = style.animationDuration.split(',').map((s) => parseTimeMs(s))
+		const delays = style.animationDelay.split(',').map((s) => parseTimeMs(s))
+		const iterations = style.animationIterationCount.split(',').map((s) => {
+			if (s === 'infinite') {
+				isInfinite = true
+				return 1
+			}
+			return parseFloat(s) || 1
+		})
+
+		durations.forEach((duration, i) => {
+			const delay = delays[i] || 0
+			const iter = iterations[i] || 1
+			const total = duration * iter + delay
+			if (total > maxDuration) maxDuration = total
+		})
+	})
+
+	return maxDuration
+}
+
+function parseTimeMs(s) {
+	const num = parseFloat(s)
+	if (!num) return 0
+	return num * (s.endsWith('ms') ? 1 : 1000)
+}
+</script>
diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
index 7f7b6c444b..c0779fc613 100644
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -14,7 +14,7 @@
 		<div class="icon w-[96px] h-[96px] relative">
 			<Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" />
 		</div>
-		<div class="flex flex-col gap-2 overflow-hidden">
+		<div class="flex flex-col gap-2 flex-1 overflow-hidden">
 			<div class="gap-2 overflow-hidden no-wrap text-ellipsis">
 				<span class="text-lg font-extrabold text-contrast m-0 leading-none">
 					{{ project.title }}
@@ -24,7 +24,10 @@
 			<div class="m-0 line-clamp-2">
 				{{ project.description }}
 			</div>
-			<div v-if="categories.length > 0" class="mt-auto flex items-center gap-1 no-wrap">
+			<div
+				v-if="categories.length > 0"
+				class="mt-auto flex items-center gap-1 no-wrap [mask-image:linear-gradient(to_right,black_95%,transparent)]"
+			>
 				<TagsIcon class="h-4 w-4 shrink-0" />
 				<div
 					v-if="project.project_type === 'mod' || project.project_type === 'modpack'"
@@ -65,13 +68,13 @@
 				<div
 					v-for="tag in categories"
 					:key="tag"
-					class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
+					class="text-sm font-semibold text-secondary flex gap-1 px-[0.4rem] py-0.5 bg-button-bg rounded-full"
 				>
 					{{ formatCategory(tag.name) }}
 				</div>
 			</div>
 		</div>
-		<div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
+		<div class="flex flex-col gap-2 items-end shrink-0">
 			<div class="flex items-center gap-2">
 				<DownloadIcon class="shrink-0" />
 				<span>
@@ -87,7 +90,7 @@
 				</span>
 			</div>
 			<div class="mt-auto relative">
-				<div class="absolute bottom-0 right-0 w-fit">
+				<div class="bottom-0 right-0 w-fit">
 					<ButtonStyled color="brand" type="outlined">
 						<button
 							:disabled="installed || installing"
diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index 49461d2b67..b12026a685 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -23,6 +23,7 @@ import type { Ref } from 'vue'
 import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 
 import type AccountsCard from '@/components/ui/AccountsCard.vue'
+import AnimatedIcon from '@/components/ui/AnimatedIcon.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
 import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
 import UploadSkinModal from '@/components/ui/skin/UploadSkinModal.vue'
@@ -353,7 +354,7 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
 										)
 								"
 							>
-								<UpdatedIcon />
+								<AnimatedIcon :icon="UpdatedIcon" />
 								Change cape
 							</button>
 						</ButtonStyled>
diff --git a/apps/app-frontend/vite.config.ts b/apps/app-frontend/vite.config.ts
index ac1c29a042..c0303f6290 100644
--- a/apps/app-frontend/vite.config.ts
+++ b/apps/app-frontend/vite.config.ts
@@ -26,6 +26,9 @@ export default defineConfig({
 						name: 'preset-default',
 						params: {
 							overrides: {
+								cleanupIds: false,
+								inlineStyles: false,
+								minifyStyles: false,
 								removeViewBox: false,
 							},
 						},
diff --git a/packages/assets/icons/change-skin.svg b/packages/assets/icons/change-skin.svg
index 7626051500..f3e38dcd9d 100644
--- a/packages/assets/icons/change-skin.svg
+++ b/packages/assets/icons/change-skin.svg
@@ -1,5 +1,67 @@
-<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
+	xmlns="http://www.w3.org/2000/svg"
+	xml:space="preserve"
+	transform="scale(-1 1)"
+	viewBox="-15.425 0 80 55"
+	class="shirt-icon"
+>
+	<style>
+		.shirt-icon.animating .hook{
+			transform-origin: 24.704px 7.7px;
+			animation: swing 0.75s linear;
+			--swing-angle: 30deg;
+		}
+
+		svg.animating .shirt{
+			transform-origin: 24px 19.102px;
+			animation: swing 0.75s ease-out 0.15s;
+			--swing-angle: 40deg;
+		}
+
+		@keyframes swing {
+			0%,
+			100% {
+				transform: rotate(0deg);
+			}
+			25%,
+			32% {
+				transform: rotate(var(--swing-angle));
+			}
+			65% {
+				transform: rotate(calc(var(--swing-angle) * -0.75));
+			}
+			85% {
+				transform: rotate(7deg);
+			}
+		}
+	</style>
+	<g class="hook">
+		<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"
+		/>
+		<path
+			fill="none"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="3.993"
+			d="M24.872 19.548v-6.44"
+		/>
+
+		<g class="shirt">
+			<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"
+			/>
+		</g>
+	</g>
 </svg>
diff --git a/packages/assets/icons/compass.svg b/packages/assets/icons/compass.svg
index 8e2e8378fe..154c748cbb 100644
--- a/packages/assets/icons/compass.svg
+++ b/packages/assets/icons/compass.svg
@@ -1 +1,32 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-compass"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"/><circle cx="12" cy="12" r="10"/></svg>
\ No newline at end of file
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-compass compass-icon"
+>
+	<style>
+		.compass-icon.animating {
+			animation: compass-spin 0.75s cubic-bezier(0.68, -0.46, 0.34, 1.37);
+		}
+
+		@keyframes compass-spin {
+			from {
+				transform: rotate(0deg);
+			}
+			to {
+				transform: rotate(360deg);
+			}
+		}
+	</style>
+	<path
+		d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
+		class="needle"
+	/>
+	<circle cx="12" cy="12" r="10" />
+</svg>
diff --git a/packages/assets/icons/library.svg b/packages/assets/icons/library.svg
index 828635efcc..256c833ee3 100644
--- a/packages/assets/icons/library.svg
+++ b/packages/assets/icons/library.svg
@@ -1 +1,54 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"></path><path d="M12 6v14"></path><path d="M8 8v12"></path><path d="M4 4v16"></path></svg>
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="library-icon"
+>
+	<style>
+		.leaning-book {
+			transform-origin: 20px 20px;
+		}
+
+		.library-icon.animating .vertical-book{
+			animation: jump 0.5s cubic-bezier(1, 0, 0.75, 1) calc(0.1s * var(--index));
+		}
+		.library-icon.animating .leaning-book {
+			animation: lean 0.7s cubic-bezier(0.2, 0.5, 0.7, 0.3) 0.25s;
+		}
+
+		@keyframes jump {
+			0%,
+			100% {
+				transform: translateY(0);
+			}
+			50% {
+				transform: translateY(-30%);
+			}
+		}
+
+		@keyframes lean {
+			0%,
+			100% {
+				transform: rotate(0deg);
+			}
+			25%,
+			75% {
+				transform: rotate(14deg);
+			}
+			50% {
+				transform: rotate(16deg);
+			}
+		}
+	</style>
+
+	<path d="M4 4v16" class="vertical-book" style="--index: 0" />
+	<path d="M8 8v12" class="vertical-book" style="--index: 1" />
+	<path d="M12 6v14" class="vertical-book" style="--index: 2" />
+	<path d="m16 6 4 14" class="leaning-book" />
+</svg>
diff --git a/packages/assets/icons/settings.svg b/packages/assets/icons/settings.svg
index 5accf92ee3..0feff8b9bd 100644
--- a/packages/assets/icons/settings.svg
+++ b/packages/assets/icons/settings.svg
@@ -1,6 +1,32 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-	stroke-width="2" viewBox="0 0 24 24">
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	fill="none"
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	stroke-width="2"
+	viewBox="0 0 24 24"
+	class="settings-icon"
+>
+	<style>
+		.settings-icon.animating {
+			animation: settings-spin 0.25s cubic-bezier(.45,0,.86,.77) 0s infinite;
+		}
+
+		@keyframes settings-spin {
+			0% {
+				transform: rotate(0deg);
+			}
+			90%,
+			100% {
+				transform: rotate(45deg);
+			}
+		}
+	</style>
 	<circle cx="12" cy="12" r="3" />
 	<path
-		d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
+		d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"
+	/>
 </svg>
diff --git a/packages/assets/icons/updated.svg b/packages/assets/icons/updated.svg
index b4a29e8ac0..da0adb6a62 100644
--- a/packages/assets/icons/updated.svg
+++ b/packages/assets/icons/updated.svg
@@ -1 +1,31 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="updated-icon"
+>
+	<style>
+		.updated-icon.animating {
+			animation:
+				updated-spin 0.6s ease-in-out,
+				updated-pulse 0.6s ease-in-out;
+		}
+
+		@keyframes updated-spin {
+			from { transform: rotate(360deg); }
+			to   { transform: rotate(0deg); }
+			}
+
+			@keyframes updated-pulse {
+			0%, 100% { scale: 1; }
+			50%      { scale: 1.2; }
+		}
+	</style>
+	<polyline points="1 4 1 10 7 10" />
+	<polyline points="23 20 23 14 17 14" />
+	<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
+</svg>