--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -262,18 +262,18 @@
 #endif
 #endif
 
   <preference id="browser.search.update"
               name="browser.search.update"
               type="bool"/>
 </preferences>
 
-<hbox id="header-general"
-      class="header"
+<hbox id="generalCategory"
+      class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1">&paneGeneral.title;</label>
 </hbox>
 
 <!-- Startup -->
 <groupbox id="startupGroup"
           data-category="paneGeneral"
@@ -435,16 +435,23 @@
               label="&browserContainersSettings.label;"
               accesskey="&browserContainersSettings.accesskey;"
               searchkeywords="&addButton.label;
                               &preferencesButton.label;
                               &removeButton.label;"/>
     </hbox>
 </groupbox>
 
+<hbox id="languageAndAppearanceCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneGeneral">
+  <label class="header-name" flex="1">&languageAndAppearance.label;</label>
+</hbox>
+
 <!-- Fonts and Colors -->
 <groupbox id="fontsGroup" data-category="paneGeneral" hidden="true">
   <caption><label>&fontsAndColors.label;</label></caption>
 
   <vbox>
     <hbox id="fontSettings">
       <hbox align="center">
         <label control="defaultFont" accesskey="&defaultFont2.accesskey;">&defaultFont2.label;</label>
@@ -616,16 +623,23 @@
 <!-- Files and Applications -->
 <keyset data-category="paneGeneral">
   <!-- Ctrl+f/k focus the search box in the Applications pane.
        These <key>s have oncommand attributes because of bug 371900. -->
   <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand=";"/>
   <key key="&focusSearch2.key;" modifiers="accel" id="focusSearch2" oncommand=";"/>
 </keyset>
 
+<hbox id="filesAndApplicationsCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneGeneral">
+  <label class="header-name" flex="1">&filesAndApplications.label;</label>
+</hbox>
+
 <!--Downloads-->
 <groupbox id="downloadsGroup" data-category="paneGeneral" hidden="true">
   <caption><label>&downloads.label;</label></caption>
 
   <radiogroup id="saveWhere"
               preference="browser.download.useDownloadDir"
               onsyncfrompreference="return gApplicationsPane.readUseDownloadDir();">
     <hbox id="saveToRow">
@@ -702,19 +716,25 @@
   </grid>
 </groupbox>
 
 #ifdef HAVE_SHELL_SERVICE
   <stringbundle id="bundleShell" src="chrome://browser/locale/shellservice.properties"/>
   <stringbundle id="bundleBrand" src="chrome://branding/locale/brand.properties"/>
 #endif
 
+<hbox id="updatesCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneGeneral">
+  <label class="header-name" flex="1">&updateApplication.label;</label>
+</hbox>
+
 <!-- Update -->
 <groupbox id="updateApp" data-category="paneGeneral" hidden="true">
-  <caption><label>&updateApplication.label;</label></caption>
   <hbox align="start">
     <vbox flex="1">
       <description>
         &updateApplication.version.pre;<label id="version"/>&updateApplication.version.post;
         <label id="releasenotes" class="learnMore text-link" hidden="true">&releaseNotes.link;</label>
       </description>
       <description id="distribution" class="text-blurb" hidden="true"/>
       <description id="distributionId" class="text-blurb" hidden="true"/>
@@ -843,20 +863,25 @@
 #endif
 #endif
   <checkbox id="enableSearchUpdate"
             label="&enableSearchUpdate2.label;"
             accesskey="&enableSearchUpdate2.accesskey;"
             preference="browser.search.update"/>
 </groupbox>
 
+<hbox id="performanceCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneGeneral">
+  <label class="header-name" flex="1">&performance.label;</label>
+</hbox>
+
 <!-- Performance -->
 <groupbox id="performanceGroup" data-category="paneGeneral" hidden="true">
-  <caption><label>&performance.label;</label></caption>
-
   <hbox align="center">
     <checkbox id="useRecommendedPerformanceSettings"
               label="&useRecommendedPerformanceSettings2.label;"
               accesskey="&useRecommendedPerformanceSettings2.accesskey;"
               preference="browser.preferences.defaultPerformanceSettings.enabled"/>
     <label id="performanceSettingsLearnMore" class="learnMore text-link">&performanceSettingsLearnMore.label;</label>
   </hbox>
   <description class="indent">&useRecommendedPerformanceSettings2.description;</description>
