diff --git a/web/apps/photos/src/pages/index.tsx b/web/apps/photos/src/pages/index.tsx
index 492785c91..907f37d3d 100644
--- a/web/apps/photos/src/pages/index.tsx
+++ b/web/apps/photos/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import log from "@/next/log";
-import Login from "@ente/accounts/components/Login";
-import SignUp from "@ente/accounts/components/SignUp";
+import { Login } from "@ente/accounts/components/Login";
+import { SignUp } from "@ente/accounts/components/SignUp";
 import { APPS } from "@ente/shared/apps/constants";
 import { EnteLogo } from "@ente/shared/components/EnteLogo";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
diff --git a/web/packages/accounts/components/Login.tsx b/web/packages/accounts/components/Login.tsx
new file mode 100644
index 000000000..6ddbe1491
--- /dev/null
+++ b/web/packages/accounts/components/Login.tsx
@@ -0,0 +1,75 @@
+import log from "@/next/log";
+import { appNameToAppNameOld } from "@ente/shared/apps/constants";
+import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
+import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
+import LinkButton from "@ente/shared/components/LinkButton";
+import SingleInputForm, {
+    type SingleInputFormProps,
+} from "@ente/shared/components/SingleInputForm";
+import { LS_KEYS, setData } from "@ente/shared/storage/localStorage";
+import { Input } from "@mui/material";
+import { t } from "i18next";
+import { useRouter } from "next/router";
+import type { AppName } from "packages/next/types/app";
+import { getSRPAttributes } from "../api/srp";
+import { sendOtt } from "../api/user";
+import { PAGES } from "../constants/pages";
+
+interface LoginProps {
+    signUp: () => void;
+    appName: AppName;
+}
+
+export function Login(props: LoginProps) {
+    const appNameOld = appNameToAppNameOld(props.appName);
+
+    const router = useRouter();
+
+    const loginUser: SingleInputFormProps["callback"] = async (
+        email,
+        setFieldError,
+    ) => {
+        try {
+            setData(LS_KEYS.USER, { email });
+            const srpAttributes = await getSRPAttributes(email);
+            log.debug(() => ` srpAttributes: ${JSON.stringify(srpAttributes)}`);
+            if (!srpAttributes || srpAttributes.isEmailMFAEnabled) {
+                await sendOtt(appNameOld, email);
+                router.push(PAGES.VERIFY);
+            } else {
+                setData(LS_KEYS.SRP_ATTRIBUTES, srpAttributes);
+                router.push(PAGES.CREDENTIALS);
+            }
+        } catch (e) {
+            if (e instanceof Error) {
+                setFieldError(`${t("UNKNOWN_ERROR")} (reason:${e.message})`);
+            } else {
+                setFieldError(
+                    `${t("UNKNOWN_ERROR")} (reason:${JSON.stringify(e)})`,
+                );
+            }
+        }
+    };
+
+    return (
+        <>
+            <FormPaperTitle>{t("LOGIN")}</FormPaperTitle>
+            <SingleInputForm
+                callback={loginUser}
+                fieldType="email"
+                placeholder={t("ENTER_EMAIL")}
+                buttonText={t("LOGIN")}
+                autoComplete="username"
+                hiddenPostInput={
+                    <Input sx={{ display: "none" }} type="password" value="" />
+                }
+            />
+
+            <FormPaperFooter>
+                <LinkButton onClick={props.signUp}>
+                    {t("NO_ACCOUNT")}
+                </LinkButton>
+            </FormPaperFooter>
+        </>
+    );
+}
diff --git a/web/packages/accounts/components/SignUp.tsx b/web/packages/accounts/components/SignUp.tsx
new file mode 100644
index 000000000..6c89eb8fb
--- /dev/null
+++ b/web/packages/accounts/components/SignUp.tsx
@@ -0,0 +1,320 @@
+import log from "@/next/log";
+import { sendOtt } from "@ente/accounts/api/user";
+import { PasswordStrengthHint } from "@ente/accounts/components/PasswordStrength";
+import { PAGES } from "@ente/accounts/constants/pages";
+import { isWeakPassword } from "@ente/accounts/utils";
+import { generateKeyAndSRPAttributes } from "@ente/accounts/utils/srp";
+import { LS_KEYS } from "@ente/shared//storage/localStorage";
+import { appNameToAppNameOld } from "@ente/shared/apps/constants";
+import { VerticallyCentered } from "@ente/shared/components/Container";
+import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
+import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
+import ShowHidePassword from "@ente/shared/components/Form/ShowHidePassword";
+import LinkButton from "@ente/shared/components/LinkButton";
+import SubmitButton from "@ente/shared/components/SubmitButton";
+import {
+    generateAndSaveIntermediateKeyAttributes,
+    saveKeyInSessionStore,
+} from "@ente/shared/crypto/helpers";
+import { setData } from "@ente/shared/storage/localStorage";
+import {
+    setJustSignedUp,
+    setLocalReferralSource,
+} from "@ente/shared/storage/localStorage/helpers";
+import { SESSION_KEYS } from "@ente/shared/storage/sessionStorage";
+import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import {
+    Box,
+    Checkbox,
+    FormControlLabel,
+    FormGroup,
+    IconButton,
+    InputAdornment,
+    Link,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import { Formik, type FormikHelpers } from "formik";
+import { t } from "i18next";
+import type { NextRouter } from "next/router";
+import type { AppName } from "packages/next/types/app";
+import React, { useState } from "react";
+import { Trans } from "react-i18next";
+import * as Yup from "yup";
+
+interface FormValues {
+    email: string;
+    passphrase: string;
+    confirm: string;
+    referral: string;
+}
+
+interface SignUpProps {
+    router: NextRouter;
+    login: () => void;
+    appName: AppName;
+}
+
+export function SignUp({ router, appName, login }: SignUpProps) {
+    const appNameOld = appNameToAppNameOld(appName);
+
+    const [acceptTerms, setAcceptTerms] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const handleMouseDownPassword = (
+        event: React.MouseEvent<HTMLButtonElement>,
+    ) => {
+        event.preventDefault();
+    };
+
+    const registerUser = async (
+        { email, passphrase, confirm, referral }: FormValues,
+        { setFieldError }: FormikHelpers<FormValues>,
+    ) => {
+        try {
+            if (passphrase !== confirm) {
+                setFieldError("confirm", t("PASSPHRASE_MATCH_ERROR"));
+                return;
+            }
+            setLoading(true);
+            try {
+                setData(LS_KEYS.USER, { email });
+                setLocalReferralSource(referral);
+                await sendOtt(appNameOld, email);
+            } catch (e) {
+                const message = e instanceof Error ? e.message : "";
+                setFieldError("confirm", `${t("UNKNOWN_ERROR")} ${message}`);
+                throw e;
+            }
+            try {
+                const { keyAttributes, masterKey, srpSetupAttributes } =
+                    await generateKeyAndSRPAttributes(passphrase);
+
+                setData(LS_KEYS.ORIGINAL_KEY_ATTRIBUTES, keyAttributes);
+                setData(LS_KEYS.SRP_SETUP_ATTRIBUTES, srpSetupAttributes);
+                await generateAndSaveIntermediateKeyAttributes(
+                    passphrase,
+                    keyAttributes,
+                    masterKey,
+                );
+
+                await saveKeyInSessionStore(
+                    SESSION_KEYS.ENCRYPTION_KEY,
+                    masterKey,
+                );
+                setJustSignedUp(true);
+                router.push(PAGES.VERIFY);
+            } catch (e) {
+                setFieldError("confirm", t("PASSWORD_GENERATION_FAILED"));
+                throw e;
+            }
+        } catch (e) {
+            log.error("signup failed", e);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <>
+            <FormPaperTitle> {t("SIGN_UP")}</FormPaperTitle>
+            <Formik<FormValues>
+                initialValues={{
+                    email: "",
+                    passphrase: "",
+                    confirm: "",
+                    referral: "",
+                }}
+                validationSchema={Yup.object().shape({
+                    email: Yup.string()
+                        .email(t("EMAIL_ERROR"))
+                        .required(t("REQUIRED")),
+                    passphrase: Yup.string().required(t("REQUIRED")),
+                    confirm: Yup.string().required(t("REQUIRED")),
+                })}
+                validateOnChange={false}
+                validateOnBlur={false}
+                onSubmit={registerUser}
+            >
+                {({
+                    values,
+                    errors,
+                    handleChange,
+                    handleSubmit,
+                }): JSX.Element => (
+                    <form noValidate onSubmit={handleSubmit}>
+                        <VerticallyCentered sx={{ mb: 1 }}>
+                            <TextField
+                                fullWidth
+                                id="email"
+                                name="email"
+                                autoComplete="username"
+                                type="email"
+                                label={t("ENTER_EMAIL")}
+                                value={values.email}
+                                onChange={handleChange("email")}
+                                error={Boolean(errors.email)}
+                                helperText={errors.email}
+                                autoFocus
+                                disabled={loading}
+                            />
+
+                            <TextField
+                                fullWidth
+                                id="password"
+                                name="password"
+                                autoComplete="new-password"
+                                type={showPassword ? "text" : "password"}
+                                label={t("PASSPHRASE_HINT")}
+                                value={values.passphrase}
+                                onChange={handleChange("passphrase")}
+                                error={Boolean(errors.passphrase)}
+                                helperText={errors.passphrase}
+                                disabled={loading}
+                                InputProps={{
+                                    endAdornment: (
+                                        <ShowHidePassword
+                                            showPassword={showPassword}
+                                            handleClickShowPassword={
+                                                handleClickShowPassword
+                                            }
+                                            handleMouseDownPassword={
+                                                handleMouseDownPassword
+                                            }
+                                        />
+                                    ),
+                                }}
+                            />
+
+                            <TextField
+                                fullWidth
+                                id="confirm-password"
+                                name="confirm-password"
+                                autoComplete="new-password"
+                                type="password"
+                                label={t("CONFIRM_PASSPHRASE")}
+                                value={values.confirm}
+                                onChange={handleChange("confirm")}
+                                error={Boolean(errors.confirm)}
+                                helperText={errors.confirm}
+                                disabled={loading}
+                            />
+                            <PasswordStrengthHint
+                                password={values.passphrase}
+                            />
+
+                            <Box sx={{ width: "100%" }}>
+                                <Typography
+                                    textAlign={"left"}
+                                    color="text.secondary"
+                                    mt={"24px"}
+                                >
+                                    {t("REFERRAL_CODE_HINT")}
+                                </Typography>
+                                <TextField
+                                    hiddenLabel
+                                    InputProps={{
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                <Tooltip
+                                                    title={t("REFERRAL_INFO")}
+                                                >
+                                                    <IconButton
+                                                        tabIndex={-1}
+                                                        color="secondary"
+                                                        edge={"end"}
+                                                    >
+                                                        <InfoOutlined />
+                                                    </IconButton>
+                                                </Tooltip>
+                                            </InputAdornment>
+                                        ),
+                                    }}
+                                    fullWidth
+                                    name="referral"
+                                    type="text"
+                                    value={values.referral}
+                                    onChange={handleChange("referral")}
+                                    error={Boolean(errors.referral)}
+                                    disabled={loading}
+                                />
+                            </Box>
+                            <FormGroup sx={{ width: "100%" }}>
+                                <FormControlLabel
+                                    sx={{
+                                        color: "text.muted",
+                                        ml: 0,
+                                        mt: 2,
+                                        mb: 0,
+                                    }}
+                                    control={
+                                        <Checkbox
+                                            size="small"
+                                            disabled={loading}
+                                            checked={acceptTerms}
+                                            onChange={(e) =>
+                                                setAcceptTerms(e.target.checked)
+                                            }
+                                            color="accent"
+                                        />
+                                    }
+                                    label={
+                                        <Typography variant="small">
+                                            <Trans
+                                                i18nKey={"TERMS_AND_CONDITIONS"}
+                                                components={{
+                                                    a: (
+                                                        <Link
+                                                            href="https://ente.io/terms"
+                                                            target="_blank"
+                                                        />
+                                                    ),
+                                                    b: (
+                                                        <Link
+                                                            href="https://ente.io/privacy"
+                                                            target="_blank"
+                                                        />
+                                                    ),
+                                                }}
+                                            />
+                                        </Typography>
+                                    }
+                                />
+                            </FormGroup>
+                        </VerticallyCentered>
+                        <Box mb={4}>
+                            <SubmitButton
+                                sx={{ my: 0 }}
+                                buttonText={t("CREATE_ACCOUNT")}
+                                loading={loading}
+                                disabled={
+                                    !acceptTerms ||
+                                    isWeakPassword(values.passphrase)
+                                }
+                            />
+                            {loading && (
+                                <Typography
+                                    mt={1}
+                                    textAlign={"center"}
+                                    color="text.muted"
+                                    variant="small"
+                                >
+                                    {t("KEY_GENERATION_IN_PROGRESS_MESSAGE")}
+                                </Typography>
+                            )}
+                        </Box>
+                    </form>
+                )}
+            </Formik>
+
+            <FormPaperFooter>
+                <LinkButton onClick={login}>{t("ACCOUNT_EXISTS")}</LinkButton>
+            </FormPaperFooter>
+        </>
+    );
+}
diff --git a/web/packages/accounts/pages/login.tsx b/web/packages/accounts/pages/login.tsx
index 506cc81bc..57ea023ff 100644
--- a/web/packages/accounts/pages/login.tsx
+++ b/web/packages/accounts/pages/login.tsx
@@ -1,23 +1,11 @@
-import log from "@/next/log";
-import { appNameToAppNameOld } from "@ente/shared/apps/constants";
 import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
-import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
-import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
-import LinkButton from "@ente/shared/components/LinkButton";
-import SingleInputForm, {
-    type SingleInputFormProps,
-} from "@ente/shared/components/SingleInputForm";
-import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
-import { Input } from "@mui/material";
-import { t } from "i18next";
+import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
 import { useRouter } from "next/router";
-import type { AppName } from "packages/next/types/app";
 import React, { useEffect, useState } from "react";
-import { getSRPAttributes } from "../api/srp";
-import { sendOtt } from "../api/user";
+import { Login } from "../components/Login";
 import { PAGES } from "../constants/pages";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
@@ -54,62 +42,3 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
 };
 
 export default Page;
