diff --git a/resources/css/components/forms.css b/resources/css/components/forms.css
index 47303fb5987..ecc555ea9a1 100644
--- a/resources/css/components/forms.css
+++ b/resources/css/components/forms.css
@@ -156,6 +156,11 @@
     [data-collapsed-field-icon] {
         display: inline-flex;
     }
+
+    /* Compress spacing for fieldsets when the fields are collapsed */
+    [data-fieldset-group] {
+        @apply space-y-5;
+    }
 }
 
 
diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
new file mode 100644
index 00000000000..4f892fb3418
--- /dev/null
+++ b/resources/css/components/forms/logic-tree.css
@@ -0,0 +1,261 @@
+/* GROUP LOGIC TREE CONNECTORS
+=================================================== */
+/*
+    URL: /cp/forms/{handle}/logic (Tree view)
+
+    Connects source fields to destination page headers using CSS anchor
+    positioning. Inspired by: https://codepen.io/cbolson/pen/emzegWP
+
+    Markup (LogicTree.vue):
+
+        - Each page column is a .linked-list__column (.linked-list__page-name + .linked-list__sections).
+        - Each section is a .linked-list__section (.linked-list__section-marker + <ul>).
+        - Page headers: .linked-list__page-name with anchor-name: --page-N.
+        - Source fields: .linked-list__connector with --end-connection: --page-N, pointing at the target page’s anchor name.
+        - Multi-column hops: add .linked-list__page-leap on the source <li> and a .linked-list__extra-leap-connector child for the bridge segment. This helps separate multi-column connectors from adjacent pages.
+
+    Direct leap anatomy (source below destination page header):
+
+        [destination page header]
+                           ┌────── ::after — gap midpoint → destination corner
+                           │
+        [source]───────────┘ ::before — source centre → gap midpoint
+
+    Each direct connector is two pseudo-elements on .linked-list__connector:
+
+        ::before — vertical leg from source centre up toward the destination,
+                   plus the left half of the inter-column gap
+        ::after  — right half of the gap + rounded corner at the destination
+
+    Page leaps (.linked-list__page-leap + .linked-list__extra-leap-connector):
+
+        ::before on .linked-list__extra-leap-connector — stub out from the
+                   source and along the first gap
+        ::after  on .linked-list__extra-leap-connector — corner into the
+                   second column
+        ::before on .linked-list__connector — vertical leg from the buffer
+                   rail down to the destination page header
+
+    Anchors:
+
+        --start-connection — set on each .linked-list__connector <li> (the source)
+        var(--end-connection) — anchor name of the target page header, declared in
+                             markup as --end-connection: --page-N on the source <li>
+        anchor-scope: --start-connection — keeps each source’s connector isolated
+*/
+@layer components {
+    .linked-list-container {
+        /* Don't let max-content grid width expand ancestors — scroll inside here only */
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: visible;
+        contain: inline-size;
+        overscroll-behavior-x: contain;
+    }
+
+    .linked-list {
+        --join-stroke: 1px;
+        --join-line: var(--join-stroke) solid var(--color-blue-400);
+        --join-radius: 20px;
+
+        :where(.dark) & {
+            --join-line: var(--join-stroke) solid var(--color-blue-500);
+        }
+        --gap: 6rem;
+        --column-width: 12.5rem;
+
+        --item-padding: 1rem;
+        --item-height: 3.2rem;
+
+        /* Bit of a magic number here to pull the line into the gap between the items */
+        --buffer-top-pull: calc(0.8rem + var(--item-padding));
+        --buffer-left-pull: 1.5rem;
+
+        /* GROUP LOGIC TREE CONNECTORS / LAYOUT
+        =================================================== */
+        position: relative;
+        display: grid;
+        align-items: start;
+        grid-auto-flow: column;
+        grid-auto-columns: var(--column-width);
+        width: max-content;
+        margin-inline: auto;
+        gap: var(--gap);
+
+        .linked-list__column {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .linked-list__page-name {
+            @apply px-2 pt-2;
+        }
+
+        .linked-list__sections {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
+
+        .linked-list__section {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .linked-list__section-marker {
+            display: flex;
+            align-items: end;
+            justify-content: center;
+            .linked-list__section:not(:first-child) & {
+                height: var(--item-height);
+            }
+            @apply text-2xs font-medium text-gray-700 dark:text-gray-200;
+            + ul {
+                @apply rounded-t-none;
+            }
+        }
+
+        .linked-list__section-marker-label {
+            @apply max-w-[8rem] shrink-0 select-none pt-1.5 rounded-t-xl bg-gray-100 dark:bg-transparent;
+            max-width: unset;
+            width: 100%;
+        }
+
+        ul {
+            margin: 0;
+            list-style: none;
+            display: grid;
+            gap: 0.5rem;
+            @apply p-1.5 px-1.5 bg-gray-100 rounded-lg dark:bg-gray-900/60;
+
+            li {
+                /* Use a grid instead of flexbox so we can force things into column 1 and 2.
+                   If we use flexbox then invisible items such as .linked-list__extra-leap-connector will take up an flex child space, changing the layout of items with a leap connector. */
+                display: grid;
+                grid-template-columns: 1rem 1fr;
+                > * {
+                    grid-row: 1;
+                }
+                & > svg {
+                    grid-column: 1;
+                }
+                .linked-list__field-name {
+                    grid-column: 2;
+                }
+                gap: 0.5rem;
+                height: var(--item-height);
+                padding-block: var(--item-padding);
+                @apply px-3 border-1 border-gray-300 rounded-md bg-white shadow-ui-xs text-xs text-gray-850 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:shadow-none;
+            }
+
+            /* GROUP LOGIC TREE CONNECTORS / SOURCE
+            =================================================== */
+            .linked-list__connector {
+                anchor-name: --start-connection;
+                anchor-scope: --start-connection; /* one anchor per source row */
+
+                /* GROUP LOGIC TREE CONNECTORS / DIRECT LEAP
+                =================================================== */
+                /* ::before spans source right edge → gap midpoint.
+                   ::after  spans gap midpoint → destination left edge. */
+                &::before,
+                &::after {
+                    content: '';
+                    position: absolute;
+                    pointer-events: none;
+                    border: var(--join-line);
+                    right: calc(anchor(left var(--end-connection)) + var(--gap) / 2);
+                    left: anchor(right --start-connection);
+                }
+
+                &::before {
+                    top: anchor(bottom var(--end-connection));
+                    bottom: anchor(center --start-connection);
+                    border-left-color: transparent;
+                    border-top-color: transparent;
+                    border-radius: 0 0 var(--join-radius) 0;
+                }
+
+                &::after {
+                    top: auto;
+                    right: anchor(left var(--end-connection));
+                    bottom: calc(anchor(bottom var(--end-connection)) - var(--join-stroke));
+                    left: calc(anchor(left var(--end-connection)) - var(--gap) / 2 - var(--join-stroke));
+                    height: var(--join-radius);
+                    border-right-color: transparent;
+                    border-bottom-color: transparent;
+                    border-radius: var(--join-radius) 0 0 0;
+                }
+            }
+            /* GROUP LOGIC TREE CONNECTORS / PAGE LEAP (SOURCE → NON-ADJACENT PAGE)
+            =================================================== */
+            /* Overrides the direct-hop ::before to terminate at the buffer rail instead of the source centre, leaving room for the bridge element. */
+            .linked-list__page-leap {
+                &::before,
+                &::after {
+                    border-style: dashed;
+                }
+                &::before {
+                    bottom: calc(anchor(center --start-connection) + var(--buffer-top-pull));
+                    left: calc(anchor(right --start-connection) + var(--gap));
+                }
+            }
+        }
+    }
+
+    /* GROUP LOGIC TREE CONNECTORS / VIEW MODES
+    =================================================== */
+    .linked-list__field-name {
+        @apply line-clamp-1 select-none;
+    }
+
+    .linked-list--expanded {
+        /* Bit of a magic number here to pull the line into the gap between the items */
+        --buffer-top-pull: calc(1.45rem + var(--item-padding));
+        --item-height: 4.5rem;
+        .linked-list__field-name {
+            @apply line-clamp-2;
+        }
+    }
+
+    /* GROUP LOGIC TREE CONNECTORS / FIELDSETS
+    =================================================== */
+    .linked-list__fieldset-field {
+        @apply border-dashed border-gray-400/75! dark:border-gray-600! opacity-75;
+    }
+
+    /* GROUP LOGIC TREE CONNECTORS / LEAP BRIDGE (FIRST GAP + CORNER)
+    =================================================== */
+    .linked-list__extra-leap-connector {
+        &::before {
+            top: calc(anchor(top --start-connection) + var(--buffer-top-pull) / 2 - var(--join-stroke) * 4);
+            bottom: anchor(center --start-connection);
+            left: anchor(right --start-connection);
+            width: calc(var(--gap) - var(--buffer-left-pull));
+            border-block-end: var(--join-line);
+            border-inline-end: var(--join-line);
+            border-bottom-right-radius: var(--join-radius);
+        }
+
+        &::after {
+            /* display: none; */
+            top: calc(anchor(center --start-connection) - var(--buffer-top-pull) - var(--join-stroke));
+            bottom: calc(anchor(center --start-connection) + var(--buffer-top-pull) / 2  + var(--join-stroke));
+            width: calc(var(--buffer-left-pull) + var(--join-stroke) * 2);
+            left: calc(anchor(right --start-connection) + var(--gap) - var(--buffer-left-pull) - var(--join-stroke));
+            border-inline-start: var(--join-line);
+            border-block-start: var(--join-line);
+            border-top-left-radius: var(--join-radius);
+        }
+
+        &::before,
+        &::after {
+            border-style: dashed;
+            content: '';
+            position: absolute;
+            pointer-events: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 12381bb4fb8..c80586f45df 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -14,10 +14,6 @@
     display: none;
 }
 
-@utility max-h-screen-px {
-    max-height: calc(100vh - 1px) !important;
-}
-
 .z-max {
     z-index: var(--z-index-max);
 }
@@ -76,6 +72,38 @@
     }
 }
 
+/*
+    Break out of .content-card horizontal padding and [data-max-width-wrapper] max-w-page
+    so content can span the card while staying aligned with padded siblings on scroll.
+
+    HTML Example:
+    <div class="content-card">
+        (direct descendants only)
+        <div class="st-full-bleed-content">
+            <div>…wide / scrollable content…</div>
+        </div>
+    </div>
+*/
+@utility st-full-bleed-content {
+    @apply -mx-2 sm:-mx-6 md:-mx-12 min-w-0;
+
+    & > * {
+        @apply px-2 sm:px-6 md:px-12 min-w-0 pb-6;
+    }
+}
+.content-card:has(.st-full-bleed-content) {
+    min-width: 0;
+    overflow-x: clip;
+    padding-bottom: 0;
+}
+[data-max-width-wrapper]:has(.st-full-bleed-content) {
+    max-width: none !important;
+}
+
+@utility max-h-screen-px {
+    max-height: calc(100vh - 1px) !important;
+}
+
 /* UTILITIES / TEXT
 =================================================== */
 /* Prefix things with `st-text-` (st for Statamic) because `text-` is a Tailwind prefix */
diff --git a/resources/css/cp.css b/resources/css/cp.css
index cb32123428f..d3aef6130c6 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -18,6 +18,7 @@
 @import './components/notifications.css';
 @import './components/page-tree.css';
 @import './components/forms.css';
+@import './components/forms/logic-tree.css';
 @import './components/pagination.css';
 @import './components/popover.css';
 @import './components/preview.css';
diff --git a/resources/js/components/forms/FieldNumber.vue b/resources/js/components/forms/FieldNumber.vue
new file mode 100644
index 00000000000..b976cfe56f3
--- /dev/null
+++ b/resources/js/components/forms/FieldNumber.vue
@@ -0,0 +1,13 @@
+<script setup>
+defineProps({
+    number: { type: Number, default: null },
+});
+</script>
+
+<template>
+    <span
+        v-if="number"
+        data-field-number
+        class="font-mono text-2xs text-gray-500 tabular-nums dark:text-gray-400"
+    >{{ number }}.</span>
+</template>
diff --git a/resources/js/components/forms/FieldNumberingToggle.vue b/resources/js/components/forms/FieldNumberingToggle.vue
new file mode 100644
index 00000000000..641a152851f
--- /dev/null
+++ b/resources/js/components/forms/FieldNumberingToggle.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { ToggleGroup, ToggleItem } from '@ui';
+import { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
+
+const { showFieldNumbers } = useFieldNumberingPreference();
+
+const toggleFieldNumbers = () => {
+    showFieldNumbers.value = ! showFieldNumbers.value;
+};
+</script>
+
+<template>
+    <ToggleGroup :model-value="showFieldNumbers ? 'on' : null" size="xs">
+        <ToggleItem
+            value="on"
+            icon="mail-sign-hashtag"
+            :aria-label="__('Show field numbers')"
+            v-tooltip="__('Show field numbers')"
+            @click.prevent="toggleFieldNumbers"
+        />
+    </ToggleGroup>
+</template>
diff --git a/resources/js/components/forms/builder/ImportField.vue b/resources/js/components/forms/builder/ImportField.vue
index b6da8fd7898..b4e379934f7 100644
--- a/resources/js/components/forms/builder/ImportField.vue
+++ b/resources/js/components/forms/builder/ImportField.vue
@@ -2,10 +2,13 @@
 import { Button, Description, Field, Icon, Label } from '@ui';
 import { computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { injectBuilderContext, InspectorType } from '@/pages/forms/Builder.vue';
-import { categoryColorClasses } from './categories';
 import { __ } from '@/bootstrap/globals';
 
+const mutedIconClass = 'text-gray-600 dark:text-gray-400';
+
 const props = defineProps<{
     field: any;
     isFirstRow?: boolean;
@@ -16,18 +19,35 @@ defineEmits<{
     (e: 'remove'): void;
 }>();
 
-const { errors, inspect, inspecting, inspectorType } = injectBuilderContext();
+const { errors, fieldNumbers, inspect, inspecting, inspectorType, showFieldNumbers } = injectBuilderContext();
+
+const fieldsetFieldNumber = (fieldsetField) => {
+    if (! showFieldNumbers?.value) {
+        return null;
+    }
+
+    const prefix = props.field.prefix || '';
+
+    return fieldNumberFromMap(
+        fieldNumbers?.value,
+        `${prefix}${fieldsetField.handle}`,
+        `${props.field._id}:${fieldsetField.handle}`,
+    );
+};
 
 const fieldsets = Object.values(usePage().props.fieldsets);
 
 const isInspecting = computed(() => inspectorType.value === InspectorType.FieldsetImport && inspecting.value?._id === props.field._id);
 
+const fieldset = computed(() => fieldsets.find((fs) => fs.handle === props.field.fieldset));
+
 const fieldsetFields = computed(() => {
-    const fieldset = fieldsets.find((fs) => fs.handle === props.field.fieldset);
-    if (!fieldset) return [];
-    return fieldset.fields.filter((f) => f.type !== 'import');
+    if (!fieldset.value) return [];
+    return fieldset.value.fields.filter((f) => f.type !== 'import');
 });
 
+const fieldsetTitle = computed(() => fieldset.value?.title);
+
 const inspectFieldsetImport = () => inspect(InspectorType.FieldsetImport, props.field);
 
 const errorMessage = computed(() => {
@@ -76,11 +96,25 @@ const errorMessage = computed(() => {
                     <Field :label="__(fieldsetField.config.display)" :instructions="fieldsetField.config.instructions">
                         <template #label>
                             <Label>
-                                <span class="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
-                                    <Icon name="link" data-collapsed-field-icon class="size-3.5 me-1 " :class="categoryColorClasses['fieldsets']?.icon" aria-hidden="true" />
+                                <FieldNumber :number="fieldsetFieldNumber(fieldsetField)" class="me-1" />
+                                <Icon
+                                    :name="fieldsetField.icon || 'generic-field'"
+                                    data-collapsed-field-icon
+                                    :class="['size-3.5 mb-0.25! me-2.5', mutedIconClass]"
+                                    aria-hidden="true"
+                                />
+                                <span>
                                     {{ __(fieldsetField.config.display) }}
                                     <span v-if="fieldsetField.config.validate?.includes('required')" class="relative -top-px ms-0.5 text-red-600">*</span>
                                 </span>
+                                <Icon
+                                    v-if="fieldsetFieldIndex === 0"
+                                    name="link"
+                                    data-collapsed-field-icon
+                                    class="inline-block size-3! text-indigo-500 dark:text-indigo-400 mb-0.5 ms-2"
+                                    :aria-label="__('Linked Fieldset')"
+                                    v-tooltip="fieldsetTitle ? __('Linked Fieldset: :title', { title: __(fieldsetTitle) }) : __('Linked Fieldset')"
+                                />
                             </Label>
                         </template>
                         <div class="pointer-events-none" inert>
diff --git a/resources/js/components/forms/builder/RegularFormField.vue b/resources/js/components/forms/builder/RegularFormField.vue
index c46b648313c..30739a2f7bf 100644
--- a/resources/js/components/forms/builder/RegularFormField.vue
+++ b/resources/js/components/forms/builder/RegularFormField.vue
@@ -3,7 +3,9 @@ import { Button, Field, Icon, Label } from '@ui';
 import { computed } from 'vue';
 import { FieldView, injectBuilderContext, InspectorType } from '@/pages/forms/Builder.vue';
 import { categories, categoryColorClasses } from './categories';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import WidthSelector from '@/components/fields/WidthSelector.vue';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { __ } from '@/bootstrap/globals';
 
 defineEmits<{
@@ -19,7 +21,15 @@ const props = defineProps<{
     isLastRow?: boolean;
 }>();
 
-const { dirty, errors, fieldView, inspect, inspecting, inspectorType } = injectBuilderContext();
+const { dirty, errors, fieldNumbers, fieldView, inspect, inspecting, inspectorType, showFieldNumbers } = injectBuilderContext();
+
+const fieldNumber = computed(() => {
+    if (! showFieldNumbers?.value) {
+        return null;
+    }
+
+    return fieldNumberFromMap(fieldNumbers?.value, props.field.handle, props.field._id);
+});
 
 const inspectField = () => inspect(InspectorType.Field, props.field);
 const isInspecting = computed(() => inspectorType.value === InspectorType.Field && inspecting.value?._id === props.field._id);
@@ -105,6 +115,7 @@ const hasErrors = computed(() => {
         >
             <template #label>
                 <Label :class="['mb-0', { 'cursor-pointer': !isInspecting }]">
+                    <FieldNumber :number="fieldNumber" class="me-1" />
                     <Icon :name="field.icon" data-collapsed-field-icon :class="['size-3.5 mb-0.25! me-2.5', iconColorClass]" aria-hidden="true" />
                     <Icon
                         v-if="field.config.if || field.config.unless"
@@ -140,6 +151,7 @@ const hasErrors = computed(() => {
         >
             <template #label>
                 <Label :class="['', { 'cursor-pointer': !isInspecting }]">
+                    <FieldNumber :number="fieldNumber" class="me-1" />
                     <Icon :name="field.icon" data-collapsed-field-icon :class="['size-3.5 mb-0.25! me-2.5', iconColorClass]" aria-hidden="true" />
                     <Icon
                         v-if="field.config.if || field.config.unless"
diff --git a/resources/js/components/forms/logic/FieldLogic.vue b/resources/js/components/forms/logic/FieldLogic.vue
index 4ff3cfec9c6..0e9657a3956 100644
--- a/resources/js/components/forms/logic/FieldLogic.vue
+++ b/resources/js/components/forms/logic/FieldLogic.vue
@@ -3,6 +3,7 @@ import { Button, Card, Heading, Icon, Panel, PanelHeader } from '@ui';
 import AddLogicRuleButton from './AddLogicRuleButton.vue';
 import FieldLogicRule from './FieldLogicRule.vue';
 import { computed, nextTick, ref, watch } from 'vue';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
 
 const emit = defineEmits(['update:fields']);
@@ -11,6 +12,8 @@ const props = defineProps({
     fields: { type: Array, required: true },
     suggestableFields: { type: Array, required: true },
     fieldtypes: Array,
+    showFieldNumbers: { type: Boolean, default: false },
+    fieldNumbers: { type: Map, default: () => new Map() },
 });
 
 const collapsed = ref([]);
@@ -45,12 +48,21 @@ const getIconClass = (category) => {
     return categoryColorClasses[color]?.icon || 'text-gray-600 dark:text-gray-400';
 };
 
+const fieldNumber = (field) => {
+    if (! props.showFieldNumbers) {
+        return null;
+    }
+
+    return fieldNumberFromMap(props.fieldNumbers, field.handle, field._id);
+};
+
 const availableFields = computed(() => {
     return fieldsWithoutLogic.value.map(field => ({
         handle: field._id,
         display: field.display,
         icon: field.icon || 'generic-field',
         iconClass: getIconClass(field.category),
+        number: fieldNumber(field),
     }));
 });
 
@@ -59,6 +71,7 @@ const getFieldConfig = (field) => ({
     display: field.display,
     icon: field.icon || 'generic-field',
     iconClass: getIconClass(field.category),
+    number: fieldNumber(field),
 });
 
 const getConditionsConfig = (field) => ({
diff --git a/resources/js/components/forms/logic/FieldLogicRule.vue b/resources/js/components/forms/logic/FieldLogicRule.vue
index ce4297eead2..8a492c874fe 100644
--- a/resources/js/components/forms/logic/FieldLogicRule.vue
+++ b/resources/js/components/forms/logic/FieldLogicRule.vue
@@ -9,6 +9,7 @@ import {
     Icon,
     Subheading,
 } from '@/components/ui';
+import FieldNumber from '@/components/forms/FieldNumber.vue';
 import FieldConditionsBuilder from '@/components/field-conditions/Builder.vue';
 import Converter from '@/components/field-conditions/Converter.js';
 import { categories, categoryColorClasses } from '@/components/forms/builder/categories.js';
@@ -121,6 +122,7 @@ const onAlwaysSaveUpdated = (alwaysSave) => emit('update:conditions', { ...props
             >
                 <button type="button" class="show-focus-within_target flex flex-1 items-center gap-1.75 p-2 py-1.75 ps-0 min-w-0 focus:outline-none cursor-pointer" @click="toggleCollapsedState">
                     <Badge size="lg" pill color="white" class="px-3 text-gray-950 gap-1">
+                        <FieldNumber :number="config?.number" class="me-0.5" />
                         <Icon
                             v-if="config?.icon"
                             :name="config.icon"
diff --git a/resources/js/components/forms/logic/LogicRulePicker.vue b/resources/js/components/forms/logic/LogicRulePicker.vue
index 1ccafb67b93..983e377f78f 100644
--- a/resources/js/components/forms/logic/LogicRulePicker.vue
+++ b/resources/js/components/forms/logic/LogicRulePicker.vue
@@ -140,7 +140,7 @@ onBeforeUnmount(() => unbindKeys());
                         <ui-icon :name="item.icon || 'plus'" class="size-4" :class="item.iconClass || 'text-gray-600 dark:text-gray-300'" />
                         <div class="flex-1">
                             <div class="line-clamp-1 text-sm text-gray-900 dark:text-gray-200">
-                                {{ __(item.display || item.handle) }}
+                                <span v-if="item.number" class="font-mono text-2xs text-gray-500 tabular-nums me-1 dark:text-gray-400">{{ item.number }}.</span>{{ __(item.display || item.handle) }}
                             </div>
                             <ui-description v-if="item.instructions" class="w-56 truncate text-2xs">
                                 {{ __(item.instructions) }}
diff --git a/resources/js/components/ui/Toggle/Item.vue b/resources/js/components/ui/Toggle/Item.vue
index d7ed43ed272..495a5e51b01 100644
--- a/resources/js/components/ui/Toggle/Item.vue
+++ b/resources/js/components/ui/Toggle/Item.vue
@@ -106,10 +106,10 @@ const restAttrs = computed(() => {
             class="text-gray-400"
             :aria-hidden="!iconOnly"
         />
-        <span v-if="hasDefaultSlot">
+        <span v-if="hasDefaultSlot" class="-mt-[1px]">
             <slot />
         </span>
-        <span v-else-if="label">
+        <span v-else-if="label" class="-mt-[1px]">
             {{ label }}
         </span>
     </ToggleGroupItem>
diff --git a/resources/js/composables/forms/field-numbering.js b/resources/js/composables/forms/field-numbering.js
new file mode 100644
index 00000000000..cacea9a2841
--- /dev/null
+++ b/resources/js/composables/forms/field-numbering.js
@@ -0,0 +1,92 @@
+import { ref, watch } from 'vue';
+import { preferences } from '@api';
+
+export const FIELD_NUMBERING_PREFERENCE_KEY = 'forms.field_numbering';
+
+let state = null;
+
+export function useFieldNumberingPreference() {
+    if (state) {
+        return state;
+    }
+
+    const showFieldNumbers = ref(preferences.get(FIELD_NUMBERING_PREFERENCE_KEY, false));
+
+    watch(showFieldNumbers, (value) => {
+        preferences.set(FIELD_NUMBERING_PREFERENCE_KEY, value);
+    });
+
+    state = { showFieldNumbers };
+
+    return state;
+}
+
+export function buildFieldNumbersFromLogicFields(fields) {
+    const map = new Map();
+    let n = 1;
+
+    (fields || []).forEach((field) => {
+        map.set(field.handle, n);
+
+        if (field._id) {
+            map.set(field._id, n);
+        }
+
+        n++;
+    });
+
+    return map;
+}
+
+export function buildFieldNumbersFromBuilderPages(pages, fieldsets) {
+    const map = new Map();
+    let n = 1;
+    const fieldsetList = fieldsets
+        ? (Array.isArray(fieldsets) ? fieldsets : Object.values(fieldsets))
+        : [];
+
+    (pages || []).forEach((page) => {
+        (page.sections || []).forEach((section) => {
+            (section.fields || []).forEach((fieldConfig) => {
+                if (fieldConfig.type === 'link_fields') {
+                    return;
+                }
+
+                if (fieldConfig.type === 'import') {
+                    const fieldset = fieldsetList.find((fs) => fs.handle === fieldConfig.fieldset);
+
+                    (fieldset?.fields || [])
+                        .filter((f) => f.type !== 'import')
+                        .forEach((ff) => {
+                            const handle = (fieldConfig.prefix || '') + ff.handle;
+                            map.set(handle, n);
+                            map.set(`${fieldConfig._id}:${ff.handle}`, n);
+                            n++;
+                        });
+
+                    return;
+                }
+
+                map.set(fieldConfig._id, n);
+
+                if (fieldConfig.handle) {
+                    map.set(fieldConfig.handle, n);
+                }
+
+                n++;
+            });
+        });
+    });
+
+    return map;
+}
+
+export function fieldNumberFromMap(map, ...keys) {
+    for (const key of keys) {
+        if (key != null && map.has(key)) {
+            return map.get(key);
+        }
+    }
+
+    return null;
+}
diff --git a/resources/js/pages/forms/Builder.vue b/resources/js/pages/forms/Builder.vue
index 3b00f2cce92..b78136ee4df 100644
--- a/resources/js/pages/forms/Builder.vue
+++ b/resources/js/pages/forms/Builder.vue
@@ -38,8 +38,11 @@ import Page from '@/components/forms/builder/Page.vue';
 import PageInspector from '@/components/forms/builder/PageInspector.vue';
 import SectionInspector from '@/components/forms/builder/SectionInspector.vue';
 import { useFieldtypeDraggable } from '@/components/forms/builder/use-drag-and-drop';
+import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
+import { buildFieldNumbersFromBuilderPages, useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 import { __, uniqid } from '@/bootstrap/globals';
 import { progress, keys } from '@api';
+import { usePage } from '@inertiajs/vue3';
 import type Binding from '@/components/keys/Binding';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
@@ -66,6 +69,8 @@ const pages = computed(() => formFields.value.pages);
 const allSections = computed(() => pages.value.flatMap(page => page.sections));
 const shouldShowViewSelector = computed(() => allSections.value.some(section => section.fields.length > 0));
 const fieldCount = computed(() => allSections.value.flatMap(section => section.fields).length);
+const { showFieldNumbers } = useFieldNumberingPreference();
+const fieldNumbers = computed(() => buildFieldNumbersFromBuilderPages(pages.value, usePage().props.fieldsets));
 
 const inspect = (type: InspectorType, data: object): void => {
     inspecting.value = data;
@@ -309,6 +314,8 @@ provideBuilderContext({
     errors,
     fieldtypes: props.fieldtypes,
     fieldView,
+    fieldNumbers,
+    showFieldNumbers,
     form: props.form,
     formsProInstalled: props.formsProInstalled,
     inspect,
@@ -385,7 +392,9 @@ onUnmounted(() => {
                 {{ form.title }}
             </template>
             <template #actions>
-                <ToggleGroup v-if="shouldShowViewSelector" v-model="fieldView" size="xs">
+                <div class="flex items-center gap-2.5">
+                    <FieldNumberingToggle />
+                    <ToggleGroup v-if="shouldShowViewSelector" v-model="fieldView" size="xs">
                     <ToggleItem
                         :value="FieldView.Expanded"
                         icon="expand"
@@ -398,7 +407,8 @@ onUnmounted(() => {
                         :aria-label="__('Collapsed view')"
                         v-tooltip="__('Collapsed view')"
                     />
-                </ToggleGroup>
+                    </ToggleGroup>
+                </div>
             </template>
         </Header>
 
diff --git a/resources/js/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 0743ec94198..67f382dfc16 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -2,12 +2,15 @@
 import Layout from '@/pages/layout/Layout.vue';
 import PanelLayout from '@/pages/layout/PanelLayout.vue';
 import FormsLayout from './Layout.vue';
-import { Button, Header, Icon, StatusIndicator } from '@ui';
+import { Button, Header, Icon, StatusIndicator, ToggleGroup, ToggleItem } from '@ui';
+import FieldNumberingToggle from '@/components/forms/FieldNumberingToggle.vue';
 import FieldLogic from '@/components/forms/logic/FieldLogic.vue';
 import PageLogic from '@/components/forms/logic/PageLogic.vue';
+import LogicTree from './LogicTree.vue';
 import Head from '@/pages/layout/Head.vue';
+import { buildFieldNumbersFromLogicFields, useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import { keys } from '@api';
+import { keys, preferences } from '@api';
 import axios from 'axios';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
@@ -22,6 +25,15 @@ const props = defineProps({
 
 const pages = ref(props.pages);
 const fields = ref(props.fields);
+const logicViewPreferenceKey = 'forms.logic.view';
+const logicView = ref(preferences.get(logicViewPreferenceKey, 'list'));
+watch(logicView, (view) => preferences.set(logicViewPreferenceKey, view));
+
+const treeDensityPreferenceKey = 'forms.logic.tree.density';
+const treeDensity = ref(preferences.get(treeDensityPreferenceKey, 'compressed'));
+watch(treeDensity, (density) => preferences.set(treeDensityPreferenceKey, density));
+const { showFieldNumbers } = useFieldNumberingPreference();
+const fieldNumbers = computed(() => buildFieldNumbersFromLogicFields(fields.value));
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});
@@ -106,26 +118,63 @@ onUnmounted(() => {
         </Button>
     </Teleport>
 
-    <div class="py-4 mx-auto max-w-5xl">
-        <Header class="mb-2">
+    <div class="mx-auto max-w-5xl min-w-0">
+        <Header class="mb-2 md:py-9">
             <template #title>
                 <StatusIndicator status="published" />
                 {{ form.title }}
             </template>
+            <template #actions>
+                <div class="flex items-center gap-2.5">
+                    <FieldNumberingToggle />
+                    <ToggleGroup v-if="logicView === 'tree'" v-model="treeDensity" size="xs">
+                        <ToggleItem
+                            value="expanded"
+                            icon="expand"
+                            :aria-label="__('Expanded view')"
+                            v-tooltip="__('Expanded view')"
+                        />
+                        <ToggleItem
+                            value="compressed"
+                            icon="collapse"
+                            :aria-label="__('Collapsed view')"
+                            v-tooltip="__('Collapsed view')"
+                        />
+                    </ToggleGroup>
+                    <ToggleGroup v-model="logicView" size="sm">
+                        <ToggleItem value="list" icon="layout-list" :label="__('List')" />
+                        <ToggleItem value="tree" icon="logic-tree" :label="__('Tree')" />
+                    </ToggleGroup>
+                </div>
+            </template>
         </Header>
 
-        <PageLogic
-            v-if="pages.length > 1"
-            class="mb-6"
-            v-model:pages="pages"
-            :suggestable-fields
-            :fieldtypes
-        />
+        <template v-if="logicView === 'list'">
+            <PageLogic
+                v-if="pages.length > 1"
+                class="mb-6"
+                v-model:pages="pages"
+                :suggestable-fields
+                :fieldtypes
+            />
+
+            <FieldLogic
+                v-model:fields="fields"
+                :suggestable-fields
+                :fieldtypes
+                :show-field-numbers
+                :field-numbers
+            />
+        </template>
+    </div>
 
-        <FieldLogic
-            v-model:fields="fields"
-            :suggestable-fields
-            :fieldtypes
+    <div v-if="logicView === 'tree'" class="st-full-bleed-content">
+        <LogicTree
+            :pages="pages"
+            :fields="fields"
+            :expanded="treeDensity === 'expanded'"
+            :show-field-numbers
+            :field-numbers
         />
     </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
new file mode 100644
index 00000000000..d97526b8232
--- /dev/null
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -0,0 +1,262 @@
+<script setup>
+import FieldNumber from '@/components/forms/FieldNumber.vue';
+import { Icon } from '@ui';
+import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
+import { fieldNumberFromMap } from '@/composables/forms/field-numbering';
+import { computed } from 'vue';
+
+const props = defineProps({
+    pages: { type: Array, required: true },
+    fields: { type: Array, required: true },
+    expanded: { type: Boolean, default: false },
+    showFieldNumbers: { type: Boolean, default: false },
+    fieldNumbers: { type: Map, default: () => new Map() },
+});
+
+const fieldNumber = (field) => {
+    if (! props.showFieldNumbers) {
+        return null;
+    }
+
+    return fieldNumberFromMap(props.fieldNumbers, field.handle, field._id);
+};
+
+const pageAnchor = (pageIndex) => `--page-${pageIndex + 1}`;
+
+const groupPageFields = (pageFields) => pageFields.map((field) => ({ field }));
+
+const firstFieldInGroup = (group) => group.field;
+
+const isFirstInFieldset = (field, index, groups) => {
+    if (! field.import) {
+        return false;
+    }
+
+    const previous = groups[index - 1]?.field;
+
+    return ! previous || previous.import !== field.import;
+};
+
+const isLastInFieldset = (field, index, groups) => {
+    if (! field.import) {
+        return false;
+    }
+
+    const next = groups[index + 1]?.field;
+
+    return ! next || next.import !== field.import;
+};
+
+const isFieldsetField = (field, index, groups) => field.import && ! isFirstInFieldset(field, index, groups);
+
+const groupPageSections = (pageFields) => {
+    const groups = groupPageFields(pageFields);
+
+    if (groups.length === 0) {
+        return [];
+    }
+
+    const sections = [];
+    let currentSection = null;
+
+    groups.forEach((group) => {
+        const field = firstFieldInGroup(group);
+
+        if (! currentSection || field.section_start) {
+            currentSection = {
+                title: field.section_display || __('Section'),
+                groups: [],
+            };
+            sections.push(currentSection);
+        }
+
+        currentSection.groups.push(group);
+    });
+
+    return sections;
+};
+
+const fieldsByPage = computed(() => {
+    return props.pages.map((page, pageIndex) => ({
+        page,
+        pageIndex,
+        sections: groupPageSections(props.fields.filter((field) => field.page_index === pageIndex)),
+    }));
+});
+
+const fieldConnections = computed(() => {
+    const connections = {};
+
+    props.pages.forEach((page, pageIndex) => {
+        (page.rules ?? []).forEach((rule) => {
+            if (! rule.destination) {
+                return;
+            }
+
+            const destinationPageIndex = props.pages.findIndex((p) => p._id === rule.destination);
+
+            if (destinationPageIndex <= pageIndex) {
+                return;
+            }
+
+            const condition = (rule.conditions ?? []).find((c) => c.field && c.value !== null && c.value !== '');
+
+            if (! condition?.field) {
+                return;
+            }
+
+            connections[condition.field] = {
+                endConnection: pageAnchor(destinationPageIndex),
+                leap: destinationPageIndex - pageIndex > 1,
+            };
+        });
+    });
+
+    return connections;
+});
+
+const pageTitle = (page, pageIndex) => page.display || __('Page :number', { number: pageIndex + 1 });
+
+const hasPageRules = (page) => (page.rules ?? []).some((rule) => {
+    if (! rule.destination) {
+        return false;
+    }
+
+    return (rule.conditions ?? []).some((condition) => condition.field && condition.value !== null && condition.value !== '');
+});
+
+const fieldConnection = (field) => fieldConnections.value[field.handle] ?? null;
+
+const connectorDestinationPageIndices = computed(() => {
+    const indices = new Set();
+
+    Object.values(fieldConnections.value).forEach((connection) => {
+        const pageNumber = Number(connection.endConnection.replace('--page-', ''));
+
+        if (! Number.isNaN(pageNumber)) {
+            indices.add(pageNumber - 1);
+        }
+    });
+
+    return indices;
+});
+
+const isConnectorDestination = (pageIndex) => connectorDestinationPageIndices.value.has(pageIndex);
+
+const hasPageNameLeadingIcons = (page, pageIndex) => isConnectorDestination(pageIndex) || hasPageRules(page);
+
+const mutedIconClass = 'text-gray-600 dark:text-gray-400';
+
+const fieldIconClass = (field) => {
+    if (field.type === 'reference' || field.import) {
+        return mutedIconClass;
+    }
+
+    const color = categories[field.category]?.color || 'gray';
+
+    return categoryColorClasses[color]?.icon || mutedIconClass;
+};
+
+</script>
+
+<template>
+    <div class="linked-list-container">
+        <div class="linked-list" :class="{ 'linked-list--expanded': expanded }">
+            <div
+                v-for="{ page, pageIndex, sections } in fieldsByPage"
+                :key="page._id"
+                class="linked-list__column"
+            >
+                <div
+                    class="linked-list__page-name"
+                    :style="{ 'anchor-name': pageAnchor(pageIndex) }"
+                >
+                    <div
+                        class="flex w-full min-w-0 flex-nowrap items-center justify-center gap-1.5"
+                        :class="{ '-ms-1.5': hasPageNameLeadingIcons(page, pageIndex) }"
+                    >
+                        <Icon
+                            v-if="isConnectorDestination(pageIndex)"
+                            name="chevron-right"
+                            class="size-3! shrink-0 -ms-2.5 relative -top-0.25 text-blue-400 dark:text-blue-500"
+                            aria-hidden="true"
+                        />
+                        <span v-if="hasPageRules(page)" v-tooltip="__('Logic attached')" class="inline-flex shrink-0">
+                            <Icon
+                                name="logic-tree"
+                                class="size-3.5! text-gray-400 dark:text-gray-500"
+                                aria-hidden="true"
+                            />
+                        </span>
+                        <div
+                            class="mx-auto flex w-full shrink-0 justify-center items-center gap-2 rounded-xl border border-dashed border-gray-300 px-3.5 py-2 text-xs font-medium text-gray-850 bg-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
+                            :class="{ 'w-[85%]!': hasPageNameLeadingIcons(page, pageIndex) }"
+                        >
+                            <Icon name="page" class="size-4 shrink-0 -ms-1.5 text-gray-500 dark:text-gray-400" aria-hidden="true" />
+                            <span class="line-clamp-1">{{ pageTitle(page, pageIndex) }}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="linked-list__sections">
+                    <div
+                        v-for="(section, sectionIndex) in sections"
+                        :key="`${page._id}-section-${sectionIndex}`"
+                        class="linked-list__section"
+                    >
+                        <div class="linked-list__section-marker" :aria-label="section.title">
+                            <span class="linked-list__section-marker-label line-clamp-2 text-center">{{ section.title }}</span>
+                        </div>
+                        <ul>
+                            <li
+                                v-for="(group, groupIndex) in section.groups"
+                                :key="group.field._id"
+                                :class="{
+                                    'linked-list__connector': fieldConnection(group.field),
+                                    'linked-list__page-leap': fieldConnection(group.field)?.leap,
+                                    'linked-list__fieldset-start': isFirstInFieldset(group.field, groupIndex, section.groups),
+                                    'linked-list__fieldset-field': isFieldsetField(group.field, groupIndex, section.groups),
+                                    'linked-list__fieldset-end': isLastInFieldset(group.field, groupIndex, section.groups),
+                                }"
+                                :style="fieldConnection(group.field) ? { '--end-connection': fieldConnection(group.field).endConnection } : null"
+                            >
+                                <div v-if="fieldConnection(group.field)?.leap" class="linked-list__extra-leap-connector" />
+                                <Icon
+                                    :name="group.field.icon || 'generic-field'"
+                                    :class="['size-4 shrink-0', fieldIconClass(group.field)]"
+                                    aria-hidden="true"
+                                />
+                                <span class="linked-list__field-name min-w-0 flex-1">
+                                    <FieldNumber :number="fieldNumber(group.field)" />
+                                    {{ group.field.display }}
+                                </span>
+                                <span
+                                    v-if="group.field.type === 'reference'"
+                                    v-tooltip="__('Linked Field')"
+                                    class="inline-flex size-4 shrink-0"
+                                >
+                                    <Icon
+                                        name="link"
+                                        class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                        aria-hidden="true"
+                                    />
+                                </span>
+                                <span
+                                    v-if="isFirstInFieldset(group.field, groupIndex, section.groups)"
+                                    v-tooltip="group.field.import_title ? __('Linked Fieldset: :title', { title: group.field.import_title }) : __('Linked Fieldset')"
+                                    class="inline-flex size-4 shrink-0"
+                                >
+                                    <Icon
+                                        name="link"
+                                        class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400"
+                                        aria-hidden="true"
+                                    />
+                                </span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/Forms/Fields/FormFields.php b/src/Forms/Fields/FormFields.php
index 311480363b0..4b3d627862a 100644
--- a/src/Forms/Fields/FormFields.php
+++ b/src/Forms/Fields/FormFields.php
@@ -74,6 +74,11 @@ public function field(string $handle): ?FormField
         return $this->fields()->get($handle);
     }
 
+    public function importedFields(array $config): array
+    {
+        return $this->getImportedFields($config);
+    }
+
     public function toBlueprint(): Blueprint
     {
         $tabs = $this->pages()
diff --git a/src/Forms/Fieldtypes/Fallback.php b/src/Forms/Fieldtypes/Fallback.php
index 0870b37e9be..cf29699fb80 100644
--- a/src/Forms/Fieldtypes/Fallback.php
+++ b/src/Forms/Fieldtypes/Fallback.php
@@ -38,6 +38,32 @@ public function title(): string
         return $this->wrappedFieldtype?->title() ?? parent::title();
     }
 
+    public function icon(): string
+    {
+        if (! $this->wrappedFieldtype) {
+            return parent::icon();
+        }
+
+        if ($equivalent = $this->equivalentFormFieldtype()) {
+            return $equivalent->icon();
+        }
+
+        return $this->wrappedFieldtype->icon();
+    }
+
+    public function categories(): array
+    {
+        if (! $this->wrappedFieldtype) {
+            return parent::categories();
+        }
+
+        if ($equivalent = $this->equivalentFormFieldtype()) {
+            return $equivalent->categories();
+        }
+
+        return $this->wrappedFieldtype->categories();
+    }
+
     public function toArray(): array
     {
         if (! $this->wrappedFieldtype) {
diff --git a/src/Http/Controllers/CP/Forms/FormLogicController.php b/src/Http/Controllers/CP/Forms/FormLogicController.php
index 2e935245e6c..991c01f8266 100644
--- a/src/Http/Controllers/CP/Forms/FormLogicController.php
+++ b/src/Http/Controllers/CP/Forms/FormLogicController.php
@@ -5,6 +5,8 @@
 use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Statamic\Contracts\Forms\Form;
+use Statamic\Facades\Fieldset as FieldsetRepository;
+use Statamic\Forms\Fields\FormField;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Support\Arr;
 use Statamic\Support\Str;
@@ -64,37 +66,46 @@ private function fieldsToVue($formFields): array
 
         foreach ($formFields->pages() as $pageIndex => $page) {
             foreach ($page['sections'] ?? [] as $section) {
+                $sectionDisplay = $section['display'] ?? __('Section');
+                $isFirstFieldInSection = true;
+
                 foreach ($section['fields'] ?? [] as $config) {
+                    if (isset($config['import'])) {
+                        $fieldset = FieldsetRepository::find($config['import']);
+
+                        foreach ($formFields->importedFields($config) as $formField) {
+                            $fields[] = $this->formFieldToVue(
+                                $formField,
+                                $pageIndex,
+                                'inline',
+                                importFieldset: $config['import'],
+                                importTitle: $fieldset?->title(),
+                                sectionDisplay: $sectionDisplay,
+                                sectionStart: $isFirstFieldInSection,
+                            );
+
+                            $isFirstFieldInSection = false;
+                        }
+
+                        continue;
+                    }
+
                     if (! isset($config['handle'])) {
                         continue;
                     }
 
-                    $handle = $config['handle'];
-                    $field = $config['field'] ?? [];
-
-                    $formField = $formFields->field($handle);
-                    $fieldtype = $formField->fieldtype();
-
-                    $result = [
-                        '_id' => $handle,
-                        'handle' => $handle,
-                        'page_index' => $pageIndex,
-                        'display' => $field['display'] ?? $handle,
-                        'icon' => $fieldtype?->icon() ?? 'generic-field',
-                        'category' => $fieldtype->categories()[0] ?? 'other',
-                        'fieldtype' => $field['type'] ?? 'short_answer',
-                        'if' => $field['if'] ?? null,
-                        'unless' => $field['unless'] ?? null,
-                        'if_any' => $field['if_any'] ?? null,
-                        'unless_any' => $field['unless_any'] ?? null,
-                        'always_save' => $field['always_save'] ?? false,
-                    ];
+                    $type = is_string($config['field'] ?? null) ? 'reference' : 'inline';
 
-                    if (isset($field['options'])) {
-                        $result['options'] = $field['options'];
-                    }
+                    $fields[] = $this->formFieldToVue(
+                        $formFields->field($config['handle']),
+                        $pageIndex,
+                        $type,
+                        handle: $config['handle'],
+                        sectionDisplay: $sectionDisplay,
+                        sectionStart: $isFirstFieldInSection,
+                    );
 
-                    $fields[] = $result;
+                    $isFirstFieldInSection = false;
                 }
             }
         }
@@ -102,6 +113,53 @@ private function fieldsToVue($formFields): array
         return $fields;
     }
 
+    private function formFieldToVue(
+        ?FormField $formField,
+        int $pageIndex,
+        string $type,
+        ?string $importFieldset = null,
+        ?string $importTitle = null,
+        ?string $handle = null,
+        ?string $sectionDisplay = null,
+        bool $sectionStart = false,
+    ): array {
+        $handle = $handle ?? $formField?->handle();
+        $fieldConfig = $formField?->config() ?? [];
+        $fieldtype = $formField?->fieldtype();
+
+        $result = [
+            '_id' => $handle,
+            'handle' => $handle,
+            'page_index' => $pageIndex,
+            'display' => $fieldConfig['display'] ?? $handle,
+            'icon' => $fieldtype?->icon() ?? 'generic-field',
+            'category' => $fieldtype->categories()[0] ?? 'other',
+            'fieldtype' => $fieldConfig['type'] ?? 'short_answer',
+            'type' => $type,
+            'if' => $fieldConfig['if'] ?? null,
+            'unless' => $fieldConfig['unless'] ?? null,
+            'if_any' => $fieldConfig['if_any'] ?? null,
+            'unless_any' => $fieldConfig['unless_any'] ?? null,
+            'always_save' => $fieldConfig['always_save'] ?? false,
+        ];
+
+        if ($importFieldset) {
+            $result['import'] = $importFieldset;
+            $result['import_title'] = $importTitle;
+        }
+
+        if ($sectionStart) {
+            $result['section_start'] = true;
+            $result['section_display'] = $sectionDisplay;
+        }
+
+        if (isset($fieldConfig['options'])) {
+            $result['options'] = $fieldConfig['options'];
+        }
+
+        return $result;
+    }
+
     private function mergeLogicIntoForm(Request $request, Form $form): void
     {
         $pageRules = collect($request->input('pages', []))
diff --git a/tests/Feature/Forms/FormLogicTest.php b/tests/Feature/Forms/FormLogicTest.php
index 5a3818193a4..f4bd68ca55c 100644
--- a/tests/Feature/Forms/FormLogicTest.php
+++ b/tests/Feature/Forms/FormLogicTest.php
@@ -108,6 +108,59 @@ public function it_provides_pages_with_rules()
             );
     }
 
+    #[Test]
+    public function it_marks_the_first_field_in_each_section()
+    {
+        Composer::shouldReceive('isInstalled')->with('statamic/forms-pro')->andReturn(true);
+
+        $this->setTestRoles(['test' => ['access cp', 'configure forms']]);
+        $user = User::make()->assignRole('test')->save();
+
+        $form = tap(Form::make('test')->formFields([
+            'pages' => [
+                [
+                    'sections' => [
+                        [
+                            'display' => 'Contact',
+                            'fields' => [
+                                [
+                                    'handle' => 'name',
+                                    'field' => [
+                                        'type' => 'short_answer',
+                                        'display' => 'Name',
+                                    ],
+                                ],
+                            ],
+                        ],
+                        [
+                            'display' => 'Details',
+                            'fields' => [
+                                [
+                                    'handle' => 'email',
+                                    'field' => [
+                                        'type' => 'short_answer',
+                                        'display' => 'Email',
+                                    ],
+                                ],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ]))->save();
+
+        $this
+            ->actingAs($user)
+            ->get(cp_route('forms.logic.edit', $form->handle()))
+            ->assertSuccessful()
+            ->assertInertia(fn ($page) => $page
+                ->where('fields.0.section_start', true)
+                ->where('fields.0.section_display', 'Contact')
+                ->where('fields.1.section_start', true)
+                ->where('fields.1.section_display', 'Details')
+            );
+    }
+
     #[Test]
     public function it_provides_fields_with_conditions()
     {
diff --git a/tests/Forms/Fieldtypes/FallbackTest.php b/tests/Forms/Fieldtypes/FallbackTest.php
index 6040cfedfef..e88ce84fd17 100644
--- a/tests/Forms/Fieldtypes/FallbackTest.php
+++ b/tests/Forms/Fieldtypes/FallbackTest.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Support\Facades\View;
 use PHPUnit\Framework\Attributes\Test;
+use Statamic\Fieldtypes\Code;
 use Statamic\Fieldtypes\Text;
 use Statamic\Fieldtypes\Textarea;
 use Statamic\Forms\Fieldtypes\Fallback;
@@ -30,4 +31,20 @@ public function it_falls_back_to_the_equivalent_form_fieldtype_view()
 
         $this->assertEquals('statamic::forms.antlers.fields.long_answer', $fallback->view());
     }
+
+    #[Test]
+    public function it_uses_the_blueprint_fieldtype_icon_when_there_is_no_form_fieldtype()
+    {
+        $fallback = (new Fallback)->wrapping(new Code);
+
+        $this->assertEquals('fieldtype-code', $fallback->icon());
+    }
+
+    #[Test]
+    public function it_uses_the_equivalent_form_fieldtype_icon_when_one_exists()
+    {
+        $fallback = (new Fallback)->wrapping(new Textarea);
+
+        $this->assertEquals('text-long', $fallback->icon());
+    }
 }