diff --git a/composer.json b/composer.json
index e9c3c231ebf..3ec0987bf0e 100644
--- a/composer.json
+++ b/composer.json
@@ -52,7 +52,8 @@
             "composer/installers": true,
             "drupal/core-project-message": true,
             "drupal/core-vendor-hardening": true,
-            "dealerdirect/phpcodesniffer-composer-installer": true
+            "dealerdirect/phpcodesniffer-composer-installer": true,
+            "phpstan/extension-installer": true
         }
     },
     "extra": {
diff --git a/core/includes/install.core.inc b/core/includes/install.core.inc
index 4375abdebda..60d9bae8178 100644
--- a/core/includes/install.core.inc
+++ b/core/includes/install.core.inc
@@ -246,7 +246,7 @@ function install_state_defaults() {
     // An array of available installation profiles.
     'profiles' => [],
     // The name of the theme to use during installation.
-    'theme' => 'seven',
+    'theme' => 'claro',
     // The server URL where the interface translation files can be downloaded.
     // Tokens in the pattern will be replaced by appropriate values for the
     // required translation file.
diff --git a/core/includes/theme.maintenance.inc b/core/includes/theme.maintenance.inc
index 873738f883a..2a8e973bb63 100644
--- a/core/includes/theme.maintenance.inc
+++ b/core/includes/theme.maintenance.inc
@@ -34,7 +34,7 @@ function _drupal_maintenance_theme() {
       $custom_theme = $GLOBALS['install_state']['theme'];
     }
     else {
-      $custom_theme = Settings::get('maintenance_theme', 'seven');
+      $custom_theme = Settings::get('maintenance_theme', 'claro');
     }
   }
   else {
diff --git a/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php b/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
index af85b7e7fd2..4d1df63869e 100644
--- a/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
+++ b/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
@@ -53,7 +53,7 @@ class InstallerTest extends InstallerTestBase {
   protected function setUpLanguage() {
     // Test that \Drupal\Core\Render\BareHtmlPageRenderer adds assets and
     // metatags as expected to the first page of the installer.
-    $this->assertSession()->responseContains("core/themes/seven/css/components/buttons.css");
+    $this->assertSession()->responseContains("core/themes/claro/css/components/button.css");
     $this->assertSession()->responseContains('<meta charset="utf-8" />');
 
     // Assert that the expected title is present.
diff --git a/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php b/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
index 432cb723c71..7f9c0ae16a9 100644
--- a/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
+++ b/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
@@ -29,7 +29,7 @@ class StandardInstallerTest extends ConfigAfterInstallerTestBase {
   protected function setUpSite() {
     // Test that the correct theme is being used.
     $this->assertSession()->responseNotContains('olivero');
-    $this->assertSession()->responseContains('themes/seven/css/theme/install-page.css');
+    $this->assertSession()->responseContains('themes/claro/css/theme/install-page.css');
     parent::setUpSite();
   }
 
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index d7c49a793ea..3447ff86196 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -326,6 +326,27 @@ function claro_preprocess_maintenance_page(&$variables) {
   $variables['#attached']['library'][] = 'claro/maintenance-page';
 }
 
+/**
+ * Implements hook_theme_suggestions_maintenance_page_alter().
+ */
+function claro_theme_suggestions_maintenance_page_alter(&$suggestions) {
+  try {
+    $is_front = \Drupal::service('path.matcher')->isFrontPage();
+  }
+  catch (Exception $e) {
+    // An exception could mean that the database is offline. This scenario
+    // should also be rendered using the frontpage template.
+    $is_front = TRUE;
+  }
+
+  if ($is_front) {
+    // Add theme suggestion for maintenance page rendered as front page. This
+    // allows separating different applications such as update.php from the
+    // actual maintenance page.
+    $suggestions[] = 'maintenance_page__front';
+  }
+}
+
 /**
  * Implements hook_preprocess_HOOK() for details.
  *
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 5914f295a6a..5302b854451 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -18,7 +18,7 @@
    */
   /*
    * Typography.
-   */ /* 18px */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+   */ /* 18px */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~36px */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
   /**
    * Spaces.
    */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 7aa8438e6af..1327d9a2e7e 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -84,6 +84,7 @@
   --line-height-heading: 1.3;
   --line-height-form-label: calc(18rem / 16); /* 18px */
   --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
+  --font-size-xl: 2.25rem; /* ~36px */
   --font-size-h1: 2.027rem; /* ~32px */
   --font-size-h2: 1.802rem; /* ~29px */
   --font-size-h3: 1.602rem; /* ~26px */
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 979a2bc0e89..7e63a502b84 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -25,6 +25,7 @@
 }
 
 .messages {
+  overflow: auto; /* Required to prevent text clipping. */
   box-sizing: border-box;
   margin-top: 1rem;
   margin-bottom: 1rem;
diff --git a/core/themes/claro/css/components/messages.pcss.css b/core/themes/claro/css/components/messages.pcss.css
index e03745f1711..4aa23e4ad0a 100644
--- a/core/themes/claro/css/components/messages.pcss.css
+++ b/core/themes/claro/css/components/messages.pcss.css
@@ -34,6 +34,7 @@
 }
 
 .messages {
+  overflow: auto; /* Required to prevent text clipping. */
   box-sizing: border-box;
   margin-top: var(--space-m);
   margin-bottom: var(--space-m);
diff --git a/core/themes/claro/css/theme/install-page.css b/core/themes/claro/css/theme/install-page.css
index 830f5b30514..fd89c78e67b 100644
--- a/core/themes/claro/css/theme/install-page.css
+++ b/core/themes/claro/css/theme/install-page.css
@@ -4,6 +4,7 @@
  * https://www.drupal.org/node/3084859
  * @preserve
  */
+
 /**
  * @file
  * Installation styling.
@@ -11,37 +12,37 @@
  * Unfortunately we have to make our styling quite strong, to override the
  * .maintenance-page styling.
  */
+
 .install-page {
   min-height: 100%;
-  background-color: #1275b2;
-  background-image:
-    url(../../images/noise-low.png),
-    radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
-  background-repeat: repeat;
-  background-position: left top, 50% 50%; /* LTR */
-}
-[dir="rtl"] .install-page {
-  background-position: right top, 50% 50%;
+  background-color: #dedfe4;
 }
+
 /**
  * Password widget
  */
+
 .install-page .password-parent,
 .install-page .confirm-parent {
   width: auto;
 }
+
 .install-page .form-item .password-suggestions {
   float: none;
   width: auto;
 }
+
 .install-page table td {
   word-break: break-all;
 }
+
 .install-page .site-version {
   vertical-align: super;
-  color: #595959;
+  color: #919297;
   font-size: 0.5em;
+  font-weight: 500;
 }
+
 @media all and (max-width: 63.125rem) and (min-width: 48em) {
   .install-page .password-strength,
   .install-page .confirm-parent {
diff --git a/core/themes/claro/css/theme/install-page.pcss.css b/core/themes/claro/css/theme/install-page.pcss.css
index b616b418d96..c765c633b01 100644
--- a/core/themes/claro/css/theme/install-page.pcss.css
+++ b/core/themes/claro/css/theme/install-page.pcss.css
@@ -5,20 +5,12 @@
  * Unfortunately we have to make our styling quite strong, to override the
  * .maintenance-page styling.
  */
+
+@import "../base/variables.pcss.css";
+
 .install-page {
   min-height: 100%;
-  background-color: #1275b2;
-  background-image:
-    url(../../images/noise-low.png),
-    -webkit-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
-  background-image:
-    url(../../images/noise-low.png),
-    radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
-  background-repeat: repeat;
-  background-position: left top, 50% 50%; /* LTR */
-}
-[dir="rtl"] .install-page {
-  background-position: right top, 50% 50%;
+  background-color: var(--color-gray-100);
 }
 
 /**
@@ -38,8 +30,9 @@
 
 .install-page .site-version {
   vertical-align: super;
-  color: #595959;
+  color: var(--color-gray-500);
   font-size: 0.5em;
+  font-weight: 500;
 }
 
 @media all and (max-width: 1010px) and (min-width: 48em) {
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index 8018df618d9..e4a307e43a3 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -8,6 +8,8 @@
 /**
  * @file
  * Maintenance theming.
+ *
+ * These styles affect the installation UI, maintenance page, and the database update UI.
  */
 
 .maintenance-page {
@@ -15,17 +17,37 @@
   background-color: #dedfe4;
 }
 
-.title {
-  margin-top: 0;
+h1,
+h2 {
+  font-size: 1.602rem;
+}
+
+h3 {
+  font-size: 1.424rem;
 }
 
 .site-name {
-  margin-top: 1rem;
+  margin-top: 0.75rem;
   word-wrap: break-word;
+  color: #232429;
+  font-size: 2.25rem;
+}
+
+.site-name--subtle {
+  margin-top: 0.75rem;
   color: #55565b;
   font-size: 1.424rem;
 }
 
+.title {
+  margin-top: 0;
+  font-size: 1.602rem;
+}
+
+.title--broad {
+  font-size: 2.027rem;
+}
+
 .site-name,
 .title {
   margin-bottom: 1.5rem;
@@ -33,17 +55,22 @@
 
 .content {
   margin-bottom: 1rem;
+  color: #232429;
+}
+
+.content--subtle {
   color: #55565b;
 }
 
 .site-name,
 .title,
 .content {
-  max-width: 32rem;
+  max-width: 34rem;
 }
 
 /**
- * Task list & step indicator
+ * Task list & step indicator.
+ * Shows on both the install screen and the database update page.
  */
 
 @media all and (max-width: 48em) { /* 768px */
@@ -61,9 +88,6 @@
     right: auto;
     left: 0.5em;
   }
-  .task-list {
-    display: none;
-  }
 }
 
 @media all and (min-width: 48em) { /* 768px */
@@ -71,49 +95,44 @@
     display: none;
   }
   .task-list {
-    margin-left: 0; /* LTR */
-    padding-bottom: 1em;
-    padding-left: 0; /* LTR */
+    margin-left: -3rem; /* LTR */
+    padding: 0;
     list-style-type: none;
+    counter-reset: steps;
+    font-weight: bold;
   }
   [dir="rtl"] .task-list {
-    margin-right: 0;
-    padding-right: 0;
+    margin-right: -3rem;
+    margin-left: 0;
   }
   .task-list li {
-    padding: 0.5em 1em 0.5em 3.85em; /* LTR */
-    color: #1a1a1a;
+    padding: 1rem 1rem 1rem 3rem; /* LTR */
+    counter-increment: steps;
+    color: #232429;
+    border-radius: 0 2rem 2rem 0 /* LTR */;
+    font-weight: 500;
   }
   [dir="rtl"] .task-list li {
-    padding: 0.5em 3.85em 0.5em 1em;
+    padding: 1rem 3rem 1rem 1rem;
+    border-radius: 2rem 0 0 2rem;
   }
+  .task-list li:before {
+    margin-right: 0.375rem;
+    content: counter(steps);
+  }
+  [dir="rtl"] .task-list li:before {
+    margin-right: 0;
+    margin-left: 0.375rem;
+  }
+
   .task-list .is-active {
-    position: relative;
-    background: #ebeae4;
-    font-weight: normal;
-  }
-  .task-list .is-active:after {
-    position: absolute;
-    top: 50%;
-    left: 100%; /* LTR */
-    width: 0;
-    height: 0;
-    margin-top: -1.269em;
-    content: " ";
-    pointer-events: none;
-    border: solid transparent;
-    border-width: 1.269em;
-    border-color: rgba(235, 234, 228, 0);
-    border-left-color: #ebeae4; /* LTR */
-  }
-  [dir="rtl"] .task-list .is-active:after {
-    right: 100%;
-    left: auto;
-    border-right-color: #ebeae4;
-    border-left-color: transparent;
+    color: #003ecc;
+    border: 1px solid transparent; /* Required for forced-colors mode. */
+    background: #e5edff;
+    font-weight: 500;
   }
   .task-list .done {
-    color: #adadad;
+    color: #75767b;
   }
 }
 
@@ -126,12 +145,13 @@
   margin-right: 1.25em;
   margin-left: 1.25em;
   padding: 3rem;
+  border: 1px solid transparent; /* Required for forced-colors mode. */
   border-radius: 0.5rem;
   background: #fff;
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
 }
 
-.layout-container:after { /* no reason for a clearfix in the markup */
+.layout-container:after { /* No reason for a clearfix in the markup. */
   display: table;
   clear: both;
   content: "";
@@ -142,6 +162,10 @@
     margin: 1.25em;
     padding: 1rem 1.5rem;
   }
+
+  .layout-sidebar-first {
+    display: none;
+  }
 }
 
 @media all and (min-width: 48em) { /* 768px */
@@ -174,8 +198,10 @@
     padding: 0.9375rem;
   }
   [dir="rtl"] ul {
-    margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
+    margin-right: 0; /* Overrides default [dir="rtl"] ul margin. */
   }
+
+  /* Positioning sidebar & content. */
   .layout-sidebar-first {
     float: left; /* LTR */
     width: 35%;
@@ -183,19 +209,22 @@
   [dir="rtl"] .layout-sidebar-first {
     float: right;
   }
-  /* Positioning sidebar & content */
-  main {
+
+  .main-content {
     float: left; /* LTR */
     clear: none;
     box-sizing: border-box;
     width: 65%;
     padding-left: 3.85em; /* LTR */
   }
-  [dir="rtl"] main {
+  [dir="rtl"] .main-content {
     float: right;
     padding-right: 3.85em;
     padding-left: 0;
   }
+  .main-content--attached {
+    padding-left: 0;
+  }
 }
 
 /**
@@ -218,3 +247,32 @@
   padding-right: 3em;
   padding-left: 1em;
 }
+
+/**
+ * Updates list customization for update page.
+ */
+
+.update-results {
+  overflow: auto; /* Required to prevent text clipping. */
+  margin-top: 0;
+  padding: 0.75rem;
+  border: 1px solid #dedfe4;
+  border-radius: 2px;
+  background: #f3f4f9;
+}
+
+.update-results > h3:first-child {
+  margin-top: 0;
+}
+
+.update-results .failure strong {
+  color: #dc2323;
+}
+
+.item-list > h3 {
+  font-size: 1.266rem;
+}
+
+.item-list > ul {
+  margin-left: 0;
+}
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index aebab641aac..c68827ffcd4 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -1,6 +1,8 @@
 /**
  * @file
  * Maintenance theming.
+ *
+ * These styles affect the installation UI, maintenance page, and the database update UI.
  */
 
 @import "../base/variables.pcss.css";
@@ -10,17 +12,35 @@
   background-color: var(--color-gray-100);
 }
 
-.title {
-  margin-top: 0;
+h1,
+h2 {
+  font-size: var(--font-size-h3);
+}
+
+h3 {
+  font-size: var(--font-size-h4);
 }
 
 .site-name {
-  margin-top: var(--space-m);
+  margin-top: var(--space-s);
   word-wrap: break-word;
+  color: var(--color-gray);
+  font-size: var(--font-size-xl);
+}
+.site-name--subtle {
+  margin-top: var(--space-s);
   color: var(--color-gray-800);
   font-size: var(--font-size-h4);
 }
 
+.title {
+  margin-top: 0;
+  font-size: var(--font-size-h3);
+}
+.title--broad {
+  font-size: var(--font-size-h1);
+}
+
 .site-name,
 .title {
   margin-bottom: var(--space-l);
@@ -28,17 +48,21 @@
 
 .content {
   margin-bottom: var(--space-m);
+  color: var(--color-gray);
+}
+.content--subtle {
   color: var(--color-gray-800);
 }
 
 .site-name,
 .title,
 .content {
-  max-width: 512px;
+  max-width: 34rem;
 }
 
 /**
- * Task list & step indicator
+ * Task list & step indicator.
+ * Shows on both the install screen and the database update page.
  */
 @media all and (max-width: 48em) { /* 768px */
   header[role="banner"] {
@@ -55,9 +79,6 @@
     right: auto;
     left: 0.5em;
   }
-  .task-list {
-    display: none;
-  }
 }
 
 @media all and (min-width: 48em) { /* 768px */
@@ -65,49 +86,44 @@
     display: none;
   }
   .task-list {
-    margin-left: 0; /* LTR */
-    padding-bottom: 1em;
-    padding-left: 0; /* LTR */
+    margin-left: -3rem; /* LTR */
+    padding: 0;
     list-style-type: none;
+    counter-reset: steps;
+    font-weight: bold;
   }
   [dir="rtl"] .task-list {
-    margin-right: 0;
-    padding-right: 0;
+    margin-right: -3rem;
+    margin-left: 0;
   }
   .task-list li {
-    padding: 0.5em 1em 0.5em 3.85em; /* LTR */
-    color: #1a1a1a;
+    padding: 1rem 1rem 1rem 3rem; /* LTR */
+    counter-increment: steps;
+    color: var(--color-gray);
+    border-radius: 0 2rem 2rem 0 /* LTR */;
+    font-weight: 500;
   }
   [dir="rtl"] .task-list li {
-    padding: 0.5em 3.85em 0.5em 1em;
+    padding: 1rem 3rem 1rem 1rem;
+    border-radius: 2rem 0 0 2rem;
   }
+  .task-list li:before {
+    margin-right: 0.375rem;
+    content: counter(steps);
+  }
+  [dir="rtl"] .task-list li:before {
+    margin-right: 0;
+    margin-left: 0.375rem;
+  }
+
   .task-list .is-active {
-    position: relative;
-    background: #ebeae4;
-    font-weight: normal;
-  }
-  .task-list .is-active:after {
-    position: absolute;
-    top: 50%;
-    left: 100%; /* LTR */
-    width: 0;
-    height: 0;
-    margin-top: -1.269em;
-    content: " ";
-    pointer-events: none;
-    border: solid transparent;
-    border-width: 1.269em;
-    border-color: rgba(235, 234, 228, 0);
-    border-left-color: #ebeae4; /* LTR */
-  }
-  [dir="rtl"] .task-list .is-active:after {
-    right: 100%;
-    left: auto;
-    border-right-color: #ebeae4;
-    border-left-color: transparent;
+    color: var(--color-absolutezero);
+    border: 1px solid transparent; /* Required for forced-colors mode. */
+    background: var(--color-bgblue-active);
+    font-weight: 500;
   }
   .task-list .done {
-    color: #adadad;
+    color: var(--color-gray-700);
   }
 }
 
@@ -119,11 +135,12 @@
   margin-right: 1.25em;
   margin-left: 1.25em;
   padding: var(--space-xl);
+  border: 1px solid transparent; /* Required for forced-colors mode. */
   border-radius: 8px;
   background: #fff;
   box-shadow: var(--shadow-z3);
 }
-.layout-container:after { /* no reason for a clearfix in the markup */
+.layout-container:after { /* No reason for a clearfix in the markup. */
   display: table;
   clear: both;
   content: "";
@@ -134,6 +151,10 @@
     margin: 1.25em;
     padding: var(--space-m) var(--space-l);
   }
+
+  .layout-sidebar-first {
+    display: none;
+  }
 }
 
 @media all and (min-width: 48em) { /* 768px */
@@ -166,8 +187,10 @@
     padding: 15px;
   }
   [dir="rtl"] ul {
-    margin-right: 0; /* Overrides default [dir="rtl"] ul margin */
+    margin-right: 0; /* Overrides default [dir="rtl"] ul margin. */
   }
+
+  /* Positioning sidebar & content. */
   .layout-sidebar-first {
     float: left; /* LTR */
     width: 35%;
@@ -175,19 +198,22 @@
   [dir="rtl"] .layout-sidebar-first {
     float: right;
   }
-  /* Positioning sidebar & content */
-  main {
+
+  .main-content {
     float: left; /* LTR */
     clear: none;
     box-sizing: border-box;
     width: 65%;
     padding-left: 3.85em; /* LTR */
   }
-  [dir="rtl"] main {
+  [dir="rtl"] .main-content {
     float: right;
     padding-right: 3.85em;
     padding-left: 0;
   }
+  .main-content--attached {
+    padding-left: 0;
+  }
 }
 
 /**
@@ -207,3 +233,28 @@
   padding-right: 3em;
   padding-left: 1em;
 }
+
+/**
+ * Updates list customization for update page.
+ */
+.update-results {
+  overflow: auto; /* Required to prevent text clipping. */
+  margin-top: 0;
+  padding: var(--space-s);
+  border: 1px solid var(--color-gray-100);
+  border-radius: var(--base-border-radius);
+  background: var(--color-gray-050);
+}
+.update-results > h3:first-child {
+  margin-top: 0;
+}
+.update-results .failure strong {
+  color: var(--color-maximumred);
+}
+
+.item-list > h3 {
+  font-size: var(--font-size-h5);
+}
+.item-list > ul {
+  margin-left: 0;
+}
diff --git a/core/themes/claro/templates/install-page.html.twig b/core/themes/claro/templates/install-page.html.twig
index c51fe636996..bd22c5a9459 100644
--- a/core/themes/claro/templates/install-page.html.twig
+++ b/core/themes/claro/templates/install-page.html.twig
@@ -13,7 +13,7 @@
 
   <header role="banner">
     {% if site_name %}
-      <h1 class="page-title">
+      <h1 class="site-name">
         {{ site_name }}
         {% if site_version %}
           <span class="site-version">{{ site_version }}</span>
@@ -28,9 +28,9 @@
     </aside>{# /.layout-sidebar-first #}
   {% endif %}
 
-  <main role="main">
+  <main role="main" class="main-content">
     {% if title %}
-      <h2 class="heading-a">{{ title }}</h2>
+      <h2 class="heading-c">{{ title }}</h2>
     {% endif %}
     {{ page.highlighted }}
     {{ page.content }}
diff --git a/core/themes/claro/templates/maintenance-page.html.twig b/core/themes/claro/templates/maintenance-page.html.twig
index 49e809cd85e..9bbb9a0e0ce 100644
--- a/core/themes/claro/templates/maintenance-page.html.twig
+++ b/core/themes/claro/templates/maintenance-page.html.twig
@@ -1,12 +1,16 @@
 {#
 /**
  * @file
- * Claro's theme implementation to display a single Drupal page while offline.
+ * Claro's theme implementation for maintenance page.
+ *
+ * This template is used for rendering non-frontpage maintenance pages. An
+ * example of this is /update.php.
  *
  * All available variables are mirrored in page.html.twig.
  * Some may be blank but they are provided for consistency.
  *
  * @see template_preprocess_maintenance_page()
+ * @see maintenance-page--front.html.twig
  */
 #}
 <div class="layout-container">
@@ -23,7 +27,7 @@
     </aside>{# /.layout-sidebar-first #}
   {% endif %}
 
-  <main role="main">
+  <main role="main" class="main-content">
     {% if title %}
       <h1 class="title">{{ title }}</h1>
     {% endif %}