diff --git a/browser/components/loop/content/css/contacts.css b/browser/components/loop/content/css/contacts.css
index e8c9acce7210..9d1aaccb649f 100644
--- a/browser/components/loop/content/css/contacts.css
+++ b/browser/components/loop/content/css/contacts.css
@@ -360,26 +360,20 @@ html[dir="rtl"] .contact > .dropdown-menu {
 }
 
 .contacts-gravatar-promo {
-  position: relative;
-  border: 1px dashed #c1c1c1;
+  border: 1px solid #5cccee;
   border-radius: 2px;
-  background-color: #fbfbfb;
-  padding: 10px;
-  margin-top: 10px;
+  background-color: #fff;
+  font-size: 1.2rem;
+  margin: 1.5rem;
+  padding: 1.5rem 1rem;
+  position: relative;
 }
 
 .contacts-gravatar-promo > p {
-  margin-top: 2px;
-  margin-bottom: 8px;
-  margin-right: 4px;
+  margin-top: 0;
   word-wrap: break-word;
 }
 
-html[dir="rtl"] .contacts-gravatar-promo > p {
-  margin-right: 0;
-  margin-left: 4px;
-}
-
 .contacts-gravatar-promo > p > a {
   color: #0295df;
   text-decoration: none;
@@ -400,6 +394,44 @@ html[dir="rtl"] .contacts-gravatar-promo > .button-close {
   left: 8px;
 }
 
+.contacts-gravatar-avatars {
+  height: 50px;
+  margin: 1.5rem auto;
+  text-align: center;
+  width: 200px;
+}
+
+.contacts-gravatar-avatars img {
+  margin: 0 1.5rem;
+  vertical-align: middle;
+  width: 50px;
+}
+
+/* Adjust the Firefox avatar because it has pointy ears. */
+.contacts-gravatar-avatars img:last-child {
+  transform: scale(1.08) translateY(-2px);
+}
+
+.contacts-gravatar-arrow {
+  border-color: #9b9b9b;
+  border-style: solid solid none none;
+  border-width: 2px;
+  display: inline-block;
+  height: 1.5rem;
+  -moz-margin-start: -.75rem;
+  transform: rotateZ(45deg);
+  vertical-align: middle;
+  width: 1.5rem;
+}
+
+html[dir="rtl"] .contacts-gravatar-arrow {
+  transform: rotateZ(225deg);
+}
+
+.contacts-gravatar-buttons {
+  padding: 0 .5rem;
+}
+
 .contact-controls {
   padding: 0 16px;
 }
diff --git a/browser/components/loop/content/css/panel.css b/browser/components/loop/content/css/panel.css
index 83af3f584c4d..311881b920bb 100644
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -265,6 +265,12 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   font-weight: lighter;
 }
 
+/* Don't show the empty contacts image if we're showing gravatar promo. */
+.contacts-gravatar-promo ~ .contact-list-empty {
+  background-image: none;
+  padding-top: 3%;
+}
+
 .contact-list-empty {
   padding-top: 27%;
 }
diff --git a/browser/components/loop/content/js/contacts.js b/browser/components/loop/content/js/contacts.js
index 6859cf88bdf3..f4bbe72d7da9 100644
--- a/browser/components/loop/content/js/contacts.js
+++ b/browser/components/loop/content/js/contacts.js
@@ -134,11 +134,17 @@ loop.contacts = (function(_, mozL10n) {
                   onClick: this.handleCloseButtonClick}), 
           React.createElement("p", {dangerouslySetInnerHTML: {__html: message}, 
              onClick: this.handleLinkClick}), 
