diff --git a/web/apps/accounts/src/pages/credentials/index.tsx b/web/apps/accounts/src/pages/credentials/index.tsx
index 453a61315..306efc7b8 100644
--- a/web/apps/accounts/src/pages/credentials/index.tsx
+++ b/web/apps/accounts/src/pages/credentials/index.tsx
@@ -1,17 +1,9 @@
 import CredentialPage from "@ente/accounts/pages/credentials";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { useContext } from "react";
 import { AppContext } from "../_app";
 
 export default function Credential() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <CredentialPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
+    return <CredentialPage appContext={appContext} appName={APPS.ACCOUNTS} />;
 }
diff --git a/web/apps/accounts/src/pages/generate/index.tsx b/web/apps/accounts/src/pages/generate/index.tsx
index 84d8f5227..ff1b6aa1f 100644
--- a/web/apps/accounts/src/pages/generate/index.tsx
+++ b/web/apps/accounts/src/pages/generate/index.tsx
@@ -1,17 +1,9 @@
 import GeneratePage from "@ente/accounts/pages/generate";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Generate() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <GeneratePage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
+    return <GeneratePage appContext={appContext} appName={APPS.ACCOUNTS} />;
 }
diff --git a/web/apps/accounts/src/pages/login/index.tsx b/web/apps/accounts/src/pages/login/index.tsx
index a6ca13492..0631a7bd1 100644
--- a/web/apps/accounts/src/pages/login/index.tsx
+++ b/web/apps/accounts/src/pages/login/index.tsx
@@ -1,17 +1,9 @@
 import LoginPage from "@ente/accounts/pages/login";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { useContext } from "react";
 import { AppContext } from "../_app";
 
 export default function Login() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <LoginPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
+    return <LoginPage appContext={appContext} appName={APPS.ACCOUNTS} />;
 }
diff --git a/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx b/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx
index aea836f6e..f992e3961 100644
--- a/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx
+++ b/web/apps/accounts/src/pages/passkeys/flow/Recover.tsx
@@ -1,17 +1,14 @@
 import { TwoFactorType } from "@ente/accounts/constants/twofactor";
 import RecoverPage from "@ente/accounts/pages/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Recover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
         <RecoverPage
             appContext={appContext}
-            router={router}
             appName={APPS.PHOTOS}
             twoFactorType={TwoFactorType.PASSKEY}
         />
diff --git a/web/apps/accounts/src/pages/recover/index.tsx b/web/apps/accounts/src/pages/recover/index.tsx
index 6f718a207..043e16555 100644
--- a/web/apps/accounts/src/pages/recover/index.tsx
+++ b/web/apps/accounts/src/pages/recover/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Recover() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <RecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
+    return <RecoverPage appContext={appContext} appName={APPS.ACCOUNTS} />;
 }
diff --git a/web/apps/accounts/src/pages/signup/index.tsx b/web/apps/accounts/src/pages/signup/index.tsx
index 1e0f576a6..40d073cf5 100644
--- a/web/apps/accounts/src/pages/signup/index.tsx
+++ b/web/apps/accounts/src/pages/signup/index.tsx
@@ -1,17 +1,9 @@
 import SignupPage from "@ente/accounts/pages/signup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Sigup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <SignupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
+    return <SignupPage appContext={appContext} appName={APPS.ACCOUNTS} />;
 }
diff --git a/web/apps/accounts/src/pages/two-factor/recover/index.tsx b/web/apps/accounts/src/pages/two-factor/recover/index.tsx
index e6b2036fa..cd6aa4b84 100644
--- a/web/apps/accounts/src/pages/two-factor/recover/index.tsx
+++ b/web/apps/accounts/src/pages/two-factor/recover/index.tsx
@@ -8,10 +8,6 @@ export default function TwoFactorRecover() {
     const appContext = useContext(AppContext);
     const router = useRouter();
     return (
-        <TwoFactorRecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
+        <TwoFactorRecoverPage appContext={appContext} appName={APPS.ACCOUNTS} />
     );
 }
