diff --git a/staff/tarek-blkraiet/shapes/tic-tac-toe/index.css b/staff/tarek-blkraiet/shapes/tic-tac-toe/index.css
index e69de29b..8ea6f589 100644
--- a/staff/tarek-blkraiet/shapes/tic-tac-toe/index.css
+++ b/staff/tarek-blkraiet/shapes/tic-tac-toe/index.css
@@ -0,0 +1,17 @@
+.board {
+    display: grid;
+    width: 20vw;
+    height: 20vw;
+    background-color: lightgray;
+    gap: 1px;
+}
+
+.cell {
+    background-color: gray;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: xx-large;
+
+}
\ No newline at end of file
diff --git a/staff/tarek-blkraiet/shapes/tic-tac-toe/index.html b/staff/tarek-blkraiet/shapes/tic-tac-toe/index.html
index e69de29b..d1d8d7e5 100644
--- a/staff/tarek-blkraiet/shapes/tic-tac-toe/index.html
+++ b/staff/tarek-blkraiet/shapes/tic-tac-toe/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic Tac Toe</title>
+
+    <link rel="stylesheet" href="index.css">
+</head>
+
+
+<body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.3/babel.min.js"
+        integrity="sha512-ew/qzOMK7mnWiZ395TTbZ+YVD6e7dOROUcXXzSjyxPmL9oNf5gp8DJp46uarrTKch5aUhR/NS8qtCh6hnaTMCw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="index.jsx" type="text/babel"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/tarek-blkraiet/shapes/tic-tac-toe/index.jsx b/staff/tarek-blkraiet/shapes/tic-tac-toe/index.jsx
index e69de29b..e7c2048a 100644
--- a/staff/tarek-blkraiet/shapes/tic-tac-toe/index.jsx
+++ b/staff/tarek-blkraiet/shapes/tic-tac-toe/index.jsx
@@ -0,0 +1,61 @@
+class App extends React.Component {
+    constructor() {
+        super()
+
+        const board = new Array(4)
+
+        for (let i = 0; i < board.length; i++)
+            board[i] = new Array(board.length).fill(0)
+
+        this.state = {
+            board,
+            trun: 0
+        }
+    }
+    getCellChar(value) {
+        if (value === 1) return 'X'
+        else if (value === 2) return '0'
+        else return ''
+    }
+
+    play(row, column) {
+        console.log('click')
+        const prevBoard = this.state.board
+
+        const board = []
+        for (let i = 0; i < prevBoard; i++)
+            board[i] = new Array(prevBoard[0].length).fill(0)
+
+        for (const i in prevBoard)
+            for (const j in prevBoard[i])
+                board[i][j] = prevBoard[i][j]
+
+        const turn = this.state.turn
+        if (turn % 2 === 0)
+            board[row][column] = 1
+        else
+            board[row][column] = 2
+        this.setState({ board, turn: turn + 1 })
+    }
+
+    render() {
+        const board = this.state.board
+
+        return <>
+            <header> Tic Tac Toe </header>
+
+            <main>
+                <section className="board" style={{
+                    gridTemplateColumns: `repeat(${board.length},1fr)`,
+                    gridTemplateColumns: `repeat(${board.length},1fr)`
+                }}>
+                    {board.map((row, i) => row.map((column, j) => <div className="cell" onClick={() => this.play(i, j)} >{this.getCellChar(board[i][j])}</div>)).flat(Infinty)}
+                </section>
+            </main>
+
+            <footer></footer>
+        </>
+    }
+}
+const root = ReactDOM.creatRoot(document.querySelector('#root'))
+root.render(<App />)
\ No newline at end of file
