diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5174957..f5ecf24 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <main class="main">
-<app-screen-rotations></app-screen-rotations>
+<app-screen-basic [players]="players"></app-screen-basic>
 </main>
 
 <router-outlet />
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 34167db..64981c6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
 import { filter, take } from 'rxjs';
 import { ScreenBasicComponent } from "./screen-basic/screen-basic.component";
 import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
+import { Player } from './model';
 
 @Component({
   selector: 'app-root',
@@ -16,12 +17,7 @@ import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.co
 })
 export class AppComponent implements OnInit {
   title = 'vb';
-  playerNamesValue = "";
-  numTeamsSelectorValue = "2";
-  numTeamsSelected = 2;
-  nTeamsValue = "4";
-  teamsArray: string[][] = [];
-  duplicateNames: string[] = [];
+  players : Player[] = [];
 
   constructor(private activatedRoute: ActivatedRoute){}
 
@@ -30,50 +26,11 @@ export class AppComponent implements OnInit {
       filter(params => Object.keys(params).length > 0), // Only proceed if params are not empty
       take(1)
     ).subscribe(params => {
-      const names = params['names']?.replaceAll(',', '\n');
-      if (names) {
-        this.playerNamesValue = names;
+      if (params['names']){
+        this.players = params['names'].split(',').map((name: string) => new Player(name));
       }
     });
   }
 
-onButtonGenerate(textinput: string): void{
-    if(this.numTeamsSelectorValue === 'n'){
-      this.numTeamsSelected  = Number(this.nTeamsValue);
-    }
-    else{
-      this.numTeamsSelected = Number(this.numTeamsSelectorValue);
-    }
-    let nameslist = this.playerNamesValue
-        .split('\n')
-        .map(function(str){return str.trim();})
-        .filter(function(str){return str}); // boolean interpretation is same as non-empty
-    // remove duplicates by using a Set
-    let namesset = new Set(nameslist);
-    let names = [...namesset];
-
-    
-    let teams = Array.from({ length: this.numTeamsSelected }, () => []);
-    let playersPerTeam = Math.floor(names.length / this.numTeamsSelected);
-
-    let nameslen = names.length;
-    function* iter(list: any[]){
-        let index = 0;
-        while(true){
-            yield list[index % list.length];
-            index++;
-        }
-    }
-    let iterator = iter(teams);
-    for(let i =0; i < nameslen; i++){
-        let index = Math.floor(Math.random()* names.length);
-        let n = names[index]; 
-        names.splice(index,1);
-        let team = iterator.next().value;
-        team.push(n);
-
-    }
-    this.teamsArray = teams;
-  }
 
 }
diff --git a/src/app/model.ts b/src/app/model.ts
index 6570870..e9cc6e3 100644
--- a/src/app/model.ts
+++ b/src/app/model.ts
@@ -1,11 +1,31 @@
 export class Player{
   name: string;
-  outside: boolean = false;
-  middle: boolean = false;
-  opposite: boolean = false; // dia
-  setter: boolean = false;
-  libero: boolean = false;
-  constructor( name: string){
+  outside: boolean;
+  middle: boolean;
+  opposite: boolean; // dia
+  setter: boolean;
+  libero: boolean;
+
+  constructor(
+    name:string, 
+    outside: boolean = false,
+    middle: boolean = false,
+    opposite: boolean = false, // dia
+    setter: boolean = false,
+    libero: boolean = false,
+  ){
     this.name = name;
+    this.outside = outside;
+    this.middle = middle;
+    this.opposite = opposite;
+    this.setter = setter;
+    this.libero = libero;
+  }
+  serialize(): string[] {
+    const values = 'OOOO'
+    return [this.name, values];
+  }
+  static deSerialize(name: string, values: string): Player{
+    return new Player(name);
   }
 }
diff --git a/src/app/screen-basic/screen-basic.component.ts b/src/app/screen-basic/screen-basic.component.ts
index 39be8b4..8f29cbc 100644
--- a/src/app/screen-basic/screen-basic.component.ts
+++ b/src/app/screen-basic/screen-basic.component.ts
@@ -1,8 +1,10 @@
-import { Component, OnInit} from '@angular/core';
+// Original Team Generation Screen for arbitrary size and number of teams
+import { Component, Input, OnInit} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterOutlet, ActivatedRoute } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CommonModule } from '@angular/common';
+import { Player } from '../model';
 
 @Component({
   selector: 'app-screen-basic',
@@ -11,6 +13,7 @@ import { CommonModule } from '@angular/common';
   styleUrl: './screen-basic.component.less'
 })
 export class ScreenBasicComponent {
+  @Input() players!: Player[];
   playerNamesValue = "";
   numTeamsSelectorValue = "2";
   numTeamsSelected = 2;
@@ -35,7 +38,6 @@ export class ScreenBasicComponent {
 
     
     let teams = Array.from({ length: this.numTeamsSelected }, () => []);
-    let playersPerTeam = Math.floor(names.length / this.numTeamsSelected);
 
     let nameslen = names.length;
     function* iter(list: any[]){
diff --git a/src/app/screen-rotations/screen-rotations.component.html b/src/app/screen-rotations/screen-rotations.component.html
index c854196..b2f2cf5 100644
--- a/src/app/screen-rotations/screen-rotations.component.html
+++ b/src/app/screen-rotations/screen-rotations.component.html
@@ -4,7 +4,7 @@
   <ul class="list-group mb-3">
       @for (player of players; track $index) {
         <li class="list-group-item">{{ player.name }}</li>
-        <button class="btn btn-outline-primary" (click)="open(player)">
+        <button class="btn btn-outline-primary" (click)="openPlayerModal(player)">
 	<div>Edit Roles</div>
 </button>
       }
diff --git a/src/app/screen-rotations/screen-rotations.component.ts b/src/app/screen-rotations/screen-rotations.component.ts
index 3d7db45..7987d2e 100644
--- a/src/app/screen-rotations/screen-rotations.component.ts
+++ b/src/app/screen-rotations/screen-rotations.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+// Team Generation Screen respecting volleyball roles as defined by `../model/Player`
+import { Component, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Player } from '../model';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -11,7 +12,7 @@ import { ModalRotationsComponent } from '../modal-rotations/modal-rotations.comp
   styleUrl: './screen-rotations.component.less'
 })
 export class ScreenRotationsComponent {
-  players: Player[] = [];
+  @Input() players!: Player[];
   newItem: string = "";
 
   constructor(private modalService: NgbModal) {}
@@ -23,20 +24,17 @@ export class ScreenRotationsComponent {
     }
   }
 
-  openPlayerDialog(player: Player) {
+  openPlayerModal(player: Player){
     const modalRef = this.modalService.open(ModalRotationsComponent);
     modalRef.componentInstance.player = player;
-
+    /*
     modalRef.result.then((updatedPlayer) => {
       // Handle the updated player data if needed
       console.log('Player updated:', updatedPlayer);
     }).catch((error) => {
       console.log('Modal dismissed');
     });
-  }
-  open(player: Player){
-    const modalRef = this.modalService.open(ModalRotationsComponent);
-    modalRef.componentInstance.player = player;
+    */
   }
 
 }
\ No newline at end of file