From 67b1ff257d55d21e5967fb8acdcf6e1df768115c Mon Sep 17 00:00:00 2001
From: Erik Seliger <erikseliger@me.com>
Date: Sat, 7 Oct 2023 01:56:41 +0200
Subject: [PATCH 1/6] Cleanup auth and init pages design

This PR wraps up the outstanding changes mentioned in https://github.com/sourcegraph/sourcegraph/issues/14773 and designed in https://www.figma.com/file/L5ZdNBGAnHQQUGGmp6tdQS/%2312695-%E2%80%93-Sign-in-%2F-Out-UX-%5BDone%5D?type=design&node-id=17-2040&mode=design&t=gJokKWRG2kC09J9M-0.
Since all the implementations of the pages were done slightly different, I consolidated them.
I also added a bunch of stories for easier review and regression testing. No one wants the login page to break :)
---
 .../web/src/auth/AuthPageWrapper.module.scss  |  15 ++
 client/web/src/auth/AuthPageWrapper.tsx       |  47 +++++
 .../web/src/auth/CloudSignUpPage.module.scss  |   5 -
 client/web/src/auth/CloudSignUpPage.story.tsx |   8 +
 client/web/src/auth/CloudSignUpPage.tsx       |   1 -
 client/web/src/auth/OrDivider.story.tsx       |   2 +-
 client/web/src/auth/PostSignUpPage.story.tsx  |   2 +-
 .../src/auth/RequestAccessPage.module.scss    |   3 +
 .../web/src/auth/RequestAccessPage.story.tsx  |  17 ++
 client/web/src/auth/RequestAccessPage.tsx     | 171 ++++++++----------
 .../src/auth/ResetPasswordPage.module.scss    |   5 +-
 .../web/src/auth/ResetPasswordPage.story.tsx  |  67 +++++++
 client/web/src/auth/ResetPasswordPage.tsx     | 162 +++++++----------
 client/web/src/auth/SignInPage.module.scss    |   3 +
 client/web/src/auth/SignInPage.story.tsx      |  56 +++---
 client/web/src/auth/SignInPage.tsx            | 164 +++++++++--------
 .../src/auth/SignInSignUpCommon.module.scss   |  23 ---
 client/web/src/auth/SignUpForm.tsx            | 116 +++++-------
 client/web/src/auth/SignUpPage.module.scss    |   3 +
 client/web/src/auth/SignUpPage.story.tsx      |  60 ++++++
 client/web/src/auth/SignUpPage.tsx            |  45 ++---
 client/web/src/auth/SignupEmailField.tsx      |  21 +--
 client/web/src/auth/UnlockAccount.module.scss |   3 +
 client/web/src/auth/UnlockAccount.story.tsx   |  57 ++++++
 client/web/src/auth/UnlockAccount.tsx         |  50 +++--
 .../web/src/auth/VsCodeSignUpPage.story.tsx   |  74 ++++++++
 client/web/src/auth/VsCodeSignUpPage.tsx      |   9 +-
 .../auth/components/ExternalsAuth.module.scss |  13 ++
 .../web/src/auth/components/ExternalsAuth.tsx |  11 +-
 .../web/src/components/branding/BrandLogo.tsx |   6 +-
 .../site-admin/init/SiteInitPage.module.scss  |   9 +-
 .../site-admin/init/SiteInitPage.story.tsx    |  41 +++++
 .../src/site-admin/init/SiteInitPage.test.tsx |  12 +-
 .../web/src/site-admin/init/SiteInitPage.tsx  |  68 +++----
 34 files changed, 822 insertions(+), 527 deletions(-)
 create mode 100644 client/web/src/auth/AuthPageWrapper.module.scss
 create mode 100644 client/web/src/auth/AuthPageWrapper.tsx
 create mode 100644 client/web/src/auth/RequestAccessPage.module.scss
 create mode 100644 client/web/src/auth/RequestAccessPage.story.tsx
 create mode 100644 client/web/src/auth/ResetPasswordPage.story.tsx
 create mode 100644 client/web/src/auth/SignInPage.module.scss
 delete mode 100644 client/web/src/auth/SignInSignUpCommon.module.scss
 create mode 100644 client/web/src/auth/SignUpPage.module.scss
 create mode 100644 client/web/src/auth/SignUpPage.story.tsx
 create mode 100644 client/web/src/auth/UnlockAccount.module.scss
 create mode 100644 client/web/src/auth/UnlockAccount.story.tsx
 create mode 100644 client/web/src/auth/VsCodeSignUpPage.story.tsx
 create mode 100644 client/web/src/site-admin/init/SiteInitPage.story.tsx

diff --git a/client/web/src/auth/AuthPageWrapper.module.scss b/client/web/src/auth/AuthPageWrapper.module.scss
new file mode 100644
index 000000000000..f91244de0e83
--- /dev/null
+++ b/client/web/src/auth/AuthPageWrapper.module.scss
@@ -0,0 +1,15 @@
+.logo {
+    display: block;
+    width: 4rem;
+    margin-bottom: 1rem;
+}
+
+.wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20vh;
+    flex-direction: column;
+    flex: 1 1 auto;
+}
diff --git a/client/web/src/auth/AuthPageWrapper.tsx b/client/web/src/auth/AuthPageWrapper.tsx
new file mode 100644
index 000000000000..4927150360ca
--- /dev/null
+++ b/client/web/src/auth/AuthPageWrapper.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
+import { H1, LinkOrSpan, Text } from '@sourcegraph/wildcard'
+
+import { BrandLogo } from '../components/branding/BrandLogo'
+
+import styles from './AuthPageWrapper.module.scss'
+
+interface Props {
+    /** Title of the page. */
+    title: string
+    /** Optional second line item. */
+    description?: string
+    sourcegraphDotComMode: boolean
+    className?: string
+}
+
+export type AuthPageWrapperProps = React.PropsWithChildren<Props>
+
+export const AuthPageWrapper: React.FunctionComponent<AuthPageWrapperProps> = ({
+    title,
+    description,
+    sourcegraphDotComMode,
+    className,
+    children,
+}) => {
+    const isLightTheme = useIsLightTheme()
+
+    return (
+        <>
+            <div className={styles.wrapper}>
+                <LinkOrSpan to={sourcegraphDotComMode ? '/search' : undefined}>
+                    <BrandLogo
+                        className={styles.logo}
+                        isLightTheme={isLightTheme}
+                        variant="symbol"
+                        disableSymbolSpin={true}
+                    />
+                </LinkOrSpan>
+                <H1>{title}</H1>
+                {description && <Text className="text-muted">{description}</Text>}
+                <div className={className}>{children}</div>
+            </div>
+        </>
+    )
+}
diff --git a/client/web/src/auth/CloudSignUpPage.module.scss b/client/web/src/auth/CloudSignUpPage.module.scss
index 23f020e1abbe..26ca6f2125a4 100644
--- a/client/web/src/auth/CloudSignUpPage.module.scss
+++ b/client/web/src/auth/CloudSignUpPage.module.scss
@@ -112,8 +112,3 @@
     height: 3rem !important;
     flex-shrink: 0;
 }
-
-.externals-auth-button {
-    background: var(--white);
-    color: var(--black) !important;
-}
diff --git a/client/web/src/auth/CloudSignUpPage.story.tsx b/client/web/src/auth/CloudSignUpPage.story.tsx
index 54830bc5f482..c27d45a06e68 100644
--- a/client/web/src/auth/CloudSignUpPage.story.tsx
+++ b/client/web/src/auth/CloudSignUpPage.story.tsx
@@ -32,6 +32,14 @@ const context: Pick<SourcegraphContext, 'authProviders' | 'experimentalFeatures'
             authenticationURL: '/.auth/gitlab/login?pc=https%3A%2F%2Fgitlab.com%2F',
             serviceID: 'https://gitlab.com',
         },
+        {
+            clientID: '002',
+            serviceType: 'openidconnect',
+            displayName: 'Google',
+            isBuiltin: false,
+            authenticationURL: '/.auth/openidconnect/login?pc=google',
+            serviceID: 'https://gitlab.com',
+        },
     ],
     experimentalFeatures: {},
     authMinPasswordLength: 0,
diff --git a/client/web/src/auth/CloudSignUpPage.tsx b/client/web/src/auth/CloudSignUpPage.tsx
index f8e758d567f3..f7bbf7def188 100644
--- a/client/web/src/auth/CloudSignUpPage.tsx
+++ b/client/web/src/auth/CloudSignUpPage.tsx
@@ -108,7 +108,6 @@ export const CloudSignUpPage: React.FunctionComponent<React.PropsWithChildren<Pr
                 gitlabLabel="Continue with GitLab"
                 googleLabel="Continue with Google"
                 onClick={logEventAndSetFlags}
-                ctaClassName={styles.externalsAuthButton}
             />
         </>
     )
diff --git a/client/web/src/auth/OrDivider.story.tsx b/client/web/src/auth/OrDivider.story.tsx
index eca9383b014c..9d502b31b8db 100644
--- a/client/web/src/auth/OrDivider.story.tsx
+++ b/client/web/src/auth/OrDivider.story.tsx
@@ -9,7 +9,7 @@ import { OrDivider } from './OrDivider'
 const decorator: DecoratorFn = story => <div className="p-3 container">{story()}</div>
 
 const config: Meta = {
-    title: 'web/OrDivider',
+    title: 'web/auth/OrDivider',
     decorators: [decorator],
 }
 
diff --git a/client/web/src/auth/PostSignUpPage.story.tsx b/client/web/src/auth/PostSignUpPage.story.tsx
index d16b94862dc0..4cc0f1f7f5d7 100644
--- a/client/web/src/auth/PostSignUpPage.story.tsx
+++ b/client/web/src/auth/PostSignUpPage.story.tsx
@@ -6,7 +6,7 @@ import { WebStory } from '../components/WebStory'
 import { PostSignUpPage } from './PostSignUpPage'
 
 const config: Meta = {
-    title: 'web/src/auth/PostSignUpPage',
+    title: 'web/auth/PostSignUpPage',
 }
 
 export default config
diff --git a/client/web/src/auth/RequestAccessPage.module.scss b/client/web/src/auth/RequestAccessPage.module.scss
new file mode 100644
index 000000000000..9f591d6f94a7
--- /dev/null
+++ b/client/web/src/auth/RequestAccessPage.module.scss
@@ -0,0 +1,3 @@
+.wrapper {
+    width: 27.5rem;
+}
diff --git a/client/web/src/auth/RequestAccessPage.story.tsx b/client/web/src/auth/RequestAccessPage.story.tsx
new file mode 100644
index 000000000000..b6a9f28c1e5a
--- /dev/null
+++ b/client/web/src/auth/RequestAccessPage.story.tsx
@@ -0,0 +1,17 @@
+import type { Meta, Story } from '@storybook/react'
+
+import { WebStory } from '../components/WebStory'
+
+import { RequestAccessPage } from './RequestAccessPage'
+
+const config: Meta = {
+    title: 'web/auth/RequestAccessPage',
+}
+
+export default config
+
+export const Default: Story = () => <WebStory>{() => <RequestAccessPage />}</WebStory>
+
+export const Done: Story = () => (
+    <WebStory initialEntries={[{ pathname: '/done' }]}>{() => <RequestAccessPage />}</WebStory>
+)
diff --git a/client/web/src/auth/RequestAccessPage.tsx b/client/web/src/auth/RequestAccessPage.tsx
index 029c591a57ad..2d79eb4a5aee 100644
--- a/client/web/src/auth/RequestAccessPage.tsx
+++ b/client/web/src/auth/RequestAccessPage.tsx
@@ -1,23 +1,22 @@
 import React, { useEffect, useState } from 'react'
 
-import classNames from 'classnames'
 import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom'
 
-import { Text, Link, ErrorAlert, Form, Input, Button, LoadingSpinner, TextArea, Label } from '@sourcegraph/wildcard'
+import { Text, Link, ErrorAlert, Form, Input, TextArea, Container, Alert } from '@sourcegraph/wildcard'
 
-import { HeroPage } from '../components/HeroPage'
+import { LoaderButton } from '../components/LoaderButton'
 import { PageTitle } from '../components/PageTitle'
 import type { SourcegraphContext } from '../jscontext'
 import { PageRoutes } from '../routes.constants'
 import { eventLogger } from '../tracking/eventLogger'
 import { checkRequestAccessAllowed } from '../util/checkRequestAccessAllowed'
 
-import { SourcegraphIcon } from './icons'
+import { AuthPageWrapper } from './AuthPageWrapper'
 import { getReturnTo } from './SignInSignUpCommon'
 
-import RequestAccessSignUpCommonStyles from './SignInSignUpCommon.module.scss'
+import styles from './RequestAccessPage.module.scss'
 
-interface RequestAccessFormProps {
+export interface RequestAccessFormProps {
     onSuccess: () => void
     onError: (error?: any) => void
     xhrHeaders: SourcegraphContext['xhrHeaders']
@@ -69,59 +68,50 @@ const RequestAccessForm: React.FunctionComponent<RequestAccessFormProps> = ({ on
         }
     }
     return (
-        <Form onSubmit={handleSubmit} data-testid="request-access-form">
-            <Label className="w-100">
-                <Text alignment="left" className="mb-2">
-                    Name
-                </Text>
-                <Input
-                    id="name"
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => setName(event.target.value)}
-                    required={true}
-                    value={name}
-                    disabled={loading}
-                    autoCapitalize="off"
-                    autoFocus={true}
-                    className="form-group"
-                    placeholder="Your name"
-                    autoComplete="name"
-                />
-            </Label>
-            <Label className="w-100">
-                <Text alignment="left" className="mb-2">
-                    Email Address
-                </Text>
-                <Input
-                    id="email"
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => setEmail(event.target.value)}
-                    required={true}
-                    value={email}
-                    disabled={loading}
-                    autoCapitalize="off"
-                    autoFocus={true}
-                    placeholder="Your work email to get access"
-                    className="form-group"
-                    autoComplete="email"
-                />
-            </Label>
-            <Label className="w-100">
-                <Text alignment="left" className="mb-2">
-                    Notes for administrator
-                </Text>
-                <TextArea
-                    id="additionalInfo"
-                    onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setAdditionalInfo(event.target.value)}
-                    className="mb-4"
-                    value={additionalInfo}
-                    placeholder="Use this field to provide extra info for your access request"
-                />
-            </Label>
-
-            <div className={classNames('form-group')}>
-                <Button display="block" type="submit" disabled={loading} variant="primary">
-                    {loading ? <LoadingSpinner /> : 'Request access'}
-                </Button>
-            </div>
+        <Form onSubmit={handleSubmit} className="mb-0" data-testid="request-access-form">
+            <Input
+                id="name"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setName(event.target.value)}
+                required={true}
+                value={name}
+                disabled={loading}
+                autoCapitalize="off"
+                autoFocus={true}
+                placeholder="Your name"
+                autoComplete="name"
+                label="Name"
+            />
+
+            <Input
+                id="email"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => setEmail(event.target.value)}
+                required={true}
+                value={email}
+                disabled={loading}
+                autoCapitalize="off"
+                autoFocus={true}
+                placeholder="Your work email to get access"
+                autoComplete="email"
+                label="Email Address"
+            />
+
+            <TextArea
+                id="additionalInfo"
+                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setAdditionalInfo(event.target.value)}
+                value={additionalInfo}
+                placeholder="Use this field to provide extra info for your access request"
+                label="Notes for administrator"
+                className="mb-3"
+            />
+
+            <LoaderButton
+                display="block"
+                loading={loading}
+                type="submit"
+                disabled={loading}
+                variant="primary"
+                label="Request access"
+            />
         </Form>
     )
 }
