diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.jsx b/client/homebrew/pages/basePages/uiPage/uiPage.jsx
new file mode 100644
index 000000000..50eafa3c3
--- /dev/null
+++ b/client/homebrew/pages/basePages/uiPage/uiPage.jsx
@@ -0,0 +1,46 @@
+require('./uiPage.less');
+const React = require('react');
+const createClass = require('create-react-class');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../../navbar/navbar.jsx');
+const RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
+const Account = require('../../../navbar/account.navitem.jsx');
+
+
+const UIPage = createClass({
+	displayName : 'UIPage',
+
+	getDefaultProps : function(){
+		return {
+			uiItems : <>
+				<h1>H1 Header</h1>
+				<h2>H2 Header</h2>
+				<h3>H3 Header</h3>
+				<h4>H4 Header</h4>
+				<p>This is some test text.</p>
+			</>
+		};
+	},
+
+	render : function(){
+		return <div className='uiPage sitePage'>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				</Nav.section>
+
+				<Nav.section>
+					<RecentNavItem />
+					<Account />
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				{this.props.uiItems}
+			</div>
+		</div>;
+	}
+});
+
+module.exports = UIPage;
diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.less b/client/homebrew/pages/basePages/uiPage/uiPage.less
new file mode 100644
index 000000000..a26e3fed4
--- /dev/null
+++ b/client/homebrew/pages/basePages/uiPage/uiPage.less
@@ -0,0 +1,30 @@
+.uiPage{
+	.content{
+		overflow-y : hidden;
+		width : 90vw;
+		background-color: #f0f0f0;
+		font-family: 'Open Sans';
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 25px;
+		padding: 2% 4%;
+		font-size: 0.8em;
+		h1, h2, h3, h4{
+			font-weight: 900;
+			text-transform: uppercase;
+			padding-bottom: 0.25em;
+		}
+		h1 {
+			font-size: 2em;
+		}
+		h2 {
+			font-size: 1.75em;
+		}
+		h3 {
+			font-size: 1.5em;
+		}
+		h4 {
+			font-size: 1.25em;
+		}
+	}
+}