--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -570,17 +570,16 @@
         <div id="ed_corruptedContentErrorv2">&corruptedContentErrorv2.longDesc;</div>
         <div id="ed_sslv3Used">&sslv3Used.longDesc2;</div>
         <div id="ed_inadequateSecurityError">&inadequateSecurityError.longDesc;</div>
       </div>
     </div>
 
     <!-- PAGE CONTAINER (for styling purposes only) -->
     <div id="errorPageContainer" class="container">
-
       <!-- Error Title -->
       <div class="title">
         <h1 class="title-text"/>
       </div>
 
       <!-- LONG CONTENT (the section most likely to require scrolling) -->
       <div id="errorLongContent">
 
@@ -600,55 +599,55 @@
 
         <!-- 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>
 
+        <!-- UI for option to report certificate errors to Mozilla. Removed on
+             init for other error types .-->
+        <div id="certificateErrorReporting">
+          <p class="toggle-container-with-text">
+            <input type="checkbox" id="automaticallyReportInFuture" role="checkbox" />
+            <label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic2;</label>
+          </p>
+        </div>
+
         <div id="prefChangeContainer" class="button-container">
           <p>&prefReset.longDesc;</p>
           <button id="prefResetButton" class="primary" autocomplete="off">&prefReset.label;</button>
         </div>
 
         <div id="certErrorAndCaptivePortalButtonContainer" class="button-container">
           <button id="returnButton" class="primary" autocomplete="off">&returnToPreviousPage.label;</button>
           <button id="openPortalLoginPageButton" class="primary" autocomplete="off">&openPortalLoginPage.label2;</button>
-          <div class="button-spacer"></div>
           <button id="advancedButton" autocomplete="off">&advanced.label;</button>
         </div>
       </div>
 
       <div id="netErrorButtonContainer" class="button-container">
         <button id="errorTryAgain" class="primary" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
       </div>
 
-      <!-- UI for option to report certificate errors to Mozilla. Removed on
-           init for other error types .-->
-      <div id="certificateErrorReporting">
-        <p class="toggle-container-with-text">
-          <input type="checkbox" id="automaticallyReportInFuture" role="checkbox" />
-          <label for="automaticallyReportInFuture" id="automaticallyReportInFuture">&errorReporting.automatic2;</label>
-        </p>
-      </div>
-
       <div id="advancedPanelContainer">
         <div id="badCertAdvancedPanel" class="advanced-panel">
           <p id="badCertTechnicalInfo"/>
-          <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
+          <div class="exceptionDialogButtonContainer">
+            <button id="exceptionDialogButton">&securityOverride.exceptionButtonLabel;</button>
+          </div>
+        </div>
+
+        <div id="certificateErrorDebugInformation">
+          <button id="copyToClipboard">&certerror.copyToClipboard.label;</button>
+          <div id="certificateErrorText"/>
+          <button id="copyToClipboard">&certerror.copyToClipboard.label;</button>
         </div>
       </div>
-
-    </div>
-
-    <div id="certificateErrorDebugInformation">
-      <button id="copyToClipboard">&certerror.copyToClipboard.label;</button>
-      <div id="certificateErrorText"/>
-      <button id="copyToClipboard">&certerror.copyToClipboard.label;</button>
     </div>
 
     <!--
     - Note: It is important to run the script this way, instead of using
     - an onload handler. This is because error pages are loaded as
     - LOAD_BACKGROUND, which means that onload handlers will not be executed.
     -->
     <script type="application/javascript">

