diff --git a/src/app/content/poule/poule.component.html b/src/app/content/poule/poule.component.html
index c2d630a..7ab3971 100644
--- a/src/app/content/poule/poule.component.html
+++ b/src/app/content/poule/poule.component.html
@@ -1,25 +1,85 @@
-<div class="poule-card">
-  <div class="poule-title">
-    Poule {{poule}}
-  </div>
-  <table>
-    <tr>
-      <td>Team</td>
-      <ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">
-        <td>Race {{x+1}}</td>
+<!--<div class="poule-card">-->
+<!--<div class="poule-title">-->
+<!--Poule {{poule}}-->
+<!--</div>-->
+<!--<table>-->
+<!--&lt;!&ndash;headers &ndash;&gt;-->
+<!--<tr>-->
+<!--<td>Team</td>-->
+<!--<ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">-->
+<!--<td>Race {{x+1}}</td>-->
+<!--</ng-container>-->
+<!--<td>Gem. beste 2</td>-->
+<!--</tr>-->
+
+<!--<tr *ngFor="let team of teams">-->
+<!--<td>{{team.name}}</td>-->
+<!--&lt;!&ndash;cheap trick to iterate from 0 to maxraces&ndash;&gt;-->
+<!--<ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">-->
+<!--<td class="timetd">-->
+<!--<p class="time" *ngFor="let time of getLapTimes(x, team.idteam)">{{time/1000| number:'1.2-2'}}s</p>-->
+<!--<p class="penaltyrow">{{getPenaltySum(x, team.idteam)}}</p>-->
+<!--<p class="racetimetotal">{{getRaceTime(x, team.idteam)/1000 | number:'1.2-2'}}s</p>-->
+<!--</td>-->
+<!--</ng-container>-->
+<!--<td>{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}s</td>-->
+<!--</tr>-->
+<!--</table>-->
+<!--</div>-->
+<div class="poule-header">Poule {{poule}}</div>
+<div class="total-poule" style="display: grid">
+
+  <!--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>
+  </ng-container>
+  <div class="toplevelheader" [ngStyle]="{'grid-column': maxLaps+2, 'grid-row' : 1}">penalty</div>
+  <div class="toplevelheader" [ngStyle]="{'grid-column': maxLaps+3, 'grid-row' : 1}">total</div>
+  <div class="toplevelheader" [ngStyle]="{'grid-column': maxLaps+4, 'grid-row' : 1}">result</div>
+
+
+  <!--start looping over teams, make a block for each-->
+  <ng-container *ngFor="let team of teams; let teamindex = index">
+    <!--first multi row spanning cell: the team name -->
+    <div class="teamname"
+         [ngStyle]="{'grid-row':2+(teamindex*(maxRaces+1)), 'grid-column-start':2, 'grid-column-end': 2+maxRaces+1}">
+      {{team.name}}
+    </div>
+    <!--all the team contents: for each race a line -->
+    <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>
       </ng-container>
-      <td>Gem. beste 2</td>
-    </tr>
-    <tr *ngFor="let team of teams">
-      <td>{{team.name}}</td>
-      <ng-container *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">
-        <td class="timetd">
-          <p class="time" *ngFor="let time of getLapTimes(x, team.idteam)">{{time/1000| number:'1.2-2'}}s</p>
-          <p class="racetimetotal">{{getRaceTime(x, team.idteam)/1000 | number:'1.2-2'}}s</p>
-        </td>
-      </ng-container>
-      <td>{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}s</td>
-    </tr>
-  </table>
+
+      <!--add a race header-->
+      <div class="lapheader" [ngStyle]="{'grid-column':1, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
+        <span class="timecell">Race {{raceindex+1}}</span>
+      </div>
+
+      <!--do a penalty for this race/team combo-->
+      <div class="penaltycell" [ngStyle]="{'grid-column':maxLaps+2, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
+        <span class="timecell">{{getPenaltySum(raceindex, team.idteam)/1000 | number:'1.2-2'}}</span>
+      </div>
+      <div class="totalcell" [ngStyle]="{'grid-column':maxLaps+3, 'grid-row':2+(teamindex*(maxRaces+1))+raceindex+1}">
+        <span class="timecell">{{getRaceTime(raceindex, team.idteam)/1000 | number:'1.2-2'}}</span>
+      </div>
+
+
+    </ng-container>
+
+    <!--this only has to be added once for each team...-->
+    <div class="resultcell" [ngStyle]="{'grid-column':maxLaps+4,
+  'grid-row-start':2+(teamindex*(maxRaces+1))+1,
+  'grid-row-end': 2+(teamindex*(maxRaces+1))+1+maxRaces}">
+      <span class="timecell">{{getAvgOfBestTwo(team.idteam)/1000 | number:'1.2-2'}}</span>
+    </div>
+  </ng-container>
+
+
 </div>
 
