diff --git a/ui/src/components/display-card.tsx b/ui/src/components/display-card.tsx
index 8ecd72b..229625b 100644
--- a/ui/src/components/display-card.tsx
+++ b/ui/src/components/display-card.tsx
@@ -21,7 +21,7 @@ import { isLive, timeUntilGame } from '~/lib/utils.ts';
 const logos = import.meta.glob('../assets/teams/*.svg', { eager: true });
 
 const getLogo = (team: string) => {
-  let strIndex = `../assets/teams/${team}.svg`
+  let strIndex = `../assets/teams/${team}.svg`;
   // @ts-ignore
   return logos[strIndex].default;
 };
@@ -43,7 +43,6 @@ const formattedTimeForUser = (time: number): string => {
 };
 
 
-
 const getColorFromStatusAndOutcome = (
   status: string,
   winner: boolean,
@@ -57,7 +56,7 @@ const getColorFromStatusAndOutcome = (
   } else {
     return 'bg-yellow-600';
   }
-}
+};
 
 
 const winningTeam = (game: GameWithPrediction): number => {
@@ -78,7 +77,7 @@ interface ITeamProps {
 interface ITeamInfoProps {
   team: Team;
   winner: number;
-  prediction?: Prediction
+  prediction?: Prediction;
   game: GameWithPrediction;
 }
 
@@ -92,15 +91,18 @@ export const ScoreTable: Component<ITeamProps> = (props: ITeamProps) => {
   };
 
   return (
-    <Table class="mt-2">
-      <TableHeader class="bg-shark-700 text-shark-300">
+    <Table class='mt-2'>
+      <TableHeader class='bg-shark-700 text-shark-300'>
         <TableRow>
-          <For each={props.team.score.periods}>{(period, _) => <TableHead class="text-center text-shark-300">{formatPeriodType(period)}</TableHead>}</For>
+          <For each={props.team.score.periods}>{(period, _) => <TableHead
+            class='text-center text-shark-300'>{formatPeriodType(period)}</TableHead>}</For>
         </TableRow>
       </TableHeader>
-      <TableBody class="bg-shark-600">
+      <TableBody class='bg-shark-600'>
         <TableRow>
-          <For each={props.team.score.periods}>{(period, _) => <TableCell class="text-center">{period.score}</TableCell>}</For>
+          <For each={props.team.score.periods}>{(period, _) => <TableCell
+            class='text-center'>{period.score === null || period.score === 0 ? '-' : period.score
+          }</TableCell>}</For>
         </TableRow>
       </TableBody>
     </Table>
@@ -109,36 +111,37 @@ export const ScoreTable: Component<ITeamProps> = (props: ITeamProps) => {
 
 export const KeyPlayer: Component<ITeamProps> = (props: ITeamProps) => {
   return (
-    <div class="bg-shark-700 p-4 rounded mt-4">
-      <h4 class="font-semibold">Key Player - {props.team.name}</h4>
+    <div class='bg-shark-700 p-4 rounded mt-4'>
+      <h4 class='font-semibold'>Key Player - {props.team.name}</h4>
       <p>{props.team.leader.name}</p>
-      <p class="text-sm text-gray-200">Points: {props.team.leader.points}</p>
-      <p class="text-sm text-gray-200">Rebounds: {props.team.leader.rebounds}</p>
-      <p class="text-sm text-gray-200">Assists: {props.team.leader.assists}</p>
+      <p class='text-sm text-gray-200'>Points: {props.team.leader.points}</p>
+      <p class='text-sm text-gray-200'>Rebounds: {props.team.leader.rebounds}</p>
+      <p class='text-sm text-gray-200'>Assists: {props.team.leader.assists}</p>
     </div>
   );
 };
 
 export const TeamInfo: Component<ITeamInfoProps> = (props: ITeamInfoProps) => {
   return (
-    <div class="flex flex-col items-center">
-      <Avatar class="h-14 w-14">
+    <div class='flex flex-col items-center'>
+      <Avatar class='h-14 w-14'>
         <AvatarImage
           alt={`${props.team.name}'s logo`}
           src={getLogo(props.team.abbreviation.toLowerCase())}
         />
       </Avatar>
-      <CardTitle class="text-lg font-bold text-center">{`${props.team.city} ${props.team.name}`}</CardTitle>
-      <CardDescription class="text-sm text-center flex flex-col items-center">
+      <CardTitle class='text-lg font-bold text-center'>{`${props.team.city} ${props.team.name}`}</CardTitle>
+      <CardDescription class='text-sm text-center flex flex-col items-center'>
         <span>{`${props.team.wins} - ${props.team.losses}`}</span>
-        <span class="flex flex-row items-center mt-1">
+        <span class='flex flex-row items-center mt-1'>
           <Show when={props.winner === props.team.id}>
-            <Badge class="bg-yellow-600 text-black">Winner</Badge>
+            <Badge class='bg-yellow-600 text-black'>Winner</Badge>
           </Show>
-          <Show when={props.prediction && props.prediction.prediction_type === "win-loss" && props.prediction.prediction === `${props.team.city} ${props.team.name}`}>
+          <Show
+            when={props.prediction && props.prediction.prediction_type === 'win-loss' && props.prediction.prediction === `${props.team.city} ${props.team.name}`}>
             <Badge class={`ml-2 ${getColorFromStatusAndOutcome(
               props.game.status,
-              props.winner === props.team.id
+              props.winner === props.team.id,
             )} text-white`}>Projected Winner</Badge>
           </Show>
         </span>
@@ -155,8 +158,8 @@ export const AdvancedGameCard: Component<ITeamProps> = (props: ITeamProps) => {
         <ScoreTable team={props.team} />
       </div>
     </div>
-  )
-}
+  );
+};
 
 export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
   const [injuryReportOpen, setInjuryReportOpen] = createSignal(false);
@@ -166,28 +169,31 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
         class='w-full max-w-4xl mx-auto bg-shark-900 rounded-lg shadow-md overflow-hidden p-4 text-white border-4 border-shark-700'>
         <CardHeader>
           <div class='flex flex-row items-center justify-between'>
-            <TeamInfo team={props.game.home_team} winner={winningTeam(props.game)} prediction={props.game.prediction} game={props.game} />
-            <span class="uppercase leading-3 font-boldtext-sm text-shark-400">vs</span>
-            <TeamInfo team={props.game.away_team} winner={winningTeam(props.game)} prediction={props.game.prediction} game={props.game} />
+            <TeamInfo team={props.game.home_team} winner={winningTeam(props.game)} prediction={props.game.prediction}
+                      game={props.game} />
+            <span class='uppercase leading-3 font-boldtext-sm text-shark-400'>vs</span>
+            <TeamInfo team={props.game.away_team} winner={winningTeam(props.game)} prediction={props.game.prediction}
+                      game={props.game} />
           </div>
         </CardHeader>
-        <CardContent class="">
-          <div class="flex justify-evenly mt-4 items-center pb-4">
+        <CardContent class=''>
+          <div class='flex justify-evenly mt-4 items-center pb-4'>
             <Show when={props.game.location}>
-              <div class="flex items-center text-sm">
-                <IoLocationOutline class="mr-1 h-4 w-4 inline-block" />
-                <span class="ml-2">{`${props.game.location.name}, ${props.game.location.city}, ${props.game.location.state}`}</span>
+              <div class='flex items-center text-sm'>
+                <IoLocationOutline class='mr-1 h-4 w-4 inline-block' />
+                <span
+                  class='ml-2'>{`${props.game.location.name}, ${props.game.location.city}, ${props.game.location.state}`}</span>
               </div>
             </Show>
             <Show when={!isLive(props.game)}>
-              <div class="flex items-center justify-center text-sm">
-                <FiClock class="mr-1 h-4 w-4 inline-block" />
-                <span class="ml-2">
+              <div class='flex items-center justify-center text-sm'>
+                <FiClock class='mr-1 h-4 w-4 inline-block' />
+                <span class='ml-2'>
                   <Show when={props.game.status === 'PPD'}>
-                    <p class="text-xs text-gray-400">Postponed</p>
+                    <p class='text-xs text-gray-400'>Postponed</p>
                   </Show>
 
-                  <span class={`${props.game.status === 'PPD' ? 'line-through': ''} `}>
+                  <span class={`${props.game.status === 'PPD' ? 'line-through' : ''} `}>
                     {formattedTimeForUser(props.game.start_time_unix)}
                   </span>
 
@@ -200,7 +206,7 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
               </div>
             </Show>
           </div>
-          <div class="grid grid-cols-2 gap-4">
+          <div class='grid grid-cols-2 gap-4'>
             <For each={[props.game.home_team, props.game.away_team]}>
               {(team, _) => (
                 <Show when={team.leader !== null && isLive(props.game)}>
@@ -209,22 +215,29 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
               )}
             </For>
             <Show when={isLive(props.game)}>
-              <div class="col-span-2" id={`${props.game.id}-live-score`}>
-                <div class="text-center bg-shark-800 p-4 rounded-lg">
-                  <div class="flex items-center justify-center mb-2">
+              <div class='col-span-2' id={`${props.game.id}-live-score`}>
+                <div class='text-center bg-shark-800 p-4 rounded-lg'>
+                  <div class='flex items-center justify-center mb-2'>
                     <Show when={!props.game.status.toLowerCase().includes('final')}>
-                      <span class="text-red-500 animate-pulse mr-2">
+                      <span class='text-red-500 animate-pulse mr-2'>
                         <OcDotfill3 />
                       </span>
-                      <span class="text-white font-bold">Live</span>
+                      <span class='text-white font-bold'>Live</span>
                     </Show>
                   </div>
-                  <p class="text-2xl text-white font-bold mb-2">
-                    {`${props.game.home_team.name}: ${props.game.home_team.score.points}`}
-                    <span class={'text-sm text-gray-400 mx-3'}> - </span>
-                    {`${props.game.away_team.name}: ${props.game.away_team.score.points}`}
-                  </p>
-                  <p class="text-sm text-gray-400">{props.game.status.includes('ET') ? 'Starting soon!' : props.game.status}</p>
+                  <div class='flex justify-center items-center text-2xl font-bold mb-2'>
+                    <div class='text-center'>
+                      <p class='text-white'>{props.game.home_team.name}</p>
+                      <p class='text-white bg-shark-700 py-2 px-4 rounded'>{props.game.home_team.score.points}</p>
+                    </div>
+                    <span class='text-sm text-gray-400 mt-6 mx-3'> - </span>
+                    <div class='text-center'>
+                      <p class='text-white'>{props.game.away_team.name}</p>
+                      <p class='text-white bg-shark-700 py-2 px-4 rounded'>{props.game.away_team.score.points}</p>
+                    </div>
+                  </div>
+                  <p
+                    class='text-sm text-gray-400'>{props.game.status.includes('ET') ? 'Starting soon!' : props.game.status}</p>
                 </div>
               </div>
               <For each={[props.game.home_team, props.game.away_team]}>
@@ -235,36 +248,35 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
             </Show>
           </div>
         </CardContent>
-        <CardFooter class="flex justify-center mt-4">
+        <CardFooter class='flex justify-center mt-4'>
           <Show when={[props.game.home_team, props.game.away_team].every((team) => team.injuries.length > 0)}>
-            <Button class="bg-yellow-300 text-yellow-800" variant="default" onClick={() => (setInjuryReportOpen(true))}>
+            <Button class='bg-shark-700 text-white' variant='default' onClick={() => (setInjuryReportOpen(true))}>
               View Injury Report
               <AlertDialog
                 open={injuryReportOpen()}
                 onOpenChange={setInjuryReportOpen}
                 preventScroll={true}
-
               >
                 <AlertDialogContent>
                   <AlertDialogTitle>Injury Report</AlertDialogTitle>
                   <AlertDialogDescription>
-                    <Table class="mt-2">
-                      <TableHeader class="text-white">
+                    <Table class='mt-2'>
+                      <TableHeader class='text-white'>
                         <TableRow>
-                          <TableHead class="text-center text-white ">Team</TableHead>
-                          <TableHead class="text-center text-white">Player</TableHead>
-                          <TableHead class="text-center text-white">Status</TableHead>
+                          <TableHead class='text-center text-white '>Team</TableHead>
+                          <TableHead class='text-center text-white'>Player</TableHead>
+                          <TableHead class='text-center text-white'>Status</TableHead>
                         </TableRow>
                       </TableHeader>
-                      <TableBody class="">
+                      <TableBody class=''>
                         <For each={[props.game.home_team, props.game.away_team]}>
                           {(team, _) => (
                             <For each={team.injuries}>
                               {(injury, _) => (
                                 <TableRow>
-                                  <TableCell class="text-center">{team.name}</TableCell>
-                                  <TableCell class="text-center">{injury.player}</TableCell>
-                                  <TableCell class="text-center">{injury.status}</TableCell>
+                                  <TableCell class='text-center'>{team.name}</TableCell>
+                                  <TableCell class='text-center'>{injury.player}</TableCell>
+                                  <TableCell class='text-center'>{injury.status}</TableCell>
                                 </TableRow>
                               )}
                             </For>
@@ -275,7 +287,6 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
                   </AlertDialogDescription>
                 </AlertDialogContent>
               </AlertDialog>
-              View Injury Report (dont click lol it wont stop popping up)
             </Button>
           </Show>
         </CardFooter>
diff --git a/ui/src/pages/Games.tsx b/ui/src/pages/Games.tsx
index caeb9e3..39c9b94 100644
--- a/ui/src/pages/Games.tsx
+++ b/ui/src/pages/Games.tsx
@@ -126,10 +126,10 @@ export const Games = () => {
             await fetchPredictions(e);
           }}
           value={selectedModel()}
-          itemComponent={(props) => <SelectItem class={'text-white bg-transparent hover:bg-shark-900'} item={props.item}>{props.item.rawValue}</SelectItem>} >
-          <SelectTrigger aria-label="models" class="w-[180px] bg-shark-950 text-white">
-            <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
-          </SelectTrigger>
+          itemComponent={(props) => <SelectItem class={'text-white bg-transparent border-shark-700 hover:bg-shark-900'} item={props.item}>{props.item.rawValue}</SelectItem>} >
+           <SelectTrigger aria-label="models" class="w-[180px] bg-shark-950 text-white border-2 border-shark-700">
+             <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
+           </SelectTrigger>
           <SelectContent class="bg-shark-950" />
         </Select>
           </div>