diff --git a/.gitignore b/.gitignore
index 89c6698..45f5bf2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -76,4 +76,7 @@ frontend/e2e/playwright-report/
 
 skills-lock.json
 
-semgrep-rules/
\ No newline at end of file
+semgrep-rules/
+
+# Screenshots
+*.png
\ No newline at end of file
diff --git a/forms_pro/api/submission/test_submission_validation.py b/forms_pro/api/submission/test_submission_validation.py
index 320f71d..8e0a645 100644
--- a/forms_pro/api/submission/test_submission_validation.py
+++ b/forms_pro/api/submission/test_submission_validation.py
@@ -243,3 +243,41 @@ def test_required_data_field_still_validated_when_heading_present(self):
     def test_display_only_fieldtypes_contains_all_heading_levels(self):
         for fieldtype in ("Heading 1", "Heading 2", "Heading 3"):
             self.assertIn(fieldtype, _DISPLAY_ONLY_FIELDTYPES)
+
+
+class TestPageBreakValidation(unittest.TestCase):
+    def test_page_break_in_display_only_fieldtypes(self):
+        self.assertIn("Page Break", _DISPLAY_ONLY_FIELDTYPES)
+
+    def test_page_break_skipped_even_when_required(self):
+        """reqd=1 Page Break must never trigger a validation error."""
+        form = _form(_field("pb", fieldtype="Page Break", reqd=1))
+        _validate_form_response(form, {})  # must not raise
+
+    def test_required_data_field_still_validated_when_page_break_present(self):
+        """Page Break being skipped must not suppress validation of adjacent required fields."""
+        import frappe
+
+        form = _form(
+            _field("step_two", fieldtype="Page Break"),
+            _field("full_name", fieldtype="Data", reqd=1),
+        )
+        with self.assertRaises(frappe.ValidationError) as ctx:
+            _validate_form_response(form, {})
+        self.assertIn("Full Name", str(ctx.exception))
+
+
+class TestPageBreakProperties(unittest.TestCase):
+    def test_page_break_stores_value_is_false(self):
+        """Page Break maps to Tab Break which is a no_value_field — stores_value must be False."""
+        from frappe.model import no_value_fields
+
+        from forms_pro.forms_pro.doctype.form_field.form_field import FORM_TO_FRAPPE_FIELDTYPE
+
+        mapped = FORM_TO_FRAPPE_FIELDTYPE["Page Break"]
+        self.assertIn(mapped["fieldtype"], no_value_fields)
+
+    def test_page_break_frappe_fieldtype_is_tab_break(self):
+        from forms_pro.forms_pro.doctype.form_field.form_field import FORM_TO_FRAPPE_FIELDTYPE
+
+        self.assertEqual(FORM_TO_FRAPPE_FIELDTYPE["Page Break"]["fieldtype"], "Tab Break")
diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.json b/forms_pro/forms_pro/doctype/form_field/form_field.json
index 5c0f1fd..0d0cc33 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.json
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.json
@@ -40,7 +40,7 @@
    "fieldtype": "Select",
    "in_list_view": 1,
    "label": "Fieldtype",
-   "options": "Attach\nData\nNumber\nEmail\nDate\nDate Time\nDate Range\nTime Picker\nPassword\nSelect\nSwitch\nTextarea\nText Editor\nLink\nCheckbox\nRating\nPhone\nTable\nMultiselect\nHeading 1\nHeading 2\nHeading 3",
+   "options": "Attach\nData\nNumber\nEmail\nDate\nDate Time\nDate Range\nTime Picker\nPassword\nSelect\nSwitch\nTextarea\nText Editor\nLink\nCheckbox\nRating\nPhone\nTable\nMultiselect\nHeading 1\nHeading 2\nHeading 3\nPage Break",
    "reqd": 1
   },
   {
diff --git a/forms_pro/forms_pro/doctype/form_field/form_field.py b/forms_pro/forms_pro/doctype/form_field/form_field.py
index a1a1bc7..0f447d5 100644
--- a/forms_pro/forms_pro/doctype/form_field/form_field.py
+++ b/forms_pro/forms_pro/doctype/form_field/form_field.py
@@ -34,10 +34,11 @@
     "Heading 1": {"fieldtype": "HTML"},
     "Heading 2": {"fieldtype": "HTML"},
     "Heading 3": {"fieldtype": "HTML"},
+    "Page Break": {"fieldtype": "Tab Break"},
 }
 
 
-_DISPLAY_ONLY_FIELDTYPES = {"Heading 1", "Heading 2", "Heading 3"}
+_DISPLAY_ONLY_FIELDTYPES = {"Heading 1", "Heading 2", "Heading 3", "Page Break"}
 
 
 class FormField(Document):
@@ -78,6 +79,7 @@ class FormField(Document):
             "Heading 1",
             "Heading 2",
             "Heading 3",
+            "Page Break",
         ]
         hidden: DF.Check
         label: DF.Data
@@ -114,13 +116,12 @@ def to_frappe_field(self) -> dict:
         }
 
     def get_options(self) -> str | None:
-        if self.fieldtype in _DISPLAY_ONLY_FIELDTYPES:
-            HEADING_MAP = {
-                "Heading 1": "h1",
-                "Heading 2": "h2",
-                "Heading 3": "h3",
-            }
-            tag = HEADING_MAP.get(self.fieldtype, "h2")
+        HEADING_MAP = {
+            "Heading 1": "h1",
+            "Heading 2": "h2",
+            "Heading 3": "h3",
+        }
+        if tag := HEADING_MAP.get(self.fieldtype):
             return f"<{tag}>{escape_html(self.label or '')}</{tag}>"
 
         return self.options
diff --git a/forms_pro/tests/test_page_break.py b/forms_pro/tests/test_page_break.py
new file mode 100644
index 0000000..cf3145d
--- /dev/null
+++ b/forms_pro/tests/test_page_break.py
@@ -0,0 +1,71 @@
+import frappe
+from frappe.tests import IntegrationTestCase
+
+from forms_pro.tests.factories.form_factory import FormFactory
+
+
+class TestPageBreakIntegration(IntegrationTestCase):
+    def test_form_with_page_break_saves(self):
+        form = FormFactory.create()
+        form.append(
+            "fields",
+            {
+                "label": "Your Name",
+                "fieldname": "your_name",
+                "fieldtype": "Data",
+                "reqd": 0,
+                "row_index": 0,
+                "column_index": 0,
+                "cell_index": 0,
+            },
+        )
+        form.append(
+            "fields",
+            {
+                "label": "Step 2",
+                "fieldname": "step_2",
+                "fieldtype": "Page Break",
+                "reqd": 0,
+                "row_index": 1,
+                "column_index": 0,
+                "cell_index": 0,
+            },
+        )
+        form.append(
+            "fields",
+            {
+                "label": "Your Email",
+                "fieldname": "your_email",
+                "fieldtype": "Email",
+                "reqd": 0,
+                "row_index": 2,
+                "column_index": 0,
+                "cell_index": 0,
+            },
+        )
+        form.save()
+
+        form.reload()
+        fieldtypes = [f.fieldtype for f in form.fields]
+        self.assertIn("Page Break", fieldtypes)
+
+    def test_page_break_syncs_as_tab_break_to_linked_doctype(self):
+        form = FormFactory.create()
+        form.append(
+            "fields",
+            {
+                "label": "Step 2",
+                "fieldname": "step_2",
+                "fieldtype": "Page Break",
+                "reqd": 0,
+                "row_index": 0,
+                "column_index": 0,
+                "cell_index": 0,
+            },
+        )
+        form.save()
+
+        doctype_doc = frappe.get_doc("DocType", form.linked_doctype)
+        synced = {f.fieldname: f for f in doctype_doc.fields}
+        self.assertIn("step_2", synced)
+        self.assertEqual(synced["step_2"].fieldtype, "Tab Break")
diff --git a/frontend/e2e/helpers/form-builder.ts b/frontend/e2e/helpers/form-builder.ts
index d5af874..79f4041 100644
--- a/frontend/e2e/helpers/form-builder.ts
+++ b/frontend/e2e/helpers/form-builder.ts
@@ -304,4 +304,69 @@ export class FormBuilderPage {
   publishButton() {
     return this.page.getByRole("button", { name: /^publish$/i });
   }
+
+  // ---- Step navigation (SectionNavBar) ----
+
+  stepNav(): Locator {
+    return this.page.locator('nav[aria-label="Form steps"]');
+  }
+
+  // The remove "X" is nested inside the tab button, so tabs after the first
+  // have the accessible name "<label> Remove step" — match the label exactly,
+  // with that suffix optional.
+  stepTab(label: string): Locator {
+    const escaped = label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return this.stepNav().getByRole("button", {
+      name: new RegExp(`^${escaped}( Remove step)?$`),
+    });
+  }
+
+  removeStepControl(label: string): Locator {
+    return this.stepTab(label).getByLabel("Remove step");
+  }
+
+  activeStepTab(): Locator {
+    return this.stepNav().locator('button[aria-current="true"]');
+  }
+
+  async addStep() {
+    await this.stepNav().getByRole("button", { name: "Add Step" }).click();
+  }
+
+  async switchToStep(label: string) {
+    await this.stepTab(label).click();
+  }
+
+  async renameStep(oldLabel: string, newLabel: string) {
+    await this.stepTab(oldLabel).dblclick();
+    const input = this.stepNav().getByRole("textbox");
+    await input.waitFor({ state: "visible" });
+    await input.fill(newLabel);
+    await input.press("Enter");
+  }
+
+  // mode "keep"  -> "Move fields to previous step"
+  // mode "delete"-> "Remove step and fields"
+  // omit mode for empty steps (no dialog appears)
+  async removeStep(label: string, mode?: "keep" | "delete") {
+    await this.removeStepControl(label).click();
+    if (mode === "keep") {
+      await this.page
+        .getByRole("button", { name: "Move fields to previous step" })
+        .click();
+    } else if (mode === "delete") {
+      await this.page
+        .getByRole("button", { name: "Remove step and fields" })
+        .click();
+    }
+  }
+
+  async save() {
+    const saveBtn = this.page.getByRole("button", {
+      name: "Save",
+      exact: true,
+    });
+    await saveBtn.click();
+    await saveBtn.waitFor({ state: "hidden", timeout: 30000 });
+  }
 }
