--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -7,24 +7,24 @@
 
 .main-content {
   padding-top: 0;
   background-color: #fafafc;
 }
 
 .pane-container {
   display: block;
-  max-width: 800px;
+  max-width: 664px;
 }
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
   font: message-box;
-  color: #0c0c0d;
+  color: currentColor;
 }
 
 #mainPrefPane groupbox,
 #mainPrefPane deck,
 #mainPrefPane description {
   font-size: 1.36rem;
 }
 
@@ -50,49 +50,90 @@ html|option {
   -moz-user-select: none;
 }
 
 caption > label {
   font-size: 1.55rem;
   font-weight: 600;
 }
 
-#engineList treechildren::-moz-tree-image(engineShown, checked),
-#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg");
-  -moz-context-properties: fill, stroke;
-  fill: #2292d0;
-  stroke: none;
-  width: 21px;
-  height: 21px;
+checkbox {
+  height: 30px;
+  margin: 2px 0;
+}
+
+groupbox {
+  margin-top: 0px;
+  padding: 0;
+}
+
+groupbox > caption {
+  padding: 4px 0;
+}
+
+.groupbox-body {
+  margin-bottom: 32px;
+  margin-top: 4px;
+}
+
+description {
+  line-height: 30px;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* XXX This style is for bug 740213 and should be removed once that
+   bug has a solution. */
+description > html|a {
+  cursor: pointer;
 }
 
-#engineList treechildren::-moz-tree-image(engineShown, checked, selected),
-#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) {
-  fill: white;
-  stroke: #0095dd;
+description > checkbox {
+  vertical-align: bottom;
+}
+
+.indent {
+  /* !important needed to override margin-inline-start:0 !important; rule
+     define in common.css for labels */
+  margin-inline-start: 28px !important;
+}
+
+description.indent,
+.indent > description {
+  font-size: 1.18rem;
+  color: #737373;
 }
 
-#engineList treechildren::-moz-tree-row,
-#blocklistsTree treechildren::-moz-tree-row {
-  min-height: 36px;
+menulist {
+  margin: 0 8px;
+}
+
+separator.thin:not([orient="vertical"]) {
+  height: 8px;
 }
 
-#selectionCol {
-  min-width: 26px;
+.checkbox-check {
+  margin-inline-end: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+.radio-label-box {
+  margin-inline-end: 8px;
 }
 
 .learnMore {
   margin-inline-start: 10px;
   font-weight: normal;
   white-space: nowrap;
 }
 
 .accessory-button {
   min-width: 145px;
+  margin: 2px 0;
 }
 
 /* Subcategory title */
 
 /**
  * The first subcategory title for each category should not have margin-top.
  */
 #generalCategory,
@@ -100,77 +141,77 @@ caption > label {
 #browserPrivacyCategory,
 #firefoxAccountCategory {
   margin-top: 0;
 }
 
 .header-name {
   font-size: 2rem;
   font-weight: 300;
+  line-height: 30px;
 }
 
 .subcategory {
-  margin-top: 48px;
+  margin: 16px 0;
 }
 
 /* Category List */
 
 #categories {
   max-height: 100vh;
   background-color: #fafafc;
+  padding-top: 70px;
 }
 
 #categories > scrollbox {
   overflow-x: hidden !important;
 }
 
 .category-name {
   font-size: 1.45rem;
-  color: #0c0c0d;
 }
 
 .category,
 .category:hover,
 .category[selected] {
+  width: 240px;
+  height: 48px;
   background-color: transparent;
-  border-inline-start: initial;
   padding-inline-start: 44px;
-}
-
-richlistitem[selected='true'] .category-name {
-  color: #0a84ff;
+  padding-inline-end: 10px;
+  border-inline-start: none;
 }
 
 /**
  * We want the last category to always have non-0 getBoundingClientRect().bottom
  * so we can use the value to figure out the max-height of the list in
  * preferences.js, so use collapse instead of display: none; if it's hidden
  */
 #categories > .category[hidden="true"] {
   display: -moz-box;
   visibility: collapse;
 }
 
 #category-general > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#general");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/general.svg");
 }
 
 #category-search > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#search");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/search.svg");
 }
 
 #category-privacy > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#security");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/privacy-security.svg");
 }
 
 #category-sync > .category-icon {
-  list-style-image: url("chrome://browser/skin/preferences/in-content-new/icons.svg#sync");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/sync.svg");
 }
 
-@media (max-width: 800px) {
+@media (max-width: 960px) {
   .category-name {
     display: none;
   }
   .help-button {
     font-size: 0 !important;
   }
 }
 
@@ -182,33 +223,46 @@ richlistitem[selected='true'] .category-
 }
 
 .header[hidden=true] {
   display: none;
 }
 
 /* General Pane */
 
+#startupGroup {
+  margin-top: 0px !important;
+}
+
 #startupTable {
+  margin-top: 32px;
   border-collapse: collapse;
 }
 
 #startupTable > tr > td {
   padding: 0; /* remove the padding from html.css */
 }
 
