diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index 12fa43a..79ab388 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -1,45 +1,32 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import { useParams } from 'react-router';
+import { Container, CircularProgress } from '@material-ui/core';
 import Header from '../components/Header'
 import AccountPreferences from '../components/AccountPreferences'
-import Container from '@material-ui/core/Container';
-import CircularProgress from '@material-ui/core/CircularProgress';
 import authManager from '../AuthManager'
 import Account from '../../../model/Account'
 
-class AccountSettings extends React.Component {
+const AccountSettings = (props) => {
+  const accountId = props.accountId || useParams().accountId
+  const [state, setState] = useState({ loaded: false })
 
-  constructor(props) {
-    super(props)
-    this.accountId = props.accountId || props.match.params.accountId
-    this.state = { loaded: false, account: props.account }
-    this.req = undefined
-  }
+  useEffect(() => {
+    const controller = new AbortController()
+    authManager.fetch(`/api/accounts/${accountId}`, {signal: controller.signal})
+      .then(res => res.json())
+      .then(result => {
+        console.log(result)
+        setState({loaded: true, account: Account.from(result)})
+      })
+      return () => controller.abort()
+  }, [])
 
-  componentDidMount() {
-    this.controller = new AbortController()
-    if (this.req === undefined) {
-      this.req = authManager.fetch(`/api/accounts/${this.accountId}`, {signal: this.controller.signal})
-        .then(res => res.json())
-        .then(result => {
-          console.log(result)
-          this.setState({loaded: true, account: Account.from(result)})
-        })
-    }
-  }
-
-  componentWillUnmount() {
-    this.controller.abort()
-    this.req = undefined
-  }
-
-  render() {
-    return (
-      <Container maxWidth="sm" className="app" >
-        <Header />
-        {this.state.loaded ? <AccountPreferences account={this.state.account} /> : <CircularProgress />}
-      </Container>
-    )
-  }
+  return (
+    <Container maxWidth="sm">
+      <Header />
+      {state.loaded ? <AccountPreferences account={state.account} /> : <CircularProgress />}
+    </Container>
+  )
 }
 
 export default AccountSettings;
\ No newline at end of file