diff --git a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
index f1e01ebda8..101723a038 100644
--- a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
+++ b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/index.jsx
@@ -11,9 +11,10 @@ import React, { Component } from 'react';
 import PT from 'prop-types';
 // import moment from 'moment';
 import Tooltip from 'components/Tooltip';
-import './style.scss';
+import Avatar from 'components/Avatar';
+import styles from './style.scss';
+import config from 'utils/config';
 
-const MOCK_PHOTO = 'https://acrobatusers.com/assets/images/template/author_generic.jpg';
 /**
  * Renders the tooltip's content.
  * It includes: user profile picture, handle, his country and the TC registration
@@ -31,15 +32,15 @@ function Tip(props) {
     </span>
   )); */
   const { photoLink } = props.user;
-  const src = photoLink.startsWith('https') ? photoLink : `${props.MAIN_URL}/${photoLink}`;
+  const src = photoLink.startsWith('https') ? photoLink : `${config.URL.BASE}/${photoLink}`;
 
   return (
     <div styleName="user-avatar-tooltip">
-      <img
-        alt="User avatar"
-        styleName="avatar"
-        src={src}
-        onError={props.handleError}
+      <Avatar
+        theme={{
+          avatar: styles.avatar,
+        }}
+        url={src}
       />
       <div styleName="handle">{props.user.handle}</div>
       {/* Below block is commented out as it's not possible to get this information
@@ -58,8 +59,6 @@ function Tip(props) {
 }
 
 Tip.propTypes = {
-  handleError: PT.func.isRequired,
-  MAIN_URL: PT.string,
   user: PT.shape({
     country: PT.string,
     handle: PT.string,
@@ -69,10 +68,6 @@ Tip.propTypes = {
   }).isRequired,
 };
 
-Tip.defaultProps = {
-  MAIN_URL: process.env.MAIN_URL,
-};
-
 /**
  * Renders the tooltip.
  */
@@ -82,16 +77,10 @@ class UserAvatarTooltip extends Component {
     this.state = {
       user: props.user,
     };
-    this.handleError = this.handleError.bind(this);
-  }
-  handleError() {
-    const user = this.state.user;
-    user.photoLink = MOCK_PHOTO;
-    this.setState({ user });
   }
 
   render() {
-    const tip = <Tip user={this.state.user} handleError={this.handleError} />;
+    const tip = <Tip user={this.state.user} />;
     return (
       <Tooltip content={tip}>
         <div>{this.props.children}</div>
diff --git a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss
index e9c42f4926..5ce58791b2 100644
--- a/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss
+++ b/src/shared/components/challenge-listing/Tooltips/UserAvatarTooltip/style.scss
@@ -8,6 +8,9 @@ $avatar-radius-50: $corner-radius * 25;
 $avatar-radius-4: $corner-radius * 2;
 
 .user-avatar-tooltip {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   max-width: 640px;
   font-family: 'Roboto';
   overflow: auto;
@@ -43,13 +46,13 @@ $avatar-radius-4: $corner-radius * 2;
 
   .avatar {
     border-radius: $avatar-radius-50;
-    float: left;
-    margin-right: $avatar-space-15;
     width: $base-unit * 10;
     height: $base-unit * 10;
+    overflow: hidden;
   }
 
   .handle {
+    margin-left: $avatar-space-15;
     display: inline-block;
     font-weight: 500;
     font-size: 20px;