diff --git a/app/components/AudioCallBox.js b/app/components/AudioCallBox.js
index 4b80d5a..1274150 100644
--- a/app/components/AudioCallBox.js
+++ b/app/components/AudioCallBox.js
@@ -1,264 +1,268 @@
 import React, { Component } from 'react';
 import { View, Platform } from 'react-native';
 import { IconButton, Dialog, Text, ActivityIndicator, Colors } from 'react-native-paper';
 import PropTypes from 'prop-types';
 import autoBind from 'auto-bind';
 
 import EscalateConferenceModal from './EscalateConferenceModal';
 import CallOverlay from './CallOverlay';
 import DTMFModal from './DTMFModal';
 import UserIcon from './UserIcon';
 import styles from '../assets/styles/blink/_AudioCallBox.scss';
 import utils from '../utils';
 
 
 class AudioCallBox extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
         this.state = {
             active                      : false,
             audioMuted                  : this.props.muted,
             showDtmfModal               : false,
             showEscalateConferenceModal : false,
             call                        : this.props.call,
             reconnectingCall            : this.props.reconnectingCall
         };
 
         this.remoteAudio = React.createRef();
         this.userHangup = false;
     }
 
     componentDidMount() {
         // This component is used both for as 'local media' and as the in-call component.
         // Thus, if the call is not null it means we are beyond the 'local media' phase
         // so don't call the mediaPlaying prop.
 
         if (this.state.call != null) {
             switch (this.state.call.state) {
                 case 'established':
                     this.attachStream(this.state.call);
                     break;
                 case 'incoming':
                     this.props.mediaPlaying();
                     // fall through
                 default:
                     this.state.call.on('stateChanged', this.callStateChanged);
                     break;
             }
         } else {
             this.props.mediaPlaying();
         }
     }
 
     componentWillUnmount() {
         if (this.state.call != null) {
             this.state.call.removeListener('stateChanged', this.callStateChanged);
         }
     }
 
     //getDerivedStateFromProps(nextProps, state) {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (nextProps.call && nextProps.call !== this.state.call) {
             if (nextProps.call.state === 'established') {
                 this.attachStream(nextProps.call);
                 this.setState({reconnectingCall: false});
             }
 
             nextProps.call.on('stateChanged', this.callStateChanged);
 
             if (this.state.call !== null) {
                 this.state.call.removeListener('stateChanged', this.callStateChanged);
             }
             this.setState({call: nextProps.call});
         }
 
         if (nextProps.reconnectingCall != this.state.reconnectingCall) {
             console.log('Audio box got prop reconnecting', nextProps.reconnectingCall);
             this.setState({reconnectingCall: nextProps.reconnectingCall});
         }
 
         if (nextProps.hasOwnProperty('muted')) {
             this.setState({audioMuted: nextProps.muted});
         }
     }
 
     componentWillUnmount() {
         if (this.state.call != null) {
             this.state.call.removeListener('stateChanged', this.callStateChanged);
         }
         clearTimeout(this.callTimer);
     }
 
     callStateChanged(oldState, newState, data) {
         if (newState === 'established') {
             this.attachStream(this.state.call);
             this.setState({reconnectingCall: false});
         }
     }
 
     attachStream(call) {
         this.setState({stream: call.getRemoteStreams()[0]}); //we dont use it anywhere though as audio gets automatically piped
     }
 
     escalateToConference(participants) {
         this.props.escalateToConference(participants);
     }
 
     hangupCall(event) {
         event.preventDefault();
         this.props.hangupCall('user_press_hangup');
         this.userHangup = true;
     }
 
     cancelCall(event) {
         event.preventDefault();
         this.props.hangupCall('user_cancelled');
     }
 
     muteAudio(event) {
         event.preventDefault();
         this.props.toggleMute(this.props.call.id, !this.state.audioMuted);
      }
 
     showDtmfModal() {
         this.setState({showDtmfModal: true});
     }
 
     hideDtmfModal() {
         this.setState({showDtmfModal: false});
     }
 
     toggleEscalateConferenceModal() {
         this.setState({
             showEscalateConferenceModal: !this.state.showEscalateConferenceModal
         });
     }
 
     render() {
         let buttonContainerClass;
         let userIconContainerClass;
 
-        let remoteIdentity = {uri: this.props.remoteUri, displayName: this.props.remoteDisplayName};
+        let remoteIdentity = {uri: this.props.remoteUri,
+                              displayName: this.props.remoteDisplayName,
+                              photo: this.props.photo
+                              };
         let displayName = (this.props.remoteDisplayName && this.props.remoteUri !== this.props.remoteDisplayName) ? this.props.remoteDisplayName: this.props.remoteUri;
 
         if (this.props.isTablet) {
             buttonContainerClass = this.props.orientation === 'landscape' ? styles.tabletLandscapeButtonContainer : styles.tabletPortraitButtonContainer;
             userIconContainerClass = styles.tabletUserIconContainer;
         } else {
             buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer;
             userIconContainerClass = styles.userIconContainer;
         }
 
         const buttonSize = this.props.isTablet ? 40 : 34;
         const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
 
         return (
             <View style={styles.container}>
                 <CallOverlay style={styles.callStatus}
                     show={true}
                     remoteUri={this.props.remoteUri}
                     remoteDisplayName={this.props.remoteDisplayName}
                     call={this.state.call}
                     connection={this.props.connection}
                     accountId={this.props.accountId}
                 />
                 <View style={userIconContainerClass}>
                     <UserIcon identity={remoteIdentity} large={true} active={this.state.active} />
                 </View>
                 <Dialog.Title style={styles.displayName}>{displayName}</Dialog.Title>
                 { (this.props.remoteDisplayName && this.props.remoteUri !== this.props.remoteDisplayName) ?
 
                 <Text style={styles.uri}>{this.props.remoteUri}</Text>
                 : null }
 
                 {this.props.orientation !== 'landscape' && !this.userHangup && this.state.reconnectingCall ?
                 <ActivityIndicator style={styles.activity} animating={true} size={'large'} color={Colors.red800} />
                 :
                 null
                 }
 
                 {this.state.call && this.state.call.state === 'established' ?
                     <View style={buttonContainerClass}>
                     <IconButton
                         size={buttonSize}
                         style={buttonClass}
                         icon="account-plus"
                         onPress={this.toggleEscalateConferenceModal}
                     />
                     <IconButton
                         size={buttonSize}
                         style={buttonClass}
                         icon={this.state.audioMuted ? 'microphone-off' : 'microphone'}
                         onPress={this.muteAudio}
                     />
                     <IconButton
                         size={buttonSize}
                         style={buttonClass}
                         icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
                         onPress={this.props.toggleSpeakerPhone}
                     />
                     <IconButton
                         size={buttonSize}
                         style={buttonClass}
                         icon="dialpad"
                         onPress={this.showDtmfModal}
                         disabled={!(this.state.call && this.state.call.state === 'established')}
                     />
                     <IconButton
                         size={buttonSize}
                         style={[buttonClass, styles.hangupButton]}
                         icon="phone-hangup"
                         onPress={this.hangupCall}
                     />
                     </View>
                     :
                     <View style={buttonContainerClass}>
                     <IconButton
                         size={buttonSize}
                         style={[buttonClass, styles.hangupButton]}
                         icon="phone-hangup"
                         onPress={this.cancelCall}
                     />
                     </View>
                 }
 
                 <DTMFModal
                     show={this.state.showDtmfModal}
                     hide={this.hideDtmfModal}
                     call={this.state.call}
                     callKeepSendDtmf={this.props.callKeepSendDtmf}
                 />
                 <EscalateConferenceModal
                     show={this.state.showEscalateConferenceModal}
                     call={this.state.call}
                     close={this.toggleEscalateConferenceModal}
                     escalateToConference={this.escalateToConference}
                 />
             </View>
         );
     }
 }
 
 AudioCallBox.propTypes = {
     remoteUri               : PropTypes.string.isRequired,
     remoteDisplayName       : PropTypes.string,
+    photo                   : PropTypes.string,
     call                    : PropTypes.object,
     connection              : PropTypes.object,
     accountId               : PropTypes.string,
     escalateToConference    : PropTypes.func,
     hangupCall              : PropTypes.func,
     mediaPlaying            : PropTypes.func,
     callKeepSendDtmf        : PropTypes.func,
     toggleMute              : PropTypes.func,
     toggleSpeakerPhone      : PropTypes.func,
     speakerPhoneEnabled     : PropTypes.bool,
     orientation             : PropTypes.string,
     isTablet                : PropTypes.bool,
     reconnectingCall        : PropTypes.bool,
     muted                   : PropTypes.bool
 
 };
 
 export default AudioCallBox;
