It livesssssssss

client/tpk/navbar/navbar.jsx

@@ -0,0 +1,21 @@
+var React = require('react');
+var _ = require('lodash');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+var Navbar = React.createClass({
+	render : function(){
+		return <Nav.base>
+			<Nav.section>
+				<Nav.logo />
+				<Nav.item href='/tpk' className='tpkLogo'>
+					<div>Total.Party.Knolling</div>
+				</Nav.item>
+				<Nav.item>v0.0.0</Nav.item>
+			</Nav.section>
+			{this.props.children}
+		</Nav.base>
+	}
+});
+
+module.exports = Navbar;

client/tpk/navbar/navbar.less

@@ -0,0 +1,16 @@
+
+.tpk nav{
+	.tpkLogo{
+		.animate(color);
+		font-family : CodeBold;
+		font-size   : 12px;
+		color       : white;
+		div{
+			margin-top    : 2px;
+			margin-bottom : -2px;
+		}
+		&:hover{
+			color : @teal;
+		}
+	}
+}

client/tpk/tpk.jsx

@@ -2,13 +2,28 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var COM = React.createClass({
+var Nav = require('naturalcrit/nav/nav.jsx');
+var Navbar = require('./navbar/navbar.jsx');
+
+
+var TPK = React.createClass({
 
 	render : function(){
-		return <div className='COM'>
-			COM Ready!
+		return <div className='tpk page'>
+			<Navbar>
+				<Nav.section>
+					<Nav.item>
+						yo dawg
+					</Nav.item>
+				</Nav.section>
+			</Navbar>
+			<div className='content'>
+
+				Holla y'all
+
+			</div>
 		</div>
 	}
 });
 
-module.exports = COM;
+module.exports = TPK;

client/tpk/tpk.less

@@ -1,3 +1,16 @@
-.COM{
 
+@import 'naturalcrit/styles/core.less';
+.tpk{
+	height           : 100%;
+	background-color : @steel;
+	.page{
+		display        : flex;
+		height         : 100%;
+		flex-direction : column;
+		.content{
+			position : relative;
+			height   : calc(~"100% - 29px"); //Navbar height
+			flex     : auto;
+		}
+	}
 }