diff --git a/src/data/content.js b/src/data/content.js
index 61515f2..fd08275 100644
--- a/src/data/content.js
+++ b/src/data/content.js
@@ -9,117 +9,116 @@ import { Jitter } from "../pages/games/Jitter";
 import { RandomMeme } from "../pages/activities/RandomMemes";
 import { RandomJoke } from "../pages/activities/RandomJoke";
 import { RandomAnimeQuote } from "../pages/activities/RandomAnimeQuote";
-import meme from "../assets/activities/meme.jpg"
-import dog from "../assets/activities/dogimage.jpeg"
-import cat from "../assets/activities/cat.jpg"
-import numberblocs from "../assets/numberblocks.png"
-import wordleicon from "../assets/games/Wordle/wordlejpg.png"
-import flagger from "../assets/games/flag guess/flagger.png"
-import Calculator from "../pages/activities/Calculator"
+import meme from "../assets/activities/meme.jpg";
+import dog from "../assets/activities/dogimage.jpeg";
+import cat from "../assets/activities/cat.jpg";
+import numberblocs from "../assets/numberblocks.png";
+import wordleicon from "../assets/games/Wordle/wordlejpg.png";
+import flagger from "../assets/games/flag guess/flagger.png";
+import Calculator from "../pages/activities/Calculator";
 import { DogHttpCode } from "../pages/activities/DogHttpCode";
 import { CatHttpCode } from "../pages/activities/CatHttpCode";
 
 export const activities = [
-    {
-        title: "Random quotes",
-        description: "Get random quotes",
-        icon: "https://cdn-icons-png.flaticon.com/512/2541/2541991.png",
-        urlTerm: "random-quotes",
-        element: <RandomQuote />
-    },
-    {
-        title: "Random Anime Quotes",
-        description: "Get random anime quotes",
-        icon: "https://64.media.tumblr.com/7b526ba246f48e294ebc87fe2cbd8e1b/1a4bdb8275a18adc-c7/s250x400/94d6c7e70601111ba79b8801cd939694d0000018.jpg", // Add the path to the anime icon image
-        urlTerm: "random-anime-quotes",
-        element: <RandomAnimeQuote />, // Assuming you have a RandomQuote component for anime quotes
-    },
-    {
-        title: "Random memes",
-        description: "Get random meme",
-        icon: meme,
-        urlTerm: "random-memes",
-        element: <RandomMeme />
-    },
-    {
-        title: "Fortune Card",
-        description: "Get your fortune",
-        icon: "https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp",
-        urlTerm: "get-your-fortune",
-        element: <FortuneCard />
-    },
-    {
-        title: "Search Words",
-        description: "Get any definition",
-        icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png",
-        urlTerm: "search-any-word",
-        element: <SearchWord />
-    },
-    {
-        title: "Random Jokes",
-        description: "Get random jokes",
-        icon: "https://www.troublefreepool.com/media/joke-png.127455/full",
-        urlTerm: "random-jokes",
-        element: <RandomJoke />
-    },
-    {
-        title: "Calculator",
-        description: "A Simple Calculator",
-        icon: "https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/512/Calculator_512.png",
-        urlTerm: "calculator",
-        element: <Calculator />
-    },
-    {
-        title: "Dog Http Status Code",
-        description: "Get random dog images or meme",
-        icon: dog,
-        urlTerm: "dog-http-status",
-        element: <DogHttpCode />
-    },
-    {
-        title: "Cat Http Status Code",
-        description: "Get random cat images or meme",
-        icon: cat,
-        urlTerm: "cat-http-status",
-        element: <CatHttpCode />
-    },
+  {
+    title: "Random quotes",
+    description: "Get random quotes",
+    icon: "https://cdn-icons-png.flaticon.com/512/2541/2541991.png",
+    urlTerm: "random-quotes",
+    element: <RandomQuote />,
+  },
+  {
+    title: "Random Anime Quotes",
+    description: "Get random anime quotes",
+    icon: "https://64.media.tumblr.com/7b526ba246f48e294ebc87fe2cbd8e1b/1a4bdb8275a18adc-c7/s250x400/94d6c7e70601111ba79b8801cd939694d0000018.jpg",
+    urlTerm: "random-anime-quotes",
+    element: <RandomAnimeQuote />,
+  },
+  {
+    title: "Random memes",
+    description: "Get random meme",
+    icon: meme,
+    urlTerm: "random-memes",
+    element: <RandomMeme />,
+  },
+  {
+    title: "Fortune Card",
+    description: "Get your fortune",
+    icon: "https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp",
+    urlTerm: "get-your-fortune",
+    element: <FortuneCard />,
+  },
+  {
+    title: "Search Words",
+    description: "Get any definition",
+    icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png",
+    urlTerm: "search-any-word",
+    element: <SearchWord />,
+  },
+  {
+    title: "Random Jokes",
+    description: "Get random jokes",
+    icon: "https://www.troublefreepool.com/media/joke-png.127455/full",
+    urlTerm: "random-jokes",
+    element: <RandomJoke />,
+  },
+  {
+    title: "Calculator",
+    description: "A Simple Calculator",
+    icon: "https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/512/Calculator_512.png",
+    urlTerm: "calculator",
+    element: <Calculator />,
+  },
+  {
+    title: "Dog Http Status Code",
+    description: "Get random dog images or meme",
+    icon: dog,
+    urlTerm: "dog-http-status",
+    element: <DogHttpCode />,
+  },
+  {
+    title: "Cat Http Status Code",
+    description: "Get random cat images or meme",
+    icon: cat,
+    urlTerm: "cat-http-status",
+    element: <CatHttpCode />,
+  },
 ];
 
 export const games = [
-    {
-        urlTerm: "magicsquares",
-        title: "Magic Squares",
-        description: "Magic Squares > contribution by y-ashaswini :)",
-        icon: numberblocs,
-        element: <MagicSquares />,
-    },
-    {
-        title: "Tic-Tac-Toe",
-        description: "Lets beat opponent's ass in TicTacToe",
-        icon: "https://cdn-icons-png.flaticon.com/512/2076/2076261.png",
-        urlTerm: "tic-tac-toe",
-        element: <TicTacToe />,
-    },
-    {
-        title: "Jitter Click Game",
-        description: "Click as fast as possible to reach 5 stars.... lakshya",
-        icon: "https://i.kym-cdn.com/entries/icons/original/000/036/070/cover5.jpg",
-        urlTerm: "jitter-game",
-        element: <Jitter />,
-    },
-    {
-        title: "Wordle Game",
-        description: "The normal wordle but you can play as much as you want",
-        icon: wordleicon,
-        urlTerm: "Wordle",
-        element: <Wordle />
-    },
-    {
-        title: "Guess The Flag",
-        description: "Learn geography in fun way",
-        icon: flagger,
-        urlTerm: "GuessTheFlag",
-        element: <GuessTheFlag />
-    }
+  {
+    urlTerm: "magicsquares",
+    title: "Magic Squares",
+    description: "Magic Squares > contribution by y-ashaswini :)",
+    icon: numberblocs,
+    element: <MagicSquares />,
+  },
+  {
+    title: "Tic-Tac-Toe",
+    description: "Lets beat opponent in TicTacToe",
+    icon: "https://cdn-icons-png.flaticon.com/512/2076/2076261.png",
+    urlTerm: "tic-tac-toe",
+    element: <TicTacToe />,
+  },
+  {
+    title: "Jitter Click Game",
+    description: "Click as fast as possible to reach 5 stars.... lakshya",
+    icon: "https://i.kym-cdn.com/entries/icons/original/000/036/070/cover5.jpg",
+    urlTerm: "jitter-game",
+    element: <Jitter />,
+  },
+  {
+    title: "Wordle Game",
+    description: "The normal wordle but you can play as much as you want",
+    icon: wordleicon,
+    urlTerm: "Wordle",
+    element: <Wordle />,
+  },
+  {
+    title: "Guess The Flag",
+    description: "Learn geography in fun way",
+    icon: flagger,
+    urlTerm: "GuessTheFlag",
+    element: <GuessTheFlag />,
+  },
 ];
