diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index c1cda38c3..ae11c1e7e 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -25,12 +25,11 @@
 
 .homebrew nav {
 	background-color : #333333;
-	.navContent {
-		position        : relative;
-		z-index         : 2;
-		display         : flex;
-		justify-content : space-between;
-	}
+	position        : relative;
+	z-index         : 2;
+	display         : flex;
+	justify-content : space-between;
+	
 	.navSection {
 		display     : flex;
 		align-items : center;
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 7fcee9e0c..744e187a6 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -429,42 +429,40 @@ const EditPage = createClass({
 			<Meta name='robots' content='noindex, nofollow' />
 			{this.renderNavbar()}
 
-			<div className='content'>
-				{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						snippetBundle={this.state.themeBundle.snippets}
-						updateBrew={this.updateBrew}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						allowPrint={true}
-					/>
-				</SplitPane>
-			</div>
+			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					onStyleChange={this.handleStyleChange}
+					onMetaChange={this.handleMetaChange}
+					reportError={this.errorReported}
+					renderer={this.state.brew.renderer}
+					userThemes={this.props.userThemes}
+					snippetBundle={this.state.themeBundle.snippets}
+					updateBrew={this.updateBrew}
+					onCursorPageChange={this.handleEditorCursorPageChange}
+					onViewPageChange={this.handleEditorViewPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+				/>
+				<BrewRenderer
+					text={this.state.brew.text}
+					style={this.state.brew.style}
+					renderer={this.state.brew.renderer}
+					theme={this.state.brew.theme}
+					themeBundle={this.state.themeBundle}
+					errors={this.state.htmlErrors}
+					lang={this.state.brew.lang}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					allowPrint={true}
+				/>
+			</SplitPane>
 		</div>;
 	}
 });
diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx
index ac3be81df..3b21c7398 100644
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -100,35 +100,31 @@ const HomePage = createClass({
 		return <div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{this.renderNavbar()}
-
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						renderer={this.state.brew.renderer}
-						showEditButtons={false}
-						snippetBundle={this.state.themeBundle.snippets}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						themeBundle={this.state.themeBundle}
-					/>
-				</SplitPane>
-			</div>
-
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					renderer={this.state.brew.renderer}
+					showEditButtons={false}
+					snippetBundle={this.state.themeBundle.snippets}
+					onCursorPageChange={this.handleEditorCursorPageChange}
+					onViewPageChange={this.handleEditorViewPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+				/>
+				<BrewRenderer
+					text={this.state.brew.text}
+					style={this.state.brew.style}
+					renderer={this.state.brew.renderer}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					themeBundle={this.state.themeBundle}
+				/>
+			</SplitPane>
 			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>
diff --git a/client/homebrew/pages/homePage/welcome_msg.md b/client/homebrew/pages/homePage/welcome_msg.md
index c7d46149e..49d1918f0 100644
--- a/client/homebrew/pages/homePage/welcome_msg.md
+++ b/client/homebrew/pages/homePage/welcome_msg.md
@@ -91,13 +91,6 @@ If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](
 
 \page
 
-
-
-
-
-
-
-
 ## Markdown+
 The Homebrewery aims to make homebrewing as simple as possible, providing a live editor with Markdown syntax that is more human-readable and faster to write with than raw HTML.
 
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx
index c147cd474..cb8d5b3ae 100644
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -223,39 +223,37 @@ const NewPage = createClass({
 	render : function(){
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
-			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
-					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						snippetBundle={this.state.themeBundle.snippets}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					/>
-					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						allowPrint={true}
-					/>
-				</SplitPane>
-			</div>
+			<SplitPane onDragFinish={this.handleSplitMove}>
+				<Editor
+					ref={this.editor}
+					brew={this.state.brew}
+					onTextChange={this.handleTextChange}
+					onStyleChange={this.handleStyleChange}
+					onMetaChange={this.handleMetaChange}
+					renderer={this.state.brew.renderer}
+					userThemes={this.props.userThemes}
+					snippetBundle={this.state.themeBundle.snippets}
+					onCursorPageChange={this.handleEditorCursorPageChange}
+					onViewPageChange={this.handleEditorViewPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+				/>
+				<BrewRenderer
+					text={this.state.brew.text}
+					style={this.state.brew.style}
+					renderer={this.state.brew.renderer}
+					theme={this.state.brew.theme}
+					themeBundle={this.state.themeBundle}
+					errors={this.state.htmlErrors}
+					lang={this.state.brew.lang}
+					onPageChange={this.handleBrewRendererPageChange}
+					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
+					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
+					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+					allowPrint={true}
+				/>
+			</SplitPane>
 		</div>;
 	}
 });
diff --git a/client/homebrew/pages/sharePage/sharePage.less b/client/homebrew/pages/sharePage/sharePage.less
index 83e784c49..754108506 100644
--- a/client/homebrew/pages/sharePage/sharePage.less
+++ b/client/homebrew/pages/sharePage/sharePage.less
@@ -1,5 +1,5 @@
 .sharePage{
-	.navContent .navSection.titleSection {
+	nav .navSection.titleSection {
 		flex-grow: 1;
 		justify-content: center;
 	}
diff --git a/client/homebrew/pages/userPage/userPage.jsx b/client/homebrew/pages/userPage/userPage.jsx
index d6fe25b30..f6fae639d 100644
--- a/client/homebrew/pages/userPage/userPage.jsx
+++ b/client/homebrew/pages/userPage/userPage.jsx
@@ -1,12 +1,11 @@
 const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
+const { useState } = React;
+const _ = require('lodash');
 
 const ListPage = require('../basePages/listPage/listPage.jsx');
 
 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 NewBrew = require('../../navbar/newbrew.navitem.jsx');
@@ -14,69 +13,48 @@ const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const VaultNavitem = require('../../navbar/vault.navitem.jsx');
 
-const UserPage = createClass({
-	displayName     : 'UserPage',
-	getDefaultProps : function() {
-		return {
-			username : '',
-			brews    : [],
-			query    : '',
-			error    : null
-		};
-	},
-	getInitialState : function() {
-		const usernameWithS = this.props.username + (this.props.username.endsWith('s') ? `’` : `’s`);
+const UserPage = (props)=>{
+	props = {
+		username : '',
+		brews    : [],
+		query    : '',
+		...props
+	};
 
-		const brews = _.groupBy(this.props.brews, (brew)=>{
-			return (brew.published ? 'published' : 'private');
-		});
+	const [error, setError] = useState(null);
 
-		const brewCollection = [
-			{
-				title : `${usernameWithS} published brews`,
-				class : 'published',
-				brews : brews.published
-			}
-		];
-		if(this.props.username == global.account?.username){
-			brewCollection.push(
-				{
-					title : `${usernameWithS} unpublished brews`,
-					class : 'unpublished',
-					brews : brews.private
-				}
-			);
-		}
+	const usernameWithS = props.username + (props.username.endsWith('s') ? `’` : `’s`);
+	const groupedBrews = _.groupBy(props.brews, (brew)=>brew.published ? 'published' : 'private');
 
-		return {
-			brewCollection : brewCollection
-		};
-	},
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
+	const brewCollection = [
+		{
+			title : `${usernameWithS} published brews`,
+			class : 'published',
+			brews : groupedBrews.published || []
+		},
+		...(props.username === global.account?.username ? [{
+			title : `${usernameWithS} unpublished brews`,
+			class : 'unpublished',
+			brews : groupedBrews.private || []
+		}] : [])
+	];
 
-	navItems : function() {
-		return <Navbar>
+	const navItems = (
+		<Navbar>
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					null
-				}
+				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
-				<VaultNavitem/>
+				<VaultNavitem />
 				<RecentNavItem />
 				<Account />
 			</Nav.section>
-		</Navbar>;
-	},
+		</Navbar>
+	);
 
-	render : function(){
-		return <ListPage brewCollection={this.state.brewCollection} navItems={this.navItems()} query={this.props.query} reportError={this.errorReported}></ListPage>;
-	}
-});
+	return (
+		<ListPage brewCollection={brewCollection}  navItems={navItems} query={props.query} reportError={(err)=>setError(err)} />
+	);
+};
 
 module.exports = UserPage;
diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx
index a51039345..55b0cb370 100644
--- a/client/homebrew/pages/vaultPage/vaultPage.jsx
+++ b/client/homebrew/pages/vaultPage/vaultPage.jsx
@@ -415,16 +415,13 @@ const VaultPage = (props)=>{
 			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
 			{renderNavItems()}
-			<div className='content'>
-				<SplitPane showDividerButtons={false}>
-					<div className='form dataGroup'>{renderForm()}</div>
-
-					<div className='resultsContainer dataGroup'>
-						{renderSortBar()}
-						{renderFoundBrews()}
-					</div>
-				</SplitPane>
-			</div>
+			<SplitPane showDividerButtons={false}>
+				<div className='form dataGroup'>{renderForm()}</div>
+				<div className='resultsContainer dataGroup'>
+					{renderSortBar()}
+					{renderFoundBrews()}
+				</div>
+			</SplitPane>
 		</div>
 	);
 };
diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index a4682aeab..d9b403239 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -12,10 +12,8 @@ const Nav = {
 		displayName : 'Nav.base',
 		render      : function(){
 			return <nav>
-				<div className='navContent'>
 					{this.props.children}
-				</div>
-			</nav>;
+					</nav>;
 		}
 	}),
 	logo : function(){