-#startupTable > tr:not(:first-child) > td {
-  padding-top: 0.5em; /* add a spacing between the rows */
+#startupTable > .tableGroup > td {
+  padding-top: 32px;
+}
+
+#startupTable > .tableSubGroup > td {
+  padding-top: 8px;
 }
 
 #startupTable > tr > .label-cell {
   text-align: end;
   width: 0; /* make the column as small as possible */
 }
 
+#startupTable > tr > .content-cell:not(:first-child) {
+  padding-inline-start: 8px;
+}
+
 #startupTable > tr > .label-cell > label {
   white-space: nowrap;
 }
 
 #startupTable > tr > .content-cell > menulist,
 #startupTable > tr > .content-cell > textbox {
   width: calc(100% - 8px);
   margin-left: 4px;
@@ -219,19 +273,18 @@ richlistitem[selected='true'] .category-
   display: flex;
   flex-wrap: wrap;
 }
 
 #startupTable > tr > .homepage-buttons > .content-cell-item {
   flex-grow: 1;
 }
 
-#useFirefoxSync  {
-  font-size: 90%;
-  margin-inline-end: 8px !important;
+.content-cell-item {
+  margin: 0 4px;
 }
 
 #getStarted {
   font-size: 90%;
 }
 
 #isNotDefaultLabel,
 #signedOutAccountBoxTitle {
@@ -242,25 +295,44 @@ richlistitem[selected='true'] .category-
   margin-inline-start: 0;
 }
 
 #browserHomePage:-moz-locale-dir(rtl) input {
   unicode-bidi: plaintext;
   direction: rtl;
 }
 
-#defaultFontSizeLabel {
-  /* !important needed to override common !important rule */
-  margin-inline-start: 4px !important;
+#updateApp > .groupbox-body > label {
+  margin: 0 0 4px 0;
+  line-height: 30px;
+}
+
+#updateApp > .groupbox-body > description {
+  line-height: 30px;
+  margin: 0;
 }
 
-/* Applications Pane Styles */
+#updateBox {
+  margin-top: 8px;
+  margin-bottom: 32px;
+}
+
+#updateBox button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+#updateRadioGroup radio {
+  height: 30px;
+  margin: 2px 0;
+}
 
 #filter {
   margin-inline-start: 0;
+  margin-bottom: 8px;
 }
 
 #handlersView {
   height: 25em;
 }
 
 #handlersView > richlistitem {
   min-height: 36px !important;
@@ -283,81 +355,117 @@ richlistitem[selected='true'] .category-
 .actionsMenu > menupopup > menuitem {
   padding-inline-start: 10px !important;
 }
 
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
   margin-inline-end: 8px !important;
 }
 
-/* Privacy pane */
+/* Search Pane */
+
+#defaultEngine {
+  margin-top: 2px;
+  margin-bottom: 6px;
+}
+
+#engineList {
+  margin: 2px 0 5px 0;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
+  list-style-image: url("chrome://global/skin/in-content/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: #2292d0;
+  stroke: none;
+  width: 21px;
+  height: 21px;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
+  fill: white;
+  stroke: #0095dd;
+}
+
+#engineList > treechildren::-moz-tree-row,
+#blocklistsTree > treechildren::-moz-tree-row {
+  min-height: 36px;
+}
+
+#selectionCol {
+  min-width: 26px;
+}
+
+#addEnginesBox {
+  margin: 4px 0 0 0;
+}
+
+/* Privacy Pane */
+
+#formAutofillGroup {
+  margin-top: 28px;
+}
 
 .doNotTrackLearnMore {
   margin-inline-start: calc(1em + 30px);
   margin-bottom: 1em;
   font-weight: normal;
 }
 
 .doNotTrackLearnMore > label {
   font-size: 1em !important;
   margin-left: 0;
 }
 
+#locationBarGroup > .text-link {
+  margin-top: 6px;
+}
+
+#allowSmartSize {
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+
 #doNotTrackLearnMoreBox {
-  margin-top: 30px
+  margin-top: 32px;
 }
 
 #trackingProtectionAdvancedSettings {
   margin-inline-start: 15px;
 }
 
+#historyPane {
+  margin-top: 4px;
+}
+
 /* Collapse the non-active vboxes in decks to use only the height the
    active vbox needs */
 #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
 #historyPane:not([selectedIndex="2"]) > #historyCustomPane,
 #weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
 #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
 #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
   visibility: collapse;
 }
 
-/* XXX This style is for bug 740213 and should be removed once that
-   bug has a solution. */
-description > html|a {
-  cursor: pointer;
-}
-
-description > checkbox {
-  vertical-align: middle;
-}
-
 #weavePrefsDeck > vbox > label,
 #weavePrefsDeck > vbox > groupbox,
 #weavePrefsDeck > vbox > description,
 #weavePrefsDeck > #hasFxaAccount > vbox > label,
 #weavePrefsDeck > #hasFxaAccount > hbox > label {
   /* no margin-inline-start for elements at the beginning of a line */
   margin-inline-start: 0;
 }
 
-groupbox {
-  /* Give more available space for displaying tooltip on scrollable groupbox */
-  margin-top: 15px !important;
-}
-
 #tabsElement {
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
 }
 
