diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 0fbc724f6e..dbdc2a35dc 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -31,6 +31,7 @@ import {
 	Button,
 	ButtonStyled,
 	commonMessages,
+	CreationFlowModal,
 	defineMessages,
 	I18nDebugPanel,
 	NewsArticleCard,
@@ -65,7 +66,6 @@ import FriendsList from '@/components/ui/friends/FriendsList.vue'
 import IncompatibilityWarningModal from '@/components/ui/install_flow/IncompatibilityWarningModal.vue'
 import InstallConfirmModal from '@/components/ui/install_flow/InstallConfirmModal.vue'
 import ModInstallModal from '@/components/ui/install_flow/ModInstallModal.vue'
-import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import AppSettingsModal from '@/components/ui/modal/AppSettingsModal.vue'
 import AuthGrantFlowWaitModal from '@/components/ui/modal/AuthGrantFlowWaitModal.vue'
 import NavButton from '@/components/ui/NavButton.vue'
@@ -84,6 +84,7 @@ import { get_user } from '@/helpers/cache.js'
 import { command_listener, warning_listener } from '@/helpers/events.js'
 import { useFetch } from '@/helpers/fetch.js'
 import { cancelLogin, get as getCreds, login, logout } from '@/helpers/mr_auth.ts'
+import { create_profile_and_install_from_file } from '@/helpers/pack'
 import { list } from '@/helpers/profile.js'
 import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
 import { get_opening_command, initialize_state } from '@/helpers/state'
@@ -100,11 +101,11 @@ import {
 	provideAppUpdateDownloadProgress,
 	subscribeToDownloadProgress,
 } from '@/providers/download-progress.ts'
+import { setupProviders } from '@/providers/setup'
 import { useError } from '@/store/error.js'
 import { useInstall } from '@/store/install.js'
 import { useLoading, useTheming } from '@/store/state'
 
-import { create_profile_and_install_from_file } from './helpers/pack'
 import { generateSkinPreviews } from './helpers/rendering/batch-skin-renderer'
 import { get_available_capes, get_available_skins } from './helpers/skins'
 import { AppNotificationManager } from './providers/app-notifications'
@@ -134,6 +135,10 @@ provideModalBehavior({
 	onShow: () => hide_ads_window(),
 	onHide: () => show_ads_window(),
 })
+
+const { installationModal, handleCreate, handleBrowseModpacks } =
+	setupProviders(notificationManager)
+
 const news = ref([])
 const availableSurvey = ref(false)
 
@@ -804,9 +809,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		<suspense>
 			<authgrantflowwaitmodal ref="modrinthLoginFlowWaitModal" @flow-cancel="cancelLogin" />
 		</suspense>
-		<suspense>
-			<instancecreationmodal ref="installationModal" />
-		</suspense>
+		<creationflowmodal + ref="installationModal" + type="instance" + show-snapshot-toggle + @create="handleCreate" + @browse-modpacks="handleBrowseModpacks" + />
 		<div>
@@ -852,7 +861,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			</suspense>
 			<navbutton v-tooltip.right="'Create new instance'" - :to="() => $refs.installationModal.show()"
+				:to="() => installationModal?.show()"
 				:disabled="offline"
 		>
 				<plusicon />
diff --git a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
deleted file mode 100644
index b2920fbb5e..0000000000
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ /dev/null
@@ -1,662 +0,0 @@
-<template>
-	<modalwrapper ref="modal" header="Creating an instance">
-		<div>
-			<chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
-		</div>
-		<hr />
-		<div v-if="creationType === 'custom'">
-			<div>
-				<avatar :src="display_icon" size="md" :rounded="true" />
-				<div>
-					<button @click="upload_icon()">
-						<uploadicon />
-						Select icon
-					</button>
-					<button :disabled="!display_icon" @click="reset_icon">
-						<xicon />
-						Remove icon
-					</button>
-				</div>
-			</div>
-			<div>
-				<p>Name</p>
-				
diff --git a/apps/app-frontend/src/helpers/pack.js b/apps/app-frontend/src/helpers/pack.js
deleted file mode 100644
index 312dfc62aa..0000000000
--- a/apps/app-frontend/src/helpers/pack.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * All theseus API calls return serialized values (both return values and errors);
- * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
- * and deserialized into a usable JS object.
- */
-import { invoke } from '@tauri-apps/api/core'
-
-import { create } from './profile'
-
-// Installs pack from a version ID
-export async function create_profile_and_install(
-	projectId,
-	versionId,
-	packTitle,
-	iconUrl,
-	createInstanceCallback = () => {},
-) {
-	const location = {
-		type: 'fromVersionId',
-		project_id: projectId,
-		version_id: versionId,
-		title: packTitle,
-		icon_url: iconUrl,
-	}
-	const profile_creator = await invoke('plugin:pack&#124;pack_get_profile_from_pack', { location })
-	const profile = await create(
-		profile_creator.name,
-		profile_creator.gameVersion,
-		profile_creator.modloader,
-		profile_creator.loaderVersion,
-		null,
-		true,
-	)
-	createInstanceCallback(profile)
-
-	return await invoke('plugin:pack&#124;pack_install', { location, profile })
-}
-
-export async function install_to_existing_profile(projectId, versionId, title, profilePath) {
-	const location = {
-		type: 'fromVersionId',
-		project_id: projectId,
-		version_id: versionId,
-		title,
-	}
-	return await invoke('plugin:pack&#124;pack_install', { location, profile: profilePath })
-}
-
-// Installs pack from a path
-export async function create_profile_and_install_from_file(path) {
-	const location = {
-		type: 'fromFile',
-		path: path,
-	}
-	const profile_creator = await invoke('plugin:pack&#124;pack_get_profile_from_pack', { location })
-	const profile = await create(
-		profile_creator.name,
-		profile_creator.gameVersion,
-		profile_creator.modloader,
-		profile_creator.loaderVersion,
-		null,
-		true,
-	)
-	return await invoke('plugin:pack&#124;pack_install', { location, profile })
-}
diff --git a/apps/app-frontend/src/helpers/pack.ts b/apps/app-frontend/src/helpers/pack.ts
new file mode 100644
index 0000000000..ae1131a3f8
--- /dev/null
+++ b/apps/app-frontend/src/helpers/pack.ts
@@ -0,0 +1,90 @@
+import { invoke } from '@tauri-apps/api/core'
+
+import { create } from './profile'
+import type { InstanceLoader } from './types'
+
+interface PackProfileCreator {
+	name: string
+	gameVersion: string
+	modloader: InstanceLoader
+	loaderVersion: string &#124; null
+}
+
+interface PackLocationVersionId {
+	type: 'fromVersionId'
+	project_id: string
+	version_id: string
+	title: string
+	icon_url?: string
+}
+
+interface PackLocationFile {
+	type: 'fromFile'
+	path: string
+}
+
+export async function create_profile_and_install(
+	projectId: string,
+	versionId: string,
+	packTitle: string,
+	iconUrl?: string,
+	createInstanceCallback: (profile: string) => void = () => {},
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title: packTitle,
+		icon_url: iconUrl,
+	}
+	const profile_creator = await invoke<packprofilecreator>(
+		'plugin:pack&#124;pack_get_profile_from_pack',
+		{ location },
+	)
+	const profile = await create(
+		profile_creator.name,
+		profile_creator.gameVersion,
+		profile_creator.modloader,
+		profile_creator.loaderVersion,
+		null,
+		true,
+	)
+	createInstanceCallback(profile)
+
+	return await invoke('plugin:pack&#124;pack_install', { location, profile })
+}
+
+export async function install_to_existing_profile(
+	projectId: string,
+	versionId: string,
+	title: string,
+	profilePath: string,
+): Promise<void> {
+	const location: PackLocationVersionId = {
+		type: 'fromVersionId',
+		project_id: projectId,
+		version_id: versionId,
+		title,
+	}
+	return await invoke('plugin:pack&#124;pack_install', { location, profile: profilePath })
+}
+
+export async function create_profile_and_install_from_file(path: string): Promise<void> {
+	const location: PackLocationFile = {
+		type: 'fromFile',
+		path,
+	}
+	const profile_creator = await invoke<packprofilecreator>(
+		'plugin:pack&#124;pack_get_profile_from_pack',
+		{ location },
+	)
+	const profile = await create(
+		profile_creator.name,
+		profile_creator.gameVersion,
+		profile_creator.modloader,
+		profile_creator.loaderVersion,
+		null,
+		true,
+	)
+	return await invoke('plugin:pack&#124;pack_install', { location, profile })
+}
diff --git a/apps/app-frontend/src/helpers/profile.ts b/apps/app-frontend/src/helpers/profile.ts
index 96b6676712..5107c34b93 100644
--- a/apps/app-frontend/src/helpers/profile.ts
+++ b/apps/app-frontend/src/helpers/profile.ts
@@ -7,7 +7,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import type { ContentItem, ContentOwner } from '@modrinth/ui'
 import { invoke } from '@tauri-apps/api/core'
 