@@ -146,54 +136,45 @@ export const RequestAccessPage: React.FunctionComponent = () => {
         return <Navigate to={PageRoutes.SignIn} replace={true} />
     }
 
-    const body = (
-        <div className={classNames('mb-4 pb-5', RequestAccessSignUpCommonStyles.signinPageContainer)}>
-            {error && <ErrorAlert className="mt-4 mb-0 text-left" error={error} />}
-            <div
-                className={classNames(
-                    'rounded p-4 my-3',
-                    RequestAccessSignUpCommonStyles.signinSignupForm,
-                    error ? 'mt-3' : 'mt-4'
-                )}
+    return (
+        <>
+            <PageTitle title="Request access" />
+            <AuthPageWrapper
+                title="Request access to Sourcegraph"
+                sourcegraphDotComMode={sourcegraphDotComMode}
+                className={styles.wrapper}
             >
+                {error && <ErrorAlert error={error} />}
                 <Routes>
                     <Route
                         path="done"
                         element={
-                            <Text data-testid="request-access-post-submit">
-                                Thank you! We notified the admin of your request.
-                            </Text>
+                            <Container>
+                                <Alert variant="info" data-testid="request-access-post-submit" className="mb-0">
+                                    Thank you! We notified the admin of your request.
+                                </Alert>
+                            </Container>
                         }
                     />
                     <Route
                         path=""
                         element={
-                            <RequestAccessForm
-                                onError={setError}
-                                xhrHeaders={xhrHeaders}
-                                onSuccess={() => navigate('done')}
-                            />
+                            <>
+                                <Container>
+                                    <RequestAccessForm
+                                        onError={setError}
+                                        xhrHeaders={xhrHeaders}
+                                        onSuccess={() => navigate('done')}
+                                    />
+                                </Container>
+                                <Text className="text-center mt-3">
+                                    Already have an account? <Link to={`/sign-in${location.search}`}>Sign in</Link>
+                                </Text>
+                            </>
                         }
                     />
                 </Routes>
-            </div>
-            <Text className="mt-3">
-                Already have an account? <Link to={`/sign-in${location.search}`}>Sign in</Link>
-            </Text>
-        </div>
-    )
-
-    return (
-        <div className={RequestAccessSignUpCommonStyles.signinSignupPage}>
-            <PageTitle title="Request access" />
-            <HeroPage
-                icon={SourcegraphIcon}
-                iconLinkTo={sourcegraphDotComMode ? '/search' : undefined}
-                iconClassName="bg-transparent"
-                lessPadding={true}
-                title="Request access to Sourcegraph"
-                body={body}
-            />
-        </div>
+            </AuthPageWrapper>
+        </>
     )
 }
diff --git a/client/web/src/auth/ResetPasswordPage.module.scss b/client/web/src/auth/ResetPasswordPage.module.scss
index 7896bf7c8d09..c56c1956bcc3 100644
--- a/client/web/src/auth/ResetPasswordPage.module.scss
+++ b/client/web/src/auth/ResetPasswordPage.module.scss
@@ -1,4 +1,3 @@
-.form {
-    margin: 0 auto;
-    max-width: 18rem;
+.wrapper {
+    max-width: 20rem;
 }
diff --git a/client/web/src/auth/ResetPasswordPage.story.tsx b/client/web/src/auth/ResetPasswordPage.story.tsx
new file mode 100644
index 000000000000..f07bbd9460f8
--- /dev/null
+++ b/client/web/src/auth/ResetPasswordPage.story.tsx
@@ -0,0 +1,67 @@
+import type { Meta, Story } from '@storybook/react'
+
+import { AuthenticatedUser } from '../auth'
+import { WebStory } from '../components/WebStory'
+
+import { ResetPasswordPage } from './ResetPasswordPage'
+
+const config: Meta = {
+    title: 'web/auth/ResetPasswordPage',
+}
+
+export default config
+
+export const Default: Story = () => (
+    <WebStory>
+        {() => (
+            <ResetPasswordPage
+                context={{ xhrHeaders: {}, resetPasswordEnabled: true, sourcegraphDotComMode: false }}
+                authenticatedUser={null}
+            />
+        )}
+    </WebStory>
+)
+
+export const WithCode: Story = () => (
+    <WebStory initialEntries={[{ pathname: '/reset-password', search: '?code=123123&userID=123' }]}>
+        {() => (
+            <ResetPasswordPage
+                context={{ xhrHeaders: {}, resetPasswordEnabled: true, sourcegraphDotComMode: false }}
+                authenticatedUser={null}
+            />
+        )}
+    </WebStory>
+)
+
+export const LoggedInUser: Story = () => (
+    <WebStory>
+        {() => (
+            <ResetPasswordPage
+                context={{ xhrHeaders: {}, resetPasswordEnabled: true, sourcegraphDotComMode: false }}
+                authenticatedUser={{ id: 'user' } as AuthenticatedUser}
+            />
+        )}
+    </WebStory>
+)
+
+export const Disabled: Story = () => (
+    <WebStory>
+        {() => (
+            <ResetPasswordPage
+                context={{ xhrHeaders: {}, resetPasswordEnabled: false, sourcegraphDotComMode: false }}
+                authenticatedUser={null}
+            />
+        )}
+    </WebStory>
+)
+
+export const Dotcom: Story = () => (
+    <WebStory>
+        {() => (
+            <ResetPasswordPage
+                context={{ xhrHeaders: {}, resetPasswordEnabled: true, sourcegraphDotComMode: true }}
+                authenticatedUser={null}
+            />
+        )}
+    </WebStory>
+)
diff --git a/client/web/src/auth/ResetPasswordPage.tsx b/client/web/src/auth/ResetPasswordPage.tsx
index dfc4bf44f6dc..dff8dbdbac38 100644
--- a/client/web/src/auth/ResetPasswordPage.tsx
+++ b/client/web/src/auth/ResetPasswordPage.tsx
@@ -1,21 +1,20 @@
 import * as React from 'react'
 
-import classNames from 'classnames'
 import { useLocation } from 'react-router-dom'
 
 import { asError, type ErrorLike, isErrorLike, logger } from '@sourcegraph/common'
-import { Button, Link, LoadingSpinner, Alert, Text, Input, ErrorAlert, Form } from '@sourcegraph/wildcard'
+import { Button, Link, LoadingSpinner, Alert, Text, Input, ErrorAlert, Form, Container } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../auth'
-import { HeroPage } from '../components/HeroPage'
+import { LoaderButton } from '../components/LoaderButton'
 import { PageTitle } from '../components/PageTitle'
+import { SourcegraphContext } from '../jscontext'
 import { eventLogger } from '../tracking/eventLogger'
 
-import { SourcegraphIcon } from './icons'
+import { AuthPageWrapper } from './AuthPageWrapper'
 import { PasswordInput } from './SignInSignUpCommon'
 
 import styles from './ResetPasswordPage.module.scss'
-import signInSignUpCommonStyles from './SignInSignUpCommon.module.scss'
 
 interface ResetPasswordInitFormState {
     /** The user's email input value. */
@@ -42,17 +41,12 @@ class ResetPasswordInitForm extends React.PureComponent<{}, ResetPasswordInitFor
         if (this.state.submitOrError === null) {
             return (
                 <>
-                    <div
-                        className={classNames('border rounded p-4 mb-3', signInSignUpCommonStyles.signinSignupForm)}
-                        data-testid="reset-password-page-form"
-                    >
-                        <Text alignment="left" className="mb-0">
-                            Check your email for a link to reset your password.
-                        </Text>
-                    </div>
-                    <span className="form-text text-muted">
+                    <Container className="w-100 mb-3" data-testid="reset-password-page-form">
+                        <Text className="mb-0">Check your email for a link to reset your password.</Text>
+                    </Container>
+                    <Text className="text-center">
                         <Link to="/sign-in">Return to sign in</Link>
-                    </span>
+                    </Text>
                 </>
             )
         }
@@ -62,45 +56,34 @@ class ResetPasswordInitForm extends React.PureComponent<{}, ResetPasswordInitFor
                 {isErrorLike(this.state.submitOrError) && (
                     <ErrorAlert className="mt-2" error={this.state.submitOrError} />
                 )}
-                <Form
-                    className={classNames(
-                        'border rounded p-4 mb-3',
-                        signInSignUpCommonStyles.signinSignupForm,
-                        styles.form
-                    )}
-                    data-testid="reset-password-page-form"
-                    onSubmit={this.handleSubmitResetPasswordInit}
-                >
-                    <Input
-                        onChange={this.onEmailFieldChange}
-                        value={this.state.email}
-                        type="email"
-                        name="email"
-                        autoFocus={true}
-                        spellCheck={false}
-                        required={true}
-                        autoComplete="email"
-                        disabled={this.state.submitOrError === 'loading'}
-                        className="form-group"
-                        label={
-                            <Text className="text-left">
-                                Enter your account email address and we will send you a password reset link
-                            </Text>
-                        }
-                    />
-                    <Button
-                        className="mt-4"
-                        type="submit"
-                        disabled={this.state.submitOrError === 'loading'}
-                        variant="primary"
-                        display="block"
-                    >
-                        {this.state.submitOrError === 'loading' ? <LoadingSpinner /> : 'Send reset password link'}
-                    </Button>
-                </Form>
-                <span className="form-text text-muted">
+                <Container className="w-100 mb-3">
+                    <Form data-testid="reset-password-page-form" onSubmit={this.handleSubmitResetPasswordInit}>
+                        <Input
+                            onChange={this.onEmailFieldChange}
+                            value={this.state.email}
+                            type="email"
+                            name="email"
+                            autoFocus={true}
+                            spellCheck={false}
+                            required={true}
+                            autoComplete="email"
+                            disabled={this.state.submitOrError === 'loading'}
+                            className="form-group"
+                            label="Enter your account email address and we will send you a password reset link"
+                        />
+                        <Button
+                            type="submit"
+                            disabled={this.state.submitOrError === 'loading'}
+                            variant="primary"
+                            display="block"
+                        >
+                            {this.state.submitOrError === 'loading' ? <LoadingSpinner /> : 'Send reset password link'}
+                        </Button>
+                    </Form>
+                </Container>
+                <Text className="text-center">
                     <Link to="/sign-in">Return to sign in</Link>
-                </span>
+                </Text>
             </>
         )
     }
@@ -177,40 +160,30 @@ class ResetPasswordCodeForm extends React.PureComponent<ResetPasswordCodeFormPro
 
         return (
             <>
-                {isErrorLike(this.state.submitOrError) && (
-                    <ErrorAlert className="mt-2" error={this.state.submitOrError} />
-                )}
-                <Form
-                    className={classNames(
-                        'border rounded p-4 mb-3',
-                        signInSignUpCommonStyles.signinSignupForm,
-                        styles.form
-                    )}
-                    data-testid="reset-password-page-form"
-                    onSubmit={this.handleSubmitResetPassword}
-                >
-                    <PasswordInput
-                        name="password"
-                        onChange={this.onPasswordFieldChange}
-                        value={this.state.password}
-                        className="form-group"
-                        label={<Text alignment="left">Enter a new password for your account.</Text>}
-                        required={true}
-                        autoFocus={true}
-                        autoComplete="new-password"
-                        placeholder=" "
-                        disabled={this.state.submitOrError === 'loading'}
-                    />
-                    <Button
-                        className="mt-4"
-                        display="block"
-                        type="submit"
-                        disabled={this.state.submitOrError === 'loading'}
-                        variant="primary"
-                    >
-                        {this.state.submitOrError === 'loading' ? <LoadingSpinner /> : 'Reset password'}
-                    </Button>
-                </Form>
+                {isErrorLike(this.state.submitOrError) && <ErrorAlert error={this.state.submitOrError} />}
+                <Container className="w-100">
+                    <Form data-testid="reset-password-page-form" onSubmit={this.handleSubmitResetPassword}>
+                        <PasswordInput
+                            name="password"
+                            onChange={this.onPasswordFieldChange}
+                            value={this.state.password}
+                            className="form-group"
+                            required={true}
+                            autoFocus={true}
+                            autoComplete="new-password"
+                            placeholder=" "
+                            disabled={this.state.submitOrError === 'loading'}
+                            label="Enter a new password for your account"
+                        />
+                        <LoaderButton
+                            display="block"
+                            type="submit"
+                            variant="primary"
+                            loading={this.state.submitOrError === 'loading'}
+                            label="Reset Password"
+                        />
+                    </Form>
+                </Container>
             </>
         )
     }
