diff --git a/client/src/components/UserImages.js b/client/src/components/UserImages.js
index d886c413f..63f057c35 100644
--- a/client/src/components/UserImages.js
+++ b/client/src/components/UserImages.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import {graphql, compose} from 'react-apollo'
 import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries'
+import Avatar from '@material-ui/core/Avatar';
+import classNames from 'classnames';
 
-import ReactFilestack from 'filestack-react';
+import ReactFilestack from 'filestack-react'
+import Portrait from '../img/portrait.jpg'
 
 // Material-ui
 
@@ -14,18 +17,29 @@ const options = {
   accept: ['image/jpeg', 'image/jpg', 'image/png'],
   maxFiles: 1,
   imageDim: [300, 300],
-  maxSize: 0.25 * 1024 * 1024, // 1/4 of 1 Mb 
+  maxSize: 0.25 * 1024 * 1024, // 1/4 of 1 Mb
   storeTo: {
     location: 's3',
   },
 };
 
 const styles = theme => ({
-  
+
   button: {
     margin: theme.spacing.unit,
     marginTop: theme.spacing.unit * 3
   },
+  row: {
+  display: 'flex',
+  justifyContent: 'center',
+  },
+  avatar: {
+    margin: 10,
+  },
+  bigAvatar: {
+    width: 60,
+    height: 60,
+  },
 })
 
 class UserImages extends React.Component {
@@ -36,7 +50,7 @@ class UserImages extends React.Component {
       avatarHandle: ''
     }
   }
-  
+
   onSuccess = (uploadResults) => {
     console.log('onSuccess')
     console.log(uploadResults)
@@ -54,7 +68,16 @@ class UserImages extends React.Component {
     return (
       <div>
         <Grid container justify='center' >
-          <Grid item>            
+          <Grid item>
+          <div className={classes.row}>
+            <Avatar alt="Remy Sharp" src={Portrait} className={classes.avatar} />
+            <Avatar
+              alt="Adelle Charles"
+              src={Portrait}
+              className={classNames(classes.avatar, classes.bigAvatar)}
+            />
+            </div>
+             
             <img  src={"https://cdn.filestackcontent.com/"  + this.state.avatarHandle} alt='2' />
             <Button variant='contained' color='secondary' className={classes.button}>
               <ReactFilestack
diff --git a/server/models/user.js b/server/models/user.js
index 372af6bbb..2fd5bcef9 100644
--- a/server/models/user.js
+++ b/server/models/user.js
@@ -16,7 +16,9 @@ const userSchema = new Schema({
   isDeveloper: Boolean,
   isTrader: Boolean,
   isDataAnalyst: Boolean,
-  roleId: String
+  roleId: String,
+  avatarHandle: String,
+  avatarChangeDate: String
 })
 
 global.UserSchema = global.UserSchema || mongoose.model('User', userSchema)
diff --git a/server/schema/schema.js b/server/schema/schema.js
index 584f19f0a..a9dab9416 100644
--- a/server/schema/schema.js
+++ b/server/schema/schema.js
@@ -40,6 +40,8 @@ const UserType = new GraphQLObjectType({
     isDeveloper: {type: GraphQLInt},
     isTrader: {type: GraphQLInt},
     isDataAnalyst: {type: GraphQLInt},
+    avatarHandle: {type: GraphQLString},
+    avatarChangeDate: {type: GraphQLString},
     role: {
       type: RoleType,
       resolve (parent, args) {
@@ -177,6 +179,8 @@ const Mutation = new GraphQLObjectType({
         isDeveloper: {type: GraphQLInt},
         isTrader: {type: GraphQLInt},
         isDataAnalyst: {type: GraphQLInt},
+        avatarHandle: {type: GraphQLString},
+        avatarChangeDate: {type: GraphQLString},
         roleId: {type: new GraphQLNonNull(GraphQLString)}
       },
       resolve (parent, args) {
@@ -192,6 +196,8 @@ const Mutation = new GraphQLObjectType({
           isDeveloper: args.isDeveloper,
           isTrader: args.isTrader,
           isDataAnalyst: args.isDataAnalyst,
+          avatarHandle: args.avatarHandle,
+          avatarChangeDate: args.avatarChangeDate,
           roleId: args.roleId
         }