From b422d0ff50e1f573c05cdc73c68f7fec4f776495 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 30 Jan 2026 13:29:27 -0700
Subject: [PATCH 01/10] feat: add modals

---
 .../ui/modal/InstallToPlayModal.vue           | 138 ++++++++
 .../components/ui/modal/UpdateToPlayModal.vue | 325 ++++++++++++++++++
 .../app-frontend/src/pages/instance/Index.vue |   6 +
 apps/app-frontend/src/pages/project/Index.vue |   7 +
 4 files changed, 476 insertions(+)
 create mode 100644 apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
 create mode 100644 apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue

diff --git a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
new file mode 100644
index 0000000000..c78889e3be
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
@@ -0,0 +1,138 @@
+<template>
+	<NewModal ref="modal" header="Install to play" :closable="true">
+		<div class="flex flex-col gap-6 max-w-[500px]">
+			<Admonition type="info" header="Shared server instance">
+				This server requires mods to play. Click install to set up the required files from Modrinth.
+			</Admonition>
+
+			<div v-if="sharedBy?.name" class="flex items-center gap-2 text-sm text-secondary">
+				<Avatar
+					v-if="sharedBy?.icon_url"
+					:src="sharedBy.icon_url"
+					:alt="sharedBy.name"
+					size="24px"
+				/>
+				<span>
+					<span class="font-semibold text-contrast">{{ sharedBy.name }}</span>
+					shared this instance with you today.
+				</span>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<span class="font-semibold text-contrast">Shared instance</span>
+				<div class="flex items-center gap-3 rounded-xl bg-surface-4 p-3">
+					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />
+					<div class="flex flex-col gap-0.5">
+						<span class="font-semibold text-contrast">{{ project.title }}</span>
+						<span class="text-sm text-secondary">
+							{{ loaderDisplay }} {{ project.game_versions?.[0] }}
+							<template v-if="modCount"> · {{ modCount }} mods </template>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled>
+					<button @click="handleDecline">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button @click="handleAccept">
+						<DownloadIcon />
+						Install
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, XIcon } from '@modrinth/assets'
+import { Admonition, Avatar, ButtonStyled, NewModal } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import { get_organization, get_team, get_version } from '@/helpers/cache.js'
+import { install } from '@/store/install.js'
+
+const props = defineProps<{
+	project: Labrinth.Projects.v2.Project
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+
+const { data: organization } = useQuery({
+	queryKey: computed(() => ['organization', props.project.organization]),
+	queryFn: () => get_organization(props.project.organization!, 'must_revalidate'),
+	enabled: computed(() => !!props.project.organization),
+})
+
+const { data: teamMembers } = useQuery({
+	queryKey: computed(() => ['team', props.project.team]),
+	queryFn: () => get_team(props.project.team, 'must_revalidate'),
+	enabled: computed(() => !!props.project.team && !props.project.organization),
+})
+
+const sharedBy = computed(() => {
+	if (organization.value) {
+		return {
+			name: organization.value.name,
+			icon_url: organization.value.icon_url,
+		}
+	}
+	if (teamMembers.value) {
+		const owner = teamMembers.value.find((member: { is_owner: boolean }) => member.is_owner)
+		if (owner) {
+			return {
+				name: owner.user.username,
+				icon_url: owner.user.avatar_url,
+			}
+		}
+	}
+	return null
+})
+
+const loaderDisplay = computed(() => {
+	const loader = props.project.loaders?.[0]
+	if (!loader) return ''
+	return formatCategory(loader)
+})
+
+// Fetch the most recent version to get mod count from dependencies
+const latestVersionId = computed(() => props.project.versions?.[0] ?? null)
+const { data: latestVersion } = useQuery({
+	queryKey: computed(() => ['version', latestVersionId.value]),
+	queryFn: () => get_version(latestVersionId.value, 'must_revalidate'),
+	enabled: computed(() => !!latestVersionId.value),
+})
+const modCount = computed(() => latestVersion.value?.dependencies?.length)
+
+async function handleAccept() {
+	hide()
+	try {
+		await install(props.project.id, null, null, 'ProjectPageInstallToPlayModal')
+	} catch (error) {}
+}
+
+function handleDecline() {
+	hide()
+}
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
new file mode 100644
index 0000000000..e27fea50bb
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
@@ -0,0 +1,325 @@
+<template>
+	<NewModal ref="modal" header="Update to play" :closable="true" no-padding>
+		<div class="max-w-[500px]">
+			<div class="flex flex-col gap-4 p-4">
+				<Admonition type="warning" header="Update required">
+					An update is required to play {{ instance.name }}. Please update to the latest version to
+					launch the game.
+				</Admonition>
+
+				<div v-if="diffs.length" class="flex flex-col gap-2">
+					<span v-if="latestVersion?.date_published" class="text-contrast font-semibold">{{
+						new Date(latestVersion.date_published).toLocaleDateString('en-US', {
+							year: 'numeric',
+							month: 'long',
+							day: 'numeric',
+						})
+					}}</span>
+					<div class="flex gap-2">
+						<div
+							v-if="diffs.filter((d) => d.type === 'updated').length"
+							class="flex gap-1 items-center"
+						>
+							<RefreshCwIcon />
+							{{ diffs.filter((d) => d.type === 'updated').length }} updated
+						</div>
+						<div
+							v-if="diffs.filter((d) => d.type === 'added').length"
+							class="flex gap-1 items-center"
+						>
+							<PlusIcon />
+							{{ diffs.filter((d) => d.type === 'added').length }} added
+						</div>
+						<div
+							v-if="diffs.filter((d) => d.type === 'removed').length"
+							class="flex gap-1 items-center"
+						>
+							<MinusIcon />
+							{{ diffs.filter((d) => d.type === 'removed').length }} removed
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-if="diffs.length" class="flex flex-col bg-surface-2 p-4 max-h-[272px] overflow-y-auto">
+				<div
+					v-for="diff in diffs"
+					:key="diff.project_id"
+					class="grid grid-cols-[auto_1fr_1fr_1fr] items-center min-h-10 h-10 gap-2"
+				>
+					<div class="flex flex-col justify-between items-center">
+						<div class="w-[1px] h-2"></div>
+						<PlusIcon v-if="diff.type === 'added'" />
+						<MinusIcon v-else-if="diff.type === 'removed'" />
+						<RefreshCwIcon v-else />
+						<div class="bg-surface-5 w-[1px] h-2 relative top-1"></div>
+					</div>
+
+					<div class="flex gap-1 col-span-2">
+						<span class="text-sm capitalize">{{ diff.type }}</span>
+						<span
+							v-if="diff.project"
+							v-tooltip="diff.project.title"
+							class="text-sm text-contrast font-medium truncate"
+						>
+							{{ diff.project.title }}
+						</span>
+					</div>
+
+					<span
+						v-if="getFilename(diff.newVersion) || getFilename(diff.currentVersion)"
+						v-tooltip="getFilename(diff.newVersion) || getFilename(diff.currentVersion)"
+						class="text-xs truncate text-right"
+					>
+						{{ getFilename(diff.newVersion) || getFilename(diff.currentVersion) }}
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-between gap-2">
+				<ButtonStyled color="red" type="transparent">
+					<button @click="handleReport">
+						<ReportIcon />
+						Report
+					</button>
+				</ButtonStyled>
+				<div class="flex gap-2">
+					<ButtonStyled>
+						<button @click="handleDecline">
+							<XIcon />
+							Cancel
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button @click="handleUpdate">
+							<CheckIcon />
+							Update
+						</button>
+					</ButtonStyled>
+				</div>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { CheckIcon, MinusIcon, PlusIcon, RefreshCwIcon, ReportIcon, XIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, NewModal } from '@modrinth/ui'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import dayjs from 'dayjs'
+import { ref, watch } from 'vue'
+
+import { get_project, get_project_many, get_version_many } from '@/helpers/cache.js'
+import { update_managed_modrinth_version } from '@/helpers/profile'
+import type { GameInstance } from '@/helpers/types'
+
+type Dependency = Labrinth.Versions.v3.Dependency
+type Version = Labrinth.Versions.v2.Version
+
+interface BaseDiff {
+	project_id: string
+	project?: {
+		title: string
+		icon_url?: string
+		slug: string
+	}
+	currentVersionId?: string
+	newVersionId?: string
+	currentVersion?: Version
+	newVersion?: Version
+}
+interface AddedDiff extends BaseDiff {
+	type: 'added'
+	newVersionId: string
+}
+interface RemovedDiff extends BaseDiff {
+	type: 'removed'
+}
+interface UpdatedDiff extends BaseDiff {
+	type: 'updated'
+	currentVersionId: string
+	newVersionId: string
+}
+type DependencyDiff = AddedDiff | RemovedDiff | UpdatedDiff
+
+type ProjectInfo = {
+	id: string
+	title: string
+	icon_url?: string
+	slug: string
+}
+
+const { instance } = defineProps<{
+	instance: GameInstance
+}>()
+
+const modal = ref<InstanceType<typeof NewModal>>()
+const diffs = ref<DependencyDiff[]>([])
+const latestVersionId = ref<string | null>(null)
+const latestVersion = ref<Version | null>(null)
+
+function getFilename(version?: Version): string | undefined {
+	return version?.files.find((f) => f.primary)?.filename
+}
+
+async function computeDependencyDiffs(
+	currentDeps: Dependency[],
+	latestDeps: Dependency[],
+): Promise<DependencyDiff[]> {
+	const currentByProject = new Map<string, Dependency>(
+		currentDeps.map((d) => [d.project_id || '', d]),
+	)
+	const latestByProject = new Map<string, Dependency>(
+		latestDeps.map((d) => [d.project_id || '', d]),
+	)
+
+	const diffs: DependencyDiff[] = []
+
+	// Find added and updated dependencies
+	latestByProject.forEach((latestDep, projectId) => {
+		if (!projectId) return
+		const currentDep = currentByProject.get(projectId)
+		if (!currentDep && latestDep.version_id) {
+			diffs.push({ type: 'added', project_id: projectId, newVersionId: latestDep.version_id })
+		} else if (
+			currentDep?.version_id &&
+			latestDep?.version_id &&
+			currentDep?.version_id !== latestDep.version_id
+		) {
+			diffs.push({
+				type: 'updated',
+				project_id: projectId,
+				currentVersionId: currentDep.version_id,
+				newVersionId: latestDep.version_id,
+			})
+		}
+	})
+
+	// Find removed dependencies
+	currentByProject.forEach((currentDep, projectId) => {
+		if (!projectId) return
+		if (!latestByProject.has(projectId)) {
+			diffs.push({
+				type: 'removed',
+				project_id: projectId,
+				currentVersionId: currentDep.version_id,
+			})
+		}
+	})
+
+	// Fetch projects and versions of diffs
+	const allProjectIds = [...new Set(diffs.map((d) => d.project_id).filter(Boolean))]
+	const allVersionIds = [
+		...new Set(
+			[...diffs.map((d) => d.newVersionId), ...diffs.map((d) => d.currentVersionId)].filter(
+				Boolean,
+			),
+		),
+	] as string[]
+	const [projects, versions] = await Promise.all([
+		get_project_many(allProjectIds, 'must_revalidate'),
+		get_version_many(allVersionIds, 'must_revalidate'),
+	])
+
+	const projectMap = new Map<string, ProjectInfo>(projects.map((p: ProjectInfo) => [p.id, p]))
+	const versionMap = new Map<string, Version>(versions.map((v: Version) => [v.id, v]))
+
+	return diffs
+		.map((diff) => {
+			const project = projectMap.get(diff.project_id)
+			return {
+				...diff,
+				project: project
+					? { title: project.title, icon_url: project.icon_url, slug: project.slug }
+					: undefined,
+				currentVersion: diff.currentVersionId ? versionMap.get(diff.currentVersionId) : undefined,
+				newVersion: diff.newVersionId ? versionMap.get(diff.newVersionId) : undefined,
+			}
+		})
+		.sort((a, b) => {
+			const typeOrder = { added: 0, removed: 1, updated: 2 }
+			const typeCompare = typeOrder[a.type] - typeOrder[b.type]
+			if (typeCompare !== 0) return typeCompare
+
+			const aDate = a.newVersion?.date_published || a.currentVersion?.date_published || ''
+			const bDate = b.newVersion?.date_published || b.currentVersion?.date_published || ''
+			return dayjs(bDate).valueOf() - dayjs(aDate).valueOf()
+		})
+}
+
+async function checkUpdateAvailable(instance: GameInstance): Promise<DependencyDiff[] | null> {
+	if (!instance.linked_data) return null
+
+	try {
+		const project = await get_project(instance.linked_data.project_id, 'must_revalidate')
+		if (!project || !project.versions || project.versions.length === 0) {
+			return null
+		}
+
+		const versions = await get_version_many(project.versions, 'must_revalidate')
+		const sortedVersions = versions.sort(
+			(a: { date_published: string }, b: { date_published: string }) =>
+				dayjs(b.date_published).valueOf() - dayjs(a.date_published).valueOf(),
+		)
+
+		latestVersion.value = sortedVersions[0]
+		latestVersionId.value = latestVersion.value?.id || null
+
+		const currentVersionId = instance.linked_data.version_id
+		const currentVersion = versions.find((v: { id: string }) => v.id === currentVersionId)
+
+		// Compute dependency diffs between current and latest version
+		if (currentVersion && latestVersion.value) {
+			return await computeDependencyDiffs(
+				currentVersion.dependencies || [],
+				latestVersion.value.dependencies || [],
+			)
+		}
+	} catch (error) {
+		return null
+	}
+	return null
+}
+
+watch(
+	() => instance,
+	async () => {
+		const result = await checkUpdateAvailable(instance)
+		diffs.value = result || []
+	},
+	{ immediate: true, deep: true },
+)
+
+async function handleUpdate() {
+	hide()
+	try {
+		if (latestVersionId.value) {
+			await update_managed_modrinth_version(instance.path, latestVersionId.value)
+		}
+	} catch (error) {
+		console.error('Error updating instance:', error)
+	}
+}
+
+function handleReport() {
+	if (instance.linked_data?.project_id) {
+		openUrl(`https://modrinth.com/report?item=project&itemID=${instance.linked_data.project_id}`)
+	}
+}
+
+function handleDecline() {
+	hide()
+}
+
+function show(e?: MouseEvent) {
+	modal.value?.show(e)
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index b1d6f66b1e..ee1dd69cdf 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -6,6 +6,10 @@
 		>
 			<ExportModal ref="exportModal" :instance="instance" />
 			<InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
+			<UpdateToPlayModal ref="updateToPlayModal" :instance="instance" />
+			<ButtonStyled>
+				<button @click="updateToPlayModal.show()">Update to play modal</button>
+			</ButtonStyled>
 			<ContentPageHeader>
 				<template #icon>
 					<Avatar :src="icon" :alt="instance.name" size="96px" :tint-by="instance.path" />
@@ -198,6 +202,7 @@ import { useRoute, useRouter } from 'vue-router'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
+import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
 import { trackEvent } from '@/helpers/analytics'
 import { get_project, get_version_many } from '@/helpers/cache.js'
@@ -229,6 +234,7 @@ const instance = ref()
 const modrinthVersions = ref([])
 const playing = ref(false)
 const loading = ref(false)
+const updateToPlayModal = ref()
 
 async function fetchInstance() {
 	instance.value = await get(route.params.id).catch(handleError)
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 0844ca550f..95699ccf23 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<InstallToPlayModal ref="installToPlayModal" :project="data" />
 		<Teleport to="#sidebar-teleport-target">
 			<ProjectSidebarCompatibility
 				:project="data"
@@ -23,6 +24,9 @@
 			/>
 		</Teleport>
 		<div class="flex flex-col gap-4 p-6">
+			<ButtonStyled>
+				<button @click="installToPlayModal.show()">Install to play modal</button>
+			</ButtonStyled>
 			<InstanceIndicator v-if="instance" :instance="instance" />
 			<template v-if="data">
 				<Teleport
@@ -159,6 +163,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import InstallToPlayModal from '@/components/ui/modal/InstallToPlayModal.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
 import { get_project, get_team, get_version_many } from '@/helpers/cache.js'
 import { get as getInstance, get_projects as getInstanceProjects } from '@/helpers/profile'
@@ -186,6 +191,8 @@ const instanceProjects = ref(null)
 const installed = ref(false)
 const installedVersion = ref(null)
 
+const installToPlayModal = ref()
+
 const instanceFilters = computed(() => {
 	if (!instance.value) {
 		return {}

From 25ac4ae621d0fb379ca110bb3cdd13fbd130c44c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 30 Jan 2026 13:29:33 -0700
Subject: [PATCH 02/10] NewModal add stroke

---
 packages/ui/src/components/modal/NewModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index a9e0088d09..7654ebd77d 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -28,7 +28,9 @@
 				'--_width': width,
 			}"
 		>
-			<div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
+			<div
+				class="modal-body flex flex-col bg-bg-raised rounded-2xl border border-solid border-surface-5"
+			>
 				<div
 					v-if="!hideHeader"
 					data-tauri-drag-region

From 0382153cc361277fb40de40ca5b6fa164459fa9c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 30 Jan 2026 13:35:24 -0700
Subject: [PATCH 03/10] update diff type sorting

---
 .../src/components/ui/modal/UpdateToPlayModal.vue  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
index e27fea50bb..c73966f88d 100644
--- a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
@@ -17,11 +17,11 @@
 					}}</span>
 					<div class="flex gap-2">
 						<div
-							v-if="diffs.filter((d) => d.type === 'updated').length"
+							v-if="diffs.filter((d) => d.type === 'removed').length"
 							class="flex gap-1 items-center"
 						>
-							<RefreshCwIcon />
-							{{ diffs.filter((d) => d.type === 'updated').length }} updated
+							<MinusIcon />
+							{{ diffs.filter((d) => d.type === 'removed').length }} removed
 						</div>
 						<div
 							v-if="diffs.filter((d) => d.type === 'added').length"
@@ -31,11 +31,11 @@
 							{{ diffs.filter((d) => d.type === 'added').length }} added
 						</div>
 						<div
-							v-if="diffs.filter((d) => d.type === 'removed').length"
+							v-if="diffs.filter((d) => d.type === 'updated').length"
 							class="flex gap-1 items-center"
 						>
-							<MinusIcon />
-							{{ diffs.filter((d) => d.type === 'removed').length }} removed
+							<RefreshCwIcon />
+							{{ diffs.filter((d) => d.type === 'updated').length }} updated
 						</div>
 					</div>
 				</div>
@@ -239,7 +239,7 @@ async function computeDependencyDiffs(
 			}
 		})
 		.sort((a, b) => {
-			const typeOrder = { added: 0, removed: 1, updated: 2 }
+			const typeOrder = { removed: 0, added: 1, updated: 2 }
 			const typeCompare = typeOrder[a.type] - typeOrder[b.type]
 			if (typeCompare !== 0) return typeCompare
 

From 5e8e56579b54d0c89722c28a9b450e9b8660b6c1 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 30 Jan 2026 13:36:20 -0700
Subject: [PATCH 04/10] update icon to match figma

---
 .../src/components/ui/modal/UpdateToPlayModal.vue     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
index c73966f88d..5c9a489440 100644
--- a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
@@ -93,7 +93,7 @@
 					</ButtonStyled>
 					<ButtonStyled color="brand">
 						<button @click="handleUpdate">
-							<CheckIcon />
+							<DownloadIcon />
 							Update
 						</button>
 					</ButtonStyled>
@@ -105,7 +105,14 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { CheckIcon, MinusIcon, PlusIcon, RefreshCwIcon, ReportIcon, XIcon } from '@modrinth/assets'
+import {
+	DownloadIcon,
+	MinusIcon,
+	PlusIcon,
+	RefreshCwIcon,
+	ReportIcon,
+	XIcon,
+} from '@modrinth/assets'
 import { Admonition, ButtonStyled, NewModal } from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'

From acf631fbc755cef0890e1cc98e534258d423782b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 30 Jan 2026 14:04:00 -0700
Subject: [PATCH 05/10] fix lint ci issues

---
 .../src/components/ui/modal/InstallToPlayModal.vue            | 4 +++-
 .../src/components/ui/modal/UpdateToPlayModal.vue             | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
index c78889e3be..384d22bd1f 100644
--- a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
@@ -119,7 +119,9 @@ async function handleAccept() {
 	hide()
 	try {
 		await install(props.project.id, null, null, 'ProjectPageInstallToPlayModal')
-	} catch (error) {}
+	} catch (error) {
+		console.error('Failed to install project from InstallToPlayModal:', error)
+	}
 }
 
 function handleDecline() {
diff --git a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
index 5c9a489440..61ff93b046 100644
--- a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
@@ -285,6 +285,7 @@ async function checkUpdateAvailable(instance: GameInstance): Promise<DependencyD
 			)
 		}
 	} catch (error) {
+		console.error('Error checking for updates:', error)
 		return null
 	}
 	return null

