diff --git a/src/app/(auth)/confirm-reset-password/page.tsx b/src/app/(auth)/confirm-reset-password/page.tsx
index 9b7eac11..62d6b0e1 100644
--- a/src/app/(auth)/confirm-reset-password/page.tsx
+++ b/src/app/(auth)/confirm-reset-password/page.tsx
@@ -1,19 +1,18 @@
 'use client';
 
 import { BigBlueLinkButton } from '@/components/Buttons';
-import { SmallCard } from '@/styles/containers';
+import { Flex, SmallCard } from '@/styles/containers';
 import { H2, H4 } from '@/styles/text';
-import { SpacerDiv } from '../styles';
 
 export default function ConfirmResetPassword() {
   return (
     <SmallCard>
-      <SpacerDiv>
+      <Flex $direction="column" $gap="20px">
         <H2>Your password has been reset.</H2>
         <BigBlueLinkButton href="/login">
           <H4 $color="white">Go to Log In</H4>
         </BigBlueLinkButton>
-      </SpacerDiv>
+      </Flex>
     </SmallCard>
   );
 }
diff --git a/src/app/(auth)/email-verified/page.tsx b/src/app/(auth)/email-verified/page.tsx
index 65d15a2f..50f2729f 100644
--- a/src/app/(auth)/email-verified/page.tsx
+++ b/src/app/(auth)/email-verified/page.tsx
@@ -1,19 +1,18 @@
 'use client';
 
-import { SpacerDiv } from '@/app/(auth)/styles';
 import { BigBlueLinkButton } from '@/components/Buttons';
-import { SmallCard } from '@/styles/containers';
+import { Flex, SmallCard } from '@/styles/containers';
 import { H2 } from '@/styles/text';
 
 export default function EmailVerified() {
   return (
     <SmallCard>
-      <SpacerDiv>
+      <Flex $direction="column" $gap="20px">
         <H2>Your email has been verified!</H2>
         <BigBlueLinkButton type="button" href="/onboarding/roles">
           Go to Onboarding
         </BigBlueLinkButton>
-      </SpacerDiv>
+      </Flex>
     </SmallCard>
   );
 }
diff --git a/src/app/(auth)/forgot-password/page.tsx b/src/app/(auth)/forgot-password/page.tsx
index ab622e68..42bab1e7 100644
--- a/src/app/(auth)/forgot-password/page.tsx
+++ b/src/app/(auth)/forgot-password/page.tsx
@@ -3,11 +3,11 @@
 import { useState } from 'react';
 import isEmail from 'validator/lib/isEmail';
 import supabase from '@/api/supabase/createClient';
-import { HorizontalDiv, SpacerDiv } from '@/app/(auth)/styles';
+import { HorizontalDiv } from '@/app/(auth)/styles';
 import { BigBlueButton, Button } from '@/components/Buttons';
 import TextInput from '@/components/TextInput/index';
 import COLORS from '@/styles/colors';
