diff --git a/browser/base/content/aboutaccounts/aboutaccounts.css b/browser/base/content/aboutaccounts/aboutaccounts.css
index 4b05dd1b2e75..979f92a81448 100644
--- a/browser/base/content/aboutaccounts/aboutaccounts.css
+++ b/browser/base/content/aboutaccounts/aboutaccounts.css
@@ -1,19 +1,7 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
 html, body {
   height: 100%;
 }
 
-#content {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  display: flex;
-}
-
 #remote {
   width: 100%;
   height: 100%;
@@ -24,27 +12,3 @@ html, body {
 #manage, #intro, #stage {
   display: none;
 }
-
-#stage {
-  opacity: 1;
-}
-
-.graphic-sync-intro {
-  background-image: url(images/graphic_sync_intro.png);
-}
-
-.description, .button-row {
-  margin-top: 30px;
-}
-
-/* Retina */
-@media
-only screen and (   min--moz-device-pixel-ratio: 2),
-only screen and (   -moz-min-device-pixel-ratio: 2),
-only screen and (        min-device-pixel-ratio: 2),
-only screen and (                min-resolution: 192dpi),
-only screen and (                min-resolution: 2dppx) {
-  .graphic-sync-intro {
-    background-image: url(images/graphic_sync_intro@2x.png);
-  }
-}
diff --git a/browser/base/content/aboutaccounts/aboutaccounts.xhtml b/browser/base/content/aboutaccounts/aboutaccounts.xhtml
index d318e311769a..f49b4a065e53 100644
--- a/browser/base/content/aboutaccounts/aboutaccounts.xhtml
+++ b/browser/base/content/aboutaccounts/aboutaccounts.xhtml
@@ -39,8 +39,7 @@
 
       <div id="manage">
         <header>
-          <h1><span>&syncBrand.fullName.label;</span></h1>
-          <h2><span>&aboutAccounts.welcome;</span></h2>
+          <h1>&aboutAccounts.welcome;</h1>
         </header>
 
         <section>
@@ -54,8 +53,7 @@
 
       <div id="intro">
         <header>
-          <h1><span>&syncBrand.fullName.label;</span></h1>
-          <h2><span>&aboutAccounts.welcome;</span></h2>
+          <h1>&aboutAccounts.welcome;</h1>
         </header>
 
         <section>
@@ -68,7 +66,7 @@
             </div>
 
             <div class="links">
-              <a id="oldsync" href="#" onclick="handleOldSync();">&aboutAccountsConfig.useOldSync.label;</a>
+              <a id="oldsync" class="no-underline" href="#" onclick="handleOldSync();">&aboutAccountsConfig.useOldSync.label;</a>
             </div>
         </section>
       </div>