diff --git a/frontend/e2e/helpers/form-fields.ts b/frontend/e2e/helpers/form-fields.ts
new file mode 100644
index 0000000..0261ef9
--- /dev/null
+++ b/frontend/e2e/helpers/form-fields.ts
@@ -0,0 +1,82 @@
+import { expect, type APIRequestContext } from "@playwright/test";
+
+export type SeedField = {
+  label: string;
+  fieldtype?: string;
+  fieldname?: string;
+  reqd?: 0 | 1;
+  hidden?: 0 | 1;
+  conditional_logic?: string;
+  row_index?: number;
+  column_index?: number;
+  cell_index?: number;
+};
+
+function defaultFieldname(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "");
+}
+
+// Replace a form's full field list via REST so the builder/public page load a
+// known layout. row_index defaults to the array position, which keeps every
+// field on its own row — fine for step tests, which don't care about columns.
+export async function setFormFields(
+  apiContext: APIRequestContext,
+  formId: string,
+  fields: SeedField[]
+) {
+  const res = await apiContext.put(`/api/resource/Form/${formId}`, {
+    data: {
+      fields: fields.map((f, i) => ({
+        idx: i + 1,
+        fieldtype: f.fieldtype ?? "Data",
+        label: f.label,
+        fieldname: f.fieldname ?? defaultFieldname(f.label),
+        reqd: f.reqd ?? 0,
+        hidden: f.hidden ?? 0,
+        conditional_logic: f.conditional_logic ?? "",
+        row_index: f.row_index ?? i,
+        column_index: f.column_index ?? 0,
+        cell_index: f.cell_index ?? 0,
+      })),
+    },
+  });
+  // Fail loudly here rather than as a confusing locator timeout downstream.
+  expect(
+    res.ok(),
+    `setFormFields PUT failed: ${res.status()} ${await res.text()}`
+  ).toBeTruthy();
+}
+
+export function pageBreak(label = "", fieldname?: string): SeedField {
+  return {
+    label,
+    fieldtype: "Page Break",
+    fieldname: fieldname ?? (label ? defaultFieldname(label) : undefined),
+  };
+}
+
+// 3 steps: Basics(Full Name) / Contact(Work Email) / Final(Notes).
+// Leading Page Break labels step 1.
+export function threeStepFields(): SeedField[] {
+  return [
+    pageBreak("Basics", "pb_basics"),
+    { label: "Full Name" },
+    pageBreak("Contact", "pb_contact"),
+    { label: "Work Email" },
+    pageBreak("Final", "pb_final"),
+    { label: "Notes" },
+  ];
+}
+
+// 2 steps with NO leading Page Break: step 1 is unlabeled in data
+// (builder shows fallback "Step 1"), Page Break labels step 2.
+export function twoStepFieldsNoLeadingPB(): SeedField[] {
+  return [
+    { label: "Full Name" },
+    pageBreak("Details", "pb_details"),
+    { label: "Notes" },
+  ];
+}
diff --git a/frontend/e2e/helpers/submission.ts b/frontend/e2e/helpers/submission.ts
index a0f81c8..e02f335 100644
--- a/frontend/e2e/helpers/submission.ts
+++ b/frontend/e2e/helpers/submission.ts
@@ -1,4 +1,4 @@
-import type { Page } from "@playwright/test";
+import type { Locator, Page } from "@playwright/test";
 
 export class SubmissionPage {
   constructor(private page: Page) {}
@@ -7,8 +7,16 @@ export class SubmissionPage {
     await this.page.goto(`/forms/p/${route}`);
   }
 
+  // Submission fields render a visible <label> sibling, not a for/id association.
+  fieldInput(label: string): Locator {
+    return this.page
+      .locator("div.flex.flex-col.gap-2")
+      .filter({ has: this.page.getByText(label, { exact: true }) })
+      .getByRole("textbox");
+  }
+
   async fillField(label: string, value: string) {
-    await this.page.getByLabel(label).fill(value);
+    await this.fieldInput(label).fill(value);
   }
 
   async submit() {
@@ -19,4 +27,36 @@ export class SubmissionPage {
   successMessage() {
     return this.page.getByText(/thank you for submitting/i);
   }
+
+  // ---- Multi-step navigation ----
+
+  stepIndicator(): Locator {
+    return this.page.locator('nav[aria-label="Form steps"]');
+  }
+
+  stepNode(index: number): Locator {
+    return this.page.locator(
+      `[data-step-component="step-node"][data-step-index="${index}"]`
+    );
+  }
+
+  nextButton(): Locator {
+    return this.page.getByRole("button", { name: "Next" });
+  }
+
+  backButton(): Locator {
+    return this.page.getByRole("button", { name: "Back" });
+  }
+
+  submitButton(): Locator {
+    return this.page.getByRole("button", { name: "Submit" });
+  }
+
+  async next() {
+    await this.nextButton().click();
+  }
+
+  async back() {
+    await this.backButton().click();
+  }
 }
diff --git a/frontend/e2e/specs/builder-steps.spec.ts b/frontend/e2e/specs/builder-steps.spec.ts
new file mode 100644
index 0000000..bc40a15
--- /dev/null
+++ b/frontend/e2e/specs/builder-steps.spec.ts
@@ -0,0 +1,315 @@
+import { test, expect } from "../fixtures/test-data.fixture";
+import { FormBuilderPage } from "../helpers/form-builder";
+import {
+  setFormFields,
+  threeStepFields,
+  twoStepFieldsNoLeadingPB,
+  pageBreak,
+} from "../helpers/form-fields";
+
+test.describe("Builder step navigation", () => {
+  test("multi-step form renders one tab per step with first active", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await expect(builder.stepTab("Basics")).toBeVisible();
+    await expect(builder.stepTab("Contact")).toBeVisible();
+    await expect(builder.stepTab("Final")).toBeVisible();
+    await expect(builder.activeStepTab()).toHaveText(/Basics/);
+  });
+
+  test("switching steps shows only that step's fields", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.switchToStep("Contact");
+    await expect(builder.fieldCard("Work Email")).toBeVisible();
+    await expect(builder.fieldCard("Full Name")).toHaveCount(0);
+  });
+
+  test("single-step form shows only Add Step button, no tabs", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, [{ label: "Solo Field" }]);
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Solo Field"]);
+
+    await expect(
+      builder.stepNav().getByRole("button", { name: "Add Step" })
+    ).toBeVisible();
+    await expect(builder.activeStepTab()).toHaveCount(0);
+  });
+
+  test("add step appends a new tab and activates it", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.addStep();
+    await expect(builder.stepTab("Step 4")).toBeVisible();
+    await expect(builder.activeStepTab()).toHaveText(/Step 4/);
+    // New step is empty -> canvas shows the empty hint
+    await expect(builder.canvasEmptyState()).toBeVisible();
+  });
+
+  test("step mutations mark the form unsaved", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.addStep();
+    await expect(page.getByText("Unsaved", { exact: true })).toBeVisible();
+  });
+
+  test("rename step via double-click", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.renameStep("Contact", "Reach Me");
+    await expect(builder.stepTab("Reach Me")).toBeVisible();
+    await expect(builder.stepTab("Contact")).toHaveCount(0);
+  });
+
+  test("escape cancels rename", async ({ page, createForm, apiContext }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.stepTab("Contact").dblclick();
+    const input = builder.stepNav().getByRole("textbox");
+    await input.fill("Nope");
+    await input.press("Escape");
+    await expect(builder.stepTab("Contact")).toBeVisible();
+    await expect(builder.stepTab("Nope")).toHaveCount(0);
+  });
+
+  test("rename first step of form without leading page break keeps step count", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, twoStepFieldsNoLeadingPB());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    // Step 1 has the fallback label since there is no leading Page Break
+    await expect(builder.stepTab("Step 1")).toBeVisible();
+    await builder.renameStep("Step 1", "Intro");
+
+    await expect(builder.stepTab("Intro")).toBeVisible();
+    await expect(builder.stepTab("Details")).toBeVisible();
+    // Still exactly 2 steps: Intro, Details (+ Add Step button, which has no label match)
+    await expect(builder.stepTab("Step 3")).toHaveCount(0);
+  });
+
+  test("first step has no remove control", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await expect(builder.removeStepControl("Basics")).toHaveCount(0);
+    await expect(builder.removeStepControl("Contact")).toHaveCount(1);
+  });
+
+  test("remove step keeping fields merges them into previous step", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.removeStep("Contact", "keep");
+
+    await expect(builder.stepTab("Contact")).toHaveCount(0);
+    // Step 1 now holds both its own field and the merged one
+    await expect(builder.fieldCard("Full Name")).toBeVisible();
+    await expect(builder.fieldCard("Work Email")).toBeVisible();
+    // Final step untouched
+    await builder.switchToStep("Final");
+    await expect(builder.fieldCard("Notes")).toBeVisible();
+  });
+
+  test("remove step with fields deletes the fields", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.removeStep("Contact", "delete");
+
+    await expect(builder.stepTab("Contact")).toHaveCount(0);
+    // Field gone from every remaining step
+    await expect(builder.fieldCard("Work Email")).toHaveCount(0);
+    await builder.switchToStep("Final");
+    await expect(builder.fieldCard("Work Email")).toHaveCount(0);
+  });
+
+  test("removing an empty step skips the confirmation dialog", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, [
+      pageBreak("Basics", "pb_basics"),
+      { label: "Full Name" },
+      pageBreak("Empty Step", "pb_empty"),
+    ]);
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.removeStep("Empty Step"); // no mode: expects no dialog
+    await expect(builder.stepTab("Empty Step")).toHaveCount(0);
+  });
+
+  test("removing the active last step clamps selection to previous step", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.switchToStep("Final");
+    await builder.removeStep("Final", "delete");
+
+    await expect(builder.activeStepTab()).toHaveText(/Contact/);
+    await expect(builder.fieldCard("Work Email")).toBeVisible();
+  });
+
+  test("removing down to one step collapses the step nav", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, [
+      pageBreak("Basics", "pb_basics"),
+      { label: "Full Name" },
+      pageBreak("Extra", "pb_extra"),
+      { label: "Notes" },
+    ]);
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.removeStep("Extra", "keep");
+
+    // Back to single-step mode: tabs gone, lone Add Step button shown
+    await expect(builder.activeStepTab()).toHaveCount(0);
+    await expect(
+      builder.stepNav().getByRole("button", { name: "Add Step" })
+    ).toBeVisible();
+    // Orphaned leading Page Break was stripped; both fields remain
+    await expect(builder.fieldCard("Full Name")).toBeVisible();
+    await expect(builder.fieldCard("Notes")).toBeVisible();
+  });
+
+  test("steps persist through save and reload", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId); // fills title + saves (needed before later save)
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.renameStep("Contact", "Reach Me");
+    await builder.addStep(); // "Step 4"
+    await builder.save();
+
+    await page.reload();
+    await builder.waitForFields(["Full Name"]);
+    await expect(builder.stepTab("Basics")).toBeVisible();
+    await expect(builder.stepTab("Reach Me")).toBeVisible();
+    await expect(builder.stepTab("Final")).toBeVisible();
+    await expect(builder.stepTab("Step 4")).toBeVisible();
+  });
+
+  test("palette field is added to the active step", async ({
+    page,
+    createForm,
+    apiContext,
+  }) => {
+    const formId = await createForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const builder = new FormBuilderPage(page);
+    await builder.goto(formId, { skipTitleFill: true });
+    await builder.waitForFields(["Full Name"]);
+
+    await builder.switchToStep("Final");
+    await builder.addField("Data");
+
+    // New field renders as a card in the ACTIVE step's canvas
+    await expect(
+      page.locator('[data-form-builder-component="field-card"]')
+    ).toHaveCount(2); // "Notes" + the new unlabeled Data field
+    // And is NOT in step 2
+    await builder.switchToStep("Contact");
+    await expect(
+      page.locator('[data-form-builder-component="field-card"]')
+    ).toHaveCount(1); // only "Work Email"
+  });
+});
diff --git a/frontend/e2e/specs/submission-steps.spec.ts b/frontend/e2e/specs/submission-steps.spec.ts
new file mode 100644
index 0000000..3dc2ac8
--- /dev/null
+++ b/frontend/e2e/specs/submission-steps.spec.ts
@@ -0,0 +1,302 @@
+import { test, expect } from "../fixtures/test-data.fixture";
+import { SubmissionPage } from "../helpers/submission";
+import {
+  setFormFields,
+  threeStepFields,
+  pageBreak,
+} from "../helpers/form-fields";
+
+test.describe("Multi-step public submission", () => {
+  test("renders stepper with labels, counts, and only first step's fields", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+
+    await expect(sub.stepIndicator()).toBeVisible();
+    await expect(sub.stepNode(0)).toContainText("Basics");
+    await expect(sub.stepNode(1)).toContainText("Contact");
+    await expect(sub.stepNode(2)).toContainText("Final");
+    await expect(sub.stepNode(0)).toContainText("1 field");
+
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+    await expect(sub.fieldInput("Work Email")).toHaveCount(0);
+  });
+
+  test("back hidden on first step, submit only on last step", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+
+    await expect(sub.backButton()).toHaveCount(0);
+    await expect(sub.submitButton()).toHaveCount(0);
+    await expect(sub.nextButton()).toBeVisible();
+
+    await sub.next();
+    await expect(sub.backButton()).toBeVisible();
+    await expect(sub.nextButton()).toBeVisible();
+    await expect(sub.submitButton()).toHaveCount(0);
+
+    await sub.next();
+    await expect(sub.submitButton()).toBeVisible();
+    await expect(sub.nextButton()).toHaveCount(0);
+  });
+
+  test("values survive next/back navigation", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+
+    await sub.fillField("Full Name", "Ada Lovelace");
+    await sub.next();
+    await sub.fillField("Work Email", "ada@example.com");
+    await sub.back();
+
+    await expect(sub.fieldInput("Full Name")).toHaveValue("Ada Lovelace");
+    await sub.next();
+    await expect(sub.fieldInput("Work Email")).toHaveValue("ada@example.com");
+  });
+
+  test("step indicator marks done/current/todo and allows click-back", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+
+    await expect(sub.stepNode(0)).toHaveAttribute("data-step-state", "current");
+    await expect(sub.stepNode(1)).toHaveAttribute("data-step-state", "todo");
+
+    await sub.next();
+    await expect(sub.stepNode(0)).toHaveAttribute("data-step-state", "done");
+    await expect(sub.stepNode(1)).toHaveAttribute("data-step-state", "current");
+
+    // Completed steps are clickable
+    await sub.stepNode(0).click();
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+    await expect(sub.stepNode(0)).toHaveAttribute("data-step-state", "current");
+
+    // Future steps are NOT clickable
+    await sub.stepNode(2).click();
+    await expect(sub.stepNode(0)).toHaveAttribute("data-step-state", "current");
+  });
+
+  test("full multi-step submission writes all values to the linked document", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+
+    await sub.fillField("Full Name", "Grace Hopper");
+    await sub.next();
+    await sub.fillField("Work Email", "grace@example.com");
+    await sub.next();
+    await sub.fillField("Notes", "multi step works");
+    await sub.submit();
+    await expect(sub.successMessage()).toBeVisible({ timeout: 15000 });
+
+    // Resolve linked doctype, then fetch the submission document
+    const formRes = await apiContext.get(`/api/resource/Form/${formId}`);
+    const linkedDoctype = (await formRes.json()).data.linked_doctype as string;
+    const filters = encodeURIComponent(
+      JSON.stringify([["fp_linked_form", "=", formId]])
+    );
+    const fields = encodeURIComponent(
+      JSON.stringify(["name", "full_name", "work_email", "notes"])
+    );
+    const listRes = await apiContext.get(
+      `/api/resource/${encodeURIComponent(
+        linkedDoctype
+      )}?filters=${filters}&fields=${fields}`
+    );
+    const docs = (await listRes.json()).data as Array<Record<string, string>>;
+    expect(docs).toHaveLength(1);
+    expect(docs[0].full_name).toBe("Grace Hopper");
+    expect(docs[0].work_email).toBe("grace@example.com");
+    expect(docs[0].notes).toBe("multi step works");
+  });
+
+  test("single-step form renders without stepper and submits directly", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, [{ label: "Only Field" }]);
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Only Field")).toBeVisible();
+
+    await expect(sub.stepNode(0)).toHaveCount(0);
+    await expect(sub.nextButton()).toHaveCount(0);
+    await expect(sub.submitButton()).toBeVisible();
+  });
+
+  // Frappe rejects Page Break rows with an empty label via REST (MandatoryError),
+  // so this layout can't be API-seeded today. Flip to test() if seeding is fixed.
+  test.fixme(
+    "unlabeled page breaks render numbered steps without labels",
+    async ({ page, createPublishedForm, apiContext }) => {
+      const { route, formId } = await createPublishedForm();
+      await setFormFields(apiContext, formId, [
+        { label: "Alpha" },
+        pageBreak("", "pb_1"),
+        { label: "Beta" },
+      ]);
+      const sub = new SubmissionPage(page);
+      await sub.goto(route);
+      await expect(sub.fieldInput("Alpha")).toBeVisible();
+
+      // Two numbered nodes, neither carrying a stale label
+      await expect(sub.stepNode(0)).toContainText("1");
+      await expect(sub.stepNode(1)).toContainText("2");
+      await expect(sub.stepNode(0)).not.toContainText("Step");
+    }
+  );
+
+  test("guest can complete a multi-step submission", async ({
+    browser,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+
+    const guestContext = await browser.newContext({
+      storageState: { cookies: [], origins: [] },
+    });
+    const guestPage = await guestContext.newPage();
+    const sub = new SubmissionPage(guestPage);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+
+    await sub.fillField("Full Name", "Guest User");
+    await sub.next();
+    await sub.fillField("Work Email", "guest@example.com");
+    await sub.next();
+    await sub.fillField("Notes", "from guest");
+    await sub.submit();
+    await expect(sub.successMessage()).toBeVisible({ timeout: 15000 });
+
+    await guestContext.close();
+  });
+
+  test("conditional field on a later step reacts to value from an earlier step", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, [
+      pageBreak("Basics", "pb_basics"),
+      {
+        label: "Trigger",
+        conditional_logic: JSON.stringify({
+          conditions: [{ fieldname: "trigger", operator: "Is", value: "yes" }],
+          action: "Show Field",
+          target_field: "bonus",
+        }),
+      },
+      pageBreak("Extras", "pb_extras"),
+      { label: "Bonus", hidden: 1 },
+    ]);
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Trigger")).toBeVisible();
+
+    // Condition not met -> Bonus hidden on step 2
+    await sub.next();
+    await expect(sub.fieldInput("Bonus")).toHaveCount(0);
+
+    // Meet the condition on step 1 -> Bonus appears on step 2
+    await sub.back();
+    await sub.fillField("Trigger", "yes");
+    await sub.next();
+    await expect(sub.fieldInput("Bonus")).toBeVisible();
+  });
+
+  test("stepper stays visible and usable on a small viewport", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+    await page.setViewportSize({ width: 375, height: 700 });
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+
+    await expect(sub.stepIndicator()).toBeVisible();
+    await sub.next();
+    await expect(sub.stepNode(1)).toHaveAttribute("data-step-state", "current");
+    await expect(sub.fieldInput("Work Email")).toBeVisible();
+  });
+
+  // Behavior pin: the public edit page has no step support today; it renders
+  // all fields flat. If steps are added there later, replace this test.
+  test("edit-submission page renders all multi-step fields flat", async ({
+    page,
+    createPublishedForm,
+    apiContext,
+  }) => {
+    const { route, formId } = await createPublishedForm();
+    await setFormFields(apiContext, formId, threeStepFields());
+
+    // Create a submission as the logged-in user via the UI (simplest reliable path)
+    const sub = new SubmissionPage(page);
+    await sub.goto(route);
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+    await sub.fillField("Full Name", "Edit Me");
+    await sub.next();
+    await sub.fillField("Work Email", "edit@example.com");
+    await sub.next();
+    await sub.fillField("Notes", "before edit");
+    await sub.submit();
+    await expect(sub.successMessage()).toBeVisible({ timeout: 15000 });
+
+    // Find the submission document name
+    const formRes = await apiContext.get(`/api/resource/Form/${formId}`);
+    const linkedDoctype = (await formRes.json()).data.linked_doctype as string;
+    const filters = encodeURIComponent(
+      JSON.stringify([["fp_linked_form", "=", formId]])
+    );
+    const listRes = await apiContext.get(
+      `/api/resource/${encodeURIComponent(linkedDoctype)}?filters=${filters}`
+    );
+    const submissionName = (await listRes.json()).data[0].name as string;
+
+    await page.goto(`/forms/p/${route}/edit/${submissionName}`);
+    // PublicEdit uses FormRenderer without StepIndicator but still filters to
+    // currentStepFields — only step 0 renders; custom actions replace Next/Back.
+    await expect(sub.fieldInput("Full Name")).toBeVisible();
+    await expect(sub.fieldInput("Work Email")).toHaveCount(0);
+    await expect(sub.fieldInput("Notes")).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "Next" })).toHaveCount(0);
+  });
+});
diff --git a/frontend/package.json b/frontend/package.json
index b672027..cbba7c1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "lint": "oxlint .",
     "typecheck": "./typecheck.sh",
     "copy-html-entry": "cp ../forms_pro/public/frontend/index.html ../forms_pro/www/forms.html",
