diff --git a/app/src/views/BullpenStats.vue b/app/src/views/BullpenStats.vue
index 3178a25..286d088 100644
--- a/app/src/views/BullpenStats.vue
+++ b/app/src/views/BullpenStats.vue
@@ -1,8 +1,38 @@
+<script setup lang="ts">
+import {
+  IonButton,
+  IonBadge,
+  IonLabel,
+  IonList,
+  IonItem,
+  IonFooter,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import {ref} from 'vue'
+import {useRouter} from 'vue-router';
+import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
+
+const router = useRouter();
+const bps = ref<BullpenSessionService>(bullpenSessionService);
+
+const gotoHome = () => {
+  router.push('/home');
+};
+</script>
+
 <template>
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-title>Bullpen Stats for {{ bps.getPitcher().first_name }} {{ bps.getPitcher().last_name }}</ion-title>
+        <ion-title>Bullpen Stats for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
@@ -34,61 +64,6 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import {
-  IonButton,
-  IonBadge,
-  IonLabel,
-  IonList,
-  IonItem,
-  IonFooter,
-  IonCard,
-  IonCardHeader,
-  IonCardTitle,
-  IonCardContent,
-  IonContent,
-  IonHeader,
-  IonPage,
-  IonTitle,
-  IonToolbar
-} from '@ionic/vue';
-import {defineComponent, ref} from 'vue'
-import {useRouter} from 'vue-router';
-import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
-
-export default defineComponent({
-  name: 'BullpenStats',
-  components: {
-    IonButton,
-    IonBadge,
-    IonFooter,
-    IonLabel,
-    IonList,
-    IonItem,
-    IonPage,
-    IonCard,
-    IonCardHeader,
-    IonCardTitle,
-    IonCardContent,
-    IonContent,
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-  },
-  setup() {
-    const router = useRouter();
-    const bps = ref<BullpenSessionService>(bullpenSessionService);
-
-    const gotoHome = () => {
-      router.push('/home');
-    }
-    return {bps, gotoHome};
-  }
-});
-
-</script>
-
-
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/app/src/views/FinalizePitch.vue b/app/src/views/FinalizePitch.vue
index 5f21a77..3dcc6f6 100644
--- a/app/src/views/FinalizePitch.vue
+++ b/app/src/views/FinalizePitch.vue
@@ -1,8 +1,46 @@
+<script setup lang="ts">
+import {defineComponent, ref} from "vue";
+import {
+  IonContent,
+  IonHeader,
+  IonFooter,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle, IonButton,
+  IonGrid, IonRow, IonCol
+} from "@ionic/vue";
+import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
+const bps = ref<BullpenSessionService>(bullpenSessionService);
+
+const finalizeAndNextPitch = () => {
+  bullpenSessionService.nextPitch();
+  router.push({ name: 'PreparePitch' });
+}
+
+const finalizeAndEndBullpen = () => {
+  bullpenSessionService.nextPitch();
+  bullpenSessionService.finishSession();
+  router.push({ name: 'BullpenStats' });
+}
+
+const setRealPitchArea = (hitArea: number) => {
+  bps.value.currentBullpenPitch().realPitchArea = hitArea;
+};
+
+</script>
+
 <template>
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-title>Finalize Pitch for {{ bps.getPitcher().first_name }} {{ bps.getPitcher().last_name }}</ion-title>
+        <ion-title>Finalize Pitch for {{ bps.getPitcher().firstName }} {{ bps.getPitcher().lastName }}</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content>
@@ -82,65 +120,6 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import {defineComponent, ref} from "vue";
-import {
-  IonContent,
-  IonHeader,
-  IonFooter,
-  IonToolbar,
-  IonTitle,
-  IonPage,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardTitle, IonButton,
-  IonGrid, IonRow, IonCol
-} from "@ionic/vue";
-import {BullpenSessionService, bullpenSessionService} from "@/services/BullpenSessionService";
-import {useRouter} from "vue-router";
-
-export default defineComponent({
-  name: "FinalizePitch",
-  components: {
-    IonButton,
-    IonPage,
-    IonFooter,
-    IonContent,
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-    IonCard,
-    IonCardContent,
-    IonCardHeader,
-    IonCardTitle,
-    IonGrid, IonRow, IonCol
-  },
-  setup() {
-    const router = useRouter();
-    const bps = ref<BullpenSessionService>(bullpenSessionService);
-
-    const finalizeAndNextPitch = () => {
-      bullpenSessionService.nextPitch();
-      router.push({ name: 'PreparePitch' });
-    }
-
-    const finalizeAndEndBullpen = () => {
-      bullpenSessionService.nextPitch();
-      bullpenSessionService.finishSession();
-      router.push({ name: 'BullpenStats' });
-    }
-
-    return {bps, finalizeAndNextPitch, finalizeAndEndBullpen};
-  },
-  methods: {
-    setRealPitchArea(hitArea: number) {
-      this.bps.currentBullpenPitch().realPitchArea = hitArea;
-    }
-  }
-});
-</script>
-
 <style scoped>
 .wasted {
   fill: firebrick;
@@ -177,4 +156,4 @@ export default defineComponent({
   fill: white;
   font-size: 30px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 88eeee0..1fdb160 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-// import { ref } from 'vue';
+import { ref } from 'vue';
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
 import { playOutline, statsChartOutline, personOutline } from 'ionicons/icons';
-import img from '../assets/groot.jpg'
+// import userImage from '../assets/groot.jpg'
 import {useRouter} from "vue-router";
 
 const router = useRouter();
-// const userImage = ref('../assets/groot.jpg'); // Replace with actual user image URL
+const userImage = ref(null);
+// const userImage = ref('../assets/groot.jpg');
 
 const startBullpen = () => {
   console.log('Starting bullpen session');
@@ -35,7 +36,12 @@ const showProfile = () => {
     <ion-content class="ion-padding">
       <div class="user-container">
         <ion-avatar class="user-avatar">
-          <img :src="img" alt="User Profile" class="avatar-frame" />
+          <template v-if="userImage">
+            <img :src="userImage" alt="User Profile" class="avatar-frame" />
+          </template>
+          <template v-else>
+            <ion-icon :icon="personOutline" class="avatar-placeholder" />
+          </template>
         </ion-avatar>
       </div>
 
@@ -96,4 +102,4 @@ const showProfile = () => {
   width: 100%;
   justify-content: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/src/views/Login.vue b/app/src/views/Login.vue
index 17a879b..fa617d9 100644
--- a/app/src/views/Login.vue
+++ b/app/src/views/Login.vue
@@ -1,66 +1,3 @@
-<template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-menu-button></ion-menu-button>
-        </ion-buttons>
-        <ion-title>Login</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <form @submit="submit">
-        <ion-row>
-          <ion-col>
-            <ion-list>
-
-              <ion-item>
-                <ion-icon :icon="personOutline" class="icon-login"></ion-icon>
-                <ion-input name="user" v-model="email" v-bind="emailAttrs" type="text" required placeholder="Username"></ion-input>
-              </ion-item>
-              <br />
-              <ion-item>
-                <ion-icon :icon="lockClosedOutline" class="icon-login"></ion-icon>
-                <ion-input name="password" v-model="password" v-bind="passwordAttrs" type="password" required placeholder="Password"></ion-input>
-              </ion-item>
-
-            </ion-list>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col>
-            <ion-button :disabled="!meta.valid" type="submit" fill="solid" expand="full">
-              Login
-            </ion-button>
-          </ion-col>
-        </ion-row>
-        <ion-row>
-          <ion-col>
-            <pre>errors: {{ errors }}</pre>
-          </ion-col>
-        </ion-row>
-      </form>
-    </ion-content>
-  </ion-page>
-</template>
-
-<style scoped>
-.login-logo {
-  padding: 20px 0;
-  min-height: 200px;
-  text-align: center;
-}
-
-.login-logo img {
-  max-width: 150px;
-}
-
-.list {
-  margin-bottom: 0;
-}
-</style>
-
 <script setup lang="ts">
 import { computed, ref, onMounted } from "vue";
 import {
@@ -139,4 +76,67 @@ const onLogin = () => {
     console.log(error);
   });
 }
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button></ion-menu-button>
+        </ion-buttons>
+        <ion-title>Login</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <form @submit="submit">
+        <ion-row>
+          <ion-col>
+            <ion-list>
+
+              <ion-item>
+                <ion-icon :icon="personOutline" class="icon-login"></ion-icon>
+                <ion-input name="user" v-model="email" v-bind="emailAttrs" type="text" required placeholder="Username"></ion-input>
+              </ion-item>
+              <br />
+              <ion-item>
+                <ion-icon :icon="lockClosedOutline" class="icon-login"></ion-icon>
+                <ion-input name="password" v-model="password" v-bind="passwordAttrs" type="password" required placeholder="Password"></ion-input>
+              </ion-item>
+
+            </ion-list>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+            <ion-button :disabled="!meta.valid" type="submit" fill="solid" expand="full">
+              Login
+            </ion-button>
+          </ion-col>
+        </ion-row>
+        <ion-row>
+          <ion-col>
+            <pre>errors: {{ errors }}</pre>
+          </ion-col>
+        </ion-row>
+      </form>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style scoped>
+.login-logo {
+  padding: 20px 0;
+  min-height: 200px;
+  text-align: center;
+}
+
+.login-logo img {
+  max-width: 150px;
+}
+
+.list {
+  margin-bottom: 0;
+}
+</style>