diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css
index 138c208027..c44d8361d6 100644
--- a/resources/css/core/layout.css
+++ b/resources/css/core/layout.css
@@ -1,17 +1,11 @@
-:root {
-    --nav-width: 11.5rem;
-    --sidebar-end-width: 11.5rem;
-}
-
-/* GROUP LEFT SIDEBAR
+/* GROUP THE MAIN NAV (LEFT SIDEBAR)
 =================================================== */
-/* This class controls the layout rather than aesthetics, which is left to classes like .cp-sidebar-nav-main */
-.cp-sidebar-start {
-    @apply flex flex-col gap-6 py-6 px-2 sm:px-3 sm:pe-1 text-sm antialiased select-none;
+.nav-main {
+    @apply flex flex-col gap-6 py-6 px-2 sm:px-3 text-sm antialiased select-none;
     /* Same as the main element, accounting for the header with a class of h-14, which is the same as 3.5rem */
     @apply h-[calc(100vh-3.5rem)];
-    @apply overflow-y-auto fixed top-14 start-0;
-    width: var(--nav-width);
+    @apply overflow-y-auto fixed top-14 start-0 w-48;
+    @apply [&_svg]:text-gray-500 dark:[&_svg]:text-gray-500/85;
     /* Wait for the full page to load before allowing this transition otherwise you see the Sidebar animate in/out on load in Firefox (and sometimes Safari) */
     .page-fully-loaded & {
         /* Only certain properties because we don't want to inadvertently transition the color when we switch between light/dark mode */
@@ -20,19 +14,6 @@
     /* On mobile, hide by default and overlay on top */
     z-index: var(--z-index-draggable);
     @apply lg:flex;
-}
-
-/* Optional width variants for view-specific sidebar sizing. */
-.cp-sidebar-start--large {
-    --nav-width: 30rem;
-}
-
-/* GROUP LEFT SIDEBAR / MAIN NAV
-=================================================== */
-.cp-sidebar-nav-main {
-    @apply flex flex-col gap-6;
-
-    @apply [&_svg]:text-gray-500 dark:[&_svg]:text-gray-500/85;
 
     ul {
         @apply flex flex-col gap-0;
@@ -63,9 +44,9 @@
     }
 }
 
-/* GROUP LEFT SIDEBAR / ACTIVE STATES
+/* GROUP THE MAIN NAV (LEFT SIDEBAR) / ACTIVE STATES
 =================================================== */
-.cp-sidebar-start {
+.nav-main {
     @supports not (anchor-name: --my-anchor) {
         ul li ul li {
             a.active {
@@ -128,27 +109,26 @@
     }
 }
 
-/* GROUP LEFT SIDEBAR / MOBILE BEHAVIOR
-=================================================== */
+
+
+
+/* Mobile nav behavior */
 @media (width < theme(--breakpoint-lg)) {
-    .cp-sidebar-start {
-        /* Always visible but off-screen by default */
-        @apply flex;
-        @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
-    }
+.nav-main {
+    /* Always visible but off-screen by default */
+    @apply flex;
+    @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
+}
 
-    .nav-open .cp-sidebar-start {
-        /* Slide in from the left */
-        @apply start-0 shadow-2xl;
-    }
+.nav-open .nav-main {
+    /* Slide in from the left */
+    @apply start-0 shadow-2xl;
+}
 }
 
 
 main {
-    padding-inline-start: 0;
-    @media (width >= theme(--breakpoint-lg)) {
-        padding-inline-start: var(--nav-width);
-    }
+    @apply ps-0 lg:ps-46;
     /* Wait for the full page to load before allowing this transition otherwise you see the Sidebar animate in/out on load in Firefox (and sometimes Safari) */
     .page-fully-loaded & {
         /* Only padding because we don't wand to transition the color when we switch between light/dark mode */
@@ -156,26 +136,7 @@ main {
     }
 }
 
-.cp-sidebar-end-is-open {
-    padding-inline-end: var(--sidebar-end-width);
-}
-
-.cp-sidebar-end {
-    display: block;
-    position: fixed;
-    top: 3.5rem;
-    inset-inline-end: 0;
-    bottom: 0;
-    width: var(--sidebar-end-width);
-    border-inline-start: 1px solid var(--theme-color-body-border);
-    background: var(--theme-color-body-bg);
-}
-
-.cp-sidebar-end-content {
-    @apply h-full overflow-y-auto p-2;
-}
-
-.nav-closed .cp-sidebar-start {
+.nav-closed .nav-main {
     /* Start off-screen to the left */
     @apply -start-50;
 }
@@ -185,52 +146,6 @@ main.nav-closed {
     @apply lg:ps-0;
 }
 
-/* GROUP RESIZABLE NAVS / RESIZE HANDLE
-=================================================== */
-.content-card-resize-handle {
-    --resize-width: 10px;
-
-    position: absolute;
-    z-index: var(--z-index-above);
-    top: 0;
-    inset-inline-start: calc(0% - var(--resize-width) / 2);
-    width: var(--resize-width);
-    height: 100%;
-    cursor: col-resize;
-    @apply hidden lg:block;
-}
-
-.cp-sidebar-end-resize-handle {
-    --resize-width: 10px;
-
-    position: absolute;
-    z-index: var(--z-index-above);
-    top: 0;
-    inset-inline-end: calc(0% - var(--resize-width) / 2);
-    width: var(--resize-width);
-    height: 100%;
-    cursor: col-resize;
-    @apply hidden lg:block;
-}
-
-.nav-resizing {
-    cursor: col-resize;
-    /* Prevents any text selection while dragging (otherwise you could end up selecting menu text while dragging the resize handle). */
-    user-select: none;
-
-    & * {
-        /* Ensures that if you move the pointer over a child element inside the nav (icons, links, spans), the cursor doesn't revert back to the default pointer/hand. */
-        cursor: col-resize;
-    }
-
-    & main,
-    & .cp-sidebar-start,
-    & .cp-sidebar-end {
-        /* Disables transitions while dragging, specifically to prevent jank/animated layout changes from the existing sidebar + main transitions in layout.css (the sidebar open/close transition and the main padding transition). */
-        transition: none;
-    }
-}
-
 /* ==========================================================================
    DRAGGABLE MIRRORS
    ========================================================================== */
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index f4df60aa02..4062ac8e91 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -361,7 +361,7 @@
         z-index: var(--z-index-below);
         opacity: 0.7;
         /* Effectively remove the right border */
-        width: calc(100% - 7px);
+        width: calc(100% - 6px);
         height: calc(100% - var(--graph-paper-y-offset));
 
         /* https://css-pattern.com/graph-paper/ */
diff --git a/resources/js/components/nav/Nav.vue b/resources/js/components/nav/Nav.vue
index 36fb6c1d0d..fce82a2fbd 100644
--- a/resources/js/components/nav/Nav.vue
+++ b/resources/js/components/nav/Nav.vue
@@ -1,13 +1,11 @@
 <script setup>
 import { Link, usePage, router } from '@inertiajs/vue3';
-import { Badge, Button, Icon } from '@ui';
+import { Badge, Icon } from '@ui';
 import useNavigation from './navigation.js';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
 
 const { nav, setParentActive, setChildActive } = useNavigation();
-// temp
-const page = usePage();
 const localStorageKey = 'statamic.nav';
 const isOpen = ref(localStorage.getItem(localStorageKey) !== 'closed');
 const navRef = ref(null);
@@ -16,13 +14,6 @@ const collapsedByViewport = ref(false);
 let clickListenerActive = false;
 let navigateEventListener = null;
 
-// temp
-const showPrototypeNavBlock = computed(() => {
-    const path = (page.url || '').split('?')[0];
-
-    return path.endsWith('/fields');
-});
-
 onMounted(() => {
     // Check if screen is less than lg breakpoint (1024px)
     const mediaQuery = window.matchMedia('(width < 1024px)');
@@ -47,15 +38,15 @@ onMounted(() => {
             collapsedByViewport.value = false;
         }
     };
-    
+
     mediaQuery.addEventListener('change', handleMediaChange);
-    
+
     nextTick(() => {
         watch(isOpen, (isOpen) => {
             const el = document.getElementById('main');
             el.classList.toggle('nav-closed', !isOpen);
             el.classList.toggle('nav-open', isOpen);
-            
+
             // Delay enabling the click-outside listener to avoid catching the toggle click
             if (isOpen) {
                 setTimeout(() => {
@@ -78,7 +69,7 @@ onMounted(() => {
 
     // Close nav when clicking outside (only on mobile)
     document.addEventListener('click', handleClickOutside);
-    
+
     // Close nav on mobile when navigating to a different page
     navigateEventListener = router.on('navigate', () => {
         if (isMobile.value && isOpen.value) {
@@ -86,7 +77,7 @@ onMounted(() => {
             localStorage.setItem(localStorageKey, 'closed');
         }
     });
-    
+
     onUnmounted(() => {
         document.removeEventListener('click', handleClickOutside);
         mediaQuery.removeEventListener('change', handleMediaChange);
@@ -114,7 +105,7 @@ function toggle() {
 }
 
 function handleParentClick(event, item) {
-	if (event.defaultPrevented) return;
+    if (event.defaultPrevented) return;
 
     // Prevent opening in a new tab from updating the active state.
     if (event.ctrlKey || event.metaKey || event.which === 2) return;
@@ -129,7 +120,7 @@ function handleParentClick(event, item) {
 }
 
 function handleChildClick(event, item, child) {
-	if (event.defaultPrevented) return;
+    if (event.defaultPrevented) return;
 
     // Prevent opening in a new tab from updating the active state.
     if (event.ctrlKey || event.metaKey || event.which === 2) return;
@@ -160,192 +151,55 @@ Statamic.$keys.bind(['command+\\', ['[']], (e) => {
 });
 
 Statamic.$events.$on('nav.toggle', toggle);
+
+Statamic.$events.$on('nav.open', () => {
+    if (isOpen.value) return;
+    toggle();
+});
+
+Statamic.$events.$on('nav.close', () => {
+    if (!isOpen.value) return;
+    toggle();
+});
 </script>
 
 <template>
-    <div class="cp-sidebar-start" :class="sidebarStartSizeClass">
-        <nav v-if="showPrototypeNavBlock" style="--graph-paper-y-offset: 1.75rem;" class="bg-graph-paper [&_button]:w-full [&_button>div]:truncate [&_button>div]:block [&_button]:rounded-xl [&_button]:font-normal [&_button]:justify-start [&_button]:h-9 [&_button_svg]:size-3.5">
-            <ul class="px-0.5 grid gap-8 @container">
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Information</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Heading')" icon="heading" />
-                        </li>
-                        <li>
-                            <Button :text="__('Paragraph')" icon="text-short" />
-                        </li>
-                        <li>
-                            <Button :text="__('Banner')" icon="banner" />
-                        </li>
-                        <li>
-                            <Button :text="__('Legal')" icon="legal" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Text</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Short Answer')" icon="text-short" />
-                        </li>
-                        <li>
-                            <Button :text="__('Long Answer')" icon="text-long" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Choice</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Dropdown')" icon="fieldtype-select" />
-                        </li>
-                        <li>
-                            <Button :text="__('Yes/No')" icon="like" />
-                        </li>
-                        <li>
-                            <Button :text="__('Multi Choice')" icon="fieldtype-radio" />
-                        </li>
-                        <li>
-                            <Button :text="__('Checkboxes')" icon="fieldtype-checkboxes" />
-                        </li>
-                        <li>
-                            <Button :text="__('Toggle')" icon="fieldtype-toggle" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Rate</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Star Rating')" icon="star" />
-                        </li>
-                        <li>
-                            <Button :text="__('Ranking')" icon="rank" />
-                        </li>
-                        <li>
-                            <Button :text="__('Opinion Scale')" icon="scale-up" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Contact Info</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Name')" icon="user-avatar-flush" />
-                        </li>
-                        <li>
-                            <Button :text="__('Email')" icon="mail-sign-at" />
-                        </li>
-                        <li>
-                            <Button :text="__('Website')" icon="website" />
-                        </li>
-                        <li>
-                            <Button :text="__('Phone')" icon="mail-sign-hashtag" />
-                        </li>
-                        <li>
-                            <Button :text="__('Address')" icon="location-pin" />
-                        </li>
-                        <li>
-                            <Button :text="__('Signature')" icon="edit-pen-draw-scribble" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Number</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Number')" icon="number" />
-                        </li>
-                        <li>
-                            <Button :text="__('Currency')" icon="currency" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Date and Time</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Date Picker')" icon="calendar" />
-                        </li>
-                        <li>
-                            <Button :text="__('Time Picker')" icon="time-clock" />
-                        </li>
-                        <li>
-                            <Button :text="__('Range')" icon="calendar-range" />
-                        </li>
-                        <li>
-                            <Button :text="__('SavvyCal')" icon="calendar" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Media</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Image Choice')" icon="image-select" />
-                        </li>
-                        <li>
-                            <Button :text="__('Video')" icon="fieldtype-video" />
-                        </li>
-                        <li>
-                            <Button :text="__('Audio')" icon="media-music-sound-equalizer" />
-                        </li>
-                        <li>
-                            <Button :text="__('Upload')" icon="upload-arrow-up" />
-                        </li>
-                    </ul>
-                </li>
-                <li>
-                    <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Payment</h2>
-                    <ul class="grid gap-2 @min-[250px]:grid-cols-2">
-                        <li>
-                            <Button :text="__('Stripe')" icon="credit-card" />
-                        </li>
-                        <li>
-                            <Button :text="__('PayPal')" icon="credit-card" />
-                        </li>
-                    </ul>
+    <nav ref="navRef" class="nav-main">
+        <div v-for="(section, i) in nav" :key="i">
+            <div
+                class="section-title"
+                v-if="section.display !== 'Top Level'"
+                v-text="__(section.display)"
+            />
+            <ul>
+                <li v-for="(item, i) in section.items" :key="i">
+                    <DynamicHtmlRenderer v-if="item.view" :html="item.view" />
+                    <template v-else>
+                        <component
+                            :is="shouldRenderAsInertiaLink(item) ? Link : 'a'"
+                            :href="item.url"
+                            v-bind="item.attributes"
+                            :class="{ 'active': item.active }"
+                            @click="handleParentClick($event, item)"
+                        >
+                            <Icon :name="item.icon ?? 'fieldtype-spacer'" />
+                            <span v-text="__(item.display)" />
+                        </component>
+                        <ul v-if="item.children.length && item.active">
+                            <li v-for="(child, i) in item.children" :key="i">
+                                <component
+                                    :is="shouldRenderAsInertiaLink(child) ? Link : 'a'"
+                                    :href="child.url"
+                                    v-bind="child.attributes"
+                                    v-text="__(child.display)"
+                                    :class="{ 'active': child.active }"
+                                    @click="handleChildClick($event, item, child)"
+                                />
+                            </li>
+                        </ul>
+                    </template>
                 </li>
             </ul>
-        </nav>
-        <nav v-else ref="navRef" class="cp-sidebar-nav-main">
-            <div v-for="(section, i) in nav" :key="i">
-                <div
-                    class="section-title"
-                    v-if="section.display !== 'Top Level'"
-                    v-text="__(section.display)"
-                />
-                <ul>
-                    <li v-for="(item, i) in section.items" :key="i">
-                        <DynamicHtmlRenderer v-if="item.view" :html="item.view" />
-                        <template v-else>
-                            <component
-                                :is="shouldRenderAsInertiaLink(item) ? Link : 'a'"
-                                :href="item.url"
-                                v-bind="item.attributes"
-                                :class="{ 'active': item.active }"
-                                @click="handleParentClick($event, item)"
-                            >
-                                <Icon :name="item.icon ?? 'fieldtype-spacer'" />
-                                <span v-text="__(item.display)" />
-                            </component>
-                            <ul v-if="item.children.length && item.active">
-                                <li v-for="(child, i) in item.children" :key="i">
-                                    <component
-                                        :is="shouldRenderAsInertiaLink(child) ? Link : 'a'"
-                                        :href="child.url"
-                                        v-bind="child.attributes"
-                                        v-text="__(child.display)"
-                                        :class="{ 'active': child.active }"
-                                        @click="handleChildClick($event, item, child)"
-                                    />
-                                </li>
-                            </ul>
-                        </template>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-    </div>
+        </div>
+    </nav>
 </template>
diff --git a/resources/js/composables/use-resizable.js b/resources/js/composables/use-resizable.js
new file mode 100644
index 0000000000..30a87baa2b
--- /dev/null
+++ b/resources/js/composables/use-resizable.js
@@ -0,0 +1,104 @@
+import { watch, nextTick, onUnmounted } from 'vue';
+
+export default function useResizable() {
+    const cleanupFns = [];
+
+    function makeResizable(panelRef, activeRef, { edge = 'right', minWidth = 200, maxWidth = 800, defaultWidth = null } = {}) {
+        let cleanup = null;
+
+        watch(activeRef, (active) => {
+            if (active) {
+                nextTick(() => {
+                    const panel = panelRef.value;
+                    if (!panel) return;
+
+                    const isRtl = document.documentElement.dir === 'rtl';
+                    const resolvedEdge = isRtl ? (edge === 'right' ? 'left' : 'right') : edge;
+
+                    if (defaultWidth) {
+                        panel.style.width = `${defaultWidth}px`;
+                    }
+
+                    const handle = document.createElement('div');
+                    handle.style.position = 'absolute';
+                    handle.style.top = '0';
+                    handle.style.bottom = '0';
+                    handle.style.width = '7px';
+                    handle.style.cursor = 'col-resize';
+                    handle.style.zIndex = '10';
+                    handle.style[resolvedEdge] = '-2px';
+
+                    panel.style.position = 'relative';
+                    panel.appendChild(handle);
+
+                    const resetToDefaultWidth = () => {
+                        if (defaultWidth) {
+                            const width = Math.min(maxWidth, Math.max(minWidth, defaultWidth));
+                            panel.style.width = `${width}px`;
+                            return;
+                        }
+
+                        panel.style.width = '';
+                    };
+
+                    const onPointerDown = (e) => {
+                        if (e.detail === 2) {
+                            resetToDefaultWidth();
+                            return;
+                        }
+
+                        e.preventDefault();
+                        const startX = e.clientX;
+                        const startWidth = panel.offsetWidth;
+
+                        document.body.style.cursor = 'col-resize';
+                        document.body.style.userSelect = 'none';
+
+                        const onMove = (e) => {
+                            const diff = resolvedEdge === 'right' ? e.clientX - startX : startX - e.clientX;
+                            const newWidth = Math.min(maxWidth, Math.max(minWidth, startWidth + diff));
+                            panel.style.width = `${newWidth}px`;
+                        };
+
+                        const onUp = () => {
+                            document.body.style.cursor = '';
+                            document.body.style.userSelect = '';
+                            document.removeEventListener('pointermove', onMove);
+                            document.removeEventListener('pointerup', onUp);
+                        };
+
+                        document.addEventListener('pointermove', onMove);
+                        document.addEventListener('pointerup', onUp);
+                    };
+
+                    const onDoubleClick = () => {
+                        resetToDefaultWidth();
+                    };
+
+                    handle.addEventListener('pointerdown', onPointerDown);
+                    handle.addEventListener('dblclick', onDoubleClick);
+
+                    cleanup = () => {
+                        handle.removeEventListener('pointerdown', onPointerDown);
+                        handle.removeEventListener('dblclick', onDoubleClick);
+                        handle.remove();
+                    };
+                });
+            } else {
+                cleanup?.();
+                cleanup = null;
+            }
+        });
+
+        cleanupFns.push(() => {
+            cleanup?.();
+            cleanup = null;
+        });
+    }
+
+    onUnmounted(() => {
+        cleanupFns.forEach((fn) => fn());
+    });
+
+    return { makeResizable };
+}
diff --git a/resources/js/pages/forms/Fields.vue b/resources/js/pages/forms/Fields.vue
index a99bdc8989..04aeff370b 100644
--- a/resources/js/pages/forms/Fields.vue
+++ b/resources/js/pages/forms/Fields.vue
@@ -1,6 +1,7 @@
 <script setup>
 import FormLayout from './Layout.vue';
 import { Button } from '@ui';
+import LayoutPanel from '@/pages/layout/LayoutPanel.vue';
 
 const props = defineProps({
     form: Object,
@@ -13,8 +14,160 @@ const props = defineProps({
             <Button class="ms-2" :text="__('Save')" variant="primary" />
         </template>
 
+        <LayoutPanel side="left">
+            <div style="--graph-paper-y-offset: 4.5rem;" class="bg-graph-paper [&_button]:w-full [&_button>div]:truncate [&_button>div]:block [&_button]:rounded-xl [&_button]:font-normal [&_button]:justify-start [&_button]:h-9 [&_button_svg]:size-3.5">
+                <ul class="px-0.5 grid gap-8 @container py-10">
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Information</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Heading')" icon="heading" />
+                            </li>
+                            <li>
+                                <Button :text="__('Paragraph')" icon="text-short" />
+                            </li>
+                            <li>
+                                <Button :text="__('Banner')" icon="banner" />
+                            </li>
+                            <li>
+                                <Button :text="__('Legal')" icon="legal" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Text</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Short Answer')" icon="text-short" />
+                            </li>
+                            <li>
+                                <Button :text="__('Long Answer')" icon="text-long" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Choice</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Dropdown')" icon="fieldtype-select" />
+                            </li>
+                            <li>
+                                <Button :text="__('Yes/No')" icon="like" />
+                            </li>
+                            <li>
+                                <Button :text="__('Multi Choice')" icon="fieldtype-radio" />
+                            </li>
+                            <li>
+                                <Button :text="__('Checkboxes')" icon="fieldtype-checkboxes" />
+                            </li>
+                            <li>
+                                <Button :text="__('Toggle')" icon="fieldtype-toggle" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Rate</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Star Rating')" icon="star" />
+                            </li>
+                            <li>
+                                <Button :text="__('Ranking')" icon="rank" />
+                            </li>
+                            <li>
+                                <Button :text="__('Opinion Scale')" icon="scale-up" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Contact Info</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Name')" icon="user-avatar-flush" />
+                            </li>
+                            <li>
+                                <Button :text="__('Email')" icon="mail-sign-at" />
+                            </li>
+                            <li>
+                                <Button :text="__('Website')" icon="website" />
+                            </li>
+                            <li>
+                                <Button :text="__('Phone')" icon="mail-sign-hashtag" />
+                            </li>
+                            <li>
+                                <Button :text="__('Address')" icon="location-pin" />
+                            </li>
+                            <li>
+                                <Button :text="__('Signature')" icon="edit-pen-draw-scribble" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Number</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Number')" icon="number" />
+                            </li>
+                            <li>
+                                <Button :text="__('Currency')" icon="currency" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Date and Time</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Date Picker')" icon="calendar" />
+                            </li>
+                            <li>
+                                <Button :text="__('Time Picker')" icon="time-clock" />
+                            </li>
+                            <li>
+                                <Button :text="__('Range')" icon="calendar-range" />
+                            </li>
+                            <li>
+                                <Button :text="__('SavvyCal')" icon="calendar" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Media</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Image Choice')" icon="image-select" />
+                            </li>
+                            <li>
+                                <Button :text="__('Video')" icon="fieldtype-video" />
+                            </li>
+                            <li>
+                                <Button :text="__('Audio')" icon="media-music-sound-equalizer" />
+                            </li>
+                            <li>
+                                <Button :text="__('Upload')" icon="upload-arrow-up" />
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <h2 class="px-1.5 pb-1.5 text-sm text-gray-950 font-medium">Payment</h2>
+                        <ul class="grid gap-2 @min-[250px]:grid-cols-2">
+                            <li>
+                                <Button :text="__('Stripe')" icon="credit-card" />
+                            </li>
+                            <li>
+                                <Button :text="__('PayPal')" icon="credit-card" />
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </LayoutPanel>
+
         <div class="py-4">
             <p>TODO: Form Builder</p>
         </div>
+
+        <LayoutPanel side="right">
+            <p>Settings</p>
+        </LayoutPanel>
     </FormLayout>
 </template>
diff --git a/resources/js/pages/layout/Layout.vue b/resources/js/pages/layout/Layout.vue
index 9b17796b59..686906b2bc 100644
--- a/resources/js/pages/layout/Layout.vue
+++ b/resources/js/pages/layout/Layout.vue
@@ -6,11 +6,11 @@ import SessionExpiry from '@/components/SessionExpiry.vue';
 import LicensingAlert from '@/components/LicensingAlert.vue';
 import PortalTargets from '@/components/portals/PortalTargets.vue';
 import Tooltips from '@/components/Tooltips.vue';
-import { provide, watch, ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
-import { Link, router, usePage } from '@inertiajs/vue3';
+import { provide, watch, ref, onMounted, onUnmounted, nextTick, useTemplateRef } from 'vue';
+import { router } from '@inertiajs/vue3';
 import useBodyClasses from './body-classes.js';
-import useStatamicPageProps from '@/composables/page-props.js';
 import useMaxWidthToggle from '@/composables/use-max-width-toggle.js';
+import useResizable from '@/composables/use-resizable.js';
 
 useBodyClasses('bg-global-header-bg font-sans leading-normal text-gray-900 dark:text-white');
 
@@ -18,11 +18,6 @@ const props = defineProps({
     additionalBreadcrumbs: { type: Array, default: () => [] },
 });
 
-const page = usePage();
-const isFormsRoute = computed(() => (page.url || '').startsWith('/cp/forms'));
-const enableCpSidebarEnd = computed(() => Boolean(page.props.enableCpSidebarEnd ?? page.props.enableRightSidebar) || isFormsRoute.value);
-const cpSidebarEnd = computed(() => page.props.cpSidebarEnd ?? page.props.rightSidebar ?? null);
-
 const additionalBreadcrumbs = ref(props.additionalBreadcrumbs);
 watch(() => props.additionalBreadcrumbs, (newVal) => additionalBreadcrumbs.value = newVal);
 
@@ -37,173 +32,6 @@ provide('layout', {
 // Focus management: focus main element if no input has auto-focus
 let navigationListener = null;
 
-// Resizable sidebar (handle lives on the left edge of the content card)
-const navWidthStorageKey = 'statamic.nav.width';
-const cpSidebarEndWidthStorageKey = 'statamic.cp-sidebar-end.width';
-const legacyRightSidebarWidthStorageKey = 'statamic.right-sidebar.width';
-const MIN_NAV_WIDTH = 150;
-const MAX_NAV_WIDTH = 400;
-const mainContentRef = ref(null);
-const contentCardRef = ref(null);
-const cpSidebarEndRef = ref(null);
-
-let isResizing = false;
-let currentWidthPx = null;
-let contentInsetPx = 0;
-let pointerMoveListener = null;
-let pointerUpListener = null;
-
-function clampNavWidthPx(widthPx) {
-    return Math.min(Math.max(widthPx, MIN_NAV_WIDTH), MAX_NAV_WIDTH);
-}
-
-function setNavWidthPx(widthPx) {
-    document.documentElement.style.setProperty('--nav-width', `${widthPx}px`);
-}
-
-function setCpSidebarEndWidthPx(widthPx) {
-    document.documentElement.style.setProperty('--sidebar-end-width', `${widthPx}px`);
-}
-
-function restoreSavedNavWidth() {
-    const saved = localStorage.getItem(navWidthStorageKey);
-    if (!saved) return;
-
-    const widthPx = Number(saved);
-    if (!Number.isFinite(widthPx)) return;
-
-    setNavWidthPx(clampNavWidthPx(widthPx));
-}
-
-function restoreSavedCpSidebarEndWidth() {
-    const saved = localStorage.getItem(cpSidebarEndWidthStorageKey) ?? localStorage.getItem(legacyRightSidebarWidthStorageKey);
-    if (!saved) return;
-
-    const widthPx = Number(saved);
-    if (!Number.isFinite(widthPx)) return;
-
-    const clamped = Math.min(Math.max(widthPx, MIN_NAV_WIDTH), MAX_NAV_WIDTH);
-    setCpSidebarEndWidthPx(clamped);
-}
-
-function stopResize({ persist = true } = {}) {
-    if (!isResizing) return;
-
-    isResizing = false;
-    document.documentElement.classList.remove('nav-resizing');
-
-    if (pointerMoveListener) document.removeEventListener('pointermove', pointerMoveListener);
-    if (pointerUpListener) document.removeEventListener('pointerup', pointerUpListener);
-    pointerMoveListener = null;
-    pointerUpListener = null;
-
-    if (persist && currentWidthPx !== null) {
-        localStorage.setItem(navWidthStorageKey, Math.round(currentWidthPx));
-    }
-
-    currentWidthPx = null;
-}
-
-let isCpSidebarEndResizing = false;
-let cpSidebarEndWidthPx = null;
-let cpSidebarEndPointerMoveListener = null;
-let cpSidebarEndPointerUpListener = null;
-let cpSidebarEndInsetPx = 0;
-
-function stopCpSidebarEndResize({ persist = true } = {}) {
-    if (!isCpSidebarEndResizing) return;
-
-    isCpSidebarEndResizing = false;
-    document.documentElement.classList.remove('nav-resizing');
-
-    if (cpSidebarEndPointerMoveListener) document.removeEventListener('pointermove', cpSidebarEndPointerMoveListener);
-    if (cpSidebarEndPointerUpListener) document.removeEventListener('pointerup', cpSidebarEndPointerUpListener);
-    cpSidebarEndPointerMoveListener = null;
-    cpSidebarEndPointerUpListener = null;
-
-    if (persist && cpSidebarEndWidthPx !== null) {
-        localStorage.setItem(cpSidebarEndWidthStorageKey, Math.round(cpSidebarEndWidthPx));
-    }
-
-    cpSidebarEndWidthPx = null;
-}
-
-function startResize(event) {
-    if (isResizing || !mainContentRef.value || !contentCardRef.value) return;
-
-    isResizing = true;
-    document.documentElement.classList.add('nav-resizing');
-
-    // Prevent losing the drag if the pointer leaves the handle.
-    event?.currentTarget?.setPointerCapture?.(event.pointerId);
-
-    const dir = getComputedStyle(document.documentElement).direction;
-    const isRtl = dir === 'rtl';
-
-    const mainContentRect = mainContentRef.value.getBoundingClientRect();
-    const contentCardRect = contentCardRef.value.getBoundingClientRect();
-    contentInsetPx = isRtl
-        ? (mainContentRect.right - contentCardRect.right)
-        : (contentCardRect.left - mainContentRect.left);
-
-    pointerMoveListener = (e) => {
-        const proposedWidth = isRtl
-            ? (window.innerWidth - e.clientX - contentInsetPx)
-            : (e.clientX - contentInsetPx);
-
-        currentWidthPx = clampNavWidthPx(proposedWidth);
-        setNavWidthPx(currentWidthPx);
-    };
-
-    pointerUpListener = () => stopResize({ persist: true });
-
-    document.addEventListener('pointermove', pointerMoveListener);
-    document.addEventListener('pointerup', pointerUpListener);
-}
-
-function resetNavWidth() {
-    stopResize({ persist: false });
-    localStorage.removeItem(navWidthStorageKey);
-    document.documentElement.style.removeProperty('--nav-width');
-}
-
-function startCpSidebarEndResize(event) {
-    if (!enableCpSidebarEnd.value || isCpSidebarEndResizing || !mainContentRef.value || !contentCardRef.value) return;
-
-    isCpSidebarEndResizing = true;
-    document.documentElement.classList.add('nav-resizing');
-    event?.currentTarget?.setPointerCapture?.(event.pointerId);
-
-    const dir = getComputedStyle(document.documentElement).direction;
-    const isRtl = dir === 'rtl';
-
-    const mainContentRect = mainContentRef.value.getBoundingClientRect();
-    const contentCardRect = contentCardRef.value.getBoundingClientRect();
-    cpSidebarEndInsetPx = isRtl
-        ? (contentCardRect.left - mainContentRect.left)
-        : (mainContentRect.right - contentCardRect.right);
-
-    cpSidebarEndPointerMoveListener = (e) => {
-        const proposedWidth = isRtl
-            ? (e.clientX - cpSidebarEndInsetPx)
-            : (window.innerWidth - e.clientX - cpSidebarEndInsetPx);
-        cpSidebarEndWidthPx = Math.min(Math.max(proposedWidth, MIN_NAV_WIDTH), MAX_NAV_WIDTH);
-        setCpSidebarEndWidthPx(cpSidebarEndWidthPx);
-    };
-
-    cpSidebarEndPointerUpListener = () => stopCpSidebarEndResize({ persist: true });
-
-    document.addEventListener('pointermove', cpSidebarEndPointerMoveListener);
-    document.addEventListener('pointerup', cpSidebarEndPointerUpListener);
-}
-
-function resetCpSidebarEndWidth() {
-    stopCpSidebarEndResize({ persist: false });
-    localStorage.removeItem(cpSidebarEndWidthStorageKey);
-    localStorage.removeItem(legacyRightSidebarWidthStorageKey);
-    document.documentElement.style.removeProperty('--sidebar-end-width');
-}
-
 function focusMain() {
     // Wait for components to mount and autofocus to process
     nextTick(() => {
@@ -216,7 +44,7 @@ function focusMain() {
 
                 // Find any input with autofocus attribute (including nested in UI components)
                 const autofocusInput = document.querySelector('input[autofocus], textarea[autofocus], select[autofocus]') ||
-                                      document.querySelector('[data-ui-input] input[autofocus]');
+                    document.querySelector('[data-ui-input] input[autofocus]');
 
                 // If autofocus input exists but isn't focused, focus it manually
                 if (autofocusInput && document.activeElement !== autofocusInput) {
@@ -233,10 +61,22 @@ function focusMain() {
     });
 }
 
+const leftPanelRef = useTemplateRef('leftPanel');
+const rightPanelRef = useTemplateRef('rightPanel');
+
+const leftPanelActive = ref(false);
+const rightPanelActive = ref(false);
+
+provide('leftPanelActive', leftPanelActive);
+provide('rightPanelActive', rightPanelActive);
+
+const { makeResizable } = useResizable();
+
+makeResizable(leftPanelRef, leftPanelActive, { edge: 'right', minWidth: 240, maxWidth: 450, defaultWidth: 325 });
+makeResizable(rightPanelRef, rightPanelActive, { edge: 'left', minWidth: 240, maxWidth: 450, defaultWidth: 325 });
+
 onMounted(() => {
     navigationListener = router.on('success', focusMain);
-    restoreSavedNavWidth();
-    restoreSavedCpSidebarEndWidth();
     focusMain();
 });
 
@@ -244,10 +84,9 @@ onUnmounted(() => {
     if (navigationListener) {
         navigationListener();
     }
-
-    stopResize({ persist: false });
-    stopCpSidebarEndResize({ persist: false });
 });
+
+// TODO: Make the nav an overlay
 </script>
 
 <template>
@@ -256,57 +95,30 @@ onUnmounted(() => {
         <LicensingAlert />
         <Header />
 
-        <main id="main" class="flex bg-body-bg dark:border-t dark:border-body-border rounded-t-2xl fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]" :class="{ 'cp-sidebar-end-is-open': enableCpSidebarEnd }">
+        <main id="main" class="flex bg-body-bg dark:border-t dark:border-body-border rounded-t-2xl fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
             <Nav />
             <!-- The data attribute allows CSS to target elements when max-width is disabled. -->
-            <div ref="mainContentRef" id="main-content" class="main-content sm:p-2 h-full flex-1 overflow-y-auto focus:outline-none rounded-t-2xl" :data-max-width-enabled="isMaxWidthEnabled">
-                <div ref="contentCardRef" id="content-card" tabindex="-1" class="focus:outline-none relative content-card grid min-h-full mx-auto">
-                    <div
-                        class="content-card-resize-handle"
-                        @pointerdown.prevent="startResize"
-                        @dblclick="resetNavWidth"
-                    />
-                    <div
-                        v-if="enableCpSidebarEnd"
-                        class="cp-sidebar-end-resize-handle"
-                        @pointerdown.prevent="startCpSidebarEndResize"
-                        @dblclick="resetCpSidebarEndWidth"
-                    />
+            <div
+                id="main-content"
+                class="main-content sm:p-2 h-full flex-1 overflow-y-auto focus:outline-none rounded-t-2xl"
+                :class="{
+                    'flex': leftPanelActive || rightPanelActive,
+                }"
+                :data-max-width-enabled="isMaxWidthEnabled"
+            >
+                <div v-show="leftPanelActive" ref="leftPanel" id="left-panel" tabindex="-1" class="focus:outline-none relative layout-left-panel overflow-scroll overflow-x-clip grid pe-2 min-h-full mx-auto">
+                    <!-- Panel contents will be injected via <Teleport> -->
+                </div>
+                <div id="content-card" tabindex="-1" class="focus:outline-none relative content-card grid min-h-full mx-auto" :class="{ 'flex-1': leftPanelActive || rightPanelActive }">
                     <!-- Data attribute used by the CSS style tag below to override max-width when disabled.-->
                     <div class="w-full min-w-0 mx-auto max-w-page" data-max-width-wrapper>
                         <slot />
                     </div>
                 </div>
-            </div>
-            <aside v-if="enableCpSidebarEnd" ref="cpSidebarEndRef" class="cp-sidebar-end">
-                <div id="right-sidebar-content" class="cp-sidebar-end-content">
-                    <div
-                        v-if="cpSidebarEnd"
-                        class="rounded-lg border border-gray-300/80 dark:border-gray-700 bg-white dark:bg-gray-925 p-3"
-                    >
-                        <h2
-                            class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2"
-                            v-text="cpSidebarEnd.title"
-                        />
-                        <ul class="flex flex-col gap-1.5">
-                            <li v-for="(item, i) in cpSidebarEnd.links ?? []" :key="i">
-                                <Link
-                                    v-if="item.url"
-                                    :href="item.url"
-                                    class="flex items-center gap-2 rounded-md px-2 py-1 text-sm text-gray-700 hover:bg-gray-400/15 dark:text-gray-300"
-                                >
-                                    <span v-text="item.text" />
-                                </Link>
-                                <span
-                                    v-else
-                                    class="flex items-center gap-2 rounded-md px-2 py-1 text-sm text-gray-500 dark:text-gray-400"
-                                    v-text="item.text"
-                                />
-                            </li>
-                        </ul>
-                    </div>
+                <div v-show="rightPanelActive" ref="rightPanel" id="right-panel" tabindex="-1" class="focus:outline-none relative layout-right-panel grid min-h-full mx-auto">
+                    <!-- Panel contents will be injected via <Teleport> -->
                 </div>
-            </aside>
+            </div>
         </main>
 
         <Component
diff --git a/resources/js/pages/layout/LayoutPanel.vue b/resources/js/pages/layout/LayoutPanel.vue
new file mode 100644
index 0000000000..2bb02f79b4
--- /dev/null
+++ b/resources/js/pages/layout/LayoutPanel.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue';
+
+const props = defineProps({
+    side: {
+        type: String,
+        required: true,
+        validator: (value) => ['left', 'right'].includes(value),
+    },
+});
+
+const teleportTarget = props.side === 'left' ? '#left-panel' : '#right-panel';
+const panelActive = inject(props.side === 'left' ? 'leftPanelActive' : 'rightPanelActive');
+
+const navWasOriginallyOpen = ref(false);
+
+onMounted(() => {
+    panelActive.value = true;
+
+    if (props.side === 'left') {
+        navWasOriginallyOpen.value = localStorage.getItem('statamic.nav') !== 'closed';
+        Statamic.$events.$emit('nav.close');
+    }
+});
+
+onBeforeUnmount(() => {
+    panelActive.value = false;
+
+    if (props.side === 'left' && navWasOriginallyOpen.value) {
+        Statamic.$events.$emit('nav.open');
+    }
+});
+</script>
+
+<template>
+    <Teleport defer :to="teleportTarget">
+        <slot />
+    </Teleport>
+</template>
diff --git a/src/Http/Controllers/CP/Forms/FormSubmissionsController.php b/src/Http/Controllers/CP/Forms/FormSubmissionsController.php
index 41b78c21bd..9d0610a686 100644
--- a/src/Http/Controllers/CP/Forms/FormSubmissionsController.php
+++ b/src/Http/Controllers/CP/Forms/FormSubmissionsController.php
@@ -94,14 +94,6 @@ public function show($form, $submission)
             'blueprint' => $blueprint->toPublishArray(),
             'values' => $fields->values(),
             'meta' => $fields->meta(),
-            'enableCpSidebarEnd' => true,
-            'cpSidebarEnd' => [
-                'title' => __($form->title()),
-                'links' => [
-                    ['text' => __('Back to Form'), 'url' => cp_route('forms.show', $form->handle())],
-                    ['text' => __('All Forms'), 'url' => cp_route('forms.index')],
-                ],
-            ],
         ]);
     }
 }
diff --git a/src/Http/Controllers/CP/Forms/FormsController.php b/src/Http/Controllers/CP/Forms/FormsController.php
index 9547c466b5..297b1a193f 100644
--- a/src/Http/Controllers/CP/Forms/FormsController.php
+++ b/src/Http/Controllers/CP/Forms/FormsController.php
@@ -52,16 +52,6 @@ public function index(Request $request)
             'canCreate' => User::current()->can('create', FormContract::class),
             'createUrl' => cp_route('forms.create'),
             'configureEmailUrl' => cp_route('utilities.email'),
-            'enableCpSidebarEnd' => true,
-            'cpSidebarEnd' => [
-                'title' => __('Forms'),
-                'links' => collect([
-                    User::current()->can('create', FormContract::class)
-                        ? ['text' => __('Create Form'), 'url' => cp_route('forms.create')]
-                        : null,
-                    ['text' => __('Configure Email'), 'url' => cp_route('utilities.email')],
-                ])->filter()->values(),
-            ],
         ]);
     }
 
@@ -98,19 +88,6 @@ public function show($form)
                 'downloadUrl' => $exporter->downloadUrl(),
             ])->values(),
             'redirectUrl' => cp_route('forms.index'),
-            'enableCpSidebarEnd' => true,
-            'cpSidebarEnd' => [
-                'title' => __($form->title()),
-                'links' => collect([
-                    ['text' => __('All Forms'), 'url' => cp_route('forms.index')],
-                    User::current()->can('edit', $form)
-                        ? ['text' => __('Configure Form'), 'url' => $form->editUrl()]
-                        : null,
-                    User::current()->can('configure form fields', $form)
-                        ? ['text' => __('Edit Blueprint'), 'url' => cp_route('blueprints.forms.edit', $form->handle())]
-                        : null,
-                ])->filter()->values(),
-            ],
         ]);
     }
 
@@ -152,13 +129,6 @@ public function create()
 
         return Inertia::render('forms/Create', [
             'submitUrl' => cp_route('forms.store'),
-            'enableCpSidebarEnd' => true,
-            'cpSidebarEnd' => [
-                'title' => __('Forms'),
-                'links' => [
-                    ['text' => __('All Forms'), 'url' => cp_route('forms.index')],
-                ],
-            ],
         ]);
     }