diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss
index f827a6c62..f0ea9483b 100644
--- a/packages/ui/src/components/AppContent/index.module.scss
+++ b/packages/ui/src/components/AppContent/index.module.scss
@@ -5,7 +5,11 @@ $font-family: 'PingFang SC', 'SF Pro Display', 'Siyuan Heiti', 'Roboto';
 $font-family-small: 'PingFang SC', 'SF Pro Text', 'Siyuan Heiti', 'Roboto';
 
 .content {
-  min-height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  min-height: 100%;
   background: var(--color-base);
   color: var(--color-text);
   font: var(--font-body);
diff --git a/packages/ui/src/components/NavBar/index.module.scss b/packages/ui/src/components/NavBar/index.module.scss
index 7825345e7..b3cf8e5ee 100644
--- a/packages/ui/src/components/NavBar/index.module.scss
+++ b/packages/ui/src/components/NavBar/index.module.scss
@@ -2,15 +2,15 @@
 
 .navBar {
   width: 100%;
-  margin-bottom: _.unit(6);
+  min-height: 44px;
   @include _.flex-row;
   justify-content: center;
+  padding: _.unit(3) _.unit(10);
   position: relative;
-  padding: _.unit(3) 0;
 
   svg {
     position: absolute;
-    left: _.unit(-2);
+    left: _.unit(4);
     top: 50%;
     transform: translateY(-50%);
     fill: var(--color-icon);
diff --git a/packages/ui/src/components/Passcode/index.module.scss b/packages/ui/src/components/Passcode/index.module.scss
index 6a9cdee1e..b99795ff1 100644
--- a/packages/ui/src/components/Passcode/index.module.scss
+++ b/packages/ui/src/components/Passcode/index.module.scss
@@ -2,7 +2,7 @@
 
 .passcode {
   @include _.flex-row;
-  @include _.mobile-container-width;
+  @include _.container-width;
   justify-content: space-between;
   margin: 0 auto;
 
diff --git a/packages/ui/src/containers/CreateAccount/index.module.scss b/packages/ui/src/containers/CreateAccount/index.module.scss
index d5e155bc4..b85b96cf9 100644
--- a/packages/ui/src/containers/CreateAccount/index.module.scss
+++ b/packages/ui/src/containers/CreateAccount/index.module.scss
@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .form {
-  @include _.mobile-container-width;
+  @include _.container-width;
   @include _.flex-column;
   margin: 0 auto;
 
diff --git a/packages/ui/src/containers/PasscodeValidation/index.module.scss b/packages/ui/src/containers/PasscodeValidation/index.module.scss
index bb61cc04f..3ab34698d 100644
--- a/packages/ui/src/containers/PasscodeValidation/index.module.scss
+++ b/packages/ui/src/containers/PasscodeValidation/index.module.scss
@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .form {
-  @include _.mobile-container-width;
+  @include _.container-width;
   margin: 0 auto;
   @include _.flex-column;
 
diff --git a/packages/ui/src/containers/Passwordless/index.module.scss b/packages/ui/src/containers/Passwordless/index.module.scss
index 4cdf01878..3f9146d82 100644
--- a/packages/ui/src/containers/Passwordless/index.module.scss
+++ b/packages/ui/src/containers/Passwordless/index.module.scss
@@ -3,7 +3,7 @@
 .form {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   > * {
     width: 100%;
diff --git a/packages/ui/src/containers/SocialCreateAccount/index.module.scss b/packages/ui/src/containers/SocialCreateAccount/index.module.scss
index e8fb71b0c..f2949e97d 100644
--- a/packages/ui/src/containers/SocialCreateAccount/index.module.scss
+++ b/packages/ui/src/containers/SocialCreateAccount/index.module.scss
@@ -4,7 +4,7 @@
 .container {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   > * {
     width: 100%;
diff --git a/packages/ui/src/containers/SocialSignIn/index.module.scss b/packages/ui/src/containers/SocialSignIn/index.module.scss
index bf4563228..f5f829230 100644
--- a/packages/ui/src/containers/SocialSignIn/index.module.scss
+++ b/packages/ui/src/containers/SocialSignIn/index.module.scss
@@ -2,7 +2,7 @@
 
 .socialIconList {
   @include _.flex-row;
-  @include _.mobile-container-width;
+  @include _.container-width;
   justify-content: center;
   margin: 0 auto;
 
@@ -22,7 +22,7 @@
 .socialLinkList {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   .socialLinkButton {
     margin-bottom: _.unit(4);
diff --git a/packages/ui/src/containers/UsernameSignin/index.module.scss b/packages/ui/src/containers/UsernameSignin/index.module.scss
index 3cb3cbe91..f25b58b79 100644
--- a/packages/ui/src/containers/UsernameSignin/index.module.scss
+++ b/packages/ui/src/containers/UsernameSignin/index.module.scss
@@ -3,7 +3,7 @@
 .form {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   > * {
     width: 100%;
diff --git a/packages/ui/src/pages/Callback/index.module.scss b/packages/ui/src/pages/Callback/index.module.scss
index 310b1aa0c..0c522a64b 100644
--- a/packages/ui/src/pages/Callback/index.module.scss
+++ b/packages/ui/src/pages/Callback/index.module.scss
@@ -2,13 +2,11 @@
 
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
 }
 
 .connector {
-  margin: _.unit(20) 0;
+  margin: _.unit(30) 0;
 }
 
 .loadingLabel {
@@ -16,5 +14,5 @@
 }
 
 .button {
-  @include _.mobile-container-width;
+  @include _.container-width;
 }
diff --git a/packages/ui/src/pages/Consent/index.module.scss b/packages/ui/src/pages/Consent/index.module.scss
index f2c8114e5..ababfac6a 100644
--- a/packages/ui/src/pages/Consent/index.module.scss
+++ b/packages/ui/src/pages/Consent/index.module.scss
@@ -1,15 +1,14 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
 
   .header {
-    margin: _.unit(30) 0;
+    margin-top: _.unit(30);
   }
 
   .content {
+    margin-top: _.unit(24);
     @include _.text-hint;
   }
 }
diff --git a/packages/ui/src/pages/Passcode/index.module.scss b/packages/ui/src/pages/Passcode/index.module.scss
index 3aa2898c9..45b789f15 100644
--- a/packages/ui/src/pages/Passcode/index.module.scss
+++ b/packages/ui/src/pages/Passcode/index.module.scss
@@ -1,9 +1,8 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
+  padding-top: _.unit(2);
 }
 
 .title {
diff --git a/packages/ui/src/pages/Passcode/index.tsx b/packages/ui/src/pages/Passcode/index.tsx
index 54e224be5..a23b96e49 100644
--- a/packages/ui/src/pages/Passcode/index.tsx
+++ b/packages/ui/src/pages/Passcode/index.tsx
@@ -43,12 +43,14 @@ const Passcode = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar />
-      <div className={styles.title}>{t('action.enter_passcode')}</div>
-      <div className={styles.detail}>{t('description.enter_passcode', { address: target })}</div>
-      <PasscodeValidation type={type} method={method} target={target} />
-    </div>
+      <div className={styles.wrapper}>
+        <div className={styles.title}>{t('action.enter_passcode')}</div>
+        <div className={styles.detail}>{t('description.enter_passcode', { address: target })}</div>
+        <PasscodeValidation type={type} method={method} target={target} />
+      </div>
+    </>
   );
 };
 
diff --git a/packages/ui/src/pages/Register/index.module.scss b/packages/ui/src/pages/Register/index.module.scss
index 7ebbbd880..7cfa4d351 100644
--- a/packages/ui/src/pages/Register/index.module.scss
+++ b/packages/ui/src/pages/Register/index.module.scss
@@ -1,11 +1,11 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
+  padding-top: _.unit(2);
 }
 
+
 .title {
   width: 100%;
   @include _.title;
diff --git a/packages/ui/src/pages/Register/index.tsx b/packages/ui/src/pages/Register/index.tsx
index 774b5e3d3..aa42d6d11 100644
--- a/packages/ui/src/pages/Register/index.tsx
+++ b/packages/ui/src/pages/Register/index.tsx
@@ -34,11 +34,13 @@ const Register = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar />
-      <div className={styles.title}>{t('action.create_account')}</div>
-      {registerForm}
-    </div>
+      <div className={styles.wrapper}>
+        <div className={styles.title}>{t('action.create_account')}</div>
+        {registerForm}
+      </div>
+    </>
   );
 };
 
diff --git a/packages/ui/src/pages/SecondarySignIn/index.module.scss b/packages/ui/src/pages/SecondarySignIn/index.module.scss
index 94c944eb5..7cfa4d351 100644
--- a/packages/ui/src/pages/SecondarySignIn/index.module.scss
+++ b/packages/ui/src/pages/SecondarySignIn/index.module.scss
@@ -1,9 +1,8 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
+  padding-top: _.unit(2);
 }
 
 
diff --git a/packages/ui/src/pages/SecondarySignIn/index.tsx b/packages/ui/src/pages/SecondarySignIn/index.tsx
index dd2eb4cbc..a8ff19533 100644
--- a/packages/ui/src/pages/SecondarySignIn/index.tsx
+++ b/packages/ui/src/pages/SecondarySignIn/index.tsx
@@ -34,11 +34,13 @@ const SecondarySignIn = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar />
-      <div className={styles.title}>{t('action.sign_in')}</div>
-      {signInForm}
-    </div>
+      <div className={styles.wrapper}>
+        <div className={styles.title}>{t('action.sign_in')}</div>
+        {signInForm}
+      </div>
+    </>
   );
 };
 
diff --git a/packages/ui/src/pages/SignIn/index.module.scss b/packages/ui/src/pages/SignIn/index.module.scss
index e4c70b13c..80e5e90e0 100644
--- a/packages/ui/src/pages/SignIn/index.module.scss
+++ b/packages/ui/src/pages/SignIn/index.module.scss
@@ -1,11 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  min-height: 100vh;
-  @include _.flex-column;
-  justify-content: flex-start;
+  @include _.page-wrapper;
 
   .header {
     margin: _.unit(8);
@@ -17,7 +13,7 @@
   }
 
   .divider {
-    @include _.mobile-container-width;
+    @include _.container-width;
   }
 
   .primarySignIn {
diff --git a/packages/ui/src/pages/SocialRegister/index.module.scss b/packages/ui/src/pages/SocialRegister/index.module.scss
index 1b84da4a2..43af2c306 100644
--- a/packages/ui/src/pages/SocialRegister/index.module.scss
+++ b/packages/ui/src/pages/SocialRegister/index.module.scss
@@ -1,7 +1,5 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
 }
diff --git a/packages/ui/src/pages/SocialRegister/index.tsx b/packages/ui/src/pages/SocialRegister/index.tsx
index 1fb42c2e4..a2cad1ed0 100644
--- a/packages/ui/src/pages/SocialRegister/index.tsx
+++ b/packages/ui/src/pages/SocialRegister/index.tsx
@@ -20,10 +20,12 @@ const SocialRegister = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar title={t('description.bind_account_title')} />
-      <SocialCreateAccount connectorId={connector} />
-    </div>
+      <div className={styles.wrapper}>
+        <SocialCreateAccount connectorId={connector} />
+      </div>
+    </>
   );
 };
 
diff --git a/packages/ui/src/scss/_underscore.scss b/packages/ui/src/scss/_underscore.scss
index 6af5c005a..bb63e0e2a 100644
--- a/packages/ui/src/scss/_underscore.scss
+++ b/packages/ui/src/scss/_underscore.scss
@@ -29,7 +29,14 @@
   color: var(--color-text);
 }
 
-@mixin mobile-container-width {
+@mixin page-wrapper {
+  position: relative;
+  padding: unit(6) unit(5);
+  @include flex-column;
+  justify-content: flex-start;
+}
+
+@mixin container-width {
   width: 100%;
   max-width: 360px;
 }