diff --git a/client/src/hooks/useGame.tsx b/client/src/hooks/useGame.tsx
index 552b5f4..56a91d2 100644
--- a/client/src/hooks/useGame.tsx
+++ b/client/src/hooks/useGame.tsx
@@ -1,10 +1,9 @@
 import { useDojo } from "@/dojo/useDojo";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useComponentValue } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
 import useDeepMemo from "./useDeepMemo";
-import { consoleTSLog } from "@/utils/logger";
 
 export const useGame = ({
   gameId,
diff --git a/client/src/ui/components/BackgroundBoard.tsx b/client/src/ui/components/BackgroundBoard.tsx
index 2983e69..b91cfcd 100644
--- a/client/src/ui/components/BackgroundBoard.tsx
+++ b/client/src/ui/components/BackgroundBoard.tsx
@@ -1,8 +1,6 @@
-import { ReactNode } from "react";
 import { motion, MotionProps } from "framer-motion";
 
 interface BackgroundImageProps {
-  children: ReactNode;
   imageBackground: string;
   animate?: MotionProps["animate"];
   initial?: MotionProps["initial"];
@@ -10,23 +8,19 @@ interface BackgroundImageProps {
 }
 
 const BackgroundBoard: React.FC<BackgroundImageProps> = ({
-  children,
   imageBackground,
   animate,
   initial,
   transition,
 }) => {
   return (
-    <div className="relative w-full grow h-full overflow-hidden">
-      <motion.div
-        className="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
-        style={{ backgroundImage: `url(${imageBackground})` }}
-        initial={initial || {}}
-        animate={animate || {}}
-        transition={transition || {}}
-      />
-      {children}
-    </div>
+    <motion.div
+      className="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage: `url(${imageBackground})` }}
+      initial={initial || {}}
+      animate={animate || {}}
+      transition={transition || {}}
+    />
   );
 };
 
diff --git a/client/src/ui/components/GameBoard.tsx b/client/src/ui/components/GameBoard.tsx
index 3bb0068..1bd39ea 100644
--- a/client/src/ui/components/GameBoard.tsx
+++ b/client/src/ui/components/GameBoard.tsx
@@ -1,11 +1,4 @@
-import React, {
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useLayoutEffect,
-} from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { Card } from "@/ui/elements/card";
 import { useDojo } from "@/dojo/useDojo";
 import { GameBonus } from "../containers/GameBonus";
@@ -195,10 +188,13 @@ const GameBoard: React.FC<GameBoardProps> = ({
   useEffect(() => {
     // Reset the isTxProcessing state and the bonus state when the grid changes
     // meaning the tx as been processed, and the client state updated
+    consoleTSLog("success", "Game board is trigger");
     setBonus(BonusType.None);
     setBonusDescription("");
   }, [initialGrid]);
 
+  consoleTSLog("info", "Rendering GameBoard component");
+
   const memoizedInitialData = useMemo(() => {
     consoleTSLog("success", "Transforming data in gameboard");
     return transformDataContractIntoBlock(initialGrid);
diff --git a/client/src/ui/screens/Home.tsx b/client/src/ui/screens/Home.tsx
index b9005c8..e90bdef 100644
--- a/client/src/ui/screens/Home.tsx
+++ b/client/src/ui/screens/Home.tsx
@@ -80,6 +80,8 @@ export const Home = () => {
   // State variables for modals
   const [isTournamentsOpen, setIsTournamentsOpen] = useState(false);
 
+  const gameIsOver = game?.isOver();
+
   const composeTweet = useCallback(() => {
     setLevel(player?.points ? Level.fromPoints(player?.points).value : "");
     setScore(game?.score);
@@ -87,7 +89,7 @@ export const Home = () => {
   }, [game?.score, player?.points]);
 
   useEffect(() => {
-    if (game?.over) {
+    if (gameIsOver) {
       if (gameGrid.current !== null) {
         toPng(gameGrid.current, { cacheBust: true })
           .then((dataUrl) => {
@@ -100,7 +102,7 @@ export const Home = () => {
       }
       setIsGameOn("isOver");
     }
-  }, [composeTweet, game?.over]);
+  }, [composeTweet, gameIsOver]);
 
   useEffect(() => {
     // Check if game is defined and not over
@@ -111,7 +113,7 @@ export const Home = () => {
       setIsGameOn("isOver");
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [game?.over]);
+  }, [gameIsOver]);
 
   const imageTotemTheme =
     theme === "dark" ? imgAssets.imageTotemDark : imgAssets.imageTotemLight;
@@ -135,27 +137,23 @@ export const Home = () => {
 
   const [chestIsOpen, setChestIsOpen] = useState(false);
   const [isGameOverOpen, setIsGameOverOpen] = useState(false);
-  const prevGameOverRef = useRef<boolean | undefined>(game?.over);
+  const prevGameOverRef = useRef<boolean | undefined>(gameIsOver);
 
   useEffect(() => {
     if (prevGameOverRef.current !== undefined) {
       // Check if game.over transitioned from false to true
-      if (!prevGameOverRef.current && game?.over) {
+      if (!prevGameOverRef.current && gameIsOver) {
         setIsGameOverOpen(true);
       }
     }
     // Update the ref with the current value of game.over
-    prevGameOverRef.current = game?.over;
-  }, [game?.over]);
+    prevGameOverRef.current = gameIsOver;
+  }, [gameIsOver]);
 
   useEffect(() => {
     consoleTSLog("danger", "=============== Grid is changing ===============");
   }, [grid]);
 
-  /*useEffect(() => {
-    console.log("==================> Grid is changing");
-  }, [grid]);*/
-
   // Define render functions
   const renderDesktopView = () => (
     <>
@@ -246,7 +244,10 @@ export const Home = () => {
         />
 
         {/* Main Content */}
-        <BackGroundBoard imageBackground={imgAssets.imageBackground}>
+        <div
+          className="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
+          style={{ backgroundImage: `url(${imgAssets.imageBackground})` }}
+        >
           <BackGroundBoard
             imageBackground={imageTotemTheme}
             initial={{ scale: 1 }}
@@ -257,150 +258,145 @@ export const Home = () => {
               repeatType: "reverse",
               ease: "easeInOut",
             }}
-          >
-            <div className="relative flex flex-col gap-4 sm:gap-8 flex-grow items-center justify-start overflow-auto">
-              <div className="flex flex-col items-center gap-4 sm:gap-8 w-full max-w-4xl mt-2 sm:mt-4 p-2 md:p-0">
-                {!isSigning && <Create />}
-                {(!game || (!!game && isGameOn === "isOver")) && (
-                  <>
-                    {isMdOrLarger
-                      ? renderDesktopView()
-                      : isTournamentsOpen
-                        ? renderTournamentsView()
-                        : renderMobileView()}
-                  </>
-                )}
-                {game && (
-                  <GameOverDialog
-                    isOpen={isGameOverOpen}
-                    onClose={() => setIsGameOverOpen(false)}
-                    game={game}
-                  />
-                )}
-                {!!game && isGameOn === "isOver" && !isTournamentsOpen && (
-                  <>
-                    <div className="flex flex-col gap-4 mt-4 md:mt-0">
-                      <div className="p-6 rounded-lg shadow-lg w-full h-full bg-gray-900 m-2">
-                        <p className="text-4xl text-center mb-2">Game Over</p>
-
-                        <div className="flex gap-4 justify-center items-center">
-                          <div className="grow text-4xl flex gap-2 justify-end">
-                            {game.score}
-                            <FontAwesomeIcon
-                              icon={faStar}
-                              className="text-yellow-500"
-                            />
-                          </div>
-                          <div className="grow text-4xl flex gap-2 justify-end">
-                            {game.combo}
-                            <FontAwesomeIcon
-                              icon={faFire}
-                              className="text-slate-700"
-                            />
-                          </div>
-                          <div className="grow text-4xl flex gap-2 justify-end">
-                            {game.max_combo}
-                            <MaxComboIcon
-                              width={36}
-                              height={36}
-                              className="text-slate-700"
-                            />
-                          </div>
+          />
+          <div className="relative flex flex-col gap-4 sm:gap-8 flex-grow items-center justify-start overflow-auto">
+            <div className="flex flex-col items-center gap-4 sm:gap-8 w-full max-w-4xl mt-2 sm:mt-4 p-2 md:p-0">
+              {!isSigning && <Create />}
+              {(!game || (!!game && isGameOn === "isOver")) && (
+                <>
+                  {isMdOrLarger
+                    ? renderDesktopView()
+                    : isTournamentsOpen
+                      ? renderTournamentsView()
+                      : renderMobileView()}
+                </>
+              )}
+              {game && (
+                <GameOverDialog
+                  isOpen={isGameOverOpen}
+                  onClose={() => setIsGameOverOpen(false)}
+                  game={game}
+                />
+              )}
+              {!!game && isGameOn === "isOver" && !isTournamentsOpen && (
+                <>
+                  <div className="flex flex-col gap-4 mt-4 md:mt-0">
+                    <div className="p-6 rounded-lg shadow-lg w-full h-full bg-gray-900 m-2">
+                      <p className="text-4xl text-center mb-2">Game Over</p>
+
+                      <div className="flex gap-4 justify-center items-center">
+                        <div className="grow text-4xl flex gap-2 justify-end">
+                          {game.score}
+                          <FontAwesomeIcon
+                            icon={faStar}
+                            className="text-yellow-500"
+                          />
+                        </div>
+                        <div className="grow text-4xl flex gap-2 justify-end">
+                          {game.combo}
+                          <FontAwesomeIcon
+                            icon={faFire}
+                            className="text-slate-700"
+                          />
+                        </div>
+                        <div className="grow text-4xl flex gap-2 justify-end">
+                          {game.max_combo}
+                          <MaxComboIcon
+                            width={36}
+                            height={36}
+                            className="text-slate-700"
+                          />
                         </div>
                       </div>
                     </div>
-
-                    {!isTournamentsOpen && (
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <Button className="text-md md:text-2xl mt-2 md:p-4 p-2 bg-primary text-secondary rounded-lg">
-                            Give feedback and get a chance to win STRK
-                          </Button>
-                        </DialogTrigger>
-
-                        <DialogContent
-                          aria-describedby={undefined}
-                          className="sm:max-w-[700px] w-[95%] h-[580px] flex flex-col mx-auto justify-start items-center bg-opacity-50 rounded-lg shadow-lg"
-                        >
-                          <DialogHeader className="flex items-center">
-                            <DialogTitle>Feedback</DialogTitle>
-                          </DialogHeader>
-                          <div className="flex-grow overflow-auto px-2 w-full h-full">
-                            <GoogleFormEmbed />
-                          </div>
-                        </DialogContent>
-                      </Dialog>
-                    )}
-                  </>
-                )}
-                {!!game && isGameOn === "isOn" && (
-                  <div className="relative w-full">
-                    <div
-                      ref={gameGrid}
-                      className="flex flex-col items-center game-container"
-                    >
-                      <GameBoard
-                        // Check if game is over because otherwise we can display
-                        // previous game data on the board while the new game is starting
-                        // and torii indexing
-                        initialGrid={grid}
-                        nextLine={game.isOver() ? [] : game.next_row}
-                        score={game.isOver() ? 0 : game.score}
-                        combo={game.isOver() ? 0 : game.combo}
-                        maxCombo={game.isOver() ? 0 : game.max_combo}
-                        hammerCount={
-                          game.isOver() ? 0 : game.hammer - game.hammer_used
-                        }
-                        totemCount={
-                          game.isOver() ? 0 : game.totem - game.totem_used
-                        }
-                        waveCount={
-                          game.isOver() ? 0 : game.wave - game.wave_used
-                        }
-                        account={account}
-                        game={game}
-                      />
-                    </div>
-                    {isMdOrLarger && (
-                      <div className="mt-4 sm:mt-0 sm:absolute sm:right-0 sm:bottom-0 sm:mb-4 flex justify-center sm:justify-end w-full">
-                        <Surrender />
-                      </div>
-                    )}
                   </div>
-                )}
-              </div>
-            </div>
-            <TweetPreview
-              open={isPreviewOpen}
-              setOpen={setIsPreviewOpen}
-              level={level}
-              score={score}
-              imgSrc={imgData}
-              gameId={game?.id ?? ""}
-              tournamentId={game?.tournament_id ?? 0}
-            />
-            <AnimatePresence>
-              {!animationDone && (
-                <>
-                  <PalmTree
-                    image={imgAssets.palmRight}
-                    initial="visibleRight"
-                    animate="hiddenRight"
-                    duration={3}
-                    position="right"
-                  />
-                  <PalmTree
-                    image={imgAssets.palmLeft}
-                    initial="visibleLeft"
-                    animate="hiddenLeft"
-                    duration={3}
-                    position="left"
-                  />
+
+                  {!isTournamentsOpen && (
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button className="text-md md:text-2xl mt-2 md:p-4 p-2 bg-primary text-secondary rounded-lg">
+                          Give feedback and get a chance to win STRK
+                        </Button>
+                      </DialogTrigger>
+
+                      <DialogContent
+                        aria-describedby={undefined}
+                        className="sm:max-w-[700px] w-[95%] h-[580px] flex flex-col mx-auto justify-start items-center bg-opacity-50 rounded-lg shadow-lg"
+                      >
+                        <DialogHeader className="flex items-center">
+                          <DialogTitle>Feedback</DialogTitle>
+                        </DialogHeader>
+                        <div className="flex-grow overflow-auto px-2 w-full h-full">
+                          <GoogleFormEmbed />
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+                  )}
                 </>
               )}
-            </AnimatePresence>
-          </BackGroundBoard>
-        </BackGroundBoard>
+              {!!game && isGameOn === "isOn" && (
+                <div className="relative w-full">
+                  <div
+                    ref={gameGrid}
+                    className="flex flex-col items-center game-container"
+                  >
+                    <GameBoard
+                      // Check if game is over because otherwise we can display
+                      // previous game data on the board while the new game is starting
+                      // and torii indexing
+                      initialGrid={grid}
+                      nextLine={gameIsOver ? [] : game.next_row}
+                      score={gameIsOver ? 0 : game.score}
+                      combo={gameIsOver ? 0 : game.combo}
+                      maxCombo={gameIsOver ? 0 : game.max_combo}
+                      hammerCount={
+                        gameIsOver ? 0 : game.hammer - game.hammer_used
+                      }
+                      totemCount={gameIsOver ? 0 : game.totem - game.totem_used}
+                      waveCount={gameIsOver ? 0 : game.wave - game.wave_used}
+                      account={account}
+                      game={game}
+                    />
+                  </div>
+                  {isMdOrLarger && (
+                    <div className="mt-4 sm:mt-0 sm:absolute sm:right-0 sm:bottom-0 sm:mb-4 flex justify-center sm:justify-end w-full">
+                      <Surrender />
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          <TweetPreview
+            open={isPreviewOpen}
+            setOpen={setIsPreviewOpen}
+            level={level}
+            score={score}
+            imgSrc={imgData}
+            gameId={game?.id ?? ""}
+            tournamentId={game?.tournament_id ?? 0}
+          />
+          <AnimatePresence>
+            {!animationDone && (
+              <>
+                <PalmTree
+                  image={imgAssets.palmRight}
+                  initial="visibleRight"
+                  animate="hiddenRight"
+                  duration={3}
+                  position="right"
+                />
+                <PalmTree
+                  image={imgAssets.palmLeft}
+                  initial="visibleLeft"
+                  animate="hiddenLeft"
+                  duration={3}
+                  position="left"
+                />
+              </>
+            )}
+          </AnimatePresence>
+        </div>
       </div>
     </div>
   );