diff --git a/src/App.css b/src/App.css
index 92f956e..5fe56dd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -30,3 +30,7 @@
     transform: rotate(360deg);
   }
 }
+.case{
+  width: 50px;
+  height: 50px;
+}
diff --git a/src/App.js b/src/App.js
index 7e261ca..fb7e2bb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Board from "./Board";
 
 class App extends Component {
   render() {
@@ -19,7 +20,9 @@ class App extends Component {
           >
             Learn React
           </a>
+          <Board/>
         </header>
+
       </div>
     );
   }
diff --git a/src/Board.jsx b/src/Board.jsx
new file mode 100644
index 0000000..9c4ae66
--- /dev/null
+++ b/src/Board.jsx
@@ -0,0 +1,64 @@
+import React, {Component} from 'react';
+import Cases from './Cases.jsx';
+export default class Board extends Component {
+
+
+    constructor(props){
+
+        super(props);
+        this.state= {
+            grid:Array(9).fill(null),
+            player:'X',
+        };
+    }
+
+    handleClick(index) {
+        const grid = [...this.state.grid];
+        //grid[index] = 'X';
+        grid[index] =this.state.player;
+        if(this.state.player === 'X'){
+            this.setState({player:'O'});
+        }
+        else{
+            this.setState({player:'X'});
+
+        }
+        this.setState({ grid });
+    }
+
+    
+    renderCase(i){
+
+        return <Cases value={this.state.grid[i]}
+
+        onClick={() => this.handleClick(i)}
+
+        />;
+    }
+    render() {
+        const tour = 'Next Player : '+ this.state.player;
+
+        return (
+            <div>
+                <div className="tour">{tour}</div>
+                <div className="board-row">
+                    {this.renderCase(0)}
+                    {this.renderCase(1)}
+                    {this.renderCase(2)}
+                </div>
+                <div className="board-row">
+                    {this.renderCase(3)}
+                    {this.renderCase(4)}
+                    {this.renderCase(5)}
+                </div>
+                <div className="board-row">
+                    {this.renderCase(6)}
+                    {this.renderCase(7)}
+                    {this.renderCase(8)}
+                </div>
+            </div>
+        );
+    }
+
+    
+}
diff --git a/src/Cases.jsx b/src/Cases.jsx
new file mode 100644
index 0000000..76d7211
--- /dev/null
+++ b/src/Cases.jsx
@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+
+
+export default class Cases extends Component{
+
+    getStyle() {
+        return {
+            cursor: this.props.value ? 'default' : 'pointer'
+        }
+    }
+
+    render() {
+        return (
+            <button
+                className="case"
+                style={this.getStyle()}
+                onClick={this.props.onClick}
+            >
+                {this.props.value}
+            </button>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/Game.jsx b/src/Game.jsx
new file mode 100644
index 0000000..ab12f16
--- /dev/null
+++ b/src/Game.jsx
@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import Board from './Board.jsx';
+
+
+export default class Game extends Component{
+
+    render() {
+        return (
+            <div className="game">
+                <div className="game-board">
+                    <Board/>
+                </div>
+                <div className="game-info">
+                    <div>{/* status */}</div>
+                    <ol>{/* TODO */}</ol>
+                </div>
+            </div>
+        );
+    }
+    
+    
+}
\ No newline at end of file