diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts
index f0f4406c0cf629af9d00f9469bfbb220bbc5639d..cb911014bdc25648b22fdc01df69ec502dabc915 100644
--- a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts
+++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts
@@ -23,22 +23,22 @@ export class LogsSessionsComponent implements OnChanges {
   paginator: PaginatorOptions;
   urlCode: string = 'sessionUrl';
   constructor(
-    private dataLogsService: DataLogsService,
+    private _dataLogsService: DataLogsService,
   ) {
     this.paginator = {
-      pageIndex: this.dataLogsService.pageNumber,
+      pageIndex: this._dataLogsService.pageNumber,
       length: 1,
-      limit: this.dataLogsService.limit,
+      limit: this._dataLogsService.limit,
       pageSizeOptions: [5, 10, 20],
     };
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.sessionChangeSub = this.dataLogsService.sessionLogChange$.subscribe(
+    this.sessionChangeSub = this._dataLogsService.sessionLogChange$.subscribe(
       () => {
-        this.paginator.limit = this.dataLogsService.limit;
-        this.paginator.pageIndex = this.dataLogsService.pageNumber;
-        this.paginator.length = this.dataLogsService.length;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
+        this.paginator.length = this._dataLogsService.length;
         this.getAllSessionsInfo(this.childNbSessions, this.paginator.pageIndex);
       },
     );
@@ -49,7 +49,7 @@ export class LogsSessionsComponent implements OnChanges {
   }
 
   getProcessTimeAggr (sessionId) {
-    this.dataLogsService.getProcessTimeAggr(sessionId).subscribe((result) => {
+    this._dataLogsService.getProcessTimeAggr(sessionId).subscribe((result) => {
       // console.log(result[0]);
       this.allSessionsIdInfo.push(result[0]);
     },
@@ -57,11 +57,11 @@ export class LogsSessionsComponent implements OnChanges {
   }
 
   getAllSessionsInfo(length, pageNumber) {
-    this.dataLogsService.getAllInfoForAllSessions(length, pageNumber).subscribe((result) => {
+    this._dataLogsService.getAllInfoForAllSessions(length, pageNumber).subscribe((result) => {
       this.allSessionsInfoList = result;
       this.nbSessions = result.length;
-      this.paginator.limit = this.dataLogsService.limit;
-      this.paginator.pageIndex = this.dataLogsService.pageNumber;
+      this.paginator.limit = this._dataLogsService.limit;
+      this.paginator.pageIndex = this._dataLogsService.pageNumber;
       this.paginator.length = this.childNbSessions;
       console.log('allSessionsInfoList: ', this.allSessionsInfoList);
       this.formatDate();
@@ -83,10 +83,10 @@ export class LogsSessionsComponent implements OnChanges {
 
     // When pagination is changed by user, we update datasetList with new pagination options
   changePagination(pageIndex) {
-    this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'SESSION');
+    this._dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'SESSION');
   }
 
   changePageSize(pageSize) {
-    this.dataLogsService.paginationChanged(pageSize, 1, 'SESSION');
+    this._dataLogsService.paginationChanged(pageSize, 1, 'SESSION');
   }
 }
diff --git a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts
index 2307caa6da991caf79f29f8c7d419deca44349f9..9caf8a585b94dd453b70a0b2ef597bc78ecf6470 100644
--- a/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts
+++ b/src/app/components/logs-dashboard/logs-slugs/logs-slugs.component.ts
@@ -22,22 +22,22 @@ export class LogsSlugsComponent implements OnChanges {
   childSessionsList: any;
   paginator: PaginatorOptions;
   constructor(
-    private dataLogsService: DataLogsService,
+    private _dataLogsService: DataLogsService,
   ) {
     this.paginator = {
-      pageIndex: this.dataLogsService.pageNumber,
+      pageIndex: this._dataLogsService.pageNumber,
       length: 1,
-      limit: this.dataLogsService.limit,
+      limit: this._dataLogsService.limit,
       pageSizeOptions: [5, 10, 20],
     };
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.allSlugsInfoList = [];
-    this.slugChangeSub = this.dataLogsService.slugLogChange$.subscribe(
+    this.slugChangeSub = this._dataLogsService.slugLogChange$.subscribe(
       () => {
-        this.paginator.limit = this.dataLogsService.limit;
-        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
         this.paginator.length = this.childNbSlugs;
         this.getAllInfoForAllSlugs(this.childNbSlugs, this.paginator.pageIndex);
       },
@@ -48,11 +48,11 @@ export class LogsSlugsComponent implements OnChanges {
     this.slugChangeSub.unsubscribe();
   }
   getAllInfoForAllSlugs(length, pageNumber) {
-    this.dataLogsService.getAllInfoForAllSlugs(length, pageNumber).subscribe((result) => {
+    this._dataLogsService.getAllInfoForAllSlugs(length, pageNumber).subscribe((result) => {
       this.allSlugsInfoList = result;
       this.slugInOnePage = result.length;
-      this.paginator.limit = this.dataLogsService.limit;
-      this.paginator.pageIndex = this.dataLogsService.pageNumber;
+      this.paginator.limit = this._dataLogsService.limit;
+      this.paginator.pageIndex = this._dataLogsService.pageNumber;
       this.paginator.length = this.childNbSlugs;
       console.log('allSlugsInfoList: ', this.allSlugsInfoList);
       this.formatDate();
@@ -73,10 +73,10 @@ export class LogsSlugsComponent implements OnChanges {
   }
     // When pagination is changed by user, we update datasetList with new pagination options
   changePagination(pageIndex) {
-    this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'SLUG');
+    this._dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'SLUG');
   }
 
   changePageSize(pageSize) {
-    this.dataLogsService.paginationChanged(pageSize, 1, 'SLUG');
+    this._dataLogsService.paginationChanged(pageSize, 1, 'SLUG');
   }
 }
diff --git a/src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts
index 97683add748737222687f296ce9a81fce2ea03fa..6546244f680b049a891166693e6caa3c06c55164 100644
--- a/src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts
+++ b/src/app/components/logs-dashboard/report/logs-error/logs-error.component.ts
@@ -50,13 +50,13 @@ export class LogsErrorComponent implements OnChanges {
   pageSizeOptions = [5, 10, 25, 100];
   sessionIdList: [string];
   constructor(
-    private dataLogsService: DataLogsService,
+    private _dataLogsService: DataLogsService,
     private route: ActivatedRoute,
   ) {
     this.paginator = {
-      pageIndex: this.dataLogsService.pageNumber,
+      pageIndex: this._dataLogsService.pageNumber,
       length: 1,
-      limit: this.dataLogsService.limit,
+      limit: this._dataLogsService.limit,
       pageSizeOptions: [5, 10, 20],
     };
   }
@@ -67,10 +67,10 @@ export class LogsErrorComponent implements OnChanges {
     this.allStepsData = [];
     this.allErrorLogs = [];
     this.getLogsSteps();
-    this.errorLogChangeSub = this.dataLogsService.errorLogChange$.subscribe(
+    this.errorLogChangeSub = this._dataLogsService.errorLogChange$.subscribe(
       () => {
-        this.paginator.limit = this.dataLogsService.limit;
-        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
         if (this.logTypes[0].selected === true) {
           this.getErrorStepsLogs(this.selectedStep.step, this.selectedStep.nbErrors, this.paginator.pageIndex);
         }
@@ -87,7 +87,7 @@ export class LogsErrorComponent implements OnChanges {
     if ((this.childUuid != null) && (this.childSessionId != null)) {
       // console.log('parameters', this.childUuid, this.childSessionId);
 
-      this.dataLogsService.getAllStepsDuration(
+      this._dataLogsService.getAllStepsDuration(
         this.childUuid,
         this.childSessionId,
       ).subscribe((results) => {
@@ -115,7 +115,7 @@ export class LogsErrorComponent implements OnChanges {
     if ((this.childUuid != null) && (this.childSessionId != null)) {
       // console.log('parameters', this.childUuid, this.childSessionId);
 
-      this.dataLogsService.getLogsStepsLogs(
+      this._dataLogsService.getLogsStepsLogs(
         step,
         this.childSessionId,
         this.childUuid,
@@ -125,9 +125,9 @@ export class LogsErrorComponent implements OnChanges {
       ).subscribe((results) => {
         // console.log('results', results);
         this.allErrorLogs = results;
-        this.paginator.limit = this.dataLogsService.limit;
-        this.paginator.pageIndex = this.dataLogsService.pageNumber;
-        this.paginator.length = this.dataLogsService.length;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
+        this.paginator.length = this._dataLogsService.length;
       },
       );
     }
@@ -136,7 +136,7 @@ export class LogsErrorComponent implements OnChanges {
     if ((this.childUuid != null) && (this.childSessionId != null)) {
       // console.log('parameters', this.childUuid, this.childSessionId);
 
-      this.dataLogsService.getLogsStepsLogs(
+      this._dataLogsService.getLogsStepsLogs(
         step,
         this.childSessionId,
         this.childUuid,
@@ -146,9 +146,9 @@ export class LogsErrorComponent implements OnChanges {
       ).subscribe((results) => {
         // console.log('results', results);
         this.allLogs = results;
-        this.paginator.limit = this.dataLogsService.limit;
-        this.paginator.pageIndex = this.dataLogsService.pageNumber;
-        this.paginator.length = this.dataLogsService.length;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
+        this.paginator.length = this._dataLogsService.length;
       },
       );
     }
@@ -156,10 +156,10 @@ export class LogsErrorComponent implements OnChanges {
 
     // When pagination is changed by user, we update datasetList with new pagination options
   changePagination(pageIndex) {
-    this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'ERROR');
+    this._dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'ERROR');
   }
 
   changePageSize(pageSize) {
-    this.dataLogsService.paginationChanged(pageSize, 1, 'ERROR');
+    this._dataLogsService.paginationChanged(pageSize, 1, 'ERROR');
   }
 }
diff --git a/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html
index 32374bb5d48f235376fab13e1d79bfe734a5d59c..faf4a28bff0bb951c18c593102840186cb9016c6 100644
--- a/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html
+++ b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.html
@@ -5,19 +5,18 @@
     <div *ngFor="let oneStepData of allStepsData; let i=index; let odd=odd; let even=even;">
       <div *ngIf="oneStepData" (click)='getLogsSelector(oneStepData._id.step, oneStepData.counts);'>
         <div class="table entity-list-table">
-          <div class="columns is-marginless">
-            <div class="column is-6 has-text-left">
-              <p>Step: {{oneStepData._id.step}}</p>
-            </div>
-          </div>
-          <div class="columns is-marginless">
-            <div class="column is-6 has-text-left">
+          <div class="data columns is-multiline is-vcentered is-marginless"
+          [ngClass]="{ odd: odd, even: even }">
+            <div class=" columns is-marginless" >
+              
+            <div class="column has-text-left">
+              <p>Step: {{oneStepData._id.step}}</p><br>
               <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
-                {{oneStepData.totalSecondsSpent}}s</p>
-            </div>
-            <div class="column is-6 has-text-right">
+                  {{oneStepData.totalSecondsSpent}}s</p><br>
+                  <p>Info(s): {{oneStepData.counts.INFO}} &nbsp; Erreur(s): {{oneStepData.counts.ERROR}}</p>
 
-              <div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}">
+            </div>
+            <div class="arrows" [ngClass]="{'is-displayed': displayedStep === oneStepData._id.step}">
                 <svg xmlns="https://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
                   <path
                     d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
@@ -27,17 +26,28 @@
                     class="brandcolor" />
                 </svg>
               </div>
-
-            </div>
           </div>
-          <div class="columns is-marginless">
+          <!-- <div class="columns is-marginless"> -->
+            <!-- <div class="column is-6 has-text-left">
+              <p>Durée: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
+                {{oneStepData.totalSecondsSpent}}s</p>
+            </div> -->
+
+            <!-- <div class="column is-6 has-text-right">
+
+
+
+            </div> -->
+          <!-- </div> -->
+          <!-- <div class="columns is-marginless">
             <div class="column is-6 has-text-left">
               <p>Erreur(s): {{oneStepData.counts.ERROR}}</p>
             </div>
             <div class="column is-6 has-text-left">
               <p>Info(s): {{oneStepData.counts.INFO}}</p>
             </div>
-          </div>
+          </div> -->
+        </div>
         </div>
       </div>
     </div>
@@ -51,9 +61,10 @@
       [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
       [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
     </app-paginator>
-    <div class="data-list">
-      <div class="color-green" *ngFor="let oneLog of allLogs">
-        <div class="table entity-list-table">
+    <!-- <div class="data-list"> -->
+      <div class="table entity-list-table is-marginless" *ngFor="let oneLog of allLogs; let i=index; let odd=odd; let even=even;">
+          <div class="data columns is-multiline is-vcentered is-marginless"
+          [ngClass]="{ odd: odd, even: even }">
           <div class="columns is-marginless">
             <div class="column is-12 has-text-left">
               <p>step: {{oneLog.step}}</p>
@@ -65,7 +76,6 @@
               <p>progress-ratio: {{oneLog.progress_ratio}}</p>
             </div>
           </div>
-        </div>
       </div>
     </div>
 
diff --git a/src/app/components/logs-dashboard/report/logs-info/logs-info.component.ts b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.ts
index a494f306dd2c6bc6681742741894e02128bffb65..d31c04950e002ceced7802e343ffde6a40ed1d27 100644
--- a/src/app/components/logs-dashboard/report/logs-info/logs-info.component.ts
+++ b/src/app/components/logs-dashboard/report/logs-info/logs-info.component.ts
@@ -49,13 +49,13 @@ export class LogsInfoComponent implements OnChanges {
   pageSizeOptions = [5, 10, 25, 100];
   sessionIdList: [string];
   constructor(
-    private dataLogsService: DataLogsService,
+    private _dataLogsService: DataLogsService,
     private route: ActivatedRoute,
   ) {
     this.paginator = {
-      pageIndex: this.dataLogsService.pageNumber,
+      pageIndex: this._dataLogsService.pageNumber,
       length: 1,
-      limit: this.dataLogsService.limit,
+      limit: this._dataLogsService.limit,
       pageSizeOptions: [5, 10, 20],
     };
   }
@@ -65,11 +65,11 @@ export class LogsInfoComponent implements OnChanges {
     this.slug = this.childSlug;
     this.allStepsData = [];
     this.getLogsSteps();
-    this.infoChangeSub = this.dataLogsService.infoLogChange$.subscribe(
+    this.infoChangeSub = this._dataLogsService.infoLogChange$.subscribe(
       () => {
-        this.paginator.limit = this.dataLogsService.limit;
-        this.paginator.pageIndex = this.dataLogsService.pageNumber;
-        this.paginator.length = this.dataLogsService.length;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
+        this.paginator.length = this._dataLogsService.length;
         this.getSimpleStepsLogs(this.selectedStep.step, this.selectedStep.nbInfos, this.paginator.pageIndex);
       },
     );
@@ -82,7 +82,7 @@ export class LogsInfoComponent implements OnChanges {
     if ((this.childUuid != null) && (this.childSessionId != null)) {
       // console.log('parameters', this.childUuid, this.childSessionId);
 
-      this.dataLogsService.getAllStepsDuration(
+      this._dataLogsService.getAllStepsDuration(
         this.childUuid,
         this.childSessionId,
       ).subscribe((results) => {
@@ -104,7 +104,7 @@ export class LogsInfoComponent implements OnChanges {
     if ((this.childUuid != null) && (this.childSessionId != null)) {
       // console.log('parameters', this.childUuid, this.childSessionId);
 
-      this.dataLogsService.getLogsStepsLogs(
+      this._dataLogsService.getLogsStepsLogs(
         step,
         this.childSessionId,
         this.childUuid,
@@ -114,9 +114,9 @@ export class LogsInfoComponent implements OnChanges {
       ).subscribe((results) => {
         // console.log('results', results);
         this.allLogs = results;
-        this.paginator.limit = this.dataLogsService.limit;
-        this.paginator.pageIndex = this.dataLogsService.pageNumber;
-        this.paginator.length = this.dataLogsService.length;
+        this.paginator.limit = this._dataLogsService.limit;
+        this.paginator.pageIndex = this._dataLogsService.pageNumber;
+        this.paginator.length = this._dataLogsService.length;
       },
       );
     }
@@ -124,10 +124,10 @@ export class LogsInfoComponent implements OnChanges {
 
   // When pagination is changed by user, we update datasetList with new pagination options
   changePagination(pageIndex) {
-    this.dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'INFO');
+    this._dataLogsService.paginationChanged(this.paginator.limit, pageIndex, 'INFO');
   }
 
   changePageSize(pageSize) {
-    this.dataLogsService.paginationChanged(pageSize, 1, 'INFO');
+    this._dataLogsService.paginationChanged(pageSize, 1, 'INFO');
   }
 }
diff --git a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html
index e999b0ad32d34c389e18254a9802efda470b4f79..abe58df8e50ba566daf129373ce33397ad642b93 100644
--- a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html
+++ b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.html
@@ -100,17 +100,19 @@
             </div>
           </div>
         </div>
-        <div class="columns is-marginless">
+
+      </div>
+      <div class="columns is-marginless">
           <div class="column">
-            <!-- <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
-                [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
-                [showFirstLastButtons]="true" (page)="changePagination($event)"
-                (pageSizeChanged)="changePageSize($event)">
-              </app-paginator> -->
+            <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
+              [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
+              [showFirstLastButtons]="true" (page)="changePagination($event)"
+              (pageSizeChanged)="changePageSize($event)">
+            </app-paginator>
           </div>
         </div>
-      </div>
     </div>
+
   </div>
 
   <div [ngClass]="{'hidden': !isSession}">
@@ -215,17 +217,14 @@
               </div>
             </div>
           </div>
-          <div class="columns is-marginless">
-            <div class="column">
-              <!-- <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
-                    [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
-                    [showFirstLastButtons]="true" (page)="changePagination($event)"
-                    (pageSizeChanged)="changePageSize($event)">
-                  </app-paginator> -->
-            </div>
-          </div>
         </div>
       </div>
+      <div class="column">
+        <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.limit"
+          [pageSizeOptions]="paginator.pageSizeOptions" [pageIndex]="paginator.pageIndex" [pagesToShow]="5"
+          [showFirstLastButtons]="true" (page)="changePagination($event)" (pageSizeChanged)="changePageSize($event)">
+        </app-paginator>
+      </div>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts
index c37938bc22ac20a9dc150fa17c143422aa715751..a890a171f5972bc71460262defafc6ffc5ca4808 100644
--- a/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts
+++ b/src/app/components/logs-dashboard/report/logs-pre-report/logs-pre-report.component.ts
@@ -5,6 +5,8 @@ import { filter, switchMap } from 'rxjs/operators';
 import { Format } from 'src/app/models/format.model';
 import { DataLogsService } from 'src/app/services/data-logs.service';
 import { IPageHeaderInfo } from 'src/app/models/page.model';
+import { PaginatorOptions } from 'src/app/models/paginator-options.model';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-logs-pre-report',
@@ -16,18 +18,22 @@ export class LogsPreReportComponent implements OnInit {
     title: 'Data-Logs Pre-report',
   };
   previousUrl: string = '/datalogs';
+  prereportChangeSub: Subscription;
   responseArray: any = [];
   form: FormGroup;
   title: string;
-  type: string ;
+  type: string;
   id: string;
-  serviceName:string;
+  serviceName: string;
   nbObjects: number = 0;
-  isSession:boolean = false;
-  allSlugsInfoList:any = [];
+  isSession: boolean = false;
+  allSlugsInfoList: any = [];
   allSessionsInfoList: any = [];
+  // Paginator options
+  paginator: PaginatorOptions;
+  pageSizeOptions = [5, 10, 25, 100];
 
-  oneTempSlugsInfo:any = [];
+  oneTempSlugsInfo: any = [];
 
   constructor(
     private _dataLogsService: DataLogsService,
@@ -35,6 +41,12 @@ export class LogsPreReportComponent implements OnInit {
     private _router: Router,
     private _fb: FormBuilder,
   ) {
+    this.paginator = {
+      pageIndex: this._dataLogsService.pageNumber,
+      length: 1,
+      limit: this._dataLogsService.limit,
+      pageSizeOptions: [5, 10, 20],
+    };
   }
 
   ngOnInit() {
@@ -45,29 +57,18 @@ export class LogsPreReportComponent implements OnInit {
     if (this.type === 'session') {
       this.isSession = true;
     }
+    this.getComplementaryInformation();
 
-    this._route.paramMap.pipe(
-      filter((paramMap: ParamMap) => (paramMap.get('id') !== null)),
-      filter((paramMap: ParamMap) => (paramMap.get('type') !== null)),
-      switchMap((paramMap: ParamMap) => this._dataLogsService.getComplementaryFromSlugOrSession(
-        paramMap.get('type'),
-        paramMap.get('id'))))
-      .subscribe((response) => {
 
-        this.responseArray = response[0];
-        if (this.type === 'session') {
-          this.nbObjects = response[0].slug_list.length;
-          console.log('response[0]', response[0]);
-          this.completeSlugsInfos(response[0].slug_list);
-        } else {
-          this.nbObjects = response[0].session_id_list.length;
-          console.log('response[0]', response[0]);
-          this.completeSessionsInfos(response[0].session_id_list);
-        }
-        // console.log('responseArray: ', this.responseArray);
-        // console.log('nbObjects: ', this.nbObjects);
 
-      });
+    this.infoChangeSub = this.dataLogsService.infoLogChange$.subscribe(
+      () => {
+        this.paginator.limit = this.dataLogsService.limit;
+        this.paginator.pageIndex = this.dataLogsService.pageNumber;
+        this.paginator.length = this.dataLogsService.length;
+        this.getComplementaryInformation();
+      },
+    );
   }
   completeSlugsInfos(slugList) {
     this.allSlugsInfoList = [];
@@ -82,7 +83,7 @@ export class LogsPreReportComponent implements OnInit {
       for (let j = 0; j < result[0].data.length; j += 1) {
         result[0].data[j].completionDate.$date = new Date(result[0].data[j].completionDate.$date);
       }
-      this.allSlugsInfoList.push(result[0]) ;
+      this.allSlugsInfoList.push(result[0]);
     },
     );
 
@@ -101,10 +102,40 @@ export class LogsPreReportComponent implements OnInit {
       for (let j = 0; j < result[0].data.length; j += 1) {
         result[0].data[j].completionDate.$date = new Date(result[0].data[j].completionDate.$date);
       }
-      this.allSessionsInfoList.push(result[0]) ;
+      this.allSessionsInfoList.push(result[0]);
     },
     );
 
   }
 
+  getComplementaryInformation() {
+    this._route.paramMap.pipe(
+      filter((paramMap: ParamMap) => (paramMap.get('id') !== null)),
+      filter((paramMap: ParamMap) => (paramMap.get('type') !== null)),
+      switchMap((paramMap: ParamMap) => this._dataLogsService.getComplementaryFromSlugOrSession(
+        paramMap.get('type'),
+        paramMap.get('id'))))
+      .subscribe((response) => {
+
+        this.responseArray = response[0];
+        if (this.type === 'session') {
+          this.nbObjects = response[0].slug_list.length;
+          console.log('response[0]', response[0]);
+          this.completeSlugsInfos(response[0].slug_list);
+        } else {
+          this.nbObjects = response[0].session_id_list.length;
+          console.log('response[0]', response[0]);
+          this.completeSessionsInfos(response[0].session_id_list);
+        }
+      });
+  }
+  // When pagination is changed by user, we update datasetList with new pagination options
+  changePagination(pageIndex) {
+    this._dataLogsService.paginationChanged(this.paginator.limit, pageIndex, this.type);
+  }
+
+  changePageSize(pageSize) {
+    this._dataLogsService.paginationChanged(pageSize, 1, this.type);
+  }
+
 }
diff --git a/src/app/services/data-logs.service.ts b/src/app/services/data-logs.service.ts
index 9e753ac405fd6fa887b023b7705c5fc141d73833..1976b2a835caf0414837436d6e02db373e683ac8 100644
--- a/src/app/services/data-logs.service.ts
+++ b/src/app/services/data-logs.service.ts
@@ -224,9 +224,9 @@ export class DataLogsService {
       this._infoLogSubject.next();
     }if (logType === 'ERROR') {
       this._errorLogSubject.next();
-    }if (logType === 'SLUG') {
+    }if (logType === 'SLUG' || logType === 'slug') {
       this._slugLogSubject.next();
-    }if (logType === 'SESSION') {
+    }if (logType === 'SESSION' || logType === 'session') {
       this._sessionLogSubject.next();
     }
   }