diff --git a/core/includes/install.core.inc b/core/includes/install.core.inc
index 8f8ba759f4..13c7d4ba1c 100644
--- a/core/includes/install.core.inc
+++ b/core/includes/install.core.inc
@@ -1053,7 +1053,7 @@ function install_display_output($output, $install_state) {
   }
 
   $bare_html_page_renderer = \Drupal::service('bare_html_page_renderer');
-  $response = $bare_html_page_renderer->renderBarePage($output, $output['#title'], 'install_page', $regions);
+  $response = $bare_html_page_renderer->renderBarePage($output, $output['#title'], 'page__maintenance__install', $regions);
   $request_time = \Drupal::time()->getRequestTime();
   $default_headers = [
     'Expires' => 'Sun, 19 Nov 1978 05:00:00 GMT',
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index f9d1c940c4..44128f9fd0 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -329,7 +329,7 @@ function claro_preprocess_page__maintenance(&$variables) {
 /**
  * Implements hook_theme_suggestions_maintenance_page_alter().
  */
-function claro_theme_suggestions_maintenance_page_alter(&$suggestions) {
+function claro_theme_suggestions_page_alter(&$suggestions) {
   try {
     $is_front = \Drupal::service('path.matcher')->isFrontPage();
   }
@@ -339,11 +339,11 @@ function claro_theme_suggestions_maintenance_page_alter(&$suggestions) {
     $is_front = TRUE;
   }
 
-  if ($is_front) {
+  if ($is_front && in_array('page__maintenance', $suggestions, TRUE)) {
     // 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';
+    $suggestions[] = 'page__maintenance__front';
   }
 }
 
diff --git a/core/themes/claro/css/theme/install-page.css b/core/themes/claro/css/theme/install-page.css
index 2f1ecb50d6..980f50763d 100644
--- a/core/themes/claro/css/theme/install-page.css
+++ b/core/themes/claro/css/theme/install-page.css
@@ -13,38 +13,38 @@
  * .maintenance-page styling.
  */
 
-.install-page {
+.page--maintenance--install {
   min-height: 100%;
   background-color: var(--color-gray-100);
 }
 
-.install-page h1,
-.install-page h2 {
+.page--maintenance--install h1,
+.page--maintenance--install h2 {
   font-size: var(--font-size-h3);
 }
 
-.install-page h3 {
+.page--maintenance--install h3 {
   font-size: var(--font-size-h4);
 }
 
-.install-page .site-name {
+.page--maintenance--install .site-name {
   margin-top: var(--space-s);
   color: var(--color-gray);
   font-size: var(--font-size-xl);
 }
 
-.install-page .title {
+.page--maintenance--install .title {
   margin-top: 0;
   font-size: var(--font-size-h3);
 }
 
-.install-page .content {
+.page--maintenance--install .content {
   color: var(--color-gray);
 }
 
-.install-page .site-name,
-.install-page .title,
-.install-page .content {
+.page--maintenance--install .site-name,
+.page--maintenance--install .title,
+.page--maintenance--install .content {
   max-width: 34rem;
 }
 
@@ -52,21 +52,21 @@
  * Password widget
  */
 
-.install-page .password-parent,
-.install-page .confirm-parent {
+.page--maintenance--install .password-parent,
+.page--maintenance--install .confirm-parent {
   width: auto;
 }
 
-.install-page .form-item .password-suggestions {
+.page--maintenance--install .form-item .password-suggestions {
   float: none;
   width: auto;
 }
 
-.install-page table td {
+.page--maintenance--install table td {
   word-break: break-all;
 }
 
-.install-page .site-version {
+.page--maintenance--install .site-version {
   vertical-align: super;
   color: var(--color-gray-500);
   font-size: 0.5em;
@@ -74,8 +74,8 @@
 }
 
 @media all and (max-width: 63.125rem) and (min-width: 48em) {
-  .install-page .password-strength,
-  .install-page .confirm-parent {
+  .page--maintenance--install .password-strength,
+  .page--maintenance--install .confirm-parent {
     width: 100%;
   }
   .install-configure-form .form-type-password {
diff --git a/core/themes/claro/css/theme/install-page.pcss.css b/core/themes/claro/css/theme/install-page.pcss.css
index 6f727b4ba7..b83d24efd0 100644
--- a/core/themes/claro/css/theme/install-page.pcss.css
+++ b/core/themes/claro/css/theme/install-page.pcss.css
@@ -6,7 +6,7 @@
  * .maintenance-page styling.
  */
 
-.install-page {
+.page--maintenance--install {
   min-height: 100%;
   background-color: var(--color-gray-100);
 
@@ -44,19 +44,19 @@
 /**
  * Password widget
  */
-.install-page .password-parent,
-.install-page .confirm-parent {
+.page--maintenance--install .password-parent,
+.page--maintenance--install .confirm-parent {
   width: auto;
 }
-.install-page .form-item .password-suggestions {
+.page--maintenance--install .form-item .password-suggestions {
   float: none;
   width: auto;
 }
-.install-page table td {
+.page--maintenance--install table td {
   word-break: break-all;
 }
 
-.install-page .site-version {
+.page--maintenance--install .site-version {
   vertical-align: super;
   color: var(--color-gray-500);
   font-size: 0.5em;
@@ -64,8 +64,8 @@
 }
 
 @media all and (max-width: 1010px) and (min-width: 48em) {
-  .install-page .password-strength,
-  .install-page .confirm-parent {
+  .page--maintenance--install .password-strength,
+  .page--maintenance--install .confirm-parent {
     width: 100%;
   }
   .install-configure-form .form-type-password {
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index c57b4b7abb..ec2cf3d0ff 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -12,7 +12,7 @@
  * These styles affect the installation UI, maintenance page, and the database update UI.
  */
 
-.maintenance-page {
+.page--maintenance {
   min-height: 100%;
   background-color: var(--color-gray-100);
 }
@@ -172,15 +172,15 @@ h3 {
   html {
     display: table;
   }
-  .install-page,
-  .maintenance-page {
+  .page--maintenance-install,
+  .page--maintenance {
     display: table-cell;
     padding: 1em 0;
     vertical-align: middle;
   }
   html,
-  .install-page,
-  .maintenance-page {
+  .page--maintenance--install,
+  .page--maintenance {
     width: 100%;
     height: 100%;
     margin: 0;
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index 5814d6c1c9..36f6eee836 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -5,7 +5,7 @@
  * These styles affect the installation UI, maintenance page, and the database update UI.
  */
 
-.maintenance-page {
+.page--maintenance {
   min-height: 100%;
   background-color: var(--color-gray-100);
 }
@@ -159,15 +159,15 @@ h3 {
   html {
     display: table;
   }
-  .install-page,
-  .maintenance-page {
+  .page--maintenance--install,
+  .page--maintenance {
     display: table-cell;
     padding: 1em 0;
     vertical-align: middle;
   }
   html,
-  .install-page,
-  .maintenance-page {
+  .page--maintenance--install,
+  .page--maintenance {
     width: 100%;
     height: 100%;
     margin: 0;
diff --git a/core/themes/claro/templates/page--maintenance--front.html.twig b/core/themes/claro/templates/page--maintenance--front.html.twig
index 12a364ee6a..05af5e5ef6 100644
--- a/core/themes/claro/templates/page--maintenance--front.html.twig
+++ b/core/themes/claro/templates/page--maintenance--front.html.twig
@@ -9,7 +9,7 @@
  * 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 template_preprocess_page__maintenance()
  */
 #}
 <div class="layout-container">