diff --git a/src/app/app.component.html b/src/app/app.component.html
index f5ecf24..89e1eca 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <main class="main">
-<app-screen-basic [players]="players"></app-screen-basic>
+<app-screen-rotations [players]="players"></app-screen-rotations>
 </main>
 
 <router-outlet />
diff --git a/src/app/screen-rotations/screen-rotations.component.html b/src/app/screen-rotations/screen-rotations.component.html
index a02d7b2..a16e415 100644
--- a/src/app/screen-rotations/screen-rotations.component.html
+++ b/src/app/screen-rotations/screen-rotations.component.html
@@ -1 +1,65 @@
-<p>rotations!</p>
\ No newline at end of file
+<div class="justify-content-md-center">
+<h1>Rotations</h1>
+<div ngbAccordion>
+  <div ngbAccordionItem>
+    <h2 ngbAccordionHeader>
+      <button ngbAccordionButton>Outside</button>
+    </h2>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+          @for (player of outsidePlayers; track $index) {
+            {{ player.name }}
+          }
+      </div>
+    </div>
+  </div>
+</div>
+<div ngbAccordion>
+  <div ngbAccordionItem>
+    <h2 ngbAccordionHeader>
+      <button ngbAccordionButton>Middle</button>
+    </h2>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>Content for the first item</ng-template>
+      </div>
+    </div>
+  </div>
+</div>
+<div ngbAccordion>
+  <div ngbAccordionItem>
+    <h2 ngbAccordionHeader>
+      <button ngbAccordionButton>Opposite</button>
+    </h2>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>Content for the first item</ng-template>
+      </div>
+    </div>
+  </div>
+</div>
+<div ngbAccordion>
+  <div ngbAccordionItem>
+    <h2 ngbAccordionHeader>
+      <button ngbAccordionButton>Setter</button>
+    </h2>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>Content for the first item</ng-template>
+      </div>
+    </div>
+  </div>
+</div>
+<div ngbAccordion>
+  <div ngbAccordionItem>
+    <h2 ngbAccordionHeader>
+      <button ngbAccordionButton>Libero</button>
+    </h2>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>Content for the first item</ng-template>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
diff --git a/src/app/screen-rotations/screen-rotations.component.ts b/src/app/screen-rotations/screen-rotations.component.ts
index 3f8c3fb..be8a5f5 100644
--- a/src/app/screen-rotations/screen-rotations.component.ts
+++ b/src/app/screen-rotations/screen-rotations.component.ts
@@ -2,13 +2,29 @@
 import { Component, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Player } from '../model';
+import { NgbAccordionBody, NgbAccordionCollapse, NgbAccordionHeader, NgbAccordionItem, NgbAccordionButton, NgbAccordionDirective, NgbAccordionToggle } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-screen-rotations',
-  imports: [FormsModule],
+  imports: [FormsModule, NgbAccordionButton, NgbAccordionDirective, NgbAccordionItem, NgbAccordionHeader, NgbAccordionToggle, NgbAccordionBody, NgbAccordionCollapse,],
   templateUrl: './screen-rotations.component.html',
   styleUrl: './screen-rotations.component.less'
 })
 export class ScreenRotationsComponent {
   @Input() players!: Player[];
+  get outsidePlayers(): Player[] {
+    return this.players.filter(player => !player.outside);
+  }
+  get middlePlayers(): Player[] {
+    return this.players.filter(player => player.middle);
+  }
+  get oppositePlayers(): Player[] {
+    return this.players.filter(player => player.opposite);
+  }
+  get SetterPlayers(): Player[] {
+    return this.players.filter(player => player.setter);
+  }
+  get LiberoPlayers(): Player[] {
+    return this.players.filter(player => player.libero);
+  }
 }
\ No newline at end of file