-
-interface LoginProps {
-    signUp: () => void;
-    appName: AppName;
-}
-
-function Login(props: LoginProps) {
-    const appNameOld = appNameToAppNameOld(props.appName);
-
-    const router = useRouter();
-
-    const loginUser: SingleInputFormProps["callback"] = async (
-        email,
-        setFieldError,
-    ) => {
-        try {
-            setData(LS_KEYS.USER, { email });
-            const srpAttributes = await getSRPAttributes(email);
-            log.debug(() => ` srpAttributes: ${JSON.stringify(srpAttributes)}`);
-            if (!srpAttributes || srpAttributes.isEmailMFAEnabled) {
-                await sendOtt(appNameOld, email);
-                router.push(PAGES.VERIFY);
-            } else {
-                setData(LS_KEYS.SRP_ATTRIBUTES, srpAttributes);
-                router.push(PAGES.CREDENTIALS);
-            }
-        } catch (e) {
-            if (e instanceof Error) {
-                setFieldError(`${t("UNKNOWN_ERROR")} (reason:${e.message})`);
-            } else {
-                setFieldError(
-                    `${t("UNKNOWN_ERROR")} (reason:${JSON.stringify(e)})`,
-                );
-            }
-        }
-    };
-
-    return (
-        <>
-            <FormPaperTitle>{t("LOGIN")}</FormPaperTitle>
-            <SingleInputForm
-                callback={loginUser}
-                fieldType="email"
-                placeholder={t("ENTER_EMAIL")}
-                buttonText={t("LOGIN")}
-                autoComplete="username"
-                hiddenPostInput={
-                    <Input sx={{ display: "none" }} type="password" value="" />
-                }
-            />
-
-            <FormPaperFooter>
-                <LinkButton onClick={props.signUp}>
-                    {t("NO_ACCOUNT")}
-                </LinkButton>
-            </FormPaperFooter>
-        </>
-    );
-}
diff --git a/web/packages/accounts/pages/signup.tsx b/web/packages/accounts/pages/signup.tsx
index 02f810250..affc0099b 100644
--- a/web/packages/accounts/pages/signup.tsx
+++ b/web/packages/accounts/pages/signup.tsx
@@ -1,51 +1,12 @@
-import log from "@/next/log";
-import { sendOtt } from "@ente/accounts/api/user";
-import { PasswordStrengthHint } from "@ente/accounts/components/PasswordStrength";
 import { PAGES } from "@ente/accounts/constants/pages";
