diff --git a/src/app/seconds.pipe.spec.ts b/src/app/seconds.pipe.spec.ts
new file mode 100644
index 0000000..aa60bb9
--- /dev/null
+++ b/src/app/seconds.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { SecondsPipe } from './seconds.pipe';
+
+describe('SecondsPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SecondsPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/seconds.pipe.ts b/src/app/seconds.pipe.ts
new file mode 100644
index 0000000..615c3b2
--- /dev/null
+++ b/src/app/seconds.pipe.ts
@@ -0,0 +1,16 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'seconds'
+})
+export class SecondsPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    if (value) {
+      return ((value / 1000) % 60).toFixed(2);
+    } else {
+      return null;
+    }
+  }
+
+}
diff --git a/src/app/timespan/timespan.component.html b/src/app/timespan/timespan.component.html
new file mode 100644
index 0000000..76ee8a7
--- /dev/null
+++ b/src/app/timespan/timespan.component.html
@@ -0,0 +1,2 @@
+<span *ngIf="prefix && theNumber">{{prefix}}</span><span class="number">{{theNumber}}</span><span class="unit" *ngIf="theNumber">{{theUnit}}</span>
+
diff --git a/src/app/timespan/timespan.component.scss b/src/app/timespan/timespan.component.scss
new file mode 100644
index 0000000..04aedb1
--- /dev/null
+++ b/src/app/timespan/timespan.component.scss
@@ -0,0 +1,7 @@
+
+.unit {
+  font-size: 60%;
+}
+span {
+  font-family: monospace;
+}
diff --git a/src/app/timespan/timespan.component.spec.ts b/src/app/timespan/timespan.component.spec.ts
new file mode 100644
index 0000000..88e418e
--- /dev/null
+++ b/src/app/timespan/timespan.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimespanComponent } from './timespan.component';
+
+describe('TimespanComponent', () => {
+  let component: TimespanComponent;
+  let fixture: ComponentFixture<TimespanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TimespanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TimespanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/timespan/timespan.component.ts b/src/app/timespan/timespan.component.ts
new file mode 100644
index 0000000..a3b1cfe
--- /dev/null
+++ b/src/app/timespan/timespan.component.ts
@@ -0,0 +1,25 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-timespan',
+  templateUrl: './timespan.component.html',
+  styleUrls: ['./timespan.component.scss']
+})
+export class TimespanComponent implements OnInit {
+
+  @Input()
+  prefix: string;
+
+  @Input()
+  theNumber: number;
+
+  @Input()
+  theUnit: string;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/topmenu.service.spec.ts b/src/app/topmenu.service.spec.ts
new file mode 100644
index 0000000..88dd971
--- /dev/null
+++ b/src/app/topmenu.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { TopmenuService } from './topmenu.service';
+
+describe('TopmenuService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TopmenuService]
+    });
+  });
+
+  it('should be created', inject([TopmenuService], (service: TopmenuService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/topmenu.service.ts b/src/app/topmenu.service.ts
new file mode 100644
index 0000000..870d8b8
--- /dev/null
+++ b/src/app/topmenu.service.ts
@@ -0,0 +1,39 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TopmenuService {
+
+  public poules$: BehaviorSubject<number[]> = new BehaviorSubject<number[]>([]);
+  public tier$: BehaviorSubject<number> = new BehaviorSubject<number>(null);
+  public poule$ = new BehaviorSubject<number>(null);
+  public championship$ = new BehaviorSubject<number>(null);
+
+  constructor() {
+  }
+
+  setPoules(poules: number[]) {
+    this.poules$.next(poules);
+  }
+
+  setTier(tier: number) {
+    console.log('setting tier...');
+    if (this.tier$.value !== tier) {
+      console.log('overriding tier now.');
+      this.tier$.next(tier);
+    }
+  }
+
+  setPoule(poule: number) {
+    if (this.poule$.value !== poule)
+      this.poule$.next(poule);
+  }
+
+  setChampionship(championship: number) {
+    if (this.championship$.value !== championship)
+      this.championship$.next(championship);
+  }
+
+}
diff --git a/src/globals.scss b/src/globals.scss
new file mode 100644
index 0000000..3a5d1e4
--- /dev/null
+++ b/src/globals.scss
@@ -0,0 +1 @@
+$reclameheight: 100px;