diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx
index 415390498..1f20b2e93 100644
--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -1,12 +1,8 @@
-//╔===--------------- Polyfills --------------===╗//
-import 'core-js/es/string/to-well-formed.js';
-//╚===---------------          ---------------===╝//
-
-require('./homebrew.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const { StaticRouter:Router } = require('react-router');
-const { Route, Routes, useParams, useSearchParams } = require('react-router');
+/* eslint-disable camelcase */
+import 'core-js/es/string/to-well-formed.js'; //Polyfill for older browsers
+import './homebrew.less';
+import React from 'react';
+import { StaticRouter as Router, Route, Routes, useParams, useSearchParams } from 'react-router';
 
 const HomePage = require('./pages/homePage/homePage.jsx');
 const EditPage = require('./pages/editPage/editPage.jsx');
@@ -34,62 +30,55 @@ const WithRoute = (props)=>{
 	return <Element {...allProps} />;
 };
 
-const Homebrew = createClass({
-	displayName     : 'Homebrewery',
-	getDefaultProps : function() {
-		return {
-			url         : '',
-			welcomeText : '',
-			changelog   : '',
-			version     : '0.0.0',
-			account     : null,
-			enable_v3   : false,
-			brew        : {
-				title     : '',
-				text      : '',
-				shareId   : null,
-				editId    : null,
-				createdAt : null,
-				updatedAt : null,
-				lang      : ''
-			}
-		};
-	},
+const Homebrew = (props)=>{
+	const {
+		url = '',
+		version = '0.0.0',
+		account = null,
+		enable_v3 = false,
+		enable_themes,
+		config,
+		brew = {
+			title     : '',
+			text      : '',
+			shareId   : null,
+			editId    : null,
+			createdAt : null,
+			updatedAt : null,
+			lang      : ''
+		},
+		userThemes,
+		brews
+	} = props;
 
-	getInitialState : function() {
-		global.account = this.props.account;
-		global.version = this.props.version;
-		global.enable_v3 = this.props.enable_v3;
-		global.enable_themes = this.props.enable_themes;
-		global.config = this.props.config;
+	global.account = account;
+	global.version = version;
+	global.enable_v3 = enable_v3;
+	global.enable_themes = enable_themes;
+	global.config = config;
 
-		return {};
-	},
+	return (
+		<Router location={url}>
+			<div className='homebrew'>
+				<Routes>
+					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
+					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} />} />
+					<Route path='/new/:id' element={<WithRoute el={NewPage} brew={brew} userThemes={userThemes}/>} />
+					<Route path='/new' element={<WithRoute el={NewPage} userThemes={userThemes}/> } />
+					<Route path='/user/:username' element={<WithRoute el={UserPage} brews={brews} />} />
+					<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
+					<Route path='/changelog' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
+					<Route path='/faq' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
+					<Route path='/migrate' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
+					<Route path='/account' element={<WithRoute el={AccountPage} brew={brew} accountDetails={brew.accountDetails} />} />
+					<Route path='/legacy' element={<WithRoute el={HomePage} brew={brew} />} />
+					<Route path='/error' element={<WithRoute el={ErrorPage} brew={brew} />} />
+					<Route path='/' element={<WithRoute el={HomePage} brew={brew} />} />
+					<Route path='/*' element={<WithRoute el={HomePage} brew={brew} />} />
+				</Routes>
+			</div>
+		</Router>
+	);
+};
 
-	render : function (){
-		return (
-			<Router location={this.props.url}>
-				<div className='homebrew'>
-					<Routes>
-						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/new' element={<WithRoute el={NewPage} userThemes={this.props.userThemes}/> } />
-						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
-						<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
-						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/migrate' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
-						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
-						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					</Routes>
-				</div>
-			</Router>
-		);
-	}
-});
-
-module.exports = Homebrew;
\ No newline at end of file
+module.exports = Homebrew;