diff --git a/web/app.js b/web/app.js
index 5dec14086101a..20976ae651c44 100644
--- a/web/app.js
+++ b/web/app.js
@@ -393,7 +393,7 @@ const PDFViewerApplication = {
     const { appConfig, externalServices, l10n } = this;
     let eventBus;
     if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
-      eventBus = new FirefoxEventBus(
+      eventBus = this.preferences.eventBus = new FirefoxEventBus(
         await this._allowedGlobalEventsPromise,
         externalServices,
         AppOptions.get("isInAutomation")
@@ -569,7 +569,11 @@ const PDFViewerApplication = {
           await this._nimbusDataPromise
         );
       } else {
-        this.toolbar = new Toolbar(appConfig.toolbar, eventBus);
+        this.toolbar = new Toolbar(
+          appConfig.toolbar,
+          eventBus,
+          AppOptions.get("toolbarDensity")
+        );
       }
     }
 
diff --git a/web/app_options.js b/web/app_options.js
index 3df0a95c244ad..e111ae44b7b15 100644
--- a/web/app_options.js
+++ b/web/app_options.js
@@ -95,6 +95,11 @@ const defaultOptions = {
     value: true,
     kind: OptionKind.BROWSER,
   },
+  toolbarDensity: {
+    /** @type {number} */
+    value: 0, // 0 = "normal", 1 = "compact", 2 = "touch"
+    kind: OptionKind.BROWSER,
+  },
 
   annotationEditorMode: {
     /** @type {number} */
diff --git a/web/preferences.js b/web/preferences.js
index 15da2cc584440..d181d1add0960 100644
--- a/web/preferences.js
+++ b/web/preferences.js
@@ -37,6 +37,8 @@ class BasePreferences {
 
   #initializedPromise = null;
 
+  static #eventToDispatch = new Set(["toolbarDensity"]);
+
   constructor() {
     if (this.constructor === BasePreferences) {
       throw new Error("Cannot initialize BasePreferences.");
@@ -73,6 +75,10 @@ class BasePreferences {
         }
       }
     );
+
+    if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) {
+      this.eventBus = null;
+    }
   }
 
   /**
@@ -113,6 +119,10 @@ class BasePreferences {
       return; // Invalid preference.
     }
     AppOptions.set(name, value);
+
+    if (BasePreferences.#eventToDispatch.has(name)) {
+      this.eventBus?.dispatch(name.toLowerCase(), { source: this, value });
+    }
   }
 
   /**
diff --git a/web/toolbar.js b/web/toolbar.js
index e92b546c4aad4..f37b5d4046d7e 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -50,8 +50,13 @@ class Toolbar {
   /**
    * @param {ToolbarOptions} options
    * @param {EventBus} eventBus
+   * @param {number} toolbarDensity - The toolbar density value.
+   *   The possible values are:
+   *    - 0 (default) - The regular toolbar size.
+   *    - 1 (compact) - The small toolbar size.
+   *    - 2 (touch) - The large toolbar size.
    */
-  constructor(options, eventBus) {
+  constructor(options, eventBus, toolbarDensity = 0) {
     this.#opts = options;
     this.eventBus = eventBus;
     const buttons = [
@@ -136,9 +141,14 @@ class Toolbar {
       }
     });
 
+    eventBus._on("toolbardensity", this.#updateToolbarDensity.bind(this));
+    this.#updateToolbarDensity({ value: toolbarDensity });
+
     this.reset();
   }
 
+  #updateToolbarDensity() {}
+
   #setAnnotationEditorUIManager(uiManager, parentContainer) {
     const colorPicker = new ColorPicker({ uiManager });
     uiManager.setMainHighlightColorPicker(colorPicker);