-          React.createElement(ButtonGroup, null, 
-            React.createElement(Button, {caption: mozL10n.get("gravatars_promo_button_nothanks"), 
+          React.createElement("div", {className: "contacts-gravatar-avatars"}, 
+            React.createElement("img", {src: "loop/shared/img/avatars.svg#orange-avatar"}), 
+            React.createElement("span", {className: "contacts-gravatar-arrow"}), 
+            React.createElement("img", {src: "loop/shared/img/firefox-avatar.svg"})
+          ), 
+          React.createElement(ButtonGroup, {additionalClass: "contacts-gravatar-buttons"}, 
+            React.createElement(Button, {additionalClass: "secondary", 
+                    caption: mozL10n.get("gravatars_promo_button_nothanks2"), 
                     onClick: this.handleCloseButtonClick}), 
-            React.createElement(Button, {additionalClass: "button-accept", 
-                    caption: mozL10n.get("gravatars_promo_button_use"), 
+            React.createElement(Button, {additionalClass: "secondary", 
+                    caption: mozL10n.get("gravatars_promo_button_use2"), 
                     onClick: this.handleUseButtonClick})
           )
         )
@@ -666,10 +672,10 @@ loop.contacts = (function(_, mozL10n) {
         return (
           React.createElement("div", {className: "contact-list-empty"}, 
             React.createElement("p", {className: "panel-text-large"}, 
-              mozL10n.get("no_contacts_message_heading")
+              mozL10n.get("no_contacts_message_heading2")
             ), 
             React.createElement("p", {className: "panel-text-medium"}, 
-              mozL10n.get("no_contacts_import_or_add")
+              mozL10n.get("no_contacts_import_or_add2")
             )
           )
         );
@@ -714,7 +720,7 @@ loop.contacts = (function(_, mozL10n) {
               busy: this.state.importBusy})})
           ), 
           React.createElement(Button, {additionalClass: "primary", 
-            caption: mozL10n.get("new_contact_button"), 
+            caption: mozL10n.get("new_contact_button2"), 
             onClick: this.handleAddContactButtonClick})
         )
       );
@@ -726,9 +732,7 @@ loop.contacts = (function(_, mozL10n) {
       }
 
       return (
-        React.createElement("div", {className: "content-area"}, 
-          React.createElement(GravatarPromo, {handleUse: this.handleUseGravatar})
-        )
+        React.createElement(GravatarPromo, {handleUse: this.handleUseGravatar})
       );
     },
 
diff --git a/browser/components/loop/content/js/contacts.jsx b/browser/components/loop/content/js/contacts.jsx
index 3b258f70e381..ed94abe5cba1 100644
--- a/browser/components/loop/content/js/contacts.jsx
+++ b/browser/components/loop/content/js/contacts.jsx
@@ -134,11 +134,17 @@ loop.contacts = (function(_, mozL10n) {
                   onClick={this.handleCloseButtonClick} />
           <p dangerouslySetInnerHTML={{__html: message}}
              onClick={this.handleLinkClick}></p>
-          <ButtonGroup>
-            <Button caption={mozL10n.get("gravatars_promo_button_nothanks")}
+          <div className="contacts-gravatar-avatars">
+            <img src="loop/shared/img/avatars.svg#orange-avatar" />
+            <span className="contacts-gravatar-arrow" />
+            <img src="loop/shared/img/firefox-avatar.svg" />
+          </div>
+          <ButtonGroup additionalClass="contacts-gravatar-buttons">
+            <Button additionalClass="secondary"
+                    caption={mozL10n.get("gravatars_promo_button_nothanks2")}
                     onClick={this.handleCloseButtonClick}/>
-            <Button additionalClass="button-accept"
-                    caption={mozL10n.get("gravatars_promo_button_use")}
+            <Button additionalClass="secondary"
+                    caption={mozL10n.get("gravatars_promo_button_use2")}
                     onClick={this.handleUseButtonClick}/>
           </ButtonGroup>
         </div>
@@ -666,10 +672,10 @@ loop.contacts = (function(_, mozL10n) {
         return (
           <div className="contact-list-empty">
             <p className="panel-text-large">
-              {mozL10n.get("no_contacts_message_heading")}
+              {mozL10n.get("no_contacts_message_heading2")}
             </p>
             <p className="panel-text-medium">
-              {mozL10n.get("no_contacts_import_or_add")}
+              {mozL10n.get("no_contacts_import_or_add2")}
             </p>
           </div>
         );
@@ -714,7 +720,7 @@ loop.contacts = (function(_, mozL10n) {
               busy: this.state.importBusy})} />
           </Button>
           <Button additionalClass="primary"
-            caption={mozL10n.get("new_contact_button")}
+            caption={mozL10n.get("new_contact_button2")}
             onClick={this.handleAddContactButtonClick} />
         </ButtonGroup>
       );
@@ -726,9 +732,7 @@ loop.contacts = (function(_, mozL10n) {
       }
 
       return (
-        <div className="content-area">
-          <GravatarPromo handleUse={this.handleUseGravatar}/>
-        </div>
+        <GravatarPromo handleUse={this.handleUseGravatar} />
       );
     },
 
diff --git a/browser/components/loop/content/shared/img/firefox-avatar.svg b/browser/components/loop/content/shared/img/firefox-avatar.svg
new file mode 100644
index 000000000000..d58278708fcf
--- /dev/null
+++ b/browser/components/loop/content/shared/img/firefox-avatar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 252 252"><defs><path id="a" d="M243.5 134.6c0 63.8-51.7 115.5-115.5 115.5S12.5 198.4 12.5 134.6 64.3 19.1 128 19.1c66.5 0 115.5 51.7 115.5 115.5z"/></defs><radialGradient id="b" cx="127.044" cy="77.862" r="193.396" gradientUnits="userSpaceOnUse"><stop offset=".329" stop-color="#00A0DB"/><stop offset=".419" stop-color="#009AD6"/><stop offset=".573" stop-color="#008AC8"/><stop offset=".773" stop-color="#0072B5"/><stop offset="1" stop-color="#00549F"/></radialGradient><use xlink:href="#a" overflow="visible" fill="url(#b)"/><clipPath id="c"><use xlink:href="#a" overflow="visible"/></clipPath><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="31.093" y1="233.596" x2="187.469" y2="233.596"><stop offset=".298" stop-color="#E36024"/><stop offset=".911" stop-color="#F7941E"/></linearGradient><path clip-path="url(#c)" fill="url(#d)" d="M183.4 286.5c-13.8 14.8-26.4 8.1-66.2 5.3-39.8-2.8-86-38.3-86-38.3s-2.5-19.3 12.6-29.2c11.4-7.5 29.1-15.3 27.5-20-4-11.5-10.2-32.8-10.2-32.8l87.3 4.4c-18-2.1-10 36.7-3.3 40.2 11.5 6.1 25.9 8.5 29.7 17.2 3.8 8.7 11.9 28.7 12.5 33.5.7 4.8-2.1 17.8-3.9 19.7z"/><path clip-path="url(#c)" fill="#FFF" d="M142.1 213.7s3.3 12.1-13.4 12.7c-15.2.6-21-2.3-21-2.3l7.3 27.3 54.7-.7S169 238 163 230s-16.7-14.7-16.7-14.7"/><path clip-path="url(#c)" fill="#4E4F53" d="M140 206.4s17.3 14.1 29 17.1c9 2.3 14 22 14.7 26.7.7 4.7-8.2 10.8-8.2 10.8s-5 4-23-27c-2.4-4.2-10.4-20.1-10.4-20.1s0-.2-2.1-7.5z"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="66.878" y1="195.286" x2="137.047" y2="195.286"><stop offset="0" stop-color="#C13831"/><stop offset="1" stop-color="#E36024"/></linearGradient><path clip-path="url(#c)" fill="url(#e)" d="M79.5 219.9s10.8-14.8 27.5-20.5c13.1-4.4 30-3.9 30-3.9s-61.2-39.8-69.5-18.6c-3.5 9 7.7 45 12 43z"/><path clip-path="url(#c)" fill="#47484C" d="M43.4 214.4l27.2-12.1s6.4 8.1 21.5 13.5c30.7 10.9 28.5-3 33.5 16 2.5 9.4 12 30.5 12 30.5s-85.6 2.1-94.2-47.9z"/><g opacity=".4" clip-path="url(#c)"><path fill="#4E4F53" d="M128.5 263.1c-72.1 0-130.8-58.7-130.8-130.8 0-72 58.7-130.7 130.8-130.7 72.1 0 130.8 58.7 130.8 130.8-.1 72.1-58.7 130.7-130.8 130.7zm0-246.3c-63.7 0-115.6 51.8-115.6 115.6 0 63.7 51.8 115.6 115.6 115.6S244 196.1 244 132.4c0-63.8-51.8-115.6-115.5-115.6z"/></g><radialGradient id="f" cx="113.661" cy="247.717" r=".008" gradientTransform="rotate(175.555 104.257 -10.732)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-opacity="0"/><stop offset="1"/></radialGradient><path opacity=".7" fill="url(#f)" d="M113.2 226.3h.1"/><radialGradient id="g" cx="75.917" cy="233.589" r=".221" gradientTransform="rotate(175.555 104.257 -10.732)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-opacity="0"/><stop offset="1"/></radialGradient><path opacity=".7" fill="url(#g)" d="M149.9 209c-.1.4-.1.6-.1.6s0-.2.1-.6z"/><radialGradient id="h" cx="124.057" cy="234.417" r="1.632" gradientTransform="rotate(175.555 104.257 -10.732)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-opacity="0"/><stop offset="1"/></radialGradient><path opacity=".7" fill="url(#h)" d="M99.6 213.4c1.4.2 2.9.5 4.5.9-1.6-.4-3.1-.7-4.5-.9z"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="134.177" y1="179.697" x2="134.177" y2="22.849" gradientTransform="rotate(-3.738 -189.536 488.95)"><stop offset=".298" stop-color="#E36024"/><stop offset=".911" stop-color="#F7941E"/></linearGradient><path fill="url(#i)" d="M176 91.7s6.8-14.3 13.2-27.9c14.4-30.7 7.9-36.9 7.9-36.9s-19.1 2.9-51.2 14.7c-17.6 6.5-24.4 9.1-26.8 9.1-18-.2-20.5 0-20.5 0s-1.9-8.4-7.2-26.1c-6-20-15.3-20-15.3-20s-36.6 25.5-58.4 68c-10.7 20.9 15.8 81 15.8 81s28 7.4 32.7 6c0 0 6.7 1.9 14.1 1.7 7.5-.1 26.2-6.5 30.2-8.7 4-2.1 21.1-4.2 27.9-3.2 6.8 1.1 40-19.3 44.4-20.7 4.4-1.4 12.2-4 11.7-6.2s-20.3-2.2-22.4-7.8c-2.6-6.4 3.9-23 3.9-23z"/><linearGradient id="j" gradientUnits="userSpaceOnUse" x1="141.561" y1="143.094" x2="205.1" y2="143.094" gradientTransform="rotate(-3.738 -189.536 488.95)"><stop offset="0" stop-color="#E36024"/><stop offset=".911" stop-color="#F7941E"/></linearGradient><path fill="url(#j)" d="M148.3 104.5s-4.4 14.6 9.6 15.9c17.1 1.7 37.1 1.8 37.1 1.8l-32.1 13-23.7-3 7.9-2.5s-11.2-2.3-8.6-8.5c3.2-8 9.8-16.7 9.8-16.7z"/><linearGradient id="k" gradientUnits="userSpaceOnUse" x1="53.506" y1="132.916" x2="53.506" y2="132.75" gradientTransform="rotate(-3.738 -189.536 488.95)"><stop offset=".084" stop-color="#E36024"/><stop offset=".895" stop-color="#F7941E"/></linearGradient><path fill="url(#k)" d="M29.7 117.7l.1.1"/><path fill="#F7941E" d="M66.5 72.3s12.1-5.9 23.6-7.1c11.4-1.2 16.5-1.1 16.5-1.1l-12.3 3.3s32.6-.8 46.1 7.5c12.5 7.7 18.2 17.4 18.2 17.4l13-7.4s-23.4-20.5-45.7-32.6c-9.2-5-27.2-1.7-27.2-1.7S97 39.2 95.5 39.3c-1.6.1-33.7 21.3-37.5 25.5-3.7 4.3 8.5 7.5 8.5 7.5z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M211.4 121.4s2.3 1.6.5 7.3c-1.9 5.7-2.4 14.9-2.4 14.9l9.8-2.6 1.1 7.3s-2.4 1.5-4.1 2.1c-1.6.7 3.8 6.5 3.8 6.5s-2.1 9.3-6.4 11.9c-4.3 2.5-8.8 2.3-13.7 4.9-4.9 2.6-8.8 6.8-14.8 8.3-6.1 1.5-6.6 1.8-6.6 1.8s-3.7 1.1-6.9 4.5c-12.6 13.5-18.5 11.6-37.2 8.8-47.8-7.3-54.2-3.5-73.3 1.1-6.7 1.6-4.5-7.1-19.8-6.7-37.5.6-28.4-39.1-28.4-39.1l16.2 2.3 2-20.8s6.2 7.4 13.4 11.1c10.4 5.3 22.7 16 30.4 14.7 35-5.6 48.5-10.6 54.7-10.9 8-.4 25.8-3.2 25.8-3.2s-13.3-12.6 3.9-17.3c36.7-9.9 36.8-3.9 36.8-3.9l-2 10.8 3.1-3.5s3.1.5 5.4.3c2.2-.1 8.7-10.6 8.7-10.6z"/><path fill="#4E4F53" d="M130 63.8l-.4 16.4-6.1 1.1s-.4 5.2-18.5 7.7-20.6 5.3-20.6 5.3l4.9-16.9s7-3.2 16.1-5.6c9.1-2.3 16.7-4.1 16.7-4.1l1.2-5.9 6.7 2z"/><radialGradient id="l" cx="85.854" cy="159.606" r=".429" gradientTransform="rotate(176.262 105.6 -10.294)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-opacity="0"/><stop offset="1"/></radialGradient><path opacity=".7" fill="url(#l)" d="M134.5 137.1c.5.1.9.3 1.1.5 0 .1-.4-.1-1.1-.5z"/><radialGradient id="m" cx="120.16" cy="158.924" r="1.638" gradientTransform="rotate(176.262 105.6 -10.294)" gradientUnits="userSpaceOnUse"><stop offset=".17" stop-opacity="0"/><stop offset="1"/></radialGradient><path opacity=".7" fill="url(#m)" d="M102.5 138.3c-1.3.5-2.7.9-4 1.4 1.5-.5 2.9-.9 4.4-1.4h-.4z"/><linearGradient id="n" gradientUnits="userSpaceOnUse" x1="-42.225" y1="152.926" x2="31.852" y2="125.401" gradientTransform="matrix(.6616 .0612 -.0833 .9002 216.714 24.8)"><stop offset="0" stop-color="#FFF"/><stop offset="1" stop-color="#FFE5C2"/></linearGradient><path fill="url(#n)" d="M223.5 129c-1 3.7-6.2 10.3-11 9.9 1.4-2.7 5.1-19.1-1.5-25.5-.3 3.1-3.9 12.6-8.8 16.6.8-2 1.2-4.4 1.4-6.3-5 9.2-22 16-9.6 13.4 12.4-2.6 14.2-4.4 14.2-4.4s-2.6 11-5.7 15.3c6.3 4.1 14.4-3 14.4-3s-3 16.4-11.2 21.3c3 1.1 4.2.5 5.1.4-.8 2.3-9.8 7.5-29.4-.7.7 2.4 3.3 5.7 6.3 8.1-7.8 1.4-24.2.6-12.9 6.3 17.1 8.5 26.3 2.1 26.3 2.1s-4.9-1.8-7.1-7.2c33.4 12.2 33.6-41.3 29.5-46.3z"/><path fill="#4E4F53" d="M192.7 121.7c3.7-.2 7.9 3.6 5.1 10.5-2.8 6.9-7.1 15.6-18.1 15.8-18.2.4-29.5-15.3-26.6-17.9 3-2.4 10-6.6 39.6-8.4z"/><path opacity=".3" fill="#D7D3C8" d="M159 128.9c-2.3 1.2-2 2.2.3 3 4.8 1.7 4.9.5 8.8-.5 3.9-1 20.2-4 23.3-4.9 4.7-1.3 4.8-3.8 3.2-3.8-3.2.1-26.1 1.5-35.6 6.2z"/><path fill="#4E4F53" d="M167.4 60.1s-3.2-1-7.4-7.1c-1.7-2.4-3.6-8.6-3.6-11.5.7 1.1 1.5 2.4 2.3 3.2-1.7-3.5-1.4-6-1.4-7.2 5-1.7 12.6-5.5 15.6-6.7 19.5-8 27.9-16.2 28.8-3 .4 6-5.2 19.7-11.3 32.8-7.5.7-23-.5-23-.5zM96.8 42.2c-1.6 2.8-4.5 7.3-7.6 8.6-4.7 1.9-27.9 18.7-31.7 18.9-2.1.1-7.2-2.6-10.1-20.3-.5 3.1-.6 6.8-.5 8.5-3.6-7.6-3.7-18.2-2.6-25.2 16.8-19.5 30.9-31 36.5-31.3 5.6-.2 12.2 24.2 16 40.8zm27 64.1s-2.4 3.6-8.4 5.5c-6.1 2-2.4 0-2.4 0s-1.7-2.6-2.7-6.4c-1-3.8-1.8-9.6-1.8-9.6s2.5 10.2 6.6 12.4c2.2 1.1 8.7-1.9 8.7-1.9z"/><path fill="#4E4F53" d="M84.8 117.3s8.9-6.5 15.8-8.6c8.6-2.7 11.9-.4 11.9-.4l2.8 3.5c.1 0-20 5.4-30.5 5.5z"/><path fill="#4E4F53" d="M91.3 115.8s-.8 5.9 3.1 11.1c1.4 1.8 2.9 1.6 4.8 2.1 10.1 2.8 14.7-3.5 15.5-4.9 3.9-6.4 1-13.2 1-13.2l-24.4 4.9z"/><path fill="#FFF" d="M174.5 88.1s-5-4.6-9-8.1c-4-3.4-9.4-7.2-9.4-7.2s4.4-4.5 11.8-8.5c-3.1.2-5.5.9-7.4 1.6 9.4-13.2 28.4-38.1 34.2-35.9 8.1 3.2-20.2 58.1-20.2 58.1z"/><linearGradient id="o" gradientUnits="userSpaceOnUse" x1="-122.4" y1="85.738" x2="-84.513" y2="85.738" gradientTransform="rotate(175.613 34.788 -7.833)"><stop offset="0" stop-color="#FFF" stop-opacity="0"/><stop offset="1" stop-color="#FFE5C2"/></linearGradient><path fill="url(#o)" d="M194.2 31.4c-6.5-1.6-30.5 32.3-30.5 32.3s6.7-.6 8.5-.2c-7.4 4.4-11.3 7.3-11.2 7.9 0 .6 6.6.2 6.6.2s-4.8 1.9-4.8 2.3c0 .4 2.8.4 2.8.4s-5.1 2.1-4.8 2.1c.3 0 11.8 10.2 11.8 10.2s29.8-53.2 21.6-55.2z"/><g fill="#4E4F53"><path d="M168 95.1s0 4.7.4 7.8c.4 3.1 1.5 5.4 1.5 5.4s-3.2 1.2 1.9.3c5-.9 5.4-3.7 5.4-3.7s-4.1 1.9-5.2.8c-2.7-2.8-4-10.6-4-10.6z"/><path d="M149.8 110.3s3.5-3.8 9.2-5.9c6.6-2.4 10-.9 10-.9l2.7 5.1s-9.6 1.6-21.9 1.7z"/><path d="M170.3 107.4s-.1 3.6-2.1 7.4c-.6 1.2-1.1 3.9-10.5 2.3-2.8-.5-3.4 0-4.2-1.6-.8-1.6-.9-6-.9-6s5.2-5.5 17.7-2.1z"/></g><path fill="#4E4F53" d="M181.9 85.5s-1.3 12.7-5.7 11.7-7.3-1.6-13.3-2.2c-6-.6-5.8-8.2-5.6-12.7s2.5-7.8 2.5-7.8l2.3 3.6c0-.1 10.9-.7 19.8 7.4z"/><linearGradient id="p" gradientUnits="userSpaceOnUse" x1="162.558" y1="194.954" x2="279.188" y2="151.618" gradientTransform="rotate(179.64 143.258 -6.38)"><stop offset="0" stop-color="#FFF"/><stop offset="1" stop-color="#FFE5C2"/></linearGradient><path fill="url(#p)" d="M12.7 139.1c1 4.2 7.9 12 15.3 11.9-1.8-3.1-5.1-21.5 5.5-28 .1 3.4 4.2 14.2 11.1 19.1-.9-2.3-1.3-4.9-1.3-7.1 6.4 10.6 19.8 22.8 33.8 22.7 13.6-.1 21-8.8 22.9-9.7 1.9-.9 25 0 30.3-.8-1.6-.8-3.1-1.1-5.6-2.1 16-4.6 27.5-3.9 30.1-1.4l3.2 2.1c-.1 0-19.7 6.4-36.5 7.7-16.8 1.3-22.1 1.5-22.1 1.5s-16.7 12-35 7.9c-18.3-4-29.2-18.6-29.2-18.6s2.4 12.4 6.5 17.3c-10 3.9-21.2-4.6-21.2-4.6s2.4 18.4 14 24.5c-4.7.9-6.3.1-7.7 0 .9 2.6 13.7 9.2 44.1 2-1.4 2.5-5.7 6-10.5 8.3 7.5 1.4 24.1-6.3 47.7-.7 17.5 4.2-1.9-1.5-29.2 8.8-26 9.8-39.7-.2-39.7-.2s7.7-1.5 11.6-7.2c-51.7 10.6-44.9-48.2-38.1-53.4z"/><path fill="#FFF" d="M94.5 55.7S86 8.2 78.9 8.4c-3.8.1-12.7 15.7-19.6 31.9 1.4-.8 2.8-2.4 4.3-3.8-10.9 23.2-22.3 56-20 57.1 10.5-19.1 24.9-19.9 26.6-20.3 0-1.4-2.8-3.3-6.5-4.7 1.5-2.5 25.7-9.5 25.7-9.5l-5-.4c-.1 0 9.6-3 10.1-3z"/><linearGradient id="q" gradientUnits="userSpaceOnUse" x1="-9.023" y1="31.718" x2="35.95" y2="31.718" gradientTransform="matrix(-.9995 .0324 .0286 .883 81.18 18.737)"><stop offset="0" stop-color="#FFF" stop-opacity="0"/><stop offset="1" stop-color="#FFE5C2"/></linearGradient><path fill="url(#q)" d="M78.8 10.8c-4.3.2-15.6 24-15.6 24s1.8-1.4 4-2.2c-2 3.2-11.7 25.8-19.9 51.3 2.8-2.3 8.2-9.5 19.2-11.6-1.5-1.2-3.8-2.5-7.1-2.6 3.3-5.5 18.6-8.3 23.6-9.6-3.1-.7-6.6-.5-10.5-.3.6-1.1 18.5-5.1 18.9-5.5.4-.4-6.6-43.7-12.6-43.5z"/><path fill="#FFF" d="M101.9 113s-5.7.3-7.1 3.6c-1.4 3.3 1.3 5.8 1.3 5.8s2.6.3 3.7-2.4c1.8-4.1-1.9-5 2.1-7zm58.9-5.8s-4.2.2-5.3 2.7c-1 2.4 1 4.3 1 4.3s1.9.2 2.7-1.8c1.4-3.1-1.4-3.8 1.6-5.2z"/><path fill="#4E4F53" d="M176.9 163.1s-7.4 1.9-15.3 3.8c-7.9 2-17.3-1.3-17.3-1.3s11.7 7.4 17.5 6.3c5.7-1.1 15.1-8.8 15.1-8.8z"/></svg>
\ No newline at end of file
diff --git a/browser/components/loop/jar.mn b/browser/components/loop/jar.mn
index 051f14aecc95..087479eeaefe 100644
--- a/browser/components/loop/jar.mn
+++ b/browser/components/loop/jar.mn
@@ -95,6 +95,7 @@ browser.jar:
   content/browser/loop/shared/img/empty_conversations.svg       (content/shared/img/empty_conversations.svg)
   content/browser/loop/shared/img/empty_search.svg              (content/shared/img/empty_search.svg)
   content/browser/loop/shared/img/avatars.svg                   (content/shared/img/avatars.svg)
+  content/browser/loop/shared/img/firefox-avatar.svg            (content/shared/img/firefox-avatar.svg)
 
   # Shared scripts
   content/browser/loop/shared/js/actions.js             (content/shared/js/actions.js)
diff --git a/browser/components/loop/test/desktop-local/contacts_test.js b/browser/components/loop/test/desktop-local/contacts_test.js
index 036149865b0c..c25889a2d11f 100644
--- a/browser/components/loop/test/desktop-local/contacts_test.js
+++ b/browser/components/loop/test/desktop-local/contacts_test.js
@@ -203,6 +203,9 @@ describe("loop.contacts", function() {
       var promo = listView.getDOMNode().querySelector(".contacts-gravatar-promo");
       expect(promo).to.not.equal(null);
 
+      var avatars = listView.getDOMNode().querySelectorAll(".contacts-gravatar-avatars img");
+      expect(avatars).to.have.length(2, "two example avatars are shown");
+
       checkGravatarContacts(false);
     });
 
@@ -238,7 +241,7 @@ describe("loop.contacts", function() {
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
-        ".contacts-gravatar-promo .button-accept"));
+        ".contacts-gravatar-promo .secondary:last-child"));
 
       sinon.assert.calledTwice(navigator.mozLoop.setLoopPref);
 
@@ -255,7 +258,7 @@ describe("loop.contacts", function() {
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
-        ".contacts-gravatar-promo .button-accept"));
+        ".contacts-gravatar-promo .secondary:last-child"));
 
       sinon.assert.calledTwice(navigator.mozLoop.setLoopPref);
       sinon.assert.calledWithExactly(navigator.mozLoop.setLoopPref, "contacts.gravatars.promo", false);
