--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -217,31 +217,25 @@
 
       function initPage()
       {
         var err = getErrorCode();
         gIsCertError = (err == "nssBadCert");
 
         // if it's an unknown error or there's no title or description
         // defined, get the generic message
-        var errTitle = document.getElementById("et_" + err);
-        var errDesc  = document.getElementById("ed_" + err);
+        var errTitle = document.getElementById("et_" + err).innerHTML;
+        var errDesc  = document.getElementById("ed_" + err).innerHTML;
         if (!errTitle || !errDesc)
         {
-          errTitle = document.getElementById("et_generic");
-          errDesc  = document.getElementById("ed_generic");
+          errTitle = document.getElementById("et_generic").innerHTML;
+          errDesc  = document.getElementById("ed_generic").innerHTML;
         }
 
-        var title = document.getElementById("errorTitleText");
-        if (title)
-        {
-          title.parentNode.replaceChild(errTitle, title);
-          // change id to the replaced child's id so styling works
-          errTitle.id = "errorTitleText";
-        }
+        document.querySelector(".title-text").innerHTML = errTitle;
 
         var sd = document.getElementById("errorShortDescText");
         if (sd) {
           if (gIsCertError) {
             sd.innerHTML = document.getElementById("ed_nssBadCert").innerHTML;
           }
           else {
             sd.textContent = getDescription();
@@ -250,32 +244,30 @@
         if (gIsCertError) {
           initPageCertError();
           return;
         }
 
         var ld = document.getElementById("errorLongDesc");
         if (ld)
         {
-          ld.parentNode.replaceChild(errDesc, ld);
-          // change id to the replaced child's id so styling works
-          errDesc.id = "errorLongDesc";
+          ld.innerHTML = errDesc;
         }
 
         if (err == "sslv3Used") {
-          document.getElementById("errorTitle").setAttribute("sslv3", "true");
+          document.querySelector(".title").setAttribute("sslv3", "true");
           document.getElementById("errorTryAgain").style.display = "none";
           document.getElementById("learnMoreContainer").style.display = "block";
           var learnMoreLink = document.getElementById("learnMoreLink");
           learnMoreLink.href = "https://support.mozilla.org/kb/how-resolve-sslv3-error-messages-firefox";
           document.getElementById("buttonContainer").style.display = "flex";
         }
 
         if (err == "weakCryptoUsed") {
-          document.getElementById("errorTitle").setAttribute("weakCrypto", "true");
+          document.querySelector(".title").setAttribute("weakCrypto", "true");
         }
 
         // remove undisplayed errors to avoid bug 39098
         var errContainer = document.getElementById("errorContainer");
         errContainer.parentNode.removeChild(errContainer);
 
         var className = getCSSClass();
         if (className && className != "expertBadCert") {
@@ -535,21 +527,21 @@
         <div id="ed_remoteXUL">&remoteXUL.longDesc;</div>
         <div id="ed_corruptedContentError">&corruptedContentError.longDesc;</div>
         <div id="ed_sslv3Used">&sslv3Used.longDesc2;</div>
         <div id="ed_weakCryptoUsed">&weakCryptoUsed.longDesc2;</div>
       </div>
     </div>
 
     <!-- PAGE CONTAINER (for styling purposes only) -->
-    <div id="errorPageContainer">
+    <div id="errorPageContainer" class="container">
 
       <!-- Error Title -->
-      <div id="errorTitle">
-        <h1 id="errorTitleText" />
+      <div class="title">
+        <h1 class="title-text"/>
       </div>
 
       <!-- LONG CONTENT (the section most likely to require scrolling) -->
       <div id="errorLongContent">
 
         <!-- Short Description -->
         <div id="errorShortDesc">
           <p id="errorShortDescText" />
@@ -558,24 +550,24 @@
 
         <!-- Long Description (Note: See netError.dtd for used XHTML tags) -->
         <div id="errorLongDesc" />
 
         <div id="learnMoreContainer">
           <p><a href="https://support.mozilla.org/kb/what-does-your-connection-is-not-secure-mean" id="learnMoreLink" target="new">&errorReporting.learnMore;</a></p>
         </div>
 
-        <div id="buttonContainer">
-          <button id="returnButton" autocomplete="off" autofocus="true">&returnToPreviousPage.label;</button>
+        <div id="buttonContainer" class="button-container">
+          <button id="returnButton" class="primary" autocomplete="off" autofocus="true">&returnToPreviousPage.label;</button>
           <div id="buttonSpacer"></div>
           <button id="advancedButton" autocomplete="off" autofocus="true">&advanced.label;</button>
         </div>
       </div>
 
-      <button id="errorTryAgain" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
+      <button id="errorTryAgain" class="primary" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
       <script>
         // Only do autofocus if we're the toplevel frame; otherwise we
         // don't want to call attention to ourselves!  The key part is
         // that autofocus happens on insertion into the tree, so we
         // can remove the button, add @autofocus, and reinsert the
         // button.
         if (window.top == window) {
             var button = document.getElementById("errorTryAgain");
@@ -591,27 +583,27 @@
            init for other error types .-->
       <div id="certificateErrorReporting">
         <p>
           <input type="checkbox" id="automaticallyReportInFuture" />
           <label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic2;</label>
         </p>
       </div>
 
-      <div id="weakCryptoAdvancedPanel">
+      <div id="weakCryptoAdvancedPanel" class="advanced-panel">
         <div id="weakCryptoAdvancedDescription">
           <p>&weakCryptoAdvanced.longDesc;</p>
         </div>
         <div id="advancedLongDesc" />
         <div id="overrideWeakCryptoPanel">
           <a id="overrideWeakCrypto" href="#">&weakCryptoAdvanced.override;</a>
         </div>
       </div>
 
-      <div id="badCertAdvancedPanel">
+      <div id="badCertAdvancedPanel" class="advanced-panel">
         <p id="badCertTechnicalInfo"/>
         <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
       </div>
 
     </div>
 
     <div id="certificateErrorDebugInformation">
       <a name="technicalInformation"></a>

--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -1,135 +1,62 @@
 /* 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/. */
 
-@import url("chrome://global/skin/in-content/common.css");
-
-body {
-  display: flex;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 0 48px;
-  align-items: center;
-  justify-content: center;
-}
-
-ul, ol {
-  margin: 0;
-  padding: 0;
-  -moz-margin-start: 1em;
-}
-
-ul > li, ol > li {
-  margin-bottom: .5em;
-}
-
-ul {
-  list-style: disc;
-}
+@import url("chrome://global/skin/in-content/info-pages.css");
 
-#errorPageContainer {
-  position: relative;
-  min-width: 320px;
-  max-width: 512px;
-}
-
-#errorTitle {
-  background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat;
-  background-size: 3em;
-  -moz-margin-start: -5em;
-  -moz-padding-start: 5em;
-}
-
-body.certerror #errorTitle {
-  background-image: url("chrome://browser/skin/cert-error.svg");
-}
-
-#errorTitleText {
-  border-bottom: 1px solid #C1C1C1;
-  padding-bottom: 0.4em;
-}
-
-#errorTitleText:-moz-dir(rtl) {
-  background-position: right 0;
-}
-
-#errorTitle[sslv3=true],
-#errorTitle[weakCrypto=true] {
+body.certerror .title,
+.title[sslv3=true],
+.title[weakCrypto=true] {
   background-image: url("cert-error.svg");
 }
 
