diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts
index b7b9bb1..8311f4e 100644
--- a/static/src/app/statistic/stats.module.ts
+++ b/static/src/app/statistic/stats.module.ts
@@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/logs/war.service";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
-import {AccordionModule, CarouselModule} from "ngx-bootstrap";
+import {AccordionModule, TabsModule} from "ngx-bootstrap";
 import {CampaignService} from "../services/logs/campaign.service";
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 import {PlayerService} from "../services/logs/player.service";
@@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
-    AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {
diff --git a/static/src/app/statistic/war-detail/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css
index 8f1751d..8d41fb3 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.css
+++ b/static/src/app/statistic/war-detail/war-detail.component.css
@@ -1,5 +1,5 @@
 .vertical-spacer {
-  height: 100vh;
+  height: 205px;
   float: left;
   width: 4%;
 }
@@ -42,6 +42,27 @@
   color: blue;
 }
 
+/* ########### TABS ########### */
+
+:host /deep/ .nav-tabs {
+  padding-left: 35%!important;
+}
+
+:host /deep/ .nav-link {
+  background: #4b4b4b;
+  color: white;
+}
+
+:host /deep/ .nav-link:hover {
+  background: aliceblue;
+  color: #000;
+}
+
+:host /deep/ .nav-tabs>li.active>a{
+  background: #222222;
+  color: white;
+}
+
 /* ########### DATATABLE ########### */
 
 :host /deep/ .datatable-header {
diff --git a/static/src/app/statistic/war-detail/war-detail.component.html b/static/src/app/statistic/war-detail/war-detail.component.html
index 4443ad9..81b28d3 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.html
+++ b/static/src/app/statistic/war-detail/war-detail.component.html
@@ -1,6 +1,5 @@
 <div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
-  <div class=vertical-spacer>
-  </div>
+  <div class=vertical-spacer></div>
   <div style="overflow:hidden">
     <div style="width: 920px;min-height: 205px;">
       <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
@@ -51,38 +50,52 @@
         </form>
       </div>
     </div>
+  </div>
 
-    <ngx-datatable
-      [rows]="rows"
-      [sorts]="[{prop: 'kill', dir: 'desc'}]"
-      [reorderable]="reorderable"
-      [messages]="{emptyMessage: 'Loading...'}"
-      [headerHeight]="cellHeight"
-      [rowHeight]="cellHeight"
-      [cssClasses]='customClasses'
-      [selectionType]="'single'"
-      (select)="selectPlayerDetail($event)">
-      <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
-        <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+  <tabset>
+    <tab>
+      <template tabHeading>
+        <img src="../../../assets/scoreboard-btn.png"> Scoreboard
+      </template>
+      <div class=vertical-spacer></div>
+      <ngx-datatable
+        [rows]="rows"
+        [sorts]="[{prop: 'kill', dir: 'desc'}]"
+        [reorderable]="reorderable"
+        [messages]="{emptyMessage: 'Loading...'}"
+        [headerHeight]="cellHeight"
+        [rowHeight]="cellHeight"
+        [cssClasses]='customClasses'
+        [selectionType]="'single'"
+        (select)="selectPlayerDetail($event)">
+        <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
+          <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
         <span class="player-name"
               [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
           {{value}}
         </span>
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
-        <ng-template ngx-datatable-cell-template let-value="value">
-          {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
-      <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
-    </ngx-datatable>
-  </div>
+          </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
+          <ng-template ngx-datatable-cell-template let-value="value">
+            {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
+          </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
+        <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
+      </ngx-datatable>
+    </tab>
 
+    <tab (select)="loadFractionData()">
+      <template tabHeading>
+        <img src="../../../assets/fraction-btn.png"> Fraktionen
+      </template>
+      I've got an HTML heading, and a select callback. Pretty cool!
+    </tab>
+  </tabset>
 
 </div>
diff --git a/static/src/app/statistic/war-detail/war-detail.component.ts b/static/src/app/statistic/war-detail/war-detail.component.ts
index bd1df1d..46b83a6 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.ts
+++ b/static/src/app/statistic/war-detail/war-detail.component.ts
@@ -83,4 +83,8 @@ export class WarDetailComponent {
     }
   }
 
+  loadFractionData() {
+    console.log('load data from server')
+  }
+
 }