diff --git a/packages/builder/src/components/portal/onboarding/steps/NewFormSteps.svelte b/packages/builder/src/components/portal/onboarding/steps/NewFormSteps.svelte
new file mode 100644
index 0000000000..7c3679f9e8
--- /dev/null
+++ b/packages/builder/src/components/portal/onboarding/steps/NewFormSteps.svelte
@@ -0,0 +1,9 @@
+<div>
+  When faced with a sizable form, consider implementing a multi-step approach to
+  enhance user experience.
+
+  <p>
+    Breaking the form into multiple steps can significantly improve usability by
+    making the process more digestible for your users.
+  </p>
+</div>
diff --git a/packages/builder/src/components/portal/onboarding/steps/index.js b/packages/builder/src/components/portal/onboarding/steps/index.js
index 6694ce97a7..e15d191652 100644
--- a/packages/builder/src/components/portal/onboarding/steps/index.js
+++ b/packages/builder/src/components/portal/onboarding/steps/index.js
@@ -2,3 +2,4 @@ export { default as OnboardingData } from "./OnboardingData.svelte"
 export { default as OnboardingDesign } from "./OnboardingDesign.svelte"
 export { default as OnboardingPublish } from "./OnboardingPublish.svelte"
 export { default as NewViewUpdateFormRowId } from "./NewViewUpdateFormRowId.svelte"
+export { default as NewFormSteps } from "./NewFormSteps.svelte"
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 5cf6735970..fab97cdd03 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -7,6 +7,7 @@ import {
   OnboardingDesign,
   OnboardingPublish,
   NewViewUpdateFormRowId,
+  NewFormSteps,
 } from "./steps"
 import { API } from "api"
 import { customPositionHandler } from "components/design/settings/controls/EditComponentPopover"
@@ -176,9 +177,7 @@ const getTours = () => {
         {
           id: TOUR_STEP_KEYS.BUILDER_FORM_CREATE_STEPS,
           title: "Add multiple steps",
-          body: `When faced with a sizable form, consider implementing a multi-step 
-            approach to enhance user experience. Breaking the form into multiple steps 
-            can significantly improve usability by making the process more digestible for your users.`,
+          layout: NewFormSteps,
           query: "#steps-prop-control-wrap",
           onComplete: () => {
             builderStore.highlightSetting()
@@ -210,9 +209,7 @@ const getTours = () => {
         {
           id: TOUR_STEP_KEYS.BUILDER_FORM_VIEW_UPDATE_STEPS,
           title: "Add multiple steps",
-          body: `When faced with a sizable form, consider implementing a multi-step 
-            approach to enhance user experience. Breaking the form into multiple steps 
-            can significantly improve usability by making the process more digestible for your users.`,
+          layout: NewFormSteps,
           query: "#steps-prop-control-wrap",
           onComplete: () => {
             builderStore.highlightSetting()