diff --git a/web/apps/accounts/src/pages/two-factor/setup/index.tsx b/web/apps/accounts/src/pages/two-factor/setup/index.tsx
index f1b0e8f76..f1283e870 100644
--- a/web/apps/accounts/src/pages/two-factor/setup/index.tsx
+++ b/web/apps/accounts/src/pages/two-factor/setup/index.tsx
@@ -1,17 +1,11 @@
 import TwoFactorSetupPage from "@ente/accounts/pages/two-factor/setup";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorSetup() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorSetupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
+        <TwoFactorSetupPage appContext={appContext} appName={APPS.ACCOUNTS} />
     );
 }
diff --git a/web/apps/accounts/src/pages/two-factor/verify/index.tsx b/web/apps/accounts/src/pages/two-factor/verify/index.tsx
index b17882d3b..fd4c2ce09 100644
--- a/web/apps/accounts/src/pages/two-factor/verify/index.tsx
+++ b/web/apps/accounts/src/pages/two-factor/verify/index.tsx
@@ -1,17 +1,11 @@
 import TwoFactorVerifyPage from "@ente/accounts/pages/two-factor/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorVerify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorVerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
+        <TwoFactorVerifyPage appContext={appContext} appName={APPS.ACCOUNTS} />
     );
 }
diff --git a/web/apps/accounts/src/pages/verify/index.tsx b/web/apps/accounts/src/pages/verify/index.tsx
index 467419d0a..b15311d5c 100644
--- a/web/apps/accounts/src/pages/verify/index.tsx
+++ b/web/apps/accounts/src/pages/verify/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Verify() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <VerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.ACCOUNTS}
-        />
-    );
+    return <VerifyPage appContext={appContext} appName={APPS.ACCOUNTS} />;
 }
diff --git a/web/apps/auth/src/pages/404.tsx b/web/apps/auth/src/pages/404.tsx
index edb4ae7f7..6cca72b77 100644
--- a/web/apps/auth/src/pages/404.tsx
+++ b/web/apps/auth/src/pages/404.tsx
@@ -1,17 +1,9 @@
 import { APPS } from "@ente/shared/apps/constants";
 import NotFoundPage from "@ente/shared/next/pages/404";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function NotFound() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <NotFoundPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <NotFoundPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/change-email/index.tsx b/web/apps/auth/src/pages/change-email/index.tsx
index 3bd1e89ab..8be39d9e8 100644
--- a/web/apps/auth/src/pages/change-email/index.tsx
+++ b/web/apps/auth/src/pages/change-email/index.tsx
@@ -1,17 +1,9 @@
 import ChangeEmailPage from "@ente/accounts/pages/change-email";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function ChangeEmail() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <ChangeEmailPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <ChangeEmailPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/change-password/index.tsx b/web/apps/auth/src/pages/change-password/index.tsx
index 567748755..a1bd69eb1 100644
--- a/web/apps/auth/src/pages/change-password/index.tsx
+++ b/web/apps/auth/src/pages/change-password/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function ChangePassword() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <ChangePasswordPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <ChangePasswordPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/credentials/index.tsx b/web/apps/auth/src/pages/credentials/index.tsx
index c73a22089..9b3c0c9c5 100644
--- a/web/apps/auth/src/pages/credentials/index.tsx
+++ b/web/apps/auth/src/pages/credentials/index.tsx
@@ -1,17 +1,9 @@
 import CredentialPage from "@ente/accounts/pages/credentials";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Credential() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <CredentialPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <CredentialPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/generate/index.tsx b/web/apps/auth/src/pages/generate/index.tsx
index fe488e0c2..df3851357 100644
--- a/web/apps/auth/src/pages/generate/index.tsx
+++ b/web/apps/auth/src/pages/generate/index.tsx
@@ -1,17 +1,9 @@
 import GeneratePage from "@ente/accounts/pages/generate";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Generate() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <GeneratePage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <GeneratePage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/login/index.tsx b/web/apps/auth/src/pages/login/index.tsx
