diff --git a/apps/showcase/.gitignore b/apps/showcase/.gitignore
index 61534a6926..4f4e5da2c3 100644
--- a/apps/showcase/.gitignore
+++ b/apps/showcase/.gitignore
@@ -6,3 +6,5 @@ dist-e2e-playwright
 playwright-reports
 test-results
 training-assets
+src/assets/trainings/*-training/**/exercise.json
+src/assets/trainings/*-training/**/solution.json
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
index a6db3a37f5..a6ac690e65 100644
--- a/apps/showcase/package.json
+++ b/apps/showcase/package.json
@@ -14,6 +14,7 @@
     "start:no-translation": "ng serve",
     "generate:translations:dev": "ng run showcase:generate-translations",
     "generate:translations": "ng run showcase:generate-translations:production",
+    "prepare-training": "node scripts/prepare-training-exercises/index.cjs",
     "cms-adapters:localizations": "ng run showcase:extract-translations",
     "cms-adapters:metadata": "yarn run cms-adapters:localizations",
     "update:otter": "ng update @o3r/core",
diff --git a/apps/showcase/project.json b/apps/showcase/project.json
index 27f42baa34..ea2c437d73 100644
--- a/apps/showcase/project.json
+++ b/apps/showcase/project.json
@@ -55,7 +55,7 @@
         "{projectRoot}/dev-resources",
         "{projectRoot}/training-assets",
         "{projectRoot}/*.metadata.json",
-        "packages/@o3r/training-sdk/dist/*-structure.json"
+        "{workspaceRoot}/packages/@o3r/training-sdk/dist/*-structure.json"
       ],
       "options": {
         "outputPath": "apps/showcase/dist",
@@ -145,7 +145,8 @@
         "generate-theme",
         "generate-dark-theme",
         "generate-horizon-theme",
-        "copy-training-assets"
+        "copy-training-assets",
+        "prepare-training"
       ]
     },
     "serve": {
@@ -380,6 +381,23 @@
       },
       "dependsOn": ["^build-builders"]
     },