From f1283d6b63236a91aedf0d88aad7a78b929ad31a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 3 Feb 2026 18:11:30 -0700
Subject: [PATCH 06/10] remove formatCategory

---
 .../src/components/ui/modal/InstallToPlayModal.vue          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
index 384d22bd1f..2400807441 100644
--- a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
@@ -55,8 +55,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal } from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Admonition, Avatar, ButtonStyled, NewModal, formatLoader, useVIntl } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
@@ -68,6 +67,7 @@ const props = defineProps<{
 }>()
 
 const modal = ref<InstanceType<typeof NewModal>>()
+const { formatMessage } = useVIntl()
 
 const { data: organization } = useQuery({
 	queryKey: computed(() => ['organization', props.project.organization]),
@@ -103,7 +103,7 @@ const sharedBy = computed(() => {
 const loaderDisplay = computed(() => {
 	const loader = props.project.loaders?.[0]
 	if (!loader) return ''
-	return formatCategory(loader)
+	return formatLoader(formatMessage, loader)
 })
 
 // Fetch the most recent version to get mod count from dependencies

From 6c84d7d2e807bbc24fa6b5e7a3622c3420f5f146 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 4 Feb 2026 07:08:08 -0800
Subject: [PATCH 07/10] feature flag on buttons

---
 apps/app-frontend/src/pages/instance/Index.vue | 2 +-
 apps/app-frontend/src/pages/project/Index.vue  | 2 +-
 apps/app-frontend/src/store/theme.ts           | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index ee1dd69cdf..9467f0669f 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -7,7 +7,7 @@
 			<ExportModal ref="exportModal" :instance="instance" />
 			<InstanceSettingsModal ref="settingsModal" :instance="instance" :offline="offline" />
 			<UpdateToPlayModal ref="updateToPlayModal" :instance="instance" />
-			<ButtonStyled>
+			<ButtonStyled v-if="themeStore.featureFlags.server_project_qa">
 				<button @click="updateToPlayModal.show()">Update to play modal</button>
 			</ButtonStyled>
 			<ContentPageHeader>
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 95699ccf23..0119c77182 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -24,7 +24,7 @@
 			/>
 		</Teleport>
 		<div class="flex flex-col gap-4 p-6">
-			<ButtonStyled>
+			<ButtonStyled v-if="themeStore.featureFlags.server_project_qa">
 				<button @click="installToPlayModal.show()">Install to play modal</button>
 			</ButtonStyled>
 			<InstanceIndicator v-if="instance" :instance="instance" />
diff --git a/apps/app-frontend/src/store/theme.ts b/apps/app-frontend/src/store/theme.ts
index 9e082dfcfb..7cca3bd0dc 100644
--- a/apps/app-frontend/src/store/theme.ts
+++ b/apps/app-frontend/src/store/theme.ts
@@ -6,6 +6,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	worlds_tab: false,
 	worlds_in_home: true,
 	servers_in_app: false,
+	server_project_qa: false,
 }
 
 export const THEME_OPTIONS = ['dark', 'light', 'oled', 'system'] as const

From dd30620b24b557cac12f8b884e6b2472054adffa Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 4 Feb 2026 07:08:54 -0800
Subject: [PATCH 08/10] prepr

---
 .../app-frontend/src/components/ui/modal/InstallToPlayModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
index 2400807441..23729f7149 100644
--- a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, formatLoader, useVIntl } from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, formatLoader, NewModal, useVIntl } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 

From 7899352130f95deb43718b7d9e597e0da901ecd7 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 4 Feb 2026 07:12:29 -0800
Subject: [PATCH 09/10] consistent modal borders

---
 apps/app-frontend/src/App.vue                             | 2 +-
 .../src/components/ui/UpdateAvailableToast.vue            | 2 +-
 apps/app-frontend/src/components/ui/UpdateToast.vue       | 2 +-
 .../frontend/src/components/ui/admin/BatchCreditModal.vue | 2 +-
 .../ui/dashboard/withdraw-stages/CompletionStage.vue      | 2 +-
 .../ui/moderation/checklist/ModerationChecklist.vue       | 8 ++++----
 .../src/components/ui/servers/ContentVersionEditModal.vue | 2 +-
 .../src/components/ui/servers/TeleportOverflowMenu.vue    | 2 +-
 packages/ui/src/components/modal/NewModal.vue             | 2 +-
 .../servers/files/explorer/TeleportOverflowMenu.vue       | 2 +-
 10 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 667e8aabf6..f0511a1b4a 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1002,7 +1002,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<transition name="popup-survey">
 				<div
 					v-if="availableSurvey"
-					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-divider border-[1px] border-solid border-b-0 p-4"
+					class="w-[400px] z-20 fixed -bottom-12 pb-16 right-[--right-bar-width] mr-4 rounded-t-2xl card-shadow bg-bg-raised border-surface-5 border-[1px] border-solid border-b-0 p-4"
 				>
 					<h2 class="text-lg font-extrabold mt-0 mb-2">Hey there Modrinth user!</h2>
 					<p class="m-0 leading-tight">
diff --git a/apps/app-frontend/src/components/ui/UpdateAvailableToast.vue b/apps/app-frontend/src/components/ui/UpdateAvailableToast.vue
index 9b2f310636..ccae3ef5a1 100644
--- a/apps/app-frontend/src/components/ui/UpdateAvailableToast.vue
+++ b/apps/app-frontend/src/components/ui/UpdateAvailableToast.vue
@@ -65,7 +65,7 @@ const messages = defineMessages({
 <template>
 	<div
 		v-if="availableUpdate && !dismissed"
-		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-divider border-solid border-[2px]"
+		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-surface-5 border-solid border-[2px]"
 	>
 		<div class="flex min-w-[25rem] gap-4">
 			<h2 class="whitespace-nowrap text-base text-contrast font-semibold m-0 grow">
diff --git a/apps/app-frontend/src/components/ui/UpdateToast.vue b/apps/app-frontend/src/components/ui/UpdateToast.vue
index b9b95f235a..6a7f104c6b 100644
--- a/apps/app-frontend/src/components/ui/UpdateToast.vue
+++ b/apps/app-frontend/src/components/ui/UpdateToast.vue
@@ -68,7 +68,7 @@ const messages = defineMessages({
 </script>
 <template>
 	<div
-		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-divider border-solid border-[2px]"
+		class="grid grid-cols-[min-content] fixed card-shadow rounded-2xl top-[--top-bar-height] mt-6 right-6 p-4 z-10 bg-bg-raised border-surface-5 border-solid border-[2px]"
 		:class="{
 			'download-complete': progress === 1,
 		}"
diff --git a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
index 8e6dbcbf2e..2a171087da 100644
--- a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
+++ b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
@@ -90,7 +90,7 @@
 					</span>
 				</label>
 				<div
-					class="text-muted flex flex-col gap-2 rounded-lg border border-divider bg-button-bg p-4"
+					class="text-muted flex flex-col gap-2 rounded-lg border border-surface-5 bg-button-bg p-4"
 				>
 					<span>Hi {user.name},</span>
 					<div class="textarea-wrapper">
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
index ebe18d782b..fc302b47f7 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
@@ -68,7 +68,7 @@
 						{{ formatMoney(result?.fee || 0) }}
 					</span>
 				</div>
-				<div class="border-b-1 h-0 w-full rounded-full border-b border-solid border-divider" />
+				<div class="border-b-1 h-0 w-full rounded-full border-b border-solid border-surface-5" />
 				<div
 					class="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-0"
 				>
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index 5f76ce6c68..17a548e1d1 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -57,7 +57,7 @@
 				</div>
 				<div class="mt-auto">
 					<div
-						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-divider pt-4"
+						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-surface-5 pt-4"
 					>
 						<div class="flex items-center gap-2">
 							<ButtonStyled v-if="lockStatus.expired" @click="retryAcquireLock">
@@ -90,7 +90,7 @@
 				</div>
 				<div class="mt-auto">
 					<div
-						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-divider pt-4"
+						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-surface-5 pt-4"
 					>
 						<div class="flex items-center gap-2">
 							<ButtonStyled @click="reviewAnyway">
@@ -153,7 +153,7 @@
 								v-else
 								v-model="message"
 								type="text"
-								class="bg-bg-input h-[400px] w-full rounded-lg border border-solid border-divider px-3 py-2 font-mono text-base"
+								class="bg-bg-input h-[400px] w-full rounded-lg border border-solid border-surface-5 px-3 py-2 font-mono text-base"
 								placeholder="No message generated."
 								autocomplete="off"
 								@input="persistState"
@@ -317,7 +317,7 @@
 				<!-- Stage control buttons -->
 				<div class="mt-auto">
 					<div
-						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-divider pt-4"
+						class="mt-4 flex grow justify-between gap-2 border-0 border-t-[1px] border-solid border-surface-5 pt-4"
 					>
 						<div class="flex items-center gap-2">
 							<ButtonStyled v-if="!done && !generatedMessage && moderationStore.hasItems">
diff --git a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
index 21fa2e22ff..9aa6e33398 100644
--- a/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
+++ b/apps/frontend/src/components/ui/servers/ContentVersionEditModal.vue
@@ -88,7 +88,7 @@
 				:open-by-default="!versionFilter"
 				:class="[
 					versionFilter ? '' : '!border-solid border-orange bg-bg-orange !text-contrast',
-					'flex flex-col gap-2 rounded-2xl border-2 border-dashed border-divider p-3 transition-all',
+					'flex flex-col gap-2 rounded-2xl border-2 border-dashed border-surface-5 p-3 transition-all',
 				]"
 			>
 				<p class="m-0 items-center font-bold">
diff --git a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
index d50ce2e4c2..4a8f774134 100644
--- a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
+++ b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
@@ -25,7 +25,7 @@
 					v-if="isOpen"
 					ref="menuRef"
 					data-pyro-telepopover-root
-					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-divider bg-bg-raised p-2 shadow-lg"
+					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
 					:style="menuStyle"
 					role="menu"
 					tabindex="-1"
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index 7654ebd77d..1a7a6e5df7 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -34,7 +34,7 @@
 				<div
 					v-if="!hideHeader"
 					data-tauri-drag-region
-					class="grid grid-cols-[auto_min-content] items-center gap-4 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
+					class="grid grid-cols-[auto_min-content] items-center gap-4 p-6 border-solid border-0 border-b-[1px] border-surface-5 max-w-full"
 				>
 					<div class="flex text-wrap break-words items-center gap-3 min-w-0">
 						<slot name="title">
diff --git a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
index 92021126fe..1757ed036b 100644
--- a/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/servers/files/explorer/TeleportOverflowMenu.vue
@@ -25,7 +25,7 @@
 					v-if="isOpen"
 					ref="menuRef"
 					data-pyro-telepopover-root
-					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-divider bg-bg-raised p-2 shadow-lg"
+					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
 					:style="menuStyle"
 					role="menu"
 					tabindex="-1"

From af5aae7bc26e5081684fda0bc3e7109d395f4154 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 4 Feb 2026 07:23:42 -0800
Subject: [PATCH 10/10] intl

---
 .../ui/modal/InstallToPlayModal.vue           |  69 +++++++++--
 .../components/ui/modal/UpdateToPlayModal.vue | 111 +++++++++++++-----
 .../app-frontend/src/locales/en-US/index.json |  51 ++++++++
 3 files changed, 190 insertions(+), 41 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
index 23729f7149..54c9521cb2 100644
--- a/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/InstallToPlayModal.vue
@@ -1,8 +1,8 @@
 <template>
-	<NewModal ref="modal" header="Install to play" :closable="true">
+	<NewModal ref="modal" :header="formatMessage(messages.installToPlay)" :closable="true">
 		<div class="flex flex-col gap-6 max-w-[500px]">
-			<Admonition type="info" header="Shared server instance">
-				This server requires mods to play. Click install to set up the required files from Modrinth.
+			<Admonition type="info" :header="formatMessage(messages.sharedServerInstance)">
+				{{ formatMessage(messages.serverRequiresMods) }}
 			</Admonition>
 
 			<div v-if="sharedBy?.name" class="flex items-center gap-2 text-sm text-secondary">
@@ -13,20 +13,27 @@
 					size="24px"
 				/>
 				<span>
-					<span class="font-semibold text-contrast">{{ sharedBy.name }}</span>
-					shared this instance with you today.
+					<IntlFormatted :message-id="messages.sharedByToday">
+						<template #~name>
+							<span class="font-semibold text-contrast">{{ sharedBy.name }}</span>
+						</template>
+					</IntlFormatted>
 				</span>
 			</div>
 
 			<div class="flex flex-col gap-2">
-				<span class="font-semibold text-contrast">Shared instance</span>
+				<span class="font-semibold text-contrast">
+					{{ formatMessage(messages.sharedInstance) }}
+				</span>
 				<div class="flex items-center gap-3 rounded-xl bg-surface-4 p-3">
 					<Avatar :src="project.icon_url" :alt="project.title" size="48px" />
 					<div class="flex flex-col gap-0.5">
 						<span class="font-semibold text-contrast">{{ project.title }}</span>
 						<span class="text-sm text-secondary">
 							{{ loaderDisplay }} {{ project.game_versions?.[0] }}
-							<template v-if="modCount"> · {{ modCount }} mods </template>
+							<template v-if="modCount">
+								· {{ formatMessage(messages.modCount, { count: modCount }) }}
+							</template>
 						</span>
 					</div>
 				</div>
@@ -38,13 +45,13 @@
 				<ButtonStyled>
 					<button @click="handleDecline">
 						<XIcon />
-						Cancel
+						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand">
 					<button @click="handleAccept">
 						<DownloadIcon />
-						Install
+						{{ formatMessage(messages.installButton) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -55,7 +62,17 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, formatLoader, NewModal, useVIntl } from '@modrinth/ui'
+import {
+	Admonition,
+	Avatar,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	formatLoader,
+	IntlFormatted,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
@@ -136,5 +153,37 @@ function hide() {
 	modal.value?.hide()
 }
 
+const messages = defineMessages({
+	installToPlay: {
+		id: 'app.modal.install-to-play.header',
+		defaultMessage: 'Install to play',
+	},
+	sharedServerInstance: {
+		id: 'app.modal.install-to-play.shared-server-instance',
+		defaultMessage: 'Shared server instance',
+	},
+	serverRequiresMods: {
+		id: 'app.modal.install-to-play.server-requires-mods',
+		defaultMessage:
+			'This server requires mods to play. Click install to set up the required files from Modrinth.',
+	},
+	sharedByToday: {
+		id: 'app.modal.install-to-play.shared-by-today',
+		defaultMessage: '{name} shared this instance with you today.',
+	},
+	sharedInstance: {
+		id: 'app.modal.install-to-play.shared-instance',
+		defaultMessage: 'Shared instance',
+	},
+	modCount: {
+		id: 'app.modal.install-to-play.mod-count',
+		defaultMessage: '{count, plural, one {# mod} other {# mods}}',
+	},
+	installButton: {
+		id: 'app.modal.install-to-play.install-button',
+		defaultMessage: 'Install',
+	},
+})
+
 defineExpose({ show, hide })
 </script>
diff --git a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
index 61ff93b046..8181a2738b 100644
--- a/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
+++ b/apps/app-frontend/src/components/ui/modal/UpdateToPlayModal.vue
@@ -1,41 +1,27 @@
 <template>
-	<NewModal ref="modal" header="Update to play" :closable="true" no-padding>
+	<NewModal ref="modal" :header="formatMessage(messages.updateToPlay)" :closable="true" no-padding>
 		<div class="max-w-[500px]">
 			<div class="flex flex-col gap-4 p-4">
-				<Admonition type="warning" header="Update required">
-					An update is required to play {{ instance.name }}. Please update to the latest version to
-					launch the game.
+				<Admonition type="warning" :header="formatMessage(messages.updateRequired)">
+					{{ formatMessage(messages.updateRequiredDescription, { name: instance.name }) }}
 				</Admonition>
 
 				<div v-if="diffs.length" class="flex flex-col gap-2">
-					<span v-if="latestVersion?.date_published" class="text-contrast font-semibold">{{
-						new Date(latestVersion.date_published).toLocaleDateString('en-US', {
-							year: 'numeric',
-							month: 'long',
-							day: 'numeric',
-						})
+					<span v-if="publishedDate" class="text-contrast font-semibold">{{
+						formatMessage(messages.publishedDate, { date: publishedDate })
 					}}</span>
 					<div class="flex gap-2">
-						<div
-							v-if="diffs.filter((d) => d.type === 'removed').length"
-							class="flex gap-1 items-center"
-						>
+						<div v-if="removedCount" class="flex gap-1 items-center">
 							<MinusIcon />
-							{{ diffs.filter((d) => d.type === 'removed').length }} removed
+							{{ formatMessage(messages.removedCount, { count: removedCount }) }}
 						</div>
-						<div
-							v-if="diffs.filter((d) => d.type === 'added').length"
-							class="flex gap-1 items-center"
-						>
+						<div v-if="addedCount" class="flex gap-1 items-center">
 							<PlusIcon />
-							{{ diffs.filter((d) => d.type === 'added').length }} added
+							{{ formatMessage(messages.addedCount, { count: addedCount }) }}
 						</div>
-						<div
-							v-if="diffs.filter((d) => d.type === 'updated').length"
-							class="flex gap-1 items-center"
-						>
+						<div v-if="updatedCount" class="flex gap-1 items-center">
 							<RefreshCwIcon />
-							{{ diffs.filter((d) => d.type === 'updated').length }} updated
+							{{ formatMessage(messages.updatedCount, { count: updatedCount }) }}
 						</div>
 					</div>
 				</div>
@@ -55,7 +41,7 @@
 					</div>
 
 					<div class="flex gap-1 col-span-2">
-						<span class="text-sm capitalize">{{ diff.type }}</span>
+						<span class="text-sm">{{ formatMessage(diffTypeMessages[diff.type]) }}</span>
 						<span
 							v-if="diff.project"
 							v-tooltip="diff.project.title"
@@ -81,20 +67,20 @@
 				<ButtonStyled color="red" type="transparent">
 					<button @click="handleReport">
 						<ReportIcon />
-						Report
+						{{ formatMessage(commonMessages.reportButton) }}
 					</button>
 				</ButtonStyled>
 				<div class="flex gap-2">
 					<ButtonStyled>
 						<button @click="handleDecline">
 							<XIcon />
-							Cancel
+							{{ formatMessage(commonMessages.cancelButton) }}
 						</button>
 					</ButtonStyled>
 					<ButtonStyled color="brand">
 						<button @click="handleUpdate">
 							<DownloadIcon />
-							Update
+							{{ formatMessage(commonMessages.updateButton) }}
 						</button>
 					</ButtonStyled>
 				</div>
@@ -113,10 +99,17 @@ import {
 	ReportIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Admonition, ButtonStyled, NewModal } from '@modrinth/ui'
+import {
+	Admonition,
+	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	NewModal,
+	useVIntl,
+} from '@modrinth/ui'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { get_project, get_project_many, get_version_many } from '@/helpers/cache.js'
 import { update_managed_modrinth_version } from '@/helpers/profile'
@@ -162,11 +155,20 @@ const { instance } = defineProps<{
 	instance: GameInstance
 }>()
 
+const { formatMessage } = useVIntl()
+
 const modal = ref<InstanceType<typeof NewModal>>()
 const diffs = ref<DependencyDiff[]>([])
 const latestVersionId = ref<string | null>(null)
 const latestVersion = ref<Version | null>(null)
 
+const removedCount = computed(() => diffs.value.filter((d) => d.type === 'removed').length)
+const addedCount = computed(() => diffs.value.filter((d) => d.type === 'added').length)
+const updatedCount = computed(() => diffs.value.filter((d) => d.type === 'updated').length)
+const publishedDate = computed(() =>
+	latestVersion.value?.date_published ? new Date(latestVersion.value.date_published) : null,
+)
+
 function getFilename(version?: Version): string | undefined {
 	return version?.files.find((f) => f.primary)?.filename
 }
@@ -329,5 +331,52 @@ function hide() {
 	modal.value?.hide()
 }
 
+const messages = defineMessages({
+	updateToPlay: {
+		id: 'app.modal.update-to-play.header',
+		defaultMessage: 'Update to play',
+	},
+	updateRequired: {
+		id: 'app.modal.update-to-play.update-required',
+		defaultMessage: 'Update required',
+	},
+	updateRequiredDescription: {
+		id: 'app.modal.update-to-play.update-required-description',
+		defaultMessage:
+			'An update is required to play {name}. Please update to the latest version to launch the game.',
+	},
+	publishedDate: {
+		id: 'app.modal.update-to-play.published-date',
+		defaultMessage: '{date, date, long}',
+	},
+	removedCount: {
+		id: 'app.modal.update-to-play.removed-count',
+		defaultMessage: '{count} removed',
+	},
+	addedCount: {
+		id: 'app.modal.update-to-play.added-count',
+		defaultMessage: '{count} added',
+	},
+	updatedCount: {
+		id: 'app.modal.update-to-play.updated-count',
+		defaultMessage: '{count} updated',
+	},
+})
+
+const diffTypeMessages = defineMessages({
+	added: {
+		id: 'app.modal.update-to-play.diff-type.added',
+		defaultMessage: 'Added',
+	},
+	removed: {
+		id: 'app.modal.update-to-play.diff-type.removed',
+		defaultMessage: 'Removed',
+	},
+	updated: {
+		id: 'app.modal.update-to-play.diff-type.updated',
+		defaultMessage: 'Updated',
+	},
+})
+
 defineExpose({ show, hide })
 </script>
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 861203a963..d621401151 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -5,6 +5,57 @@
   "app.auth-servers.unreachable.header": {
     "message": "Cannot reach authentication servers"
   },
+  "app.modal.install-to-play.header": {
+    "message": "Install to play"
+  },
+  "app.modal.install-to-play.install-button": {
+    "message": "Install"
+  },
+  "app.modal.install-to-play.mod-count": {
+    "message": "{count, plural, one {# mod} other {# mods}}"
+  },
+  "app.modal.install-to-play.server-requires-mods": {
+    "message": "This server requires mods to play. Click install to set up the required files from Modrinth."
+  },
+  "app.modal.install-to-play.shared-by-today": {
+    "message": "{name} shared this instance with you today."
+  },
+  "app.modal.install-to-play.shared-instance": {
+    "message": "Shared instance"
+  },
+  "app.modal.install-to-play.shared-server-instance": {
+    "message": "Shared server instance"
+  },
+  "app.modal.update-to-play.added-count": {
+    "message": "{count} added"
+  },
+  "app.modal.update-to-play.diff-type.added": {
+    "message": "Added"
+  },
+  "app.modal.update-to-play.diff-type.removed": {
+    "message": "Removed"
+  },
+  "app.modal.update-to-play.diff-type.updated": {
+    "message": "Updated"
+  },
+  "app.modal.update-to-play.header": {
+    "message": "Update to play"
+  },
+  "app.modal.update-to-play.published-date": {
+    "message": "{date, date, long}"
+  },
+  "app.modal.update-to-play.removed-count": {
+    "message": "{count} removed"
+  },
+  "app.modal.update-to-play.update-required": {
+    "message": "Update required"
+  },
+  "app.modal.update-to-play.update-required-description": {
+    "message": "An update is required to play {name}. Please update to the latest version to launch the game."
+  },
+  "app.modal.update-to-play.updated-count": {
+    "message": "{count} updated"
+  },
   "app.settings.developer-mode-enabled": {
     "message": "Developer mode enabled."
   },