diff --git a/app/assets/stylesheets/helpers.scss b/app/assets/stylesheets/helpers.scss
index 5119c6231ff0cff3cedfe6f46fb6c5f5ac12af99..107604e6ea9295d329524c07da44fdd5804e0352 100644
--- a/app/assets/stylesheets/helpers.scss
+++ b/app/assets/stylesheets/helpers.scss
@@ -26,40 +26,22 @@
 }
 
 .vertical-center {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  height: 75%;
-
-  @include media-breakpoint-down(xxl) {
-    height: 85%;
-  }
+  min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .no-header-height {
   min-height: calc(100vh - $footer-height - $footer-buffer-height);
-
-  .vertical-buffer {
-    padding-top: 10%;
-
-    @include media-breakpoint-down(xxl) {
-      height: 5%;
-    }
-  }
 }
 
 .regular-height {
   min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
 
-  .vertical-buffer {
-    padding-top: 5%;
-
-    @include media-breakpoint-down(xxl) {
-      height: 3%;
-    }
+  .vertical-center {
+    min-height: calc(100vh - $header-height - $header-height - $footer-height - $footer-buffer-height);
   }
 }
 
diff --git a/app/javascript/components/rooms/CantCreateRoom.jsx b/app/javascript/components/rooms/CantCreateRoom.jsx
index ae91fc63abb8764a5f82b50b35e129010a496430..fc09a1d2ae4e7afd2725b5b4f6a69ae033fffed8 100644
--- a/app/javascript/components/rooms/CantCreateRoom.jsx
+++ b/app/javascript/components/rooms/CantCreateRoom.jsx
@@ -36,7 +36,7 @@ export default function CantCreateRoom() {
   const parsedUrl = meetingUrl.match(regex);
 
   return (
-    <div className="vertical-buffer">
+    <div className="vertical-center">
       <Card className="col-md-8 mx-auto border-0 card-shadow">
         <div className="p-5 pb-4">
           <h2><strong>{t('homepage.enter_meeting_url')}</strong></h2>
diff --git a/app/javascript/components/rooms/room/join/RequireAuthentication.jsx b/app/javascript/components/rooms/room/join/RequireAuthentication.jsx
index a1cd2b4ad6da1c301a3851f423bdc72c64fe15da..dbcecb0fe12068cf57f1e24200eb43407bfd3ee4 100644
--- a/app/javascript/components/rooms/room/join/RequireAuthentication.jsx
+++ b/app/javascript/components/rooms/room/join/RequireAuthentication.jsx
@@ -32,7 +32,7 @@ export default function RequireAuthentication({ path }) {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-xl-4 col-lg-5 col-md-7 col-8 mx-auto p-0 border-0 card-shadow text-center">
+      <Card className="col-xl-6 col-lg-7 col-md-9 col-10 mx-auto p-0 border-0 card-shadow text-center">
         <Card.Body className="pt-4 px-5">
           <p className="mb-0">{ t('room.settings.require_signed_in_message') }</p>
         </Card.Body>
diff --git a/app/javascript/components/rooms/room/join/RoomJoin.jsx b/app/javascript/components/rooms/room/join/RoomJoin.jsx
index 898d1e236a02774131d5c8cb5a8e2d88e47af4c3..109e94c4e8aa08b08af36d53e30802b79afb81ef 100644
--- a/app/javascript/components/rooms/room/join/RoomJoin.jsx
+++ b/app/javascript/components/rooms/room/join/RoomJoin.jsx
@@ -162,7 +162,7 @@ export default function RoomJoin() {
   );
 
   return (
-    <div className="vertical-buffer">
+    <div className="vertical-center">
       <div className="text-center pb-4">
         <Logo />
       </div>
diff --git a/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx b/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx
index 3e3649a45b6444ce703ff3bde8ff7eebab1108f7..78461d918fedfecae5fda71beada181023777967 100644
--- a/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx
+++ b/app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx
@@ -28,7 +28,7 @@ export default function RoomJoinPlaceholder() {
   const { t } = useTranslation();
 
   return (
-    <div className="vertical-buffer">
+    <div className="vertical-center">
       <div className="text-center pb-4">
         <Logo />
       </div>
diff --git a/app/javascript/components/users/account_activation/VerifyAccount.jsx b/app/javascript/components/users/account_activation/VerifyAccount.jsx
index 9b5cb73690bc1d0b2314d50f233d7830a142bba6..01d4ec3a78b75ca2ff7d1de76d109af0f56ff239 100644
--- a/app/javascript/components/users/account_activation/VerifyAccount.jsx
+++ b/app/javascript/components/users/account_activation/VerifyAccount.jsx
@@ -32,7 +32,7 @@ export default function VerifyAccount() {
   const { t } = useTranslation();
 
   return (
-    <div className="vertical-buffer">
+    <div className="vertical-center">
       <div className="text-center pb-4">
         <Logo />
       </div>
diff --git a/app/javascript/components/users/authentication/SignIn.jsx b/app/javascript/components/users/authentication/SignIn.jsx
index ac6ea3eecfc085d54f9d9624c18b319f5aca8620..3059feab92214276808177fa17ac75acc0d08414 100644
--- a/app/javascript/components/users/authentication/SignIn.jsx
+++ b/app/javascript/components/users/authentication/SignIn.jsx
@@ -31,7 +31,7 @@ export default function SignIn() {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+      <Card className="col-xl-5 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
         <Card.Title className="text-center pb-2"> { t('authentication.sign_in') } </Card.Title>
         <SigninForm />
         { registrationMethod !== 'invite' && (
diff --git a/app/javascript/components/users/authentication/Signup.jsx b/app/javascript/components/users/authentication/Signup.jsx
index a379d2c22cd62125b8c6bae8e367f9f6e9599642..90670b39564c2b33ea4e2bd2edc00940619308f2 100644
--- a/app/javascript/components/users/authentication/Signup.jsx
+++ b/app/javascript/components/users/authentication/Signup.jsx
@@ -39,7 +39,7 @@ export default function Signup() {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+      <Card className="col-xl-5 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
         <Card.Title className="text-center pb-2"> { t('authentication.create_an_account') } </Card.Title>
         <SignupForm />
         <span className="text-center text-muted small"> { t('authentication.already_have_account') }
diff --git a/app/javascript/components/users/password_management/ForgetPassword.jsx b/app/javascript/components/users/password_management/ForgetPassword.jsx
index e4a00582300b3aee4a5ddb385b7f1ba0381726b8..e7a2f38e66dca7b39cb394c6349da2ce6604b86c 100644
--- a/app/javascript/components/users/password_management/ForgetPassword.jsx
+++ b/app/javascript/components/users/password_management/ForgetPassword.jsx
@@ -29,7 +29,7 @@ export default function ForgetPassword() {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+      <Card className="col-xl-4 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
         <Card.Title className="text-center pb-2"> { t('user.account.reset_password')} </Card.Title>
         <ForgetPwdForm />
         <span className="text-center text-muted small"> { t('or') }
diff --git a/app/javascript/components/users/password_management/ResetPassword.jsx b/app/javascript/components/users/password_management/ResetPassword.jsx
index 0c4362c9d6688045bdbe1ffd28248ef6f137c136..b3ace1a9e25ec71bf9ac857ca0f205304bf3a4d0 100644
--- a/app/javascript/components/users/password_management/ResetPassword.jsx
+++ b/app/javascript/components/users/password_management/ResetPassword.jsx
@@ -36,7 +36,7 @@ export default function ResetPassword() {
       <div className="text-center pb-4">
         <Logo />
       </div>
-      <Card className="col-xl-3 col-lg-4 col-md-6 col-8 mx-auto p-4 border-0 card-shadow">
+      <Card className="col-xl-5 col-lg-6 col-md-8 col-10 mx-auto p-4 border-0 card-shadow">
         <ResetPwdForm token={token} />
       </Card>
     </div>
diff --git a/app/javascript/components/users/registration/PendingRegistration.jsx b/app/javascript/components/users/registration/PendingRegistration.jsx
index e13328e782cc3a7c71488ecf40d6797e51fdbd43..14ca8f3220bd9385cc092ac7c6270782ad799ce2 100644
--- a/app/javascript/components/users/registration/PendingRegistration.jsx
+++ b/app/javascript/components/users/registration/PendingRegistration.jsx
@@ -25,7 +25,7 @@ export default function PendingRegistration() {
   const { t } = useTranslation();
 
   return (
-    <div className="vertical-buffer">
+    <div className="vertical-center">
       <div className="text-center pb-4">
         <Logo />
       </div>