@@ -252,6 +225,7 @@ class ResetPasswordCodeForm extends React.PureComponent<ResetPasswordCodeFormPro
 
 interface ResetPasswordPageProps {
     authenticatedUser: AuthenticatedUser | null
+    context: Pick<SourcegraphContext, 'xhrHeaders' | 'sourcegraphDotComMode' | 'resetPasswordEnabled'>
 }
 
 /**
@@ -268,7 +242,7 @@ export const ResetPasswordPage: React.FunctionComponent<ResetPasswordPageProps>
     let body: JSX.Element
     if (props.authenticatedUser) {
         body = <Alert variant="danger">Authenticated users may not perform password reset.</Alert>
-    } else if (window.context.resetPasswordEnabled) {
+    } else if (props.context.resetPasswordEnabled) {
         const searchParameters = new URLSearchParams(location.search)
         if (searchParameters.has('code') || searchParameters.has('userID')) {
             const code = searchParameters.get('code')
@@ -301,13 +275,13 @@ export const ResetPasswordPage: React.FunctionComponent<ResetPasswordPageProps>
     return (
         <>
             <PageTitle title="Reset your password" />
-            <HeroPage
-                icon={SourcegraphIcon}
-                iconLinkTo={window.context.sourcegraphDotComMode ? '/search' : undefined}
-                iconClassName="bg-transparent"
+            <AuthPageWrapper
                 title="Reset your password"
-                body={<div className={classNames('mt-4', signInSignUpCommonStyles.signinPageContainer)}>{body}</div>}
-            />
+                sourcegraphDotComMode={props.context.sourcegraphDotComMode}
+                className={styles.wrapper}
+            >
+                {body}
+            </AuthPageWrapper>
         </>
     )
 }
diff --git a/client/web/src/auth/SignInPage.module.scss b/client/web/src/auth/SignInPage.module.scss
new file mode 100644
index 000000000000..8115b4ba8dab
--- /dev/null
+++ b/client/web/src/auth/SignInPage.module.scss
@@ -0,0 +1,3 @@
+.wrapper {
+    width: 20rem;
+}
diff --git a/client/web/src/auth/SignInPage.story.tsx b/client/web/src/auth/SignInPage.story.tsx
index 0088e7dd1068..48d91e617f21 100644
--- a/client/web/src/auth/SignInPage.story.tsx
+++ b/client/web/src/auth/SignInPage.story.tsx
@@ -52,34 +52,44 @@ const context: SignInPageProps['context'] = {
 }
 
 export const Default: Story = () => (
-    <WebStory>{({ isLightTheme }) => <SignInPage context={context} authenticatedUser={null} />}</WebStory>
+    <WebStory>{() => <SignInPage context={context} authenticatedUser={null} />}</WebStory>
+)
+
+export const ShowMore: Story = () => (
+    <WebStory initialEntries={[{ pathname: '/sign-in', search: '?showMore' }]}>
+        {() => <SignInPage context={{ ...context, primaryLoginProvidersCount: 1 }} authenticatedUser={null} />}
+    </WebStory>
+)
+
+export const Dotcom: Story = () => (
+    <WebStory>
+        {() => <SignInPage context={{ ...context, sourcegraphDotComMode: true }} authenticatedUser={null} />}
+    </WebStory>
+)
+
+export const NoProviders: Story = () => (
+    <WebStory>{() => <SignInPage context={{ ...context, authProviders: [] }} authenticatedUser={null} />}</WebStory>
 )
 
 export const NoBuiltIn: Story = () => (
     <WebStory>
-        {({ isLightTheme }) => (
-            <SignInPage context={{ ...context, authProviders: noBuiltInAuthProviders }} authenticatedUser={null} />
-        )}
+        {() => <SignInPage context={{ ...context, authProviders: noBuiltInAuthProviders }} authenticatedUser={null} />}
     </WebStory>
 )
 
 export const NoResetPassword: Story = () => (
     <WebStory>
-        {({ isLightTheme }) => (
-            <SignInPage context={{ ...context, resetPasswordEnabled: false }} authenticatedUser={null} />
-        )}
+        {() => <SignInPage context={{ ...context, resetPasswordEnabled: false }} authenticatedUser={null} />}
     </WebStory>
 )
 
 export const NoSignUp: Story = () => (
-    <WebStory>
-        {({ isLightTheme }) => <SignInPage context={{ ...context, allowSignup: false }} authenticatedUser={null} />}
-    </WebStory>
+    <WebStory>{() => <SignInPage context={{ ...context, allowSignup: false }} authenticatedUser={null} />}</WebStory>
 )
 
 export const NoAccessRequest: Story = () => (
     <WebStory>
-        {({ isLightTheme }) => (
+        {() => (
             <SignInPage
                 context={{ ...context, allowSignup: false, authAccessRequest: { enabled: false } }}
                 authenticatedUser={null}
@@ -90,23 +100,19 @@ export const NoAccessRequest: Story = () => (
 
 export const DotComSignUp: Story = () => (
     <WebStory>
-        {({ isLightTheme }) => (
-            <SignInPage context={{ ...context, sourcegraphDotComMode: true }} authenticatedUser={null} />
-        )}
+        {() => <SignInPage context={{ ...context, sourcegraphDotComMode: true }} authenticatedUser={null} />}
     </WebStory>
 )
 
 export const OnlyOnePrimaryProvider: Story = () => (
     <WebStory>
-        {({ isLightTheme }) => (
-            <SignInPage context={{ ...context, primaryLoginProvidersCount: 1 }} authenticatedUser={null} />
-        )}
+        {() => <SignInPage context={{ ...context, primaryLoginProvidersCount: 1 }} authenticatedUser={null} />}
     </WebStory>
 )
 
 export const OnlyOnePrimaryProviderWithoutBuiltIn: Story = () => (
     <WebStory>
-        {({ isLightTheme }) => (
+        {() => (
             <SignInPage
                 context={{ ...context, primaryLoginProvidersCount: 1, authProviders: noBuiltInAuthProviders }}
                 authenticatedUser={null}
@@ -117,15 +123,13 @@ export const OnlyOnePrimaryProviderWithoutBuiltIn: Story = () => (
 
 export const ShowMoreProviders: Story = () => (
     <WebStory initialEntries={['/sign-in?showMore']}>
-        {({ isLightTheme }) => (
-            <SignInPage context={{ ...context, primaryLoginProvidersCount: 1 }} authenticatedUser={null} />
-        )}
+        {() => <SignInPage context={{ ...context, primaryLoginProvidersCount: 1 }} authenticatedUser={null} />}
     </WebStory>
 )
 
 export const ShowMoreProvidersWithoutBuiltIn: Story = () => (
     <WebStory initialEntries={['/sign-in?showMore']}>
-        {({ isLightTheme }) => (
+        {() => (
             <SignInPage
                 context={{ ...context, authProviders: noBuiltInAuthProviders, primaryLoginProvidersCount: 1 }}
                 authenticatedUser={null}
@@ -136,9 +140,7 @@ export const ShowMoreProvidersWithoutBuiltIn: Story = () => (
 
 export const OnlyBuiltInAuthProvider: Story = () => (
     <WebStory>
-        {({ isLightTheme }) => (
-            <SignInPage context={{ ...context, authProviders: onlyBuiltInAuthProvider }} authenticatedUser={null} />
-        )}
+        {() => <SignInPage context={{ ...context, authProviders: onlyBuiltInAuthProvider }} authenticatedUser={null} />}
     </WebStory>
 )
 
@@ -147,9 +149,7 @@ export const PrefixCanBeChanged: Story = () => {
 
     return (
         <WebStory>
-            {({ isLightTheme }) => (
-                <SignInPage context={{ ...context, authProviders: providers }} authenticatedUser={null} />
-            )}
+            {() => <SignInPage context={{ ...context, authProviders: providers }} authenticatedUser={null} />}
         </WebStory>
     )
 }
diff --git a/client/web/src/auth/SignInPage.tsx b/client/web/src/auth/SignInPage.tsx
index d00604e70e7d..1dd90a2406a8 100644
--- a/client/web/src/auth/SignInPage.tsx
+++ b/client/web/src/auth/SignInPage.tsx
@@ -5,21 +5,20 @@ import classNames from 'classnames'
 import { partition } from 'lodash'
 import { Navigate, useLocation, useSearchParams } from 'react-router-dom'
 
-import { Alert, Icon, Text, Link, Button, ErrorAlert, AnchorLink } from '@sourcegraph/wildcard'
+import { Alert, Icon, Text, Link, Button, ErrorAlert, AnchorLink, Container } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../auth'
-import { HeroPage } from '../components/HeroPage'
 import { PageTitle } from '../components/PageTitle'
 import type { AuthProvider, SourcegraphContext } from '../jscontext'
 import { eventLogger } from '../tracking/eventLogger'
 import { checkRequestAccessAllowed } from '../util/checkRequestAccessAllowed'
 
-import { SourcegraphIcon } from './icons'
+import { AuthPageWrapper } from './AuthPageWrapper'
 import { OrDivider } from './OrDivider'
 import { getReturnTo } from './SignInSignUpCommon'
 import { UsernamePasswordSignInForm } from './UsernamePasswordSignInForm'
 
-import signInSignUpCommonStyles from './SignInSignUpCommon.module.scss'
+import styles from './SignInPage.module.scss'
 
 export interface SignInPageProps {
     authenticatedUser: AuthenticatedUser | null
@@ -89,32 +88,14 @@ export const SignInPage: React.FunctionComponent<React.PropsWithChildren<SignInP
 
     const providers = showMoreProviders ? moreProviders : primaryProviders
 
-    const dotcomCTAs = (
-        <>
-            <Link
-                to="https://sourcegraph.com/get-started?t=enterprise"
-                onClick={() => eventLogger.log('ClickedOnEnterpriseCTA', { location: 'SignInPage' })}
-            >
-                consider Sourcegraph Enterprise
-            </Link>
-            .
-        </>
-    )
-
     const body = !hasProviders ? (
         <Alert className="mt-3" variant="info">
             No authentication providers are available. Contact a site administrator for help.
         </Alert>
     ) : (
-        <div className={classNames('mb-4 pb-5', signInSignUpCommonStyles.signinPageContainer)}>
-            {error && <ErrorAlert className="mt-4 mb-0 text-left" error={error} />}
-            <div
-                className={classNames(
-                    'test-signin-form rounded p-4 my-3',
-                    signInSignUpCommonStyles.signinSignupForm,
-                    error ? 'mt-3' : 'mt-4'
-                )}
-            >
+        <>
+            {error && <ErrorAlert error={error} />}
+            <Container className="test-signin-form">
                 {showMoreProviders && (
                     <div className="mb-3 text-left">
                         <Button
@@ -148,69 +129,110 @@ export const SignInPage: React.FunctionComponent<React.PropsWithChildren<SignInP
                     }
 
                     return (
-                        <div className="mb-2" key={index}>
+                        // Only add botton margin to every but the last providers.
+                        <div className={classNames(index !== providers.length - 1 && 'mb-2')} key={index}>
                             <Button
                                 to={authURL.toString()}
                                 display="block"
                                 variant={showMoreProviders ? 'secondary' : 'primary'}
                                 as={AnchorLink}
                             >
-                                {provider.serviceType === 'github' && <Icon aria-hidden={true} svgPath={mdiGithub} />}
-                                {provider.serviceType === 'gitlab' && <Icon aria-hidden={true} svgPath={mdiGitlab} />}
-                                {provider.serviceType === 'bitbucketCloud' && (
-                                    <Icon aria-hidden={true} svgPath={mdiBitbucket} />
-                                )}
-                                {provider.serviceType === 'azuredevops' && (
-                                    <Icon aria-hidden={true} svgPath={mdiMicrosoftAzureDevops} />
-                                )}{' '}
+                                <ProviderIcon serviceType={provider.serviceType} />{' '}
                                 {provider.displayPrefix ?? 'Continue with'} {provider.displayName}
                             </Button>
                         </div>
                     )
                 })}
                 {showMoreWaysToLogin && (
-                    <div className="mb-2">
-                        <Button display="block" variant="secondary" onClick={() => toggleMoreProviders(true)}>
-                            <Icon aria-hidden={true} svgPath={mdiKeyVariant} /> Other login methods
-                        </Button>
-                    </div>
+                    <Button
+                        display="block"
+                        className="mt-2"
+                        variant="secondary"
+                        onClick={() => toggleMoreProviders(true)}
+                    >
+                        <Icon aria-hidden={true} svgPath={mdiKeyVariant} /> Other login methods
+                    </Button>
                 )}
-            </div>
-            {context.allowSignup ? (
-                <Text>
-                    New to Sourcegraph? <Link to="/sign-up">Sign up.</Link>{' '}
-                    {context.sourcegraphDotComMode && <>To use Sourcegraph on private repositories, {dotcomCTAs}</>}
-                </Text>
-            ) : isRequestAccessAllowed ? (
-                <Text className="text-muted">
-                    Need an account? <Link to="/request-access">Request access</Link> or contact your site admin.
-                </Text>
-            ) : (
-                <Text className="text-muted">
-                    {context.sourcegraphDotComMode ? (
-                        <>
-                            Currently, we are unable to create accounts using email. Please use the providers listed
-                            above to continue. <br /> For private code, {dotcomCTAs}
-                        </>
-                    ) : (
-                        <>Need an account? Contact your site admin.</>
-                    )}
-                </Text>
-            )}
-        </div>
+            </Container>
+            <SignUpNotice
+                allowSignup={context.allowSignup}
+                isRequestAccessAllowed={isRequestAccessAllowed}
+                sourcegraphDotComMode={context.sourcegraphDotComMode}
+            />
+        </>
     )
 
     return (
-        <div className={signInSignUpCommonStyles.signinSignupPage}>
+        <>
             <PageTitle title="Sign in" />
-            <HeroPage
-                icon={SourcegraphIcon}
-                iconLinkTo={context.sourcegraphDotComMode ? '/search' : undefined}
-                iconClassName="bg-transparent"
-                lessPadding={true}
+            <AuthPageWrapper
                 title="Sign in to Sourcegraph"
-                body={body}
-            />
-        </div>
+                sourcegraphDotComMode={context.sourcegraphDotComMode}
+                className={styles.wrapper}
+            >
+                {body}
+            </AuthPageWrapper>
+        </>
     )
 }
+
+const ProviderIcon: React.FunctionComponent<{ serviceType: AuthProvider['serviceType'] }> = ({ serviceType }) => {
+    switch (serviceType) {
+        case 'github':
+            return <Icon aria-hidden={true} svgPath={mdiGithub} />
+        case 'gitlab':
+            return <Icon aria-hidden={true} svgPath={mdiGitlab} />
+        case 'bitbucketCloud':
+            return <Icon aria-hidden={true} svgPath={mdiBitbucket} />
+        case 'azuredevops':
+            return <Icon aria-hidden={true} svgPath={mdiMicrosoftAzureDevops} />
+        default:
+            return null
+    }
+}
+
+const SignUpNotice: React.FunctionComponent<{
+    allowSignup: boolean
+    sourcegraphDotComMode: boolean
+    isRequestAccessAllowed: boolean
+}> = ({ allowSignup, sourcegraphDotComMode, isRequestAccessAllowed }) => {
+    const dotcomCTAs = (
+        <>
+            <Link
+                to="https://sourcegraph.com/get-started?t=enterprise"
+                onClick={() => eventLogger.log('ClickedOnEnterpriseCTA', { location: 'SignInPage' })}
+            >
+                consider Sourcegraph Enterprise
+            </Link>
+            .
+        </>
+    )
+
+    if (allowSignup) {
+        return (
+            <Text className="mt-3 text-center">
+                New to Sourcegraph? <Link to="/sign-up">Sign up</Link>{' '}
+                {sourcegraphDotComMode && <>To use Sourcegraph on private repositories, {dotcomCTAs}</>}
+            </Text>
+        )
+    }
+
+    if (isRequestAccessAllowed) {
+        return (
+            <Text className="mt-3 text-center text-muted">
+                Need an account? <Link to="/request-access">Request access</Link> or contact your site admin.
+            </Text>
+        )
+    }
+
+    if (sourcegraphDotComMode) {
+        return (
+            <Text className="mt-3 text-center text-muted">
+                Currently, we are unable to create accounts using email. Please use the providers listed above to
+                continue. <br /> For private code, {dotcomCTAs}
+            </Text>
+        )
+    }
+
+    return <Text className="mt-3 text-center text-muted">Need an account? Contact your site admin.</Text>
+}
diff --git a/client/web/src/auth/SignInSignUpCommon.module.scss b/client/web/src/auth/SignInSignUpCommon.module.scss
deleted file mode 100644
index 0edc8401198a..000000000000
--- a/client/web/src/auth/SignInSignUpCommon.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.signin-signup-page {
-    width: 100%;
-
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-}
-
-.signin-signup-form {
-    max-width: calc(100vw - 2rem);
-    background-color: var(--color-bg-1);
-    border: 1px solid var(--border-color-2);
-}
-
-.signin-page-container {
-    width: 20rem;
-}
-
-.signup-page-container {
-    width: 27.5rem;
-}
diff --git a/client/web/src/auth/SignUpForm.tsx b/client/web/src/auth/SignUpForm.tsx
index d321d09a8c09..051c143725c1 100644
--- a/client/web/src/auth/SignUpForm.tsx
+++ b/client/web/src/auth/SignUpForm.tsx
@@ -24,8 +24,6 @@ import { OrDivider } from './OrDivider'
 import { PasswordInput, UsernameInput } from './SignInSignUpCommon'
 import { SignupEmailField } from './SignupEmailField'
 
-import signInSignUpCommonStyles from './SignInSignUpCommon.module.scss'
-
 export interface SignUpArguments {
     email: string
     username: string
@@ -135,21 +133,11 @@ export const SignUpForm: React.FunctionComponent<React.PropsWithChildren<SignUpF
 
     return (
         <>
-            {error && <ErrorAlert className="mt-4 mb-0" error={error} />}
+            {error && <ErrorAlert error={error} />}
+
             {/* Using  <form /> to set 'valid' + 'is-invaild' at the input level */}
             {/* eslint-disable-next-line react/forbid-elements */}
-            <form
-                className={classNames(
-                    !experimental && signInSignUpCommonStyles.signinSignupForm,
-                    'test-signup-form',
-                    !experimental && 'rounded p-4',
-                    'text-left',
-                    !experimental && (context.sourcegraphDotComMode || error) ? 'mt-3' : 'mt-4',
-                    className
-                )}
-                onSubmit={handleSubmit}
-                noValidate={true}
-            >
+            <form className={classNames('test-signup-form', className)} onSubmit={handleSubmit} noValidate={true}>
                 <SignupEmailField
                     label="Email"
                     loading={loading}
