diff --git a/client/src/components/AccountList.js b/client/src/components/AccountList.js
index 6f38c3c..38f1291 100644
--- a/client/src/components/AccountList.js
+++ b/client/src/components/AccountList.js
@@ -1,29 +1,19 @@
-import React from 'react';
+import React from 'react'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons';
 
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import Avatar from '@material-ui/core/Avatar';
-import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
-
-class AccountList extends React.Component {
-  render() {
-    return (
-        <List>
-          {
-            this.props.accounts.map(account => <ListItem button key={account.getId()} onClick={() => this.props.onClick(account)}>
-              <ListItemAvatar>
-                <Avatar>
-                  <PersonRoundedIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
-            </ListItem>
-            )
-          }
-        </List>)
-  }
+export default function AccountList(props) {
+  return <List>
+    {
+      props.accounts.map(account => {
+        const displayName = account.getDisplayNameNoFallback()
+        return <ListItem button key={account.getId()} onClick={() => props.onClick(account)}>
+          <ListItemAvatar>
+            <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
+        </ListItem>
+      })
+    }
+  </List>
 }
-
-export default AccountList;
\ No newline at end of file