diff --git a/browser/components/preferences/moreFromMozilla.inc.xhtml b/browser/components/preferences/moreFromMozilla.inc.xhtml
index 78e6bda77d76..f8cc99ecd894 100644
--- a/browser/components/preferences/moreFromMozilla.inc.xhtml
+++ b/browser/components/preferences/moreFromMozilla.inc.xhtml
@@ -5,63 +5,62 @@
 <!-- More From Mozilla panel -->
 
 <script src="chrome://browser/content/preferences/moreFromMozilla.js"/>
-<html:template id="template-paneMoreFromMozilla">
-  <vbox id="moreFromMozillaCategory-header"
+<html:template xmlns="http://www.w3.org/1999/xhtml" id="template-paneMoreFromMozilla">
+  <div id="moreFromMozillaCategory-header"
     class="subcategory"
     data-hidden-from-search="true"
     hidden="true"
     data-category="paneMoreFromMozilla">
-    <html:h1 class="title" data-l10n-id="more-from-moz-title" />
-    <html:p class="subtitle" data-l10n-id="more-from-moz-subtitle" />
-  </vbox>
-  <groupbox id="moreFromMozillaCategory"
+    <h1 class="title" data-l10n-id="more-from-moz-title" />
+    <p class="subtitle" data-l10n-id="more-from-moz-subtitle" />
+  </div>
+  <div id="moreFromMozillaCategory"
     data-category="paneMoreFromMozilla"
     hidden="true"
     data-hidden-from-search="true">
-  </groupbox>
-</html:template>
-<html:template id="simple">
-  <html:div class="mozilla-product-item simple">
-    <hbox>
-      <label>
-        <html:h2 class="product-title" />
-      </label>
-    </hbox>
-    <hbox>
-      <html:p class="description" />
-      <html:a class="text-link wants-telemetry" hidden="true" />
-    </hbox>
-    <html:div>
-      <button class="primary small-button" hidden="true" />
-    </html:div>
-    <html:div class="qr-code-box" hidden="true">
-      <label class="qr-code-title-label">
-        <html:h3 class="qr-code-box-title" />
-      </label>
-      <html:img class="qr-code-box-image" />
-      <html:a class="wants-telemetry qr-code-button text-link" target="_blank" />
-    </html:div>
-  </html:div>
+  </div>
 </html:template>
 
-<html:template id="advanced">
-  <vbox class="mozilla-product-item advanced">
-    <hbox class="product-img">
-      <vbox class="product-info" flex="1">
-        <label>
-          <html:h2 class="product-title" />
-        </label>
-        <html:p class="description" />
-        <html:a class="text-link wants-telemetry" hidden="true" />
-        <html:div><button class="primary small-button" hidden="true"/></html:div>
-      </vbox>
-      <html:div class="qr-code-box" hidden="true">
-        <html:div class="qr-code-top-box">
-          <html:h3 class="qr-code-box-title" />
-          <html:img class="qr-code-box-image" role="presentation" />
-        </html:div>
-        <html:a class="qr-code-button text-link wants-telemetry" target="_blank" />
-      </html:div>
-    </hbox>
-  </vbox>
+<html:template xmlns="http://www.w3.org/1999/xhtml" id="simple">
+  <article class="mozilla-product-item simple">
+
+    <div>
+      <h2 class="product-title" />
+      <div class="product-description-box">
+        <div class="description" />
+        <a class="text-link wants-telemetry" hidden="true" />
+      </div>
+    </div>
+
+    <button type="button" class="primary small-button" hidden="true" />
+
+    <div class="qr-code-box" hidden="true">
+      <h3 class="qr-code-box-title" />
+      <img class="qr-code-box-image" />
+      <a class="wants-telemetry qr-code-link text-link" target="_blank" />
+    </div>
+
+  </article>
+</html:template>
+
+<html:template xmlns="http://www.w3.org/1999/xhtml" id="advanced">
+  <div class="mozilla-product-item advanced">
+    <div class="product-img">
+      <div class="product-info" flex="1">
+        <h2 class="product-title" />
+        <p class="description" />
+        <a class="text-link wants-telemetry" hidden="true" />
+        <div>
+          <button type="button" class="primary small-button" hidden="true"/>
+        </div>
+      </div>
+      <div class="qr-code-box" hidden="true">
+        <div class="qr-code-top-box">
+          <h3 class="qr-code-box-title" />
+          <img class="qr-code-box-image" role="presentation" />
+        </div>
+        <a class="qr-code-link text-link wants-telemetry" target="_blank" />
+      </div>
+    </div>
+  </div>
 </html:template>
