diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index 9f4262e8bc..7dc8926a96 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -54,6 +54,7 @@
     "@ngx-translate/core": "~15.0.0",
     "@nx/jest": "~19.5.0",
     "@o3r-training/showcase-sdk": "workspace:^",
+    "@o3r-training/training-sdk": "workspace:^",
     "@o3r-training/training-tools": "workspace:^",
     "@o3r/application": "workspace:^",
     "@o3r/components": "workspace:^",
@@ -73,6 +74,7 @@
     "@xterm/xterm": "^5.0.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "bootstrap": "5.3.3",
     "clipboard": "^2.0.11",
     "intl-messageformat": "~10.7.0",
diff --git a/apps/showcase/src/app/component-replacement/component-replacement.component.ts b/apps/showcase/src/app/component-replacement/component-replacement.component.ts
index e510f071be..edeb922751 100644
--- a/apps/showcase/src/app/component-replacement/component-replacement.component.ts
+++ b/apps/showcase/src/app/component-replacement/component-replacement.component.ts
@@ -5,7 +5,7 @@ import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavPresComponent } from '../../compo
 import { AsyncPipe } from '@angular/common';
 import { ComponentReplacementPresComponent } from '../../components/showcase/component-replacement/component-replacement-pres.component';
 import { RouterModule } from '@angular/router';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
@@ -22,8 +22,7 @@ import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
     IN_PAGE_NAV_PRES_DIRECTIVES,
     ComponentReplacementPresComponent,
     MarkdownModule
-  ],
-  providers: [provideMarkdown()]
+  ]
 })
 export class ComponentReplacementComponent implements AfterViewInit {
   private readonly inPageNavPresService = inject(InPageNavPresService);
diff --git a/apps/showcase/src/app/component-replacement/component-replacement.spec.ts b/apps/showcase/src/app/component-replacement/component-replacement.spec.ts
index 56c9b62815..c0ddec72e7 100644
--- a/apps/showcase/src/app/component-replacement/component-replacement.spec.ts
+++ b/apps/showcase/src/app/component-replacement/component-replacement.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComponentReplacementComponent } from './component-replacement.component';
 import { RouterModule } from '@angular/router';
 import { AsyncPipe } from '@angular/common';