--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -1,24 +1,16 @@
 /* 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://browser/skin/error-pages.css");
 
-body {
-  background-image: linear-gradient(-45deg, #eeeeee,     #eeeeee 33%,
-                                            #fbfbfb 33%, #fbfbfb 66%,
-                                            #eeeeee 66%, #eeeeee);
-}
-
-body.certerror {
-  background-image: linear-gradient(-45deg, #f0d000,     #f0d000 33%,
-                                            #fedc00 33%, #fedc00 66%,
-                                            #f0d000 66%, #f0d000);
+:root {
+  --exception-button-container-background: #F5F5F7;
 }
 
 body.captiveportal .title {
   background-image: url("wifi.svg");
 }
 
 body.certerror .title {
   background-image: url("cert-error.svg");
@@ -52,21 +44,16 @@ body:not(.neterror) #certErrorAndCaptive
 }
 
 body:not(.neterror) #netErrorButtonContainer {
   display: none;
 }
 
 #errorTryAgain {
   margin-top: 1.2em;
-  min-width: 150px;
-}
-
-#returnButton {
-  min-width: 250px;
 }
 
 #advancedButton {
   display: none;
 }
 
 body.captiveportal #returnButton {
   display: none;
@@ -83,36 +70,30 @@ body:not(.captiveportal) #openPortalLogi
 body:not(.neterror) #advancedButton {
   display: block;
 }
 
 #certificateErrorReporting {
   display: none;
 }
 
-.container {
-  position: relative;
-}
-
 #advancedPanelContainer {
   position: absolute;
-  padding: 24px 0;
   width: 100%;
+  left: 0;
 }
 
 .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;
-  font-size: 0.9em;
+  margin: 48px auto;
+  min-width: var(--in-content-container-min-width);
+  max-width: var(--in-content-container-max-width);
 }
 
 #overrideWeakCryptoPanel {
   display: none;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;
@@ -134,37 +115,44 @@ span#hostname {
   text-decoration: none;
 }
 
 #errorCode[href] {
   white-space: nowrap;
 }
 
 #badCertTechnicalInfo {
+  margin: 3em;
   overflow: auto;
   white-space: pre-wrap;
 }
 
 #certificateErrorReporting {
   display: none;
 }
 
 #certificateErrorDebugInformation {
   display: none;
   background-color: var(--in-content-box-background-hover) !important;
   border-top: 1px solid var(--in-content-border-color);
   position: absolute;
-  left: 0%;
-  top: 100%;
-  width: 65%;
+  width: 100%;
   padding: 1em 17.5%;
+  box-sizing: border-box;
 }
 
 #certificateErrorText {
   font-family: monospace;
   white-space: pre-wrap;
   padding: 1em 0;
 }
 
 #cert_domain_link:not([href]) {
   color: var(--in-content-page-color);
   text-decoration: none;
-}
\ No newline at end of file
+}
+
+.exceptionDialogButtonContainer {
+  background-color: var(--exception-button-container-background);
+  display: flex;
+  justify-content: end;
+  padding: 10px;
+}

--- a/browser/themes/shared/error-pages.css
+++ b/browser/themes/shared/error-pages.css
@@ -15,16 +15,17 @@ body {
    * gets clipped in iframes with small width. We don't accomodate
    * any padding to prioritize real estate in the small viewport. */
   min-width: 13em;
 }
 
 .button-container {
   display: flex;
   flex-flow: row wrap;
+  justify-content: end;
 }
 
 .button-spacer {
   flex: 1;
 }
 
 @media only screen and (max-width: 959px) {
   body {
@@ -73,9 +74,9 @@ body {
   body {
     background-position: 10px -10px;
     padding-top: 38px;
     /* We get rid of bottom padding for width < 640px, but
      * for height < 480px a bit of space between the content
      * and the viewport edge is nice. */
     padding-bottom: 38px;
   }
-}
\ No newline at end of file
+}

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -13,36 +13,36 @@
   --in-content-selected-text: #fff;
   --in-content-header-border-color: #c8c8c8;
   --in-content-box-background: #fff;
   --in-content-box-background-odd: #f3f6fa;
   --in-content-box-background-hover: #ebebeb;
   --in-content-box-background-active: #dadada;
   --in-content-box-border-color: #c1c1c1;
   --in-content-item-hover: rgba(0,149,221,0.25);
-  --in-content-item-selected: #0095dd;
+  --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #ff9500;
-  --in-content-border-focus: #0095dd;
+  --in-content-border-focus: #0a84ff;
   --in-content-border-color: #c1c1c1;
   --in-content-category-text: #c1c1c1;
   --in-content-category-border-focus: 1px dotted #fff;
   --in-content-category-text-selected: #f2f2f2;
   --in-content-category-background: #424f5a;
   --in-content-category-background-hover: #5e6972;
   --in-content-category-background-active: #343f48;
   --in-content-tab-color: #424f5a;
-  --in-content-link-color: #0095dd;
-  --in-content-link-color-hover: #178ce5;
+  --in-content-link-color: #0a84ff;
+  --in-content-link-color-hover: #0060df;
   --in-content-link-color-active: #ff9500;
   --in-content-link-color-visited: #551a8b;
-  --in-content-primary-button-background: #0095dd;
-  --in-content-primary-button-background-hover: #008acb;
-  --in-content-primary-button-background-active: #006b9d;
+  --in-content-primary-button-background: #0a84ff;
+  --in-content-primary-button-background-hover: #0060df;
+  --in-content-primary-button-background-active: #003EAA;
   --in-content-table-border-dark-color: #d1d1d1;
-  --in-content-table-header-background: #0095dd;
+  --in-content-table-header-background: #0a84ff;
 }
 
 html|html,
 xul|page,
 xul|window {
   font: message-box;
   -moz-appearance: none;
   background-color: var(--in-content-page-background);

--- a/toolkit/themes/shared/in-content/info-pages.inc.css
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -1,27 +1,33 @@
 % 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");
+
+:root {
+  --in-content-container-min-width: 13em;
+  --in-content-container-max-width: 52em;
+}
+
 /* Body and container */
 body {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   min-height: 100vh;
   padding: 0 48px;
   align-items: center;
   justify-content: center;
 }
 
 .container {
-  min-width: 13em;
-  max-width: 52em;
+  min-width: var(--in-content-container-min-width);
+  max-width: var(--in-content-container-max-width);
 }
 
 .container.restore-chosen {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   margin: 10vh 0;
 }
@@ -38,17 +44,16 @@ body {
 }
 
 .title:-moz-locale-dir(rtl),
 .title:dir(rtl) {
   background-position: right 0;
 }
 
 .title-text {
-  border-bottom: 1px solid #C1C1C1;
   font-size: inherit;
   padding-bottom: 0.4em;
 }
 
 @media (max-width: 970px) {
   .title {
     background-image: none !important;
     padding-inline-start: 0;
@@ -74,18 +79,19 @@ ul {
   list-style: disc;
 }
 
 /* Buttons */
 .button-container {
   margin-top: 1.2em;
 }
 
-.button-container > button {
-  min-width: 150px;
+button {
+  padding: 0 1.5em;
+  border-radius: 0;
 }
 
 .button-container > button:first-child {
   margin-inline-start: 0;
 }
 
 /* Trees */
 .tree-container {