diff --git a/app/components/gh-member-avatar.js b/app/components/gh-member-avatar.js
index f8351eeec..e225a6ea9 100644
--- a/app/components/gh-member-avatar.js
+++ b/app/components/gh-member-avatar.js
@@ -14,7 +14,7 @@ const stringToHslColor = function (str, saturation, lightness) {
 
 export default Component.extend({
     tagName: '',
-
+    containerClass: '',
     member: null,
     initialsClass: computed('sizeClass', function () {
         return this.sizeClass || 'gh-member-list-avatar';
diff --git a/app/helpers/gravatar.js b/app/helpers/gravatar.js
new file mode 100644
index 000000000..0924f06c5
--- /dev/null
+++ b/app/helpers/gravatar.js
@@ -0,0 +1,20 @@
+import Helper from '@ember/component/helper';
+import md5 from 'blueimp-md5';
+import {isEmpty} from '@ember/utils';
+import {inject as service} from '@ember/service';
+
+export default Helper.extend({
+    config: service(),
+
+    compute([email], {size = 180, d = 'blank'}/*, hash*/) {
+        if (!this.get('config.useGravatar')) {
+            return;
+        }
+
+        if (!email || isEmpty(email)) {
+            return;
+        }
+
+        return `https://www.gravatar.com/avatar/${md5(email)}?s=${size}&d=${d}`;
+    }
+});
diff --git a/app/styles/layouts/members.css b/app/styles/layouts/members.css
index 60f49b761..ac3e8a7a7 100644
--- a/app/styles/layouts/members.css
+++ b/app/styles/layouts/members.css
@@ -1,10 +1,41 @@
 /* Global
 /* ----------------------------------------- */
+
+/* Members avatar
+/* ----------------------------------------- */
+.gh-member-gravatar {
+    position: relative;
+}
+
 .gh-member-avatar-label {
     display: block;
     color: #fff;
 }
 
+.gh-member-avatar-image {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: content-box;
+    background-position: center center;
+    background-size: cover;
+    border-radius: 100%;
+}
+
+.gh-member-initials {
+    border: none;
+    box-shadow: 0 0 0 1px var(--white);
+}
+
+.gh-member-detail-avatar .gh-member-initials {
+    box-shadow: 0 0 0 1px var(--main-bg-color);
+}
+
 /* Members list
 /* ----------------------------------------- */
 
diff --git a/app/templates/components/gh-member-avatar.hbs b/app/templates/components/gh-member-avatar.hbs
index 8db2094df..e6e14e2eb 100644
--- a/app/templates/components/gh-member-avatar.hbs
+++ b/app/templates/components/gh-member-avatar.hbs
@@ -1,3 +1,6 @@
-<div class="flex items-center justify-center br-100" style={{this.backgroundStyle}} ...attributes>
-    <span class="gh-member-avatar-label {{this.initialsClass}}">{{this.initials}}</span>
-</div>
\ No newline at end of file
+<figure class="gh-member-gravatar {{this.containerClass}}">
+    <div class="gh-member-initials flex items-center justify-center br-100 {{this.containerClass}}" style={{this.backgroundStyle}}>
+        <span class="gh-member-avatar-label {{this.initialsClass}}">{{this.initials}}</span>
+    </div>
+    <img class="gh-member-avatar-image" src={{gravatar this.member.email size=180}} />
+</figure>
\ No newline at end of file
diff --git a/app/templates/components/gh-members-list-item.hbs b/app/templates/components/gh-members-list-item.hbs
index 828d6d634..1eef3eee3 100644
--- a/app/templates/components/gh-members-list-item.hbs
+++ b/app/templates/components/gh-members-list-item.hbs
@@ -1,6 +1,6 @@
 <LinkTo @route="member" @model={{this.member}} title="Member details" class="gh-list-data gh-members-list-basic">
     <div class="flex items-center">
-        <GhMemberAvatar @member={{member}} class="w9 h9 mr3" />
+        <GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3" />
         <div>
             <h3 class="ma0 pa0 gh-members-list-name {{if (not member.name) "gh-members-name-noname"}}">{{this.displayName}}</h3>
             {{#if this.name}}
diff --git a/app/templates/member.hbs b/app/templates/member.hbs
index 8c6abbbfd..81cbb5da1 100644
--- a/app/templates/member.hbs
+++ b/app/templates/member.hbs
@@ -15,7 +15,7 @@
             </section>
         </GhCanvasHeader>
         <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
-            <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} class="w18 h18 mr4" />
+            <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} @containerClass="w18 h18 mr4 gh-member-detail-avatar" />
             <div>
                 <h3 class="f2 fw5 ma0 pa0">
                     {{or member.name member.email}}
diff --git a/app/templates/member/new.hbs b/app/templates/member/new.hbs
index 9b81ecc14..1134b3dda 100644
--- a/app/templates/member/new.hbs
+++ b/app/templates/member/new.hbs
@@ -11,7 +11,7 @@
         </GhCanvasHeader>
         <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
             {{#if (or member.name member.email)}}
-                <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} class="w18 h18 mr4" />
+                <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} @containerClass="w18 h18 mr4" />
             {{else}}
                 <div class="flex items-center justify-center br-100 w18 h18 mr4 gh-new-member-avatar">
                     <span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>