diff --git a/src/app/friday/components/aging-cards/aging-cards.component.html b/src/app/friday/components/aging-cards/aging-cards.component.html
new file mode 100644
index 0000000..a9be013
--- /dev/null
+++ b/src/app/friday/components/aging-cards/aging-cards.component.html
@@ -0,0 +1,6 @@
+<div class="pile">
+  Aging Cards:
+  <div class="cards">
+    {{ deck.length }}
+  </div>
+</div>
diff --git a/src/app/friday/components/aging-cards/aging-cards.component.sass b/src/app/friday/components/aging-cards/aging-cards.component.sass
new file mode 100644
index 0000000..b910f13
--- /dev/null
+++ b/src/app/friday/components/aging-cards/aging-cards.component.sass
@@ -0,0 +1,2 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
diff --git a/src/app/friday/components/aging-cards/aging-cards.component.spec.ts b/src/app/friday/components/aging-cards/aging-cards.component.spec.ts
new file mode 100644
index 0000000..5e5145b
--- /dev/null
+++ b/src/app/friday/components/aging-cards/aging-cards.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AgingCardsComponent } from './aging-cards.component';
+
+describe('AgingCardsComponent', () => {
+  let component: AgingCardsComponent;
+  let fixture: ComponentFixture<AgingCardsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AgingCardsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AgingCardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/aging-cards/aging-cards.component.ts b/src/app/friday/components/aging-cards/aging-cards.component.ts
new file mode 100644
index 0000000..758f851
--- /dev/null
+++ b/src/app/friday/components/aging-cards/aging-cards.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { BattleComboId } from '../../models/card.interfaces'
+
+@Component({
+  selector: 'app-fr-aging-cards',
+  styleUrls: ['./aging-cards.component.sass'],
+  templateUrl: './aging-cards.component.html',
+})
+export class AgingCardsComponent implements OnInit {
+  @Input() deck: BattleComboId[]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/components/battle/battle.component.html b/src/app/friday/components/battle/battle.component.html
new file mode 100644
index 0000000..f0f86ef
--- /dev/null
+++ b/src/app/friday/components/battle/battle.component.html
@@ -0,0 +1,13 @@
+Battle Area
+
+<p *ngIf="playedHazardId as id">
+  Played hazard:
+  <figure class="played-hazard card">
+    <img src="assets/images/battle-{{ hazardCardEntities[id].battleComboId }}.png">
+    <figcaption></figcaption>
+  </figure>
+</p>
+
+<!-- Battle Points: {{ battle?.battlePoints| json }} -->
+<!-- Free Battle Cards: {{ battle?.freeBattleCards | json }} -->
+<!-- Payed Battle Cards: {{ battle?.payedBattleCards | json }} -->
diff --git a/src/app/friday/components/battle/battle.component.sass b/src/app/friday/components/battle/battle.component.sass
new file mode 100644
index 0000000..9904785
--- /dev/null
+++ b/src/app/friday/components/battle/battle.component.sass
@@ -0,0 +1,6 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
+
+.played-hazard
+  img
+    transform: rotate(180deg)
diff --git a/src/app/friday/components/battle/battle.component.spec.ts b/src/app/friday/components/battle/battle.component.spec.ts
new file mode 100644
index 0000000..0d4d8e6
--- /dev/null
+++ b/src/app/friday/components/battle/battle.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BattleComponent } from './battle.component';
+
+describe('BattleComponent', () => {
+  let component: BattleComponent;
+  let fixture: ComponentFixture<BattleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BattleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BattleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/battle/battle.component.ts b/src/app/friday/components/battle/battle.component.ts
new file mode 100644
index 0000000..9fd342e
--- /dev/null
+++ b/src/app/friday/components/battle/battle.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { HazardCardId } from '../../models/card.interfaces'
+import { HazardCardEntities, HazardComboEntities, BattleComboEntities } from '../../store/reducers/cards.reducer'
+
+@Component({
+  selector: 'app-fr-battle',
+  styleUrls: ['./battle.component.sass'],
+  templateUrl: './battle.component.html',
+})
+export class BattleComponent implements OnInit {
+  @Input() playedHazardId: HazardCardId
+
+  @Input() hazardCardEntities: HazardCardEntities
+  // @Input() hazardComboEntities: HazardComboEntities
+  // @Input() battleComboEntities: BattleComboEntities
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/components/destroyed/destroyed.component.html b/src/app/friday/components/destroyed/destroyed.component.html
new file mode 100644
index 0000000..c6d0e8b
--- /dev/null
+++ b/src/app/friday/components/destroyed/destroyed.component.html
@@ -0,0 +1,6 @@
+<div class="pile">
+  Destroyed:
+  <div class="cards">
+    {{ ids.length }}
+  </div>
+</div>
diff --git a/src/app/friday/components/destroyed/destroyed.component.sass b/src/app/friday/components/destroyed/destroyed.component.sass
new file mode 100644
index 0000000..b910f13
--- /dev/null
+++ b/src/app/friday/components/destroyed/destroyed.component.sass
@@ -0,0 +1,2 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
diff --git a/src/app/friday/components/destroyed/destroyed.component.spec.ts b/src/app/friday/components/destroyed/destroyed.component.spec.ts
new file mode 100644
index 0000000..53fa8d8
--- /dev/null
+++ b/src/app/friday/components/destroyed/destroyed.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DestroyedComponent } from './destroyed.component';
+
+describe('DestroyedComponent', () => {
+  let component: DestroyedComponent;
+  let fixture: ComponentFixture<DestroyedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DestroyedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DestroyedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/destroyed/destroyed.component.ts b/src/app/friday/components/destroyed/destroyed.component.ts
new file mode 100644
index 0000000..6715de9
--- /dev/null
+++ b/src/app/friday/components/destroyed/destroyed.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { BattleComboId } from '../../models/card.interfaces'
+
+@Component({
+  selector: 'app-fr-destroyed',
+  styleUrls: ['./destroyed.component.sass'],
+  templateUrl: './destroyed.component.html',
+})
+export class DestroyedComponent implements OnInit {
+  @Input() ids: BattleComboId[]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/components/hazard-cards/hazard-cards.component.html b/src/app/friday/components/hazard-cards/hazard-cards.component.html
new file mode 100644
index 0000000..792ee54
--- /dev/null
+++ b/src/app/friday/components/hazard-cards/hazard-cards.component.html
@@ -0,0 +1,40 @@
+<h1 class="title">Hazard Cards</h1>
+
+<div class="pile">
+  <div class="cards">
+    <figure class="deck card">
+      <img *ngIf="deck.length" src="assets/images/battle-back.png">
+      <figcaption>
+        deck: {{ deck.length }}
+      </figcaption>
+    </figure>
+  </div>
+
+  <button (click)="drawHazardCards.emit()" class="button">
+    draw
+  </button>
+</div>
+
+<div class="pile">
+  <div class="cards">
+    <figure *ngIf="discarded[0] as id" class="discarded card">
+      <img src="assets/images/battle-{{ entities[id].battleComboId }}.png">
+      <figcaption>
+        discarded: {{ discarded.length }}
+      </figcaption>
+    </figure>
+  </div>
+</div>
+
+<div *ngIf="optionIds.length" class="options">
+  Choose a hazard:
+  <figure *ngFor="let id of optionIds" class="option card">
+    <img src="assets/images/battle-{{ entities[id].battleComboId }}.png">
+    <figcaption>
+      {{ entities[id] | json }}
+      <button (click)="playHazardCard.emit(id)" class="button">
+        play this hazard
+      </button>
+    </figcaption>
+  </figure>
+</div>
diff --git a/src/app/friday/components/hazard-cards/hazard-cards.component.sass b/src/app/friday/components/hazard-cards/hazard-cards.component.sass
new file mode 100644
index 0000000..ac4bf99
--- /dev/null
+++ b/src/app/friday/components/hazard-cards/hazard-cards.component.sass
@@ -0,0 +1,23 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
+
+\:host
+  display: flex
+  flex-wrap: wrap
+
+.title
+  flex-basis: 100%
+
+.pile
+  width: 45%
+
+.card img
+  transform: rotate(180deg)
+
+.options
+  flex-basis: 100%
+  display: flex
+
+.discarded
+  img
+    filter: grayscale(70%) brightness(70%)
diff --git a/src/app/friday/components/hazard-cards/hazard-cards.component.spec.ts b/src/app/friday/components/hazard-cards/hazard-cards.component.spec.ts
new file mode 100644
index 0000000..fe5804b
--- /dev/null
+++ b/src/app/friday/components/hazard-cards/hazard-cards.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HazardCardsComponent } from './hazard-cards.component';
+
+describe('HazardCardsComponent', () => {
+  let component: HazardCardsComponent;
+  let fixture: ComponentFixture<HazardCardsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HazardCardsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HazardCardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/hazard-cards/hazard-cards.component.ts b/src/app/friday/components/hazard-cards/hazard-cards.component.ts
new file mode 100644
index 0000000..a94ea26
--- /dev/null
+++ b/src/app/friday/components/hazard-cards/hazard-cards.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { HazardCardId } from '../../models/card.interfaces'
+import { HazardCardEntities } from '../../store/reducers/cards.reducer'
+
+@Component({
+  selector: 'app-fr-hazard-cards',
+  styleUrls: ['./hazard-cards.component.sass'],
+  templateUrl: './hazard-cards.component.html',
+})
+export class HazardCardsComponent implements OnInit {
+  @Input() deck: HazardCardId[]
+  @Input() discarded: HazardCardId[]
+  @Input() entities: HazardCardEntities[]
+  @Input() optionIds: HazardCardId[]
+
+  @Output() drawHazardCards = new EventEmitter()
+  @Output() playHazardCard = new EventEmitter<HazardCardId>()
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/components/header/header.component.html b/src/app/friday/components/header/header.component.html
new file mode 100644
index 0000000..f4da1c8
--- /dev/null
+++ b/src/app/friday/components/header/header.component.html
@@ -0,0 +1,14 @@
+<header class="header">
+  <h1 class="title">Friday Game {{ activeGameId }} - round {{ currentRound }} - difficulty {{ difficulty }}</h1>
+
+  <span *ngIf="loading" class="loader">Loading...</span>
+
+  <ng-container *ngIf="!(loading || playing)" class="buttons">
+    <button *ngIf="!currentRound" (click)="start.emit(activeGameId)" class="button">Start game #{{ activeGameId }}</button>
+    <button *ngIf="currentRound" (click)="continue.emit(activeGameId)" class="button">Continue game #{{ activeGameId }}</button>
+  </ng-container>
+
+  <a routerLink="/friday" class="link">Exit and save</a>
+</header>
+
+<pre class="dev">available actions: {{ availableActions | json }}</pre>
diff --git a/src/app/friday/components/header/header.component.sass b/src/app/friday/components/header/header.component.sass
new file mode 100644
index 0000000..2f1940b
--- /dev/null
+++ b/src/app/friday/components/header/header.component.sass
@@ -0,0 +1,14 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
+
+.header
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-bottom: $spacing-lg
+  padding-bottom: $spacing-default
+  border-bottom: $border-light
+
+.title
+  margin: 0
+
diff --git a/src/app/friday/components/header/header.component.spec.ts b/src/app/friday/components/header/header.component.spec.ts
new file mode 100644
index 0000000..2d0479d
--- /dev/null
+++ b/src/app/friday/components/header/header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/header/header.component.ts b/src/app/friday/components/header/header.component.ts
new file mode 100644
index 0000000..fe59c39
--- /dev/null
+++ b/src/app/friday/components/header/header.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { GameId, GameRound, GameDifficulty } from '../../models/game.interfaces'
+
+@Component({
+  selector: 'app-fr-header',
+  styleUrls: ['./header.component.sass'],
+  templateUrl: './header.component.html',
+})
+export class HeaderComponent implements OnInit {
+  @Input() activeGameId: GameId
+  @Input() currentRound: GameRound
+  @Input() difficulty: GameDifficulty
+
+  @Input() loading: boolean
+  @Input() playing: boolean
+
+  // temp for dev
+  @Input() availableActions: string[]
+
+  @Output() continue = new EventEmitter<GameId>()
+  @Output() start = new EventEmitter<GameId>()
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/app/friday/components/index.ts b/src/app/friday/components/index.ts
index f21c4d4..dbedf7b 100644
--- a/src/app/friday/components/index.ts
+++ b/src/app/friday/components/index.ts
@@ -1,7 +1,34 @@
+import { AgingCardsComponent } from './aging-cards/aging-cards.component'
+import { BattleComponent } from './battle/battle.component'
+import { DestroyedComponent } from './destroyed/destroyed.component'
 import { FridayComponent } from './friday/friday.component'
+import { HazardCardsComponent } from './hazard-cards/hazard-cards.component'
+import { HeaderComponent } from './header/header.component'
+import { LivesComponent } from './lives/lives.component'
+import { PiratesComponent } from './pirates/pirates.component'
+import { RobinsonCardsComponent } from './robinson-cards/robinson-cards.component'
+import { RoundComponent } from './round/round.component'
 
 export const components: any[] = [
+  AgingCardsComponent,
+  BattleComponent,
+  DestroyedComponent,
   FridayComponent,
+  HazardCardsComponent,
+  HeaderComponent,
+  LivesComponent,
+  PiratesComponent,
+  RobinsonCardsComponent,
+  RoundComponent,
 ]
 
+export * from './aging-cards/aging-cards.component'
+export * from './battle/battle.component'
+export * from './destroyed/destroyed.component'
 export * from './friday/friday.component'
+export * from './hazard-cards/hazard-cards.component'
+export * from './header/header.component'
+export * from './lives/lives.component'
+export * from './pirates/pirates.component'
+export * from './robinson-cards/robinson-cards.component'
+export * from './round/round.component'
diff --git a/src/app/friday/components/lives/lives.component.html b/src/app/friday/components/lives/lives.component.html
new file mode 100644
index 0000000..2a67968
--- /dev/null
+++ b/src/app/friday/components/lives/lives.component.html
@@ -0,0 +1,3 @@
+Lives: {{ lives }}
+<br>
+in stock: {{ maxLives - lives }}
diff --git a/src/app/friday/components/lives/lives.component.sass b/src/app/friday/components/lives/lives.component.sass
new file mode 100644
index 0000000..b910f13
--- /dev/null
+++ b/src/app/friday/components/lives/lives.component.sass
@@ -0,0 +1,2 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
diff --git a/src/app/friday/components/lives/lives.component.spec.ts b/src/app/friday/components/lives/lives.component.spec.ts
new file mode 100644
index 0000000..b423492
--- /dev/null
+++ b/src/app/friday/components/lives/lives.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LivesComponent } from './lives.component';
+
+describe('LivesComponent', () => {
+  let component: LivesComponent;
+  let fixture: ComponentFixture<LivesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LivesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LivesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/lives/lives.component.ts b/src/app/friday/components/lives/lives.component.ts
new file mode 100644
index 0000000..469aeb9
--- /dev/null
+++ b/src/app/friday/components/lives/lives.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core'
+
+@Component({
+  selector: 'app-fr-lives',
+  styleUrls: ['./lives.component.sass'],
+  templateUrl: './lives.component.html',
+})
+export class LivesComponent implements OnInit {
+  @Input() lives: number
+  @Input() maxLives: number
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/components/pirates/pirates.component.html b/src/app/friday/components/pirates/pirates.component.html
new file mode 100644
index 0000000..d1a864d
--- /dev/null
+++ b/src/app/friday/components/pirates/pirates.component.html
@@ -0,0 +1,6 @@
+<figure *ngFor="let id of pirateIds" class="pirate card">
+  <img src="assets/images/pirate-{{id}}.png">
+  <figcaption class="hide">
+    {{ id }}
+  </figcaption>
+</figure>
diff --git a/src/app/friday/components/pirates/pirates.component.sass b/src/app/friday/components/pirates/pirates.component.sass
new file mode 100644
index 0000000..4d38e6a
--- /dev/null
+++ b/src/app/friday/components/pirates/pirates.component.sass
@@ -0,0 +1,12 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
+
+\:host
+  display: flex
+
+.pirate
+  img
+    display: block
+
+  + .pirate
+    margin-left: $spacing-sm
diff --git a/src/app/friday/components/pirates/pirates.component.spec.ts b/src/app/friday/components/pirates/pirates.component.spec.ts
new file mode 100644
index 0000000..9e49b32
--- /dev/null
+++ b/src/app/friday/components/pirates/pirates.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PiratesComponent } from './pirates.component';
+
+describe('PiratesComponent', () => {
+  let component: PiratesComponent;
+  let fixture: ComponentFixture<PiratesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PiratesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PiratesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/pirates/pirates.component.ts b/src/app/friday/components/pirates/pirates.component.ts
new file mode 100644
index 0000000..3973493
--- /dev/null
+++ b/src/app/friday/components/pirates/pirates.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { PirateCardId } from '../../models/card.interfaces'
+
+@Component({
+  selector: 'app-fr-pirates',
+  styleUrls: ['./pirates.component.sass'],
+  templateUrl: './pirates.component.html',
+})
+export class PiratesComponent implements OnInit {
+  @Input() pirateIds: PirateCardId[]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/components/robinson-cards/robinson-cards.component.html b/src/app/friday/components/robinson-cards/robinson-cards.component.html
new file mode 100644
index 0000000..1b475dc
--- /dev/null
+++ b/src/app/friday/components/robinson-cards/robinson-cards.component.html
@@ -0,0 +1,13 @@
+<div class="pile">
+  Robinson Cards:
+  <div class="cards">
+    {{ deck.length }}
+  </div>
+</div>
+
+<div class="pile">
+  Discarded:
+  <div class="cards">
+    {{ discarded.length }}
+  </div>
+</div>
diff --git a/src/app/friday/components/robinson-cards/robinson-cards.component.sass b/src/app/friday/components/robinson-cards/robinson-cards.component.sass
new file mode 100644
index 0000000..b910f13
--- /dev/null
+++ b/src/app/friday/components/robinson-cards/robinson-cards.component.sass
@@ -0,0 +1,2 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
diff --git a/src/app/friday/components/robinson-cards/robinson-cards.component.spec.ts b/src/app/friday/components/robinson-cards/robinson-cards.component.spec.ts
new file mode 100644
index 0000000..7401967
--- /dev/null
+++ b/src/app/friday/components/robinson-cards/robinson-cards.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RobinsonCardsComponent } from './robinson-cards.component';
+
+describe('RobinsonCardsComponent', () => {
+  let component: RobinsonCardsComponent;
+  let fixture: ComponentFixture<RobinsonCardsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RobinsonCardsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RobinsonCardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/robinson-cards/robinson-cards.component.ts b/src/app/friday/components/robinson-cards/robinson-cards.component.ts
new file mode 100644
index 0000000..3df8487
--- /dev/null
+++ b/src/app/friday/components/robinson-cards/robinson-cards.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { BattleComboId } from '../../models/card.interfaces'
+
+@Component({
+  selector: 'app-fr-robinson-cards',
+  styleUrls: ['./robinson-cards.component.sass'],
+  templateUrl: './robinson-cards.component.html',
+})
+export class RobinsonCardsComponent implements OnInit {
+  @Input() deck: BattleComboId[]
+  @Input() discarded: BattleComboId[]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/components/round/round.component.html b/src/app/friday/components/round/round.component.html
new file mode 100644
index 0000000..8233075
--- /dev/null
+++ b/src/app/friday/components/round/round.component.html
@@ -0,0 +1 @@
+Round: {{ currentRound }}
diff --git a/src/app/friday/components/round/round.component.sass b/src/app/friday/components/round/round.component.sass
new file mode 100644
index 0000000..b910f13
--- /dev/null
+++ b/src/app/friday/components/round/round.component.sass
@@ -0,0 +1,2 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
diff --git a/src/app/friday/components/round/round.component.spec.ts b/src/app/friday/components/round/round.component.spec.ts
new file mode 100644
index 0000000..242cb2a
--- /dev/null
+++ b/src/app/friday/components/round/round.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoundComponent } from './round.component';
+
+describe('RoundComponent', () => {
+  let component: RoundComponent;
+  let fixture: ComponentFixture<RoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friday/components/round/round.component.ts b/src/app/friday/components/round/round.component.ts
new file mode 100644
index 0000000..8bc82c2
--- /dev/null
+++ b/src/app/friday/components/round/round.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { GameRound } from '../../models/game.interfaces'
+
+@Component({
+  selector: 'app-fr-round',
+  styleUrls: ['./round.component.sass'],
+  templateUrl: './round.component.html',
+})
+export class RoundComponent implements OnInit {
+  @Input() currentRound: GameRound
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/friday/containers/active-game/active-game.component.html b/src/app/friday/containers/active-game/active-game.component.html
index 45f4cad..7fbd758 100644
--- a/src/app/friday/containers/active-game/active-game.component.html
+++ b/src/app/friday/containers/active-game/active-game.component.html
@@ -1,131 +1,59 @@
 <section class="container active-game">
-  <header class="header">
-    <h1 class="title">Friday Game {{ activeGameId }} - round {{ currentRound$ | async }} - difficulty {{ difficulty }}</h1>
-
-    <span *ngIf="loading$ | async" class="loader">Loading...</span>
-
-    <ng-container *ngIf="!loading && !playing" class="buttons">
-      <button *ngIf="!currentRound$ | async" (click)="start()" class="button">Start game #{{ activeGameId }}</button>
-      <button *ngIf="currentRound$ | async" (click)="continue()" class="button">Continue game #{{ activeGameId }}</button>
-    </ng-container>
-
-    <a routerLink="/friday" class="link">Exit and save</a>
-  </header>
-
-  <pre class="dev">
-    available actions: {{ availableActions | json }}
-  </pre>
+  <app-fr-header
+    (continue)="continue()"
+    (start)="start()"
+    [activeGameId]="activeGameId"
+    [availableActions]="availableActions"
+    [currentRound]="currentRound$ | async"
+    [difficulty]="difficulty"
+    [loading]="loading$ | async"
+    [playing]="playing$ | async"
+  ></app-fr-header>
 
   <section *ngIf="playing$ | async" class="table">
     <section class="game-section round">
-      Round: {{ currentRound$ | async }}
+      <app-fr-round [currentRound]="currentRound$ | async"></app-fr-round>
     </section>
 
     <section class="game-section lives">
-      Lives: {{ lives$ | async }}
+      <app-fr-lives [lives]="lives$ | async" [maxLives]="maxLives$ | async"></app-fr-lives>
     </section>
 
     <section class="game-section destroyed">
-      <div class="pile">
-        Destroyed:
-        <div class="cards">
-          {{ (destroyed$ | async).length }}
-        </div>
-      </div>
+      <app-fr-destroyed [ids]="destroyedCardIds$ | async"></app-fr-destroyed>
     </section>
 
     <section class="game-section hazard">
-      <div class="pile">
-        Hazard Cards:
-        <div class="cards">
-          {{ (hazards$ | async).length }}
-        </div>
-
-        <button (click)="drawHazardCards()" class="button">
-          Draw hazard cards
-        </button>
-      </div>
-
-      <div class="pile">
-        Discarded:
-        <div class="cards">
-          {{ (hazardsDiscarded$ | async).length }}
-        </div>
-      </div>
+      <app-fr-hazard-cards
+        (drawHazardCards)="drawHazardCards()"
+        (playHazardCard)="playHazardCard($event)"
+        [deck]="hazardCardDeck$ | async"
+        [discarded]="hazardDiscardPile$ | async"
+        [entities]="hazardCardEntities$ | async"
+        [optionIds]="hazardOptions$ | async"
+      ></app-fr-hazard-cards>
     </section>
 
     <section class="game-section robinson">
-      <div class="pile">
-        Robinson Cards:
-        <div class="cards">
-          {{ (robinsons$ | async).length }}
-        </div>
-      </div>
-
-      <div class="pile">
-        Discarded:
-        <div class="cards">
-          {{ (robinsonsDiscarded$ | async).length }}
-        </div>
-      </div>
+      <app-fr-robinson-cards
+        [deck]="robinsoncardDeck$ | async"
+        [discarded]="robinsonsDiscardPile$ | async"
+      ></app-fr-robinson-cards>
     </section>
 
     <section class="game-section aging">
-      <div class="pile">
-        Aging Cards:
-        <div class="cards">
-          {{ (agings$ | async).length }}
-        </div>
-      </div>
+      <app-fr-aging-cards [deck]="agingCardDeck$ | async"></app-fr-aging-cards>
     </section>
 
     <section class="game-section pirates">
-      <ng-container *ngIf="(pirates$ | async) as pirateIds">
-        <figure *ngFor="let id of pirateIds" class="pirate">
-          <img src="assets/images/pirate-{{id}}.png">
-          <figcaption class="hide">
-            {{ id }}
-          </figcaption>
-        </figure>
-      </ng-container>
+      <app-fr-pirates [pirateIds]="pirateCardIds$ | async"></app-fr-pirates>
     </section>
 
     <section class="game-section battle">
-      Battle Area
-
-      <ng-container *ngIf="(hazardEntities$ | async) as entities">
-        <div *ngIf="(hazardOptions$ | async) as cardIds" class="hazard-options">
-          Choose a hazard:
-          <figure *ngFor="let id of cardIds" class="hazard-option">
-            <img src="assets/images/battle-{{ entities[id].battleComboId }}.png">
-            <figcaption>
-              {{ entities[id] | json }}
-              <button (click)="playHazardCard(id)" class="button">
-                Play this hazard
-              </button>
-            </figcaption>
-          </figure>
-        </div>
-
-        <p *ngIf="playedHazard$ | async as cardId">
-          Played hazard: {{ playedHazard$ | async | json }}
-          <figure class="played-hazard">
-            <img src="assets/images/battle-{{ entities[cardId].battleComboId }}.png">
-            <figcaption>
-              {{ entities[cardId] | json }}
-            </figcaption>
-          </figure>
-        </p>
-      </ng-container>
-      <p>
-        <!-- Battle Points: {{ battle?.battlePoints| json }} -->
-      </p>
-      <p>
-        <!-- Free Battle Cards: {{ battle?.freeBattleCards | json }} -->
-      </p>
-      <p>
-        <!-- Payed Battle Cards: {{ battle?.payedBattleCards | json }} -->
-      </p>
+      <app-fr-battle
+        [hazardCardEntities]="hazardCardEntities$ | async"
+        [playedHazardId]="playedHazardCardId$ | async"
+      ></app-fr-battle>
     </section>
   </section>
 </section>
diff --git a/src/app/friday/containers/active-game/active-game.component.sass b/src/app/friday/containers/active-game/active-game.component.sass
index dd66904..f3ca4b1 100644
--- a/src/app/friday/containers/active-game/active-game.component.sass
+++ b/src/app/friday/containers/active-game/active-game.component.sass
@@ -1,17 +1,6 @@
 @import '~styles/variables'
 @import '~styles/mixins/__index'
 
-.header
-  display: flex
-  justify-content: space-between
-  align-items: center
-  margin-bottom: $spacing-lg
-  padding-bottom: $spacing-default
-  border-bottom: $border-light
-
-.title
-  margin: 0
-
 .table
   display: grid
   height: 80vh
@@ -21,7 +10,6 @@
   grid-template-areas: "round pirates pirates lives" "hazard main main robinson" "destroyed main main aging"
 
 .game-section
-  display: flex
   padding: $spacing-sm
   background: lighten($green, 60%)
 
@@ -51,32 +39,3 @@
   &.battle
     grid-area: main
     background: lighten($red, 40%)
-
-.hazard-options
-  display: flex
-
-  img
-    transform: rotate(180deg)
-
-.pile
-  margin: 0 $spacing-sm $spacing-sm 0
-
-.cards
-  display: block
-  width: 100%
-  padding: $spacing-sm 0
-  text-align: center
-  border: 1px solid $gray-darker-1
-
-button.cards
-  cursor: pointer
-  &:hover,
-  &:focus
-    background: rgba($white, 0.4)
-
-.pirate
-  img
-    display: block
-
-  + .pirate
-    margin-left: $spacing-sm
diff --git a/src/app/friday/containers/active-game/active-game.component.ts b/src/app/friday/containers/active-game/active-game.component.ts
index efa8517..962bc5c 100644
--- a/src/app/friday/containers/active-game/active-game.component.ts
+++ b/src/app/friday/containers/active-game/active-game.component.ts
@@ -25,26 +25,26 @@ export class ActiveGameComponent implements OnInit, OnDestroy {
   lives$ = this.store.pipe(select(fromStore.getActiveGameLives))
   maxLives$ = this.store.pipe(select(fromStore.getActiveGameMaxLives))
 
-  hazardEntities$ = this.store.pipe(select(fromStore.getHazardCardEntities))
-  agingEntities$ = this.store.pipe(select(fromStore.getAgingCardEntities))
-  robinsonEntities$ = this.store.pipe(select(fromStore.getRobinsonCardEntities))
-  pirateEntities$ = this.store.pipe(select(fromStore.getPirateCardEntities))
+  hazardCardEntities$ = this.store.pipe(select(fromStore.getHazardCardEntities))
+  agingCardEntities$ = this.store.pipe(select(fromStore.getAgingCardEntities))
+  robinsonCardEntities$ = this.store.pipe(select(fromStore.getRobinsonCardEntities))
+  pirateCardEntities$ = this.store.pipe(select(fromStore.getPirateCardEntities))
 
   hazardComboEntities$ = this.store.pipe(select(fromStore.getHazardComboEntities))
   battleComboEntities$ = this.store.pipe(select(fromStore.getBattleComboEntities))
 
-  destroyed$ = this.store.pipe(select(fromStore.getDestroyedCardIds))
-  agings$ = this.store.pipe(select(fromStore.getAgingCardDeck))
-  robinsons$ = this.store.pipe(select(fromStore.getRobinsonCardDeck))
-  robinsonsDiscarded$ = this.store.pipe(select(fromStore.getRobinsonDiscardPile))
+  destroyedCardIds$ = this.store.pipe(select(fromStore.getDestroyedCardIds))
+  agingCardDeck$ = this.store.pipe(select(fromStore.getAgingCardDeck))
+  robinsoncardDeck$ = this.store.pipe(select(fromStore.getRobinsonCardDeck))
+  robinsonsDiscardPile$ = this.store.pipe(select(fromStore.getRobinsonDiscardPile))
 
   hazardOptions$ = this.store.pipe(select(fromStore.getHazardCardOptions))
-  hazards$ = this.store.pipe(select(fromStore.getHazardCardDeck))
-  hazardsDiscarded$ = this.store.pipe(select(fromStore.getHazardDiscardPile))
+  hazardCardDeck$ = this.store.pipe(select(fromStore.getHazardCardDeck))
+  hazardDiscardPile$ = this.store.pipe(select(fromStore.getHazardDiscardPile))
 
-  pirates$ = this.store.pipe(select(fromStore.getPirateCardIds))
+  pirateCardIds$ = this.store.pipe(select(fromStore.getPirateCardIds))
 
-  playedHazard$ = this.store.pipe(select(fromStore.getPlayedHazardCardId))
+  playedHazardCardId$ = this.store.pipe(select(fromStore.getPlayedHazardCardId))
 
   availableActions: string[] = []
 
diff --git a/src/app/friday/store/reducers/cards.reducer.ts b/src/app/friday/store/reducers/cards.reducer.ts
index ace0c55..a979eea 100644
--- a/src/app/friday/store/reducers/cards.reducer.ts
+++ b/src/app/friday/store/reducers/cards.reducer.ts
@@ -11,23 +11,23 @@ import * as fromActions from '../actions'
 import { createEntities, createIdsArray } from '../../helpers/reducer.helper'
 
 
-interface BattleComboEntities  {
+export interface BattleComboEntities  {
   [id: number]: BattleCombo
 }
-interface HazardComboEntities  {
+export interface HazardComboEntities  {
   [id: number]: HazardCombo
 }
 
-interface AgingCardEntities  {
+export interface AgingCardEntities  {
   [id: number]: AgingCardRemote
 }
-interface HazardCardEntities  {
+export interface HazardCardEntities  {
   [id: number]: HazardCardRemote
 }
-interface PirateCardEntities  {
+export interface PirateCardEntities  {
   [id: number]: PirateCardRemote
 }
-interface RobinsonCardEntities  {
+export interface RobinsonCardEntities  {
   [id: number]: RobinsonCardRemote
 }
 
diff --git a/src/assets/images/battle-back.png b/src/assets/images/battle-back.png
index 818ec3f..9ef94ee 100644
Binary files a/src/assets/images/battle-back.png and b/src/assets/images/battle-back.png differ
diff --git a/src/styles/global.sass b/src/styles/global.sass
index 5d33e85..36ea994 100644
--- a/src/styles/global.sass
+++ b/src/styles/global.sass
@@ -7,3 +7,4 @@
 @import 'layout'
 @import 'buttons'
 
+@import 'modules/__index'
diff --git a/src/styles/modules/__index.sass b/src/styles/modules/__index.sass
new file mode 100644
index 0000000..2e8177b
--- /dev/null
+++ b/src/styles/modules/__index.sass
@@ -0,0 +1 @@
+@import 'friday'
diff --git a/src/styles/modules/_friday.sass b/src/styles/modules/_friday.sass
new file mode 100644
index 0000000..120e2ca
--- /dev/null
+++ b/src/styles/modules/_friday.sass
@@ -0,0 +1,13 @@
+app-fr-friday
+  .pile
+    margin: 0 $spacing-sm $spacing-sm 0
+
+  .card
+    max-width: 180px
+
+  .cards
+    display: block
+    width: 100%
+    padding: $spacing-sm 0
+    text-align: center
+    border: 1px solid $gray-darker-1