index 434a31557..42a2d1777 100644
--- a/web/apps/auth/src/pages/login/index.tsx
+++ b/web/apps/auth/src/pages/login/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Login() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <LoginPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <LoginPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/recover/index.tsx b/web/apps/auth/src/pages/recover/index.tsx
index 9629de5d6..cd38d4dee 100644
--- a/web/apps/auth/src/pages/recover/index.tsx
+++ b/web/apps/auth/src/pages/recover/index.tsx
@@ -6,12 +6,5 @@ import { useContext } from "react";
 
 export default function Recover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <RecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <RecoverPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/signup/index.tsx b/web/apps/auth/src/pages/signup/index.tsx
index b7cbccd97..7f94d09ab 100644
--- a/web/apps/auth/src/pages/signup/index.tsx
+++ b/web/apps/auth/src/pages/signup/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Sigup() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <SignupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <SignupPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/two-factor/recover/index.tsx b/web/apps/auth/src/pages/two-factor/recover/index.tsx
index 965a77755..a67c7b816 100644
--- a/web/apps/auth/src/pages/two-factor/recover/index.tsx
+++ b/web/apps/auth/src/pages/two-factor/recover/index.tsx
@@ -1,17 +1,9 @@
 import TwoFactorRecoverPage from "@ente/accounts/pages/two-factor/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorRecover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <TwoFactorRecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <TwoFactorRecoverPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/two-factor/setup/index.tsx b/web/apps/auth/src/pages/two-factor/setup/index.tsx
index 4a027ded6..1cc67a107 100644
--- a/web/apps/auth/src/pages/two-factor/setup/index.tsx
+++ b/web/apps/auth/src/pages/two-factor/setup/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function TwoFactorSetup() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <TwoFactorSetupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <TwoFactorSetupPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/two-factor/verify/index.tsx b/web/apps/auth/src/pages/two-factor/verify/index.tsx
index 1c90e49a8..3f27b09b8 100644
--- a/web/apps/auth/src/pages/two-factor/verify/index.tsx
+++ b/web/apps/auth/src/pages/two-factor/verify/index.tsx
@@ -1,17 +1,9 @@
 import TwoFactorVerifyPage from "@ente/accounts/pages/two-factor/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
-import { AppContext } from "pages/_app";
+import { AppContext } from "../../_app";
 import { useContext } from "react";
 
 export default function TwoFactorVerify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <TwoFactorVerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <TwoFactorVerifyPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/auth/src/pages/verify/index.tsx b/web/apps/auth/src/pages/verify/index.tsx
index ff3317cab..b232093cc 100644
--- a/web/apps/auth/src/pages/verify/index.tsx
+++ b/web/apps/auth/src/pages/verify/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Verify() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <VerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <VerifyPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/photos/src/pages/404.tsx b/web/apps/photos/src/pages/404.tsx
index edb4ae7f7..0553510c5 100644
--- a/web/apps/photos/src/pages/404.tsx
+++ b/web/apps/photos/src/pages/404.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function NotFound() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <NotFoundPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.AUTH}
-        />
-    );
+    return <NotFoundPage appContext={appContext} appName={APPS.AUTH} />;
 }
diff --git a/web/apps/photos/src/pages/change-email/index.tsx b/web/apps/photos/src/pages/change-email/index.tsx
index bb4c111dc..a00159650 100644
--- a/web/apps/photos/src/pages/change-email/index.tsx
+++ b/web/apps/photos/src/pages/change-email/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function ChangeEmail() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <ChangeEmailPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <ChangeEmailPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/change-password/index.tsx b/web/apps/photos/src/pages/change-password/index.tsx
index 33e44c938..8d8121d6a 100644
--- a/web/apps/photos/src/pages/change-password/index.tsx
+++ b/web/apps/photos/src/pages/change-password/index.tsx
@@ -1,17 +1,9 @@
 import ChangePasswordPage from "@ente/accounts/pages/change-password";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function ChangePassword() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <ChangePasswordPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <ChangePasswordPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/credentials/index.tsx b/web/apps/photos/src/pages/credentials/index.tsx
