diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b53dbf8..040d56d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,6 +14,7 @@ import { ChampionshipComponent } from './championship/championship.component';
 import { ChampionshipselectordialogComponent } from './championshipselectordialog/championshipselectordialog.component';
 import { RacetimepipePipe } from './racetimepipe.pipe';
 import { MinutesPipe } from './minutes.pipe';
+import { TimespanComponent } from './timespan/timespan.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +26,8 @@ import { MinutesPipe } from './minutes.pipe';
     ChampionshipComponent,
     ChampionshipselectordialogComponent,
     RacetimepipePipe,
-    MinutesPipe
+    MinutesPipe,
+    TimespanComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/content/poule/poule.component.html b/src/app/content/poule/poule.component.html
index cba5e91..f399cdd 100644
--- a/src/app/content/poule/poule.component.html
+++ b/src/app/content/poule/poule.component.html
@@ -4,10 +4,10 @@
   <!--top level header: race + race 1 + race 2 + ... + penalty + total + result-->
   <div class="toplevelheader" style="grid-column: 1; grid-row : 1">race</div>
   <!--<ng-container *ngFor="let y of ' '.repeat(maxLaps).split(''), let lapindex = index">-->
-    <!--<div class="toplevelheader" [ngStyle]="{'grid-column': (1+lapindex+1), 'grid-row' : 1}">lap {{lapindex+1}}</div>-->
+  <!--<div class="toplevelheader" [ngStyle]="{'grid-column': (1+lapindex+1), 'grid-row' : 1}">lap {{lapindex+1}}</div>-->
   <!--</ng-container>-->
   <div class="toplevelheader" [ngStyle]="{'grid-column': 2, 'grid-row' : 1}">penalty</div>
-  <div class="toplevelheader" [ngStyle]="{'grid-column': 3, 'grid-row' : 1}">total</div>
+  <div class="toplevelheader" [ngStyle]="{'grid-column': 3, 'grid-row' : 1}">racetijd</div>
   <div class="toplevelheader" [ngStyle]="{'grid-column': 4, 'grid-row' : 1}">result</div>
 
 
@@ -22,10 +22,10 @@
     <ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let raceindex = index">
       <!--also loop over laps: then we're in the right cell-->
       <!--<ng-container *ngFor="let z of ' '.repeat(maxLaps).split(''), let lapindex = index">-->
-        <!--add the time -->
-        <!--<div [ngStyle]="{'grid-column':lapindex+2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">-->
-          <!--<span class="timecell">{{getLapTime(team.idteam, raceindex, lapindex)/1000 | number:'1.2-2'}}</span>-->
-        <!--</div>-->
+      <!--add the time -->
+      <!--<div [ngStyle]="{'grid-column':lapindex+2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">-->
+      <!--<span class="timecell">{{getLapTime(team.idteam, raceindex, lapindex)/1000 | number:'1.2-2'}}</span>-->
+      <!--</div>-->
       <!--</ng-container>-->
 
       <!--add a race header-->
@@ -35,11 +35,12 @@
 
       <!--do a penalty for this race/team combo-->
       <div class="penaltycell" [ngStyle]="{'grid-column':2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
-        <span class="timecell seconds">{{getPenaltySum(raceindex, team.idteam) | number:'1.0-0'}}</span>
+        <!--<span class="timecell seconds">{{getPenaltySum(raceindex, team.idteam)}}</span>-->
+        <app-timespan [theNumber]="getPenaltySum(raceindex, team.idteam)" [theUnit]="'s'"></app-timespan>
       </div>
       <div class="totalcell" [ngStyle]="{'grid-column':3, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
-        <span class="timecell minutes">{{getRaceTime(raceindex, team.idteam) | minutes}}</span>
-        <span class="timecell seconds">{{getRaceTimeSeconds(raceindex, team.idteam)}}</span>
+        <app-timespan [theNumber]="getRaceTime(raceindex, team.idteam) | minutes" [theUnit]="'m'"></app-timespan>
+        <app-timespan [theNumber]="getRaceTimeSeconds(raceindex, team.idteam)" [theUnit]="'s'"></app-timespan>
       </div>
 
 
