6 files changed, 77 insertions, 77 deletions
diff --git a/frontend/src/components/gamesList.js b/frontend/src/components/gamesList.js
new file mode 100644
index 00000000..0519e7d6
--- /dev/null
+++ b/frontend/src/components/gamesList.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Flex } from 'reflexbox'
+import { Text, Space } from 'rebass'
+
+const GameBrowser = (props) => (
+  <div>
+    {props.games.valueSeq().map((game, index) => {
+      return (<Flex key={index}>
+        <Text>{game.get('name')}</Text>
+        <Space auto />
+        <a href="#">Join</a>
+      </Flex>)
+    })}
+  </div>
+)
+
+export default GameBrowser
diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js
deleted file mode 100644
index a8779b64..00000000
--- a/frontend/src/containers/app.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import {
-  Banner,
-  Heading,
-  Space,
-  InlineForm,
-  Text
-} from 'rebass'
-import { Flex } from 'reflexbox'
-import GameBrowser from './gameBrowser'
-
-class App extends Component {
-
-  createGame = (e) => {
-    e.preventDefault()
-    if (this._gameName !== undefined) {
-      this.props.createGame(this._gameName)
-    }
-  }
-
-  render() {
-    return (
-      <div>
-        <Banner
-          align="center"
-          style={{minHeight: '30vh'}}
-          backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
-        >
-          <Heading level={1}>Seven Wonders</Heading>
-        </Banner>
-        <Flex align="center" p={1}>
-          <InlineForm
-            buttonLabel="Create Game"
-            label="Game name"
-            name="game_name"
-            onChange={(e) => this._gameName = e.target.value}
-            onClick={this.createGame}
-          >
-          </InlineForm>
-          <Space auto />
-          <Text><b>Username:</b> {this.props.username}</Text>
-          <Space x={1} />
-        </Flex>
-        <GameBrowser />
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = (state) => ({
-  username: state.players.get('all').get(state.players.get('current')).get('username')
-})
-
-
-import { actions } from '../redux/games'
-const mapDispatchToProps = {
-  createGame: actions.createGame
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/frontend/src/containers/gameBrowser.js b/frontend/src/containers/gameBrowser.js
index 9deb720b..bc3933fa 100644
--- a/frontend/src/containers/gameBrowser.js
+++ b/frontend/src/containers/gameBrowser.js
@@ -1,31 +1,53 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
+import {
+  Space,
+  InlineForm,
+  Text
+} from 'rebass'
 import { Flex } from 'reflexbox'
-import { Text, Space } from 'rebass'
+import GamesList from '../components/gamesList'
 
-class GameBrowser extends Component {
+class App extends Component {
 
-  listGames = (games) => {
-    return games.valueSeq().map((game, index) => {
-      return (<Flex key={index}>
-        <Text>{game.get('name')}</Text>
-        <Space auto />
-        <a href="#">Join</a>
-      </Flex>)
-    })
+  createGame = (e) => {
+    e.preventDefault()
+    if (this._gameName !== undefined) {
+      this.props.createGame(this._gameName)
+    }
   }
 
   render() {
     return (
       <div>
-        {this.listGames(this.props.games)}
+        <Flex align="center" p={1}>
+          <InlineForm
+            buttonLabel="Create Game"
+            label="Game name"
+            name="game_name"
+            onChange={(e) => this._gameName = e.target.value}
+            onClick={this.createGame}
+          >
+          </InlineForm>
+          <Space auto />
+          <Text><b>Username:</b> {this.props.username}</Text>
+          <Space x={1} />
+        </Flex>
+        <GamesList games={this.props.games} />
       </div>
     )
   }
 }
 
 const mapStateToProps = (state) => ({
+  username: state.players.get('all').get(state.players.get('current')).get('displayName'),
   games: state.games
 })
 
-export default connect(mapStateToProps, {})(GameBrowser)
+
+import { actions } from '../redux/games'
+const mapDispatchToProps = {
+  createGame: actions.createGame
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/frontend/src/index.js b/frontend/src/index.js
index f06bb7b4..d5190d53 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,7 +2,7 @@ import 'babel-polyfill'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route } from 'react-router'
+import { Router, Route, IndexRoute } from 'react-router'
 import { Provider } from 'react-redux'
 import configureStore from './store'
 
@@ -11,15 +11,18 @@ const { store, history } = configureStore(initialState)
 
 import './global-styles.css'
 import HomePage from './containers/home'
-import GameBrowser from './containers/app'
+import { LobbyLayout } from './layouts'
+import GameBrowser from './containers/gameBrowser'
 import Error404 from './components/errors/Error404'
 
 ReactDOM.render(
   <Provider store={store}>
     <Router history={history}>
       <div className="app">
-        <Route path="/" component={HomePage} />
-        <Route path="/games" component={GameBrowser} />
+        <Route path="/" component={LobbyLayout}>
+          <IndexRoute  component={HomePage} />
+          <Route path="/games" component={GameBrowser} />
+        </Route>
         <Route path="*" component={Error404} />
       </div>
     </Router>
diff --git a/frontend/src/layouts/LobbyLayout.js b/frontend/src/layouts/LobbyLayout.js
new file mode 100644
index 00000000..ac7c3264
--- /dev/null
+++ b/frontend/src/layouts/LobbyLayout.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import {
+  Banner,
+  Heading,
+} from 'rebass'
+
+export default (props) => (
+  <div>
+    <Banner
+      align="center"
+      style={{minHeight: '30vh'}}
+      backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
+    >
+      <Heading level={1}>Seven Wonders</Heading>
+    </Banner>
+    {props.children}
+  </div>
+)
diff --git a/frontend/src/layouts/index.js b/frontend/src/layouts/index.js
new file mode 100644
index 00000000..7beb62b8
--- /dev/null
+++ b/frontend/src/layouts/index.js
@@ -0,0 +1 @@
+export { default as LobbyLayout } from './LobbyLayout'