+    "prepare-training": {
+      "executor": "nx:run-script",
+      "inputs": [
+        "global",
+        "{projectRoot}/package.json",
+        "{projectRoot}/src/assets/**/exercise/**",
+        "{projectRoot}/src/assets/**/solution/**",
+        "{projectRoot}/scripts/prepare-training-exercises/*.cjs"
+      ],
+      "outputs": [
+        "{projectRoot}/src/assets/**/solution.json",
+        "{projectRoot}/src/assets/**/exercise.json"
+      ],
+      "options": {
+        "script": "prepare-training"
+      }
+    },
     "copy-training-assets": {
       "executor": "nx:run-script",
       "inputs": [
diff --git a/apps/showcase/scripts/prepare-training-exercises/index.cjs b/apps/showcase/scripts/prepare-training-exercises/index.cjs
new file mode 100644
index 0000000000..8c03316ffe
--- /dev/null
+++ b/apps/showcase/scripts/prepare-training-exercises/index.cjs
@@ -0,0 +1,26 @@
+const {readdir, readFile, writeFile} = require('node:fs/promises');
+const {getFilesTree} = require('@o3r/training-tools');
+const {dirname, join, resolve} = require('node:path');
+const glob = require('globby');
+
+/**
+ * The purpose of this script is to generate the exercise and solution files for the code editor
+ */
+
+void (async () => {
+  const root = resolve(__dirname, '..', '..');
+  const files = await glob('src/assets/trainings/*-training/**/(exercise|solution)/**', {cwd: root});
+  const paths = files.reduce((exercisePaths, file) => {
+    const exerciseDirectory = dirname(file).match('(.*/(?:exercise|solution))')[0];
+    exercisePaths.add(`${exerciseDirectory}`);
+    return exercisePaths;
+  }, new Set());
+  for (const folder of paths) {
+    const filePath = join(root, folder);
+    const exerciseStructure = await getFilesTree([{isDir: true, path: `${filePath}`}], {readdir, readFile});
+    const [_, commonPath, folderName] = folder.match('(.*)/(exercise|solution)');
+    const targetPath = join(commonPath, `${folderName}.json`);
+    const content = JSON.stringify(exerciseStructure);
+    await writeFile(targetPath, content);
+  }
+})();
diff --git a/apps/showcase/src/app/app-routing.module.ts b/apps/showcase/src/app/app-routing.module.ts
index 5fe834d86b..78d1df3bb2 100644
--- a/apps/showcase/src/app/app-routing.module.ts
+++ b/apps/showcase/src/app/app-routing.module.ts
@@ -13,6 +13,7 @@ const appRoutes: Routes = [
   {path: 'run-app-locally', loadComponent: () => import('./run-app-locally/index').then((m) => m.RunAppLocallyComponent), title: 'Otter Showcase - Run App Locally'},
   {path: 'sdk', loadComponent: () => import('./sdk/index').then((m) => m.SdkComponent), title: 'Otter Showcase - SDK'},
   {path: 'placeholder', loadComponent: () => import('./placeholder/index').then((m) => m.PlaceholderComponent), title: 'Otter Showcase - Placeholder'},
+  {path: 'sdk-training', loadComponent: () => import('./sdk-training/index').then((m) => m.SdkTrainingComponent), title: 'Otter Showcase - SDK Training'},
   {path: '**', redirectTo: '/home', pathMatch: 'full'}
 ];
 
diff --git a/apps/showcase/src/app/app.component.html b/apps/showcase/src/app/app.component.html
index fb9c8bab04..a309bb1e05 100644
--- a/apps/showcase/src/app/app.component.html
+++ b/apps/showcase/src/app/app.component.html
@@ -1,28 +1,31 @@
-<header class="navbar navbar-expand-lg flex-shrink-0">
-  <button class="navbar-toggler d-inline-block d-xl-none fa-bars" (click)="open(content)" title="Open side navigation">
-  </button>
-  <div class="header-title p-xl-3">
-    <div class="header-icon">
-      <img src="assets/otter-sticker.svg" width="48" height="48" alt="Otter logo" />
+<div class="d-flex flex-column">
+  <header class="fw-bold w-100 d-flex align-items-center justify-content-start navbar navbar-expand-lg flex-shrink-0">
+    <button class="navbar-toggler d-inline-block d-xl-none icon-bars" (click)="open(content)" title="Open side navigation">
+    </button>
+    <div class="header-title d-flex p-xl-3">
+      <div class="d-flex me-3 header-icon">
+        <img src="assets/otter-sticker.svg" width="48" height="48" alt="Otter logo" />
+      </div>
+      <div class="d-block d-sm-none">Otter</div>
+      <div class="d-none d-sm-block">Otter Showcase</div>
     </div>
-    <div class="d-block d-sm-none">Otter</div>
-    <div class="d-none d-sm-block">Otter Showcase</div>
-  </div>
-</header>
-<div class="container">
-  <div class="row">
-    <div class="left-nav col-2 d-none d-xl-block">
-      <o3r-sidenav-pres
+  </header>
+<!--  <div class="flex-fill container overflow-hidden mb-5">-->
+  <div class="flex-fill container">
+    <div class="row">
+      <div class="left-nav pt-5 col-2 d-none d-xl-block">
+        <o3r-sidenav-pres
         [linksGroups]="linksGroups"
         [activeUrl]="activeUrl$ | async"
-      ></o3r-sidenav-pres>
-    </div>
-    <div class="page-content col-12 col-xl-10">
-      <router-outlet></router-outlet>
+        ></o3r-sidenav-pres>
+      </div>
+      <div class="page-content col-12 col-xl-10">
+        <router-outlet></router-outlet>
+      </div>
     </div>
   </div>
 </div>
-<footer class="bg-body-tertiary">
+<footer class="d-flex align-items-center w-100 text-body bg-body-tertiary">
   <div class="container">
     <div class="row">
       <div class="col-12 col-md-8">
diff --git a/apps/showcase/src/app/app.component.ts b/apps/showcase/src/app/app.component.ts
index 86efffc1f8..0f72855263 100644
--- a/apps/showcase/src/app/app.component.ts
+++ b/apps/showcase/src/app/app.component.ts
@@ -39,6 +39,12 @@ export class AppComponent implements OnDestroy {
       links: [
         { url: '/sdk', label: 'Generator' }
       ]
+    },
+    {
+      label: 'Training',
+      links: [
+        { url: '/sdk-training', label: 'SDK Training' }
+      ]
     }
   ];
 
diff --git a/apps/showcase/src/app/app.module.ts b/apps/showcase/src/app/app.module.ts
index 38de2896fe..0941e3ec71 100644
--- a/apps/showcase/src/app/app.module.ts
+++ b/apps/showcase/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { ConsoleLogger, Logger, LOGGER_CLIENT_TOKEN, LoggerService } from '@o3r/
 import { OTTER_RULES_ENGINE_DEVTOOLS_OPTIONS, RulesEngineRunnerModule } from '@o3r/rules-engine';
 import { OTTER_STYLING_DEVTOOLS_OPTIONS, StylingDevtoolsModule } from '@o3r/styling';
 import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { DatePickerHebrewInputPresComponent, ScrollBackTopPresComponent, SidenavPresComponent } from '../components/utilities';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -108,7 +109,8 @@ export function registerCustomComponents(): Map<string, any> {
     C11nModule.forRoot({registerCompFunc: registerCustomComponents}),
     StylingDevtoolsModule,
     LocalizationDevtoolsModule,
-    ConfigurationDevtoolsModule
+    ConfigurationDevtoolsModule,
+    MonacoEditorModule.forRoot()
   ],
   providers: [
     {provide: MESSAGE_FORMAT_CONFIG, useValue: {}},
diff --git a/apps/showcase/src/app/sdk-training/index.ts b/apps/showcase/src/app/sdk-training/index.ts
new file mode 100644
index 0000000000..dc34a20b8d
--- /dev/null
+++ b/apps/showcase/src/app/sdk-training/index.ts
@@ -0,0 +1 @@
+export * from './sdk-training.component';
diff --git a/apps/showcase/src/app/sdk-training/sdk-training.component.scss b/apps/showcase/src/app/sdk-training/sdk-training.component.scss
new file mode 100644
index 0000000000..ea5199d535
--- /dev/null
+++ b/apps/showcase/src/app/sdk-training/sdk-training.component.scss
@@ -0,0 +1,4 @@
+o3r-training {
+  // full screen by removing the height of the showcase header (4rem)
+  height: calc(100vh - 4rem);
+}
diff --git a/apps/showcase/src/app/sdk-training/sdk-training.component.spec.ts b/apps/showcase/src/app/sdk-training/sdk-training.component.spec.ts
new file mode 100644
index 0000000000..1b0a9142fd
--- /dev/null
+++ b/apps/showcase/src/app/sdk-training/sdk-training.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SdkTrainingComponent } from './sdk-training.component';
+
+describe('SdkTrainingComponent', () => {
+  let component: SdkTrainingComponent;
+  let fixture: ComponentFixture<SdkTrainingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SdkTrainingComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SdkTrainingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/showcase/src/app/sdk-training/sdk-training.component.ts b/apps/showcase/src/app/sdk-training/sdk-training.component.ts
new file mode 100644
index 0000000000..584750fde5
--- /dev/null
+++ b/apps/showcase/src/app/sdk-training/sdk-training.component.ts
@@ -0,0 +1,14 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {TrainingComponent} from '../../components';
+
+@Component({
+  selector: 'o3r-sdk-training',
+  standalone: true,
+  imports: [
+    TrainingComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<o3r-training [title]="\'SDK Training\'" [trainingPath]="\'trainings/sdk-training\'"></o3r-training>',
+  styleUrls: ['./sdk-training.component.scss']
+})
+export class SdkTrainingComponent {}
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 c14451afc6..0ddcbfe0f0 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,4 +1,5 @@
 code-editor-control {
+  transition: min-height 100ms ease;
 
   &:has(.command-panel.d-none) {
     min-height: 3rem;
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 c4b50ab21c..f91be467e1 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
@@ -197,11 +197,4 @@ export class CodeEditorViewComponent implements OnDestroy, OnChanges {
   public ngOnDestroy() {
     this.webContainerService.runner.killContainer();
   }
-
-  /**
-   * Log web container file tree for the project folder in the console
-   */
-  public logTree() {
-    void this.webContainerService.logTree();
-  }
 }
diff --git a/apps/showcase/src/components/training/index.ts b/apps/showcase/src/components/training/index.ts
index 63f1842405..abe147c4e9 100644
--- a/apps/showcase/src/components/training/index.ts
+++ b/apps/showcase/src/components/training/index.ts
@@ -1,2 +1 @@
-export * from './code-editor-view/index';
-export * from './training-step/index';
+export * from './training.component';
diff --git a/apps/showcase/src/components/training/training.component.html b/apps/showcase/src/components/training/training.component.html
new file mode 100644
index 0000000000..be94679000
--- /dev/null
+++ b/apps/showcase/src/components/training/training.component.html
@@ -0,0 +1,53 @@
+@if (steps()[currentStepIndex]; as currentStep){
+  <div class="mt-7 mb-3 d-flex justify-content-between">
+    <div class="align-self-center">
+      <h1 class="m-0">{{title()}}</h1>
+      <div ngbDropdown class="mt-2">
+        <button type="button" class="btn btn-outline-primary" id="training-exercise-selection" ngbDropdownToggle>
+          {{currentStep.description.title}}
+        </button>
+        <div ngbDropdownMenu aria-labelledby="training-exercise-selection">
+          @for (label of stepNames(); track label; let id = $index) {
+            <button
+              type="button"
+              ngbDropdownItem
+              class="dropdown-item"
+              [class.active]="id === currentStepIndex"
+              [disabled]="label === 'Disabled'"
+              (click)="setCurrentStep(id)"
+            >
+              {{label}}
+            </button>
+          }
+        </div>
+      </div>
+    </div>
+    <div class="align-self-center d-flex flex-wrap">
+      @if (currentStep.dynamicContent.project() || currentStep.dynamicContent.solutionProject()) {
+        <button type="button" class="btn btn-outline-primary mb-2 mb-md-0 me-5" (click)="updateDisplayInstructions()">
+          {{showInstructions ? 'Hide instructions' : 'Show instructions'}}
+        </button>
+        <button type="button" class="btn btn-outline-danger mb-2 mb-md-0 me-5"
+                (click)="updateDisplaySolution()"
+                [disabled]="!showSolution && !currentStep.dynamicContent.solutionProject() || showSolution && !currentStep.dynamicContent.project()"
+        >
+          {{showSolution ? 'Show exercise' : 'Show solution'}}
+        </button>
+      }
+      <div>
+        <button type="button" class="btn btn-outline-secondary df-btn-icononly fa-chevron-left me-2" [disabled]="currentStepIndex <= 0"
+                (click)="setCurrentStep(currentStepIndex - 1)"></button>
+        <button type="button" class="btn btn-outline-secondary df-btn-icononly fa-chevron-right ms-2" [disabled]="currentStepIndex >= steps().length - 1"
+                (click)="setCurrentStep(currentStepIndex + 1)"></button>
+      </div>
+    </div>
+  </div>
+  <o3r-training-step-pres
+    class="flex-fill overflow-hidden mb-5"
+    [class.constrained]="!!(currentStep.dynamicContent.solutionProject() || currentStep.dynamicContent.project())"
+    [instructions]="showInstructions ? currentStep.dynamicContent.htmlContent() : ''"
+    [title]="currentStep.description.title"
+    [project]="showSolution ? currentStep.dynamicContent.solutionProject() : currentStep.dynamicContent.project()"
+    [editorMode]="currentStep.description.filesConfiguration?.mode">
+  </o3r-training-step-pres>
+}
diff --git a/apps/showcase/src/components/training/training.component.scss b/apps/showcase/src/components/training/training.component.scss
new file mode 100644
index 0000000000..3225463654
--- /dev/null
+++ b/apps/showcase/src/components/training/training.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: flex;
+  flex-direction: column;
+
+  &:not(:has(.constrained)) {
+    height: 100% !important;
+  }
+}
diff --git a/apps/showcase/src/components/training/training.component.spec.ts b/apps/showcase/src/components/training/training.component.spec.ts
new file mode 100644
index 0000000000..9a71ba5f35
--- /dev/null
+++ b/apps/showcase/src/components/training/training.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TrainingComponent } from './training.component';
+
+describe('SdkTrainingComponent', () => {
+  let component: TrainingComponent;
+  let fixture: ComponentFixture<TrainingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TrainingComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(TrainingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/showcase/src/components/training/training.component.ts b/apps/showcase/src/components/training/training.component.ts
new file mode 100644
index 0000000000..da83edd803
--- /dev/null
+++ b/apps/showcase/src/components/training/training.component.ts
@@ -0,0 +1,273 @@
+import {AsyncPipe, JsonPipe, NgComponentOutlet} from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  OnInit,
+  signal,
+  WritableSignal
+} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  NgbAccordionModule,
+  NgbDropdown,
+  NgbDropdownItem,
+  NgbDropdownMenu,
+  NgbDropdownToggle
+} from '@ng-bootstrap/ng-bootstrap';
+import {DynamicContentModule, DynamicContentService} from '@o3r/dynamic-content';
+import {DirectoryNode, FileNode, FileSystemTree} from '@webcontainer/api';
+import {firstValueFrom} from 'rxjs';
+import {CopyTextPresComponent} from '../utilities/copy-text';
+import {EditorMode, TrainingProject} from './code-editor-view';
+import {TrainingStepPresComponent} from './training-step';
+
+/** Description of training step */
+interface TrainingStepDescription {
+  /** Step title */
+  title: string;
+  /** URL to step instructions (HTML content) */
+  htmlContentUrl: string;
+  /** Step files configuration */
+  filesConfiguration?: {
+    /** Name of directory in which files will be put */
+    name: string;
+    /** Starting file to be displayed in the project */
+    startingFile: string;
+    /** Commands to run in the project */
+    commands: string[];
+    /** URLs of step project */
+    urls: { [key: string]: string };
+    /** URLs of step solution project */
+    solutionUrls?: { [key: string]: string };
+    /** Mode of the Code Editor */
+    mode: EditorMode;
+  };
+}
+
+/** Training step - consists of its description and its dynamic content */
+type TrainingStep = {
+  /** Description of the training step */
+  description: TrainingStepDescription;
+  /** Dynamic content of the training step */
+  dynamicContent: {
+    /** HTML Content - corresponds to the step instructions */
+    htmlContent: WritableSignal<string>;
+    /** Exercise project of the step */
+    project: WritableSignal<TrainingProject | null>;
+    /** Solution of the exercise project of the step */
+    solutionProject: WritableSignal<TrainingProject | null>;
+  };
+};
+
+/** Resources to get file content */
+type Resource = {
+  /** Resource path */
+  path: string;
+  /** Resource content */
+  content: string;
+};
+
+/** RegExp of current step index at the end of the location URL (example: http://url/#/fragment#3) */
+const currentStepLocationRegExp = new RegExp(/#([0-9]+)$/);
+
+@Component({
+  selector: 'o3r-training',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    CopyTextPresComponent,
+    DynamicContentModule,
+    FormsModule,
+    JsonPipe,
+    NgbAccordionModule,
+    NgComponentOutlet,
+    TrainingStepPresComponent,
+    NgbDropdown,
+    NgbDropdownToggle,
+    NgbDropdownMenu,
+    NgbDropdownItem
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './training.component.html',
+  styleUrl: './training.component.scss'
+})
+export class TrainingComponent implements OnInit {
+  /** Index of the training step to display */
+  public currentStepIndex = 0;
+  /** Display instructions */
+  public showInstructions = true;
+  /** Display exercise solution */
+  public showSolution = false;
+  /** Training steps */
+  public steps: WritableSignal<TrainingStep[]> = signal([]);
+  /** Training step names for the dropdown menu */
+  public stepNames = computed(() =>
+    this.steps().map((step) => step.description.title)
+  );
+
+  /** Path to the training assets */
+  public trainingPath = input('');
+  /** Title of the training */
+  public title = input('');
+
+  private readonly dynamicContentService = inject(DynamicContentService);
+
+  /**
+   * Load the dynamic content of the specified training step
+   * @param step
+   * @private
+   */
+  private async loadStepContent(step: TrainingStep) {
+    if (!step.dynamicContent.htmlContent()) {
+      const content = await this.loadResource(step.description.htmlContentUrl);
+      step.dynamicContent.htmlContent.set(content);
+    }
+    const fileConfiguration = step.description.filesConfiguration;
+    if (fileConfiguration?.urls && !step.dynamicContent.project()?.files) {
+      await this.updateStepDynamicContent(step, Object.entries(fileConfiguration.urls).map(([path, url])=> ({path, url})));
+    }
+    if (fileConfiguration?.urls && fileConfiguration?.solutionUrls && !step.dynamicContent.solutionProject()?.files) {
+      await this.updateStepDynamicContent(step, [
+        ...Object.entries(fileConfiguration.urls).map(([path, url]) => ({path, url})),
+        ...Object.entries(fileConfiguration.solutionUrls).map(([path, url]) => ({path, url}))
+      ],
+      true);
+    }
+  }
+
+  /**
+   * Load the training steps, including their description and dynamic content
+   * @private
+   */
+  private async loadSteps() {
+    const program: TrainingStepDescription[] = JSON.parse(await this.loadResource(`${this.trainingPath()}/program.json`));
+    const stepsToLoad: TrainingStep[] = [];
+    program.forEach((desc) => {
+      const step: TrainingStep = {
+        description: desc,
+        dynamicContent: {
+          htmlContent: signal(''),
+          project: signal(null),
+          solutionProject: signal(null)
+        }
+      };
+      void this.loadStepContent(step);
+      stepsToLoad.push(step);
+    });
+    this.steps.set(stepsToLoad);
+    const stepParam = window.location.href.match(currentStepLocationRegExp)?.[1];
+    const stepRequested = !stepParam || Number.isNaN(stepParam) ? 0 : Number(stepParam);
+    this.setCurrentStep(stepRequested);
+  }
+
+  /**
+   * Convert the resources into a file system tree
+   * @param resources Training step resources including their paths and content
+   * @private
+   */
+  private getFilesContent(resources: Resource[]) {
+    return resources.reduce((fileSystemTree: FileSystemTree, resource) => {
+      if (resource.path === './' || resource.path === '.') {
+        return {...fileSystemTree, ...JSON.parse(resource.content)} as FileSystemTree;
+      }
+      const sanitizedPath = resource.path.replace(new RegExp('^[.]/?'), '');
+      const parsedPath = sanitizedPath.split('/');
+      parsedPath.reduce((pointer, path, index) => {
+        if (path.indexOf('.') > -1) {
+          const parsedContent = JSON.parse(resource.content);
+          pointer[path] = {file: {contents: parsedContent[path].file.contents}} as FileNode;
+          return pointer;
+        }
+        if (index === parsedPath.length - 1) {
+          // eslint-disable-next-line no-prototype-builtins
+          if (pointer[path]?.hasOwnProperty('file')) {
+            throw new Error('Cannot override a file with a folder');
+          }
+          pointer[path] ||= {directory: {}};
+          const pathDirectory = (pointer[path] as DirectoryNode).directory;
+          const overrides = Object.entries(JSON.parse(resource.content) as {[key: string]: FileNode | DirectoryNode});
+          overrides.forEach(([key, content]) =>
+            // eslint-disable-next-line no-prototype-builtins
+            pathDirectory[key] = pathDirectory[key]?.hasOwnProperty('directory') ? {...(pathDirectory[key] as DirectoryNode).directory, ...content} : content
+          );
+          return pathDirectory;
+        }
+        pointer[path] = pointer[path] && Object.hasOwn(pointer[path], 'directory') ? pointer[path] : {directory: {}};
+        return (pointer[path] as DirectoryNode).directory;
+      }, fileSystemTree);
+      return fileSystemTree;
+    }, {} as FileSystemTree);
+  }
+
+  /**
+   * Load the resource using the provided URL
+   * @param url
+   */
+  private async loadResource(url: string) {
+    const resourceUrl = url.startsWith('./') ? `${this.trainingPath()}/${url}` : `${url}`;
+    const response = await fetch(await firstValueFrom(this.dynamicContentService.getMediaPathStream(resourceUrl)));
+    return response.text();
+  }
+
+  /**
+   * Update the dynamic content of the specified training step
+   * @param step Training step
+   * @param urls URLs of the step project or solution project
+   * @param solutionProject Boolean indicating if the dynamic content is the project or solution project of the step
+   * @private
+   */
+  private async updateStepDynamicContent(step: TrainingStep, urls: { url: string; path: string }[], solutionProject = false) {
+    const resourcesPromise: Promise<Resource[]> = Promise.all(urls.map(
+      async ({path, url}) => ({
+        path,
+        content: await this.loadResource(url)
+      })
+    ));
+    const resources = await resourcesPromise;
+    const filesContent = this.getFilesContent(resources);
+    step.dynamicContent[solutionProject ? 'solutionProject' : 'project'].set({
+      startingFile: step.description.filesConfiguration!.startingFile || '',
+      commands: step.description.filesConfiguration!.commands || [],
+      files: filesContent,
+      cwd: step.description.filesConfiguration!.name.toLowerCase().replace(' ', '-') + (solutionProject ? '-solution' : '')
+    });
+  }
+
+  public ngOnInit() {
+    void this.loadSteps();
+  }
+
+  /**
+   * Set the current step index. Also update the browser URL and history.
+   * @param index
+   */
+  public setCurrentStep(index: number) {
+    if (index > this.steps().length || index < 0) {
+      return;
+    }
+    this.currentStepIndex = index;
+
+    const newHash = location.hash.match(currentStepLocationRegExp)
+      ? location.hash.replace(currentStepLocationRegExp, `#${this.currentStepIndex}`)
+      : `${location.hash}#${this.currentStepIndex}`;
+    history.pushState(null, '', newHash);
+    this.showSolution = false;
+  }
+
+  /**
+   * Update the display of instructions and the corresponding button label
+   */
+  public updateDisplayInstructions() {
+    this.showInstructions = !this.showInstructions;
+  }
+
+  /**
+   * Update the display of the exercise solution and the corresponding button label
+   */
+  public updateDisplaySolution() {
+    this.showSolution = !this.showSolution;
+  }
+}
diff --git a/apps/showcase/src/services/webcontainer/webcontainer-runner.ts b/apps/showcase/src/services/webcontainer/webcontainer-runner.ts
index 1082e1876c..e33ba3fd47 100644
--- a/apps/showcase/src/services/webcontainer/webcontainer-runner.ts
+++ b/apps/showcase/src/services/webcontainer/webcontainer-runner.ts
@@ -104,7 +104,8 @@ export class WebContainerRunner {
       ),
       withLatestFrom(this.instancePromise),
       switchMap(([[_, terminal], instance]) => {
-        const spawn = instance.spawn('jsh');
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const spawn = instance.spawn('jsh', [], {env: {O3R_METRICS: false}});
         return from(spawn).pipe(
           map((process) => ({
             process,
diff --git a/apps/showcase/src/services/webcontainer/webcontainer.helpers.ts b/apps/showcase/src/services/webcontainer/webcontainer.helpers.ts
index 6cddf3d1fd..611ac2fbd8 100644
--- a/apps/showcase/src/services/webcontainer/webcontainer.helpers.ts
+++ b/apps/showcase/src/services/webcontainer/webcontainer.helpers.ts
@@ -50,6 +50,8 @@ export const createTerminalStream = (terminal: Terminal, cb?: (data: string) =>
  */
 export const makeProcessWritable = (process: WebContainerProcess, terminal: Terminal) => {
   const input = process.input.getWriter();
-  terminal.onData((data) => input.write(data));
+  terminal.onData((data) => {
+    return input.write(data);
+  });
   return input;
 };
diff --git a/apps/showcase/src/services/webcontainer/webcontainer.service.ts b/apps/showcase/src/services/webcontainer/webcontainer.service.ts
index f9db8481b3..cf0332b06a 100644
--- a/apps/showcase/src/services/webcontainer/webcontainer.service.ts
+++ b/apps/showcase/src/services/webcontainer/webcontainer.service.ts
@@ -104,11 +104,11 @@ export class WebContainerService {
   }
 
   /**
-   * Log the file tree of the current instance (for debugging purposes)
+   * Get the file tree of the current instance (for debugging purposes)
    */
-  public async logTree() {
+  public async getTree() {
     const instance = await this.runner.instancePromise;
     // eslint-disable-next-line no-console
-    console.log(await getFilesTreeFromContainer(instance, EXCLUDED_FILES_OR_DIRECTORY));
+    return getFilesTreeFromContainer(instance, EXCLUDED_FILES_OR_DIRECTORY);
   }
 }
diff --git a/apps/showcase/tsconfig.app.json b/apps/showcase/tsconfig.app.json
index 4e1761d989..ddc84989cc 100644
--- a/apps/showcase/tsconfig.app.json
+++ b/apps/showcase/tsconfig.app.json
@@ -5,7 +5,8 @@
     "src/**/*.ts"
   ],
   "exclude": [
-    "src/**/*.spec.ts"
+    "src/**/*.spec.ts",
+    "src/assets"
   ],
   "compileOnSave": false,
   "compilerOptions": {
@@ -21,6 +22,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
@@ -36,6 +38,7 @@
     "allowSyntheticDefaultImports": true,
     "lib": [
       "ES2022",
+      "es6",
       "dom",
       "dom.iterable"
     ]
diff --git a/nx.json b/nx.json
index ef0178453b..8e97c45bde 100644
--- a/nx.json
+++ b/nx.json
@@ -364,6 +364,9 @@
     },
     "copy-training-assets": {
       "cache": true
+    },
+    "prepare-training": {
+      "cache": true
     }
   },
   "generators": {