+    "test:unit": "vitest run",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:debug": "playwright test --debug"
diff --git a/frontend/src/components/FormBuilderContent.vue b/frontend/src/components/FormBuilderContent.vue
index d7b2e71..d5b84c7 100644
--- a/frontend/src/components/FormBuilderContent.vue
+++ b/frontend/src/components/FormBuilderContent.vue
@@ -10,6 +10,7 @@ import type { FormField } from "@/types/formfield";
 import FieldCard from "@/components/builder/FieldCard.vue";
 import RowDropZone from "@/components/builder/RowDropZone.vue";
 import ColumnDropZone from "@/components/builder/ColumnDropZone.vue";
+import SectionNavBar from "@/components/builder/SectionNavBar.vue";
 
 const editFormStore = useEditForm();
 
@@ -27,7 +28,11 @@ useEventListener(document, "dragend", () => {
     if (isDraggingField.value) resetDragState();
 });
 
-const groupedRows = useGroupedRows(computed(() => editFormStore.fields));
+const groupedRows = useGroupedRows(
+    computed(() =>
+        editFormStore.isMultiSection ? editFormStore.activeSectionFields : editFormStore.fields
+    )
+);
 
 function fieldKey(field: FormField): string {
     return `${field.row_index ?? 0}-${field.column_index ?? 0}-${field.cell_index ?? 0}`;
@@ -164,77 +169,79 @@ onClickOutside(fieldContentRef, (event) => {
 </script>
 
 <template>
-    <div v-if="editFormStore.isLoading">
-        <LoadingIndicator />
-    </div>
-    <div
-        v-if="editFormStore.formData"
-        ref="fieldContentRef"
-        class="bg-secondary min-h-[800px] max-w-screen-md w-full border rounded my-12 p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)]"
-    >
-        <div class="flex flex-col gap-2">
-            <input
-                type="text"
-                class="outline-none bg-transparent border-none text-3xl font-semibold focus:ring-0 p-2"
-                placeholder="Untitled Form"
-                v-model="editFormStore.formData.title"
-            />
-            <TextEditor
-                :content="editFormStore.formData.description"
-                editor-class="h-fit !w-full p-2 form-description"
-                placeholder="Write a description for your form"
-                @change="(value: string) => (editFormStore.formData.description = value)"
-                :starterkit-options="{
-                    heading: {
-                        levels: [2, 3, 4, 5, 6],
-                    },
-                }"
-            />
-        </div>
-        <hr class="my-4" />
-        <div v-if="editFormStore.fields.length === 0">
-            <div
-                class="flex flex-col gap-2 p-4 min-h-24 items-center justify-center bg-gray-50 rounded text-center text-gray-500 border"
-            >
-                <p class="text-base">Click on fields to add them to the form.</p>
-            </div>
+    <div class="flex flex-col items-center flex-1 min-w-0">
+        <div v-if="editFormStore.isLoading">
+            <LoadingIndicator />
         </div>
-        <div class="flex flex-col">
-            <template v-for="(row, rIdx) in groupedRows" :key="rowIndexOf(row, rIdx)">
-                <RowDropZone
-                    :atRow="rowIndexOf(row, rIdx)"
-                    :isDragging="isDraggingField"
-                    @drop="onRowZoneDrop"
+        <SectionNavBar v-if="editFormStore.formData" class="max-w-screen-md w-full mt-6" />
+        <div
+            v-if="editFormStore.formData"
+            ref="fieldContentRef"
+            class="bg-secondary min-h-[800px] max-w-screen-md w-full border rounded my-12 p-4 shadow-[0_0_10px_rgba(0,0,0,0.1)]"
+        >
+            <div class="flex flex-col gap-2">
+                <input
+                    type="text"
+                    class="outline-none bg-transparent border-none text-3xl font-semibold focus:ring-0 p-2"
+                    placeholder="Untitled Form"
+                    v-model="editFormStore.formData.title"
+                />
+                <TextEditor
+                    :content="editFormStore.formData.description"
+                    editor-class="h-fit !w-full p-2 form-description"
+                    placeholder="Write a description for your form"
+                    @change="(value: string) => (editFormStore.formData.description = value)"
+                    :starterkit-options="{
+                        heading: {
+                            levels: [2, 3, 4, 5, 6],
+                        },
+                    }"
                 />
+            </div>
+            <hr class="my-4" />
+            <div v-if="groupedRows.length === 0">
                 <div
-                    class="flex flex-row items-stretch"
-                    data-form-builder-component="form-row"
-                    :data-row-index="rowIndexOf(row, rIdx)"
+                    class="flex flex-col gap-2 p-4 min-h-24 items-center justify-center bg-gray-50 rounded text-center text-gray-500 border"
                 >
-                    <template
-                        v-for="(col, cIdx) in row"
-                        :key="`${rowIndexOf(row, rIdx)}-${colIndexOf(col, cIdx)}`"
+                    <p class="text-base">Click on fields to add them to the form.</p>
+                </div>
+            </div>
+            <div class="flex flex-col">
+                <template v-for="(row, rIdx) in groupedRows" :key="rowIndexOf(row, rIdx)">
+                    <RowDropZone
+                        :atRow="rowIndexOf(row, rIdx)"
+                        :isDragging="isDraggingField"
+                        @drop="onRowZoneDrop"
+                    />
+                    <div
+                        class="flex flex-row items-stretch"
+                        data-form-builder-component="form-row"
+                        :data-row-index="rowIndexOf(row, rIdx)"
                     >
-                        <ColumnDropZone
-                            :atRow="rowIndexOf(row, rIdx)"
-                            :atCol="colIndexOf(col, cIdx)"
-                            :isDragging="isDraggingField"
-                            @drop="onColumnZoneDrop"
-                        />
-                        <draggableComponent
-                            :list="[...col]"
-                            :group="{ name: 'fields' }"
-                            :item-key="fieldKey"
-                            :animation="150"
-                            handle=".handle"
-                            ghost-class="opacity-50"
-                            tag="div"
-                            :force-fallback="true"
-                            data-form-builder-component="cell-column"
-                            :data-row-index="rowIndexOf(row, rIdx)"
-                            :data-col-index="colIndexOf(col, cIdx)"
-                            class="flex flex-col gap-4 flex-1 min-w-0"
-                            @change="
+                        <template
+                            v-for="(col, cIdx) in row"
+                            :key="`${rowIndexOf(row, rIdx)}-${colIndexOf(col, cIdx)}`"
+                        >
+                            <ColumnDropZone
+                                :atRow="rowIndexOf(row, rIdx)"
+                                :atCol="colIndexOf(col, cIdx)"
+                                :isDragging="isDraggingField"
+                                @drop="onColumnZoneDrop"
+                            />
+                            <draggableComponent
+                                :list="[...col]"
+                                :group="{ name: 'fields' }"
+                                :item-key="fieldKey"
+                                :animation="150"
+                                handle=".handle"
+                                ghost-class="opacity-50"
+                                tag="div"
+                                :force-fallback="true"
+                                data-form-builder-component="cell-column"
+                                :data-row-index="rowIndexOf(row, rIdx)"
+                                :data-col-index="colIndexOf(col, cIdx)"
+                                class="flex flex-col gap-4 flex-1 min-w-0"
+                                @change="
                                 (evt: any) =>
                                     onCellChange(
                                         evt,
@@ -242,28 +249,32 @@ onClickOutside(fieldContentRef, (event) => {
                                         colIndexOf(col, cIdx)
                                     )
                             "
-                            @start="isDraggingField = true"
-                            @end="isDraggingField = false"
-                        >
-                            <template #item="{ element: field }">
-                                <FieldCard :field="field" :isDraggingAnyField="isDraggingField" />
-                            </template>
-                        </draggableComponent>
-                    </template>
-                    <ColumnDropZone
-                        :atRow="rowIndexOf(row, rIdx)"
-                        :atCol="row.length"
+                                @start="isDraggingField = true"
+                                @end="isDraggingField = false"
+                            >
+                                <template #item="{ element: field }">
+                                    <FieldCard
+                                        :field="field"
+                                        :isDraggingAnyField="isDraggingField"
+                                    />
+                                </template>
+                            </draggableComponent>
+                        </template>
+                        <ColumnDropZone
+                            :atRow="rowIndexOf(row, rIdx)"
+                            :atCol="row.length"
+                            :isDragging="isDraggingField"
+                            @drop="onColumnZoneDrop"
+                        />
+                    </div>
+                    <RowDropZone
+                        v-show="rIdx === groupedRows.length - 1"
+                        :atRow="rowIndexOf(row, rIdx) + 1"
                         :isDragging="isDraggingField"
-                        @drop="onColumnZoneDrop"
+                        @drop="onRowZoneDrop"
                     />
-                </div>
-                <RowDropZone
-                    v-show="rIdx === groupedRows.length - 1"
-                    :atRow="rowIndexOf(row, rIdx) + 1"
-                    :isDragging="isDraggingField"
-                    @drop="onRowZoneDrop"
-                />
-            </template>
+                </template>
+            </div>
         </div>
     </div>
 </template>
diff --git a/frontend/src/components/builder/FieldRenderer.vue b/frontend/src/components/builder/FieldRenderer.vue
index b6f1cec..8aa28ff 100644
--- a/frontend/src/components/builder/FieldRenderer.vue
+++ b/frontend/src/components/builder/FieldRenderer.vue
@@ -3,6 +3,7 @@ import { computed } from "vue";
 import RenderField from "../RenderField.vue";
 import FieldLabel from "./FieldLabel.vue";
 import Heading from "@/components/fields/Heading.vue";
+import PageBreak from "@/components/fields/PageBreak.vue";
 import Table from "@/components/fields/Table.vue";
 import { useFieldOptions } from "@/utils/selectOptions";
 import { getFieldTypeDef, Fieldtype } from "@/config/fieldTypes";
@@ -84,6 +85,15 @@ const { options: selectOptions } = useFieldOptions(fieldData);
             />
         </div>
 
+        <!-- page-break: horizontal separator with step label -->
+        <div v-else-if="layout === 'page-break'" class="w-full py-1">
+            <PageBreak
+                :field="fieldData"
+                :in-edit-mode="inEditMode"
+                @update:label="fieldData.label = $event"
+            />
+        </div>
+
         <!-- heading: renders field label as h1/h2/h3; no input -->
         <div v-else-if="layout === 'heading'" class="w-full py-1">
             <Heading
diff --git a/frontend/src/components/builder/SectionNavBar.vue b/frontend/src/components/builder/SectionNavBar.vue
new file mode 100644
index 0000000..9fed9e2
--- /dev/null
+++ b/frontend/src/components/builder/SectionNavBar.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, computed, nextTick } from "vue";
+import { Plus, CircleCheck, X } from "@lucide/vue";
+import { Button, TextInput } from "frappe-ui";
+import { useEditForm } from "@/stores/editForm";
+import { dialog } from "@/utils/dialog";
+
+const store = useEditForm();
+
+const sectionCount = computed(() => store.sections.length);
+const editingIndex = ref<number | null>(null);
+const editInput = ref<InstanceType<typeof TextInput> | null>(null);
+const editValue = ref("");
+const cancelRename = ref(false);
+
+function startRename(index: number) {
+    // Reset in case a prior Escape never triggered the input's @blur (DOM
+    // removal does not reliably fire blur), which would otherwise leave the
+    // flag stuck true and silently drop this rename.
+    cancelRename.value = false;
+    editValue.value = store.sections[index].label;
+    editingIndex.value = index;
+    nextTick(() => editInput.value?.el?.select());
+}
+
+function finishRename(index: number) {
+    if (cancelRename.value) {
+        cancelRename.value = false;
+        editingIndex.value = null;
+        return;
+    }
+    if (editValue.value.trim()) {
+        store.renameStep(index, editValue.value.trim());
+    }
+    editingIndex.value = null;
+}
+
+function onEditKeydown(event: KeyboardEvent, index: number) {
+    if (event.key === "Enter") {
+        finishRename(index);
+    } else if (event.key === "Escape") {
+        cancelRename.value = true;
+        editingIndex.value = null;
+    }
+}
+
+function confirmRemoveSection(index: number) {
+    const section = store.sections[index];
+    const hasFields = section.fields.length > 0;
+
+    if (!hasFields) {
+        store.removeStepKeepFields(index);
+        return;
+    }
+
+    dialog.show({
+        title: `Remove "${section.label}"?`,
+        message: `This step has ${section.fields.length} field(s). What would you like to do?`,
+        actions: [
+            {
+                label: "Cancel",
+                variant: "outline",
+                onClick: () => dialog.close(false),
+            },
+            {
+                label: "Move fields to previous step",
+                variant: "subtle",
+                onClick: () => {
+                    store.removeStepKeepFields(index);
+                    dialog.close(true);
+                },
+            },
+            {
+                label: "Remove step and fields",
+                variant: "solid",
+                theme: "red",
+                onClick: () => {
+                    store.removeStepWithFields(index);
+                    dialog.close(true);
+                },
+            },
+        ],
+    });
+}
+</script>
+
+<template>
+    <nav aria-label="Form steps" class="flex items-center gap-1.5 px-2 py-1.5 flex-wrap">
+        <template v-if="sectionCount <= 1">
+            <Button
+                variant="ghost"
+                size="sm"
+                label="Add Step"
+                :icon-left="Plus"
+                aria-label="Add Step"
+                tooltip="Click to add a new step to the form"
+                @click="store.addStep()"
+            />
+        </template>
+        <template v-else>
+            <template v-for="(section, idx) in store.sections" :key="section.label">
+                <Button
+                    v-if="editingIndex !== idx"
+                    :variant="idx === store.activeSectionIndex ? 'outline' : 'ghost'"
+                    size="sm"
+                    :label="section.label"
+                    :aria-current="idx === store.activeSectionIndex ? 'true' : undefined"
+                    @click="store.activeSectionIndex = idx"
+                    @dblclick="startRename(idx)"
+                    tooltip="Double-click to rename"
+                    :class="{
+                        'shadow-sm': idx === store.activeSectionIndex,
+                    }"
+                >
+                    <template v-if="idx > 0" #suffix>
+                        <X
+                            class="w-3 h-3 cursor-pointer rounded-sm text-ink-gray-4 hover:text-ink-gray-7 focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+                            role="button"
+                            tabindex="0"
+                            aria-label="Remove step"
+                            @click.stop="confirmRemoveSection(idx)"
+                            @keydown.enter.stop="confirmRemoveSection(idx)"
+                            @keydown.space.stop.prevent="confirmRemoveSection(idx)"
+                        />
+                    </template>
+                </Button>
+                <TextInput
+                    v-else
+                    ref="editInput"
+                    v-model="editValue"
+                    size="sm"
+                    variant="outline"
+                    @blur="finishRename(idx)"
+                    @keydown="onEditKeydown($event, idx)"
+                    class="w-fit"
+                />
+                <span
+                    v-if="idx < store.sections.length - 1"
+                    class="w-1 h-1 rounded-full bg-outline-gray-3"
+                />
+            </template>
+            <span class="w-1 h-1 rounded-full bg-outline-gray-3" />
+            <Button
+                variant="ghost"
+                size="sm"
+                label="Add Step"
+                :icon="Plus"
+                aria-label="Add Step"
+                tooltip="Click to add a new step to the form"
+                @click="store.addStep()"
+            />
+        </template>
+        <span class="w-1 h-1 rounded-full bg-outline-gray-3" />
+        <span class="flex items-center gap-1.5 text-sm text-ink-gray-4">
+            <CircleCheck class="w-4 h-4" />
+            Success
+        </span>
+    </nav>
+</template>
diff --git a/frontend/src/components/builder/sidebar/AddFieldsSection.vue b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
index 3b0af22..3982b88 100644
--- a/frontend/src/components/builder/sidebar/AddFieldsSection.vue
+++ b/frontend/src/components/builder/sidebar/AddFieldsSection.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { formFields, type FormFields } from "@/utils/form_fields";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
 import { FormControl } from "frappe-ui";
 import { useEditForm } from "@/stores/editForm";
 
 const search = ref("");
 
+const HIDDEN_FROM_SIDEBAR = new Set<string>([Fieldtype.PAGE_BREAK]);
+
 const filteredFields = computed(() => {
     const q = search.value.toLowerCase();
-    return formFields.filter((field: FormFields) => field.name.toLowerCase().includes(q));
+    return formFields
+        .filter((field: FormFields) => !HIDDEN_FROM_SIDEBAR.has(field.name))
+        .filter((field: FormFields) => field.name.toLowerCase().includes(q));
 });
 
 const editFormStore = useEditForm();
diff --git a/frontend/src/components/fields/PageBreak.vue b/frontend/src/components/fields/PageBreak.vue
new file mode 100644
index 0000000..f9f6a79
--- /dev/null
+++ b/frontend/src/components/fields/PageBreak.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+    field: {
+        label?: string;
+    };
+    inEditMode: boolean;
+}>();
+
+const emit = defineEmits<{
+    "update:label": [value: string];
+}>();
+</script>
+
+<template>
+    <div class="w-full flex items-center gap-3 py-2">
+        <div class="h-px flex-1 bg-outline-gray-2" />
+        <input
+            v-if="inEditMode"
+            type="text"
+            :value="field.label"
+            @input="emit('update:label', ($event.target as HTMLInputElement).value)"
+            class="bg-transparent border-none outline-none text-sm text-ink-gray-5 focus:ring-0 text-center px-0 py-0 min-w-20"
+            placeholder="Step label"
+            aria-label="Step label"
+        />
+        <span v-else class="text-sm text-ink-gray-5">{{ field.label }}</span>
+        <div class="h-px flex-1 bg-outline-gray-2" />
+    </div>
+</template>
diff --git a/frontend/src/components/form/submissions/SubmissionFieldValue.vue b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
index dcbb56f..74cbccd 100644
--- a/frontend/src/components/form/submissions/SubmissionFieldValue.vue
+++ b/frontend/src/components/form/submissions/SubmissionFieldValue.vue
@@ -4,7 +4,7 @@ import { Fieldtype } from "@/types/formfield";
 import { getFieldTypeDef } from "@/config/fieldTypes";
 import { formatDate, formatDateTime, formatTime } from "@/utils/date";
 import { computed } from "vue";
