diff --git a/packages/harmony/src/components/button/BaseButton/BaseButton.tsx b/packages/harmony/src/components/button/BaseButton/BaseButton.tsx
index 2920c1e8b15..153089ef006 100644
--- a/packages/harmony/src/components/button/BaseButton/BaseButton.tsx
+++ b/packages/harmony/src/components/button/BaseButton/BaseButton.tsx
@@ -17,6 +17,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
     const {
       iconLeft: LeftIconComponent,
       iconRight: RightIconComponent,
+      isStaticIcon,
       disabled,
       isLoading,
       widthToHideText,
@@ -93,7 +94,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
       })
     }
 
-    const iconCss = {
+    const iconCss = !isStaticIcon && {
       '& path': {
         fill: 'currentcolor'
       }
diff --git a/packages/harmony/src/components/button/types.ts b/packages/harmony/src/components/button/types.ts
index 5df50083544..e815dec629b 100644
--- a/packages/harmony/src/components/button/types.ts
+++ b/packages/harmony/src/components/button/types.ts
@@ -53,6 +53,10 @@ export type BaseButtonProps = {
    */
   iconRight?: IconComponent
 
+  /**
+   * When true, do not override icon's fill colors
+   */
+  isStaticIcon?: boolean
   /**
    * Show a spinning loading state instead of the left icon
    */
diff --git a/packages/harmony/src/components/text-link/TextLink.stories.tsx b/packages/harmony/src/components/text-link/TextLink.stories.tsx
index ab73af9db4d..7a13a08d00a 100644
--- a/packages/harmony/src/components/text-link/TextLink.stories.tsx
+++ b/packages/harmony/src/components/text-link/TextLink.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta<typeof TextLink> = {
   render: (props) => (
     <Flex direction='row' gap='4xl'>
       <TextLink {...props} />
-      <TextLink {...props} _isHovered />
+      <TextLink {...props} showUnderline />
     </Flex>
   )
 }
diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/packages/harmony/src/components/text-link/TextLink.tsx
index e3077379b47..64959e99ae0 100644
--- a/packages/harmony/src/components/text-link/TextLink.tsx
+++ b/packages/harmony/src/components/text-link/TextLink.tsx
@@ -10,13 +10,13 @@ import type { TextLinkProps } from './types'
  */
 export const TextLink = (props: TextLinkProps) => {
   const {
-    _isHovered = false,
     asChild = false,
     children,
     variant = 'default',
     isExternal = false,
     onClick,
     textVariant,
+    showUnderline,
     ...other
   } = props
 
@@ -48,7 +48,7 @@ export const TextLink = (props: TextLinkProps) => {
         color: variantColors[variant],
         textDecoration: 'none',
         ':hover': hoverStyles,
-        ...(_isHovered && hoverStyles)
+        ...(showUnderline && hoverStyles)
       }}
       variant={textVariant}
       {...other}
diff --git a/packages/harmony/src/components/text-link/types.ts b/packages/harmony/src/components/text-link/types.ts
index 86845e74e55..b7917581a11 100644
--- a/packages/harmony/src/components/text-link/types.ts
+++ b/packages/harmony/src/components/text-link/types.ts
@@ -28,10 +28,10 @@ export type TextLinkProps = TextLinkTextProps &
     textVariant?: TextProps['variant']
 
     /**
-     * If true, prevent the click event from being propagated to other elements.
-     * @default true
+     * When true, always show the link underline. This can help emphasize that
+     * a text-link is present when next to other text.
      */
-    stopPropagation?: boolean
+    showUnderline?: boolean
 
     /**
      * Mark as true if the link destination is outside of the app. Causes the
@@ -39,11 +39,4 @@ export type TextLinkProps = TextLinkTextProps &
      * @default false
      */
     isExternal?: boolean
-
-    // Internal props
-
-    /**
-     * @ignore: This prop is for internal use only
-     */
-    _isHovered?: boolean
   }
diff --git a/packages/harmony/src/icons/Logos.stories.mdx b/packages/harmony/src/icons/Logos.stories.mdx
index 3e06534fcc7..1e6cb0eaa14 100644
--- a/packages/harmony/src/icons/Logos.stories.mdx
+++ b/packages/harmony/src/icons/Logos.stories.mdx
@@ -11,6 +11,7 @@ import {
   IconLogoLinkByStripe,
   IconDiscord,
   IconFacebook,
+  IconMetamask,
   IconSnapChat,
   IconTelegram,
   IconTwitter,
@@ -67,6 +68,7 @@ Logos are used as a visual representation of our brand and other businesses we p
   <IconTelegram />
   <IconSnapChat />
   <IconTikTok />
+  <IconMetamask />
 </Flex>
 
 <Divider />
diff --git a/packages/harmony/src/icons/logos.ts b/packages/harmony/src/icons/logos.ts
index bf474389470..a088b9ea8a0 100644
--- a/packages/harmony/src/icons/logos.ts
+++ b/packages/harmony/src/icons/logos.ts
@@ -7,6 +7,7 @@ export { default as IconLogoCoinbase } from '../assets/icons/Coinbase.svg'
 export { default as IconLogoLinkByStripe } from '../assets/icons/LinkByStripe.svg'
 export { default as IconDiscord } from '../assets/icons/Discord.svg'
 export { default as IconFacebook } from '../assets/icons/Facebook.svg'
+export { default as IconMetamask } from '../assets/icons/Metamask.svg'
 export { default as IconSnapChat } from '../assets/icons/SnapChat.svg'
 export { default as IconTelegram } from '../assets/icons/Telegram.svg'
 export { default as IconTwitter } from '../assets/icons/Twitter.svg'
diff --git a/packages/web/src/app/App.tsx b/packages/web/src/app/App.tsx
index 510ab434b5e..9595b036275 100644
--- a/packages/web/src/app/App.tsx
+++ b/packages/web/src/app/App.tsx
@@ -19,8 +19,7 @@ import WebPlayer from './web-player/WebPlayer'
 import '../services/webVitals'
 
 const SignOn = lazy(() => import('pages/sign-on/SignOn'))
-const SignInPage = lazy(() => import('pages/sign-in-page'))
-const SignUpPage = lazy(() => import('pages/sign-up-page'))
+const SignOnPage = lazy(() => import('pages/sign-on-page'))
 
 export const AppInner = () => {
   const { isEnabled: isSignInRedesignEnabled } = useFlag(
@@ -31,11 +30,8 @@ export const AppInner = () => {
     <>
       <SomethingWrong />
       <Switch>
-        <Route path={SIGN_IN_PAGE}>
-          {isSignInRedesignEnabled ? <SignInPage /> : <SignOn signIn />}
-        </Route>
-        <Route path={SIGN_UP_PAGE}>
-          {isSignInRedesignEnabled ? <SignUpPage /> : <SignOn signIn={false} />}
+        <Route path={[SIGN_IN_PAGE, SIGN_UP_PAGE]}>
+          {isSignInRedesignEnabled ? <SignOnPage /> : <SignOn signIn />}
         </Route>
         <Route exact path='/oauth/auth'>
           <OAuthLoginPage />
diff --git a/packages/web/src/assets/img/DJportrait.jpg b/packages/web/src/assets/img/DJportrait.jpg
new file mode 100644
index 00000000000..185be27e0b6
Binary files /dev/null and b/packages/web/src/assets/img/DJportrait.jpg differ
diff --git a/packages/web/src/components/background-animations/BackgroundWaves.jsx b/packages/web/src/components/background-animations/BackgroundWaves.jsx
index 84e784e5aa9..e92f245d939 100644
--- a/packages/web/src/components/background-animations/BackgroundWaves.jsx
+++ b/packages/web/src/components/background-animations/BackgroundWaves.jsx
@@ -104,7 +104,7 @@ const BackgroundWaves = (props) => {
     <div
       ref={canvasRef}
       className={cn({ [props.className]: !!props.className })}
-      style={{
+      css={{
         position: 'fixed',
         top: 0,
         left: 0,
diff --git a/packages/web/src/components/preload-image/PreloadImage.tsx b/packages/web/src/components/preload-image/PreloadImage.tsx
index 13fee52b669..f9d90de631f 100644
--- a/packages/web/src/components/preload-image/PreloadImage.tsx
+++ b/packages/web/src/components/preload-image/PreloadImage.tsx
@@ -18,7 +18,7 @@ const PreloadImage = ({
   alt?: string
   asBackground?: boolean
   preloaded?: boolean
-  className: string
+  className?: string
 }) => {
   const [isLoaded, setIsLoaded] = useState(preloaded)
   useEffect(() => {
diff --git a/packages/web/src/pages/sign-in-page/SignInPage.module.css b/packages/web/src/pages/sign-in-page/SignInPage.module.css
deleted file mode 100644
index 0292f0fa773..00000000000
--- a/packages/web/src/pages/sign-in-page/SignInPage.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.logo {
-  max-height: 160px;
-  max-width: 160px;
-  height: 100%;
-  width: 100%;
-  object-fit: contain;
-}
diff --git a/packages/web/src/pages/sign-in-page/SignInPage.tsx b/packages/web/src/pages/sign-in-page/SignInPage.tsx
index 4c2f8a10947..a10d77557aa 100644
--- a/packages/web/src/pages/sign-in-page/SignInPage.tsx
+++ b/packages/web/src/pages/sign-in-page/SignInPage.tsx
@@ -1,23 +1,41 @@
 import { useCallback } from 'react'
 
-import { Box, IconCloseAlt, useTheme } from '@audius/harmony'
-import { Formik } from 'formik'
+import {
+  Flex,
+  Text,
+  IconAudiusLogoHorizontalColor,
+  Button,
+  IconArrowRight,
+  TextLink,
+  ButtonType,
+  Box
+} from '@audius/harmony'
+import { Form, Formik } from 'formik'
+import { Helmet } from 'react-helmet'
 import { useDispatch } from 'react-redux'
-import { Link, useHistory } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
+import audiusLogoColored from 'assets/img/audiusLogoColored.png'
 import { signIn } from 'common/store/pages/signon/actions'
-import BackgroundWaves from 'components/background-animations/BackgroundWaves'
-import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
-import Page from 'components/page/Page'
+import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordField'
+import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
+import PreloadImage from 'components/preload-image/PreloadImage'
 import { useMedia } from 'hooks/useMedia'
-import { BASE_URL, SIGN_IN_PAGE, TRENDING_PAGE } from 'utils/route'
+import { SIGN_UP_PAGE } from 'utils/route'
 
-import { SignInPageDesktop } from './SignInPageDesktop'
-import { SignInPageMobile } from './SignInPageMobile'
+import { SignInWithMetaMaskButton } from './SignInWithMetaMaskButton'
 
 const messages = {
-  title: 'Sign In',
-  description: 'Sign into your Audius account'
+  metaTitle: 'Sign In • Audius',
+  metaDescription: 'Sign into your Audius account',
+
+  title: 'Sign Into Audius',
+  emailLabel: 'Email',
+  passwordLabel: 'Password',
+  signIn: 'Sign In',
+  newToAudius: 'New to Audius?',
+  createAccount: 'Create an Account',
+  forgotPassword: 'Forgot password?'
 }
 
 type SignInValues = {
@@ -32,7 +50,7 @@ const initialValues = {
 
 export const SignInPage = () => {
   const dispatch = useDispatch()
-  const history = useHistory()
+  const { isMobile } = useMedia()
 
   const handleSubmit = useCallback(
     (values: SignInValues) => {
@@ -42,41 +60,76 @@ export const SignInPage = () => {
     [dispatch]
   )
 
-  const { isMobile } = useMedia()
-  const { spacing } = useTheme()
-
-  const pageProps = {
-    title: messages.title,
-    description: messages.description,
-    canonicalUrl: `${BASE_URL}/${SIGN_IN_PAGE}`
-  }
-
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      {isMobile ? (
-        <MobilePageContainer {...pageProps} fullHeight>
-          <SignInPageMobile />
-        </MobilePageContainer>
-      ) : (
-        <Page>
-          <BackgroundWaves />
-          <Link to={TRENDING_PAGE}>
-            <IconCloseAlt
-              color='staticWhite'
-              css={{
-                position: 'absolute',
-                left: spacing['2xl'],
-                top: spacing['2xl'],
-                zIndex: 1
-              }}
-              onClick={history.goBack}
-            />
-          </Link>
-          <Box css={{ zIndex: 1 }}>
-            <SignInPageDesktop />
-          </Box>
-        </Page>
-      )}
-    </Formik>
+    <>
+      <Helmet>
+        <title>{messages.metaTitle}</title>
+        <meta name='description' content={messages.metaDescription} />
+      </Helmet>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <Flex
+          flex={1}
+          direction='column'
+          justifyContent='space-between'
+          h='100%'
+          p='2xl'
+          pb={!isMobile ? 'unit14' : undefined}
+        >
+          <Flex as={Form} direction='column' gap='2xl'>
+            <Box alignSelf='center'>
+              {isMobile ? (
+                <IconAudiusLogoHorizontalColor />
+              ) : (
+                <PreloadImage
+                  src={audiusLogoColored}
+                  alt='Audius Logo'
+                  css={{
+                    maxHeight: '160px',
+                    maxWidth: '160px',
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'contain'
+                  }}
+                />
+              )}
+            </Box>
+            <Text
+              variant='heading'
+              size='l'
+              tag='h1'
+              color='accent'
+              css={{ textAlign: isMobile ? 'center' : undefined }}
+            >
+              {messages.title}
+            </Text>
+            <Flex direction='column' gap='l'>
+              <HarmonyTextField name='email' label={messages.emailLabel} />
+              <HarmonyPasswordField
+                name='password'
+                label={messages.passwordLabel}
+              />
+            </Flex>
+            <Flex direction='column' gap='l' w='100%'>
+              <Button iconRight={IconArrowRight} type='submit'>
+                {messages.signIn}
+              </Button>
+              {!isMobile ? <SignInWithMetaMaskButton /> : null}
+              <TextLink
+                variant='visible'
+                textVariant='body'
+                css={{ textAlign: isMobile ? 'center' : undefined }}
+              >
+                {messages.forgotPassword}
+              </TextLink>
+            </Flex>
+          </Flex>
+          {!isMobile ? (
+            <Button variant={ButtonType.SECONDARY} asChild>
+              <Link to={SIGN_UP_PAGE}>{messages.createAccount}</Link>
+            </Button>
+          ) : null}
+        </Flex>
+      </Formik>
+    </>
   )
 }
diff --git a/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx b/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx
deleted file mode 100644
index 9eede2b9458..00000000000
--- a/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import {
-  Box,
-  Button,
-  ButtonType,
-  Flex,
-  IconArrowRight,
-  Text,
-  TextLink
-} from '@audius/harmony'
-import { Form } from 'formik'
-import { Link } from 'react-router-dom'
-
-import audiusLogoColored from 'assets/img/audiusLogoColored.png'
-import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordField'
-import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
-import PreloadImage from 'components/preload-image/PreloadImage'
-import {
-  ArtworkContainer,
-  AudiusValues
-} from 'pages/sign-on/components/AudiusValues'
-import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer'
-import { SignOnContainerDesktop } from 'pages/sign-on/components/desktop/SignOnContainerDesktop'
-import { userHasMetaMask } from 'pages/sign-up-page/utils/metamask'
-import { SIGN_UP_PAGE } from 'utils/route'
-
-import styles from './SignInPage.module.css'
-import { SignInWithMetaMaskButton } from './SignInWithMetaMaskButton'
-
-const messages = {
-  title: 'Sign Into Audius',
-  emailLabel: 'Email',
-  passwordLabel: 'Password',
-  signIn: 'Sign In',
-  createAccount: 'Create An Account',
-  forgotPassword: 'Forgot password?'
-}
-
-export const SignInPageDesktop = () => {
-  return (
-    <SignOnContainerDesktop>
-      <LeftContentContainer gap='2xl' justifyContent='space-between'>
-        <Flex direction='column' gap='2xl' alignItems='center'>
-          <PreloadImage
-            src={audiusLogoColored}
-            className={styles.logo}
-            alt='Audius Colored Logo'
-          />
-          <Flex w='100%' direction='row' justifyContent='flex-start'>
-            <Text variant='heading' size='l' tag='h1' color='accent'>
-              {messages.title}
-            </Text>
-          </Flex>
-          <Box w='100%'>
-            <Form>
-              <Flex direction='column' gap='2xl' w='100%'>
-                <Flex direction='column' gap='l'>
-                  <HarmonyTextField name='email' label={messages.emailLabel} />
-                  <HarmonyPasswordField
-                    name='password'
-                    label={messages.passwordLabel}
-                  />
-                </Flex>
-                <Flex direction='column' gap='l'>
-                  <Flex direction='column' w='100%'>
-                    <Button iconRight={IconArrowRight} type='submit'>
-                      {messages.signIn}
-                    </Button>
-                    {userHasMetaMask ? <SignInWithMetaMaskButton /> : null}
-                  </Flex>
-                  <TextLink variant='visible' textVariant='body'>
-                    {messages.forgotPassword}
-                  </TextLink>
-                </Flex>
-              </Flex>
-            </Form>
-          </Box>
-        </Flex>
-        <Button variant={ButtonType.SECONDARY} asChild>
-          <Link to={SIGN_UP_PAGE}>{messages.createAccount}</Link>
-        </Button>
-      </LeftContentContainer>
-      <ArtworkContainer>
-        <AudiusValues />
-      </ArtworkContainer>
-    </SignOnContainerDesktop>
-  )
-}
diff --git a/packages/web/src/pages/sign-in-page/SignInPageMobile.module.css b/packages/web/src/pages/sign-in-page/SignInPageMobile.module.css
deleted file mode 100644
index 79c44f08608..00000000000
--- a/packages/web/src/pages/sign-in-page/SignInPageMobile.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.root {
-  z-index: 1;
-  background: radial-gradient(
-      77.16% 77.16% at 50% 51.81%,
-      rgba(91, 35, 225, 0.8) 0%,
-      rgba(113, 41, 230, 0.64) 67.96%,
-      rgba(162, 47, 235, 0.5) 100%
-    ),
-    url('../../assets/img/2-DJ-4-3.jpg'), lightgray 50% / cover no-repeat;
-  background-position-y: bottom;
-  background-position-x: -110px;
-  background-size: 150%;
-}
-
-.content {
-  background-color: var(--harmony-bg-white);
-  border-bottom-left-radius: var(--harmony-border-radius-2xl);
-  border-bottom-right-radius: var(--harmony-border-radius-2xl);
-}
diff --git a/packages/web/src/pages/sign-in-page/SignInPageMobile.tsx b/packages/web/src/pages/sign-in-page/SignInPageMobile.tsx
deleted file mode 100644
index 43b18edc98a..00000000000
--- a/packages/web/src/pages/sign-in-page/SignInPageMobile.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import {
-  Box,
-  Button,
-  Flex,
-  IconArrowRight,
-  IconAudiusLogoHorizontalColor,
-  Text,
-  TextLink
-} from '@audius/harmony'
-import { Form } from 'formik'
-import { Link } from 'react-router-dom'
-
-import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordField'
-import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
-import { ArtworkContainer } from 'pages/sign-on/components/AudiusValues'
-import { SignOnContainerMobile } from 'pages/sign-on/components/mobile/SignOnContainerMobile'
-import { SIGN_UP_PAGE } from 'utils/route'
-
-import styles from './SignInPageMobile.module.css'
-
-const messages = {
-  title: 'Sign Into Audius',
-  emailLabel: 'Email',
-  passwordLabel: 'Password',
-  signIn: 'Sign In',
-  newToAudius: 'New to Audius?',
-  createAccount: 'Create an Account',
-  forgotPassword: 'Forgot password?'
-}
-
-export const SignInPageMobile = () => {
-  return (
-    <SignOnContainerMobile>
-      <ArtworkContainer justifyContent='space-between'>
-        <Flex
-          className={styles.content}
-          w='100%'
-          pv='2xl'
-          ph='l'
-          direction='column'
-          gap='2xl'
-          justifyContent='space-between'
-        >
-          <Flex direction='column' gap='2xl' alignItems='center'>
-            <IconAudiusLogoHorizontalColor />
-            <Text variant='heading' size='l' tag='h1' color='accent'>
-              {messages.title}
-            </Text>
-            <Box w='100%'>
-              <Form>
-                <Flex direction='column' gap='2xl' w='100%'>
-                  <Flex direction='column' gap='l'>
-                    <HarmonyTextField
-                      name='email'
-                      label={messages.emailLabel}
-                    />
-                    <HarmonyPasswordField
-                      name='password'
-                      label={messages.passwordLabel}
-                    />
-                  </Flex>
-                  <Flex direction='column' gap='l' alignItems='center'>
-                    <Button iconRight={IconArrowRight} type='submit' fullWidth>
-                      {messages.signIn}
-                    </Button>
-                    <TextLink variant='visible' textVariant='body'>
-                      {messages.forgotPassword}
-                    </TextLink>
-                  </Flex>
-                </Flex>
-              </Form>
-            </Box>
-          </Flex>
-        </Flex>
-        <Flex
-          className={styles.createAccountRow}
-          direction='row'
-          w='100%'
-          justifyContent='center'
-          gap='xs'
-          mb='4xl'
-        >
-          <Text variant='title' strength='weak' color='staticWhite'>
-            {messages.newToAudius}{' '}
-            <TextLink variant='inverted' asChild>
-              <Link to={SIGN_UP_PAGE}>{messages.createAccount}</Link>
-            </TextLink>
-          </Text>
-        </Flex>
-      </ArtworkContainer>
-    </SignOnContainerMobile>
-  )
-}
diff --git a/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx b/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx
index b068a8a475d..5233b7af829 100644
--- a/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx
+++ b/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx
@@ -1,11 +1,19 @@
+import { useCallback } from 'react'
+
+import { Button, ButtonType, IconMetamask } from '@audius/harmony'
+
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
-import { MetaMaskOption } from 'pages/sign-on/components/desktop/MetaMaskOption'
+import { userHasMetaMask } from 'pages/sign-up-page/utils/metamask'
 import { FEED_PAGE } from 'utils/route'
 
+const messages = {
+  signIn: 'Sign In With MetaMask'
+}
+
 export const SignInWithMetaMaskButton = () => {
   const navigate = useNavigateToPage()
 
-  const handleSignInWithMetaMask = async () => {
+  const handleClick = useCallback(async () => {
     try {
       window.localStorage.setItem('useMetaMask', JSON.stringify(true))
     } catch (err) {
@@ -13,9 +21,18 @@ export const SignInWithMetaMaskButton = () => {
     }
     navigate(FEED_PAGE)
     window.location.reload()
-  }
+  }, [navigate])
+
+  if (!userHasMetaMask) return null
 
   return (
-    <MetaMaskOption text='Sign In With' onClick={handleSignInWithMetaMask} />
+    <Button
+      variant={ButtonType.SECONDARY}
+      iconRight={IconMetamask}
+      isStaticIcon
+      onClick={handleClick}
+    >
+      {messages.signIn}
+    </Button>
   )
 }
diff --git a/packages/web/src/pages/sign-in-page/index.ts b/packages/web/src/pages/sign-in-page/index.ts
index d31765bf815..1b9a10f9fcf 100644
--- a/packages/web/src/pages/sign-in-page/index.ts
+++ b/packages/web/src/pages/sign-in-page/index.ts
@@ -1 +1 @@
-export { SignInPage as default } from './SignInPage'
+export { SignInPage } from './SignInPage'
diff --git a/packages/web/src/pages/sign-on/components/AudiusValues.module.css b/packages/web/src/pages/sign-on-page/AudiusValues.module.css
similarity index 100%
rename from packages/web/src/pages/sign-on/components/AudiusValues.module.css
rename to packages/web/src/pages/sign-on-page/AudiusValues.module.css
diff --git a/packages/web/src/pages/sign-on/components/AudiusValues.tsx b/packages/web/src/pages/sign-on-page/AudiusValues.tsx
similarity index 90%
rename from packages/web/src/pages/sign-on/components/AudiusValues.tsx
rename to packages/web/src/pages/sign-on-page/AudiusValues.tsx
index ae4dd0eed95..78e43688689 100644
--- a/packages/web/src/pages/sign-on/components/AudiusValues.tsx
+++ b/packages/web/src/pages/sign-on-page/AudiusValues.tsx
@@ -69,10 +69,20 @@ const AudiusValue = (props: AudiusValueProps) => {
 /**
  * Renders all the audius values
  */
-export const AudiusValues = () => {
+
+type AudiusValuesProps = {
+  className?: string
+}
+
+export const AudiusValues = (props: AudiusValuesProps) => {
   const { isDesktop } = useMedia()
   return (
-    <Flex direction='column' gap={isDesktop ? 'xl' : 'l'} alignItems='center'>
+    <Flex
+      direction='column'
+      gap={isDesktop ? 'xl' : 'l'}
+      alignItems='center'
+      {...props}
+    >
       {isDesktop ? (
         <Box pb='l'>
           <Text
diff --git a/packages/web/src/pages/sign-on-page/SignOnPage.tsx b/packages/web/src/pages/sign-on-page/SignOnPage.tsx
new file mode 100644
index 00000000000..bc09fbb1354
--- /dev/null
+++ b/packages/web/src/pages/sign-on-page/SignOnPage.tsx
@@ -0,0 +1,161 @@
+import { useEffect } from 'react'
+
+import {
+  Box,
+  Flex,
+  IconCloseAlt,
+  Paper,
+  Text,
+  TextLink,
+  useTheme
+} from '@audius/harmony'
+import { Link, Route, Switch } from 'react-router-dom'
+import { useToggle } from 'react-use'
+
+import djBackground from 'assets/img/2-DJ-4-3.jpg'
+import djPortrait from 'assets/img/DJportrait.jpg'
+import BackgroundWaves from 'components/background-animations/BackgroundWaves'
+import { useMedia } from 'hooks/useMedia'
+import { SignInPage } from 'pages/sign-in-page/SignInPage'
+import { AudiusValues } from 'pages/sign-on-page/AudiusValues'
+import SignUpPage from 'pages/sign-up-page'
+import { SIGN_IN_PAGE, SIGN_UP_PAGE, TRENDING_PAGE } from 'utils/route'
+
+const messages = {
+  newToAudius: 'New to Audius?',
+  createAccount: 'Create an Account'
+}
+
+export const SignOnPage = () => {
+  const { isMobile } = useMedia()
+  const [isExpanded] = useToggle(false)
+  const [isLoaded, setIsLoaded] = useToggle(false)
+  const { spacing, motion } = useTheme()
+
+  useEffect(() => {
+    setIsLoaded(true)
+  }, [setIsLoaded])
+
+  const routes = (
+    <Switch>
+      <Route path={SIGN_IN_PAGE}>
+        <SignInPage />
+      </Route>
+      <Route path={SIGN_UP_PAGE}>
+        <SignUpPage />
+      </Route>
+    </Switch>
+  )
+
+  if (isMobile) {
+    return (
+      <Flex direction='column' w='100%'>
+        <Flex
+          borderBottomLeftRadius={!isExpanded ? '2xl' : undefined}
+          borderBottomRightRadius={!isExpanded ? '2xl' : undefined}
+          css={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            backgroundColor: 'white',
+            zIndex: 1,
+            transition: `${motion.calm} 0.5s`,
+            transform: isLoaded ? 'translateY(0px)' : 'translateY(-100%)'
+          }}
+        >
+          <Link
+            to={TRENDING_PAGE}
+            css={{ position: 'absolute', left: spacing.l, top: spacing.l }}
+          >
+            <IconCloseAlt color='default' />
+          </Link>
+          {routes}
+        </Flex>
+        <Flex
+          direction='column'
+          alignItems='center'
+          pb='2xl'
+          css={{
+            paddingTop: 520,
+            flexGrow: 1,
+            backgroundImage: `radial-gradient(77.16% 77.16% at 50% 51.81%, rgba(91, 35, 225, 0.80) 0%, rgba(113, 41, 230, 0.64) 67.96%, rgba(162, 47, 235, 0.50) 100%), url(${djPortrait})`,
+            backgroundColor: 'lightgray',
+            backgroundSize: 'cover',
+            backgroundPosition: 'bottom'
+          }}
+        >
+          <Switch>
+            <Route path={SIGN_UP_PAGE}>
+              <AudiusValues css={{ margin: 'auto' }} />
+            </Route>
+            <Route path={SIGN_IN_PAGE}>
+              <Text
+                variant='title'
+                strength='weak'
+                color='staticWhite'
+                css={{
+                  marginTop: 'auto',
+                  opacity: isLoaded ? 1 : 0,
+                  transition: `opacity ${motion.expressive} 1s`
+                }}
+              >
+                {messages.newToAudius}{' '}
+                <TextLink variant='inverted' showUnderline asChild>
+                  <Link to={SIGN_UP_PAGE}>{messages.createAccount}</Link>
+                </TextLink>
+              </Text>
+            </Route>
+          </Switch>
+        </Flex>
+      </Flex>
+    )
+  }
+
+  return (
+    <Flex w='100%' p='unit20'>
+      <Link
+        to={TRENDING_PAGE}
+        css={{
+          zIndex: 1,
+          position: 'absolute',
+          left: spacing['2xl'],
+          top: spacing['2xl']
+        }}
+      >
+        <IconCloseAlt color='staticWhite' />
+      </Link>
+      <BackgroundWaves zIndex={0} />
+      <Paper w='100%'>
+        <Box
+          w={isExpanded ? '100%' : 480}
+          h='100%'
+          css={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            background: 'white',
+            zIndex: 1,
+            transition: `width ${motion.expressive}`
+          }}
+        >
+          {routes}
+        </Box>
+        <Flex
+          alignItems='center'
+          justifyContent='center'
+          css={{
+            marginLeft: 480,
+            flexGrow: 1,
+            backgroundImage: `radial-gradient(77.16% 77.16% at 50% 51.81%, rgba(91, 35, 225, 0.80) 0%, rgba(113, 41, 230, 0.64) 67.96%, rgba(162, 47, 235, 0.50) 100%), url(${djBackground})`,
+            backgroundColor: 'lightgray',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center'
+          }}
+        >
+          <AudiusValues />
+        </Flex>
+      </Paper>
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/sign-on-page/index.ts b/packages/web/src/pages/sign-on-page/index.ts
new file mode 100644
index 00000000000..caab1679630
--- /dev/null
+++ b/packages/web/src/pages/sign-on-page/index.ts
@@ -0,0 +1 @@
+export { SignOnPage as default } from './SignOnPage'
diff --git a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageDesktop.tsx b/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageDesktop.tsx
index 2fb699fc8aa..8e1c7df2b39 100644
--- a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageDesktop.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageDesktop.tsx
@@ -14,10 +14,7 @@ import { Link } from 'react-router-dom'
 import audiusLogoColored from 'assets/img/audiusLogoColored.png'
 import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
 import PreloadImage from 'components/preload-image/PreloadImage'
-import {
-  ArtworkContainer,
-  AudiusValues
-} from 'pages/sign-on/components/AudiusValues'
+import { ArtworkContainer, AudiusValues } from 'pages/sign-on-page/AudiusValues'
 import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer'
 import { SignOnContainerDesktop } from 'pages/sign-on/components/desktop/SignOnContainerDesktop'
 import { SocialMediaLoginOptions } from 'pages/sign-up-page/components/SocialMediaLoginOptions'
@@ -47,7 +44,7 @@ export const CreateEmailPageDesktop = ({
             className={cn(styles.logo, styles.desktop)}
           />
           <Flex direction='column' gap='l' alignItems='flex-start' w='100%'>
-            <Text color='heading' size='l' variant='heading' tag='h1'>
+            <Text size='l' variant='heading' color='accent' tag='h1'>
               {messages.title}
             </Text>
             <Text color='default' size='l' variant='body' tag='h2'>
@@ -57,7 +54,6 @@ export const CreateEmailPageDesktop = ({
           <Flex direction='column' gap='l' w='100%' alignItems='flex-start'>
             <HarmonyTextField
               name='email'
-              autoFocus
               autoComplete='email'
               label={messages.emailLabel}
             />
diff --git a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx b/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx
index c8ffe861bee..235945adc68 100644
--- a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx
@@ -12,10 +12,7 @@ import { useFormikContext } from 'formik'
 import { Link } from 'react-router-dom'
 
 import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
-import {
-  ArtworkContainer,
-  AudiusValues
-} from 'pages/sign-on/components/AudiusValues'
+import { ArtworkContainer, AudiusValues } from 'pages/sign-on-page/AudiusValues'
 import { MobileContentContainer } from 'pages/sign-on/components/desktop/MobileContentContainer'
 import { SignOnContainerMobile } from 'pages/sign-on/components/mobile/SignOnContainerMobile'
 import { SocialMediaLoginOptions } from 'pages/sign-up-page/components/SocialMediaLoginOptions'
diff --git a/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx b/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
index bcb4f77f38d..4bd1c49ef92 100644
--- a/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
@@ -27,10 +27,7 @@ import {
 import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
 import { ExternalLink } from 'components/link'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
-import {
-  ArtworkContainer,
-  AudiusValues
-} from 'pages/sign-on/components/AudiusValues'
+import { ArtworkContainer, AudiusValues } from 'pages/sign-on-page/AudiusValues'
 import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer'
 import { SignOnContainerDesktop } from 'pages/sign-on/components/desktop/SignOnContainerDesktop'
 import { AppState } from 'store/types'