diff --git a/client/homebrew/pages/accountPage/accountPage.jsx b/client/homebrew/pages/accountPage/accountPage.jsx
index c796b9d22..88a347121 100644
--- a/client/homebrew/pages/accountPage/accountPage.jsx
+++ b/client/homebrew/pages/accountPage/accountPage.jsx
@@ -1,5 +1,4 @@
 const React = require('react');
-const createClass = require('create-react-class');
 const moment = require('moment');
 
 const UIPage = require('../basePages/uiPage/uiPage.jsx');
@@ -8,74 +7,76 @@ const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
 
 let SAVEKEY = '';
 
-const AccountPage = createClass({
-	displayName     : 'AccountPage',
-	getDefaultProps : function() {
-		return {
-			brew    : {},
-			uiItems : {}
-		};
-	},
-	getInitialState : function() {
-		return {
-			uiItems : this.props.uiItems
-		};
-	},
-	componentDidMount : function(){
-		if(!this.state.saveLocation && this.props.uiItems.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${this.props.uiItems.username}`;
-			let saveLocation =  window.localStorage.getItem(SAVEKEY);
-			saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
-			this.makeActive(saveLocation);
+const AccountPage = (props)=>{
+	const [saveLocation, setSaveLocation] = React.useState('');
+
+	React.useEffect(()=>{
+		if(!saveLocation && props.uiItems.username) {
+			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${props.uiItems.username}`;
+			let saveLocation = window.localStorage.getItem(SAVEKEY);
+			saveLocation = saveLocation ?? (props.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
+			makeActive(saveLocation);
 		}
-	},
+	}, []);
 
-	makeActive : function(newSelection){
-		if(this.state.saveLocation == newSelection) return;
+	const makeActive = (newSelection)=>{
+		if(saveLocation === newSelection) return;
 		window.localStorage.setItem(SAVEKEY, newSelection);
-		this.setState({
-			saveLocation : newSelection
-		});
-	},
+		setSaveLocation(newSelection);
+	};
 
-	renderButton : function(name, key, shouldRender=true){
-		if(!shouldRender) return;
-		return <button className={this.state.saveLocation==key ? 'active' :	''}	onClick={()=>{this.makeActive(key);}}>{name}</button>;
-	},
+	const renderButton = (name, key, shouldRender = true)=>{
+		if(!shouldRender) return null;
+		return (
+			<button
+				className={saveLocation === key ? 'active' : ''}
+				onClick={()=>{
+					makeActive(key);
+				}}
+			>
+				{name}
+			</button>
+		);
+	};
 
-	renderUiItems : function() {
-		return 	<>
-			<div className='dataGroup'>
-				<h1>Account Information  <i className='fas fa-user'></i></h1>
-				<p><strong>Username: </strong> {this.props.uiItems.username || 'No user currently logged in'}</p>
-				<p><strong>Last Login: </strong> {moment(this.props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
-			</div>
-			<div className='dataGroup'>
-				<h3>Homebrewery Information <NaturalCritIcon /></h3>
-				<p><strong>Brews on Homebrewery: </strong> {this.props.uiItems.mongoCount}</p>
-			</div>
-			<div className='dataGroup'>
-				<h3>Google Information <i className='fab fa-google-drive'></i></h3>
-				<p><strong>Linked to Google: </strong> {this.props.uiItems.googleId ? 'YES' : 'NO'}</p>
-				{this.props.uiItems.googleId &&
-					<p>
-						<strong>Brews on Google Drive: </strong> {this.props.uiItems.googleCount ?? <>Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a></>}
-					</p>
-				}
-			</div>
-			<div className='dataGroup'>
-				<h4>Default Save Location</h4>
-				{this.renderButton('Homebrewery', 'HOMEBREWERY')}
-				{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)}
-			</div>
-		</>;
-	},
+	const renderUiItems = ()=>{
+		return (
+			<>
+				<div className='dataGroup'>
+					<h1>Account Information <i className='fas fa-user'></i></h1>
+					<p><strong>Username: </strong>{props.uiItems.username || 'No user currently logged in'}</p>
+					<p><strong>Last Login: </strong>{moment(props.uiItems.issued).format('dddd, MMMM Do YYYY, h:mm:ss a ZZ') || '-'}</p>
+				</div>
+				<div className='dataGroup'>
+					<h3>Homebrewery Information <NaturalCritIcon /></h3>
+					<p><strong>Brews on Homebrewery: </strong>{props.uiItems.mongoCount}</p>
+				</div>
+				<div className='dataGroup'>
+					<h3>Google Information <i className='fab fa-google-drive'></i></h3>
+					<p><strong>Linked to Google: </strong>{props.uiItems.googleId ? 'YES' : 'NO'}</p>
+					{props.uiItems.googleId && (
+						<p>
+							<strong>Brews on Google Drive: </strong>{props.uiItems.googleCount ?? (
+								<>
+									Unable to retrieve files - <a href='https://github.com/naturalcrit/homebrewery/discussions/1580'>follow these steps to renew your Google credentials.</a>
+								</>
+							)}
+						</p>
+					)}
+				</div>
+				<div className='dataGroup'>
+					<h4>Default Save Location</h4>
+					{renderButton('Homebrewery', 'HOMEBREWERY')}
+					{renderButton('Google Drive', 'GOOGLE-DRIVE', props.uiItems.googleId)}
+				</div>
+			</>
+		);
+	};
 
-	render : function(){
-		return <UIPage brew={this.props.brew}>
-			{this.renderUiItems()}
-		</UIPage>;
-	}
-});
+	return (
+		<UIPage brew={props.brew}>
+			{renderUiItems()}
+		</UIPage>);
+};
 
 module.exports = AccountPage;