diff --git a/app/components/Call.js b/app/components/Call.js
index 336780e..e49f8a7 100644
--- a/app/components/Call.js
+++ b/app/components/Call.js
@@ -1,417 +1,422 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import assert from 'assert';
 import debug from 'react-native-debug';
 import autoBind from 'auto-bind';
 import uuid from 'react-native-uuid';
 
 import AudioCallBox from './AudioCallBox';
 import LocalMedia from './LocalMedia';
 import VideoBox from './VideoBox';
 import config from '../config';
 import utils from '../utils';
 
 
 class Call extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
         this.defaultWaitInterval = 60; // until we can connect or reconnect
         this.waitCounter = 0;
         this.waitInterval = this.defaultWaitInterval;
 
         let audioOnly = false;
         if (this.props.localMedia && this.props.localMedia.getVideoTracks().length === 0) {
             audioOnly = true;
         }
 
         let remoteUri = '';
         let remoteDisplayName = '';
         let callState = null;
         let direction = 'outgoing';
         let callUUID;
         let callEnded = false;
         this.mediaIsPlaying = false;
 
         if (this.props.call !== null) {
             // If current call is available on mount we must have incoming
             this.props.call.on('stateChanged', this.callStateChanged);
             callState = this.props.call.state;
             remoteUri = this.props.call.remoteIdentity.uri;
             direction = this.props.call.direction;
             callUUID = this.props.call.id;
             remoteDisplayName = this.props.call.remoteIdentity.displayName;
         } else {
             remoteUri = this.props.targetUri;
             remoteDisplayName = this.props.targetUri;
             callUUID = this.props.callUUID;
         }
 
         if (this.props.connection) {
             this.props.connection.on('stateChanged', this.connectionStateChanged);
         }
 
         this.state = {
                       audioOnly: audioOnly,
                       remoteUri: remoteUri,
                       remoteDisplayName: remoteDisplayName,
                       connection: this.props.connection,
                       accountId: this.props.account ? this.props.account.id : null,
                       callState: callState,
                       direction: direction,
                       callUUID: callUUID,
                       reconnectingCall: this.props.reconnectingCall
                       }
     }
 
     mediaPlaying() {
         if (this.state.direction === 'incoming') {
             this.answerCall();
         } else {
             this.mediaIsPlaying = true;
         }
     }
 
     componentDidMount() {
         if (this.state.direction === 'outgoing') {
             this.startCallWhenReady();
         }
     }
 
     componentWillUnmount() {
         //console.log('Call: will unmount');
     }
 
     lookupContact() {
         let remoteUri = '';
         let remoteDisplayName = '';
+        let photo = null;
 
         if (this.props.call !== null) {
             remoteUri = this.props.call.remoteIdentity.uri;
             remoteDisplayName = this.props.call.remoteIdentity.displayName || this.props.call.remoteIdentity.uri;
         } else {
             remoteUri = this.props.targetUri;
             remoteDisplayName = this.props.targetUri;
         }
 
         if (remoteUri.indexOf('3333@') > -1) {
             remoteDisplayName = 'Video Test';
         } else if (remoteUri.indexOf('4444@') > -1) {
             remoteDisplayName = 'Echo Test';
         } else if (this.props.contacts) {
             let username = remoteUri.split('@')[0];
             let isPhoneNumber = username.match(/^(\+|0)(\d+)$/);
 
             if (isPhoneNumber) {
                 var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', username);
             } else {
                 var contact_obj = this.findObjectByKey(this.props.contacts, 'remoteParty', remoteUri);
             }
 
             if (contact_obj) {
                 remoteDisplayName = contact_obj.displayName;
-                this.setState({remoteDisplayName: remoteDisplayName});
+                photo = contact_obj.photo;
                 if (isPhoneNumber) {
                     remoteUri = username;
                 }
             } else {
                 if (isPhoneNumber) {
                     remoteUri = username;
                     remoteDisplayName = username;
                 }
             }
         }
 
         this.setState({remoteDisplayName: remoteDisplayName,
-                       remoteUri: remoteUri
+                       remoteUri: remoteUri,
+                       photo: photo
                        });
     }
 
     //getDerivedStateFromProps(nextProps, state) {
     UNSAFE_componentWillReceiveProps(nextProps) {
         //console.log('Call: received props');
         // Needed for switching to incoming call while in a call
         if (this.props.call != null && this.props.call != nextProps.currentCall) {
             if (nextProps.currentCall != null) {
                 nextProps.currentCall.on('stateChanged', this.callStateChanged);
             }
         }
 
         if (nextProps.reconnectingCall !== this.state.reconnectingCall) {
             this.setState({reconnectingCall: nextProps.reconnectingCall});
         }
     }
 
     callStateChanged(oldState, newState, data) {
         //console.log('Call: callStateChanged', oldState, '->', newState);
         let remoteHasNoVideoTracks;
         let remoteIsRecvOnly;
         let remoteIsInactive;
         let remoteStreams;
 
         if (newState === 'established') {
             this.setState({reconnectingCall: false});
             const currentCall = this.props.call;
 
             if (currentCall) {
                 remoteStreams = currentCall.getRemoteStreams();
                 if (remoteStreams) {
                     if (remoteStreams.length > 0) {
                         const remotestream = remoteStreams[0];
                         remoteHasNoVideoTracks = remotestream.getVideoTracks().length === 0;
                         remoteIsRecvOnly = currentCall.remoteMediaDirections.video[0] === 'recvonly';
                         remoteIsInactive = currentCall.remoteMediaDirections.video[0] === 'inactive';
                     }
                 }
             }
 
             if (remoteStreams && (remoteHasNoVideoTracks || remoteIsRecvOnly || remoteIsInactive) && !this.state.audioOnly) {
                 //console.log('Media type changed to audio');
                 // Stop local video
                 if (this.props.localMedia.getVideoTracks().length !== 0) {
                     currentCall.getLocalStreams()[0].getVideoTracks()[0].stop();
                 }
                 this.setState({audioOnly: true});
             } else {
                 this.forceUpdate();
             }
 
         } else if (newState === 'accepted') {
             // Switch if we have audioOnly and local videotracks. This means
             // the call object switched and we are transitioning to an
             // incoming call.
             if (this.state.audioOnly &&  this.props.localMedia && this.props.localMedia.getVideoTracks().length !== 0) {
                 //console.log('Media type changed to video on accepted');
                 this.setState({audioOnly: false});
             }
         }
 
         this.forceUpdate();
     }
 
     connectionStateChanged(oldState, newState) {
         utils.timestampedLog('Call: connection state changed:', oldState, '->' , newState);
         switch (newState) {
             case 'closed':
                 break;
             case 'ready':
                 break;
             case 'disconnected':
                 if (oldState === 'ready' && this.state.direction === 'outgoing') {
                     utils.timestampedLog('Call: reconnecting the call');
                     this.waitInterval = this.defaultWaitInterval;
                     this.startCallWhenReady();
                 }
                 break;
             default:
                 break;
         }
     }
 
     findObjectByKey(array, key, value) {
         for (var i = 0; i < array.length; i++) {
             if (array[i][key] === value) {
                 return array[i];
             }
         }
         return null;
     }
 
     async startCallWhenReady() {
         if (!this.props.callUUID || !this.props.targetUri) {
             return;
         }
         utils.timestampedLog('Call: start call', this.props.callUUID, 'when ready to', this.props.targetUri);
         this.waitCounter = 0;
 
         this.lookupContact();
 
         utils.timestampedLog('Call: waiting for establishing call', this.waitInterval, 'seconds');
 
         let diff = 0;
 
         while (this.waitCounter < this.waitInterval) {
             if (this.userHangup) {
                 this.hangupCall('user_cancelled');
                 return;
             }
 
             if (this.waitCounter >= this.waitInterval - 1) {
                 utils.timestampedLog('Call: terminating conference', this.props.callUUID, 'that did not start yet');
                 this.hangupCall('timeout');
             }
 
             if (!this.props.connection ||
                  this.props.connection.state !== 'ready' ||
                  this.props.registrationState !== 'registered' ||
                  !this.mediaIsPlaying
                  ) {
                 utils.timestampedLog('Call: waiting for connection', this.waitInterval - this.waitCounter, 'seconds');
                 await this._sleep(1000);
             } else {
                 this.waitCounter = 0;
 
                 this.call();
 
                 return;
             }
 
             this.waitCounter++;
         }
     }
 
     _sleep(ms) {
         return new Promise(resolve => setTimeout(resolve, ms));
     }
 
     call() {
         utils.timestampedLog('Call: starting call', this.props.callUUID);
 
         if (this.props.localMedia === null)  {
             console.log('Call: cannot create new call without local media');
             return;
         }
 
         let options = {pcConfig: {iceServers: config.iceServers}, id: this.props.callUUID};
         options.localStream = this.props.localMedia;
 
         let call = this.props.account.call(this.props.targetUri, options);
         call.on('stateChanged', this.callStateChanged);
     }
 
     answerCall() {
         if (this.props.call && this.props.call.state === 'incoming') {
             this.lookupContact();
             let options = {pcConfig: {iceServers: config.iceServers}};
             options.localStream = this.props.localMedia;
             this.props.call.answer(options);
         }
     }
 
     hangupCall(reason) {
         let callUUID = this.props.call ? this.props.call._callkeepUUID : this.props.callUUID;
         this.waitInterval = this.defaultWaitInterval;
 
         this.props.callUUID || this.props.call._callkeepUUID;
 
         if (this.props.call) {
             this.props.call.removeListener('stateChanged', this.callStateChanged);
         }
 
         if (this.props.connection) {
             this.props.connection.removeListener('stateChanged', this.connectionStateChanged);
         }
 
         if (this.waitCounter > 0) {
             this.waitCounter = this.waitInterval;
         }
 
         this.props.hangupCall(callUUID, reason);
     }
 
     render() {
         let box = null;
 
         if (this.props.localMedia !== null) {
             if (this.state.audioOnly) {
                 box = (
                     <AudioCallBox
                         remoteUri = {this.state.remoteUri}
                         remoteDisplayName = {this.state.remoteDisplayName}
+                        photo = {this.state.photo}
                         hangupCall = {this.hangupCall}
                         call = {this.props.call}
                         accountId={this.state.accountId}
                         connection = {this.props.connection}
                         mediaPlaying = {this.mediaPlaying}
                         escalateToConference = {this.props.escalateToConference}
                         callKeepSendDtmf = {this.props.callKeepSendDtmf}
                         toggleMute = {this.props.toggleMute}
                         speakerPhoneEnabled = {this.props.speakerPhoneEnabled}
                         toggleSpeakerPhone = {this.props.toggleSpeakerPhone}
                         orientation = {this.props.orientation}
                         isTablet = {this.props.isTablet}
                         reconnectingCall = {this.state.reconnectingCall}
                         muted = {this.props.muted}
                     />
                 );
             } else {
                 if (this.props.call != null && (this.props.call.state === 'established' || this.props.call.state === 'terminated')) {
                     box = (
                         <VideoBox
                             remoteUri = {this.state.remoteUri}
                             remoteDisplayName = {this.state.remoteDisplayName}
+                            photo = {this.state.photo}
                             hangupCall = {this.hangupCall}
                             call = {this.props.call}
                             accountId={this.state.accountId}
                             connection = {this.props.connection}
                             localMedia = {this.props.localMedia}
                             shareScreen = {this.props.shareScreen}
                             escalateToConference = {this.props.escalateToConference}
                             generatedVideoTrack = {this.props.generatedVideoTrack}
                             callKeepSendDtmf = {this.props.callKeepSendDtmf}
                             toggleMute = {this.props.toggleMute}
                             speakerPhoneEnabled = {this.props.speakerPhoneEnabled}
                             toggleSpeakerPhone = {this.props.toggleSpeakerPhone}
                             intercomDtmfTone = {this.props.intercomDtmfTone}
                             orientation = {this.props.orientation}
                             isTablet = {this.props.isTablet}
                             reconnectingCall = {this.state.reconnectingCall}
                             muted = {this.props.muted}
                         />
                     );
                 } else {
                     if (this.props.call && this.props.call.state === 'terminated') {
                         //console.log('Skip render local media');
                         // do not render
                     } else {
                         //console.log('Render local media');
                         box = (
                             <LocalMedia
                                 call = {this.props.call}
                                 remoteUri = {this.state.remoteUri}
                                 remoteDisplayName = {this.state.remoteDisplayName}
+                                photo = {this.state.photo}
                                 localMedia = {this.props.localMedia}
                                 mediaPlaying = {this.mediaPlaying}
                                 hangupCall = {this.hangupCall}
                                 generatedVideoTrack = {this.props.generatedVideoTrack}
                                 accountId={this.state.accountId}
                                 connection = {this.props.connection}
                                 orientation = {this.props.orientation}
                                 isTablet = {this.props.isTablet}
                             />
                         );
                     }
                 }
             }
         }
         return box;
     }
 }
 
 Call.propTypes = {
     targetUri               : PropTypes.string.isRequired,
     account                 : PropTypes.object,
     hangupCall              : PropTypes.func,
     connection              : PropTypes.object,
     registrationState       : PropTypes.string,
     call                    : PropTypes.object,
     localMedia              : PropTypes.object,
     shareScreen             : PropTypes.func,
     escalateToConference    : PropTypes.func,
     generatedVideoTrack     : PropTypes.bool,
     callKeepSendDtmf        : PropTypes.func,
     toggleMute              : PropTypes.func,
     speakerPhoneEnabled     : PropTypes.bool,
     callUUID                : PropTypes.string,
     contacts                : PropTypes.array,
     intercomDtmfTone        : PropTypes.string,
     orientation             : PropTypes.string,
     isTablet                : PropTypes.bool,
     reconnectingCall        : PropTypes.bool,
     muted                   : PropTypes.bool
 };
 
 
 export default Call;
