diff --git a/core/src/main/resources/hudson/AboutJenkins/index.jelly b/core/src/main/resources/hudson/AboutJenkins/index.jelly
index 71fe3bd7b2..65aef379cc 100644
--- a/core/src/main/resources/hudson/AboutJenkins/index.jelly
+++ b/core/src/main/resources/hudson/AboutJenkins/index.jelly
@@ -49,10 +49,7 @@ THE SOFTWARE.
                       permissions="${app.MANAGE_AND_SYSTEM_READ}">
     <script src="${resURL}/jsbundles/section-to-tabs.js" type="text/javascript" defer="true" />
 
-    <div class="app-about-branding">
-      <div class="app-about-branding__aurora"></div>
-      <img src="${imagesURL}/svgs/logo.svg" alt="${%logo}" />
-    </div>
+    <l:branding clazz="app-about-branding" />
 
     <p class="jenkins-page-description jenkins-!-text-color">${%blurb}</p>
 
diff --git a/core/src/main/resources/jenkins/model/Jenkins/login.jelly b/core/src/main/resources/jenkins/model/Jenkins/login.jelly
index 0de6fab2bd..5633dc1db5 100644
--- a/core/src/main/resources/jenkins/model/Jenkins/login.jelly
+++ b/core/src/main/resources/jenkins/model/Jenkins/login.jelly
@@ -70,6 +70,8 @@ THE SOFTWARE.
             <st:include it="${simpleDecorator}" page="simple-branding.jelly" />
             <main id="main-panel" class="app-sign-in-register__content">
               <div class="app-sign-in-register__content-inner">
+                <img src="${imagesURL}/svgs/logo.svg" aria-hidden="true" class="app-sign-in-register__content-logo" />
+
                 <h1>${%Sign in to Jenkins}</h1>
 
                 <st:include it="${simpleDecorator}" page="simple-header.jelly" />
diff --git a/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly b/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly
index 20997b85bb..74f16f572f 100644
--- a/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly
+++ b/core/src/main/resources/jenkins/model/SimplePageDecorator/simple-branding.jelly
@@ -22,9 +22,6 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core">
-  <section class="app-sign-in-register__branding">
-    <div class="app-sign-in-register__branding__starburst"></div>
-    <img src="${imagesURL}/svgs/logo.svg" alt="${%logo}"/>
-  </section>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+  <l:branding clazz="app-sign-in-register__branding" />
 </j:jelly>
diff --git a/core/src/main/resources/lib/layout/branding.jelly b/core/src/main/resources/lib/layout/branding.jelly
new file mode 100644
index 0000000000..d051f15b74
--- /dev/null
+++ b/core/src/main/resources/lib/layout/branding.jelly
@@ -0,0 +1,14 @@
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
+  <st:documentation>
+    <st:attribute name="clazz">
+      Additional CSS class(es) to add.
+    </st:attribute>
+  </st:documentation>
+
+  <div class="app-branding ${attrs.clazz}">
+    <div class="app-branding__conic">
+      <img src="${imagesURL}/svgs/logo.svg" alt="${%Jenkins illustration}" />
+    </div>
+  </div>
+</j:jelly>
diff --git a/src/main/scss/abstracts/_theme.scss b/src/main/scss/abstracts/_theme.scss
index 6c24aac40c..7dc2ae2873 100644
--- a/src/main/scss/abstracts/_theme.scss
+++ b/src/main/scss/abstracts/_theme.scss
@@ -335,7 +335,7 @@ $semantics: (
   --item-box-shadow--focus: oklch(from var(--text-color-secondary) l c h / 0.1);
 
   // Page
-  --page-inset: 0px;
+  --page-inset: 0.3125rem;
 
   // Deprecated
   --primary: var(--accent-color); // Use var(--accent-color) instead
diff --git a/src/main/scss/components/_branding.scss b/src/main/scss/components/_branding.scss
new file mode 100644
index 0000000000..3072d15f04
--- /dev/null
+++ b/src/main/scss/components/_branding.scss
@@ -0,0 +1,91 @@
+.app-branding {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: var(--standard-transition);
+  z-index: 0;
+  border-radius: var(--form-input-border-radius);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+
+  &::before {
+    background-color: color-mix(
+      in sRGB,
+      var(--text-color-secondary) 20%,
+      transparent
+    );
+    background-image:
+      radial-gradient(
+        ellipse 85% 65% at 20% 25%,
+        var(--light-orange) 0%,
+        transparent 78%
+      ),
+      radial-gradient(
+        ellipse 80% 60% at 80% 20%,
+        var(--light-purple) 0%,
+        transparent 80%
+      ),
+      radial-gradient(
+        ellipse 78% 58% at 28% 75%,
+        var(--light-blue) 0%,
+        transparent 78%
+      ),
+      radial-gradient(
+        ellipse 80% 60% at 78% 72%,
+        var(--light-pink) 0%,
+        transparent 80%
+      ),
+      radial-gradient(
+        ellipse 90% 70% at 50% 50%,
+        var(--light-cyan) 0%,
+        transparent 84%
+      );
+    inset: -100px;
+    opacity: 0.5;
+  }
+
+  &::after {
+    border: var(--jenkins-border--subtle);
+    z-index: 1;
+  }
+
+  .app-branding__conic {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      flex: 1;
+      backdrop-filter: invert(1%) blur(60px);
+      mask-image: repeating-conic-gradient(
+        from 0deg,
+        var(--background) 0deg,
+        transparent 20deg
+      );
+    }
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      min-height: 80px;
+      height: 60%;
+      max-height: 250px;
+    }
+  }
+}
diff --git a/src/main/scss/components/_index.scss b/src/main/scss/components/_index.scss
index 1ee69a8e42..51201abf95 100644
--- a/src/main/scss/components/_index.scss
+++ b/src/main/scss/components/_index.scss
@@ -2,6 +2,7 @@
 @use "app-bar";
 @use "avatar";
 @use "badges";