-import { isWeakPassword } from "@ente/accounts/utils";
-import { generateKeyAndSRPAttributes } from "@ente/accounts/utils/srp";
 import { LS_KEYS, getData } from "@ente/shared//storage/localStorage";
-import { appNameToAppNameOld } from "@ente/shared/apps/constants";
 import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
-import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
-import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
-import ShowHidePassword from "@ente/shared/components/Form/ShowHidePassword";
-import LinkButton from "@ente/shared/components/LinkButton";
-import SubmitButton from "@ente/shared/components/SubmitButton";
-import {
-    generateAndSaveIntermediateKeyAttributes,
-    saveKeyInSessionStore,
-} from "@ente/shared/crypto/helpers";
-import { setData } from "@ente/shared/storage/localStorage";
-import {
-    setJustSignedUp,
-    setLocalReferralSource,
-} from "@ente/shared/storage/localStorage/helpers";
-import { SESSION_KEYS } from "@ente/shared/storage/sessionStorage";
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
-import {
-    Box,
-    Checkbox,
-    FormControlLabel,
-    FormGroup,
-    IconButton,
-    InputAdornment,
-    Link,
-    TextField,
-    Tooltip,
-    Typography,
-} from "@mui/material";
-import { Formik, type FormikHelpers } from "formik";
-import { t } from "i18next";
-import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
-import type { AppName } from "packages/next/types/app";
 import React, { useEffect, useState } from "react";