@@ -271,7 +274,7 @@ describe("loop.contacts", function() {
         }));
 
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
-        ".contacts-gravatar-promo .button-close"));
+        ".contacts-gravatar-promo .secondary:first-child"));
 
       var promo = listView.getDOMNode().querySelector(".contacts-gravatar-promo");
       expect(promo).to.equal(null);
@@ -285,6 +288,37 @@ describe("loop.contacts", function() {
           startForm: function() {}
         }));
 
+      React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
+        ".contacts-gravatar-promo .secondary:first-child"));
+
+      sinon.assert.calledOnce(navigator.mozLoop.setLoopPref);
+      sinon.assert.calledWithExactly(navigator.mozLoop.setLoopPref,
+        "contacts.gravatars.promo", false);
+    });
+
+    it("should hide the gravatars promo box when the 'close' X button is clicked", function() {
+      listView = TestUtils.renderIntoDocument(
+        React.createElement(loop.contacts.ContactsList, {
+          mozLoop: navigator.mozLoop,
+          notifications: notifications,
+          startForm: function() {}
+        }));
+
+      React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
+        ".contacts-gravatar-promo .button-close"));
+
+      var promo = listView.getDOMNode().querySelector(".contacts-gravatar-promo");
+      expect(promo).to.equal(null);
+    });
+
+    it("should set prefs correctly when the 'close' X button is clicked", function() {
+      listView = TestUtils.renderIntoDocument(
+        React.createElement(loop.contacts.ContactsList, {
+          mozLoop: navigator.mozLoop,
+          notifications: notifications,
+          startForm: function() {}
+        }));
+
       React.addons.TestUtils.Simulate.click(listView.getDOMNode().querySelector(
         ".contacts-gravatar-promo .button-close"));
 
@@ -326,9 +360,9 @@ describe("loop.contacts", function() {
 
       it("should display the no contacts strings", function() {
         sinon.assert.calledWithExactly(mozL10nGetSpy,
-                                       "no_contacts_message_heading");
+                                       "no_contacts_message_heading2");
         sinon.assert.calledWithExactly(mozL10nGetSpy,
-                                       "no_contacts_import_or_add");
+                                       "no_contacts_import_or_add2");
       });
     });
 