+import { provideMarkdown } from 'ngx-markdown';
 import { ComponentReplacementPresComponent } from '../../components/showcase/component-replacement/component-replacement-pres.component';
 
 describe('ComponentReplacementComponent', () => {
@@ -13,7 +14,8 @@ describe('ComponentReplacementComponent', () => {
     await TestBed.configureTestingModule({
       imports: [ComponentReplacementComponent,
         RouterModule.forRoot([]),
-        AsyncPipe]
+        AsyncPipe],
+      providers: [provideMarkdown()]
     }).overrideComponent(ComponentReplacementComponent, {
       remove: { imports: [ComponentReplacementPresComponent] }
     }).compileComponents();
diff --git a/apps/showcase/src/app/configuration/configuration.component.ts b/apps/showcase/src/app/configuration/configuration.component.ts
index 590fa023e5..d7a6066679 100644
--- a/apps/showcase/src/app/configuration/configuration.component.ts
+++ b/apps/showcase/src/app/configuration/configuration.component.ts
@@ -3,7 +3,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, computed, inject, Qu
 import { RouterModule } from '@angular/router';
 import { ConfigurationBaseServiceModule } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { ConfigurationPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 import { ConfigurationPresConfig } from '../../components/showcase/configuration/configuration-pres.config';
 
@@ -29,7 +29,6 @@ const CONFIG_OVERRIDE: ConfigurationPresConfig = {
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './configuration.template.html',
   styleUrls: ['./configuration.style.scss'],
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/configuration/configuration.spec.ts b/apps/showcase/src/app/configuration/configuration.spec.ts
index 9228792f2e..f2460ebb38 100644
--- a/apps/showcase/src/app/configuration/configuration.spec.ts
+++ b/apps/showcase/src/app/configuration/configuration.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 import { O3rElement } from '@o3r/testing/core';
+import { provideMarkdown } from 'ngx-markdown';
 import { ConfigurationComponent } from './configuration.component';
 import { ConfigurationFixtureComponent } from './configuration.fixture';
 let componentFixture: ConfigurationFixtureComponent;
@@ -18,7 +19,8 @@ describe('ConfigurationComponent', () => {
         StoreModule.forRoot(),
         RouterModule.forRoot([]),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(ConfigurationComponent);
     component = fixture.componentInstance;
diff --git a/apps/showcase/src/app/design-token/design-token.component.ts b/apps/showcase/src/app/design-token/design-token.component.ts
index ecc5e55b12..835e687b84 100644
--- a/apps/showcase/src/app/design-token/design-token.component.ts
+++ b/apps/showcase/src/app/design-token/design-token.component.ts
@@ -2,7 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
 
 @O3rComponent({ componentType: 'Page' })
@@ -16,7 +16,6 @@ import { DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, I
     IN_PAGE_NAV_PRES_DIRECTIVES,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './design-token.template.html',
   styleUrl: './design-token.style.scss',
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/design-token/design-token.spec.ts b/apps/showcase/src/app/design-token/design-token.spec.ts
index ecf2affa47..6f294895f7 100644
--- a/apps/showcase/src/app/design-token/design-token.spec.ts
+++ b/apps/showcase/src/app/design-token/design-token.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { DesignTokenComponent } from './design-token.component';
 
@@ -12,7 +13,8 @@ describe('DesignTokenComponent', () => {
       imports: [
         DesignTokenComponent,
         RouterModule.forRoot([])
-      ]
+      ],
+      providers: [provideMarkdown()]
     })
       .compileComponents();
 
diff --git a/apps/showcase/src/app/dynamic-content/dynamic-content.component.ts b/apps/showcase/src/app/dynamic-content/dynamic-content.component.ts
index 02c7717415..cb4f290390 100644
--- a/apps/showcase/src/app/dynamic-content/dynamic-content.component.ts
+++ b/apps/showcase/src/app/dynamic-content/dynamic-content.component.ts
@@ -3,7 +3,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, V
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { DynamicContentPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 
 @O3rComponent({ componentType: 'Page' })
@@ -18,7 +18,6 @@ import { DynamicContentPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './dynamic-content.template.html',
   styleUrls: ['./dynamic-content.style.scss'],
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts b/apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts
index d261e29c3a..7c2ee25a87 100644
--- a/apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts
+++ b/apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts
@@ -2,6 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
 import { O3rElement } from '@o3r/testing/core';
+import { provideMarkdown } from 'ngx-markdown';
 import { DynamicContentComponent } from './dynamic-content.component';
 import { DynamicContentFixtureComponent } from './dynamic-content.fixture';
 let componentFixture: DynamicContentFixtureComponent;
@@ -16,7 +17,8 @@ describe('DynamicContentComponent', () => {
         DynamicContentComponent,
         RouterModule.forRoot([]),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(DynamicContentComponent);
     component = fixture.componentInstance;
diff --git a/apps/showcase/src/app/home/home.component.ts b/apps/showcase/src/app/home/home.component.ts
index 3e6e3a03b9..5096ae2d4c 100644
--- a/apps/showcase/src/app/home/home.component.ts
+++ b/apps/showcase/src/app/home/home.component.ts
@@ -1,14 +1,13 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-home',
   standalone: true,
   imports: [DynamicContentModule, MarkdownModule],
-  providers: [provideMarkdown()],
   templateUrl: './home.template.html',
   styleUrls: ['./home.style.scss'],
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/home/home.spec.ts b/apps/showcase/src/app/home/home.spec.ts
index 844597a045..50f649718e 100644
--- a/apps/showcase/src/app/home/home.spec.ts
+++ b/apps/showcase/src/app/home/home.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMarkdown } from 'ngx-markdown';
 import { HomeComponent } from './home.component';
 
 describe('HomeComponent', () => {
@@ -7,7 +8,8 @@ describe('HomeComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HomeComponent]
+      imports: [HomeComponent],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
diff --git a/apps/showcase/src/app/localization/localization.component.ts b/apps/showcase/src/app/localization/localization.component.ts
index ef02da7511..fecf0f211d 100644
--- a/apps/showcase/src/app/localization/localization.component.ts
+++ b/apps/showcase/src/app/localization/localization.component.ts
@@ -2,7 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService, LocalizationPresComponent } from '../../components/index';
 
 @O3rComponent({ componentType: 'Page' })
@@ -16,7 +16,6 @@ import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InP
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './localization.template.html',
   styleUrls: ['./localization.style.scss'],
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/localization/localization.spec.ts b/apps/showcase/src/app/localization/localization.spec.ts
index d7aababe73..5452577c52 100644
--- a/apps/showcase/src/app/localization/localization.spec.ts
+++ b/apps/showcase/src/app/localization/localization.spec.ts
@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 import { TranslateCompiler, TranslateFakeCompiler } from '@ngx-translate/core';
 import { LocalizationService } from '@o3r/localization';
 import { mockTranslationModules } from '@o3r/testing/localization';
+import { provideMarkdown } from 'ngx-markdown';
 import { LocalizationComponent } from './localization.component';
 const localizationConfiguration = { language: 'en' };
 const mockTranslations = {
@@ -25,7 +26,8 @@ describe('LocalizationComponent', () => {
         LocalizationComponent,
         ...mockTranslationModules(localizationConfiguration, mockTranslations, mockTranslationsCompilerProvider),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(LocalizationComponent);
     component = fixture.componentInstance;
diff --git a/apps/showcase/src/app/rules-engine/rules-engine.component.ts b/apps/showcase/src/app/rules-engine/rules-engine.component.ts
index 4061c111e2..d31563114f 100644
--- a/apps/showcase/src/app/rules-engine/rules-engine.component.ts
+++ b/apps/showcase/src/app/rules-engine/rules-engine.component.ts
@@ -26,7 +26,7 @@ import {
   Ruleset,
   UnaryOperator
 } from '@o3r/rules-engine';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import { firstValueFrom } from 'rxjs';
 import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService, RulesEnginePresComponent } from '../../components/index';
 import { environment } from '../../environments/environment.development';
@@ -58,7 +58,6 @@ import { duringSummer } from '../../operators/index';
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './rules-engine.template.html',
   styleUrls: ['./rules-engine.style.scss'],
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/rules-engine/rules-engine.spec.ts b/apps/showcase/src/app/rules-engine/rules-engine.spec.ts
index 3591c67cb6..57cf9d75be 100644
--- a/apps/showcase/src/app/rules-engine/rules-engine.spec.ts
+++ b/apps/showcase/src/app/rules-engine/rules-engine.spec.ts
@@ -7,6 +7,7 @@ import { TranslateCompiler, TranslateFakeCompiler } from '@ngx-translate/core';
 import { LocalizationService } from '@o3r/localization';
 import { RulesEngineRunnerModule } from '@o3r/rules-engine';
 import { mockTranslationModules } from '@o3r/testing/localization';
+import { provideMarkdown } from 'ngx-markdown';
 import { RulesEngineComponent } from './rules-engine.component';
 import { RouterModule } from '@angular/router';
 
@@ -33,7 +34,8 @@ describe('RulesEngineComponent', () => {
         RouterModule.forRoot([]),
         ...mockTranslationModules(localizationConfiguration, mockTranslations, mockTranslationsCompilerProvider),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     global.fetch = jest.fn(() =>
       Promise.resolve({
diff --git a/apps/showcase/src/app/run-app-locally/run-app-locally.component.ts b/apps/showcase/src/app/run-app-locally/run-app-locally.component.ts
index 34243003bb..018590549a 100644
--- a/apps/showcase/src/app/run-app-locally/run-app-locally.component.ts
+++ b/apps/showcase/src/app/run-app-locally/run-app-locally.component.ts
@@ -1,13 +1,12 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-run-app-locally',
   standalone: true,
   imports: [MarkdownModule],
-  providers: [provideMarkdown()],
   templateUrl: './run-app-locally.template.html',
   styleUrls: ['./run-app-locally.style.scss'],
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/run-app-locally/run-app-locally.spec.ts b/apps/showcase/src/app/run-app-locally/run-app-locally.spec.ts
index 2a017fbe22..59c8179218 100644
--- a/apps/showcase/src/app/run-app-locally/run-app-locally.spec.ts
+++ b/apps/showcase/src/app/run-app-locally/run-app-locally.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { RunAppLocallyComponent } from './run-app-locally.component';
 
@@ -8,7 +9,8 @@ describe('RunAppLocallyComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [RunAppLocallyComponent]
+      imports: [RunAppLocallyComponent],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(RunAppLocallyComponent);
     component = fixture.componentInstance;
diff --git a/apps/showcase/src/app/sdk/sdk.component.ts b/apps/showcase/src/app/sdk/sdk.component.ts
index eb4fb24ff0..70f319b495 100644
--- a/apps/showcase/src/app/sdk/sdk.component.ts
+++ b/apps/showcase/src/app/sdk/sdk.component.ts
@@ -2,7 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { MarkdownModule } from 'ngx-markdown';
 import {
   IN_PAGE_NAV_PRES_DIRECTIVES,
   InPageNavLink,
@@ -22,7 +22,6 @@ import {
     AsyncPipe,
     MarkdownModule
   ],
-  providers: [provideMarkdown()],
   templateUrl: './sdk.template.html',
   styleUrls: ['./sdk.style.scss'],
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/app/sdk/sdk.spec.ts b/apps/showcase/src/app/sdk/sdk.spec.ts
index 0c13a2917c..0ab8bcbac1 100644
--- a/apps/showcase/src/app/sdk/sdk.spec.ts
+++ b/apps/showcase/src/app/sdk/sdk.spec.ts
@@ -3,6 +3,7 @@ import { PetApiFixture } from '@o3r-training/showcase-sdk/fixtures';
 import { AsyncPipe } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { SdkComponent } from './sdk.component';
 import '@angular/localize/init';
@@ -21,7 +22,8 @@ describe('SdkComponent', () => {
         AsyncPipe
       ],
       providers: [
-        {provide: PetApi, useValue: petApiFixture}
+        {provide: PetApi, useValue: petApiFixture},
+        provideMarkdown()
       ]
     });
     fixture = TestBed.createComponent(SdkComponent);
diff --git a/apps/showcase/src/assets/trainings/sdk/program.json b/apps/showcase/src/assets/trainings/sdk/program.json
index 0e9dd75a9c..7bcc23793d 100644
--- a/apps/showcase/src/assets/trainings/sdk/program.json
+++ b/apps/showcase/src/assets/trainings/sdk/program.json
@@ -23,7 +23,7 @@
       "startingFile": "apps/tutorial-app/src/app/app.component.ts",
       "urls": {
         ".": "./shared/monorepo-template.json",
-        "./libs/sdk/src": "o3r/training-sdk/structure/src.json"
+        "./libs/sdk/src": "%40o3r-training/training-sdk/structure/src.json"
       },
       "mode": "interactive",
       "commands": ["npm install --legacy-peer-deps --ignore-scripts --force", "npm run ng run sdk:build", "npm run ng run tutorial-app:serve"]
@@ -36,7 +36,7 @@
       "name": "sdk-specification",
       "startingFile": "open-api.yaml",
       "solutionUrls": {
-        ".": "o3r/training-sdk/structure/spec.json"
+        ".": "%40o3r-training/training-sdk/structure/spec.json"
       },
       "mode": "readonly",
       "commands": []
@@ -49,8 +49,8 @@
       "name": "generate-sdk",
       "startingFile": "src/api/dummy/dummy-api.ts",
       "solutionUrls": {
-        "src": "o3r/training-sdk/structure/src.json",
-        ".": "o3r/training-sdk/structure/spec.json"
+        "src": "%40o3r-training/training-sdk/structure/src.json",
+        ".": "%40o3r-training/training-sdk/structure/spec.json"
       },
       "mode": "readonly",
       "commands": []
@@ -63,11 +63,11 @@
       "name": "generate-date-sdk",
       "startingFile": "open-api.yaml",
       "urls": {
-        ".": "o3r/training-sdk/structure/spec.json"
+        ".": "%40o3r-training/training-sdk/structure/spec.json"
       },
       "solutionUrls": {
-        ".": "o3r/training-sdk/structure/spec.json",
-        "./src": "o3r/training-sdk/structure/src.json"
+        ".": "%40o3r-training/training-sdk/structure/spec.json",
+        "./src": "%40o3r-training/training-sdk/structure/src.json"
       },
       "mode": "readonly",
       "commands": []
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
index c7ee90ab00..1e5280b474 100644
--- a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
+++ b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
@@ -27,12 +27,6 @@
         </code-editor-terminal>
       </ng-template>
     </li>
-  <button type="button" class="btn btn-outline-secondary df-btn-icononly align-self-center ms-auto"
-          [class.fa-chevron-down]="!show"
-          [class.fa-chevron-up]="show"
-          (click)="show = !show">
-    <span class="visually-hidden">{{show ? 'Hide' : 'Show'}}</span>
-  </button>
 </ul>
-<div class="h-100 command-panel" [class.d-none]="!show" [ngbNavOutlet]="nav"></div>
+<div class="h-100 command-panel" [ngbNavOutlet]="nav"></div>
 
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
index 9fc2ca84a1..cbb01c7072 100644
--- a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
+++ b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
@@ -1,10 +1,4 @@
 code-editor-control {
-  transition: min-height 100ms ease;
-
-  &:has(.command-panel.d-none) {
-    min-height: 3rem;
-  }
-
   .tab-content {
     --df-tabs-content-tab-pane-padding: 0;
     overflow: hidden;
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
index 6e65584fbb..e2b603938e 100644
--- a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
+++ b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
@@ -48,11 +48,6 @@ export class CodeEditorControlComponent implements OnDestroy, AfterViewInit {
    */
   public readonly webContainerService = inject(WebContainerService);
 
-  /**
-   * Whether to show the panels - if set to false, hide all the panels and only display the tab bar
-   */
-  public show = true;
-
   /**
    * Current tab displayed
    */
diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
index 7a22f783ad..3660686837 100644
--- a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
+++ b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html
@@ -1,19 +1,32 @@
 @if (cwdTree$ | async; as tree) {
   @if (tree.length) {
-    <form [formGroup]="form" class="editor d-flex flex-fill overflow-hidden">
-      <div class="d-flex h-100 w-100 align-items-stretch">
-        <monaco-tree class="overflow-auto w-25" (clickFile)="onClickFile($event)" [tree]="tree" [currentFile]="project?.startingFile" width="fit-content" height="100%"></monaco-tree>
-        <div class="flex-fill h-100 overflow-hidden monaco-editor-wrapper">
-          <ngx-monaco-editor class="h-100 position-relative"
-            [options]="editorOptions$ | async"
-            formControlName="code">
-          </ngx-monaco-editor>
-        </div>
-      </div>
-    </form>
-    @if (editorMode === 'interactive') {
-      <code-editor-control class="d-flex flex-column" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
-    }
+    <as-split direction="vertical">
+      <as-split-area [size]="50">
+        <form [formGroup]="form" class="editor overflow-hidden h-100">
+            <as-split direction="horizontal">
+              <as-split-area [size]="25">
+                <monaco-tree (clickFile)="onClickFile($event)"
+                             [tree]="tree"
+                             [currentFile]="project?.startingFile"
+                             [width]="'auto'"
+                             [height]="'auto'"
+                             class="w-100"></monaco-tree>
+              </as-split-area>
+              <as-split-area [size]="75">
+                <ngx-monaco-editor class="h-100 position-relative"
+                                   [options]="editorOptions$ | async"
+                                   formControlName="code">
+                </ngx-monaco-editor>
+              </as-split-area>
+            </as-split>
+        </form>
+      </as-split-area>
+      @if (editorMode === 'interactive') {
+        <as-split-area [size]="50">
+          <code-editor-control class="d-flex flex-column h-100" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
+        </as-split-area>
+      }
+    </as-split>
   }
 }
 @if (!(cwdTree$ | async)?.length) {
diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss
index 6f6f79c7a5..fdd982c30f 100644
--- a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss
+++ b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss
@@ -1,11 +1,12 @@
 monaco-tree {
-  max-width: 250px;
   background: #1d1d1d;
 
   .monaco-tree {
     display: flex;
     flex-direction: column;
     overflow: unset !important;
+    max-width: 100%;
+    min-height: 100%;
   }
 
   monaco-tree-icons {
@@ -23,7 +24,3 @@ ngx-monaco-editor {
     max-height: 100% !important;
   }
 }
-
-code-editor-control {
-  min-height: 50%;
-}
diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
index f91be467e1..f8ce748561 100644
--- a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
+++ b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts
@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {FileSystemTree} from '@webcontainer/api';
+import {AngularSplitModule} from 'angular-split';
 import {MonacoEditorModule} from 'ngx-monaco-editor-v2';
 import {MonacoTreeElement, NgxMonacoTreeComponent} from 'ngx-monaco-tree';
 import {
@@ -65,7 +66,8 @@ export interface TrainingProject {
     JsonPipe,
     MonacoEditorModule,
     NgxMonacoTreeComponent,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AngularSplitModule
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.html b/apps/showcase/src/components/training/training-step/training-step-pres.component.html
index 6d38f98fae..a1a06a1fd6 100644
--- a/apps/showcase/src/components/training/training-step/training-step-pres.component.html
+++ b/apps/showcase/src/components/training/training-step/training-step-pres.component.html
@@ -1,17 +1,22 @@
-<div class="d-flex h-100 gap-5">
-  @if (instructions) {
-    <div class="instructions h-100 col overflow-auto">
-      <h2>{{title}}</h2>
-      <markdown clipboard [data]="instructions"></markdown>
-    </div>
-  }
-  @if (project) {
-    <div class="d-flex h-100 overflow-hidden col">
-      <code-editor-view
-        class="d-flex flex-column justify-content-stretch w-100 flex-fill"
-        [project]="project"
-        [editorMode]="editorMode"
-      ></code-editor-view>
-    </div>
-  }
+<div class="h-100">
+  <as-split direction="horizontal">
+    @if (instructions) {
+      <as-split-area [size]="50">
+        <div class="instructions h-100 overflow-auto">
+          <h2>{{title}}</h2>
+          <markdown clipboard [data]="instructions"></markdown>
+        </div>
+      </as-split-area>
+    }
+    @if (project) {
+      <as-split-area [size]="50">
+        <div class="h-100 overflow-hidden">
+          <code-editor-view
+            [project]="project"
+            [editorMode]="editorMode"
+          ></code-editor-view>
+        </div>
+      </as-split-area>
+    }
+  </as-split>
 </div>
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.spec.ts b/apps/showcase/src/components/training/training-step/training-step-pres.component.spec.ts
index ee3bbdae75..fdef4d499c 100644
--- a/apps/showcase/src/components/training/training-step/training-step-pres.component.spec.ts
+++ b/apps/showcase/src/components/training/training-step/training-step-pres.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMarkdown } from 'ngx-markdown';
 import { TrainingStepPresComponent } from './training-step-pres.component';
 
 describe('TrainingStepComponent', () => {
@@ -7,7 +8,8 @@ describe('TrainingStepComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TrainingStepPresComponent]
+      imports: [TrainingStepPresComponent],
+      providers: [provideMarkdown()]
     }).compileComponents();
 
     fixture = TestBed.createComponent(TrainingStepPresComponent);
diff --git a/apps/showcase/src/components/training/training-step/training-step-pres.component.ts b/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
index 39678d0e36..eeee0b6ded 100644
--- a/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
+++ b/apps/showcase/src/components/training/training-step/training-step-pres.component.ts
@@ -3,15 +3,15 @@ import {
   Component,
   Input
 } from '@angular/core';
-import {MarkdownModule, provideMarkdown} from 'ngx-markdown';
+import {AngularSplitModule} from 'angular-split';
+import {MarkdownModule} from 'ngx-markdown';
 import {CodeEditorViewComponent, EditorMode, TrainingProject} from '../code-editor-view';
 
 @Component({
   selector: 'o3r-training-step-pres',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CodeEditorViewComponent, MarkdownModule],
-  providers: [provideMarkdown()],
+  imports: [AngularSplitModule, CodeEditorViewComponent, MarkdownModule],
   templateUrl: './training-step-pres.component.html',
   styleUrl: './training-step-pres.component.scss'
 })
diff --git a/apps/showcase/src/components/training/training.component.html b/apps/showcase/src/components/training/training.component.html
index 585ad4a5b8..4e950f8c64 100644
--- a/apps/showcase/src/components/training/training.component.html
+++ b/apps/showcase/src/components/training/training.component.html
@@ -3,9 +3,6 @@
     <h1 class="m-0 flex-grow-1">{{title()}}</h1>
     <div class="d-flex gap-3">
       @if (currentStep.dynamicContent.project() || currentStep.dynamicContent.solutionProject()) {
-        <button type="button" class="btn btn-outline-primary" (click)="toggleDisplayInstructions()">
-          {{showInstructions() ? 'Hide instructions' : 'Show instructions'}}
-        </button>
         <button type="button" class="btn btn-outline-danger"
                 (click)="toggleDisplaySolution()"
                 [disabled]="!showSolution() && !currentStep.dynamicContent.solutionProject() || showSolution() && !currentStep.dynamicContent.project()"
@@ -36,7 +33,7 @@ <h1 class="m-0 flex-grow-1">{{title()}}</h1>
   <o3r-training-step-pres
     class="flex-fill overflow-hidden mb-5"
     [class.constrained]="!!(currentStep.dynamicContent.solutionProject() || currentStep.dynamicContent.project())"
-    [instructions]="showInstructions() ? currentStep.dynamicContent.htmlContent() : ''"
+    [instructions]="currentStep.dynamicContent.htmlContent()"
     [title]="currentStep.description.title"
     [project]="showSolution() ? currentStep.dynamicContent.solutionProject() : currentStep.dynamicContent.project()"
     [editorMode]="currentStep.description.filesConfiguration?.mode">
diff --git a/apps/showcase/src/components/training/training.component.ts b/apps/showcase/src/components/training/training.component.ts
index 3a217d7150..c40418a103 100644
--- a/apps/showcase/src/components/training/training.component.ts
+++ b/apps/showcase/src/components/training/training.component.ts
@@ -95,8 +95,6 @@ const currentStepLocationRegExp = new RegExp(/#([0-9]+)$/);
 export class TrainingComponent implements OnInit {
   /** Index of the training step to display */
   public currentStepIndex = signal(0);
-  /** Display instructions */
-  public showInstructions = signal(true);
   /** Display exercise solution */
   public showSolution = signal(false);
   /** Training steps */
@@ -251,13 +249,6 @@ export class TrainingComponent implements OnInit {
     this.showSolution.set(false);
   }
 
-  /**
-   * Update the display of instructions and the corresponding button label
-   */
-  public toggleDisplayInstructions() {
-    this.showInstructions.set(!this.showInstructions());
-  }
-
   /**
    * Update the display of the exercise solution and the corresponding button label
    */
diff --git a/package.json b/package.json
index 9b42ac4e5f..090ed132cd 100644
--- a/package.json
+++ b/package.json
@@ -221,6 +221,7 @@
     "@yarnpkg/sdks": "^3.2.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "babel-loader": "^9.0.0",
     "bootstrap": "5.3.3",
     "bootstrap-icons": "^1.11.3",
diff --git a/packages/@o3r-training/training-tools/package.json b/packages/@o3r-training/training-tools/package.json
index c74192e4e2..5d78374029 100644
--- a/packages/@o3r-training/training-tools/package.json
+++ b/packages/@o3r-training/training-tools/package.json
@@ -26,8 +26,8 @@
       "default": "./package.json"
     },
     ".": {
-      "default": "./dist/public_api.js",
-      "typings": "./dist/public_api.d.ts"
+      "default": "./dist/src/public_api.js",
+      "typings": "./dist/src/public_api.d.ts"
     }
   },
   "peerDependencies": {
diff --git a/yarn.lock b/yarn.lock
index ddf67e055e..dbbf8f33e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7079,7 +7079,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@o3r-training/training-sdk@workspace:packages/@o3r-training/training-sdk":
+"@o3r-training/training-sdk@workspace:^, @o3r-training/training-sdk@workspace:packages/@o3r-training/training-sdk":
   version: 0.0.0-use.local
   resolution: "@o3r-training/training-sdk@workspace:packages/@o3r-training/training-sdk"
   dependencies:
@@ -8985,6 +8985,7 @@ __metadata:
     "@yarnpkg/sdks": "npm:^3.2.0"
     ag-grid-angular: "npm:~32.3.0"
     ag-grid-community: "npm:~32.3.0"
+    angular-split: "npm:^18.0.0"
     babel-loader: "npm:^9.0.0"
     bootstrap: "npm:5.3.3"
     bootstrap-icons: "npm:^1.11.3"
@@ -9888,6 +9889,7 @@ __metadata:
     "@nx/eslint-plugin": "npm:~19.5.0"
     "@nx/jest": "npm:~19.5.0"
     "@o3r-training/showcase-sdk": "workspace:^"
+    "@o3r-training/training-sdk": "workspace:^"
     "@o3r-training/training-tools": "workspace:^"
     "@o3r/application": "workspace:^"
     "@o3r/build-helpers": "workspace:^"
@@ -9922,6 +9924,7 @@ __metadata:
     "@xterm/xterm": "npm:^5.0.0"
     ag-grid-angular: "npm:~32.3.0"
     ag-grid-community: "npm:~32.3.0"
+    angular-split: "npm:^18.0.0"
     bootstrap: "npm:5.3.3"
     clipboard: "npm:^2.0.11"
     concurrently: "npm:^8.0.0"
@@ -15968,6 +15971,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"angular-split@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "angular-split@npm:18.0.0"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@angular/common": ">=18.0.0"
+    "@angular/core": ">=18.0.0"
+    rxjs: ">=7.0.0"
+  checksum: 10/acafe910ff0ecf416dbeaf02f7b7c0668320a86683905fe631d3031351a0950723c3336b150a64ca3ee7404ecf76244db5a9d4db7f1c0e58bdf0fca6cf46ac84
+  languageName: node
+  linkType: hard
+
 "ansi-colors@npm:4.1.3, ansi-colors@npm:^4.1.1, ansi-colors@npm:^4.1.3":
   version: 4.1.3
   resolution: "ansi-colors@npm:4.1.3"