diff --git a/README.md b/README.md
index 9f9525a..8592bc6 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 # Trivia-Client
-
+<!-- v should not be a header, include a sentence describing how they are supposed to work together " to be used with / consume  x ". I almost missed it because of its size ironically -->
 # <a href="https://github.com/infinitelyann/Trivia-API">Trivia Back-End</a>
 
 ### Team Roles:
@@ -11,7 +11,7 @@
 ### Back-End: <a href="https://github.com/zyaffee">Zack Yaffee</a>
 
 ### Full-Stack: <a href="https://github.com/harrisimon">Harrison Simon,</a> Stephanie Parker
-
+<!-- Steph should be linked here as well  -->
 <hr>
 
 ## Technologies Used
@@ -52,7 +52,7 @@
 <hr>
 
 ## WireFrames
-
+<!-- alt text wireframe is less helpful when we have multiple - try and be slightly more descriptive  -->
 ![Wireframe](/images/image3.png)
 ![Wireframe](/images/image2.png)
 ![Wireframe](/images/image1.png)
diff --git a/src/App.js b/src/App.js
index 2592b7d..befb977 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,16 +13,16 @@ import SignIn from "./components/auth/SignIn";
 import SignOut from "./components/auth/SignOut";
 import ChangePassword from "./components/auth/ChangePassword";
 import Timer from "./components/Timer";
-import QuestionCreate from "./components/QuestionCreate";
+import QuestionCreate from "./components/QuestionCreate"; // unused import
 import PlayerLanding from "./components/PlayerLanding";
 import GameCreate from "./components/GameCreate";
 import UserGameIndex from "./components/UserGameIndex";
 import UserGameShow from "./components/UserGameShow";
 import { getOpenDBUrl } from "./utils/openDB";
-import GameInputs from "./components/trivia-api/GameInputs";
+import GameInputs from "./components/trivia-api/GameInputs"; // unused import
 import GamePlay from "./components/trivia-api/GamePlay";
 import Leaderboard from "./components/Leaderboard";
-import UserGamePlay from "./components/UserGamePlay";
+import UserGamePlay from "./components/UserGamePlay"; // unused import
 import Result from "./components/Result";
 import GameTitleEdit from "./components/GameTitleEdit";
 