-.indent {
-  /* !important needed to override margin-inline-start:0 !important; rule
-     define in common.css for labels */
-  margin-inline-start: 33px !important;
-}
-
 .text-link {
   margin-bottom: 0;
 }
 
 #showUpdateHistory {
   margin-inline-start: 0;
 }
 
@@ -447,20 +555,21 @@ groupbox {
 /**
  * Sync
  */
 
 #fxaProfileImage {
   width: 60px;
   height: 60px;
   border-radius: 50%;
-  list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
   margin-inline-end: 15px;
   image-rendering: auto;
   border: 1px solid transparent;
+  -moz-user-focus: normal;
 }
 
 #fxaLoginStatus[hasName] #fxaProfileImage {
   width: 80px;
   height: 80px;
 }
 
 #fxaProfileImage.actionable {
@@ -478,16 +587,21 @@ groupbox {
 #noFxaAccount {
   padding-top: 15px;
 }
 
 #fxaContentWrapper {
   -moz-box-flex: 1;
 }
 
+#useFirefoxSync  {
+  font-size: 90%;
+  margin-inline-end: 8px !important;
+}
+
 #noFxaGroup {
   -moz-box-flex: 1;
   margin: 0;
 }
 
 #fxaContentWrapper {
   padding-right: 15px;
 }
@@ -576,17 +690,17 @@ groupbox {
 
 #fxaEmailAddress1,
 #fxaEmailAddress2,
 #fxaEmailAddress3 {
   word-break: break-all;
 }
 
 .fxaFirefoxLogo {
-  list-style-image: url(chrome://browser/skin/fxa/logo.png);
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/fxa-avatar.svg");
   width: 64px;
   height: 64px;
   margin-inline-end: 14px;
 }
 
 .fxaMobilePromo {
   line-height: 28px;
   margin-bottom: 20px;
@@ -599,47 +713,35 @@ groupbox {
   margin: 4px 8px 0px 0px;
 }
 
 #syncOptions {
   margin-bottom: 27.5px;
 }
 
 .androidLink {
-  list-style-image: url("chrome://browser/skin/fxa/android.png");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-android.svg");
 }
 
 .iOSLink {
-  list-style-image: url("chrome://browser/skin/fxa/ios.png");
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/logo-ios.svg");
 }
 
 .androidLink,
 .iOSLink {
-  vertical-align: bottom;
-  padding: 0 5px;
-  height: 28px;
+  width: 20px;
+  height: 20px;
+  vertical-align: text-bottom;
 }
 
 #tosPP-small {
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .androidLink {
-    list-style-image: url("chrome://browser/skin/fxa/android@2x.png");
-  }
-  .iOSLink {
-    list-style-image: url("chrome://browser/skin/fxa/ios@2x.png");
-  }
-  .fxaFirefoxLogo {
-    list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
-  }
-}
-
 #updateDeck > hbox > label {
   margin-inline-end: 5px ! important;
 }
 
 .update-throbber {
   width: 16px;
   min-height: 16px;
   margin-inline-end: 3px;
@@ -650,60 +752,71 @@ groupbox {
   .update-throbber {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
 .help-button {
   position: fixed;
   left: 0;
-  /* Needs to have enough gap from the bottom to not
-     get behind the status panel (bug 1357841). */
-  bottom: 2rem;
+  bottom: 36px;
+  background-image: url("chrome://browser/skin/preferences/in-content-new/help.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
   font-size: 13px;
-  line-height: 13px;
-  height: 14px;
-  background-position: 15px;
-  padding-inline-start: 35px;
+  line-height: 16px;
+  height: 16px;
+  background-position: 8px;
+  padding-inline-start: 38px;
+  margin-inline-start: 44px;
   white-space: nowrap;
-  fill: #0c0c0d;
-  stroke: #0c0c0d;
 }
 
 .help-button:-moz-locale-dir(rtl) {
+  background-position: right 8px top 0;
   left: auto;
   right: 0;
-  background-position: right 15px top 0;
+}
+
+.help-button:hover {
+  fill: currentColor;
+  fill-opacity: 0.9;
 }
 
 .help-button:link,
 .help-button:visited {
-  color: #0c0c0d !important;
-  opacity: 0.8;
+  color: var(--in-content-category-text);
   text-decoration: none;
 }
 
-.help-button:hover {
-  color: #0c0c0d !important;
-  fill: #0c0c0d !important;
-  stroke: #0c0c0d !important;
-  stroke-opacity: 0!important;
-  opacity: 0.9;
+.face-sad {
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/face-sad.svg");
+  width: 20px;
+  height: 20px;
+  margin-inline-end: 8px;
+}
+
+.face-smile {
+  list-style-image: url("chrome://browser/skin/preferences/in-content-new/face-smile.svg");
+  width: 20px;
+  height: 20px;
+  margin-inline-end: 8px;
 }
 
 .search-container {
   position: sticky;
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;
   z-index: 1;
 }
 
 #searchInput {
-  width: 230px;
+  width: 250px;
   margin: 20px 0;
 }
 
 #searchInput .textbox-search-icons:not([selectedIndex="1"]) {
   display: none;
 }
 
 .search-tooltip {