diff --git a/.gitignore b/.gitignore
index ec6c6fc..daf2ba5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,4 +13,4 @@ auth.json
 
 #output files
 *.bundle.js
-
+*.js.map
diff --git a/package-lock.json b/package-lock.json
index 29e03e5..098cf45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4124,6 +4124,20 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-router-dom": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.0.tgz",
+      "integrity": "sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "readable-stream": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
diff --git a/package.json b/package.json
index 74ad1af..96a2eaa 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^16.8.6",
     "react-redux": "^7.0.3",
     "react-router": "^5.0.0",
+    "react-router-dom": "^5.0.0",
     "redux": "^4.0.1",
     "redux-devtools": "^3.5.0",
     "redux-devtools-dock-monitor": "^1.1.3",
diff --git a/public/styles/shared.css b/public/styles/shared.css
index 40b3c09..462b1db 100644
--- a/public/styles/shared.css
+++ b/public/styles/shared.css
@@ -15,3 +15,85 @@ body {
 	overflow-y: auto;
 }
 
+h1 {
+	font: 24pt;
+}
+
+h2 {
+	font: 14pt;
+}
+
+br {
+	padding-bottom: .5rem;
+}
+
+hr {
+	border: none;
+	height: 1px;
+	color: black;
+	background-color: black;
+}
+
+ul {
+	list-style-type: disc;
+	list-style-position: inside;
+	padding-bottom: .5rem;
+}
+
+.centered {
+	text-align: center;
+}
+
+.right {
+	text-align: right;
+}
+
+/* footer */
+footer {
+	flex: 0 1 auto;
+	justify-self: flex-end;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+/* central display */
+.central {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	padding: 0 10px;
+	min-height: 100vh;
+}
+
+@media screen and (min-width: 768px) {
+	.central {
+		margin: 0 10%;
+	}
+}
+
+.central p {
+	padding-bottom: .5rem;
+}
+
+.page {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}
+
+/* warning message */
+.warning {
+	flex: 0 1 auto;
+	display: none;
+	flex-direction: row;
+	justify-content: center;
+	align-content: flex-end;
+	border-style: solid;
+	border-width: 2px;
+	border-color: #ff0000;
+	background: #ff6666;
+}
+
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 39d4ea0..b8cbfad 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -1,4 +1,12 @@
 import React from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+
+//include pages
+import Home from './pages/home.jsx';
+import PageNotFound from './pages/page_not_found.jsx';
+
+//other stuff
+import Footer from './panels/footer.jsx';
 
 export default class App extends React.Component {
 	constructor(props) {
@@ -7,6 +15,16 @@ export default class App extends React.Component {
 	}
 
 	render() {
-		return <p>Hello world</p>;
+		return (
+			<div className = 'central'>
+				<BrowserRouter>
+					<Switch>
+						<Route exact path='/' component={Home} />
+						<Route path='*' component={PageNotFound} />
+					</Switch>
+				</BrowserRouter>
+				<Footer />
+			</div>
+		);
 	}
 }
\ No newline at end of file
diff --git a/src/components/pages/home.jsx b/src/components/pages/home.jsx
new file mode 100644
index 0000000..3c484d5
--- /dev/null
+++ b/src/components/pages/home.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter, Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+class Home extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	render() {
+		return (
+			<div className='page'>
+				<p>This is the home page</p>
+			</div>
+		);
+	}
+}
+
+function mapStoreToProps(store) {
+	return {
+		//
+	}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		//
+	}
+}
+
+Home = connect(mapStoreToProps, mapDispatchToProps)(Home);
+
+export default withRouter(Home);
\ No newline at end of file
diff --git a/src/components/pages/page_not_found.jsx b/src/components/pages/page_not_found.jsx
new file mode 100644
index 0000000..2e5ec3f
--- /dev/null
+++ b/src/components/pages/page_not_found.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+
+class PageNotFound extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {};
+	}
+
+	render() {
+		let style = {
+			justifyContent: 'center'
+		}
+		return (
+			<div className='page centered' style={style}>
+				<h1>Page Not Found</h1>
+				<Link to='/'>Return Home</Link>
+			</div>
+		);
+	}
+}
+
+export default withRouter(PageNotFound);
\ No newline at end of file
diff --git a/src/components/panels/footer.jsx b/src/components/panels/footer.jsx
new file mode 100644
index 0000000..01d2a95
--- /dev/null
+++ b/src/components/panels/footer.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default class Footer extends React.Component {
+	render() {
+		return (
+			<footer>
+				<p>Copyright <a href='https://krgamestudios.com'>KR Game Studios</a> 2019</p>
+			</footer>
+		);
+	}
+}
+
diff --git a/webpack.config.js b/webpack.config.js
index 8586435..b552121 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,8 +2,10 @@ module.exports = {
   entry: './src/index.jsx',
   output: {
     path: __dirname + '/public/',
-    filename: 'app.bundle.js'
+    filename: 'app.bundle.js',
+    sourceMapFilename: 'app.js.map'
   },
+  devtool: 'source-map',
   module: {
     rules: [
       {