diff --git a/apps/app-frontend/package.json b/apps/app-frontend/package.json
index cb95264af58..006864606aa 100644
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -14,6 +14,7 @@
 		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
+		"@dnd-kit/dom": "^0.5.0",
 		"@dnd-kit/vue": "^0.5.0",
 		"@modrinth/api-client": "workspace:^",
 		"@modrinth/assets": "workspace:*",
diff --git a/apps/app-frontend/src/app/shell/sidebar/index.vue b/apps/app-frontend/src/app/shell/sidebar/index.vue
index 467fc0bf9de..a431fa52e3a 100644
--- a/apps/app-frontend/src/app/shell/sidebar/index.vue
+++ b/apps/app-frontend/src/app/shell/sidebar/index.vue
@@ -15,7 +15,7 @@ import { injectOnboardingChecklist } from '@/providers/onboarding-checklist'
 
 import Promotion from './promotion.vue'
 
-defineProps<{
+const props = defineProps<{
 	credentials: ModrinthCredentials | null | undefined
 	hasPlus: boolean
 	showAd: boolean
@@ -37,6 +37,9 @@ const friends = ref<InstanceType<typeof FriendsList> | null>(null)
 const scrollContainer = ref<HTMLElement | null>(null)
 const scrollViewport = ref<HTMLElement | null>(null)
 const upgradeHeight = ref(0)
+const promotionPaddingStyle = computed(() =>
+	props.showAd ? { paddingBottom: `calc(1rem + ${upgradeHeight.value}px)` } : undefined,
+)
 const { showTopFade, showBottomFade, checkScrollState } = useScrollIndicator(scrollViewport)
 
 let removeScrollbarListener: (() => void) | undefined
@@ -103,7 +106,11 @@ const messages = defineMessages({
 					@login-minecraft="accounts?.login()"
 					@login-modrinth="emit('login-modrinth')"
 				/>
-				<div id="sidebar-teleport-target" class="sidebar-teleport-content contents"></div>
+				<div
+					id="sidebar-teleport-target"
+					class="sidebar-teleport-content empty:hidden"
+					:style="promotionPaddingStyle"
+				></div>
 				<div class="sidebar-default-content hidden" :class="{ 'sidebar-enabled': visible }">
 					<div
 						v-show="hasLoggedIntoMinecraft"
@@ -131,9 +138,7 @@ const messages = defineMessages({
 					<PrideFundraiserBanner
 						class="p-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid"
 					/>
-					<NewsSidebar
-						:style="showAd ? { paddingBottom: `calc(1rem + ${upgradeHeight}px)` } : undefined"
-					/>
+					<NewsSidebar :style="promotionPaddingStyle" />
 				</div>
 			</div>
 			<div
diff --git a/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
index cab1d5a4355..66aa6a99bde 100644
--- a/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
+++ b/apps/app-frontend/src/components/ui/library/instance-group/instance-card.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { PointerActivationConstraints } from '@dnd-kit/dom'
 import { KeyboardSensor, PointerSensor, useDraggable } from '@dnd-kit/vue'
 import { CheckIcon, DownloadIcon, PlayIcon, SpinnerIcon, StopCircleIcon } from '@modrinth/assets'
 import { defineMessages, IconButton, injectNotificationManager, useVIntl } from '@modrinth/ui'
@@ -23,7 +24,7 @@ const LOADING_INDICATOR_DELAY_MS = 100
 
 const instanceCardSensors = [
 	PointerSensor.configure({
-		preventActivation: () => false,
+		activationConstraints: [new PointerActivationConstraints.Distance({ value: 5 })],
 	}),
 	KeyboardSensor,
 ]
diff --git a/apps/frontend/src/locales/ar-SA/index.json b/apps/frontend/src/locales/ar-SA/index.json
index a11dbb2d106..401b2e87689 100644
--- a/apps/frontend/src/locales/ar-SA/index.json
+++ b/apps/frontend/src/locales/ar-SA/index.json
@@ -944,21 +944,12 @@
   "collection.button.discover-mods": {
     "message": "اكتشف المودات"
   },
-  "collection.button.edit-icon": {
-    "message": "تعديل الأيقونة"
-  },
   "collection.button.remove-icon": {
     "message": "حذف الأيقونة"
   },
   "collection.button.remove-project": {
     "message": "إزالة المشروع"
   },
-  "collection.button.replace-icon": {
-    "message": "تغيير الأيقونة"
-  },
-  "collection.button.select-icon": {
-    "message": "تحديد الأيقونة"
-  },
   "collection.button.unfollow-project": {
     "message": "إلغاء متابعة المشروع"
   },
@@ -974,9 +965,6 @@
   "collection.description.following": {
     "message": "مجموعة تم إنشاؤها تلقائيًا تضمّ جميع المشاريع التي تتابعها."
   },
-  "collection.editing": {
-    "message": "تعديل المجموعة"
-  },
   "collection.error.not-found": {
     "message": "لم يتم العثور على المجموعة"
   },
diff --git a/apps/frontend/src/locales/cs-CZ/index.json b/apps/frontend/src/locales/cs-CZ/index.json
index b6fb054bf05..51c7c34d470 100644
--- a/apps/frontend/src/locales/cs-CZ/index.json
+++ b/apps/frontend/src/locales/cs-CZ/index.json
@@ -854,21 +854,12 @@
   "collection.aria-label.upload-icon": {
     "message": "Nahrát ikonu"
   },
-  "collection.button.edit-icon": {
-    "message": "Upravit ikonu"
-  },
   "collection.button.remove-icon": {
     "message": "Odebrat ikonu"
   },
   "collection.button.remove-project": {
     "message": "Odstranit projekt"
   },
-  "collection.button.replace-icon": {
-    "message": "Nahradit ikonu"
-  },
-  "collection.button.select-icon": {
-    "message": "Vybrat ikonu"
-  },
   "collection.button.unfollow-project": {
     "message": "Přestat sledovat projekt"
   },
@@ -884,9 +875,6 @@
   "collection.description.following": {
     "message": "Automaticky generovaná kolekce všech projektů, které sledujete."
   },
-  "collection.editing": {
-    "message": "Upravit kolekci"
-  },
   "collection.error.not-found": {
     "message": "Kolekce nenalezena"
   },
diff --git a/apps/frontend/src/locales/da-DK/index.json b/apps/frontend/src/locales/da-DK/index.json
index 0f6cf2835c1..fdd7a297f13 100644
--- a/apps/frontend/src/locales/da-DK/index.json
+++ b/apps/frontend/src/locales/da-DK/index.json
@@ -707,21 +707,12 @@
   "collection.button.discover-mods": {
     "message": "Udforsk mods"
   },
-  "collection.button.edit-icon": {
-    "message": "Rediger ikon"
-  },
   "collection.button.remove-icon": {
     "message": "Fjern ikon"
   },
   "collection.button.remove-project": {
     "message": "Slet projekt"
   },
-  "collection.button.replace-icon": {
-    "message": "Udskift ikon"
-  },
-  "collection.button.select-icon": {
-    "message": "Vælg ikon"
-  },
   "collection.button.unfollow-project": {
     "message": "Stop med at følge projekt"
   },
@@ -737,9 +728,6 @@
   "collection.description.following": {
     "message": "Auto-genererede samling af alle de projekter, du følger."
   },
-  "collection.editing": {
-    "message": "Redigere samling"
-  },
   "collection.error.not-found": {
     "message": "Samling ikke fundet"
   },
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index 04567ec5fee..9eebe6206eb 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "Mods entdecken"
   },
-  "collection.button.edit-icon": {
-    "message": "Icon bearbeiten"
-  },
   "collection.button.remove-icon": {
     "message": "Icon entfernen"
   },
   "collection.button.remove-project": {
     "message": "Projekt entfernen"
   },
-  "collection.button.replace-icon": {
-    "message": "Icon ersetzen"
-  },
-  "collection.button.select-icon": {
-    "message": "Icon auswählen"
-  },
   "collection.button.unfollow-project": {
     "message": "Projekt entfolgen"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "Auto-generiere Kollektion aller Projekte denen du folgst."
   },
-  "collection.editing": {
-    "message": "Sammlung bearbeiten"
-  },
   "collection.error.not-found": {
     "message": "Kollektion nicht gefunden"
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index 4c0739820b7..9206cdc21c2 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "Mods entdecken"
   },
-  "collection.button.edit-icon": {
-    "message": "Icon bearbeiten"
-  },
   "collection.button.remove-icon": {
     "message": "Icon entfernen"
   },
   "collection.button.remove-project": {
     "message": "Projekt entfernen"
   },
-  "collection.button.replace-icon": {
-    "message": "Icon ersetzen"
-  },
-  "collection.button.select-icon": {
-    "message": "Icon auswählen"
-  },
   "collection.button.unfollow-project": {
     "message": "Projekt entfolgen"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "Automatisch generierte Kollektion aller Projekte, denen du folgst."
   },
-  "collection.editing": {
-    "message": "Kollektion bearbeiten"
-  },
   "collection.error.not-found": {
     "message": "Kollektion nicht gefunden"
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index b5861c4f591..8f2ef19e2f2 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "Discover mods"
   },
-  "collection.button.edit-icon": {
-    "message": "Edit icon"
-  },
   "collection.button.remove-icon": {
     "message": "Remove icon"
   },
   "collection.button.remove-project": {
     "message": "Remove project"
   },
-  "collection.button.replace-icon": {
-    "message": "Replace icon"
-  },
-  "collection.button.select-icon": {
-    "message": "Select icon"
-  },
   "collection.button.unfollow-project": {
     "message": "Unfollow project"
   },
@@ -1034,15 +1025,21 @@
   "collection.description": {
     "message": "{description} - View the collection {name} by {username} on Modrinth"
   },
+  "collection.description-placeholder": {
+    "message": "This is a collection of..."
+  },
   "collection.description.following": {
     "message": "Auto-generated collection of all the projects you're following."
   },
-  "collection.editing": {
-    "message": "Editing collection"
+  "collection.edit": {
+    "message": "Edit collection"
   },
   "collection.error.not-found": {
     "message": "Collection not found"
   },
+  "collection.icon-label": {
+    "message": "Icon"
+  },
   "collection.label.created-at": {
     "message": "Created {ago}"
   },
@@ -1058,6 +1055,9 @@
   "collection.label.updated-at": {
     "message": "Updated {ago}"
   },
+  "collection.name-placeholder": {
+    "message": "Enter collection name..."
+  },
   "collection.return-link.dashboard-collections": {
     "message": "Your collections"
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index ed1640e165f..5eb9ee43ba6 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "Descubrir mods"
   },
-  "collection.button.edit-icon": {
-    "message": "Editar ícono"
-  },
   "collection.button.remove-icon": {
     "message": "Eliminar ícono"
   },
   "collection.button.remove-project": {
     "message": "Eliminar proyecto"
   },
-  "collection.button.replace-icon": {
-    "message": "Reemplazar ícono"
-  },
-  "collection.button.select-icon": {
-    "message": "Seleccionar ícono"
-  },
   "collection.button.unfollow-project": {
     "message": "Dejar de seguir proyecto"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "Colección generada automáticamente de todos los proyectos que sigues."
   },
-  "collection.editing": {
-    "message": "Editando colección"
-  },
   "collection.error.not-found": {
     "message": "Colección no encontrada"
   },
diff --git a/apps/frontend/src/locales/es-ES/index.json b/apps/frontend/src/locales/es-ES/index.json
index 293870b0c36..6965a6c1082 100644
--- a/apps/frontend/src/locales/es-ES/index.json
+++ b/apps/frontend/src/locales/es-ES/index.json
@@ -995,21 +995,12 @@
   "collection.button.discover-mods": {
     "message": "Descubrir mods"
   },
-  "collection.button.edit-icon": {
-    "message": "Editar icono"
-  },
   "collection.button.remove-icon": {
     "message": "Eliminar icono"
   },
   "collection.button.remove-project": {
     "message": "Eliminar proyecto"
   },
-  "collection.button.replace-icon": {
-    "message": "Reemplazar icono"
-  },
-  "collection.button.select-icon": {
-    "message": "Seleccionar icono"
-  },
   "collection.button.unfollow-project": {
     "message": "Dejar de seguir proyecto"
   },
@@ -1025,9 +1016,6 @@
   "collection.description.following": {
     "message": "Colección generada automáticamente de todos los proyectos que sigues."
   },
-  "collection.editing": {
-    "message": "Editando colección"
-  },
   "collection.error.not-found": {
     "message": "Colección no encontrada"
   },
diff --git a/apps/frontend/src/locales/fi-FI/index.json b/apps/frontend/src/locales/fi-FI/index.json
index c0b06c66309..3a4d485845d 100644
--- a/apps/frontend/src/locales/fi-FI/index.json
+++ b/apps/frontend/src/locales/fi-FI/index.json
@@ -281,21 +281,12 @@
   "auth.verify-email.title": {
     "message": "Vahvista sähköposti"
   },
-  "collection.button.edit-icon": {
-    "message": "Muokkaa kuvaketta"
-  },
   "collection.button.remove-icon": {
     "message": "Poista kuvake"
   },
   "collection.button.remove-project": {
     "message": "Poista projekti"
   },
-  "collection.button.replace-icon": {
-    "message": "Korvaa kuvake"
-  },
-  "collection.button.select-icon": {
-    "message": "Valitse kuvake"
-  },
   "collection.button.unfollow-project": {
     "message": "Lopeta projektin seuraaminen"
   },
@@ -311,9 +302,6 @@
   "collection.description.following": {
     "message": "Automattisesti luotu kokoelma kaikista projekteista joita seuraat."
   },
-  "collection.editing": {
-    "message": "Muokataan kokoelmaa"
-  },
   "collection.error.not-found": {
     "message": "Kokoelmaa ei löydy"
   },
diff --git a/apps/frontend/src/locales/fil-PH/index.json b/apps/frontend/src/locales/fil-PH/index.json
index cb4fc53b331..483c6cb38dc 100644
--- a/apps/frontend/src/locales/fil-PH/index.json
+++ b/apps/frontend/src/locales/fil-PH/index.json
@@ -401,21 +401,12 @@
   "auth.verify-email.title": {
     "message": "Patunayan ang Email"
   },
-  "collection.button.edit-icon": {
-    "message": "Baguhin ang ikono"
-  },
   "collection.button.remove-icon": {
     "message": "Tanggalin ang ikono"
   },
   "collection.button.remove-project": {
     "message": "Tanggalin ang proyekto"
   },
-  "collection.button.replace-icon": {
-    "message": "Palitan ang ikono"
-  },
-  "collection.button.select-icon": {
-    "message": "Pumili ng ikono"
-  },
   "collection.button.unfollow-project": {
     "message": "Mag-unfollow sa proyekto"
   },
@@ -431,9 +422,6 @@
   "collection.description.following": {
     "message": "Koleksiyong awtomatikong binuo ng lahat ng proyektong sinusundan mo."
   },
-  "collection.editing": {
-    "message": "Pagbabago ng koleksiyon"
-  },
   "collection.error.not-found": {
     "message": "Hindi mahanap na koleksiyon"
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index b1104e18499..0155561afff 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -1004,21 +1004,12 @@
   "collection.button.discover-mods": {
     "message": "Découvrir des mods"
   },
-  "collection.button.edit-icon": {
-    "message": "Modifier l'icône"
-  },
   "collection.button.remove-icon": {
     "message": "Supprimer l'icône"
   },
   "collection.button.remove-project": {
     "message": "Supprimer le projet"
   },
-  "collection.button.replace-icon": {
-    "message": "Remplacer l'icône"
-  },
-  "collection.button.select-icon": {
-    "message": "Sélectionnez l'icône"
-  },
   "collection.button.unfollow-project": {
     "message": "Ne plus suivre le projet"
   },
@@ -1034,9 +1025,6 @@
   "collection.description.following": {
     "message": "Collection générée automatiquement de tous vos projets favoris."
   },
-  "collection.editing": {
-    "message": "Édition de la collection"
-  },
   "collection.error.not-found": {
     "message": "Collection introuvable"
   },
diff --git a/apps/frontend/src/locales/he-IL/index.json b/apps/frontend/src/locales/he-IL/index.json
index 2460df00585..c95fa2900eb 100644
--- a/apps/frontend/src/locales/he-IL/index.json
+++ b/apps/frontend/src/locales/he-IL/index.json
@@ -326,21 +326,12 @@
   "auth.verify-email.title": {
     "message": "אמת אימייל"
   },
-  "collection.button.edit-icon": {
-    "message": "ערוך סמל"
-  },
   "collection.button.remove-icon": {
     "message": "מחק אייקון"
   },
   "collection.button.remove-project": {
     "message": "מחק פרוייקט"
   },
-  "collection.button.replace-icon": {
-    "message": "החלף אייקון"
-  },
-  "collection.button.select-icon": {
-    "message": "בחר אייקון"
-  },
   "collection.button.unfollow-project": {
     "message": "הסר מעקב מפרוייקט"
   },
@@ -356,9 +347,6 @@
   "collection.description.following": {
     "message": "אוסף שנוצר אוטומטית של כל הפרויקטים שאתה עוקב אחריו."
   },
-  "collection.editing": {
-    "message": "צור אוסף"
-  },
   "collection.error.not-found": {
     "message": "אוסף לא נמצא"
   },
diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index e91745768c6..77be76a4395 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -995,21 +995,12 @@
   "collection.button.discover-mods": {
     "message": "Modok böngészése"
   },
-  "collection.button.edit-icon": {
-    "message": "Ikon szerkesztése"
-  },
   "collection.button.remove-icon": {
     "message": "Ikon eltávolítása"
   },
   "collection.button.remove-project": {
     "message": "Projekt eltávolítása"
   },
-  "collection.button.replace-icon": {
-    "message": "Ikon kicserélése"
-  },
-  "collection.button.select-icon": {
-    "message": "Ikon kiválasztása"
-  },
   "collection.button.unfollow-project": {
     "message": "Projekt kikövetése"
   },
@@ -1025,9 +1016,6 @@
   "collection.description.following": {
     "message": "Az összes követett projekt automatikusan generált gyűjteménye."
   },
-  "collection.editing": {
-    "message": "Gyűjtemény szerkesztése"
-  },
   "collection.error.not-found": {
     "message": "Nincs ilyen gyűjtemény"
   },
diff --git a/apps/frontend/src/locales/id-ID/index.json b/apps/frontend/src/locales/id-ID/index.json
index 1fc9dd4c484..6aaf3b7a4e2 100644
--- a/apps/frontend/src/locales/id-ID/index.json
+++ b/apps/frontend/src/locales/id-ID/index.json
@@ -542,21 +542,12 @@
   "auth.verify-email.title": {
     "message": "Verifikasi Sur-el"
   },
-  "collection.button.edit-icon": {
-    "message": "Sunting ikon"
-  },
   "collection.button.remove-icon": {
     "message": "Hapus ikon"
   },
   "collection.button.remove-project": {
     "message": "Hapus proyek"
   },
-  "collection.button.replace-icon": {
-    "message": "Ganti ikon"
-  },
-  "collection.button.select-icon": {
-    "message": "Pilih ikon"
-  },
   "collection.button.unfollow-project": {
     "message": "Berhenti ikuti proyek"
   },
@@ -572,9 +563,6 @@
   "collection.description.following": {
     "message": "Koleksi semua proyek yang Anda ikuti yang dibuat secara otomatis."
   },
-  "collection.editing": {
-    "message": "Menyunting koleksi"
-  },
   "collection.error.not-found": {
     "message": "Koleksi tidak ditemukan"
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index 8d04bb37557..4cd9c88aad6 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "Scopri le mod"
   },
-  "collection.button.edit-icon": {
-    "message": "Modifica icona"
-  },
   "collection.button.remove-icon": {
     "message": "Rimuovi icona"
   },
   "collection.button.remove-project": {
     "message": "Rimuovi progetto"
   },
-  "collection.button.replace-icon": {
-    "message": "Sfoglia"
-  },
-  "collection.button.select-icon": {
-    "message": "Scegli icona"
-  },
   "collection.button.unfollow-project": {
     "message": "Smetti di seguire il progetto"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "Raccolta di progetti che segui, generata automaticamente."
   },
-  "collection.editing": {
-    "message": "Modificando la raccolta"
-  },
   "collection.error.not-found": {
     "message": "Raccolta non trovata"
   },
diff --git a/apps/frontend/src/locales/ja-JP/index.json b/apps/frontend/src/locales/ja-JP/index.json
index 55b116ac59f..983c1fd23b2 100644
--- a/apps/frontend/src/locales/ja-JP/index.json
+++ b/apps/frontend/src/locales/ja-JP/index.json
@@ -1004,21 +1004,12 @@
   "collection.button.discover-mods": {
     "message": "Modを探す"
   },
-  "collection.button.edit-icon": {
-    "message": "アイコンを編集"
-  },
   "collection.button.remove-icon": {
     "message": "アイコンを削除"
   },
   "collection.button.remove-project": {
     "message": "プロジェクトを削除"
   },
-  "collection.button.replace-icon": {
-    "message": "アイコンを置き換え"
-  },
-  "collection.button.select-icon": {
-    "message": "アイコンを選択"
-  },
   "collection.button.unfollow-project": {
     "message": "プロジェクトのフォローを解除"
   },
@@ -1034,9 +1025,6 @@
   "collection.description.following": {
     "message": "あなたがフォローしているプロジェクトがすべて含まれた自動生成のコレクションです。"
   },
-  "collection.editing": {
-    "message": "コレクションを編集中"
-  },
   "collection.error.not-found": {
     "message": "コレクションが見つかりません"
   },
diff --git a/apps/frontend/src/locales/ko-KR/index.json b/apps/frontend/src/locales/ko-KR/index.json
index f7803aee9c7..e27ab877d86 100644
--- a/apps/frontend/src/locales/ko-KR/index.json
+++ b/apps/frontend/src/locales/ko-KR/index.json
@@ -995,21 +995,12 @@
   "collection.button.discover-mods": {
     "message": "모드 탐색"
   },
-  "collection.button.edit-icon": {
-    "message": "아이콘 수정"
-  },
   "collection.button.remove-icon": {
     "message": "아이콘 제거"
   },
   "collection.button.remove-project": {
     "message": "프로젝트 삭제"
   },
-  "collection.button.replace-icon": {
-    "message": "아이콘 대체"
-  },
-  "collection.button.select-icon": {
-    "message": "아이콘 선택"
-  },
   "collection.button.unfollow-project": {
     "message": "프로젝트 팔로우 해제"
   },
@@ -1025,9 +1016,6 @@
   "collection.description.following": {
     "message": "팔로우하는 모든 프로젝트로 자동 생성된 컬렉션입니다."
   },
-  "collection.editing": {
-    "message": "컬렉션 수정"
-  },
   "collection.error.not-found": {
     "message": "컬렉션을 찾을 수 없습니다"
   },
diff --git a/apps/frontend/src/locales/ms-MY/index.json b/apps/frontend/src/locales/ms-MY/index.json
index 755fcbc4285..3f463409575 100644
--- a/apps/frontend/src/locales/ms-MY/index.json
+++ b/apps/frontend/src/locales/ms-MY/index.json
@@ -719,21 +719,12 @@
   "collection.aria-label.upload-icon": {
     "message": "Muat naik ikon"
   },
-  "collection.button.edit-icon": {
-    "message": "Sunting ikon"
-  },
   "collection.button.remove-icon": {
     "message": "Alih keluar ikon"
   },
   "collection.button.remove-project": {
     "message": "Alih keluar projek"
   },
-  "collection.button.replace-icon": {
-    "message": "Ganti ikon"
-  },
-  "collection.button.select-icon": {
-    "message": "Pilih ikon"
-  },
   "collection.button.unfollow-project": {
     "message": "Nyahikut projek"
   },
@@ -749,9 +740,6 @@
   "collection.description.following": {
     "message": "Koleksi semua projek yang anda ikuti yang dijana secara automatik."
   },
-  "collection.editing": {
-    "message": "Menyunting koleksi"
-  },
   "collection.error.not-found": {
     "message": "Koleksi tidak dijumpai"
   },
diff --git a/apps/frontend/src/locales/nl-NL/index.json b/apps/frontend/src/locales/nl-NL/index.json
index 703c521dda4..e5c77f29aff 100644
--- a/apps/frontend/src/locales/nl-NL/index.json
+++ b/apps/frontend/src/locales/nl-NL/index.json
@@ -983,21 +983,12 @@
   "collection.button.discover-mods": {
     "message": "Mods ontdekken"
   },
-  "collection.button.edit-icon": {
-    "message": "Bewerk icoon"
-  },
   "collection.button.remove-icon": {
     "message": "Pictogram verwijderen"
   },
   "collection.button.remove-project": {
     "message": "Verwijder project"
   },
-  "collection.button.replace-icon": {
-    "message": "Pictogram vervangen"
-  },
-  "collection.button.select-icon": {
-    "message": "Select icon"
-  },
   "collection.button.unfollow-project": {
     "message": "Ontvolg project"
   },
@@ -1013,9 +1004,6 @@
   "collection.description.following": {
     "message": "Automatisch gegenereerde collectie van alle projecten die je volgt."
   },
-  "collection.editing": {
-    "message": "Verzameling bewerken"
-  },
   "collection.error.not-found": {
     "message": "Collectie niet gevonden"
   },
diff --git a/apps/frontend/src/locales/no-NO/index.json b/apps/frontend/src/locales/no-NO/index.json
index f5b087d92ff..0f32fdc962a 100644
--- a/apps/frontend/src/locales/no-NO/index.json
+++ b/apps/frontend/src/locales/no-NO/index.json
@@ -689,21 +689,12 @@
   "auth.verify-email.title": {
     "message": "Verifiser Email"
   },
-  "collection.button.edit-icon": {
-    "message": "Rediger ikon"
-  },
   "collection.button.remove-icon": {
     "message": "Fjern ikon"
   },
   "collection.button.remove-project": {
     "message": "Fjern prosjekt"
   },
-  "collection.button.replace-icon": {
-    "message": "Erstatt ikon"
-  },
-  "collection.button.select-icon": {
-    "message": "Velg ikon"
-  },
   "collection.button.unfollow-project": {
     "message": "Slutt å følge prosjektet"
   },
@@ -719,9 +710,6 @@
   "collection.description.following": {
     "message": "Auto-generated collection of all the projects you're following."
   },
-  "collection.editing": {
-    "message": "Redigeringssamling"
-  },
   "collection.error.not-found": {
     "message": "Samling ikke funnet"
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index a75b431e3fa..cd3b654e4ca 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -1004,21 +1004,12 @@
   "collection.button.discover-mods": {
     "message": "Odkrywaj mody"
   },
-  "collection.button.edit-icon": {
-    "message": "Edytuj ikonę"
-  },
   "collection.button.remove-icon": {
     "message": "Usuń ikonę"
   },
   "collection.button.remove-project": {
     "message": "Usuń projekt"
   },
-  "collection.button.replace-icon": {
-    "message": "Zamień ikonę"
-  },
-  "collection.button.select-icon": {
-    "message": "Wybierz ikonę"
-  },
   "collection.button.unfollow-project": {
     "message": "Przestań obserwować projekt"
   },
@@ -1034,9 +1025,6 @@
   "collection.description.following": {
     "message": "Automatycznie wygenerowana kolekcja wszystkich projektów, które obserwujesz."
   },
-  "collection.editing": {
-    "message": "Edytowanie kolekcji"
-  },
   "collection.error.not-found": {
     "message": "Nie znaleziono kolekcji"
   },
diff --git a/apps/frontend/src/locales/pt-BR/index.json b/apps/frontend/src/locales/pt-BR/index.json
index 03648080d6b..05cdac8fb5f 100644
--- a/apps/frontend/src/locales/pt-BR/index.json
+++ b/apps/frontend/src/locales/pt-BR/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "Descobrir mods"
   },
-  "collection.button.edit-icon": {
-    "message": "Editar ícone"
-  },
   "collection.button.remove-icon": {
     "message": "Remover ícone"
   },
   "collection.button.remove-project": {
     "message": "Remover projeto"
   },
-  "collection.button.replace-icon": {
-    "message": "Substituir ícone"
-  },
-  "collection.button.select-icon": {
-    "message": "Selecionar ícone"
-  },
   "collection.button.unfollow-project": {
     "message": "Deixar de seguir projeto"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "Coleção gerada automaticamente com todos os projetos que você está seguindo."
   },
-  "collection.editing": {
-    "message": "Editando coleção"
-  },
   "collection.error.not-found": {
     "message": "Coleção não encontrada"
   },
diff --git a/apps/frontend/src/locales/pt-PT/index.json b/apps/frontend/src/locales/pt-PT/index.json
index 79446635ab4..f79dbbfddb4 100644
--- a/apps/frontend/src/locales/pt-PT/index.json
+++ b/apps/frontend/src/locales/pt-PT/index.json
@@ -920,21 +920,12 @@
   "collection.button.discover-mods": {
     "message": "Descobrir mods"
   },
-  "collection.button.edit-icon": {
-    "message": "Editar ícone"
-  },
   "collection.button.remove-icon": {
     "message": "Remover ícone"
   },
   "collection.button.remove-project": {
     "message": "Remover projeto"
   },
-  "collection.button.replace-icon": {
-    "message": "Substituir ícone"
-  },
-  "collection.button.select-icon": {
-    "message": "Selecionar ícone"
-  },
   "collection.button.unfollow-project": {
     "message": "Deixar de seguir projeto"
   },
@@ -950,9 +941,6 @@
   "collection.description.following": {
     "message": "Coleção gerada automaticamente de todos os projetos que segues."
   },
-  "collection.editing": {
-    "message": "Editar coleção"
-  },
   "collection.error.not-found": {
     "message": "Coleção não encontrada"
   },
diff --git a/apps/frontend/src/locales/ro-RO/index.json b/apps/frontend/src/locales/ro-RO/index.json
index abc9421c75d..4bc414f2159 100644
--- a/apps/frontend/src/locales/ro-RO/index.json
+++ b/apps/frontend/src/locales/ro-RO/index.json
@@ -497,21 +497,12 @@
   "auth.verify-email.title": {
     "message": "Verifică email-ul"
   },
-  "collection.button.edit-icon": {
-    "message": "Editează pictograma"
-  },
   "collection.button.remove-icon": {
     "message": "Sterge iconita"
   },
   "collection.button.remove-project": {
     "message": "Șterge proiectul"
   },
-  "collection.button.replace-icon": {
-    "message": "Inlocuieste iconita"
-  },
-  "collection.button.select-icon": {
-    "message": "Selecteaza iconita"
-  },
   "collection.button.unfollow-project": {
     "message": "Nu mai urmăriți proiectul"
   },
@@ -524,9 +515,6 @@
   "collection.description.following": {
     "message": "Colecție generată automat cu toate proiectele pe care le urmăriți."
   },
-  "collection.editing": {
-    "message": "Editează colecția"
-  },
   "collection.error.not-found": {
     "message": "Colecția nu a fost găsită"
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index 553c0384831..89778594360 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -1001,21 +1001,12 @@
   "collection.button.discover-mods": {
     "message": "Найти моды"
   },
-  "collection.button.edit-icon": {
-    "message": "Изменить иконку"
-  },
   "collection.button.remove-icon": {
     "message": "Удалить иконку"
   },
   "collection.button.remove-project": {
     "message": "Удалить проект"
   },
-  "collection.button.replace-icon": {
-    "message": "Заменить иконку"
-  },
-  "collection.button.select-icon": {
-    "message": "Выбрать иконку"
-  },
   "collection.button.unfollow-project": {
     "message": "Отписаться от проекта"
   },
@@ -1031,9 +1022,6 @@
   "collection.description.following": {
     "message": "Создана автоматически на основе всех отслеживаемых проектов."
   },
-  "collection.editing": {
-    "message": "Настройка коллекции"
-  },
   "collection.error.not-found": {
     "message": "Коллекция не найдена"
   },
diff --git a/apps/frontend/src/locales/sr-CS/index.json b/apps/frontend/src/locales/sr-CS/index.json
index 6ef38bff46c..8388f61dd07 100644
--- a/apps/frontend/src/locales/sr-CS/index.json
+++ b/apps/frontend/src/locales/sr-CS/index.json
@@ -815,9 +815,6 @@
   "auth.verify-email.title": {
     "message": "Verifikujte email"
   },
-  "collection.button.edit-icon": {
-    "message": "Ikona za izmenu"
-  },
   "collection.button.remove-project": {
     "message": "Ukloni projekat"
   },
diff --git a/apps/frontend/src/locales/sv-SE/index.json b/apps/frontend/src/locales/sv-SE/index.json
index 0e2a25d62d5..eb950eff0a8 100644
--- a/apps/frontend/src/locales/sv-SE/index.json
+++ b/apps/frontend/src/locales/sv-SE/index.json
@@ -971,21 +971,12 @@
   "collection.button.discover-mods": {
     "message": "Upptäck moddar"
   },
-  "collection.button.edit-icon": {
-    "message": "Redigera-ikon"
-  },
   "collection.button.remove-icon": {
     "message": "Ta bort ikon"
   },
   "collection.button.remove-project": {
     "message": "Radera projektet"
   },
-  "collection.button.replace-icon": {
-    "message": "Ersätt ikon"
-  },
-  "collection.button.select-icon": {
-    "message": "Välj ikon"
-  },
   "collection.button.unfollow-project": {
     "message": "Sluta följa projektet"
   },
@@ -1001,9 +992,6 @@
   "collection.description.following": {
     "message": "Auto-genererad samling av projekten du följer."
   },
-  "collection.editing": {
-    "message": "Redigerar samling"
-  },
   "collection.error.not-found": {
     "message": "Samlingen hittades inte"
   },
diff --git a/apps/frontend/src/locales/th-TH/index.json b/apps/frontend/src/locales/th-TH/index.json
index 6e9f4355996..e15a92fb7e6 100644
--- a/apps/frontend/src/locales/th-TH/index.json
+++ b/apps/frontend/src/locales/th-TH/index.json
@@ -587,21 +587,12 @@
   "auth.verify-email.title": {
     "message": "ยืนยันอีเมล"
   },
-  "collection.button.edit-icon": {
-    "message": "แก้ไขไอคอน"
-  },
   "collection.button.remove-icon": {
     "message": "ลบไอคอน"
   },
   "collection.button.remove-project": {
     "message": "ลบโปรเจค"
   },
-  "collection.button.replace-icon": {
-    "message": "เปลี่ยนไอคอน"
-  },
-  "collection.button.select-icon": {
-    "message": "เลือกรูปไอคอน"
-  },
   "collection.button.unfollow-project": {
     "message": "เลิกติดตามโปรเจค"
   },
diff --git a/apps/frontend/src/locales/tr-TR/index.json b/apps/frontend/src/locales/tr-TR/index.json
index 1cbfda7e9b2..03f41fb61f8 100644
--- a/apps/frontend/src/locales/tr-TR/index.json
+++ b/apps/frontend/src/locales/tr-TR/index.json
@@ -971,21 +971,12 @@
   "collection.button.discover-mods": {
     "message": "Modları keşfedin"
   },
-  "collection.button.edit-icon": {
-    "message": "Simgeyi düzenle"
-  },
   "collection.button.remove-icon": {
     "message": "Simgeyi kaldır"
   },
   "collection.button.remove-project": {
     "message": "Projeyi kaldır"
   },
-  "collection.button.replace-icon": {
-    "message": "Simgeyi değiştir"
-  },
-  "collection.button.select-icon": {
-    "message": "Simge seç"
-  },
   "collection.button.unfollow-project": {
     "message": "Projeyi takip etmeyi bırak"
   },
@@ -1001,9 +992,6 @@
   "collection.description.following": {
     "message": "Takip ettiğin projelerden oluşturulmuş otomatik koleksiyon."
   },
-  "collection.editing": {
-    "message": "Koleksiyon düzenleniyor"
-  },
   "collection.error.not-found": {
     "message": "Koleksiyon bulunamadı"
   },
diff --git a/apps/frontend/src/locales/uk-UA/index.json b/apps/frontend/src/locales/uk-UA/index.json
index 6b84adb78e0..839ee86717d 100644
--- a/apps/frontend/src/locales/uk-UA/index.json
+++ b/apps/frontend/src/locales/uk-UA/index.json
@@ -1004,21 +1004,12 @@
   "collection.button.discover-mods": {
     "message": "Знайти моди"
   },
-  "collection.button.edit-icon": {
-    "message": "Редагувати значок"
-  },
   "collection.button.remove-icon": {
     "message": "Прибрати значок"
   },
   "collection.button.remove-project": {
     "message": "Видалити проєкт"
   },
-  "collection.button.replace-icon": {
-    "message": "Замінити значок"
-  },
-  "collection.button.select-icon": {
-    "message": "Вибрати значок"
-  },
   "collection.button.unfollow-project": {
     "message": "Відписатися від проєкту"
   },
@@ -1034,9 +1025,6 @@
   "collection.description.following": {
     "message": "Автоматична добірка з усіх проєктів, які ви відстежуєте."
   },
-  "collection.editing": {
-    "message": "Редагування добірки"
-  },
   "collection.error.not-found": {
     "message": "Добірку не знайдено"
   },
diff --git a/apps/frontend/src/locales/vi-VN/index.json b/apps/frontend/src/locales/vi-VN/index.json
index d1c7cbd74de..a51e49c3d1a 100644
--- a/apps/frontend/src/locales/vi-VN/index.json
+++ b/apps/frontend/src/locales/vi-VN/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "Khám phá mod"
   },
-  "collection.button.edit-icon": {
-    "message": "Sửa biểu tượng"
-  },
   "collection.button.remove-icon": {
     "message": "Xoá biểu tượng"
   },
   "collection.button.remove-project": {
     "message": "Xoá dự án"
   },
-  "collection.button.replace-icon": {
-    "message": "Thay thế biểu tượng"
-  },
-  "collection.button.select-icon": {
-    "message": "Chọn biểu tượng"
-  },
   "collection.button.unfollow-project": {
     "message": "Bỏ theo dõi dự án"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "Bộ sưu tập được tạo tự động từ tất cả các dự án bạn đang theo dõi."
   },
-  "collection.editing": {
-    "message": "Đang chỉnh sửa bộ sưu tập"
-  },
   "collection.error.not-found": {
     "message": "Không tìm thấy bộ sưu tập"
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index 424be693fe8..40a4203b7bd 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "发现模组"
   },
-  "collection.button.edit-icon": {
-    "message": "编辑图标"
-  },
   "collection.button.remove-icon": {
     "message": "移除图标"
   },
   "collection.button.remove-project": {
     "message": "移除项目"
   },
-  "collection.button.replace-icon": {
-    "message": "替换图标"
-  },
-  "collection.button.select-icon": {
-    "message": "选择图标"
-  },
   "collection.button.unfollow-project": {
     "message": "取消关注项目"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "此收藏夹为自动生成的，包含你关注的所有项目。"
   },
-  "collection.editing": {
-    "message": "编辑收藏夹"
-  },
   "collection.error.not-found": {
     "message": "未找到收藏夹"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index 65e87e9d255..0959c236288 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -1007,21 +1007,12 @@
   "collection.button.discover-mods": {
     "message": "探索模組"
   },
-  "collection.button.edit-icon": {
-    "message": "編輯圖示"
-  },
   "collection.button.remove-icon": {
     "message": "移除圖示"
   },
   "collection.button.remove-project": {
     "message": "移除專案"
   },
-  "collection.button.replace-icon": {
-    "message": "取代圖示"
-  },
-  "collection.button.select-icon": {
-    "message": "選擇圖示"
-  },
   "collection.button.unfollow-project": {
     "message": "取消追蹤專案"
   },
@@ -1037,9 +1028,6 @@
   "collection.description.following": {
     "message": "由系統自動產生的收藏，包含你正在追蹤的所有專案。"
   },
-  "collection.editing": {
-    "message": "編輯收藏"
-  },
   "collection.error.not-found": {
     "message": "找不到收藏"
   },
diff --git a/apps/frontend/src/pages/collection/[collection].vue b/apps/frontend/src/pages/collection/[collection].vue
index fa9f4578998..c577fd31ca7 100644
--- a/apps/frontend/src/pages/collection/[collection].vue
+++ b/apps/frontend/src/pages/collection/[collection].vue
@@ -12,119 +12,93 @@
 			:proceed-label="formatMessage(commonMessages.deleteLabel)"
 			@proceed="deleteCollection()"
 		/>
-		<NewModal v-if="canEdit" ref="editModal" :header="formatMessage(messages.editingCollection)">
-			<div class="flex w-[30rem] flex-col gap-3">
-				<div class="flow-root">
-					<div class="group relative float-end ml-4">
-						<TeleportOverflowMenu
-							:label="formatMessage(messages.editIconButton)"
-							:tooltip="formatMessage(messages.editIconButton)"
-							class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
-							:options="[
-								{
-									id: 'select',
-									label:
-										previewImage || collection.icon_url
-											? formatMessage(messages.replaceIcon)
-											: formatMessage(messages.selectIcon),
-									action: () => {
-										const input = iconInputRef?.$el?.querySelector('input')
-										input?.click()
-									},
-								},
-								{
-									id: 'remove',
-									label: formatMessage(messages.removeIconButton),
-									action: () => {
-										deletedIcon = true
-										previewImage = null
-									},
-									shown: !deletedIcon && (previewImage || collection.icon_url),
-								},
-							]"
-						>
-							<Avatar
-								:src="deletedIcon ? null : previewImage ? previewImage : collection.icon_url"
-								size="108px"
-								class="!border-4 group-hover:brightness-75"
-								no-shadow
-							/>
-							<div class="absolute right-0 top-0 m-2">
-								<div
-									class="m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
-								>
-									<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
-								</div>
-							</div>
-							<template #select>
-								<UploadIcon />
-								{{
-									previewImage || collection.icon_url
-										? formatMessage(messages.replaceIcon)
-										: formatMessage(messages.selectIcon)
-								}}
-							</template>
-							<template #remove>
-								<XIcon />
-								{{ formatMessage(messages.removeIconButton) }}
-							</template>
-						</TeleportOverflowMenu>
-						<FileButton
-							id="collection-icon-input"
-							ref="iconInputRef"
-							:max-size="524288"
-							:show-icon="false"
-							accept="image/png,image/jpeg,image/gif,image/webp"
-							class="hidden"
-							:aria-label="formatMessage(messages.uploadIconAriaLabel)"
-							@change="showPreviewImage"
-						/>
-					</div>
-					<div class="overflow-hidden">
-						<label class="mb-2 block text-lg font-semibold text-contrast" for="collection-title">
-							{{ formatMessage(commonMessages.titleLabel) }}
-						</label>
-						<Input
-							id="collection-title"
-							v-model="current.name"
-							:maxlength="255"
-							autocomplete="off"
-							wrapper-class="w-full"
+		<NewModal
+			v-if="canEdit"
+			ref="editModal"
+			:header="formatMessage(messages.editCollection)"
+			max-width="550px"
+			width="550px"
+		>
+			<div class="flex w-full flex-col gap-6">
+				<div class="flex flex-col gap-2.5">
+					<span class="text-md font-semibold text-contrast">
+						{{ formatMessage(messages.iconLabel) }}
+					</span>
+					<div class="flex items-center gap-4">
+						<Avatar
+							:src="deletedIcon ? null : previewImage ? previewImage : collection.icon_url"
+							:alt="collection.name"
+							size="108px"
+							no-shadow
 						/>
+						<div class="flex flex-col items-start gap-2">
+							<FileButton
+								id="collection-icon-input"
+								:max-size="524288"
+								accept="image/png,image/jpeg,image/gif,image/webp"
+								:prompt="formatMessage(messages.uploadIconAriaLabel)"
+								:aria-label="formatMessage(messages.uploadIconAriaLabel)"
+								@change="showPreviewImage"
+							>
+								<UploadIcon aria-hidden="true" />
+							</FileButton>
+							<Button
+								v-if="!deletedIcon && (previewImage || collection.icon_url)"
+								@click="removeIcon"
+							>
+								<TrashIcon aria-hidden="true" />
+								{{ formatMessage(messages.removeIconButton) }}
+							</Button>
+						</div>
 					</div>
-					<label
-						class="mb-2 mt-4 block text-lg font-semibold text-contrast"
-						for="collection-description"
-					>
+				</div>
+				<div class="flex flex-col gap-2.5">
+					<label class="text-md font-semibold text-contrast" for="collection-title">
+						{{ formatMessage(commonMessages.titleLabel) }}
+					</label>
+					<Input
+						id="collection-title"
+						v-model="current.name"
+						:maxlength="255"
+						:placeholder="formatMessage(messages.namePlaceholder)"
+						autocomplete="off"
+					/>
+				</div>
+				<div class="flex flex-col gap-2.5">
+					<label class="text-md font-semibold text-contrast" for="collection-description">
 						{{ formatMessage(commonMessages.descriptionLabel) }}
 					</label>
 					<Textarea
 						id="collection-description"
 						v-model="current.description"
 						:maxlength="255"
-						wrapper-class="h-24"
+						:placeholder="formatMessage(messages.descriptionPlaceholder)"
 					/>
-					<label for="visibility" class="mb-2 mt-4 block text-lg font-semibold text-contrast">
+				</div>
+				<div class="flex flex-col gap-2.5">
+					<label for="collection-visibility" class="text-md font-semibold text-contrast">
 						{{ formatMessage(commonMessages.visibilityLabel) }}
 					</label>
-					<RadioButtons v-model="current.status" :items="['listed', 'unlisted', 'private']">
-						<template #default="{ item }">
-							<span class="flex items-center gap-1">
-								{{
-									item === 'listed'
-										? formatMessage(commonMessages.publicLabel)
-										: formatMessage(commonMessages[`${item}Label`])
-								}}
-							</span>
-						</template>
-					</RadioButtons>
+					<Chips
+						id="collection-visibility"
+						v-model="current.status"
+						:aria-label="formatMessage(commonMessages.visibilityLabel)"
+						:items="['listed', 'unlisted', 'private']"
+						:format-label="
+							(item) =>
+								item === 'listed'
+									? formatMessage(commonMessages.publicLabel)
+									: formatMessage(commonMessages[`${item}Label`])
+						"
+						:capitalize="false"
+					/>
 				</div>
-				<div class="flex justify-end gap-2">
-					<Button class="w-24" @click="() => editModal?.hide()">
+				<div class="flex justify-end gap-2.5">
+					<Button type="outlined" @click="() => editModal?.hide()">
 						<XIcon aria-hidden="true" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</Button>
-					<Button type="colored" color="brand" class="w-36" :disabled="saving" @click="save()">
+					<Button type="colored" color="brand" :disabled="saving" @click="save()">
 						<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
 						<SaveIcon v-else aria-hidden="true" />
 						{{
@@ -373,6 +347,7 @@ import {
 	Button,
 	ButtonLink,
 	catalogProjectTypes,
+	Chips,
 	commonMessages,
 	commonProjectTypeCategoryMessages,
 	commonProjectTypeSentenceMessages,
@@ -393,7 +368,6 @@ import {
 	NormalPage,
 	parseProjectTypeRouteParam,
 	ProjectList,
-	RadioButtons,
 	SidebarCard,
 	TeleportOverflowMenu,
 	Textarea,
@@ -454,25 +428,25 @@ const messages = defineMessages({
 		id: 'collection.title',
 		defaultMessage: '{name} - Collection',
 	},
-	editIconButton: {
-		id: 'collection.button.edit-icon',
-		defaultMessage: 'Edit icon',
-	},
 	removeIconButton: {
 		id: 'collection.button.remove-icon',
 		defaultMessage: 'Remove icon',
 	},
-	selectIcon: {
-		id: 'collection.button.select-icon',
-		defaultMessage: 'Select icon',
+	iconLabel: {
+		id: 'collection.icon-label',
+		defaultMessage: 'Icon',
+	},
+	editCollection: {
+		id: 'collection.edit',
+		defaultMessage: 'Edit collection',
 	},
-	replaceIcon: {
-		id: 'collection.button.replace-icon',
-		defaultMessage: 'Replace icon',
+	namePlaceholder: {
+		id: 'collection.name-placeholder',
+		defaultMessage: 'Enter collection name...',
 	},
-	editingCollection: {
-		id: 'collection.editing',
-		defaultMessage: 'Editing collection',
+	descriptionPlaceholder: {
+		id: 'collection.description-placeholder',
+		defaultMessage: 'This is a collection of...',
 	},
 	createdAtLabel: {
 		id: 'collection.label.created-at',
@@ -786,7 +760,6 @@ const showUpdatedDate = computed(() => {
 
 const editModal = ref(null)
 const deleteModal = ref(null)
-const iconInputRef = ref(null)
 const icon = ref(null)
 const deletedIcon = ref(false)
 const previewImage = ref(null)
@@ -927,6 +900,12 @@ async function deleteCollection() {
 	stopLoading()
 }
 
+function removeIcon() {
+	deletedIcon.value = true
+	icon.value = null
+	previewImage.value = null
+}
+
 function showPreviewImage(files) {
 	const reader = new FileReader()
 	icon.value = files[0]
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 81174c22fc1..ec85bd9dbdc 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -39,12 +39,25 @@
 				@clear="handleSearchClear"
 			>
 				<template v-if="showChevron" #trailing>
-					<ChevronLeftIcon
-						class="cursor-pointer size-5 text-secondary transition-transform duration-150"
-						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
+					<button
+						type="button"
+						tabindex="-1"
+						class="flex size-7 -m-2 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-secondary disabled:cursor-not-allowed"
+						:disabled="disabled"
+						:aria-expanded="isOpen"
+						:aria-haspopup="listbox ? 'listbox' : 'menu'"
+						aria-label="Toggle dropdown"
 						@mousedown.prevent
-						@click.stop="handleSearchIconClick"
-					/>
+						@click.stop="handleSearchChevronClick"
+					>
+						<ChevronLeftIcon
+							class="pointer-events-none size-5 transition-transform duration-150"
+							:class="
+								isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'
+							"
+							aria-hidden="true"
+						/>
+					</button>
 				</template>
 			</Input>
 		</div>
@@ -1024,13 +1037,16 @@ function handleSearchClick() {
 	}
 }
 
-function handleSearchIconClick() {
-	if (isOpen.value) {
-		closeDropdown(false)
-		return
-	}
+function handleSearchChevronClick() {
+	if (props.disabled) return
 
-	openDropdown()
+	const wasOpen = isOpen.value
+	searchTriggerRef.value?.focus()
+	if (wasOpen) {
+		closeDropdown()
+	} else {
+		openDropdown()
+	}
 }
 
 function handleWindowResize() {
@@ -1062,10 +1078,17 @@ function startPositionTracking() {
 	listenerWindow.addEventListener('beforeunload', handleWindowClose)
 	listenerWindow.visualViewport?.addEventListener('scroll', handleViewportChange)
 	listenerWindow.visualViewport?.addEventListener('resize', handleViewportChange)
-	stopOutsideClick = onClickOutside(dropdownRef, () => closeDropdown(false), {
-		window: listenerWindow,
-		ignore: outsideClickIgnoreTargets,
-	})
+	stopOutsideClick = onClickOutside(
+		dropdownRef,
+		(event) => {
+			if (containerRef.value && event.composedPath().includes(containerRef.value)) return
+			closeDropdown(false)
+		},
+		{
+			window: listenerWindow,
+			ignore: outsideClickIgnoreTargets,
+		},
+	)
 }
 
 function stopPositionTracking() {
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index ac39fbbfdf6..9f206e9d978 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -123,10 +123,7 @@
 		<template #cell-gameVersions="{ row: version }">
 			<div class="flex min-w-0 w-full max-w-[12rem] flex-wrap gap-1">
 				<TagItem
-					v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
-						0,
-						MAX_GAME_VERSION_TAGS,
-					)"
+					v-for="gameVersionGroup in version.gameVersionGroups.slice(0, MAX_GAME_VERSION_TAGS)"
 					:key="`version-tag-${gameVersionGroup.label}`"
 					v-tooltip="getFilterTooltip(gameVersionGroup.label)"
 					data-no-row-click
@@ -136,7 +133,7 @@
 					<span class="min-w-0 truncate">{{ gameVersionGroup.label }}</span>
 				</TagItem>
 				<FloatingMenu
-					v-if="getDisplayGameVersions(version).length > MAX_GAME_VERSION_TAGS"
+					v-if="version.gameVersionGroups.length > MAX_GAME_VERSION_TAGS"
 					trigger="hover"
 					placement="bottom"
 					data-no-row-click
@@ -144,15 +141,13 @@
 				>
 					<TagItem class="w-fit max-w-full truncate" tabindex="0">
 						<span class="min-w-0 truncate">
-							+{{ getDisplayGameVersions(version).length - MAX_GAME_VERSION_TAGS }}
+							+{{ version.gameVersionGroups.length - MAX_GAME_VERSION_TAGS }}
 						</span>
 					</TagItem>
 					<template #popper>
 						<div class="flex max-w-[20rem] flex-wrap gap-1">
 							<TagItem
-								v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
-									MAX_GAME_VERSION_TAGS,
-								)"
+								v-for="gameVersionGroup in version.gameVersionGroups.slice(MAX_GAME_VERSION_TAGS)"
 								:key="`overflow-version-tag-${gameVersionGroup.label}`"
 								class="w-fit max-w-full truncate"
 								:action="
@@ -328,7 +323,7 @@
 					<div class="flex flex-col justify-center gap-3">
 						<div class="flex flex-row flex-wrap items-center gap-1.5">
 							<TagItem
-								v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
+								v-for="gameVersionGroup in version.gameVersionGroups.slice(
 									0,
 									MAX_GAME_VERSION_TAGS,
 								)"
@@ -342,18 +337,18 @@
 								{{ gameVersionGroup.label }}
 							</TagItem>
 							<FloatingMenu
-								v-if="getDisplayGameVersions(version).length > MAX_GAME_VERSION_TAGS"
+								v-if="version.gameVersionGroups.length > MAX_GAME_VERSION_TAGS"
 								trigger="hover"
 								placement="bottom"
 								class="cursor-default smart-clickable:allow-pointer-events"
 							>
 								<TagItem tabindex="0">
-									+{{ getDisplayGameVersions(version).length - MAX_GAME_VERSION_TAGS }}
+									+{{ version.gameVersionGroups.length - MAX_GAME_VERSION_TAGS }}
 								</TagItem>
 								<template #popper>
 									<div class="flex max-w-[20rem] flex-wrap gap-1">
 										<TagItem
-											v-for="gameVersionGroup in getDisplayGameVersions(version).slice(
+											v-for="gameVersionGroup in version.gameVersionGroups.slice(
 												MAX_GAME_VERSION_TAGS,
 											)"
 											:key="`overflow-version-tag-${gameVersionGroup.label}`"
@@ -526,7 +521,9 @@ type VersionTableColumn =
 	| 'published'
 	| 'downloads'
 	| 'actions'
-type VersionTableRow = DisplayVersion & Record<string, unknown>
+type VersionTableRow = DisplayVersion & {
+	gameVersionGroups: VersionDisplayGroup[]
+} & Record<string, unknown>
 
 const props = withDefaults(
 	defineProps<{
@@ -643,10 +640,6 @@ function hasNoModLoader(loaders: string[]): boolean {
 	)
 }
 
-function getDisplayGameVersions(version: DisplayVersion): VersionDisplayGroup[] {
-	return getVersionGroupsForDisplay(version.game_versions, props.gameVersions)
-}
-
 function getFilterTooltip(filter: string): string {
 	return formatMessage(messages.toggleFilterTooltip, { filter })
 }
@@ -726,10 +719,12 @@ function isAnySelected(value: string, selected: string[]) {
 }
 
 const currentVersions = computed(() =>
-	filteredVersions.value.slice(
-		(currentPage.value - 1) * pageSize.value,
-		currentPage.value * pageSize.value,
-	),
+	filteredVersions.value
+		.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
+		.map((version) => ({
+			...version,
+			gameVersionGroups: getVersionGroupsForDisplay(version.game_versions, props.gameVersions),
+		})),
 )
 const currentVersionRows = computed<VersionTableRow[]>(
 	() => currentVersions.value as VersionTableRow[],
diff --git a/packages/ui/src/components/search/SearchDependsOnFilter.vue b/packages/ui/src/components/search/SearchDependsOnFilter.vue
index f52b5018bf0..5d4636146d5 100644
--- a/packages/ui/src/components/search/SearchDependsOnFilter.vue
+++ b/packages/ui/src/components/search/SearchDependsOnFilter.vue
@@ -4,6 +4,7 @@
 			:model-value="pendingProjectId"
 			:project-types="selectableProjectTypes"
 			:exclude-project-ids="dependencyProjectIds"
+			:force-direction="dropdownDirection"
 			:search-placeholder="formatMessage(messages.searchContentPlaceholder)"
 			:show-chevron="false"
 			:sync-with-selection="false"
@@ -70,6 +71,7 @@
 			:model-value="selectedProjectId"
 			:project-types="selectableProjectTypes"
 			:search-placeholder="formatMessage(messages.searchProjectPlaceholder)"
+			:force-direction="dropdownDirection"
 			:show-chevron="false"
 			clearable
 			search-input-variant="button"
@@ -97,6 +99,7 @@
 						<MultiSelect
 							:model-value="draftDependencyTypes"
 							:options="dependencyTypeOptions"
+							:force-direction="dropdownDirection"
 							:clearable="false"
 							fit-content
 							show-chevron
@@ -108,7 +111,7 @@
 							@update:model-value="setDraftDependencyTypes"
 						>
 							<template #input-content="{ isOpen }">
-								<span class="flex items-center gap-0.5 text-sm text-secondary ml-2.5">
+								<span class="flex items-center gap-0.5 text-sm text-secondary ml-2.5 select-none">
 									{{ dependencyTypeLabel }}
 									<DropdownIcon
 										class="size-4 transition-transform"
@@ -163,6 +166,7 @@ const selectedFilters = defineModel<FilterValue[]>('selectedFilters', { required
 
 const props = defineProps<{
 	projectType: string
+	dropdownDirection?: 'up' | 'down'
 	innerPanelClass?: string
 	selectedProjectClass?: string
 	resultCount?: number
diff --git a/packages/ui/src/components/search/SearchSidebarFilter.vue b/packages/ui/src/components/search/SearchSidebarFilter.vue
index 5e9f11bdbcf..2dfa8520cf0 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -73,6 +73,7 @@
 				v-if="filterType.display === 'depends-on-project'"
 				v-model:selected-filters="selectedFilters"
 				:project-type="projectType"
+				:dropdown-direction="dropdownDirection"
 				:inner-panel-class="innerPanelClass"
 				:selected-project-class="selectedProjectClass"
 				:result-count="resultCount"
@@ -270,6 +271,7 @@ const overriddenProvidedFilterTypes = defineModel<string[]>('overriddenProvidedF
 const props = defineProps<{
 	filterType: FilterType
 	projectType: string
+	dropdownDirection?: 'up' | 'down'
 	buttonClass?: string
 	contentClass?: string
 	innerPanelClass?: string
diff --git a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
index eda4abc00f0..86e046e355c 100644
--- a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
@@ -93,7 +93,7 @@ const buttonClass = computed(() => {
 const contentClass = computed(() => (isApp.value ? 'mt-2 mb-3' : 'mb-4 mx-3'))
 const innerPanelClass = computed(() => (isApp.value ? 'ml-2 mr-3' : 'p-1'))
 const selectedProjectClass = computed(() =>
-	isApp.value ? 'bg-surface-1 border border-solid border-surface-3' : 'bg-surface-2',
+	isApp.value ? 'bg-surface-4 border border-solid border-surface-5' : 'bg-surface-2',
 )
 
 function hasProvidedFilter(filterId: string): boolean {
@@ -221,6 +221,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
 				:provided-filters="[]"
 				:filter-type="filterType"
 				:project-type="ctx.projectType.value"
+				:dropdown-direction="isApp ? 'up' : undefined"
 				:class="filterClass"
 				:button-class="buttonClass"
 				:content-class="contentClass"
@@ -252,6 +253,7 @@ function getFilterOpenByDefault(filterId: string): boolean {
 				:provided-filters="ctx.providedFilters?.value ?? []"
 				:filter-type="filter"
 				:project-type="ctx.projectType.value"
+				:dropdown-direction="isApp ? 'up' : undefined"
 				:result-count="ctx.totalHits.value"
 				:loading="ctx.loading.value"
 				:refreshing="ctx.refreshing.value"
diff --git a/packages/utils/projects.ts b/packages/utils/projects.ts
index 36bb49e299f..82eee45bb71 100644
--- a/packages/utils/projects.ts
+++ b/packages/utils/projects.ts
@@ -88,6 +88,7 @@ export function getVersionGroupsForDisplay(
 ): VersionDisplayGroup[] {
 	const inputVersions = gameVersions.slice()
 	const allVersions = allGameVersions.slice()
+	const versionTags = new Map(allVersions.map((version) => [version.version, version]))
 
 	const allSnapshots = allVersions.filter((version) => version.version_type === 'snapshot')
 	const allReleases = allVersions.filter((version) => version.version_type === 'release')
@@ -103,20 +104,20 @@ export function getVersionGroupsForDisplay(
 		inputVersions.sort((a, b) => indices[a] - indices[b])
 	}
 
-	const releaseVersions = inputVersions.filter((projVer) =>
-		allReleases.some((gameVer) => gameVer.version === projVer),
+	const releaseVersions = inputVersions.filter(
+		(projVer) => versionTags.get(projVer)?.version_type === 'release',
 	)
 
-	const dateString = allReleases.find((version) => version.version === releaseVersions[0])?.date
+	const dateString = versionTags.get(releaseVersions[0])?.date
 
 	const latestReleaseVersionDate = dateString ? Date.parse(dateString) : 0
-	const latestSnapshot = inputVersions.find((projVer) =>
-		allSnapshots.some(
-			(gameVer) =>
-				gameVer.version === projVer &&
-				(!latestReleaseVersionDate || latestReleaseVersionDate < Date.parse(gameVer.date)),
-		),
-	)
+	const latestSnapshot = inputVersions.find((projVer) => {
+		const gameVer = versionTags.get(projVer)
+		return (
+			gameVer?.version_type === 'snapshot' &&
+			(!latestReleaseVersionDate || latestReleaseVersionDate < Date.parse(gameVer.date))
+		)
+	})
 
 	const allReleasesGrouped = groupVersions(
 		allReleases.map((release) => release.version),
@@ -146,7 +147,10 @@ export function getVersionGroupsForDisplay(
 	)
 
 	const legacyVersionsAsRanges = groupConsecutiveIndices(
-		inputVersions.filter((projVer) => allLegacy.some((gameVer) => gameVer.version === projVer)),
+		inputVersions.filter((projVer) => {
+			const gameVer = versionTags.get(projVer)
+			return gameVer && gameVer.version_type !== 'snapshot' && gameVer.version_type !== 'release'
+		}),
 		allLegacy,
 	)
 
@@ -154,8 +158,8 @@ export function getVersionGroupsForDisplay(
 
 	// show all snapshots if there's no release versions
 	if (releaseVersionsAsRanges.length === 0) {
-		const snapshotVersions = inputVersions.filter((projVer) =>
-			allSnapshots.some((gameVer) => gameVer.version === projVer),
+		const snapshotVersions = inputVersions.filter(
+			(projVer) => versionTags.get(projVer)?.version_type === 'snapshot',
 		)
 		const snapshotVersionsAsRanges =
 			snapshotVersions.length > 3
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a663c95c4fb..7c0399b8a37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -256,6 +256,9 @@ importers:
 
   apps/app-frontend:
     dependencies:
+      '@dnd-kit/dom':
+        specifier: ^0.5.0
+        version: 0.5.0
       '@dnd-kit/vue':
         specifier: ^0.5.0
         version: 0.5.0(vue@3.5.43(typescript@5.9.3))