diff --git a/src/App.jsx b/src/App.jsx
index 62b11d4..e29daf2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,6 +19,7 @@ import TabTest from "./pages/tree-view/custom-tabs/Tab-test";
 import { ModalPopup } from "./pages/CustomModalPopup/ModalPopup";
 import { GithubProfileFinder } from "./pages/GithubProfileFinder/GithubProfileFinder";
 import { SearchAutoComplete } from "./pages/SearchAutoComplete/SearchAutoComplete";
+import { TicTacToe } from "./pages/TicTacToe";
 
 function App() {
   return (
@@ -47,15 +48,20 @@ function App() {
           {/* generate QR code */}
           <Route path="qr-code-generator" element={<QRCodeGenerator />} />
           {/* Light Dark Mode */}
-          <Route path='light-dark-mode' element={<LightDarkMode />} />
+          <Route path="light-dark-mode" element={<LightDarkMode />} />
           {/* Custom tabs component */}
           <Route path="custom-tabs" element={<TabTest />} />
           {/* Custom Modal Popup */}
-          <Route path='modal-popup' element={<ModalPopup />} />
+          <Route path="modal-popup" element={<ModalPopup />} />
           {/* Github Profile Finder */}
-          <Route path="github-profile-finder" element={<GithubProfileFinder />} />
+          <Route
+            path="github-profile-finder"
+            element={<GithubProfileFinder />}
+          />
           {/* Search Auto-Complete */}
           <Route path="search-auto-complete" element={<SearchAutoComplete />} />
+          {/* Tic Tac Toe */}
+          <Route path="tic-tac-toe" element={<TicTacToe />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />
diff --git a/src/data/projects.js b/src/data/projects.js
index 69ac788..d8a125a 100644
--- a/src/data/projects.js
+++ b/src/data/projects.js
@@ -58,6 +58,11 @@ export const projects = [
     id: 12,
     name: 'Search Auto-Complete',
     path: 'search-auto-complete'
+  },
+  {
+    id: 13,
+    name: 'Tic Tac Toe',
+    path: 'tic-tac-toe'
   }
 ];
 
diff --git a/src/index.css b/src/index.css
index e3d2cb8..3ab9809 100644
--- a/src/index.css
+++ b/src/index.css
@@ -102,7 +102,7 @@
     box-sizing: border-box;
     background:
       linear-gradient(theme(colors.foreground) 0 0) 0 0/8px 20px,
-      linear-gradient(theme(colors.foreground)0 0) 100% 0/8px 20px,
+      linear-gradient(theme(colors.foreground) 0 0) 100% 0/8px 20px,
       radial-gradient(farthest-side, theme(colors.foreground) 90%, #0000) 0 5px/8px 8px content-box,
       theme(colors.background);
     background-repeat: no-repeat;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 9ef4630..0a55b66 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -7,7 +7,7 @@ function Home() {
   const [cursorVariant, setCursorVariant] = useState("default");
 
   return (
-    <div className="flex flex-col gap-3 justify-start items-center">
+    <div className="container flex flex-col gap-3 justify-start items-center py-10">
       <p className="text-xl">
         this page under{" "}
         <span
diff --git a/src/pages/TicTacToe.jsx b/src/pages/TicTacToe.jsx
new file mode 100644
index 0000000..ba571f7
--- /dev/null
+++ b/src/pages/TicTacToe.jsx
@@ -0,0 +1,119 @@
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+export const TicTacToe = () => {
+  const [squares, setSquares] = useState(Array(9).fill(""));
+  const [isXTurn, setIsXTurn] = useState(true);
+  const [winner, setWinner] = useState(null);
+  const [isDraw, setIsDraw] = useState(false);
+
+  function handleClick(currentSquare) {
+    if (winner || squares[currentSquare] || isDraw) return;
+
+    let cpySquares = [...squares];
+    cpySquares[currentSquare] = isXTurn ? "X" : "O";
+    setIsXTurn(!isXTurn);
+    setSquares(cpySquares);
+
+    const gameWinner = checkWinner(cpySquares);
+    if (gameWinner) {
+      setWinner(gameWinner);
+    } else if (!cpySquares.includes("")) {
+      // Check for draw if all squares are filled
+      setIsDraw(true);
+    }
+  }
+
+  function checkWinner(board) {
+    // Check rows
+    for (let i = 0; i < 3; i++) {
+      if (
+        board[i * 3] !== "" &&
+        board[i * 3] === board[i * 3 + 1] &&
+        board[i * 3] === board[i * 3 + 2]
+      ) {
+        return board[i * 3];
+      }
+      console.log(board[i * 3 + 1]);
+    }
+
+    // Check columns
+    for (let i = 0; i < 3; i++) {
+      if (
+        board[i] !== "" &&
+        board[i] === board[i + 3] &&
+        board[i] === board[i + 6]
+      ) {
+        return board[i];
+      }
+    }
+
+    // Check diagonals
+    if (board[0] !== "" && board[0] === board[4] && board[0] === board[8]) {
+      return board[0];
+    }
+    if (board[2] !== "" && board[2] === board[4] && board[2] === board[6]) {
+      return board[2];
+    }
+
+    return null;
+  }
+
+  function handleRestart() {
+    setIsXTurn(true);
+    setSquares(Array(9).fill(""));
+    setWinner(null);
+    setIsDraw(false);
+  }
+
+  return (
+    <div className="tic-tac-toe container flex flex-1 flex-col justify-center items-center py-10">
+      <div className="flex items-center py-10 h-[50px]">
+        {winner ? (
+          <div className="text-4xl">
+            Winner is{" "}
+            <span className="font-bold font-mono text-primary">{winner}</span>
+          </div>
+        ) : isDraw ? (
+          <div className="text-5xl">It's a draw!</div>
+        ) : null}{" "}
+      </div>
+      <div className="shadow-2xl">
+        <div className="row">
+          <Square value={squares[0]} onClick={() => handleClick(0)} />
+          <Square value={squares[1]} onClick={() => handleClick(1)} />
+          <Square value={squares[2]} onClick={() => handleClick(2)} />
+        </div>
+        <div className="row">
+          <Square value={squares[3]} onClick={() => handleClick(3)} />
+          <Square value={squares[4]} onClick={() => handleClick(4)} />
+          <Square value={squares[5]} onClick={() => handleClick(5)} />
+        </div>
+        <div className="row">
+          <Square value={squares[6]} onClick={() => handleClick(6)} />
+          <Square value={squares[7]} onClick={() => handleClick(7)} />
+          <Square value={squares[8]} onClick={() => handleClick(8)} />
+        </div>
+      </div>
+
+      <div className="flex items-center py-10 h-[50px]">
+        {winner || isDraw ? (
+          <Button onClick={handleRestart} variant="secondary">
+            Restart
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export const Square = ({ value, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className="border-[1px] border-primary float-left text-4xl size-[100px] text-center mr-[-1px] mt-[-1px] cursor-pointer empty:hover:bg-gr hover:bg-black hover:bg-opacity-5 font-sans font-bold flex justify-center items-center outline-none"
+    >
+      {value}
+    </button>
+  );
+};