diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 69d3e914d9a2359c7b2f99aeabcbbe7bed8b8473..767d976105a8fe5431b10667c29e5b5662aeebc8 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -4,6 +4,7 @@ Player
  - Add adjustable magnifier for images
  - Fix delay for hints in audio and video player
  - Fix delay for auto start in audio and video player
+ - Send presentationProgress 'complete' when elements are displayed
 
 1.2.4
  - Support the possibility to set the display of the remaining runs
diff --git a/projects/player/src/app/app.component.ts b/projects/player/src/app/app.component.ts
index a86a1783adee607f1121189eba81a60a7ff22e1e..e9fbc736c31aa661e770fda34f2acdb6eaefd37c 100644
--- a/projects/player/src/app/app.component.ts
+++ b/projects/player/src/app/app.component.ts
@@ -90,6 +90,6 @@ export class AppComponent implements OnInit {
     console.log('player: reset');
     this.pages = [];
     this.playerConfig = {};
-    this.unitStateService.unitStateElementCodes = [];
+    this.unitStateService.reset();
   }
 }
diff --git a/projects/player/src/app/components/element-container/element-container.component.ts b/projects/player/src/app/components/element-container/element-container.component.ts
index b72132b7c3f101bdd0b9c5e85a510d0530e29e69..b399e00417ab46565039414c7483cd7c1faabe84 100644
--- a/projects/player/src/app/components/element-container/element-container.component.ts
+++ b/projects/player/src/app/components/element-container/element-container.component.ts
@@ -37,6 +37,7 @@ export class ElementContainerComponent implements OnInit {
   @Input() elementModel!: UIElement;
   @Input() parentForm!: FormGroup;
   @Input() parentArrayIndex!: number;
+  @Input() pageIndex!: number;
 
   isKeyboardOpen!: boolean;
   keyboardLayout!: 'french' | 'numbers' | 'numbersAndOperators' | 'none';
@@ -62,7 +63,9 @@ export class ElementContainerComponent implements OnInit {
 
     if (elementComponent.domElement) {
       this.unitStateService.registerElement(
-        this.initUnitStateValue(elementComponent.elementModel), elementComponent.domElement
+        this.initUnitStateValue(elementComponent.elementModel),
+        elementComponent.domElement,
+        this.pageIndex
       );
     }
 
@@ -72,7 +75,11 @@ export class ElementContainerComponent implements OnInit {
         .subscribe((children: QueryList<ElementComponent>) => {
           children.forEach(child => {
             if (child.domElement) {
-              this.unitStateService.registerElement(this.initUnitStateValue(child.elementModel), child.domElement);
+              this.unitStateService.registerElement(
+                this.initUnitStateValue(child.elementModel),
+                child.domElement,
+                this.pageIndex
+              );
             }
           });
         });
diff --git a/projects/player/src/app/components/page/page.component.html b/projects/player/src/app/components/page/page.component.html
index 7aa555ca2a56505e65b5586f796c85debb221072..b0aa2233aa8949e65fc5bc04c7d06e8d48a904c3 100644
--- a/projects/player/src/app/components/page/page.component.html
+++ b/projects/player/src/app/components/page/page.component.html
@@ -3,6 +3,7 @@
      [intersectionContainer]="pagesContainer"
      (intersecting)="onIntersection()">
   <app-section *ngFor="let section of page.sections; let i = index"
+               [pageIndex] = parentArrayIndex
                [parentForm]="pageForm"
                [parentArrayIndex]="i"
                [section]="section"
diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html
index 0a6aea1334a2a6ffe76dd8667e85939c7f68b084..3e5a472b5c8ef41ab53c92060bf4caeeab5373c2 100644
--- a/projects/player/src/app/components/section/section.component.html
+++ b/projects/player/src/app/components/section/section.component.html
@@ -12,6 +12,7 @@
         [style.top.px]="element.yPosition"
         [elementModel]="element"
         [parentForm]="sectionForm"
+        [pageIndex]="pageIndex"
         [parentArrayIndex]="i">
     </app-element-container>
   </ng-container>
@@ -37,6 +38,7 @@
           [style.grid-row-end]="element.gridRowEnd"
           [elementModel]="element"
           [parentForm]="sectionForm"
+          [pageIndex]="pageIndex"
           [parentArrayIndex]="i">
       </app-element-container>
     </ng-container>
diff --git a/projects/player/src/app/components/section/section.component.ts b/projects/player/src/app/components/section/section.component.ts
index 4200ed3182d3b08e989ec057356750700075644e..5b9b4e101f447b7ecb86bdf2296dd2199b23affe 100644
--- a/projects/player/src/app/components/section/section.component.ts
+++ b/projects/player/src/app/components/section/section.component.ts
@@ -14,6 +14,7 @@ export class SectionComponent implements OnInit {
   @Input() parentForm!: FormGroup;
   @Input() section!: Section;
   @Input() parentArrayIndex!: number;
+  @Input() pageIndex!: number;
 
   sectionForm!: FormGroup;
 
diff --git a/projects/player/src/app/components/unit-state/unit-state.component.ts b/projects/player/src/app/components/unit-state/unit-state.component.ts
index d08e486c94c3087ec9afd9a906cd8350826fe257..09fa97f8fb98e62bf4124ed11eb0e7f762dd5347 100644
--- a/projects/player/src/app/components/unit-state/unit-state.component.ts
+++ b/projects/player/src/app/components/unit-state/unit-state.component.ts
@@ -31,7 +31,6 @@ export class UnitStateComponent implements OnInit, OnDestroy {
   @Input() playerConfig!: PlayerConfig;
 
   form!: FormGroup;
-  presentedPages: number[] = [];
 
   private ngUnsubscribe = new Subject<void>();
 
@@ -65,7 +64,7 @@ export class UnitStateComponent implements OnInit, OnDestroy {
       .subscribe((validations: FormControlValidators): void => this.setValidators(validations));
     this.unitStateService.presentedPageAdded
       .pipe(takeUntil(this.ngUnsubscribe))
-      .subscribe((presentedPage: number): void => this.onPresentedPageAdded(presentedPage));
+      .subscribe((): void => this.onPresentedPageAdded());
     this.unitStateService.unitStateElementCodeChanged
       .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((): void => this.onUnitStateElementCodeChanged());
@@ -83,10 +82,10 @@ export class UnitStateComponent implements OnInit, OnDestroy {
   }
 
   private get presentationProgress(): Progress {
-    if (this.presentedPages.length === 0) {
+    if (this.unitStateService.presentedPages.length === 0) {
       return 'none';
     }
-    return (this.pages.length === this.presentedPages.length) ? 'complete' : 'some';
+    return (this.pages.length === this.unitStateService.presentedPages.length) ? 'complete' : 'some';
   }
 
   private addControl = (control: FormControlElement): void => {
@@ -122,12 +121,9 @@ export class UnitStateComponent implements OnInit, OnDestroy {
     this.sendVopStateChangedNotification();
   }
 
-  private onPresentedPageAdded(pagePresented: number): void {
-    if (!this.presentedPages.includes(pagePresented)) {
-      this.presentedPages.push(pagePresented);
-    }
+  private onPresentedPageAdded(): void {
     // eslint-disable-next-line no-console
-    console.log('player: onPresentedPageAdded', this.presentedPages);
+    console.log('player: onPresentedPageAdded', this.unitStateService.presentedPages);
     this.sendVopStateChangedNotification();
   }
 
diff --git a/projects/player/src/app/services/unit-state.service.ts b/projects/player/src/app/services/unit-state.service.ts
index 1aa2971cec76af54d56800236e7254e223588427..964e45b7b0715b3fccaed718232cb23779842fba 100644
--- a/projects/player/src/app/services/unit-state.service.ts
+++ b/projects/player/src/app/services/unit-state.service.ts
@@ -14,10 +14,12 @@ import { IntersectionDetector } from '../classes/intersection-detector';
   providedIn: 'root'
 })
 export class UnitStateService {
+  unitStateElementCodes!: UnitStateElementCode[];
+  presentedPages: number[] = [];
+  private elementPageMap: { [elementId: string]: number } = {};
   private _presentedPageAdded = new Subject<number>();
   private _unitStateElementCodeChanged = new Subject<UnitStateElementCode>();
   private intersectionDetector!: IntersectionDetector;
-  unitStateElementCodes!: UnitStateElementCode[];
 
   constructor(@Inject(DOCUMENT) private document: Document) {
     this.intersectionDetector = new IntersectionDetector(document, '0px 0px 0px 0px');
@@ -36,17 +38,6 @@ export class UnitStateService {
     }
   }
 
-  private setUnitStateElementCodeStatus(id: string, status: UnitStateElementCodeStatus): void {
-    const unitStateElementCode = this.getUnitStateElement(id);
-    if (unitStateElementCode) {
-      // Set status only if it is higher than the old status
-      if (UnitStateElementCodeStatusValue[status] > UnitStateElementCodeStatusValue[unitStateElementCode.status]) {
-        unitStateElementCode.status = status;
-        this._unitStateElementCodeChanged.next(unitStateElementCode);
-      }
-    }
-  }
-
   get unitStateElementCodeChanged(): Observable<UnitStateElementCode> {
     return this._unitStateElementCodeChanged.asObservable();
   }
@@ -55,8 +46,11 @@ export class UnitStateService {
     return this._presentedPageAdded.asObservable();
   }
 
-  registerElement(element: { id: string, value: InputElementValue }, domElement: Element): void {
+  registerElement(element: { id: string, value: InputElementValue },
+                  domElement: Element,
+                  pageIndex: number): void {
     this.addUnitStateElementCode(element.id, element.value);
+    this.elementPageMap[element.id] = pageIndex;
     this.intersectionDetector.observe(domElement, element.id);
     this.intersectionDetector.intersecting
       .subscribe((id: string) => {
@@ -83,6 +77,43 @@ export class UnitStateService {
     this.setUnitStateElementCodeStatus(elementStatus.id, elementStatus.status);
   }
 
+  reset(): void {
+    this.elementPageMap = {};
+    this.unitStateElementCodes = [];
+    this.presentedPages = [];
+  }
+
+  private setUnitStateElementCodeStatus(id: string, status: UnitStateElementCodeStatus): void {
+    const unitStateElementCode = this.getUnitStateElement(id);
+    if (unitStateElementCode) {
+      // Set status only if it is higher than the old status
+      if (UnitStateElementCodeStatusValue[status] > UnitStateElementCodeStatusValue[unitStateElementCode.status]) {
+        unitStateElementCode.status = status;
+        this._unitStateElementCodeChanged.next(unitStateElementCode);
+        this.checkPresentedPageStatus(id);
+      }
+    }
+  }
+
+  private checkPresentedPageStatus(id: string): void {
+    const pageIndex = this.elementPageMap[id];
+    if (this.presentedPages.indexOf(pageIndex) === -1) {
+      const notDisplayedElements = Object.entries(this.elementPageMap)
+        .filter((map: [string, number]): boolean => map[1] === pageIndex)
+        .map((pageElement: [string, number]): UnitStateElementCode | undefined => this
+          .getUnitStateElement(pageElement[0]))
+        .filter(pageElement => pageElement && UnitStateElementCodeStatusValue[pageElement.status] <
+          UnitStateElementCodeStatusValue.DISPLAYED);
+      if (notDisplayedElements.length === 0) {
+        this.addPresentedPage(pageIndex);
+        this.presentedPages.push(pageIndex);
+      }
+    } else {
+      // eslint-disable-next-line no-console
+      console.log(`player: page ${pageIndex} is already presented`);
+    }
+  }
+
   private addUnitStateElementCode(id: string, value: InputElementValue): void {
     if (!this.getUnitStateElement(id)) {
       const unitStateElementCode: UnitStateElementCode = { id: id, value: value, status: 'NOT_REACHED' };