diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index a338439..8823fc7 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -89,12 +89,6 @@ importers:
       react-icons:
         specifier: ^5.2.1
         version: 5.4.0(react@18.3.1)
-      react-router:
-        specifier: ^7.0.2
-        version: 7.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-router-dom:
-        specifier: ^7.0.2
-        version: 7.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-simple-flex-grid:
         specifier: ^1.3.21
         version: 1.3.21
@@ -6326,23 +6320,6 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
-  react-router-dom@7.1.1:
-    resolution: {integrity: sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      react: '>=18'
-      react-dom: '>=18'
-
-  react-router@7.1.1:
-    resolution: {integrity: sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      react: '>=18'
-      react-dom: '>=18'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-
   react-scripts@5.0.1:
     resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
     engines: {node: '>=14.0.0'}
@@ -15336,22 +15313,6 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-router-dom@7.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-router: 7.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-
-  react-router@7.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@types/cookie': 0.6.0
-      cookie: 1.0.2
-      react: 18.3.1
-      set-cookie-parser: 2.7.1
-      turbo-stream: 2.4.0
-    optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
-
   react-scripts@5.0.1(@babel/plugin-syntax-flow@7.26.0(@babel/core@7.26.0))(@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.0))(@types/babel__core@7.20.5)(eslint@8.57.1)(react@18.3.1)(sass@1.83.0)(type-fest@0.21.3)(typescript@5.3.2):
     dependencies:
       '@babel/core': 7.26.0
diff --git a/client/postcss.config.js b/client/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/client/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 05dde49..2f2b1e1 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -33,6 +33,8 @@ import { SDK } from "@dojoengine/sdk";
 import Settings from "./components/Settings";
 import ToolboxPage from "./components/Toolbox";
 import { AvatarProvider } from "./context/avatar-context";
+import GamePlay from "./components/GamePlay";
+import { GameProvider } from "./context/game-context-2.";
 
 const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
 
@@ -85,8 +87,7 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
     if (options.gameIsOngoing) {
       if (options.winners.length === options.playersLength - 1) {
         toast(
-          `The game has ended. Player ${
-            chance[options.winners[0]]
+          `The game has ended. Player ${chance[options.winners[0]]
           } is the winner`
         );
         setGameOptions({
@@ -127,123 +128,129 @@ const App = ({ sdk }: { sdk: SDK<StarkludoSchemaType> }) => {
                 <BoardContext.Provider value={{ board, toggleBoard }}>
                   <ColorProvider>
                     <DiceProvider>
-                    <AvatarProvider>
-                      <Routes>
-                        <Route
-                          path="/color-settings"
-                          element={<ColorSettings />}
-                        />
-                        <Route path="/settings" element={<Settings />} />
-                        <Route path="/toolbox" element={<ToolboxPage />} />
-                        <Route
-                          path="/"
-                          element={
-                            <>
-                              <div className="game-behaviour-warning">
-                                <FiAlertTriangle size={20} />
-                                StarkLudo is still in active development{" "}
-                                <FiZap color="yellow" size={20} />
-                              </div>
-                              <div className="layout-container">
-                                <div className="layout-stretch-lock">
-                                  <div className="mobile-header">
-                                    <Header />
-                                  </div>
-                                  <Row gutter={0}>
-                                    <Col xs={12} sm={12} md={7} lg={7}>
-                                      <Ludo />
-                                    </Col>
-                                    <Col xs={12} sm={12} md={5} lg={5}>
-                                      <div className="sidebar">
-                                        <div>
-                                          <div>
-                                            <div className="desktop-header">
-                                              <Header />
-                                            </div>
-                                            <Menu />
-                                            {/* <RestartGame /> */}
-                                            <Alert />
-                                            <Dice />
-                                            {activeWindow === "account" ? (
-                                              <ControlWindowLayout
-                                                toggle={() =>
-                                                  setActiveWindow("")
-                                                }
-                                                title="PROFILE"
-                                                subtitle="Your Profile Information"
-                                              >
-                                                <GameAccount />
-                                              </ControlWindowLayout>
-                                            ) : null}
+                      <AvatarProvider>
+                        <Routes>
+                          <Route
+                            path="/color-settings"
+                            element={<ColorSettings />}
+                          />
+                          <Route path="/settings" element={<Settings />} />
+                          <Route path="/toolbox" element={<ToolboxPage />} />
+                          <Route
+                            path="/"
+                            element={
+                              // <>
+                              //   <div className="game-behaviour-warning">
+                              //     <FiAlertTriangle size={20} />
+                              //     StarkLudo is still in active development{" "}
+                              //     <FiZap color="yellow" size={20} />
+                              //   </div>
+                              //   <div className="layout-container">
+                              //     <div className="layout-stretch-lock">
+                              //       <div className="mobile-header">
+                              //         <Header />
+                              //       </div>
+                              //       <Row gutter={0}>
+                              //         <Col xs={12} sm={12} md={7} lg={7}>
+                              //           <Ludo />
+                              //         </Col>
+                              //         <Col xs={12} sm={12} md={5} lg={5}>
+                              //           <div className="sidebar">
+                              //             <div>
+                              //               <div>
+                              //                 <div className="desktop-header">
+                              //                   <Header />
+                              //                 </div>
+                              //                 {<Menu />}
+                              //                 {/* <RestartGame /> */}
+                              //                 <Alert />
+                              //                 <Dice />
+                              //                 {activeWindow === "account" ? (
+                              //                   <ControlWindowLayout
+                              //                     toggle={() =>
+                              //                       setActiveWindow("")
+                              //                     }
+                              //                     title="PROFILE"
+                              //                     subtitle="Your Profile Information"
+                              //                   >
+                              //                     <GameAccount />
+                              //                   </ControlWindowLayout>
+                              //                 ) : null}
 
-                                            {activeWindow === "leaderboard" ? (
-                                              <ControlWindowLayout
-                                                toggle={() =>
-                                                  setActiveWindow("")
-                                                }
-                                                title="LEADERBOARD"
-                                                subtitle="Global Player Rankings"
-                                              >
-                                                <Leaderboard />
-                                              </ControlWindowLayout>
-                                            ) : null}
+                              //                 {activeWindow === "leaderboard" ? (
+                              //                   <ControlWindowLayout
+                              //                     toggle={() =>
+                              //                       setActiveWindow("")
+                              //                     }
+                              //                     title="LEADERBOARD"
+                              //                     subtitle="Global Player Rankings"
+                              //                   >
+                              //                     <Leaderboard />
+                              //                   </ControlWindowLayout>
+                              //                 ) : null}
 
-                                            {activeWindow === "multiplayer" ? (
-                                              <ControlWindowLayout
-                                                toggle={() =>
-                                                  setActiveWindow("")
-                                                }
-                                                title="MULTIPLAYER"
-                                                subtitle="Choose An Account To Play With"
-                                              >
-                                                <Multiplayer />
-                                              </ControlWindowLayout>
-                                            ) : null}
+                              //                 {activeWindow === "multiplayer" ? (
+                              //                   <ControlWindowLayout
+                              //                     toggle={() =>
+                              //                       setActiveWindow("")
+                              //                     }
+                              //                     title="MULTIPLAYER"
+                              //                     subtitle="Choose An Account To Play With"
+                              //                   >
+                              //                     <Multiplayer />
+                              //                   </ControlWindowLayout>
+                              //                 ) : null}
 
-                                            {activeWindow === "toolbox" ? (
-                                              <ControlWindowLayout
-                                                toggle={() =>
-                                                  setActiveWindow("")
-                                                }
-                                                title="TOOLBOX"
-                                                subtitle="Get All Your Items And Settings Done"
-                                              >
-                                                <Toolbox
-                                                  activeCategory={
-                                                    activeCategory
-                                                  }
-                                                  onCategoryClick={
-                                                    handleCategoryClick
-                                                  }
-                                                />
-                                              </ControlWindowLayout>
-                                            ) : null}
+                              //                 {activeWindow === "toolbox" ? (
+                              //                   <ControlWindowLayout
+                              //                     toggle={() =>
+                              //                       setActiveWindow("")
+                              //                     }
+                              //                     title="TOOLBOX"
+                              //                     subtitle="Get All Your Items And Settings Done"
+                              //                   >
+                              //                     <Toolbox
+                              //                       activeCategory={
+                              //                         activeCategory
+                              //                       }
+                              //                       onCategoryClick={
+                              //                         handleCategoryClick
+                              //                       }
+                              //                     />
+                              //                   </ControlWindowLayout>
+                              //                 ) : null}
 
-                                            {activeWindow === "help" && (
-                                              <GameHelp
-                                                onClose={() =>
-                                                  setActiveWindow("")
-                                                }
-                                              />
-                                            )}
-                                            <Control
-                                              toggleActiveWindow={
-                                                toggleActiveWindow
-                                              }
-                                            />
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </Col>
-                                  </Row>
-                                </div>
-                              </div>
-                              <Footer />
-                            </>
-                          }
-                        />
-                      </Routes>
-                     </AvatarProvider> 
+                              //                 {activeWindow === "help" && (
+                              //                   <GameHelp
+                              //                     onClose={() =>
+                              //                       setActiveWindow("")
+                              //                     }
+                              //                   />
+                              //                 )}
+                              //                 <Control
+                              //                   toggleActiveWindow={
+                              //                     toggleActiveWindow
+                              //                   }
+                              //                 />
+                              //               </div>
+                              //             </div>
+                              //           </div>
+                              //         </Col>
+                              //       </Row>
+                              //     </div>
+                              //   </div>
+                              //   <Footer />
+                              // </>
+
+                              <>
+                                <GameProvider>
+                                  <GamePlay />
+                                </GameProvider>
+                              </>
+                            }
+                          />
+                        </Routes>
+                      </AvatarProvider>
                     </DiceProvider>
                   </ColorProvider>
                 </BoardContext.Provider>
diff --git a/client/src/assets/images/bg-dice.png b/client/src/assets/images/bg-dice.png
new file mode 100644
index 0000000..de35069
Binary files /dev/null and b/client/src/assets/images/bg-dice.png differ
diff --git a/client/src/assets/images/bg.png b/client/src/assets/images/bg.png
deleted file mode 100644
index c450dbd..0000000
Binary files a/client/src/assets/images/bg.png and /dev/null differ
diff --git a/client/src/assets/images/blue.png b/client/src/assets/images/blue.png
new file mode 100644
index 0000000..1358184
Binary files /dev/null and b/client/src/assets/images/blue.png differ
diff --git a/client/src/assets/images/board.png b/client/src/assets/images/board.png
index de30a05..0c32df6 100644
Binary files a/client/src/assets/images/board.png and b/client/src/assets/images/board.png differ
diff --git a/client/src/assets/images/box1.png b/client/src/assets/images/box1.png
new file mode 100644
index 0000000..dfc9fc4
Binary files /dev/null and b/client/src/assets/images/box1.png differ
diff --git a/client/src/assets/images/box2.png b/client/src/assets/images/box2.png
new file mode 100644
index 0000000..d187a9e
Binary files /dev/null and b/client/src/assets/images/box2.png differ
diff --git a/client/src/assets/images/close_icon.svg b/client/src/assets/images/close_icon.svg
deleted file mode 100644
index 02d6743..0000000
--- a/client/src/assets/images/close_icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 12L0 3.5L3 0.5L11 7.5L20 0.5L23 3.5L16 12L23 20.5L20 23.5L11 17L3 23.5L0 20.5L7 12Z" fill="#854D15"/>
-</svg>
diff --git a/client/src/assets/images/dice.png b/client/src/assets/images/dice.png
new file mode 100644
index 0000000..daaaa18
Binary files /dev/null and b/client/src/assets/images/dice.png differ
diff --git a/client/src/assets/images/favicon.png b/client/src/assets/images/favicon.png
deleted file mode 100644
index 0ab3082..0000000
Binary files a/client/src/assets/images/favicon.png and /dev/null differ
diff --git a/client/src/assets/images/golden.png b/client/src/assets/images/golden.png
new file mode 100644
index 0000000..eb957af
Binary files /dev/null and b/client/src/assets/images/golden.png differ
diff --git a/client/src/assets/images/green.png b/client/src/assets/images/green.png
new file mode 100644
index 0000000..52b88e8
Binary files /dev/null and b/client/src/assets/images/green.png differ
diff --git a/client/src/assets/images/pause.png b/client/src/assets/images/pause.png
new file mode 100644
index 0000000..0466ba6
Binary files /dev/null and b/client/src/assets/images/pause.png differ
diff --git a/client/src/assets/images/player1.png b/client/src/assets/images/player1.png
new file mode 100644
index 0000000..362e2d8
Binary files /dev/null and b/client/src/assets/images/player1.png differ
diff --git a/client/src/assets/images/player2.png b/client/src/assets/images/player2.png
new file mode 100644
index 0000000..4978f9a
Binary files /dev/null and b/client/src/assets/images/player2.png differ
diff --git a/client/src/assets/images/player3.png b/client/src/assets/images/player3.png
new file mode 100644
index 0000000..2d6a23d
Binary files /dev/null and b/client/src/assets/images/player3.png differ
diff --git a/client/src/assets/images/player4.png b/client/src/assets/images/player4.png
new file mode 100644
index 0000000..398fa2e
Binary files /dev/null and b/client/src/assets/images/player4.png differ
diff --git a/client/src/assets/images/red.png b/client/src/assets/images/red.png
new file mode 100644
index 0000000..8a8749c
Binary files /dev/null and b/client/src/assets/images/red.png differ
diff --git a/client/src/assets/images/retro.png b/client/src/assets/images/retro.png
new file mode 100644
index 0000000..c53d710
Binary files /dev/null and b/client/src/assets/images/retro.png differ
diff --git a/client/src/assets/images/unique.png b/client/src/assets/images/unique.png
new file mode 100644
index 0000000..d772e4f
Binary files /dev/null and b/client/src/assets/images/unique.png differ
diff --git a/client/src/assets/images/yellow.png b/client/src/assets/images/yellow.png
new file mode 100644
index 0000000..c4bc006
Binary files /dev/null and b/client/src/assets/images/yellow.png differ
diff --git a/client/src/components/CenterTile.tsx b/client/src/components/CenterTile.tsx
new file mode 100644
index 0000000..fd360ec
--- /dev/null
+++ b/client/src/components/CenterTile.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Dice from './Dice';
+import HighlightedDiv from './HighligtedDiv';
+
+interface CenterTileProps {
+    color?: string;
+    width?: string;
+    height?: string;
+}
+
+const CenterTile: React.FC<CenterTileProps> = ({ color, width, height }) => {
+    return (
+        <div className="w-40 h-36 flex justify-between">
+            <div className="flex  justify-between w-full border border-[#5cd7f8]">
+                <div className="border h-full w-1/4 border-[#5cd7f8]">
+                    <div className="border h-1/4 border-[#5cd7f8]"></div>
+                    <HighlightedDiv className="bg-[#545841] border h-2/4 border-[#5cd7f8]" ></HighlightedDiv>
+                    <div className="border h-1/4 border-[#5cd7f8]"></div>
+                </div>
+
+                <div className="border w-2/4 border-[#5cd7f8]">
+                    <HighlightedDiv className="bg-[#626b74] border h-1/4 border-[#5cd7f8]"></HighlightedDiv>
+                    <div
+                        className="border h-[75px] w-[107px] overflow-none bg-white border-[#5cd7f8] flex items-center justify-center relative"
+
+                    >
+                        <Dice onRoll={function (numbers: number[]): void {
+                            throw new Error('Function not implemented.');
+                        } } />
+                    </div>
+                    <HighlightedDiv className="border h-1/4 bg-[#973d34] border-[#5cd7f8]"></HighlightedDiv>
+                </div>
+                <div className="border w-1/4 border-[#5cd7f8]">
+                    <div className="border h-1/4 border-[#5cd7f8]"></div>
+                    <HighlightedDiv className="bg-[#c89252] border h-2/4 border-[#5cd7f8]"></HighlightedDiv>
+                    <div className="border h-1/4 border-[#5cd7f8]"></div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CenterTile;
diff --git a/client/src/components/ColorSettings.tsx b/client/src/components/ColorSettings.tsx
index 9348f75..b88d8cb 100644
--- a/client/src/components/ColorSettings.tsx
+++ b/client/src/components/ColorSettings.tsx
@@ -132,4 +132,4 @@ const СolorSettings = () => {
   );
 };
 
-export default СolorSettings;
+export default СolorSettings;
\ No newline at end of file
diff --git a/client/src/components/ControlWindows/GameHelp.tsx b/client/src/components/ControlWindows/GameHelp.tsx
index 5910b0f..46cc42a 100644
--- a/client/src/components/ControlWindows/GameHelp.tsx
+++ b/client/src/components/ControlWindows/GameHelp.tsx
@@ -1,94 +1,62 @@
-import React from "react";
-import close from "../../assets/images/close_icon.svg";
 import "../../styles/GameHelp.scss";
 
-interface GameHelpProps {
-  onClose: () => void;
-}
-
-interface GameRule {
-  id: number;
-  description: string;
-}
-
-const GAME_RULES: GameRule[] = [
-  {
-    id: 1,
-    description:
-      "The game starts with each player choosing a set of four pieces (usually colored red, blue, green, and yellow) and placing them on the starting square.",
-  },
-  {
-    id: 2,
-    description:
-      "The objective of the game is to move all four pieces around the board and return them to the starting square before your opponents.",
-  },
-  {
-    id: 3,
-    description:
-      "On each turn, players roll two dice to determine how many spaces they can move their pieces.",
-  },
-  {
-    id: 4,
-    description:
-      "The number on each die represents how many spaces a piece can move. For example, if a player rolls a 3 and a 6, they can move one piece 3 spaces and another piece 6 spaces.",
-  },
-  {
-    id: 5,
-    description: "Pieces can only move forward, never backward.",
-  },
-  {
-    id: 6,
-    description:
-      'If a piece lands on a square occupied by an opponent\'s piece, it can "knock off" that piece and send it back to the starting square.',
-  },
-  {
-    id: 7,
-    description:
-      "A piece can only be moved to a square that is empty or occupied by an opponent's piece.",
-  },
-  {
-    id: 8,
-    description:
-      "If a player rolls a double (two 6s), they can move one piece the total number of spaces shown on the dice.",
-  },
-  {
-    id: 9,
-    description:
-      "If a player has 3 pieces reached Home with only one left, and the piece reached the home column, the player should be shifted to one Dice. Playing with 2 dice requires getting the exact number, which is not possible with one.",
-  },
-  {
-    id: 10,
-    description:
-      "If a player has no pieces on the board, they can only roll the dice to try to get a double, which allows them to enter a piece into play.",
-  },
-  {
-    id: 11,
-    description:
-      "The game ends when one player has all four pieces back on the starting square. That player is the winner.",
-  },
-];
-
-const GameHelp: React.FC<GameHelpProps> = ({ onClose }) => {
+const GameHelp = () => {
   return (
-    <div className="modal-overlay">
-      <div className="modal-content">
-        <div className="modal-header">
-          <h2>Get Guides, Tips, And Tricks Needed For A Successful Game</h2>
-          <button onClick={onClose} className="close-button">
-            <img src={close} alt="close icon" />
-          </button>
-        </div>
-        <hr className="border_help" />
-        <div className="game-help">
-          <ul className="game-rules-rules">
-            {GAME_RULES.map(({ id, description }) => (
-              <li key={id}>
-                <span>Rule {id}:</span>
-                <div>{description}</div>
-              </li>
-            ))}
-          </ul>
-        </div>
+    <div className="game-help">
+      <div className="rules">
+        <ul className="game-rules-rules">
+          <li>
+            <span>Rule 1:</span> The game starts with each player choosing a set
+            of four pieces (usually colored red, blue, green, and yellow) and
+            placing them on the starting square.
+          </li>
+          <li>
+            <span>Rule 2:</span> The objective of the game is to move all four
+            pieces around the board and return them to the starting square
+            before your opponents.
+          </li>
+          <li>
+            <span>Rule 3:</span> On each turn, players roll two dice to
+            determine how many spaces they can move their pieces.
+          </li>
+          <li>
+            <span>Rule 4:</span> The number on each die represents how many
+            spaces a piece can move. For example, if a player rolls a 3 and a 6,
+            they can move one piece 3 spaces and another piece 6 spaces.
+          </li>
+          <li>
+            <span>Rule 5:</span> Pieces can only move forward, never backward.
+          </li>
+          <li>
+            <span>Rule 6:</span> If a piece lands on a square occupied by an
+            opponent’s piece, it can “knock off” that piece and send it back to
+            the starting square.{" "}
+          </li>
+          <li>
+            <span>Rule 7:</span> A piece can only be moved to a square that is
+            empty or occupied by an opponent’s piece.
+          </li>
+          <li>
+            <span>Rule 8:</span> If a player rolls a double (two 6s), they can
+            move one piece the total number of spaces shown on the dice (e.g., 6
+            spaces for two 3s).
+          </li>
+          <li>
+            <span>Rule 9:</span> if a player 3 pieces reached Home, only one is
+            left. and the piece reached the home column. A person should be
+            shifted to one Dice, if the player wants to play with 2 dice he/she
+            gets the exact number which in the case of one, is not possible.
+          </li>
+          <li>
+            <span>Rule 10:</span> If a player has no pieces on the board, they
+            can only roll the dice to try to get a double, which allows them to
+            enter a piece into play.
+          </li>
+          <li>
+            <span>Rule 11:</span> The game ends when one player has all four
+            pieces back on the starting square. That player is the winner.
+          </li>
+        </ul>
       </div>
     </div>
   );
diff --git a/client/src/components/Dice.tsx b/client/src/components/Dice.tsx
index b46d52d..cf197e0 100644
--- a/client/src/components/Dice.tsx
+++ b/client/src/components/Dice.tsx
@@ -1,127 +1,154 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useContext, useRef, useState } from "react";
-import { useGame } from "../hooks/game-hook";
-import { Col } from "react-simple-flex-grid";
-import "../styles/Dice.scss";
-import ThreeDice from 'react-dice-roll';
-import { GameContext } from "../context/game-context";
-import RestartModal from "./RestartModal";
-import diceSound from "../assets/audio/shaking-dice-25620.mp3";
-
-const Dice = () => {
-  const [restart, setRestart] = useState(false);
-  const { moveValidator, endGame: restartGame } = useGame();
-  const { options, setGameOptions } = useContext(GameContext);
-  const diceRef = useRef<any>(null);
-
-  function handleRestartGame() {
-    setRestart(true);
-  }
-
-  function handleConfirm() {
-    restartGame();
-    setRestart(false);
-  }
-
-  function handleCancle() {
-    setRestart(false);
-  }
-
-  const deterministicRoll = (value: number) => {
-    if (diceRef.current) {
-      diceRef.current.rollDice(value); // Call the rollDice method with a fixed value
+import React, { useState, useEffect, useRef } from 'react';
+import { useGame } from '../context/game-context-2.';
+
+interface DiceProps {
+  onRoll: (numbers: number[]) => void;
+  controlledValues?: [number, number]; // Optional controlled values for the dice
+}
+
+const Dice: React.FC<DiceProps> = ({ onRoll, controlledValues }) => {
+  const { players, currentTurn, rolledNumber1, rolledNumber2 } = useGame();
+  const [dice1, setDice1] = useState(1);
+  const [dice2, setDice2] = useState(1);
+  const dice1Ref = useRef<HTMLDivElement | null>(null);
+  const dice2Ref = useRef<HTMLDivElement | null>(null);
+
+  // If controlledValues prop is passed, use it
+  useEffect(() => {
+    if (controlledValues) {
+      setDice1(controlledValues[0]);
+      setDice2(controlledValues[1]);
     }
-  };
+  }, [controlledValues]);
 
-  // The is the argument for the rollDie function
-  const randomRollAmount = () => {
-    const rollAmount = Math.floor(Math.random() * 30 + 15);
-    return rollAmount;
-  };
+  // const rollDice = () => {
+  //   const rolledNumber1 = Math.floor(Math.random() * 6) + 1;
+  //   const rolledNumber2 = Math.floor(Math.random() * 6) + 1;
+  //   setDice1(rolledNumber1);
+  //   setDice2(rolledNumber2);
+  //   onRoll([rolledNumber1, rolledNumber2]);
 
-  // The end result is simply a random number picked between 1 and 6
-  const randomRollResult = async () => {
+  //   // Trigger the dice roll animation again
+  //   if (dice1Ref.current && dice2Ref.current) {
+  //     dice1Ref.current.classList.add('rolling');
+  //     dice2Ref.current.classList.add('rolling');
 
-    let rollResult = 6;
+  //     setTimeout(() => {
+  //       dice1Ref.current?.classList.remove('rolling');
+  //       dice2Ref.current?.classList.remove('rolling');
+  //     }, 500); // Match the duration of the animation
+  //   }
 
-    rollResult = Math.floor(Math.random() * 6 + 1);
-    moveValidator(rollResult);
-    return rollResult;
-  };
+  //   // Pass the turn to the next player
+  //   const nextPlayerId = currentTurn === 4 ? 1 : currentTurn + 1;
+  //   setPlayerTurn(nextPlayerId); // Update the turn to the next player
+  // };
 
-  // This adds a setInterval to make the dots on the die
-
-  const rollDie = async (numberOfRolls: number) => {
-    let counter = 1;
-    let number = 1;
-    const rollState = async () => {
-      // when to stop the roll
-      if (counter >= numberOfRolls) {
-        clearInterval(rolling);
-        // The result on die
-        const x = await randomRollResult();
-        deterministicRoll(x);
-        moveValidator(x); // Validate move after rolling
-      } else {
-        // rolls the die by quickly displaying then hiding them
-        deterministicRoll(number)
-        // incrementer values for setInterval
-        counter += 1;
-        // which dots to show on die for 1 to 6
-        number += 1;
-        // Keep looping the values from 1 to 6
-        if (number > 6) {
-          number = 1;
-        }
-      }
+  const getDotPositions = (num: number) => {
+    const positions: { [key: number]: [number, number][] } = {
+      1: [[1, 1]],
+      2: [
+        [0, 0],
+        [2, 2],
+      ],
+      3: [
+        [0, 0],
+        [1, 1],
+        [2, 2],
+      ],
+      4: [
+        [0, 0],
+        [0, 2],
+        [2, 0],
+        [2, 2],
+      ],
+      5: [
+        [0, 0],
+        [0, 2],
+        [1, 1],
+        [2, 0],
+        [2, 2],
+      ],
+      6: [
+        [0, 0],
+        [0, 1],
+        [0, 2],
+        [2, 0],
+        [2, 1],
+        [2, 2],
+      ],
     };
-    const rolling = setInterval(rollState, 125);
+    return positions[num as keyof typeof positions];
   };
 
-  const roller = async () => {
-    if (
-      !options.hasThrownDice &&
-      options.gameIsOngoing &&
-      !options.winners.includes(options.playerChance)
-    ) {
-      setGameOptions({ hasThrownDice: true, winners: [] });
-      await rollDie(randomRollAmount());
-    }
-  };
+  const dots1 = getDotPositions(rolledNumber1);
+  const dots2 = getDotPositions(rolledNumber2);
+
+  const renderDice = (dots: [number, number][]) => (
+    <div className="grid grid-rows-3 grid-cols-3 w-full h-full p-2">
+      {Array.from({ length: 9 }).map((_, index) => {
+        const row = Math.floor(index / 3);
+        const col = index % 3;
+        const isDot = dots?.some(([r, c]) => r === row && c === col);
+
+        return (
+          <div
+            key={index}
+            className={`flex justify-center items-center ${isDot ? 'bg-[#E6E6E5] rounded-full w-[6px] h-[6px]' : ''}`}
+          ></div>
+        );
+      })}
+    </div>
+  );
 
   return (
-    <React.Fragment>
-      {options.gameIsOngoing && (
-        <div className="dice-container">
-          <Col xs={options.hasThrownDice ? 12 : 6}>
-            <ThreeDice disabled={!options.hasThrownDice} ref={diceRef} sound={diceSound} rollingTime={1000} size={70} />
-          </Col>
-            <Col xs={6}>
-              <div style={{
-              visibility: (options.hasThrownDice || options.winners.includes(options.playerChance)) ? "hidden":"visible"
-              }}>
-              <div onClick={roller} className="button-container">
-                {options.gameIsOngoing && (<a className="start-over" onClick={(e) => {
-                  e.stopPropagation();
-                  handleRestartGame();
-                }}>Start Over</a>)}
-                <button className="roll-button">
-                  <span className="roll-text">ROLL</span>
-                </button>
-              </div>
-              </div>
-            </Col>
+    <div className="dice-container flex flex-col justify-center px-2 w-full h-full relative">
+      {/* First Dice */}
+      <div className="w-[60%] flex justify-start">
+        <div
+          ref={dice1Ref}
+          className="bg-gray-800 flex justify-center items-center rounded-lg shadow-md cursor-pointer w-8 h-8"
+        >
+          {renderDice(dots1)}
         </div>
-      )}
-      {restart && (
-        <RestartModal
-          message="Are you sure you want to restart the game?"
-          extraMessage="If you click yes, there’s no going back"
-          onConfirm={handleConfirm}
-          onCancel={handleCancle}
-        />
-      )}
-    </React.Fragment>
+      </div>
+
+      {/* Second Dice */}
+      <div className="w-[60%] flex justify-end">
+        <div
+          ref={dice2Ref}
+          className="bg-gray-800 flex justify-center items-center rounded-lg shadow-md cursor-pointer w-8 h-8"
+        >
+          {renderDice(dots2)}
+        </div>
+      </div>
+
+      <style>
+        {`
+          .rolling {
+            animation: roll 0.9s ease-in-out;
+          }
+
+          @keyframes roll {
+            0% {
+              transform: rotate(0deg) scale(1);
+            }
+            25% {
+              transform: rotate(45deg) scale(1.1);
+            }
+            50% {
+              transform: rotate(90deg) scale(1);
+            }
+            75% {
+              transform: rotate(135deg) scale(1.1);
+            }
+            100% {
+              transform: rotate(180deg) scale(1);
+            }
+          }
+        `}
+      </style>
+    </div>
   );
 };
 
diff --git a/client/src/components/GamePlay.tsx b/client/src/components/GamePlay.tsx
new file mode 100644
index 0000000..253a658
--- /dev/null
+++ b/client/src/components/GamePlay.tsx
@@ -0,0 +1,140 @@
+import bgImg from "../assets/images/bg-dice.png";
+import dice from '../assets/images/dice.png';
+import player1 from '../assets/images/player1.png';
+import blue from '../assets/images/blue.png';
+import player2 from '../assets/images/player2.png';
+import yellow from '../assets/images/yellow.png';
+import player3 from '../assets/images/player3.png';
+import green from '../assets/images/green.png';
+import player4 from '../assets/images/player4.png';
+import red from '../assets/images/red.png';
+import LudoGame from "./LudoGame";
+import { useGame } from "../context/game-context-2.";
+
+// const players = [
+//     {
+//         id: 1,
+//         name: 'Player 1',
+//         image: player1,
+//         color: blue,
+//         piecesColor: 'blue',
+//         noOfPieces: 4,
+//         isTurn: true,
+//         backgroundColor: '#00000080',
+//     },
+//     {
+//         id: 3,
+//         name: 'Player 3',
+//         image: player3,
+//         color: green,
+//         piecesColor: 'green',
+//         noOfPieces: 4,
+//         isTurn: false,
+//         backgroundColor: '#00000080',
+//     },
+//     {
+//         id: 2,
+//         name: 'Player 2',
+//         image: player2,
+//         color: yellow,
+//         piecesColor: 'yellow',
+//         noOfPieces: 4,
+//         isTurn: false,
+//         backgroundColor: '#00000080',
+//     },
+//     {
+//         id: 4,
+//         name: 'Player 4',
+//         image: player4,
+//         color: red,
+//         piecesColor: 'red',
+//         noOfPieces: 4,
+//         isTurn: false,
+//         backgroundColor: '#00000080',
+//     },
+// ];
+
+const GamePlay = () => {
+    const { players } = useGame()
+    return (
+        <div
+            className="relative h-full w-screen bg-cover bg-center"
+            style={{
+                backgroundImage: `url(${bgImg})`,
+            }}
+        >
+            <div className="container mx-auto flex justify-center items-center py-12">
+                <div className="flex gap-8 justify-between items-center w-full max-w-7xl">
+                    <div className="flex flex-col justify-between items-start space-y-2">
+                        {players.slice(0, 2).map((player) => (
+                            <div key={player.id} className="flex flex-col justify-between items-start space-y-2">
+                                <div
+                                    className={`bg-[rgba(0,0,0,0.5)] flex flex-col items-center rounded-md p-4 text-white space-y-2 ${player.backgroundColor}`}
+                                >
+                                    <img src={player.image} className="h-28 w-20 object-cover" alt={`player ${player.id}`} />
+                                    <span className="flex gap-2 items-center">
+                                        <p className="font-bold">{player.name}</p>
+                                        <img src={player.color} alt="" />
+                                    </span>
+                                    <span className="flex items-center gap-2 text-sm font-bold">
+                                        <img src={dice} className="h-6 w-6 object-contain" alt="dice" />
+                                        {player.isTurn ? 'Your Turn' : 'Waiting'}
+                                    </span>
+                                    <div className="flex border gap-2 border-gray-300 p-2 rounded-sm mt-2">
+                                        {Array.from({ length: player.noOfPieces }).map((_, index) => {
+                                            return (
+                                                <span
+                                                    key={index}
+                                                    style={{ backgroundColor: player.piecesColor }}
+                                                    className="h-4 w-4 rounded-full"
+                                                ></span>
+
+                                            )
+                                        })}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Centered LudoGame Component */}
+                    <div className=" flex-2 lg:flex-[0.65] flex justify-center items-center">
+                        <LudoGame />
+                    </div>
+
+                    <div className="flex flex-col justify-between items-start space-y-2">
+                        {players.slice(2).map((player) => (
+                            <div key={player.id} className="flex flex-col justify-between items-start space-y-2">
+                                <div
+                                    className={`bg-[rgba(0,0,0,0.5)] flex flex-col items-center rounded-md p-4 text-white space-y-2 ${player.backgroundColor}`}
+                                >
+                                    <img src={player.image} className="h-28 w-20 object-cover" alt={`player ${player.id}`} />
+                                    <span className="flex gap-2 items-center">
+                                        <p className="font-bold">{player.name}</p>
+                                        <img src={player.color} alt="" />
+                                    </span>
+                                    <span className="flex items-center gap-2 text-sm font-bold">
+                                        <img src={dice} className="h-6 w-6 object-contain" alt="dice" />
+                                        {player.isTurn ? 'Your Turn' : 'Waiting'}
+                                    </span>
+                                    <div className="flex border gap-2 border-gray-300 p-2 rounded-sm mt-2">
+                                        {Array.from({ length: player.noOfPieces }).map((_, index) => (
+                                            <span
+                                                key={index}
+                                                style={{ backgroundColor: player.piecesColor }}
+                                                className="h-4 w-4 rounded-full"
+                                            ></span>
+
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GamePlay;
diff --git a/client/src/components/HighligtedDiv.tsx b/client/src/components/HighligtedDiv.tsx
new file mode 100644
index 0000000..dd9823e
--- /dev/null
+++ b/client/src/components/HighligtedDiv.tsx
@@ -0,0 +1,26 @@
+import React, { CSSProperties, ReactNode } from "react";
+
+interface Props {
+    style?: CSSProperties;
+    className?: string;
+    children?: ReactNode;
+    hightlighed?: boolean
+}
+
+const HighlightedDiv = ({ className, style, children, hightlighed }: Props) => {
+    return (
+        <div
+            className={`${className}  ${hightlighed ? "brightness-[1.2]" : "brightness-[0.7]"} hover:brightness-[1.2] transition-all duration-300`}
+            style={{
+                ...style,
+                // filter: hightlighed ? "brightness(1.2)" : "brightness(0.7)",
+                transition: "filter 0.3s ease",
+                cursor: 'pointer'
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default HighlightedDiv;
diff --git a/client/src/components/Ludo.tsx b/client/src/components/Ludo.tsx
index 131c25a..21b961c 100644
--- a/client/src/components/Ludo.tsx
+++ b/client/src/components/Ludo.tsx
@@ -11,7 +11,6 @@ import profile1 from "../assets/images/profile1.jpg";
 import profile2 from "../assets/images/profile2.jpg";
 import profile3 from "../assets/images/profile3.jpg";
 import profile4 from "../assets/images/profile4.jpg";
-import PlayerCorner from './PlayerCorner';
 
 const Ludo: React.FC = () => {
   const { size, tileMap } = useSize();
@@ -49,27 +48,32 @@ const Ludo: React.FC = () => {
 
   return (
     <div className={`container ${board} card`} ref={boardRef}>
-      {/* Game board */}
       {options.gameIsOngoing &&
         markers
           .slice(0, options.playersLength * 4)
           .map((m) => <Marker key={m} pos={m} size={size} tileMap={tileMap} />)}
       <LudoTiles />
 
-      {/* Player Corners */}
-      {players.map((player) => (
-        <PlayerCorner
-          key={player.id}
-          playerNumber={player.id + 1}
-          isCurrentTurn={options.playerChance === player.id}
-          playerColor={player.color}
-          avatarUrl={player.image}
-          playerName={player.name}
-          score={0}
-        />
-      ))}
+      {/* Player profile images */}
+      <div className="player-profiles">
+        {players.map((player) => (
+          <div
+            key={player.id}
+            className={`player-profile player-${player.color}`}
+          >
+            <img src={player.image} alt={player.name} />
+            <small className="username-player">{player.name}</small>
+            {options.playerChance === player.id && (
+              <span
+                className={`${player.color === "red" || player.color === "green" ? "turn-indicator" : player.color === "yellow" || player.color === "blue" ? "turn-indicator-left" : ""}`}
+              >
+                YOUR TURN
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
 
-      {/* Overlay */}
       {!options.playersLength && (
         <div className="overlay">
           <div className="overlay-child">
diff --git a/client/src/components/LudoGame.tsx b/client/src/components/LudoGame.tsx
new file mode 100644
index 0000000..1184721
--- /dev/null
+++ b/client/src/components/LudoGame.tsx
@@ -0,0 +1,188 @@
+import pauseImg from "../assets/images/pause.png";
+import { useEffect, useState } from "react";
+import PauseGame from "./PauseGame";
+import CenterTile from "./CenterTile";
+import PathTile from "./PathTile";
+import PlayerZone from "./PlayerZone";
+import { useGame } from "../context/game-context-2.";
+
+const LudoGame = () => {
+  const [pause, setPause] = useState(false);
+  const [highlightedPaths, setHighlightedPaths] = useState<number[]>([]); // Store highlighted paths
+  const onClose = () => {
+    setPause(false);
+  };
+
+  const getTilePiece = (position: number) => {
+    for (const player of players) {
+      const pieceIndex = player.pieces.indexOf(position); // Check if any piece is at the current position
+      if (pieceIndex !== -1) {
+        return { color: player.piecesColor, playerId: player.id }; // Return piece details
+      }
+    }
+    return null; // No piece at this position
+  };
+
+  const { players, rollDice, currentTurn } = useGame();
+
+  const renderPathTiles = (
+    count: number,
+    highlighted = false,
+    bgColor?: string
+  ) => {
+    return [...Array(count)].map((_, index) => (
+      <PathTile
+        key={index}
+        highlighted={highlighted}
+        bgColor={bgColor || "bg-transparent"}
+      />
+    ));
+  };
+
+  useEffect(() => {
+    // Get the player whose turn it is
+    const currentPlayer = players.find((player) => player.isTurn);
+
+    if (!currentPlayer) return;
+
+    // Check if the player has any pieces on the board
+    const hasPiecesOnBoard = currentPlayer.pieces.some((pos) => pos > 0);
+
+    if (!hasPiecesOnBoard && currentPlayer.noOfPieces > 0) {
+      // Player has no pieces on the board, add a piece to the board based on dice roll
+      const updatedPieces = [...currentPlayer.pieces];
+      updatedPieces[0] = currentPlayer.diceRoll; // Place the first piece on the board
+      currentPlayer.pieces = updatedPieces; // Update the player's pieces
+    } else {
+      // Player has pieces, highlight paths based on dice roll
+      const diceNumber = currentPlayer.diceRoll; // Get the dice roll
+      const piecePosition = currentPlayer.pieces.find((pos) => pos > 0) || 0; // Find the first piece's position
+
+      const newHighlightedPaths = [];
+      for (let i = piecePosition + 1; i <= piecePosition + diceNumber; i++) {
+        newHighlightedPaths.push(i);
+      }
+
+      setHighlightedPaths(newHighlightedPaths);
+    }
+  }, [players]);
+
+  const handleRollDice = () => {
+    rollDice();
+
+    // After rolling, check if the current player has no pieces on the board
+    const currentPlayer = players.find((player) => player.id === currentTurn);
+
+    if (
+      currentPlayer &&
+      !currentPlayer.pieces.some((pos) => pos > 0) &&
+      currentPlayer.noOfPieces > 0
+    ) {
+      // Add a piece to the board
+      const updatedPieces = [...currentPlayer.pieces];
+      updatedPieces[0] = currentPlayer.diceRoll; // Place the piece based on dice roll
+      // movePiece(currentPlayer.id); // Move the piece based on the dice roll
+    }
+  };
+
+  return (
+    <div className="flex-1 w-full">
+      <div className="flex flex-col items-center justify-between gap-4">
+        <img
+          src={pauseImg}
+          alt="pause"
+          className="cursor-pointer"
+          onClick={() => setPause(true)}
+        />
+        <div className="w-full rounded-md border-primary border-[32px] bg-[#c6ad6d]">
+          <div className="flex w-full">
+            <PlayerZone
+              hightlighed={players[1].isTurn}
+              noofPieces={players[2].noOfPieces}
+              backgroundColor="#545841"
+              borderColor="#3f4231"
+            />
+            <div className="w-40 flex border">
+              <div className="flex flex-col justify-between w-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+              <div className="flex flex-col justify-between w-2/4 bg-[#626b74] ">
+                {renderPathTiles(6, players[1].isTurn, "#626b74")}
+              </div>
+              <div className="flex flex-col justify-between w-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+            </div>
+
+            <PlayerZone
+              hightlighed={players[0].isTurn}
+              noofPieces={players[0].noOfPieces}
+              backgroundColor="#626b74"
+              borderColor="#4a5057"
+            />
+          </div>
+          <div className="flex w-full">
+            <div className="w-1/3 h-36 flex flex-col border">
+              <div className="flex justify-between h-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+              <div className="flex justify-between h-2/4 bg-[#545841] ">
+                {renderPathTiles(6, players[0].isTurn, "#545841")}
+              </div>
+              <div className="flex justify-between h-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+            </div>
+            <CenterTile />
+            <div className="w-1/3 h-36 flex flex-col border">
+              <div className="flex justify-between h-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+              <div className="flex justify-between h-2/4 bg-[#c89252] ">
+                {renderPathTiles(6, players[2].isTurn, "#c89252")}
+              </div>
+              <div className="flex justify-between h-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+            </div>
+          </div>
+          <div className="flex w-full">
+            <PlayerZone
+              hightlighed={players[3].isTurn}
+              noofPieces={players[3].noOfPieces}
+              backgroundColor="#973d34"
+              borderColor="#712e27"
+            />
+            <div className="w-1/3 flex flex-co1 border">
+              <div className="flex flex-col justify-between w-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+              <div className="flex flex-col justify-between w-2/4 bg-[#973d34] ">
+                {renderPathTiles(6, players[3].isTurn, "#973d34")}
+              </div>
+              <div className="flex flex-col justify-between w-1/4 ">
+                {renderPathTiles(6, false)}
+              </div>
+            </div>
+            <PlayerZone
+              hightlighed={players[2].isTurn}
+              noofPieces={players[1].noOfPieces}
+              backgroundColor="#c89252"
+              borderColor="#966e3d"
+            />
+          </div>
+        </div>
+        <button
+          onClick={handleRollDice}
+          className="bg-primary text-secondary px-6 py-2.5 rounded-sm font-bold"
+        >
+          Roll dice
+        </button>
+      </div>
+
+      {pause && <PauseGame onClose={onClose} />}
+    </div>
+  );
+};
+
+export default LudoGame;
diff --git a/client/src/components/PathTile.tsx b/client/src/components/PathTile.tsx
new file mode 100644
index 0000000..de9c5b1
--- /dev/null
+++ b/client/src/components/PathTile.tsx
@@ -0,0 +1,55 @@
+
+
+
+import React, { CSSProperties, ReactNode } from "react";
+
+interface PathTileProps {
+    style?: CSSProperties;
+    className?: string;
+    bgColor?: string;
+    borderColor?: string;
+    children?: ReactNode;
+    highlighted?: boolean;
+    piece?: {
+        color: string; // The color or visual identifier of the piece
+        playerId: number; // To identify which player's piece it is
+    };
+}
+
+const PathTile: React.FC<PathTileProps> = ({
+    style,
+    className = "",
+    bgColor = "transparent",
+    borderColor = "#5cd7f8",
+    children,
+    piece,
+    highlighted = false,
+
+}) => {
+    return (
+        <div
+            className={`flex items-center justify-center border-none transition-all duration-300 ${highlighted ? "brightness-125" : "brightness-75"
+                } ${className}`}
+            style={{
+                ...style,
+                backgroundColor: bgColor,
+                borderColor: borderColor,
+                borderWidth: ".1px",
+                borderStyle: "solid",
+                cursor: "pointer",
+            }}
+        >
+            {/* {children} */}
+            {piece && (
+                <div
+                    className="w-6 h-6 rounded-full"
+                    style={{ backgroundColor: piece.color }}
+                    title={`Player ${piece.playerId}'s piece`}
+                ></div>
+            )}
+        </div>
+    );
+};
+
+export default PathTile;
+
diff --git a/client/src/components/PauseGame.tsx b/client/src/components/PauseGame.tsx
new file mode 100644
index 0000000..b721372
--- /dev/null
+++ b/client/src/components/PauseGame.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { FaTimes } from 'react-icons/fa'
+
+const PauseGame = ({ pause, onClose }:any) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+        {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black bg-opacity-50"
+        onClick={onClose}
+      ></div>
+      <div className='flex flex-col items-center relative min-w-[260px] font-bold bg-secondary text-primary p-12 space-y-4'>
+        <FaTimes size={20} className='absolute cursor-pointer right-5 top-5' onClick={onClose} />
+        <p className=''>Pause Menu</p>
+        <div className='w-full h-[1px] bg-primary'/>
+        <button className='border w-full border-primary rounded-sm px-6 py-3'>Stake</button>
+        <button className='border w-full border-primary rounded-sm px-6 py-3'>Restart</button>
+        <button className='border w-full border-primary rounded-sm px-6 py-3'>Save Progress</button>
+        <button className='border w-full border-primary rounded-sm px-6 py-3'>Exit</button>
+      </div>
+    </div>
+  )
+}
+
+export default PauseGame
\ No newline at end of file
diff --git a/client/src/components/PlayerCorner.tsx b/client/src/components/PlayerCorner.tsx
deleted file mode 100644
index 9ec43f4..0000000
--- a/client/src/components/PlayerCorner.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { FC } from 'react';
-import { FaPlay } from 'react-icons/fa';
-import '../styles/PlayerCorner.scss';
-
-interface PlayerCornerProps {
-    playerNumber: number;
-    isCurrentTurn: boolean;
-    playerColor: string;
-    avatarUrl: string;
-    playerName: string;
-    score: number;
-}
-
-const PlayerCorner: FC<PlayerCornerProps> = ({
-    playerNumber,
-    isCurrentTurn,
-    playerColor,
-    avatarUrl,
-    playerName,
-    score
-}) => {
-    return (
-        <div className={`player-corner player-corner-${playerNumber} ${playerColor}`}>
-            <div className={`corner-content ${isCurrentTurn ? 'active-turn' : ''}`}>
-                {/* Avatar Container */}
-                <div className="avatar-container">
-                    <div className="avatar-wrapper">
-                        <img
-                            src={avatarUrl}
-                            alt={`Player ${playerNumber}`}
-                            className="player-avatar object-cover [image-rendering:pixelated]"
-                        />
-                        {isCurrentTurn && (
-                            <div className="turn-indicator flex items-center gap-1 whitespace-nowrap">
-                                <FaPlay size={10} className="turn-icon" />
-                                <span className="font-bold text-[10px]">YOUR TURN</span>
-                            </div>
-                        )}
-                    </div>
-                </div>
-
-                {/* Player Info */}
-                <div className="player-info text-center">
-                    <div className="player-name text-white">
-                        {playerName}
-                        <span className="player-number opacity-60">
-                            #{playerNumber}
-                        </span>
-                    </div>
-                    <div className="score-dots-container inline-flex gap-2 justify-center w-full">
-                        {[...Array(4)].map((_, i) => (
-                            <div
-                                key={i}
-                                className={`score-dot transition-all duration-300 ${i < score ? 'filled' : ''}`}
-                            />
-                        ))}
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default PlayerCorner; 
\ No newline at end of file
diff --git a/client/src/components/PlayerZone.tsx b/client/src/components/PlayerZone.tsx
new file mode 100644
index 0000000..96fd209
--- /dev/null
+++ b/client/src/components/PlayerZone.tsx
@@ -0,0 +1,29 @@
+
+
+// PlayerZone.tsx
+import React from 'react';
+import Ring from './Ring';
+import HighlightedDiv from './HighligtedDiv';
+
+interface PlayerZoneProps {
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    noofPieces?: number | any;
+    hightlighed?: boolean
+}
+
+const PlayerZone: React.FC<PlayerZoneProps> = ({ width, noofPieces, backgroundColor, borderColor, hightlighed }) => {
+    return (
+        <HighlightedDiv hightlighed={hightlighed} className={`w-1/3 bg-[${backgroundColor}] border-[6px] border-[${borderColor}] p-8 flex gap-2 items-center justify-center`}>
+            <div className="grid grid-cols-2 gap-2 ">
+                {Array.from({ length: noofPieces }).map((_, index) => (
+                    <Ring key={index} />
+                ))}
+            </div>
+        </HighlightedDiv>
+    );
+};
+
+export default PlayerZone;
diff --git a/client/src/components/Ring.tsx b/client/src/components/Ring.tsx
new file mode 100644
index 0000000..fdd2048
--- /dev/null
+++ b/client/src/components/Ring.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Ring = () => {
+    return (
+        <span className='relative h-7 w-7 rounded-full border border-secondary'>
+            <span className='absolute h-4 w-4 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-secondary'>
+            </span>
+        </span>
+    )
+}
+
+export default Ring
\ No newline at end of file
diff --git a/client/src/components/ludoGame2.tsx b/client/src/components/ludoGame2.tsx
new file mode 100644
index 0000000..411b9c4
--- /dev/null
+++ b/client/src/components/ludoGame2.tsx
@@ -0,0 +1,150 @@
+import pauseImg from "../assets/images/pause.png";
+import { useState } from "react";
+import PauseGame from "./PauseGame";
+import CenterTile from "./CenterTile";
+import PathTile from "./PathTile";
+import PlayerZone from "./PlayerZone";
+import { useGame } from "../context/game-context-2.";
+
+const LudoGame = () => {
+    const [pause, setPause] = useState(false);
+    const { players, rollDice } = useGame();
+
+    const onClose = () => {
+        setPause(false);
+    };
+
+    const renderPathTiles = (
+        count: number,
+        tag: number,
+        className?: string,
+        bgColor?: string
+    ) => {
+        const isHighlighted = players[tag]?.isTurn; // Check if the current player with the tag is active
+        return [...Array(count)].map((_, index) => (
+            <PathTile
+                key={index}
+                className={className}
+                bgColor={bgColor || "transparent"}
+                highlighted={isHighlighted}
+                borderColor="#5cd7f8"
+            />
+        ));
+    };
+
+    return (
+        <div className="flex-1 w-full">
+            <div className="flex flex-col items-center justify-between gap-4">
+                {/* Pause Button */}
+                <img
+                    src={pauseImg}
+                    alt="pause"
+                    className="cursor-pointer"
+                    onClick={() => setPause(true)}
+                />
+
+                {/* Ludo Board */}
+                <div className="w-full rounded-md border-primary border-[32px] bg-[#c6ad6d]">
+                    {/* Top Row */}
+                    <div className="flex w-full">
+                        <PlayerZone
+                            hightlighed={players[1].isTurn}
+                            noofPieces={players[1].noOfPieces}
+                            backgroundColor="#545841"
+                            borderColor="#3f4231"
+                        />
+                        <div className="w-40 flex border">
+                            <div className="flex flex-col justify-between w-1/4">
+                                {renderPathTiles(6, 1)}
+                            </div>
+                            <div className="flex flex-col justify-between w-2/4 bg-[#626b74]">
+                                {renderPathTiles(6, 1)}
+                            </div>
+                            <div className="flex flex-col justify-between w-1/4">
+                                {renderPathTiles(6, 1)}
+                            </div>
+                        </div>
+                        <PlayerZone
+                            hightlighed={players[0].isTurn}
+                            noofPieces={players[0].noOfPieces}
+                            backgroundColor="#626b74"
+                            borderColor="#4a5057"
+                        />
+                    </div>
+
+                    {/* Middle Row (includes center tile) */}
+                    <div className="flex w-full">
+                        {/* Left Column */}
+                        <div className="w-1/3 h-36 flex flex-row border">
+                            <div className="flex flex-col justify-between w-1/4">
+                                {renderPathTiles(3, 1, "bg-[black] h-1/4")}
+                            </div>
+                            <div className="flex flex-col-reverse justify-between w-2/4 bg-[#545841]">
+                                {renderPathTiles(4, 1, "bg-[red]")} {/* Highlight paths */}
+                            </div>
+                            <div className="flex justify-between w-1/4 flex-col">
+                                {renderPathTiles(3, 1, "bg-[green]")}
+                            </div>
+                        </div>
+
+                        {/* Center Tile */}
+                        <CenterTile />
+
+                        {/* Right Column */}
+                        <div className="w-1/3 h-36 flex flex-col border">
+                            <div className="flex justify-between h-1/4">
+                                {renderPathTiles(6, 3)}
+                            </div>
+                            <div className="flex justify-between h-2/4 bg-[#c89252]">
+                                {renderPathTiles(6, 3)}
+                            </div>
+                            <div className="flex justify-between h-1/4">
+                                {renderPathTiles(6, 3)}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Bottom Row */}
+                    <div className="flex w-full">
+                        <PlayerZone
+                            hightlighed={players[3].isTurn}
+                            noofPieces={players[3].noOfPieces}
+                            backgroundColor="#973d34"
+                            borderColor="#712e27"
+                        />
+                        <div className="w-1/3 flex flex-row border">
+                            <div className="flex flex-col justify-between w-1/4">
+                                {renderPathTiles(6, 2)}
+                            </div>
+                            <div className="flex flex-col justify-between w-2/4 bg-[#973d34]">
+                                {renderPathTiles(6, 2)}
+                            </div>
+                            <div className="flex flex-col justify-between w-1/4">
+                                {renderPathTiles(6, 2)}
+                            </div>
+                        </div>
+                        <PlayerZone
+                            hightlighed={players[2].isTurn}
+                            noofPieces={players[2].noOfPieces}
+                            backgroundColor="#c89252"
+                            borderColor="#966e3d"
+                        />
+                    </div>
+                </div>
+
+                {/* Roll Dice Button */}
+                <button
+                    onClick={rollDice}
+                    className="bg-primary text-secondary px-6 py-2.5 rounded-sm font-bold"
+                >
+                    Roll dice
+                </button>
+            </div>
+
+            {/* Pause Game Modal */}
+            {pause && <PauseGame onClose={onClose} />}
+        </div>
+    );
+};
+
+export default LudoGame;
diff --git a/client/src/context/game-context-2..tsx b/client/src/context/game-context-2..tsx
new file mode 100644
index 0000000..30b85bd
--- /dev/null
+++ b/client/src/context/game-context-2..tsx
@@ -0,0 +1,164 @@
+import React, { createContext, ReactNode, useContext, useState } from 'react';
+import player1 from '../assets/images/player1.png';
+import blue from '../assets/images/blue.png';
+import player2 from '../assets/images/player2.png';
+import yellow from '../assets/images/yellow.png';
+import player3 from '../assets/images/player3.png';
+import green from '../assets/images/green.png';
+import player4 from '../assets/images/player4.png';
+import red from '../assets/images/red.png';
+
+type Player = {
+    id: number;
+    name: string;
+    image: string;
+    color: string;
+    piecesColor: string;
+    noOfPieces: number;
+    isTurn: boolean;
+    backgroundColor: string;
+    diceRoll: number;
+    pieces: number[]; // Array to store positions of the player's pieces
+};
+
+type GameContextType = {
+    players: Player[];
+    rolledNumber1: number;
+    rolledNumber2: number;
+    currentTurn: number;
+    setCurrentTurn: (turn: number) => void;
+    rollDice: () => void;
+};
+
+const GameContext = createContext<GameContextType | undefined>(undefined);
+
+export const useGame = () => {
+    const context = useContext(GameContext);
+    if (!context) {
+        throw new Error('useGame must be used within a GameProvider');
+    }
+    return context;
+};
+
+export const GameProvider = ({ children }: { children: ReactNode }) => {
+    const [players, setPlayers] = useState<Player[]>([
+        {
+            id: 1,
+            name: 'Player 1',
+            image: player1,
+            color: blue,
+            piecesColor: 'blue',
+            noOfPieces: 4,
+            isTurn: true,
+            backgroundColor: '#00000080',
+            diceRoll: 0,
+            pieces: [0, 0, 0, 0],
+        },
+        {
+            id: 2,
+            name: 'Player 2',
+            image: player2,
+            color: yellow,
+            piecesColor: 'yellow',
+            noOfPieces: 4,
+            isTurn: false,
+            backgroundColor: '#00000080',
+            diceRoll: 0,
+            pieces: [0, 0, 0, 0],
+        },
+        {
+            id: 3,
+            name: 'Player 3',
+            image: player3,
+            color: green,
+            piecesColor: 'green',
+            noOfPieces: 4,
+            isTurn: false,
+            backgroundColor: '#00000080',
+            diceRoll: 0,
+            pieces: [0, 0, 0, 0],
+        },
+        {
+            id: 4,
+            name: 'Player 4',
+            image: player4,
+            color: red,
+            piecesColor: 'red',
+            noOfPieces: 4,
+            isTurn: false,
+            backgroundColor: '#00000080',
+            diceRoll: 0,
+            pieces: [0, 0, 0, 0],
+        },
+    ]);
+
+    const [currentTurn, setCurrentTurn] = useState<number>(1);
+    const [rolledNumber1, setRolledNumber1] = useState<number>(1);
+    const [rolledNumber2, setRolledNumber2] = useState<number>(1);
+
+    const rollDice = () => {
+        const rolledNumber1 = Math.floor(Math.random() * 6) + 1;
+        const rolledNumber2 = Math.floor(Math.random() * 6) + 1;
+        const rolledNumber = rolledNumber1 + rolledNumber2;
+        setRolledNumber1(rolledNumber1);
+        setRolledNumber2(rolledNumber2);
+
+        setPlayers((prevPlayers) =>
+            prevPlayers.map((player) => {
+                if (player.id === currentTurn) {
+                    // Update dice roll for the current player
+                    const updatedPlayer = { ...player, diceRoll: rolledNumber };
+
+                    // Check if the player has any pieces on the board
+                    const hasPiecesOnBoard = player.pieces.some((pos) => pos > 0);
+
+                    if (!hasPiecesOnBoard && player.noOfPieces > 0) {
+                        // If no pieces on board, place one on the board
+                        updatedPlayer.pieces = [rolledNumber, ...player.pieces.slice(1)];
+                        updatedPlayer.noOfPieces -= 1;
+                    } else if (hasPiecesOnBoard) {
+                        // Move the first piece on the board
+                        updatedPlayer.pieces = player.pieces.map((pos, index) => {
+                            if (index === 0 && pos > 0) {
+                                return pos + rolledNumber;
+                            }
+                            return pos;
+                        });
+                    }
+
+                    return { ...updatedPlayer, isTurn: false }; // End this player's turn
+                }
+
+                return player;
+            })
+        );
+
+        // Pass the turn to the next player
+        const nextPlayerId = currentTurn === 4 ? 1 : currentTurn + 1;
+        setCurrentTurn(nextPlayerId);
+
+        // Update `isTurn` for the next player
+        setPlayers((prevPlayers) =>
+            prevPlayers.map((player) =>
+                player.id === nextPlayerId
+                    ? { ...player, isTurn: true }
+                    : { ...player, isTurn: false }
+            )
+        );
+    };
+
+    return (
+        <GameContext.Provider
+            value={{
+                players,
+                rolledNumber1,
+                rolledNumber2,
+                currentTurn,
+                setCurrentTurn,
+                rollDice,
+            }}
+        >
+            {children}
+        </GameContext.Provider>
+    );
+};
\ No newline at end of file
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
new file mode 100644
index 0000000..0fc2eee
--- /dev/null
+++ b/client/tailwind.config.js
@@ -0,0 +1,27 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/*/.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    container: {
+      padding: {
+        DEFAULT: '1rem',
+        sm: '2rem',
+        lg: '4rem',
+        xl: '5rem',
+        '2xl': '6rem',
+      },
+    },
+    extend: {
+      colors: {
+        secondary: '#dac29c',
+        primary: '#854d15'
+      }
+    },
+  },
+  plugins: [],
+}
+
+
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 1643bf6..0594695 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -2,8 +2,13 @@ import { defineConfig } from "vite";
 import wasm from "vite-plugin-wasm";
 import react from "@vitejs/plugin-react";
 import topLevelAwait from "vite-plugin-top-level-await";
-
+import tailwindcss from "tailwindcss";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), wasm(), topLevelAwait()],
+  css: {
+    postcss: {
+      plugins: [tailwindcss()],
+    },
+  },
 });