diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index ea1e325..9f3ec75 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -23,6 +23,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/pitchers',
     name: 'Pitchers',
     component: PitcherList
+  }, {
+    path: '/bullpen',
+    name: 'PreparePitch',
+    component: PreparePitch
   }, {
     path: '/prepare',
     name: 'PreparePitch',
diff --git a/app/src/services/BullpenSessionService.ts b/app/src/services/BullpenSessionService.ts
index e9732fd..ebb17ce 100644
--- a/app/src/services/BullpenSessionService.ts
+++ b/app/src/services/BullpenSessionService.ts
@@ -1,89 +1,32 @@
 import Pitch from "@/types/Pitch";
 import User from "@/types/User";
-import PitchType from "@/types/PitchType";
+import Bullpen from '@/types/Bullpen';
+import PitchTypeService from '@/services/PitchTypeService';
 // import api from './Api';
 
 export class BullpenSessionService {
-    private static nullPitcher: User = {
-        id: 0,
-        firstName: "",
-        lastName: "",
-        gender: "male",
-        handedness: "right",
-        height: 0.0,
-        weight: 0.0,
-        dateOfBirth: new Date(0),
-        createdAt: new Date(0),
-        updatedAt: new Date(0),
-    };
-    private static nullPitchType: PitchType = {
-        id: 0,
-        name: "",
-        abbreviation: ""
+    public create(user: User): Bullpen {
+        return {
+            id: null,
+            startedAt: new Date(),
+            finishedAt: null,
+            pitcherId: user.id,
+            pitches: []
+        }
     }
 
-    public constructor() {
-        this.currentPitch = this.createPitch();
-    }
+    public finish(): void {}
 
-    public saveBullpen(): void {}
-    public startSession(pitcher: User): void {
-        this.pitcher = pitcher;
-        this.pitches = [];
-        this.currentPitch = this.createPitch();
-    }
-
-    public clear(): void {
-        this.pitcher = BullpenSessionService.nullPitcher;
-        this.pitches = [];
-    }
-
-    public finishSession(): void {
-        // Todo: save to backend
-    }
-    public cancelSession(): void {
-        this.pitches = [];
-        this.pitcher = BullpenSessionService.nullPitcher;
-    }
-
-    public addBullpenPitch( bullpenPitch: Pitch ): void {
-        this.pitches.push( bullpenPitch );
-    }
-
-    public getBullpenPitches(): Pitch[] {
-        return this.pitches;
-    }
-
-    public currentBullpenPitch(): Pitch {
-        return this.currentPitch;
-    }
-
-    public nextPitch(): void {
-        this.pitches.push(this.currentBullpenPitch());
-        this.currentPitch = this.createPitch();
-    }
-
-    public getPitcher(): User {
-        return this.pitcher;
-    }
-
-    public isSessionStarted(): boolean {
-        return this.pitcher.id === 0;
-    }
-
-    private createPitch(): Pitch {
+    public createPitch(): Pitch {
         return {
             id: 0,
             date: new Date(),
-            pitchType: BullpenSessionService.nullPitchType,
+            pitchType: PitchTypeService.getLocalPitchTypes()[0],
             plannedPitchArea: 0,
             realPitchArea: 0,
             realPitchSubArea: 0
         }
     }
-    private pitches: Pitch[] = [];
-    private pitcher: User = BullpenSessionService.nullPitcher;
-    private currentPitch: Pitch;
 }
 
 export default new BullpenSessionService();
diff --git a/app/src/store/auth.ts b/app/src/store/auth.ts
index 28ad8e3..6ebe186 100644
--- a/app/src/store/auth.ts
+++ b/app/src/store/auth.ts
@@ -84,6 +84,9 @@ const auth: Module<AuthState, RootState> = {
         registerFailure(state) {
             state.isAuthenticated = false;
         }
+    },
+    getters: {
+        getUser: (state) => state.user
     }
 };
 
diff --git a/app/src/store/bullpen.ts b/app/src/store/bullpen.ts
new file mode 100644
index 0000000..1dd0e61
--- /dev/null
+++ b/app/src/store/bullpen.ts
@@ -0,0 +1,29 @@
+import { Module } from 'vuex';
+import { RootState } from './index';
+import Bullpen from '@/types/Bullpen';
+import User from '@/types/User';
+import BullpenSessionService from '@/services/BullpenSessionService';
+import Pitch from '@/types/Pitch';
+
+export interface BullpenState {
+    bullpen: Bullpen | null;
+}
+
+const bullpen: Module<BullpenState, RootState> = {
+    namespaced: true,
+    state: { bullpen: null },
+    mutations: {
+        start(state, user: User) {
+            state.bullpen = BullpenSessionService.create(user);
+        },
+        addPitch(state, pitch: Pitch) {
+            state.bullpen?.pitches.push({ ...pitch });
+
+        },
+        finish(state) {
+            state.bullpen = null;
+        }
+    }
+};
+
+export default bullpen;
diff --git a/app/src/store/index.ts b/app/src/store/index.ts
index c35c7b1..f2122ac 100644
--- a/app/src/store/index.ts
+++ b/app/src/store/index.ts
@@ -1,11 +1,13 @@
 import { InjectionKey } from 'vue'
 import { createStore, Store } from 'vuex';
 import auth, {AuthState} from './auth';
+import bullpen, {BullpenState} from './bullpen';
 import pitchTypes, {PitchTypeState} from './pitchType';
 
 // Root state type
 export interface RootState {
     auth: AuthState;
+    bullpen: BullpenState;
     pitchTypes: PitchTypeState;
 }
 
@@ -14,6 +16,7 @@ export const key: InjectionKey<Store<RootState>> = Symbol()
 const store = createStore<RootState>({
     modules: {
         auth,
+        bullpen,
         pitchTypes
     }
 });
diff --git a/app/src/types/Bullpen.ts b/app/src/types/Bullpen.ts
index 8303ce4..b916f6c 100644
--- a/app/src/types/Bullpen.ts
+++ b/app/src/types/Bullpen.ts
@@ -1,9 +1,9 @@
 import Pitch from "@/types/Pitch";
 
 export default interface Bullpen {
-    id: number,
+    id: number | null,
     startedAt: Date,
-    finishedAt: Date,
+    finishedAt: Date | null,
     pitcherId: number,
     pitches: Pitch[]
 }
diff --git a/app/src/types/BullpenStep.ts b/app/src/types/BullpenStep.ts
new file mode 100644
index 0000000..66ad75c
--- /dev/null
+++ b/app/src/types/BullpenStep.ts
@@ -0,0 +1,4 @@
+export enum BullpenStep {
+    Prepare = 1,
+    Finish = 2
+}
diff --git a/app/src/views/PreparePitch.vue b/app/src/views/PreparePitch.vue
index e893df8..488d447 100644
--- a/app/src/views/PreparePitch.vue
+++ b/app/src/views/PreparePitch.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import {onMounted, ref} from "vue";
-import PitchTypeService from "@/services/PitchTypeService";
+import {computed, onMounted, ref} from "vue";
 import {
   IonContent,
   IonHeader,
@@ -13,39 +12,73 @@ import {
   IonCard,
   IonCardContent,
   IonCardHeader,
-  IonCardTitle,
+  IonCardTitle, IonRow, IonGrid, IonCol,
 } from "@ionic/vue";
+import {BullpenStep} from "@/types/BullpenStep";
 import PitchType from "@/types/PitchType";
+import Pitch from "@/types/Pitch";
 import BullpenSessionService from "@/services/BullpenSessionService";
 import {useRouter} from "vue-router";
+import {useStore} from 'vuex';
 
 const router = useRouter();
-const pitchTypes = ref<PitchType[]>([]);
-const bps = ref(BullpenSessionService);
+const store = useStore();
+
+const pitch = ref<Pitch>(BullpenSessionService.createPitch());
+const currentStep = ref<BullpenStep>(BullpenStep.Prepare);
+
+const pitcher = computed(() => store.state.auth.user);
+const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
 
 onMounted(async () => {
-  pitchTypes.value = PitchTypeService.getLocalPitchTypes();
-  bps.value.currentBullpenPitch().pitchType = pitchTypes.value[0];
+  store.commit("bullpen/start", pitcher);
 });
 
 const setPitchType = (pitchType: PitchType) => {
-  bps.value.currentBullpenPitch().pitchType = pitchType;
+  pitch.value.pitchType = pitchType;
 }
 
 const gotoFinalizePitch = () => {
-  router.push({ name: 'FinalizePitch' });
+  currentStep.value = BullpenStep.Finish;
 }
+
+const finalizeAndNextPitch = () => {
+  store.commit("bullpen/addPitch", pitch.value);
+  currentStep.value = BullpenStep.Prepare;
+}
+
+const finalizeAndEndBullpen = () => {
+  store.commit("bullpen/addPitch", pitch.value);
+  router.push({ name: 'BullpenStats' });
+}
+
 const setPlannedPitchArea = (hitArea: number) => {
-  bps.value.currentBullpenPitch().plannedPitchArea = hitArea;
+  if (currentStep.value === BullpenStep.Prepare) {
+    pitch.value.plannedPitchArea = hitArea;
+  } else {
+    pitch.value.realPitchArea = hitArea;
+  }
 };
 
+const pitchAreaCssClasses = (area: number, name: string) => {
+  const classes = [];
+
+  if (pitch.value.plannedPitchArea === area) {
+    classes.push(name + '-aim-selected');
+  }
+  if (pitch.value.realPitchArea === area) {
+    classes.push(name + '-hit-selected');
+  }
+
+  return classes;
+}
 </script>
 
 <template>
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-title>Prepare Pitch for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
+        <ion-title>Prepare Pitch for {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
@@ -54,7 +87,7 @@ const setPlannedPitchArea = (hitArea: number) => {
           <ion-card-title>Select Pitch type</ion-card-title>
         </ion-card-header>
         <ion-card-content>
-            <ion-button v-for="(pitchType, index) in pitchTypes" :key="index" :color="pitchType.id !== bps.currentBullpenPitch().pitchType.id ? 'primary' : 'warning'" @click="setPitchType(pitchType)">
+            <ion-button v-for="(pitchType, index) in pitchTypes" :key="index" :color="pitchType.id !== pitch.pitchType.id ? 'primary' : 'warning'" @click="setPitchType(pitchType)">
               <ion-label>{{pitchType.abbreviation}}</ion-label>
             </ion-button>
         </ion-card-content>
@@ -65,14 +98,14 @@ const setPlannedPitchArea = (hitArea: number) => {
         </ion-card-header>
         <ion-card-content>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
-            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 21}" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setPlannedPitchArea(21)" />
-            <rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 22}" class="wasted" x="105" y="0" width="150" height="60" @click="setPlannedPitchArea(22)" />
-            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 23}" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setPlannedPitchArea(23)"  />
-            <rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 24}" class="wasted" x="0" y="105" width="60" height="150" @click="setPlannedPitchArea(24)"  />
-            <rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 25}" class="wasted" x="300" y="105" width="60" height="150" @click="setPlannedPitchArea(25)" />
-            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 26}" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setPlannedPitchArea(26)"  />
-            <rect :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 27}" class="wasted" x="105" y="300" width="150" height="60" @click="setPlannedPitchArea(27)" />
-            <polygon :class="{'wasted-selected': bps.currentBullpenPitch().plannedPitchArea === 28}" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setPlannedPitchArea(28)"  />
+            <polygon :class="pitchAreaCssClasses(21, 'wasted')" class="wasted" points="0,0 105,0 105,60 60,60 60,105 0,105" @click="setPlannedPitchArea(21)" />
+            <rect :class="pitchAreaCssClasses(22, 'wasted')" class="wasted" x="105" y="0" width="150" height="60" @click="setPlannedPitchArea(22)" />
+            <polygon :class="pitchAreaCssClasses(23, 'wasted')" class="wasted" points="255,0 360,0 360,105 300,105 300,60, 255,60" @click="setPlannedPitchArea(23)"  />
+            <rect :class="pitchAreaCssClasses(24, 'wasted')" class="wasted" x="0" y="105" width="60" height="150" @click="setPlannedPitchArea(24)"  />
+            <rect :class="pitchAreaCssClasses(25, 'wasted')" class="wasted" x="300" y="105" width="60" height="150" @click="setPlannedPitchArea(25)" />
+            <polygon :class="pitchAreaCssClasses(26, 'wasted')" class="wasted" points="0,255 60,255 60,300 105,300 105,360 0,360" @click="setPlannedPitchArea(26)"  />
+            <rect :class="pitchAreaCssClasses(27, 'wasted')" class="wasted" x="105" y="300" width="150" height="60" @click="setPlannedPitchArea(27)" />
+            <polygon :class="pitchAreaCssClasses(28, 'wasted')" class="wasted" points="255,300 300,300 300,255 360,255 360,360 255,360" @click="setPlannedPitchArea(28)"  />
 
             <text x="30" y="40" class="number" @click="setPlannedPitchArea(21)" >21</text>
             <text x="180" y="40" class="number" @click="setPlannedPitchArea(22)" >22</text>