@@ -158,71 +146,51 @@ export const SignUpForm: React.FunctionComponent<React.PropsWithChildren<SignUpF
                     emailInputReference={emailInputReference}
                 />
                 <div className="form-group d-flex flex-column align-content-start">
-                    <Label
-                        htmlFor="username"
-                        className={classNames('align-self-start', {
-                            'text-danger font-weight-bold': usernameState.kind === 'INVALID',
-                        })}
-                    >
+                    <Label>
                         Username
+                        <LoaderInput
+                            className={classNames(deriveInputClassName(usernameState))}
+                            loading={usernameState.kind === 'LOADING'}
+                        >
+                            <UsernameInput
+                                className={deriveInputClassName(usernameState)}
+                                onChange={nextUsernameFieldChange}
+                                value={usernameState.value}
+                                required={true}
+                                disabled={loading}
+                                placeholder=" "
+                                inputRef={usernameInputReference}
+                                aria-describedby="username-input-invalid-feedback"
+                                error={usernameState.kind === 'INVALID' ? usernameState.reason : undefined}
+                            />
+                        </LoaderInput>
                     </Label>
-                    <LoaderInput
-                        className={classNames(deriveInputClassName(usernameState))}
-                        loading={usernameState.kind === 'LOADING'}
-                    >
-                        <UsernameInput
-                            className={deriveInputClassName(usernameState)}
-                            onChange={nextUsernameFieldChange}
-                            value={usernameState.value}
-                            required={true}
-                            disabled={loading}
-                            placeholder=" "
-                            inputRef={usernameInputReference}
-                            aria-describedby="username-input-invalid-feedback"
-                        />
-                    </LoaderInput>
-                    {usernameState.kind === 'INVALID' && (
-                        <small className="invalid-feedback" id="username-input-invalid-feedback" role="alert">
-                            {usernameState.reason}
-                        </small>
-                    )}
                 </div>
                 <div className="form-group d-flex flex-column align-content-start">
-                    <Label
-                        htmlFor="password"
-                        className={classNames('align-self-start', {
-                            'text-danger font-weight-bold': passwordState.kind === 'INVALID',
-                        })}
-                    >
+                    <Label>
                         Password
+                        <LoaderInput
+                            className={classNames(deriveInputClassName(passwordState))}
+                            loading={passwordState.kind === 'LOADING'}
+                        >
+                            <PasswordInput
+                                className={deriveInputClassName(passwordState)}
+                                onChange={nextPasswordFieldChange}
+                                value={passwordState.value}
+                                required={true}
+                                disabled={loading}
+                                autoComplete="new-password"
+                                minLength={context.authMinPasswordLength}
+                                placeholder=" "
+                                onInvalid={preventDefault}
+                                inputRef={passwordInputReference}
+                                formNoValidate={true}
+                                aria-describedby="password-input-invalid-feedback password-requirements"
+                                message={getPasswordRequirements(context)}
+                                error={passwordState.kind === 'INVALID' ? passwordState.reason : undefined}
+                            />
+                        </LoaderInput>
                     </Label>
-                    <LoaderInput
-                        className={classNames(deriveInputClassName(passwordState))}
-                        loading={passwordState.kind === 'LOADING'}
-                    >
-                        <PasswordInput
-                            className={deriveInputClassName(passwordState)}
-                            onChange={nextPasswordFieldChange}
-                            value={passwordState.value}
-                            required={true}
-                            disabled={loading}
-                            autoComplete="new-password"
-                            minLength={context.authMinPasswordLength}
-                            placeholder=" "
-                            onInvalid={preventDefault}
-                            inputRef={passwordInputReference}
-                            formNoValidate={true}
-                            aria-describedby="password-input-invalid-feedback password-requirements"
-                        />
-                    </LoaderInput>
-                    {passwordState.kind === 'INVALID' && (
-                        <small className="invalid-feedback" id="password-input-invalid-feedback" role="alert">
-                            {passwordState.reason}
-                        </small>
-                    )}
-                    <small className="form-help text-muted" id="password-requirements">
-                        {getPasswordRequirements(context)}
-                    </small>
                 </div>
                 <div className="form-group mb-0">
                     <LoaderButton
diff --git a/client/web/src/auth/SignUpPage.module.scss b/client/web/src/auth/SignUpPage.module.scss
new file mode 100644
index 000000000000..9f591d6f94a7
--- /dev/null
+++ b/client/web/src/auth/SignUpPage.module.scss
@@ -0,0 +1,3 @@
+.wrapper {
+    width: 27.5rem;
+}
diff --git a/client/web/src/auth/SignUpPage.story.tsx b/client/web/src/auth/SignUpPage.story.tsx
new file mode 100644
index 000000000000..8546bd85409c
--- /dev/null
+++ b/client/web/src/auth/SignUpPage.story.tsx
@@ -0,0 +1,60 @@
+import type { Meta, Story } from '@storybook/react'
+
+import { NOOP_TELEMETRY_SERVICE } from '@sourcegraph/shared/src/telemetry/telemetryService'
+
+import { WebStory } from '../components/WebStory'
+import { SourcegraphContext } from '../jscontext'
+
+import { SignUpPage } from './SignUpPage'
+
+const config: Meta = {
+    title: 'web/auth/SignUpPage',
+}
+
+export default config
+
+const authProviders: SourcegraphContext['authProviders'] = [
+    {
+        clientID: '001',
+        displayName: 'Builtin username-password authentication',
+        isBuiltin: true,
+        serviceType: 'builtin',
+        authenticationURL: '',
+        serviceID: '',
+    },
+    {
+        clientID: '002',
+        serviceType: 'github',
+        displayName: 'GitHub',
+        isBuiltin: false,
+        authenticationURL: '/.auth/github/login?pc=f00bar',
+        serviceID: 'https://github.com',
+    },
+    {
+        clientID: '003',
+        serviceType: 'gitlab',
+        displayName: 'GitLab',
+        isBuiltin: false,
+        authenticationURL: '/.auth/gitlab/login?pc=f00bar',
+        serviceID: 'https://gitlab.com',
+    },
+]
+
+export const Default: Story = () => (
+    <WebStory>
+        {() => (
+            <SignUpPage
+                telemetryService={NOOP_TELEMETRY_SERVICE}
+                context={{
+                    authProviders,
+                    xhrHeaders: {},
+                    allowSignup: true,
+                    authMinPasswordLength: 12,
+                    authPasswordPolicy: {},
+                    sourcegraphDotComMode: false,
+                }}
+                authenticatedUser={null}
+            />
+        )}
+    </WebStory>
+)
diff --git a/client/web/src/auth/SignUpPage.tsx b/client/web/src/auth/SignUpPage.tsx
index e6ba84d5e88d..e57768659a6e 100644
--- a/client/web/src/auth/SignUpPage.tsx
+++ b/client/web/src/auth/SignUpPage.tsx
@@ -1,26 +1,24 @@
 import React, { useEffect } from 'react'
 
-import classNames from 'classnames'
 import { Navigate, useLocation } from 'react-router-dom'
 
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
-import { Link, Text } from '@sourcegraph/wildcard'
+import { Container, Link, Text } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../auth'
-import { HeroPage } from '../components/HeroPage'
 import { PageTitle } from '../components/PageTitle'
 import type { SourcegraphContext } from '../jscontext'
 import { PageRoutes } from '../routes.constants'
 import { eventLogger } from '../tracking/eventLogger'
 
+import { AuthPageWrapper } from './AuthPageWrapper'
 import { CloudSignUpPage, ShowEmailFormQueryParameter } from './CloudSignUpPage'
-import { SourcegraphIcon } from './icons'
 import { getReturnTo } from './SignInSignUpCommon'
 import { type SignUpArguments, SignUpForm } from './SignUpForm'
 import { VsCodeSignUpPage } from './VsCodeSignUpPage'
 
-import signInSignUpCommonStyles from './SignInSignUpCommon.module.scss'
+import styles from './SignUpPage.module.scss'
 
 export interface SignUpPageProps extends TelemetryProps {
     authenticatedUser: AuthenticatedUser | null
@@ -93,7 +91,6 @@ export const SignUpPage: React.FunctionComponent<React.PropsWithChildren<SignUpP
             <VsCodeSignUpPage
                 source={query.get('src')}
                 onSignUp={handleSignUp}
-                isLightTheme={isLightTheme}
                 showEmailForm={query.has(ShowEmailFormQueryParameter)}
                 context={context}
                 telemetryService={telemetryService}
@@ -116,26 +113,24 @@ export const SignUpPage: React.FunctionComponent<React.PropsWithChildren<SignUpP
     }
 
     return (
-        <div className={signInSignUpCommonStyles.signinSignupPage}>
+        <>
             <PageTitle title="Sign up" />
-            <HeroPage
-                icon={SourcegraphIcon}
-                iconLinkTo={context.sourcegraphDotComMode ? '/search' : undefined}
-                iconClassName="bg-transparent"
-                title={context.sourcegraphDotComMode ? 'Sign up for Sourcegraph.com' : 'Sign up for Sourcegraph Server'}
-                lessPadding={true}
-                body={
-                    <div className={classNames('pb-5', signInSignUpCommonStyles.signupPageContainer)}>
-                        {context.sourcegraphDotComMode && (
-                            <Text className="pt-1 pb-2">Start searching public code now</Text>
-                        )}
-                        <SignUpForm context={context} onSignUp={handleSignUp} />
-                        <Text className="mt-3">
-                            Already have an account? <Link to={`/sign-in${location.search}`}>Sign in</Link>
-                        </Text>
-                    </div>
+            <AuthPageWrapper
+                title="Welcome to Sourcegraph"
+                description={
+                    context.sourcegraphDotComMode ? 'Sign up for Sourcegraph.com' : 'Sign up for Sourcegraph Server'
                 }
-            />
-        </div>
+                sourcegraphDotComMode={context.sourcegraphDotComMode}
+                className={styles.wrapper}
+            >
+                {context.sourcegraphDotComMode && <Text className="pt-1 pb-2">Start searching public code now</Text>}
+                <Container>
+                    <SignUpForm context={context} onSignUp={handleSignUp} />
+                </Container>
+                <Text className="text-center mt-3">
+                    Already have an account? <Link to={`/sign-in${location.search}`}>Sign in</Link>
+                </Text>
+            </AuthPageWrapper>
+        </>
     )
 }
diff --git a/client/web/src/auth/SignupEmailField.tsx b/client/web/src/auth/SignupEmailField.tsx
index cc568e74550b..a6da54b2fc0b 100644
--- a/client/web/src/auth/SignupEmailField.tsx
+++ b/client/web/src/auth/SignupEmailField.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 
-import classNames from 'classnames'
-
 import { deriveInputClassName, type InputValidationState } from '@sourcegraph/shared/src/util/useInputValidation'
-import { Label, LoaderInput } from '@sourcegraph/wildcard'
+import { LoaderInput } from '@sourcegraph/wildcard'
 
 import { EmailInput } from './SignInSignUpCommon'
 
@@ -22,15 +20,7 @@ export const SignupEmailField: React.FunctionComponent<React.PropsWithChildren<S
     nextEmailFieldChange,
     emailInputReference,
 }) => (
-    <div className="form-group d-flex flex-column align-content-start">
-        <Label
-            htmlFor="email"
-            className={classNames('align-self-start', {
-                'text-danger font-weight-bold': emailState.kind === 'INVALID',
-            })}
-        >
-            {label}
-        </Label>
+    <div className="form-group">
         <LoaderInput className={deriveInputClassName(emailState)} loading={emailState.kind === 'LOADING'}>
             <EmailInput
                 className={deriveInputClassName(emailState)}
@@ -42,12 +32,9 @@ export const SignupEmailField: React.FunctionComponent<React.PropsWithChildren<S
                 placeholder=" "
                 inputRef={emailInputReference}
                 aria-describedby="email-input-invalid-feedback"
+                error={emailState.kind === 'INVALID' ? emailState.reason : undefined}
+                label={label}
             />
         </LoaderInput>
-        {emailState.kind === 'INVALID' && (
-            <small className="invalid-feedback" id="email-input-invalid-feedback">
-                {emailState.reason}
-            </small>
-        )}
     </div>
 )
diff --git a/client/web/src/auth/UnlockAccount.module.scss b/client/web/src/auth/UnlockAccount.module.scss
new file mode 100644
index 000000000000..8115b4ba8dab
--- /dev/null
+++ b/client/web/src/auth/UnlockAccount.module.scss
@@ -0,0 +1,3 @@
+.wrapper {
+    width: 20rem;
+}
diff --git a/client/web/src/auth/UnlockAccount.story.tsx b/client/web/src/auth/UnlockAccount.story.tsx
new file mode 100644
index 000000000000..46327990b8b4
--- /dev/null
+++ b/client/web/src/auth/UnlockAccount.story.tsx
@@ -0,0 +1,57 @@
+import type { Meta, Story } from '@storybook/react'
+
+import { WebStory } from '../components/WebStory'
+import { SourcegraphContext } from '../jscontext'
+
+import { UnlockAccountPage } from './UnlockAccount'
+
+const config: Meta = {
+    title: 'web/auth/UnlockAccountPage',
+}
+
+export default config
+
+const authProviders: SourcegraphContext['authProviders'] = [
+    {
+        clientID: '001',
+        displayName: 'Builtin username-password authentication',
+        isBuiltin: true,
+        serviceType: 'builtin',
+        authenticationURL: '',
+        serviceID: '',
+    },
+    {
+        clientID: '002',
+        serviceType: 'github',
+        displayName: 'GitHub',
+        isBuiltin: false,
+        authenticationURL: '/.auth/github/login?pc=f00bar',
+        serviceID: 'https://github.com',
+    },
+    {
+        clientID: '003',
+        serviceType: 'gitlab',
+        displayName: 'GitLab',
+        isBuiltin: false,
+        authenticationURL: '/.auth/gitlab/login?pc=f00bar',
+        serviceID: 'https://gitlab.com',
+    },
+]
+
+export const Default: Story = () => (
+    <WebStory>
+        {() => (
+            <UnlockAccountPage
+                context={{
+                    authProviders,
+                    xhrHeaders: {},
+                    allowSignup: true,
+                    sourcegraphDotComMode: false,
+                    resetPasswordEnabled: true,
+                }}
+                mockSuccess={true}
+                authenticatedUser={null}
+            />
+        )}
+    </WebStory>
+)
diff --git a/client/web/src/auth/UnlockAccount.tsx b/client/web/src/auth/UnlockAccount.tsx
index ee2848e91e2f..2dee45cba709 100644
--- a/client/web/src/auth/UnlockAccount.tsx
+++ b/client/web/src/auth/UnlockAccount.tsx
@@ -2,18 +2,17 @@ import React, { useEffect, useState } from 'react'
 
 import { Navigate, useLocation, useParams } from 'react-router-dom'
 
-import { Alert, Link, LoadingSpinner, ErrorAlert } from '@sourcegraph/wildcard'
+import { Alert, Link, LoadingSpinner, ErrorAlert, Container } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../auth'
-import { HeroPage } from '../components/HeroPage'
 import { PageTitle } from '../components/PageTitle'
 import type { SourcegraphContext } from '../jscontext'
 import { eventLogger } from '../tracking/eventLogger'
 