-#errorTryAgain {
-  margin-top: 1.2em;
-  min-width: 150px
-}
-
 #errorContainer {
   display: none;
 }
 
-@media (max-width: 675px) {
-  #errorTitle,
-  #errorTitle[sslv3=true],
-  #errorTitle[weakCrypto=true] {
-    padding-top: 0;
-    background-image: none;
-    -moz-padding-start: 0;
-    -moz-margin-start: 0;
-  }
-}
-
 /* Pressing the retry button will cause the cursor to flicker from a pointer to
  * not-allowed. Override the disabled cursor behaviour since we will never show
  * the button disabled as the initial state. */
 button:disabled {
   cursor: pointer;
 }
 
 #learnMoreContainer {
   display: none;
 }
 
 #buttonContainer {
   display: none;
   flex-flow: row wrap;
 }
 
+#errorTryAgain {
+  margin-top: 1.2em;
+  min-width: 150px;
+}
+
+#returnButton {
+  min-width: 250px;
+}
+
 #buttonSpacer {
   flex: 1;
 }
 
-#returnButton {
-  background-color: var(--in-content-primary-button-background);
-  border: none;
-  color: var(--in-content-selected-text);
-  min-width: 250px;
-  margin-inline-start: 0;
-}
-
-#returnButton:hover {
-  background-color: var(--in-content-primary-button-background-hover) !important;
-}
-
-#returnButton:hover:active {
-  background-color: var(--in-content-primary-button-background-active) !important;
-}
-
 #advancedButton {
   display: none;
-  min-width: 150px;
 }
 
 #certificateErrorReporting {
   display: none;
 }
 
-#weakCryptoAdvancedPanel,
-#badCertAdvancedPanel {
+.advanced-panel {
   /* Hidden until the link is clicked */
   display: none;
   background-color: white;
   border: 1px lightgray solid;
   /* Don't use top padding because the default p style has top padding, and it
    * makes the overall div look uneven */
   padding: 0 12px 12px 12px;
   box-shadow: 0 0 4px #ddd;