diff --git a/core/includes/install.core.inc b/core/includes/install.core.inc
index 6d83278cfe..f85fb2756d 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 873738f883..2a8e973bb6 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 118a771245..e40f64a7bb 100644
--- a/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
+++ b/core/tests/Drupal/FunctionalTests/Installer/InstallerTest.php
@@ -53,7 +53,7 @@ public function testInstaller() {
   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 466c537359..36926c18a5 100644
--- a/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
+++ b/core/tests/Drupal/FunctionalTests/Installer/StandardInstallerTest.php
@@ -33,7 +33,7 @@ public function testInstaller() {
   protected function setUpSite() {
     // Test that the correct theme is being used.
     $this->assertSession()->responseNotContains('bartik');
-    $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/css/base/variables.css b/core/themes/claro/css/base/variables.css
index e6ff4efbd8..4a6665a145 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -16,7 +16,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 62163019d4..45261d18f8 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -53,6 +53,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/theme/install-page.css b/core/themes/claro/css/theme/install-page.css
index 830f5b3051..7aaafcd596 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,48 @@
  * 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;
 }
+
+/*
+ * Override of .layout-container, which is conflicts with
+ * layout/system-admin--layout.pcss.css
+ */
+
+@media all and (min-width: 48em) {
+  body.install-page .layout-container {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
 @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 b616b418d9..073062ae24 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,10 +30,21 @@
 
 .install-page .site-version {
   vertical-align: super;
-  color: #595959;
+  color: var(--color-gray-500);
   font-size: 0.5em;
 }
 
+/*
+ * Override of .layout-container, which is conflicts with
+ * layout/system-admin--layout.pcss.css
+ */
+@media all and (min-width: 48em) {
+  body.install-page .layout-container {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
 @media all and (max-width: 1010px) and (min-width: 48em) {
   .install-page .password-strength,
   .install-page .confirm-parent {
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index e4602957de..5457667d9b 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -16,10 +16,16 @@
 }
 
 .site-name {
-  margin-top: 1rem;
+  margin-top: 0.75rem;
   word-wrap: break-word;
-  color: #55565b;
-  font-size: 1.424rem;
+  color: #232429;
+  font-size: 2.25rem;
+  font-weight: 500;
+}
+
+.title {
+  font-size: 1.602rem;
+  font-weight: 500;
 }
 
 .site-name,
@@ -29,13 +35,13 @@
 
 .content {
   margin-bottom: 1rem;
-  color: #55565b;
+  color: #232429;
 }
 
 .site-name,
 .title,
 .content {
-  max-width: 32rem;
+  max-width: 34rem;
 }
 
 /**
@@ -67,49 +73,57 @@
     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 0 1rem 3rem; /* LTR */
+    border-radius: 0 2rem 2rem 0;
+    counter-increment: steps;
+    color: #232429;
+    font-weight: 500;
   }
   [dir="rtl"] .task-list li {
-    padding: 0.5em 3.85em 0.5em 1em;
+    padding: 1rem 3rem 1rem 0;
   }
+  .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;
+    color: #003cc5;
+    background: #e6ecf8;
+    font-weight: 500;
   }
   .task-list .is-active:after {
-    position: absolute;
-    top: 50%;
-    left: 100%; /* LTR */
-    width: 0;
-    height: 0;
-    margin-top: -1.269em;
+    top: 0;
+    left: calc(100% - 1.625rem);
+    width: 3.25rem;
+    height: 3.25rem;
+    margin-top: 0;
     content: " ";
-    pointer-events: none;
-    border: solid transparent;
-    border-width: 1.269em;
-    border-color: rgba(235, 234, 228, 0);
-    border-left-color: #ebeae4; /* LTR */
+    border-radius: 50%;
+    background: #e6ecf8;
   }
   [dir="rtl"] .task-list .is-active:after {
-    right: 100%;
+    right: calc(100% - 1.625rem);
     left: auto;
-    border-right-color: #ebeae4;
-    border-left-color: transparent;
   }
   .task-list .done {
-    color: #adadad;
+    color: #919297;
   }
 }
 
@@ -179,6 +193,15 @@
   [dir="rtl"] .layout-sidebar-first {
     float: right;
   }
+  .layout-sidebar-first ~ main {
+    float: left;
+    margin-left: 4rem;
+  }
+  [dir="rtl"] .layout-sidebar-first ~ main {
+    float: right;
+    margin-right: 4rem;
+    margin-left: 0;
+  }
 }
 
 /**
@@ -201,3 +224,15 @@
   padding-right: 3em;
   padding-left: 1em;
 }
+
+/**
+ * Pending updates list customization for update page.
+ */
+
+.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 9cffc0dc58..0b85543e29 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -11,10 +11,16 @@
 }
 
 .site-name {
-  margin-top: var(--space-m);
+  margin-top: var(--space-s);
   word-wrap: break-word;
-  color: var(--color-gray-800);
-  font-size: var(--font-size-h4);
+  color: var(--color-gray);
+  font-size: var(--font-size-xl);
+  font-weight: 500;
+}
+
+.title {
+  font-size: var(--font-size-h3);
+  font-weight: 500;
 }
 
 .site-name,
@@ -24,13 +30,13 @@
 
 .content {
   margin-bottom: var(--space-m);
-  color: var(--color-gray-800);
+  color: var(--color-gray);
 }
 
 .site-name,
 .title,
 .content {
-  max-width: 512px;
+  max-width: 34rem;
 }
 
 /**
@@ -61,49 +67,57 @@
     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 0 1rem 3rem; /* LTR */
+    border-radius: 0 2rem 2rem 0;
+    counter-increment: steps;
+    color: var(--color-gray);
+    font-weight: 500;
   }
   [dir="rtl"] .task-list li {
-    padding: 0.5em 3.85em 0.5em 1em;
+    padding: 1rem 3rem 1rem 0;
   }
+  .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;
+    color: var(--color-absolutezero);
+    background: var(--color-bgblue-active);
+    font-weight: 500;
   }
   .task-list .is-active:after {
-    position: absolute;
-    top: 50%;
-    left: 100%; /* LTR */
-    width: 0;
-    height: 0;
-    margin-top: -1.269em;
+    top: 0;
+    left: calc(100% - 26px);
+    width: 52px;
+    height: 52px;
+    margin-top: 0;
     content: " ";
-    pointer-events: none;
-    border: solid transparent;
-    border-width: 1.269em;
-    border-color: rgba(235, 234, 228, 0);
-    border-left-color: #ebeae4; /* LTR */
+    border-radius: 50%;
+    background: var(--color-bgblue-active);
   }
   [dir="rtl"] .task-list .is-active:after {
-    right: 100%;
+    right: calc(100% - 26px);
     left: auto;
-    border-right-color: #ebeae4;
-    border-left-color: transparent;
   }
   .task-list .done {
-    color: #adadad;
+    color: var(--color-gray-500);
   }
 }
 
@@ -171,6 +185,15 @@
   [dir="rtl"] .layout-sidebar-first {
     float: right;
   }
+  .layout-sidebar-first ~ main {
+    float: left;
+    margin-left: 4rem;
+  }
+  [dir="rtl"] .layout-sidebar-first ~ main {
+    float: right;
+    margin-right: 4rem;
+    margin-left: 0;
+  }
 }
 
 /**
@@ -190,3 +213,13 @@
   padding-right: 3em;
   padding-left: 1em;
 }
+
+/**
+ * Pending updates list customization for update page.
+ */
+.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 c51fe63699..3f7d259f72 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>
@@ -30,7 +30,7 @@
 
   <main role="main">
     {% if title %}
-      <h2 class="heading-a">{{ title }}</h2>
+      <h2 class="heading-c">{{ title }}</h2>
     {% endif %}
     {{ page.highlighted }}
     {{ page.content }}