diff --git a/browser/locales/en-US/chrome/browser/loop/loop.properties b/browser/locales/en-US/chrome/browser/loop/loop.properties
index ec09b3b16ed6..2c42e54bc34e 100644
--- a/browser/locales/en-US/chrome/browser/loop/loop.properties
+++ b/browser/locales/en-US/chrome/browser/loop/loop.properties
@@ -88,9 +88,9 @@ settings_menu_button_tooltip=Settings
 ## the search field.
 contacts_search_placesholder2=Search…
 
-## LOCALIZATION NOTE (new_contact_button): This is the button to open the
+## LOCALIZATION NOTE (new_contact_button2): This is the button to open the
 ## new contact sub-panel.
-new_contact_button=New Contact
+new_contact_button2=Add new contact
 ## LOCALIZATION NOTE (contact_form_*_placeholder):
 ## These are the placeholders for the inputs for entering or editing a contact
 ## Click the 'New Contact' button to see the fields.
@@ -131,12 +131,12 @@ import_contacts_success_message={{total}} contact was successfully imported.;{{t
 ## LOCALIZATION NOTE(sync_contacts_button): This button is displayed in place of
 ## importing_contacts_button once contacts have been imported once.
 sync_contacts_button=Sync Contacts
-## LOCALIZATION NOTE(no_contacts_message_heading): Title shown when user has no
+## LOCALIZATION NOTE(no_contacts_message_heading2): Title shown when user has no
 ## contacts in his address book
-no_contacts_message_heading=No contacts yet
-## LOCALIZATION NOTE(no_contacts_import_or_add): Subheading inviting the user
+no_contacts_message_heading2=No contacts yet.
+## LOCALIZATION NOTE(no_contacts_import_or_add2): Subheading inviting the user
 ## to add people to his contact list
-no_contacts_import_or_add=Import or add someone
+no_contacts_import_or_add2=Add someone!
 ## LOCALIZATION NOTE(no_conversations_message_heading): Title shown when user
 ## has no conversations available.
 no_conversations_message_heading=There are no conversations yet
@@ -208,8 +208,8 @@ video_call_menu_button=Video Conversation
 gravatars_promo_message=You can automatically add profile icons to your contacts \
   by sharing their email addresses with Gravatar. {{learn_more}}.
 gravatars_promo_message_learnmore=Learn more
-gravatars_promo_button_nothanks=No Thanks
-gravatars_promo_button_use=Use Profile Icons
+gravatars_promo_button_nothanks2=No, thanks
+gravatars_promo_button_use2=Use profile icons
 
 # Conversation Window Strings