diff --git a/angular.json b/angular.json
index ebfb2147d1461149b2b6a3d8a952a406b2855f7c..0563f949cb2fc171f943d5e06b75a22c951365c8 100644
--- a/angular.json
+++ b/angular.json
@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
diff --git a/package.json b/package.json
index be8a3bb6ee0b327a6202b6fa49998c6be22f691f..41488513e786ce654d2392c0da7322cdc4fe53d7 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,23 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint && npm run prettier-check",
+    "prettier-check": "prettier --check \"projects/**/*.ts\"",
+    "prettier-fix": "prettier --write \"./projects/**/*.ts\"",
+    "ci-test": "ng test --browsers ChromeHeadless --watch=false",
+    "build-example-app": "ng build kypo-player-selection-example-app --configuration production",
+    "build-library": "ng build kypo-player-selection --configuration production",
+    "create-package": "cd dist/kypo-player-selection && npm pack",
+    "build-and-pack": "npm install && npm run build-library && npm run create-package",
+    "ci-update-version": "cd ./projects/kypo-player-selection/ && npm version $TAG_VERSION",
+    "ci-build-and-pack": "npm ci --cache .npm --prefer-offline && npm run build-library && npm run create-package",
+    "ci-publish-package": "cd dist/kypo-player-selection && npm publish"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run prettier-check"
+    }
   },
   "private": true,
   "dependencies": {
diff --git a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html
index 690523101d37b02d5e3b710cbf204b36534f736b..05d7fc1634b891ec689597b004a34f6854304e70 100644
--- a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html
+++ b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.html
@@ -1,3 +1,7 @@
 <mat-card>
-    <kypo-player-selection [playerData]="mock" (playerDataChange)="onPlayerDataChange($event)"></kypo-player-selection>
-</mat-card>
\ No newline at end of file
+  <kypo-player-selection
+    [playerData]="mock"
+    (playerSelectionChange)="onPlayerSelectionChange($event)"
+    (hoveredPlayerChange)="onPlayerHoverChange($event)"
+  ></kypo-player-selection>
+</mat-card>
diff --git a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts
index ced4aead5c6801747e7fd134ef07993cd28fd052..c28f20e43f865aeaae83666c4061a4445631784c 100644
--- a/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts
+++ b/projects/kypo-player-selection-example-app/src/app/player-selection/player-selection.component.ts
@@ -12,12 +12,12 @@ export class PlayerSelectionComponent implements OnInit {
 
   ngOnInit(): void {}
 
-  onPlayerDataChange(playerSelections: PlayerData[]) {
-    console.log(playerSelections);
+  onPlayerSelectionChange(selectedPlayersIds: number[]) {
+    console.log(selectedPlayersIds);
   }
 
-  onPlayerHoverChange(playerData: PlayerData) {
-    console.log(playerData);
+  onPlayerHoverChange(playerId: number) {
+    console.log(playerId);
   }
 
   players = [
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.component.html b/projects/kypo-player-selection/src/components/kypo-player-selection.component.html
index c12305a379ad7fd3f3dd65a764889f292cbbc567..aba629bbad5fe3235d502e8ba0cb645625194430 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.component.html
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.component.html
@@ -3,12 +3,12 @@
   <span>{{ playerSelections.length }} trainees</span>
   displayed
   <span>
-    <button class="trainee-selector" mat-button (click)="showAllPlayers()">Show all</button>
+    <button class="trainee-selector" mat-button color="primary" (click)="showAllPlayers()">Show all</button>
   </span>
   <span>
-    <button class="trainee-selector" mat-button (click)="hideAllPlayers()">Hide all</button>
+    <button class="trainee-selector" mat-button color="primary" (click)="hideAllPlayers()">Hide all</button>
   </span>
-</div>
+</div>  
 
 <div class="container">
   <ng-container *ngFor="let playerSelection of playerSelections">
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss b/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss
index e30bb8b77569ab401a58e3c9b4268084b95c431f..bbc756fd55fb64b2fd82f1c5aaabf95df95795af 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.component.scss
@@ -4,4 +4,8 @@
     justify-content: center;
     flex-wrap: wrap;
     gap: 2%;
+}
+
+.displayed-indicator {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts b/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts
index 7c8fc061beec41ab14a1625b6f3bc343b11e0aac..0b516278bfde4ef527fa6eda58b3122ef91760de 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { View } from 'src/model/enums/view';
-import { PlayerData } from 'src/model/player-data';
-import { PlayerSelection } from 'src/model/player-selection';
+import { View } from '../model/enums/view';
+import { PlayerData } from '../model/player-data';
+import { PlayerSelection } from '../model/player-selection';
 
 @Component({
   selector: 'kypo-player-selection',
@@ -13,8 +13,8 @@ export class KypoPlayerSelectionComponent implements OnInit {
   @Input() playerData!: PlayerData[];
   @Input() view: View = View.BOTH;
 
-  @Output() playerDataChange: EventEmitter<PlayerData[]> = new EventEmitter();
-  @Output() hoveredPlayer: EventEmitter<PlayerData> = new EventEmitter();
+  @Output() playerSelectionChange: EventEmitter<number[]> = new EventEmitter();
+  @Output() hoveredPlayerChange: EventEmitter<number> = new EventEmitter();
 
   playerSelections!: PlayerSelection[];
 
@@ -28,17 +28,19 @@ export class KypoPlayerSelectionComponent implements OnInit {
 
   onPlayerSelectionChange(playerSelection: PlayerSelection): void {
     this.playerSelections.find((ps) => ps.id === playerSelection.id)!.isSelected = playerSelection.isSelected;
-    this.playerDataChange.emit(
+    this.emitSelected();
+  }
+
+  private emitSelected(): void {
+    this.playerSelectionChange.emit(
       this.playerSelections
         .filter((playerSelection) => playerSelection.isSelected)
-        .map(
-          (playerSelection) => new PlayerData(playerSelection.id, playerSelection.player, playerSelection.alertMessage)
-        )
+        .map((playerSelection) => playerSelection.id)
     );
   }
 
   onPlayerTabHover(playerSelection: PlayerSelection) {
-    this.hoveredPlayer.emit(new PlayerData(playerSelection.id, playerSelection.player, playerSelection.alertMessage));
+    this.hoveredPlayerChange.emit(playerSelection?.id);
   }
 
   getSelectedPlayersCount(): number {
diff --git a/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts b/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts
index 1488f77b4c9c1deca92b0860bdd099091b75a968..af2cd4a3ec1e17d36abfbebc208993dba3880f07 100644
--- a/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts
+++ b/projects/kypo-player-selection/src/components/kypo-player-selection.module.ts
@@ -4,19 +4,9 @@ import { KypoPlayerSelectionmaterialModule } from './kypo-player-selection-mater
 import { KypoPlayerSelectionComponent } from './kypo-player-selection.component';
 import { PlayerTabComponent } from './player-tab/player-tab.component';
 
-
-
 @NgModule({
-  declarations: [
-    KypoPlayerSelectionComponent,
-    PlayerTabComponent
-  ],
-  imports: [
-    CommonModule,
-    KypoPlayerSelectionmaterialModule
-  ],
-  exports: [
-    KypoPlayerSelectionComponent
-  ]
+  declarations: [KypoPlayerSelectionComponent, PlayerTabComponent],
+  imports: [CommonModule, KypoPlayerSelectionmaterialModule],
+  exports: [KypoPlayerSelectionComponent],
 })
-export class KypoPlayerSelectionModule { }
+export class KypoPlayerSelectionModule {}
diff --git a/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts b/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts
index b033ad08360060310e627561f2d948c1902fc0dd..a79680925d16731cbe3a44ffdc49885eada96611 100644
--- a/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts
+++ b/projects/kypo-player-selection/src/components/player-tab/player-tab.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { View } from 'src/model/enums/view';
-import { PlayerSelection } from 'src/model/player-selection';
+import { View } from '../../model/enums/view';
+import { PlayerSelection } from '../../model/player-selection';
 
 @Component({
   selector: 'kypo-player-tab',
diff --git a/projects/kypo-player-selection/src/model/player-data.ts b/projects/kypo-player-selection/src/model/player-data.ts
index 765884021ff1c882923c2b606af3f4723621af9f..9cf36e7b0f208c56263c9b35acb55c17449a580a 100644
--- a/projects/kypo-player-selection/src/model/player-data.ts
+++ b/projects/kypo-player-selection/src/model/player-data.ts
@@ -1,11 +1,11 @@
 import { Player } from "./player";
 
 export class PlayerData {
-    id!: number | string;
+    id!: number;
     player!: Player;
     alertMessage!: string;
 
-    constructor(id: number | string, player: Player, alertMessage: string) {
+    constructor(id: number, player: Player, alertMessage: string) {
         this.id = id;
         this.player = player;
         this.alertMessage = alertMessage;
diff --git a/projects/kypo-player-selection/src/public-api.ts b/projects/kypo-player-selection/src/public-api.ts
index 9b25e951372e30c72241c7f5122b28ef2f5d123b..12d1fd518738124d21f161f5de5f5ffc097c6a88 100644
--- a/projects/kypo-player-selection/src/public-api.ts
+++ b/projects/kypo-player-selection/src/public-api.ts
@@ -4,3 +4,9 @@
 
 export * from './components/kypo-player-selection.component';
 export * from './components/kypo-player-selection.module';
+
+
+export * from './model/player';
+export * from './model/player-data';
+export * from './model/player-selection';
+export * from './model/enums/view';
\ No newline at end of file