-
diff --git a/src/pages/games/TicTacToe.js b/src/pages/games/TicTacToe.js
index 834337b..5319d1f 100644
--- a/src/pages/games/TicTacToe.js
+++ b/src/pages/games/TicTacToe.js
@@ -1,7 +1,70 @@
-import { useEffect, useState } from "react";
-import axios from "axios";
-import "../../styles/pages/activities/RandomQuote.css";
+import React, { useState } from "react";
+import "../../styles/pages/games/TicTacToe.css";
 
 export const TicTacToe = () => {
-  return <div>Hello</div>;
+  const initialBoard = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+  const [board, setBoard] = useState(initialBoard);
+  const [playerTurn, setPlayerTurn] = useState("X");
+  const [message, setMessage] = useState("");
+
+  const isWinner = (b) => {
+    const winCombos = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6],
+    ];
+    return winCombos.some(([a, b1, c]) => b[a] === b[b1] && b[b1] === b[c]);
+  };
+
+  const handleMove = (index) => {
+    if (message || board[index] === "X" || board[index] === "O") return;
+
+    const newBoard = [...board];
+    newBoard[index] = playerTurn;
+    setBoard(newBoard);
+
+    if (isWinner(newBoard)) {
+      setMessage(`Player ${playerTurn} wins!`);
+      return;
+    }
+
+    if (newBoard.every((c) => c === "X" || c === "O")) {
+      setMessage("DRAW..");
+      return;
+    }
+
+    setPlayerTurn(playerTurn === "X" ? "O" : "X");
+  };
+
+  const resetGame = () => {
+    setBoard(initialBoard);
+    setPlayerTurn("X");
+    setMessage("");
+  };
+
+  return (
+    <div className="tictactoe-container">
+      <h2>Tic Tac Toe</h2>
+      <div className="board">
+        {board.map((cell, i) => (
+          <div key={i} className="cell" onClick={() => handleMove(i)}>
+            {cell === "X" || cell === "O" ? cell : ""}
+          </div>
+        ))}
+      </div>
+      <p className="status">
+        {message ? message : `Player ${playerTurn}'s turn`}
+      </p>
+      {message && (
+        <button className="reset-btn" onClick={resetGame}>
+          Restart
+        </button>
+      )}
+    </div>
+  );
 };
diff --git a/src/styles/pages/games/TicTacToe.css b/src/styles/pages/games/TicTacToe.css
new file mode 100644
index 0000000..0d81c28
--- /dev/null
+++ b/src/styles/pages/games/TicTacToe.css
@@ -0,0 +1,47 @@
+.tictactoe-container {
+  text-align: center;
+  padding: 1rem;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, 80px);
+  gap: 5px;
+  justify-content: center;
+  margin: 1rem auto;
+}
+
+.cell {
+  width: 80px;
+  height: 80px;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #333;
+  cursor: pointer;
+  background: #f9f9f9;
+}
+
+.cell:hover {
+  background: #e0e0e0;
+}
+
+.status {
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.reset-btn {
+  margin-top: 10px;
+  padding: 0.5rem 1rem;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.reset-btn:hover {
+  background: #0056b3;
+}