diff --git a/webapp/src/lib/api/generated-client.ts b/webapp/src/lib/api/generated-client.ts
index 218f58681..89c3a9265 100644
--- a/webapp/src/lib/api/generated-client.ts
+++ b/webapp/src/lib/api/generated-client.ts
@@ -423,6 +423,20 @@ export class GeneratedGarmApiClient {
     const response = await this.hooksApi.getOrgWebhookInfo(orgId);
     return response.data;
   }
+
+  async installForgeInstanceWebhook(forgeInstanceId: string, params: any = {}): Promise<void> {
+    await this.forgeInstancesApi.installForgeInstanceWebhook(forgeInstanceId, params);
+  }
+
+  async uninstallForgeInstanceWebhook(forgeInstanceId: string): Promise<void> {
+    await this.forgeInstancesApi.uninstallForgeInstanceWebhook(forgeInstanceId);
+  }
+
+  async getForgeInstanceWebhookInfo(forgeInstanceId: string): Promise<HookInfo> {
+    const response = await this.forgeInstancesApi.getForgeInstanceWebhookInfo(forgeInstanceId);
+    return response.data;
+  }
+
   async listOrganizations(): Promise<Organization[]> {
     const response = await this.organizationsApi.listOrgs();
     return response.data || [];
@@ -503,8 +517,8 @@ export class GeneratedGarmApiClient {
   }
 
   // Forge Instances
-  async listForgeInstances(): Promise<ForgeInstance[]> {
-    const response = await this.forgeInstancesApi.listForgeInstances();
+  async listForgeInstances(endpoint?: string): Promise<ForgeInstance[]> {
+    const response = await this.forgeInstancesApi.listForgeInstances(endpoint);
     return response.data || [];
   }
 
diff --git a/webapp/src/lib/components/CreateForgeInstanceModal.svelte b/webapp/src/lib/components/CreateForgeInstanceModal.svelte
index 387804b55..2bac52b00 100644
--- a/webapp/src/lib/components/CreateForgeInstanceModal.svelte
+++ b/webapp/src/lib/components/CreateForgeInstanceModal.svelte
@@ -49,18 +49,21 @@
 		}
 	}
 
-	// Only show Gitea credentials
-	$: filteredCredentials = credentials.filter(cred => cred.forge_type === 'gitea');
-
 	// Only show Gitea endpoints
 	$: giteaEndpoints = endpoints.filter(ep => ep.endpoint_type === 'gitea');
 
