diff --git a/apps/app-frontend/src/components/ui/ErrorModal.vue b/apps/app-frontend/src/components/ui/ErrorModal.vue
index 385c503f11..b650cca759 100644
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -9,11 +9,10 @@ import {
 	WrenchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Collapsible, injectNotificationManager } from '@modrinth/ui'
+import { ButtonStyled, Collapsible, injectNotificationManager, Modal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { ChatIcon } from '@/assets/icons'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { login as login_flow, set_default_user } from '@/helpers/auth.js'
 import { install_existing_instance } from '@/helpers/install'
@@ -151,7 +150,7 @@ async function copyToClipboard(text) {
 </script>
 
 <template>
-	<ModalWrapper ref="errorModal" :header="title" :closable="closable">
+	<Modal ref="errorModal" :header="title" :closable="closable">
 		<div class="modal-body max-w-[550px]">
 			<div class="markdown-body">
 				<template v-if="errorType === 'minecraft_auth'">
@@ -323,7 +322,7 @@ async function copyToClipboard(text) {
 				</div>
 			</template>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 
 <style>
diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index e97f833f5c..05d7b589d7 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -6,7 +6,7 @@ import {
 	defineMessages,
 	FileTreeSelect,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
@@ -233,7 +233,7 @@ function isExportCandidateDisabled(path) {
 </script>
 
 <template>
-	<NewModal
+	<Modal
 		ref="exportModal"
 		:header="formatMessage(messages.header)"
 		scrollable
@@ -300,5 +300,5 @@ function isExportCandidateDisabled(path) {
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
index 31e481431f..f82529ea4a 100644
--- a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
+++ b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
@@ -1,9 +1,5 @@
 <template>
-	<ModalWrapper
-		ref="detectJavaModal"
-		:header="formatMessage(messages.title)"
-		:show-ad-on-close="false"
-	>
+	<Modal ref="detectJavaModal" :header="formatMessage(messages.title)">
 		<div class="flex flex-col gap-4">
 			<Table :columns="javaInstallColumns" :data="chosenInstallOptions" row-key="path">
 				<template #cell-version="{ value }">
@@ -46,7 +42,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 <script setup>
 import { CheckIcon, PlusIcon, XIcon } from '@modrinth/assets'
@@ -54,12 +50,12 @@ import {
 	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
+	Modal,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { find_filtered_jres } from '@/helpers/jre.js'
 
diff --git a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
index 9e1a79a64c..78688cef0b 100644
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -1,10 +1,9 @@
 <script setup>
 import { CheckIcon } from '@modrinth/assets'
-import { Badge, ButtonStyled } from '@modrinth/ui'
+import { Badge, ButtonStyled, Modal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { SwapIcon } from '@/assets/icons/index.js'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { update_managed_modrinth_version } from '@/helpers/instance'
 import { releaseColor } from '@/helpers/utils'
 
@@ -52,7 +51,7 @@ const onHide = () => {
 </script>
 
 <template>
-	<ModalWrapper
+	<Modal
 		ref="modpackVersionModal"
 		class="modpack-version-modal"
 		header="Change modpack version"
@@ -123,7 +122,7 @@ const onHide = () => {
 				</div>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/apps/app-frontend/src/components/ui/URLConfirmModal.vue b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
index 8a48cab8cf..6e2d7b0221 100644
--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, Modal, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { get_project_v3, get_version } from '@/helpers/cache.js'
 import { injectContentInstall } from '@/providers/content-install'
 
@@ -45,7 +44,7 @@ async function install() {
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
+	<Modal ref="confirmModal" :header="`Install ${project?.name}`">
 		<div class="modal-body">
 			<ProjectCard
 				:title="project.name"
@@ -75,7 +74,7 @@ async function install() {
 				</div>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index 71c8c1c8fe..73f8344314 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -6,6 +6,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	Modal,
 	StyledInput,
 	useRelativeTime,
 	useVIntl,
@@ -13,7 +14,6 @@ import {
 import { computed, ref } from 'vue'
 
 import FriendsSection from '@/components/ui/friends/FriendsSection.vue'
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { useFriends } from '@/composables/use-friends'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 import type { ModrinthCredentials } from '@/helpers/mr_auth'
@@ -176,7 +176,7 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<ModalWrapper ref="friendInvitesModal" header="View friend requests">
+	<Modal ref="friendInvitesModal" header="View friend requests">
 		<p v-if="incomingRequests.length === 0">You have no pending friend requests :C</p>
 		<div v-else class="flex flex-col gap-4 min-w-[40rem]">
 			<div v-for="friend in incomingRequests" :key="friend.username" class="flex gap-2">
@@ -222,8 +222,8 @@ const messages = defineMessages({
 				</div>
 			</div>
 		</div>
-	</ModalWrapper>
-	<ModalWrapper ref="addFriendModal" :header="formatMessage(messages.addingAFriend)">
+	</Modal>
+	<Modal ref="addFriendModal" :header="formatMessage(messages.addingAFriend)">
 		<div class="min-w-[30rem]">
 			<h2 class="m-0 text-base font-medium text-primary">
 				{{ formatMessage(messages.usernameTitle) }}
@@ -248,7 +248,7 @@ const messages = defineMessages({
 				</ButtonStyled>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 	<div v-if="userCredentials && !loading" class="flex gap-1 items-center mb-3 -ml-1">
 		<template v-if="sortedFriends.length > 0">
 			<ButtonStyled circular type="transparent">
diff --git a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
index e3c523c8a1..f3857b349b 100644
--- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
@@ -5,13 +5,13 @@ import {
 	Avatar,
 	ButtonStyled,
 	injectNotificationManager,
+	Modal,
 	StyledInput,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { list } from '@/helpers/instance'
 import { add_server_to_instance, get_instance_worlds } from '@/helpers/worlds.ts'
@@ -82,7 +82,7 @@ async function addServer(instance) {
 </script>
 
 <template>
-	<ModalWrapper ref="modal" header="Add server to instance">
+	<Modal ref="modal" header="Add server to instance">
 		<div class="flex flex-col gap-4 min-w-[350px]">
 			<Admonition type="warning" body="This server may not be compatible with all instances." />
 			<StyledInput
@@ -124,5 +124,5 @@ async function addServer(instance) {
 				</ButtonStyled>
 			</div>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
diff --git a/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue b/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
index 40267f14f5..e6abca7e25 100644
--- a/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-auth-error-modal/MinecraftAuthErrorModal.vue
@@ -7,7 +7,7 @@ import {
 	MessagesSquareIcon,
 	WrenchIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, Collapsible, NewModal } from '@modrinth/ui'
+import { Admonition, ButtonStyled, Collapsible, Modal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
@@ -16,7 +16,7 @@ import { handleSevereError } from '@/store/error.js'
 
 import { findMinecraftAuthError, type MinecraftAuthError } from './minecraft-auth-errors'
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const rawError = ref<string>('')
 const matchedError = ref<MinecraftAuthError | null>(null)
 const debugCollapsed = ref(true)
@@ -74,7 +74,7 @@ async function copyToClipboard(text: string) {
 </script>
 
 <template>
-	<NewModal ref="modal" header="Sign in Failed" :max-width="'548px'" @hide="onModalHide">
+	<Modal ref="modal" header="Sign in Failed" :max-width="'548px'" @hide="onModalHide">
 		<div class="flex flex-col gap-6">
 			<Admonition
 				type="warning"
@@ -191,5 +191,5 @@ async function copyToClipboard(text: string) {
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
index c82c174a45..67b00f95c7 100644
--- a/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/minecraft-required-modal/MinecraftRequiredModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" max-width="544px" no-padding>
+	<Modal ref="modal" :header="formatMessage(messages.header)" max-width="544px" no-padding>
 		<div class="grid grid-cols-[1fr_auto] gap-2.5 h-[154px] px-7 pt-4 pb-1 pr-9">
 			<div class="flex flex-col gap-2.5 items-start justify-center h-min mt-5">
 				<div class="font-semibold text-xl text-contrast">
@@ -64,12 +64,12 @@
 				</a>
 			</p>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
 import { MessagesSquareIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, NewModal, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, Modal, useVIntl } from '@modrinth/ui'
 import { inject, type Ref, ref } from 'vue'
 
 import steveImage from '@/assets/steve-look-up-left.webp'
@@ -113,7 +113,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const loadingSignIn = ref(false)
 
 function show() {
diff --git a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
index d6c869ba13..2c5794204c 100644
--- a/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ConfirmDeleteInstanceModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
 		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
 			{{ formatMessage(messages.admonitionBody) }}
 		</Admonition>
@@ -20,7 +20,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -30,7 +30,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -61,7 +61,7 @@ const emit = defineEmits<{
 	(e: 'delete'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 function show() {
 	modal.value?.show()
diff --git a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
index 912725f5e8..eb91db6ed1 100644
--- a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.installToPlay)"
 		:closable="true"
@@ -151,7 +151,7 @@
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 
 	<ModpackContentModal
 		ref="modpackContentModal"
@@ -171,8 +171,8 @@ import {
 	type ContentItem,
 	defineMessages,
 	formatLoader,
+	Modal,
 	ModpackContentModal,
-	NewModal,
 	Table,
 	type TableColumn,
 	useScrollIndicator,
@@ -191,7 +191,7 @@ type ExternalFileRow = {
 	name: string
 }
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const modpackVersionId = ref<string | null>(null)
 const modpackVersion = ref<Labrinth.Versions.v2.Version | null>(null)
 const project = ref<Labrinth.Projects.v3.Project | null>(null)
diff --git a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue b/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
deleted file mode 100644
index 12954eaece..0000000000
--- a/apps/app-frontend/src/components/ui/modal/ModalWrapper.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<!-- @deprecated Use NewModal from @modrinth/ui directly. Ads/noblur now handled by injectModalBehavior. -->
-<script setup lang="ts">
-import { NewModal as Modal } from '@modrinth/ui'
-import { useTemplateRef } from 'vue'
-
-const props = defineProps({
-	header: {
-		type: String,
-		default: null,
-	},
-	hideHeader: {
-		type: Boolean,
-		default: false,
-	},
-	closable: {
-		type: Boolean,
-		default: true,
-	},
-	onHide: {
-		type: Function,
-		default() {
-			return () => {}
-		},
-	},
-	/** @deprecated No longer used — ads are handled by provideModalBehavior */
-	showAdOnClose: {
-		type: Boolean,
-		default: true,
-	},
-})
-const modal = useTemplateRef('modal')
-
-defineExpose({
-	show: (e?: MouseEvent) => {
-		modal.value?.show(e)
-	},
-	hide: () => {
-		modal.value?.hide()
-	},
-})
-</script>
-
-<template>
-	<Modal
-		ref="modal"
-		:header="header"
-		:closable="closable"
-		:hide-header="hideHeader"
-		:on-hide="() => props.onHide?.()"
-	>
-		<template #title>
-			<slot name="title" />
-		</template>
-		<slot />
-	</Modal>
-</template>
diff --git a/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue b/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
index 007a4a84e2..71282e75d8 100644
--- a/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModpackAlreadyInstalledModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
 		<p class="m-0 text-secondary">
 			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
 				<template #bold="{ children }">
@@ -30,7 +30,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -40,7 +40,7 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -72,7 +72,7 @@ const emit = defineEmits<{
 	(e: 'create-anyway'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const instanceName = ref('')
 const instanceId = ref('')
 
diff --git a/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue b/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
index db5dbc880c..1b5e6465f1 100644
--- a/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/ModrinthAccountRequiredModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(authenticating ? messages.signingInHeader : messages.header)"
 		:on-hide="handleHide"
@@ -103,12 +103,12 @@
 				</p>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
 import { LogInIcon, RefreshCwIcon, SpinnerIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, IntlFormatted, NewModal, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, IntlFormatted, Modal, useVIntl } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { ref } from 'vue'
 
@@ -119,7 +119,7 @@ const props = defineProps<{
 }>()
 
 const { formatMessage } = useVIntl()
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const authenticating = ref<ModrinthAuthFlow | null>(null)
 const reopeningBrowser = ref(false)
 let resolveShow: ((signedIn: boolean) => void) | undefined
diff --git a/apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue b/apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue
index e373ce7b93..9675730b72 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/ConfirmRevokeSharedInstanceInviteModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
 		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
 			<IntlFormatted :message-id="messages.admonitionBody" :values="{ code: inviteCode }">
 				<template #monospace="{ children }">
@@ -24,7 +24,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -35,13 +35,13 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
 
 const { formatMessage } = useVIntl()
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const inviteCode = ref('')
 
 const emit = defineEmits<{
diff --git a/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue b/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue
index 3e59220273..4e0fc7e263 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceAlreadyInstalledModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.header)" fade="warning" max-width="500px">
 		<p class="m-0 text-secondary">
 			<IntlFormatted :message-id="messages.body" :values="{ instanceName }">
 				<template #bold="{ children }">
@@ -30,7 +30,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -40,7 +40,7 @@ import {
 	commonMessages,
 	defineMessages,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -71,7 +71,7 @@ const emit = defineEmits<{
 	(e: 'cancel' | 'go-to-instance' | 'install-anyway'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const instanceName = ref('')
 
 function show(name: string) {
diff --git a/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue b/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue
index d72f17090e..95ef3c6a6b 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/SharedInstanceInstallationSettingsControls.vue
@@ -28,7 +28,7 @@
 		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
 	</div>
 
-	<NewModal
+	<Modal
 		ref="unpublishModal"
 		:header="formatMessage(messages.unpublishModalHeader)"
 		fade="warning"
@@ -50,8 +50,8 @@
 				>
 			</div></template
 		>
-	</NewModal>
-	<NewModal
+	</Modal>
+	<Modal
 		ref="unlinkModal"
 		:header="formatMessage(messages.unlinkModalHeader)"
 		fade="warning"
@@ -81,7 +81,7 @@
 				>
 			</div></template
 		>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -92,7 +92,7 @@ import {
 	commonMessages,
 	defineMessages,
 	InlineBackupCreator,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -117,8 +117,8 @@ const props = withDefaults(
 	},
 )
 const { formatMessage } = useVIntl()
-const unpublishModal = ref<InstanceType<typeof NewModal>>()
-const unlinkModal = ref<InstanceType<typeof NewModal>>()
+const unpublishModal = ref<InstanceType<typeof Modal>>()
+const unlinkModal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const backupBusy = ref(false)
 
diff --git a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue
index 2c63720be5..6d7cd969c6 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue
+++ b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-install-modal/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			reportMode
@@ -242,7 +242,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 	<ModpackContentModal
 		ref="contentModal"
 		:header="formatMessage(messages.sharedInstanceContent)"
@@ -270,8 +270,8 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	MarkdownEditor,
+	Modal,
 	ModpackContentModal,
-	NewModal,
 	Table,
 	type TableColumn,
 	useScrollIndicator,
@@ -302,7 +302,7 @@ type SharedInstanceCreator = {
 	avatarUrl: string | null
 }
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const contentModal = ref<InstanceType<typeof ModpackContentModal>>()
 const externalFileTable = ref<HTMLElement | null>(null)
 const preview = ref<SharedInstanceInstallPreview | null>(null)
diff --git a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
index 7993ef2034..8f0cb23eaa 100644
--- a/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
+++ b/apps/app-frontend/src/components/ui/skin/EditSkinModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :on-hide="handleModalHide">
+	<Modal ref="modal" :on-hide="handleModalHide">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">
 				{{ formatMessage(mode === 'edit' ? messages.editSkinTitle : messages.addSkinTitle) }}
@@ -127,7 +127,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -139,7 +139,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	RadioButtons,
 	SkinPreviewRenderer,
 	useScrollIndicator,
diff --git a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
index c1679ae0b5..102cb49b94 100644
--- a/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue
@@ -5,7 +5,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -29,7 +29,7 @@ const props = defineProps<{
 	instance: GameInstance
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const name = ref('')
 const address = ref('')
@@ -88,7 +88,7 @@ const messages = defineMessages({
 defineExpose({ show, hide })
 </script>
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)" width="500px" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(messages.title)" width="500px" max-width="500px">
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
@@ -116,5 +116,5 @@ defineExpose({ show, hide })
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
index d82bf82607..69f99d2f96 100644
--- a/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue
@@ -5,7 +5,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -59,7 +59,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const isServer = computed(() => props.world?.type === 'server')
 const isSingleplayer = computed(() => props.world?.type === 'singleplayer')
@@ -94,7 +94,7 @@ defineExpose({ show, hide })
 </script>
 
 <template>
-	<NewModal ref="modal" :header="formatMessage(titleMessage)" fade="danger" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(titleMessage)" fade="danger" max-width="500px">
 		<div class="flex flex-col gap-4">
 			<Admonition
 				type="critical"
@@ -120,5 +120,5 @@ defineExpose({ show, hide })
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
index ce541cce4e..6cb87b3451 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue
@@ -5,7 +5,7 @@ import {
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -32,7 +32,7 @@ const props = defineProps<{
 	instance: GameInstance
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const name = ref<string>('')
 const address = ref<string>('')
@@ -96,7 +96,7 @@ const titleMessage = defineMessage({
 })
 </script>
 <template>
-	<NewModal ref="modal" :header="formatMessage(titleMessage)" width="500px" max-width="500px">
+	<Modal ref="modal" :header="formatMessage(titleMessage)" width="500px" max-width="500px">
 		<ServerModalBody
 			v-model:name="name"
 			v-model:address="address"
@@ -119,5 +119,5 @@ const titleMessage = defineMessage({
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
index b611ce4a5f..c7dd634744 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -6,12 +6,12 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
-import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
 import HideFromHomeOption from '@/components/ui/world/modal/HideFromHomeOption.vue'
 import type { GameInstance } from '@/helpers/types'
 import type { DisplayStatus, SingleplayerWorld } from '@/helpers/worlds.ts'
@@ -94,7 +94,7 @@ const messages = defineMessages({
 })
 </script>
 <template>
-	<ModalWrapper ref="modal">
+	<Modal ref="modal">
 		<template #title>
 			<Avatar :src="removeIcon || !icon ? undefined : icon" size="24px" />
 			{{ instance.name }} <ChevronRightIcon />
@@ -132,5 +132,5 @@ const messages = defineMessages({
 				</button>
 			</ButtonStyled>
 		</div>
-	</ModalWrapper>
+	</Modal>
 </template>
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue b/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue
index 1f7983dcdd..a302502c66 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-remove-member-modal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header)"
 		max-width="470px"
@@ -44,7 +44,7 @@
 				>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -55,7 +55,7 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -64,7 +64,7 @@ import { methodLabels, type ShareRow } from './shared-instance-share-types'
 
 const props = defineProps<{ row: ShareRow | null; memberCount: number }>()
 const emit = defineEmits<{ confirm: [row: ShareRow]; clear: [] }>()
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const { formatMessage } = useVIntl()
 const username = computed(() => props.row?.username ?? '')
 const messages = defineMessages({
diff --git a/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue b/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue
index 9da495ce24..124291a3d7 100644
--- a/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue
+++ b/apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartRenderLimitModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(analyticsChartMessages.renderLimitHeader, { count: tableProjectCount })"
 		fade="warning"
@@ -24,11 +24,11 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
-import { ButtonStyled, NewModal, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, Modal, useVIntl } from '@modrinth/ui'
 
 import { analyticsChartMessages } from '../../analytics-messages'
 
@@ -41,7 +41,7 @@ const emit = defineEmits<{
 }>()
 
 const { formatMessage } = useVIntl()
-const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const modal = ref<InstanceType<typeof Modal> | null>(null)
 
 function show(event: MouseEvent) {
 	modal.value?.show(event)
diff --git a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
index e4f62b43f0..04d1e9d823 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" fade="warning" width="550px">
+	<Modal ref="modal" fade="warning" width="550px">
 		<template #title>
 			<div class="flex items-center gap-2">
 				<span class="text-lg font-extrabold text-contrast">Transfer</span>
@@ -71,12 +71,12 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, Modal, StyledInput } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
@@ -86,7 +86,7 @@ const props = defineProps<{
 	onConfirm: () => void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const confirmationText = ref('')
 
 const isConfirmEnabled = computed(
diff --git a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
index d47a619fa0..cd62481164 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" fade="warning" width="550px">
+	<Modal ref="modal" fade="warning" width="550px">
 		<template #title>
 			<div class="flex items-center gap-2">
 				<span class="text-lg font-extrabold text-contrast">Transfer</span>
@@ -78,12 +78,12 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, Modal, StyledInput } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
@@ -98,7 +98,7 @@ const props = defineProps<{
 	onConfirm: () => void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const confirmationText = ref('')
 
 const isConfirmEnabled = computed(
diff --git a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
index 6f66486fd0..815aa84ebf 100644
--- a/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
+++ b/apps/frontend/src/components/ui/OrganizationProjectTransferModal.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NewModal
+		<Modal
 			ref="modalOpen"
 			:header="formatMessage(messages.transferProjectsTitle)"
 			no-padding
@@ -83,7 +83,7 @@
 					</ButtonStyled>
 				</div>
 			</template>
-		</NewModal>
+		</Modal>
 		<ButtonStyled>
 			<button @click="show($event)">
 				<TransferIcon />
@@ -101,7 +101,7 @@ import {
 	commonMessages,
 	CopyCode,
 	defineMessages,
-	NewModal,
+	Modal,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
index a970e6e0d9..c11bb8a57e 100644
--- a/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
+++ b/apps/frontend/src/components/ui/ProjectDownloadModal/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :on-show="onShow" :on-hide="onHide" width="544px" actions-divider>
+	<Modal ref="modal" :on-show="onShow" :on-hide="onHide" width="544px" actions-divider>
 		<template #title>
 			<template v-if="project">
 				<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" />
@@ -87,7 +87,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -102,7 +102,7 @@ import {
 	injectNotificationManager,
 	type JoinedButtonAction,
 	JoinedButtons,
-	NewModal,
+	Modal,
 	ServersPromo,
 	truncatedTooltip,
 	useDebugLogger,
@@ -146,7 +146,7 @@ type DownloadedFile = DownloadableFile & {
 
 type DownloadActionType = 'zip' | 'dependencies' | 'recommended'
 
-type NewModalRef = {
+type ModalRef = {
 	show: (event?: MouseEvent) => void
 	hide: () => void
 }
@@ -191,7 +191,7 @@ const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const debug = useDebugLogger('DownloadModal')
 
-const modal = ref<NewModalRef | null>(null)
+const modal = ref<ModalRef | null>(null)
 const downloadTitleRef = ref<HTMLElement | null>(null)
 const modalOpening = ref(false)
 const modalOpen = ref(false)
diff --git a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
index a52bb5c01e..c8c12b8b98 100644
--- a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
@@ -6,7 +6,7 @@ import {
 	ButtonStyled,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	ServerNotice,
 	StyledInput,
 	TagItem,
@@ -18,7 +18,7 @@ const client = injectModrinthClient()
 
 type ServerNoticeType = Archon.Notices.v0.ListedNotice
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const emit = defineEmits<{
 	(e: 'close'): void
@@ -107,7 +107,7 @@ function hide() {
 defineExpose({ show, hide })
 </script>
 <template>
-	<NewModal ref="modal" :on-hide="() => emit('close')">
+	<Modal ref="modal" :on-hide="() => emit('close')">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">
 				Editing assignments of notice #{{ notice?.id }}
@@ -202,5 +202,5 @@ defineExpose({ show, hide })
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
index 587402cf1d..5f1c1958ec 100644
--- a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
+++ b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal">
+	<Modal ref="modal">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">Batch credit</span>
 		</template>
@@ -125,7 +125,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -135,7 +135,7 @@ import {
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	TagItem,
 	Toggle,
@@ -148,7 +148,7 @@ import { useBaseFetch } from '#imports'
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const days = ref(1)
 const sendEmail = ref(true)
diff --git a/apps/frontend/src/components/ui/admin/TransferModal.vue b/apps/frontend/src/components/ui/admin/TransferModal.vue
index bd0d5ce399..991da8b31c 100644
--- a/apps/frontend/src/components/ui/admin/TransferModal.vue
+++ b/apps/frontend/src/components/ui/admin/TransferModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal">
+	<Modal ref="modal">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">Schedule transfer</span>
 		</template>
@@ -189,7 +189,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -200,7 +200,7 @@ import {
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	TagItem,
 	Toggle,
@@ -215,7 +215,7 @@ const emit = defineEmits<{
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const modeOptions = [
 	{ value: 'servers', label: 'Servers' },
diff --git a/apps/frontend/src/components/ui/auth/PasskeySettings.vue b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
index 0aeb0aef2f..445a545901 100644
--- a/apps/frontend/src/components/ui/auth/PasskeySettings.vue
+++ b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
@@ -10,7 +10,7 @@
 			@proceed="removePasskey()"
 		/>
 
-		<NewModal
+		<Modal
 			ref="managePasskeyModal"
 			width="600px"
 			:header="formatMessage(messages.managePasskeyTitle)"
@@ -99,9 +99,9 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 
-		<NewModal
+		<Modal
 			ref="addPasskeyModal"
 			width="500px"
 			:header="formatMessage(messages.passkeyAddModalTitle)"
@@ -138,9 +138,9 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 
-		<NewModal
+		<Modal
 			ref="renamePasskeyModal"
 			width="500px"
 			:header="formatMessage(messages.renamePasskeyModalHeader)"
@@ -177,7 +177,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 
 		<div class="adjacent-input mb-0">
 			<label for="manage-passkeys">
@@ -215,7 +215,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	useFormatDateTime,
 	useRelativeTime,
@@ -316,9 +316,9 @@ const messages = defineMessages({
 })
 
 const removePasskeyModal = useTemplateRef<InstanceType<typeof ConfirmModal>>('removePasskeyModal')
-const managePasskeyModal = useTemplateRef<InstanceType<typeof NewModal>>('managePasskeyModal')
-const addPasskeyModal = useTemplateRef<InstanceType<typeof NewModal>>('addPasskeyModal')
-const renamePasskeyModal = useTemplateRef<InstanceType<typeof NewModal>>('renamePasskeyModal')
+const managePasskeyModal = useTemplateRef<InstanceType<typeof Modal>>('managePasskeyModal')
+const addPasskeyModal = useTemplateRef<InstanceType<typeof Modal>>('addPasskeyModal')
+const renamePasskeyModal = useTemplateRef<InstanceType<typeof Modal>>('renamePasskeyModal')
 
 const pendingPasskey = ref<Labrinth.Auth.v2.PasskeyRegisterFinishRequest | null>(null)
 const passkeyToRemove = ref<Labrinth.Auth.v2.Passkey | null>(null)
diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index 50c4e96aae..379fb25a97 100644
--- a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)">
+	<Modal ref="modal" :header="formatMessage(messages.title)">
 		<div class="min-w-md flex max-w-md flex-col gap-3">
 			<CreateLimitAlert v-model="hasHitLimit" type="collection" />
 			<div class="flex flex-col gap-2">
@@ -52,7 +52,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
@@ -61,7 +61,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index 687e2c2362..da854b8c16 100644
--- a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)">
+	<Modal ref="modal" :header="formatMessage(messages.title)">
 		<div class="min-w-md flex max-w-md flex-col gap-3">
 			<CreateLimitAlert v-model="hasHitLimit" type="org" />
 			<div class="flex flex-col gap-2">
@@ -73,7 +73,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -83,7 +83,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
@@ -142,7 +142,7 @@ const slug = ref<string>('')
 const description = ref<string>('')
 const manualSlug = ref<boolean>(false)
 const hasHitLimit = ref<boolean>(false)
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 async function createOrganization(): Promise<void> {
 	startLoading()
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 0000146bb0..50be58a843 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			projectType === 'server'
@@ -125,7 +125,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -140,7 +140,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
@@ -264,7 +264,7 @@ const props = defineProps<{
 	organizationId?: string | null
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const hasHitLimit = ref(false)
 
 const name = ref('')
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
index ef2cc08bc5..ba974e064a 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorTaxFormModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="taxFormModal"
 		:header="formatMessage(messages.taxFormHeader)"
 		:hide-header="currentStage === 'download-confirmation'"
@@ -151,7 +151,7 @@
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -171,7 +171,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	normalizeChildren,
 	useVIntl,
 } from '@modrinth/ui'
@@ -191,7 +191,7 @@ const props = withDefaults(
 
 const { addNotification } = injectNotificationManager()
 
-const taxFormModal = ref<InstanceType<typeof NewModal> | null>(null)
+const taxFormModal = ref<InstanceType<typeof Modal> | null>(null)
 
 type ModalStage = 'form-selection' | 'download-confirmation'
 const currentStage = ref<ModalStage>('form-selection')
diff --git a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
index a6fe5ae171..0ed4df15ff 100644
--- a/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
+++ b/apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="withdrawModal"
 		:closable="currentStage !== 'completion'"
 		:hide-header="currentStage === 'completion'"
@@ -93,7 +93,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 	<CreatorTaxFormModal
 		ref="taxFormModal"
 		:close-button-text="formatMessage(commonMessages.continueButton)"
@@ -118,7 +118,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
@@ -151,7 +151,7 @@ const emit = defineEmits<{
 	(e: 'refresh-data' | 'hide'): void
 }>()
 
-const withdrawModal = useTemplateRef<InstanceType<typeof NewModal>>('withdrawModal')
+const withdrawModal = useTemplateRef<InstanceType<typeof Modal>>('withdrawModal')
 const taxFormModal = ref<InstanceType<typeof CreatorTaxFormModal> | null>(null)
 const isSubmitting = ref(false)
 
diff --git a/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
index 6fbf188849..633f4b2750 100644
--- a/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
+++ b/apps/frontend/src/components/ui/moderation/MaliciousSummaryModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { ClipboardCopyIcon, DownloadIcon, LoaderCircleIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, CopyCode, NewModal, useDebugLogger } from '@modrinth/ui'
+import { ButtonStyled, CopyCode, Modal, useDebugLogger } from '@modrinth/ui'
 import { ref, useTemplateRef } from 'vue'
 
 export type UnsafeFile = {
@@ -18,7 +18,7 @@ const props = defineProps<{
 
 const debug = useDebugLogger('MaliciousSummaryModal')
 
-const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
+const modalRef = useTemplateRef<InstanceType<typeof Modal>>('modalRef')
 
 const versionDataCache = ref<
 	Map<
@@ -96,7 +96,7 @@ defineExpose({ show, hide })
 </script>
 
 <template>
-	<NewModal
+	<Modal
 		ref="modalRef"
 		header="Malicious file(s) summary"
 		:close-on-click-outside="false"
@@ -182,5 +182,5 @@ defineExpose({ show, hide })
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue b/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
index 3d6b948120..9b1cdd3cc4 100644
--- a/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
+++ b/apps/frontend/src/components/ui/moderation/ModpackScanModal.vue
@@ -15,7 +15,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	Table,
 	type TableColumn,
 	useVIntl,
@@ -136,7 +136,7 @@ const props = defineProps<{
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const { addNotification } = injectNotificationManager()
-const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
+const modalRef = useTemplateRef<InstanceType<typeof Modal>>('modalRef')
 const clearModalRef = useTemplateRef<InstanceType<typeof ConfirmModal>>('clearModalRef')
 const { formatMessage } = useVIntl()
 
@@ -373,7 +373,7 @@ defineExpose({ show, hide })
 		@proceed="clearAllGroups"
 	/>
 
-	<NewModal
+	<Modal
 		ref="modalRef"
 		width="60vw"
 		:close-on-click-outside="false"
@@ -517,5 +517,5 @@ defineExpose({ show, hide })
 				</template>
 			</Table>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/apps/frontend/src/components/ui/thread/ConversationThread.vue b/apps/frontend/src/components/ui/thread/ConversationThread.vue
index c5b6545af9..8264aad18c 100644
--- a/apps/frontend/src/components/ui/thread/ConversationThread.vue
+++ b/apps/frontend/src/components/ui/thread/ConversationThread.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NewModal
+		<Modal
 			ref="modalSubmit"
 			:header="
 				formatMessage(
@@ -56,8 +56,8 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
-		<NewModal ref="modalReply" :header="formatMessage(messages.replyModalHeader)">
+		</Modal>
+		<Modal ref="modalReply" :header="formatMessage(messages.replyModalHeader)">
 			<div class="flex max-w-[45rem] flex-col gap-3">
 				<p class="m-0">{{ formatMessage(messages.replyModalDescription) }}</p>
 				<p class="m-0">
@@ -98,7 +98,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 		<div v-if="flags.developerMode" class="mx-4 mb-3 font-semibold">
 			Thread ID:
 			<CopyCode :text="thread.id" />
@@ -430,7 +430,7 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	MarkdownEditor,
-	NewModal,
+	Modal,
 	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/[type]/[project]/gallery.vue b/apps/frontend/src/pages/[type]/[project]/gallery.vue
index 801a86017d..e7be701cd2 100644
--- a/apps/frontend/src/pages/[type]/[project]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/gallery.vue
@@ -305,7 +305,7 @@ import {
 	DropArea,
 	FileInput,
 	injectProjectPageContext,
-	NewModal as Modal,
+	Modal,
 	StyledInput,
 	useFormatDateTime,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
index cf135ac425..15bf8c3596 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
@@ -295,7 +295,7 @@ import {
 	DropArea,
 	FileInput,
 	injectProjectPageContext,
-	NewModal as Modal,
+	Modal,
 	StyledInput,
 	useFormatDateTime,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/[type]/[project]/version/[version].vue b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
index 5facef220d..d8196ddd86 100644
--- a/apps/frontend/src/pages/[type]/[project]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
@@ -10,7 +10,7 @@
 			:proceed-label="formatMessage(messages.proceedDeletion)"
 			@proceed="deleteVersion()"
 		/>
-		<NewModal
+		<Modal
 			v-if="auth.user && currentMember"
 			ref="packageModal"
 			:header="formatMessage(messages.packageDataPackHeader)"
@@ -79,7 +79,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 		<ProjectDownloadModal
 			ref="dependencyDownloadModal"
 			download-reason="dependency"
@@ -513,8 +513,8 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	IntlFormatted,
+	Modal,
 	MultiSelect,
-	NewModal,
 	OverflowMenu,
 	useFormatBytes,
 	useFormatDateTime,
diff --git a/apps/frontend/src/pages/admin/analytics/events.vue b/apps/frontend/src/pages/admin/analytics/events.vue
index bffebfaada..4a19df616b 100644
--- a/apps/frontend/src/pages/admin/analytics/events.vue
+++ b/apps/frontend/src/pages/admin/analytics/events.vue
@@ -7,7 +7,7 @@
 		@proceed="confirmDeleteEvent"
 	/>
 
-	<NewModal
+	<Modal
 		ref="eventModal"
 		:header="modalMode === 'create' ? 'New event' : 'Edit event'"
 		width="480px"
@@ -121,7 +121,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 
 	<div class="normal-page no-sidebar">
 		<div class="normal-page__content flex flex-col gap-4">
@@ -245,9 +245,9 @@ import {
 	DatePicker,
 	injectModrinthClient,
 	injectNotificationManager,
+	Modal,
 	MultiSelect,
 	type MultiSelectOption,
-	NewModal,
 	type SortDirection,
 	StyledInput,
 	Table,
@@ -318,7 +318,7 @@ const metricKindOptions: MultiSelectOption<AnalyticsEventMetricKind>[] = [
 const allMetricKinds = metricKindOptions.map((option) => option.value)
 
 const deleteEventModal = ref<InstanceType<typeof ConfirmModal> | null>(null)
-const eventModal = ref<InstanceType<typeof NewModal> | null>(null)
+const eventModal = ref<InstanceType<typeof Modal> | null>(null)
 const titleInput = ref<InstanceType<typeof StyledInput> | null>(null)
 const searchQuery = ref('')
 const sortColumn = ref<EventColumnKey | undefined>('date')
diff --git a/apps/frontend/src/pages/admin/billing/[user].vue b/apps/frontend/src/pages/admin/billing/[user].vue
index 936ac39ca3..9af5bfb42b 100644
--- a/apps/frontend/src/pages/admin/billing/[user].vue
+++ b/apps/frontend/src/pages/admin/billing/[user].vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="refundModal">
+	<Modal ref="refundModal">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">Refund charge</span>
 		</template>
@@ -57,8 +57,8 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
-	<NewModal ref="modifyModal">
+	</Modal>
+	<Modal ref="modifyModal">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">Modify charge</span>
 		</template>
@@ -96,8 +96,8 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
-	<NewModal ref="creditModal">
+	</Modal>
+	<Modal ref="creditModal">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">Credit subscription</span>
 		</template>
@@ -131,7 +131,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 	<div class="page">
 		<div
 			class="mb-4 flex items-center justify-between border-0 border-b border-solid border-divider pb-4"
@@ -232,7 +232,7 @@ import {
 	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	StyledInput,
 	Toggle,
 	useFormatDateTime,
diff --git a/apps/frontend/src/pages/admin/emails.vue b/apps/frontend/src/pages/admin/emails.vue
index 71b08af93c..d0cc7a3d94 100644
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
+import { ButtonStyled, Modal, StyledInput } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import emails from '~/templates/emails'
@@ -126,7 +126,7 @@ onMounted(() => {
 <template>
 	<div class="normal-page no-sidebar">
 		<h1 class="mb-4 text-3xl font-extrabold text-heading">Email templates</h1>
-		<NewModal
+		<Modal
 			ref="previewModal"
 			header="Preview email"
 			width="min(92vw, 1000px)"
@@ -188,7 +188,7 @@ onMounted(() => {
 					</div>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 		<div class="normal-page__content">
 			<div class="flex flex-wrap items-center gap-3">
 				<StyledInput
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index a3e8465714..c85bb00d2d 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="createNoticeModal">
+	<Modal ref="createNoticeModal">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">{{
 				editingNotice ? `Editing notice #${editingNotice?.id}` : 'Creating a notice'
@@ -118,7 +118,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 	<AssignNoticeModal ref="assignNoticeModal" @close="refreshNotices" />
 	<div class="page">
 		<div
@@ -270,7 +270,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
+	Modal,
 	ServerNotice,
 	StyledInput,
 	TagItem,
@@ -301,7 +301,7 @@ const formatDateTimeShortMonth = useFormatDateTime({
 type ServerNoticeType = Archon.Notices.v0.ListedNotice
 
 const notices = ref<ServerNoticeType[]>([])
-const createNoticeModal = ref<InstanceType<typeof NewModal>>()
+const createNoticeModal = ref<InstanceType<typeof Modal>>()
 const assignNoticeModal = ref<InstanceType<typeof AssignNoticeModal>>()
 
 await refreshNotices()
diff --git a/apps/frontend/src/pages/collection/[collection].vue b/apps/frontend/src/pages/collection/[collection].vue
index db4424666e..fa8f3f5cb8 100644
--- a/apps/frontend/src/pages/collection/[collection].vue
+++ b/apps/frontend/src/pages/collection/[collection].vue
@@ -12,7 +12,7 @@
 			:proceed-label="formatMessage(commonMessages.deleteLabel)"
 			@proceed="deleteCollection()"
 		/>
-		<NewModal v-if="canEdit" ref="editModal" :header="formatMessage(messages.editingCollection)">
+		<Modal 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">
@@ -136,7 +136,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 		<NormalPage :sidebar="cosmetics.leftContentLayout ? 'left' : 'right'">
 			<template #header>
 				<div class="flex flex-col gap-4">
@@ -413,8 +413,8 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
+	Modal,
 	NavTabs,
-	NewModal,
 	normalizeChildren,
 	NormalPage,
 	OverflowMenu,
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 3d57d8402f..052291761f 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NewModal ref="editLinksModal" :header="formatMessage(messages.editLinksHeader)">
+		<Modal ref="editLinksModal" :header="formatMessage(messages.editLinksHeader)">
 			<div class="universal-modal links-modal !p-0">
 				<p>{{ formatMessage(messages.editLinksDescription) }}</p>
 				<section class="links">
@@ -155,7 +155,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 		<ModalCreation ref="modal_creation" />
 		<section class="relative overflow-hidden rounded-2xl">
 			<Table
@@ -365,7 +365,7 @@ import {
 	FloatingActionBar,
 	injectNotificationManager,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	ProjectStatusBadge,
 	StyledInput,
 	Table,
diff --git a/apps/frontend/src/pages/moderation/external-projects.vue b/apps/frontend/src/pages/moderation/external-projects.vue
index fde7ff7ef2..62b051f083 100644
--- a/apps/frontend/src/pages/moderation/external-projects.vue
+++ b/apps/frontend/src/pages/moderation/external-projects.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="editModal" header="Edit external project">
+	<Modal ref="editModal" header="Edit external project">
 		<form class="flex flex-col gap-2" @submit.prevent="saveExternalProjectEdit">
 			<label class="font-semibold text-contrast" for="edit-form-title">Title</label>
 			<StyledInput id="edit-form-title" v-model="editForm.title" type="text" />
@@ -47,7 +47,7 @@
 				</ButtonStyled>
 			</div>
 		</form>
-	</NewModal>
+	</Modal>
 	<div>
 		<form class="flex gap-2" @submit.prevent="executeSearch">
 			<StyledInput
@@ -139,7 +139,7 @@ import {
 	externalProjectLicenseStatusMessages,
 	ExternalProjectLookupCard,
 	injectModrinthClient,
-	NewModal,
+	Modal,
 	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
@@ -150,7 +150,7 @@ const query = ref('')
 const isLoading = ref(false)
 const isSavingEdit = ref(false)
 const client = injectModrinthClient()
-const editModal = useTemplateRef<InstanceType<typeof NewModal>>('editModal')
+const editModal = useTemplateRef<InstanceType<typeof Modal>>('editModal')
 
 useHead({ title: 'External projects - Modrinth' })
 
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
index d625181b13..bb07758cb9 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NewModal ref="editLinksModal" :header="formatMessage(messages.editLinksHeader)">
+		<Modal ref="editLinksModal" :header="formatMessage(messages.editLinksHeader)">
 			<div class="universal-modal links-modal !p-0">
 				<p>{{ formatMessage(messages.editLinksDescription) }}</p>
 				<section class="links">
@@ -155,7 +155,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 		<ModalCreation ref="modal_creation" :organization-id="organization.id" />
 		<section class="relative overflow-hidden rounded-2xl">
 			<Table
@@ -366,7 +366,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	ProjectStatusBadge,
 	StyledInput,
 	Table,
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index ce57a33618..00b8c1dd7f 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -9,7 +9,7 @@
 			:has-to-type="true"
 			@proceed="deleteAccount"
 		/>
-		<NewModal
+		<Modal
 			ref="changeEmailModal"
 			width="500px"
 			:header="`${auth.user.email ? formatMessage(messages.changeEmailHeaderChange) : formatMessage(messages.changeEmailHeaderAdd)}`"
@@ -48,8 +48,8 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
-		<NewModal
+		</Modal>
+		<Modal
 			ref="managePasswordModal"
 			width="600px"
 			:header="`${
@@ -169,8 +169,8 @@
 					</template>
 				</div>
 			</div>
-		</NewModal>
-		<NewModal
+		</Modal>
+		<Modal
 			ref="manageTwoFactorModal"
 			width="500px"
 			:header="
@@ -307,8 +307,8 @@
 					</div>
 				</template>
 			</div>
-		</NewModal>
-		<NewModal
+		</Modal>
+		<Modal
 			ref="manageProvidersModal"
 			width="500px"
 			:header="formatMessage(messages.manageProvidersModalHeader)"
@@ -343,7 +343,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 		<section class="universal-card">
 			<h2 class="text-2xl">{{ formatMessage(messages.accountSecurityTitle) }}</h2>
 
@@ -500,7 +500,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	StyledInput,
 	Table,
 	useVIntl,
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index cf85773eb8..10d1f57d1d 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -7,7 +7,7 @@
 			:proceed-label="formatMessage(messages.deleteConfirmButton)"
 			@proceed="removeApp(editingId)"
 		/>
-		<NewModal ref="appModal" :header="formatMessage(messages.modalHeader)" width="40rem" scrollable>
+		<Modal ref="appModal" :header="formatMessage(messages.modalHeader)" width="40rem" scrollable>
 			<div class="flex flex-col">
 				<label for="app-name" class="m-0 mb-2 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.nameLabel) }}
@@ -146,7 +146,7 @@
 					</ButtonStyled>
 				</div>
 			</template>
-		</NewModal>
+		</Modal>
 
 		<div class="header__row">
 			<div class="header__title">
@@ -263,7 +263,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	normalizeChildren,
 	StyledInput,
 	useFormatDateTime,
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 8441682a36..a4f4824633 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -7,7 +7,7 @@
 			:proceed-label="formatMessage(deleteModalMessages.action)"
 			@proceed="removePat(deletePatIndex)"
 		/>
-		<NewModal
+		<Modal
 			ref="patModal"
 			:header="
 				editPatId !== null
@@ -86,7 +86,7 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 
 		<div class="header__row">
 			<div class="header__title">
@@ -211,7 +211,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
-	NewModal,
+	Modal,
 	StyledInput,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
index 217102b74e..5f1761ec26 100644
--- a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
+++ b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.createHeader)">
+	<Modal ref="modal" :header="formatMessage(messages.createHeader)">
 		<div class="flex flex-col">
 			<label v-if="showUserField" class="contents" for="create-affiliate-user-input">
 				<span class="text-lg font-semibold text-contrast mb-1">
@@ -55,7 +55,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 <script lang="ts"></script>
 <script setup lang="ts">
@@ -64,7 +64,7 @@ import { computed, ref, useTemplateRef } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
-import { AutoBrandIcon, ButtonStyled, NewModal, StyledInput } from '../index'
+import { AutoBrandIcon, ButtonStyled, Modal, StyledInput } from '../index'
 export type CreateAffiliateProps = { sourceName: string; username?: string }
 
 const props = withDefaults(
@@ -82,7 +82,7 @@ const emit = defineEmits<{
 	(e: 'create', data: CreateAffiliateProps): void
 }>()
 
-const modal = useTemplateRef<typeof NewModal>('modal')
+const modal = useTemplateRef<typeof Modal>('modal')
 const { formatMessage } = useVIntl()
 
 const affiliateLinkTitle = ref('')
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 87e932b62b..b6b8c6e48a 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="linkModal" :header="formatMessage(messages.linkModalHeader)" class="!w-[40rem]">
+	<Modal ref="linkModal" :header="formatMessage(messages.linkModalHeader)" class="!w-[40rem]">
 		<div class="modal-insert">
 			<label class="label" for="insert-link-label">
 				<span class="label__title">{{ formatMessage(messages.linkModalLabelFieldTitle) }}</span>
@@ -66,8 +66,8 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
-	<NewModal ref="imageModal" :header="formatMessage(messages.imageModalHeader)" class="!w-[40rem]">
+	</Modal>
+	<Modal ref="imageModal" :header="formatMessage(messages.imageModalHeader)" class="!w-[40rem]">
 		<div class="modal-insert">
 			<label class="label" for="insert-image-alt">
 				<span class="label__title">
@@ -164,8 +164,8 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
-	<NewModal ref="videoModal" :header="formatMessage(messages.videoModalHeader)" class="!w-[40rem]">
+	</Modal>
+	<Modal ref="videoModal" :header="formatMessage(messages.videoModalHeader)" class="!w-[40rem]">
 		<div class="modal-insert">
 			<label class="label" for="insert-video-url">
 				<span class="label__title">
@@ -224,7 +224,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 	<div class="block grow w-full">
 		<div class="editor-action-row w-full">
 			<div class="w-full flex justify-between items-center flex-wrap gap-2">
@@ -335,7 +335,7 @@ import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch
 
 import { defineMessages, type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages.ts'
-import NewModal from '../modal/NewModal.vue'
+import Modal from '../modal/Modal.vue'
 import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
@@ -1042,9 +1042,9 @@ const videoMarkdown = computed(() => {
 	return ''
 })
 
-const linkModal = ref<InstanceType<typeof NewModal> | null>(null)
-const imageModal = ref<InstanceType<typeof NewModal> | null>(null)
-const videoModal = ref<InstanceType<typeof NewModal> | null>(null)
+const linkModal = ref<InstanceType<typeof Modal> | null>(null)
+const imageModal = ref<InstanceType<typeof Modal> | null>(null)
+const videoModal = ref<InstanceType<typeof Modal> | null>(null)
 
 function resetModalStates() {
 	linkText.value = ''
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index e6c3a06718..64d5706611 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:scrollable="true"
 		max-content-height="72vh"
@@ -114,12 +114,12 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script lang="ts">
 import { ChevronRightIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { ButtonStyled, Modal } from '@modrinth/ui'
 import type { Component } from 'vue'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
@@ -175,7 +175,7 @@ const props = withDefaults(
 	},
 )
 
-const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
 const currentStageIndex = ref<number>(0)
 
 function show() {
diff --git a/packages/ui/src/components/billing/AddPaymentMethodModal.vue b/packages/ui/src/components/billing/AddPaymentMethodModal.vue
index 8e1361adb6..1b3dd14f90 100644
--- a/packages/ui/src/components/billing/AddPaymentMethodModal.vue
+++ b/packages/ui/src/components/billing/AddPaymentMethodModal.vue
@@ -5,13 +5,13 @@ import { nextTick, ref, useTemplateRef } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils'
-import { ButtonStyled, NewModal } from '../index'
+import { ButtonStyled, Modal } from '../index'
 import type { AddPaymentMethodProps } from './AddPaymentMethod.vue'
 import AddPaymentMethod from './AddPaymentMethod.vue'
 
 const { formatMessage } = useVIntl()
 
-const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
 const addPaymentMethod = useTemplateRef<InstanceType<typeof AddPaymentMethod>>('addPaymentMethod')
 
 const props = defineProps<AddPaymentMethodProps>()
@@ -40,7 +40,7 @@ defineExpose({
 </script>
 
 <template>
-	<NewModal ref="modal">
+	<Modal ref="modal">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">
 				{{ formatMessage(messages.addingPaymentMethod) }}
@@ -71,5 +71,5 @@ defineExpose({
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index bdae9d75ed..b0fa848b90 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -18,8 +18,8 @@ import { defineMessage, type MessageDescriptor, useVIntl } from '../../composabl
 import { useStripe } from '../../composables/stripe'
 import { commonMessages } from '../../utils'
 import { ButtonStyled } from '../index'
+import Modal from '../modal/Modal.vue'
 import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
-import NewModal from '../modal/NewModal.vue'
 import PlanSelector from './ServersPurchase0Plan.vue'
 import RegionSelector from './ServersPurchase1Region.vue'
 import PaymentMethodSelector from './ServersPurchase2PaymentMethod.vue'
@@ -65,7 +65,7 @@ const props = defineProps<{
 	affiliateCode?: string | null
 }>()
 
-const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
 const selectedPlan = ref<Labrinth.Billing.Internal.Product>()
 const selectedInterval = ref<ServerBillingInterval>('quarterly')
 const loading = ref(false)
@@ -448,7 +448,7 @@ function goToBreadcrumbStep(id: string) {
 }
 </script>
 <template>
-	<NewModal ref="modal" @hide="handleHide">
+	<Modal ref="modal" @hide="handleHide">
 		<template #title>
 			<div class="flex items-center gap-1 font-bold text-secondary">
 				<template v-for="(step, index) in visibleSteps" :key="step">
@@ -601,5 +601,5 @@ function goToBreadcrumbStep(id: string) {
 				</button>
 			</ButtonStyled>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index d1753d10a0..e3fa9f631d 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="purchaseModal">
+	<Modal ref="purchaseModal">
 		<template #title>
 			<span class="text-contrast text-xl font-extrabold">
 				<template v-if="productType === 'midas'">Subscribe to Modrinth+!</template>
@@ -446,7 +446,7 @@
 				</button>
 			</template>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup>
@@ -479,7 +479,7 @@ import Combobox from '../base/Combobox.vue'
 import Slider from '../base/Slider.vue'
 import StyledInput from '../base/StyledInput.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
-import NewModal from '../modal/NewModal.vue'
+import Modal from '../modal/Modal.vue'
 import LoaderIcon from '../servers/icons/LoaderIcon.vue'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/billing/ResubscribeModal.vue b/packages/ui/src/components/billing/ResubscribeModal.vue
index 298416af3b..d683e28da3 100644
--- a/packages/ui/src/components/billing/ResubscribeModal.vue
+++ b/packages/ui/src/components/billing/ResubscribeModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" max-width="550px">
+	<Modal ref="modal" max-width="550px">
 		<template #title>
 			<div class="text-2xl font-semibold text-contrast">{{ formatMessage(messages.title) }}</div>
 		</template>
@@ -92,7 +92,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -105,7 +105,7 @@ import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
 import { useFormatDateTime, useFormatPrice } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import IntlFormatted from '../base/IntlFormatted.vue'
-import { ButtonStyled, NewModal } from '../index'
+import { ButtonStyled, Modal } from '../index'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -148,7 +148,7 @@ const emit = defineEmits<{
 const formatDate = useFormatDateTime({ dateStyle: 'long' })
 const formatPrice = useFormatPrice()
 
-const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
 
 const modalData = ref<ResubscribeModalState | null>(null)
 
diff --git a/packages/ui/src/components/billing/ServersGuestPlanModal.vue b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
index f99f2ecc52..3172c1bc3d 100644
--- a/packages/ui/src/components/billing/ServersGuestPlanModal.vue
+++ b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
@@ -4,7 +4,7 @@ import { ChevronRightIcon, ExternalIcon, XIcon } from '@modrinth/assets'
 import { computed, ref, useTemplateRef } from 'vue'
 
 import ButtonStyled from '../base/ButtonStyled.vue'
-import NewModal from '../modal/NewModal.vue'
+import Modal from '../modal/Modal.vue'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import PlanSelector from './ServersPurchase0Plan.vue'
 
@@ -23,7 +23,7 @@ const emit = defineEmits<{
 	(e: 'continue', payload: { interval: ServerBillingInterval; planId: string | null }): void
 }>()
 
-const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
 
 const selectedPlan = ref<Labrinth.Billing.Internal.Product>()
 const selectedInterval = ref<ServerBillingInterval>('quarterly')
@@ -91,7 +91,7 @@ defineExpose({
 </script>
 
 <template>
-	<NewModal ref="modal" :on-hide="handleModalHide" no-padding>
+	<Modal ref="modal" :on-hide="handleModalHide" no-padding>
 		<template #title>
 			<div class="flex items-center gap-1 font-bold text-secondary">
 				<span class="text-contrast">Plan</span>
@@ -165,5 +165,5 @@ defineExpose({
 				</div>
 			</Transition>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
index fc94cf5af1..022388497b 100644
--- a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
+++ b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
@@ -3,7 +3,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, NewModal, StyledInput } from '#ui/components'
+import { ButtonStyled, Modal, StyledInput } from '#ui/components'
 import { commonMessages } from '#ui/utils'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
@@ -60,7 +60,7 @@ type AssignableFileEntry = {
 	sourceLabel: string
 }
 
-const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 const assignableEntries = ref<AssignableFileEntry[]>([])
 const searchQuery = ref('')
 const searchInputRef = ref<{ focus: () => void } | null>(null)
@@ -176,7 +176,7 @@ defineExpose({ show, hide })
 </script>
 
 <template>
-	<NewModal
+	<Modal
 		ref="modalRef"
 		:header="formatMessage(messages.addFilesModalTitle)"
 		max-width="560px"
@@ -283,5 +283,5 @@ defineExpose({ show, hide })
 				</div>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
index 9ad61e3b1a..53f2c943dc 100644
--- a/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
+++ b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
@@ -4,7 +4,7 @@ import { PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import { Accordion, ButtonStyled, NewModal, StyledInput } from '#ui/components'
+import { Accordion, ButtonStyled, Modal, StyledInput } from '#ui/components'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
 import AttributionGroupFilePicker from './AttributionGroupFilePicker.vue'
@@ -41,7 +41,7 @@ type ExternalProject = {
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 
-const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
+const modalRef = useTemplateRef<InstanceType<typeof Modal>>('modalRef')
 const searchAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('searchAccordionRef')
 const filesAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('filesAccordionRef')
 const searchInputRef = useTemplateRef<InstanceType<typeof StyledInput>>('searchInputRef')
@@ -185,7 +185,7 @@ defineExpose({ show, hide })
 </script>
 
 <template>
-	<NewModal
+	<Modal
 		ref="modalRef"
 		header="Add to existing entry"
 		max-width="720px"
@@ -324,5 +324,5 @@ defineExpose({ show, hide })
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
index c3a55d80d0..2e63e0f252 100644
--- a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
+++ b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
@@ -9,7 +9,7 @@ import {
 	ButtonStyled,
 	Combobox,
 	type ComboboxOption,
-	NewModal,
+	Modal,
 	StyledInput,
 } from '#ui/components'
 
@@ -35,7 +35,7 @@ const emit = defineEmits<{
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 
-const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
+const modalRef = useTemplateRef<InstanceType<typeof Modal>>('modalRef')
 
 const statusOptions: ComboboxOption<ExternalLicenseStatus>[] = [
 	{ value: 'yes', label: 'Yes' },
@@ -140,7 +140,7 @@ defineExpose({ show, hide })
 </script>
 
 <template>
-	<NewModal
+	<Modal
 		ref="modalRef"
 		header="Adding to global permissions database"
 		max-width="640px"
@@ -241,5 +241,5 @@ defineExpose({ show, hide })
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/modal/ConfirmLeaveModal.vue b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
index cba7b8468c..6f1f0af4f2 100644
--- a/packages/ui/src/components/modal/ConfirmLeaveModal.vue
+++ b/packages/ui/src/components/modal/ConfirmLeaveModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="localizeIfPossible(title)" fade="warning" max-width="500px">
+	<Modal ref="modal" :header="localizeIfPossible(title)" fade="warning" max-width="500px">
 		<div class="flex flex-col gap-6">
 			<Admonition :type="admonitionType" :header="localizeIfPossible(header)">
 				{{ localizeIfPossible(body) }}
@@ -22,7 +22,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -33,7 +33,7 @@ import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import { defineMessage, type MessageDescriptor, useVIntl } from '#ui/composables/i18n'
 
-import NewModal from './NewModal.vue'
+import Modal from './Modal.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -80,7 +80,7 @@ function localizeIfPossible(message: MessageDescriptor | string) {
 	return typeof message === 'string' ? message : formatMessage(message)
 }
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 let resolvePromise: ((value: boolean) => void) | null = null
 
 function prompt(): Promise<boolean> {
diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 87a091324e..e46e7d2691 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide" max-width="550px">
+	<Modal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide" max-width="550px">
 		<template #title>
 			<slot name="title">
 				<span class="font-extrabold text-contrast text-lg">{{ title }}</span>
@@ -45,7 +45,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup>
@@ -55,7 +55,7 @@ import { computed, ref } from 'vue'
 
 import ButtonStyled from '../base/ButtonStyled.vue'
 import StyledInput from '../base/StyledInput.vue'
-import NewModal from './NewModal.vue'
+import Modal from './Modal.vue'
 
 const props = defineProps({
 	confirmationText: {
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/Modal.vue
similarity index 100%
rename from packages/ui/src/components/modal/NewModal.vue
rename to packages/ui/src/components/modal/Modal.vue
diff --git a/packages/ui/src/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index db9c485c1b..8253b279f7 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -14,7 +14,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import { injectNotificationManager } from '#ui/providers'
 
-import { ButtonStyled, NewModal, StyledInput } from '../index'
+import { ButtonStyled, Modal, StyledInput } from '../index'
 
 const props = defineProps({
 	header: {
@@ -147,7 +147,7 @@ defineExpose({
 </script>
 
 <template>
-	<NewModal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
+	<Modal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
 		<div class="flex flex-col items-center gap-2">
 			<div
 				:class="['flex items-center justify-center', link ? 'flex-wrap gap-4' : 'flex-col gap-2']"
@@ -280,5 +280,5 @@ defineExpose({
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index 7dfc1847a8..ab5649e15f 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -6,7 +6,7 @@ import { type Component, computed, nextTick, ref } from 'vue'
 
 import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { useScrollIndicator } from '../../composables/scroll-indicator'
-import NewModal from './NewModal.vue'
+import Modal from './Modal.vue'
 export interface Tab {
 	name: MessageDescriptor
 	category?: MessageDescriptor
@@ -60,7 +60,7 @@ const {
 	checkScrollState: checkSidebarScrollState,
 } = useScrollIndicator(sidebarScrollContainer)
 
-const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const modal = ref<InstanceType<typeof Modal> | null>(null)
 
 function setTab(index: number) {
 	if (index === selectedTab.value) return
@@ -85,7 +85,7 @@ function startsCategory(index: number) {
 defineExpose({ show, hide, selectedTab, setTab })
 </script>
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="header"
 		:max-width="maxWidth"
@@ -218,5 +218,5 @@ defineExpose({ show, hide, selectedTab, setTab })
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/components/modal/UnknownFileWarningModal.vue b/packages/ui/src/components/modal/UnknownFileWarningModal.vue
index 247ff96c04..2b16028e29 100644
--- a/packages/ui/src/components/modal/UnknownFileWarningModal.vue
+++ b/packages/ui/src/components/modal/UnknownFileWarningModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header)"
 		:on-hide="handleHide"
@@ -99,7 +99,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -112,7 +112,7 @@ import Admonition from '../base/Admonition.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Table, { type TableColumn } from '../base/Table.vue'
-import NewModal from './NewModal.vue'
+import Modal from './Modal.vue'
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/ui/src/components/modal/UploadProgressModal.vue b/packages/ui/src/components/modal/UploadProgressModal.vue
index 49ec15955f..1f8654d24f 100644
--- a/packages/ui/src/components/modal/UploadProgressModal.vue
+++ b/packages/ui/src/components/modal/UploadProgressModal.vue
@@ -1,10 +1,10 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="false">
+	<Modal ref="modal" :header="formatMessage(messages.header)" :closable="false">
 		<div class="flex flex-col gap-4 md:w-[400px]">
 			<AppearingProgressBar :max-value="totalBytes" :current-value="uploadedBytes" />
 			<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.warningText) }}</p>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +14,7 @@ import { ref } from 'vue'
 import { AppearingProgressBar } from '#ui/components/base'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
-import NewModal from './NewModal.vue'
+import Modal from './Modal.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -29,7 +29,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const uploadedBytes = ref(0)
 const totalBytes = ref(0)
 
diff --git a/packages/ui/src/components/modal/index.ts b/packages/ui/src/components/modal/index.ts
index 4f27f8c31c..06d47a2cfa 100644
--- a/packages/ui/src/components/modal/index.ts
+++ b/packages/ui/src/components/modal/index.ts
@@ -1,6 +1,6 @@
 export { default as ConfirmLeaveModal } from './ConfirmLeaveModal.vue'
 export { default as ConfirmModal } from './ConfirmModal.vue'
-export { default as NewModal } from './NewModal.vue'
+export { default as Modal } from './Modal.vue'
 export type { ServerProject as OpenInAppModalServerProject } from './OpenInAppModal.vue'
 export { default as OpenInAppModal } from './OpenInAppModal.vue'
 export { default as ShareModal } from './ShareModal.vue'
diff --git a/packages/ui/src/components/project/ProjectSidebarDetails.vue b/packages/ui/src/components/project/ProjectSidebarDetails.vue
index bfe45a68c3..f09bce62f2 100644
--- a/packages/ui/src/components/project/ProjectSidebarDetails.vue
+++ b/packages/ui/src/components/project/ProjectSidebarDetails.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col gap-3">
-		<NewModal
+		<Modal
 			ref="modalLicense"
 			:header="project.license.name ? project.license.name : formatMessage(messages.licenseTitle)"
 		>
@@ -11,7 +11,7 @@
 				</span>
 			</template>
 			<div class="markdown-body" v-html="licenseHtml" />
-		</NewModal>
+		</Modal>
 		<h2 class="text-lg m-0">{{ formatMessage(commonMessages.detailsLabel) }}</h2>
 		<div class="flex flex-col gap-3 [&>div]:flex [&>div]:gap-2 [&>div]:items-center">
 			<div v-if="!hideLicense">
@@ -104,7 +104,7 @@ import { defineMessages, useVIntl } from '../../composables/i18n'
 import { injectModrinthClient } from '../../providers'
 import { commonMessages } from '../../utils/common-messages'
 import { Avatar, IntlFormatted } from '../base'
-import { NewModal } from '../modal'
+import { Modal } from '../modal'
 
 const LICENSE_STALE_TIME = 1000 * 60 * 10
 
diff --git a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
index ece84e39da..68b481f45c 100644
--- a/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+++ b/packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :scrollable="true" max-content-height="82vh" :closable="true">
+	<Modal ref="modal" :scrollable="true" max-content-height="82vh" :closable="true">
 		<template #title>
 			<span class="text-lg font-extrabold text-contrast">Edit project Environment</span>
 		</template>
@@ -23,7 +23,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -35,7 +35,7 @@ import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 import { commonMessages } from '../../../../utils/common-messages'
 import ButtonStyled from '../../../base/ButtonStyled.vue'
-import { NewModal } from '../../../modal'
+import { Modal } from '../../../modal'
 import EnvironmentMigration from './EnvironmentMigration.vue'
 
 const { formatMessage } = useVIntl()
@@ -47,7 +47,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
 const environmentMigration =
 	useTemplateRef<InstanceType<typeof EnvironmentMigration>>('environmentMigration')
 
diff --git a/packages/ui/src/components/servers/access/GrantAccessModal.vue b/packages/ui/src/components/servers/access/GrantAccessModal.vue
index 80a6b19c57..8aefe32b1e 100644
--- a/packages/ui/src/components/servers/access/GrantAccessModal.vue
+++ b/packages/ui/src/components/servers/access/GrantAccessModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header)"
 		width="min(34rem, calc(100vw - 2rem))"
@@ -140,7 +140,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -155,7 +155,7 @@ import ButtonStyled from '../../base/ButtonStyled.vue'
 import Checkbox from '../../base/Checkbox.vue'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import IntlFormatted from '../../base/IntlFormatted.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 import type {
 	GrantServerAccessPayload,
 	ServerAccessInviteSuggestion,
@@ -185,7 +185,7 @@ const emit = defineEmits<{
 }>()
 
 const { formatMessage } = useVIntl()
-const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const modal = ref<InstanceType<typeof Modal> | null>(null)
 const target = ref('')
 const selectedRole = ref<Exclude<ServerAccessRole, 'owner'>>('editor')
 const addAsFriend = ref(true)
diff --git a/packages/ui/src/components/servers/access/RemoveAccessModal.vue b/packages/ui/src/components/servers/access/RemoveAccessModal.vue
index e58dc2d634..206954bf9c 100644
--- a/packages/ui/src/components/servers/access/RemoveAccessModal.vue
+++ b/packages/ui/src/components/servers/access/RemoveAccessModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			formatMessage(modalState.shouldCancel ? messages.cancelHeader : messages.header, {
@@ -79,7 +79,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -92,7 +92,7 @@ import { commonMessages } from '../../../utils/common-messages'
 import Admonition from '../../base/Admonition.vue'
 import Avatar from '../../base/Avatar.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 import type { ServerAccessRole } from './types'
 
 const props = withDefaults(
@@ -122,7 +122,7 @@ const emit = defineEmits<{
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const cachedState = ref({
 	username: '',
 	avatarUrl: undefined as string | undefined,
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index 363f428cc7..17840f1d6e 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" header="Create backup" width="500px" @show="focusInput">
+	<Modal ref="modal" header="Create backup" width="500px" @show="focusInput">
 		<div class="flex flex-col gap-2 -mb-2">
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast">Name</span>
@@ -64,7 +64,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -82,7 +82,7 @@ import {
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import StyledInput from '../../base/StyledInput.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -111,7 +111,7 @@ const createMutation = useMutation({
 	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const input = ref<HTMLInputElement>()
 const isRateLimited = ref(false)
 const backupName = ref('')
diff --git a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
index d00e857aad..c9cfc16fc4 100644
--- a/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupDeleteModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header, { count })"
 		fade="danger"
@@ -78,7 +78,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -91,7 +91,7 @@ import { useScrollIndicator } from '../../../composables/scroll-indicator'
 import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 import BackupItem from './BackupItem.vue'
 
 const { formatMessage } = useVIntl()
@@ -136,7 +136,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupListRef = ref<HTMLElement | null>(null)
 const singleBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup>()
 const bulkBackups = ref<Archon.BackupsQueue.v1.BackupQueueBackup[]>([])
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index 54d090990a..a153d6fa50 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" header="Renaming backup" width="500px" @show="focusInput">
+	<Modal ref="modal" header="Renaming backup" width="500px" @show="focusInput">
 		<div class="flex flex-col gap-2">
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast"> Name </span>
@@ -46,7 +46,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -64,7 +64,7 @@ import {
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import StyledInput from '../../base/StyledInput.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
@@ -93,7 +93,7 @@ const renameMutation = useMutation({
 	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const input = ref<HTMLInputElement>()
 const backupName = ref('')
 const originalName = ref('')
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index 64dc1de2c6..470b9fc6a0 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" header="Restore backup" fade="danger" width="500px">
+	<Modal ref="modal" header="Restore backup" fade="danger" width="500px">
 		<div class="flex flex-col gap-6">
 			<Admonition v-if="ctx.isServerRunning.value" type="critical" header="Server is running">
 				Stop the server before restoring a backup.
@@ -36,7 +36,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -54,7 +54,7 @@ import {
 import { commonMessages } from '../../../utils'
 import Admonition from '../../base/Admonition.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 import BackupItem from './BackupItem.vue'
 
 const { addNotification } = injectNotificationManager()
@@ -87,7 +87,7 @@ const restoreMutation = useMutation({
 	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const currentBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup | null>(null)
 const isRestoring = ref(false)
 const restoreDisabled = computed(
diff --git a/packages/ui/src/components/sharing/invite-players-modal/index.vue b/packages/ui/src/components/sharing/invite-players-modal/index.vue
index 0499ee1af7..e8281e8118 100644
--- a/packages/ui/src/components/sharing/invite-players-modal/index.vue
+++ b/packages/ui/src/components/sharing/invite-players-modal/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="header"
 		width="min(34rem, calc(100vw - 2rem))"
@@ -128,7 +128,7 @@
 				</div>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 
 	<InvitePlayersModalInviteLinkEditor
 		v-if="updateInviteLink"
@@ -149,7 +149,7 @@ import { injectNotificationManager } from '../../../providers'
 import Avatar from '../../base/Avatar.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import Combobox from '../../base/Combobox.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 import InvitePlayersModalInviteLinkEditor from './invite-players-modal-invite-link-editor.vue'
 import InvitePlayersModalUserRow from './invite-players-modal-user-row.vue'
 import type {
@@ -202,7 +202,7 @@ const emit = defineEmits<{
 
 const { formatMessage } = useVIntl()
 const notificationManager = injectNotificationManager(null)
-const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const modal = ref<InstanceType<typeof Modal> | null>(null)
 const inviteLinkEditor = ref<InstanceType<typeof InvitePlayersModalInviteLinkEditor> | null>(null)
 
 const messages = defineMessages({
diff --git a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
index 433b42085e..cae769014d 100644
--- a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
+++ b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.title)" width="420px" max-width="420px">
+	<Modal ref="modal" :header="formatMessage(messages.title)" width="420px" max-width="420px">
 		<div class="flex flex-col gap-6">
 			<div class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.expiryLabel) }}</span>
@@ -88,7 +88,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -102,7 +102,7 @@ import ButtonStyled from '../../base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import DatePicker from '../../base/DatePicker.vue'
 import StyledInput from '../../base/StyledInput.vue'
-import NewModal from '../../modal/NewModal.vue'
+import Modal from '../../modal/Modal.vue'
 import type { InviteLinkSettings } from './types'
 
 const EXPIRY_PRESET_DURATIONS = {
@@ -132,7 +132,7 @@ const props = withDefaults(
 )
 const { formatMessage } = useVIntl()
 const notificationManager = injectNotificationManager(null)
-const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const modal = ref<InstanceType<typeof Modal> | null>(null)
 const expiry = ref('')
 const expiryMode = ref<'preset' | 'custom'>('preset')
 const expiryPreset = ref<ExpiryPreset>('seven_days')
diff --git a/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue b/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue
index c20bae50c8..031c7caf5a 100644
--- a/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="560px">
+	<Modal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="560px">
 		<div class="flex flex-col gap-6">
 			{{ formatMessage(messages.admonitionBody, { count }) }}
 		</div>
@@ -26,7 +26,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -34,7 +34,7 @@ import { PlusIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -67,7 +67,7 @@ defineProps<{
 
 type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 let resolvePromise: ((value: SelectedProjectsLeaveResult) => void) | null = null
 
 function prompt(): Promise<SelectedProjectsLeaveResult> {
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 038f596fd4..505abff2b2 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -71,7 +71,7 @@
 		/>
 	</div>
 	<ShareModal ref="shareModal" header="Share Logs" link :social-buttons="false" />
-	<NewModal ref="deleteModal" header="Delete log file" :fade="'danger'" max-width="500px">
+	<Modal ref="deleteModal" header="Delete log file" :fade="'danger'" max-width="500px">
 		<div class="flex flex-col gap-6">
 			<Admonition type="critical" header="This is irreversible">
 				Deleting this log file cannot be undone. Are you sure you want to continue?
@@ -93,7 +93,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -108,7 +108,7 @@ import type { CollapsibleAdmonitionItem } from '#ui/components/base/CollapsibleA
 import CollapsibleAdmonition from '#ui/components/base/CollapsibleAdmonition.vue'
 import Combobox from '#ui/components/base/Combobox.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import ShareModal from '#ui/components/modal/ShareModal.vue'
 import { injectModrinthClient } from '#ui/providers'
 import { injectModalBehavior } from '#ui/providers/modal-behavior'
@@ -151,7 +151,7 @@ const crashItems = computed<CollapsibleAdmonitionItem[]>(() => {
 
 const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
 const shareModal = ref<InstanceType<typeof ShareModal> | null>(null)
-const deleteModal = ref<InstanceType<typeof NewModal> | null>(null)
+const deleteModal = ref<InstanceType<typeof Modal> | null>(null)
 const isDeleting = ref(false)
 const searchQuery = ref('')
 const isFullscreen = ref(false)
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
index 92c2863ff7..91c9d6d7f9 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header)"
 		fade="warning"
@@ -40,7 +40,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -49,7 +49,7 @@ import { nextTick, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -94,7 +94,7 @@ const emit = defineEmits<{
 	(e: 'update'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 const visibleCount = ref(props.count)
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
index 77317e4c8c..46b6f07acd 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			formatMessage(messages.header, {
@@ -41,7 +41,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -50,7 +50,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
 
@@ -102,7 +102,7 @@ const emit = defineEmits<{
 	(e: 'delete'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 const visibleCount = ref(props.count)
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue
index dc1d76df7c..4300f37e4c 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			formatMessage(messages.header, {
@@ -35,7 +35,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -44,7 +44,7 @@ import { nextTick, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
 
@@ -78,7 +78,7 @@ const emit = defineEmits<{
 	(e: 'disable'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const visibleCount = ref(props.count)
 const visibleItemType = ref(props.itemType)
 const visibleWarning = ref(props.warning)
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
index a0ab73badf..22f91daa53 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header, { action: downgrade ? 'downgrade' : 'update' })"
 		fade="warning"
@@ -51,7 +51,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -60,7 +60,7 @@ import { computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -107,7 +107,7 @@ const emit = defineEmits<{
 	(e: 'confirm' | 'cancel'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
index d8946e3a5e..edfcd9f389 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header)"
 		fade="danger"
@@ -33,7 +33,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -42,7 +42,7 @@ import { ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -81,7 +81,7 @@ const emit = defineEmits<{
 	(e: 'reinstall'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
index a9dedf3c30..0b568edb85 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			formatMessage(messages.header, {
@@ -28,7 +28,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -36,7 +36,7 @@ import { HammerIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -81,7 +81,7 @@ const emit = defineEmits<{
 	(e: 'repair'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 function show() {
 	debug('show: called', { hasModalRef: !!modal.value })
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
index 9497d880cc..7f188c1863 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="props.header ?? formatMessage(messages.header)"
 		fade="warning"
@@ -37,7 +37,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -46,7 +46,7 @@ import { computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -89,7 +89,7 @@ const emit = defineEmits<{
 	(e: 'unlink'): void
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 const admonitionHeader = computed(() => {
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue
index eccfc87e16..f4ef9e0760 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header)"
 		fade="danger"
@@ -186,7 +186,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -196,7 +196,7 @@ import { computed, nextTick, ref } from 'vue'
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useScrollIndicator } from '#ui/composables/scroll-indicator'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -297,7 +297,7 @@ const messages = defineMessages({
 	},
 })
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const deletingListRef = ref<HTMLElement | null>(null)
 const dependentListRef = ref<HTMLElement | null>(null)
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index b8df546ea5..43d6f33d4e 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" no-padding scrollable max-width="560px" width="560px" :on-hide="handleHide">
+	<Modal ref="modal" no-padding scrollable max-width="560px" width="560px" :on-hide="handleHide">
 		<template #title>
 			<span class="text-2xl font-semibold text-contrast">
 				{{ formatMessage(messages.header) }}
@@ -241,7 +241,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -265,7 +265,7 @@ import Chips from '#ui/components/base/Chips.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectFilePicker } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -391,7 +391,7 @@ const emit = defineEmits<{
 	cancel: []
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 type Tab = 'existing' | 'new'
 const tabs = computed<Tab[]>(() =>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
index f7107f9c53..5972c85444 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
@@ -18,7 +18,7 @@ import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectPageContext } from '#ui/providers/page-context'
 import {
@@ -111,7 +111,7 @@ export interface ModpackContentModalState {
 	scrollTop: number
 }
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const scrollContainer = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
 const items = ref<ContentItem[]>([])
@@ -456,7 +456,7 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 </script>
 
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:max-width="'min(928px, calc(95vw - 10rem))'"
 		:width="'min(928px, calc(95vw - 10rem))'"
@@ -667,5 +667,5 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 			@enable="bulkEnable"
 			@disable="bulkDisable"
 		/>
-	</NewModal>
+	</Modal>
 </template>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
index f7002f6ea4..5ed95d4ef5 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:max-width="'min(928px, calc(95vw - 10rem))'"
 		:width="'min(928px, calc(95vw - 10rem))'"
@@ -253,7 +253,7 @@
 				</ButtonStyled>
 			</div>
 		</div>
-	</NewModal>
+	</Modal>
 
 	<ConfirmModal
 		ref="incompatibleUpdateModal"
@@ -297,7 +297,7 @@ import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import VersionChannelIndicator from '#ui/components/version/VersionChannelIndicator.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -478,7 +478,7 @@ const emit = defineEmits<{
 	versionHover: [version: Labrinth.Versions.v2.Version]
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const incompatibleUpdateModal = ref<InstanceType<typeof ConfirmModal>>()
 const searchQuery = ref('')
 const hideIncompatibleState = ref(true)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
index deaf3828b0..e331f575fe 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			formatMessage(messages.header, {
@@ -46,7 +46,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -55,7 +55,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
 
@@ -90,7 +90,7 @@ const emit = defineEmits<{
 	create: [name: string]
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const createInput = ref<HTMLInputElement | null>(null)
 const itemName = ref('')
 const submitted = ref(false)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
index d66e0445b3..18f597af6f 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" fade="danger" :header="formatMessage(messages.header)" max-width="500px">
+	<Modal ref="modal" fade="danger" :header="formatMessage(messages.header)" max-width="500px">
 		<Admonition type="critical" class="md:min-w-[400px]">
 			<template #header>{{ formatMessage(messages.deletingName, { name: item?.name }) }}</template>
 			{{
@@ -24,7 +24,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -33,7 +33,7 @@ import { ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -69,7 +69,7 @@ const emit = defineEmits<{
 	delete: []
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const handleSubmit = () => {
 	emit('delete')
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
index 37a36e298c..6e729c5820 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="
 			formatMessage(messages.header, {
@@ -43,7 +43,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -52,7 +52,7 @@ import { nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
 
@@ -90,7 +90,7 @@ const emit = defineEmits<{
 	move: [destination: string]
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const destination = ref('')
 
 const handleSubmit = () => {
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
index 44cbdbe545..a859989d78 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="formatMessage(messages.header, { name: item?.name })"
 		max-width="500px"
@@ -27,7 +27,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -36,7 +36,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -64,7 +64,7 @@ const emit = defineEmits<{
 	rename: [newName: string]
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const renameInput = ref<HTMLInputElement | null>(null)
 const itemName = ref('')
 const submitted = ref(false)
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
index 9a1bb53dcc..19edec17d3 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="500px">
+	<Modal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="500px">
 		<p class="m-0 text-secondary">
 			{{ formatMessage(messages.body) }}
 		</p>
@@ -25,7 +25,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -33,7 +33,7 @@ import { SaveIcon, TrashIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -57,7 +57,7 @@ const messages = defineMessages({
 
 export type UnsavedChangesResult = 'cancel' | 'discard' | 'save'
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 let resolvePromise: ((value: UnsavedChangesResult) => void) | null = null
 
 function prompt(): Promise<UnsavedChangesResult> {
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
index 61e7f43c94..3e4d651716 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="true" no-padding>
+	<Modal ref="modal" :header="formatMessage(messages.header)" :closable="true" no-padding>
 		<div class="max-w-[500px]">
 			<div class="flex flex-col gap-4 p-4">
 				<Admonition type="warning" :header="formatMessage(messages.warningHeader)">
@@ -70,7 +70,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -80,7 +80,7 @@ import { computed, ref } from 'vue'
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -126,7 +126,7 @@ const emit = defineEmits<{
 	proceed: [path: string]
 }>()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 
 const hasMany = computed(() => files.value.length > 100)
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
index 423635d6e8..791778652d 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="cf ? formatMessage(messages.cfHeader) : formatMessage(messages.zipHeader)"
 	>
@@ -91,7 +91,7 @@
 				</ButtonStyled>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -107,7 +107,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectModrinthClient } from '#ui/providers/api-client'
 import { injectNotificationManager } from '#ui/providers/web-notifications'
@@ -229,7 +229,7 @@ const steps = [
 
 const cf = ref(false)
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const url = ref('')
 const submitted = ref(false)
 const touched = ref(false)
diff --git a/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue b/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
index e13df17036..98b3ab1836 100644
--- a/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal
+	<Modal
 		ref="modal"
 		:header="header"
 		:closable="true"
@@ -189,7 +189,7 @@
 				</div>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -206,7 +206,7 @@ import { type Component, computed, ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -240,7 +240,7 @@ const emit = defineEmits<{
 
 const { formatMessage } = useVIntl()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const buttonsDisabled = ref(false)
 const closingFromAction = ref(false)
diff --git a/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue b/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
index ea9e03e114..07498a8968 100644
--- a/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="!loading" no-padding>
+	<Modal ref="modal" :header="formatMessage(messages.header)" :closable="!loading" no-padding>
 		<div class="flex max-w-[500px] flex-col gap-6 p-6">
 			<Admonition
 				:type="variant === 'loader-change' ? 'critical' : 'warning'"
@@ -79,7 +79,7 @@
 				</template>
 			</div>
 		</template>
-	</NewModal>
+	</Modal>
 </template>
 
 <script setup lang="ts">
@@ -95,7 +95,7 @@ import { ref } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -116,7 +116,7 @@ const emit = defineEmits<{
 
 const { formatMessage } = useVIntl()
 
-const modal = ref<InstanceType<typeof NewModal>>()
+const modal = ref<InstanceType<typeof Modal>>()
 const buttonsDisabled = ref(false)
 const loadingAction = ref<'auto-fix' | 'disable-conflicts' | null>(null)
 
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index dd8091b289..62e2165176 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -2,7 +2,7 @@
 	<div>
 		<Teleport to="body">
 			<div class="relative z-[100]">
-				<NewModal ref="editAllocationModal" header="Edit allocation" width="550px">
+				<Modal ref="editAllocationModal" header="Edit allocation" width="550px">
 					<form class="flex w-full flex-col gap-2" @submit.prevent="editAllocation">
 						<label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
 						<StyledInput
@@ -30,7 +30,7 @@
 							</ButtonStyled>
 						</div>
 					</form>
-				</NewModal>
+				</Modal>
 
 				<ConfirmModal
 					ref="confirmDeleteModal"
@@ -223,7 +223,7 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
+import { ButtonStyled, ConfirmModal, Modal, StyledInput, Table, TagItem } from '#ui/components'
 import type { TableColumn } from '#ui/components/base'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
@@ -281,7 +281,7 @@ const dnsColumns: TableColumn[] = [
 	{ key: 'content', label: 'Content' },
 ]
 
-const editAllocationModal = ref<typeof NewModal>()
+const editAllocationModal = ref<typeof Modal>()
 const confirmDeleteModal = ref<typeof ConfirmModal>()
 const editAllocationInput = ref<HTMLInputElement | null>(null)
 const createAllocationName = ref('')
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index be4f1644b9..989b5883e1 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -1,6 +1,6 @@
 <template>
 	<template v-if="user">
-		<NewModal
+		<Modal
 			ref="blockUserModal"
 			:header="formatMessage(messages.blockUserTitle, { username: user.username })"
 			:closable="!isBlockingUser"
@@ -28,9 +28,9 @@
 					</ButtonStyled>
 				</div>
 			</template>
-		</NewModal>
+		</Modal>
 
-		<NewModal
+		<Modal
 			v-if="variant === 'web'"
 			ref="editRoleModal"
 			:header="formatMessage(messages.editRoleButton)"
@@ -66,9 +66,9 @@
 					</ButtonStyled>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 
-		<NewModal
+		<Modal
 			v-if="variant === 'web' && isStaffViewing"
 			ref="userDetailsModal"
 			:header="formatMessage(messages.userDetailsTitle)"
@@ -164,7 +164,7 @@
 					</span>
 				</div>
 			</div>
-		</NewModal>
+		</Modal>
 
 		<NormalPage :sidebar="sidebarPosition">
 			<template #header>
@@ -453,7 +453,7 @@ import EmptyState from '#ui/components/base/EmptyState.vue'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
 import SmartClickable from '#ui/components/base/SmartClickable.vue'
-import NewModal from '#ui/components/modal/NewModal.vue'
+import Modal from '#ui/components/modal/Modal.vue'
 import NormalPage from '#ui/components/page/NormalPage.vue'
 import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
diff --git a/packages/ui/src/stories/add-stories.md b/packages/ui/src/stories/add-stories.md
index 19f83c3ba9..04b775ea5a 100644
--- a/packages/ui/src/stories/add-stories.md
+++ b/packages/ui/src/stories/add-stories.md
@@ -153,9 +153,9 @@ For components that need user interaction to show:
 ```typescript
 export const Default: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			return { modalRef }
 		},
 		template: /* html */ `
@@ -163,9 +163,9 @@ export const Default: Story = {
                 <ButtonStyled @click="modalRef?.show()">
                     <button>Open Modal</button>
                 </ButtonStyled>
-                <NewModal ref="modalRef" header="Example Modal">
+                <Modal ref="modalRef" header="Example Modal">
                     <p>Modal content</p>
-                </NewModal>
+                </Modal>
             </div>
         `,
 	}),
diff --git a/packages/ui/src/stories/instances/ContentModpackCard.stories.ts b/packages/ui/src/stories/instances/ContentModpackCard.stories.ts
index 720bc4fee7..1258c36ec1 100644
--- a/packages/ui/src/stories/instances/ContentModpackCard.stories.ts
+++ b/packages/ui/src/stories/instances/ContentModpackCard.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { fn } from 'storybook/test'
 import { ref } from 'vue'
 
-import NewModal from '../../components/modal/NewModal.vue'
+import Modal from '../../components/modal/Modal.vue'
 import ContentCardItem from '../../layouts/shared/content-tab/components/ContentCardItem.vue'
 import ContentModpackCard from '../../layouts/shared/content-tab/components/ContentModpackCard.vue'
 import type {
@@ -470,9 +470,9 @@ export const WithContentModal: Story = {
 		project: cobblemonProject,
 	},
 	render: () => ({
-		components: { ContentModpackCard, NewModal, ContentCardItem },
+		components: { ContentModpackCard, Modal, ContentCardItem },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const modpackContent = [
 				{
 					project: {
@@ -524,7 +524,7 @@ export const WithContentModal: Story = {
 					@content="modalRef?.show()"
 					@update="() => alert('Update clicked')"
 				/>
-				<NewModal ref="modalRef" header="Modpack Content">
+				<Modal ref="modalRef" header="Modpack Content">
 					<div class="flex flex-col gap-4">
 						<ContentCardItem
 							v-for="item in modpackContent"
@@ -533,7 +533,7 @@ export const WithContentModal: Story = {
 							:version="item.version"
 						/>
 					</div>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
diff --git a/packages/ui/src/stories/modal/NewModal.stories.ts b/packages/ui/src/stories/modal/Modal.stories.ts
similarity index 75%
rename from packages/ui/src/stories/modal/NewModal.stories.ts
rename to packages/ui/src/stories/modal/Modal.stories.ts
index b044f7289f..62bdb4e2fc 100644
--- a/packages/ui/src/stories/modal/NewModal.stories.ts
+++ b/packages/ui/src/stories/modal/Modal.stories.ts
@@ -2,21 +2,21 @@ import type { StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
 import ButtonStyled from '../../components/base/ButtonStyled.vue'
-import NewModal from '../../components/modal/NewModal.vue'
+import Modal from '../../components/modal/Modal.vue'
 
 const meta = {
-	title: 'Modal/NewModal',
-	component: NewModal,
+	title: 'Modal/Modal',
+	component: Modal,
 }
 
 export default meta
-type Story = StoryObj<typeof NewModal>
+type Story = StoryObj<typeof Modal>
 
 export const Default: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -25,10 +25,10 @@ export const Default: Story = {
 				<ButtonStyled color="brand">
 					<button @click="openModal">Open Modal</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" header="Example Modal">
+				<Modal ref="modalRef" header="Example Modal">
 					<p>This is the modal content.</p>
 					<p class="text-secondary mt-2">You can put any content here.</p>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
@@ -36,9 +36,9 @@ export const Default: Story = {
 
 export const WithActions: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -47,7 +47,7 @@ export const WithActions: Story = {
 				<ButtonStyled color="brand">
 					<button @click="openModal">Open Modal with Actions</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" header="Confirm Action">
+				<Modal ref="modalRef" header="Confirm Action">
 					<p>Are you sure you want to proceed with this action?</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end">
@@ -59,7 +59,7 @@ export const WithActions: Story = {
 							</ButtonStyled>
 						</div>
 					</template>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
@@ -67,9 +67,9 @@ export const WithActions: Story = {
 
 export const DangerFade: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -78,7 +78,7 @@ export const DangerFade: Story = {
 				<ButtonStyled color="red">
 					<button @click="openModal">Open Danger Modal</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" header="Delete Item" fade="danger">
+				<Modal ref="modalRef" header="Delete Item" fade="danger">
 					<p>Are you sure you want to delete this item? This action cannot be undone.</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end">
@@ -90,7 +90,7 @@ export const DangerFade: Story = {
 							</ButtonStyled>
 						</div>
 					</template>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
@@ -98,9 +98,9 @@ export const DangerFade: Story = {
 
 export const WarningFade: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -109,7 +109,7 @@ export const WarningFade: Story = {
 				<ButtonStyled color="orange">
 					<button @click="openModal">Open Warning Modal</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" header="Warning" fade="warning">
+				<Modal ref="modalRef" header="Warning" fade="warning">
 					<p>This action may have unintended consequences. Please review before proceeding.</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end">
@@ -121,7 +121,7 @@ export const WarningFade: Story = {
 							</ButtonStyled>
 						</div>
 					</template>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
@@ -129,9 +129,9 @@ export const WarningFade: Story = {
 
 export const Scrollable: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -140,7 +140,7 @@ export const Scrollable: Story = {
 				<ButtonStyled color="brand">
 					<button @click="openModal">Open Scrollable Modal</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" header="Scrollable Content" scrollable max-content-height="300px">
+				<Modal ref="modalRef" header="Scrollable Content" scrollable max-content-height="300px">
 					<div class="space-y-4">
 						<p v-for="i in 20" :key="i">
 							This is paragraph {{ i }} of scrollable content. The modal will show fade indicators when scrolled.
@@ -153,7 +153,7 @@ export const Scrollable: Story = {
 							</ButtonStyled>
 						</div>
 					</template>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
@@ -161,9 +161,9 @@ export const Scrollable: Story = {
 
 export const MergedHeader: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -172,12 +172,12 @@ export const MergedHeader: Story = {
 				<ButtonStyled color="brand">
 					<button @click="openModal">Open Modal (Merged Header)</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" hide-header merge-header>
+				<Modal ref="modalRef" hide-header merge-header>
 					<div class="text-center py-8">
 						<h2 class="text-xl font-bold mb-4">Custom Header Area</h2>
 						<p>This modal has the header merged with content and only shows a close button.</p>
 					</div>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
@@ -185,9 +185,9 @@ export const MergedHeader: Story = {
 
 export const NotClosable: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -196,7 +196,7 @@ export const NotClosable: Story = {
 				<ButtonStyled color="brand">
 					<button @click="openModal">Open Non-Closable Modal</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" header="Processing..." :closable="false" :close-on-esc="false" :close-on-click-outside="false">
+				<Modal ref="modalRef" header="Processing..." :closable="false" :close-on-esc="false" :close-on-click-outside="false">
 					<p>This modal cannot be closed by clicking outside or pressing escape.</p>
 					<p class="text-secondary mt-2">Only the action button can close it.</p>
 					<template #actions>
@@ -206,7 +206,7 @@ export const NotClosable: Story = {
 							</ButtonStyled>
 						</div>
 					</template>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
@@ -214,9 +214,9 @@ export const NotClosable: Story = {
 
 export const NoPadding: Story = {
 	render: () => ({
-		components: { NewModal, ButtonStyled },
+		components: { Modal, ButtonStyled },
 		setup() {
-			const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
+			const modalRef = ref<InstanceType<typeof Modal> | null>(null)
 			const openModal = () => modalRef.value?.show()
 			return { modalRef, openModal }
 		},
@@ -225,7 +225,7 @@ export const NoPadding: Story = {
 				<ButtonStyled color="brand">
 					<button @click="openModal">Open Modal (No Padding)</button>
 				</ButtonStyled>
-				<NewModal ref="modalRef" header="No Padding Modal" no-padding>
+				<Modal ref="modalRef" header="No Padding Modal" no-padding>
 					<p>This modal has no default padding on the content area.</p>
 					<template #actions>
 						<div class="flex gap-2 justify-end p-6 pt-0">
@@ -234,7 +234,7 @@ export const NoPadding: Story = {
 							</ButtonStyled>
 						</div>
 					</template>
-				</NewModal>
+				</Modal>
 			</div>
 		`,
 	}),
diff --git a/standards/frontend/MODALS.md b/standards/frontend/MODALS.md
index bfedfc0141..8f25596ac2 100644
--- a/standards/frontend/MODALS.md
+++ b/standards/frontend/MODALS.md
@@ -22,27 +22,27 @@
 
 # Regular Modals
 
-Use the `NewModal` component (`packages/ui/src/components/modal/NewModal.vue`) for all standard modals.
+Use the `Modal` component (`packages/ui/src/components/modal/Modal.vue`) for all standard modals.
 
 - Set the modal’s width via the `width` or `maxWidth` props. For responsive sizing, use `min(base-size, calc(95vw - 10rem))`.
-- `ModalWrapper` is deprecated — modal behavior is automatically handled via the `injectModalBehavior` DI utility.
+- Modal behavior (ads, blur, etc.) is automatically handled via the `injectModalBehavior` DI utility.
 
 ## Basic Usage
 
 ```vue
 <script setup lang="ts">
 import { ref } from ‘vue’
-import { NewModal } from ‘@modrinth/ui’
+import { Modal } from ‘@modrinth/ui’
 
-const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const modal = ref<InstanceType<typeof Modal> | null>(null)
 </script>
 
 <template>
 	<button @click="modal?.show($event)">Open</button>
 
-	<NewModal ref="modal" header="My Modal">
+	<Modal ref="modal" header="My Modal">
 		<p>Modal content here.</p>
-	</NewModal>
+	</Modal>
 </template>
 ```
 
@@ -77,9 +77,9 @@ Call `show(event?)` to open the modal. Passing the `MouseEvent` triggers an anim
 The main content area. Rendered inside a padded, optionally scrollable container.
 
 ```vue
-<NewModal ref="modal" header="Confirm">
+<Modal ref="modal" header="Confirm">
 	<p>Are you sure you want to proceed?</p>
-</NewModal>
+</Modal>
 ```
 
 ### `title` slot
@@ -87,13 +87,13 @@ The main content area. Rendered inside a padded, optionally scrollable container
 Replaces the default header text. Use this when you need custom markup in the header (e.g. an icon next to the title or a badge).
 
 ```vue
-<NewModal ref="modal">
+<Modal ref="modal">
 	<template #title>
 		<AlertIcon />
 		<span class="text-2xl font-semibold text-contrast">Custom Title</span>
 	</template>
 	<p>Content here.</p>
-</NewModal>
+</Modal>
 ```
 
 ### `actions` slot
@@ -101,7 +101,7 @@ Replaces the default header text. Use this when you need custom markup in the he
 Renders a bottom action bar below the content area (with `p-4 pt-0` padding). Use this for confirm/cancel buttons.
 
 ```vue
-<NewModal ref="modal" header="Delete Item" fade="danger">
+<Modal ref="modal" header="Delete Item" fade="danger">
 	<p>This action cannot be undone.</p>
 	<template #actions>
 		<ButtonStyled color="danger">
@@ -111,7 +111,7 @@ Renders a bottom action bar below the content area (with `p-4 pt-0` padding). Us
 			<button @click="modal?.hide()">Cancel</button>
 		</ButtonStyled>
 	</template>
-</NewModal>
+</Modal>
 ```
 
 ## Scrollable Content
@@ -119,9 +119,9 @@ Renders a bottom action bar below the content area (with `p-4 pt-0` padding). Us
 Set `scrollable` to enable scroll tracking. The modal renders animated fade gradients at the top and bottom edges when content is scrolled, giving users a visual cue that more content exists.
 
 ```vue
-<NewModal ref="modal" header="Long Content" scrollable max-content-height="60vh">
+<Modal ref="modal" header="Long Content" scrollable max-content-height="60vh">
 	<!-- Long content that may overflow -->
-</NewModal>
+</Modal>
 ```
 
 The `checkScrollState` method is exposed via ref — call it after dynamically changing content to re-evaluate whether fade indicators should appear.
@@ -133,17 +133,17 @@ When `scrollable` is `false` (the default), content uses `overflow-y: auto` with
 When `mergeHeader` is set, the header bar is hidden and a floating close button is rendered in the top-right corner of the modal. Content receives extra top padding to avoid overlapping the button. This is useful for modals with hero images or full-bleed content at the top.
 
 ```vue
-<NewModal ref="modal" merge-header no-padding>
+<Modal ref="modal" merge-header no-padding>
 	<img src="..." class="w-full" />
 	<div class="p-6">
 		<p>Content below the image.</p>
 	</div>
-</NewModal>
+</Modal>
 ```
 
 ## Modal Stacking
 
-`NewModal` integrates with a modal stack (`useModalStack`). Multiple modals can be open simultaneously — only the topmost modal responds to the Escape key. The document body scroll is locked when any modal is open and restored when the last modal closes.
+`Modal` integrates with a modal stack (`useModalStack`). Multiple modals can be open simultaneously — only the topmost modal responds to the Escape key. The document body scroll is locked when any modal is open and restored when the last modal closes.
 
 ## Exposed Methods