diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
index 9dfabe283016..466a84284062 100644
--- a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
+++ b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
@@ -1,33 +1,33 @@
-@let formData = $store.formData();
-@let contentType = $store.contentType();
-@let variable = contentType.variable;
-@let contentlet = $store.contentlet();
-@let actionsByContentTypeOrContent = $store.actions();
-@let showSidebar = $store.showSidebar();
-@let isLoading = $store.isLoading();
-
-@if ($store.isEnabledNewContentEditor()) {
-    <p-messages
-        class="edit-content-layout__topBar"
-        styleClass="p-message-border-y"
-        severity="success"
-        data-testId="topBar">
-        <ng-template pTemplate>
-            <i class="pi pi-info-circle"></i>
-            <div>
-                <span [innerHTML]="('edit.content.layout.beta.message' | dm) + ' '"></span>
-                <a
-                    [routerLink]="'/content-types-angular/edit/' + variable"
-                    data-testId="content-type">
-                    {{ 'edit.content.layout.beta.message.switch' | dm }}
-                </a>
-                <span>{{ ' ' }}{{ 'edit.content.layout.beta.message.needed' | dm }}</span>
-            </div>
-        </ng-template>
-    </p-messages>
-}
 <!--Todo: handle Loading and Saving state-->
 @if ($store.isLoaded()) {
+    @let formData = $store.formData();
+    @let contentType = $store.contentType();
+    @let variable = contentType.variable;
+    @let contentlet = $store.contentlet();
+    @let actionsByContentTypeOrContent = $store.actions();
+    @let showSidebar = $store.showSidebar();
+    @let isLoading = $store.isLoading();
+
+    @if ($store.isEnabledNewContentEditor()) {
+        <p-messages
+            class="edit-content-layout__topBar"
+            styleClass="p-message-border-y"
+            severity="success"
+            data-testId="edit-content-layout__topBar">
+            <ng-template pTemplate>
+                <i class="pi pi-info-circle"></i>
+                <div>
+                    <span [innerHTML]="('edit.content.layout.beta.message' | dm) + ' '"></span>
+                    <a
+                        [routerLink]="'/content-types-angular/edit/' + variable"
+                        data-testId="content-type">
+                        {{ 'edit.content.layout.beta.message.switch' | dm }}
+                    </a>
+                    <span>{{ ' ' }}{{ 'edit.content.layout.beta.message.needed' | dm }}</span>
+                </div>
+            </ng-template>
+        </p-messages>
+    }
     <dot-edit-content-toolbar
         (actionFired)="
             fireWorkflowAction({
@@ -37,6 +37,7 @@
             })
         "
         [actions]="actionsByContentTypeOrContent"
+        data-testId="edit-content-layout__header"
         class="edit-content-layout__header">
         <button
             [class.hide]="showSidebar"
@@ -77,19 +78,25 @@
     <dot-edit-content-form
         (changeValue)="setFormValue($event)"
         [formData]="formData"
+        data-testId="edit-content-layout__body"
         class="edit-content-layout__body" />
 
-    <dot-edit-content-aside
-        [loading]="isLoading"
-        [contentlet]="contentlet"
-        [contentType]="contentType"
-        (toggle)="$store.toggleSidebar()"
-        class="edit-content-layout__sidebar" />
+    @if (showSidebar) {
+        @defer (when showSidebar) {
+            <dot-edit-content-aside
+                [loading]="isLoading"
+                [contentlet]="contentlet"
+                [contentType]="contentType"
+                (toggle)="$store.toggleSidebar()"
+                data-testId="edit-content-layout__sidebar"
+                class="edit-content-layout__sidebar" />
+        }
+    }
 }
 
 @if ($store.hasError()) {
     {{ 'edit.content.layout.no.content.to.show ' | dm }}
 }
 
-<p-toast></p-toast>
+<p-toast />
 <p-confirmDialog />
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.spec.ts b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.spec.ts
index e105e0418e50..75387d8a702a 100644
--- a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.spec.ts
@@ -1,258 +1,241 @@
-import { expect } from '@jest/globals';
-import { byTestId } from '@ngneat/spectator';
-import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import {
+    byTestId,
+    createComponentFactory,
+    mockProvider,
+    Spectator,
+    SpyObject
+} from '@ngneat/spectator/jest';
+import { MockComponent, MockModule } from 'ng-mocks';
 import { of } from 'rxjs';
 
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ActivatedRoute } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { fakeAsync, tick } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { MessageService } from 'primeng/api';
+import { ConfirmDialog } from 'primeng/confirmdialog';
 import { MessagesModule } from 'primeng/messages';