diff --git a/src/app/content/poule/poule.component.scss b/src/app/content/poule/poule.component.scss
index 56c1758..a02cb14 100644
--- a/src/app/content/poule/poule.component.scss
+++ b/src/app/content/poule/poule.component.scss
@@ -1,28 +1,21 @@
-.time {
-  background-color: aquamarine;
-  margin: 2px;
-}
-
-.penaltycell {
-  transform: rotate(-90deg);
-}
-.penaltycell:after {
-  content: " s";
-  font-size: 80%;
-}
-
-.racetimetotal {
-  border-top: 1px solid black;
-  margin: 2px;
-}
-
-.poule-title {
+.poule-header {
   text-align: center;
-  border-bottom: darkgray 1px solid;
-  padding-bottom: 10px;
-  padding-top: 10px;
+  border-bottom: 1px solid darkgray;
+  margin-bottom: 10px;
+  margin-top: 10px;
 }
 
-.poule-card {
-  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+.teamname {
+  margin-top: 15px;
+  margin-bottom: 5px;
+  font-size: 120%;
+}
+
+.toplevelheader {
+  font-size: 80%;
+  font-style: italic;
+}
+
+.timecell {
+  font-family: monospace;
 }
diff --git a/src/app/content/poule/poule.component.ts b/src/app/content/poule/poule.component.ts
index 935ec09..eb6910e 100644
--- a/src/app/content/poule/poule.component.ts
+++ b/src/app/content/poule/poule.component.ts
@@ -21,6 +21,7 @@ export class PouleComponent implements OnInit, OnChanges {
   protected times: any[] = [];
   protected maxRaces = 0;
   private timesIndexed: {};
+  protected maxLaps = 0;
 
   constructor(private championshipService: ChampionshipService) {
   }
@@ -48,24 +49,28 @@ export class PouleComponent implements OnInit, OnChanges {
 
       // preprocess this array -> map idteam on the laptime array so we can index it using 0..n-1
       this.timesIndexed = {};
+      this.maxLaps = 0;
       this.times.forEach(t => {
         if (!this.timesIndexed[t.idteam]) {
           this.timesIndexed[t.idteam] = [];
         }
         this.timesIndexed[t.idteam].push({laptimesms: t.laptimesms, penaltysum: t.penaltysum});
+        if (t.laptimesms.length > this.maxLaps) {
+          this.maxLaps = t.laptimesms.length;
+        }
       });
 
     });
   }
 
-  getPenaltySum(lapNr: number, idTeam: number) {
+  getPenaltySum(raceNr: number, idTeam: number) {
     if (!this.timesIndexed
       || !this.timesIndexed[idTeam]
-      || !this.timesIndexed[idTeam][lapNr]
-      || !this.timesIndexed[idTeam][lapNr].penaltysum) {
-      return null;
+      || !this.timesIndexed[idTeam][raceNr]
+      || !this.timesIndexed[idTeam][raceNr].penaltysum) {
+      return 0;
     }
-    const penaltysum = this.timesIndexed[idTeam][lapNr].penaltysum;
+    const penaltysum = this.timesIndexed[idTeam][raceNr].penaltysum;
     if (!penaltysum) {
       return 0;
     }
@@ -132,6 +137,15 @@ export class PouleComponent implements OnInit, OnChanges {
     return this.timesIndexed[idTeam][raceNr].laptimesms;
   }
 
+  getLapTime(idTeam: number, raceNr: number, lapNr: number) {
+    const lapTime = this.getLapTimes(raceNr, idTeam);
+    if (lapTime) {
+      return lapTime[lapNr];
+    } else {
+      return null;
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     this.loadData();
   }
diff --git a/src/app/content/tier/tier.component.scss b/src/app/content/tier/tier.component.scss
index 6b4afd6..d4f0f18 100644
--- a/src/app/content/tier/tier.component.scss
+++ b/src/app/content/tier/tier.component.scss
@@ -2,6 +2,7 @@ app-poule {
   margin: 10px;
   grid-row: 1;
   min-width: 470px;
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
 }
 
 #poulecontainer {