diff --git a/src/components/App/index.js b/src/components/App/index.js
index 4fb2db6..44db043 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -1,4 +1,26 @@
-import React from 'react';
+import React , {Component}from 'react';
 import Game from '../Game'
+import FirstPage from '../FirstPage'
+class App extends Component  {
 
-export const App = () => <Game />
+    state = {
+        gameStarted : false
+        
+      };
+
+       startGame = ( ) => {
+
+        this.setState({gameStarted: true})}
+       render() {
+      return (
+        <div>
+
+        { (!this.state.gameStarted  )? (<FirstPage startGame={this.startGame} />) : (<Game />)}
+        </div>
+
+       ) 
+      }
+
+}
+
+export default App
\ No newline at end of file
diff --git a/src/components/FirstPage/index.js b/src/components/FirstPage/index.js
index f932fa8..83f4c61 100644
--- a/src/components/FirstPage/index.js
+++ b/src/components/FirstPage/index.js
@@ -1,10 +1,13 @@
-import React, {component} from 'react'
-const FirstPage = ()=>{
+import React from 'react'
+const FirstPage = ({startGame})=>{
+
     return(
         <div>
         <h1>English Learning Game</h1>
-        <button>start</button>
+        <button onClick={() => startGame()
+        }>Start</button>
         </div>
     )
 }
+
 export default FirstPage
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e93ef96..23fc286 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { App } from './components/App';
+
+import App  from './components/App';
 
 ReactDOM.render(<App />, document.getElementById('root'));