+import { Toast, ToastModule } from 'primeng/toast';
 
 import {
     DotContentTypeService,
-    DotMessageService,
-    DotRenderMode,
+    DotHttpErrorManagerService,
     DotWorkflowActionsFireService,
-    DotWorkflowsActionsService,
-    DotFormatDateService
+    DotWorkflowsActionsService
 } from '@dotcms/data-access';
-import { FeaturedFlags } from '@dotcms/dotcms-models';
-import { DotMessagePipe } from '@dotcms/ui';
 import { mockWorkflowsActions } from '@dotcms/utils-testing';
 
 import { EditContentLayoutComponent } from './edit-content.layout.component';
-import { DotEditContentStoreOld } from './store/edit-content.store';
+import { DotEditContentStore } from './store/edit-content.store';
 
 import { DotEditContentAsideComponent } from '../../components/dot-edit-content-aside/dot-edit-content-aside.component';
 import { DotEditContentFormComponent } from '../../components/dot-edit-content-form/dot-edit-content-form.component';
 import { DotEditContentToolbarComponent } from '../../components/dot-edit-content-toolbar/dot-edit-content-toolbar.component';
-import { EditContentPayload } from '../../models/dot-edit-content-form.interface';
+import { DotWorkflowActionParams } from '../../models/dot-edit-content.model';
 import { DotEditContentService } from '../../services/dot-edit-content.service';