@@ -49,8 +50,8 @@
     <div class="resultcell" [ngStyle]="{'grid-column':4,
   'grid-row-start':2+(teamindex*(maxRaces+1))+1,
   'grid-row-end': 2+(teamindex*(maxRaces+1))+1+maxRaces}">
-      <span class="timecell minutes">{{getAvgOfBestTwo(team.idteam) | minutes}}</span>
-      <span class="timecell seconds">{{((getAvgOfBestTwo(team.idteam)/1000)%60).toFixed(2)}}</span>
+      <app-timespan [theNumber]="getAvgOfBestTwo(team.idteam) | minutes" [theUnit]="'m'"></app-timespan>
+      <app-timespan [theNumber]="((getAvgOfBestTwo(team.idteam)/1000)%60).toFixed(2)" [theUnit]="'s'"></app-timespan>
     </div>
   </ng-container>
 
diff --git a/src/app/content/poule/poule.component.scss b/src/app/content/poule/poule.component.scss
index efae980..e41453b 100644
--- a/src/app/content/poule/poule.component.scss
+++ b/src/app/content/poule/poule.component.scss
@@ -34,3 +34,9 @@
   font-size: 60%;
 }
 
+.penaltycell {
+  color: red;
+}
+.resultcell {
+  font-size: 120%;
+}
diff --git a/src/app/content/poule/poule.component.ts b/src/app/content/poule/poule.component.ts
index 083466d..f50a702 100644
--- a/src/app/content/poule/poule.component.ts
+++ b/src/app/content/poule/poule.component.ts
@@ -89,20 +89,20 @@ export class PouleComponent implements OnInit {
       || !this.timesIndexed[idTeam]
       || !this.timesIndexed[idTeam][raceNr]
       || !this.timesIndexed[idTeam][raceNr].penaltysum) {
-      return 0;
+      return null;
     }
     const penaltysum = this.timesIndexed[idTeam][raceNr].penaltysum;
     if (!penaltysum) {
-      return 0;
+      return null;
     }
     return penaltysum;
   }
 
   /**
-   * Get avg of best two in milliseconds.
+   * Get the best two racetimes (including penalties)
    * @param idTeam
    */
-  getAvgOfBestTwo(idTeam: number) {
+  getBestTwo(idTeam: number): number[] {
     if (!this.timesIndexed) {
       return null;
     }
@@ -110,7 +110,6 @@ export class PouleComponent implements OnInit {
     // each time is the total of a race
     const teamTimes = this.timesIndexed[idTeam];
 
-
     if (!teamTimes || teamTimes.length < 2) {
       return null;
     }
@@ -119,7 +118,9 @@ export class PouleComponent implements OnInit {
     for (let raceNr = 0; raceNr < this.maxRaces; raceNr++) {
       const raceTime = this.getRaceTime(raceNr, idTeam);
       if (raceTime) {
-        totalTimes.push(raceTime);
+        // ADD THE PENALTY HERE!
+        const items = raceTime + this.getPenaltySum(raceNr, idTeam) * 1000;
+        totalTimes.push(items);
       }
     }
 
@@ -136,7 +137,22 @@ export class PouleComponent implements OnInit {
     );
 
     // take the two lowest
-    return (totalTimes[0] + totalTimes[1]) / 2;
+    totalTimes.splice(2);
+    return totalTimes;
+  }
+
+  /**
+   * Get avg of best two in milliseconds.
+   * @param idTeam
+   */
+  getAvgOfBestTwo(idTeam: number) {
+    const bestTwo = this.getBestTwo(idTeam);
+    console.log(idTeam+'  '+bestTwo);
+    if (bestTwo && bestTwo.length === 2) {
+      return (bestTwo[0] + bestTwo[1]) / 2;
+    } else {
+      return null;
+    }
   }
 
   getRaceTime(raceNr: number, idTeam: number): number {