diff --git a/frontend/src/components/Card/Card.jsx b/frontend/src/components/Card/Card.jsx
index 075e8fa..a858944 100644
--- a/frontend/src/components/Card/Card.jsx
+++ b/frontend/src/components/Card/Card.jsx
@@ -32,9 +32,11 @@ const StatContainer = ({
   hoveredStats,
   onStatHover,
   onStatHoverLeave,
+  isPlayersTurn,
+  roundWinner,
 }) => {
   const handleClick = (event) => {
-    if (isCardInPlay) {
+    if (isCardInPlay && !isPlayersTurn && !roundWinner) {
       selectStat(event.target.dataset["stat"]);
     }
   };
@@ -79,6 +81,8 @@ export const Card = ({
   selectStat,
   opponentCardShow,
   hints,
+  isPlayersTurn,
+  roundWinner,
 }) => {
   // Track hover state for each stat separately
   const [hoveredStats, setHoveredStats] = useState({
@@ -186,6 +190,8 @@ export const Card = ({
               hoveredStats={hoveredStats}
               onStatHover={onStatHover}
               onStatHoverLeave={onStatHoverLeave}
+              isPlayersTurn={isPlayersTurn}
+              roundWinner={roundWinner}
             />
           ))}
         </article>
diff --git a/frontend/src/components/CardContainer/CardContainer.jsx b/frontend/src/components/CardContainer/CardContainer.jsx
index 5ece044..bb6fd46 100644
--- a/frontend/src/components/CardContainer/CardContainer.jsx
+++ b/frontend/src/components/CardContainer/CardContainer.jsx
@@ -29,6 +29,8 @@ export const CardContainer = ({
   opponentCardShow,
   cardsInPlay,
   hints,
+  isPlayersTurn,
+  roundWinner,
 }) => {
   return (
     <div data-testid="cards-container" className="cards-container">
@@ -47,6 +49,8 @@ export const CardContainer = ({
             opponentCardShow={opponentCardShow}
             cardsInPlay={cardsInPlay}
             hints={hints}
+            isPlayersTurn={isPlayersTurn}
+            roundWinner={roundWinner}
           />
         ))}
     </div>
diff --git a/frontend/src/pages/PlayGamePage/PlayGamePage.jsx b/frontend/src/pages/PlayGamePage/PlayGamePage.jsx
index fed370a..dbd2a60 100644
--- a/frontend/src/pages/PlayGamePage/PlayGamePage.jsx
+++ b/frontend/src/pages/PlayGamePage/PlayGamePage.jsx
@@ -42,265 +42,258 @@ 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 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 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 toggleHints = () => {
-        setHintsOn(!hintsOn);
-    };
+  const toggleHints = () => {
+    setHintsOn(!hintsOn);
+  };
 
-    // Preload all images when the component mounts
-    useEffect(() => {
-        const loadAllImages = async () => {
-            setIsLoading(true);
+  // Preload all images when the component mounts
+  useEffect(() => {
+    const loadAllImages = async () => {
+      setIsLoading(true);
 
-            // Combine all cards
-            const allCards = [...playerHand, ...opponentHand];
+      // Combine all cards
+      const allCards = [...playerHand, ...opponentHand];
 
-            // Preload all images
-            await preloadPlantImages(allCards, (loaded, total) => {
-                setLoadingProgress(Math.floor((loaded / total) * 100));
-            });
+      // Preload all images
+      await preloadPlantImages(allCards, (loaded, total) => {
+        setLoadingProgress(Math.floor((loaded / total) * 100));
+      });
 
-            setIsLoading(false);
-        };
+      setIsLoading(false);
+    };
 
-        loadAllImages();
-    }, []);
+    loadAllImages();
+  }, []);
 
-    // 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]]);
-            }
-        };
+  // 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]]);
+      }
+    };
 
-        preloadNextCards();
-    }, [playerHand, opponentHand, isLoading]);
+    preloadNextCards();
+  }, [playerHand, opponentHand, isLoading]);
 
