diff --git a/ordre-du-jour/odj/src/app/app.component.html b/ordre-du-jour/odj/src/app/app.component.html
index ab7dd09e..297b97af 100644
--- a/ordre-du-jour/odj/src/app/app.component.html
+++ b/ordre-du-jour/odj/src/app/app.component.html
@@ -95,13 +95,41 @@
       'topic-is-finished': subjects[currentSubjectId].finished || ! isTopicRunning(subjects[currentSubjectId])
       }">
 
-        <h1 class="subject active">
-          {{ subjects[currentSubjectId].title }}
-        </h1>
-        <p>{{ subjects[currentSubjectId].duration }} min, par {{ subjects[currentSubjectId].author }}</p>
-        <p>Reste: {{ countRemainingMinutes(subjects[currentSubjectId]) }} min</p>
-        <p>avancement: {{ getPercentProgressTimeForTopic(subjects[currentSubjectId]) }} %</p>
+        <div class="content-current-subject">
 
+          <h1 class="subject active">
+            {{ subjects[currentSubjectId].title }}
+          </h1>
+          <p>{{ subjects[currentSubjectId].duration }} min, par {{ subjects[currentSubjectId].author }}</p>
+          <p>Reste: {{ countRemainingMinutes(subjects[currentSubjectId]) }} min</p>
+          <div class="actions">
+
+
+            <p>Début: {{ startTime }}, Fin: {{ endTime }}.
+              Durée: {{round(getMinutesBetweenTwoDates(startDate, endDate))}}</p>
+
+            <button class="btn btn-primary" (click)="previousSubject()">
+              précédent
+            </button>
+            <button class="btn is-primary" (click)="nextSubject()">
+              suivant
+            </button>
+            <button class="btn is-success" (click)="finishTopic(currentSubjectId)">
+              fini
+            </button>
+            <button class="btn btn-primary" (click)="updateProgressEveryPeriod()">
+              up temps
+            </button>
+          </div>
+
+          <p>avancement: {{ getPercentProgressTimeForTopic(subjects[currentSubjectId]) }} %</p>
+        </div>
+        <div class="stats">
+          <h2>
+            statistiques:
+          </h2>
+          {{statsExplication}}
+        </div>
         <hr>
         <div class="compte-rendu-infos">
           <label for="scribe">scribe</label>
@@ -115,25 +143,8 @@
           <br>
           <label for="fin">Fin</label>
           <input name="presents" id="fin" [(ngModel)]="endTime"/>
-
         </div>
-        <div class="actions">
 
-          <p>Début: {{ startTime }}, Fin: {{ endTime }}. Durée: {{round(getMinutesBetweenTwoDates(startDate,endDate))}}</p>
-
-          <button class="btn btn-primary" (click)="previousSubject()">
-            précédent
-          </button>
-          <button class="btn is-primary" (click)="nextSubject()">
-            suivant
-          </button>
-          <button class="btn is-success" (click)="finishTopic(currentSubjectId)">
-            fini
-          </button>
-          <button class="btn btn-primary" (click)="updateProgressEveryPeriod()">
-            up temps
-          </button>
-        </div>
       </div>
 
     </div>
