diff --git a/packages/common/src/fixtures/other/multi-step.xform.xml b/packages/common/src/fixtures/other/multi-step.xform.xml
new file mode 100644
index 000000000..be83df2b3
--- /dev/null
+++ b/packages/common/src/fixtures/other/multi-step.xform.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0"?>
+<h:html xmlns="http://www.w3.org/2002/xforms"
+  xmlns:ev="http://www.w3.org/2001/xml-events"
+  xmlns:h="http://www.w3.org/1999/xhtml"
+  xmlns:jr="http://openrosa.org/javarosa"
+  xmlns:orx="http://openrosa.org/xforms/"
+  xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+  <h:head>
+    <h:title>Multi Step XForm</h:title>
+    <model>
+      <instance>
+        <root id="minimal">
+          <first-question/>
+          <second-question/>
+          <third-question/>
+          <meta>
+            <instanceID/>
+          </meta>
+        </root>
+      </instance>
+      <bind nodeset="/root/first-question" type="string" required="true()"/>
+      <bind nodeset="/root/second-question" type="string" required="true()"/>
+      <bind nodeset="/root/third-question" type="string" required="true()"/>
+      <bind nodeset="/root/meta/instanceID" type="string"/>
+    </model>
+  </h:head>
+  <h:body>
+    <input ref="/root/first-question">
+      <label>First question</label>
+    </input>
+    <input ref="/root/second-question">
+      <label>Second question</label>
+    </input>
+    <input ref="/root/third-question">
+      <label>Third question</label>
+    </input>
+  </h:body>
+</h:html>
diff --git a/packages/web-forms/src/components/FormGroup.vue b/packages/web-forms/src/components/FormGroup.vue
index 968ae5592..3537c1885 100644
--- a/packages/web-forms/src/components/FormGroup.vue
+++ b/packages/web-forms/src/components/FormGroup.vue
@@ -4,7 +4,9 @@ import { computed } from 'vue';
 import FormPanel from './FormPanel.vue';
 import QuestionList from './QuestionList.vue';
 
-const props = defineProps<{ node: GroupNode }>();
+const props = withDefaults(defineProps<{ node: GroupNode, toggleable?: boolean }>(), {
+	toggleable: false,
+});
 
 const classes = ['group'];
 
