--- a/browser/components/preferences/in-content-new/sync.js
+++ b/browser/components/preferences/in-content-new/sync.js
@@ -297,17 +297,17 @@ var gSyncPane = {
       this._populateComputerName(Weave.Service.clientsEngine.localName);
       let engines = document.getElementById("fxaSyncEngines")
       for (let checkbox of engines.querySelectorAll("checkbox")) {
         checkbox.disabled = !syncReady;
       }
       document.getElementById("fxaChangeDeviceName").disabled = !syncReady;
 
       // Clear the profile image (if any) of the previously logged in account.
-      document.getElementById("fxaProfileImage").style.removeProperty("list-style-image");
+      document.querySelector("#fxaLoginVerified > .fxaProfileImage").style.removeProperty("list-style-image");
 
       // If the account is verified the next promise in the chain will
       // fetch profile data.
       return data.verified;
     }).then(isVerified => {
       if (isVerified) {
         return fxAccounts.getSignedInUserProfile();
       }
@@ -326,17 +326,17 @@ var gSyncPane = {
           fxaLoginStatus.setAttribute("hasName", true);
           displayNameLabel.hidden = false;
           displayNameLabel.textContent = data.displayName;
         } else {
           fxaLoginStatus.removeAttribute("hasName");
         }
         if (data.avatar) {
           let bgImage = "url(\"" + data.avatar + "\")";
-          let profileImageElement = document.getElementById("fxaProfileImage");
+          let profileImageElement = document.querySelector("#fxaLoginVerified > .fxaProfileImage");
           profileImageElement.style.listStyleImage = bgImage;
 
           let img = new Image();
           img.onerror = () => {
             // Clear the image if it has trouble loading. Since this callback is asynchronous
             // we check to make sure the image is still the same before we clear it.
             if (profileImageElement.style.listStyleImage === bgImage) {
               profileImageElement.style.removeProperty("list-style-image");

--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -49,17 +49,17 @@
         <description id="noFxaDescription" flex="1">&signedOut.description;</description>
       </vbox>
       <vbox>
         <image class="fxaSyncIllustration"/>
       </vbox>
     </hbox>
     <hbox id="fxaNoLoginStatus" align="center" flex="1">
       <vbox>
-        <image id="fxaProfileImage"/>
+        <image class="fxaProfileImage"/>
       </vbox>
       <vbox flex="1">
         <hbox align="center" flex="1">
           <hbox align="center" flex="1">
             <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
           </hbox>
           <button id="noFxaSignIn"
                   class="accessory-button"
@@ -91,17 +91,17 @@
   <vbox id="hasFxaAccount">
     <hbox>
       <vbox id="fxaContentWrapper" flex="1">
         <groupbox id="fxaGroup">
           <deck id="fxaLoginStatus" flex="1">
 
             <!-- logged in and verified and all is good -->
             <hbox id="fxaLoginVerified" align="center" flex="1">
-              <image id="fxaProfileImage" class="actionable"
+              <image class="fxaProfileImage actionable"
                      role="button"
                      onclick="gSyncPane.openChangeProfileImage(event);"
                      onkeypress="gSyncPane.openChangeProfileImage(event);"
                      tooltiptext="&profilePicture.tooltip;"/>
               <vbox flex="1" pack="center">
                 <hbox flex="1">
                   <hbox flex="1" align="center">
                     <label id="fxaDisplayName" hidden="true"/>
@@ -118,42 +118,42 @@
                           onkeypress="gSyncPane.openManageFirefoxAccount(event);">&verifiedManage.label;</html:a>
                 </hbox>
               </vbox>
             </hbox>
 
             <!-- logged in to an unverified account -->
             <hbox id="fxaLoginUnverified">
               <vbox>
-                <image id="fxaProfileImage"/>
+                <image class="fxaProfileImage"/>
               </vbox>
               <vbox flex="1">
                 <hbox>
-                  <vbox><image id="fxaLoginRejectedWarning"/></vbox>
+                  <vbox><image class="fxaLoginRejectedWarning"/></vbox>
                   <description flex="1">
                     &signedInUnverified.beforename.label;
                     <label id="fxaEmailAddress2"/>
                     &signedInUnverified.aftername.label;
                   </description>
                 </hbox>
                 <hbox class="fxaAccountBoxButtons">
                   <button id="verifyFxaAccount" label="&verify.label;" accesskey="&verify.accesskey;"></button>
                   <button id="unverifiedUnlinkFxaAccount" label="&forget.label;" accesskey="&forget.accesskey;"></button>
                 </hbox>
               </vbox>
             </hbox>
 
             <!-- logged in locally but server rejected credentials -->
             <hbox id="fxaLoginRejected">
               <vbox>
-                <image id="fxaProfileImage"/>
+                <image class="fxaProfileImage"/>
               </vbox>
               <vbox flex="1">
                 <hbox>
-                  <vbox><image id="fxaLoginRejectedWarning"/></vbox>
+                  <vbox><image class="fxaLoginRejectedWarning"/></vbox>
                   <description flex="1">
                     &signedInLoginFailure.beforename.label;
                     <label id="fxaEmailAddress3"/>
                     &signedInLoginFailure.aftername.label;
                   </description>
                 </hbox>
                 <hbox class="fxaAccountBoxButtons">
                   <button id="rejectReSignIn" label="&signIn.label;" accesskey="&signIn.accesskey;"></button>

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -478,33 +478,35 @@ separator.thin:not([orient="vertical"]) 
 #monospace {
   min-width: 30ch;
 }
 
 /**
  * Sync
  */
 
-#fxaProfileImage {
+.fxaProfileImage {
   width: 80px;
   height: 80px;
+  border-radius: 50%;
+  border: 1px solid transparent;
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
   margin-inline-end: 24px;
   -moz-user-focus: normal;
 }
 
-#fxaProfileImage.actionable {
+.fxaProfileImage.actionable {
   cursor: pointer;
 }
 
-#fxaProfileImage.actionable:hover {
+.fxaProfileImage.actionable:hover {
   border-color: #0095DD;
 }
 
-#fxaProfileImage.actionable:hover:active {
+.fxaProfileImage.actionable:hover:active {
   border-color: #ff9500;
 }
 
 #useFirefoxSync  {
   font-size: 90%;
   margin-inline-end: 8px !important;
 }
 
@@ -567,30 +569,23 @@ separator.thin:not([orient="vertical"]) 
 }
 
 #fxaEmailAddress1,
 #fxaEmailAddress2,
 #fxaEmailAddress3 {
   word-break: break-all;
 }
 
-.fxaFirefoxLogo {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
-  width: 80px;
-  height: 80px;
-  margin-inline-end: 14px;
-}
-
-#fxaLoginRejectedWarning {
+.fxaLoginRejectedWarning {
   list-style-image: url(chrome://browser/skin/warning.svg);
   filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
   margin: 4px 8px 0px 0px;
 }
 
-#fxaSyncEngines > checkbox {
+#fxaSyncEngines > vbox > checkbox {
   max-width: 224px;
 }
 
 .fxaMobilePromo {
   margin: 2px 0 32px 0 !important;
 }
 
 .androidLink {