diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index c27042c18e06ed289627eac91c8ec0f60feaa9c4..fc91f8712dd2cebba33644bce5a6951d59e8f129 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -16,6 +16,8 @@ import { ImageUploadComponent } from './image-upload/image-upload.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { LogsDataComponent } from './logs-dashboard/logs-data/logs-data.component';
 import { LogsGraphComponent } from './logs-dashboard/logs-graph/logs-graph.component';
+import { LogsSessionsComponent } from './logs-dashboard/logs-sessions/logs-sessions.component';
+
 
 export {
   MenuComponent,
@@ -36,6 +38,7 @@ export {
   NotificationsComponent,
   LogsDataComponent,
   LogsGraphComponent,
+  LogsSessionsComponent,
 };
 
 // tslint:disable-next-line:variable-name
@@ -58,4 +61,5 @@ export const AppComponents = [
   NotificationsComponent,
   LogsDataComponent,
   LogsGraphComponent,
+  LogsSessionsComponent,
 ];
diff --git a/src/app/components/logs-dashboard/logs-data/logs-data.component.html b/src/app/components/logs-dashboard/logs-data/logs-data.component.html
index 56e34a632cbbe2ff99530d06026395c2ee0960fb..9719aac7dd794c0c1cf57fff3f152e174a814805 100644
--- a/src/app/components/logs-dashboard/logs-data/logs-data.component.html
+++ b/src/app/components/logs-dashboard/logs-data/logs-data.component.html
@@ -1,80 +1,86 @@
 <div class="section">
-  
-    <div class="input-field">
-        <form >
-          <label>uuid: </label>
-            <input type="text" size="40" name="uuid" [(ngModel)]="uuid">
-            <br>
-            <label>sessionId: </label>
-            <input type="text" size="40" name="sessionId" [(ngModel)]="sessionId">
-            <label>slug: </label>
-            <input type="text" size="40" name="slug" [(ngModel)]="slug">
-         </form>
-         <br>
-      <a class="button button-gl is-centered" (click)="onSubmit()">
-        Afficher
-      </a>
+
+  <div class="input-field">
+    <form>
+      <label>uuid: </label>
+      <input type="text" size="40" name="uuid" [(ngModel)]="uuid">
+      <br>
+      <label>sessionId: </label>
+      <input type="text" size="40" name="sessionId" [(ngModel)]="sessionId">
+      <label>slug: </label>
+      <input type="text" size="40" name="slug" [(ngModel)]="slug">
+    </form>
+    <br>
+    <a class="button button-gl is-centered" (click)="onSubmit()">
+      Display Steps Duration
+    </a>
+  </div>
+  <div class="columns is-centered is-marginless">
+    <div class="column has-text-centered">
+      <h2>{{ nbSessionId }} sessionId trouvées</h2>
+      <div *ngFor="let s of allFields.session_id_list">
+        <p>{{s}} </p>
+      </div>
+
+      <h2>{{ nbSlug }} slugs trouvées</h2>
+      <div *ngFor="let slg of allFields.slug_list">
+        <p>{{slg}} </p>
+      </div>
+      <h2>{{ nbUuid }} uuid trouvées</h2>
+      <div *ngFor="let ul of allFields.uuid_list">
+        <p>{{ul}} </p>
+      </div>
+
     </div>
-    <div class="columns is-centered is-marginless">
-        <div class="column has-text-centered">
-          <h2>{{ nbSessionId }} sessionId trouvées</h2>
-          <div *ngFor="let s of allFields.session_id_list">
-              <p>{{s}} </p>
-          </div>
-         
-          <h2>{{ nbSlug }} slugs trouvées</h2>
-          <div *ngFor="let slg of allFields.slug_list">
-              <p>{{slg}} </p>
-          </div>
-          <h2>{{ nbUuid }} uuid trouvées</h2>
-          <div *ngFor="let ul of allFields.uuid_list">
-              <p>{{ul}} </p>
-          </div>
+  </div>
+  <div class="columns is-centered is-marginless">
+  <div class="column has-text-centered">
+
+      <app-logs-sessions [childSessionId]="sessionId" [childNbSessions]="nbSessionId" [childSessionsList]="allFields.session_id_list"></app-logs-sessions>
 
-        </div>
+    </div>
     </div>
   <div class="columns is-centered is-marginless">
     <div class="column has-text-centered">
       <div *ngFor="let a of [data]">
-          <hr>
+        <hr>
         <span>
-            <h3>
-              uuid: {{a.uuid}} 
-            </h3>
-            <p>|</p>
-            <p>V</p>
-
-            session_id list:
-            <div *ngFor="let s of a.sessionIdList">
-               {{s}}
-            </div>
+          <h3>
+            uuid: {{a.uuid}}
+          </h3>
+          <p>|</p>
+          <p>V</p>
+          session_id list:
+          <div *ngFor="let s of a.sessionIdList">
+            {{s}}
+          </div>
         </span>
+      </div>
     </div>
 
-  </div>
-
-  <div class="column has-text-centered">
+    <div class="column has-text-centered">
       <div *ngFor="let oneStepData of allStepsData">
         <div class="mini-log-card">
           <span>
-              <p>slug: {{oneStepData._id.slug}} </p>
+            <p>slug: {{oneStepData._id.slug}} </p>
             <p>uuid: {{oneStepData._id.uuid}} </p>
-          <p>sessionId: {{oneStepData._id.session_id}} </p>
+            <p>sessionId: {{oneStepData._id.session_id}} </p>
             <h3>
-                <p>step: {{oneStepData._id.step}}</p>
-              <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m : {{oneStepData.totalSecondsSpent}}s </p>
+              <p>step: {{oneStepData._id.step}}</p>
+              <p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
+                {{oneStepData.totalSecondsSpent}}s </p>
             </h3>
 
-        </span>
+          </span>
+        </div>
       </div>
+
     </div>
 
-  </div>
+    <div class="table">
+    </div>
 
-  <div class="table">
-  </div>
-  
 
-</div>
+  </div>
 
-<app-logs-graph></app-logs-graph>
\ No newline at end of file
+  <app-logs-graph [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-graph>
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html
index e6218fc4c7ba432983e57f3d89ab431d5cbe7641..015ef8e0a68d39107882e55a81287c5e0edfde21 100644
--- a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html
+++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.html
@@ -1,5 +1,4 @@
 <p>
-  graph-logs works!
 </p>
 <div class="graph-component">
   <div *ngFor="let data of this.graphData">
@@ -7,8 +6,13 @@
     </div>
 
   </div>
-
+  <a class="button button-gl is-centered" (click)="replotGraph()">
+      Reload Chart
+    </a>
   <div class="graph-div-canvas">
+      <p>uuid: {{childUuid}} </p>
+      <p>sessionId: {{childSessionId}} </p>
+      <p>slug: {{childSlug}} </p>
     <canvas id="graphCanvas">{{ chart }}</canvas>
 
   </div>
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss
index 17c0def17fcc5e21e50addd46ee7e6a14799074d..04e7e7a073c13380c206cc5c8e8025f014d1ad3a 100644
--- a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss
+++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.scss
@@ -1,3 +1,3 @@
 .graph-div-canvas{
-    width: 60%;
+    width: 95%;
 }
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts
index 747c2812da7b4854fbf9fcff664d6eadd4b53540..b4d074746867508e98d7575f0b12af88b9b35a3f 100644
--- a/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts
+++ b/src/app/components/logs-dashboard/logs-graph/logs-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { Chart } from 'chart.js';
 import { DataLogsService } from 'src/app/services/data-logs.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
@@ -12,6 +12,10 @@ import { FormsModule } from '@angular/forms';
   styleUrls: ['./logs-graph.component.scss'],
 })
 export class LogsGraphComponent implements OnInit {
+  @Input() childUuid: string;
+  @Input() childSessionId: string;
+  @Input() childSlug: string;
+
   public myChart: Chart;
   graphData: any;
   uuid: string;
@@ -28,9 +32,7 @@ export class LogsGraphComponent implements OnInit {
     this.graphData = [0.2, 0.3];
     this.xValues = [];
     this.yValues = [];
-    this.dataset = []
-    this.uuid = 'c1b069ca-181d-4265-9838-8d182f207bd3';
-    this.sessionId = '372b59a4-72b0-4a3a-b518-843e516da0cd';
+    this.dataset = [];
     this.getData();
     this.myChart.update();
 
@@ -38,17 +40,21 @@ export class LogsGraphComponent implements OnInit {
 
   plotGraph() {
 
-    this.myChart = new Chart(document.getElementById("graphCanvas"), {
+    this.myChart = new Chart(document.getElementById('graphCanvas'), {
       type: 'scatter',
       data: {
         datasets: this.dataset,
       },
       options: {
+        title: {
+          display: true,
+          text: 'Logs-chart: progress-report.',
+        },
         elements: {
           line: {
-              tension: 0, // disables bezier curves
+            tension: 0, // disables bezier curves
           },
-      },
+        },
         responsive: true,
         scales: {
           xAxes: [{
@@ -56,7 +62,7 @@ export class LogsGraphComponent implements OnInit {
             display: true,
             scaleLabel: {
               display: true,
-              labelString: 'Date',
+              labelString: 'Time',
             },
             ticks: {
               major: {
@@ -79,8 +85,9 @@ export class LogsGraphComponent implements OnInit {
   }
 
   getXYValuesFromData() {
-    const color = ["red", "yellow", "blue", "black", "pink", "green", "orange"];
-    let c=0;
+    const color = ['red', 'yellow', 'blue', 'black', 'pink', 'green', 'orange'];
+    let c = 0;
+    this.dataset = [];
     for (const data of this.graphData) {
       const arrayOfXY = [];
       for (const i in data.values) {
@@ -104,13 +111,17 @@ export class LogsGraphComponent implements OnInit {
       c += 1;
     }
   }
+  replotGraph() {
+    this.myChart.destroy();
+    this.getData();
+    this.myChart.update();
+  }
   getData() {
-    this.dataLogsService.getData(this.uuid, this.sessionId).subscribe((results) => {
+    this.dataLogsService.getData(this.childUuid, this.childSessionId).subscribe((results) => {
       console.log(results);
       this.graphData = results;
       this.getXYValuesFromData();
       this.plotGraph();
-
     },
     );
   }
diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..8c6361cb96d83d4314d7f9dcd702f3cdd6a0a256
--- /dev/null
+++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.html
@@ -0,0 +1,68 @@
+<ng-container >
+    <div>
+      <div class="section">
+        <div class="columns is-centered is-marginless">
+          <div class="column has-text-centered">
+            <h2>{{ childNbSessions }} Sessions trouvées</h2>
+          </div>
+        </div>
+
+        <div class="table">
+          <div class="header columns is-marginless">
+            <div class="column is-4 has-text-centered">
+              <span (click)="sortBy('name')" class="is-sortable">
+                <span class="column-title" >SessionId</span>
+                <p></p>
+              </span>
+            </div>
+            <div class="column is-1 has-text-centered">
+              <span class="column-title">All ?</span>
+            </div>
+            <div class="column is-2 has-text-centered">
+                <span class="column-title">Completion Date</span>
+            </div>
+            <div class="column is-2 has-text-centered">
+                <span class="column-title">Duration</span>
+            </div>
+            <div class="column  is-1 has-text-centered">
+                <span class="column-title">Errors?</span>
+            </div>
+            <div class="column is-offset-1  is-1 has-text-centered">
+                <span class="column-title"></span>
+            </div>
+          </div>
+          <div class="data-list">
+            <div class="data columns is-multiline is-vcentered is-marginless"
+              *ngFor="let sessionId of childSessionsList; let i=index;">
+              <div class="column is-4 has-text-centered">
+                {{ sessionId }}
+              </div>
+              <div class="column is-1 has-text-centered">
+                <!-- {{ format.mapServerType}} -->
+              </div>
+              <div class="column is-2 has-text-centered">
+                  <span class="column-title">Completion Date</span>
+              </div>
+              <div class="column is-2 has-text-centered">
+                  <span class="column-title">Duration</span>
+              </div>
+              <div class="column  is-1 has-text-centered actions"> 
+              </div>
+              <div class="column is-offset-1 is-1 has-text-centered actions"> 
+                  <app-crud-buttons ></app-crud-buttons>
+              </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>
+  </ng-container>
\ No newline at end of file
diff --git a/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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
new file mode 100644
index 0000000000000000000000000000000000000000..4ce05de95a50ca803977427d077f71f31ea69199
--- /dev/null
+++ b/src/app/components/logs-dashboard/logs-sessions/logs-sessions.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { DataLogsService } from 'src/app/services/data-logs.service';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { switchMap } from 'rxjs/operators';
+import { ILogs } from 'src/app/models/logs.model';
+import { FormsModule } from '@angular/forms';
+@Component({
+  selector: 'app-logs-sessions',
+  templateUrl: './logs-sessions.component.html',
+  styleUrls: ['./logs-sessions.component.scss'],
+})
+export class LogsSessionsComponent implements OnInit {
+  @Input() childSessionId: string;
+  @Input() childSessionsList: any;
+  @Input() childNbSessions: number;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}