-import { SmallCardForm } from '@/styles/containers';
+import { Flex, SmallCardForm } from '@/styles/containers';
 import { H1, H2, H4, P } from '@/styles/text';
 
 export default function ForgotPassword() {
@@ -49,7 +49,7 @@ export default function ForgotPassword() {
     </SmallCardForm>
   ) : (
     <SmallCardForm onSubmit={handleForgotPassword}>
-      <SpacerDiv>
+      <Flex $direction="column" $gap="20px">
         <H2>A password reset link has been sent to your email.</H2>
         <H4 $color={COLORS.greyDark}>
           This link will direct you to the next step. If you didn’t receive an
@@ -67,7 +67,7 @@ export default function ForgotPassword() {
             <P $color={COLORS.greyMid}>Email has been resent!</P>
           )}
         </HorizontalDiv>
-      </SpacerDiv>
+      </Flex>
     </SmallCardForm>
   );
 }
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index 0fda5827..487da924 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -3,11 +3,11 @@
 import { useContext, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import isEmail from 'validator/lib/isEmail';
-import { H4Centered, SpacerDiv } from '@/app/(auth)/styles';
+import { H4Centered } from '@/app/(auth)/styles';
 import { BigBlueButton } from '@/components/Buttons';
 import TextInput from '@/components/TextInput/index';
 import COLORS from '@/styles/colors';
-import { SmallCardForm } from '@/styles/containers';
+import { Flex, SmallCardForm } from '@/styles/containers';
 import { H1, LinkColored, P } from '@/styles/text';
 import { useAuth } from '@/utils/AuthProvider';
 import { ProfileContext } from '@/utils/ProfileProvider';
@@ -52,12 +52,12 @@ export default function Login() {
 
   return (
     <SmallCardForm onSubmit={handleSignIn}>
-      <SpacerDiv $gap={0.625}>
+      <Flex $direction="column" $gap="10px">
         <H1>Log In</H1>
         {errorMessage !== '' && <P $color={COLORS.redMid}>{errorMessage}</P>}
-      </SpacerDiv>
-      <SpacerDiv $gap={0.8125}>
-        <SpacerDiv>
+      </Flex>
+      <Flex $direction="column" $gap="13px">
+        <Flex $direction="column" $gap="20px">
           <TextInput
             label="Email"
             placeholder="email@example.com"
@@ -76,14 +76,14 @@ export default function Login() {
             value={password}
             setValue={setPassword}
           />
-        </SpacerDiv>
+        </Flex>
         <P>
           <LinkColored href="/forgot-password" $color={COLORS.greyMid}>
             Forgot your password?
           </LinkColored>
         </P>
-      </SpacerDiv>
-      <SpacerDiv>
+      </Flex>
+      <Flex $direction="column" $gap="20px">
         <BigBlueButton type="submit">Log in</BigBlueButton>
         <H4Centered>
           Don’t have an account yet?{' '}
@@ -91,7 +91,7 @@ export default function Login() {
             Sign up
           </LinkColored>
         </H4Centered>
-      </SpacerDiv>
+      </Flex>
     </SmallCardForm>
   );
 }
diff --git a/src/app/(auth)/reset-password/page.tsx b/src/app/(auth)/reset-password/page.tsx
index 056ee136..e804229b 100644
--- a/src/app/(auth)/reset-password/page.tsx
+++ b/src/app/(auth)/reset-password/page.tsx
@@ -4,12 +4,11 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import supabase from '@/api/supabase/createClient';
 import { verifyUserPassword } from '@/api/supabase/queries/password';
-import { SpacerDiv } from '@/app/(auth)/styles';
 import { BigBlueButton } from '@/components/Buttons';
 import PasswordComplexity from '@/components/PasswordComplexity';
 import TextInput from '@/components/TextInput/index';
 import COLORS from '@/styles/colors';
-import { SmallCardForm } from '@/styles/containers';
+import { Flex, SmallCardForm } from '@/styles/containers';
 import { H1, H4, P } from '@/styles/text';
 import { useAuth } from '@/utils/AuthProvider';
 
@@ -63,12 +62,12 @@ export default function ResetPassword() {
 
   return canReset ? (
     <SmallCardForm onSubmit={handleResetPassword}>
-      <SpacerDiv $gap={10}>
+      <Flex $direction="column" $gap="10px">
         <H1>Set New Password</H1>
         {errorMessage !== '' && <P $color={COLORS.redMid}>{errorMessage}</P>}
-      </SpacerDiv>
-      <SpacerDiv>
-        <SpacerDiv $gap={8}>
+      </Flex>
+      <Flex $direction="column" $gap="20px">
+        <Flex $direction="column" $gap="8px">
           <TextInput
             label="New Password"
             placeholder="Password"
@@ -81,7 +80,7 @@ export default function ResetPassword() {
             password={newPassword}
             setComplexity={setPasswordComplexity}
           />
-        </SpacerDiv>
+        </Flex>
         <TextInput
           label="Confirm New Password"
           placeholder="Password"
@@ -90,7 +89,7 @@ export default function ResetPassword() {
           value={newPassword2}
           setValue={setNewPassword2}
         />
-      </SpacerDiv>
+      </Flex>
       <BigBlueButton type="submit">
         <H4 $color="white">Set Password</H4>
       </BigBlueButton>
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index 39454e84..ec70f064 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -3,12 +3,12 @@
 import { useState } from 'react';
 import isEmail from 'validator/lib/isEmail';
 import supabase from '@/api/supabase/createClient';
-import { H4Centered, HorizontalDiv, SpacerDiv } from '@/app/(auth)/styles';
+import { H4Centered, HorizontalDiv } from '@/app/(auth)/styles';
 import { BigBlueButton, Button } from '@/components/Buttons';
 import PasswordComplexity from '@/components/PasswordComplexity';
 import TextInput from '@/components/TextInput/index';
 import COLORS from '@/styles/colors';
-import { SmallCardForm } from '@/styles/containers';
+import { Flex, SmallCardForm } from '@/styles/containers';
 import { H1, H2, H4, LinkColored, P } from '@/styles/text';
 import { useAuth } from '@/utils/AuthProvider';
 
@@ -78,12 +78,12 @@ export default function SignUp() {
     <>
       {!emailSentCount && (
         <SmallCardForm onSubmit={handleSignUp}>
-          <SpacerDiv $gap={10}>
+          <Flex $direction="column" $gap="10px">
             <H1>Sign Up</H1>
             {errorMessage !== '' && (
               <P $color={COLORS.redMid}>{errorMessage}</P>
             )}
-          </SpacerDiv>
+          </Flex>
           <TextInput
             label="Email"
             placeholder="email@example.com"
@@ -93,7 +93,7 @@ export default function SignUp() {
             value={email}
             setValue={setEmail}
           />
-          <SpacerDiv $gap={8}>
+          <Flex $direction="column" $gap="8px">
             <TextInput
               label="Password"
               placeholder="Password"
@@ -107,7 +107,7 @@ export default function SignUp() {
               password={password}
               setComplexity={setPasswordComplexity}
             />
-          </SpacerDiv>
+          </Flex>
           <TextInput
             label="Confirm Password"
             placeholder="Confirm Password"
@@ -116,7 +116,7 @@ export default function SignUp() {
             value={confirmPassword}
             setValue={setConfirmPassword}
           />
-          <SpacerDiv>
+          <Flex $direction="column" $gap="20px">
             <BigBlueButton type="submit">Sign Up</BigBlueButton>
             <H4Centered>
               Have an account already?{' '}
@@ -124,12 +124,12 @@ export default function SignUp() {
                 Log In
               </LinkColored>
             </H4Centered>
-          </SpacerDiv>
+          </Flex>
         </SmallCardForm>
       )}
       {emailSentCount > 0 && (
         <SmallCardForm onSubmit={handleSignUp}>
-          <SpacerDiv>
+          <Flex $direction="column" $gap="20px">
             <H2>An email verification link has been sent.</H2>
             <H4 $color={COLORS.greyDark}>
               This link will direct you to the next step. If you didn’t receive
@@ -147,7 +147,7 @@ export default function SignUp() {
                 <P $color={COLORS.greyMid}>Email has been resent!</P>
               )}
             </HorizontalDiv>
-          </SpacerDiv>
+          </Flex>
         </SmallCardForm>
       )}
     </>