diff --git a/browser/base/content/aboutaccounts/images/graphic_sync_intro.png b/browser/base/content/aboutaccounts/images/graphic_sync_intro.png
index 983d8a654a4d..0c18d6fd8c45 100644
Binary files a/browser/base/content/aboutaccounts/images/graphic_sync_intro.png and b/browser/base/content/aboutaccounts/images/graphic_sync_intro.png differ
diff --git a/browser/base/content/aboutaccounts/images/graphic_sync_intro@2x.png b/browser/base/content/aboutaccounts/images/graphic_sync_intro@2x.png
index dba656bd09b8..a36b4f038d72 100644
Binary files a/browser/base/content/aboutaccounts/images/graphic_sync_intro@2x.png and b/browser/base/content/aboutaccounts/images/graphic_sync_intro@2x.png differ
diff --git a/browser/base/content/aboutaccounts/main.css b/browser/base/content/aboutaccounts/main.css
index 9678e43a63e9..a40e5562658a 100644
--- a/browser/base/content/aboutaccounts/main.css
+++ b/browser/base/content/aboutaccounts/main.css
@@ -1,185 +1,82 @@
-/* Border box all the things by default */
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: border-box;
 }
 
 html {
-  background-color: #f1f1f1;
-  background-image: -webkit-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
-  background-image:    -moz-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
-  background-image:     -ms-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
-  background-image:      -o-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
-  background-image:         linear-gradient(-180deg, #fefefe 0%, #f1f1f1 100%);
-  background-repeat: no-repeat;
+  background-color: #F2F2F2;
+  height: 100%;
 }
 
 body {
-  color: #424F59;
+  color: #424f59;
   font-family: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
+  height: 100%;
 }
 
 a {
-  color: #0096DD;
+  color: #0095dd;
   cursor: pointer; /* Use the correct cursor for anchors without an href */
 }
 
-noscript {
-  color: #f00;
-  display: block;
-  margin: 160px 0 0 0;
+a:active {
+  outline: none;
+}
+
+a:focus {
+  outline: 1px dotted #0095dd;
+}
+
+
+a.no-underline {
+  text-decoration: none;
 }
 
 #stage {
-  background: #fff url(images/fox.png) no-repeat left 50% bottom 30px;
-  background-size: 30px 31px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);;
-  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
-  margin: 60px auto 0;
-  min-height: 550px;
-  opacity: 0;
-  /* padding-bottom = 30px (below icon) + 31px (firefox icon) + 40px (above icon) */
-  padding: 50px 25px 101px 25px;
-  text-align: center;
-  width: 320px;
-}
-
-header h1, header h2 {
-  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
-  line-height: 1em;
-  margin: 0;
-}
-
-header h1 {
-  font-size: 24px;
-  font-weight: normal;
-  margin-bottom: 21px;
-}
-
-header h2 {
-  font-size: 20px;
-  font-weight: 200;
-  margin-bottom: 40px;
-}
-
-section p {
-  font-size: 18px;
-}
-
-.error {
-  background: #D63920;
-  color: #fff;
-  margin-bottom: 5px;
-  padding: 5px;
-}
-
-.error:empty {
-  display: none;
-}
-
-.graphic {
-  background-repeat: none;
-  background-size: 150px 130px;
-  height: 130px;
-  margin: 0 auto;
-  overflow: hidden;
-  text-indent: 100%;
-  white-space: nowrap;
-  width: 150px;
-}
-
-.graphic-checkbox {
-  background-image: url(../images/graphic_checkbox.png);
-}
-
-.graphic-mail {
-  background-image: url(../images/graphic_mail.png);
-}
-
-.input-row {
-  margin-bottom: 15px;
-  width: 100%;
-}
-
-.input-row input, .input-row select {
-  border: 1px solid #C0C9D0;
-  -webkit-border-radius: 5px;
+  background:#fff;
   border-radius: 5px;
-  color: #454f59;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+  margin: 0 auto;
+  min-height: 300px;
+  padding: 60px 40px 40px 40px;
+  position: relative;
+  text-align: center;
+  top: 80px;
+  width: 420px;
+}
+
+header h1
+{
+  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+  font-size: 24px;
+  font-weight: 200;
+  line-height: 1em;
+  margin: 0 0 32px 0;
+}
+
+.description {
   font-size: 18px;
-  height: 45px;
-  padding: 0 20px;
-  width: 100%;
-}
-
-.input-row input::-webkit-input-placeholder {
-   color: #C0C9D0;
-}
-
-.input-row input:-moz-placeholder { /* Firefox 18- */
-   color: #C0C9D0;
-}
-
-.input-row input::-moz-placeholder {  /* Firefox 19+ */
-   color: #C0C9D0;
-}
-
-.input-row input:-ms-input-placeholder {
-   color: #C0C9D0;
-}
-
-.input-row select {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-    -moz-user-select: none;
-          appearance: none;
-  background: transparent url(../images/ddarrow_inactive.png) no-repeat right 14px top 50%;
-  background-size: 10px 17px;
-  color: #C0C9D0;
-  height: auto;
-  outline: none;
-  padding: 8px 20px;
-
-  /* Some hackery for Firefox since moz-appearance: none doesn't remove the arrow */
-  text-indent: 0.01px;
-  text-overflow: "";
-
-  width: 100%;
-}
-
-.input-row input:focus, .input-row select:focus {
-  border-color: #6f7a85;
-}
-
-.input-row select:focus {
-  background-image: url(../images/ddarrow_active.png);
-  color: #454f59;
-}
-
-.input-row:last-child {
-  margin-bottom: 0;
-}
-
-.input-row .input-help {
-  margin-top: 10px;
-  color: #C0C9D0;
 }
 
 .button-row {
-  margin-bottom: 20px;
   margin-top: 45px;
+  margin-bottom:20px;
 }
 