diff --git a/app/components/CallOverlay.js b/app/components/CallOverlay.js
index 0f5c818..d7062ca 100644
--- a/app/components/CallOverlay.js
+++ b/app/components/CallOverlay.js
@@ -1,186 +1,187 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import moment from 'moment';
 import momentFormat from 'moment-duration-format';
 import autoBind from 'auto-bind';
 import { Appbar } from 'react-native-paper';
 import Icon from  'react-native-vector-icons/MaterialCommunityIcons';
 import { ActivityIndicator, Colors } from 'react-native-paper';
 
 import styles from '../assets/styles/blink/_AudioCallBox.scss';
 
 
 function toTitleCase(str) {
     return str.replace(
         /\w\S*/g,
         function(txt) {
             return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
         }
     );
 }
 
 class CallOverlay extends React.Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
         this.state = {
             callState: null,
             call: this.props.call,
             direction: this.props.call ? this.props.call.direction : 'outgoing'
         }
 
         this.duration = null;
         this.finalDuration = null;
         this.timer = null;
         this._isMounted = true;
         this.reconnecting = false;
     }
 
     componentDidMount() {
         if (this.state.call) {
             if (this.state.call.state === 'established') {
                 this.startTimer();
             }
             this.state.call.on('stateChanged', this.callStateChanged);
             this.setState({callState: this.state.call.state});
         }
     }
 
     //getDerivedStateFromProps(nextProps, state) {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (nextProps.call && nextProps.call !== this.state.call) {
             nextProps.call.on('stateChanged', this.callStateChanged);
 
             if (this.state.call !== null) {
                 this.state.call.removeListener('stateChanged', this.callStateChanged);
             }
             this.setState({call: nextProps.call});
         }
     }
 
     componentWillUnmount() {
         if (this.state.call) {
             this.state.call.removeListener('stateChanged', this.callStateChanged);
         }
         this._isMounted = false;
         clearTimeout(this.timer);
     }
 
     callStateChanged(oldState, newState, data) {
         if (newState === 'established' && this._isMounted) {
             this.startTimer();
         }
 
         if (newState === 'terminated') {
             if (this.state.call) {
                 this.state.call.removeListener('stateChanged', this.callStateChanged);
             }
 
             clearTimeout(this.timer);
             this.finalDuration = this.duration;
             this.duration = null;
             this.timer = null;
         }
 
         this.setState({callState: newState});
     }
 
     startTimer() {
         if (this.timer !== null) {
             // already armed
             return;
         }
 
         // TODO: consider using window.requestAnimationFrame
 
         const startTime = new Date();
         this.timer = setInterval(() => {
             this.duration = moment.duration(new Date() - startTime).format('hh:mm:ss', {trim: false});
             if (this.props.show) {
                 this.forceUpdate();
             }
         }, 300);
     }
 
     render() {
         /*
         console.log('Render call overlay with call state', this.state.callState);
         if (this.props.connection) {
             console.log('Connection state', this.props.connection.state);
         }
         */
 
 
         let header = null;
 
         let displayName = this.props.remoteUri;
 
         if (this.props.remoteDisplayName && this.props.remoteDisplayName !== this.props.remoteUri) {
             displayName = this.props.remoteDisplayName;
         }
 
         if (this.props.show) {
             let callDetail;
 
             if (this.duration) {
                 callDetail = <View><Icon name="clock"/><Text>{this.duration}</Text></View>;
                 callDetail = 'Duration:' + this.duration;
             } else {
                 if (this.finalDuration && (!this.props.connection || this.props.connection.state !== 'ready' || !this.props.accountId)) {
                     if (this.state.callState && this.state.callState === 'terminated') {
                         callDetail = 'Restoring the conversation...';
                         this.reconnecting = true;
                     } else {
                         callDetail = 'Waiting for connection...';
                     }
                 } else {
                     if (this.state.callState === 'terminated') {
                         callDetail = 'Call ended';
                         if (this.finalDuration) {
                             callDetail = callDetail +  ' after ' + this.finalDuration;
                         }
                     } else {
                         callDetail = this.state.callState ? toTitleCase(this.state.callState) : 'Connecting...';
                     }
                 }
             }
 
             if (this.props.remoteUri.search('videoconference') > -1) {
                 displayName = this.props.remoteUri.split('@')[0];
 
                 header = (
                     <Appbar.Header style={{backgroundColor: 'black'}}>
                         <Appbar.Content
                             title={`Conference: ${displayName}`} subtitle={callDetail}
                         />
                     </Appbar.Header>
                 );
             } else {
                 header = (
                     <Appbar.Header style={styles.appbarContainer}>
                         <Appbar.Content
                             title={`Call with ${displayName}`} subtitle={callDetail}
                         />
                     </Appbar.Header>
                 );
             }
         }
 
         return header
     }
 }
 
 CallOverlay.propTypes = {
     show: PropTypes.bool.isRequired,
     remoteUri: PropTypes.string.isRequired,
     remoteDisplayName: PropTypes.string,
+    photo: PropTypes.string,
     accountId: PropTypes.string,
     call: PropTypes.object,
     connection: PropTypes.object
 };
 
 
 export default CallOverlay;