@@ -37,7 +37,7 @@ const App = () => {
 
 
   const handleClick = async () => {
-
+  // inconsistent white space 
 
     if (filterOptions === {}) return;
     setIsLoading(true);
@@ -85,7 +85,7 @@ const App = () => {
   return (
     <Fragment >
       <Header user={user} />
-      <Routes>
+      <Routes>{/* change your grouping here and stay organized, follow 1 style, be consistent */}
         <Route path='/result' element={<Result userID={userID} msgAlert={msgAlert} />} />
         <Route path='/leaderboard' element={<Leaderboard msgAlert={msgAlert} />} />
         <Route path='/' element={<Home msgAlert={msgAlert} user={user} />} />
@@ -100,7 +100,7 @@ const App = () => {
         <Route
           path='/'
         />
-
+{/* // inconsistent white space  */}
         <Route
           path='/sign-out'
           element={
@@ -121,18 +121,18 @@ const App = () => {
           element={
             <Timer />
           }
-
+// inconsistent white space 
 
 
         />
-        {/* <Route
+        {/* <Route remove zombie code
 		  	path='/create-question'
 			element={
 				<QuestionCreate user={user}/>
 			}
 			/> */}
-
-        <Route path="/homepage" element={<PlayerLanding />} />
+{/* duplicate path components !?  remove one with double quotes, BE consistent */}
+        <Route path="/homepage" element={<PlayerLanding />} /> 
 
         <Route
           path='/homepage'
@@ -140,7 +140,7 @@ const App = () => {
             <PlayerLanding />
           }
         />
-
+{/* // inconsistent white space  */}
 
         <Route
           path='/games/:id'
@@ -154,7 +154,7 @@ const App = () => {
             <GameTitleEdit msgAlert={msgAlert} user= {user}/>
           }
           />
-
+{/* // inconsistent white space  */}
         <Route
           path='/game'
           element={
@@ -162,7 +162,7 @@ const App = () => {
             />
           }
         />
-
+{/* // inconsistent white space  */}
         <Route
           path="/create-game"
           element={
@@ -171,7 +171,7 @@ const App = () => {
             </RequireAuth>
           }
         />
-
+{/* // inconsistent white space  */}
         <Route
           path="/user-created-games"
           element={
@@ -181,7 +181,7 @@ const App = () => {
           }
         />
       </Routes>
-
+{/* // inconsistent white space  */}
       {msgAlerts.map((msgAlert) => (
         <AutoDismissAlert
           key={msgAlert.id}
@@ -193,7 +193,7 @@ const App = () => {
         />
       ))}
     </Fragment>
-  );
-};
+  ); // ; ?
+}; // ; ?
 
 export default App;
diff --git a/src/api/leaderboard.js b/src/api/leaderboard.js
index 6270354..491e605 100644
--- a/src/api/leaderboard.js
+++ b/src/api/leaderboard.js
@@ -1,6 +1,6 @@
 import apiUrl from '../apiConfig'
 import axios from 'axios'
-
+// consider renaming, get in function name for a post request is counter intuitive 
 export const getLeaderboard = (category) => {
     return axios({
         method: 'POST',
diff --git a/src/api/question.js b/src/api/question.js
index 54ce33a..16944b0 100644
--- a/src/api/question.js
+++ b/src/api/question.js
@@ -19,11 +19,11 @@ export const createQuestion = (user, gameId, data) => {
 }
 
 // this is the api call to update a question
-export const updateQuestion = (user, gameId, updatedQuestion) => {
+export const updateQuestion = (user, gameId, updatedQuestion) => { // unused variable 
     return axios({
         method:'PATCH',
         url: `${apiUrl}/questions/${gameId}/${updatedQuestion._id}`,
-
+// inconsistent white space 
         data: { question: updatedQuestion}
     })
 }
@@ -33,6 +33,6 @@ export const deleteQuestion = ( gameId, questionId) => {
     return axios({
         method: 'DELETE',
         url: `${apiUrl}/questions/${gameId}/${questionId}`,
-
+// inconsistent white space 
     })
 }
\ No newline at end of file
diff --git a/src/components/Categories.js b/src/components/Categories.js
index e5b0fa4..3beaf61 100644
--- a/src/components/Categories.js
+++ b/src/components/Categories.js
@@ -1,4 +1,4 @@
-export const categories = [
+export const categories = [ // not a component, this should go in the lib
     "Any",
     "General Knowledge",
     "Entertainment: Books",
@@ -25,4 +25,3 @@ export const categories = [
     "Entertainment: Japanese Anime & Manga",
     "Entertainment: Cartoon & Animations",
   ]
-
diff --git a/src/components/EditQuestionForm.js b/src/components/EditQuestionForm.js
index b3df36a..579a898 100644
--- a/src/components/EditQuestionForm.js
+++ b/src/components/EditQuestionForm.js
@@ -7,7 +7,7 @@ import { categories } from './Categories'
 const EditQuestionForm = (props) => {
     const  { question, handleChange, handleSubmit, index } = props
 
-    const [incorrectAnswerSubmissions, setIncorrectAnswers] = useState([])
+    const [incorrectAnswerSubmissions, setIncorrectAnswers] = useState([]) // totally unused 
     const [checked, setRadioValue] = useState({typeOfQuestion: "Multiple Choice", another: "another"})
     const { typeOfQuestion } = checked
 
@@ -29,7 +29,7 @@ const EditQuestionForm = (props) => {
                 <Form.Label>Enter the Incorrect Answer(s)</Form.Label>
                 <Form.Control 
                         key="incorrect2"
-                        placeholder='enter the incorrrect answer'
+                        placeholder='enter the incorrrect answer' // spelling rrr
                         name='incorrectAnswerOne'
                         id='incorrect answer'
                         onChange={handleChange}
@@ -71,7 +71,7 @@ const EditQuestionForm = (props) => {
     }
 
     return(
-
+// indentation is off from the start 
     <Container className='justify-content-center'>
         <Form onSubmit={handleSubmit}>
             <Form.Label>Question:</Form.Label>
@@ -84,7 +84,7 @@ const EditQuestionForm = (props) => {
                 value={question.question}
                 required
             />
-        <Form.Group controlId="questionType">
+        <Form.Group controlId="questionType">{/* fix indentation  */}
             <Form.Check
             value="Multiple Choice"
             type="radio"
@@ -115,14 +115,14 @@ const EditQuestionForm = (props) => {
                 onChange={handleChange}
                 required
                 value={question.correctAnswer}
-            />
-        <>
+            />{/* incorrect indentation  */}
+        <>{/* bad use of shards, we don't need them here to my knowledge */}
             {incorrectAnswers}
         </>
- 
+ {/* inconsistent white space */}
     
         <select className='m-2' required>
-        {categories.map((category, index) => (
+        {categories.map((category, index) => ( // bad indentation
                     <option
                     value={category} 
                     index={index}
@@ -137,7 +137,7 @@ const EditQuestionForm = (props) => {
         </select>
         <br/>
         <select className='m-2' required>
-                <option
+                <option // bad indentation 
                     key="easy"
                     value='Easy'
                     onClick={handleChange}
@@ -164,7 +164,7 @@ const EditQuestionForm = (props) => {
         <Button type='submit'>Add</Button>
             </Form>
         </Container>
-        
+        // T.T indentation ? 
 )}
 
 export default EditQuestionForm
\ No newline at end of file
diff --git a/src/components/GameCreate.js b/src/components/GameCreate.js
index 0e4b125..caf7139 100644
--- a/src/components/GameCreate.js
+++ b/src/components/GameCreate.js
@@ -18,8 +18,8 @@ const GameCreate = ({user, msgAlert} ) => {
     const handleChange = (e) => {
         setGame(prevGame => {
             const updatedName = e.target.name
-            let updatedValue = e.target.value
-
+            let updatedValue = e.target.value // are we reassigning updateValue ? - use const 
+// inconsistent whitespace
             const updatedGame = { [updatedName]: updatedValue}
             return { ...prevGame, ...updatedGame}
         })
@@ -41,14 +41,14 @@ const GameCreate = ({user, msgAlert} ) => {
     }
 
     return (
-        <>
+        <> {/* don't need fragment here since we only have 1 element ti return*/}
             <GameForm
                 game = { game }
                 handleChange = { handleChange }
                 handleSubmit = { handleCreateGame }
             />
 
-
+{/* inconsistent whitespace*/}
         </>
     )
 }
diff --git a/src/components/GameForm.js b/src/components/GameForm.js
index 773620b..1d287af 100644
--- a/src/components/GameForm.js
+++ b/src/components/GameForm.js
@@ -1,12 +1,13 @@
 import { Form, Button, Container } from 'react-bootstrap'
 import QuestionCreate from './QuestionCreate'
-
+// unused imports
 
 const GameForm = (props) => {
 
-
+// inconsistent white space throughout 
     const { game, handleChange, handleSubmit, gameTitle } = props
-
+// unused variable / import
+//bad indentation 
         return (
             <div style={{backgroundColor: '#240046', height: '100vh', padding: '50px'}}>
                 <Container style={{border: '2px solid lightgray', borderRadius: '10px', textAlign: 'center', height: '200px', padding: '30px'}}>
diff --git a/src/components/GameTitleEdit.js b/src/components/GameTitleEdit.js
index 37a8dc0..604b01a 100644
--- a/src/components/GameTitleEdit.js
+++ b/src/components/GameTitleEdit.js
@@ -2,18 +2,18 @@ import React, { useState } from "react"
 import { gameIndex, gameUpdate } from "../api/game"
 import { useNavigate, useLocation } from "react-router-dom"
 import GameForm from "./GameForm"
-
+// unused imports
 const GameTitleEdit = (props) => {
     const location = useLocation()
     const { game } = location.state
 	const navigate = useNavigate()
 	const { gameId } = props
-
+// unused imports
 	const [gameTitle, setGameTitle] = useState()
-
-    console.log(game.name)
+// unused state variable
+    console.log(game.name) // put in a use effect to run on mount, otherwise will run too early
 	const handleChange = (e) => {
-
+// inconsistent whitespace
 		setGameTitle(prevTitle => {
             console.log(game.name)
 			let updatedName = e.target.name
@@ -32,7 +32,7 @@ const GameTitleEdit = (props) => {
 
 	const handleUpdate = (e) => {
 		e.preventDefault()
-
+// whhhiiiiittttte space
 		gameUpdate(game, game._id)
 			.then((res) => {
 				navigate(`/games/${game._id}`)
diff --git a/src/components/Home.js b/src/components/Home.js
index 76ec64e..64967ee 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -9,7 +9,7 @@ const Home = (props) => {
 	// const { msgAlert, user } = props
 	console.log('props in home', props)
 
-	return (
+	return (// indentation and white space, why do you wound me so,  
 
 		
 		<div className='background'>
@@ -27,7 +27,7 @@ const Home = (props) => {
 		</div>
 		<div className='buttons'>
 		    <Link className='btn' to='sign-up' style={{backgroundColor: '#240046', color: 'white', border:'2px solid #ffc300', fontSize: '20px'}}>Sign-Up</Link>
-			
+			{/* huge 1 liners could be reformatted to be more readable */}
 			<Link className='btn' to='sign-in' style={{backgroundColor: '#240046', color: 'white', border:'2px solid #ffc300', fontSize: '20px'}}>Sign-In</Link>
 			
 		</div>
diff --git a/src/components/Leaderboard.js b/src/components/Leaderboard.js
index 165677e..34fbb06 100644
--- a/src/components/Leaderboard.js
+++ b/src/components/Leaderboard.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { getLeaderboard } from "../api/leaderboard"
-
+// replace with your import 
 const categories = [
     "Any",
     "General Knowledge",
@@ -30,7 +30,7 @@ const categories = [
 ]
 
 const Leaderboard = (props) => {
-
+// no comments in here at all and inconsistent whitespace
     const { msgAlert } = props
 
     const [category, setCategory] = useState('')
@@ -64,7 +64,7 @@ const Leaderboard = (props) => {
             <td>{rank + 1}</td><td>{entry.username}</td><td>{entry.score}</td>
         </tr>
     ))
-
+// inconsistent white space and bad indentation 
     return (
         <div style={{backgroundColor: '#240046', height: '100vh', color: 'white', paddingTop: '100px'}}>
             <div className="leaderboardContainer">
diff --git a/src/components/PlayerLanding.js b/src/components/PlayerLanding.js
index 1187511..cbe1670 100644
--- a/src/components/PlayerLanding.js
+++ b/src/components/PlayerLanding.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 const PlayerLanding = () => {
-    return (
+    return (// use classes in here 
         <>
             <div style={{ backgroundColor: '#240046', height: '100vh', textAlign: 'center', display: 'flex', justifyContent: 'center' }}>
                 <div style={{ backgroundColor: '#240046', width: '200px', height: '200px', padding: '30px', border: '1px solid #7552f2', marginLeft: '20px', marginTop: '100px', borderRadius: '10px' }}>
diff --git a/src/components/QuestionCreate.js b/src/components/QuestionCreate.js
index 39dc79d..c4bba88 100644
--- a/src/components/QuestionCreate.js
+++ b/src/components/QuestionCreate.js
@@ -3,17 +3,17 @@ import React from 'react'
 import { Button, Form } from 'react-bootstrap'
 
 
-const QuestionCreate = (props, user) => {
+const QuestionCreate = (props, user) => { // unused variable
         console.log(user)
 //     state = {}
 //   handleChange = (e, { value }) => this.setState({ value })
     return(
-
+// poor use of fragment we only have 1 element to return 
         <>
-
+{/* bad indentation */}
         <Form>
             <Form.Field>
-
+{/* empty element  */}
             </Form.Field>
             <Form.Field>
             <label>Question:</label>
@@ -31,7 +31,7 @@ const QuestionCreate = (props, user) => {
         </>
     )
 
-
+// WHITE SPACEEEEEEEEEEEEEE
     
 
 }
diff --git a/src/components/Result.js b/src/components/Result.js
index 87091cb..3d9a4d7 100644
--- a/src/components/Result.js
+++ b/src/components/Result.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { postResult } from "../api/result"
-
+// i find your lack of comments disturbing - Vader 
 const Result = (props) => {
     const { userID, msgAlert, category, score } = props
 
diff --git a/src/components/Timer.js b/src/components/Timer.js
index 4663d49..a7cd77a 100644
--- a/src/components/Timer.js
+++ b/src/components/Timer.js
@@ -1,7 +1,7 @@
 import React from "react"
 import { useTimer } from "react-timer-hook"
 
-// this is currently unimplemented but could be used to lock out of questions
+// this is currently unimplemented but could be used to lock out of questions,// V3+ should be in other branches and not deployed - more comments in here would be a great place to start 
 const Timer = (props, {expiryTimerstamp}) => {
 	// const { msgAlert, user } = props
 	console.log('props in timer', props)
@@ -16,7 +16,7 @@ const Timer = (props, {expiryTimerstamp}) => {
 
     } = useTimer({expiryTimerstamp, onExpire: () => console.log('done')})
 
-	return (
+	return (// bad indentation throughout, shouldn't use a fragment her because they don't get beocm ea part of the dom, should have been a div or other semantic element
 		<>
 			<h2>Timer Page</h2>
             <div style={{fontSize: '100px'}}>
diff --git a/src/components/UserGameIndex.js b/src/components/UserGameIndex.js
index c0a22ca..f1436f1 100644
--- a/src/components/UserGameIndex.js
+++ b/src/components/UserGameIndex.js
@@ -4,25 +4,25 @@ import { Link, useLocation } from 'react-router-dom'
 import { gameIndex } from '../api/game'
 import UserGamePlay from './UserGamePlay'
 import GameTitleEdit from './GameTitleEdit'
-
+// unused imports
 // this is the component to index all games
 const UserGameIndex = ({ user, msgAlert }) => {
     
     const [playing, setPlaying] = useState(false)
     const [id, setId] = useState(null)
     //handleclick function to send user to UserGamePlay component
-   const handleClick = (e) =>{
+   const handleClick = (e) =>{// indentation 
     setPlaying(true)
     setId(e.target.id)
 
-   
+   // whitespace
    }
    
-    //state
+    //state .... put all your state goodness together at the TOP of the component, in class components you can't even try to do it another way. 
     const [allGames, setAllGames] = useState([])
 
     useEffect(()=> {
-        
+        // W S 
         gameIndex(user)
             .then(res => {
                 setAllGames(res.data.games)
@@ -35,19 +35,19 @@ const UserGameIndex = ({ user, msgAlert }) => {
                 })
             })
     }, [])
-
+    //you have a collection reference in the singular here 
     const gamePreview = allGames.map(game => (
         
         <div style={{backgroundColor: '#240046', padding: '20px', display: 'flex'}}>
     <div>
         <Card key= {game.id} style={{width: '400px', display: 'flex', padding: '5px', justifyContent: 'center', textAlign: 'center', border: '2px solid lightgray'}}>
             <Card.Header style={{ backgroundColor: '#e1d5f2', borderRadius: '5px' }}>{ game.name }</Card.Header>
-                <Card.Text>
+                <Card.Text> {/* is a fancy p tag, nesting other elements inside it is not good practice:see button, use another card element */}
                      This is a game 
                      <br/>
                      { 
                         user && game.owner && user._id === game.owner._id 
-                        ?
+                        ? // when we have big blocks like this, it's better to use if else for legibility 
                         <>
                             <Link className='btn btn-info'
                             to={`/games/${game.id}`} style={{backgroundColor: 'white', border:'2px solid #50b4f2', marginTop: '10px'}}>Edit</Link>
@@ -59,15 +59,15 @@ const UserGameIndex = ({ user, msgAlert }) => {
                        <button id={game.id} onClick={handleClick} className='btn' style={{backgroundColor: '#ffc300', border: '2px solid #ffc300', borderRadius: '10px'}}>Play</button>
 
                         
-                        // <UserGamePlay game={game}/>
+                        // <wwwwhhhhhhiiiiiiitttttteeeeee space/>
                         
                     }
                     
                 </Card.Text>
                 
-                <Card.Footer></Card.Footer>
+                <Card.Footer></Card.Footer>{/* unused element */}
         </Card>
-        </div>
+        </div>{/* T.T - indentation */}
         </div>
        
         
@@ -76,13 +76,13 @@ const UserGameIndex = ({ user, msgAlert }) => {
 
         return (
             <div>
-                    { gamePreview }
+                    { gamePreview }{/* T.T - indentation */}
                 </div>
             )
 
-}else{
+}else{ // indentation !!!!!!!!!
     return(
-        <>
+        <> {/* T.T - indentation  V  */}
         <UserGamePlay user={user} msgAlert={msgAlert} id={id}/>
         </>
     )
diff --git a/src/components/UserGamePlay.js b/src/components/UserGamePlay.js
index 342b697..4d9051a 100644
--- a/src/components/UserGamePlay.js
+++ b/src/components/UserGamePlay.js
@@ -4,17 +4,17 @@ import { Link } from "react-router-dom";
 import { gameShow } from "../api/game";
 
 const UserGamePlay = (props) => {
-  const [game, setGame] = useState({})
+  const [game, setGame] = useState({})// ! should be null when we intend to do hard reassignment, bypasses need for your 'loaded' variable
   const { id, user, msgAlert } = props
   // useEffect(())
-
+  // why aren't these part of state ? at least give comments 
   let stopGame = ''
   let correct = [];
   let scrambledAnswers = [];
 
-
+// WHITE SPACE?!
   
-
+  // why is this not at top with other state variables
   const [questionIndex, setQuestionIndex] = useState(0)
   const [playerAnswer, setPlayerAnswer] = useState("")
   const [correctAns, setCorrectAns] = useState(correct[questionIndex])
@@ -40,7 +40,7 @@ const UserGamePlay = (props) => {
         })
 }, [loaded])
   
-if(loaded){
+if(loaded){// why not just check if game is truthy ?
   for(let i = 0; i < game.questions.length; i++){
     correct.push(game.questions[i].correctAnswer)
     
@@ -48,7 +48,7 @@ if(loaded){
    stopGame = Number(game.questions.length) -1
 }
 
-  useEffect(() => {
+  useEffect(() => { // should be commented since we're implementing game logic
     if(loaded){
       if (playing) {
         let num = userScore
@@ -61,16 +61,16 @@ if(loaded){
         }
         setQuestionIndex(index + 1)
       }
-
+// WS
     }
   }, [playerAnswer])
 
-  useEffect(() => {
+  useEffect(() => { // should be commented since we're implementing game logic
     if(loaded){
       if (questionIndex < stopGame) {
         setCorrectAns(game.questions[questionIndex].correctAnswer)
       }
-
+// WS
     }
   }, [questionIndex])
 
@@ -79,9 +79,10 @@ if(loaded){
       setPlaying(true)
     }
     setPlayerAnswer(e.target.innerText)
-    
+    //WS
   }
-
+// it's better practice to inverse the flow of this logic, do 1 return and have the conditionals inside it , white space, indentation, and unnecessary shards throughout 
+// break up your 3 component here to separate files and import them in 
   if (!playing) {
     return (
       <>
diff --git a/src/components/UserGameShow.js b/src/components/UserGameShow.js
index cf0e983..4a80474 100644
--- a/src/components/UserGameShow.js
+++ b/src/components/UserGameShow.js
@@ -8,7 +8,7 @@ import ShowQuestion from './questions/ShowQuestion'
 
 
 const UserGameShow = ({ user, msgAlert }) => {
-    const [game, setGame] = useState(null)
+    const [game, setGame] = useState(null)// YES !
     const [updated, setUpdated] = useState(false)
     const [questionModalShow, setQuestionModalShow] = useState(false)
     const showEdit = [questionModalShow, setQuestionModalShow]
@@ -19,13 +19,13 @@ const UserGameShow = ({ user, msgAlert }) => {
     const  { id } = useParams()
     const navigate = useNavigate()
 
-    
+    //WS
 
     useEffect(() => {
         gameShow(user, id)
             .then((res) => {
                 setGame(res.data.game)
-                
+                //WS
                 
             })
             .catch((error) => {
@@ -65,20 +65,20 @@ const UserGameShow = ({ user, msgAlert }) => {
                 })
             })
     }
-    let allQuestions
+    let allQuestions//unused
 
-    if(deleted)navigate('/user-created-games')
-    if(!game){
-        return (
+    if(deleted)navigate('/user-created-games')// don't do this here at the top level of your component, add it to the handleGameDelete in a new then after the setDeleted - could even get rid of the set deleted and deleted bit entirely 
+    if(!game){ // we should be able to avoid this entirely 
+        return ( // do 1 return and do logic in it instead
             <>
             Nothing here
             </>
-        )
+        )// fragment in here should be something else ( p tag ? ) since it has a string value, and we're not sure what element it will be in 
     }
+// I HaVe NeVaR WrItTeN WhItE SpAcE sO mUcH iN mY lIfE (sarcasm/joke)
 
-
-    return (
-      
+    return (// lots of bad indentation throughout 
+      // WS
         <div style={{backgroundColor: '#240046', height: '100vh', paddingTop: '40px'}}>
             <Container className='cardContainer m-2' >