diff --git a/resources/css/components/forms.css b/resources/css/components/forms.css
index 2f580aba16d..72f86e24568 100644
--- a/resources/css/components/forms.css
+++ b/resources/css/components/forms.css
@@ -160,6 +160,11 @@
         display: inline-flex;
     }
 
+    /* Compress spacing for fieldsets when the fields are collapsed */
+    [data-fieldset-group] {
+        @apply space-y-5;
+    }
+
     /* Wrapper/white background */
     [data-section-drop-zone]:has(&) {
         background: unset;
@@ -404,4 +409,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/css/components/forms/logic-tree.css b/resources/css/components/forms/logic-tree.css
new file mode 100644
index 00000000000..ee60a43c8be
--- /dev/null
+++ b/resources/css/components/forms/logic-tree.css
@@ -0,0 +1,344 @@
+/* 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-800 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;
+            }
+
+            /* A fieldset import <li> is a plain column; its rows carry the chrome. */
+            li.linked-list__fieldset {
+                display: flex;
+                flex-direction: column;
+                height: auto;
+                padding: 0;
+                @apply border-0! bg-transparent! 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;
+        [data-field-number] {
+            /* Optically align */
+            position: relative;
+            top: -0.2px;
+        }
+    }
+
+    .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 / EMPTY SECTION
+    =================================================== */
+    /* Shown when a section has no fields (e.g. its last field was dragged out) so
+       the section sticks around as a drop target. */
+    .linked-list__empty-section {
+        @apply flex items-center justify-center rounded-md border border-dashed border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800 text-2xs text-gray-500 dark:text-gray-400 select-none;
+        height: var(--item-height, 3.2rem);
+    }
+
+    /* While an item is dragged over the section, Sortable inserts it here - hide the placeholder. */
+    .field-sort-container:has([data-field-item]) .linked-list__empty-section {
+        display: none;
+    }
+
+    /* GROUP LOGIC TREE CONNECTORS / FIELDSETS
+    =================================================== */
+    /* A fieldset import is one entry (one <li>) holding a row per field. Each row
+       mirrors a normal field chip. The var fallbacks let the drag mirror - which
+       is cloned outside the tree - keep the right height. */
+    .linked-list__fieldset-row {
+        display: grid;
+        grid-template-columns: 1rem 1fr;
+        gap: 0.5rem;
+        height: var(--item-height, 3.2rem);
+        padding-block: var(--item-padding, 1rem);
+        @apply px-3 border-1 border-dashed border-gray-400/75! rounded-md bg-white shadow-ui-xs text-xs text-gray-850 dark:border-gray-600! dark:bg-gray-800 dark:text-gray-200 dark:shadow-none opacity-75;
+
+        > * {
+            grid-row: 1;
+        }
+        & > svg {
+            grid-column: 1;
+        }
+        .linked-list__field-name {
+            grid-column: 2;
+        }
+    }
+
+    .linked-list__hidden-field {
+        @apply 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;
+        }
+    }
+
+    /* GROUP LOGIC TREE CONNECTORS / DRAG MIRROR
+    =================================================== */
+    /* The drag mirror is cloned into <body>, outside the scoped tree styles, so it
+       needs its own look. A single field mirrors a normal chip. */
+    .linked-list__mirror {
+        display: grid;
+        grid-template-columns: 1rem 1fr;
+        gap: 0.5rem;
+        height: var(--item-height, 3.2rem);
+        padding-block: var(--item-padding, 1rem);
+        @apply px-3 border border-gray-300 rounded-md bg-white shadow-lg text-xs text-gray-850 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 cursor-grabbing;
+
+        > * {
+            grid-row: 1;
+        }
+        & > svg {
+            grid-column: 1;
+        }
+        .linked-list__field-name {
+            grid-column: 2;
+        }
+    }
+
+    /* A fieldset mirror is a plain column; its .linked-list__fieldset-row children keep their own chrome. */
+    .linked-list__mirror.linked-list__fieldset {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        height: auto;
+        padding: 0;
+        @apply border-0! bg-transparent! shadow-none!;
+    }
+}
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 928cf6d31dd..035a439e710 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/builder/ImportField.vue b/resources/js/components/forms/builder/ImportField.vue
index a749c8795a2..b7d5c81fb15 100644
--- a/resources/js/components/forms/builder/ImportField.vue
+++ b/resources/js/components/forms/builder/ImportField.vue
@@ -4,7 +4,6 @@ import { computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import FieldNumber from '@/components/forms/FieldNumber.vue';
 import { injectBuilderContext, InspectorType } from '@/pages/forms/Builder.vue';
-import { categoryColorClasses } from './categories';
 import { __ } from '@/bootstrap/globals';
 
 const props = defineProps<{
@@ -23,10 +22,11 @@ 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 inspectFieldsetImport = () => inspect(InspectorType.FieldsetImport, props.field);
@@ -72,14 +72,19 @@ const errorMessage = computed(() => {
                         <span class="inline-flex" v-tooltip="__('Linked Fieldset')">
                             <Icon name="link" class="size-3.5" aria-hidden="true" />
                         </span>
-                        <span class="sr-only">{{ __('Linked Fieldset') }}</span>
+                        <span class="sr-only">{{ __('Linked Fieldset: :title', { title: __(fieldset.title) }) }}</span>
                     </span>
                     <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">
-                                    <FieldNumber :field-key="`${field._id}:${fieldsetField.handle}`" class="me-1" />
-                                    <Icon name="link" data-collapsed-field-icon class="size-3.5 me-1 " :class="categoryColorClasses['fieldsets']?.icon" aria-hidden="true" />
+                                <FieldNumber :field-key="`${field._id}:${fieldsetField.handle}`" class="me-1" />
+                                <Icon
+                                    :name="fieldsetField.icon || 'generic-field'"
+                                    data-collapsed-field-icon
+                                    class="size-3.5 mb-0.25! me-2.5 text-gray-600 dark:text-gray-400"
+                                    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>
diff --git a/resources/js/components/forms/builder/use-drag-and-drop.js b/resources/js/components/forms/builder/use-drag-and-drop.js
index 22f43105715..ffa46a98565 100644
--- a/resources/js/components/forms/builder/use-drag-and-drop.js
+++ b/resources/js/components/forms/builder/use-drag-and-drop.js
@@ -160,7 +160,7 @@ export function useFieldtypeDraggable({ pages, onDragStart, onDrop }) {
  * Handles sorting/reordering fields within sections.
  * Should be used per-page.
  */
-export function useSortable({ container, sections, fieldView, onFieldMoved }) {
+export function useSortable({ container, sections, fieldView, onFieldMoved, onMirrorCreated }) {
     let sortable = null;
 
     const refresh = () => {
@@ -189,6 +189,8 @@ export function useSortable({ container, sections, fieldView, onFieldMoved }) {
         sortable.on('drag:stop', () => document.documentElement.classList.remove('cursor-grabbing'));
 
         sortable.on('mirror:created', (event) => {
+            onMirrorCreated?.(event);
+
             if (fieldView?.value !== 'collapsed') return;
 
             event.mirror.querySelectorAll('[data-collapsed-field-icon]').forEach((el) => (el.style.display = 'inline-flex'));
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/pages/forms/Logic.vue b/resources/js/pages/forms/Logic.vue
index 0ae4caece76..dbde81b92f6 100644
--- a/resources/js/pages/forms/Logic.vue
+++ b/resources/js/pages/forms/Logic.vue
@@ -1,20 +1,30 @@
-<script setup>
+<script setup lang="ts">
 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 { useFieldNumberingPreference } from '@/composables/forms/field-numbering';
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue';
-import { keys } from '@api';
+import { keys, preferences } from '@api';
 import axios from 'axios';
-import { usePage } from '@inertiajs/vue3';
 
 defineOptions({ layout: [Layout, PanelLayout, FormsLayout] });
 
+enum View {
+    List = 'list',
+    Tree = 'tree',
+}
+
+enum TreeDensity {
+    Compressed = 'compressed',
+    Expanded = 'expanded',
+}
+
 const props = defineProps({
     form: Object,
     pages: Array,
@@ -28,6 +38,8 @@ const fields = ref(props.fields);
 const saving = ref(false);
 const saveBinding = ref(null);
 const errors = ref({});
+const view = ref<View>(preferences.get('forms.logic.view', View.List));
+const treeDensity = ref<TreeDensity>(preferences.get('forms.logic.tree.density', TreeDensity.Compressed));
 
 const { showFieldNumbers } = useFieldNumberingPreference();
 const fieldNumbers = computed(() => {
@@ -47,6 +59,7 @@ provide('fieldNumbers', fieldNumbers);
 
 const suggestableFields = computed(() => {
     return fields.value
+        .filter(field => !field.import)
         .filter(field => !['information', 'structure'].includes(field.category))
         .map(field => ({
             handle: field.handle,
@@ -103,6 +116,9 @@ const save = () => {
 watch(pages, dirty, { deep: true });
 watch(fields, dirty, { deep: true });
 
+watch(view, (view: View) => preferences.set('forms.logic.view', view));
+watch(treeDensity, (density: TreeDensity) => preferences.set('forms.logic.tree.density', density));
+
 onMounted(() => {
     saveBinding.value = keys.bindGlobal(['return', 'mod+s'], (e) => {
         e.preventDefault();
@@ -126,29 +142,59 @@ 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>
-                <FieldNumberingToggle />
+                <div class="flex items-center gap-2.5">
+                    <FieldNumberingToggle />
+                    <ToggleGroup v-if="view === View.Tree" v-model="treeDensity" size="xs">
+                        <ToggleItem
+                            :value="TreeDensity.Expanded"
+                            icon="expand"
+                            :aria-label="__('Expanded view')"
+                            v-tooltip="__('Expanded view')"
+                        />
+                        <ToggleItem
+                            :value="TreeDensity.Compressed"
+                            icon="collapse"
+                            :aria-label="__('Collapsed view')"
+                            v-tooltip="__('Collapsed view')"
+                        />
+                    </ToggleGroup>
+                    <ToggleGroup v-model="view" size="sm">
+                        <ToggleItem :value="View.List" icon="layout-list" :label="__('List')" />
+                        <ToggleItem :value="View.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="view === View.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
+            />
+        </template>
+    </div>
 
-        <FieldLogic
+    <div v-if="view === View.Tree" class="st-full-bleed-content">
+        <LogicTree
+            :pages
             v-model:fields="fields"
-            :suggestable-fields
-            :fieldtypes
+            :density="treeDensity"
         />
     </div>
 </template>
diff --git a/resources/js/pages/forms/LogicTree.vue b/resources/js/pages/forms/LogicTree.vue
new file mode 100644
index 00000000000..4b910c63079
--- /dev/null
+++ b/resources/js/pages/forms/LogicTree.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import LogicTreeField from './LogicTreeField.vue';
+import LogicTreeFieldset from './LogicTreeFieldset.vue';
+import { Icon } from '@ui';
+import { useSortable } from '@/components/forms/builder/use-drag-and-drop';
+import { computed, ref, useTemplateRef } from 'vue';
+import type { PropType } from 'vue';
+
+enum TreeDensity {
+    Compressed = 'compressed',
+    Expanded = 'expanded',
+}
+
+const emit = defineEmits(['update:fields']);
+
+const props = defineProps({
+    pages: { type: Array, required: true },
+    fields: { type: Array, required: true },
+    density: { type: String as PropType<TreeDensity>, default: TreeDensity.Compressed },
+});
+
+const pageAnchor = (pageIndex) => `--page-${pageIndex + 1}`;
+
+// Group a page's fields into sections, and each section's fields into items. A
+// fieldset import becomes one item - a group holding its fields; every other
+// field is just the field itself. So the tree renders and drags at the item level.
+const buildSections = (pageFields) => {
+    const sections = [];
+    let section = null;
+
+    pageFields.forEach((field) => {
+        if (! section || field.section_start) {
+            section = { display: field.section_display || __('Section'), items: [] };
+            sections.push(section);
+        }
+
+        if (! field.import) {
+            section.items.push(field);
+            return;
+        }
+
+        const last = section.items.at(-1);
+
+        if (last?.import === field.import) {
+            last.fields.push(field);
+        } else {
+            section.items.push({
+                _id: field._id,
+                import: field.import,
+                import_title: field.import_title ?? null,
+                fields: [field],
+            });
+        }
+    });
+
+    return sections;
+};
+
+// The tree's working structure (pages -> sections -> items). It's stateful
+// rather than re-derived from props so that dragging the last field out of a
+// section keeps the (now empty) section around, and so drag can move items
+// between sections directly.
+const columns = ref(
+    props.pages.map((page, pageIndex) => ({
+        page,
+        pageIndex,
+        sections: buildSections(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,
+                destinationPageIndex,
+            };
+        });
+    });
+
+    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 !== '');
+});
+
+// Only single fields can be logic sources - imported fields can't be conditions.
+const itemConnection = (item) => (item.import ? null : fieldConnections.value[item.handle] ?? null);
+
+// A single-field item is the field itself; a fieldset item is a group of fields.
+const itemFields = (item) => (item.import ? item.fields : [item]);
+
+const connectorDestinationPageIndices = computed(() => {
+    return new Set(Object.values(fieldConnections.value).map((connection) => connection.destinationPageIndex));
+});
+
+const isConnectorDestination = (pageIndex) => connectorDestinationPageIndices.value.has(pageIndex);
+
+const hasPageNameLeadingIcons = (page, pageIndex) => isConnectorDestination(pageIndex) || hasPageRules(page);
+
+// Drag & drop. Each item (single field or whole fieldset) moves as one unit.
+const tree = useTemplateRef('tree');
+const allSections = computed(() =>
+    columns.value.flatMap((column) => column.sections.map((section) => ({
+        fields: section.items.flatMap(itemFields),
+    }))),
+);
+
+const moveField = (from, to, oldIndex, newIndex) => {
+    const [fromPage, fromSection] = from.split(':').map(Number);
+    const [toPage, toSection] = to.split(':').map(Number);
+
+    const [item] = columns.value[fromPage].sections[fromSection].items.splice(oldIndex, 1);
+    if (! item) return;
+
+    columns.value[toPage].sections[toSection].items.splice(newIndex, 0, item);
+
+    // Flatten back to fields, re-tagging page + section so numbering stays correct.
+    const fields = columns.value.flatMap((column, pageIndex) =>
+        column.sections.flatMap((section) =>
+            section.items
+                .flatMap(itemFields)
+                .map((field, index) => ({
+                    ...field,
+                    page_index: pageIndex,
+                    section_start: index === 0,
+                    section_display: section.display,
+                })),
+        ),
+    );
+
+    emit('update:fields', fields);
+};
+
+// The mirror is a clone of the dragged <li> - which now already contains a whole
+// fieldset's rows - appended to <body>, outside the scoped tree styles.
+const onMirrorCreated = ({ source, mirror }) => {
+    mirror.style.width = `${source.offsetWidth}px`;
+    mirror.classList.add('linked-list__mirror');
+};
+
+useSortable({
+    container: tree,
+    sections: allSections,
+    onFieldMoved: moveField,
+    onMirrorCreated,
+});
+</script>
+
+<template>
+    <div ref="tree" class="linked-list-container">
+        <div class="linked-list" :class="{ 'linked-list--expanded': density === TreeDensity.Expanded }">
+            <div
+                v-for="{ page, pageIndex, sections } in columns"
+                :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.display">
+                            <span class="linked-list__section-marker-label line-clamp-2 text-center">{{ section.display }}</span>
+                        </div>
+                        <ul class="field-sort-container" :data-sort-section="`${pageIndex}:${sectionIndex}`">
+                            <div v-if="! section.items.length" class="linked-list__empty-section">
+                                {{ __('No fields') }}
+                            </div>
+                            <li
+                                v-for="field in section.items"
+                                :key="field._id"
+                                data-field-item
+                                class="cursor-pointer"
+                                :class="{
+                                    'linked-list__fieldset': field.import,
+                                    'linked-list__hidden-field': field.hidden,
+                                    'linked-list__connector': itemConnection(field),
+                                    'linked-list__page-leap': itemConnection(field)?.leap,
+                                }"
+                                :style="itemConnection(field) ? { '--end-connection': itemConnection(field).endConnection } : null"
+                                v-tooltip="field.import ? __(`Logic can't be added to imported fields. Please edit the fieldset instead.`) : null"
+                            >
+                                <LogicTreeFieldset v-if="field.import" :item="field" />
+
+                                <template v-else>
+                                    <div v-if="itemConnection(field)?.leap" class="linked-list__extra-leap-connector" />
+                                    <LogicTreeField :field="field" />
+                                </template>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/pages/forms/LogicTreeField.vue b/resources/js/pages/forms/LogicTreeField.vue
new file mode 100644
index 00000000000..616b6e63422
--- /dev/null
+++ b/resources/js/pages/forms/LogicTreeField.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import FieldNumber from '@/components/forms/FieldNumber.vue';
+import { Icon } from '@ui';
+import { categories, categoryColorClasses } from '@/components/forms/builder/categories';
+import { computed } from 'vue';
+
+const props = defineProps<{
+    field: any;
+}>();
+
+const mutedIconClass = 'text-gray-600 dark:text-gray-400';
+
+const iconClass = computed(() => {
+    if (props.field.type === 'reference' || props.field.import) {
+        return mutedIconClass;
+    }
+
+    const color = categories[props.field.category]?.color || 'gray';
+
+    return categoryColorClasses[color]?.icon || mutedIconClass;
+});
+</script>
+
+<template>
+    <Icon
+        :name="field.icon || 'generic-field'"
+        :class="['size-4 shrink-0', iconClass]"
+        aria-hidden="true"
+    />
+    <span class="linked-list__field-name min-w-0 flex-1">
+        <FieldNumber :field-key="field._id" />
+        {{ field.display }}
+    </span>
+    <span
+        v-if="field.hidden"
+        class="inline-flex size-4 shrink-0"
+        v-tooltip="__('Hidden')"
+    >
+        <Icon name="eye-closed" class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400" aria-hidden="true" />
+    </span>
+    <span
+        v-if="field.type === 'reference'"
+        class="inline-flex size-4 shrink-0"
+        v-tooltip="__('Linked Field')"
+    >
+        <Icon name="link" class="size-4 shrink-0 text-indigo-500 dark:text-indigo-400" aria-hidden="true" />
+    </span>
+</template>
diff --git a/resources/js/pages/forms/LogicTreeFieldset.vue b/resources/js/pages/forms/LogicTreeFieldset.vue
new file mode 100644
index 00000000000..4e5c062fa01
--- /dev/null
+++ b/resources/js/pages/forms/LogicTreeFieldset.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import LogicTreeField from './LogicTreeField.vue';
+import { Icon } from '@ui';
+
+defineProps<{
+    item: any;
+}>();
+</script>
+
+<template>
+    <div
+        v-for="(field, index) in item.fields"
+        :key="field._id"
+        class="linked-list__fieldset-row"
+    >
+        <LogicTreeField :field />
+        <span
+            v-tooltip="item.import_title ? __('Linked Fieldset: :title', { title: item.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>
+    </div>
+</template>
diff --git a/src/Forms/Fields/FormFields.php b/src/Forms/Fields/FormFields.php
index 311480363b0..ae041a3b907 100644
--- a/src/Forms/Fields/FormFields.php
+++ b/src/Forms/Fields/FormFields.php
@@ -136,7 +136,7 @@ private function getReferencedField(array $config): FormField
     /**
      * Borrowed from \Statamic\Fields\Fields.
      */
-    private function getImportedFields(array $config): array
+    public function getImportedFields(array $config): array
     {
         $recursion = tap(app(FieldsetRecursionStack::class))->push($config['import']);
 
diff --git a/src/Forms/Fieldtypes/Fallback.php b/src/Forms/Fieldtypes/Fallback.php
index 0870b37e9be..69c252aeebf 100644
--- a/src/Forms/Fieldtypes/Fallback.php
+++ b/src/Forms/Fieldtypes/Fallback.php
@@ -38,6 +38,19 @@ 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 toArray(): array
     {
         if (! $this->wrappedFieldtype) {
diff --git a/src/Http/Controllers/CP/Forms/FormLogicController.php b/src/Http/Controllers/CP/Forms/FormLogicController.php
index 265bee7dbdc..43c5e6ac5a6 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,38 +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->getImportedFields($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',
-                        'hidden' => $field['hidden'] ?? false,
-                        '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;
                 }
             }
         }
@@ -103,6 +113,54 @@ 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,
+            'hidden' => $fieldConfig['hidden'] ?? false,
+            '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 c37272de214..65782e21772 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..1b04319f266 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_icon_from_the_wrapped_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());
+    }
 }