diff --git a/app/components/LocalMedia.js b/app/components/LocalMedia.js
index eaa99ae..35bba07 100644
--- a/app/components/LocalMedia.js
+++ b/app/components/LocalMedia.js
@@ -1,84 +1,86 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import autoBind from 'auto-bind';
 import { View, Dimensions } from 'react-native';
 import { RTCView } from 'react-native-webrtc';
 import { IconButton } from 'react-native-paper';
 
 import CallOverlay from './CallOverlay';
 import styles from '../assets/styles/blink/_LocalMedia.scss';
 
 
 class LocalMedia extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
         this.localVideo = React.createRef();
 
     }
 
     componentDidMount() {
         this.props.mediaPlaying();
     }
 
     hangupCall(event) {
         event.preventDefault();
         this.props.hangupCall('stop_preview');
     }
 
     render() {
         let {height, width} = Dimensions.get('window');
         let videoStyle = {
             height,
             width
         };
 
         const streamUrl = this.props.localMedia ? this.props.localMedia.toURL() : null;
         const buttonSize = this.props.isTablet ? 40 : 34;
         const buttonContainerClass = this.props.isTablet ? styles.tabletButtonContainer : styles.buttonContainer;
 
         return (
             <Fragment>
                 <CallOverlay
                     show = {true}
                     remoteUri={this.props.remoteUri}
                     remoteDisplayName={this.props.remoteDisplayName}
+                    photo={this.props.photo}
                     call = {this.props.call}
                     connection={this.props.connection}
                     accountId={this.props.accountId}
                 />
                 <View style={buttonContainerClass}>
                     <IconButton style={styles.button} key="hangupButton" onPress={this.hangupCall} icon="phone-hangup" size={buttonSize} />
                 </View>
 
                 <View style={styles.container}>
                     <RTCView objectFit="cover"
                              style={[styles.video, videoStyle]}
                              id="localVideo"
                              ref={this.localVideo}
                              streamURL={streamUrl}
                              mirror={true}
                              />
                 </View>
             </Fragment>
         );
     }
 }
 
 LocalMedia.propTypes = {
     call                : PropTypes.object,
     hangupCall          : PropTypes.func,
     localMedia          : PropTypes.object.isRequired,
     remoteUri           : PropTypes.string,
     remoteDisplayName   : PropTypes.string,
+    photo               : PropTypes.string,
     mediaPlaying        : PropTypes.func.isRequired,
     generatedVideoTrack : PropTypes.bool,
     connection          : PropTypes.object,
     accountId           : PropTypes.string,
     orientation         : PropTypes.string,
     isTablet            : PropTypes.bool
 };
 
 
 export default LocalMedia;