diff --git a/browser/components/preferences/moreFromMozilla.js b/browser/components/preferences/moreFromMozilla.js
index 1bfaf9ea5b6a..06085186321e 100644
--- a/browser/components/preferences/moreFromMozilla.js
+++ b/browser/components/preferences/moreFromMozilla.js
@@ -122,7 +122,7 @@ var gMoreFromMozillaPane = {
         region: "global",
         button: {
           id: "mozillaVPN",
-          label_string_id: "more-from-moz-button-mozilla-vpn",
+          label_string_id: "more-from-moz-button-mozilla-vpn-2",
           actionURL: "https://www.mozilla.org/products/vpn/",
         },
       };
@@ -137,7 +137,7 @@ var gMoreFromMozillaPane = {
         region: "na",
         button: {
           id: "mozillaRally",
-          label_string_id: "more-from-moz-button-mozilla-rally",
+          label_string_id: "more-from-moz-button-mozilla-rally-2",
           actionURL: "https://rally.mozilla.org/",
         },
       };
@@ -167,7 +167,9 @@ var gMoreFromMozillaPane = {
       if (this.option === "advanced") {
         // So that we can build a selector that applies to .product-info differently
         // for different products.
-        template.querySelector("vbox.advanced").id = `${product.id}-vbox`;
+        template.querySelector(
+          ".mozilla-product-item.advanced"
+        ).id = `${product.id}-div`;
 
         template.querySelector(".product-img").id = `${product.id}-image`;
         desc.setAttribute(
@@ -186,8 +188,8 @@ var gMoreFromMozillaPane = {
       if (actionElement) {
         actionElement.hidden = false;
         actionElement.id = `${this.option}-${product.button.id}`;
-        actionElement.setAttribute(
-          "data-l10n-id",
+        document.l10n.setAttributes(
+          actionElement,
           product.button.label_string_id
         );
 
@@ -198,7 +200,7 @@ var gMoreFromMozillaPane = {
           );
           actionElement.setAttribute("target", "_blank");
         } else {
-          actionElement.addEventListener("command", function() {
+          actionElement.addEventListener("click", function() {
             let mainWindow = window.windowRoot.ownerGlobal;
             mainWindow.openTrustedLinkIn(
               gMoreFromMozillaPane.getURL(
@@ -242,24 +244,19 @@ var gMoreFromMozillaPane = {
           "more-from-moz-qr-code-firefox-mobile-img"
         );
 
-        // Note that the QR code image itself is _not_ a link; this is a link that
-        // is directly below the image.
-        let qrc_btn = template.querySelector(".qr-code-button");
+        let qrc_link = template.querySelector(".qr-code-link");
 
         // So the telemetry includes info about which option is being used
-        qrc_btn.id = `${this.option}-${product.qrcode.button.id}`;
-        qrc_btn.setAttribute(
+        qrc_link.id = `${this.option}-${product.qrcode.button.id}`;
+        qrc_link.setAttribute(
           "data-l10n-id",
           product.qrcode.button.label.string_id
         );
-        qrc_btn.setAttribute(
-          "href",
-          this.getURL(
-            product.qrcode.button.actionURL,
-            product.region,
-            this.option,
-            true
-          )
+        qrc_link.href = this.getURL(
+          product.qrcode.button.actionURL,
+          product.region,
+          this.option,
+          true
         );
       }
 
diff --git a/browser/components/preferences/tests/browser_moreFromMozilla.js b/browser/components/preferences/tests/browser_moreFromMozilla.js
index e1587b2cfe2b..e200b2aa852a 100644
--- a/browser/components/preferences/tests/browser_moreFromMozilla.js
+++ b/browser/components/preferences/tests/browser_moreFromMozilla.js
@@ -35,14 +35,9 @@ add_task(async function testDefaultUIWithoutTemplatePref() {
   ok(moreFromMozillaCategory, "The category exists");
   ok(!moreFromMozillaCategory.hidden, "The category is not hidden");
 
-  let clickedPromise = ContentTaskUtils.waitForEvent(
-    moreFromMozillaCategory,
-    "click"
-  );
   moreFromMozillaCategory.click();
-  await clickedPromise;
 
-  let productCards = doc.querySelectorAll("div.simple");
+  let productCards = doc.querySelectorAll(".mozilla-product-item.simple");
   Assert.ok(productCards, "Default UI uses simple template");
   Assert.equal(productCards.length, 3, "3 product cards displayed");
 
@@ -164,14 +159,9 @@ add_task(async function test_aboutpreferences_simple_template() {
     "category-more-from-mozilla"
   );
 
-  let clickedPromise = ContentTaskUtils.waitForEvent(
-    moreFromMozillaCategory,
-    "click"
-  );
   moreFromMozillaCategory.click();
-  await clickedPromise;
 
-  let productCards = doc.querySelectorAll("div.simple");
+  let productCards = doc.querySelectorAll(".mozilla-product-item");
   Assert.ok(productCards, "The product cards from simple template found");
   Assert.equal(productCards.length, 3, "3 product cards displayed");
 
@@ -198,14 +188,9 @@ add_task(async function test_aboutpreferences_advanced_template() {
     "category-more-from-mozilla"
   );
 
-  let clickedPromise = ContentTaskUtils.waitForEvent(
-    moreFromMozillaCategory,
-    "click"
-  );
   moreFromMozillaCategory.click();
-  await clickedPromise;
 
-  let productCards = doc.querySelectorAll("vbox.advanced");
+  let productCards = doc.querySelectorAll(".mozilla-product-item.advanced");
   Assert.ok(productCards, "The product cards from advanced template found");
   Assert.equal(productCards.length, 3, "3 product cards displayed");
   Assert.deepEqual(
@@ -236,15 +221,17 @@ add_task(async function test_aboutpreferences_clickBtnVPN() {
   let doc = gBrowser.contentDocument;
   let tab = gBrowser.selectedTab;
 
-  let productCards = doc.querySelectorAll("vbox.simple");
+  let productCards = doc.querySelectorAll(".mozilla-product-item.simple");
   Assert.ok(productCards, "Simple template loaded");
 
   const expectedUrl = "https://www.mozilla.org/products/vpn/";
   let tabOpened = BrowserTestUtils.waitForNewTab(gBrowser, url =>
     url.startsWith(expectedUrl)
   );
+
   let vpnButton = doc.getElementById("simple-mozillaVPN");
-  vpnButton.doCommand();
+  vpnButton.click();
+
   let openedTab = await tabOpened;
   Assert.ok(gBrowser.selectedBrowser.documentURI.spec.startsWith(expectedUrl));
 
diff --git a/browser/locales/en-US/browser/preferences/moreFromMozilla.ftl b/browser/locales/en-US/browser/preferences/moreFromMozilla.ftl
index a8da70b5dfa4..1cce1f7bf669 100644
--- a/browser/locales/en-US/browser/preferences/moreFromMozilla.ftl
+++ b/browser/locales/en-US/browser/preferences/moreFromMozilla.ftl
@@ -25,15 +25,13 @@ more-from-moz-mozilla-rally-description = Put your data to work for a better int
 # This string is specific to the product Mozilla Rally which is US only.
 more-from-moz-mozilla-rally-description-advanced = Donate your data to research studies working to create a safer, more open internet that helps people, not Big Tech.
 # This string is specific to the product Mozilla Rally which is US only.
-more-from-moz-button-mozilla-rally =
-  .label = Join { -rally-short-name }
+more-from-moz-button-mozilla-rally-2 = Join { -rally-short-name }
 
 more-from-moz-qr-code-box-firefox-mobile-title = Download using your mobile device. Point your camera at the QR code. When a link appears, tap it.
 more-from-moz-qr-code-box-firefox-mobile-button = Send an email to your phone instead
 more-from-moz-qr-code-firefox-mobile-img =
   .alt = QR code to download { -brand-product-name } Mobile
 
-more-from-moz-button-mozilla-vpn =
-  .label = Get VPN
+more-from-moz-button-mozilla-vpn-2 = Get VPN
 
 more-from-moz-learn-more-link = Learn more
diff --git a/browser/themes/shared/preferences/preferences.inc.css b/browser/themes/shared/preferences/preferences.inc.css
index a45402cd4ade..3ddf2040ef64 100644
--- a/browser/themes/shared/preferences/preferences.inc.css
+++ b/browser/themes/shared/preferences/preferences.inc.css
@@ -1198,9 +1198,13 @@ richlistitem .text-link:hover {
   margin-inline-start: 6px;
 }
 
+#moreFromMozillaCategory-header .title {
+  margin-block-end: 4px;
+}
+
 #moreFromMozillaCategory-header .subtitle {
   color: var(--in-content-text-color);
-  margin: 4px 0 10px;
+  margin-block-end: 24px;
   line-height: 1.4em;
 }
 
@@ -1209,7 +1213,7 @@ richlistitem .text-link:hover {
 }
 
 #moreFromMozillaCategory .product-title {
-  margin: 4px 0;
+  margin: 4px 0 3px;
   background-repeat: no-repeat;
   background-size: contain;
   padding-inline-start: 30px;
@@ -1226,8 +1230,8 @@ richlistitem .text-link:hover {
 /* The firefox-mobile product has three columns and needs to constrain the
  * .product-info section to one of them.
  */
-#firefox-mobile-vbox.advanced .product-info {
-  min-width: 200px;
+#firefox-mobile-div.advanced .product-info {
+  max-width: 200px;
 }
 
 #moreFromMozillaCategory .product-img {
@@ -1242,6 +1246,7 @@ richlistitem .text-link:hover {
 }
 
 #moreFromMozillaCategory .description {
+  display: inline flow-root;
   color: var(--in-content-text-color);
   padding-inline-start: 30px;
   margin: 2px 0;
@@ -1253,7 +1258,7 @@ richlistitem .text-link:hover {
 }
 
 #moreFromMozillaCategory .small-button {
-  margin-block: 16px;
+  margin-block: 14px 2px;
   margin-inline: 30px 0;
 }
 
@@ -1261,7 +1266,7 @@ richlistitem .text-link:hover {
   margin: 24px 0;
 }
 
-#moreFromMozillaCategory vbox.advanced {
+#moreFromMozillaCategory .mozilla-product-item.advanced {
   box-shadow: 0 2px 6px rgba(58, 57, 68, 0.2);
   border-radius: 4px;
 
@@ -1271,7 +1276,7 @@ richlistitem .text-link:hover {
 }
 
 @media (prefers-color-scheme: dark) {
-  #moreFromMozillaCategory vbox.advanced {
+  #moreFromMozillaCategory .mozilla-product-item.advanced {
     background-color: rgb(66, 65, 77);
   }
 }
@@ -1282,12 +1287,13 @@ richlistitem .text-link:hover {
 
 #moreFromMozillaCategory .text-link {
   line-height: 1.4em;
+
   margin-block: 2px 0;
   margin-inline: 6px 0;
 }
 
 #moreFromMozillaCategory .simple .text-link {
-  display: block;
+  display: inline flow-root;
   margin-inline-start: 4px;
 }
 
@@ -1308,6 +1314,10 @@ richlistitem .text-link:hover {
   background-image: url("chrome://browser/skin/preferences/img-mobile.svg");
 }
 
+.advanced #firefox-mobile-image {
+  display: flex;
+}
+
 #mozilla-vpn-image {
   background-image: url("chrome://browser/skin/preferences/img-vpn.svg");
 }
@@ -1323,13 +1333,13 @@ richlistitem .text-link:hover {
 .qr-code-box:not([hidden="true"]) {
   max-width: 320px; /* a unit better than px for this & next? */
   min-height: 204px;
-  margin-block: 10px;
+  margin-block: 10px 0;
   margin-inline-start: 30px;
   background-color: var(--in-content-box-info-background);
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-around;
+  justify-content: space-evenly;
   border-radius: 4px;
 }
 
@@ -1381,7 +1391,7 @@ richlistitem .text-link:hover {
 
 .qr-code-box-title {
   font-size: .87em;
-  font-weight: 600;
+  font-weight: normal;
   line-height: 1.42em;
 
   text-align: center;
@@ -1391,11 +1401,13 @@ richlistitem .text-link:hover {
 }
 
 .simple .qr-code-box-title {
-  width: 302px;
+  margin-block: 0;
+  width: 296px;
 }
 
 .simple .qr-code-box {
-  padding: 4px 20px 24px;
+  padding-inline: 24px;
+  padding-block: 20px
 }
 
 .simple .qr-code-box-image {
@@ -1408,18 +1420,16 @@ richlistitem .text-link:hover {
   margin-block: revert;
 }
 
-#moreFromMozillaCategory .qr-code-button {
+#moreFromMozillaCategory .qr-code-link {
   font-size: .87em;
-  font-weight: 400;
   line-height: 1.42em;
-  flex: 2 0 auto;
-  margin-block-start: 10px;
+  margin-block-start: 0;
   margin-inline: 0; /* make sure we're correctly centered by overriding button rule */
 }
 
-#moreFromMozillaCategory .advanced .qr-code-button {
+#moreFromMozillaCategory .advanced .qr-code-link {
   margin-inline: 16px;
-  padding-block-start: 30px;
+  margin-block-start: 30px;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/python/l10n/fluent_migrations/bug_1746509_more_from_mozilla_labels.py b/python/l10n/fluent_migrations/bug_1746509_more_from_mozilla_labels.py
new file mode 100644
index 000000000000..98caab859f78
--- /dev/null
+++ b/python/l10n/fluent_migrations/bug_1746509_more_from_mozilla_labels.py
@@ -0,0 +1,25 @@
+# coding=utf8
+
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from __future__ import absolute_import
+from fluent.migrate.helpers import transforms_from
+from fluent.migrate import COPY_PATTERN
+
+
+def migrate(ctx):
+    """Bug 1746509 - More from Mozilla XUL to HTML refactor, part {index}"""
+    ctx.add_transforms(
+        "browser/browser/preferences/moreFromMozilla.ftl",
+        "browser/browser/preferences/moreFromMozilla.ftl",
+        transforms_from(
+            """
+more-from-moz-button-mozilla-rally-2 =
+    { COPY_PATTERN(from_path, "more-from-moz-button-mozilla-rally.label") }
+more-from-moz-button-mozilla-vpn-2 =
+    { COPY_PATTERN(from_path, "more-from-moz-button-mozilla-vpn.label") }
+""",
+            from_path="browser/browser/preferences/moreFromMozilla.ftl",
+        ),
+    )