-import { SourcegraphIcon } from './icons'
+import { AuthPageWrapper } from './AuthPageWrapper'
 import { getReturnTo } from './SignInSignUpCommon'
 
-import unlockAccountStyles from './SignInSignUpCommon.module.scss'
+import styles from './UnlockAccount.module.scss'
 
 interface UnlockAccountPageProps {
     authenticatedUser: AuthenticatedUser | null
@@ -21,6 +20,8 @@ interface UnlockAccountPageProps {
         SourcegraphContext,
         'allowSignup' | 'authProviders' | 'sourcegraphDotComMode' | 'xhrHeaders' | 'resetPasswordEnabled'
     >
+    /** Used for testing only. */
+    mockSuccess?: boolean
 }
 
 export const UnlockAccountPage: React.FunctionComponent<React.PropsWithChildren<UnlockAccountPageProps>> = props => {
@@ -74,35 +75,30 @@ export const UnlockAccountPage: React.FunctionComponent<React.PropsWithChildren<
         return <Navigate to={returnTo} replace={true} />
     }
 
-    const body = (
-        <div>
-            {loading && <LoadingSpinner />}
-            {error && <ErrorAlert className="mt-2" error={error} />}
-            {!loading && !error && (
-                <>
-                    <Alert variant="success">
-                        Your account was unlocked. Please try to <Link to="/sign-in">sign in</Link> to continue.
-                    </Alert>
-                </>
-            )}
-        </div>
-    )
-
     return (
-        <div className={unlockAccountStyles.signinSignupPage}>
+        <>
             <PageTitle title="Unlock account" />
-            <HeroPage
-                icon={SourcegraphIcon}
-                iconLinkTo={props.context.sourcegraphDotComMode ? '/search' : undefined}
-                iconClassName="bg-transparent"
-                lessPadding={true}
+            <AuthPageWrapper
                 title={
                     props.context.sourcegraphDotComMode
                         ? 'Unlock your Sourcegraph.com account'
                         : 'Unlock your Sourcegraph Server account'
                 }
-                body={body}
-            />
-        </div>
+                sourcegraphDotComMode={props.context.sourcegraphDotComMode}
+                className={styles.wrapper}
+            >
+                <Container>
+                    {!props.mockSuccess && loading && <LoadingSpinner />}
+                    {!props.mockSuccess && error && <ErrorAlert className="mb-0" error={error} />}
+                    {((!loading && !error) || props.mockSuccess) && (
+                        <>
+                            <Alert variant="success" className="mb-0">
+                                Your account was unlocked. Please try to <Link to="/sign-in">sign in</Link> to continue.
+                            </Alert>
+                        </>
+                    )}
+                </Container>
+            </AuthPageWrapper>
+        </>
     )
 }
diff --git a/client/web/src/auth/VsCodeSignUpPage.story.tsx b/client/web/src/auth/VsCodeSignUpPage.story.tsx
new file mode 100644
index 000000000000..443c2d70fa8c
--- /dev/null
+++ b/client/web/src/auth/VsCodeSignUpPage.story.tsx
@@ -0,0 +1,74 @@
+import type { Meta, Story } from '@storybook/react'
+
+import { NOOP_TELEMETRY_SERVICE } from '@sourcegraph/shared/src/telemetry/telemetryService'
+
+import { WebStory } from '../components/WebStory'
+import type { SourcegraphContext } from '../jscontext'
+
+import { VsCodeSignUpPage, VsCodeSignUpPageProps } from './VsCodeSignUpPage'
+
+const config: Meta = {
+    title: 'web/auth/VsCodeSignUpPage',
+}
+
+export default config
+
+const authProviders: SourcegraphContext['authProviders'] = [
+    {
+        clientID: '001',
+        displayName: 'Builtin username-password authentication',
+        isBuiltin: true,
+        serviceType: 'builtin',
+        authenticationURL: '',
+        serviceID: '',
+    },
+    {
+        clientID: '002',
+        serviceType: 'github',
+        displayName: 'GitHub',
+        isBuiltin: false,
+        authenticationURL: '/.auth/github/login?pc=f00bar',
+        serviceID: 'https://github.com',
+    },
+    {
+        clientID: '003',
+        serviceType: 'gitlab',
+        displayName: 'GitLab',
+        isBuiltin: false,
+        authenticationURL: '/.auth/gitlab/login?pc=f00bar',
+        serviceID: 'https://gitlab.com',
+    },
+]
+
+const context: VsCodeSignUpPageProps['context'] = {
+    authProviders,
+    authMinPasswordLength: 12,
+}
+
+export const WithoutEmailForm: Story = () => (
+    <WebStory>
+        {() => (
+            <VsCodeSignUpPage
+                onSignUp={async () => {}}
+                showEmailForm={false}
+                source="test"
+                telemetryService={NOOP_TELEMETRY_SERVICE}
+                context={context}
+            />
+        )}
+    </WebStory>
+)
+
+export const WithEmailForm: Story = () => (
+    <WebStory>
+        {() => (
+            <VsCodeSignUpPage
+                onSignUp={async () => {}}
+                showEmailForm={true}
+                source="test"
+                telemetryService={NOOP_TELEMETRY_SERVICE}
+                context={context}
+            />
+        )}
+    </WebStory>
+)
diff --git a/client/web/src/auth/VsCodeSignUpPage.tsx b/client/web/src/auth/VsCodeSignUpPage.tsx
index edfd170cc2b8..1047a382a502 100644
--- a/client/web/src/auth/VsCodeSignUpPage.tsx
+++ b/client/web/src/auth/VsCodeSignUpPage.tsx
@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { useLocation } from 'react-router-dom'
 
 import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
+import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
 import { Link, Icon, H2 } from '@sourcegraph/wildcard'
 
 import { BrandLogo } from '../components/branding/BrandLogo'
@@ -16,13 +17,13 @@ import { type SignUpArguments, SignUpForm } from './SignUpForm'
 import styles from './VsCodeSignUpPage.module.scss'
 
 export const ShowEmailFormQueryParameter = 'showEmail'
-interface Props extends TelemetryProps {
+
+export interface VsCodeSignUpPageProps extends TelemetryProps {
     source: string | null
     showEmailForm: boolean
     /** Called to perform the signup on the server. */
     onSignUp: (args: SignUpArguments) => Promise<void>
     context: Pick<SourcegraphContext, 'authProviders' | 'authMinPasswordLength'>
-    isLightTheme: boolean
 }
 
 const VSCodeIcon: React.FC = () => (
@@ -37,13 +38,13 @@ const VSCodeIcon: React.FC = () => (
 /**
  * Sign up page specifically from users via our VS Code integration
  */
-export const VsCodeSignUpPage: React.FunctionComponent<React.PropsWithChildren<Props>> = ({
-    isLightTheme,
+export const VsCodeSignUpPage: React.FunctionComponent<React.PropsWithChildren<VsCodeSignUpPageProps>> = ({
     showEmailForm,
     onSignUp,
     context,
     telemetryService,
 }) => {
+    const isLightTheme = useIsLightTheme()
     const location = useLocation()
 
     const queryWithUseEmailToggled = new URLSearchParams(location.search)
diff --git a/client/web/src/auth/components/ExternalsAuth.module.scss b/client/web/src/auth/components/ExternalsAuth.module.scss
index 5922d132fb41..fe3d7dc098d4 100644
--- a/client/web/src/auth/components/ExternalsAuth.module.scss
+++ b/client/web/src/auth/components/ExternalsAuth.module.scss
@@ -34,3 +34,16 @@
         color: var(--white);
     }
 }
+
+.google-button {
+    background-color: var(--primary);
+    margin-bottom: 1rem;
+
+    :global(.theme-dark) & {
+        color: var(--gray-04);
+    }
+
+    :global(.theme-light) & {
+        color: var(--white);
+    }
+}
diff --git a/client/web/src/auth/components/ExternalsAuth.tsx b/client/web/src/auth/components/ExternalsAuth.tsx
index cc0cdea8b117..c5edbca432ae 100644
--- a/client/web/src/auth/components/ExternalsAuth.tsx
+++ b/client/web/src/auth/components/ExternalsAuth.tsx
@@ -15,7 +15,6 @@ interface ExternalsAuthProps {
     googleLabel: string
     onClick: (type: AuthProvider['serviceType']) => void
     withCenteredText?: boolean
-    ctaClassName?: string
     iconClassName?: string
     redirect?: string
 }
@@ -129,7 +128,6 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
     googleLabel,
     onClick,
     withCenteredText,
-    ctaClassName,
     iconClassName,
     redirect,
 }) => {
@@ -162,8 +160,7 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
                         'text-decoration-none',
                         withCenteredText && 'd-flex justify-content-center',
                         styles.signUpButton,
-                        styles.githubButton,
-                        ctaClassName
+                        styles.githubButton
                     )}
                     onClick={() => onClick('github')}
                 >
@@ -184,8 +181,7 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
                         'text-decoration-none',
                         withCenteredText && 'd-flex justify-content-center',
                         styles.signUpButton,
-                        styles.gitlabButton,
-                        ctaClassName
+                        styles.gitlabButton
                     )}
                     onClick={() => onClick('gitlab')}
                 >
@@ -205,8 +201,7 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
                         'text-decoration-none',
                         withCenteredText && 'd-flex justify-content-center',
                         styles.signUpButton,
-                        styles.gitlabButton,
-                        ctaClassName
+                        styles.googleButton
                     )}
                     onClick={() => onClick('openidconnect')}
                 >
diff --git a/client/web/src/components/branding/BrandLogo.tsx b/client/web/src/components/branding/BrandLogo.tsx
index d51d14a780a4..b4ed937fb738 100644
--- a/client/web/src/components/branding/BrandLogo.tsx
+++ b/client/web/src/components/branding/BrandLogo.tsx
@@ -20,6 +20,9 @@ interface BrandLogoProps extends Exclude<React.ImgHTMLAttributes<HTMLImageElemen
     variant: 'logo' | 'symbol'
 
     isLightTheme: boolean
+
+    /** Whether not to add styles for the spinning effect on hover. */
+    disableSymbolSpin?: boolean
 }
 
 /**
@@ -33,6 +36,7 @@ export const BrandLogo: FC<BrandLogoProps> = props => {
         variant,
         className,
         isLightTheme,
+        disableSymbolSpin,
         ...attrs
     } = props
 
@@ -50,7 +54,7 @@ export const BrandLogo: FC<BrandLogoProps> = props => {
         <img
             {...attrs}
             className={classNames(className, {
-                [styles.brandLogoSpin]: variant === 'symbol' && !branding?.disableSymbolSpin,
+                [styles.brandLogoSpin]: variant === 'symbol' && !branding?.disableSymbolSpin && !disableSymbolSpin,
             })}
             src={customBrandingLogoUrl || sourcegraphLogoUrl}
             alt={customBrandingLogoUrl ? 'Logo' : 'Sourcegraph logo'}
diff --git a/client/web/src/site-admin/init/SiteInitPage.module.scss b/client/web/src/site-admin/init/SiteInitPage.module.scss
index e79f6b94984d..a6f18b7d8a43 100644
--- a/client/web/src/site-admin/init/SiteInitPage.module.scss
+++ b/client/web/src/site-admin/init/SiteInitPage.module.scss
@@ -1,10 +1,3 @@
-.site-init-page {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1 1 auto;
-}
-
-.content {
+.wrapper {
     width: 26rem;
 }
diff --git a/client/web/src/site-admin/init/SiteInitPage.story.tsx b/client/web/src/site-admin/init/SiteInitPage.story.tsx
new file mode 100644
index 000000000000..456b9bf0133e
--- /dev/null
+++ b/client/web/src/site-admin/init/SiteInitPage.story.tsx
@@ -0,0 +1,41 @@
+import type { Meta, Story } from '@storybook/react'
+
+import { WebStory } from '../../components/WebStory'
+
+import { SiteInitPage } from './SiteInitPage'
+
+const config: Meta = {
+    title: 'web/auth/SiteInitPage',
+}
+
+export default config
+
+export const Default: Story = () => (
+    <WebStory>
+        {() => (
+            <SiteInitPage
+                context={{
+                    authMinPasswordLength: 12,
+                    authPasswordPolicy: {},
+                }}
+                authenticatedUser={null}
+                needsSiteInit={true}
+            />
+        )}
+    </WebStory>
+)
+
+export const Authenticated: Story = () => (
+    <WebStory>
+        {() => (
+            <SiteInitPage
+                context={{
+                    authMinPasswordLength: 12,
+                    authPasswordPolicy: {},
+                }}
+                authenticatedUser={{ username: 'johndoe' }}
+                needsSiteInit={true}
+            />
+        )}
+    </WebStory>
+)
diff --git a/client/web/src/site-admin/init/SiteInitPage.test.tsx b/client/web/src/site-admin/init/SiteInitPage.test.tsx
index 7697824c30b7..b3ccc9a2456c 100644
--- a/client/web/src/site-admin/init/SiteInitPage.test.tsx
+++ b/client/web/src/site-admin/init/SiteInitPage.test.tsx
@@ -19,9 +19,7 @@ describe('SiteInitPage', () => {
                 needsSiteInit={false}
                 authenticatedUser={null}
                 context={{
-                    authProviders: [],
-                    sourcegraphDotComMode: false,
-                    experimentalFeatures: {},
+                    authPasswordPolicy: {},
                     authMinPasswordLength: 12,
                 }}
             />,
@@ -38,9 +36,7 @@ describe('SiteInitPage', () => {
                     needsSiteInit={true}
                     authenticatedUser={{ username: 'alice' }}
                     context={{
-                        authProviders: [],
-                        sourcegraphDotComMode: false,
-                        experimentalFeatures: {},
+                        authPasswordPolicy: {},
                         authMinPasswordLength: 12,
                     }}
                 />
@@ -54,9 +50,7 @@ describe('SiteInitPage', () => {
                     needsSiteInit={true}
                     authenticatedUser={null}
                     context={{
-                        authProviders: [],
-                        sourcegraphDotComMode: false,
-                        experimentalFeatures: {},
+                        authPasswordPolicy: {},
                         authMinPasswordLength: 12,
                     }}
                 />
diff --git a/client/web/src/site-admin/init/SiteInitPage.tsx b/client/web/src/site-admin/init/SiteInitPage.tsx
index 00fbfaafbe2c..fb148f04b19e 100644
--- a/client/web/src/site-admin/init/SiteInitPage.tsx
+++ b/client/web/src/site-admin/init/SiteInitPage.tsx
@@ -3,12 +3,12 @@ import React from 'react'
 import { Navigate } from 'react-router-dom'
 
 import { logger } from '@sourcegraph/common'
-import { useIsLightTheme } from '@sourcegraph/shared/src/theme'
-import { CardBody, Card, H2, Text } from '@sourcegraph/wildcard'
+import { Text, Container } from '@sourcegraph/wildcard'
 
 import type { AuthenticatedUser } from '../../auth'
+import { AuthPageWrapper } from '../../auth/AuthPageWrapper'
 import { type SignUpArguments, SignUpForm } from '../../auth/SignUpForm'
-import { BrandLogo } from '../../components/branding/BrandLogo'
+import { PageTitle } from '../../components/PageTitle'
 import type { SourcegraphContext } from '../../jscontext'
 import { PageRoutes } from '../../routes.constants'
 
@@ -51,10 +51,7 @@ interface Props {
      * `window.context.needsSiteInit` is used.
      */
     needsSiteInit?: typeof window.context.needsSiteInit