diff --git a/app/components/VideoBox.js b/app/components/VideoBox.js
index 635b481..e6e346c 100644
--- a/app/components/VideoBox.js
+++ b/app/components/VideoBox.js
@@ -1,369 +1,369 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dtmf from 'react-native-dtmf';
 import debug from 'react-native-debug';
 import autoBind from 'auto-bind';
 import { IconButton, ActivityIndicator, Colors } from 'react-native-paper';
 import { View, Dimensions, TouchableWithoutFeedback, Platform  } from 'react-native';
 import { RTCView } from 'react-native-webrtc';
 
 import CallOverlay from './CallOverlay';
 import EscalateConferenceModal from './EscalateConferenceModal';
 import DTMFModal from './DTMFModal';
 import config from '../config';
 import styles from '../assets/styles/blink/_VideoBox.scss';
 
 const DEBUG = debug('blinkrtc:Video');
 debug.enable('*');
 
 
 class VideoBox extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
         this.state = {
             callOverlayVisible: true,
             audioMuted: this.props.muted,
             videoMuted: false,
             localVideoShow: false,
             remoteVideoShow: false,
             remoteSharesScreen: false,
             showEscalateConferenceModal: false,
             localStream: null,
             remoteStream: null,
             showDtmfModal: false,
             doorOpened: false
         };
 
         this.overlayTimer = null;
         this.localVideo = React.createRef();
         this.remoteVideo = React.createRef();
         this.userHangup = false;
     }
 
     //getDerivedStateFromProps(nextProps, state) {
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (nextProps.hasOwnProperty('muted')) {
             this.setState({audioMuted: nextProps.muted});
         }
     }
 
     callStateChanged(oldState, newState, data) {
         this.forceUpdate();
     }
 
     openDoor() {
         const tone = this.props.intercomDtmfTone;
         DEBUG('DTMF tone sent to intercom: ' + tone);
         this.setState({doorOpened: true});
         this.forceUpdate();
 
         dtmf.stopTone(); //don't play a tone at the same time as another
         dtmf.playTone(dtmf['DTMF_' + tone], 1000);
 
         if (this.props.call !== null && this.props.call.state === 'established') {
             this.props.call.sendDtmf(tone);
             /*this.props.notificationCenter.postSystemNotification('Door opened', {timeout: 5});*/
         }
     }
 
     componentDidMount() {
         this.setState({
             localStream: this.props.call.getLocalStreams()[0],
             localVideoShow: true,
             remoteStream: this.props.call.getRemoteStreams()[0],
             remoteVideoShow: true
         });
 
         if (this.props.call) {
             this.props.call.on('stateChanged', this.callStateChanged);
         }
         this.armOverlayTimer();
     }
 
     componentWillUnmount() {
         if (this.props.call != null) {
             this.props.call.removeListener('stateChanged', this.callStateChanged);
         }
     }
 
     showDtmfModal() {
         this.setState({showDtmfModal: true});
     }
 
     hideDtmfModal() {
         this.setState({showDtmfModal: false});
     }
 
     handleFullscreen(event) {
         event.preventDefault();
         // this.toggleFullscreen();
     }
 
     handleRemoteVideoPlaying() {
         this.setState({remoteVideoShow: true});
     }
 
     handleRemoteResize(event, target) {
         const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180'];
         const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight;
         if (resolutions.indexOf(videoResolution) === -1) {
             this.setState({remoteSharesScreen: true});
         } else {
             this.setState({remoteSharesScreen: false});
         }
     }
 
     muteAudio(event) {
         event.preventDefault();
         this.props.toggleMute(this.props.call.id, !this.state.audioMuted);
     }
 
     muteVideo(event) {
         event.preventDefault();
         const localStream = this.state.localStream;
         if (localStream.getVideoTracks().length > 0) {
             const track = localStream.getVideoTracks()[0];
             if(this.state.videoMuted) {
                 DEBUG('Unmute camera');
                 track.enabled = true;
                 this.setState({videoMuted: false});
             } else {
                 DEBUG('Mute camera');
                 track.enabled = false;
                 this.setState({videoMuted: true});
             }
         }
     }
 
     toggleCamera(event) {
         event.preventDefault();
         const localStream = this.state.localStream;
         if (localStream.getVideoTracks().length > 0) {
             const track = localStream.getVideoTracks()[0];
             track._switchCamera();
         }
     }
 
     hangupCall(event) {
         event.preventDefault();
         this.props.hangupCall('user_press_hangup');
         this.userHangup = true;
     }
 
     cancelCall(event) {
         event.preventDefault();
         this.props.hangupCall('user_cancelled');
     }
 
     escalateToConference(participants) {
         this.props.escalateToConference(participants);
     }
 
     armOverlayTimer() {
         clearTimeout(this.overlayTimer);
         this.overlayTimer = setTimeout(() => {
             this.setState({callOverlayVisible: false});
         }, 4000);
     }
 
     toggleCallOverlay() {
         this.setState({callOverlayVisible: !this.state.callOverlayVisible});
     }
 
     toggleEscalateConferenceModal() {
         this.setState({
             callOverlayVisible          : false,
             showEscalateConferenceModal : !this.state.showEscalateConferenceModal
         });
     }
 
     render() {
         if (this.props.call === null) {
             return null;
         }
 
         // 'mirror'          : !this.props.call.sharingScreen && !this.props.generatedVideoTrack,
         // we do not want mirrored local video once the call has started, just in preview
 
         const localVideoClasses = classNames({
             'video-thumbnail' : true,
             'hidden'          : !this.state.localVideoShow,
             'animated'        : true,
             'fadeIn'          : this.state.localVideoShow || this.state.videoMuted,
             'fadeOut'         : this.state.videoMuted,
             'fit'             : this.props.call.sharingScreen
         });
 
         const remoteVideoClasses = classNames({
             'poster'        : !this.state.remoteVideoShow,
             'animated'      : true,
             'fadeIn'        : this.state.remoteVideoShow,
             'large'         : true,
             'fit'           : this.state.remoteSharesScreen
         });
 
         let buttonContainerClass;
-        let userIconContainerClass;
 
         let buttons;
         const muteButtonIcons = this.state.audioMuted ? 'microphone-off' : 'microphone';
         const muteVideoButtonIcons = this.state.videoMuted ? 'video-off' : 'video';
         const buttonClass = (Platform.OS === 'ios') ? styles.iosButton : styles.androidButton;
 
         const buttonSize = this.props.isTablet ? 40 : 34;
 
         if (this.props.isTablet) {
             buttonContainerClass = this.props.orientation === 'landscape' ? styles.tabletLandscapeButtonContainer : styles.tabletPortraitButtonContainer;
             userIconContainerClass = styles.tabletUserIconContainer;
         } else {
             buttonContainerClass = this.props.orientation === 'landscape' ? styles.landscapeButtonContainer : styles.portraitButtonContainer;
-            userIconContainerClass = styles.userIconContainer;
         }
 
         if (this.state.callOverlayVisible) {
             let content = (<View style={buttonContainerClass}>
                 <IconButton
                     size={buttonSize}
                     style={buttonClass}
                     onPress={this.toggleEscalateConferenceModal}
                     icon="account-plus"
                 />
                 <IconButton
                     size={buttonSize}
                     style={buttonClass}
                     onPress={this.muteAudio}
                     icon={muteButtonIcons}
                 />
                 <IconButton
                     size={buttonSize}
                     style={buttonClass}
                     onPress={this.muteVideo}
                     icon={muteVideoButtonIcons}
                 />
                 <IconButton
                     size={buttonSize}
                     style={[buttonClass]}
                     icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
                     onPress={this.props.toggleSpeakerPhone}
                 />
                 <IconButton
                     size={buttonSize}
                     style={[buttonClass, styles.hangupButton]}
                     onPress={this.hangupCall}
                     icon="phone-hangup"
                 />
             </View>);
             if (this.props.intercomDtmfTone) {
                 content = (<View style={buttonContainerClass}>
                     <IconButton
                         size={50}
                         style={buttonClass}
                         icon={this.state.doorOpened ? "door-open": "door" }
                         onPress={this.openDoor}
                         disabled={!(this.props.call && this.props.call.state === 'established')}
                     />
                     <IconButton
                         size={buttonSize}
                         style={[buttonClass]}
                         icon={this.props.speakerPhoneEnabled ? 'volume-high' : 'volume-off'}
                         onPress={this.props.toggleSpeakerPhone}
                     />
                     <IconButton
                         size={50}
                         style={[styles.button, styles.hangupButton]}
                         onPress={this.hangupCall}
                         icon="phone-hangup"
                     />
                 </View>);
             }
             buttons = (<View style={styles.buttonContainer}>{content}</View>);
         }
 
         const remoteStreamUrl = this.state.remoteStream ? this.state.remoteStream.toURL() : null
         //console.log('Render remote video stream Url', remoteStreamUrl);
 
         return (
             <View style={styles.container}>
                 <CallOverlay
                     show = {this.state.callOverlayVisible || this.props.reconnectingCall}
                     remoteUri = {this.props.remoteUri}
                     remoteDisplayName = {this.props.remoteDisplayName}
+                    photo={this.props.photo}
                     call = {this.props.call}
                     connection = {this.props.connection}
                     accountId = {this.props.accountId}
                 />
                 {this.state.remoteVideoShow && !this.props.reconnectingCall ?
                     <View style={[styles.container, styles.remoteVideoContainer]}>
                         <TouchableWithoutFeedback onPress={this.toggleCallOverlay}>
                             <RTCView
                                 objectFit='cover'
                                 style={[styles.video, styles.remoteVideo]}
                                 poster="assets/images/transparent-1px.png"
                                 ref={this.remoteVideo}
                                 streamURL={remoteStreamUrl}
                             />
                         </TouchableWithoutFeedback>
                     </View>
                     : null }
                 { this.state.localVideoShow ?
                     <View style={[styles.localVideoContainer]}>
                         <TouchableWithoutFeedback onPress={this.toggleCamera}>
                             <RTCView
                                 objectFit='cover'
                                 style={[styles.video, styles.localVideo]}
                                 ref={this.localVideo}
                                 streamURL={this.state.localStream ? this.state.localStream.toURL() : null}
                                 mirror={true}
                             />
                         </TouchableWithoutFeedback>
                     </View>
                     : null }
 
                 {this.props.reconnectingCall
                     ? <ActivityIndicator style={styles.reconnectContainer} animating={true} size={'large'} color={Colors.red800} />
                     : null
                 }
                 {buttons}
                 <DTMFModal
                     show={this.state.showDtmfModal}
                     hide={this.hideDtmfModal}
                     call={this.props.call}
                     callKeepSendDtmf={this.props.callKeepSendDtmf}
                 />
                 <EscalateConferenceModal
                     show={this.state.showEscalateConferenceModal}
                     call={this.props.call}
                     close={this.toggleEscalateConferenceModal}
                     escalateToConference={this.escalateToConference}
                 />
             </View>
         );
     }
 }
 
 VideoBox.propTypes = {
     call                    : PropTypes.object,
     connection              : PropTypes.object,
+    photo                   : PropTypes.string,
     accountId               : PropTypes.string,
     remoteUri               : PropTypes.string,
     remoteDisplayName       : PropTypes.string,
     localMedia              : PropTypes.object,
     hangupCall              : PropTypes.func,
     shareScreen             : PropTypes.func,
     escalateToConference    : PropTypes.func,
     generatedVideoTrack     : PropTypes.bool,
     callKeepSendDtmf        : PropTypes.func,
     toggleMute              : PropTypes.func,
     toggleSpeakerPhone      : PropTypes.func,
     speakerPhoneEnabled     : PropTypes.bool,
     intercomDtmfTone        : PropTypes.string,
     orientation             : PropTypes.string,
     isTablet                : PropTypes.bool,
     reconnectingCall        : PropTypes.bool,
     muted                   : PropTypes.bool
 };
 
 export default VideoBox;