diff --git a/Project-11-Tic-Tac-Toe/package-lock.json b/Project-11-Tic-Tac-Toe/package-lock.json
index 858209f..917dcda 100644
--- a/Project-11-Tic-Tac-Toe/package-lock.json
+++ b/Project-11-Tic-Tac-Toe/package-lock.json
@@ -8,6 +8,7 @@
       "name": "react-essentials-deep-dive-adv",
       "version": "0.0.0",
       "dependencies": {
+        "i": "^0.3.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -2226,6 +2227,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/i": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/i/-/i-0.3.7.tgz",
+      "integrity": "sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
diff --git a/Project-11-Tic-Tac-Toe/package.json b/Project-11-Tic-Tac-Toe/package.json
index bf4de9a..aaa5514 100644
--- a/Project-11-Tic-Tac-Toe/package.json
+++ b/Project-11-Tic-Tac-Toe/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "i": "^0.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/Project-11-Tic-Tac-Toe/src/App.jsx b/Project-11-Tic-Tac-Toe/src/App.jsx
index 310e8e6..854e272 100644
--- a/Project-11-Tic-Tac-Toe/src/App.jsx
+++ b/Project-11-Tic-Tac-Toe/src/App.jsx
@@ -42,6 +42,7 @@ function deriveGameBoard(gameTurns) {
 
 function deriveWinner(gameBoard, players) {
   let winner;
+  let winningCombination = null; // Added this line
   for (const combination of WINNING_COMBINATIONS) {
     const firstSquareSymbol = gameBoard[combination[0].row][combination[0].col];
     const secondSquareSymbol =
@@ -54,10 +55,12 @@ function deriveWinner(gameBoard, players) {
       firstSquareSymbol === thirdSquareSymbol
     ) {
       winner = players[firstSquareSymbol];
+      winningCombination = combination; // Added this line
+      break;
     }
   }
 
-  return winner;
+  return { winner, winningCombination }; // Changed this line to return both winner and winningCombination
 }
 
 function App() {
@@ -66,7 +69,7 @@ function App() {
 
   const activePlayer = deriveActivePlayer(gameTurns);
   const gameBoard = deriveGameBoard(gameTurns);
-  const winner = deriveWinner(gameBoard, players);
+  const { winner, winningCombination } = deriveWinner(gameBoard, players); // Changed this line
   const hasDraw = gameTurns.length === 9 && !winner;
 
   const handleSelectSquare = (rowIndex, colIndex) => {
@@ -118,7 +121,11 @@ function App() {
         {(winner || hasDraw) && (
           <GameOver winner={winner} onRestart={handleRestart} />
         )}
-        <GameBoard onSelectSquare={handleSelectSquare} board={gameBoard} />
+        <GameBoard 
+        onSelectSquare={handleSelectSquare} 
+        board={gameBoard} 
+        winningCombination={winningCombination} // Added this line to pass the winning combination
+        />
       </div>
       <Log turns={gameTurns} />
     </main>
diff --git a/Project-11-Tic-Tac-Toe/src/components/GameBoard.jsx b/Project-11-Tic-Tac-Toe/src/components/GameBoard.jsx
index cbbe971..a00ae45 100644
--- a/Project-11-Tic-Tac-Toe/src/components/GameBoard.jsx
+++ b/Project-11-Tic-Tac-Toe/src/components/GameBoard.jsx
@@ -1,6 +1,13 @@
 import React, { useState } from "react";
 
-function GameBoard({ onSelectSquare, board }) {
+function GameBoard({ onSelectSquare, board , winningCombination}) { // Added winningCombination as a parameter
+  // Function to check if a square is part of the winning combination
+  const isWinningSquare = (row, col) => {
+    return winningCombination?.some(
+      (comb) => comb.row === row && comb.col === col
+    );
+  };
+
   return (
     <ol id="game-board">
       {board.map((row, rowIndex) => (
@@ -11,6 +18,17 @@ function GameBoard({ onSelectSquare, board }) {
                 <button
                   onClick={() => onSelectSquare(rowIndex, colIndex)}
                   disabled={playerSymbol ?? false}
+                  style={{
+                    width: '8rem',
+                    height: '8rem',
+                    border: 'none',
+                    background: isWinningSquare(rowIndex, colIndex) ? 'green' : '#aca788', // Change background color for winning square
+                    color: '#3f3b00',
+                    fontSize: '5rem',
+                    cursor: 'pointer',
+                    fontFamily: '"Caprasimo", cursive',
+                    padding: '1rem',
+                  }} 
                 >
                   {playerSymbol}
                 </button>
@@ -18,7 +36,8 @@ function GameBoard({ onSelectSquare, board }) {
             ))}
           </ol>
         </li>
-      ))}
+      )
+      )}
     </ol>
   );
 }
diff --git a/Project-11-Tic-Tac-Toe/src/index.css b/Project-11-Tic-Tac-Toe/src/index.css
index 44b5740..d8d6dce 100644
--- a/Project-11-Tic-Tac-Toe/src/index.css
+++ b/Project-11-Tic-Tac-Toe/src/index.css
@@ -162,7 +162,9 @@ ol {
   padding: 0;
   flex-direction: column;
 }
-
+#game-board button:hover {
+  background-color: #f8ca31; /* Change background on hover */
+}
 #game-board ol {
   display: flex;
   flex-wrap: wrap;
@@ -343,3 +345,7 @@ ol {
     transform: scale(1);
   }
 }
+
+
+
+