-    context: Pick<
-        SourcegraphContext,
-        'sourcegraphDotComMode' | 'authProviders' | 'experimentalFeatures' | 'authMinPasswordLength'
-    >
+    context: Pick<SourcegraphContext, 'authPasswordPolicy' | 'authMinPasswordLength'>
 }
 
 /**
@@ -66,39 +63,46 @@ export const SiteInitPage: React.FunctionComponent<React.PropsWithChildren<Props
     needsSiteInit = window.context.needsSiteInit,
     context,
 }) => {
-    const isLightTheme = useIsLightTheme()
+    // This page is never shown on dotcom, to keep the API surface
+    // of this component clean, we don't expose this option.
+    const sourcegraphDotComMode = false
 
     if (!needsSiteInit) {
         return <Navigate to={PageRoutes.Search} replace={true} />
     }
 
     return (
-        <div className={styles.siteInitPage}>
-            <Card className={styles.content}>
-                <CardBody className="p-4">
-                    <BrandLogo className="w-100 mb-3" isLightTheme={isLightTheme} variant="logo" />
-                    {authenticatedUser ? (
-                        // If there's already a user but the site is not initialized, then the we're in an
-                        // unexpected state, likely because of a previous bug or because someone manually modified
-                        // the site_config DB table.
-                        <Text>
+        <>
+            <PageTitle title="Site initialization" />
+            <AuthPageWrapper
+                title="Welcome to Sourcegraph"
+                description="Create an admin account to get started"
+                sourcegraphDotComMode={sourcegraphDotComMode}
+                className={styles.wrapper}
+            >
+                {authenticatedUser ? (
+                    // If there's already a user but the site is not initialized, then the we're in an
+                    // unexpected state, likely because of a previous bug or because someone manually modified
+                    // the site_config DB table.
+                    <Container>
+                        <Text className="mb-0">
                             You're signed in as <strong>{authenticatedUser.username}</strong>. A site admin must
                             initialize Sourcegraph before you can continue.
                         </Text>
-                    ) : (
-                        <>
-                            <H2 className="site-init-page__header">Welcome</H2>
-                            <Text>Create an admin account to start using Sourcegraph.</Text>
-                            <SignUpForm
-                                className="w-100"
-                                buttonLabel="Create admin account & continue"
-                                onSignUp={initSite}
-                                context={context}
-                            />
-                        </>
-                    )}
-                </CardBody>
-            </Card>
-        </div>
+                    </Container>
+                ) : (
+                    <Container>
+                        <SignUpForm
+                            className="w-100"
+                            buttonLabel="Create admin account and continue"
+                            onSignUp={initSite}
+                            // This page is never shown on dotcom, to keep the API surface
+                            // of this component clean, we don't expose this option.
+                            context={{ ...context, sourcegraphDotComMode, authProviders: [] }}
+                        />
+                    </Container>
+                )}
+            </AuthPageWrapper>
+        </>
     )
 }

From c9ad833cbfc0cb696952003d87266a2501232398 Mon Sep 17 00:00:00 2001
From: Erik Seliger <erikseliger@me.com>
Date: Sat, 7 Oct 2023 02:03:11 +0200
Subject: [PATCH 2/6] Fixups

---
 client/web/src/auth/AuthPageWrapper.module.scss | 1 -
 client/web/src/routes.tsx                       | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/web/src/auth/AuthPageWrapper.module.scss b/client/web/src/auth/AuthPageWrapper.module.scss
index f91244de0e83..41699fde3196 100644
--- a/client/web/src/auth/AuthPageWrapper.module.scss
+++ b/client/web/src/auth/AuthPageWrapper.module.scss
@@ -8,7 +8,6 @@
     width: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;
     margin-top: 20vh;
     flex-direction: column;
     flex: 1 1 auto;
diff --git a/client/web/src/routes.tsx b/client/web/src/routes.tsx
index 73db2a649783..bc0b98c92c94 100644
--- a/client/web/src/routes.tsx
+++ b/client/web/src/routes.tsx
@@ -119,7 +119,7 @@ export const routes: RouteObject[] = [
     },
     {
         path: PageRoutes.PasswordReset,
-        element: <LegacyRoute render={props => <ResetPasswordPage {...props} />} />,
+        element: <LegacyRoute render={props => <ResetPasswordPage {...props} context={window.context} />} />,
     },
     {
         path: PageRoutes.ApiConsole,

From c4cc7e90399a752bf7649eeb8d0c56390e2f44e6 Mon Sep 17 00:00:00 2001
From: Erik Seliger <erikseliger@me.com>
Date: Sat, 7 Oct 2023 02:04:58 +0200
Subject: [PATCH 3/6] Fixup snapshots

---
 .../RequestAccessPage.test.tsx.snap           |  206 +-
 .../__snapshots__/SignInPage.test.tsx.snap    | 2155 +++++++----------
 .../__snapshots__/SignUpPage.test.tsx.snap    |  225 +-
 .../__snapshots__/SiteInitPage.test.tsx.snap  |  220 +-
 4 files changed, 1253 insertions(+), 1553 deletions(-)

diff --git a/client/web/src/auth/__snapshots__/RequestAccessPage.test.tsx.snap b/client/web/src/auth/__snapshots__/RequestAccessPage.test.tsx.snap
index 4b9b09c4d691..6df4ce618959 100644
--- a/client/web/src/auth/__snapshots__/RequestAccessPage.test.tsx.snap
+++ b/client/web/src/auth/__snapshots__/RequestAccessPage.test.tsx.snap
@@ -3,138 +3,112 @@
 exports[`RequestAccessPage renders form if all conditions are met 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Request access to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
+        class="container"
       >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
+        <form
+          class="mb-0"
+          data-testid="request-access-form"
         >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Request access to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
-      >
-        <div
-          class="rounded p-4 my-3 signinSignupForm mt-4"
-        >
-          <form
-            class=""
-            data-testid="request-access-form"
+          <label
+            class="label label"
           >
-            <label
-              class="label w-100"
+            <div
+              class="mb-2"
+            >
+              Name
+            </div>
+            <div
+              class="container loader-input loaderInput"
             >
-              <p
-                class="alignLeft mb-2"
-              >
-                Name
-              </p>
-              <div
-                class="container loader-input loaderInput form-group"
-              >
-                <input
-                  autocapitalize="off"
-                  autocomplete="name"
-                  class="form-control with-invalid-icon"
-                  id="name"
-                  placeholder="Your name"
-                  required=""
-                  type="text"
-                  value=""
-                />
-              </div>
-            </label>
-            <label
-              class="label w-100"
+              <input
+                autocapitalize="off"
+                autocomplete="name"
+                class="form-control with-invalid-icon"
+                id="name"
+                placeholder="Your name"
+                required=""
+                type="text"
+                value=""
+              />
+            </div>
+          </label>
+          <label
+            class="label label"
+          >
+            <div
+              class="mb-2"
             >
-              <p
-                class="alignLeft mb-2"
-              >
-                Email Address
-              </p>
-              <div
-                class="container loader-input loaderInput form-group"
-              >
-                <input
-                  autocapitalize="off"
-                  autocomplete="email"
-                  class="form-control with-invalid-icon"
-                  id="email"
-                  placeholder="Your work email to get access"
-                  required=""
-                  type="text"
-                  value=""
-                />
-              </div>
-            </label>
-            <label
-              class="label w-100"
+              Email Address
+            </div>
+            <div
+              class="container loader-input loaderInput"
             >
-              <p
-                class="alignLeft mb-2"
-              >
-                Notes for administrator
-              </p>
-              <textarea
-                class="form-control textarea mb-4"
-                id="additionalInfo"
-                placeholder="Use this field to provide extra info for your access request"
+              <input
+                autocapitalize="off"
+                autocomplete="email"
+                class="form-control with-invalid-icon"
+                id="email"
+                placeholder="Your work email to get access"
+                required=""
+                type="text"
+                value=""
               />
-            </label>
+            </div>
+          </label>
+          <label
+            class="label label mb-3"
+          >
             <div
-              class="form-group"
+              class="mb-2"
             >
-              <button
-                aria-disabled="false"
-                class="btn btnPrimary btnBlock"
-                type="submit"
-              >
-                Request access
-              </button>
+              Notes for administrator
             </div>
-          </form>
-        </div>
-        <p
-          class="mt-3"
-        >
-          Already have an account? 
-          <a
-            class="anchorLink"
-            href="/sign-in"
+            <textarea
+              class="textarea form-control"
+              id="additionalInfo"
+              placeholder="Use this field to provide extra info for your access request"
+            />
+          </label>
+          <button
+            aria-disabled="false"
+            class="btn btnPrimary btnBlock d-flex justify-content-center align-items-center"
+            type="submit"
           >
-            Sign in
-          </a>
-        </p>
+            Request access
+          </button>
+        </form>
       </div>
+      <p
+        class="text-center mt-3"
+      >
+        Already have an account? 
+        <a
+          class="anchorLink"
+          href="/sign-in"
+        >
+          Sign in
+        </a>
+      </p>
     </div>
   </div>
 </DocumentFragment>
diff --git a/client/web/src/auth/__snapshots__/SignInPage.test.tsx.snap b/client/web/src/auth/__snapshots__/SignInPage.test.tsx.snap
index a613a2fc2862..c73ad98f9355 100644
--- a/client/web/src/auth/__snapshots__/SignInPage.test.tsx.snap
+++ b/client/web/src/auth/__snapshots__/SignInPage.test.tsx.snap
@@ -3,109 +3,83 @@
 exports[`SignInPage renders "Other login methods" if primary provider count is low enough 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class=""
         >
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Continue with GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Continue with GitHub
+          </a>
         </div>
-        <p
-          class=""
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
         >
-          New to Sourcegraph? 
-          <a
-            class="anchorLink"
-            href="/sign-up"
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
           >
-            Sign up.
-          </a>
-           
-        </p>
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -114,132 +88,106 @@ exports[`SignInPage renders "Other login methods" if primary provider count is l
 exports[`SignInPage renders different prefix on provider buttons 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-2"
         >
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Just login through GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Just login through GitLab
-            </a>
-          </div>
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Just login through GitHub
+          </a>
         </div>
-        <p
+        <div
           class=""
         >
-          New to Sourcegraph? 
           <a
-            class="anchorLink"
-            href="/sign-up"
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            Sign up.
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Just login through GitLab
           </a>
-           
-        </p>
+        </div>
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -248,109 +196,87 @@ exports[`SignInPage renders different prefix on provider buttons 1`] = `
 exports[`SignInPage renders non-primary auth provider if primary provider count is low enough and showMore is in the query 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-3 text-left"
         >
-          <div
-            class="mb-3 text-left"
-          >
-            <button
-              class="btn btnLink p-0 border-0 font-weight-normal"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-                />
-              </svg>
-              Back
-            </button>
-          </div>
-          <div
-            class="mb-2"
+          <button
+            class="btn btnLink p-0 border-0 font-weight-normal"
+            type="button"
           >
-            <a
-              class="anchorLink btn btnSecondary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Continue with GitLab
-            </a>
-          </div>
+              <path
+                d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+              />
+            </svg>
+            Back
+          </button>
         </div>
-        <p
+        <div
           class=""
         >
-          New to Sourcegraph? 
           <a
-            class="anchorLink"
-            href="/sign-up"
+            class="anchorLink btn btnSecondary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            Sign up.
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Continue with GitLab
           </a>
-           
-        </p>
+        </div>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -361,145 +287,114 @@ exports[`SignInPage renders redirect when user is authenticated 1`] = `<Document
 exports[`SignInPage renders sign in page (dotcom) 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <a
+      class="anchorLink"
+      href="/search"
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </a>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <a
-          aria-label="/search"
-          class="anchorLink"
-          href="/search"
-        >
-          <svg
-            aria-hidden="true"
-            class="mdi-icon iconInline icon"
-            fill="none"
-            height="64"
-            role="img"
-            viewBox="0 0 52 52"
-            width="65"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-              fill="#FF5543"
-            />
-            <path
-              d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-              fill="#A112FF"
-            />
-            <path
-              d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-              fill="#00CBEC"
-            />
-          </svg>
-        </a>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-2"
         >
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Continue with GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Continue with GitLab
-            </a>
-          </div>
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Continue with GitHub
+          </a>
         </div>
-        <p
+        <div
           class=""
         >
-          New to Sourcegraph? 
           <a
-            class="anchorLink"
-            href="/sign-up"
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            Sign up.
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Continue with GitLab
           </a>
-           To use Sourcegraph on private repositories, 
-          <a
-            class="anchorLink"
-            href="https://sourcegraph.com/get-started?t=enterprise"
+        </div>
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
           >
-            consider Sourcegraph Enterprise
-          </a>
-          .
-        </p>
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         To use Sourcegraph on private repositories, 
+        <a
+          class="anchorLink"
+          href="https://sourcegraph.com/get-started?t=enterprise"
+        >
+          consider Sourcegraph Enterprise
+        </a>
+        .
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -508,132 +403,106 @@ exports[`SignInPage renders sign in page (dotcom) 1`] = `
 exports[`SignInPage renders sign in page (server) 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-2"
         >
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Continue with GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Continue with GitLab
-            </a>
-          </div>
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Continue with GitHub
+          </a>
         </div>
-        <p
+        <div
           class=""
         >
-          New to Sourcegraph? 
           <a
-            class="anchorLink"
-            href="/sign-up"
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            Sign up.
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Continue with GitLab
           </a>
-           
-        </p>
+        </div>
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -642,161 +511,139 @@ exports[`SignInPage renders sign in page (server) 1`] = `
 exports[`SignInPage renders sign in page (server) with email form expanded 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-3 text-left"
         >
-          <div
-            class="mb-3 text-left"
+          <button
+            class="btn btnLink p-0 border-0 font-weight-normal"
+            type="button"
           >
-            <button
-              class="btn btnLink p-0 border-0 font-weight-normal"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+              />
+            </svg>
+            Back
+          </button>
+        </div>
+        <form
+          class=""
+        >
+          <label
+            class="label label form-group"
+          >
+            <div
+              class="mb-2"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
+              <p
+                class="alignLeft"
               >
-                <path
-                  d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
-                />
-              </svg>
-              Back
-            </button>
-          </div>
-          <form
-            class=""
+                Username or email
+              </p>
+            </div>
+            <div
+              class="container loader-input loaderInput"
+            >
+              <input
+                autocapitalize="off"
+                autocomplete="username"
+                class="form-control with-invalid-icon"
+                id="username-or-email"
+                required=""
+                type="text"
+                value=""
+              />
+            </div>
+          </label>
+          <div
+            class="form-group d-flex flex-column align-content-start position-relative"
           >
             <label
-              class="label label form-group"
+              class="label align-self-start"
+              for="password"
             >
-              <div
-                class="mb-2"
-              >
-                <p
-                  class="alignLeft"
-                >
-                  Username or email
-                </p>
-              </div>
-              <div
-                class="container loader-input loaderInput"
-              >
-                <input
-                  autocapitalize="off"
-                  autocomplete="username"
-                  class="form-control with-invalid-icon"
-                  id="username-or-email"
-                  required=""
-                  type="text"
-                  value=""
-                />
-              </div>
+              Password
             </label>
             <div
-              class="form-group d-flex flex-column align-content-start position-relative"
+              class="container loader-input loaderInput"
             >
-              <label
-                class="label align-self-start"
-                for="password"
-              >
-                Password
-              </label>
-              <div
-                class="container loader-input loaderInput"
-              >
-                <input
-                  autocomplete="current-password"
-                  class="form-control with-invalid-icon"
-                  id="password"
-                  name="password"
-                  placeholder=" "
-                  required=""
-                  type="password"
-                  value=""
-                />
-              </div>
-              <small
-                class="form-text text-muted align-self-end position-absolute"
-              >
-                <a
-                  class="anchorLink"
-                  href="/password-reset"
-                >
-                  Forgot password?
-                </a>
-              </small>
+              <input
+                autocomplete="current-password"
+                class="form-control with-invalid-icon"
+                id="password"
+                name="password"
+                placeholder=" "
+                required=""
+                type="password"
+                value=""
+              />
             </div>
-            <div
-              class="form-group mb-0"
+            <small
+              class="form-text text-muted align-self-end position-absolute"
             >
-              <button
-                aria-disabled="false"
-                class="btn btnPrimary btnBlock"
-                type="submit"
+              <a
+                class="anchorLink"
+                href="/password-reset"
               >
-                Sign in
-              </button>
-            </div>
-          </form>
-        </div>
-        <p
-          class=""
-        >
-          New to Sourcegraph? 
-          <a
-            class="anchorLink"
-            href="/sign-up"
+                Forgot password?
+              </a>
+            </small>
+          </div>
+          <div
+            class="form-group mb-0"
           >
-            Sign up.
-          </a>
-           
-        </p>
+            <button
+              aria-disabled="false"
+              class="btn btnPrimary btnBlock"
+              type="submit"
+            >
+              Sign in
+            </button>
+          </div>
+        </form>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -805,138 +652,116 @@ exports[`SignInPage renders sign in page (server) with email form expanded 1`] =
 exports[`SignInPage renders sign in page (server) with only builtin authProvider 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
-        <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+        <form
+          class=""
         >
-          <form
-            class=""
+          <label
+            class="label label form-group"
           >
-            <label
-              class="label label form-group"
+            <div
+              class="mb-2"
             >
-              <div
-                class="mb-2"
-              >
-                <p
-                  class="alignLeft"
-                >
-                  Username or email
-                </p>
-              </div>
-              <div
-                class="container loader-input loaderInput"
+              <p
+                class="alignLeft"
               >
-                <input
-                  autocapitalize="off"
-                  autocomplete="username"
-                  class="form-control with-invalid-icon"
-                  id="username-or-email"
-                  required=""
-                  type="text"
-                  value=""
-                />
-              </div>
-            </label>
+                Username or email
+              </p>
+            </div>
             <div
-              class="form-group d-flex flex-column align-content-start position-relative"
+              class="container loader-input loaderInput"
             >
-              <label
-                class="label align-self-start"
-                for="password"
-              >
-                Password
-              </label>
-              <div
-                class="container loader-input loaderInput"
-              >
-                <input
-                  autocomplete="current-password"
-                  class="form-control with-invalid-icon"
-                  id="password"
-                  name="password"
-                  placeholder=" "
-                  required=""
-                  type="password"
-                  value=""
-                />
-              </div>
-              <small
-                class="form-text text-muted align-self-end position-absolute"
-              >
-                <a
-                  class="anchorLink"
-                  href="/password-reset"
-                >
-                  Forgot password?
-                </a>
-              </small>
+              <input
+                autocapitalize="off"
+                autocomplete="username"
+                class="form-control with-invalid-icon"
+                id="username-or-email"
+                required=""
+                type="text"
+                value=""
+              />
             </div>
+          </label>
+          <div
+            class="form-group d-flex flex-column align-content-start position-relative"
+          >
+            <label
+              class="label align-self-start"
+              for="password"
+            >
+              Password
+            </label>
             <div
-              class="form-group mb-0"
+              class="container loader-input loaderInput"
             >
-              <button
-                aria-disabled="false"
-                class="btn btnPrimary btnBlock"
-                type="submit"
-              >
-                Sign in
-              </button>
+              <input
+                autocomplete="current-password"
+                class="form-control with-invalid-icon"
+                id="password"
+                name="password"
+                placeholder=" "
+                required=""
+                type="password"
+                value=""
+              />
             </div>
-          </form>
-        </div>
-        <p
-          class=""
-        >
-          New to Sourcegraph? 
-          <a
-            class="anchorLink"
-            href="/sign-up"
+            <small
+              class="form-text text-muted align-self-end position-absolute"
+            >
+              <a
+                class="anchorLink"
+                href="/password-reset"
+              >
+                Forgot password?
+              </a>
+            </small>
+          </div>
+          <div
+            class="form-group mb-0"
           >
-            Sign up.
-          </a>
-           
-        </p>
+            <button
+              aria-disabled="false"
+              class="btn btnPrimary btnBlock"
+              type="submit"
+            >
+              Sign in
+            </button>
+          </div>
+        </form>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -945,132 +770,106 @@ exports[`SignInPage renders sign in page (server) with only builtin authProvider
 exports[`SignInPage renders sign in page (server) with request access link 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-2"
         >
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Continue with GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Continue with GitLab
-            </a>
-          </div>
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Continue with GitHub
+          </a>
         </div>
-        <p
-          class="text-muted"
+        <div
+          class=""
         >
-          Need an account? 
           <a
-            class="anchorLink"
-            href="/request-access"
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            Request access
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Continue with GitLab
           </a>
-           or contact your site admin.
-        </p>
+        </div>
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center text-muted"
+      >
+        Need an account? 
+        <a
+          class="anchorLink"
+          href="/request-access"
+        >
+          Request access
+        </a>
+         or contact your site admin.
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -1079,132 +878,106 @@ exports[`SignInPage renders sign in page (server) with request access link 1`] =
 exports[`SignInPage with Gerrit auth provider does not render the Gerrit provider 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-2"
         >
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Continue with GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Continue with GitLab
-            </a>
-          </div>
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Continue with GitHub
+          </a>
         </div>
-        <p
+        <div
           class=""
         >
-          New to Sourcegraph? 
           <a
-            class="anchorLink"
-            href="/sign-up"
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            Sign up.
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Continue with GitLab
           </a>
-           
-        </p>
+        </div>
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -1213,132 +986,106 @@ exports[`SignInPage with Gerrit auth provider does not render the Gerrit provide
 exports[`SignInPage with Sourcegraph operator auth provider renders page with 2 providers 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-2"
         >
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Continue with GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Continue with GitLab
-            </a>
-          </div>
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Continue with GitHub
+          </a>
         </div>
-        <p
+        <div
           class=""
         >
-          New to Sourcegraph? 
           <a
-            class="anchorLink"
-            href="/sign-up"
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            Sign up.
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Continue with GitLab
           </a>
-           
-        </p>
+        </div>
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
@@ -1347,142 +1094,116 @@ exports[`SignInPage with Sourcegraph operator auth provider renders page with 2
 exports[`SignInPage with Sourcegraph operator auth provider renders page with 3 providers (url-param present) 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Sign in to Sourcegraph
+    </h1>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign in to Sourcegraph
-      </h1>
-      <div
-        class="mb-4 pb-5 signinPageContainer"
+        class="container test-signin-form"
       >
         <div
-          class="test-signin-form rounded p-4 my-3 signinSignupForm mt-4"
+          class="mb-2"
         >
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
-                />
-              </svg>
-               Continue with GitHub
-            </a>
-          </div>
-          <div
-            class="mb-2"
-          >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
-            >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
-                />
-              </svg>
-               Continue with GitLab
-            </a>
-          </div>
-          <div
-            class="mb-2"
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <a
-              class="anchorLink btn btnPrimary btnBlock"
-              href="http://localhost/?returnTo=%2Fsearch"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-               Continue with Sourcegraph Operators
-            </a>
-          </div>
-          <div
-            class="mb-2"
+              <path
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+             Continue with GitHub
+          </a>
+        </div>
+        <div
+          class="mb-2"
+        >
+          <a
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/.auth/gitlab/login?pc=f00bar&returnTo=%2Fsearch"
           >
-            <button
-              class="btn btnSecondary btnBlock"
-              type="button"
+            <svg
+              aria-hidden="true"
+              class="mdi-icon iconInline"
+              fill="currentColor"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
             >
-              <svg
-                aria-hidden="true"
-                class="mdi-icon iconInline"
-                fill="currentColor"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
-                />
-              </svg>
-               Other login methods
-            </button>
-          </div>
+              <path
+                d="M21.94 13.11L20.89 9.89C20.89 9.86 20.88 9.83 20.87 9.8L18.76 3.32C18.65 3 18.33 2.75 17.96 2.75C17.6 2.75 17.28 3 17.17 3.33L15.17 9.5H8.84L6.83 3.33C6.72 3 6.4 2.75 6.04 2.75H6.04C5.67 2.75 5.35 3 5.24 3.33L3.13 9.82C3.13 9.82 3.13 9.83 3.13 9.83L2.06 13.11C1.9 13.61 2.07 14.15 2.5 14.45L11.72 21.16C11.89 21.28 12.11 21.28 12.28 21.15L21.5 14.45C21.93 14.15 22.1 13.61 21.94 13.11M8.15 10.45L10.72 18.36L4.55 10.45M13.28 18.37L15.75 10.78L15.85 10.45H19.46L13.87 17.61M17.97 3.94L19.78 9.5H16.16M14.86 10.45L13.07 15.96L12 19.24L9.14 10.45M6.03 3.94L7.84 9.5H4.23M3.05 13.69C2.96 13.62 2.92 13.5 2.96 13.4L3.75 10.97L9.57 18.42M20.95 13.69L14.44 18.42L14.46 18.39L20.25 10.97L21.04 13.4C21.08 13.5 21.04 13.62 20.95 13.69"
+              />
+            </svg>
+             Continue with GitLab
+          </a>
         </div>
-        <p
+        <div
           class=""
         >
-          New to Sourcegraph? 
           <a
-            class="anchorLink"
-            href="/sign-up"
+            class="anchorLink btn btnPrimary btnBlock"
+            href="http://localhost/?returnTo=%2Fsearch"
           >
-            Sign up.
+             Continue with Sourcegraph Operators
           </a>
-           
-        </p>
+        </div>
+        <button
+          class="btn btnSecondary btnBlock mt-2"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="mdi-icon iconInline"
+            fill="currentColor"
+            height="24"
+            role="img"
+            viewBox="0 0 24 24"
+            width="24"
+          >
+            <path
+              d="M22,18V22H18V19H15V16H12L9.74,13.74C9.19,13.91 8.61,14 8,14A6,6 0 0,1 2,8A6,6 0 0,1 8,2A6,6 0 0,1 14,8C14,8.61 13.91,9.19 13.74,9.74L22,18M7,5A2,2 0 0,0 5,7A2,2 0 0,0 7,9A2,2 0 0,0 9,7A2,2 0 0,0 7,5Z"
+            />
+          </svg>
+           Other login methods
+        </button>
       </div>
+      <p
+        class="mt-3 text-center"
+      >
+        New to Sourcegraph? 
+        <a
+          class="anchorLink"
+          href="/sign-up"
+        >
+          Sign up
+        </a>
+         
+      </p>
     </div>
   </div>
 </DocumentFragment>
diff --git a/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap b/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap
index d2adc91e05d1..4bc5e55c71ec 100644
--- a/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap
+++ b/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap
@@ -195,149 +195,136 @@ exports[`SignUpPage renders sign up page (cloud) 1`] = `
 exports[`SignUpPage renders sign up page (server) 1`] = `
 <DocumentFragment>
   <div
-    class="signinSignupPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Welcome to Sourcegraph
+    </h1>
+    <p
+      class="text-muted"
+    >
+      Sign up for Sourcegraph Server
+    </p>
     <div
-      class="heroPage lessPadding"
+      class="wrapper"
     >
       <div
-        class="iconWrapper bg-transparent"
-      >
-        <svg
-          aria-hidden="true"
-          class="mdi-icon iconInline icon"
-          fill="none"
-          height="64"
-          role="img"
-          viewBox="0 0 52 52"
-          width="65"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M30.8 51.8c-2.8.5-5.5-1.3-6-4.1L17.2 6.2c-.5-2.8 1.3-5.5 4.1-6s5.5 1.3 6 4.1l7.6 41.5c.5 2.8-1.4 5.5-4.1 6z"
-            fill="#FF5543"
-          />
-          <path
-            d="M10.9 44.7C9.1 45 7.3 44.4 6 43c-1.8-2.2-1.6-5.4.6-7.2L38.7 8.5c2.2-1.8 5.4-1.6 7.2.6 1.8 2.2 1.6 5.4-.6 7.2l-32 27.3c-.7.6-1.6 1-2.4 1.1z"
-            fill="#A112FF"
-          />
-          <path
-            d="M46.8 38.1c-.9.2-1.8.1-2.6-.2L4.4 23.8c-2.7-1-4.1-3.9-3.1-6.6 1-2.7 3.9-4.1 6.6-3.1l39.7 14.1c2.7 1 4.1 3.9 3.1 6.6-.6 1.8-2.2 3-3.9 3.3z"
-            fill="#00CBEC"
-          />
-        </svg>
-      </div>
-      <h1
-        class="h1 title"
-      >
-        Sign up for Sourcegraph Server
-      </h1>
-      <div
-        class="pb-5 signupPageContainer"
+        class="container"
       >
         <form
-          class="signinSignupForm test-signup-form rounded p-4 text-left mt-4"
+          class="test-signup-form"
           novalidate=""
         >
           <div
-            class="form-group d-flex flex-column align-content-start"
+            class="form-group"
           >
-            <label
-              class="label align-self-start"
-              for="email"
-            >
-              Email
-            </label>
             <div
               class="container"
             >
-              <div
-                class="container loader-input loaderInput"
+              <label
+                class="label label"
               >
-                <input
-                  aria-describedby="email-input-invalid-feedback"
-                  autocomplete="email"
-                  class="form-control with-invalid-icon"
-                  id="email"
-                  name="email"
-                  placeholder=" "
-                  required=""
-                  spellcheck="false"
-                  type="email"
-                  value=""
-                />
-              </div>
+                <div
+                  class="mb-2"
+                >
+                  Email
+                </div>
+                <div
+                  class="container loader-input loaderInput"
+                >
+                  <input
+                    aria-describedby="email-input-invalid-feedback"
+                    autocomplete="email"
+                    class="form-control with-invalid-icon"
+                    id="email"
+                    name="email"
+                    placeholder=" "
+                    required=""
+                    spellcheck="false"
+                    type="email"
+                    value=""
+                  />
+                </div>
+              </label>
             </div>
           </div>
           <div
             class="form-group d-flex flex-column align-content-start"
           >
             <label
-              class="label align-self-start"
-              for="username"
+              class="label"
             >
               Username
-            </label>
-            <div
-              class="container"
-            >
               <div
-                class="container loader-input loaderInput"
+                class="container"
               >
-                <input
-                  aria-describedby="username-input-invalid-feedback"
-                  autocapitalize="off"
-                  autocomplete="username"
-                  class="form-control with-invalid-icon"
-                  id="username"
-                  maxlength="255"
-                  name="username"
-                  pattern="^\\\\w(?:\\\\w|[.\\\\-](?=\\\\w))*-?$"
-                  placeholder=" "
-                  required=""
-                  spellcheck="false"
-                  type="text"
-                  value=""
-                />
+                <div
+                  class="container loader-input loaderInput"
+                >
+                  <input
+                    aria-describedby="username-input-invalid-feedback"
+                    autocapitalize="off"
+                    autocomplete="username"
+                    class="form-control with-invalid-icon"
+                    id="username"
+                    maxlength="255"
+                    name="username"
+                    pattern="^\\\\w(?:\\\\w|[.\\\\-](?=\\\\w))*-?$"
+                    placeholder=" "
+                    required=""
+                    spellcheck="false"
+                    type="text"
+                    value=""
+                  />
+                </div>
               </div>
-            </div>
+            </label>
           </div>
           <div
             class="form-group d-flex flex-column align-content-start"
           >
             <label
-              class="label align-self-start"
-              for="password"
+              class="label"
             >
               Password
-            </label>
-            <div
-              class="container"
-            >
               <div
-                class="container loader-input loaderInput"
+                class="container"
               >
-                <input
-                  aria-describedby="password-input-invalid-feedback password-requirements"
-                  autocomplete="new-password"
-                  class="form-control with-invalid-icon"
-                  formnovalidate=""
-                  id="password"
-                  minlength="12"
-                  name="password"
-                  placeholder=" "
-                  required=""
-                  type="password"
-                  value=""
-                />
+                <div
+                  class="container loader-input loaderInput"
+                >
+                  <input
+                    aria-describedby="password-input-invalid-feedback password-requirements"
+                    autocomplete="new-password"
+                    class="form-control with-invalid-icon"
+                    formnovalidate=""
+                    id="password"
+                    minlength="12"
+                    name="password"
+                    placeholder=" "
+                    required=""
+                    type="password"
+                    value=""
+                  />
+                </div>
+                <small
+                  class="text-muted form-text font-weight-normal descriptionBlock mt-2"
+                >
+                  At least 12 characters
+                </small>
               </div>
-            </div>
-            <small
-              class="form-help text-muted"
-              id="password-requirements"
-            >
-              At least 12 characters
-            </small>
+            </label>
           </div>
           <div
             class="form-group mb-0"
@@ -378,18 +365,18 @@ exports[`SignUpPage renders sign up page (server) 1`] = `
             </small>
           </p>
         </form>
-        <p
-          class="mt-3"
-        >
-          Already have an account? 
-          <a
-            class="anchorLink"
-            href="/sign-in"
-          >
-            Sign in
-          </a>
-        </p>
       </div>
+      <p
+        class="text-center mt-3"
+      >
+        Already have an account? 
+        <a
+          class="anchorLink"
+          href="/sign-in"
+        >
+          Sign in
+        </a>
+      </p>
     </div>
   </div>
 </DocumentFragment>
diff --git a/client/web/src/site-admin/init/__snapshots__/SiteInitPage.test.tsx.snap b/client/web/src/site-admin/init/__snapshots__/SiteInitPage.test.tsx.snap
index a4843fd24b4d..6ab5570a1b29 100644
--- a/client/web/src/site-admin/init/__snapshots__/SiteInitPage.test.tsx.snap
+++ b/client/web/src/site-admin/init/__snapshots__/SiteInitPage.test.tsx.snap
@@ -3,132 +3,136 @@
 exports[`SiteInitPage normal 1`] = `
 <DocumentFragment>
   <div
-    class="siteInitPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Welcome to Sourcegraph
+    </h1>
+    <p
+      class="text-muted"
+    >
+      Create an admin account to get started
+    </p>
     <div
-      class="card content"
+      class="wrapper"
     >
       <div
-        class="cardBody p-4"
+        class="container"
       >
-        <img
-          alt="Sourcegraph logo"
-          class="w-100 mb-3"
-          src="/img/sourcegraph-logo-light.svg"
-        />
-        <h2
-          class="h2 site-init-page__header"
-        >
-          Welcome
-        </h2>
-        <p
-          class=""
-        >
-          Create an admin account to start using Sourcegraph.
-        </p>
         <form
-          class="signinSignupForm test-signup-form rounded p-4 text-left mt-4 w-100"
+          class="test-signup-form w-100"
           novalidate=""
         >
           <div
-            class="form-group d-flex flex-column align-content-start"
+            class="form-group"
           >
-            <label
-              class="label align-self-start"
-              for="email"
-            >
-              Email
-            </label>
             <div
               class="container"
             >
-              <div
-                class="container loader-input loaderInput"
+              <label
+                class="label label"
               >
-                <input
-                  aria-describedby="email-input-invalid-feedback"
-                  autocomplete="email"
-                  class="form-control with-invalid-icon"
-                  id="email"
-                  name="email"
-                  placeholder=" "
-                  required=""
-                  spellcheck="false"
-                  type="email"
-                  value=""
-                />
-              </div>
+                <div
+                  class="mb-2"
+                >
+                  Email
+                </div>
+                <div
+                  class="container loader-input loaderInput"
+                >
+                  <input
+                    aria-describedby="email-input-invalid-feedback"
+                    autocomplete="email"
+                    class="form-control with-invalid-icon"
+                    id="email"
+                    name="email"
+                    placeholder=" "
+                    required=""
+                    spellcheck="false"
+                    type="email"
+                    value=""
+                  />
+                </div>
+              </label>
             </div>
           </div>
           <div
             class="form-group d-flex flex-column align-content-start"
           >
             <label
-              class="label align-self-start"
-              for="username"
+              class="label"
             >
               Username
-            </label>
-            <div
-              class="container"
-            >
               <div
-                class="container loader-input loaderInput"
+                class="container"
               >
-                <input
-                  aria-describedby="username-input-invalid-feedback"
-                  autocapitalize="off"
-                  autocomplete="username"
-                  class="form-control with-invalid-icon"
-                  id="username"
-                  maxlength="255"
-                  name="username"
-                  pattern="^\\\\w(?:\\\\w|[.\\\\-](?=\\\\w))*-?$"
-                  placeholder=" "
-                  required=""
-                  spellcheck="false"
-                  type="text"
-                  value=""
-                />
+                <div
+                  class="container loader-input loaderInput"
+                >
+                  <input
+                    aria-describedby="username-input-invalid-feedback"
+                    autocapitalize="off"
+                    autocomplete="username"
+                    class="form-control with-invalid-icon"
+                    id="username"
+                    maxlength="255"
+                    name="username"
+                    pattern="^\\\\w(?:\\\\w|[.\\\\-](?=\\\\w))*-?$"
+                    placeholder=" "
+                    required=""
+                    spellcheck="false"
+                    type="text"
+                    value=""
+                  />
+                </div>
               </div>
-            </div>
+            </label>
           </div>
           <div
             class="form-group d-flex flex-column align-content-start"
           >
             <label
-              class="label align-self-start"
-              for="password"
+              class="label"
             >
               Password
-            </label>
-            <div
-              class="container"
-            >
               <div
-                class="container loader-input loaderInput"
+                class="container"
               >
-                <input
-                  aria-describedby="password-input-invalid-feedback password-requirements"
-                  autocomplete="new-password"
-                  class="form-control with-invalid-icon"
-                  formnovalidate=""
-                  id="password"
-                  minlength="12"
-                  name="password"
-                  placeholder=" "
-                  required=""
-                  type="password"
-                  value=""
-                />
+                <div
+                  class="container loader-input loaderInput"
+                >
+                  <input
+                    aria-describedby="password-input-invalid-feedback password-requirements"
+                    autocomplete="new-password"
+                    class="form-control with-invalid-icon"
+                    formnovalidate=""
+                    id="password"
+                    minlength="12"
+                    name="password"
+                    placeholder=" "
+                    required=""
+                    type="password"
+                    value=""
+                  />
+                </div>
+                <small
+                  class="text-muted form-text font-weight-normal descriptionBlock mt-2"
+                >
+                  At least 12 characters
+                </small>
               </div>
-            </div>
-            <small
-              class="form-help text-muted"
-              id="password-requirements"
-            >
-              At least 12 characters
-            </small>
+            </label>
           </div>
           <div
             class="form-group mb-0"
@@ -138,7 +142,7 @@ exports[`SiteInitPage normal 1`] = `
               class="btn btnPrimary btnBlock d-flex justify-content-center align-items-center"
               type="submit"
             >
-              Create admin account & continue
+              Create admin account and continue
             </button>
           </div>
           <p
@@ -178,21 +182,35 @@ exports[`SiteInitPage normal 1`] = `
 exports[`SiteInitPage unexpected authed user 1`] = `
 <DocumentFragment>
   <div
-    class="siteInitPage"
+    class="wrapper"
   >
+    <span
+      class=""
+    >
+      <img
+        alt="Sourcegraph logo"
+        class="logo"
+        src="/img/sourcegraph-mark.svg?v2"
+      />
+    </span>
+    <h1
+      class="h1"
+    >
+      Welcome to Sourcegraph
+    </h1>
+    <p
+      class="text-muted"
+    >
+      Create an admin account to get started
+    </p>
     <div
-      class="card content"
+      class="wrapper"
     >
       <div
-        class="cardBody p-4"
+        class="container"
       >
-        <img
-          alt="Sourcegraph logo"
-          class="w-100 mb-3"
-          src="/img/sourcegraph-logo-light.svg"
-        />
         <p
-          class=""
+          class="mb-0"
         >
           You're signed in as 
           <strong>

From a7e78f0466473ef8253a4601dab6e37154a73ac2 Mon Sep 17 00:00:00 2001
From: Erik Seliger <erikseliger@me.com>
Date: Sat, 7 Oct 2023 02:09:30 +0200
Subject: [PATCH 4/6] Bazel configure

---
 client/web/BUILD.bazel | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/web/BUILD.bazel b/client/web/BUILD.bazel
index 62b2f258d4bb..4388f6048534 100644
--- a/client/web/BUILD.bazel
+++ b/client/web/BUILD.bazel
@@ -172,6 +172,7 @@ ts_project(
         "src/app/TauriLink.tsx",
         "src/app/tauriIcpUtils.ts",
         "src/auth.ts",
+        "src/auth/AuthPageWrapper.tsx",
         "src/auth/CloudSignUpPage.tsx",
         "src/auth/OrDivider.tsx",
         "src/auth/PostSignUpPage.tsx",

From fc84b478efabada264fd7c0d8a8ce8948b600c9f Mon Sep 17 00:00:00 2001
From: Erik Seliger <erikseliger@me.com>
Date: Sat, 7 Oct 2023 02:12:41 +0200
Subject: [PATCH 5/6] Stylelint

---
 client/web/src/auth/AuthPageWrapper.module.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/web/src/auth/AuthPageWrapper.module.scss b/client/web/src/auth/AuthPageWrapper.module.scss
index 41699fde3196..4e8514f37c24 100644
--- a/client/web/src/auth/AuthPageWrapper.module.scss
+++ b/client/web/src/auth/AuthPageWrapper.module.scss
@@ -8,7 +8,8 @@
     width: 100%;
     display: flex;
     align-items: center;
-    margin-top: 20vh;
+    /* stylelint-disable declaration-property-unit-allowed-list */
+    margin-top: min(20vh, 20rem);
     flex-direction: column;
     flex: 1 1 auto;
 }

