diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js
index bec54fd56f46..cf62774eb99f 100644
--- a/browser/components/preferences/main.js
+++ b/browser/components/preferences/main.js
@@ -190,7 +190,6 @@ Preferences.addAll([
   // WATERFOX
   // Enable auto update checking
   { id: "app.update.enabled", type: "bool" },
-
 ]);
 
 if (AppConstants.HAVE_SHELL_SERVICE) {
@@ -2630,11 +2629,19 @@ var gMainPane = {
       let radiogroup = document.getElementById("updateRadioGroup");
 
       radiogroup.disabled = true;
-      let enabled = await UpdateUtils.getAppUpdateAutoEnabled();
+      let autoPref = await UpdateUtils.getAppUpdateAutoEnabled();
       // WATERFOX
       // If user sets app.update.enabled to false, set value to disabled, else use enabled
-      let manualUpdates = Services.prefs.getBoolPref(PREF_UPDATE_ENABLED, true);
-      radiogroup.value = !manualUpdates ? "disabled" : enabled;
+      var enabledPref = Preferences.get("app.update.enabled");
+
+      if (!enabledPref.value) {
+        // Don't care for autoPref.value in this case.
+        radiogroup.value = "disabled"; // 3. Never check for updates.
+      } else if (autoPref.value) {
+        radiogroup.value = "true"; //1. Automatically install updates
+      } else {
+        radiogroup.value = "false"; // 2. Check, but let me choose
+      }
       radiogroup.disabled = false;
 
       this.maybeDisableBackgroundUpdateControls();
@@ -2657,14 +2664,15 @@ var gMainPane = {
       );
       radiogroup.disabled = true;
       try {
-        await UpdateUtils.setAppUpdateAutoEnabled(updateAutoValue);
-        await _disableTimeOverPromise;
-        // WATERFOX
-        // Ensure enabled pref is updated based on radiogroup value
+        // We need to set this pref first so that the auto pref observer
+        // has access to the correct enabled pref value.
         Services.prefs.setBoolPref(
           PREF_UPDATE_ENABLED,
           radiogroup.value != "disabled"
         );
+        await UpdateUtils.setAppUpdateAutoEnabled(updateAutoValue);
+        await _disableTimeOverPromise;
+
         radiogroup.disabled = false;
       } catch (error) {
         console.error(error);
@@ -2880,16 +2888,14 @@ var gMainPane = {
         throw new Error("Invalid preference value for app.update.auto");
       }
       // WATERFOX
-      // Going from Auto to Disable needs to be correctly reflected here
-      // At this point app.update.enabled has not yet been set, so we
-      // want to set disabled if it is going from true->false and is
-      // currently true
       let manualUpdates = Services.prefs.getBoolPref(
         "app.update.enabled",
         true
       );
+      // Only if enabledPref and autoPref are false should we select
+      // disabled, otherwise we just use the value of autoPref.
       document.getElementById("updateRadioGroup").value =
-        manualUpdates && !(aData === "true") ? "disabled" : aData;
+        !manualUpdates && !(aData === "true") ? "disabled" : aData;
       this.maybeDisableBackgroundUpdateControls();
     } else if (aTopic == BACKGROUND_UPDATE_CHANGED_TOPIC) {
       if (!AppConstants.MOZ_UPDATE_AGENT) {
diff --git a/waterfox/browser/components/preferences/content/general.js b/waterfox/browser/components/preferences/content/general.js
index dd463ca3d21d..36fbf9819276 100644
--- a/waterfox/browser/components/preferences/content/general.js
+++ b/waterfox/browser/components/preferences/content/general.js
@@ -1,11 +1,4 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* eslint-env mozilla/browser-window */
-"use strict";
-
-const gMainPaneOverlay = {
+const _gMainPaneOverlay = {
   init() {
     // Initialize prefs
     window.Preferences.addAll(this.preferences);
@@ -60,6 +53,9 @@ const gMainPaneOverlay = {
 
       // Scripts
       { id: "javascript.enabled", type: "bool" },
+
+      // DoOH
+      { id: "network.trr.use_ohttp", type: "bool" },
     ];
   },
 
@@ -72,15 +68,115 @@ const gMainPaneOverlay = {
       // Select the correct radio button based on current pref value
       this.showRelevantElements();
       this.setDynamicThemeGroupValue();
-      this.setEventListener("dynamicThemeGroup", "command", event => {
+      this.setEventListener("dynamicThemeGroup", "command", (event) => {
         this.updateDynamicThemePref(event.target.value);
       });
+      if (document.readyState === "complete") {
+        this.tocGenerate();
+      } else {
+        document.addEventListener("readystatechange", () => {
+          if (document.readyState === "complete") {
+            this.tocGenerate();
+          }
+        });
+      }
       document.initialized = true;
     }
+    this.setEventListener("enableObliviousDns", "click", () => {
+      const value = document.getElementById("enableObliviousDns").checked ? 2 : 0;
+      Services.prefs.setIntPref("network.trr.mode", value);
+    });
   },
 
+  tocGenerate() {
+      const contentSelector = "#mainPrefPane";
+      const headingSelector =
+        "#mainPrefPane > hbox:not([hidden]) > h1, #mainPrefPane > groupbox:not([hidden]) > h2, #mainPrefPane > groupbox:not([hidden]) label:not([hidden]) > h2";
+      const headerTarget = headingSelector.replaceAll(":not([hidden])", "");
+      const specialCharRegex = /[!@#$%^&*():]/gi;
+      const createHeadingId = () => {
+        const content = document.querySelector(contentSelector);
+        const headings = content?.querySelectorAll(headerTarget);
+        const headingMap = {};
+
+        let count = 0;
+        /**
+         * @param {Element} heading
+         * @returns {string}
+         */
+        const getHeadingId = (heading) => {
+          const id = heading.id;
+          if (id) {
+            return id;
+          }
+
+          if (heading instanceof HTMLElement) {
+            const i18nId = heading.dataset.l10nId;
+            if (i18nId) {
+              return i18nId;
+            }
+          }
+
+          return (
+            heading.textContent
+              ?.trim()
+              .toLowerCase()
+              .split(" ")
+              .join("-")
+              .replace(specialCharRegex, "") ?? `${count++}`
+          );
+        };
+        /**
+         * @param {string} headingText
+         * @param {number} count
+         * @returns {string}
+         */
+        const createId = (headingText, count) =>
+          `${headingText}${count > 0 ? `-${count}` : ""}`;
+        if (headings) {
+          for (const heading of headings) {
+            const id = getHeadingId(heading);
+            headingMap[id] = !Number.isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+            heading.id = createId(id, headingMap[id]);
+          }
+        }
+      };
+
+      createHeadingId();
+      tocbot.init({
+        tocSelector: ".toc",
+        contentSelector,
+        headingSelector,
+        scrollContainer: ".main-content",
+        headingsOffset: 100, // 90 + margins
+        hasInnerContainers: false,
+
+        /**
+         * @param {MouseEvent} e
+         */
+        onClick(e) {
+          e.preventDefault();
+
+          /** @type {HTMLLinkElement} */
+          const link = e.target;
+          const targetSelector = link?.getAttribute("href");
+          if (targetSelector) {
+            const target = document.querySelector(targetSelector);
+            if (target) {
+              target.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+          }
+        },
+      });
+      const tocRefresh = () => {
+        createHeadingId();
+        tocbot.refresh();
+      };
+      window.addEventListener("hashchange", tocRefresh);
+    },
+
   showRelevantElements() {
-    let idsGeneral = [
+    const idsGeneral = [
       "dynamicThemeGroup",
       "restartGroup",
       "statusBarGroup",
@@ -88,25 +184,25 @@ const gMainPaneOverlay = {
       "geolocationGroup",
     ];
 
-    let idsPrivacy = ["webrtc", "refheader"];
-    let win = Services.wm.getMostRecentWindow("navigator:browser");
-    let uri = win.gBrowser.currentURI.spec;
+    const idsPrivacy = ["webrtc", "refheader", "dohBox"];
+    const win = Services.wm.getMostRecentWindow("navigator:browser");
+    const uri = win.gBrowser.currentURI.spec;
     if (
-      (uri == "about:preferences" || uri == "about:preferences#general") &&
-      document.visibilityState == "visible"
+      (uri === "about:preferences" || uri === "about:preferences#general") &&
+      document.visibilityState === "visible"
     ) {
-      for (let id of idsGeneral) {
-        let el = document.getElementById(id);
+      for (const id of idsGeneral) {
+        const el = document.getElementById(id);
         if (el) {
           el.removeAttribute("hidden");
         }
       }
     } else if (
-      uri == "about:preferences#privacy" &&
-      document.visibilityState == "visible"
+      uri === "about:preferences#privacy" &&
+      document.visibilityState === "visible"
     ) {
-      for (let id of idsPrivacy) {
-        let el = document.getElementById(id);
+      for (const id of idsPrivacy) {
+        const el = document.getElementById(id);
         if (el) {
           el.removeAttribute("hidden");
         }
@@ -117,11 +213,11 @@ const gMainPaneOverlay = {
   setEventListener(aId, aEventType, aCallback) {
     document
       .getElementById(aId)
-      ?.addEventListener(aEventType, aCallback.bind(gMainPaneOverlay));
+      ?.addEventListener(aEventType, aCallback.bind(_gMainPaneOverlay));
   },
 
   async setDynamicThemeGroupValue() {
-    let radiogroup = document.getElementById("dynamicThemeRadioGroup");
+    const radiogroup = document.getElementById("dynamicThemeRadioGroup");
     radiogroup.disabled = true;
 
     radiogroup.value = Services.prefs.getIntPref("ui.systemUsesDarkTheme", -1);
diff --git a/waterfox/browser/components/preferences/content/preferences-general.xhtml b/waterfox/browser/components/preferences/content/preferences-general.xhtml
index 351f13e3de80..bbb719480ef6 100644
--- a/waterfox/browser/components/preferences/content/preferences-general.xhtml
+++ b/waterfox/browser/components/preferences/content/preferences-general.xhtml
@@ -3,23 +3,21 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml-stylesheet href="chrome://browser/content/overlays/tocbot.css" type="text/css"?>
 
 <overlay id="preferences-overlay" xmlns:html="http://www.w3.org/1999/xhtml"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
     <script>
         /* eslint-env mozilla/browser-window */
         /* globals gMainPaneOverlay */
+        Services.scriptloader.loadSubScript("chrome://browser/content/overlays/tocbot.js", this);
         Services.scriptloader.loadSubScript("chrome://browser/content/overlays/general.js", this);
-        gMainPaneOverlay.init();
+        _gMainPaneOverlay.init();
     </script>
     <richlistbox id="categories">
-        <richlistitem id="category-theme"
-            class="category"
-            data-l10n-id="category-theme"
-            data-l10n-attrs="tooltiptext"
-            value="paneTheme"
-            align="center">
-            <image class="category-icon"/>
+        <richlistitem id="category-theme" class="category" data-l10n-id="category-theme" data-l10n-attrs="tooltiptext"
+            value="paneTheme" align="center">
+            <image class="category-icon" />
             <label class="category-name" flex="1" data-l10n-id="pane-theme-title"></label>
         </richlistitem>
     </richlistbox>
@@ -124,6 +122,8 @@
             </radiogroup>
         </groupbox>
 #endif
+      <!-- TOC Placeholder -->
+      <html:nav class="toc" />
     </vbox>
 
     <!-- Browsing -->
diff --git a/waterfox/browser/components/preferences/content/preferences-other.xhtml b/waterfox/browser/components/preferences/content/preferences-other.xhtml
index 9cf16212423a..7088c2e3ca30 100644
--- a/waterfox/browser/components/preferences/content/preferences-other.xhtml
+++ b/waterfox/browser/components/preferences/content/preferences-other.xhtml
@@ -19,7 +19,7 @@
         /* eslint-env mozilla/browser-window */
         /* globals gPrivacyPaneOverlay */
         Services.scriptloader.loadSubScript("chrome://browser/content/overlays/privacy.js", this);
-        gPrivacyPaneOverlay.init();
+        _gPrivacyPaneOverlay.init();
     </script>
     <vbox id="mainPrefPane">
         <!-- WebRTC peer connection -->
@@ -67,5 +67,13 @@
                     preference="javascript.enabled" flex="1" />
             </hbox>
         </groupbox>
+
+        <!-- DNS -->
+        <groupbox id="dohBox">
+            <hbox id="obliviousDns" data-subcategory="doh" insertbefore="dohCategories">
+                <checkbox id="enableObliviousDns" class="tail-with-learn-more" data-l10n-id="enable-dooh"
+                    preference="network.trr.use_ohttp" flex="1" />
+            </hbox>
+        </groupbox>
     </vbox>
 </overlay>
diff --git a/waterfox/browser/components/preferences/content/preferences-theme.xhtml b/waterfox/browser/components/preferences/content/preferences-theme.xhtml
index 18d944bdf955..eb54a2882903 100644
--- a/waterfox/browser/components/preferences/content/preferences-theme.xhtml
+++ b/waterfox/browser/components/preferences/content/preferences-theme.xhtml
@@ -2,11 +2,11 @@
 
 <script>
     /* eslint-env mozilla/browser-window */
-    /* globals register_module gThemePane gotoPref */
+    /* globals register_module _gThemePane gotoPref */
     Services.scriptloader.loadSubScript("chrome://browser/content/overlays/theme.js", this);
 
     // Register the pane
-    register_module("paneTheme", gThemePane);
+    register_module("paneTheme", _gThemePane);
 
     // This ensure that we actually render the Theme page when refreshing on
     // about:preferences#theme. It is needed because the regular gotoPref in
@@ -22,418 +22,464 @@
 
 <html:template id="template-paneTheme">
     <hbox id="firefoxThemeCategory" class="subcategory" hidden="true" data-category="paneTheme">
-        <html:h1 style="-moz-box-flex: 1;" data-l10n-id="pane-theme-title" />
+        <!-- Theme -->
+        <html:h1 data-l10n-id="theme-header" />
     </hbox>
-
     <groupbox id="themeGroup" data-category="paneTheme" hidden="true">
-        <checkbox id="enableWaterfoxTheme" preference="userChrome.theme.enable" data-l10n-id="enable-waterfox-theme" />
         <hbox>
             <vbox id="waterfoxUserChromeCustomizations">
-                <!-- Tab Bar -->
-                <label>
-                    <html:h2 data-l10n-id="tab-bar-header" />
-                </label>
+                <!-- <checkbox id="enableWaterfoxTheme" preference="userChrome.theme.enable" data-l10n-id="enable-waterfox-theme" /> -->
                 <hbox>
-                    <checkbox id="autoHideTabs" preference="userChrome.autohide.tab" data-l10n-id="auto-hide-tabs" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideTabsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoBlurTabs" preference="userChrome.autohide.tab.blur"
-                        data-l10n-id="auto-blur-tabs" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoBlurTabsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoHideTabBar" preference="userChrome.autohide.tabbar"
-                        data-l10n-id="auto-hide-tabbar" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideTabBarImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerTabContent" preference="userChrome.centered.tab"
-                        data-l10n-id="center-tab-content" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerTabContentImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerTabLabel" preference="userChrome.centered.tab.label"
-                        data-l10n-id="center-tab-label" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerTabLabelImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="squareTabEdges" preference="userChrome.rounding.square_tab"
-                        data-l10n-id="square-tab-edges" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareTabEdgesImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="dragSpace" preference="userChrome.padding.drag_space" data-l10n-id="drag-space" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="dragSpaceImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="closeButtonHover" preference="userChrome.tab.close_button_at_hover"
-                        data-l10n-id="close-button-hover" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="closeButtonHoverImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- Nav Bar -->
-                <label>
-                    <html:h2 data-l10n-id="nav-bar-header" />
-                </label>
-
-                <hbox>
-                    <checkbox id="autoHideBack" preference="userChrome.autohide.back_button"
-                        data-l10n-id="auto-hide-back" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideBackImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoHideForward" preference="userChrome.autohide.forward_button"
-                        data-l10n-id="auto-hide-forward" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideForwardImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoHidePageAction" preference="userChrome.autohide.page_action"
-                        data-l10n-id="auto-hide-pageaction" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHidePageActionImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="hideNavBarIconBox" preference="userChrome.hidden.urlbar_iconbox"
-                        data-l10n-id="hide-urlbar-iconbox" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideNavBarIconBoxImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerNavBarText" preference="userChrome.centered.urlbar"
-                        data-l10n-id="center-navbar-text" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerNavBarTextImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="squareButtonEdges" preference="userChrome.rounding.square_button"
-                        data-l10n-id="square-button-edges" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareButtonEdgesImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <checkbox id="compactNavBarPopup" preference="userChrome.padding.urlView_expanding"
-                    data-l10n-id="compact-navbar-popup" />
-
-                <!-- Bookmarks Bar -->
-                <label>
-                    <html:h2 data-l10n-id="bookmark-header" />
-                </label>
-                <hbox>
-                    <checkbox id="autoHideBookmarkBar" preference="userChrome.autohide.bookmarkbar"
-                        data-l10n-id="auto-hide-bookmarkbar" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideBookmarkBarImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="centerBookmarkBarItems" preference="userChrome.centered.bookmarkbar"
-                        data-l10n-id="center-bookmarkbar-items" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="centerBookmarkBarItemsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="hideBookmbarkBarIcon" preference="userChrome.hidden.bookmarkbar_icon"
-                        data-l10n-id="hide-bookmarkbar-icon" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideBookmbarkBarIconImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="hideBookmarkBarLabel" preference="userChrome.hidden.bookmarkbar_label"
-                        data-l10n-id="hide-bookmarkbar-label" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideBookmarkBarLabelImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- Font -->
-                <label>
-                    <html:h2 data-l10n-id="font-header" />
-                </label>
-
-                <hbox>
-                    <checkbox id="monospaceFont" preference="userContent.page.monospace"
-                        data-l10n-id="monospace-font" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="monospaceFontImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="monospaceFontTheme" preference="userContent.theme.monospace"
-                        data-l10n-id="monospace-font-theme" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="monospaceFontThemeImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- Full Screen -->
-                <!-- <label>
-                    <html:h2 data-l10n-id="full-screen-header" />
-                </label> -->
-
-                <!-- Panels -->
-                <label>
-                    <html:h2 data-l10n-id="panels-header" />
-                </label>
-
-
-                <checkbox id="disablePanelAnimate" preference="userChrome.decoration.disable_panel_animate"
-                    data-l10n-id="disable-panel-animate" />
-
-                <hbox>
-                    <checkbox id="hideDisabledMenuItems" preference="userChrome.hidden.disabled_menu"
-                        data-l10n-id="hide-disabled-menuitems" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideDisabledMenuItemsImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <vbox>
-                        <checkbox id="squareMenuPanel" preference="userChrome.rounding.square_panel"
-                            data-l10n-id="square-menu-panel" />
-                        <checkbox id="squarePanelItem" preference="userChrome.rounding.square_panelitem"
-                            data-l10n-id="square-panel-item" />
-                    </vbox>
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareMenuPanelImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- MacOS uses native context menus, so we cannot modify them with userChrome. Moz listed allowing this as a WONTFIX. -->
-#ifndef XP_MACOSX
-                <hbox>
-                    <checkbox id="squareMenuPopup" preference="userChrome.rounding.square_menupopup"
-                        data-l10n-id="square-menu-popup" />
-
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareMenuPopupImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <checkbox id="squareMenuItem" preference="userChrome.rounding.square_menuitem"
-                    data-l10n-id="square-menu-item" />
-#endif
-
-                <hbox>
-                    <vbox>
-                        <checkbox id="squareField" preference="userChrome.rounding.square_field"
-                            data-l10n-id="square-field" />
-                        <checkbox id="squareCheckbox" preference="userChrome.rounding.square_checklabel"
-                            data-l10n-id="square-checkbox" />
-                    </vbox>
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="squareFieldImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-
-                <checkbox id="compactContextMenu" preference="userChrome.padding.menu_compact"
-                    data-l10n-id="compact-context-menu" />
-                <checkbox id="compactBookmarkMenu" preference="userChrome.padding.bookmark_menu.compact"
-                    data-l10n-id="compact-bookmark-menu" />
-                <checkbox id="compactPanelHeader" preference="userChrome.padding.panel_header"
-                    data-l10n-id="compact-panel-header" />
-
-                <hbox>
-                    <checkbox id="removePanelStrip" preference="userChrome.panel.remove_strip"
-                        data-l10n-id="remove-panel-strip" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="removePanelStripImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="fullPanelStrip" preference="userChrome.panel.full_width_separator"
-                        data-l10n-id="full-panel-strip" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="fullPanelStripImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- Sidebar -->
-                <label>
-                    <html:h2 data-l10n-id="sidebar-header" />
-                </label>
-                <hbox>
-                    <checkbox id="disableSidebarAnimate" preference="userChrome.decoration.disable_sidebar_animate"
-                        data-l10n-id="disable-sidebar-animate" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="disableSidebarAnimateImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="autoHideSidebar" preference="userChrome.autohide.sidebar"
-                        data-l10n-id="auto-hide-sidebar" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="autoHideSidebarImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <hbox>
-                    <checkbox id="hideSidebarHeader" preference="userChrome.hidden.sidebar_header"
-                        data-l10n-id="hide-sidebar-header" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="hideSidebarHeaderImage" class="info-popup" />
-                    </div>
-                </hbox>
-
-                <!-- Icons -->
-                <label>
-                    <html:h2 data-l10n-id="icons-header" />
-                </label>
-                <checkbox id="hideTabIcons" preference="userChrome.hidden.tab_icon" data-l10n-id="hide-tab-icons" />
-                <!-- <checkbox id="showMenuIcons" preference="userChrome.icon.menu.full" data-l10n-id="show-menu-icons" /> This does not do what one would expect, i.e. show/remove all icons -->
-#ifdef XP_MACOSX
-                <hbox>
-                    <checkbox id="showMacMenuIcons" preference="userChrome.icon.global_menu.mac"
-                        data-l10n-id="show-mac-menu-icons" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="showMacMenuIconsImage" class="info-popup" />
-                    </div>
-                </hbox>
-#endif
-
-                <!-- Media Player -->
-                <label>
-                    <html:h2 data-l10n-id="media-player-header" />
-                </label>
-                <hbox>
-                    <checkbox id="twolineMediaPlayer" preference="userContent.player.ui.twoline"
-                        data-l10n-id="twoline-media-player" />
-
-                    <div class="popup-container">
-                        <img class="preferences-info-button" />
-                        <img id="twolineMediaPlayerImage" class="info-popup" />
-                    </div>
+                    <menulist id="enableWaterfoxTheme" preference="browser.theme.enableWaterfoxCustomizations">
+                        <menupopup>
+                            <menuitem data-l10n-id="enable-waterfox-theme-0" value="0" />
+                            <menuitem data-l10n-id="enable-waterfox-theme-1" value="1" />
+                            <menuitem data-l10n-id="enable-waterfox-theme-2" value="2" />
+                        </menupopup>
+                    </menulist>
                 </hbox>
             </vbox>
-            <vbox id="waterfoxUserChromePresets">
-                <button id="refreshWaterfoxCustomTheme" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="theme-refresh" />
-                <html:h2 style="-moz-box-flex: 1;" class="presets-header" data-l10n-id="preset-title" />
-                <button id="waterfoxDefaults" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="waterfox-defaults" />
-                <button id="smoothCorners" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="smooth-corners" />
-                <button id="squareCorners" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="square-corners" />
-                <button id="autohideAll" is="highlightable-button" class="themepage-button check-theme-page-controlled"
-                    data-l10n-id="autohide-all" />
-                <button id="autohideNone" is="highlightable-button" class="themepage-button check-theme-page-controlled"
-                    data-l10n-id="autohide-none" />
-                <button id="centerAll" is="highlightable-button" class="themepage-button check-theme-page-controlled"
-                    data-l10n-id="center-all" />
-                <button id="centerNone" is="highlightable-button" class="themepage-button check-theme-page-controlled"
-                    data-l10n-id="center-none" />
-                <button id="reducePadding" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="reduce-padding" />
-                <button id="increasePadding" is="highlightable-button"
-                    class="themepage-button check-theme-page-controlled" data-l10n-id="increase-padding" />
+            <vbox id="waterfoxUserChromePresetsWrapper" style="height: 0; z-index: 1;">
+                <vbox id="waterfoxUserChromePresets">
+                    <html:h2 style="-moz-box-flex: 1;" class="presets-header" data-l10n-id="preset-title" />
+                    <button id="waterfoxDefaults" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="waterfox-defaults" />
+                    <button id="leptonStyle" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="lepton-style" />
+                    <button id="protonStyle" is="highlightable-button"
+                        class="themepage-button check-theme-page-controlled" data-l10n-id="proton-style" />
+                </vbox>
             </vbox>
         </hbox>
+    </groupbox>
+    <groupbox id="themeGroup" data-category="paneTheme" hidden="true">
+        <label>
+            <!-- Appearance -->
+            <html:h2 data-l10n-id="appearance-header" />
+        </label>
+
+        <hbox>
+            <menulist id="accentColor">
+                <menupopup>
+                    <menuitem data-l10n-id="enable-default-accent-color" value="0" />
+                    <menuitem data-l10n-id="enable-cyan-accent-color" value="1" />
+                    <menuitem data-l10n-id="enable-system-accent-color" value="2" />
+                </menupopup>
+            </menulist>
+        </hbox>
+
+        <checkbox id="enablePanelTransparency" preference="userChrome.theme.transparent.panel"
+        data-l10n-id="enable-panel-transparency" />
+
+        <checkbox id="enableMenuTransparency" preference="userChrome.theme.transparent.menu"
+        data-l10n-id="enable-menu-transparency" />
+    </groupbox>
+    <groupbox id="themeIconGroup"  data-category="paneTheme" hidden="true">
+        <!-- Icons -->
+        <label>
+            <html:h2 data-l10n-id="icons-header" />
+        </label>
+        <checkbox id="hideAllIcons" preference="userChrome.icon.disabled" data-l10n-id="hide-all-icons" />
+        <checkbox id="hideTabIcons" preference="userChrome.hidden.tab_icon" data-l10n-id="hide-tab-icons" />
+        <!-- <checkbox id="showMenuIcons" preference="userChrome.icon.menu.full" data-l10n-id="show-menu-icons" /> This does not do what one would expect, i.e. show/remove all icons -->
+#ifdef XP_MACOSX
+        <hbox>
+            <checkbox id="showMacMenuIcons" preference="userChrome.icon.global_menu.mac"
+                data-l10n-id="show-mac-menu-icons" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="showMacMenuIconsImage" class="info-popup" />
+            </div>
+        </hbox>
+#endif
+    </groupbox>
+    <groupbox id="themeFontGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="font-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="monospaceFont" preference="userContent.page.monospace"
+                data-l10n-id="monospace-font" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="monospaceFontImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="monospaceFontTheme" preference="userChrome.theme.monospace"
+                data-l10n-id="monospace-font-theme" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="monospaceFontThemeImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="themeAnimationGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <!-- Animation-->
+            <html:h2 data-l10n-id="animation-header" />
+        </label>
+
+        <!-- Panels -->
+        <checkbox id="disablePanelAnimate" preference="userChrome.decoration.disable_panel_animate"
+            data-l10n-id="disable-panel-animate" />
+
+        <!-- Sidebar -->
+        <checkbox id="disableSidebarAnimate" preference="userChrome.decoration.disable_sidebar_animate"
+            data-l10n-id="disable-sidebar-animate" />
+    </groupbox>
 
 
+    <hbox id="firefoxInterfaceComponentCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Interface Components -->
+        <html:h1 data-l10n-id="interface-component-header"/>
+    </hbox>
+    <groupbox id="tabbarComponentGroup"  data-category="paneTheme" hidden="true">
+        <!-- Tab Bar -->
+        <label>
+            <html:h2 data-l10n-id="tab-bar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="tabContextLine" preference="userChrome.tab.photon_like_contextline"
+                data-l10n-id="tab-context-line" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="contextLineImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="dragSpace" preference="userChrome.padding.drag_space" data-l10n-id="drag-space" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="dragSpaceImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="closeButtonHover" preference="userChrome.tab.close_button_at_hover"
+                data-l10n-id="close-button-hover" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="closeButtonHoverImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="navbarComponentGroup"  data-category="paneTheme" hidden="true">
+        <!-- Nav Bar -->
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+
+        <checkbox id="compactNavBarPopup" preference="userChrome.padding.urlView_expanding"
+            data-l10n-id="compact-navbar-popup" />
+
+        <!-- Full Screen -->
+        <!-- <label>
+            <html:h2 data-l10n-id="full-screen-header" />
+        </label> -->
+    </groupbox>
+    <groupbox id="pannelComponentGroup"  data-category="paneTheme" hidden="true">
+        <!-- Panels -->
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
+
+        <checkbox id="compactContextMenu" preference="userChrome.padding.menu_compact"
+            data-l10n-id="compact-context-menu" />
+        <checkbox id="compactBookmarkMenu" preference="userChrome.padding.bookmark_menu.compact"
+            data-l10n-id="compact-bookmark-menu" />
+        <checkbox id="compactPanelHeader" preference="userChrome.padding.panel_header"
+            data-l10n-id="compact-panel-header" />
+
+        <hbox>
+            <checkbox id="removePanelStrip" preference="userChrome.panel.remove_strip"
+                data-l10n-id="remove-panel-strip" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="removePanelStripImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="fullPanelStrip" preference="userChrome.panel.full_width_separator"
+                data-l10n-id="full-panel-strip" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="fullPanelStripImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+
+    <hbox id="firefoxRoundingCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Rounding -->
+        <html:h1 data-l10n-id="rounding-header"/>
+    </hbox>
+    <groupbox id="roundingTabbarGroup"  data-category="paneTheme" hidden="true">
+        <hbox>
+            <checkbox id="squareTabCorners" preference="userChrome.tab.squareTabCorners"
+                data-l10n-id="square-tab-edges" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareTabEdgesImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="roundingNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+        <hbox>
+            <checkbox id="squareButtonEdges" preference="userChrome.rounding.square_button"
+                data-l10n-id="square-button-edges" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareButtonEdgesImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="roundingPannelGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="squareMenuPanel" preference="userChrome.rounding.square_panel"
+                data-l10n-id="square-menu-panel" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareMenuPanelImage" class="info-popup" />
+            </div>
+        </hbox>
+        <checkbox id="squarePanelItem" preference="userChrome.rounding.square_panelitem"
+            data-l10n-id="square-panel-item" />
+
+        <!-- MacOS uses native context menus, so we cannot modify them with userChrome. Moz listed allowing this as a WONTFIX. -->
+#ifndef XP_MACOSX
+        <hbox>
+            <checkbox id="squareMenuPopup" preference="userChrome.rounding.square_menupopup"
+                data-l10n-id="square-menu-popup" />
+
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareMenuPopupImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <checkbox id="squareMenuItem" preference="userChrome.rounding.square_menuitem"
+            data-l10n-id="square-menu-item" />
+#endif
+
+        <hbox>
+            <checkbox id="squareField" preference="userChrome.rounding.square_field"
+                data-l10n-id="square-field" />
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="squareFieldImage" class="info-popup" />
+            </div>
+        </hbox>
+        <checkbox id="squareCheckbox" preference="userChrome.rounding.square_checklabel"
+            data-l10n-id="square-checkbox" />
+    </groupbox>
+
+
+    <hbox id="firefoxAutohideCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Auto Hide & Hidden -->
+        <html:h1 data-l10n-id="autohide-hidden-header"/>
+    </hbox>
+    <groupbox id="autohideTabbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="tab-bar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="autoHideTabs" preference="userChrome.autohide.tab" data-l10n-id="auto-hide-tabs" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideTabsImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <vbox class="indent">
+            <hbox>
+                <checkbox id="autoBlurTabs" preference="userChrome.autohide.tab.blur"
+                    data-l10n-id="auto-blur-tabs" />
+
+                <div class="popup-container">
+                    <img class="preferences-info-button" />
+                    <img id="autoBlurTabsImage" class="info-popup" />
+                </div>
+            </hbox>
+        </vbox>
+
+        <checkbox id="autoHideTabBar" preference="userChrome.autohide.tabbar" data-l10n-id="auto-hide-tabbar" />
+    </groupbox>
+    <groupbox id="autohideNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="autoHideBack" preference="userChrome.autohide.back_button"
+                data-l10n-id="auto-hide-back" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideBackImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="autoHideForward" preference="userChrome.autohide.forward_button"
+                data-l10n-id="auto-hide-forward" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideForwardImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <checkbox id="autoHidePageAction" preference="userChrome.autohide.page_action"
+            data-l10n-id="auto-hide-pageaction" />
+
+        <hbox>
+            <checkbox id="hideNavBarIconBox" preference="userChrome.hidden.urlbar_iconbox"
+                data-l10n-id="hide-urlbar-iconbox" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideNavBarIconBoxImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohideBookmarkbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="bookmark-header" />
+        </label>
+
+        <checkbox id="autoHideBookmarkBar" preference="userChrome.autohide.bookmarkbar"
+            data-l10n-id="auto-hide-bookmarkbar" />
+
+        <hbox>
+            <checkbox id="hideBookmbarkBarIcon" preference="userChrome.hidden.bookmarkbar_icon"
+                data-l10n-id="hide-bookmarkbar-icon" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideBookmbarkBarIconImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="hideBookmarkBarLabel" preference="userChrome.hidden.bookmarkbar_label"
+                data-l10n-id="hide-bookmarkbar-label" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideBookmarkBarLabelImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohidePannelGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="panels-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="hideDisabledMenuItems" preference="userChrome.hidden.disabled_menu"
+                data-l10n-id="hide-disabled-menuitems" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideDisabledMenuItemsImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+    <groupbox id="autohideSidebarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="sidebar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="autoHideSidebar" preference="userChrome.autohide.sidebar"
+                data-l10n-id="auto-hide-sidebar" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="autoHideSidebarImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <hbox>
+            <checkbox id="hideSidebarHeader" preference="userChrome.hidden.sidebar_header"
+                data-l10n-id="hide-sidebar-header" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="hideSidebarHeaderImage" class="info-popup" />
+            </div>
+        </hbox>
+    </groupbox>
+
+    <hbox id="firefoxCenterCategory" class="subcategory" hidden="true" data-category="paneTheme">
+        <!-- Center -->
+        <html:h1 data-l10n-id="center-header"/>
+    </hbox>
+    <groupbox id="centerTabbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="tab-bar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="centerTabContent" preference="userChrome.centered.tab"
+                data-l10n-id="center-tab-content" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="centerTabContentImage" class="info-popup" />
+            </div>
+        </hbox>
+
+        <vbox class="indent">
+            <hbox>
+                <checkbox id="centerTabLabel" preference="userChrome.centered.tab.label"
+                    data-l10n-id="center-tab-label" />
+
+                <div class="popup-container">
+                    <img class="preferences-info-button" />
+                    <img id="centerTabLabelImage" class="info-popup" />
+                </div>
+            </hbox>
+        </vbox>
+    </groupbox>
+    <groupbox id="centerNavbarGroup"  data-category="paneTheme" hidden="true">
+        <label>
+            <html:h2 data-l10n-id="nav-bar-header" />
+        </label>
+
+        <hbox>
+            <checkbox id="centerNavBarText" preference="userChrome.centered.urlbar"
+                data-l10n-id="center-navbar-text" />
+
+            <div class="popup-container">
+                <img class="preferences-info-button" />
+                <img id="centerNavBarTextImage" class="info-popup" />
+            </div>
+        </hbox>
     </groupbox>
 </html:template>
diff --git a/waterfox/browser/components/preferences/content/privacy.js b/waterfox/browser/components/preferences/content/privacy.js
index 6bdc313a8c28..c63689e95a29 100644
--- a/waterfox/browser/components/preferences/content/privacy.js
+++ b/waterfox/browser/components/preferences/content/privacy.js
@@ -1,12 +1,4 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* eslint-env mozilla/browser-window */
-/* globals Preferences setEventListener */
-"use strict";
-
-const gPrivacyPaneOverlay = {
+const _gPrivacyPaneOverlay = {
   init() {
     // Ensure load images automatically checkbox value is correct.
     this.initLoadImages();
@@ -27,29 +19,34 @@ const gPrivacyPaneOverlay = {
 
   // Update privacy item default values
   async updatePrivacyDefaults() {
-    let webRtc = document.getElementById("enableWebRTCP2P");
+    const webRtc = document.getElementById("enableWebRTCP2P");
     webRtc.checked = Preferences.get(webRtc.getAttribute("preference")).value;
 
-    let refHeader = document.getElementById("doNotsendSecureXSiteReferrer");
+    const refHeader = document.getElementById("doNotsendSecureXSiteReferrer");
     refHeader.value = Preferences.get(
       refHeader.getAttribute("preference")
     ).value;
 
-    let imagePermissions = document.getElementById("loadImages");
+    const imagePermissions = document.getElementById("loadImages");
     imagePermissions.checked = !!Preferences.get("permissions.default.image")
       .value;
 
-    let javascriptPermissions = document.getElementById("enableJavaScript");
+    const javascriptPermissions = document.getElementById("enableJavaScript");
     javascriptPermissions.checked = Preferences.get(
       javascriptPermissions.getAttribute("preference")
     ).value;
+
+    const obliviousDns = document.getElementById("enableObliviousDns");
+    obliviousDns.checked = Preferences.get(
+      obliviousDns.getAttribute("preference")
+    ).value;
   },
 
   /**
    * Selects the right item of the Load Images Automatically checkbox.
    */
   initLoadImages() {
-    let liaCheckbox = document.getElementById("loadImages");
+    const liaCheckbox = document.getElementById("loadImages");
     // If it doesn't exist yet, try again.
     if (!liaCheckbox) {
       setTimeout(() => {
@@ -66,9 +63,9 @@ const gPrivacyPaneOverlay = {
   },
 
   loadImagesReadPref() {
-    let enabledPref = Preferences.get("permissions.default.image");
-    let liaCheckbox = document.getElementById("loadImages");
-    if (enabledPref.value) {
+    const enabledPref = Preferences.get("permissions.default.image");
+    const liaCheckbox = document.getElementById("loadImages");
+    if (enabledPref.value === 1) {
       liaCheckbox.checked = true;
     } else {
       liaCheckbox.checked = false;
@@ -76,7 +73,7 @@ const gPrivacyPaneOverlay = {
   },
 
   syncToLoadImagesPref() {
-    let value = document.getElementById("loadImages").checked ? 1 : 0;
+    const value = document.getElementById("loadImages").checked ? 1 : 2;
     Services.prefs.setIntPref("permissions.default.image", value);
   },
 };
diff --git a/waterfox/browser/components/preferences/content/theme.js b/waterfox/browser/components/preferences/content/theme.js
index 9557be1c1445..e9bec1b30ca1 100644
--- a/waterfox/browser/components/preferences/content/theme.js
+++ b/waterfox/browser/components/preferences/content/theme.js
@@ -2,10 +2,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* eslint-env mozilla/browser-window */
-"use strict";
-
-const { PrefUtils } = ChromeUtils.import("resource:///modules/PrefUtils.jsm");
+const { PrefUtils } = ChromeUtils.importESModule(
+  "resource:///modules/PrefUtils.sys.mjs"
+);
 
 XPCOMUtils.defineLazyServiceGetter(
   this,
@@ -14,225 +13,299 @@ XPCOMUtils.defineLazyServiceGetter(
   "nsIStyleSheetService"
 );
 
-var gThemePane = {
-  WATERFOX_THEME_PREF: "userChrome.theme.enable",
+const _gThemePane = {
+  WATERFOX_THEME_PREF: "browser.theme.enableWaterfoxCustomizations",
+  WATERFOX_CUSTOMIZATIONS_PREF: "browser.theme.enableWaterfoxCustomizations",
+  WATERFOX_DEFAULT_THEMES: [
+    "default-theme@mozilla.org",
+    "firefox-compact-light@mozilla.org",
+    "firefox-compact-dark@mozilla.org",
+    "firefox-alpenglow@mozilla.org",
+  ],
 
   _prefObservers: [],
 
   get preferences() {
     return [
-      // Waterfox Customizations
-      { id: "userChrome.theme.enable", type: "bool" },
+      // == Theme ==============================================================
+      { id: "browser.theme.enableWaterfoxCustomizations", type: "int" },
 
+      // Appearance
+      { id: "userChrome.theme.proton_color.dark_blue_accent", type: "bool" },
+      { id: "userContent.page.proton_color.dark_blue_accent", type: "bool" },
+
+      { id: "userContent.page.proton_color.system_accent", type: "bool" },
+      { id: "widget.non-native-theme.use-theme-accent", type: "bool" },
+
+      { id: "userChrome.theme.transparent.panel", type: "bool" },
+      { id: "userChrome.theme.transparent.menu", type: "bool" },
+
+      // Icons
+      { id: "userChrome.icon.disabled", type: "bool" },
+      { id: "userChrome.hidden.tab_icon", type: "bool" },
+      { id: "userChrome.icon.menu.full", type: "bool" },
+      { id: "userChrome.icon.global_menu.mac", type: "bool" },
+
+      // Fonts
+      { id: "userContent.page.monospace", type: "bool" },
+      { id: "userChrome.theme.monospace", type: "bool" },
+
+      // Animations
+      { id: "userChrome.decoration.disable_panel_animate", type: "bool" },
+      { id: "userChrome.decoration.disable_sidebar_animate", type: "bool" },
+
+      // == Interface Components ===============================================
       // Tab Bar
-      { id: "userChrome.autohide.tab", type: "bool" },
-      { id: "userChrome.autohide.tab.blur", type: "bool" },
-      { id: "userChrome.autohide.tabbar", type: "bool" },
-      { id: "userChrome.centered.tab", type: "bool" },
-      { id: "userChrome.centered.tab.label", type: "bool" },
-      { id: "userChrome.rounding.square_tab", type: "bool" },
+      { id: "userChrome.tab.photon_like_contextline", type: "bool" },
       { id: "userChrome.padding.drag_space", type: "bool" },
       { id: "userChrome.tab.close_button_at_hover", type: "bool" },
 
       // Nav Bar
-      { id: "userChrome.autohide.back_button", type: "bool" },
-      { id: "userChrome.autohide.forward_button", type: "bool" },
-      { id: "userChrome.autohide.page_action", type: "bool" },
-      { id: "userChrome.hidden.urlbar_iconbox", type: "bool" },
-      { id: "userChrome.centered.urlbar", type: "bool" },
-      { id: "userChrome.rounding.square_button", type: "bool" },
       { id: "userChrome.padding.urlView_expanding", type: "bool" },
 
-      // Bookmarks Bar
-      { id: "userChrome.autohide.bookmarkbar", type: "bool" },
-      { id: "userChrome.centered.bookmarkbar", type: "bool" },
-      { id: "userChrome.hidden.bookmarkbar_icon", type: "bool" },
-      { id: "userChrome.hidden.bookmarkbar_label", type: "bool" },
-
       // Panels
-      { id: "userChrome.decoration.disable_panel_animate", type: "bool" },
-      { id: "userChrome.hidden.disabled_menu", type: "bool" },
-      { id: "userChrome.rounding.square_panel", type: "bool" },
-      { id: "userChrome.rounding.square_panelitem", type: "bool" },
-      { id: "userChrome.rounding.square_menupopup", type: "bool" },
-      { id: "userChrome.rounding.square_menuitem", type: "bool" },
-      { id: "userChrome.rounding.square_field", type: "bool" },
-      { id: "userChrome.rounding.square_checklabel", type: "bool" },
       { id: "userChrome.padding.menu_compact", type: "bool" },
       { id: "userChrome.padding.bookmark_menu.compact", type: "bool" },
       { id: "userChrome.padding.panel_header", type: "bool" },
       { id: "userChrome.panel.remove_strip", type: "bool" },
       { id: "userChrome.panel.full_width_separator", type: "bool" },
 
+      // == Rounding ===========================================================
+      // Tab Bar
+      { id: "userChrome.rounding.square_tab", type: "bool" },
+      { id: "userChrome.tab.bottom_rounded_corner", type: "bool" },
+      { id: "userChrome.tab.squareTabCorners", type: "bool" },
+
+      // Nav Bar
+      { id: "userChrome.rounding.square_button", type: "bool" },
+
+      // Panels
+      { id: "userChrome.rounding.square_panel", type: "bool" },
+      { id: "userChrome.rounding.square_panelitem", type: "bool" },
+      { id: "userChrome.rounding.square_menupopup", type: "bool" },
+      { id: "userChrome.rounding.square_menuitem", type: "bool" },
+      { id: "userChrome.rounding.square_field", type: "bool" },
+      { id: "userChrome.rounding.square_checklabel", type: "bool" },
+
+      // == Autohide & Hidden ==================================================
+      // Tab Bar
+      { id: "userChrome.autohide.tab", type: "bool" },
+      { id: "userChrome.autohide.tab.blur", type: "bool" },
+      { id: "userChrome.autohide.tabbar", type: "bool" },
+
+      // Nav Bar
+      { id: "userChrome.autohide.back_button", type: "bool" },
+      { id: "userChrome.autohide.forward_button", type: "bool" },
+      { id: "userChrome.autohide.page_action", type: "bool" },
+      { id: "userChrome.hidden.urlbar_iconbox", type: "bool" },
+
+      // Bookmarks Bar
+      { id: "userChrome.autohide.bookmarkbar", type: "bool" },
+      { id: "userChrome.hidden.bookmarkbar_icon", type: "bool" },
+      { id: "userChrome.hidden.bookmarkbar_label", type: "bool" },
+
+      // Panels
+      { id: "userChrome.hidden.disabled_menu", type: "bool" },
+
       // Sidebar
-      { id: "userChrome.decoration.disable_sidebar_animate", type: "bool" },
       { id: "userChrome.autohide.sidebar", type: "bool" },
       { id: "userChrome.hidden.sidebar_header", type: "bool" },
 
-      // Icons
-      { id: "userChrome.hidden.tab_icon", type: "bool" },
-      { id: "userChrome.icon.menu.full", type: "bool" },
-      { id: "userChrome.icon.global_menu.mac", type: "bool" },
+      // == Center =============================================================
+      // Tab Bar
+      { id: "userChrome.centered.tab", type: "bool" },
+      { id: "userChrome.centered.tab.label", type: "bool" },
 
-      // Media Player
-      { id: "userContent.player.ui.twoline", type: "bool" },
+      // Nav Bar
+      { id: "userChrome.centered.urlbar", type: "bool" },
+    ];
+  },
 
-      // Font
-      { id: "userContent.page.monospace", type: "bool" },
-      { id: "userContent.theme.monospace", type: "bool" },
+  get nestedPrefs() {
+    return [
+      {
+        id: "autoBlurTabs",
+        pref: "userChrome.autohide.tab",
+      },
+      {
+        id: "centerTabLabel",
+        pref: "userChrome.centered.tab",
+      },
     ];
   },
 
   get presets() {
     return [
       {
-        id: "smoothCorners",
-        prefs: [
-          { id: "userChrome.rounding.square_tab", value: false },
-          { id: "userChrome.rounding.square_button", value: false },
-          { id: "userChrome.rounding.square_panel", value: false },
-          { id: "userChrome.rounding.square_panelitem", value: false },
-          { id: "userChrome.rounding.square_menupopup", value: false },
-          { id: "userChrome.rounding.square_menuitem", value: false },
-          { id: "userChrome.rounding.square_field", value: false },
-          { id: "userChrome.rounding.square_checklabel", value: false },
-        ],
-      },
-      {
-        id: "squareCorners",
-        prefs: [
+        id: "waterfoxDefaults",
+        on: [
+          { id: "userChrome.tab.connect_to_window", value: true },
+          { id: "userChrome.tab.color_like_toolbar", value: true },
+
+          { id: "userChrome.tab.lepton_like_padding", value: false },
+          { id: "userChrome.tab.photon_like_padding", value: true },
+
+          { id: "userChrome.tab.dynamic_separator", value: false },
+          { id: "userChrome.tab.static_separator", value: true },
+          {
+            id: "userChrome.tab.static_separator.selected_accent",
+            value: false,
+          },
+          { id: "userChrome.tab.bar_separator", value: false },
+
+          { id: "userChrome.tab.newtab_button_like_tab", value: false },
+          { id: "userChrome.tab.newtab_button_smaller", value: true },
+          { id: "userChrome.tab.newtab_button_proton", value: false },
+
+          { id: "userChrome.icon.panel_full", value: false },
+          { id: "userChrome.icon.panel_photon", value: true },
+
+          { id: "userChrome.tab.box_shadow", value: false },
+          { id: "userChrome.tab.bottom_rounded_corner", value: false },
+
+          { id: "userChrome.tab.photon_like_contextline", value: true },
           { id: "userChrome.rounding.square_tab", value: true },
-          { id: "userChrome.rounding.square_button", value: true },
-          { id: "userChrome.rounding.square_panel", value: true },
-          { id: "userChrome.rounding.square_panelitem", value: true },
-          { id: "userChrome.rounding.square_menupopup", value: true },
-          { id: "userChrome.rounding.square_menuitem", value: true },
-          { id: "userChrome.rounding.square_field", value: true },
-          { id: "userChrome.rounding.square_checklabel", value: true },
         ],
       },
       {
-        id: "autohideAll",
-        prefs: [
-          { id: "userChrome.autohide.tab", value: true },
-          { id: "userChrome.autohide.tab.blur", value: true },
-          { id: "userChrome.autohide.tabbar", value: true },
-          { id: "userChrome.autohide.back_button", value: true },
-          { id: "userChrome.autohide.forward_button", value: true },
-          { id: "userChrome.autohide.page_action", value: true },
-          { id: "userChrome.autohide.bookmarkbar", value: true },
-          { id: "userChrome.autohide.sidebar", value: true },
+        id: "leptonStyle",
+        on: [
+          { id: "userChrome.tab.connect_to_window", value: true },
+          { id: "userChrome.tab.color_like_toolbar", value: true },
+
+          { id: "userChrome.tab.lepton_like_padding", value: true },
+          { id: "userChrome.tab.photon_like_padding", value: false },
+
+          { id: "userChrome.tab.dynamic_separator", value: true },
+          { id: "userChrome.tab.static_separator", value: false },
+          {
+            id: "userChrome.tab.static_separator.selected_accent",
+            value: false,
+          },
+          { id: "userChrome.tab.bar_separator", value: false },
+
+          { id: "userChrome.tab.newtab_button_like_tab", value: true },
+          { id: "userChrome.tab.newtab_button_smaller", value: false },
+          { id: "userChrome.tab.newtab_button_proton", value: false },
+
+          { id: "userChrome.icon.panel_full", value: true },
+          { id: "userChrome.icon.panel_photon", value: false },
+
+          { id: "userChrome.tab.box_shadow", value: true },
+          { id: "userChrome.tab.bottom_rounded_corner", value: true },
+
+          { id: "userChrome.tab.photon_like_contextline", value: false },
+          { id: "userChrome.rounding.square_tab", value: false },
         ],
       },
       {
-        id: "autohideNone",
-        prefs: [
-          { id: "userChrome.autohide.tab", value: false },
-          { id: "userChrome.autohide.tab.blur", value: false },
-          { id: "userChrome.autohide.tabbar", value: false },
-          { id: "userChrome.autohide.back_button", value: false },
-          { id: "userChrome.autohide.forward_button", value: false },
-          { id: "userChrome.autohide.page_action", value: false },
-          { id: "userChrome.autohide.bookmarkbar", value: false },
-          { id: "userChrome.autohide.sidebar", value: false },
-        ],
-      },
-      {
-        id: "centerAll",
-        prefs: [
-          { id: "userChrome.centered.tab", value: true },
-          { id: "userChrome.centered.tab.label", value: true },
-          { id: "userChrome.centered.urlbar", value: true },
-          { id: "userChrome.centered.bookmarkbar", value: true },
-        ],
-      },
-      {
-        id: "centerNone",
-        prefs: [
-          { id: "userChrome.centered.tab", value: false },
-          { id: "userChrome.centered.tab.label", value: false },
-          { id: "userChrome.centered.urlbar", value: false },
-          { id: "userChrome.centered.bookmarkbar", value: false },
-        ],
-      },
-      {
-        id: "reducePadding",
-        prefs: [
-          { id: "userChrome.padding.drag_space", value: false },
-          { id: "userChrome.padding.urlView_expanding", value: false },
-          { id: "userChrome.padding.menu_compact", value: false },
-          { id: "userChrome.padding.bookmark_menu.compact", value: false },
-          { id: "userChrome.padding.panel_header", value: false },
-        ],
-      },
-      {
-        id: "increasePadding",
-        prefs: [
-          { id: "userChrome.padding.drag_space", value: true },
-          { id: "userChrome.padding.urlView_expanding", value: true },
-          { id: "userChrome.padding.menu_compact", value: true },
-          { id: "userChrome.padding.bookmark_menu.compact", value: true },
-          { id: "userChrome.padding.panel_header", value: true },
+        id: "protonStyle",
+        on: [
+          { id: "userChrome.tab.connect_to_window", value: false },
+          { id: "userChrome.tab.color_like_toolbar", value: false },
+
+          { id: "userChrome.tab.lepton_like_padding", value: false },
+          { id: "userChrome.tab.photon_like_padding", value: false },
+
+          { id: "userChrome.tab.dynamic_separator", value: true },
+          { id: "userChrome.tab.static_separator", value: false },
+          {
+            id: "userChrome.tab.static_separator.selected_accent",
+            value: false,
+          },
+          { id: "userChrome.tab.bar_separator", value: false },
+
+          { id: "userChrome.tab.newtab_button_like_tab", value: false },
+          { id: "userChrome.tab.newtab_button_smaller", value: false },
+          { id: "userChrome.tab.newtab_button_proton", value: true },
+
+          { id: "userChrome.icon.panel_full", value: true },
+          { id: "userChrome.icon.panel_photon", value: false },
+
+          { id: "userChrome.tab.box_shadow", value: false },
+          { id: "userChrome.tab.bottom_rounded_corner", value: false },
+
+          { id: "userChrome.tab.photon_like_contextline", value: false },
+          { id: "userChrome.rounding.square_tab", value: false },
         ],
       },
     ];
   },
 
+  get accentPrefs() {
+    return {
+      0: [
+        { id: "userChrome.theme.proton_color.dark_blue_accent", value: true },
+        { id: "userContent.page.proton_color.dark_blue_accent", value: true },
+
+        { id: "userContent.page.proton_color.system_accent", value: false },
+        { id: "widget.non-native-theme.use-theme-accent", value: false },
+      ],
+
+      1: [
+        { id: "userChrome.theme.proton_color.dark_blue_accent", value: false },
+        { id: "userContent.page.proton_color.dark_blue_accent", value: false },
+
+        { id: "userContent.page.proton_color.system_accent", value: false },
+        { id: "widget.non-native-theme.use-theme-accent", value: false },
+      ],
+
+      2: [
+        { id: "userChrome.theme.proton_color.dark_blue_accent", value: false },
+        { id: "userContent.page.proton_color.dark_blue_accent", value: false },
+
+        { id: "userContent.page.proton_color.system_accent", value: true },
+        { id: "widget.non-native-theme.use-theme-accent", value: true },
+      ],
+    };
+  },
+
   init() {
     // Initialize prefs
     window.Preferences.addAll(this.preferences);
-    const userChromeEnabled = PrefUtils.get(this.WATERFOX_THEME_PREF);
+    const _userChromeEnabled = PrefUtils.get(this.WATERFOX_THEME_PREF);
+    for (const pref of this.preferences) {
+      this._prefObservers.push(
+        PrefUtils.addObserver(pref.id, (_) => {
+          this.refreshTheme();
+        })
+      );
+    }
 
     // Init presets
-    for (let preset of this.presets) {
-      let button = document.getElementById(preset.id);
+    for (const preset of this.presets) {
+      const button = document.getElementById(preset.id);
       if (button) {
-        button.addEventListener("click", () => {
-          for (let pref of preset.prefs) {
+        button.addEventListener("click", (_event) => {
+          for (const pref of preset.on) {
             PrefUtils.set(pref.id, pref.value);
           }
-          this.refreshTheme();
         });
       }
     }
 
     // Init default button
-    let defaultButton = document.getElementById("waterfoxDefaults");
+    const defaultButton = document.getElementById("waterfoxDefaults");
     if (defaultButton) {
       defaultButton.addEventListener("click", this);
     }
 
-    // Init refresh button
-    let refreshButton = document.getElementById("refreshWaterfoxCustomTheme");
-    if (refreshButton) {
-      refreshButton.addEventListener("click", this);
-    }
-
     // Init popups
-    let popups = document.getElementsByClassName("popup-container");
-    for (let popup of popups) {
+    const popups = document.getElementsByClassName("popup-container");
+    for (const popup of popups) {
       popup.addEventListener("mouseover", this);
       popup.addEventListener("mouseout", this);
     }
 
-    // Init theme customizations
-    let waterfoxCustomizations = document.getElementById(
-      "waterfoxUserChromeCustomizations"
-    );
-    if (waterfoxCustomizations) {
-      let presetBox = document.getElementById("waterfoxUserChromePresets");
-      presetBox.hidden = !userChromeEnabled;
-      let themeGroup = document.getElementById(
-        "waterfoxUserChromeCustomizations"
-      );
-      themeGroup.hidden = !userChromeEnabled;
+    // Init AccentColor
+    this.initAccentColor();
 
-      this._prefObservers.push(
-        PrefUtils.addObserver(this.WATERFOX_THEME_PREF, isEnabled => {
-          presetBox.hidden = !isEnabled;
-          themeGroup.hidden = !isEnabled;
-        })
-      );
+    // Init Tab Rounding
+    this.initTabRounding();
+
+    // Init Nested Prefs
+    for (const el of this.nestedPrefs) {
+      this.initNestedPrefs(el.id, el.pref);
     }
 
     // Register unload listener
@@ -241,7 +314,7 @@ var gThemePane = {
 
   destroy() {
     window.removeEventListener("unload", this);
-    for (let obs of this._prefObservers) {
+    for (const obs of this._prefObservers) {
       PrefUtils.removeObserver(obs);
     }
   },
@@ -255,11 +328,8 @@ var gThemePane = {
         break;
       case "click":
         switch (event.target.id) {
-          case "refreshWaterfoxCustomTheme":
-            this.refreshTheme();
-            break;
           case "waterfoxDefaults":
-            this.preferences.map(pref => {
+            this.preferences.map((pref) => {
               Services.prefs.clearUserPref(pref.id);
             });
             this.refreshTheme();
@@ -272,24 +342,105 @@ var gThemePane = {
     }
   },
 
-  refreshTheme() {
-    const userChromeSheet = "chrome://browser/skin/userChrome.css";
-    const userContentSheet = "chrome://browser/skin/userContent.css";
+  async refreshTheme() {
+    // Only refresh theme if Waterfox customizations should be applied
+    if (
+      PrefUtils.get(this.WATERFOX_CUSTOMIZATIONS_PREF, 0) === 0 ||
+      (PrefUtils.get(this.WATERFOX_CUSTOMIZATIONS_PREF, 0) === 1 &&
+        this.WATERFOX_DEFAULT_THEMES.includes(
+          PrefUtils.get("extensions.activeThemeID", "")
+        ))
+    ) {
+      const userChromeSheet = "chrome://browser/skin/userChrome.css";
+      const userContentSheet = "chrome://browser/skin/userContent.css";
 
-    this.unregisterStylesheet(userChromeSheet);
-    this.unregisterStylesheet(userContentSheet);
-    this.registerStylesheet(userContentSheet);
+      this.unregisterStylesheet(userChromeSheet);
+      this.unregisterStylesheet(userContentSheet);
+      this.registerStylesheet(userContentSheet);
+    }
   },
 
   registerStylesheet(uri) {
-    let url = Services.io.newURI(uri);
-    let type = styleSheetService.USER_SHEET;
+    const url = Services.io.newURI(uri);
+    const type = styleSheetService.USER_SHEET;
     styleSheetService.loadAndRegisterSheet(url, type);
   },
 
   unregisterStylesheet(uri) {
-    let url = Services.io.newURI(uri);
-    let type = styleSheetService.USER_SHEET;
+    const url = Services.io.newURI(uri);
+    const type = styleSheetService.USER_SHEET;
     styleSheetService.unregisterSheet(url, type);
   },
+
+  async initAccentColor() {
+    let menulist = document.getElementById("accentColor");
+    // If it doesn't exist yet, try again.
+    while (!menulist) {
+      const wait = (ms) => new Promise((res) => setTimeout(res, ms, {}));
+      await wait(500);
+      menulist = document.getElementById("accentColor");
+    }
+
+    menulist?.addEventListener("command", () => {
+      if (["0", "1", "2"].includes(menulist.value)) {
+        for (const pref of this.accentPrefs[menulist.value]) {
+          PrefUtils.set(pref.id, pref.value);
+        }
+      }
+    });
+  },
+
+  async initTabRounding() {
+    let checkbox = document.getElementById("squareTabCorners");
+    // If it doesn't exist yet, try again.
+    while (!checkbox) {
+      const wait = (ms) => new Promise((res) => setTimeout(res, ms, {}));
+      await wait(500);
+      checkbox = document.getElementById("squareTabCorners");
+    }
+
+    // Update the checkbox initially, and observe pref changes.
+    this.updateTabRoundingCheckbox();
+    this._prefObservers.push(
+      PrefUtils.addObserver("userChrome.tab.squareTabCorners", (square) => {
+        PrefUtils.set("userChrome.rounding.square_tab", square);
+        PrefUtils.set("userChrome.tab.bottom_rounded_corner", !square);
+      })
+    );
+  },
+
+  updateTabRoundingCheckbox() {
+    const checkbox = document.getElementById("squareTabCorners");
+    const enabled = PrefUtils.get(
+      "userChrome.tab.squareTabCorners",
+      PrefUtils.get("userChrome.rounding.square_tab", false) &&
+        PrefUtils.set("userChrome.tab.bottom_rounded_corner", true)
+    );
+
+    checkbox.checked = enabled;
+  },
+
+  async initNestedPrefs(id, controllingPref) {
+    let checkbox = document.getElementById(id);
+    // If it doesn't exist yet, try again.
+    while (!checkbox) {
+      const wait = (ms) => new Promise((res) => setTimeout(res, ms, {}));
+      await wait(500);
+      checkbox = document.getElementById(id);
+    }
+    const enabled = PrefUtils.get(controllingPref, false);
+
+    checkbox.setAttribute("disabled", !enabled);
+
+    this._prefObservers.push(
+      PrefUtils.addObserver(controllingPref, (enabled, pref) => {
+        // We need this as observer fires for pref and pref.<some sub path>
+        if (pref !== controllingPref) {
+          return;
+        }
+        const checkbox = document.getElementById(id);
+        checkbox.setAttribute("disabled", !enabled);
+      })
+    );
+  },
 };
diff --git a/waterfox/browser/components/preferences/content/tocbot.css b/waterfox/browser/components/preferences/content/tocbot.css
new file mode 100644
index 000000000000..9c946cbc3b3a
--- /dev/null
+++ b/waterfox/browser/components/preferences/content/tocbot.css
@@ -0,0 +1,104 @@
+.toc {
+  overflow-y: auto;
+}
+.toc > .toc-list {
+  overflow: hidden;
+  position: relative;
+}
+.toc > .toc-list li {
+  list-style: none;
+}
+.toc-list {
+  margin: 0;
+  padding-left: 10px;
+}
+a.toc-link {
+  color: currentColor;
+  height: 100%;
+}
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+  transition: all 300ms ease-in-out;
+}
+.is-collapsed {
+  max-height: 0;
+}
+.is-position-fixed {
+  position: fixed !important;
+  top: 0;
+}
+.is-active-link {
+  font-weight: 700;
+}
+.toc-link::before {
+  background-color: #eee;
+  content: " ";
+  display: inline-block;
+  height: inherit;
+  left: 0;
+  margin-top: -1px;
+  position: absolute;
+  width: 2px;
+}
+.is-active-link::before {
+  background-color: #54bc4b;
+} /*# sourceMappingURL=tocbot.css.map */
+
+/* Patched version */
+.toc {
+  --uc-toc-margin: 0.5em;
+  display: block;
+  position: fixed;
+  width: 300px;
+  height: calc(100vh - 90px); /* .main-content inline style scroll-padding-top: 90px; */
+  transform: translateX(calc(var(--main-pane-width, 664px) + max(60px, 8vw)));
+  scrollbar-width: none;
+}
+@media (max-width: 1280px) {
+  .toc {
+    display: none;
+  }
+}
+.toc-list > .toc-list-item:only-child:not(:has(.toc-list)) {
+  /* If only one exists, remove it. */
+  display: none;
+}
+
+.toc-list-item {
+  cursor: pointer;
+}
+.toc-list-item > .toc-list:not(.is-collapsed) {
+  margin-top: var(--uc-toc-margin);
+}
+.toc-list-item:not(:last-child) {
+  margin-bottom: var(--uc-toc-margin);
+}
+
+.toc-link {
+  font-size: 1.14em; /* as h2 */
+  text-decoration: none;
+}
+.toc-link::before {
+  background-color: #eeeeef;
+}
+.is-active-link::before {
+  background-color: var(--in-content-accent-color, AccentColor);
+}
+
+.toc-list-item:hover:not(:has(> .toc-list:hover)) > .toc-link {
+  font-weight: 700;
+}
+.toc-list-item:hover:not(:has(> .toc-list:hover))
+  > .toc-link:not(.is-active-link)::before {
+  background-color: #d1d1d6;
+}
+@media (prefers-color-scheme: dark) {
+  .toc-link:not(.is-active-link)::before {
+    background-color: #2c2b32;
+  }
+  .toc-list-item:hover:not(:has(> .toc-list:hover))
+    > .toc-link:not(.is-active-link)::before {
+    background-color: #57575d;
+  }
+}
diff --git a/waterfox/browser/components/preferences/content/tocbot.js b/waterfox/browser/components/preferences/content/tocbot.js
new file mode 100644
index 000000000000..858eec4e4ba1
--- /dev/null
+++ b/waterfox/browser/components/preferences/content/tocbot.js
@@ -0,0 +1,1363 @@
+/******/ (() => {
+  // webpackBootstrap
+  /******/ var __webpack_modules__ = {
+    /***/ "./src/js/build-html.js":
+      /*!******************************!*\
+  !*** ./src/js/build-html.js ***!
+  \******************************/
+      /***/ (
+        __unused_webpack___webpack_module__,
+        __webpack_exports__,
+        __webpack_require__
+      ) => {
+        __webpack_require__.r(__webpack_exports__);
+        /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+          /* harmony export */ default: () =>
+            /* export default binding */ __WEBPACK_DEFAULT_EXPORT__,
+          /* harmony export */
+        });
+        /* eslint no-var: off */
+
+        /**
+         * This file is responsible for building the DOM and updating DOM state.
+         *
+         * @author Tim Scanlin
+         */
+
+        /* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(
+          options
+        ) {
+          var forEach = [].forEach;
+          var some = [].some;
+          // if (typeof window === 'undefined') return
+          var body = typeof window !== "undefined" && document.body;
+          var tocElement;
+          var currentlyHighlighting = true;
+          var SPACE_CHAR = " ";
+
+          /**
+           * Create link and list elements.
+           * @param {Object} d
+           * @param {HTMLElement} container
+           * @return {HTMLElement}
+           */
+          function createEl(d, container) {
+            var link = container.appendChild(createLink(d));
+            if (d.children.length) {
+              var list = createList(d.isCollapsed);
+              d.children.forEach((child) => {
+                createEl(child, list);
+              });
+              link.appendChild(list);
+            }
+          }
+
+          /**
+           * Render nested heading array data into a given element.
+           * @param {HTMLElement} parent Optional. If provided updates the {@see tocElement} to match.
+           * @param {Array} data
+           * @return {HTMLElement}
+           */
+          function render(parent, data) {
+            var collapsed = false;
+            var container = createList(collapsed);
+
+            data.forEach((d) => {
+              createEl(d, container);
+            });
+
+            // Return if no TOC element is provided or known.
+            tocElement = parent || tocElement;
+            if (tocElement === null) {
+              return;
+            }
+
+            // Remove existing child if it exists.
+            if (tocElement.firstChild) {
+              tocElement.removeChild(tocElement.firstChild);
+            }
+
+            // Just return the parent and don't append the list if no links are found.
+            if (data.length === 0) {
+              return tocElement;
+            }
+
+            // Append the Elements that have been created
+            return tocElement.appendChild(container);
+          }
+
+          /**
+           * Create link element.
+           * @param {Object} data
+           * @return {HTMLElement}
+           */
+          function createLink(data) {
+            var item = document.createElement("li");
+            var a = document.createElement("a");
+            if (options.listItemClass) {
+              item.setAttribute("class", options.listItemClass);
+            }
+
+            if (options.onClick) {
+              a.onclick = options.onClick;
+            }
+
+            if (options.includeTitleTags) {
+              a.setAttribute("title", data.textContent);
+            }
+
+            if (options.includeHtml && data.childNodes.length) {
+              forEach.call(data.childNodes, (node) => {
+                a.appendChild(node.cloneNode(true));
+              });
+            } else {
+              // Default behavior. Set to textContent to keep tests happy.
+              a.textContent = data.textContent;
+            }
+            a.setAttribute("href", `${options.basePath}#${data.id}`);
+            a.setAttribute(
+              "class",
+              options.linkClass +
+                SPACE_CHAR +
+                "node-name--" +
+                data.nodeName +
+                SPACE_CHAR +
+                options.extraLinkClasses
+            );
+            item.appendChild(a);
+            return item;
+          }
+
+          /**
+           * Create list element.
+           * @param {Boolean} isCollapsed
+           * @return {HTMLElement}
+           */
+          function createList(isCollapsed) {
+            var listElement = options.orderedList ? "ol" : "ul";
+            var list = document.createElement(listElement);
+            var classes =
+              options.listClass + SPACE_CHAR + options.extraListClasses;
+            if (isCollapsed) {
+              // No plus/equals here fixes compilation issue.
+              classes = classes + SPACE_CHAR + options.collapsibleClass;
+              classes = classes + SPACE_CHAR + options.isCollapsedClass;
+            }
+            list.setAttribute("class", classes);
+            return list;
+          }
+
+          /**
+           * Update fixed sidebar class.
+           * @return {HTMLElement}
+           */
+          function updateFixedSidebarClass() {
+            if (
+              options.scrollContainer &&
+              document.querySelector(options.scrollContainer)
+            ) {
+              var top;
+              top = document.querySelector(options.scrollContainer).scrollTop;
+            } else {
+              top = document.documentElement.scrollTop || body.scrollTop;
+            }
+            var posFixedEl = document.querySelector(
+              options.positionFixedSelector
+            );
+
+            if (options.fixedSidebarOffset === "auto") {
+              options.fixedSidebarOffset = tocElement.offsetTop;
+            }
+
+            if (top > options.fixedSidebarOffset) {
+              if (
+                posFixedEl.className.indexOf(options.positionFixedClass) === -1
+              ) {
+                posFixedEl.className += SPACE_CHAR + options.positionFixedClass;
+              }
+            } else {
+              posFixedEl.className = posFixedEl.className.replace(
+                SPACE_CHAR + options.positionFixedClass,
+                ""
+              );
+            }
+          }
+
+          /**
+           * Get top position of heading
+           * @param {HTMLElement} obj
+           * @return {int} position
+           */
+          function getHeadingTopPos(obj) {
+            var position = 0;
+            if (obj !== null) {
+              position = obj.offsetTop;
+              if (options.hasInnerContainers) {
+                position += getHeadingTopPos(obj.offsetParent);
+              }
+            }
+            return position;
+          }
+
+          /**
+           * Update className only when changed.
+           * @param {HTMLElement} obj
+           * @param {string} className
+           * @return {HTMLElement} obj
+           */
+          function updateClassname(obj, className) {
+            if (obj && obj.className !== className) {
+              obj.className = className;
+            }
+            return obj;
+          }
+
+          /**
+           * Update TOC highlighting and collapsed groupings.
+           */
+          function updateToc(headingsArray) {
+            // If a fixed content container was set
+            if (
+              options.scrollContainer &&
+              document.querySelector(options.scrollContainer)
+            ) {
+              var top;
+              top = document.querySelector(options.scrollContainer).scrollTop;
+            } else {
+              top = document.documentElement.scrollTop || body.scrollTop;
+            }
+
+            // Add fixed class at offset
+            if (options.positionFixedSelector) {
+              updateFixedSidebarClass();
+            }
+
+            // Get the top most heading currently visible on the page so we know what to highlight.
+            var headings = headingsArray;
+            var topHeader;
+            // Using some instead of each so that we can escape early.
+            if (
+              currentlyHighlighting &&
+              tocElement !== null &&
+              headings.length > 0
+            ) {
+              some.call(headings, (heading, i) => {
+                if (
+                  getHeadingTopPos(heading) >
+                  top + options.headingsOffset + 10
+                ) {
+                  // Don't allow negative index value.
+                  var index = i === 0 ? i : i - 1;
+                  topHeader = headings[index];
+                  return true;
+                } else if (i === headings.length - 1) {
+                  // This allows scrolling for the last heading on the page.
+                  topHeader = headings[headings.length - 1];
+                  return true;
+                }
+              });
+
+              var oldActiveTocLink = tocElement.querySelector(
+                `.${options.activeLinkClass}`
+              );
+              var activeTocLink = tocElement.querySelector(
+                "." +
+                  options.linkClass +
+                  ".node-name--" +
+                  CSS.escape(topHeader.nodeName) +
+                  '[href="' +
+                  options.basePath +
+                  "#" +
+                  topHeader.id.replace(
+                    /([ #;&,.+*~':"!^$[\]()=>|/\\@])/g,
+                    "\\$1"
+                  ) +
+                  '"]'
+              );
+              // Performance improvement to only change the classes
+              // for the toc if a new link should be highlighted.
+              if (oldActiveTocLink === activeTocLink) {
+                return;
+              }
+
+              // Remove the active class from the other tocLinks.
+              var tocLinks = tocElement.querySelectorAll(
+                `.${options.linkClass}`
+              );
+              forEach.call(tocLinks, (tocLink) => {
+                updateClassname(
+                  tocLink,
+                  tocLink.className.replace(
+                    SPACE_CHAR + options.activeLinkClass,
+                    ""
+                  )
+                );
+              });
+              var tocLis = tocElement.querySelectorAll(
+                `.${options.listItemClass}`
+              );
+              forEach.call(tocLis, (tocLi) => {
+                updateClassname(
+                  tocLi,
+                  tocLi.className.replace(
+                    SPACE_CHAR + options.activeListItemClass,
+                    ""
+                  )
+                );
+              });
+
+              // Add the active class to the active tocLink.
+              if (
+                activeTocLink &&
+                activeTocLink.className.indexOf(options.activeLinkClass) === -1
+              ) {
+                activeTocLink.className += SPACE_CHAR + options.activeLinkClass;
+              }
+              var li = activeTocLink?.parentNode;
+              if (
+                li &&
+                li.className.indexOf(options.activeListItemClass) === -1
+              ) {
+                li.className += SPACE_CHAR + options.activeListItemClass;
+              }
+
+              var tocLists = tocElement.querySelectorAll(
+                `.${options.listClass}.${options.collapsibleClass}`
+              );
+
+              // Collapse the other collapsible lists.
+              forEach.call(tocLists, (list) => {
+                if (list.className.indexOf(options.isCollapsedClass) === -1) {
+                  list.className += SPACE_CHAR + options.isCollapsedClass;
+                }
+              });
+
+              // Expand the active link's collapsible list and its sibling if applicable.
+              if (
+                activeTocLink?.nextSibling &&
+                activeTocLink.nextSibling.className.indexOf(
+                  options.isCollapsedClass
+                ) !== -1
+              ) {
+                updateClassname(
+                  activeTocLink.nextSibling,
+                  activeTocLink.nextSibling.className.replace(
+                    SPACE_CHAR + options.isCollapsedClass,
+                    ""
+                  )
+                );
+              }
+              removeCollapsedFromParents(activeTocLink?.parentNode.parentNode);
+            }
+          }
+
+          /**
+           * Remove collapsed class from parent elements.
+           * @param {HTMLElement} element
+           * @return {HTMLElement}
+           */
+          function removeCollapsedFromParents(element) {
+            if (
+              element &&
+              element.className.indexOf(options.collapsibleClass) !== -1 &&
+              element.className.indexOf(options.isCollapsedClass) !== -1
+            ) {
+              updateClassname(
+                element,
+                element.className.replace(
+                  SPACE_CHAR + options.isCollapsedClass,
+                  ""
+                )
+              );
+              return removeCollapsedFromParents(element.parentNode.parentNode);
+            }
+            return element;
+          }
+
+          /**
+           * Disable TOC Animation when a link is clicked.
+           * @param {Event} event
+           */
+          function disableTocAnimation(event) {
+            var target = event.target || event.srcElement;
+            if (
+              typeof target.className !== "string" ||
+              target.className.indexOf(options.linkClass) === -1
+            ) {
+              return;
+            }
+            // Bind to tocLink clicks to temporarily disable highlighting
+            // while smoothScroll is animating.
+            currentlyHighlighting = false;
+          }
+
+          /**
+           * Enable TOC Animation.
+           */
+          function enableTocAnimation() {
+            currentlyHighlighting = true;
+          }
+
+          return {
+            enableTocAnimation,
+            disableTocAnimation,
+            render,
+            updateToc,
+          };
+        }
+
+        /***/
+      },
+
+    /***/ "./src/js/default-options.js":
+      /*!***********************************!*\
+  !*** ./src/js/default-options.js ***!
+  \***********************************/
+      /***/ (
+        __unused_webpack___webpack_module__,
+        __webpack_exports__,
+        __webpack_require__
+      ) => {
+        __webpack_require__.r(__webpack_exports__);
+        /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+          /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
+          /* harmony export */
+        });
+        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = {
+          // Where to render the table of contents.
+          tocSelector: ".js-toc",
+          // Where to grab the headings to build the table of contents.
+          contentSelector: ".js-toc-content",
+          // Which headings to grab inside of the contentSelector element.
+          headingSelector: "h1, h2, h3",
+          // Headings that match the ignoreSelector will be skipped.
+          ignoreSelector: ".js-toc-ignore",
+          // For headings inside relative or absolute positioned containers within content
+          hasInnerContainers: false,
+          // Main class to add to links.
+          linkClass: "toc-link",
+          // Extra classes to add to links.
+          extraLinkClasses: "",
+          // Class to add to active links,
+          // the link corresponding to the top most heading on the page.
+          activeLinkClass: "is-active-link",
+          // Main class to add to lists.
+          listClass: "toc-list",
+          // Extra classes to add to lists.
+          extraListClasses: "",
+          // Class that gets added when a list should be collapsed.
+          isCollapsedClass: "is-collapsed",
+          // Class that gets added when a list should be able
+          // to be collapsed but isn't necessarily collapsed.
+          collapsibleClass: "is-collapsible",
+          // Class to add to list items.
+          listItemClass: "toc-list-item",
+          // Class to add to active list items.
+          activeListItemClass: "is-active-li",
+          // How many heading levels should not be collapsed.
+          // For example, number 6 will show everything since
+          // there are only 6 heading levels and number 0 will collapse them all.
+          // The sections that are hidden will open
+          // and close as you scroll to headings within them.
+          collapseDepth: 0,
+          // Smooth scrolling enabled.
+          scrollSmooth: true,
+          // Smooth scroll duration.
+          scrollSmoothDuration: 420,
+          // Smooth scroll offset.
+          scrollSmoothOffset: 0,
+          // Callback for scroll end.
+          scrollEndCallback: (_e) => {},
+          // Headings offset between the headings and the top of the document (this is meant for minor adjustments).
+          headingsOffset: 1,
+          // Timeout between events firing to make sure it's
+          // not too rapid (for performance reasons).
+          throttleTimeout: 50,
+          // Element to add the positionFixedClass to.
+          positionFixedSelector: null,
+          // Fixed position class to add to make sidebar fixed after scrolling
+          // down past the fixedSidebarOffset.
+          positionFixedClass: "is-position-fixed",
+          // fixedSidebarOffset can be any number but by default is set
+          // to auto which sets the fixedSidebarOffset to the sidebar
+          // element's offsetTop from the top of the document on init.
+          fixedSidebarOffset: "auto",
+          // includeHtml can be set to true to include the HTML markup from the
+          // heading node instead of just including the innerText.
+          includeHtml: false,
+          // includeTitleTags automatically sets the html title tag of the link
+          // to match the title. This can be useful for SEO purposes or
+          // when truncating titles.
+          includeTitleTags: false,
+          // onclick function to apply to all links in toc. will be called with
+          // the event as the first parameter, and this can be used to stop,
+          // propagation, prevent default or perform action
+          onClick: (_e) => {},
+          // orderedList can be set to false to generate unordered lists (ul)
+          // instead of ordered lists (ol)
+          orderedList: true,
+          // If there is a fixed article scroll container, set to calculate titles' offset
+          scrollContainer: null,
+          // prevent ToC DOM rendering if it's already rendered by an external system
+          skipRendering: false,
+          // Optional callback to change heading labels.
+          // For example it can be used to cut down and put ellipses on multiline headings you deem too long.
+          // Called each time a heading is parsed. Expects a string and returns the modified label to display.
+          // Additionally, the attribute `data-heading-label` may be used on a heading to specify
+          // a shorter string to be used in the TOC.
+          // function (string) => string
+          headingLabelCallback: false,
+          // ignore headings that are hidden in DOM
+          ignoreHiddenElements: false,
+          // Optional callback to modify properties of parsed headings.
+          // The heading element is passed in node parameter and information parsed by default parser is provided in obj parameter.
+          // Function has to return the same or modified obj.
+          // The heading will be excluded from TOC if nothing is returned.
+          // function (object, HTMLElement) => object | void
+          headingObjectCallback: null,
+          // Set the base path, useful if you use a `base` tag in `head`.
+          basePath: "",
+          // Only takes affect when `tocSelector` is scrolling,
+          // keep the toc scroll position in sync with the content.
+          disableTocScrollSync: false,
+          // Offset for the toc scroll (top) position when scrolling the page.
+          // Only effective if `disableTocScrollSync` is false.
+          tocScrollOffset: 0,
+        };
+
+        /***/
+      },
+
+    /***/ "./src/js/index-esm.js":
+      /*!*****************************!*\
+  !*** ./src/js/index-esm.js ***!
+  \*****************************/
+      /***/ (
+        __unused_webpack___webpack_module__,
+        __webpack_exports__,
+        __webpack_require__
+      ) => {
+        __webpack_require__.r(__webpack_exports__);
+        /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+          /* harmony export */ _buildHtml: () => /* binding */ _buildHtml,
+          /* harmony export */ _headingsArray: () =>
+            /* binding */ _headingsArray,
+          /* harmony export */ _options: () => /* binding */ _options,
+          /* harmony export */ _parseContent: () => /* binding */ _parseContent,
+          /* harmony export */ _scrollListener: () =>
+            /* binding */ _scrollListener,
+          /* harmony export */ destroy: () => /* binding */ destroy,
+          /* harmony export */ init: () => /* binding */ init,
+          /* harmony export */ refresh: () => /* binding */ refresh,
+          /* harmony export */
+        });
+        /* harmony import */ var _build_html_js__WEBPACK_IMPORTED_MODULE_0__ =
+          __webpack_require__(/*! ./build-html.js */ "./src/js/build-html.js");
+        /* harmony import */ var _default_options_js__WEBPACK_IMPORTED_MODULE_1__ =
+          __webpack_require__(
+            /*! ./default-options.js */ "./src/js/default-options.js"
+          );
+        /* harmony import */ var _parse_content_js__WEBPACK_IMPORTED_MODULE_2__ =
+          __webpack_require__(
+            /*! ./parse-content.js */ "./src/js/parse-content.js"
+          );
+        /* harmony import */ var _scroll_smooth_index_js__WEBPACK_IMPORTED_MODULE_3__ =
+          __webpack_require__(
+            /*! ./scroll-smooth/index.js */ "./src/js/scroll-smooth/index.js"
+          );
+        /* harmony import */ var _update_toc_scroll_js__WEBPACK_IMPORTED_MODULE_4__ =
+          __webpack_require__(
+            /*! ./update-toc-scroll.js */ "./src/js/update-toc-scroll.js"
+          );
+        /* eslint no-var: off */
+        /**
+         * Tocbot
+         * Tocbot creates a table of contents based on HTML headings on a page,
+         * this allows users to easily jump to different sections of the document.
+         * Tocbot was inspired by tocify (http://gregfranko.com/jquery.tocify.js/).
+         * The main differences are that it works natively without any need for jquery or jquery UI).
+         *
+         * @author Tim Scanlin
+         */
+
+        // For testing purposes.
+        let _options = {}; // Object to store current options.
+        let _buildHtml;
+        let _parseContent;
+        let _headingsArray;
+        let _scrollListener;
+
+        let clickListener;
+
+        /**
+         * Initialize tocbot.
+         * @param {object} customOptions
+         */
+        function init(customOptions) {
+          // Merge defaults with user options.
+          // Set to options variable at the top.
+          _options = extend(
+            _default_options_js__WEBPACK_IMPORTED_MODULE_1__.default,
+            customOptions || {}
+          );
+
+          // Init smooth scroll if enabled (default).
+          if (_options.scrollSmooth) {
+            _options.duration = _options.scrollSmoothDuration;
+            _options.offset = _options.scrollSmoothOffset;
+            (0, _scroll_smooth_index_js__WEBPACK_IMPORTED_MODULE_3__.default)(
+              _options
+            );
+          }
+
+          // Pass options to these modules.
+          _buildHtml = (0, _build_html_js__WEBPACK_IMPORTED_MODULE_0__.default)(
+            _options
+          );
+          _parseContent = (0,
+          _parse_content_js__WEBPACK_IMPORTED_MODULE_2__.default)(_options);
+
+          // Destroy it if it exists first.
+          destroy();
+
+          const contentElement = getContentElement(_options);
+          if (contentElement === null) {
+            return;
+          }
+
+          const tocElement = getTocElement(_options);
+          if (tocElement === null) {
+            return;
+          }
+
+          // Get headings array.
+          _headingsArray = _parseContent.selectHeadings(
+            contentElement,
+            _options.headingSelector
+          );
+
+          // Return if no headings are found.
+          if (_headingsArray === null) {
+            return;
+          }
+
+          // Build nested headings array.
+          const nestedHeadingsObj =
+            _parseContent.nestHeadingsArray(_headingsArray);
+          const nestedHeadings = nestedHeadingsObj.nest;
+
+          // Render.
+          if (!_options.skipRendering) {
+            _buildHtml.render(tocElement, nestedHeadings);
+          } else {
+            // No need to attach listeners if skipRendering is true, this was causing errors.
+            return this;
+          }
+
+          // Update Sidebar and bind listeners.
+          _scrollListener = throttle((e) => {
+            _buildHtml.updateToc(_headingsArray);
+            !_options.disableTocScrollSync &&
+              (0, _update_toc_scroll_js__WEBPACK_IMPORTED_MODULE_4__.default)(
+                _options
+              );
+            const isTop =
+              e?.target?.scrollingElement &&
+              e.target.scrollingElement.scrollTop === 0;
+            if (
+              (e && (e.eventPhase === 0 || e.currentTarget === null)) ||
+              isTop
+            ) {
+              _buildHtml.updateToc(_headingsArray);
+              if (_options.scrollEndCallback) {
+                _options.scrollEndCallback(e);
+              }
+            }
+          }, _options.throttleTimeout);
+          _scrollListener();
+          if (
+            _options.scrollContainer &&
+            document.querySelector(_options.scrollContainer)
+          ) {
+            document
+              .querySelector(_options.scrollContainer)
+              .addEventListener("scroll", _scrollListener, false);
+            document
+              .querySelector(_options.scrollContainer)
+              .addEventListener("resize", _scrollListener, false);
+          } else {
+            document.addEventListener("scroll", _scrollListener, false);
+            document.addEventListener("resize", _scrollListener, false);
+          }
+
+          // Bind click listeners to disable animation.
+          let timeout = null;
+          clickListener = throttle((event) => {
+            if (_options.scrollSmooth) {
+              _buildHtml.disableTocAnimation(event);
+            }
+            _buildHtml.updateToc(_headingsArray);
+            // Timeout to re-enable the animation.
+            timeout && clearTimeout(timeout);
+            timeout = setTimeout(() => {
+              _buildHtml.enableTocAnimation();
+            }, _options.scrollSmoothDuration);
+          }, _options.throttleTimeout);
+
+          if (
+            _options.scrollContainer &&
+            document.querySelector(_options.scrollContainer)
+          ) {
+            document
+              .querySelector(_options.scrollContainer)
+              .addEventListener("click", clickListener, false);
+          } else {
+            document.addEventListener("click", clickListener, false);
+          }
+        }
+
+        /**
+         * Destroy tocbot.
+         */
+        function destroy() {
+          const tocElement = getTocElement(_options);
+          if (tocElement === null) {
+            return;
+          }
+
+          if (!_options.skipRendering) {
+            // Clear HTML.
+            if (tocElement) {
+              tocElement.innerHTML = "";
+            }
+          }
+
+          // Remove event listeners.
+          if (
+            _options.scrollContainer &&
+            document.querySelector(_options.scrollContainer)
+          ) {
+            document
+              .querySelector(_options.scrollContainer)
+              .removeEventListener("scroll", _scrollListener, false);
+            document
+              .querySelector(_options.scrollContainer)
+              .removeEventListener("resize", _scrollListener, false);
+            if (_buildHtml) {
+              document
+                .querySelector(_options.scrollContainer)
+                .removeEventListener("click", clickListener, false);
+            }
+          } else {
+            document.removeEventListener("scroll", _scrollListener, false);
+            document.removeEventListener("resize", _scrollListener, false);
+            if (_buildHtml) {
+              document.removeEventListener("click", clickListener, false);
+            }
+          }
+        }
+
+        /**
+         * Refresh tocbot.
+         */
+        function refresh(customOptions) {
+          destroy();
+          init(customOptions || _options);
+        }
+
+        // From: https://github.com/Raynos/xtend
+        const hasOwnProperty = Object.prototype.hasOwnProperty;
+        function extend() {
+          const target = {};
+          for (let i = 0; i < arguments.length; i++) {
+            const source = arguments[i];
+            for (const key in source) {
+              if (hasOwnProperty.call(source, key)) {
+                target[key] = source[key];
+              }
+            }
+          }
+          return target;
+        }
+
+        // From: https://remysharp.com/2010/07/21/throttling-function-calls
+        function throttle(fn, threshold, scope) {
+          threshold || (threshold = 250);
+          let last;
+          let deferTimer;
+          return function () {
+            const context = scope || this;
+            const now = Date.now();
+            const args = arguments;
+            if (last && now < last + threshold) {
+              // hold on to it
+              clearTimeout(deferTimer);
+              deferTimer = setTimeout(() => {
+                last = now;
+                fn.apply(context, args);
+              }, threshold);
+            } else {
+              last = now;
+              fn.apply(context, args);
+            }
+          };
+        }
+
+        function getContentElement(options) {
+          try {
+            return (
+              options.contentElement ||
+              document.querySelector(options.contentSelector)
+            );
+          } catch (_e) {
+            console.warn(
+              `Contents element not found: ${options.contentSelector}`
+            ); // eslint-disable-line
+            return null;
+          }
+        }
+
+        function getTocElement(options) {
+          try {
+            return (
+              options.tocElement || document.querySelector(options.tocSelector)
+            );
+          } catch (_e) {
+            console.warn(`TOC element not found: ${options.tocSelector}`); // eslint-disable-line
+            return null;
+          }
+        }
+
+        /***/
+      },
+
+    /***/ "./src/js/parse-content.js":
+      /*!*********************************!*\
+  !*** ./src/js/parse-content.js ***!
+  \*********************************/
+      /***/ (
+        __unused_webpack___webpack_module__,
+        __webpack_exports__,
+        __webpack_require__
+      ) => {
+        __webpack_require__.r(__webpack_exports__);
+        /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+          /* harmony export */ default: () => /* binding */ parseContent,
+          /* harmony export */
+        });
+        /* eslint no-var: off */
+        /**
+         * This file is responsible for parsing the content from the DOM and making
+         * sure data is nested properly.
+         *
+         * @author Tim Scanlin
+         */
+
+        function parseContent(options) {
+          var reduce = [].reduce;
+
+          /**
+           * Get the last item in an array and return a reference to it.
+           * @param {Array} array
+           * @return {Object}
+           */
+          function getLastItem(array) {
+            return array[array.length - 1];
+          }
+
+          /**
+           * Get heading level for a heading dom node.
+           * @param {HTMLElement} heading
+           * @return {Number}
+           */
+          function getHeadingLevel(heading) {
+            return +heading.nodeName
+              .replace(/^html:/, "")
+              .toUpperCase()
+              .replace("H", "");
+          }
+
+          /**
+           * Determine whether the object is an HTML Element.
+           * Also works inside iframes. HTML Elements might be created by the parent document.
+           * @param {Object} maybeElement
+           * @return {Number}
+           */
+          function isHTMLElement(maybeElement) {
+            try {
+              return (
+                maybeElement instanceof window.HTMLElement ||
+                maybeElement instanceof window.parent.HTMLElement
+              );
+            } catch (_e) {
+              return maybeElement instanceof window.HTMLElement;
+            }
+          }
+
+          /**
+           * Get important properties from a heading element and store in a plain object.
+           * @param {HTMLElement} heading
+           * @return {Object}
+           */
+          function getHeadingObject(heading) {
+            // each node is processed twice by this method because nestHeadingsArray() and addNode() calls it
+            // first time heading is real DOM node element, second time it is obj
+            // that is causing problem so I am processing only original DOM node
+            if (!isHTMLElement(heading)) return heading;
+
+            if (
+              options.ignoreHiddenElements &&
+              (!heading.offsetHeight || !heading.offsetParent)
+            ) {
+              return null;
+            }
+
+            const headingLabel =
+              heading.getAttribute("data-heading-label") ||
+              (options.headingLabelCallback
+                ? String(options.headingLabelCallback(heading.innerText))
+                : (heading.innerText || heading.textContent).trim());
+            var obj = {
+              id: heading.id,
+              children: [],
+              nodeName: heading.nodeName,
+              headingLevel: getHeadingLevel(heading),
+              textContent: headingLabel,
+            };
+
+            if (options.includeHtml) {
+              obj.childNodes = heading.childNodes;
+            }
+
+            if (options.headingObjectCallback) {
+              return options.headingObjectCallback(obj, heading);
+            }
+
+            return obj;
+          }
+
+          /**
+           * Add a node to the nested array.
+           * @param {Object} node
+           * @param {Array} nest
+           * @return {Array}
+           */
+          function addNode(node, nest) {
+            var obj = getHeadingObject(node);
+            var level = obj.headingLevel;
+            var array = nest;
+            var lastItem = getLastItem(array);
+            var lastItemLevel = lastItem ? lastItem.headingLevel : 0;
+            var counter = level - lastItemLevel;
+
+            while (counter > 0) {
+              lastItem = getLastItem(array);
+              // Handle case where there are multiple h5+ in a row.
+              if (lastItem && level === lastItem.headingLevel) {
+                break;
+              } else if (lastItem && lastItem.children !== undefined) {
+                array = lastItem.children;
+              }
+              counter--;
+            }
+
+            if (level >= options.collapseDepth) {
+              obj.isCollapsed = true;
+            }
+
+            array.push(obj);
+            return array;
+          }
+
+          /**
+           * Select headings in content area, exclude any selector in options.ignoreSelector
+           * @param {HTMLElement} contentElement
+           * @param {Array} headingSelector
+           * @return {Array}
+           */
+          function selectHeadings(contentElement, headingSelector) {
+            var selectors = headingSelector;
+            if (options.ignoreSelector) {
+              selectors = headingSelector
+                .split(",")
+                .map(function mapSelectors(selector) {
+                  return `${selector.trim()}:not(${options.ignoreSelector})`;
+                });
+            }
+            try {
+              return contentElement.querySelectorAll(selectors);
+            } catch (_e) {
+              console.warn(`Headers not found with selector: ${selectors}`); // eslint-disable-line
+              return null;
+            }
+          }
+
+          /**
+           * Nest headings array into nested arrays with 'children' property.
+           * @param {Array} headingsArray
+           * @return {Object}
+           */
+          function nestHeadingsArray(headingsArray) {
+            return reduce.call(
+              headingsArray,
+              function reducer(prev, curr) {
+                var currentHeading = getHeadingObject(curr);
+                if (currentHeading) {
+                  addNode(currentHeading, prev.nest);
+                }
+                return prev;
+              },
+              {
+                nest: [],
+              }
+            );
+          }
+
+          return {
+            nestHeadingsArray,
+            selectHeadings,
+          };
+        }
+
+        /***/
+      },
+
+    /***/ "./src/js/scroll-smooth/index.js":
+      /*!***************************************!*\
+  !*** ./src/js/scroll-smooth/index.js ***!
+  \***************************************/
+      /***/ (
+        __unused_webpack___webpack_module__,
+        __webpack_exports__,
+        __webpack_require__
+      ) => {
+        __webpack_require__.r(__webpack_exports__);
+        /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+          /* harmony export */ default: () => /* binding */ initSmoothScrolling,
+          /* harmony export */
+        });
+        /* eslint no-var: off */
+        /* globals location, requestAnimationFrame */
+
+        function initSmoothScrolling(options) {
+          // if (isCssSmoothSCrollSupported()) { return }
+
+          var duration = options.duration;
+          var offset = options.offset;
+          if (typeof window === "undefined" || typeof location === "undefined")
+            return;
+
+          var pageUrl = location.hash
+            ? stripHash(location.href)
+            : location.href;
+
+          delegatedLinkHijacking();
+
+          function delegatedLinkHijacking() {
+            document.body.addEventListener("click", onClick, false);
+
+            function onClick(e) {
+              if (
+                !isInPageLink(e.target) ||
+                e.target.className.indexOf("no-smooth-scroll") > -1 ||
+                (e.target.href.charAt(e.target.href.length - 2) === "#" &&
+                  e.target.href.charAt(e.target.href.length - 1) === "!") ||
+                e.target.className.indexOf(options.linkClass) === -1
+              ) {
+                return;
+              }
+
+              // Don't prevent default or hash doesn't change.
+              // e.preventDefault()
+
+              jump(e.target.hash, {
+                duration,
+                offset,
+                callback: () => {
+                  setFocus(e.target.hash);
+                },
+              });
+            }
+          }
+
+          function isInPageLink(n) {
+            return (
+              n.tagName.toLowerCase() === "a" &&
+              (n.hash.length > 0 || n.href.charAt(n.href.length - 1) === "#") &&
+              (stripHash(n.href) === pageUrl ||
+                `${stripHash(n.href)}#` === pageUrl)
+            );
+          }
+
+          function stripHash(url) {
+            return url.slice(0, url.lastIndexOf("#"));
+          }
+
+          // function isCssSmoothSCrollSupported () {
+          //   return 'scrollBehavior' in document.documentElement.style
+          // }
+
+          // Adapted from:
+          // https://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
+          function setFocus(hash) {
+            var element = document.getElementById(hash.substring(1));
+
+            if (element) {
+              if (
+                !/^(?:a|select|input|button|textarea)$/i.test(element.tagName)
+              ) {
+                element.tabIndex = -1;
+              }
+
+              element.focus();
+            }
+          }
+        }
+
+        function jump(target, options) {
+          var start = window.pageYOffset;
+          var opt = {
+            duration: options.duration,
+            offset: options.offset || 0,
+            callback: options.callback,
+            easing: options.easing || easeInOutQuad,
+          };
+          // This makes ids that start with a number work: ('[id="' + decodeURI(target).split('#').join('') + '"]')
+          // DecodeURI for nonASCII hashes, they was encoded, but id was not encoded, it lead to not finding the tgt element by id.
+          // And this is for IE: document.body.scrollTop
+          // Handle decoded and non-decoded URIs since sometimes URLs automatically transform them (support for internation chars).
+          var tgt =
+            document.querySelector(
+              `[id="${decodeURI(target).split("#").join("")}"]`
+            ) || document.querySelector(`[id="${target.split("#").join("")}"]`);
+          var distance =
+            typeof target === "string"
+              ? opt.offset +
+                (target
+                  ? tgt?.getBoundingClientRect().top || 0 // handle non-existent links better.
+                  : -(
+                      document.documentElement.scrollTop ||
+                      document.body.scrollTop
+                    ))
+              : target;
+          var duration =
+            typeof opt.duration === "function"
+              ? opt.duration(distance)
+              : opt.duration;
+          var timeStart;
+          var timeElapsed;
+
+          requestAnimationFrame((time) => {
+            timeStart = time;
+            loop(time);
+          });
+          function loop(time) {
+            timeElapsed = time - timeStart;
+
+            window.scrollTo(
+              0,
+              opt.easing(timeElapsed, start, distance, duration)
+            );
+
+            if (timeElapsed < duration) {
+              requestAnimationFrame(loop);
+            } else {
+              end();
+            }
+          }
+
+          function end() {
+            window.scrollTo(0, start + distance);
+
+            if (typeof opt.callback === "function") {
+              opt.callback();
+            }
+          }
+
+          // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
+          function easeInOutQuad(t, b, c, d) {
+            t /= d / 2;
+            if (t < 1) return (c / 2) * t * t + b;
+            t--;
+            return (-c / 2) * (t * (t - 2) - 1) + b;
+          }
+        }
+
+        /***/
+      },
+
+    /***/ "./src/js/update-toc-scroll.js":
+      /*!*************************************!*\
+  !*** ./src/js/update-toc-scroll.js ***!
+  \*************************************/
+      /***/ (
+        __unused_webpack___webpack_module__,
+        __webpack_exports__,
+        __webpack_require__
+      ) => {
+        __webpack_require__.r(__webpack_exports__);
+        /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+          /* harmony export */ default: () => /* binding */ updateTocScroll,
+          /* harmony export */
+        });
+        /* eslint no-var: off */
+
+        const SCROLL_LEEWAY = 30;
+        function updateTocScroll(options) {
+          var toc =
+            options.tocElement || document.querySelector(options.tocSelector);
+          if (toc && toc.scrollHeight > toc.clientHeight) {
+            var activeItem = toc.querySelector(
+              `.${options.activeListItemClass}`
+            );
+            if (activeItem) {
+              // Determine container top and bottom
+              var cTop = toc.scrollTop;
+              var cBottom = cTop + toc.clientHeight;
+
+              // Determine element top and bottom
+              var eTop = activeItem.offsetTop;
+              var eBottom = eTop + activeItem.clientHeight;
+
+              // Check if out of view
+              // Above scroll view
+              if (eTop < cTop + options.tocScrollOffset) {
+                toc.scrollTop -= cTop - eTop + options.tocScrollOffset;
+                // Below scroll view
+              } else if (
+                eBottom >
+                cBottom - options.tocScrollOffset - SCROLL_LEEWAY
+              ) {
+                toc.scrollTop +=
+                  eBottom -
+                  cBottom +
+                  options.tocScrollOffset +
+                  2 * SCROLL_LEEWAY;
+              }
+            }
+          }
+        }
+
+        /***/
+      },
+
+    /******/
+  };
+  /************************************************************************/
+  /******/ // The module cache
+  /******/ var __webpack_module_cache__ = {};
+  /******/
+  /******/ // The require function
+  /******/ function __webpack_require__(moduleId) {
+    /******/ // Check if module is in cache
+    /******/ var cachedModule = __webpack_module_cache__[moduleId];
+    /******/ if (cachedModule !== undefined) {
+      /******/ return cachedModule.exports;
+      /******/
+    }
+    /******/ // Create a new module (and put it into the cache)
+    /******/ var module = (__webpack_module_cache__[moduleId] = {
+      /******/ // no module.id needed
+      /******/ // no module.loaded needed
+      /******/ exports: {},
+      /******/
+    });
+    /******/
+    /******/ // Execute the module function
+    /******/ __webpack_modules__[moduleId](
+      module,
+      module.exports,
+      __webpack_require__
+    );
+    /******/
+    /******/ // Return the exports of the module
+    /******/ return module.exports;
+    /******/
+  }
+  /******/
+  /************************************************************************/
+  /******/ /* webpack/runtime/define property getters */
+  /******/ (() => {
+    /******/ // define getter functions for harmony exports
+    /******/ __webpack_require__.d = (exports, definition) => {
+      /******/ for (var key in definition) {
+        /******/ if (
+          __webpack_require__.o(definition, key) &&
+          !__webpack_require__.o(exports, key)
+        ) {
+          /******/ Object.defineProperty(exports, key, {
+            enumerable: true,
+            get: definition[key],
+          });
+          /******/
+        }
+        /******/
+      }
+      /******/
+    };
+    /******/
+  })();
+  /******/
+  /******/ /* webpack/runtime/hasOwnProperty shorthand */
+  /******/ (() => {
+    /******/ __webpack_require__.o = (obj, prop) => Object.hasOwn(obj, prop);
+    /******/
+  })();
+  /******/
+  /******/ /* webpack/runtime/make namespace object */
+  /******/ (() => {
+    /******/ // define __esModule on exports
+    /******/ __webpack_require__.r = (exports) => {
+      /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+        /******/ Object.defineProperty(exports, Symbol.toStringTag, {
+          value: "Module",
+        });
+        /******/
+      }
+      /******/ Object.defineProperty(exports, "__esModule", { value: true });
+      /******/
+    };
+    /******/
+  })();
+  /******/
+  /************************************************************************/
+  var __webpack_exports__ = {};
+  // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+  (() => {
+    /*!******************************!*\
+  !*** ./src/js/index-dist.js ***!
+  \******************************/
+    __webpack_require__.r(__webpack_exports__);
+    /* harmony import */ var _index_esm_js__WEBPACK_IMPORTED_MODULE_0__ =
+      __webpack_require__(/*! ./index-esm.js */ "./src/js/index-esm.js");
+    /* globals define */
+
+    ((root, factory) => {
+      if (typeof define === "function" && define.amd) {
+        define([], factory(root));
+      } else if (typeof exports === "object") {
+        module.exports = factory(root);
+      } else {
+        root.tocbot = factory(root);
+      }
+    })(typeof global !== "undefined" ? global : window || global, (root) => {
+      // Just return if its not a browser.
+      const supports =
+        !!root &&
+        !!root.document &&
+        !!root.document.querySelector &&
+        !!root.addEventListener; // Feature test
+      if (typeof window === "undefined" && !supports) {
+        return;
+      }
+
+      // Make tocbot available globally.
+      root.tocbot = _index_esm_js__WEBPACK_IMPORTED_MODULE_0__;
+
+      return _index_esm_js__WEBPACK_IMPORTED_MODULE_0__;
+    });
+  })();
+
+  /******/
+})();
+//# sourceMappingURL=main.js.map
diff --git a/waterfox/browser/components/preferences/images/autoblur_tab.gif b/waterfox/browser/components/preferences/images/autoblur_tab.gif
deleted file mode 100644
index 75cd47cf0f65..000000000000
Binary files a/waterfox/browser/components/preferences/images/autoblur_tab.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autoblur_tab.png b/waterfox/browser/components/preferences/images/autoblur_tab.png
new file mode 100644
index 000000000000..926872309706
Binary files /dev/null and b/waterfox/browser/components/preferences/images/autoblur_tab.png differ
diff --git a/waterfox/browser/components/preferences/images/autohide_back.gif b/waterfox/browser/components/preferences/images/autohide_back.gif
deleted file mode 100644
index 155b372a4c34..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_back.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autohide_back.png b/waterfox/browser/components/preferences/images/autohide_back.png
new file mode 100644
index 000000000000..4f217ed8bdbb
Binary files /dev/null and b/waterfox/browser/components/preferences/images/autohide_back.png differ
diff --git a/waterfox/browser/components/preferences/images/autohide_bookmarksbar.gif b/waterfox/browser/components/preferences/images/autohide_bookmarksbar.gif
deleted file mode 100644
index 7a067db564f7..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_bookmarksbar.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autohide_forward.gif b/waterfox/browser/components/preferences/images/autohide_forward.gif
deleted file mode 100644
index ae20d14581e9..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_forward.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autohide_forward.png b/waterfox/browser/components/preferences/images/autohide_forward.png
new file mode 100644
index 000000000000..00acdbed7a57
Binary files /dev/null and b/waterfox/browser/components/preferences/images/autohide_forward.png differ
diff --git a/waterfox/browser/components/preferences/images/autohide_navbar.gif b/waterfox/browser/components/preferences/images/autohide_navbar.gif
deleted file mode 100644
index 0f9cc53da6da..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_navbar.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autohide_pageaction.gif b/waterfox/browser/components/preferences/images/autohide_pageaction.gif
deleted file mode 100644
index 56f1ddccd1d3..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_pageaction.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autohide_sidebar.gif b/waterfox/browser/components/preferences/images/autohide_sidebar.gif
deleted file mode 100644
index 15cf1144dc48..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_sidebar.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autohide_sidebar.png b/waterfox/browser/components/preferences/images/autohide_sidebar.png
new file mode 100644
index 000000000000..1113c74ce06c
Binary files /dev/null and b/waterfox/browser/components/preferences/images/autohide_sidebar.png differ
diff --git a/waterfox/browser/components/preferences/images/autohide_tab.gif b/waterfox/browser/components/preferences/images/autohide_tab.gif
deleted file mode 100644
index 2c3deb032158..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_tab.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/autohide_tab.png b/waterfox/browser/components/preferences/images/autohide_tab.png
new file mode 100644
index 000000000000..2accc8b5d61d
Binary files /dev/null and b/waterfox/browser/components/preferences/images/autohide_tab.png differ
diff --git a/waterfox/browser/components/preferences/images/autohide_tabbar.gif b/waterfox/browser/components/preferences/images/autohide_tabbar.gif
deleted file mode 100644
index 523a27692827..000000000000
Binary files a/waterfox/browser/components/preferences/images/autohide_tabbar.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/bookmarkbar_icon.png b/waterfox/browser/components/preferences/images/bookmarkbar_icon.png
index b27ac6bebf83..3dac12af1e9a 100644
Binary files a/waterfox/browser/components/preferences/images/bookmarkbar_icon.png and b/waterfox/browser/components/preferences/images/bookmarkbar_icon.png differ
diff --git a/waterfox/browser/components/preferences/images/bookmarkbar_label.png b/waterfox/browser/components/preferences/images/bookmarkbar_label.png
index 4e9c693527ab..d879c066926b 100644
Binary files a/waterfox/browser/components/preferences/images/bookmarkbar_label.png and b/waterfox/browser/components/preferences/images/bookmarkbar_label.png differ
diff --git a/waterfox/browser/components/preferences/images/close_button_hover.png b/waterfox/browser/components/preferences/images/close_button_hover.png
index 1015a651741a..7d0c68b9ec80 100644
Binary files a/waterfox/browser/components/preferences/images/close_button_hover.png and b/waterfox/browser/components/preferences/images/close_button_hover.png differ
diff --git a/waterfox/browser/components/preferences/images/disabled_menu.png b/waterfox/browser/components/preferences/images/disabled_menu.png
index 9c9dff841e82..8601a528fed9 100644
Binary files a/waterfox/browser/components/preferences/images/disabled_menu.png and b/waterfox/browser/components/preferences/images/disabled_menu.png differ
diff --git a/waterfox/browser/components/preferences/images/disabled_menu_hidden.png b/waterfox/browser/components/preferences/images/disabled_menu_hidden.png
deleted file mode 100644
index 6e882e1cb105..000000000000
Binary files a/waterfox/browser/components/preferences/images/disabled_menu_hidden.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/disabled_menu_shown.png b/waterfox/browser/components/preferences/images/disabled_menu_shown.png
deleted file mode 100644
index c18c68de121f..000000000000
Binary files a/waterfox/browser/components/preferences/images/disabled_menu_shown.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/drag_space.png b/waterfox/browser/components/preferences/images/drag_space.png
index 941f73c5b783..b7d086988c9e 100644
Binary files a/waterfox/browser/components/preferences/images/drag_space.png and b/waterfox/browser/components/preferences/images/drag_space.png differ
diff --git a/waterfox/browser/components/preferences/images/full_panel_separator.png b/waterfox/browser/components/preferences/images/full_panel_separator.png
index 214620212d06..2b01e02e1999 100644
Binary files a/waterfox/browser/components/preferences/images/full_panel_separator.png and b/waterfox/browser/components/preferences/images/full_panel_separator.png differ
diff --git a/waterfox/browser/components/preferences/images/hide_iconbox.png b/waterfox/browser/components/preferences/images/hide_iconbox.png
index 04a2dd869092..0e2e77d7df00 100644
Binary files a/waterfox/browser/components/preferences/images/hide_iconbox.png and b/waterfox/browser/components/preferences/images/hide_iconbox.png differ
diff --git a/waterfox/browser/components/preferences/images/hide_tabicon.png b/waterfox/browser/components/preferences/images/hide_tabicon.png
deleted file mode 100644
index 19e863b7118d..000000000000
Binary files a/waterfox/browser/components/preferences/images/hide_tabicon.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/mac_icons.png b/waterfox/browser/components/preferences/images/mac_icons.png
index 1d2443da8497..d8abd88baf4b 100644
Binary files a/waterfox/browser/components/preferences/images/mac_icons.png and b/waterfox/browser/components/preferences/images/mac_icons.png differ
diff --git a/waterfox/browser/components/preferences/images/media_player.png b/waterfox/browser/components/preferences/images/media_player.png
deleted file mode 100644
index 199c779a3f3c..000000000000
Binary files a/waterfox/browser/components/preferences/images/media_player.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/monospace_font.png b/waterfox/browser/components/preferences/images/monospace_font.png
index 2e775b1b1b75..5ddd38f9635a 100644
Binary files a/waterfox/browser/components/preferences/images/monospace_font.png and b/waterfox/browser/components/preferences/images/monospace_font.png differ
diff --git a/waterfox/browser/components/preferences/images/monospace_theme.png b/waterfox/browser/components/preferences/images/monospace_theme.png
index 9b2f7cb2bfb4..c732fe0c196f 100644
Binary files a/waterfox/browser/components/preferences/images/monospace_theme.png and b/waterfox/browser/components/preferences/images/monospace_theme.png differ
diff --git a/waterfox/browser/components/preferences/images/navbar_center.png b/waterfox/browser/components/preferences/images/navbar_center.png
index 49d75c2e924c..f356b844e9df 100644
Binary files a/waterfox/browser/components/preferences/images/navbar_center.png and b/waterfox/browser/components/preferences/images/navbar_center.png differ
diff --git a/waterfox/browser/components/preferences/images/navbar_text.png b/waterfox/browser/components/preferences/images/navbar_text.png
deleted file mode 100644
index 4691f1697259..000000000000
Binary files a/waterfox/browser/components/preferences/images/navbar_text.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/no_drag_space.png b/waterfox/browser/components/preferences/images/no_drag_space.png
deleted file mode 100644
index 915d8acd1d0b..000000000000
Binary files a/waterfox/browser/components/preferences/images/no_drag_space.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/no_panel_separator.png b/waterfox/browser/components/preferences/images/no_panel_separator.png
index 348091b8bb6c..1b0c83d02425 100644
Binary files a/waterfox/browser/components/preferences/images/no_panel_separator.png and b/waterfox/browser/components/preferences/images/no_panel_separator.png differ
diff --git a/waterfox/browser/components/preferences/images/panel_animate.gif b/waterfox/browser/components/preferences/images/panel_animate.gif
deleted file mode 100644
index 0ff5ea673130..000000000000
Binary files a/waterfox/browser/components/preferences/images/panel_animate.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/panel_no_animate.gif b/waterfox/browser/components/preferences/images/panel_no_animate.gif
deleted file mode 100644
index 729fd8a14b90..000000000000
Binary files a/waterfox/browser/components/preferences/images/panel_no_animate.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/panel_separator.png b/waterfox/browser/components/preferences/images/panel_separator.png
index 6cb7bef7bcd8..c7c635d1f993 100644
Binary files a/waterfox/browser/components/preferences/images/panel_separator.png and b/waterfox/browser/components/preferences/images/panel_separator.png differ
diff --git a/waterfox/browser/components/preferences/images/show_tabicon.png b/waterfox/browser/components/preferences/images/show_tabicon.png
deleted file mode 100644
index a78efa724108..000000000000
Binary files a/waterfox/browser/components/preferences/images/show_tabicon.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/sidebar_animate.gif b/waterfox/browser/components/preferences/images/sidebar_animate.gif
deleted file mode 100644
index e9bbd80a3043..000000000000
Binary files a/waterfox/browser/components/preferences/images/sidebar_animate.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/sidebar_header.png b/waterfox/browser/components/preferences/images/sidebar_header.png
deleted file mode 100644
index dae23e547d09..000000000000
Binary files a/waterfox/browser/components/preferences/images/sidebar_header.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/sidebar_no_animate.gif b/waterfox/browser/components/preferences/images/sidebar_no_animate.gif
deleted file mode 100644
index 33ce24d0e8ff..000000000000
Binary files a/waterfox/browser/components/preferences/images/sidebar_no_animate.gif and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/sidebar_no_header.png b/waterfox/browser/components/preferences/images/sidebar_no_header.png
index f3a6be1f7bae..fabad60108c5 100644
Binary files a/waterfox/browser/components/preferences/images/sidebar_no_header.png and b/waterfox/browser/components/preferences/images/sidebar_no_header.png differ
diff --git a/waterfox/browser/components/preferences/images/smooth_button.png b/waterfox/browser/components/preferences/images/smooth_button.png
deleted file mode 100644
index 67fbf8d22636..000000000000
Binary files a/waterfox/browser/components/preferences/images/smooth_button.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/smooth_field.png b/waterfox/browser/components/preferences/images/smooth_field.png
deleted file mode 100644
index d62ba8b444ad..000000000000
Binary files a/waterfox/browser/components/preferences/images/smooth_field.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/smooth_panel.png b/waterfox/browser/components/preferences/images/smooth_panel.png
deleted file mode 100644
index a0e54fde98ad..000000000000
Binary files a/waterfox/browser/components/preferences/images/smooth_panel.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/smooth_popup.png b/waterfox/browser/components/preferences/images/smooth_popup.png
deleted file mode 100644
index f382e38da5ae..000000000000
Binary files a/waterfox/browser/components/preferences/images/smooth_popup.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/square_button.png b/waterfox/browser/components/preferences/images/square_button.png
index b8b38d634ce6..e9cc4ec7a61e 100644
Binary files a/waterfox/browser/components/preferences/images/square_button.png and b/waterfox/browser/components/preferences/images/square_button.png differ
diff --git a/waterfox/browser/components/preferences/images/square_button_compare.png b/waterfox/browser/components/preferences/images/square_button_compare.png
deleted file mode 100644
index bb7f25aecf60..000000000000
Binary files a/waterfox/browser/components/preferences/images/square_button_compare.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/square_field.png b/waterfox/browser/components/preferences/images/square_field.png
index 49fb0ba1f58a..3e2372716147 100644
Binary files a/waterfox/browser/components/preferences/images/square_field.png and b/waterfox/browser/components/preferences/images/square_field.png differ
diff --git a/waterfox/browser/components/preferences/images/square_panel.png b/waterfox/browser/components/preferences/images/square_panel.png
index a34175bf70b6..5c1c4f0b8c61 100644
Binary files a/waterfox/browser/components/preferences/images/square_panel.png and b/waterfox/browser/components/preferences/images/square_panel.png differ
diff --git a/waterfox/browser/components/preferences/images/square_popup.png b/waterfox/browser/components/preferences/images/square_popup.png
index 6a42b8dc1193..5f3809567d9b 100644
Binary files a/waterfox/browser/components/preferences/images/square_popup.png and b/waterfox/browser/components/preferences/images/square_popup.png differ
diff --git a/waterfox/browser/components/preferences/images/tab_center.png b/waterfox/browser/components/preferences/images/tab_center.png
index 19dffb6d809d..48b0f166ff70 100644
Binary files a/waterfox/browser/components/preferences/images/tab_center.png and b/waterfox/browser/components/preferences/images/tab_center.png differ
diff --git a/waterfox/browser/components/preferences/images/tab_contextline.png b/waterfox/browser/components/preferences/images/tab_contextline.png
new file mode 100644
index 000000000000..0b31ae1d7077
Binary files /dev/null and b/waterfox/browser/components/preferences/images/tab_contextline.png differ
diff --git a/waterfox/browser/components/preferences/images/tab_label.png b/waterfox/browser/components/preferences/images/tab_label.png
index 9052a8a22bc0..7d5f063e5c00 100644
Binary files a/waterfox/browser/components/preferences/images/tab_label.png and b/waterfox/browser/components/preferences/images/tab_label.png differ
diff --git a/waterfox/browser/components/preferences/images/tab_normal.png b/waterfox/browser/components/preferences/images/tab_normal.png
deleted file mode 100644
index 1960eb0faa7e..000000000000
Binary files a/waterfox/browser/components/preferences/images/tab_normal.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/tab_square.png b/waterfox/browser/components/preferences/images/tab_square.png
index 5a7d09c8f392..9d8f992d693b 100644
Binary files a/waterfox/browser/components/preferences/images/tab_square.png and b/waterfox/browser/components/preferences/images/tab_square.png differ
diff --git a/waterfox/browser/components/preferences/images/urlbar_iconbox.png b/waterfox/browser/components/preferences/images/urlbar_iconbox.png
deleted file mode 100644
index 4691f1697259..000000000000
Binary files a/waterfox/browser/components/preferences/images/urlbar_iconbox.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/images/urlbar_no_iconbox.png b/waterfox/browser/components/preferences/images/urlbar_no_iconbox.png
deleted file mode 100644
index 846fcd6e3187..000000000000
Binary files a/waterfox/browser/components/preferences/images/urlbar_no_iconbox.png and /dev/null differ
diff --git a/waterfox/browser/components/preferences/jar.mn b/waterfox/browser/components/preferences/jar.mn
index fb553c2447fb..28f6848b5e20 100644
--- a/waterfox/browser/components/preferences/jar.mn
+++ b/waterfox/browser/components/preferences/jar.mn
@@ -5,6 +5,8 @@ browser.jar:
      content/browser/overlays/general.js                           (content/general.js)
      content/browser/overlays/privacy.js                           (content/privacy.js)
      content/browser/overlays/theme.js                             (content/theme.js)
+     content/browser/overlays/tocbot.js                            (content/tocbot.js)
+     content/browser/overlays/tocbot.css                           (content/tocbot.css)
      content/browser/overlays/images                               (images/**)
 
 %   resource waterfox %waterfox/ contentaccessible=yes
diff --git a/waterfox/browser/themes/waterfox/general.css b/waterfox/browser/themes/waterfox/general.css
index 9cc0e625d51c..7122a5f2d975 100644
--- a/waterfox/browser/themes/waterfox/general.css
+++ b/waterfox/browser/themes/waterfox/general.css
@@ -53,6 +53,7 @@
     bottom: 125%;
     left: 50%;
     margin-left: -80px;
+    max-height: 400px;
 }
 
 .popup-container .show {
@@ -73,15 +74,11 @@
 }
 
 #autoHideTabsImage {
-  content: url("chrome://browser/content/overlays/images/autohide_tab.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_tab.png");
 }
 
 #autoBlurTabsImage {
-  content: url("chrome://browser/content/overlays/images/autoblur_tab.gif");
-}
-
-#autoHideTabBarImage {
-  content: url("chrome://browser/content/overlays/images/autohide_tabbar.gif");
+  content: url("chrome://browser/content/overlays/images/autoblur_tab.png");
 }
 
 #centerTabContentImage {
@@ -96,10 +93,6 @@
   content: url("chrome://browser/content/overlays/images/tab_square.png");
 }
 
-#smoothTabEdgesImage {
-  content: url("chrome://browser/content/overlays/images/tab_normal.png");
-}
-
 #dragSpaceImage {
   content: url("chrome://browser/content/overlays/images/drag_space.png");
 }
@@ -109,15 +102,11 @@
 }
 
 #autoHideBackImage {
-  content: url("chrome://browser/content/overlays/images/autohide_back.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_back.png");
 }
 
 #autoHideForwardImage {
-  content: url("chrome://browser/content/overlays/images/autohide_forward.gif");
-}
-
-#autoHidePageActionImage {
-  content: url("chrome://browser/content/overlays/images/autohide_pageaction.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_forward.png");
 }
 
 #hideNavBarIconBoxImage {
@@ -129,11 +118,7 @@
 }
 
 #squareButtonEdgesImage {
-  content: url("chrome://browser/content/overlays/images/square_button_compare.png");
-}
-
-#autoHideBookmarkBarImage {
-  content: url("chrome://browser/content/overlays/images/autohide_bookmarksbar.gif");
+  content: url("chrome://browser/content/overlays/images/square_button.png");
 }
 
 #hideBookmbarkBarIconImage {
@@ -176,12 +161,8 @@
   content: url("chrome://browser/content/overlays/images/full_panel_separator.png");
 }
 
-#disableSidebarAnimateImage {
-  content: url("chrome://browser/content/overlays/images/sidebar_no_animate.gif");
-}
-
 #autoHideSidebarImage {
-  content: url("chrome://browser/content/overlays/images/autohide_sidebar.gif");
+  content: url("chrome://browser/content/overlays/images/autohide_sidebar.png");
 }
 
 #hideSidebarHeaderImage {
@@ -192,6 +173,11 @@
   content: url("chrome://browser/content/overlays/images/mac_icons.png");
 }
 
-#twolineMediaPlayerImage {
-  content: url("chrome://browser/content/overlays/images/media_player.png");
+#contextLineImage {
+  content: url("chrome://browser/content/overlays/images/tab_contextline.png");
+}
+
+/* Prevent any horizontal scrolling on about:preferences */
+#preferences-body .main-content {
+  overflow-x: hidden !important;
 }