diff --git a/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx b/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx
index f992e3961..30e1f63af 100644
--- a/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx
+++ b/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx
@@ -1,16 +1,12 @@
 import { TwoFactorType } from "@ente/accounts/constants/twofactor";
-import RecoverPage from "@ente/accounts/pages/recover";
-import { APPS } from "@ente/shared/apps/constants";
-import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import RecoverPage from "@ente/accounts/pages/two-factor/recover";
+import { useAppContext } from "../../_app";
 
-export default function Recover() {
-    const appContext = useContext(AppContext);
-    return (
-        <RecoverPage
-            appContext={appContext}
-            appName={APPS.PHOTOS}
-            twoFactorType={TwoFactorType.PASSKEY}
-        />
-    );
-}
+const Page = () => (
+    <RecoverPage
+        appContext={useAppContext()}
+        twoFactorType={TwoFactorType.PASSKEY}
+    />
+);
+
+export default Page;
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index c01ffe48b..5414d8fe3 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -602,7 +602,7 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
                 label={t("PREFERENCES")}
             />
             <RecoveryKey
-                appContext={appContext}
+                isMobile={appContext.isMobile}
                 show={recoverModalView}
                 onHide={closeRecoveryKeyModal}
                 somethingWentWrong={somethingWentWrong}
diff --git a/web/packages/accounts/pages/change-email.tsx b/web/packages/accounts/pages/change-email.tsx
index 073bef30e..4c46d392b 100644
--- a/web/packages/accounts/pages/change-email.tsx
+++ b/web/packages/accounts/pages/change-email.tsx
@@ -7,7 +7,6 @@ import {
     appNameToAppNameOld,
     type APPS,
 } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -22,6 +21,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import * as Yup from "yup";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName } = appContext;
diff --git a/web/packages/accounts/pages/change-password.tsx b/web/packages/accounts/pages/change-password.tsx
index b0e6dcb70..2ecd09fd0 100644
--- a/web/packages/accounts/pages/change-password.tsx
+++ b/web/packages/accounts/pages/change-password.tsx
@@ -14,7 +14,6 @@ import {
     convertBufferToBase64,
 } from "@ente/accounts/utils";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -34,6 +33,7 @@ import type { KEK, KeyAttributes, User } from "@ente/shared/user/types";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName } = appContext;
