diff --git a/src/NavigationBar.js b/src/NavigationBar.js
new file mode 100644
index 0000000..4f96ee1
--- /dev/null
+++ b/src/NavigationBar.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { Link } from 'react-router-dom';
+
+export default ({ pages }) => {
+    return (
+        <nav>
+            <ul>{
+                pages.map((page, k) => {
+                    return (
+                        <li key={k}>
+                            <Link to={ page.path }>
+                                { page.name }
+                            </Link>
+                        </li>    
+                    )
+                })
+            }</ul>
+        </nav>
+    )
+}
\ No newline at end of file
diff --git a/src/Page.js b/src/Page.js
index 8c1c5a8..12af1c5 100644
--- a/src/Page.js
+++ b/src/Page.js
@@ -1,12 +1,24 @@
 import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
 
-class Page extends Component {
+export class Page extends Component {
     render() {
         const props = this.props
         return (
-            <div className="page">{props.name}</div>
-        );
+            <div className="page">
+                <h1>{props.name}</h1>
+                { props.children }
+            </div>
+        )
     }
 }
 
-export default Page;
+const RoutePage = (props) => {
+    return (
+        <Route exact={props.exact} path={props.path} render={() => (
+            <Page { ...props } />
+        )} />
+    )
+}
+
+export default RoutePage;
diff --git a/src/PageManager.js b/src/PageManager.js
new file mode 100644
index 0000000..bd627c1
--- /dev/null
+++ b/src/PageManager.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+
+import { withRouter, Switch } from 'react-router-dom'
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
+
+import Page from './Page'
+import NavigationBar from './NavigationBar'
+
+import './App.css';
+
+export class PageManager extends Component {
+	state = {
+		direction: 0
+	}
+
+	componentWillReceiveProps(nextProps) {
+		const findPage = (ref, elem) => {
+			return elem.indexOf(ref) === 0;
+		};
+		const pageOrder = React.Children.map(this.props.children, (child) => child.props.path)
+
+		console.log(pageOrder)
+
+		let indexCurrent = pageOrder.findIndex(
+			findPage.bind(this, this.props.location.pathname)
+		);
+		let indexNext = pageOrder.findIndex(
+			findPage.bind(this, nextProps.location.pathname)
+		);
+
+		// indexCurrent = indexCurrent !== -1 ? indexCurrent : index404;
+		// indexNext = indexNext !== -1 ? indexNext : index404;
+
+		this.setState({
+			direction: indexNext - indexCurrent
+		});
+	}
+
+	render() {
+		const { children, location } = this.props
+		const currentKey = location.pathname.split("/")[1] || "/";
+		const timeout = { enter: 500, exit: 500 };
+		let pages = []
+		const routes = React.Children.map(children, child => {
+			if (child.type === Page) {
+				pages.push({ name: child.props.name, path: child.props.path })
+				return child
+			} else {
+				return null
+			}
+		})
+		const navbars = children.filter(child => {
+			return child.type === NavigationBar
+		})
+		return (
+			<TransitionGroup component="div" className={"page-container " + (this.state.direction >= 0 ? "right" : "left")}>
+				<CSSTransition
+					key={currentKey}
+					timeout={timeout}
+					classNames="page"
+					appear
+				>
+					<div className={"page-inner"}>
+						<Switch location={location}>
+							{ routes }
+						</Switch>
+					</div>
+				</CSSTransition>
+				{ React.Children.map(navbars, (navbar) => {
+					return React.cloneElement(navbar, { pages })
+				}) }
+			</TransitionGroup>								
+		);
+	}
+}
+
+const PageManagerWithRouter = withRouter(PageManager)
+
+export default props => (
+	<Router>
+		<PageManagerWithRouter { ...props } />
+	</Router>
+);
diff --git a/src/Pages.js b/src/Pages.js
deleted file mode 100644
index 147dfd7..0000000
--- a/src/Pages.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { Component } from 'react';
-
-import { BrowserRouter as Router, Route } from 'react-router-dom'
-
-import { TransitionGroup } from 'react-transition-group'
-
-import './App.css';
-
-const transitionStyles = {
-	entering: { opacity: 0 },
-	entered: { opacity: 1 },
-};
-
-const firstChild = props => {
-	const childrenArray = React.Children.toArray(props.children);
-	return childrenArray[0] || null;
-};
-
-class Pages extends Component {
-	render() {
-		const { children } = this.props
-		return (
-			<Router><div>{
-				React.Children.map(children, (child, i) => {
-					console.log(child.props.exact, child.props.path)
-					return (
-						<Route exact={child.props.exact} path={child.props.path} children={({ match, ...rest }) => (
-							<TransitionGroup
-								component={firstChild}
-							>
-								{match && React.cloneElement(child, { ...rest })}
-							</TransitionGroup>
-						)
-						} />
-					)
-				})
-			}</div></Router>
-		);
-	}
-}
-
-export default Pages;
diff --git a/src/index.js b/src/index.js
index 324d48b..3a94e33 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import './index.css';
-import Pages from './Pages';
+
+import PageManager from './PageManager';
 import Page from './Page';
+import NavigationBar from './NavigationBar';
+
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(
-    <Pages>
-        <Page name="home" exact path="/" />
-        <Page name="page 2" path="/two" />
-    </Pages>, document.getElementById('root'));
+    <div>
+        <PageManager>
+            <Page name="home" exact path="/" />
+            <Page name="page 2" exact path="/two" />
+            <NavigationBar position="bottom" />
+        </PageManager>
+    </div>
+    , document.getElementById('root'));
 registerServiceWorker();