diff --git a/frontend/src/app/dialogs/connect-aws-frame.tsx b/frontend/src/app/dialogs/connect-aws-frame.tsx
index e63650839b..2515813963 100644
--- a/frontend/src/app/dialogs/connect-aws-frame.tsx
+++ b/frontend/src/app/dialogs/connect-aws-frame.tsx
@@ -1,6 +1,6 @@
 import { faAws, Icon } from "@rivet-gg/icons";
 import { type DialogContentProps, Frame } from "@/components";
-import ConnectManualServerlfullFrameContent from "./connect-manual-serverfull-frame";
+import ConnectManualServerlessFrameContent from "./connect-manual-serverless-frame";
 
 interface ConnectAwsFrameContentProps extends DialogContentProps {}
 
@@ -17,7 +17,7 @@ export default function ConnectAwsFrameContent({
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>
-				<ConnectManualServerlfullFrameContent
+				<ConnectManualServerlessFrameContent
 					provider="aws"
 					onClose={onClose}
 				/>
diff --git a/frontend/src/app/dialogs/connect-gcp-frame.tsx b/frontend/src/app/dialogs/connect-gcp-frame.tsx
index 7ff9e811ac..70484f3035 100644
--- a/frontend/src/app/dialogs/connect-gcp-frame.tsx
+++ b/frontend/src/app/dialogs/connect-gcp-frame.tsx
@@ -1,6 +1,6 @@
 import { faGoogleCloud, Icon } from "@rivet-gg/icons";
 import { type DialogContentProps, Frame } from "@/components";
-import ConnectManualServerlfullFrameContent from "./connect-manual-serverfull-frame";
+import ConnectManualServerlessFrameContent from "./connect-manual-serverless-frame";
 
 interface ConnectAwsFrameContentProps extends DialogContentProps {}
 
@@ -18,7 +18,7 @@ export default function ConnectAwsFrameContent({
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>
-				<ConnectManualServerlfullFrameContent
+				<ConnectManualServerlessFrameContent
 					provider="gcp"
 					onClose={onClose}
 				/>
diff --git a/frontend/src/app/dialogs/connect-hetzner-frame.tsx b/frontend/src/app/dialogs/connect-hetzner-frame.tsx
index dd85f5292b..f32be3c48c 100644
--- a/frontend/src/app/dialogs/connect-hetzner-frame.tsx
+++ b/frontend/src/app/dialogs/connect-hetzner-frame.tsx
@@ -1,6 +1,6 @@
 import { faHetznerH, Icon } from "@rivet-gg/icons";
 import { type DialogContentProps, Frame } from "@/components";
-import ConnectManualServerlfullFrameContent from "./connect-manual-serverfull-frame";
+import ConnectManualServerlessFrameContent from "./connect-manual-serverless-frame";
 
 interface ConnectHetznerFrameContentProps extends DialogContentProps {}
 
@@ -18,7 +18,7 @@ export default function ConnectHetznerFrameContent({
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>
-				<ConnectManualServerlfullFrameContent
+				<ConnectManualServerlessFrameContent
 					provider="hetzner"
 					onClose={onClose}
 				/>
diff --git a/frontend/src/app/dialogs/connect-manual-serverfull-frame.tsx b/frontend/src/app/dialogs/connect-manual-serverfull-frame.tsx
index 1567ba94d6..a10d2fdd85 100644
--- a/frontend/src/app/dialogs/connect-manual-serverfull-frame.tsx
+++ b/frontend/src/app/dialogs/connect-manual-serverfull-frame.tsx
@@ -224,7 +224,7 @@ function Step2({ provider }: { provider: string }) {
 
 			<EnvVariables
 				kind="serverfull"
-				endpoint={useSelectedDatacenter()}
+				endpoint={useEndpoint()}
 				runnerName={useWatch({ name: "runnerName" })}
 			/>
 		</>
@@ -235,7 +235,7 @@ function Step3() {
 	return <ConnectRailwayForm.ConnectionCheck provider="railway" />;
 }
 
-export const useSelectedDatacenter = () => {
+export const useEndpoint = () => {
 	const datacenter = useWatch({ name: "datacenter" });
 
 	const { data } = useQuery(
diff --git a/frontend/src/app/dialogs/connect-manual-serverless-frame.tsx b/frontend/src/app/dialogs/connect-manual-serverless-frame.tsx
index 858f4e7768..40312273d5 100644
--- a/frontend/src/app/dialogs/connect-manual-serverless-frame.tsx
+++ b/frontend/src/app/dialogs/connect-manual-serverless-frame.tsx
@@ -5,16 +5,23 @@ import {
 	useSuspenseInfiniteQuery,
 } from "@tanstack/react-query";
 import confetti from "canvas-confetti";
+import type { ComponentProps, ReactNode } from "react";
 import { useWatch } from "react-hook-form";
 import z from "zod";
 import * as ConnectServerlessForm from "@/app/forms/connect-manual-serverless-form";
-import type { DialogContentProps } from "@/components";
-import { type Region, useEngineCompatDataProvider } from "@/components/actors";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+	type DialogContentProps,
+} from "@/components";
+import { useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
 import { queryClient } from "@/queries/global";
 import { EnvVariables } from "../env-variables";
 import { StepperForm } from "../forms/stepper-form";
-import { useSelectedDatacenter } from "./connect-manual-serverfull-frame";
+import { useEndpoint } from "./connect-manual-serverfull-frame";
 
 const stepper = defineStepper(
 	{
@@ -22,21 +29,7 @@ const stepper = defineStepper(
 		title: "Configure",
 		assist: false,
 		next: "Next",
-		schema: z.object({
-			runnerName: z.string().min(1, "Runner name is required"),
-			datacenters: z
-				.record(z.boolean())
-				.refine(
-					(data) => Object.values(data).some(Boolean),
-					"At least one datacenter must be selected",
-				),
-			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
-			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
-			maxRunners: z.coerce.number().min(0, "Must be 0 or greater"),
-			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
-			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
-			requestLifespan: z.coerce.number().min(0, "Must be 0 or greater"),
-		}),
+		schema: ConnectServerlessForm.configurationSchema,
 	},
 	{
 		id: "step-2",
@@ -49,23 +42,18 @@ const stepper = defineStepper(
 		id: "step-3",
 		title: "Confirm Connection",
 		assist: false,
-		schema: z.object({
-			endpoint: z
-				.string()
-				.nonempty("Endpoint is required")
-				.url("Please enter a valid URL"),
-			success: z.boolean().refine((v) => v === true, {
-				message: "Runner must be connected to proceed",
-			}),
-		}),
+		schema: ConnectServerlessForm.deploymentSchema,
 		next: "Add",
 	},
 );
 
-interface ConnectManualServerlessFrameContentProps extends DialogContentProps {}
+interface ConnectManualServerlessFrameContentProps extends DialogContentProps {
+	provider?: string;
+}
 
 export default function ConnectManualServerlessFrameContent({
 	onClose,
+	provider,
 }: ConnectManualServerlessFrameContentProps) {
 	usePrefetchInfiniteQuery({
 		...useEngineCompatDataProvider().datacentersQueryOptions(),
@@ -76,24 +64,28 @@ export default function ConnectManualServerlessFrameContent({
 		useEngineCompatDataProvider().datacentersQueryOptions(),
 	);
 
-	return <FormStepper onClose={onClose} datacenters={datacenters} />;
+	return (
+		<FormStepper
+			onClose={onClose}
+			datacenters={datacenters}
+			provider={provider}
+		/>
+	);
 }
 
 function FormStepper({
 	onClose,
 	datacenters,
+	provider,
 }: {
 	onClose?: () => void;
-	datacenters: Region[];
+	datacenters: Rivet.Datacenter[];
+	provider?: string;
 }) {
-	const provider = useEngineCompatDataProvider();
-
-	const { data } = useSuspenseInfiniteQuery({
-		...provider.runnerConfigsQueryOptions(),
-	});
+	const dataProvider = useEngineCompatDataProvider();
 
 	const { mutateAsync } = useMutation({
-		...provider.upsertRunnerConfigMutationOptions(),
+		...dataProvider.upsertRunnerConfigMutationOptions(),
 		onSuccess: async () => {
 			confetti({
 				angle: 60,
@@ -107,7 +99,7 @@ function FormStepper({
 			});
 
 			await queryClient.invalidateQueries(
-				provider.runnerConfigsQueryOptions(),
+				dataProvider.runnerConfigsQueryOptions(),
 			);
 			onClose?.();
 		},
@@ -116,44 +108,13 @@ function FormStepper({
 		<StepperForm
 			{...stepper}
 			onSubmit={async ({ values }) => {
-				let existing: Record<string, Rivet.RunnerConfig> = {};
-				try {
-					const runnerConfig = await queryClient.fetchQuery(
-						provider.runnerConfigQueryOptions({
-							name: values.runnerName,
-						}),
-					);
-					existing = runnerConfig?.datacenters || {};
-				} catch {
-					existing = {};
-				}
-
-				const selectedDatacenters = Object.entries(values.datacenters)
-					.filter(([, selected]) => selected)
-					.map(([id]) => id);
-
-				const config = {
-					serverless: {
-						url: values.endpoint,
-						maxRunners: values.maxRunners,
-						slotsPerRunner: values.slotsPerRunner,
-						runnersMargin: values.runnerMargin,
-						requestLifespan: values.requestLifespan,
-						headers: Object.fromEntries(
-							values.headers.map(([key, value]) => [key, value]),
-						),
-					},
-					metadata: {
-						provider: "custom",
+				const payload = await buildServerlessConfig(
+					dataProvider,
+					values,
+					{
+						provider,
 					},
-				};
-
-				const payload = {
-					...existing,
-					...Object.fromEntries(
-						selectedDatacenters.map((dc) => [dc, config]),
-					),
-				};
+				);
 
 				await mutateAsync({
 					name: values.runnerName,
@@ -176,23 +137,64 @@ function FormStepper({
 			content={{
 				"step-1": () => <Step1 />,
 				"step-2": () => <Step2 />,
-				"step-3": () => <Step3 />,
+				"step-3": () => <Step3 provider={provider} />,
 			}}
 		/>
 	);
 }
 
+export const buildServerlessConfig = async (
+	dataProvider: ReturnType<typeof useEngineCompatDataProvider>,
+	values: z.infer<
+		typeof ConnectServerlessForm.configurationSchema &
+			typeof ConnectServerlessForm.deploymentSchema
+	>,
+	{ provider }: { provider?: string } = {},
+): Promise<Record<string, Rivet.RunnerConfig>> => {
+	let existing: Record<string, Rivet.RunnerConfig> = {};
+	try {
+		const runnerConfig = await queryClient.fetchQuery(
+			dataProvider.runnerConfigQueryOptions({
+				name: values.runnerName,
+			}),
+		);
+		existing = runnerConfig?.datacenters || {};
+	} catch {
+		existing = {};
+	}
+
+	const selectedDatacenters = Object.entries(values.datacenters)
+		.filter(([, selected]) => selected)
+		.map(([id]) => id);
+
+	const config = {
+		serverless: {
+			url: values.endpoint,
+			maxRunners: values.maxRunners,
+			slotsPerRunner: values.slotsPerRunner,
+			runnersMargin: values.runnerMargin,
+			requestLifespan: values.requestLifespan,
+			headers: Object.fromEntries(
+				values.headers.map(([key, value]) => [key, value]),
+			),
+		},
+		metadata: {
+			provider: provider || "custom",
+		},
+	};
+
+	const payload = {
+		...existing,
+		...Object.fromEntries(selectedDatacenters.map((dc) => [dc, config])),
+	};
+
+	return payload;
+};
+
 function Step1() {
 	return (
 		<div className="space-y-4">
-			<ConnectServerlessForm.RunnerName />
-			<ConnectServerlessForm.Datacenters />
-			<ConnectServerlessForm.Headers />
-			<ConnectServerlessForm.SlotsPerRunner />
-			<ConnectServerlessForm.MaxRunners />
-			<ConnectServerlessForm.MinRunners />
-			<ConnectServerlessForm.RunnerMargin />
-			<ConnectServerlessForm.RequestLifespan />
+			<Configuration />
 		</div>
 	);
 }
@@ -203,18 +205,75 @@ function Step2() {
 			<p>Set the following environment variables.</p>
 			<EnvVariables
 				kind="serverless"
-				endpoint={useSelectedDatacenter()}
+				endpoint={useEndpoint()}
 				runnerName={useWatch({ name: "runnerName" })}
 			/>
 		</>
 	);
 }
 
-function Step3() {
+function Step3({ provider }: { provider?: string }) {
+	const providerDisplayName = provider
+		? provider.charAt(0).toUpperCase() + provider.slice(1)
+		: undefined;
 	return (
 		<>
 			<ConnectServerlessForm.Endpoint placeholder="https://your-serverless-endpoint.com/api/rivet" />
-			<ConnectServerlessForm.ConnectionCheck provider="Your serverless provider" />
+			<ConnectServerlessForm.ConnectionCheck
+				provider={providerDisplayName || "Your serverless provider"}
+			/>
+		</>
+	);
+}
+
+export function Configuration({
+	runnerName = true,
+	datacenters = true,
+	headers = true,
+	slotsPerRunner = true,
+	minRunners = true,
+	maxRunners = true,
+	runnerMargin = true,
+	requestLifespan = true,
+}: {
+	runnerName?: boolean;
+	datacenters?: boolean;
+	headers?: boolean;
+	slotsPerRunner?: boolean;
+	minRunners?: boolean;
+	maxRunners?: boolean;
+	runnerMargin?: boolean;
+	requestLifespan?: boolean;
+}) {
+	return (
+		<>
+			{runnerName && <ConnectServerlessForm.RunnerName />}
+			{datacenters && <ConnectServerlessForm.Datacenters />}
+			{headers && <ConnectServerlessForm.Headers />}
+			{slotsPerRunner && <ConnectServerlessForm.SlotsPerRunner />}
+			{minRunners && <ConnectServerlessForm.MinRunners />}
+			{maxRunners && <ConnectServerlessForm.MaxRunners />}
+			{runnerMargin && <ConnectServerlessForm.RunnerMargin />}
+			{requestLifespan && <ConnectServerlessForm.RequestLifespan />}
 		</>
 	);
 }
+
+export function ConfigurationAccordion({
+	prefixFields,
+	...props
+}: ComponentProps<typeof Configuration> & { prefixFields?: ReactNode }) {
+	return (
+		<Accordion type="single" collapsible>
+			<AccordionItem value="item-1">
+				<AccordionTrigger className="text-sm">
+					Advanced
+				</AccordionTrigger>
+				<AccordionContent className="space-y-4 px-1 pt-2">
+					{prefixFields}
+					<Configuration {...props} />
+				</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	);
+}
diff --git a/frontend/src/app/dialogs/connect-quick-railway-frame.tsx b/frontend/src/app/dialogs/connect-quick-railway-frame.tsx
index 4267a1cf9d..2d5bbadbab 100644
--- a/frontend/src/app/dialogs/connect-quick-railway-frame.tsx
+++ b/frontend/src/app/dialogs/connect-quick-railway-frame.tsx
@@ -5,44 +5,37 @@ import {
 	useSuspenseInfiniteQuery,
 } from "@tanstack/react-query";
 import confetti from "canvas-confetti";
-import z from "zod";
+import { useWatch } from "react-hook-form";
 import * as ConnectRailwayForm from "@/app/forms/connect-railway-form";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-	type DialogContentProps,
-	ExternalLinkCard,
-	Frame,
-} from "@/components";
+import { type DialogContentProps, ExternalLinkCard, Frame } from "@/components";
 import { useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
 import { queryClient } from "@/queries/global";
 import { useRailwayTemplateLink } from "@/utils/use-railway-template-link";
+import {
+	configurationSchema,
+	deploymentSchema,
+} from "../forms/connect-manual-serverless-form";
 import { StepperForm } from "../forms/stepper-form";
+import {
+	buildServerlessConfig,
+	ConfigurationAccordion,
+} from "./connect-manual-serverless-frame";
 
 const stepper = defineStepper(
 	{
 		id: "step-1",
-		title: "Deploy to Railway",
-		assist: false,
+		title: "Configure",
+		assist: true,
 		next: "Next",
-		schema: z.object({
-			runnerName: z.string().min(1, "Runner name is required"),
-			datacenter: z.string().min(1, "Please select a region"),
-		}),
+		schema: configurationSchema,
 	},
 	{
-		id: "step-2",
-		title: "Wait for the Runner to connect",
+		id: "deploy",
+		title: "Configure Railway endpoint",
 		assist: true,
-		schema: z.object({
-			success: z.boolean().refine((v) => v === true, {
-				message: "Runner must be connected to proceed",
-			}),
-		}),
-		next: "Add",
+		next: "Done",
+		schema: deploymentSchema,
 	},
 );
 
@@ -55,18 +48,6 @@ export default function ConnectQuickRailwayFrameContent({
 		...useEngineCompatDataProvider().datacentersQueryOptions(),
 		pages: Infinity,
 	});
-	const { data } = useSuspenseInfiniteQuery(
-		useEngineCompatDataProvider().datacentersQueryOptions(),
-	);
-
-	const prefferedRegionForRailway =
-		data.find((region) => region.name.toLowerCase().includes("us-west"))
-			?.name ||
-		data.find((region) => region.name.toLowerCase().includes("us-east"))
-			?.name ||
-		data.find((region) => region.name.toLowerCase().includes("ore"))
-			?.name ||
-		"auto";
 
 	return (
 		<>
@@ -78,23 +59,17 @@ export default function ConnectQuickRailwayFrameContent({
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>
-				<FormStepper
-					onClose={onClose}
-					defaultDatacenter={prefferedRegionForRailway}
-				/>
+				<FormStepper onClose={onClose} />
 			</Frame.Content>
 		</>
 	);
 }
 
-function FormStepper({
-	onClose,
-	defaultDatacenter,
-}: {
-	onClose?: () => void;
-	defaultDatacenter: string;
-}) {
+function FormStepper({ onClose }: { onClose?: () => void }) {
 	const provider = useEngineCompatDataProvider();
+	const { data: datacenters } = useSuspenseInfiniteQuery(
+		useEngineCompatDataProvider().datacentersQueryOptions(),
+	);
 	const { mutateAsync } = useMutation({
 		...provider.upsertRunnerConfigMutationOptions(),
 		onSuccess: async () => {
@@ -118,57 +93,81 @@ function FormStepper({
 	return (
 		<StepperForm
 			{...stepper}
+			showAllSteps
+			initialStep="deploy"
+			mode="all"
 			onSubmit={async ({ values }) => {
+				const payload = await buildServerlessConfig(provider, values, {
+					provider: "railway",
+				});
 				await mutateAsync({
 					name: values.runnerName,
-					config: {
-						[values.datacenter]: {
-							normal: {},
-							metadata: { provider: "railway" },
-						},
-					},
+					config: payload,
 				});
 			}}
 			defaultValues={{
 				runnerName: "default",
-				success: true,
-				datacenter: defaultDatacenter,
+				slotsPerRunner: 1,
+				minRunners: 1,
+				maxRunners: 10_000,
+				runnerMargin: 0,
+				requestLifespan: 55,
+				headers: [],
+				success: false,
+				datacenters: Object.fromEntries(
+					datacenters.map((dc) => [dc.name, true]),
+				),
 			}}
 			content={{
-				"step-1": () => <Step1 datacenter={defaultDatacenter} />,
-				"step-2": () => <Step2 />,
+				"step-1": () => <Step1 />,
+				deploy: () => <DeployStep />,
 			}}
 		/>
 	);
 }
 
-function Step1({ datacenter }: { datacenter: string }) {
+function Step1() {
 	return (
 		<>
 			<div className="space-y-4">
 				<p>Deploy the Rivet Railway template to get started quickly.</p>
-				<DeployToRailwayButton datacenter={datacenter} />
+				<DeployToRailwayButton />
 			</div>
-			<Accordion type="single" collapsible>
-				<AccordionItem value="item-1">
-					<AccordionTrigger className="text-sm">
-						Advanced Options
-					</AccordionTrigger>
-					<AccordionContent className="space-y-4 px-1 pt-2">
-						<ConnectRailwayForm.RunnerName />
-						<ConnectRailwayForm.Datacenter />
-					</AccordionContent>
-				</AccordionItem>
-			</Accordion>
 		</>
 	);
 }
 
-function DeployToRailwayButton({ datacenter }: { datacenter: string }) {
-	const runnerName = "default";
+function DeployStep() {
+	return (
+		<>
+			<p>Paste your deployment's endpoint below:</p>
+			<div className="mt-2">
+				<ConnectRailwayForm.Endpoint placeholder="https://my-rivet-app.up.railway.app" />
+
+				<ConfigurationAccordion />
+				<p className="text-muted-foreground text-sm">
+					Need help deploying? See{" "}
+					<a
+						href="https://docs.railway.com/guides/deployments"
+						target="_blank"
+						rel="noreferrer"
+						className="underline"
+					>
+						Railway's deployment documentation
+					</a>
+					.
+				</p>
+			</div>
+			<ConnectRailwayForm.ConnectionCheck provider="Railway" />
+		</>
+	);
+}
+
+function DeployToRailwayButton() {
+	const runnerName = useWatch({ name: "runnerName" });
 	const url = useRailwayTemplateLink({
 		runnerName,
-		datacenter,
+		kind: "serverless",
 	});
 
 	return (
@@ -179,7 +178,3 @@ function DeployToRailwayButton({ datacenter }: { datacenter: string }) {
 		/>
 	);
 }
-
-function Step2() {
-	return <ConnectRailwayForm.ConnectionCheck provider="railway" />;
-}
diff --git a/frontend/src/app/dialogs/connect-quick-vercel-frame.tsx b/frontend/src/app/dialogs/connect-quick-vercel-frame.tsx
index cd3853139a..02faa5595a 100644
--- a/frontend/src/app/dialogs/connect-quick-vercel-frame.tsx
+++ b/frontend/src/app/dialogs/connect-quick-vercel-frame.tsx
@@ -1,27 +1,23 @@
 import { faVercel, Icon } from "@rivet-gg/icons";
+import type { Rivet } from "@rivetkit/engine-api-full";
 import {
 	useMutation,
 	usePrefetchInfiniteQuery,
-	useQuery,
 	useSuspenseInfiniteQuery,
 } from "@tanstack/react-query";
 import confetti from "canvas-confetti";
 import { useMemo } from "react";
 import * as ConnectVercelForm from "@/app/forms/connect-quick-vercel-form";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-	type DialogContentProps,
-	ExternalLinkCard,
-	Frame,
-} from "@/components";
-import { type Region, useEngineCompatDataProvider } from "@/components/actors";
-import { usePublishableToken } from "@/queries/accessors";
+import { type DialogContentProps, ExternalLinkCard, Frame } from "@/components";
+import { useEngineCompatDataProvider } from "@/components/actors";
 import { queryClient } from "@/queries/global";
+import { useRivetDsn } from "../env-variables";
 import { StepperForm } from "../forms/stepper-form";
-import { useSelectedDatacenter } from "./connect-manual-serverfull-frame";
+import { useEndpoint } from "./connect-manual-serverfull-frame";
+import {
+	buildServerlessConfig,
+	ConfigurationAccordion,
+} from "./connect-manual-serverless-frame";
 import { VERCEL_SERVERLESS_MAX_DURATION } from "./connect-vercel-frame";
 
 const { stepper } = ConnectVercelForm;
@@ -62,7 +58,7 @@ function FormStepper({
 	onClose,
 }: {
 	onClose?: () => void;
-	datacenters: Region[];
+	datacenters: Rivet.Datacenter[];
 }) {
 	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
@@ -95,28 +91,13 @@ function FormStepper({
 				deploy: () => <StepDeploy />,
 			}}
 			onSubmit={async ({ values }) => {
-				const selectedDatacenters = Object.entries(values.datacenters)
-					.filter(([, selected]) => selected)
-					.map(([id]) => id);
-
-				const config = {
-					serverless: {
-						url: values.endpoint,
-						maxRunners: values.maxRunners,
-						slotsPerRunner: values.slotsPerRunner,
-						runnersMargin: values.runnerMargin,
-						requestLifespan: VERCEL_SERVERLESS_MAX_DURATION - 5, // Subtract 5s to ensure we don't hit Vercel's timeout
-						headers: Object.fromEntries(
-							values.headers.map(([key, value]) => [key, value]),
-						),
-					},
-					metadata: {
-						provider: "vercel",
+				const payload = await buildServerlessConfig(
+					provider,
+					{
+						...values,
+						requestLifespan: VERCEL_SERVERLESS_MAX_DURATION - 5,
 					},
-				};
-
-				const payload = Object.fromEntries(
-					selectedDatacenters.map((dc) => [dc, config]),
+					{ provider: "vercel" },
 				);
 
 				await mutateAsync({
@@ -132,6 +113,7 @@ function FormStepper({
 				runnerMargin: 0,
 				headers: [],
 				success: false,
+				plan: "hobby",
 				datacenters: Object.fromEntries(
 					datacenters.map((dc) => [dc.name, true]),
 				),
@@ -141,28 +123,21 @@ function FormStepper({
 }
 
 const useVercelTemplateLink = () => {
-	const dataProvider = useEngineCompatDataProvider();
-	const token = usePublishableToken();
-	const endpoint = useSelectedDatacenter();
+	const endpoint = useEndpoint();
+
+	const dsn = useRivetDsn({ endpoint, kind: "serverless" });
 
 	return useMemo(() => {
 		const repositoryUrl = "https://github.com/rivet-dev/template-vercel";
-		const env = [
-			"RIVET_ENDPOINT",
-			"NEXT_PUBLIC_RIVET_ENDPOINT",
-			"NEXT_PUBLIC_RIVET_TOKEN",
-			"NEXT_PUBLIC_RIVET_NAMESPACE",
-		].join(",");
+		const env = ["RIVET_ENDPOINT", "NEXT_PUBLIC_RIVET_ENDPOINT"].join(",");
 		const projectName = "rivetkit-vercel";
 		const envDefaults = {
-			RIVET_ENDPOINT: endpoint,
-			NEXT_PUBLIC_RIVET_ENDPOINT: endpoint,
-			NEXT_PUBLIC_RIVET_TOKEN: token,
-			NEXT_PUBLIC_RIVET_NAMESPACE: dataProvider.engineNamespace,
+			RIVET_ENDPOINT: dsn,
+			NEXT_PUBLIC_RIVET_ENDPOINT: dsn,
 		};
 
 		return `https://vercel.com/new/clone?repository-url=${encodeURIComponent(repositoryUrl)}&env=${env}&project-name=${projectName}&repository-name=${projectName}&envDefaults=${encodeURIComponent(JSON.stringify(envDefaults))}`;
-	}, [dataProvider.engineNamespace, endpoint, token]);
+	}, [dsn]);
 };
 
 function StepInitialInfo() {
@@ -188,25 +163,29 @@ function StepInitialInfo() {
 function StepDeploy() {
 	return (
 		<>
+			<p>
+				Deploy your code to Vercel and paste your deployment's endpoint:
+			</p>
 			<div className="mt-2">
 				<ConnectVercelForm.Endpoint />
-				<Accordion type="single" collapsible>
-					<AccordionItem value="item-1">
-						<AccordionTrigger className="text-sm">
-							Advanced
-						</AccordionTrigger>
-						<AccordionContent className="space-y-4 px-1 pt-2">
-							<ConnectVercelForm.RunnerName />
-							<ConnectVercelForm.Datacenters />
-							<ConnectVercelForm.Headers />
-							<ConnectVercelForm.SlotsPerRunner />
-							<ConnectVercelForm.MinRunners />
-							<ConnectVercelForm.MaxRunners />
-							<ConnectVercelForm.RunnerMargin />
-						</AccordionContent>
-					</AccordionItem>
-				</Accordion>
+				<ConfigurationAccordion
+					requestLifespan={false}
+					prefixFields={<ConnectVercelForm.Plan />}
+				/>
+				<p className="text-muted-foreground text-sm">
+					Need help deploying? See{" "}
+					<a
+						href="https://vercel.com/docs/deployments"
+						target="_blank"
+						rel="noreferrer"
+						className="underline"
+					>
+						Vercel's deployment documentation
+					</a>
+					.
+				</p>
 			</div>
+
 			<ConnectVercelForm.ConnectionCheck provider="Vercel" />
 		</>
 	);
diff --git a/frontend/src/app/dialogs/connect-railway-frame.tsx b/frontend/src/app/dialogs/connect-railway-frame.tsx
index fa5fe7710f..0cbe085809 100644
--- a/frontend/src/app/dialogs/connect-railway-frame.tsx
+++ b/frontend/src/app/dialogs/connect-railway-frame.tsx
@@ -2,29 +2,27 @@ import { faRailway, Icon } from "@rivet-gg/icons";
 import {
 	useMutation,
 	usePrefetchInfiniteQuery,
-	useQuery,
 	useSuspenseInfiniteQuery,
 } from "@tanstack/react-query";
 import confetti from "canvas-confetti";
 import { useWatch } from "react-hook-form";
 import z from "zod";
 import * as ConnectRailwayForm from "@/app/forms/connect-railway-form";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-	type DialogContentProps,
-	Frame,
-} from "@/components";
+import { type DialogContentProps, Frame } from "@/components";
 import { useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
-import { engineEnv } from "@/lib/env";
 import { queryClient } from "@/queries/global";
-import { useRailwayTemplateLink } from "@/utils/use-railway-template-link";
 import { EnvVariables } from "../env-variables";
+import {
+	configurationSchema,
+	deploymentSchema,
+} from "../forms/connect-manual-serverless-form";
 import { StepperForm } from "../forms/stepper-form";
-import { useSelectedDatacenter } from "./connect-manual-serverfull-frame";
+import { useEndpoint } from "./connect-manual-serverfull-frame";
+import {
+	buildServerlessConfig,
+	ConfigurationAccordion,
+} from "./connect-manual-serverless-frame";
 
 const stepper = defineStepper(
 	{
@@ -32,28 +30,17 @@ const stepper = defineStepper(
 		title: "Configure",
 		assist: false,
 		next: "Next",
-		schema: z.object({
-			runnerName: z.string().min(1, "Runner name is required"),
-			datacenter: z.string().min(1, "Please select a region"),
-		}),
+		schema: z.object({}),
 	},
 	{
 		id: "step-2",
 		title: "Deploy to Railway",
 		assist: false,
-		schema: z.object({}),
-		next: "Next",
-	},
-	{
-		id: "step-3",
-		title: "Wait for the Runner to connect",
-		assist: true,
 		schema: z.object({
-			success: z.boolean().refine((v) => v === true, {
-				message: "Runner must be connected to proceed",
-			}),
+			...configurationSchema.shape,
+			...deploymentSchema.shape,
 		}),
-		next: "Add",
+		next: "Done",
 	},
 );
 
@@ -66,18 +53,6 @@ export default function ConnectRailwayFrameContent({
 		...useEngineCompatDataProvider().datacentersQueryOptions(),
 		pages: Infinity,
 	});
-	const { data } = useSuspenseInfiniteQuery(
-		useEngineCompatDataProvider().datacentersQueryOptions(),
-	);
-
-	const prefferedRegionForRailway =
-		data.find((region) => region.name.toLowerCase().includes("us-west"))
-			?.name ||
-		data.find((region) => region.name.toLowerCase().includes("us-east"))
-			?.name ||
-		data.find((region) => region.name.toLowerCase().includes("ore"))
-			?.name ||
-		"auto";
 
 	return (
 		<>
@@ -89,22 +64,21 @@ export default function ConnectRailwayFrameContent({
 				</Frame.Title>
 			</Frame.Header>
 			<Frame.Content>
-				<FormStepper
-					onClose={onClose}
-					defaultDatacenter={prefferedRegionForRailway}
-				/>
+				<FormStepper onClose={onClose} />
 			</Frame.Content>
 		</>
 	);
 }
 
-function FormStepper({
-	onClose,
-	defaultDatacenter,
-}: {
-	onClose?: () => void;
-	defaultDatacenter: string;
-}) {
+function FormStepper({ onClose }: { onClose?: () => void }) {
+	usePrefetchInfiniteQuery({
+		...useEngineCompatDataProvider().datacentersQueryOptions(),
+		pages: Infinity,
+	});
+
+	const { data: datacenters } = useSuspenseInfiniteQuery(
+		useEngineCompatDataProvider().datacentersQueryOptions(),
+	);
 	const provider = useEngineCompatDataProvider();
 	const { mutateAsync } = useMutation({
 		...provider.upsertRunnerConfigMutationOptions(),
@@ -130,25 +104,31 @@ function FormStepper({
 		<StepperForm
 			{...stepper}
 			onSubmit={async ({ values }) => {
+				const payload = await buildServerlessConfig(provider, values, {
+					provider: "railway",
+				});
+
 				await mutateAsync({
 					name: values.runnerName,
-					config: {
-						[values.datacenter]: {
-							normal: {},
-							metadata: { provider: "railway" },
-						},
-					},
+					config: payload,
 				});
 			}}
 			defaultValues={{
 				runnerName: "default",
-				success: true,
-				datacenter: defaultDatacenter,
+				slotsPerRunner: 1,
+				minRunners: 1,
+				maxRunners: 10_000,
+				runnerMargin: 0,
+				requestLifespan: 55,
+				headers: [],
+				success: false,
+				datacenters: Object.fromEntries(
+					datacenters.map((dc) => [dc.name, true]),
+				),
 			}}
 			content={{
 				"step-1": () => <Step1 />,
-				"step-2": () => <Step2 />,
-				"step-3": () => <Step3 />,
+				"step-2": () => <StepDeploy />,
 			}}
 		/>
 	);
@@ -157,68 +137,57 @@ function FormStepper({
 function Step1() {
 	return (
 		<>
-			<div>
-				We're going to help you deploy a RivetKit project to Railway and
-				connect it to Rivet.
-			</div>
-			<Accordion type="single" collapsible>
-				<AccordionItem value="item-1">
-					<AccordionTrigger className="text-sm">
-						Advanced
-					</AccordionTrigger>
-					<AccordionContent className="space-y-4 px-1 pt-2">
-						<ConnectRailwayForm.RunnerName />
-						<ConnectRailwayForm.Datacenter />
-					</AccordionContent>
-				</AccordionItem>
-			</Accordion>
-		</>
-	);
-}
-
-function Step2() {
-	return (
-		<>
-			<p>Deploy any RivetKit app to Railway.</p>
-			<p>Or use our Railway template to get started quickly.</p>
-			<DeployToRailwayButton />
 			<p>
-				Set the following environment variables in your Railway project
-				settings.
+				If you have not deployed a project, see the{" "}
+				<a
+					href="https://www.rivet.dev/docs/connect/railway"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="underline hover:text-foreground"
+				>
+					Railway quickstart guide
+				</a>
+				.
+			</p>
+			<p>
+				Set these variables in Settings &gt; Variables in the Railway
+				dashboard.
 			</p>
 			<EnvVariables
 				kind="serverfull"
-				endpoint={useSelectedDatacenter()}
+				prefixlessEndpoint
+				prefix="VITE"
+				endpoint={useEndpoint()}
 				runnerName={useWatch({ name: "runnerName" })}
 			/>
 		</>
 	);
 }
 
-function Step3() {
-	return <ConnectRailwayForm.ConnectionCheck provider="railway" />;
-}
-
-function DeployToRailwayButton() {
-	const runnerName = useWatch({ name: "runnerName" });
-
-	const url = useRailwayTemplateLink({
-		runnerName: runnerName || "default",
-		datacenter: useWatch({ name: "datacenter" }) || "auto",
-	});
-
+function StepDeploy() {
 	return (
-		<a
-			href={url}
-			target="_blank"
-			rel="noreferrer"
-			className="inline-block h-10"
-		>
-			<img
-				height={40}
-				src="https://railway.com/button.svg"
-				alt="Deploy to Railway"
-			/>
-		</a>
+		<>
+			<p>
+				Deploy your code to Railway and paste your deployment's
+				endpoint:
+			</p>
+			<div className="mt-2">
+				<ConnectRailwayForm.Endpoint placeholder="https://my-rivet-app.up.railway.app" />
+				<ConfigurationAccordion />
+				<p className="text-muted-foreground text-sm">
+					Need help deploying? See{" "}
+					<a
+						href="https://docs.railway.com/guides/deployments"
+						target="_blank"
+						rel="noreferrer"
+						className="underline"
+					>
+						Railway's deployment documentation
+					</a>
+					.
+				</p>
+			</div>
+			<ConnectRailwayForm.ConnectionCheck provider="Railway" />
+		</>
 	);
 }
diff --git a/frontend/src/app/dialogs/connect-vercel-frame.tsx b/frontend/src/app/dialogs/connect-vercel-frame.tsx
index 582f25afa1..25d0d3a38e 100644
--- a/frontend/src/app/dialogs/connect-vercel-frame.tsx
+++ b/frontend/src/app/dialogs/connect-vercel-frame.tsx
@@ -1,51 +1,25 @@
 import { faVercel, Icon } from "@rivet-gg/icons";
+import type { Rivet } from "@rivetkit/engine-api-full";
 import {
 	useMutation,
 	usePrefetchInfiniteQuery,
 	useSuspenseInfiniteQuery,
 } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
 import confetti from "canvas-confetti";
 import { useWatch } from "react-hook-form";
-import { match } from "ts-pattern";
-import type z from "zod";
 import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-	type DialogContentProps,
-	Frame,
-	getConfig,
-} from "@/components";
+import { type DialogContentProps, Frame } from "@/components";
 import { useEngineCompatDataProvider } from "@/components/actors";
-import { cloudEnv } from "@/lib/env";
-import { usePublishableToken } from "@/queries/accessors";
 import { queryClient } from "@/queries/global";
-import { type JoinStepSchemas, StepperForm } from "../forms/stepper-form";
+import { StepperForm } from "../forms/stepper-form";
+import { buildServerlessConfig, ConfigurationAccordion } from "./connect-manual-serverless-frame";
 
 const { stepper } = ConnectVercelForm;
 
-type FormValues = z.infer<JoinStepSchemas<typeof stepper.steps>>;
-
 export const VERCEL_SERVERLESS_MAX_DURATION = 300;
 
 interface CreateProjectFrameContentProps extends DialogContentProps {}
 
-const useEndpoint = () => {
-	return match(__APP_TYPE__)
-		.with("cloud", () => {
-			return cloudEnv().VITE_APP_API_URL;
-		})
-		.with("engine", () => {
-			return getConfig().apiUrl;
-		})
-		.otherwise(() => {
-			throw new Error("Not in a valid context");
-		});
-};
-
 export default function CreateProjectFrameContent({
 	onClose,
 }: CreateProjectFrameContentProps) {
@@ -80,12 +54,9 @@ function FormStepper({
 	onClose,
 }: {
 	onClose?: () => void;
-	datacenters: Region[];
+	datacenters: Rivet.Datacenter[];
 }) {
 	const provider = useEngineCompatDataProvider();
-	const token = usePublishableToken();
-	const endpoint = useEndpoint();
-	const namespace = provider.engineNamespace;
 
 	const { mutateAsync } = useMutation({
 		...provider.upsertRunnerConfigMutationOptions(),
@@ -110,15 +81,8 @@ function FormStepper({
 		<StepperForm
 			{...stepper}
 			content={{
-				// "initial-info": () => <StepInitialInfo />,
 				"api-route": () => <StepApiRoute />,
-				frontend: () => (
-					<StepFrontend
-						token={token}
-						endpoint={endpoint}
-						namespace={namespace}
-					/>
-				),
+				frontend: () => <StepFrontend />,
 				variables: () => (
 					<>
 						<p>
@@ -131,29 +95,15 @@ function FormStepper({
 				deploy: () => <StepDeploy />,
 			}}
 			onSubmit={async ({ values }) => {
-				const selectedDatacenters = Object.entries(values.datacenters)
-					.filter(([, selected]) => selected)
-					.map(([id]) => id);
-
-				const config = {
-					serverless: {
-						url: values.endpoint,
-						maxRunners: values.maxRunners,
-						slotsPerRunner: values.slotsPerRunner,
-						runnersMargin: values.runnerMargin,
-						requestLifespan: VERCEL_SERVERLESS_MAX_DURATION - 5, // Subtract 5s to ensure we don't hit Vercel's timeout
-						headers: Object.fromEntries(
-							values.headers.map(([key, value]) => [key, value]),
-						),
-					},
-					metadata: {
-						provider: "vercel",
-					},
-				};
-
-				const payload = Object.fromEntries(
-					selectedDatacenters.map((dc) => [dc, config]),
-				);
+				const payload =
+					await buildServerlessConfig(
+						provider,
+						{
+							...values,
+							requestLifespan: VERCEL_SERVERLESS_MAX_DURATION - 5,
+						},
+						{ provider: "vercel" },
+					);
 
 				await mutateAsync({
 					name: values.runnerName,
@@ -177,51 +127,13 @@ function FormStepper({
 	);
 }
 
-// function StepInitialInfo() {
-// 	return (
-// 		<>
-// 			<ConnectVercelForm.Plan />
-// 			<Accordion type="single" collapsible>
-// 				<AccordionItem value="item-1">
-// 					<AccordionTrigger className="text-sm">
-// 						Advanced
-// 					</AccordionTrigger>
-// 					<AccordionContent className="space-y-4 px-1 pt-2">
-// 						<ConnectVercelForm.RunnerName />
-// 						<ConnectVercelForm.Datacenters />
-// 						<ConnectVercelForm.Headers />
-// 						<ConnectVercelForm.SlotsPerRunner />
-// 						<ConnectVercelForm.MinRunners />
-// 						<ConnectVercelForm.MaxRunners />
-// 						<ConnectVercelForm.RunnerMargin />
-// 					</AccordionContent>
-// 				</AccordionItem>
-// 			</Accordion>
-// 		</>
-// 	);
-// }
-
 function StepApiRoute() {
 	const plan = useWatch({ name: "plan" });
 	return <ConnectVercelForm.IntegrationCode plan={plan || "hobby"} />;
 }
 
-function StepFrontend({
-	token,
-	endpoint,
-	namespace,
-}: {
-	token: string;
-	endpoint: string;
-	namespace: string;
-}) {
-	return (
-		<ConnectVercelForm.FrontendIntegrationCode
-			token={token}
-			endpoint={endpoint}
-			namespace={namespace}
-		/>
-	);
+function StepFrontend() {
+	return <ConnectVercelForm.FrontendIntegrationCode />;
 }
 
 function StepDeploy() {
@@ -232,36 +144,25 @@ function StepDeploy() {
 			</p>
 			<div className="mt-2">
 				<ConnectVercelForm.Endpoint />
-				<Accordion type="single" collapsible>
-					<AccordionItem value="item-1">
-						<AccordionTrigger className="text-sm">
-							Advanced
-						</AccordionTrigger>
-						<AccordionContent className="space-y-4 px-1 pt-2">
-							<ConnectVercelForm.RunnerName />
-							<ConnectVercelForm.Datacenters />
-							<ConnectVercelForm.Headers />
-							<ConnectVercelForm.SlotsPerRunner />
-							<ConnectVercelForm.MinRunners />
-							<ConnectVercelForm.MaxRunners />
-							<ConnectVercelForm.RunnerMargin />
-						</AccordionContent>
-					</AccordionItem>
-				</Accordion>
+				<ConfigurationAccordion
+					requestLifespan={false}
+					prefixFields={<ConnectVercelForm.Plan />}
+				/>
+				<p className="text-muted-foreground text-sm">
+					Need help deploying? See{" "}
+					<a
+						href="https://vercel.com/docs/deployments"
+						target="_blank"
+						rel="noreferrer"
+						className="underline"
+					>
+						Vercel's deployment documentation
+					</a>
+					.
+				</p>
 			</div>
+
 			<ConnectVercelForm.ConnectionCheck provider="Vercel" />
-			<p className="text-muted-foreground text-sm">
-				Need help deploying? See{" "}
-				<a
-					href="https://vercel.com/docs/deployments"
-					target="_blank"
-					rel="noreferrer"
-					className="underline"
-				>
-					Vercel's deployment documentation
-				</a>
-				.
-			</p>
 		</>
 	);
 }
diff --git a/frontend/src/app/env-variables.tsx b/frontend/src/app/env-variables.tsx
index 7d0bdbdf84..72d17b99e2 100644
--- a/frontend/src/app/env-variables.tsx
+++ b/frontend/src/app/env-variables.tsx
@@ -30,11 +30,13 @@ export function EnvVariables({
 				</Label>
 
 				{prefixlessEndpoint ? (
-					<RivetEndpointEnv endpoint={endpoint} />
+					<RivetEndpointEnv endpoint={endpoint} kind={kind} />
 				) : null}
-				<RivetEndpointEnv prefix={prefix} endpoint={endpoint} />
-				<RivetTokenEnv prefix={prefix} kind={kind} />
-				<RivetNamespaceEnv prefix={prefix} />
+				<RivetEndpointEnv
+					prefix={prefix}
+					endpoint={endpoint}
+					kind={kind}
+				/>
 				<RivetRunnerEnv prefix={prefix} runnerName={runnerName} />
 			</div>
 			<div className="mt-2 flex justify-end">
@@ -90,43 +92,35 @@ function RivetRunnerEnv({
 	);
 }
 
-function RivetTokenEnv({
-	prefix,
+export const useRivetDsn = ({
+	endpoint,
 	kind,
 }: {
-	prefix?: string;
+	endpoint: string;
 	kind: "serverless" | "serverfull";
-}) {
+}) => {
+	const dataProvider = useEngineCompatDataProvider();
 	const publishableToken = usePublishableToken();
 	const adminToken = useAdminToken();
+	const token = kind === "serverless" ? publishableToken : adminToken;
 
-	return (
-		<>
-			<DiscreteInput
-				aria-label="environment variable key"
-				value={`${prefix ? `${prefix}_` : ""}RIVET_TOKEN`}
-				show
-			/>
+	const dsn = `https://${token}:${dataProvider.engineNamespace}@${endpoint
+		.replace("https://", "")
+		.replace("http://", "")}`;
 
-			<DiscreteInput
-				aria-label="environment variable value"
-				value={
-					(kind === "serverless" ? publishableToken : adminToken) ||
-					""
-				}
-				show
-			/>
-		</>
-	);
-}
+	return dsn;
+};
 
 function RivetEndpointEnv({
 	prefix,
 	endpoint,
+	kind,
 }: {
 	prefix?: string;
 	endpoint: string;
+	kind: "serverless" | "serverfull";
 }) {
+	const dsn = useRivetDsn({ endpoint, kind });
 	return (
 		<>
 			<DiscreteInput
@@ -136,25 +130,7 @@ function RivetEndpointEnv({
 			/>
 			<DiscreteInput
 				aria-label="environment variable value"
-				value={endpoint}
-				show
-			/>
-		</>
-	);
-}
-
-function RivetNamespaceEnv({ prefix }: { prefix?: string }) {
-	const dataProvider = useEngineCompatDataProvider();
-	return (
-		<>
-			<DiscreteInput
-				aria-label="environment variable key"
-				value={`${prefix ? `${prefix}_` : ""}RIVET_NAMESPACE`}
-				show
-			/>
-			<DiscreteInput
-				aria-label="environment variable value"
-				value={dataProvider.engineNamespace || ""}
+				value={dsn}
 				show
 			/>
 		</>
diff --git a/frontend/src/app/forms/connect-manual-serverless-form.tsx b/frontend/src/app/forms/connect-manual-serverless-form.tsx
index 6b308c4217..f44e99eddb 100644
--- a/frontend/src/app/forms/connect-manual-serverless-form.tsx
+++ b/frontend/src/app/forms/connect-manual-serverless-form.tsx
@@ -36,11 +36,31 @@ import { ActorRegion, useEngineCompatDataProvider } from "@/components/actors";
 import { defineStepper } from "@/components/ui/stepper";
 import { VisibilitySensor } from "@/components/visibility-sensor";
 
-const endpointSchema = z
+export const endpointSchema = z
 	.string()
 	.nonempty("Endpoint is required")
-	.url("Please enter a valid URL")
-	.endsWith("/api/rivet", "Endpoint must end with /api/rivet");
+	.url("Please enter a valid URL");
+
+export const configurationSchema = z.object({
+	runnerName: z.string().min(1, "Runner name is required"),
+	datacenters: z
+		.record(z.boolean())
+		.refine(
+			(data) => Object.values(data).some(Boolean),
+			"At least one datacenter must be selected",
+		),
+	headers: z.array(z.tuple([z.string(), z.string()])).default([]),
+	slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
+	maxRunners: z.coerce.number().min(1, "Must be at least 1"),
+	minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
+	runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
+	requestLifespan: z.coerce.number().min(0, "Must be 0 or greater"),
+});
+
+export const deploymentSchema = z.object({
+	success: z.boolean().refine((val) => val, "Connection failed"),
+	endpoint: endpointSchema,
+});
 
 export const stepper = defineStepper(
 	{
@@ -48,21 +68,7 @@ export const stepper = defineStepper(
 		title: "Configure",
 		assist: false,
 		next: "Next",
-		schema: z.object({
-			plan: z.string().min(1, "Please select a Vercel plan"),
-			runnerName: z.string().min(1, "Runner name is required"),
-			datacenters: z
-				.record(z.boolean())
-				.refine(
-					(data) => Object.values(data).some(Boolean),
-					"At least one datacenter must be selected",
-				),
-			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
-			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
-			maxRunners: z.coerce.number().min(1, "Must be at least 1"),
-			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
-			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
-		}),
+		schema: configurationSchema,
 	},
 	{
 		id: "step-2",
@@ -76,10 +82,7 @@ export const stepper = defineStepper(
 		title: "Deploy to Vercel",
 		assist: true,
 		next: "Done",
-		schema: z.object({
-			success: z.boolean().refine((val) => val, "Connection failed"),
-			endpoint: endpointSchema,
-		}),
+		schema: deploymentSchema,
 	},
 );
 
@@ -163,6 +166,7 @@ export const MinRunners = ({ className }: { className?: string }) => {
 							type="number"
 							{...field}
 							value={field.value || ""}
+							min={0}
 						/>
 					</FormControl>
 					<FormDescription className="col-span-1">
@@ -189,6 +193,7 @@ export const MaxRunners = ({ className }: { className?: string }) => {
 							type="number"
 							{...field}
 							value={field.value || ""}
+							min={0}
 						/>
 					</FormControl>
 					<FormDescription className="col-span-1">
@@ -218,6 +223,7 @@ export const SlotsPerRunner = ({ className }: { className?: string }) => {
 							type="number"
 							{...field}
 							value={field.value || ""}
+							min={0}
 						/>
 					</FormControl>
 					<FormDescription className="col-span-1">
@@ -240,7 +246,12 @@ export const RunnerMargin = ({ className }: { className?: string }) => {
 				<FormItem className={className}>
 					<FormLabel className="col-span-1">Runner Margin</FormLabel>
 					<FormControl className="row-start-2">
-						<Input type="number" {...field} value={field.value} />
+						<Input
+							type="number"
+							{...field}
+							value={field.value}
+							min={0}
+						/>
 					</FormControl>
 					<FormDescription className="col-span-1">
 						The number of extra runners to keep running to handle
@@ -265,7 +276,12 @@ export const RequestLifespan = ({ className }: { className?: string }) => {
 						Request Lifespan (seconds)
 					</FormLabel>
 					<FormControl className="row-start-2">
-						<Input type="number" {...field} value={field.value} />
+						<Input
+							type="number"
+							{...field}
+							value={field.value}
+							min={0}
+						/>
 					</FormControl>
 					<FormDescription className="col-span-1">
 						The maximum duration (in seconds) that a request can run
@@ -472,12 +488,13 @@ export function ConnectionCheck({ provider }: { provider: string }) {
 				<motion.div
 					layoutId="msg"
 					className={cn(
-						"text-center text-muted-foreground text-sm overflow-hidden flex items-center justify-center",
-						isSuccess && "text-primary-foreground",
-						isError && "text-destructive-foreground",
+						"border rounded-md text-center text-muted-foreground text-sm overflow-hidden flex items-center justify-safe-center transition-colors p-4",
+						isSuccess && "text-primary-foreground border-primary",
+						(isError || isRefetchError || isLoadingError) &&
+							"text-destructive-foreground border-destructive",
 					)}
 					initial={{ height: 0, opacity: 0.5 }}
-					animate={{ height: "8rem", opacity: 1 }}
+					animate={{ minHeight: "8rem", height: "auto", opacity: 1 }}
 				>
 					{isSuccess ? (
 						<>
@@ -504,17 +521,6 @@ export function ConnectionCheck({ provider }: { provider: string }) {
 									provider={provider}
 								/>
 							) : null}
-							<p>
-								Endpoint{" "}
-								<a
-									className="underline"
-									href={endpoint}
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									{endpoint}
-								</a>
-							</p>
 						</div>
 					) : (
 						<div className="flex flex-col items-center gap-2">
diff --git a/frontend/src/app/forms/connect-quick-vercel-form.tsx b/frontend/src/app/forms/connect-quick-vercel-form.tsx
index e078ec63ad..78f00d043a 100644
--- a/frontend/src/app/forms/connect-quick-vercel-form.tsx
+++ b/frontend/src/app/forms/connect-quick-vercel-form.tsx
@@ -1,13 +1,10 @@
 import z from "zod";
 import * as ConnectVercelForm from "@/app/forms/connect-vercel-form";
 import { defineStepper } from "@/components/ui/stepper";
-import { useSelectedDatacenter } from "../dialogs/connect-manual-serverfull-frame";
-
-const endpointSchema = z
-	.string()
-	.nonempty("Endpoint is required")
-	.url("Please enter a valid URL")
-	.endsWith("/api/rivet", "Endpoint must end with /api/rivet");
+import {
+	configurationSchema,
+	deploymentSchema,
+} from "./connect-manual-serverless-form";
 
 export const stepper = defineStepper(
 	{
@@ -16,18 +13,8 @@ export const stepper = defineStepper(
 		assist: false,
 		next: "Next",
 		schema: z.object({
-			runnerName: z.string().min(1, "Runner name is required"),
-			datacenters: z
-				.record(z.boolean())
-				.refine(
-					(data) => Object.values(data).some(Boolean),
-					"At least one datacenter must be selected",
-				),
-			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
-			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
-			maxRunners: z.coerce.number().min(1, "Must be at least 1"),
-			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
-			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
+			...configurationSchema.omit({ requestLifespan: true }).shape,
+			plan: z.string().min(1, "Please select a Vercel plan"),
 		}),
 	},
 	{
@@ -35,10 +22,7 @@ export const stepper = defineStepper(
 		title: "Configure Vercel endpoint",
 		assist: true,
 		next: "Done",
-		schema: z.object({
-			success: z.boolean().refine((val) => val, "Connection failed"),
-			endpoint: endpointSchema,
-		}),
+		schema: deploymentSchema,
 	},
 );
 
@@ -60,4 +44,6 @@ export const Endpoint = ConnectVercelForm.Endpoint;
 
 export const ConnectionCheck = ConnectVercelForm.ConnectionCheck;
 
+export const Plan = ConnectVercelForm.Plan;
+
 export const EnvVariables = ConnectVercelForm.EnvVariables;
diff --git a/frontend/src/app/forms/connect-railway-form.tsx b/frontend/src/app/forms/connect-railway-form.tsx
index ab34c2c7ae..cd85db39bb 100644
--- a/frontend/src/app/forms/connect-railway-form.tsx
+++ b/frontend/src/app/forms/connect-railway-form.tsx
@@ -1,17 +1,7 @@
-import * as ConnectManualServerlfullForm from "@/app/forms/connect-manual-serverfull-form";
+import * as ConnectManualServerlessForm from "@/app/forms/connect-manual-serverless-form";
 
-export const RunnerName = ConnectManualServerlfullForm.RunnerName;
-export const Datacenter = () => {
-	return (
-		<ConnectManualServerlfullForm.Datacenter
-			message={
-				<>
-					You can find the region your Railway runners are running in
-					under <i>Settings &gt; Deploy</i>
-				</>
-			}
-		/>
-	);
-};
+export const RunnerName = ConnectManualServerlessForm.RunnerName;
+export const Datacenters = ConnectManualServerlessForm.Datacenters;
 
-export const ConnectionCheck = ConnectManualServerlfullForm.ConnectionCheck;
+export const ConnectionCheck = ConnectManualServerlessForm.ConnectionCheck;
+export const Endpoint = ConnectManualServerlessForm.Endpoint;
diff --git a/frontend/src/app/forms/connect-vercel-form.tsx b/frontend/src/app/forms/connect-vercel-form.tsx
index b2d503379f..a5374fee10 100644
--- a/frontend/src/app/forms/connect-vercel-form.tsx
+++ b/frontend/src/app/forms/connect-vercel-form.tsx
@@ -18,37 +18,13 @@ import {
 	SelectValue,
 } from "@/components";
 import { defineStepper } from "@/components/ui/stepper";
-import { useSelectedDatacenter } from "../dialogs/connect-manual-serverfull-frame";
-import { EnvVariables as EnvVariablesSection } from "../env-variables";
-
-const endpointSchema = z
-	.string()
-	.nonempty("Endpoint is required")
-	.url("Please enter a valid URL")
-	.endsWith("/api/rivet", "Endpoint must end with /api/rivet");
+import { useEndpoint } from "../dialogs/connect-manual-serverfull-frame";
+import {
+	EnvVariables as EnvVariablesSection,
+	useRivetDsn,
+} from "../env-variables";
 
 export const stepper = defineStepper(
-	// {
-	// 	id: "initial-info",
-	// 	title: "Configure",
-	// 	assist: false,
-	// 	next: "Next",
-	// 	schema: z.object({
-	// 		plan: z.string().min(1, "Please select a Vercel plan"),
-	// 		runnerName: z.string().min(1, "Runner name is required"),
-	// 		datacenters: z
-	// 			.record(z.boolean())
-	// 			.refine(
-	// 				(data) => Object.values(data).some(Boolean),
-	// 				"At least one datacenter must be selected",
-	// 			),
-	// 		headers: z.array(z.tuple([z.string(), z.string()])).default([]),
-	// 		slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
-	// 		maxRunners: z.coerce.number().min(1, "Must be at least 1"),
-	// 		minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
-	// 		runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
-	// 	}),
-	// },
 	{
 		id: "api-route",
 		title: "Add API Route",
@@ -78,20 +54,10 @@ export const stepper = defineStepper(
 		assist: true,
 		next: "Done",
 		schema: z.object({
-			success: z.boolean().refine((val) => val, "Connection failed"),
-			endpoint: endpointSchema,
-			runnerName: z.string().min(1, "Runner name is required"),
-			datacenters: z
-				.record(z.boolean())
-				.refine(
-					(data) => Object.values(data).some(Boolean),
-					"At least one datacenter must be selected",
-				),
-			headers: z.array(z.tuple([z.string(), z.string()])).default([]),
-			slotsPerRunner: z.coerce.number().min(1, "Must be at least 1"),
-			maxRunners: z.coerce.number().min(1, "Must be at least 1"),
-			minRunners: z.coerce.number().min(0, "Must be 0 or greater"),
-			runnerMargin: z.coerce.number().min(0, "Must be 0 or greater"),
+			...ConnectManualServerlessForm.deploymentSchema.shape,
+			...ConnectManualServerlessForm.configurationSchema.omit({
+				requestLifespan: true,
+			}).shape,
 			plan: z.string().min(1, "Please select a Vercel plan"),
 		}),
 	},
@@ -148,20 +114,6 @@ export const RunnerMargin = ConnectManualServerlessForm.RunnerMargin;
 
 export const Headers = ConnectManualServerlessForm.Headers;
 
-// export const PLAN_TO_MAX_DURATION: Record<string, number> = {
-// 	hobby: 300,
-// 	pro: 800,
-// 	enterprise: 800,
-// };
-//
-// const integrationCode = ({ plan }: { plan: string }) =>
-// 	`import { toNextHandler } from "@rivetkit/next-js";
-// import { registry } from "@/rivet/registry";
-//
-// export const maxDuration = ${PLAN_TO_MAX_DURATION[plan] || 60};	// [!code highlight]
-//
-// export const { GET, POST, PUT, PATCH, HEAD, OPTIONS } = toNextHandler(registry);`;
-
 const integrationCode = ({ plan }: { plan: string }) =>
 	`import { toNextHandler } from "@rivetkit/next-js";
 import { registry } from "@/rivet/registry";
@@ -257,23 +209,17 @@ export const Endpoint = ConnectManualServerlessForm.Endpoint;
 
 export const ConnectionCheck = ConnectManualServerlessForm.ConnectionCheck;
 
-export const FrontendIntegrationCode = ({
-	token,
-	endpoint,
-	namespace,
-}: {
-	token: string;
-	endpoint: string;
-	namespace: string;
-}) => {
+export const FrontendIntegrationCode = () => {
+	const endpoint = useRivetDsn({
+		endpoint: useEndpoint(),
+		kind: "serverless",
+	});
 	const clientCode = `"use client";
 import { createRivetKit } from "@rivetkit/next-js/client";
 import type { registry } from "@/rivet/registry";
 
 export const { useActor } = createRivetKit<typeof registry>({
 	endpoint: "${endpoint}",
-	namespace: "${namespace}",
-	token: "${token}",
 });
 `;
 
@@ -302,10 +248,10 @@ export function EnvVariables() {
 	return (
 		<EnvVariablesSection
 			prefix="NEXT_PUBLIC"
-			endpoint={useSelectedDatacenter()}
+			endpoint={useEndpoint()}
 			kind="serverless"
 			prefixlessEndpoint
 			runnerName={useWatch({ name: "runnerName" }) as string}
 		/>
 	);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/forms/stepper-form.tsx b/frontend/src/app/forms/stepper-form.tsx
index 1b83b58bac..cd61f1b04b 100644
--- a/frontend/src/app/forms/stepper-form.tsx
+++ b/frontend/src/app/forms/stepper-form.tsx
@@ -170,7 +170,7 @@ function StepPanel<const Steps extends Step[]>({
 	stepper,
 	step,
 	content,
-	showPrevious,
+	showPrevious = true,
 	showControls = true,
 }: Pick<StepperFormProps<Steps>, "Stepper" | "content"> & {
 	stepper: Stepperize.Stepper<Steps>;
@@ -186,7 +186,7 @@ function StepPanel<const Steps extends Step[]>({
 			{showControls ? (
 				<Stepper.Controls>
 					{step.assist ? <NeedHelpButton /> : null}
-					{showPrevious ? (
+					{showPrevious && !stepper.isFirst ? (
 						<Button
 							type="button"
 							variant="outline"
diff --git a/frontend/src/app/runner-config-table.tsx b/frontend/src/app/runner-config-table.tsx
index 695389c2a2..a8f4f17407 100644
--- a/frontend/src/app/runner-config-table.tsx
+++ b/frontend/src/app/runner-config-table.tsx
@@ -1,7 +1,10 @@
 import {
+	faAws,
 	faCog,
 	faCogs,
 	faEllipsisVertical,
+	faGoogleCloud,
+	faHetznerH,
 	faNextjs,
 	faPencil,
 	faRailway,
@@ -397,14 +400,22 @@ function Provider({ metadata }: { metadata: unknown }) {
 		if (metadata.provider === "hetzner") {
 			return (
 				<div className="whitespace-nowrap">
-					<Icon icon={faCogs} className="mr-1" /> Hetzner
+					<Icon icon={faHetznerH} className="mr-1" /> Hetzner
+				</div>
+			);
+		}
+		if (metadata.provider === "aws") {
+			return (
+				<div className="whitespace-nowrap">
+					<Icon icon={faAws} className="mr-1" /> AWS ECS
 				</div>
 			);
 		}
 		if (metadata.provider === "gcp") {
 			return (
 				<div className="whitespace-nowrap">
-					<Icon icon={faCog} className="mr-1" /> Google Cloud Run
+					<Icon icon={faGoogleCloud} className="mr-1" /> Google Cloud
+					Run
 				</div>
 			);
 		}
diff --git a/frontend/src/utils/use-railway-template-link.ts b/frontend/src/utils/use-railway-template-link.ts
index c652b5dc4a..a5ec14c38e 100644
--- a/frontend/src/utils/use-railway-template-link.ts
+++ b/frontend/src/utils/use-railway-template-link.ts
@@ -1,30 +1,31 @@
-import { useQuery } from "@tanstack/react-query";
-import { useEngineCompatDataProvider } from "@/components/actors";
-import { engineEnv } from "@/lib/env";
+import { useMemo } from "react";
+import { useEndpoint } from "@/app/dialogs/connect-manual-serverfull-frame";
+import { useRivetDsn } from "@/app/env-variables";
 
 export function useRailwayTemplateLink({
 	runnerName,
-	datacenter,
+	kind,
 }: {
 	runnerName: string;
-	datacenter: string;
+	kind: "serverless" | "serverfull";
 }) {
-	const dataProvider = useEngineCompatDataProvider();
-	const { data: token } = useQuery(
-		dataProvider.engineAdminTokenQueryOptions(),
-	);
-	const endpoint = useDatacenterEndpoint({ datacenter });
+	const endpoint = useEndpoint();
+	const dsn = useRivetDsn({ endpoint, kind });
 
-	return `https://railway.com/new/template/rivet-cloud-starter?referralCode=RC7bza&utm_medium=integration&utm_source=template&utm_campaign=generic&RIVET_TOKEN=${token || ""}&RIVET_ENDPOINT=${
-		endpoint || ""
-	}&RIVET_NAMESPACE=${
-		dataProvider.engineNamespace || ""
-	}&RIVET_RUNNER=${runnerName || ""}`;
-}
+	return useMemo(() => {
+		const url = new URL(
+			"https://railway.com/new/template/rivet-cloud-starter",
+		);
+		url.searchParams.set("referralCode", "RC7bza");
+		url.searchParams.set("utm_medium", "integration");
+		url.searchParams.set("utm_source", "template");
+		url.searchParams.set("utm_campaign", "generic");
+
+		url.searchParams.set("RIVET_RUNNER", runnerName || "");
+		if (dsn) {
+			url.searchParams.set("RIVET_ENDPOINT", dsn);
+		}
 
-const useDatacenterEndpoint = ({ datacenter }: { datacenter: string }) => {
-	const { data } = useQuery(
-		useEngineCompatDataProvider().datacenterQueryOptions(datacenter),
-	);
-	return data?.url || engineEnv().VITE_APP_API_URL;
-};
+		return url.toString();
+	}, [runnerName, dsn]);
+}