diff --git a/ordre-du-jour/odj/src/app/app.component.scss b/ordre-du-jour/odj/src/app/app.component.scss
index 4944d8a6..c10b832c 100644
--- a/ordre-du-jour/odj/src/app/app.component.scss
+++ b/ordre-du-jour/odj/src/app/app.component.scss
@@ -124,9 +124,11 @@ main {
 .pill-group .pill:nth-child(6n + 1) {
   --pill-accent: var(--bright-blue);
 }
+
 .pill-group .pill:nth-child(6n + 2) {
   --pill-accent: var(--french-violet);
 }
+
 .pill-group .pill:nth-child(6n + 3),
 .pill-group .pill:nth-child(6n + 4),
 .pill-group .pill:nth-child(6n + 5) {
@@ -152,47 +154,62 @@ main {
 .social-links a:hover svg path {
   fill: var(--gray-900);
 }
+
 //
 //.left-side{
 //  width: 50%;
 //}
-.subject{
+.subject {
   display: block;
   padding: 1rem;
   border-left: 10px solid white;
-  &.active{
+
+  &.active {
     border-left-color: #00b89c;
+    width: 20em;
+    word-break: break-all;
+    word-wrap: break-word;
   }
 }
-label{
+
+.is-primary {
+  background: rgb(47, 86, 27)
+}
+
+label {
   margin-right: 2ch;
   margin-top: 1rem;
   min-width: 10rem;
   display: inline-block;
 }
 
-.btn{
+.btn {
   cursor: pointer;
   padding: 0.75rem 1.5rem;
   border: solid 1px slategray;
   border-radius: 0.5rem;
-  float:left;
+  float: left;
   margin-right: 2ch;
   display: inline-block;
 }
-pre{
+
+pre {
+  width: 20rem;
   padding: 0.5rem;
   background: lightslategrey;
+  overflow-x: auto;
 }
 
-.is-clickable{
+.is-clickable {
   cursor: pointer;
-  &:hover{
-    &.subject{
-      background: rgba(170, 210, 199,0.2);
+
+  &:hover {
+    &.subject {
+      background: rgba(170, 210, 199, 0.2);
     }
   }
 }
+
 @media screen and (max-width: 650px) {
   .content {
     flex-direction: column;
diff --git a/ordre-du-jour/odj/src/app/app.component.ts b/ordre-du-jour/odj/src/app/app.component.ts
index f1b3db98..6c5affbc 100644
--- a/ordre-du-jour/odj/src/app/app.component.ts
+++ b/ordre-du-jour/odj/src/app/app.component.ts
@@ -33,6 +33,8 @@ export class AppComponent implements OnInit, OnDestroy {
   today: any = new Date();
   // champs habituels pour le compte rendu:
   scribe: string = 'tykayn';
+  private timekeeper: string = 'Chuck Norris';
+  private animator: string = 'Covid Copperfield';
   presents: string = '- tykayn';
 
   pasteLand: string = "* Présentation du suivi sur Nextcloud - 5min (tykayn)\n" +
@@ -48,8 +50,7 @@ export class AppComponent implements OnInit, OnDestroy {
   startDate: Date = new Date();
   endDate: Date = new Date();
   private topicChangeDate: Date = new Date();
-  private timekeeper: any;
-  private animator: any;
+
 
 
   updateTopicChangeDate(): void {
@@ -60,6 +61,7 @@ export class AppComponent implements OnInit, OnDestroy {
     console.log(`Spent ${timeDifferenceInSeconds} seconds`);
     this.subjects[this.currentSubjectId].spentSeconds += timeDifferenceInSeconds;
     this.topicChangeDate = currentTime;
+    this.makeStatisticsOnTopicsSpentSeconds()
   }
 
   round(val: number) {
@@ -138,9 +140,6 @@ export class AppComponent implements OnInit, OnDestroy {
     this.startDate = this.makeDateFromHourToday(this.startTime + '');
     this.endDate = this.makeDateFromHourToday(this.endTime + '');
 
-    // this.interval = setInterval(() => {
-    this.updateProgressEveryPeriod();
-    // }, 1 * 1000);
 
   }
 
@@ -150,7 +149,9 @@ export class AppComponent implements OnInit, OnDestroy {
 
   nextSubject() {
     this.updateTopicChangeDate()
+    if(this.currentSubjectId < this.subjects.length-1) {
     this.currentSubjectId++
+    }
   }
 
   findMinutesDurationInDescription(topic: string): number {
@@ -249,7 +250,10 @@ export class AppComponent implements OnInit, OnDestroy {
     }
 
 
-    this.statsExplication = `Total spent seconds: ${totalSeconds}\nAverage spent seconds: ${averageSeconds}\nLongest topic: ${longestTopic.title} (${longestSeconds} seconds)\nShortest topic: ${shortestTopic.title} (${shortestSeconds} seconds)`;
+    this.statsExplication = `Temps passé: ${this.round(totalSeconds)}
+    Moyenne par sujet: ${this.round(averageSeconds)}
+    Sujet le plus long: ${longestTopic.title.replace('*','')} (${this.round(longestSeconds)} )
+    Sujet le plus court : ${shortestTopic.title.replace('*','')} (${this.round(shortestSeconds)})`;
   }
 
 
@@ -270,24 +274,29 @@ export class AppComponent implements OnInit, OnDestroy {
 
 
   buildCompteRendu() {
-    let compteRendu = `Compte rendu du ${this.formatDateYMD(this.today)}\n`;
-    compteRendu += ` début: ${this.startTime}, fin:${this.endTime}.\n`;
-    compteRendu += ` Présents: ${this.formatPresentLines()}.\n`;
+    let compteRendu = ` Compte rendu du ${this.formatDateYMD(this.today)}\n\n`;
+    compteRendu += `début: ${this.startTime}, fin:${this.endTime}.\n`;
+    compteRendu += `Présents:\n${this.formatPresentLines()}.\n`;
     if (this.scribe) {
-      compteRendu += ` Scribe: ${this.scribe}.\n`;
+      compteRendu += `Scribe: ${this.scribe}.\n`;
     }
     if (this.timekeeper) {
-      compteRendu += ` Gardien du temps: ${this.timekeeper}.\n`;
+      compteRendu += `Gardien du temps: ${this.timekeeper}.\n`;
     }
     if (this.animator) {
-      compteRendu += ` Animation: ${this.animator}.\n`;
+      compteRendu += `Animation: ${this.animator}.\n`;
     }
+      compteRendu += `Statistiques:\n
+       ${this.statsExplication}.`;
     for (const topic of this.subjects) {
       compteRendu += `* ${topic.title}-`;
       compteRendu += ` ${topic.duration} min`;
       compteRendu += ` (${topic.author})\n`;
-      compteRendu += ` \n${topic.notes}\n`;
+      compteRendu += ` ${topic.notes}\n`;
+      if(topic.spentSeconds){
+
       compteRendu += `Temps écoulé : ${this.round(topic.spentSeconds)}\n\n`;
+      }
     }
     this.compteRendu = compteRendu
     return compteRendu
@@ -309,7 +318,7 @@ export class AppComponent implements OnInit, OnDestroy {
           return line;
         }).join('\n') + '\n'
       }
-    return lines;
+    return lines.trim();
   }
 
   copyCompteRenduToClipboard() {