index 6e6612074..fe669afab 100644
--- a/web/apps/photos/src/pages/credentials/index.tsx
+++ b/web/apps/photos/src/pages/credentials/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Credential() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <CredentialPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <CredentialPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/generate/index.tsx b/web/apps/photos/src/pages/generate/index.tsx
index 79a9007ef..5d62c93bc 100644
--- a/web/apps/photos/src/pages/generate/index.tsx
+++ b/web/apps/photos/src/pages/generate/index.tsx
@@ -1,17 +1,9 @@
 import GeneratePage from "@ente/accounts/pages/generate";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Generate() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <GeneratePage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <GeneratePage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/login/index.tsx b/web/apps/photos/src/pages/login/index.tsx
index 8709af06c..84539e2f3 100644
--- a/web/apps/photos/src/pages/login/index.tsx
+++ b/web/apps/photos/src/pages/login/index.tsx
@@ -1,17 +1,9 @@
 import LoginPage from "@ente/accounts/pages/login";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Login() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <LoginPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <LoginPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/recover/index.tsx b/web/apps/photos/src/pages/recover/index.tsx
index b3e16175f..5d2359aa5 100644
--- a/web/apps/photos/src/pages/recover/index.tsx
+++ b/web/apps/photos/src/pages/recover/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Recover() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <RecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <RecoverPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/signup/index.tsx b/web/apps/photos/src/pages/signup/index.tsx
index 7c0409a02..179441436 100644
--- a/web/apps/photos/src/pages/signup/index.tsx
+++ b/web/apps/photos/src/pages/signup/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function Sigup() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <SignupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <SignupPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/two-factor/recover/index.tsx b/web/apps/photos/src/pages/two-factor/recover/index.tsx
index dcfb6fc15..f3f820d6e 100644
--- a/web/apps/photos/src/pages/two-factor/recover/index.tsx
+++ b/web/apps/photos/src/pages/two-factor/recover/index.tsx
@@ -1,17 +1,11 @@
 import TwoFactorRecoverPage from "@ente/accounts/pages/two-factor/recover";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorRecover() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorRecoverPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
+        <TwoFactorRecoverPage appContext={appContext} appName={APPS.PHOTOS} />
     );
 }