@@ -83,14 +116,14 @@ const setPlannedPitchArea = (hitArea: number) => {
             <text x="180" y="330" class="number" @click="setPlannedPitchArea(27)" >27</text>
             <text x="330" y="330" class="number" @click="setPlannedPitchArea(28)" >28</text>
 
-            <polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 11}" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setPlannedPitchArea(11)" />
-            <rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 12}" class="edge" x="155" y="60" width="50" height="45" @click="setPlannedPitchArea(12)" />
-            <polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 13}" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setPlannedPitchArea(13)" />
-            <rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 14}" class="edge" x="60" y="155" width="45" height="50" @click="setPlannedPitchArea(14)" />
-            <rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 15}" class="edge" x="255" y="155" width="45" height="50" @click="setPlannedPitchArea(15)" />
-            <polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 16}" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setPlannedPitchArea(16)" />
-            <rect :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 17}" class="edge" x="155" y="255" width="50" height="45" @click="setPlannedPitchArea(17)" />
-            <polygon :class="{'edge-selected': bps.currentBullpenPitch().plannedPitchArea === 18}" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setPlannedPitchArea(18)" />
+            <polygon :class="pitchAreaCssClasses(11, 'edge')" class="edge" points="60,60 155,60 155,105 105,105 105,155, 60,155" @click="setPlannedPitchArea(11)" />
+            <rect :class="pitchAreaCssClasses(12, 'edge')" class="edge" x="155" y="60" width="50" height="45" @click="setPlannedPitchArea(12)" />
+            <polygon :class="pitchAreaCssClasses(13, 'edge')" class="edge" points="205,60 300,60 300,155 255,155 255,105, 205,105" @click="setPlannedPitchArea(13)" />
+            <rect :class="pitchAreaCssClasses(14, 'edge')" class="edge" x="60" y="155" width="45" height="50" @click="setPlannedPitchArea(14)" />
+            <rect :class="pitchAreaCssClasses(15, 'edge')" class="edge" x="255" y="155" width="45" height="50" @click="setPlannedPitchArea(15)" />
+            <polygon :class="pitchAreaCssClasses(16, 'edge')" class="edge" points="60,205 105,205 105,255 155,255 155,300, 60,300" @click="setPlannedPitchArea(16)" />
+            <rect :class="pitchAreaCssClasses(17, 'edge')" class="edge" x="155" y="255" width="50" height="45" @click="setPlannedPitchArea(17)" />
+            <polygon :class="pitchAreaCssClasses(18, 'edge')" class="edge" points="205,255 255,255 255,205 300,205 300,300 205,300" @click="setPlannedPitchArea(18)" />
 
             <text x="80"  y="90"  class="number" @click="setPlannedPitchArea(11)">11</text>
             <text x="180" y="90"  class="number" @click="setPlannedPitchArea(12)">12</text>