-import { BINARY_FIELD_CONTENTLET, CONTENT_TYPE_MOCK } from '../../utils/mocks';
+import * as utils from '../../utils/functions.util';
+import { CONTENT_TYPE_MOCK } from '../../utils/mocks';
 
 describe('EditContentLayoutComponent', () => {
     let spectator: Spectator<EditContentLayoutComponent>;
-    let dotEditContentStore: DotEditContentStoreOld;
-    let dotEditContentService: DotEditContentService;
-    let dotWorkflowsActionsService: DotWorkflowsActionsService;
+    let component: EditContentLayoutComponent;
+    let store: SpyObject<InstanceType<typeof DotEditContentStore>>;
+    let dotContentTypeService: SpyObject<DotContentTypeService>;
+    let workflowActionsService: SpyObject<DotWorkflowsActionsService>;
 
     const createComponent = createComponentFactory({
         component: EditContentLayoutComponent,
         imports: [
-            HttpClientTestingModule,
-            MessagesModule,
-            MockPipe(DotMessagePipe),
+            MockModule(ToastModule),
+
+            MockModule(MessagesModule),
             MockComponent(DotEditContentFormComponent),
-            MockComponent(DotEditContentToolbarComponent),
-            MockComponent(DotEditContentAsideComponent)
+            MockComponent(DotEditContentAsideComponent),
+            MockComponent(DotEditContentToolbarComponent)
+        ],
+        componentProviders: [
+            DotEditContentStore, // Usign the real DotEditContentStore
+            mockProvider(DotWorkflowsActionsService),
+            mockProvider(DotWorkflowActionsFireService),
+            mockProvider(DotEditContentService),
+            mockProvider(DotContentTypeService)
         ],
         providers: [
+            mockProvider(DotHttpErrorManagerService),
             mockProvider(MessageService),
-            mockProvider(DotContentTypeService),
-            mockProvider(DotMessageService),
-            mockProvider(DotFormatDateService),
-            mockProvider(DotEditContentStoreOld),
-            mockProvider(DotWorkflowActionsFireService)
-        ]
-    });
 
-    describe('Existing content', () => {
-        const mockData: EditContentPayload = {
-            actions: mockWorkflowsActions,
-            contentType: CONTENT_TYPE_MOCK,
-            contentlet: BINARY_FIELD_CONTENTLET,
-            loading: false,
-            layout: {
-                showSidebar: true
-            }
-        };
-
-        beforeEach(async () => {
-            spectator = createComponent({
-                detectChanges: false,
-                providers: [
-                    {
-                        provide: DotEditContentService,
-                        useValue: {
-                            getContentById: jest.fn().mockReturnValue(of(BINARY_FIELD_CONTENTLET)),
-                            getContentType: jest.fn().mockReturnValue(of(CONTENT_TYPE_MOCK))
-                        }
-                    },
-                    {
-                        provide: DotWorkflowsActionsService,
-                        useValue: {
-                            getByInode: jest.fn().mockReturnValue(of(mockWorkflowsActions)),
-                            getDefaultActions: jest.fn().mockReturnValue(of(mockWorkflowsActions))
-                        }
-                    },
-                    {
-                        provide: ActivatedRoute,
-                        useValue: { snapshot: { params: { contentType: undefined, id: '1' } } }
+            {
+                provide: ActivatedRoute,
+                useValue: {
+                    // Provide an empty snapshot to bypass the Store's onInit,
+                    // allowing direct method calls for testing
+                    get snapshot() {
+                        return { params: { id: undefined, contentType: undefined } };
                     }
-                ]
-            });
+                }
+            },
+            mockProvider(Router, {
+                navigate: jest.fn().mockReturnValue(Promise.resolve(true)),
+                url: '/test-url',
+                events: of()
+            }),
+
+            provideHttpClient(),
+            provideHttpClientTesting()
+        ]
+    });
 
-            dotEditContentService = spectator.inject(DotEditContentService, true);
-            dotWorkflowsActionsService = spectator.inject(DotWorkflowsActionsService, true);
-            dotEditContentStore = spectator.inject(DotEditContentStoreOld, true);
+    beforeEach(() => {
+        spectator = createComponent({
+            detectChanges: false
         });
 
-        it('should get content data', () => {
-            const spyContent = jest.spyOn(dotEditContentService, 'getContentById');
-            const spyContentType = jest.spyOn(dotEditContentService, 'getContentType');
-            const spyWorkflow = jest.spyOn(dotWorkflowsActionsService, 'getByInode');
+        component = spectator.component;
+        spectator.detectChanges();
 
-            spectator.detectChanges();
+        store = spectator.inject(DotEditContentStore, true);
+        dotContentTypeService = spectator.inject(DotContentTypeService, true);
 
-            expect(spyContent).toHaveBeenCalledWith('1');
-            expect(spyContentType).toHaveBeenCalledWith(BINARY_FIELD_CONTENTLET.contentType);
-            expect(spyWorkflow).toHaveBeenCalledWith('1', DotRenderMode.EDITING);
-        });
+        workflowActionsService = spectator.inject(DotWorkflowsActionsService, true);
 
-        it('should pass the data to the DotEditContentForm Component', () => {
-            spectator.detectChanges();
-            const formComponent = spectator.query(DotEditContentFormComponent);
-            expect(formComponent).toBeDefined();
-            expect(formComponent.formData).toEqual(mockData);
-        });
+        // By default, the local storage is set to true
+        jest.spyOn(utils, 'getPersistSidebarState').mockReturnValue(true);
+    });
 
-        it('should pass the actions to the DotEditContentToolbar Component', () => {
-            spectator.detectChanges();
-            const toolbarComponent = spectator.query(DotEditContentToolbarComponent);
-            expect(toolbarComponent).toBeDefined();
-            expect(toolbarComponent.$actions).toEqual(mockData.actions);
-        });
+    it('should have p-toast component', () => {
+        expect(spectator.query(Toast)).toBeTruthy();
+    });
 
-        it('should pass the contentlet and contentType to the DotEditContentAside Component', () => {
-            spectator.detectChanges();
-            const asideComponent = spectator.query(DotEditContentAsideComponent);
-            expect(asideComponent).toBeDefined();
-            expect(asideComponent.$contentlet).toEqual(mockData.contentlet);
-            expect(asideComponent.$contentType).toEqual(mockData.contentType);
-        });
+    it('should have p-confirmDialog component', () => {
+        expect(spectator.query(ConfirmDialog)).toBeTruthy();
+    });
 
-        it('should fire workflow action', () => {
-            const spyStore = jest.spyOn(dotEditContentStore, 'fireWorkflowActionEffect');
-            spectator.detectChanges();
-            const toolbarComponent = spectator.query(DotEditContentToolbarComponent);
-            toolbarComponent.$actionFired.emit(mockWorkflowsActions[0]);
+    describe('New Content Editor', () => {
+        it('should initialize new content, show layout components and dialogs when new content editor is enabled', fakeAsync(() => {
+            dotContentTypeService.getContentType.mockReturnValue(of(CONTENT_TYPE_MOCK));
+            workflowActionsService.getDefaultActions.mockReturnValue(of(mockWorkflowsActions));
 
-            expect(spyStore).toHaveBeenCalledWith({
-                actionId: mockWorkflowsActions[0].id,
-                inode: BINARY_FIELD_CONTENTLET.inode,
-                data: {
-                    contentlet: expect.any(Object) // Expect any object
-                }
-            });
-        });
+            store.initializeNewContent('contentTypeName');
 
-        it('should hide the beta topBar if metadata is not present', () => {
             spectator.detectChanges();
 
-            const betaTopbar = spectator.query(byTestId('topBar'));
-            expect(betaTopbar).toBeNull();
-        });
+            tick(); // Wait for the defer to load
 
-        it('should show the beta topBar when the metadata is present', () => {
-            spectator.detectChanges();
-            const metadata = {};
-            metadata[FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED] = true;
+            expect(store.isEnabledNewContentEditor()).toBe(true);
+            expect(store.showSidebar()).toBe(true);
+
+            expect(spectator.query(byTestId('edit-content-layout__topBar'))).toBeTruthy();
+            expect(spectator.query(byTestId('edit-content-layout__header'))).toBeTruthy();
+            expect(spectator.query(byTestId('edit-content-layout__body'))).toBeTruthy();
+            expect(spectator.query(byTestId('edit-content-layout__sidebar'))).toBeTruthy();
+
+            expect(spectator.query(Toast)).toBeTruthy();
+            expect(spectator.query(ConfirmDialog)).toBeTruthy();
+        }));
+
+        it('should not show top bar message when new content editor is disabled', () => {
+            const CONTENT_TYPE_MOCK_NO_METADATA = {
+                ...CONTENT_TYPE_MOCK,
+                metadata: undefined
+            };
+
+            dotContentTypeService.getContentType.mockReturnValue(of(CONTENT_TYPE_MOCK_NO_METADATA));
+            workflowActionsService.getDefaultActions.mockReturnValue(of(mockWorkflowsActions));
+
+            store.initializeNewContent('contentTypeName');
 
-            dotEditContentStore.patchState({ contentType: { ...CONTENT_TYPE_MOCK, metadata } });
             spectator.detectChanges();
-            const betaTopbar = spectator.query(byTestId('topBar'));
-            expect(betaTopbar).not.toBeNull();
+            expect(store.isEnabledNewContentEditor()).toBe(false);
+            expect(spectator.query(byTestId('edit-content-layout__topBar'))).toBeNull();
         });
+    });
 
-        it('should toggle the sidebar when the toggle button is clicked', () => {
+    describe('Sidebar', () => {
+        it('should toggle sidebar visibility when toggle button is clicked', fakeAsync(() => {
+            // Setup
+            dotContentTypeService.getContentType.mockReturnValue(of(CONTENT_TYPE_MOCK));
+            workflowActionsService.getDefaultActions.mockReturnValue(of(mockWorkflowsActions));
+            store.initializeNewContent('contentTypeName');
             spectator.detectChanges();
-            const toggleBtn = spectator.query(byTestId('sidebar-toggle'));
+            tick(); // Wait for the defer to load
 
-            expect(toggleBtn.classList).toContain('showSidebar');
+            expect(spectator.query(byTestId('edit-content-layout__sidebar'))).toBeTruthy();
+            expect(spectator.element).toHaveClass('edit-content--with-sidebar');
 
-            spectator.click(toggleBtn);
+            // hide sidebar
+            const sidebarToggle = spectator.query(byTestId('sidebar-toggle'));
+            spectator.click(sidebarToggle);
+            tick(); // Wait for the defer to load
 
-            expect(toggleBtn.classList).not.toContain('showSidebar');
-            spectator.component.toggleSidebar();
-        });
+            expect(spectator.query(byTestId('edit-content-layout__sidebar'))).toBeNull();
+            expect(spectator.element).not.toHaveClass('edit-content--with-sidebar');
+
+            // show sidebar again
+            spectator.click(sidebarToggle);
+            tick(); // Wait for the defer to load
+
+            expect(spectator.query(byTestId('edit-content-layout__sidebar'))).toBeTruthy();
+            expect(spectator.element).toHaveClass('edit-content--with-sidebar');
+        }));
     });
 
-    describe('New content', () => {
-        const mockData: EditContentPayload = {
-            actions: mockWorkflowsActions,
-            contentType: CONTENT_TYPE_MOCK,
-            contentlet: null,
-            loading: false,
-            layout: {
-                showSidebar: true
-            }
-        };
-
-        beforeEach(async () => {
-            spectator = createComponent({
-                detectChanges: false,
-                providers: [
-                    {
-                        provide: DotEditContentService,
-                        useValue: {
-                            getContentById: jest.fn().mockReturnValue(of(BINARY_FIELD_CONTENTLET)),
-                            getContentType: jest.fn().mockReturnValue(of(CONTENT_TYPE_MOCK))
-                        }
-                    },
-                    {
-                        provide: DotWorkflowsActionsService,
-                        useValue: {
-                            getByInode: jest.fn().mockReturnValue(of(mockWorkflowsActions)),
-                            getDefaultActions: jest.fn().mockReturnValue(of(mockWorkflowsActions))
-                        }
-                    },
-                    {
-                        provide: ActivatedRoute,
-                        useValue: {
-                            snapshot: { params: { contentType: mockData.contentType, id: null } }
-                        }
+    describe('fireWorkflowAction', () => {
+        it('should call store.fireWorkflowAction with correct parameters for new content', () => {
+            const formValue = { field1: 'value1', field2: 'value2' };
+            component.setFormValue(formValue);
+
+            const mockFireWorkflowAction = jest.fn();
+            jest.spyOn(store, 'fireWorkflowAction').mockImplementation(mockFireWorkflowAction);
+
+            const actionParams: DotWorkflowActionParams = {
+                actionId: 'action1',
+                inode: '',
+                contentType: 'contentType1'
+            };
+
+            component.fireWorkflowAction(actionParams);
+
+            expect(mockFireWorkflowAction).toHaveBeenCalledWith({
+                actionId: 'action1',
+                inode: '',
+                data: {
+                    contentlet: {
+                        ...formValue,
+                        contentType: 'contentType1'
                     }
-                ]
+                }
             });
-
-            dotEditContentService = spectator.inject(DotEditContentService, true);
-            dotWorkflowsActionsService = spectator.inject(DotWorkflowsActionsService, true);
         });
 
-        it('should get new content data', () => {
-            const spyContent = jest.spyOn(dotEditContentService, 'getContentById');
-            const spyContentType = jest.spyOn(dotEditContentService, 'getContentType');
-            const spyWorkflow = jest.spyOn(dotWorkflowsActionsService, 'getDefaultActions');
+        it('should call store.fireWorkflowAction with correct parameters for existing content', () => {
+            // Create a mock for fireWorkflowAction
+            const mockFireWorkflowAction = jest.fn();
 
-            spectator.detectChanges();
+            // Replace the real method with the mock
+            jest.spyOn(store, 'fireWorkflowAction').mockImplementation(mockFireWorkflowAction);
 
-            expect(spyContentType).toHaveBeenCalledWith(mockData.contentType);
-            expect(spyWorkflow).toHaveBeenCalledWith(mockData.contentType);
-            expect(spyContent).not.toHaveBeenCalledWith();
-        });
+            const formValue = { field1: 'value1', field2: 'value2' };
+            component.setFormValue(formValue);
 
-        it('should pass the data to the DotEditContentForm Component', () => {
-            spectator.detectChanges();
-            const formComponent = spectator.query(DotEditContentFormComponent);
-            expect(formComponent).toBeDefined();
-            expect(formComponent.formData).toEqual(mockData);
-        });
+            const actionParams: DotWorkflowActionParams = {
+                actionId: 'action1',
+                inode: 'existingInode',
+                contentType: 'contentType1'
+            };
 
-        it('should pass the actions to the DotEditContentToolbar Component', () => {
-            spectator.detectChanges();
-            const toolbarComponent = spectator.query(DotEditContentToolbarComponent);
-            expect(toolbarComponent).toBeDefined();
-            expect(toolbarComponent.$actions).toEqual(mockData.actions);
-        });
+            component.fireWorkflowAction(actionParams);
 
-        it('should pass the contentlet and contentType to the DotEditContentAside Component', () => {
-            spectator.detectChanges();
-            const asideComponent = spectator.query(DotEditContentAsideComponent);
-            expect(asideComponent).toBeDefined();
-            expect(asideComponent.$contentlet).toEqual(mockData.contentlet);
-            expect(asideComponent.$contentType).toEqual(mockData.contentType);
+            expect(mockFireWorkflowAction).toHaveBeenCalledWith({
+                actionId: 'action1',
+                inode: 'existingInode',
+                data: {
+                    contentlet: {
+                        ...formValue,
+                        contentType: 'contentType1'
+                    }
+                }
+            });
         });
     });
 });
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts
index 6f0b2d8cca05..93d51202bbc9 100644
--- a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts
+++ b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts
@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 import { MessageService } from 'primeng/api';
@@ -16,6 +16,7 @@ import { DotEditContentStore } from './store/edit-content.store';
 import { DotEditContentAsideComponent } from '../../components/dot-edit-content-aside/dot-edit-content-aside.component';
 import { DotEditContentFormComponent } from '../../components/dot-edit-content-form/dot-edit-content-form.component';
 import { DotEditContentToolbarComponent } from '../../components/dot-edit-content-toolbar/dot-edit-content-toolbar.component';
+import { DotWorkflowActionParams } from '../../models/dot-edit-content.model';
 import { DotEditContentService } from '../../services/dot-edit-content.service';
 
 @Component({
@@ -33,9 +34,6 @@ import { DotEditContentService } from '../../services/dot-edit-content.service';
         DotEditContentToolbarComponent,
         ConfirmDialogModule
     ],
-    templateUrl: './edit-content.layout.component.html',
-    styleUrls: ['./edit-content.layout.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         DotWorkflowsActionsService,
         DotWorkflowActionsFireService,
@@ -46,12 +44,15 @@ import { DotEditContentService } from '../../services/dot-edit-content.service';
 
     host: {
         '[class.edit-content--with-sidebar]': '$store.showSidebar()'
-    }
+    },
+    templateUrl: './edit-content.layout.component.html',
+    styleUrls: ['./edit-content.layout.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EditContentLayoutComponent {
-    $store: InstanceType<typeof DotEditContentStore> = inject(DotEditContentStore);
+    readonly $store: InstanceType<typeof DotEditContentStore> = inject(DotEditContentStore);
 
-    #formValue: Record<string, string>;
+    formValue = signal<Record<string, string>>({});
 
     /**
      * Set the form value to be saved.
@@ -60,7 +61,7 @@ export class EditContentLayoutComponent {
      * @memberof EditContentLayoutComponent
      */
     setFormValue(formValue: Record<string, string>) {
-        this.#formValue = formValue;
+        this.formValue.set(formValue);
     }
 
     /**
@@ -69,13 +70,13 @@ export class EditContentLayoutComponent {
      * @param {DotCMSWorkflowAction} action
      * @memberof EditContentLayoutComponent
      */
-    fireWorkflowAction({ actionId, inode, contentType }): void {
+    fireWorkflowAction({ actionId, inode, contentType }: DotWorkflowActionParams): void {
         this.$store.fireWorkflowAction({
             actionId,
             inode,
             data: {
                 contentlet: {
-                    ...this.#formValue,
+                    ...this.formValue(),
                     contentType
                 }
             }
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.spec.ts b/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.spec.ts
index 77d875922eec..54cb5416b865 100644
--- a/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.spec.ts
+++ b/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.spec.ts
@@ -161,7 +161,7 @@ describe('DotEditContentStore', () => {
             expect(store.contentType()).toEqual(mockContentType);
             expect(store.actions()).toEqual(mockActions);
             expect(store.status()).toBe(ComponentStatus.LOADED);
-            expect(store.error()).toBe('');
+            expect(store.error()).toBe(null);
         });
 
         it('should handle error when initializing existing content', fakeAsync(() => {
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.ts b/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.ts
index dcbef51e5966..6b486d82bb14 100644
--- a/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.ts
+++ b/core-web/libs/edit-content/src/lib/feature/edit-content/store/edit-content.store.ts
@@ -37,20 +37,20 @@ import { getPersistSidebarState, setPersistSidebarState } from '../../../utils/f
 
 interface EditContentState {
     actions: DotCMSWorkflowAction[];
-    contentType: DotCMSContentType;
-    contentlet: DotCMSContentlet;
+    contentType: DotCMSContentType | null;
+    contentlet: DotCMSContentlet | null;
     status: ComponentStatus;
     showSidebar: boolean;
-    error?: string;
+    error: string | null;
 }
 
 const initialState: EditContentState = {
-    contentType: {} as DotCMSContentType,
-    contentlet: {} as DotCMSContentlet,
+    contentType: null,
+    contentlet: null,
     actions: [],
     status: ComponentStatus.INIT,
     showSidebar: false,
-    error: ''
+    error: null
 };
 
 /**
@@ -271,8 +271,9 @@ export const DotEditContentStore = signalStore(
              * and persists the sidebar's state to ensure consistency across sessions.
              */
             toggleSidebar: () => {
-                patchState(store, { showSidebar: !store.showSidebar() });
-                setPersistSidebarState(store.showSidebar() as unknown as string);
+                const newSidebarState = !store.showSidebar();
+                patchState(store, { showSidebar: newSidebarState });
+                setPersistSidebarState(newSidebarState.toString());
             },
 
             /**
diff --git a/core-web/libs/edit-content/src/lib/models/dot-edit-content.model.ts b/core-web/libs/edit-content/src/lib/models/dot-edit-content.model.ts
new file mode 100644
index 000000000000..af652190a5b9
--- /dev/null
+++ b/core-web/libs/edit-content/src/lib/models/dot-edit-content.model.ts
@@ -0,0 +1,11 @@
+/**
+ * Interface for workflow action parameters.
+ *
+ * @export
+ * @interface DotWorkflowActionParams
+ */
+export interface DotWorkflowActionParams {
+    actionId: string;
+    inode: string;
+    contentType: string;
+}
diff --git a/core-web/libs/edit-content/src/lib/utils/functions.util.spec.ts b/core-web/libs/edit-content/src/lib/utils/functions.util.spec.ts
index 5eeded8819a3..f524a60e4f33 100644
--- a/core-web/libs/edit-content/src/lib/utils/functions.util.spec.ts
+++ b/core-web/libs/edit-content/src/lib/utils/functions.util.spec.ts
@@ -3,11 +3,19 @@ import { describe, expect, it } from '@jest/globals';
 import { DotCMSContentTypeField, DotCMSContentTypeFieldVariable } from '@dotcms/dotcms-models';
 
 import * as functionsUtil from './functions.util';
-import { getFieldVariablesParsed, isValidJson, stringToJson, createPaths } from './functions.util';
+import {
+    getFieldVariablesParsed,
+    isValidJson,
+    stringToJson,
+    createPaths,
+    getPersistSidebarState,
+    setPersistSidebarState
+} from './functions.util';
 import { CALENDAR_FIELD_TYPES, JSON_FIELD_MOCK, MULTIPLE_TABS_MOCK } from './mocks';
 
 import { FLATTENED_FIELD_TYPES } from '../models/dot-edit-content-field.constant';
 import { DotEditContentFieldSingleSelectableDataType } from '../models/dot-edit-content-field.enum';
+import { SIDEBAR_LOCAL_STORAGE_KEY } from '../models/dot-edit-content.constant';
 
 describe('Utils Functions', () => {
     const { castSingleSelectableValue, getSingleSelectableFieldOptions, getFinalCastedValue } =
@@ -540,7 +548,9 @@ describe('Utils Functions', () => {
 
         it('should return an empty object when the provided fieldVariables array is undefined', () => {
             const fieldVariables: DotCMSContentTypeFieldVariable[] | undefined = undefined;
-            const result = getFieldVariablesParsed(fieldVariables);
+            const result = getFieldVariablesParsed(
+                fieldVariables as unknown as DotCMSContentTypeFieldVariable[]
+            );
             expect(result).toEqual({});
         });
     });
@@ -591,4 +601,36 @@ describe('Utils Functions', () => {
             expect(paths).toStrictEqual([]);
         });
     });
+
+    describe('Sidebar State Persistence', () => {
+        beforeEach(() => {
+            localStorage.clear();
+        });
+
+        describe('getPersistSidebarState', () => {
+            it('should return true when localStorage is empty', () => {
+                expect(getPersistSidebarState()).toBe(true);
+            });
+
+            it('should return true when localStorage value is "true"', () => {
+                localStorage.setItem(SIDEBAR_LOCAL_STORAGE_KEY, 'true');
+                expect(getPersistSidebarState()).toBe(true);
+            });
+
+            it('should return false when localStorage value is "false"', () => {
+                localStorage.setItem(SIDEBAR_LOCAL_STORAGE_KEY, 'false');
+                expect(getPersistSidebarState()).toBe(false);
+            });
+        });
+
+        describe('setPersistSidebarState', () => {
+            it('should set the value in localStorage', () => {
+                setPersistSidebarState('true');
+                expect(localStorage.getItem(SIDEBAR_LOCAL_STORAGE_KEY)).toBe('true');
+
+                setPersistSidebarState('false');
+                expect(localStorage.getItem(SIDEBAR_LOCAL_STORAGE_KEY)).toBe('false');
+            });
+        });
+    });
 });
diff --git a/core-web/libs/edit-content/src/lib/utils/functions.util.ts b/core-web/libs/edit-content/src/lib/utils/functions.util.ts
index a33d9f166523..efcc963226b3 100644
--- a/core-web/libs/edit-content/src/lib/utils/functions.util.ts
+++ b/core-web/libs/edit-content/src/lib/utils/functions.util.ts
@@ -48,11 +48,23 @@ export const getSingleSelectableFieldOptions = (
 ): { label: string; value: DotEditContentFieldSingleSelectableDataTypes }[] => {
     const lines = (options?.split('\r\n') ?? []).filter((line) => line.trim() !== '');
 
-    return lines?.map((line) => {
-        const [label, value = label] = line.split('|').map((value) => value.trim());
-
-        return { label, value: castSingleSelectableValue(value, dataType) };
-    });
+    return lines
+        .map((line) => {
+            const [label, value = label] = line.split('|').map((value) => value.trim());
+
+            const castedValue = castSingleSelectableValue(value, dataType);
+            if (castedValue === null) {
+                return null;
+            }
+
+            return { label, value: castedValue };
+        })
+        .filter(
+            (
+                item
+            ): item is { label: string; value: DotEditContentFieldSingleSelectableDataTypes } =>
+                item !== null
+        );
 };
 
 // This function is used to cast the value to a correct type for the Angular Form
@@ -87,13 +99,6 @@ export const transformLayoutToTabs = (
     firstTabTitle: string,
     layout: DotCMSContentTypeLayoutRow[]
 ): DotCMSContentTypeLayoutTab[] => {
-    const initialTab = [
-        {
-            title: firstTabTitle,
-            layout: []
-        }
-    ];
-
     // Reduce the layout into tabs
     const tabs = layout.reduce((acc, row) => {
         const { clazz, name } = row.divider || {};
@@ -105,13 +110,19 @@ export const transformLayoutToTabs = (
                 title: name,
                 layout: []
             });
-        } else {
+        } else if (lastTabIndex >= 0) {
             // Otherwise, add the row to the layout of the last tab
             acc[lastTabIndex].layout.push(row);
+        } else {
+            // If there's no tab yet, create the initial tab
+            acc.push({
+                title: firstTabTitle,
+                layout: [row]
+            });
         }
 
         return acc;
-    }, initialTab);
+    }, [] as DotCMSContentTypeLayoutTab[]);
 
     return tabs;
 };
@@ -153,12 +164,12 @@ export const getFieldVariablesParsed = <T extends Record<string, string | boolea
     fieldVariables.forEach(({ key, value }) => {
         // If the value is a boolean string, convert it to a boolean
         if (value === 'true' || value === 'false') {
-            result[key] = value === 'true';
+            (result as Record<string, string | boolean>)[key] = value === 'true';
 
             return;
         }
 
-        result[key] = value;
+        (result as Record<string, string | boolean>)[key] = value;
     });
 
     return result as T;
@@ -209,7 +220,7 @@ export const createPaths = (path: string): string[] => {
         array.push(path);
 
         return array;
-    }, []);
+    }, [] as string[]);
 };
 
 /**
diff --git a/core-web/libs/edit-content/src/lib/utils/mocks.ts b/core-web/libs/edit-content/src/lib/utils/mocks.ts
index 70e235c7a5d4..63a70d4b21c9 100644
--- a/core-web/libs/edit-content/src/lib/utils/mocks.ts
+++ b/core-web/libs/edit-content/src/lib/utils/mocks.ts
@@ -1265,7 +1265,8 @@ export const CONTENT_TYPE_MOCK: DotCMSContentType = {
             system: true
         }
     ],
-    nEntries: 0
+    nEntries: 0,
+    metadata: { [FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED]: true }
 };
 
 export const MockResizeObserver = class {