diff --git a/frontend/src/pages/PlayGamePage/PlayGamePage.jsx b/frontend/src/pages/PlayGamePage/PlayGamePage.jsx
index 904f685..fed370a 100644
--- a/frontend/src/pages/PlayGamePage/PlayGamePage.jsx
+++ b/frontend/src/pages/PlayGamePage/PlayGamePage.jsx
@@ -42,242 +42,265 @@ import { postWinner } from "../../services/userStats";
 import { RoundWinner } from "../../components/RoundWinner/RoundWinner";
 
 export const PlayGamePage = () => {
-  const location = useLocation();
-  const { startingPlayerHand, startingOpponentHand } = location.state || {
-    startingPlayerHand: [],
-    startingOpponentHand: [],
-  };
-  const [playerHand, setPlayerHand] = useState(startingPlayerHand);
-  const [opponentHand, setOpponentHand] = useState(startingOpponentHand);
-  const [cardsInPlay, setCardsInPlay] = useState([]);
-  const [gameWinner, setGameWinner] = useState("");
-  const [opponentCardShow, setOpponentCardShow] = useState(true);
-  const [isPlayersTurn, setIsPlayersTurn] = useState(true);
-  const [isLoading, setIsLoading] = useState(true);
-  const [loadingProgress, setLoadingProgress] = useState(0);
-  const [hintsOn, setHintsOn] = useState(true);
-  const [roundWinner, setRoundWinner] = useState();
-
-  const ORIGINAL_STATS_NAMES = {
-    year: "Discovery published in",
-    edible: "edible",
-    ph_range: "Soil pH range",
-    light: "Light Level",
-    soil_nutriments: "Nutrients required",
-    atmospheric_humidity: "Humidity Level",
-  };
+    const location = useLocation();
+    const { startingPlayerHand, startingOpponentHand } = location.state || {
+        startingPlayerHand: [],
+        startingOpponentHand: [],
+    };
+    const [playerHand, setPlayerHand] = useState(startingPlayerHand);
+    const [opponentHand, setOpponentHand] = useState(startingOpponentHand);
+    const [cardsInPlay, setCardsInPlay] = useState([]);
+    const [gameWinner, setGameWinner] = useState("");
+    const [opponentCardShow, setOpponentCardShow] = useState(true);
+    const [isPlayersTurn, setIsPlayersTurn] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
+    const [loadingProgress, setLoadingProgress] = useState(0);
+    const [hintsOn, setHintsOn] = useState(true);
+    const [roundWinner, setRoundWinner] = useState();
 
-  const toggleHints = () => {
-    setHintsOn(!hintsOn);
-  };
+    const ORIGINAL_STATS_NAMES = {
+        year: "Discovery published in",
+        edible: "edible",
+        ph_range: "Soil pH range",
+        light: "Light Level",
+        soil_nutriments: "Nutrients required",
+        atmospheric_humidity: "Humidity Level",
+    };
 
-  // Preload all images when the component mounts
-  useEffect(() => {
-    const loadAllImages = async () => {
-      setIsLoading(true);
+    const toggleHints = () => {
+        setHintsOn(!hintsOn);
+    };
 
-      // Combine all cards
-      const allCards = [...playerHand, ...opponentHand];
+    // Preload all images when the component mounts
+    useEffect(() => {
+        const loadAllImages = async () => {
+            setIsLoading(true);
 
-      // Preload all images
-      await preloadPlantImages(allCards, (loaded, total) => {
-        setLoadingProgress(Math.floor((loaded / total) * 100));
-      });
+            // Combine all cards
+            const allCards = [...playerHand, ...opponentHand];
 
-      setIsLoading(false);
-    };
+            // Preload all images
+            await preloadPlantImages(allCards, (loaded, total) => {
+                setLoadingProgress(Math.floor((loaded / total) * 100));
+            });
 
-    loadAllImages();
-  }, []);
+            setIsLoading(false);
+        };
 
-  // Pre-cache the next cards to be played
-  useEffect(() => {
-    const preloadNextCards = async () => {
-      if (playerHand.length > 0 && opponentHand.length > 0 && !isLoading) {
-        // Preload the next cards in each deck
-        await preloadPlantImages([playerHand[0], opponentHand[0]]);
-      }
-    };
+        loadAllImages();
+    }, []);
 
-    preloadNextCards();
-  }, [playerHand, opponentHand, isLoading]);
+    // Pre-cache the next cards to be played
+    useEffect(() => {
+        const preloadNextCards = async () => {
+            if (
+                playerHand.length > 0 &&
+                opponentHand.length > 0 &&
+                !isLoading
+            ) {
+                // Preload the next cards in each deck
+                await preloadPlantImages([playerHand[0], opponentHand[0]]);
+            }
+        };
 
-  const selectStat = (stat, card1 = cardsInPlay[0], card2 = cardsInPlay[1]) => {
-    setOpponentCardShow(true);
+        preloadNextCards();
+    }, [playerHand, opponentHand, isLoading]);
 
-    const token = localStorage.getItem("token");
-    setTimeout(() => {
-      postPlantForComparison(card1.id, card2.id, stat, token).then(
-        (response) => {
-          if (response.winner === "player") {
-            playerOneWinsComparison([card1, card2]);
+    const selectStat = (
+        stat,
+        card1 = cardsInPlay[0],
+        card2 = cardsInPlay[1],
+        playerHandSize = playerHand.length,
+        opponentHandSize = opponentHand.length
+    ) => {
+        setOpponentCardShow(true);
 
-            setRoundWinner([
-              "Player wins hand!",
-              "Stat compared:",
-              ORIGINAL_STATS_NAMES[response.compared_stat],
-            ]);
-          } else if (response.winner === "opponent") {
-            playerTwoWinsComparison([card1, card2]);
-            setRoundWinner([
-              "Opponent wins hand!",
-              "Stat compared:",
-              ORIGINAL_STATS_NAMES[response.compared_stat],
-            ]);
-          } else if (response.winner === "draw") {
-            drawOutcome([card1, card2]);
-            setRoundWinner([
-              "Draw",
-              "Stat compared:",
-              ORIGINAL_STATS_NAMES[response.compared_stat],
-            ]);
-          }
-          // set a new token
-          localStorage.setItem("token", response.token);
-        },
-      );
-    }, 1000);
-  };
+        const token = localStorage.getItem("token");
+        setTimeout(() => {
+            postPlantForComparison(card1.id, card2.id, stat, token).then(
+                (response) => {
+                    if (response.winner === "player") {
+                        playerOneWinsComparison(
+                            [card1, card2],
+                            opponentHandSize
+                        );
 
-  const onClickNextRoundHandle = () => {
-    if (isPlayersTurn) {
-      setOpponentCardShow(false);
-    }
-    setIsPlayersTurn((prev) => !prev);
-    setRoundWinner();
-    setCardsInPlay([]);
-  };
+                        setRoundWinner([
+                            "Player wins hand!",
+                            "Stat compared:",
+                            ORIGINAL_STATS_NAMES[response.compared_stat],
+                        ]);
+                    } else if (response.winner === "opponent") {
+                        playerTwoWinsComparison([card1, card2], playerHandSize);
+                        setRoundWinner([
+                            "Opponent wins hand!",
+                            "Stat compared:",
+                            ORIGINAL_STATS_NAMES[response.compared_stat],
+                        ]);
+                    } else if (response.winner === "draw") {
+                        drawOutcome([card1, card2]);
+                        setRoundWinner([
+                            "Draw",
+                            "Stat compared:",
+                            ORIGINAL_STATS_NAMES[response.compared_stat],
+                        ]);
+                    }
+                    // set a new token
+                    localStorage.setItem("token", response.token);
+                }
+            );
+        }, 1000);
+    };
 
-  const pickTopCards = async () => {
-    if (playerHand.length === 0 || opponentHand.length === 0) return;
+    const onClickNextRoundHandle = () => {
+        if (isPlayersTurn) {
+            setOpponentCardShow(false);
+        }
+        setIsPlayersTurn((prev) => !prev);
+        setRoundWinner();
+        setCardsInPlay([]);
+    };
 
-    const latestCardsInPlay = [playerHand[0], opponentHand[0]];
+    const pickTopCards = async () => {
+        if (playerHand.length === 0 || opponentHand.length === 0) return;
 
-    // Ensure these cards' images are loaded before displaying them
-    await preloadPlantImages(latestCardsInPlay);
+        const latestCardsInPlay = [playerHand[0], opponentHand[0]];
+        const playerHandSize = playerHand.length - 1;
+        const opponentHandSize = opponentHand.length - 1;
 
-    setCardsInPlay(latestCardsInPlay);
-    setPlayerHand((prev) => prev.slice(1));
-    setOpponentHand((prev) => prev.slice(1));
+        // Ensure these cards' images are loaded before displaying them
+        await preloadPlantImages(latestCardsInPlay);
 
-    if (!isPlayersTurn) {
-      selectStat(null, latestCardsInPlay[0], latestCardsInPlay[1]);
-    }
-  };
+        setCardsInPlay(latestCardsInPlay);
+        setPlayerHand((prev) => prev.slice(1));
+        setOpponentHand((prev) => prev.slice(1));
 
-  const playerOneWinsComparison = (cards) => {
-    const token = localStorage.getItem("token");
-    if (opponentHand.length === 0) {
-      setGameWinner("Player");
-      postWinner(token, "player");
-    }
+        if (!isPlayersTurn) {
+            selectStat(
+                null,
+                latestCardsInPlay[0],
+                latestCardsInPlay[1],
+                playerHandSize,
+                opponentHandSize
+            );
+        }
+    };
 
-    setPlayerHand((prev) => {
-      const updatedCards = cards.map((card) => ({
-        ...card,
-        owner: "player",
-      }));
+    const playerOneWinsComparison = (cards, opponentHandSize) => {
+        const token = localStorage.getItem("token");
+        if (opponentHandSize === 0) {
+            setGameWinner("Player");
+            postWinner(token, "player");
+        }
 
-      return [...prev, ...updatedCards];
-    });
-  };
+        setPlayerHand((prev) => {
+            const updatedCards = cards.map((card) => ({
+                ...card,
+                owner: "player",
+            }));
 
-  const playerTwoWinsComparison = (cards) => {
-    const token = localStorage.getItem("token");
+            return [...prev, ...updatedCards];
+        });
+    };
 
-    if (playerHand.length === 0) {
-      setGameWinner("Opponent");
-      postWinner(token, "opponent");
-    }
+    const playerTwoWinsComparison = (cards, playerHandSize) => {
+        const token = localStorage.getItem("token");
 
-    setOpponentHand((prev) => {
-      const updatedCards = cards.map((card) => ({
-        ...card,
-        owner: "opponent",
-      }));
+        if (playerHandSize === 0) {
+            setGameWinner("Opponent");
+            postWinner(token, "opponent");
+        }
 
-      return [...prev, ...updatedCards];
-    });
-  };
+        setOpponentHand((prev) => {
+            const updatedCards = cards.map((card) => ({
+                ...card,
+                owner: "opponent",
+            }));
 
-  const drawOutcome = (cards) => {
-    setPlayerHand((prev) => [...prev, cards[0]]);
-    setOpponentHand((prev) => [...prev, cards[1]]);
-  };
+            return [...prev, ...updatedCards];
+        });
+    };
 
-  if (isLoading) {
-    return (
-      <div className="loading-container">
-        <h2>Preparing Game...</h2>
-        <div className="progress-bar">
-          <div
-            className="progress-bar-fill"
-            style={{ width: `${loadingProgress}%` }}
-          ></div>
-        </div>
-        <p>{loadingProgress}% complete</p>
-      </div>
-    );
-  }
+    const drawOutcome = (cards) => {
+        setPlayerHand((prev) => [...prev, cards[0]]);
+        setOpponentHand((prev) => [...prev, cards[1]]);
+    };
 
-  return gameWinner ? (
-    <>
-      <h1>{gameWinner} wins!</h1>
-      <Link to="/setupgame" className="new-game-link">
-        New Game?
-      </Link>
-      <CardContainer
-        plants={gameWinner === "Player" ? playerHand : opponentHand}
-        opponentCardShow={true}
-      ></CardContainer>
-    </>
-  ) : (
-    <>
-      <div className="round-winner-container">
-        {roundWinner && <RoundWinner roundWinner={roundWinner} />}
-        {((playerHand.length === 5 && opponentHand.length === 5) ||
-          roundWinner) && (
-          <button
-            onClick={() => {
-              pickTopCards();
-              onClickNextRoundHandle();
-            }}
-            className="next-round-button"
-          >
-            Next Round
-          </button>
-        )}
-      </div>
-      <div className="background-image">
-        <div className="hints-button-container" onClick={toggleHints}>
-          <img src={hintsOn ? lightBulbOn : lightBulbOff}></img>
-        </div>
+    if (isLoading) {
+        return (
+            <div className="loading-container">
+                <h2>Preparing Game...</h2>
+                <div className="progress-bar">
+                    <div
+                        className="progress-bar-fill"
+                        style={{ width: `${loadingProgress}%` }}
+                    ></div>
+                </div>
+                <p>{loadingProgress}% complete</p>
+            </div>
+        );
+    }
 
-        {(cardsInPlay.length > 0 || gameWinner) && <h1>Cards in Play</h1>}
-        {(cardsInPlay.length > 0 || gameWinner) && (
-          <CardContainer
-            plants={cardsInPlay}
-            isCardInPlay={true}
-            opponentCardShow={opponentCardShow}
-            selectStat={selectStat}
-            hints={hintsOn}
-          />
-        )}
-        <div className="decks-in-hand-container">
-          {playerHand && playerHand.length > 0 && (
-            <div className="deck-cards">
-              <h1>Player Hand</h1>
-              <DeckInHand plants={playerHand} />
+    return gameWinner ? (
+        <>
+            <h1>{gameWinner} wins!</h1>
+            <Link to="/setupgame" className="new-game-link">
+                New Game?
+            </Link>
+            <CardContainer
+                plants={gameWinner === "Player" ? playerHand : opponentHand}
+                opponentCardShow={true}
+            ></CardContainer>
+        </>
+    ) : (
+        <>
+            <div className="round-winner-container">
+                {roundWinner && <RoundWinner roundWinner={roundWinner} />}
+                {((playerHand.length === 5 && opponentHand.length === 5) ||
+                    roundWinner) && (
+                    <button
+                        onClick={() => {
+                            pickTopCards();
+                            onClickNextRoundHandle();
+                        }}
+                        className="next-round-button"
+                    >
+                        Next Round
+                    </button>
+                )}
             </div>
-          )}
-          {opponentHand && opponentHand.length > 0 && (
-            <div className="deck-cards">
-              <h1>Opponent Hand</h1>
-              <DeckInHand plants={opponentHand} />
+            <div className="background-image">
+                <div className="hints-button-container" onClick={toggleHints}>
+                    <img src={hintsOn ? lightBulbOn : lightBulbOff}></img>
+                </div>
+
+                {(cardsInPlay.length > 0 || gameWinner) && (
+                    <h1>Cards in Play</h1>
+                )}
+                {(cardsInPlay.length > 0 || gameWinner) && (
+                    <CardContainer
+                        plants={cardsInPlay}
+                        isCardInPlay={true}
+                        opponentCardShow={opponentCardShow}
+                        selectStat={selectStat}
+                        hints={hintsOn}
+                    />
+                )}
+                <div className="decks-in-hand-container">
+                    {playerHand && playerHand.length > 0 && (
+                        <div className="deck-cards">
+                            <h1>Player Hand</h1>
+                            <DeckInHand plants={playerHand} />
+                        </div>
+                    )}
+                    {opponentHand && opponentHand.length > 0 && (
+                        <div className="deck-cards">
+                            <h1>Opponent Hand</h1>
+                            <DeckInHand plants={opponentHand} />
+                        </div>
+                    )}
+                </div>
             </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
+        </>
+    );
 };