diff --git a/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx b/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx
index 3a45d978f3..e791bc2a1d 100644
--- a/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx
+++ b/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx
@@ -86,13 +86,13 @@ function MultiplayerTicTacToe(props: any) {
     <>
       <div className="play-details">
         <PlayHeader play={props} />
-        <div className="flex justify-center play-details-body">
+        <div className="grid items-center justify-center play-details-body">
           {/* Your Code Starts Here */}
           <div>
             <h1 className="text-2xl text-center md:text-3xl">Multiplayer Tic Tac Toe</h1>
             <ButtonGroup setIsCross={setIsCross} />
 
-            <section className="flex items-center justify-center">
+            <section className="flex items-center !justify-center">
               <ToastContainer />
               <main>
                 <div>
diff --git a/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx b/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx
index e593c7cae6..8a136fd4c6 100644
--- a/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx
+++ b/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx
@@ -11,14 +11,14 @@ export default function ButtonGroup({ setIsCross }: ButtonGroupProps) {
     <>
       <section className="flex justify-center">
         <button
-          className="flex justify-center items-center w-28 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
+          className="grid justify-center items-center w-24 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
           onClick={() => setIsCross(true)}
         >
           <span className="hidden">Cross</span>
           <FaTimes className="text-2xl font-extrabold text-red-500" />
         </button>
         <button
-          className="flex justify-center items-center w-28 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
+          className="grid justify-center items-center w-24 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
           onClick={() => setIsCross(false)}
         >
           <span className="hidden">Circle</span>
diff --git a/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx b/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx
index 5aad077bd5..a97fc459a6 100644
--- a/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx
+++ b/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx
@@ -12,7 +12,7 @@ export default function GameGrid({ changeItem }: GameGrid) {
       <div className="grid grid-cols-3 gap-4">
         {GAME_ARRAY.map((ele, i) => (
           <div
-            className="md:w-24 md:h-24 w-32 flex justify-center items-center h-32 bg-[#00f2f2] border-2 border-black rounded-lg cursor-pointer"
+            className="md:h-16  sm:w-44 w-20  gird justify-center items-center h-12  bg-[#00f2f2] border-2 border-black rounded-lg cursor-pointer"
             key={i}
             onClick={() => changeItem(i)}
           >