diff --git a/web/packages/accounts/components/Login.tsx b/web/packages/accounts/components/Login.tsx
index 676b62db1..e69de29bb 100644
--- a/web/packages/accounts/components/Login.tsx
+++ b/web/packages/accounts/components/Login.tsx
@@ -1,72 +0,0 @@
-import log from "@/next/log";
-import { APPS } 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 { getSRPAttributes } from "../api/srp";
-import { sendOtt } from "../api/user";
-import { PAGES } from "../constants/pages";
-
-interface LoginProps {
-    signUp: () => void;
-    appName: APPS;
-}
-
-export default function Login(props: LoginProps) {
-    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(props.appName, 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/login.tsx b/web/packages/accounts/pages/login.tsx
index 0a7d3cd4d..87976641b 100644
--- a/web/packages/accounts/pages/login.tsx
+++ b/web/packages/accounts/pages/login.tsx
@@ -1,14 +1,28 @@
+import log from "@/next/log";
 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 { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
+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 { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import Login from "../components/Login";
+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 { PAGES } from "../constants/pages";
+import { appNameToAppNameOld } from "@ente/shared/apps/constants";
+
+const Page: React.FC<PageProps> = ({ appContext }) => {
+    const { appName, showNavBar } = appContext;
 
-export default function LoginPage({ appContext, appName }: PageProps) {
     const [loading, setLoading] = useState(true);
 
     const router = useRouter();
@@ -19,7 +33,7 @@ export default function LoginPage({ appContext, appName }: PageProps) {
             router.push(PAGES.VERIFY);
         }
         setLoading(false);
-        appContext.showNavBar(true);
+        showNavBar(true);
     }, []);
 
     const register = () => {
@@ -37,4 +51,65 @@ export default function LoginPage({ appContext, appName }: PageProps) {
             </FormPaper>
         </VerticallyCentered>
     );
+};
+
+export default Page;
+
+interface LoginProps {
+    signUp: () => void;
+    appName: AppName;
+}
+
+function Login(props: LoginProps) {
+    const router = useRouter();
+
+    const appNameOld = appNameToAppNameOld(props.appName);
+
+    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/shared/apps/constants.ts b/web/packages/shared/apps/constants.ts
index b679fb912..f627db073 100644
--- a/web/packages/shared/apps/constants.ts
+++ b/web/packages/shared/apps/constants.ts
@@ -1,3 +1,4 @@
+import type { AppName } from "packages/next/types/app";
 import { ACCOUNTS_PAGES, AUTH_PAGES, PHOTOS_PAGES } from "../constants/pages";
 
 export enum APPS {
@@ -7,6 +8,19 @@ export enum APPS {
     ACCOUNTS = "ACCOUNTS",
 }
 
+export const appNameToAppNameOld = (appName: AppName): APPS => {
+    switch (appName) {
+        case "account":
+            return APPS.ACCOUNTS;
+        case "albums":
+            return APPS.ALBUMS;
+        case "photos":
+            return APPS.PHOTOS;
+        case "auth":
+            return APPS.AUTH;
+    }
+};
+
 export const CLIENT_PACKAGE_NAMES = new Map([
     [APPS.ALBUMS, "io.ente.albums.web"],
     [APPS.PHOTOS, "io.ente.photos.web"],