diff --git a/packages/web/components/templates/ProfileLayout.tsx b/packages/web/components/templates/ProfileLayout.tsx
index 8dffb49eb..af9fd04e9 100644
--- a/packages/web/components/templates/ProfileLayout.tsx
+++ b/packages/web/components/templates/ProfileLayout.tsx
@@ -14,7 +14,6 @@ export function ProfileLayout(props: ProfileLayoutProps): JSX.Element {
         alignment="center"
         distribution="center"
         css={{
-          // bg: '$omnivoreYellow',
           height: '100vh',
           bg: '$omnivoreYellow',
         }}
diff --git a/packages/web/components/templates/auth/EmailForgotPassword.tsx b/packages/web/components/templates/auth/EmailForgotPassword.tsx
index 67ff053ad..760c43c43 100644
--- a/packages/web/components/templates/auth/EmailForgotPassword.tsx
+++ b/packages/web/components/templates/auth/EmailForgotPassword.tsx
@@ -15,8 +15,10 @@ const ForgotPasswordForm = (): JSX.Element => {
 
   return (
     <VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
-      <SpanBox css={{ width: '100%' }}>
-        <FormLabel>Email</FormLabel>
+      <VStack css={{ width: '100%', gap: '5px' }}>
+        <FormLabel className="required" css={{ color: '#D9D9D9' }}>
+          Email
+        </FormLabel>
         <BorderedFormInput
           key="email"
           type="email"
@@ -24,13 +26,13 @@ const ForgotPasswordForm = (): JSX.Element => {
           value={email}
           placeholder="Email"
           autoFocus={true}
-          css={{ bg: 'white', color: 'black' }}
+          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={(e) => {
             e.preventDefault()
             setEmail(e.target.value)
           }}
         />
-      </SpanBox>
+      </VStack>
     </VStack>
   )
 }
@@ -58,16 +60,16 @@ export function EmailForgotPassword(): JSX.Element {
         alignment="center"
         css={{
           padding: '16px',
-          background: 'white',
           minWidth: '340px',
           width: '70vw',
           maxWidth: '576px',
           borderRadius: '8px',
-          border: '1px solid #3D3D3D',
-          boxShadow: '#B1B1B1 9px 9px 9px -9px',
+          background: '#343434',
+          border: '1px solid #6A6968',
+          boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
         }}
       >
-        <StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
+        <StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
           Reset your password
         </StyledText>
 
@@ -93,7 +95,7 @@ export function EmailForgotPassword(): JSX.Element {
         )}
 
         {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
-        <Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
+        <Button type="submit" style="ctaBlue" css={{ my: '20px' }}>
           Reset Password
         </Button>
         <Button
@@ -112,7 +114,7 @@ export function EmailForgotPassword(): JSX.Element {
         >
           <StyledText
             css={{
-              color: '$omnivoreRed',
+              color: '$omnivoreLightGray',
               textDecoration: 'underline',
               cursor: 'pointer',
             }}
diff --git a/packages/web/components/templates/auth/EmailLogin.tsx b/packages/web/components/templates/auth/EmailLogin.tsx
index f77da16c2..67cd5d3c9 100644
--- a/packages/web/components/templates/auth/EmailLogin.tsx
+++ b/packages/web/components/templates/auth/EmailLogin.tsx
@@ -1,4 +1,4 @@
-import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { HStack, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText, StyledTextSpan } from '../../elements/StyledText'
 import { useEffect, useRef, useState } from 'react'
@@ -17,7 +17,7 @@ const LoginForm = (): JSX.Element => {
 
   return (
     <VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
-      <SpanBox css={{ width: '100%' }}>
+      <VStack css={{ width: '100%', gap: '5px' }}>
         <FormLabel css={{ color: '#D9D9D9' }}>Email</FormLabel>
         <BorderedFormInput
           autoFocus={true}
@@ -32,9 +32,9 @@ const LoginForm = (): JSX.Element => {
             setEmail(e.target.value)
           }}
         />
-      </SpanBox>
+      </VStack>
 
-      <SpanBox css={{ width: '100%' }}>
+      <VStack css={{ width: '100%', gap: '5px' }}>
         <FormLabel css={{ color: '#D9D9D9' }}>Password</FormLabel>
         <BorderedFormInput
           key="password"
@@ -45,7 +45,7 @@ const LoginForm = (): JSX.Element => {
           css={{ bg: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={(e) => setPassword(e.target.value)}
         />
-      </SpanBox>
+      </VStack>
     </VStack>
   )
 }
@@ -119,7 +119,6 @@ export function EmailLogin(): JSX.Element {
         >
           <Button
             style={'cancelAuth'}
-            css={{}}
             type="button"
             onClick={async (event) => {
               window.localStorage.removeItem('authVerified')
diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index 92a4527c6..678a41054 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -39,7 +39,9 @@ const SignUpForm = (): JSX.Element => {
   return (
     <VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
       <SpanBox css={{ width: '100%' }}>
-        <FormLabel className="required">Email</FormLabel>
+        <FormLabel className="required" css={{ color: '#D9D9D9' }}>
+          Email
+        </FormLabel>
         <BorderedFormInput
           autoFocus={true}
           key="email"
@@ -47,7 +49,7 @@ const SignUpForm = (): JSX.Element => {
           name="email"
           defaultValue={email}
           placeholder="Email"
-          css={{ backgroundColor: 'white', color: 'black' }}
+          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={(e) => {
             e.preventDefault()
             setEmail(e.target.value)
@@ -56,40 +58,46 @@ const SignUpForm = (): JSX.Element => {
         />
       </SpanBox>
       <SpanBox css={{ width: '100%' }}>
-        <FormLabel className="required">Password</FormLabel>
+        <FormLabel className="required" css={{ color: '#D9D9D9' }}>
+          Password
+        </FormLabel>
         <BorderedFormInput
           key="password"
           type="password"
           name="password"
           defaultValue={password}
           placeholder="Password"
-          css={{ bg: 'white', color: 'black' }}
+          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={(e) => setPassword(e.target.value)}
           required
         />
       </SpanBox>
       <SpanBox css={{ width: '100%' }}>
-        <FormLabel className="required">Full Name</FormLabel>
+        <FormLabel className="required" css={{ color: '#D9D9D9' }}>
+          Full Name
+        </FormLabel>
         <BorderedFormInput
           key="fullname"
           type="text"
           name="name"
           defaultValue={fullname}
           placeholder="Full Name"
-          css={{ bg: 'white', color: 'black' }}
+          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={(e) => setFullname(e.target.value)}
           required
         />
       </SpanBox>
       <SpanBox css={{ width: '100%' }}>
-        <FormLabel className="required">Username</FormLabel>
+        <FormLabel className="required" css={{ color: '#D9D9D9' }}>
+          Username
+        </FormLabel>
         <BorderedFormInput
           key="username"
           type="text"
           name="username"
           defaultValue={username}
           placeholder="Username"
-          css={{ bg: 'white', color: 'black' }}
+          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
           onChange={handleUsernameChange}
           required
         />
@@ -145,16 +153,16 @@ export function EmailSignup(): JSX.Element {
           alignment="center"
           css={{
             padding: '16px',
-            background: 'white',
             minWidth: '340px',
             width: '70vw',
             maxWidth: '576px',
             borderRadius: '8px',
-            border: '1px solid #3D3D3D',
-            boxShadow: '#B1B1B1 9px 9px 9px -9px',
+            background: '#343434',
+            border: '1px solid #6A6968',
+            boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
           }}
         >
-          <StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
+          <StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
             Sign Up
           </StyledText>
 
@@ -204,11 +212,7 @@ export function EmailSignup(): JSX.Element {
             }}
           >
             <Button
-              style={'ctaOutlineYellow'}
-              css={{
-                color: '$omnivoreGray',
-                borderColor: 'rgba(0, 0, 0, 0.06)',
-              }}
+              style="cancelAuth"
               type="button"
               onClick={async () => {
                 window.localStorage.removeItem('authVerified')
@@ -223,7 +227,13 @@ export function EmailSignup(): JSX.Element {
             >
               Cancel
             </Button>
-            <Button type="submit" style={'ctaDarkYellow'}>
+            <Button
+              type="submit"
+              style="ctaBlue"
+              css={{
+                padding: '10px 50px',
+              }}
+            >
               Sign Up
             </Button>
           </HStack>
@@ -238,10 +248,7 @@ export function EmailSignup(): JSX.Element {
           >
             Already have an account?{' '}
             <Link href="/auth/email-login" passHref legacyBehavior>
-              <StyledTextSpan
-                style="actionLink"
-                css={{ color: '$omnivoreGray' }}
-              >
+              <StyledTextSpan style="actionLink" css={{ color: '$ctaBlue' }}>
                 Login instead
               </StyledTextSpan>
             </Link>
diff --git a/packages/web/components/templates/auth/ResetSent.tsx b/packages/web/components/templates/auth/ResetSent.tsx
index 3f0f2776a..77ce76845 100644
--- a/packages/web/components/templates/auth/ResetSent.tsx
+++ b/packages/web/components/templates/auth/ResetSent.tsx
@@ -9,7 +9,8 @@ export function ResetSent(): JSX.Element {
         css={{
           width: '100vw',
           height: '100vh',
-          bg: '$omnivoreYellow',
+          color: '#898989',
+          background: '#2A2A2A',
           overflowY: 'clip',
         }}
       >
@@ -17,11 +18,11 @@ export function ResetSent(): JSX.Element {
           css={{
             width: '100%',
             margin: '40px',
-            color: '$omnivoreGray',
+            color: '#898989',
             '@xl': { margin: '138px' },
           }}
         >
-          <h1>Reset email sent</h1>
+          <h1 style={{ color: 'white' }}>Reset email sent</h1>
           <Box>
             If there is an account associated with the email specified we sent a
             password reset link. Click the link to reset your password. You may
diff --git a/packages/web/components/templates/auth/VerifyEmail.tsx b/packages/web/components/templates/auth/VerifyEmail.tsx
index 7eedf9b60..32b5a2441 100644
--- a/packages/web/components/templates/auth/VerifyEmail.tsx
+++ b/packages/web/components/templates/auth/VerifyEmail.tsx
@@ -9,7 +9,8 @@ export function VerifyEmail(): JSX.Element {
         css={{
           width: '100vw',
           height: '100vh',
-          bg: '$omnivoreYellow',
+          color: '#898989',
+          background: '#2A2A2A',
           overflowY: 'clip',
         }}
       >
@@ -17,12 +18,11 @@ export function VerifyEmail(): JSX.Element {
           css={{
             width: '100%',
             margin: '40px',
-            color: '$omnivoreGray',
             '@xl': { margin: '138px' },
           }}
         >
-          <h1>Verify your email address</h1>
-          <Box>
+          <h1 style={{ color: 'white' }}>Verify your email address</h1>
+          <Box css={{ color: '#898989' }}>
             We sent a verification link to the email you provided. Click the
             link to verify your email. You may need to check your spam folder.
           </Box>
diff --git a/packages/web/pages/login.tsx b/packages/web/pages/login.tsx
index 39462772e..78c957f86 100644
--- a/packages/web/pages/login.tsx
+++ b/packages/web/pages/login.tsx
@@ -1,5 +1,4 @@
 import { useRouter } from 'next/router'
-import Script from 'next/script'
 import { useState, useEffect } from 'react'
 import { LoginLayout } from './../components/templates/LoginLayout'
 import { parseErrorCodes } from '../lib/queryParamParser'