diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 550f7b6..02cf30c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
+import {MatDialog} from '@angular/material';
+import {ChampionshipselectordialogComponent} from './championshipselectordialog/championshipselectordialog.component';
 
 @Component({
   selector: 'app-root',
@@ -14,6 +16,8 @@ export class AppComponent implements OnInit {
   constructor(private route: ActivatedRoute) {
   }
 
+
+
   ngOnInit(): void {
     // listen to the path ... what's the championship we're at?
     this.route.paramMap.subscribe(val => {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index aa9e8b2..241fbe9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatButtonModule, MatCardModule, MatCheckboxModule} from '@angular/material';
+import {MatButtonModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatListModule} from '@angular/material';
 import {TopmenuComponent} from './topmenu/topmenu.component';
 import {ReclamespinnerComponent} from './reclamespinner/reclamespinner.component';
 import {PouleComponent} from './content/poule/poule.component';
@@ -11,6 +11,7 @@ import {TierComponent} from './content/tier/tier.component';
 import {HttpClientModule} from '@angular/common/http';
 import {AppRoutingModule} from './app-routing.module';
 import { ChampionshipComponent } from './championship/championship.component';
+import { ChampionshipselectordialogComponent } from './championshipselectordialog/championshipselectordialog.component';
 
 @NgModule({
   declarations: [
@@ -19,18 +20,25 @@ import { ChampionshipComponent } from './championship/championship.component';
     ReclamespinnerComponent,
     PouleComponent,
     TierComponent,
-    ChampionshipComponent
+    ChampionshipComponent,
+    ChampionshipselectordialogComponent
   ],
   imports: [
     BrowserModule,
+    MatDialogModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     MatButtonModule,
     MatCheckboxModule,
+    MatListModule,
     MatCardModule,
   ],
   providers: [],
+  entryComponents: [
+    ChampionshipselectordialogComponent
+  ],
+
   bootstrap: [AppComponent]
 })
 export class AppModule {
diff --git a/src/app/championshipselectordialog/championshipselectordialog.component.html b/src/app/championshipselectordialog/championshipselectordialog.component.html
new file mode 100644
index 0000000..9ef1999
--- /dev/null
+++ b/src/app/championshipselectordialog/championshipselectordialog.component.html
@@ -0,0 +1,3 @@
+<mat-list>
+  <mat-list-item *ngFor="let championship of championships()"> {{championship.name}} </mat-list-item>
+</mat-list>
diff --git a/src/app/championshipselectordialog/championshipselectordialog.component.scss b/src/app/championshipselectordialog/championshipselectordialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/championshipselectordialog/championshipselectordialog.component.spec.ts b/src/app/championshipselectordialog/championshipselectordialog.component.spec.ts
new file mode 100644
index 0000000..549c62a
--- /dev/null
+++ b/src/app/championshipselectordialog/championshipselectordialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChampionshipselectordialogComponent } from './championshipselectordialog.component';
+
+describe('ChampionshipselectordialogComponent', () => {
+  let component: ChampionshipselectordialogComponent;
+  let fixture: ComponentFixture<ChampionshipselectordialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChampionshipselectordialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChampionshipselectordialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/championshipselectordialog/championshipselectordialog.component.ts b/src/app/championshipselectordialog/championshipselectordialog.component.ts
new file mode 100644
index 0000000..660a9a2
--- /dev/null
+++ b/src/app/championshipselectordialog/championshipselectordialog.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import {MatDialogRef} from '@angular/material';
+import {ChampionshipService} from '../championship.service';
+
+@Component({
+  selector: 'app-championshipselectordialog',
+  templateUrl: './championshipselectordialog.component.html',
+  styleUrls: ['./championshipselectordialog.component.scss']
+})
+export class ChampionshipselectordialogComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<ChampionshipselectordialogComponent>,
+              private championshipService: ChampionshipService) { }
+
+  ngOnInit() {
+
+  }
+
+  championships() {
+    return this.championshipService.getChampionships();
+  }
+
+}
diff --git a/src/app/content/poule/poule.component.html b/src/app/content/poule/poule.component.html
index b93718e..18de236 100644
--- a/src/app/content/poule/poule.component.html
+++ b/src/app/content/poule/poule.component.html
@@ -13,8 +13,8 @@
       </tr>
       <tr *ngFor="let team of teams">
         <td>{{team.name}}</td>
-        <td *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">
-          {{getTime(x, team.idteam)}}
+        <td class="timetd" *ngFor="let y of ' '.repeat(maxRaces).split(''), let x = index">
+          <span class="time" *ngFor="let time of getTime(x, team.idteam)">{{time/1000}}s</span>
         </td>
         <td>Gem. beste 2</td>
       </tr>
diff --git a/src/app/content/poule/poule.component.scss b/src/app/content/poule/poule.component.scss
index e69de29..9f745cb 100644
--- a/src/app/content/poule/poule.component.scss
+++ b/src/app/content/poule/poule.component.scss
@@ -0,0 +1,5 @@
+.time {
+  background-color: aquamarine;
+  margin: 2px;
+}
+
diff --git a/src/app/content/poule/poule.component.ts b/src/app/content/poule/poule.component.ts
index 5562954..181fcdc 100644
--- a/src/app/content/poule/poule.component.ts
+++ b/src/app/content/poule/poule.component.ts
@@ -61,23 +61,21 @@ export class PouleComponent implements OnInit {
     });
   }
 
-  /**
-   * Get an array of laps:
-   * [{ lap: 1, time: xxxx}, {lap : 2, time: yyyy}]
-   */
-  getTimesForRace(raceNr: number, idTeam: number) {
-    // what is the 'raceNr'd idrace? first get the unique idraces, they're already sorted, then take the 'raceNr'd one.
-    // const anies = this.times.filter(t => t.idteam === idTeam);
-    // if (anies && anies.length >= raceNr) {
-    //   console.log('anies');
-    //   console.log(anies);
-    //   return anies[raceNr - 1];
-    // } else {
-    //   return [];
-    // }
+  getPenaltySum(lapNr: number, idTeam: number) {
+    if (!this.timesIndexed
+      || !this.timesIndexed[idTeam]
+      || !this.timesIndexed[idTeam][lapNr]
+      || !this.timesIndexed[idTeam][lapNr].penaltysum) {
+      return null;
+    }
+    const penaltysum = this.timesIndexed[idTeam][lapNr].penaltysum;
+    if (!penaltysum) {
+      return 0;
+    }
+    return penaltysum;
   }
 
-  getTime(lapNr: number, idTeam: number) {
+  getTime(lapNr: number, idTeam: number):number[] {
     // console.log('lapnr/idteam' + lapNr + '  ' + idTeam);
     // console.log(this.timesIndexed);
     // console.log(this.timesIndexed[idTeam][lapNr]);
diff --git a/src/app/topmenu/topmenu.component.html b/src/app/topmenu/topmenu.component.html
index ac91631..de0ae3f 100644
--- a/src/app/topmenu/topmenu.component.html
+++ b/src/app/topmenu/topmenu.component.html
@@ -1,6 +1,6 @@
 <div class="button-row">
   <!--pick a year-->
-  <button mat-raised-button>{{currentChampionship()}}</button>
+  <button mat-raised-button (click)="openDialog()">{{currentChampionship()}}</button>
   <button mat-raised-button color="primary" *ngFor="let tier of tiers" routerLink="/championship/20/tier/{{tier}}">Tier {{tier}}</button>
   <a mat-button routerLink=".">Link</a>
 </div>
diff --git a/src/app/topmenu/topmenu.component.ts b/src/app/topmenu/topmenu.component.ts
index b3cefc9..d36f4bc 100644
--- a/src/app/topmenu/topmenu.component.ts
+++ b/src/app/topmenu/topmenu.component.ts
@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {ChampionshipService} from '../championship.service';
 import {ActivatedRoute, Router} from '@angular/router';
+import {ChampionshipselectordialogComponent} from '../championshipselectordialog/championshipselectordialog.component';
+import {MatDialog} from '@angular/material';
 
 @Component({
   selector: 'app-topmenu',
@@ -14,7 +16,7 @@ export class TopmenuComponent implements OnInit {
 
   constructor(private championshipService: ChampionshipService,
               private route: ActivatedRoute,
-              private router: Router) {
+              private router: Router,public dialog: MatDialog) {
   }
 
   ngOnInit() {
@@ -32,4 +34,15 @@ export class TopmenuComponent implements OnInit {
     }
   }
 
+  openDialog(): void {
+    const dialogRef = this.dialog.open(ChampionshipselectordialogComponent, {
+      width: '500px',
+      data: {name: 'whatever'}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      console.log(result);
+    });
+  }
 }