diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.jsx b/client/homebrew/pages/basePages/uiPage/uiPage.jsx
index 400dbb28e..9fa7e08bb 100644
--- a/client/homebrew/pages/basePages/uiPage/uiPage.jsx
+++ b/client/homebrew/pages/basePages/uiPage/uiPage.jsx
@@ -1,7 +1,4 @@
 import './uiPage.less';
-import React from 'react';
-import createReactClass from 'create-react-class';
-
 import Nav from '../../../navbar/nav.jsx';
 import Navbar from '../../../navbar/navbar.jsx';
 import NewBrewItem from '../../../navbar/newbrew.navitem.jsx';
@@ -10,30 +7,22 @@ import RecentNavItems from '../../../navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 import Account from '../../../navbar/account.navitem.jsx';
 
+const UIPage = ({ brew, children })=><div className='sitePage uiPage'>
+	<Navbar>
+		<Nav.section>
+			<Nav.item className='brewTitle'>{brew?.title}</Nav.item>
+		</Nav.section>
+		<Nav.section>
+			<NewBrewItem />
+			<HelpNavItem />
+			<RecentNavItem />
+			<Account />
+		</Nav.section>
+	</Navbar>
 
-const UIPage = createReactClass({
-	displayName : 'UIPage',
-
-	render : function(){
-		return <div className='uiPage sitePage'>
-			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
-				</Nav.section>
-
-				<Nav.section>
-					<NewBrewItem />
-					<HelpNavItem />
-					<RecentNavItem />
-					<Account />
-				</Nav.section>
-			</Navbar>
-
-			<div className='content'>
-				{this.props.children}
-			</div>
-		</div>;
-	}
-});
+	<div className='content'>
+		{children}
+	</div>
+</div>;
 
 export default UIPage;