diff --git a/app/(auth)/signup/email/components/signup-footer.tsx b/app/(auth)/signup/email/components/signup-footer.tsx
index 67e0d66..debdb08 100644
--- a/app/(auth)/signup/email/components/signup-footer.tsx
+++ b/app/(auth)/signup/email/components/signup-footer.tsx
@@ -4,7 +4,7 @@ import { Link } from '@/components/link'
 export const SignUpFooter = () => {
   return (
     <CardFooter
-      mt={{ base: '38px', md: '42px' }}
+      mt={{ base: '38px', md: '32px' }}
       display="flex"
       flexDirection="column"
       p="0"
@@ -27,7 +27,7 @@ export const SignUpFooter = () => {
         align="center"
         fontSize="xs"
         color="gray.600"
-        mt={{ base: '38px', md: '42px' }}
+        mt={{ base: '38px', md: '32px' }}
       >
         By signing up, you agree to{' '}
         <Link href="/signUp/email" color="primary.800" hasUnderLine={true}>
diff --git a/app/(auth)/signup/email/components/signup-form.tsx b/app/(auth)/signup/email/components/signup-form.tsx
index 00c329c..f38d4f9 100644
--- a/app/(auth)/signup/email/components/signup-form.tsx
+++ b/app/(auth)/signup/email/components/signup-form.tsx
@@ -63,13 +63,13 @@ export const SignUpForm = () => {
       sx={signUpInputStyle}
       as="form"
       onSubmit={signUpHandler}
-      mt={{ base: '38px', md: '42px' }}
+      mt={{ base: '38px', md: '32px' }}
       gap={{ base: '30px', md: '40px' }}
       p="0%"
       w={{ base: '90vw', md: 'unset' }}
       maxW="500px"
     >
-      <VStack gap="24px">
+      <VStack>
         <FormControl isInvalid={!!errors.email}>
           <FormLabel color="black">Email</FormLabel>
           <InputForm
diff --git a/app/(auth)/signup/email/components/signup-header.tsx b/app/(auth)/signup/email/components/signup-header.tsx
index 47e0f8c..795a274 100644
--- a/app/(auth)/signup/email/components/signup-header.tsx
+++ b/app/(auth)/signup/email/components/signup-header.tsx
@@ -10,7 +10,7 @@ export const SignUpHeader = () => {
       </Center>
       <VStack
         w="100%"
-        mt={{ base: '28px', md: '40px' }}
+        mt={{ base: '28px', md: '5px' }}
         align={{ base: 'center', md: 'start' }}
       >
         <Heading as="h1" fontSize={{ base: '2xl', md: '4xl' }} color="gray.700">
diff --git a/app/(auth)/signup/email/page.tsx b/app/(auth)/signup/email/page.tsx
index b0780fe..4398119 100644
--- a/app/(auth)/signup/email/page.tsx
+++ b/app/(auth)/signup/email/page.tsx
@@ -12,27 +12,23 @@ export default function SignUp() {
     <LightMode>
       <Box
         as="main"
-        height="100vh"
-        minH="900px"
-        w="100vw"
+        minH="100vh"
+        height="100%"
+        display="flex"
+        overflowX="hidden"
+        p="3%"
+        justifyContent="center"
+        alignItems="center"
         bg={{
           base: 'white',
           md: 'linear-gradient(242.77deg, #C4E6E6 1.15%, #085783 100%)'
         }}
       >
         <Card
-          pb="40px"
-          position="absolute"
-          top={{ base: '0%', md: '50%' }}
-          left="50%"
-          transform={{
-            base: 'translate(-50%, 0%)',
-            md: 'translate(-50%, -50%)'
-          }}
           bg="white"
           boxShadow={{ base: '0', md: '0 4px 16px rgba(0, 0, 0, 0.1)' }}
           maxW={{ base: '100%', md: '542px' }}
-          py="40px"
+          py="30px"
           px={{ base: '16px', md: '80px' }}
         >
           <SignUpHeader />