@@ -101,15 +134,15 @@ const setPlannedPitchArea = (hitArea: number) => {
             <text x="180" y="285" class="number" @click="setPlannedPitchArea(17)">17</text>
             <text x="275" y="285" class="number" @click="setPlannedPitchArea(18)">18</text>
 
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 1}" class="inside" x="105" y="105" width="50" height="50" @click="setPlannedPitchArea(1)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 2}" class="inside" x="155" y="105" width="50" height="50" @click="setPlannedPitchArea(2)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 3}" class="inside" x="205" y="105" width="50" height="50" @click="setPlannedPitchArea(3)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 4}" class="inside" x="105" y="155" width="50" height="50" @click="setPlannedPitchArea(4)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 5}" class="inside" x="155" y="155" width="50" height="50" @click="setPlannedPitchArea(5)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 6}" class="inside" x="205" y="155" width="50" height="50" @click="setPlannedPitchArea(6)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 7}" class="inside" x="105" y="205" width="50" height="50" @click="setPlannedPitchArea(7)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 8}" class="inside" x="155" y="205" width="50" height="50" @click="setPlannedPitchArea(8)"/>
-            <rect :class="{'inside-selected': bps.currentBullpenPitch().plannedPitchArea === 9}" class="inside" x="205" y="205" width="50" height="50" @click="setPlannedPitchArea(9)"/>
+            <rect :class="pitchAreaCssClasses(1, 'inside')" class="inside" x="105" y="105" width="50" height="50" @click="setPlannedPitchArea(1)"/>
+            <rect :class="pitchAreaCssClasses(2, 'inside')" class="inside" x="155" y="105" width="50" height="50" @click="setPlannedPitchArea(2)"/>
+            <rect :class="pitchAreaCssClasses(3, 'inside')" class="inside" x="205" y="105" width="50" height="50" @click="setPlannedPitchArea(3)"/>
+            <rect :class="pitchAreaCssClasses(4, 'inside')" class="inside" x="105" y="155" width="50" height="50" @click="setPlannedPitchArea(4)"/>
+            <rect :class="pitchAreaCssClasses(5, 'inside')" class="inside" x="155" y="155" width="50" height="50" @click="setPlannedPitchArea(5)"/>
+            <rect :class="pitchAreaCssClasses(6, 'inside')" class="inside" x="205" y="155" width="50" height="50" @click="setPlannedPitchArea(6)"/>
+            <rect :class="pitchAreaCssClasses(7, 'inside')" class="inside" x="105" y="205" width="50" height="50" @click="setPlannedPitchArea(7)"/>
+            <rect :class="pitchAreaCssClasses(8, 'inside')" class="inside" x="155" y="205" width="50" height="50" @click="setPlannedPitchArea(8)"/>
+            <rect :class="pitchAreaCssClasses(9, 'inside')" class="inside" x="205" y="205" width="50" height="50" @click="setPlannedPitchArea(9)"/>
 
             <text x="130"  y="140"  class="number" @click="setPlannedPitchArea(1)">1</text>
             <text x="180"  y="140"  class="number" @click="setPlannedPitchArea(2)">2</text>
