diff --git a/src/features/user-admin/List.js b/src/features/user-admin/List.js
index 0ca0f14..8eed50e 100644
--- a/src/features/user-admin/List.js
+++ b/src/features/user-admin/List.js
@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom'
 import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
+import { ListItem } from '.';
 import * as actions from './redux/actions';
 
 export class List extends Component {
@@ -28,19 +29,15 @@ export class List extends Component {
         <Table className="user-list">
           <TableHead>
             <TableRow>
+              <TableCell>Avatar</TableCell>
+              <TableCell>Display Name</TableCell>
               <TableCell>Username</TableCell>
               <TableCell>Guest</TableCell>
               <TableCell>Admin</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
-            {userList.map(item => (
-              <TableRow key={item.name}>
-                <TableCell>{item.name}</TableCell>
-                <TableCell>{item.is_guest ? 'X' : ''}</TableCell>
-                <TableCell>{item.admin ? 'X' : ''}</TableCell>
-              </TableRow>
-            ))}
+            {userList.map(item => (<ListItem key={item.name} name={item.name} is_guest={item.is_guest} is_admin={item.admin} />))}
           </TableBody>
         </Table>
       </div>
diff --git a/src/features/user-admin/ListItem.js b/src/features/user-admin/ListItem.js
new file mode 100644
index 0000000..59ff2d2
--- /dev/null
+++ b/src/features/user-admin/ListItem.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Avatar, TableCell, TableRow } from '@material-ui/core';
+import * as actions from './redux/actions';
+
+export class ListItem extends Component {
+  static propTypes = {
+    mtx: PropTypes.object.isRequired,
+    userAdmin: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    is_guest: PropTypes.bool,
+    is_admin: PropTypes.bool,
+  };
+
+  componentDidMount() {
+    const { fetchProfile } = this.props.actions;
+    const { name } = this.props;
+    fetchProfile(name);
+  }
+
+  render() {
+    const { name, is_guest, is_admin } = this.props;
+    const { userProfiles } = this.props.userAdmin;
+    var profile = {};
+    if (name in userProfiles) {
+      profile = userProfiles[name];
+    }
+    // create url for showing avatar image
+    var avatar_src = "";
+    if ( typeof profile.avatar_url !== 'undefined') {
+        // mxc://serverName/mediaId
+        var res = profile.avatar_url.split("/");
+        var serverName = res[2];
+        var mediaId = res[3];
+        avatar_src = "https://" + serverName + "/_matrix/media/r0/thumbnail/" + serverName + "/" + mediaId + "?width=36&amp;height=36&amp;method=crop";
+    }
+    return (
+      <TableRow hover>
+        <TableCell padding="none"><Avatar src={avatar_src} alt={profile.displayname} /></TableCell>
+        <TableCell>{profile.displayname}</TableCell>
+        <TableCell>{name}</TableCell>
+        <TableCell>{is_guest ? 'X' : ''}</TableCell>
+        <TableCell>{is_admin ? 'X' : ''}</TableCell>
+      </TableRow>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    mtx: state.common.mtx,
+    userAdmin: state.userAdmin,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ ...actions }, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ListItem);
diff --git a/src/features/user-admin/ListItem.scss b/src/features/user-admin/ListItem.scss
new file mode 100644
index 0000000..55c1e05
--- /dev/null
+++ b/src/features/user-admin/ListItem.scss
@@ -0,0 +1,5 @@
+@import '../../styles/mixins';
+
+.user-admin-list-item {
+
+}
diff --git a/src/features/user-admin/index.js b/src/features/user-admin/index.js
index 2d01c86..a8064b3 100644
--- a/src/features/user-admin/index.js
+++ b/src/features/user-admin/index.js
@@ -1 +1,2 @@
 export { default as List } from './List';
+export { default as ListItem } from './ListItem';
diff --git a/src/features/user-admin/style.scss b/src/features/user-admin/style.scss
index 9c6d373..e235b02 100644
--- a/src/features/user-admin/style.scss
+++ b/src/features/user-admin/style.scss
@@ -1,2 +1,3 @@
 @import '../../styles/mixins';
 @import './List';
+@import './ListItem';
diff --git a/tests/features/user-admin/ListItem.test.js b/tests/features/user-admin/ListItem.test.js
new file mode 100644
index 0000000..0f10c8c
--- /dev/null
+++ b/tests/features/user-admin/ListItem.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ListItem } from '../../../src/features/user-admin/ListItem';
+
+describe('user-admin/ListItem', () => {
+  it('renders node with correct class name', () => {
+    const props = {
+      userAdmin: {},
+      actions: {},
+    };
+    const renderedComponent = shallow(
+      <ListItem {...props} />
+    );
+
+    expect(
+      renderedComponent.find('.user-admin-list-item').length
+    ).toBe(1);
+  });
+});