diff --git a/src/login-web-app/previewer/shared/ui/layout/layout.module.css b/src/login-web-app/previewer/shared/ui/layout/layout.module.css
index f37ac24a..98ce4361 100644
--- a/src/login-web-app/previewer/shared/ui/layout/layout.module.css
+++ b/src/login-web-app/previewer/shared/ui/layout/layout.module.css
@@ -2,7 +2,7 @@
   --sidebarWidth: 360px;
   display: grid;
   grid-template-columns: var(--sidebarWidth) 1fr;
-  min-height: calc(100vh - 80px);
+  min-height: 100dvh;
   gap: 0;
 }
 
diff --git a/src/login-web-app/src/shared/ui/header/Header.tsx b/src/login-web-app/src/shared/ui/header/Header.tsx
index 7a33a0af..99c85073 100644
--- a/src/login-web-app/src/shared/ui/header/Header.tsx
+++ b/src/login-web-app/src/shared/ui/header/Header.tsx
@@ -15,10 +15,12 @@ import classes from './header.module.css';
 export const Header = () => {
   return (
     <header className={`${classes.header} px2 flex flex-center flex-gap-1 w100`}>
-      <a href="/" className="button button-tiny button-link">
-        <IconVciCredentialHome width={32} height={32} />
-        Return to app
-      </a>
+      <div>
+        <a href="/" className="button button-tiny button-link">
+          <IconVciCredentialHome width={24} height={24} />
+          Return to app
+        </a>
+      </div>
     </header>
   );
 };
diff --git a/src/login-web-app/src/shared/ui/header/header.module.css b/src/login-web-app/src/shared/ui/header/header.module.css
index d9c82c44..f3512bf4 100644
--- a/src/login-web-app/src/shared/ui/header/header.module.css
+++ b/src/login-web-app/src/shared/ui/header/header.module.css
@@ -3,5 +3,13 @@
   top: 0;
   left: 0;
   position: fixed;
-  z-index: 2;
+  z-index: 10;
+}
+
+@media (max-width: 60em) {
+  .header {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    backdrop-filter: saturate(180%) blur(20px);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+  }
 }
diff --git a/src/login-web-app/src/shared/util/css/styles.css b/src/login-web-app/src/shared/util/css/styles.css
index 0f9f20e5..6ce1ced1 100644
--- a/src/login-web-app/src/shared/util/css/styles.css
+++ b/src/login-web-app/src/shared/util/css/styles.css
@@ -141,7 +141,7 @@ svg {
 }
 
 .haapi-stepper-form-field-text-input {
-  @extend .field, .w100, .mt2;
+  @extend .field, .w100;
   font-family: var(--type-regular);
 }
 
@@ -161,14 +161,16 @@ svg {
   background: transparent;
   border: none;
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   height: calc(var(--form-field-height) / 2);
   width: calc(var(--form-field-height) / 2);
   padding: unset;
   position: absolute;
   right: var(--space-1);
-  vertical-align: middle;
-  top: calc(50%);
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .haapi-stepper-form-field-password-visibility-toggle:focus-visible {
@@ -208,10 +210,14 @@ svg {
 }
 
 .haapi-stepper-well {
-  @extend .p3, .mx-auto, .bg-white, .br-8;
+  @extend .p3, .mx-auto;
   width: clamp(280px, 90%, 560px);
-  box-shadow: 0 4px 24px var(--color-grey-light);
-  margin: 0 auto;
+  background-color: var(--well-background-color);
+  border-width: var(--well-border-width);
+  border-style: var(--well-border-style);
+  border-color: var(--well-border-color);
+  border-radius: var(--well-border-radius);
+  box-shadow: var(--well-box-shadow);
 }
 
 .haapi-stepper-links {
@@ -329,4 +335,9 @@ svg {
 }
 
 .haapi-validation-error-description {
+  color: var(--color-danger);
+}
+
+.is-error {
+  @extend .alert, .alert-danger, .w100, .mx-auto;
 }