@@ -125,42 +158,71 @@ const setPlannedPitchArea = (hitArea: number) => {
       </ion-card>
     </ion-content>
     <ion-footer>
-      <ion-button color="warning" expand="full" size="large" :disabled="bps.currentBullpenPitch().pitchType.id === 0 || bps.currentBullpenPitch().plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button>
+      <ion-button color="warning" expand="full" size="large" :disabled="pitch.pitchType.id === 0 || pitch.plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button>
     </ion-footer>
   </ion-page>
 </template>
 
+<!--<ion-grid>-->
+<!--        <div v-if="currentStep === BullpenStep.Prepare">-->
+<!--<ion-row>-->
+<!--  <ion-col><ion-button color="warning" expand="full" size="large" :disabled="pitch.pitchType.id === 0 || pitch.plannedPitchArea === 0" @click="gotoFinalizePitch">Pitch</ion-button></ion-col>-->
+<!--</ion-row>-->
+<!--        </div>-->
+<!--        <div v-if="currentStep === BullpenStep.Finish">-->
+<!--<ion-row>-->
+<!--  <ion-col><ion-button color="success" expand="full" @click="finalizeAndNextPitch" :disabled="pitch.realPitchArea === 0">Save Pitch<br/>&<br/>Next Pitch</ion-button></ion-col>-->
+<!--  <ion-col><ion-button color="success" expand="full" @click="finalizeAndEndBullpen" :disabled="pitch.realPitchArea === 0">Save Pitch<br/>&<br/>End Session</ion-button></ion-col>-->
+<!--</ion-row>-->
+<!--        </div>-->
+<!--</ion-grid>-->
+
 <style scoped>
 .wasted {
   fill: firebrick;
   stroke: black;
   stroke-width: 1;
 }
-.wasted-selected {
+.wasted-aim-selected {
   fill: orangered;
   stroke: black;
   stroke-width: 1;
 }
+.wasted-hit-selected {
+  fill: orange;
+  stroke: black;
+  stroke-width: 1;
+}
 .edge {
   fill: lightgreen;
   stroke: black;
   stroke-width: 1;
 }
-.edge-selected {
+.edge-aim-selected {
   fill: aquamarine;
   stroke: black;
   stroke-width: 1;
 }
+.edge-hit-selected {
+  fill: lightblue;
+  stroke: black;
+  stroke-width: 1;
+}
 .inside {
   fill: green;
   stroke: black;
   stroke-width: 1;
 }
-.inside-selected {
+.inside-aim-selected {
   fill: darkolivegreen;
   stroke: black;
   stroke-width: 1;
 }
+.inside-hit-selected {
+  fill: darkseagreen;
+  stroke: black;
+  stroke-width: 1;
+}
 .number {
   text-anchor: middle;
   fill: white;