+@use "branding";
 @use "breadcrumbs";
 @use "buttons";
 @use "cards";
diff --git a/src/main/scss/pages/_about.scss b/src/main/scss/pages/_about.scss
index ad1b78271f..c3f7735543 100644
--- a/src/main/scss/pages/_about.scss
+++ b/src/main/scss/pages/_about.scss
@@ -1,124 +1,3 @@
-.app-about-branding {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: calc(var(--section-padding) * 2);
-  pointer-events: none;
-  margin-bottom: var(--section-padding);
-  overflow: hidden;
-  border-radius: 1rem;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    z-index: 1;
-  }
-
-  &::before {
-    width: 120%;
-    aspect-ratio: 1;
-    background: repeating-conic-gradient(
-      var(--background) 0deg,
-      rgb(100 100 100 / 0.25) 20deg
-    );
-    animation: app-about-starburst 100s linear infinite;
-    opacity: 0.25;
-  }
-
-  &::after {
-    inset: 0;
-    border: var(--jenkins-border--subtle);
-    border-radius: inherit;
-  }
-
-  img {
-    height: 7.5rem;
-    z-index: 1;
-  }
-}
-
-.app-about-branding__aurora {
-  position: absolute;
-  width: 120%;
-  aspect-ratio: 1;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    border-radius: 100%;
-  }
-
-  &::before {
-    background-color: var(--color);
-    background-image:
-      radial-gradient(at 40% 20%, hsl(28 100% 74% / 1) 0, transparent 50%),
-      radial-gradient(at 80% 0%, hsl(189 100% 56% / 1) 0, transparent 50%),
-      radial-gradient(at 0% 50%, hsl(355 85% 93% / 1) 0, transparent 50%),
-      radial-gradient(at 80% 50%, hsl(359 70% 46%) 0, transparent 50%),
-      radial-gradient(at 0% 100%, hsl(22 100% 77% / 1) 0, transparent 50%),
-      radial-gradient(at 80% 100%, hsl(242 100% 70% / 1) 0, transparent 50%),
-      radial-gradient(at 0% 0%, hsl(343 100% 76% / 1) 0, transparent 50%);
-    opacity: 0.4;
-    animation: app-about-aurora-one 7s linear infinite;
-  }
-
-  &::after {
-    background-image:
-      radial-gradient(at 40% 20%, hsl(212 100% 74% / 1) 0, transparent 50%),
-      radial-gradient(at 80% 0%, hsl(13 100% 56% / 1) 0, transparent 50%),
-      radial-gradient(at 0% 50%, hsl(179 85% 93% / 1) 0, transparent 50%),
-      radial-gradient(at 80% 50%, hsl(164 100% 76% / 1) 0, transparent 50%),
-      radial-gradient(at 0% 100%, hsl(206 100% 77% / 1) 0, transparent 50%),
-      radial-gradient(at 80% 100%, hsl(66 100% 70% / 1) 0, transparent 50%),
-      radial-gradient(at 0% 0%, hsl(167 100% 76% / 1) 0, transparent 50%);
-    opacity: 0.2;
-    animation: app-about-aurora-two 14s linear infinite;
-  }
-}
-
-@keyframes app-about-aurora-one {
-  0% {
-    opacity: 0.4;
-  }
-
-  50% {
-    opacity: 0.2;
-    transform: rotate(-180deg);
-  }
-
-  100% {
-    opacity: 0.4;
-    transform: rotate(-360deg);
-  }
-}
-
-@keyframes app-about-aurora-two {
-  0% {
-    opacity: 0.2;
-  }
-
-  50% {
-    opacity: 0.55;
-    transform: rotate(180deg);
-  }
-
-  100% {
-    opacity: 0.2;
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes app-about-starburst {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .app-about-heading {
   font-weight: 600;
   font-family: Georgia, serif;
@@ -132,3 +11,8 @@
   color: var(--text-color-secondary);
   margin: 0;
 }
+
+.app-about-branding {
+  height: 230px;
+  margin-bottom: var(--section-padding);
+}
diff --git a/src/main/scss/pages/_sign-in-register.scss b/src/main/scss/pages/_sign-in-register.scss
index dff3c994c0..f781d66af4 100644
--- a/src/main/scss/pages/_sign-in-register.scss
+++ b/src/main/scss/pages/_sign-in-register.scss
@@ -4,100 +4,46 @@
 @use "../form/checkbox";
 @use "../form/input";
 @use "../components/buttons";
-
-@property --opacity {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
+@use "../components/branding";
 
 .app-sign-in-register {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  grid-template-columns: 40vw 1fr;
   width: 100vw;
-  height: 100vh;
+  min-height: 100dvh;
   padding: 0;
   margin: 0;
+
+  @media (width < 992px) {
+    grid-template-columns: 1fr;
+  }
 }
 
 .app-sign-in-register__branding {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 40vw;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
+  margin: var(--page-inset) 0 var(--page-inset) var(--page-inset);
+  border-radius: var(--form-input-border-radius);
 
   @media (width < 992px) {
     display: none;
   }
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    min-height: 130%;
-    min-width: 130%;
-    aspect-ratio: 1;
-    object-fit: cover;
-    z-index: -1;
-  }
-
-  &::before {
-    background-image:
-      radial-gradient(at 40% 20%, var(--orange) 0, transparent 50%),
-      radial-gradient(at 80% 0%, var(--cyan) 0, transparent 50%),
-      radial-gradient(at 0% 50%, var(--light-pink) 0, transparent 50%),
-      radial-gradient(at 80% 50%, var(--light-red) 0, transparent 50%),
-      radial-gradient(at 0% 100%, var(--light-yellow) 0, transparent 50%),
-      radial-gradient(at 80% 100%, var(--dark-purple) 0, transparent 50%),
-      radial-gradient(at 0% 0%, var(--pink) 0, transparent 50%);
-  }
-
-  &::after {
-    background-image:
-      radial-gradient(at 40% 20%, var(--light-cyan) 0, transparent 50%),
-      radial-gradient(at 80% 0%, var(--dark-orange) 0, transparent 50%),
-      radial-gradient(at 0% 50%, var(--light-blue) 0, transparent 50%),
-      radial-gradient(at 80% 50%, var(--light-green) 0, transparent 50%),
-      radial-gradient(at 0% 100%, var(--light-red) 0, transparent 50%),
-      radial-gradient(at 80% 100%, var(--light-yellow) 0, transparent 50%),
-      radial-gradient(at 0% 0%, var(--cyan) 0, transparent 50%);
-  }
-
-  &__starburst {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    backdrop-filter: invert(2%) blur(100px);
-    mask-image: repeating-conic-gradient(
-      from var(--opacity),
-      var(--background) 0deg,
-      transparent 20deg
-    );
-  }
-
-  img {
-    min-height: 15rem;
-    height: 25vh;
-    max-height: 30rem;
-    z-index: 1;
-  }
 }
 
 .app-sign-in-register__content {
   display: flex;
-  align-items: center;
+  align-items: safe center;
   justify-content: center;
-  min-height: 100vh;
+  min-height: 100dvh;
+  overflow-y: auto;
+}
+
+.app-sign-in-register__content-logo {
+  height: 3.5rem;
+  align-self: start;
 
   @media (width >= 992px) {
-    margin-left: 40vw;
-  }
-
-  @media (height <= 600px) {
-    align-items: stretch;
+    display: none;
   }
 }
 
@@ -105,49 +51,42 @@
   display: flex;
   align-items: stretch;
   flex-direction: column;
-  gap: 1.6rem;
+  gap: 1.5rem;
   margin: calc(var(--section-padding) * 3) var(--section-padding);
   width: 100%;
-
-  @media (width >= 430px) {
-    width: 430px;
-  }
+  max-width: 430px;
 
   * {
     box-sizing: border-box;
   }
 
   h1 {
-    font-size: 1.8rem;
+    font-size: 1.75rem;
     font-family: Georgia, serif;
     text-align: left;
     margin-bottom: 0;
-
-    @media (width <= 600px) {
-      font-size: 1.6rem;
-    }
   }
 
   input {
-    padding: 0.6rem 0.75rem;
+    padding: 0.625rem 0.75rem;
     border-radius: var(--form-input-border-radius);
-    font-size: 0.95rem;
+    font-size: 0.9375rem;
 
-    @media (width <= 600px) {
+    @media (width < 992px) {
       font-size: 1rem;
     }
   }
 
   .app-sign-in-register__form-label {
     display: block;
-    font-size: 0.95rem;
+    font-size: 0.9375rem;
     margin-bottom: 0.5rem;
     font-weight: var(--font-bold-weight);
   }
 
   button {
-    padding: 0.9rem 1rem;
-    font-size: 0.95rem;
+    padding: 0.875rem 1rem;
+    font-size: 0.9375rem;
   }
 
   form {
@@ -163,8 +102,8 @@
     &::before {
       content: "";
       position: absolute;
-      inset: calc(50% + 1px) 0;
-      height: 2px;
+      inset: calc(50% + (var(--jenkins-border-width) / 2)) 0;
+      height: var(--jenkins-border-width);
       border-radius: var(--form-input-border-radius);
       background-color: var(--input-border);
     }
@@ -173,9 +112,9 @@
       @include mixins.link;
 
       z-index: 1;
-      padding: 0 0.2rem;
+      padding: 0 0.25rem;
       font-weight: var(--font-bold-weight);
-      font-size: 0.95rem;
+      font-size: 0.9375rem;
       margin: 0;
       color: var(--link-color);
       text-underline-offset: 2px;
@@ -194,8 +133,8 @@
       &::after {
         content: "";
         position: absolute;
-        inset: 0 -0.1rem;
-        border-radius: 0.4rem;
+        inset: 0 -0.125rem;
+        border-radius: 0.5rem;
         box-shadow: 0 0 0 0.625rem transparent;
         transition: var(--standard-transition);
         pointer-events: none;
@@ -212,7 +151,7 @@
   }
 
   .jenkins-checkbox {
-    font-size: 0.95rem;
+    font-size: 0.9375rem;
   }
 
   & > div {
@@ -222,40 +161,8 @@
   }
 }
 
-@keyframes aurora-one {
-  0% {
-    opacity: 0.3;
-  }
-
-  50% {
-    opacity: 0.15;
-    transform: rotate(-180deg);
-  }
-
-  100% {
-    opacity: 0.3;
-    transform: rotate(-360deg);
-  }
-}
-
-@keyframes aurora-two {
-  0% {
-    opacity: 0.15;
-  }
-
-  50% {
-    opacity: 0.5;
-    transform: rotate(180deg);
-  }
-
-  100% {
-    opacity: 0.15;
-    transform: rotate(360deg);
-  }
-}
-
 .app-sign-in-register__error {
-  font-size: 0.95rem;
+  font-size: 0.9375rem;
   color: var(--error-color);
   font-weight: var(--font-bold-weight);
 
@@ -265,13 +172,13 @@
 
   &:not(:empty) {
     & + input {
-      margin-top: 0.7rem;
+      margin-top: 0.75rem;
     }
   }
 }
 
 .app-sign-in-register__password-notice {
-  font-size: 0.95rem;
+  font-size: 0.9375rem;
   color: var(--text-color-secondary);
 }
 
@@ -286,7 +193,7 @@
 
 #passwordStrengthWrapper {
   margin-top: 0.75rem;
-  font-size: 0.95rem;
+  font-size: 0.9375rem;
 
   #passwordStrength {
     transition: var(--standard-transition);