@@ -18,7 +20,7 @@ const tableLayout = computed(() => {
 </script>
 
 <template>
-	<FormPanel :title="node.currentState.label?.asString" :no-ui="!node.currentState.label" :class="classes">
+	<FormPanel :title="node.currentState.label?.asString" :no-ui="!node.currentState.label" :toggleable="props.toggleable" :class="classes">
 		<div :class="{ 'table-layout': tableLayout, 'gap-2': !tableLayout, 'flex': true, 'flex-column': true }">
 			<QuestionList :nodes="node.currentState.children" />
 		</div>
diff --git a/packages/web-forms/src/components/FormPanel.vue b/packages/web-forms/src/components/FormPanel.vue
index f673a5e04..5396b5639 100644
--- a/packages/web-forms/src/components/FormPanel.vue
+++ b/packages/web-forms/src/components/FormPanel.vue
@@ -12,6 +12,7 @@ export interface PanelProps {
 	class?: string[] | string;
 	labelIcon?: string;
 	labelNumber?: number;
+    toggleable?: boolean;
 }
 
 const props = withDefaults(defineProps<PanelProps>(), {
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<PanelProps>(), {
 	class: undefined,
 	labelIcon: undefined,
 	labelNumber: undefined,
+    toggleable: false,
 });
 
 const panelClass = computed(() => [
@@ -31,7 +33,9 @@ const panelClass = computed(() => [
 const panelState = ref(false);
 
 const toggle = () => {
-	panelState.value = !panelState.value;
+    if (props.toggleable) {
+		panelState.value = !panelState.value;
+    }
 };
 
 const menu = ref<Menu & MenuState>();
@@ -40,10 +44,11 @@ const toggleMenu = (event: Event) => {
 	menu.value?.toggle(event);
 };
 </script>
+
 <template>
-	<Panel v-if="!noUi" :class="panelClass" :toggleable="true" :collapsed="panelState">
+    <Panel v-if="!noUi" :class="[panelClass, { 'toggleable-enabled': toggleable }]" :toggleable="toggleable" :collapsed="toggleable ? panelState : false">
 		<template #header>
-			<div class="panel-title" role="button" @click="toggle">
+            <div v-if="toggleable" class="panel-title" role="button" @click="toggle">
 				<h2>
 					<span class="chevron" :class="panelState ? 'icon-keyboard_arrow_down' : 'icon-keyboard_arrow_up'" />
 					<span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
@@ -51,6 +56,13 @@ const toggleMenu = (event: Event) => {
 					<span v-if="labelIcon" class="ml-2" :class="labelIcon" />
 				</h2>
 			</div>
+            <div v-else>
+                <h2>
+                    <span v-if="labelNumber" class="label-number">{{ labelNumber }}</span>
+                    <span>{{ title }}</span>
+                    <span v-if="labelIcon" class="ml-2" :class="labelIcon" />
+                </h2>
+            </div>
 		</template>
 		<template v-if="menuItems && menuItems.length > 0" #icons>
 			<Button severity="secondary" rounded class="btn-context" :class="{ 'p-focus': menu?.overlayVisible }" icon="icon-more_vert" aria-label="More" @click="toggleMenu" />
@@ -129,9 +141,8 @@ h2 {
 	}
 
 	:deep(.p-panel-content) {
-		border-left: 2px solid var(--gray-200);
+		box-shadow: none;
 		margin-left: 10px;
-		border-radius: 0;
 		padding: 0 0 0 1.5rem;
 	}
 
@@ -140,6 +151,11 @@ h2 {
 	}
 }
 
+.toggleable-enabled :deep(.p-panel-content) {
+	border-left: 2px solid var(--gray-200);
+	border-radius: 0;
+}
+
 .content-wrapper {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/web-forms/src/components/OdkWebForm.vue b/packages/web-forms/src/components/OdkWebForm.vue
index fa2b23a09..6767b0979 100644
--- a/packages/web-forms/src/components/OdkWebForm.vue
+++ b/packages/web-forms/src/components/OdkWebForm.vue
@@ -22,6 +22,7 @@ import { computed, getCurrentInstance, provide, ref, watchEffect } from 'vue';
 import FormLoadFailureDialog from './Form/FormLoadFailureDialog.vue';
 import FormHeader from './FormHeader.vue';
 import QuestionList from './QuestionList.vue';
+import QuestionStepper from './QuestionStepper.vue';
 
 const webFormsVersion = __WEB_FORMS_VERSION__;
 
@@ -30,6 +31,13 @@ export interface OdkWebFormsProps {
 	readonly fetchFormAttachment: FetchFormAttachment;
 	readonly missingResourceBehavior?: MissingResourceBehavior;
 
+	/**
+	 * Note: by default all questions will be displayed in a single list,
+	 * with collapsable groups. This param changes to a stepper layout
+	 * closer to Collect.
+	 */
+	readonly stepperLayout?: boolean;
+
 	/**
 	 * Note: this parameter must be set when subscribing to the
 	 * {@link OdkWebFormEmits.submitChunked | submitChunked} event.
@@ -43,7 +51,9 @@ export interface OdkWebFormsProps {
 	readonly editInstance?: EditInstanceOptions;
 }
 
-const props = defineProps<OdkWebFormsProps>();
+const props = withDefaults(defineProps<OdkWebFormsProps>(), {
+	stepperLayout: false,
+});
 
 const hostSubmissionResultCallbackFactory = (
 	currentState: FormStateSuccessResult
@@ -229,18 +239,20 @@ watchEffect(() => {
 				<template #content>
 					<div class="form-questions">
 						<div class="flex flex-column gap-2">
-							<QuestionList :nodes="state.root.currentState.children" />
+							<QuestionList v-if="!props.stepperLayout" :nodes="state.root.currentState.children" />
+							<!-- Note that QuestionStepper has the 'Send' button integrated instead of using the button below -->
+							<QuestionStepper v-if="props.stepperLayout" :nodes="state.root.currentState.children" @sendFormFromStepper="handleSubmit(state)" />
 						</div>
 					</div>
 				</template>
 			</Card>
 
-			<div class="footer flex justify-content-end flex-wrap gap-3">
+			<div v-if="!props.stepperLayout" class="footer flex justify-content-end flex-wrap gap-3">
 				<Button label="Send" rounded @click="handleSubmit(state)" />
 			</div>
 		</div>
 
-		<div class="powered-by-wrapper">
+		<div v-if="!props.stepperLayout" class="powered-by-wrapper">
 			<a class="anchor" href="https://getodk.org" target="_blank">
 				<span class="caption">Powered by</span>
 				<img
diff --git a/packages/web-forms/src/components/QuestionList.vue b/packages/web-forms/src/components/QuestionList.vue
index f1f686aee..053313da5 100644
--- a/packages/web-forms/src/components/QuestionList.vue
+++ b/packages/web-forms/src/components/QuestionList.vue
@@ -45,7 +45,7 @@ const isControlNode = (node: NonStructuralNode): node is ControlNode => {
 	<template v-for="node in nodes" :key="node.nodeId">
 		<template v-if="node.currentState.relevant">
 			<!-- Render group nodes -->
-			<FormGroup v-if="isGroupNode(node)" :node="node" />
+			<FormGroup v-if="isGroupNode(node)" :node="node" toggleable />
 
 			<!-- Render repeat nodes -->
 			<RepeatRange v-else-if="isRepeatRangeNode(node)" :node="node" />
diff --git a/packages/web-forms/src/components/QuestionStepper.vue b/packages/web-forms/src/components/QuestionStepper.vue
new file mode 100644
index 000000000..03d14a40f
--- /dev/null
+++ b/packages/web-forms/src/components/QuestionStepper.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, computed, provide } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+import type {
+	AnyControlNode,
+	AnyUnsupportedControlNode,
+	GeneralChildNode,
+	GroupNode,
+	RepeatRangeNode,
+} from '@getodk/xforms-engine';
+import FormGroup from './FormGroup.vue';
+import FormQuestion from './FormQuestion.vue';
+import RepeatRange from './RepeatRange.vue';
+import ExpectModelNode from './dev-only/ExpectModelNode.vue';
+import Steps from 'primevue/steps';
+import ProgressBar from 'primevue/progressbar';
+import Button from 'primevue/button';
+
+const props = defineProps<{ nodes: readonly GeneralChildNode[] }>();
+const emit = defineEmits(['sendFormFromStepper']);
+
+const isGroupNode = (node: GeneralChildNode): node is GroupNode => {
+	return node.nodeType === 'group';
+};
+
+type NonGroupNode = Exclude<GeneralChildNode, GroupNode>;
+
+const isRepeatRangeNode = (node: NonGroupNode): node is RepeatRangeNode => {
+	return (
+		node.nodeType === 'repeat-range:controlled' || node.nodeType === 'repeat-range:uncontrolled'
+	);
+};
+
+type NonStructuralNode = Exclude<NonGroupNode, RepeatRangeNode>;
+
+type ControlNode = AnyControlNode | AnyUnsupportedControlNode;
+
+const isControlNode = (node: NonStructuralNode): node is ControlNode => {
+	const { nodeType } = node;
+
+	return (
+		nodeType === 'input' ||
+		nodeType === 'note' ||
+		nodeType === 'select' ||
+		nodeType === 'trigger' ||
+		nodeType === 'range' ||
+		nodeType === 'rank' ||
+		nodeType === 'upload'
+	);
+};
+
+// Compute step items (only groups, repeat ranges, and control nodes should be steps)
+const relevantNodes = computed(() =>
+	props.nodes.filter(node => node.currentState.relevant)
+);
+const steps = computed(() =>
+	relevantNodes.value
+		.filter(node => isGroupNode(node) || isRepeatRangeNode(node) || isControlNode(node))
+);
+
+// Handle stepper state
+const firstStep = 0;
+const finalStep = computed(() => steps.value.length - 1);
+const currentStep = ref(firstStep);
+const submitPressed = ref(false);
+provide('submitPressed', submitPressed);
+
+const allFieldsValid = () => {
+    // Manually trigger submitPressed to display error messages
+	submitPressed.value = true;
+
+    const currentNode = steps.value[currentStep.value];
+
+    // Check group error array
+    if (isGroupNode(currentNode) && currentNode.validationState.violations.length > 0) {
+        return false;
+
+    // Check question single error
+    } else if (currentNode.validationState.violation) {
+        return false;
+    }
+
+    return true;
+}
+const nextStep = () => {
+    if (!allFieldsValid()) {
+        // There was an error validating
+        return false;
+    }
+
+    // Do not increment further if at end of form
+	if (currentStep.value < steps.value.length - 1) {
+        // Reset validation triggered later in the form
+	    submitPressed.value = false;
+		currentStep.value++;
+	}
+};
+const prevStep = () => {
+	if (currentStep.value > firstStep) {
+		currentStep.value--;
+	}
+};
+
+// // Calculate stepper progress
+// const totalNodes = computed(() => 
+// 	Math.max(relevantNodes.value.length - 1, 1) // Ensure at least 1 to avoid division by zero
+// );
+// 
+// const currentNodeIndex = computed(() => {
+//    const activeNode = steps.value[currentStep.value];
+//    if (!activeNode) return 0;
+//
+//    // Find the current node's position among relevant nodes
+//    const index = relevantNodes.value.findIndex(node => node.nodeId === activeNode.nodeId);
+//    return Math.max(index, 0); // Ensure it starts at 0
+// });
+//
+// const progress = computed(() => {
+// 	if (totalNodes.value === 1) return 100; // If there's only one relevant node, treat it as complete
+// 	return (currentNodeIndex.value / totalNodes.value) * 100;
+// });
+</script>
+
+<template>
+    <!-- TODO -->
+    <!-- <ProgressBar :value="progress"></ProgressBar> -->
+
+	<div class="stepper-container">
+		<div v-for="(step, index) in steps" :key="step.nodeId">
+			<template v-if="index === currentStep">
+				<!-- Render group nodes -->
+				<FormGroup v-if="isGroupNode(step)" :node="step" />
+
+				<!-- Render repeat nodes -->
+				<RepeatRange v-else-if="isRepeatRangeNode(step)" :node="step" />
+
+				<!-- Render individual questions -->
+				<FormQuestion v-else-if="isControlNode(step)" :question="step" />
+
+				<ExpectModelNode v-else :node="step" />
+			</template>
+		</div>
+	</div>
+
+    <div class="navigation-button-group">
+        <!-- If swapping to arrows: 🡨 🡪 -->
+        <Button v-if="currentStep > firstStep" class="navigation-button" @click="prevStep" rounded outlined>
+					<span class="icon-keyboard_arrow_left"></span>
+				</Button>
+        <Button v-if="currentStep === finalStep" class="navigation-button" @click="allFieldsValid ? emit('sendFormFromStepper') : null" rounded>
+					<span class="icon-cloud_upload"></span>
+				</Button>
+        <!-- Note the button ordering is important here as we use a last-child selector for styling -->
+        <Button v-if="currentStep < finalStep" class="navigation-button" @click="nextStep" rounded outlined>
+					<span class="icon-keyboard_arrow_right"></span>
+				</Button>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.stepper-container {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-y: auto;
+	padding-bottom: 3rem;
+
+	:deep(.p-panel) {
+		box-shadow: none;
+	}
+}
+
+.navigation-button-group {
+	display: flex;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: white;
+	padding: 1rem;
+	justify-content: space-between;
+	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Ensure Next button is on the right when Back is hidden */
+.navigation-button-group .navigation-button:last-child {
+	margin-left: auto;
+}
+
+/* If only one button is visible, align it to the right */
+.navigation-button-group:has(.navigation-button:first-child:last-child) {
+	justify-content: flex-end;
+}
+
+.navigation-button {
+    padding-left: 3rem;
+    padding-right: 3rem;
+    font-size: 1rem;
+}
+
+.navigation-button > span {
+		font-weight: bold;
+		font-size: 30px;	
+}
+</style>
diff --git a/packages/web-forms/tests/components/OdkWebForm.test.ts b/packages/web-forms/tests/components/OdkWebForm.test.ts
index e3d6f959f..6d145e590 100644
--- a/packages/web-forms/tests/components/OdkWebForm.test.ts
+++ b/packages/web-forms/tests/components/OdkWebForm.test.ts
@@ -443,4 +443,154 @@ describe('OdkWebForm', () => {
 			expect(textInput.element.value).toBe(expectedPostSubmissionValue);
 		});
 	});
+
+	describe('stepper layout', () => {
+		beforeEach(async () => {
+			// Replace form with one including two questions
+			formXML = await getFormXml('multi-step.xform.xml');
+		});
+
+		it('renders stepper layout when stepperLayout prop is true', async () => {
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+			});
+			await flushPromises();
+
+			expect(component.find('.stepper-container').exists()).toBe(true);
+			expect(component.find('.navigation-button').exists()).toBe(true);
+		});
+
+		it('shows only one question at a time in stepper layout and allows navigation', async () => {
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+			});
+			await flushPromises();
+
+			// --- First Question ---
+			let visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('First question'))
+			).toBe(true);
+
+			// Fill first input (assuming it's an input element)
+			await visibleQuestions[0].find('input').setValue('Answer 1');
+
+			expect(component.find('button[aria-label="Back"]').exists()).toBe(false);
+			let nextButton = component.find('button[aria-label="Next"]');
+			expect(nextButton.exists()).toBe(true);
+			expect(component.find('button[aria-label="Send"]').exists()).toBe(false);
+
+			await nextButton.trigger('click');
+
+			// --- Second Question ---
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('Second question'))
+			).toBe(true);
+
+			// Fill second input
+			await visibleQuestions[0].find('input').setValue('Answer 2');
+
+			const backButton = component.find('button[aria-label="Back"]');
+			expect(backButton.exists()).toBe(true);
+			expect(component.find('button[aria-label="Next"]').exists()).toBe(true);
+			expect(component.find('button[aria-label="Send"]').exists()).toBe(false);
+
+			// Test back button works (return to first question)
+			await backButton.trigger('click');
+
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('First question'))
+			).toBe(true);
+
+			// Move to final / third question
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+
+			// --- Third Question ---
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('Third question'))
+			).toBe(true);
+
+			// Fill third input
+			await visibleQuestions[0].find('input').setValue('Answer 3');
+
+			expect(component.find('button[aria-label="Back"]').exists()).toBe(true);
+			expect(component.find('button[aria-label="Next"]').exists()).toBe(false);
+			expect(component.find('button[aria-label="Send"]').exists()).toBe(true);
+
+			// Submit form
+			const sendButton = component.find('button[aria-label="Send"]');
+			await sendButton.trigger('click');
+
+			// Ensure no form error messages are shown
+			const errorMessages = component.findAll('.form-error-message').filter((el) => el.isVisible());
+			expect(errorMessages.length).toBe(0);
+		});
+
+		it('blocks navigation and send in stepper layout if current step is invalid', async () => {
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+			});
+			await flushPromises();
+
+			let nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+
+			// Displays an error, remains on first question
+			expect(component.get('.validation-message').isVisible()).toBe(true);
+			expect(component.get('.validation-message').text()).toBe('Condition not satisfied: required');
+			let visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			expect(visibleQuestions.length).toBe(1);
+			expect(
+				visibleQuestions[0].findAll('span').some((span) => span.text().includes('First question'))
+			).toBe(true);
+		});
+
+		it('allows submission once all steps are valid in stepper layout', async () => {
+			const mockSubmit = vi.fn();
+			const component = mountComponent(formXML, {
+				overrideProps: { stepperLayout: true },
+				onSubmit: mockSubmit,
+			});
+			await flushPromises();
+
+			// Progress to end of form
+			let visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			await visibleQuestions[0].find('input').setValue('Answer 1');
+			let nextButton = component.find('button[aria-label="Next"]');
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			await visibleQuestions[0].find('input').setValue('Answer 2');
+			nextButton = component.find('button[aria-label="Next"]');
+			await nextButton.trigger('click');
+
+			// Check entire form validation works
+			expect(component.get('.form-error-message').isVisible()).toBe(false);
+			const sendButton = component.find('button[aria-label="Send"]');
+			await sendButton.trigger('click');
+			expect(component.get('.form-error-message').isVisible()).toBe(true);
+
+			// Fill final question to make form valid, and check submission sends
+			visibleQuestions = component.findAll('.question-container').filter((q) => q.isVisible());
+			await visibleQuestions[0].find('input').setValue('Answer 3');
+			await sendButton.trigger('click');
+			expect(component.get('.form-error-message').isVisible()).toBe(false);
+			expect(mockSubmit).toHaveBeenCalled();
+		});
+
+		it('always shows the stepper next and back buttons at the bottom of the screen', async () => {
+			// TODO
+			console.log('here');
+		});
+	});
 });