-    const selectStat = (
-        stat,
-        card1 = cardsInPlay[0],
-        card2 = cardsInPlay[1],
-        playerHandSize = playerHand.length,
-        opponentHandSize = opponentHand.length
-    ) => {
-        setOpponentCardShow(true);
+  const selectStat = (
+    stat,
+    card1 = cardsInPlay[0],
+    card2 = cardsInPlay[1],
+    playerHandSize = playerHand.length,
+    opponentHandSize = opponentHand.length,
+  ) => {
+    setOpponentCardShow(true);
 
-        const token = localStorage.getItem("token");
-        setTimeout(() => {
-            postPlantForComparison(card1.id, card2.id, stat, token).then(
-                (response) => {
-                    if (response.winner === "player") {
-                        playerOneWinsComparison(
-                            [card1, card2],
-                            opponentHandSize
-                        );
+    const token = localStorage.getItem("token");
+    setTimeout(() => {
+      postPlantForComparison(card1.id, card2.id, stat, token).then(
+        (response) => {
+          if (response.winner === "player") {
+            playerOneWinsComparison([card1, card2], opponentHandSize);
 
-                        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);
-    };
+            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 onClickNextRoundHandle = () => {
-        if (isPlayersTurn) {
-            setOpponentCardShow(false);
-        }
-        setIsPlayersTurn((prev) => !prev);
-        setRoundWinner();
-        setCardsInPlay([]);
-    };
+  const onClickNextRoundHandle = () => {
+    if (isPlayersTurn) {
+      setOpponentCardShow(false);
+    }
+    setIsPlayersTurn((prev) => !prev);
+    setRoundWinner();
+    setCardsInPlay([]);
+  };
 
-    const pickTopCards = async () => {
-        if (playerHand.length === 0 || opponentHand.length === 0) return;
+  const pickTopCards = async () => {
+    if (playerHand.length === 0 || opponentHand.length === 0) return;
+    setRoundWinner();
+    const latestCardsInPlay = [playerHand[0], opponentHand[0]];
+    const playerHandSize = playerHand.length - 1;
+    const opponentHandSize = opponentHand.length - 1;
 
-        const latestCardsInPlay = [playerHand[0], opponentHand[0]];
-        const playerHandSize = playerHand.length - 1;
-        const opponentHandSize = opponentHand.length - 1;
+    // Ensure these cards' images are loaded before displaying them
+    await preloadPlantImages(latestCardsInPlay);
 
-        // Ensure these cards' images are loaded before displaying them
-        await preloadPlantImages(latestCardsInPlay);
+    setCardsInPlay(latestCardsInPlay);
+    setPlayerHand((prev) => prev.slice(1));
+    setOpponentHand((prev) => prev.slice(1));
 
-        setCardsInPlay(latestCardsInPlay);
-        setPlayerHand((prev) => prev.slice(1));
-        setOpponentHand((prev) => prev.slice(1));
+    if (!isPlayersTurn) {
+      selectStat(
+        null,
+        latestCardsInPlay[0],
+        latestCardsInPlay[1],
+        playerHandSize,
+        opponentHandSize,
+      );
+    }
+  };
 
-        if (!isPlayersTurn) {
-            selectStat(
-                null,
-                latestCardsInPlay[0],
-                latestCardsInPlay[1],
-                playerHandSize,
-                opponentHandSize
-            );
-        }
-    };
+  const playerOneWinsComparison = (cards, opponentHandSize) => {
+    const token = localStorage.getItem("token");
+    if (opponentHandSize === 0) {
+      setGameWinner("Player");
+      postWinner(token, "player");
+    }
 
-    const playerOneWinsComparison = (cards, opponentHandSize) => {
-        const token = localStorage.getItem("token");
-        if (opponentHandSize === 0) {
-            setGameWinner("Player");
-            postWinner(token, "player");
-        }
+    setPlayerHand((prev) => {
+      const updatedCards = cards.map((card) => ({
+        ...card,
+        owner: "player",
+      }));
 
-        setPlayerHand((prev) => {
-            const updatedCards = cards.map((card) => ({
-                ...card,
-                owner: "player",
-            }));
+      return [...prev, ...updatedCards];
+    });
+  };
 
-            return [...prev, ...updatedCards];
-        });
-    };
+  const playerTwoWinsComparison = (cards, playerHandSize) => {
+    const token = localStorage.getItem("token");
 
-    const playerTwoWinsComparison = (cards, playerHandSize) => {
-        const token = localStorage.getItem("token");
+    if (playerHandSize === 0) {
+      setGameWinner("Opponent");
+      postWinner(token, "opponent");
+    }
 
-        if (playerHandSize === 0) {
-            setGameWinner("Opponent");
-            postWinner(token, "opponent");
-        }
+    setOpponentHand((prev) => {
+      const updatedCards = cards.map((card) => ({
+        ...card,
+        owner: "opponent",
+      }));
 
-        setOpponentHand((prev) => {
-            const updatedCards = cards.map((card) => ({
-                ...card,
-                owner: "opponent",
-            }));
+      return [...prev, ...updatedCards];
+    });
+  };
 
-            return [...prev, ...updatedCards];
-        });
-    };
+  const drawOutcome = (cards) => {
+    setPlayerHand((prev) => [...prev, cards[0]]);
+    setOpponentHand((prev) => [...prev, cards[1]]);
+  };
 
-    const drawOutcome = (cards) => {
-        setPlayerHand((prev) => [...prev, cards[0]]);
-        setOpponentHand((prev) => [...prev, cards[1]]);
-    };
+  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>
+    );
+  }
 
-    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>
-        );
-    }
+  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>
 
-    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>
-                )}
+        {(cardsInPlay.length > 0 || gameWinner) && <h1>Cards in Play</h1>}
+        {(cardsInPlay.length > 0 || gameWinner) && (
+          <CardContainer
+            plants={cardsInPlay}
+            isCardInPlay={true}
+            opponentCardShow={opponentCardShow}
+            selectStat={selectStat}
+            hints={hintsOn}
+            isPlayersTurn={isPlayersTurn}
+            roundWinner={roundWinner}
+          />
+        )}
+        <div className="decks-in-hand-container">
+          {playerHand && playerHand.length > 0 && (
+            <div className="deck-cards">
+              <h1>Player Hand</h1>
+              <DeckInHand plants={playerHand} />
             </div>
-            <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>
+          )}
+          {opponentHand && opponentHand.length > 0 && (
+            <div className="deck-cards">
+              <h1>Opponent Hand</h1>
+              <DeckInHand plants={opponentHand} />
             </div>
-        </>
-    );
+          )}
+        </div>
+      </div>
+    </>
+  );
 };