diff --git a/components/25-reefscape/MatchVisualization.vue b/components/25-reefscape/MatchVisualization.vue
new file mode 100644
index 0000000..d7ae1db
--- /dev/null
+++ b/components/25-reefscape/MatchVisualization.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import Sentiment from 'sentiment';
+import BarChart from '../charts/BarChart.vue';
+
+let sentiment = new Sentiment();
+let options = {
+  extras: {
+    mid: -2,
+    pretty: 0,
+    broke: -3.5,
+    disabled: -3.5,
+    quickly: 2,
+    easily: 2,
+    dog: -3,
+  },
+};
+
+const props = defineProps<{
+  rowData: any;
+}>();
+
+const selectedMatch = ref(1);
+
+props.rowData.rawData.sort(compareMatchNumbers);
+
+function compareMatchNumbers(a: any, b: any) {
+  //TODO i hate this work around rly need to fix this
+  let matchA =
+    typeof a.matchNumber == 'string' ? parseInt(a.matchNumber) : a.matchNumber;
+  let matchB =
+    typeof b.matchNumber == 'string' ? parseInt(b.matchNumber) : b.matchNumber;
+  if (matchA < matchB) {
+    return -1;
+  }
+  if (matchA > matchB) {
+    return 1;
+  }
+  return 0;
+}
+
+const chartLabels = [
+  'Auto Coral L1',
+  'Auto Coral L2',
+  'Auto Coral L3',
+  'Auto Coral L4',
+  'Coral L1',
+  'Coral L2',
+  'Coral L3',
+  'Coral L4',
+  'Net',
+  'Net Miss',
+  'Processor',
+  'Processor Miss'
+];
+let currData: any = ref(props.rowData.rawData[selectedMatch.value - 1]);
+
+watch(selectedMatch, () => {
+  currData.value = props.rowData.rawData[selectedMatch.value - 1];
+  chartData.value = [
+    currData.value.auto.coralL1,
+    currData.value.auto.coralL2,
+    currData.value.auto.coralL3,
+    currData.value.auto.coralL4,
+    currData.value.teleop.coralL1,
+    currData.value.teleop.coralL2,
+    currData.value.teleop.coralL3,
+    currData.value.teleop.coralL4,
+    currData.value.teleop.net,
+    currData.value.teleop.netMiss,
+    currData.value.teleop.processor,
+    currData.value.teleop.processorMiss,
+  ];
+  chartTitle.value = 'Match ' + currData.value.matchNumber;
+  sentimentScore = sentiment.analyze(
+    props.rowData.rawData[selectedMatch.value - 1].notes.notes,
+  ).score;
+});
+
+let sentimentScore = sentiment.analyze(
+  props.rowData.rawData[selectedMatch.value - 1].notes.notes,
+).score;
+
+
+let chartData = ref([
+  currData.value.auto.coralL1,
+  currData.value.auto.coralL2,
+  currData.value.auto.coralL3,
+  currData.value.auto.coralL4,
+  currData.value.teleop.coralL1,
+  currData.value.teleop.coralL2,
+  currData.value.teleop.coralL3,
+  currData.value.teleop.coralL4,
+  currData.value.teleop.net,
+  currData.value.teleop.netMiss,
+  currData.value.teleop.processor,
+  currData.value.teleop.processorMiss,
+]);
+let chartTitle = ref('Match ' + currData.value.matchNumber);
+
+let promptedNotesOptions = ['Defense', 'Offense', 'Driver'];
+let promptedNotesDetailedOptions = [
+  ['Defense location', 'Risk of fouls', 'Other'],
+  [
+    'Shooing location(s)',
+    'Ability to avoid defense',
+    'Weakness of cycles',
+    'Other',
+  ],
+  ['Strengths', 'Weaknesses', 'Other'],
+];
+
+console.log(props.rowData.rawData);
+</script>
+
+<template>
+  <UCard>
+    <div class="flex flex-wrap">
+      <div class="flex-auto">
+        <BarChart
+          class="mb-1"
+          :labels="chartLabels"
+          :data="chartData"
+          :chart-title="chartTitle"
+          height="h-80"
+          width="w-80"
+        ></BarChart>
+      </div>
+      <div class="flex-auto whitespace-normal max-h-72 w-72 max-w-72">
+        <div
+          v-if="rowData.rawData[selectedMatch - 1].auto.position != undefined"
+        >
+          <p class="font-extrabold text-sm inline-block">
+            Auto Position: &nbsp;
+          </p>
+          <p class="text-sm inline-block">
+            {{ rowData.rawData[selectedMatch - 1].auto.position }}
+          </p>
+        </div>
+        <p class="font-extrabold text-sm">Auto & Endgame:</p>
+        <div class="pb-1">
+          <UBadge
+            color="sky"
+            variant="subtle"
+            v-if="rowData.rawData[selectedMatch - 1].auto.mobility"
+            class="mr-1.5 mt-2"
+          >Mobility</UBadge
+          >
+          <UBadge
+            color="indigo"
+            variant="subtle"
+            v-for="endgame in rowData.rawData[selectedMatch - 1].endgame
+              .endgame"
+            class="mr-1.5 mt-2"
+          >
+            {{ endgame }}
+          </UBadge>
+        </div>
+        <div class="text-wrap max-w-72 h-2/3 max-h-2/3 overflow-y-scroll">
+          <div
+            v-for="(item, index) in rowData.rawData[selectedMatch - 1].notes
+              .promptedNotes"
+          >
+            <div v-if="item.selected">
+              <div class="pb-1">
+                <span class="font-extrabold mr-2 text-sm">{{
+                    promptedNotesOptions[index] + ':'
+                  }}</span>
+                <UBadge
+                  :color="
+                    item.rating > 3 ? 'green' : item.rating < 3 ? 'red' : 'gray'
+                  "
+                  :variant="
+                    item.rating == 2 || item.rating == 4 ? 'soft' : 'subtle'
+                  "
+                >{{ item.rating }}</UBadge
+                >
+              </div>
+              <div v-for="(text, i) in item.notes">
+                <p
+                  v-if="text != ''"
+                  class="text-xs pb-0 font-semibold underline-offset-2"
+                >
+                  {{ promptedNotesDetailedOptions[index][i] + ':' }}
+                </p>
+                <p v-if="text != ''" class="pb-2.5 text-xs">{{ text }}</p>
+              </div>
+            </div>
+          </div>
+          <span class="font-extrabold text-sm">Other notes: </span>
+          <UBadge
+            :color="
+              sentimentScore > 1
+                ? 'green'
+                : sentimentScore < -1
+                ? 'red'
+                : 'gray'
+            "
+            :variant="
+              sentimentScore < 1 && sentimentScore > -1 ? 'soft' : 'subtle'
+            "
+          >{{ sentimentScore }}</UBadge
+          >
+          <p class="pb-2 text-xs">
+            {{
+              rowData.rawData[selectedMatch - 1].notes.notes == ''
+                ? 'None'
+                : rowData.rawData[selectedMatch - 1].notes.notes
+            }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <UPagination
+        v-model="selectedMatch"
+        :total="rowData.rawData.length"
+        show-last
+        show-first
+        :page-count="1"
+        :max="7"
+        :active-button="{ variant: 'outline' }"
+        :inactive-button="{ color: 'gray' }"
+      />
+    </template>
+  </UCard>
+</template>
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 683a671..f7807a8 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -4,7 +4,7 @@ import PouchDB from 'pouchdb';
 import databases, { type TeamInfo } from '~/utils/databases';
 import OuterComponents from '~/components/website-utils/OuterComponents.vue';
 let syncDisable = ref(false);
-//
+
 async function sync() {
   syncDisable.value = true;
   await PouchDB.sync(
@@ -258,7 +258,7 @@ async function updateTeamData() {
       <div
         class="w-full my-8 text-center font-sans font-bold !text-primary text-5xl"
       >
-        ChocoChips Scouting 🍪<! -- title! -->
+        ChocoChips Scouting
       </div>
       <UCard
         class="mb-8 px-4 pb-4"
@@ -353,10 +353,10 @@ async function updateTeamData() {
             <div class="h-40 overflow-y-auto px-4 rounded-md">
               <div
                 v-for="(event, index) in pastEvents"
-                class="bg-gray-100 rounded-md"
+                class="bg-gray-100 rounded-md dark:bg-gray-800"
               >
                 <div class="my-2 p-2">
-                  <p class="font-medium">{{ event.name }}</p>
+                  <p class="font-medium dark:text-white">{{ event.name }}</p>
                   <UButton
                     class="rounded-full my-0.5"
                     icon="i-heroicons-map-pin-solid"
@@ -373,19 +373,19 @@ async function updateTeamData() {
                   />
                   <div class="flex my-0.5">
                     <UButton
-                      class="rounded-full mx-0.5"
+                      class="rounded-full mx-0.5 dark:hover:bg-primary-950"
                       icon="i-heroicons-calendar-days-solid"
                       variant="outline"
-                      color="gray"
+                      color="primary"
                     />
                     <UButton
                       v-if="typeof event.week === 'number'"
-                      class="rounded-full mx-0.5 mr-1"
+                      class="rounded-full mx-0.5 mr-1 dark:hover:bg-primary-950"
                       :label="'Week ' + (parseInt(event.week) + 1)"
-                      color="gray"
+                      color="primary"
                       variant="outline"
                     />
-                    <p class="my-auto mx-0.5">
+                    <p class="my-auto mx-0.5 dark:text-white">
                       {{
                         months.at(event.start_date.split('-')[1] - 1) +
                         ' ' +
@@ -416,7 +416,7 @@ async function updateTeamData() {
                         class="rounded-full mx-0.5 mr-1"
                         color="primary"
                       />
-                      <p class="my-auto mx-0.5 font-sans">
+                      <p class="my-auto mx-0.5 font-sans dark:text-white">
                         {{ placeify(teamEventData[index].rank) }} Place with a
                         Record of
                         {{
@@ -551,15 +551,13 @@ async function updateTeamData() {
               </div>
             </div>
             <div v-else>
-              <p class="font-medium text-xl text-center">No Events Scheduled</p>
-              <div class="flex-auto">
-                <img
-                  src="/public/sadcookie.png"
-                  height="140"
-                  width="140"
-                  class="mx-auto"
-                />
-              </div>
+              <p class="font-medium text-xl text-center !text-primary">No Events Scheduled</p>
+              <NuxtImg
+                src="/sadcookie.png"
+                class="mx-auto"
+                width="145"
+                height="145"
+              />
             </div>
           </template>
         </UTabs>
diff --git a/pages/teams/[id].vue b/pages/teams/[id].vue
index 8fb618a..2b5d9fc 100644
--- a/pages/teams/[id].vue
+++ b/pages/teams/[id].vue
@@ -1,255 +1,297 @@
 <script setup lang="ts">
-import databases, { type ScoutingData, type TeamInfo } from '~/utils/databases'
-import MatchVisualization from '~/components/24-crescendo/MatchVisualization.vue'
-import IdMeta = PouchDB.Core.IdMeta
-import { eventOptions } from '~/utils/eventOptions'
-import { useWindowSize } from '@vueuse/core'
-import AmpVisualization from '~/components/24-crescendo/AmpVisualization.vue'
-import SpeakerVisualization from '~/components/24-crescendo/SpeakerVisualization.vue'
+import databases, { type ScoutingData, type TeamInfo } from '~/utils/databases';
+import MatchVisualization from '~/components/25-reefscape/MatchVisualization.vue';
+import IdMeta = PouchDB.Core.IdMeta;
+import { eventOptions } from '~/utils/eventOptions';
+import { useWindowSize } from '@vueuse/core';
+import AmpVisualization from '~/components/24-crescendo/AmpVisualization.vue';
+import SpeakerVisualization from '~/components/24-crescendo/SpeakerVisualization.vue';
 
-let { width, height } = useWindowSize()
+let { width, height } = useWindowSize();
 
-const events = eventOptions.map((event) => event.replace(/[0-9]/g, ''))
-let currentEvent = ref(eventOptions[0])
-if (typeof window !== 'undefined') currentEvent.value = localStorage.getItem('currentEvent') || eventOptions[0]
+const events = eventOptions.map(event => event.replace(/[0-9]/g, ''));
+let currentEvent = ref(eventOptions[0]);
+if (typeof window !== 'undefined')
+  currentEvent.value = localStorage.getItem('currentEvent') || eventOptions[0];
 
-const { scoutingData } = databases.locals
-let db = scoutingData
+const { scoutingData } = databases.locals;
+let db = scoutingData;
 
-const route = useRoute()
+const route = useRoute();
 
-const matches = (await db.allDocs()).rows
+const matches = (await db.allDocs()).rows;
 let match = matches.map(async (doc): Promise<ScoutingData & IdMeta> => {
-    return await db.get(doc.id)
-})
+  return await db.get(doc.id);
+});
 
-let teamOrgMatches = new Map<number, Array<ScoutingData & IdMeta>>()
-let extraNotes = new Map<number, Array<string>>()
+let teamOrgMatches = new Map<number, Array<ScoutingData & IdMeta>>();
+let extraNotes = new Map<number, Array<string>>();
 
 for (let i = 0; i < match.length; i++) {
-    let currentMatch = await match[i]
-    if (currentMatch.matchNumber != -1) {
-        let team =
-            typeof currentMatch.teamNumber == 'string' ? parseInt(currentMatch.teamNumber) : currentMatch.teamNumber
-        if (!teamOrgMatches.has(team)) {
-            teamOrgMatches.set(team, [currentMatch])
-        } else {
-            let arr: Array<ScoutingData & IdMeta> = teamOrgMatches.get(team)!
-            arr.push(currentMatch)
-            teamOrgMatches.set(team, arr)
-        }
-    } else if (currentMatch.notes.notes != undefined) {
-        let team =
-            typeof currentMatch.teamNumber == 'string' ? parseInt(currentMatch.teamNumber) : currentMatch.teamNumber
-        if (!extraNotes.has(team)) {
-            extraNotes.set(team, [currentMatch.notes.notes])
-        } else {
-            let arr: Array<string> = extraNotes.get(team)!
-            arr.push(currentMatch.notes.notes)
-            extraNotes.set(team, arr)
-        }
+  let currentMatch = await match[i];
+  if (currentMatch.matchNumber != -1) {
+    let team =
+      typeof currentMatch.teamNumber == 'string'
+        ? parseInt(currentMatch.teamNumber)
+        : currentMatch.teamNumber;
+    if (!teamOrgMatches.has(team)) {
+      teamOrgMatches.set(team, [currentMatch]);
+    } else {
+      let arr: Array<ScoutingData & IdMeta> = teamOrgMatches.get(team)!;
+      arr.push(currentMatch);
+      teamOrgMatches.set(team, arr);
+    }
+  } else if (currentMatch.notes.notes != undefined) {
+    let team =
+      typeof currentMatch.teamNumber == 'string'
+        ? parseInt(currentMatch.teamNumber)
+        : currentMatch.teamNumber;
+    if (!extraNotes.has(team)) {
+      extraNotes.set(team, [currentMatch.notes.notes]);
+    } else {
+      let arr: Array<string> = extraNotes.get(team)!;
+      arr.push(currentMatch.notes.notes);
+      extraNotes.set(team, arr);
     }
+  }
 }
 
-let teamData = ref<{ teamNum: number; teamName: string; rawData: any; penaltyScore: number }>({
-    teamNum: 0,
-    teamName: '',
-    rawData: null,
-    penaltyScore: 0,
-})
-let teamOptions = ref<Array<number>>([])
-let filterTeam = ref(route.params.id)
+let teamData = ref<{
+  teamNum: number;
+  teamName: string;
+  rawData: any;
+  penaltyScore: number;
+}>({
+  teamNum: 0,
+  teamName: '',
+  rawData: null,
+  penaltyScore: 0,
+});
+let teamOptions = ref<Array<string>>([]);
+let filterTeam = ref(route.params.id);
 
 function setup() {
-    teamOptions.value = []
-    for (let [key, value] of teamOrgMatches) {
-        if (typeof key == 'string') key = parseInt(key)
-        let filteredValue: (ScoutingData & IdMeta)[] = []
-        for (let match of value) {
-            if (match.event == currentEvent.value) {
-                if (!teamOptions.value.includes(key)) {
-                    teamOptions.value.push(key)
-                }
-                filteredValue.push(match)
-            }
-        }
-        if (String(key) == filterTeam.value) {
-            teamData.value = {
-                teamNum: key,
-                rawData: filteredValue,
-                teamName: '',
-                penaltyScore: 0,
-            }
+  teamOptions.value = [];
+  for (let [key, value] of teamOrgMatches) {
+    if (typeof key == 'string') key = parseInt(key);
+    let filteredValue: (ScoutingData & IdMeta)[] = [];
+    for (let match of value) {
+      if (match.event == currentEvent.value) {
+        if (!teamOptions.value.includes(key.toString())) {
+          teamOptions.value.push(key.toString());
         }
+        filteredValue.push(match);
+      }
+    }
+    if (String(key) == filterTeam.value) {
+      teamData.value = {
+        teamNum: key,
+        rawData: filteredValue,
+        teamName: '',
+        penaltyScore: 0,
+      };
     }
-    teamOptions.value.sort()
-    findTeamName()
+  }
+  //TODO, given changes to teamOptions array, this may now need a sort function that uses parseInt to sort
+  teamOptions.value.sort();
+  findTeamName();
 }
-setup()
+setup();
 
 async function findTeamName() {
-    let { teamInfo: db } = databases.locals
-    //gets all the teamsData docs from the database and adds them to one array
-    let dbTeams = (await db.allDocs()).rows.map(async (doc): Promise<TeamInfo> => {
-        return db.get(doc.id)
-    })
-    Promise.all(dbTeams).then((teams: Array<TeamInfo>) => {
-        teams.forEach((team) => {
-            if (team.teamNum == teamData.value.teamNum) {
-                teamData.value.teamName = team.teamName
-            }
-        })
-    })
+  let { teamInfo: db } = databases.locals;
+  //gets all the teamsData docs from the database and adds them to one array
+  let dbTeams = (await db.allDocs()).rows.map(
+    async (doc): Promise<TeamInfo> => {
+      return db.get(doc.id);
+    },
+  );
+  Promise.all(dbTeams).then((teams: Array<TeamInfo>) => {
+    teams.forEach(team => {
+      if (team.teamNum == teamData.value.teamNum) {
+        teamData.value.teamName = team.teamName;
+      }
+    });
+  });
 }
 
-const { data: tbaMatchData, pending: tbaPending } = useLazyFetch<Array<any>>('/api/eventMatches/' + currentEvent.value)
+const { data: tbaMatchData, pending: tbaPending } = useLazyFetch<Array<any>>(
+  '/api/eventMatches/' + currentEvent.value,
+);
 function getTeamPenaltyCount() {
-    if (!tbaPending.value && tbaMatchData.value != null) {
-        let teamsMap = new Map()
-        for (let match of tbaMatchData.value) {
-            if (match.comp_level == 'qm') {
-                for (let team of match.alliances.red.team_keys) {
-                    let teamNum = parseInt(team.substring(3))
-                    if (teamsMap.has(teamNum)) {
-                        let increasedValues = [
-                            teamsMap.get(teamNum)[0] +
-                                (match.score_breakdown.red.foulCount + match.score_breakdown.red.techFoulCount) / 3,
-                            teamsMap.get(teamNum)[1] + 1,
-                        ]
-                        teamsMap.set(teamNum, increasedValues)
-                    } else {
-                        teamsMap.set(teamNum, [
-                            (match.score_breakdown.red.foulCount + match.score_breakdown.red.techFoulCount) / 3,
-                            1,
-                        ])
-                    }
-                }
-                for (let team of match.alliances.blue.team_keys) {
-                    let teamNum = parseInt(team.substring(3))
-                    if (teamsMap.has(teamNum)) {
-                        let increasedValues = [
-                            teamsMap.get(teamNum)[0] +
-                                (match.score_breakdown.blue.foulCount + match.score_breakdown.blue.techFoulCount) / 3,
-                            teamsMap.get(teamNum)[1] + 1,
-                        ]
-                        teamsMap.set(teamNum, increasedValues)
-                    } else {
-                        teamsMap.set(teamNum, [
-                            (match.score_breakdown.blue.foulCount + match.score_breakdown.blue.techFoulCount) / 3,
-                            1,
-                        ])
-                    }
-                }
-            }
+  if (!tbaPending.value && tbaMatchData.value != null) {
+    let teamsMap = new Map();
+    for (let match of tbaMatchData.value) {
+      if (match.comp_level == 'qm') {
+        for (let team of match.alliances.red.team_keys) {
+          let teamNum = parseInt(team.substring(3));
+          if (teamsMap.has(teamNum)) {
+            let increasedValues = [
+              teamsMap.get(teamNum)[0] +
+                (match.score_breakdown.red.foulCount +
+                  match.score_breakdown.red.techFoulCount) /
+                  3,
+              teamsMap.get(teamNum)[1] + 1,
+            ];
+            teamsMap.set(teamNum, increasedValues);
+          } else {
+            teamsMap.set(teamNum, [
+              (match.score_breakdown.red.foulCount +
+                match.score_breakdown.red.techFoulCount) /
+                3,
+              1,
+            ]);
+          }
         }
-        return teamsMap
+        for (let team of match.alliances.blue.team_keys) {
+          let teamNum = parseInt(team.substring(3));
+          if (teamsMap.has(teamNum)) {
+            let increasedValues = [
+              teamsMap.get(teamNum)[0] +
+                (match.score_breakdown.blue.foulCount +
+                  match.score_breakdown.blue.techFoulCount) /
+                  3,
+              teamsMap.get(teamNum)[1] + 1,
+            ];
+            teamsMap.set(teamNum, increasedValues);
+          } else {
+            teamsMap.set(teamNum, [
+              (match.score_breakdown.blue.foulCount +
+                match.score_breakdown.blue.techFoulCount) /
+                3,
+              1,
+            ]);
+          }
+        }
+      }
     }
-    return new Map()
+    return teamsMap;
+  }
+  return new Map();
 }
 
-let upperQuarterCutoff = ref(1)
-
-watch(tbaPending, (value) => {
-    if (!value) {
-        let map = getTeamPenaltyCount()
-        let valuesArr = Array.from(map.values())
-        let percentile = 0.75
-        let calculatedValuesArr = valuesArr.map((value: Array<number>) => {
-            return value[0] / value[1] || 0
-        })
-        calculatedValuesArr.sort()
-        upperQuarterCutoff.value = calculatedValuesArr[Math.floor(valuesArr.length * percentile)]
-        let teamNum = filterTeam.value + ''
-        if (map.has(parseInt(teamNum))) {
-            let mapValues = map.get(parseInt(teamNum))
-            teamData.value.penaltyScore = mapValues[0] / mapValues[1] || 0
-        }
+let upperQuarterCutoff = ref(1);
+
+watch(tbaPending, value => {
+  if (!value) {
+    let map = getTeamPenaltyCount();
+    let valuesArr = Array.from(map.values());
+    let percentile = 0.75;
+    let calculatedValuesArr = valuesArr.map((value: Array<number>) => {
+      return value[0] / value[1] || 0;
+    });
+    calculatedValuesArr.sort();
+    upperQuarterCutoff.value =
+      calculatedValuesArr[Math.floor(valuesArr.length * percentile)];
+    let teamNum = filterTeam.value + '';
+    if (map.has(parseInt(teamNum))) {
+      let mapValues = map.get(parseInt(teamNum));
+      teamData.value.penaltyScore = mapValues[0] / mapValues[1] || 0;
     }
-})
+  }
+});
 
-watch(currentEvent, (value) => {
-    setup()
-    try {
-        localStorage.setItem('currentEvent', value)
-    } catch {}
-})
+watch(currentEvent, value => {
+  setup();
+  try {
+    localStorage.setItem('currentEvent', value);
+  } catch {}
+});
 
 async function goBack() {
-    navigateTo('/teams/')
+  navigateTo('/teams/');
 }
 
-let margin = ref(width.value > 800 ? 'ml-2' : '')
+let margin = ref(width.value > 800 ? 'ml-2' : '');
 watch(width, () => {
-    margin.value = width.value > 800 ? 'ml-2' : 'mt-4'
-})
+  margin.value = width.value > 800 ? 'ml-2' : 'mt-4';
+});
 </script>
 
 <template>
-    <UCard class="w-full h-full">
-        <template #header>
-            <UButton
-                class="absolute left-2 top-2"
-                variant="ghost"
-                size="xl"
-                icon="i-heroicons-arrow-left"
-                @click="goBack"
-            />
-            <div class="text-center justify-center">
-                <UTooltip :text="'Avg Penalties: ' + teamData.penaltyScore.toFixed(2)" :popper="{ offsetDistance: -2 }">
-                    <div>
-                        <svg
-                            v-if="teamData.penaltyScore > upperQuarterCutoff"
-                            class="mb-2 mr-1 inline-block stroke-rose-500 fill-rose-200 w-6 h-6"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                fill-rule="evenodd"
-                                d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
-                                clip-rule="evenodd"
-                            />
-                        </svg>
-                        <h1 class="inline-block font-extrabold text-2xl mb-2">
-                            {{
-                                teamData.teamName != ''
-                                    ? teamData.teamNum + ' - ' + teamData.teamName
-                                    : teamData.teamNum
-                            }}
-                        </h1>
-                    </div>
-                </UTooltip>
-                <div class="mx-auto flex justify-center align-center">
-                    <UInputMenu
-                        v-model="filterTeam"
-                        :options[]="teamOptions"
-                        @change="navigateTo('/teams/' + filterTeam)"
-                        class="max-w-36 w-36 flex-auto h-8"
-                        placeholder="Select a team"
-                    />
-                    <USelectMenu
-                        v-model="currentEvent"
-                        :options="eventOptions"
-                        class="max-w-36 w-36 flex-auto h-8 ml-3"
-                    />
-                </div>
-            </div>
-        </template>
-
-        <div class="flex flex-wrap" v-if="teamData.rawData.length > 0">
-            <div class="flex-auto h-1/3 mr-2">
-                <MatchVisualization :row-data="teamData"></MatchVisualization>
-            </div>
-            <div :class="'flex-auto h-min max-h-min flex-wrap ' + margin">
-                <AmpVisualization :row-data="teamData"></AmpVisualization>
-                <SpeakerVisualization class="mt-4" :row-data="teamData"></SpeakerVisualization>
-            </div>
-        </div>
-        <div v-else class="opacity-50">
-            <img src="/public/sadcookie.png" height="400" width="400" class="mx-auto"/>
-            <h1 class="font-sans text-xl font-bold text-center">
-                Looks like there is no data on team {{ teamData.teamNum }} at {{ currentEvent }} :(
+  <UCard class="w-full h-full">
+    <template #header>
+      <UButton
+        class="absolute left-2 top-2"
+        variant="ghost"
+        size="xl"
+        icon="i-heroicons-arrow-left"
+        @click="goBack"
+      />
+      <div class="text-center justify-center">
+        <UTooltip
+          :text="'Avg Penalties: ' + teamData.penaltyScore.toFixed(2)"
+          :popper="{ offsetDistance: -2 }"
+        >
+          <div>
+            <svg
+              v-if="teamData.penaltyScore > upperQuarterCutoff"
+              class="mb-2 mr-1 inline-block stroke-rose-500 fill-rose-200 w-6 h-6"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            <h1 class="inline-block font-extrabold text-2xl mb-2">
+              {{
+                teamData.teamName != ''
+                  ? teamData.teamNum + ' - ' + teamData.teamName
+                  : teamData.teamNum
+              }}
             </h1>
+          </div>
+        </UTooltip>
+        <div class="mx-auto flex justify-center align-center">
+          <UInputMenu
+            v-model="filterTeam"
+            :options="teamOptions"
+            @change="navigateTo('/teams/' + filterTeam)"
+            class="max-w-36 w-36 flex-auto h-8"
+            placeholder="Select a team"
+          />
+          <USelectMenu
+            v-model="currentEvent"
+            :options="eventOptions"
+            class="max-w-36 w-36 flex-auto h-8 ml-3"
+          />
         </div>
-    </UCard>
+      </div>
+    </template>
+
+    <div
+      class="flex flex-wrap"
+      v-if="teamData.rawData.length > 0"
+    >
+      <div class="flex-auto h-1/3 mr-2">
+        <MatchVisualization :row-data="teamData"></MatchVisualization>
+      </div>
+      <div :class="'flex-auto h-min max-h-min flex-wrap ' + margin">
+        <!--        <AmpVisualization :row-data="teamData"></AmpVisualization>-->
+        <!--        <SpeakerVisualization-->
+        <!--          class="mt-4"-->
+        <!--          :row-data="teamData"-->
+        <!--        ></SpeakerVisualization>-->
+      </div>
+    </div>
+    <div
+      v-else
+      class="opacity-50"
+    >
+      <img
+        src="/public/sadcookie.png"
+        height="400"
+        width="400"
+        class="mx-auto"
+      />
+      <h1 class="font-sans text-xl font-bold text-center">
+        Looks like there is no data on team {{ teamData.teamNum }} at
+        {{ currentEvent }} :(
+      </h1>
+    </div>
+  </UCard>
 </template>
 
 <style scoped></style>