diff --git a/web/apps/photos/src/pages/two-factor/setup/index.tsx b/web/apps/photos/src/pages/two-factor/setup/index.tsx
index b357018ee..198a73ad6 100644
--- a/web/apps/photos/src/pages/two-factor/setup/index.tsx
+++ b/web/apps/photos/src/pages/two-factor/setup/index.tsx
@@ -7,11 +7,5 @@ import { useContext } from "react";
 export default function TwoFactorSetup() {
     const appContext = useContext(AppContext);
     const router = useRouter();
-    return (
-        <TwoFactorSetupPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <TwoFactorSetupPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/pages/two-factor/verify/index.tsx b/web/apps/photos/src/pages/two-factor/verify/index.tsx
index a61852821..65914dcdf 100644
--- a/web/apps/photos/src/pages/two-factor/verify/index.tsx
+++ b/web/apps/photos/src/pages/two-factor/verify/index.tsx
@@ -1,17 +1,11 @@
 import TwoFactorVerifyPage from "@ente/accounts/pages/two-factor/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function TwoFactorVerify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
     return (
-        <TwoFactorVerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
+        <TwoFactorVerifyPage appContext={appContext} appName={APPS.PHOTOS} />
     );
 }
diff --git a/web/apps/photos/src/pages/verify/index.tsx b/web/apps/photos/src/pages/verify/index.tsx
index 9eeb6db60..081ea9e5e 100644
--- a/web/apps/photos/src/pages/verify/index.tsx
+++ b/web/apps/photos/src/pages/verify/index.tsx
@@ -1,17 +1,9 @@
 import VerifyPage from "@ente/accounts/pages/verify";
 import { APPS } from "@ente/shared/apps/constants";
-import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
 import { useContext } from "react";
 
 export default function Verify() {
     const appContext = useContext(AppContext);
-    const router = useRouter();
-    return (
-        <VerifyPage
-            appContext={appContext}
-            router={router}
-            appName={APPS.PHOTOS}
-        />
-    );
+    return <VerifyPage appContext={appContext} appName={APPS.PHOTOS} />;
 }
diff --git a/web/apps/photos/src/services/heic-convert/heic-convert.ts b/web/apps/photos/src/services/heic-convert/heic-convert.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/apps/photos/src/utils/file/index.ts b/web/apps/photos/src/utils/file/index.ts
index fd6a08da3..8ae0a9562 100644
--- a/web/apps/photos/src/utils/file/index.ts
+++ b/web/apps/photos/src/utils/file/index.ts
@@ -1,6 +1,7 @@
 import { logError } from "@ente/shared/sentry";
 import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
 import { User } from "@ente/shared/user/types";
+import { downloadUsingAnchor } from "@ente/shared/utils";
 import {
     FILE_TYPE,
     RAW_FORMATS,
diff --git a/web/packages/accounts/pages/change-email.tsx b/web/packages/accounts/pages/change-email.tsx
index 007db9049..cf5c83079 100644
--- a/web/packages/accounts/pages/change-email.tsx
+++ b/web/packages/accounts/pages/change-email.tsx
@@ -23,11 +23,7 @@ function ChangeEmailPage({ appName, appContext }: PageProps) {
         <VerticallyCentered>
             <FormPaper>
                 <FormPaperTitle>{t("CHANGE_EMAIL")}</FormPaperTitle>
-                <ChangeEmailForm
-                    router={router}
-                    appName={appName}
-                    appContext={appContext}
-                />
+                <ChangeEmailForm appName={appName} appContext={appContext} />
             </FormPaper>
         </VerticallyCentered>
     );
diff --git a/web/packages/accounts/pages/two-factor/recover.tsx b/web/packages/accounts/pages/two-factor/recover.tsx
index fcaf05eab..7a589b9ab 100644
--- a/web/packages/accounts/pages/two-factor/recover.tsx
+++ b/web/packages/accounts/pages/two-factor/recover.tsx
@@ -23,6 +23,7 @@ import { ApiError } from "@ente/shared/error";
 import { Link } from "@mui/material";
 import { HttpStatusCode } from "axios";
 import { t } from "i18next";
+import { useRouter } from "next/router";
 import { Trans } from "react-i18next";
 
 const bip39 = require("bip39");
@@ -30,7 +31,6 @@ const bip39 = require("bip39");
 bip39.setDefaultWordlist("english");
 
 export default function Recover({
-    router,
     appContext,
     twoFactorType = TwoFactorType.TOTP,
 }: PageProps) {
@@ -40,6 +40,8 @@ export default function Recover({
     const [doesHaveEncryptedRecoveryKey, setDoesHaveEncryptedRecoveryKey] =
         useState(false);
 
+    const router = useRouter();
+
     useEffect(() => {
         const user = getData(LS_KEYS.USER);
         if (!user || !user.email || !user.twoFactorSessionID) {
diff --git a/web/packages/accounts/pages/two-factor/setup.tsx b/web/packages/accounts/pages/two-factor/setup.tsx
index e887c21f2..bf22ea1c9 100644
--- a/web/packages/accounts/pages/two-factor/setup.tsx
+++ b/web/packages/accounts/pages/two-factor/setup.tsx
@@ -1,7 +1,4 @@
 import { enableTwoFactor, setupTwoFactor } from "@ente/accounts/api/user";
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-
 import VerifyTwoFactor, {
     VerifyTwoFactorCallback,
 } from "@ente/accounts/components/two-factor/VerifyForm";
@@ -16,16 +13,21 @@ import { logError } from "@ente/shared/sentry";
 import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
 import { Box, CardContent, Typography } from "@mui/material";
 import Card from "@mui/material/Card";
+import { t } from "i18next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 export enum SetupMode {
     QR_CODE,
     MANUAL_CODE,
 }
 
-export default function SetupTwoFactor({ router, appName }: PageProps) {
+export default function SetupTwoFactor({ appName }: PageProps) {
     const [twoFactorSecret, setTwoFactorSecret] =
         useState<TwoFactorSecret>(null);
 
+    const router = useRouter();
+
     useEffect(() => {
         if (twoFactorSecret) {
             return;
diff --git a/web/packages/accounts/pages/two-factor/verify.tsx b/web/packages/accounts/pages/two-factor/verify.tsx
index c10759f19..5498211ae 100644
--- a/web/packages/accounts/pages/two-factor/verify.tsx
+++ b/web/packages/accounts/pages/two-factor/verify.tsx
@@ -4,12 +4,7 @@ import VerifyTwoFactor, {
 } from "@ente/accounts/components/two-factor/VerifyForm";
 import { PAGES } from "@ente/accounts/constants/pages";
 import { logoutUser } from "@ente/accounts/services/user";
-import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
-import { User } from "@ente/shared/user/types";
-import { t } from "i18next";
-import { useEffect, useState } from "react";
-
-import { PageProps } from "@ente/shared/apps/types";
+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";
@@ -17,11 +12,18 @@ import FormTitle from "@ente/shared/components/Form/FormPaper/Title";
 import LinkButton from "@ente/shared/components/LinkButton";
 import { ApiError } from "@ente/shared/error";
 import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
+import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
+import { User } from "@ente/shared/user/types";
 import { HttpStatusCode } from "axios";
+import { t } from "i18next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
-export default function TwoFactorVerify({ router }: PageProps) {
+export const TwoFactorVerify: React.FC<PageProps> = () => {
     const [sessionID, setSessionID] = useState("");
 
+    const router = useRouter();
+
     useEffect(() => {
         const main = async () => {
             const user: User = getData(LS_KEYS.USER);
@@ -84,4 +86,6 @@ export default function TwoFactorVerify({ router }: PageProps) {
             </FormPaper>
         </VerticallyCentered>
     );
-}
+};
+
+export default TwoFactorVerify;
diff --git a/web/packages/accounts/pages/verify.tsx b/web/packages/accounts/pages/verify.tsx
index 6f657d95a..6515a96b7 100644
--- a/web/packages/accounts/pages/verify.tsx
+++ b/web/packages/accounts/pages/verify.tsx
@@ -26,16 +26,19 @@ import { clearKeys } from "@ente/shared/storage/sessionStorage";
 import { KeyAttributes, User } from "@ente/shared/user/types";
 import { Box, Typography } from "@mui/material";
 import { HttpStatusCode } from "axios";
+import { useRouter } from "next/router";
 import { putAttributes, sendOtt, verifyOtt } from "../api/user";
 import { PAGES } from "../constants/pages";
 import { configureSRP } from "../services/srp";
 import { logoutUser } from "../services/user";
 import { SRPSetupAttributes } from "../types/srp";
 
-export default function VerifyPage({ appContext, router, appName }: PageProps) {
+export default function VerifyPage({ appContext, appName }: PageProps) {
     const [email, setEmail] = useState("");
     const [resend, setResend] = useState(0);
 
+    const router = useRouter();
+
     useEffect(() => {
         const main = async () => {
             const user: User = getData(LS_KEYS.USER);
diff --git a/web/packages/shared/utils/index.ts b/web/packages/shared/utils/index.ts
index 6a9df7e1f..1ed02fabe 100644
--- a/web/packages/shared/utils/index.ts
+++ b/web/packages/shared/utils/index.ts
@@ -29,8 +29,9 @@ export function isPromise<T>(obj: T | Promise<T>): obj is Promise<T> {
 
 export async function retryAsyncFunction<T>(
     request: (abort?: () => void) => Promise<T>,
+    waitTimeBeforeNextTry?: number[],
 ): Promise<T> {
-    const waitTimeBeforeNextTry = [2000, 5000, 10000];
+    if (!waitTimeBeforeNextTry) waitTimeBeforeNextTry = [2000, 5000, 10000];
 
     for (
         let attemptNumber = 0;