-	// Auto-select endpoint from selected credentials
+	// Filter credentials by selected endpoint
+	$: filteredCredentials = credentials.filter(cred =>
+		cred.forge_type === 'gitea' &&
+		(!endpointName || cred.endpoint?.name === endpointName)
+	);
+
+	// Clear credentials when endpoint changes (if current selection doesn't match)
 	$: {
-		if (credentialsName) {
-			const cred = filteredCredentials.find(c => c.name === credentialsName);
-			if (cred?.endpoint?.name) {
-				endpointName = cred.endpoint.name;
+		if (endpointName && credentialsName) {
+			const stillValid = filteredCredentials.find(c => c.name === credentialsName);
+			if (!stillValid) {
+				credentialsName = '';
 			}
 		}
 	}
diff --git a/webapp/src/lib/components/CreatePoolModal.svelte b/webapp/src/lib/components/CreatePoolModal.svelte
index c9654819e..5fbda716d 100644
--- a/webapp/src/lib/components/CreatePoolModal.svelte
+++ b/webapp/src/lib/components/CreatePoolModal.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+	import { slide } from 'svelte/transition';
 	import { garmApi } from '$lib/api/client.js';
 	import { resolve } from '$app/paths';
 	import type {
 		CreatePoolParams,
+		CreateScaleSetParams,
 		Repository,
 		Organization,
 		Enterprise,
@@ -11,25 +13,31 @@
 		Template,
 		UpdateEntityParams
 	} from '$lib/api/generated/api.js';
-	import Modal from './Modal.svelte';
+	import WizardModal from './WizardModal.svelte';
+	import ForgeTypeSelector from './ForgeTypeSelector.svelte';
+	import RunnerConfigFields from './fields/RunnerConfigFields.svelte';
+	import RunnerLimitsFields from './fields/RunnerLimitsFields.svelte';
+	import RunnerAdvancedFields from './fields/RunnerAdvancedFields.svelte';
 	import { extractAPIError } from '$lib/utils/apiError';
 	import { getEntityForgeTypeById, getEntityAgentModeById } from '$lib/utils/entity';
-	import JsonEditor from './JsonEditor.svelte';
 	import { websocketStore, type WebSocketEvent } from '$lib/stores/websocket.js';
 	import UpdateEntityModal from './UpdateEntityModal.svelte';
 
 	const dispatch = createEventDispatcher<{
 		close: void;
-		submit: CreatePoolParams;
+		submit: CreatePoolParams | CreateScaleSetParams;
 	}>();
 
 	// Export props for pre-populating the modal
 	export let initialEntityType: 'repository' | 'organization' | 'enterprise' | 'forge_instance' | '' = '';
 	export let initialEntityId: string = '';
+	export let poolType: 'pool' | 'scaleset' = 'pool';
 
 	let loading = false;
 	let error = '';
-	let entityLevel = initialEntityType;
+	let currentStep = 0;
+	let selectedForgeType: 'github' | 'gitea' | '' = '';
+	let entityLevel: 'repository' | 'organization' | 'enterprise' | 'forge_instance' | '' = initialEntityType;
 	let entities: (Repository | Organization | Enterprise)[] = [];
 	let providers: Provider[] = [];
 	let templates: Template[] = [];
@@ -42,6 +50,7 @@
 	// Form fields
 	let selectedEntityId = initialEntityId;
 	let selectedProvider = '';
+	let scaleSetName = '';
 	let image = '';
 	let flavor = '';
 	let maxRunners: number | undefined = undefined;
@@ -55,14 +64,45 @@
 	let enabled = true;
 	let enableShell = false;
 	let tags: string[] = [];
-	let newTag = '';
 	let extraSpecs = '{}';
 	let selectedTemplate: number | undefined = undefined;
 
+	$: wizardTitle = poolType === 'pool' ? 'Create New Pool' : 'Create New Scale Set';
+	$: wizardSubmitLabel = poolType === 'pool' ? 'Create Pool' : 'Create Scale Set';
+
+	const steps = [
+		{ title: 'Target', description: 'Where should the pool run?' },
+		{ title: 'Runner', description: 'What should the runners look like?' },
+		{ title: 'Settings', description: 'Additional configuration' }
+	];
+
+	// canAdvance logic per step
+	$: canAdvance = currentStep === 0
+		? !!(selectedEntityId && selectedProvider && (poolType !== 'scaleset' || scaleSetName.trim()))
+		: currentStep === 1
+			? !!(image && flavor)
+			: true;
+
+	// Reactive statement to check agent mode
+	$: entityAgentMode = getEntityAgentModeById(selectedEntityId, entities);
+	$: if (!entityAgentMode) {
+		enableShell = false;
+	}
+
+	function getSelectedEntityForgeType(): string | null {
+		return getEntityForgeTypeById(selectedEntityId, entities);
+	}
+
+	// Reload templates when entity selection or OS type changes
+	$: if (selectedEntityId && osType) {
+		loadTemplates();
+	}
+
 	async function loadProviders() {
 		try {
 			loadingProviders = true;
-			providers = await garmApi.listProviders();
+			const allProviders = await garmApi.listProviders();
+			providers = allProviders.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
 		} catch (err) {
 			error = extractAPIError(err);
 		} finally {
@@ -73,8 +113,7 @@
 	async function loadTemplates() {
 		try {
 			loadingTemplates = true;
-			
-			// Get forge type from selected entity
+
 			const forgeType = getSelectedEntityForgeType();
 			if (!forgeType) {
 				templates = [];
@@ -89,7 +128,6 @@
 				if (systemTemplate) {
 					selectedTemplate = systemTemplate.id;
 				} else if (templates.length > 0) {
-					// If no system template, select the first available template
 					selectedTemplate = templates[0].id;
 				}
 			}
@@ -100,38 +138,35 @@
 		}
 	}
 
-	function getSelectedEntityForgeType(): string | null {
-		return getEntityForgeTypeById(selectedEntityId, entities);
-	}
-
-	// Reactive statement to check agent mode
-	$: entityAgentMode = getEntityAgentModeById(selectedEntityId, entities);
-	$: if (!entityAgentMode) {
-		// Disable shell if agent mode is not enabled on entity
-		enableShell = false;
-	}
-
 	async function loadEntities() {
 		if (!entityLevel) return;
-		
+
 		try {
 			loadingEntities = true;
 			entities = [];
-			
+
+			let allEntities: any[] = [];
 			switch (entityLevel) {
 				case 'repository':
-					entities = await garmApi.listRepositories();
+					allEntities = await garmApi.listRepositories();
 					break;
 				case 'organization':
-					entities = await garmApi.listOrganizations();
+					allEntities = await garmApi.listOrganizations();
 					break;
 				case 'enterprise':
-					entities = await garmApi.listEnterprises();
+					allEntities = await garmApi.listEnterprises();
 					break;
 				case 'forge_instance':
-					entities = await garmApi.listForgeInstances();
+					allEntities = await garmApi.listForgeInstances();
 					break;
 			}
+
+			// Filter by selected forge type when applicable
+			if (selectedForgeType && (entityLevel === 'repository' || entityLevel === 'organization')) {
+				entities = allEntities.filter((e: any) => e.endpoint?.endpoint_type === selectedForgeType);
+			} else {
+				entities = allEntities;
+			}
 		} catch (err) {
 			error = extractAPIError(err);
 		} finally {
@@ -139,6 +174,27 @@
 		}
 	}
 
+	function selectForgeType(type: 'github' | 'gitea') {
+		if (selectedForgeType === type) return;
+		selectedForgeType = type;
+		selectedEntityId = '';
+		selectedTemplate = undefined;
+
+		// Reset entity level if it's incompatible with the new forge type
+		if (entityLevel === 'enterprise' && type !== 'github') {
+			entityLevel = '';
+			entities = [];
+		} else if (entityLevel === 'forge_instance' && type !== 'gitea') {
+			entityLevel = '';
+			entities = [];
+		} else if (entityLevel) {
+			// Compatible level (repo/org) -- reload with new forge type filter
+			loadEntities();
+		} else {
+			entities = [];
+		}
+	}
+
 	function selectEntityLevel(level: 'repository' | 'organization' | 'enterprise' | 'forge_instance') {
 		if (entityLevel === level) return;
 		entityLevel = level;
@@ -162,7 +218,6 @@
 		if (!selectedEntityId || !entityLevel) return;
 
 		try {
-			// Update the entity
 			switch (entityLevel) {
 				case 'repository':
 					await garmApi.updateRepository(selectedEntityId, params);
@@ -173,12 +228,12 @@
 				case 'enterprise':
 					await garmApi.updateEnterprise(selectedEntityId, params);
 					break;
+				case 'forge_instance':
+					await garmApi.updateForgeInstance(selectedEntityId, params);
+					break;
 			}
 
-			// Reload entities to get updated data
 			await loadEntities();
-
-			// Close the entity update modal
 			showEntityUpdateModal = false;
 		} catch (err) {
 			error = extractAPIError(err);
@@ -191,35 +246,17 @@
 		return entities.find(e => e.id === selectedEntityId) || null;
 	}
 
-	// Reload templates when entity selection or OS type changes
-	$: if (selectedEntityId && osType) {
-		loadTemplates();
-	}
-
-	function addTag() {
-		if (newTag.trim() && !tags.includes(newTag.trim())) {
-			tags = [...tags, newTag.trim()];
-			newTag = '';
-		}
-	}
-
-	function removeTag(index: number) {
-		tags = tags.filter((_, i) => i !== index);
-	}
-
-	function handleTagKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			addTag();
-		}
-	}
-
 	async function handleSubmit() {
 		if (!entityLevel || !selectedEntityId || !selectedProvider || !image || !flavor) {
 			error = 'Please fill in all required fields';
 			return;
 		}
 
+		if (poolType === 'scaleset' && !scaleSetName.trim()) {
+			error = 'Please enter a scale set name';
+			return;
+		}
+
 		try {
 			loading = true;
 			error = '';
@@ -234,49 +271,85 @@
 				}
 			}
 
-			const params: CreatePoolParams = {
-				provider_name: selectedProvider,
-				image,
-				flavor,
-				max_runners: maxRunners || 10,
-				min_idle_runners: minIdleRunners || 0,
-				runner_bootstrap_timeout: runnerBootstrapTimeout || 20,
-				priority,
-				runner_prefix: runnerPrefix,
-				os_type: osType as any,
-				os_arch: osArch as any,
-				'github-runner-group': githubRunnerGroup || undefined,
-				enabled,
-				enable_shell: enableShell,
-				tags,
-				extra_specs: extraSpecs.trim() ? parsedExtraSpecs : undefined,
-				template_id: selectedTemplate
-			};
-
-			// If we have an initial entity, let the parent handle the API call to avoid duplicates
-			// If no initial entity, we handle it ourselves (global pools page scenario)
-			if (initialEntityType && initialEntityId) {
-				// Entity pages: parent handles the API call
-				dispatch('submit', params);
+			if (poolType === 'scaleset') {
+				const params: CreateScaleSetParams = {
+					name: scaleSetName.trim(),
+					provider_name: selectedProvider,
+					image,
+					flavor,
+					max_runners: maxRunners || 10,
+					min_idle_runners: minIdleRunners || 0,
+					runner_bootstrap_timeout: runnerBootstrapTimeout || 20,
+					runner_prefix: runnerPrefix,
+					os_type: osType as any,
+					os_arch: osArch as any,
+					'github-runner-group': githubRunnerGroup || undefined,
+					enabled,
+					enable_shell: enableShell,
+					labels: tags,
+					extra_specs: extraSpecs.trim() ? parsedExtraSpecs : undefined,
+					template_id: selectedTemplate
+				};
+
+				if (initialEntityType && initialEntityId) {
+					dispatch('submit', params);
+				} else {
+					switch (entityLevel) {
+						case 'repository':
+							await garmApi.createRepositoryScaleSet(selectedEntityId, params);
+							break;
+						case 'organization':
+							await garmApi.createOrganizationScaleSet(selectedEntityId, params);
+							break;
+						case 'enterprise':
+							await garmApi.createEnterpriseScaleSet(selectedEntityId, params);
+							break;
+						default:
+							throw new Error('Invalid entity level for scale set');
+					}
+					dispatch('submit', params);
+				}
 			} else {
-				// Global pools page: modal handles the API call
-				switch (entityLevel) {
-					case 'repository':
-						await garmApi.createRepositoryPool(selectedEntityId, params);
-						break;
-					case 'organization':
-						await garmApi.createOrganizationPool(selectedEntityId, params);
-						break;
-					case 'enterprise':
-						await garmApi.createEnterprisePool(selectedEntityId, params);
-						break;
-					case 'forge_instance':
-						await garmApi.createForgeInstancePool(selectedEntityId, params);
-						break;
-					default:
-						throw new Error('Invalid entity level');
+				const params: CreatePoolParams = {
+					provider_name: selectedProvider,
+					image,
+					flavor,
+					max_runners: maxRunners || 10,
+					min_idle_runners: minIdleRunners || 0,
+					runner_bootstrap_timeout: runnerBootstrapTimeout || 20,
+					priority,
+					runner_prefix: runnerPrefix,
+					os_type: osType as any,
+					os_arch: osArch as any,
+					'github-runner-group': githubRunnerGroup || undefined,
+					enabled,
+					enable_shell: enableShell,
+					tags,
+					extra_specs: extraSpecs.trim() ? parsedExtraSpecs : undefined,
+					template_id: selectedTemplate
+				};
+
+				if (initialEntityType && initialEntityId) {
+					dispatch('submit', params);
+				} else {
+					switch (entityLevel) {
+						case 'repository':
+							await garmApi.createRepositoryPool(selectedEntityId, params);
+							break;
+						case 'organization':
+							await garmApi.createOrganizationPool(selectedEntityId, params);
+							break;
+						case 'enterprise':
+							await garmApi.createEnterprisePool(selectedEntityId, params);
+							break;
+						case 'forge_instance':
+							await garmApi.createForgeInstancePool(selectedEntityId, params);
+							break;
+						default:
+							throw new Error('Invalid entity level');
+					}
+					dispatch('submit', params);
 				}
-				dispatch('submit', params);
 			}
 		} catch (err) {
 			error = extractAPIError(err);
@@ -287,12 +360,13 @@
 
 	onMount(() => {
 		loadProviders();
-		// If we have an initial entity type, load the entities for that type
 		if (initialEntityType) {
 			loadEntities();
 		}
-		// Websocket subscription is handled by the reactive statement below,
-		// which runs on init and whenever entityLevel changes.
+		// Scale sets are GitHub-only — auto-select forge type
+		if (poolType === 'scaleset' && !selectedForgeType) {
+			selectedForgeType = 'github';
+		}
 	});
 
 	onDestroy(() => {
@@ -315,471 +389,201 @@
 	}
 </script>
 
-<Modal on:close={() => dispatch('close')}>
-	<div class="max-w-6xl w-full max-h-[90vh] overflow-y-auto">
-		<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-			<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Create New Pool</h2>
-		</div>
-
-		<form on:submit|preventDefault={handleSubmit} class="p-6 space-y-6">
-			{#if error}
-				<div class="rounded-md bg-red-50 dark:bg-red-900 p-4">
-					<p class="text-sm font-medium text-red-800 dark:text-red-200">{error}</p>
-				</div>
+<WizardModal
+	title={wizardTitle}
+	{steps}
+	bind:currentStep
+	{canAdvance}
+	{loading}
+	submitLabel={wizardSubmitLabel}
+	{error}
+	on:close={() => dispatch('close')}
+	on:submit={handleSubmit}
+>
+	<!-- Step 0: Target -->
+	<div slot="step-0">
+		{#if !initialEntityType}
+			<!-- Forge Type Selection (skip for scale sets — GitHub only) -->
+			{#if poolType !== 'scaleset'}
+				<ForgeTypeSelector
+					{selectedForgeType}
+					label="Forge Type *"
+					on:select={(e) => selectForgeType(e.detail)}
+				/>
 			{/if}
 
-			<!-- Entity Level Selection -->
-			<fieldset>
-				<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-					Entity Level <span class="text-red-500">*</span>
-				</legend>
-				<div class="grid grid-cols-3 gap-4">
-					<button
-						type="button"
-						on:click={() => selectEntityLevel('repository')}
-						class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'repository' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
-					>
-						<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"/>
-						</svg>
-						<span class="text-sm font-medium text-gray-900 dark:text-white">Repository</span>
-					</button>
-					<button
-						type="button"
-						on:click={() => selectEntityLevel('organization')}
-						class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'organization' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
-					>
-						<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
-						</svg>
-						<span class="text-sm font-medium text-gray-900 dark:text-white">Organization</span>
-					</button>
-					<button
-						type="button"
-						on:click={() => selectEntityLevel('enterprise')}
-						class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'enterprise' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
-					>
-						<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
-						</svg>
-						<span class="text-sm font-medium text-gray-900 dark:text-white">Enterprise</span>
-					</button>
-					<button
-						type="button"
-						on:click={() => selectEntityLevel('forge_instance')}
-						class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'forge_instance' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
-					>
-						<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
-						</svg>
-						<span class="text-sm font-medium text-gray-900 dark:text-white">Forge Instance</span>
-					</button>
-				</div>
-			</fieldset>
-
-			{#if entityLevel}
-				<!-- Group 1: Entity & Provider Selection -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Entity & Provider Configuration
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div>
-							<label for="entity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								{entityLevel.charAt(0).toUpperCase() + entityLevel.slice(1)} <span class="text-red-500">*</span>
-							</label>
-							{#if loadingEntities}
-								<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-10 rounded"></div>
-							{:else}
-								<select 
-									id="entity"
-									bind:value={selectedEntityId}
-									required
-									class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-								>
-									<option value="">Select a {entityLevel}</option>
-									{#each entities as entity}
-										<option value={entity.id}>
-											{#if entityLevel === 'repository'}
-												{(entity as any).owner}/{entity.name} ({entity.endpoint?.name})
-											{:else if entityLevel === 'forge_instance'}
-												{entity.endpoint?.name} ({entity.credentials?.name})
-											{:else}
-												{entity.name} ({entity.endpoint?.name})
-											{/if}
-										</option>
-									{/each}
-								</select>
-							{/if}
-						</div>
-						<div>
-							<label for="provider" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Provider <span class="text-red-500">*</span>
-							</label>
-							{#if loadingProviders}
-								<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-10 rounded"></div>
-							{:else}
-								<select 
-									id="provider"
-									bind:value={selectedProvider}
-									required
-									class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-								>
-									<option value="">Select a provider</option>
-									{#each providers as provider}
-										<option value={provider.name}>{provider.name}</option>
-									{/each}
-								</select>
-							{/if}
-						</div>
-					</div>
-				</div>
-
-				<!-- Group 2: Image & OS Configuration -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Image & OS Configuration
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div>
-							<label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Image <span class="text-red-500">*</span>
-							</label>
-							<input
-								id="image"
-								type="text"
-								bind:value={image}
-								required
-								placeholder="e.g., ubuntu:22.04"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="flavor" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Flavor <span class="text-red-500">*</span>
-							</label>
-							<input
-								id="flavor"
-								type="text"
-								bind:value={flavor}
-								required
-								placeholder="e.g., default"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="osType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								OS Type
-							</label>
-							<select
-								id="osType"
-								bind:value={osType}
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			<!-- Entity Level Selection (filtered by forge type) -->
+			{#if selectedForgeType}
+				<fieldset class="mt-6" transition:slide={{ duration: 200 }}>
+					<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+						Entity Level <span class="text-red-500">*</span>
+					</legend>
+					<div class="grid grid-cols-3 gap-4">
+						<button
+							type="button"
+							on:click={() => selectEntityLevel('repository')}
+							class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'repository' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
+						>
+							<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"/>
+							</svg>
+							<span class="text-sm font-medium text-gray-900 dark:text-white">Repository</span>
+						</button>
+						<button
+							type="button"
+							on:click={() => selectEntityLevel('organization')}
+							class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'organization' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
+						>
+							<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+							</svg>
+							<span class="text-sm font-medium text-gray-900 dark:text-white">Organization</span>
+						</button>
+						{#if selectedForgeType === 'github'}
+							<button
+								type="button"
+								on:click={() => selectEntityLevel('enterprise')}
+								class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'enterprise' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
 							>
-								<option value="linux">Linux</option>
-								<option value="windows">Windows</option>
-							</select>
-						</div>
-						<div>
-							<label for="osArch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Architecture
-							</label>
-							<select
-								id="osArch"
-								bind:value={osArch}
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+								<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+								</svg>
+								<span class="text-sm font-medium text-gray-900 dark:text-white">Enterprise</span>
+							</button>
+						{:else}
+							<button
+								type="button"
+								on:click={() => selectEntityLevel('forge_instance')}
+								class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'forge_instance' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
 							>
-								<option value="amd64">AMD64</option>
-								<option value="arm64">ARM64</option>
-							</select>
-						</div>
+								<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
+								</svg>
+								<span class="text-sm font-medium text-gray-900 dark:text-white">Forge Instance</span>
+							</button>
+						{/if}
 					</div>
-					
-					<!-- Template Selection -->
+				</fieldset>
+			{/if}
+		{/if}
+
+		{#if entityLevel}
+			<div class="space-y-4" class:mt-6={!initialEntityType} transition:slide={{ duration: 150 }}>
+				<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
+					Entity & Provider Configuration
+				</h3>
+				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 					<div>
-						<label for="template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Runner Install Template
+						<label for="entity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+							{entityLevel === 'forge_instance' ? 'Forge Instance' : entityLevel.charAt(0).toUpperCase() + entityLevel.slice(1)} <span class="text-red-500">*</span>
 						</label>
-						{#if loadingTemplates}
-							<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 flex items-center">
-								<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
-								<span class="text-sm text-gray-600 dark:text-gray-400">Loading templates...</span>
-							</div>
-						{:else if templates.length > 0}
+						{#if loadingEntities}
+							<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-10 rounded"></div>
+						{:else}
 							<select
-								id="template"
-								bind:value={selectedTemplate}
+								id="entity"
+								bind:value={selectedEntityId}
+								required
 								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
 							>
-								{#each templates as template}
-									<option value={template.id}>
-										{template.name} {template.owner_id === 'system' ? '(System)' : ''}
-										{#if template.description} - {template.description}{/if}
+								<option value="">Select a {entityLevel === 'forge_instance' ? 'forge instance' : entityLevel}</option>
+								{#each entities as entity}
+									<option value={entity.id}>
+										{#if entityLevel === 'repository'}
+											{(entity as any).owner}/{entity.name} ({entity.endpoint?.name})
+										{:else if entityLevel === 'forge_instance'}
+											{entity.endpoint?.name} ({entity.credentials?.name})
+										{:else}
+											{entity.name} ({entity.endpoint?.name})
+										{/if}
 									</option>
 								{/each}
 							</select>
-							<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-								Templates define how the runner software is installed and configured.
-								{#if selectedEntityId}
-									Showing templates for {getSelectedEntityForgeType()} {osType}.
-								{/if}
-							</p>
-						{:else if selectedEntityId}
-							<div class="w-full px-3 py-2 border border-yellow-300 dark:border-yellow-600 rounded-md bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200">
-								<p class="text-sm">No templates found for {getSelectedEntityForgeType()} {osType}.</p>
-								<p class="text-xs mt-1">
-									<a href={resolve('/templates')} class="text-yellow-700 dark:text-yellow-300 hover:underline">
-										Create a template first
-									</a> or proceed without a template to use default behavior.
-								</p>
-							</div>
-						{:else}
-							<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
-								<p class="text-sm">Select an entity first to see available templates</p>
-							</div>
 						{/if}
 					</div>
-				</div>
-
-				<!-- Group 3: Runner Limits & Timing -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Runner Limits & Timing
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-						<div>
-							<label for="minIdleRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Min Idle Runners
-							</label>
-							<input
-								id="minIdleRunners"
-								type="number"
-								bind:value={minIdleRunners}
-								min="0"
-								placeholder="0"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="maxRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Max Runners
-							</label>
-							<input
-								id="maxRunners"
-								type="number"
-								bind:value={maxRunners}
-								min="1"
-								placeholder="10"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="bootstrapTimeout" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Bootstrap Timeout (min)
-							</label>
-							<input
-								id="bootstrapTimeout"
-								type="number"
-								bind:value={runnerBootstrapTimeout}
-								min="1"
-								placeholder="20"
+					<div>
+						<label for="provider" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+							Provider <span class="text-red-500">*</span>
+						</label>
+						{#if loadingProviders}
+							<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-10 rounded"></div>
+						{:else}
+							<select
+								id="provider"
+								bind:value={selectedProvider}
+								required
 								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
+							>
+								<option value="">Select a provider</option>
+								{#each providers as provider}
+									<option value={provider.name}>{provider.name}</option>
+								{/each}
+							</select>
+						{/if}
 					</div>
 				</div>
 
-				<!-- Group 4: Advanced Settings -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Advanced Settings
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-						<div>
-							<label for="runnerPrefix" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Runner Prefix
-							</label>
-							<input
-								id="runnerPrefix"
-								type="text"
-								bind:value={runnerPrefix}
-								placeholder="garm"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="priority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Priority
-							</label>
-							<input
-								id="priority"
-								type="number"
-								bind:value={priority}
-								min="1"
-								placeholder="100"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="githubRunnerGroup" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								GitHub Runner Group (optional)
-							</label>
-							<input
-								id="githubRunnerGroup"
-								type="text"
-								bind:value={githubRunnerGroup}
-								placeholder="Default group"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-					</div>
-
-					<!-- Tags -->
-					<div>
-						<label for="tag-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Tags
+				{#if poolType === 'scaleset'}
+					<div transition:slide={{ duration: 150 }}>
+						<label for="scaleSetName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+							Scale Set Name <span class="text-red-500">*</span>
 						</label>
-						<div class="space-y-2">
-							<div class="flex">
-								<input
-									id="tag-input"
-									type="text"
-									bind:value={newTag}
-									on:keydown={handleTagKeydown}
-									placeholder="Enter a tag"
-									class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-								/>
-								<button
-									type="button"
-									on:click={addTag}
-									class="px-3 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
-								>
-									Add
-								</button>
-							</div>
-							{#if tags.length > 0}
-								<div class="flex flex-wrap gap-2">
-									{#each tags as tag, index}
-										<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-											{tag}
-											<button
-												type="button"
-												on:click={() => removeTag(index)}
-												aria-label={`Remove tag ${tag}`}
-												class="ml-1 h-4 w-4 rounded-full hover:bg-blue-200 dark:hover:bg-blue-800 flex items-center justify-center cursor-pointer"
-											>
-												<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-												</svg>
-											</button>
-										</span>
-									{/each}
-								</div>
-							{/if}
-						</div>
-					</div>
-
-					<!-- Extra Specs -->
-					<fieldset>
-						<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Extra Specs (JSON)
-						</legend>
-						<JsonEditor
-							bind:value={extraSpecs}
-							rows={4}
-							placeholder="{'{}'}"
-						/>
-					</fieldset>
-
-					<!-- Enabled Checkbox -->
-					<div class="flex items-center">
 						<input
-							id="enabled"
-							type="checkbox"
-							bind:checked={enabled}
-							class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
+							id="scaleSetName"
+							type="text"
+							bind:value={scaleSetName}
+							required
+							placeholder="e.g., my-scale-set"
+							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
 						/>
-						<label for="enabled" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
-							Enable pool immediately
-						</label>
 					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
 
-					<!-- Enable Shell Checkbox -->
-					<div class="space-y-2">
-						<div class="flex items-center">
-							<input
-								id="enableShell"
-								type="checkbox"
-								bind:checked={enableShell}
-								disabled={!entityAgentMode}
-								class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-							/>
-							<label for="enableShell" class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {!entityAgentMode ? 'opacity-50' : ''}">
-								Enable Shell
-							</label>
-							<div class="ml-2 relative group">
-								<svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-								</svg>
-								<div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 w-80 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
-									This enables remote shell in the GARM agent, allowing users to connect via garm-cli or web UI using websockets.
-									<div class="absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
-								</div>
-							</div>
-						</div>
-						{#if !entityAgentMode}
-							<div class="ml-6 flex items-start space-x-2 text-xs text-yellow-700 dark:text-yellow-400">
-								<svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-								</svg>
-								<span>
-									Shell access requires agent mode to be enabled on the {entityLevel}.
-									{#if selectedEntityId}
-										<button
-											type="button"
-											on:click={() => showEntityUpdateModal = true}
-											class="underline hover:text-yellow-800 dark:hover:text-yellow-300 cursor-pointer"
-										>
-											Enable agent mode
-										</button>
-									{/if}
-								</span>
-							</div>
-						{/if}
-					</div>
-				</div>
-			{/if}
+	<!-- Step 1: Runner -->
+	<div slot="step-1">
+		<RunnerConfigFields
+			bind:image
+			bind:flavor
+			bind:osType
+			bind:osArch
+			bind:selectedTemplate
+			{templates}
+			{loadingTemplates}
+			idPrefix="create-pool"
+		/>
+		<div class="mt-6">
+			<RunnerLimitsFields
+				bind:minIdleRunners
+				bind:maxRunners
+				bind:runnerBootstrapTimeout
+			/>
+		</div>
+	</div>
 
-			<!-- Action Buttons -->
-			<div class="flex justify-end space-x-3 pt-6 border-t border-gray-200 dark:border-gray-700">
-				<button
-					type="button"
-					on:click={() => dispatch('close')}
-					class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
-				>
-					Cancel
-				</button>
-				<button
-					type="submit"
-					disabled={loading || !entityLevel || !selectedEntityId || !selectedProvider || !image || !flavor}
-					class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-				>
-					{#if loading}
-						<div class="flex items-center">
-							<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-							Creating...
-						</div>
-					{:else}
-						Create Pool
-					{/if}
-				</button>
-			</div>
-		</form>
+	<!-- Step 2: Settings -->
+	<div slot="step-2">
+		<RunnerAdvancedFields
+			bind:runnerPrefix
+			bind:priority
+			bind:githubRunnerGroup
+			bind:tags
+			bind:extraSpecs
+			bind:enabled
+			bind:enableShell
+			{entityAgentMode}
+			enabledLabel={poolType === 'scaleset' ? 'Enable scale set immediately' : 'Enable pool immediately'}
+			showPriority={poolType !== 'scaleset'}
+			idPrefix="create-pool"
+			on:enableAgentMode={() => { if (selectedEntityId) showEntityUpdateModal = true; }}
+		/>
 	</div>
-</Modal>
+</WizardModal>
 
-<!-- Nested Entity Update Modals -->
+<!-- Nested Entity Update Modal -->
 {#if showEntityUpdateModal && selectedEntityId}
 	{@const selectedEntity = getSelectedEntity()}
 	{#if selectedEntity && (entityLevel === 'repository' || entityLevel === 'organization' || entityLevel === 'enterprise')}
@@ -790,4 +594,4 @@
 			on:submit={(e) => handleEntityUpdate(e.detail)}
 		/>
 	{/if}
-{/if}
\ No newline at end of file
+{/if}
diff --git a/webapp/src/lib/components/CreateScaleSetModal.svelte b/webapp/src/lib/components/CreateScaleSetModal.svelte
index 5e766ea16..4393e465d 100644
--- a/webapp/src/lib/components/CreateScaleSetModal.svelte
+++ b/webapp/src/lib/components/CreateScaleSetModal.svelte
@@ -1,775 +1,20 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
-	import { garmApi } from '$lib/api/client.js';
-	import { resolve } from '$app/paths';
-	import type {
-		CreateScaleSetParams,
-		Repository,
-		Organization,
-		Enterprise,
-		Provider,
-		Template,
-		UpdateEntityParams
-	} from '$lib/api/generated/api.js';
-	import Modal from './Modal.svelte';
-	import JsonEditor from './JsonEditor.svelte';
-	import { extractAPIError } from '$lib/utils/apiError';
-	import { getEntityForgeTypeById, getEntityAgentModeById } from '$lib/utils/entity';
-	import { websocketStore, type WebSocketEvent } from '$lib/stores/websocket.js';
-	import UpdateEntityModal from './UpdateEntityModal.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import CreatePoolModal from './CreatePoolModal.svelte';
 
 	const dispatch = createEventDispatcher<{
 		close: void;
 		submit: any;
 	}>();
 
-	let loading = false;
-	let error = '';
-	let entityLevel = '';
-	let entities: (Repository | Organization | Enterprise)[] = [];
-	let providers: Provider[] = [];
-	let templates: Template[] = [];
-	let loadingEntities = false;
-	let loadingProviders = false;
-	let loadingTemplates = false;
-	let showEntityUpdateModal = false;
-	let unsubscribeWebsocket: (() => void) | null = null;
-
-	// Form fields
-	let name = '';
-	let selectedEntityId = '';
-	let selectedProvider = '';
-	let image = '';
-	let flavor = '';
-	let maxRunners: number | undefined = undefined;
-	let minIdleRunners: number | undefined = undefined;
-	let runnerBootstrapTimeout: number | undefined = undefined;
-	let runnerPrefix = 'garm';
-	let osType = 'linux';
-	let osArch = 'amd64';
-	let githubRunnerGroup = '';
-	let enabled = true;
-	let enableShell = false;
-	let extraSpecs = '{}';
-	let selectedTemplate: number | undefined = undefined;
-	let labels: string[] = [];
-	let newLabel = '';
-
-	function addLabel() {
-		if (newLabel.trim() && !labels.includes(newLabel.trim())) {
-			labels = [...labels, newLabel.trim()];
-			newLabel = '';
-		}
-	}
-
-	function removeLabel(index: number) {
-		labels = labels.filter((_, i) => i !== index);
-	}
-
-	function handleLabelKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			addLabel();
-		}
-	}
-
-	// Reactive validation
-	$: isFormValid = !loading && 
-		name.trim() !== '' && 
-		entityLevel !== '' && 
-		selectedEntityId !== '' && 
-		selectedProvider !== '' && 
-		image.trim() !== '' && 
-		flavor.trim() !== '';
-
-	async function loadProviders() {
-		try {
-			loadingProviders = true;
-			providers = await garmApi.listProviders();
-		} catch (err) {
-			error = extractAPIError(err);
-		} finally {
-			loadingProviders = false;
-		}
-	}
-
-	async function loadTemplates() {
-		try {
-			loadingTemplates = true;
-			
-			// Get forge type from selected entity
-			const forgeType = getSelectedEntityForgeType();
-			if (!forgeType) {
-				templates = [];
-				return;
-			}
-
-			templates = await garmApi.listTemplates(osType, undefined, forgeType);
-
-			// Auto-select system template if no template is currently selected, or if templates change
-			if (!selectedTemplate || !templates.find(t => t.id === selectedTemplate)) {
-				const systemTemplate = templates.find(t => t.owner_id === 'system');
-				if (systemTemplate) {
-					selectedTemplate = systemTemplate.id;
-				} else if (templates.length > 0) {
-					// If no system template, select the first available template
-					selectedTemplate = templates[0].id;
-				}
-			}
-		} catch (err) {
-			error = extractAPIError(err);
-		} finally {
-			loadingTemplates = false;
-		}
-	}
-
-	function getSelectedEntityForgeType(): string | null {
-		return getEntityForgeTypeById(selectedEntityId, entities);
-	}
-
-	// Reactive statement to check agent mode
-	$: entityAgentMode = getEntityAgentModeById(selectedEntityId, entities);
-	$: if (!entityAgentMode) {
-		// Disable shell if agent mode is not enabled on entity
-		enableShell = false;
-	}
-
-	async function loadEntities() {
-		if (!entityLevel) return;
-		
-		try {
-			loadingEntities = true;
-			entities = [];
-			
-			switch (entityLevel) {
-				case 'repository':
-					entities = await garmApi.listRepositories();
-					break;
-				case 'organization':
-					entities = await garmApi.listOrganizations();
-					break;
-				case 'enterprise':
-					entities = await garmApi.listEnterprises();
-					break;
-			}
-		} catch (err) {
-			error = extractAPIError(err);
-		} finally {
-			loadingEntities = false;
-		}
-	}
-
-	function selectEntityLevel(level: string) {
-		if (entityLevel === level) return;
-		entityLevel = level;
-		selectedEntityId = '';
-		selectedTemplate = undefined;
-		loadEntities();
-	}
-
-	function handleEntityWebSocketEvent(event: WebSocketEvent) {
-		if (event.operation !== 'update') return;
-
-		const updatedEntity = event.payload;
-
-		// Update the local entities array so the reactive $: statement picks up the change
-		if (updatedEntity.id === selectedEntityId) {
-			entities = entities.map(e => e.id === updatedEntity.id ? { ...e, ...updatedEntity } : e);
-		}
-	}
-
-	async function handleEntityUpdate(params: UpdateEntityParams) {
-		if (!selectedEntityId || !entityLevel) return;
-
-		try {
-			switch (entityLevel) {
-				case 'repository':
-					await garmApi.updateRepository(selectedEntityId, params);
-					break;
-				case 'organization':
-					await garmApi.updateOrganization(selectedEntityId, params);
-					break;
-				case 'enterprise':
-					await garmApi.updateEnterprise(selectedEntityId, params);
-					break;
-			}
-
-			await loadEntities();
-			showEntityUpdateModal = false;
-		} catch (err) {
-			error = extractAPIError(err);
-			showEntityUpdateModal = false;
-		}
-	}
-
-	function getSelectedEntity(): Repository | Organization | Enterprise | null {
-		if (!selectedEntityId || !entities) return null;
-		return entities.find(e => e.id === selectedEntityId) || null;
-	}
-
-	// Reload templates when entity selection or OS type changes
-	$: if (selectedEntityId && osType) {
-		loadTemplates();
-	}
-
-
-	async function handleSubmit() {
-		if (!isFormValid) {
-			error = 'Please fill in all required fields';
-			return;
-		}
-
-		try {
-			loading = true;
-			error = '';
-
-			// Validate extra specs JSON
-			let parsedExtraSpecs: any = {};
-			if (extraSpecs.trim()) {
-				try {
-					parsedExtraSpecs = JSON.parse(extraSpecs);
-				} catch (e) {
-					throw new Error('Invalid JSON in extra specs');
-				}
-			}
-
-			const params: CreateScaleSetParams = {
-				name,
-				provider_name: selectedProvider,
-				image,
-				flavor,
-				max_runners: maxRunners || 10,
-				min_idle_runners: minIdleRunners || 0,
-				runner_bootstrap_timeout: runnerBootstrapTimeout || 20,
-				runner_prefix: runnerPrefix,
-				os_type: osType as any,
-				os_arch: osArch as any,
-				'github-runner-group': githubRunnerGroup || undefined,
-				enabled,
-				enable_shell: enableShell,
-				extra_specs: extraSpecs.trim() ? parsedExtraSpecs : undefined,
-				template_id: selectedTemplate,
-				labels: labels.length > 0 ? labels : undefined
-			};
-
-			// Create the scale set using entity-specific method
-			let createdScaleSet;
-			switch (entityLevel) {
-				case 'repository':
-					createdScaleSet = await garmApi.createRepositoryScaleSet(selectedEntityId, params);
-					break;
-				case 'organization':
-					createdScaleSet = await garmApi.createOrganizationScaleSet(selectedEntityId, params);
-					break;
-				case 'enterprise':
-					createdScaleSet = await garmApi.createEnterpriseScaleSet(selectedEntityId, params);
-					break;
-				default:
-					throw new Error('Invalid entity level selected');
-			}
-			dispatch('submit', createdScaleSet);
-		} catch (err) {
-			error = extractAPIError(err);
-		} finally {
-			loading = false;
-		}
-	}
-
-	onMount(() => {
-		loadProviders();
-		// Websocket subscription is handled by the reactive statement below,
-		// which runs on init and whenever entityLevel changes.
-	});
-
-	onDestroy(() => {
-		if (unsubscribeWebsocket) {
-			unsubscribeWebsocket();
-			unsubscribeWebsocket = null;
-		}
-	});
-
-	// Re-subscribe when entity level changes
-	$: if (entityLevel && (entityLevel === 'repository' || entityLevel === 'organization' || entityLevel === 'enterprise')) {
-		if (unsubscribeWebsocket) {
-			unsubscribeWebsocket();
-		}
-		unsubscribeWebsocket = websocketStore.subscribeToEntity(
-			entityLevel as 'repository' | 'organization' | 'enterprise',
-			['update'],
-			handleEntityWebSocketEvent
-		);
-	}
+	export let initialEntityType: 'repository' | 'organization' | 'enterprise' | '' = '';
+	export let initialEntityId: string = '';
 </script>
 
-<Modal on:close={() => dispatch('close')}>
-	<div class="max-w-6xl w-full max-h-[90vh] overflow-y-auto">
-		<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-			<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Create New Scale Set</h2>
-			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Scale sets are only available for GitHub endpoints</p>
-		</div>
-
-		<form on:submit|preventDefault={handleSubmit} class="p-6 space-y-6">
-			{#if error}
-				<div class="rounded-md bg-red-50 dark:bg-red-900 p-4">
-					<p class="text-sm font-medium text-red-800 dark:text-red-200">{error}</p>
-				</div>
-			{/if}
-
-			<!-- Scale Set Name -->
-			<div>
-				<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-					Name <span class="text-red-500">*</span>
-				</label>
-				<input
-					id="name"
-					type="text"
-					bind:value={name}
-					required
-					placeholder="e.g., my-scale-set"
-					class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-				/>
-			</div>
-
-			<!-- Entity Level Selection -->
-			<div>
-				<fieldset>
-					<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-						Entity Level <span class="text-red-500">*</span>
-					</legend>
-					<div class="grid grid-cols-3 gap-4">
-					<button
-						type="button"
-						on:click={() => selectEntityLevel('repository')}
-						class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'repository' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
-					>
-						<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z"/>
-						</svg>
-						<span class="text-sm font-medium text-gray-900 dark:text-white">Repository</span>
-					</button>
-					<button
-						type="button"
-						on:click={() => selectEntityLevel('organization')}
-						class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'organization' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
-					>
-						<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
-						</svg>
-						<span class="text-sm font-medium text-gray-900 dark:text-white">Organization</span>
-					</button>
-					<button
-						type="button"
-						on:click={() => selectEntityLevel('enterprise')}
-						class="flex flex-col items-center justify-center p-4 border-2 rounded-lg transition-colors cursor-pointer {entityLevel === 'enterprise' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'}"
-					>
-						<svg class="w-8 h-8 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
-						</svg>
-						<span class="text-sm font-medium text-gray-900 dark:text-white">Enterprise</span>
-					</button>
-					</div>
-				</fieldset>
-			</div>
-
-			{#if entityLevel}
-				<!-- Group 1: Entity & Provider Configuration -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Entity & Provider Configuration
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div>
-							<label for="entity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								{entityLevel.charAt(0).toUpperCase() + entityLevel.slice(1)} <span class="text-red-500">*</span>
-							</label>
-							{#if loadingEntities}
-								<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-10 rounded"></div>
-							{:else}
-								<select 
-									id="entity"
-									bind:value={selectedEntityId}
-									required
-									class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-								>
-									<option value="">Select a {entityLevel}</option>
-									{#each entities as entity}
-										<option value={entity.id}>
-											{#if entityLevel === 'repository'}
-												{(entity as any).owner}/{entity.name} ({entity.endpoint?.name || 'Unknown endpoint'})
-											{:else}
-												{entity.name} ({entity.endpoint?.name || 'Unknown endpoint'})
-											{/if}
-										</option>
-									{/each}
-								</select>
-							{/if}
-						</div>
-						<div>
-							<label for="provider" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Provider <span class="text-red-500">*</span>
-							</label>
-							{#if loadingProviders}
-								<div class="animate-pulse bg-gray-200 dark:bg-gray-700 h-10 rounded"></div>
-							{:else}
-								<select 
-									id="provider"
-									bind:value={selectedProvider}
-									required
-									class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-								>
-									<option value="">Select a provider</option>
-									{#each providers as provider}
-										<option value={provider.name}>{provider.name}</option>
-									{/each}
-								</select>
-							{/if}
-						</div>
-					</div>
-				</div>
-
-				<!-- Group 2: Image & OS Configuration -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Image & OS Configuration
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div>
-							<label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Image <span class="text-red-500">*</span>
-							</label>
-							<input
-								id="image"
-								type="text"
-								bind:value={image}
-								required
-								placeholder="e.g., ubuntu:22.04"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="flavor" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Flavor <span class="text-red-500">*</span>
-							</label>
-							<input
-								id="flavor"
-								type="text"
-								bind:value={flavor}
-								required
-								placeholder="e.g., default"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="osType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								OS Type
-							</label>
-							<select
-								id="osType"
-								bind:value={osType}
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							>
-								<option value="linux">Linux</option>
-								<option value="windows">Windows</option>
-							</select>
-						</div>
-						<div>
-							<label for="osArch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Architecture
-							</label>
-							<select
-								id="osArch"
-								bind:value={osArch}
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							>
-								<option value="amd64">AMD64</option>
-								<option value="arm64">ARM64</option>
-							</select>
-						</div>
-					</div>
-					
-					<!-- Template Selection -->
-					<div>
-						<label for="template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Runner Install Template
-						</label>
-						{#if loadingTemplates}
-							<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 flex items-center">
-								<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
-								<span class="text-sm text-gray-600 dark:text-gray-400">Loading templates...</span>
-							</div>
-						{:else if templates.length > 0}
-							<select
-								id="template"
-								bind:value={selectedTemplate}
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							>
-								{#each templates as template}
-									<option value={template.id}>
-										{template.name} {template.owner_id === 'system' ? '(System)' : ''}
-										{#if template.description} - {template.description}{/if}
-									</option>
-								{/each}
-							</select>
-							<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-								Templates define how the runner software is installed and configured.
-								{#if selectedEntityId}
-									Showing templates for {getSelectedEntityForgeType()} {osType}.
-								{/if}
-							</p>
-						{:else if selectedEntityId}
-							<div class="w-full px-3 py-2 border border-yellow-300 dark:border-yellow-600 rounded-md bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200">
-								<p class="text-sm">No templates found for {getSelectedEntityForgeType()} {osType}.</p>
-								<p class="text-xs mt-1">
-									<a href={resolve('/templates')} class="text-yellow-700 dark:text-yellow-300 hover:underline">
-										Create a template first
-									</a> or proceed without a template to use default behavior.
-								</p>
-							</div>
-						{:else}
-							<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
-								<p class="text-sm">Select an entity first to see available templates</p>
-							</div>
-						{/if}
-					</div>
-				</div>
-
-				<!-- Group 3: Runner Limits & Timing -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Runner Limits & Timing
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-						<div>
-							<label for="minIdleRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Min Idle Runners
-							</label>
-							<input
-								id="minIdleRunners"
-								type="number"
-								bind:value={minIdleRunners}
-								min="0"
-								placeholder="0"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="maxRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Max Runners
-							</label>
-							<input
-								id="maxRunners"
-								type="number"
-								bind:value={maxRunners}
-								min="1"
-								placeholder="10"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="bootstrapTimeout" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Bootstrap Timeout (min)
-							</label>
-							<input
-								id="bootstrapTimeout"
-								type="number"
-								bind:value={runnerBootstrapTimeout}
-								min="1"
-								placeholder="20"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-					</div>
-				</div>
-
-				<!-- Group 4: Advanced Settings -->
-				<div class="space-y-4">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-						Advanced Settings
-					</h3>
-					<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div>
-							<label for="runnerPrefix" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								Runner Prefix
-							</label>
-							<input
-								id="runnerPrefix"
-								type="text"
-								bind:value={runnerPrefix}
-								placeholder="garm"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-						<div>
-							<label for="githubRunnerGroup" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-								GitHub Runner Group (optional)
-							</label>
-							<input
-								id="githubRunnerGroup"
-								type="text"
-								bind:value={githubRunnerGroup}
-								placeholder="Default group"
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-						</div>
-					</div>
-
-					<!-- Labels -->
-					<div class="col-span-2">
-						<label for="label-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Labels
-						</label>
-						<div class="space-y-2">
-							<div class="flex">
-								<input
-									id="label-input"
-									type="text"
-									bind:value={newLabel}
-									on:keydown={handleLabelKeydown}
-									placeholder="Enter a label"
-									class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-								/>
-								<button
-									type="button"
-									on:click={addLabel}
-									class="px-3 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
-								>
-									Add
-								</button>
-							</div>
-							{#if labels.length > 0}
-								<div class="flex flex-wrap gap-2">
-									{#each labels as label, index}
-										<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-											{label}
-											<button
-												type="button"
-												on:click={() => removeLabel(index)}
-												aria-label={`Remove label ${label}`}
-												class="ml-1 h-4 w-4 rounded-full hover:bg-blue-200 dark:hover:bg-blue-800 flex items-center justify-center cursor-pointer"
-											>
-												<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-												</svg>
-											</button>
-										</span>
-									{/each}
-								</div>
-							{/if}
-						</div>
-						<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-							Labels are used to target workflows to this scale set. If no labels are specified, the scale set name is used as the default label.
-						</p>
-					</div>
-
-					<!-- Extra Specs -->
-					<div>
-						<div class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Extra Specs (JSON)
-						</div>
-						<JsonEditor
-							bind:value={extraSpecs}
-							rows={4}
-							placeholder="{'{}'}"
-						/>
-					</div>
-
-					<!-- Enabled Checkbox -->
-					<div class="flex items-center">
-						<input
-							id="enabled"
-							type="checkbox"
-							bind:checked={enabled}
-							class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
-						/>
-						<label for="enabled" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
-							Enable scale set immediately
-						</label>
-					</div>
-
-					<!-- Enable Shell Checkbox -->
-					<div class="space-y-2">
-						<div class="flex items-center">
-							<input
-								id="enableShell"
-								type="checkbox"
-								bind:checked={enableShell}
-								disabled={!entityAgentMode}
-								class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-							/>
-							<label for="enableShell" class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {!entityAgentMode ? 'opacity-50' : ''}">
-								Enable Shell
-							</label>
-							<div class="ml-2 relative group">
-								<svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-								</svg>
-								<div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 w-80 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
-									This enables remote shell in the GARM agent, allowing users to connect via garm-cli or web UI using websockets.
-									<div class="absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
-								</div>
-							</div>
-						</div>
-						{#if !entityAgentMode}
-							<div class="ml-6 flex items-start space-x-2 text-xs text-yellow-700 dark:text-yellow-400">
-								<svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-								</svg>
-								<span>
-									Shell access requires agent mode to be enabled on the {entityLevel}.
-									{#if selectedEntityId}
-										<button
-											type="button"
-											on:click={() => showEntityUpdateModal = true}
-											class="underline hover:text-yellow-800 dark:hover:text-yellow-300 cursor-pointer"
-										>
-											Enable agent mode
-										</button>
-									{/if}
-								</span>
-							</div>
-						{/if}
-					</div>
-				</div>
-			{/if}
-
-			<!-- Action Buttons -->
-			<div class="flex justify-end space-x-3 pt-6 border-t border-gray-200 dark:border-gray-700">
-				<button
-					type="button"
-					on:click={() => dispatch('close')}
-					class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
-				>
-					Cancel
-				</button>
-				<button
-					type="submit"
-					disabled={!isFormValid}
-					class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-				>
-					{#if loading}
-						<div class="flex items-center">
-							<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-							Creating...
-						</div>
-					{:else}
-						Create Scale Set
-					{/if}
-				</button>
-			</div>
-		</form>
-	</div>
-</Modal>
-
-<!-- Nested Entity Update Modals -->
-{#if showEntityUpdateModal && selectedEntityId}
-	{@const selectedEntity = getSelectedEntity()}
-	{#if selectedEntity && (entityLevel === 'repository' || entityLevel === 'organization' || entityLevel === 'enterprise')}
-		<UpdateEntityModal
-			entity={selectedEntity}
-			entityType={entityLevel}
-			on:close={() => showEntityUpdateModal = false}
-			on:submit={(e) => handleEntityUpdate(e.detail)}
-		/>
-	{/if}
-{/if}
\ No newline at end of file
+<CreatePoolModal
+	poolType="scaleset"
+	{initialEntityType}
+	{initialEntityId}
+	on:close={() => dispatch('close')}
+	on:submit={(e) => dispatch('submit', e.detail)}
+/>
diff --git a/webapp/src/lib/components/Navigation.svelte b/webapp/src/lib/components/Navigation.svelte
index 3dc4286dc..4f4180f0d 100644
--- a/webapp/src/lib/components/Navigation.svelte
+++ b/webapp/src/lib/components/Navigation.svelte
@@ -63,7 +63,7 @@
 		{
 			href: resolve('/forge-instances'),
 			label: 'Forge Instances',
-			icon: 'M5 12h14M12 5l7 7-7 7' // Server/circuit icon
+			icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' // Server rack icon
 		},
 		{
 			href: resolve('/pools'),
diff --git a/webapp/src/lib/components/UpdatePoolModal.svelte b/webapp/src/lib/components/UpdatePoolModal.svelte
index f66a85bd7..23a8e1810 100644
--- a/webapp/src/lib/components/UpdatePoolModal.svelte
+++ b/webapp/src/lib/components/UpdatePoolModal.svelte
@@ -1,19 +1,21 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
-	import type { Pool, UpdatePoolParams, Template, Repository, Organization, Enterprise, ForgeInstance, UpdateEntityParams } from '$lib/api/generated/api.js';
-	import { resolve } from '$app/paths';
+	import type { Pool, ScaleSet, UpdatePoolParams, UpdateScaleSetParams, Template, Repository, Organization, Enterprise, ForgeInstance, UpdateEntityParams } from '$lib/api/generated/api.js';
 	import Modal from './Modal.svelte';
-	import JsonEditor from './JsonEditor.svelte';
+	import RunnerConfigFields from './fields/RunnerConfigFields.svelte';
+	import RunnerLimitsFields from './fields/RunnerLimitsFields.svelte';
+	import RunnerAdvancedFields from './fields/RunnerAdvancedFields.svelte';
 	import { extractAPIError } from '$lib/utils/apiError';
 	import { eagerCache } from '$lib/stores/eager-cache.js';
 	import { garmApi } from '$lib/api/client.js';
 	import UpdateEntityModal from './UpdateEntityModal.svelte';
 
-	export let pool: Pool;
+	export let pool: Pool | ScaleSet;
+	export let poolType: 'pool' | 'scaleset' = 'pool';
 
 	const dispatch = createEventDispatcher<{
 		close: void;
-		submit: UpdatePoolParams;
+		submit: any;
 	}>();
 
 	let loading = false;
@@ -24,45 +26,55 @@
 	let showEntityUpdateModal = false;
 
 	// Form fields - initialize with pool values
+	let name = (pool as ScaleSet).name || '';
 	let image = pool.image || '';
 	let flavor = pool.flavor || '';
 	let maxRunners = pool.max_runners;
 	let minIdleRunners = pool.min_idle_runners;
 	let runnerBootstrapTimeout = pool.runner_bootstrap_timeout;
-	let priority = pool.priority;
+	let priority = (pool as Pool).priority;
 	let runnerPrefix = pool.runner_prefix || '';
 	let osType = pool.os_type || 'linux';
 	let osArch = pool.os_arch || 'amd64';
 	let githubRunnerGroup = pool['github-runner-group'] || '';
 	let enabled = pool.enabled;
 	let enableShell = pool.enable_shell ?? false;
-	let tags: string[] = (pool.tags || []).map(tag => tag.name || '').filter(Boolean);
-	let newTag = '';
+	let tags: string[] = poolType === 'pool'
+		? ((pool as Pool).tags || []).map(tag => tag.name || '').filter(Boolean)
+		: [];
 	let extraSpecs = '{}';
 	let selectedTemplate: number | undefined = (pool as any).template_id;
 
-	function getEntityName(pool: Pool): string {
+	function getEntityName(p: Pool | ScaleSet): string {
+		if (poolType === 'scaleset') {
+			const ss = p as ScaleSet;
+			if (ss.repo_name) return ss.repo_name;
+			if (ss.org_name) return ss.org_name;
+			if (ss.enterprise_name) return ss.enterprise_name;
+			return 'Unknown Entity';
+		}
+		const pp = p as Pool;
 		// Look up friendly names from eager cache
-		if (pool.repo_id) {
-			const repo = $eagerCache.repositories.find(r => r.id === pool.repo_id);
+		if (pp.repo_id) {
+			const repo = $eagerCache.repositories.find(r => r.id === pp.repo_id);
 			return repo ? `${repo.owner}/${repo.name}` : 'Unknown Entity';
 		}
-		if (pool.org_id) {
-			const org = $eagerCache.organizations.find(o => o.id === pool.org_id);
+		if (pp.org_id) {
+			const org = $eagerCache.organizations.find(o => o.id === pp.org_id);
 			return (org && org.name) ? org.name : 'Unknown Entity';
 		}
-		if (pool.enterprise_id) {
-			const enterprise = $eagerCache.enterprises.find(e => e.id === pool.enterprise_id);
+		if (pp.enterprise_id) {
+			const enterprise = $eagerCache.enterprises.find(e => e.id === pp.enterprise_id);
 			return (enterprise && enterprise.name) ? enterprise.name : 'Unknown Entity';
 		}
 		return 'Unknown Entity';
 	}
 
-	function getEntityType(pool: Pool): string {
-		if (pool.repo_id) return 'Repository';
-		if (pool.org_id) return 'Organization';
-		if (pool.enterprise_id) return 'Enterprise';
-		if (pool.forge_instance_id) return 'Forge Instance';
+	function getEntityType(p: Pool | ScaleSet): string {
+		if (p.repo_id) return 'Repository';
+		if (p.org_id) return 'Organization';
+		if (p.enterprise_id) return 'Enterprise';
+		if ((p as Pool).forge_instance_id) return 'Forge Instance';
 		return 'Unknown';
 	}
 
@@ -108,8 +120,8 @@
 			const enterprise = cache.enterprises.find(e => e.id === pool.enterprise_id);
 			return enterprise?.agent_mode ?? false;
 		}
-		if (pool.forge_instance_id) {
-			const fi = cache.forgeInstances.find(f => f.id === pool.forge_instance_id);
+		if ((pool as Pool).forge_instance_id) {
+			const fi = cache.forgeInstances.find(f => f.id === (pool as Pool).forge_instance_id);
 			return fi?.agent_mode ?? false;
 		}
 		return false;
@@ -130,8 +142,8 @@
 				await garmApi.updateOrganization(pool.org_id, params);
 			} else if (pool.enterprise_id) {
 				await garmApi.updateEnterprise(pool.enterprise_id, params);
-			} else if (pool.forge_instance_id) {
-				await garmApi.updateForgeInstance(pool.forge_instance_id, params);
+			} else if ((pool as Pool).forge_instance_id) {
+				await garmApi.updateForgeInstance((pool as Pool).forge_instance_id!, params);
 			}
 
 			// Close the entity update modal
@@ -150,25 +162,32 @@
 			return $eagerCache.organizations.find(o => o.id === pool.org_id) || null;
 		} else if (pool.enterprise_id) {
 			return $eagerCache.enterprises.find(e => e.id === pool.enterprise_id) || null;
-		} else if (pool.forge_instance_id) {
-			return $eagerCache.forgeInstances.find(f => f.id === pool.forge_instance_id) || null;
+		} else if ((pool as Pool).forge_instance_id) {
+			return $eagerCache.forgeInstances.find(f => f.id === (pool as Pool).forge_instance_id) || null;
 		}
 		return null;
 	}
 
+	function getEntityTypeForModal(): 'repository' | 'organization' | 'enterprise' | 'forge_instance' {
+		if (pool.repo_id) return 'repository';
+		if (pool.org_id) return 'organization';
+		if (pool.enterprise_id) return 'enterprise';
+		return 'forge_instance';
+	}
+
 	async function loadTemplates() {
 		try {
 			loadingTemplates = true;
-			
+
 			// Get forge type from the pool's entity
 			const forgeType = getEntityForgeType();
 			if (!forgeType) {
 				templates = [];
 				return;
 			}
-			
+
 			templates = await garmApi.listTemplates(osType, undefined, forgeType);
-			
+
 			// Auto-select system template if no template is currently selected, or if templates change
 			if (!selectedTemplate || !templates.find(t => t.id === selectedTemplate)) {
 				const systemTemplate = templates.find(t => t.owner_id === 'system');
@@ -223,24 +242,6 @@
 		}
 	}
 
-	function addTag() {
-		if (newTag.trim() && !tags.includes(newTag.trim())) {
-			tags = [...tags, newTag.trim()];
-			newTag = '';
-		}
-	}
-
-	function removeTag(index: number) {
-		tags = tags.filter((_, i) => i !== index);
-	}
-
-	function handleTagKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter') {
-			event.preventDefault();
-			addTag();
-		}
-	}
-
 	async function handleSubmit() {
 		try {
 			loading = true;
@@ -261,45 +262,81 @@
 				}
 			}
 
-			const params: UpdatePoolParams = {
-				image: image !== pool.image ? image : undefined,
-				flavor: flavor !== pool.flavor ? flavor : undefined,
-				max_runners: maxRunners !== pool.max_runners ? maxRunners : undefined,
-				min_idle_runners: minIdleRunners !== pool.min_idle_runners ? minIdleRunners : undefined,
-				runner_bootstrap_timeout: runnerBootstrapTimeout !== pool.runner_bootstrap_timeout ? runnerBootstrapTimeout : undefined,
-				priority: priority !== pool.priority ? priority : undefined,
-				runner_prefix: runnerPrefix !== pool.runner_prefix ? runnerPrefix : undefined,
-				os_type: osType !== pool.os_type ? osType : undefined,
-				os_arch: osArch !== pool.os_arch ? osArch : undefined,
-				'github-runner-group': githubRunnerGroup !== pool['github-runner-group'] ? githubRunnerGroup || undefined : undefined,
-				enabled: enabled !== pool.enabled ? enabled : undefined,
-				enable_shell: enableShell !== pool.enable_shell ? enableShell : undefined,
-				tags: JSON.stringify(tags) !== JSON.stringify((pool.tags || []).map(tag => tag.name || '').filter(Boolean)) ? tags : undefined,
-				extra_specs: extraSpecs.trim() !== JSON.stringify(pool.extra_specs || {}, null, 2).trim() ? parsedExtraSpecs : undefined,
-				template_id: selectedTemplate !== (pool as any).template_id ? selectedTemplate : undefined
-			};
-
-			// Remove undefined values
-			Object.keys(params).forEach(key => {
-				if (params[key as keyof UpdatePoolParams] === undefined) {
-					delete params[key as keyof UpdatePoolParams];
-				}
-			});
-
-			dispatch('submit', params);
+			if (poolType === 'scaleset') {
+				const ss = pool as ScaleSet;
+				const params: UpdateScaleSetParams = {
+					name: name !== ss.name ? name : undefined,
+					image: image !== ss.image ? image : undefined,
+					flavor: flavor !== ss.flavor ? flavor : undefined,
+					max_runners: maxRunners !== ss.max_runners ? maxRunners : undefined,
+					min_idle_runners: minIdleRunners !== ss.min_idle_runners ? minIdleRunners : undefined,
+					runner_bootstrap_timeout: runnerBootstrapTimeout !== ss.runner_bootstrap_timeout ? runnerBootstrapTimeout : undefined,
+					runner_prefix: runnerPrefix !== ss.runner_prefix ? runnerPrefix : undefined,
+					os_type: osType !== ss.os_type ? osType : undefined,
+					os_arch: osArch !== ss.os_arch ? osArch : undefined,
+					runner_group: githubRunnerGroup !== ss['github-runner-group'] ? githubRunnerGroup || undefined : undefined,
+					enabled: enabled !== ss.enabled ? enabled : undefined,
+					enable_shell: enableShell !== ss.enable_shell ? enableShell : undefined,
+					extra_specs: extraSpecs.trim() !== JSON.stringify(ss.extra_specs || {}, null, 2).trim() ? parsedExtraSpecs : undefined,
+					template_id: selectedTemplate !== (ss as any).template_id ? selectedTemplate : undefined
+				};
+
+				// Remove undefined values
+				Object.keys(params).forEach(key => {
+					if (params[key as keyof UpdateScaleSetParams] === undefined) {
+						delete params[key as keyof UpdateScaleSetParams];
+					}
+				});
+
+				dispatch('submit', params);
+			} else {
+				const pp = pool as Pool;
+				const params: UpdatePoolParams = {
+					image: image !== pp.image ? image : undefined,
+					flavor: flavor !== pp.flavor ? flavor : undefined,
+					max_runners: maxRunners !== pp.max_runners ? maxRunners : undefined,
+					min_idle_runners: minIdleRunners !== pp.min_idle_runners ? minIdleRunners : undefined,
+					runner_bootstrap_timeout: runnerBootstrapTimeout !== pp.runner_bootstrap_timeout ? runnerBootstrapTimeout : undefined,
+					priority: priority !== pp.priority ? priority : undefined,
+					runner_prefix: runnerPrefix !== pp.runner_prefix ? runnerPrefix : undefined,
+					os_type: osType !== pp.os_type ? osType : undefined,
+					os_arch: osArch !== pp.os_arch ? osArch : undefined,
+					'github-runner-group': githubRunnerGroup !== pp['github-runner-group'] ? githubRunnerGroup || undefined : undefined,
+					enabled: enabled !== pp.enabled ? enabled : undefined,
+					enable_shell: enableShell !== pp.enable_shell ? enableShell : undefined,
+					tags: JSON.stringify(tags) !== JSON.stringify((pp.tags || []).map(tag => tag.name || '').filter(Boolean)) ? tags : undefined,
+					extra_specs: extraSpecs.trim() !== JSON.stringify(pp.extra_specs || {}, null, 2).trim() ? parsedExtraSpecs : undefined,
+					template_id: selectedTemplate !== (pp as any).template_id ? selectedTemplate : undefined
+				};
+
+				// Remove undefined values
+				Object.keys(params).forEach(key => {
+					if (params[key as keyof UpdatePoolParams] === undefined) {
+						delete params[key as keyof UpdatePoolParams];
+					}
+				});
+
+				dispatch('submit', params);
+			}
 		} catch (err) {
 			error = extractAPIError(err);
 		} finally {
 			loading = false;
 		}
 	}
+
+	$: isPool = poolType === 'pool';
+	$: modalTitle = isPool ? `Update Pool ${pool.id}` : `Update Scale Set ${(pool as ScaleSet).name}`;
+	$: infoTitle = isPool ? 'Pool Information (Read-only)' : 'Scale Set Information';
+	$: enabledLabel = isPool ? 'Pool enabled' : 'Scale set enabled';
+	$: submitLabel = isPool ? 'Update Pool' : 'Update Scale Set';
 </script>
 
 <Modal on:close={() => dispatch('close')}>
 	<div class="max-w-6xl w-full max-h-[90vh] overflow-y-auto">
 		<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
 			<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-				Update Pool {pool.id}
+				{modalTitle}
 			</h2>
 		</div>
 
@@ -309,16 +346,16 @@
 					<p class="text-sm font-medium text-red-800 dark:text-red-200">{error}</p>
 				</div>
 			{/if}
-			
+
 			{#if validationError}
 				<div class="rounded-md bg-yellow-50 dark:bg-yellow-900 p-4">
 					<p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">{validationError}</p>
 				</div>
 			{/if}
 
-			<!-- Pool Info (Read-only) -->
+			<!-- Pool/Scale Set Info (Read-only) -->
 			<div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg">
-				<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pool Information (Read-only)</h3>
+				<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{infoTitle}</h3>
 				<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
 					<div class="flex">
 						<span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">Provider:</span>
@@ -333,312 +370,57 @@
 				</div>
 			</div>
 
-			<!-- Group 1: Image & OS Configuration -->
-			<div class="space-y-4">
-				<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-					Image & OS Configuration
-				</h3>
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<div>
-						<label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Image
-						</label>
-						<input
-							id="image"
-							type="text"
-							bind:value={image}
-							placeholder="e.g., ubuntu:22.04"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="flavor" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Flavor
-						</label>
-						<input
-							id="flavor"
-							type="text"
-							bind:value={flavor}
-							placeholder="e.g., default"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="osType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							OS Type
-						</label>
-						<select
-							id="osType"
-							bind:value={osType}
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						>
-							<option value="linux">Linux</option>
-							<option value="windows">Windows</option>
-						</select>
-					</div>
-					<div>
-						<label for="osArch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Architecture
-						</label>
-						<select
-							id="osArch"
-							bind:value={osArch}
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						>
-							<option value="amd64">AMD64</option>
-							<option value="arm64">ARM64</option>
-						</select>
-					</div>
-					
-					<!-- Template Selection -->
-					<div class="col-span-2">
-						<label for="template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Runner Install Template
-						</label>
-						{#if loadingTemplates}
-							<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 flex items-center">
-								<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
-								<span class="text-sm text-gray-600 dark:text-gray-400">Loading templates...</span>
-							</div>
-						{:else if templates.length > 0}
-							<select
-								id="template"
-								bind:value={selectedTemplate}
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							>
-								{#each templates as template}
-									<option value={template.id}>
-										{template.name} {template.owner_id === 'system' ? '(System)' : ''}
-										{#if template.description} - {template.description}{/if}
-									</option>
-								{/each}
-							</select>
-							<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-								Templates define how the runner software is installed and configured.
-								Showing templates for {getEntityForgeType()} {osType}.
-							</p>
-						{:else}
-							<div class="w-full px-3 py-2 border border-yellow-300 dark:border-yellow-600 rounded-md bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200">
-								<p class="text-sm">No templates found for {getEntityForgeType()} {osType}.</p>
-								<p class="text-xs mt-1">
-									<a href={resolve('/templates')} class="text-yellow-700 dark:text-yellow-300 hover:underline">
-										Create a template first
-									</a> or proceed without a template to use default behavior.
-								</p>
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div>
-
-			<!-- Group 2: Runner Limits & Timing -->
-			<div class="space-y-4">
-				<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-					Runner Limits & Timing
-				</h3>
-				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-					<div>
-						<label for="minIdleRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Min Idle Runners
-						</label>
-						<input
-							id="minIdleRunners"
-							type="number"
-							bind:value={minIdleRunners}
-							min="0"
-							placeholder="0"
-							class="w-full px-3 py-2 border {validationError ? 'border-red-300 dark:border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="maxRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Max Runners
-						</label>
-						<input
-							id="maxRunners"
-							type="number"
-							bind:value={maxRunners}
-							min="1"
-							placeholder="10"
-							class="w-full px-3 py-2 border {validationError ? 'border-red-300 dark:border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="bootstrapTimeout" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Bootstrap Timeout (min)
-						</label>
-						<input
-							id="bootstrapTimeout"
-							type="number"
-							bind:value={runnerBootstrapTimeout}
-							min="1"
-							placeholder="20"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-				</div>
-			</div>
-
-			<!-- Group 3: Advanced Settings -->
-			<div class="space-y-4">
-				<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-					Advanced Settings
-				</h3>
-				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-					<div>
-						<label for="runnerPrefix" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Runner Prefix
-						</label>
-						<input
-							id="runnerPrefix"
-							type="text"
-							bind:value={runnerPrefix}
-							placeholder="garm"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="priority" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Priority
-						</label>
-						<input
-							id="priority"
-							type="number"
-							bind:value={priority}
-							min="1"
-							placeholder="100"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="githubRunnerGroup" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							GitHub Runner Group (optional)
-						</label>
-						<input
-							id="githubRunnerGroup"
-							type="text"
-							bind:value={githubRunnerGroup}
-							placeholder="Default group"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-				</div>
-
-				<!-- Tags -->
-				<div>
-					<fieldset>
-						<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Tags
-						</legend>
-					<div class="space-y-2">
-						<div class="flex">
-							<input
-								type="text"
-								bind:value={newTag}
-								on:keydown={handleTagKeydown}
-								placeholder="Enter a tag"
-								class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							/>
-							<button
-								type="button"
-								on:click={addTag}
-								class="px-3 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
-							>
-								Add
-							</button>
-						</div>
-						{#if tags.length > 0}
-							<div class="flex flex-wrap gap-2">
-								{#each tags as tag, index}
-									<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-										{tag}
-										<button
-											type="button"
-											on:click={() => removeTag(index)}
-											class="ml-1 h-4 w-4 rounded-full hover:bg-blue-200 dark:hover:bg-blue-800 flex items-center justify-center cursor-pointer"
-											aria-label="Remove tag {tag}"
-										>
-											<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-											</svg>
-										</button>
-									</span>
-								{/each}
-							</div>
-						{/if}
-					</div>
-					</fieldset>
-				</div>
-
-				<!-- Extra Specs -->
+			<!-- Scale Set Name (editable, only for scale sets) -->
+			{#if poolType === 'scaleset'}
 				<div>
-					<fieldset>
-						<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Extra Specs (JSON)
-						</legend>
-					<JsonEditor
-						bind:value={extraSpecs}
-						rows={4}
-						placeholder="{'{}'}"
-					/>
-					</fieldset>
-				</div>
-
-				<!-- Enabled Checkbox -->
-				<div class="flex items-center">
+					<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+						Scale Set Name
+					</label>
 					<input
-						id="enabled"
-						type="checkbox"
-						bind:checked={enabled}
-						class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
+						id="name"
+						type="text"
+						bind:value={name}
+						placeholder="e.g., my-scale-set"
+						class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
 					/>
-					<label for="enabled" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
-						Pool enabled
-					</label>
 				</div>
+			{/if}
 
-				<!-- Enable Shell Checkbox -->
-				<div class="space-y-2">
-					<div class="flex items-center">
-						<input
-							id="enableShell"
-							type="checkbox"
-							bind:checked={enableShell}
-							disabled={!entityAgentMode}
-							class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-						/>
-						<label for="enableShell" class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {!entityAgentMode ? 'opacity-50' : ''}">
-							Enable Shell
-						</label>
-						<div class="ml-2 relative group">
-							<svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-							</svg>
-							<div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 w-80 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
-								This enables remote shell in the GARM agent, allowing users to connect via garm-cli or web UI using websockets.
-								<div class="absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
-							</div>
-						</div>
-					</div>
-					{#if !entityAgentMode}
-						<div class="ml-6 flex items-start space-x-2 text-xs text-yellow-700 dark:text-yellow-400">
-							<svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-							</svg>
-							<span>
-								Shell access requires agent mode to be enabled on the {getEntityType(pool).toLowerCase()}.
-								<button
-									type="button"
-									on:click={() => showEntityUpdateModal = true}
-									class="underline hover:text-yellow-800 dark:hover:text-yellow-300 cursor-pointer"
-								>
-									Enable agent mode
-								</button>
-							</span>
-						</div>
-					{/if}
-				</div>
-			</div>
+			<!-- Image & OS Configuration -->
+			<RunnerConfigFields
+				bind:image
+				bind:flavor
+				bind:osType
+				bind:osArch
+				bind:selectedTemplate
+				{templates}
+				{loadingTemplates}
+				idPrefix="update-{poolType}"
+			/>
+
+			<!-- Runner Limits & Timing -->
+			<RunnerLimitsFields
+				bind:minIdleRunners
+				bind:maxRunners
+				bind:runnerBootstrapTimeout
+			/>
+
+			<!-- Advanced Settings -->
+			<RunnerAdvancedFields
+				bind:runnerPrefix
+				bind:priority
+				bind:githubRunnerGroup
+				bind:tags
+				bind:extraSpecs
+				bind:enabled
+				bind:enableShell
+				{entityAgentMode}
+				{enabledLabel}
+				showTags={isPool}
+				showPriority={isPool}
+				idPrefix="update-{poolType}"
+				on:enableAgentMode={() => showEntityUpdateModal = true}
+			/>
 
 			<!-- Action Buttons -->
 			<div class="flex justify-end space-x-3 pt-6 border-t border-gray-200 dark:border-gray-700">
@@ -660,7 +442,7 @@
 							Updating...
 						</div>
 					{:else}
-						Update Pool
+						{submitLabel}
 					{/if}
 				</button>
 			</div>
@@ -673,10 +455,10 @@
 	{@const entity = getEntity()}
 	{#if entity}
 		<UpdateEntityModal
-			entity={entity}
-			entityType={pool.repo_id ? 'repository' : pool.org_id ? 'organization' : pool.enterprise_id ? 'enterprise' : 'forge_instance'}
+			{entity}
+			entityType={getEntityTypeForModal()}
 			on:close={() => showEntityUpdateModal = false}
 			on:submit={(e) => handleEntityUpdate(e.detail)}
 		/>
 	{/if}
-{/if}
\ No newline at end of file
+{/if}
diff --git a/webapp/src/lib/components/UpdateScaleSetModal.svelte b/webapp/src/lib/components/UpdateScaleSetModal.svelte
index 2fa49a359..16177ce65 100644
--- a/webapp/src/lib/components/UpdateScaleSetModal.svelte
+++ b/webapp/src/lib/components/UpdateScaleSetModal.svelte
@@ -1,591 +1,19 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	import type { ScaleSet, CreateScaleSetParams, Template, Repository, Organization, Enterprise, UpdateEntityParams } from '$lib/api/generated/api.js';
-	import { resolve } from '$app/paths';
-	import Modal from './Modal.svelte';
-	import { extractAPIError } from '$lib/utils/apiError';
-	import JsonEditor from './JsonEditor.svelte';
-	import { garmApi } from '$lib/api/client.js';
-	import { eagerCache } from '$lib/stores/eager-cache.js';
-	import UpdateEntityModal from './UpdateEntityModal.svelte';
-
-	export let scaleSet: ScaleSet;
+	import { createEventDispatcher } from 'svelte';
+	import type { ScaleSet } from '$lib/api/generated/api.js';
+	import UpdatePoolModal from './UpdatePoolModal.svelte';
 
 	const dispatch = createEventDispatcher<{
 		close: void;
-		submit: Partial<CreateScaleSetParams>;
+		submit: any;
 	}>();
 
-	let loading = false;
-	let error = '';
-	let validationError = '';
-	let templates: Template[] = [];
-	let loadingTemplates = false;
-	let showEntityUpdateModal = false;
-
-	// Form fields - initialize with scale set values
-	let name = scaleSet.name || '';
-	let image = scaleSet.image || '';
-	let flavor = scaleSet.flavor || '';
-	let maxRunners = scaleSet.max_runners;
-	let minIdleRunners = scaleSet.min_idle_runners;
-	let runnerBootstrapTimeout = scaleSet.runner_bootstrap_timeout;
-	let runnerPrefix = scaleSet.runner_prefix || '';
-	let osType = scaleSet.os_type || 'linux';
-	let osArch = scaleSet.os_arch || 'amd64';
-	let githubRunnerGroup = scaleSet['github-runner-group'] || '';
-	let enabled = scaleSet.enabled;
-	let enableShell = scaleSet.enable_shell ?? false;
-	let extraSpecs = '{}';
-	let selectedTemplate: number | undefined = (scaleSet as any).template_id;
-	function getEntityForgeType(): string | null {
-		// First check if the scale set itself has an endpoint (which it does)
-		if (scaleSet.endpoint?.endpoint_type) {
-			return scaleSet.endpoint.endpoint_type;
-		}
-
-		// Fallback: Look up forge type from eager cache based on the scale set's entity
-		if (scaleSet.repo_id) {
-			const repo = $eagerCache.repositories.find(r => r.id === scaleSet.repo_id);
-			if (repo?.endpoint?.endpoint_type) {
-				return repo.endpoint.endpoint_type;
-			}
-		}
-		if (scaleSet.org_id) {
-			const org = $eagerCache.organizations.find(o => o.id === scaleSet.org_id);
-			if (org?.endpoint?.endpoint_type) {
-				return org.endpoint.endpoint_type;
-			}
-		}
-		if (scaleSet.enterprise_id) {
-			const enterprise = $eagerCache.enterprises.find(e => e.id === scaleSet.enterprise_id);
-			if (enterprise?.endpoint?.endpoint_type) {
-				return enterprise.endpoint.endpoint_type;
-			}
-		}
-		return null;
-	}
-
-	function getEntityAgentMode(cache: typeof $eagerCache): boolean {
-		// Look up agent_mode from eager cache based on the scale set's entity
-		if (scaleSet.repo_id) {
-			const repo = cache.repositories.find(r => r.id === scaleSet.repo_id);
-			return repo?.agent_mode ?? false;
-		}
-		if (scaleSet.org_id) {
-			const org = cache.organizations.find(o => o.id === scaleSet.org_id);
-			return org?.agent_mode ?? false;
-		}
-		if (scaleSet.enterprise_id) {
-			const enterprise = cache.enterprises.find(e => e.id === scaleSet.enterprise_id);
-			return enterprise?.agent_mode ?? false;
-		}
-		return false;
-	}
-
-	function getEntityType(): string {
-		if (scaleSet.repo_id) return 'repository';
-		if (scaleSet.org_id) return 'organization';
-		if (scaleSet.enterprise_id) return 'enterprise';
-		return 'entity';
-	}
-
-	// Reactive statement to check agent mode
-	$: entityAgentMode = getEntityAgentMode($eagerCache);
-	$: if (!entityAgentMode) {
-		// Disable shell if agent mode is not enabled on entity
-		enableShell = false;
-	}
-
-	async function handleEntityUpdate(params: UpdateEntityParams) {
-		try {
-			if (scaleSet.repo_id) {
-				await garmApi.updateRepository(scaleSet.repo_id, params);
-			} else if (scaleSet.org_id) {
-				await garmApi.updateOrganization(scaleSet.org_id, params);
-			} else if (scaleSet.enterprise_id) {
-				await garmApi.updateEnterprise(scaleSet.enterprise_id, params);
-			}
-
-			// The eager cache store will be updated via WebSocket event
-			showEntityUpdateModal = false;
-		} catch (err) {
-			error = extractAPIError(err);
-			showEntityUpdateModal = false;
-		}
-	}
-
-	function getEntity(): Repository | Organization | Enterprise | null {
-		if (scaleSet.repo_id) {
-			return $eagerCache.repositories.find(r => r.id === scaleSet.repo_id) || null;
-		} else if (scaleSet.org_id) {
-			return $eagerCache.organizations.find(o => o.id === scaleSet.org_id) || null;
-		} else if (scaleSet.enterprise_id) {
-			return $eagerCache.enterprises.find(e => e.id === scaleSet.enterprise_id) || null;
-		}
-		return null;
-	}
-
-	async function loadTemplates() {
-		try {
-			loadingTemplates = true;
-			
-			// Get forge type from the scale set's entity
-			const forgeType = getEntityForgeType();
-			if (!forgeType) {
-				templates = [];
-				return;
-			}
-			
-			templates = await garmApi.listTemplates(osType, undefined, forgeType);
-			
-			// Auto-select system template if no template is currently selected, or if templates change
-			if (!selectedTemplate || !templates.find(t => t.id === selectedTemplate)) {
-				const systemTemplate = templates.find(t => t.owner_id === 'system');
-				if (systemTemplate) {
-					selectedTemplate = systemTemplate.id;
-				} else if (templates.length > 0) {
-					// If no system template, select the first available template
-					selectedTemplate = templates[0].id;
-				}
-			}
-		} catch (err) {
-			error = extractAPIError(err);
-		} finally {
-			loadingTemplates = false;
-		}
-	}
-
-	// Initialize extra specs and load templates
-	onMount(() => {
-		if (scaleSet.extra_specs) {
-			try {
-				// If scale set extra_specs is already an object, stringify it with formatting
-				if (typeof scaleSet.extra_specs === 'object') {
-					extraSpecs = JSON.stringify(scaleSet.extra_specs, null, 2);
-				} else {
-					// If it's a string, try to parse and reformat
-					const parsed = JSON.parse(scaleSet.extra_specs as string);
-					extraSpecs = JSON.stringify(parsed, null, 2);
-				}
-			} catch (e) {
-				// If parsing fails, use as-is or default to empty object
-				extraSpecs = (scaleSet.extra_specs as unknown as string) || '{}';
-			}
-		}
-		
-		// Load templates for the current configuration
-		loadTemplates();
-	});
-
-	// Reactive statements
-	$: if (osType) {
-		// Reload templates when OS type changes - selection will be auto-handled in loadTemplates
-		loadTemplates();
-	}
-
-	// Validation reactive statement
-	$: {
-		if (minIdleRunners !== null && minIdleRunners !== undefined && maxRunners !== null && maxRunners !== undefined && minIdleRunners > maxRunners) {
-			validationError = 'Min idle runners cannot be greater than max runners';
-		} else {
-			validationError = '';
-		}
-	}
-
-	async function handleSubmit() {
-		try {
-			loading = true;
-			error = '';
-
-			// Client-side validation
-			if (validationError) {
-				throw new Error(validationError);
-			}
-
-			// Validate extra specs JSON
-			let parsedExtraSpecs: any = {};
-			if (extraSpecs.trim()) {
-				try {
-					parsedExtraSpecs = JSON.parse(extraSpecs);
-				} catch (e) {
-					throw new Error('Invalid JSON in extra specs');
-				}
-			}
-
-			const params: Partial<CreateScaleSetParams> = {
-				name: name !== scaleSet.name ? name : undefined,
-				image: image !== scaleSet.image ? image : undefined,
-				flavor: flavor !== scaleSet.flavor ? flavor : undefined,
-				max_runners: maxRunners !== scaleSet.max_runners ? maxRunners : undefined,
-				min_idle_runners: minIdleRunners !== scaleSet.min_idle_runners ? minIdleRunners : undefined,
-				runner_bootstrap_timeout: runnerBootstrapTimeout !== scaleSet.runner_bootstrap_timeout ? runnerBootstrapTimeout : undefined,
-				runner_prefix: runnerPrefix !== scaleSet.runner_prefix ? runnerPrefix : undefined,
-				os_type: osType !== scaleSet.os_type ? osType as any : undefined,
-				os_arch: osArch !== scaleSet.os_arch ? osArch as any : undefined,
-				'github-runner-group': githubRunnerGroup !== scaleSet['github-runner-group'] ? githubRunnerGroup || undefined : undefined,
-				enabled: enabled !== scaleSet.enabled ? enabled : undefined,
-				enable_shell: enableShell !== scaleSet.enable_shell ? enableShell : undefined,
-				extra_specs: extraSpecs.trim() !== JSON.stringify(scaleSet.extra_specs || {}, null, 2).trim() ? parsedExtraSpecs : undefined,
-				template_id: selectedTemplate !== (scaleSet as any).template_id ? selectedTemplate : undefined
-			};
-
-			// Remove undefined values
-			Object.keys(params).forEach(key => {
-				if (params[key as keyof Partial<CreateScaleSetParams>] === undefined) {
-					delete params[key as keyof Partial<CreateScaleSetParams>];
-				}
-			});
-
-			dispatch('submit', params);
-		} catch (err) {
-			error = extractAPIError(err);
-		} finally {
-			loading = false;
-		}
-	}
+	export let pool: ScaleSet;
 </script>
 
-<Modal on:close={() => dispatch('close')}>
-	<div class="max-w-6xl w-full max-h-[90vh] overflow-y-auto">
-		<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-			<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-				Update Scale Set {scaleSet.name}
-			</h2>
-		</div>
-
-		<form on:submit|preventDefault={handleSubmit} class="p-6 space-y-6">
-			{#if error}
-				<div class="rounded-md bg-red-50 dark:bg-red-900 p-4">
-					<p class="text-sm font-medium text-red-800 dark:text-red-200">{error}</p>
-				</div>
-			{/if}
-			
-			{#if validationError}
-				<div class="rounded-md bg-yellow-50 dark:bg-yellow-900 p-4">
-					<p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">{validationError}</p>
-				</div>
-			{/if}
-
-			<!-- Scale Set Info (Read-only) -->
-			<div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg">
-				<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Scale Set Information</h3>
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-					<div class="flex">
-						<span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">Provider:</span>
-						<span class="text-gray-900 dark:text-white">{scaleSet.provider_name}</span>
-					</div>
-					<div class="flex">
-						<span class="text-gray-500 dark:text-gray-400 w-16 flex-shrink-0">Entity:</span>
-						<span class="text-gray-900 dark:text-white">
-							{#if scaleSet.repo_name}Repository: {scaleSet.repo_name}
-							{:else if scaleSet.org_name}Organization: {scaleSet.org_name}
-							{:else if scaleSet.enterprise_name}Enterprise: {scaleSet.enterprise_name}
-							{:else}Unknown Entity{/if}
-						</span>
-					</div>
-				</div>
-			</div>
-
-			<!-- Scale Set Name -->
-			<div>
-				<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-					Name
-				</label>
-				<input
-					id="name"
-					type="text"
-					bind:value={name}
-					placeholder="e.g., my-scale-set"
-					class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-				/>
-			</div>
-
-			<!-- Group 1: Image & OS Configuration -->
-			<div class="space-y-4">
-				<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-					Image & OS Configuration
-				</h3>
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<div>
-						<label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Image
-						</label>
-						<input
-							id="image"
-							type="text"
-							bind:value={image}
-							placeholder="e.g., ubuntu:22.04"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="flavor" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Flavor
-						</label>
-						<input
-							id="flavor"
-							type="text"
-							bind:value={flavor}
-							placeholder="e.g., default"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="osType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							OS Type
-						</label>
-						<select
-							id="osType"
-							bind:value={osType}
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						>
-							<option value="linux">Linux</option>
-							<option value="windows">Windows</option>
-						</select>
-					</div>
-					<div>
-						<label for="osArch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Architecture
-						</label>
-						<select
-							id="osArch"
-							bind:value={osArch}
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						>
-							<option value="amd64">AMD64</option>
-							<option value="arm64">ARM64</option>
-						</select>
-					</div>
-					
-					<!-- Template Selection -->
-					<div class="col-span-2">
-						<label for="template" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Runner Install Template
-						</label>
-						{#if loadingTemplates}
-							<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 flex items-center">
-								<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
-								<span class="text-sm text-gray-600 dark:text-gray-400">Loading templates...</span>
-							</div>
-						{:else if templates.length > 0}
-							<select
-								id="template"
-								bind:value={selectedTemplate}
-								class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-							>
-								{#each templates as template}
-									<option value={template.id}>
-										{template.name} {template.owner_id === 'system' ? '(System)' : ''}
-										{#if template.description} - {template.description}{/if}
-									</option>
-								{/each}
-							</select>
-							<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-								Templates define how the runner software is installed and configured.
-								Showing templates for {getEntityForgeType()} {osType}.
-							</p>
-						{:else}
-							<div class="w-full px-3 py-2 border border-yellow-300 dark:border-yellow-600 rounded-md bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200">
-								<p class="text-sm">No templates found for {getEntityForgeType()} {osType}.</p>
-								<p class="text-xs mt-1">
-									<a href={resolve('/templates')} class="text-yellow-700 dark:text-yellow-300 hover:underline">
-										Create a template first
-									</a> or proceed without a template to use default behavior.
-								</p>
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div>
-
-			<!-- Group 2: Runner Limits & Timing -->
-			<div class="space-y-4">
-				<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-					Runner Limits & Timing
-				</h3>
-				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-					<div>
-						<label for="minIdleRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Min Idle Runners
-						</label>
-						<input
-							id="minIdleRunners"
-							type="number"
-							bind:value={minIdleRunners}
-							min="0"
-							placeholder="0"
-							class="w-full px-3 py-2 border {validationError ? 'border-red-300 dark:border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="maxRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Max Runners
-						</label>
-						<input
-							id="maxRunners"
-							type="number"
-							bind:value={maxRunners}
-							min="1"
-							placeholder="10"
-							class="w-full px-3 py-2 border {validationError ? 'border-red-300 dark:border-red-500' : 'border-gray-300 dark:border-gray-600'} rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="bootstrapTimeout" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Bootstrap Timeout (min)
-						</label>
-						<input
-							id="bootstrapTimeout"
-							type="number"
-							bind:value={runnerBootstrapTimeout}
-							min="1"
-							placeholder="20"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-				</div>
-			</div>
-
-			<!-- Group 3: Advanced Settings -->
-			<div class="space-y-4">
-				<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
-					Advanced Settings
-				</h3>
-				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<div>
-						<label for="runnerPrefix" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Runner Prefix
-						</label>
-						<input
-							id="runnerPrefix"
-							type="text"
-							bind:value={runnerPrefix}
-							placeholder="garm"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-					<div>
-						<label for="githubRunnerGroup" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							GitHub Runner Group (optional)
-						</label>
-						<input
-							id="githubRunnerGroup"
-							type="text"
-							bind:value={githubRunnerGroup}
-							placeholder="Default group"
-							class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-						/>
-					</div>
-				</div>
-
-				<!-- Extra Specs -->
-				<div>
-					<fieldset>
-						<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-							Extra Specs (JSON)
-						</legend>
-					<JsonEditor
-						bind:value={extraSpecs}
-						rows={4}
-						placeholder="{'{}'}"
-					/>
-					</fieldset>
-				</div>
-
-				<!-- Enabled Checkbox -->
-				<div class="flex items-center">
-					<input
-						id="enabled"
-						type="checkbox"
-						bind:checked={enabled}
-						class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
-					/>
-					<label for="enabled" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
-						Scale set enabled
-					</label>
-				</div>
-
-				<!-- Enable Shell Checkbox -->
-				<div class="space-y-2">
-					<div class="flex items-center">
-						<input
-							id="enableShell"
-							type="checkbox"
-							bind:checked={enableShell}
-							disabled={!entityAgentMode}
-							class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-						/>
-						<label for="enableShell" class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {!entityAgentMode ? 'opacity-50' : ''}">
-							Enable Shell
-						</label>
-						<div class="ml-2 relative group">
-							<svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-							</svg>
-							<div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 w-80 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
-								This enables remote shell in the GARM agent, allowing users to connect via garm-cli or web UI using websockets.
-								<div class="absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
-							</div>
-						</div>
-					</div>
-					{#if !entityAgentMode}
-						<div class="ml-6 flex items-start space-x-2 text-xs text-yellow-700 dark:text-yellow-400">
-							<svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-							</svg>
-							<span>
-								Shell access requires agent mode to be enabled on the {getEntityType()}.
-								<button
-									type="button"
-									on:click={() => showEntityUpdateModal = true}
-									class="underline hover:text-yellow-800 dark:hover:text-yellow-300 cursor-pointer"
-								>
-									Enable agent mode
-								</button>
-							</span>
-						</div>
-					{/if}
-				</div>
-			</div>
-
-			<!-- Action Buttons -->
-			<div class="flex justify-end space-x-3 pt-6 border-t border-gray-200 dark:border-gray-700">
-				<button
-					type="button"
-					on:click={() => dispatch('close')}
-					class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
-				>
-					Cancel
-				</button>
-				<button
-					type="submit"
-					disabled={loading || validationError !== ''}
-					class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-				>
-					{#if loading}
-						<div class="flex items-center">
-							<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-							Updating...
-						</div>
-					{:else}
-						Update Scale Set
-					{/if}
-				</button>
-			</div>
-		</form>
-	</div>
-</Modal>
-
-<!-- Nested Entity Update Modals -->
-{#if showEntityUpdateModal}
-	{@const entity = getEntity()}
-	{#if entity}
-		<UpdateEntityModal
-			entity={entity}
-			entityType={scaleSet.repo_id ? 'repository' : scaleSet.org_id ? 'organization' : 'enterprise'}
-			on:close={() => showEntityUpdateModal = false}
-			on:submit={(e) => handleEntityUpdate(e.detail)}
-		/>
-	{/if}
-{/if}
\ No newline at end of file
+<UpdatePoolModal
+	{pool}
+	poolType="scaleset"
+	on:close={() => dispatch('close')}
+	on:submit={(e) => dispatch('submit', e.detail)}
+/>
diff --git a/webapp/src/lib/components/WebhookSection.svelte b/webapp/src/lib/components/WebhookSection.svelte
index b4085f795..5ff2a8333 100644
--- a/webapp/src/lib/components/WebhookSection.svelte
+++ b/webapp/src/lib/components/WebhookSection.svelte
@@ -6,7 +6,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { extractAPIError } from '$lib/utils/apiError';
 
-	export let entityType: 'repository' | 'organization';
+	export let entityType: 'repository' | 'organization' | 'forge_instance';
 	export let entityId: string;
 	export let entityName: string;
 
@@ -25,8 +25,10 @@
 			checking = true;
 			if (entityType === 'repository') {
 				webhookInfo = await garmApi.getRepositoryWebhookInfo(entityId);
-			} else {
+			} else if (entityType === 'organization') {
 				webhookInfo = await garmApi.getOrganizationWebhookInfo(entityId);
+			} else if (entityType === 'forge_instance') {
+				webhookInfo = await garmApi.getForgeInstanceWebhookInfo(entityId);
 			}
 		} catch (err) {
 			// If we get a 404, it means no webhook is installed
@@ -49,8 +51,10 @@
 			
 			if (entityType === 'repository') {
 				await garmApi.installRepositoryWebhook(entityId);
-			} else {
+			} else if (entityType === 'organization') {
 				await garmApi.installOrganizationWebhook(entityId);
+			} else if (entityType === 'forge_instance') {
+				await garmApi.installForgeInstanceWebhook(entityId);
 			}
 			
 			toastStore.success(
@@ -79,8 +83,10 @@
 			
 			if (entityType === 'repository') {
 				await garmApi.uninstallRepositoryWebhook(entityId);
-			} else {
+			} else if (entityType === 'organization') {
 				await garmApi.uninstallOrganizationWebhook(entityId);
+			} else if (entityType === 'forge_instance') {
+				await garmApi.uninstallForgeInstanceWebhook(entityId);
 			}
 			
 			toastStore.success(
diff --git a/webapp/src/lib/components/WizardModal.svelte b/webapp/src/lib/components/WizardModal.svelte
new file mode 100644
index 000000000..119294ae1
--- /dev/null
+++ b/webapp/src/lib/components/WizardModal.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import Modal from './Modal.svelte';
+
+	const dispatch = createEventDispatcher<{
+		close: void;
+		submit: void;
+		stepChange: number;
+	}>();
+
+	export let title: string;
+	export let steps: Array<{ title: string; description: string }>;
+	export let currentStep: number = 0;
+	export let canAdvance: boolean = false;
+	export let loading: boolean = false;
+	export let submitLabel: string = 'Create';
+	export let error: string = '';
+
+	$: isLastStep = currentStep === steps.length - 1;
+
+	function goBack() {
+		if (currentStep > 0) {
+			currentStep -= 1;
+			dispatch('stepChange', currentStep);
+		}
+	}
+
+	function goNext() {
+		if (!isLastStep && canAdvance) {
+			currentStep += 1;
+			dispatch('stepChange', currentStep);
+		}
+	}
+
+	function handleSubmit() {
+		if (isLastStep && canAdvance && !loading) {
+			dispatch('submit');
+		}
+	}
+</script>
+
+<Modal on:close={() => dispatch('close')}>
+	<div class="min-w-[min(40rem,95vw)] max-w-4xl max-h-[90vh] overflow-y-auto transition-all duration-200 ease-in-out">
+		<!-- Header -->
+		<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+			<h2 class="text-xl font-semibold text-gray-900 dark:text-white">{title}</h2>
+		</div>
+
+		<!-- Stepper -->
+		<div class="px-6 pt-6 pb-2">
+			<nav aria-label="Wizard progress">
+				<ol class="flex items-center w-full">
+					{#each steps as step, i}
+						<li class="flex items-center {i < steps.length - 1 ? 'flex-1' : ''}">
+							<div class="flex flex-col items-center">
+								{#if i < currentStep}
+									<!-- Completed -->
+									<div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 shrink-0">
+										<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+										</svg>
+									</div>
+								{:else if i === currentStep}
+									<!-- Current -->
+									<div class="flex items-center justify-center w-10 h-10 rounded-full border-2 border-blue-600 bg-blue-50 dark:bg-blue-900/30 shrink-0">
+										<span class="text-sm font-bold text-blue-600 dark:text-blue-400">{i + 1}</span>
+									</div>
+								{:else}
+									<!-- Pending -->
+									<div class="flex items-center justify-center w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 shrink-0">
+										<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{i + 1}</span>
+									</div>
+								{/if}
+								<!-- Label -->
+								<div class="mt-2 text-center min-w-[80px]">
+									<p class="text-sm font-medium {i <= currentStep ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'}">
+										{step.title}
+									</p>
+									<p class="hidden md:block text-xs {i <= currentStep ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500'} mt-0.5">
+										{step.description}
+									</p>
+								</div>
+							</div>
+							<!-- Connector line -->
+							{#if i < steps.length - 1}
+								<div class="flex-1 h-0.5 mx-4 mt-[-2rem] {i < currentStep ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}"></div>
+							{/if}
+						</li>
+					{/each}
+				</ol>
+			</nav>
+		</div>
+
+		<!-- Error -->
+		{#if error}
+			<div class="mx-6 mt-4 rounded-md bg-red-50 dark:bg-red-900 p-4">
+				<p class="text-sm font-medium text-red-800 dark:text-red-200">{error}</p>
+			</div>
+		{/if}
+
+		<!-- Content area -->
+		<div class="p-6">
+			{#if currentStep === 0}
+				<div transition:slide={{ duration: 200 }}>
+					<slot name="step-0" />
+				</div>
+			{/if}
+			{#if currentStep === 1}
+				<div transition:slide={{ duration: 200 }}>
+					<slot name="step-1" />
+				</div>
+			{/if}
+			{#if currentStep === 2}
+				<div transition:slide={{ duration: 200 }}>
+					<slot name="step-2" />
+				</div>
+			{/if}
+			{#if currentStep === 3}
+				<div transition:slide={{ duration: 200 }}>
+					<slot name="step-3" />
+				</div>
+			{/if}
+			{#if currentStep === 4}
+				<div transition:slide={{ duration: 200 }}>
+					<slot name="step-4" />
+				</div>
+			{/if}
+		</div>
+
+		<!-- Footer -->
+		<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-between">
+			<button
+				type="button"
+				on:click={() => dispatch('close')}
+				class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
+			>
+				Cancel
+			</button>
+			<div class="flex space-x-3">
+				{#if currentStep > 0}
+					<button
+						type="button"
+						on:click={goBack}
+						class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
+					>
+						Back
+					</button>
+				{/if}
+				{#if !isLastStep}
+					<button
+						type="button"
+						on:click={goNext}
+						disabled={!canAdvance}
+						class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+					>
+						Next
+					</button>
+				{:else}
+					<button
+						type="button"
+						on:click={handleSubmit}
+						disabled={!canAdvance || loading}
+						class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+					>
+						{#if loading}
+							<div class="flex items-center">
+								<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+								Creating...
+							</div>
+						{:else}
+							{submitLabel}
+						{/if}
+					</button>
+				{/if}
+			</div>
+		</div>
+	</div>
+</Modal>
diff --git a/webapp/src/lib/components/fields/RunnerAdvancedFields.svelte b/webapp/src/lib/components/fields/RunnerAdvancedFields.svelte
new file mode 100644
index 000000000..f2ff21393
--- /dev/null
+++ b/webapp/src/lib/components/fields/RunnerAdvancedFields.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import TagsField from './TagsField.svelte';
+	import JsonEditor from '../JsonEditor.svelte';
+
+	const dispatch = createEventDispatcher<{
+		enableAgentMode: void;
+	}>();
+
+	export let runnerPrefix: string = 'garm';
+	export let priority: number = 100;
+	export let githubRunnerGroup: string = '';
+	export let tags: string[] = [];
+	export let extraSpecs: string = '{}';
+	export let enabled: boolean = true;
+	export let enableShell: boolean = false;
+	export let entityAgentMode: boolean = false;
+	export let idPrefix: string = '';
+	export let enabledLabel: string = 'Enable pool immediately';
+	export let showTags: boolean = true;
+	export let showPriority: boolean = true;
+
+	$: if (!entityAgentMode) {
+		enableShell = false;
+	}
+
+	function inputId(name: string): string {
+		return idPrefix ? `${idPrefix}-${name}` : name;
+	}
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
+		Advanced Settings
+	</h3>
+	<div class="grid grid-cols-1 {showPriority ? 'md:grid-cols-3' : 'md:grid-cols-2'} gap-4">
+		<div>
+			<label for={inputId('runnerPrefix')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Runner Prefix
+			</label>
+			<input
+				id={inputId('runnerPrefix')}
+				type="text"
+				bind:value={runnerPrefix}
+				placeholder="garm"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+		{#if showPriority}
+		<div>
+			<label for={inputId('priority')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Priority
+			</label>
+			<input
+				id={inputId('priority')}
+				type="number"
+				bind:value={priority}
+				min="1"
+				placeholder="100"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+		{/if}
+		<div>
+			<label for={inputId('githubRunnerGroup')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				GitHub Runner Group (optional)
+			</label>
+			<input
+				id={inputId('githubRunnerGroup')}
+				type="text"
+				bind:value={githubRunnerGroup}
+				placeholder="Default group"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+	</div>
+
+	<!-- Tags -->
+	{#if showTags}
+	<TagsField bind:tags />
+	{/if}
+
+	<!-- Extra Specs -->
+	<fieldset>
+		<legend class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+			Extra Specs (JSON)
+		</legend>
+		<JsonEditor
+			bind:value={extraSpecs}
+			rows={4}
+			placeholder="{'{}'}"
+		/>
+	</fieldset>
+
+	<!-- Enabled Checkbox -->
+	<div class="flex items-center">
+		<input
+			id={inputId('enabled')}
+			type="checkbox"
+			bind:checked={enabled}
+			class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded"
+		/>
+		<label for={inputId('enabled')} class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+			{enabledLabel}
+		</label>
+	</div>
+
+	<!-- Enable Shell Checkbox -->
+	<div class="space-y-2">
+		<div class="flex items-center">
+			<input
+				id={inputId('enableShell')}
+				type="checkbox"
+				bind:checked={enableShell}
+				disabled={!entityAgentMode}
+				class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+			/>
+			<label for={inputId('enableShell')} class="ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300 {!entityAgentMode ? 'opacity-50' : ''}">
+				Enable Shell
+			</label>
+			<div class="ml-2 relative group">
+				<svg class="w-4 h-4 text-gray-400 cursor-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+				</svg>
+				<div class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 w-80 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+					This enables remote shell in the GARM agent, allowing users to connect via garm-cli or web UI using websockets.
+					<div class="absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
+				</div>
+			</div>
+		</div>
+		{#if !entityAgentMode}
+			<div class="ml-6 flex items-start space-x-2 text-xs text-yellow-700 dark:text-yellow-400">
+				<svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+				</svg>
+				<span>
+					Shell access requires agent mode to be enabled on the entity.
+					<button
+						type="button"
+						on:click={() => dispatch('enableAgentMode')}
+						class="underline hover:text-yellow-800 dark:hover:text-yellow-300 cursor-pointer"
+					>
+						Enable agent mode
+					</button>
+				</span>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/webapp/src/lib/components/fields/RunnerConfigFields.svelte b/webapp/src/lib/components/fields/RunnerConfigFields.svelte
new file mode 100644
index 000000000..1bb6b288c
--- /dev/null
+++ b/webapp/src/lib/components/fields/RunnerConfigFields.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { Template } from '$lib/api/generated/api.js';
+
+	export let image: string = '';
+	export let flavor: string = '';
+	export let osType: string = 'linux';
+	export let osArch: string = 'amd64';
+	export let selectedTemplate: number | undefined = undefined;
+	export let templates: Template[] = [];
+	export let loadingTemplates: boolean = false;
+	export let idPrefix: string = '';
+
+	function inputId(name: string): string {
+		return idPrefix ? `${idPrefix}-${name}` : name;
+	}
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
+		Image & OS Configuration
+	</h3>
+	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+		<div>
+			<label for={inputId('image')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Image <span class="text-red-500">*</span>
+			</label>
+			<input
+				id={inputId('image')}
+				type="text"
+				bind:value={image}
+				required
+				placeholder="e.g., ubuntu:22.04"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+		<div>
+			<label for={inputId('flavor')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Flavor <span class="text-red-500">*</span>
+			</label>
+			<input
+				id={inputId('flavor')}
+				type="text"
+				bind:value={flavor}
+				required
+				placeholder="e.g., default"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+		<div>
+			<label for={inputId('osType')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				OS Type
+			</label>
+			<select
+				id={inputId('osType')}
+				bind:value={osType}
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			>
+				<option value="linux">Linux</option>
+				<option value="windows">Windows</option>
+			</select>
+		</div>
+		<div>
+			<label for={inputId('osArch')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Architecture
+			</label>
+			<select
+				id={inputId('osArch')}
+				bind:value={osArch}
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			>
+				<option value="amd64">AMD64</option>
+				<option value="arm64">ARM64</option>
+			</select>
+		</div>
+	</div>
+
+	<!-- Template Selection -->
+	<div>
+		<label for={inputId('template')} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+			Runner Install Template
+		</label>
+		{#if loadingTemplates}
+			<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 flex items-center">
+				<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
+				<span class="text-sm text-gray-600 dark:text-gray-400">Loading templates...</span>
+			</div>
+		{:else if templates.length > 0}
+			<select
+				id={inputId('template')}
+				bind:value={selectedTemplate}
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			>
+				{#each templates as template}
+					<option value={template.id}>
+						{template.name} {template.owner_id === 'system' ? '(System)' : ''}
+						{#if template.description} - {template.description}{/if}
+					</option>
+				{/each}
+			</select>
+			<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+				Templates define how the runner software is installed and configured.
+			</p>
+		{:else}
+			<div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
+				<p class="text-sm">No templates available</p>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/webapp/src/lib/components/fields/RunnerLimitsFields.svelte b/webapp/src/lib/components/fields/RunnerLimitsFields.svelte
new file mode 100644
index 000000000..6f629d360
--- /dev/null
+++ b/webapp/src/lib/components/fields/RunnerLimitsFields.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	export let minIdleRunners: number | undefined = undefined;
+	export let maxRunners: number | undefined = undefined;
+	export let runnerBootstrapTimeout: number | undefined = undefined;
+</script>
+
+<div class="space-y-4">
+	<h3 class="text-lg font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-gray-700 pb-2">
+		Runner Limits & Timing
+	</h3>
+	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+		<div>
+			<label for="minIdleRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Min Idle Runners
+			</label>
+			<input
+				id="minIdleRunners"
+				type="number"
+				bind:value={minIdleRunners}
+				min="0"
+				placeholder="0"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+		<div>
+			<label for="maxRunners" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Max Runners
+			</label>
+			<input
+				id="maxRunners"
+				type="number"
+				bind:value={maxRunners}
+				min="1"
+				placeholder="10"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+		<div>
+			<label for="bootstrapTimeout" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+				Bootstrap Timeout (min)
+			</label>
+			<input
+				id="bootstrapTimeout"
+				type="number"
+				bind:value={runnerBootstrapTimeout}
+				min="1"
+				placeholder="20"
+				class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+		</div>
+	</div>
+</div>
diff --git a/webapp/src/lib/components/fields/TagsField.svelte b/webapp/src/lib/components/fields/TagsField.svelte
new file mode 100644
index 000000000..991673e7b
--- /dev/null
+++ b/webapp/src/lib/components/fields/TagsField.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	export let tags: string[] = [];
+	export let label: string = 'Tags';
+	export let placeholder: string = 'Enter a tag';
+	export let required: boolean = false;
+
+	let newTag = '';
+
+	function addTag() {
+		if (newTag.trim() && !tags.includes(newTag.trim())) {
+			tags = [...tags, newTag.trim()];
+			newTag = '';
+		}
+	}
+
+	function removeTag(index: number) {
+		tags = tags.filter((_, i) => i !== index);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			addTag();
+		}
+	}
+</script>
+
+<div>
+	<label for="tag-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+		{label}{#if required}<span class="text-red-500"> *</span>{/if}
+	</label>
+	<div class="space-y-2">
+		<div class="flex">
+			<input
+				id="tag-input"
+				type="text"
+				bind:value={newTag}
+				on:keydown={handleKeydown}
+				{placeholder}
+				class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+			/>
+			<button
+				type="button"
+				on:click={addTag}
+				class="px-3 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
+			>
+				Add
+			</button>
+		</div>
+		{#if tags.length > 0}
+			<div class="flex flex-wrap gap-2">
+				{#each tags as tag, index}
+					<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
+						{tag}
+						<button
+							type="button"
+							on:click={() => removeTag(index)}
+							aria-label={`Remove tag ${tag}`}
+							class="ml-1 h-4 w-4 rounded-full hover:bg-blue-200 dark:hover:bg-blue-800 flex items-center justify-center cursor-pointer"
+						>
+							<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+							</svg>
+						</button>
+					</span>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/webapp/src/lib/components/forms/EntityForm.svelte b/webapp/src/lib/components/forms/EntityForm.svelte
index d640c9660..51bbebef5 100644
--- a/webapp/src/lib/components/forms/EntityForm.svelte
+++ b/webapp/src/lib/components/forms/EntityForm.svelte
@@ -30,6 +30,8 @@
 
 	// Entity type selector
 	export let showEntityTypeSelector = false;
+	// When true, only show the entity type selector buttons (no form fields below)
+	export let showEntityTypeSelectorOnly = false;
 
 	export let idPrefix = '';
 
@@ -101,28 +103,40 @@
 				<p class="text-sm font-medium {entityType === 'organization' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-white'}">Organization</p>
 			</button>
 
-			<button
-				type="button"
-				on:click={() => { if (forgeType !== 'gitea') { entityType = 'enterprise'; name = ''; owner = ''; } }}
-				disabled={forgeType === 'gitea'}
-				class="p-4 rounded-lg border-2 text-center transition-colors
-					{forgeType === 'gitea' ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
-					{entityType === 'enterprise'
-						? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
-						: 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'}"
-			>
-				<svg class="w-8 h-8 mx-auto mb-2 {entityType === 'enterprise' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
-				</svg>
-				<p class="text-sm font-medium {entityType === 'enterprise' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-white'}">Enterprise</p>
-				{#if forgeType === 'gitea'}
-					<p class="text-xs text-gray-400 mt-1">GitHub only</p>
-				{/if}
-			</button>
+			{#if forgeType === 'gitea'}
+				<button
+					type="button"
+					on:click={() => { entityType = 'forge_instance'; name = ''; owner = ''; }}
+					class="p-4 rounded-lg border-2 text-center transition-colors cursor-pointer
+						{entityType === 'forge_instance'
+							? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+							: 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'}"
+				>
+					<svg class="w-8 h-8 mx-auto mb-2 {entityType === 'forge_instance' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
+					</svg>
+					<p class="text-sm font-medium {entityType === 'forge_instance' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-white'}">Forge Instance</p>
+				</button>
+			{:else}
+				<button
+					type="button"
+					on:click={() => { entityType = 'enterprise'; name = ''; owner = ''; }}
+					class="p-4 rounded-lg border-2 text-center transition-colors cursor-pointer
+						{entityType === 'enterprise'
+							? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+							: 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'}"
+				>
+					<svg class="w-8 h-8 mx-auto mb-2 {entityType === 'enterprise' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+					</svg>
+					<p class="text-sm font-medium {entityType === 'enterprise' ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-white'}">Enterprise</p>
+				</button>
+			{/if}
 		</div>
 	</div>
 {/if}
 
+{#if !showEntityTypeSelectorOnly}
 <!-- Name / Owner fields -->
 {#if entityType === 'repository'}
 	<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -326,3 +340,4 @@
 	</div>
 {/if}
 {/if}
+{/if}
diff --git a/webapp/src/lib/components/setup/EntityStep.svelte b/webapp/src/lib/components/setup/EntityStep.svelte
index 54ca5a089..e8ec75b78 100644
--- a/webapp/src/lib/components/setup/EntityStep.svelte
+++ b/webapp/src/lib/components/setup/EntityStep.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { garmApi } from '$lib/api/client.js';
-	import type { CreateRepoParams, CreateOrgParams, CreateEnterpriseParams } from '$lib/api/generated/api.js';
+	import type { CreateRepoParams, CreateOrgParams, CreateEnterpriseParams, CreateForgeInstanceParams } from '$lib/api/generated/api.js';
 	import EntityForm from '../forms/EntityForm.svelte';
 	import { toastStore } from '$lib/stores/toast.js';
 	import { extractAPIError } from '$lib/utils/apiError';
 	import { getForgeIcon } from '$lib/utils/common.js';
+	import { eagerCache } from '$lib/stores/eager-cache.js';
 
 	export let endpointName: string;
 	export let forgeType: 'github' | 'gitea' | '';
@@ -29,14 +30,46 @@
 	let autoGenerateSecret = true;
 	let webhookSecret = '';
 
+	// Forge instance existence check
+	let existingForgeInstance: any = null;
+	let checkingForgeInstance = false;
+
+	async function checkExistingForgeInstance() {
+		checkingForgeInstance = true;
+		existingForgeInstance = null;
+		try {
+			const instances = await garmApi.listForgeInstances(endpointName);
+			if (instances.length > 0) {
+				existingForgeInstance = instances[0];
+			}
+		} catch {
+			// ignore — will create fresh
+		} finally {
+			checkingForgeInstance = false;
+		}
+	}
+
 	$: isFormValid = (() => {
 		if (!entityType) return false;
+		if (entityType === 'forge_instance') return !!existingForgeInstance || (!autoGenerateSecret ? !!webhookSecret.trim() : true);
 		if (!name.trim()) return false;
 		if (entityType === 'repository' && !owner.trim()) return false;
 		if (!autoGenerateSecret && !webhookSecret.trim()) return false;
 		return true;
 	})();
 
+	// Get live status from eager cache when available
+	$: cachedForgeInstance = existingForgeInstance
+		? $eagerCache.forgeInstances.find((fi: any) => fi.id === existingForgeInstance.id) || existingForgeInstance
+		: null;
+
+	// Check for existing forge instance when entity type changes
+	$: if (entityType === 'forge_instance') {
+		checkExistingForgeInstance();
+	} else {
+		existingForgeInstance = null;
+	}
+
 	async function handleCreate() {
 		creating = true;
 		error = '';
@@ -95,6 +128,35 @@
 				entityId = created.id!;
 				entityName = created.name!;
 				toastStore.success('Enterprise Created', `Enterprise ${entityName} has been created successfully.`);
+			} else if (entityType === 'forge_instance') {
+				// Use existing forge instance if found
+				if (existingForgeInstance) {
+					entityId = existingForgeInstance.id!;
+					entityName = existingForgeInstance.endpoint?.name || endpointName;
+					dispatch('complete', { entityType: 'forge_instance', entityId, entityName });
+					return;
+				}
+
+				const params: CreateForgeInstanceParams = {
+					endpoint_name: endpointName,
+					credentials_name: credentialsName,
+					webhook_secret: webhookSecret,
+					forge_type: 'gitea',
+					pool_balancer_type: poolBalancerType,
+					agent_mode: agentMode
+				};
+				const created = await garmApi.createForgeInstance(params);
+				entityId = created.id!;
+				entityName = created.endpoint?.name || endpointName;
+
+				if (installWebhook && created.id) {
+					try {
+						await garmApi.installForgeInstanceWebhook(created.id);
+					} catch (webhookError) {
+						toastStore.warning('Webhook Installation Failed', 'Forge instance created but webhook could not be installed. You can install it manually later.');
+					}
+				}
+				toastStore.success('Forge Instance Created', `Forge instance for ${entityName} has been created successfully.`);
 			}
 
 			dispatch('complete', { entityType: entityType as 'repository' | 'organization' | 'enterprise' | 'forge_instance', entityId, entityName });
@@ -110,7 +172,7 @@
 	<div>
 		<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Add Entity</h2>
 		<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-			Create a repository, organization, or enterprise to manage runners for.
+			Create a repository, organization, enterprise, or forge instance to manage runners for.
 		</p>
 	</div>
 
@@ -148,9 +210,35 @@
 			fixedCredentialsName={credentialsName}
 			showCredentialsSelector={false}
 			showEntityTypeSelector={true}
+			showEntityTypeSelectorOnly={entityType === 'forge_instance' && (checkingForgeInstance || !!existingForgeInstance)}
 			idPrefix="entity-"
 		/>
 
+		<!-- When forge instance exists, show status card (form fields are hidden via EntityForm's forge_instance logic) -->
+		{#if entityType === 'forge_instance' && checkingForgeInstance}
+			<div class="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+				<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600 mr-3"></div>
+				<span class="text-sm text-gray-600 dark:text-gray-300">Checking for existing forge instance...</span>
+			</div>
+		{:else if entityType === 'forge_instance' && cachedForgeInstance}
+			<div class="p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg">
+				<div class="flex items-center">
+					<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+						<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+					</svg>
+					<div>
+						<p class="text-sm font-medium text-green-800 dark:text-green-200">
+							Forge instance already exists
+						</p>
+						<p class="text-xs text-green-600 dark:text-green-400 mt-1">
+							Endpoint: {cachedForgeInstance.endpoint?.name || endpointName}
+							&middot; Credentials: {cachedForgeInstance.credentials_name || cachedForgeInstance.credentials?.name || 'N/A'}
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
+
 		<div class="flex justify-between pt-4">
 			<button type="button" on:click={() => dispatch('back')}
 				class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 hover:bg-gray-200 dark:hover:bg-gray-500 rounded-md cursor-pointer">
@@ -159,15 +247,17 @@
 			{#if entityType}
 				<button
 					type="submit"
-					disabled={!isFormValid || creating}
+					disabled={!isFormValid || creating || checkingForgeInstance}
 					class="px-6 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition-colors
-						{isFormValid && !creating ? 'bg-blue-600 hover:bg-blue-700 cursor-pointer' : 'bg-gray-400 cursor-not-allowed'}"
+						{isFormValid && !creating && !checkingForgeInstance ? 'bg-blue-600 hover:bg-blue-700 cursor-pointer' : 'bg-gray-400 cursor-not-allowed'}"
 				>
 					{#if creating}
 						<div class="flex items-center">
 							<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
 							Creating...
 						</div>
+					{:else if entityType === 'forge_instance' && existingForgeInstance}
+						Continue
 					{:else}
 						Create & Continue
 					{/if}
diff --git a/webapp/src/routes/forge-instances/[id]/+page.svelte b/webapp/src/routes/forge-instances/[id]/+page.svelte
index 50a9cfac1..97dea5389 100644
--- a/webapp/src/routes/forge-instances/[id]/+page.svelte
+++ b/webapp/src/routes/forge-instances/[id]/+page.svelte
@@ -12,6 +12,7 @@
 	import PoolsSection from '$lib/components/PoolsSection.svelte';
 	import InstancesSection from '$lib/components/InstancesSection.svelte';
 	import EventsSection from '$lib/components/EventsSection.svelte';
+	import WebhookSection from '$lib/components/WebhookSection.svelte';
 	import { getForgeIcon, updateEntityFields } from '$lib/utils/common.js';
 	import { websocketStore, type WebSocketEvent } from '$lib/stores/websocket.js';
 	import { toastStore } from '$lib/stores/toast.js';
@@ -293,6 +294,13 @@
 		<!-- Forge Instance Details -->
 		<EntityInformation entity={forgeInstance} entityType="forge_instance" />
 
+		<!-- Webhook -->
+		<WebhookSection
+			entityType="forge_instance"
+			entityId={forgeInstance.id || ''}
+			entityName={forgeInstance.endpoint?.name || ''}
+		/>
+
 		<!-- Pools -->
 		<PoolsSection
 			{pools}
diff --git a/webapp/src/routes/pools/[id]/+page.svelte b/webapp/src/routes/pools/[id]/+page.svelte
index 4e0d4467e..a646976b3 100644
--- a/webapp/src/routes/pools/[id]/+page.svelte
+++ b/webapp/src/routes/pools/[id]/+page.svelte
@@ -317,15 +317,15 @@
 					<dl class="space-y-4">
 						<div>
 							<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Max Runners</dt>
-							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{pool.max_runners}</dd>
+							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{pool.max_runners ?? 0}</dd>
 						</div>
 						<div>
 							<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Min Idle Runners</dt>
-							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{pool.min_idle_runners}</dd>
+							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{pool.min_idle_runners ?? 0}</dd>
 						</div>
 						<div>
 							<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Bootstrap Timeout</dt>
-							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{pool.runner_bootstrap_timeout} minutes</dd>
+							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{pool.runner_bootstrap_timeout ?? 20} minutes</dd>
 						</div>
 						<div>
 							<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Priority</dt>
diff --git a/webapp/src/routes/pools/page.integration.test.ts b/webapp/src/routes/pools/page.integration.test.ts
index 90dff90f2..7562ee6ce 100644
--- a/webapp/src/routes/pools/page.integration.test.ts
+++ b/webapp/src/routes/pools/page.integration.test.ts
@@ -20,7 +20,21 @@ vi.unmock('$lib/components/cells');
 vi.mock('$lib/api/client.js', () => ({
 	garmApi: {
 		updatePool: vi.fn(),
-		deletePool: vi.fn()
+		deletePool: vi.fn(),
+		listProviders: vi.fn().mockResolvedValue([]),
+		listTemplates: vi.fn().mockResolvedValue([]),
+		listRepositories: vi.fn().mockResolvedValue([]),
+		listOrganizations: vi.fn().mockResolvedValue([]),
+		listEnterprises: vi.fn().mockResolvedValue([]),
+		listForgeInstances: vi.fn().mockResolvedValue([]),
+		listEndpoints: vi.fn().mockResolvedValue([])
+	}
+}));
+
+vi.mock('$lib/stores/websocket.js', () => ({
+	websocketStore: {
+		subscribeToEntity: vi.fn(() => () => {}),
+		subscribe: vi.fn(() => () => {})
 	}
 }));
 
@@ -185,7 +199,9 @@ describe('Comprehensive Integration Tests for Pools Page', () => {
 			
 			// Click add button should show create modal
 			await fireEvent.click(addButton);
-			expect(screen.getByText(/Create Pool/i)).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByText(/Create.*Pool|Create.*Scale/i)).toBeInTheDocument();
+			});
 		});
 
 		it('should show success toast on pool creation', async () => {
@@ -514,7 +530,9 @@ describe('Comprehensive Integration Tests for Pools Page', () => {
 			// Should integrate create modal workflow
 			const addButton = screen.getByRole('button', { name: /Add Pool/i });
 			await fireEvent.click(addButton);
-			expect(screen.getByText(/Create Pool/i)).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByText(/Create.*Pool/i)).toBeInTheDocument();
+			});
 
 			// Modal should integrate with main page state
 			expect(screen.getByRole('heading', { name: 'Pools' })).toBeInTheDocument();
@@ -530,7 +548,9 @@ describe('Comprehensive Integration Tests for Pools Page', () => {
 			// Open modal
 			const addButton = screen.getByRole('button', { name: /Add Pool/i });
 			await fireEvent.click(addButton);
-			expect(screen.getByText(/Create Pool/i)).toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByText(/Create.*Pool/i)).toBeInTheDocument();
+			});
 
 			// Close modal (would be handled by modal's close event)
 			// State should be properly cleaned up
diff --git a/webapp/src/routes/scalesets/+page.svelte b/webapp/src/routes/scalesets/+page.svelte
index 98af72286..5f8b269f1 100644
--- a/webapp/src/routes/scalesets/+page.svelte
+++ b/webapp/src/routes/scalesets/+page.svelte
@@ -317,7 +317,7 @@
 
 {#if showUpdateModal && selectedScaleSet}
 	<UpdateScaleSetModal
-		scaleSet={selectedScaleSet}
+		pool={selectedScaleSet}
 		on:close={() => { showUpdateModal = false; selectedScaleSet = null; }}
 		on:submit={(e) => handleUpdateScaleSet(e.detail)}
 	/>
diff --git a/webapp/src/routes/scalesets/[id]/+page.svelte b/webapp/src/routes/scalesets/[id]/+page.svelte
index 1ecab3470..8c00ef766 100644
--- a/webapp/src/routes/scalesets/[id]/+page.svelte
+++ b/webapp/src/routes/scalesets/[id]/+page.svelte
@@ -317,15 +317,15 @@
 					<dl class="space-y-4">
 						<div>
 							<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Max Runners</dt>
-							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{scaleSet.max_runners}</dd>
+							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{scaleSet.max_runners ?? 0}</dd>
 						</div>
 						<div>
 							<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Min Idle Runners</dt>
-							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{scaleSet.min_idle_runners}</dd>
+							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{scaleSet.min_idle_runners ?? 0}</dd>
 						</div>
 						<div>
 							<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Bootstrap Timeout</dt>
-							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{scaleSet.runner_bootstrap_timeout} minutes</dd>
+							<dd class="mt-1 text-sm text-gray-900 dark:text-white">{scaleSet.runner_bootstrap_timeout ?? 20} minutes</dd>
 						</div>
 						<!-- Priority is not available in ScaleSet API -->
 						<div>
@@ -403,7 +403,7 @@
 <!-- Modals -->
 {#if showUpdateModal && scaleSet}
 	<UpdateScaleSetModal
-		{scaleSet}
+		pool={scaleSet}
 		on:close={() => showUpdateModal = false}
 		on:submit={(e) => handleUpdate(e.detail)}
 	/>
diff --git a/webapp/src/routes/setup/+page.svelte b/webapp/src/routes/setup/+page.svelte
index 8e1436bf8..26ba5db5b 100644
--- a/webapp/src/routes/setup/+page.svelte
+++ b/webapp/src/routes/setup/+page.svelte
@@ -47,7 +47,7 @@
 	const steps = [
 		{ number: 1, title: 'Endpoint', description: 'Select forge endpoint' },
 		{ number: 2, title: 'Credentials', description: 'Configure authentication' },
-		{ number: 3, title: 'Entity', description: 'Add repo, org, or enterprise' },
+		{ number: 3, title: 'Entity', description: 'Add repo, org, or instance' },
 		{ number: 4, title: 'Runner', description: 'Create pool or scale set' }
 	];