-import { Trans } from "react-i18next";
-import * as Yup from "yup";
+import { SignUp } from "../components/SignUp";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName } = appContext;
@@ -81,279 +42,3 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
 };
 
 export default Page;
-
-interface FormValues {
-    email: string;
-    passphrase: string;
-    confirm: string;
-    referral: string;
-}
-
-interface SignUpProps {
-    router: NextRouter;
-    login: () => void;
-    appName: AppName;
-}
-
-function SignUp({ router, appName, login }: SignUpProps) {
-    const appNameOld = appNameToAppNameOld(appName);
-
-    const [acceptTerms, setAcceptTerms] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [showPassword, setShowPassword] = useState(false);
-
-    const handleClickShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    const handleMouseDownPassword = (
-        event: React.MouseEvent<HTMLButtonElement>,
-    ) => {
-        event.preventDefault();
-    };
-
-    const registerUser = async (
-        { email, passphrase, confirm, referral }: FormValues,
-        { setFieldError }: FormikHelpers<FormValues>,
-    ) => {
-        try {
-            if (passphrase !== confirm) {
-                setFieldError("confirm", t("PASSPHRASE_MATCH_ERROR"));
-                return;
-            }
-            setLoading(true);
-            try {
-                setData(LS_KEYS.USER, { email });
-                setLocalReferralSource(referral);
-                await sendOtt(appNameOld, email);
-            } catch (e) {
-                const message = e instanceof Error ? e.message : "";
-                setFieldError("confirm", `${t("UNKNOWN_ERROR")} ${message}`);
-                throw e;
-            }
-            try {
-                const { keyAttributes, masterKey, srpSetupAttributes } =
-                    await generateKeyAndSRPAttributes(passphrase);
-
-                setData(LS_KEYS.ORIGINAL_KEY_ATTRIBUTES, keyAttributes);
-                setData(LS_KEYS.SRP_SETUP_ATTRIBUTES, srpSetupAttributes);
-                await generateAndSaveIntermediateKeyAttributes(
-                    passphrase,
-                    keyAttributes,
-                    masterKey,
-                );
-
-                await saveKeyInSessionStore(
-                    SESSION_KEYS.ENCRYPTION_KEY,
-                    masterKey,
-                );
-                setJustSignedUp(true);
-                router.push(PAGES.VERIFY);
-            } catch (e) {
-                setFieldError("confirm", t("PASSWORD_GENERATION_FAILED"));
-                throw e;
-            }
-        } catch (e) {
-            log.error("signup failed", e);
-        }
-        setLoading(false);
-    };
-
-    return (
-        <>
-            <FormPaperTitle> {t("SIGN_UP")}</FormPaperTitle>
-            <Formik<FormValues>
-                initialValues={{
-                    email: "",
-                    passphrase: "",
-                    confirm: "",
-                    referral: "",
-                }}
-                validationSchema={Yup.object().shape({
-                    email: Yup.string()
-                        .email(t("EMAIL_ERROR"))
-                        .required(t("REQUIRED")),
-                    passphrase: Yup.string().required(t("REQUIRED")),
-                    confirm: Yup.string().required(t("REQUIRED")),
-                })}
-                validateOnChange={false}
-                validateOnBlur={false}
-                onSubmit={registerUser}
-            >
-                {({
-                    values,
-                    errors,
-                    handleChange,
-                    handleSubmit,
-                }): JSX.Element => (
-                    <form noValidate onSubmit={handleSubmit}>
-                        <VerticallyCentered sx={{ mb: 1 }}>
-                            <TextField
-                                fullWidth
-                                id="email"
-                                name="email"
-                                autoComplete="username"
-                                type="email"
-                                label={t("ENTER_EMAIL")}
-                                value={values.email}
-                                onChange={handleChange("email")}
-                                error={Boolean(errors.email)}
-                                helperText={errors.email}
-                                autoFocus
-                                disabled={loading}
-                            />
-
-                            <TextField
-                                fullWidth
-                                id="password"
-                                name="password"
-                                autoComplete="new-password"
-                                type={showPassword ? "text" : "password"}
-                                label={t("PASSPHRASE_HINT")}
-                                value={values.passphrase}
-                                onChange={handleChange("passphrase")}
-                                error={Boolean(errors.passphrase)}
-                                helperText={errors.passphrase}
-                                disabled={loading}
-                                InputProps={{
-                                    endAdornment: (
-                                        <ShowHidePassword
-                                            showPassword={showPassword}
-                                            handleClickShowPassword={
-                                                handleClickShowPassword
-                                            }
-                                            handleMouseDownPassword={
-                                                handleMouseDownPassword
-                                            }
-                                        />
-                                    ),
-                                }}
-                            />
-
-                            <TextField
-                                fullWidth
-                                id="confirm-password"
-                                name="confirm-password"
-                                autoComplete="new-password"
-                                type="password"
-                                label={t("CONFIRM_PASSPHRASE")}
-                                value={values.confirm}
-                                onChange={handleChange("confirm")}
-                                error={Boolean(errors.confirm)}
-                                helperText={errors.confirm}
-                                disabled={loading}
-                            />
-                            <PasswordStrengthHint
-                                password={values.passphrase}
-                            />
-
-                            <Box sx={{ width: "100%" }}>
-                                <Typography
-                                    textAlign={"left"}
-                                    color="text.secondary"
-                                    mt={"24px"}
-                                >
-                                    {t("REFERRAL_CODE_HINT")}
-                                </Typography>
-                                <TextField
-                                    hiddenLabel
-                                    InputProps={{
-                                        endAdornment: (
-                                            <InputAdornment position="end">
-                                                <Tooltip
-                                                    title={t("REFERRAL_INFO")}
-                                                >
-                                                    <IconButton
-                                                        tabIndex={-1}
-                                                        color="secondary"
-                                                        edge={"end"}
-                                                    >
-                                                        <InfoOutlined />
-                                                    </IconButton>
-                                                </Tooltip>
-                                            </InputAdornment>
-                                        ),
-                                    }}
-                                    fullWidth
-                                    name="referral"
-                                    type="text"
-                                    value={values.referral}
-                                    onChange={handleChange("referral")}
-                                    error={Boolean(errors.referral)}
-                                    disabled={loading}
-                                />
-                            </Box>
-                            <FormGroup sx={{ width: "100%" }}>
-                                <FormControlLabel
-                                    sx={{
-                                        color: "text.muted",
-                                        ml: 0,
-                                        mt: 2,
-                                        mb: 0,
-                                    }}
-                                    control={
-                                        <Checkbox
-                                            size="small"
-                                            disabled={loading}
-                                            checked={acceptTerms}
-                                            onChange={(e) =>
-                                                setAcceptTerms(e.target.checked)
-                                            }
-                                            color="accent"
-                                        />
-                                    }
-                                    label={
-                                        <Typography variant="small">
-                                            <Trans
-                                                i18nKey={"TERMS_AND_CONDITIONS"}
-                                                components={{
-                                                    a: (
-                                                        <Link
-                                                            href="https://ente.io/terms"
-                                                            target="_blank"
-                                                        />
-                                                    ),
-                                                    b: (
-                                                        <Link
-                                                            href="https://ente.io/privacy"
-                                                            target="_blank"
-                                                        />
-                                                    ),
-                                                }}
-                                            />
-                                        </Typography>
-                                    }
-                                />
-                            </FormGroup>
-                        </VerticallyCentered>
-                        <Box mb={4}>
-                            <SubmitButton
-                                sx={{ my: 0 }}
-                                buttonText={t("CREATE_ACCOUNT")}
-                                loading={loading}
-                                disabled={
-                                    !acceptTerms ||
-                                    isWeakPassword(values.passphrase)
-                                }
-                            />
-                            {loading && (
-                                <Typography
-                                    mt={1}
-                                    textAlign={"center"}
-                                    color="text.muted"
-                                    variant="small"
-                                >
-                                    {t("KEY_GENERATION_IN_PROGRESS_MESSAGE")}
-                                </Typography>
-                            )}
-                        </Box>
-                    </form>
-                )}
-            </Formik>
-
-            <FormPaperFooter>
-                <LinkButton onClick={login}>{t("ACCOUNT_EXISTS")}</LinkButton>
-            </FormPaperFooter>
-        </>
-    );
-}