diff --git a/web/packages/accounts/pages/credentials.tsx b/web/packages/accounts/pages/credentials.tsx
index 901432b45..85a1b2fe7 100644
--- a/web/packages/accounts/pages/credentials.tsx
+++ b/web/packages/accounts/pages/credentials.tsx
@@ -2,7 +2,6 @@ import { isDevBuild } from "@/next/env";
 import log from "@/next/log";
 import { ensure } from "@/utils/ensure";
 import { APP_HOMES, 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";
@@ -51,6 +50,7 @@ import {
     generateSRPSetupAttributes,
     loginViaSRP,
 } from "../services/srp";
+import type { PageProps } from "../types/page";
 import type { SRPAttributes } from "../types/srp";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
diff --git a/web/packages/accounts/pages/generate.tsx b/web/packages/accounts/pages/generate.tsx
index e367813e7..3ce7293f6 100644
--- a/web/packages/accounts/pages/generate.tsx
+++ b/web/packages/accounts/pages/generate.tsx
@@ -8,7 +8,6 @@ import { PAGES } from "@ente/accounts/constants/pages";
 import { configureSRP } from "@ente/accounts/services/srp";
 import { generateKeyAndSRPAttributes } from "@ente/accounts/utils/srp";
 import { APP_HOMES, 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";
@@ -30,6 +29,7 @@ import type { KeyAttributes, User } from "@ente/shared/user/types";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName, logout } = appContext;
@@ -105,7 +105,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
                 </VerticallyCentered>
             ) : recoverModalView ? (
                 <RecoveryKey
-                    appContext={appContext}
+                    isMobile={appContext.isMobile}
                     show={recoverModalView}
                     onHide={() => {
                         setRecoveryModalView(false);
diff --git a/web/packages/accounts/pages/login.tsx b/web/packages/accounts/pages/login.tsx
index 57ea023ff..ce9c8915f 100644
--- a/web/packages/accounts/pages/login.tsx
+++ b/web/packages/accounts/pages/login.tsx
@@ -1,4 +1,3 @@
-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";
@@ -7,6 +6,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Login } from "../components/Login";
 import { PAGES } from "../constants/pages";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName, showNavBar } = appContext;
diff --git a/web/packages/accounts/pages/passkeys/finish.tsx b/web/packages/accounts/pages/passkeys/finish.tsx
index 3f8ae8548..b9b5b2cd4 100644
--- a/web/packages/accounts/pages/passkeys/finish.tsx
+++ b/web/packages/accounts/pages/passkeys/finish.tsx
@@ -4,9 +4,9 @@ import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
 import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
-const Page = () => {
+const Page: React.FC = () => {
     const router = useRouter();
 
     const init = async () => {
diff --git a/web/packages/accounts/pages/recover.tsx b/web/packages/accounts/pages/recover.tsx
index a93cf53cc..1e8b99895 100644
--- a/web/packages/accounts/pages/recover.tsx
+++ b/web/packages/accounts/pages/recover.tsx
@@ -3,7 +3,6 @@ import { ensure } from "@/utils/ensure";
 import { sendOtt } from "@ente/accounts/api/user";
 import { PAGES } from "@ente/accounts/constants/pages";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -24,6 +23,7 @@ import type { KeyAttributes, User } from "@ente/shared/user/types";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../types/page";
 
 const bip39 = require("bip39");
 // mobile client library only supports english.
diff --git a/web/packages/accounts/pages/signup.tsx b/web/packages/accounts/pages/signup.tsx
index affc0099b..ce7e14e56 100644
--- a/web/packages/accounts/pages/signup.tsx
+++ b/web/packages/accounts/pages/signup.tsx
@@ -1,12 +1,12 @@
 import { PAGES } from "@ente/accounts/constants/pages";
 import { LS_KEYS, getData } from "@ente/shared//storage/localStorage";
-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 { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { SignUp } from "../components/SignUp";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName } = appContext;
diff --git a/web/packages/accounts/pages/two-factor/recover.tsx b/web/packages/accounts/pages/two-factor/recover.tsx
index ffad62625..8ea9d7ea3 100644
--- a/web/packages/accounts/pages/two-factor/recover.tsx
+++ b/web/packages/accounts/pages/two-factor/recover.tsx
@@ -1,9 +1,10 @@
 import log from "@/next/log";
+import type { BaseAppContextT } from "@/next/types/app";
 import { ensure } from "@/utils/ensure";
 import { recoverTwoFactor, removeTwoFactor } from "@ente/accounts/api/user";
 import { PAGES } from "@ente/accounts/constants/pages";
 import { TwoFactorType } from "@ente/accounts/constants/twofactor";
-import type { PageProps } from "@ente/shared/apps/types";
+import { APPS } from "@ente/shared/apps/constants";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
@@ -29,7 +30,13 @@ const bip39 = require("bip39");
 // mobile client library only supports english.
 bip39.setDefaultWordlist("english");
 
-const Page: React.FC<PageProps> = ({
+export interface RecoverPageProps {
+    appContext: BaseAppContextT;
+    appName?: APPS;
+    twoFactorType?: TwoFactorType;
+}
+
+const Page: React.FC<RecoverPageProps> = ({
     appContext,
     twoFactorType = TwoFactorType.TOTP,
 }) => {
diff --git a/web/packages/accounts/pages/two-factor/setup.tsx b/web/packages/accounts/pages/two-factor/setup.tsx
index 193bfb60f..98887fcf0 100644
--- a/web/packages/accounts/pages/two-factor/setup.tsx
+++ b/web/packages/accounts/pages/two-factor/setup.tsx
@@ -7,7 +7,6 @@ import VerifyTwoFactor, {
 import { TwoFactorSetup } from "@ente/accounts/components/two-factor/setup";
 import type { TwoFactorSecret } from "@ente/accounts/types/user";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import LinkButton from "@ente/shared/components/LinkButton";
 import { encryptWithRecoveryKey } from "@ente/shared/crypto/helpers";
@@ -17,6 +16,7 @@ import Card from "@mui/material/Card";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../../types/page";
 
 export enum SetupMode {
     QR_CODE,
diff --git a/web/packages/accounts/pages/two-factor/verify.tsx b/web/packages/accounts/pages/two-factor/verify.tsx
index 322b25ffc..cd2cbf4b7 100644
--- a/web/packages/accounts/pages/two-factor/verify.tsx
+++ b/web/packages/accounts/pages/two-factor/verify.tsx
@@ -4,7 +4,6 @@ import VerifyTwoFactor, {
     type VerifyTwoFactorCallback,
 } from "@ente/accounts/components/two-factor/VerifyForm";
 import { PAGES } from "@ente/accounts/constants/pages";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -18,6 +17,7 @@ import { HttpStatusCode } from "axios";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { logout } = appContext;
diff --git a/web/packages/accounts/pages/verify.tsx b/web/packages/accounts/pages/verify.tsx
index 025b39961..01e6e5884 100644
--- a/web/packages/accounts/pages/verify.tsx
+++ b/web/packages/accounts/pages/verify.tsx
@@ -1,7 +1,6 @@
 import { ensure } from "@/utils/ensure";
 import type { UserVerificationResponse } from "@ente/accounts/types/user";
 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";
@@ -31,6 +30,7 @@ import { Trans } from "react-i18next";
 import { putAttributes, sendOtt, verifyOtt } from "../api/user";
 import { PAGES } from "../constants/pages";
 import { configureSRP } from "../services/srp";
+import type { PageProps } from "../types/page";
 import type { SRPSetupAttributes } from "../types/srp";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
diff --git a/web/packages/accounts/types/page.ts b/web/packages/accounts/types/page.ts
new file mode 100644
index 000000000..490967ae3
--- /dev/null
+++ b/web/packages/accounts/types/page.ts
@@ -0,0 +1,16 @@
+import type { BaseAppContextT } from "@/next/types/app";
+
+/**
+ * The default type for pages exposed by this package.
+ *
+ * Some specific pages might extend this further (e.g. the two-factor/recover).
+ */
+export interface PageProps {
+    /**
+     * The common denominator AppContext.
+     *
+     * Within this package we do not have access to the context object declared
+     * with the app's code, so we need to take the context as a parameter.
+     */
+    appContext: BaseAppContextT;
+}
diff --git a/web/packages/shared/apps/types.ts b/web/packages/shared/apps/types.ts
deleted file mode 100644
index 54424f146..000000000
--- a/web/packages/shared/apps/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { BaseAppContextT } from "@/next/types/app";
-import { TwoFactorType } from "@ente/accounts/constants/twofactor";
-import { APPS } from "./constants";
-
-export interface PageProps {
-    appContext: BaseAppContextT;
-    appName?: APPS;
-    twoFactorType?: TwoFactorType;
-}
diff --git a/web/packages/shared/components/RecoveryKey/index.tsx b/web/packages/shared/components/RecoveryKey/index.tsx
index b9534e0a2..5bd261960 100644
--- a/web/packages/shared/components/RecoveryKey/index.tsx
+++ b/web/packages/shared/components/RecoveryKey/index.tsx
@@ -1,5 +1,4 @@
 import { ensure } from "@/utils/ensure";
-import type { PageProps } from "@ente/shared/apps/types";
 import CodeBlock from "@ente/shared/components/CodeBlock";
 import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton";
 import { getRecoveryKey } from "@ente/shared/crypto/helpers";
@@ -22,13 +21,13 @@ bip39.setDefaultWordlist("english");
 const RECOVERY_KEY_FILE_NAME = "ente-recovery-key.txt";
 
 interface Props {
-    appContext: PageProps["appContext"];
+    isMobile: boolean;
     show: boolean;
     onHide: () => void;
     somethingWentWrong: any;
 }
 
-function RecoveryKey({ somethingWentWrong, appContext, ...props }: Props) {
+function RecoveryKey({ somethingWentWrong, isMobile, ...props }: Props) {
     const [recoveryKey, setRecoveryKey] = useState<string | null>(null);
 
     useEffect(() => {
@@ -54,7 +53,7 @@ function RecoveryKey({ somethingWentWrong, appContext, ...props }: Props) {
 
     return (
         <Dialog
-            fullScreen={appContext.isMobile}
+            fullScreen={isMobile}
             open={props.show}
             onClose={props.onHide}
             maxWidth="xs"