diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png
index c053d5c841..5aa9a9fdb2 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step8.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step8.png
index cf75b1cbc0..55d020bc22 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step8.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step8.png differ
diff --git a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step9.png b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step9.png
index f9030016fc..41d8b358e5 100644
Binary files a/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step9.png and b/apps/showcase/e2e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-training-step9.png differ
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 2be98dc753..3cd821d679 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
@@ -11,11 +11,10 @@
                        class="w-100 editor-view"></monaco-tree>
         </as-split-area>
         <as-split-area [size]="75" class="editor-view">
-          @let editorOptions = editorOptions$ | async;
-          @if (editorOptions) {
+          @if (editorOptions()) {
             <ngx-monaco-editor class="h-100 position-relative"
-                               [options]="editorOptions"
-                               [model]="model()"
+                               [options]="editorOptions()"
+                               [model]="model$ | async"
                                (keydown)="onEditorKeyDown($event)"
                                (onInit)="newMonacoEditorCreated.next()"
                                formControlName="code">
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 55185f0c79..ecf59aaaa5 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
@@ -25,6 +25,7 @@ ngx-monaco-editor {
 
 .editor-view {
   background: #1d1d1d;
+  color: white;
 }
 
 .save-code-dialog-backdrop {
diff --git a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts
index 83797e21c1..46c8cf6ef1 100644
--- a/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts
+++ b/apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts
@@ -2,6 +2,9 @@ import {
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import {
+  NGX_MONACO_EDITOR_CONFIG,
+} from 'ngx-monaco-editor-v2';
 import {
   CodeEditorViewComponent,
 } from './code-editor-view.component';
@@ -12,7 +15,10 @@ describe('CodeEditorViewComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CodeEditorViewComponent]
+      imports: [CodeEditorViewComponent],
+      providers: [
+        { provide: NGX_MONACO_EDITOR_CONFIG, useValue: { baseUrl: '' } }
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(CodeEditorViewComponent);
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 87e6010049..6dfe867759 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
@@ -181,7 +181,6 @@ export class CodeEditorViewComponent implements OnDestroy {
         )
         : of([])
     ),
-    filter((tree) => tree.length > 0),
     shareReplay({ bufferSize: 1, refCount: true })
   );
 
@@ -218,16 +217,13 @@ export class CodeEditorViewComponent implements OnDestroy {
   /**
    * Configuration for the Monaco Editor
    */
-  public editorOptions$ = this.form.controls.file.valueChanges.pipe(
-    filter((filePath): filePath is string => !!filePath),
-    map(() => ({
-      theme: 'vs-dark',
-      readOnly: (this.editorMode() === 'readonly'),
-      automaticLayout: true,
-      scrollBeyondLastLine: false,
-      fixedOverflowWidgets: true,
-      model: this.model()
-    }))
+  public editorOptions = computed(() => ({
+    theme: 'vs-dark',
+    readOnly: this.editorMode() === 'readonly',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    fixedOverflowWidgets: true
+  })
   );
 
   private readonly modalService = inject(DfModalService);
@@ -240,8 +236,14 @@ export class CodeEditorViewComponent implements OnDestroy {
   ]).pipe(
     takeUntilDestroyed(),
     combineLatestWith(this.cwdTree$),
-    filter(([[path], monacoTree]) => !!path && checkIfPathInMonacoTree(monacoTree, path.split('/'))),
-    switchMap(([[path]]) => from(this.webContainerService.readFile(`${this.project().cwd}/${path}`).catch(() => ''))),
+    switchMap(([[path], monacoTree]) => {
+      if (!!path && checkIfPathInMonacoTree(monacoTree, path.split('/'))) {
+        return from(
+          this.webContainerService.readFile(`${this.project().cwd}/${path}`).catch(() => '')
+        );
+      }
+      return of('');
+    }),
     shareReplay({ refCount: true, bufferSize: 1 })
   );
 
@@ -251,16 +253,20 @@ export class CodeEditorViewComponent implements OnDestroy {
    * Model used for monaco editor for the currently selected file.
    * We need that to associate the opened file to a URI which is necessary to resolve relative paths on imports.
    */
-  public model = computed(() => {
-    const value = this.fileContent();
-    const fileName = this.form.controls.file.value!;
-    const fileExtension = fileName.split('.').at(-1);
-    return {
-      value,
-      language: editorOptionsLanguage[fileExtension || ''] || '',
-      uri: `file:///${fileName}`
-    };
-  });
+  public model$ = combineLatest([
+    this.form.controls.file.valueChanges,
+    this.fileContentLoaded$
+  ]).pipe(
+    map(([filename, value]) => {
+      const fileExtension = filename?.split('.').at(-1);
+      return {
+        value: value,
+        language: editorOptionsLanguage[fileExtension || ''] || '',
+        uri: `file:///${filename}`
+      };
+    }),
+    shareReplay({ refCount: true, bufferSize: 1 })
+  );
 
   constructor() {
     effect(async () => {