diff --git a/core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/relationship-field-select.spec.ts b/core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/relationship-field-select.spec.ts
index e18cecc4ea10..9e58271d31c5 100644
--- a/core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/relationship-field-select.spec.ts
+++ b/core-web/apps/dotcms-ui-e2e/src/tests/edit-content/fields/relationship-field/relationship-field-select.spec.ts
@@ -332,28 +332,29 @@ test.describe('Create New Inline', () => {
         const relationshipField = new RelationshipField(adminPage);
         await relationshipField.clickCreateNew();
 
-        const createDialog = adminPage.locator('.p-dialog-create-content .p-dialog');
-        await expect(createDialog).toBeVisible({ timeout: 10000 });
+        // With the side-panel feature flag on, "New content" opens the editor in a slide-in
+        // panel (p-drawer, teleported to body), not the centered create dialog.
+        const sidePanel = adminPage.locator('.p-drawer');
+        await expect(sidePanel).toBeVisible({ timeout: 10000 });
 
-        const titleInput = createDialog.getByTestId('title').first();
+        const titleInput = sidePanel.getByTestId('title').first();
         await titleInput.waitFor({ state: 'visible', timeout: 10000 });
         await titleInput.fill(`Inline Author ${testSuffix}`);
 
         const responsePromise = adminPage.waitForResponse((response) =>
             response.url().includes('/api/v1/workflow/actions/')
         );
-        const saveButton = createDialog.getByRole('button', { name: /Save/ });
+        const saveButton = sidePanel.getByRole('button', { name: /Save/ });
         await saveButton.waitFor({ state: 'visible', timeout: 5000 });
         await saveButton.click();
         await responsePromise;
 
-        // Dialog stays open after save — close via X button
-        const closeButton = createDialog.locator(
-            '.p-dialog-header-close, button[aria-label="Close"]'
-        );
+        // Panel stays open after save — close via the header X. Closing fires onContentSaved,
+        // which adds the newly created content to the relationship.
+        const closeButton = sidePanel.getByTestId('side-panel-close');
         await closeButton.waitFor({ state: 'visible', timeout: 5000 });
         await closeButton.click();
-        await expect(createDialog).toBeHidden({ timeout: 10000 });
+        await expect(sidePanel).toBeHidden({ timeout: 10000 });
 
         await relationshipField.expectRowCount(1);
     });
@@ -371,34 +372,32 @@ test.describe('Create New Inline', () => {
         const relationshipField = new RelationshipField(adminPage);
         await relationshipField.clickCreateNew();
 
-        const createDialog = adminPage.locator('.p-dialog-create-content .p-dialog');
-        await expect(createDialog).toBeVisible({ timeout: 10000 });
+        const sidePanel = adminPage.locator('.p-drawer');
+        await expect(sidePanel).toBeVisible({ timeout: 10000 });
 
         await adminPage.keyboard.press('Escape');
-        await expect(createDialog).toBeHidden({ timeout: 5000 });
+        await expect(sidePanel).toBeHidden({ timeout: 5000 });
 
         const textField = adminPage.getByTestId('title');
         await expect(textField).toHaveValue(outerTitle);
         await relationshipField.expectEmpty();
     });
 
-    test('dismiss create dialog via X button @smoke', async ({ adminPage }) => {
+    test('dismiss create panel via X button @smoke', async ({ adminPage }) => {
         const formPage = new NewEditContentFormPage(adminPage);
         await formPage.goToNew(blogTypeVariable);
 
         const relationshipField = new RelationshipField(adminPage);
         await relationshipField.clickCreateNew();
 
-        const createDialog = adminPage.locator('.p-dialog-create-content .p-dialog');
-        await expect(createDialog).toBeVisible({ timeout: 10000 });
+        const sidePanel = adminPage.locator('.p-drawer');
+        await expect(sidePanel).toBeVisible({ timeout: 10000 });
 
-        const closeButton = createDialog.locator(
-            '.p-dialog-header-close, button[aria-label="Close"]'
-        );
+        const closeButton = sidePanel.getByTestId('side-panel-close');
         await expect(closeButton).toBeVisible({ timeout: 5000 });
         await closeButton.click();
 
-        await expect(createDialog).toBeHidden({ timeout: 5000 });
+        await expect(sidePanel).toBeHidden({ timeout: 5000 });
         await relationshipField.expectEmpty();
     });
 });
diff --git a/core-web/libs/dotcms-models/src/lib/shared-models.ts b/core-web/libs/dotcms-models/src/lib/shared-models.ts
index 2da10347ece1..c20e2416fa58 100644
--- a/core-web/libs/dotcms-models/src/lib/shared-models.ts
+++ b/core-web/libs/dotcms-models/src/lib/shared-models.ts
@@ -36,7 +36,8 @@ export const enum FeaturedFlags {
     FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION = 'FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION',
     FEATURE_FLAG_NEW_BLOCK_EDITOR = 'FEATURE_FLAG_NEW_BLOCK_EDITOR',
     FEATURE_FLAG_REPORT_ISSUE_ENABLED = 'FEATURE_FLAG_REPORT_ISSUE_ENABLED',
-    FEATURE_FLAG_LOCALE_SELECTOR_V2 = 'FEATURE_FLAG_LOCALE_SELECTOR_V2'
+    FEATURE_FLAG_LOCALE_SELECTOR_V2 = 'FEATURE_FLAG_LOCALE_SELECTOR_V2',
+    FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL = 'FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL'
 }
 
 export const enum DotConfigurationVariables {
diff --git a/core-web/libs/edit-content/src/index.ts b/core-web/libs/edit-content/src/index.ts
index 6a55298fc4e8..1c4b79194f74 100644
--- a/core-web/libs/edit-content/src/index.ts
+++ b/core-web/libs/edit-content/src/index.ts
@@ -5,6 +5,8 @@ export * from './lib/fields/dot-edit-content-file-field/components/dot-file-fiel
 export * from './lib/fields/dot-edit-content-tag-field/components/tag-field/tag-field.component';
 export * from './lib/models/dot-edit-content-dialog.interface';
 export * from './lib/services/dot-edit-content.service';
+export * from './lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component';
+export { DotSidePanelNavController } from './lib/services/dot-side-panel-nav.service';
 export * from './lib/utils/functions.util';
 export * from './lib/models/dot-edit-content-field.constant';
 
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.spec.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.spec.ts
index 78b5340f1d7c..267c09c4471c 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.spec.ts
@@ -1233,6 +1233,68 @@ describe('DotFormComponent', () => {
 
                 flush();
             }));