From a33c611e9543091c941052b7d5a339a0d709d6d6 Mon Sep 17 00:00:00 2001
From: Erik Seliger <erikseliger@me.com>
Date: Sat, 7 Oct 2023 04:17:59 +0200
Subject: [PATCH 6/6] TS fixup

---
 client/web/src/auth/components/ExternalsAuth.tsx  | 11 ++++++++---
 .../ExternalServiceEditPage.story.tsx             | 15 ++++++++++++---
 .../ExternalServicePage.story.tsx                 | 15 ++++++++++++---
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/client/web/src/auth/components/ExternalsAuth.tsx b/client/web/src/auth/components/ExternalsAuth.tsx
index c5edbca432ae..4e005b3a9754 100644
--- a/client/web/src/auth/components/ExternalsAuth.tsx
+++ b/client/web/src/auth/components/ExternalsAuth.tsx
@@ -15,6 +15,7 @@ interface ExternalsAuthProps {
     googleLabel: string
     onClick: (type: AuthProvider['serviceType']) => void
     withCenteredText?: boolean
+    ctaClassName?: string
     iconClassName?: string
     redirect?: string
 }
@@ -128,6 +129,7 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
     googleLabel,
     onClick,
     withCenteredText,
+    ctaClassName,
     iconClassName,
     redirect,
 }) => {
@@ -160,7 +162,8 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
                         'text-decoration-none',
                         withCenteredText && 'd-flex justify-content-center',
                         styles.signUpButton,
-                        styles.githubButton
+                        styles.githubButton,
+                        ctaClassName
                     )}
                     onClick={() => onClick('github')}
                 >