-.button-row button, .button-row a.button {
-  background: #E66000;
+.button-row button,
+.button-row a.button {
+  background: #0095dd;
   border: none;
-  -webkit-border-radius: 5px;
   border-radius: 5px;
-  color: #fff;
+  color: #FFFFFF;
+  cursor: pointer;
+  font-family: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 24px;
   padding: 15px 0;
+  transition-duration: 150ms;
+  transition-property: background-color;
   width: 100%;
 }
 
@@ -188,199 +85,68 @@ section p {
   text-decoration: none;
 }
 
+.button-row a.button:active,
+.button-row a.button:hover,
+.button-row a.button:focus,
 .button-row button:active,
 .button-row button:hover,
 .button-row button:focus {
-  background: #FF9500;
+  background: #08c;
 }
 
-.button-row button:disabled {
-  background: #C0C9D0;
-}
 
-/* Custom rows */
-.input-row-month-day select {
-  width: 45%;
-}
-
-.description {
-  font-size: 18px;
-}
-
-.links {
-  margin-bottom: 20px;
-  overflow: auto;
-}
-
-.links a {
-  text-decoration: none;
-}
-
-.links a:hover {
-  text-decoration: underline;
-}
-
-.links .left {
-  float: left;
-}
-
-.links .right {
-  float: right;
-}
-
-.privacy-links, .privacy-links a {
-  color: #C0C9D0;
-  margin-top: 35px;
-}
-
-.privacy-links + .button-row {
-  margin-top: 20px;
-}
-
-.verification-email-message {
-  word-wrap: break-word;
-}
-
-.password-row {
-  position: relative;
-}
-
-.password-row > .password {
-  padding-right: 75px;
-}
-
-.password-row > .password + label {
-  border-left: 1px solid #C0C9D0;
-  color: #C0C9D0;
-  cursor: pointer;
-  font-size: 16px;
-  height: 44px;
-  line-height: 44px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  /* it is very easy to accidentally select the text when clicking */
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-   -khtml-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  width: 55px;
-}
-
-.password-row > .password:focus + label {
-  border-color: #6F7A85;
-}
-
-.password-row > .password + label > input[type=checkbox] {
-  visibility: hidden;
-}
-
-.links + .privacy-links {
-  margin: 20px 0 15px 0;
-}
-
-.cannot-create-account-content {
-  margin-top: 105px;
-}
-
-.spinner {
-  -webkit-animation: 0.9s spin infinite linear;
-  -moz-animation: 0.9s spin infinite linear;
-  animation: 0.9s spin infinite linear;
-  background-image: url(../images/spinnerlight.png);
-  background-size: 30px 30px;
-  display: block;
-  margin: 130px auto 0;
-  width: 30px;
-  height: 30px;
+.graphic-sync-intro {
+  background-image: url(images/graphic_sync_intro.png);
+  background-repeat: no-repeat;
+  background-size: 150px 195px;
+  height: 195px;
+  margin: 0 auto;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
+  width: 150px;
 }
 
-@-webkit-keyframes spin {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(365deg);
-  }
+.description,
+.button-row {
+  margin-top: 30px;
 }
 
-@-moz-keyframes spin {
-  from {
-    -moz-transform: rotate(0deg);
-  }
-  to {
-    -moz-transform: rotate(365deg);
-  }
+.links  {
+  margin: 20px 0;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(365deg);
-  }
-}
-
-/* TODO: These need further consideration */
-
-.hidden {
-  display: none;
-}
-
-/* Responsiveness */
-
-/* TODO: Confirm breakpoint sizes */
 @media only screen and (max-width: 500px) {
   html {
     background: #fff;
   }
 
   #stage {
-    -webkit-box-shadow: none;
     box-shadow: none;
-    margin: 0 auto;
+    margin: 30px auto 0 auto;
     min-height: none;
+    min-width: 320px;
+    padding: 0 10px;
     width: 100%;
   }
+
+  .button-row {
+    margin-top: 20px;
+  }
+
+  .button-row button,
+  .button-row a.button {
+    padding: 10px 0;
+  }
+
 }
 
 /* Retina */
-
 @media
-only screen and (-webkit-min-device-pixel-ratio: 2),
-only screen and (   min--moz-device-pixel-ratio: 2),
-only screen and (   -moz-min-device-pixel-ratio: 2),
-only screen and (     -o-min-device-pixel-ratio: 2/1),
-only screen and (        min-device-pixel-ratio: 2),
-only screen and (                min-resolution: 192dpi),
-only screen and (                min-resolution: 2dppx) {
-  #stage {
-    background-image: url(../images/fox@2x.png);
-  }
-
-  .graphic-checkbox {
-    background-image: url(../images/graphic_checkbox@2x.png);
-  }
-
-  .graphic-mail {
-    background-image: url(../images/graphic_mail@2x.png);
-  }
-
-  .spinner {
-    background-image: url(../images/spinnerlight@2x.png);
-  }
-
-  .input-row select {
-    background-image: url(../images/ddarrow_inactive@2x.png)
-  }
-
-  .input-row select:focus {
-    background-image: url(../images/ddarrow_active@2x.png);
+only screen and (min-device-pixel-ratio: 2),
+only screen and (        min-resolution: 192dpi),
+only screen and (        min-resolution: 2dppx) {
+  .graphic-sync-intro {
+    background-image: url(images/graphic_sync_intro@2x.png);
   }
 }