diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx
index a8e8cc20a7ec9fe3819f3b278da09e7127ec4ec0..b7e0246c38705717c22f0ba32fab6d7a81f702e2 100644
--- a/frontend/src/components/loginBox/index.tsx
+++ b/frontend/src/components/loginBox/index.tsx
@@ -16,21 +16,22 @@ const StyledBox = styled(Box)({
   borderColor: 'black',
   borderWidth: '2px',
   borderRadius: '11px',
-  width: '24rem',
-  height: '18rem',
 })
 
 interface LoginBoxProps {
   header: string
   info: string
   manual?: boolean
+  large?: boolean
 }
 
-const LoginBox = ({ header, info, manual }: LoginBoxProps) => {
+const LoginBox = ({ header, info, manual, large }: LoginBoxProps) => {
   const { t } = useTranslation('login')
   return (
     <StyledBox
       sx={{
+        width: large ? '48rem' : '24rem',
+        height: '18rem',
         marginBottom: { xs: '2rem', md: '0rem' },
       }}
     >
@@ -80,5 +81,5 @@ const LoginBox = ({ header, info, manual }: LoginBoxProps) => {
     </StyledBox>
   )
 }
-LoginBox.defaultProps = { manual: false }
+LoginBox.defaultProps = { manual: false, large: false }
 export default LoginBox
diff --git a/frontend/src/routes/frontpage/components/loginpage.tsx b/frontend/src/routes/frontpage/components/loginpage.tsx
index 79d2f554f6264e635a20305b4bd9ff44579b8001..0a1e5ba14d0226ebe505cfc4e9b0197dbb2be72f 100644
--- a/frontend/src/routes/frontpage/components/loginpage.tsx
+++ b/frontend/src/routes/frontpage/components/loginpage.tsx
@@ -33,7 +33,7 @@ export default function LoginPage() {
       <Container
         sx={{
           display: 'flex',
-          justifyContent: 'space-between',
+          justifyContent: 'space-around',
           flexDirection: { xs: 'column', md: 'row' },
           alignItems: 'center',
         }}
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
index 2e5975de3e5bd3e2ed3cf64a7c0882db492e697b..f65303235534871656a6a411af8b38d2544ae7b1 100644
--- a/frontend/src/routes/invite/index.tsx
+++ b/frontend/src/routes/invite/index.tsx
@@ -6,7 +6,7 @@ import Loading from 'components/loading'
 import { useUserContext } from 'contexts'
 import { submitJsonOpts } from 'utils'
 import LoginBox from 'components/loginBox'
-import { Box } from '@mui/material'
+import { Container } from '@mui/material'
 
 function ChooseRegistrationMethod() {
   const { t } = useTranslation(['invite'])
@@ -15,9 +15,16 @@ function ChooseRegistrationMethod() {
     <Page>
       <h1>{t('header')}</h1>
       <p>{t('description')}</p>
-      <Box>
-        <LoginBox header={t('guest')} info={t('guestInfo')} manual />
-      </Box>
+      <Container
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          flexDirection: { xs: 'column', md: 'row' },
+          alignItems: 'center',
+        }}
+      >
+        <LoginBox header={t('guest')} info={t('guestInfo')} manual large />
+      </Container>
     </Page>
   )
 }