+
+            it('treats a native `drop` as a genuine interaction, even as the very first one (drag-and-drop from the OS has no preceding pointerdown)', fakeAsync(() => {
+                store.initializeExistingContent({
+                    inode: MOCK_CONTENTLET_1_OR_2_TABS.inode,
+                    depth: DotContentletDepths.ONE
+                });
+
+                spectator.detectChanges();
+                tick(PRISTINE_RESET_DEBOUNCE_MS);
+                spectator.detectChanges();
+
+                expect(component.form.pristine).toBe(true);
+
+                // Dragging a file in from the OS file manager: the drag starts outside the window,
+                // so no `pointerdown` precedes it inside the host — only this native `drop` event
+                // (dispatched on the host, where the capture-phase listener lives) does.
+                spectator.element.dispatchEvent(new Event('drop', { bubbles: true }));
+
+                // Simulate the file field's CVA writing the dropped file's value — same as any
+                // CVA-driven onChange, Angular's forms wiring marks the control dirty and emits
+                // valueChanges, which `initializeFormListener` reacts to.
+                component.form.markAsDirty();
+                component.form.updateValueAndValidity();
+                spectator.detectChanges();
+
+                // #userTouched (latched by the drop) must stop the listener from resetting to
+                // pristine, the way it would for untouched async-CVA populate noise.
+                expect(component.form.dirty).toBe(true);
+
+                flush();
+            }));
+
+            it('does not wipe a real edit made within the isStable/500ms fallback window (#scheduleMarkPristineAfterInit is gated on #userTouched too)', fakeAsync(() => {
+                store.initializeExistingContent({
+                    inode: MOCK_CONTENTLET_1_OR_2_TABS.inode,
+                    depth: DotContentletDepths.ONE
+                });
+
+                spectator.detectChanges();
+                // A microtask flush (not a meaningful time advance) is needed for the field to
+                // actually render — without it `text2` isn't in the DOM yet. This costs nothing
+                // against the 500ms fallback window the test is about.
+                tick(0);
+                spectator.detectChanges();
+
+                // A real edit lands before the fallback timer fires (e.g. the user starts typing
+                // immediately, before ApplicationRef settles or the 500ms safety window elapses).
+                const input = spectator.query(byTestId('text2')) as HTMLInputElement;
+                spectator.typeInElement('edited before settle', input);
+                spectator.detectChanges();
+                expect(component.form.dirty).toBe(true);
+
+                // Drain #scheduleMarkPristineAfterInit's fallback timer.
+                tick(PRISTINE_RESET_DEBOUNCE_MS);
+                spectator.detectChanges();
+
+                // Previously this timer called markAsPristine() unconditionally, silently
+                // discarding the edit the moment the window elapsed.
+                expect(component.form.dirty).toBe(true);
+
+                flush();
+            }));
         });
     });
 
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.ts
index f11f74671261..f9af769c91c4 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.ts
@@ -11,6 +11,7 @@ import {
     DestroyRef,
     DOCUMENT,
     effect,
+    ElementRef,
     inject,
     OnInit,
     output,
@@ -127,6 +128,7 @@ export class DotEditContentFormComponent implements OnInit {
     readonly $store = inject(DotEditContentStore);
     readonly #router = inject(Router);
     readonly #destroyRef = inject(DestroyRef);
+    readonly #elementRef = inject(ElementRef);
     readonly #fb = inject(FormBuilder);
     readonly #dotWorkflowEventHandlerService = inject(DotWorkflowEventHandlerService);
     readonly #dotWizardService = inject(DotWizardService);
@@ -206,6 +208,14 @@ export class DotEditContentFormComponent implements OnInit {
     protected readonly $shouldRenderFields = signal(true);
     protected readonly $shouldRenderPreservedFields = signal(true);
 
+    /**
+     * True once the user has genuinely interacted with a field (see the capture-phase listeners set
+     * up in the constructor). While false, any form value change is async-CVA populate noise, so
+     * {@link initializeFormListener} re-marks the form pristine — decoupling "the user edited
+     * something" from load timing. Reset on each (re)build of the form in {@link initializeForm}.
+     */
+    #userTouched = false;
+
     /**
      * Subscription for form value changes - using this to manage the listener lifecycle
      *
@@ -291,6 +301,30 @@ export class DotEditContentFormComponent implements OnInit {
     }
 
     constructor() {
+        // Detect the first REAL user interaction (pointer/keyboard/input from any field) in the
+        // CAPTURE phase, so `#userTouched` is set BEFORE the field's value-accessor emits
+        // `valueChanges` (which runs in the target/bubble phase) — only then can
+        // initializeFormListener tell a genuine edit apart from async-CVA populate noise.
+        // Programmatic `writeValue` on load never dispatches these DOM events, so it never trips it.
+        const host = this.#elementRef.nativeElement as HTMLElement;
+        const markTouched = () => {
+            this.#userTouched = true;
+        };
+        // `drop` is included because dragging a file in from the OS (e.g. onto the binary/file
+        // field) sets the control value programmatically via `(fileDropped)` — the drag starts
+        // outside the window, so no `pointerdown` precedes it. Without latching here, that first
+        // interaction would look like async-CVA populate and the edit would be marked pristine.
+        const interactionEvents = ['pointerdown', 'keydown', 'input', 'drop'] as const;
+        const listenerOptions: AddEventListenerOptions = { capture: true };
+        interactionEvents.forEach((type) =>
+            host.addEventListener(type, markTouched, listenerOptions)
+        );
+        this.#destroyRef.onDestroy(() =>
+            interactionEvents.forEach((type) =>
+                host.removeEventListener(type, markTouched, listenerOptions)
+            )
+        );
+
         /**
          * Effect that reinitializes the form when contentlet changes (e.g., when viewing historical versions)
          *
@@ -424,7 +458,12 @@ export class DotEditContentFormComponent implements OnInit {
         race(this.#appRef.isStable.pipe(filter(Boolean)), timer(500))
             .pipe(take(1), takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => {
-                this.form?.markAsPristine();
+                // Gate on `#userTouched` for the same reason `initializeFormListener` does: if the
+                // user genuinely edited a field within the isStable/500ms window, clearing dirty
+                // here would silently drop that edit. Only clear load-time (untouched) CVA noise.
+                if (!this.#userTouched) {
+                    this.form?.markAsPristine();
+                }
             });
     }
 
@@ -454,6 +493,13 @@ export class DotEditContentFormComponent implements OnInit {
         this.formValueSubscription = this.form.valueChanges
             .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe((value) => {
+                // Until the user has actually interacted, a value change is async-CVA populate,
+                // not an edit — keep the form pristine so the unsaved-changes guard never fires
+                // for load-time noise (independent of how slow the fields load).
+                if (!this.#userTouched) {
+                    this.form.markAsPristine();
+                }
+
                 this.onFormChange(value);
             });
     }
@@ -624,6 +670,10 @@ export class DotEditContentFormComponent implements OnInit {
      * @private
      */
     private initializeForm() {
+        // A fresh (re)build starts a new populate window: until the user interacts, changes are
+        // programmatic CVA noise, not edits.
+        this.#userTouched = false;
+
         const controls = this.$formFields().reduce(
             (acc, field) => ({
                 ...acc,
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.spec.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.spec.ts
index 99c1ab5fbe77..961887cd1aac 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.spec.ts
@@ -360,6 +360,37 @@ describe('EditContentLayoutComponent', () => {
         });
     });
 
+    describe('confirmClose (chrome-agnostic close guard)', () => {
+        it('bypasses the prompt while the editor is loading/saving (form disabled, nothing to discard)', () => {
+            jest.spyOn(spectator.component, 'hasUnsavedChanges').mockReturnValue(true);
+            jest.spyOn(store, 'workflowActionSuccess').mockReturnValue(null);
+            jest.spyOn(store, 'isLoading').mockReturnValue(true);
+            const onProceed = jest.fn();
+
+            spectator.component.confirmClose(onProceed);
+
+            expect(onProceed).toHaveBeenCalledTimes(1);
+        });
+
+        it('does NOT bypass the prompt once loading has settled, even if the sidebar has not (isFullyLoaded no longer gates this)', () => {
+            const confirmationService = spectator.inject(ConfirmationService, true);
+            jest.spyOn(spectator.component, 'hasUnsavedChanges').mockReturnValue(true);
+            jest.spyOn(store, 'workflowActionSuccess').mockReturnValue(null);
+            jest.spyOn(store, 'isLoading').mockReturnValue(false);
+            // A real edit made while `isFullyLoaded()` was still false (sidebar still settling)
+            // must still prompt once loading has finished — the previous `!isFullyLoaded()` bypass
+            // would have discarded it silently instead.
+            jest.spyOn(store, 'isFullyLoaded').mockReturnValue(false);
+            const confirmSpy = jest.spyOn(confirmationService, 'confirm');
+            const onProceed = jest.fn();
+
+            spectator.component.confirmClose(onProceed);
+
+            expect(confirmSpy).toHaveBeenCalledTimes(1);
+            expect(onProceed).not.toHaveBeenCalled();
+        });
+    });
+
     // Isolated to its own describe so that no other component mounted earlier
     // in the file can race the `window:beforeunload` listener registered via
     // the host metadata. The outer `spectator` fixture is destroyed and a
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.ts
index 058f6dc07629..b111e0b0d32b 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-layout/dot-edit-content.layout.component.ts
@@ -405,6 +405,37 @@ export class DotEditContentLayoutComponent {
         this.$editContentForm()?.form?.markAsPristine();
     }
 
+    /**
+     * Chrome-agnostic close guard. Any presentation that can close the editor (side panel,
+     * dialog, etc.) should route its close through here so the unsaved-changes prompt is enforced
+     * consistently — instead of each chrome wiring its own check. Runs `onProceed` immediately when
+     * closing is safe — the form is clean, a save just succeeded, or the editor is still
+     * loading/saving (the form is disabled then, so nothing could have been edited) — otherwise it
+     * prompts and only proceeds on "Discard".
+     *
+     * @param onProceed Runs when it is safe to close (clean form, a save just succeeded, the editor
+     * is loading/saving, or the user discarded changes).
+     */
+    confirmClose(onProceed: () => void): void {
+        // While the content is still loading/saving the form is disabled, so the user cannot have
+        // edited anything — close without prompting. (Async field CVAs that transiently mark the
+        // form dirty during load are already handled by the form's `#userTouched` gate, which keeps
+        // it pristine until a real interaction.) Gated on `isLoading()` — NOT `isFullyLoaded()`,
+        // which also waits on the sidebar and would leave a window where the form is visible and
+        // editable but the guard is still bypassed, discarding a real edit silently.
+        if (
+            !this.hasUnsavedChanges() ||
+            this.$store.workflowActionSuccess() ||
+            this.$store.isLoading()
+        ) {
+            onProceed();
+
+            return;
+        }
+
+        this.#confirmIfDirty(onProceed, () => undefined);
+    }
+
     /**
      * Triggers the browser's native unload-confirmation dialog when the form has
      * unsaved changes. Covers cases the Angular `CanDeactivate` guard cannot
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.html
new file mode 100644
index 000000000000..071ae1239717
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.html
@@ -0,0 +1,65 @@
+<!--
+    maskStyle forces a transparent mask (AC3: the area behind the panel stays visible). The
+    `!important` is required to override PrimeNG's default dimmed mask background, which the theme
+    and the `pt` API do not otherwise let us clear — it is deliberate, not a leftover.
+
+    The left-cast shadow on `pt.root.class` is an arbitrary Tailwind value on purpose: the drawer
+    uses `appendTo="body"` (teleported out of this component's DOM), so component-scoped SCSS /
+    `:host ::ng-deep` cannot reach it, and no dotCMS `$shadow-*` token is left-directional (they all
+    cast downward, but a right-anchored drawer needs the shadow cast to the left).
+-->
+<p-drawer
+    [visible]="!!data()"
+    [modal]="true"
+    [dismissible]="false"
+    [closeOnEscape]="false"
+    [closable]="false"
+    appendTo="body"
+    [maskStyle]="{ background: 'transparent !important' }"
+    [pt]="{
+        root: {
+            class: '!shadow-[-12px_0_24px_rgb(0_0_0_/_20%)]',
+            style: { width: $expanded() ? '100%' : '70%', transition: 'width 250ms ease' }
+        },
+        content: { class: 'p-0!' }
+    }"
+    position="right">
+    <ng-template #header>
+        <div class="flex w-full items-center justify-between gap-4">
+            <span class="truncate text-lg font-semibold" data-testid="side-panel-title">
+                {{ data()?.title }}
+            </span>
+            <div class="flex items-center gap-1">
+                <p-button
+                    [text]="true"
+                    severity="secondary"
+                    [attr.aria-label]="
+                        $expanded()
+                            ? ('edit.content.side-panel.collapse' | dm)
+                            : ('edit.content.side-panel.expand' | dm)
+                    "
+                    (onClick)="toggleExpanded()"
+                    data-testid="side-panel-expand">
+                    <ng-template #icon>
+                        <i class="material-symbols-outlined text-xl!">
+                            {{ $expanded() ? 'close_fullscreen' : 'open_in_full' }}
+                        </i>
+                    </ng-template>
+                </p-button>
+                <p-button
+                    [text]="true"
+                    severity="secondary"
+                    [attr.aria-label]="'edit.content.side-panel.close' | dm"
+                    (onClick)="requestClose()"
+                    data-testid="side-panel-close">
+                    <ng-template #icon>
+                        <i class="material-symbols-outlined text-xl!">close</i>
+                    </ng-template>
+                </p-button>
+            </div>
+        </div>
+    </ng-template>
+    @for (item of $items(); track item.contentletInode ?? item.contentTypeId) {
+        <dot-edit-content-form-layout />
+    }
+</p-drawer>
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.spec.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.spec.ts
new file mode 100644
index 000000000000..cff68740354b
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.spec.ts
@@ -0,0 +1,378 @@
+import { createComponentFactory, Spectator, byTestId } from '@openng/spectator/jest';
+import { MockComponent, MockPipe } from 'ng-mocks';
+import { Subject } from 'rxjs';
+
+import { ButtonModule } from 'primeng/button';
+import { DrawerModule } from 'primeng/drawer';
+
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
+import { DotMessagePipe } from '@dotcms/ui';
+
+import { DotEditContentSidePanelComponent } from './dot-edit-content-side-panel.component';
+
+import { EditContentDialogData } from '../../models/dot-edit-content-dialog.interface';
+import { DotSidePanelNavController } from '../../services/dot-side-panel-nav.service';
+import { OverlayEditContentHost } from '../../services/host/overlay-edit-content-host';
+import { DotEditContentLayoutComponent } from '../dot-edit-content-layout/dot-edit-content.layout.component';
+
+describe('DotEditContentSidePanelComponent', () => {
+    let spectator: Spectator<DotEditContentSidePanelComponent>;
+    let saved$: Subject<DotCMSContentlet>;
+    let mockHost: Pick<OverlayEditContentHost, 'saved$'>;
+
+    const EDIT_DATA: EditContentDialogData = {
+        mode: 'edit',
+        contentletInode: 'inode-1',
+        identifier: 'id-1',
+        title: 'My Content'
+    };
+
+    const createComponent = createComponentFactory({
+        component: DotEditContentSidePanelComponent,
+        // Swap the heavy editor for a stub; feed a mock host so we control `saved$`.
+        overrideComponents: [
+            [
+                DotEditContentSidePanelComponent,
+                {
+                    set: {
+                        imports: [
+                            DrawerModule,
+                            ButtonModule,
+                            MockComponent(DotEditContentLayoutComponent),
+                            MockPipe(DotMessagePipe, (key: string) => key)
+                        ],
+                        providers: [{ provide: OverlayEditContentHost, useValue: undefined }]
+                    }
+                }
+            ]
+        ]
+    });
+
+    beforeEach(() => {
+        // Isolate the persisted expanded preference between tests.
+        localStorage.clear();
+        saved$ = new Subject<DotCMSContentlet>();
+        mockHost = { saved$: saved$.asObservable() };
+
+        spectator = createComponent({
+            providers: [
+                { provide: OverlayEditContentHost, useValue: mockHost },
+                // Stub so the component doesn't pull the real controller (and GlobalStore) in tests.
+                {
+                    provide: DotSidePanelNavController,
+                    useValue: {
+                        acquire: jest.fn(),
+                        release: jest.fn(),
+                        isTop: jest.fn().mockReturnValue(true)
+                    }
+                }
+            ],
+            detectChanges: false
+        });
+    });
+
+    it('should create', () => {
+        spectator.detectChanges();
+        expect(spectator.component).toBeTruthy();
+    });
+
+    it('should render the content title in the header', () => {
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+
+        // `appendTo="body"` teleports the drawer content out of the fixture into `document.body`,
+        // so byTestId (a DOM/CSS query) must search from the document root.
+        expect(
+            spectator.query(byTestId('side-panel-title'), { root: true })?.textContent?.trim()
+        ).toBe('My Content');
+    });
+
+    it('should render the editor only when data is set', () => {
+        spectator.setInput('data', null);
+        spectator.detectChanges();
+        expect(spectator.query(DotEditContentLayoutComponent)).toBeNull();
+
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+        expect(spectator.query(DotEditContentLayoutComponent)).not.toBeNull();
+    });
+
+    /**
+     * PrimeNG `p-button` renders its clickable `<button>` inside the host. The `{ root: true }`
+     * search is needed because `appendTo="body"` teleports the drawer (and its header buttons)
+     * out of the fixture element and into `document.body`.
+     */
+    const clickButton = (testId: string): void => {
+        const button = spectator.query(byTestId(testId), { root: true })?.querySelector('button');
+        spectator.click(button as HTMLElement);
+    };
+
+    /**
+     * Reads the expand button's icon glyph — the user-visible reflection of `$expanded`
+     * (`open_in_full` when collapsed, `close_fullscreen` when expanded). Asserting on this instead
+     * of the protected signal covers what the user actually sees. `{ root: true }` because
+     * `appendTo="body"` teleports the header out of the fixture.
+     */
+    const expandIcon = (): string | undefined =>
+        spectator
+            .query(byTestId('side-panel-expand'), { root: true })
+            ?.querySelector('i')
+            ?.textContent?.trim();
+
+    /** Expand button aria-label (i18n key via MockPipe) — user-facing expanded/collapsed cue. */
+    const expandAriaLabel = (): string | null | undefined =>
+        spectator.query(byTestId('side-panel-expand'), { root: true })?.getAttribute('aria-label');
+
+    /**
+     * Drawer width from the `pt.root.style` binding (`70%` collapsed / `100%` expanded). The drawer
+     * is teleported to `document.body`, so query from the document root.
+     */
+    const drawerWidth = (): string =>
+        (spectator.query('.p-drawer', { root: true }) as HTMLElement | null)?.style?.width ?? '';
+
+    it('should toggle expanded state with the expand button and persist it', () => {
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+
+        expect(expandIcon()).toBe('open_in_full');
+        expect(expandAriaLabel()).toBe('edit.content.side-panel.expand');
+        expect(drawerWidth()).toBe('70%');
+
+        clickButton('side-panel-expand');
+        spectator.detectChanges();
+        expect(expandIcon()).toBe('close_fullscreen');
+        expect(expandAriaLabel()).toBe('edit.content.side-panel.collapse');
+        expect(drawerWidth()).toBe('100%');
+        expect(localStorage.getItem('dot-edit-content-side-panel-expanded')).toBe('true');
+
+        clickButton('side-panel-expand');
+        spectator.detectChanges();
+        expect(expandIcon()).toBe('open_in_full');
+        expect(expandAriaLabel()).toBe('edit.content.side-panel.expand');
+        expect(drawerWidth()).toBe('70%');
+        expect(localStorage.getItem('dot-edit-content-side-panel-expanded')).toBe('false');
+    });
+
+    it('should route close through the editor guard and emit `closed` when it proceeds', () => {
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+
+        const layout = spectator.query(DotEditContentLayoutComponent);
+        const confirmClose = jest
+            .spyOn(layout, 'confirmClose')
+            .mockImplementation((onProceed: () => void) => onProceed());
+
+        const closedSpy = jest.fn();
+        spectator.output('closed').subscribe(closedSpy);
+
+        clickButton('side-panel-close');
+
+        expect(confirmClose).toHaveBeenCalledWith(expect.any(Function));
+        expect(closedSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should close through the editor guard on Escape (document keydown)', () => {
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+
+        const layout = spectator.query(DotEditContentLayoutComponent);
+        const confirmClose = jest
+            .spyOn(layout, 'confirmClose')
+            .mockImplementation((onProceed: () => void) => onProceed());
+
+        const closedSpy = jest.fn();
+        spectator.output('closed').subscribe(closedSpy);
+
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+        expect(confirmClose).toHaveBeenCalledWith(expect.any(Function));
+        expect(closedSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should ignore Escape when not the frontmost stacked panel (isTop === false)', () => {
+        (spectator.inject(DotSidePanelNavController).isTop as jest.Mock).mockReturnValue(false);
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+
+        const layout = spectator.query(DotEditContentLayoutComponent);
+        const confirmClose = jest.spyOn(layout, 'confirmClose');
+        const closedSpy = jest.fn();
+        spectator.output('closed').subscribe(closedSpy);
+
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+        // A panel beneath the top one must not react to the shared document-level ESC.
+        expect(confirmClose).not.toHaveBeenCalled();
+        expect(closedSpy).not.toHaveBeenCalled();
+    });
+
+    it('should NOT emit `closed` when the editor guard cancels (unsaved changes kept)', () => {
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+
+        const layout = spectator.query(DotEditContentLayoutComponent);
+        jest.spyOn(layout, 'confirmClose').mockImplementation(() => {
+            /* user chose "Keep editing" → never calls onProceed */
+        });
+
+        const closedSpy = jest.fn();
+        spectator.output('closed').subscribe(closedSpy);
+
+        clickButton('side-panel-close');
+
+        expect(closedSpy).not.toHaveBeenCalled();
+    });
+
+    it('should forward the host `saved$` stream to the `saved` output', async () => {
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+        // `saved$` is subscribed in afterNextRender — wait for it to run.
+        await spectator.fixture.whenStable();
+
+        const savedSpy = jest.fn();
+        spectator.output('saved').subscribe(savedSpy);
+
+        const contentlet = { inode: 'inode-1' } as DotCMSContentlet;
+        saved$.next(contentlet);
+
+        expect(savedSpy).toHaveBeenCalledWith(contentlet);
+    });
+
+    it('should fire data.onContentSaved (last save) and data.onCancel on close', async () => {
+        const onContentSaved = jest.fn();
+        const onCancel = jest.fn();
+        spectator.setInput('data', { ...EDIT_DATA, onContentSaved, onCancel });
+        spectator.detectChanges();
+        await spectator.fixture.whenStable();
+
+        const contentlet = { inode: 'inode-2' } as DotCMSContentlet;
+        saved$.next(contentlet);
+
+        const layout = spectator.query(DotEditContentLayoutComponent);
+        jest.spyOn(layout, 'confirmClose').mockImplementation((onProceed: () => void) =>
+            onProceed()
+        );
+
+        clickButton('side-panel-close');
+
+        expect(onContentSaved).toHaveBeenCalledWith(contentlet);
+        expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not fire data.onContentSaved on close when nothing was saved', () => {
+        const onContentSaved = jest.fn();
+        const onCancel = jest.fn();
+        spectator.setInput('data', { ...EDIT_DATA, onContentSaved, onCancel });
+        spectator.detectChanges();
+
+        const layout = spectator.query(DotEditContentLayoutComponent);
+        jest.spyOn(layout, 'confirmClose').mockImplementation((onProceed: () => void) =>
+            onProceed()
+        );
+
+        clickButton('side-panel-close');
+
+        expect(onContentSaved).not.toHaveBeenCalled();
+        expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+});
+
+/**
+ * Construction-time seeding of `$expanded` from the persisted preference. Kept in its own describe
+ * with a dedicated factory because it needs a component built AFTER localStorage is seeded — the
+ * main describe's shared beforeEach constructs the panel with storage already cleared.
+ */
+describe('DotEditContentSidePanelComponent — persisted expanded preference', () => {
+    let spectator: Spectator<DotEditContentSidePanelComponent>;
+
+    const EDIT_DATA: EditContentDialogData = {
+        mode: 'edit',
+        contentletInode: 'inode-1',
+        identifier: 'id-1',
+        title: 'My Content'
+    };
+
+    const createComponent = createComponentFactory({
+        component: DotEditContentSidePanelComponent,
+        overrideComponents: [
+            [
+                DotEditContentSidePanelComponent,
+                {
+                    set: {
+                        imports: [
+                            DrawerModule,
+                            ButtonModule,
+                            MockComponent(DotEditContentLayoutComponent),
+                            MockPipe(DotMessagePipe, (key: string) => key)
+                        ],
+                        providers: [{ provide: OverlayEditContentHost, useValue: undefined }]
+                    }
+                }
+            ]
+        ]
+    });
+
+    afterEach(() => {
+        localStorage.clear();
+    });
+
+    const buildAndAssertOpenState = (expected: {
+        icon: string;
+        ariaLabel: string;
+        width: string;
+    }) => {
+        spectator = createComponent({
+            providers: [
+                {
+                    provide: OverlayEditContentHost,
+                    useValue: { saved$: new Subject<DotCMSContentlet>().asObservable() }
+                },
+                {
+                    provide: DotSidePanelNavController,
+                    useValue: {
+                        acquire: jest.fn(),
+                        release: jest.fn(),
+                        isTop: jest.fn().mockReturnValue(true)
+                    }
+                }
+            ],
+            detectChanges: false
+        });
+        spectator.setInput('data', EDIT_DATA);
+        spectator.detectChanges();
+
+        expect(
+            spectator
+                .query(byTestId('side-panel-expand'), { root: true })
+                ?.querySelector('i')
+                ?.textContent?.trim()
+        ).toBe(expected.icon);
+        expect(
+            spectator
+                .query(byTestId('side-panel-expand'), { root: true })
+                ?.getAttribute('aria-label')
+        ).toBe(expected.ariaLabel);
+        // Width is the user-visible outcome of reading `$expanded` on construction (`pt.root.style`).
+        expect(
+            (spectator.query('.p-drawer', { root: true }) as HTMLElement | null)?.style?.width
+        ).toBe(expected.width);
+    };
+
+    it('opens expanded when the persisted preference is `true`', () => {
+        localStorage.setItem('dot-edit-content-side-panel-expanded', 'true');
+        buildAndAssertOpenState({
+            icon: 'close_fullscreen',
+            ariaLabel: 'edit.content.side-panel.collapse',
+            width: '100%'
+        });
+    });
+
+    it('opens collapsed when there is no persisted preference', () => {
+        localStorage.removeItem('dot-edit-content-side-panel-expanded');
+        buildAndAssertOpenState({
+            icon: 'open_in_full',
+            ariaLabel: 'edit.content.side-panel.expand',
+            width: '70%'
+        });
+    });
+});
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.ts
new file mode 100644
index 000000000000..b80ae77a57d5
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-side-panel/dot-edit-content-side-panel.component.ts
@@ -0,0 +1,229 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    DestroyRef,
+    Injector,
+    OnDestroy,
+    afterNextRender,
+    computed,
+    forwardRef,
+    inject,
+    input,
+    output,
+    signal,
+    viewChild
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { ButtonModule } from 'primeng/button';
+import { DrawerModule } from 'primeng/drawer';
+import { DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog';
+
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
+import { popFormBridge, pushFormBridge } from '@dotcms/edit-content-bridge';
+import { DotMessagePipe } from '@dotcms/ui';
+
+import {
+    AngularImageEditorLauncher,
+    IMAGE_EDITOR_LAUNCHER
+} from '../../fields/shared/image-editor-launcher';
+import { EditContentDialogData } from '../../models/dot-edit-content-dialog.interface';
+import { DotSidePanelNavController } from '../../services/dot-side-panel-nav.service';
+import { EDIT_CONTENT_HOST } from '../../services/host/edit-content-host.model';
+import { OverlayEditContentHost } from '../../services/host/overlay-edit-content-host';
+import { DotEditContentLayoutComponent } from '../dot-edit-content-layout/dot-edit-content.layout.component';
+
+/** localStorage key persisting the user's expanded (full-width) preference for the side panel. */
+const EXPANDED_STORAGE_KEY = 'dot-edit-content-side-panel-expanded';
+
+/**
+ * Reads the persisted expanded preference. Best-effort: returns `false` when storage is
+ * unavailable (SSR/tests) or the value is missing, so a read failure never breaks the panel.
+ */
+function readExpandedPreference(): boolean {
+    try {
+        return localStorage.getItem(EXPANDED_STORAGE_KEY) === 'true';
+    } catch {
+        return false;
+    }
+}
+
+/** Persists the expanded preference; silently ignores storage failures. */
+function writeExpandedPreference(expanded: boolean): void {
+    try {
+        localStorage.setItem(EXPANDED_STORAGE_KEY, String(expanded));
+    } catch {
+        // best-effort: quota errors / disabled storage must not break the panel.
+    }
+}
+
+/**
+ * Renders the new Edit Content editor inside a right-to-left slide-in panel (`p-drawer`), as an
+ * alternative to the full-screen route or the centered dialog.
+ *
+ * It reuses the overlay editor plumbing: it provides {@link OverlayEditContentHost} (identity from
+ * the dialog config, in-place navigation, chrome no-ops) and, since it is not opened through
+ * `DialogService`, supplies the {@link DynamicDialogConfig} the host reads identity from — built
+ * from the {@link data} input. The header shows the content title plus an expand toggle (70% ↔
+ * full width) and a close button.
+ *
+ * It also self-provides `DialogService` and {@link IMAGE_EDITOR_LAUNCHER} — the same pair
+ * `EditContentShellComponent` provides for the full-screen route. None of this panel's openers
+ * (Content Drive, Query Tool, UVE) provide them, so without this the file field's `IMAGE_EDITOR_LAUNCHER`
+ * injection (`{ optional: true }`) silently resolves to `undefined`: the "Edit image" action
+ * disappears for Image/File fields, and Binary falls back to the legacy Dojo editor instead of the
+ * new one. Providing both here — rather than in each opener — fixes it for all three at once.
+ */
+@Component({
+    selector: 'dot-edit-content-side-panel',
+    imports: [DrawerModule, ButtonModule, DotEditContentLayoutComponent, DotMessagePipe],
+    providers: [
+        OverlayEditContentHost,
+        { provide: EDIT_CONTENT_HOST, useExisting: OverlayEditContentHost },
+        // Required by AngularImageEditorLauncher to open the new image editor as a modal.
+        DialogService,
+        { provide: IMAGE_EDITOR_LAUNCHER, useClass: AngularImageEditorLauncher },
+        {
+            // The overlay host reads the content identity from the dialog config; this panel is not
+            // opened through DialogService, so feed it from the `data` input. The `data` getter is
+            // lazy on purpose: it defers reading the input until the host actually resolves the
+            // identity, by which point Angular has applied the input.
+            provide: DynamicDialogConfig,
+            useFactory: (panel: DotEditContentSidePanelComponent) => ({
+                get data() {
+                    return panel.data();
+                }
+            }),
+            deps: [forwardRef(() => DotEditContentSidePanelComponent)]
+        }
+    ],
+    templateUrl: './dot-edit-content-side-panel.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    // ESC closes the panel through the unsaved-changes guard. Bound at document level because
+    // `appendTo="body"` moves the drawer out of this component's DOM subtree, so a template
+    // `(keydown.escape)` on the drawer would never receive the event.
+    host: { '(document:keydown.escape)': 'onEscape()' }
+})
+export class DotEditContentSidePanelComponent implements OnDestroy {
+    readonly #injector = inject(Injector);
+    readonly #destroyRef = inject(DestroyRef);
+    readonly #navController = inject(DotSidePanelNavController);
+
+    /** The hosted editor; used to run its unsaved-changes guard before closing. */
+    protected readonly $layout = viewChild(DotEditContentLayoutComponent);
+
+    /** Identity (and header title) of the content to create/edit, or `null` when closed. */
+    readonly data = input<EditContentDialogData | null>(null);
+
+    /** Emitted when the user closes the panel, so the opener can clear its request. */
+    readonly closed = output<void>();
+
+    /** Emitted on each successful save, so the opener can refresh its view. */
+    readonly saved = output<DotCMSContentlet>();
+
+    /**
+     * Whether the panel is expanded to the full viewport width (vs the default ~70%). Seeded from
+     * the user's persisted preference so a panel opens in the mode last chosen (see
+     * {@link toggleExpanded}).
+     */
+    protected readonly $expanded = signal(readExpandedPreference());
+
+    /** Last successfully-saved contentlet, forwarded to `data.onContentSaved` when the panel closes. */
+    #lastSaved: DotCMSContentlet | null = null;
+
+    /**
+     * `@for` source: a single-item list. Rendering the editor through `@for` (instead of directly)
+     * defers its creation until the input has a value — the editor resolves its identity
+     * synchronously on construction, so it must not be created before `data` is applied.
+     */
+    protected readonly $items = computed(() => {
+        const data = this.data();
+
+        return data ? [data] : [];
+    });
+
+    constructor() {
+        // Give the editor a clean form-bridge slot; restore the previous one on close.
+        pushFormBridge();
+
+        // Collapse the main navigation while the panel is open (restored on close), and register
+        // this panel on the stack so ESC only closes the frontmost one. In afterNextRender so the
+        // store mutation lands after the current render, not during it.
+        afterNextRender(() => this.#navController.acquire(this));
+
+        // Forward each save to the opener so it can refresh its view. The overlay host is resolved
+        // AFTER construction (afterNextRender) on purpose: resolving it in the constructor would
+        // cycle through its `DynamicDialogConfig` factory, which depends on this component.
+        afterNextRender(() => {
+            this.#injector
+                .get(OverlayEditContentHost)
+                .saved$.pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe((contentlet) => {
+                    this.#lastSaved = contentlet;
+                    this.saved.emit(contentlet);
+                });
+        });
+    }
+
+    /**
+     * ESC handler. Only the frontmost stacked panel responds — both stacked panels share a
+     * document-level listener, so without this guard a single ESC would close the whole stack
+     * instead of one panel at a time.
+     */
+    protected onEscape(): void {
+        if (this.#navController.isTop(this)) {
+            this.requestClose();
+        }
+    }
+
+    /**
+     * Close intent (X button, ESC, or browser Back routed by the opener). Routes through the
+     * editor's unsaved-changes guard so the user is prompted when the form is dirty; only closes
+     * once it is safe. On close it fires the `data` callbacks (`onContentSaved` with the last save,
+     * then `onCancel`) — mirroring the dialog's contract so dialog-based openers can switch to the
+     * panel unchanged — and emits `closed` for openers that drive it via a signal.
+     *
+     * Public so an opener (e.g. Content Drive on browser Back) can route its own close intent
+     * through the same guard instead of tearing the panel down and losing unsaved edits silently.
+     */
+    requestClose(): void {
+        const layout = this.$layout();
+        const proceed = () => {
+            this.#fireCloseCallbacks();
+            this.closed.emit();
+        };
+
+        if (layout) {
+            layout.confirmClose(proceed);
+        } else {
+            proceed();
+        }
+    }
+
+    /**
+     * Toggles the expanded (full-width) state and persists it, so the next panel the user opens
+     * starts in the same mode.
+     */
+    protected toggleExpanded(): void {
+        const next = !this.$expanded();
+        this.$expanded.set(next);
+        writeExpandedPreference(next);
+    }
+
+    /** Fires the `data` lifecycle callbacks on close, matching {@link DotEditContentDialogComponent}. */
+    #fireCloseCallbacks(): void {
+        const data = this.data();
+
+        if (this.#lastSaved) {
+            data?.onContentSaved?.(this.#lastSaved);
+        }
+
+        data?.onCancel?.();
+    }
+
+    ngOnDestroy(): void {
+        popFormBridge();
+        // Restore the main navigation once the last panel closes.
+        this.#navController.release(this);
+    }
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.spec.ts
index ad44dfafdba2..008fb96d3ad7 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.spec.ts
@@ -1,3 +1,23 @@
+// Stub the side panel so the flag-on "create new" branch can create it via `ViewContainerRef`
+// without pulling in the real editor (and its module cycle). Placed before the imports so jest
+// hoists it ahead of the dynamic `import()` the component performs. Kept as a real standalone
+// component so `createComponent`/`setInput('data')`/`instance.closed` all work.
+jest.mock(
+    '../../../../components/dot-edit-content-side-panel/dot-edit-content-side-panel.component',
+    () => {
+        const { Component, input, output } = jest.requireActual('@angular/core');
+
+        @Component({ selector: 'dot-edit-content-side-panel', standalone: true, template: '' })
+        class MockDotEditContentSidePanelComponent {
+            data = input(null);
+            closed = output();
+            saved = output();
+        }
+
+        return { DotEditContentSidePanelComponent: MockDotEditContentSidePanelComponent };
+    }
+);
+
 import { byTestId, createComponentFactory, mockProvider, Spectator } from '@openng/spectator/jest';
 
 import { provideHttpClient } from '@angular/common/http';
@@ -6,7 +26,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { DialogService } from 'primeng/dynamicdialog';
 
 import { DotMessageService } from '@dotcms/data-access';
-import { DotCMSContentlet } from '@dotcms/dotcms-models';
+import { DotCMSContentlet, FeaturedFlags } from '@dotcms/dotcms-models';
 import {
     createFakeContentlet,
     createFakeLanguage,
@@ -15,6 +35,8 @@ import {
 
 import { DotRelationshipFieldComponent } from './dot-relationship-field.component';
 
+// Resolves to the mock declared in the jest.mock above (same module path the component imports).
+import { DotEditContentSidePanelComponent } from '../../../../components/dot-edit-content-side-panel/dot-edit-content-side-panel.component';
 import { EDIT_CONTENT_HOST } from '../../../../services/host/edit-content-host.model';
 import { DotEditContentStore } from '../../../../store/edit-content.store';
 import { TableColumn } from '../../models/relationship.models';
@@ -81,6 +103,8 @@ describe('DotRelationshipFieldComponent', () => {
         contentType: jest.fn().mockReturnValue({ id: 'ct-1' }),
         formattedRelationship: jest.fn().mockReturnValue('id-1'),
         lastChangeSource: jest.fn().mockReturnValue('load'),
+        // `withFlags` slice — side panel off by default (empty map ⇒ create-new uses the dialog).
+        flags: jest.fn().mockReturnValue({}),
         initialize: jest.fn(),
         setData: jest.fn(),
         deleteItem: jest.fn(),
@@ -194,6 +218,82 @@ describe('DotRelationshipFieldComponent', () => {
             spectator.click(byTestId('relationship-empty-relate-link'));
             expect(dialogService.open).toHaveBeenCalled();
         });
+
+        it('wires the "New content" menu item to the create-new action', () => {
+            // The menu item is the user-facing trigger; verify it calls the action (rather than
+            // only exercising the method directly elsewhere).
+            const createSpy = jest
+                .spyOn(spectator.component, 'showCreateNewContentDialog')
+                .mockResolvedValue();
+
+            spectator.component.$menuItems()[1].command?.(undefined as never);
+
+            expect(createSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('opens the create-new content in the centered dialog when the side panel flag is off', async () => {
+            const dialogService = spectator.inject(DialogService);
+            (dialogService.open as jest.Mock).mockClear();
+
+            await spectator.component.showCreateNewContentDialog();
+
+            expect(dialogService.open).toHaveBeenCalledTimes(1);
+            const [, config] = (dialogService.open as jest.Mock).mock.calls[0];
+            expect(config.data).toEqual(
+                expect.objectContaining({ mode: 'new', contentTypeId: 'ct-1' })
+            );
+        });
+
+        it('opens the create-new content in the side panel when the flag is on', async () => {
+            const dialogService = spectator.inject(DialogService);
+            (dialogService.open as jest.Mock).mockClear();
+            storeMock.flags.mockReturnValue({
+                [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: true
+            });
+
+            await spectator.component.showCreateNewContentDialog();
+            spectator.detectChanges();
+
+            // Flag on → the side panel is created imperatively, NOT the centered dialog.
+            expect(dialogService.open).not.toHaveBeenCalled();
+            expect(spectator.query('dot-edit-content-side-panel')).toBeTruthy();
+        });
+
+        it('falls back to the centered dialog when the flag slice has not resolved', async () => {
+            const dialogService = spectator.inject(DialogService);
+            (dialogService.open as jest.Mock).mockClear();
+            // Empty slice = withFlags degraded on a failed config read, or a click before it
+            // resolved. Either way the create-new action must not be a silent no-op: fall back to
+            // the centered dialog (previous behavior).
+            storeMock.flags.mockReturnValue({});
+
+            await spectator.component.showCreateNewContentDialog();
+
+            expect(dialogService.open).toHaveBeenCalledTimes(1);
+            const [, config] = (dialogService.open as jest.Mock).mock.calls[0];
+            expect(config.data).toEqual(
+                expect.objectContaining({ mode: 'new', contentTypeId: 'ct-1' })
+            );
+        });
+
+        it('destroys the side panel when it emits `closed`', async () => {
+            storeMock.flags.mockReturnValue({
+                [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: true
+            });
+
+            await spectator.component.showCreateNewContentDialog();
+            spectator.detectChanges();
+
+            const panel = spectator.query(DotEditContentSidePanelComponent);
+            expect(panel).toBeTruthy();
+
+            // Emitting `closed` must tear the panel down: its subscription calls #closeSidePanel,
+            // which destroys the ComponentRef. A broken/missing subscription would leave it mounted.
+            panel?.closed.emit();
+            spectator.detectChanges();
+
+            expect(spectator.query('dot-edit-content-side-panel')).toBeFalsy();
+        });
     });
 
     describe('Disabled state', () => {
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts
index b822d6cfc5ed..1540cd6abe98 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts
@@ -3,6 +3,7 @@ import { signalMethod } from '@ngrx/signals';
 import {
     ChangeDetectionStrategy,
     Component,
+    ComponentRef,
     computed,
     DestroyRef,
     forwardRef,
@@ -10,7 +11,8 @@ import {
     Injector,
     input,
     OnInit,
-    untracked
+    untracked,
+    ViewContainerRef
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AbstractControl, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -25,7 +27,12 @@ import { TagModule } from 'primeng/tag';
 import { filter } from 'rxjs/operators';
 
 import { DotMessageService } from '@dotcms/data-access';
-import { DotCMSContentlet, DotCMSContentTypeField, DotLanguage } from '@dotcms/dotcms-models';
+import {
+    DotCMSContentlet,
+    DotCMSContentTypeField,
+    DotLanguage,
+    FeaturedFlags
+} from '@dotcms/dotcms-models';
 import {
     DotContentletStatusBadgeComponent,
     DotContentThumbnailComponent,
@@ -44,6 +51,11 @@ import { EDIT_CONTENT_HOST } from '../../../../services/host/edit-content-host.m
 import { DotEditContentStore } from '../../../../store/edit-content.store';
 import { BaseControlValueAccessor } from '../../../shared/base-control-value-accesor';
 
+// Type-only import: the runtime class is loaded lazily via dynamic import() to avoid a static
+// cycle (side panel → layout → form → field → this component). `import type` is erased at compile
+// time, so it does not create that cycle.
+import type { DotEditContentSidePanelComponent } from '../../../../components/dot-edit-content-side-panel/dot-edit-content-side-panel.component';
+
 @Component({
     selector: 'dot-relationship-field',
     imports: [
@@ -129,6 +141,9 @@ export class DotRelationshipFieldComponent
      */
     readonly #dialogService = inject(DialogService);
 
+    /** Used to create the Edit Content side panel imperatively (see {@link showCreateNewContentDialog}). */
+    readonly #viewContainerRef = inject(ViewContainerRef);
+
     /**
      * Reference to the dynamic dialog. It can be null if no dialog is currently open.
      *
@@ -136,6 +151,9 @@ export class DotRelationshipFieldComponent
      */
     #dialogRef: DynamicDialogRef | null = null;
 
+    /** Reference to the side panel component when open (side-panel mode), or `null`. */
+    #sidePanelRef: ComponentRef<DotEditContentSidePanelComponent> | null = null;
+
     /**
      * A signal that holds the menu items for the relationship field.
      * These items control the visibility of the existing content dialog and the creation of new content.
@@ -411,7 +429,10 @@ export class DotRelationshipFieldComponent
     }
 
     /**
-     * Opens the new content dialog for creating content using the Angular editor
+     * Opens the new-content editor for creating content and relating it. When the side panel
+     * feature flag is on it opens the right slide-in panel; otherwise the centered dialog (the
+     * previous behavior). Both share the same {@link EditContentDialogData}: `onContentSaved`
+     * adds the created contentlet to this relationship.
      */
     async showCreateNewContentDialog(): Promise<void> {
         const contentType = this.store.contentType();
@@ -419,12 +440,13 @@ export class DotRelationshipFieldComponent
             return;
         }
 
-        const { DotEditContentDialogComponent } =
-            await import('../../../../components/dot-create-content-dialog/dot-create-content-dialog.component');
-
         const dialogData: EditContentDialogData = {
             mode: 'new',
             contentTypeId: contentType.id,
+            title: this.#dotMessageService.get(
+                'contenttypes.content.create.contenttype',
+                contentType.name
+            ),
             relationshipInfo: {
                 parentContentletId: this.$contentlet()?.inode,
                 relationshipName: this.$field()?.variable,
@@ -437,6 +459,23 @@ export class DotRelationshipFieldComponent
             }
         };
 
+        // Read the flag from the store's `withFlags` slice (batch-fetched once on store init).
+        // Read at click time, not construction: this component is created lazily and deep in the
+        // editor, but the store's init fetch has run long before the user clicks, so `flags()` is
+        // resolved by now. If it somehow isn't (empty slice ⇒ `undefined`), fall back to the dialog
+        // (previous behavior) — the safe default.
+        const sidePanelEnabled =
+            this.store.flags()[FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL] ?? false;
+
+        if (sidePanelEnabled) {
+            await this.#openCreateContentSidePanel(dialogData);
+
+            return;
+        }
+
+        const { DotEditContentDialogComponent } =
+            await import('../../../../components/dot-create-content-dialog/dot-create-content-dialog.component');
+
         this.#dialogRef = this.#dialogService.open(DotEditContentDialogComponent, {
             appendTo: 'body',
             baseZIndex: 10000,
@@ -452,10 +491,36 @@ export class DotRelationshipFieldComponent
             maskStyleClass: 'p-dialog-mask-dynamic p-dialog-create-content',
             style: { 'max-width': '1400px', 'max-height': '900px' },
             data: dialogData,
-            header: `Create ${contentType.name}`
+            header: dialogData.title
         });
     }
 
+    /**
+     * Creates the Edit Content side panel imperatively. The component is loaded via dynamic
+     * `import()` (not a static template import) to avoid a module cycle — see the `import type`
+     * note at the top of this file. The panel fires `dialogData.onContentSaved` (last save) and
+     * `dialogData.onCancel` on close; `(closed)` tears the component down.
+     */
+    async #openCreateContentSidePanel(dialogData: EditContentDialogData): Promise<void> {
+        const { DotEditContentSidePanelComponent } =
+            await import('../../../../components/dot-edit-content-side-panel/dot-edit-content-side-panel.component');
+
+        this.#closeSidePanel();
+        this.#sidePanelRef = this.#viewContainerRef.createComponent(
+            DotEditContentSidePanelComponent
+        );
+        this.#sidePanelRef.setInput('data', dialogData);
+        // `closed` is an OutputEmitterRef (not an Observable) — subscribe directly. The
+        // subscription is cleaned up when the panel component is destroyed.
+        this.#sidePanelRef.instance.closed.subscribe(() => this.#closeSidePanel());
+    }
+
+    /** Destroys the side panel component if open. */
+    #closeSidePanel(): void {
+        this.#sidePanelRef?.destroy();
+        this.#sidePanelRef = null;
+    }
+
     /**
      * Syncs the formatted relationship value to the form control.
      *
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component.spec.ts
index 76fa78134ef0..66c4edc39c4b 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component.spec.ts
@@ -12,7 +12,8 @@ import {
     DotContentTypeService,
     DotCurrentUserService,
     DotHttpErrorManagerService,
-    DotMessageService
+    DotMessageService,
+    DotPropertiesService
 } from '@dotcms/data-access';
 import {
     DotCMSClazzes,
@@ -111,7 +112,13 @@ describe('DotEditContentRelationshipFieldComponent', () => {
             provideHttpClient(),
             provideHttpClientTesting(),
             mockProvider(DotMessageService, {
-                get: jest.fn().mockReturnValue('Mock Message')
+                // The create-new title is now i18n: `get('contenttypes.content.create.contenttype', name)`.
+                // Resolve that key to keep the header assertion meaningful; other keys stay generic.
+                get: jest.fn((key: string, ...args: string[]) =>
+                    key === 'contenttypes.content.create.contenttype'
+                        ? `Create ${args[0] ?? ''}`
+                        : 'Mock Message'
+                )
             }),
             mockProvider(DotContentTypeService, {
                 getContentType: jest.fn().mockReturnValue(of(mockContentType))
@@ -120,6 +127,16 @@ describe('DotEditContentRelationshipFieldComponent', () => {
                 handle: jest.fn()
             }),
             mockProvider(DotCurrentUserService),
+            // RelationshipFieldStore composes `withFlags`, which calls `getFeatureFlags` on init —
+            // must be mocked (not just `getFeatureFlag`) or the real store throws on construction.
+            // Side panel off by default → showCreateNewContentDialog uses the centered dialog.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest
+                    .fn()
+                    .mockReturnValue(
+                        of({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: false })
+                    )
+            }),
             mockProvider(DotEditContentStore, {
                 contentType: jest.fn().mockReturnValue(null),
                 currentLocale: jest.fn().mockReturnValue(null),
@@ -616,6 +633,15 @@ describe('DotEditContentRelationshipFieldComponent', () => {
             handle: jest.fn()
         }),
         mockProvider(DotCurrentUserService),
+        // RelationshipFieldStore composes `withFlags`, which calls `getFeatureFlags` on init —
+        // must be mocked or the real store throws on construction.
+        mockProvider(DotPropertiesService, {
+            getFeatureFlags: jest
+                .fn()
+                .mockReturnValue(
+                    of({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: false })
+                )
+        }),
         mockProvider(DotEditContentStore, {
             contentType: jest.fn().mockReturnValue(null),
             currentLocale: jest.fn().mockReturnValue(null),
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.spec.ts
index 827a18c86261..f7c65b1221ad 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.spec.ts
@@ -7,7 +7,8 @@ import { TestBed } from '@angular/core/testing';
 import {
     DotContentTypeService,
     DotFieldService,
-    DotHttpErrorManagerService
+    DotHttpErrorManagerService,
+    DotPropertiesService
 } from '@dotcms/data-access';
 import { ComponentStatus, DotLanguage, FeaturedFlags } from '@dotcms/dotcms-models';
 import { createFakeContentlet, createFakeRelationshipField } from '@dotcms/utils-testing';
@@ -66,6 +67,14 @@ describe('RelationshipFieldStore', () => {
             }),
             mockProvider(DotEditContentService, {
                 getContentById: jest.fn().mockReturnValue(of({}))
+            }),
+            // `withFlags` batch-fetches the side-panel flag on init.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest
+                    .fn()
+                    .mockReturnValue(
+                        of({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: false })
+                    )
             })
         ]
     });
@@ -832,6 +841,14 @@ describe('RelationshipFieldStore - Instance Isolation', () => {
         }),
         mockProvider(DotEditContentService, {
             getContentById: jest.fn().mockReturnValue(of({}))
+        }),
+        // `withFlags` batch-fetches the side-panel flag on init.
+        mockProvider(DotPropertiesService, {
+            getFeatureFlags: jest
+                .fn()
+                .mockReturnValue(
+                    of({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: false })
+                )
         })
     ];
 
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.ts
index cffdd40a98f2..0794bf7914a6 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/store/relationship-field.store.ts
@@ -14,8 +14,10 @@ import {
     DotCMSContentlet,
     DotCMSContentType,
     DotCMSContentTypeField,
-    DotLanguage
+    DotLanguage,
+    FeaturedFlags
 } from '@dotcms/dotcms-models';
+import { withFlags } from '@dotcms/store';
 
 import { RelationshipFieldService } from './relationship-field.service';
 
@@ -72,6 +74,9 @@ const initialState: RelationshipFieldState = {
  */
 export const RelationshipFieldStore = signalStore(
     withState(initialState),
+    // Side-panel feature flag, batch-fetched once on init and exposed as `flags()`. The component
+    // reads it when creating related content to choose the slide-in panel vs. the centered dialog.
+    withFlags([FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL] as const),
     withComputed((state) => ({
         /**
          * Computes the total number of pages based on the number of items and the rows per page.
diff --git a/core-web/libs/edit-content/src/lib/models/dot-edit-content-dialog.interface.ts b/core-web/libs/edit-content/src/lib/models/dot-edit-content-dialog.interface.ts
index 6cab0a553655..ee21ec92d72e 100644
--- a/core-web/libs/edit-content/src/lib/models/dot-edit-content-dialog.interface.ts
+++ b/core-web/libs/edit-content/src/lib/models/dot-edit-content-dialog.interface.ts
@@ -19,11 +19,30 @@ export interface EditContentDialogData {
      */
     contentletInode?: string;
 
+    /**
+     * For edit content: the stable identifier of the content (does not change across saves/
+     * versions, unlike the inode). Used to build a shareable URL that reopens this content.
+     */
+    identifier?: string;
+
     /**
      * Depth for loading existing content (defaults to TWO)
      */
     depth?: number;
 
+    /**
+     * Optional header label for the side panel (e.g. the content title when editing, or the
+     * content type name when creating). Shown in the panel header; ignored by the dialog.
+     */
+    title?: string;
+
+    /**
+     * For new content: pre-fills a Host-or-Folder field with this `hostname/path`, so content
+     * created from a folder context (e.g. Content Drive) lands in that folder. Mirrors the
+     * `folderPath` query param the full-screen editor reads.
+     */
+    folderPath?: string;
+
     /**
      * Optional relationship information when creating content for relationships
      */
diff --git a/core-web/libs/edit-content/src/lib/services/dot-side-panel-nav.service.spec.ts b/core-web/libs/edit-content/src/lib/services/dot-side-panel-nav.service.spec.ts
new file mode 100644
index 000000000000..5e30f30934b7
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/services/dot-side-panel-nav.service.spec.ts
@@ -0,0 +1,134 @@
+import { createServiceFactory, mockProvider, SpectatorService } from '@openng/spectator/jest';
+
+import { GlobalStore } from '@dotcms/store';
+
+import { DotSidePanelNavController } from './dot-side-panel-nav.service';
+
+const LS_KEY = 'dot-edit-content-side-panel-prev-nav-collapsed';
+
+describe('DotSidePanelNavController', () => {
+    let spectator: SpectatorService<DotSidePanelNavController>;
+    let service: DotSidePanelNavController;
+    let globalStore: {
+        isNavigationCollapsed: jest.Mock;
+        collapseNavigation: jest.Mock;
+        expandNavigation: jest.Mock;
+    };
+
+    const createService = createServiceFactory({
+        service: DotSidePanelNavController,
+        providers: [
+            mockProvider(GlobalStore, {
+                isNavigationCollapsed: jest.fn().mockReturnValue(false),
+                collapseNavigation: jest.fn(),
+                expandNavigation: jest.fn()
+            })
+        ]
+    });
+
+    const setViewportWidth = (width: number) =>
+        Object.defineProperty(window, 'innerWidth', { value: width, configurable: true });
+
+    /** Simulate a wide viewport (>= threshold → no collapse). */
+    const setWideViewport = () => setViewportWidth(1920);
+
+    beforeEach(() => {
+        // mockProvider's jest.fn()s are shared across tests, so call counts (and any
+        // per-test mockReturnValue override) would leak. Clear counts, then re-assert the default.
+        jest.clearAllMocks();
+        sessionStorage.clear();
+        // Narrow viewport by default so the collapse behavior is active for these tests.
+        setViewportWidth(800);
+        spectator = createService();
+        service = spectator.service;
+        globalStore = spectator.inject(GlobalStore) as unknown as typeof globalStore;
+        globalStore.isNavigationCollapsed.mockReturnValue(false);
+    });
+
+    // Distinct tokens standing in for panel component instances.
+    const outer = {};
+    const inner = {};
+
+    it('collapses an expanded nav on open and restores it on close', () => {
+        service.acquire(outer);
+
+        expect(globalStore.collapseNavigation).toHaveBeenCalledTimes(1);
+        expect(sessionStorage.getItem(LS_KEY)).toBe('false');
+
+        service.release(outer);
+
+        expect(globalStore.expandNavigation).toHaveBeenCalledTimes(1);
+        expect(sessionStorage.getItem(LS_KEY)).toBeNull();
+    });
+
+    it('keeps an already-collapsed nav collapsed (no collapse, no restore)', () => {
+        globalStore.isNavigationCollapsed.mockReturnValue(true);
+
+        service.acquire(outer);
+        expect(globalStore.collapseNavigation).not.toHaveBeenCalled();
+        expect(sessionStorage.getItem(LS_KEY)).toBe('true');
+
+        service.release(outer);
+        expect(globalStore.expandNavigation).not.toHaveBeenCalled();
+    });
+
+    it('ref-counts stacked panels: collapses once, restores only when the last closes', () => {
+        service.acquire(outer);
+        service.acquire(inner); // stacked
+
+        expect(globalStore.collapseNavigation).toHaveBeenCalledTimes(1);
+
+        service.release(inner); // inner closes — nav must stay collapsed
+        expect(globalStore.expandNavigation).not.toHaveBeenCalled();
+
+        service.release(outer); // outer closes — now restore
+        expect(globalStore.expandNavigation).toHaveBeenCalledTimes(1);
+    });
+
+    it('reports only the frontmost (top-of-stack) panel as top', () => {
+        expect(service.isTop(outer)).toBe(false); // nothing open yet
+
+        service.acquire(outer);
+        expect(service.isTop(outer)).toBe(true);
+
+        service.acquire(inner); // stacked on top
+        expect(service.isTop(inner)).toBe(true);
+        expect(service.isTop(outer)).toBe(false); // now beneath
+
+        service.release(inner); // top closes — outer is frontmost again
+        expect(service.isTop(outer)).toBe(true);
+
+        service.release(outer);
+        expect(service.isTop(outer)).toBe(false);
+    });
+
+    it('does nothing on a wide viewport (collapse only applies to small screens)', () => {
+        setWideViewport();
+
+        service.acquire(outer);
+        expect(globalStore.collapseNavigation).not.toHaveBeenCalled();
+        expect(sessionStorage.getItem(LS_KEY)).toBeNull();
+
+        service.release(outer);
+        expect(globalStore.expandNavigation).not.toHaveBeenCalled();
+    });
+
+    it('does not overwrite the persisted pre-panel state on a refresh with a panel open', () => {
+        // Simulate a refresh: LS already holds the original (expanded) pre-panel state, and the nav
+        // is currently collapsed (from before the refresh).
+        sessionStorage.setItem(LS_KEY, 'false');
+        globalStore.isNavigationCollapsed.mockReturnValue(true);
+
+        service.acquire(outer);
+
+        // Did not re-capture (still 'false' = was expanded) and did not collapse again.
+        expect(sessionStorage.getItem(LS_KEY)).toBe('false');
+        expect(globalStore.collapseNavigation).not.toHaveBeenCalled();
+
+        service.release(outer);
+
+        // Restores to the original expanded state.
+        expect(globalStore.expandNavigation).toHaveBeenCalledTimes(1);
+        expect(sessionStorage.getItem(LS_KEY)).toBeNull();
+    });
+});
diff --git a/core-web/libs/edit-content/src/lib/services/dot-side-panel-nav.service.ts b/core-web/libs/edit-content/src/lib/services/dot-side-panel-nav.service.ts
new file mode 100644
index 000000000000..cf0bca0453ac
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/services/dot-side-panel-nav.service.ts
@@ -0,0 +1,116 @@
+import { inject, Injectable } from '@angular/core';
+
+import { GlobalStore } from '@dotcms/store';
+
+/**
+ * sessionStorage key remembering the main navigation's collapsed state from BEFORE the first side
+ * panel opened, so it can be restored when the last panel closes. `sessionStorage` (not
+ * `localStorage`) on purpose: it survives an in-page refresh while a panel is open (e.g. a shared
+ * `?editContent=` link, same tab), but is cleared for a genuinely new session — so a key left
+ * behind by a tab that closed/crashed before `release()` could clear it self-clears instead of
+ * making the next session wrongly expand a nav the user had chosen to keep collapsed.
+ */
+const PREV_NAV_COLLAPSED_KEY = 'dot-edit-content-side-panel-prev-nav-collapsed';
+
+function readPrevNavCollapsed(): boolean | null {
+    try {
+        const raw = sessionStorage.getItem(PREV_NAV_COLLAPSED_KEY);
+
+        return raw === null ? null : raw === 'true';
+    } catch {
+        return null;
+    }
+}
+
+function writePrevNavCollapsed(collapsed: boolean): void {
+    try {
+        sessionStorage.setItem(PREV_NAV_COLLAPSED_KEY, String(collapsed));
+    } catch {
+        // best-effort: storage failures must not break the panel.
+    }
+}
+
+function clearPrevNavCollapsed(): void {
+    try {
+        sessionStorage.removeItem(PREV_NAV_COLLAPSED_KEY);
+    } catch {
+        // best-effort.
+    }
+}
+
+/** Collapse the navs for the side panel when the viewport is narrower than this (px). */
+const COLLAPSE_MAX_WIDTH = 1800;
+
+/**
+ * Collapses the main navigation (logo + menus) while an Edit Content side panel is open, and
+ * restores it when the last one closes — but only if it was expanded to begin with (a nav the user
+ * had already collapsed stays collapsed), and only on small viewports ({@link shouldCollapse}).
+ *
+ * Ref-counted because the relationship field can stack a second panel on top: the nav must stay
+ * collapsed until EVERY panel has closed, not just the top one. The pre-panel state is kept in
+ * sessionStorage so it is remembered across a refresh that happens while a panel is open, but not
+ * leaked into a new session (see {@link PREV_NAV_COLLAPSED_KEY}).
+ */
+@Injectable({ providedIn: 'root' })
+export class DotSidePanelNavController {
+    readonly #globalStore = inject(GlobalStore);
+
+    /**
+     * Open panels in open order; the last entry is the frontmost (top-of-stack) panel. An ordered
+     * stack rather than a bare counter so {@link isTop} can tell which panel a document-level ESC
+     * should close (only the frontmost, not the whole stack).
+     */
+    #stack: object[] = [];
+
+    /** Whether the viewport is narrow enough ({@link COLLAPSE_MAX_WIDTH}) to collapse the navs. */
+    shouldCollapse(): boolean {
+        return window.innerWidth < COLLAPSE_MAX_WIDTH;
+    }
+
+    /**
+     * Call when a side panel opens, passing the panel as `token`. On the first open — and only on a
+     * small enough viewport ({@link shouldCollapse}) — collapses the nav, remembering its previous
+     * state. On wider screens it does nothing (so `release` also becomes a no-op, since no state is
+     * saved).
+     */
+    acquire(token: object): void {
+        if (this.#stack.length === 0 && this.shouldCollapse()) {
+            // Write-if-absent: a refresh while a panel is open must not overwrite the ORIGINAL
+            // pre-panel state with the (already-collapsed) current one.
+            if (readPrevNavCollapsed() === null) {
+                writePrevNavCollapsed(this.#globalStore.isNavigationCollapsed());
+            }
+
+            if (!this.#globalStore.isNavigationCollapsed()) {
+                this.#globalStore.collapseNavigation();
+            }
+        }
+
+        this.#stack.push(token);
+    }
+
+    /** Call when a side panel closes, passing the same `token`. Restores the nav once the last panel has closed. */
+    release(token: object): void {
+        const index = this.#stack.lastIndexOf(token);
+        if (index > -1) {
+            this.#stack.splice(index, 1);
+        }
+
+        if (this.#stack.length === 0) {
+            // Restore only if the nav was expanded before the panel collapsed it.
+            if (readPrevNavCollapsed() === false) {
+                this.#globalStore.expandNavigation();
+            }
+
+            clearPrevNavCollapsed();
+        }
+    }
+
+    /**
+     * Whether `token` is the frontmost (top-of-stack) open panel — the only one a document-level ESC
+     * should close. Returns `false` for panels beneath it, so a single ESC closes one panel at a time.
+     */
+    isTop(token: object): boolean {
+        return this.#stack.length > 0 && this.#stack[this.#stack.length - 1] === token;
+    }
+}
diff --git a/core-web/libs/edit-content/src/lib/services/host/overlay-edit-content-host.ts b/core-web/libs/edit-content/src/lib/services/host/overlay-edit-content-host.ts
index 2e5362332049..2c5b248a22f8 100644
--- a/core-web/libs/edit-content/src/lib/services/host/overlay-edit-content-host.ts
+++ b/core-web/libs/edit-content/src/lib/services/host/overlay-edit-content-host.ts
@@ -64,7 +64,8 @@ export class OverlayEditContentHost implements EditContentHost, OnDestroy {
 
         return {
             inode: data?.contentletInode,
-            contentTypeId: data?.contentTypeId
+            contentTypeId: data?.contentTypeId,
+            folderPath: data?.folderPath
         };
     }
 
diff --git a/core-web/libs/global-store/src/index.ts b/core-web/libs/global-store/src/index.ts
index fd334876c105..e4de85f3b388 100644
--- a/core-web/libs/global-store/src/index.ts
+++ b/core-web/libs/global-store/src/index.ts
@@ -1,2 +1,3 @@
 export * from './lib/store';
+export * from './lib/features/flags/with-flags.feature';
 export { WebSocketStatus } from '@dotcms/data-access';
diff --git a/core-web/libs/global-store/src/lib/features/flags/with-flags.feature.spec.ts b/core-web/libs/global-store/src/lib/features/flags/with-flags.feature.spec.ts
new file mode 100644
index 000000000000..5f193220ab4d
--- /dev/null
+++ b/core-web/libs/global-store/src/lib/features/flags/with-flags.feature.spec.ts
@@ -0,0 +1,101 @@
+import { describe } from '@jest/globals';
+import { signalStore } from '@ngrx/signals';
+import { createServiceFactory, SpectatorService } from '@openng/spectator/jest';
+import { of, throwError } from 'rxjs';
+
+import { DotPropertiesService } from '@dotcms/data-access';
+import { FEATURE_FLAG_NOT_FOUND, FeaturedFlags } from '@dotcms/dotcms-models';
+
+import { withFlags } from './with-flags.feature';
+
+const FLAG = FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE;
+const MOCK_FLAGS = [FLAG];
+
+// Throwaway host store — withFlags declares no host-state constraint, so it composes bare.
+const flagsStore = signalStore(withFlags(MOCK_FLAGS));
+
+describe('withFlags', () => {
+    describe('onInit', () => {
+        let spectator: SpectatorService<InstanceType<typeof flagsStore>>;
+        let store: InstanceType<typeof flagsStore>;
+
+        const createService = createServiceFactory({
+            service: flagsStore,
+            providers: [
+                {
+                    provide: DotPropertiesService,
+                    useValue: {
+                        getFeatureFlags: jest.fn().mockReturnValue(of({ [FLAG]: true }))
+                    }
+                }
+            ]
+        });
+
+        beforeEach(() => {
+            spectator = createService();
+            store = spectator.service;
+        });
+
+        it('calls getFeatureFlags with the requested flags', () => {
+            expect(spectator.inject(DotPropertiesService).getFeatureFlags).toHaveBeenCalledWith(
+                MOCK_FLAGS
+            );
+        });
+
+        it('patches the resolved flags into state', () => {
+            expect(store.flags()).toEqual({ [FLAG]: true });
+        });
+    });
+
+    describe('normalization', () => {
+        const propertiesServiceMock = { getFeatureFlags: jest.fn() };
+        const createService = createServiceFactory({
+            service: flagsStore,
+            providers: [{ provide: DotPropertiesService, useValue: propertiesServiceMock }]
+        });
+
+        it('normalizes NOT_FOUND to true (flag not configured on server → enabled by default)', () => {
+            propertiesServiceMock.getFeatureFlags.mockReturnValue(
+                of({ [FLAG]: FEATURE_FLAG_NOT_FOUND })
+            );
+            expect(createService().service.flags()[FLAG]).toBe(true);
+        });
+
+        it('keeps boolean true as true', () => {
+            propertiesServiceMock.getFeatureFlags.mockReturnValue(of({ [FLAG]: true }));
+            expect(createService().service.flags()[FLAG]).toBe(true);
+        });
+
+        it('keeps boolean false as false', () => {
+            propertiesServiceMock.getFeatureFlags.mockReturnValue(of({ [FLAG]: false }));
+            expect(createService().service.flags()[FLAG]).toBe(false);
+        });
+
+        it('normalizes any unknown string value to false', () => {
+            propertiesServiceMock.getFeatureFlags.mockReturnValue(
+                of({ [FLAG]: 'FF_NOT_AVAILABLE' })
+            );
+            expect(createService().service.flags()[FLAG]).toBe(false);
+        });
+    });
+
+    describe('error handling', () => {
+        const propertiesServiceMock = { getFeatureFlags: jest.fn() };
+        const createService = createServiceFactory({
+            service: flagsStore,
+            providers: [{ provide: DotPropertiesService, useValue: propertiesServiceMock }]
+        });
+
+        it('degrades to no enabled flags when the config read fails (never throws)', () => {
+            propertiesServiceMock.getFeatureFlags.mockReturnValue(
+                throwError(() => new Error('config unavailable'))
+            );
+
+            const s = createService();
+
+            expect(() => s.service.flags()).not.toThrow();
+            expect(s.service.flags()).toEqual({});
+            expect(s.service.flags()[FLAG]).toBeUndefined();
+        });
+    });
+});
diff --git a/core-web/libs/global-store/src/lib/features/flags/with-flags.feature.ts b/core-web/libs/global-store/src/lib/features/flags/with-flags.feature.ts
new file mode 100644
index 000000000000..84c872913566
--- /dev/null
+++ b/core-web/libs/global-store/src/lib/features/flags/with-flags.feature.ts
@@ -0,0 +1,52 @@
+import { patchState, signalStoreFeature, withHooks, withState } from '@ngrx/signals';
+import { of } from 'rxjs';
+
+import { inject } from '@angular/core';
+
+import { catchError, map, take } from 'rxjs/operators';
+
+import { DotPropertiesService } from '@dotcms/data-access';
+import { FEATURE_FLAG_NOT_FOUND, FeaturedFlags } from '@dotcms/dotcms-models';
+
+/**
+ * Resolved feature-flag map: each requested flag mapped to whether it is enabled. Generic over the
+ * flag keys so consumers get a signal typed to exactly the flags they asked for — pass the flag
+ * list `as const` to narrow `F` (otherwise it widens to the whole `FeaturedFlags` enum).
+ */
+export type DotFeatureFlags<F extends FeaturedFlags = FeaturedFlags> = Partial<Record<F, boolean>>;
+
+/**
+ * Generic signal-store feature that batch-fetches the given feature flags once on init and exposes
+ * them as a typed `flags()` signal. Composes into ANY signal store — it declares no host-state
+ * constraint because it only reads/writes its own `flags` slice.
+ *
+ * Values come from {@link DotPropertiesService.getFeatureFlags}: a flag is enabled when the server
+ * returns `true` or `FEATURE_FLAG_NOT_FOUND` (flag absent → enabled by default, mirroring the
+ * single-flag `getFeatureFlag()` default); any other value, including explicit `false`, disables
+ * it. A failed config read degrades every flag to `false` (safe/off) instead of throwing.
+ */
+export function withFlags<F extends FeaturedFlags>(flags: readonly F[]) {
+    return signalStoreFeature(
+        withState<{ flags: DotFeatureFlags<F> }>({ flags: {} }),
+        withHooks({
+            onInit: (store) => {
+                inject(DotPropertiesService)
+                    .getFeatureFlags([...flags])
+                    .pipe(
+                        take(1),
+                        map(
+                            (rawFlags) =>
+                                Object.fromEntries(
+                                    Object.entries(rawFlags).map(([key, value]) => [
+                                        key,
+                                        value === true || value === FEATURE_FLAG_NOT_FOUND
+                                    ])
+                                ) as DotFeatureFlags<F>
+                        ),
+                        catchError(() => of({} as DotFeatureFlags<F>))
+                    )
+                    .subscribe((flags) => patchState(store, { flags }));
+            }
+        })
+    );
+}
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.spec.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.spec.ts
index 9506a52396a8..d6e2c70b24a8 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.spec.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.spec.ts
@@ -60,6 +60,10 @@ describe('DotContentDriveToolbarComponent', () => {
         providers: [
             mockProvider(DotContentDriveStore, {
                 isTreeExpanded: isTreeExpandedSignal,
+                // The toolbar now renders from the visual (panel-aware) computed; reusing the same
+                // signal keeps these tests driving one value, since they don't need to distinguish
+                // the real preference from a panel-forced override.
+                isTreeVisuallyExpanded: isTreeExpandedSignal,
                 setIsTreeExpanded: jest.fn(),
                 getFilterValue: jest.fn().mockReturnValue(undefined),
                 patchFilters: jest.fn(),
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.ts
index bec154f2c523..0a7f075d2950 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/dot-content-drive-toolbar.component.ts
@@ -231,7 +231,8 @@ export class DotContentDriveToolbarComponent {
         });
     }
 
-    readonly $treeExpanded = this.#store.isTreeExpanded;
+    /** The tree's VISUAL expanded state — see `isTreeVisuallyExpanded` on the store. */
+    readonly $treeExpanded = this.#store.isTreeVisuallyExpanded;
     readonly $showWorkflowActions = computed(() => !!this.#store.selectedItems().length);
     readonly $hasFilters = computed(() => Object.keys(this.#store.filters()).length > 0);
 
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.html b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.html
index 9f2ae435c79a..260b6b242005 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.html
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.html
@@ -144,3 +144,25 @@
 
 <!-- Is pending to add the accept attribute. This will be come from the backend in the future. -->
 <input type="file" (change)="onFileChange($event)" #fileInput hidden />
+
+<!-- Edit Content side panel: opens the new editor over Content Drive instead of navigating away.
+     `@defer` splits the editor (and its Block Editor dependency chain) out of this portlet's chunk,
+     fetched only on the first open. The inner `@if` still mounts/destroys a fresh editor on every
+     open/close — `@defer`'s `when` trigger only gates the one-time chunk load, it does not toggle
+     like `@if` (once resolved, the block stays resolved for the rest of this shell's lifetime). -->
+@defer (when $editPanelRequest()) {
+    @if ($editPanelRequest(); as data) {
+        <dot-edit-content-side-panel
+            #sidePanelRef
+            data-testId="edit-content-side-panel"
+            [data]="data"
+            (saved)="onEditPanelSaved()"
+            (closed)="onEditPanelClosed()" />
+    }
+} @loading {
+    <div
+        class="fixed right-4 bottom-4 z-10000 rounded-full bg-white p-3 shadow-lg"
+        data-testid="edit-content-side-panel-loading">
+        <p-progressSpinner styleClass="h-8! w-8!" strokeWidth="4" ariaLabel="loading editor" />
+    </div>
+}
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.spec.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.spec.ts
index e7e55d414754..123470f5196f 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.spec.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.spec.ts
@@ -10,6 +10,7 @@ import { of, throwError } from 'rxjs';
 
 import { Location } from '@angular/common';
 import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { signal, WritableSignal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -32,7 +33,8 @@ import {
     DotLanguagesService,
     DotFolderService,
     DotUploadFileService,
-    DotMessageService
+    DotMessageService,
+    DotPropertiesService
 } from '@dotcms/data-access';
 import { LoggerService, StringUtils } from '@dotcms/dotcms-js';
 import {
@@ -41,6 +43,11 @@ import {
     DotContentDriveFolder,
     DotContentDriveItem
 } from '@dotcms/dotcms-models';
+import {
+    DotEditContentSidePanelComponent,
+    DotSidePanelNavController,
+    EditContentDialogData
+} from '@dotcms/edit-content';
 import {
     DotFolderListViewComponent,
     DotFolderTreeNodeData,
@@ -76,6 +83,10 @@ import {
 import { DotContentDriveNavigationService } from '../shared/services';
 import { DotContentDriveStore } from '../store/dot-content-drive.store';
 
+// Backs the navigation service mock's readonly `$editPanelRequest`. Typed (not cast) so tests get
+// a compile-checked payload; reset in the shared beforeEach for isolation.
+const editPanelRequestSignal: WritableSignal<EditContentDialogData | null> = signal(null);
+
 describe('DotContentDriveShellComponent', () => {
     let spectator: Spectator<DotContentDriveShellComponent>;
     let store: jest.Mocked<InstanceType<typeof DotContentDriveStore>>;
@@ -117,11 +128,23 @@ describe('DotContentDriveShellComponent', () => {
                 uploadFileByBaseType: jest.fn().mockReturnValue(of({}))
             }),
             provideHttpClient(),
+            // The panel is behind `@defer`; once it resolves, it mounts the real editor chain,
+            // which can make HTTP calls no test here mocks explicitly (e.g. languages). Without
+            // this, an unmocked call attempts a real network fetch and fails the test.
+            provideHttpClientTesting(),
+            // The store composes withFlags, which fetches feature flags on init; stub it.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest.fn().mockReturnValue(of({}))
+            }),
             mockProvider(DotMessageService, {
                 get: jest.fn().mockImplementation((key: string) => key)
             }),
             mockProvider(DotContentDriveNavigationService, {
-                editContent: jest.fn()
+                editContent: jest.fn(),
+                createContent: jest.fn(),
+                closeEditPanel: jest.fn(),
+                openEditByIdentifier: jest.fn(),
+                $editPanelRequest: editPanelRequestSignal
             }),
             LoggerService,
             StringUtils,
@@ -132,7 +155,12 @@ describe('DotContentDriveShellComponent', () => {
             mockProvider(DotCurrentUserService, {
                 getCurrentUser: jest.fn().mockReturnValue(of({}))
             }),
-            mockProvider(DotHttpErrorManagerService)
+            mockProvider(DotHttpErrorManagerService),
+            mockProvider(DotSidePanelNavController, {
+                shouldCollapse: jest.fn().mockReturnValue(false),
+                acquire: jest.fn(),
+                release: jest.fn()
+            })
         ],
         componentProviders: [DotContentDriveStore],
         detectChanges: false
@@ -143,6 +171,7 @@ describe('DotContentDriveShellComponent', () => {
         statusSignal = signal(DotContentDriveStatus.LOADING);
         dialogSignal = signal<DotContentDriveDialog | undefined>(undefined);
         showInListFieldsSignal = signal<DotCMSContentTypeField[]>([]);
+        editPanelRequestSignal.set(null);
 
         spectator = createComponent({
             providers: [
@@ -157,6 +186,8 @@ describe('DotContentDriveShellComponent', () => {
                     items: jest.fn().mockReturnValue(MOCK_ITEMS),
                     pagination: jest.fn().mockReturnValue(DEFAULT_PAGINATION),
                     setIsTreeExpanded: jest.fn(),
+                    isTreeVisuallyExpanded: jest.fn().mockReturnValue(false),
+                    setTreeForceCollapsed: jest.fn(),
                     path: jest.fn().mockReturnValue('/test/path'),
                     filters: filtersSignal,
                     status: statusSignal,
@@ -188,6 +219,7 @@ describe('DotContentDriveShellComponent', () => {
                     cleanDragItems: jest.fn(),
                     dragItems: jest.fn().mockReturnValue({ folders: [], contentlets: [] }),
                     loadItems: jest.fn(),
+                    reloadContentDrive: jest.fn(),
                     setPath: jest.fn(),
                     setShowAddToBundle: jest.fn(),
                     userSearchableFields: jest.fn().mockReturnValue([]),
@@ -207,7 +239,12 @@ describe('DotContentDriveShellComponent', () => {
                     )
                 }),
                 mockProvider(Location, {
-                    go: jest.fn()
+                    go: jest.fn(),
+                    replaceState: jest.fn(),
+                    path: jest.fn().mockReturnValue(''),
+                    // Return a real subscription so the shell's popstate listener can be captured
+                    // and torn down without throwing on destroy.
+                    subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
                 }),
                 mockProvider(DotContentTypeService, {
                     getAllContentTypes: jest.fn().mockReturnValue(of(MOCK_BASE_TYPES)),
@@ -261,7 +298,8 @@ describe('DotContentDriveShellComponent', () => {
                 queryParams: {
                     isTreeExpanded: 'false',
                     path: '/another/path',
-                    filters: 'contentType:Blog;baseType:1,2,3'
+                    filters: 'contentType:Blog;baseType:1,2,3',
+                    editContent: null
                 },
                 queryParamsHandling: 'merge'
             });
@@ -282,7 +320,8 @@ describe('DotContentDriveShellComponent', () => {
                 queryParams: {
                     isTreeExpanded: 'false',
                     path: '/another/path',
-                    filters: 'contentType:Blog;baseType:1,2,3'
+                    filters: 'contentType:Blog;baseType:1,2,3',
+                    editContent: null
                 },
                 queryParamsHandling: 'merge'
             });
@@ -297,7 +336,8 @@ describe('DotContentDriveShellComponent', () => {
                 queryParams: {
                     isTreeExpanded: 'false',
                     path: '/another/path',
-                    filters: null // With merge, null removes the param
+                    filters: null, // With merge, null removes the param
+                    editContent: null
                 },
                 queryParamsHandling: 'merge'
             });
@@ -2162,6 +2202,201 @@ describe('DotContentDriveShellComponent', () => {
         });
     });
 
+    describe('Edit Content side panel', () => {
+        let sidePanelNav: SpyObject<DotSidePanelNavController>;
+
+        // Drives the module-scope signal backing the nav service mock's readonly `$editPanelRequest`.
+        // Typed at declaration, so no cast is needed and payloads are compile-checked.
+        const setPanelRequest = (value: EditContentDialogData | null) =>
+            editPanelRequestSignal.set(value);
+
+        const EDIT_REQUEST: EditContentDialogData = {
+            mode: 'edit',
+            contentletInode: 'inode-1',
+            identifier: 'id-1',
+            title: 'My content'
+        };
+
+        beforeEach(() => {
+            sidePanelNav = spectator.inject(DotSidePanelNavController);
+        });
+
+        it('delegates the panel `closed` output to the navigation service', async () => {
+            setPanelRequest(EDIT_REQUEST);
+            spectator.detectChanges();
+            // The panel is behind `@defer`; its dynamic import resolves as a microtask, so the
+            // element isn't in the DOM until the fixture settles.
+            await spectator.fixture.whenStable();
+            spectator.detectChanges();
+
+            // Drive the real template binding `(closed)="onEditPanelClosed()"`, not the handler
+            // directly — so a removed/renamed binding would fail the test.
+            spectator.triggerEventHandler('dot-edit-content-side-panel', 'closed', undefined);
+
+            expect(navigationService.closeEditPanel).toHaveBeenCalledTimes(1);
+        });
+
+        it('reloads the list when the panel `saved` output fires', async () => {
+            setPanelRequest(EDIT_REQUEST);
+            spectator.detectChanges();
+            await spectator.fixture.whenStable();
+            spectator.detectChanges();
+
+            spectator.triggerEventHandler('dot-edit-content-side-panel', 'saved', undefined);
+
+            expect(store.reloadContentDrive).toHaveBeenCalledTimes(1);
+        });
+
+        it('reflects an open edit panel as an editContent identifier in the URL', () => {
+            setPanelRequest(EDIT_REQUEST);
+            spectator.flushEffects();
+
+            expect(router.createUrlTree).toHaveBeenCalledWith(
+                [],
+                expect.objectContaining({
+                    queryParams: expect.objectContaining({ editContent: 'id-1' })
+                })
+            );
+        });
+
+        it('reflects an open new-mode panel as editContent=new (push), so Back has an entry to pop (AC8)', () => {
+            setPanelRequest({ mode: 'new', contentTypeId: 'ct-1', title: 'New content' });
+            spectator.flushEffects();
+
+            expect(router.createUrlTree).toHaveBeenCalledWith(
+                [],
+                expect.objectContaining({
+                    queryParams: expect.objectContaining({ editContent: 'new' })
+                })
+            );
+            expect(location.go).toHaveBeenCalled();
+        });
+
+        it('uses replaceState (not go) when the panel closes, so Back cannot resurrect the removed param', () => {
+            setPanelRequest(EDIT_REQUEST);
+            spectator.flushEffects();
+            (location.go as jest.Mock).mockClear();
+            (location.replaceState as jest.Mock).mockClear();
+
+            setPanelRequest(null);
+            spectator.flushEffects();
+
+            expect(location.replaceState).toHaveBeenCalledTimes(1);
+            expect(location.go).not.toHaveBeenCalled();
+        });
+
+        describe('browser Back (popstate)', () => {
+            const getPopstateHandler = () =>
+                (location.subscribe as jest.Mock).mock.calls[0][0] as (event: {
+                    url: string;
+                }) => void;
+
+            it('routes Back through the panel close guard (does not discard silently)', () => {
+                const requestClose = jest.fn();
+                jest.spyOn(spectator.component, '$sidePanel').mockReturnValue({
+                    requestClose
+                } as unknown as DotEditContentSidePanelComponent);
+                setPanelRequest(EDIT_REQUEST);
+
+                getPopstateHandler()({ url: '/c/content-drive?path=/foo' });
+
+                // Routes through the guard instead of tearing the panel down directly.
+                expect(requestClose).toHaveBeenCalledTimes(1);
+                expect(navigationService.closeEditPanel).not.toHaveBeenCalled();
+                // Restores the param so the URL matches the still-open panel while the guard decides.
+                expect(location.replaceState).toHaveBeenCalledTimes(1);
+            });
+
+            it('keeps the panel open when Back preserves the same editContent param', () => {
+                const requestClose = jest.fn();
+                jest.spyOn(spectator.component, '$sidePanel').mockReturnValue({
+                    requestClose
+                } as unknown as DotEditContentSidePanelComponent);
+                setPanelRequest(EDIT_REQUEST);
+
+                getPopstateHandler()({ url: '/c/content-drive?editContent=id-1' });
+
+                expect(requestClose).not.toHaveBeenCalled();
+                expect(navigationService.closeEditPanel).not.toHaveBeenCalled();
+            });
+
+            it('routes Back through the guard for an open new-mode panel too (AC8)', () => {
+                const requestClose = jest.fn();
+                jest.spyOn(spectator.component, '$sidePanel').mockReturnValue({
+                    requestClose
+                } as unknown as DotEditContentSidePanelComponent);
+                setPanelRequest({ mode: 'new', contentTypeId: 'ct-1', title: 'New content' });
+
+                // Back removed the `new` marker entirely — the popstate handler must still close
+                // the create panel through the guard, not leave it open with a stale URL.
+                getPopstateHandler()({ url: '/c/content-drive?path=/foo' });
+
+                expect(requestClose).toHaveBeenCalledTimes(1);
+                expect(navigationService.closeEditPanel).not.toHaveBeenCalled();
+                expect(location.replaceState).toHaveBeenCalledTimes(1);
+            });
+
+            it('keeps a new-mode panel open when Back preserves the editContent=new marker', () => {
+                const requestClose = jest.fn();
+                jest.spyOn(spectator.component, '$sidePanel').mockReturnValue({
+                    requestClose
+                } as unknown as DotEditContentSidePanelComponent);
+                setPanelRequest({ mode: 'new', contentTypeId: 'ct-1', title: 'New content' });
+
+                getPopstateHandler()({ url: '/c/content-drive?editContent=new' });
+
+                expect(requestClose).not.toHaveBeenCalled();
+                expect(navigationService.closeEditPanel).not.toHaveBeenCalled();
+            });
+        });
+
+        describe('folder tree force-collapse (transient, decoupled from the real preference)', () => {
+            it('forces the tree visually collapsed while the panel is open on narrow viewports, and clears the override on close', () => {
+                sidePanelNav.shouldCollapse.mockReturnValue(true);
+                spectator.flushEffects();
+
+                setPanelRequest(EDIT_REQUEST);
+                spectator.flushEffects();
+                expect(store.setTreeForceCollapsed).toHaveBeenCalledWith(true);
+
+                setPanelRequest(null);
+                spectator.flushEffects();
+                expect(store.setTreeForceCollapsed).toHaveBeenCalledWith(false);
+            });
+
+            it('does not force a collapse on wide viewports', () => {
+                sidePanelNav.shouldCollapse.mockReturnValue(false);
+                spectator.flushEffects();
+
+                setPanelRequest(EDIT_REQUEST);
+                spectator.flushEffects();
+
+                expect(store.setTreeForceCollapsed).toHaveBeenCalledWith(false);
+            });
+
+            // The whole point of the fix (issue: a panel-forced collapse used to leak into the
+            // real, shareable `isTreeExpanded` preference — see AC on the tree-collapse bug):
+            // the force-collapse override no longer reads `isTreeExpanded()` at all, so it behaves
+            // identically regardless of the user's real preference.
+            it('is independent of the real tree expanded/collapsed preference', () => {
+                store.isTreeExpanded.mockReturnValue(false);
+                sidePanelNav.shouldCollapse.mockReturnValue(true);
+                spectator.flushEffects();
+
+                setPanelRequest(EDIT_REQUEST);
+                spectator.flushEffects();
+                expect(store.setTreeForceCollapsed).toHaveBeenCalledWith(true);
+
+                setPanelRequest(null);
+                spectator.flushEffects();
+                expect(store.setTreeForceCollapsed).toHaveBeenCalledWith(false);
+
+                // Never touches the real preference.
+                expect(store.setIsTreeExpanded).not.toHaveBeenCalled();
+            });
+        });
+    });
+
     describe('extra columns (Show In List)', () => {
         beforeEach(() => spectator.detectChanges());
 
@@ -2234,3 +2469,195 @@ describe('DotContentDriveShellComponent', () => {
         });
     });
 });
+
+/**
+ * Construction-time `?editContent=` deep-link. Own describe + factory so the route param is present
+ * BEFORE the component is constructed — the main describe's shared beforeEach always builds against
+ * {@link MOCK_ROUTE} (no `editContent`), so it cannot express this path.
+ */
+describe('DotContentDriveShellComponent — editContent deep link', () => {
+    // Mutable so both the identifier and the `new` marker cases share one factory.
+    const deepLinkQueryParams: Record<string, string> = {
+        path: '/test/path',
+        filters: 'contentType:Blog;status:published',
+        editContent: 'id-1'
+    };
+    // Held at describe scope so we can clear it before each mount (mockProvider reuses the same fn).
+    const openEditByIdentifier = jest.fn();
+
+    const createComponent = createComponentFactory({
+        component: DotContentDriveShellComponent,
+        providers: [
+            GlobalStore,
+            mockProvider(DotSiteService, {
+                getCurrentSite: jest.fn().mockReturnValue(of(MOCK_SITES[0]))
+            }),
+            mockProvider(DotContentSearchService, {
+                get: jest.fn().mockReturnValue(of(MOCK_SEARCH_RESPONSE))
+            }),
+            mockProvider(ActivatedRoute, {
+                snapshot: { queryParams: deepLinkQueryParams }
+            }),
+            mockProvider(DotSystemConfigService),
+            mockProvider(DotContentTypeService, {
+                getAllContentTypes: jest.fn().mockReturnValue(of(MOCK_BASE_TYPES)),
+                getContentTypes: jest.fn().mockImplementation(() => of([]))
+            }),
+            mockProvider(DotLanguagesService, { get: jest.fn().mockReturnValue(of()) }),
+            mockProvider(DotFolderService, { getFolders: jest.fn().mockReturnValue(of([])) }),
+            mockProvider(DotUploadFileService, {
+                uploadFileByBaseType: jest.fn().mockReturnValue(of({}))
+            }),
+            provideHttpClient(),
+            // The panel is behind `@defer`; once it resolves, it mounts the real editor chain,
+            // which can make HTTP calls no test here mocks explicitly (e.g. languages). Without
+            // this, an unmocked call attempts a real network fetch and fails the test.
+            provideHttpClientTesting(),
+            // The store composes withFlags, which fetches feature flags on init; stub it.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest.fn().mockReturnValue(of({}))
+            }),
+            mockProvider(DotMessageService, {
+                get: jest.fn().mockImplementation((key: string) => key)
+            }),
+            mockProvider(DotContentDriveNavigationService, {
+                editContent: jest.fn(),
+                createContent: jest.fn(),
+                closeEditPanel: jest.fn(),
+                openEditByIdentifier,
+                $editPanelRequest: signal(null)
+            }),
+            LoggerService,
+            StringUtils,
+            mockProvider(AddToBundleService, {
+                getBundles: jest.fn().mockReturnValue(of([])),
+                addToBundle: jest.fn().mockReturnValue(of({}))
+            }),
+            mockProvider(DotCurrentUserService, {
+                getCurrentUser: jest.fn().mockReturnValue(of({}))
+            }),
+            mockProvider(DotHttpErrorManagerService),
+            mockProvider(DotSidePanelNavController, {
+                shouldCollapse: jest.fn().mockReturnValue(false),
+                acquire: jest.fn(),
+                release: jest.fn()
+            })
+        ],
+        componentProviders: [DotContentDriveStore],
+        detectChanges: false
+    });
+
+    beforeEach(() => {
+        openEditByIdentifier.mockClear();
+    });
+
+    /** Mounts with the deps the constructor needs; does not run change detection. */
+    const mountShell = () =>
+        createComponent({
+            providers: [
+                mockProvider(DotContentDriveStore, {
+                    initContentDrive: jest.fn(),
+                    currentSite: jest.fn().mockReturnValue(MOCK_SITES[0]),
+                    isTreeExpanded: jest.fn().mockReturnValue(false),
+                    items: jest.fn().mockReturnValue(MOCK_ITEMS),
+                    pagination: jest.fn().mockReturnValue(DEFAULT_PAGINATION),
+                    path: jest.fn().mockReturnValue('/test/path'),
+                    filters: signal({}),
+                    status: signal(DotContentDriveStatus.LOADING),
+                    sort: jest
+                        .fn()
+                        .mockReturnValue({ field: 'modDate', order: DotContentDriveSortOrder.ASC }),
+                    pages: jest.fn().mockReturnValue([DEFAULT_PAGE]),
+                    selectedItems: jest.fn().mockReturnValue([]),
+                    contextMenu: jest.fn().mockReturnValue(null),
+                    dialog: signal(undefined),
+                    dragItems: jest.fn().mockReturnValue({ folders: [], contentlets: [] }),
+                    userSearchableFields: jest.fn().mockReturnValue([]),
+                    userSearchableActive: jest.fn().mockReturnValue([]),
+                    showInListFields: signal([]),
+                    setIsTreeExpanded: jest.fn(),
+                    isTreeVisuallyExpanded: jest.fn().mockReturnValue(false),
+                    setTreeForceCollapsed: jest.fn(),
+                    removeFilter: jest.fn(),
+                    getFilterValue: jest.fn(),
+                    $request: jest.fn(),
+                    setItems: jest.fn(),
+                    setStatus: jest.fn(),
+                    setPagination: jest.fn(),
+                    setSort: jest.fn(),
+                    setSelectedItems: jest.fn(),
+                    patchFilters: jest.fn(),
+                    setDialog: jest.fn(),
+                    loadFolders: jest.fn(),
+                    loadChildFolders: jest.fn(),
+                    updateFolders: jest.fn(),
+                    folders: jest.fn(),
+                    selectedNode: jest.fn(),
+                    setSelectedNode: jest.fn(),
+                    sidebarLoading: jest.fn(),
+                    closeDialog: jest.fn(),
+                    patchContextMenu: jest.fn(),
+                    resetContextMenu: jest.fn(),
+                    setDragItems: jest.fn(),
+                    cleanDragItems: jest.fn(),
+                    loadItems: jest.fn(),
+                    reloadContentDrive: jest.fn(),
+                    setPath: jest.fn(),
+                    setShowAddToBundle: jest.fn(),
+                    setUserSearchableFields: jest.fn(),
+                    setShowInListFields: jest.fn(),
+                    addUserSearchableField: jest.fn(),
+                    clearUserSearchableFilters: jest.fn()
+                }),
+                mockProvider(Router, {
+                    createUrlTree: jest.fn().mockReturnValue({ toString: () => '' })
+                }),
+                mockProvider(Location, {
+                    go: jest.fn(),
+                    replaceState: jest.fn(),
+                    path: jest.fn().mockReturnValue(''),
+                    subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+                }),
+                mockProvider(DotContentTypeService, {
+                    getAllContentTypes: jest.fn().mockReturnValue(of(MOCK_BASE_TYPES)),
+                    getContentTypes: jest.fn().mockReturnValue(of(MOCK_BASE_TYPES)),
+                    getContentTypesWithPagination: jest.fn().mockReturnValue(
+                        of({
+                            contentTypes: MOCK_BASE_TYPES,
+                            pagination: {
+                                currentPage: MOCK_BASE_TYPES.length,
+                                totalEntries: MOCK_BASE_TYPES.length * 2,
+                                totalPages: 1
+                            }
+                        })
+                    )
+                }),
+                mockProvider(DotWorkflowsActionsService),
+                mockProvider(DotWorkflowActionsFireService, {
+                    bulkFire: jest
+                        .fn()
+                        .mockReturnValue(of({ successCount: 1, skippedCount: 0, fails: [] }))
+                }),
+                mockProvider(DotWorkflowEventHandlerService),
+                mockProvider(MessageService, {
+                    messageObserver: of({}),
+                    clearObserver: of({})
+                }),
+                mockProvider(DotRouterService, { goToEditPage: jest.fn() })
+            ]
+        });
+
+    it('opens the panel by identifier from a shared ?editContent= link on construction', () => {
+        deepLinkQueryParams.editContent = 'id-1';
+        mountShell();
+
+        expect(openEditByIdentifier).toHaveBeenCalledWith('id-1');
+    });
+
+    it('ignores the non-shareable `new` marker on construction', () => {
+        deepLinkQueryParams.editContent = 'new';
+        mountShell();
+
+        expect(openEditByIdentifier).not.toHaveBeenCalled();
+    });
+});
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.ts
index c8d987e315ec..2948f4b11117 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/dot-content-drive-shell/dot-content-drive-shell.component.ts
@@ -6,6 +6,7 @@ import {
     ChangeDetectionStrategy,
     Component,
     computed,
+    DestroyRef,
     effect,
     ElementRef,
     inject,
@@ -13,12 +14,13 @@ import {
     untracked,
     viewChild
 } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { MessageService, SortEvent } from 'primeng/api';
 import { DialogModule } from 'primeng/dialog';
 import { MessageModule } from 'primeng/message';
 import { Popover, PopoverModule } from 'primeng/popover';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { ToastModule } from 'primeng/toast';
 
 import { catchError } from 'rxjs/operators';
@@ -40,6 +42,7 @@ import {
     DotContentDriveItem,
     DotContentDrivePaginateEvent
 } from '@dotcms/dotcms-models';
+import { DotEditContentSidePanelComponent, DotSidePanelNavController } from '@dotcms/edit-content';
 import {
     DotFolderListViewComponent,
     DOT_FOLDER_LIST_VIEW_COLUMN_TYPE,
@@ -64,7 +67,8 @@ import {
     SUCCESS_MESSAGE_LIFE,
     WARNING_MESSAGE_LIFE,
     ERROR_MESSAGE_LIFE,
-    MOVE_TO_FOLDER_WORKFLOW_ACTION_ID
+    MOVE_TO_FOLDER_WORKFLOW_ACTION_ID,
+    NEW_CONTENT_MARKER
 } from '../shared/constants';
 import {
     DotContentDriveContentTypeSelectorPayload,
@@ -97,9 +101,19 @@ import { encodeFilters, isFolder } from '../utils/functions';
         MessageModule,
         DotMessagePipe,
         DotContentDriveDropzoneComponent,
-        DotSeverityIconComponent
+        DotSeverityIconComponent,
+        DotEditContentSidePanelComponent,
+        ProgressSpinnerModule
+    ],
+    providers: [
+        DotContentDriveStore,
+        // Component-scoped (not `root`) so it can inject the shell's DotContentDriveStore to read
+        // the side-panel feature flag; shared with the child components in this shell's subtree.
+        DotContentDriveNavigationService,
+        DotWorkflowsActionsService,
+        MessageService,
+        DotFolderService
     ],
-    providers: [DotContentDriveStore, DotWorkflowsActionsService, MessageService, DotFolderService],
     templateUrl: './dot-content-drive-shell.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
@@ -110,18 +124,64 @@ export class DotContentDriveShellComponent {
     readonly #store = inject(DotContentDriveStore);
 
     readonly #router = inject(Router);
+    readonly #route = inject(ActivatedRoute);
 
     readonly #location = inject(Location);
     readonly #navigationService = inject(DotContentDriveNavigationService);
+    readonly #destroyRef = inject(DestroyRef);
 
     readonly #dotMessageService = inject(DotMessageService);
     readonly #messageService = inject(MessageService);
     readonly #fileService = inject(DotUploadFileService);
     readonly #dotWorkflowActionsFireService = inject(DotWorkflowActionsFireService);
+    readonly #sidePanelNav = inject(DotSidePanelNavController);
+
+    /** Edit Content side panel request, driven by the navigation service; read by the template. */
+    protected readonly $editPanelRequest = this.#navigationService.$editPanelRequest;
+
+    /**
+     * Whether the last `editContent` URL write reflected an open panel. Lets the effect push when
+     * opening (so Back can pop the panel) but replace when closing — a push on close would leave a
+     * phantom entry whose Back puts the just-removed param back with no panel rendered.
+     */
+    #editPanelUrlWasSet = false;
+
+    /**
+     * The rendered side panel, so browser Back can route its close through the panel's guard.
+     * Queried by template ref var (`#sidePanelRef`), not the class token: passing the class itself
+     * would be a runtime reference to it outside the `@defer` block below, which disqualifies it
+     * from Angular's automatic deferred-import bundling (the `<T>` here is a type-only generic,
+     * erased at compile time — it leaves no runtime reference).
+     */
+    protected readonly $sidePanel = viewChild<DotEditContentSidePanelComponent>('sidePanelRef');
 
     readonly $items = this.#store.items;
     readonly $status = this.#store.status;
-    readonly $treeExpanded = this.#store.isTreeExpanded;
+
+    /**
+     * The tree's VISUAL expanded state (drives width/animation). Combines the user's real
+     * preference with any transient collapse the side panel is forcing — see
+     * `isTreeVisuallyExpanded` on the store for why these are kept separate.
+     */
+    readonly $treeExpanded = this.#store.isTreeVisuallyExpanded;
+
+    /**
+     * Forces the folder tree visually collapsed while the Edit Content side panel is open on a
+     * narrow viewport, and clears the override on close. Purely derived from the panel's open
+     * state each time it runs — no bookkeeping needed (unlike a real preference, "should the panel
+     * currently be forcing a collapse" has no history to restore: it is always correctly
+     * recomputed from the CURRENT panel/viewport state, including right after a refresh with the
+     * panel already open from a deep link). `untracked` guards the store read/write so the effect
+     * only re-runs when the panel open/close state changes.
+     */
+    // eslint-disable-next-line no-unused-private-class-members -- effect() runs for its side effects; the field only holds the EffectRef
+    #forceCollapseTreeWithPanelEffect = effect(() => {
+        const panelOpen = !!this.$editPanelRequest();
+
+        untracked(() => {
+            this.#store.setTreeForceCollapsed(panelOpen && this.#sidePanelNav.shouldCollapse());
+        });
+    });
 
     readonly $contextMenuData = this.#store.contextMenu;
 
@@ -205,6 +265,50 @@ export class DotContentDriveShellComponent {
 
     constructor() {
         this.#syncDialog(this.#store.dialog);
+
+        // Shareable deep-link: `?editContent=<identifier>` reopens the edit panel on load. Read
+        // once from the snapshot (the portlet is not re-created on in-session query-param changes).
+        // The `new`-mode marker is ignored — creating is not shareable, so only real identifiers
+        // are resolved.
+        const editContent = this.#route.snapshot.queryParams['editContent'];
+        if (editContent && editContent !== NEW_CONTENT_MARKER) {
+            this.#navigationService.openEditByIdentifier(editContent);
+        }
+
+        // Browser Back/Forward: the open panel's `editContent` param is written via `Location.go`
+        // (no router navigation), so nothing else reacts to popstate. When Back removes or changes
+        // that param while a panel is open (edit OR new), route the close through the panel's
+        // unsaved-changes guard — a direct `closeEditPanel()` would tear the editor down and discard
+        // unsaved edits silently.
+        const locationSubscription = this.#location.subscribe((event) => {
+            const params = new URLSearchParams(event.url?.split('?')[1] ?? '');
+            const editContentParam = params.get('editContent');
+            const request = this.#navigationService.$editPanelRequest();
+            if (!request) {
+                return;
+            }
+
+            // The param the URL should carry for the currently-open panel: the identifier for edit,
+            // the marker for new. If Back changed it away from that, the panel should close.
+            const expected =
+                request.mode === 'edit' ? (request.identifier ?? null) : NEW_CONTENT_MARKER;
+
+            if (expected !== editContentParam) {
+                // Restore the param so the URL matches the still-open panel while the guard decides.
+                // `replaceState` (not `go`) avoids piling up history entries. Discard → the panel
+                // emits `closed` → onEditPanelClosed → closeEditPanel clears the param; Keep editing
+                // → the panel stays open and the URL is already back in sync.
+                const restoredUrl = this.#router
+                    .createUrlTree([], {
+                        queryParams: { editContent: expected },
+                        queryParamsHandling: 'merge'
+                    })
+                    .toString();
+                this.#location.replaceState(restoredUrl);
+                this.$sidePanel()?.requestClose();
+            }
+        });
+        this.#destroyRef.onDestroy(() => locationSubscription.unsubscribe());
     }
 
     readonly $offset = computed(() => this.#store.pagination().offset, {
@@ -306,11 +410,34 @@ export class DotContentDriveShellComponent {
             queryParams['filters'] = null;
         }
 
+        // Reflect the open panel in the `editContent` param: the shareable identifier for edit, or
+        // a non-shareable marker for new (so browser Back has an entry to pop). Cleared when the
+        // panel is closed. Written via Location.go/replaceState so it triggers no navigation/reload.
+        const editRequest = this.$editPanelRequest();
+        const editContent = editRequest
+            ? editRequest.mode === 'edit'
+                ? (editRequest.identifier ?? null)
+                : NEW_CONTENT_MARKER
+            : null;
+        queryParams['editContent'] = editContent;
+
         const urlTree = this.#router.createUrlTree([], {
             queryParams,
             queryParamsHandling: 'merge'
         });
-        this.#location.go(urlTree.toString());
+
+        // Only write when the URL actually changes (keeps it idempotent — e.g. after Back already
+        // moved the URL). Push when opening the panel so Back can pop it (AC8); replace when closing
+        // it, so no phantom history entry is left whose Back would resurrect the removed param.
+        const newUrl = urlTree.toString();
+        if (newUrl !== this.#location.path(true)) {
+            if (editContent === null && this.#editPanelUrlWasSet) {
+                this.#location.replaceState(newUrl);
+            } else {
+                this.#location.go(newUrl);
+            }
+        }
+        this.#editPanelUrlWasSet = editContent !== null;
     });
 
     /**
@@ -427,6 +554,16 @@ export class DotContentDriveShellComponent {
         this.$activeDialog.set(undefined);
     }
 
+    /** Closes the Edit Content side panel. */
+    protected onEditPanelClosed() {
+        this.#navigationService.closeEditPanel();
+    }
+
+    /** A save in the side panel can create or change an item, so refresh the list. */
+    protected onEditPanelSaved() {
+        this.#store.reloadContentDrive();
+    }
+
     /**
      * Upload-button flow. When the current folder pins a base type (`defaultBaseType`), skip the
      * menu and open the OS file picker straight away; otherwise open the type menu anchored to the
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/constants.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/constants.ts
index 1cf6c0e94b94..097df17c8cc1 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/constants.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/constants.ts
@@ -269,3 +269,10 @@ export const DROPZONE_STATE = {
     ACTIVE: 'active',
     INACTIVE: 'inactive'
 } as const;
+
+/**
+ * `editContent` value written for a `new`-mode panel: a non-shareable marker (creating has no
+ * identifier) whose only job is to give browser Back a history entry to pop, so Back closes the
+ * create panel too (AC8). The deep-link reader ignores it; only real identifiers are resolved.
+ */
+export const NEW_CONTENT_MARKER = 'new';
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/models.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/models.ts
index e9f9861df630..036e7b750ec0 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/models.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/models.ts
@@ -172,6 +172,14 @@ export interface DotContentDriveState extends DotContentDriveInit {
      * >1 content types are selected. Consumed by the results table as extra columns.
      */
     showInListFields: DotCMSContentTypeField[];
+    /**
+     * Whether the Edit Content side panel is forcing the folder tree visually collapsed on a
+     * narrow viewport. Purely transient UI state — never persisted, never read from or written to
+     * the URL — kept separate from {@link DotContentDriveInit.isTreeExpanded} (the user's real,
+     * shareable preference) so the panel's temporary collapse can never overwrite it. See
+     * `isTreeVisuallyExpanded` (the computed both should render from) and `setTreeForceCollapsed`.
+     */
+    isTreeForceCollapsed: boolean;
 }
 
 /**
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.spec.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.spec.ts
index d12e3ce8fd5f..f84708edb04f 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.spec.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.spec.ts
@@ -9,9 +9,11 @@ import { of, throwError } from 'rxjs';
 
 import { Location } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
+import { signal } from '@angular/core';
 import { Router } from '@angular/router';
 
 import {
+    DotContentSearchService,
     DotContentTypeService,
     DotHttpErrorManagerService,
     DotRouterService
@@ -21,6 +23,14 @@ import { createFakeContentlet, createFakeContentType } from '@dotcms/utils-testi
 
 import { DotContentDriveNavigationService } from './dot-content-drive-navigation.service';
 
+import { DotContentDriveStore } from '../../store/dot-content-drive.store';
+
+/** Builds a mock store exposing only what the nav service reads: the `flags()` slice. */
+const mockStoreWithFlag = (enabled: boolean) =>
+    mockProvider(DotContentDriveStore, {
+        flags: signal({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: enabled })
+    });
+
 describe('DotContentDriveNavigationService', () => {
     let spectator: SpectatorService<DotContentDriveNavigationService>;
     let service: DotContentDriveNavigationService;
@@ -29,6 +39,7 @@ describe('DotContentDriveNavigationService', () => {
     let dotRouterService: jest.Mocked<DotRouterService>;
     let location: SpyObject<Location>;
     let httpErrorManager: SpyObject<DotHttpErrorManagerService>;
+    let contentSearch: jest.Mocked<DotContentSearchService>;
 
     const createService = createServiceFactory({
         service: DotContentDriveNavigationService,
@@ -47,7 +58,13 @@ describe('DotContentDriveNavigationService', () => {
             }),
             mockProvider(DotHttpErrorManagerService, {
                 handle: jest.fn().mockReturnValue(of({}))
-            })
+            }),
+            mockProvider(DotContentSearchService, {
+                get: jest.fn()
+            }),
+            // Side panel feature flag ON by default (read from the store's flags slice) so the
+            // side-panel tests below apply; the "side panel disabled" block re-creates it off.
+            mockStoreWithFlag(true)
         ]
     });
 
@@ -59,6 +76,7 @@ describe('DotContentDriveNavigationService', () => {
         dotRouterService = spectator.inject(DotRouterService);
         location = spectator.inject(Location);
         httpErrorManager = spectator.inject(DotHttpErrorManagerService);
+        contentSearch = spectator.inject(DotContentSearchService);
     });
 
     afterEach(() => {
@@ -97,10 +115,12 @@ describe('DotContentDriveNavigationService', () => {
             });
         });
 
-        it('should navigate to new content editor when feature flag is enabled', () => {
+        it('should open the new editor side panel when feature flag is enabled', () => {
             const mockContentlet = createFakeContentlet({
                 contentType: 'blog',
-                inode: 'test-inode-123'
+                inode: 'test-inode-123',
+                identifier: 'test-identifier-123',
+                title: 'My Blog Post'
             });
 
             const mockContentType = createFakeContentType({
@@ -114,7 +134,13 @@ describe('DotContentDriveNavigationService', () => {
             service.editContent(mockContentlet);
 
             expect(contentTypeService.getContentType).toHaveBeenCalledWith('blog');
-            expect(router.navigate).toHaveBeenCalledWith(['content/test-inode-123']);
+            expect(service.$editPanelRequest()).toEqual({
+                mode: 'edit',
+                contentletInode: 'test-inode-123',
+                identifier: 'test-identifier-123',
+                title: 'My Blog Post'
+            });
+            expect(router.navigate).not.toHaveBeenCalled();
         });
 
         it('should navigate to old content editor when feature flag is disabled', () => {
@@ -225,7 +251,7 @@ describe('DotContentDriveNavigationService', () => {
     });
 
     describe('createContent', () => {
-        it('should navigate to new content editor (empty query params) when feature flag is enabled and no folder given', () => {
+        it('should open the new editor side panel when feature flag is enabled and no folder given', () => {
             const mockContentType = createFakeContentType({
                 id: 'blog',
                 name: 'Blog',
@@ -237,12 +263,16 @@ describe('DotContentDriveNavigationService', () => {
             service.createContent('blog');
 
             expect(contentTypeService.getContentType).toHaveBeenCalledWith('blog');
-            expect(router.navigate).toHaveBeenCalledWith(['content/new/blog'], {
-                queryParams: {}
+            expect(service.$editPanelRequest()).toEqual({
+                mode: 'new',
+                contentTypeId: 'blog',
+                folderPath: undefined,
+                title: 'Blog'
             });
+            expect(router.navigate).not.toHaveBeenCalled();
         });
 
-        it('should forward folderPath to the new content editor so it is created in the current folder', () => {
+        it('should forward folderPath to the new editor side panel so it is created in the current folder', () => {
             const mockContentType = createFakeContentType({
                 id: 'blog',
                 name: 'Blog',
@@ -253,9 +283,13 @@ describe('DotContentDriveNavigationService', () => {
 
             service.createContent('blog', { folderPath: 'demo.dotcms.com/about-us/' });
 
-            expect(router.navigate).toHaveBeenCalledWith(['content/new/blog'], {
-                queryParams: { folderPath: 'demo.dotcms.com/about-us/' }
+            expect(service.$editPanelRequest()).toEqual({
+                mode: 'new',
+                contentTypeId: 'blog',
+                folderPath: 'demo.dotcms.com/about-us/',
+                title: 'Blog'
             });
+            expect(router.navigate).not.toHaveBeenCalled();
         });
 
         it('should navigate to legacy content editor with mapped CD_ params when feature flag is disabled', () => {
@@ -431,4 +465,163 @@ describe('DotContentDriveNavigationService', () => {
             });
         });
     });
+
+    describe('openEditByIdentifier', () => {
+        it('should resolve the identifier to its working inode and open the edit panel', () => {
+            const resolved = createFakeContentlet({
+                inode: 'working-inode-1',
+                identifier: 'shared-identifier',
+                title: 'Shared Content'
+            });
+            contentSearch.get.mockReturnValue(of({ jsonObjectView: { contentlets: [resolved] } }));
+
+            service.openEditByIdentifier('shared-identifier');
+
+            expect(contentSearch.get).toHaveBeenCalledWith({
+                query: '+identifier:shared-identifier +working:true',
+                limit: 1
+            });
+            expect(service.$editPanelRequest()).toEqual({
+                mode: 'edit',
+                contentletInode: 'working-inode-1',
+                identifier: 'shared-identifier',
+                title: 'Shared Content'
+            });
+        });
+
+        it('should not open the panel when the identifier resolves to nothing', () => {
+            contentSearch.get.mockReturnValue(of({ jsonObjectView: { contentlets: [] } }));
+
+            service.openEditByIdentifier('missing-identifier');
+
+            expect(service.$editPanelRequest()).toBeNull();
+        });
+
+        it('should surface the error and not open the panel when the search fails', () => {
+            const error = new HttpErrorResponse({ status: 500 });
+            contentSearch.get.mockReturnValue(throwError(() => error));
+
+            service.openEditByIdentifier('shared-identifier');
+
+            expect(httpErrorManager.handle).toHaveBeenCalledWith(error);
+            expect(service.$editPanelRequest()).toBeNull();
+        });
+    });
+});
+
+describe('DotContentDriveNavigationService (side panel disabled)', () => {
+    let spectator: SpectatorService<DotContentDriveNavigationService>;
+    let service: DotContentDriveNavigationService;
+    let router: jest.Mocked<Router>;
+    let contentTypeService: jest.Mocked<DotContentTypeService>;
+
+    const newEditorType = () =>
+        createFakeContentType({
+            id: 'blog',
+            name: 'Blog',
+            metadata: { [FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED]: true }
+        });
+
+    // Own factory with the side panel flag OFF, so the new editor falls back to route navigation.
+    const createService = createServiceFactory({
+        service: DotContentDriveNavigationService,
+        providers: [
+            mockProvider(Router, { navigate: jest.fn() }),
+            mockProvider(DotContentTypeService, { getContentType: jest.fn() }),
+            mockProvider(DotRouterService, { goToEditPage: jest.fn() }),
+            mockProvider(Location, { path: jest.fn() }),
+            mockProvider(DotHttpErrorManagerService, {
+                handle: jest.fn().mockReturnValue(of({}))
+            }),
+            mockProvider(DotContentSearchService, { get: jest.fn() }),
+            mockStoreWithFlag(false)
+        ]
+    });
+
+    beforeEach(() => {
+        spectator = createService();
+        service = spectator.service;
+        router = spectator.inject(Router);
+        contentTypeService = spectator.inject(DotContentTypeService);
+    });
+
+    it('should navigate to the full-screen editor instead of opening the panel (edit)', () => {
+        const mockContentlet = createFakeContentlet({ contentType: 'blog', inode: 'inode-x' });
+        contentTypeService.getContentType.mockReturnValue(of(newEditorType()));
+
+        service.editContent(mockContentlet);
+
+        expect(router.navigate).toHaveBeenCalledWith(['content/inode-x']);
+        expect(service.$editPanelRequest()).toBeNull();
+    });
+
+    it('should navigate to the full-screen new-content editor instead of the panel (create)', () => {
+        contentTypeService.getContentType.mockReturnValue(of(newEditorType()));
+
+        service.createContent('blog', { folderPath: 'demo.dotcms.com/about-us/' });
+
+        expect(router.navigate).toHaveBeenCalledWith(['content/new/blog'], {
+            queryParams: { folderPath: 'demo.dotcms.com/about-us/' }
+        });
+        expect(service.$editPanelRequest()).toBeNull();
+    });
+
+    it('should navigate to the full-screen editor instead of opening the panel for a deep link (?editContent=)', () => {
+        // The param can outlive the flag being on (shared link, bookmark, staging→prod) — reading
+        // the flag here (not skipping it) keeps this path honoring AC15 when the flag is off.
+        const contentSearch = spectator.inject(DotContentSearchService);
+        (contentSearch.get as jest.Mock).mockReturnValue(
+            of({ jsonObjectView: { contentlets: [createFakeContentlet({ inode: 'inode-y' })] } })
+        );
+
+        service.openEditByIdentifier('shared-identifier');
+
+        expect(router.navigate).toHaveBeenCalledWith(['content/inode-y']);
+        expect(service.$editPanelRequest()).toBeNull();
+    });
+});
+
+describe('DotContentDriveNavigationService ($sidePanelEnabled)', () => {
+    // The flag now comes from the store's `withFlags` slice; the nav service just maps it to a
+    // boolean. The failed-config-read degradation is owned (and tested) by withFlags itself — here
+    // an empty/unresolved flags map (its degraded value) must simply read as `false`.
+    const flagsSignal = signal<Partial<Record<FeaturedFlags, boolean>>>({});
+    let spectator: SpectatorService<DotContentDriveNavigationService>;
+
+    const createService = createServiceFactory({
+        service: DotContentDriveNavigationService,
+        providers: [
+            mockProvider(Router, { navigate: jest.fn() }),
+            mockProvider(DotContentTypeService, { getContentType: jest.fn() }),
+            mockProvider(DotRouterService, { goToEditPage: jest.fn() }),
+            mockProvider(Location, { path: jest.fn() }),
+            mockProvider(DotHttpErrorManagerService, { handle: jest.fn().mockReturnValue(of({})) }),
+            mockProvider(DotContentSearchService, { get: jest.fn() }),
+            mockProvider(DotContentDriveStore, { flags: flagsSignal })
+        ]
+    });
+
+    beforeEach(() => {
+        flagsSignal.set({});
+        spectator = createService();
+    });
+
+    it('is true when the store reports the flag enabled', () => {
+        flagsSignal.set({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: true });
+
+        expect(spectator.service.$sidePanelEnabled()).toBe(true);
+    });
+
+    it('is false when the store reports the flag disabled', () => {
+        flagsSignal.set({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: false });
+
+        expect(spectator.service.$sidePanelEnabled()).toBe(false);
+    });
+
+    it('is false (never throws) when the flags map is empty — the withFlags degraded/unresolved value', () => {
+        flagsSignal.set({});
+
+        expect(() => spectator.service.$sidePanelEnabled()).not.toThrow();
+        expect(spectator.service.$sidePanelEnabled()).toBe(false);
+    });
 });
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.ts
index efa05dac488b..c33f8d256579 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/shared/services/dot-content-drive-navigation.service.ts
@@ -2,12 +2,13 @@ import { EMPTY } from 'rxjs';
 
 import { Location } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
+import { Injectable, computed, inject, signal } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { catchError, take } from 'rxjs/operators';
 
 import {
+    DotContentSearchService,
     DotContentTypeService,
     DotHttpErrorManagerService,
     DotRouterService
@@ -17,17 +18,46 @@ import {
     DotCMSContentlet,
     FeaturedFlags
 } from '@dotcms/dotcms-models';
+import { EditContentDialogData } from '@dotcms/edit-content';
 import { mapQueryParamsToCDParams } from '@dotcms/utils';
 
-@Injectable({
-    providedIn: 'root'
-})
+import { DotContentDriveStore } from '../../store/dot-content-drive.store';
+
+/** Shape of the `/api/content/_search` entity we read the resolved contentlet from. */
+interface ContentSearchEntity {
+    jsonObjectView: { contentlets: DotCMSContentlet[] };
+}
+
+// Provided at the Content Drive shell level (not `root`) so it can inject the shell-scoped
+// DotContentDriveStore and read the side-panel feature flag from it.
+@Injectable()
 export class DotContentDriveNavigationService {
     readonly #router = inject(Router);
     readonly #location = inject(Location);
     readonly #dotContentTypeService = inject(DotContentTypeService);
     readonly #dotRouterService = inject(DotRouterService);
     readonly #httpErrorManager = inject(DotHttpErrorManagerService);
+    readonly #contentSearch = inject(DotContentSearchService);
+    readonly #store = inject(DotContentDriveStore);
+
+    /**
+     * Feature flag gating the side panel. When off, the new editor opens via full-screen route
+     * navigation (the previous behavior); when on, it opens in the side panel. Read from the
+     * store's `withFlags` slice (batch-fetched once on init, degrades to `false` on a failed config
+     * read) — defaults to `false` until it resolves, so the safe/previous behavior is used meanwhile.
+     */
+    readonly $sidePanelEnabled = computed(
+        () => this.#store.flags()[FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL] ?? false
+    );
+
+    readonly #editPanelRequest = signal<EditContentDialogData | null>(null);
+
+    /**
+     * The content to show in the Edit Content side panel, or `null` when it is closed. Set when
+     * the new editor should open for a content type/inode (instead of navigating to the
+     * full-screen route); the shell renders the panel while this is set.
+     */
+    readonly $editPanelRequest = this.#editPanelRequest.asReadonly();
     /**
      * Navigates to the appropriate editor based on the content type.
      * Routes to the page editor for HTML pages, or the contentlet editor for other types.
@@ -106,16 +136,32 @@ export class DotContentDriveNavigationService {
                     return;
                 }
 
-                // The new content editor owns its own close/back navigation, so — like the edit
-                // flow (#editContentlet) — it does not need the CD_-prefixed return params that
-                // only the legacy editor's onClose consumes. It pre-selects the Host/Folder field
-                // from the `folderPath` query param (see hostFolderResolutionFn in edit-content).
+                if (this.$sidePanelEnabled()) {
+                    // New editor in a side panel over Content Drive. Forward `folderPath` so the
+                    // content is created in the folder being browsed.
+                    this.#editPanelRequest.set({
+                        mode: 'new',
+                        contentTypeId: contentTypeVariable,
+                        folderPath: folder.folderPath,
+                        title: contentType.name
+                    });
+
+                    return;
+                }
+
+                // Side panel disabled: navigate to the full-screen new-content editor (previous
+                // behavior). It pre-selects the Host/Folder field from the `folderPath` query param.
                 this.#router.navigate([`content/new/${contentTypeVariable}`], {
                     queryParams: folder.folderPath ? { folderPath: folder.folderPath } : {}
                 });
             });
     }
 
+    /** Closes the Edit Content side panel. */
+    closeEditPanel(): void {
+        this.#editPanelRequest.set(null);
+    }
+
     /**
      * Navigates to the contentlet editor.
      * Determines whether to use the new or legacy content editor based on
@@ -142,16 +188,79 @@ export class DotContentDriveNavigationService {
                 const shouldRedirectToOldContentEditor =
                     !contentType?.metadata?.[FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED];
 
-                const mappedQueryParams = mapQueryParamsToCDParams(currentQueryParams);
-
                 if (shouldRedirectToOldContentEditor) {
+                    const mappedQueryParams = mapQueryParamsToCDParams(currentQueryParams);
                     this.#router.navigate([`c/content/${contentlet.inode}`], {
                         queryParams: mappedQueryParams
                     });
                     return;
                 }
 
+                if (this.$sidePanelEnabled()) {
+                    // New editor in a side panel over Content Drive (keeps the list/filters).
+                    this.#editPanelRequest.set({
+                        mode: 'edit',
+                        contentletInode: contentlet.inode,
+                        identifier: contentlet.identifier,
+                        title: contentlet.title
+                    });
+
+                    return;
+                }
+
+                // Side panel disabled: navigate to the full-screen editor (previous behavior).
                 this.#router.navigate([`content/${contentlet.inode}`]);
             });
     }
+
+    /**
+     * Opens the Edit Content editor for a content addressed by its stable `identifier` (e.g. from a
+     * shared `?editContent=<identifier>` URL). Resolves the identifier to its current working inode
+     * (the editor loads by inode), then routes by the side-panel flag: on → the panel; off → the
+     * full-screen editor. The flag is gated here (not skipped) because the param can outlive the
+     * flag being on — a shared link, a bookmark, or a URL that travels staging→prod — and AC15
+     * requires full-screen when the flag is off. No-op when the content can't be resolved (deleted,
+     * no permission, bad id).
+     *
+     * The flag is read from `$sidePanelEnabled` (the store's `withFlags` slice) after the resolve.
+     * On a cold deep-link load the flag is usually resolved by then (the config fetch starts on
+     * store init, before this search); in the rare case it hasn't, this falls back to the
+     * full-screen editor — safe and functional, just not the panel.
+     */
+    openEditByIdentifier(identifier: string): void {
+        this.#contentSearch
+            .get<ContentSearchEntity>({
+                query: `+identifier:${identifier} +working:true`,
+                limit: 1
+            })
+            .pipe(
+                take(1),
+                catchError((error: HttpErrorResponse) => {
+                    this.#httpErrorManager.handle(error);
+
+                    return EMPTY;
+                })
+            )
+            .subscribe((entity) => {
+                const contentlet = entity?.jsonObjectView?.contentlets?.[0];
+                if (!contentlet?.inode) {
+                    return;
+                }
+
+                if (!this.$sidePanelEnabled()) {
+                    // Flag off: full-screen new editor (the panel only ever opened for
+                    // CONTENT_EDITOR2 content, so its full-screen equivalent is `content/<inode>`).
+                    this.#router.navigate([`content/${contentlet.inode}`]);
+
+                    return;
+                }
+
+                this.#editPanelRequest.set({
+                    mode: 'edit',
+                    contentletInode: contentlet.inode,
+                    identifier,
+                    title: contentlet.title
+                });
+            });
+    }
 }
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.spec.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.spec.ts
index bb45d43a6de7..cf9f535204d9 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.spec.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.spec.ts
@@ -2,10 +2,15 @@ import { describe, expect } from '@jest/globals';
 import { createServiceFactory, SpectatorService, mockProvider } from '@openng/spectator/jest';
 import { of, throwError } from 'rxjs';
 
+import { Location } from '@angular/common';
 import { provideHttpClient } from '@angular/common/http';
 import { ActivatedRoute } from '@angular/router';
 
-import { DotContentDriveService, DotFolderService } from '@dotcms/data-access';
+import {
+    DotContentDriveService,
+    DotFolderService,
+    DotPropertiesService
+} from '@dotcms/data-access';
 import { DotContentDriveItem, DotContentDriveSearchResponse, DotSite } from '@dotcms/dotcms-models';
 import { GlobalStore } from '@dotcms/store';
 import { createFakeTagField, createFakeTextField } from '@dotcms/utils-testing';
@@ -41,6 +46,14 @@ describe('DotContentDriveStore', () => {
             mockProvider(DotFolderService, {
                 getFolders: jest.fn().mockReturnValue(of([]))
             }),
+            // The store subscribes to Location (popstate re-hydration); capture the handler here.
+            mockProvider(Location, {
+                subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+            }),
+            // withFlags fetches feature flags on init; stub so no real HTTP fires.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest.fn().mockReturnValue(of({}))
+            }),
             provideHttpClient()
         ]
     });
@@ -689,6 +702,14 @@ describe('DotContentDriveStore - onInit', () => {
             mockProvider(DotFolderService, {
                 getFolders: jest.fn().mockReturnValue(of([]))
             }),
+            // The store subscribes to Location (popstate re-hydration); capture the handler here.
+            mockProvider(Location, {
+                subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+            }),
+            // withFlags fetches feature flags on init; stub so no real HTTP fires.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest.fn().mockReturnValue(of({}))
+            }),
             provideHttpClient()
         ]
     });
@@ -710,6 +731,89 @@ describe('DotContentDriveStore - onInit', () => {
     });
 });
 
+describe('DotContentDriveStore - Browser Back/Forward (popstate) re-hydration', () => {
+    let spectator: SpectatorService<InstanceType<typeof DotContentDriveStore>>;
+    let store: InstanceType<typeof DotContentDriveStore>;
+
+    const createService = createServiceFactory({
+        service: DotContentDriveStore,
+        providers: [
+            mockProvider(ActivatedRoute, { snapshot: { queryParams: {} } }),
+            mockProvider(GlobalStore, {
+                siteDetails: jest.fn().mockReturnValue(MOCK_SITES[0])
+            }),
+            mockProvider(DotContentDriveService, {
+                search: jest.fn().mockReturnValue(of(MOCK_SEARCH_RESPONSE))
+            }),
+            mockProvider(DotFolderService, {
+                getFolders: jest.fn().mockReturnValue(of([]))
+            }),
+            mockProvider(Location, {
+                subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+            }),
+            provideHttpClient()
+        ]
+    });
+
+    /** Invokes the popstate handler the store registered in onInit with the given restored URL. */
+    const popstate = (url: string) => {
+        const subscribe = spectator.inject(Location).subscribe as jest.Mock;
+        const handler = subscribe.mock.lastCall?.[0] as (event: { url: string }) => void;
+        handler({ url });
+    };
+
+    beforeEach(() => {
+        spectator = createService();
+        store = spectator.service;
+        spectator.flushEffects();
+    });
+
+    it('re-hydrates the store when Back changes the filters param (fixes the stale-list bug)', () => {
+        popstate('/c/content-drive?filters=contentType:Blog');
+
+        expect(store.filters()).toEqual({ contentType: ['Blog'] });
+        // Reset to LOADING is what the search effect turns into a fresh load.
+        expect(store.status()).toBe(DotContentDriveStatus.LOADING);
+    });
+
+    it('re-hydrates the store when Back changes the path param', () => {
+        popstate('/c/content-drive?path=/foo/bar');
+
+        expect(store.path()).toBe('/foo/bar');
+    });
+
+    it('re-hydrates the tree-expanded preference from the URL on Back', () => {
+        store.initContentDrive({
+            currentSite: MOCK_SITES[0],
+            path: DEFAULT_PATH,
+            filters: {},
+            isTreeExpanded: true
+        });
+
+        popstate('/c/content-drive?isTreeExpanded=false');
+
+        expect(store.isTreeExpanded()).toBe(false);
+    });
+
+    it('does NOT re-hydrate when only the editContent param changed (closing the panel via Back)', () => {
+        store.initContentDrive({
+            currentSite: MOCK_SITES[0],
+            path: '/keep',
+            filters: { contentType: ['Blog'] },
+            isTreeExpanded: true
+        });
+        const initSpy = jest.spyOn(store, 'initContentDrive');
+
+        // Same browsing params — only editContent differs (here, absent). Must be a no-op so the
+        // list isn't reset/reloaded just because the side panel closed.
+        popstate('/c/content-drive?path=/keep&filters=contentType:Blog&isTreeExpanded=true');
+
+        expect(initSpy).not.toHaveBeenCalled();
+        expect(store.path()).toBe('/keep');
+        expect(store.filters()).toEqual({ contentType: ['Blog'] });
+    });
+});
+
 describe('DotContentDriveStore - Content Loading Effect', () => {
     let spectator: SpectatorService<InstanceType<typeof DotContentDriveStore>>;
     let store: InstanceType<typeof DotContentDriveStore>;
@@ -732,6 +836,14 @@ describe('DotContentDriveStore - Content Loading Effect', () => {
             mockProvider(DotFolderService, {
                 getFolders: jest.fn().mockReturnValue(of([]))
             }),
+            // The store subscribes to Location (popstate re-hydration); capture the handler here.
+            mockProvider(Location, {
+                subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+            }),
+            // withFlags fetches feature flags on init; stub so no real HTTP fires.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest.fn().mockReturnValue(of({}))
+            }),
             provideHttpClient()
         ]
     });
diff --git a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.ts b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.ts
index 3e1ef8b9ea10..ac16194cddac 100644
--- a/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.ts
+++ b/core-web/libs/portlets/dot-content-drive/portlet/src/lib/store/dot-content-drive.store.ts
@@ -6,8 +6,9 @@ import {
     withMethods,
     withState
 } from '@ngrx/signals';
-import { EMPTY } from 'rxjs';
+import { EMPTY, SubscriptionLike } from 'rxjs';
 
+import { Location } from '@angular/common';
 import { computed, effect, EffectRef, inject, untracked } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
@@ -17,9 +18,10 @@ import { DotContentDriveService } from '@dotcms/data-access';
 import {
     DotCMSContentTypeField,
     DotContentDriveItem,
-    DotContentDriveSearchRequest
+    DotContentDriveSearchRequest,
+    FeaturedFlags
 } from '@dotcms/dotcms-models';
-import { GlobalStore } from '@dotcms/store';
+import { GlobalStore, withFlags } from '@dotcms/store';
 
 import { withContextMenu } from './features/context-menu/withContextMenu';
 import { withDialog } from './features/dialog/withDialog';
@@ -47,6 +49,7 @@ import {
 import {
     buildUserSearchablePayload,
     decodeFilters,
+    encodeFilters,
     getUserSearchableActive,
     parseWorkflowFilter
 } from '../utils/functions';
@@ -61,6 +64,7 @@ const initialState: DotContentDriveState = {
     pagination: DEFAULT_PAGINATION,
     sort: DEFAULT_SORT,
     isTreeExpanded: DEFAULT_TREE_EXPANDED,
+    isTreeForceCollapsed: false,
     pages: [DEFAULT_PAGE],
     userSearchableFields: [],
     userSearchableActive: [],
@@ -70,9 +74,31 @@ const initialState: DotContentDriveState = {
 
 export const DotContentDriveStore = signalStore(
     withState<DotContentDriveState>(initialState),
+    // Side-panel feature flag, fetched once on init and exposed as `flags()`. `as const` narrows the
+    // typing to exactly this flag. Consumed by DotContentDriveNavigationService to decide side panel
+    // vs full-screen editor.
+    withFlags([FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL] as const),
     withComputed(
-        ({ path, filters, currentSite, pagination, sort, pages, userSearchableFields }) => {
+        ({
+            path,
+            filters,
+            currentSite,
+            pagination,
+            sort,
+            pages,
+            userSearchableFields,
+            isTreeExpanded,
+            isTreeForceCollapsed
+        }) => {
             return {
+                /**
+                 * The tree's VISUAL expanded state — the user's real preference (`isTreeExpanded`,
+                 * persisted/shareable via the URL) minus any transient collapse the side panel is
+                 * forcing on a narrow viewport (`isTreeForceCollapsed`, never persisted). Kept
+                 * separate so the panel's temporary collapse can never leak into the shareable
+                 * state — see `setTreeForceCollapsed`.
+                 */
+                isTreeVisuallyExpanded: computed(() => isTreeExpanded() && !isTreeForceCollapsed()),
                 $request: computed<DotContentDriveSearchRequest>(
                     () => {
                         const paginationSignal = pagination();
@@ -237,6 +263,15 @@ export const DotContentDriveStore = signalStore(
             setIsTreeExpanded(isTreeExpanded: boolean) {
                 patchState(store, { isTreeExpanded });
             },
+            /**
+             * Sets the side panel's transient tree-collapse override (see `isTreeVisuallyExpanded`).
+             * Never touches `isTreeExpanded` — the real, shareable preference — so a panel-forced
+             * collapse can never be persisted to the URL or survive a refresh as if it were the
+             * user's own choice.
+             */
+            setTreeForceCollapsed(isTreeForceCollapsed: boolean) {
+                patchState(store, { isTreeForceCollapsed });
+            },
             getFilterValue(filter: string) {
                 return store.filters()[filter];
             },
@@ -389,8 +424,10 @@ export const DotContentDriveStore = signalStore(
     withHooks((store) => {
         const route = inject(ActivatedRoute);
         const globalStore = inject(GlobalStore);
+        const location = inject(Location);
         let initEffect: EffectRef;
         let searchEffect: EffectRef;
+        let locationSub: SubscriptionLike;
 
         return {
             onInit() {
@@ -410,6 +447,43 @@ export const DotContentDriveStore = signalStore(
                     });
                 });
 
+                /**
+                 * Browser Back/Forward re-hydration. The browsing params (path/filters/tree) are
+                 * written to the URL via `Location.go` (bypassing the router, so no content reload
+                 * fires on every filter change), and the init effect above hydrates from a one-time
+                 * `route.snapshot` read. Together that means a Back/Forward changes the URL but never
+                 * re-hydrates the store, leaving the list stale. `Location.subscribe` fires on
+                 * popstate (not on our own `go`/`replaceState`), so re-run the same hydration from
+                 * the restored URL — `initContentDrive` resets to LOADING, which the search effect
+                 * turns into a fresh load.
+                 */
+                locationSub = location.subscribe((event) => {
+                    const params = new URLSearchParams(event.url?.split('?')[1] ?? '');
+                    const path = params.get('path') || DEFAULT_PATH;
+                    const filtersRaw = params.get('filters') || '';
+                    const isTreeExpanded =
+                        (params.get('isTreeExpanded') ?? DEFAULT_TREE_EXPANDED.toString()) ===
+                        'true';
+
+                    // Only re-hydrate when a browsing param actually changed. A popstate that only
+                    // flips `editContent` (e.g. closing the side panel via Back) must NOT reset and
+                    // reload the list — that param is owned by the shell's own popstate handler.
+                    if (
+                        path === store.path() &&
+                        filtersRaw === encodeFilters(store.filters()) &&
+                        isTreeExpanded === store.isTreeExpanded()
+                    ) {
+                        return;
+                    }
+
+                    store.initContentDrive({
+                        currentSite: globalStore.siteDetails(),
+                        path,
+                        filters: decodeFilters(filtersRaw),
+                        isTreeExpanded
+                    });
+                });
+
                 /**
                  * Effect that triggers a content reload when search parameters change.
                  * loadItems internally uses $searchParams signal, so it will be triggered
@@ -422,6 +496,7 @@ export const DotContentDriveStore = signalStore(
             onDestroy() {
                 initEffect?.destroy();
                 searchEffect?.destroy();
+                locationSub?.unsubscribe();
             }
         };
     }),
diff --git a/core-web/libs/portlets/dot-query-tool/jest.config.ts b/core-web/libs/portlets/dot-query-tool/jest.config.ts
index fdd2ebd0946f..21455a03d5e6 100644
--- a/core-web/libs/portlets/dot-query-tool/jest.config.ts
+++ b/core-web/libs/portlets/dot-query-tool/jest.config.ts
@@ -12,7 +12,11 @@ export default {
             }
         ]
     },
-    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    // The Edit Content side panel (@dotcms/edit-content) transitively pulls ESM-only deps
+    // (lib0/@tiptap/etc.) that must be transformed rather than ignored.
+    transformIgnorePatterns: [
+        'node_modules/(?!.*\\.mjs$|.*(y-protocols|lib0|y-prosemirror|@tiptap|marked|lowlight|devlop))'
+    ],
     snapshotSerializers: [
         'jest-preset-angular/build/serializers/no-ng-attributes',
         'jest-preset-angular/build/serializers/ng-snapshot',
diff --git a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.html b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.html
index 1c0124c0fe6b..b66794b4351f 100644
--- a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.html
+++ b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.html
@@ -416,3 +416,25 @@
         </div>
     </div>
 </p-popover>
+
+<!-- Edit Content side panel (opens in-page for new-editor results when the feature flag is on;
+     legacy/page results still open in a new tab). Reloads the results on save.
+     `@defer` splits the editor out of this portlet's chunk, fetched only on the first open. The
+     inner `@if` still mounts/destroys a fresh editor on every open/close — `@defer`'s `when`
+     trigger only gates the one-time chunk load, it does not toggle like `@if`. -->
+@defer (when $editPanelRequest()) {
+    @if ($editPanelRequest(); as data) {
+        <dot-edit-content-side-panel
+            #sidePanelRef
+            data-testid="query-tool-edit-panel"
+            [data]="data"
+            (saved)="onEditPanelSaved()"
+            (closed)="onEditPanelClosed()" />
+    }
+} @loading {
+    <div
+        class="fixed right-4 bottom-4 z-10000 rounded-full bg-white p-3 shadow-lg"
+        data-testid="edit-content-side-panel-loading">
+        <p-progressSpinner styleClass="h-8! w-8!" strokeWidth="4" ariaLabel="loading editor" />
+    </div>
+}
diff --git a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.spec.ts b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.spec.ts
index eb755ec15a67..b9d5e06989a4 100644
--- a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.spec.ts
+++ b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.spec.ts
@@ -1,4 +1,5 @@
 import { byTestId, createComponentFactory, mockProvider, Spectator } from '@openng/spectator/jest';
+import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 
 import { Location } from '@angular/common';
@@ -6,12 +7,14 @@ import { ActivatedRoute, convertToParamMap } from '@angular/router';
 
 import {
     DotContentletEditUrlService,
+    DotContentSearchService,
     DotCurrentUserService,
     DotGlobalMessageService,
     DotHttpErrorManagerService,
     DotMessageService
 } from '@dotcms/data-access';
-import { ComponentStatus } from '@dotcms/dotcms-models';
+import { ComponentStatus, FeaturedFlags } from '@dotcms/dotcms-models';
+import { DotEditContentSidePanelComponent } from '@dotcms/edit-content';
 import { DotClipboardUtil } from '@dotcms/ui';
 
 import { DotQueryToolPageComponent } from './dot-query-tool-page.component';
@@ -50,6 +53,8 @@ const buildStoreMock = (overrides: Partial<Record<string, jest.Mock>> = {}) => (
         .fn()
         .mockReturnValue({ query: '', sort: '', offset: 0, limit: DEFAULT_LIMIT }),
     limitWasCapped: jest.fn().mockReturnValue(false),
+    // `withFlags` slice — side panel off by default (empty map ⇒ `flags()[FLAG] ?? false` is false).
+    flags: jest.fn().mockReturnValue({}),
     emptyStateConfig: jest.fn().mockReturnValue({
         title: 'Empty',
         icon: 'search',
@@ -90,11 +95,16 @@ describe('DotQueryToolPageComponent', () => {
             mockProvider(DotQueryToolService),
             mockProvider(DotContentletEditUrlService, {
                 resolveEditUrl: jest.fn()
+            }),
+            // Deep-link resolve for `?editContent=`; empty by default (no panel opens on load).
+            mockProvider(DotContentSearchService, {
+                get: jest.fn().mockReturnValue(of({ jsonObjectView: { contentlets: [] } }))
             })
         ],
         componentProviders: [
             { provide: DotQueryToolStore, useFactory: () => buildStoreMock(pendingStoreOverrides) },
             DotClipboardUtil
+            // Flag off by default (store mock's `flags()` returns `{}`) → results open in a new tab.
         ]
     });
 
@@ -110,7 +120,15 @@ describe('DotQueryToolPageComponent', () => {
                     provide: ActivatedRoute,
                     useValue: { snapshot: { queryParamMap: convertToParamMap(params) } }
                 },
-                { provide: Location, useValue: { replaceState: locationReplaceStateSpy } }
+                {
+                    provide: Location,
+                    useValue: {
+                        replaceState: locationReplaceStateSpy,
+                        go: jest.fn(),
+                        path: jest.fn().mockReturnValue(''),
+                        subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+                    }
+                }
             ]
         });
         return spectator.inject(DotQueryToolStore, true);
@@ -349,3 +367,264 @@ describe('DotQueryToolPageComponent', () => {
         });
     });
 });
+
+// Sibling top-level describe (own TestBed): the side panel feature flag is ON. New-editor results
+// open in the in-page panel instead of a new tab; legacy/page results still open in a new tab.
+describe('DotQueryToolPageComponent (side panel enabled)', () => {
+    let spectator: Spectator<DotQueryToolPageComponent>;
+    let windowOpenSpy: jest.SpyInstance;
+
+    const createComponent = createComponentFactory({
+        component: DotQueryToolPageComponent,
+        overrideComponents: [
+            [
+                DotQueryToolPageComponent,
+                {
+                    // Stub the side panel so setting `$editPanelRequest` renders a light element we
+                    // can drive its `(saved)`/`(closed)` outputs on, instead of the real editor.
+                    remove: {
+                        providers: [DotQueryToolStore, DotCurrentUserService],
+                        imports: [DotEditContentSidePanelComponent]
+                    },
+                    add: { imports: [MockComponent(DotEditContentSidePanelComponent)] }
+                }
+            ]
+        ],
+        providers: [
+            mockProvider(DotMessageService, { get: jest.fn().mockReturnValue('') }),
+            mockProvider(DotHttpErrorManagerService),
+            mockProvider(DotGlobalMessageService, { error: jest.fn() }),
+            mockProvider(DotQueryToolService),
+            mockProvider(DotContentletEditUrlService, { resolveEditUrl: jest.fn() }),
+            mockProvider(DotContentSearchService, {
+                get: jest.fn().mockReturnValue(of({ jsonObjectView: { contentlets: [] } }))
+            })
+        ],
+        componentProviders: [
+            // Flag on (store mock's `flags()` reports the side panel enabled) → new-editor results
+            // open in the side panel instead of a new tab.
+            {
+                provide: DotQueryToolStore,
+                useFactory: () =>
+                    buildStoreMock({
+                        flags: jest.fn().mockReturnValue({
+                            [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: true
+                        })
+                    })
+            },
+            DotClipboardUtil
+        ]
+    });
+
+    beforeEach(() => {
+        windowOpenSpy = jest.spyOn(window, 'open').mockReturnValue(null);
+        spectator = createComponent({
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: { snapshot: { queryParamMap: convertToParamMap({}) } }
+                },
+                {
+                    provide: Location,
+                    useValue: {
+                        replaceState: jest.fn(),
+                        go: jest.fn(),
+                        path: jest.fn().mockReturnValue(''),
+                        subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+                    }
+                }
+            ]
+        });
+    });
+
+    afterEach(() => windowOpenSpy.mockRestore());
+
+    it('opens the new-editor result in the side panel (no new tab)', () => {
+        const resolver = spectator.inject(DotContentletEditUrlService);
+        (resolver.resolveEditUrl as jest.Mock).mockReturnValue(of('/dotAdmin/#/content/inode-1'));
+
+        spectator.component.onResultClick(SAMPLE_CONTENTLET as never, new MouseEvent('click'));
+
+        expect(windowOpenSpy).not.toHaveBeenCalled();
+        expect(spectator.component.$editPanelRequest()).toEqual({
+            mode: 'edit',
+            contentletInode: 'inode-1',
+            identifier: 'id-1',
+            title: 'Home'
+        });
+    });
+
+    it('reflects the open panel in the URL via editContent (history push, so Back can pop it)', () => {
+        const resolver = spectator.inject(DotContentletEditUrlService);
+        (resolver.resolveEditUrl as jest.Mock).mockReturnValue(of('/dotAdmin/#/content/inode-1'));
+        const location = spectator.inject(Location);
+
+        spectator.component.onResultClick(SAMPLE_CONTENTLET as never, new MouseEvent('click'));
+        spectator.flushEffects();
+
+        expect(location.go).toHaveBeenCalledWith(expect.stringContaining('editContent=id-1'));
+    });
+
+    it('uses replaceState (not go) when the panel closes, so Back cannot resurrect the removed param', () => {
+        const resolver = spectator.inject(DotContentletEditUrlService);
+        (resolver.resolveEditUrl as jest.Mock).mockReturnValue(of('/dotAdmin/#/content/inode-1'));
+        const location = spectator.inject(Location);
+
+        spectator.component.onResultClick(SAMPLE_CONTENTLET as never, new MouseEvent('click'));
+        spectator.flushEffects();
+        (location.go as jest.Mock).mockClear();
+        (location.replaceState as jest.Mock).mockClear();
+
+        spectator.component.$editPanelRequest.set(null);
+        spectator.flushEffects();
+
+        expect(location.replaceState).toHaveBeenCalledTimes(1);
+        expect(location.go).not.toHaveBeenCalled();
+    });
+
+    it('routes browser Back through the panel close guard (does not clear silently)', () => {
+        const requestClose = jest.fn();
+        jest.spyOn(spectator.component, '$sidePanel').mockReturnValue({
+            requestClose
+        } as unknown as DotEditContentSidePanelComponent);
+        spectator.component.$editPanelRequest.set({
+            mode: 'edit',
+            contentletInode: 'inode-1',
+            identifier: 'id-1'
+        });
+        const location = spectator.inject(Location);
+        const popstate = (location.subscribe as jest.Mock).mock.calls[0][0] as (event: {
+            url: string;
+        }) => void;
+
+        popstate({ url: '/query-tool?q=x' });
+
+        expect(requestClose).toHaveBeenCalledTimes(1);
+        expect(location.replaceState).toHaveBeenCalled();
+    });
+
+    it('opens legacy-editor results in a new tab (not the panel)', () => {
+        const resolver = spectator.inject(DotContentletEditUrlService);
+        (resolver.resolveEditUrl as jest.Mock).mockReturnValue(of('/dotAdmin/#/c/content/inode-1'));
+
+        spectator.component.onResultClick(SAMPLE_CONTENTLET as never, new MouseEvent('click'));
+
+        expect(windowOpenSpy).toHaveBeenCalledWith('/dotAdmin/#/c/content/inode-1', '_blank');
+        expect(spectator.component.$editPanelRequest()).toBeNull();
+    });
+
+    it('reloads results on the panel (saved) output and clears the request on (closed)', async () => {
+        const store = spectator.inject(DotQueryToolStore, true);
+        spectator.component.$editPanelRequest.set({ mode: 'edit', contentletInode: 'inode-1' });
+        spectator.detectChanges();
+        // The panel is behind `@defer`; its dynamic import resolves as a microtask, so the element
+        // isn't in the DOM until the fixture settles.
+        await spectator.fixture.whenStable();
+        spectator.detectChanges();
+
+        // Drive the real template bindings (saved)/(closed), not the handlers directly.
+        const panelSelector = '[data-testid="query-tool-edit-panel"]';
+        spectator.triggerEventHandler(panelSelector, 'saved', undefined);
+        expect(store.runSearch).toHaveBeenCalledTimes(1);
+
+        spectator.triggerEventHandler(panelSelector, 'closed', undefined);
+        expect(spectator.component.$editPanelRequest()).toBeNull();
+    });
+});
+
+// Sibling top-level describe (own TestBed): the `?editContent=` deep link is read in `ngOnInit`,
+// so — unlike the shell's constructor-time read — it CAN share this factory's shape, but each test
+// still needs its own `ActivatedRoute`/flag value before construction, hence a dedicated describe.
+describe('DotQueryToolPageComponent (editContent deep link)', () => {
+    let spectator: Spectator<DotQueryToolPageComponent>;
+    // Side-panel flag as reported by the store's `withFlags` slice; set per test before mounting.
+    let flagsValue: Partial<Record<FeaturedFlags, boolean>>;
+
+    const createComponent = createComponentFactory({
+        component: DotQueryToolPageComponent,
+        overrideComponents: [
+            [
+                DotQueryToolPageComponent,
+                {
+                    remove: {
+                        providers: [DotQueryToolStore, DotCurrentUserService],
+                        imports: [DotEditContentSidePanelComponent]
+                    },
+                    add: { imports: [MockComponent(DotEditContentSidePanelComponent)] }
+                }
+            ]
+        ],
+        providers: [
+            mockProvider(DotMessageService, { get: jest.fn().mockReturnValue('') }),
+            mockProvider(DotHttpErrorManagerService),
+            mockProvider(DotGlobalMessageService, { error: jest.fn() }),
+            mockProvider(DotQueryToolService),
+            mockProvider(DotContentletEditUrlService, { resolveEditUrl: jest.fn() })
+        ],
+        componentProviders: [
+            {
+                provide: DotQueryToolStore,
+                useFactory: () => buildStoreMock({ flags: jest.fn(() => flagsValue) })
+            },
+            DotClipboardUtil
+        ]
+    });
+
+    beforeEach(() => {
+        flagsValue = { [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: true };
+    });
+
+    const mount = (editContent: string) =>
+        createComponent({
+            providers: [
+                {
+                    provide: ActivatedRoute,
+                    useValue: { snapshot: { queryParamMap: convertToParamMap({ editContent }) } }
+                },
+                {
+                    provide: Location,
+                    useValue: {
+                        replaceState: jest.fn(),
+                        go: jest.fn(),
+                        path: jest.fn().mockReturnValue(''),
+                        subscribe: jest.fn().mockReturnValue({ unsubscribe: jest.fn() })
+                    }
+                },
+                mockProvider(DotContentSearchService, {
+                    get: jest
+                        .fn()
+                        .mockReturnValue(
+                            of({ jsonObjectView: { contentlets: [SAMPLE_CONTENTLET] } })
+                        )
+                })
+            ]
+        });
+
+    it('resolves and opens the panel from a shared link when the side panel flag is on', () => {
+        spectator = mount('id-1');
+
+        expect(spectator.component.$editPanelRequest()).toEqual({
+            mode: 'edit',
+            contentletInode: 'inode-1',
+            identifier: 'id-1',
+            title: 'Home'
+        });
+    });
+
+    it('ignores the deep link when the side panel flag is off (no in-page editor to open it in)', () => {
+        flagsValue = {};
+
+        spectator = mount('id-1');
+
+        expect(spectator.component.$editPanelRequest()).toBeNull();
+    });
+
+    it('ignores the deep link when the flag never resolved (empty slice ⇒ off, same as #3)', () => {
+        // withFlags degrades to an empty slice on a failed config read; the deep link must not throw
+        // and must not open the panel — same safe outcome as the flag being explicitly off.
+        flagsValue = {};
+
+        expect(() => (spectator = mount('id-1'))).not.toThrow();
+        expect(spectator.component.$editPanelRequest()).toBeNull();
+    });
+});
diff --git a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.ts b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.ts
index 421fdbfe3ae3..c3a15f430b45 100644
--- a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.ts
+++ b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/dot-query-tool-page.component.ts
@@ -1,20 +1,25 @@
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+import { EMPTY } from 'rxjs';
 
 import { DOCUMENT, Location } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
+    computed,
+    DestroyRef,
     effect,
     inject,
+    Injector,
     OnInit,
     signal,
     untracked,
     viewChild
 } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { MenuItem } from 'primeng/api';
+import { MenuItem, MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
@@ -22,21 +27,24 @@ import { Menu, MenuModule } from 'primeng/menu';
 import { MessageModule } from 'primeng/message';
 import { PanelModule } from 'primeng/panel';
 import { Popover, PopoverModule } from 'primeng/popover';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { SkeletonModule } from 'primeng/skeleton';
 import { SplitterModule } from 'primeng/splitter';
 import { TableModule } from 'primeng/table';
 import { TabsModule } from 'primeng/tabs';
 import { TooltipModule } from 'primeng/tooltip';
 
-import { take } from 'rxjs/operators';
+import { catchError, filter, switchMap, take } from 'rxjs/operators';
 
 import {
     DotContentletEditUrlService,
+    DotContentSearchService,
     DotCurrentUserService,
     DotGlobalMessageService,
     DotMessageService
 } from '@dotcms/data-access';
-import { ComponentStatus, DotCMSContentlet } from '@dotcms/dotcms-models';
+import { ComponentStatus, DotCMSContentlet, FeaturedFlags } from '@dotcms/dotcms-models';
+import { DotEditContentSidePanelComponent, EditContentDialogData } from '@dotcms/edit-content';
 import {
     DOT_MONACO_BASE_OPTIONS,
     DOT_MONACO_RAW_OPTIONS,
@@ -83,9 +91,13 @@ const QUERY_EDITOR_OPTIONS = {
         MenuModule,
         PopoverModule,
         DotEmptyContainerComponent,
-        DotMessagePipe
+        DotMessagePipe,
+        DotEditContentSidePanelComponent,
+        ProgressSpinnerModule
     ],
-    providers: [DotQueryToolStore, DotCurrentUserService, DotClipboardUtil],
+    // MessageService: the Edit Content side panel's editor injects PrimeNG's MessageService for
+    // inline toasts; provide it here (as Content Drive's shell does) so the panel works in-page.
+    providers: [DotQueryToolStore, DotCurrentUserService, DotClipboardUtil, MessageService],
     templateUrl: './dot-query-tool-page.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: { class: 'flex flex-col h-full min-h-0 bg-white' }
@@ -100,9 +112,58 @@ export class DotQueryToolPageComponent implements OnInit {
     readonly #route = inject(ActivatedRoute);
     readonly #location = inject(Location);
     readonly #editUrlResolver = inject(DotContentletEditUrlService);
+    readonly #contentSearch = inject(DotContentSearchService);
+    readonly #destroyRef = inject(DestroyRef);
+    readonly #injector = inject(Injector);
 
     #lastSyncedUrl: string | null = null;
 
+    /**
+     * The rendered side panel, so browser Back can route its close through the panel's guard.
+     * Queried by template ref var (`#sidePanelRef`), not the class token: passing the class itself
+     * would be a runtime reference to it outside the `@defer` block below, which disqualifies it
+     * from Angular's automatic deferred-import bundling (the `<T>` here is a type-only generic,
+     * erased at compile time — it leaves no runtime reference).
+     */
+    readonly $sidePanel = viewChild<DotEditContentSidePanelComponent>('sidePanelRef');
+
+    /**
+     * Feature flag gating the side panel. When off, editing a result opens the editor in a new
+     * browser tab (the previous behavior); when on, results that resolve to the new content editor
+     * open in the in-page side panel instead. Read from the store's `withFlags` slice (batch-fetched
+     * once on init, degrades to `false` on a failed config read) — defaults to `false` until it
+     * resolves, so the safe/previous new-tab behavior is used meanwhile.
+     */
+    readonly $sidePanelEnabled = computed(
+        () => this.store.flags()[FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL] ?? false
+    );
+
+    /** Content shown in the Edit Content side panel, or `null` when it is closed. */
+    readonly $editPanelRequest = signal<EditContentDialogData | null>(null);
+
+    /**
+     * Whether the last `editContent` URL write reflected an open panel — so a close writes with
+     * replaceState instead of a history push whose Back would resurrect the just-removed param.
+     */
+    #editContentUrlWasSet = false;
+
+    /**
+     * Reflects the open edit panel in the URL (`?editContent=<identifier>`) so it is shareable,
+     * refresh-safe, and dismissible with browser Back (see the popstate listener in ngOnInit).
+     * Written with `Location.go` (a history push) — NOT `replaceState` like the search-param sync
+     * above — precisely so Back has an entry to pop. `merge` preserves the query-tool params.
+     */
+    // eslint-disable-next-line no-unused-private-class-members -- effect() runs for its side effects
+    readonly #editContentUrlEffect = effect(() => {
+        const request = this.$editPanelRequest();
+
+        untracked(() =>
+            this.#syncEditContentParam(
+                request?.mode === 'edit' ? (request.identifier ?? null) : null
+            )
+        );
+    });
+
     // Mirrors store state into the address bar via Location.replaceState, but only
     // once the search settles (LOADED or ERROR). Tying the sync to `status` instead
     // of the inputs means typing in the param fields never touches the URL — only
@@ -143,7 +204,7 @@ export class DotQueryToolPageComponent implements OnInit {
     readonly DEFAULT_LIMIT = DEFAULT_LIMIT;
     readonly DEFAULT_OFFSET = DEFAULT_OFFSET;
 
-    readonly splitterPt = { root: { class: 'border-0! rounded-none!' } };
+    readonly splitterPt = { root: { class: 'border-0! rounded-none!' }, panel: {} };
     readonly tabPanelsPt = { root: { class: 'flex-1 min-h-0 overflow-auto p-0!' } };
     readonly tabPanelPt = { root: { class: 'h-full p-0!' } };
 
@@ -211,14 +272,46 @@ export class DotQueryToolPageComponent implements OnInit {
         if (query.trim()) {
             this.store.runSearch();
         }
+
+        // Shareable deep-link: `?editContent=<identifier>` reopens the edit panel on load. No flag
+        // gate — the param is only ever written while the side panel is active (flag on), so its
+        // presence already implies a panel context (and the flag may not have resolved yet).
+        const editContent = params.get('editContent');
+        if (editContent) {
+            this.#resolveAndOpenByIdentifier(editContent);
+        }
+
+        // Browser Back/Forward: nothing else reacts to the `editContent` param (written via
+        // Location.go, not the router). When Back removes/changes it while the panel is open, route
+        // the close through the panel's unsaved-changes guard — a direct clear would tear the editor
+        // down and discard unsaved edits silently.
+        const locationSubscription = this.#location.subscribe((event) => {
+            const backParams = new URLSearchParams(event.url?.split('?')[1] ?? '');
+            const editContentParam = backParams.get('editContent');
+            const request = this.$editPanelRequest();
+
+            if (request?.mode === 'edit' && request.identifier !== editContentParam) {
+                // Restore the param so the URL matches the still-open panel while the guard decides.
+                const restored = this.#router
+                    .createUrlTree([], {
+                        relativeTo: this.#route,
+                        queryParams: { editContent: request.identifier },
+                        queryParamsHandling: 'merge'
+                    })
+                    .toString();
+                this.#location.replaceState(restored);
+                this.$sidePanel()?.requestClose();
+            }
+        });
+        this.#destroyRef.onDestroy(() => locationSubscription.unsubscribe());
     }
 
     onQueryChange(value: string): void {
         this.store.setQuery(value);
     }
 
-    onTabChange(value: string): void {
-        if (VALID_TABS.has(value as QueryToolActiveTab)) {
+    onTabChange(value: string | number | undefined): void {
+        if (typeof value === 'string' && VALID_TABS.has(value as QueryToolActiveTab)) {
             this.store.setActiveTab(value as QueryToolActiveTab);
         }
     }
@@ -231,9 +324,39 @@ export class DotQueryToolPageComponent implements OnInit {
 
     onResultClick(contentlet: DotCMSContentlet, event: MouseEvent): void {
         event.preventDefault();
-        // Open the placeholder synchronously so the popup blocker accepts it; assign the
-        // resolved URL once DotContentletEditUrlService returns. The resolver may answer
-        // synchronously (HTMLPAGE / cached content type) — that's fine, subscribe still
+
+        // Side panel enabled: resolve first (no intermediate tab). New-editor content opens in
+        // the in-page panel; legacy-editor and HTMLPAGE content still open in a new tab. For a
+        // cached content type the resolver answers synchronously, so the fallback `window.open`
+        // stays within the click gesture and the popup blocker accepts it.
+        if (this.$sidePanelEnabled()) {
+            this.#editUrlResolver
+                .resolveEditUrl(contentlet)
+                .pipe(take(1))
+                .subscribe({
+                    next: (url) => {
+                        if (this.#isNewEditorUrl(url)) {
+                            this.$editPanelRequest.set({
+                                mode: 'edit',
+                                contentletInode: contentlet.inode,
+                                identifier: contentlet.identifier,
+                                title: contentlet.title
+                            });
+
+                            return;
+                        }
+
+                        window.open(url, '_blank');
+                    },
+                    error: () => this.#globalMessage.error()
+                });
+
+            return;
+        }
+
+        // Side panel disabled: open the placeholder synchronously so the popup blocker accepts it,
+        // then assign the resolved URL once DotContentletEditUrlService returns. The resolver may
+        // answer synchronously (HTMLPAGE / cached content type) — that's fine, subscribe still
         // delivers on the same tick.
         const placeholder = window.open('about:blank', '_blank');
         if (!placeholder) return;
@@ -249,6 +372,94 @@ export class DotQueryToolPageComponent implements OnInit {
             });
     }
 
+    /** Re-runs the search after a save so the results table reflects the edited content. */
+    onEditPanelSaved(): void {
+        this.store.runSearch();
+    }
+
+    /** Clears the side panel request, closing the panel. */
+    onEditPanelClosed(): void {
+        this.$editPanelRequest.set(null);
+    }
+
+    /**
+     * True when `url` targets the new content editor (`/dotAdmin/#/content/<inode>`). The legacy
+     * editor (`/c/content/`) and the page editor (`/edit-page/`) resolve to different prefixes, so
+     * only the new editor is eligible for the in-page side panel.
+     */
+    #isNewEditorUrl(url: string): boolean {
+        return url.startsWith('/dotAdmin/#/content/');
+    }
+
+    /**
+     * Writes/clears `editContent` (merged with the query-tool params). Pushes when opening the
+     * panel (so browser Back can pop it) but replaces when closing — a push on close would leave a
+     * phantom history entry whose Back puts the removed param back with no panel rendered.
+     */
+    #syncEditContentParam(identifier: string | null): void {
+        const url = this.#router
+            .createUrlTree([], {
+                relativeTo: this.#route,
+                queryParams: { editContent: identifier },
+                queryParamsHandling: 'merge'
+            })
+            .toString();
+
+        if (url !== this.#location.path(true)) {
+            if (identifier === null && this.#editContentUrlWasSet) {
+                this.#location.replaceState(url);
+            } else {
+                this.#location.go(url);
+            }
+        }
+
+        this.#editContentUrlWasSet = identifier !== null;
+    }
+
+    /**
+     * Resolves a shared `?editContent=` identifier to its working contentlet and opens the panel.
+     * Gated on the side-panel flag (via `$sidePanelEnabled`, the store's `withFlags` slice, awaited
+     * through `toObservable` + `filter(Boolean)`): with the flag off there is no in-page editor in
+     * Query Tool — editing opens a new tab, which needs a user gesture and can't be triggered on
+     * load — so the deep link is ignored (AC15) and the content search never fires. The param can
+     * outlive the flag being on (shared link / bookmark / staging→prod), hence the gate.
+     *
+     * Waiting on the flag (rather than checking it after firing the search) avoids two problems: a
+     * wasted content search on every deep-link load while the flag is off, and a race between the
+     * flag's config fetch and this search where the search could resolve first and silently drop a
+     * valid deep link. `filter(Boolean)` never emits while the flag is `false`, so `takeUntilDestroyed`
+     * is required to stop waiting if the component is destroyed first.
+     */
+    #resolveAndOpenByIdentifier(identifier: string): void {
+        toObservable(this.$sidePanelEnabled, { injector: this.#injector })
+            .pipe(
+                filter(Boolean),
+                take(1),
+                switchMap(() =>
+                    this.#contentSearch
+                        .get<{ jsonObjectView: { contentlets: DotCMSContentlet[] } }>({
+                            query: `+identifier:${identifier} +working:true`,
+                            limit: 1
+                        })
+                        .pipe(catchError(() => EMPTY))
+                ),
+                takeUntilDestroyed(this.#destroyRef)
+            )
+            .subscribe((entity) => {
+                const contentlet = entity?.jsonObjectView?.contentlets?.[0];
+                if (!contentlet?.inode) {
+                    return;
+                }
+
+                this.$editPanelRequest.set({
+                    mode: 'edit',
+                    contentletInode: contentlet.inode,
+                    identifier,
+                    title: contentlet.title
+                });
+            });
+    }
+
     useExample(query: string): void {
         this.store.setQuery(query);
         this.$helpPopover().hide();
diff --git a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.spec.ts b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.spec.ts
index 541d1d673bf1..5c128472df4e 100644
--- a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.spec.ts
+++ b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.spec.ts
@@ -4,9 +4,10 @@ import { EMPTY, of, throwError } from 'rxjs';
 import {
     DotCurrentUserService,
     DotHttpErrorManagerService,
-    DotMessageService
+    DotMessageService,
+    DotPropertiesService
 } from '@dotcms/data-access';
-import { ComponentStatus } from '@dotcms/dotcms-models';
+import { ComponentStatus, FeaturedFlags } from '@dotcms/dotcms-models';
 
 import {
     DEFAULT_LIMIT,
@@ -43,6 +44,14 @@ describe('DotQueryToolStore', () => {
             mockProvider(DotMessageService, { get: jest.fn().mockReturnValue('') }),
             mockProvider(DotCurrentUserService, {
                 getCurrentUser: jest.fn().mockReturnValue(of({ admin: true }))
+            }),
+            // `withFlags` batch-fetches the side-panel flag on init.
+            mockProvider(DotPropertiesService, {
+                getFeatureFlags: jest
+                    .fn()
+                    .mockReturnValue(
+                        of({ [FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]: true })
+                    )
             })
         ]
     });
@@ -66,6 +75,15 @@ describe('DotQueryToolStore', () => {
         expect(spectator.service.isAdmin()).toBe(true);
     });
 
+    it('resolves the side-panel feature flag into the flags slice on init', () => {
+        expect(spectator.inject(DotPropertiesService).getFeatureFlags).toHaveBeenCalledWith([
+            FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL
+        ]);
+        expect(spectator.service.flags()[FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL]).toBe(
+            true
+        );
+    });
+
     describe('setters', () => {
         it('updates query', () => {
             spectator.service.setQuery('+live:true');
diff --git a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.ts b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.ts
index 66a70aab6c32..40384b59be72 100644
--- a/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.ts
+++ b/core-web/libs/portlets/dot-query-tool/src/lib/dot-query-tool-page/store/dot-query-tool.store.ts
@@ -20,7 +20,8 @@ import {
     DotHttpErrorManagerService,
     DotMessageService
 } from '@dotcms/data-access';
-import { ComponentStatus, DotCMSContentlet } from '@dotcms/dotcms-models';
+import { ComponentStatus, DotCMSContentlet, FeaturedFlags } from '@dotcms/dotcms-models';
+import { withFlags } from '@dotcms/store';
 import { PrincipalConfiguration } from '@dotcms/ui';
 
 import {
@@ -71,6 +72,9 @@ const initialState: QueryToolState = {
 
 export const DotQueryToolStore = signalStore(
     withState<QueryToolState>(initialState),
+    // Side-panel feature flag, batch-fetched once on init and exposed as `flags()`. The page
+    // component reads it to decide whether editing a result opens the in-page side panel or a tab.
+    withFlags([FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL] as const),
     withComputed((store) => ({
         contentlets: computed<DotCMSContentlet[]>(
             () => store.response()?.jsonObjectView.contentlets ?? []
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.html
index adda134e7267..f5371c9914b6 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.html
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.html
@@ -9,7 +9,7 @@
                             {{ 'uve.shell.page.locked.locked.by' | dm: [$lockedByDisplay()] }}
                             @if ($lockOptions()?.canLock) {
                                 <button
-                                    class="inline-flex items-center underline text-primary-600 hover:text-primary-700"
+                                    class="inline-flex items-center text-primary-600 underline hover:text-primary-700"
                                     type="button"
                                     [disabled]="$workflowLockIsLoading()"
                                     (click)="toggleLock()">
@@ -38,7 +38,7 @@
         </p-message>
     }
 
-    <router-outlet />
+    <router-outlet (activate)="onRouteActivate($event)" (deactivate)="onRouteDeactivate()" />
 } @else {
     @if ($errorDisplay()?.code === 401) {
         <dot-not-license />
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
index 671500c9caa6..14f343333d5c 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
@@ -623,6 +623,41 @@ describe('DotEmaShellComponent', () => {
                     angularCurrentPortlet: 'edit-page'
                 });
             });
+
+            it('routes the properties click through the active editor (new editor/side panel) when the content route is mounted, instead of the legacy dialog', () => {
+                const openContentForEdit = jest.fn();
+                spectator.component.onRouteActivate({ openContentForEdit });
+                const dialogSpy = jest.spyOn(spectator.component.dialog, 'editContentlet');
+
+                const navBar = spectator.debugElement.query(By.css('[data-testid="ema-nav-bar"]'));
+                spectator.triggerEventHandler(navBar, 'action', 'properties');
+
+                expect(openContentForEdit).toHaveBeenCalledWith(
+                    expect.objectContaining({ inode: '123', identifier: '123' })
+                );
+                expect(dialogSpy).not.toHaveBeenCalled();
+            });
+
+            it('falls back to the legacy dialog when a sibling route (layout/rules/experiments) is active', () => {
+                spectator.component.onRouteActivate({ openContentForEdit: jest.fn() });
+                spectator.component.onRouteDeactivate();
+                const dialogSpy = jest.spyOn(spectator.component.dialog, 'editContentlet');
+
+                const navBar = spectator.debugElement.query(By.css('[data-testid="ema-nav-bar"]'));
+                spectator.triggerEventHandler(navBar, 'action', 'properties');
+
+                expect(dialogSpy).toHaveBeenCalled();
+            });
+
+            it('ignores an activated component that does not expose openContentForEdit (a sibling route)', () => {
+                spectator.component.onRouteActivate({ someOtherMethod: jest.fn() });
+                const dialogSpy = jest.spyOn(spectator.component.dialog, 'editContentlet');
+
+                const navBar = spectator.debugElement.query(By.css('[data-testid="ema-nav-bar"]'));
+                spectator.triggerEventHandler(navBar, 'action', 'properties');
+
+                expect(dialogSpy).toHaveBeenCalled();
+            });
         });
 
         describe('Page Params', () => {
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
index 2706cec7c713..263d7e65af3c 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
@@ -26,7 +26,12 @@ import { filter } from 'rxjs/operators';
 
 import { DotMessageService } from '@dotcms/data-access';
 import { SiteService } from '@dotcms/dotcms-js';
-import { DEFAULT_VARIANT_ID, DotPageToolUrlParams, FeaturedFlags } from '@dotcms/dotcms-models';
+import {
+    DEFAULT_VARIANT_ID,
+    DotCMSContentlet,
+    DotPageToolUrlParams,
+    FeaturedFlags
+} from '@dotcms/dotcms-models';
 import {
     DotPageScannerReportComponent,
     DotPageToolsSeoComponent,
@@ -55,6 +60,23 @@ import {
     shouldNavigate
 } from '../utils';
 
+/** Structural shape of `EditEmaEditorComponent.openContentForEdit` (the 'content' child route). */
+interface RouteWithOpenContentForEdit {
+    openContentForEdit(contentlet: DotCMSContentlet): void;
+}
+
+/**
+ * Duck-typed guard instead of `instanceof EditEmaEditorComponent`: that class is lazy-loaded via
+ * `loadComponent` in `lib.routes.ts`, and a value import here (required by `instanceof`) would pull
+ * it into this shell's eager chunk, defeating the code-split.
+ */
+function hasOpenContentForEdit(component: unknown): component is RouteWithOpenContentForEdit {
+    return (
+        !!component &&
+        typeof (component as RouteWithOpenContentForEdit).openContentForEdit === 'function'
+    );
+}
+
 @Component({
     selector: 'dot-ema-shell',
     templateUrl: './dot-ema-shell.component.html',
@@ -81,6 +103,13 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
     @ViewChild('pageTools') pageTools!: DotPageToolsSeoComponent;
     @ViewChild('pageScanner') pageScanner!: DotPageScannerReportComponent;
 
+    /**
+     * The active child route's component, when it's the 'content' route (`EditEmaEditorComponent`)
+     * — captured via the router-outlet `(activate)`/`(deactivate)` below. `null` while on a sibling
+     * route ('layout', 'rules', 'experiments') that doesn't expose `openContentForEdit`.
+     */
+    #activeEditor: RouteWithOpenContentForEdit | null = null;
+
     readonly uveStore = inject(UVEStore);
     readonly destroyRef = inject(DestroyRef);
     readonly #activatedRoute = inject(ActivatedRoute);
@@ -326,6 +355,20 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
         this.uveStore.pageReload();
     }
 
+    /**
+     * Tracks the active child route's component (bound to the `router-outlet` in the template) so
+     * "Properties" can route through the new editor's side panel when it's mounted (the 'content'
+     * route). See {@link RouteWithOpenContentForEdit} for why this isn't `instanceof`-based.
+     */
+    onRouteActivate(component: unknown): void {
+        this.#activeEditor = hasOpenContentForEdit(component) ? component : null;
+    }
+
+    /** Clears the active-editor reference so a sibling route (layout/rules/experiments) falls back. */
+    onRouteDeactivate(): void {
+        this.#activeEditor = null;
+    }
+
     /**
      * Handle actions from nav bar
      *
@@ -341,6 +384,16 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
                 return;
             }
 
+            // Editing the page's own properties is editing its contentlet — route it through the
+            // same feature-flag-aware entry point as every other edit flow (new editor/side panel
+            // when enabled for the page's content type, legacy dialog otherwise). Only available
+            // while the 'content' child route is mounted; on 'layout'/'rules'/'experiments' fall
+            // back to this shell's own legacy dialog (previous, route-independent behavior).
+            if (this.#activeEditor) {
+                this.#activeEditor.openContentForEdit(page as unknown as DotCMSContentlet);
+                return;
+            }
+
             this.dialog.editContentlet({
                 inode: page.inode,
                 title: page.title,
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html
index a4601fb8fc44..392fd35688f0 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html
@@ -294,6 +294,28 @@
         (onSaved)="reloadPage()" />
 }
 
+<!-- Edit Content side panel (replaces the centered dialog). Post-save work runs via the request's
+     onContentSaved/onCancel callbacks; closing clears the request.
+     `@defer` splits the editor out of this portlet's chunk, fetched only on the first open (UVE
+     already imports the centered-dialog editor eagerly, so the marginal savings here are smaller
+     than in Content Drive/Query Tool, but the split still costs nothing). The inner `@if` still
+     mounts/destroys a fresh editor on every open/close — `@defer`'s `when` trigger only gates the
+     one-time chunk load, it does not toggle like `@if`. -->
+@defer (when $editContentPanel()) {
+    @if ($editContentPanel(); as data) {
+        <dot-edit-content-side-panel
+            data-testId="edit-content-side-panel"
+            [data]="data"
+            (closed)="$editContentPanel.set(null)" />
+    }
+} @loading {
+    <div
+        class="fixed right-4 bottom-4 z-10000 rounded-full bg-white p-3 shadow-lg"
+        data-testid="edit-content-side-panel-loading">
+        <p-progressSpinner styleClass="h-8! w-8!" strokeWidth="4" ariaLabel="loading editor" />
+    </div>
+}
+
 <div
     #customDragImage
     class="border-round-lg absolute z-1 border bg-white p-3"
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts
index a6981545a575..4f7491276475 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts
@@ -106,7 +106,7 @@ import {
     dotPropertiesServiceMock,
     mockCurrentUser
 } from '../shared/mocks';
-import { ActionPayload } from '../shared/models';
+import { ActionPayload, VTLFile } from '../shared/models';
 import { UVEStore } from '../store/dot-uve.store';
 import { IframeAccessMode } from '../store/models';
 
@@ -2462,6 +2462,106 @@ describe('EditEmaEditorComponent', () => {
                 });
             });
 
+            describe('handleEditVTL', () => {
+                const VTL_FILE_MOCK: VTLFile = { inode: 'vtl-inode-123', name: 'my-template.vtl' };
+
+                afterEach(() => {
+                    jest.restoreAllMocks();
+                });
+
+                it('should open the legacy VTL dialog when the contentlet lookup fails', () => {
+                    const dotContentletService =
+                        spectator.debugElement.injector.get(DotContentletService);
+                    jest.spyOn(dotContentletService, 'getContentletByInode').mockReturnValue(
+                        throwError(() => new Error('network error'))
+                    );
+                    const dialogSpy = jest.spyOn(spectator.component.dialog, 'editVTLContentlet');
+
+                    spectator.component.handleEditVTL(VTL_FILE_MOCK);
+                    spectator.detectChanges();
+
+                    expect(dialogSpy).toHaveBeenCalledWith(VTL_FILE_MOCK);
+                });
+
+                it('should open the legacy dialog when the resolved content type does not enable the new editor', () => {
+                    const dotContentletService =
+                        spectator.debugElement.injector.get(DotContentletService);
+                    jest.spyOn(dotContentletService, 'getContentletByInode').mockReturnValue(
+                        of({ ...URL_MAP_CONTENTLET, inode: 'vtl-inode-123', contentType: 'test' })
+                    );
+                    const dotContentTypeService =
+                        spectator.debugElement.injector.get(DotContentTypeService);
+                    jest.spyOn(dotContentTypeService, 'getContentType').mockReturnValue(
+                        of(
+                            createFakeContentType({
+                                variable: 'test',
+                                name: 'Test',
+                                metadata: {
+                                    [FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED]: false
+                                }
+                            })
+                        )
+                    );
+                    const dialogSpy = jest.spyOn(spectator.component.dialog, 'editContentlet');
+                    const dialogServiceOpenSpy = jest.spyOn(
+                        spectator.inject(DialogService),
+                        'open'
+                    );
+
+                    spectator.component.handleEditVTL(VTL_FILE_MOCK);
+                    spectator.detectChanges();
+
+                    expect(dialogSpy).toHaveBeenCalledWith(
+                        expect.objectContaining({ inode: 'vtl-inode-123' })
+                    );
+                    expect(dialogServiceOpenSpy).not.toHaveBeenCalled();
+                });
+
+                it('should open the new edit content flow when CONTENT_EDITOR2_ENABLED is true on the resolved content type', async () => {
+                    const dotContentletService =
+                        spectator.debugElement.injector.get(DotContentletService);
+                    jest.spyOn(dotContentletService, 'getContentletByInode').mockReturnValue(
+                        of({ ...URL_MAP_CONTENTLET, inode: 'vtl-inode-123', contentType: 'test' })
+                    );
+                    const dotContentTypeService =
+                        spectator.debugElement.injector.get(DotContentTypeService);
+                    jest.spyOn(dotContentTypeService, 'getContentType').mockReturnValue(
+                        of(
+                            createFakeContentType({
+                                variable: 'test',
+                                name: 'Test',
+                                metadata: {
+                                    [FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED]: true
+                                }
+                            })
+                        )
+                    );
+                    const dialogSpy = jest.spyOn(spectator.component.dialog, 'editContentlet');
+                    const dialogRefMock = {
+                        onClose: new Subject<void | unknown>(),
+                        close: jest.fn()
+                    };
+                    const dialogServiceOpenSpy = jest
+                        .spyOn(spectator.inject(DialogService), 'open')
+                        .mockReturnValue(dialogRefMock as unknown as DynamicDialogRef);
+
+                    spectator.component.handleEditVTL(VTL_FILE_MOCK);
+                    spectator.detectChanges();
+
+                    await spectator.fixture.whenStable();
+
+                    expect(dialogSpy).not.toHaveBeenCalled();
+                    expect(dialogServiceOpenSpy).toHaveBeenCalled();
+                    const [, config] = dialogServiceOpenSpy.mock.calls[0];
+                    expect(config.data).toEqual(
+                        expect.objectContaining({
+                            mode: 'edit',
+                            contentletInode: 'vtl-inode-123'
+                        })
+                    );
+                });
+            });
+
             describe('handleEditWithCopyDecision', () => {
                 const MULTI_PAGE_PAYLOAD: ActionPayload = {
                     ...EDIT_ACTION_PAYLOAD_MOCK,
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts
index 7fb083d8552e..4d04fee8a99e 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts
@@ -32,6 +32,7 @@ import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { PopoverModule } from 'primeng/popover';
 import { ProgressBarModule } from 'primeng/progressbar';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { TabsModule } from 'primeng/tabs';
 import { ToolbarModule } from 'primeng/toolbar';
 import { TooltipModule } from 'primeng/tooltip';
@@ -59,7 +60,11 @@ import {
     SeoMetaTags,
     SeoMetaTagsResult
 } from '@dotcms/dotcms-models';
-import { DotEditContentDialogComponent, EditContentDialogData } from '@dotcms/edit-content';
+import {
+    DotEditContentDialogComponent,
+    DotEditContentSidePanelComponent,
+    EditContentDialogData
+} from '@dotcms/edit-content';
 import { DotPaletteListStore, DotResultsSeoToolComponent } from '@dotcms/portlets/dot-ema/ui';
 import { GlobalStore } from '@dotcms/store';
 import { DotCMSPage, DotCMSURLContentMap, DotCMSUVEAction, UVE_MODE } from '@dotcms/types';
@@ -172,7 +177,9 @@ const MESSAGE_KEY = {
         PopoverModule,
         TooltipModule,
         DotMessagePipe,
-        DotUveDeviceControlsComponent
+        DotUveDeviceControlsComponent,
+        DotEditContentSidePanelComponent,
+        ProgressSpinnerModule
     ],
     providers: [
         DotPaletteListStore,
@@ -274,6 +281,22 @@ export class EditEmaEditorComponent implements OnDestroy, AfterViewInit {
     readonly host = '*';
     readonly $ogTags: WritableSignal<SeoMetaTags> = signal(undefined);
 
+    /**
+     * Drives the Edit Content side panel: the content to open (create/edit) or `null` when closed.
+     * Only used when {@link $sidePanelEnabled} is on; the template renders the panel while set.
+     */
+    protected readonly $editContentPanel = signal<EditContentDialogData | null>(null);
+
+    /**
+     * Feature flag: when on, the editor opens in the side panel; when off, it opens in the centered
+     * dialog (previous behavior). Read from the UVE store's `withFlags` slice (batch-fetched once on
+     * init, degrades to `false` on a failed config read) — defaults to `false` until it resolves, so
+     * the dialog is used meanwhile.
+     */
+    protected readonly $sidePanelEnabled = computed(
+        () => this.uveStore.flags()[FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL] ?? false
+    );
+
     // Component builds its own editor props locally
     protected readonly $showDialogs = computed<boolean>(() => {
         const canEditPage = this.uveStore.editorCanEditContent();
@@ -1270,7 +1293,7 @@ export class EditEmaEditorComponent implements OnDestroy, AfterViewInit {
             return;
         }
 
-        this.#openContentForEdit(contentlet);
+        this.openContentForEdit(contentlet);
     }
 
     /**
@@ -1317,10 +1340,12 @@ export class EditEmaEditorComponent implements OnDestroy, AfterViewInit {
     }
 
     /**
-     * Opens the new Angular editor if the content type has the flag enabled, otherwise the legacy dialog.
-     * Single entry point used by handleOpenFullEditor and handleEditWithCopyDecision.
+     * Opens the new Angular editor if the content type has the flag enabled, otherwise the legacy
+     * dialog. Single entry point used by handleOpenFullEditor and handleEditWithCopyDecision — and,
+     * since it's public, also by DotEmaShellComponent for the "Properties" nav action (editing the
+     * page's own contentlet), captured via the router-outlet `(activate)` reference to this component.
      */
-    #openContentForEdit(contentlet: DotCMSContentlet): void {
+    openContentForEdit(contentlet: DotCMSContentlet): void {
         const contentTypeVariable = contentlet.contentType;
         if (!contentTypeVariable) {
             this.dialog?.editContentlet(contentlet);
@@ -1379,9 +1404,20 @@ export class EditEmaEditorComponent implements OnDestroy, AfterViewInit {
     }
 
     /**
-     * Opens the DotEditContentDialogComponent shell with the given header and dialog data.
+     * Opens the new Edit Content editor with the given header and dialog data — in the side panel
+     * when the feature flag is on, otherwise in the centered dialog (previous behavior).
      */
     #openDotEditContentShell(header: string, dialogData: EditContentDialogData): void {
+        if (this.$sidePanelEnabled()) {
+            // Side panel: shows `title` in its header (the dialog used `header`) and fires
+            // `dialogData.onContentSaved`/`onCancel` on close — so palette-drop / edit flows work
+            // unchanged.
+            this.$editContentPanel.set({ ...dialogData, title: header });
+
+            return;
+        }
+
+        // Side panel disabled: open the centered dialog (previous behavior).
         this.dialogService.open(DotEditContentDialogComponent, {
             appendTo: 'body',
             baseZIndex: 10000,
@@ -1422,7 +1458,7 @@ export class EditEmaEditorComponent implements OnDestroy, AfterViewInit {
 
         const onMultiplePages = Number(contentlet.onNumberOfPages ?? 1) > 1;
         if (!onMultiplePages) {
-            this.#openContentForEdit(contentlet as unknown as DotCMSContentlet);
+            this.openContentForEdit(contentlet as unknown as DotCMSContentlet);
             return;
         }
 
@@ -1445,7 +1481,7 @@ export class EditEmaEditorComponent implements OnDestroy, AfterViewInit {
                         this.uveStore.pageReload();
                     }
 
-                    this.#openContentForEdit(target);
+                    this.openContentForEdit(target);
                 },
                 error: (error: HttpErrorResponse) => {
                     this.dotHttpErrorManagerService.handle(error);
@@ -1458,13 +1494,31 @@ export class EditEmaEditorComponent implements OnDestroy, AfterViewInit {
     }
 
     /**
-     * Handles the edit of a VTL file.
+     * Handles the edit of a VTL file. `VTLFile` only carries `inode`/`name` (it comes from the
+     * client's postMessage payload), not `contentType`, so `openContentForEdit`'s flag check can't
+     * run on it directly — the full contentlet is resolved by inode first. Falls back to the legacy
+     * dialog if that lookup fails (network/permissions), matching this codebase's established
+     * "swallow the error, keep editing working via the legacy editor" fallback pattern.
      *
      * @param {VTLFile} vtlFile - The VTL file to be edited.
      * @memberof EditEmaEditorComponent
      */
     handleEditVTL(vtlFile: VTLFile) {
-        this.dialog.editVTLContentlet(vtlFile);
+        this.dotContentletService
+            .getContentletByInode(vtlFile.inode)
+            .pipe(
+                take(1),
+                takeUntilDestroyed(this.destroyRef),
+                catchError(() => of(null))
+            )
+            .subscribe((contentlet) => {
+                if (!contentlet) {
+                    this.dialog?.editVTLContentlet(vtlFile);
+                    return;
+                }
+
+                this.openContentForEdit(contentlet);
+            });
     }
 
     /**
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts
index aaab0e78db9d..369480f173f6 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts
@@ -1,4 +1,5 @@
 import { DotDeviceListItem, FeaturedFlags } from '@dotcms/dotcms-models';
+import { DotFeatureFlags } from '@dotcms/store';
 import { DotCMSViewAsPersona } from '@dotcms/types';
 import { StyleEditorFieldType } from '@dotcms/types/internal';
 
@@ -114,8 +115,18 @@ export const UVE_FEATURE_FLAGS = [
     FeaturedFlags.FEATURE_FLAG_UVE_TOGGLE_LOCK,
     FeaturedFlags.FEATURE_FLAG_UVE_STYLE_EDITOR,
     FeaturedFlags.FEATURE_FLAG_PAGE_SCANNER,
-    FeaturedFlags.FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION
-];
+    FeaturedFlags.FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION,
+    // Gates the Edit Content side panel (create/edit contentlet in a slide-in over the editor).
+    FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL
+] as const;
+
+/**
+ * Type of the `flags` slice `withFlags(UVE_FEATURE_FLAGS)` contributes to the store — derived from
+ * the list above so it can never drift from the flags actually fetched. Features that read
+ * individual flags (not just contribute to the list) extend their `state` type constraint with
+ * this, since `UVEState` itself does not declare `flags` (`withFlags` owns that slice).
+ */
+export type UVEFeatureFlags = DotFeatureFlags<(typeof UVE_FEATURE_FLAGS)[number]>;
 
 export const DEFAULT_DEVICE: DotDeviceListItem = {
     icon: 'pi pi-desktop',
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/CLAUDE.md b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/CLAUDE.md
index d27fa343dab2..e10e1e89b586 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/CLAUDE.md
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/CLAUDE.md
@@ -15,7 +15,6 @@ store/
     │   ├── withLock.ts       # Lock management
     │   ├── save/withSave.ts  # Save operations
     │   └── toolbar/withUVEToolbar.ts
-    ├── flags/withFlags.ts    # Feature flag signals
     ├── layout/withLayout.ts  # Layout tab computeds
     ├── track/withTrack.ts    # Analytics tracking
     ├── workflow/withWorkflow.ts
@@ -163,7 +162,7 @@ withSave → withLoad → withClient
 `withLoad` uses two `withMethods` calls: the first adds `updatePageParams` (no DI needed), the second injects all services. This is a workaround for ngrx/signals requiring methods to be available before they are used inside other methods. Do not collapse them into one block.
 
 ### Feature flag signals as a typed map
-`withFlags` fetches all feature flags from `DotPropertiesService` once and exposes them as a `flags()` signal: a strongly-typed record `UVEFlags`. Consuming features read individual flags via `flags().FEATURE_FLAG_*`. Never inject `DotPropertiesService` inside other features to read flags — always go through `flags()`.
+`withFlags` fetches all feature flags from `DotPropertiesService` once and exposes them as a `flags()` signal, typed from `UVE_FEATURE_FLAGS` (must be declared `as const` for the narrowing to apply). Consuming features read individual flags via `flags()[FeaturedFlags.FEATURE_FLAG_*]`. Never inject `DotPropertiesService` inside other features to read flags — always go through `flags()`.
 
 ### Debounced analytics
 `withTrack` wraps tracking calls in `DEBOUNCE_FOR_TRACKING` (5000ms) to avoid noise on rapid state changes. Always apply this wrapper to new tracking methods — raw analytics events on every signal change will flood the analytics backend.
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts
index 7e069f9710b5..c5a943192538 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts
@@ -1,12 +1,12 @@
 import { patchState, signalStore, withFeature, withMethods, withState } from '@ngrx/signals';
 
+import { withFlags } from '@dotcms/store';
 import { DotCMSPageAsset } from '@dotcms/types';
 
 import { withContentTypeCache } from './features/content-type-cache/withContentTypeCache';
 import { withView } from './features/editor/toolbar/withView';
 import { withEditor } from './features/editor/withEditor';
 import { withSelectionAnchor } from './features/editor/withSelectionAnchor';
-import { withFlags } from './features/flags/withFlags';
 import { withLayout } from './features/layout/withLayout';
 import { withPage } from './features/page/withPage';
 import { withPageApi } from './features/page-api/withPageApi';
@@ -24,8 +24,9 @@ const initialState: UVEState = {
     // UVE system state (managed by withUve)
     uveStatus: UVE_STATUS.LOADING,
     uveCurrentUser: null,
-    // Flags (managed by withFlags)
-    flags: {}, // Will be populated by withFlags feature
+    // Flags — withFlags populates this on init; see the note on UVEState.flags for why the slice
+    // is also declared here rather than left entirely to the feature.
+    flags: {},
     // Page state (managed by withPage)
     pageParams: null,
     pageLanguages: [],
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withView.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withView.spec.ts
index d499dff73460..1331f2116672 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withView.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withView.spec.ts
@@ -8,6 +8,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { DotPropertiesService } from '@dotcms/data-access';
 import { DEFAULT_VARIANT_ID, DEFAULT_VARIANT_NAME, DotDevice } from '@dotcms/dotcms-models';
+import { withFlags } from '@dotcms/store';
 import { UVE_MODE } from '@dotcms/types';
 import { getRunningExperimentMock, mockDotDevices } from '@dotcms/utils-testing';
 
@@ -25,7 +26,6 @@ import {
 import { MOCK_RESPONSE_HEADLESS, mockCurrentUser } from '../../../../shared/mocks';
 import { Orientation, UVEState } from '../../../models';
 import { createInitialUVEState } from '../../../testing/mocks';
-import { withFlags } from '../../flags/withFlags';
 import { withPage } from '../../page/withPage';
 
 const pageParams = {
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts
index c1bcfa45acc4..02cc655056f2 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts
@@ -12,6 +12,7 @@ import {
     DotWorkflowsActionsService
 } from '@dotcms/data-access';
 import { DEFAULT_VARIANT_ID } from '@dotcms/dotcms-models';
+import { withFlags } from '@dotcms/store';
 import { UVE_MODE } from '@dotcms/types';
 import { WINDOW } from '@dotcms/utils';
 import { DotLanguagesServiceMock, mockWorkflowsActions } from '@dotcms/utils-testing';
@@ -38,7 +39,6 @@ import { ActionPayload, SelectedContentlet } from '../../../shared/models';
 import { getPersonalization, mapContainerStructureToArrayOfContainers } from '../../../utils';
 import { PageType, UVEState } from '../../models';
 import { createInitialUVEState } from '../../testing/mocks';
-import { withFlags } from '../flags/withFlags';
 import { withPage } from '../page/withPage';
 import { withWorkflow } from '../workflow/withWorkflow';
 
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/models.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/models.ts
deleted file mode 100644
index 2a57837ed18e..000000000000
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/models.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FeaturedFlags } from '@dotcms/dotcms-models';
-
-type UVEFlagKeys =
-    | FeaturedFlags.FEATURE_FLAG_UVE_TOGGLE_LOCK
-    | FeaturedFlags.FEATURE_FLAG_UVE_STYLE_EDITOR
-    | FeaturedFlags.FEATURE_FLAG_PAGE_SCANNER
-    | FeaturedFlags.FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION;
-
-export type UVEFlags = { [K in UVEFlagKeys]?: boolean };
-
-export interface WithFlagsState {
-    flags: UVEFlags;
-}
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts
deleted file mode 100644
index 2cc40a98baa4..000000000000
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { describe } from '@jest/globals';
-import { signalStore, withState } from '@ngrx/signals';
-import { createServiceFactory, SpectatorService } from '@openng/spectator/jest';
-import { of } from 'rxjs';
-
-import { DotPropertiesService } from '@dotcms/data-access';
-import { FEATURE_FLAG_NOT_FOUND, FeaturedFlags } from '@dotcms/dotcms-models';
-
-import { withFlags } from './withFlags';
-
-import { UVEState } from '../../models';
-import { createInitialUVEState } from '../../testing/mocks';
-
-const initialState = createInitialUVEState();
-
-const MOCK_UVE_FEATURE_FLAGS = [FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE];
-
-export const uveStoreMock = signalStore(
-    withState<UVEState>(initialState),
-    withFlags(MOCK_UVE_FEATURE_FLAGS)
-);
-
-const MOCK_RESPONSE = MOCK_UVE_FEATURE_FLAGS.reduce((acc, flag) => {
-    acc[flag] = true;
-
-    return acc;
-}, {});
-
-describe('withFlags', () => {
-    describe('onInit', () => {
-        let spectator: SpectatorService<InstanceType<typeof uveStoreMock>>;
-        let store: InstanceType<typeof uveStoreMock>;
-
-        const createService = createServiceFactory({
-            service: uveStoreMock,
-            providers: [
-                {
-                    provide: DotPropertiesService,
-                    useValue: {
-                        getFeatureFlags: jest.fn().mockReturnValue(of(MOCK_RESPONSE))
-                    }
-                }
-            ]
-        });
-
-        beforeEach(() => {
-            spectator = createService();
-            store = spectator.service;
-        });
-
-        it('should call propertiesService.getFeatureFlags with flags', () => {
-            const propertiesService = spectator.inject(DotPropertiesService);
-
-            expect(propertiesService.getFeatureFlags).toHaveBeenCalledWith(MOCK_UVE_FEATURE_FLAGS);
-        });
-
-        it('should patch state with flags', () => {
-            expect(store.flags()).toEqual(MOCK_RESPONSE);
-        });
-    });
-
-    describe('flag normalization', () => {
-        const flag = FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE;
-        const propertiesServiceMock = { getFeatureFlags: jest.fn() };
-
-        const createService = createServiceFactory({
-            service: uveStoreMock,
-            providers: [{ provide: DotPropertiesService, useValue: propertiesServiceMock }]
-        });
-
-        it('should normalize NOT_FOUND to true (flag not configured on server)', () => {
-            propertiesServiceMock.getFeatureFlags.mockReturnValue(
-                of({ [flag]: FEATURE_FLAG_NOT_FOUND })
-            );
-            const s = createService();
-            expect(s.service.flags()[flag]).toBe(true);
-        });
-
-        it('should keep boolean true as true (flag explicitly enabled)', () => {
-            propertiesServiceMock.getFeatureFlags.mockReturnValue(of({ [flag]: true }));
-            const s = createService();
-            expect(s.service.flags()[flag]).toBe(true);
-        });
-
-        it('should keep boolean false as false (flag explicitly disabled)', () => {
-            propertiesServiceMock.getFeatureFlags.mockReturnValue(of({ [flag]: false }));
-            const s = createService();
-            expect(s.service.flags()[flag]).toBe(false);
-        });
-
-        it('should normalize any unknown string value to false', () => {
-            propertiesServiceMock.getFeatureFlags.mockReturnValue(
-                of({ [flag]: 'FF_NOT_AVAILABLE' })
-            );
-            const s = createService();
-            expect(s.service.flags()[flag]).toBe(false);
-        });
-    });
-});
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts
deleted file mode 100644
index 1641f2bef0ff..000000000000
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { patchState, signalStoreFeature, type, withHooks, withState } from '@ngrx/signals';
-
-import { inject } from '@angular/core';
-
-import { map, take } from 'rxjs/operators';
-
-import { DotPropertiesService } from '@dotcms/data-access';
-import { FEATURE_FLAG_NOT_FOUND, FeaturedFlags } from '@dotcms/dotcms-models';
-
-import { WithFlagsState } from './models';
-
-import { UVEState } from '../../models';
-
-/**
- * @description Fetches feature flags on store init and patches them into state.
- *
- * Flag values come from {@link DotPropertiesService.getFeatureFlags}, which returns
- * booleans for defined flags and maps `FEATURE_FLAG_NOT_FOUND` (flag not set on the
- * server) to `true` — meaning undefined flags are treated as enabled by default.
- */
-export function withFlags(flags: FeaturedFlags[]) {
-    return signalStoreFeature(
-        { state: type<UVEState>() },
-        withState<WithFlagsState>({ flags: {} }),
-        withHooks({
-            onInit: (store) => {
-                const propertiesService = inject(DotPropertiesService);
-                propertiesService
-                    .getFeatureFlags(flags)
-                    .pipe(
-                        take(1),
-                        // Normalize to boolean: true or NOT_FOUND (flag absent on server) → enabled.
-                        // Mirrors the single-flag getFeatureFlag() default (dot-properties.service.ts:88).
-                        // Any other value, including explicit false, disables the flag.
-                        map((rawFlags) =>
-                            Object.fromEntries(
-                                Object.entries(rawFlags).map(([key, value]) => [
-                                    key,
-                                    value === true || value === FEATURE_FLAG_NOT_FOUND
-                                ])
-                            )
-                        )
-                    )
-                    .subscribe((flags) => {
-                        patchState(store, { flags });
-                    });
-            }
-        })
-    );
-}
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/layout/wihtLayout.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/layout/wihtLayout.spec.ts
index b538f0ebff17..89f9b676ab1f 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/layout/wihtLayout.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/layout/wihtLayout.spec.ts
@@ -6,6 +6,7 @@ import { of } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { DotPropertiesService } from '@dotcms/data-access';
+import { withFlags } from '@dotcms/store';
 
 import { withLayout } from './withLayout';
 
@@ -14,7 +15,6 @@ import { MOCK_RESPONSE_HEADLESS } from '../../../shared/mocks';
 import { mapContainerStructureToDotContainerMap } from '../../../utils';
 import { UVEState } from '../../models';
 import { createInitialUVEState } from '../../testing/mocks';
-import { withFlags } from '../flags/withFlags';
 import { withPage } from '../page/withPage';
 
 const initialState = createInitialUVEState();
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page-api/withPageApi.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page-api/withPageApi.spec.ts
index 68c78beaa3c6..8ec3d413df02 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page-api/withPageApi.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page-api/withPageApi.spec.ts
@@ -13,6 +13,7 @@ import {
     DotWorkflowActionsFireService
 } from '@dotcms/data-access';
 import { DEFAULT_VARIANT_ID, DotLanguage } from '@dotcms/dotcms-models';
+import { withFlags } from '@dotcms/store';
 import { DotPageAssetLayoutRow, UVE_MODE } from '@dotcms/types';
 import { WINDOW } from '@dotcms/utils';
 
@@ -25,7 +26,6 @@ import { UVE_STATUS } from '../../../shared/enums';
 import { MOCK_RESPONSE_HEADLESS, ACTION_PAYLOAD_MOCK } from '../../../shared/mocks';
 import { IframeAccessMode, UVEState } from '../../models';
 import { createInitialUVEState } from '../../testing/mocks';
-import { withFlags } from '../flags/withFlags';
 import { withPage } from '../page/withPage';
 
 const pageParamsBase = {
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page/withPage.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page/withPage.spec.ts
index adf131b32ff6..7d376271716e 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page/withPage.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/page/withPage.spec.ts
@@ -7,6 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { DotPropertiesService } from '@dotcms/data-access';
 import { DotLanguage } from '@dotcms/dotcms-models';
+import { withFlags } from '@dotcms/store';
 import { UVE_MODE } from '@dotcms/types';
 
 import { withPage } from './withPage';
@@ -19,7 +20,6 @@ import { PERSONA_KEY } from '../../../shared/consts';
 import { MOCK_RESPONSE_HEADLESS } from '../../../shared/mocks';
 import { UVEState } from '../../models';
 import { createInitialUVEState } from '../../testing/mocks';
-import { withFlags } from '../flags/withFlags';
 
 const initialState = createInitialUVEState();
 
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/workflow/withWorkflow.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/workflow/withWorkflow.spec.ts
index 86188d5fc081..56f602322cb8 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/workflow/withWorkflow.spec.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/workflow/withWorkflow.spec.ts
@@ -17,6 +17,7 @@ import {
     DotWorkflowsActionsService
 } from '@dotcms/data-access';
 import { DotLanguage } from '@dotcms/dotcms-models';
+import { withFlags } from '@dotcms/store';
 import { DotCMSPageAsset, UVE_MODE } from '@dotcms/types';
 import { DotLanguagesServiceMock, mockWorkflowsActions } from '@dotcms/utils-testing';
 
@@ -27,7 +28,6 @@ import { PERSONA_KEY } from '../../../shared/consts';
 import { MOCK_RESPONSE_HEADLESS, mockCurrentUser } from '../../../shared/mocks';
 import { UVEState } from '../../models';
 import { createInitialUVEState } from '../../testing/mocks';
-import { withFlags } from '../flags/withFlags';
 import { withPage } from '../page/withPage';
 
 const pageParams = {
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/models.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/models.ts
index fb8a1d8f123c..92d6dfaced79 100644
--- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/models.ts
+++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/models.ts
@@ -10,13 +10,12 @@ import {
 import { DotCMSPage } from '@dotcms/types';
 import { StyleEditorFormSchema } from '@dotcms/types/internal';
 
-import { UVEFlags } from './features/flags/models';
-
 import {
     Container,
     ContentletArea,
     EmaDragItem
 } from '../edit-ema-editor/components/ema-page-dropzone/types';
+import { UVEFeatureFlags } from '../shared/consts';
 import { EDITOR_STATE, UVE_STATUS } from '../shared/enums';
 import { DotPageAssetParams, SelectedContentlet } from '../shared/models';
 
@@ -78,8 +77,15 @@ export interface UVEState {
     uveCurrentUser: CurrentUser | null;
 
     // ============ FLAGS (withFlags) ============
-    // Note: flags added by withFlags feature - kept optional for backwards compatibility
-    flags?: UVEFlags;
+    /**
+     * Feature-flag slice. `withFlags` owns it at runtime (it declares and populates it); this
+     * declaration exists purely so features constrained on `UVEState` can READ `flags()` without a
+     * cast — a `signalStoreFeature` returned from a generic function (which `withFlags` is) loses
+     * its state contribution during composition in ngrx/signals, so the slice is invisible to
+     * consumers otherwise. The type is derived from `UVE_FEATURE_FLAGS`, so it cannot drift from
+     * the flags actually fetched.
+     */
+    flags: UVEFeatureFlags;
 
     // ============ PAGE DOMAIN (withPage) ============
     pageParams: DotPageAssetParams | null;
diff --git a/dotCMS/src/main/java/com/dotcms/featureflag/FeatureFlagName.java b/dotCMS/src/main/java/com/dotcms/featureflag/FeatureFlagName.java
index 449302b4036e..8bf1b13ddb86 100644
--- a/dotCMS/src/main/java/com/dotcms/featureflag/FeatureFlagName.java
+++ b/dotCMS/src/main/java/com/dotcms/featureflag/FeatureFlagName.java
@@ -75,6 +75,14 @@ public interface FeatureFlagName {
 
     String FEATURE_FLAG_LOCALE_SELECTOR_V2 = "FEATURE_FLAG_LOCALE_SELECTOR_V2";
 
+    /**
+     * Opens the new content editor (Edit Content v2) in a right slide-in side panel instead of
+     * navigating full-screen (Content Drive) or a centered dialog (UVE). On by default
+     * ({@code dotmarketing-config.properties} sets {@code FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL=true}).
+     * Frontend equivalent: {@code FeaturedFlags.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL}.
+     */
+    String FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL = "FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL";
+
     /**
      * libvips image-engine toggle (off by default; the legacy Java2D engine is used
      * otherwise). The new image editor reads this through the configuration endpoint
diff --git a/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java b/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java
index ef5af4f764fa..3b72863e0c97 100644
--- a/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java
+++ b/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java
@@ -93,6 +93,7 @@ public class ConfigurationResource implements Serializable {
             FeatureFlagName.FEATURE_FLAG_NEW_BLOCK_EDITOR,
             FeatureFlagName.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED,
             FeatureFlagName.FEATURE_FLAG_LOCALE_SELECTOR_V2,
+            FeatureFlagName.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL,
             // libvips engine toggle: the new image editor reads it to gate AVIF output.
             FeatureFlagName.IMAGE_API_USE_LIBVIPS);
 
@@ -111,6 +112,7 @@ public class ConfigurationResource implements Serializable {
                             REPORT_ISSUE_INCLUDE_USER_PII,
                             FeatureFlagName.FEATURE_FLAG_REPORT_ISSUE_ENABLED,
                             FeatureFlagName.FEATURE_FLAG_LOCALE_SELECTOR_V2,
+                            FeatureFlagName.FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL,
                             // libvips engine toggle: the new image editor reads it to gate AVIF output.
                             FeatureFlagName.IMAGE_API_USE_LIBVIPS }));
 
diff --git a/dotCMS/src/main/resources/dotmarketing-config.properties b/dotCMS/src/main/resources/dotmarketing-config.properties
index d973bed21045..983934d2edbb 100644
--- a/dotCMS/src/main/resources/dotmarketing-config.properties
+++ b/dotCMS/src/main/resources/dotmarketing-config.properties
@@ -879,6 +879,10 @@ FEATURE_FLAG_UVE_LEGACY_SCRIPT_INJECTION=false
 ## Enhanced locale selector v2 in the edit-content sidebar
 FEATURE_FLAG_LOCALE_SELECTOR_V2=true
 
+## Opens the new content editor (Edit Content v2) in a right slide-in side panel instead
+## of navigating full-screen (Content Drive) or a centered dialog (UVE).
+FEATURE_FLAG_EDIT_CONTENT_SIDE_PANEL=true
+
 ## libvips image engine toggle. Off by default (legacy Java2D engine). The new image
 ## editor reads this (via the configuration endpoint) to gate the libvips-only AVIF
 ## output format. Declared here so the endpoint returns an explicit boolean instead
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index 8b0b9f5e1fa1..2af54b3fc8e8 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -6532,6 +6532,9 @@ edit.content.layout.select.workflow.warning.switch=Select a Workflow
 edit.content.layout.select.workflow.warning.subtitle=to take action on this content.
 edit.content.sidebar.open=Open sidebar
 edit.content.sidebar.close=Close sidebar
+edit.content.side-panel.expand=Expand panel
+edit.content.side-panel.collapse=Collapse panel
+edit.content.side-panel.close=Close panel
 edit.content.sidebar.tab.information=Information
 edit.content.sidebar.tab.history=History
 edit.content.sidebar.tab.comments=Comments