@@ -880,20 +905,25 @@
         </menupopup>
       </menulist>
     </hbox>
     <description id="contentProcessCountEnabledDescription">&limitContentProcessOption.description;</description>
     <description id="contentProcessCountDisabledDescription">&limitContentProcessOption.disabledDescription;<label class="text-link" href="https://wiki.mozilla.org/Electrolysis">&limitContentProcessOption.disabledDescriptionLink;</label></description>
   </vbox>
 </groupbox>
 
+<hbox id="browsingCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneGeneral">
+  <label class="header-name" flex="1">&browsing.label;</label>
+</hbox>
+
 <!-- Browsing -->
 <groupbox id="browsingGroup" data-category="paneGeneral" hidden="true">
-  <caption><label>&browsing.label;</label></caption>
-
   <checkbox id="useAutoScroll"
             label="&useAutoScroll.label;"
             accesskey="&useAutoScroll.accesskey;"
             preference="general.autoScroll"/>
   <checkbox id="useSmoothScrolling"
             label="&useSmoothScrolling.label;"
             accesskey="&useSmoothScrolling.accesskey;"
             preference="general.smoothScroll"/>
@@ -910,20 +940,25 @@
             accesskey="&useCursorNavigation.accesskey;"
             preference="accessibility.browsewithcaret"/>
   <checkbox id="searchStartTyping"
             label="&searchOnStartTyping.label;"
             accesskey="&searchOnStartTyping.accesskey;"
             preference="accessibility.typeaheadfind"/>
 </groupbox>
 
+<hbox id="networkProxyCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneGeneral">
+  <label class="header-name" flex="1">&networkProxy.label;</label>
+</hbox>
+
 <!-- Network Proxy-->
 <groupbox id="connectionGroup" data-category="paneGeneral" hidden="true">
-  <caption><label>&networkProxy.label;</label></caption>
-
   <hbox align="center">
     <description flex="1" control="connectionSettings">&connectionDesc.label;</description>
     <button id="connectionSettings"
             class="accessory-button"
             icon="network"
             label="&connectionSettings.label;"
             accesskey="&connectionSettings.accesskey;"
             searchkeywords="&connectionsDialog.title;

--- a/browser/components/preferences/in-content-new/privacy.xul
+++ b/browser/components/preferences/in-content-new/privacy.xul
@@ -163,21 +163,21 @@
               type="bool"/>
 #endif
 
 </preferences>
 
 <stringbundle id="bundlePreferences" src="chrome://browser/locale/preferences/preferences.properties"/>
 <stringbundle id="signonBundle" src="chrome://passwordmgr/locale/passwordmgr.properties"/>
 
-<hbox id="header-privacy"
-      class="header"
+<hbox id="browserPrivacyCategory"
+      calss="subcategory"
       hidden="true"
       data-category="panePrivacy">
-  <label class="header-name" flex="1">&panePrivacySecurity.title;</label>
+  <label class="header-name" flex="1">&browserPrivacy.label;</label>
 </hbox>
 
 <!-- Passwords -->
 <groupbox id="passwordsGroup" orient="vertical" data-category="panePrivacy" hidden="true">
   <caption><label>&formsAndPasswords.label;</label></caption>
 
   <vbox id="passwordSettings">
     <hbox id="savePasswordsBox">
@@ -492,19 +492,25 @@
   </vbox>
   <vbox>
     <description>&doNotTrack.pre.label;<label
     class="text-link" id="doNotTrackSettings"
     >&doNotTrack.settings.label;</label>&doNotTrack.post.label;</description>
   </vbox>
 </groupbox>
 
+<hbox id="permissionsCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="panePrivacy">
+  <label class="header-name" flex="1">&permissions.label;</label>
+</hbox>
+
 <!-- Permissions -->
 <groupbox id="permissionsGroup" data-category="panePrivacy" hidden="true">
-  <caption><label>&permissions.label;</label></caption>
   <grid>
     <columns>
       <column flex="1"/>
       <column/>
     </columns>
     <rows>
       <row id="notificationsPolicyRow" align="center">
         <hbox flex="1">
@@ -560,21 +566,27 @@
                             &allow.label;
                             &removepermission.label;
                             &removeallpermissions.label;
                             &button.cancel.label;
                             &button.ok.label;"/>
   </hbox>
 </groupbox>
 
+<hbox id="dataCollectionCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="panePrivacy">
+  <label class="header-name" flex="1">&dataCollection.label;</label>
+</hbox>
+
 <!-- Firefox Data Collection and Use -->
 #ifdef MOZ_DATA_REPORTING
 <groupbox id="dataCollectionGroup" data-category="panePrivacy" data-subcategory="reports" hidden="true">
 #ifndef MOZ_TELEMETRY_REPORTING
