diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 98ae0f3d..94d8378c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -64,6 +64,7 @@ import { TeiLinkDirective } from './directives/tei-link.directive';
 import { CommentComponent } from './resource/comment/comment.component';
 import { HttpClientModule } from '@angular/common/http';
 import { BiographyComponent } from './biography/biography.component';
+import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
 
 @NgModule({
     declarations: [
@@ -102,6 +103,7 @@ import { BiographyComponent } from './biography/biography.component';
         CommentComponent,
         PublishedLetterComponent,
         BiographyComponent,
+        LeceLeooComponent,
     ],
     imports: [
         AppRouting,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index dbad221a..5a9eabff 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -24,6 +24,7 @@ import { TranscriptionComponent } from './resource/transcription/transcription.c
 import { ManuscriptEntryComponent } from './resource/manuscript-entry/manuscript-entry.component';
 import { CommentComponent } from './resource/comment/comment.component';
 import { BiographyComponent } from './biography/biography.component';
+import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
 
 
 const appRoutes: Routes = [
@@ -43,6 +44,10 @@ const appRoutes: Routes = [
         path: 'correspondence/:project',
         component: CorrespondenceComponent,
     },
+    {
+        path: 'lece-leoo/:project',
+        component: LeceLeooComponent
+    },
     {
         path: 'resource/:id',
         component: ResourceComponent
diff --git a/src/app/biography/biography.component.html b/src/app/biography/biography.component.html
index 7228f84d..4d0c7cec 100644
--- a/src/app/biography/biography.component.html
+++ b/src/app/biography/biography.component.html
@@ -2,7 +2,7 @@
 
     <dsp-progress-indicator *ngIf="isLoading" [color]="'#D88958'"></dsp-progress-indicator>
 
-    <div *ngIf="!isLoading && props">
+    <div *ngIf="!isLoading">
 
         <div class="sidebar">
             <button mat-stroked-button class="previousBtn" (click)="location.back()">
@@ -266,6 +266,20 @@ <h2>Additional</h2>
                             </mat-select>
                         </mat-form-field>
                     </p>
+                    <p>
+                        <mat-card class="intro-card" appearance="outlined" (click)="openPage('lece')">
+                            <mat-card-content>
+                                <mat-card-title>Introduction</mat-card-title>
+                                Leonhard Euler's correspondence with Goldbach
+                            </mat-card-content>
+                        </mat-card>
+                        <mat-card class="intro-card" appearance="outlined" (click)="openPage('leoo')">
+                            <mat-card-content>
+                                <mat-card-title>Introduction</mat-card-title>
+                                Correspondance d'Euler avec Condorcet et Turgot
+                            </mat-card-content>
+                        </mat-card>
+                    </p>
                 </section>
             </ng-container>
 
diff --git a/src/app/biography/biography.component.ts b/src/app/biography/biography.component.ts
index e99ea058..8089f7e4 100644
--- a/src/app/biography/biography.component.ts
+++ b/src/app/biography/biography.component.ts
@@ -74,7 +74,6 @@ class CorrespondenceGroup {
 })
 export class BiographyComponent implements OnInit, OnDestroy{
     isLoading = true;
-    props: any;
     name: string;
     navigationSubscription: Subscription;
 
@@ -94,7 +93,6 @@ export class BiographyComponent implements OnInit, OnDestroy{
         private _beol: BeolService
     ) {
         this.isLoading = false;
-        this.props = {};
     }
 
     ngOnInit() {
@@ -461,6 +459,10 @@ export class BiographyComponent implements OnInit, OnDestroy{
         );
     }
 
+    openPage(project: string) {
+        this._router.navigate(['/lece-leoo/', project], { relativeTo: this._route });
+    }
+
     ngOnDestroy() {
         if (this.navigationSubscription !== undefined) {
             this.navigationSubscription.unsubscribe();
diff --git a/src/app/lece-leoo/lece-leoo.component.html b/src/app/lece-leoo/lece-leoo.component.html
new file mode 100644
index 00000000..27228c3e
--- /dev/null
+++ b/src/app/lece-leoo/lece-leoo.component.html
@@ -0,0 +1,83 @@
+<div class="full-size scroll-y-only">
+
+    <dsp-progress-indicator *ngIf="isLoading" [color]="'#D88958'"></dsp-progress-indicator>
+
+    <div *ngIf="!isLoading">
+
+        <div class="sidebar">
+            <button mat-stroked-button class="previousBtn" (click)="location.back()">
+                <mat-icon>arrow_back</mat-icon>
+                Previous
+            </button>
+        </div>
+
+        <div class="main-content" [ngSwitch]="project">
+
+            <ng-container *ngSwitchCase="'lece'">
+                <h1>[Title]</h1>
+                <div>
+                    <div fxFlex fxLayout="row wrap" fxLayout.sm="column" fxlayout.xs="column" fxFlexFill>
+                        <div fxFlex routerLink="introduction/leoo/goldbach_preface">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>Preface</mat-card-content>
+                            </mat-card>
+                        </div>
+                        <div fxFlex routerLink="introduction/leoo/goldbach_abbreviations">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>List of Abbreviations</mat-card-content>
+                            </mat-card>
+                        </div>
+                    </div>
+                </div>
+
+                <div>
+                    <div fxFlex fxLayout="row wrap" fxLayout.sm="column" fxlayout.xs="column" fxFlexFill>
+                        <div fxFlex routerLink="introduction/leoo/goldbach_introduction_1">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>Historical and biographical setting</mat-card-content>
+                            </mat-card>
+                        </div>
+                        <div fxFlex routerLink="introduction/leoo/goldbach_introduction_2">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>Main subjects of the correspondence</mat-card-content>
+                            </mat-card>
+                        </div>
+                        <div fxFlex routerLink="introduction/leoo/goldbach_introduction_3.1">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>Editing the Euler-Goldbach correspondence</mat-card-content>
+                            </mat-card>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'leoo'">
+                <h1>[Title]</h1>
+                <div class="container">
+                    <div fxFlex fxLayout="row wrap" fxLayout.sm="column" fxlayout.xs="column" fxFlexFill>
+                        <div fxFlex routerLink="introduction/lece/CondorcetTurgot_preface">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>Préface</mat-card-content>
+                            </mat-card>
+                        </div>
+                    </div>
+                </div>
+                <div class="container">
+                    <div fxFlex fxLayout="row wrap" fxLayout.sm="column" fxlayout.xs="column" fxFlexFill>
+                        <div fxFlex routerLink="introduction/lece/CondorcetMJA_Introduction">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>Correspondance d'Euler avec Condorcet</mat-card-content>
+                            </mat-card>
+                        </div>
+                        <div fxFlex routerLink="introduction/lece/Turgot_Introduction">
+                            <mat-card class="intro-card" appearance="outlined">
+                                <mat-card-content>Correspondance d'Euler avec Turgot</mat-card-content>
+                            </mat-card>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+
+        </div>
+    </div>
+</div>
diff --git a/src/app/lece-leoo/lece-leoo.component.scss b/src/app/lece-leoo/lece-leoo.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/lece-leoo/lece-leoo.component.spec.ts b/src/app/lece-leoo/lece-leoo.component.spec.ts
new file mode 100644
index 00000000..c3e87771
--- /dev/null
+++ b/src/app/lece-leoo/lece-leoo.component.spec.ts
@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { LeceLeooComponent } from './lece-leoo.component';
+import { RouterTestingModule } from '@angular/router/testing';
+import { BeolService } from '../services/beol.service';
+import { AppInitService } from '../dsp-ui-lib/core';
+
+describe('LeceLeooComponent', () => {
+    let component: LeceLeooComponent;
+    let fixture: ComponentFixture<LeceLeooComponent>;
+
+    beforeEach(waitForAsync(() => {
+        const appInitServiceMock = {
+            config: {
+                ontologyIRI: 'http://0.0.0.0:3333'
+            }
+        };
+
+        const beolServiceSpy = jasmine.createSpyObj('BeolService', ['getEntriesForManuscript']); // see https://angular.io/guide/testing#angular-testbed
+
+        TestBed.configureTestingModule({
+            imports: [
+                RouterTestingModule,
+            ],
+            declarations: [LeceLeooComponent],
+            providers: [
+                { provide: BeolService, useValue: beolServiceSpy },
+                { provide: AppInitService, useValue: appInitServiceMock }
+            ]
+        })
+            .compileComponents();
+
+        fixture = TestBed.createComponent(LeceLeooComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    }));
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/lece-leoo/lece-leoo.component.ts b/src/app/lece-leoo/lece-leoo.component.ts
new file mode 100644
index 00000000..6da08537
--- /dev/null
+++ b/src/app/lece-leoo/lece-leoo.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+@Component({
+    selector: 'app-lece-leoo',
+    templateUrl: './lece-leoo.component.html',
+    styleUrls: ['./lece-leoo.component.scss']
+})
+export class LeceLeooComponent implements OnInit {
+    isLoading = true;
+    project: string;
+    navigationSubscription: Subscription;
+
+    constructor(public location: Location, private _route: ActivatedRoute) {
+        this.isLoading = false;
+    }
+
+    ngOnInit() {
+        this.navigationSubscription = this._route.paramMap.subscribe((params: ParamMap) => {
+            this.project = params.get('project');
+        });
+    }
+
+    ngOnDestroy() {
+        if (this.navigationSubscription !== undefined) {
+            this.navigationSubscription.unsubscribe();
+        }
+    }
+}