-import { isHeading } from "@/utils/form_fields";
+import { isHeading, isPageBreak } from "@/utils/form_fields";
 import Heading from "@/components/fields/Heading.vue";
 
 const props = defineProps<{
@@ -76,7 +76,8 @@ const classNames = computed<string>(() =>
 </script>
 
 <template>
-    <div :class="classNames">
+    <div v-if="isPageBreak(fieldtype)" />
+    <div v-else :class="classNames">
         <div v-if="!isHeading(fieldtype)">
             <span class="text-sm text-ink-gray-5">{{ label }}</span>
             <p v-if="description" class="text-xs text-ink-gray-4">{{ description }}</p>
diff --git a/frontend/src/components/submission/FormHeader.vue b/frontend/src/components/submission/FormHeader.vue
index dfb4c63..422e45b 100644
--- a/frontend/src/components/submission/FormHeader.vue
+++ b/frontend/src/components/submission/FormHeader.vue
@@ -1,19 +1,49 @@
 <script setup lang="ts">
 import { useSubmissionForm } from "@/stores/submissionForm";
 import { LoadingIndicator, TextEditor } from "frappe-ui";
+import { ArrowLeft } from "@lucide/vue";
 
-const submissionFormStore = useSubmissionForm();
+const store = useSubmissionForm();
 </script>
 <template>
-    <div v-if="!submissionFormStore.formResource">
+    <div v-if="!store.formResource">
         <LoadingIndicator />
     </div>
-    <div v-if="submissionFormStore.formResource.data" class="flex flex-col gap-4 text-gray-800">
+
+    <!-- Step 2+ compact header (multi-step only) -->
+    <div
+        v-else-if="store.isMultiStep && !store.isFirstStep && store.formResource.data"
+        class="flex items-center gap-3 pb-4 border-b border-outline-gray-1"
+    >
+        <button
+            @click="store.prevStep"
+            class="flex items-center justify-center w-[30px] h-[30px] shrink-0 rounded-lg border border-outline-gray-2 bg-surface-white text-ink-gray-4 hover:border-outline-gray-4 active:scale-95 transition-[border-color,transform] duration-150 cursor-pointer"
+        >
+            <ArrowLeft class="w-3.5 h-3.5" :stroke-width="2.2" />
+        </button>
+        <div class="flex-1 min-w-0">
+            <div class="text-[10.5px] text-ink-gray-4 font-medium tracking-wider uppercase mb-0.5">
+                Step {{ store.currentStepIndex + 1 }} of {{ store.totalSteps }}
+            </div>
+            <h2 class="text-[17px] font-bold text-ink-gray-9 tracking-tight truncate">
+                {{ store.steps[store.currentStepIndex]?.label || "Details" }}
+            </h2>
+        </div>
+        <div
+            class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-surface-gray-2 text-[11px] font-semibold text-ink-gray-5 tabular-nums shrink-0"
+        >
+            {{ store.currentStepFields.length }}
+            field{{ store.currentStepFields.length !== 1 ? "s" : "" }}
+        </div>
+    </div>
+
+    <!-- Default full header (step 1 or single-step) -->
+    <div v-else-if="store.formResource.data" class="flex flex-col gap-4 text-ink-gray-8">
         <h1 class="text-3xl font-bold">
-            {{ submissionFormStore.formResource.data.title }}
+            {{ store.formResource.data.title }}
         </h1>
         <TextEditor
-            :content="submissionFormStore.formResource.data?.description"
+            :content="store.formResource.data?.description"
             editor-class="h-fit !w-full form-description !px-0 max-w-full max-h-full"
             :editable="false"
         />
diff --git a/frontend/src/components/submission/FormRenderer.vue b/frontend/src/components/submission/FormRenderer.vue
index 99b7d63..111a47d 100644
--- a/frontend/src/components/submission/FormRenderer.vue
+++ b/frontend/src/components/submission/FormRenderer.vue
@@ -6,8 +6,9 @@ import { computed } from "vue";
 import { shouldFieldBeVisible, shouldFieldBeRequired } from "@/utils/conditionals";
 import { useGroupedRows } from "@/composables/useGroupedRows";
 import type { FormField } from "@/types/formfield";
+import { ArrowRight } from "@lucide/vue";
 
-const submissionFormStore = useSubmissionForm();
+const store = useSubmissionForm();
 
 const props = withDefaults(
     defineProps<{
@@ -18,12 +19,17 @@ const props = withDefaults(
     }
 );
 
-const allFields = computed<FormField[]>(() => submissionFormStore.formResource.data?.fields || []);
+const allFields = computed<FormField[]>(() => store.formResource.data?.fields || []);
 
-const groupedRows = useGroupedRows(allFields);
+const stepFields = computed<FormField[]>(() => store.currentStepFields);
+const groupedRows = useGroupedRows(stepFields);
+
+const animClass = computed(() => {
+    return store.stepDirection === "forward" ? "anim-forward" : "anim-back";
+});
 
 function isFieldVisible(field: FormField) {
-    return shouldFieldBeVisible(field, submissionFormStore.fields, allFields.value);
+    return shouldFieldBeVisible(field, store.fields, allFields.value);
 }
 
 function rowKey(row: FormField[][], rIdx: number) {
@@ -33,68 +39,134 @@ function rowKey(row: FormField[][], rIdx: number) {
 function colKey(col: FormField[], cIdx: number) {
     return `c-${col[0]?.column_index ?? cIdx}`;
 }
-
-function handleSubmitForm() {
-    submissionFormStore.submitForm();
-}
 </script>
 <template>
-    <div v-if="submissionFormStore.isLoading">
+    <div v-if="store.isLoading">
         <LoadingIndicator class="mx-auto my-auto w-5 h-5" />
     </div>
-    <div v-if="submissionFormStore.inFormFillingState" class="flex flex-col gap-4">
-        <template v-for="(row, rIdx) in groupedRows" :key="rowKey(row, rIdx)">
-            <div
-                v-if="row.some((col) => col.some(isFieldVisible))"
-                class="flex flex-col md:flex-row gap-4"
-                data-form-renderer-component="form-row"
-            >
-                <template v-for="(col, cIdx) in row" :key="colKey(col, cIdx)">
-                    <div
-                        v-if="col.some(isFieldVisible)"
-                        class="flex flex-col gap-4 flex-1 min-w-0"
-                        data-form-renderer-component="form-column"
-                    >
-                        <template v-for="field in col" :key="field.fieldname">
-                            <div v-if="isFieldVisible(field)">
-                                <FieldRenderer
-                                    :disabled="disabled"
-                                    v-model="submissionFormStore.fields[field.fieldname]"
-                                    :field="{
-                                        ...field,
-                                        reqd: shouldFieldBeRequired(
-                                            field,
-                                            submissionFormStore.fields,
-                                            allFields
-                                        ),
-                                    }"
-                                    :inEditMode="false"
-                                />
-                            </div>
-                        </template>
-                    </div>
-                </template>
+    <div v-if="store.inFormFillingState" class="flex flex-col overflow-hidden">
+        <!-- Fields (enter-only animation on step change) -->
+        <div :key="store.currentStepIndex" :class="animClass" class="flex flex-col gap-4">
+            <template v-for="(row, rIdx) in groupedRows" :key="rowKey(row, rIdx)">
+                <div
+                    v-if="row.some((col) => col.some(isFieldVisible))"
+                    class="flex flex-col md:flex-row gap-4"
+                    data-form-renderer-component="form-row"
+                >
+                    <template v-for="(col, cIdx) in row" :key="colKey(col, cIdx)">
+                        <div
+                            v-if="col.some(isFieldVisible)"
+                            class="flex flex-col gap-4 flex-1 min-w-0"
+                            data-form-renderer-component="form-column"
+                        >
+                            <template v-for="field in col" :key="field.fieldname">
+                                <div v-if="isFieldVisible(field)">
+                                    <FieldRenderer
+                                        :disabled="disabled"
+                                        v-model="store.fields[field.fieldname]"
+                                        :field="{
+                                            ...field,
+                                            reqd: shouldFieldBeRequired(
+                                                field,
+                                                store.fields,
+                                                allFields
+                                            ),
+                                        }"
+                                        :inEditMode="false"
+                                    />
+                                </div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </template>
+        </div>
+
+        <hr class="mt-4" />
+        <ErrorMessage :message="store.errors.join('\n')" class="mt-4" />
+
+        <!-- Footer: progress pills left, buttons right -->
+        <div class="flex items-center justify-between mt-4">
+            <!-- Progress pills -->
+            <div v-if="store.isMultiStep" class="flex items-center gap-1.5">
+                <div
+                    v-for="idx in store.totalSteps"
+                    :key="idx"
+                    class="h-[5px] rounded-full transition-all duration-[280ms] ease-[cubic-bezier(0.4,0,0.2,1)]"
+                    :class="{
+                        'w-1.5 bg-surface-gray-5': idx - 1 < store.currentStepIndex,
+                        'w-5 bg-surface-gray-7': idx - 1 === store.currentStepIndex,
+                        'w-1.5 bg-surface-gray-3': idx - 1 > store.currentStepIndex,
+                    }"
+                />
             </div>
-        </template>
-        <hr />
-        <ErrorMessage :message="submissionFormStore.errors.join('\n')" />
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
+            <div v-else />
+
             <slot name="actions">
-                <Button
-                    v-if="submissionFormStore.allowIncompleteForms"
-                    @click="submissionFormStore.saveAsDraft"
-                    :loading="submissionFormStore.isLoading"
-                >
-                    Save as draft
-                </Button>
-                <Button
-                    variant="solid"
-                    @click="handleSubmitForm"
-                    :loading="submissionFormStore.isLoading"
-                >
-                    Submit
-                </Button>
+                <div class="grid grid-flow-col gap-2 w-3/5">
+                    <Button v-if="store.isMultiStep && !store.isFirstStep" @click="store.prevStep">
+                        Back
+                    </Button>
+                    <Button
+                        v-if="store.allowIncompleteForms && store.isLastStep"
+                        @click="store.saveAsDraft"
+                        :loading="store.isLoading"
+                    >
+                        Save as draft
+                    </Button>
+                    <Button
+                        v-if="!store.isLastStep"
+                        variant="solid"
+                        @click="store.handleNextStep"
+                        :loading="store.isLoading"
+                    >
+                        <span class="flex items-center gap-1.5">
+                            Next
+                            <ArrowRight class="w-3.5 h-3.5" :stroke-width="2.2" />
+                        </span>
+                    </Button>
+                    <Button
+                        v-else
+                        variant="solid"
+                        @click="store.submitForm()"
+                        :loading="store.isLoading"
+                    >
+                        Submit
+                    </Button>
+                </div>
             </slot>
         </div>
     </div>
 </template>
+
+<style scoped>
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(22px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-22px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.anim-forward {
+    animation: slideInRight 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.anim-back {
+    animation: slideInLeft 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+</style>
diff --git a/frontend/src/components/submission/StepIndicator.vue b/frontend/src/components/submission/StepIndicator.vue
new file mode 100644
index 0000000..5fa2777
--- /dev/null
+++ b/frontend/src/components/submission/StepIndicator.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { FormStep } from "@/composables/useFormSteps";
+import { Check } from "@lucide/vue";
+
+defineProps<{
+    steps: FormStep[];
+    currentIndex: number;
+}>();
+
+const emit = defineEmits<{
+    "go-to": [index: number];
+}>();
+</script>
+
+<template>
+    <nav aria-label="Form steps" class="w-full overflow-x-auto py-1.5">
+        <div class="flex items-start w-max mx-auto px-1">
+            <template v-for="(step, idx) in steps" :key="idx">
+                <!-- Step node -->
+                <div
+                    class="flex flex-col items-center gap-2 select-none shrink-0 min-w-[60px] max-w-[96px]"
+                    :class="idx < currentIndex ? 'cursor-pointer' : 'cursor-default'"
+                    data-step-component="step-node"
+                    :data-step-index="idx"
+                    :data-step-state="
+                        idx < currentIndex ? 'done' : idx === currentIndex ? 'current' : 'todo'
+                    "
+                    @click="idx < currentIndex && emit('go-to', idx)"
+                >
+                    <!-- Circle -->
+                    <div
+                        class="relative z-10 flex items-center justify-center shrink-0 w-8 h-8 rounded-full border-2 transition-[background-color,border-color] duration-200 ease-out"
+                        :class="{
+                            'bg-surface-gray-7 border-outline-gray-4': idx <= currentIndex,
+                            'bg-transparent border-outline-gray-3': idx > currentIndex,
+                            'shadow-[0_0_0_5px_rgba(10,10,10,0.08)]': idx === currentIndex,
+                        }"
+                    >
+                        <Check
+                            v-if="idx < currentIndex"
+                            class="w-3 h-3 text-ink-white animate-check-in"
+                            :stroke-width="2.5"
+                        />
+                        <span
+                            v-else
+                            class="text-xs font-bold leading-none"
+                            :class="idx === currentIndex ? 'text-ink-white' : 'text-ink-gray-4'"
+                        >
+                            {{ idx + 1 }}
+                        </span>
+                    </div>
+                    <!-- Label + field count -->
+                    <div class="flex flex-col items-center gap-0.5">
+                        <span
+                            v-if="step.label"
+                            class="block max-w-[88px] truncate text-center text-[11.5px] transition-colors duration-200 ease-out"
+                            :class="{
+                                'font-semibold text-ink-gray-9': idx === currentIndex,
+                                'font-medium text-ink-gray-5': idx < currentIndex,
+                                'text-ink-gray-4': idx > currentIndex,
+                            }"
+                        >
+                            {{ step.label }}
+                        </span>
+                        <span
+                            class="text-[10.5px] tabular-nums text-ink-gray-4"
+                            :style="{ opacity: idx === currentIndex ? 0.9 : 0.55 }"
+                        >
+                            {{ step.fields.length }}
+                            field{{ step.fields.length !== 1 ? "s" : "" }}
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Connector -->
+                <div
+                    v-if="idx < steps.length - 1"
+                    class="w-10 sm:w-16 relative overflow-hidden h-0.5 mt-[15px] rounded-sm bg-surface-gray-2"
+                >
+                    <div
+                        class="absolute inset-0 bg-surface-gray-7 origin-left transition-transform duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)]"
+                        :style="{
+                            transform: `scaleX(${idx < currentIndex ? 1 : 0})`,
+                        }"
+                    />
+                </div>
+            </template>
+        </div>
+    </nav>
+</template>
+
+<style scoped>
+@keyframes check-in {
+    from {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.animate-check-in {
+    animation: check-in 200ms ease-out;
+}
+</style>
diff --git a/frontend/src/components/submission/SuccessSection.vue b/frontend/src/components/submission/SuccessSection.vue
index 1c42c90..0385c93 100644
--- a/frontend/src/components/submission/SuccessSection.vue
+++ b/frontend/src/components/submission/SuccessSection.vue
@@ -31,7 +31,7 @@ const successDescription = computed(() => {
 });
 </script>
 <template>
-    <div class="flex flex-col gap-4 items-center">
+    <div class="flex flex-col gap-4 items-center anim-success">
         <DotLottieVue
             src="https://lottie.host/b9ba5ce8-d753-497a-946c-76e0da2ec22d/QcoLWNS7AP.lottie"
             autoplay
@@ -47,3 +47,20 @@ const successDescription = computed(() => {
         />
     </div>
 </template>
+
+<style scoped>
+@keyframes fadeUp {
+    from {
+        opacity: 0;
+        transform: translateY(18px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.anim-success {
+    animation: fadeUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+</style>
diff --git a/frontend/src/composables/useFormSteps.ts b/frontend/src/composables/useFormSteps.ts
new file mode 100644
index 0000000..d4efa85
--- /dev/null
+++ b/frontend/src/composables/useFormSteps.ts
@@ -0,0 +1,72 @@
+import { computed, ref, type Ref, type ComputedRef } from "vue";
+import type { FormField } from "@/types/formfield";
+import { groupFieldsIntoSteps, type FormStep } from "@/utils/form_steps";
+
+export type { FormStep };
+
+export function useFormSteps(
+  allFields: Ref<FormField[]> | ComputedRef<FormField[]>
+) {
+  const currentStepIndex = ref(0);
+
+  const steps = computed<FormStep[]>(() =>
+    // Always at least one step, even for a fieldless form — isLastStep must
+    // hold on step 0 or the Submit button never renders.
+    groupFieldsIntoSteps(allFields.value, { alwaysIncludeTrailing: true })
+  );
+
+  const isMultiStep = computed(() => steps.value.length > 1);
+
+  const currentStep = computed(
+    () => steps.value[currentStepIndex.value] ?? steps.value[0]
+  );
+
+  const currentStepFields = computed<FormField[]>(
+    () => currentStep.value?.fields ?? []
+  );
+
+  const isFirstStep = computed(() => currentStepIndex.value === 0);
+  const isLastStep = computed(
+    () => currentStepIndex.value === steps.value.length - 1
+  );
+
+  const totalSteps = computed(() => steps.value.length);
+  const stepDirection = ref<"forward" | "backward">("forward");
+
+  function nextStep() {
+    if (!isLastStep.value) {
+      stepDirection.value = "forward";
+      currentStepIndex.value++;
+    }
+  }
+
+  function prevStep() {
+    if (!isFirstStep.value) {
+      stepDirection.value = "backward";
+      currentStepIndex.value--;
+    }
+  }
+
+  function goToStep(index: number) {
+    if (index >= 0 && index < steps.value.length) {
+      stepDirection.value =
+        index > currentStepIndex.value ? "forward" : "backward";
+      currentStepIndex.value = index;
+    }
+  }
+
+  return {
+    steps,
+    currentStepIndex,
+    currentStep,
+    currentStepFields,
+    isMultiStep,
+    isFirstStep,
+    isLastStep,
+    totalSteps,
+    stepDirection,
+    nextStep,
+    prevStep,
+    goToStep,
+  };
+}
diff --git a/frontend/src/config/fieldTypes.ts b/frontend/src/config/fieldTypes.ts
index a3da083..21fcd11 100644
--- a/frontend/src/config/fieldTypes.ts
+++ b/frontend/src/config/fieldTypes.ts
@@ -50,6 +50,7 @@ import {
   Paperclip,
   Phone as PhoneIcon,
   Pilcrow,
+  SeparatorHorizontal,
   SquareCheck,
   Star,
   Table as TableIcon,
@@ -58,6 +59,7 @@ import {
 } from "@lucide/vue";
 import Attachment from "@/components/fields/Attachment.vue";
 import Heading from "@/components/fields/Heading.vue";
+import PageBreak from "@/components/fields/PageBreak.vue";
 import Multiselect from "@/components/fields/multiselect/Multiselect.vue";
 import MultiselectBuilderExtras from "@/components/fields/multiselect/MultiselectBuilderExtras.vue";
 import Phone from "@/components/fields/Phone.vue";
@@ -80,7 +82,8 @@ export type FieldLayout =
   | "inline"
   | "description-first"
   | "custom"
-  | "heading";
+  | "heading"
+  | "page-break";
 
 export type FieldTypeDefinition = {
   /** Canonical name — must match a Fieldtype enum value */
@@ -352,6 +355,16 @@ export const FIELD_TYPE_DEFINITIONS: FieldTypeDefinition[] = [
     isBoolean: false,
     isDate: false,
   },
+  {
+    name: Fieldtype.PAGE_BREAK,
+    component: PageBreak,
+    icon: SeparatorHorizontal,
+    props: {},
+    layout: "page-break",
+    frappeFieldtype: "Tab Break",
+    isBoolean: false,
+    isDate: false,
+  },
 ];
 
 export const FIELD_TYPE_MAP = new Map<Fieldtype, FieldTypeDefinition>(
diff --git a/frontend/src/pages/SubmissionPage.vue b/frontend/src/pages/SubmissionPage.vue
index 382fdfb..f09c972 100644
--- a/frontend/src/pages/SubmissionPage.vue
+++ b/frontend/src/pages/SubmissionPage.vue
@@ -3,6 +3,7 @@ import { useRoute } from "vue-router";
 import { useSubmissionForm } from "@/stores/submissionForm";
 import FormHeader from "@/components/submission/FormHeader.vue";
 import FormRenderer from "@/components/submission/FormRenderer.vue";
+import StepIndicator from "@/components/submission/StepIndicator.vue";
 import Logo from "@/assets/Logo.vue";
 import PageHeader from "@/components/submission/PageHeader.vue";
 import PreviousSubmissionSection from "@/components/submission/PreviousSubmissionSection.vue";
@@ -20,12 +21,25 @@ submissionFormStore.initialize(route.params.route as string);
             v-if="!submissionFormStore.formIsPublished"
             class="form-container-simple"
         />
-        <div v-else class="form-container-simple">
-            <div class="space-y-4" v-if="submissionFormStore.inFormFillingState">
-                <FormHeader />
-                <FormRenderer :disabled="false" />
+        <div v-else>
+            <div class="px-8 my-6">
+                <StepIndicator
+                    v-if="
+                        submissionFormStore.isMultiStep && submissionFormStore.inFormFillingState
+                    "
+                    :steps="submissionFormStore.steps"
+                    :currentIndex="submissionFormStore.currentStepIndex"
+                    class="mb-4"
+                    @go-to="submissionFormStore.goToStep"
+                />
+            </div>
+            <div class="form-container-simple overflow-hidden mb-6">
+                <div class="space-y-4" v-if="submissionFormStore.inFormFillingState">
+                    <FormHeader />
+                    <FormRenderer :disabled="false" />
+                </div>
+                <SuccessSection v-if="submissionFormStore.inSuccessState" />
             </div>
-            <SuccessSection v-if="submissionFormStore.inSuccessState" />
         </div>
 
         <div class="z-10 fixed bottom-0 right-0 p-8">
diff --git a/frontend/src/stores/editForm.ts b/frontend/src/stores/editForm.ts
index 505fa9b..b9dd08f 100644
--- a/frontend/src/stores/editForm.ts
+++ b/frontend/src/stores/editForm.ts
@@ -1,24 +1,30 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
 import { createDocumentResource, createResource } from "frappe-ui";
-import { mapDoctypeFieldForForm } from "@/utils/form_fields";
+import {
+  mapDoctypeFieldForForm,
+  scrubFieldname,
+  compact,
+} from "@/utils/form_fields";
+import {
+  groupFieldsIntoSteps,
+  insertFieldAtStepEnd,
+  appendStep,
+  removeStepKeepFields as removeStepKeepFieldsUtil,
+  removeStepWithFields as removeStepWithFieldsUtil,
+  renameStep as renameStepUtil,
+  type FormStep,
+} from "@/utils/form_steps";
 import { FormField, Fieldtype } from "@/types/formfield";
 import { Form } from "@/types/form";
 import { toast } from "vue-sonner";
 import { dialog } from "@/utils/dialog";
 
-function scrubFieldname(label: string) {
-  return label
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "_") // replace non-alphanumeric with underscores
-    .replace(/^_+|_+$/g, "") // trim leading/trailing underscores
-    .replace(/_{2,}/g, "_"); // collapse multiple underscores
-}
-
 export const useEditForm = defineStore("editForm", () => {
   const formResource = ref<any>(null);
   const currentFormId = ref<string | null>(null);
   const selectedField = ref<FormField | null>(null);
+  const activeSectionIndex = ref(0);
   const isUnsaved = computed(() => formResource.value?.isDirty || false);
   const isLoading = computed(() => formResource.value?.loading || false);
   const isSaving = computed(
@@ -35,6 +41,19 @@ export const useEditForm = defineStore("editForm", () => {
   const fields = computed(() => {
     return formResource.value?.doc?.fields || [];
   });
+
+  const sections = computed<FormStep[]>(() =>
+    groupFieldsIntoSteps(fields.value, {
+      labelFallback: (n) => `Step ${n}`,
+      alwaysIncludeTrailing: true,
+    })
+  );
+
+  const isMultiSection = computed(() => sections.value.length > 1);
+
+  const activeSectionFields = computed(
+    () => sections.value[activeSectionIndex.value]?.fields ?? []
+  );
   const originalFormData = computed(
     () => formResource.value?.originalDoc || null
   );
@@ -194,76 +213,29 @@ export const useEditForm = defineStore("editForm", () => {
     }
   }
 
-  function compact() {
-    const fs: FormField[] = formResource.value?.doc?.fields ?? [];
-    if (!fs.length) return;
-
-    // Remap row_index values to 0..N-1 (closes gaps left by deletions/moves)
-    const distinctRows = [...new Set(fs.map((f) => f.row_index ?? 0))].sort(
-      (a, b) => a - b
-    );
-    const rowRemap = new Map(distinctRows.map((r, i) => [r, i]));
-    for (const f of fs) {
-      f.row_index = rowRemap.get(f.row_index ?? 0) ?? 0;
-    }
-
-    // Remap distinct column_index values within each row to 0..M-1
-    // (cells sharing a column_index stay grouped — multi-cell columns preserved)
-    const rowColsMap = new Map<number, Set<number>>();
-    for (const f of fs) {
-      const r = f.row_index!;
-      if (!rowColsMap.has(r)) rowColsMap.set(r, new Set());
-      rowColsMap.get(r)!.add(f.column_index ?? 0);
-    }
-    const colRemapByRow = new Map<number, Map<number, number>>();
-    for (const [r, cols] of rowColsMap) {
-      const sorted = [...cols].sort((a, b) => a - b);
-      colRemapByRow.set(r, new Map(sorted.map((c, i) => [c, i])));
-    }
-    for (const f of fs) {
-      f.column_index =
-        colRemapByRow.get(f.row_index!)!.get(f.column_index ?? 0) ?? 0;
-    }
-
-    // Renumber cell_index within each (row, column) to 0..K-1
-    const cellMap = new Map<string, FormField[]>();
-    for (const f of fs) {
-      const key = `${f.row_index}-${f.column_index}`;
-      if (!cellMap.has(key)) cellMap.set(key, []);
-      cellMap.get(key)!.push(f);
-    }
-    for (const cells of cellMap.values()) {
-      cells
-        .sort((a, b) => (a.cell_index ?? 0) - (b.cell_index ?? 0))
-        .forEach((f, i) => {
-          f.cell_index = i;
-        });
-    }
-  }
+  function addField(fieldtype: Fieldtype) {
+    if (!formResource.value?.doc) return;
+    const fs: FormField[] = formResource.value.doc.fields;
 
-  function lastRowIndex(fs: FormField[]): number {
-    return fs.reduce((m, f) => Math.max(m, f.row_index ?? 0), -1);
-  }
+    const newField: FormField = {
+      idx: fs.length + 1,
+      fieldtype,
+      label: "",
+      fieldname: "",
+      options: "",
+      default: "",
+      description: "",
+      row_index: 0,
+      column_index: 0,
+      cell_index: 0,
+    };
 
-  function addField(fieldtype: Fieldtype) {
-    if (formResource.value?.doc) {
-      const fs: FormField[] = formResource.value.doc.fields;
-
-      const newField: FormField = {
-        idx: fs.length + 1,
-        fieldtype,
-        label: "",
-        fieldname: "",
-        options: "",
-        default: "",
-        description: "",
-        row_index: lastRowIndex(fs) + 1,
-        column_index: 0,
-        cell_index: 0,
-      };
-
-      fs.push(newField);
-    }
+    insertFieldAtStepEnd(
+      fs,
+      newField,
+      activeSectionIndex.value,
+      isMultiSection.value
+    );
   }
 
   function addFieldFromDoctype(field: any) {
@@ -278,12 +250,17 @@ export const useEditForm = defineStore("editForm", () => {
       options: field.options,
       default: field.default,
       description: field.description,
-      row_index: lastRowIndex(fs) + 1,
+      row_index: 0,
       column_index: 0,
       cell_index: 0,
     };
 
-    fs.push(_newField);
+    insertFieldAtStepEnd(
+      fs,
+      _newField,
+      activeSectionIndex.value,
+      isMultiSection.value
+    );
   }
 
   function moveField(field: FormField, targetRow: number, targetCol: number) {
@@ -306,7 +283,7 @@ export const useEditForm = defineStore("editForm", () => {
     field.column_index = targetCol;
     field.cell_index = 0;
 
-    compact();
+    compact(fs);
   }
 
   function insertCell(
@@ -334,7 +311,7 @@ export const useEditForm = defineStore("editForm", () => {
     field.column_index = targetCol;
     field.cell_index = atCell;
 
-    compact();
+    compact(fs);
   }
 
   function insertNewRow(field: FormField, atRow: number) {
@@ -352,7 +329,7 @@ export const useEditForm = defineStore("editForm", () => {
     field.column_index = 0;
     field.cell_index = 0;
 
-    compact();
+    compact(fs);
   }
 
   function removeField(field: FormField) {
@@ -360,10 +337,45 @@ export const useEditForm = defineStore("editForm", () => {
       formResource.value.doc.fields = formResource.value.doc.fields.filter(
         (f: FormField) => f !== field
       );
-      compact();
+      compact(formResource.value.doc.fields);
     }
   }
 
+  function clampActiveStep() {
+    if (activeSectionIndex.value >= sections.value.length) {
+      activeSectionIndex.value = sections.value.length - 1;
+    }
+  }
+
+  function addStep() {
+    const fs: FormField[] = formResource.value?.doc?.fields;
+    if (!fs) return;
+
+    const count = sections.value.length;
+    appendStep(fs, count);
+    activeSectionIndex.value = count;
+  }
+
+  function removeStepKeepFields(index: number) {
+    const fs: FormField[] = formResource.value?.doc?.fields;
+    if (!fs) return;
+    removeStepKeepFieldsUtil(fs, sections.value, index);
+    clampActiveStep();
+  }
+
+  function removeStepWithFields(index: number) {
+    const fs: FormField[] = formResource.value?.doc?.fields;
+    if (!fs) return;
+    removeStepWithFieldsUtil(fs, sections.value, index);
+    clampActiveStep();
+  }
+
+  function renameStep(index: number, newLabel: string) {
+    const fs: FormField[] = formResource.value?.doc?.fields;
+    if (!fs) return;
+    renameStepUtil(fs, index, newLabel);
+  }
+
   function selectField(field: FormField | null) {
     selectedField.value = field;
   }
@@ -395,6 +407,10 @@ export const useEditForm = defineStore("editForm", () => {
     selectedField,
     isPublished,
     doctypeFields,
+    sections,
+    isMultiSection,
+    activeSectionFields,
+    activeSectionIndex,
 
     // Actions
     initialize,
@@ -406,6 +422,10 @@ export const useEditForm = defineStore("editForm", () => {
     updateFormData,
     addField,
     addFieldFromDoctype,
+    addStep,
+    removeStepKeepFields,
+    removeStepWithFields,
+    renameStep,
     selectField,
     updateField,
     removeField,
diff --git a/frontend/src/stores/submissionForm.ts b/frontend/src/stores/submissionForm.ts
index b27ac4b..6b22661 100644
--- a/frontend/src/stores/submissionForm.ts
+++ b/frontend/src/stores/submissionForm.ts
@@ -9,6 +9,7 @@ import {
   shouldFieldBeRequired,
   shouldFieldBeVisible,
 } from "@/utils/conditionals";
+import { useFormSteps } from "@/composables/useFormSteps";
 
 export type UserSubmission = {
   name: string;
@@ -51,6 +52,30 @@ export const useSubmissionForm = defineStore("submissionForm", () => {
 
   const fields = ref<Record<string, any>>({});
 
+  const allFormFields = computed<FormField[]>(
+    () => formResource.value?.data?.fields || []
+  );
+
+  const {
+    steps,
+    currentStepIndex,
+    currentStepFields,
+    isMultiStep,
+    isFirstStep,
+    isLastStep,
+    totalSteps,
+    stepDirection,
+    nextStep,
+    prevStep,
+    goToStep,
+  } = useFormSteps(allFormFields);
+
+  function handleNextStep() {
+    validateValues(currentStepFields.value);
+    if (errors.value.length > 0) return;
+    nextStep();
+  }
+
   const userSubmissionsResource = createResource({
     url: "forms_pro.api.submission.get_user_submissions",
     makeParams() {
@@ -170,18 +195,17 @@ export const useSubmissionForm = defineStore("submissionForm", () => {
     await _submit_doc.fetch();
   }
 
-  function validateValues() {
+  function validateValues(fieldsToValidate?: FormField[]) {
     errors.value = [];
     const allFields = formResource.value.data.fields || [];
+    const fieldsToCheck = fieldsToValidate ?? allFields;
 
-    allFields.forEach((field: FormField) => {
-      // Only validate visible fields
+    fieldsToCheck.forEach((field: FormField) => {
       const isVisible = shouldFieldBeVisible(field, fields.value, allFields);
       if (!isVisible) {
         return;
       }
 
-      // Check if field is required (including conditional requirements)
       const isRequired = shouldFieldBeRequired(field, fields.value, allFields);
 
       if (isRequired && !fields.value[field.fieldname]) {
@@ -213,5 +237,17 @@ export const useSubmissionForm = defineStore("submissionForm", () => {
     initialize,
     submitForm,
     saveAsDraft,
+    steps,
+    currentStepIndex,
+    currentStepFields,
+    isMultiStep,
+    isFirstStep,
+    isLastStep,
+    totalSteps,
+    nextStep,
+    prevStep,
+    goToStep,
+    handleNextStep,
+    stepDirection,
   };
 });
diff --git a/frontend/src/types/FormsPro/form_field.types.ts b/frontend/src/types/FormsPro/form_field.types.ts
index 6c569e3..af62609 100644
--- a/frontend/src/types/FormsPro/form_field.types.ts
+++ b/frontend/src/types/FormsPro/form_field.types.ts
@@ -21,6 +21,7 @@ export enum Fieldtype {
   "HEADING_1" = "Heading 1",
   "HEADING_2" = "Heading 2",
   "HEADING_3" = "Heading 3",
+  "PAGE_BREAK" = "Page Break",
 }
 
 export interface FormField {
diff --git a/frontend/src/utils/form_fields.ts b/frontend/src/utils/form_fields.ts
index e818b72..c177bd7 100644
--- a/frontend/src/utils/form_fields.ts
+++ b/frontend/src/utils/form_fields.ts
@@ -56,10 +56,13 @@ export const mapDoctypeFieldForForm = (
   return FRAPPE_TO_FORM_TYPE[fieldtype];
 };
 
-export const isHeading = (fieldtype: Fieldtype): boolean => {
-  return [
-    Fieldtype.HEADING_1,
-    Fieldtype.HEADING_2,
-    Fieldtype.HEADING_3,
-  ].includes(fieldtype);
-};
+// Pure layout-grid helpers live in form_layout.ts (unit-testable without
+// pulling in the component registry); re-exported here for existing imports.
+export {
+  isHeading,
+  isPageBreak,
+  isDisplayOnly,
+  scrubFieldname,
+  lastRowIndex,
+  compact,
+} from "@/utils/form_layout";
diff --git a/frontend/src/utils/form_layout.ts b/frontend/src/utils/form_layout.ts
new file mode 100644
index 0000000..15e2ac6
--- /dev/null
+++ b/frontend/src/utils/form_layout.ts
@@ -0,0 +1,87 @@
+/**
+ * Pure layout-grid helpers — no component imports, safe for unit tests.
+ *
+ * The layout invariant: every field carries (row_index, column_index,
+ * cell_index) and row_index is globally unique per row across the whole
+ * form, including Page Breaks.
+ */
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
+import type { FormField } from "@/types/formfield";
+
+export const isHeading = (fieldtype: Fieldtype): boolean => {
+  return [
+    Fieldtype.HEADING_1,
+    Fieldtype.HEADING_2,
+    Fieldtype.HEADING_3,
+  ].includes(fieldtype);
+};
+
+export const isPageBreak = (fieldtype: Fieldtype): boolean => {
+  return fieldtype === Fieldtype.PAGE_BREAK;
+};
+
+export const isDisplayOnly = (fieldtype: Fieldtype): boolean => {
+  return isHeading(fieldtype) || isPageBreak(fieldtype);
+};
+
+export function scrubFieldname(label: string) {
+  return label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_") // replace non-alphanumeric with underscores
+    .replace(/^_+|_+$/g, "") // trim leading/trailing underscores
+    .replace(/_{2,}/g, "_"); // collapse multiple underscores
+}
+
+export function lastRowIndex(fields: FormField[]): number {
+  return fields.reduce((m, f) => Math.max(m, f.row_index ?? 0), -1);
+}
+
+/**
+ * Normalizes the layout grid in place: closes row gaps, renumbers
+ * column_index within each row, and cell_index within each cell.
+ */
+export function compact(fields: FormField[]): void {
+  if (!fields.length) return;
+
+  // Remap row_index values to 0..N-1 (closes gaps left by deletions/moves)
+  const distinctRows = [...new Set(fields.map((f) => f.row_index ?? 0))].sort(
+    (a, b) => a - b
+  );
+  const rowRemap = new Map(distinctRows.map((r, i) => [r, i]));
+  for (const f of fields) {
+    f.row_index = rowRemap.get(f.row_index ?? 0) ?? 0;
+  }
+
+  // Remap distinct column_index values within each row to 0..M-1
+  // (cells sharing a column_index stay grouped — multi-cell columns preserved)
+  const rowColsMap = new Map<number, Set<number>>();
+  for (const f of fields) {
+    const r = f.row_index!;
+    if (!rowColsMap.has(r)) rowColsMap.set(r, new Set());
+    rowColsMap.get(r)!.add(f.column_index ?? 0);
+  }
+  const colRemapByRow = new Map<number, Map<number, number>>();
+  for (const [r, cols] of rowColsMap) {
+    const sorted = [...cols].sort((a, b) => a - b);
+    colRemapByRow.set(r, new Map(sorted.map((c, i) => [c, i])));
+  }
+  for (const f of fields) {
+    f.column_index =
+      colRemapByRow.get(f.row_index!)!.get(f.column_index ?? 0) ?? 0;
+  }
+
+  // Renumber cell_index within each (row, column) to 0..K-1
+  const cellMap = new Map<string, FormField[]>();
+  for (const f of fields) {
+    const key = `${f.row_index}-${f.column_index}`;
+    if (!cellMap.has(key)) cellMap.set(key, []);
+    cellMap.get(key)!.push(f);
+  }
+  for (const cells of cellMap.values()) {
+    cells
+      .sort((a, b) => (a.cell_index ?? 0) - (b.cell_index ?? 0))
+      .forEach((f, i) => {
+        f.cell_index = i;
+      });
+  }
+}
diff --git a/frontend/src/utils/form_steps.test.ts b/frontend/src/utils/form_steps.test.ts
new file mode 100644
index 0000000..6955e51
--- /dev/null
+++ b/frontend/src/utils/form_steps.test.ts
@@ -0,0 +1,134 @@
+import { describe, it, expect } from "vitest";
+import type { FormField } from "@/types/formfield";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
+import {
+  insertFieldAtStepEnd,
+  renameStep,
+  groupFieldsIntoSteps,
+} from "./form_steps";
+
+function dataField(row: number, fieldname: string): FormField {
+  return {
+    idx: 0,
+    fieldtype: Fieldtype.DATA,
+    label: fieldname,
+    fieldname,
+    row_index: row,
+    column_index: 0,
+    cell_index: 0,
+  } as FormField;
+}
+
+function pageBreak(row: number, label: string): FormField {
+  return {
+    idx: 0,
+    fieldtype: Fieldtype.PAGE_BREAK,
+    label,
+    fieldname: label.toLowerCase().replace(/\s+/g, "_"),
+    row_index: row,
+    column_index: 0,
+    cell_index: 0,
+  } as FormField;
+}
+
+function gridTuples(fields: FormField[]): string[] {
+  return fields.map((f) => `${f.row_index}-${f.column_index}-${f.cell_index}`);
+}
+
+function expectUniqueRows(fields: FormField[]) {
+  const rows = fields.map((f) => f.row_index);
+  expect(new Set(rows).size).toBe(rows.length);
+}
+
+describe("insertFieldAtStepEnd", () => {
+  it("appends to the end with the next row on a single-step form", () => {
+    const fields = [dataField(0, "a"), dataField(1, "b")];
+    const newField = dataField(0, "new");
+
+    insertFieldAtStepEnd(fields, newField, 0, false);
+
+    expect(fields[2]).toBe(newField);
+    expect(newField.row_index).toBe(2);
+    expectUniqueRows(fields);
+  });
+
+  it("gives a unique row when adding to an empty trailing step", () => {
+    // Step 0: rows 0,1 — Step 1: empty (just the Page Break at row 2)
+    const fields = [
+      dataField(0, "a"),
+      dataField(1, "b"),
+      pageBreak(2, "Step 2"),
+    ];
+    const newField = dataField(0, "new");
+
+    insertFieldAtStepEnd(fields, newField, 1, true);
+
+    expect(fields[3]).toBe(newField);
+    expect(newField.row_index).toBe(3);
+    expectUniqueRows(fields);
+  });
+
+  it("targets the right step when the form has a leading Page Break", () => {
+    // Leading PB names step 0: Step "One" = [a], "Two" = [b], "Three" = [c]
+    const fields = [
+      pageBreak(0, "One"),
+      dataField(1, "a"),
+      pageBreak(2, "Two"),
+      dataField(3, "b"),
+      pageBreak(4, "Three"),
+      dataField(5, "c"),
+    ];
+
+    const intoFirst = dataField(0, "new_first");
+    insertFieldAtStepEnd(fields, intoFirst, 0, true);
+    let steps = groupFieldsIntoSteps(fields);
+    expect(steps[0].fields.map((f) => f.fieldname)).toEqual(["a", "new_first"]);
+
+    const intoLast = dataField(0, "new_last");
+    insertFieldAtStepEnd(fields, intoLast, 2, true);
+    steps = groupFieldsIntoSteps(fields);
+    expect(steps[2].fields.map((f) => f.fieldname)).toEqual(["c", "new_last"]);
+    expectUniqueRows(fields);
+  });
+
+  it("shifts later steps' rows when inserting into a middle step", () => {
+    // Step 0: row 0 — Step 1: row 2 — Step 2: row 4
+    const fields = [
+      dataField(0, "a"),
+      pageBreak(1, "Step 2"),
+      dataField(2, "b"),
+      pageBreak(3, "Step 3"),
+      dataField(4, "c"),
+    ];
+    const newField = dataField(0, "new");
+
+    insertFieldAtStepEnd(fields, newField, 1, true);
+
+    // Inserted just before the "Step 3" Page Break
+    expect(fields[3]).toBe(newField);
+    expect(newField.row_index).toBe(3);
+    expectUniqueRows(fields);
+    // Step membership intact
+    const steps = groupFieldsIntoSteps(fields);
+    expect(steps[1].fields.map((f) => f.fieldname)).toEqual(["b", "new"]);
+    expect(steps[2].fields.map((f) => f.fieldname)).toEqual(["c"]);
+  });
+});
+
+describe("renameStep step 0 without a leading Page Break", () => {
+  it("inserts the leading Page Break without colliding grid positions", () => {
+    const fields = [dataField(0, "a"), dataField(1, "b")];
+
+    renameStep(fields, 0, "Intro");
+
+    expect(fields[0].fieldtype).toBe(Fieldtype.PAGE_BREAK);
+    expect(fields[0].label).toBe("Intro");
+    const tuples = gridTuples(fields);
+    expect(new Set(tuples).size).toBe(tuples.length);
+
+    const steps = groupFieldsIntoSteps(fields);
+    expect(steps).toHaveLength(1);
+    expect(steps[0].label).toBe("Intro");
+    expect(steps[0].fields.map((f) => f.fieldname)).toEqual(["a", "b"]);
+  });
+});
diff --git a/frontend/src/utils/form_steps.ts b/frontend/src/utils/form_steps.ts
new file mode 100644
index 0000000..917d5e7
--- /dev/null
+++ b/frontend/src/utils/form_steps.ts
@@ -0,0 +1,261 @@
+import type { FormField } from "@/types/formfield";
+import { Fieldtype } from "@/types/FormsPro/form_field.types";
+import {
+  isPageBreak,
+  scrubFieldname,
+  lastRowIndex,
+  compact,
+} from "@/utils/form_layout";
+
+export type FormStep = {
+  label: string;
+  fields: FormField[];
+};
+
+export type GroupFieldsOptions = {
+  /** Label for a step whose Page Break has no label (1-based step number). Defaults to "". */
+  labelFallback?: (stepNumber: number) => string;
+  /** Push the trailing step even when the form has no fields (guarantees >= 1 step). */
+  alwaysIncludeTrailing?: boolean;
+};
+
+/**
+ * Groups a flat field list into steps, splitting on Page Break fields.
+ * A Page Break's label names the step that follows it; a leading Page Break
+ * names the first step instead of creating an empty one.
+ */
+export function groupFieldsIntoSteps(
+  fields: FormField[],
+  options: GroupFieldsOptions = {}
+): FormStep[] {
+  const { labelFallback = () => "", alwaysIncludeTrailing = false } = options;
+  const result: FormStep[] = [];
+  let current: FormField[] = [];
+  let nextLabel = "";
+  let isFirst = true;
+
+  for (const field of fields) {
+    if (isPageBreak(field.fieldtype)) {
+      if (isFirst) {
+        nextLabel = field.label || "";
+        isFirst = false;
+        continue;
+      }
+      result.push({
+        label: nextLabel || labelFallback(result.length + 1),
+        fields: current,
+      });
+      current = [];
+      nextLabel = field.label || "";
+      continue;
+    }
+    isFirst = false;
+    current.push(field);
+  }
+
+  if (alwaysIncludeTrailing || current.length > 0 || result.length > 0) {
+    result.push({
+      label: nextLabel || labelFallback(result.length + 1),
+      fields: current,
+    });
+  }
+
+  return result;
+}
+
+/**
+ * Index in `fields` of the Page Break that starts step `stepIndex`.
+ * A leading Page Break belongs to step 0, so it shifts the target by one.
+ * Returns -1 when the step has no Page Break (e.g. step 0 of an unlabeled form).
+ */
+export function findStepPageBreakIndex(
+  fields: FormField[],
+  stepIndex: number
+): number {
+  const hasLeadingPB = fields[0] ? isPageBreak(fields[0].fieldtype) : false;
+  const target = stepIndex + (hasLeadingPB ? 1 : 0);
+  if (target === 0) return -1;
+  let pbCount = 0;
+  for (let i = 0; i < fields.length; i++) {
+    if (isPageBreak(fields[i].fieldtype)) {
+      pbCount++;
+      if (pbCount === target) return i;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Index in `fields` just past the last field of step `activeIndex`,
+ * i.e. where a new field for that step should be inserted.
+ */
+export function getActiveStepEndIndex(
+  fields: FormField[],
+  activeIndex: number,
+  isMultiStep: boolean
+): number {
+  if (!isMultiStep) return fields.length;
+
+  // A leading Page Break names step 0 rather than ending it, so the
+  // step's end is the (activeIndex + 1)-th Page Break in that case.
+  const hasLeadingPB = fields[0] ? isPageBreak(fields[0].fieldtype) : false;
+  const target = activeIndex + (hasLeadingPB ? 1 : 0);
+
+  let pbCount = 0;
+  for (let i = 0; i < fields.length; i++) {
+    if (isPageBreak(fields[i].fieldtype)) {
+      if (pbCount === target) return i;
+      pbCount++;
+    }
+  }
+  return fields.length;
+}
+
+/**
+ * Inserts `field` at the end of step `stepIndex`, assigning it the next
+ * row after everything before the insertion point and shifting the rows
+ * of all later fields to keep row_index globally unique.
+ */
+export function insertFieldAtStepEnd(
+  fields: FormField[],
+  field: FormField,
+  stepIndex: number,
+  isMultiStep: boolean
+): void {
+  const insertAt = getActiveStepEndIndex(fields, stepIndex, isMultiStep);
+  const newRowIndex = lastRowIndex(fields.slice(0, insertAt)) + 1;
+  for (const f of fields.slice(insertAt)) {
+    f.row_index = (f.row_index ?? 0) + 1;
+  }
+  field.row_index = newRowIndex;
+  field.column_index = 0;
+  field.cell_index = 0;
+  fields.splice(insertAt, 0, field);
+}
+
+/**
+ * Removes a leading Page Break when it is the only one left —
+ * a single-step form doesn't need a step label field.
+ */
+export function stripOrphanedLeadingPageBreak(fields: FormField[]): void {
+  const hasLeadingPB = fields[0] ? isPageBreak(fields[0].fieldtype) : false;
+  const pbCount = fields.filter((f) => isPageBreak(f.fieldtype)).length;
+  if (hasLeadingPB && pbCount === 1) {
+    fields.splice(0, 1);
+  }
+}
+
+/** Appends a new step (Page Break) after the last field. */
+export function appendStep(fields: FormField[], stepCount: number): void {
+  fields.push({
+    idx: fields.length + 1,
+    fieldtype: Fieldtype.PAGE_BREAK,
+    label: `Step ${stepCount + 1}`,
+    fieldname: scrubFieldname(`section_${stepCount + 1}`),
+    row_index: lastRowIndex(fields) + 1,
+    column_index: 0,
+    cell_index: 0,
+  } as FormField);
+}
+
+/**
+ * Removes step `index`'s Page Break, merging its fields into the previous
+ * step (their rows are re-offset to follow the previous step's last row).
+ * Step 0 cannot be removed.
+ */
+export function removeStepKeepFields(
+  fields: FormField[],
+  steps: FormStep[],
+  index: number
+): void {
+  if (index <= 0) return;
+
+  const pbIdx = findStepPageBreakIndex(fields, index);
+  if (pbIdx === -1) return;
+
+  const prevFields = steps[index - 1]?.fields ?? [];
+  const movedFields = steps[index]?.fields ?? [];
+
+  const maxPrevRow = prevFields.reduce(
+    (max, f) => Math.max(max, f.row_index ?? 0),
+    -1
+  );
+  const minMovedRow = movedFields.reduce(
+    (min, f) => Math.min(min, f.row_index ?? 0),
+    Infinity
+  );
+
+  if (movedFields.length > 0 && isFinite(minMovedRow)) {
+    const offset = maxPrevRow - minMovedRow + 1;
+    for (const f of movedFields) {
+      f.row_index = (f.row_index ?? 0) + offset;
+    }
+  }
+
+  fields.splice(pbIdx, 1);
+  stripOrphanedLeadingPageBreak(fields);
+  compact(fields);
+}
+
+/**
+ * Removes step `index` along with all its fields and its Page Break.
+ * Step 0 cannot be removed.
+ */
+export function removeStepWithFields(
+  fields: FormField[],
+  steps: FormStep[],
+  index: number
+): void {
+  if (index <= 0) return;
+
+  const stepFields = steps[index]?.fields ?? [];
+  const fieldSet = new Set(stepFields);
+  const pbIdx = findStepPageBreakIndex(fields, index);
+
+  const toRemove = new Set<number>();
+  if (pbIdx !== -1) toRemove.add(pbIdx);
+  for (let i = 0; i < fields.length; i++) {
+    if (fieldSet.has(fields[i])) toRemove.add(i);
+  }
+
+  for (const i of [...toRemove].sort((a, b) => b - a)) {
+    fields.splice(i, 1);
+  }
+
+  stripOrphanedLeadingPageBreak(fields);
+  compact(fields);
+}
+
+/**
+ * Renames step `index` by relabeling its Page Break. Renaming step 0 of a
+ * form without a leading Page Break inserts one to carry the label.
+ */
+export function renameStep(
+  fields: FormField[],
+  index: number,
+  newLabel: string
+): void {
+  if (index === 0 && (!fields[0] || !isPageBreak(fields[0].fieldtype))) {
+    // Make room at row 0 — existing fields shift down so the new Page
+    // Break doesn't collide with them in the layout grid.
+    for (const f of fields) {
+      f.row_index = (f.row_index ?? 0) + 1;
+    }
+    fields.unshift({
+      idx: 0,
+      fieldtype: Fieldtype.PAGE_BREAK,
+      label: newLabel,
+      fieldname: scrubFieldname("section_1"),
+      row_index: 0,
+      column_index: 0,
+      cell_index: 0,
+    } as FormField);
+    compact(fields);
+    return;
+  }
+
+  const pbIdx = findStepPageBreakIndex(fields, index);
+  if (pbIdx !== -1) {
+    fields[pbIdx].label = newLabel;
+  }
+}
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
new file mode 100644
index 0000000..240c3e1
--- /dev/null
+++ b/frontend/vitest.config.ts
@@ -0,0 +1,17 @@
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import { defineConfig } from "vitest/config";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  test: {
+    include: ["src/**/*.test.ts"],
+    environment: "node",
+  },
+});