-  <caption><label>&dataCollection.label;</label></caption>
   <description>
     &dataCollectionDesc.label;<label id="dataCollectionLearnMore" class="learnMore text-link">&dataCollectionLearnMore.label;</label>
   </description>
   <hbox align="center">
     <checkbox id="submitHealthReportBox" label="&enableHealthReport.label;"
               accesskey="&enableHealthReport.accesskey;"/>
     <label id="FHRLearnMore"
            class="learnMore text-link">&healthReportLearnMore.label;</label>
@@ -598,16 +610,23 @@
               accesskey="&alwaysSubmitCrashReports.accesskey;"/>
     <label id="crashReporterLearnMore"
            class="learnMore text-link">&crashReporterLearnMore.label;</label>
   </hbox>
 #endif
 </groupbox>
 #endif
 
+<hbox id="securityCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="panePrivacy">
+  <label class="header-name" flex="1">&security.label;</label>
+</hbox>
+
 <!-- addons, forgery (phishing) UI Security -->
 <groupbox id="addonsPhishingGroup" data-category="panePrivacy" hidden="true">
   <caption><label>&phishingProtection.label;</label></caption>
 
   <separator class="thin"/>
   <checkbox id="enableSafeBrowsing"
             label="&enableSafeBrowsing.label;"
             accesskey="&enableSafeBrowsing.accesskey;" />

--- a/browser/components/preferences/in-content-new/search.xul
+++ b/browser/components/preferences/in-content-new/search.xul
@@ -14,18 +14,18 @@
 
     </preferences>
 
     <script type="application/javascript"
             src="chrome://browser/content/preferences/in-content-new/search.js"/>
 
     <stringbundle id="engineManagerBundle" src="chrome://browser/locale/engineManager.properties"/>
 
-    <hbox id="header-search"
-          class="header"
+    <hbox id="searchCategory"
+          class="subcategory"
           hidden="true"
           data-category="paneSearch">
       <label class="header-name" flex="1">&paneSearch.title;</label>
     </hbox>
 
     <!-- Default Search Engine -->
     <groupbox id="defaultEngineGroup" align="start" data-category="paneSearch">
       <caption label="&defaultSearchEngine.label;"/>

--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -23,18 +23,18 @@
   <preference id="engine.passwords"
               name="services.sync.engine.passwords"
               type="bool"/>
 </preferences>
 
 <script type="application/javascript"
         src="chrome://browser/content/preferences/in-content-new/sync.js"/>
 
-<hbox id="header-sync"
-      class="header"
+<hbox id="firefoxAccountCategory"
+      class="searchCategory"
       hidden="true"
       data-category="paneSync">
   <label class="header-name" flex="1">&paneSync1.title;</label>
 </hbox>
 
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
   <vbox id="noFxaAccount">
     <hbox>

--- a/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
@@ -16,12 +16,16 @@
 <!ENTITY  paneSearchResults.title       "Search Results">
 <!ENTITY  paneGeneral.title             "General">
 <!ENTITY  paneSearch.title              "Search">
 <!ENTITY  paneFilesApplications.title   "Files &amp; Applications">
 <!ENTITY  panePrivacySecurity.title     "Privacy &amp; Security">
 <!ENTITY  paneContainers.title          "Container Tabs">
 <!ENTITY  paneUpdates.title             "Updates">
 
+<!ENTITY  languageAndAppearance.label   "Language and Appearance">
+<!ENTITY  filesAndApplications.label    "Files and Applications">
+<!ENTITY  browserPrivacy.label          "Browser Privacy">
+
 <!-- LOCALIZATION NOTE (paneSync1.title): This should match syncBrand.fxAccount.label in ../syncBrand.dtd -->
 <!ENTITY  paneSync1.title          "Firefox Account">
 
 <!ENTITY  helpButton2.label        "&brandShortName; Support">

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -48,16 +48,33 @@ treecol {
   font-weight: normal;
   white-space: nowrap;
 }
 
 .accessory-button {
   min-width: 145px;
 }
 
+/* Subcategory title */
+
+/**
+ * The first subcategory title for each category do not have margin-top.
+ */
+#generalCategory, #searchCategory, #browserPrivacyCategory, #firefoxAccountCategory{
+  margin-top: 0;
+}
+
+.header-name {
+  font-size: 22px;
+}
+
+.subcategory {
+  margin-top: 64px;
+}
+
 /* Category List */
 
 #categories {
   max-height: 100vh;
 }
 
 #categories > scrollbox {
   overflow-x: hidden !important;