@@ -181,7 +184,8 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
                         'text-decoration-none',
                         withCenteredText && 'd-flex justify-content-center',
                         styles.signUpButton,
-                        styles.gitlabButton
+                        styles.gitlabButton,
+                        ctaClassName
                     )}
                     onClick={() => onClick('gitlab')}
                 >
@@ -201,7 +205,8 @@ export const ExternalsAuth: React.FunctionComponent<React.PropsWithChildren<Exte
                         'text-decoration-none',
                         withCenteredText && 'd-flex justify-content-center',
                         styles.signUpButton,
-                        styles.googleButton
+                        styles.googleButton,
+                        ctaClassName
                     )}
                     onClick={() => onClick('openidconnect')}
                 >
diff --git a/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx b/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx
index 5967b0ebea3a..85cfe6309039 100644
--- a/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx
+++ b/client/web/src/components/externalServices/ExternalServiceEditPage.story.tsx
@@ -36,7 +36,7 @@ const config: Meta = {
 export default config
 
 const externalService = {
-    __typename: 'ExternalService' as const,
+    __typename: 'ExternalService',
     id: 'service123',
     kind: ExternalServiceKind.GITHUB,
     warning: null,
@@ -55,9 +55,18 @@ const externalService = {
         namespaceName: 'johndoe',
         url: '/users/johndoe',
     },
-}
+    rateLimiterState: {
+        __typename: 'RateLimiterState',
+        burst: 10,
+        currentCapacity: 10,
+        infinite: false,
+        interval: 3600,
+        lastReplenishment: new Date().toISOString(),
+        limit: 5,
+    },
+} as ExternalServiceFields
 
-function newFetchMock(node: { __typename: 'ExternalService' } & ExternalServiceFields): WildcardMockLink {
+function newFetchMock(node: ExternalServiceFields): WildcardMockLink {
     return new WildcardMockLink([
         {
             request: {
diff --git a/client/web/src/components/externalServices/ExternalServicePage.story.tsx b/client/web/src/components/externalServices/ExternalServicePage.story.tsx
index 595cee053950..324b3837100a 100644
--- a/client/web/src/components/externalServices/ExternalServicePage.story.tsx
+++ b/client/web/src/components/externalServices/ExternalServicePage.story.tsx
@@ -32,7 +32,7 @@ const config: Meta = {
 export default config
 
 const externalService = {
-    __typename: 'ExternalService' as const,
+    __typename: 'ExternalService',
     id: 'service123',
     kind: ExternalServiceKind.GITHUB,
     warning: null,
@@ -51,7 +51,16 @@ const externalService = {
         namespaceName: 'johndoe',
         url: '/users/johndoe',
     },
-}
+    rateLimiterState: {
+        __typename: 'RateLimiterState',
+        burst: 10,
+        currentCapacity: 10,
+        infinite: false,
+        interval: 3600,
+        lastReplenishment: new Date().toISOString(),
+        limit: 5,
+    },
+} as ExternalServiceFields
 
 const queryExternalServiceSyncJobs: typeof _queryExternalServiceSyncJobs = () =>
     of({
@@ -117,7 +126,7 @@ const queryExternalServiceSyncJobs: typeof _queryExternalServiceSyncJobs = () =>
         ],
     })
 
-function newFetchMock(node: { __typename: 'ExternalService' } & ExternalServiceFields): WildcardMockLink {
+function newFetchMock(node: ExternalServiceFields): WildcardMockLink {
     return new WildcardMockLink([
         {
             request: {