-import { install_to_existing_profile } from '@/helpers/pack.js'
+import { install_to_existing_profile } from '@/helpers/pack'
 
 import type {
 	CacheBehaviour,
diff --git a/apps/app-frontend/src/pages/library/Index.vue b/apps/app-frontend/src/pages/library/Index.vue
index 93d039fae9..ae96dcac63 100644
--- a/apps/app-frontend/src/pages/library/Index.vue
+++ b/apps/app-frontend/src/pages/library/Index.vue
@@ -1,17 +1,17 @@
 
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 05ec9bdf7a..748602e6b8 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -195,18 +195,13 @@
 		>
 				<panelspinner /> Setting up your server...
 			</div>
-			<div v-else>
-				<h2>
-					What would you like to install on your new server?
-				</h2>
-
-				<serverinstallation - :server="server as ModrinthServer" - :backup-in-progress="backupInProgress" - ignore-current-installation - @reinstall="onReinstall" - />
-			</div>
+			<serversetupmodal + v-else + ref="introSetupModal" + :server="server as ModrinthServer" + initial-setup + @reinstall="onReinstall" + />
 		</template>
 
 		<template v-else>
@@ -405,7 +400,17 @@ import {
 import type { PowerAction, Stats } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import DOMPurify from 'dompurify'
-import { computed, onMounted, onUnmounted, type Reactive, reactive, ref } from 'vue'
+import {
+	computed,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	type Reactive,
+	reactive,
+	ref,
+	useTemplateRef,
+	watch,
+} from 'vue'
 
 import { reloadNuxtApp } from '#app'
 import NavTabs from '~/components/ui/NavTabs.vue'
@@ -414,7 +419,7 @@ import InstallingTicker from '~/components/ui/servers/InstallingTicker.vue'
 import MedalServerCountdown from '~/components/ui/servers/marketing/MedalServerCountdown.vue'
 import PanelServerActionButton from '~/components/ui/servers/PanelServerActionButton.vue'
 import PanelSpinner from '~/components/ui/servers/PanelSpinner.vue'
-import ServerInstallation from '~/components/ui/servers/ServerInstallation.vue'
+import ServerSetupModal from '~/components/ui/servers/ServerSetupModal.vue'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 import { useModrinthServers } from '~/composables/servers/modrinth-servers.ts'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
@@ -423,6 +428,7 @@ import { useModrinthServersConsole } from '~/store/console.ts'
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 
+const introSetupModal = useTemplateRef<instancetype<typeof ServerSetupModal>>('introSetupModal')
 const isReconnecting = ref(false)
 const isLoading = ref(true)
 const isMounted = ref(true)
@@ -890,6 +896,18 @@ const onReinstall = (potentialArgs: any) => {
 	errorMessage.value = 'An unexpected error occurred.'
 }
 
+// Auto-open setup modal when intro flow is active
+watch(
+	() => serverData.value?.flows?.intro && serverData.value?.status !== 'installing',
+	async (shouldOpen) => {
+		if (shouldOpen) {
+			await nextTick()
+			introSetupModal.value?.show()
+		}
+	},
+	{ immediate: true },
+)
+
 const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallationResultEvent) => {
 	switch (data.result) {
 		case 'ok': {
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
index 877eb8d517..aa757e65fb 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
@@ -1,16 +1,186 @@
 <template>
-	<serverinstallation + <serversetupmodal ref="setupModal" :server="props.server" @reinstall="onReinstall" />
+
+	<platformchangemodpackversionmodal + ref="modpackVersionModal" :server="props.server" - :backup-in-progress="props.backupInProgress" + :project="data?.project" + :versions="Array.isArray(versions) ? versions : []" + :current-version="currentVersion" + :current-version-id="data?.upstream?.version_id" + :server-status="data?.status" @reinstall="emit('reinstall')" />
+
+	<div>
+		<div v-if="data">
+			<div>
+				<h2>Installation</h2>
+
+				
+				<div + v-if="debugProject" + +>
+					<avatar :src="(debugProject as any).icon_url" size="3rem" />
+					<div>
+						<div>
+							<span>
+								{{ (debugProject as any).title }}
+							</span>
+							<span>
+								by {{ (debugProject as any).team?.name ?? 'Unknown' }}
+							</span>
+						</div>
+						<span>v1.6.1 for 1.21.1</span>
+					</div>
+					<div>
+						<div>
+							Update available
+						</div>
+						<buttonstyled color="brand">
+							<button>
+								<settingsicon />
+								Change version
+							</button>
+						</buttonstyled>
+					</div>
+				</div>
+
+				
+				<div>
+					
+					<div v-if="data.upstream">
+						<div + v-if="versionsError &#124;&#124; currentVersionError" + +>
+							<p>Something went wrong while loading your modpack.</p>
+							<p>
+								{{ versionsError &#124;&#124; currentVersionError }}
+							</p>
+							<buttonstyled>
+								<button :disabled="isInstalling" @click="refreshData">Retry</button>
+							</buttonstyled>
+						</div>
+
+						<projectcard + v-else + + :title="projectCardData.title ?? ''" + :icon-url="projectCardData.icon_url" + :date-updated="projectCardData.date_modified" + :followers="projectCardData.follows" + :downloads="projectCardData.downloads" + layout="list" + :summary="projectCardData.description" + :tags="data.project?.categories &#124;&#124; []" +>
+							<template #actions>
+								<div>
+									<div + v-if="updateAvailable" + +>
+										Update available
+									</div>
+									<buttonstyled color="brand">
+										<button :disabled="isInstalling" @click="modpackVersionModal?.show()">
+											<settingsicon />
+											Change version
+										</button>
+									</buttonstyled>
+								</div>
+							</template>
+						</projectcard>
+					</div>
+
+					
+					<div + v-if="data.loader" + +>
+						<div + +>
+							<loadericon :loader="data.loader as Loaders" />
+						</div>
+						<div>
+							<span>{{ data.loader }}</span>
+							<span v-if="data.loader_version">
+								{{ data.loader_version }}
+								<template v-if="data.mc_version">
+									&middot; Minecraft {{ data.mc_version }}
+								</template>
+							</span>
+						</div>
+					</div>
+				</div>
+
+				
+				<div v-if="data.upstream">
+					<span>Unlink modpack</span>
+					<span>
+						Detach the modpack from this server. Modpack content will remain installed, but will no
+						longer be managed.
+					</span>
+					<buttonstyled color="orange" type="outlined">
+						<button + v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined" + :disabled="isInstalling &#124;&#124; !!backupInProgress" + + @click="unlinkModpack" +>
+							<unlinkicon />
+							Unlink modpack
+						</button>
+					</buttonstyled>
+				</div>
+
+				
+				<div>
+					<span>Change installation</span>
+					<span>
+						Change your server's loader, modpack, or game version.
+					</span>
+					<buttonstyled>
+						<button + v-tooltip="backupInProgress ? formatMessage(backupInProgress.tooltip) : undefined" + :disabled="isInstalling &#124;&#124; !!backupInProgress" + + @click="setupModal?.show()" +>
+							<settingsicon />
+							Change installation
+						</button>
+					</buttonstyled>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 
diff --git a/packages/api-client/src/modules/archon/servers/v0.ts b/packages/api-client/src/modules/archon/servers/v0.ts
index a21301e2b4..6441935f92 100644
--- a/packages/api-client/src/modules/archon/servers/v0.ts
+++ b/packages/api-client/src/modules/archon/servers/v0.ts
@@ -1,4 +1,5 @@
 import { AbstractModule } from '../../../core/abstract-module'
+import type { UploadHandle, UploadProgress } from '../../../types/upload'
 import type { Archon } from '../types'
 
 export class ArchonServersV0Module extends AbstractModule {
@@ -94,4 +95,75 @@ export class ArchonServersV0Module extends AbstractModule {
 			body: { action },
 		})
 	}
+
+	/**
+	 * Reinstall a server with a new loader or modpack
+	 * POST /modrinth/v0/servers/:id/reinstall
+	 */
+	public async reinstall(
+		serverId: string,
+		request: Archon.Servers.v0.ReinstallRequest,
+		hardReset: boolean = false,
+	): Promise<void> {
+		await this.client.request(`/servers/${serverId}/reinstall`, {
+			api: 'archon',
+			method: 'POST',
+			version: 'modrinth/v0',
+			params: { hard: String(hardReset) },
+			body: request,
+		})
+	}
+
+	/**
+	 * Get authentication credentials for .mrpack file upload
+	 * GET /modrinth/v0/servers/:id/reinstallFromMrpack
+	 */
+	public async getReinstallMrpackAuth(
+		serverId: string,
+	): Promise<archon.servers.v0.mrpackreinstallauth> {
+		return this.client.request<archon.servers.v0.mrpackreinstallauth>(
+			`/servers/${serverId}/reinstallFromMrpack`,
+			{
+				api: 'archon',
+				version: 'modrinth/v0',
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Reinstall a server from a .mrpack file with progress tracking
+	 *
+	 * Two-step flow: fetches upload auth, then uploads the .mrpack file to the node.
+	 *
+	 * @param serverId - Server ID
+	 * @param file - .mrpack file to upload
+	 * @param hardReset - Whether to erase all server data
+	 * @param options - Optional progress callback
+	 * @returns Promise resolving to an UploadHandle with progress tracking and cancellation
+	 */
+	public async reinstallFromMrpack(
+		serverId: string,
+		file: File,
+		hardReset: boolean = false,
+		options?: {
+			onProgress?: (progress: UploadProgress) => void
+		},
+	): Promise<uploadhandle<void>> {
+		const auth = await this.getReinstallMrpackAuth(serverId)
+
+		const formData = new FormData()
+		formData.append('file', file)
+
+		return this.client.upload<void>('', {
+			api: `https://${auth.url}`,
+			version: 'reinstallMrpackMultiparted',
+			formData,
+			params: { hard: String(hardReset) },
+			headers: { Authorization: `Bearer ${auth.token}` },
+			skipAuth: true,
+			onProgress: options?.onProgress,
+			retry: false,
+		})
+	}
 }
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index d0e2c1819b..54724031a1 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -227,6 +227,24 @@ export namespace Archon {
 				url: string // e.g., "node-xyz.modrinth.com/modrinth/v0/fs"
 				token: string // JWT token for filesystem access
 			}
+
+			export type ReinstallLoaderRequest = {
+				loader: string
+				loader_version?: string
+				game_version?: string
+			}
+
+			export type ReinstallModpackRequest = {
+				project_id: string
+				version_id?: string
+			}
+
+			export type ReinstallRequest = ReinstallLoaderRequest &#124; ReinstallModpackRequest
+
+			export type MrpackReinstallAuth = {
+				url: string
+				token: string
+			}
 		}
 
 		export namespace v1 {
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 53ae7e64c1..ae3e615405 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -2,6 +2,7 @@ import '@modrinth/assets/omorphia.scss'
 import 'floating-vue/dist/style.css'
 import '../src/styles/tailwind.css'
 
+import type { Labrinth } from '@modrinth/api-client'
 import { GenericModrinthClient } from '@modrinth/api-client'
 import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
@@ -21,8 +22,10 @@ import {
 	I18N_INJECTION_KEY,
 	type I18nContext,
 	type NotificationPanelLocation,
+	provideFilePicker,
 	provideModrinthClient,
 	provideNotificationManager,
+	provideTags,
 	type WebNotification,
 } from '../src/providers'
 
@@ -124,6 +127,23 @@ const StorybookProvider = defineComponent({
 		})
 		provideModrinthClient(modrinthClient)
 
+		const gameVersions = ref<labrinth.tags.v2.gameversion[]>([])
+		const loaders = ref<labrinth.tags.v2.loader[]>([])
+		modrinthClient.labrinth.state.build().then((state) => {
+			gameVersions.value = state.gameVersions
+			loaders.value = state.loaders
+		})
+		provideTags({ gameVersions, loaders })
+
+		provideFilePicker({
+			async pickImage() {
+				return null
+			},
+			async pickModpackFile() {
+				return null
+			},
+		})
+
 		return () => slots.default?.()
 	},
 })
diff --git a/packages/ui/src/components/base/Accordion.vue b/packages/ui/src/components/base/Accordion.vue
index 506cdee613..13542d7547 100644
--- a/packages/ui/src/components/base/Accordion.vue
+++ b/packages/ui/src/components/base/Accordion.vue
@@ -10,14 +10,18 @@
 					<slot name="title" :open="isOpen" />
 					<dropdownicon v-if="!forceOpen" - + :rotate-180': isOpen }" />
 				</div>
 			</slot>
 			<slot name="summary" />
 		</button>
-		<div :>
+		<div + + :overflow-visible': overflowVisible && showOverflow }" + @transitionend="onTransitionEnd" +>
 			<div>
 				<div :'" :inert="!isOpen">
 					<slot />
@@ -39,6 +43,7 @@ const props = withDefaults(
 		contentClass?: string
 		titleWrapperClass?: string
 		forceOpen?: boolean
+		overflowVisible?: boolean
 	}>(),
 	{
 		type: 'standard',
@@ -47,11 +52,13 @@ const props = withDefaults(
 		contentClass: null,
 		titleWrapperClass: null,
 		forceOpen: false,
+		overflowVisible: false,
 	},
 )
 
 const toggledOpen = ref(props.openByDefault)
 const isOpen = computed(() => toggledOpen.value &#124;&#124; props.forceOpen)
+const showOverflow = ref(props.openByDefault)
 const emit = defineEmits(['onOpen', 'onClose'])
 
 const slots = useSlots()
@@ -71,9 +78,15 @@ function open() {
 	emit('onOpen')
 }
 function close() {
+	showOverflow.value = false
 	toggledOpen.value = false
 	emit('onClose')
 }
+function onTransitionEnd() {
+	if (isOpen.value) {
+		showOverflow.value = true
+	}
+}
 
 defineExpose({
 	open,
@@ -105,4 +118,8 @@ defineOptions({
 .accordion-content> div {
 	overflow: hidden;
 }
+
+.accordion-content.overflow-visible> div {
+	overflow: visible;
+}
 </style>
diff --git a/packages/ui/src/components/base/BigOptionButton.vue b/packages/ui/src/components/base/BigOptionButton.vue
new file mode 100644
index 0000000000..019faf6194
--- /dev/null
+++ b/packages/ui/src/components/base/BigOptionButton.vue
@@ -0,0 +1,42 @@
+<template>
+	<button + + :bg-brand-highlight' : 'bg-surface-4'" + @click="$emit('click')" +>
+		<div + + :border-brand' : 'border-surface-5'" +>
+			<component + :is="icon" + + :!stroke-brand' : ''" + stroke- + />
+		</div>
+		<div>
+			<span>{{ title }}</span>
+			<span>{{ description }}</span>
+		</div>
+		<chevronrighticon + + />
+	</button>
+</template>
+
+
diff --git a/packages/ui/src/components/base/Collapsible.vue b/packages/ui/src/components/base/Collapsible.vue
index a45b249477..2b737ffd70 100644
--- a/packages/ui/src/components/base/Collapsible.vue
+++ b/packages/ui/src/components/base/Collapsible.vue
@@ -1,5 +1,11 @@
 <template>
-	<div :>
+	<div + + :overflow-visible': overflowVisible && !collapsed }, + ]" +>
 		<div v-bind="$attrs" :inert="collapsed">
 			<slot />
 		</div>
@@ -10,6 +16,7 @@
 defineProps<{ baseClass?: string collapsed: boolean + overflowVisible?: boolean }>()
 
 defineOptions({
@@ -36,4 +43,8 @@ defineOptions({
 .accordion-content> div {
 	overflow: hidden;
 }
+
+.accordion-content.overflow-visible> div {
+	overflow: visible;
+}
 </style>
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 82e3704c68..618d668f8a 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -1,10 +1,35 @@
 <template>
 	<div ref="containerRef">
+		
+		<styledinput + v-if="searchMode" + ref="searchModeTriggerRef" + v-model="searchQuery" + :icon="SearchIcon" + type="text" + :placeholder="searchPlaceholder &#124;&#124; placeholder" + :disabled="disabled" + wrapper- + :input-!rounded-b-none' + : '!rounded-t-none' + : '' + " + + @input="handleSearchModeInput" + @keydown="handleSearchKeydown" + @focus="handleSearchModeFocus" + />
+
+		
 		<span + v-else ref="triggerRef" role="button" tabindex="0" - + :handleDropdownKeydown">
-				<div v-if="searchable">
+				<div v-if="isSearchable && !searchMode">
 					<styledinput ref="searchInputRef" v-model="searchQuery" @@ -70,7 +95,10 @@ />
 				</div>
 
-				<div v-if="searchable && filteredOptions.length> 0" class="h-px bg-surface-5"></div>
+				<div + v-if="searchable && !searchMode && filteredOptions.length> 0"
+					class="h-px bg-surface-5"
+			></div>
 
 				<div v-if="filteredOptions.length> 0"
@@ -114,6 +142,8 @@
 				<div v-else-if="searchQuery">
 					{{ noOptionsMessage }}
 				</div>
+
+				
 			</div>
 		</teleport>
 	</div>
@@ -178,6 +208,7 @@ const props = withDefaults(
 		forceDirection?: 'up' &#124; 'down'
 		noOptionsMessage?: string
 		disableSearchFilter?: boolean
+		searchMode?: boolean
 	}>(),
 	{
 		placeholder: 'Select an option',
@@ -208,12 +239,20 @@ const searchQuery = ref('')
 const focusedIndex = ref(-1)
 const containerRef = ref<htmlelement>()
 const triggerRef = ref<htmlelement>()
+const searchModeTriggerRef = ref<instancetype<typeof StyledInput>>()
 const dropdownRef = ref<htmlelement>()
 const searchInputRef = ref<htmlinputelement>()
 const optionsContainerRef = ref<htmlelement>()
 const optionRefs = ref<(htmlelement &#124; null)[]>([])
 const rafId = ref<number &#124; null>(null)
 
+const effectiveTriggerEl = computed(() => {
+	if (props.searchMode && searchModeTriggerRef.value) {
+		return (searchModeTriggerRef.value as unknown as { $el: HTMLElement }).$el as HTMLElement
+	}
+	return triggerRef.value
+})
+
 const dropdownStyle = ref({
 	top: '0px',
 	left: '0px',
@@ -253,8 +292,10 @@ const optionsWithKeys = computed(() => {
 	}))
 })
 
+const isSearchable = computed(() => props.searchable &#124;&#124; props.searchMode)
+
 const filteredOptions = computed(() => {
-	if (!searchQuery.value &#124;&#124; !props.searchable &#124;&#124; props.disableSearchFilter) {
+	if (!searchQuery.value &#124;&#124; !isSearchable.value &#124;&#124; props.disableSearchFilter) {
 		return optionsWithKeys.value
 	}
 
@@ -342,11 +383,11 @@ function calculateHorizontalPosition(
 }
 
 async function updateDropdownPosition() {
-	if (!triggerRef.value &#124;&#124; !dropdownRef.value) return
+	if (!effectiveTriggerEl.value &#124;&#124; !dropdownRef.value) return
 
 	await nextTick()
 
-	const triggerRect = triggerRef.value.getBoundingClientRect()
+	const triggerRect = effectiveTriggerEl.value.getBoundingClientRect()
 	const dropdownRect = dropdownRef.value.getBoundingClientRect()
 	const viewportHeight = window.innerHeight
 	const viewportWidth = window.innerWidth
@@ -368,7 +409,9 @@ async function openDropdown() {
 	if (props.disabled &#124;&#124; isOpen.value) return
 
 	isOpen.value = true
-	searchQuery.value = ''
+	if (!props.searchMode) {
+		searchQuery.value = ''
+	}
 
 	emit('open')
 
@@ -376,7 +419,9 @@ async function openDropdown() {
 	await updateDropdownPosition()
 
 	setInitialFocus()
-	focusSearchInput()
+	if (!props.searchMode) {
+		focusSearchInput()
+	}
 	startPositionTracking()
 }
 
@@ -385,13 +430,17 @@ function closeDropdown() {
 
 	stopPositionTracking()
 	isOpen.value = false
-	searchQuery.value = ''
+	if (!props.searchMode) {
+		searchQuery.value = ''
+	}
 	focusedIndex.value = -1
 	emit('close')
 
-	nextTick(() => {
-		triggerRef.value?.focus()
-	})
+	if (!props.searchMode) {
+		nextTick(() => {
+			triggerRef.value?.focus()
+		})
+	}
 }
 
 function handleTriggerClick() {
@@ -418,6 +467,9 @@ function handleOptionClick(option: ComboboxOption<t>, index: number) {
 	emit('select', option)
 
 	if (option.type !== 'link') {
+		if (props.searchMode) {
+			searchQuery.value = ''
+		}
 		closeDropdown()
 	}
 }
@@ -442,7 +494,9 @@ function focusOption(index: number) {
 	if (isDivider(option) &#124;&#124; option.disabled) return
 
 	focusedIndex.value = index
-	optionRefs.value[index]?.focus()
+	if (!props.searchMode) {
+		optionRefs.value[index]?.focus()
+	}
 	optionRefs.value[index]?.scrollIntoView({ block: 'nearest' })
 }
 
@@ -512,10 +566,43 @@ function handleSearchKeydown(event: KeyboardEvent) {
 		closeDropdown()
 	} else if (event.key === 'ArrowDown') {
 		event.preventDefault()
+		if (props.searchMode && !isOpen.value && searchQuery.value.trim()) {
+			openDropdown()
+		}
 		focusNextOption()
 	} else if (event.key === 'ArrowUp') {
 		event.preventDefault()
 		focusPreviousOption()
+	} else if (event.key === 'Enter') {
+		event.preventDefault()
+		if (focusedIndex.value>= 0) {
+			const option = filteredOptions.value[focusedIndex.value]
+			if (option && !isDivider(option)) {
+				handleOptionClick(option, focusedIndex.value)
+			}
+		}
+	} else if (event.key === 'Tab' && props.searchMode && isOpen.value) {
+		event.preventDefault()
+		if (event.shiftKey) {
+			focusPreviousOption()
+		} else {
+			focusNextOption()
+		}
+	}
+}
+
+function handleSearchModeInput() {
+	emit('searchInput', searchQuery.value)
+	if (searchQuery.value.trim() && !isOpen.value) {
+		openDropdown()
+	} else if (!searchQuery.value.trim() && isOpen.value) {
+		closeDropdown()
+	}
+}
+
+function handleSearchModeFocus() {
+	if (searchQuery.value.trim() && !isOpen.value) {
+		openDropdown()
 	}
 }
 
@@ -545,7 +632,7 @@ onClickOutside(
 	() => {
 		closeDropdown()
 	},
-	{ ignore: [triggerRef] },
+	{ ignore: [triggerRef, containerRef] },
 )
 
 onMounted(() => {
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 296d1b7570..36b2a40910 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -58,7 +58,7 @@
 		</template>
 
 		<progress - v-if="nonProgressStage !== true" + v-if="nonProgressStage !== true && !disableProgress" :value="progressValue" max="100" @@ -145,6 +145,7 @@ const props = defineProps<{ context: T breadcrumbs?: boolean fitContent?: boolean + disableProgress?: boolean }>()
 
 const modal = useTemplateRef<instancetype<typeof NewModal>>('modal')
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 06813a0af1..fbce3c5b62 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -5,6 +5,7 @@ export { default as AutoBrandIcon } from './AutoBrandIcon.vue'
 export { default as AutoLink } from './AutoLink.vue'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
+export { default as BigOptionButton } from './BigOptionButton.vue'
 export { default as BulletDivider } from './BulletDivider.vue'
 export { default as Button } from './Button.vue'
 export { default as ButtonStyled } from './ButtonStyled.vue'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ConfirmStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ConfirmStage.vue
new file mode 100644
index 0000000000..c0b3b26ce4
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ConfirmStage.vue
@@ -0,0 +1,106 @@
+<template>
+	<div>
+		<div + +>
+			<span>Summary</span>
+
+			<div + v-if="ctx.setupType.value === 'modpack' && ctx.modpackSelection.value" + +>
+				<avatar :src="ctx.modpackSelection.value.iconUrl" size="2.5rem" />
+				<div>
+					<span>
+						{{ ctx.modpackSelection.value.name }}
+					</span>
+					<span v-if="selectedVersionLabel">
+						{{ selectedVersionLabel }}
+					</span>
+				</div>
+			</div>
+
+			<div + v-else-if="ctx.setupType.value === 'modpack' && ctx.modpackFile.value" + +>
+				<fileicon />
+				<span>
+					{{ ctx.modpackFile.value.name }}
+				</span>
+			</div>
+
+			<div>
+				<template v-if="ctx.setupType.value !== 'modpack'">
+					<div v-if="ctx.selectedLoader.value">
+						<span>Loader</span>
+						<span>
+							{{ formatLoaderLabel(ctx.selectedLoader.value) }}
+						</span>
+					</div>
+					<div>
+						<span>Game version</span>
+						<span>
+							{{ ctx.selectedGameVersion.value }}
+						</span>
+					</div>
+					<div + v-if="ctx.selectedLoaderVersion.value && !ctx.hideLoaderVersion.value" + +>
+						<span>Loader version</span>
+						<span>
+							{{ ctx.selectedLoaderVersion.value }}
+						</span>
+					</div>
+				</template>
+				<div>
+					<span>Gamemode</span>
+					<span>
+						{{ capitalize(ctx.gamemode.value) }}
+					</span>
+				</div>
+				<div>
+					<span>Difficulty</span>
+					<span>
+						{{ capitalize(ctx.difficulty.value) }}
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<div + v-if="!ctx.isInitialSetup" + +>
+			<div>
+				<div>
+					<span>Erase all data</span>
+					<span>
+						Removes all data on your server, including your worlds, mods, and configuration files,
+						then reinstalls it with the selected version.
+					</span>
+				</div>
+				<toggle id="hard-reset" v-model="ctx.hardReset.value" />
+			</div>
+		</div>
+	</div>
+</template>
+
+
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
new file mode 100644
index 0000000000..c8e4529436
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
@@ -0,0 +1,376 @@
+<template>
+	<div>
+		
+		<div v-if="ctx.flowType === 'instance'">
+			<avatar :src="ctx.instanceIconUrl.value ?? undefined" size="5rem" />
+			<div>
+				<buttonstyled type="outlined">
+					<button @click="triggerIconInput">
+						<uploadicon />
+						Select icon
+					</button>
+				</buttonstyled>
+				<buttonstyled type="outlined">
+					<button :disabled="!ctx.instanceIcon.value" @click="removeIcon">
+						<xicon />
+						Remove icon
+					</button>
+				</buttonstyled>
+			</div>
+		</div>
+
+		
+		<div v-if="ctx.flowType === 'instance'">
+			<span>Name</span>
+			<styledinput v-model="ctx.instanceName.value" placeholder="Enter instance name" />
+		</div>
+
+		
+		<div v-if="!hideLoaderChips">
+			<span>{{
+				ctx.flowType === 'instance' ? 'Loader' : 'Content loader'
+			}}</span>
+			<chips + v-model="selectedLoader" + :items="effectiveLoaders" + :format-label="formatLoaderLabel" + :never-empty="false" + />
+		</div>
+
+		
+		<div>
+			<span>Game version</span>
+			<combobox + v-model="selectedGameVersion" + :options="gameVersionOptions" + searchable + placeholder="Select game version" + force-direction="down" + :max- +>
+				<template v-if="ctx.showSnapshotToggle" #dropdown-footer>
+					<button + + @mousedown.prevent + @click="ctx.showSnapshots.value = !ctx.showSnapshots.value" +>
+						<eyeofficon v-if="ctx.showSnapshots.value" />
+						<eyeicon v-else />
+						{{ ctx.showSnapshots.value ? 'Hide snapshots' : 'Show all versions' }}
+					</button>
+				</template>
+			</combobox>
+		</div>
+
+		
+		<template v-if="!hideLoaderVersion">
+			
+			<div + v-if="ctx.flowType === 'instance'" + v-show="selectedLoader && selectedGameVersion" + +>
+				<span>{{
+					isPaperLike ? 'Build number' : 'Loader version'
+				}}</span>
+				<chips + v-if="!isPaperLike" + v-model="loaderVersionType" + :items="loaderVersionTypeItems" + :format-label="capitalize" + />
+				<div v-if="isPaperLike &#124;&#124; loaderVersionType === 'other'">
+					<combobox + v-model="selectedLoaderVersion" + :options="loaderVersionOptions" + :no-options-message="loaderVersionsLoading ? 'Loading...' : 'No versions available'" + searchable + :placeholder="isPaperLike ? 'Select build number' : 'Select loader version'" + />
+				</div>
+			</div>
+
+			
+			<collapsible v-else :collapsed="!selectedLoader &#124;&#124; !selectedGameVersion" overflow-visible>
+				<div>
+					<span>{{
+						isPaperLike ? 'Build number' : 'Loader version'
+					}}</span>
+					<chips + v-if="!isPaperLike" + v-model="loaderVersionType" + :items="loaderVersionTypeItems" + :format-label="capitalize" + />
+					<div v-if="isPaperLike &#124;&#124; loaderVersionType === 'other'">
+						<combobox + v-model="selectedLoaderVersion" + :options="loaderVersionOptions" + :no-options-message="loaderVersionsLoading ? 'Loading...' : 'No versions available'" + searchable + :placeholder="isPaperLike ? 'Select build number' : 'Select loader version'" + />
+					</div>
+				</div>
+			</collapsible>
+		</template>
+	</div>
+</template>
+
+
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
new file mode 100644
index 0000000000..3cd5639645
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
@@ -0,0 +1,110 @@
+<template>
+	<div>
+		<div v-if="ctx.flowType !== 'server-onboarding'">
+			<span>World name <span>*</span></span>
+			<styledinput v-model="worldName" placeholder="Enter world name" />
+		</div>
+
+		<div>
+			<span>Gamemode<span> *</span></span>
+			<chips v-model="gamemode" :items="gamemodeItems" :format-label="capitalize" />
+		</div>
+
+		<div>
+			<span>Difficulty<span> *</span></span>
+			<chips v-model="difficulty" :items="difficultyItems" :format-label="capitalize" />
+		</div>
+
+		<div>
+			<span>World type<span> *</span></span>
+			<combobox + v-model="worldTypeOption" + :options="worldTypeOptions" + placeholder="Select world type" + />
+		</div>
+
+		<div>
+			<span>World seed</span>
+			<styledinput v-model="worldSeed" placeholder="Enter world seed" />
+			<span>Leave blank for a random seed.</span>
+		</div>
+
+		<accordion overflow-visible>
+			<template #title>
+				<span>Additional settings</span>
+			</template>
+			<div>
+				<div>
+					<div>
+						<span>Generate structures</span>
+						<span>
+							Controls whether villages, strongholds, and other structures generate in new chunks.
+						</span>
+					</div>
+					<toggle v-model="generateStructures" />
+				</div>
+
+				<div>
+					<span>Generator settings</span>
+					<combobox + v-model="generatorSettingsMode" + :options="generatorSettingsOptions" + placeholder="Select generator settings" + />
+					<styledinput + v-if="generatorSettingsMode === 'custom'" + v-model="generatorSettingsCustom" + multiline + :rows="4" + placeholder="Enter generator settings JSON" + input- + />
+					<span>
+						Used for advanced world customization such as custom Superflat layers.
+					</span>
+				</div>
+			</div>
+		</accordion>
+	</div>
+</template>
+
+
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
new file mode 100644
index 0000000000..144f8819ec
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
@@ -0,0 +1,283 @@
+<template>
+	<div>
+		
+		<div>
+			<span>Launcher instances</span>
+			<buttonstyled + type="transparent" + size="standard" + : +>
+				<button @click="clearAll">Clear all</button>
+			</buttonstyled>
+		</div>
+
+		
+		<styledinput + v-model="ctx.importSearchQuery.value" + :icon="SearchIcon" + placeholder="Search instance name" + />
+
+		
+		<div v-if="ctx.importLaunchers.value.length> 0" class="flex flex-col gap-2">
+			<div + v-for="launcher in visibleLaunchers" + :key="launcher.name" + +>
+				
+				<button + + @click="toggleLauncherExpanded(launcher.name)" +>
+					<chevronrighticon + + :rotate-90': expandedLaunchers.has(launcher.name) }" + />
+					<checkbox + :model-value="getLauncherCheckState(launcher)" + :indeterminate="getLauncherIndeterminate(launcher)" + @update:model-value="toggleLauncherAll(launcher, $event)" + @click.stop + />
+					<span>{{ launcher.name }}</span>
+				</button>
+
+				
+				<collapsible :collapsed="!expandedLaunchers.has(launcher.name)">
+					<div>
+						<template v-for="(instance, i) in filteredInstances(launcher)" :key="instance">
+							<div + + :bg-surface-2' : 'bg-surface-1.5'" + +>
+								<checkbox + :model-value="isInstanceSelected(launcher.name, instance)" + @update:model-value="toggleInstance(launcher.name, instance, $event)" + />
+								<span>{{ instance }}</span>
+							</div>
+						</template>
+					</div>
+				</collapsible>
+			</div>
+		</div>
+
+		
+		<div v-else-if="!loading">
+			No launcher instances detected
+		</div>
+
+		
+		<div v-if="loading">
+			Detecting launcher instances...
+		</div>
+
+		
+		<div v-if="!showAddPath">
+			<buttonstyled>
+				<button @click="showAddPath = true">Add launcher path</button>
+			</buttonstyled>
+		</div>
+		<div v-else>
+			<buttonstyled icon-only +><button @click="browseForLauncherPath">
+					<foldersearchicon /></button +></buttonstyled>
+			<styledinput v-model="newLauncherPath" placeholder="Path to launcher..." />
+			<buttonstyled>
+				<button :disabled="!newLauncherPath.trim()" @click="addLauncherPath">
+					Add
+				</button>
+			</buttonstyled>
+		</div>
+	</div>
+</template>
+
+
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
new file mode 100644
index 0000000000..1399c4d83f
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue
@@ -0,0 +1,161 @@
+<template>
+	<div>
+		<span>Already know the modpack you want to install?</span>
+		<combobox + v-model="ctx.modpackSearchProjectId.value" + :options="ctx.modpackSearchOptions.value" + :search-mode="true" + search-placeholder="Search for modpack" + :no-options-message="searchLoading ? 'Loading...' : 'No results found'" + :disable-search-filter="true" + @search-input="(query) => handleSearch(query)"
+		/>
+		<div>
+			<div />
+			<span>or</span>
+			<div />
+		</div>
+		<div>
+			<buttonstyled type="outlined">
+				<button @click="triggerFileInput">
+					<importicon />
+					Import modpack
+				</button>
+			</buttonstyled>
+			<buttonstyled color="brand">
+				<button @click="ctx.browseModpacks()">
+					<compassicon />
+					Browse modpacks
+				</button>
+			</buttonstyled>
+		</div>
+	</div>
+</template>
+
+
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
new file mode 100644
index 0000000000..dc6ca329e5
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/SetupTypeStage.vue
@@ -0,0 +1,73 @@
+<template>
+	<div>
+		<span>
+			{{ ctx.flowType === 'instance' ? 'Choose instance type' : 'Select world type' }}
+		</span>
+
+		
+		<template v-if="ctx.flowType === 'instance'">
+			<div>
+				
+				
+				
+			</div>
+			<span>
+				An instance is a Minecraft setup with a specific loader, version, and mods.
+			</span>
+		</template>
+
+		
+		<template v-else>
+			<div>
+				
+				
+				
+			</div>
+		</template>
+	</div>
+</template>
+
+
diff --git a/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts b/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts
new file mode 100644
index 0000000000..f99d650db9
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/creation-flow-context.ts
@@ -0,0 +1,319 @@
+import { computed, type ComputedRef, type Ref, ref, type ShallowRef, watch } from 'vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+import { createContext } from '../../../providers'
+import type { ImportableLauncher } from '../../../providers/instance-import'
+import type { MultiStageModal, StageConfigInput } from '../../base'
+import type { ComboboxOption } from '../../base/Combobox.vue'
+import { stageConfigs } from './stages'
+
+export type FlowType = 'world' &#124; 'server-onboarding' &#124; 'instance'
+export type SetupType = 'modpack' &#124; 'custom' &#124; 'vanilla'
+export type Gamemode = 'survival' &#124; 'creative' &#124; 'hardcore'
+export type Difficulty = 'peaceful' &#124; 'easy' &#124; 'normal' &#124; 'hard'
+export type LoaderVersionType = 'stable' &#124; 'latest' &#124; 'other'
+export type GeneratorSettingsMode = 'default' &#124; 'flat' &#124; 'custom'
+
+export interface ModpackSelection {
+	projectId: string
+	versionId: string
+	name: string
+	iconUrl?: string
+}
+
+export interface ModpackSearchHit {
+	title: string
+	iconUrl?: string
+	latestVersion?: string
+}
+
+export const flowTypeHeadings: Record<flowtype, string> = {
+	world: 'Create world',
+	'server-onboarding': 'Set up server',
+	instance: 'Create instance',
+}
+
+export interface CreationFlowContextValue {
+	// Flow
+	flowType: FlowType
+
+	// Configuration
+	availableLoaders: string[]
+	showSnapshotToggle: boolean
+	disableClose: boolean
+	isInitialSetup: boolean
+
+	// Initial values (for pre-selection when re-opening modal)
+	initialSetupType: SetupType &#124; null
+	initialLoader: string &#124; null
+	initialGameVersion: string &#124; null
+
+	// State
+	setupType: Ref<setuptype &#124; null>
+	isImportMode: Ref<boolean>
+	worldName: Ref<string>
+	gamemode: Ref<gamemode>
+	difficulty: Ref<difficulty>
+	worldSeed: Ref<string>
+	worldTypeOption: Ref<string>
+	generateStructures: Ref<boolean>
+	generatorSettingsMode: Ref<generatorsettingsmode>
+	generatorSettingsCustom: Ref<string>
+
+	// Instance-specific state
+	instanceName: Ref<string>
+	instanceIcon: Ref<file &#124; null>
+	instanceIconUrl: Ref<string &#124; null>
+	instanceIconPath: Ref<string &#124; null>
+
+	// Loader/version state (custom setup)
+	selectedLoader: Ref<string &#124; null>
+	selectedGameVersion: Ref<string &#124; null>
+	loaderVersionType: Ref<loaderversiontype>
+	selectedLoaderVersion: Ref<string &#124; null>
+	hideLoaderChips: ComputedRef<boolean>
+	hideLoaderVersion: ComputedRef<boolean>
+	showSnapshots: Ref<boolean>
+
+	// Modpack state
+	modpackSelection: Ref<modpackselection &#124; null>
+	modpackFile: Ref<file &#124; null>
+	modpackFilePath: Ref<string &#124; null>
+
+	// Modpack search state (persisted across stage navigation)
+	modpackSearchProjectId: Ref<string &#124; undefined>
+	modpackSearchVersionId: Ref<string &#124; undefined>
+	modpackSearchOptions: Ref<comboboxoption<string>[]>
+	modpackVersionOptions: Ref<comboboxoption<string>[]>
+	modpackSearchHits: Ref<record<string, ModpackSearchHit>>
+
+	// Import state (instance flow only)
+	importLaunchers: Ref<importablelauncher[]>
+	importSelectedInstances: Ref<record<string, Set<string>>>
+	importSearchQuery: Ref<string>
+
+	// Confirm stage
+	hardReset: Ref<boolean>
+
+	// Modal
+	modal: ShallowRef<componentexposed<typeof MultiStageModal> &#124; null>
+	stageConfigs: StageConfigInput<creationflowcontextvalue>[]
+
+	// Methods
+	reset: () => void
+	setSetupType: (type: SetupType) => void
+	setImportMode: () => void
+	browseModpacks: () => void
+	finish: () => void
+}
+
+export const [injectCreationFlowContext, provideCreationFlowContext] =
+	createContext<creationflowcontextvalue>('CreationFlowModal')
+
+export interface CreationFlowOptions {
+	availableLoaders?: string[]
+	showSnapshotToggle?: boolean
+	disableClose?: boolean
+	isInitialSetup?: boolean
+	initialSetupType?: SetupType
+	initialLoader?: string
+	initialGameVersion?: string
+}
+
+export function createCreationFlowContext(
+	modal: ShallowRef<componentexposed<typeof MultiStageModal> &#124; null>,
+	flowType: FlowType,
+	emit: {
+		browseModpacks: () => void
+		create: (config: CreationFlowContextValue) => void
+	},
+	options: CreationFlowOptions = {},
+): CreationFlowContextValue {
+	const availableLoaders = options.availableLoaders ?? ['fabric', 'neoforge', 'forge', 'quilt']
+	const showSnapshotToggle = options.showSnapshotToggle ?? false
+	const disableClose = options.disableClose ?? false
+	const isInitialSetup = options.isInitialSetup ?? false
+	const initialSetupType = options.initialSetupType ?? null
+	const initialLoader = options.initialLoader ?? null
+	const initialGameVersion = options.initialGameVersion ?? null
+
+	const setupType = ref<setuptype &#124; null>(null)
+	const isImportMode = ref(false)
+	const worldName = ref('')
+	const gamemode = ref<gamemode>('survival')
+	const difficulty = ref<difficulty>('normal')
+	const worldSeed = ref('')
+	const worldTypeOption = ref('minecraft:normal')
+	const generateStructures = ref(true)
+	const generatorSettingsMode = ref<generatorsettingsmode>('default')
+	const generatorSettingsCustom = ref('')
+
+	// Instance-specific state
+	const instanceName = ref('')
+	const instanceIcon = ref<file &#124; null>(null)
+	const instanceIconUrl = ref<string &#124; null>(null)
+	const instanceIconPath = ref<string &#124; null>(null)
+
+	// Revoke old object URL when icon is cleared to avoid memory leaks
+	watch(instanceIconUrl, (_newUrl, oldUrl) => {
+		if (oldUrl && oldUrl.startsWith('blob:')) {
+			URL.revokeObjectURL(oldUrl)
+		}
+	})
+
+	const selectedLoader = ref<string &#124; null>(null)
+	const selectedGameVersion = ref<string &#124; null>(null)
+	const loaderVersionType = ref<loaderversiontype>('stable')
+	const selectedLoaderVersion = ref<string &#124; null>(null)
+	const showSnapshots = ref(false)
+
+	const modpackSelection = ref<modpackselection &#124; null>(null)
+	const modpackFile = ref<file &#124; null>(null)
+	const modpackFilePath = ref<string &#124; null>(null)
+
+	// Modpack search state (persisted across stage navigation)
+	const modpackSearchProjectId = ref<string &#124; undefined>()
+	const modpackSearchVersionId = ref<string &#124; undefined>()
+	const modpackSearchOptions = ref<comboboxoption<string>[]>([])
+	const modpackVersionOptions = ref<comboboxoption<string>[]>([])
+	const modpackSearchHits = ref<record<string, ModpackSearchHit>>({})
+
+	// Import state (instance flow only)
+	const importLaunchers = ref<importablelauncher[]>([])
+	const importSelectedInstances = ref<record<string, Set<string>>>({})
+	const importSearchQuery = ref('')
+
+	const hardReset = ref(isInitialSetup)
+
+	// hideLoaderChips: hides the entire loader chips section (only for vanilla world type in world/server flows)
+	const hideLoaderChips = computed(() => setupType.value === 'vanilla')
+
+	// hideLoaderVersion: hides the loader version section (vanilla world type OR vanilla selected as loader chip)
+	const hideLoaderVersion = computed(
+		() => setupType.value === 'vanilla' &#124;&#124; selectedLoader.value === 'vanilla',
+	)
+
+	function reset() {
+		setupType.value = null
+		isImportMode.value = false
+		worldName.value = ''
+		gamemode.value = 'survival'
+		difficulty.value = 'normal'
+		worldSeed.value = ''
+		worldTypeOption.value = 'minecraft:normal'
+		generateStructures.value = true
+		generatorSettingsMode.value = 'default'
+		generatorSettingsCustom.value = ''
+
+		// Instance-specific
+		instanceName.value = ''
+		instanceIconUrl.value = null
+		instanceIcon.value = null
+		instanceIconPath.value = null
+
+		selectedLoader.value = null
+		selectedGameVersion.value = null
+		loaderVersionType.value = 'stable'
+		selectedLoaderVersion.value = null
+		showSnapshots.value = false
+		modpackSelection.value = null
+		modpackFile.value = null
+		modpackFilePath.value = null
+		modpackSearchProjectId.value = undefined
+		modpackSearchVersionId.value = undefined
+		modpackSearchOptions.value = []
+		modpackVersionOptions.value = []
+		modpackSearchHits.value = {}
+
+		// Import state
+		importLaunchers.value = []
+		importSelectedInstances.value = {}
+		importSearchQuery.value = ''
+
+		hardReset.value = isInitialSetup
+	}
+
+	function setSetupType(type: SetupType) {
+		isImportMode.value = false
+		setupType.value = type
+		if (type === 'modpack') {
+			modal.value?.setStage('modpack')
+		} else {
+			// both custom and vanilla go to custom-setup
+			// vanilla just hides loader chips via hideLoaderChips computed
+			modal.value?.setStage('custom-setup')
+		}
+	}
+
+	function setImportMode() {
+		isImportMode.value = true
+		setupType.value = null
+		modal.value?.setStage('import-instance')
+	}
+
+	function browseModpacks() {
+		modal.value?.hide()
+		emit.browseModpacks()
+	}
+
+	function finish() {
+		emit.create(contextValue)
+	}
+
+	const resolvedStageConfigs = disableClose
+		? stageConfigs.map((stage) => ({ ...stage, disableClose: true }))
+		: stageConfigs
+
+	const contextValue: CreationFlowContextValue = {
+		flowType,
+		availableLoaders,
+		showSnapshotToggle,
+		disableClose,
+		isInitialSetup,
+		initialSetupType,
+		initialLoader,
+		initialGameVersion,
+		setupType,
+		isImportMode,
+		worldName,
+		gamemode,
+		difficulty,
+		worldSeed,
+		worldTypeOption,
+		generateStructures,
+		generatorSettingsMode,
+		generatorSettingsCustom,
+		instanceName,
+		instanceIcon,
+		instanceIconUrl,
+		instanceIconPath,
+		selectedLoader,
+		selectedGameVersion,
+		loaderVersionType,
+		selectedLoaderVersion,
+		hideLoaderChips,
+		hideLoaderVersion,
+		showSnapshots,
+		modpackSelection,
+		modpackFile,
+		modpackFilePath,
+		modpackSearchProjectId,
+		modpackSearchVersionId,
+		modpackSearchOptions,
+		modpackVersionOptions,
+		modpackSearchHits,
+		importLaunchers,
+		importSelectedInstances,
+		importSearchQuery,
+		hardReset,
+		modal,
+		stageConfigs: resolvedStageConfigs,
+		reset,
+		setSetupType,
+		setImportMode,
+		browseModpacks,
+		finish,
+	}
+
+	return contextValue
+}
diff --git a/packages/ui/src/components/flows/creation-flow-modal/index.vue b/packages/ui/src/components/flows/creation-flow-modal/index.vue
new file mode 100644
index 0000000000..1eb3e2be79
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/index.vue
@@ -0,0 +1,78 @@
+<template>
+	<multistagemodal ref="modal" :stages="ctx.stageConfigs" :con disable-progress @hide="$emit('hide')" />
+</template>
+
+
diff --git a/packages/ui/src/components/flows/creation-flow-modal/shared.ts b/packages/ui/src/components/flows/creation-flow-modal/shared.ts
new file mode 100644
index 0000000000..73f69bf0c8
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/shared.ts
@@ -0,0 +1,14 @@
+export const loaderDisplayNames: Record<string, string> = {
+	fabric: 'Fabric',
+	neoforge: 'NeoForge',
+	forge: 'Forge',
+	quilt: 'Quilt',
+	paper: 'Paper',
+	purpur: 'Purpur',
+	vanilla: 'Vanilla',
+}
+
+export const formatLoaderLabel = (item: string) =>
+	loaderDisplayNames[item] ?? item.charAt(0).toUpperCase() + item.slice(1)
+
+export const capitalize = (item: string) => item.charAt(0).toUpperCase() + item.slice(1)
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/confirm-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/confirm-stage.ts
new file mode 100644
index 0000000000..84459f713f
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/confirm-stage.ts
@@ -0,0 +1,29 @@
+import { DownloadIcon, LeftArrowIcon, TrashIcon } from '@modrinth/assets'
+import { markRaw } from 'vue'
+
+import type { StageConfigInput } from '../../../base'
+import ConfirmStage from '../components/ConfirmStage.vue'
+import { type CreationFlowContextValue, flowTypeHeadings } from '../creation-flow-context'
+
+export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
+	id: 'confirm',
+	title: (ctx) => flowTypeHeadings[ctx.flowType],
+	stageContent: markRaw(ConfirmStage),
+	skip: (ctx) => ctx.flowType !== 'server-onboarding',
+	leftButtonConfig: (ctx) => ({
+		label: 'Back',
+		icon: LeftArrowIcon,
+		onClick: () => ctx.modal.value?.prevStage(),
+	}),
+	rightButtonConfig: (ctx) => {
+		const isErase = ctx.hardReset.value && !ctx.isInitialSetup
+		return {
+			label: isErase ? 'Erase and install' : 'Install',
+			icon: isErase ? TrashIcon : DownloadIcon,
+			iconPosition: 'before' as const,
+			color: isErase ? ('red' as const) : ('brand' as const),
+			onClick: () => ctx.finish(),
+		}
+	},
+	maxWidth: '520px',
+}
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
new file mode 100644
index 0000000000..641a449910
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/custom-setup-stage.ts
@@ -0,0 +1,60 @@
+import { LeftArrowIcon, PlusIcon, RightArrowIcon } from '@modrinth/assets'
+import { markRaw } from 'vue'
+
+import type { StageConfigInput } from '../../../base'
+import CustomSetupStage from '../components/CustomSetupStage.vue'
+import { type CreationFlowContextValue, flowTypeHeadings } from '../creation-flow-context'
+
+function isForwardBlocked(ctx: CreationFlowContextValue): boolean {
+	const baseCheck =
+		!ctx.selectedGameVersion.value &#124;&#124; (!ctx.hideLoaderChips.value && !ctx.selectedLoader.value)
+	if (ctx.flowType === 'instance') {
+		return baseCheck &#124;&#124; !ctx.instanceName.value.trim()
+	}
+	return baseCheck
+}
+
+export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
+	id: 'custom-setup',
+	title: (ctx) => flowTypeHeadings[ctx.flowType],
+	stageContent: markRaw(CustomSetupStage),
+	skip: (ctx) => ctx.setupType.value === 'modpack' &#124;&#124; ctx.isImportMode.value,
+	cannotNavigateForward: isForwardBlocked,
+	leftButtonConfig: (ctx) => ({
+		label: 'Back',
+		icon: LeftArrowIcon,
+		onClick: () => ctx.modal.value?.setStage('setup-type'),
+	}),
+	rightButtonConfig: (ctx) => {
+		const isInstance = ctx.flowType === 'instance'
+		const goesToNextStage = ctx.flowType === 'world' &#124;&#124; ctx.flowType === 'server-onboarding'
+		const disabled = isForwardBlocked(ctx)
+
+		if (isInstance) {
+			return {
+				label: 'Create instance',
+				icon: PlusIcon,
+				iconPosition: 'before' as const,
+				color: 'brand' as const,
+				disabled,
+				onClick: () => ctx.finish(),
+			}
+		}
+
+		return {
+			label: goesToNextStage ? 'Continue' : 'Finish',
+			icon: goesToNextStage ? RightArrowIcon : null,
+			iconPosition: 'after' as const,
+			color: goesToNextStage ? undefined : ('brand' as const),
+			disabled,
+			onClick: () => {
+				if (goesToNextStage) {
+					ctx.modal.value?.nextStage()
+				} else {
+					ctx.finish()
+				}
+			},
+		}
+	},
+	maxWidth: '520px',
+}
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
new file mode 100644
index 0000000000..590b1f57be
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/final-config-stage.ts
@@ -0,0 +1,41 @@
+import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
+import { markRaw } from 'vue'
+
+import type { StageConfigInput } from '../../../base'
+import FinalConfigStage from '../components/FinalConfigStage.vue'
+import { type CreationFlowContextValue, flowTypeHeadings } from '../creation-flow-context'
+
+function isForwardBlocked(ctx: CreationFlowContextValue): boolean {
+	return ctx.flowType === 'world' && !ctx.worldName.value.trim()
+}
+
+export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
+	id: 'final-config',
+	title: (ctx) => flowTypeHeadings[ctx.flowType],
+	stageContent: markRaw(FinalConfigStage),
+	skip: (ctx) => ctx.flowType === 'instance' &#124;&#124; ctx.isImportMode.value,
+	cannotNavigateForward: isForwardBlocked,
+	leftButtonConfig: (ctx) => ({
+		label: 'Back',
+		icon: LeftArrowIcon,
+		onClick: () => ctx.modal.value?.prevStage(),
+	}),
+	rightButtonConfig: (ctx) => {
+		const isWorld = ctx.flowType === 'world'
+		return {
+			label: isWorld ? 'Create' : 'Continue',
+			icon: isWorld ? null : RightArrowIcon,
+			iconPosition: 'after' as const,
+			color: isWorld ? ('brand' as const) : undefined,
+			disabled: isForwardBlocked(ctx),
+			onClick: () => {
+				if (isWorld) {
+					ctx.finish()
+				} else {
+					ctx.modal.value?.nextStage()
+				}
+			},
+		}
+	},
+	maxWidth: '520px',
+}
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/import-instance-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/import-instance-stage.ts
new file mode 100644
index 0000000000..7d6b94399c
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/import-instance-stage.ts
@@ -0,0 +1,41 @@
+import { DownloadIcon, LeftArrowIcon } from '@modrinth/assets'
+import { markRaw } from 'vue'
+
+import type { StageConfigInput } from '../../../base'
+import ImportInstanceStage from '../components/ImportInstanceStage.vue'
+import type { CreationFlowContextValue } from '../creation-flow-context'
+
+function getSelectedCount(ctx: CreationFlowContextValue): number {
+	let count = 0
+	for (const set of Object.values(ctx.importSelectedInstances.value)) {
+		count += set.size
+	}
+	return count
+}
+
+export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
+	id: 'import-instance',
+	title: 'Import instance',
+	stageContent: markRaw(ImportInstanceStage),
+	skip: (ctx) => !ctx.isImportMode.value,
+	leftButtonConfig: (ctx) => ({
+		label: 'Back',
+		icon: LeftArrowIcon,
+		onClick: () => {
+			ctx.isImportMode.value = false
+			ctx.modal.value?.setStage('setup-type')
+		},
+	}),
+	rightButtonConfig: (ctx) => {
+		const count = getSelectedCount(ctx)
+		return {
+			label: count> 0 ? `Import ${count} instance${count !== 1 ? 's' : ''}` : 'Import',
+			icon: DownloadIcon,
+			iconPosition: 'before' as const,
+			color: 'brand' as const,
+			disabled: count === 0,
+			onClick: () => ctx.finish(),
+		}
+	},
+	maxWidth: '520px',
+}
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/index.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/index.ts
new file mode 100644
index 0000000000..ad44962b9d
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/index.ts
@@ -0,0 +1,17 @@
+import type { StageConfigInput } from '../../../base'
+import type { CreationFlowContextValue } from '../creation-flow-context'
+import { stageConfig as confirmStageConfig } from './confirm-stage'
+import { stageConfig as customSetupStageConfig } from './custom-setup-stage'
+import { stageConfig as finalConfigStageConfig } from './final-config-stage'
+import { stageConfig as importInstanceStageConfig } from './import-instance-stage'
+import { stageConfig as modpackStageConfig } from './modpack-stage'
+import { stageConfig as setupTypeStageConfig } from './setup-type-stage'
+
+export const stageConfigs: StageConfigInput<creationflowcontextvalue>[] = [
+	setupTypeStageConfig,
+	modpackStageConfig,
+	importInstanceStageConfig,
+	customSetupStageConfig,
+	finalConfigStageConfig,
+	confirmStageConfig,
+]
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
new file mode 100644
index 0000000000..d6e4c016a5
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/modpack-stage.ts
@@ -0,0 +1,15 @@
+import { markRaw } from 'vue'
+
+import type { StageConfigInput } from '../../../base'
+import ModpackStage from '../components/ModpackStage.vue'
+import type { CreationFlowContextValue } from '../creation-flow-context'
+
+export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
+	id: 'modpack',
+	title: 'Choose modpack',
+	stageContent: markRaw(ModpackStage),
+	skip: (ctx) => ctx.setupType.value !== 'modpack' &#124;&#124; ctx.isImportMode.value,
+	leftButtonConfig: null,
+	rightButtonConfig: null,
+	maxWidth: '520px',
+}
diff --git a/packages/ui/src/components/flows/creation-flow-modal/stages/setup-type-stage.ts b/packages/ui/src/components/flows/creation-flow-modal/stages/setup-type-stage.ts
new file mode 100644
index 0000000000..9d3db57914
--- /dev/null
+++ b/packages/ui/src/components/flows/creation-flow-modal/stages/setup-type-stage.ts
@@ -0,0 +1,14 @@
+import { markRaw } from 'vue'
+
+import type { StageConfigInput } from '../../../base'
+import SetupTypeStage from '../components/SetupTypeStage.vue'
+import { type CreationFlowContextValue, flowTypeHeadings } from '../creation-flow-context'
+
+export const stageConfig: StageConfigInput<creationflowcontextvalue> = {
+	id: 'setup-type',
+	title: (ctx) => flowTypeHeadings[ctx.flowType],
+	stageContent: markRaw(SetupTypeStage),
+	leftButtonConfig: null,
+	rightButtonConfig: null,
+	maxWidth: '520px',
+}
diff --git a/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue b/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue
index f2b5399f48..3ec24e673c 100644
--- a/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue
+++ b/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue
@@ -53,7 +53,8 @@
 									<div>
 										<versionchannelindicator :channel="version.version_type" - + size="sm" + />
 										<span v-tooltip="version.version_number" diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue index 2c29e343b9..0e3f4277f8 100644 --- a/packages/ui/src/components/modal/NewModal.vue +++ b/packages/ui/src/components/modal/NewModal.vue @@ -113,7 +113,7 @@ <slot> You just lost the game.</slot>
 				</div>
 
-				<div v-if="$slots.actions">
+				<div v-if="$slots.actions">
 					<slot name="actions" />
 				</div>
 			</div>
diff --git a/packages/ui/src/components/servers/ServerSetupModal.vue b/packages/ui/src/components/servers/ServerSetupModal.vue
new file mode 100644
index 0000000000..8148500213
--- /dev/null
+++ b/packages/ui/src/components/servers/ServerSetupModal.vue
@@ -0,0 +1,188 @@
+<template>
+	<creationflowmodal + ref="creationFlowRef" + type="server-onboarding" + :available-loaders="serverLoaders" + :show-snapshot-toggle="true" + :disable-close="props.initialSetup" + :is-initial-setup="props.initialSetup" + :initial-setup-type="initialSetupType" + :initial-loader="initialLoader" + :initial-game-version="initialGameVersion" + @create="onFlowComplete" + @hide="$emit('hide')" + @browse-modpacks="$emit('browse-modpacks')" + />
+
+	<newmodal ref="uploadModal" header="Uploading modpack" :closable="false">
+		<div>
+			<appearingprogressbar :max-value="totalBytes" :current-value="uploadedBytes" />
+			<p>Please don't close this page while uploading.</p>
+		</div>
+	</newmodal>
+</template>
+
+
diff --git a/packages/ui/src/components/servers/flows/index.ts b/packages/ui/src/components/servers/flows/index.ts
new file mode 100644
index 0000000000..86e826b909
--- /dev/null
+++ b/packages/ui/src/components/servers/flows/index.ts
@@ -0,0 +1,11 @@
+export type {
+	CreationFlowContextValue,
+	CreationFlowOptions,
+	Difficulty,
+	FlowType,
+	Gamemode,
+	GeneratorSettingsMode,
+	LoaderVersionType,
+	SetupType,
+} from '../../flows/creation-flow-modal/creation-flow-context'
+export { default as CreationFlowModal } from '../../flows/creation-flow-modal/index.vue'
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index 476693f12a..4a2313c76d 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -1,8 +1,10 @@
 export * from './backups'
 export * from './files'
+export * from './flows'
 export * from './icons'
 export * from './labels'
 export * from './marketing'
 export type { PendingChange } from './ServerListing.vue'
 export { default as ServerListing } from './ServerListing.vue'
+export { default as ServerSetupModal } from './ServerSetupModal.vue'
 export { default as ServersPromo } from './ServersPromo.vue'
diff --git a/packages/ui/src/components/version/VersionChannelIndicator.vue b/packages/ui/src/components/version/VersionChannelIndicator.vue
index 3b3ffbc586..2fdeb905fe 100644
--- a/packages/ui/src/components/version/VersionChannelIndicator.vue
+++ b/packages/ui/src/components/version/VersionChannelIndicator.vue
@@ -1,20 +1,38 @@
 setup lang="ts">
 import type { VersionChannel } from '@modrinth/utils'
+import { computed } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 
 const { formatMessage } = useVIntl()
 
-withDefaults(
+const props = withDefaults(
 	defineProps<{ channel: VersionChannel + /** @deprecated Use size="lg" instead */ large?: boolean + size?: 'xs' &#124; 'sm' &#124; 'md' &#124; 'lg' }>(),
 	{
 		large: false,
+		size: 'md',
 	},
 )
 
+const sizeClasses = computed(() => {
+	if (props.large) return 'text-lg w-[2.625rem] h-[2.625rem]'
+	switch (props.size) {
+		case 'xs':
+			return 'text-xs w-5 h-5'
+		case 'sm':
+			return 'text-xs w-7 h-7'
+		case 'lg':
+			return 'text-lg w-[2.625rem] h-[2.625rem]'
+		default:
+			return 'text-sm w-9 h-9'
+	}
+})
+
 const messages = defineMessages({
 	releaseSymbol: {
 		id: 'project.versions.channel.release.symbol',
@@ -33,7 +51,15 @@ const messages = defineMessages({
 
 <template>
 	<div - :text-lg w-[2.625rem] h-[2.625rem]' : 'text-sm w-9 h-9'} font-bold justify-center items-center rounded-full ${channel === 'release' ? 'bg-bg-green text-brand-green' : channel === 'beta' ? 'bg-bg-orange text-brand-orange' : 'bg-bg-red text-brand-red'}`" + :flex font-bold justify-center items-center rounded-full', + sizeClasses, + channel === 'release' + ? 'bg-bg-green text-brand-green' + : channel === 'beta' + ? 'bg-bg-orange text-brand-orange' + : 'bg-bg-red text-brand-red', + ]">
 		{{ channel ? formatMessage(messages[`${channel}Symbol`]) : '?' }}
 	</div>
diff --git a/packages/ui/src/providers/file-picker.ts b/packages/ui/src/providers/file-picker.ts
new file mode 100644
index 0000000000..d9eb81ae70
--- /dev/null
+++ b/packages/ui/src/providers/file-picker.ts
@@ -0,0 +1,19 @@
+import { createContext } from '.'
+
+export interface PickedFile {
+	/** Browser File object */
+	file: File
+	/** Native file system path (available on Tauri, undefined on web) */
+	path?: string
+	/** URL suitable for display (blob URL on web, convertFileSrc URL on Tauri) */
+	previewUrl: string
+}
+
+export interface FilePickerProvider {
+	/** Pick an image file (for icons) */
+	pickImage: () => Promise<pickedfile &#124; null>
+	/** Pick a .mrpack modpack file */
+	pickModpackFile: () => Promise<pickedfile &#124; null>
+}
+
+export const [injectFilePicker, provideFilePicker] = createContext<filepickerprovider>('FilePicker')
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index 0b08f9b292..f4d4c1c669 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -80,9 +80,12 @@ export function createContext<contextvalue>(
 
 export * from './api-client'
 export * from './content-manager'
+export * from './file-picker'
 export * from './i18n'
+export * from './instance-import'
 export * from './modal-behavior'
 export * from './page-context'
 export * from './project-page'
 export * from './server-context'
+export * from './tags'
 export * from './web-notifications'
diff --git a/packages/ui/src/providers/instance-import.ts b/packages/ui/src/providers/instance-import.ts
new file mode 100644
index 0000000000..13c73a1d77
--- /dev/null
+++ b/packages/ui/src/providers/instance-import.ts
@@ -0,0 +1,23 @@
+import { createContext } from '.'
+
+export interface ImportableLauncher {
+	name: string
+	path: string
+	instances: string[]
+}
+
+export interface InstanceImportProvider {
+	/** Returns launchers with instances already populated (one round trip on mount) */
+	getDetectedLaunchers: () => Promise<importablelauncher[]>
+	/** Only needed for manually-added launcher paths */
+	getImportableInstances: (launcherName: string, path: string) => Promise<string[]>
+	/** Perform the actual import */
+	importInstances: (
+		selections: { launcher: string; path: string; instanceNames: string[] }[],
+	) => Promise<void>
+	/** Open a directory picker (platform-specific) */
+	selectDirectory: () => Promise<string &#124; null>
+}
+
+export const [injectInstanceImport, provideInstanceImport] =
+	createContext<instanceimportprovider>('InstanceImport')
diff --git a/packages/ui/src/providers/tags.ts b/packages/ui/src/providers/tags.ts
new file mode 100644
index 0000000000..32ea2f933f
--- /dev/null
+++ b/packages/ui/src/providers/tags.ts
@@ -0,0 +1,11 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { Ref } from 'vue'
+
+import { createContext } from './index'
+
+export interface TagsContext {
+	gameVersions: Ref<labrinth.tags.v2.gameversion[]>
+	loaders: Ref<labrinth.tags.v2.loader[]>
+}
+
+export const [injectTags, provideTags] = createContext<tagscontext>('root', 'tags')
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 5ed52f9a3b..eee1c50a31 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -1,5 +1,7 @@
 import {
 	DownloadIcon,
+	EyeIcon,
+	EyeOffIcon,
 	HeartIcon,
 	SettingsIcon,
 	ShareIcon,
@@ -97,6 +99,83 @@ export const WithSelectedOption: Story = {
 	},
 }
 
+export const SearchMode: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+			{ value: 'profile', label: 'Profile', icon: UserIcon },
+		],
+		searchMode: true,
+		searchPlaceholder: 'Search actions...',
+		disableSearchFilter: false,
+	},
+}
+
+export const SearchModeWithIcons: Story = {
+	args: {
+		options: [
+			{ value: 'download', label: 'Download', icon: DownloadIcon },
+			{ value: 'share', label: 'Share', icon: ShareIcon },
+			{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+			{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+		],
+		searchMode: true,
+		searchPlaceholder: 'Search modpacks...',
+		noOptionsMessage: 'No modpacks found',
+	},
+}
+
+export const WithDropdownFooter: StoryObj = {
+	render: () => ({
+		components: { Combobox, EyeIcon, EyeOffIcon },
+		data: () => ({
+			selected: '1.20.4',
+			showAll: false,
+		}),
+		computed: {
+			options() {
+				const releases = [
+					{ value: '1.20.4', label: '1.20.4' },
+					{ value: '1.20.3', label: '1.20.3' },
+					{ value: '1.20.2', label: '1.20.2' },
+					{ value: '1.20.1', label: '1.20.1' },
+					{ value: '1.20', label: '1.20' },
+				]
+				const snapshots = [
+					{ value: '24w03a', label: '24w03a' },
+					{ value: '23w51b', label: '23w51b' },
+				]
+				// @ts-ignore
+				return this.showAll ? [...releases, ...snapshots] : releases
+			},
+		},
+		template: /*html*/ `
+			<combobox + v-model="selected" + :options="options" + searchable + placeholder="Select game version" + search-placeholder="Search game versions" +>
+				<template #dropdown-footer>
+					<button + + @mousedown.prevent + @click="showAll = !showAll" +>
+						<eyeofficon v-if="showAll" />
+						<eyeicon v-else />
+						{{ showAll ? 'Hide snapshots' : 'Show all versions' }}
+					</button>
+				</template>
+			</combobox>
+		`,
+	}),
+}
+
 export const WithSelectedOptionAndIcon: Story = {
 	args: {
 		options: [
diff --git a/packages/ui/src/stories/servers/CreationFlowModal.stories.ts b/packages/ui/src/stories/servers/CreationFlowModal.stories.ts
new file mode 100644
index 0000000000..163f37c3e7
--- /dev/null
+++ b/packages/ui/src/stories/servers/CreationFlowModal.stories.ts
@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import type { CreationFlowContextValue } from '../../components/flows/creation-flow-modal/creation-flow-context'
+import CreationFlowModal from '../../components/flows/creation-flow-modal/index.vue'
+
+const meta = {
+	title: 'Servers/CreationFlowModal',
+	component: CreationFlowModal,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof CreationFlowModal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// ============================================
+// Create World (Hosting)
+// ============================================
+
+export const CreateWorld: Story = {
+	name: 'Create World (Hosting)',
+	render: () => ({
+		components: { CreationFlowModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<instancetype<typeof CreationFlowModal> &#124; null>(null)
+			const lastEvent = ref('')
+			const openModal = () => modalRef.value?.show()
+
+			const onCreate = (config: CreationFlowContextValue) => {
+				lastEvent.value = `create emitted — name: "${config.worldName.value}", mode: ${config.gamemode.value}`
+			}
+			return { modalRef, openModal, lastEvent, onCreate }
+		},
+		template: /*html*/ `
+			<div>
+				<buttonstyled color="brand">
+					<button @click="openModal">Create World</button>
+				</buttonstyled>
+				<p v-if="lastEvent">Last event: {{ lastEvent }}</p>
+				<creationflowmodal + ref="modalRef" + type="world" + @hide="() => {}"
+					@browse-modpacks="() => console.log('browse-modpacks emitted')"
+					@create="onCreate"
+				/>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Server Setup (Legacy) (Hosting)
+// ============================================
+
+export const ServerOnboarding: Story = {
+	name: 'Server Setup (Legacy) (Hosting)',
+	render: () => ({
+		components: { CreationFlowModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<instancetype<typeof CreationFlowModal> &#124; null>(null)
+			const lastEvent = ref('')
+			const openModal = () => modalRef.value?.show()
+
+			const onCreate = (config: CreationFlowContextValue) => {
+				lastEvent.value = `create emitted — loader: ${config.selectedLoader.value}, version: ${config.selectedGameVersion.value}`
+			}
+			return { modalRef, openModal, lastEvent, onCreate }
+		},
+		template: /*html*/ `
+			<div>
+				<buttonstyled color="brand">
+					<button @click="openModal">Set Up Server</button>
+				</buttonstyled>
+				<p v-if="lastEvent">Last event: {{ lastEvent }}</p>
+				<creationflowmodal + ref="modalRef" + type="server-onboarding" + @hide="() => {}"
+					@browse-modpacks="() => console.log('browse-modpacks emitted')"
+					@create="onCreate"
+				/>
+			</div>
+		`,
+	}),
+}
+
+// ============================================
+// Create Instance (App)
+// ============================================
+
+export const Instance: Story = {
+	name: 'Create Instance (App)',
+	render: () => ({
+		components: { CreationFlowModal, ButtonStyled },
+		setup() {
+			const modalRef = ref<instancetype<typeof CreationFlowModal> &#124; null>(null)
+			const lastEvent = ref('')
+			const openModal = () => modalRef.value?.show()
+
+			const onCreate = (config: CreationFlowContextValue) => {
+				lastEvent.value = `create emitted — loader: ${config.selectedLoader.value}, version: ${config.selectedGameVersion.value}`
+			}
+			return { modalRef, openModal, lastEvent, onCreate }
+		},
+		template: /*html*/ `
+			<div>
+				<buttonstyled color="brand">
+					<button @click="openModal">Create Instance</button>
+				</buttonstyled>
+				<p v-if="lastEvent">Last event: {{ lastEvent }}</p>
+				<creationflowmodal + ref="modalRef" + type="instance" + @hide="() => {}"
+					@browse-modpacks="() => console.log('browse-modpacks emitted')"
+					@create="onCreate"
+				/>
+			</div>
+		`,
+	}),
+}
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/modrinth/code/pull/5383.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/modrinth/code/pull/5383.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>